@pega/cosmos-react-demos 2.0.0 → 2.1.3

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

@@ -0,0 +1 @@
+{"version":3,"file":"Banner.stories.js","sourceRoot":"","sources":["../../../src/core/Banner/Banner.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta } from '@storybook/react';\nimport { useState, useCallback, FormEvent, useReducer } from 'react';\n\nimport { Banner, Button, Form, Input, Link } from '@pega/cosmos-react-core';\nimport { AppShellDemo } from '@pega/cosmos-react-demos/lib/core/AppShell/AppShell.stories';\nimport { CaseViewDemo } from '@pega/cosmos-react-demos/lib/work/CaseView/CaseView.stories';\n\nimport { demoFields, DemoFormField, fieldReducer, formActions } from './Banner.mocks';\n\nexport default {\n  title: 'Core/Banner',\n  component: Banner\n} as Meta;\n\nexport const SuccessBanner = () => {\n  const [showBanner, setShowBanner] = useState(true);\n\n  return (\n    <>\n      {!showBanner && <Button onClick={() => setShowBanner(true)}>Open banner</Button>}\n      {showBanner && (\n        <Banner\n          id='success'\n          variant='success'\n          onDismiss={() => setShowBanner(false)}\n          heading='2 items uploaded successfully'\n          messages={['pega_data.json', 'business-earnings.xlsx']}\n        />\n      )}\n    </>\n  );\n};\n\nexport const ErrorBanner = () => {\n  return (\n    <Banner\n      id='error'\n      variant='urgent'\n      heading='Error'\n      action={\n        <div>\n          <Button variant='link'>Try again</Button>\n        </div>\n      }\n      messages={['Your request failed to send!', 'Please review your request and try again']}\n    />\n  );\n};\n\nexport const WarningBanner = () => {\n  return (\n    <Banner\n      id='warning'\n      variant='warning'\n      action={\n        <div>\n          <Button variant='link'>Why this matters</Button>\n        </div>\n      }\n      messages={['Your submission is missing some important documents.']}\n    />\n  );\n};\n\nexport const InfoBanner = () => {\n  const [showBanner, setShowBanner] = useState(true);\n\n  return (\n    <>\n      {!showBanner && <Button onClick={() => setShowBanner(true)}>Open banner</Button>}\n      {showBanner && (\n        <Banner\n          id='info'\n          variant='info'\n          onDismiss={() => setShowBanner(false)}\n          messages={[\n            'US-123456 is currently being modified by Jane Smith and may not be edited simultaneously.'\n          ]}\n        />\n      )}\n    </>\n  );\n};\n\n// -----------------------------------------------------------------------------\n// Form story\n// -----------------------------------------------------------------------------\n\nexport const ShownInForm = () => {\n  const [fields, setField] = useReducer(fieldReducer, demoFields);\n  const [banner, setBanner] = useState<any>();\n\n  const onSubmit = useCallback((e: FormEvent) => {\n    e.preventDefault();\n    const errorFields = fields.filter(field => !field.validator(field.value));\n    let heading = 'Wow, great job!';\n    let variant: 'success' | 'urgent' = 'success';\n    let messages = fields.map(f => `${f.name} was typed perfectly`);\n    let bannerAction;\n\n    if (errorFields.length > 0) {\n      heading = \"I'm sorry you're having trouble\";\n      variant = 'urgent';\n      messages = errorFields.map(f => `${f.name} was not typed correctly`);\n      bannerAction = (\n        <Link href='https://community.pega.com/support' target='_blank'>\n          Visit Pega support for assistance\n        </Link>\n      );\n    }\n\n    setBanner(\n      <Banner\n        {...{\n          heading,\n          variant,\n          messages,\n          id: 'formBanner',\n          action: bannerAction,\n          onDismiss() {\n            setBanner(false);\n          }\n        }}\n      />\n    );\n  }, []);\n\n  return (\n    <Form\n      banners={banner}\n      actions={formActions}\n      onSubmit={onSubmit}\n      style={{ margin: 'auto', padding: '2.5rem', maxWidth: '37.5rem' }}\n    >\n      {fields.map((field: DemoFormField) => {\n        return (\n          <Input\n            key={field.name}\n            autoComplete='off'\n            name={field.name}\n            label={field.label}\n            info={field.info}\n            value={field.value}\n            onChange={(e: InputEvent) => setField(e.target as any)}\n          />\n        );\n      })}\n    </Form>\n  );\n};\n\n// -----------------------------------------------------------------------------\n// CaseView story\n// -----------------------------------------------------------------------------\nexport const ShownInCaseView = () => {\n  const [hasBanner, setHasBanner] = useState(true);\n  return (\n    <CaseViewDemo\n      banners={\n        hasBanner && (\n          <Banner\n            id='case-view-error'\n            heading='Waring'\n            onDismiss={() => setHasBanner(false)}\n            variant='warning'\n            messages={['Your submission is missing some important documents.']}\n          />\n        )\n      }\n    />\n  );\n};\n\nShownInCaseView.parameters = {\n  layout: 'fullscreen'\n};\n\n// -----------------------------------------------------------------------------\n// AppShell story\n// -----------------------------------------------------------------------------\nexport const ShownInAppShell = () => {\n  const [hasBanner, setHasBanner] = useState([]);\n  return (\n    <AppShellDemo\n      banners={\n        hasBanner && (\n          <Banner\n            id='app-shell-banner-success'\n            heading='2 items uploaded successfully'\n            onDismiss={() => setHasBanner([])}\n            variant='success'\n            messages={['pega_data.json', 'business-earnings.xlsx']}\n            action={\n              <Link target='_blank' href='https://www.pega.com'>\n                Link Here!\n              </Link>\n            }\n          />\n        )\n      }\n    />\n  );\n};\n\nShownInAppShell.parameters = {\n  layout: 'fullscreen'\n};\n"]}

package/lib/core/Boolean/BooleanDisplay.stories.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { BooleanDisplay } from '@pega/cosmos-react-core';
+export default {
+    title: 'Core/Boolean',
+    component: BooleanDisplay
+};
+export const BooleanDisplayDemo = (args) => {
+    return (_jsx(BooleanDisplay, { value: args.value, trueLabel: args.trueLabel, falseLabel: args.falseLabel }, void 0));
+};
+BooleanDisplayDemo.args = {
+    value: true,
+    trueLabel: 'Yes',
+    falseLabel: 'No'
+};
+BooleanDisplayDemo.argTypes = {
+    value: { control: { type: 'boolean' } },
+    trueLabel: { control: { type: 'text' } },
+    falseLabel: { control: { type: 'text' } }
+};
+//# sourceMappingURL=BooleanDisplay.stories.js.map

package/lib/core/Boolean/BooleanDisplay.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BooleanDisplay.stories.js","sourceRoot":"","sources":["../../../src/core/Boolean/BooleanDisplay.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,cAAc,EAAuB,MAAM,yBAAyB,CAAC;AAE9E,eAAe;IACb,KAAK,EAAE,cAAc;IACrB,SAAS,EAAE,cAAc;CAClB,CAAC;AAEV,MAAM,CAAC,MAAM,kBAAkB,GAA+B,CAAC,IAAyB,EAAE,EAAE;IAC1F,OAAO,CACL,KAAC,cAAc,IAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE,UAAU,EAAE,IAAI,CAAC,UAAU,WAAI,CAC9F,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAkB,CAAC,IAAI,GAAG;IACxB,KAAK,EAAE,IAAI;IACX,SAAS,EAAE,KAAK;IAChB,UAAU,EAAE,IAAI;CACjB,CAAC;AAEF,kBAAkB,CAAC,QAAQ,GAAG;IAC5B,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IACvC,SAAS,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACxC,UAAU,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;CAC1C,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { BooleanDisplay, BooleanDisplayProps } from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/Boolean',\n  component: BooleanDisplay\n} as Meta;\n\nexport const BooleanDisplayDemo: Story<BooleanDisplayProps> = (args: BooleanDisplayProps) => {\n  return (\n    <BooleanDisplay value={args.value} trueLabel={args.trueLabel} falseLabel={args.falseLabel} />\n  );\n};\n\nBooleanDisplayDemo.args = {\n  value: true,\n  trueLabel: 'Yes',\n  falseLabel: 'No'\n};\n\nBooleanDisplayDemo.argTypes = {\n  value: { control: { type: 'boolean' } },\n  trueLabel: { control: { type: 'text' } },\n  falseLabel: { control: { type: 'text' } }\n};\n"]}

package/lib/core/Breadcrumbs/Breadcrumbs.stories.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Breadcrumbs, Card } from '@pega/cosmos-react-core';
+import { StyledCard } from './Breadcrumbs.styles';
+export default {
+    title: 'Core/Breadcrumbs',
+    component: Breadcrumbs
+};
+export const BreadcrumbsDemo = () => {
+    const crumbs = [
+        { id: 'Plan information', primary: 'Plan information', href: '#plan-information' },
+        { id: 'View benefit', primary: 'View benefit', href: '#view-benefit' },
+        { id: 'Benefit usage', primary: 'Benefit usage', href: '#benefit-usage' },
+        { id: 'Plan claims', primary: 'Plan claims', href: '#plan-claims' },
+        { id: 'View benefit claims', primary: 'View benefit claims' }
+    ];
+    return _jsx(Breadcrumbs, { path: crumbs }, void 0);
+};
+export const ContainedBreadcrumbs = () => {
+    const crumbs = [
+        { id: 'Plan information', primary: 'Plan information', href: '#plan-information' },
+        { id: 'View benefit', primary: 'View benefit', href: '#view-benefit' },
+        { id: 'Benefit usage', primary: 'Benefit usage', href: '#benefit-usage' },
+        { id: 'Plan claims', primary: 'Plan claims', href: '#plan-claims' },
+        { id: 'View benefit claims', primary: 'View benefit claims' }
+    ];
+    return (_jsx(Card, { as: StyledCard, children: _jsx(Breadcrumbs, { path: crumbs }, void 0) }, void 0));
+};
+//# sourceMappingURL=Breadcrumbs.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Breadcrumbs.stories.js","sourceRoot":"","sources":["../../../src/core/Breadcrumbs/Breadcrumbs.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,WAAW,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAE5D,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAElD,eAAe;IACb,KAAK,EAAE,kBAAkB;IACzB,SAAS,EAAE,WAAW;CACf,CAAC;AAEV,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,EAAE;IAClC,MAAM,MAAM,GAAG;QACb,EAAE,EAAE,EAAE,kBAAkB,EAAE,OAAO,EAAE,kBAAkB,EAAE,IAAI,EAAE,mBAAmB,EAAE;QAClF,EAAE,EAAE,EAAE,cAAc,EAAE,OAAO,EAAE,cAAc,EAAE,IAAI,EAAE,eAAe,EAAE;QACtE,EAAE,EAAE,EAAE,eAAe,EAAE,OAAO,EAAE,eAAe,EAAE,IAAI,EAAE,gBAAgB,EAAE;QACzE,EAAE,EAAE,EAAE,aAAa,EAAE,OAAO,EAAE,aAAa,EAAE,IAAI,EAAE,cAAc,EAAE;QACnE,EAAE,EAAE,EAAE,qBAAqB,EAAE,OAAO,EAAE,qBAAqB,EAAE;KAC9D,CAAC;IAEF,OAAO,KAAC,WAAW,IAAC,IAAI,EAAE,MAAM,WAAI,CAAC;AACvC,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAG,GAAG,EAAE;IACvC,MAAM,MAAM,GAAG;QACb,EAAE,EAAE,EAAE,kBAAkB,EAAE,OAAO,EAAE,kBAAkB,EAAE,IAAI,EAAE,mBAAmB,EAAE;QAClF,EAAE,EAAE,EAAE,cAAc,EAAE,OAAO,EAAE,cAAc,EAAE,IAAI,EAAE,eAAe,EAAE;QACtE,EAAE,EAAE,EAAE,eAAe,EAAE,OAAO,EAAE,eAAe,EAAE,IAAI,EAAE,gBAAgB,EAAE;QACzE,EAAE,EAAE,EAAE,aAAa,EAAE,OAAO,EAAE,aAAa,EAAE,IAAI,EAAE,cAAc,EAAE;QACnE,EAAE,EAAE,EAAE,qBAAqB,EAAE,OAAO,EAAE,qBAAqB,EAAE;KAC9D,CAAC;IAEF,OAAO,CACL,KAAC,IAAI,IAAC,EAAE,EAAE,UAAU,YAClB,KAAC,WAAW,IAAC,IAAI,EAAE,MAAM,WAAI,WACxB,CACR,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { Meta } from '@storybook/react';\n\nimport { Breadcrumbs, Card } from '@pega/cosmos-react-core';\n\nimport { StyledCard } from './Breadcrumbs.styles';\n\nexport default {\n  title: 'Core/Breadcrumbs',\n  component: Breadcrumbs\n} as Meta;\n\nexport const BreadcrumbsDemo = () => {\n  const crumbs = [\n    { id: 'Plan information', primary: 'Plan information', href: '#plan-information' },\n    { id: 'View benefit', primary: 'View benefit', href: '#view-benefit' },\n    { id: 'Benefit usage', primary: 'Benefit usage', href: '#benefit-usage' },\n    { id: 'Plan claims', primary: 'Plan claims', href: '#plan-claims' },\n    { id: 'View benefit claims', primary: 'View benefit claims' }\n  ];\n\n  return <Breadcrumbs path={crumbs} />;\n};\n\nexport const ContainedBreadcrumbs = () => {\n  const crumbs = [\n    { id: 'Plan information', primary: 'Plan information', href: '#plan-information' },\n    { id: 'View benefit', primary: 'View benefit', href: '#view-benefit' },\n    { id: 'Benefit usage', primary: 'Benefit usage', href: '#benefit-usage' },\n    { id: 'Plan claims', primary: 'Plan claims', href: '#plan-claims' },\n    { id: 'View benefit claims', primary: 'View benefit claims' }\n  ];\n\n  return (\n    <Card as={StyledCard}>\n      <Breadcrumbs path={crumbs} />\n    </Card>\n  );\n};\n"]}

package/lib/core/Button/Button.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Button/Button.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAAU,WAAW,EAAsB,MAAM,yBAAyB,CAAC;;AAMlF,wBAMU;AAEV,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,WAAW,CAM7C,CAAC;AAeF,eAAO,MAAM,eAAe,mBAoB3B,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,WAAW,CAoB1C,CAAC;AAUF,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,WAAW,CAM7C,CAAC;AAYF,eAAO,MAAM,YAAY,mBAMxB,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,WAAW,CAM7C,CAAC"}
+{"version":3,"file":"Button.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Button/Button.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAAU,WAAW,EAA4B,MAAM,yBAAyB,CAAC;;AAMxF,wBAMU;AAEV,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,WAAW,CAM7C,CAAC;AAeF,eAAO,MAAM,eAAe,mBAoB3B,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,WAAW,CAoB1C,CAAC;AAUF,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,WAAW,CAM7C,CAAC;AAYF,eAAO,MAAM,YAAY,mBAMxB,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,WAAW,CAM7C,CAAC"}

package/lib/core/Button/Button.stories.js

@@ -0,0 +1,64 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Flex, Icon, registerIcon } from '@pega/cosmos-react-core';
+import * as plusIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/plus.icon';
+import BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';
+registerIcon(plusIcon);
+export default {
+    title: 'Core/Button',
+    component: Button,
+    parameters: {
+        layout: 'centered'
+    }
+};
+export const ButtonVariants = (args) => {
+    return (_jsx(Button, { variant: args.variant, compact: args.compact, children: "Click me" }, void 0));
+};
+ButtonVariants.args = {
+    variant: 'primary',
+    compact: false
+};
+ButtonVariants.argTypes = {
+    variant: {
+        options: ['primary', 'secondary', 'simple', 'link', 'text'],
+        control: { type: 'select' }
+    },
+    compact: { control: { type: 'boolean' } }
+};
+export const DisabledButtons = () => {
+    return (_jsxs(_Fragment, { children: [_jsx(Button, { variant: 'primary', disabled: true, children: "Primary disabled" }, void 0), _jsx(Button, { variant: 'secondary', disabled: true, children: "Secondary disabled" }, void 0), _jsx(Button, { variant: 'simple', disabled: true, children: "Simple disabled" }, void 0), _jsx(Button, { variant: 'link', disabled: true, children: "Link disabled" }, void 0), _jsx(Button, { variant: 'text', disabled: true, children: "Text disabled" }, void 0)] }, void 0));
+};
+export const IconButtons = ({ compact }) => {
+    return (_jsxs(Flex, { container: { alignItems: 'center' }, children: [_jsx(Button, { variant: 'primary', label: 'Icon button primary', icon: true, compact: compact, children: _jsx(Icon, { name: 'plus' }, void 0) }, void 0), _jsx(Button, { variant: 'secondary', label: 'Icon button secondary', icon: true, compact: compact, children: _jsx(Icon, { name: 'plus' }, void 0) }, void 0), _jsx(Button, { variant: 'simple', label: 'Icon button simple', icon: true, compact: compact, children: _jsx(Icon, { name: 'plus' }, void 0) }, void 0), _jsx(Button, { variant: 'link', label: 'Icon button link', icon: true, compact: compact, children: _jsx(Icon, { name: 'plus' }, void 0) }, void 0), _jsx(Button, { variant: 'text', label: 'Icon button text', icon: true, compact: compact, children: _jsx(Icon, { name: 'plus' }, void 0) }, void 0)] }, void 0));
+};
+IconButtons.args = {
+    compact: false
+};
+IconButtons.argTypes = {
+    compact: { control: { type: 'boolean' } }
+};
+export const LoadingButtons = (args) => {
+    return (_jsx(Button, { variant: args.variant, icon: args.icon, label: 'Loading', loading: true, children: args.icon ? _jsx(Icon, { name: 'plus' }, void 0) : 'Loading' }, void 0));
+};
+LoadingButtons.args = {
+    variant: 'primary',
+    icon: false
+};
+LoadingButtons.argTypes = {
+    variant: { options: ['primary', 'secondary'], control: { type: 'select' } },
+    icon: { control: { type: 'boolean' } }
+};
+export const ButtonAsLink = () => {
+    return (_jsx(Button, { variant: 'primary', href: 'https://www.pega.com', target: '_blank', children: "Go to pega.com" }, void 0));
+};
+export const BareButtonDemo = (args) => {
+    return (_jsx(BareButton, { disabled: args.disabled, href: args.href || undefined, children: "Click me" }, void 0));
+};
+BareButtonDemo.args = {
+    disabled: false,
+    href: ''
+};
+BareButtonDemo.argTypes = {
+    disabled: { control: { type: 'boolean' } },
+    href: { control: { type: 'text' } }
+};
+//# sourceMappingURL=Button.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Button.stories.js","sourceRoot":"","sources":["../../../src/core/Button/Button.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { Button, ButtonProps, Flex, Icon, registerIcon } from '@pega/cosmos-react-core';\nimport * as plusIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/plus.icon';\nimport BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';\n\nregisterIcon(plusIcon);\n\nexport default {\n  title: 'Core/Button',\n  component: Button,\n  parameters: {\n    layout: 'centered'\n  }\n} as Meta;\n\nexport const ButtonVariants: Story<ButtonProps> = (args: ButtonProps) => {\n  return (\n    <Button variant={args.variant} compact={args.compact}>\n      Click me\n    </Button>\n  );\n};\n\nButtonVariants.args = {\n  variant: 'primary',\n  compact: false\n};\n\nButtonVariants.argTypes = {\n  variant: {\n    options: ['primary', 'secondary', 'simple', 'link', 'text'],\n    control: { type: 'select' }\n  },\n  compact: { control: { type: 'boolean' } }\n};\n\nexport const DisabledButtons = () => {\n  return (\n    <>\n      <Button variant='primary' disabled>\n        Primary disabled\n      </Button>\n      <Button variant='secondary' disabled>\n        Secondary disabled\n      </Button>\n      <Button variant='simple' disabled>\n        Simple disabled\n      </Button>\n      <Button variant='link' disabled>\n        Link disabled\n      </Button>\n      <Button variant='text' disabled>\n        Text disabled\n      </Button>\n    </>\n  );\n};\n\nexport const IconButtons: Story<ButtonProps> = ({ compact }: ButtonProps) => {\n  return (\n    <Flex container={{ alignItems: 'center' }}>\n      <Button variant='primary' label='Icon button primary' icon compact={compact}>\n        <Icon name='plus' />\n      </Button>\n      <Button variant='secondary' label='Icon button secondary' icon compact={compact}>\n        <Icon name='plus' />\n      </Button>\n      <Button variant='simple' label='Icon button simple' icon compact={compact}>\n        <Icon name='plus' />\n      </Button>\n      <Button variant='link' label='Icon button link' icon compact={compact}>\n        <Icon name='plus' />\n      </Button>\n      <Button variant='text' label='Icon button text' icon compact={compact}>\n        <Icon name='plus' />\n      </Button>\n    </Flex>\n  );\n};\n\nIconButtons.args = {\n  compact: false\n};\n\nIconButtons.argTypes = {\n  compact: { control: { type: 'boolean' } }\n};\n\nexport const LoadingButtons: Story<ButtonProps> = (args: ButtonProps) => {\n  return (\n    <Button variant={args.variant} icon={args.icon} label='Loading' loading>\n      {args.icon ? <Icon name='plus' /> : 'Loading'}\n    </Button>\n  );\n};\n\nLoadingButtons.args = {\n  variant: 'primary',\n  icon: false\n};\n\nLoadingButtons.argTypes = {\n  variant: { options: ['primary', 'secondary'], control: { type: 'select' } },\n  icon: { control: { type: 'boolean' } }\n};\n\nexport const ButtonAsLink = () => {\n  return (\n    <Button variant='primary' href='https://www.pega.com' target='_blank'>\n      Go to pega.com\n    </Button>\n  );\n};\n\nexport const BareButtonDemo: Story<ButtonProps> = (args: ButtonProps) => {\n  return (\n    <BareButton disabled={args.disabled} href={args.href || undefined}>\n      Click me\n    </BareButton>\n  );\n};\n\nBareButtonDemo.args = {\n  disabled: false,\n  href: ''\n};\n\nBareButtonDemo.argTypes = {\n  disabled: { control: { type: 'boolean' } },\n  href: { control: { type: 'text' } }\n};\n"]}

package/lib/core/Card/Card.stories.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Card, CardHeader, CardMedia, CardContent, CardFooter, Image, MenuButton, Text } from '@pega/cosmos-react-core';
+import { StyledCard } from './Card.styles';
+export default {
+    title: 'Core/Card',
+    component: Card,
+    parameters: {
+        layout: 'centered'
+    }
+};
+export const SimpleCard = () => {
+    return (_jsxs(Card, { as: StyledCard, children: [_jsx(CardHeader, { children: _jsx(Text, { variant: 'h2', children: "Simple Card" }, void 0) }, void 0), _jsx(CardContent, { children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat." }, void 0)] }, void 0));
+};
+export const FullCard = (args) => {
+    return (_jsxs(Card, { as: StyledCard, children: [_jsx(CardMedia, { children: _jsx(Image, { src: 'https://www.pega.com/sites/default/files/default-og.jpg', height: '100', alt: 'Media' }, void 0) }, void 0), _jsx(CardHeader, { actions: _jsx(MenuButton, { portal: true, variant: 'simple', text: 'Card actions', icon: 'more', iconOnly: true, menu: {
+                        items: [
+                            { id: 'action-1', primary: 'Card action 1' },
+                            { id: 'action-2', primary: 'Card action 2' },
+                            { id: 'action-3', primary: 'Card action 3' }
+                        ]
+                    } }, void 0), children: _jsx(Text, { variant: 'h2', children: "Full Card" }, void 0) }, void 0), _jsx(CardContent, { children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat." }, void 0), _jsx(CardFooter, { justify: args.justify, children: _jsx(Text, { variant: 'secondary', children: "This is the CardFooter" }, void 0) }, void 0)] }, void 0));
+};
+FullCard.args = {
+    justify: 'start'
+};
+FullCard.argTypes = {
+    justify: {
+        options: ['start', 'end', 'center', 'between', 'around', 'evenly'],
+        control: { type: 'select' }
+    }
+};
+//# sourceMappingURL=Card.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Card.stories.js","sourceRoot":"","sources":["../../../src/core/Card/Card.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EACL,IAAI,EACJ,UAAU,EACV,SAAS,EACT,WAAW,EACX,UAAU,EAEV,KAAK,EACL,UAAU,EACV,IAAI,EACL,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE3C,eAAe;IACb,KAAK,EAAE,WAAW;IAClB,SAAS,EAAE,IAAI;IACf,UAAU,EAAE;QACV,MAAM,EAAE,UAAU;KACnB;CACM,CAAC;AAEV,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,EAAE;IAC7B,OAAO,CACL,MAAC,IAAI,IAAC,EAAE,EAAE,UAAU,aAClB,KAAC,UAAU,cACT,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,oCAAmB,WAC1B,EACb,KAAC,WAAW,kQAIE,YACT,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAA2B,CAAC,IAAqB,EAAE,EAAE;IACxE,OAAO,CACL,MAAC,IAAI,IAAC,EAAE,EAAE,UAAU,aAClB,KAAC,SAAS,cACR,KAAC,KAAK,IACJ,GAAG,EAAC,yDAAyD,EAC7D,MAAM,EAAC,KAAK,EACZ,GAAG,EAAC,OAAO,WACX,WACQ,EACZ,KAAC,UAAU,IACT,OAAO,EACL,KAAC,UAAU,IACT,MAAM,QACN,OAAO,EAAC,QAAQ,EAChB,IAAI,EAAC,cAAc,EACnB,IAAI,EAAC,MAAM,EACX,QAAQ,QACR,IAAI,EAAE;wBACJ,KAAK,EAAE;4BACL,EAAE,EAAE,EAAE,UAAU,EAAE,OAAO,EAAE,eAAe,EAAE;4BAC5C,EAAE,EAAE,EAAE,UAAU,EAAE,OAAO,EAAE,eAAe,EAAE;4BAC5C,EAAE,EAAE,EAAE,UAAU,EAAE,OAAO,EAAE,eAAe,EAAE;yBAC7C;qBACF,WACD,YAGJ,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,kCAAiB,WACxB,EACb,KAAC,WAAW,kQAIE,EACd,KAAC,UAAU,IAAC,OAAO,EAAE,IAAI,CAAC,OAAO,YAC/B,KAAC,IAAI,IAAC,OAAO,EAAC,WAAW,+CAA8B,WAC5C,YACR,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,QAAQ,CAAC,IAAI,GAAG;IACd,OAAO,EAAE,OAAO;CACjB,CAAC;AAEF,QAAQ,CAAC,QAAQ,GAAG;IAClB,OAAO,EAAE;QACP,OAAO,EAAE,CAAC,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,CAAC;QAClE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;KAC5B;CACF,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport {\n  Card,\n  CardHeader,\n  CardMedia,\n  CardContent,\n  CardFooter,\n  CardFooterProps,\n  Image,\n  MenuButton,\n  Text\n} from '@pega/cosmos-react-core';\n\nimport { StyledCard } from './Card.styles';\n\nexport default {\n  title: 'Core/Card',\n  component: Card,\n  parameters: {\n    layout: 'centered'\n  }\n} as Meta;\n\nexport const SimpleCard = () => {\n  return (\n    <Card as={StyledCard}>\n      <CardHeader>\n        <Text variant='h2'>Simple Card</Text>\n      </CardHeader>\n      <CardContent>\n        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut\n        labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco\n        laboris nisi ut aliquip ex ea commodo consequat.\n      </CardContent>\n    </Card>\n  );\n};\n\nexport const FullCard: Story<CardFooterProps> = (args: CardFooterProps) => {\n  return (\n    <Card as={StyledCard}>\n      <CardMedia>\n        <Image\n          src='https://www.pega.com/sites/default/files/default-og.jpg'\n          height='100'\n          alt='Media'\n        />\n      </CardMedia>\n      <CardHeader\n        actions={\n          <MenuButton\n            portal\n            variant='simple'\n            text='Card actions'\n            icon='more'\n            iconOnly\n            menu={{\n              items: [\n                { id: 'action-1', primary: 'Card action 1' },\n                { id: 'action-2', primary: 'Card action 2' },\n                { id: 'action-3', primary: 'Card action 3' }\n              ]\n            }}\n          />\n        }\n      >\n        <Text variant='h2'>Full Card</Text>\n      </CardHeader>\n      <CardContent>\n        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut\n        labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco\n        laboris nisi ut aliquip ex ea commodo consequat.\n      </CardContent>\n      <CardFooter justify={args.justify}>\n        <Text variant='secondary'>This is the CardFooter</Text>\n      </CardFooter>\n    </Card>\n  );\n};\n\nFullCard.args = {\n  justify: 'start'\n};\n\nFullCard.argTypes = {\n  justify: {\n    options: ['start', 'end', 'center', 'between', 'around', 'evenly'],\n    control: { type: 'select' }\n  }\n};\n"]}

package/lib/core/Checkbox/Checkbox.stories.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Checkbox } from '@pega/cosmos-react-core';
+export default {
+    title: 'Core/Checkbox',
+    component: Checkbox,
+    args: {
+        status: undefined,
+        label: 'Check me, please',
+        required: false,
+        disabled: false,
+        readOnly: false,
+        indeterminate: false
+    },
+    argTypes: {
+        status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },
+        label: { control: { type: 'text' } },
+        required: { control: { type: 'boolean' } },
+        disabled: { control: { type: 'boolean' } },
+        readOnly: { control: { type: 'boolean' } },
+        indeterminate: { control: { type: 'boolean' } }
+    }
+};
+export const DefaultCheckbox = (args) => {
+    return (_jsx(Checkbox, { status: args.status, label: args.label, required: args.required, disabled: args.disabled, readOnly: args.readOnly, indeterminate: args.indeterminate }, void 0));
+};
+export const CheckboxCard = (args) => {
+    return (_jsx(Checkbox, { variant: 'card', status: args.status, label: args.label, required: args.required, disabled: args.disabled, readOnly: args.readOnly, indeterminate: args.indeterminate }, void 0));
+};
+//# sourceMappingURL=Checkbox.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.stories.js","sourceRoot":"","sources":["../../../src/core/Checkbox/Checkbox.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,QAAQ,EAAmB,MAAM,yBAAyB,CAAC;AAEpE,eAAe;IACb,KAAK,EAAE,eAAe;IACtB,SAAS,EAAE,QAAQ;IACnB,IAAI,EAAE;QACJ,MAAM,EAAE,SAAS;QACjB,KAAK,EAAE,kBAAkB;QACzB,QAAQ,EAAE,KAAK;QACf,QAAQ,EAAE,KAAK;QACf,QAAQ,EAAE,KAAK;QACf,aAAa,EAAE,KAAK;KACrB;IACD,QAAQ,EAAE;QACR,MAAM,EAAE,EAAE,OAAO,EAAE,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;QAC5F,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;QACpC,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;QAC1C,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;QAC1C,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;QAC1C,aAAa,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;KAChD;CACM,CAAC;AAEV,MAAM,CAAC,MAAM,eAAe,GAA2B,CAAC,IAAqB,EAAE,EAAE;IAC/E,OAAO,CACL,KAAC,QAAQ,IACP,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,aAAa,EAAE,IAAI,CAAC,aAAa,WACjC,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAA2B,CAAC,IAAqB,EAAE,EAAE;IAC5E,OAAO,CACL,KAAC,QAAQ,IACP,OAAO,EAAC,MAAM,EACd,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,aAAa,EAAE,IAAI,CAAC,aAAa,WACjC,CACH,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { Checkbox, RadioCheckProps } from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/Checkbox',\n  component: Checkbox,\n  args: {\n    status: undefined,\n    label: 'Check me, please',\n    required: false,\n    disabled: false,\n    readOnly: false,\n    indeterminate: false\n  },\n  argTypes: {\n    status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },\n    label: { control: { type: 'text' } },\n    required: { control: { type: 'boolean' } },\n    disabled: { control: { type: 'boolean' } },\n    readOnly: { control: { type: 'boolean' } },\n    indeterminate: { control: { type: 'boolean' } }\n  }\n} as Meta;\n\nexport const DefaultCheckbox: Story<RadioCheckProps> = (args: RadioCheckProps) => {\n  return (\n    <Checkbox\n      status={args.status}\n      label={args.label}\n      required={args.required}\n      disabled={args.disabled}\n      readOnly={args.readOnly}\n      indeterminate={args.indeterminate}\n    />\n  );\n};\n\nexport const CheckboxCard: Story<RadioCheckProps> = (args: RadioCheckProps) => {\n  return (\n    <Checkbox\n      variant='card'\n      status={args.status}\n      label={args.label}\n      required={args.required}\n      disabled={args.disabled}\n      readOnly={args.readOnly}\n      indeterminate={args.indeterminate}\n    />\n  );\n};\n"]}

package/lib/core/CheckboxGroup/CheckboxGroup.stories.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Checkbox, CheckboxGroup, FieldGroup, FieldValueList, Flex, Text } from '@pega/cosmos-react-core';
+import { Paragraph, StyledImage } from './CheckboxGroup.styles';
+export default {
+    title: 'Core/CheckboxGroup',
+    component: CheckboxGroup,
+    args: {
+        labelHidden: false,
+        inline: false,
+        required: false,
+        disabled: false,
+        readOnly: false
+    },
+    argTypes: {
+        labelHidden: { control: { type: 'boolean' } },
+        inline: { control: { type: 'boolean' } },
+        required: { control: { type: 'boolean' } },
+        disabled: { control: { type: 'boolean' } },
+        readOnly: { control: { type: 'boolean' } }
+    }
+};
+export const CheckboxGroupDemo = (args) => {
+    return (_jsxs(CheckboxGroup, { label: 'What do you want to eat?', name: 'Fruit', labelHidden: args.labelHidden, inline: args.inline, required: args.required, disabled: args.disabled, readOnly: args.readOnly, children: [_jsx(Checkbox, { label: 'Banana', id: 'Banana', defaultChecked: true }, void 0), _jsx(Checkbox, { label: 'Apple', id: 'Apple' }, void 0), _jsx(Checkbox, { label: 'Mango', id: 'Mango' }, void 0), _jsx(Checkbox, { label: 'Orange', id: 'Orange' }, void 0)] }, void 0));
+};
+export const CheckboxCardGroup = (args) => {
+    return (_jsxs(CheckboxGroup, { variant: 'card', label: 'Which visuals appear satisfying?', labelHidden: args.labelHidden, inline: args.inline, required: args.required, disabled: args.disabled, readOnly: args.readOnly, children: [_jsx(Checkbox, { label: _jsxs(Flex, { container: { direction: 'column', gap: 1 }, children: [_jsx(Text, { variant: 'h4', children: "A paragraph" }, void 0), _jsx(Paragraph, { children: "This is a paragraph of text. It is meant to appear visually satisfying amongst the other options in this group." }, void 0)] }, void 0), id: 'paragraph', defaultChecked: true }, void 0), _jsx(Checkbox, { label: _jsxs(Flex, { container: { direction: 'column', gap: 1 }, children: [_jsx(Text, { variant: 'h4', children: "Space" }, void 0), _jsx(StyledImage, { src: 'https://thumbor.forbes.com/thumbor/960x0/https%3A%2F%2Fspecials-images.forbesimg.com%2Fdam%2Fimageserve%2F765877054%2F960x0.jpg%3Ffit%3Dscale', alt: 'space' }, void 0)] }, void 0), id: 'space-photo' }, void 0), _jsx(Checkbox, { label: _jsxs(Flex, { container: { gap: 1, alignItems: 'start' }, children: [_jsx(StyledImage, { src: 'https://thumbor.forbes.com/thumbor/960x0/https%3A%2F%2Fspecials-images.forbesimg.com%2Fdam%2Fimageserve%2F765877054%2F960x0.jpg%3Ffit%3Dscale', alt: 'space' }, void 0), _jsxs(Flex, { container: { direction: 'column', gap: 1 }, children: [_jsx(Text, { variant: 'h4', children: "Space" }, void 0), _jsx(Paragraph, { children: "Space is the final frontier. There is so much to discover within Cosmos!" }, void 0)] }, void 0)] }, void 0), id: 'cosmos' }, void 0), _jsx(Checkbox, { label: _jsx(FieldGroup, { name: 'Gold service plan', children: _jsx(FieldValueList, { fields: [
+                            { id: 'service', name: 'Service length', value: '1 year' },
+                            { id: 'monthly-cost', name: 'Monthly cost', value: '$180.00' },
+                            { id: 'total-cost', name: 'Total cost', value: '$2,160.00' }
+                        ] }, void 0) }, void 0), id: 'phone-plan' }, void 0)] }, void 0));
+};
+//# sourceMappingURL=CheckboxGroup.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxGroup.stories.js","sourceRoot":"","sources":["../../../src/core/CheckboxGroup/CheckboxGroup.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport {\n  Checkbox,\n  CheckboxGroup,\n  FieldGroup,\n  FieldValueList,\n  Flex,\n  RadioCheckGroupProps,\n  Text\n} from '@pega/cosmos-react-core';\n\nimport { Paragraph, StyledImage } from './CheckboxGroup.styles';\n\nexport default {\n  title: 'Core/CheckboxGroup',\n  component: CheckboxGroup,\n  args: {\n    labelHidden: false,\n    inline: false,\n    required: false,\n    disabled: false,\n    readOnly: false\n  },\n  argTypes: {\n    labelHidden: { control: { type: 'boolean' } },\n    inline: { control: { type: 'boolean' } },\n    required: { control: { type: 'boolean' } },\n    disabled: { control: { type: 'boolean' } },\n    readOnly: { control: { type: 'boolean' } }\n  }\n} as Meta;\n\nexport const CheckboxGroupDemo: Story<RadioCheckGroupProps> = (args: RadioCheckGroupProps) => {\n  return (\n    <CheckboxGroup\n      label='What do you want to eat?'\n      name='Fruit'\n      labelHidden={args.labelHidden}\n      inline={args.inline}\n      required={args.required}\n      disabled={args.disabled}\n      readOnly={args.readOnly}\n    >\n      <Checkbox label='Banana' id='Banana' defaultChecked />\n      <Checkbox label='Apple' id='Apple' />\n      <Checkbox label='Mango' id='Mango' />\n      <Checkbox label='Orange' id='Orange' />\n    </CheckboxGroup>\n  );\n};\n\nexport const CheckboxCardGroup: Story<RadioCheckGroupProps> = (args: RadioCheckGroupProps) => {\n  return (\n    <CheckboxGroup\n      variant='card'\n      label='Which visuals appear satisfying?'\n      labelHidden={args.labelHidden}\n      inline={args.inline}\n      required={args.required}\n      disabled={args.disabled}\n      readOnly={args.readOnly}\n    >\n      <Checkbox\n        label={\n          <Flex container={{ direction: 'column', gap: 1 }}>\n            <Text variant='h4'>A paragraph</Text>\n            <Paragraph>\n              This is a paragraph of text. It is meant to appear visually satisfying amongst the\n              other options in this group.\n            </Paragraph>\n          </Flex>\n        }\n        id='paragraph'\n        defaultChecked\n      />\n      <Checkbox\n        label={\n          <Flex container={{ direction: 'column', gap: 1 }}>\n            <Text variant='h4'>Space</Text>\n            <StyledImage\n              src='https://thumbor.forbes.com/thumbor/960x0/https%3A%2F%2Fspecials-images.forbesimg.com%2Fdam%2Fimageserve%2F765877054%2F960x0.jpg%3Ffit%3Dscale'\n              alt='space'\n            />\n          </Flex>\n        }\n        id='space-photo'\n      />\n      <Checkbox\n        label={\n          <Flex container={{ gap: 1, alignItems: 'start' }}>\n            <StyledImage\n              src='https://thumbor.forbes.com/thumbor/960x0/https%3A%2F%2Fspecials-images.forbesimg.com%2Fdam%2Fimageserve%2F765877054%2F960x0.jpg%3Ffit%3Dscale'\n              alt='space'\n            />\n            <Flex container={{ direction: 'column', gap: 1 }}>\n              <Text variant='h4'>Space</Text>\n              <Paragraph>\n                Space is the final frontier. There is so much to discover within Cosmos!\n              </Paragraph>\n            </Flex>\n          </Flex>\n        }\n        id='cosmos'\n      />\n      <Checkbox\n        label={\n          <FieldGroup name='Gold service plan'>\n            <FieldValueList\n              fields={[\n                { id: 'service', name: 'Service length', value: '1 year' },\n                { id: 'monthly-cost', name: 'Monthly cost', value: '$180.00' },\n                { id: 'total-cost', name: 'Total cost', value: '$2,160.00' }\n              ]}\n            />\n          </FieldGroup>\n        }\n        id='phone-plan'\n      />\n    </CheckboxGroup>\n  );\n};\n"]}

package/lib/core/ColorPicker/ColorPicker.stories.js

@@ -0,0 +1,76 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from 'react';
+import styled, { css } from 'styled-components';
+import { readableColor } from 'polished';
+import { ColorPicker, Flex, Grid, Text, tryCatch, useTheme } from '@pega/cosmos-react-core';
+export default {
+    title: 'Core/ColorPicker',
+    component: ColorPicker
+};
+export const ColorPickerDemo = (args) => {
+    const [value, setValue] = useState('#10a5ac');
+    return (_jsx(ColorPicker, { label: args.label, labelHidden: args.labelHidden, info: args.info, status: args.status, swatchOnly: args.swatchOnly, inline: args.inline, required: args.required, disabled: args.disabled, readOnly: args.readOnly, value: value, onChange: e => {
+            setValue(e.hex);
+        } }, void 0));
+};
+ColorPickerDemo.args = {
+    label: 'ColorPicker label',
+    labelHidden: false,
+    info: 'Pick a color',
+    status: undefined,
+    swatchOnly: false,
+    inline: false,
+    required: false,
+    disabled: false,
+    readOnly: false
+};
+ColorPickerDemo.argTypes = {
+    label: { control: { type: 'text' } },
+    labelHidden: { control: { type: 'boolean' } },
+    info: { control: { type: 'text' } },
+    status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },
+    swatchOnly: { control: { type: 'boolean' } },
+    inline: { control: { type: 'boolean' } },
+    required: { control: { type: 'boolean' } },
+    disabled: { control: { type: 'boolean' } },
+    readOnly: { control: { type: 'boolean' } }
+};
+export const MultiColor = () => {
+    const StyledColorPane = styled.div(({ color }) => {
+        const c = tryCatch(() => readableColor(color));
+        return css `
+      color: ${c};
+      background: ${color};
+    `;
+    });
+    const { base: { palette } } = useTheme();
+    const opaqueColors = useMemo(() => Object.entries(palette).filter(([, color]) => {
+        return /^#[0-9A-F]{6}$/i.test(color);
+    }), [palette]);
+    const [values, setValues] = useState(() => opaqueColors.map(([, color]) => color));
+    return (_jsxs(Grid, { container: { rows: '1fr 2fr' }, style: { height: '100vh' }, children: [_jsx(Grid, { container: {
+                    cols: '1fr 1fr 1fr 1fr',
+                    alignItems: 'center',
+                    colGap: 4,
+                    rowGap: 1
+                }, style: { padding: '1rem' }, children: _jsx(_Fragment, { children: values.map((color, i) => {
+                        const key = `color-${i}`;
+                        return (_jsx("div", { children: _jsx(ColorPicker, { inline: true, label: opaqueColors[i][0], value: color, onChange: e => {
+                                    const newColor = e.hex;
+                                    setValues(cur => {
+                                        return cur.map((c, j) => {
+                                            if (i === j)
+                                                return newColor;
+                                            return c;
+                                        });
+                                    });
+                                } }, void 0) }, key));
+                    }) }, void 0) }, void 0), _jsx(Grid, { container: {
+                    cols: '1fr 1fr 1fr 1fr',
+                    gap: 0.125
+                }, children: values.map((color, i) => {
+                    const key = `color-${i}`;
+                    return (_jsx(Flex, { container: { justify: 'center', alignItems: 'center' }, as: StyledColorPane, color: color, children: _jsx(Text, { variant: 'h1', as: 'span', children: color }, void 0) }, key));
+                }) }, void 0)] }, void 0));
+};
+//# sourceMappingURL=ColorPicker.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPicker.stories.js","sourceRoot":"","sources":["../../../src/core/ColorPicker/ColorPicker.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useMemo, useState } from 'react';\nimport styled, { css } from 'styled-components';\nimport { readableColor } from 'polished';\n\nimport {\n  ColorPicker,\n  ColorPickerProps,\n  Flex,\n  Grid,\n  Text,\n  tryCatch,\n  useTheme\n} from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/ColorPicker',\n  component: ColorPicker\n} as Meta;\n\nexport const ColorPickerDemo: Story<ColorPickerProps> = (args: ColorPickerProps) => {\n  const [value, setValue] = useState('#10a5ac');\n\n  return (\n    <ColorPicker\n      label={args.label}\n      labelHidden={args.labelHidden}\n      info={args.info}\n      status={args.status}\n      swatchOnly={args.swatchOnly}\n      inline={args.inline}\n      required={args.required}\n      disabled={args.disabled}\n      readOnly={args.readOnly}\n      value={value}\n      onChange={e => {\n        setValue(e.hex);\n      }}\n    />\n  );\n};\n\nColorPickerDemo.args = {\n  label: 'ColorPicker label',\n  labelHidden: false,\n  info: 'Pick a color',\n  status: undefined,\n  swatchOnly: false,\n  inline: false,\n  required: false,\n  disabled: false,\n  readOnly: false\n};\n\nColorPickerDemo.argTypes = {\n  label: { control: { type: 'text' } },\n  labelHidden: { control: { type: 'boolean' } },\n  info: { control: { type: 'text' } },\n  status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },\n  swatchOnly: { control: { type: 'boolean' } },\n  inline: { control: { type: 'boolean' } },\n  required: { control: { type: 'boolean' } },\n  disabled: { control: { type: 'boolean' } },\n  readOnly: { control: { type: 'boolean' } }\n};\n\nexport const MultiColor = () => {\n  const StyledColorPane = styled.div<{ color: string }>(({ color }) => {\n    const c = tryCatch(() => readableColor(color));\n    return css`\n      color: ${c};\n      background: ${color};\n    `;\n  });\n\n  const {\n    base: { palette }\n  } = useTheme();\n\n  const opaqueColors = useMemo(\n    () =>\n      Object.entries(palette).filter(([, color]) => {\n        return /^#[0-9A-F]{6}$/i.test(color);\n      }),\n    [palette]\n  );\n\n  const [values, setValues] = useState(() => opaqueColors.map(([, color]) => color));\n\n  return (\n    <Grid container={{ rows: '1fr 2fr' }} style={{ height: '100vh' }}>\n      <Grid\n        container={{\n          cols: '1fr 1fr 1fr 1fr',\n          alignItems: 'center',\n          colGap: 4,\n          rowGap: 1\n        }}\n        style={{ padding: '1rem' }}\n      >\n        <>\n          {values.map((color, i) => {\n            const key = `color-${i}`;\n            return (\n              <div key={key}>\n                <ColorPicker\n                  inline\n                  label={opaqueColors[i][0]}\n                  value={color}\n                  onChange={e => {\n                    const newColor = e.hex;\n                    setValues(cur => {\n                      return cur.map((c, j) => {\n                        if (i === j) return newColor;\n                        return c;\n                      });\n                    });\n                  }}\n                />\n              </div>\n            );\n          })}\n        </>\n      </Grid>\n\n      <Grid\n        container={{\n          cols: '1fr 1fr 1fr 1fr',\n          gap: 0.125\n        }}\n      >\n        {values.map((color, i) => {\n          const key = `color-${i}`;\n          return (\n            <Flex\n              container={{ justify: 'center', alignItems: 'center' }}\n              as={StyledColorPane}\n              color={color}\n              key={key}\n            >\n              <Text variant='h1' as='span'>\n                {color}\n              </Text>\n            </Flex>\n          );\n        })}\n      </Grid>\n    </Grid>\n  );\n};\n"]}

package/lib/core/ComboBox/ComboBox.stories.d.ts

@@ -17,5 +17,15 @@ export declare const NonFilterableSingleSelect: Story<ComboBoxStoryProps>;
 export declare const FilterableMultiSelect: Story<ComboBoxStoryProps>;
 export declare const NonFilterableMultiSelect: Story<ComboBoxStoryProps>;
 export declare const FilterableMultiSelectSelectableParent: Story<ComboBoxStoryProps>;
+/**
+______ _ _ _                 _     _     ___  ___      _ _   _        _                     _____ _     _ _     _
+|  ___(_) | |               | |   | |    |  \/  |     | | | (_)      | |                   /  __ \ |   (_) |   | |
+| |_   _| | |_ ___ _ __ __ _| |__ | | ___| .  . |_   _| | |_ _ ______| |     __ _ _____   _| /  \/ |__  _| | __| |_ __ ___ _ __
+|  _| | | | __/ _ \ '__/ _` | '_ \| |/ _ \ |\/| | | | | | __| |______| |    / _` |_  / | | | |   | '_ \| | |/ _` | '__/ _ \ '_ \
+| |   | | | ||  __/ | | (_| | |_) | |  __/ |  | | |_| | | |_| |      | |___| (_| |/ /| |_| | \__/\ | | | | | (_| | | |  __/ | | |
+\_|   |_|_|\__\___|_|  \__,_|_.__/|_|\___\_|  |_/\__,_|_|\__|_|      \_____/\__,_/___|\__, |\____/_| |_|_|_|\__,_|_|  \___|_| |_|
+                                                                                       __/ |
+                                                                                      |___/
+ */
 export declare const FilterableMultiSelectLazyChildren: Story<ComboBoxStoryProps>;
 //# sourceMappingURL=ComboBox.stories.d.ts.map

package/lib/core/ComboBox/ComboBox.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ComboBox.stories.d.ts","sourceRoot":"","sources":["../../../src/core/ComboBox/ComboBox.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAEL,aAAa,EAId,MAAM,yBAAyB,CAAC;;AAIjC,wBAsBU;AAEV,UAAU,kBAAkB;IAC1B,KAAK,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAC/B,WAAW,CAAC,EAAE,aAAa,CAAC,aAAa,CAAC,CAAC;IAC3C,IAAI,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;IAC7B,WAAW,CAAC,EAAE,aAAa,CAAC,aAAa,CAAC,CAAC;IAC3C,MAAM,CAAC,EAAE,aAAa,CAAC,QAAQ,CAAC,CAAC;IACjC,QAAQ,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;IACrC,QAAQ,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;IACrC,QAAQ,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;CACtC;AASD,eAAO,MAAM,sBAAsB,EAAE,KAAK,CAAC,kBAAkB,CAyE5D,CAAC;AAcF,eAAO,MAAM,yBAAyB,EAAE,KAAK,CAAC,kBAAkB,CAwE/D,CAAC;AAeF,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,kBAAkB,CAyD3D,CAAC;AAaF,eAAO,MAAM,wBAAwB,EAAE,KAAK,CAAC,kBAAkB,CAyC9D,CAAC;AAgBF,eAAO,MAAM,qCAAqC,EAAE,KAAK,CAAC,kBAAkB,CA2D3E,CAAC;AAgBF,eAAO,MAAM,iCAAiC,EAAE,KAAK,CAAC,kBAAkB,CA4HvE,CAAC"}
+{"version":3,"file":"ComboBox.stories.d.ts","sourceRoot":"","sources":["../../../src/core/ComboBox/ComboBox.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAEL,aAAa,EAId,MAAM,yBAAyB,CAAC;;AAIjC,wBAsBU;AAEV,UAAU,kBAAkB;IAC1B,KAAK,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAC/B,WAAW,CAAC,EAAE,aAAa,CAAC,aAAa,CAAC,CAAC;IAC3C,IAAI,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;IAC7B,WAAW,CAAC,EAAE,aAAa,CAAC,aAAa,CAAC,CAAC;IAC3C,MAAM,CAAC,EAAE,aAAa,CAAC,QAAQ,CAAC,CAAC;IACjC,QAAQ,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;IACrC,QAAQ,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;IACrC,QAAQ,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;CACtC;AASD,eAAO,MAAM,sBAAsB,EAAE,KAAK,CAAC,kBAAkB,CAyE5D,CAAC;AAcF,eAAO,MAAM,yBAAyB,EAAE,KAAK,CAAC,kBAAkB,CAwE/D,CAAC;AAeF,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,kBAAkB,CAyD3D,CAAC;AAaF,eAAO,MAAM,wBAAwB,EAAE,KAAK,CAAC,kBAAkB,CAyC9D,CAAC;AAgBF,eAAO,MAAM,qCAAqC,EAAE,KAAK,CAAC,kBAAkB,CA2D3E,CAAC;AAMF;;;;;;;;;GASG;AACH,eAAO,MAAM,iCAAiC,EAAE,KAAK,CAAC,kBAAkB,CA4HvE,CAAC"}