npm - @pega/cosmos-react-demos - Versions diffs - 3.0.0-dev.4.0 → 3.0.0-dev.5.0 - Mend

@pega/cosmos-react-demos 3.0.0-dev.4.0 → 3.0.0-dev.5.0

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.

Files changed (788) hide show

package/lib/core/Flex/FlexContainer.stories.js CHANGED Viewed

@@ -9,7 +9,7 @@ export default {
     }
 };
 export const Direction = (args) => {
-    return (_jsxs(Flex, { container: { direction: args.direction, pad: 2 }, as: StyledFlexContainer, children: [_jsx(Flex, { item: { grow: 1 }, as: StyledFlexItem, children: _jsx(Text, { children: "Item 1" }, void 0) }, void 0), _jsx(Flex, { item: { grow: 1 }, as: StyledFlexItem, children: _jsx(Text, { children: "Item 2" }, void 0) }, void 0), _jsx(Flex, { item: { grow: 1 }, as: StyledFlexItem, children: _jsx(Text, { children: "Item 3" }, void 0) }, void 0)] }, void 0));
+    return (_jsxs(Flex, { container: { direction: args.direction, pad: 2 }, as: StyledFlexContainer, children: [_jsx(Flex, { item: { grow: 1 }, as: StyledFlexItem, children: _jsx(Text, { children: "Item 1" }) }), _jsx(Flex, { item: { grow: 1 }, as: StyledFlexItem, children: _jsx(Text, { children: "Item 2" }) }), _jsx(Flex, { item: { grow: 1 }, as: StyledFlexItem, children: _jsx(Text, { children: "Item 3" }) })] }));
 };
 Direction.args = {
     direction: 'row'
@@ -21,7 +21,7 @@ Direction.argTypes = {
     }
 };
 export const GapAndPadding = (args) => {
-    return (_jsxs(Flex, { container: { pad: args.pad, gap: args.gap }, as: StyledFlexContainer, children: [_jsx(Flex, { item: { grow: 1 }, as: StyledFlexItem, children: _jsx(Text, { children: "Item 1" }, void 0) }, void 0), _jsx(Flex, { item: { grow: 1 }, as: StyledFlexItem, children: _jsx(Text, { children: "Item 2" }, void 0) }, void 0), _jsx(Flex, { item: { grow: 1 }, as: StyledFlexItem, children: _jsx(Text, { children: "Item 3" }, void 0) }, void 0)] }, void 0));
+    return (_jsxs(Flex, { container: { pad: args.pad, gap: args.gap }, as: StyledFlexContainer, children: [_jsx(Flex, { item: { grow: 1 }, as: StyledFlexItem, children: _jsx(Text, { children: "Item 1" }) }), _jsx(Flex, { item: { grow: 1 }, as: StyledFlexItem, children: _jsx(Text, { children: "Item 2" }) }), _jsx(Flex, { item: { grow: 1 }, as: StyledFlexItem, children: _jsx(Text, { children: "Item 3" }) })] }));
 };
 GapAndPadding.args = {
     pad: 1,
@@ -32,7 +32,7 @@ GapAndPadding.argTypes = {
     gap: { control: { type: 'number' } }
 };
 export const Wrap = (args) => {
-    return (_jsxs(Flex, { container: { wrap: args.wrap, pad: 2 }, as: StyledFlexContainer, width: 35, children: [_jsx(Flex, { item: { grow: 1 }, as: StyledFlexItem, children: _jsx(Text, { children: "Item 1" }, void 0) }, void 0), _jsx(Flex, { item: { grow: 1 }, as: StyledFlexItem, children: _jsx(Text, { children: "Item 2" }, void 0) }, void 0), _jsx(Flex, { item: { grow: 1 }, as: StyledFlexItem, children: _jsx(Text, { children: "Item 3" }, void 0) }, void 0), _jsx(Flex, { item: { grow: 1 }, as: StyledFlexItem, children: _jsx(Text, { children: "Item 4" }, void 0) }, void 0), _jsx(Flex, { item: { grow: 1 }, as: StyledFlexItem, children: _jsx(Text, { children: "Item 5" }, void 0) }, void 0)] }, void 0));
+    return (_jsxs(Flex, { container: { wrap: args.wrap, pad: 2 }, as: StyledFlexContainer, width: 35, children: [_jsx(Flex, { item: { grow: 1 }, as: StyledFlexItem, children: _jsx(Text, { children: "Item 1" }) }), _jsx(Flex, { item: { grow: 1 }, as: StyledFlexItem, children: _jsx(Text, { children: "Item 2" }) }), _jsx(Flex, { item: { grow: 1 }, as: StyledFlexItem, children: _jsx(Text, { children: "Item 3" }) }), _jsx(Flex, { item: { grow: 1 }, as: StyledFlexItem, children: _jsx(Text, { children: "Item 4" }) }), _jsx(Flex, { item: { grow: 1 }, as: StyledFlexItem, children: _jsx(Text, { children: "Item 5" }) })] }));
 };
 Wrap.args = {
     wrap: 'nowrap'
@@ -41,7 +41,7 @@ Wrap.argTypes = {
     wrap: { options: ['nowrap', 'wrap', 'wrap-reverse'], control: { type: 'select' } }
 };
 export const Justify = (args) => {
-    return (_jsxs(Flex, { container: { justify: args.justify, pad: 2 }, as: StyledFlexContainer, children: [_jsx(StyledFlexItem, { children: _jsx(Text, { children: "Item 1" }, void 0) }, void 0), _jsx(StyledFlexItem, { children: _jsx(Text, { children: "Item 2" }, void 0) }, void 0), _jsx(StyledFlexItem, { children: _jsx(Text, { children: "Item 3" }, void 0) }, void 0)] }, void 0));
+    return (_jsxs(Flex, { container: { justify: args.justify, pad: 2 }, as: StyledFlexContainer, children: [_jsx(StyledFlexItem, { children: _jsx(Text, { children: "Item 1" }) }), _jsx(StyledFlexItem, { children: _jsx(Text, { children: "Item 2" }) }), _jsx(StyledFlexItem, { children: _jsx(Text, { children: "Item 3" }) })] }));
 };
 Justify.args = {
     justify: 'start'
@@ -53,7 +53,7 @@ Justify.argTypes = {
     }
 };
 export const AlignItems = (args) => {
-    return (_jsxs(Flex, { container: { alignItems: args.alignItems, pad: 2 }, as: StyledFlexContainer, height: 15, width: 30, children: [_jsx(Flex, { item: { grow: 1 }, as: StyledFlexItem, children: _jsx(Text, { children: "Item 1" }, void 0) }, void 0), _jsx(Flex, { item: { grow: 1 }, as: StyledFlexItem, noPadding: true, children: _jsx(Text, { children: "Item 2" }, void 0) }, void 0), _jsxs(Flex, { container: { direction: 'column' }, item: { grow: 1 }, as: StyledFlexItem, children: [_jsx(Text, { children: "Item 3 - First line" }, void 0), _jsx(Text, { children: "Item 3 - Second line" }, void 0)] }, void 0)] }, void 0));
+    return (_jsxs(Flex, { container: { alignItems: args.alignItems, pad: 2 }, as: StyledFlexContainer, height: 15, width: 30, children: [_jsx(Flex, { item: { grow: 1 }, as: StyledFlexItem, children: _jsx(Text, { children: "Item 1" }) }), _jsx(Flex, { item: { grow: 1 }, as: StyledFlexItem, noPadding: true, children: _jsx(Text, { children: "Item 2" }) }), _jsxs(Flex, { container: { direction: 'column' }, item: { grow: 1 }, as: StyledFlexItem, children: [_jsx(Text, { children: "Item 3 - First line" }), _jsx(Text, { children: "Item 3 - Second line" })] })] }));
 };
 AlignItems.args = {
     alignItems: 'stretch'
@@ -65,7 +65,7 @@ AlignItems.argTypes = {
     }
 };
 export const AlignContent = (args) => {
-    return (_jsxs(Flex, { container: { alignContent: args.alignContent, wrap: 'wrap', pad: 2 }, as: StyledFlexContainer, height: 20, width: 30, children: [_jsx(Flex, { item: { grow: 1 }, as: StyledFlexItem, children: _jsx(Text, { children: "Item 1" }, void 0) }, void 0), _jsx(Flex, { item: { grow: 1 }, as: StyledFlexItem, children: _jsx(Text, { children: "Item 2" }, void 0) }, void 0), _jsx(Flex, { item: { grow: 1 }, as: StyledFlexItem, children: _jsx(Text, { children: "Item 3" }, void 0) }, void 0), _jsx(Flex, { item: { grow: 1 }, as: StyledFlexItem, children: _jsx(Text, { children: "Item 4" }, void 0) }, void 0), _jsx(Flex, { item: { grow: 1 }, as: StyledFlexItem, children: _jsx(Text, { children: "Item 5" }, void 0) }, void 0)] }, void 0));
+    return (_jsxs(Flex, { container: { alignContent: args.alignContent, wrap: 'wrap', pad: 2 }, as: StyledFlexContainer, height: 20, width: 30, children: [_jsx(Flex, { item: { grow: 1 }, as: StyledFlexItem, children: _jsx(Text, { children: "Item 1" }) }), _jsx(Flex, { item: { grow: 1 }, as: StyledFlexItem, children: _jsx(Text, { children: "Item 2" }) }), _jsx(Flex, { item: { grow: 1 }, as: StyledFlexItem, children: _jsx(Text, { children: "Item 3" }) }), _jsx(Flex, { item: { grow: 1 }, as: StyledFlexItem, children: _jsx(Text, { children: "Item 4" }) }), _jsx(Flex, { item: { grow: 1 }, as: StyledFlexItem, children: _jsx(Text, { children: "Item 5" }) })] }));
 };
 AlignContent.args = {
     alignContent: 'stretch'
@@ -77,6 +77,6 @@ AlignContent.argTypes = {
     }
 };
 export const ResponsiveFlex = () => {
-    return (_jsxs(Flex, { container: { pad: 1, gap: 6 }, xl: { container: { gap: 12 } }, lg: { container: { gap: 9 } }, md: { container: { gap: 6 } }, sm: { container: { gap: 3 } }, xs: { container: { gap: 0 } }, as: StyledFlexContainer, children: [_jsx(Flex, { item: { grow: 1 }, as: StyledFlexItem, children: _jsx(Text, { children: "Item 1" }, void 0) }, void 0), _jsx(Flex, { item: { grow: 1 }, as: StyledFlexItem, children: _jsx(Text, { children: "Item 2" }, void 0) }, void 0), _jsx(Flex, { item: { grow: 1 }, as: StyledFlexItem, children: _jsx(Text, { children: "Item 3" }, void 0) }, void 0)] }, void 0));
+    return (_jsxs(Flex, { container: { pad: 1, gap: 6 }, xl: { container: { gap: 12 } }, lg: { container: { gap: 9 } }, md: { container: { gap: 6 } }, sm: { container: { gap: 3 } }, xs: { container: { gap: 0 } }, as: StyledFlexContainer, children: [_jsx(Flex, { item: { grow: 1 }, as: StyledFlexItem, children: _jsx(Text, { children: "Item 1" }) }), _jsx(Flex, { item: { grow: 1 }, as: StyledFlexItem, children: _jsx(Text, { children: "Item 2" }) }), _jsx(Flex, { item: { grow: 1 }, as: StyledFlexItem, children: _jsx(Text, { children: "Item 3" }) })] }));
 };
 //# sourceMappingURL=FlexContainer.stories.js.map

package/lib/core/Flex/FlexContainer.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FlexContainer.stories.js","sourceRoot":"","sources":["../../../src/core/Flex/FlexContainer.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { Flex, FlexContainerProps, Text } from '@pega/cosmos-react-core';\n\nimport { StyledFlexContainer, StyledFlexItem } from './Flex.styles';\n\nexport default {\n title: 'Core/Flex/Container',\n component: Flex,\n parameters: {\n layout: 'fullscreen'\n }\n} as Meta;\n\ninterface FlexStoryProps {\n direction?: FlexContainerProps['direction'];\n gap?: FlexContainerProps['gap'];\n pad?: FlexContainerProps['pad'];\n wrap?: FlexContainerProps['wrap'];\n justify?: FlexContainerProps['justify'];\n alignItems?: FlexContainerProps['alignItems'];\n alignContent?: FlexContainerProps['alignContent'];\n}\n\nexport const Direction: Story<FlexStoryProps> = (args: FlexStoryProps) => {\n return (\n <Flex container={{ direction: args.direction, pad: 2 }} as={StyledFlexContainer}>\n <Flex item={{ grow: 1 }} as={StyledFlexItem}>\n <Text>Item 1</Text>\n </Flex>\n <Flex item={{ grow: 1 }} as={StyledFlexItem}>\n <Text>Item 2</Text>\n </Flex>\n <Flex item={{ grow: 1 }} as={StyledFlexItem}>\n <Text>Item 3</Text>\n </Flex>\n </Flex>\n );\n};\n\nDirection.args = {\n direction: 'row'\n};\n\nDirection.argTypes = {\n direction: {\n options: ['row', 'column', 'row-reverse', 'column-reverse'],\n control: { type: 'select' }\n }\n};\n\nexport const GapAndPadding: Story<FlexStoryProps> = (args: FlexStoryProps) => {\n return (\n <Flex container={{ pad: args.pad, gap: args.gap }} as={StyledFlexContainer}>\n <Flex item={{ grow: 1 }} as={StyledFlexItem}>\n <Text>Item 1</Text>\n </Flex>\n <Flex item={{ grow: 1 }} as={StyledFlexItem}>\n <Text>Item 2</Text>\n </Flex>\n <Flex item={{ grow: 1 }} as={StyledFlexItem}>\n <Text>Item 3</Text>\n </Flex>\n </Flex>\n );\n};\n\nGapAndPadding.args = {\n pad: 1,\n gap: 1\n};\n\nGapAndPadding.argTypes = {\n pad: { control: { type: 'number' } },\n gap: { control: { type: 'number' } }\n};\n\nexport const Wrap: Story<FlexStoryProps> = (args: FlexStoryProps) => {\n return (\n <Flex container={{ wrap: args.wrap, pad: 2 }} as={StyledFlexContainer} width={35}>\n <Flex item={{ grow: 1 }} as={StyledFlexItem}>\n <Text>Item 1</Text>\n </Flex>\n <Flex item={{ grow: 1 }} as={StyledFlexItem}>\n <Text>Item 2</Text>\n </Flex>\n <Flex item={{ grow: 1 }} as={StyledFlexItem}>\n <Text>Item 3</Text>\n </Flex>\n <Flex item={{ grow: 1 }} as={StyledFlexItem}>\n <Text>Item 4</Text>\n </Flex>\n <Flex item={{ grow: 1 }} as={StyledFlexItem}>\n <Text>Item 5</Text>\n </Flex>\n </Flex>\n );\n};\n\nWrap.args = {\n wrap: 'nowrap'\n};\n\nWrap.argTypes = {\n wrap: { options: ['nowrap', 'wrap', 'wrap-reverse'], control: { type: 'select' } }\n};\n\nexport const Justify: Story<FlexStoryProps> = (args: FlexStoryProps) => {\n return (\n <Flex container={{ justify: args.justify, pad: 2 }} as={StyledFlexContainer}>\n <StyledFlexItem>\n <Text>Item 1</Text>\n </StyledFlexItem>\n <StyledFlexItem>\n <Text>Item 2</Text>\n </StyledFlexItem>\n <StyledFlexItem>\n <Text>Item 3</Text>\n </StyledFlexItem>\n </Flex>\n );\n};\n\nJustify.args = {\n justify: 'start'\n};\n\nJustify.argTypes = {\n justify: {\n options: ['start', 'end', 'center', 'between', 'around', 'evenly'],\n control: { type: 'select' }\n }\n};\n\nexport const AlignItems: Story<FlexStoryProps> = (args: FlexStoryProps) => {\n return (\n <Flex\n container={{ alignItems: args.alignItems, pad: 2 }}\n as={StyledFlexContainer}\n height={15}\n width={30}\n >\n <Flex item={{ grow: 1 }} as={StyledFlexItem}>\n <Text>Item 1</Text>\n </Flex>\n <Flex item={{ grow: 1 }} as={StyledFlexItem} noPadding>\n <Text>Item 2</Text>\n </Flex>\n <Flex container={{ direction: 'column' }} item={{ grow: 1 }} as={StyledFlexItem}>\n <Text>Item 3 - First line</Text>\n <Text>Item 3 - Second line</Text>\n </Flex>\n </Flex>\n );\n};\n\nAlignItems.args = {\n alignItems: 'stretch'\n};\n\nAlignItems.argTypes = {\n alignItems: {\n options: ['stretch', 'start', 'end', 'center', 'baseline'],\n control: { type: 'select' }\n }\n};\n\nexport const AlignContent: Story<FlexStoryProps> = (args: FlexStoryProps) => {\n return (\n <Flex\n container={{ alignContent: args.alignContent, wrap: 'wrap', pad: 2 }}\n as={StyledFlexContainer}\n height={20}\n width={30}\n >\n <Flex item={{ grow: 1 }} as={StyledFlexItem}>\n <Text>Item 1</Text>\n </Flex>\n <Flex item={{ grow: 1 }} as={StyledFlexItem}>\n <Text>Item 2</Text>\n </Flex>\n <Flex item={{ grow: 1 }} as={StyledFlexItem}>\n <Text>Item 3</Text>\n </Flex>\n <Flex item={{ grow: 1 }} as={StyledFlexItem}>\n <Text>Item 4</Text>\n </Flex>\n <Flex item={{ grow: 1 }} as={StyledFlexItem}>\n <Text>Item 5</Text>\n </Flex>\n </Flex>\n );\n};\n\nAlignContent.args = {\n alignContent: 'stretch'\n};\n\nAlignContent.argTypes = {\n alignContent: {\n options: ['stretch', 'start', 'end', 'center', 'between', 'around'],\n control: { type: 'select' }\n }\n};\n\nexport const ResponsiveFlex = () => {\n return (\n <Flex\n container={{ pad: 1, gap: 6 }}\n xl={{ container: { gap: 12 } }}\n lg={{ container: { gap: 9 } }}\n md={{ container: { gap: 6 } }}\n sm={{ container: { gap: 3 } }}\n xs={{ container: { gap: 0 } }}\n as={StyledFlexContainer}\n >\n <Flex item={{ grow: 1 }} as={StyledFlexItem}>\n <Text>Item 1</Text>\n </Flex>\n <Flex item={{ grow: 1 }} as={StyledFlexItem}>\n <Text>Item 2</Text>\n </Flex>\n <Flex item={{ grow: 1 }} as={StyledFlexItem}>\n <Text>Item 3</Text>\n </Flex>\n </Flex>\n );\n};\n"]}
1	+ {"version":3,"file":"FlexContainer.stories.js","sourceRoot":"","sources":["../../../src/core/Flex/FlexContainer.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { Flex, FlexContainerProps, Text } from '@pega/cosmos-react-core';\n\nimport { StyledFlexContainer, StyledFlexItem } from './Flex.styles';\n\nexport default {\n title: 'Core/Flex/Container',\n component: Flex,\n parameters: {\n layout: 'fullscreen'\n }\n} as Meta;\n\ninterface FlexStoryProps {\n direction?: FlexContainerProps['direction'];\n gap?: FlexContainerProps['gap'];\n pad?: FlexContainerProps['pad'];\n wrap?: FlexContainerProps['wrap'];\n justify?: FlexContainerProps['justify'];\n alignItems?: FlexContainerProps['alignItems'];\n alignContent?: FlexContainerProps['alignContent'];\n}\n\nexport const Direction: Story<FlexStoryProps> = (args: FlexStoryProps) => {\n return (\n <Flex container={{ direction: args.direction, pad: 2 }} as={StyledFlexContainer}>\n <Flex item={{ grow: 1 }} as={StyledFlexItem}>\n <Text>Item 1</Text>\n </Flex>\n <Flex item={{ grow: 1 }} as={StyledFlexItem}>\n <Text>Item 2</Text>\n </Flex>\n <Flex item={{ grow: 1 }} as={StyledFlexItem}>\n <Text>Item 3</Text>\n </Flex>\n </Flex>\n );\n};\n\nDirection.args = {\n direction: 'row'\n};\n\nDirection.argTypes = {\n direction: {\n options: ['row', 'column', 'row-reverse', 'column-reverse'],\n control: { type: 'select' }\n }\n};\n\nexport const GapAndPadding: Story<FlexStoryProps> = (args: FlexStoryProps) => {\n return (\n <Flex container={{ pad: args.pad, gap: args.gap }} as={StyledFlexContainer}>\n <Flex item={{ grow: 1 }} as={StyledFlexItem}>\n <Text>Item 1</Text>\n </Flex>\n <Flex item={{ grow: 1 }} as={StyledFlexItem}>\n <Text>Item 2</Text>\n </Flex>\n <Flex item={{ grow: 1 }} as={StyledFlexItem}>\n <Text>Item 3</Text>\n </Flex>\n </Flex>\n );\n};\n\nGapAndPadding.args = {\n pad: 1,\n gap: 1\n};\n\nGapAndPadding.argTypes = {\n pad: { control: { type: 'number' } },\n gap: { control: { type: 'number' } }\n};\n\nexport const Wrap: Story<FlexStoryProps> = (args: FlexStoryProps) => {\n return (\n <Flex container={{ wrap: args.wrap, pad: 2 }} as={StyledFlexContainer} width={35}>\n <Flex item={{ grow: 1 }} as={StyledFlexItem}>\n <Text>Item 1</Text>\n </Flex>\n <Flex item={{ grow: 1 }} as={StyledFlexItem}>\n <Text>Item 2</Text>\n </Flex>\n <Flex item={{ grow: 1 }} as={StyledFlexItem}>\n <Text>Item 3</Text>\n </Flex>\n <Flex item={{ grow: 1 }} as={StyledFlexItem}>\n <Text>Item 4</Text>\n </Flex>\n <Flex item={{ grow: 1 }} as={StyledFlexItem}>\n <Text>Item 5</Text>\n </Flex>\n </Flex>\n );\n};\n\nWrap.args = {\n wrap: 'nowrap'\n};\n\nWrap.argTypes = {\n wrap: { options: ['nowrap', 'wrap', 'wrap-reverse'], control: { type: 'select' } }\n};\n\nexport const Justify: Story<FlexStoryProps> = (args: FlexStoryProps) => {\n return (\n <Flex container={{ justify: args.justify, pad: 2 }} as={StyledFlexContainer}>\n <StyledFlexItem>\n <Text>Item 1</Text>\n </StyledFlexItem>\n <StyledFlexItem>\n <Text>Item 2</Text>\n </StyledFlexItem>\n <StyledFlexItem>\n <Text>Item 3</Text>\n </StyledFlexItem>\n </Flex>\n );\n};\n\nJustify.args = {\n justify: 'start'\n};\n\nJustify.argTypes = {\n justify: {\n options: ['start', 'end', 'center', 'between', 'around', 'evenly'],\n control: { type: 'select' }\n }\n};\n\nexport const AlignItems: Story<FlexStoryProps> = (args: FlexStoryProps) => {\n return (\n <Flex\n container={{ alignItems: args.alignItems, pad: 2 }}\n as={StyledFlexContainer}\n height={15}\n width={30}\n >\n <Flex item={{ grow: 1 }} as={StyledFlexItem}>\n <Text>Item 1</Text>\n </Flex>\n <Flex item={{ grow: 1 }} as={StyledFlexItem} noPadding>\n <Text>Item 2</Text>\n </Flex>\n <Flex container={{ direction: 'column' }} item={{ grow: 1 }} as={StyledFlexItem}>\n <Text>Item 3 - First line</Text>\n <Text>Item 3 - Second line</Text>\n </Flex>\n </Flex>\n );\n};\n\nAlignItems.args = {\n alignItems: 'stretch'\n};\n\nAlignItems.argTypes = {\n alignItems: {\n options: ['stretch', 'start', 'end', 'center', 'baseline'],\n control: { type: 'select' }\n }\n};\n\nexport const AlignContent: Story<FlexStoryProps> = (args: FlexStoryProps) => {\n return (\n <Flex\n container={{ alignContent: args.alignContent, wrap: 'wrap', pad: 2 }}\n as={StyledFlexContainer}\n height={20}\n width={30}\n >\n <Flex item={{ grow: 1 }} as={StyledFlexItem}>\n <Text>Item 1</Text>\n </Flex>\n <Flex item={{ grow: 1 }} as={StyledFlexItem}>\n <Text>Item 2</Text>\n </Flex>\n <Flex item={{ grow: 1 }} as={StyledFlexItem}>\n <Text>Item 3</Text>\n </Flex>\n <Flex item={{ grow: 1 }} as={StyledFlexItem}>\n <Text>Item 4</Text>\n </Flex>\n <Flex item={{ grow: 1 }} as={StyledFlexItem}>\n <Text>Item 5</Text>\n </Flex>\n </Flex>\n );\n};\n\nAlignContent.args = {\n alignContent: 'stretch'\n};\n\nAlignContent.argTypes = {\n alignContent: {\n options: ['stretch', 'start', 'end', 'center', 'between', 'around'],\n control: { type: 'select' }\n }\n};\n\nexport const ResponsiveFlex = () => {\n return (\n <Flex\n container={{ pad: 1, gap: 6 }}\n xl={{ container: { gap: 12 } }}\n lg={{ container: { gap: 9 } }}\n md={{ container: { gap: 6 } }}\n sm={{ container: { gap: 3 } }}\n xs={{ container: { gap: 0 } }}\n as={StyledFlexContainer}\n >\n <Flex item={{ grow: 1 }} as={StyledFlexItem}>\n <Text>Item 1</Text>\n </Flex>\n <Flex item={{ grow: 1 }} as={StyledFlexItem}>\n <Text>Item 2</Text>\n </Flex>\n <Flex item={{ grow: 1 }} as={StyledFlexItem}>\n <Text>Item 3</Text>\n </Flex>\n </Flex>\n );\n};\n"]}

package/lib/core/Flex/FlexItem.stories.js CHANGED Viewed

@@ -9,7 +9,7 @@ export default {
     }
 };
 export const AlignSelf = (args) => {
-    return (_jsxs(Flex, { container: { alignItems: 'start', pad: 2 }, as: StyledFlexContainer, height: 10, children: [_jsx(Flex, { item: { grow: 1 }, as: StyledFlexItem, inActive: true, children: _jsx(Text, { children: "Item 1" }, void 0) }, void 0), _jsx(Flex, { item: { grow: 1, alignSelf: args.alignSelf }, as: StyledFlexItem, noPadding: true, children: _jsx(Text, { children: "Item 2" }, void 0) }, void 0), _jsxs(Flex, { container: { direction: 'column' }, item: { grow: 1 }, as: StyledFlexItem, inActive: true, children: [_jsx(Text, { children: "Item 3 - First line" }, void 0), _jsx(Text, { children: "Item 3 - Second line" }, void 0)] }, void 0)] }, void 0));
+    return (_jsxs(Flex, { container: { alignItems: 'start', pad: 2 }, as: StyledFlexContainer, height: 10, children: [_jsx(Flex, { item: { grow: 1 }, as: StyledFlexItem, inActive: true, children: _jsx(Text, { children: "Item 1" }) }), _jsx(Flex, { item: { grow: 1, alignSelf: args.alignSelf }, as: StyledFlexItem, noPadding: true, children: _jsx(Text, { children: "Item 2" }) }), _jsxs(Flex, { container: { direction: 'column' }, item: { grow: 1 }, as: StyledFlexItem, inActive: true, children: [_jsx(Text, { children: "Item 3 - First line" }), _jsx(Text, { children: "Item 3 - Second line" })] })] }));
 };
 AlignSelf.args = {
     alignSelf: 'auto'
@@ -21,7 +21,7 @@ AlignSelf.argTypes = {
     }
 };
 export const Grow = (args) => {
-    return (_jsxs(Flex, { container: { pad: 2 }, as: StyledFlexContainer, children: [_jsx(Flex, { item: { grow: 1 }, as: StyledFlexItem, inActive: true, children: _jsx(Text, { children: "Grow: 1" }, void 0) }, void 0), _jsx(Flex, { item: { grow: args.grow }, as: StyledFlexItem, children: _jsxs(Text, { children: ["Grow: ", args.grow] }, void 0) }, void 0), _jsx(Flex, { item: { grow: 0 }, as: StyledFlexItem, inActive: true, children: _jsx(Text, { children: "Grow: 0" }, void 0) }, void 0)] }, void 0));
+    return (_jsxs(Flex, { container: { pad: 2 }, as: StyledFlexContainer, children: [_jsx(Flex, { item: { grow: 1 }, as: StyledFlexItem, inActive: true, children: _jsx(Text, { children: "Grow: 1" }) }), _jsx(Flex, { item: { grow: args.grow }, as: StyledFlexItem, children: _jsxs(Text, { children: ["Grow: ", args.grow] }) }), _jsx(Flex, { item: { grow: 0 }, as: StyledFlexItem, inActive: true, children: _jsx(Text, { children: "Grow: 0" }) })] }));
 };
 Grow.args = {
     grow: 0
@@ -30,7 +30,7 @@ Grow.argTypes = {
     grow: { control: { type: 'number' } }
 };
 export const Shrink = (args) => {
-    return (_jsxs(Flex, { container: { pad: 2 }, as: StyledFlexContainer, width: 42, children: [_jsx(Flex, { item: { shrink: 1 }, as: StyledFlexItem, width: 15, inActive: true, children: _jsx(Text, { children: "Shrink: 1" }, void 0) }, void 0), _jsx(Flex, { item: { shrink: args.shrink }, as: StyledFlexItem, width: 15, children: _jsxs(Text, { children: ["Shrink: ", args.shrink] }, void 0) }, void 0), _jsx(Flex, { item: { shrink: 0 }, as: StyledFlexItem, width: 15, inActive: true, children: _jsx(Text, { children: "Shrink: 0" }, void 0) }, void 0)] }, void 0));
+    return (_jsxs(Flex, { container: { pad: 2 }, as: StyledFlexContainer, width: 42, children: [_jsx(Flex, { item: { shrink: 1 }, as: StyledFlexItem, width: 15, inActive: true, children: _jsx(Text, { children: "Shrink: 1" }) }), _jsx(Flex, { item: { shrink: args.shrink }, as: StyledFlexItem, width: 15, children: _jsxs(Text, { children: ["Shrink: ", args.shrink] }) }), _jsx(Flex, { item: { shrink: 0 }, as: StyledFlexItem, width: 15, inActive: true, children: _jsx(Text, { children: "Shrink: 0" }) })] }));
 };
 Shrink.args = {
     shrink: 0

package/lib/core/Flex/FlexItem.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FlexItem.stories.js","sourceRoot":"","sources":["../../../src/core/Flex/FlexItem.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,IAAI,EAAiB,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAEpE,OAAO,EAAE,mBAAmB,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAEpE,eAAe;IACb,KAAK,EAAE,gBAAgB;IACvB,SAAS,EAAE,IAAI;IACf,UAAU,EAAE;QACV,MAAM,EAAE,YAAY;KACrB;CACM,CAAC;AAQV,MAAM,CAAC,MAAM,SAAS,GAA0B,CAAC,IAAoB,EAAE,EAAE;IACvE,OAAO,CACL,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,mBAAmB,EAAE,MAAM,EAAE,EAAE,aACnF,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,cAAc,EAAE,QAAQ,kBACnD,KAAC,IAAI,~~iCAAc~~,~~WACd~~,EACP,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE,EAAE,EAAE,EAAE,cAAc,EAAE,SAAS,kBAC/E,KAAC,IAAI,~~iCAAc~~,~~WACd~~,EACP,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,cAAc,EAAE,QAAQ,mBACvF,KAAC,IAAI,~~8CAA2B~~,EAChC,KAAC,IAAI~~,+CAA4B~~,~~YAC5B~~,~~YACF~~,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,SAAS,CAAC,IAAI,GAAG;IACf,SAAS,EAAE,MAAM;CAClB,CAAC;AAEF,SAAS,CAAC,QAAQ,GAAG;IACnB,SAAS,EAAE;QACT,OAAO,EAAE,CAAC,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,SAAS,CAAC;QAClE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;KAC5B;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,IAAI,GAA0B,CAAC,IAAoB,EAAE,EAAE;IAClE,OAAO,CACL,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,mBAAmB,aAClD,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,cAAc,EAAE,QAAQ,kBACnD,KAAC,IAAI,~~kCAAe~~,~~WACf~~,EACP,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,EAAE,EAAE,EAAE,cAAc,YACjD,MAAC,IAAI,yBAAQ,IAAI,CAAC,IAAI,~~YAAQ~~,~~WACzB~~,EACP,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,cAAc,EAAE,QAAQ,kBACnD,KAAC,IAAI,~~kCAAe~~,~~WACf~~,~~YACF~~,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,IAAI,CAAC,IAAI,GAAG;IACV,IAAI,EAAE,CAAC;CACR,CAAC;AAEF,IAAI,CAAC,QAAQ,GAAG;IACd,IAAI,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;CACtC,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAA0B,CAAC,IAAoB,EAAE,EAAE;IACpE,OAAO,CACL,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,mBAAmB,EAAE,KAAK,EAAE,EAAE,aAC7D,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,cAAc,EAAE,KAAK,EAAE,EAAE,EAAE,QAAQ,kBAChE,KAAC,IAAI,~~oCAAiB~~,~~WACjB~~,EACP,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,EAAE,EAAE,EAAE,cAAc,EAAE,KAAK,EAAE,EAAE,YAChE,MAAC,IAAI,2BAAU,IAAI,CAAC,MAAM,~~YAAQ~~,~~WAC7B~~,EACP,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,cAAc,EAAE,KAAK,EAAE,EAAE,EAAE,QAAQ,kBAChE,KAAC,IAAI,~~oCAAiB~~,~~WACjB~~,~~YACF~~,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,IAAI,GAAG;IACZ,MAAM,EAAE,CAAC;CACV,CAAC;AAEF,MAAM,CAAC,QAAQ,GAAG;IAChB,MAAM,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;CACxC,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { Flex, FlexItemProps, Text } from '@pega/cosmos-react-core';\n\nimport { StyledFlexContainer, StyledFlexItem } from './Flex.styles';\n\nexport default {\n title: 'Core/Flex/Item',\n component: Flex,\n parameters: {\n layout: 'fullscreen'\n }\n} as Meta;\n\ninterface FlexStoryProps {\n alignSelf?: FlexItemProps['alignSelf'];\n grow?: FlexItemProps['grow'];\n shrink?: FlexItemProps['shrink'];\n}\n\nexport const AlignSelf: Story<FlexStoryProps> = (args: FlexStoryProps) => {\n return (\n <Flex container={{ alignItems: 'start', pad: 2 }} as={StyledFlexContainer} height={10}>\n <Flex item={{ grow: 1 }} as={StyledFlexItem} inActive>\n <Text>Item 1</Text>\n </Flex>\n <Flex item={{ grow: 1, alignSelf: args.alignSelf }} as={StyledFlexItem} noPadding>\n <Text>Item 2</Text>\n </Flex>\n <Flex container={{ direction: 'column' }} item={{ grow: 1 }} as={StyledFlexItem} inActive>\n <Text>Item 3 - First line</Text>\n <Text>Item 3 - Second line</Text>\n </Flex>\n </Flex>\n );\n};\n\nAlignSelf.args = {\n alignSelf: 'auto'\n};\n\nAlignSelf.argTypes = {\n alignSelf: {\n options: ['auto', 'start', 'end', 'baseline', 'center', 'stretch'],\n control: { type: 'select' }\n }\n};\n\nexport const Grow: Story<FlexStoryProps> = (args: FlexStoryProps) => {\n return (\n <Flex container={{ pad: 2 }} as={StyledFlexContainer}>\n <Flex item={{ grow: 1 }} as={StyledFlexItem} inActive>\n <Text>Grow: 1</Text>\n </Flex>\n <Flex item={{ grow: args.grow }} as={StyledFlexItem}>\n <Text>Grow: {args.grow}</Text>\n </Flex>\n <Flex item={{ grow: 0 }} as={StyledFlexItem} inActive>\n <Text>Grow: 0</Text>\n </Flex>\n </Flex>\n );\n};\n\nGrow.args = {\n grow: 0\n};\n\nGrow.argTypes = {\n grow: { control: { type: 'number' } }\n};\n\nexport const Shrink: Story<FlexStoryProps> = (args: FlexStoryProps) => {\n return (\n <Flex container={{ pad: 2 }} as={StyledFlexContainer} width={42}>\n <Flex item={{ shrink: 1 }} as={StyledFlexItem} width={15} inActive>\n <Text>Shrink: 1</Text>\n </Flex>\n <Flex item={{ shrink: args.shrink }} as={StyledFlexItem} width={15}>\n <Text>Shrink: {args.shrink}</Text>\n </Flex>\n <Flex item={{ shrink: 0 }} as={StyledFlexItem} width={15} inActive>\n <Text>Shrink: 0</Text>\n </Flex>\n </Flex>\n );\n};\n\nShrink.args = {\n shrink: 0\n};\n\nShrink.argTypes = {\n shrink: { control: { type: 'number' } }\n};\n"]}
1	+ {"version":3,"file":"FlexItem.stories.js","sourceRoot":"","sources":["../../../src/core/Flex/FlexItem.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { Flex, FlexItemProps, Text } from '@pega/cosmos-react-core';\n\nimport { StyledFlexContainer, StyledFlexItem } from './Flex.styles';\n\nexport default {\n title: 'Core/Flex/Item',\n component: Flex,\n parameters: {\n layout: 'fullscreen'\n }\n} as Meta;\n\ninterface FlexStoryProps {\n alignSelf?: FlexItemProps['alignSelf'];\n grow?: FlexItemProps['grow'];\n shrink?: FlexItemProps['shrink'];\n}\n\nexport const AlignSelf: Story<FlexStoryProps> = (args: FlexStoryProps) => {\n return (\n <Flex container={{ alignItems: 'start', pad: 2 }} as={StyledFlexContainer} height={10}>\n <Flex item={{ grow: 1 }} as={StyledFlexItem} inActive>\n <Text>Item 1</Text>\n </Flex>\n <Flex item={{ grow: 1, alignSelf: args.alignSelf }} as={StyledFlexItem} noPadding>\n <Text>Item 2</Text>\n </Flex>\n <Flex container={{ direction: 'column' }} item={{ grow: 1 }} as={StyledFlexItem} inActive>\n <Text>Item 3 - First line</Text>\n <Text>Item 3 - Second line</Text>\n </Flex>\n </Flex>\n );\n};\n\nAlignSelf.args = {\n alignSelf: 'auto'\n};\n\nAlignSelf.argTypes = {\n alignSelf: {\n options: ['auto', 'start', 'end', 'baseline', 'center', 'stretch'],\n control: { type: 'select' }\n }\n};\n\nexport const Grow: Story<FlexStoryProps> = (args: FlexStoryProps) => {\n return (\n <Flex container={{ pad: 2 }} as={StyledFlexContainer}>\n <Flex item={{ grow: 1 }} as={StyledFlexItem} inActive>\n <Text>Grow: 1</Text>\n </Flex>\n <Flex item={{ grow: args.grow }} as={StyledFlexItem}>\n <Text>Grow: {args.grow}</Text>\n </Flex>\n <Flex item={{ grow: 0 }} as={StyledFlexItem} inActive>\n <Text>Grow: 0</Text>\n </Flex>\n </Flex>\n );\n};\n\nGrow.args = {\n grow: 0\n};\n\nGrow.argTypes = {\n grow: { control: { type: 'number' } }\n};\n\nexport const Shrink: Story<FlexStoryProps> = (args: FlexStoryProps) => {\n return (\n <Flex container={{ pad: 2 }} as={StyledFlexContainer} width={42}>\n <Flex item={{ shrink: 1 }} as={StyledFlexItem} width={15} inActive>\n <Text>Shrink: 1</Text>\n </Flex>\n <Flex item={{ shrink: args.shrink }} as={StyledFlexItem} width={15}>\n <Text>Shrink: {args.shrink}</Text>\n </Flex>\n <Flex item={{ shrink: 0 }} as={StyledFlexItem} width={15} inActive>\n <Text>Shrink: 0</Text>\n </Flex>\n </Flex>\n );\n};\n\nShrink.args = {\n shrink: 0\n};\n\nShrink.argTypes = {\n shrink: { control: { type: 'number' } }\n};\n"]}

package/lib/core/Form/Form.mocks.js CHANGED Viewed

@@ -75,7 +75,7 @@ export const FormContent = ({ cols, heading, description, showActions }) => {
     const canSubmit = fields.every(field => field.value && field.validator());
     const actions = (_jsxs(_Fragment, { children: [_jsx(Button, { name: 'Cancel', variant: 'secondary', onClick: () => {
                     push({ content: 'Form cancelled!' });
-                }, children: "Cancel" }, void 0), _jsx(Button, { name: 'Submit', type: 'submit', variant: 'primary', disabled: !canSubmit, children: "Submit" }, void 0)] }, void 0));
+                }, children: "Cancel" }), _jsx(Button, { name: 'Submit', type: 'submit', variant: 'primary', disabled: !canSubmit, children: "Submit" })] }));
     const onImageAdded = (image, id) => {
         const src = URL.createObjectURL(image);
         editorRef.current?.appendImage({ src, alt: image.name }, id);
@@ -83,7 +83,7 @@ export const FormContent = ({ cols, heading, description, showActions }) => {
     return (_jsx(Form, { actions: showActions ? actions : undefined, description: description, heading: heading, onSubmit: (e) => {
             e.preventDefault();
             push({ content: 'Form submitted!' });
-        }, style: { margin: 'auto', maxWidth: '37.5rem' }, children: _jsxs(Grid, { container: { gap: 1, cols: `repeat(${cols}, minmax(0, 1fr))` }, children: [_jsx(Input, { name: 'name', label: 'Name', value: name.value, required: name.required, status: name.status, info: 'some help text here', onChange: (e) => setField({ ...e }), onBlur: (e) => setField({ ...e }), autoComplete: 'off' }, void 0), _jsx(Input, { name: 'email', value: email.value, type: 'email', label: 'Email', required: email.required, status: email.status, info: 'some help text here', onChange: (e) => setField({ ...e }), onBlur: (e) => setField({ ...e }), autoComplete: 'off' }, void 0), _jsx(Grid, { item: { colStartEnd: '1/-1' }, children: _jsx(CheckboxGroup, { name: 'visited', label: 'Places you have worked', children: ['Cambridge', 'Krakow', 'Hyderabad', 'Bangalore'].map(office => (_jsx(Checkbox, { label: office, onChange: (e) => setField({ ...e }) }, office))) }, void 0) }, void 0), _jsx(Grid, { item: { colStartEnd: '1/-1' }, children: _jsx(RadioButtonGroup, { name: 'meetings', label: 'Do you enjoy early morning meetings?', children: ['Yes', "No… no I don't"].map(option => (_jsx(RadioButton, { label: option, onChange: (e) => setField({ ...e }) }, option))) }, void 0) }, void 0), _jsxs(Select, { label: 'What would you like to eat?', info: 'FYI: options are limited', children: [_jsx(Option, { children: "choose meal\u2026" }, void 0), _jsx(Option, { children: "Pizza" }, void 0), _jsx(Option, { children: "Sandwich" }, void 0), _jsx(Option, { children: "Salad" }, void 0)] }, void 0), _jsx(Grid, { item: { colStartEnd: '1/-1' }, children: _jsx(TextArea, { name: 'notes', required: notes.required, label: 'Meeting Notes', status: notes.status, info: notes.info || notes.help, onChange: (e) => setField({ ...e }), onBlur: (e) => setField({ ...e }) }, void 0) }, void 0), _jsx(Grid, { item: { colStartEnd: '1/-1' }, children: _jsx(RichTextEditor, { label: 'Detailed meeting notes', info: 'The rich text editor can be used in forms, comments, and documents', toolbar: [
+        }, style: { margin: 'auto', maxWidth: '37.5rem' }, children: _jsxs(Grid, { container: { gap: 1, cols: `repeat(${cols}, minmax(0, 1fr))` }, children: [_jsx(Input, { name: 'name', label: 'Name', value: name.value, required: name.required, status: name.status, info: 'some help text here', onChange: (e) => setField({ ...e }), onBlur: (e) => setField({ ...e }), autoComplete: 'off' }), _jsx(Input, { name: 'email', value: email.value, type: 'email', label: 'Email', required: email.required, status: email.status, info: 'some help text here', onChange: (e) => setField({ ...e }), onBlur: (e) => setField({ ...e }), autoComplete: 'off' }), _jsx(Grid, { item: { colStartEnd: '1/-1' }, children: _jsx(CheckboxGroup, { name: 'visited', label: 'Places you have worked', children: ['Cambridge', 'Krakow', 'Hyderabad', 'Bangalore'].map(office => (_jsx(Checkbox, { label: office, onChange: (e) => setField({ ...e }) }, office))) }) }), _jsx(Grid, { item: { colStartEnd: '1/-1' }, children: _jsx(RadioButtonGroup, { name: 'meetings', label: 'Do you enjoy early morning meetings?', children: ['Yes', "No… no I don't"].map(option => (_jsx(RadioButton, { label: option, onChange: (e) => setField({ ...e }) }, option))) }) }), _jsxs(Select, { label: 'What would you like to eat?', info: 'FYI: options are limited', children: [_jsx(Option, { children: "choose meal\u2026" }), _jsx(Option, { children: "Pizza" }), _jsx(Option, { children: "Sandwich" }), _jsx(Option, { children: "Salad" })] }), _jsx(Grid, { item: { colStartEnd: '1/-1' }, children: _jsx(TextArea, { name: 'notes', required: notes.required, label: 'Meeting Notes', status: notes.status, info: notes.info || notes.help, onChange: (e) => setField({ ...e }), onBlur: (e) => setField({ ...e }) }) }), _jsx(Grid, { item: { colStartEnd: '1/-1' }, children: _jsx(RichTextEditor, { label: 'Detailed meeting notes', info: 'The rich text editor can be used in forms, comments, and documents', toolbar: [
                             'inline-styling',
                             'headers',
                             'tables',
@@ -92,6 +92,6 @@ export const FormContent = ({ cols, heading, description, showActions }) => {
                             'lists',
                             'cut-copy-paste',
                             'indentation'
-                        ], onImageAdded: onImageAdded, ref: editorRef }, void 0) }, void 0), _jsx(Grid, { item: { colStartEnd: '1/-1' }, children: _jsx(FileInputDemo, {}, void 0) }, void 0), _jsx(ComboboxFilterableStory, {}, void 0)] }, void 0) }, void 0));
+                        ], onImageAdded: onImageAdded, ref: editorRef }) }), _jsx(Grid, { item: { colStartEnd: '1/-1' }, children: _jsx(FileInputDemo, {}) }), _jsx(ComboboxFilterableStory, {})] }) }));
 };
 //# sourceMappingURL=Form.mocks.js.map

package/lib/core/Form/Form.mocks.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Form.mocks.js","sourceRoot":"","sources":["../../../src/core/Form/Form.mocks.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useReducer, ChangeEvent, FocusEvent, FormEvent, useRef, useContext } from 'react';\n\nimport {\n Button,\n Checkbox,\n CheckboxGroup,\n Form,\n FormControlProps,\n Grid,\n Input,\n RadioButton,\n RadioButtonGroup,\n Select,\n Option,\n TextArea,\n ToasterContext\n} from '@pega/cosmos-react-core';\nimport {\n Editor as RichTextEditor,\n EditorState as RichTextEditorState\n} from '@pega/cosmos-react-rte';\n\nimport { FileInputDemo } from '../File/FileInput.stories';\nimport { FilterableSingleSelect as ComboboxFilterableStory } from '../ComboBox/ComboBox.stories';\n\ninterface Field extends FormControlProps {\n help?: string;\n error?: string;\n validator: (this: Field) => boolean;\n}\n\n// Get initial field properties\nconst initFields = (): Field[] => {\n const common = { value: undefined, status: undefined };\n return [\n {\n ...common,\n name: 'name',\n required: true,\n error: 'Please enter first and last name',\n validator() {\n if (!this.value) return false;\n return /^[a-z]+\\s[a-z]+$/i.test(this.value);\n }\n },\n {\n ...common,\n name: 'email',\n required: true,\n error: 'Enter a @pega.com address',\n validator() {\n if (!this.value) return false;\n return /^\\S+@pega\\.com$/.test(this.value);\n }\n },\n {\n ...common,\n name: 'notes',\n required: true,\n help: 'See how fast you can type 20 characters…go',\n error: 'You need to tell us more than 20 characters',\n validator() {\n if (!this.value) return false;\n return this.value.length >= 20;\n }\n }\n ];\n};\n\n// Handles setting of state for all fields\nconst fieldReducer = (\n fields: Field[],\n {\n target,\n type\n }:\n \| ChangeEvent<HTMLInputElement \| HTMLTextAreaElement>\n \| FocusEvent<HTMLInputElement \| HTMLTextAreaElement>\n) => {\n return fields.map(field => {\n if (field.name === target.name) {\n field.value = target.value;\n if (type === 'blur' \|\| field.status === 'error') {\n if ((field.required \|\| field.value) && !field.validator()) {\n field.status = 'error';\n field.info = field.error;\n } else {\n field.status = undefined;\n field.info = field.help;\n }\n }\n }\n return field;\n });\n};\n\nexport const FormContent = ({\n cols,\n heading,\n description,\n showActions\n}: {\n cols: number;\n showActions: boolean;\n heading?: string;\n description?: string;\n}) => {\n const editorRef = useRef<RichTextEditorState>(null);\n const [fields, setField] = useReducer(fieldReducer, undefined, initFields);\n const { push } = useContext(ToasterContext);\n\n const name = fields.find(field => field.name === 'name');\n const email = fields.find(field => field.name === 'email');\n const notes = fields.find(field => field.name === 'notes');\n\n if (!name \|\| !email \|\| !notes) return null;\n\n const canSubmit = fields.every(field => field.value && field.validator());\n\n const actions = (\n <>\n <Button\n name='Cancel'\n variant='secondary'\n onClick={() => {\n push({ content: 'Form cancelled!' });\n }}\n >\n Cancel\n </Button>\n <Button name='Submit' type='submit' variant='primary' disabled={!canSubmit}>\n Submit\n </Button>\n </>\n );\n\n const onImageAdded = (image: File, id: string) => {\n const src = URL.createObjectURL(image);\n editorRef.current?.appendImage({ src, alt: image.name }, id);\n };\n return (\n <Form\n actions={showActions ? actions : undefined}\n description={description}\n heading={heading}\n onSubmit={(e: FormEvent) => {\n e.preventDefault();\n push({ content: 'Form submitted!' });\n }}\n style={{ margin: 'auto', maxWidth: '37.5rem' }}\n >\n <Grid container={{ gap: 1, cols: `repeat(${cols}, minmax(0, 1fr))` }}>\n <Input\n name='name'\n label='Name'\n value={name.value}\n required={name.required}\n status={name.status}\n info='some help text here'\n onChange={(e: ChangeEvent<HTMLInputElement>) => setField({ ...e })}\n onBlur={(e: FocusEvent<HTMLInputElement>) => setField({ ...e })}\n autoComplete='off'\n />\n\n <Input\n name='email'\n value={email.value}\n type='email'\n label='Email'\n required={email.required}\n status={email.status}\n info='some help text here'\n onChange={(e: ChangeEvent<HTMLInputElement>) => setField({ ...e })}\n onBlur={(e: FocusEvent<HTMLInputElement>) => setField({ ...e })}\n autoComplete='off'\n />\n\n <Grid item={{ colStartEnd: '1/-1' }}>\n <CheckboxGroup name='visited' label='Places you have worked'>\n {['Cambridge', 'Krakow', 'Hyderabad', 'Bangalore'].map(office => (\n <Checkbox\n key={office}\n label={office}\n onChange={(e: ChangeEvent<HTMLInputElement>) => setField({ ...e })}\n />\n ))}\n </CheckboxGroup>\n </Grid>\n\n <Grid item={{ colStartEnd: '1/-1' }}>\n <RadioButtonGroup name='meetings' label='Do you enjoy early morning meetings?'>\n {['Yes', \"No… no I don't\"].map(option => (\n <RadioButton\n key={option}\n label={option}\n onChange={(e: ChangeEvent<HTMLInputElement>) => setField({ ...e })}\n />\n ))}\n </RadioButtonGroup>\n </Grid>\n\n <Select label='What would you like to eat?' info='FYI: options are limited'>\n <Option>choose meal…</Option>\n <Option>Pizza</Option>\n <Option>Sandwich</Option>\n <Option>Salad</Option>\n </Select>\n\n <Grid item={{ colStartEnd: '1/-1' }}>\n <TextArea\n name='notes'\n required={notes.required}\n label='Meeting Notes'\n status={notes.status}\n info={notes.info \|\| notes.help}\n onChange={(e: ChangeEvent<HTMLTextAreaElement>) => setField({ ...e })}\n onBlur={(e: FocusEvent<HTMLInputElement>) => setField({ ...e })}\n />\n </Grid>\n\n <Grid item={{ colStartEnd: '1/-1' }}>\n <RichTextEditor\n label='Detailed meeting notes'\n info='The rich text editor can be used in forms, comments, and documents'\n toolbar={[\n 'inline-styling',\n 'headers',\n 'tables',\n 'links',\n 'images',\n 'lists',\n 'cut-copy-paste',\n 'indentation'\n ]}\n onImageAdded={onImageAdded}\n ref={editorRef}\n />\n </Grid>\n <Grid item={{ colStartEnd: '1/-1' }}>\n <FileInputDemo />\n </Grid>\n <ComboboxFilterableStory />\n </Grid>\n </Form>\n );\n};\n"]}
1	+ {"version":3,"file":"Form.mocks.js","sourceRoot":"","sources":["../../../src/core/Form/Form.mocks.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useReducer, ChangeEvent, FocusEvent, FormEvent, useRef, useContext } from 'react';\n\nimport {\n Button,\n Checkbox,\n CheckboxGroup,\n Form,\n FormControlProps,\n Grid,\n Input,\n RadioButton,\n RadioButtonGroup,\n Select,\n Option,\n TextArea,\n ToasterContext\n} from '@pega/cosmos-react-core';\nimport {\n Editor as RichTextEditor,\n EditorState as RichTextEditorState\n} from '@pega/cosmos-react-rte';\n\nimport { FileInputDemo } from '../File/FileInput.stories';\nimport { FilterableSingleSelect as ComboboxFilterableStory } from '../ComboBox/ComboBox.stories';\n\ninterface Field extends FormControlProps {\n help?: string;\n error?: string;\n validator: (this: Field) => boolean;\n}\n\n// Get initial field properties\nconst initFields = (): Field[] => {\n const common = { value: undefined, status: undefined };\n return [\n {\n ...common,\n name: 'name',\n required: true,\n error: 'Please enter first and last name',\n validator() {\n if (!this.value) return false;\n return /^[a-z]+\\s[a-z]+$/i.test(this.value);\n }\n },\n {\n ...common,\n name: 'email',\n required: true,\n error: 'Enter a @pega.com address',\n validator() {\n if (!this.value) return false;\n return /^\\S+@pega\\.com$/.test(this.value);\n }\n },\n {\n ...common,\n name: 'notes',\n required: true,\n help: 'See how fast you can type 20 characters…go',\n error: 'You need to tell us more than 20 characters',\n validator() {\n if (!this.value) return false;\n return this.value.length >= 20;\n }\n }\n ];\n};\n\n// Handles setting of state for all fields\nconst fieldReducer = (\n fields: Field[],\n {\n target,\n type\n }:\n \| ChangeEvent<HTMLInputElement \| HTMLTextAreaElement>\n \| FocusEvent<HTMLInputElement \| HTMLTextAreaElement>\n) => {\n return fields.map(field => {\n if (field.name === target.name) {\n field.value = target.value;\n if (type === 'blur' \|\| field.status === 'error') {\n if ((field.required \|\| field.value) && !field.validator()) {\n field.status = 'error';\n field.info = field.error;\n } else {\n field.status = undefined;\n field.info = field.help;\n }\n }\n }\n return field;\n });\n};\n\nexport const FormContent = ({\n cols,\n heading,\n description,\n showActions\n}: {\n cols: number;\n showActions: boolean;\n heading?: string;\n description?: string;\n}) => {\n const editorRef = useRef<RichTextEditorState>(null);\n const [fields, setField] = useReducer(fieldReducer, undefined, initFields);\n const { push } = useContext(ToasterContext);\n\n const name = fields.find(field => field.name === 'name');\n const email = fields.find(field => field.name === 'email');\n const notes = fields.find(field => field.name === 'notes');\n\n if (!name \|\| !email \|\| !notes) return null;\n\n const canSubmit = fields.every(field => field.value && field.validator());\n\n const actions = (\n <>\n <Button\n name='Cancel'\n variant='secondary'\n onClick={() => {\n push({ content: 'Form cancelled!' });\n }}\n >\n Cancel\n </Button>\n <Button name='Submit' type='submit' variant='primary' disabled={!canSubmit}>\n Submit\n </Button>\n </>\n );\n\n const onImageAdded = (image: File, id: string) => {\n const src = URL.createObjectURL(image);\n editorRef.current?.appendImage({ src, alt: image.name }, id);\n };\n return (\n <Form\n actions={showActions ? actions : undefined}\n description={description}\n heading={heading}\n onSubmit={(e: FormEvent) => {\n e.preventDefault();\n push({ content: 'Form submitted!' });\n }}\n style={{ margin: 'auto', maxWidth: '37.5rem' }}\n >\n <Grid container={{ gap: 1, cols: `repeat(${cols}, minmax(0, 1fr))` }}>\n <Input\n name='name'\n label='Name'\n value={name.value}\n required={name.required}\n status={name.status}\n info='some help text here'\n onChange={(e: ChangeEvent<HTMLInputElement>) => setField({ ...e })}\n onBlur={(e: FocusEvent<HTMLInputElement>) => setField({ ...e })}\n autoComplete='off'\n />\n\n <Input\n name='email'\n value={email.value}\n type='email'\n label='Email'\n required={email.required}\n status={email.status}\n info='some help text here'\n onChange={(e: ChangeEvent<HTMLInputElement>) => setField({ ...e })}\n onBlur={(e: FocusEvent<HTMLInputElement>) => setField({ ...e })}\n autoComplete='off'\n />\n\n <Grid item={{ colStartEnd: '1/-1' }}>\n <CheckboxGroup name='visited' label='Places you have worked'>\n {['Cambridge', 'Krakow', 'Hyderabad', 'Bangalore'].map(office => (\n <Checkbox\n key={office}\n label={office}\n onChange={(e: ChangeEvent<HTMLInputElement>) => setField({ ...e })}\n />\n ))}\n </CheckboxGroup>\n </Grid>\n\n <Grid item={{ colStartEnd: '1/-1' }}>\n <RadioButtonGroup name='meetings' label='Do you enjoy early morning meetings?'>\n {['Yes', \"No… no I don't\"].map(option => (\n <RadioButton\n key={option}\n label={option}\n onChange={(e: ChangeEvent<HTMLInputElement>) => setField({ ...e })}\n />\n ))}\n </RadioButtonGroup>\n </Grid>\n\n <Select label='What would you like to eat?' info='FYI: options are limited'>\n <Option>choose meal…</Option>\n <Option>Pizza</Option>\n <Option>Sandwich</Option>\n <Option>Salad</Option>\n </Select>\n\n <Grid item={{ colStartEnd: '1/-1' }}>\n <TextArea\n name='notes'\n required={notes.required}\n label='Meeting Notes'\n status={notes.status}\n info={notes.info \|\| notes.help}\n onChange={(e: ChangeEvent<HTMLTextAreaElement>) => setField({ ...e })}\n onBlur={(e: FocusEvent<HTMLInputElement>) => setField({ ...e })}\n />\n </Grid>\n\n <Grid item={{ colStartEnd: '1/-1' }}>\n <RichTextEditor\n label='Detailed meeting notes'\n info='The rich text editor can be used in forms, comments, and documents'\n toolbar={[\n 'inline-styling',\n 'headers',\n 'tables',\n 'links',\n 'images',\n 'lists',\n 'cut-copy-paste',\n 'indentation'\n ]}\n onImageAdded={onImageAdded}\n ref={editorRef}\n />\n </Grid>\n <Grid item={{ colStartEnd: '1/-1' }}>\n <FileInputDemo />\n </Grid>\n <ComboboxFilterableStory />\n </Grid>\n </Form>\n );\n};\n"]}

package/lib/core/Form/Form.stories.js CHANGED Viewed

@@ -18,20 +18,20 @@ export default {
     }
 };
 export const OneColumnForm = (args) => {
-    return _jsx(FormContent, { cols: 1, heading: args.heading, description: args.description, showActions: true }, void 0);
+    return _jsx(FormContent, { cols: 1, heading: args.heading, description: args.description, showActions: true });
 };
 export const TwoColumnForm = (args) => {
-    return _jsx(FormContent, { cols: 2, heading: args.heading, description: args.description, showActions: true }, void 0);
+    return _jsx(FormContent, { cols: 2, heading: args.heading, description: args.description, showActions: true });
 };
 export const ThreeColumnForm = (args) => {
-    return _jsx(FormContent, { cols: 3, heading: args.heading, description: args.description, showActions: true }, void 0);
+    return _jsx(FormContent, { cols: 3, heading: args.heading, description: args.description, showActions: true });
 };
 export const SimpleFormDemo = (args) => {
     const [inputValue, setInputValue] = useState('');
     const [success, setSuccess] = useState('');
-    const actions = (_jsxs(_Fragment, { children: [_jsx(Button, { name: 'Cancel', variant: 'secondary', onClick: () => setInputValue(''), children: "Cancel" }, void 0), _jsx(Button, { name: 'Submit', type: 'submit', variant: 'primary', children: "Submit" }, void 0)] }, void 0));
-    const successBanner = (_jsx(Banner, { id: 'success', variant: 'success', heading: 'Success', messages: ['Form submitted', `Input value: ${success}`] }, void 0));
-    const errorBanner = (_jsx(Banner, { id: 'error', variant: 'urgent', heading: 'Error', messages: ['All required fields in the form must be completed.'] }, void 0));
+    const actions = (_jsxs(_Fragment, { children: [_jsx(Button, { name: 'Cancel', variant: 'secondary', onClick: () => setInputValue(''), children: "Cancel" }), _jsx(Button, { name: 'Submit', type: 'submit', variant: 'primary', children: "Submit" })] }));
+    const successBanner = (_jsx(Banner, { id: 'success', variant: 'success', heading: 'Success', messages: ['Form submitted', `Input value: ${success}`] }));
+    const errorBanner = (_jsx(Banner, { id: 'error', variant: 'urgent', heading: 'Error', messages: ['All required fields in the form must be completed.'] }));
     const banner = success ? successBanner : errorBanner;
     return (_jsx(Form, { banners: args.withBanners ? banner : undefined, actions: actions, heading: args.heading, description: args.description, onSubmit: (e) => {
             e.preventDefault();
@@ -40,7 +40,7 @@ export const SimpleFormDemo = (args) => {
         }, children: _jsx(Flex, { container: { direction: 'column', itemGap: 2 }, children: _jsx(Input, { label: 'Name', info: 'Enter your first name', required: true, value: inputValue, onChange: (e) => {
                     setSuccess('');
                     setInputValue(e.target.value);
-                } }, void 0) }, void 0) }, void 0));
+                } }) }) }));
 };
 SimpleFormDemo.args = {
     withBanners: false
@@ -65,7 +65,7 @@ export const ConfigurableForm = (args) => {
                     }
                 }
             }
-        }, children: _jsx(FormContent, { cols: 2, showActions: true }, void 0) }, void 0));
+        }, children: _jsx(FormContent, { cols: 2, showActions: true }) }));
 };
 ConfigurableForm.args = {
     foregroundColor: '#054a8a',

package/lib/core/Form/Form.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Form.stories.js","sourceRoot":"","sources":["../../../src/core/Form/Form.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAA0B,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEzD,OAAO,EACL,MAAM,EACN,MAAM,EACN,aAAa,EACb,IAAI,EACJ,IAAI,EACJ,SAAS,EACT,KAAK,EACN,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAE3C,eAAe;IACb,KAAK,EAAE,WAAW;IAClB,SAAS,EAAE,IAAI;IACf,aAAa,EAAE;QACb,SAAS;KACV;IACD,IAAI,EAAE;QACJ,OAAO,EAAE,WAAW;QACpB,WAAW,EAAE,EAAE;KAChB;IACD,QAAQ,EAAE;QACR,OAAO,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;QACtC,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;KAC3C;CACM,CAAC;AAMV,MAAM,CAAC,MAAM,aAAa,GAA0B,CAAC,IAAoB,EAAE,EAAE;IAC3E,OAAO,KAAC,WAAW,IAAC,IAAI,EAAE,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,WAAW,EAAE,IAAI,CAAC,WAAW,EAAE,WAAW,~~iBAAG~~,CAAC;AACpG,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAA0B,CAAC,IAAoB,EAAE,EAAE;IAC3E,OAAO,KAAC,WAAW,IAAC,IAAI,EAAE,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,WAAW,EAAE,IAAI,CAAC,WAAW,EAAE,WAAW,~~iBAAG~~,CAAC;AACpG,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAA0B,CAAC,IAAoB,EAAE,EAAE;IAC7E,OAAO,KAAC,WAAW,IAAC,IAAI,EAAE,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,WAAW,EAAE,IAAI,CAAC,WAAW,EAAE,WAAW,~~iBAAG~~,CAAC;AACpG,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAsD,CAC/E,IAAgD,EAChD,EAAE;IACF,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IACjD,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAE3C,MAAM,OAAO,GAAG,CACd,8BACE,KAAC,MAAM,IAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAC,WAAW,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,EAAE,CAAC~~,+BAEjE~~,EACT,KAAC,MAAM,IAAC,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAC,SAAS~~,+BAE5C~~,~~YACR~~,CACJ,CAAC;IAEF,MAAM,aAAa,GAAG,CACpB,KAAC,MAAM,IACL,EAAE,EAAC,SAAS,EACZ,OAAO,EAAC,SAAS,EACjB,OAAO,EAAC,SAAS,EACjB,QAAQ,EAAE,CAAC,gBAAgB,EAAE,gBAAgB,OAAO,EAAE,CAAC,~~WACvD~~,CACH,CAAC;IAEF,MAAM,WAAW,GAAG,CAClB,KAAC,MAAM,IACL,EAAE,EAAC,OAAO,EACV,OAAO,EAAC,QAAQ,EAChB,OAAO,EAAC,OAAO,EACf,QAAQ,EAAE,CAAC,oDAAoD,CAAC,~~WAChE~~,CACH,CAAC;IAEF,MAAM,MAAM,GAAG,OAAO,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,WAAW,CAAC;IAErD,OAAO,CACL,KAAC,IAAI,IACH,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EAC9C,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,CAAC,CAAY,EAAE,EAAE;YACzB,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,UAAU,CAAC,UAAU,CAAC,CAAC;YACvB,aAAa,CAAC,EAAE,CAAC,CAAC;QACpB,CAAC,YAED,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,EAAE,YAClD,KAAC,KAAK,IACJ,KAAK,EAAC,MAAM,EACZ,IAAI,EAAC,uBAAuB,EAC5B,QAAQ,QACR,KAAK,EAAE,UAAU,EACjB,QAAQ,EAAE,CAAC,CAAgC,EAAE,EAAE;oBAC7C,UAAU,CAAC,EAAE,CAAC,CAAC;oBACf,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;gBAChC,CAAC,~~WACD~~,~~WACG~~,~~WACF~~,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,cAAc,CAAC,IAAI,GAAG;IACpB,WAAW,EAAE,KAAK;CACnB,CAAC;AAEF,cAAc,CAAC,QAAQ,GAAG;IACxB,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;CAC9C,CAAC;AAYF,MAAM,CAAC,MAAM,gBAAgB,GAAiC,CAAC,IAA2B,EAAE,EAAE;IAC5F,OAAO,CACL,KAAC,aAAa,IACZ,KAAK,EAAE;YACL,UAAU,EAAE;gBACV,cAAc,EAAE;oBACd,kBAAkB,EAAE,IAAI,CAAC,eAAe;oBACxC,kBAAkB,EAAE,IAAI,CAAC,eAAe;oBACxC,cAAc,EAAE,IAAI,CAAC,WAAW;oBAChC,cAAc,EAAE,IAAI,CAAC,WAAW;oBAChC,eAAe,EAAE,IAAI,CAAC,YAAY;oBAClC,QAAQ,EAAE;wBACR,cAAc,EAAE,IAAI,CAAC,gBAAgB;qBACtC;oBACD,QAAQ,EAAE;wBACR,cAAc,EAAE,IAAI,CAAC,gBAAgB;qBACtC;iBACF;aACF;SACF,YAED,KAAC,WAAW,IAAC,IAAI,EAAE,CAAC,EAAE,WAAW,~~iBAAG~~,~~WACtB~~,CACjB,CAAC;AACJ,CAAC,CAAC;AAEF,gBAAgB,CAAC,IAAI,GAAG;IACtB,eAAe,EAAE,SAAS;IAC1B,eAAe,EAAE,SAAS;IAC1B,WAAW,EAAE,SAAS;IACtB,WAAW,EAAE,WAAW;IACxB,YAAY,EAAE,GAAG;IACjB,gBAAgB,EAAE,SAAS;IAC3B,gBAAgB,EAAE,aAAa;CAChC,CAAC;AAEF,gBAAgB,CAAC,QAAQ,GAAG;IAC1B,eAAe,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE;IAC/C,eAAe,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE;IAC/C,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE;IAC3C,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IAC1C,YAAY,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IAC7C,gBAAgB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE;IAChD,gBAAgB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE;IAChD,OAAO,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;IACrC,WAAW,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;CAC1C,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { ChangeEvent, FormEvent, useState } from 'react';\n\nimport {\n Banner,\n Button,\n Configuration,\n Flex,\n Form,\n FormField,\n Input\n} from '@pega/cosmos-react-core';\n\nimport { FormContent } from './Form.mocks';\n\nexport default {\n title: 'Core/Form',\n component: Form,\n subcomponents: {\n FormField\n },\n args: {\n heading: 'Form demo',\n description: ''\n },\n argTypes: {\n heading: { control: { type: 'text' } },\n description: { control: { type: 'text' } }\n }\n} as Meta;\ninterface FormStoryProps {\n heading?: string;\n description?: string;\n}\n\nexport const OneColumnForm: Story<FormStoryProps> = (args: FormStoryProps) => {\n return <FormContent cols={1} heading={args.heading} description={args.description} showActions />;\n};\n\nexport const TwoColumnForm: Story<FormStoryProps> = (args: FormStoryProps) => {\n return <FormContent cols={2} heading={args.heading} description={args.description} showActions />;\n};\n\nexport const ThreeColumnForm: Story<FormStoryProps> = (args: FormStoryProps) => {\n return <FormContent cols={3} heading={args.heading} description={args.description} showActions />;\n};\n\nexport const SimpleFormDemo: Story<FormStoryProps & { withBanners?: boolean }> = (\n args: FormStoryProps & { withBanners?: boolean }\n) => {\n const [inputValue, setInputValue] = useState('');\n const [success, setSuccess] = useState('');\n\n const actions = (\n <>\n <Button name='Cancel' variant='secondary' onClick={() => setInputValue('')}>\n Cancel\n </Button>\n <Button name='Submit' type='submit' variant='primary'>\n Submit\n </Button>\n </>\n );\n\n const successBanner = (\n <Banner\n id='success'\n variant='success'\n heading='Success'\n messages={['Form submitted', `Input value: ${success}`]}\n />\n );\n\n const errorBanner = (\n <Banner\n id='error'\n variant='urgent'\n heading='Error'\n messages={['All required fields in the form must be completed.']}\n />\n );\n\n const banner = success ? successBanner : errorBanner;\n\n return (\n <Form\n banners={args.withBanners ? banner : undefined}\n actions={actions}\n heading={args.heading}\n description={args.description}\n onSubmit={(e: FormEvent) => {\n e.preventDefault();\n setSuccess(inputValue);\n setInputValue('');\n }}\n >\n <Flex container={{ direction: 'column', itemGap: 2 }}>\n <Input\n label='Name'\n info='Enter your first name'\n required\n value={inputValue}\n onChange={(e: ChangeEvent<HTMLInputElement>) => {\n setSuccess('');\n setInputValue(e.target.value);\n }}\n />\n </Flex>\n </Form>\n );\n};\n\nSimpleFormDemo.args = {\n withBanners: false\n};\n\nSimpleFormDemo.argTypes = {\n withBanners: { control: { type: 'boolean' } }\n};\n\ninterface ConfigurableFormProps extends FormStoryProps {\n foregroundColor?: string;\n backgroundColor?: string;\n borderColor?: string;\n borderWidth?: string;\n borderRadius?: number;\n hoverBorderColor?: string;\n focusBorderColor?: string;\n}\n\nexport const ConfigurableForm: Story<ConfigurableFormProps> = (args: ConfigurableFormProps) => {\n return (\n <Configuration\n theme={{\n components: {\n 'form-control': {\n 'foreground-color': args.foregroundColor,\n 'background-color': args.backgroundColor,\n 'border-color': args.borderColor,\n 'border-width': args.borderWidth,\n 'border-radius': args.borderRadius,\n ':hover': {\n 'border-color': args.hoverBorderColor\n },\n ':focus': {\n 'border-color': args.focusBorderColor\n }\n }\n }\n }}\n >\n <FormContent cols={2} showActions />\n </Configuration>\n );\n};\n\nConfigurableForm.args = {\n foregroundColor: '#054a8a',\n backgroundColor: '#e2f1ff',\n borderColor: '#939393',\n borderWidth: '0.0625rem',\n borderRadius: 0.5,\n hoverBorderColor: '#3f3f3f',\n focusBorderColor: 'transparent'\n};\n\nConfigurableForm.argTypes = {\n foregroundColor: { control: { type: 'color' } },\n backgroundColor: { control: { type: 'color' } },\n borderColor: { control: { type: 'color' } },\n borderWidth: { control: { type: 'text' } },\n borderRadius: { control: { type: 'number' } },\n hoverBorderColor: { control: { type: 'color' } },\n focusBorderColor: { control: { type: 'color' } },\n heading: { table: { disable: true } },\n description: { table: { disable: true } }\n};\n"]}
1	+ {"version":3,"file":"Form.stories.js","sourceRoot":"","sources":["../../../src/core/Form/Form.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { ChangeEvent, FormEvent, useState } from 'react';\n\nimport {\n Banner,\n Button,\n Configuration,\n Flex,\n Form,\n FormField,\n Input\n} from '@pega/cosmos-react-core';\n\nimport { FormContent } from './Form.mocks';\n\nexport default {\n title: 'Core/Form',\n component: Form,\n subcomponents: {\n FormField\n },\n args: {\n heading: 'Form demo',\n description: ''\n },\n argTypes: {\n heading: { control: { type: 'text' } },\n description: { control: { type: 'text' } }\n }\n} as Meta;\ninterface FormStoryProps {\n heading?: string;\n description?: string;\n}\n\nexport const OneColumnForm: Story<FormStoryProps> = (args: FormStoryProps) => {\n return <FormContent cols={1} heading={args.heading} description={args.description} showActions />;\n};\n\nexport const TwoColumnForm: Story<FormStoryProps> = (args: FormStoryProps) => {\n return <FormContent cols={2} heading={args.heading} description={args.description} showActions />;\n};\n\nexport const ThreeColumnForm: Story<FormStoryProps> = (args: FormStoryProps) => {\n return <FormContent cols={3} heading={args.heading} description={args.description} showActions />;\n};\n\nexport const SimpleFormDemo: Story<FormStoryProps & { withBanners?: boolean }> = (\n args: FormStoryProps & { withBanners?: boolean }\n) => {\n const [inputValue, setInputValue] = useState('');\n const [success, setSuccess] = useState('');\n\n const actions = (\n <>\n <Button name='Cancel' variant='secondary' onClick={() => setInputValue('')}>\n Cancel\n </Button>\n <Button name='Submit' type='submit' variant='primary'>\n Submit\n </Button>\n </>\n );\n\n const successBanner = (\n <Banner\n id='success'\n variant='success'\n heading='Success'\n messages={['Form submitted', `Input value: ${success}`]}\n />\n );\n\n const errorBanner = (\n <Banner\n id='error'\n variant='urgent'\n heading='Error'\n messages={['All required fields in the form must be completed.']}\n />\n );\n\n const banner = success ? successBanner : errorBanner;\n\n return (\n <Form\n banners={args.withBanners ? banner : undefined}\n actions={actions}\n heading={args.heading}\n description={args.description}\n onSubmit={(e: FormEvent) => {\n e.preventDefault();\n setSuccess(inputValue);\n setInputValue('');\n }}\n >\n <Flex container={{ direction: 'column', itemGap: 2 }}>\n <Input\n label='Name'\n info='Enter your first name'\n required\n value={inputValue}\n onChange={(e: ChangeEvent<HTMLInputElement>) => {\n setSuccess('');\n setInputValue(e.target.value);\n }}\n />\n </Flex>\n </Form>\n );\n};\n\nSimpleFormDemo.args = {\n withBanners: false\n};\n\nSimpleFormDemo.argTypes = {\n withBanners: { control: { type: 'boolean' } }\n};\n\ninterface ConfigurableFormProps extends FormStoryProps {\n foregroundColor?: string;\n backgroundColor?: string;\n borderColor?: string;\n borderWidth?: string;\n borderRadius?: number;\n hoverBorderColor?: string;\n focusBorderColor?: string;\n}\n\nexport const ConfigurableForm: Story<ConfigurableFormProps> = (args: ConfigurableFormProps) => {\n return (\n <Configuration\n theme={{\n components: {\n 'form-control': {\n 'foreground-color': args.foregroundColor,\n 'background-color': args.backgroundColor,\n 'border-color': args.borderColor,\n 'border-width': args.borderWidth,\n 'border-radius': args.borderRadius,\n ':hover': {\n 'border-color': args.hoverBorderColor\n },\n ':focus': {\n 'border-color': args.focusBorderColor\n }\n }\n }\n }}\n >\n <FormContent cols={2} showActions />\n </Configuration>\n );\n};\n\nConfigurableForm.args = {\n foregroundColor: '#054a8a',\n backgroundColor: '#e2f1ff',\n borderColor: '#939393',\n borderWidth: '0.0625rem',\n borderRadius: 0.5,\n hoverBorderColor: '#3f3f3f',\n focusBorderColor: 'transparent'\n};\n\nConfigurableForm.argTypes = {\n foregroundColor: { control: { type: 'color' } },\n backgroundColor: { control: { type: 'color' } },\n borderColor: { control: { type: 'color' } },\n borderWidth: { control: { type: 'text' } },\n borderRadius: { control: { type: 'number' } },\n hoverBorderColor: { control: { type: 'color' } },\n focusBorderColor: { control: { type: 'color' } },\n heading: { table: { disable: true } },\n description: { table: { disable: true } }\n};\n"]}

package/lib/core/Grid/GridContainer.stories.js CHANGED Viewed

@@ -13,7 +13,7 @@ export const ColumnsAndRows = () => {
             cols: '7rem [line1] 1fr [line2] 3fr [line3]',
             rows: 'repeat(3, 3rem) auto',
             pad: 2
-        }, as: StyledGridContainer, height: 20, children: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(index => (_jsx(StyledGridItem, { children: _jsxs(Text, { children: ["Item ", index] }, void 0) }, `colRows-${index}`))) }, void 0));
+        }, as: StyledGridContainer, height: 20, children: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(index => (_jsx(StyledGridItem, { children: _jsxs(Text, { children: ["Item ", index] }) }, `colRows-${index}`))) }));
 };
 export const Areas = () => {
     return (_jsxs(Grid, { container: {
@@ -21,12 +21,12 @@ export const Areas = () => {
             rows: 'repeat(3, 3rem) auto',
             areas: '"sidebar header header" "sidebar . main" "sidebar . main" "sidebar footer footer"',
             pad: 2
-        }, as: StyledGridContainer, height: 20, children: [_jsx(Grid, { item: { area: 'header' }, as: StyledGridItem, children: _jsx(Text, { children: "Header" }, void 0) }, void 0), _jsx(Grid, { item: { area: 'sidebar' }, as: StyledGridItem, children: _jsx(Text, { children: "Side" }, void 0) }, void 0), _jsx(Grid, { item: { area: 'main' }, as: StyledGridItem, children: _jsx(Text, { children: "Main" }, void 0) }, void 0), _jsx(Grid, { item: { area: 'footer' }, as: StyledGridItem, children: _jsx(Text, { children: "Footer" }, void 0) }, void 0)] }, void 0));
+        }, as: StyledGridContainer, height: 20, children: [_jsx(Grid, { item: { area: 'header' }, as: StyledGridItem, children: _jsx(Text, { children: "Header" }) }), _jsx(Grid, { item: { area: 'sidebar' }, as: StyledGridItem, children: _jsx(Text, { children: "Side" }) }), _jsx(Grid, { item: { area: 'main' }, as: StyledGridItem, children: _jsx(Text, { children: "Main" }) }), _jsx(Grid, { item: { area: 'footer' }, as: StyledGridItem, children: _jsx(Text, { children: "Footer" }) })] }));
 };
 export const Template = () => {
     const rowsAndAreas = '"sidebar header header" 3rem "sidebar . main" 3rem "sidebar . main" 3rem "sidebar footer footer" auto';
     const columns = '5rem 1fr 3fr';
-    return (_jsxs(Grid, { container: { template: `${rowsAndAreas} / ${columns}`, pad: 2 }, as: StyledGridContainer, height: 20, children: [_jsx(Grid, { item: { area: 'header' }, as: StyledGridItem, children: _jsx(Text, { children: "Header" }, void 0) }, void 0), _jsx(Grid, { item: { area: 'sidebar' }, as: StyledGridItem, children: _jsx(Text, { children: "Side" }, void 0) }, void 0), _jsx(Grid, { item: { area: 'main' }, as: StyledGridItem, children: _jsx(Text, { children: "Main" }, void 0) }, void 0), _jsx(Grid, { item: { area: 'footer' }, as: StyledGridItem, children: _jsx(Text, { children: "Footer" }, void 0) }, void 0)] }, void 0));
+    return (_jsxs(Grid, { container: { template: `${rowsAndAreas} / ${columns}`, pad: 2 }, as: StyledGridContainer, height: 20, children: [_jsx(Grid, { item: { area: 'header' }, as: StyledGridItem, children: _jsx(Text, { children: "Header" }) }), _jsx(Grid, { item: { area: 'sidebar' }, as: StyledGridItem, children: _jsx(Text, { children: "Side" }) }), _jsx(Grid, { item: { area: 'main' }, as: StyledGridItem, children: _jsx(Text, { children: "Main" }) }), _jsx(Grid, { item: { area: 'footer' }, as: StyledGridItem, children: _jsx(Text, { children: "Footer" }) })] }));
 };
 export const GapsAndPadding = (args) => {
     return (_jsx(Grid, { container: {
@@ -35,7 +35,7 @@ export const GapsAndPadding = (args) => {
             rows: 'repeat(3, 3rem) auto',
             rowGap: args.rowGap,
             pad: args.pad
-        }, as: StyledGridContainer, height: 20, children: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(index => (_jsx(StyledGridItem, { children: _jsxs(Text, { children: ["Item ", index] }, void 0) }, `colRowGap-${index}`))) }, void 0));
+        }, as: StyledGridContainer, height: 20, children: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(index => (_jsx(StyledGridItem, { children: _jsxs(Text, { children: ["Item ", index] }) }, `colRowGap-${index}`))) }));
 };
 GapsAndPadding.args = {
     pad: 1,
@@ -53,7 +53,7 @@ export const JustifyGridItems = (args) => {
             rows: 'repeat(3, 3rem) auto',
             justifyItems: args.justifyItems,
             pad: 2
-        }, as: StyledGridContainer, height: 20, children: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(index => (_jsx(StyledGridItem, { children: _jsxs(Text, { children: ["Item ", index] }, void 0) }, `justifyItems-${index}`))) }, void 0));
+        }, as: StyledGridContainer, height: 20, children: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(index => (_jsx(StyledGridItem, { children: _jsxs(Text, { children: ["Item ", index] }) }, `justifyItems-${index}`))) }));
 };
 JustifyGridItems.args = {
     justifyItems: 'stretch'
@@ -67,7 +67,7 @@ export const JustifyGridContent = (args) => {
             rows: 'repeat(4, 3rem)',
             justifyContent: args.justifyContent,
             pad: 2
-        }, as: StyledGridContainer, children: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(index => (_jsx(StyledGridItem, { children: _jsxs(Text, { children: ["Item ", index] }, void 0) }, `justifyContent-${index}`))) }, void 0));
+        }, as: StyledGridContainer, children: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(index => (_jsx(StyledGridItem, { children: _jsxs(Text, { children: ["Item ", index] }) }, `justifyContent-${index}`))) }));
 };
 JustifyGridContent.args = {
     justifyContent: 'start'
@@ -84,7 +84,7 @@ export const AlignGridItems = (args) => {
             rows: 'repeat(3, 5rem) auto',
             alignItems: args.alignItems,
             pad: 2
-        }, as: StyledGridContainer, height: 20, children: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(index => (_jsx(StyledGridItem, { children: _jsxs(Text, { children: ["Item ", index] }, void 0) }, `alignItems-${index}`))) }, void 0));
+        }, as: StyledGridContainer, height: 20, children: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(index => (_jsx(StyledGridItem, { children: _jsxs(Text, { children: ["Item ", index] }) }, `alignItems-${index}`))) }));
 };
 AlignGridItems.args = {
     alignItems: 'stretch'
@@ -98,7 +98,7 @@ export const AlignGridContent = (args) => {
             rows: 'repeat(4, 3rem)',
             alignContent: args.alignContent,
             pad: 2
-        }, as: StyledGridContainer, height: 30, fitContent: true, children: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(index => (_jsx(StyledGridItem, { children: _jsxs(Text, { children: ["Item ", index] }, void 0) }, `alignContent-${index}`))) }, void 0));
+        }, as: StyledGridContainer, height: 30, fitContent: true, children: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(index => (_jsx(StyledGridItem, { children: _jsxs(Text, { children: ["Item ", index] }) }, `alignContent-${index}`))) }));
 };
 AlignGridContent.args = {
     alignContent: 'start'
@@ -110,6 +110,6 @@ AlignGridContent.argTypes = {
     }
 };
 export const ResponsiveGrid = () => {
-    return (_jsx(Grid, { container: { pad: 1, cols: 'repeat(3, 7rem)', rows: 'repeat(4, 3rem)' }, xl: { container: { cols: 'repeat(12, 1fr)', rows: 'repeat(1, 3rem)' } }, lg: { container: { cols: 'repeat(6, 1fr)', rows: 'repeat(2, 3rem)' } }, md: { container: { cols: 'repeat(4, 1fr)', rows: 'repeat(3, 3rem)' } }, sm: { container: { cols: 'repeat(3, 1fr)', rows: 'repeat(4, 3rem)' } }, xs: { container: { cols: 'repeat(2, 1fr)', rows: 'repeat(6, 3rem)' } }, as: StyledGridContainer, children: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(index => (_jsx(StyledGridItem, { children: _jsxs(Text, { children: ["Item ", index] }, void 0) }, `colRows-${index}`))) }, void 0));
+    return (_jsx(Grid, { container: { pad: 1, cols: 'repeat(3, 7rem)', rows: 'repeat(4, 3rem)' }, xl: { container: { cols: 'repeat(12, 1fr)', rows: 'repeat(1, 3rem)' } }, lg: { container: { cols: 'repeat(6, 1fr)', rows: 'repeat(2, 3rem)' } }, md: { container: { cols: 'repeat(4, 1fr)', rows: 'repeat(3, 3rem)' } }, sm: { container: { cols: 'repeat(3, 1fr)', rows: 'repeat(4, 3rem)' } }, xs: { container: { cols: 'repeat(2, 1fr)', rows: 'repeat(6, 3rem)' } }, as: StyledGridContainer, children: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(index => (_jsx(StyledGridItem, { children: _jsxs(Text, { children: ["Item ", index] }) }, `colRows-${index}`))) }));
 };
 //# sourceMappingURL=GridContainer.stories.js.map

package/lib/core/Grid/GridContainer.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"GridContainer.stories.js","sourceRoot":"","sources":["../../../src/core/Grid/GridContainer.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { Grid, GridContainerProps, Text } from '@pega/cosmos-react-core';\n\nimport { StyledGridContainer, StyledGridItem } from './Grid.styles';\n\nexport default {\n title: 'Core/Grid/Container',\n component: Grid,\n parameters: {\n layout: 'fullscreen'\n }\n} as Meta;\n\ninterface GridStoryProps {\n colGap?: GridContainerProps['colGap'];\n rowGap?: GridContainerProps['rowGap'];\n pad?: GridContainerProps['pad'];\n justifyItems?: GridContainerProps['justifyItems'];\n justifyContent?: GridContainerProps['justifyContent'];\n alignItems?: GridContainerProps['alignItems'];\n alignContent?: GridContainerProps['alignContent'];\n}\n\nexport const ColumnsAndRows = () => {\n return (\n <Grid\n container={{\n cols: '7rem [line1] 1fr [line2] 3fr [line3]',\n rows: 'repeat(3, 3rem) auto',\n pad: 2\n }}\n as={StyledGridContainer}\n height={20}\n >\n {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(index => (\n <StyledGridItem key={`colRows-${index}`}>\n <Text>Item {index}</Text>\n </StyledGridItem>\n ))}\n </Grid>\n );\n};\n\nexport const Areas = () => {\n return (\n <Grid\n container={{\n cols: '5rem 1fr 3fr',\n rows: 'repeat(3, 3rem) auto',\n areas: '\"sidebar header header\" \"sidebar . main\" \"sidebar . main\" \"sidebar footer footer\"',\n pad: 2\n }}\n as={StyledGridContainer}\n height={20}\n >\n <Grid item={{ area: 'header' }} as={StyledGridItem}>\n <Text>Header</Text>\n </Grid>\n <Grid item={{ area: 'sidebar' }} as={StyledGridItem}>\n <Text>Side</Text>\n </Grid>\n <Grid item={{ area: 'main' }} as={StyledGridItem}>\n <Text>Main</Text>\n </Grid>\n <Grid item={{ area: 'footer' }} as={StyledGridItem}>\n <Text>Footer</Text>\n </Grid>\n </Grid>\n );\n};\n\nexport const Template = () => {\n const rowsAndAreas =\n '\"sidebar header header\" 3rem \"sidebar . main\" 3rem \"sidebar . main\" 3rem \"sidebar footer footer\" auto';\n const columns = '5rem 1fr 3fr';\n\n return (\n <Grid\n container={{ template: `${rowsAndAreas} / ${columns}`, pad: 2 }}\n as={StyledGridContainer}\n height={20}\n >\n <Grid item={{ area: 'header' }} as={StyledGridItem}>\n <Text>Header</Text>\n </Grid>\n <Grid item={{ area: 'sidebar' }} as={StyledGridItem}>\n <Text>Side</Text>\n </Grid>\n <Grid item={{ area: 'main' }} as={StyledGridItem}>\n <Text>Main</Text>\n </Grid>\n <Grid item={{ area: 'footer' }} as={StyledGridItem}>\n <Text>Footer</Text>\n </Grid>\n </Grid>\n );\n};\n\nexport const GapsAndPadding: Story<GridStoryProps> = (args: GridStoryProps) => {\n return (\n <Grid\n container={{\n cols: '7rem 1fr 3fr',\n colGap: args.colGap,\n rows: 'repeat(3, 3rem) auto',\n rowGap: args.rowGap,\n pad: args.pad\n }}\n as={StyledGridContainer}\n height={20}\n >\n {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(index => (\n <StyledGridItem key={`colRowGap-${index}`}>\n <Text>Item {index}</Text>\n </StyledGridItem>\n ))}\n </Grid>\n );\n};\n\nGapsAndPadding.args = {\n pad: 1,\n colGap: 1,\n rowGap: 1\n};\n\nGapsAndPadding.argTypes = {\n pad: { control: { type: 'number' } },\n colGap: { control: { type: 'number' } },\n rowGap: { control: { type: 'number' } }\n};\n\nexport const JustifyGridItems: Story<GridStoryProps> = (args: GridStoryProps) => {\n return (\n <Grid\n container={{\n cols: '7rem 1fr 3fr',\n rows: 'repeat(3, 3rem) auto',\n justifyItems: args.justifyItems,\n pad: 2\n }}\n as={StyledGridContainer}\n height={20}\n >\n {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(index => (\n <StyledGridItem key={`justifyItems-${index}`}>\n <Text>Item {index}</Text>\n </StyledGridItem>\n ))}\n </Grid>\n );\n};\n\nJustifyGridItems.args = {\n justifyItems: 'stretch'\n};\n\nJustifyGridItems.argTypes = {\n justifyItems: { options: ['stretch', 'start', 'center', 'end'], control: { type: 'select' } }\n};\n\nexport const JustifyGridContent: Story<GridStoryProps> = (args: GridStoryProps) => {\n return (\n <Grid\n container={{\n cols: 'repeat(3, 7rem)',\n rows: 'repeat(4, 3rem)',\n justifyContent: args.justifyContent,\n pad: 2\n }}\n as={StyledGridContainer}\n >\n {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(index => (\n <StyledGridItem key={`justifyContent-${index}`}>\n <Text>Item {index}</Text>\n </StyledGridItem>\n ))}\n </Grid>\n );\n};\n\nJustifyGridContent.args = {\n justifyContent: 'start'\n};\n\nJustifyGridContent.argTypes = {\n justifyContent: {\n options: ['start', 'end', 'center', 'around', 'between', 'evenly'],\n control: { type: 'select' }\n }\n};\n\nexport const AlignGridItems: Story<GridStoryProps> = (args: GridStoryProps) => {\n return (\n <Grid\n container={{\n cols: '7rem 1fr 3fr',\n rows: 'repeat(3, 5rem) auto',\n alignItems: args.alignItems,\n pad: 2\n }}\n as={StyledGridContainer}\n height={20}\n >\n {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(index => (\n <StyledGridItem key={`alignItems-${index}`}>\n <Text>Item {index}</Text>\n </StyledGridItem>\n ))}\n </Grid>\n );\n};\n\nAlignGridItems.args = {\n alignItems: 'stretch'\n};\n\nAlignGridItems.argTypes = {\n alignItems: { options: ['stretch', 'start', 'center', 'end'], control: { type: 'select' } }\n};\n\nexport const AlignGridContent: Story<GridStoryProps> = (args: GridStoryProps) => {\n return (\n <Grid\n container={{\n cols: 'repeat(3, 7rem)',\n rows: 'repeat(4, 3rem)',\n alignContent: args.alignContent,\n pad: 2\n }}\n as={StyledGridContainer}\n height={30}\n fitContent\n >\n {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(index => (\n <StyledGridItem key={`alignContent-${index}`}>\n <Text>Item {index}</Text>\n </StyledGridItem>\n ))}\n </Grid>\n );\n};\n\nAlignGridContent.args = {\n alignContent: 'start'\n};\n\nAlignGridContent.argTypes = {\n alignContent: {\n options: ['start', 'end', 'center', 'around', 'between', 'evenly'],\n control: { type: 'select' }\n }\n};\n\nexport const ResponsiveGrid = () => {\n return (\n <Grid\n container={{ pad: 1, cols: 'repeat(3, 7rem)', rows: 'repeat(4, 3rem)' }}\n xl={{ container: { cols: 'repeat(12, 1fr)', rows: 'repeat(1, 3rem)' } }}\n lg={{ container: { cols: 'repeat(6, 1fr)', rows: 'repeat(2, 3rem)' } }}\n md={{ container: { cols: 'repeat(4, 1fr)', rows: 'repeat(3, 3rem)' } }}\n sm={{ container: { cols: 'repeat(3, 1fr)', rows: 'repeat(4, 3rem)' } }}\n xs={{ container: { cols: 'repeat(2, 1fr)', rows: 'repeat(6, 3rem)' } }}\n as={StyledGridContainer}\n >\n {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(index => (\n <StyledGridItem key={`colRows-${index}`}>\n <Text>Item {index}</Text>\n </StyledGridItem>\n ))}\n </Grid>\n );\n};\n"]}
1	+ {"version":3,"file":"GridContainer.stories.js","sourceRoot":"","sources":["../../../src/core/Grid/GridContainer.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,IAAI,EAAsB,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAEzE,OAAO,EAAE,mBAAmB,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAEpE,eAAe;IACb,KAAK,EAAE,qBAAqB;IAC5B,SAAS,EAAE,IAAI;IACf,UAAU,EAAE;QACV,MAAM,EAAE,YAAY;KACrB;CACM,CAAC;AAYV,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,EAAE;IACjC,OAAO,CACL,KAAC,IAAI,IACH,SAAS,EAAE;YACT,IAAI,EAAE,sCAAsC;YAC5C,IAAI,EAAE,sBAAsB;YAC5B,GAAG,EAAE,CAAC;SACP,EACD,EAAE,EAAE,mBAAmB,EACvB,MAAM,EAAE,EAAE,YAET,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,CACpD,KAAC,cAAc,cACb,MAAC,IAAI,wBAAO,KAAK,IAAQ,IADN,WAAW,KAAK,EAAE,CAEtB,CAClB,CAAC,GACG,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,EAAE;IACxB,OAAO,CACL,MAAC,IAAI,IACH,SAAS,EAAE;YACT,IAAI,EAAE,cAAc;YACpB,IAAI,EAAE,sBAAsB;YAC5B,KAAK,EAAE,mFAAmF;YAC1F,GAAG,EAAE,CAAC;SACP,EACD,EAAE,EAAE,mBAAmB,EACvB,MAAM,EAAE,EAAE,aAEV,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,EAAE,EAAE,cAAc,YAChD,KAAC,IAAI,yBAAc,GACd,EACP,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,EAAE,EAAE,cAAc,YACjD,KAAC,IAAI,uBAAY,GACZ,EACP,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,cAAc,YAC9C,KAAC,IAAI,uBAAY,GACZ,EACP,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,EAAE,EAAE,cAAc,YAChD,KAAC,IAAI,yBAAc,GACd,IACF,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,GAAG,EAAE;IAC3B,MAAM,YAAY,GAChB,uGAAuG,CAAC;IAC1G,MAAM,OAAO,GAAG,cAAc,CAAC;IAE/B,OAAO,CACL,MAAC,IAAI,IACH,SAAS,EAAE,EAAE,QAAQ,EAAE,GAAG,YAAY,MAAM,OAAO,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,EAC/D,EAAE,EAAE,mBAAmB,EACvB,MAAM,EAAE,EAAE,aAEV,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,EAAE,EAAE,cAAc,YAChD,KAAC,IAAI,yBAAc,GACd,EACP,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,EAAE,EAAE,cAAc,YACjD,KAAC,IAAI,uBAAY,GACZ,EACP,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,cAAc,YAC9C,KAAC,IAAI,uBAAY,GACZ,EACP,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,EAAE,EAAE,cAAc,YAChD,KAAC,IAAI,yBAAc,GACd,IACF,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAA0B,CAAC,IAAoB,EAAE,EAAE;IAC5E,OAAO,CACL,KAAC,IAAI,IACH,SAAS,EAAE;YACT,IAAI,EAAE,cAAc;YACpB,MAAM,EAAE,IAAI,CAAC,MAAM;YACnB,IAAI,EAAE,sBAAsB;YAC5B,MAAM,EAAE,IAAI,CAAC,MAAM;YACnB,GAAG,EAAE,IAAI,CAAC,GAAG;SACd,EACD,EAAE,EAAE,mBAAmB,EACvB,MAAM,EAAE,EAAE,YAET,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,CACpD,KAAC,cAAc,cACb,MAAC,IAAI,wBAAO,KAAK,IAAQ,IADN,aAAa,KAAK,EAAE,CAExB,CAClB,CAAC,GACG,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,cAAc,CAAC,IAAI,GAAG;IACpB,GAAG,EAAE,CAAC;IACN,MAAM,EAAE,CAAC;IACT,MAAM,EAAE,CAAC;CACV,CAAC;AAEF,cAAc,CAAC,QAAQ,GAAG;IACxB,GAAG,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IACpC,MAAM,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IACvC,MAAM,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;CACxC,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAA0B,CAAC,IAAoB,EAAE,EAAE;IAC9E,OAAO,CACL,KAAC,IAAI,IACH,SAAS,EAAE;YACT,IAAI,EAAE,cAAc;YACpB,IAAI,EAAE,sBAAsB;YAC5B,YAAY,EAAE,IAAI,CAAC,YAAY;YAC/B,GAAG,EAAE,CAAC;SACP,EACD,EAAE,EAAE,mBAAmB,EACvB,MAAM,EAAE,EAAE,YAET,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,CACpD,KAAC,cAAc,cACb,MAAC,IAAI,wBAAO,KAAK,IAAQ,IADN,gBAAgB,KAAK,EAAE,CAE3B,CAClB,CAAC,GACG,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,gBAAgB,CAAC,IAAI,GAAG;IACtB,YAAY,EAAE,SAAS;CACxB,CAAC;AAEF,gBAAgB,CAAC,QAAQ,GAAG;IAC1B,YAAY,EAAE,EAAE,OAAO,EAAE,CAAC,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;CAC9F,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAA0B,CAAC,IAAoB,EAAE,EAAE;IAChF,OAAO,CACL,KAAC,IAAI,IACH,SAAS,EAAE;YACT,IAAI,EAAE,iBAAiB;YACvB,IAAI,EAAE,iBAAiB;YACvB,cAAc,EAAE,IAAI,CAAC,cAAc;YACnC,GAAG,EAAE,CAAC;SACP,EACD,EAAE,EAAE,mBAAmB,YAEtB,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,CACpD,KAAC,cAAc,cACb,MAAC,IAAI,wBAAO,KAAK,IAAQ,IADN,kBAAkB,KAAK,EAAE,CAE7B,CAClB,CAAC,GACG,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAkB,CAAC,IAAI,GAAG;IACxB,cAAc,EAAE,OAAO;CACxB,CAAC;AAEF,kBAAkB,CAAC,QAAQ,GAAG;IAC5B,cAAc,EAAE;QACd,OAAO,EAAE,CAAC,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,CAAC;QAClE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;KAC5B;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAA0B,CAAC,IAAoB,EAAE,EAAE;IAC5E,OAAO,CACL,KAAC,IAAI,IACH,SAAS,EAAE;YACT,IAAI,EAAE,cAAc;YACpB,IAAI,EAAE,sBAAsB;YAC5B,UAAU,EAAE,IAAI,CAAC,UAAU;YAC3B,GAAG,EAAE,CAAC;SACP,EACD,EAAE,EAAE,mBAAmB,EACvB,MAAM,EAAE,EAAE,YAET,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,CACpD,KAAC,cAAc,cACb,MAAC,IAAI,wBAAO,KAAK,IAAQ,IADN,cAAc,KAAK,EAAE,CAEzB,CAClB,CAAC,GACG,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,cAAc,CAAC,IAAI,GAAG;IACpB,UAAU,EAAE,SAAS;CACtB,CAAC;AAEF,cAAc,CAAC,QAAQ,GAAG;IACxB,UAAU,EAAE,EAAE,OAAO,EAAE,CAAC,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;CAC5F,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAA0B,CAAC,IAAoB,EAAE,EAAE;IAC9E,OAAO,CACL,KAAC,IAAI,IACH,SAAS,EAAE;YACT,IAAI,EAAE,iBAAiB;YACvB,IAAI,EAAE,iBAAiB;YACvB,YAAY,EAAE,IAAI,CAAC,YAAY;YAC/B,GAAG,EAAE,CAAC;SACP,EACD,EAAE,EAAE,mBAAmB,EACvB,MAAM,EAAE,EAAE,EACV,UAAU,kBAET,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,CACpD,KAAC,cAAc,cACb,MAAC,IAAI,wBAAO,KAAK,IAAQ,IADN,gBAAgB,KAAK,EAAE,CAE3B,CAClB,CAAC,GACG,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,gBAAgB,CAAC,IAAI,GAAG;IACtB,YAAY,EAAE,OAAO;CACtB,CAAC;AAEF,gBAAgB,CAAC,QAAQ,GAAG;IAC1B,YAAY,EAAE;QACZ,OAAO,EAAE,CAAC,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,CAAC;QAClE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;KAC5B;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,EAAE;IACjC,OAAO,CACL,KAAC,IAAI,IACH,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,iBAAiB,EAAE,IAAI,EAAE,iBAAiB,EAAE,EACvE,EAAE,EAAE,EAAE,SAAS,EAAE,EAAE,IAAI,EAAE,iBAAiB,EAAE,IAAI,EAAE,iBAAiB,EAAE,EAAE,EACvE,EAAE,EAAE,EAAE,SAAS,EAAE,EAAE,IAAI,EAAE,gBAAgB,EAAE,IAAI,EAAE,iBAAiB,EAAE,EAAE,EACtE,EAAE,EAAE,EAAE,SAAS,EAAE,EAAE,IAAI,EAAE,gBAAgB,EAAE,IAAI,EAAE,iBAAiB,EAAE,EAAE,EACtE,EAAE,EAAE,EAAE,SAAS,EAAE,EAAE,IAAI,EAAE,gBAAgB,EAAE,IAAI,EAAE,iBAAiB,EAAE,EAAE,EACtE,EAAE,EAAE,EAAE,SAAS,EAAE,EAAE,IAAI,EAAE,gBAAgB,EAAE,IAAI,EAAE,iBAAiB,EAAE,EAAE,EACtE,EAAE,EAAE,mBAAmB,YAEtB,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,CACpD,KAAC,cAAc,cACb,MAAC,IAAI,wBAAO,KAAK,IAAQ,IADN,WAAW,KAAK,EAAE,CAEtB,CAClB,CAAC,GACG,CACR,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { Grid, GridContainerProps, Text } from '@pega/cosmos-react-core';\n\nimport { StyledGridContainer, StyledGridItem } from './Grid.styles';\n\nexport default {\n title: 'Core/Grid/Container',\n component: Grid,\n parameters: {\n layout: 'fullscreen'\n }\n} as Meta;\n\ninterface GridStoryProps {\n colGap?: GridContainerProps['colGap'];\n rowGap?: GridContainerProps['rowGap'];\n pad?: GridContainerProps['pad'];\n justifyItems?: GridContainerProps['justifyItems'];\n justifyContent?: GridContainerProps['justifyContent'];\n alignItems?: GridContainerProps['alignItems'];\n alignContent?: GridContainerProps['alignContent'];\n}\n\nexport const ColumnsAndRows = () => {\n return (\n <Grid\n container={{\n cols: '7rem [line1] 1fr [line2] 3fr [line3]',\n rows: 'repeat(3, 3rem) auto',\n pad: 2\n }}\n as={StyledGridContainer}\n height={20}\n >\n {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(index => (\n <StyledGridItem key={`colRows-${index}`}>\n <Text>Item {index}</Text>\n </StyledGridItem>\n ))}\n </Grid>\n );\n};\n\nexport const Areas = () => {\n return (\n <Grid\n container={{\n cols: '5rem 1fr 3fr',\n rows: 'repeat(3, 3rem) auto',\n areas: '\"sidebar header header\" \"sidebar . main\" \"sidebar . main\" \"sidebar footer footer\"',\n pad: 2\n }}\n as={StyledGridContainer}\n height={20}\n >\n <Grid item={{ area: 'header' }} as={StyledGridItem}>\n <Text>Header</Text>\n </Grid>\n <Grid item={{ area: 'sidebar' }} as={StyledGridItem}>\n <Text>Side</Text>\n </Grid>\n <Grid item={{ area: 'main' }} as={StyledGridItem}>\n <Text>Main</Text>\n </Grid>\n <Grid item={{ area: 'footer' }} as={StyledGridItem}>\n <Text>Footer</Text>\n </Grid>\n </Grid>\n );\n};\n\nexport const Template = () => {\n const rowsAndAreas =\n '\"sidebar header header\" 3rem \"sidebar . main\" 3rem \"sidebar . main\" 3rem \"sidebar footer footer\" auto';\n const columns = '5rem 1fr 3fr';\n\n return (\n <Grid\n container={{ template: `${rowsAndAreas} / ${columns}`, pad: 2 }}\n as={StyledGridContainer}\n height={20}\n >\n <Grid item={{ area: 'header' }} as={StyledGridItem}>\n <Text>Header</Text>\n </Grid>\n <Grid item={{ area: 'sidebar' }} as={StyledGridItem}>\n <Text>Side</Text>\n </Grid>\n <Grid item={{ area: 'main' }} as={StyledGridItem}>\n <Text>Main</Text>\n </Grid>\n <Grid item={{ area: 'footer' }} as={StyledGridItem}>\n <Text>Footer</Text>\n </Grid>\n </Grid>\n );\n};\n\nexport const GapsAndPadding: Story<GridStoryProps> = (args: GridStoryProps) => {\n return (\n <Grid\n container={{\n cols: '7rem 1fr 3fr',\n colGap: args.colGap,\n rows: 'repeat(3, 3rem) auto',\n rowGap: args.rowGap,\n pad: args.pad\n }}\n as={StyledGridContainer}\n height={20}\n >\n {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(index => (\n <StyledGridItem key={`colRowGap-${index}`}>\n <Text>Item {index}</Text>\n </StyledGridItem>\n ))}\n </Grid>\n );\n};\n\nGapsAndPadding.args = {\n pad: 1,\n colGap: 1,\n rowGap: 1\n};\n\nGapsAndPadding.argTypes = {\n pad: { control: { type: 'number' } },\n colGap: { control: { type: 'number' } },\n rowGap: { control: { type: 'number' } }\n};\n\nexport const JustifyGridItems: Story<GridStoryProps> = (args: GridStoryProps) => {\n return (\n <Grid\n container={{\n cols: '7rem 1fr 3fr',\n rows: 'repeat(3, 3rem) auto',\n justifyItems: args.justifyItems,\n pad: 2\n }}\n as={StyledGridContainer}\n height={20}\n >\n {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(index => (\n <StyledGridItem key={`justifyItems-${index}`}>\n <Text>Item {index}</Text>\n </StyledGridItem>\n ))}\n </Grid>\n );\n};\n\nJustifyGridItems.args = {\n justifyItems: 'stretch'\n};\n\nJustifyGridItems.argTypes = {\n justifyItems: { options: ['stretch', 'start', 'center', 'end'], control: { type: 'select' } }\n};\n\nexport const JustifyGridContent: Story<GridStoryProps> = (args: GridStoryProps) => {\n return (\n <Grid\n container={{\n cols: 'repeat(3, 7rem)',\n rows: 'repeat(4, 3rem)',\n justifyContent: args.justifyContent,\n pad: 2\n }}\n as={StyledGridContainer}\n >\n {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(index => (\n <StyledGridItem key={`justifyContent-${index}`}>\n <Text>Item {index}</Text>\n </StyledGridItem>\n ))}\n </Grid>\n );\n};\n\nJustifyGridContent.args = {\n justifyContent: 'start'\n};\n\nJustifyGridContent.argTypes = {\n justifyContent: {\n options: ['start', 'end', 'center', 'around', 'between', 'evenly'],\n control: { type: 'select' }\n }\n};\n\nexport const AlignGridItems: Story<GridStoryProps> = (args: GridStoryProps) => {\n return (\n <Grid\n container={{\n cols: '7rem 1fr 3fr',\n rows: 'repeat(3, 5rem) auto',\n alignItems: args.alignItems,\n pad: 2\n }}\n as={StyledGridContainer}\n height={20}\n >\n {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(index => (\n <StyledGridItem key={`alignItems-${index}`}>\n <Text>Item {index}</Text>\n </StyledGridItem>\n ))}\n </Grid>\n );\n};\n\nAlignGridItems.args = {\n alignItems: 'stretch'\n};\n\nAlignGridItems.argTypes = {\n alignItems: { options: ['stretch', 'start', 'center', 'end'], control: { type: 'select' } }\n};\n\nexport const AlignGridContent: Story<GridStoryProps> = (args: GridStoryProps) => {\n return (\n <Grid\n container={{\n cols: 'repeat(3, 7rem)',\n rows: 'repeat(4, 3rem)',\n alignContent: args.alignContent,\n pad: 2\n }}\n as={StyledGridContainer}\n height={30}\n fitContent\n >\n {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(index => (\n <StyledGridItem key={`alignContent-${index}`}>\n <Text>Item {index}</Text>\n </StyledGridItem>\n ))}\n </Grid>\n );\n};\n\nAlignGridContent.args = {\n alignContent: 'start'\n};\n\nAlignGridContent.argTypes = {\n alignContent: {\n options: ['start', 'end', 'center', 'around', 'between', 'evenly'],\n control: { type: 'select' }\n }\n};\n\nexport const ResponsiveGrid = () => {\n return (\n <Grid\n container={{ pad: 1, cols: 'repeat(3, 7rem)', rows: 'repeat(4, 3rem)' }}\n xl={{ container: { cols: 'repeat(12, 1fr)', rows: 'repeat(1, 3rem)' } }}\n lg={{ container: { cols: 'repeat(6, 1fr)', rows: 'repeat(2, 3rem)' } }}\n md={{ container: { cols: 'repeat(4, 1fr)', rows: 'repeat(3, 3rem)' } }}\n sm={{ container: { cols: 'repeat(3, 1fr)', rows: 'repeat(4, 3rem)' } }}\n xs={{ container: { cols: 'repeat(2, 1fr)', rows: 'repeat(6, 3rem)' } }}\n as={StyledGridContainer}\n >\n {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(index => (\n <StyledGridItem key={`colRows-${index}`}>\n <Text>Item {index}</Text>\n </StyledGridItem>\n ))}\n </Grid>\n );\n};\n"]}

package/lib/core/Grid/GridItem.stories.js CHANGED Viewed

@@ -13,10 +13,10 @@ export const StartAndEnd = () => {
             cols: '[line0] 7rem [line1] 1fr [col2-end col3-start] 3fr [line3]',
             rows: 'repeat(3, 3rem) auto',
             pad: 2
-        }, as: StyledGridContainer, height: 20, children: [_jsx(Grid, { item: { colStart: 'line0', colEnd: 'col3-start' }, as: StyledGridItem, children: _jsx(Text, { children: "Item 1" }, void 0) }, void 0), _jsx(StyledGridItem, { children: _jsx(Text, { children: "Item 2" }, void 0) }, void 0), _jsx(StyledGridItem, { children: _jsx(Text, { children: "Item 3" }, void 0) }, void 0), _jsx(Grid, { item: { colStart: 'line1', colEnd: 'line3' }, as: StyledGridItem, children: _jsx(Text, { children: "Item 4" }, void 0) }, void 0), _jsx(Grid, { item: { rowStart: '3', rowEnd: '5' }, as: StyledGridItem, children: _jsx(Text, { children: "Item 5" }, void 0) }, void 0), _jsx(Grid, { item: { colStart: '2', colEnd: 'span line3', rowStart: '3', rowEnd: 'span 2' }, as: StyledGridItem, children: _jsx(Text, { children: "Item 6" }, void 0) }, void 0)] }, void 0));
+        }, as: StyledGridContainer, height: 20, children: [_jsx(Grid, { item: { colStart: 'line0', colEnd: 'col3-start' }, as: StyledGridItem, children: _jsx(Text, { children: "Item 1" }) }), _jsx(StyledGridItem, { children: _jsx(Text, { children: "Item 2" }) }), _jsx(StyledGridItem, { children: _jsx(Text, { children: "Item 3" }) }), _jsx(Grid, { item: { colStart: 'line1', colEnd: 'line3' }, as: StyledGridItem, children: _jsx(Text, { children: "Item 4" }) }), _jsx(Grid, { item: { rowStart: '3', rowEnd: '5' }, as: StyledGridItem, children: _jsx(Text, { children: "Item 5" }) }), _jsx(Grid, { item: { colStart: '2', colEnd: 'span line3', rowStart: '3', rowEnd: 'span 2' }, as: StyledGridItem, children: _jsx(Text, { children: "Item 6" }) })] }));
 };
 export const JustifyGridSelf = (args) => {
-    return (_jsxs(Grid, { container: { cols: '7rem 1fr 3fr', pad: 2 }, as: StyledGridContainer, children: [_jsx(StyledGridItem, { children: _jsx(Text, { children: "Item 1" }, void 0) }, void 0), _jsx(Grid, { item: { justifySelf: args.justifySelf }, as: StyledGridItem, editable: true, children: _jsx(Text, { children: "Item 2" }, void 0) }, void 0), _jsx(StyledGridItem, { children: _jsx(Text, { children: "Item 3" }, void 0) }, void 0)] }, void 0));
+    return (_jsxs(Grid, { container: { cols: '7rem 1fr 3fr', pad: 2 }, as: StyledGridContainer, children: [_jsx(StyledGridItem, { children: _jsx(Text, { children: "Item 1" }) }), _jsx(Grid, { item: { justifySelf: args.justifySelf }, as: StyledGridItem, editable: true, children: _jsx(Text, { children: "Item 2" }) }), _jsx(StyledGridItem, { children: _jsx(Text, { children: "Item 3" }) })] }));
 };
 JustifyGridSelf.args = {
     justifySelf: 'stretch'
@@ -25,7 +25,7 @@ JustifyGridSelf.argTypes = {
     justifySelf: { options: ['stretch', 'start', 'center', 'end'], control: { type: 'select' } }
 };
 export const AlignGridSelf = (args) => {
-    return (_jsxs(Grid, { container: { cols: '7rem 1fr 3fr', pad: 2 }, as: StyledGridContainer, height: 10, fitContent: true, children: [_jsx(StyledGridItem, { children: _jsx(Text, { children: "Item 1" }, void 0) }, void 0), _jsx(Grid, { item: { alignSelf: args.alignSelf }, as: StyledGridItem, editable: true, children: _jsx(Text, { children: "Item 2" }, void 0) }, void 0), _jsx(StyledGridItem, { children: _jsx(Text, { children: "Item 3" }, void 0) }, void 0)] }, void 0));
+    return (_jsxs(Grid, { container: { cols: '7rem 1fr 3fr', pad: 2 }, as: StyledGridContainer, height: 10, fitContent: true, children: [_jsx(StyledGridItem, { children: _jsx(Text, { children: "Item 1" }) }), _jsx(Grid, { item: { alignSelf: args.alignSelf }, as: StyledGridItem, editable: true, children: _jsx(Text, { children: "Item 2" }) }), _jsx(StyledGridItem, { children: _jsx(Text, { children: "Item 3" }) })] }));
 };
 AlignGridSelf.args = {
     alignSelf: 'stretch'