npm - @pega/cosmos-react-demos - Versions diffs - 2.1.2 → 3.0.0-dev.2.0 - Mend

@pega/cosmos-react-demos 2.1.2 → 3.0.0-dev.2.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 (580) hide show

package/jsx/core/Flex/Flex.styles.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import styled, { css } from 'styled-components';
 import { calculateFontSize, defaultThemeProp } from '@pega/cosmos-react-core';
-export const StyledContainer = styled.div(({ height, theme, width }) => {
+export const StyledFlexContainer = styled.div(({ height, theme, width }) => {
     return css `
       border: calc(0.5 * ${theme.base.spacing}) solid ${theme.base.colors.black};
       background-color: ${theme.base.colors.blue.light};
@@ -16,26 +16,26 @@ export const StyledContainer = styled.div(({ height, theme, width }) => {
       `}
     `;
 });
-StyledContainer.defaultProps = defaultThemeProp;
-export const StyledItem = styled.div(({ inActive, noPadding, theme, width }) => {
+StyledFlexContainer.defaultProps = defaultThemeProp;
+export const StyledFlexItem = styled.div(({ inActive, noPadding, theme, width }) => {
     const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);
     return css `
-      border: calc(0.5 * ${theme.base.spacing}) solid ${theme.base.colors.black};
-      padding: ${noPadding ? '0' : `calc(4 * ${theme.base.spacing}) `};
-      text-align: center;
-      background-color: ${inActive ? theme.base.colors.white : theme.base.colors.orange.light};
-      color: ${theme.base.colors.black};
+    border: calc(0.5 * ${theme.base.spacing}) solid ${theme.base.colors.black};
+    padding: ${noPadding ? '0' : `calc(4 * ${theme.base.spacing}) `};
+    text-align: center;
+    background-color: ${inActive ? theme.base.colors.white : theme.base.colors.orange.light};
+    color: ${theme.base.colors.black};
-      ${width &&
+    ${width &&
         css `
-        width: ${width}rem;
-      `}
+      width: ${width}rem;
+    `}
-      span {
-        font-size: ${fontSize.xl};
-        font-weight: ${theme.base['font-weight'].bold};
-      }
-    `;
+    span {
+      font-size: ${fontSize.xl};
+      font-weight: ${theme.base['font-weight'].bold};
+    }
+  `;
 });
-StyledItem.defaultProps = defaultThemeProp;
+StyledFlexItem.defaultProps = defaultThemeProp;
 //# sourceMappingURL=Flex.styles.js.map

package/jsx/core/Flex/Flex.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Flex.styles.js","sourceRoot":"","sources":["../../../src/core/Flex/Flex.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAE9E,MAAM,CAAC,MAAM,~~eAAe~~,GAAG,MAAM,CAAC,GAAG,~~CACvC~~,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE;IAC3B,OAAO,GAAG,CAAA;2BACa,KAAK,CAAC,IAAI,CAAC,OAAO,WAAW,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;0BACrD,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK;;QAE9C,MAAM;QACR,GAAG,CAAA;kBACS,MAAM;OACjB;;QAEC,KAAK;QACP,GAAG,CAAA;iBACQ,KAAK;OACf;KACF,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,~~eAAe~~,CAAC,YAAY,GAAG,gBAAgB,CAAC;~~AAEhD~~,MAAM,CAAC,MAAM,~~UAAU~~,GAAG,MAAM,CAAC,GAAG,~~CAClC~~,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE;~~IACxC~~,MAAM,QAAQ,GAAG,iBAAiB,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;IAEtF,OAAO,GAAG,CAAA;~~2BACa~~,KAAK,CAAC,IAAI,CAAC,OAAO,WAAW,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;~~iBAC9D~~,SAAS,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,YAAY,KAAK,CAAC,IAAI,CAAC,OAAO,IAAI;;~~0BAE3C~~,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK;~~eAC9E~~,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;;~~QAE9B~~,KAAK;QACP,GAAG,CAAA;~~iBACQ~~,KAAK;~~OACf~~;;;~~qBAGc~~,QAAQ,CAAC,EAAE;~~uBACT~~,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,IAAI;;~~KAEhD~~,CAAC;AACJ,CAAC,~~CACF~~,CAAC;~~AAEF~~,~~UAAU~~,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { calculateFontSize, defaultThemeProp } from '@pega/cosmos-react-core';\n\nexport const ~~StyledContainer~~ = styled.div<{ height?: number; width?: number }>(\n ({ height, theme, width }) => {\n return css`\n border: calc(0.5 * ${theme.base.spacing}) solid ${theme.base.colors.black};\n background-color: ${theme.base.colors.blue.light};\n\n ${height &&\n css`\n height: ${height}rem;\n `}\n\n ${width &&\n css`\n width: ${width}rem;\n `}\n `;\n }\n);\n\~~nStyledContainer~~.defaultProps = defaultThemeProp;\n\nexport const ~~StyledItem~~ = styled.div<{ inActive?: boolean; noPadding?: boolean; width?: number }>(\n ({ inActive, noPadding, theme, width }) => {\n const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n return css`\n border: calc(0.5 * ${theme.base.spacing}) solid ${theme.base.colors.black};\n padding: ${noPadding ? '0' : `calc(4 * ${theme.base.spacing}) `};\n text-align: center;\n background-color: ${inActive ? theme.base.colors.white : theme.base.colors.orange.light};\n color: ${theme.base.colors.black};\n\n ${width &&\n css`\n width: ${width}rem;\n `}\n\n span {\n font-size: ${fontSize.xl};\n font-weight: ${theme.base['font-weight'].bold};\n }\n `;\n }\n);\n\~~nStyledItem~~.defaultProps = defaultThemeProp;\n"]}
1	+ {"version":3,"file":"Flex.styles.js","sourceRoot":"","sources":["../../../src/core/Flex/Flex.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAE9E,MAAM,CAAC,MAAM,mBAAmB,GAAG,MAAM,CAAC,GAAG,CAC3C,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE;IAC3B,OAAO,GAAG,CAAA;2BACa,KAAK,CAAC,IAAI,CAAC,OAAO,WAAW,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;0BACrD,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK;;QAE9C,MAAM;QACR,GAAG,CAAA;kBACS,MAAM;OACjB;;QAEC,KAAK;QACP,GAAG,CAAA;iBACQ,KAAK;OACf;KACF,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,mBAAmB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEpD,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAIrC,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE;IAC3C,MAAM,QAAQ,GAAG,iBAAiB,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;IAEtF,OAAO,GAAG,CAAA;yBACa,KAAK,CAAC,IAAI,CAAC,OAAO,WAAW,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;eAC9D,SAAS,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,YAAY,KAAK,CAAC,IAAI,CAAC,OAAO,IAAI;;wBAE3C,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK;aAC9E,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;;MAE9B,KAAK;QACP,GAAG,CAAA;eACQ,KAAK;KACf;;;mBAGc,QAAQ,CAAC,EAAE;qBACT,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,IAAI;;GAEhD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,cAAc,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { calculateFontSize, defaultThemeProp } from '@pega/cosmos-react-core';\n\nexport const StyledFlexContainer = styled.div<{ height?: number; width?: number }>(\n ({ height, theme, width }) => {\n return css`\n border: calc(0.5 * ${theme.base.spacing}) solid ${theme.base.colors.black};\n background-color: ${theme.base.colors.blue.light};\n\n ${height &&\n css`\n height: ${height}rem;\n `}\n\n ${width &&\n css`\n width: ${width}rem;\n `}\n `;\n }\n);\n\nStyledFlexContainer.defaultProps = defaultThemeProp;\n\nexport const StyledFlexItem = styled.div<{\n inActive?: boolean;\n noPadding?: boolean;\n width?: number;\n}>(({ inActive, noPadding, theme, width }) => {\n const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n return css`\n border: calc(0.5 * ${theme.base.spacing}) solid ${theme.base.colors.black};\n padding: ${noPadding ? '0' : `calc(4 * ${theme.base.spacing}) `};\n text-align: center;\n background-color: ${inActive ? theme.base.colors.white : theme.base.colors.orange.light};\n color: ${theme.base.colors.black};\n\n ${width &&\n css`\n width: ${width}rem;\n `}\n\n span {\n font-size: ${fontSize.xl};\n font-weight: ${theme.base['font-weight'].bold};\n }\n `;\n});\n\nStyledFlexItem.defaultProps = defaultThemeProp;\n"]}

package/jsx/core/Flex/FlexContainer.stories.d.ts CHANGED Viewed

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { Meta, Story } from '@storybook/react';
 import { FlexContainerProps } from '@pega/cosmos-react-core';
 declare const _default: Meta<import("@storybook/react").Args>;
@@ -17,4 +18,5 @@ export declare const Wrap: Story<FlexStoryProps>;
 export declare const Justify: Story<FlexStoryProps>;
 export declare const AlignItems: Story<FlexStoryProps>;
 export declare const AlignContent: Story<FlexStoryProps>;
+export declare const ResponsiveFlex: () => JSX.Element;
 //# sourceMappingURL=FlexContainer.stories.d.ts.map

package/jsx/core/Flex/FlexContainer.stories.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FlexContainer.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Flex/FlexContainer.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAAQ,kBAAkB,EAAQ,MAAM,yBAAyB,CAAC;;AAIzE,wBAMU;AAEV,UAAU,cAAc;IACtB,SAAS,CAAC,EAAE,kBAAkB,CAAC,WAAW,CAAC,CAAC;IAC5C,GAAG,CAAC,EAAE,kBAAkB,CAAC,KAAK,CAAC,CAAC;IAChC,GAAG,CAAC,EAAE,kBAAkB,CAAC,KAAK,CAAC,CAAC;IAChC,IAAI,CAAC,EAAE,kBAAkB,CAAC,MAAM,CAAC,CAAC;IAClC,OAAO,CAAC,EAAE,kBAAkB,CAAC,SAAS,CAAC,CAAC;IACxC,UAAU,CAAC,EAAE,kBAAkB,CAAC,YAAY,CAAC,CAAC;IAC9C,YAAY,CAAC,EAAE,kBAAkB,CAAC,cAAc,CAAC,CAAC;CACnD;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,cAAc,CAc3C,CAAC;AAaF,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,cAAc,CAc/C,CAAC;AAYF,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,cAAc,CAoBtC,CAAC;AAUF,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,cAAc,CAczC,CAAC;AAaF,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,cAAc,CAoB5C,CAAC;AAaF,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,cAAc,CAyB9C,CAAC"}
1	+ {"version":3,"file":"FlexContainer.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Flex/FlexContainer.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAAQ,kBAAkB,EAAQ,MAAM,yBAAyB,CAAC;;AAIzE,wBAMU;AAEV,UAAU,cAAc;IACtB,SAAS,CAAC,EAAE,kBAAkB,CAAC,WAAW,CAAC,CAAC;IAC5C,GAAG,CAAC,EAAE,kBAAkB,CAAC,KAAK,CAAC,CAAC;IAChC,GAAG,CAAC,EAAE,kBAAkB,CAAC,KAAK,CAAC,CAAC;IAChC,IAAI,CAAC,EAAE,kBAAkB,CAAC,MAAM,CAAC,CAAC;IAClC,OAAO,CAAC,EAAE,kBAAkB,CAAC,SAAS,CAAC,CAAC;IACxC,UAAU,CAAC,EAAE,kBAAkB,CAAC,YAAY,CAAC,CAAC;IAC9C,YAAY,CAAC,EAAE,kBAAkB,CAAC,cAAc,CAAC,CAAC;CACnD;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,cAAc,CAc3C,CAAC;AAaF,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,cAAc,CAc/C,CAAC;AAYF,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,cAAc,CAoBtC,CAAC;AAUF,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,cAAc,CAczC,CAAC;AAaF,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,cAAc,CAoB5C,CAAC;AAaF,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,cAAc,CAyB9C,CAAC;AAaF,eAAO,MAAM,cAAc,mBAsB1B,CAAC"}

package/jsx/core/Flex/FlexContainer.stories.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import { Flex, Text } from '@pega/cosmos-react-core';
-import { StyledContainer, StyledItem } from './Flex.styles';
+import { StyledFlexContainer, StyledFlexItem } from './Flex.styles';
 export default {
     title: 'Core/Flex/Container',
     component: Flex,
@@ -8,14 +8,14 @@ export default {
     }
 };
 export const Direction = (args) => {
-    return (<Flex container={{ direction: args.direction, pad: 2 }} as={StyledContainer}>
-      <Flex item={{ grow: 1 }} as={StyledItem}>
+    return (<Flex container={{ direction: args.direction, pad: 2 }} as={StyledFlexContainer}>
+      <Flex item={{ grow: 1 }} as={StyledFlexItem}>
         <Text>Item 1</Text>
       </Flex>
-      <Flex item={{ grow: 1 }} as={StyledItem}>
+      <Flex item={{ grow: 1 }} as={StyledFlexItem}>
         <Text>Item 2</Text>
       </Flex>
-      <Flex item={{ grow: 1 }} as={StyledItem}>
+      <Flex item={{ grow: 1 }} as={StyledFlexItem}>
         <Text>Item 3</Text>
       </Flex>
     </Flex>);
@@ -30,14 +30,14 @@ Direction.argTypes = {
     }
 };
 export const GapAndPadding = (args) => {
-    return (<Flex container={{ pad: args.pad, gap: args.gap }} as={StyledContainer}>
-      <Flex item={{ grow: 1 }} as={StyledItem}>
+    return (<Flex container={{ pad: args.pad, gap: args.gap }} as={StyledFlexContainer}>
+      <Flex item={{ grow: 1 }} as={StyledFlexItem}>
         <Text>Item 1</Text>
       </Flex>
-      <Flex item={{ grow: 1 }} as={StyledItem}>
+      <Flex item={{ grow: 1 }} as={StyledFlexItem}>
         <Text>Item 2</Text>
       </Flex>
-      <Flex item={{ grow: 1 }} as={StyledItem}>
+      <Flex item={{ grow: 1 }} as={StyledFlexItem}>
         <Text>Item 3</Text>
       </Flex>
     </Flex>);
@@ -51,20 +51,20 @@ GapAndPadding.argTypes = {
     gap: { control: { type: 'number' } }
 };
 export const Wrap = (args) => {
-    return (<Flex container={{ wrap: args.wrap, pad: 2 }} as={StyledContainer} width={35}>
-      <Flex item={{ grow: 1 }} as={StyledItem}>
+    return (<Flex container={{ wrap: args.wrap, pad: 2 }} as={StyledFlexContainer} width={35}>
+      <Flex item={{ grow: 1 }} as={StyledFlexItem}>
         <Text>Item 1</Text>
       </Flex>
-      <Flex item={{ grow: 1 }} as={StyledItem}>
+      <Flex item={{ grow: 1 }} as={StyledFlexItem}>
         <Text>Item 2</Text>
       </Flex>
-      <Flex item={{ grow: 1 }} as={StyledItem}>
+      <Flex item={{ grow: 1 }} as={StyledFlexItem}>
         <Text>Item 3</Text>
       </Flex>
-      <Flex item={{ grow: 1 }} as={StyledItem}>
+      <Flex item={{ grow: 1 }} as={StyledFlexItem}>
         <Text>Item 4</Text>
       </Flex>
-      <Flex item={{ grow: 1 }} as={StyledItem}>
+      <Flex item={{ grow: 1 }} as={StyledFlexItem}>
         <Text>Item 5</Text>
       </Flex>
     </Flex>);
@@ -76,16 +76,16 @@ Wrap.argTypes = {
     wrap: { options: ['nowrap', 'wrap', 'wrap-reverse'], control: { type: 'select' } }
 };
 export const Justify = (args) => {
-    return (<Flex container={{ justify: args.justify, pad: 2 }} as={StyledContainer}>
-      <StyledItem>
+    return (<Flex container={{ justify: args.justify, pad: 2 }} as={StyledFlexContainer}>
+      <StyledFlexItem>
         <Text>Item 1</Text>
-      </StyledItem>
-      <StyledItem>
+      </StyledFlexItem>
+      <StyledFlexItem>
         <Text>Item 2</Text>
-      </StyledItem>
-      <StyledItem>
+      </StyledFlexItem>
+      <StyledFlexItem>
         <Text>Item 3</Text>
-      </StyledItem>
+      </StyledFlexItem>
     </Flex>);
 };
 Justify.args = {
@@ -98,14 +98,14 @@ Justify.argTypes = {
     }
 };
 export const AlignItems = (args) => {
-    return (<Flex container={{ alignItems: args.alignItems, pad: 2 }} as={StyledContainer} height={15} width={30}>
-      <Flex item={{ grow: 1 }} as={StyledItem}>
+    return (<Flex container={{ alignItems: args.alignItems, pad: 2 }} as={StyledFlexContainer} height={15} width={30}>
+      <Flex item={{ grow: 1 }} as={StyledFlexItem}>
         <Text>Item 1</Text>
       </Flex>
-      <Flex item={{ grow: 1 }} as={StyledItem} noPadding>
+      <Flex item={{ grow: 1 }} as={StyledFlexItem} noPadding>
         <Text>Item 2</Text>
       </Flex>
-      <Flex container={{ direction: 'column' }} item={{ grow: 1 }} as={StyledItem}>
+      <Flex container={{ direction: 'column' }} item={{ grow: 1 }} as={StyledFlexItem}>
         <Text>Item 3 - First line</Text>
         <Text>Item 3 - Second line</Text>
       </Flex>
@@ -121,20 +121,20 @@ AlignItems.argTypes = {
     }
 };
 export const AlignContent = (args) => {
-    return (<Flex container={{ alignContent: args.alignContent, wrap: 'wrap', pad: 2 }} as={StyledContainer} height={20} width={30}>
-      <Flex item={{ grow: 1 }} as={StyledItem}>
+    return (<Flex container={{ alignContent: args.alignContent, wrap: 'wrap', pad: 2 }} as={StyledFlexContainer} height={20} width={30}>
+      <Flex item={{ grow: 1 }} as={StyledFlexItem}>
         <Text>Item 1</Text>
       </Flex>
-      <Flex item={{ grow: 1 }} as={StyledItem}>
+      <Flex item={{ grow: 1 }} as={StyledFlexItem}>
         <Text>Item 2</Text>
       </Flex>
-      <Flex item={{ grow: 1 }} as={StyledItem}>
+      <Flex item={{ grow: 1 }} as={StyledFlexItem}>
         <Text>Item 3</Text>
       </Flex>
-      <Flex item={{ grow: 1 }} as={StyledItem}>
+      <Flex item={{ grow: 1 }} as={StyledFlexItem}>
         <Text>Item 4</Text>
       </Flex>
-      <Flex item={{ grow: 1 }} as={StyledItem}>
+      <Flex item={{ grow: 1 }} as={StyledFlexItem}>
         <Text>Item 5</Text>
       </Flex>
     </Flex>);
@@ -148,4 +148,17 @@ AlignContent.argTypes = {
         control: { type: 'select' }
     }
 };
+export const ResponsiveFlex = () => {
+    return (<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}>
+      <Flex item={{ grow: 1 }} as={StyledFlexItem}>
+        <Text>Item 1</Text>
+      </Flex>
+      <Flex item={{ grow: 1 }} as={StyledFlexItem}>
+        <Text>Item 2</Text>
+      </Flex>
+      <Flex item={{ grow: 1 }} as={StyledFlexItem}>
+        <Text>Item 3</Text>
+      </Flex>
+    </Flex>);
+};
 //# sourceMappingURL=FlexContainer.stories.jsx.map

package/jsx/core/Flex/FlexContainer.stories.jsx.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FlexContainer.stories.jsx","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 { StyledContainer, StyledItem } 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={StyledContainer}>\n <Flex item={{ grow: 1 }} as={StyledItem}>\n <Text>Item 1</Text>\n </Flex>\n <Flex item={{ grow: 1 }} as={StyledItem}>\n <Text>Item 2</Text>\n </Flex>\n <Flex item={{ grow: 1 }} as={StyledItem}>\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={StyledContainer}>\n <Flex item={{ grow: 1 }} as={StyledItem}>\n <Text>Item 1</Text>\n </Flex>\n <Flex item={{ grow: 1 }} as={StyledItem}>\n <Text>Item 2</Text>\n </Flex>\n <Flex item={{ grow: 1 }} as={StyledItem}>\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={StyledContainer} width={35}>\n <Flex item={{ grow: 1 }} as={StyledItem}>\n <Text>Item 1</Text>\n </Flex>\n <Flex item={{ grow: 1 }} as={StyledItem}>\n <Text>Item 2</Text>\n </Flex>\n <Flex item={{ grow: 1 }} as={StyledItem}>\n <Text>Item 3</Text>\n </Flex>\n <Flex item={{ grow: 1 }} as={StyledItem}>\n <Text>Item 4</Text>\n </Flex>\n <Flex item={{ grow: 1 }} as={StyledItem}>\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={StyledContainer}>\n <StyledItem>\n <Text>Item 1</Text>\n </StyledItem>\n <StyledItem>\n <Text>Item 2</Text>\n </StyledItem>\n <StyledItem>\n <Text>Item 3</Text>\n </StyledItem>\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={StyledContainer}\n height={15}\n width={30}\n >\n <Flex item={{ grow: 1 }} as={StyledItem}>\n <Text>Item 1</Text>\n </Flex>\n <Flex item={{ grow: 1 }} as={StyledItem} noPadding>\n <Text>Item 2</Text>\n </Flex>\n <Flex container={{ direction: 'column' }} item={{ grow: 1 }} as={StyledItem}>\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={StyledContainer}\n height={20}\n width={30}\n >\n <Flex item={{ grow: 1 }} as={StyledItem}>\n <Text>Item 1</Text>\n </Flex>\n <Flex item={{ grow: 1 }} as={StyledItem}>\n <Text>Item 2</Text>\n </Flex>\n <Flex item={{ grow: 1 }} as={StyledItem}>\n <Text>Item 3</Text>\n </Flex>\n <Flex item={{ grow: 1 }} as={StyledItem}>\n <Text>Item 4</Text>\n </Flex>\n <Flex item={{ grow: 1 }} as={StyledItem}>\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"]}
1	+ {"version":3,"file":"FlexContainer.stories.jsx","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/jsx/core/Flex/FlexItem.stories.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import { Flex, Text } from '@pega/cosmos-react-core';
-import { StyledContainer, StyledItem } from './Flex.styles';
+import { StyledFlexContainer, StyledFlexItem } from './Flex.styles';
 export default {
     title: 'Core/Flex/Item',
     component: Flex,
@@ -8,14 +8,14 @@ export default {
     }
 };
 export const AlignSelf = (args) => {
-    return (<Flex container={{ alignItems: 'start', pad: 2 }} as={StyledContainer} height={10}>
-      <Flex item={{ grow: 1 }} as={StyledItem} inActive>
+    return (<Flex container={{ alignItems: 'start', pad: 2 }} as={StyledFlexContainer} height={10}>
+      <Flex item={{ grow: 1 }} as={StyledFlexItem} inActive>
         <Text>Item 1</Text>
       </Flex>
-      <Flex item={{ grow: 1, alignSelf: args.alignSelf }} as={StyledItem} noPadding>
+      <Flex item={{ grow: 1, alignSelf: args.alignSelf }} as={StyledFlexItem} noPadding>
         <Text>Item 2</Text>
       </Flex>
-      <Flex container={{ direction: 'column' }} item={{ grow: 1 }} as={StyledItem} inActive>
+      <Flex container={{ direction: 'column' }} item={{ grow: 1 }} as={StyledFlexItem} inActive>
         <Text>Item 3 - First line</Text>
         <Text>Item 3 - Second line</Text>
       </Flex>
@@ -31,14 +31,14 @@ AlignSelf.argTypes = {
     }
 };
 export const Grow = (args) => {
-    return (<Flex container={{ pad: 2 }} as={StyledContainer}>
-      <Flex item={{ grow: 1 }} as={StyledItem} inActive>
+    return (<Flex container={{ pad: 2 }} as={StyledFlexContainer}>
+      <Flex item={{ grow: 1 }} as={StyledFlexItem} inActive>
         <Text>Grow: 1</Text>
       </Flex>
-      <Flex item={{ grow: args.grow }} as={StyledItem}>
+      <Flex item={{ grow: args.grow }} as={StyledFlexItem}>
         <Text>Grow: {args.grow}</Text>
       </Flex>
-      <Flex item={{ grow: 0 }} as={StyledItem} inActive>
+      <Flex item={{ grow: 0 }} as={StyledFlexItem} inActive>
         <Text>Grow: 0</Text>
       </Flex>
     </Flex>);
@@ -50,14 +50,14 @@ Grow.argTypes = {
     grow: { control: { type: 'number' } }
 };
 export const Shrink = (args) => {
-    return (<Flex container={{ pad: 2 }} as={StyledContainer} width={42}>
-      <Flex item={{ shrink: 1 }} as={StyledItem} width={15} inActive>
+    return (<Flex container={{ pad: 2 }} as={StyledFlexContainer} width={42}>
+      <Flex item={{ shrink: 1 }} as={StyledFlexItem} width={15} inActive>
         <Text>Shrink: 1</Text>
       </Flex>
-      <Flex item={{ shrink: args.shrink }} as={StyledItem} width={15}>
+      <Flex item={{ shrink: args.shrink }} as={StyledFlexItem} width={15}>
         <Text>Shrink: {args.shrink}</Text>
       </Flex>
-      <Flex item={{ shrink: 0 }} as={StyledItem} width={15} inActive>
+      <Flex item={{ shrink: 0 }} as={StyledFlexItem} width={15} inActive>
         <Text>Shrink: 0</Text>
       </Flex>
     </Flex>);

package/jsx/core/Flex/FlexItem.stories.jsx.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FlexItem.stories.jsx","sourceRoot":"","sources":["../../../src/core/Flex/FlexItem.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,IAAI,EAAiB,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAEpE,OAAO,EAAE,~~eAAe~~,EAAE,~~UAAU~~,EAAE,MAAM,eAAe,CAAC;~~AAE5D~~,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,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,UAAU,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,~~eAAe~~,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,~~CAChF~~;MAAA,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,~~UAAU~~,CAAC,CAAC,QAAQ,~~CAC/C~~;QAAA,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CACpB;MAAA,EAAE,IAAI,CACN;MAAA,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,~~UAAU~~,CAAC,CAAC,SAAS,~~CAC3E~~;QAAA,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CACpB;MAAA,EAAE,IAAI,CACN;MAAA,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,~~UAAU~~,CAAC,CAAC,QAAQ,~~CACnF~~;QAAA,CAAC,IAAI,CAAC,mBAAmB,EAAE,IAAI,CAC/B;QAAA,CAAC,IAAI,CAAC,oBAAoB,EAAE,IAAI,CAClC;MAAA,EAAE,IAAI,CACR;IAAA,EAAE,IAAI,CAAC,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,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,~~eAAe~~,CAAC,~~CAC/C~~;MAAA,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,~~UAAU~~,CAAC,CAAC,QAAQ,~~CAC/C~~;QAAA,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CACrB;MAAA,EAAE,IAAI,CACN;MAAA,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,~~UAAU~~,CAAC,~~CAC9C~~;QAAA,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,IAAI,CAC/B;MAAA,EAAE,IAAI,CACN;MAAA,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,~~UAAU~~,CAAC,CAAC,QAAQ,~~CAC/C~~;QAAA,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CACrB;MAAA,EAAE,IAAI,CACR;IAAA,EAAE,IAAI,CAAC,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,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,~~eAAe~~,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,~~CAC1D~~;MAAA,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,~~UAAU~~,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,QAAQ,~~CAC5D~~;QAAA,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,CACvB;MAAA,EAAE,IAAI,CACN;MAAA,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,~~UAAU~~,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,~~CAC7D~~;QAAA,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,IAAI,CACnC;MAAA,EAAE,IAAI,CACN;MAAA,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,~~UAAU~~,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,QAAQ,~~CAC5D~~;QAAA,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,CACvB;MAAA,EAAE,IAAI,CACR;IAAA,EAAE,IAAI,CAAC,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 { ~~StyledContainer~~, ~~StyledItem~~ } 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={~~StyledContainer~~} height={10}>\n <Flex item={{ grow: 1 }} as={~~StyledItem~~} inActive>\n <Text>Item 1</Text>\n </Flex>\n <Flex item={{ grow: 1, alignSelf: args.alignSelf }} as={~~StyledItem~~} noPadding>\n <Text>Item 2</Text>\n </Flex>\n <Flex container={{ direction: 'column' }} item={{ grow: 1 }} as={~~StyledItem~~} 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={~~StyledContainer~~}>\n <Flex item={{ grow: 1 }} as={~~StyledItem~~} inActive>\n <Text>Grow: 1</Text>\n </Flex>\n <Flex item={{ grow: args.grow }} as={~~StyledItem~~}>\n <Text>Grow: {args.grow}</Text>\n </Flex>\n <Flex item={{ grow: 0 }} as={~~StyledItem~~} 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={~~StyledContainer~~} width={42}>\n <Flex item={{ shrink: 1 }} as={~~StyledItem~~} width={15} inActive>\n <Text>Shrink: 1</Text>\n </Flex>\n <Flex item={{ shrink: args.shrink }} as={~~StyledItem~~} width={15}>\n <Text>Shrink: {args.shrink}</Text>\n </Flex>\n <Flex item={{ shrink: 0 }} as={~~StyledItem~~} 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.jsx","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/jsx/core/Form/Form.mocks.d.ts ADDED Viewed

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export declare const FormContent: ({ cols, heading, description, showActions }: {
+    cols: number;
+    showActions: boolean;
+    heading?: string | undefined;
+    description?: string | undefined;
+}) => JSX.Element | null;
+//# sourceMappingURL=Form.mocks.d.ts.map

package/jsx/core/Form/Form.mocks.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"Form.mocks.d.ts","sourceRoot":"","sources":["../../../src/core/Form/Form.mocks.tsx"],"names":[],"mappings":";AA+FA,eAAO,MAAM,WAAW;UAMhB,MAAM;iBACC,OAAO;;;wBA8IrB,CAAC"}

package/jsx/core/Form/Form.mocks.jsx ADDED Viewed

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

package/jsx/core/Form/Form.mocks.jsx.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"Form.mocks.jsx","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';\nimport { FileInputDemo } from '@pega/cosmos-react-demos/lib/core/File/FileInput.stories';\nimport { FilterableSingleSelect as ComboboxFilterableStory } from '@pega/cosmos-react-demos/lib/core/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/jsx/core/Form/Form.stories.d.ts CHANGED Viewed

@@ -1,13 +1,6 @@
-/// <reference types="react" />
 import { Meta, Story } from '@storybook/react';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
-export declare const FormContent: ({ cols, heading, description, showActions }: {
-    cols: number;
-    showActions: boolean;
-    heading?: string | undefined;
-    description?: string | undefined;
-}) => JSX.Element | null;
 interface FormStoryProps {
     heading?: string;
     description?: string;
@@ -18,4 +11,14 @@ export declare const ThreeColumnForm: Story<FormStoryProps>;
 export declare const SimpleFormDemo: Story<FormStoryProps & {
     withBanners?: boolean;
 }>;
+interface ConfigurableFormProps extends FormStoryProps {
+    foregroundColor?: string;
+    backgroundColor?: string;
+    borderColor?: string;
+    borderWidth?: string;
+    borderRadius?: number;
+    hoverBorderColor?: string;
+    focusBorderColor?: string;
+}
+export declare const ConfigurableForm: Story<ConfigurableFormProps>;
 //# sourceMappingURL=Form.stories.d.ts.map