@frontify/fondue 12.0.0-beta.251 → 12.0.0-beta.252
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.
|
@@ -24,10 +24,10 @@ const P = {
|
|
|
24
24
|
children: a,
|
|
25
25
|
"data-test-id": o = p,
|
|
26
26
|
direction: c = "column",
|
|
27
|
-
spacing: l =
|
|
27
|
+
spacing: l = 0,
|
|
28
28
|
divider: m,
|
|
29
|
-
padding: t =
|
|
30
|
-
margin: i =
|
|
29
|
+
padding: t = 0,
|
|
30
|
+
margin: i = 0,
|
|
31
31
|
justify: w = "start",
|
|
32
32
|
alignItems: d = "start",
|
|
33
33
|
bg: u,
|
|
@@ -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 React, { ReactElement, ReactNode } from 'react';\nimport { Box } from '@components/Box';\nimport { MARGIN_VALUES_MAP, PADDING_VALUES_MAP, SPACING_VALUES, SpacingValue } from '@utilities/dimensions';\nimport { merge } from '@utilities/merge';\nimport { ContainerHTMLElement } from 'src/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 divider?: ReactElement;\n margin?: SpacingValue;\n padding?: 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 =
|
|
1
|
+
{"version":3,"file":"Stack.es.js","sources":["../../../src/components/Stack/Stack.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport React, { ReactElement, ReactNode } from 'react';\nimport { Box } from '@components/Box';\nimport { MARGIN_VALUES_MAP, PADDING_VALUES_MAP, SPACING_VALUES, SpacingValue } from '@utilities/dimensions';\nimport { merge } from '@utilities/merge';\nimport { ContainerHTMLElement } from 'src/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 divider?: ReactElement;\n margin?: SpacingValue;\n padding?: 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 = 0,\n divider,\n padding = 0,\n margin = 0,\n justify = 'start',\n alignItems = 'start',\n bg,\n color,\n as: ContainerElement = 'div',\n}: STACK_PROPS) => {\n const paddingClassName = SPACING_VALUES.includes(padding) ? PADDING_VALUES_MAP[padding] : PADDING_VALUES_MAP[0];\n const marginClassName = SPACING_VALUES.includes(padding) ? MARGIN_VALUES_MAP[margin] : MARGIN_VALUES_MAP[0];\n\n const renderedChildren = React.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 paddingClassName,\n marginClassName,\n bg,\n color,\n ])}\n style={{\n gap: spacing,\n }}\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","divider","padding","margin","justify","alignItems","bg","color","ContainerElement","paddingClassName","SPACING_VALUES","PADDING_VALUES_MAP","marginClassName","MARGIN_VALUES_MAP","renderedChildren","React","child","Box","merge"],"mappings":";;;;AAuCO,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,IAAU;AAAA,EACV,SAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,QAAAC,IAAS;AAAA,EACT,SAAAC,IAAU;AAAA,EACV,YAAAC,IAAa;AAAA,EACb,IAAAC;AAAA,EACA,OAAAC;AAAA,EACA,IAAIC,IAAmB;AAC3B,MAAmB;AACT,QAAAC,IAAmBC,EAAe,SAASR,CAAO,IAAIS,EAAmBT,CAAO,IAAIS,EAAmB,CAAC,GACxGC,IAAkBF,EAAe,SAASR,CAAO,IAAIW,EAAkBV,CAAM,IAAIU,EAAkB,CAAC,GAEpGC,IAAmBC,EAAM,SAAS,IAAIlB,GAAU,CAACmB,MAE/C,gBAAAD,EAAA,cAAAA,EAAA,UAAA,MACKC,GACAf,CACL,CAEP;AAGG,SAAA,gBAAAc,EAAA;AAAA,IAACE;AAAA,IAAA;AAAA,MACG,gBAAcnB;AAAA,MACd,WAAWoB,EAAM;AAAA,QACb;AAAA,QACAzB,EAAsBW,CAAO;AAAA,QAC7BV,EAA0BW,CAAU;AAAA,QACpCb,EAAwBO,CAAS;AAAA,QACjCU;AAAA,QACAG;AAAA,QACAN;AAAA,QACAC;AAAA,MAAA,CACH;AAAA,MACD,OAAO;AAAA,QACH,KAAKP;AAAA,MACT;AAAA,MACA,IAAIQ;AAAA,IAAA;AAAA,IAEHM;AAAA,EAAA;AAGb;AACAlB,EAAM,cAAc;"}
|