@pega/cosmos-react-work 3.0.0-dev.14.0 → 3.0.0-dev.16.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 (35) hide show
  1. package/lib/components/AppAnnouncement/AppAnnouncement.d.ts +4 -0
  2. package/lib/components/AppAnnouncement/AppAnnouncement.d.ts.map +1 -1
  3. package/lib/components/AppAnnouncement/AppAnnouncement.js +3 -2
  4. package/lib/components/AppAnnouncement/AppAnnouncement.js.map +1 -1
  5. package/lib/components/Stages/StageGlimpse.d.ts +10 -0
  6. package/lib/components/Stages/StageGlimpse.d.ts.map +1 -0
  7. package/lib/components/Stages/StageGlimpse.js +11 -0
  8. package/lib/components/Stages/StageGlimpse.js.map +1 -0
  9. package/lib/components/Stages/Stages.d.ts +1 -1
  10. package/lib/components/Stages/Stages.d.ts.map +1 -1
  11. package/lib/components/Stages/Stages.js +105 -112
  12. package/lib/components/Stages/Stages.js.map +1 -1
  13. package/lib/components/Stages/Stages.styles.d.ts +4 -7
  14. package/lib/components/Stages/Stages.styles.d.ts.map +1 -1
  15. package/lib/components/Stages/Stages.styles.js +169 -186
  16. package/lib/components/Stages/Stages.styles.js.map +1 -1
  17. package/lib/components/Stages/Stages.types.d.ts +19 -4
  18. package/lib/components/Stages/Stages.types.d.ts.map +1 -1
  19. package/lib/components/Stages/Stages.types.js.map +1 -1
  20. package/lib/components/Tasks/TaskList.d.ts +8 -5
  21. package/lib/components/Tasks/TaskList.d.ts.map +1 -1
  22. package/lib/components/Tasks/TaskList.js +8 -4
  23. package/lib/components/Tasks/TaskList.js.map +1 -1
  24. package/lib/components/Tasks/Tasks.d.ts.map +1 -1
  25. package/lib/components/Tasks/Tasks.js +2 -1
  26. package/lib/components/Tasks/Tasks.js.map +1 -1
  27. package/package.json +5 -2
  28. package/lib/components/Stages/Steps.d.ts +0 -8
  29. package/lib/components/Stages/Steps.d.ts.map +0 -1
  30. package/lib/components/Stages/Steps.js +0 -12
  31. package/lib/components/Stages/Steps.js.map +0 -1
  32. package/lib/components/Stages/StepsContainer.d.ts +0 -8
  33. package/lib/components/Stages/StepsContainer.d.ts.map +0 -1
  34. package/lib/components/Stages/StepsContainer.js +0 -11
  35. package/lib/components/Stages/StepsContainer.js.map +0 -1
@@ -1 +1 @@
1
- {"version":3,"file":"Tasks.d.ts","sourceRoot":"","sources":["../../../src/components/Tasks/Tasks.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,EAAE,EAAE,YAAY,EAAuB,MAAM,OAAO,CAAC;AAGzE,OAAO,EAWL,YAAY,EACZ,cAAc,EACf,MAAM,yBAAyB,CAAC;AAEjC,OAAiB,EAAY,aAAa,EAAE,MAAM,YAAY,CAAC;AAE/D,MAAM,WAAW,UAAW,SAAQ,cAAc;IAChD,uDAAuD;IACvD,KAAK,EAAE,aAAa,EAAE,CAAC;IACvB,gDAAgD;IAChD,gBAAgB,EAAE,SAAS,CAAC;IAC5B,qDAAqD;IACrD,UAAU,EAAE,MAAM,CAAC;IACnB,0EAA0E;IAC1E,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,4DAA4D;IAC5D,eAAe,CAAC,EAAE,SAAS,CAAC;IAC5B,qDAAqD;IACrD,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,2IAA2I;IAC3I,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;CAC7B;AAUD,QAAA,MAAM,KAAK,EAAE,EAAE,CAAC,YAAY,GAAG,UAAU,CA6DxC,CAAC;AAEF,eAAe,KAAK,CAAC"}
1
+ {"version":3,"file":"Tasks.d.ts","sourceRoot":"","sources":["../../../src/components/Tasks/Tasks.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,EAAE,EAAE,YAAY,EAAuB,MAAM,OAAO,CAAC;AAGzE,OAAO,EAWL,YAAY,EACZ,cAAc,EAEf,MAAM,yBAAyB,CAAC;AAEjC,OAAiB,EAAY,aAAa,EAAE,MAAM,YAAY,CAAC;AAE/D,MAAM,WAAW,UAAW,SAAQ,cAAc;IAChD,uDAAuD;IACvD,KAAK,EAAE,aAAa,EAAE,CAAC;IACvB,gDAAgD;IAChD,gBAAgB,EAAE,SAAS,CAAC;IAC5B,qDAAqD;IACrD,UAAU,EAAE,MAAM,CAAC;IACnB,0EAA0E;IAC1E,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,4DAA4D;IAC5D,eAAe,CAAC,EAAE,SAAS,CAAC;IAC5B,qDAAqD;IACrD,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,2IAA2I;IAC3I,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;CAC7B;AAYD,QAAA,MAAM,KAAK,EAAE,EAAE,CAAC,YAAY,GAAG,UAAU,CA6DxC,CAAC;AAEF,eAAe,KAAK,CAAC"}
@@ -1,7 +1,7 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import { useMemo } from 'react';
3
3
  import styled, { css } from 'styled-components';
4
- import { Card, CardHeader, CardContent, CardFooter, Flex, Text, SummaryItem, Count, Button, useI18n } from '@pega/cosmos-react-core';
4
+ import { Card, CardHeader, CardContent, CardFooter, Flex, Text, SummaryItem, Count, Button, useI18n, defaultThemeProp } from '@pega/cosmos-react-core';
5
5
  import TaskList, { TaskItem } from './TaskList';
6
6
  const StyledTasks = styled(Card)(({ theme, openItem }) => {
7
7
  return openItem
@@ -10,6 +10,7 @@ const StyledTasks = styled(Card)(({ theme, openItem }) => {
10
10
  `
11
11
  : null;
12
12
  });
13
+ StyledTasks.defaultProps = defaultThemeProp;
13
14
  const Tasks = (props) => {
14
15
  const { items = [], headerText, headerVisual, headerSecondary, count, onExpandToggle, emptyPlaceholder, ...restProps } = props;
15
16
  const openItem = items.find(item => item.content);
@@ -1 +1 @@
1
- {"version":3,"file":"Tasks.js","sourceRoot":"","sources":["../../../src/components/Tasks/Tasks.tsx"],"names":[],"mappings":"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","sourcesContent":["import { ReactNode, FC, ReactElement, useMemo, MouseEvent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n Card,\n CardHeader,\n CardContent,\n CardFooter,\n Flex,\n Text,\n SummaryItem,\n Count,\n Button,\n useI18n,\n ForwardProps,\n NoChildrenProp\n} from '@pega/cosmos-react-core';\n\nimport TaskList, { TaskItem, TaskItemProps } from './TaskList';\n\nexport interface TasksProps extends NoChildrenProp {\n /** An array of TaskItemProps to generate the list. */\n items: TaskItemProps[];\n /** Content to render when the list is empty. */\n emptyPlaceholder: ReactNode;\n /** Heading text to render at the top of the list. */\n headerText: string;\n /** A visual element i.e. (Avatar | Icon) to accompany the header text. */\n headerVisual?: ReactElement;\n /** A region for supplemental task list info or controls. */\n headerSecondary?: ReactNode;\n /** Integer representing the total count of tasks. */\n count?: number | null;\n /** Callback for when to show more/less button is clicked. Lists greater than 3 items will display the show toggle button in its footer. */\n onExpandToggle?: () => void;\n}\n\nconst StyledTasks = styled(Card)<{ openItem?: boolean }>(({ theme, openItem }) => {\n return openItem\n ? css`\n box-shadow: ${theme.base.shadow.low};\n `\n : null;\n});\n\nconst Tasks: FC<ForwardProps & TasksProps> = (props: TasksProps) => {\n const {\n items = [],\n headerText,\n headerVisual,\n headerSecondary,\n count,\n onExpandToggle,\n emptyPlaceholder,\n ...restProps\n } = props;\n const openItem = items.find(item => item.content);\n const t = useI18n();\n\n const hasFooter = useMemo(() => {\n return !openItem && typeof count === 'number' && count > 3;\n }, [openItem, count]);\n\n const TaskItems = useMemo(() => {\n return openItem ? <TaskItem {...openItem} /> : <TaskList items={items} hasFooter={hasFooter} />;\n }, [items, openItem]);\n\n return (\n <StyledTasks {...restProps} openItem={!!openItem}>\n {!openItem && (\n <CardHeader>\n <SummaryItem\n visual={headerVisual}\n primary={\n <Flex container={{ alignItems: 'center', gap: 1 }}>\n <Text variant='h2'>{headerText}</Text>\n <Count>{count ?? null}</Count>\n </Flex>\n }\n secondary={headerSecondary}\n />\n </CardHeader>\n )}\n <CardContent>{items.length > 0 ? TaskItems : emptyPlaceholder}</CardContent>\n\n {hasFooter && (\n <CardFooter justify='center'>\n <Button\n variant='link'\n aria-label={t(!!count && count > items.length ? 'show_more' : 'show_less', ['tasks'])}\n onClick={(e: MouseEvent<HTMLButtonElement>) => {\n onExpandToggle?.();\n if (!!count && count <= items.length) {\n const { currentTarget } = e;\n requestAnimationFrame(() => {\n if (currentTarget.getBoundingClientRect().top < 0) currentTarget.scrollIntoView();\n });\n }\n }}\n >\n {t(!!count && count > items.length ? 'show_more' : 'show_less')}\n </Button>\n </CardFooter>\n )}\n </StyledTasks>\n );\n};\n\nexport default Tasks;\n"]}
1
+ {"version":3,"file":"Tasks.js","sourceRoot":"","sources":["../../../src/components/Tasks/Tasks.tsx"],"names":[],"mappings":";AAAA,OAAO,EAA+B,OAAO,EAAc,MAAM,OAAO,CAAC;AACzE,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,IAAI,EACJ,UAAU,EACV,WAAW,EACX,UAAU,EACV,IAAI,EACJ,IAAI,EACJ,WAAW,EACX,KAAK,EACL,MAAM,EACN,OAAO,EAGP,gBAAgB,EACjB,MAAM,yBAAyB,CAAC;AAEjC,OAAO,QAAQ,EAAE,EAAE,QAAQ,EAAiB,MAAM,YAAY,CAAC;AAmB/D,MAAM,WAAW,GAAG,MAAM,CAAC,IAAI,CAAC,CAAyB,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,EAAE;IAC/E,OAAO,QAAQ;QACb,CAAC,CAAC,GAAG,CAAA;sBACa,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG;OACpC;QACH,CAAC,CAAC,IAAI,CAAC;AACX,CAAC,CAAC,CAAC;AAEH,WAAW,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE5C,MAAM,KAAK,GAAkC,CAAC,KAAiB,EAAE,EAAE;IACjE,MAAM,EACJ,KAAK,GAAG,EAAE,EACV,UAAU,EACV,YAAY,EACZ,eAAe,EACf,KAAK,EACL,cAAc,EACd,gBAAgB,EAChB,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IACV,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IAClD,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,MAAM,SAAS,GAAG,OAAO,CAAC,GAAG,EAAE;QAC7B,OAAO,CAAC,QAAQ,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,GAAG,CAAC,CAAC;IAC7D,CAAC,EAAE,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC,CAAC;IAEtB,MAAM,SAAS,GAAG,OAAO,CAAC,GAAG,EAAE;QAC7B,OAAO,QAAQ,CAAC,CAAC,CAAC,KAAC,QAAQ,OAAK,QAAQ,GAAI,CAAC,CAAC,CAAC,KAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,GAAI,CAAC;IAClG,CAAC,EAAE,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEtB,OAAO,CACL,MAAC,WAAW,OAAK,SAAS,EAAE,QAAQ,EAAE,CAAC,CAAC,QAAQ,aAC7C,CAAC,QAAQ,IAAI,CACZ,KAAC,UAAU,cACT,KAAC,WAAW,IACV,MAAM,EAAE,YAAY,EACpB,OAAO,EACL,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,aAC/C,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,UAAU,GAAQ,EACtC,KAAC,KAAK,cAAE,KAAK,IAAI,IAAI,GAAS,IACzB,EAET,SAAS,EAAE,eAAe,GAC1B,GACS,CACd,EACD,KAAC,WAAW,cAAE,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,gBAAgB,GAAe,EAE3E,SAAS,IAAI,CACZ,KAAC,UAAU,IAAC,OAAO,EAAC,QAAQ,YAC1B,KAAC,MAAM,IACL,OAAO,EAAC,MAAM,gBACF,CAAC,CAAC,CAAC,CAAC,KAAK,IAAI,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,CAAC,EACrF,OAAO,EAAE,CAAC,CAAgC,EAAE,EAAE;wBAC5C,cAAc,EAAE,EAAE,CAAC;wBACnB,IAAI,CAAC,CAAC,KAAK,IAAI,KAAK,IAAI,KAAK,CAAC,MAAM,EAAE;4BACpC,MAAM,EAAE,aAAa,EAAE,GAAG,CAAC,CAAC;4BAC5B,qBAAqB,CAAC,GAAG,EAAE;gCACzB,IAAI,aAAa,CAAC,qBAAqB,EAAE,CAAC,GAAG,GAAG,CAAC;oCAAE,aAAa,CAAC,cAAc,EAAE,CAAC;4BACpF,CAAC,CAAC,CAAC;yBACJ;oBACH,CAAC,YAEA,CAAC,CAAC,CAAC,CAAC,KAAK,IAAI,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,GACxD,GACE,CACd,IACW,CACf,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,KAAK,CAAC","sourcesContent":["import { ReactNode, FC, ReactElement, useMemo, MouseEvent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n Card,\n CardHeader,\n CardContent,\n CardFooter,\n Flex,\n Text,\n SummaryItem,\n Count,\n Button,\n useI18n,\n ForwardProps,\n NoChildrenProp,\n defaultThemeProp\n} from '@pega/cosmos-react-core';\n\nimport TaskList, { TaskItem, TaskItemProps } from './TaskList';\n\nexport interface TasksProps extends NoChildrenProp {\n /** An array of TaskItemProps to generate the list. */\n items: TaskItemProps[];\n /** Content to render when the list is empty. */\n emptyPlaceholder: ReactNode;\n /** Heading text to render at the top of the list. */\n headerText: string;\n /** A visual element i.e. (Avatar | Icon) to accompany the header text. */\n headerVisual?: ReactElement;\n /** A region for supplemental task list info or controls. */\n headerSecondary?: ReactNode;\n /** Integer representing the total count of tasks. */\n count?: number | null;\n /** Callback for when to show more/less button is clicked. Lists greater than 3 items will display the show toggle button in its footer. */\n onExpandToggle?: () => void;\n}\n\nconst StyledTasks = styled(Card)<{ openItem?: boolean }>(({ theme, openItem }) => {\n return openItem\n ? css`\n box-shadow: ${theme.base.shadow.low};\n `\n : null;\n});\n\nStyledTasks.defaultProps = defaultThemeProp;\n\nconst Tasks: FC<ForwardProps & TasksProps> = (props: TasksProps) => {\n const {\n items = [],\n headerText,\n headerVisual,\n headerSecondary,\n count,\n onExpandToggle,\n emptyPlaceholder,\n ...restProps\n } = props;\n const openItem = items.find(item => item.content);\n const t = useI18n();\n\n const hasFooter = useMemo(() => {\n return !openItem && typeof count === 'number' && count > 3;\n }, [openItem, count]);\n\n const TaskItems = useMemo(() => {\n return openItem ? <TaskItem {...openItem} /> : <TaskList items={items} hasFooter={hasFooter} />;\n }, [items, openItem]);\n\n return (\n <StyledTasks {...restProps} openItem={!!openItem}>\n {!openItem && (\n <CardHeader>\n <SummaryItem\n visual={headerVisual}\n primary={\n <Flex container={{ alignItems: 'center', gap: 1 }}>\n <Text variant='h2'>{headerText}</Text>\n <Count>{count ?? null}</Count>\n </Flex>\n }\n secondary={headerSecondary}\n />\n </CardHeader>\n )}\n <CardContent>{items.length > 0 ? TaskItems : emptyPlaceholder}</CardContent>\n\n {hasFooter && (\n <CardFooter justify='center'>\n <Button\n variant='link'\n aria-label={t(!!count && count > items.length ? 'show_more' : 'show_less', ['tasks'])}\n onClick={(e: MouseEvent<HTMLButtonElement>) => {\n onExpandToggle?.();\n if (!!count && count <= items.length) {\n const { currentTarget } = e;\n requestAnimationFrame(() => {\n if (currentTarget.getBoundingClientRect().top < 0) currentTarget.scrollIntoView();\n });\n }\n }}\n >\n {t(!!count && count > items.length ? 'show_more' : 'show_less')}\n </Button>\n </CardFooter>\n )}\n </StyledTasks>\n );\n};\n\nexport default Tasks;\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pega/cosmos-react-work",
3
- "version": "3.0.0-dev.14.0",
3
+ "version": "3.0.0-dev.16.1",
4
4
  "author": "Pegasystems",
5
5
  "license": "SEE LICENSE IN LICENSE",
6
6
  "repository": {
@@ -20,7 +20,7 @@
20
20
  "build": "tsc -b"
21
21
  },
22
22
  "dependencies": {
23
- "@pega/cosmos-react-core": "3.0.0-dev.14.0",
23
+ "@pega/cosmos-react-core": "3.0.0-dev.16.1",
24
24
  "@types/react": "^16.14.24 || ^17.0.38",
25
25
  "@types/react-dom": "^16.9.14 || ^17.0.11",
26
26
  "@types/styled-components": "^5.1.7",
@@ -38,6 +38,9 @@
38
38
  "@storybook/react": "^6.4.19",
39
39
  "@storybook/testing-react": "^1.2.4",
40
40
  "@storybook/theming": "^6.4.19",
41
+ "@testing-library/jest-dom": "^5.16.2",
42
+ "@testing-library/react": "^12.1.3",
43
+ "@testing-library/user-event": "^13.5.0",
41
44
  "enzyme": "^3.11.0",
42
45
  "typescript": "~4.6.2"
43
46
  }
@@ -1,8 +0,0 @@
1
- import { FunctionComponent } from 'react';
2
- import { StepProps } from './Stages.types';
3
- interface StepsProps {
4
- steps?: StepProps[];
5
- }
6
- declare const Steps: FunctionComponent<StepsProps>;
7
- export default Steps;
8
- //# sourceMappingURL=Steps.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Steps.d.ts","sourceRoot":"","sources":["../../../src/components/Stages/Steps.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAmB,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAM3D,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAK3C,UAAU,UAAU;IAClB,KAAK,CAAC,EAAE,SAAS,EAAE,CAAC;CACrB;AAED,QAAA,MAAM,KAAK,EAAE,iBAAiB,CAAC,UAAU,CAcxC,CAAC;AAEF,eAAe,KAAK,CAAC"}
@@ -1,12 +0,0 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { Icon, registerIcon, Text, Grid } from '@pega/cosmos-react-core';
3
- import * as checkIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/check.icon';
4
- import * as circleSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/circle-solid.icon';
5
- import { StyledStep, StyledStepsContainer } from './Stages.styles';
6
- registerIcon(checkIcon, circleSolidIcon);
7
- const Steps = ({ steps }) => {
8
- return (_jsx(StyledStepsContainer, { children: steps &&
9
- steps.map(({ id, name, complete }) => (_jsx(StyledStep, { complete: complete, children: _jsxs(Grid, { container: { cols: '1.625rem 1fr' }, children: [_jsx(Icon, { name: complete ? 'check' : 'circle-solid' }), _jsx(Text, { children: name })] }) }, id))) }));
10
- };
11
- export default Steps;
12
- //# sourceMappingURL=Steps.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Steps.js","sourceRoot":"","sources":["../../../src/components/Stages/Steps.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AACzE,OAAO,KAAK,SAAS,MAAM,8DAA8D,CAAC;AAC1F,OAAO,KAAK,eAAe,MAAM,qEAAqE,CAAC;AAGvG,OAAO,EAAE,UAAU,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAEnE,YAAY,CAAC,SAAS,EAAE,eAAe,CAAC,CAAC;AAMzC,MAAM,KAAK,GAAkC,CAAC,EAAE,KAAK,EAA+B,EAAE,EAAE;IACtF,OAAO,CACL,KAAC,oBAAoB,cAClB,KAAK;YACJ,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CACpC,KAAC,UAAU,IAAU,QAAQ,EAAE,QAAQ,YACrC,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,IAAI,EAAE,cAAc,EAAE,aACvC,KAAC,IAAI,IAAC,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,cAAc,GAAI,EACnD,KAAC,IAAI,cAAE,IAAI,GAAQ,IACd,IAJQ,EAAE,CAKN,CACd,CAAC,GACiB,CACxB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,KAAK,CAAC","sourcesContent":["import { PropsWithoutRef, FunctionComponent } from 'react';\n\nimport { Icon, registerIcon, Text, Grid } from '@pega/cosmos-react-core';\nimport * as checkIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/check.icon';\nimport * as circleSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/circle-solid.icon';\n\nimport { StepProps } from './Stages.types';\nimport { StyledStep, StyledStepsContainer } from './Stages.styles';\n\nregisterIcon(checkIcon, circleSolidIcon);\n\ninterface StepsProps {\n steps?: StepProps[];\n}\n\nconst Steps: FunctionComponent<StepsProps> = ({ steps }: PropsWithoutRef<StepsProps>) => {\n return (\n <StyledStepsContainer>\n {steps &&\n steps.map(({ id, name, complete }) => (\n <StyledStep key={id} complete={complete}>\n <Grid container={{ cols: '1.625rem 1fr' }}>\n <Icon name={complete ? 'check' : 'circle-solid'} />\n <Text>{name}</Text>\n </Grid>\n </StyledStep>\n ))}\n </StyledStepsContainer>\n );\n};\n\nexport default Steps;\n"]}
@@ -1,8 +0,0 @@
1
- import { FunctionComponent } from 'react';
2
- import { StagesProps } from './Stages.types';
3
- export interface StepsContainerProps {
4
- currentStage: StagesProps['stages'];
5
- }
6
- declare const StepsContainer: FunctionComponent<StepsContainerProps>;
7
- export default StepsContainer;
8
- //# sourceMappingURL=StepsContainer.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"StepsContainer.d.ts","sourceRoot":"","sources":["../../../src/components/Stages/StepsContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAmB,MAAM,OAAO,CAAC;AAM3D,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAK7C,MAAM,WAAW,mBAAmB;IAClC,YAAY,EAAE,WAAW,CAAC,QAAQ,CAAC,CAAC;CACrC;AAED,QAAA,MAAM,cAAc,EAAE,iBAAiB,CAAC,mBAAmB,CAqB1D,CAAC;AAEF,eAAe,cAAc,CAAC"}
@@ -1,11 +0,0 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { Flex, Icon, registerIcon, DateTimeDisplay, Text } from '@pega/cosmos-react-core';
3
- import * as checkIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/check.icon';
4
- import Steps from './Steps';
5
- import { StyledDateTimeDisplay, StyledInnerStep, StyledSteps } from './Stages.styles';
6
- registerIcon(checkIcon);
7
- const StepsContainer = ({ currentStage }) => {
8
- return (_jsxs(Flex, { as: StyledSteps, container: { direction: 'column' }, item: { grow: 1 }, children: [_jsxs(StyledInnerStep, { complete: currentStage[0]?.complete, children: [currentStage[0]?.complete && _jsx(Icon, { name: 'check' }), _jsx(Text, { variant: 'h2', children: currentStage[0]?.name })] }), currentStage[0]?.date && (_jsx(DateTimeDisplay, { as: StyledDateTimeDisplay, value: currentStage[0]?.date, variant: 'relative', format: 'short' })), _jsx(Steps, { steps: currentStage[0].steps })] }));
9
- };
10
- export default StepsContainer;
11
- //# sourceMappingURL=StepsContainer.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"StepsContainer.js","sourceRoot":"","sources":["../../../src/components/Stages/StepsContainer.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,YAAY,EAAE,eAAe,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC1F,OAAO,KAAK,SAAS,MAAM,8DAA8D,CAAC;AAE1F,OAAO,KAAK,MAAM,SAAS,CAAC;AAE5B,OAAO,EAAE,qBAAqB,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAEtF,YAAY,CAAC,SAAS,CAAC,CAAC;AAMxB,MAAM,cAAc,GAA2C,CAAC,EAC9D,YAAY,EACyB,EAAE,EAAE;IACzC,OAAO,CACL,MAAC,IAAI,IAAC,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,aAC1E,MAAC,eAAe,IAAC,QAAQ,EAAE,YAAY,CAAC,CAAC,CAAC,EAAE,QAAQ,aACjD,YAAY,CAAC,CAAC,CAAC,EAAE,QAAQ,IAAI,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,GAAG,EACnD,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,YAAY,CAAC,CAAC,CAAC,EAAE,IAAI,GAAQ,IACjC,EACjB,YAAY,CAAC,CAAC,CAAC,EAAE,IAAI,IAAI,CACxB,KAAC,eAAe,IACd,EAAE,EAAE,qBAAqB,EACzB,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC,EAAE,IAAI,EAC5B,OAAO,EAAC,UAAU,EAClB,MAAM,EAAC,OAAO,GACd,CACH,EAED,KAAC,KAAK,IAAC,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC,KAAK,GAAI,IAClC,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["import { FunctionComponent, PropsWithoutRef } from 'react';\n\nimport { Flex, Icon, registerIcon, DateTimeDisplay, Text } from '@pega/cosmos-react-core';\nimport * as checkIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/check.icon';\n\nimport Steps from './Steps';\nimport { StagesProps } from './Stages.types';\nimport { StyledDateTimeDisplay, StyledInnerStep, StyledSteps } from './Stages.styles';\n\nregisterIcon(checkIcon);\n\nexport interface StepsContainerProps {\n currentStage: StagesProps['stages'];\n}\n\nconst StepsContainer: FunctionComponent<StepsContainerProps> = ({\n currentStage\n}: PropsWithoutRef<StepsContainerProps>) => {\n return (\n <Flex as={StyledSteps} container={{ direction: 'column' }} item={{ grow: 1 }}>\n <StyledInnerStep complete={currentStage[0]?.complete}>\n {currentStage[0]?.complete && <Icon name='check' />}\n <Text variant='h2'>{currentStage[0]?.name}</Text>\n </StyledInnerStep>\n {currentStage[0]?.date && (\n <DateTimeDisplay\n as={StyledDateTimeDisplay}\n value={currentStage[0]?.date}\n variant='relative'\n format='short'\n />\n )}\n\n <Steps steps={currentStage[0].steps} />\n </Flex>\n );\n};\n\nexport default StepsContainer;\n"]}