@popsure/dirty-swan 0.41.16 → 0.41.18

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 (19) hide show
  1. package/dist/cjs/index.d.ts +1 -1
  2. package/dist/cjs/index.js +2 -2
  3. package/dist/cjs/index.js.map +1 -1
  4. package/dist/cjs/lib/components/card/index.d.ts +1 -0
  5. package/dist/cjs/lib/components/card/index.stories.d.ts +7 -1
  6. package/dist/cjs/lib/index.d.ts +3 -2
  7. package/dist/esm/components/card/index.js +2 -2
  8. package/dist/esm/components/card/index.js.map +1 -1
  9. package/dist/esm/components/card/index.stories.js +6 -2
  10. package/dist/esm/components/card/index.stories.js.map +1 -1
  11. package/dist/esm/index.d.ts +1 -1
  12. package/dist/esm/lib/components/card/index.d.ts +1 -0
  13. package/dist/esm/lib/components/card/index.stories.d.ts +7 -1
  14. package/dist/esm/lib/index.d.ts +3 -2
  15. package/package.json +1 -1
  16. package/src/index.tsx +2 -0
  17. package/src/lib/components/card/index.stories.tsx +6 -0
  18. package/src/lib/components/card/index.tsx +3 -1
  19. package/src/lib/index.tsx +4 -1
package/dist/cjs/lib/components/card/index.d.ts CHANGED
@@ -21,6 +21,7 @@ export interface CardProps {
21
21
  label?: ReactNode;
22
22
  onClick?: () => void;
23
23
  actionIcon?: ReactNode;
24
+ showActionIcon?: boolean;
24
25
  }
25
26
  declare const Card: (props: CardProps) => JSX.Element;
26
27
  export { Card };
package/dist/cjs/lib/components/card/index.stories.d.ts CHANGED
@@ -37,6 +37,12 @@ declare const story: {
37
37
  description: string;
38
38
  };
39
39
  actionIcon: {
40
+ control: {
41
+ type: string;
42
+ };
43
+ description: string;
44
+ };
45
+ showActionIcon: {
40
46
  description: string;
41
47
  };
42
48
  };
@@ -61,7 +67,7 @@ declare const story: {
61
67
  };
62
68
  };
63
69
  export declare const CardStory: {
64
- ({ actionIcon, children, classNames, density, description, descriptionVariant, dropShadow, icon, label, onClick, title, titleVariant, }: CardProps): JSX.Element;
70
+ ({ actionIcon, showActionIcon, children, classNames, density, description, descriptionVariant, dropShadow, icon, label, onClick, title, titleVariant, }: CardProps): JSX.Element;
65
71
  storyName: string;
66
72
  };
67
73
  export declare const CardDensities: () => JSX.Element;
package/dist/cjs/lib/index.d.ts CHANGED
@@ -12,7 +12,7 @@ import { Checkbox } from './components/input/checkbox';
12
12
  import { Radio } from './components/input/radio';
13
13
  import { BottomModal, RegularModal, BottomOrRegularModal } from './components/modal';
14
14
  import { CardWithTopLeftIcon, CardWithLeftIcon, CardWithTopIcon, InfoCard, CardButton } from './components/cards';
15
- import { Card } from './components/card';
15
+ import { Card, CardProps } from './components/card';
16
16
  import { Button } from './components/button';
17
17
  import { AutoSuggestMultiSelect } from './components/input/autoSuggestMultiSelect';
18
18
  import Chip from './components/chip';
@@ -25,7 +25,8 @@ import { illustrations, images, IllustrationKeys } from './util/images';
25
25
  import { Spinner } from './components/spinner';
26
26
  import { Toggle } from './components/input/toggle';
27
27
  import { Toaster, toast } from './components/toast';
28
+ import { IconWrapperProps } from './components/icon/IconWrapper';
28
29
  export * from './components/icon';
29
30
  export { DateSelector, SignaturePad, AutocompleteAddress, Input, MultiDropzone, DownloadButton, IbanInput, BottomModal, RegularModal, BottomOrRegularModal, CardWithTopLeftIcon, CardWithLeftIcon, CardWithTopIcon, InfoCard, Card, CardButton, Button, CurrencyInput, AutoSuggestMultiSelect, Chip, AutoSuggestInput, ComparisonTable, TableRating, TableTrueFalse, TableRowHeader, TableButton, TableInfoButton, SegmentedControl, Markdown, Checkbox, Radio, Link, InformationBox, Badge, images, illustrations, Spinner, Toggle, Toaster, toast, };
30
- export type { IllustrationKeys, InformationBoxProps, FileType, MultiDropzoneProps, TableHeader, UploadedFile, UploadStatus, };
31
+ export type { IllustrationKeys, InformationBoxProps, FileType, MultiDropzoneProps, TableHeader, UploadedFile, UploadStatus, CardProps, IconWrapperProps };
31
32
  export type { DownloadStatus } from './models/download';
package/dist/esm/components/card/index.js CHANGED
@@ -11,7 +11,7 @@ var styles = {"button":"style-module_button__KWY7b","icon":"style-module_icon__N
11
11
  styleInject(css_248z);
12
12
 
13
13
  var CardContent = function (_a) {
14
- var children = _a.children, classNames$1 = _a.classNames, _b = _a.density, density = _b === void 0 ? 'balanced' : _b, description = _a.description, _c = _a.descriptionVariant, descriptionVariant = _c === void 0 ? 'large' : _c, _d = _a.dropShadow, dropShadow = _d === void 0 ? true : _d, icon = _a.icon, label = _a.label, onClick = _a.onClick, actionIcon = _a.actionIcon, title = _a.title, _e = _a.titleVariant, titleVariant = _e === void 0 ? 'large' : _e;
14
+ var children = _a.children, classNames$1 = _a.classNames, _b = _a.density, density = _b === void 0 ? 'balanced' : _b, description = _a.description, _c = _a.descriptionVariant, descriptionVariant = _c === void 0 ? 'large' : _c, _d = _a.dropShadow, dropShadow = _d === void 0 ? true : _d, icon = _a.icon, label = _a.label, onClick = _a.onClick, actionIcon = _a.actionIcon, title = _a.title, _e = _a.titleVariant, titleVariant = _e === void 0 ? 'large' : _e, showActionIcon = _a.showActionIcon;
15
15
  var hideActionIcon = typeof actionIcon !== 'undefined' && !actionIcon;
16
16
  return (jsxs("section", __assign({ className: classNames('d-flex fd-column jc-center br8 bg-white w100 ta-left', { 'bs-sm': dropShadow }, {
17
17
  compact: 'p16',
@@ -25,7 +25,7 @@ var CardContent = function (_a) {
25
25
  small: 'p-p',
26
26
  }[titleVariant]) }, { children: title }), void 0)),
27
27
  description && (jsx("div", __assign({ className: classNames('tc-grey-600', classNames$1 === null || classNames$1 === void 0 ? void 0 : classNames$1.description, descriptionVariant === 'small' ? 'p-p--small' : 'p-p') }, { children: description }), void 0))] }), void 0),
28
- onClick && !hideActionIcon && (jsx("div", __assign({ className: classNames(styles.actionIcon, classNames$1 === null || classNames$1 === void 0 ? void 0 : classNames$1.actionIcon, styles["actionIcon" + density], 'd-flex ai-center') }, { children: actionIcon || jsx(ChevronRightIcon, { size: 24 }, void 0) }), void 0))] }), void 0)] }), void 0),
28
+ (showActionIcon || (onClick && !hideActionIcon)) && (jsx("div", __assign({ className: classNames(styles.actionIcon, classNames$1 === null || classNames$1 === void 0 ? void 0 : classNames$1.actionIcon, styles["actionIcon" + density], 'd-flex ai-center') }, { children: actionIcon || jsx(ChevronRightIcon, { size: 24 }, void 0) }), void 0))] }), void 0)] }), void 0),
29
29
  children && jsx("div", __assign({ className: classNames$1 === null || classNames$1 === void 0 ? void 0 : classNames$1.children }, { children: children }), void 0)] }), void 0));
30
30
  };
31
31
  var Card = function (props) {
package/dist/esm/components/card/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../../../../../src/lib/components/card/index.tsx"],"sourcesContent":["import { ReactNode } from 'react';\nimport classNamesUtil from 'classnames';\nimport { ChevronRightIcon } from '../icon';\n\nimport styles from './style.module.scss';\n\nexport interface CardProps {\n children?: ReactNode;\n classNames?: {\n buttonWrapper?: string;\n wrapper?: string;\n label?: string;\n title?: string;\n description?: string;\n children?: string;\n icon?: string;\n actionIcon?: string;\n };\n density?: 'balanced' | 'compact' | 'spacious';\n dropShadow?: boolean;\n icon?: ReactNode;\n title?: ReactNode;\n titleVariant?: 'small' | 'medium' | 'large';\n description?: ReactNode;\n descriptionVariant?: 'small' | 'large';\n label?: ReactNode;\n onClick?: () => void;\n actionIcon?: ReactNode;\n}\n\nconst CardContent = ({\n children,\n classNames,\n density = 'balanced',\n description,\n descriptionVariant = 'large',\n dropShadow = true,\n icon,\n label,\n onClick,\n actionIcon,\n title,\n titleVariant = 'large',\n}: CardProps) => {\n const hideActionIcon = typeof actionIcon !== 'undefined' && !actionIcon;\n\n return (\n <section\n className={classNamesUtil(\n 'd-flex fd-column jc-center br8 bg-white w100 ta-left',\n { 'bs-sm': dropShadow },\n {\n compact: 'p16',\n balanced: 'p24',\n spacious: 'p32',\n }[density],\n classNames?.wrapper\n )}\n >\n <div className=\"d-flex w100\">\n {icon && (\n <div\n className={classNamesUtil(\n `d-flex ai-center tc-primary-500`,\n styles.icon,\n styles[`icon${density}`],\n classNames?.icon\n )}\n >\n {icon}\n </div>\n )}\n\n <div className=\"d-flex jc-between w100\">\n <div className=\"d-flex jc-center gap8 fd-column tc-grey-900 w100\">\n {label && (\n <h3 className={classNamesUtil('p-p--small', classNames?.label)}>\n {label}\n </h3>\n )}\n\n {title && (\n <h2\n className={classNamesUtil(\n classNames?.title,\n {\n large: 'p-h3',\n medium: 'p-h4',\n small: 'p-p',\n }[titleVariant]\n )}\n >\n {title}\n </h2>\n )}\n\n {description && (\n <div\n className={classNamesUtil(\n 'tc-grey-600',\n classNames?.description,\n descriptionVariant === 'small' ? 'p-p--small' : 'p-p'\n )}\n >\n {description}\n </div>\n )}\n </div>\n\n {onClick && !hideActionIcon && (\n <div\n className={classNamesUtil(\n styles.actionIcon,\n classNames?.actionIcon,\n styles[`actionIcon${density}`],\n 'd-flex ai-center'\n )}\n >\n {actionIcon || <ChevronRightIcon size={24} />}\n </div>\n )}\n </div>\n </div>\n\n {children && <div className={classNames?.children}>{children}</div>}\n </section>\n );\n};\n\nconst Card = (props: CardProps) => {\n const { onClick } = props;\n\n if (onClick) {\n return (\n <button\n className={classNamesUtil(\n 'c-pointer d-flex w100 br8 ai-stretch',\n styles.button,\n props.classNames?.buttonWrapper\n )}\n onClick={onClick}\n type=\"button\"\n >\n <CardContent {...props} />\n </button>\n );\n }\n\n return <CardContent {...props} />;\n};\n\nexport { Card };\n"],"names":["classNames","_jsxs","classNamesUtil","_jsx"],"mappings":"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"}
1
+ {"version":3,"file":"index.js","sources":["../../../../../src/lib/components/card/index.tsx"],"sourcesContent":["import { ReactNode } from 'react';\nimport classNamesUtil from 'classnames';\nimport { ChevronRightIcon } from '../icon';\n\nimport styles from './style.module.scss';\n\nexport interface CardProps {\n children?: ReactNode;\n classNames?: {\n buttonWrapper?: string;\n wrapper?: string;\n label?: string;\n title?: string;\n description?: string;\n children?: string;\n icon?: string;\n actionIcon?: string;\n };\n density?: 'balanced' | 'compact' | 'spacious';\n dropShadow?: boolean;\n icon?: ReactNode;\n title?: ReactNode;\n titleVariant?: 'small' | 'medium' | 'large';\n description?: ReactNode;\n descriptionVariant?: 'small' | 'large';\n label?: ReactNode;\n onClick?: () => void;\n actionIcon?: ReactNode;\n showActionIcon?: boolean;\n}\n\nconst CardContent = ({\n children,\n classNames,\n density = 'balanced',\n description,\n descriptionVariant = 'large',\n dropShadow = true,\n icon,\n label,\n onClick,\n actionIcon,\n title,\n titleVariant = 'large',\n showActionIcon\n}: CardProps) => {\n const hideActionIcon = typeof actionIcon !== 'undefined' && !actionIcon;\n\n return (\n <section\n className={classNamesUtil(\n 'd-flex fd-column jc-center br8 bg-white w100 ta-left',\n { 'bs-sm': dropShadow },\n {\n compact: 'p16',\n balanced: 'p24',\n spacious: 'p32',\n }[density],\n classNames?.wrapper\n )}\n >\n <div className=\"d-flex w100\">\n {icon && (\n <div\n className={classNamesUtil(\n `d-flex ai-center tc-primary-500`,\n styles.icon,\n styles[`icon${density}`],\n classNames?.icon\n )}\n >\n {icon}\n </div>\n )}\n\n <div className=\"d-flex jc-between w100\">\n <div className=\"d-flex jc-center gap8 fd-column tc-grey-900 w100\">\n {label && (\n <h3 className={classNamesUtil('p-p--small', classNames?.label)}>\n {label}\n </h3>\n )}\n\n {title && (\n <h2\n className={classNamesUtil(\n classNames?.title,\n {\n large: 'p-h3',\n medium: 'p-h4',\n small: 'p-p',\n }[titleVariant]\n )}\n >\n {title}\n </h2>\n )}\n\n {description && (\n <div\n className={classNamesUtil(\n 'tc-grey-600',\n classNames?.description,\n descriptionVariant === 'small' ? 'p-p--small' : 'p-p'\n )}\n >\n {description}\n </div>\n )}\n </div>\n\n {(showActionIcon || (onClick && !hideActionIcon)) && (\n <div\n className={classNamesUtil(\n styles.actionIcon,\n classNames?.actionIcon,\n styles[`actionIcon${density}`],\n 'd-flex ai-center'\n )}\n >\n {actionIcon || <ChevronRightIcon size={24} />}\n </div>\n )}\n </div>\n </div>\n\n {children && <div className={classNames?.children}>{children}</div>}\n </section>\n );\n};\n\nconst Card = (props: CardProps) => {\n const { onClick } = props;\n\n if (onClick) {\n return (\n <button\n className={classNamesUtil(\n 'c-pointer d-flex w100 br8 ai-stretch',\n styles.button,\n props.classNames?.buttonWrapper\n )}\n onClick={onClick}\n type=\"button\"\n >\n <CardContent {...props} />\n </button>\n );\n }\n\n return <CardContent {...props} />;\n};\n\nexport { Card };\n"],"names":["classNames","_jsxs","classNamesUtil","_jsx"],"mappings":"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"}
package/dist/esm/components/card/index.stories.js CHANGED
@@ -50,8 +50,12 @@ var story = {
50
50
  description: 'Wether to display card with drop shadow styles or not.',
51
51
  },
52
52
  actionIcon: {
53
+ control: { type: 'text' },
53
54
  description: 'ReactNode to be rendered on the right side of the card when there is an onClick action. By default it renders the ChevronRightIcon.',
54
55
  },
56
+ showActionIcon: {
57
+ description: 'Property that always displays action icon even if no onClick is set.',
58
+ },
55
59
  },
56
60
  args: {
57
61
  density: 'balanced',
@@ -74,8 +78,8 @@ var story = {
74
78
  }
75
79
  };
76
80
  var CardStory = function (_a) {
77
- var actionIcon = _a.actionIcon, children = _a.children, classNames = _a.classNames, density = _a.density, description = _a.description, descriptionVariant = _a.descriptionVariant, dropShadow = _a.dropShadow, icon = _a.icon, label = _a.label, onClick = _a.onClick, title = _a.title, titleVariant = _a.titleVariant;
78
- return (jsx("div", __assign({ className: 'd-flex p24 bg-grey-200' }, { children: jsx(Card, __assign({ classNames: classNames, description: description, descriptionVariant: descriptionVariant, density: density, dropShadow: dropShadow, icon: icon, label: label, title: title, titleVariant: titleVariant, onClick: onClick, actionIcon: actionIcon }, { children: children }), void 0) }), void 0));
81
+ var actionIcon = _a.actionIcon, showActionIcon = _a.showActionIcon, children = _a.children, classNames = _a.classNames, density = _a.density, description = _a.description, descriptionVariant = _a.descriptionVariant, dropShadow = _a.dropShadow, icon = _a.icon, label = _a.label, onClick = _a.onClick, title = _a.title, titleVariant = _a.titleVariant;
82
+ return (jsx("div", __assign({ className: 'd-flex p24 bg-grey-200' }, { children: jsx(Card, __assign({ classNames: classNames, description: description, descriptionVariant: descriptionVariant, density: density, dropShadow: dropShadow, icon: icon, label: label, title: title, titleVariant: titleVariant, onClick: onClick, actionIcon: actionIcon, showActionIcon: showActionIcon }, { children: children }), void 0) }), void 0));
79
83
  };
80
84
  CardStory.storyName = "Card";
81
85
  var CardDensities = function () { return (jsxs("div", __assign({ className: 'd-flex fd-column gap16 p24 bg-grey-200' }, { children: [jsx(Card, { title: 'Card density: Compact', density: 'compact' }, void 0),
package/dist/esm/components/card/index.stories.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.stories.js","sources":["../../../../../src/lib/components/card/index.stories.tsx"],"sourcesContent":["import { Card, CardProps } from '.';\nimport { illustrations } from '../../util/images';\nimport { Button } from '../button';\nimport { Badge } from '../badge';\nimport { CheckIcon, MehIcon, PlusCircleIcon, XIcon } from '../icon';\n\nconst story = {\n title: 'JSX/Card',\n component: Card,\n argTypes: {\n density: {\n description: 'Spacing around the card'\n },\n label: {\n description: 'Content to be rendered as label'\n },\n title: {\n description: 'Content to be rendered as title'\n },\n titleVariant: {\n description: 'Variant that allows changing title sizing styles.'\n },\n description: {\n description: 'Content to be rendered as description'\n },\n descriptionVariant: {\n description: 'Variant that allows changing description sizing styles.'\n },\n icon: {\n description: 'ReactNode to be rendered on the left side of the card',\n },\n children: {\n control: { type: 'text' },\n description: 'Content that is displayed inside the card under the pre-defined props',\n },\n onClick: {\n description: 'On click action to be triggered on card click.',\n },\n dropShadow: {\n description: 'Wether to display card with drop shadow styles or not.',\n },\n actionIcon: {\n description: 'ReactNode to be rendered on the right side of the card when there is an onClick action. By default it renders the ChevronRightIcon.',\n },\n },\n args: {\n density: 'balanced',\n description: 'Believe you’re a great fit but can’t find a position listed for your skill set? We’d love to hear from you!',\n descriptionVariant: 'large',\n label: 'Label',\n title: 'Honest, simple insurance',\n titleVariant: 'large',\n icon: 'ABC',\n children: '',\n classNames: {\n wrapper: '',\n label: '',\n title: '',\n description: '',\n children: '',\n icon: ''\n },\n dropShadow: true,\n }\n};\n\nexport const CardStory = ({ \n actionIcon,\n children,\n classNames,\n density,\n description,\n descriptionVariant,\n dropShadow,\n icon,\n label,\n onClick,\n title,\n titleVariant,\n}: CardProps) => (\n <div className='d-flex p24 bg-grey-200'>\n <Card\n classNames={classNames}\n description={description}\n descriptionVariant={descriptionVariant}\n density={density}\n dropShadow={dropShadow}\n icon={icon}\n label={label}\n title={title}\n titleVariant={titleVariant}\n onClick={onClick}\n actionIcon={actionIcon}\n >\n {children}\n </Card>\n </div>\n);\n\nCardStory.storyName = \"Card\";\n\nexport const CardDensities = () => (\n <div className='d-flex fd-column gap16 p24 bg-grey-200'>\n <Card\n title={'Card density: Compact'}\n density='compact'\n />\n <Card\n title={'Card density: Balanced'}\n density='balanced'\n />\n <Card\n title={'Card density: Spacious'}\n density='spacious'\n />\n </div>\n);\n\nexport const CardsWithIcons = ({ \n children,\n icon,\n title,\n}: CardProps) => (\n <div className='d-flex gap16 p24 bg-grey-200'>\n <Card\n icon={\n <img\n alt=\"\"\n src={illustrations.aids}\n width={24}\n />\n }\n title={title}\n />\n <Card\n icon={<MehIcon size={24} />}\n title={title}\n />\n </div>\n);\n\nexport const CardWithOnClickAction = ({ \n children,\n icon,\n title,\n}: CardProps) => (\n <div className='d-flex p24 bg-grey-200'>\n <Card\n icon={\n <img\n alt=\"\"\n src={illustrations.aids}\n width={24}\n />\n }\n title={title}\n titleVariant={'medium'}\n onClick={() => {}}\n >\n {children}\n </Card>\n </div>\n);\n\nexport const CardOverridesStyles = ({ \n children,\n label,\n title,\n}: CardProps) => (\n <div className='d-flex p24 bg-grey-200'>\n <Card\n label={label}\n title={title}\n titleVariant={'medium'}\n icon={<PlusCircleIcon color=\"grey-100\" size={32} />}\n classNames={{ \n wrapper: 'bg-grey-700',\n label: 'tc-white',\n title: 'tc-white'\n }}\n >\n {children}\n </Card>\n </div>\n);\n\nexport const CardsWithinCardsAndComplexLayout = ({ \n children,\n label,\n title,\n}: CardProps) => (\n <div className='d-flex p24 bg-grey-200'>\n <Card\n label={(\n <Badge size='small' variant='success'>\n Active\n </Badge>\n )}\n title={(\n <div className='d-flex jc-between ai-center w100'>\n Coverage overview\n\n <Button\n onClick={() => {}}\n variant='filledGray'\n >\n Full coverage details\n </Button>\n </div>\n )}\n >\n <div className='d-flex gap16 mt16'>\n <Card\n description=\"Lost keys\"\n classNames={{ wrapper: 'bg-grey-300' }}\n icon={<CheckIcon color={'primary-500'} />}\n density='compact'\n />\n <Card\n description=\"Broken glass\"\n classNames={{ wrapper: 'bg-grey-300' }}\n icon={<XIcon color={'primary-500'} />}\n density='compact'\n />\n </div>\n \n <div className='d-flex gap16 mt16'>\n <Card\n description=\"Damage to property\"\n classNames={{ wrapper: 'bg-grey-300' }}\n icon={<CheckIcon color={'primary-500'} />}\n density='compact'\n />\n <Card\n description=\"Drones\"\n classNames={{ wrapper: 'bg-grey-300' }}\n icon={<XIcon color={'primary-500'} />}\n density='compact'\n />\n </div>\n </Card>\n </div>\n);\n\nexport default story;\n"],"names":["_jsx","_jsxs"],"mappings":"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"}
1
+ {"version":3,"file":"index.stories.js","sources":["../../../../../src/lib/components/card/index.stories.tsx"],"sourcesContent":["import { Card, CardProps } from '.';\nimport { illustrations } from '../../util/images';\nimport { Button } from '../button';\nimport { Badge } from '../badge';\nimport { CheckIcon, MehIcon, PlusCircleIcon, XIcon } from '../icon';\n\nconst story = {\n title: 'JSX/Card',\n component: Card,\n argTypes: {\n density: {\n description: 'Spacing around the card'\n },\n label: {\n description: 'Content to be rendered as label'\n },\n title: {\n description: 'Content to be rendered as title'\n },\n titleVariant: {\n description: 'Variant that allows changing title sizing styles.'\n },\n description: {\n description: 'Content to be rendered as description'\n },\n descriptionVariant: {\n description: 'Variant that allows changing description sizing styles.'\n },\n icon: {\n description: 'ReactNode to be rendered on the left side of the card',\n },\n children: {\n control: { type: 'text' },\n description: 'Content that is displayed inside the card under the pre-defined props',\n },\n onClick: {\n description: 'On click action to be triggered on card click.',\n },\n dropShadow: {\n description: 'Wether to display card with drop shadow styles or not.',\n },\n actionIcon: {\n control: { type: 'text' },\n description: 'ReactNode to be rendered on the right side of the card when there is an onClick action. By default it renders the ChevronRightIcon.',\n },\n showActionIcon: {\n description: 'Property that always displays action icon even if no onClick is set.',\n },\n },\n args: {\n density: 'balanced',\n description: 'Believe you’re a great fit but can’t find a position listed for your skill set? We’d love to hear from you!',\n descriptionVariant: 'large',\n label: 'Label',\n title: 'Honest, simple insurance',\n titleVariant: 'large',\n icon: 'ABC',\n children: '',\n classNames: {\n wrapper: '',\n label: '',\n title: '',\n description: '',\n children: '',\n icon: ''\n },\n dropShadow: true,\n }\n};\n\nexport const CardStory = ({ \n actionIcon,\n showActionIcon,\n children,\n classNames,\n density,\n description,\n descriptionVariant,\n dropShadow,\n icon,\n label,\n onClick,\n title,\n titleVariant,\n}: CardProps) => (\n <div className='d-flex p24 bg-grey-200'>\n <Card\n classNames={classNames}\n description={description}\n descriptionVariant={descriptionVariant}\n density={density}\n dropShadow={dropShadow}\n icon={icon}\n label={label}\n title={title}\n titleVariant={titleVariant}\n onClick={onClick}\n actionIcon={actionIcon}\n showActionIcon={showActionIcon}\n >\n {children}\n </Card>\n </div>\n);\n\nCardStory.storyName = \"Card\";\n\nexport const CardDensities = () => (\n <div className='d-flex fd-column gap16 p24 bg-grey-200'>\n <Card\n title={'Card density: Compact'}\n density='compact'\n />\n <Card\n title={'Card density: Balanced'}\n density='balanced'\n />\n <Card\n title={'Card density: Spacious'}\n density='spacious'\n />\n </div>\n);\n\nexport const CardsWithIcons = ({ \n children,\n icon,\n title,\n}: CardProps) => (\n <div className='d-flex gap16 p24 bg-grey-200'>\n <Card\n icon={\n <img\n alt=\"\"\n src={illustrations.aids}\n width={24}\n />\n }\n title={title}\n />\n <Card\n icon={<MehIcon size={24} />}\n title={title}\n />\n </div>\n);\n\nexport const CardWithOnClickAction = ({ \n children,\n icon,\n title,\n}: CardProps) => (\n <div className='d-flex p24 bg-grey-200'>\n <Card\n icon={\n <img\n alt=\"\"\n src={illustrations.aids}\n width={24}\n />\n }\n title={title}\n titleVariant={'medium'}\n onClick={() => {}}\n >\n {children}\n </Card>\n </div>\n);\n\nexport const CardOverridesStyles = ({ \n children,\n label,\n title,\n}: CardProps) => (\n <div className='d-flex p24 bg-grey-200'>\n <Card\n label={label}\n title={title}\n titleVariant={'medium'}\n icon={<PlusCircleIcon color=\"grey-100\" size={32} />}\n classNames={{ \n wrapper: 'bg-grey-700',\n label: 'tc-white',\n title: 'tc-white'\n }}\n >\n {children}\n </Card>\n </div>\n);\n\nexport const CardsWithinCardsAndComplexLayout = ({ \n children,\n label,\n title,\n}: CardProps) => (\n <div className='d-flex p24 bg-grey-200'>\n <Card\n label={(\n <Badge size='small' variant='success'>\n Active\n </Badge>\n )}\n title={(\n <div className='d-flex jc-between ai-center w100'>\n Coverage overview\n\n <Button\n onClick={() => {}}\n variant='filledGray'\n >\n Full coverage details\n </Button>\n </div>\n )}\n >\n <div className='d-flex gap16 mt16'>\n <Card\n description=\"Lost keys\"\n classNames={{ wrapper: 'bg-grey-300' }}\n icon={<CheckIcon color={'primary-500'} />}\n density='compact'\n />\n <Card\n description=\"Broken glass\"\n classNames={{ wrapper: 'bg-grey-300' }}\n icon={<XIcon color={'primary-500'} />}\n density='compact'\n />\n </div>\n \n <div className='d-flex gap16 mt16'>\n <Card\n description=\"Damage to property\"\n classNames={{ wrapper: 'bg-grey-300' }}\n icon={<CheckIcon color={'primary-500'} />}\n density='compact'\n />\n <Card\n description=\"Drones\"\n classNames={{ wrapper: 'bg-grey-300' }}\n icon={<XIcon color={'primary-500'} />}\n density='compact'\n />\n </div>\n </Card>\n </div>\n);\n\nexport default story;\n"],"names":["_jsx","_jsxs"],"mappings":"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"}
package/dist/esm/index.d.ts CHANGED
@@ -1,3 +1,3 @@
1
1
  export { DateSelector, SignaturePad, AutocompleteAddress, Input, MultiDropzone, IbanInput, CurrencyInput, BottomModal, RegularModal, BottomOrRegularModal, CardWithTopLeftIcon, CardWithLeftIcon, CardWithTopIcon, InfoCard, CardButton, Card, Button, AutoSuggestMultiSelect, Chip, AutoSuggestInput, ComparisonTable, TableRating, TableTrueFalse, TableRowHeader, TableButton, TableInfoButton, SegmentedControl, DownloadButton, Markdown, Checkbox, Radio, Link, InformationBox, Badge, images, illustrations, Spinner, Toggle, Toaster, toast, } from './lib';
2
2
  export * from './lib/components/icon';
3
- export type { DownloadStatus, InformationBoxProps, IllustrationKeys, FileType, MultiDropzoneProps, TableHeader, UploadedFile, UploadStatus, } from './lib';
3
+ export type { DownloadStatus, InformationBoxProps, IllustrationKeys, FileType, MultiDropzoneProps, TableHeader, UploadedFile, UploadStatus, CardProps, IconWrapperProps } from './lib';
package/dist/esm/lib/components/card/index.d.ts CHANGED
@@ -21,6 +21,7 @@ export interface CardProps {
21
21
  label?: ReactNode;
22
22
  onClick?: () => void;
23
23
  actionIcon?: ReactNode;
24
+ showActionIcon?: boolean;
24
25
  }
25
26
  declare const Card: (props: CardProps) => JSX.Element;
26
27
  export { Card };
package/dist/esm/lib/components/card/index.stories.d.ts CHANGED
@@ -37,6 +37,12 @@ declare const story: {
37
37
  description: string;
38
38
  };
39
39
  actionIcon: {
40
+ control: {
41
+ type: string;
42
+ };
43
+ description: string;
44
+ };
45
+ showActionIcon: {
40
46
  description: string;
41
47
  };
42
48
  };
@@ -61,7 +67,7 @@ declare const story: {
61
67
  };
62
68
  };
63
69
  export declare const CardStory: {
64
- ({ actionIcon, children, classNames, density, description, descriptionVariant, dropShadow, icon, label, onClick, title, titleVariant, }: CardProps): JSX.Element;
70
+ ({ actionIcon, showActionIcon, children, classNames, density, description, descriptionVariant, dropShadow, icon, label, onClick, title, titleVariant, }: CardProps): JSX.Element;
65
71
  storyName: string;
66
72
  };
67
73
  export declare const CardDensities: () => JSX.Element;
package/dist/esm/lib/index.d.ts CHANGED
@@ -12,7 +12,7 @@ import { Checkbox } from './components/input/checkbox';
12
12
  import { Radio } from './components/input/radio';
13
13
  import { BottomModal, RegularModal, BottomOrRegularModal } from './components/modal';
14
14
  import { CardWithTopLeftIcon, CardWithLeftIcon, CardWithTopIcon, InfoCard, CardButton } from './components/cards';
15
- import { Card } from './components/card';
15
+ import { Card, CardProps } from './components/card';
16
16
  import { Button } from './components/button';
17
17
  import { AutoSuggestMultiSelect } from './components/input/autoSuggestMultiSelect';
18
18
  import Chip from './components/chip';
@@ -25,7 +25,8 @@ import { illustrations, images, IllustrationKeys } from './util/images';
25
25
  import { Spinner } from './components/spinner';
26
26
  import { Toggle } from './components/input/toggle';
27
27
  import { Toaster, toast } from './components/toast';
28
+ import { IconWrapperProps } from './components/icon/IconWrapper';
28
29
  export * from './components/icon';
29
30
  export { DateSelector, SignaturePad, AutocompleteAddress, Input, MultiDropzone, DownloadButton, IbanInput, BottomModal, RegularModal, BottomOrRegularModal, CardWithTopLeftIcon, CardWithLeftIcon, CardWithTopIcon, InfoCard, Card, CardButton, Button, CurrencyInput, AutoSuggestMultiSelect, Chip, AutoSuggestInput, ComparisonTable, TableRating, TableTrueFalse, TableRowHeader, TableButton, TableInfoButton, SegmentedControl, Markdown, Checkbox, Radio, Link, InformationBox, Badge, images, illustrations, Spinner, Toggle, Toaster, toast, };
30
- export type { IllustrationKeys, InformationBoxProps, FileType, MultiDropzoneProps, TableHeader, UploadedFile, UploadStatus, };
31
+ export type { IllustrationKeys, InformationBoxProps, FileType, MultiDropzoneProps, TableHeader, UploadedFile, UploadStatus, CardProps, IconWrapperProps };
31
32
  export type { DownloadStatus } from './models/download';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@popsure/dirty-swan",
3
- "version": "0.41.16",
3
+ "version": "0.41.18",
4
4
  "author": "Vincent Audoire <vincent@getpopsure.com>",
5
5
  "license": "MIT",
6
6
  "private": false,
package/src/index.tsx CHANGED
@@ -55,6 +55,8 @@ export type {
55
55
  TableHeader,
56
56
  UploadedFile,
57
57
  UploadStatus,
58
+ CardProps,
59
+ IconWrapperProps
58
60
  } from './lib';
59
61
 
60
62
  ReactDOM.render(<App />, document.getElementById('root'));
package/src/lib/components/card/index.stories.tsx CHANGED
@@ -40,8 +40,12 @@ const story = {
40
40
  description: 'Wether to display card with drop shadow styles or not.',
41
41
  },
42
42
  actionIcon: {
43
+ control: { type: 'text' },
43
44
  description: 'ReactNode to be rendered on the right side of the card when there is an onClick action. By default it renders the ChevronRightIcon.',
44
45
  },
46
+ showActionIcon: {
47
+ description: 'Property that always displays action icon even if no onClick is set.',
48
+ },
45
49
  },
46
50
  args: {
47
51
  density: 'balanced',
@@ -66,6 +70,7 @@ const story = {
66
70
 
67
71
  export const CardStory = ({
68
72
  actionIcon,
73
+ showActionIcon,
69
74
  children,
70
75
  classNames,
71
76
  density,
@@ -91,6 +96,7 @@ export const CardStory = ({
91
96
  titleVariant={titleVariant}
92
97
  onClick={onClick}
93
98
  actionIcon={actionIcon}
99
+ showActionIcon={showActionIcon}
94
100
  >
95
101
  {children}
96
102
  </Card>
package/src/lib/components/card/index.tsx CHANGED
@@ -26,6 +26,7 @@ export interface CardProps {
26
26
  label?: ReactNode;
27
27
  onClick?: () => void;
28
28
  actionIcon?: ReactNode;
29
+ showActionIcon?: boolean;
29
30
  }
30
31
 
31
32
  const CardContent = ({
@@ -41,6 +42,7 @@ const CardContent = ({
41
42
  actionIcon,
42
43
  title,
43
44
  titleVariant = 'large',
45
+ showActionIcon
44
46
  }: CardProps) => {
45
47
  const hideActionIcon = typeof actionIcon !== 'undefined' && !actionIcon;
46
48
 
@@ -107,7 +109,7 @@ const CardContent = ({
107
109
  )}
108
110
  </div>
109
111
 
110
- {onClick && !hideActionIcon && (
112
+ {(showActionIcon || (onClick && !hideActionIcon)) && (
111
113
  <div
112
114
  className={classNamesUtil(
113
115
  styles.actionIcon,
package/src/lib/index.tsx CHANGED
@@ -28,7 +28,7 @@ import {
28
28
  InfoCard,
29
29
  CardButton,
30
30
  } from './components/cards';
31
- import { Card } from './components/card';
31
+ import { Card, CardProps } from './components/card';
32
32
  import { Button } from './components/button';
33
33
  import { AutoSuggestMultiSelect } from './components/input/autoSuggestMultiSelect';
34
34
  import Chip from './components/chip';
@@ -49,6 +49,7 @@ import { illustrations, images, IllustrationKeys } from './util/images';
49
49
  import { Spinner } from './components/spinner';
50
50
  import { Toggle } from './components/input/toggle';
51
51
  import { Toaster, toast } from './components/toast';
52
+ import { IconWrapperProps } from './components/icon/IconWrapper';
52
53
 
53
54
  export * from './components/icon';
54
55
 
@@ -103,6 +104,8 @@ export type {
103
104
  TableHeader,
104
105
  UploadedFile,
105
106
  UploadStatus,
107
+ CardProps,
108
+ IconWrapperProps
106
109
  };
107
110
 
108
111
  export type { DownloadStatus } from './models/download';