@pega/cosmos-react-demos 2.1.2 → 3.0.0-dev.2.0

package/lib/core/Configuration/Configuration.stories.js

@@ -1,11 +1,12 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import styled from 'styled-components';
-import { Button, Configuration, MenuButton, resetToInitial } from '@pega/cosmos-react-core';
-import { FormContent } from '@pega/cosmos-react-demos/lib/core/Form/Form.stories';
+import { Button, Configuration, MenuButton, resetToInitial, Flex, Checkbox, RadioButton, DateInput, SearchInput, Text } from '@pega/cosmos-react-core';
+import { FormContent } from '@pega/cosmos-react-demos/lib/core/Form/Form.mocks';
 export default {
     title: 'Core/Configuration',
-    component: Configuration
+    component: Configuration,
+    includeStories: ['ThemedForm', 'ThemingHierarchy', 'OverridableActionMenu']
 };
 export const ThemedForm = (args) => {
     const themes = {
@@ -72,4 +73,62 @@ export const OverridableActionMenu = () => {
     const sharedActions = [{ id: '1', primary: 'Action 1', onClick: () => { } }];
     return (_jsxs(_Fragment, { children: [_jsx(MenuButton, { text: 'Cosmos MenuButton', menu: { items: sharedActions } }, void 0), _jsx(Configuration, { overrideMap: {}, children: _jsx(MenuButton, { text: 'Mock PIMC MenuButton', menu: { items: sharedActions } }, void 0) }, void 0)] }, void 0));
 };
+export const ConfigurableBaseTheme = (args) => {
+    return (_jsx(Configuration, { theme: {
+            base: {
+                palette: {
+                    interactive: args.interactive
+                }
+            }
+        }, children: _jsxs(Flex, { container: { gap: 2, justify: 'start' }, children: [_jsx(Button, { variant: 'primary', children: "Primary" }, void 0), _jsx(Flex, { item: { shrink: 1, alignSelf: 'center' }, children: _jsx(Checkbox, { id: 'checkbox', label: 'Checkbox Option', defaultChecked: true }, void 0) }, void 0), _jsx(RadioButton, { id: 'radio-button', label: 'Radio Option', defaultChecked: true }, void 0)] }, void 0) }, void 0));
+};
+ConfigurableBaseTheme.args = {
+    interactive: '#681fc3'
+};
+ConfigurableBaseTheme.argTypes = {
+    interactive: { control: { type: 'color' } }
+};
+export const ConfigurableComponentTheme = (args) => {
+    return (_jsx(Configuration, { theme: {
+            components: {
+                button: {
+                    color: args.buttonColor
+                },
+                'radio-check': {
+                    ':checked': {
+                        'background-color': args.checkedBackgroundColor
+                    }
+                }
+            }
+        }, children: _jsxs(Flex, { container: { gap: 2, justify: 'start' }, children: [_jsx(Button, { variant: 'primary', children: "Primary" }, void 0), _jsx(Flex, { item: { shrink: 1, alignSelf: 'center' }, children: _jsx(Checkbox, { id: 'checkbox', label: 'Checkbox Option', defaultChecked: true }, void 0) }, void 0), _jsx(RadioButton, { id: 'radio-button', label: 'Radio Option', defaultChecked: true }, void 0)] }, void 0) }, void 0));
+};
+ConfigurableComponentTheme.args = {
+    buttonColor: '#681fc3',
+    checkedBackgroundColor: '#20aa50'
+};
+ConfigurableComponentTheme.argTypes = {
+    buttonColor: { control: { type: 'color' } },
+    checkedBackgroundColor: { control: { type: 'color' } }
+};
+export const ConfigurableLocale = (args) => {
+    return (_jsx(Configuration, { locale: args.locale, children: _jsx(Flex, { container: { direction: 'column', gap: 2 }, children: _jsx(DateInput, { label: 'Date Input with locale support', value: new Date() }, void 0) }, void 0) }, void 0));
+};
+ConfigurableLocale.args = {
+    locale: 'en-US'
+};
+ConfigurableLocale.argTypes = {
+    locale: { options: ['en-US', 'pl', 'fr', 'hu', 'de-DE'], control: { type: 'select' } }
+};
+export const ConfigurableTranslations = (args) => {
+    const spanishTranslation = {
+        search_placeholder_default: args.placeholderTranslation
+    };
+    return (_jsxs(Flex, { container: { gap: 4 }, children: [_jsxs(Flex, { container: { direction: 'column' }, children: [_jsx(Text, { variant: 'h4', children: "Default" }, void 0), _jsx(SearchInput, {}, void 0)] }, void 0), _jsx(Configuration, { translations: spanishTranslation, children: _jsxs(Flex, { container: { direction: 'column' }, children: [_jsx(Text, { variant: 'h4', children: "Translated" }, void 0), _jsx(SearchInput, {}, void 0)] }, void 0) }, void 0)] }, void 0));
+};
+ConfigurableTranslations.args = {
+    placeholderTranslation: 'Buscar...'
+};
+ConfigurableTranslations.argTypes = {
+    placeholderTranslation: { control: { type: 'text' } }
+};
 //# sourceMappingURL=Configuration.stories.js.map

package/lib/core/Configuration/Configuration.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Configuration.stories.js","sourceRoot":"","sources":["../../../src/core/Configuration/Configuration.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useState } from 'react';\nimport styled from 'styled-components';\n\nimport {\n  Button,\n  Configuration,\n  MenuButton,\n  resetToInitial,\n  DefaultSettableTheme\n} from '@pega/cosmos-react-core';\nimport { FormContent } from '@pega/cosmos-react-demos/lib/core/Form/Form.stories';\n\nexport default {\n  title: 'Core/Configuration',\n  component: Configuration\n} as Meta;\n\nexport const ThemedForm: Story<{ theme: 'default' | 'theme1' }> = (args: {\n  theme: 'default' | 'theme1';\n}) => {\n  const themes: Record<string, DefaultSettableTheme> = {\n    default: {},\n    theme1: {\n      base: {\n        palette: {\n          interactive: '#AC75F0'\n        }\n      },\n      components: {\n        button: {\n          'border-radius': 1\n        },\n        'form-control': {\n          'background-color': '#80008033',\n          'border-color': 'purple'\n        },\n        input: {\n          height: '50px'\n        }\n      }\n    }\n  };\n\n  return (\n    <Configuration theme={themes[args.theme]}>\n      <FormContent cols={1} showActions={false} />\n    </Configuration>\n  );\n};\n\nThemedForm.args = {\n  theme: 'default'\n};\n\nThemedForm.argTypes = {\n  theme: { options: ['default', 'theme1'], control: { type: 'select' } }\n};\n\nconst buttonStyles = {\n  width: '100%'\n};\n\nconst StyledFieldset = styled.fieldset`\n  padding: 1rem 5%;\n  margin: 1rem 0;\n`;\n\nconst BoldSpan = styled.span`\n  font-weight: bold;\n`;\n\nconst FlipFlop = ({\n  flipFlop,\n  first,\n  second\n}: {\n  flipFlop: boolean;\n  first: string;\n  second: string;\n}) => {\n  return flipFlop ? (\n    <>\n      <BoldSpan>{first}</BoldSpan>&nbsp;→ {second}\n    </>\n  ) : (\n    <>\n      {first} ←&nbsp;<BoldSpan>{second}</BoldSpan>\n    </>\n  );\n};\n\nexport const ThemingHierarchy = () => {\n  const [redOrOrange, setRedOrOrange] = useState(true);\n  const [greenOrPurple, setGreenOrPurple] = useState(true);\n\n  return (\n    <StyledFieldset style={{ margin: 0, textAlign: 'center' }}>\n      <legend>Initial Theme</legend>\n      <Button style={buttonStyles} variant='primary'>\n        Base interactive\n      </Button>\n      <StyledFieldset>\n        <legend>Override Interactive to</legend>\n        <Configuration\n          theme={{\n            base: {\n              palette: {\n                interactive: redOrOrange ? 'red' : 'darkorange'\n              }\n            }\n          }}\n        >\n          <Button\n            style={buttonStyles}\n            variant='primary'\n            onClick={() => setRedOrOrange(val => !val)}\n          >\n            <FlipFlop flipFlop={redOrOrange} first='Red' second='Orange' />\n          </Button>\n          <StyledFieldset>\n            <legend>Override Button Primary BG to</legend>\n            <Configuration\n              theme={{\n                components: {\n                  button: { color: greenOrPurple ? 'green' : 'purple' }\n                }\n              }}\n            >\n              <Button\n                style={buttonStyles}\n                variant='primary'\n                onClick={() => setGreenOrPurple(val => !val)}\n              >\n                <FlipFlop flipFlop={greenOrPurple} first='Green' second='Purple' />\n              </Button>\n              <Button style={{ ...buttonStyles, marginTop: '1rem' }} variant='secondary'>\n                Secondary still inherits interactive\n              </Button>\n              <StyledFieldset>\n                <legend>Reset Button BG</legend>\n                <Configuration\n                  theme={{\n                    components: { button: { color: resetToInitial } }\n                  }}\n                >\n                  <Button style={buttonStyles} variant='primary'>\n                    Inherited from interactive\n                  </Button>\n                  <StyledFieldset>\n                    <legend>Reset Interactive</legend>\n                    <Configuration theme={{ base: { palette: { interactive: resetToInitial } } }}>\n                      <Button style={buttonStyles} variant='primary'>\n                        Inherited from base\n                      </Button>\n                    </Configuration>\n                  </StyledFieldset>\n                </Configuration>\n              </StyledFieldset>\n            </Configuration>\n          </StyledFieldset>\n        </Configuration>\n      </StyledFieldset>\n    </StyledFieldset>\n  );\n};\n\nexport const OverridableActionMenu = () => {\n  const sharedActions = [{ id: '1', primary: 'Action 1', onClick: () => {} }];\n\n  return (\n    <>\n      <MenuButton text='Cosmos MenuButton' menu={{ items: sharedActions }} />\n      <Configuration overrideMap={{}}>\n        <MenuButton text='Mock PIMC MenuButton' menu={{ items: sharedActions }} />\n      </Configuration>\n    </>\n  );\n};\n"]}
+{"version":3,"file":"Configuration.stories.js","sourceRoot":"","sources":["../../../src/core/Configuration/Configuration.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useState } from 'react';\nimport styled from 'styled-components';\n\nimport {\n  Button,\n  Configuration,\n  MenuButton,\n  resetToInitial,\n  DefaultSettableTheme,\n  Flex,\n  Checkbox,\n  RadioButton,\n  DateInput,\n  SearchInput,\n  Text\n} from '@pega/cosmos-react-core';\nimport { FormContent } from '@pega/cosmos-react-demos/lib/core/Form/Form.mocks';\n\nexport default {\n  title: 'Core/Configuration',\n  component: Configuration,\n  includeStories: ['ThemedForm', 'ThemingHierarchy', 'OverridableActionMenu']\n} as Meta;\n\nexport const ThemedForm: Story<{ theme: 'default' | 'theme1' }> = (args: {\n  theme: 'default' | 'theme1';\n}) => {\n  const themes: Record<string, DefaultSettableTheme> = {\n    default: {},\n    theme1: {\n      base: {\n        palette: {\n          interactive: '#AC75F0'\n        }\n      },\n      components: {\n        button: {\n          'border-radius': 1\n        },\n        'form-control': {\n          'background-color': '#80008033',\n          'border-color': 'purple'\n        },\n        input: {\n          height: '50px'\n        }\n      }\n    }\n  };\n\n  return (\n    <Configuration theme={themes[args.theme]}>\n      <FormContent cols={1} showActions={false} />\n    </Configuration>\n  );\n};\n\nThemedForm.args = {\n  theme: 'default'\n};\n\nThemedForm.argTypes = {\n  theme: { options: ['default', 'theme1'], control: { type: 'select' } }\n};\n\nconst buttonStyles = {\n  width: '100%'\n};\n\nconst StyledFieldset = styled.fieldset`\n  padding: 1rem 5%;\n  margin: 1rem 0;\n`;\n\nconst BoldSpan = styled.span`\n  font-weight: bold;\n`;\n\nconst FlipFlop = ({\n  flipFlop,\n  first,\n  second\n}: {\n  flipFlop: boolean;\n  first: string;\n  second: string;\n}) => {\n  return flipFlop ? (\n    <>\n      <BoldSpan>{first}</BoldSpan>&nbsp;→ {second}\n    </>\n  ) : (\n    <>\n      {first} ←&nbsp;<BoldSpan>{second}</BoldSpan>\n    </>\n  );\n};\n\nexport const ThemingHierarchy = () => {\n  const [redOrOrange, setRedOrOrange] = useState(true);\n  const [greenOrPurple, setGreenOrPurple] = useState(true);\n\n  return (\n    <StyledFieldset style={{ margin: 0, textAlign: 'center' }}>\n      <legend>Initial Theme</legend>\n      <Button style={buttonStyles} variant='primary'>\n        Base interactive\n      </Button>\n      <StyledFieldset>\n        <legend>Override Interactive to</legend>\n        <Configuration\n          theme={{\n            base: {\n              palette: {\n                interactive: redOrOrange ? 'red' : 'darkorange'\n              }\n            }\n          }}\n        >\n          <Button\n            style={buttonStyles}\n            variant='primary'\n            onClick={() => setRedOrOrange(val => !val)}\n          >\n            <FlipFlop flipFlop={redOrOrange} first='Red' second='Orange' />\n          </Button>\n          <StyledFieldset>\n            <legend>Override Button Primary BG to</legend>\n            <Configuration\n              theme={{\n                components: {\n                  button: { color: greenOrPurple ? 'green' : 'purple' }\n                }\n              }}\n            >\n              <Button\n                style={buttonStyles}\n                variant='primary'\n                onClick={() => setGreenOrPurple(val => !val)}\n              >\n                <FlipFlop flipFlop={greenOrPurple} first='Green' second='Purple' />\n              </Button>\n              <Button style={{ ...buttonStyles, marginTop: '1rem' }} variant='secondary'>\n                Secondary still inherits interactive\n              </Button>\n              <StyledFieldset>\n                <legend>Reset Button BG</legend>\n                <Configuration\n                  theme={{\n                    components: { button: { color: resetToInitial } }\n                  }}\n                >\n                  <Button style={buttonStyles} variant='primary'>\n                    Inherited from interactive\n                  </Button>\n                  <StyledFieldset>\n                    <legend>Reset Interactive</legend>\n                    <Configuration theme={{ base: { palette: { interactive: resetToInitial } } }}>\n                      <Button style={buttonStyles} variant='primary'>\n                        Inherited from base\n                      </Button>\n                    </Configuration>\n                  </StyledFieldset>\n                </Configuration>\n              </StyledFieldset>\n            </Configuration>\n          </StyledFieldset>\n        </Configuration>\n      </StyledFieldset>\n    </StyledFieldset>\n  );\n};\n\nexport const OverridableActionMenu = () => {\n  const sharedActions = [{ id: '1', primary: 'Action 1', onClick: () => {} }];\n\n  return (\n    <>\n      <MenuButton text='Cosmos MenuButton' menu={{ items: sharedActions }} />\n      <Configuration overrideMap={{}}>\n        <MenuButton text='Mock PIMC MenuButton' menu={{ items: sharedActions }} />\n      </Configuration>\n    </>\n  );\n};\n\ninterface ConfigurableBaseThemeProps {\n  interactive?: string;\n}\n\nexport const ConfigurableBaseTheme: Story<ConfigurableBaseThemeProps> = (\n  args: ConfigurableBaseThemeProps\n) => {\n  return (\n    <Configuration\n      theme={{\n        base: {\n          palette: {\n            interactive: args.interactive\n          }\n        }\n      }}\n    >\n      <Flex container={{ gap: 2, justify: 'start' }}>\n        <Button variant='primary'>Primary</Button>\n        <Flex item={{ shrink: 1, alignSelf: 'center' }}>\n          <Checkbox id='checkbox' label='Checkbox Option' defaultChecked />\n        </Flex>\n        <RadioButton id='radio-button' label='Radio Option' defaultChecked />\n      </Flex>\n    </Configuration>\n  );\n};\n\nConfigurableBaseTheme.args = {\n  interactive: '#681fc3'\n};\n\nConfigurableBaseTheme.argTypes = {\n  interactive: { control: { type: 'color' } }\n};\n\ninterface ConfigurableComponentThemeProps {\n  buttonColor?: string;\n  checkedBackgroundColor?: string;\n}\n\nexport const ConfigurableComponentTheme: Story<ConfigurableComponentThemeProps> = (\n  args: ConfigurableComponentThemeProps\n) => {\n  return (\n    <Configuration\n      theme={{\n        components: {\n          button: {\n            color: args.buttonColor\n          },\n          'radio-check': {\n            ':checked': {\n              'background-color': args.checkedBackgroundColor\n            }\n          }\n        }\n      }}\n    >\n      <Flex container={{ gap: 2, justify: 'start' }}>\n        <Button variant='primary'>Primary</Button>\n        <Flex item={{ shrink: 1, alignSelf: 'center' }}>\n          <Checkbox id='checkbox' label='Checkbox Option' defaultChecked />\n        </Flex>\n        <RadioButton id='radio-button' label='Radio Option' defaultChecked />\n      </Flex>\n    </Configuration>\n  );\n};\n\nConfigurableComponentTheme.args = {\n  buttonColor: '#681fc3',\n  checkedBackgroundColor: '#20aa50'\n};\n\nConfigurableComponentTheme.argTypes = {\n  buttonColor: { control: { type: 'color' } },\n  checkedBackgroundColor: { control: { type: 'color' } }\n};\n\ninterface ConfigurableLocaleProps {\n  locale?: string;\n}\n\nexport const ConfigurableLocale: Story<ConfigurableLocaleProps> = (\n  args: ConfigurableLocaleProps\n) => {\n  return (\n    <Configuration locale={args.locale}>\n      <Flex container={{ direction: 'column', gap: 2 }}>\n        <DateInput label='Date Input with locale support' value={new Date()} />\n      </Flex>\n    </Configuration>\n  );\n};\n\nConfigurableLocale.args = {\n  locale: 'en-US'\n};\n\nConfigurableLocale.argTypes = {\n  locale: { options: ['en-US', 'pl', 'fr', 'hu', 'de-DE'], control: { type: 'select' } }\n};\n\ninterface ConfigurableTranslationsProps {\n  placeholderTranslation?: string;\n}\n\nexport const ConfigurableTranslations: Story<ConfigurableTranslationsProps> = (\n  args: ConfigurableTranslationsProps\n) => {\n  const spanishTranslation = {\n    search_placeholder_default: args.placeholderTranslation\n  };\n\n  return (\n    <Flex container={{ gap: 4 }}>\n      <Flex container={{ direction: 'column' }}>\n        <Text variant='h4'>Default</Text>\n        <SearchInput />\n      </Flex>\n\n      <Configuration translations={spanishTranslation}>\n        <Flex container={{ direction: 'column' }}>\n          <Text variant='h4'>Translated</Text>\n          <SearchInput />\n        </Flex>\n      </Configuration>\n    </Flex>\n  );\n};\n\nConfigurableTranslations.args = {\n  placeholderTranslation: 'Buscar...'\n};\n\nConfigurableTranslations.argTypes = {\n  placeholderTranslation: { control: { type: 'text' } }\n};\n"]}

package/lib/core/DateTime/DateTimeDisplay.stories.js

@@ -24,6 +24,7 @@ DateTimeDisplayDemo.args = {
     clockFormat: undefined
 };
 DateTimeDisplayDemo.argTypes = {
+    value: { control: { type: 'date' } },
     variant: {
         options: [
             'date',

package/lib/core/DateTime/DateTimeDisplay.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"DateTimeDisplay.stories.js","sourceRoot":"","sources":["../../../src/core/DateTime/DateTimeDisplay.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EACL,eAAe,EAEf,eAAe,EAEhB,MAAM,yBAAyB,CAAC;AAEjC,eAAe;IACb,KAAK,EAAE,eAAe;CACf,CAAC;AAEV,MAAM,CAAC,MAAM,mBAAmB,GAAgC,CAAC,IAA0B,EAAE,EAAE;IAC7F,OAAO,KAAC,eAAe,IAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,gBAAgB,EAAE,IAAI,CAAC,gBAAgB,WAAI,CAAC;AACzF,CAAC,CAAC;AAEF,mBAAmB,CAAC,IAAI,GAAG;IACzB,KAAK,EAAE,SAAS;IAChB,gBAAgB,EAAE,CAAC;CACpB,CAAC;AAEF,mBAAmB,CAAC,QAAQ,GAAG;IAC7B,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IACtC,gBAAgB,EAAE,EAAE,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;CACzE,CAAC;AAEF,MAAM,CAAC,MAAM,mBAAmB,GAAgC,CAAC,IAA0B,EAAE,EAAE;IAC7F,OAAO,CACL,KAAC,eAAe,IACd,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,WAAW,EAAE,IAAI,CAAC,WAAW,WAC7B,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,mBAAmB,CAAC,IAAI,GAAG;IACzB,KAAK,EAAE,IAAI,IAAI,EAAE;IACjB,OAAO,EAAE,MAAM;IACf,MAAM,EAAE,OAAO;IACf,WAAW,EAAE,SAAS;CACvB,CAAC;AAEF,mBAAmB,CAAC,QAAQ,GAAG;IAC7B,OAAO,EAAE;QACP,OAAO,EAAE;YACP,MAAM;YACN,UAAU;YACV,MAAM;YACN,MAAM;YACN,OAAO;YACP,MAAM;YACN,WAAW;YACX,aAAa;YACb,UAAU;SACX;QACD,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;KAC5B;IACD,MAAM,EAAE,EAAE,OAAO,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,SAAS,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IAC9E,WAAW,EAAE;QACX,OAAO,EAAE,CAAC,SAAS,EAAE,EAAE,EAAE,EAAE,CAAC;QAC5B,OAAO,EAAE,EAAE,IAAI,EAAE,cAAc,EAAE;KAClC;CACF,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport {\n  DateTimeDisplay,\n  DateTimeDisplayProps,\n  DurationDisplay,\n  DurationDisplayProps\n} from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/DateTime'\n} as Meta;\n\nexport const DurationDisplayDemo: Story<DurationDisplayProps> = (args: DurationDisplayProps) => {\n  return <DurationDisplay value={args.value} significantUnits={args.significantUnits} />;\n};\n\nDurationDisplayDemo.args = {\n  value: 462553844,\n  significantUnits: 4\n};\n\nDurationDisplayDemo.argTypes = {\n  value: { control: { type: 'number' } },\n  significantUnits: { options: [1, 2, 3, 4], control: { type: 'select' } }\n};\n\nexport const DateTimeDisplayDemo: Story<DateTimeDisplayProps> = (args: DateTimeDisplayProps) => {\n  return (\n    <DateTimeDisplay\n      value={args.value}\n      variant={args.variant}\n      format={args.format}\n      clockFormat={args.clockFormat}\n    />\n  );\n};\n\nDateTimeDisplayDemo.args = {\n  value: new Date(),\n  variant: 'date',\n  format: 'short',\n  clockFormat: undefined\n};\n\nDateTimeDisplayDemo.argTypes = {\n  variant: {\n    options: [\n      'date',\n      'datetime',\n      'time',\n      'week',\n      'month',\n      'year',\n      'monthyear',\n      'quarteryear',\n      'relative'\n    ],\n    control: { type: 'select' }\n  },\n  format: { options: ['short', 'long', 'numeric'], control: { type: 'select' } },\n  clockFormat: {\n    options: [undefined, 12, 24],\n    control: { type: 'inline-radio' }\n  }\n};\n"]}
+{"version":3,"file":"DateTimeDisplay.stories.js","sourceRoot":"","sources":["../../../src/core/DateTime/DateTimeDisplay.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EACL,eAAe,EAEf,eAAe,EAEhB,MAAM,yBAAyB,CAAC;AAEjC,eAAe;IACb,KAAK,EAAE,eAAe;CACf,CAAC;AAEV,MAAM,CAAC,MAAM,mBAAmB,GAAgC,CAAC,IAA0B,EAAE,EAAE;IAC7F,OAAO,KAAC,eAAe,IAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,gBAAgB,EAAE,IAAI,CAAC,gBAAgB,WAAI,CAAC;AACzF,CAAC,CAAC;AAEF,mBAAmB,CAAC,IAAI,GAAG;IACzB,KAAK,EAAE,SAAS;IAChB,gBAAgB,EAAE,CAAC;CACpB,CAAC;AAEF,mBAAmB,CAAC,QAAQ,GAAG;IAC7B,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IACtC,gBAAgB,EAAE,EAAE,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;CACzE,CAAC;AAEF,MAAM,CAAC,MAAM,mBAAmB,GAAgC,CAAC,IAA0B,EAAE,EAAE;IAC7F,OAAO,CACL,KAAC,eAAe,IACd,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,WAAW,EAAE,IAAI,CAAC,WAAW,WAC7B,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,mBAAmB,CAAC,IAAI,GAAG;IACzB,KAAK,EAAE,IAAI,IAAI,EAAE;IACjB,OAAO,EAAE,MAAM;IACf,MAAM,EAAE,OAAO;IACf,WAAW,EAAE,SAAS;CACvB,CAAC;AAEF,mBAAmB,CAAC,QAAQ,GAAG;IAC7B,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACpC,OAAO,EAAE;QACP,OAAO,EAAE;YACP,MAAM;YACN,UAAU;YACV,MAAM;YACN,MAAM;YACN,OAAO;YACP,MAAM;YACN,WAAW;YACX,aAAa;YACb,UAAU;SACX;QACD,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;KAC5B;IACD,MAAM,EAAE,EAAE,OAAO,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,SAAS,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IAC9E,WAAW,EAAE;QACX,OAAO,EAAE,CAAC,SAAS,EAAE,EAAE,EAAE,EAAE,CAAC;QAC5B,OAAO,EAAE,EAAE,IAAI,EAAE,cAAc,EAAE;KAClC;CACF,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport {\n  DateTimeDisplay,\n  DateTimeDisplayProps,\n  DurationDisplay,\n  DurationDisplayProps\n} from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/DateTime'\n} as Meta;\n\nexport const DurationDisplayDemo: Story<DurationDisplayProps> = (args: DurationDisplayProps) => {\n  return <DurationDisplay value={args.value} significantUnits={args.significantUnits} />;\n};\n\nDurationDisplayDemo.args = {\n  value: 462553844,\n  significantUnits: 4\n};\n\nDurationDisplayDemo.argTypes = {\n  value: { control: { type: 'number' } },\n  significantUnits: { options: [1, 2, 3, 4], control: { type: 'select' } }\n};\n\nexport const DateTimeDisplayDemo: Story<DateTimeDisplayProps> = (args: DateTimeDisplayProps) => {\n  return (\n    <DateTimeDisplay\n      value={args.value}\n      variant={args.variant}\n      format={args.format}\n      clockFormat={args.clockFormat}\n    />\n  );\n};\n\nDateTimeDisplayDemo.args = {\n  value: new Date(),\n  variant: 'date',\n  format: 'short',\n  clockFormat: undefined\n};\n\nDateTimeDisplayDemo.argTypes = {\n  value: { control: { type: 'date' } },\n  variant: {\n    options: [\n      'date',\n      'datetime',\n      'time',\n      'week',\n      'month',\n      'year',\n      'monthyear',\n      'quarteryear',\n      'relative'\n    ],\n    control: { type: 'select' }\n  },\n  format: { options: ['short', 'long', 'numeric'], control: { type: 'select' } },\n  clockFormat: {\n    options: [undefined, 12, 24],\n    control: { type: 'inline-radio' }\n  }\n};\n"]}

package/lib/core/ExpandCollapse/ExpandCollapse.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ExpandCollapse.styles.d.ts","sourceRoot":"","sources":["../../../src/core/ExpandCollapse/ExpandCollapse.styles.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,YAAY;;SASvB,CAAC"}
+{"version":3,"file":"ExpandCollapse.styles.d.ts","sourceRoot":"","sources":["../../../src/core/ExpandCollapse/ExpandCollapse.styles.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,YAAY;;SAcvB,CAAC"}

package/lib/core/ExpandCollapse/ExpandCollapse.styles.js

@@ -6,6 +6,11 @@ export const StyledRegion = styled.div(({ innerRegion, theme }) => {
     padding: calc(4 * ${theme.base.spacing});
     display: flex;
     justify-content: center;
+
+    button {
+      height: max-content;
+      align-self: center;
+    }
   `;
 });
 StyledRegion.defaultProps = defaultThemeProp;

package/lib/core/ExpandCollapse/ExpandCollapse.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"ExpandCollapse.styles.js","sourceRoot":"","sources":["../../../src/core/ExpandCollapse/ExpandCollapse.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAE3D,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,GAAG,CAA4B,CAAC,EAAE,WAAW,EAAE,KAAK,EAAE,EAAE,EAAE;IAC3F,OAAO,GAAG,CAAA;wBACY,KAAK,CAAC,IAAI,CAAC,OAAO,CACpC,WAAW,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,sBAAsB,CAC5D;wBACmB,KAAK,CAAC,IAAI,CAAC,OAAO;;;GAGvC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,YAAY,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '@pega/cosmos-react-core';\n\nexport const StyledRegion = styled.div<{ innerRegion?: boolean }>(({ innerRegion, theme }) => {\n  return css`\n    background-color: ${theme.base.palette[\n      innerRegion ? 'primary-background' : 'secondary-background'\n    ]};\n    padding: calc(4 * ${theme.base.spacing});\n    display: flex;\n    justify-content: center;\n  `;\n});\n\nStyledRegion.defaultProps = defaultThemeProp;\n"]}
+{"version":3,"file":"ExpandCollapse.styles.js","sourceRoot":"","sources":["../../../src/core/ExpandCollapse/ExpandCollapse.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAE3D,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,GAAG,CAA4B,CAAC,EAAE,WAAW,EAAE,KAAK,EAAE,EAAE,EAAE;IAC3F,OAAO,GAAG,CAAA;wBACY,KAAK,CAAC,IAAI,CAAC,OAAO,CACpC,WAAW,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,sBAAsB,CAC5D;wBACmB,KAAK,CAAC,IAAI,CAAC,OAAO;;;;;;;;GAQvC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,YAAY,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '@pega/cosmos-react-core';\n\nexport const StyledRegion = styled.div<{ innerRegion?: boolean }>(({ innerRegion, theme }) => {\n  return css`\n    background-color: ${theme.base.palette[\n      innerRegion ? 'primary-background' : 'secondary-background'\n    ]};\n    padding: calc(4 * ${theme.base.spacing});\n    display: flex;\n    justify-content: center;\n\n    button {\n      height: max-content;\n      align-self: center;\n    }\n  `;\n});\n\nStyledRegion.defaultProps = defaultThemeProp;\n"]}

package/lib/core/FieldGroup/FieldGroupList.mocks.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+import { FieldGroupListItemProps } from '@pega/cosmos-react-core';
+declare type FieldGroupReducerPayload = {
+    action: 'add';
+} | {
+    action: 'delete';
+    id: string;
+};
+export interface FieldMeta {
+    label: string;
+    type: 'text' | 'date' | 'file' | 'select' | 'textarea';
+}
+export interface GroupMeta {
+    label: string;
+    fields: FieldMeta[];
+}
+export declare const fieldGroupReducer: (groupMeta: GroupMeta, FieldRenderer: (props: FieldMeta) => JSX.Element | null) => (items: FieldGroupListItemProps[], payload: FieldGroupReducerPayload) => FieldGroupListItemProps[];
+export declare const DemoFieldRenderer: ({ label, type }: FieldMeta) => JSX.Element | null;
+export declare const demoGroupMeta: GroupMeta;
+export {};
+//# sourceMappingURL=FieldGroupList.mocks.d.ts.map

package/lib/core/FieldGroup/FieldGroupList.mocks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldGroupList.mocks.d.ts","sourceRoot":"","sources":["../../../src/core/FieldGroup/FieldGroupList.mocks.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAa,uBAAuB,EAAS,MAAM,yBAAyB,CAAC;AAEpF,aAAK,wBAAwB,GACzB;IACE,MAAM,EAAE,KAAK,CAAC;CACf,GACD;IACE,MAAM,EAAE,QAAQ,CAAC;IACjB,EAAE,EAAE,MAAM,CAAC;CACZ,CAAC;AAEN,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,QAAQ,GAAG,UAAU,CAAC;CACxD;AAED,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,SAAS,EAAE,CAAC;CACrB;AAED,eAAO,MAAM,iBAAiB,cAChB,SAAS,yBAAyB,SAAS,KAAK,WAAW,GAAG,IAAI,aAErE,uBAAuB,EAAE,WACvB,wBAAwB,KAChC,uBAAuB,EAoBzB,CAAC;AAEJ,eAAO,MAAM,iBAAiB,oBAAqB,SAAS,uBAM3D,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,SAQ3B,CAAC"}

package/lib/core/FieldGroup/FieldGroupList.mocks.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
+import { createUID, Input } from '@pega/cosmos-react-core';
+export const fieldGroupReducer = (groupMeta, FieldRenderer) => (items, payload) => {
+    switch (payload.action) {
+        case 'add':
+            return [
+                ...items,
+                {
+                    name: `${groupMeta.label} ${items.length + 1}`,
+                    id: createUID(),
+                    children: groupMeta.fields.map(props => _createElement(FieldRenderer, { ...props, key: props.label }))
+                }
+            ];
+        case 'delete':
+            return items
+                .filter(group => group.id !== payload.id)
+                .map((group, i) => ({ ...group, name: `${groupMeta.label} ${i + 1}` }));
+        default:
+            return items;
+    }
+};
+export const DemoFieldRenderer = ({ label, type }) => {
+    if (type === 'text') {
+        return _jsx(Input, { label: label }, void 0);
+    }
+    return null;
+};
+export const demoGroupMeta = {
+    label: 'Applicant',
+    fields: [
+        {
+            type: 'text',
+            label: 'Applicant name'
+        }
+    ]
+};
+//# sourceMappingURL=FieldGroupList.mocks.js.map

package/lib/core/FieldGroup/FieldGroupList.mocks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldGroupList.mocks.js","sourceRoot":"","sources":["../../../src/core/FieldGroup/FieldGroupList.mocks.tsx"],"names":[],"mappings":";;AAAA,OAAO,EAAE,SAAS,EAA2B,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAqBpF,MAAM,CAAC,MAAM,iBAAiB,GAC5B,CAAC,SAAoB,EAAE,aAAuD,EAAE,EAAE,CAClF,CACE,KAAgC,EAChC,OAAiC,EACN,EAAE;IAC7B,QAAQ,OAAO,CAAC,MAAM,EAAE;QACtB,KAAK,KAAK;YACR,OAAO;gBACL,GAAG,KAAK;gBACR;oBACE,IAAI,EAAE,GAAG,SAAS,CAAC,KAAK,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE;oBAC9C,EAAE,EAAE,SAAS,EAAE;oBACf,QAAQ,EAAE,SAAS,CAAC,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,eAAC,aAAa,OAAK,KAAK,EAAE,GAAG,EAAE,KAAK,CAAC,KAAK,GAAI,CAAC;iBACxF;aACF,CAAC;QAEJ,KAAK,QAAQ;YACX,OAAO,KAAK;iBACT,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,KAAK,OAAO,CAAC,EAAE,CAAC;iBACxC,GAAG,CAAC,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,EAAE,IAAI,EAAE,GAAG,SAAS,CAAC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC;QAE5E;YACE,OAAO,KAAK,CAAC;KAChB;AACH,CAAC,CAAC;AAEJ,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,EAAE,KAAK,EAAE,IAAI,EAAa,EAAE,EAAE;IAC9D,IAAI,IAAI,KAAK,MAAM,EAAE;QACnB,OAAO,KAAC,KAAK,IAAC,KAAK,EAAE,KAAK,WAAI,CAAC;KAChC;IAED,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAc;IACtC,KAAK,EAAE,WAAW;IAClB,MAAM,EAAE;QACN;YACE,IAAI,EAAE,MAAM;YACZ,KAAK,EAAE,gBAAgB;SACxB;KACF;CACF,CAAC","sourcesContent":["import { createUID, FieldGroupListItemProps, Input } from '@pega/cosmos-react-core';\n\ntype FieldGroupReducerPayload =\n  | {\n      action: 'add';\n    }\n  | {\n      action: 'delete';\n      id: string;\n    };\n\nexport interface FieldMeta {\n  label: string;\n  type: 'text' | 'date' | 'file' | 'select' | 'textarea';\n}\n\nexport interface GroupMeta {\n  label: string;\n  fields: FieldMeta[];\n}\n\nexport const fieldGroupReducer =\n  (groupMeta: GroupMeta, FieldRenderer: (props: FieldMeta) => JSX.Element | null) =>\n  (\n    items: FieldGroupListItemProps[],\n    payload: FieldGroupReducerPayload\n  ): FieldGroupListItemProps[] => {\n    switch (payload.action) {\n      case 'add':\n        return [\n          ...items,\n          {\n            name: `${groupMeta.label} ${items.length + 1}`,\n            id: createUID(),\n            children: groupMeta.fields.map(props => <FieldRenderer {...props} key={props.label} />)\n          }\n        ];\n\n      case 'delete':\n        return items\n          .filter(group => group.id !== payload.id)\n          .map((group, i) => ({ ...group, name: `${groupMeta.label} ${i + 1}` }));\n\n      default:\n        return items;\n    }\n  };\n\nexport const DemoFieldRenderer = ({ label, type }: FieldMeta) => {\n  if (type === 'text') {\n    return <Input label={label} />;\n  }\n\n  return null;\n};\n\nexport const demoGroupMeta: GroupMeta = {\n  label: 'Applicant',\n  fields: [\n    {\n      type: 'text',\n      label: 'Applicant name'\n    }\n  ]\n};\n"]}

package/lib/core/FieldGroup/FieldGroupList.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FieldGroupList.stories.d.ts","sourceRoot":"","sources":["../../../src/core/FieldGroup/FieldGroupList.stories.tsx"],"names":[],"mappings":";;;;;AAkBA,wBAGE;AA+FF,eAAO,MAAM,YAAY,mBAiDxB,CAAC;AAiCF,eAAO,MAAM,aAAa,mBAkDzB,CAAC;AAoBF,eAAO,MAAM,kBAAkB,mBAwB9B,CAAC"}
+{"version":3,"file":"FieldGroupList.stories.d.ts","sourceRoot":"","sources":["../../../src/core/FieldGroup/FieldGroupList.stories.tsx"],"names":[],"mappings":";;;;;AAyBA,wBAGE;AAiDF,eAAO,MAAM,YAAY,mBAiDxB,CAAC;AAiCF,eAAO,MAAM,aAAa,mBAkDzB,CAAC;AAEF,eAAO,MAAM,kBAAkB,mBAwB9B,CAAC"}

package/lib/core/FieldGroup/FieldGroupList.stories.js

@@ -1,31 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { createElement as _createElement } from "react";
 import { useReducer } from 'react';
 import { action } from '@storybook/addon-actions';
 import { Button, createUID, DateInput, FieldGroupList, FileInput, Form, Input, Select, Option, Text, TextArea } from '@pega/cosmos-react-core';
+import { DemoFieldRenderer, demoGroupMeta, fieldGroupReducer } from './FieldGroupList.mocks';
 export default {
     title: 'Core/FieldGroupList',
     component: FieldGroupList
 };
-const fieldGroupReducer = (groupMeta, FieldRenderer) => (items, payload) => {
-    switch (payload.action) {
-        case 'add':
-            return [
-                ...items,
-                {
-                    name: `${groupMeta.label} ${items.length + 1}`,
-                    id: createUID(),
-                    children: groupMeta.fields.map(props => _createElement(FieldRenderer, { ...props, key: props.label }))
-                }
-            ];
-        case 'delete':
-            return items
-                .filter(group => group.id !== payload.id)
-                .map((group, i) => ({ ...group, name: `${groupMeta.label} ${i + 1}` }));
-        default:
-            return items;
-    }
-};
 const ExpensesFieldRenderer = ({ label, type }) => {
     if (type === 'text') {
         return _jsx(Input, { label: label }, void 0);
@@ -108,21 +89,6 @@ export const InsuranceDemo = () => {
                     dispatch({ action: 'delete', id });
                 } }, void 0)] }, void 0));
 };
-const DemoFieldRenderer = ({ label, type }) => {
-    if (type === 'text') {
-        return _jsx(Input, { label: label }, void 0);
-    }
-    return null;
-};
-const demoGroupMeta = {
-    label: 'Applicant',
-    fields: [
-        {
-            type: 'text',
-            label: 'Applicant name'
-        }
-    ]
-};
 export const FieldGroupListDemo = () => {
     const [state, dispatch] = useReducer(fieldGroupReducer(demoGroupMeta, DemoFieldRenderer), undefined, () => [
         {

package/lib/core/FieldGroup/FieldGroupList.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"FieldGroupList.stories.js","sourceRoot":"","sources":["../../../src/core/FieldGroup/FieldGroupList.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useReducer, MouseEvent, FormEvent } from 'react';\nimport { action } from '@storybook/addon-actions';\n\nimport {\n  Button,\n  createUID,\n  DateInput,\n  FieldGroupList,\n  FieldGroupListItemProps,\n  FileInput,\n  Form,\n  Input,\n  Select,\n  Option,\n  Text,\n  TextArea\n} from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/FieldGroupList',\n  component: FieldGroupList\n};\n\ntype FieldGroupReducerPayload =\n  | {\n      action: 'add';\n    }\n  | {\n      action: 'delete';\n      id: string;\n    };\n\ninterface FieldMeta {\n  label: string;\n  type: 'text' | 'date' | 'file' | 'select' | 'textarea';\n}\n\ninterface GroupMeta {\n  label: string;\n  fields: FieldMeta[];\n}\n\nconst fieldGroupReducer =\n  (groupMeta: GroupMeta, FieldRenderer: (props: FieldMeta) => JSX.Element | null) =>\n  (\n    items: FieldGroupListItemProps[],\n    payload: FieldGroupReducerPayload\n  ): FieldGroupListItemProps[] => {\n    switch (payload.action) {\n      case 'add':\n        return [\n          ...items,\n          {\n            name: `${groupMeta.label} ${items.length + 1}`,\n            id: createUID(),\n            children: groupMeta.fields.map(props => <FieldRenderer {...props} key={props.label} />)\n          }\n        ];\n\n      case 'delete':\n        return items\n          .filter(group => group.id !== payload.id)\n          .map((group, i) => ({ ...group, name: `${groupMeta.label} ${i + 1}` }));\n\n      default:\n        return items;\n    }\n  };\n\nconst ExpensesFieldRenderer = ({ label, type }: FieldMeta) => {\n  if (type === 'text') {\n    return <Input label={label} />;\n  }\n  if (type === 'select') {\n    return (\n      <Select label={label}>\n        <Option>Select</Option>\n        <Option>Advertising</Option>\n        <Option>Car and truck expenses</Option>\n        <Option>Commissions and fees</Option>\n        <Option>Contract labor</Option>\n        <Option>Legal and professional services</Option>\n        <Option>Office expense</Option>\n        <Option>Rent or lease</Option>\n        <Option>Vehicles, machinery, and equipment</Option>\n        <Option>Repairs and maintenance</Option>\n        <Option>Travel and meals</Option>\n        <Option>Deductible meals</Option>\n        <Option>Utilities</Option>\n        <Option>Other</Option>\n      </Select>\n    );\n  }\n  if (type === 'file') {\n    return <FileInput label={label} multiple />;\n  }\n  if (type === 'textarea') {\n    return <TextArea label={label} />;\n  }\n  if (type === 'date') {\n    return <DateInput label={label} />;\n  }\n\n  return null;\n};\n\nconst expensesGroupMeta: GroupMeta = {\n  label: 'Expense',\n  fields: [\n    { type: 'select', label: 'Type of expense' },\n    { type: 'date', label: 'Date of expense' },\n    { type: 'file', label: 'Receipts' },\n    { type: 'textarea', label: 'Notes' }\n  ]\n};\n\nexport const ExpensesDemo = () => {\n  const [state, dispatch] = useReducer(\n    fieldGroupReducer(expensesGroupMeta, ExpensesFieldRenderer),\n    undefined,\n    () => [\n      {\n        name: `${expensesGroupMeta.label} 1`,\n        id: createUID(),\n        children: expensesGroupMeta.fields.map(ExpensesFieldRenderer)\n      }\n    ]\n  );\n\n  return (\n    <Form\n      actions={\n        <>\n          <Button\n            name='Cancel'\n            variant='secondary'\n            onClick={(e: MouseEvent<HTMLButtonElement>) => {\n              action('Click')(`${e.currentTarget.name}:${e.type}`);\n            }}\n          >\n            Cancel\n          </Button>\n          <Button name='Submit' type='submit' variant='primary'>\n            Submit\n          </Button>\n        </>\n      }\n      onSubmit={(e: FormEvent) => {\n        e.preventDefault();\n        action('Submit')(`Form:${e.type}`);\n      }}\n      style={{ margin: 'auto', maxWidth: '37.5rem' }}\n    >\n      <Text variant='h2'>Expense report</Text>\n      <FieldGroupList\n        items={state}\n        onAdd={() => {\n          dispatch({ action: 'add' });\n        }}\n        onDelete={id => {\n          dispatch({ action: 'delete', id });\n        }}\n      />\n    </Form>\n  );\n};\n\nconst InsuranceFieldRenderer = ({ label, type }: FieldMeta) => {\n  if (type === 'text') {\n    return <Input label={label} />;\n  }\n  if (type === 'select') {\n    return (\n      <Select label={label}>\n        <Option>Select</Option>\n        <Option>Mother</Option>\n        <Option>Father</Option>\n        <Option>Guardian</Option>\n        <Option>Child</Option>\n        <Option>Spouse</Option>\n        <Option>Sibling</Option>\n        <Option>Other</Option>\n      </Select>\n    );\n  }\n\n  return null;\n};\n\nconst insuranceGroupMeta: GroupMeta = {\n  label: 'Entry',\n  fields: [\n    { type: 'text', label: 'First name' },\n    { type: 'text', label: 'Last name' },\n    { type: 'select', label: 'Relationship' }\n  ]\n};\n\nexport const InsuranceDemo = () => {\n  const [state, dispatch] = useReducer(\n    fieldGroupReducer(insuranceGroupMeta, InsuranceFieldRenderer),\n    undefined,\n    () => [\n      {\n        name: `${insuranceGroupMeta.label} 1`,\n        id: createUID(),\n        children: insuranceGroupMeta.fields.map(InsuranceFieldRenderer)\n      }\n    ]\n  );\n\n  return (\n    <Form\n      actions={\n        <>\n          <Button\n            name='Cancel'\n            variant='secondary'\n            onClick={(e: MouseEvent<HTMLButtonElement>) => {\n              action('Click')(`${e.currentTarget.name}:${e.type}`);\n            }}\n          >\n            Cancel\n          </Button>\n          <Button name='Submit' type='submit' variant='primary'>\n            Submit\n          </Button>\n        </>\n      }\n      onSubmit={(e: FormEvent) => {\n        e.preventDefault();\n        action('Submit')(`Form:${e.type}`);\n      }}\n      style={{ margin: 'auto', maxWidth: '37.5rem' }}\n    >\n      <Text variant='h1'>Insurance step 1</Text>\n      <Text variant='h2'>Dependants</Text>\n      <FieldGroupList\n        items={state}\n        onAdd={() => {\n          dispatch({ action: 'add' });\n        }}\n        onDelete={id => {\n          dispatch({ action: 'delete', id });\n        }}\n      />\n    </Form>\n  );\n};\n\nconst DemoFieldRenderer = ({ label, type }: FieldMeta) => {\n  if (type === 'text') {\n    return <Input label={label} />;\n  }\n\n  return null;\n};\n\nconst demoGroupMeta: GroupMeta = {\n  label: 'Applicant',\n  fields: [\n    {\n      type: 'text',\n      label: 'Applicant name'\n    }\n  ]\n};\n\nexport const FieldGroupListDemo = () => {\n  const [state, dispatch] = useReducer(\n    fieldGroupReducer(demoGroupMeta, DemoFieldRenderer),\n    undefined,\n    () => [\n      {\n        name: `${demoGroupMeta.label} 1`,\n        id: createUID(),\n        children: demoGroupMeta.fields.map(DemoFieldRenderer)\n      }\n    ]\n  );\n\n  return (\n    <FieldGroupList\n      items={state}\n      onAdd={() => {\n        dispatch({ action: 'add' });\n      }}\n      onDelete={id => {\n        dispatch({ action: 'delete', id });\n      }}\n    />\n  );\n};\n"]}
+{"version":3,"file":"FieldGroupList.stories.js","sourceRoot":"","sources":["../../../src/core/FieldGroup/FieldGroupList.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useReducer, MouseEvent, FormEvent } from 'react';\nimport { action } from '@storybook/addon-actions';\n\nimport {\n  Button,\n  createUID,\n  DateInput,\n  FieldGroupList,\n  FileInput,\n  Form,\n  Input,\n  Select,\n  Option,\n  Text,\n  TextArea\n} from '@pega/cosmos-react-core';\n\nimport {\n  DemoFieldRenderer,\n  demoGroupMeta,\n  fieldGroupReducer,\n  FieldMeta,\n  GroupMeta\n} from './FieldGroupList.mocks';\n\nexport default {\n  title: 'Core/FieldGroupList',\n  component: FieldGroupList\n};\n\nconst ExpensesFieldRenderer = ({ label, type }: FieldMeta) => {\n  if (type === 'text') {\n    return <Input label={label} />;\n  }\n  if (type === 'select') {\n    return (\n      <Select label={label}>\n        <Option>Select</Option>\n        <Option>Advertising</Option>\n        <Option>Car and truck expenses</Option>\n        <Option>Commissions and fees</Option>\n        <Option>Contract labor</Option>\n        <Option>Legal and professional services</Option>\n        <Option>Office expense</Option>\n        <Option>Rent or lease</Option>\n        <Option>Vehicles, machinery, and equipment</Option>\n        <Option>Repairs and maintenance</Option>\n        <Option>Travel and meals</Option>\n        <Option>Deductible meals</Option>\n        <Option>Utilities</Option>\n        <Option>Other</Option>\n      </Select>\n    );\n  }\n  if (type === 'file') {\n    return <FileInput label={label} multiple />;\n  }\n  if (type === 'textarea') {\n    return <TextArea label={label} />;\n  }\n  if (type === 'date') {\n    return <DateInput label={label} />;\n  }\n\n  return null;\n};\n\nconst expensesGroupMeta: GroupMeta = {\n  label: 'Expense',\n  fields: [\n    { type: 'select', label: 'Type of expense' },\n    { type: 'date', label: 'Date of expense' },\n    { type: 'file', label: 'Receipts' },\n    { type: 'textarea', label: 'Notes' }\n  ]\n};\n\nexport const ExpensesDemo = () => {\n  const [state, dispatch] = useReducer(\n    fieldGroupReducer(expensesGroupMeta, ExpensesFieldRenderer),\n    undefined,\n    () => [\n      {\n        name: `${expensesGroupMeta.label} 1`,\n        id: createUID(),\n        children: expensesGroupMeta.fields.map(ExpensesFieldRenderer)\n      }\n    ]\n  );\n\n  return (\n    <Form\n      actions={\n        <>\n          <Button\n            name='Cancel'\n            variant='secondary'\n            onClick={(e: MouseEvent<HTMLButtonElement>) => {\n              action('Click')(`${e.currentTarget.name}:${e.type}`);\n            }}\n          >\n            Cancel\n          </Button>\n          <Button name='Submit' type='submit' variant='primary'>\n            Submit\n          </Button>\n        </>\n      }\n      onSubmit={(e: FormEvent) => {\n        e.preventDefault();\n        action('Submit')(`Form:${e.type}`);\n      }}\n      style={{ margin: 'auto', maxWidth: '37.5rem' }}\n    >\n      <Text variant='h2'>Expense report</Text>\n      <FieldGroupList\n        items={state}\n        onAdd={() => {\n          dispatch({ action: 'add' });\n        }}\n        onDelete={id => {\n          dispatch({ action: 'delete', id });\n        }}\n      />\n    </Form>\n  );\n};\n\nconst InsuranceFieldRenderer = ({ label, type }: FieldMeta) => {\n  if (type === 'text') {\n    return <Input label={label} />;\n  }\n  if (type === 'select') {\n    return (\n      <Select label={label}>\n        <Option>Select</Option>\n        <Option>Mother</Option>\n        <Option>Father</Option>\n        <Option>Guardian</Option>\n        <Option>Child</Option>\n        <Option>Spouse</Option>\n        <Option>Sibling</Option>\n        <Option>Other</Option>\n      </Select>\n    );\n  }\n\n  return null;\n};\n\nconst insuranceGroupMeta: GroupMeta = {\n  label: 'Entry',\n  fields: [\n    { type: 'text', label: 'First name' },\n    { type: 'text', label: 'Last name' },\n    { type: 'select', label: 'Relationship' }\n  ]\n};\n\nexport const InsuranceDemo = () => {\n  const [state, dispatch] = useReducer(\n    fieldGroupReducer(insuranceGroupMeta, InsuranceFieldRenderer),\n    undefined,\n    () => [\n      {\n        name: `${insuranceGroupMeta.label} 1`,\n        id: createUID(),\n        children: insuranceGroupMeta.fields.map(InsuranceFieldRenderer)\n      }\n    ]\n  );\n\n  return (\n    <Form\n      actions={\n        <>\n          <Button\n            name='Cancel'\n            variant='secondary'\n            onClick={(e: MouseEvent<HTMLButtonElement>) => {\n              action('Click')(`${e.currentTarget.name}:${e.type}`);\n            }}\n          >\n            Cancel\n          </Button>\n          <Button name='Submit' type='submit' variant='primary'>\n            Submit\n          </Button>\n        </>\n      }\n      onSubmit={(e: FormEvent) => {\n        e.preventDefault();\n        action('Submit')(`Form:${e.type}`);\n      }}\n      style={{ margin: 'auto', maxWidth: '37.5rem' }}\n    >\n      <Text variant='h1'>Insurance step 1</Text>\n      <Text variant='h2'>Dependants</Text>\n      <FieldGroupList\n        items={state}\n        onAdd={() => {\n          dispatch({ action: 'add' });\n        }}\n        onDelete={id => {\n          dispatch({ action: 'delete', id });\n        }}\n      />\n    </Form>\n  );\n};\n\nexport const FieldGroupListDemo = () => {\n  const [state, dispatch] = useReducer(\n    fieldGroupReducer(demoGroupMeta, DemoFieldRenderer),\n    undefined,\n    () => [\n      {\n        name: `${demoGroupMeta.label} 1`,\n        id: createUID(),\n        children: demoGroupMeta.fields.map(DemoFieldRenderer)\n      }\n    ]\n  );\n\n  return (\n    <FieldGroupList\n      items={state}\n      onAdd={() => {\n        dispatch({ action: 'add' });\n      }}\n      onDelete={id => {\n        dispatch({ action: 'delete', id });\n      }}\n    />\n  );\n};\n"]}

package/lib/core/File/FileDisplay.stories.d.ts

@@ -1,5 +1,5 @@
 import { Meta, Story } from '@storybook/react';
-import { FileDisplayProps } from '@pega/cosmos-react-core';
+import { FileDisplayProps, FileUploadItemProps } from '@pega/cosmos-react-core';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
 interface FileDisplayDemoProps {
@@ -10,4 +10,11 @@ interface FileDisplayDemoProps {
 }
 export declare const FileDisplayTypes: Story<FileDisplayDemoProps>;
 export declare const FileDisplayDemo: Story<FileDisplayProps & FileDisplayDemoProps>;
+interface FileUploadItemDemoProps extends FileDisplayDemoProps {
+    name: FileUploadItemProps['name'];
+    meta?: FileUploadItemProps['meta'];
+    error?: FileUploadItemProps['error'];
+    progress?: FileUploadItemProps['progress'];
+}
+export declare const FileUploadItemDemo: Story<FileUploadItemDemoProps>;
 //# sourceMappingURL=FileDisplay.stories.d.ts.map

package/lib/core/File/FileDisplay.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FileDisplay.stories.d.ts","sourceRoot":"","sources":["../../../src/core/File/FileDisplay.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAEL,gBAAgB,EAQjB,MAAM,yBAAyB,CAAC;;AAEjC,wBAaU;AAEV,UAAU,oBAAoB;IAC5B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,oBAAoB,CAmGxD,CAAC;AAUF,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,gBAAgB,GAAG,oBAAoB,CAsC1E,CAAC"}
+{"version":3,"file":"FileDisplay.stories.d.ts","sourceRoot":"","sources":["../../../src/core/File/FileDisplay.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAEL,gBAAgB,EAQhB,mBAAmB,EAEpB,MAAM,yBAAyB,CAAC;;AAEjC,wBAaU;AAEV,UAAU,oBAAoB;IAC5B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,oBAAoB,CAmGxD,CAAC;AAUF,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,gBAAgB,GAAG,oBAAoB,CAsC1E,CAAC;AAYF,UAAU,uBAAwB,SAAQ,oBAAoB;IAC5D,IAAI,EAAE,mBAAmB,CAAC,MAAM,CAAC,CAAC;IAClC,IAAI,CAAC,EAAE,mBAAmB,CAAC,MAAM,CAAC,CAAC;IACnC,KAAK,CAAC,EAAE,mBAAmB,CAAC,OAAO,CAAC,CAAC;IACrC,QAAQ,CAAC,EAAE,mBAAmB,CAAC,UAAU,CAAC,CAAC;CAC5C;AAED,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,uBAAuB,CAwC7D,CAAC"}

package/lib/core/File/FileDisplay.stories.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useContext, useState } from 'react';
-import { FileDisplay, FieldValueList, Image, Popover, ToasterContext, useElement, useOuterEvent } from '@pega/cosmos-react-core';
+import { FileDisplay, FieldValueList, Image, Popover, ToasterContext, useElement, useOuterEvent, FileUploadItem } from '@pega/cosmos-react-core';
 export default {
     title: 'Core/File/Display',
     component: FileDisplay,
@@ -83,7 +83,7 @@ export const FileDisplayDemo = (args) => {
             element.click();
         }
         : undefined;
-    return (_jsxs(_Fragment, { children: [_jsx(FileDisplay, { ref: setButtonEl, variant: args.variant, displayText: args.displayText, value: args.withValue ? imageSrc : undefined, onPreview: handlePreview, onDownload: handleDownload }, void 0), _jsx(Popover, { ref: setPopoverEl, show: showPreview, target: buttonEl, strategy: 'fixed', children: _jsx(Image, { src: imageSrc, alt: args.displayText || 'Pega World iNspire' }, void 0) }, void 0)] }, void 0));
+    return (_jsxs(_Fragment, { children: [_jsx(FileDisplay, { ref: setButtonEl, variant: args.variant, displayText: args.displayText, value: args.withValue ? imageSrc : undefined, onPreview: handlePreview, onDownload: handleDownload }, void 0), _jsx(Popover, { ref: setPopoverEl, show: showPreview, target: buttonEl, children: _jsx(Image, { src: imageSrc, alt: args.displayText || 'Pega World iNspire' }, void 0) }, void 0)] }, void 0));
 };
 FileDisplayDemo.args = {
     variant: 'file',
@@ -93,4 +93,34 @@ FileDisplayDemo.argTypes = {
     variant: { options: ['file', 'text', 'link'], control: { type: 'radio' } },
     displayText: { control: { type: 'text' } }
 };
+export const FileUploadItemDemo = (args) => {
+    const [fileEl, setFileEl] = useElement();
+    const [popoverEl, setPopoverEl] = useElement();
+    const [showPreview, setShowPreview] = useState(false);
+    useOuterEvent('click', [fileEl, popoverEl], () => setShowPreview(false));
+    const imageSrc = 'https://www.pega.com/sites/default/files/styles/480/public/media/images/2021-02/pwi-2021-prevcard.jpg';
+    const handlePreview = args.withPreview ? () => setShowPreview(true) : undefined;
+    const handleDownload = args.withDownload
+        ? () => {
+            const element = document.createElement('a');
+            element.href = imageSrc;
+            element.download = 'cosmos_file_display_download.jpg';
+            element.click();
+        }
+        : undefined;
+    return (_jsxs(_Fragment, { children: [_jsx(FileUploadItem, { ref: setFileEl, name: args.name, meta: args.meta, error: args.error, progress: args.progress, thumbnail: imageSrc, onPreview: handlePreview, onDownload: handleDownload }, void 0), _jsx(Popover, { ref: setPopoverEl, show: showPreview, target: fileEl, strategy: 'fixed', children: _jsx(Image, { src: imageSrc, alt: args.name }, void 0) }, void 0)] }, void 0));
+};
+FileUploadItemDemo.args = {
+    name: 'Pega World iNspire',
+    meta: 'Some additional information',
+    error: false,
+    progress: 100
+};
+FileUploadItemDemo.argTypes = {
+    withValue: { table: { disable: true } },
+    name: { control: { type: 'text' } },
+    meta: { control: { type: 'text' } },
+    error: { control: { type: 'boolean' } },
+    progress: { control: { type: 'number' } }
+};
 //# sourceMappingURL=FileDisplay.stories.js.map

package/lib/core/File/FileDisplay.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileDisplay.stories.js","sourceRoot":"","sources":["../../../src/core/File/FileDisplay.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useContext, useState } from 'react';\n\nimport {\n  FileDisplay,\n  FileDisplayProps,\n  FileItemProps,\n  FieldValueList,\n  Image,\n  Popover,\n  ToasterContext,\n  useElement,\n  useOuterEvent\n} from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/File/Display',\n  component: FileDisplay,\n  args: {\n    withValue: true,\n    withPreview: true,\n    withDownload: true\n  },\n  argTypes: {\n    withValue: { control: { type: 'boolean' } },\n    withPreview: { control: { type: 'boolean' } },\n    withDownload: { control: { type: 'boolean' } }\n  }\n} as Meta;\n\ninterface FileDisplayDemoProps {\n  withDisplayText?: boolean;\n  withValue?: boolean;\n  withPreview?: boolean;\n  withDownload?: boolean;\n}\n\nexport const FileDisplayTypes: Story<FileDisplayDemoProps> = (args: FileDisplayDemoProps) => {\n  const { push } = useContext(ToasterContext);\n\n  const handlePreview = args.withPreview\n    ? (url: FileItemProps['url']) => push({ content: `Previewed ${url}` })\n    : undefined;\n\n  const handleDownload = args.withDownload\n    ? (url: FileItemProps['url']) => push({ content: `Downloaded ${url}` })\n    : undefined;\n\n  const fields = [\n    {\n      id: '1',\n      name: 'Image file',\n      value: (\n        <FileDisplay\n          displayText={args.withDisplayText ? 'image.jpg' : undefined}\n          value={args.withValue ? 'https://pbs.twimg.com/media/ENNN5PAXkAE-hag.jpg' : undefined}\n          onPreview={handlePreview}\n          onDownload={handleDownload}\n        />\n      )\n    },\n    {\n      id: '2',\n      name: 'Video file',\n      value: (\n        <FileDisplay\n          displayText={args.withDisplayText ? 'video.avi' : undefined}\n          value={args.withValue ? 'https://pega.com/media/some-video.avi' : undefined}\n          onPreview={handlePreview}\n          onDownload={handleDownload}\n        />\n      )\n    },\n    {\n      id: '3',\n      name: 'Audio file',\n      value: (\n        <FileDisplay\n          displayText={args.withDisplayText ? 'recording.mp3' : undefined}\n          value={args.withValue ? 'https://pega.com/media/sprint-review-recording.mp3' : undefined}\n          onPreview={handlePreview}\n          onDownload={handleDownload}\n        />\n      )\n    },\n    {\n      id: '4',\n      name: 'Document file',\n      value: (\n        <FileDisplay\n          displayText={args.withDisplayText ? 'document.doc' : undefined}\n          value={args.withValue ? 'https://pega.com/media/document.doc' : undefined}\n          onPreview={handlePreview}\n          onDownload={handleDownload}\n        />\n      )\n    },\n    {\n      id: '5',\n      name: 'PDF file',\n      value: (\n        <FileDisplay\n          displayText={args.withDisplayText ? 'invoice.pdf' : undefined}\n          value={args.withValue ? 'https://pega.com/media/invoice.pdf' : undefined}\n          onPreview={handlePreview}\n          onDownload={handleDownload}\n        />\n      )\n    },\n    {\n      id: '6',\n      name: 'Presentation file',\n      value: (\n        <FileDisplay\n          displayText={args.withDisplayText ? 'review.pps' : undefined}\n          value={args.withValue ? 'https://pega.com/media/review.pps' : undefined}\n          onPreview={handlePreview}\n          onDownload={handleDownload}\n        />\n      )\n    },\n    {\n      id: '7',\n      name: 'Spreadsheet file',\n      value: (\n        <FileDisplay\n          displayText={args.withDisplayText ? 'welfare.xlsx' : undefined}\n          value={args.withValue ? 'https://pega.com/media/welfare.xlsx' : undefined}\n          onPreview={handlePreview}\n          onDownload={handleDownload}\n        />\n      )\n    }\n  ];\n\n  return <FieldValueList fields={fields} />;\n};\n\nFileDisplayTypes.args = {\n  withDisplayText: true\n};\n\nFileDisplayTypes.argTypes = {\n  withDisplayText: { control: { type: 'boolean' } }\n};\n\nexport const FileDisplayDemo: Story<FileDisplayProps & FileDisplayDemoProps> = (\n  args: FileDisplayProps & FileDisplayDemoProps\n) => {\n  const [buttonEl, setButtonEl] = useElement();\n  const [popoverEl, setPopoverEl] = useElement();\n  const [showPreview, setShowPreview] = useState(false);\n\n  useOuterEvent('click', [buttonEl, popoverEl], () => setShowPreview(false));\n\n  const imageSrc =\n    'https://www.pega.com/sites/default/files/styles/480/public/media/images/2021-02/pwi-2021-prevcard.jpg';\n\n  const handlePreview = args.withPreview ? () => setShowPreview(true) : undefined;\n\n  const handleDownload = args.withDownload\n    ? () => {\n        const element = document.createElement('a');\n        element.href = imageSrc;\n        element.download = 'cosmos_file_display_download.jpg';\n        element.click();\n      }\n    : undefined;\n\n  return (\n    <>\n      <FileDisplay\n        ref={setButtonEl}\n        variant={args.variant}\n        displayText={args.displayText}\n        value={args.withValue ? imageSrc : undefined}\n        onPreview={handlePreview}\n        onDownload={handleDownload}\n      />\n      <Popover ref={setPopoverEl} show={showPreview} target={buttonEl} strategy='fixed'>\n        <Image src={imageSrc} alt={args.displayText || 'Pega World iNspire'} />\n      </Popover>\n    </>\n  );\n};\n\nFileDisplayDemo.args = {\n  variant: 'file',\n  displayText: 'Pega World iNspire'\n};\n\nFileDisplayDemo.argTypes = {\n  variant: { options: ['file', 'text', 'link'], control: { type: 'radio' } },\n  displayText: { control: { type: 'text' } }\n};\n"]}
+{"version":3,"file":"FileDisplay.stories.js","sourceRoot":"","sources":["../../../src/core/File/FileDisplay.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useContext, useState } from 'react';\n\nimport {\n  FileDisplay,\n  FileDisplayProps,\n  FileItemProps,\n  FieldValueList,\n  Image,\n  Popover,\n  ToasterContext,\n  useElement,\n  useOuterEvent,\n  FileUploadItemProps,\n  FileUploadItem\n} from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/File/Display',\n  component: FileDisplay,\n  args: {\n    withValue: true,\n    withPreview: true,\n    withDownload: true\n  },\n  argTypes: {\n    withValue: { control: { type: 'boolean' } },\n    withPreview: { control: { type: 'boolean' } },\n    withDownload: { control: { type: 'boolean' } }\n  }\n} as Meta;\n\ninterface FileDisplayDemoProps {\n  withDisplayText?: boolean;\n  withValue?: boolean;\n  withPreview?: boolean;\n  withDownload?: boolean;\n}\n\nexport const FileDisplayTypes: Story<FileDisplayDemoProps> = (args: FileDisplayDemoProps) => {\n  const { push } = useContext(ToasterContext);\n\n  const handlePreview = args.withPreview\n    ? (url: FileItemProps['url']) => push({ content: `Previewed ${url}` })\n    : undefined;\n\n  const handleDownload = args.withDownload\n    ? (url: FileItemProps['url']) => push({ content: `Downloaded ${url}` })\n    : undefined;\n\n  const fields = [\n    {\n      id: '1',\n      name: 'Image file',\n      value: (\n        <FileDisplay\n          displayText={args.withDisplayText ? 'image.jpg' : undefined}\n          value={args.withValue ? 'https://pbs.twimg.com/media/ENNN5PAXkAE-hag.jpg' : undefined}\n          onPreview={handlePreview}\n          onDownload={handleDownload}\n        />\n      )\n    },\n    {\n      id: '2',\n      name: 'Video file',\n      value: (\n        <FileDisplay\n          displayText={args.withDisplayText ? 'video.avi' : undefined}\n          value={args.withValue ? 'https://pega.com/media/some-video.avi' : undefined}\n          onPreview={handlePreview}\n          onDownload={handleDownload}\n        />\n      )\n    },\n    {\n      id: '3',\n      name: 'Audio file',\n      value: (\n        <FileDisplay\n          displayText={args.withDisplayText ? 'recording.mp3' : undefined}\n          value={args.withValue ? 'https://pega.com/media/sprint-review-recording.mp3' : undefined}\n          onPreview={handlePreview}\n          onDownload={handleDownload}\n        />\n      )\n    },\n    {\n      id: '4',\n      name: 'Document file',\n      value: (\n        <FileDisplay\n          displayText={args.withDisplayText ? 'document.doc' : undefined}\n          value={args.withValue ? 'https://pega.com/media/document.doc' : undefined}\n          onPreview={handlePreview}\n          onDownload={handleDownload}\n        />\n      )\n    },\n    {\n      id: '5',\n      name: 'PDF file',\n      value: (\n        <FileDisplay\n          displayText={args.withDisplayText ? 'invoice.pdf' : undefined}\n          value={args.withValue ? 'https://pega.com/media/invoice.pdf' : undefined}\n          onPreview={handlePreview}\n          onDownload={handleDownload}\n        />\n      )\n    },\n    {\n      id: '6',\n      name: 'Presentation file',\n      value: (\n        <FileDisplay\n          displayText={args.withDisplayText ? 'review.pps' : undefined}\n          value={args.withValue ? 'https://pega.com/media/review.pps' : undefined}\n          onPreview={handlePreview}\n          onDownload={handleDownload}\n        />\n      )\n    },\n    {\n      id: '7',\n      name: 'Spreadsheet file',\n      value: (\n        <FileDisplay\n          displayText={args.withDisplayText ? 'welfare.xlsx' : undefined}\n          value={args.withValue ? 'https://pega.com/media/welfare.xlsx' : undefined}\n          onPreview={handlePreview}\n          onDownload={handleDownload}\n        />\n      )\n    }\n  ];\n\n  return <FieldValueList fields={fields} />;\n};\n\nFileDisplayTypes.args = {\n  withDisplayText: true\n};\n\nFileDisplayTypes.argTypes = {\n  withDisplayText: { control: { type: 'boolean' } }\n};\n\nexport const FileDisplayDemo: Story<FileDisplayProps & FileDisplayDemoProps> = (\n  args: FileDisplayProps & FileDisplayDemoProps\n) => {\n  const [buttonEl, setButtonEl] = useElement();\n  const [popoverEl, setPopoverEl] = useElement();\n  const [showPreview, setShowPreview] = useState(false);\n\n  useOuterEvent('click', [buttonEl, popoverEl], () => setShowPreview(false));\n\n  const imageSrc =\n    'https://www.pega.com/sites/default/files/styles/480/public/media/images/2021-02/pwi-2021-prevcard.jpg';\n\n  const handlePreview = args.withPreview ? () => setShowPreview(true) : undefined;\n\n  const handleDownload = args.withDownload\n    ? () => {\n        const element = document.createElement('a');\n        element.href = imageSrc;\n        element.download = 'cosmos_file_display_download.jpg';\n        element.click();\n      }\n    : undefined;\n\n  return (\n    <>\n      <FileDisplay\n        ref={setButtonEl}\n        variant={args.variant}\n        displayText={args.displayText}\n        value={args.withValue ? imageSrc : undefined}\n        onPreview={handlePreview}\n        onDownload={handleDownload}\n      />\n      <Popover ref={setPopoverEl} show={showPreview} target={buttonEl}>\n        <Image src={imageSrc} alt={args.displayText || 'Pega World iNspire'} />\n      </Popover>\n    </>\n  );\n};\n\nFileDisplayDemo.args = {\n  variant: 'file',\n  displayText: 'Pega World iNspire'\n};\n\nFileDisplayDemo.argTypes = {\n  variant: { options: ['file', 'text', 'link'], control: { type: 'radio' } },\n  displayText: { control: { type: 'text' } }\n};\n\ninterface FileUploadItemDemoProps extends FileDisplayDemoProps {\n  name: FileUploadItemProps['name'];\n  meta?: FileUploadItemProps['meta'];\n  error?: FileUploadItemProps['error'];\n  progress?: FileUploadItemProps['progress'];\n}\n\nexport const FileUploadItemDemo: Story<FileUploadItemDemoProps> = (\n  args: FileUploadItemDemoProps\n) => {\n  const [fileEl, setFileEl] = useElement();\n  const [popoverEl, setPopoverEl] = useElement();\n  const [showPreview, setShowPreview] = useState(false);\n\n  useOuterEvent('click', [fileEl, popoverEl], () => setShowPreview(false));\n\n  const imageSrc =\n    'https://www.pega.com/sites/default/files/styles/480/public/media/images/2021-02/pwi-2021-prevcard.jpg';\n\n  const handlePreview = args.withPreview ? () => setShowPreview(true) : undefined;\n\n  const handleDownload = args.withDownload\n    ? () => {\n        const element = document.createElement('a');\n        element.href = imageSrc;\n        element.download = 'cosmos_file_display_download.jpg';\n        element.click();\n      }\n    : undefined;\n\n  return (\n    <>\n      <FileUploadItem\n        ref={setFileEl}\n        name={args.name}\n        meta={args.meta}\n        error={args.error}\n        progress={args.progress}\n        thumbnail={imageSrc}\n        onPreview={handlePreview}\n        onDownload={handleDownload}\n      />\n      <Popover ref={setPopoverEl} show={showPreview} target={fileEl} strategy='fixed'>\n        <Image src={imageSrc} alt={args.name} />\n      </Popover>\n    </>\n  );\n};\n\nFileUploadItemDemo.args = {\n  name: 'Pega World iNspire',\n  meta: 'Some additional information',\n  error: false,\n  progress: 100\n};\n\nFileUploadItemDemo.argTypes = {\n  withValue: { table: { disable: true } },\n  name: { control: { type: 'text' } },\n  meta: { control: { type: 'text' } },\n  error: { control: { type: 'boolean' } },\n  progress: { control: { type: 'number' } }\n};\n"]}

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

@@ -1,8 +1,8 @@
-export declare const StyledContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+export declare const StyledFlexContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
     height?: number | undefined;
     width?: number | undefined;
 }, never>;
-export declare const StyledItem: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+export declare const StyledFlexItem: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
     inActive?: boolean | undefined;
     noPadding?: boolean | undefined;
     width?: number | undefined;

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

@@ -1 +1 @@
-{"version":3,"file":"Flex.styles.d.ts","sourceRoot":"","sources":["../../../src/core/Flex/Flex.styles.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,eAAe;;;SAiB3B,CAAC;AAIF,eAAO,MAAM,UAAU;;;;SAsBtB,CAAC"}
+{"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

@@ -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