npm - @pega/cosmos-react-demos - Versions diffs - 5.0.0-dev.4.9 → 5.0.0-dev.5.0 - Mend

@pega/cosmos-react-demos 5.0.0-dev.4.9 → 5.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 (1753) hide show

package/lib/core/File/FileInput.stories.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"FileInput.stories.js","sourceRoot":"","sources":["../../../src/core/File/FileInput.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport { useState, useMemo, useCallback, useRef, useContext } from 'react';\n\nimport { FileInput, createUID, useAfterInitialEffect, Flex, Link } from '@pega/cosmos-react-core';\nimport type { FileInputProps } from '@pega/cosmos-react-core';\n\nimport { FileServiceContext } from '../../work/CaseView/FileService.mock';\n\nexport default {\n title: 'Core/File/Input',\n component: FileInput\n} as Meta;\n\ninterface FileInputStoryProps extends FileInputProps {\n sizeLimit?: number;\n showAdditionalInfo?: boolean;\n}\n\nexport const FileInputDemo: StoryFn<FileInputStoryProps> = (args: FileInputStoryProps) => {\n const { files, attachFile, cancelFile, deleteFile } = useContext(FileServiceContext);\n const errCounts = useRef({ invalidType: 0, invalidSize: 0 });\n const [hasError, setHasError] = useState(false);\n\n const sizeLimit = args.sizeLimit || 100;\n\n // Fires anytime files are added to the input either through selection or drop\n const onFilesAdded = useCallback(\n (addedFiles: File[]) => {\n errCounts.current = { invalidType: 0, invalidSize: 0 };\n\n const newFiles = addedFiles.filter(f => {\n let isValidSize = true;\n\n if (f.size / 1000000 > sizeLimit) {\n errCounts.current.invalidSize += 1;\n isValidSize = false;\n }\n\n return isValidSize;\n });\n\n setHasError(newFiles.length < addedFiles.length);\n\n newFiles.forEach((File: File) => {\n const id = createUID();\n attachFile({\n id,\n thumbnail: File.type.startsWith('image') ? URL.createObjectURL(File) : undefined,\n name: File.name,\n category: '',\n File,\n onCancel: () => {\n cancelFile(id);\n }\n });\n });\n },\n [attachFile, deleteFile]\n );\n\n useAfterInitialEffect(() => {\n if (files.length === 0) setHasError(false);\n }, [files.length]);\n\n const info = useMemo(() => {\n return hasError\n ? errCounts.current.invalidSize > 0 && (\n <div>{`File size must be less than ${sizeLimit}MB`}</div>\n )\n : null;\n }, [hasError]);\n\n return (\n <FileInput\n label={args.label}\n labelHidden={args.labelHidden}\n multiple={args.multiple}\n status={hasError ? 'error' : undefined}\n info={info}\n required={args.required}\n disabled={args.disabled}\n onFilesAdded={onFilesAdded}\n files={files.map(file => {\n return {\n ...file,\n onCancel: undefined,\n onPreview: () => {},\n onDownload: () => {},\n onDelete: () => {\n deleteFile(file.id);\n }\n };\n\n return file;\n })}\n additionalInfo={\n args.showAdditionalInfo\n ? {\n heading: 'Additional Info',\n content: (\n <Flex container={{ direction: 'column', alignItems: 'start', gap: 2 }}>\n <p>\n Lorem ipsum dolor sit amet, consectetur it, sed do tempor incididunt ut labore\n magna aliqua. Nibh praesent tristique magna sit amet. Nec tincidunt praesent\n semper feugiat nibh sed pulvinar proin gravida.\n </p>\n <p>\n Pharetra pharetra massa massa ultricies mi quis hendrerit dolor. Est velit\n egestas dui id ornare arcu odio ut. Varius sit amet mattis vulputate enim nulla\n aliquet porttitor lacus.\n </p>\n <Link href='/' target='_blank'>\n Neque vitae\n </Link>\n </Flex>\n )\n }\n : undefined\n }\n />\n );\n};\n\nFileInputDemo.args = {\n multiple: true,\n sizeLimit: 100,\n label: 'File input label',\n labelHidden: false,\n required: false,\n disabled: false,\n showAdditionalInfo: false\n};\n\nFileInputDemo.argTypes = {\n multiple: { control: { type: 'boolean' } },\n sizeLimit: { control: { type: 'number' } },\n label: { control: { type: 'text' } },\n labelHidden: { control: { type: 'boolean' } },\n required: { control: { type: 'boolean' } },\n disabled: { control: { type: 'boolean' } },\n showAdditionalInfo: { control: { type: 'boolean' } }\n};\n"]}

package/lib/core/Flex/Flex.styles.d.ts ADDED Viewed

@@ -0,0 +1,10 @@
+export declare const StyledFlexContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    height?: number | undefined;
+    width?: number | undefined;
+}, never>;
+export declare const StyledFlexItem: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    inActive?: boolean | undefined;
+    noPadding?: boolean | undefined;
+    width?: number | undefined;
+}, never>;
+//# sourceMappingURL=Flex.styles.d.ts.map

package/lib/core/Flex/Flex.styles.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"Flex.styles.d.ts","sourceRoot":"","sources":["../../../src/core/Flex/Flex.styles.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,mBAAmB;;;SAiB/B,CAAC;AAIF,eAAO,MAAM,cAAc;;;;SAwBzB,CAAC"}

package/lib/core/Flex/Flex.styles.js ADDED Viewed

@@ -0,0 +1,41 @@
+import styled, { css } from 'styled-components';
+import { calculateFontSize, defaultThemeProp } from '@pega/cosmos-react-core';
+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};
+      ${height &&
+        css `
+        height: ${height}rem;
+      `}
+      ${width &&
+        css `
+        width: ${width}rem;
+      `}
+    `;
+});
+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};
+    ${width &&
+        css `
+      width: ${width}rem;
+    `}
+    span {
+      font-size: ${fontSize.xl};
+      font-weight: ${theme.base['font-weight'].bold};
+    }
+  `;
+});
+StyledFlexItem.defaultProps = defaultThemeProp;
+//# sourceMappingURL=Flex.styles.js.map

package/lib/core/Flex/Flex.styles.js.map ADDED Viewed

@@ -0,0 +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/lib/core/Flex/FlexContainer.stories.d.ts ADDED Viewed

@@ -0,0 +1,21 @@
+import type { StoryFn } from '@storybook/react';
+import type { FlexContainerProps } from '@pega/cosmos-react-core';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
+export default _default;
+interface FlexStoryProps {
+    direction?: FlexContainerProps['direction'];
+    gap?: FlexContainerProps['gap'];
+    pad?: FlexContainerProps['pad'];
+    wrap?: FlexContainerProps['wrap'];
+    justify?: FlexContainerProps['justify'];
+    alignItems?: FlexContainerProps['alignItems'];
+    alignContent?: FlexContainerProps['alignContent'];
+}
+export declare const Direction: StoryFn<FlexStoryProps>;
+export declare const GapAndPadding: StoryFn<FlexStoryProps>;
+export declare const Wrap: StoryFn<FlexStoryProps>;
+export declare const Justify: StoryFn<FlexStoryProps>;
+export declare const AlignItems: StoryFn<FlexStoryProps>;
+export declare const AlignContent: StoryFn<FlexStoryProps>;
+export declare const ResponsiveFlex: StoryFn;
+//# sourceMappingURL=FlexContainer.stories.d.ts.map

package/lib/core/Flex/FlexContainer.stories.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"FlexContainer.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Flex/FlexContainer.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAGtD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;;AAIlE,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,OAAO,CAAC,cAAc,CAc7C,CAAC;AAaF,eAAO,MAAM,aAAa,EAAE,OAAO,CAAC,cAAc,CAcjD,CAAC;AAYF,eAAO,MAAM,IAAI,EAAE,OAAO,CAAC,cAAc,CAoBxC,CAAC;AAUF,eAAO,MAAM,OAAO,EAAE,OAAO,CAAC,cAAc,CAc3C,CAAC;AAaF,eAAO,MAAM,UAAU,EAAE,OAAO,CAAC,cAAc,CAoB9C,CAAC;AAaF,eAAO,MAAM,YAAY,EAAE,OAAO,CAAC,cAAc,CAyBhD,CAAC;AAaF,eAAO,MAAM,cAAc,EAAE,OAsB5B,CAAC"}

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

@@ -0,0 +1,82 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Flex, Text } from '@pega/cosmos-react-core';
+import { StyledFlexContainer, StyledFlexItem } from './Flex.styles';
+export default {
+    title: 'Core/Flex/Container',
+    component: Flex,
+    parameters: {
+        layout: 'fullscreen'
+    }
+};
+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" }) }), _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'
+};
+Direction.argTypes = {
+    direction: {
+        options: ['row', 'column', 'row-reverse', 'column-reverse'],
+        control: { type: 'select' }
+    }
+};
+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" }) }), _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,
+    gap: 1
+};
+GapAndPadding.argTypes = {
+    pad: { control: { type: 'number' } },
+    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" }) }), _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'
+};
+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" }) }), _jsx(StyledFlexItem, { children: _jsx(Text, { children: "Item 2" }) }), _jsx(StyledFlexItem, { children: _jsx(Text, { children: "Item 3" }) })] }));
+};
+Justify.args = {
+    justify: 'start'
+};
+Justify.argTypes = {
+    justify: {
+        options: ['start', 'end', 'center', 'between', 'around', 'evenly'],
+        control: { type: 'select' }
+    }
+};
+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" }) }), _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'
+};
+AlignItems.argTypes = {
+    alignItems: {
+        options: ['stretch', 'start', 'end', 'center', 'baseline'],
+        control: { type: 'select' }
+    }
+};
+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" }) }), _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'
+};
+AlignContent.argTypes = {
+    alignContent: {
+        options: ['stretch', 'start', 'end', 'center', 'between', 'around'],
+        control: { type: 'select' }
+    }
+};
+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" }) }), _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 ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"FlexContainer.stories.js","sourceRoot":"","sources":["../../../src/core/Flex/FlexContainer.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\n\nimport { Flex, Text } from '@pega/cosmos-react-core';\nimport type { FlexContainerProps } 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: StoryFn<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: StoryFn<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: StoryFn<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: StoryFn<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: StoryFn<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: StoryFn<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: StoryFn = () => {\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.d.ts ADDED Viewed

@@ -0,0 +1,13 @@
+import type { StoryFn } from '@storybook/react';
+import type { FlexItemProps } from '@pega/cosmos-react-core';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
+export default _default;
+interface FlexStoryProps {
+    alignSelf?: FlexItemProps['alignSelf'];
+    grow?: FlexItemProps['grow'];
+    shrink?: FlexItemProps['shrink'];
+}
+export declare const AlignSelf: StoryFn<FlexStoryProps>;
+export declare const Grow: StoryFn<FlexStoryProps>;
+export declare const Shrink: StoryFn<FlexStoryProps>;
+//# sourceMappingURL=FlexItem.stories.d.ts.map

package/lib/core/Flex/FlexItem.stories.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"FlexItem.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Flex/FlexItem.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAGtD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;;AAI7D,wBAMU;AAEV,UAAU,cAAc;IACtB,SAAS,CAAC,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC;IACvC,IAAI,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;IAC7B,MAAM,CAAC,EAAE,aAAa,CAAC,QAAQ,CAAC,CAAC;CAClC;AAED,eAAO,MAAM,SAAS,EAAE,OAAO,CAAC,cAAc,CAe7C,CAAC;AAaF,eAAO,MAAM,IAAI,EAAE,OAAO,CAAC,cAAc,CAcxC,CAAC;AAUF,eAAO,MAAM,MAAM,EAAE,OAAO,CAAC,cAAc,CAc1C,CAAC"}

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

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Flex, Text } from '@pega/cosmos-react-core';
+import { StyledFlexContainer, StyledFlexItem } from './Flex.styles';
+export default {
+    title: 'Core/Flex/Item',
+    component: Flex,
+    parameters: {
+        layout: 'fullscreen'
+    }
+};
+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" }) }), _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'
+};
+AlignSelf.argTypes = {
+    alignSelf: {
+        options: ['auto', 'start', 'end', 'baseline', 'center', 'stretch'],
+        control: { type: 'select' }
+    }
+};
+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" }) }), _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
+};
+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" }) }), _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
+};
+Shrink.argTypes = {
+    shrink: { control: { type: 'number' } }
+};
+//# sourceMappingURL=FlexItem.stories.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"file":"FlexItem.stories.js","sourceRoot":"","sources":["../../../src/core/Flex/FlexItem.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\n\nimport { Flex, Text } from '@pega/cosmos-react-core';\nimport type { FlexItemProps } 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: StoryFn<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: StoryFn<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: StoryFn<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.d.ts ADDED Viewed

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

package/lib/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":";AAkGA,eAAO,MAAM,WAAW;UAMhB,MAAM;iBACC,OAAO;;;wBAiMrB,CAAC;AAEF,eAAO,MAAM,mBAAmB;UAMxB,MAAM;iBACC,OAAO;;;wBAkKrB,CAAC"}

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

@@ -0,0 +1,165 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useReducer, useRef, useState, useEffect } from 'react';
+import { Button, Checkbox, CheckboxGroup, Form, Grid, Input, RadioButton, RadioButtonGroup, Select, Option, TextArea, useToaster, usePrevious } from '@pega/cosmos-react-core';
+import { Editor as RichTextEditor } from '@pega/cosmos-react-rte';
+import { FileInputDemo } from '../File/FileInput.stories';
+import { FilterableSingleSelect as ComboboxFilterableStory } from '../ComboBox/ComboBox.stories';
+// Get initial field properties
+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;
+            }
+        }
+    ];
+};
+// Handles setting of state for all fields
+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 } = useToaster();
+    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 = (_jsxs(_Fragment, { children: [_jsx(Button, { name: 'Cancel', variant: 'secondary', onClick: () => {
+                    push({ content: 'Form cancelled!' });
+                }, 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);
+    };
+    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, status: name.status, info: 'some help text here', onChange: (e) => setField({ ...e }), onBlur: (e) => setField({ ...e }), additionalInfo: {
+                        heading: 'Field info',
+                        content: 'Lorem ipsum dolor set amet.'
+                    }, required: true }), _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 }), additionalInfo: {
+                        heading: 'Field info',
+                        content: 'Lorem ipsum dolor set amet.'
+                    } }), _jsx(Grid, { item: { colStartEnd: '1/-1' }, children: _jsx(CheckboxGroup, { name: 'visited', label: 'Places you have worked', additionalInfo: {
+                            heading: 'Field info',
+                            content: 'Lorem ipsum dolor set amet.'
+                        }, required: true, children: ['Cambridge', 'Krakow', 'Hyderabad', 'Bangalore'].map(office => (_jsx(Checkbox, { label: office, onChange: (e) => setField({ ...e }) }, office))) }) }), _jsx(Grid, { item: { colStartEnd: '1/-1' }, children: _jsx(Checkbox, { additionalInfo: {
+                            heading: 'Field info',
+                            content: 'Lorem ipsum dolor set amet.'
+                        }, label: 'Check me, please', required: true }) }), _jsx(Grid, { item: { colStartEnd: '1/-1' }, children: _jsx(RadioButtonGroup, { name: 'meetings', label: 'Do you enjoy early morning meetings?', additionalInfo: {
+                            heading: 'Field info',
+                            content: 'Lorem ipsum dolor set amet.'
+                        }, required: true, 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', additionalInfo: {
+                        heading: 'Field info',
+                        content: 'Lorem ipsum dolor set amet.'
+                    }, required: true, 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 }), additionalInfo: {
+                            heading: 'Field info',
+                            content: 'Lorem ipsum dolor set amet.'
+                        } }) }), _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',
+                            'links',
+                            'images',
+                            'lists',
+                            'cut-copy-paste',
+                            'indentation'
+                        ], onImageAdded: onImageAdded, ref: editorRef, additionalInfo: {
+                            heading: 'Field info',
+                            content: 'Lorem ipsum dolor set amet.'
+                        }, required: true }) }), _jsx(Grid, { item: { colStartEnd: '1/-1' }, children: _jsx(FileInputDemo, { label: 'Meeting attachments' }) }), _jsx(ComboboxFilterableStory, { label: 'Select a user' })] }) }));
+};
+export const ReadOnlyFormContent = ({ cols, heading, description, showActions }) => {
+    const [value, setValue] = useState({ start: 1, end: '3' });
+    const prev = usePrevious(value);
+    useEffect(() => {
+        if (prev !== value)
+            setValue(value);
+    }, [prev, value]);
+    const [fields] = useReducer(fieldReducer, undefined, initFields);
+    const { push } = useToaster();
+    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 = (_jsxs(_Fragment, { children: [_jsx(Button, { name: 'Cancel', variant: 'secondary', onClick: () => {
+                    push({ content: 'Form cancelled!' });
+                }, children: "Cancel" }), _jsx(Button, { name: 'Submit', type: 'submit', variant: 'primary', disabled: !canSubmit, children: "Submit" })] }));
+    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, { readOnly: true, name: 'name', label: 'Name', value: 'Test', required: false, status: name.status, additionalInfo: {
+                        heading: 'Field info',
+                        content: 'Lorem ipsum dolor set amet.'
+                    } }), _jsx(Grid, { item: { colStartEnd: '1/-1' }, children: _jsxs(CheckboxGroup, { name: 'places visited', label: 'Places you have worked', additionalInfo: {
+                            heading: 'Field info',
+                            content: 'Lorem ipsum dolor set amet.'
+                        }, readOnly: true, required: true, children: [_jsx(Checkbox, { label: 'Cambridge' }, 'Cambridge'), _jsx(Checkbox, { label: 'Krakow' }, 'Krakow'), _jsx(Checkbox, { label: 'Hyderabad' }, 'Hyderabad'), _jsx(Checkbox, { label: 'Bangalore' }, 'Bangalore')] }) }), _jsx(Grid, { item: { colStartEnd: '1/-1' }, children: _jsxs(RadioButtonGroup, { name: 'meetings', label: 'Do you really enjoy early morning meetings?', additionalInfo: {
+                            heading: 'Field info',
+                            content: 'Lorem ipsum dolor set amet.'
+                        }, required: true, children: [_jsx(RadioButton, { label: 'Yes' }, 'Yes'), _jsx(RadioButton, { label: "No.. no I don't", readOnly: true }, "No.. no I don't")] }) }), _jsx(Grid, { item: { colStartEnd: '1/-1' }, children: _jsxs(CheckboxGroup, { name: 'more places visited', label: 'More Places you have worked', additionalInfo: {
+                            heading: 'Field info',
+                            content: 'Lorem ipsum dolor set amet.'
+                        }, required: true, children: [_jsx(Checkbox, { label: 'Cambridge', readOnly: true }, 'Cambridge'), _jsx(Checkbox, { label: 'Krakow' }, 'Krakow'), _jsx(Checkbox, { label: 'Hyderabad' }, 'Hyderabad'), _jsx(Checkbox, { label: 'Bangalore' }, 'Bangalore')] }) }), _jsx(Grid, { item: { colStartEnd: '1/-1' }, children: _jsxs(RadioButtonGroup, { name: 'meetings', label: 'Do you enjoy early morning meetings?', additionalInfo: {
+                            heading: 'Field info',
+                            content: 'Lorem ipsum dolor set amet.'
+                        }, readOnly: true, allReadOnly: true, required: true, children: [_jsx(RadioButton, { label: 'Yes' }, 'Yes'), _jsx(RadioButton, { label: "No.. no I don't" }, "No.. no I don't")] }) }), _jsxs(Select, { label: 'What would you like to eat?', info: '', additionalInfo: {
+                        heading: 'Field info',
+                        content: 'Lorem ipsum dolor set amet.'
+                    }, readOnly: true, children: [_jsx(Option, { children: "choose meal\u2026" }), _jsx(Option, { selected: true, children: "Pizza" }), _jsx(Option, { children: "Sandwich" }), _jsx(Option, { children: "Salad" })] }), _jsx(Grid, { item: { colStartEnd: '1/-1' }, children: _jsx(TextArea, { readOnly: true, name: 'notes', required: false, label: 'Meeting notes', status: notes.status, info: notes.info || notes.help, value: 'Test copy', additionalInfo: {
+                            heading: 'Field info',
+                            content: 'Lorem ipsum dolor set amet.'
+                        } }) })] }) }));
+};
+//# sourceMappingURL=Form.mocks.js.map

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

@@ -0,0 +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, useState, useEffect } 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 useToaster,\n DateRangeInputProps,\n usePrevious\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 } = useToaster();\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 status={name.status}\n info='some help text here'\n onChange={(e: ChangeEvent<HTMLInputElement>) => setField({ ...e })}\n onBlur={(e: FocusEvent<HTMLInputElement>) => setField({ ...e })}\n additionalInfo={{\n heading: 'Field info',\n content: 'Lorem ipsum dolor set amet.'\n }}\n required\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 additionalInfo={{\n heading: 'Field info',\n content: 'Lorem ipsum dolor set amet.'\n }}\n />\n\n <Grid item={{ colStartEnd: '1/-1' }}>\n <CheckboxGroup\n name='visited'\n label='Places you have worked'\n additionalInfo={{\n heading: 'Field info',\n content: 'Lorem ipsum dolor set amet.'\n }}\n required\n >\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 <Checkbox\n additionalInfo={{\n heading: 'Field info',\n content: 'Lorem ipsum dolor set amet.'\n }}\n label='Check me, please'\n required\n />\n </Grid>\n\n <Grid item={{ colStartEnd: '1/-1' }}>\n <RadioButtonGroup\n name='meetings'\n label='Do you enjoy early morning meetings?'\n additionalInfo={{\n heading: 'Field info',\n content: 'Lorem ipsum dolor set amet.'\n }}\n required\n >\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\n label='What would you like to eat?'\n info='FYI: options are limited'\n additionalInfo={{\n heading: 'Field info',\n content: 'Lorem ipsum dolor set amet.'\n }}\n required\n >\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 additionalInfo={{\n heading: 'Field info',\n content: 'Lorem ipsum dolor set amet.'\n }}\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 additionalInfo={{\n heading: 'Field info',\n content: 'Lorem ipsum dolor set amet.'\n }}\n required\n />\n </Grid>\n <Grid item={{ colStartEnd: '1/-1' }}>\n <FileInputDemo label='Meeting attachments' />\n </Grid>\n\n <ComboboxFilterableStory label='Select a user' />\n </Grid>\n </Form>\n );\n};\n\nexport const ReadOnlyFormContent = ({\n cols,\n heading,\n description,\n showActions\n}: {\n cols: number;\n showActions: boolean;\n heading?: string;\n description?: string;\n}) => {\n const [value, setValue] = useState<DateRangeInputProps['value']>({ start: 1, end: '3' });\n const prev = usePrevious(value);\n useEffect(() => {\n if (prev !== value) setValue(value);\n }, [prev, value]);\n const [fields] = useReducer(fieldReducer, undefined, initFields);\n const { push } = useToaster();\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 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 readOnly\n name='name'\n label='Name'\n value='Test'\n required={false}\n status={name.status}\n additionalInfo={{\n heading: 'Field info',\n content: 'Lorem ipsum dolor set amet.'\n }}\n />\n\n <Grid item={{ colStartEnd: '1/-1' }}>\n <CheckboxGroup\n name='places visited'\n label='Places you have worked'\n additionalInfo={{\n heading: 'Field info',\n content: 'Lorem ipsum dolor set amet.'\n }}\n readOnly\n required\n >\n <Checkbox key='Cambridge' label='Cambridge' />\n <Checkbox key='Krakow' label='Krakow' />\n <Checkbox key='Hyderabad' label='Hyderabad' />\n <Checkbox key='Bangalore' label='Bangalore' />\n </CheckboxGroup>\n </Grid>\n\n <Grid item={{ colStartEnd: '1/-1' }}>\n <RadioButtonGroup\n name='meetings'\n label='Do you really enjoy early morning meetings?'\n additionalInfo={{\n heading: 'Field info',\n content: 'Lorem ipsum dolor set amet.'\n }}\n required\n >\n <RadioButton key='Yes' label='Yes' />\n <RadioButton key=\"No.. no I don't\" label=\"No.. no I don't\" readOnly />\n </RadioButtonGroup>\n </Grid>\n\n <Grid item={{ colStartEnd: '1/-1' }}>\n <CheckboxGroup\n name='more places visited'\n label='More Places you have worked'\n additionalInfo={{\n heading: 'Field info',\n content: 'Lorem ipsum dolor set amet.'\n }}\n required\n >\n <Checkbox key='Cambridge' label='Cambridge' readOnly />\n <Checkbox key='Krakow' label='Krakow' />\n <Checkbox key='Hyderabad' label='Hyderabad' />\n <Checkbox key='Bangalore' label='Bangalore' />\n </CheckboxGroup>\n </Grid>\n\n <Grid item={{ colStartEnd: '1/-1' }}>\n <RadioButtonGroup\n name='meetings'\n label='Do you enjoy early morning meetings?'\n additionalInfo={{\n heading: 'Field info',\n content: 'Lorem ipsum dolor set amet.'\n }}\n readOnly\n allReadOnly\n required\n >\n <RadioButton key='Yes' label='Yes' />\n <RadioButton key=\"No.. no I don't\" label=\"No.. no I don't\" />\n </RadioButtonGroup>\n </Grid>\n\n <Select\n label='What would you like to eat?'\n info=''\n additionalInfo={{\n heading: 'Field info',\n content: 'Lorem ipsum dolor set amet.'\n }}\n readOnly\n >\n <Option>choose meal…</Option>\n <Option selected>Pizza</Option>\n <Option>Sandwich</Option>\n <Option>Salad</Option>\n </Select>\n\n <Grid item={{ colStartEnd: '1/-1' }}>\n <TextArea\n readOnly\n name='notes'\n required={false}\n label='Meeting notes'\n status={notes.status}\n info={notes.info || notes.help}\n value='Test copy'\n additionalInfo={{\n heading: 'Field info',\n content: 'Lorem ipsum dolor set amet.'\n }}\n />\n </Grid>\n </Grid>\n </Form>\n );\n};\n"]}

package/lib/core/Form/Form.stories.d.ts ADDED Viewed

@@ -0,0 +1,25 @@
+import type { StoryFn } from '@storybook/react';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
+export default _default;
+interface FormStoryProps {
+    heading?: string;
+    description?: string;
+}
+export declare const ReadOnlyOneColumnForm: StoryFn<FormStoryProps>;
+export declare const OneColumnForm: StoryFn<FormStoryProps>;
+export declare const TwoColumnForm: StoryFn<FormStoryProps>;
+export declare const ThreeColumnForm: StoryFn<FormStoryProps>;
+export declare const SimpleFormDemo: StoryFn<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: StoryFn<ConfigurableFormProps>;
+//# sourceMappingURL=Form.stories.d.ts.map

package/lib/core/Form/Form.stories.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"Form.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Form/Form.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;;AAgBtD,wBAeU;AACV,UAAU,cAAc;IACtB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,qBAAqB,EAAE,OAAO,CAAC,cAAc,CASzD,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,OAAO,CAAC,cAAc,CAEjD,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,OAAO,CAAC,cAAc,CAEjD,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,OAAO,CAAC,cAAc,CAEnD,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,OAAO,CAAC,cAAc,GAAG;IAAE,WAAW,CAAC,EAAE,OAAO,CAAA;CAAE,CAqD9E,CAAC;AAUF,UAAU,qBAAsB,SAAQ,cAAc;IACpD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,eAAO,MAAM,gBAAgB,EAAE,OAAO,CAAC,qBAAqB,CAwB3D,CAAC"}