@popsure/dirty-swan 0.41.19-alpha → 0.42.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.
- package/dist/cjs/index.js +31 -28
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/lib/components/card/index.d.ts +5 -4
- package/dist/cjs/lib/components/card/index.stories.d.ts +4 -3
- package/dist/cjs/lib/index.d.ts +2 -2
- package/dist/esm/components/card/index.js +30 -27
- package/dist/esm/components/card/index.js.map +1 -1
- package/dist/esm/components/card/index.stories.js +10 -4
- package/dist/esm/components/card/index.stories.js.map +1 -1
- package/dist/esm/components/icon/icons/Info.js +2 -2
- package/dist/esm/components/icon/icons/Info.js.map +1 -1
- package/dist/esm/components/icon/icons.stories.js +1 -1
- package/dist/esm/components/icon/index.stories.js +1 -1
- package/dist/esm/{index-e506c4ca.js → index-03b0133a.js} +3 -3
- package/dist/esm/{index-e506c4ca.js.map → index-03b0133a.js.map} +1 -1
- package/dist/esm/lib/components/card/index.d.ts +5 -4
- package/dist/esm/lib/components/card/index.stories.d.ts +4 -3
- package/dist/esm/lib/index.d.ts +2 -2
- package/package.json +1 -1
- package/src/lib/components/card/index.stories.tsx +29 -8
- package/src/lib/components/card/index.tsx +91 -90
- package/src/lib/components/card/style.module.scss +1 -0
- package/src/lib/index.tsx +1 -2
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { ElementType, ReactNode } from 'react';
|
|
2
|
-
declare const CardDefault: "
|
|
2
|
+
declare const CardDefault: "section";
|
|
3
3
|
declare type CardDefaultAsType = typeof CardDefault;
|
|
4
|
-
|
|
4
|
+
declare type CardOwnProps<E extends ElementType = CardDefaultAsType> = {
|
|
5
5
|
as?: E;
|
|
6
6
|
children?: ReactNode;
|
|
7
7
|
classNames?: {
|
|
@@ -25,6 +25,7 @@ export interface CardProps<E extends ElementType = CardDefaultAsType> {
|
|
|
25
25
|
onClick?: () => void;
|
|
26
26
|
actionIcon?: ReactNode;
|
|
27
27
|
showActionIcon?: boolean;
|
|
28
|
-
}
|
|
29
|
-
declare
|
|
28
|
+
};
|
|
29
|
+
export declare type CardProps<E extends ElementType = CardDefaultAsType> = CardOwnProps<E> & Omit<React.ComponentProps<E>, keyof CardOwnProps<E>>;
|
|
30
|
+
declare const Card: <E extends ElementType<any> = "section">({ as, children, classNames, density, description, descriptionVariant, dropShadow, icon, label, onClick, actionIcon, title, titleVariant, showActionIcon, ...rest }: CardProps<E>) => JSX.Element;
|
|
30
31
|
export { Card };
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
import { CardProps } from '.';
|
|
3
3
|
declare const story: {
|
|
4
4
|
title: string;
|
|
5
|
-
component: <E extends import("react").ElementType<any> = "
|
|
5
|
+
component: <E extends import("react").ElementType<any> = "section">({ as, children, classNames, density, description, descriptionVariant, dropShadow, icon, label, onClick, actionIcon, title, titleVariant, showActionIcon, ...rest }: CardProps<E>) => JSX.Element;
|
|
6
6
|
argTypes: {
|
|
7
7
|
as: {
|
|
8
8
|
control: {
|
|
@@ -77,9 +77,10 @@ export declare const CardStory: {
|
|
|
77
77
|
({ as, actionIcon, showActionIcon, children, classNames, density, description, descriptionVariant, dropShadow, icon, label, onClick, title, titleVariant, }: CardProps): JSX.Element;
|
|
78
78
|
storyName: string;
|
|
79
79
|
};
|
|
80
|
+
export declare const CardAsOtherComponents: () => JSX.Element;
|
|
80
81
|
export declare const CardDensities: () => JSX.Element;
|
|
81
|
-
export declare const CardsWithIcons: ({
|
|
82
|
-
export declare const CardWithOnClickAction: ({ children,
|
|
82
|
+
export declare const CardsWithIcons: ({ title }: CardProps) => JSX.Element;
|
|
83
|
+
export declare const CardWithOnClickAction: ({ children, title, }: CardProps) => JSX.Element;
|
|
83
84
|
export declare const CardOverridesStyles: ({ children, label, title, }: CardProps) => JSX.Element;
|
|
84
85
|
export declare const CardsWithinCardsAndComplexLayout: () => JSX.Element;
|
|
85
86
|
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
|
|
15
|
-
import { Card } from './components/card';
|
|
14
|
+
import { CardWithTopLeftIcon, CardWithLeftIcon, CardWithTopIcon, InfoCard, CardButton } from './components/cards';
|
|
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';
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { _ as __assign } from '../../tslib.es6-5bc94358.js';
|
|
1
|
+
import { a as __rest, _ as __assign } from '../../tslib.es6-5bc94358.js';
|
|
2
2
|
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
3
3
|
import { c as classNames } from '../../index-6ea95111.js';
|
|
4
4
|
import ChevronRightIcon from '../icon/icons/ChevronRight.js';
|
|
@@ -6,36 +6,39 @@ import { s as styleInject } from '../../style-inject.es-1f59c1d0.js';
|
|
|
6
6
|
import 'react';
|
|
7
7
|
import '../icon/IconWrapper/IconWrapper.js';
|
|
8
8
|
|
|
9
|
-
var css_248z = ".style-module_button__KWY7b {\n background-color: transparent;\n color: #26262e;\n outline: 1px solid transparent;\n transition: all 0.2s ease-in-out;\n}\n.style-module_button__KWY7b:hover {\n outline: 1px solid #8e8cee;\n color: #8e8cee;\n}\n.style-module_button__KWY7b:focus-visible {\n outline: 2px solid #8e8cee;\n color: #8e8cee;\n}\n\n.style-module_icon__N6B2P {\n margin-right: 12px;\n}\n.style-module_iconbalanced__3JdKC {\n margin-right: 16px;\n}\n.style-module_iconspacious__36ovv {\n margin-right: 24px;\n}\n\n.style-module_actionIcon__2klnb {\n margin-left: 12px;\n}\n.style-module_actionIconbalanced__1duYl {\n margin-left: 16px;\n}\n.style-module_actionIconspacious__1sjsd {\n margin-left: 24px;\n}";
|
|
9
|
+
var css_248z = ".style-module_button__KWY7b {\n background-color: transparent;\n color: #26262e;\n outline: 1px solid transparent;\n transition: all 0.2s ease-in-out;\n text-decoration: none;\n}\n.style-module_button__KWY7b:hover {\n outline: 1px solid #8e8cee;\n color: #8e8cee;\n}\n.style-module_button__KWY7b:focus-visible {\n outline: 2px solid #8e8cee;\n color: #8e8cee;\n}\n\n.style-module_icon__N6B2P {\n margin-right: 12px;\n}\n.style-module_iconbalanced__3JdKC {\n margin-right: 16px;\n}\n.style-module_iconspacious__36ovv {\n margin-right: 24px;\n}\n\n.style-module_actionIcon__2klnb {\n margin-left: 12px;\n}\n.style-module_actionIconbalanced__1duYl {\n margin-left: 16px;\n}\n.style-module_actionIconspacious__1sjsd {\n margin-left: 24px;\n}";
|
|
10
10
|
var styles = {"button":"style-module_button__KWY7b","icon":"style-module_icon__N6B2P","iconbalanced":"style-module_iconbalanced__3JdKC","iconspacious":"style-module_iconspacious__36ovv","actionIcon":"style-module_actionIcon__2klnb","actionIconbalanced":"style-module_actionIconbalanced__1duYl","actionIconspacious":"style-module_actionIconspacious__1sjsd"};
|
|
11
11
|
styleInject(css_248z);
|
|
12
12
|
|
|
13
|
-
var
|
|
14
|
-
|
|
13
|
+
var CardDefault = 'section';
|
|
14
|
+
var Card = function (_a) {
|
|
15
|
+
var _b;
|
|
16
|
+
var as = _a.as, children = _a.children, classNames$1 = _a.classNames, _c = _a.density, density = _c === void 0 ? 'balanced' : _c, description = _a.description, _d = _a.descriptionVariant, descriptionVariant = _d === void 0 ? 'large' : _d, _e = _a.dropShadow, dropShadow = _e === void 0 ? true : _e, icon = _a.icon, label = _a.label, onClick = _a.onClick, actionIcon = _a.actionIcon, title = _a.title, _f = _a.titleVariant, titleVariant = _f === void 0 ? 'large' : _f, showActionIcon = _a.showActionIcon, rest = __rest(_a, ["as", "children", "classNames", "density", "description", "descriptionVariant", "dropShadow", "icon", "label", "onClick", "actionIcon", "title", "titleVariant", "showActionIcon"]);
|
|
15
17
|
var hideActionIcon = typeof actionIcon !== 'undefined' && !actionIcon;
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
18
|
+
var propsWithActionIcon = onClick || (rest === null || rest === void 0 ? void 0 : rest.href) || rest.to;
|
|
19
|
+
var cardDefaultTag = onClick ? 'button' : CardDefault;
|
|
20
|
+
var Tag = as || cardDefaultTag;
|
|
21
|
+
return (jsx(Tag, __assign({ className: classNames(classNames$1 === null || classNames$1 === void 0 ? void 0 : classNames$1.buttonWrapper, ' d-flex w100 br8 ai-stretch', (_b = {
|
|
22
|
+
'c-pointer': propsWithActionIcon
|
|
23
|
+
},
|
|
24
|
+
_b[styles.button] = propsWithActionIcon,
|
|
25
|
+
_b)) }, onClick && {
|
|
26
|
+
onClick: onClick,
|
|
27
|
+
type: "button"
|
|
28
|
+
}, rest, { children: jsxs("div", __assign({ className: classNames('d-flex fd-column jc-center br8 bg-white w100 ta-left', { 'bs-sm': dropShadow }, {
|
|
29
|
+
compact: 'p16',
|
|
30
|
+
balanced: 'p24',
|
|
31
|
+
spacious: 'p32',
|
|
32
|
+
}[density], classNames$1 === null || classNames$1 === void 0 ? void 0 : classNames$1.wrapper) }, { children: [jsxs("div", __assign({ className: "d-flex w100" }, { children: [icon && (jsx("div", __assign({ className: classNames("d-flex ai-center tc-primary-500", styles.icon, styles["icon" + density], classNames$1 === null || classNames$1 === void 0 ? void 0 : classNames$1.icon) }, { children: icon }), void 0)),
|
|
33
|
+
jsxs("div", __assign({ className: "d-flex jc-between w100" }, { children: [jsxs("div", __assign({ className: "d-flex jc-center gap8 fd-column tc-grey-900 w100" }, { children: [label && (jsx("h3", __assign({ className: classNames('p-p--small', classNames$1 === null || classNames$1 === void 0 ? void 0 : classNames$1.label) }, { children: label }), void 0)),
|
|
34
|
+
title && (jsx("h2", __assign({ className: classNames(classNames$1 === null || classNames$1 === void 0 ? void 0 : classNames$1.title, {
|
|
35
|
+
large: 'p-h3',
|
|
36
|
+
medium: 'p-h4',
|
|
37
|
+
small: 'p-p',
|
|
38
|
+
}[titleVariant]) }, { children: title }), void 0)),
|
|
39
|
+
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),
|
|
40
|
+
(showActionIcon || (propsWithActionIcon && !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),
|
|
41
|
+
children && jsx("div", __assign({ className: classNames$1 === null || classNames$1 === void 0 ? void 0 : classNames$1.children }, { children: children }), void 0)] }), void 0) }), void 0));
|
|
39
42
|
};
|
|
40
43
|
|
|
41
44
|
export { Card };
|
|
@@ -1 +1 @@
|
|
|
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 = '
|
|
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 = 'section' as const\ntype CardDefaultAsType = typeof CardDefault;\n\ntype CardOwnProps<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\nexport type CardProps<E extends ElementType = CardDefaultAsType> = CardOwnProps<E> &\n Omit<React.ComponentProps<E>, keyof CardOwnProps<E>>\n\nconst Card = <E extends ElementType = CardDefaultAsType>({\n as,\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 ...rest\n}: CardProps<E>) => {\n const hideActionIcon = typeof actionIcon !== 'undefined' && !actionIcon;\n const propsWithActionIcon = onClick || rest?.href || rest.to; \n const cardDefaultTag = onClick ? 'button' : CardDefault;\n const Tag = as || cardDefaultTag;\n \n return (\n <Tag\n className={classNamesUtil(\n classNames?.buttonWrapper,\n ' d-flex w100 br8 ai-stretch',\n {\n 'c-pointer': propsWithActionIcon,\n [styles.button]: propsWithActionIcon\n },\n )}\n {...onClick && { \n onClick, \n type: \"button\"\n }}\n {...rest}\n >\n <div\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 || (propsWithActionIcon && !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 </div>\n </Tag>\n );\n};\n\nexport { Card };\n"],"names":["classNames","_jsx","classNamesUtil","_jsxs"],"mappings":"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"}
|
|
@@ -5,6 +5,7 @@ import { i as illustrations } from '../../index-1693701e.js';
|
|
|
5
5
|
import { Button } from '../button/index.js';
|
|
6
6
|
import { Badge } from '../badge/index.js';
|
|
7
7
|
import CheckIcon from '../icon/icons/Check.js';
|
|
8
|
+
import InfoIcon from '../icon/icons/Info.js';
|
|
8
9
|
import MehIcon from '../icon/icons/Meh.js';
|
|
9
10
|
import PlusCircleIcon from '../icon/icons/PlusCircle.js';
|
|
10
11
|
import XIcon from '../icon/icons/X.js';
|
|
@@ -86,16 +87,21 @@ var CardStory = function (_a) {
|
|
|
86
87
|
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));
|
|
87
88
|
};
|
|
88
89
|
CardStory.storyName = "Card";
|
|
90
|
+
var CardAsOtherComponents = function () { return (jsxs("div", __assign({ className: 'd-flex fd-column gap16 p24 bg-grey-200' }, { children: [jsx("h3", __assign({ className: 'p-h3' }, { children: "As an anchor:" }), void 0),
|
|
91
|
+
jsx(Card, { as: "a", href: "https://feather-insurance.com", target: "_blank", title: "Card with an a tag", density: 'compact' }, void 0),
|
|
92
|
+
jsx("h3", __assign({ className: 'p-h3' }, { children: "As a nav:" }), void 0),
|
|
93
|
+
jsx(Card, { as: "nav", title: "Card with a nav tag", density: 'compact' }, void 0),
|
|
94
|
+
jsxs("p", __assign({ className: 'p-p p-p--small fw-bold d-flex ai-center gap8 mt32' }, { children: [jsx(InfoIcon, {}, void 0), "Inspect elements to see the different HTML tags being rendered."] }), void 0)] }), void 0)); };
|
|
89
95
|
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),
|
|
90
96
|
jsx(Card, { title: 'Card density: Balanced', density: 'balanced' }, void 0),
|
|
91
97
|
jsx(Card, { title: 'Card density: Spacious', density: 'spacious' }, void 0)] }), void 0)); };
|
|
92
98
|
var CardsWithIcons = function (_a) {
|
|
93
|
-
|
|
99
|
+
var title = _a.title;
|
|
94
100
|
return (jsxs("div", __assign({ className: 'd-flex gap16 p24 bg-grey-200' }, { children: [jsx(Card, { icon: jsx("img", { alt: "", src: illustrations.aids, width: 24 }, void 0), title: title }, void 0),
|
|
95
|
-
jsx(Card, { icon: jsx(MehIcon, { size: 24 }, void 0), title: title }, void 0)] }), void 0));
|
|
101
|
+
jsx(Card, { icon: jsx(MehIcon, { size: 24, noMargin: true }, void 0), title: title }, void 0)] }), void 0));
|
|
96
102
|
};
|
|
97
103
|
var CardWithOnClickAction = function (_a) {
|
|
98
|
-
var children = _a.children
|
|
104
|
+
var children = _a.children, title = _a.title;
|
|
99
105
|
return (jsx("div", __assign({ className: 'd-flex p24 bg-grey-200' }, { children: jsx(Card, __assign({ icon: jsx("img", { alt: "", src: illustrations.aids, width: 24 }, void 0), title: title, titleVariant: 'medium', onClick: function () { } }, { children: children }), void 0) }), void 0));
|
|
100
106
|
};
|
|
101
107
|
var CardOverridesStyles = function (_a) {
|
|
@@ -112,5 +118,5 @@ var CardsWithinCardsAndComplexLayout = function () { return (jsx("div", __assign
|
|
|
112
118
|
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)); };
|
|
113
119
|
|
|
114
120
|
export default story;
|
|
115
|
-
export { CardDensities, CardOverridesStyles, CardStory, CardWithOnClickAction, CardsWithIcons, CardsWithinCardsAndComplexLayout };
|
|
121
|
+
export { CardAsOtherComponents, CardDensities, CardOverridesStyles, CardStory, CardWithOnClickAction, CardsWithIcons, CardsWithinCardsAndComplexLayout };
|
|
116
122
|
//# sourceMappingURL=index.stories.js.map
|
|
@@ -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 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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"}
|
|
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, InfoIcon, 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 CardAsOtherComponents = () => (\n <div className='d-flex fd-column gap16 p24 bg-grey-200'>\n \n <h3 className='p-h3'>As an anchor:</h3>\n <Card\n as=\"a\"\n href=\"https://feather-insurance.com\"\n target=\"_blank\"\n title=\"Card with an a tag\"\n density='compact'\n />\n\n <h3 className='p-h3'>As a nav:</h3>\n <Card\n as=\"nav\"\n title=\"Card with a nav tag\"\n density='compact'\n />\n\n <p className='p-p p-p--small fw-bold d-flex ai-center gap8 mt32'>\n <InfoIcon />\n Inspect elements to see the different HTML tags being rendered.\n </p>\n </div>\n);\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 = ({ title }: 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} noMargin />}\n title={title}\n />\n </div>\n);\n\nexport const CardWithOnClickAction = ({ \n children,\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":";;;;;;;;;;;;;;;;;IAMM,KAAK,GAAG;IACZ,KAAK,EAAE,UAAU;IACjB,SAAS,EAAE,IAAI;IACf,QAAQ,EAAE;QACR,EAAE,EAAE;YACF,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;YACzB,WAAW,EAAE,iDAAiD;SAC/D;QACD,OAAO,EAAE;YACP,WAAW,EAAE,yBAAyB;SACvC;QACD,KAAK,EAAE;YACL,WAAW,EAAE,iCAAiC;SAC/C;QACD,KAAK,EAAE;YACL,WAAW,EAAE,iCAAiC;SAC/C;QACD,YAAY,EAAE;YACZ,WAAW,EAAE,mDAAmD;SACjE;QACD,WAAW,EAAE;YACX,WAAW,EAAE,uCAAuC;SACrD;QACD,kBAAkB,EAAE;YAClB,WAAW,EAAE,yDAAyD;SACvE;QACD,IAAI,EAAE;YACJ,WAAW,EAAE,uDAAuD;SACrE;QACD,QAAQ,EAAE;YACR,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;YACzB,WAAW,EAAE,uEAAuE;SACrF;QACD,OAAO,EAAE;YACP,WAAW,EAAE,gDAAgD;SAC9D;QACD,UAAU,EAAE;YACV,WAAW,EAAE,wDAAwD;SACtE;QACD,UAAU,EAAE;YACV,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;YACzB,WAAW,EAAE,qIAAqI;SACnJ;QACD,cAAc,EAAE;YACd,WAAW,EAAE,sEAAsE;SACpF;KACF;IACD,IAAI,EAAE;QACJ,OAAO,EAAE,UAAU;QACnB,WAAW,EAAE,6GAA6G;QAC1H,kBAAkB,EAAE,OAAO;QAC3B,KAAK,EAAE,OAAO;QACd,KAAK,EAAE,0BAA0B;QACjC,YAAY,EAAE,OAAO;QACrB,IAAI,EAAE,KAAK;QACX,QAAQ,EAAE,EAAE;QACZ,UAAU,EAAE;YACV,OAAO,EAAE,EAAE;YACX,KAAK,EAAE,EAAE;YACT,KAAK,EAAE,EAAE;YACT,WAAW,EAAE,EAAE;YACf,QAAQ,EAAE,EAAE;YACZ,IAAI,EAAE,EAAE;SACT;QACD,UAAU,EAAE,IAAI;KACjB;EACD;IAEW,SAAS,GAAG,UAAC,EAed;QAdV,EAAE,QAAA,EACF,UAAU,gBAAA,EACV,cAAc,oBAAA,EACd,QAAQ,cAAA,EACR,UAAU,gBAAA,EACV,OAAO,aAAA,EACP,WAAW,iBAAA,EACX,kBAAkB,wBAAA,EAClB,UAAU,gBAAA,EACV,IAAI,UAAA,EACJ,KAAK,WAAA,EACL,OAAO,aAAA,EACP,KAAK,WAAA,EACL,YAAY,kBAAA;IACG,QACfA,sBAAK,SAAS,EAAC,wBAAwB,gBACrCA,IAAC,IAAI,aACH,EAAE,EAAE,EAAE,EACN,UAAU,EAAE,UAAU,EACtB,WAAW,EAAE,WAAW,EACxB,kBAAkB,EAAE,kBAAkB,EACtC,OAAO,EAAE,OAAO,EAChB,UAAU,EAAE,UAAU,EACtB,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,EACZ,YAAY,EAAE,YAAY,EAC1B,OAAO,EAAE,OAAO,EAChB,UAAU,EAAE,UAAU,EACtB,cAAc,EAAE,cAAc,gBAE7B,QAAQ,YACJ,YACH;AAnBS,EAoBf;AAEF,SAAS,CAAC,SAAS,GAAG,MAAM,CAAC;IAEhB,qBAAqB,GAAG,cAAM,QACzCC,uBAAK,SAAS,EAAC,wCAAwC,iBAErDD,qBAAI,SAAS,EAAC,MAAM,2CAAmB;QACvCA,IAAC,IAAI,IACH,EAAE,EAAC,GAAG,EACN,IAAI,EAAC,+BAA+B,EACpC,MAAM,EAAC,QAAQ,EACf,KAAK,EAAC,oBAAoB,EAC1B,OAAO,EAAC,SAAS,WACjB;QAEFA,qBAAI,SAAS,EAAC,MAAM,uCAAe;QACnCA,IAAC,IAAI,IACH,EAAE,EAAC,KAAK,EACR,KAAK,EAAC,qBAAqB,EAC3B,OAAO,EAAC,SAAS,WACjB;QAEFC,qBAAG,SAAS,EAAC,mDAAmD,iBAC9DD,IAAC,QAAQ,aAAG,gFAEV,aACA,KACN;IAEW,aAAa,GAAG,cAAM,QACjCC,uBAAK,SAAS,EAAC,wCAAwC,iBACrDD,IAAC,IAAI,IACH,KAAK,EAAE,uBAAuB,EAC9B,OAAO,EAAC,SAAS,WACjB;QACFA,IAAC,IAAI,IACH,KAAK,EAAE,wBAAwB,EAC/B,OAAO,EAAC,UAAU,WAClB;QACFA,IAAC,IAAI,IACH,KAAK,EAAE,wBAAwB,EAC/B,OAAO,EAAC,UAAU,WAClB,aACE,KACN;IAEW,cAAc,GAAG,UAAC,EAAoB;QAAlB,KAAK,WAAA;IAAkB,QACtDC,uBAAK,SAAS,EAAC,8BAA8B,iBAC3CD,IAAC,IAAI,IACH,IAAI,EACFA,aACE,GAAG,EAAC,EAAE,EACN,GAAG,EAAE,aAAa,CAAC,IAAI,EACvB,KAAK,EAAE,EAAE,WACT,EAEJ,KAAK,EAAE,KAAK,WACZ;YACFA,IAAC,IAAI,IACH,IAAI,EAAEA,IAAC,OAAO,IAAC,IAAI,EAAE,EAAE,EAAE,QAAQ,iBAAG,EACpC,KAAK,EAAE,KAAK,WACZ,aACE;AAhBgD,EAiBtD;IAEW,qBAAqB,GAAG,UAAC,EAG1B;QAFV,QAAQ,cAAA,EACR,KAAK,WAAA;IACU,QACfA,sBAAK,SAAS,EAAC,wBAAwB,gBACrCA,IAAC,IAAI,aACH,IAAI,EACFA,aACE,GAAG,EAAC,EAAE,EACN,GAAG,EAAE,aAAa,CAAC,IAAI,EACvB,KAAK,EAAE,EAAE,WACT,EAEJ,KAAK,EAAE,KAAK,EACZ,YAAY,EAAE,QAAQ,EACtB,OAAO,EAAE,eAAQ,gBAEhB,QAAQ,YACJ,YACH;AAhBS,EAiBf;IAEW,mBAAmB,GAAG,UAAC,EAIxB;QAHV,QAAQ,cAAA,EACR,KAAK,WAAA,EACL,KAAK,WAAA;IACU,QACfA,sBAAK,SAAS,EAAC,wBAAwB,gBACrCA,IAAC,IAAI,aACH,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,EACZ,YAAY,EAAE,QAAQ,EACtB,IAAI,EAAEA,IAAC,cAAc,IAAC,KAAK,EAAC,UAAU,EAAC,IAAI,EAAE,EAAE,WAAI,EACnD,UAAU,EAAE;gBACV,OAAO,EAAE,aAAa;gBACtB,KAAK,EAAE,UAAU;gBACjB,KAAK,EAAE,UAAU;aAClB,gBAEA,QAAQ,YACJ,YACH;AAfS,EAgBf;IAEW,gCAAgC,GAAG,cAAM,QACpDA,sBAAK,SAAS,EAAC,wBAAwB,gBACrCC,KAAC,IAAI,aACH,KAAK,GACHD,IAAC,KAAK,aAAC,IAAI,EAAC,OAAO,EAAC,OAAO,EAAC,SAAS,oCAE7B,CACT,EACD,KAAK,GACHC,uBAAK,SAAS,EAAC,kCAAkC,sCAG/CD,IAAC,MAAM,aACL,OAAO,EAAE,eAAQ,EACjB,OAAO,EAAC,YAAY,mDAGb,aACL,CACP,iBAEDC,uBAAK,SAAS,EAAC,mBAAmB,iBAChCD,IAAC,IAAI,IACH,WAAW,EAAC,WAAW,EACvB,UAAU,EAAE,EAAE,OAAO,EAAE,aAAa,EAAE,EACtC,IAAI,EAAEA,IAAC,SAAS,IAAC,KAAK,EAAE,aAAa,WAAI,EACzC,OAAO,EAAC,SAAS,WACjB;oBACFA,IAAC,IAAI,IACH,WAAW,EAAC,cAAc,EAC1B,UAAU,EAAE,EAAE,OAAO,EAAE,aAAa,EAAE,EACtC,IAAI,EAAEA,IAAC,KAAK,IAAC,KAAK,EAAE,aAAa,WAAI,EACrC,OAAO,EAAC,SAAS,WACjB,aACE;YAENC,uBAAK,SAAS,EAAC,mBAAmB,iBAChCD,IAAC,IAAI,IACH,WAAW,EAAC,oBAAoB,EAChC,UAAU,EAAE,EAAE,OAAO,EAAE,aAAa,EAAE,EACtC,IAAI,EAAEA,IAAC,SAAS,IAAC,KAAK,EAAE,aAAa,WAAI,EACzC,OAAO,EAAC,SAAS,WACjB;oBACFA,IAAC,IAAI,IACH,WAAW,EAAC,QAAQ,EACpB,UAAU,EAAE,EAAE,OAAO,EAAE,aAAa,EAAE,EACtC,IAAI,EAAEA,IAAC,KAAK,IAAC,KAAK,EAAE,aAAa,WAAI,EACrC,OAAO,EAAC,SAAS,WACjB,aACE,aACD,YACH;;;;;"}
|
|
@@ -5,9 +5,9 @@ import '../../../tslib.es6-5bc94358.js';
|
|
|
5
5
|
import '../../../index-6ea95111.js';
|
|
6
6
|
import '../../../style-inject.es-1f59c1d0.js';
|
|
7
7
|
|
|
8
|
-
var
|
|
8
|
+
var InfoIcon = (function (props) {
|
|
9
9
|
return createElement(IconWrapper, props, jsx("path", { fill: "currentColor", d: "M11 16v1h2v-1h-2Zm2-8.041a1 1 0 1 0-2 0h2Zm-2 .04a1 1 0 1 0 2 0h-2ZM23 12c0-6.075-4.925-11-11-11v2a9 9 0 0 1 9 9h2ZM12 1C5.925 1 1 5.925 1 12h2a9 9 0 0 1 9-9V1ZM1 12c0 6.075 4.925 11 11 11v-2a9 9 0 0 1-9-9H1Zm11 11c6.075 0 11-4.925 11-11h-2a9 9 0 0 1-9 9v2Zm1-7v-5.5h-2V16h2Zm-2-8.041v.04h2v-.04h-2Z" }, void 0));
|
|
10
10
|
});
|
|
11
11
|
|
|
12
|
-
export default
|
|
12
|
+
export default InfoIcon;
|
|
13
13
|
//# sourceMappingURL=Info.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Info.js","sources":["../../../../../../src/lib/components/icon/icons/Info.tsx"],"sourcesContent":["/* Generated file. Do not modify. */\nimport { createElement } from 'react';\nimport { IconWrapper } from '../IconWrapper';\nimport type { IconWrapperProps } from '../IconWrapper';\nexport default (props: IconWrapperProps) =>\n createElement(\n IconWrapper,\n props,\n <path\n fill=\"currentColor\"\n d=\"M11 16v1h2v-1h-2Zm2-8.041a1 1 0 1 0-2 0h2Zm-2 .04a1 1 0 1 0 2 0h-2ZM23 12c0-6.075-4.925-11-11-11v2a9 9 0 0 1 9 9h2ZM12 1C5.925 1 1 5.925 1 12h2a9 9 0 0 1 9-9V1ZM1 12c0 6.075 4.925 11 11 11v-2a9 9 0 0 1-9-9H1Zm11 11c6.075 0 11-4.925 11-11h-2a9 9 0 0 1-9 9v2Zm1-7v-5.5h-2V16h2Zm-2-8.041v.04h2v-.04h-2Z\"\n />\n );\n"],"names":["_jsx"],"mappings":";;;;;;;AAIA,
|
|
1
|
+
{"version":3,"file":"Info.js","sources":["../../../../../../src/lib/components/icon/icons/Info.tsx"],"sourcesContent":["/* Generated file. Do not modify. */\nimport { createElement } from 'react';\nimport { IconWrapper } from '../IconWrapper';\nimport type { IconWrapperProps } from '../IconWrapper';\nexport default (props: IconWrapperProps) =>\n createElement(\n IconWrapper,\n props,\n <path\n fill=\"currentColor\"\n d=\"M11 16v1h2v-1h-2Zm2-8.041a1 1 0 1 0-2 0h2Zm-2 .04a1 1 0 1 0 2 0h-2ZM23 12c0-6.075-4.925-11-11-11v2a9 9 0 0 1 9 9h2ZM12 1C5.925 1 1 5.925 1 12h2a9 9 0 0 1 9-9V1ZM1 12c0 6.075 4.925 11 11 11v-2a9 9 0 0 1-9-9H1Zm11 11c6.075 0 11-4.925 11-11h-2a9 9 0 0 1-9 9v2Zm1-7v-5.5h-2V16h2Zm-2-8.041v.04h2v-.04h-2Z\"\n />\n );\n"],"names":["_jsx"],"mappings":";;;;;;;AAIA,gBAAe,UAAC,KAAuB;IACrC,OAAA,aAAa,CACX,WAAW,EACX,KAAK,EACLA,cACE,IAAI,EAAC,cAAc,EACnB,CAAC,EAAC,6SAA6S,WAC/S,CACH;AAPD,CAOC;;;;"}
|
|
@@ -2,7 +2,7 @@ import { _ as __assign } from '../../tslib.es6-5bc94358.js';
|
|
|
2
2
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
3
3
|
import { useState } from 'react';
|
|
4
4
|
import { Input } from '../input/index.js';
|
|
5
|
-
import { i as icons } from '../../index-
|
|
5
|
+
import { i as icons } from '../../index-03b0133a.js';
|
|
6
6
|
import { Button } from '../button/index.js';
|
|
7
7
|
import { c as classNames } from '../../index-6ea95111.js';
|
|
8
8
|
import { s as styleInject } from '../../style-inject.es-1f59c1d0.js';
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx } from 'react/jsx-runtime';
|
|
2
2
|
import { IconWrapper } from './IconWrapper/IconWrapper.js';
|
|
3
|
-
import { i as icons } from '../../index-
|
|
3
|
+
import { i as icons } from '../../index-03b0133a.js';
|
|
4
4
|
import '../../tslib.es6-5bc94358.js';
|
|
5
5
|
import '../../index-6ea95111.js';
|
|
6
6
|
import '../../style-inject.es-1f59c1d0.js';
|
|
@@ -175,7 +175,7 @@ import HospitalBuilding from './components/icon/icons/HospitalBuilding.js';
|
|
|
175
175
|
import ImagePicture from './components/icon/icons/ImagePicture.js';
|
|
176
176
|
import Inbox from './components/icon/icons/Inbox.js';
|
|
177
177
|
import InfoFilled from './components/icon/icons/InfoFilled.js';
|
|
178
|
-
import
|
|
178
|
+
import InfoIcon from './components/icon/icons/Info.js';
|
|
179
179
|
import Instagram from './components/icon/icons/Instagram.js';
|
|
180
180
|
import Italic from './components/icon/icons/Italic.js';
|
|
181
181
|
import Key from './components/icon/icons/Key.js';
|
|
@@ -539,7 +539,7 @@ var icons = /*#__PURE__*/Object.freeze({
|
|
|
539
539
|
ImagePictureIcon: ImagePicture,
|
|
540
540
|
InboxIcon: Inbox,
|
|
541
541
|
InfoFilledIcon: InfoFilled,
|
|
542
|
-
InfoIcon:
|
|
542
|
+
InfoIcon: InfoIcon,
|
|
543
543
|
InstagramIcon: Instagram,
|
|
544
544
|
ItalicIcon: Italic,
|
|
545
545
|
KeyIcon: Key,
|
|
@@ -726,4 +726,4 @@ var icons = /*#__PURE__*/Object.freeze({
|
|
|
726
726
|
});
|
|
727
727
|
|
|
728
728
|
export { icons as i };
|
|
729
|
-
//# sourceMappingURL=index-
|
|
729
|
+
//# sourceMappingURL=index-03b0133a.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index-
|
|
1
|
+
{"version":3,"file":"index-03b0133a.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { ElementType, ReactNode } from 'react';
|
|
2
|
-
declare const CardDefault: "
|
|
2
|
+
declare const CardDefault: "section";
|
|
3
3
|
declare type CardDefaultAsType = typeof CardDefault;
|
|
4
|
-
|
|
4
|
+
declare type CardOwnProps<E extends ElementType = CardDefaultAsType> = {
|
|
5
5
|
as?: E;
|
|
6
6
|
children?: ReactNode;
|
|
7
7
|
classNames?: {
|
|
@@ -25,6 +25,7 @@ export interface CardProps<E extends ElementType = CardDefaultAsType> {
|
|
|
25
25
|
onClick?: () => void;
|
|
26
26
|
actionIcon?: ReactNode;
|
|
27
27
|
showActionIcon?: boolean;
|
|
28
|
-
}
|
|
29
|
-
declare
|
|
28
|
+
};
|
|
29
|
+
export declare type CardProps<E extends ElementType = CardDefaultAsType> = CardOwnProps<E> & Omit<React.ComponentProps<E>, keyof CardOwnProps<E>>;
|
|
30
|
+
declare const Card: <E extends ElementType<any> = "section">({ as, children, classNames, density, description, descriptionVariant, dropShadow, icon, label, onClick, actionIcon, title, titleVariant, showActionIcon, ...rest }: CardProps<E>) => JSX.Element;
|
|
30
31
|
export { Card };
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
import { CardProps } from '.';
|
|
3
3
|
declare const story: {
|
|
4
4
|
title: string;
|
|
5
|
-
component: <E extends import("react").ElementType<any> = "
|
|
5
|
+
component: <E extends import("react").ElementType<any> = "section">({ as, children, classNames, density, description, descriptionVariant, dropShadow, icon, label, onClick, actionIcon, title, titleVariant, showActionIcon, ...rest }: CardProps<E>) => JSX.Element;
|
|
6
6
|
argTypes: {
|
|
7
7
|
as: {
|
|
8
8
|
control: {
|
|
@@ -77,9 +77,10 @@ export declare const CardStory: {
|
|
|
77
77
|
({ as, actionIcon, showActionIcon, children, classNames, density, description, descriptionVariant, dropShadow, icon, label, onClick, title, titleVariant, }: CardProps): JSX.Element;
|
|
78
78
|
storyName: string;
|
|
79
79
|
};
|
|
80
|
+
export declare const CardAsOtherComponents: () => JSX.Element;
|
|
80
81
|
export declare const CardDensities: () => JSX.Element;
|
|
81
|
-
export declare const CardsWithIcons: ({
|
|
82
|
-
export declare const CardWithOnClickAction: ({ children,
|
|
82
|
+
export declare const CardsWithIcons: ({ title }: CardProps) => JSX.Element;
|
|
83
|
+
export declare const CardWithOnClickAction: ({ children, title, }: CardProps) => JSX.Element;
|
|
83
84
|
export declare const CardOverridesStyles: ({ children, label, title, }: CardProps) => JSX.Element;
|
|
84
85
|
export declare const CardsWithinCardsAndComplexLayout: () => JSX.Element;
|
|
85
86
|
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
|
|
15
|
-
import { Card } from './components/card';
|
|
14
|
+
import { CardWithTopLeftIcon, CardWithLeftIcon, CardWithTopIcon, InfoCard, CardButton } from './components/cards';
|
|
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';
|
package/package.json
CHANGED
|
@@ -2,7 +2,7 @@ import { Card, CardProps } from '.';
|
|
|
2
2
|
import { illustrations } from '../../util/images';
|
|
3
3
|
import { Button } from '../button';
|
|
4
4
|
import { Badge } from '../badge';
|
|
5
|
-
import { CheckIcon, MehIcon, PlusCircleIcon, XIcon } from '../icon';
|
|
5
|
+
import { CheckIcon, InfoIcon, MehIcon, PlusCircleIcon, XIcon } from '../icon';
|
|
6
6
|
|
|
7
7
|
const story = {
|
|
8
8
|
title: 'JSX/Card',
|
|
@@ -111,6 +111,32 @@ export const CardStory = ({
|
|
|
111
111
|
|
|
112
112
|
CardStory.storyName = "Card";
|
|
113
113
|
|
|
114
|
+
export const CardAsOtherComponents = () => (
|
|
115
|
+
<div className='d-flex fd-column gap16 p24 bg-grey-200'>
|
|
116
|
+
|
|
117
|
+
<h3 className='p-h3'>As an anchor:</h3>
|
|
118
|
+
<Card
|
|
119
|
+
as="a"
|
|
120
|
+
href="https://feather-insurance.com"
|
|
121
|
+
target="_blank"
|
|
122
|
+
title="Card with an a tag"
|
|
123
|
+
density='compact'
|
|
124
|
+
/>
|
|
125
|
+
|
|
126
|
+
<h3 className='p-h3'>As a nav:</h3>
|
|
127
|
+
<Card
|
|
128
|
+
as="nav"
|
|
129
|
+
title="Card with a nav tag"
|
|
130
|
+
density='compact'
|
|
131
|
+
/>
|
|
132
|
+
|
|
133
|
+
<p className='p-p p-p--small fw-bold d-flex ai-center gap8 mt32'>
|
|
134
|
+
<InfoIcon />
|
|
135
|
+
Inspect elements to see the different HTML tags being rendered.
|
|
136
|
+
</p>
|
|
137
|
+
</div>
|
|
138
|
+
);
|
|
139
|
+
|
|
114
140
|
export const CardDensities = () => (
|
|
115
141
|
<div className='d-flex fd-column gap16 p24 bg-grey-200'>
|
|
116
142
|
<Card
|
|
@@ -128,11 +154,7 @@ export const CardDensities = () => (
|
|
|
128
154
|
</div>
|
|
129
155
|
);
|
|
130
156
|
|
|
131
|
-
export const CardsWithIcons = ({
|
|
132
|
-
children,
|
|
133
|
-
icon,
|
|
134
|
-
title,
|
|
135
|
-
}: CardProps) => (
|
|
157
|
+
export const CardsWithIcons = ({ title }: CardProps) => (
|
|
136
158
|
<div className='d-flex gap16 p24 bg-grey-200'>
|
|
137
159
|
<Card
|
|
138
160
|
icon={
|
|
@@ -145,7 +167,7 @@ export const CardsWithIcons = ({
|
|
|
145
167
|
title={title}
|
|
146
168
|
/>
|
|
147
169
|
<Card
|
|
148
|
-
icon={<MehIcon size={24} />}
|
|
170
|
+
icon={<MehIcon size={24} noMargin />}
|
|
149
171
|
title={title}
|
|
150
172
|
/>
|
|
151
173
|
</div>
|
|
@@ -153,7 +175,6 @@ export const CardsWithIcons = ({
|
|
|
153
175
|
|
|
154
176
|
export const CardWithOnClickAction = ({
|
|
155
177
|
children,
|
|
156
|
-
icon,
|
|
157
178
|
title,
|
|
158
179
|
}: CardProps) => (
|
|
159
180
|
<div className='d-flex p24 bg-grey-200'>
|