npm - @pega/cosmos-react-demos - Versions diffs - 3.0.0-dev.2.0 → 3.0.0-dev.4.1 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (325) hide show

package/lib/core/Rating/Rating.stories.js CHANGED Viewed

@@ -29,7 +29,7 @@ export const ConfigurableRating = (args) => {
         }, children: _jsx(Rating, { maxRating: 5, value: 3.6, metaInfo: '52 reviews', "aria-label": '3.6 out of 5 stars based on 52 reviews' }, void 0) }, void 0));
 };
 ConfigurableRating.args = {
-    color: '#000000'
+    color: '#939393'
 };
 ConfigurableRating.argTypes = {
     color: { control: { type: 'color' } }

package/lib/core/Rating/Rating.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Rating.stories.js","sourceRoot":"","sources":["../../../src/core/Rating/Rating.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,EAAe,MAAM,yBAAyB,CAAC;AAE7E,eAAe;IACb,KAAK,EAAE,aAAa;IACpB,SAAS,EAAE,MAAM;CACV,CAAC;AAMV,MAAM,CAAC,MAAM,UAAU,GAA4B,CAAC,IAAsB,EAAE,EAAE;IAC5E,OAAO,CACL,KAAC,MAAM,OACD,IAAI,EACR,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,gBACX,IAAI,CAAC,SAAS,WAC1B,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,UAAU,CAAC,IAAI,GAAG;IAChB,SAAS,EAAE,CAAC;IACZ,KAAK,EAAE,GAAG;IACV,QAAQ,EAAE,YAAY;IACtB,SAAS,EAAE,wCAAwC;CACpD,CAAC;AAEF,UAAU,CAAC,QAAQ,GAAG;IACpB,SAAS,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IAC1C,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IACtC,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACvC,SAAS,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;CACzC,CAAC;AAMF,MAAM,CAAC,MAAM,kBAAkB,GAAmC,CAChE,IAA6B,EAC7B,EAAE;IACF,OAAO,CACL,KAAC,aAAa,IACZ,KAAK,EAAE;YACL,UAAU,EAAE;gBACV,MAAM,EAAE;oBACN,KAAK,EAAE,IAAI,CAAC,KAAK;iBAClB;aACF;SACF,YAED,KAAC,MAAM,IACL,SAAS,EAAE,CAAC,EACZ,KAAK,EAAE,GAAG,EACV,QAAQ,EAAC,YAAY,gBACV,wCAAwC,WACnD,WACY,CACjB,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAkB,CAAC,IAAI,GAAG;IACxB,KAAK,EAAE,SAAS;CACjB,CAAC;AAEF,kBAAkB,CAAC,QAAQ,GAAG;IAC5B,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE;CACtC,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { Configuration, Rating, RatingProps } from '@pega/cosmos-react-core';\n\nexport default {\n title: 'Core/Rating',\n component: Rating\n} as Meta;\n\ninterface RatingStoryProps extends RatingProps {\n ariaLabel?: string;\n}\n\nexport const RatingDemo: Story<RatingStoryProps> = (args: RatingStoryProps) => {\n return (\n <Rating\n {...args}\n maxRating={args.maxRating}\n value={args.value}\n metaInfo={args.metaInfo}\n aria-label={args.ariaLabel}\n />\n );\n};\n\nRatingDemo.args = {\n maxRating: 5,\n value: 3.6,\n metaInfo: '52 reviews',\n ariaLabel: '3.6 out of 5 stars based on 52 reviews'\n};\n\nRatingDemo.argTypes = {\n maxRating: { control: { type: 'number' } },\n value: { control: { type: 'number' } },\n metaInfo: { control: { type: 'text' } },\n ariaLabel: { control: { type: 'text' } }\n};\n\ninterface ConfigurableRatingProps {\n color?: string;\n}\n\nexport const ConfigurableRating: Story<ConfigurableRatingProps> = (\n args: ConfigurableRatingProps\n) => {\n return (\n <Configuration\n theme={{\n components: {\n rating: {\n color: args.color\n }\n }\n }}\n >\n <Rating\n maxRating={5}\n value={3.6}\n metaInfo='52 reviews'\n aria-label='3.6 out of 5 stars based on 52 reviews'\n />\n </Configuration>\n );\n};\n\nConfigurableRating.args = {\n color: '#~~000000~~'\n};\n\nConfigurableRating.argTypes = {\n color: { control: { type: 'color' } }\n};\n"]}
1	+ {"version":3,"file":"Rating.stories.js","sourceRoot":"","sources":["../../../src/core/Rating/Rating.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,EAAe,MAAM,yBAAyB,CAAC;AAE7E,eAAe;IACb,KAAK,EAAE,aAAa;IACpB,SAAS,EAAE,MAAM;CACV,CAAC;AAMV,MAAM,CAAC,MAAM,UAAU,GAA4B,CAAC,IAAsB,EAAE,EAAE;IAC5E,OAAO,CACL,KAAC,MAAM,OACD,IAAI,EACR,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,gBACX,IAAI,CAAC,SAAS,WAC1B,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,UAAU,CAAC,IAAI,GAAG;IAChB,SAAS,EAAE,CAAC;IACZ,KAAK,EAAE,GAAG;IACV,QAAQ,EAAE,YAAY;IACtB,SAAS,EAAE,wCAAwC;CACpD,CAAC;AAEF,UAAU,CAAC,QAAQ,GAAG;IACpB,SAAS,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IAC1C,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IACtC,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACvC,SAAS,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;CACzC,CAAC;AAMF,MAAM,CAAC,MAAM,kBAAkB,GAAmC,CAChE,IAA6B,EAC7B,EAAE;IACF,OAAO,CACL,KAAC,aAAa,IACZ,KAAK,EAAE;YACL,UAAU,EAAE;gBACV,MAAM,EAAE;oBACN,KAAK,EAAE,IAAI,CAAC,KAAK;iBAClB;aACF;SACF,YAED,KAAC,MAAM,IACL,SAAS,EAAE,CAAC,EACZ,KAAK,EAAE,GAAG,EACV,QAAQ,EAAC,YAAY,gBACV,wCAAwC,WACnD,WACY,CACjB,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAkB,CAAC,IAAI,GAAG;IACxB,KAAK,EAAE,SAAS;CACjB,CAAC;AAEF,kBAAkB,CAAC,QAAQ,GAAG;IAC5B,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE;CACtC,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { Configuration, Rating, RatingProps } from '@pega/cosmos-react-core';\n\nexport default {\n title: 'Core/Rating',\n component: Rating\n} as Meta;\n\ninterface RatingStoryProps extends RatingProps {\n ariaLabel?: string;\n}\n\nexport const RatingDemo: Story<RatingStoryProps> = (args: RatingStoryProps) => {\n return (\n <Rating\n {...args}\n maxRating={args.maxRating}\n value={args.value}\n metaInfo={args.metaInfo}\n aria-label={args.ariaLabel}\n />\n );\n};\n\nRatingDemo.args = {\n maxRating: 5,\n value: 3.6,\n metaInfo: '52 reviews',\n ariaLabel: '3.6 out of 5 stars based on 52 reviews'\n};\n\nRatingDemo.argTypes = {\n maxRating: { control: { type: 'number' } },\n value: { control: { type: 'number' } },\n metaInfo: { control: { type: 'text' } },\n ariaLabel: { control: { type: 'text' } }\n};\n\ninterface ConfigurableRatingProps {\n color?: string;\n}\n\nexport const ConfigurableRating: Story<ConfigurableRatingProps> = (\n args: ConfigurableRatingProps\n) => {\n return (\n <Configuration\n theme={{\n components: {\n rating: {\n color: args.color\n }\n }\n }}\n >\n <Rating\n maxRating={5}\n value={3.6}\n metaInfo='52 reviews'\n aria-label='3.6 out of 5 stars based on 52 reviews'\n />\n </Configuration>\n );\n};\n\nConfigurableRating.args = {\n color: '#939393'\n};\n\nConfigurableRating.argTypes = {\n color: { control: { type: 'color' } }\n};\n"]}

package/lib/core/Sentiment/Sentiment.stories.js CHANGED Viewed

@@ -52,12 +52,12 @@ export const ConfigurableSentiment = (args) => {
                     }
                 }
             }
-        }, children: [_jsx(Sentiment, { variant: 'positive' }, void 0), _jsx(Sentiment, { variant: 'negative' }, void 0), _jsx(Sentiment, { variant: 'neutral' }, void 0)] }, void 0));
+        }, children: [_jsx(Sentiment, { variant: 'positive', icons: { positive: 'face-happy-solid' } }, void 0), _jsx(Sentiment, { variant: 'negative', icons: { negative: 'face-sad-solid' } }, void 0), _jsx(Sentiment, { variant: 'neutral', icons: { neutral: 'face-blank-solid' } }, void 0)] }, void 0));
 };
 ConfigurableSentiment.args = {
     positiveColor: '#20aa50',
     negativeColor: '#d91c29',
-    neutralColor: '#000000'
+    neutralColor: '#939393'
 };
 ConfigurableSentiment.argTypes = {
     positiveColor: { control: { type: 'color' } },

package/lib/core/Sentiment/Sentiment.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Sentiment.stories.js","sourceRoot":"","sources":["../../../src/core/Sentiment/Sentiment.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,SAAS,EAAkB,MAAM,yBAAyB,CAAC;AAE1F,eAAe;IACb,KAAK,EAAE,gBAAgB;IACvB,SAAS,EAAE,SAAS;CACb,CAAC;AAWV,MAAM,CAAC,MAAM,aAAa,GAA+B,CAAC,IAAyB,EAAE,EAAE;IACrF,MAAM,SAAS,GAAG;QAChB,QAAQ,EAAE,IAAI,CAAC,YAAY;QAC3B,OAAO,EAAE,IAAI,CAAC,WAAW;QACzB,QAAQ,EAAE,IAAI,CAAC,YAAY;KAC5B,CAAC;IAEF,MAAM,MAAM,GAAG;QACb,QAAQ,EAAE,IAAI,CAAC,aAAa;QAC5B,OAAO,EAAE,IAAI,CAAC,YAAY;QAC1B,QAAQ,EAAE,IAAI,CAAC,aAAa;KAC7B,CAAC;IAEF,OAAO,CACL,KAAC,SAAS,IACR,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,KAAK,EAAE,SAAS,EAChB,MAAM,EAAE,MAAM,WACd,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,aAAa,CAAC,IAAI,GAAG;IACnB,OAAO,EAAE,UAAU;IACnB,WAAW,EAAE,KAAK;IAClB,aAAa,EAAE,MAAM;IACrB,YAAY,EAAE,kBAAkB;IAChC,YAAY,EAAE,KAAK;IACnB,WAAW,EAAE,kBAAkB;IAC/B,aAAa,EAAE,QAAQ;IACvB,YAAY,EAAE,gBAAgB;CAC/B,CAAC;AAEF,aAAa,CAAC,QAAQ,GAAG;IACvB,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,UAAU,EAAE,SAAS,EAAE,UAAU,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IACtF,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC7C,aAAa,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IAC5C,YAAY,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE;IAC1E,YAAY,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IAC3C,WAAW,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE;IACzE,aAAa,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IAC5C,YAAY,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE;CAC3E,CAAC;AAQF,MAAM,CAAC,MAAM,qBAAqB,GAAsC,CACtE,IAAgC,EAChC,EAAE;IACF,OAAO,CACL,MAAC,aAAa,IACZ,KAAK,EAAE;YACL,UAAU,EAAE;gBACV,SAAS,EAAE;oBACT,QAAQ,EAAE;wBACR,KAAK,EAAE,IAAI,CAAC,aAAa;qBAC1B;oBACD,QAAQ,EAAE;wBACR,KAAK,EAAE,IAAI,CAAC,aAAa;qBAC1B;oBACD,OAAO,EAAE;wBACP,KAAK,EAAE,IAAI,CAAC,YAAY;qBACzB;iBACF;aACF;SACF,aAED,KAAC,SAAS,IAAC,OAAO,EAAC,UAAU,~~WAAG~~,~~EAChC~~,KAAC,SAAS,IAAC,OAAO,EAAC,UAAU,~~WAAG~~,~~EAChC~~,KAAC,SAAS,IAAC,OAAO,EAAC,SAAS,~~WAAG~~,~~YACjB~~,CACjB,CAAC;AACJ,CAAC,CAAC;AAEF,qBAAqB,CAAC,IAAI,GAAG;IAC3B,aAAa,EAAE,SAAS;IACxB,aAAa,EAAE,SAAS;IACxB,YAAY,EAAE,SAAS;CACxB,CAAC;AAEF,qBAAqB,CAAC,QAAQ,GAAG;IAC/B,aAAa,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE;IAC7C,aAAa,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE;IAC7C,YAAY,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE;CAC7C,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { Configuration, icons, Sentiment, SentimentProps } from '@pega/cosmos-react-core';\n\nexport default {\n title: 'Core/Sentiment',\n component: Sentiment\n} as Meta;\n\ninterface SentimentStoryProps extends SentimentProps {\n positiveLabel: string;\n neutralLabel: string;\n negativeLabel: string;\n positiveIcon: string;\n neutralIcon: string;\n negativeIcon: string;\n}\n\nexport const SentimentDemo: Story<SentimentStoryProps> = (args: SentimentStoryProps) => {\n const iconNames = {\n positive: args.positiveIcon,\n neutral: args.neutralIcon,\n negative: args.negativeIcon\n };\n\n const labels = {\n positive: args.positiveLabel,\n neutral: args.neutralLabel,\n negative: args.negativeLabel\n };\n\n return (\n <Sentiment\n variant={args.variant}\n labelHidden={args.labelHidden}\n icons={iconNames}\n labels={labels}\n />\n );\n};\n\nSentimentDemo.args = {\n variant: 'positive',\n labelHidden: false,\n positiveLabel: 'Yay!',\n positiveIcon: 'face-happy-solid',\n neutralLabel: 'Hm…',\n neutralIcon: 'face-blank-solid',\n negativeLabel: 'Uh-oh!',\n negativeIcon: 'face-sad-solid'\n};\n\nSentimentDemo.argTypes = {\n variant: { options: ['positive', 'neutral', 'negative'], control: { type: 'select' } },\n labelHidden: { control: { type: 'boolean' } },\n positiveLabel: { control: { type: 'text' } },\n positiveIcon: { options: icons, control: { type: 'select', icons: true } },\n neutralLabel: { control: { type: 'text' } },\n neutralIcon: { options: icons, control: { type: 'select', icons: true } },\n negativeLabel: { control: { type: 'text' } },\n negativeIcon: { options: icons, control: { type: 'select', icons: true } }\n};\n\ninterface ConfigurableSentimentProps {\n positiveColor?: string;\n negativeColor?: string;\n neutralColor?: string;\n}\n\nexport const ConfigurableSentiment: Story<ConfigurableSentimentProps> = (\n args: ConfigurableSentimentProps\n) => {\n return (\n <Configuration\n theme={{\n components: {\n sentiment: {\n positive: {\n color: args.positiveColor\n },\n negative: {\n color: args.negativeColor\n },\n neutral: {\n color: args.neutralColor\n }\n }\n }\n }}\n >\n <Sentiment variant='positive' />\n <Sentiment variant='negative' />\n <Sentiment variant='neutral' />\n </Configuration>\n );\n};\n\nConfigurableSentiment.args = {\n positiveColor: '#20aa50',\n negativeColor: '#d91c29',\n neutralColor: '#~~000000~~'\n};\n\nConfigurableSentiment.argTypes = {\n positiveColor: { control: { type: 'color' } },\n negativeColor: { control: { type: 'color' } },\n neutralColor: { control: { type: 'color' } }\n};\n"]}
1	+ {"version":3,"file":"Sentiment.stories.js","sourceRoot":"","sources":["../../../src/core/Sentiment/Sentiment.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { Configuration, icons, Sentiment, SentimentProps } from '@pega/cosmos-react-core';\n\nexport default {\n title: 'Core/Sentiment',\n component: Sentiment\n} as Meta;\n\ninterface SentimentStoryProps extends SentimentProps {\n positiveLabel: string;\n neutralLabel: string;\n negativeLabel: string;\n positiveIcon: string;\n neutralIcon: string;\n negativeIcon: string;\n}\n\nexport const SentimentDemo: Story<SentimentStoryProps> = (args: SentimentStoryProps) => {\n const iconNames = {\n positive: args.positiveIcon,\n neutral: args.neutralIcon,\n negative: args.negativeIcon\n };\n\n const labels = {\n positive: args.positiveLabel,\n neutral: args.neutralLabel,\n negative: args.negativeLabel\n };\n\n return (\n <Sentiment\n variant={args.variant}\n labelHidden={args.labelHidden}\n icons={iconNames}\n labels={labels}\n />\n );\n};\n\nSentimentDemo.args = {\n variant: 'positive',\n labelHidden: false,\n positiveLabel: 'Yay!',\n positiveIcon: 'face-happy-solid',\n neutralLabel: 'Hm…',\n neutralIcon: 'face-blank-solid',\n negativeLabel: 'Uh-oh!',\n negativeIcon: 'face-sad-solid'\n};\n\nSentimentDemo.argTypes = {\n variant: { options: ['positive', 'neutral', 'negative'], control: { type: 'select' } },\n labelHidden: { control: { type: 'boolean' } },\n positiveLabel: { control: { type: 'text' } },\n positiveIcon: { options: icons, control: { type: 'select', icons: true } },\n neutralLabel: { control: { type: 'text' } },\n neutralIcon: { options: icons, control: { type: 'select', icons: true } },\n negativeLabel: { control: { type: 'text' } },\n negativeIcon: { options: icons, control: { type: 'select', icons: true } }\n};\n\ninterface ConfigurableSentimentProps {\n positiveColor?: string;\n negativeColor?: string;\n neutralColor?: string;\n}\n\nexport const ConfigurableSentiment: Story<ConfigurableSentimentProps> = (\n args: ConfigurableSentimentProps\n) => {\n return (\n <Configuration\n theme={{\n components: {\n sentiment: {\n positive: {\n color: args.positiveColor\n },\n negative: {\n color: args.negativeColor\n },\n neutral: {\n color: args.neutralColor\n }\n }\n }\n }}\n >\n <Sentiment variant='positive' icons={{ positive: 'face-happy-solid' }} />\n <Sentiment variant='negative' icons={{ negative: 'face-sad-solid' }} />\n <Sentiment variant='neutral' icons={{ neutral: 'face-blank-solid' }} />\n </Configuration>\n );\n};\n\nConfigurableSentiment.args = {\n positiveColor: '#20aa50',\n negativeColor: '#d91c29',\n neutralColor: '#939393'\n};\n\nConfigurableSentiment.argTypes = {\n positiveColor: { control: { type: 'color' } },\n negativeColor: { control: { type: 'color' } },\n neutralColor: { control: { type: 'color' } }\n};\n"]}

package/lib/core/Table/Table.mocks.d.ts CHANGED Viewed

@@ -16,4 +16,10 @@ export declare const tableData: ({
     balance: string;
     emailVerified?: undefined;
 })[];
+export declare const commitsData: {
+    id: string;
+    author: string;
+    date: string;
+    message: string;
+}[];
 //# sourceMappingURL=Table.mocks.d.ts.map

package/lib/core/Table/Table.mocks.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Table.mocks.d.ts","sourceRoot":"","sources":["../../../src/core/Table/Table.mocks.tsx"],"names":[],"mappings":";AAAA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;IAgCrB,CAAC"}
1	+ {"version":3,"file":"Table.mocks.d.ts","sourceRoot":"","sources":["../../../src/core/Table/Table.mocks.tsx"],"names":[],"mappings":";AAAA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;IAgCrB,CAAC;AAEF,eAAO,MAAM,WAAW;;;;;GAuIvB,CAAC"}

package/lib/core/Table/Table.mocks.js CHANGED Viewed

@@ -27,4 +27,138 @@ export const tableData = [
         balance: '-$175'
     }
 ];
+export const commitsData = [
+    {
+        id: '1407c5fcbe460aa06a78b4779583917599d9bd78',
+        author: 'Scott Farmer',
+        date: 'Fri Jan 28',
+        message: 'pkg: Version 3.0.0-dev.2.1.'
+    },
+    {
+        id: '902716be61eed70280178c01db19fwa504f57a51',
+        author: 'Scott Farmer',
+        date: 'Fri Jan 28',
+        message: 'fix(core:Menu): Adds missing icon registrations.'
+    },
+    {
+        id: '8b7916b1d8691fec1d884eadb445019a44ba6c6b',
+        author: 'Sam Singh',
+        date: 'Fri Jan 28',
+        message: 'fix(core:Currency): Fixes decimal truncation. Updates the tests.'
+    },
+    {
+        id: '7d119a2af6d6de9516da3e4eddf8e4523152358e',
+        author: 'Sam Singh',
+        date: 'Wed Jan 26',
+        message: 'docs(work:Details): Updates the demo.'
+    },
+    {
+        id: '41f0875a5b049d40081w0bf8bbae0279ee469fe6',
+        author: 'Scott Farmer',
+        date: 'Tue Jan 25',
+        message: 'fix(core:icons): Updates minus icon to be more centered.'
+    },
+    {
+        id: '9f5996ebd2d9076b53bff2cf8a641v292bcbc256',
+        author: 'Anna Florence',
+        date: 'Wed Jan 26',
+        message: 'docs(core:Toaster): Modifies Toaster demo to incorporate wrapping Toaster component.'
+    },
+    {
+        id: '6125f52db79bc1ada47e195e36d01927443b0e1c',
+        author: 'Anna Florence',
+        date: 'Tue Jan 25',
+        message: 'docs: Modifies copy-demos script to maintain relative paths for all inner demo package imports.'
+    },
+    {
+        id: '1eceb3ef9539e22225ab287428d7902ee19b5753',
+        author: 'Scott Farmer',
+        date: 'Fri Jan 21',
+        message: 'pkg: Version 3.0.0-dev.2.0.'
+    },
+    {
+        id: 'aeb1e26fa8f0f2ae29f93ae07ac3c98dde3ade46',
+        author: 'Scott Farmer',
+        date: 'Fri Jan 21',
+        message: 'pkg: Updaes types packages for React 17.'
+    },
+    {
+        id: '55a2c452559a59bcadedb0020b03675c3234a238',
+        author: 'Jan Stark',
+        date: 'Mon Jan 17',
+        message: 'fix(core:MultiStep): Fixes position of step labels.'
+    },
+    {
+        id: 'f1e1a36e86de7a8e33684b44203a36d6622b39f6',
+        author: 'Yan Miller',
+        date: 'Wed Jan 19',
+        message: 'fix(social:Email): Fixes the persistent utility resize issue with email components.'
+    },
+    {
+        id: '82ed6caa36f4518de7af66aff80dee7b128c23d4',
+        author: 'Anna Florence',
+        date: 'Wed Jan 19',
+        message: 'docs: Adds demos for component customization, configuration, and theme.'
+    },
+    {
+        id: '6e0702db4cc0c59375006dfd36f9a943953d0716',
+        author: 'Anna Florence',
+        date: 'Wed Jan 19',
+        message: 'style: Re-orders component theme definitions to be in alphabetical order.'
+    },
+    {
+        id: '3cc54ccc2a2287019594eda4db68838aa1f32b0b',
+        author: 'Sam Singh',
+        date: 'Fri Jan 21',
+        message: 'docs(work:Details): Fixes displaying currency fields in the demo file.'
+    },
+    {
+        id: '38ba5f8a83681345d9568b9a7c3693bd30af7be8',
+        author: 'Sam Singh',
+        date: 'Fri Jan 21',
+        message: 'fix(core:Number)!: Enables rounding for NumberDisplay component. Fixes decimal precision support.'
+    },
+    {
+        id: '5914d105574e12f4c3aae6a616c54ce9cc4f70bf',
+        author: 'Yan Miller',
+        date: 'Thu Jan 20',
+        message: 'fix(core:TextArea): Fixes ios safari focus styling issue.'
+    },
+    {
+        id: 'b03f783df31634a334e1c46c76c30391a8907080',
+        author: 'Sam Singh',
+        date: 'Mon Dec 20',
+        message: 'fix(core:Currency)!: Enables rounding for CurrencyDisplay.'
+    },
+    {
+        id: '759536fb5e257a3a3c0b85d3cb2b63565f3b30e1',
+        author: 'Scott Farmer',
+        date: 'Wed Jan 19',
+        message: 'pkg: Updates development versions of React and ReactDOM to 17.0.2.'
+    },
+    {
+        id: 'dcf4a23758f6eaca62bad5f50a9bf1b281ad931b',
+        author: 'Sam Singh',
+        date: 'Tue Jan 18',
+        message: 'refactor(build:Workbench): Optimizes CSS for zoom.'
+    },
+    {
+        id: '94186cf82de48c3a4cbea158f25ad471cd49b9e4',
+        author: 'Sam Singh',
+        date: 'Tue Jan 18',
+        message: 'fix(build:Workbench): Adds tooltip to close button.'
+    },
+    {
+        id: 'da16bdc203ddb10a5ad9c48882a73d9587daa198',
+        author: 'Sam Singh',
+        date: 'Mon Jan 17',
+        message: "fix(build:Workbench): Corrects component's expanding in Page Templates."
+    },
+    {
+        id: '8dd5d2190aaaf72ae4aac70af42d16365845fb18',
+        author: 'Sam Singh',
+        date: 'Mon Jan 17',
+        message: 'fix(build:Workbench): Truncates long headings.'
+    }
+];
 //# sourceMappingURL=Table.mocks.js.map

package/lib/core/Table/Table.mocks.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Table.mocks.js","sourceRoot":"","sources":["../../../src/core/Table/Table.mocks.tsx"],"names":[],"mappings":";AAAA,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB;QACE,EAAE,EAAE,MAAM;QACV,IAAI,EAAE,YAAY;QAClB,GAAG,EAAE,YAAY;QACjB,OAAO,EAAE,YAAY;QACrB,KAAK,EAAE,kBAAkB;QACzB,aAAa,EAAE,IAAI;QACnB,OAAO,EAAE,QAAQ;KAClB;IACD;QACE,EAAE,EAAE,MAAM;QACV,IAAI,EAAE,WAAW;QACjB,GAAG,EAAE,YAAY;QACjB,OAAO,EAAE,EAAE;QACX,KAAK,EAAE,qBAAqB;QAC5B,aAAa,EAAE,IAAI;QACnB,OAAO,EAAE,QAAQ;KAClB;IACD;QACE,EAAE,EAAE,MAAM;QACV,IAAI,EAAE,UAAU;QAChB,GAAG,EAAE,YAAY;QACjB,OAAO,EAAE,CACP,8BACE,iDAAuB,EACvB,qDAA2B,YAC1B,CACJ;QACD,KAAK,EAAE,EAAE;QACT,OAAO,EAAE,OAAO;KACjB;CACF,CAAC","sourcesContent":["export const tableData = [\n {\n id: '1234',\n name: 'Jane Smith',\n dob: '12/31/1990',\n address: 'Boston, MA',\n email: 'jsmith@email.com',\n emailVerified: true,\n balance: '$2,200'\n },\n {\n id: '5678',\n name: 'Joe Smith',\n dob: '01/01/1980',\n address: '',\n email: 'joe.smith@email.com',\n emailVerified: true,\n balance: '$1,350'\n },\n {\n id: '0000',\n name: 'Mary Lou',\n dob: '06/15/1985',\n address: (\n <>\n <div>100 Main St.</div>\n <div>Springfield, USA</div>\n </>\n ),\n email: '',\n balance: '-$175'\n }\n];\n"]}
1	+ {"version":3,"file":"Table.mocks.js","sourceRoot":"","sources":["../../../src/core/Table/Table.mocks.tsx"],"names":[],"mappings":"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","sourcesContent":["export const tableData = [\n {\n id: '1234',\n name: 'Jane Smith',\n dob: '12/31/1990',\n address: 'Boston, MA',\n email: 'jsmith@email.com',\n emailVerified: true,\n balance: '$2,200'\n },\n {\n id: '5678',\n name: 'Joe Smith',\n dob: '01/01/1980',\n address: '',\n email: 'joe.smith@email.com',\n emailVerified: true,\n balance: '$1,350'\n },\n {\n id: '0000',\n name: 'Mary Lou',\n dob: '06/15/1985',\n address: (\n <>\n <div>100 Main St.</div>\n <div>Springfield, USA</div>\n </>\n ),\n email: '',\n balance: '-$175'\n }\n];\n\nexport const commitsData = [\n {\n id: '1407c5fcbe460aa06a78b4779583917599d9bd78',\n author: 'Scott Farmer',\n date: 'Fri Jan 28',\n message: 'pkg: Version 3.0.0-dev.2.1.'\n },\n {\n id: '902716be61eed70280178c01db19fwa504f57a51',\n author: 'Scott Farmer',\n date: 'Fri Jan 28',\n message: 'fix(core:Menu): Adds missing icon registrations.'\n },\n {\n id: '8b7916b1d8691fec1d884eadb445019a44ba6c6b',\n author: 'Sam Singh',\n date: 'Fri Jan 28',\n message: 'fix(core:Currency): Fixes decimal truncation. Updates the tests.'\n },\n {\n id: '7d119a2af6d6de9516da3e4eddf8e4523152358e',\n author: 'Sam Singh',\n date: 'Wed Jan 26',\n message: 'docs(work:Details): Updates the demo.'\n },\n {\n id: '41f0875a5b049d40081w0bf8bbae0279ee469fe6',\n author: 'Scott Farmer',\n date: 'Tue Jan 25',\n message: 'fix(core:icons): Updates minus icon to be more centered.'\n },\n {\n id: '9f5996ebd2d9076b53bff2cf8a641v292bcbc256',\n author: 'Anna Florence',\n date: 'Wed Jan 26',\n message: 'docs(core:Toaster): Modifies Toaster demo to incorporate wrapping Toaster component.'\n },\n {\n id: '6125f52db79bc1ada47e195e36d01927443b0e1c',\n author: 'Anna Florence',\n date: 'Tue Jan 25',\n message:\n 'docs: Modifies copy-demos script to maintain relative paths for all inner demo package imports.'\n },\n {\n id: '1eceb3ef9539e22225ab287428d7902ee19b5753',\n author: 'Scott Farmer',\n date: 'Fri Jan 21',\n message: 'pkg: Version 3.0.0-dev.2.0.'\n },\n {\n id: 'aeb1e26fa8f0f2ae29f93ae07ac3c98dde3ade46',\n author: 'Scott Farmer',\n date: 'Fri Jan 21',\n message: 'pkg: Updaes types packages for React 17.'\n },\n {\n id: '55a2c452559a59bcadedb0020b03675c3234a238',\n author: 'Jan Stark',\n date: 'Mon Jan 17',\n message: 'fix(core:MultiStep): Fixes position of step labels.'\n },\n {\n id: 'f1e1a36e86de7a8e33684b44203a36d6622b39f6',\n author: 'Yan Miller',\n date: 'Wed Jan 19',\n message: 'fix(social:Email): Fixes the persistent utility resize issue with email components.'\n },\n {\n id: '82ed6caa36f4518de7af66aff80dee7b128c23d4',\n author: 'Anna Florence',\n date: 'Wed Jan 19',\n message: 'docs: Adds demos for component customization, configuration, and theme.'\n },\n {\n id: '6e0702db4cc0c59375006dfd36f9a943953d0716',\n author: 'Anna Florence',\n date: 'Wed Jan 19',\n message: 'style: Re-orders component theme definitions to be in alphabetical order.'\n },\n {\n id: '3cc54ccc2a2287019594eda4db68838aa1f32b0b',\n author: 'Sam Singh',\n date: 'Fri Jan 21',\n message: 'docs(work:Details): Fixes displaying currency fields in the demo file.'\n },\n {\n id: '38ba5f8a83681345d9568b9a7c3693bd30af7be8',\n author: 'Sam Singh',\n date: 'Fri Jan 21',\n message:\n 'fix(core:Number)!: Enables rounding for NumberDisplay component. Fixes decimal precision support.'\n },\n {\n id: '5914d105574e12f4c3aae6a616c54ce9cc4f70bf',\n author: 'Yan Miller',\n date: 'Thu Jan 20',\n message: 'fix(core:TextArea): Fixes ios safari focus styling issue.'\n },\n {\n id: 'b03f783df31634a334e1c46c76c30391a8907080',\n author: 'Sam Singh',\n date: 'Mon Dec 20',\n message: 'fix(core:Currency)!: Enables rounding for CurrencyDisplay.'\n },\n {\n id: '759536fb5e257a3a3c0b85d3cb2b63565f3b30e1',\n author: 'Scott Farmer',\n date: 'Wed Jan 19',\n message: 'pkg: Updates development versions of React and ReactDOM to 17.0.2.'\n },\n {\n id: 'dcf4a23758f6eaca62bad5f50a9bf1b281ad931b',\n author: 'Sam Singh',\n date: 'Tue Jan 18',\n message: 'refactor(build:Workbench): Optimizes CSS for zoom.'\n },\n {\n id: '94186cf82de48c3a4cbea158f25ad471cd49b9e4',\n author: 'Sam Singh',\n date: 'Tue Jan 18',\n message: 'fix(build:Workbench): Adds tooltip to close button.'\n },\n {\n id: 'da16bdc203ddb10a5ad9c48882a73d9587daa198',\n author: 'Sam Singh',\n date: 'Mon Jan 17',\n message: \"fix(build:Workbench): Corrects component's expanding in Page Templates.\"\n },\n {\n id: '8dd5d2190aaaf72ae4aac70af42d16365845fb18',\n author: 'Sam Singh',\n date: 'Mon Jan 17',\n message: 'fix(build:Workbench): Truncates long headings.'\n }\n];\n"]}

package/lib/core/Table/Table.stories.js CHANGED Viewed

@@ -111,13 +111,13 @@ ConfigurableTable.args = {
     headerFontSize: 's',
     headerFontWeight: '600',
     headerForegroundColor: '#000000',
-    headerBackgroundColor: '#f5f5f5',
+    headerBackgroundColor: '#71baff',
     headerVerticalSpacing: 1,
     headerHorizontalSpacing: 2,
     headerBorderWidth: '0.0625rem',
     headerBorderColor: '#cfcfcf',
     bodyForegroundColor: '#000000',
-    bodyBackgroundColor: '#ffffff',
+    bodyBackgroundColor: '#e2f1ff',
     bodyVerticalSpacing: 1,
     bodyHorizontalSpacing: 1,
     bodyBorderWidth: '0.0625rem',

package/lib/core/Table/Table.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Table.stories.js","sourceRoot":"","sources":["../../../src/core/Table/Table.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { Status, Table, ColumnProps, TableProps, Configuration } from '@pega/cosmos-react-core';\n\nimport { tableData } from './Table.mocks';\nimport { StyledBalance } from './Table.styles';\n\nexport default {\n title: 'Core/Table',\n component: Table,\n args: {\n title: 'Accounts',\n hoverHighlight: false,\n loading: false,\n loadingMessage: 'Loading data',\n emptyTable: false\n },\n argTypes: {\n title: { control: { type: 'text' } },\n hoverHighlight: { control: { type: 'boolean' } },\n loading: { control: { type: 'boolean' } },\n loadingMessage: { control: { type: 'text' } },\n emptyTable: { control: { type: 'boolean' } }\n }\n} as Meta;\n\ninterface TableStoryProps {\n title?: TableProps['title'];\n hoverHighlight?: TableProps['hoverHighlight'];\n loading?: TableProps['loading'];\n loadingMessage?: TableProps['loadingMessage'];\n emptyTable?: boolean;\n}\n\nexport const TableDemo: Story<TableStoryProps> = (args: TableStoryProps) => {\n const columns: ColumnProps<typeof tableData[number]>[] = [\n { renderer: 'name', label: 'Name' },\n { renderer: 'dob', label: 'Date of Birth' },\n { renderer: 'address', label: 'Address' },\n { renderer: 'email', label: 'Email' },\n { renderer: 'balance', label: 'Account Balance', align: 'right' }\n ];\n\n return (\n <Table\n title={args.title}\n hoverHighlight={args.hoverHighlight}\n loading={args.loading}\n loadingMessage={args.loadingMessage}\n data={args.emptyTable ? [] : tableData}\n columns={columns}\n />\n );\n};\n\nexport const StyledTableDemo: Story<TableStoryProps> = (args: TableStoryProps) => {\n const columns: ColumnProps<typeof tableData[number]>[] = [\n { renderer: data => <b>{data.name}</b>, label: 'Name' },\n { renderer: 'dob', label: 'Date of Birth' },\n { renderer: 'address', label: 'Address' },\n {\n renderer: data => {\n return (\n <>\n {data.email && data.emailVerified && <Status variant='success'>{data.email}</Status>}\n {data.email && !data.emailVerified && <Status variant='urgent'>{data.email}</Status>}\n </>\n );\n },\n label: 'Email'\n },\n {\n renderer: data => {\n return (\n <StyledBalance negativeBalance={data.balance.startsWith('-')}>\n {data.balance}\n </StyledBalance>\n );\n },\n label: 'Account Balance',\n align: 'right'\n }\n ];\n\n return (\n <Table\n title={args.title}\n hoverHighlight={args.hoverHighlight}\n loading={args.loading}\n loadingMessage={args.loadingMessage}\n data={args.emptyTable ? [] : tableData}\n columns={columns}\n />\n );\n};\n\ninterface ConfigurableTableProps extends TableStoryProps {\n headerFontSize?: string;\n headerFontWeight?: string;\n headerForegroundColor?: string;\n headerBackgroundColor?: string;\n headerVerticalSpacing?: number;\n headerHorizontalSpacing?: number;\n headerBorderWidth?: string;\n headerBorderColor?: string;\n bodyForegroundColor?: string;\n bodyBackgroundColor?: string;\n bodyVerticalSpacing?: number;\n bodyHorizontalSpacing?: number;\n bodyBorderWidth?: string;\n bodyBorderColor?: string;\n borderHorizontalInner?: boolean;\n borderHorizontalOuter?: boolean;\n borderVerticalInner?: boolean;\n borderVerticalOuter?: boolean;\n spacingHorizontalInner?: boolean;\n spacingHorizontalOuter?: boolean;\n spacingVerticalInner?: boolean;\n spacingVerticalOuter?: boolean;\n}\n\nexport const ConfigurableTable: Story<ConfigurableTableProps> = (args: ConfigurableTableProps) => {\n const columns: ColumnProps<typeof tableData[number]>[] = [\n { renderer: data => <b>{data.name}</b>, label: 'Name' },\n { renderer: 'dob', label: 'Date of Birth' },\n { renderer: 'address', label: 'Address' },\n {\n renderer: data => {\n return (\n <>\n {data.email && data.emailVerified && <Status variant='success'>{data.email}</Status>}\n {data.email && !data.emailVerified && <Status variant='urgent'>{data.email}</Status>}\n </>\n );\n },\n label: 'Email'\n },\n {\n renderer: data => {\n return (\n <StyledBalance negativeBalance={data.balance.startsWith('-')}>\n {data.balance}\n </StyledBalance>\n );\n },\n label: 'Account Balance',\n align: 'right'\n }\n ];\n\n return (\n <Configuration\n theme={{\n components: {\n table: {\n header: {\n 'font-size': args.headerFontSize,\n 'font-weight': args.headerFontWeight,\n 'foreground-color': args.headerForegroundColor,\n 'background-color': args.headerBackgroundColor,\n 'vertical-spacing': args.headerVerticalSpacing,\n 'horizontal-spacing': args.headerHorizontalSpacing,\n 'border-width': args.headerBorderWidth,\n 'border-color': args.headerBorderColor\n },\n body: {\n 'foreground-color': args.bodyForegroundColor,\n 'background-color': args.bodyBackgroundColor,\n 'vertical-spacing': args.bodyVerticalSpacing,\n 'horizontal-spacing': args.bodyHorizontalSpacing,\n 'border-width': args.bodyBorderWidth,\n 'border-color': args.bodyBorderColor\n },\n border: {\n 'horizontal-inner': args.borderHorizontalInner,\n 'horizontal-outer': args.borderHorizontalOuter,\n 'vertical-inner': args.borderVerticalInner,\n 'vertical-outer': args.borderVerticalOuter\n },\n spacing: {\n 'horizontal-inner': args.spacingHorizontalInner,\n 'horizontal-outer': args.spacingHorizontalOuter,\n 'vertical-inner': args.spacingVerticalInner,\n 'vertical-outer': args.spacingVerticalOuter\n }\n }\n }\n }}\n >\n <Table title='Accounts' data={tableData} columns={columns} />\n </Configuration>\n );\n};\n\nConfigurableTable.args = {\n headerFontSize: 's',\n headerFontWeight: '600',\n headerForegroundColor: '#000000',\n headerBackgroundColor: '#f5f5f5',\n headerVerticalSpacing: 1,\n headerHorizontalSpacing: 2,\n headerBorderWidth: '0.0625rem',\n headerBorderColor: '#cfcfcf',\n bodyForegroundColor: '#000000',\n bodyBackgroundColor: '#ffffff',\n bodyVerticalSpacing: 1,\n bodyHorizontalSpacing: 1,\n bodyBorderWidth: '0.0625rem',\n bodyBorderColor: '#cfcfcf',\n borderHorizontalInner: true,\n borderHorizontalOuter: true,\n borderVerticalInner: true,\n borderVerticalOuter: true,\n spacingHorizontalInner: true,\n spacingHorizontalOuter: true,\n spacingVerticalInner: true,\n spacingVerticalOuter: true\n};\n\nConfigurableTable.argTypes = {\n headerFontSize: {\n options: ['xxs', 'xs', 's', 'm', 'l', 'xl', 'xxl'],\n control: { type: 'select' }\n },\n headerFontWeight: { control: { type: 'text' } },\n headerForegroundColor: { control: { type: 'color' } },\n headerBackgroundColor: { control: { type: 'color' } },\n headerVerticalSpacing: { control: { type: 'number' } },\n headerHorizontalSpacing: { control: { type: 'number' } },\n headerBorderWidth: { control: { type: 'text' } },\n headerBorderColor: { control: { type: 'color' } },\n bodyForegroundColor: { control: { type: 'color' } },\n bodyBackgroundColor: { control: { type: 'color' } },\n bodyVerticalSpacing: { control: { type: 'number' } },\n bodyHorizontalSpacing: { control: { type: 'number' } },\n bodyBorderWidth: { control: { type: 'text' } },\n bodyBorderColor: { control: { type: 'color' } },\n borderHorizontalInner: { control: { type: 'boolean' } },\n borderHorizontalOuter: { control: { type: 'boolean' } },\n borderVerticalInner: { control: { type: 'boolean' } },\n borderVerticalOuter: { control: { type: 'boolean' } },\n spacingHorizontalInner: { control: { type: 'boolean' } },\n spacingHorizontalOuter: { control: { type: 'boolean' } },\n spacingVerticalInner: { control: { type: 'boolean' } },\n spacingVerticalOuter: { control: { type: 'boolean' } },\n title: { table: { disable: true } },\n hoverHighlight: { table: { disable: true } },\n loading: { table: { disable: true } },\n loadingMessage: { table: { disable: true } },\n emptyTable: { table: { disable: true } }\n};\n"]}
1	+ {"version":3,"file":"Table.stories.js","sourceRoot":"","sources":["../../../src/core/Table/Table.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { Status, Table, ColumnProps, TableProps, Configuration } from '@pega/cosmos-react-core';\n\nimport { tableData } from './Table.mocks';\nimport { StyledBalance } from './Table.styles';\n\nexport default {\n title: 'Core/Table',\n component: Table,\n args: {\n title: 'Accounts',\n hoverHighlight: false,\n loading: false,\n loadingMessage: 'Loading data',\n emptyTable: false\n },\n argTypes: {\n title: { control: { type: 'text' } },\n hoverHighlight: { control: { type: 'boolean' } },\n loading: { control: { type: 'boolean' } },\n loadingMessage: { control: { type: 'text' } },\n emptyTable: { control: { type: 'boolean' } }\n }\n} as Meta;\n\ninterface TableStoryProps {\n title?: TableProps['title'];\n hoverHighlight?: TableProps['hoverHighlight'];\n loading?: TableProps['loading'];\n loadingMessage?: TableProps['loadingMessage'];\n emptyTable?: boolean;\n}\n\nexport const TableDemo: Story<TableStoryProps> = (args: TableStoryProps) => {\n const columns: ColumnProps<typeof tableData[number]>[] = [\n { renderer: 'name', label: 'Name' },\n { renderer: 'dob', label: 'Date of Birth' },\n { renderer: 'address', label: 'Address' },\n { renderer: 'email', label: 'Email' },\n { renderer: 'balance', label: 'Account Balance', align: 'right' }\n ];\n\n return (\n <Table\n title={args.title}\n hoverHighlight={args.hoverHighlight}\n loading={args.loading}\n loadingMessage={args.loadingMessage}\n data={args.emptyTable ? [] : tableData}\n columns={columns}\n />\n );\n};\n\nexport const StyledTableDemo: Story<TableStoryProps> = (args: TableStoryProps) => {\n const columns: ColumnProps<typeof tableData[number]>[] = [\n { renderer: data => <b>{data.name}</b>, label: 'Name' },\n { renderer: 'dob', label: 'Date of Birth' },\n { renderer: 'address', label: 'Address' },\n {\n renderer: data => {\n return (\n <>\n {data.email && data.emailVerified && <Status variant='success'>{data.email}</Status>}\n {data.email && !data.emailVerified && <Status variant='urgent'>{data.email}</Status>}\n </>\n );\n },\n label: 'Email'\n },\n {\n renderer: data => {\n return (\n <StyledBalance negativeBalance={data.balance.startsWith('-')}>\n {data.balance}\n </StyledBalance>\n );\n },\n label: 'Account Balance',\n align: 'right'\n }\n ];\n\n return (\n <Table\n title={args.title}\n hoverHighlight={args.hoverHighlight}\n loading={args.loading}\n loadingMessage={args.loadingMessage}\n data={args.emptyTable ? [] : tableData}\n columns={columns}\n />\n );\n};\n\ninterface ConfigurableTableProps extends TableStoryProps {\n headerFontSize?: string;\n headerFontWeight?: string;\n headerForegroundColor?: string;\n headerBackgroundColor?: string;\n headerVerticalSpacing?: number;\n headerHorizontalSpacing?: number;\n headerBorderWidth?: string;\n headerBorderColor?: string;\n bodyForegroundColor?: string;\n bodyBackgroundColor?: string;\n bodyVerticalSpacing?: number;\n bodyHorizontalSpacing?: number;\n bodyBorderWidth?: string;\n bodyBorderColor?: string;\n borderHorizontalInner?: boolean;\n borderHorizontalOuter?: boolean;\n borderVerticalInner?: boolean;\n borderVerticalOuter?: boolean;\n spacingHorizontalInner?: boolean;\n spacingHorizontalOuter?: boolean;\n spacingVerticalInner?: boolean;\n spacingVerticalOuter?: boolean;\n}\n\nexport const ConfigurableTable: Story<ConfigurableTableProps> = (args: ConfigurableTableProps) => {\n const columns: ColumnProps<typeof tableData[number]>[] = [\n { renderer: data => <b>{data.name}</b>, label: 'Name' },\n { renderer: 'dob', label: 'Date of Birth' },\n { renderer: 'address', label: 'Address' },\n {\n renderer: data => {\n return (\n <>\n {data.email && data.emailVerified && <Status variant='success'>{data.email}</Status>}\n {data.email && !data.emailVerified && <Status variant='urgent'>{data.email}</Status>}\n </>\n );\n },\n label: 'Email'\n },\n {\n renderer: data => {\n return (\n <StyledBalance negativeBalance={data.balance.startsWith('-')}>\n {data.balance}\n </StyledBalance>\n );\n },\n label: 'Account Balance',\n align: 'right'\n }\n ];\n\n return (\n <Configuration\n theme={{\n components: {\n table: {\n header: {\n 'font-size': args.headerFontSize,\n 'font-weight': args.headerFontWeight,\n 'foreground-color': args.headerForegroundColor,\n 'background-color': args.headerBackgroundColor,\n 'vertical-spacing': args.headerVerticalSpacing,\n 'horizontal-spacing': args.headerHorizontalSpacing,\n 'border-width': args.headerBorderWidth,\n 'border-color': args.headerBorderColor\n },\n body: {\n 'foreground-color': args.bodyForegroundColor,\n 'background-color': args.bodyBackgroundColor,\n 'vertical-spacing': args.bodyVerticalSpacing,\n 'horizontal-spacing': args.bodyHorizontalSpacing,\n 'border-width': args.bodyBorderWidth,\n 'border-color': args.bodyBorderColor\n },\n border: {\n 'horizontal-inner': args.borderHorizontalInner,\n 'horizontal-outer': args.borderHorizontalOuter,\n 'vertical-inner': args.borderVerticalInner,\n 'vertical-outer': args.borderVerticalOuter\n },\n spacing: {\n 'horizontal-inner': args.spacingHorizontalInner,\n 'horizontal-outer': args.spacingHorizontalOuter,\n 'vertical-inner': args.spacingVerticalInner,\n 'vertical-outer': args.spacingVerticalOuter\n }\n }\n }\n }}\n >\n <Table title='Accounts' data={tableData} columns={columns} />\n </Configuration>\n );\n};\n\nConfigurableTable.args = {\n headerFontSize: 's',\n headerFontWeight: '600',\n headerForegroundColor: '#000000',\n headerBackgroundColor: '#71baff',\n headerVerticalSpacing: 1,\n headerHorizontalSpacing: 2,\n headerBorderWidth: '0.0625rem',\n headerBorderColor: '#cfcfcf',\n bodyForegroundColor: '#000000',\n bodyBackgroundColor: '#e2f1ff',\n bodyVerticalSpacing: 1,\n bodyHorizontalSpacing: 1,\n bodyBorderWidth: '0.0625rem',\n bodyBorderColor: '#cfcfcf',\n borderHorizontalInner: true,\n borderHorizontalOuter: true,\n borderVerticalInner: true,\n borderVerticalOuter: true,\n spacingHorizontalInner: true,\n spacingHorizontalOuter: true,\n spacingVerticalInner: true,\n spacingVerticalOuter: true\n};\n\nConfigurableTable.argTypes = {\n headerFontSize: {\n options: ['xxs', 'xs', 's', 'm', 'l', 'xl', 'xxl'],\n control: { type: 'select' }\n },\n headerFontWeight: { control: { type: 'text' } },\n headerForegroundColor: { control: { type: 'color' } },\n headerBackgroundColor: { control: { type: 'color' } },\n headerVerticalSpacing: { control: { type: 'number' } },\n headerHorizontalSpacing: { control: { type: 'number' } },\n headerBorderWidth: { control: { type: 'text' } },\n headerBorderColor: { control: { type: 'color' } },\n bodyForegroundColor: { control: { type: 'color' } },\n bodyBackgroundColor: { control: { type: 'color' } },\n bodyVerticalSpacing: { control: { type: 'number' } },\n bodyHorizontalSpacing: { control: { type: 'number' } },\n bodyBorderWidth: { control: { type: 'text' } },\n bodyBorderColor: { control: { type: 'color' } },\n borderHorizontalInner: { control: { type: 'boolean' } },\n borderHorizontalOuter: { control: { type: 'boolean' } },\n borderVerticalInner: { control: { type: 'boolean' } },\n borderVerticalOuter: { control: { type: 'boolean' } },\n spacingHorizontalInner: { control: { type: 'boolean' } },\n spacingHorizontalOuter: { control: { type: 'boolean' } },\n spacingVerticalInner: { control: { type: 'boolean' } },\n spacingVerticalOuter: { control: { type: 'boolean' } },\n title: { table: { disable: true } },\n hoverHighlight: { table: { disable: true } },\n loading: { table: { disable: true } },\n loadingMessage: { table: { disable: true } },\n emptyTable: { table: { disable: true } }\n};\n"]}

package/lib/core/Toaster/Toaster.stories.js CHANGED Viewed

@@ -6,25 +6,21 @@ export default {
     component: Toaster
 };
 export const ToasterDemo = () => {
-    /*
-     * The <Toaster> component should be wrapped around the entire portion of an application that utilizes it.
-     * For most apps that is once near the root of the app's React tree.
-     * Descendant components can utilize the Toaster's push context method via a useContext hook, as demonstrated here.
-     * This story component represents an component rendered somewhere in an app's tree.
-     * Note, a Toaster provider is already rendered at the root of the Cosmos Storybook, allowing for the use of context here.
-     */
-    const { push } = useContext(ToasterContext);
-    const [count, setCount] = useState(0);
-    const messages = [
-        'This is a short toast message!',
-        'This toast message is much longer and will need to be trimmed with an ellipsis in order to fit within the confines of the component.'
-    ];
-    const pushToaster = () => {
-        setCount(curr => curr + 1);
-        push({
-            content: messages[count % 2]
-        });
+    const MakeToastButton = () => {
+        const { push } = useContext(ToasterContext);
+        const [count, setCount] = useState(0);
+        const messages = [
+            'This is a short toast message!',
+            'This toast message is much longer and will need to be trimmed with an ellipsis in order to fit within the confines of the component.'
+        ];
+        const pushToaster = () => {
+            setCount(curr => curr + 1);
+            push({
+                content: messages[count % 2]
+            });
+        };
+        return _jsx(Button, { onClick: pushToaster, children: "Make some Toast" }, void 0);
     };
-    return _jsx(Button, { onClick: pushToaster, children: "Make some Toast" }, void 0);
+    return (_jsx(Toaster, { dismissAfter: 5000, children: _jsx(MakeToastButton, {}, void 0) }, void 0));
 };
 //# sourceMappingURL=Toaster.stories.js.map

package/lib/core/Toaster/Toaster.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Toaster.stories.js","sourceRoot":"","sources":["../../../src/core/Toaster/Toaster.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE7C,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAE1E,eAAe;IACb,KAAK,EAAE,cAAc;IACrB,SAAS,EAAE,OAAO;CACX,CAAC;AAEV,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,EAAE;IAC9B~~;;;;;;OAMG~~;~~IAEH~~,MAAM,EAAE,IAAI,EAAE,GAAG,UAAU,CAAC,cAAc,CAAC,CAAC;~~IAC5C~~,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;~~IAEtC~~,MAAM,QAAQ,GAAG;~~QACf~~,gCAAgC;~~QAChC~~,sIAAsI;~~KACvI~~,CAAC;~~IAEF~~,MAAM,WAAW,GAAG,GAAG,EAAE;~~QACvB~~,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC;~~QAC3B~~,IAAI,CAAC;~~YACH~~,OAAO,EAAE,QAAQ,CAAC,KAAK,GAAG,CAAC,CAAC;~~SAC7B~~,CAAC,CAAC;~~IACL~~,CAAC,CAAC;~~IAEF~~,OAAO,KAAC,MAAM,IAAC,OAAO,EAAE,WAAW,wCAA0B,CAAC;~~AAChE~~,CAAC,CAAC","sourcesContent":["import { Meta } from '@storybook/react';\nimport { useContext, useState } from 'react';\n\nimport { Button, Toaster, ToasterContext } from '@pega/cosmos-react-core';\n\nexport default {\n title: 'Core/Toaster',\n component: Toaster\n} as Meta;\n\nexport const ToasterDemo = () => {\n /\n ~~The~~ ~~<Toaster>~~ ~~component~~ ~~should~~ be wrapped around the entire portion of an application that utilizes it.\n * For most apps that is once near the root of the app's React tree.\n * Descendant components can utilize the Toaster's push context method via a useContext hook, as demonstrated here.\n * This story component represents an component rendered somewhere in an app's tree.\n * Note, a Toaster provider is already rendered at the root of the Cosmos Storybook, allowing for the use of context here.\n */\n\n const { push } = useContext(ToasterContext);\n const [count, setCount] = useState(0);\n\n const messages = [\n 'This is a short toast message!',\n 'This toast message is much longer and will need to be trimmed with an ellipsis in order to fit within the confines of the component.'\n ];\n\n const pushToaster = () => {\n setCount(curr => curr + 1);\n push({\n content: messages[count % 2]\n });\n };\n\n return <Button onClick={pushToaster}>Make some Toast</Button>;\n};\n"]}
1	+ {"version":3,"file":"Toaster.stories.js","sourceRoot":"","sources":["../../../src/core/Toaster/Toaster.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE7C,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAE1E,eAAe;IACb,KAAK,EAAE,cAAc;IACrB,SAAS,EAAE,OAAO;CACX,CAAC;AAEV,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,EAAE;IAC9B,MAAM,eAAe,GAAG,GAAG,EAAE;QAC3B,MAAM,EAAE,IAAI,EAAE,GAAG,UAAU,CAAC,cAAc,CAAC,CAAC;QAC5C,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;QAEtC,MAAM,QAAQ,GAAG;YACf,gCAAgC;YAChC,sIAAsI;SACvI,CAAC;QAEF,MAAM,WAAW,GAAG,GAAG,EAAE;YACvB,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC;YAC3B,IAAI,CAAC;gBACH,OAAO,EAAE,QAAQ,CAAC,KAAK,GAAG,CAAC,CAAC;aAC7B,CAAC,CAAC;QACL,CAAC,CAAC;QAEF,OAAO,KAAC,MAAM,IAAC,OAAO,EAAE,WAAW,wCAA0B,CAAC;IAChE,CAAC,CAAC;IAEF,OAAO,CACL,KAAC,OAAO,IAAC,YAAY,EAAE,IAAI,YACzB,KAAC,eAAe,aAAG,WACX,CACX,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { Meta } from '@storybook/react';\nimport { useContext, useState } from 'react';\n\nimport { Button, Toaster, ToasterContext } from '@pega/cosmos-react-core';\n\nexport default {\n title: 'Core/Toaster',\n component: Toaster\n} as Meta;\n\nexport const ToasterDemo = () => {\n const MakeToastButton = () => {\n const { push } = useContext(ToasterContext);\n const [count, setCount] = useState(0);\n\n const messages = [\n 'This is a short toast message!',\n 'This toast message is much longer and will need to be trimmed with an ellipsis in order to fit within the confines of the component.'\n ];\n\n const pushToaster = () => {\n setCount(curr => curr + 1);\n push({\n content: messages[count % 2]\n });\n };\n\n return <Button onClick={pushToaster}>Make some Toast</Button>;\n };\n\n return (\n <Toaster dismissAfter={5000}>\n <MakeToastButton />\n </Toaster>\n );\n};\n"]}

package/lib/cs/ArticleList/ArticleList.stories.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ArticleList.stories.d.ts","sourceRoot":"","sources":["../../../src/cs/ArticleList/ArticleList.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;AA0BA,wBAOE;AAIF,eAAO,MAAM,gBAAgB,~~mBAyJ5B~~,CAAC;AAEF,eAAO,MAAM,uBAAuB,mBASnC,CAAC"}
1	+ {"version":3,"file":"ArticleList.stories.d.ts","sourceRoot":"","sources":["../../../src/cs/ArticleList/ArticleList.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;AA0BA,wBAOE;AAIF,eAAO,MAAM,gBAAgB,mBA2J5B,CAAC;AAEF,eAAO,MAAM,uBAAuB,mBASnC,CAAC"}

package/lib/cs/ArticleList/ArticleList.stories.js CHANGED Viewed

@@ -34,6 +34,7 @@ export const FirstArticleList = () => {
     const ALHeader = {
         icon: _jsx(Icon, { name: 'help' }, void 0),
         headerText: 'Knowledge articles',
+        count: 5,
         primary: {
             search: (_jsx(SearchInput, { value: query, onChange: (event) => setQuery(event.target.value), onSearchChange: action('Search query'), onSearchSubmit: action('Search submit'), placeholder: 'Search\u2026' }, void 0)),
             actions: [
@@ -66,7 +67,7 @@ export const FirstArticleList = () => {
     return (_jsx("div", { style: {
             width: '31.25rem',
             maxHeight: '100vh'
-        }, children: _jsx(ArticleList, { skeletonize: false, header: _jsx(ArticleListHeader, { icon: ALHeader.icon, headerText: ALHeader.headerText, primary: ALHeader.primary, secondary: ALHeader.secondary, onSubmit: action('Filter details submitted') }, void 0), footer: _jsx(Flex, { container: { alignItems: 'center', justify: 'end' }, item: { grow: 1 }, children: _jsx(Pagination, { total: 70, pageNumber: currentPage, onPageChange: pageNumber => {
+        }, children: _jsx(ArticleList, { skeletonize: false, header: _jsx(ArticleListHeader, { icon: ALHeader.icon, count: ALHeader.count, headerText: ALHeader.headerText, primary: ALHeader.primary, secondary: ALHeader.secondary, onSubmit: action('Filter details submitted') }, void 0), footer: _jsx(Flex, { container: { alignItems: 'center', justify: 'end' }, item: { grow: 1 }, children: _jsx(Pagination, { total: 70, pageNumber: currentPage, onPageChange: pageNumber => {
                         setCurrentPage(pageNumber);
                     } }, void 0) }, void 0), children: ArticleListMockData.articleList.map((dataItem, id) => {
                 return (_jsx(ArticleSummary, { header: _jsx(Link, { href: 'design.pega.com', "data-article-id": dataItem.articleId, onClick: handleArticleLinkClick, children: dataItem.header }, void 0), content: _jsx(Text, { children: dataItem.abstract }, void 0), articleID: `article-${id}`, meta: [

package/lib/cs/ArticleList/ArticleList.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ArticleList.stories.js","sourceRoot":"","sources":["../../../src/cs/ArticleList/ArticleList.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState, MouseEvent, SetStateAction } from 'react';\nimport { action } from '@storybook/addon-actions';\n\nimport {\n ComboBox,\n Flex,\n FormField,\n Icon,\n Link,\n MenuButton,\n Pagination,\n SearchInput,\n Select,\n Option,\n Text,\n menuHelpers,\n MenuProps,\n registerIcon\n} from '@pega/cosmos-react-core';\nimport * as thumbsUpSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/thumbs-up-solid.icon';\nimport * as thumbsDownSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/thumbs-down-solid.icon';\nimport * as helpIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/help.icon';\nimport { ArticleList, ArticleSummary, ArticleListHeader } from '@pega/cosmos-react-cs';\n\nimport { ArticleListMockData } from './ArticleList.mocks';\n\nexport default {\n title: 'Customer Service/ArticleList',\n component: ArticleList,\n subcomponents: { ArticleSummary, ArticleListHeader },\n parameters: {\n layout: 'fullscreen'\n }\n};\n\nregisterIcon(thumbsUpSolidIcon, thumbsDownSolidIcon, helpIcon);\n\nexport const FirstArticleList = () => {\n const [query, setQuery] = useState('');\n const [currentPage, setCurrentPage] = useState(1);\n const [categoryFilter, setCategoryFilter] = useState<{ id: string; text: string } \| undefined>(\n undefined\n );\n const [categoriesList, setCategoriesList] = useState<MenuProps['items']>(\n ArticleListMockData.categoriesList.map(({ id, name, level, category }) => {\n return {\n id,\n primary: name,\n secondary: [level, category],\n selected: false\n };\n })\n );\n\n const handleArticleLinkClick = (event: MouseEvent) => {\n event.preventDefault();\n };\n\n const ALHeader = {\n icon: <Icon name='help' />,\n headerText: 'Knowledge articles',\n primary: {\n search: (\n <SearchInput\n value={query}\n onChange={(event: { target: { value: SetStateAction<string> } }) =>\n setQuery(event.target.value)\n }\n onSearchChange={action('Search query')}\n onSearchSubmit={action('Search submit')}\n placeholder='Search…'\n />\n ),\n actions: [\n { text: 'Option Number 1', id: '1a' },\n { text: 'Option Number 2', id: '2a' }\n ],\n followedFilter: (\n <Flex container={{ gap: 1 }}>\n <MenuButton\n variant='simple'\n menu={{\n items: [\n {\n primary: 'Filter 1',\n id: 'f1a'\n },\n {\n primary: 'Filter 2',\n id: 'f2a'\n }\n ]\n }}\n icon='filter'\n text='filter'\n iconOnly\n />\n </Flex>\n )\n },\n secondary: (\n <>\n <FormField label='Category'>\n <ComboBox\n selected={{ items: categoryFilter }}\n placeholder='Filter by category'\n menu={{\n items: categoriesList,\n onItemClick: id => {\n const newList = menuHelpers.selectItem(categoriesList, id, 'single-select');\n const { primary: itemText } = menuHelpers.getSelected(newList)[0];\n setCategoriesList(newList);\n setCategoryFilter({ text: itemText, id });\n }\n }}\n />\n </FormField>\n <Select label='Sort by'>\n {ArticleListMockData.sortByOptions.map(opt => (\n <Option key={opt}>{opt}</Option>\n ))}\n </Select>\n </>\n )\n };\n return (\n <div\n style={{\n width: '31.25rem',\n maxHeight: '100vh'\n }}\n >\n <ArticleList\n skeletonize={false}\n header={\n <ArticleListHeader\n icon={ALHeader.icon}\n headerText={ALHeader.headerText}\n primary={ALHeader.primary}\n secondary={ALHeader.secondary}\n onSubmit={action('Filter details submitted')}\n />\n }\n footer={\n <Flex container={{ alignItems: 'center', justify: 'end' }} item={{ grow: 1 }}>\n <Pagination\n total={70}\n pageNumber={currentPage}\n onPageChange={pageNumber => {\n setCurrentPage(pageNumber);\n }}\n />\n </Flex>\n }\n >\n {ArticleListMockData.articleList.map((dataItem, id) => {\n return (\n <ArticleSummary\n key={id.toString()}\n header={\n <Link\n href='design.pega.com'\n data-article-id={dataItem.articleId}\n onClick={handleArticleLinkClick}\n >\n {dataItem.header}\n </Link>\n }\n content={<Text>{dataItem.abstract}</Text>}\n articleID={`article-${id}`}\n meta={[\n <Text>{dataItem.meta.category}</Text>,\n dataItem.meta.publishedDate,\n <Flex container={{ gap: 2, alignItems: 'center' }}>\n <Flex container={{ gap: 1, alignItems: 'center' }}>\n <Icon name='thumbs-up-solid' />\n <Text>({dataItem.meta.likes})</Text>\n </Flex>\n <Flex container={{ gap: 1, alignItems: 'center' }}>\n <Icon name='thumbs-down-solid' />\n <Text>({dataItem.meta.disLikes})</Text>\n </Flex>\n </Flex>\n ]}\n />\n );\n })}\n </ArticleList>\n </div>\n );\n};\n\nexport const ArticleListWithSkeleton = () => (\n <div\n style={{\n maxWidth: '31.25rem',\n maxHeight: '100vh'\n }}\n >\n <ArticleList skeletonize />\n </div>\n);\n"]}
1	+ {"version":3,"file":"ArticleList.stories.js","sourceRoot":"","sources":["../../../src/cs/ArticleList/ArticleList.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAA8B,MAAM,OAAO,CAAC;AAC7D,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAElD,OAAO,EACL,QAAQ,EACR,IAAI,EACJ,SAAS,EACT,IAAI,EACJ,IAAI,EACJ,UAAU,EACV,UAAU,EACV,WAAW,EACX,MAAM,EACN,MAAM,EACN,IAAI,EACJ,WAAW,EAEX,YAAY,EACb,MAAM,yBAAyB,CAAC;AACjC,OAAO,KAAK,iBAAiB,MAAM,wEAAwE,CAAC;AAC5G,OAAO,KAAK,mBAAmB,MAAM,0EAA0E,CAAC;AAChH,OAAO,KAAK,QAAQ,MAAM,6DAA6D,CAAC;AACxF,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAEvF,OAAO,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAC;AAE1D,eAAe;IACb,KAAK,EAAE,8BAA8B;IACrC,SAAS,EAAE,WAAW;IACtB,aAAa,EAAE,EAAE,cAAc,EAAE,iBAAiB,EAAE;IACpD,UAAU,EAAE;QACV,MAAM,EAAE,YAAY;KACrB;CACF,CAAC;AAEF,YAAY,CAAC,iBAAiB,EAAE,mBAAmB,EAAE,QAAQ,CAAC,CAAC;AAE/D,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,EAAE;IACnC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IACvC,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IAClD,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAClD,SAAS,CACV,CAAC;IACF,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAClD,mBAAmB,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,EAAE;QACvE,OAAO;YACL,EAAE;YACF,OAAO,EAAE,IAAI;YACb,SAAS,EAAE,CAAC,KAAK,EAAE,QAAQ,CAAC;YAC5B,QAAQ,EAAE,KAAK;SAChB,CAAC;IACJ,CAAC,CAAC,CACH,CAAC;IAEF,MAAM,sBAAsB,GAAG,CAAC,KAAiB,EAAE,EAAE;QACnD,KAAK,CAAC,cAAc,EAAE,CAAC;IACzB,CAAC,CAAC;IAEF,MAAM,QAAQ,GAAG;QACf,IAAI,EAAE,KAAC,IAAI,IAAC,IAAI,EAAC,MAAM,WAAG;QAC1B,UAAU,EAAE,oBAAoB;QAChC,KAAK,EAAE,CAAC;QACR,OAAO,EAAE;YACP,MAAM,EAAE,CACN,KAAC,WAAW,IACV,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,CAAC,KAAoD,EAAE,EAAE,CACjE,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,EAE9B,cAAc,EAAE,MAAM,CAAC,cAAc,CAAC,EACtC,cAAc,EAAE,MAAM,CAAC,eAAe,CAAC,EACvC,WAAW,EAAC,cAAS,WACrB,CACH;YACD,OAAO,EAAE;gBACP,EAAE,IAAI,EAAE,iBAAiB,EAAE,EAAE,EAAE,IAAI,EAAE;gBACrC,EAAE,IAAI,EAAE,iBAAiB,EAAE,EAAE,EAAE,IAAI,EAAE;aACtC;YACD,cAAc,EAAE,CACd,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,YACzB,KAAC,UAAU,IACT,OAAO,EAAC,QAAQ,EAChB,IAAI,EAAE;wBACJ,KAAK,EAAE;4BACL;gCACE,OAAO,EAAE,UAAU;gCACnB,EAAE,EAAE,KAAK;6BACV;4BACD;gCACE,OAAO,EAAE,UAAU;gCACnB,EAAE,EAAE,KAAK;6BACV;yBACF;qBACF,EACD,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,QAAQ,EACb,QAAQ,iBACR,WACG,CACR;SACF;QACD,SAAS,EAAE,CACT,8BACE,KAAC,SAAS,IAAC,KAAK,EAAC,UAAU,YACzB,KAAC,QAAQ,IACP,QAAQ,EAAE,EAAE,KAAK,EAAE,cAAc,EAAE,EACnC,WAAW,EAAC,oBAAoB,EAChC,IAAI,EAAE;4BACJ,KAAK,EAAE,cAAc;4BACrB,WAAW,EAAE,EAAE,CAAC,EAAE;gCAChB,MAAM,OAAO,GAAG,WAAW,CAAC,UAAU,CAAC,cAAc,EAAE,EAAE,EAAE,eAAe,CAAC,CAAC;gCAC5E,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,WAAW,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC;gCAClE,iBAAiB,CAAC,OAAO,CAAC,CAAC;gCAC3B,iBAAiB,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC;4BAC5C,CAAC;yBACF,WACD,WACQ,EACZ,KAAC,MAAM,IAAC,KAAK,EAAC,SAAS,YACpB,mBAAmB,CAAC,aAAa,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,CAC5C,KAAC,MAAM,cAAY,GAAG,IAAT,GAAG,CAAgB,CACjC,CAAC,WACK,YACR,CACJ;KACF,CAAC;IACF,OAAO,CACL,cACE,KAAK,EAAE;YACL,KAAK,EAAE,UAAU;YACjB,SAAS,EAAE,OAAO;SACnB,YAED,KAAC,WAAW,IACV,WAAW,EAAE,KAAK,EAClB,MAAM,EACJ,KAAC,iBAAiB,IAChB,IAAI,EAAE,QAAQ,CAAC,IAAI,EACnB,KAAK,EAAE,QAAQ,CAAC,KAAK,EACrB,UAAU,EAAE,QAAQ,CAAC,UAAU,EAC/B,OAAO,EAAE,QAAQ,CAAC,OAAO,EACzB,SAAS,EAAE,QAAQ,CAAC,SAAS,EAC7B,QAAQ,EAAE,MAAM,CAAC,0BAA0B,CAAC,WAC5C,EAEJ,MAAM,EACJ,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,YAC1E,KAAC,UAAU,IACT,KAAK,EAAE,EAAE,EACT,UAAU,EAAE,WAAW,EACvB,YAAY,EAAE,UAAU,CAAC,EAAE;wBACzB,cAAc,CAAC,UAAU,CAAC,CAAC;oBAC7B,CAAC,WACD,WACG,YAGR,mBAAmB,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,EAAE,EAAE,EAAE;gBACpD,OAAO,CACL,KAAC,cAAc,IAEb,MAAM,EACJ,KAAC,IAAI,IACH,IAAI,EAAC,iBAAiB,qBACL,QAAQ,CAAC,SAAS,EACnC,OAAO,EAAE,sBAAsB,YAE9B,QAAQ,CAAC,MAAM,WACX,EAET,OAAO,EAAE,KAAC,IAAI,cAAE,QAAQ,CAAC,QAAQ,WAAQ,EACzC,SAAS,EAAE,WAAW,EAAE,EAAE,EAC1B,IAAI,EAAE;wBACJ,KAAC,IAAI,cAAE,QAAQ,CAAC,IAAI,CAAC,QAAQ,WAAQ;wBACrC,QAAQ,CAAC,IAAI,CAAC,aAAa;wBAC3B,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,aAC/C,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,aAC/C,KAAC,IAAI,IAAC,IAAI,EAAC,iBAAiB,WAAG,EAC/B,MAAC,IAAI,oBAAG,QAAQ,CAAC,IAAI,CAAC,KAAK,iBAAS,YAC/B,EACP,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,aAC/C,KAAC,IAAI,IAAC,IAAI,EAAC,mBAAmB,WAAG,EACjC,MAAC,IAAI,oBAAG,QAAQ,CAAC,IAAI,CAAC,QAAQ,iBAAS,YAClC,YACF;qBACR,IAzBI,EAAE,CAAC,QAAQ,EAAE,CA0BlB,CACH,CAAC;YACJ,CAAC,CAAC,WACU,WACV,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,uBAAuB,GAAG,GAAG,EAAE,CAAC,CAC3C,cACE,KAAK,EAAE;QACL,QAAQ,EAAE,UAAU;QACpB,SAAS,EAAE,OAAO;KACnB,YAED,KAAC,WAAW,IAAC,WAAW,iBAAG,WACvB,CACP,CAAC","sourcesContent":["import { useState, MouseEvent, SetStateAction } from 'react';\nimport { action } from '@storybook/addon-actions';\n\nimport {\n ComboBox,\n Flex,\n FormField,\n Icon,\n Link,\n MenuButton,\n Pagination,\n SearchInput,\n Select,\n Option,\n Text,\n menuHelpers,\n MenuProps,\n registerIcon\n} from '@pega/cosmos-react-core';\nimport * as thumbsUpSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/thumbs-up-solid.icon';\nimport * as thumbsDownSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/thumbs-down-solid.icon';\nimport * as helpIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/help.icon';\nimport { ArticleList, ArticleSummary, ArticleListHeader } from '@pega/cosmos-react-cs';\n\nimport { ArticleListMockData } from './ArticleList.mocks';\n\nexport default {\n title: 'Customer Service/ArticleList',\n component: ArticleList,\n subcomponents: { ArticleSummary, ArticleListHeader },\n parameters: {\n layout: 'fullscreen'\n }\n};\n\nregisterIcon(thumbsUpSolidIcon, thumbsDownSolidIcon, helpIcon);\n\nexport const FirstArticleList = () => {\n const [query, setQuery] = useState('');\n const [currentPage, setCurrentPage] = useState(1);\n const [categoryFilter, setCategoryFilter] = useState<{ id: string; text: string } \| undefined>(\n undefined\n );\n const [categoriesList, setCategoriesList] = useState<MenuProps['items']>(\n ArticleListMockData.categoriesList.map(({ id, name, level, category }) => {\n return {\n id,\n primary: name,\n secondary: [level, category],\n selected: false\n };\n })\n );\n\n const handleArticleLinkClick = (event: MouseEvent) => {\n event.preventDefault();\n };\n\n const ALHeader = {\n icon: <Icon name='help' />,\n headerText: 'Knowledge articles',\n count: 5,\n primary: {\n search: (\n <SearchInput\n value={query}\n onChange={(event: { target: { value: SetStateAction<string> } }) =>\n setQuery(event.target.value)\n }\n onSearchChange={action('Search query')}\n onSearchSubmit={action('Search submit')}\n placeholder='Search…'\n />\n ),\n actions: [\n { text: 'Option Number 1', id: '1a' },\n { text: 'Option Number 2', id: '2a' }\n ],\n followedFilter: (\n <Flex container={{ gap: 1 }}>\n <MenuButton\n variant='simple'\n menu={{\n items: [\n {\n primary: 'Filter 1',\n id: 'f1a'\n },\n {\n primary: 'Filter 2',\n id: 'f2a'\n }\n ]\n }}\n icon='filter'\n text='filter'\n iconOnly\n />\n </Flex>\n )\n },\n secondary: (\n <>\n <FormField label='Category'>\n <ComboBox\n selected={{ items: categoryFilter }}\n placeholder='Filter by category'\n menu={{\n items: categoriesList,\n onItemClick: id => {\n const newList = menuHelpers.selectItem(categoriesList, id, 'single-select');\n const { primary: itemText } = menuHelpers.getSelected(newList)[0];\n setCategoriesList(newList);\n setCategoryFilter({ text: itemText, id });\n }\n }}\n />\n </FormField>\n <Select label='Sort by'>\n {ArticleListMockData.sortByOptions.map(opt => (\n <Option key={opt}>{opt}</Option>\n ))}\n </Select>\n </>\n )\n };\n return (\n <div\n style={{\n width: '31.25rem',\n maxHeight: '100vh'\n }}\n >\n <ArticleList\n skeletonize={false}\n header={\n <ArticleListHeader\n icon={ALHeader.icon}\n count={ALHeader.count}\n headerText={ALHeader.headerText}\n primary={ALHeader.primary}\n secondary={ALHeader.secondary}\n onSubmit={action('Filter details submitted')}\n />\n }\n footer={\n <Flex container={{ alignItems: 'center', justify: 'end' }} item={{ grow: 1 }}>\n <Pagination\n total={70}\n pageNumber={currentPage}\n onPageChange={pageNumber => {\n setCurrentPage(pageNumber);\n }}\n />\n </Flex>\n }\n >\n {ArticleListMockData.articleList.map((dataItem, id) => {\n return (\n <ArticleSummary\n key={id.toString()}\n header={\n <Link\n href='design.pega.com'\n data-article-id={dataItem.articleId}\n onClick={handleArticleLinkClick}\n >\n {dataItem.header}\n </Link>\n }\n content={<Text>{dataItem.abstract}</Text>}\n articleID={`article-${id}`}\n meta={[\n <Text>{dataItem.meta.category}</Text>,\n dataItem.meta.publishedDate,\n <Flex container={{ gap: 2, alignItems: 'center' }}>\n <Flex container={{ gap: 1, alignItems: 'center' }}>\n <Icon name='thumbs-up-solid' />\n <Text>({dataItem.meta.likes})</Text>\n </Flex>\n <Flex container={{ gap: 1, alignItems: 'center' }}>\n <Icon name='thumbs-down-solid' />\n <Text>({dataItem.meta.disLikes})</Text>\n </Flex>\n </Flex>\n ]}\n />\n );\n })}\n </ArticleList>\n </div>\n );\n};\n\nexport const ArticleListWithSkeleton = () => (\n <div\n style={{\n maxWidth: '31.25rem',\n maxHeight: '100vh'\n }}\n >\n <ArticleList skeletonize />\n </div>\n);\n"]}

package/lib/cs/CSCaseView/CSAppShell.stories.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 import { Story } from '@storybook/react';
-import { InteractionTimerStoryProps } from '@pega/cosmos-react-demos/lib/cs/InteractionTimer/InteractionTimer.stories';
+import { InteractionTimerStoryProps } from '../InteractionTimer/InteractionTimer.stories';
 declare const _default: {
     title: string;
     parameters: {

package/lib/cs/CSCaseView/CSAppShell.stories.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CSAppShell.stories.d.ts","sourceRoot":"","sources":["../../../src/cs/CSCaseView/CSAppShell.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;~~AA0BzC~~,OAAO,EAEL,0BAA0B,EAC3B,MAAM,~~2EAA2E~~,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~AAQnF~~,wBAeE;AAEF,oBAAY,UAAU,GAAG,MAAM,CAAC;AAEhC,MAAM,WAAW,cAAc;IAC7B,cAAc,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAC;IAC1C,OAAO,EAAE,CACP,SAAS,EAAE,MAAM,cAAc,CAAC,gBAAgB,CAAC,EACjD,OAAO,EAAE,MAAM,EACf,QAAQ,EAAE,MAAM,KACb,OAAO,CAAC,UAAU,GAAG,SAAS,CAAC,CAAC;CACtC;AAoED,UAAU,eAAe;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,2BAA2B,CAAC,EAAE,0BAA0B,CAAC,kBAAkB,CAAC,CAAC;IAC7E,SAAS,CAAC,EAAE,0BAA0B,CAAC,WAAW,CAAC,CAAC;CACrD;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,eAAe,CAoS7C,CAAC"}
1	+ {"version":3,"file":"CSAppShell.stories.d.ts","sourceRoot":"","sources":["../../../src/cs/CSCaseView/CSAppShell.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AA2BzC,OAAO,EAEL,0BAA0B,EAC3B,MAAM,8CAA8C,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQtD,wBAeE;AAEF,oBAAY,UAAU,GAAG,MAAM,CAAC;AAEhC,MAAM,WAAW,cAAc;IAC7B,cAAc,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAC;IAC1C,OAAO,EAAE,CACP,SAAS,EAAE,MAAM,cAAc,CAAC,gBAAgB,CAAC,EACjD,OAAO,EAAE,MAAM,EACf,QAAQ,EAAE,MAAM,KACb,OAAO,CAAC,UAAU,GAAG,SAAS,CAAC,CAAC;CACtC;AAoED,UAAU,eAAe;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,2BAA2B,CAAC,EAAE,0BAA0B,CAAC,kBAAkB,CAAC,CAAC;IAC7E,SAAS,CAAC,EAAE,0BAA0B,CAAC,WAAW,CAAC,CAAC;CACrD;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,eAAe,CAoS7C,CAAC"}

package/lib/cs/CSCaseView/CSAppShell.stories.js CHANGED Viewed

@@ -4,16 +4,16 @@ import { action } from '@storybook/addon-actions';
 import { createUID, Status, TwoColumnPage, Icon, registerIcon, Button, Form, Flex, Input, Select, Option, Banner } from '@pega/cosmos-react-core';
 import * as chatSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/chat-solid.icon';
 import { CallControlPanelIcon } from '@pega/cosmos-react-cs';
-import { AppShellDemo } from '@pega/cosmos-react-demos/lib/core/AppShell/AppShell.stories';
-import { CaseViewDemo } from '@pega/cosmos-react-demos/lib/work/CaseView/CaseView.stories';
-import { TasksDemo } from '@pega/cosmos-react-demos/lib/work/Tasks/Tasks.stories';
-import { FeedDemo } from '@pega/cosmos-react-demos/lib/social/Feed/Feed.stories';
-import { EmailDemo } from '@pega/cosmos-react-demos/lib/social/Email/Email.stories';
-import { StandardChat } from '@pega/cosmos-react-demos/lib/social/Chat/Chat.stories';
-import { TaskManager as TaskManagerStory } from '@pega/cosmos-react-demos/lib/cs/TaskManager/TaskManager.stories';
-import { InteractionTimerDemo as InteractionTimerStory } from '@pega/cosmos-react-demos/lib/cs/InteractionTimer/InteractionTimer.stories';
-import { CallControlPanelDemo } from '@pega/cosmos-react-demos/lib/cs/CallControlPanel/CallControlPanel.stories';
-import { userStatusOptions } from '@pega/cosmos-react-demos/lib/cs/CallControlPanel/CallControlPanel.mocks';
+import { AppShellDemo } from '../../core/AppShell/AppShell.stories';
+import { CaseViewDemo } from '../../work/CaseView/CaseView.stories';
+import { TasksDemo } from '../../work/Tasks/Tasks.stories';
+import { FeedDemo } from '../../social/Feed/Feed.stories';
+import { EmailDemo } from '../../social/Email/Email.stories';
+import { StandardChat } from '../../social/Chat/Chat.stories';
+import { TaskManager as TaskManagerStory } from '../TaskManager/TaskManager.stories';
+import { InteractionTimerDemo as InteractionTimerStory } from '../InteractionTimer/InteractionTimer.stories';
+import { CallControlPanelDemo } from '../CallControlPanel/CallControlPanel.stories';
+import { userStatusOptions } from '../CallControlPanel/CallControlPanel.mocks';
 import { AppShellMockData } from './CSCaseView.mocks';
 registerIcon(chatSolidIcon);
 export default {