diff --git a/examples/react-template/screens/Box.tsx b/examples/react-template/screens/Box.tsx index cb1d0b96..4e886aae 100644 --- a/examples/react-template/screens/Box.tsx +++ b/examples/react-template/screens/Box.tsx @@ -19,7 +19,7 @@ import { Title, TitleLevels } from '@trilogy-ds/react/components' -import {TrilogyColor, TypographyAlign} from '@trilogy-ds/react/objects' +import {TrilogyColor, TypographyAlign, VariantState} from '@trilogy-ds/react/objects' export const BoxScreen = (): JSX.Element => { const [active, setActive] = React.useState(false); @@ -108,7 +108,7 @@ export const BoxScreen = (): JSX.Element => { - Box with Header and Content + Box with Header and Content Background color is faded. diff --git a/examples/react-template/screens/Breadcrumb.tsx b/examples/react-template/screens/Breadcrumb.tsx index 5011ab5f..f93342c6 100644 --- a/examples/react-template/screens/Breadcrumb.tsx +++ b/examples/react-template/screens/Breadcrumb.tsx @@ -74,11 +74,11 @@ export const BreadcrumScreen = (): JSX.Element => { Breadcrumb in rows - + - + Home Catalog diff --git a/examples/react-template/screens/Column.tsx b/examples/react-template/screens/Column.tsx index d5db2e6f..e687e4a1 100644 --- a/examples/react-template/screens/Column.tsx +++ b/examples/react-template/screens/Column.tsx @@ -19,61 +19,121 @@ import { TitleLevels } from '@trilogy-ds/react/components' import {GapSize} from "@trilogy-ds/react/lib/components/columns/ColumnsTypes"; +import {Alignable, TrilogyColor} from "@trilogy-ds/react"; export const ColumnScreen = (): JSX.Element => { return (
- - - Test - Test - Test - - - - - - Test - Test - Test - - - - - - Test - Test - Test - - + Gap, size + Columns with gap size 5 + + + + Size=4 + + + + + Size=6 + + + + + Size=2 + + - - - Test - Test - Test - Test - Test - Test - - + + Columns with gap size 0 (gapless). The first Item is narrow, the width depend of his content. + + + + Is Narrow + + + + + Size=6 + + + + + Size=2 + + + + Mobile force column to stay in one row on mobile device. In this case, narrow take the maximum width left. + + + + Is Narrow + + + + + Size=6 + + + + + Size=2 + + + + Multiline + Columns is multiline + + { + Object.values([1,2,3,4,5,6,7,8,9,10,11,12]).map( (colSize, index) => { + return ( + + + Size : {colSize} + + + )} + )} + - - - Test - Test - Test - - + + Scollable and Fullblead + Columns is scrollable (Add mobile to force columns to stay in one row) + + { + Object.values([1,2,3,4,5,6,7,8,9,10,11,12]).map( (colSize, index) => { + return ( + + + Size : {colSize} + + + )} + )} + + + Columns is scrollable and fullbleed. + + { + Object.values([1,2,3,4,5,6,7,8,9,10,11,12]).map( (colSize, index) => { + return ( + + + Size : {colSize} + + + )} + )} + - Multiline + Sample with contents : Multiline - - + + + Overline @@ -103,14 +163,17 @@ export const ColumnScreen = (): JSX.Element => { - + + + + + - Overline + Overline Card Title - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ligula ex, aliquam at neque eu, vulputate - vera. + Lorem ipsum dolor sit amet @@ -125,8 +188,7 @@ export const ColumnScreen = (): JSX.Element => { Overline Card Title - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ligula ex, aliquam at neque eu, vulputate - vera. + Lorem ipsum dolor sit amet. @@ -138,7 +200,7 @@ export const ColumnScreen = (): JSX.Element => { - Overline + Overline Card Title Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ligula ex, aliquam at neque eu, vulputate @@ -167,7 +229,7 @@ export const ColumnScreen = (): JSX.Element => { - + Overline @@ -183,16 +245,14 @@ export const ColumnScreen = (): JSX.Element => { - - Columns : nb-cols-1 peek and full-bleed - - + Overline Card Title - Lorem ipsum dolor sit amet. + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ligula ex, aliquam at neque eu, vulputate + vera. @@ -201,21 +261,14 @@ export const ColumnScreen = (): JSX.Element => { - - - - size : 4 - - - - - + Overline - size=8 + Card Title - 4 + 8 = 12 + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ligula ex, aliquam at neque eu, vulputate + vera. @@ -224,14 +277,18 @@ export const ColumnScreen = (): JSX.Element => { - + + + + Sample with contents : Scrollable Fullbledd + + Overline Card Title - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ligula ex, aliquam at neque eu, vulputate - vera. + Lorem ipsum dolor sit amet. @@ -240,30 +297,21 @@ export const ColumnScreen = (): JSX.Element => { - - + + - Overline - Card Title - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ligula ex, aliquam at neque eu, vulputate - vera. - + size : 4 - - - - - + + Overline - Card Title + size=8 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ligula ex, aliquam at neque eu, vulputate - vera. + 4 + 8 = 12 @@ -272,8 +320,8 @@ export const ColumnScreen = (): JSX.Element => { - - + + Overline Card Title @@ -288,7 +336,7 @@ export const ColumnScreen = (): JSX.Element => { - + Overline @@ -305,48 +353,9 @@ export const ColumnScreen = (): JSX.Element => { - - - Column 1 - - - Column 2 - - - Column 3 - - - Column 4 - - - Column 5 - - - - - - Test - Column size 8 - - - - - Test - Column narrow - - - - - - - Test - Colmumns size 3 - - - - Scrollable + Another example : 6 cards scrollable @@ -408,6 +417,36 @@ export const ColumnScreen = (): JSX.Element => { + + + + + Desktop Card Vertical + Card Title + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ligula ex, aliquam at neque eu, + vulputate + vera. + + + + + + + + + + Desktop Card Vertical + Card Title + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ligula ex, aliquam at neque eu, + vulputate + vera. + + + + +
); diff --git a/examples/react-template/screens/Container.tsx b/examples/react-template/screens/Container.tsx index 21f79fef..c73f0b61 100644 --- a/examples/react-template/screens/Container.tsx +++ b/examples/react-template/screens/Container.tsx @@ -49,7 +49,7 @@ export const ContainerScreen = (): JSX.Element => {
fullwidth - + Fullwidth content @@ -60,7 +60,7 @@ export const ContainerScreen = (): JSX.Element => {
centré - + content centered diff --git a/examples/react-template/screens/Hero.tsx b/examples/react-template/screens/Hero.tsx index c377787e..2d1aa250 100644 --- a/examples/react-template/screens/Hero.tsx +++ b/examples/react-template/screens/Hero.tsx @@ -43,7 +43,7 @@ export const HeroScreen = (): JSX.Element => {
- + Welcome Message Hero with image background {/* */} @@ -58,7 +58,7 @@ export const HeroScreen = (): JSX.Element => { - + Welcome Message Hero with Background Color {/* */} diff --git a/examples/react-template/screens/Selector.tsx b/examples/react-template/screens/Selector.tsx deleted file mode 100644 index 74c17a12..00000000 --- a/examples/react-template/screens/Selector.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import * as React from 'react' -import { Section, AutoLayout, Selector, SelectorItem, SpacerSize } from '@trilogy-ds/react/components' -import { Alignable } from '@trilogy-ds/react/objects' - -export const SelectorView = (): JSX.Element => { - return ( -
- - - - Selector One - - - Selector Two - - - Selector Three - - - -
- ) -} diff --git a/examples/react-template/screens/index.ts b/examples/react-template/screens/index.ts index 72e7c79d..2f720f36 100644 --- a/examples/react-template/screens/index.ts +++ b/examples/react-template/screens/index.ts @@ -32,7 +32,6 @@ export * from './Radio' export * from './Range' export * from './SegmentedControl' export * from './Select' -export * from './Selector' export * from './Stepper' export * from './Sticker' export * from './Switch' diff --git a/packages/react/components/box/header/BoxHeaderProps.ts b/packages/react/components/box/header/BoxHeaderProps.ts index 2d3b3820..38e7167f 100644 --- a/packages/react/components/box/header/BoxHeaderProps.ts +++ b/packages/react/components/box/header/BoxHeaderProps.ts @@ -1,11 +1,11 @@ /** * Box Header Interface */ -import { Accessibility, Centerable, Position, TrilogyColor, TrilogyColorValues } from '@/objects' +import {Accessibility, Centerable, Position, TrilogyColor, TrilogyColorValues, VariantState, StatusState} from '@/objects' export interface BoxHeaderProps extends Position, Centerable, Accessibility { children?: React.ReactNode help?: string className?: string - variant?: TrilogyColor | TrilogyColorValues + variant?: VariantState | StatusState } diff --git a/packages/react/components/button/list/ButtonListProps.ts b/packages/react/components/button/list/ButtonListProps.ts index 3ec23701..50fb83a5 100644 --- a/packages/react/components/button/list/ButtonListProps.ts +++ b/packages/react/components/button/list/ButtonListProps.ts @@ -1,4 +1,4 @@ -import type { Centerable, Layout } from '@/objects' +import type { Centerable } from '@/objects' import type { DividerProps } from '@/components/divider/DividerProps' import type { ButtonProps } from '@/components/button/ButtonProps' @@ -7,7 +7,7 @@ type ButtonListChildrenTypes = React.ReactElement | /** * Button List Interface */ -export interface ButtonListProps extends Layout { +export interface ButtonListProps { children?: ButtonListChildrenTypes | ButtonListChildrenTypes[] } diff --git a/packages/react/components/columns/Columns.native.tsx b/packages/react/components/columns/Columns.native.tsx index ccf66bd9..e1445e02 100644 --- a/packages/react/components/columns/Columns.native.tsx +++ b/packages/react/components/columns/Columns.native.tsx @@ -4,14 +4,14 @@ import { View } from "@/components/view" import { ColumnsProps } from "./ColumnsProps" import { ComponentName } from "@/components/enumsComponentsName" import { ColumnsGapValue, GapSize } from "@/components/columns/ColumnsTypes" +import { getAlignStyle } from "@/objects" /** * Columns Native Component * @param children {React.ReactNode} * @param centered {boolean} Center columns * @param verticalCentered {boolean} Vertical centered columns - * @param marginSize {ColumnsSize} Removes margins between columns of the specified size - * @param scrollable {boolean} Makes columns vertically scrollable. Note: Incompatible with 'marginSize' prop + * @param scrollable {boolean} Makes columns vertically scrollable. * @param gap {GapSize} Gap between columns */ @@ -21,8 +21,7 @@ const Columns = ({ children, centered, gap, - nbCols, - verticalCentered, + verticalAlign, fullBleed, scrollable, multiline, @@ -57,7 +56,7 @@ const Columns = ({ alignSelf: "center", }, verticalAlign: { - alignItems: "center" + alignItems: getAlignStyle(verticalAlign) }, multiline: { flexWrap: "wrap", @@ -81,7 +80,7 @@ const Columns = ({ styles.columns, multiline && styles.multiline, centered && styles.centered, - verticalCentered && styles.verticalAlign, + verticalAlign && styles.verticalAlign, ]} {...others} {...{ onLayout: onLayoutHandler }} @@ -91,7 +90,7 @@ const Columns = ({ child && React.cloneElement(child, { style: [child.props.style, - { width: nbCols && (width / nbCols) - realGap || child.props.size && (width * child.props.size / 12) - realGap || 'auto' }, + { width: child.props.size && (width * child.props.size / 12) - realGap || 'auto' }, child.props.narrow && { flex: 'none', flexShrink: 1 }, ] }) diff --git a/packages/react/components/columns/Columns.tsx b/packages/react/components/columns/Columns.tsx index b2d21e2f..42b5e4cc 100644 --- a/packages/react/components/columns/Columns.tsx +++ b/packages/react/components/columns/Columns.tsx @@ -4,12 +4,12 @@ import { ColumnsProps } from "./ColumnsProps" import { is, has } from "@/services/classify" import { hashClass } from "@/helpers" import { useTrilogyContext } from "@/context" +import {getAlignClassName} from "@/objects"; /** * Columns Component * @param centered {boolean} Center columns * @param verticalCentered {boolean} Vertical centered columns - * @param marginSize {ColumnsSize} Delete margins between columns with Size * @param scrollable {boolean} Make colomns scrollable to vertical * @param children {React.ReactNode} * @param marginless {boolean} delete margin @@ -23,13 +23,11 @@ const Columns = React.forwardRef((props:ColumnsProps, ref: React.LegacyRef { +const ColumnsItem = ({ children, size, mobileSize, verticalCentered, ...others }: ColumnsItemProps): JSX.Element => { const columnsContextValues = useContext(ColumnsContext) const realSize = size || mobileSize @@ -24,7 +23,6 @@ const ColumnsItem = ({ children, size, mobileSize, verticalCentered, centered, a height: columnsContextValues.scrollable ? '100%' : undefined, flex: !realSize ? 1 : realSize, justifyContent: verticalCentered ? 'center' : 'flex-start', - alignItems: centered ? 'center' : align ? getAlignStyle(align) : 'baseline', flexBasis: `${(realSize ? realSize / 12 : 12) * 100}%`, flexGrow: 0, maxWidth: `${(realSize ? realSize : 12) / 12 * 100}%` diff --git a/packages/react/components/columns/item/ColumnsItem.tsx b/packages/react/components/columns/item/ColumnsItem.tsx index 312bc256..c3ca06ee 100644 --- a/packages/react/components/columns/item/ColumnsItem.tsx +++ b/packages/react/components/columns/item/ColumnsItem.tsx @@ -28,7 +28,7 @@ import { getAlignClassName } from "@/objects" * @param desktopOffset {ColumnsSize} Apply => is-offset-desktop * @param widescreenOffset {ColumnsSize} Apply => is-offset-widescreen * @param fullhdOffset {ColumnsSize} Apply => is-offset-fullhd - * @param align { Alignable | AlignableValues} align content + * @param verticalAlign { Alignable | AlignableValues} vertical align content */ const ColumnsItem = React.forwardRef((props: ColumnsItemProps, ref: React.LegacyRef) => { const { @@ -49,8 +49,6 @@ const ColumnsItem = React.forwardRef((props: ColumnsItemProps, ref: React.Legacy fullhdOffset, narrow, verticalCentered, - centered, - align, ...others } = props @@ -76,8 +74,6 @@ const ColumnsItem = React.forwardRef((props: ColumnsItemProps, ref: React.Legacy fullhdOffset && is(`offset-${fullhdOffset}-fullhd`), narrow && is("narrow"), verticalCentered && is("vcentered"), - centered && has("text-centered"), - align && is(getAlignClassName(align)), className ) ) diff --git a/packages/react/components/columns/item/ColumnsItemProps.ts b/packages/react/components/columns/item/ColumnsItemProps.ts index ce76a484..9538b9ad 100644 --- a/packages/react/components/columns/item/ColumnsItemProps.ts +++ b/packages/react/components/columns/item/ColumnsItemProps.ts @@ -1,10 +1,10 @@ -import { AlignableProps } from '@/objects' import { ColumnsSize } from '@/components/columns/ColumnsTypes' +import {Alignable, AlignableValues} from "@/objects"; /** * Columns Item Interface */ -export interface ColumnsItemProps extends AlignableProps { +export interface ColumnsItemProps { children?: React.ReactNode size?: ColumnsSize mobileSize?: ColumnsSize @@ -22,6 +22,5 @@ export interface ColumnsItemProps extends AlignableProps { fullhdOffset?: ColumnsSize narrow?: boolean className?: string - verticalCentered?: boolean - centered?: boolean + verticalCentered?:boolean } diff --git a/packages/react/components/container/Container.native.tsx b/packages/react/components/container/Container.native.tsx index 327d8f96..683e6185 100644 --- a/packages/react/components/container/Container.native.tsx +++ b/packages/react/components/container/Container.native.tsx @@ -1,86 +1,31 @@ import * as React from "react" import { StyleSheet, View } from "react-native" import { ContainerProps } from "./ContainerProps" -import { getColorStyle, StickyPosition, TrilogyColor, } from "@/objects" import { ComponentName } from "@/components/enumsComponentsName" /** * Container Native Component * @param autolayout {boolean} Apply auto-layout rules - * @param centered {boolean} Center all childrens of container - * @param verticalCentered {boolean} Align center vertically all content - * @param children {React.ReactNode} - * @param sticky {StickyPosition} Container sticky top / bottom - * @param stickyOffSetTop {Number | string} Set top of sticky container - * @param stickyOffSetBottom {Number | string} Set bottom of sticky container - * @param backgroundColor {TrilogyColor} Container sticky Background Color - * @param pulledRight {Boolean} Container pulled to right - * @param pulledLeft {Boolean} Container pulled to left - * @param paddingless {boolean} remove padding - * @param verticalPaddingless {boolean} remove vertical padding + * @param children {React.ReactNode */ const Container = ({ children, - centered, - verticalCentered, - paddingless, - verticalPaddingless, - pulledLeft, - pulledRight, - backgroundColor, - sticky, - stickyOffSetTop, - stickyOffSetBottom, ...others }: ContainerProps): JSX.Element => { const styles = StyleSheet.create({ container: { width: "100%", - paddingTop: paddingless || verticalPaddingless ? 0 : 24, - paddingBottom: paddingless || verticalPaddingless ? 0 : 24, - paddingRight: paddingless ? 0 : 24, - paddingLeft: paddingless ? 0 : 24, - alignItems: - (centered && "center") || - (pulledLeft && "flex-start") || - (pulledRight && "flex-end") || - "stretch", - justifyContent: verticalCentered ? "center" : "flex-start", - flex: verticalCentered ? 1 : 0, - backgroundColor: backgroundColor && getColorStyle(backgroundColor), - }, - - stickyTop: { - position: "absolute", - backgroundColor: backgroundColor - ? getColorStyle(backgroundColor) - : getColorStyle(TrilogyColor.BACKGROUND), - left: 0, - right: 0, - top: stickyOffSetTop ? stickyOffSetTop : 0, - marginTop: 0, - zIndex: 999, - }, - stickyBottom: { - backgroundColor: backgroundColor - ? getColorStyle(backgroundColor) - : getColorStyle(TrilogyColor.BACKGROUND), - width: "100%", - position: "absolute", - left: 0, - right: 0, - bottom: stickyOffSetBottom ? stickyOffSetBottom : 0, - zIndex: 999, + alignItems: "stretch", + justifyContent: "flex-start", + flex: 0, }, }) return ( = (args) => (<>
- + Pulled left diff --git a/packages/react/components/container/Container.tsx b/packages/react/components/container/Container.tsx index 1c3c27e6..a1f9fc4b 100644 --- a/packages/react/components/container/Container.tsx +++ b/packages/react/components/container/Container.tsx @@ -4,76 +4,32 @@ import { has, is } from "@/services/classify" import clsx from "clsx" import { hashClass } from "@/helpers" import { useTrilogyContext } from "@/context" -import { getBackgroundClassName, StickyPosition } from "@/objects" +import { getBackgroundClassName } from "@/objects" /** * Container Component - * @param centered {boolean} Centered horizontaly - * @param verticalCentered {boolean} Centered verticaly * @param children {React.ReactNode} - * @param sticky {StickyPosition} Container sticky top / bottom - * @param stickyOffSetTop {Number} Set top of sticky container (transformed in px) - * @param stickyOffSetBottom {Number} Set bottom of sticky container (transformed in px) - * @param backgroundColor {TrilogyColor} Container STICKY Background Color * @param medium {boolean} Set medium container - * - -------------------------- WEB PROPERTIES ------------------------------- * @param className {string} Additionnal CSS Classes - * @param backgroundSrc {string} - * @param inverted {boolean} Inverted - * - -------------------------- NATIVE PROPERTIES ------------------------------- - * @param paddingless {boolean} remove padding - * @param verticalPaddingless {boolean} remove vertical padding */ const Container = ({ className, - centered, - verticalCentered, medium, - fullwidth, - sticky, - stickyOffSetTop, - stickyOffSetBottom, - backgroundColor, - backgroundSrc, - inverted, ...others }: ContainerProps): JSX.Element => { const { styled } = useTrilogyContext() - const stickyClassName = () => { - switch (sticky) { - case StickyPosition.TOP: - return is("sticky-top") - case StickyPosition.BOTTOM: - return is("sticky-bottom") - default: - return "" - } - } - const classes = hashClass( styled, clsx( "container", medium && is("medium"), - centered && is("centered"), - fullwidth && is("fullwidth"), - verticalCentered && is("vcentered"), - sticky && stickyClassName(), - backgroundColor && has(getBackgroundClassName(backgroundColor)), - backgroundSrc && has('background'), - inverted && is('inverted'), className ) ) - const styles = { - top: stickyOffSetTop, - bottom: stickyOffSetBottom, - } - - return
+ return
} export default Container diff --git a/packages/react/components/container/ContainerProps.ts b/packages/react/components/container/ContainerProps.ts index 38c8c0fb..5d4eac98 100644 --- a/packages/react/components/container/ContainerProps.ts +++ b/packages/react/components/container/ContainerProps.ts @@ -13,14 +13,8 @@ import type { * Container Interface */ -export interface ContainerProps extends Layout, Fullwidth, Paddingless, VerticalPaddingless, Position, BackgroundProps { +export interface ContainerProps { children?: React.ReactNode className?: string - centered?: boolean - verticalCentered?: boolean medium?: boolean - fullwidth?: boolean - sticky?: StickyPosition | StickyPositionValues - stickyOffSetTop?: number - stickyOffSetBottom?: number } diff --git a/packages/react/components/container/test/Container.test.tsx b/packages/react/components/container/test/Container.test.tsx index fb672f96..3856afde 100644 --- a/packages/react/components/container/test/Container.test.tsx +++ b/packages/react/components/container/test/Container.test.tsx @@ -8,13 +8,7 @@ describe('Container', () => { const { getByTestId } = render(
Test Child
, @@ -22,13 +16,7 @@ describe('Container', () => { const container = getByTestId('container') expect(container).toHaveClass('container') - expect(container).toHaveClass('is-centered') - expect(container).toHaveClass('is-vcentered') expect(container).toHaveClass('is-medium') - expect(container).toHaveClass('is-fullwidth') - expect(container).toHaveClass('is-sticky-top') - expect(container).toHaveClass('has-background-white') - expect(container).toHaveStyle('top: 20px') const child = getByTestId('test-child') expect(child).toBeInTheDocument() diff --git a/packages/react/components/enumsComponentsName.ts b/packages/react/components/enumsComponentsName.ts index 741749bb..b3122560 100644 --- a/packages/react/components/enumsComponentsName.ts +++ b/packages/react/components/enumsComponentsName.ts @@ -104,7 +104,6 @@ export enum ComponentName { Section = 'Section', Select = 'Select', SelectOption = 'SelectOption', - Selector = 'Selector', SelectorIOtem = 'SelectorIOtem', Spacer = 'Spacer', SpacerSize = 'SpacerSize', diff --git a/packages/react/components/index.ts b/packages/react/components/index.ts index dd5c67f1..bc5bf1b0 100644 --- a/packages/react/components/index.ts +++ b/packages/react/components/index.ts @@ -35,7 +35,6 @@ export * from './scroll-view' export * from './section' export * from './segment-control' export * from './select' -export * from './selector' export * from './spacer' export * from './stepper' export * from './sticker' diff --git a/packages/react/components/progress/Progress.tsx b/packages/react/components/progress/Progress.tsx index 6422e509..943c6ab2 100644 --- a/packages/react/components/progress/Progress.tsx +++ b/packages/react/components/progress/Progress.tsx @@ -79,7 +79,7 @@ const Progress = React.forwardRef((props: ProgressProps, ref: React.LegacyRef )} {firstExtremLegend && secondExtremLegend && ( - + {firstExtremLegend} diff --git a/packages/react/components/select/option/SelectOption.native.tsx b/packages/react/components/select/option/SelectOption.native.tsx index 07090f92..a4f19925 100644 --- a/packages/react/components/select/option/SelectOption.native.tsx +++ b/packages/react/components/select/option/SelectOption.native.tsx @@ -1,12 +1,13 @@ -import { Columns, ColumnsItem } from '@/components/columns' -import { ComponentName } from '@/components/enumsComponentsName' -import { Icon, IconSize } from '@/components/icon' -import { Text } from '@/components/text' -import { TypographyBold } from '@/objects/Typography' -import { TrilogyColor, getColorStyle } from '@/objects/facets/Color' +import {Columns, ColumnsItem} from '@/components/columns' +import {ComponentName} from '@/components/enumsComponentsName' +import {Icon, IconSize} from '@/components/icon' +import {Text} from '@/components/text' +import {TypographyBold} from '@/objects/Typography' +import {getColorStyle, TrilogyColor} from '@/objects/facets/Color' import * as React from 'react' -import { Dimensions, StyleSheet, TouchableOpacity } from 'react-native' -import { SelectOptionProps } from './SelectOptionProps' +import {Dimensions, StyleSheet, TouchableOpacity} from 'react-native' +import {SelectOptionProps} from './SelectOptionProps' +import {Alignable} from "@/objects"; /** * Select Option Component @@ -54,13 +55,13 @@ const SelectOption = ({ disabled, children, onClick, label, iconName, ...others return ( - + {iconName && ( - + )} - + {checked && ( - + )} diff --git a/packages/react/components/selector/Selector.native.tsx b/packages/react/components/selector/Selector.native.tsx deleted file mode 100644 index d4cff071..00000000 --- a/packages/react/components/selector/Selector.native.tsx +++ /dev/null @@ -1,115 +0,0 @@ -import React, { useEffect, useState } from 'react' -import { StyleSheet, ScrollView, View } from 'react-native' -import { SelectorProps } from './SelectorProps' -import { Text, TextLevels } from '@/components/text' -import SelectorItem from './item' -import { getAlignStyle } from '@/objects' - -/** - * Selector Component - * @param children {ReactNode} Children for Selector - * @param onClick onClick event - * @param activeIndex {number} default active tab index - * @param disabled {boolean} Disabled Selector - * @param clipped {boolean} Remove the separator bar - * @param align {Alignable} Horizontal Align - * @param inverted {boolean} Inverted Selector Color - * @param testId {string} Test Id for Test Integration - * @param accessibilityLabel {string} Accessibility label - * @param accessibilityActivate {boolean} - * @param end {SelectorEnd} set selector item at last position - */ -const Selector = ({ - children, - onClick, - activeIndex = 0, - disabled, - inverted, - align, - end, - testId, - accessibilityLabel, - accessibilityActivate = true, - ...others - }: SelectorProps): JSX.Element => { - const [activateIndex, setActivateIndex] = useState(activeIndex) - - useEffect(() => { - setActivateIndex(activeIndex) - }, [activeIndex]) - - const isActive = (index: number, childPropsActive: React.ReactNode) => { - if (typeof childPropsActive !== 'undefined' && !activateIndex) { - return childPropsActive - } - if (index === activateIndex) { - return true - } - } - - const toggleActive = (e: React.MouseEvent, index: number) => { - if (disabled) { - return false - } - setActivateIndex(index) - if (onClick) { - onClick(e) - } - } - - const styles = StyleSheet.create({ - selector: { - height: 'auto', - width: '100%', - alignSelf: getAlignStyle(align), - }, - }) - - return ( - - - {children && - Array.isArray(children) && - // eslint-disable-next-line @typescript-eslint/no-explicit-any - children.map((child: any, index: number) => { - const props = { - active: Boolean(isActive(index, child.props.active)) || false, - key: index, - selectorIndex: index, - inverted: inverted, - onClick: (event: React.MouseEvent) => { - toggleActive(event, index) - if (child) { - if (child.props.onClick) { - child.props.onClick(event) - } - } - }, - } - return typeof child.valueOf() === 'string' ? ( - onClick?.(e)}> - {String(child)} - - ) : ( - React.cloneElement(child, props) - ) - })} - {end && ( - end.onClick?.(e)}> - {end.message} - - )} - - - ) -} - -Selector.displayName = 'Selector' - -export default Selector diff --git a/packages/react/components/selector/Selector.tsx b/packages/react/components/selector/Selector.tsx deleted file mode 100644 index 2d0f7959..00000000 --- a/packages/react/components/selector/Selector.tsx +++ /dev/null @@ -1,98 +0,0 @@ -import React, { useEffect, useState } from 'react' -import clsx from 'clsx' -import SelectorItem from './item' -import { Text } from '@/components/text' -import { SelectorProps } from './SelectorProps' -import { is } from '@/services/classify' -import { getAlignClassName } from '@/objects' - -/** - * Selector Component - * @param children {ReactNode} Children for Selector - * @param onClick onClick event - * @param activeIndex {number} default active tab index - * @param disabled {boolean} Disabled Selector - * @param clipped {boolean} Remove the separator bar - * @param align {Alignable} Horizontal Align - * - -------------------------- WEB PROPERTIES ------------------------------- - * @param className {string} Additionnal CSS Classes - * @param fullwidth {boolean} Fullwidth Selector - * @param justify {JustifiableProps.justify?} Justifiable | "JUSTIFIED_CENTER" | "JUSTIFIED_START" | "JUSTIFIED_END" | "SPACE_BETWEEN" | undefined - * - -------------------------- NATIVE PROPERTIES ------------------------------- - * @param inverted {boolean} Inverted Selector Color - * @param testId {string} Test Id for Test Integration - * @param accessibilityLabel {string} Accessibility label - * @param accessibilityActivate {boolean} - * @param end {SelectorEnd} set selector item at last position - */ -const Selector = ({ - children, - className, - onClick, - activeIndex, - disabled, - align, - justify, - ...others -}: SelectorProps): JSX.Element => { - const [activateIndex, setActivateIndex] = useState(activeIndex || 0) - - const classes = clsx('selector', align && is(getAlignClassName(align)), justify && is(justify), className) - - const isActive = (index: number, childPropsActive: React.ReactNode) => { - if (typeof childPropsActive !== 'undefined' && !activateIndex) { - return childPropsActive - } - if (index === activateIndex) { - return true - } - } - - const toggleActive = (e: React.MouseEvent, index: number) => { - if (disabled) { - return false - } - setActivateIndex(index) - if (onClick) { - onClick(e) - } - } - - useEffect(() => { - setActivateIndex(activateIndex) - }, [activateIndex]) - - return ( -
-
    - {children && - Array.isArray(children) && - // eslint-disable-next-line @typescript-eslint/no-explicit-any - children.map((child: any, index: number) => { - const props = { - active: Boolean(isActive(index, child.props.active)) || false, - key: index, - tabIndex: index, - onClick: (event: React.MouseEvent) => { - toggleActive(event, index) - if (child) { - if (child.props.onClick) { - child.props.onClick(event) - } - } - }, - } - return typeof child.valueOf() === 'string' ? ( - onClick?.(e)}> - {String(child)} - - ) : ( - React.cloneElement(child, props) - ) - })} -
-
- ) -} - -export default Selector diff --git a/packages/react/components/selector/SelectorProps.ts b/packages/react/components/selector/SelectorProps.ts deleted file mode 100644 index d4642b58..00000000 --- a/packages/react/components/selector/SelectorProps.ts +++ /dev/null @@ -1,22 +0,0 @@ -import { ClickEvent } from '@/events/OnClickEvent' -import { Centerable } from '@/objects/facets/Centerable' -import { AlignableProps } from '@/objects/facets/Alignable' -import { JustifiableProps } from '@/objects/facets/Justifiable' -import { Accessibility, Clickable } from '@/objects' - -/** - * Selector Interface - */ - -interface SelectorEnd { - message: string - onClick: ClickEvent -} -export interface SelectorProps extends Centerable, AlignableProps, JustifiableProps, Clickable, Accessibility { - children: React.ReactNode - disabled?: boolean - activeIndex?: number - className?: string - inverted?: boolean - end?: SelectorEnd -} diff --git a/packages/react/components/selector/index.ts b/packages/react/components/selector/index.ts deleted file mode 100644 index 9d4baf7e..00000000 --- a/packages/react/components/selector/index.ts +++ /dev/null @@ -1,4 +0,0 @@ -import Selector from './Selector' -import SelectorItem from './item' - -export { Selector, SelectorItem } diff --git a/packages/react/components/selector/item/SelectorItem.native.tsx b/packages/react/components/selector/item/SelectorItem.native.tsx deleted file mode 100644 index 7e6acdbd..00000000 --- a/packages/react/components/selector/item/SelectorItem.native.tsx +++ /dev/null @@ -1,131 +0,0 @@ -import React, { useEffect, useState } from "react" -import { StyleSheet, TouchableOpacity, View } from "react-native" -import { SelectorItemProps } from "./SelectorItemProps" -import { Text, TextLevels } from "@/components/text" -import { getColorStyle, TrilogyColor } from "@/objects/facets/Color" -import { Spacer, SpacerSize } from "@/components/spacer" - -/** - * Selector Item Component - * @param active {boolean} active tab item - * @param children {ReactChild} React Child Element - * @param onClick onClick Event - * @param inverted {boolean} change style to inverted item - * @param end {boolean} Change last SelectorItem style to SECONDAY color - * @param accessibilityLabel {string} Accessibility label - * @param accessibilityActivate {boolean} - * @param testId {string} Test Id for Test Integration - * @param selectorIndex {number} index of selector item - */ -const SelectorItem = ({ - active, - children, - onClick, - inverted, - end, - selectorIndex, - testId, - accessibilityLabel, - accessibilityActivate = true, - ...others - }: SelectorItemProps): JSX.Element => { - const [activeItem, setActiveItem] = useState(active || false) - - const styles = StyleSheet.create({ - selectorItem: { - flexDirection: "row", - justifyContent: "center", - alignItems: "center", - flex: 1, - minWidth: 75, - borderRadius: 16, - paddingLeft: 16, - paddingRight: 16, - paddingTop: 7, - paddingBottom: 7, - backgroundColor: "transparent", - borderColor: inverted - ? getColorStyle(TrilogyColor.BACKGROUND) - : getColorStyle(TrilogyColor.MAIN), - borderWidth: 1, - }, - text: { - color: activeItem - ? getColorStyle(TrilogyColor.BACKGROUND) - : getColorStyle(TrilogyColor.MAIN), - textAlign: "center", - }, - invertedText: { - color: activeItem - ? getColorStyle(TrilogyColor.MAIN) - : getColorStyle(TrilogyColor.BACKGROUND), - textAlign: "center", - }, - active: { - backgroundColor: inverted - ? getColorStyle(TrilogyColor.BACKGROUND) - : getColorStyle(TrilogyColor.MAIN), - borderColor: inverted - ? getColorStyle(TrilogyColor.MAIN) - : getColorStyle(TrilogyColor.BACKGROUND), - }, - end: { - backgroundColor: getColorStyle(TrilogyColor.BACKGROUND), - borderColor: getColorStyle(TrilogyColor.INFO), - }, - endText: { - color: getColorStyle(TrilogyColor.INFO), - textAlign: "center", - }, - firstItem: { - marginLeft: 15, - }, - }) - - useEffect(() => { - setActiveItem(active || false) - }, [active]) - - return ( - <> - {selectorIndex === 0 && } - { - setActiveItem(active || false) - if (onClick) { - onClick(e) - } - }} - {...others} - > - {children && typeof children.valueOf() === "string" && ( - - {String(children)} - - )} - - - - ) -} - -SelectorItem.displayName = "SelectorItem" - -export default SelectorItem diff --git a/packages/react/components/selector/item/SelectorItem.tsx b/packages/react/components/selector/item/SelectorItem.tsx deleted file mode 100644 index 507abcc1..00000000 --- a/packages/react/components/selector/item/SelectorItem.tsx +++ /dev/null @@ -1,64 +0,0 @@ -import React, { useEffect, useState } from 'react' -import clsx from 'clsx' -import { Text, TextMarkup } from '@/components/text' -import { SelectorItemProps } from './SelectorItemProps' - -/** - * Selector Item Component - * @param active {boolean} active tab item - * @param children {ReactChild} React Child Element - * @param onClick onClick Event - * @param inverted {boolean} change style to inverted item - * - -------------------------- WEB PROPERTIES ------------------------------- - * @param className {string} Additionnal CSS Classes - * - -------------------------- NATIVE PROPERTIES ---------------------------- - * @param end {boolean} Change last SelectorItem style to SECONDAY color - * @param accessibilityLabel {string} Accessibility label - * @param accessibilityActivate {boolean} - * @param testId {string} Test Id for Test Integration - * @param selectorIndex {number} index of selector item - */ -const SelectorItem = ({ active, children, className, onClick, ...others }: SelectorItemProps): JSX.Element => { - const [activeItem, setActiveItem] = useState(active || false) - - // TODO: Update react component when web component (CSS) is ready - - // accessibility - const a11y = { - li: { - role: 'presentation', - }, - a: { - role: 'selector', - 'aria-selected': activeItem, - }, - } - - useEffect(() => { - setActiveItem(active || false) - }, [active]) - - return ( -
  • { - const target = e.target as HTMLFormElement - setActiveItem(active || false) - target.active = active - if (onClick) { - onClick(e) - } - }} - > - {children && typeof children.valueOf() === 'string' && ( - - {String(children)} - - )} -
    • - ) -} - -export default SelectorItem diff --git a/packages/react/components/selector/item/SelectorItemProps.ts b/packages/react/components/selector/item/SelectorItemProps.ts deleted file mode 100644 index c0f22bd0..00000000 --- a/packages/react/components/selector/item/SelectorItemProps.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { Accessibility, Clickable } from '@/objects' - -/** - * Selector Item Interface - */ -export interface SelectorItemProps extends Clickable, Accessibility { - children: React.ReactChild - active?: boolean - className?: string - id?: string - inverted?: boolean - end?: boolean - selectorIndex?: number -} diff --git a/packages/react/components/selector/item/index.ts b/packages/react/components/selector/item/index.ts deleted file mode 100644 index 0ea793ae..00000000 --- a/packages/react/components/selector/item/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -import SelectorItem from './SelectorItem' - -export default SelectorItem diff --git a/packages/react/components/selector/test/Selector.native.test.tsx b/packages/react/components/selector/test/Selector.native.test.tsx deleted file mode 100644 index 30c2e1a2..00000000 --- a/packages/react/components/selector/test/Selector.native.test.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import { render, screen, userEvent } from '@testing-library/react-native' -import * as React from 'react' -import Selector from '../Selector' -import SelectorItem from '../item' - -jest.useFakeTimers() - -describe('Selector component', () => { - const options = [ - { label: 'Option 1', value: 'option-1' }, - { label: 'Option 2', value: 'option-2' }, - { label: 'Option 3', value: 'option-3' }, - ] - - it('renders options correctly', () => { - render( - - {options.map((opt) => ( - {opt.label} - ))} - , - ) - options.forEach((opt) => { - expect(screen.getByText(opt.label)).toBeOnTheScreen() - }) - }) - - it('handles clicks correctly', () => { - const handleClick = jest.fn() - render( - - {options.map((opt) => ( - - {opt.label} - - ))} - , - ) - - options.forEach(async (opt) => { - expect(screen.getByText(opt.label)).toBeOnTheScreen() - const user = userEvent.setup() - await user.press(screen.getByText(opt.label)) - expect(handleClick).toHaveBeenCalled() - }) - }) -}) diff --git a/packages/react/components/selector/test/Selector.test.tsx b/packages/react/components/selector/test/Selector.test.tsx deleted file mode 100644 index 9f50a99f..00000000 --- a/packages/react/components/selector/test/Selector.test.tsx +++ /dev/null @@ -1,41 +0,0 @@ -import * as React from "react"; -import { render, fireEvent } from "@testing-library/react"; -import Selector from "../Selector"; -import SelectorItem from "../item"; - -describe("Selector component", () => { - const options = [ - { label: "Option 1", value: "option-1" }, - { label: "Option 2", value: "option-2" }, - { label: "Option 3", value: "option-3" }, - ]; - - it("renders options correctly", () => { - const { getByText } = render( - - {options.map((opt) => ( - {opt.label} - ))} - - ); - options.forEach((opt) => { - const option = getByText(opt.label); - expect(option).toBeInTheDocument(); - }); - }); - - it("handles clicks correctly", () => { - const handleClick = jest.fn(); - const { getByText } = render( - - {options.map((opt) => ( - {opt.label} - ))} - - ); - - const option2 = getByText(options[1].label); - fireEvent.click(option2); - expect(handleClick).toHaveBeenCalled(); - }); -}); diff --git a/packages/react/objects/facets/Color.tsx b/packages/react/objects/facets/Color.tsx index 5831b84b..4988619a 100644 --- a/packages/react/objects/facets/Color.tsx +++ b/packages/react/objects/facets/Color.tsx @@ -32,7 +32,7 @@ export type TrilogyColorValues = `${TrilogyColor}` export const colors: Record = { [TrilogyColor.BACKGROUND]: ['#fff', 'white', 'main'], [TrilogyColor.MAIN]: ['#3d5d7e', 'main', 'white'], - [TrilogyColor.MAIN_FADE]: ['#BBC6CD', 'main', 'white'], + [TrilogyColor.MAIN_FADE]: ['#BBC6CD', 'main-fade', 'white'], [TrilogyColor.ACCENT]: ['#da641b', 'accent', 'white'], [TrilogyColor.FONT]: ['#3d5d7e', 'main', 'white'], diff --git a/packages/react/objects/facets/Variant.ts b/packages/react/objects/facets/Variant.ts index 071dce29..90868b3f 100644 --- a/packages/react/objects/facets/Variant.ts +++ b/packages/react/objects/facets/Variant.ts @@ -34,8 +34,6 @@ export const getVariantClassName = (variantType?: string): string => { return "primary" case "SECONDARY": return "secondary" - case "TERTIARY": - return "tertiary" case "GHOST": return "ghost" case "INFO": @@ -60,8 +58,6 @@ export const getVariantStyle = (variantType?: string): string => { return getColorStyle(TrilogyColor.MAIN) case "SECONDARY": return getColorStyle(TrilogyColor.MAIN_FADE) - case "TERTIARY": - return getColorStyle(TrilogyColor.MAIN) case "INFO": return getColorStyle(TrilogyColor.INFO) default: diff --git a/packages/styles/framework/src/grid/_columns.scss b/packages/styles/framework/src/grid/_columns.scss index 909f140c..ecc23bad 100644 --- a/packages/styles/framework/src/grid/_columns.scss +++ b/packages/styles/framework/src/grid/_columns.scss @@ -20,7 +20,6 @@ $columnSize : ( "half" : math.div(12, 6) ); -$columnNumber : 12; %flex-none { flex: none; } @@ -39,7 +38,7 @@ $gap : 62px ; -.columns{ +.columns { display: flex; --ColumnGap: 24px; @@ -47,39 +46,10 @@ $gap : flex: none; } - @for $i from 1 through $columnNumber { - &.has-#{$i}-cols > .column { @extend %flex-none; } - } - .column[class*="is-"]:not(.is-narrow){ width: #{$columnWidth}; } - - - &.has-1-cols > .column:not(.is-narrow), - &.has-2-cols > .column:not(.is-narrow), - &.has-3-cols > .column:not(.is-narrow), - &.has-4-cols > .column:not(.is-narrow), - &.has-5-cols > .column:not(.is-narrow), - &.has-6-cols > .column:not(.is-narrow), - &.has-7-cols > .column:not(.is-narrow), - &.has-8-cols > .column:not(.is-narrow), - &.has-9-cols > .column:not(.is-narrow), - &.has-10-cols > .column:not(.is-narrow), - &.has-11-cols > .column:not(.is-narrow), - &.has-12-cols > .column:not(.is-narrow) - { - width: #{$columnWidth}; - } - - @for $i from 1 through 12 { - &.has-#{$i}-cols > .column{ - --ColumnFraction: #{$i}; - flex: none; - } - } - @each $key, $value in $columnSize{ > .column.is-#{$key} { flex: none; @@ -146,12 +116,6 @@ $gap : &.is-peek{ padding-right: 15%; } - @for $i from 0 through 12 { - &.has-#{$i}-cols-mobile > .column{ - --ColumnFraction: #{$i}; - flex: none; - } - } @each $key, $value in $columnSize{ & > .column.is-#{$key}-mobile { @@ -169,13 +133,6 @@ $gap : @include tablet{ - @for $i from 0 through 12 { - &.has-#{$i}-cols-tablet > .column{ - --ColumnFraction: #{$i}; - flex: none; - } - } - @each $key, $value in $columnSize{ > .column.is-#{$key}-tablet { flex: none; @@ -192,13 +149,6 @@ $gap : @include touch{ - @for $i from 0 through 12 { - &.has-#{$i}-cols-touch > .column{ - --ColumnFraction: #{$i}; - flex: none; - } - } - @each $key, $value in $columnSize{ > .column.is-#{$key}-touch { flex: none; @@ -215,13 +165,6 @@ $gap : @include desktop{ - @for $i from 0 through 12 { - &.has-#{$i}-cols-desktop > .column{ - --ColumnFraction: #{$i}; - flex: none; - } - } - @each $key, $value in $columnSize{ > .column.is-#{$key}-desktop { flex: none; @@ -238,13 +181,6 @@ $gap : @include widescreen{ - @for $i from 0 through 12 { - &.has-#{$i}-cols-widescreen > .column{ - --ColumnFraction: #{$i}; - flex: none; - } - } - @each $key, $value in $columnSize{ > .column.is-#{$key}-widescreen{ flex: none; @@ -261,13 +197,6 @@ $gap : @include fullhd{ - @for $i from 0 through 12 { - &.has-#{$i}-cols-fullhd > .column{ - --ColumnFraction: #{$i}; - flex: none; - } - } - @each $key, $value in $columnSize{ > .column.is-#{$key}-fullhd{ flex: none; @@ -302,7 +231,9 @@ $gap : } } - + &.is-mobile>.column.is-narrow{ + flex: none; + } } @@ -418,6 +349,7 @@ $gap : &.is-gapless { gap: 0; + --ColumnGap: 0px; // must be px because is used in calc. } &.is-mobile {