@popsure/dirty-swan 0.41.18 → 0.41.19-alpha

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 (16) hide show
  1. package/dist/cjs/index.js +4 -3
  2. package/dist/cjs/index.js.map +1 -1
  3. package/dist/cjs/lib/components/card/index.d.ts +6 -3
  4. package/dist/cjs/lib/components/card/index.stories.d.ts +10 -3
  5. package/dist/cjs/lib/index.d.ts +2 -2
  6. package/dist/esm/components/card/index.js +4 -3
  7. package/dist/esm/components/card/index.js.map +1 -1
  8. package/dist/esm/components/card/index.stories.js +10 -9
  9. package/dist/esm/components/card/index.stories.js.map +1 -1
  10. package/dist/esm/lib/components/card/index.d.ts +6 -3
  11. package/dist/esm/lib/components/card/index.stories.d.ts +10 -3
  12. package/dist/esm/lib/index.d.ts +2 -2
  13. package/package.json +1 -1
  14. package/src/lib/components/card/index.stories.tsx +7 -5
  15. package/src/lib/components/card/index.tsx +15 -10
  16. package/src/lib/index.tsx +2 -1
package/dist/cjs/lib/components/card/index.d.ts CHANGED
@@ -1,5 +1,8 @@
1
- import { ReactNode } from 'react';
2
- export interface CardProps {
1
+ import { ElementType, ReactNode } from 'react';
2
+ declare const CardDefault: "button";
3
+ declare type CardDefaultAsType = typeof CardDefault;
4
+ export interface CardProps<E extends ElementType = CardDefaultAsType> {
5
+ as?: E;
3
6
  children?: ReactNode;
4
7
  classNames?: {
5
8
  buttonWrapper?: string;
@@ -23,5 +26,5 @@ export interface CardProps {
23
26
  actionIcon?: ReactNode;
24
27
  showActionIcon?: boolean;
25
28
  }
26
- declare const Card: (props: CardProps) => JSX.Element;
29
+ declare const Card: <E extends ElementType<any> = "button">(props: CardProps<E>) => JSX.Element;
27
30
  export { Card };
package/dist/cjs/lib/components/card/index.stories.d.ts CHANGED
@@ -1,8 +1,15 @@
1
+ /// <reference types="react" />
1
2
  import { CardProps } from '.';
2
3
  declare const story: {
3
4
  title: string;
4
- component: (props: CardProps) => JSX.Element;
5
+ component: <E extends import("react").ElementType<any> = "button">(props: CardProps<E>) => JSX.Element;
5
6
  argTypes: {
7
+ as: {
8
+ control: {
9
+ type: string;
10
+ };
11
+ description: string;
12
+ };
6
13
  density: {
7
14
  description: string;
8
15
  };
@@ -67,12 +74,12 @@ declare const story: {
67
74
  };
68
75
  };
69
76
  export declare const CardStory: {
70
- ({ actionIcon, showActionIcon, children, classNames, density, description, descriptionVariant, dropShadow, icon, label, onClick, title, titleVariant, }: CardProps): JSX.Element;
77
+ ({ as, actionIcon, showActionIcon, children, classNames, density, description, descriptionVariant, dropShadow, icon, label, onClick, title, titleVariant, }: CardProps): JSX.Element;
71
78
  storyName: string;
72
79
  };
73
80
  export declare const CardDensities: () => JSX.Element;
74
81
  export declare const CardsWithIcons: ({ children, icon, title, }: CardProps) => JSX.Element;
75
82
  export declare const CardWithOnClickAction: ({ children, icon, title, }: CardProps) => JSX.Element;
76
83
  export declare const CardOverridesStyles: ({ children, label, title, }: CardProps) => JSX.Element;
77
- export declare const CardsWithinCardsAndComplexLayout: ({ children, label, title, }: CardProps) => JSX.Element;
84
+ export declare const CardsWithinCardsAndComplexLayout: () => JSX.Element;
78
85
  export default story;
package/dist/cjs/lib/index.d.ts CHANGED
@@ -11,8 +11,8 @@ import { Badge } from './components/badge';
11
11
  import { Checkbox } from './components/input/checkbox';
12
12
  import { Radio } from './components/input/radio';
13
13
  import { BottomModal, RegularModal, BottomOrRegularModal } from './components/modal';
14
- import { CardWithTopLeftIcon, CardWithLeftIcon, CardWithTopIcon, InfoCard, CardButton } from './components/cards';
15
- import { Card, CardProps } from './components/card';
14
+ import { CardWithTopLeftIcon, CardWithLeftIcon, CardWithTopIcon, InfoCard, CardButton, CardProps } from './components/cards';
15
+ import { Card } 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';
package/dist/esm/components/card/index.js CHANGED
@@ -30,9 +30,10 @@ var CardContent = function (_a) {
30
30
  };
31
31
  var Card = function (props) {
32
32
  var _a;
33
- var onClick = props.onClick;
34
- if (onClick) {
35
- return (jsx("button", __assign({ className: classNames('c-pointer d-flex w100 br8 ai-stretch', styles.button, (_a = props.classNames) === null || _a === void 0 ? void 0 : _a.buttonWrapper), onClick: onClick, type: "button" }, { children: jsx(CardContent, __assign({}, props), void 0) }), void 0));
33
+ var as = props.as, onClick = props.onClick;
34
+ var Tag = as || 'button';
35
+ if (onClick || as) {
36
+ return (jsx(Tag, __assign({ className: classNames('c-pointer d-flex w100 br8 ai-stretch', styles.button, (_a = props.classNames) === null || _a === void 0 ? void 0 : _a.buttonWrapper), onClick: onClick }, onClick && { type: "button" }, { children: jsx(CardContent, __assign({}, props), void 0) }), void 0));
36
37
  }
37
38
  return jsx(CardContent, __assign({}, props), void 0);
38
39
  };
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 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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"}
1
+ {"version":3,"file":"index.js","sources":["../../../../../src/lib/components/card/index.tsx"],"sourcesContent":["import { ElementType, ReactNode } from 'react';\nimport classNamesUtil from 'classnames';\nimport { ChevronRightIcon } from '../icon';\n\nimport styles from './style.module.scss';\n\nconst CardDefault = 'button' as const\ntype CardDefaultAsType = typeof CardDefault;\n\nexport interface CardProps<E extends ElementType = CardDefaultAsType> {\n as?: E;\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 = <E extends React.ElementType = CardDefaultAsType>({\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<E>) => {\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 = <E extends React.ElementType = CardDefaultAsType>(props: CardProps<E>) => {\n const { as, onClick } = props;\n const Tag = as || 'button';\n\n if (onClick || as) {\n return (\n <Tag\n className={classNamesUtil(\n 'c-pointer d-flex w100 br8 ai-stretch',\n styles.button,\n props.classNames?.buttonWrapper\n )}\n onClick={onClick}\n {...onClick && { type: \"button\" }}\n >\n <CardContent {...props} />\n </Tag>\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
@@ -18,6 +18,10 @@ var story = {
18
18
  title: 'JSX/Card',
19
19
  component: Card,
20
20
  argTypes: {
21
+ as: {
22
+ control: { type: 'text' },
23
+ description: 'Allow wrapper element type to be custom defined'
24
+ },
21
25
  density: {
22
26
  description: 'Spacing around the card'
23
27
  },
@@ -78,8 +82,8 @@ var story = {
78
82
  }
79
83
  };
80
84
  var CardStory = function (_a) {
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));
85
+ var as = _a.as, 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;
86
+ return (jsx("div", __assign({ className: 'd-flex p24 bg-grey-200' }, { children: jsx(Card, __assign({ as: as, 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));
83
87
  };
84
88
  CardStory.storyName = "Card";
85
89
  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),
@@ -102,13 +106,10 @@ var CardOverridesStyles = function (_a) {
102
106
  title: 'tc-white'
103
107
  } }, { children: children }), void 0) }), void 0));
104
108
  };
105
- var CardsWithinCardsAndComplexLayout = function (_a) {
106
- _a.children; _a.label; _a.title;
107
- return (jsx("div", __assign({ className: 'd-flex p24 bg-grey-200' }, { children: jsxs(Card, __assign({ label: (jsx(Badge, __assign({ size: 'small', variant: 'success' }, { children: "Active" }), void 0)), title: (jsxs("div", __assign({ className: 'd-flex jc-between ai-center w100' }, { children: ["Coverage overview", jsx(Button, __assign({ onClick: function () { }, variant: 'filledGray' }, { children: "Full coverage details" }), void 0)] }), void 0)) }, { children: [jsxs("div", __assign({ className: 'd-flex gap16 mt16' }, { children: [jsx(Card, { description: "Lost keys", classNames: { wrapper: 'bg-grey-300' }, icon: jsx(CheckIcon, { color: 'primary-500' }, void 0), density: 'compact' }, void 0),
108
- jsx(Card, { description: "Broken glass", classNames: { wrapper: 'bg-grey-300' }, icon: jsx(XIcon, { color: 'primary-500' }, void 0), density: 'compact' }, void 0)] }), void 0),
109
- jsxs("div", __assign({ className: 'd-flex gap16 mt16' }, { children: [jsx(Card, { description: "Damage to property", classNames: { wrapper: 'bg-grey-300' }, icon: jsx(CheckIcon, { color: 'primary-500' }, void 0), density: 'compact' }, void 0),
110
- jsx(Card, { description: "Drones", classNames: { wrapper: 'bg-grey-300' }, icon: jsx(XIcon, { color: 'primary-500' }, void 0), density: 'compact' }, void 0)] }), void 0)] }), void 0) }), void 0));
111
- };
109
+ var CardsWithinCardsAndComplexLayout = function () { return (jsx("div", __assign({ className: 'd-flex p24 bg-grey-200' }, { children: jsxs(Card, __assign({ label: (jsx(Badge, __assign({ size: 'small', variant: 'success' }, { children: "Active" }), void 0)), title: (jsxs("div", __assign({ className: 'd-flex jc-between ai-center w100' }, { children: ["Coverage overview", jsx(Button, __assign({ onClick: function () { }, variant: 'filledGray' }, { children: "Full coverage details" }), void 0)] }), void 0)) }, { children: [jsxs("div", __assign({ className: 'd-flex gap16 mt16' }, { children: [jsx(Card, { description: "Lost keys", classNames: { wrapper: 'bg-grey-300' }, icon: jsx(CheckIcon, { color: 'primary-500' }, void 0), density: 'compact' }, void 0),
110
+ jsx(Card, { description: "Broken glass", classNames: { wrapper: 'bg-grey-300' }, icon: jsx(XIcon, { color: 'primary-500' }, void 0), density: 'compact' }, void 0)] }), void 0),
111
+ jsxs("div", __assign({ className: 'd-flex gap16 mt16' }, { children: [jsx(Card, { description: "Damage to property", classNames: { wrapper: 'bg-grey-300' }, icon: jsx(CheckIcon, { color: 'primary-500' }, void 0), density: 'compact' }, void 0),
112
+ jsx(Card, { description: "Drones", classNames: { wrapper: 'bg-grey-300' }, icon: jsx(XIcon, { color: 'primary-500' }, void 0), density: 'compact' }, void 0)] }), void 0)] }), void 0) }), void 0)); };
112
113
 
113
114
  export default story;
114
115
  export { CardDensities, CardOverridesStyles, CardStory, CardWithOnClickAction, CardsWithIcons, CardsWithinCardsAndComplexLayout };
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 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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"}
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 as: {\n control: { type: 'text' },\n description: 'Allow wrapper element type to be custom defined'\n },\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 as,\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 as={as}\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 <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/lib/components/card/index.d.ts CHANGED
@@ -1,5 +1,8 @@
1
- import { ReactNode } from 'react';
2
- export interface CardProps {
1
+ import { ElementType, ReactNode } from 'react';
2
+ declare const CardDefault: "button";
3
+ declare type CardDefaultAsType = typeof CardDefault;
4
+ export interface CardProps<E extends ElementType = CardDefaultAsType> {
5
+ as?: E;
3
6
  children?: ReactNode;
4
7
  classNames?: {
5
8
  buttonWrapper?: string;
@@ -23,5 +26,5 @@ export interface CardProps {
23
26
  actionIcon?: ReactNode;
24
27
  showActionIcon?: boolean;
25
28
  }
26
- declare const Card: (props: CardProps) => JSX.Element;
29
+ declare const Card: <E extends ElementType<any> = "button">(props: CardProps<E>) => JSX.Element;
27
30
  export { Card };
package/dist/esm/lib/components/card/index.stories.d.ts CHANGED
@@ -1,8 +1,15 @@
1
+ /// <reference types="react" />
1
2
  import { CardProps } from '.';
2
3
  declare const story: {
3
4
  title: string;
4
- component: (props: CardProps) => JSX.Element;
5
+ component: <E extends import("react").ElementType<any> = "button">(props: CardProps<E>) => JSX.Element;
5
6
  argTypes: {
7
+ as: {
8
+ control: {
9
+ type: string;
10
+ };
11
+ description: string;
12
+ };
6
13
  density: {
7
14
  description: string;
8
15
  };
@@ -67,12 +74,12 @@ declare const story: {
67
74
  };
68
75
  };
69
76
  export declare const CardStory: {
70
- ({ actionIcon, showActionIcon, children, classNames, density, description, descriptionVariant, dropShadow, icon, label, onClick, title, titleVariant, }: CardProps): JSX.Element;
77
+ ({ as, actionIcon, showActionIcon, children, classNames, density, description, descriptionVariant, dropShadow, icon, label, onClick, title, titleVariant, }: CardProps): JSX.Element;
71
78
  storyName: string;
72
79
  };
73
80
  export declare const CardDensities: () => JSX.Element;
74
81
  export declare const CardsWithIcons: ({ children, icon, title, }: CardProps) => JSX.Element;
75
82
  export declare const CardWithOnClickAction: ({ children, icon, title, }: CardProps) => JSX.Element;
76
83
  export declare const CardOverridesStyles: ({ children, label, title, }: CardProps) => JSX.Element;
77
- export declare const CardsWithinCardsAndComplexLayout: ({ children, label, title, }: CardProps) => JSX.Element;
84
+ export declare const CardsWithinCardsAndComplexLayout: () => JSX.Element;
78
85
  export default story;
package/dist/esm/lib/index.d.ts CHANGED
@@ -11,8 +11,8 @@ import { Badge } from './components/badge';
11
11
  import { Checkbox } from './components/input/checkbox';
12
12
  import { Radio } from './components/input/radio';
13
13
  import { BottomModal, RegularModal, BottomOrRegularModal } from './components/modal';
14
- import { CardWithTopLeftIcon, CardWithLeftIcon, CardWithTopIcon, InfoCard, CardButton } from './components/cards';
15
- import { Card, CardProps } from './components/card';
14
+ import { CardWithTopLeftIcon, CardWithLeftIcon, CardWithTopIcon, InfoCard, CardButton, CardProps } from './components/cards';
15
+ import { Card } 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';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@popsure/dirty-swan",
3
- "version": "0.41.18",
3
+ "version": "0.41.19-alpha",
4
4
  "author": "Vincent Audoire <vincent@getpopsure.com>",
5
5
  "license": "MIT",
6
6
  "private": false,
package/src/lib/components/card/index.stories.tsx CHANGED
@@ -8,6 +8,10 @@ const story = {
8
8
  title: 'JSX/Card',
9
9
  component: Card,
10
10
  argTypes: {
11
+ as: {
12
+ control: { type: 'text' },
13
+ description: 'Allow wrapper element type to be custom defined'
14
+ },
11
15
  density: {
12
16
  description: 'Spacing around the card'
13
17
  },
@@ -69,6 +73,7 @@ const story = {
69
73
  };
70
74
 
71
75
  export const CardStory = ({
76
+ as,
72
77
  actionIcon,
73
78
  showActionIcon,
74
79
  children,
@@ -85,6 +90,7 @@ export const CardStory = ({
85
90
  }: CardProps) => (
86
91
  <div className='d-flex p24 bg-grey-200'>
87
92
  <Card
93
+ as={as}
88
94
  classNames={classNames}
89
95
  description={description}
90
96
  descriptionVariant={descriptionVariant}
@@ -190,11 +196,7 @@ export const CardOverridesStyles = ({
190
196
  </div>
191
197
  );
192
198
 
193
- export const CardsWithinCardsAndComplexLayout = ({
194
- children,
195
- label,
196
- title,
197
- }: CardProps) => (
199
+ export const CardsWithinCardsAndComplexLayout = () => (
198
200
  <div className='d-flex p24 bg-grey-200'>
199
201
  <Card
200
202
  label={(
package/src/lib/components/card/index.tsx CHANGED
@@ -1,10 +1,14 @@
1
- import { ReactNode } from 'react';
1
+ import { ElementType, ReactNode } from 'react';
2
2
  import classNamesUtil from 'classnames';
3
3
  import { ChevronRightIcon } from '../icon';
4
4
 
5
5
  import styles from './style.module.scss';
6
6
 
7
- export interface CardProps {
7
+ const CardDefault = 'button' as const
8
+ type CardDefaultAsType = typeof CardDefault;
9
+
10
+ export interface CardProps<E extends ElementType = CardDefaultAsType> {
11
+ as?: E;
8
12
  children?: ReactNode;
9
13
  classNames?: {
10
14
  buttonWrapper?: string;
@@ -29,7 +33,7 @@ export interface CardProps {
29
33
  showActionIcon?: boolean;
30
34
  }
31
35
 
32
- const CardContent = ({
36
+ const CardContent = <E extends React.ElementType = CardDefaultAsType>({
33
37
  children,
34
38
  classNames,
35
39
  density = 'balanced',
@@ -43,7 +47,7 @@ const CardContent = ({
43
47
  title,
44
48
  titleVariant = 'large',
45
49
  showActionIcon
46
- }: CardProps) => {
50
+ }: CardProps<E>) => {
47
51
  const hideActionIcon = typeof actionIcon !== 'undefined' && !actionIcon;
48
52
 
49
53
  return (
@@ -129,22 +133,23 @@ const CardContent = ({
129
133
  );
130
134
  };
131
135
 
132
- const Card = (props: CardProps) => {
133
- const { onClick } = props;
136
+ const Card = <E extends React.ElementType = CardDefaultAsType>(props: CardProps<E>) => {
137
+ const { as, onClick } = props;
138
+ const Tag = as || 'button';
134
139
 
135
- if (onClick) {
140
+ if (onClick || as) {
136
141
  return (
137
- <button
142
+ <Tag
138
143
  className={classNamesUtil(
139
144
  'c-pointer d-flex w100 br8 ai-stretch',
140
145
  styles.button,
141
146
  props.classNames?.buttonWrapper
142
147
  )}
143
148
  onClick={onClick}
144
- type="button"
149
+ {...onClick && { type: "button" }}
145
150
  >
146
151
  <CardContent {...props} />
147
- </button>
152
+ </Tag>
148
153
  );
149
154
  }
150
155
 
package/src/lib/index.tsx CHANGED
@@ -27,8 +27,9 @@ import {
27
27
  CardWithTopIcon,
28
28
  InfoCard,
29
29
  CardButton,
30
+ CardProps,
30
31
  } from './components/cards';
31
- import { Card, CardProps } from './components/card';
32
+ import { Card } from './components/card';
32
33
  import { Button } from './components/button';
33
34
  import { AutoSuggestMultiSelect } from './components/input/autoSuggestMultiSelect';
34
35
  import Chip from './components/chip';