@frontify/fondue 12.0.0-beta.412 → 12.0.0-beta.413
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/fondue/components/Flex/Flex.es.js +1 -1
- package/dist/fondue/components/Flex/Flex.es.js.map +1 -1
- package/dist/fondue/components/Grid/Grid.es.js +2 -2
- package/dist/fondue/components/Grid/Grid.es.js.map +1 -1
- package/dist/fondue/components/Stack/Stack.es.js +1 -1
- package/dist/fondue/components/Stack/Stack.es.js.map +1 -1
- package/dist/fondue/index.cjs.js +3 -3
- package/dist/fondue/index.cjs.js.map +1 -1
- package/dist/fondue/index.umd.js +3 -3
- package/dist/fondue/index.umd.js.map +1 -1
- package/dist/fondue/utilities/dimensions.es.js +7 -7
- package/dist/fondue/utilities/dimensions.es.js.map +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Flex.es.js","sources":["../../../../src/components/Flex/Flex.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { ReactNode } from 'react';\nimport { merge } from '@utilities/merge';\nimport { ContainerHTMLElement } from '../../types/elements';\nimport { Box } from '@components/Box';\nimport { DimensionUnity, GAP_DIRECTIONS, GetGapClassName, SpacingValue } from '@utilities/dimensions';\n\nexport type FlexDirection = 'row' | 'column' | 'row-reverse' | 'column-reverse';\nexport type FlexWrap = 'nowrap' | 'wrap' | 'wrap-reverse';\nexport type FlexJustify = 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly';\nexport type FlexAlignItems = 'start' | 'end' | 'center' | 'baseline' | 'stretch';\nexport type FlexAlignContent =\n | 'start'\n | 'end'\n | 'center'\n | 'between'\n | 'around'\n | 'evenly'\n | 'baseline'\n | 'stretch'\n | 'normal';\n\nexport type FlexProps = {\n direction?: FlexDirection;\n wrap?: FlexWrap;\n spacing?: SpacingValue;\n spacingX?: SpacingValue;\n spacingY?: SpacingValue;\n justify?: FlexJustify;\n alignItems?: FlexAlignItems;\n alignContent?: FlexAlignContent;\n 'data-test-id'?: string;\n children?: ReactNode | ReactNode[];\n bg?: string;\n color?: string;\n as?: ContainerHTMLElement;\n padding?: SpacingValue;\n paddingX?: SpacingValue;\n paddingY?: SpacingValue;\n margin?: SpacingValue;\n marginX?: SpacingValue;\n marginY?: SpacingValue;\n minWidth?: `${number}${DimensionUnity}`;\n maxWidth?: `${number}${DimensionUnity}`;\n minHeight?: `${number}${DimensionUnity}`;\n maxHeight?: `${number}${DimensionUnity}`;\n};\n\nconst directionMapping = {\n row: 'tw-flex-row',\n column: 'tw-flex-col',\n 'row-reverse': 'tw-flex-row-reverse',\n 'column-reverse': 'tw-flex-col-reverse',\n};\n\nconst wrapMapping = {\n nowrap: 'tw-flex-nowrap',\n wrap: 'tw-flex-wrap',\n 'wrap-reverse': 'tw-flex-wrap-reverse',\n};\n\nconst justifyMapping = {\n start: 'tw-justify-start',\n end: 'tw-justify-end',\n center: 'tw-justify-center',\n between: 'tw-justify-between',\n around: 'tw-justify-around',\n evenly: 'tw-justify-evenly',\n};\n\nconst alignItemsMapping = {\n start: 'tw-items-start',\n end: 'tw-items-end',\n center: 'tw-items-center',\n baseline: 'tw-items-baseline',\n stretch: 'tw-items-stretch',\n};\n\nconst alignContentMapping = {\n start: 'tw-content-start',\n end: 'tw-content-end',\n center: 'tw-content-center',\n normal: 'tw-content-normal',\n between: 'tw-content-between',\n around: 'tw-content-around',\n evenly: 'tw-content-evenly',\n baseline: 'tw-content-baseline',\n stretch: 'tw-content-stretch',\n};\n\nexport const Flex = ({\n direction = 'row',\n wrap = 'nowrap',\n justify = 'center',\n alignItems = 'center',\n alignContent = 'center',\n 'data-test-id': dataTestId = 'fondue-flex',\n children,\n bg,\n color,\n as: ContainerElement = 'div',\n margin,\n marginX,\n marginY,\n padding,\n paddingX,\n paddingY,\n minWidth,\n maxWidth,\n maxHeight,\n minHeight,\n spacing = 4,\n spacingX,\n spacingY,\n}: FlexProps) => {\n return (\n <Box\n data-test-id={dataTestId}\n className={merge([\n 'tw-flex',\n GetGapClassName(GAP_DIRECTIONS.
|
|
1
|
+
{"version":3,"file":"Flex.es.js","sources":["../../../../src/components/Flex/Flex.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { ReactNode } from 'react';\nimport { merge } from '@utilities/merge';\nimport { ContainerHTMLElement } from '../../types/elements';\nimport { Box } from '@components/Box';\nimport { DimensionUnity, GAP_DIRECTIONS, GetGapClassName, SpacingValue } from '@utilities/dimensions';\n\nexport type FlexDirection = 'row' | 'column' | 'row-reverse' | 'column-reverse';\nexport type FlexWrap = 'nowrap' | 'wrap' | 'wrap-reverse';\nexport type FlexJustify = 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly';\nexport type FlexAlignItems = 'start' | 'end' | 'center' | 'baseline' | 'stretch';\nexport type FlexAlignContent =\n | 'start'\n | 'end'\n | 'center'\n | 'between'\n | 'around'\n | 'evenly'\n | 'baseline'\n | 'stretch'\n | 'normal';\n\nexport type FlexProps = {\n direction?: FlexDirection;\n wrap?: FlexWrap;\n spacing?: SpacingValue;\n spacingX?: SpacingValue;\n spacingY?: SpacingValue;\n justify?: FlexJustify;\n alignItems?: FlexAlignItems;\n alignContent?: FlexAlignContent;\n 'data-test-id'?: string;\n children?: ReactNode | ReactNode[];\n bg?: string;\n color?: string;\n as?: ContainerHTMLElement;\n padding?: SpacingValue;\n paddingX?: SpacingValue;\n paddingY?: SpacingValue;\n margin?: SpacingValue;\n marginX?: SpacingValue;\n marginY?: SpacingValue;\n minWidth?: `${number}${DimensionUnity}`;\n maxWidth?: `${number}${DimensionUnity}`;\n minHeight?: `${number}${DimensionUnity}`;\n maxHeight?: `${number}${DimensionUnity}`;\n};\n\nconst directionMapping = {\n row: 'tw-flex-row',\n column: 'tw-flex-col',\n 'row-reverse': 'tw-flex-row-reverse',\n 'column-reverse': 'tw-flex-col-reverse',\n};\n\nconst wrapMapping = {\n nowrap: 'tw-flex-nowrap',\n wrap: 'tw-flex-wrap',\n 'wrap-reverse': 'tw-flex-wrap-reverse',\n};\n\nconst justifyMapping = {\n start: 'tw-justify-start',\n end: 'tw-justify-end',\n center: 'tw-justify-center',\n between: 'tw-justify-between',\n around: 'tw-justify-around',\n evenly: 'tw-justify-evenly',\n};\n\nconst alignItemsMapping = {\n start: 'tw-items-start',\n end: 'tw-items-end',\n center: 'tw-items-center',\n baseline: 'tw-items-baseline',\n stretch: 'tw-items-stretch',\n};\n\nconst alignContentMapping = {\n start: 'tw-content-start',\n end: 'tw-content-end',\n center: 'tw-content-center',\n normal: 'tw-content-normal',\n between: 'tw-content-between',\n around: 'tw-content-around',\n evenly: 'tw-content-evenly',\n baseline: 'tw-content-baseline',\n stretch: 'tw-content-stretch',\n};\n\nexport const Flex = ({\n direction = 'row',\n wrap = 'nowrap',\n justify = 'center',\n alignItems = 'center',\n alignContent = 'center',\n 'data-test-id': dataTestId = 'fondue-flex',\n children,\n bg,\n color,\n as: ContainerElement = 'div',\n margin,\n marginX,\n marginY,\n padding,\n paddingX,\n paddingY,\n minWidth,\n maxWidth,\n maxHeight,\n minHeight,\n spacing = 4,\n spacingX,\n spacingY,\n}: FlexProps) => {\n return (\n <Box\n data-test-id={dataTestId}\n className={merge([\n 'tw-flex',\n GetGapClassName(GAP_DIRECTIONS.GAP, spacing),\n GetGapClassName(GAP_DIRECTIONS.GAP_X, spacingX),\n GetGapClassName(GAP_DIRECTIONS.GAP_Y, spacingY),\n directionMapping[direction],\n wrapMapping[wrap],\n justifyMapping[justify],\n alignItemsMapping[alignItems],\n alignContentMapping[alignContent],\n bg,\n color,\n ])}\n style={{\n maxWidth,\n minWidth,\n maxHeight,\n minHeight,\n }}\n margin={margin}\n marginX={marginX}\n marginY={marginY}\n padding={padding}\n paddingX={paddingX}\n paddingY={paddingY}\n as={ContainerElement}\n >\n {children}\n </Box>\n );\n};\nFlex.displayName = 'FondueFlex';\n"],"names":["directionMapping","wrapMapping","justifyMapping","alignItemsMapping","alignContentMapping","Flex","direction","wrap","justify","alignItems","alignContent","dataTestId","children","bg","color","ContainerElement","margin","marginX","marginY","padding","paddingX","paddingY","minWidth","maxWidth","maxHeight","minHeight","spacing","spacingX","spacingY","jsx","Box","merge","GetGapClassName","GAP_DIRECTIONS"],"mappings":";;;;AAiDA,MAAMA,IAAmB;AAAA,EACrB,KAAK;AAAA,EACL,QAAQ;AAAA,EACR,eAAe;AAAA,EACf,kBAAkB;AACtB,GAEMC,IAAc;AAAA,EAChB,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,gBAAgB;AACpB,GAEMC,IAAiB;AAAA,EACnB,OAAO;AAAA,EACP,KAAK;AAAA,EACL,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,QAAQ;AACZ,GAEMC,IAAoB;AAAA,EACtB,OAAO;AAAA,EACP,KAAK;AAAA,EACL,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,SAAS;AACb,GAEMC,IAAsB;AAAA,EACxB,OAAO;AAAA,EACP,KAAK;AAAA,EACL,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,SAAS;AACb,GAEaC,IAAO,CAAC;AAAA,EACjB,WAAAC,IAAY;AAAA,EACZ,MAAAC,IAAO;AAAA,EACP,SAAAC,IAAU;AAAA,EACV,YAAAC,IAAa;AAAA,EACb,cAAAC,IAAe;AAAA,EACf,gBAAgBC,IAAa;AAAA,EAC7B,UAAAC;AAAA,EACA,IAAAC;AAAA,EACA,OAAAC;AAAA,EACA,IAAIC,IAAmB;AAAA,EACvB,QAAAC;AAAA,EACA,SAAAC;AAAA,EACA,SAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,WAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,UAAAC;AAAA,EACA,UAAAC;AACJ,MAEQ,gBAAAC;AAAA,EAACC;AAAA,EAAA;AAAA,IACG,gBAAcnB;AAAA,IACd,WAAWoB,EAAM;AAAA,MACb;AAAA,MACAC,EAAgBC,EAAe,KAAKP,CAAO;AAAA,MAC3CM,EAAgBC,EAAe,OAAON,CAAQ;AAAA,MAC9CK,EAAgBC,EAAe,OAAOL,CAAQ;AAAA,MAC9C5B,EAAiBM,CAAS;AAAA,MAC1BL,EAAYM,CAAI;AAAA,MAChBL,EAAeM,CAAO;AAAA,MACtBL,EAAkBM,CAAU;AAAA,MAC5BL,EAAoBM,CAAY;AAAA,MAChCG;AAAA,MACAC;AAAA,IAAA,CACH;AAAA,IACD,OAAO;AAAA,MACH,UAAAS;AAAA,MACA,UAAAD;AAAA,MACA,WAAAE;AAAA,MACA,WAAAC;AAAA,IACJ;AAAA,IACA,QAAAT;AAAA,IACA,SAAAC;AAAA,IACA,SAAAC;AAAA,IACA,SAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,IAAIN;AAAA,IAEH,UAAAH;AAAA,EAAA;AAAA;AAIbP,EAAK,cAAc;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Grid.es.js","sources":["../../../../src/components/Grid/Grid.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { Children, ReactNode } from 'react';\nimport { DimensionUnity, GAP_DIRECTIONS, GetGapClassName, SpacingValue } from '@utilities/dimensions';\nimport { ContainerHTMLElement } from '../../types/elements';\nimport { merge } from '@utilities/merge';\nimport { Box } from '@components/Box';\n\nexport type GridProps = {\n column?: number;\n spacing?: SpacingValue;\n spacingX?: SpacingValue;\n spacingY?: SpacingValue;\n children?: ReactNode;\n width?: `${number}${DimensionUnity}`;\n rowHeight?: `${number}${DimensionUnity}` | 'auto';\n padding?: SpacingValue;\n paddingX?: SpacingValue;\n paddingY?: SpacingValue;\n margin?: SpacingValue;\n marginX?: SpacingValue;\n marginY?: SpacingValue;\n bg?: string;\n color?: string;\n 'data-test-id'?: string;\n as?: ContainerHTMLElement;\n};\n\nexport const GRID_TEST_ID = 'fondue-grid';\n\nexport const Grid = ({\n column = 2,\n spacing = 4,\n spacingX,\n spacingY,\n children,\n 'data-test-id': dataTestId = GRID_TEST_ID,\n width = '100%',\n rowHeight = 'auto',\n bg,\n color,\n margin,\n marginX,\n marginY,\n padding,\n paddingX,\n paddingY,\n as: ContainerElement = 'div',\n}: GridProps) => {\n let childrenLength = 0;\n\n Children.map(children, (child) => {\n childrenLength++;\n return child;\n });\n\n return (\n <Box\n data-test-id={dataTestId}\n className={merge([\n 'tw-grid',\n bg,\n color,\n GetGapClassName(GAP_DIRECTIONS.
|
|
1
|
+
{"version":3,"file":"Grid.es.js","sources":["../../../../src/components/Grid/Grid.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { Children, ReactNode } from 'react';\nimport { DimensionUnity, GAP_DIRECTIONS, GetGapClassName, SpacingValue } from '@utilities/dimensions';\nimport { ContainerHTMLElement } from '../../types/elements';\nimport { merge } from '@utilities/merge';\nimport { Box } from '@components/Box';\n\nexport type GridProps = {\n column?: number;\n spacing?: SpacingValue;\n spacingX?: SpacingValue;\n spacingY?: SpacingValue;\n children?: ReactNode;\n width?: `${number}${DimensionUnity}`;\n rowHeight?: `${number}${DimensionUnity}` | 'auto';\n padding?: SpacingValue;\n paddingX?: SpacingValue;\n paddingY?: SpacingValue;\n margin?: SpacingValue;\n marginX?: SpacingValue;\n marginY?: SpacingValue;\n bg?: string;\n color?: string;\n 'data-test-id'?: string;\n as?: ContainerHTMLElement;\n};\n\nexport const GRID_TEST_ID = 'fondue-grid';\n\nexport const Grid = ({\n column = 2,\n spacing = 4,\n spacingX,\n spacingY,\n children,\n 'data-test-id': dataTestId = GRID_TEST_ID,\n width = '100%',\n rowHeight = 'auto',\n bg,\n color,\n margin,\n marginX,\n marginY,\n padding,\n paddingX,\n paddingY,\n as: ContainerElement = 'div',\n}: GridProps) => {\n let childrenLength = 0;\n\n Children.map(children, (child) => {\n childrenLength++;\n return child;\n });\n\n return (\n <Box\n data-test-id={dataTestId}\n className={merge([\n 'tw-grid',\n bg,\n color,\n GetGapClassName(GAP_DIRECTIONS.GAP, spacing),\n GetGapClassName(GAP_DIRECTIONS.GAP_X, spacingX),\n GetGapClassName(GAP_DIRECTIONS.GAP_Y, spacingY),\n ])}\n style={{\n width,\n gridTemplateColumns: `repeat(${column}, 1fr)`,\n gridTemplateRows: `repeat(${Math.ceil(childrenLength / column)}, ${rowHeight})`,\n }}\n margin={margin}\n marginX={marginX}\n marginY={marginY}\n padding={padding}\n paddingX={paddingX}\n paddingY={paddingY}\n as={ContainerElement}\n >\n {children}\n </Box>\n );\n};\n\nGrid.displayName = 'FondueGrid';\n"],"names":["GRID_TEST_ID","Grid","column","spacing","spacingX","spacingY","children","dataTestId","width","rowHeight","bg","color","margin","marginX","marginY","padding","paddingX","paddingY","ContainerElement","childrenLength","Children","child","jsx","Box","merge","GetGapClassName","GAP_DIRECTIONS"],"mappings":";;;;;AA4BO,MAAMA,IAAe,eAEfC,IAAO,CAAC;AAAA,EACjB,QAAAC,IAAS;AAAA,EACT,SAAAC,IAAU;AAAA,EACV,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,gBAAgBC,IAAaP;AAAA,EAC7B,OAAAQ,IAAQ;AAAA,EACR,WAAAC,IAAY;AAAA,EACZ,IAAAC;AAAA,EACA,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,SAAAC;AAAA,EACA,SAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,IAAIC,IAAmB;AAC3B,MAAiB;AACb,MAAIC,IAAiB;AAEZ,SAAAC,EAAA,IAAId,GAAU,CAACe,OACpBF,KACOE,EACV,GAGG,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,gBAAchB;AAAA,MACd,WAAWiB,EAAM;AAAA,QACb;AAAA,QACAd;AAAA,QACAC;AAAA,QACAc,EAAgBC,EAAe,KAAKvB,CAAO;AAAA,QAC3CsB,EAAgBC,EAAe,OAAOtB,CAAQ;AAAA,QAC9CqB,EAAgBC,EAAe,OAAOrB,CAAQ;AAAA,MAAA,CACjD;AAAA,MACD,OAAO;AAAA,QACH,OAAAG;AAAA,QACA,qBAAqB,UAAUN,CAAM;AAAA,QACrC,kBAAkB,UAAU,KAAK,KAAKiB,IAAiBjB,CAAM,CAAC,KAAKO,CAAS;AAAA,MAChF;AAAA,MACA,QAAAG;AAAA,MACA,SAAAC;AAAA,MACA,SAAAC;AAAA,MACA,SAAAC;AAAA,MACA,UAAAC;AAAA,MACA,UAAAC;AAAA,MACA,IAAIC;AAAA,MAEH,UAAAZ;AAAA,IAAA;AAAA,EAAA;AAGb;AAEAL,EAAK,cAAc;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Stack.es.js","sources":["../../../../src/components/Stack/Stack.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { Children, ReactElement, ReactNode } from 'react';\nimport { Box } from '@components/Box';\nimport { GAP_DIRECTIONS, GetGapClassName, SpacingValue } from '@utilities/dimensions';\nimport { merge } from '@utilities/merge';\nimport { ContainerHTMLElement } from '../../types/elements';\n\nexport type STACK_DIRECTION = 'row' | 'column' | 'row-reverse' | 'column-reverse';\n\nexport type STACK_JUSTIFY = 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly';\nexport type STACK_ALIGN_ITEMS = 'start' | 'end' | 'center' | 'baseline' | 'stretch';\nexport type STACK_ALIGN_CONTENT =\n | 'start'\n | 'end'\n | 'center'\n | 'between'\n | 'around'\n | 'evenly'\n | 'baseline'\n | 'stretch'\n | 'normal';\n\nexport type STACK_PROPS = {\n children?: ReactNode | ReactNode[] | JSX.Element;\n direction?: STACK_DIRECTION;\n spacing?: SpacingValue;\n spacingX?: SpacingValue;\n spacingY?: SpacingValue;\n divider?: ReactElement;\n margin?: SpacingValue;\n marginX?: SpacingValue;\n marginY?: SpacingValue;\n padding?: SpacingValue;\n paddingX?: SpacingValue;\n paddingY?: SpacingValue;\n bg?: string;\n color?: string;\n 'data-test-id'?: string;\n justify?: STACK_JUSTIFY;\n alignItems?: STACK_ALIGN_ITEMS;\n alignContent?: STACK_ALIGN_CONTENT;\n as?: ContainerHTMLElement;\n};\n\nexport const STACK_DIRECTION_MAPPING = {\n row: 'tw-flex-row',\n column: 'tw-flex-col',\n 'row-reverse': 'tw-flex-row-reverse',\n 'column-reverse': 'tw-flex-col-reverse',\n};\n\nconst STACK_JUSTIFY_MAPPING = {\n start: 'tw-justify-start',\n end: 'tw-justify-end',\n center: 'tw-justify-center',\n between: 'tw-justify-between',\n around: 'tw-justify-around',\n evenly: 'tw-justify-evenly',\n};\n\nconst STACK_ALIGN_ITEMS_MAPPING = {\n start: 'tw-items-start',\n end: 'tw-items-end',\n center: 'tw-items-center',\n baseline: 'tw-items-baseline',\n stretch: 'tw-items-stretch',\n};\n\nexport const STACK_TEST_ID = 'fondue-stack';\n\nexport const Stack = ({\n children,\n 'data-test-id': dataTestId = STACK_TEST_ID,\n direction = 'column',\n spacing,\n spacingX,\n spacingY,\n divider,\n padding,\n paddingX,\n paddingY,\n margin,\n marginX,\n marginY,\n justify = 'start',\n alignItems = 'start',\n bg,\n color,\n as: ContainerElement = 'div',\n}: STACK_PROPS) => {\n const renderedChildren = Children.map(children, (child) => {\n return (\n <>\n {child}\n {divider}\n </>\n );\n });\n\n return (\n <Box\n data-test-id={dataTestId}\n className={merge([\n 'tw-flex',\n STACK_JUSTIFY_MAPPING[justify],\n STACK_ALIGN_ITEMS_MAPPING[alignItems],\n STACK_DIRECTION_MAPPING[direction],\n GetGapClassName(GAP_DIRECTIONS.
|
|
1
|
+
{"version":3,"file":"Stack.es.js","sources":["../../../../src/components/Stack/Stack.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { Children, ReactElement, ReactNode } from 'react';\nimport { Box } from '@components/Box';\nimport { GAP_DIRECTIONS, GetGapClassName, SpacingValue } from '@utilities/dimensions';\nimport { merge } from '@utilities/merge';\nimport { ContainerHTMLElement } from '../../types/elements';\n\nexport type STACK_DIRECTION = 'row' | 'column' | 'row-reverse' | 'column-reverse';\n\nexport type STACK_JUSTIFY = 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly';\nexport type STACK_ALIGN_ITEMS = 'start' | 'end' | 'center' | 'baseline' | 'stretch';\nexport type STACK_ALIGN_CONTENT =\n | 'start'\n | 'end'\n | 'center'\n | 'between'\n | 'around'\n | 'evenly'\n | 'baseline'\n | 'stretch'\n | 'normal';\n\nexport type STACK_PROPS = {\n children?: ReactNode | ReactNode[] | JSX.Element;\n direction?: STACK_DIRECTION;\n spacing?: SpacingValue;\n spacingX?: SpacingValue;\n spacingY?: SpacingValue;\n divider?: ReactElement;\n margin?: SpacingValue;\n marginX?: SpacingValue;\n marginY?: SpacingValue;\n padding?: SpacingValue;\n paddingX?: SpacingValue;\n paddingY?: SpacingValue;\n bg?: string;\n color?: string;\n 'data-test-id'?: string;\n justify?: STACK_JUSTIFY;\n alignItems?: STACK_ALIGN_ITEMS;\n alignContent?: STACK_ALIGN_CONTENT;\n as?: ContainerHTMLElement;\n};\n\nexport const STACK_DIRECTION_MAPPING = {\n row: 'tw-flex-row',\n column: 'tw-flex-col',\n 'row-reverse': 'tw-flex-row-reverse',\n 'column-reverse': 'tw-flex-col-reverse',\n};\n\nconst STACK_JUSTIFY_MAPPING = {\n start: 'tw-justify-start',\n end: 'tw-justify-end',\n center: 'tw-justify-center',\n between: 'tw-justify-between',\n around: 'tw-justify-around',\n evenly: 'tw-justify-evenly',\n};\n\nconst STACK_ALIGN_ITEMS_MAPPING = {\n start: 'tw-items-start',\n end: 'tw-items-end',\n center: 'tw-items-center',\n baseline: 'tw-items-baseline',\n stretch: 'tw-items-stretch',\n};\n\nexport const STACK_TEST_ID = 'fondue-stack';\n\nexport const Stack = ({\n children,\n 'data-test-id': dataTestId = STACK_TEST_ID,\n direction = 'column',\n spacing,\n spacingX,\n spacingY,\n divider,\n padding,\n paddingX,\n paddingY,\n margin,\n marginX,\n marginY,\n justify = 'start',\n alignItems = 'start',\n bg,\n color,\n as: ContainerElement = 'div',\n}: STACK_PROPS) => {\n const renderedChildren = Children.map(children, (child) => {\n return (\n <>\n {child}\n {divider}\n </>\n );\n });\n\n return (\n <Box\n data-test-id={dataTestId}\n className={merge([\n 'tw-flex',\n STACK_JUSTIFY_MAPPING[justify],\n STACK_ALIGN_ITEMS_MAPPING[alignItems],\n STACK_DIRECTION_MAPPING[direction],\n GetGapClassName(GAP_DIRECTIONS.GAP, spacing),\n GetGapClassName(GAP_DIRECTIONS.GAP_X, spacingX),\n GetGapClassName(GAP_DIRECTIONS.GAP_Y, spacingY),\n bg,\n color,\n ])}\n margin={margin}\n marginX={marginX}\n marginY={marginY}\n padding={padding}\n paddingX={paddingX}\n paddingY={paddingY}\n as={ContainerElement}\n >\n {renderedChildren}\n </Box>\n );\n};\nStack.displayName = 'FondueStack';\n"],"names":["STACK_DIRECTION_MAPPING","STACK_JUSTIFY_MAPPING","STACK_ALIGN_ITEMS_MAPPING","STACK_TEST_ID","Stack","children","dataTestId","direction","spacing","spacingX","spacingY","divider","padding","paddingX","paddingY","margin","marginX","marginY","justify","alignItems","bg","color","ContainerElement","renderedChildren","Children","child","jsxs","Fragment","jsx","Box","merge","GetGapClassName","GAP_DIRECTIONS"],"mappings":";;;;;AA6CO,MAAMA,IAA0B;AAAA,EACnC,KAAK;AAAA,EACL,QAAQ;AAAA,EACR,eAAe;AAAA,EACf,kBAAkB;AACtB,GAEMC,IAAwB;AAAA,EAC1B,OAAO;AAAA,EACP,KAAK;AAAA,EACL,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,QAAQ;AACZ,GAEMC,IAA4B;AAAA,EAC9B,OAAO;AAAA,EACP,KAAK;AAAA,EACL,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,SAAS;AACb,GAEaC,IAAgB,gBAEhBC,IAAQ,CAAC;AAAA,EAClB,UAAAC;AAAA,EACA,gBAAgBC,IAAaH;AAAA,EAC7B,WAAAI,IAAY;AAAA,EACZ,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,SAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,SAAAC;AAAA,EACA,SAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,YAAAC,IAAa;AAAA,EACb,IAAAC;AAAA,EACA,OAAAC;AAAA,EACA,IAAIC,IAAmB;AAC3B,MAAmB;AACf,QAAMC,IAAmBC,EAAS,IAAInB,GAAU,CAACoB,MAGpC,gBAAAC,EAAAC,GAAA,EAAA,UAAA;AAAA,IAAAF;AAAA,IACAd;AAAA,EACL,EAAA,CAAA,CAEP;AAGG,SAAA,gBAAAiB;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,gBAAcvB;AAAA,MACd,WAAWwB,EAAM;AAAA,QACb;AAAA,QACA7B,EAAsBiB,CAAO;AAAA,QAC7BhB,EAA0BiB,CAAU;AAAA,QACpCnB,EAAwBO,CAAS;AAAA,QACjCwB,EAAgBC,EAAe,KAAKxB,CAAO;AAAA,QAC3CuB,EAAgBC,EAAe,OAAOvB,CAAQ;AAAA,QAC9CsB,EAAgBC,EAAe,OAAOtB,CAAQ;AAAA,QAC9CU;AAAA,QACAC;AAAA,MAAA,CACH;AAAA,MACD,QAAAN;AAAA,MACA,SAAAC;AAAA,MACA,SAAAC;AAAA,MACA,SAAAL;AAAA,MACA,UAAAC;AAAA,MACA,UAAAC;AAAA,MACA,IAAIQ;AAAA,MAEH,UAAAC;AAAA,IAAA;AAAA,EAAA;AAGb;AACAnB,EAAM,cAAc;"}
|