npm - @pega/cosmos-react-demos - Versions diffs - 3.0.0-dev.1.0 → 3.0.0-dev.10.0 - Mend

@pega/cosmos-react-demos 3.0.0-dev.1.0 → 3.0.0-dev.10.0

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 (1160) hide show

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { Status, Table } from '@pega/cosmos-react-core';
+import { Status, Table, Configuration } from '@pega/cosmos-react-core';
 import { tableData } from './Table.mocks';
 import { StyledBalance } from './Table.styles';
 export default {
@@ -28,27 +28,139 @@ export const TableDemo = (args) => {
         { renderer: 'email', label: 'Email' },
         { renderer: 'balance', label: 'Account Balance', align: 'right' }
     ];
-    return (_jsx(Table, { title: args.title, hoverHighlight: args.hoverHighlight, loading: args.loading, loadingMessage: args.loadingMessage, data: args.emptyTable ? [] : tableData, columns: columns }, void 0));
+    return (_jsx(Table, { title: args.title, hoverHighlight: args.hoverHighlight, loading: args.loading, loadingMessage: args.loadingMessage, data: args.emptyTable ? [] : tableData, columns: columns }));
 };
 export const StyledTableDemo = (args) => {
     const columns = [
-        { renderer: data => _jsx("b", { children: data.name }, void 0), label: 'Name' },
+        { renderer: data => _jsx("b", { children: data.name }), label: 'Name' },
         { renderer: 'dob', label: 'Date of Birth' },
         { renderer: 'address', label: 'Address' },
         {
             renderer: data => {
-                return (_jsxs(_Fragment, { children: [data.email && data.emailVerified && _jsx(Status, { variant: 'success', children: data.email }, void 0), data.email && !data.emailVerified && _jsx(Status, { variant: 'urgent', children: data.email }, void 0)] }, void 0));
+                return (_jsxs(_Fragment, { children: [data.email && data.emailVerified && _jsx(Status, { variant: 'success', children: data.email }), data.email && !data.emailVerified && _jsx(Status, { variant: 'urgent', children: data.email })] }));
             },
             label: 'Email'
         },
         {
             renderer: data => {
-                return (_jsx(StyledBalance, { negativeBalance: data.balance.startsWith('-'), children: data.balance }, void 0));
+                return (_jsx(StyledBalance, { negativeBalance: data.balance.startsWith('-'), children: data.balance }));
             },
             label: 'Account Balance',
             align: 'right'
         }
     ];
-    return (_jsx(Table, { title: args.title, hoverHighlight: args.hoverHighlight, loading: args.loading, loadingMessage: args.loadingMessage, data: args.emptyTable ? [] : tableData, columns: columns }, void 0));
+    return (_jsx(Table, { title: args.title, hoverHighlight: args.hoverHighlight, loading: args.loading, loadingMessage: args.loadingMessage, data: args.emptyTable ? [] : tableData, columns: columns }));
+};
+export const ConfigurableTable = (args) => {
+    const columns = [
+        { renderer: data => _jsx("b", { children: data.name }), label: 'Name' },
+        { renderer: 'dob', label: 'Date of Birth' },
+        { renderer: 'address', label: 'Address' },
+        {
+            renderer: data => {
+                return (_jsxs(_Fragment, { children: [data.email && data.emailVerified && _jsx(Status, { variant: 'success', children: data.email }), data.email && !data.emailVerified && _jsx(Status, { variant: 'urgent', children: data.email })] }));
+            },
+            label: 'Email'
+        },
+        {
+            renderer: data => {
+                return (_jsx(StyledBalance, { negativeBalance: data.balance.startsWith('-'), children: data.balance }));
+            },
+            label: 'Account Balance',
+            align: 'right'
+        }
+    ];
+    return (_jsx(Configuration, { theme: {
+            components: {
+                table: {
+                    header: {
+                        'font-size': args.headerFontSize,
+                        'font-weight': args.headerFontWeight,
+                        'foreground-color': args.headerForegroundColor,
+                        'background-color': args.headerBackgroundColor,
+                        'vertical-spacing': args.headerVerticalSpacing,
+                        'horizontal-spacing': args.headerHorizontalSpacing,
+                        'border-width': args.headerBorderWidth,
+                        'border-color': args.headerBorderColor
+                    },
+                    body: {
+                        'foreground-color': args.bodyForegroundColor,
+                        'background-color': args.bodyBackgroundColor,
+                        'vertical-spacing': args.bodyVerticalSpacing,
+                        'horizontal-spacing': args.bodyHorizontalSpacing,
+                        'border-width': args.bodyBorderWidth,
+                        'border-color': args.bodyBorderColor
+                    },
+                    border: {
+                        'horizontal-inner': args.borderHorizontalInner,
+                        'horizontal-outer': args.borderHorizontalOuter,
+                        'vertical-inner': args.borderVerticalInner,
+                        'vertical-outer': args.borderVerticalOuter
+                    },
+                    spacing: {
+                        'horizontal-inner': args.spacingHorizontalInner,
+                        'horizontal-outer': args.spacingHorizontalOuter,
+                        'vertical-inner': args.spacingVerticalInner,
+                        'vertical-outer': args.spacingVerticalOuter
+                    }
+                }
+            }
+        }, children: _jsx(Table, { title: 'Accounts', data: tableData, columns: columns }) }));
+};
+ConfigurableTable.args = {
+    headerFontSize: 's',
+    headerFontWeight: '600',
+    headerForegroundColor: '#000000',
+    headerBackgroundColor: '#71baff',
+    headerVerticalSpacing: 1,
+    headerHorizontalSpacing: 2,
+    headerBorderWidth: '0.0625rem',
+    headerBorderColor: '#cfcfcf',
+    bodyForegroundColor: '#000000',
+    bodyBackgroundColor: '#e2f1ff',
+    bodyVerticalSpacing: 1,
+    bodyHorizontalSpacing: 1,
+    bodyBorderWidth: '0.0625rem',
+    bodyBorderColor: '#cfcfcf',
+    borderHorizontalInner: true,
+    borderHorizontalOuter: true,
+    borderVerticalInner: true,
+    borderVerticalOuter: true,
+    spacingHorizontalInner: true,
+    spacingHorizontalOuter: true,
+    spacingVerticalInner: true,
+    spacingVerticalOuter: true
+};
+ConfigurableTable.argTypes = {
+    headerFontSize: {
+        options: ['xxs', 'xs', 's', 'm', 'l', 'xl', 'xxl'],
+        control: { type: 'select' }
+    },
+    headerFontWeight: { control: { type: 'text' } },
+    headerForegroundColor: { control: { type: 'color' } },
+    headerBackgroundColor: { control: { type: 'color' } },
+    headerVerticalSpacing: { control: { type: 'number' } },
+    headerHorizontalSpacing: { control: { type: 'number' } },
+    headerBorderWidth: { control: { type: 'text' } },
+    headerBorderColor: { control: { type: 'color' } },
+    bodyForegroundColor: { control: { type: 'color' } },
+    bodyBackgroundColor: { control: { type: 'color' } },
+    bodyVerticalSpacing: { control: { type: 'number' } },
+    bodyHorizontalSpacing: { control: { type: 'number' } },
+    bodyBorderWidth: { control: { type: 'text' } },
+    bodyBorderColor: { control: { type: 'color' } },
+    borderHorizontalInner: { control: { type: 'boolean' } },
+    borderHorizontalOuter: { control: { type: 'boolean' } },
+    borderVerticalInner: { control: { type: 'boolean' } },
+    borderVerticalOuter: { control: { type: 'boolean' } },
+    spacingHorizontalInner: { control: { type: 'boolean' } },
+    spacingHorizontalOuter: { control: { type: 'boolean' } },
+    spacingVerticalInner: { control: { type: 'boolean' } },
+    spacingVerticalOuter: { control: { type: 'boolean' } },
+    title: { table: { disable: true } },
+    hoverHighlight: { table: { disable: true } },
+    loading: { table: { disable: true } },
+    loadingMessage: { table: { disable: true } },
+    emptyTable: { table: { disable: true } }
 };
 //# sourceMappingURL=Table.stories.js.map

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 } 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"]}
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/Tabs/Tabs.stories.d.ts CHANGED Viewed

@@ -2,6 +2,14 @@ import { Meta, Story } from '@storybook/react';
 import { TabsProps } from '@pega/cosmos-react-core';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
-export declare const TabsDemo: Story<TabsProps>;
-export declare const TabsCountDemo: Story<TabsProps>;
+interface TabDemoProps {
+    type: 'horizontal' | 'vertical';
+}
+export declare const TabsDemo: Story<TabDemoProps>;
+export declare const TabsCountDemo: Story<TabDemoProps>;
+interface ConfigurableTabsProps {
+    foreground?: string;
+    type?: TabsProps['type'];
+}
+export declare const ConfigurableTabs: Story<ConfigurableTabsProps>;
 //# sourceMappingURL=Tabs.stories.d.ts.map

package/lib/core/Tabs/Tabs.stories.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Tabs.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Tabs/Tabs.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,~~EAAwB~~,SAAS,EAAE,MAAM,yBAAyB,CAAC;;~~AAE1E~~,wBASU;AAEV,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,~~SAAS~~,~~CA6BrC~~,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,SAAS,~~CA6B1C~~,CAAC"}
1	+ {"version":3,"file":"Tabs.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Tabs/Tabs.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAAuC,SAAS,EAAE,MAAM,yBAAyB,CAAC;;AAEzF,wBASU;AAEV,UAAU,YAAY;IACpB,IAAI,EAAE,YAAY,GAAG,UAAU,CAAC;CACjC;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,YAAY,CA6BxC,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,YAAY,CA6B7C,CAAC;AAEF,UAAU,qBAAqB;IAC7B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;CAC1B;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,qBAAqB,CAuCzD,CAAC"}

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
-import { Flex, TabPanel, Tabs } from '@pega/cosmos-react-core';
+import { Configuration, Flex, TabPanel, Tabs } from '@pega/cosmos-react-core';
 export default {
     title: 'Core/Tabs',
     component: Tabs,
@@ -23,7 +23,7 @@ export const TabsDemo = (args) => {
         { name: 'Tab 4', id: '4', disabled: true },
         { name: 'Tab 5', id: '5' }
     ];
-    return (_jsxs(Flex, { container: { direction: args.type === 'horizontal' ? 'column' : 'row' }, children: [_jsx(Flex, { item: { grow: 1 }, children: _jsx(Tabs, { tabs: tabs, type: args.type, onTabClick: handleTabChange, currentTabId: panelShown }, void 0) }, void 0), _jsx(Flex, { container: { pad: [1, 2] }, item: { grow: 1 }, children: tabs.map(tab => (_jsx(TabPanel, { tabId: tab.id, currentTabId: panelShown, children: _jsxs("div", { children: [tab.name, " content"] }, void 0) }, tab.id))) }, void 0)] }, void 0));
+    return (_jsxs(Flex, { container: { direction: args.type === 'horizontal' ? 'column' : 'row' }, children: [_jsx(Flex, { item: { grow: 1 }, children: _jsx(Tabs, { tabs: tabs, type: args.type, onTabClick: handleTabChange, currentTabId: panelShown }) }), _jsx(Flex, { container: { pad: [1, 2] }, item: { grow: 1 }, children: tabs.map(tab => (_jsx(TabPanel, { tabId: tab.id, currentTabId: panelShown, children: _jsxs("div", { children: [tab.name, " content"] }) }, tab.id))) })] }));
 };
 export const TabsCountDemo = (args) => {
     const [panelShown, changePanel] = useState('1');
@@ -37,6 +37,35 @@ export const TabsCountDemo = (args) => {
         { name: 'Tab 4', id: '4', count: 56, disabled: true },
         { name: 'Tab 5', id: '5', count: 150 }
     ];
-    return (_jsxs(Flex, { container: { direction: args.type === 'horizontal' ? 'column' : 'row' }, children: [_jsx(Flex, { item: { grow: 1 }, children: _jsx(Tabs, { tabs: tabs, type: args.type, onTabClick: handleTabChange, currentTabId: panelShown }, void 0) }, void 0), _jsx(Flex, { container: { pad: [1, 2] }, item: { grow: 1 }, children: tabs.map(tab => (_jsx(TabPanel, { tabId: tab.id, currentTabId: panelShown, children: _jsxs("div", { children: [tab.name, " content"] }, void 0) }, tab.id))) }, void 0)] }, void 0));
+    return (_jsxs(Flex, { container: { direction: args.type === 'horizontal' ? 'column' : 'row' }, children: [_jsx(Flex, { item: { grow: 1 }, children: _jsx(Tabs, { tabs: tabs, type: args.type, onTabClick: handleTabChange, currentTabId: panelShown }) }), _jsx(Flex, { container: { pad: [1, 2] }, item: { grow: 1 }, children: tabs.map(tab => (_jsx(TabPanel, { tabId: tab.id, currentTabId: panelShown, children: _jsxs("div", { children: [tab.name, " content"] }) }, tab.id))) })] }));
+};
+export const ConfigurableTabs = (args) => {
+    const [panelShown, changePanel] = useState('1');
+    const handleTabChange = (id) => {
+        changePanel(id);
+    };
+    const tabs = [
+        { name: 'Tab 1', id: '1' },
+        { name: 'Tab 2', id: '2' },
+        { name: 'Tab 3', id: '3' },
+        { name: 'Tab 4', id: '4', disabled: true },
+        { name: 'Tab 5', id: '5' }
+    ];
+    return (_jsxs(Configuration, { theme: {
+            components: {
+                tabs: {
+                    base: {
+                        foreground: args.foreground
+                    }
+                }
+            }
+        }, children: [_jsx(Flex, { item: { grow: 1 }, children: _jsx(Tabs, { tabs: tabs, onTabClick: handleTabChange, currentTabId: panelShown }) }), _jsx(Flex, { container: { pad: [1, 2] }, item: { grow: 1 }, children: tabs.map(tab => (_jsx(TabPanel, { tabId: tab.id, currentTabId: panelShown, children: _jsxs("div", { children: [tab.name, " content"] }) }, tab.id))) })] }));
+};
+ConfigurableTabs.args = {
+    foreground: '#076bc9'
+};
+ConfigurableTabs.argTypes = {
+    foreground: { control: { type: 'color' } },
+    type: { table: { disable: true } }
 };
 //# sourceMappingURL=Tabs.stories.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Tabs.stories.js","sourceRoot":"","sources":["../../../src/core/Tabs/Tabs.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAa,MAAM,yBAAyB,CAAC;~~AAE1E~~,eAAe;IACb,KAAK,EAAE,WAAW;IAClB,SAAS,EAAE,IAAI;IACf,IAAI,EAAE;QACJ,IAAI,EAAE,YAAY;KACnB;IACD,QAAQ,EAAE;QACR,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,YAAY,EAAE,UAAU,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;KAC3E;CACM,CAAC;~~AAEV~~,MAAM,CAAC,MAAM,QAAQ,~~GAAqB~~,CAAC,~~IAAe~~,EAAE,EAAE;~~IAC5D~~,MAAM,CAAC,UAAU,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,GAAG,CAAC,CAAC;IAEhD,MAAM,eAAe,GAAG,CAAC,EAAU,EAAE,EAAE;QACrC,WAAW,CAAC,EAAE,CAAC,CAAC;IAClB,CAAC,CAAC;IAEF,MAAM,IAAI,GAAG;QACX,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,GAAG,EAAE;QAC1B,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,GAAG,EAAE;QAC1B,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,GAAG,EAAE;QAC1B,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,GAAG,EAAE,QAAQ,EAAE,IAAI,EAAE;QAC1C,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,GAAG,EAAE;KAC3B,CAAC;IAEF,OAAO,CACL,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,SAAS,EAAE,IAAI,CAAC,IAAI,KAAK,YAAY,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,EAAE,aAC3E,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,YACrB,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,UAAU,EAAE,eAAe,EAAE,YAAY,EAAE,UAAU,~~WAAI~~,~~WACvF~~,EACP,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,YAChD,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,CACf,KAAC,QAAQ,IAAC,KAAK,EAAE,GAAG,CAAC,EAAE,EAAE,YAAY,EAAE,UAAU,YAC/C,0BAAM,GAAG,CAAC,IAAI,~~wBAAe~~,IADyB,GAAG,CAAC,EAAE,CAEnD,CACZ,CAAC,~~WACG~~,~~YACF~~,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,~~GAAqB~~,CAAC,~~IAAe~~,EAAE,EAAE;~~IACjE~~,MAAM,CAAC,UAAU,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,GAAG,CAAC,CAAC;IAEhD,MAAM,eAAe,GAAG,CAAC,EAAU,EAAE,EAAE;QACrC,WAAW,CAAC,EAAE,CAAC,CAAC;IAClB,CAAC,CAAC;IAEF,MAAM,IAAI,GAAG;QACX,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,CAAC,EAAE;QACpC,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,EAAE,EAAE;QACrC,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,CAAC,EAAE;QACpC,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;QACrD,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE;KACvC,CAAC;IAEF,OAAO,CACL,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,SAAS,EAAE,IAAI,CAAC,IAAI,KAAK,YAAY,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,EAAE,aAC3E,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,YACrB,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,UAAU,EAAE,eAAe,EAAE,YAAY,EAAE,UAAU,~~WAAI~~,~~WACvF~~,EACP,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,YAChD,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,CACf,KAAC,QAAQ,IAAC,KAAK,EAAE,GAAG,CAAC,EAAE,EAAE,YAAY,EAAE,UAAU,YAC/C,0BAAM,GAAG,CAAC,IAAI,~~wBAAe~~,IADyB,GAAG,CAAC,EAAE,CAEnD,CACZ,CAAC,~~WACG~~,~~YACF~~,CACR,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useState } from 'react';\n\nimport { Flex, TabPanel, Tabs, TabsProps } from '@pega/cosmos-react-core';\n\nexport default {\n title: 'Core/Tabs',\n component: Tabs,\n args: {\n type: 'horizontal'\n },\n argTypes: {\n type: { options: ['horizontal', 'vertical'], control: { type: 'select' } }\n }\n} as Meta;\n\nexport const TabsDemo: Story<~~TabsProps~~> = (args: ~~TabsProps~~) => {\n const [panelShown, changePanel] = useState('1');\n\n const handleTabChange = (id: string) => {\n changePanel(id);\n };\n\n const tabs = [\n { name: 'Tab 1', id: '1' },\n { name: 'Tab 2', id: '2' },\n { name: 'Tab 3', id: '3' },\n { name: 'Tab 4', id: '4', disabled: true },\n { name: 'Tab 5', id: '5' }\n ];\n\n return (\n <Flex container={{ direction: args.type === 'horizontal' ? 'column' : 'row' }}>\n <Flex item={{ grow: 1 }}>\n <Tabs tabs={tabs} type={args.type} onTabClick={handleTabChange} currentTabId={panelShown} />\n </Flex>\n <Flex container={{ pad: [1, 2] }} item={{ grow: 1 }}>\n {tabs.map(tab => (\n <TabPanel tabId={tab.id} currentTabId={panelShown} key={tab.id}>\n <div>{tab.name} content</div>\n </TabPanel>\n ))}\n </Flex>\n </Flex>\n );\n};\n\nexport const TabsCountDemo: Story<~~TabsProps~~> = (args: ~~TabsProps~~) => {\n const [panelShown, changePanel] = useState('1');\n\n const handleTabChange = (id: string) => {\n changePanel(id);\n };\n\n const tabs = [\n { name: 'Tab 1', id: '1', count: 5 },\n { name: 'Tab 2', id: '2', count: 14 },\n { name: 'Tab 3', id: '3', count: 0 },\n { name: 'Tab 4', id: '4', count: 56, disabled: true },\n { name: 'Tab 5', id: '5', count: 150 }\n ];\n\n return (\n <Flex container={{ direction: args.type === 'horizontal' ? 'column' : 'row' }}>\n <Flex item={{ grow: 1 }}>\n <Tabs tabs={tabs} type={args.type} onTabClick={handleTabChange} currentTabId={panelShown} />\n </Flex>\n <Flex container={{ pad: [1, 2] }} item={{ grow: 1 }}>\n {tabs.map(tab => (\n <TabPanel tabId={tab.id} currentTabId={panelShown} key={tab.id}>\n <div>{tab.name} content</div>\n </TabPanel>\n ))}\n </Flex>\n </Flex>\n );\n};\n"]}
1	+ {"version":3,"file":"Tabs.stories.js","sourceRoot":"","sources":["../../../src/core/Tabs/Tabs.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useState } from 'react';\n\nimport { Configuration, Flex, TabPanel, Tabs, TabsProps } from '@pega/cosmos-react-core';\n\nexport default {\n title: 'Core/Tabs',\n component: Tabs,\n args: {\n type: 'horizontal'\n },\n argTypes: {\n type: { options: ['horizontal', 'vertical'], control: { type: 'select' } }\n }\n} as Meta;\n\ninterface TabDemoProps {\n type: 'horizontal' \| 'vertical';\n}\n\nexport const TabsDemo: Story<TabDemoProps> = (args: TabDemoProps) => {\n const [panelShown, changePanel] = useState('1');\n\n const handleTabChange = (id: string) => {\n changePanel(id);\n };\n\n const tabs = [\n { name: 'Tab 1', id: '1' },\n { name: 'Tab 2', id: '2' },\n { name: 'Tab 3', id: '3' },\n { name: 'Tab 4', id: '4', disabled: true },\n { name: 'Tab 5', id: '5' }\n ];\n\n return (\n <Flex container={{ direction: args.type === 'horizontal' ? 'column' : 'row' }}>\n <Flex item={{ grow: 1 }}>\n <Tabs tabs={tabs} type={args.type} onTabClick={handleTabChange} currentTabId={panelShown} />\n </Flex>\n <Flex container={{ pad: [1, 2] }} item={{ grow: 1 }}>\n {tabs.map(tab => (\n <TabPanel tabId={tab.id} currentTabId={panelShown} key={tab.id}>\n <div>{tab.name} content</div>\n </TabPanel>\n ))}\n </Flex>\n </Flex>\n );\n};\n\nexport const TabsCountDemo: Story<TabDemoProps> = (args: TabDemoProps) => {\n const [panelShown, changePanel] = useState('1');\n\n const handleTabChange = (id: string) => {\n changePanel(id);\n };\n\n const tabs = [\n { name: 'Tab 1', id: '1', count: 5 },\n { name: 'Tab 2', id: '2', count: 14 },\n { name: 'Tab 3', id: '3', count: 0 },\n { name: 'Tab 4', id: '4', count: 56, disabled: true },\n { name: 'Tab 5', id: '5', count: 150 }\n ];\n\n return (\n <Flex container={{ direction: args.type === 'horizontal' ? 'column' : 'row' }}>\n <Flex item={{ grow: 1 }}>\n <Tabs tabs={tabs} type={args.type} onTabClick={handleTabChange} currentTabId={panelShown} />\n </Flex>\n <Flex container={{ pad: [1, 2] }} item={{ grow: 1 }}>\n {tabs.map(tab => (\n <TabPanel tabId={tab.id} currentTabId={panelShown} key={tab.id}>\n <div>{tab.name} content</div>\n </TabPanel>\n ))}\n </Flex>\n </Flex>\n );\n};\n\ninterface ConfigurableTabsProps {\n foreground?: string;\n type?: TabsProps['type'];\n}\n\nexport const ConfigurableTabs: Story<ConfigurableTabsProps> = (args: ConfigurableTabsProps) => {\n const [panelShown, changePanel] = useState('1');\n\n const handleTabChange = (id: string) => {\n changePanel(id);\n };\n\n const tabs = [\n { name: 'Tab 1', id: '1' },\n { name: 'Tab 2', id: '2' },\n { name: 'Tab 3', id: '3' },\n { name: 'Tab 4', id: '4', disabled: true },\n { name: 'Tab 5', id: '5' }\n ];\n\n return (\n <Configuration\n theme={{\n components: {\n tabs: {\n base: {\n foreground: args.foreground\n }\n }\n }\n }}\n >\n <Flex item={{ grow: 1 }}>\n <Tabs tabs={tabs} onTabClick={handleTabChange} currentTabId={panelShown} />\n </Flex>\n <Flex container={{ pad: [1, 2] }} item={{ grow: 1 }}>\n {tabs.map(tab => (\n <TabPanel tabId={tab.id} currentTabId={panelShown} key={tab.id}>\n <div>{tab.name} content</div>\n </TabPanel>\n ))}\n </Flex>\n </Configuration>\n );\n};\n\nConfigurableTabs.args = {\n foreground: '#076bc9'\n};\n\nConfigurableTabs.argTypes = {\n foreground: { control: { type: 'color' } },\n type: { table: { disable: true } }\n};\n"]}

package/lib/core/Text/Text.stories.d.ts CHANGED Viewed

@@ -3,4 +3,23 @@ import { TextProps } from '@pega/cosmos-react-core';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
 export declare const TextDemo: Story<TextProps>;
+interface ConfigurableTextProps {
+    primaryFontSize?: string;
+    primaryFontWeight?: string;
+    secondaryFontSize?: string;
+    secondaryFontWeight?: string;
+    h1FontSize?: string;
+    h1FontWeight?: string;
+    h2FontSize?: string;
+    h2FontWeight?: string;
+    h3FontSize?: string;
+    h3FontWeight?: string;
+    h4FontSize?: string;
+    h4FontWeight?: string;
+    h5FontSize?: string;
+    h5FontWeight?: string;
+    h6FontSize?: string;
+    h6FontWeight?: string;
+}
+export declare const ConfigurableText: Story<ConfigurableTextProps>;
 //# sourceMappingURL=Text.stories.d.ts.map

package/lib/core/Text/Text.stories.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Text.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Text/Text.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,~~EAAQ~~,SAAS,EAAE,MAAM,yBAAyB,CAAC;;~~AAE1D~~,wBAGU;AAEV,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,SAAS,CAMrC,CAAC"}
1	+ {"version":3,"file":"Text.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Text/Text.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAA6B,SAAS,EAAE,MAAM,yBAAyB,CAAC;;AAE/E,wBAGU;AAEV,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,SAAS,CAMrC,CAAC;AAeF,UAAU,qBAAqB;IAC7B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,qBAAqB,CAsDzD,CAAC"}

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

@@ -1,11 +1,11 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Text } from '@pega/cosmos-react-core';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Configuration, Flex, Text } from '@pega/cosmos-react-core';
 export default {
     title: 'Core/Text',
     component: Text
 };
 export const TextDemo = (args) => {
-    return (_jsx(Text, { variant: args.variant, status: args.status, children: "Pega Cosmos" }, void 0));
+    return (_jsx(Text, { variant: args.variant, status: args.status, children: "Pega Cosmos" }));
 };
 TextDemo.args = {
     variant: 'primary',
@@ -18,4 +18,104 @@ TextDemo.argTypes = {
     },
     status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } }
 };
+export const ConfigurableText = (args) => {
+    return (_jsx(Configuration, { theme: {
+            components: {
+                text: {
+                    primary: {
+                        'font-size': args.primaryFontSize,
+                        'font-weight': args.primaryFontWeight
+                    },
+                    secondary: {
+                        'font-size': args.secondaryFontSize,
+                        'font-weight': args.secondaryFontWeight
+                    },
+                    h1: {
+                        'font-size': args.h1FontSize,
+                        'font-weight': args.h1FontWeight
+                    },
+                    h2: {
+                        'font-size': args.h2FontSize,
+                        'font-weight': args.h2FontWeight
+                    },
+                    h3: {
+                        'font-size': args.h3FontSize,
+                        'font-weight': args.h3FontWeight
+                    },
+                    h4: {
+                        'font-size': args.h4FontSize,
+                        'font-weight': args.h4FontWeight
+                    },
+                    h5: {
+                        'font-size': args.h5FontSize,
+                        'font-weight': args.h5FontWeight
+                    },
+                    h6: {
+                        'font-size': args.h6FontSize,
+                        'font-weight': args.h6FontWeight
+                    }
+                }
+            }
+        }, children: _jsxs(Flex, { container: { gap: 2, alignItems: 'end' }, children: [_jsx(Text, { variant: 'primary', children: "Primary" }), _jsx(Text, { variant: 'secondary', children: "Secondary" }), _jsx(Text, { variant: 'h1', children: "h1" }), _jsx(Text, { variant: 'h2', children: "h2" }), _jsx(Text, { variant: 'h3', children: "h3" }), _jsx(Text, { variant: 'h4', children: "h4" }), _jsx(Text, { variant: 'h5', children: "h5" }), _jsx(Text, { variant: 'h6', children: "h6" })] }) }));
+};
+ConfigurableText.args = {
+    primaryFontSize: 's',
+    primaryFontWeight: '400',
+    secondaryFontSize: 'xs',
+    secondaryFontWeight: '400',
+    h1FontSize: 'xl',
+    h1FontWeight: '600',
+    h2FontSize: 'l',
+    h2FontWeight: '600',
+    h3FontSize: 'm',
+    h3FontWeight: '600',
+    h4FontSize: 's',
+    h4FontWeight: '600',
+    h5FontSize: 'xs',
+    h5FontWeight: '600',
+    h6FontSize: 'xxs',
+    h6FontWeight: '600'
+};
+ConfigurableText.argTypes = {
+    primaryFontSize: {
+        options: ['xxs', 'xs', 's', 'm', 'l', 'xl', 'xxl'],
+        control: { type: 'select' }
+    },
+    primaryFontWeight: { control: { type: 'text' } },
+    secondaryFontSize: {
+        options: ['xxs', 'xs', 's', 'm', 'l', 'xl', 'xxl'],
+        control: { type: 'select' }
+    },
+    secondaryFontWeight: { control: { type: 'text' } },
+    h1FontSize: {
+        options: ['xxs', 'xs', 's', 'm', 'l', 'xl', 'xxl'],
+        control: { type: 'select' }
+    },
+    h1FontWeight: { control: { type: 'text' } },
+    h2FontSize: {
+        options: ['xxs', 'xs', 's', 'm', 'l', 'xl', 'xxl'],
+        control: { type: 'select' }
+    },
+    h2FontWeight: { control: { type: 'text' } },
+    h3FontSize: {
+        options: ['xxs', 'xs', 's', 'm', 'l', 'xl', 'xxl'],
+        control: { type: 'select' }
+    },
+    h3FontWeight: { control: { type: 'text' } },
+    h4FontSize: {
+        options: ['xxs', 'xs', 's', 'm', 'l', 'xl', 'xxl'],
+        control: { type: 'select' }
+    },
+    h4FontWeight: { control: { type: 'text' } },
+    h5FontSize: {
+        options: ['xxs', 'xs', 's', 'm', 'l', 'xl', 'xxl'],
+        control: { type: 'select' }
+    },
+    h5FontWeight: { control: { type: 'text' } },
+    h6FontSize: {
+        options: ['xxs', 'xs', 's', 'm', 'l', 'xl', 'xxl'],
+        control: { type: 'select' }
+    },
+    h6FontWeight: { control: { type: 'text' } }
+};
 //# sourceMappingURL=Text.stories.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Text.stories.js","sourceRoot":"","sources":["../../../src/core/Text/Text.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,IAAI,EAAa,MAAM,yBAAyB,CAAC;~~AAE1D~~,eAAe;IACb,KAAK,EAAE,WAAW;IAClB,SAAS,EAAE,IAAI;CACR,CAAC;AAEV,MAAM,CAAC,MAAM,QAAQ,GAAqB,CAAC,IAAe,EAAE,EAAE;IAC5D,OAAO,CACL,KAAC,IAAI,IAAC,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,~~oCAEzC~~,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,QAAQ,CAAC,IAAI,GAAG;IACd,OAAO,EAAE,SAAS;IAClB,MAAM,EAAE,SAAS;CAClB,CAAC;AAEF,QAAQ,CAAC,QAAQ,GAAG;IAClB,OAAO,EAAE;QACP,OAAO,EAAE,CAAC,SAAS,EAAE,WAAW,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC;QACrE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;KAC5B;IACD,MAAM,EAAE,EAAE,OAAO,EAAE,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;CAC7F,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { Text, TextProps } from '@pega/cosmos-react-core';\n\nexport default {\n title: 'Core/Text',\n component: Text\n} as Meta;\n\nexport const TextDemo: Story<TextProps> = (args: TextProps) => {\n return (\n <Text variant={args.variant} status={args.status}>\n Pega Cosmos\n </Text>\n );\n};\n\nTextDemo.args = {\n variant: 'primary',\n status: undefined\n};\n\nTextDemo.argTypes = {\n variant: {\n options: ['primary', 'secondary', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'],\n control: { type: 'select' }\n },\n status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } }\n};\n"]}
1	+ {"version":3,"file":"Text.stories.js","sourceRoot":"","sources":["../../../src/core/Text/Text.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,aAAa,EAAE,IAAI,EAAE,IAAI,EAAa,MAAM,yBAAyB,CAAC;AAE/E,eAAe;IACb,KAAK,EAAE,WAAW;IAClB,SAAS,EAAE,IAAI;CACR,CAAC;AAEV,MAAM,CAAC,MAAM,QAAQ,GAAqB,CAAC,IAAe,EAAE,EAAE;IAC5D,OAAO,CACL,KAAC,IAAI,IAAC,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,4BAEzC,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,QAAQ,CAAC,IAAI,GAAG;IACd,OAAO,EAAE,SAAS;IAClB,MAAM,EAAE,SAAS;CAClB,CAAC;AAEF,QAAQ,CAAC,QAAQ,GAAG;IAClB,OAAO,EAAE;QACP,OAAO,EAAE,CAAC,SAAS,EAAE,WAAW,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC;QACrE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;KAC5B;IACD,MAAM,EAAE,EAAE,OAAO,EAAE,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;CAC7F,CAAC;AAqBF,MAAM,CAAC,MAAM,gBAAgB,GAAiC,CAAC,IAA2B,EAAE,EAAE;IAC5F,OAAO,CACL,KAAC,aAAa,IACZ,KAAK,EAAE;YACL,UAAU,EAAE;gBACV,IAAI,EAAE;oBACJ,OAAO,EAAE;wBACP,WAAW,EAAE,IAAI,CAAC,eAAe;wBACjC,aAAa,EAAE,IAAI,CAAC,iBAAiB;qBACtC;oBACD,SAAS,EAAE;wBACT,WAAW,EAAE,IAAI,CAAC,iBAAiB;wBACnC,aAAa,EAAE,IAAI,CAAC,mBAAmB;qBACxC;oBACD,EAAE,EAAE;wBACF,WAAW,EAAE,IAAI,CAAC,UAAU;wBAC5B,aAAa,EAAE,IAAI,CAAC,YAAY;qBACjC;oBACD,EAAE,EAAE;wBACF,WAAW,EAAE,IAAI,CAAC,UAAU;wBAC5B,aAAa,EAAE,IAAI,CAAC,YAAY;qBACjC;oBACD,EAAE,EAAE;wBACF,WAAW,EAAE,IAAI,CAAC,UAAU;wBAC5B,aAAa,EAAE,IAAI,CAAC,YAAY;qBACjC;oBACD,EAAE,EAAE;wBACF,WAAW,EAAE,IAAI,CAAC,UAAU;wBAC5B,aAAa,EAAE,IAAI,CAAC,YAAY;qBACjC;oBACD,EAAE,EAAE;wBACF,WAAW,EAAE,IAAI,CAAC,UAAU;wBAC5B,aAAa,EAAE,IAAI,CAAC,YAAY;qBACjC;oBACD,EAAE,EAAE;wBACF,WAAW,EAAE,IAAI,CAAC,UAAU;wBAC5B,aAAa,EAAE,IAAI,CAAC,YAAY;qBACjC;iBACF;aACF;SACF,YAED,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,UAAU,EAAE,KAAK,EAAE,aAC5C,KAAC,IAAI,IAAC,OAAO,EAAC,SAAS,wBAAe,EACtC,KAAC,IAAI,IAAC,OAAO,EAAC,WAAW,0BAAiB,EAC1C,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,mBAAU,EAC5B,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,mBAAU,EAC5B,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,mBAAU,EAC5B,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,mBAAU,EAC5B,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,mBAAU,EAC5B,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,mBAAU,IACvB,GACO,CACjB,CAAC;AACJ,CAAC,CAAC;AAEF,gBAAgB,CAAC,IAAI,GAAG;IACtB,eAAe,EAAE,GAAG;IACpB,iBAAiB,EAAE,KAAK;IACxB,iBAAiB,EAAE,IAAI;IACvB,mBAAmB,EAAE,KAAK;IAC1B,UAAU,EAAE,IAAI;IAChB,YAAY,EAAE,KAAK;IACnB,UAAU,EAAE,GAAG;IACf,YAAY,EAAE,KAAK;IACnB,UAAU,EAAE,GAAG;IACf,YAAY,EAAE,KAAK;IACnB,UAAU,EAAE,GAAG;IACf,YAAY,EAAE,KAAK;IACnB,UAAU,EAAE,IAAI;IAChB,YAAY,EAAE,KAAK;IACnB,UAAU,EAAE,KAAK;IACjB,YAAY,EAAE,KAAK;CACpB,CAAC;AAEF,gBAAgB,CAAC,QAAQ,GAAG;IAC1B,eAAe,EAAE;QACf,OAAO,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,KAAK,CAAC;QAClD,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;KAC5B;IACD,iBAAiB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IAChD,iBAAiB,EAAE;QACjB,OAAO,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,KAAK,CAAC;QAClD,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;KAC5B;IACD,mBAAmB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IAClD,UAAU,EAAE;QACV,OAAO,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,KAAK,CAAC;QAClD,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;KAC5B;IACD,YAAY,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IAC3C,UAAU,EAAE;QACV,OAAO,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,KAAK,CAAC;QAClD,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;KAC5B;IACD,YAAY,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IAC3C,UAAU,EAAE;QACV,OAAO,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,KAAK,CAAC;QAClD,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;KAC5B;IACD,YAAY,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IAC3C,UAAU,EAAE;QACV,OAAO,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,KAAK,CAAC;QAClD,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;KAC5B;IACD,YAAY,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IAC3C,UAAU,EAAE;QACV,OAAO,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,KAAK,CAAC;QAClD,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;KAC5B;IACD,YAAY,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IAC3C,UAAU,EAAE;QACV,OAAO,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,KAAK,CAAC;QAClD,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;KAC5B;IACD,YAAY,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;CAC5C,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { Configuration, Flex, Text, TextProps } from '@pega/cosmos-react-core';\n\nexport default {\n title: 'Core/Text',\n component: Text\n} as Meta;\n\nexport const TextDemo: Story<TextProps> = (args: TextProps) => {\n return (\n <Text variant={args.variant} status={args.status}>\n Pega Cosmos\n </Text>\n );\n};\n\nTextDemo.args = {\n variant: 'primary',\n status: undefined\n};\n\nTextDemo.argTypes = {\n variant: {\n options: ['primary', 'secondary', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'],\n control: { type: 'select' }\n },\n status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } }\n};\n\ninterface ConfigurableTextProps {\n primaryFontSize?: string;\n primaryFontWeight?: string;\n secondaryFontSize?: string;\n secondaryFontWeight?: string;\n h1FontSize?: string;\n h1FontWeight?: string;\n h2FontSize?: string;\n h2FontWeight?: string;\n h3FontSize?: string;\n h3FontWeight?: string;\n h4FontSize?: string;\n h4FontWeight?: string;\n h5FontSize?: string;\n h5FontWeight?: string;\n h6FontSize?: string;\n h6FontWeight?: string;\n}\n\nexport const ConfigurableText: Story<ConfigurableTextProps> = (args: ConfigurableTextProps) => {\n return (\n <Configuration\n theme={{\n components: {\n text: {\n primary: {\n 'font-size': args.primaryFontSize,\n 'font-weight': args.primaryFontWeight\n },\n secondary: {\n 'font-size': args.secondaryFontSize,\n 'font-weight': args.secondaryFontWeight\n },\n h1: {\n 'font-size': args.h1FontSize,\n 'font-weight': args.h1FontWeight\n },\n h2: {\n 'font-size': args.h2FontSize,\n 'font-weight': args.h2FontWeight\n },\n h3: {\n 'font-size': args.h3FontSize,\n 'font-weight': args.h3FontWeight\n },\n h4: {\n 'font-size': args.h4FontSize,\n 'font-weight': args.h4FontWeight\n },\n h5: {\n 'font-size': args.h5FontSize,\n 'font-weight': args.h5FontWeight\n },\n h6: {\n 'font-size': args.h6FontSize,\n 'font-weight': args.h6FontWeight\n }\n }\n }\n }}\n >\n <Flex container={{ gap: 2, alignItems: 'end' }}>\n <Text variant='primary'>Primary</Text>\n <Text variant='secondary'>Secondary</Text>\n <Text variant='h1'>h1</Text>\n <Text variant='h2'>h2</Text>\n <Text variant='h3'>h3</Text>\n <Text variant='h4'>h4</Text>\n <Text variant='h5'>h5</Text>\n <Text variant='h6'>h6</Text>\n </Flex>\n </Configuration>\n );\n};\n\nConfigurableText.args = {\n primaryFontSize: 's',\n primaryFontWeight: '400',\n secondaryFontSize: 'xs',\n secondaryFontWeight: '400',\n h1FontSize: 'xl',\n h1FontWeight: '600',\n h2FontSize: 'l',\n h2FontWeight: '600',\n h3FontSize: 'm',\n h3FontWeight: '600',\n h4FontSize: 's',\n h4FontWeight: '600',\n h5FontSize: 'xs',\n h5FontWeight: '600',\n h6FontSize: 'xxs',\n h6FontWeight: '600'\n};\n\nConfigurableText.argTypes = {\n primaryFontSize: {\n options: ['xxs', 'xs', 's', 'm', 'l', 'xl', 'xxl'],\n control: { type: 'select' }\n },\n primaryFontWeight: { control: { type: 'text' } },\n secondaryFontSize: {\n options: ['xxs', 'xs', 's', 'm', 'l', 'xl', 'xxl'],\n control: { type: 'select' }\n },\n secondaryFontWeight: { control: { type: 'text' } },\n h1FontSize: {\n options: ['xxs', 'xs', 's', 'm', 'l', 'xl', 'xxl'],\n control: { type: 'select' }\n },\n h1FontWeight: { control: { type: 'text' } },\n h2FontSize: {\n options: ['xxs', 'xs', 's', 'm', 'l', 'xl', 'xxl'],\n control: { type: 'select' }\n },\n h2FontWeight: { control: { type: 'text' } },\n h3FontSize: {\n options: ['xxs', 'xs', 's', 'm', 'l', 'xl', 'xxl'],\n control: { type: 'select' }\n },\n h3FontWeight: { control: { type: 'text' } },\n h4FontSize: {\n options: ['xxs', 'xs', 's', 'm', 'l', 'xl', 'xxl'],\n control: { type: 'select' }\n },\n h4FontWeight: { control: { type: 'text' } },\n h5FontSize: {\n options: ['xxs', 'xs', 's', 'm', 'l', 'xl', 'xxl'],\n control: { type: 'select' }\n },\n h5FontWeight: { control: { type: 'text' } },\n h6FontSize: {\n options: ['xxs', 'xs', 's', 'm', 'l', 'xl', 'xxl'],\n control: { type: 'select' }\n },\n h6FontWeight: { control: { type: 'text' } }\n};\n"]}

package/lib/core/TextArea/TextArea.stories.d.ts CHANGED Viewed

@@ -3,4 +3,9 @@ import { TextAreaProps } from '@pega/cosmos-react-core';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
 export declare const TextAreaDemo: Story<TextAreaProps>;
+interface ConfigurableTextAreaProps {
+    minHeight?: string;
+    padding?: string;
+}
+export declare const ConfigurableTextArea: Story<ConfigurableTextAreaProps>;
 //# sourceMappingURL=TextArea.stories.d.ts.map

package/lib/core/TextArea/TextArea.stories.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TextArea.stories.d.ts","sourceRoot":"","sources":["../../../src/core/TextArea/TextArea.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,~~EAAY~~,aAAa,EAAE,MAAM,yBAAyB,CAAC;;~~AAElE~~,wBAGU;AAEV,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,aAAa,CAwB7C,CAAC"}
1	+ {"version":3,"file":"TextArea.stories.d.ts","sourceRoot":"","sources":["../../../src/core/TextArea/TextArea.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAA2B,aAAa,EAAE,MAAM,yBAAyB,CAAC;;AAEjF,wBAGU;AAEV,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,aAAa,CAwB7C,CAAC;AAoCF,UAAU,yBAAyB;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,yBAAyB,CA2BjE,CAAC"}

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

@@ -1,13 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useState } from 'react';
-import { TextArea } from '@pega/cosmos-react-core';
+import { Configuration, TextArea } from '@pega/cosmos-react-core';
 export default {
     title: 'Core/Textarea',
     component: TextArea
 };
 export const TextAreaDemo = (args) => {
     const [value, setValue] = useState('');
-    return (_jsx(TextArea, { id: 'text-area', value: value, onChange: (e) => setValue(e.target.value), minLength: args.minLength, maxLength: args.maxLength, displayCharCount: args.displayCharCount, hardStop: args.hardStop, resizable: args.resizable, autoResize: args.autoResize, label: args.label, labelHidden: args.labelHidden, info: args.info, placeholder: args.placeholder, status: args.status, required: args.required, disabled: args.disabled, readOnly: args.readOnly }, void 0));
+    return (_jsx(TextArea, { id: 'text-area', value: value, onChange: (e) => setValue(e.target.value), minLength: args.minLength, maxLength: args.maxLength, displayCharCount: args.displayCharCount, hardStop: args.hardStop, resizable: args.resizable, autoResize: args.autoResize, label: args.label, labelHidden: args.labelHidden, info: args.info, placeholder: args.placeholder, status: args.status, required: args.required, disabled: args.disabled, readOnly: args.readOnly }));
 };
 TextAreaDemo.args = {
     minLength: 0,
@@ -41,4 +41,23 @@ TextAreaDemo.argTypes = {
     disabled: { control: { type: 'boolean' } },
     readOnly: { control: { type: 'boolean' } }
 };
+export const ConfigurableTextArea = (args) => {
+    const [value, setValue] = useState('');
+    return (_jsx(Configuration, { theme: {
+            components: {
+                'text-area': {
+                    'min-height': args.minHeight,
+                    padding: args.padding
+                }
+            }
+        }, children: _jsx(TextArea, { value: value, onChange: (e) => setValue(e.target.value), resizable: true, autoResize: true, label: 'Configurable Text Area', info: 'Enter a large amount of text', placeholder: 'Tell us a story\u2026' }) }));
+};
+ConfigurableTextArea.args = {
+    minHeight: '3.75rem',
+    padding: '0.5rem'
+};
+ConfigurableTextArea.argTypes = {
+    minHeight: { control: { type: 'text' } },
+    padding: { control: { type: 'text' } }
+};
 //# sourceMappingURL=TextArea.stories.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"TextArea.stories.js","sourceRoot":"","sources":["../../../src/core/TextArea/TextArea.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAe,MAAM,OAAO,CAAC;AAE9C,OAAO,EAAE,QAAQ,EAAiB,MAAM,yBAAyB,CAAC;~~AAElE~~,eAAe;IACb,KAAK,EAAE,eAAe;IACtB,SAAS,EAAE,QAAQ;CACZ,CAAC;AAEV,MAAM,CAAC,MAAM,YAAY,GAAyB,CAAC,IAAmB,EAAE,EAAE;IACxE,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAEvC,OAAO,CACL,KAAC,QAAQ,IACP,EAAE,EAAC,WAAW,EACd,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,CAAC,CAAmC,EAAE,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EAC3E,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,gBAAgB,EAAE,IAAI,CAAC,gBAAgB,EACvC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,~~WACvB~~,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,YAAY,CAAC,IAAI,GAAG;IAClB,SAAS,EAAE,CAAC;IACZ,SAAS,EAAE,GAAG;IACd,gBAAgB,EAAE,KAAK;IACvB,QAAQ,EAAE,IAAI;IACd,SAAS,EAAE,KAAK;IAChB,UAAU,EAAE,KAAK;IACjB,KAAK,EAAE,WAAW;IAClB,WAAW,EAAE,KAAK;IAClB,IAAI,EAAE,8BAA8B;IACpC,WAAW,EAAE,kBAAkB;IAC/B,MAAM,EAAE,SAAS;IACjB,QAAQ,EAAE,KAAK;IACf,QAAQ,EAAE,KAAK;IACf,QAAQ,EAAE,KAAK;CAChB,CAAC;AAEF,YAAY,CAAC,QAAQ,GAAG;IACtB,SAAS,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IAC1C,SAAS,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IAC1C,gBAAgB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAClD,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC1C,SAAS,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC3C,UAAU,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC5C,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACpC,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC7C,IAAI,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACnC,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IAC1C,MAAM,EAAE,EAAE,OAAO,EAAE,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IAC5F,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC1C,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC1C,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;CAC3C,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useState, ChangeEvent } from 'react';\n\nimport { TextArea, TextAreaProps } from '@pega/cosmos-react-core';\n\nexport default {\n title: 'Core/Textarea',\n component: TextArea\n} as Meta;\n\nexport const TextAreaDemo: Story<TextAreaProps> = (args: TextAreaProps) => {\n const [value, setValue] = useState('');\n\n return (\n <TextArea\n id='text-area'\n value={value}\n onChange={(e: ChangeEvent<HTMLTextAreaElement>) => setValue(e.target.value)}\n minLength={args.minLength}\n maxLength={args.maxLength}\n displayCharCount={args.displayCharCount}\n hardStop={args.hardStop}\n resizable={args.resizable}\n autoResize={args.autoResize}\n label={args.label}\n labelHidden={args.labelHidden}\n info={args.info}\n placeholder={args.placeholder}\n status={args.status}\n required={args.required}\n disabled={args.disabled}\n readOnly={args.readOnly}\n />\n );\n};\n\nTextAreaDemo.args = {\n minLength: 0,\n maxLength: 300,\n displayCharCount: false,\n hardStop: true,\n resizable: false,\n autoResize: false,\n label: 'Text Area',\n labelHidden: false,\n info: 'Enter a large amount of text',\n placeholder: 'Tell us a story…',\n status: undefined,\n required: false,\n disabled: false,\n readOnly: false\n};\n\nTextAreaDemo.argTypes = {\n minLength: { control: { type: 'number' } },\n maxLength: { control: { type: 'number' } },\n displayCharCount: { control: { type: 'boolean' } },\n hardStop: { control: { type: 'boolean' } },\n resizable: { control: { type: 'boolean' } },\n autoResize: { control: { type: 'boolean' } },\n label: { control: { type: 'text' } },\n labelHidden: { control: { type: 'boolean' } },\n info: { control: { type: 'text' } },\n placeholder: { control: { type: 'text' } },\n status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },\n required: { control: { type: 'boolean' } },\n disabled: { control: { type: 'boolean' } },\n readOnly: { control: { type: 'boolean' } }\n};\n"]}
1	+ {"version":3,"file":"TextArea.stories.js","sourceRoot":"","sources":["../../../src/core/TextArea/TextArea.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useState, ChangeEvent } from 'react';\n\nimport { Configuration, TextArea, TextAreaProps } from '@pega/cosmos-react-core';\n\nexport default {\n title: 'Core/Textarea',\n component: TextArea\n} as Meta;\n\nexport const TextAreaDemo: Story<TextAreaProps> = (args: TextAreaProps) => {\n const [value, setValue] = useState('');\n\n return (\n <TextArea\n id='text-area'\n value={value}\n onChange={(e: ChangeEvent<HTMLTextAreaElement>) => setValue(e.target.value)}\n minLength={args.minLength}\n maxLength={args.maxLength}\n displayCharCount={args.displayCharCount}\n hardStop={args.hardStop}\n resizable={args.resizable}\n autoResize={args.autoResize}\n label={args.label}\n labelHidden={args.labelHidden}\n info={args.info}\n placeholder={args.placeholder}\n status={args.status}\n required={args.required}\n disabled={args.disabled}\n readOnly={args.readOnly}\n />\n );\n};\n\nTextAreaDemo.args = {\n minLength: 0,\n maxLength: 300,\n displayCharCount: false,\n hardStop: true,\n resizable: false,\n autoResize: false,\n label: 'Text Area',\n labelHidden: false,\n info: 'Enter a large amount of text',\n placeholder: 'Tell us a story…',\n status: undefined,\n required: false,\n disabled: false,\n readOnly: false\n};\n\nTextAreaDemo.argTypes = {\n minLength: { control: { type: 'number' } },\n maxLength: { control: { type: 'number' } },\n displayCharCount: { control: { type: 'boolean' } },\n hardStop: { control: { type: 'boolean' } },\n resizable: { control: { type: 'boolean' } },\n autoResize: { control: { type: 'boolean' } },\n label: { control: { type: 'text' } },\n labelHidden: { control: { type: 'boolean' } },\n info: { control: { type: 'text' } },\n placeholder: { control: { type: 'text' } },\n status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },\n required: { control: { type: 'boolean' } },\n disabled: { control: { type: 'boolean' } },\n readOnly: { control: { type: 'boolean' } }\n};\n\ninterface ConfigurableTextAreaProps {\n minHeight?: string;\n padding?: string;\n}\n\nexport const ConfigurableTextArea: Story<ConfigurableTextAreaProps> = (\n args: ConfigurableTextAreaProps\n) => {\n const [value, setValue] = useState('');\n\n return (\n <Configuration\n theme={{\n components: {\n 'text-area': {\n 'min-height': args.minHeight,\n padding: args.padding\n }\n }\n }}\n >\n <TextArea\n value={value}\n onChange={(e: ChangeEvent<HTMLTextAreaElement>) => setValue(e.target.value)}\n resizable\n autoResize\n label='Configurable Text Area'\n info='Enter a large amount of text'\n placeholder='Tell us a story…'\n />\n </Configuration>\n );\n};\n\nConfigurableTextArea.args = {\n minHeight: '3.75rem',\n padding: '0.5rem'\n};\n\nConfigurableTextArea.argTypes = {\n minHeight: { control: { type: 'text' } },\n padding: { control: { type: 'text' } }\n};\n"]}

package/lib/core/Toaster/Toaster.stories.d.ts CHANGED Viewed

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

package/lib/core/Toaster/Toaster.stories.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Toaster.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Toaster/Toaster.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;;~~AAKxC~~,wBAGU;AAEV,eAAO,MAAM,WAAW,~~mBAyBvB~~,CAAC"}
1	+ {"version":3,"file":"Toaster.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Toaster/Toaster.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;;AAK/C,wBAGU;AAEV,eAAO,MAAM,WAAW,EAAE,KAyBzB,CAAC"}