@pega/cosmos-react-demos 3.0.0-dev.9.0 → 3.0.0-rc.2

package/lib/condition-builder/PromotedFilters/PromotedFilters.mocks.js

@@ -0,0 +1,181 @@
+export const demoCondition = {
+    AND: [
+        {
+            condition: {
+                lhs: {
+                    field: 'FirstName'
+                },
+                comparator: 'EQ',
+                rhs: {
+                    value: 'John'
+                }
+            }
+        },
+        {
+            condition: {
+                lhs: { field: 'RemoteEmployee' },
+                comparator: 'IS_TRUE'
+            }
+        }
+    ]
+};
+export const demoFilters = [
+    { field: { name: 'FirstName', type: 'TEXT' }, mode: 'default', label: 'First name' },
+    { field: { name: 'LastName', type: 'TEXT' }, mode: 'advanced', label: 'Last name' },
+    {
+        field: { name: 'Experience', type: 'INTEGER' },
+        mode: 'default',
+        label: 'Years of experience'
+    },
+    {
+        field: {
+            name: 'Score',
+            type: 'INTEGER'
+        },
+        mode: 'predefined',
+        label: 'Score',
+        predefinedConditions: [
+            {
+                id: 'score1',
+                value: {
+                    lhs: {
+                        field: 'Score'
+                    },
+                    comparator: 'GT',
+                    rhs: {
+                        value: 0
+                    }
+                }
+            },
+            {
+                id: 'score2',
+                value: {
+                    lhs: {
+                        field: 'Score'
+                    },
+                    comparator: 'EQ',
+                    rhs: {
+                        value: 0
+                    }
+                }
+            },
+            {
+                id: 'score3',
+                value: {
+                    lhs: {
+                        field: 'Score'
+                    },
+                    comparator: 'LT',
+                    rhs: {
+                        value: 0
+                    }
+                }
+            }
+        ]
+    },
+    {
+        field: {
+            name: 'Hired',
+            type: 'DATE_ONLY'
+        },
+        mode: 'predefined',
+        label: 'Hired',
+        predefinedConditions: [
+            {
+                id: 'hired1',
+                value: {
+                    lhs: {
+                        field: 'Hired'
+                    },
+                    comparator: 'LT',
+                    rhs: {
+                        value: '2022-01-01'
+                    }
+                },
+                label: 'Before 2022'
+            },
+            {
+                id: 'hired2',
+                value: {
+                    lhs: {
+                        field: 'Hired'
+                    },
+                    comparator: 'GT',
+                    rhs: {
+                        value: '2022-01-01'
+                    }
+                },
+                label: 'After 2022'
+            }
+        ]
+    },
+    {
+        field: { name: 'Salary', type: 'INTEGER' },
+        mode: 'advanced',
+        label: 'Salary'
+    },
+    {
+        field: { name: 'HireDate', type: 'DATE_ONLY' },
+        mode: 'default',
+        label: 'Hire date'
+    },
+    {
+        field: { name: 'LastPromotion', type: 'DATE_ONLY' },
+        mode: 'advanced',
+        label: 'Date of last promotion'
+    },
+    {
+        field: { name: 'DailyMeetingTime', type: 'TIME_ONLY' },
+        mode: 'default',
+        label: 'Time of daily meeting'
+    },
+    {
+        field: { name: 'StartOfWorkingHours', type: 'TIME_ONLY' },
+        mode: 'advanced',
+        label: 'Start of working hours'
+    },
+    {
+        field: { name: 'NextReviewDate', type: 'DATE_TIME' },
+        mode: 'default',
+        label: 'Next scheduled review'
+    },
+    {
+        field: { name: 'LastOfficeCheckIn', type: 'DATE_TIME' },
+        mode: 'advanced',
+        label: 'Last check-in in the office'
+    },
+    {
+        field: { name: 'RemoteEmployee', type: 'BOOLEAN' },
+        mode: 'default',
+        label: 'Remote employee'
+    },
+    {
+        field: {
+            name: 'Department',
+            type: 'PICKLIST',
+            possibleValues: [
+                'Customer Service',
+                'Engineering',
+                'Facilities',
+                'Finance',
+                'HR',
+                'IT',
+                'Sales'
+            ]
+        },
+        mode: 'default'
+    },
+    {
+        field: {
+            name: 'Status',
+            type: 'PICKLIST',
+            possibleValues: () => Promise.resolve([
+                { id: 'new', primary: 'New' },
+                { id: 'open', primary: 'Open' },
+                { id: 'resolved', primary: 'Resolved' }
+            ])
+        },
+        mode: 'default'
+    }
+];
+//# sourceMappingURL=PromotedFilters.mocks.js.map

package/lib/condition-builder/PromotedFilters/PromotedFilters.mocks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PromotedFilters.mocks.js","sourceRoot":"","sources":["../../../src/condition-builder/PromotedFilters/PromotedFilters.mocks.ts"],"names":[],"mappings":"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","sourcesContent":["import { Condition, PromotedFiltersProps } from '@pega/cosmos-react-condition-builder';\n\nexport const demoCondition: Condition = {\n  AND: [\n    {\n      condition: {\n        lhs: {\n          field: 'FirstName'\n        },\n        comparator: 'EQ',\n        rhs: {\n          value: 'John'\n        }\n      }\n    },\n    {\n      condition: {\n        lhs: { field: 'RemoteEmployee' },\n        comparator: 'IS_TRUE'\n      }\n    }\n  ]\n};\n\nexport const demoFilters: PromotedFiltersProps['filters'] = [\n  { field: { name: 'FirstName', type: 'TEXT' }, mode: 'default', label: 'First name' },\n  { field: { name: 'LastName', type: 'TEXT' }, mode: 'advanced', label: 'Last name' },\n  {\n    field: { name: 'Experience', type: 'INTEGER' },\n    mode: 'default',\n    label: 'Years of experience'\n  },\n  {\n    field: {\n      name: 'Score',\n      type: 'INTEGER'\n    },\n    mode: 'predefined',\n    label: 'Score',\n    predefinedConditions: [\n      {\n        id: 'score1',\n        value: {\n          lhs: {\n            field: 'Score'\n          },\n          comparator: 'GT',\n          rhs: {\n            value: 0\n          }\n        }\n      },\n      {\n        id: 'score2',\n        value: {\n          lhs: {\n            field: 'Score'\n          },\n          comparator: 'EQ',\n          rhs: {\n            value: 0\n          }\n        }\n      },\n      {\n        id: 'score3',\n        value: {\n          lhs: {\n            field: 'Score'\n          },\n          comparator: 'LT',\n          rhs: {\n            value: 0\n          }\n        }\n      }\n    ]\n  },\n  {\n    field: {\n      name: 'Hired',\n      type: 'DATE_ONLY'\n    },\n    mode: 'predefined',\n    label: 'Hired',\n    predefinedConditions: [\n      {\n        id: 'hired1',\n        value: {\n          lhs: {\n            field: 'Hired'\n          },\n          comparator: 'LT',\n          rhs: {\n            value: '2022-01-01'\n          }\n        },\n        label: 'Before 2022'\n      },\n      {\n        id: 'hired2',\n        value: {\n          lhs: {\n            field: 'Hired'\n          },\n          comparator: 'GT',\n          rhs: {\n            value: '2022-01-01'\n          }\n        },\n        label: 'After 2022'\n      }\n    ]\n  },\n  {\n    field: { name: 'Salary', type: 'INTEGER' },\n    mode: 'advanced',\n    label: 'Salary'\n  },\n  {\n    field: { name: 'HireDate', type: 'DATE_ONLY' },\n    mode: 'default',\n    label: 'Hire date'\n  },\n  {\n    field: { name: 'LastPromotion', type: 'DATE_ONLY' },\n    mode: 'advanced',\n    label: 'Date of last promotion'\n  },\n  {\n    field: { name: 'DailyMeetingTime', type: 'TIME_ONLY' },\n    mode: 'default',\n    label: 'Time of daily meeting'\n  },\n  {\n    field: { name: 'StartOfWorkingHours', type: 'TIME_ONLY' },\n    mode: 'advanced',\n    label: 'Start of working hours'\n  },\n  {\n    field: { name: 'NextReviewDate', type: 'DATE_TIME' },\n    mode: 'default',\n    label: 'Next scheduled review'\n  },\n  {\n    field: { name: 'LastOfficeCheckIn', type: 'DATE_TIME' },\n    mode: 'advanced',\n    label: 'Last check-in in the office'\n  },\n  {\n    field: { name: 'RemoteEmployee', type: 'BOOLEAN' },\n    mode: 'default',\n    label: 'Remote employee'\n  },\n  {\n    field: {\n      name: 'Department',\n      type: 'PICKLIST',\n      possibleValues: [\n        'Customer Service',\n        'Engineering',\n        'Facilities',\n        'Finance',\n        'HR',\n        'IT',\n        'Sales'\n      ]\n    },\n    mode: 'default'\n  },\n  {\n    field: {\n      name: 'Status',\n      type: 'PICKLIST',\n      possibleValues: () =>\n        Promise.resolve([\n          { id: 'new', primary: 'New' },\n          { id: 'open', primary: 'Open' },\n          { id: 'resolved', primary: 'Resolved' }\n        ])\n    },\n    mode: 'default'\n  }\n];\n"]}

package/lib/condition-builder/PromotedFilters/PromotedFilters.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta, Story } from '@storybook/react';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+interface PromotedFiltersStoryProps {
+    orientation?: 'vertical' | 'horizontal';
+}
+export declare const PromotedFiltersDemo: Story<PromotedFiltersStoryProps>;
+//# sourceMappingURL=PromotedFilters.stories.d.ts.map

package/lib/condition-builder/PromotedFilters/PromotedFilters.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PromotedFilters.stories.d.ts","sourceRoot":"","sources":["../../../src/condition-builder/PromotedFilters/PromotedFilters.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;;AAS/C,wBAGU;AAEV,UAAU,yBAAyB;IACjC,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;CACzC;AAED,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,yBAAyB,CAoBhE,CAAC"}

package/lib/condition-builder/PromotedFilters/PromotedFilters.stories.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { PromotedFilters } from '@pega/cosmos-react-condition-builder';
+import { Flex, Text } from '@pega/cosmos-react-core';
+import { demoCondition, demoFilters } from './PromotedFilters.mocks';
+import { StyledCodeBlock } from './PromotedFilters.styles';
+export default {
+    title: 'Condition Builder/PromotedFilters',
+    component: PromotedFilters
+};
+export const PromotedFiltersDemo = (args) => {
+    const [condition, setCondition] = useState(demoCondition);
+    return (_jsxs(Flex, { container: { direction: 'column' }, children: [_jsx(PromotedFilters, { filters: demoFilters, condition: condition, onChange: setCondition, orientation: args.orientation }), _jsxs("div", { children: [_jsx(Text, { variant: 'h4', children: "Output:" }), _jsx(StyledCodeBlock, { children: condition ? JSON.stringify(condition, null, 2) : '(No condition)' })] })] }));
+};
+PromotedFiltersDemo.args = {
+    orientation: 'horizontal'
+};
+PromotedFiltersDemo.argTypes = {
+    orientation: {
+        options: ['horizontal', 'vertical'],
+        control: { type: 'select' }
+    }
+};
+//# sourceMappingURL=PromotedFilters.stories.js.map

package/lib/condition-builder/PromotedFilters/PromotedFilters.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PromotedFilters.stories.js","sourceRoot":"","sources":["../../../src/condition-builder/PromotedFilters/PromotedFilters.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,EAAa,eAAe,EAAE,MAAM,sCAAsC,CAAC;AAClF,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAErD,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACrE,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAE3D,eAAe;IACb,KAAK,EAAE,mCAAmC;IAC1C,SAAS,EAAE,eAAe;CACnB,CAAC;AAMV,MAAM,CAAC,MAAM,mBAAmB,GAAqC,CACnE,IAA+B,EAC/B,EAAE;IACF,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAwB,aAAa,CAAC,CAAC;IACjF,OAAO,CACL,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,aACtC,KAAC,eAAe,IACd,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,YAAY,EACtB,WAAW,EAAE,IAAI,CAAC,WAAW,GAC7B,EACF,0BACE,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,wBAAe,EACjC,KAAC,eAAe,cACb,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,gBAAgB,GAClD,IACd,IACD,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,mBAAmB,CAAC,IAAI,GAAG;IACzB,WAAW,EAAE,YAAY;CAC1B,CAAC;AAEF,mBAAmB,CAAC,QAAQ,GAAG;IAC7B,WAAW,EAAE;QACX,OAAO,EAAE,CAAC,YAAY,EAAE,UAAU,CAAC;QACnC,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;KAC5B;CACF,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useState } from 'react';\n\nimport { Condition, PromotedFilters } from '@pega/cosmos-react-condition-builder';\nimport { Flex, Text } from '@pega/cosmos-react-core';\n\nimport { demoCondition, demoFilters } from './PromotedFilters.mocks';\nimport { StyledCodeBlock } from './PromotedFilters.styles';\n\nexport default {\n  title: 'Condition Builder/PromotedFilters',\n  component: PromotedFilters\n} as Meta;\n\ninterface PromotedFiltersStoryProps {\n  orientation?: 'vertical' | 'horizontal';\n}\n\nexport const PromotedFiltersDemo: Story<PromotedFiltersStoryProps> = (\n  args: PromotedFiltersStoryProps\n) => {\n  const [condition, setCondition] = useState<Condition | undefined>(demoCondition);\n  return (\n    <Flex container={{ direction: 'column' }}>\n      <PromotedFilters\n        filters={demoFilters}\n        condition={condition}\n        onChange={setCondition}\n        orientation={args.orientation}\n      />\n      <div>\n        <Text variant='h4'>Output:</Text>\n        <StyledCodeBlock>\n          {condition ? JSON.stringify(condition, null, 2) : '(No condition)'}\n        </StyledCodeBlock>\n      </div>\n    </Flex>\n  );\n};\n\nPromotedFiltersDemo.args = {\n  orientation: 'horizontal'\n};\n\nPromotedFiltersDemo.argTypes = {\n  orientation: {\n    options: ['horizontal', 'vertical'],\n    control: { type: 'select' }\n  }\n};\n"]}

package/lib/condition-builder/PromotedFilters/PromotedFilters.styles.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+export declare const StyledCodeBlock: import("styled-components").StyledComponent<"pre", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledPromotedFilters: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    isVertical: boolean;
+}, never>;
+export declare const StyledClearAllButton: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").ButtonProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledVerticalWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledTextWithEllipsis: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").TextProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
+//# sourceMappingURL=PromotedFilters.styles.d.ts.map

package/lib/condition-builder/PromotedFilters/PromotedFilters.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PromotedFilters.styles.d.ts","sourceRoot":"","sources":["../../../src/condition-builder/PromotedFilters/PromotedFilters.styles.ts"],"names":[],"mappings":";AAIA,eAAO,MAAM,eAAe,yGAG3B,CAAC;AAIF,eAAO,MAAM,qBAAqB;gBACpB,OAAO;SAYnB,CAAC;AAIH,eAAO,MAAM,oBAAoB,qOAGhC,CAAC;AAIF,eAAO,MAAM,qBAAqB,yGAEjC,CAAC;AAIF,eAAO,MAAM,sBAAsB,mOAIlC,CAAC"}

package/lib/condition-builder/PromotedFilters/PromotedFilters.styles.js

@@ -0,0 +1,35 @@
+import styled, { css } from 'styled-components';
+import { Button, defaultThemeProp, Text } from '@pega/cosmos-react-core';
+export const StyledCodeBlock = styled.pre `
+  padding: ${props => props.theme.base.spacing};
+  margin-bottom: ${props => props.theme.base.spacing};
+`;
+StyledCodeBlock.defaultProps = defaultThemeProp;
+export const StyledPromotedFilters = styled.div(props => {
+    const { theme, isVertical } = props;
+    return css `
+    border-radius: ${theme.components.card['border-radius']};
+    background-color: ${theme.base.palette['secondary-background']};
+    ${isVertical &&
+        css `
+      max-width: 20rem;
+    `}
+  `;
+});
+StyledPromotedFilters.defaultProps = defaultThemeProp;
+export const StyledClearAllButton = styled(Button) `
+  margin-top: 0.625rem;
+  white-space: nowrap;
+`;
+StyledClearAllButton.defaultProps = defaultThemeProp;
+export const StyledVerticalWrapper = styled.div `
+  width: 100%;
+`;
+StyledVerticalWrapper.defaultProps = defaultThemeProp;
+export const StyledTextWithEllipsis = styled(Text) `
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+`;
+StyledTextWithEllipsis.defaultProps = defaultThemeProp;
+//# sourceMappingURL=PromotedFilters.styles.js.map

package/lib/condition-builder/PromotedFilters/PromotedFilters.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PromotedFilters.styles.js","sourceRoot":"","sources":["../../../src/condition-builder/PromotedFilters/PromotedFilters.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,MAAM,EAAE,gBAAgB,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAEzE,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAA;aAC5B,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO;mBAC3B,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO;CACnD,CAAC;AAEF,eAAe,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEhD,MAAM,CAAC,MAAM,qBAAqB,GAAG,MAAM,CAAC,GAAG,CAE5C,KAAK,CAAC,EAAE;IACT,MAAM,EAAE,KAAK,EAAE,UAAU,EAAE,GAAG,KAAK,CAAC;IAEpC,OAAO,GAAG,CAAA;qBACS,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,eAAe,CAAC;wBACnC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,sBAAsB,CAAC;MAC5D,UAAU;QACZ,GAAG,CAAA;;KAEF;GACF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,qBAAqB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEtD,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,MAAM,CAAC,CAAA;;;CAGjD,CAAC;AAEF,oBAAoB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAErD,MAAM,CAAC,MAAM,qBAAqB,GAAG,MAAM,CAAC,GAAG,CAAA;;CAE9C,CAAC;AAEF,qBAAqB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEtD,MAAM,CAAC,MAAM,sBAAsB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;;;CAIjD,CAAC;AAEF,sBAAsB,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { Button, defaultThemeProp, Text } from '@pega/cosmos-react-core';\n\nexport const StyledCodeBlock = styled.pre`\n  padding: ${props => props.theme.base.spacing};\n  margin-bottom: ${props => props.theme.base.spacing};\n`;\n\nStyledCodeBlock.defaultProps = defaultThemeProp;\n\nexport const StyledPromotedFilters = styled.div<{\n  isVertical: boolean;\n}>(props => {\n  const { theme, isVertical } = props;\n\n  return css`\n    border-radius: ${theme.components.card['border-radius']};\n    background-color: ${theme.base.palette['secondary-background']};\n    ${isVertical &&\n    css`\n      max-width: 20rem;\n    `}\n  `;\n});\n\nStyledPromotedFilters.defaultProps = defaultThemeProp;\n\nexport const StyledClearAllButton = styled(Button)`\n  margin-top: 0.625rem;\n  white-space: nowrap;\n`;\n\nStyledClearAllButton.defaultProps = defaultThemeProp;\n\nexport const StyledVerticalWrapper = styled.div`\n  width: 100%;\n`;\n\nStyledVerticalWrapper.defaultProps = defaultThemeProp;\n\nexport const StyledTextWithEllipsis = styled(Text)`\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n`;\n\nStyledTextWithEllipsis.defaultProps = defaultThemeProp;\n"]}

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

@@ -0,0 +1,9 @@
+import { Meta, Story } from '@storybook/react';
+import { AdditionalInfoProps } from '@pega/cosmos-react-core';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+interface AdditionalInfoStoryProps extends AdditionalInfoProps {
+    configurableContent: string;
+}
+export declare const AdditionalInfoDemo: Story<AdditionalInfoStoryProps>;
+//# sourceMappingURL=AdditionalInfo.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AdditionalInfo.stories.d.ts","sourceRoot":"","sources":["../../../src/core/AdditionalInfo/AdditionalInfo.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAAkB,mBAAmB,EAAQ,MAAM,yBAAyB,CAAC;;AAEpF,wBAGU;AAEV,UAAU,wBAAyB,SAAQ,mBAAmB;IAC5D,mBAAmB,EAAE,MAAM,CAAC;CAC7B;AAED,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,wBAAwB,CAoB9D,CAAC"}

package/lib/core/AdditionalInfo/AdditionalInfo.stories.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AdditionalInfo, Flex } from '@pega/cosmos-react-core';
+export default {
+    title: 'Core/AdditionalInfo',
+    component: AdditionalInfo
+};
+export const AdditionalInfoDemo = (args) => {
+    return (_jsx(AdditionalInfo, { heading: 'Additional Info', children: _jsxs(Flex, { container: { justify: 'between' }, children: [_jsxs("p", { children: [args.configurableContent, _jsx("a", { href: 'https://www.pega.com', target: '_blank', rel: 'noreferrer', children: "This is a link" })] }), _jsx("img", { src: 'https://www.pyze.com/wp-content/uploads/2020/07/pega-transparent-logo-2.png', style: { width: 150 }, alt: '' })] }) }));
+};
+AdditionalInfoDemo.args = {
+    configurableContent: 'This content can be modified to fit the necessary additional info. '
+};
+AdditionalInfoDemo.argTypes = {
+    configurableContent: { control: { type: 'text' } }
+};
+//# sourceMappingURL=AdditionalInfo.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AdditionalInfo.stories.js","sourceRoot":"","sources":["../../../src/core/AdditionalInfo/AdditionalInfo.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,cAAc,EAAuB,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAEpF,eAAe;IACb,KAAK,EAAE,qBAAqB;IAC5B,SAAS,EAAE,cAAc;CAClB,CAAC;AAMV,MAAM,CAAC,MAAM,kBAAkB,GAAoC,CACjE,IAA8B,EAC9B,EAAE;IACF,OAAO,CACL,KAAC,cAAc,IAAC,OAAO,EAAC,iBAAiB,YACvC,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,aACrC,wBACG,IAAI,CAAC,mBAAmB,EACzB,YAAG,IAAI,EAAC,sBAAsB,EAAC,MAAM,EAAC,QAAQ,EAAC,GAAG,EAAC,YAAY,+BAE3D,IACF,EACJ,cACE,GAAG,EAAC,6EAA6E,EACjF,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE,EACrB,GAAG,EAAC,EAAE,GACN,IACG,GACQ,CAClB,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAkB,CAAC,IAAI,GAAG;IACxB,mBAAmB,EAAE,qEAAqE;CAC3F,CAAC;AAEF,kBAAkB,CAAC,QAAQ,GAAG;IAC5B,mBAAmB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;CACnD,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { AdditionalInfo, AdditionalInfoProps, Flex } from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/AdditionalInfo',\n  component: AdditionalInfo\n} as Meta;\n\ninterface AdditionalInfoStoryProps extends AdditionalInfoProps {\n  configurableContent: string;\n}\n\nexport const AdditionalInfoDemo: Story<AdditionalInfoStoryProps> = (\n  args: AdditionalInfoStoryProps\n) => {\n  return (\n    <AdditionalInfo heading='Additional Info'>\n      <Flex container={{ justify: 'between' }}>\n        <p>\n          {args.configurableContent}\n          <a href='https://www.pega.com' target='_blank' rel='noreferrer'>\n            This is a link\n          </a>\n        </p>\n        <img\n          src='https://www.pyze.com/wp-content/uploads/2020/07/pega-transparent-logo-2.png'\n          style={{ width: 150 }}\n          alt=''\n        />\n      </Flex>\n    </AdditionalInfo>\n  );\n};\n\nAdditionalInfoDemo.args = {\n  configurableContent: 'This content can be modified to fit the necessary additional info. '\n};\n\nAdditionalInfoDemo.argTypes = {\n  configurableContent: { control: { type: 'text' } }\n};\n"]}

package/lib/core/AppShell/AppShell.mocks.d.ts

@@ -7,7 +7,7 @@ export declare const defaultMainContent: JSX.Element;
 export declare const operatorData: {
     avatar: JSX.Element;
     actions: {
-        text: string;
+        primary: string;
         id: string;
     }[];
     name: string;

package/lib/core/AppShell/AppShell.mocks.js

@@ -131,11 +131,11 @@ export const defaultMainContent = (_jsx(Flex, { container: { justify: 'center',
 export const operatorData = {
     avatar: _jsx(Avatar, { name: 'Cindy Turner' }),
     actions: [
-        { text: 'Profile', id: 'profile' },
-        { text: 'Settings', id: 'settings' },
-        { text: 'My applications', id: 'apps' },
-        { text: 'Help center', id: 'help' },
-        { text: 'Log out', id: 'logout' }
+        { primary: 'Profile', id: 'profile' },
+        { primary: 'Settings', id: 'settings' },
+        { primary: 'My applications', id: 'apps' },
+        { primary: 'Help center', id: 'help' },
+        { primary: 'Log out', id: 'logout' }
     ],
     name: 'Cindy Turner'
 };

package/lib/core/AppShell/AppShell.mocks.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppShell.mocks.js","sourceRoot":"","sources":["../../../src/core/AppShell/AppShell.mocks.tsx"],"names":[],"mappings":";AAAA,OAAO,EAEL,MAAM,EACN,IAAI,EACJ,WAAW,EAEX,IAAI,EAEJ,IAAI,EACL,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAEtD,MAAM,CAAC,MAAM,YAAY,GAA2B;IAClD;QACE,EAAE,EAAE,IAAI;QACR,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,OAAO;QACb,IAAI,EAAE,YAAY;QAClB,MAAM,EAAE,IAAI;KACb;IACD;QACE,EAAE,EAAE,IAAI;QACR,IAAI,EAAE,cAAc;QACpB,IAAI,EAAE,YAAY;QAClB,IAAI,EAAE,aAAa;KACpB;IACD;QACE,EAAE,EAAE,IAAI;QACR,IAAI,EAAE,eAAe;QACrB,IAAI,EAAE,gBAAgB;QACtB,IAAI,EAAE,cAAc;QACpB,KAAK,EAAE;YACL,EAAE,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,SAAS,EAAE;YAC/C,EAAE,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,WAAW,EAAE,IAAI,EAAE,YAAY,EAAE;SACtD;KACF;IAED;QACE,EAAE,EAAE,IAAI;QACR,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,OAAO;QACb,IAAI,EAAE,aAAa;KACpB;IACD;QACE,EAAE,EAAE,IAAI;QACR,IAAI,EAAE,OAAO;QACb,IAAI,EAAE,QAAQ;QACd,IAAI,EAAE,YAAY;KACnB;IACD;QACE,EAAE,EAAE,IAAI;QACR,IAAI,EAAE,OAAO;QACb,IAAI,EAAE,QAAQ;QACd,IAAI,EAAE,gBAAgB;KACvB;IACD;QACE,EAAE,EAAE,IAAI;QACR,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,OAAO;QACb,IAAI,EAAE,UAAU;QAChB,MAAM,EAAE,KAAK;QACb,KAAK,EAAE;YACL,EAAE,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC9C,EAAE,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,UAAU,EAAE;SACnD;KACF;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAuC;IACtE;QACE,EAAE,EAAE,KAAK;QACT,OAAO,EACL,4FAA4F;QAC9F,SAAS,EAAE,CAAC,WAAW,EAAE,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC,YAAY,EAAE,CAAC;QACtE,MAAM,EAAE,KAAC,MAAM,IAAC,IAAI,EAAC,aAAa,GAAG;QACrC,MAAM,EAAE,IAAI;KACb;IACD;QACE,EAAE,EAAE,KAAK;QACT,OAAO,EAAE,oFAAoF;QAC7F,MAAM,EAAE,KAAC,MAAM,IAAC,IAAI,EAAC,eAAe,GAAG;QACvC,MAAM,EAAE,IAAI;KACb;IACD;QACE,EAAE,EAAE,KAAK;QACT,OAAO,EACL,wHAAwH;QAC1H,SAAS,EAAE,CAAC,WAAW,EAAE,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,YAAY,EAAE,CAAC;QACpE,MAAM,EAAE,KAAC,MAAM,IAAC,IAAI,EAAC,aAAa,GAAG;QACrC,MAAM,EAAE,IAAI;KACb;IACD;QACE,EAAE,EAAE,KAAK;QACT,OAAO,EAAE,+DAA+D;QACxE,SAAS,EAAE,CAAC,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC,YAAY,EAAE,CAAC;QACxD,MAAM,EAAE,IAAI;KACb;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAuC;IAChE;QACE,EAAE,EAAE,KAAK;QACT,OAAO,EAAE,8DAA8D;QACvE,SAAS,EAAE,CAAC,WAAW,EAAE,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC,YAAY,EAAE,CAAC;KACvE;IACD;QACE,EAAE,EAAE,KAAK;QACT,OAAO,EAAE,oDAAoD;KAC9D;IACD;QACE,EAAE,EAAE,KAAK;QACT,OAAO,EACL,0FAA0F;QAC5F,SAAS,EAAE,CAAC,WAAW,EAAE,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,YAAY,EAAE,CAAC;KACrE;IACD;QACE,EAAE,EAAE,KAAK;QACT,OAAO,EAAE,8DAA8D;QACvE,SAAS,EAAE,CAAC,WAAW,EAAE,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC,YAAY,EAAE,CAAC;KACvE;IACD;QACE,EAAE,EAAE,KAAK;QACT,OAAO,EAAE,oDAAoD;KAC9D;IACD;QACE,EAAE,EAAE,KAAK;QACT,OAAO,EACL,0FAA0F;QAC5F,SAAS,EAAE,CAAC,WAAW,EAAE,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,YAAY,EAAE,CAAC;KACrE;IACD;QACE,EAAE,EAAE,KAAK;QACT,OAAO,EAAE,8DAA8D;QACvE,SAAS,EAAE,CAAC,WAAW,EAAE,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC,YAAY,EAAE,CAAC;KACvE;IACD;QACE,EAAE,EAAE,KAAK;QACT,OAAO,EAAE,oDAAoD;KAC9D;IACD;QACE,EAAE,EAAE,KAAK;QACT,OAAO,EACL,0FAA0F;QAC5F,SAAS,EAAE,CAAC,WAAW,EAAE,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,YAAY,EAAE,CAAC;KACrE;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAChC,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAE,EAAE,EAAE,iBAAiB,YACjF,KAAC,IAAI,cACH,KAAC,WAAW,cACV,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,yCAAgC,GACtC,GACT,GACF,CACR,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG;IAC1B,MAAM,EAAE,KAAC,MAAM,IAAC,IAAI,EAAC,cAAc,GAAG;IACtC,OAAO,EAAE;QACP,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,EAAE,SAAS,EAAE;QAClC,EAAE,IAAI,EAAE,UAAU,EAAE,EAAE,EAAE,UAAU,EAAE;QACpC,EAAE,IAAI,EAAE,iBAAiB,EAAE,EAAE,EAAE,MAAM,EAAE;QACvC,EAAE,IAAI,EAAE,aAAa,EAAE,EAAE,EAAE,MAAM,EAAE;QACnC,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,EAAE,QAAQ,EAAE;KAClC;IACD,IAAI,EAAE,cAAc;CACrB,CAAC","sourcesContent":["import {\n  AppShellProps,\n  Avatar,\n  Card,\n  CardContent,\n  DrawerItemProps,\n  Flex,\n  ForwardProps,\n  Text\n} from '@pega/cosmos-react-core';\n\nimport { StyledMainContent } from './AppShell.styles';\n\nexport const defaultLinks: AppShellProps['links'] = [\n  {\n    id: '01',\n    name: 'Home',\n    href: '#home',\n    icon: 'home-solid',\n    active: true\n  },\n  {\n    id: '02',\n    name: 'My Dashboard',\n    href: '#dashboard',\n    icon: 'gauge-solid'\n  },\n  {\n    id: '03',\n    name: 'Collaboration',\n    href: '#collaboration',\n    icon: 'social-solid',\n    links: [\n      { id: '3-01', name: 'Spaces', href: '#spaces' },\n      { id: '3-02', name: 'Documents', href: '#documents' }\n    ]\n  },\n\n  {\n    id: '04',\n    name: 'Bugs',\n    href: '#bugs',\n    icon: 'users-solid'\n  },\n  {\n    id: '05',\n    name: 'Epics',\n    href: '#epics',\n    icon: 'book-solid'\n  },\n  {\n    id: '06',\n    name: 'Goals',\n    href: '#goals',\n    icon: 'analytics-good'\n  },\n  {\n    id: '07',\n    name: 'More',\n    href: '#more',\n    icon: 'more-alt',\n    active: false,\n    links: [\n      { id: '7-01', name: 'Item A', href: '#itemA' },\n      { id: '7-02', name: 'Option 1', href: '#option1' }\n    ]\n  }\n];\n\nexport const defaultNotifications: (DrawerItemProps & ForwardProps)[] = [\n  {\n    id: '123',\n    primary:\n      \"Dean Thomas mentioned your team in a bug 'Button does not initiate onClick event handler'.\",\n    secondary: ['BUG-12345', new Date(2020, 8, 31, 13, 23).toDateString()],\n    visual: <Avatar name='Dean Thomas' />,\n    unread: true\n  },\n  {\n    id: '456',\n    primary: \"Seth DeAngelo mentioned your team in a bug 'Text variant h1 renders as h3 in DOM'.\",\n    visual: <Avatar name='Seth DeAngelo' />,\n    unread: true\n  },\n  {\n    id: '789',\n    primary:\n      \"Janet Moore mentioned your team in a bug 'Tree expanded state does not match the state that was set on the component'.\",\n    secondary: ['BUG-12345', new Date(2020, 9, 2, 9, 22).toDateString()],\n    visual: <Avatar name='Janet Moore' />,\n    unread: true\n  },\n  {\n    id: '000',\n    primary: 'You have been awarded Employee of the Month! Congratulations!',\n    secondary: [new Date(2020, 9, 8, 14, 46).toDateString()],\n    unread: true\n  }\n];\n\nexport const defaultRecents: (DrawerItemProps & ForwardProps)[] = [\n  {\n    id: '123',\n    primary: \"BUG-12345: 'Button does not initiate onClick event handler'.\",\n    secondary: ['BUG-12345', new Date(2020, 8, 31, 13, 23).toDateString()]\n  },\n  {\n    id: '456',\n    primary: \"BUG-54321: 'Text variant h1 renders as h3 in DOM'.\"\n  },\n  {\n    id: '789',\n    primary:\n      \"BUG-00000: 'Tree expanded state does not match the state that was set on the component'.\",\n    secondary: ['BUG-00000', new Date(2020, 9, 2, 9, 22).toDateString()]\n  },\n  {\n    id: '111',\n    primary: \"BUG-12345: 'Button does not initiate onClick event handler'.\",\n    secondary: ['BUG-12345', new Date(2020, 8, 31, 13, 23).toDateString()]\n  },\n  {\n    id: '222',\n    primary: \"BUG-54321: 'Text variant h1 renders as h3 in DOM'.\"\n  },\n  {\n    id: '333',\n    primary:\n      \"BUG-00000: 'Tree expanded state does not match the state that was set on the component'.\",\n    secondary: ['BUG-00000', new Date(2020, 9, 2, 9, 22).toDateString()]\n  },\n  {\n    id: '444',\n    primary: \"BUG-12345: 'Button does not initiate onClick event handler'.\",\n    secondary: ['BUG-12345', new Date(2020, 8, 31, 13, 23).toDateString()]\n  },\n  {\n    id: '555',\n    primary: \"BUG-54321: 'Text variant h1 renders as h3 in DOM'.\"\n  },\n  {\n    id: '666',\n    primary:\n      \"BUG-00000: 'Tree expanded state does not match the state that was set on the component'.\",\n    secondary: ['BUG-00000', new Date(2020, 9, 2, 9, 22).toDateString()]\n  }\n];\n\nexport const defaultMainContent = (\n  <Flex container={{ justify: 'center', alignItems: 'center' }} as={StyledMainContent}>\n    <Card>\n      <CardContent>\n        <Text variant='h2'>This is the main content</Text>\n      </CardContent>\n    </Card>\n  </Flex>\n);\n\nexport const operatorData = {\n  avatar: <Avatar name='Cindy Turner' />,\n  actions: [\n    { text: 'Profile', id: 'profile' },\n    { text: 'Settings', id: 'settings' },\n    { text: 'My applications', id: 'apps' },\n    { text: 'Help center', id: 'help' },\n    { text: 'Log out', id: 'logout' }\n  ],\n  name: 'Cindy Turner'\n};\n"]}
+{"version":3,"file":"AppShell.mocks.js","sourceRoot":"","sources":["../../../src/core/AppShell/AppShell.mocks.tsx"],"names":[],"mappings":";AAAA,OAAO,EAEL,MAAM,EACN,IAAI,EACJ,WAAW,EAEX,IAAI,EAEJ,IAAI,EACL,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAEtD,MAAM,CAAC,MAAM,YAAY,GAA2B;IAClD;QACE,EAAE,EAAE,IAAI;QACR,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,OAAO;QACb,IAAI,EAAE,YAAY;QAClB,MAAM,EAAE,IAAI;KACb;IACD;QACE,EAAE,EAAE,IAAI;QACR,IAAI,EAAE,cAAc;QACpB,IAAI,EAAE,YAAY;QAClB,IAAI,EAAE,aAAa;KACpB;IACD;QACE,EAAE,EAAE,IAAI;QACR,IAAI,EAAE,eAAe;QACrB,IAAI,EAAE,gBAAgB;QACtB,IAAI,EAAE,cAAc;QACpB,KAAK,EAAE;YACL,EAAE,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,SAAS,EAAE;YAC/C,EAAE,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,WAAW,EAAE,IAAI,EAAE,YAAY,EAAE;SACtD;KACF;IAED;QACE,EAAE,EAAE,IAAI;QACR,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,OAAO;QACb,IAAI,EAAE,aAAa;KACpB;IACD;QACE,EAAE,EAAE,IAAI;QACR,IAAI,EAAE,OAAO;QACb,IAAI,EAAE,QAAQ;QACd,IAAI,EAAE,YAAY;KACnB;IACD;QACE,EAAE,EAAE,IAAI;QACR,IAAI,EAAE,OAAO;QACb,IAAI,EAAE,QAAQ;QACd,IAAI,EAAE,gBAAgB;KACvB;IACD;QACE,EAAE,EAAE,IAAI;QACR,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,OAAO;QACb,IAAI,EAAE,UAAU;QAChB,MAAM,EAAE,KAAK;QACb,KAAK,EAAE;YACL,EAAE,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC9C,EAAE,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,UAAU,EAAE;SACnD;KACF;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAuC;IACtE;QACE,EAAE,EAAE,KAAK;QACT,OAAO,EACL,4FAA4F;QAC9F,SAAS,EAAE,CAAC,WAAW,EAAE,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC,YAAY,EAAE,CAAC;QACtE,MAAM,EAAE,KAAC,MAAM,IAAC,IAAI,EAAC,aAAa,GAAG;QACrC,MAAM,EAAE,IAAI;KACb;IACD;QACE,EAAE,EAAE,KAAK;QACT,OAAO,EAAE,oFAAoF;QAC7F,MAAM,EAAE,KAAC,MAAM,IAAC,IAAI,EAAC,eAAe,GAAG;QACvC,MAAM,EAAE,IAAI;KACb;IACD;QACE,EAAE,EAAE,KAAK;QACT,OAAO,EACL,wHAAwH;QAC1H,SAAS,EAAE,CAAC,WAAW,EAAE,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,YAAY,EAAE,CAAC;QACpE,MAAM,EAAE,KAAC,MAAM,IAAC,IAAI,EAAC,aAAa,GAAG;QACrC,MAAM,EAAE,IAAI;KACb;IACD;QACE,EAAE,EAAE,KAAK;QACT,OAAO,EAAE,+DAA+D;QACxE,SAAS,EAAE,CAAC,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC,YAAY,EAAE,CAAC;QACxD,MAAM,EAAE,IAAI;KACb;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAuC;IAChE;QACE,EAAE,EAAE,KAAK;QACT,OAAO,EAAE,8DAA8D;QACvE,SAAS,EAAE,CAAC,WAAW,EAAE,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC,YAAY,EAAE,CAAC;KACvE;IACD;QACE,EAAE,EAAE,KAAK;QACT,OAAO,EAAE,oDAAoD;KAC9D;IACD;QACE,EAAE,EAAE,KAAK;QACT,OAAO,EACL,0FAA0F;QAC5F,SAAS,EAAE,CAAC,WAAW,EAAE,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,YAAY,EAAE,CAAC;KACrE;IACD;QACE,EAAE,EAAE,KAAK;QACT,OAAO,EAAE,8DAA8D;QACvE,SAAS,EAAE,CAAC,WAAW,EAAE,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC,YAAY,EAAE,CAAC;KACvE;IACD;QACE,EAAE,EAAE,KAAK;QACT,OAAO,EAAE,oDAAoD;KAC9D;IACD;QACE,EAAE,EAAE,KAAK;QACT,OAAO,EACL,0FAA0F;QAC5F,SAAS,EAAE,CAAC,WAAW,EAAE,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,YAAY,EAAE,CAAC;KACrE;IACD;QACE,EAAE,EAAE,KAAK;QACT,OAAO,EAAE,8DAA8D;QACvE,SAAS,EAAE,CAAC,WAAW,EAAE,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC,YAAY,EAAE,CAAC;KACvE;IACD;QACE,EAAE,EAAE,KAAK;QACT,OAAO,EAAE,oDAAoD;KAC9D;IACD;QACE,EAAE,EAAE,KAAK;QACT,OAAO,EACL,0FAA0F;QAC5F,SAAS,EAAE,CAAC,WAAW,EAAE,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,YAAY,EAAE,CAAC;KACrE;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAChC,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAE,EAAE,EAAE,iBAAiB,YACjF,KAAC,IAAI,cACH,KAAC,WAAW,cACV,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,yCAAgC,GACtC,GACT,GACF,CACR,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG;IAC1B,MAAM,EAAE,KAAC,MAAM,IAAC,IAAI,EAAC,cAAc,GAAG;IACtC,OAAO,EAAE;QACP,EAAE,OAAO,EAAE,SAAS,EAAE,EAAE,EAAE,SAAS,EAAE;QACrC,EAAE,OAAO,EAAE,UAAU,EAAE,EAAE,EAAE,UAAU,EAAE;QACvC,EAAE,OAAO,EAAE,iBAAiB,EAAE,EAAE,EAAE,MAAM,EAAE;QAC1C,EAAE,OAAO,EAAE,aAAa,EAAE,EAAE,EAAE,MAAM,EAAE;QACtC,EAAE,OAAO,EAAE,SAAS,EAAE,EAAE,EAAE,QAAQ,EAAE;KACrC;IACD,IAAI,EAAE,cAAc;CACrB,CAAC","sourcesContent":["import {\n  AppShellProps,\n  Avatar,\n  Card,\n  CardContent,\n  DrawerItemProps,\n  Flex,\n  ForwardProps,\n  Text\n} from '@pega/cosmos-react-core';\n\nimport { StyledMainContent } from './AppShell.styles';\n\nexport const defaultLinks: AppShellProps['links'] = [\n  {\n    id: '01',\n    name: 'Home',\n    href: '#home',\n    icon: 'home-solid',\n    active: true\n  },\n  {\n    id: '02',\n    name: 'My Dashboard',\n    href: '#dashboard',\n    icon: 'gauge-solid'\n  },\n  {\n    id: '03',\n    name: 'Collaboration',\n    href: '#collaboration',\n    icon: 'social-solid',\n    links: [\n      { id: '3-01', name: 'Spaces', href: '#spaces' },\n      { id: '3-02', name: 'Documents', href: '#documents' }\n    ]\n  },\n\n  {\n    id: '04',\n    name: 'Bugs',\n    href: '#bugs',\n    icon: 'users-solid'\n  },\n  {\n    id: '05',\n    name: 'Epics',\n    href: '#epics',\n    icon: 'book-solid'\n  },\n  {\n    id: '06',\n    name: 'Goals',\n    href: '#goals',\n    icon: 'analytics-good'\n  },\n  {\n    id: '07',\n    name: 'More',\n    href: '#more',\n    icon: 'more-alt',\n    active: false,\n    links: [\n      { id: '7-01', name: 'Item A', href: '#itemA' },\n      { id: '7-02', name: 'Option 1', href: '#option1' }\n    ]\n  }\n];\n\nexport const defaultNotifications: (DrawerItemProps & ForwardProps)[] = [\n  {\n    id: '123',\n    primary:\n      \"Dean Thomas mentioned your team in a bug 'Button does not initiate onClick event handler'.\",\n    secondary: ['BUG-12345', new Date(2020, 8, 31, 13, 23).toDateString()],\n    visual: <Avatar name='Dean Thomas' />,\n    unread: true\n  },\n  {\n    id: '456',\n    primary: \"Seth DeAngelo mentioned your team in a bug 'Text variant h1 renders as h3 in DOM'.\",\n    visual: <Avatar name='Seth DeAngelo' />,\n    unread: true\n  },\n  {\n    id: '789',\n    primary:\n      \"Janet Moore mentioned your team in a bug 'Tree expanded state does not match the state that was set on the component'.\",\n    secondary: ['BUG-12345', new Date(2020, 9, 2, 9, 22).toDateString()],\n    visual: <Avatar name='Janet Moore' />,\n    unread: true\n  },\n  {\n    id: '000',\n    primary: 'You have been awarded Employee of the Month! Congratulations!',\n    secondary: [new Date(2020, 9, 8, 14, 46).toDateString()],\n    unread: true\n  }\n];\n\nexport const defaultRecents: (DrawerItemProps & ForwardProps)[] = [\n  {\n    id: '123',\n    primary: \"BUG-12345: 'Button does not initiate onClick event handler'.\",\n    secondary: ['BUG-12345', new Date(2020, 8, 31, 13, 23).toDateString()]\n  },\n  {\n    id: '456',\n    primary: \"BUG-54321: 'Text variant h1 renders as h3 in DOM'.\"\n  },\n  {\n    id: '789',\n    primary:\n      \"BUG-00000: 'Tree expanded state does not match the state that was set on the component'.\",\n    secondary: ['BUG-00000', new Date(2020, 9, 2, 9, 22).toDateString()]\n  },\n  {\n    id: '111',\n    primary: \"BUG-12345: 'Button does not initiate onClick event handler'.\",\n    secondary: ['BUG-12345', new Date(2020, 8, 31, 13, 23).toDateString()]\n  },\n  {\n    id: '222',\n    primary: \"BUG-54321: 'Text variant h1 renders as h3 in DOM'.\"\n  },\n  {\n    id: '333',\n    primary:\n      \"BUG-00000: 'Tree expanded state does not match the state that was set on the component'.\",\n    secondary: ['BUG-00000', new Date(2020, 9, 2, 9, 22).toDateString()]\n  },\n  {\n    id: '444',\n    primary: \"BUG-12345: 'Button does not initiate onClick event handler'.\",\n    secondary: ['BUG-12345', new Date(2020, 8, 31, 13, 23).toDateString()]\n  },\n  {\n    id: '555',\n    primary: \"BUG-54321: 'Text variant h1 renders as h3 in DOM'.\"\n  },\n  {\n    id: '666',\n    primary:\n      \"BUG-00000: 'Tree expanded state does not match the state that was set on the component'.\",\n    secondary: ['BUG-00000', new Date(2020, 9, 2, 9, 22).toDateString()]\n  }\n];\n\nexport const defaultMainContent = (\n  <Flex container={{ justify: 'center', alignItems: 'center' }} as={StyledMainContent}>\n    <Card>\n      <CardContent>\n        <Text variant='h2'>This is the main content</Text>\n      </CardContent>\n    </Card>\n  </Flex>\n);\n\nexport const operatorData = {\n  avatar: <Avatar name='Cindy Turner' />,\n  actions: [\n    { primary: 'Profile', id: 'profile' },\n    { primary: 'Settings', id: 'settings' },\n    { primary: 'My applications', id: 'apps' },\n    { primary: 'Help center', id: 'help' },\n    { primary: 'Log out', id: 'logout' }\n  ],\n  name: 'Cindy Turner'\n};\n"]}

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

@@ -6,6 +6,7 @@ interface AppShellStoryProps {
     /** Demo props */
     main?: AppShellProps['main'];
     appInfo?: AppShellProps['appInfo'];
+    searchPage?: AppShellProps['searchPage'];
     banners?: AppShellProps['banners'];
     cases?: AppShellProps['cases'];
     caseLinks?: AppShellProps['links'];
@@ -13,6 +14,7 @@ interface AppShellStoryProps {
     recentItems?: any[];
     utils?: AppShellProps['utils'];
     onLinkClick?: (name: string) => void;
+    collapsedHoverMenus?: boolean;
     /** Storybook controls */
     appName?: AppShellProps['appInfo']['appName'];
     portalName?: AppShellProps['appInfo']['portalName'];

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

@@ -1 +1 @@
-{"version":3,"file":"AppShell.stories.d.ts","sourceRoot":"","sources":["../../../src/core/AppShell/AppShell.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAEL,aAAa,EAmBd,MAAM,yBAAyB,CAAC;;AAcjC,wBAOU;AAEV,UAAU,kBAAkB;IAC1B,iBAAiB;IACjB,IAAI,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;IAC7B,OAAO,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IACnC,OAAO,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IACnC,KAAK,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAC/B,SAAS,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IACnC,WAAW,CAAC,EAAE,GAAG,EAAE,CAAC;IACpB,WAAW,CAAC,EAAE,GAAG,EAAE,CAAC;IACpB,KAAK,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAC/B,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAErC,yBAAyB;IACzB,OAAO,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC,SAAS,CAAC,CAAC;IAC9C,UAAU,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC,YAAY,CAAC,CAAC;IACpD,IAAI,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC,MAAM,CAAC,CAAC;IACxC,QAAQ,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC,UAAU,CAAC,CAAC;IAChD,YAAY,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC,cAAc,CAAC,CAAC;IACxD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC;IACvC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,kBAAkB,CAqPlD,CAAC;AAsCF,UAAU,yBAAyB;IACjC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,yBAAyB,CAqBjE,CAAC"}
+{"version":3,"file":"AppShell.stories.d.ts","sourceRoot":"","sources":["../../../src/core/AppShell/AppShell.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAEL,aAAa,EAqBd,MAAM,yBAAyB,CAAC;;AAgBjC,wBAOU;AAEV,UAAU,kBAAkB;IAC1B,iBAAiB;IACjB,IAAI,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;IAC7B,OAAO,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IACnC,UAAU,CAAC,EAAE,aAAa,CAAC,YAAY,CAAC,CAAC;IACzC,OAAO,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IACnC,KAAK,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAC/B,SAAS,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IACnC,WAAW,CAAC,EAAE,GAAG,EAAE,CAAC;IACpB,WAAW,CAAC,EAAE,GAAG,EAAE,CAAC;IACpB,KAAK,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAC/B,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAE9B,yBAAyB;IACzB,OAAO,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC,SAAS,CAAC,CAAC;IAC9C,UAAU,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC,YAAY,CAAC,CAAC;IACpD,IAAI,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC,MAAM,CAAC,CAAC;IACxC,QAAQ,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC,UAAU,CAAC,CAAC;IAChD,YAAY,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC,cAAc,CAAC,CAAC;IACxD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC;IACvC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,kBAAkB,CAyRlD,CAAC;AAsCF,UAAU,yBAAyB;IACjC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,yBAAyB,CAqBjE,CAAC"}

package/lib/core/AppShell/AppShell.stories.js

@@ -1,8 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useContext, useState, useMemo, useRef } from 'react';
-import { AppShell, AppShellList, Button, DateInput, Grid, Icon, registerIcon, Input, Select, Option, Modal, ModalManagerContext, TextArea, ToasterContext, useAfterInitialEffect, windowIsAvailable, Configuration } from '@pega/cosmos-react-core';
+import { useState, useMemo, useRef } from 'react';
+import { AppShell, AppShellList, Button, DateInput, Grid, Icon, registerIcon, Input, Select, Option, Modal, TextArea, useModalManager, useToaster, useAfterInitialEffect, useModalContext, windowIsAvailable, Configuration } from '@pega/cosmos-react-core';
 import * as bellSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/bell-solid.icon';
 import * as clockSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/clock-solid.icon';
+import { recentSearches, searchResults } from '../SearchInput/SearchInput.mocks';
 import { defaultLinks, defaultMainContent, defaultNotifications, defaultRecents, operatorData } from './AppShell.mocks';
 registerIcon(bellSolidIcon, clockSolidIcon);
 export default {
@@ -15,9 +16,8 @@ export default {
 };
 export const AppShellDemo = (args) => {
     const CreateCaseModal = ({ caseType }) => {
-        const { ModalContext } = useContext(ModalManagerContext);
-        const { dismiss } = useContext(ModalContext);
-        const { push: pushToaster } = useContext(ToasterContext);
+        const { dismiss } = useModalContext();
+        const { push: pushToaster } = useToaster();
         return (_jsx(Modal, { as: 'form', heading: `New ${caseType}`, actions: _jsxs(_Fragment, { children: [_jsx(Button, { onClick: dismiss, children: "Cancel" }), _jsx(Button, { variant: 'primary', type: 'submit', onClick: (e) => {
                             e.preventDefault();
                             dismiss();
@@ -26,12 +26,15 @@ export const AppShellDemo = (args) => {
     };
     const caseLinks = args.caseLinks || defaultLinks;
     const showSearch = args.withSearch !== undefined ? args.withSearch : true;
-    const { create: createModal } = useContext(ModalManagerContext);
+    const { create: createModal } = useModalManager();
     const [links, setLinks] = useState(caseLinks);
     const [notifications, setNotifications] = useState(defaultNotifications);
     const [recents, setRecents] = useState(args.recentItems || defaultRecents);
     const [numNewNotifications, setNumNewNotifications] = useState(notifications.filter(x => x.unread).length);
     const [searchVal, setSearchVal] = useState('');
+    const [searchLoading, setSearchLoading] = useState(false);
+    const [results, setResults] = useState([]);
+    const [searchTimeout, setSearchTimeout] = useState();
     useAfterInitialEffect(() => {
         setLinks(caseLinks);
     }, [caseLinks]);
@@ -42,14 +45,24 @@ export const AppShellDemo = (args) => {
                 e.preventDefault();
                 setLinks((prevLinks = []) => {
                     return prevLinks.map(prevLink => {
-                        return { ...link, active: prevLink.name === link.name };
+                        return { ...prevLink, active: prevLink.name === link.name };
                     });
                 });
                 args.onLinkClick?.(link.name);
             }
         }));
     }, [links]);
-    const defaultCreateLinks = ['Vehicle Purchase'].map(name => ({
+    const defaultCreateLinks = [
+        'Vehicle Purchase',
+        'Vehicle Sale',
+        'Loan Refinance',
+        'Service Request',
+        'Trade In',
+        'Auction Invoice',
+        'Lender Approval',
+        'Inventory Audit',
+        'Sales Performance'
+    ].map(name => ({
         name,
         onClick: () => {
             createModal(CreateCaseModal, { caseType: name });
@@ -69,6 +82,22 @@ export const AppShellDemo = (args) => {
             ...item
         })));
     };
+    const onSearch = (val) => {
+        setSearchVal(val);
+        if (searchTimeout) {
+            clearTimeout(searchTimeout);
+            setSearchTimeout(null);
+        }
+        setResults([]);
+        if (val) {
+            setSearchLoading(true);
+            const timeout = setTimeout(() => {
+                setSearchLoading(false);
+                setResults(searchResults.filter(res => res.primary.includes(val)));
+            }, 1000);
+            setSearchTimeout(timeout);
+        }
+    };
     const notificationViewItems = [
         {
             id: '234',
@@ -137,7 +166,7 @@ export const AppShellDemo = (args) => {
     return (_jsx(AppShell, { appInfo: args.appInfo || {
             href: args.href || 'https://www.pega.com/',
             imageSrc: args.imageSrc ||
-                'https://pbs.twimg.com/profile_images/1410341211978752004/pLYjGIa8_bigger.jpg',
+                'https://pbs.twimg.com/profile_images/1531984159698198531/bEniqFN1_bigger.jpg',
             fullImageSrc: args.fullImageSrc ||
                 'https://www.pega.com/themes/custom/pegawww_theme/images/pega-logo.svg',
             appName: args.appName || 'Cosmos AppShell',
@@ -145,16 +174,21 @@ export const AppShellDemo = (args) => {
         }, searchInput: showSearch
             ? {
                 onSearchChange: (value) => {
-                    setSearchVal(value);
+                    onSearch(value);
                 },
-                value: searchVal
+                value: searchVal,
+                searchResults: results,
+                recentSearches,
+                loading: searchLoading,
+                filters: ['Story', 'Bug'],
+                advancedSearchLink: { href: '/' }
             }
-            : undefined, appHeader: args.appHeader, caseTypes: args.casesTypesEmpty ? [] : args.createLinks || defaultCreateLinks, links: linksWithHandlers, main: args.main || defaultMainContent, cases: args.cases, banners: args.banners, operator: operatorData, utils: args.utils || defaultUtils, environment: args.environmentName
+            : undefined, appHeader: args.appHeader, searchPage: args.searchPage, caseTypes: args.casesTypesEmpty ? [] : args.createLinks || defaultCreateLinks, links: linksWithHandlers, main: args.main || defaultMainContent, cases: args.cases, banners: args.banners, operator: operatorData, utils: args.utils || defaultUtils, environment: args.environmentName
             ? {
                 name: args.environmentName,
                 color: args.environmentColor
             }
-            : undefined }));
+            : undefined, collapsedHoverMenus: args.collapsedHoverMenus }));
 };
 AppShellDemo.args = {
     appName: 'Cosmos AppShell',