@pega/cosmos-react-demos 2.0.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Icon/Icon.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;;AAoBxC,wBAGU;AAIV,eAAO,MAAM,UAAU,mBAItB,CAAC;AAEF,eAAO,MAAM,WAAW,mBAEvB,CAAC;AAkCF,eAAO,MAAM,QAAQ,mBAoEpB,CAAC"}

package/lib/core/Icon/Icon.stories.jsx

@@ -0,0 +1,84 @@
+import { useMemo, useState, useCallback, useRef } from 'react';
+import styled, { css } from 'styled-components';
+import { defaultThemeProp, EmptyState, StyledEmptyState, Flex, Icon, icons, registerIcon, Progress, SearchInput, Text, useItemIntersection } from '@pega/cosmos-react-core';
+import * as pegasusIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/pegasus.icon';
+export default {
+    title: 'Core/Icon',
+    component: Icon
+};
+registerIcon(pegasusIcon);
+export const StaticIcon = () => {
+    return (<Icon style={{ height: '5rem', width: '5rem' }} name='pegasus' aria-label='Informative label'/>);
+};
+export const DynamicIcon = () => {
+    return <Icon style={{ height: '5rem', width: '5rem' }} name='pega'/>;
+};
+const PAGE_SIZE = 50;
+const StyledIconList = styled.ul `
+  overflow-x: hidden;
+  overflow-y: auto;
+  list-style: none;
+  height: 100%;
+
+  ${StyledEmptyState} {
+    width: 100%;
+    height: 100%;
+  }
+`;
+const StyledIconListItem = styled.li(({ theme }) => css `
+      padding: calc(2 * ${theme.base.spacing});
+      border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};
+      width: 20%;
+    `);
+StyledIconListItem.defaultProps = defaultThemeProp;
+const StyledProgressContainer = styled.li `
+  position: relative;
+  height: 2.8rem;
+  width: 100%;
+`;
+export const IconList = () => {
+    const [search, setSearch] = useState('');
+    const totalMatches = useRef(0);
+    const [currentPageIndex, setCurrentPageIndex] = useState(0);
+    const ulRef = useRef(null);
+    const listContent = useMemo(() => {
+        const matches = search
+            ? icons.filter(icon => icon.includes(search))
+            : icons;
+        const totalItemsToRender = (1 + currentPageIndex) * PAGE_SIZE;
+        totalMatches.current = matches.length;
+        if (matches.length === 0) {
+            return <EmptyState forwardedAs='li'/>;
+        }
+        return matches.slice(0, totalItemsToRender).map(icon => (<Flex key={icon} container={{
+                direction: 'column',
+                justify: 'center',
+                alignItems: 'center',
+                alignContent: 'center'
+            }} as={StyledIconListItem}>
+        <Icon style={{ height: '3rem', width: '3rem' }} name={icon}/>
+        <p style={{ textAlign: 'center' }}>{icon}</p>
+      </Flex>));
+    }, [search, currentPageIndex]);
+    const itemsShown = Math.min(totalMatches.current, (1 + currentPageIndex) * PAGE_SIZE);
+    const itemsToLoadMore = totalMatches.current - itemsShown;
+    useItemIntersection(ulRef, itemsShown, () => {
+        setCurrentPageIndex(prev => 1 + prev);
+    }, ':scope > li');
+    const onSearchChange = useCallback((value) => {
+        setSearch(value);
+        setCurrentPageIndex(0);
+        ulRef?.current?.scrollIntoView();
+    }, []);
+    return (<Flex container={{ direction: 'column', gap: 1 }} style={{ height: '90vh' }}>
+      <SearchInput value={search} onSearchChange={onSearchChange}/>
+      {itemsShown > 0 && <Text variant='secondary'>{totalMatches.current} results</Text>}
+      <Flex container={{ wrap: 'wrap', alignContent: 'start' }} as={StyledIconList} ref={ulRef}>
+        {listContent}
+        {itemsToLoadMore > 0 && (<StyledProgressContainer>
+            <Progress placement='local'/>
+          </StyledProgressContainer>)}
+      </Flex>
+    </Flex>);
+};
+//# sourceMappingURL=Icon.stories.jsx.map

package/lib/core/Icon/Icon.stories.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.stories.jsx","sourceRoot":"","sources":["../../../src/core/Icon/Icon.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta } from '@storybook/react';\nimport { useMemo, useState, useCallback, useRef } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  defaultThemeProp,\n  EmptyState,\n  StyledEmptyState,\n  Flex,\n  Icon,\n  icons,\n  IconNames,\n  registerIcon,\n  Progress,\n  SearchInput,\n  Text,\n  useItemIntersection\n} from '@pega/cosmos-react-core';\nimport * as pegasusIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/pegasus.icon';\n\nexport default {\n  title: 'Core/Icon',\n  component: Icon\n} as Meta;\n\nregisterIcon(pegasusIcon);\n\nexport const StaticIcon = () => {\n  return (\n    <Icon style={{ height: '5rem', width: '5rem' }} name='pegasus' aria-label='Informative label' />\n  );\n};\n\nexport const DynamicIcon = () => {\n  return <Icon style={{ height: '5rem', width: '5rem' }} name='pega' />;\n};\n\n// Default # of icons to display in a page\nconst PAGE_SIZE = 50;\n\nconst StyledIconList = styled.ul`\n  overflow-x: hidden;\n  overflow-y: auto;\n  list-style: none;\n  height: 100%;\n\n  ${StyledEmptyState} {\n    width: 100%;\n    height: 100%;\n  }\n`;\n\nconst StyledIconListItem = styled.li(\n  ({ theme }) =>\n    css`\n      padding: calc(2 * ${theme.base.spacing});\n      border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};\n      width: 20%;\n    `\n);\n\nStyledIconListItem.defaultProps = defaultThemeProp;\n\nconst StyledProgressContainer = styled.li`\n  position: relative;\n  height: 2.8rem;\n  width: 100%;\n`;\n\nexport const IconList = () => {\n  const [search, setSearch] = useState('');\n  const totalMatches = useRef(0);\n  const [currentPageIndex, setCurrentPageIndex] = useState(0);\n  const ulRef = useRef<HTMLUListElement>(null);\n\n  const listContent = useMemo(() => {\n    const matches: readonly IconNames[] = search\n      ? icons.filter(icon => icon.includes(search))\n      : icons;\n    const totalItemsToRender = (1 + currentPageIndex) * PAGE_SIZE;\n    totalMatches.current = matches.length;\n\n    if (matches.length === 0) {\n      return <EmptyState forwardedAs='li' />;\n    }\n\n    return matches.slice(0, totalItemsToRender).map(icon => (\n      <Flex\n        key={icon}\n        container={{\n          direction: 'column',\n          justify: 'center',\n          alignItems: 'center',\n          alignContent: 'center'\n        }}\n        as={StyledIconListItem}\n      >\n        <Icon style={{ height: '3rem', width: '3rem' }} name={icon} />\n        <p style={{ textAlign: 'center' }}>{icon}</p>\n      </Flex>\n    ));\n  }, [search, currentPageIndex]);\n\n  const itemsShown = Math.min(totalMatches.current, (1 + currentPageIndex) * PAGE_SIZE);\n  const itemsToLoadMore = totalMatches.current - itemsShown;\n\n  // When reaches to the bottom of the results, loads next PAGE_SIZE items\n  useItemIntersection(\n    ulRef,\n    itemsShown,\n    () => {\n      setCurrentPageIndex(prev => 1 + prev);\n    },\n    ':scope > li'\n  );\n\n  // on search, reset to first page and scroll to top\n  const onSearchChange = useCallback((value: string) => {\n    setSearch(value);\n    setCurrentPageIndex(0);\n    ulRef?.current?.scrollIntoView();\n  }, []);\n\n  return (\n    <Flex container={{ direction: 'column', gap: 1 }} style={{ height: '90vh' }}>\n      <SearchInput value={search} onSearchChange={onSearchChange} />\n      {itemsShown > 0 && <Text variant='secondary'>{totalMatches.current} results</Text>}\n      <Flex container={{ wrap: 'wrap', alignContent: 'start' }} as={StyledIconList} ref={ulRef}>\n        {listContent}\n        {itemsToLoadMore > 0 && (\n          <StyledProgressContainer>\n            <Progress placement='local' />\n          </StyledProgressContainer>\n        )}\n      </Flex>\n    </Flex>\n  );\n};\n"]}

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

@@ -0,0 +1,6 @@
+import { Meta, Story } from '@storybook/react';
+import { IconPickerProps } from '@pega/cosmos-react-core';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const IconPickerDemo: Story<IconPickerProps>;
+//# sourceMappingURL=IconPicker.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"IconPicker.stories.d.ts","sourceRoot":"","sources":["../../../src/core/IconPicker/IconPicker.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAAc,eAAe,EAAE,MAAM,yBAAyB,CAAC;;AAEtE,wBA0BU;AAEV,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,eAAe,CAuBjD,CAAC"}

package/lib/core/IconPicker/IconPicker.stories.jsx

@@ -0,0 +1,39 @@
+import { useEffect, useState } from 'react';
+import { IconPicker } from '@pega/cosmos-react-core';
+export default {
+    title: 'Core/IconPicker',
+    component: IconPicker,
+    args: {
+        defaultSelection: 'pegasus',
+        label: 'IconPicker input',
+        labelHidden: false,
+        info: 'Type in or click to expand the Popover',
+        placeholder: '',
+        status: undefined,
+        required: false,
+        disabled: false,
+        readOnly: false
+    },
+    argTypes: {
+        defaultSelection: { control: { type: 'text' } },
+        initialItemsRenderLimit: { control: { type: 'number' } },
+        label: { control: { type: 'text' } },
+        labelHidden: { control: { type: 'boolean' } },
+        info: { control: { type: 'text' } },
+        placeholder: { control: { type: 'text' } },
+        status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },
+        required: { control: { type: 'boolean' } },
+        disabled: { control: { type: 'boolean' } },
+        readOnly: { control: { type: 'boolean' } }
+    }
+};
+export const IconPickerDemo = args => {
+    const [value, setValue] = useState(args.defaultSelection);
+    useEffect(() => {
+        setValue(args.defaultSelection);
+    }, [args.defaultSelection]);
+    return (<IconPicker defaultSelection={value} label={args.label} labelHidden={args.labelHidden} info={args.info} placeholder={args.placeholder} status={args.status} required={args.required} disabled={args.disabled} readOnly={args.readOnly} onSelect={(icon) => {
+            setValue(icon);
+        }}/>);
+};
+//# sourceMappingURL=IconPicker.stories.jsx.map

package/lib/core/IconPicker/IconPicker.stories.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconPicker.stories.jsx","sourceRoot":"","sources":["../../../src/core/IconPicker/IconPicker.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,EAAE,UAAU,EAAmB,MAAM,yBAAyB,CAAC;AAEtE,eAAe;IACb,KAAK,EAAE,iBAAiB;IACxB,SAAS,EAAE,UAAU;IACrB,IAAI,EAAE;QACJ,gBAAgB,EAAE,SAAS;QAC3B,KAAK,EAAE,kBAAkB;QACzB,WAAW,EAAE,KAAK;QAClB,IAAI,EAAE,wCAAwC;QAC9C,WAAW,EAAE,EAAE;QACf,MAAM,EAAE,SAAS;QACjB,QAAQ,EAAE,KAAK;QACf,QAAQ,EAAE,KAAK;QACf,QAAQ,EAAE,KAAK;KAChB;IACD,QAAQ,EAAE;QACR,gBAAgB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;QAC/C,uBAAuB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;QACxD,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;QACpC,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;QAC7C,IAAI,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;QACnC,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;QAC1C,MAAM,EAAE,EAAE,OAAO,EAAE,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;QAC5F,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;KAC3C;CACM,CAAC;AAEV,MAAM,CAAC,MAAM,cAAc,GAA2B,IAAI,CAAC,EAAE;IAC3D,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;IAE1D,SAAS,CAAC,GAAG,EAAE;QACb,QAAQ,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;IAClC,CAAC,EAAE,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC;IAE5B,OAAO,CACL,CAAC,UAAU,CACT,gBAAgB,CAAC,CAAC,KAAK,CAAC,CACxB,KAAK,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAClB,WAAW,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAC9B,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAChB,WAAW,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAC9B,MAAM,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CACpB,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CACxB,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CACxB,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CACxB,QAAQ,CAAC,CAAC,CAAC,IAAY,EAAE,EAAE;YACzB,QAAQ,CAAC,IAAI,CAAC,CAAC;QACjB,CAAC,CAAC,EACF,CACH,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useEffect, useState } from 'react';\n\nimport { IconPicker, IconPickerProps } from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/IconPicker',\n  component: IconPicker,\n  args: {\n    defaultSelection: 'pegasus',\n    label: 'IconPicker input',\n    labelHidden: false,\n    info: 'Type in or click to expand the Popover',\n    placeholder: '',\n    status: undefined,\n    required: false,\n    disabled: false,\n    readOnly: false\n  },\n  argTypes: {\n    defaultSelection: { control: { type: 'text' } },\n    initialItemsRenderLimit: { control: { type: 'number' } },\n    label: { control: { type: 'text' } },\n    labelHidden: { control: { type: 'boolean' } },\n    info: { control: { type: 'text' } },\n    placeholder: { control: { type: 'text' } },\n    status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },\n    required: { control: { type: 'boolean' } },\n    disabled: { control: { type: 'boolean' } },\n    readOnly: { control: { type: 'boolean' } }\n  }\n} as Meta;\n\nexport const IconPickerDemo: Story<IconPickerProps> = args => {\n  const [value, setValue] = useState(args.defaultSelection);\n\n  useEffect(() => {\n    setValue(args.defaultSelection);\n  }, [args.defaultSelection]);\n\n  return (\n    <IconPicker\n      defaultSelection={value}\n      label={args.label}\n      labelHidden={args.labelHidden}\n      info={args.info}\n      placeholder={args.placeholder}\n      status={args.status}\n      required={args.required}\n      disabled={args.disabled}\n      readOnly={args.readOnly}\n      onSelect={(icon: string) => {\n        setValue(icon);\n      }}\n    />\n  );\n};\n"]}

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { Meta } from '@storybook/react';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const ImageDemo: () => JSX.Element;
+//# sourceMappingURL=Image.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Image.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Image/Image.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;;AAIxC,wBAGU;AAEV,eAAO,MAAM,SAAS,mBAIrB,CAAC"}

package/lib/core/Image/Image.stories.jsx

@@ -0,0 +1,9 @@
+import { Image } from '@pega/cosmos-react-core';
+export default {
+    title: 'Core/Image',
+    component: Image
+};
+export const ImageDemo = () => {
+    return (<Image src='https://www.pega.com/themes/custom/pegawww_theme/images/pega-logo.svg' alt='Pega'/>);
+};
+//# sourceMappingURL=Image.stories.jsx.map

package/lib/core/Image/Image.stories.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"Image.stories.jsx","sourceRoot":"","sources":["../../../src/core/Image/Image.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAEhD,eAAe;IACb,KAAK,EAAE,YAAY;IACnB,SAAS,EAAE,KAAK;CACT,CAAC;AAEV,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,EAAE;IAC5B,OAAO,CACL,CAAC,KAAK,CAAC,GAAG,CAAC,uEAAuE,CAAC,GAAG,CAAC,MAAM,EAAG,CACjG,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { Meta } from '@storybook/react';\n\nimport { Image } from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/Image',\n  component: Image\n} as Meta;\n\nexport const ImageDemo = () => {\n  return (\n    <Image src='https://www.pega.com/themes/custom/pegawww_theme/images/pega-logo.svg' alt='Pega' />\n  );\n};\n"]}

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

@@ -0,0 +1,9 @@
+import { Meta, Story } from '@storybook/react';
+import { InputProps } from '@pega/cosmos-react-core';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+interface InputStoryProps extends InputProps {
+    showAction: boolean;
+}
+export declare const InputDemo: Story<InputStoryProps>;
+//# sourceMappingURL=Input.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Input.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Input/Input.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAAS,UAAU,EAAE,MAAM,yBAAyB,CAAC;;AAE5D,wBAGU;AAEV,UAAU,eAAgB,SAAQ,UAAU;IAC1C,UAAU,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,eAAe,CA0B5C,CAAC"}

package/lib/core/Input/Input.stories.jsx

@@ -0,0 +1,44 @@
+import { Input } from '@pega/cosmos-react-core';
+export default {
+    title: 'Core/Input',
+    component: Input
+};
+export const InputDemo = (args) => {
+    return (<Input id='input-demo' type={args.type} label={args.label} labelHidden={args.labelHidden} info={args.info} placeholder={args.placeholder} status={args.status} required={args.required} disabled={args.disabled} readOnly={args.readOnly} actions={args.showAction
+            ? [
+                {
+                    id: 'config',
+                    text: 'Configure',
+                    icon: 'gear'
+                }
+            ]
+            : undefined}/>);
+};
+InputDemo.args = {
+    type: 'text',
+    showAction: false,
+    label: 'Input',
+    labelHidden: false,
+    info: 'Enter some value',
+    placeholder: 'Enter your input',
+    status: undefined,
+    required: false,
+    disabled: false,
+    readOnly: false
+};
+InputDemo.argTypes = {
+    type: {
+        options: ['text', 'password', 'email', 'url'],
+        control: { type: 'select' }
+    },
+    showAction: { control: { type: 'boolean' } },
+    label: { control: { type: 'text' } },
+    labelHidden: { control: { type: 'boolean' } },
+    info: { control: { type: 'text' } },
+    placeholder: { control: { type: 'text' } },
+    status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },
+    required: { control: { type: 'boolean' } },
+    disabled: { control: { type: 'boolean' } },
+    readOnly: { control: { type: 'boolean' } }
+};
+//# sourceMappingURL=Input.stories.jsx.map

package/lib/core/Input/Input.stories.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.stories.jsx","sourceRoot":"","sources":["../../../src/core/Input/Input.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,EAAc,MAAM,yBAAyB,CAAC;AAE5D,eAAe;IACb,KAAK,EAAE,YAAY;IACnB,SAAS,EAAE,KAAK;CACT,CAAC;AAMV,MAAM,CAAC,MAAM,SAAS,GAA2B,CAAC,IAAqB,EAAE,EAAE;IACzE,OAAO,CACL,CAAC,KAAK,CACJ,EAAE,CAAC,YAAY,CACf,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAChB,KAAK,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAClB,WAAW,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAC9B,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAChB,WAAW,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAC9B,MAAM,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CACpB,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CACxB,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CACxB,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CACxB,OAAO,CAAC,CACN,IAAI,CAAC,UAAU;YACb,CAAC,CAAC;gBACE;oBACE,EAAE,EAAE,QAAQ;oBACZ,IAAI,EAAE,WAAW;oBACjB,IAAI,EAAE,MAAM;iBACb;aACF;YACH,CAAC,CAAC,SAAS,CACd,EACD,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,SAAS,CAAC,IAAI,GAAG;IACf,IAAI,EAAE,MAAM;IACZ,UAAU,EAAE,KAAK;IACjB,KAAK,EAAE,OAAO;IACd,WAAW,EAAE,KAAK;IAClB,IAAI,EAAE,kBAAkB;IACxB,WAAW,EAAE,kBAAkB;IAC/B,MAAM,EAAE,SAAS;IACjB,QAAQ,EAAE,KAAK;IACf,QAAQ,EAAE,KAAK;IACf,QAAQ,EAAE,KAAK;CAChB,CAAC;AAEF,SAAS,CAAC,QAAQ,GAAG;IACnB,IAAI,EAAE;QACJ,OAAO,EAAE,CAAC,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,KAAK,CAAC;QAC7C,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;KAC5B;IACD,UAAU,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC5C,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACpC,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC7C,IAAI,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACnC,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IAC1C,MAAM,EAAE,EAAE,OAAO,EAAE,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IAC5F,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC1C,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC1C,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;CAC3C,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { Input, InputProps } from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/Input',\n  component: Input\n} as Meta;\n\ninterface InputStoryProps extends InputProps {\n  showAction: boolean;\n}\n\nexport const InputDemo: Story<InputStoryProps> = (args: InputStoryProps) => {\n  return (\n    <Input\n      id='input-demo'\n      type={args.type}\n      label={args.label}\n      labelHidden={args.labelHidden}\n      info={args.info}\n      placeholder={args.placeholder}\n      status={args.status}\n      required={args.required}\n      disabled={args.disabled}\n      readOnly={args.readOnly}\n      actions={\n        args.showAction\n          ? [\n              {\n                id: 'config',\n                text: 'Configure',\n                icon: 'gear'\n              }\n            ]\n          : undefined\n      }\n    />\n  );\n};\n\nInputDemo.args = {\n  type: 'text',\n  showAction: false,\n  label: 'Input',\n  labelHidden: false,\n  info: 'Enter some value',\n  placeholder: 'Enter your input',\n  status: undefined,\n  required: false,\n  disabled: false,\n  readOnly: false\n};\n\nInputDemo.argTypes = {\n  type: {\n    options: ['text', 'password', 'email', 'url'],\n    control: { type: 'select' }\n  },\n  showAction: { control: { type: 'boolean' } },\n  label: { control: { type: 'text' } },\n  labelHidden: { control: { type: 'boolean' } },\n  info: { control: { type: 'text' } },\n  placeholder: { control: { type: 'text' } },\n  status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },\n  required: { control: { type: 'boolean' } },\n  disabled: { control: { type: 'boolean' } },\n  readOnly: { control: { type: 'boolean' } }\n};\n"]}

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

@@ -0,0 +1,6 @@
+import { Meta, Story } from '@storybook/react';
+import { LabelProps } from '@pega/cosmos-react-core';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const LabelDemo: Story<LabelProps>;
+//# sourceMappingURL=Label.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Label.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Label/Label.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAAS,UAAU,EAAE,MAAM,yBAAyB,CAAC;;AAE5D,wBAGU;AAEV,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,UAAU,CAEvC,CAAC"}

package/lib/core/Label/Label.stories.jsx

@@ -0,0 +1,15 @@
+import { Label } from '@pega/cosmos-react-core';
+export default {
+    title: 'Core/Label',
+    component: Label
+};
+export const LabelDemo = (args) => {
+    return <Label labelHidden={args.labelHidden}>Label</Label>;
+};
+LabelDemo.args = {
+    labelHidden: false
+};
+LabelDemo.argTypes = {
+    labelHidden: { control: { type: 'boolean' } }
+};
+//# sourceMappingURL=Label.stories.jsx.map

package/lib/core/Label/Label.stories.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"Label.stories.jsx","sourceRoot":"","sources":["../../../src/core/Label/Label.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,EAAc,MAAM,yBAAyB,CAAC;AAE5D,eAAe;IACb,KAAK,EAAE,YAAY;IACnB,SAAS,EAAE,KAAK;CACT,CAAC;AAEV,MAAM,CAAC,MAAM,SAAS,GAAsB,CAAC,IAAgB,EAAE,EAAE;IAC/D,OAAO,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;AAC7D,CAAC,CAAC;AAEF,SAAS,CAAC,IAAI,GAAG;IACf,WAAW,EAAE,KAAK;CACnB,CAAC;AAEF,SAAS,CAAC,QAAQ,GAAG;IACnB,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;CAC9C,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { Label, LabelProps } from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/Label',\n  component: Label\n} as Meta;\n\nexport const LabelDemo: Story<LabelProps> = (args: LabelProps) => {\n  return <Label labelHidden={args.labelHidden}>Label</Label>;\n};\n\nLabelDemo.args = {\n  labelHidden: false\n};\n\nLabelDemo.argTypes = {\n  labelHidden: { control: { type: 'boolean' } }\n};\n"]}

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

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { Meta } from '@storybook/react';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const MultiImage: () => JSX.Element;
+export declare const SingleImage: () => JSX.Element;
+export declare const MultiImageWithCycling: () => JSX.Element;
+export declare const ImageLoadError: () => JSX.Element;
+//# sourceMappingURL=Lightbox.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Lightbox.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Lightbox/Lightbox.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;;AAWxC,wBAGU;AAwIV,eAAO,MAAM,UAAU,mBAA6B,CAAC;AACrD,eAAO,MAAM,WAAW,mBAAuC,CAAC;AAChE,eAAO,MAAM,qBAAqB,mBAAmC,CAAC;AACtE,eAAO,MAAM,cAAc,mBAAmC,CAAC"}

package/lib/core/Lightbox/Lightbox.stories.jsx

@@ -0,0 +1,106 @@
+import { useRef, useState } from 'react';
+import { Button, DateTimeDisplay, Lightbox } from '@pega/cosmos-react-core';
+export default {
+    title: 'Core/Lightbox',
+    component: Lightbox
+};
+const mockAPIImageResources = [
+    {
+        id: 'photo-1497752531616-c3afd9760a11',
+        name: 'Image 1',
+        description: 'Descriptive text about Image 1',
+        mime_type: 'image/avif',
+        media_url: 'https://images.unsplash.com/photo-1497752531616-c3afd9760a11?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80'
+    },
+    {
+        id: 'photo-1470093851219-69951fcbb533',
+        name: 'Image 2',
+        description: 'Descriptive text about Image 2',
+        mime_type: 'image/avif',
+        media_url: 'https://images.unsplash.com/photo-1470093851219-69951fcbb533?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80'
+    },
+    {
+        id: 'photo-1447684808650-354ae64db5b8',
+        name: 'Image 3',
+        description: 'Descriptive text about Image 3',
+        mime_type: 'image/avif',
+        media_url: 'https://images.unsplash.com/photo-1447684808650-354ae64db5b8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2094&q=80'
+    },
+    {
+        id: 'photo-1425082661705-1834bfd09dca',
+        name: 'Image 4',
+        description: 'Descriptive text about Image 4',
+        mime_type: 'image/avif',
+        media_url: 'https://images.unsplash.com/photo-1425082661705-1834bfd09dca?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2110&q=80'
+    },
+    {
+        id: 'photo-1494256997604-768d1f608cac',
+        name: 'Image 5',
+        description: 'Descriptive text about Image 5',
+        mime_type: 'image/avif',
+        media_url: 'https://images.unsplash.com/photo-1494256997604-768d1f608cac?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2301&q=80'
+    },
+    {
+        id: 'photo-1500694216671-a4e54fc4b513',
+        name: 'Image 6',
+        description: 'Descriptive text about Image 6',
+        mime_type: 'image/avif',
+        media_url: 'https://images.unsplash.com/photo-1500694216671-a4e54fc4b513?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2092&q=80'
+    },
+    {
+        id: 'photo-1638292597251-6fe6b2ba50f9',
+        name: 'Image 7',
+        description: 'Descriptive text about Image 7',
+        mime_type: 'image/avif',
+        media_url: 'https://images.unsplash.com/photo-1638292597251-6fe6b2ba50f9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1287&q=80'
+    }
+];
+const mockBadImageResource = {
+    id: 'error',
+    name: 'Some image',
+    description: 'Descriptive text about Some image',
+    mime_type: 'image/avif',
+    media_url: ''
+};
+const BaseLightboxDemo = ({ cycle, limit, error }) => {
+    const demoButtonRef = useRef(null);
+    const [images, setImages] = useState(null);
+    const onClick = () => {
+        setImages((error ? [mockBadImageResource] : mockAPIImageResources.slice(0, limit)).map(({ id, name, description, mime_type, media_url }) => {
+            return {
+                id,
+                name,
+                description,
+                src: media_url,
+                metadata: [
+                    mime_type.split('/').pop(),
+                    <DateTimeDisplay value={new Date()} variant='date'/>
+                ]
+            };
+        }));
+    };
+    const onItemDownload = async (id) => {
+        const a = document.createElement('a');
+        a.href = await fetch(id)
+            .then(response => response.blob())
+            .then(blob => URL.createObjectURL(blob));
+        a.download = images?.find(image => image.id === id)?.name ?? id;
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+    };
+    return (<>
+      <Button ref={demoButtonRef} onClick={onClick} autoFocus>
+        Open Lightbox
+      </Button>
+      {images && (<Lightbox items={images} cycle={cycle} onAfterClose={() => {
+                setImages(null);
+                demoButtonRef.current?.focus();
+            }} onItemDownload={onItemDownload}/>)}
+    </>);
+};
+export const MultiImage = () => <BaseLightboxDemo />;
+export const SingleImage = () => <BaseLightboxDemo limit={1}/>;
+export const MultiImageWithCycling = () => <BaseLightboxDemo cycle/>;
+export const ImageLoadError = () => <BaseLightboxDemo error/>;
+//# sourceMappingURL=Lightbox.stories.jsx.map

package/lib/core/Lightbox/Lightbox.stories.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"Lightbox.stories.jsx","sourceRoot":"","sources":["../../../src/core/Lightbox/Lightbox.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta } from '@storybook/react';\nimport { useRef, useState } from 'react';\n\nimport {\n  Button,\n  DateTimeDisplay,\n  Lightbox,\n  LightboxProps,\n  LightboxItem\n} from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/Lightbox',\n  component: Lightbox\n} as Meta;\n\nconst mockAPIImageResources = [\n  {\n    id: 'photo-1497752531616-c3afd9760a11',\n    name: 'Image 1',\n    description: 'Descriptive text about Image 1',\n    // cSpell:disable-next-line\n    mime_type: 'image/avif',\n    media_url:\n      'https://images.unsplash.com/photo-1497752531616-c3afd9760a11?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80'\n  },\n  {\n    id: 'photo-1470093851219-69951fcbb533',\n    name: 'Image 2',\n    description: 'Descriptive text about Image 2',\n    // cSpell:disable-next-line\n    mime_type: 'image/avif',\n    media_url:\n      'https://images.unsplash.com/photo-1470093851219-69951fcbb533?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80'\n  },\n  {\n    id: 'photo-1447684808650-354ae64db5b8',\n    name: 'Image 3',\n    description: 'Descriptive text about Image 3',\n    // cSpell:disable-next-line\n    mime_type: 'image/avif',\n    media_url:\n      'https://images.unsplash.com/photo-1447684808650-354ae64db5b8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2094&q=80'\n  },\n  {\n    id: 'photo-1425082661705-1834bfd09dca',\n    name: 'Image 4',\n    description: 'Descriptive text about Image 4',\n    // cSpell:disable-next-line\n    mime_type: 'image/avif',\n    media_url:\n      'https://images.unsplash.com/photo-1425082661705-1834bfd09dca?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2110&q=80'\n  },\n  {\n    id: 'photo-1494256997604-768d1f608cac',\n    name: 'Image 5',\n    description: 'Descriptive text about Image 5',\n    // cSpell:disable-next-line\n    mime_type: 'image/avif',\n    media_url:\n      'https://images.unsplash.com/photo-1494256997604-768d1f608cac?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2301&q=80'\n  },\n  {\n    id: 'photo-1500694216671-a4e54fc4b513',\n    name: 'Image 6',\n    description: 'Descriptive text about Image 6',\n    // cSpell:disable-next-line\n    mime_type: 'image/avif',\n    media_url:\n      'https://images.unsplash.com/photo-1500694216671-a4e54fc4b513?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2092&q=80'\n  },\n  {\n    id: 'photo-1638292597251-6fe6b2ba50f9',\n    name: 'Image 7',\n    description: 'Descriptive text about Image 7',\n    // cSpell:disable-next-line\n    mime_type: 'image/avif',\n    media_url:\n      'https://images.unsplash.com/photo-1638292597251-6fe6b2ba50f9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1287&q=80'\n  }\n];\n\nconst mockBadImageResource = {\n  id: 'error',\n  name: 'Some image',\n  description: 'Descriptive text about Some image',\n  // cSpell:disable-next-line\n  mime_type: 'image/avif',\n  media_url: ''\n};\n\nconst BaseLightboxDemo = ({\n  cycle,\n  limit,\n  error\n}: Pick<LightboxProps, 'cycle'> & { limit?: number; error?: true }) => {\n  const demoButtonRef = useRef<HTMLButtonElement>(null);\n  const [images, setImages] = useState<LightboxProps['items'] | null>(null);\n\n  const onClick = () => {\n    setImages(\n      (error ? [mockBadImageResource] : mockAPIImageResources.slice(0, limit)).map(\n        ({ id, name, description, mime_type, media_url }) => {\n          return {\n            id,\n            name,\n            description,\n            src: media_url,\n            metadata: [\n              mime_type.split('/').pop(),\n              <DateTimeDisplay value={new Date()} variant='date' />\n            ]\n          };\n        }\n      )\n    );\n  };\n\n  const onItemDownload = async (id: LightboxItem['id']) => {\n    const a = document.createElement('a');\n    a.href = await fetch(id)\n      .then(response => response.blob())\n      .then(blob => URL.createObjectURL(blob));\n\n    a.download = images?.find(image => image.id === id)?.name ?? id;\n    document.body.appendChild(a);\n    a.click();\n    document.body.removeChild(a);\n  };\n\n  return (\n    <>\n      <Button ref={demoButtonRef} onClick={onClick} autoFocus>\n        Open Lightbox\n      </Button>\n      {images && (\n        <Lightbox\n          items={images}\n          cycle={cycle}\n          onAfterClose={() => {\n            setImages(null);\n            demoButtonRef.current?.focus();\n          }}\n          onItemDownload={onItemDownload}\n        />\n      )}\n    </>\n  );\n};\n\nexport const MultiImage = () => <BaseLightboxDemo />;\nexport const SingleImage = () => <BaseLightboxDemo limit={1} />;\nexport const MultiImageWithCycling = () => <BaseLightboxDemo cycle />;\nexport const ImageLoadError = () => <BaseLightboxDemo error />;\n"]}

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

@@ -0,0 +1,8 @@
+import { Meta, Story } from '@storybook/react';
+import { LinkProps } from '@pega/cosmos-react-core';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const LinkDemo: Story<LinkProps>;
+export declare const LinkWithIconDemo: Story<LinkProps>;
+export declare const PreviewableLink: Story<LinkProps>;
+//# sourceMappingURL=Link.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Link.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Link/Link.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAA4B,SAAS,EAAE,MAAM,yBAAyB,CAAC;;AAK9E,wBAYU;AAEV,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,SAAS,CAMrC,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,SAAS,CAM7C,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,SAAS,CAM5C,CAAC"}

package/lib/core/Link/Link.stories.jsx

@@ -0,0 +1,32 @@
+import { Icon, registerIcon, Link } from '@pega/cosmos-react-core';
+import * as plusIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/plus.icon';
+registerIcon(plusIcon);
+export default {
+    title: 'Core/Link',
+    component: Link,
+    args: {
+        variant: 'link'
+    },
+    argTypes: {
+        variant: {
+            options: ['link', 'primary', 'secondary', 'simple', 'text'],
+            control: { type: 'select' }
+        }
+    }
+};
+export const LinkDemo = (args) => {
+    return (<Link href='http://www.pega.com' variant={args.variant} target='_blank'>
+      Visit Pega!
+    </Link>);
+};
+export const LinkWithIconDemo = (args) => {
+    return (<Link href='http://www.pega.com' variant={args.variant} icon target='_blank'>
+      <Icon name='plus'/>
+    </Link>);
+};
+export const PreviewableLink = (args) => {
+    return (<Link href='http://www.pega.com' variant={args.variant} previewable target='_blank'>
+      Visit Pega!
+    </Link>);
+};
+//# sourceMappingURL=Link.stories.jsx.map

package/lib/core/Link/Link.stories.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"Link.stories.jsx","sourceRoot":"","sources":["../../../src/core/Link/Link.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,IAAI,EAAa,MAAM,yBAAyB,CAAC;AAC9E,OAAO,KAAK,QAAQ,MAAM,6DAA6D,CAAC;AAExF,YAAY,CAAC,QAAQ,CAAC,CAAC;AAEvB,eAAe;IACb,KAAK,EAAE,WAAW;IAClB,SAAS,EAAE,IAAI;IACf,IAAI,EAAE;QACJ,OAAO,EAAE,MAAM;KAChB;IACD,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,OAAO,EAAE,CAAC,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,CAAC;YAC3D,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;SAC5B;KACF;CACM,CAAC;AAEV,MAAM,CAAC,MAAM,QAAQ,GAAqB,CAAC,IAAe,EAAE,EAAE;IAC5D,OAAO,CACL,CAAC,IAAI,CAAC,IAAI,CAAC,qBAAqB,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,MAAM,CAAC,QAAQ,CACrE;;IACF,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAqB,CAAC,IAAe,EAAE,EAAE;IACpE,OAAO,CACL,CAAC,IAAI,CAAC,IAAI,CAAC,qBAAqB,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,CAC1E;MAAA,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,EACnB;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAqB,CAAC,IAAe,EAAE,EAAE;IACnE,OAAO,CACL,CAAC,IAAI,CAAC,IAAI,CAAC,qBAAqB,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,WAAW,CAAC,MAAM,CAAC,QAAQ,CACjF;;IACF,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { Icon, registerIcon, Link, LinkProps } from '@pega/cosmos-react-core';\nimport * as plusIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/plus.icon';\n\nregisterIcon(plusIcon);\n\nexport default {\n  title: 'Core/Link',\n  component: Link,\n  args: {\n    variant: 'link'\n  },\n  argTypes: {\n    variant: {\n      options: ['link', 'primary', 'secondary', 'simple', 'text'],\n      control: { type: 'select' }\n    }\n  }\n} as Meta;\n\nexport const LinkDemo: Story<LinkProps> = (args: LinkProps) => {\n  return (\n    <Link href='http://www.pega.com' variant={args.variant} target='_blank'>\n      Visit Pega!\n    </Link>\n  );\n};\n\nexport const LinkWithIconDemo: Story<LinkProps> = (args: LinkProps) => {\n  return (\n    <Link href='http://www.pega.com' variant={args.variant} icon target='_blank'>\n      <Icon name='plus' />\n    </Link>\n  );\n};\n\nexport const PreviewableLink: Story<LinkProps> = (args: LinkProps) => {\n  return (\n    <Link href='http://www.pega.com' variant={args.variant} previewable target='_blank'>\n      Visit Pega!\n    </Link>\n  );\n};\n"]}

package/lib/core/List/CommaSeparatedList.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, Story } from '@storybook/react';
+import { CommaSeparatedListProps } from '@pega/cosmos-react-core';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const CommaSeparatedListDemo: Story<CommaSeparatedListProps>;
+//# sourceMappingURL=CommaSeparatedList.stories.d.ts.map

package/lib/core/List/CommaSeparatedList.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommaSeparatedList.stories.d.ts","sourceRoot":"","sources":["../../../src/core/List/CommaSeparatedList.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAAsB,uBAAuB,EAAE,MAAM,yBAAyB,CAAC;;AAEtF,wBAGU;AAmBV,eAAO,MAAM,sBAAsB,EAAE,KAAK,CAAC,uBAAuB,CAQjE,CAAC"}

package/lib/core/List/CommaSeparatedList.stories.jsx

@@ -0,0 +1,33 @@
+import { CommaSeparatedList } from '@pega/cosmos-react-core';
+export default {
+    title: 'Core/List',
+    component: CommaSeparatedList
+};
+const arr = [
+    'Value1',
+    'Value2',
+    'Value3',
+    'Value4',
+    'Value5',
+    'Value6',
+    'Value7',
+    'Value8',
+    'Value9',
+    'Value10',
+    'Value11',
+    'Value12',
+    'Value13',
+    'Value14'
+];
+export const CommaSeparatedListDemo = (args) => {
+    return (<div style={{ maxWidth: '25%' }}>
+      <CommaSeparatedList heading={args.heading} items={arr}/>
+    </div>);
+};
+CommaSeparatedListDemo.args = {
+    heading: 'List Heading'
+};
+CommaSeparatedListDemo.argTypes = {
+    heading: { control: { type: 'text' } }
+};
+//# sourceMappingURL=CommaSeparatedList.stories.jsx.map

package/lib/core/List/CommaSeparatedList.stories.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommaSeparatedList.stories.jsx","sourceRoot":"","sources":["../../../src/core/List/CommaSeparatedList.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,kBAAkB,EAA2B,MAAM,yBAAyB,CAAC;AAEtF,eAAe;IACb,KAAK,EAAE,WAAW;IAClB,SAAS,EAAE,kBAAkB;CACtB,CAAC;AAEV,MAAM,GAAG,GAAG;IACV,QAAQ;IACR,QAAQ;IACR,QAAQ;IACR,QAAQ;IACR,QAAQ;IACR,QAAQ;IACR,QAAQ;IACR,QAAQ;IACR,QAAQ;IACR,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;CACV,CAAC;AAEF,MAAM,CAAC,MAAM,sBAAsB,GAAmC,CACpE,IAA6B,EAC7B,EAAE;IACF,OAAO,CACL,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC,CAC9B;MAAA,CAAC,kBAAkB,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,EACxD;IAAA,EAAE,GAAG,CAAC,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,sBAAsB,CAAC,IAAI,GAAG;IAC5B,OAAO,EAAE,cAAc;CACxB,CAAC;AAEF,sBAAsB,CAAC,QAAQ,GAAG;IAChC,OAAO,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;CACvC,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { CommaSeparatedList, CommaSeparatedListProps } from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/List',\n  component: CommaSeparatedList\n} as Meta;\n\nconst arr = [\n  'Value1',\n  'Value2',\n  'Value3',\n  'Value4',\n  'Value5',\n  'Value6',\n  'Value7',\n  'Value8',\n  'Value9',\n  'Value10',\n  'Value11',\n  'Value12',\n  'Value13',\n  'Value14'\n];\n\nexport const CommaSeparatedListDemo: Story<CommaSeparatedListProps> = (\n  args: CommaSeparatedListProps\n) => {\n  return (\n    <div style={{ maxWidth: '25%' }}>\n      <CommaSeparatedList heading={args.heading} items={arr} />\n    </div>\n  );\n};\n\nCommaSeparatedListDemo.args = {\n  heading: 'List Heading'\n};\n\nCommaSeparatedListDemo.argTypes = {\n  heading: { control: { type: 'text' } }\n};\n"]}

package/lib/core/List/OrderedList.stories.d.ts

@@ -0,0 +1,10 @@
+import { Meta, Story } from '@storybook/react';
+import { OrderedListProps } from '@pega/cosmos-react-core';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+interface OrderedListStoryProps {
+    itemsToShow: number;
+    heading: OrderedListProps['heading'];
+}
+export declare const OrderedListDemo: Story<OrderedListStoryProps>;
+//# sourceMappingURL=OrderedList.stories.d.ts.map

package/lib/core/List/OrderedList.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OrderedList.stories.d.ts","sourceRoot":"","sources":["../../../src/core/List/OrderedList.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAAE,gBAAgB,EAAe,MAAM,yBAAyB,CAAC;;AAExE,wBAGU;AAWV,UAAU,qBAAqB;IAC7B,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,gBAAgB,CAAC,SAAS,CAAC,CAAC;CACtC;AAED,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,qBAAqB,CAoBxD,CAAC"}

package/lib/core/List/OrderedList.stories.jsx

@@ -0,0 +1,38 @@
+import { useState, useEffect } from 'react';
+import { OrderedList } from '@pega/cosmos-react-core';
+export default {
+    title: 'Core/List',
+    component: OrderedList
+};
+const arr = [
+    'Hello',
+    ['val1', 'val2', 'val3', ['a', 'b', 'c', 'd']],
+    'Hi',
+    'How are you?',
+    'Hey',
+    'Whatsup'
+];
+export const OrderedListDemo = (args) => {
+    const [limit, setLimit] = useState(0);
+    useEffect(() => {
+        setLimit(args.itemsToShow);
+    }, [args.itemsToShow]);
+    const handleToggleShow = () => {
+        if (limit === args.itemsToShow) {
+            setLimit(arr.flat().length);
+        }
+        else {
+            setLimit(args.itemsToShow);
+        }
+    };
+    return (<OrderedList onToggleShow={handleToggleShow} heading={args.heading} items={arr.slice(0, limit)} count={arr.flat().length}/>);
+};
+OrderedListDemo.args = {
+    heading: 'List Heading',
+    itemsToShow: 3
+};
+OrderedListDemo.argTypes = {
+    heading: { control: { type: 'text' } },
+    itemsToShow: { control: { type: 'number' } }
+};
+//# sourceMappingURL=OrderedList.stories.jsx.map

package/lib/core/List/OrderedList.stories.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"OrderedList.stories.jsx","sourceRoot":"","sources":["../../../src/core/List/OrderedList.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,EAAoB,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAExE,eAAe;IACb,KAAK,EAAE,WAAW;IAClB,SAAS,EAAE,WAAW;CACf,CAAC;AAEV,MAAM,GAAG,GAAG;IACV,OAAO;IACP,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC;IAC9C,IAAI;IACJ,cAAc;IACd,KAAK;IACL,SAAS;CACV,CAAC;AAOF,MAAM,CAAC,MAAM,eAAe,GAAiC,CAAC,IAA2B,EAAE,EAAE;IAC3F,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IACtC,SAAS,CAAC,GAAG,EAAE;QACb,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IAC7B,CAAC,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC;IACvB,MAAM,gBAAgB,GAAG,GAAG,EAAE;QAC5B,IAAI,KAAK,KAAK,IAAI,CAAC,WAAW,EAAE;YAC9B,QAAQ,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC,MAAM,CAAC,CAAC;SAC7B;aAAM;YACL,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;SAC5B;IACH,CAAC,CAAC;IACF,OAAO,CACL,CAAC,WAAW,CACV,YAAY,CAAC,CAAC,gBAAgB,CAAC,CAC/B,OAAO,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CACtB,KAAK,CAAC,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,CAC3B,KAAK,CAAC,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC,MAAM,CAAC,EACzB,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,CAAC,IAAI,GAAG;IACrB,OAAO,EAAE,cAAc;IACvB,WAAW,EAAE,CAAC;CACf,CAAC;AAEF,eAAe,CAAC,QAAQ,GAAG;IACzB,OAAO,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACtC,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;CAC7C,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useState, useEffect } from 'react';\n\nimport { OrderedListProps, OrderedList } from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/List',\n  component: OrderedList\n} as Meta;\n\nconst arr = [\n  'Hello',\n  ['val1', 'val2', 'val3', ['a', 'b', 'c', 'd']],\n  'Hi',\n  'How are you?',\n  'Hey',\n  'Whatsup'\n];\n\ninterface OrderedListStoryProps {\n  itemsToShow: number;\n  heading: OrderedListProps['heading'];\n}\n\nexport const OrderedListDemo: Story<OrderedListStoryProps> = (args: OrderedListStoryProps) => {\n  const [limit, setLimit] = useState(0);\n  useEffect(() => {\n    setLimit(args.itemsToShow);\n  }, [args.itemsToShow]);\n  const handleToggleShow = () => {\n    if (limit === args.itemsToShow) {\n      setLimit(arr.flat().length);\n    } else {\n      setLimit(args.itemsToShow);\n    }\n  };\n  return (\n    <OrderedList\n      onToggleShow={handleToggleShow}\n      heading={args.heading}\n      items={arr.slice(0, limit)}\n      count={arr.flat().length}\n    />\n  );\n};\n\nOrderedListDemo.args = {\n  heading: 'List Heading',\n  itemsToShow: 3\n};\n\nOrderedListDemo.argTypes = {\n  heading: { control: { type: 'text' } },\n  itemsToShow: { control: { type: 'number' } }\n};\n"]}