@popsure/dirty-swan 0.38.3 → 0.38.5
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 +33 -1897
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/lib/components/autocompleteAddress/index.d.ts +18 -1
- package/dist/cjs/lib/components/autocompleteAddress/index.stories.d.ts +1 -1
- package/dist/cjs/lib/components/multiDropzone/UploadFileCell/index.d.ts +1 -1
- package/dist/cjs/lib/components/multiDropzone/index.d.ts +1 -1
- package/dist/esm/components/autocompleteAddress/index.js +24 -1888
- package/dist/esm/components/autocompleteAddress/index.js.map +1 -1
- package/dist/esm/components/autocompleteAddress/index.stories.js +14 -14
- package/dist/esm/components/autocompleteAddress/index.stories.js.map +1 -1
- package/dist/esm/components/cards/index.js +3 -3
- package/dist/esm/components/cards/index.js.map +1 -1
- package/dist/esm/components/multiDropzone/UploadFileCell/index.js +1 -1
- package/dist/esm/components/multiDropzone/index.js +2 -2
- package/dist/esm/components/multiDropzone/index.js.map +1 -1
- package/dist/esm/components/multiDropzone/index.stories.js +3 -3
- package/dist/esm/components/multiDropzone/index.stories.js.map +1 -1
- package/dist/esm/components/multiDropzone/index.test.js +1 -1
- package/dist/esm/{index-da10b7ad.js → index-3e39c956.js} +7 -7
- package/dist/esm/{index-da10b7ad.js.map → index-3e39c956.js.map} +1 -1
- package/dist/esm/index.js +1 -1
- package/dist/esm/lib/components/autocompleteAddress/index.d.ts +18 -1
- package/dist/esm/lib/components/autocompleteAddress/index.stories.d.ts +1 -1
- package/dist/esm/lib/components/multiDropzone/UploadFileCell/index.d.ts +1 -1
- package/dist/esm/lib/components/multiDropzone/index.d.ts +1 -1
- package/package.json +1 -1
- package/src/lib/components/autocompleteAddress/index.stories.tsx +41 -33
- package/src/lib/components/autocompleteAddress/index.tsx +55 -53
- package/src/lib/components/cards/cardWithLeftIcon/index.tsx +4 -6
- package/src/lib/components/cards/cardWithTopLeftIcon/index.tsx +6 -8
- package/src/lib/components/multiDropzone/UploadFileCell/index.tsx +15 -13
- package/src/lib/components/multiDropzone/UploadFileCell/style.module.scss +5 -2
- package/src/lib/components/multiDropzone/index.stories.tsx +2 -2
- package/src/lib/components/multiDropzone/index.tsx +3 -2
|
@@ -17,7 +17,7 @@ var story = {
|
|
|
17
17
|
description: 'The address properties',
|
|
18
18
|
table: {
|
|
19
19
|
type: {
|
|
20
|
-
summary: 'Partial<Address>'
|
|
20
|
+
summary: 'Partial<Address>',
|
|
21
21
|
},
|
|
22
22
|
},
|
|
23
23
|
},
|
|
@@ -26,7 +26,7 @@ var story = {
|
|
|
26
26
|
description: 'Your private API key for the [Google Places API](https://developers.google.com/maps/documentation/places/web-service/overview)',
|
|
27
27
|
table: {
|
|
28
28
|
type: {
|
|
29
|
-
summary: 'Partial<Address>'
|
|
29
|
+
summary: 'Partial<Address>',
|
|
30
30
|
},
|
|
31
31
|
},
|
|
32
32
|
},
|
|
@@ -34,25 +34,25 @@ var story = {
|
|
|
34
34
|
description: 'Callback with the updated address, this function will get called everytime the address gets updated',
|
|
35
35
|
action: true,
|
|
36
36
|
table: {
|
|
37
|
-
category:
|
|
37
|
+
category: 'Callbacks',
|
|
38
38
|
},
|
|
39
39
|
},
|
|
40
40
|
manualAddressEntryTexts: {
|
|
41
41
|
description: 'The CTA that enables manual address entry and the text preceding it',
|
|
42
42
|
table: {
|
|
43
43
|
type: {
|
|
44
|
-
summary: '{ preText?: string; cta: string?; }'
|
|
45
|
-
}
|
|
46
|
-
}
|
|
44
|
+
summary: '{ preText?: string; cta: string?; }',
|
|
45
|
+
},
|
|
46
|
+
},
|
|
47
47
|
},
|
|
48
48
|
placeholders: {
|
|
49
49
|
description: 'Placeholder text',
|
|
50
50
|
table: {
|
|
51
51
|
type: {
|
|
52
|
-
summary: '{ manualAddressEntry?: string; street: string?; houseNumber?: string; additionalInformation?: string; postcode?: string; city?: string; }'
|
|
53
|
-
}
|
|
54
|
-
}
|
|
55
|
-
}
|
|
52
|
+
summary: '{ manualAddressEntry?: string; street: string?; houseNumber?: string; additionalInformation?: string; postcode?: string; city?: string; }',
|
|
53
|
+
},
|
|
54
|
+
},
|
|
55
|
+
},
|
|
56
56
|
},
|
|
57
57
|
parameters: {
|
|
58
58
|
componentSubtitle: 'Autocomplete Address are user interface elements which allow users start typing an address and get autocompletion suggestions on the address.',
|
|
@@ -62,20 +62,20 @@ var story = {
|
|
|
62
62
|
},
|
|
63
63
|
},
|
|
64
64
|
customTypes: {
|
|
65
|
-
Address: "interface Address {\n street: string;\n houseNumber: string;\n postcode: string;\n city: string;\n additionalInformation?: string;\n country: string;\n }"
|
|
66
|
-
}
|
|
65
|
+
Address: "interface Address {\n street: string;\n houseNumber: string;\n postcode: string;\n city: string;\n additionalInformation?: string;\n country: string;\n }",
|
|
66
|
+
},
|
|
67
67
|
},
|
|
68
68
|
};
|
|
69
69
|
var AutocompleteAddressStory = function (_a) {
|
|
70
70
|
var defaultAddress = _a.address, apiKey = _a.apiKey, manualAddressEntryTexts = _a.manualAddressEntryTexts, onAddressChange = _a.onAddressChange, placeholders = _a.placeholders;
|
|
71
71
|
var _b = useState(defaultAddress), address = _b[0], setAddress = _b[1];
|
|
72
72
|
var handleOnAddressChange = function (newAddress) {
|
|
73
|
-
onAddressChange(newAddress);
|
|
73
|
+
onAddressChange === null || onAddressChange === void 0 ? void 0 : onAddressChange(newAddress);
|
|
74
74
|
setAddress(newAddress);
|
|
75
75
|
};
|
|
76
76
|
return (jsx(AutocompleteAddress, { address: address, apiKey: apiKey, manualAddressEntryTexts: manualAddressEntryTexts, onAddressChange: handleOnAddressChange, placeholders: placeholders }, void 0));
|
|
77
77
|
};
|
|
78
|
-
AutocompleteAddressStory.storyName =
|
|
78
|
+
AutocompleteAddressStory.storyName = 'AutocompleteAddress';
|
|
79
79
|
var WithAddress = function (_a) {
|
|
80
80
|
var apiKey = _a.apiKey, onAddressChange = _a.onAddressChange; _a.placeholders;
|
|
81
81
|
return (jsx(AutocompleteAddress, { address: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.stories.js","sources":["../../../../../src/lib/components/autocompleteAddress/index.stories.tsx"],"sourcesContent":["import { Address } from '@popsure/public-models';\nimport { useState } from 'react';\nimport { AutocompleteAddress, AutocompleteAddressProps } from '.';\n\nconst story = {\n title: 'JSX/AutocompleteAddress',\n component: AutocompleteAddress,\n argTypes: {\n address: {\n description: 'The address properties',\n table: {\n type: {
|
|
1
|
+
{"version":3,"file":"index.stories.js","sources":["../../../../../src/lib/components/autocompleteAddress/index.stories.tsx"],"sourcesContent":["import { Address } from '@popsure/public-models';\nimport { useState } from 'react';\nimport { AutocompleteAddress, AutocompleteAddressProps } from '.';\n\nconst story = {\n title: 'JSX/AutocompleteAddress',\n component: AutocompleteAddress,\n argTypes: {\n address: {\n description: 'The address properties',\n table: {\n type: {\n summary: 'Partial<Address>',\n },\n },\n },\n apiKey: {\n defaultValue: 'AIzaSyDg0DSrjYKt5smmsjkVasDz7c4T5rbOXT8',\n description:\n 'Your private API key for the [Google Places API](https://developers.google.com/maps/documentation/places/web-service/overview)',\n table: {\n type: {\n summary: 'Partial<Address>',\n },\n },\n },\n onAddressChange: {\n description:\n 'Callback with the updated address, this function will get called everytime the address gets updated',\n action: true,\n table: {\n category: 'Callbacks',\n },\n },\n manualAddressEntryTexts: {\n description:\n 'The CTA that enables manual address entry and the text preceding it',\n table: {\n type: {\n summary: '{ preText?: string; cta: string?; }',\n },\n },\n },\n placeholders: {\n description: 'Placeholder text',\n table: {\n type: {\n summary:\n '{ manualAddressEntry?: string; street: string?; houseNumber?: string; additionalInformation?: string; postcode?: string; city?: string; }',\n },\n },\n },\n },\n parameters: {\n componentSubtitle:\n 'Autocomplete Address are user interface elements which allow users start typing an address and get autocompletion suggestions on the address.',\n docs: {\n description: {\n component:\n 'This component is for now only restricted to \"address\" types and will restrict every query to Germany.',\n },\n },\n customTypes: {\n Address: `interface Address {\n street: string;\n houseNumber: string;\n postcode: string;\n city: string;\n additionalInformation?: string;\n country: string;\n }`,\n },\n },\n};\n\nexport const AutocompleteAddressStory = ({\n address: defaultAddress,\n apiKey,\n manualAddressEntryTexts,\n onAddressChange,\n placeholders,\n}: AutocompleteAddressProps) => {\n const [address, setAddress] = useState<Partial<Address> | undefined>(\n defaultAddress\n );\n const handleOnAddressChange = (newAddress: Partial<Address>) => {\n onAddressChange?.(newAddress);\n setAddress(newAddress);\n };\n\n return (\n <AutocompleteAddress\n address={address}\n apiKey={apiKey}\n manualAddressEntryTexts={manualAddressEntryTexts}\n onAddressChange={handleOnAddressChange}\n placeholders={placeholders}\n />\n );\n};\n\nAutocompleteAddressStory.storyName = 'AutocompleteAddress';\n\nexport const WithAddress = ({\n apiKey,\n onAddressChange,\n placeholders,\n}: AutocompleteAddressProps) => (\n <AutocompleteAddress\n address={{\n street: 'Lohmuehlenstraße',\n houseNumber: '65',\n city: 'Berlin',\n country: 'DE',\n additionalInformation: 'c/o Factory',\n }}\n apiKey={apiKey}\n onAddressChange={onAddressChange}\n />\n);\n\nexport const WithLocalisationEntryText = ({\n apiKey,\n onAddressChange,\n}: AutocompleteAddressProps) => (\n <AutocompleteAddress\n apiKey={apiKey}\n manualAddressEntryTexts={{\n preText: 'Oder ',\n cta: 'Adresse direkt eingeben',\n }}\n onAddressChange={onAddressChange}\n />\n);\n\nexport const WithLocalisationPlaceholders = ({\n apiKey,\n onAddressChange,\n}: AutocompleteAddressProps) => (\n <AutocompleteAddress\n address={{}}\n apiKey={apiKey}\n placeholders={{\n manualAddressEntry: 'Adresse suchen',\n street: 'Straße',\n houseNumber: 'Hausnummer',\n additionalInformation: 'Adresszusatz (c/o, z.Hd., o.V.i.A, ...)',\n postcode: 'PLZ',\n city: 'Stadt',\n }}\n onAddressChange={onAddressChange}\n />\n);\n\nexport default story;\n"],"names":["_jsx"],"mappings":"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"}
|
|
@@ -28,7 +28,7 @@ var CardWithTopLeftIcon = function (_a) {
|
|
|
28
28
|
return (jsxs("div", __assign({ className: cardStyle }, props, { children: [jsxs("div", __assign({ className: titleContainerStyle }, { children: [leftIcon && (jsx("img", { className: "mr8", width: "28px", height: "28px", src: leftIcon === 'logo' ? featherLogo.src : leftIcon.src, alt: leftIcon === 'logo' ? featherLogo.alt : leftIcon.src }, void 0)),
|
|
29
29
|
jsx("div", __assign({ className: headingStyle }, { children: title }), void 0),
|
|
30
30
|
rightIcon && (jsx("img", { className: iconStyle, width: "24px", height: "24px", src: rightIcon === 'arrow' ? arrowRight.src : rightIcon.src, alt: rightIcon === 'arrow' ? arrowRight.alt : rightIcon.alt }, void 0))] }), void 0),
|
|
31
|
-
jsx("
|
|
31
|
+
jsx("div", __assign({ className: cardTextStyle }, { children: children }), void 0)] }), void 0));
|
|
32
32
|
};
|
|
33
33
|
|
|
34
34
|
var css_248z$2 = ".style-module_container__34kUF {\n padding: 32px 24px 24px 24px;\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n\n.style-module_right-icon__3_kH9 {\n margin-left: 4px;\n}";
|
|
@@ -117,10 +117,10 @@ var CardWithLeftIcon = function (_a) {
|
|
|
117
117
|
var iconStyle = cardSize === 'xsmall' ? 'mr16' : 'mr32';
|
|
118
118
|
var cardTextStyle = "tc-grey-600 " + (cardSize === 'xsmall' ? 'p-p--small' : 'p-p ') + " " + styles[cardTextStyleFromCardSize(cardSize)];
|
|
119
119
|
return (jsxs("div", __assign({ className: cardStyle }, props, { children: [leftIcon && (jsx("img", { width: ((leftIconSize === null || leftIconSize === void 0 ? void 0 : leftIconSize.width) || 48) + "px", height: ((leftIconSize === null || leftIconSize === void 0 ? void 0 : leftIconSize.height) || 48) + "px", className: iconStyle, src: leftIcon.src, alt: leftIcon.alt }, void 0)),
|
|
120
|
-
jsxs("div", { children: [jsxs("div", __assign({ className: "d-flex" }, { children: [(title || subtitle) && (jsxs("div", { children: [title &&
|
|
120
|
+
jsxs("div", { children: [jsxs("div", __assign({ className: "d-flex" }, { children: [(title || subtitle) && (jsxs("div", { children: [title && jsx("div", __assign({ className: headingStyle }, { children: title }), void 0),
|
|
121
121
|
subtitle && (jsx("div", __assign({ className: "tc-grey-500 " + headingStyle }, { children: subtitle }), void 0))] }, void 0)),
|
|
122
122
|
rightIcon && (jsx("img", { className: "ml-auto", width: "24px", height: "24px", src: rightIcon === 'arrow' ? arrowRight.src : rightIcon.src, alt: rightIcon === 'arrow' ? arrowRight.alt : rightIcon.alt }, void 0))] }), void 0),
|
|
123
|
-
jsx("
|
|
123
|
+
jsx("div", __assign({ className: cardTextStyle }, { children: children }), void 0)] }, void 0)] }), void 0));
|
|
124
124
|
};
|
|
125
125
|
|
|
126
126
|
export { CardWithLeftIcon, CardWithTopIcon, CardWithTopLeftIcon, InfoCard, associatedClassForCardState, headingForCardSize };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../../src/lib/components/cards/cardWithTopLeftIcon/index.tsx","../../../../../src/lib/components/cards/cardWithTopIcon/index.tsx","../../../../../src/lib/components/cards/infoCard/index.tsx","../../../../../src/lib/components/cards/index.tsx","../../../../../src/lib/components/cards/cardWithLeftIcon/index.tsx"],"sourcesContent":["import {\n associatedClassForCardState,\n CardProps,\n headingForCardSize,\n} from '..';\nimport { Icon, arrowRight, featherLogo } from '../icons';\n\nimport styles from './style.module.scss';\n\nconst containerStyleFromTitleSize = (\n titleSize: 'xsmall' | 'small' | 'medium' | 'big'\n): string => {\n switch (titleSize) {\n case 'xsmall':\n return 'container--xsmall';\n default:\n return 'container';\n }\n};\n\nexport type CardWithTopLeftIconProps = CardProps & {\n cardSize?: 'xsmall' | 'small' | 'medium' | 'big';\n leftIcon?: 'logo' | Icon;\n rightIcon?: 'arrow' | Icon;\n};\n\nexport const CardWithTopLeftIcon = ({\n className,\n title,\n cardSize = 'medium',\n children,\n leftIcon,\n rightIcon,\n state = 'actionable',\n dropshadow = true,\n ...props\n}: CardWithTopLeftIconProps) => {\n const cardStyle = `${className} ${associatedClassForCardState(\n state,\n dropshadow\n )} ${styles[containerStyleFromTitleSize(cardSize)]}`;\n\n const titleContainerStyle = styles['title-container'];\n const headingStyle = headingForCardSize(cardSize);\n const iconStyle = styles['right-icon'];\n const cardTextStyle = `p-p tc-grey-600 ${cardSize === 'xsmall' ? styles.indent : 'mt16'}`;\n\n return (\n <div className={cardStyle} {...props}>\n <div className={titleContainerStyle}>\n {leftIcon && (\n <img\n className=\"mr8\"\n width=\"28px\"\n height=\"28px\"\n src={leftIcon === 'logo' ? featherLogo.src : leftIcon.src}\n alt={leftIcon === 'logo' ? featherLogo.alt : leftIcon.src}\n />\n )}\n <div className={headingStyle}>{title}</div>\n {rightIcon && (\n <img\n className={iconStyle}\n width=\"24px\"\n height=\"24px\"\n src={rightIcon === 'arrow' ? arrowRight.src : rightIcon.src}\n alt={rightIcon === 'arrow' ? arrowRight.alt : rightIcon.alt}\n />\n )}\n </div>\n <p className={cardTextStyle}>{children}</p>\n </div>\n );\n};\n","import { associatedClassForCardState, CardProps, headingForCardSize } from '..';\nimport { Icon, arrowRight, IconSize } from '../icons';\n\nimport styles from './style.module.scss';\n\nexport type CardWithTopIconProps = CardProps & {\n topIcon: Icon;\n topIconSize: IconSize;\n cardSize?: 'small' | 'medium' | 'big';\n rightIcon?: 'arrow' | Icon;\n};\n\nexport const CardWithTopIcon = ({\n className,\n title,\n cardSize = 'medium',\n children,\n topIcon,\n topIconSize = { width: 48, height: 48 },\n rightIcon,\n state = 'actionable',\n dropshadow = true,\n ...props\n}: CardWithTopIconProps) => {\n const cardStyle = `d-flex fd-column ai-center ${className} ${associatedClassForCardState(\n state,\n dropshadow\n )} ${styles.container}`;\n\n const headingStyle = headingForCardSize(cardSize);\n const iconStyle = styles['right-icon'];\n\n return (\n <>\n <div className={cardStyle} {...props}>\n <img\n width={topIconSize.width}\n height={topIconSize.height}\n alt={topIcon.alt}\n src={topIcon.src}\n />\n <div className=\"d-flex mt16\">\n <div className={headingStyle}>{title}</div>\n {rightIcon && (\n <img\n className={iconStyle}\n width=\"24px\"\n height=\"24px\"\n src={rightIcon === 'arrow' ? arrowRight.src : rightIcon.src}\n alt={rightIcon === 'arrow' ? arrowRight.alt : rightIcon.alt}\n />\n )}\n </div>\n {children}\n </div>\n </>\n );\n};\n","import { associatedClassForCardState, CardProps } from '..';\nimport { Icon, info } from '../icons';\n\nimport styles from './style.module.scss';\n\nexport type InfoCardProps = CardProps & {\n topIcon: Icon;\n rightIcon?: 'info' | Icon;\n};\n\nexport const InfoCard = ({\n className,\n title,\n children,\n topIcon,\n rightIcon,\n state = 'actionable',\n dropshadow = true,\n ...props\n}: InfoCardProps) => (\n <div className={`${styles['root-container']} ${className ?? ''}`} {...props}>\n <img\n src={topIcon.src}\n alt={topIcon.alt}\n className={`${styles['top-icon']} ${\n state === 'muted' ? styles['top-icon--muted'] : ''\n } `}\n width=\"80px\"\n height=\"80px\"\n />\n <div\n className={`${associatedClassForCardState(state, dropshadow)} ${\n styles.container\n }`}\n >\n {rightIcon && (\n <img\n width=\"20px\"\n height=\"20px\"\n className={styles['right-icon']}\n src={rightIcon === 'info' ? info.src : rightIcon.src}\n alt={rightIcon === 'info' ? info.alt : rightIcon.alt}\n />\n )}\n <div className=\"p-h4 ta-center mt64\">{title}</div>\n <p className=\"p-p mt16 tc-grey-600\">{children}</p>\n </div>\n </div>\n);\n","import { CardWithTopLeftIcon } from './cardWithTopLeftIcon';\nimport { CardWithLeftIcon } from './cardWithLeftIcon';\nimport { CardWithTopIcon } from './cardWithTopIcon';\nimport { InfoCard } from './infoCard';\nimport { CardButton } from './cardButton';\n\ntype CardState = 'actionable' | 'static' | 'muted';\n\nexport type CardProps = {\n title: string;\n children: React.ReactNode;\n state?: CardState;\n dropshadow?: boolean;\n} & JSX.IntrinsicElements['div'];\n\nexport const headingForCardSize = (\n cardSize: 'xsmall' | 'small' | 'medium' | 'big'\n): string => {\n switch (cardSize) {\n case 'xsmall':\n case 'small':\n return 'p-h4';\n case 'medium':\n return 'p-h3';\n case 'big':\n return 'p-h2';\n }\n};\n\nexport const associatedClassForCardState = (\n state: CardState,\n dropshadow: boolean\n): string => {\n const baseClass = (() => {\n switch (state) {\n case 'actionable':\n return 'ds-card--actionable';\n case 'muted':\n return 'ds-card--muted';\n case 'static':\n return 'ds-card';\n }\n })();\n\n if (dropshadow === false) {\n return `${baseClass} ds-card--no-dropshadow`;\n }\n return baseClass;\n};\n\nexport {\n CardWithTopLeftIcon,\n CardWithLeftIcon,\n CardWithTopIcon,\n InfoCard,\n CardButton,\n};\n","import { associatedClassForCardState, CardProps, headingForCardSize } from '..';\nimport { Icon, IconSize, arrowRight } from '../icons';\n\nimport styles from './style.module.scss';\n\nconst containerStyleFromCardSize = (\n cardSize: 'xsmall' | 'small' | 'medium' | 'big'\n): string => {\n switch (cardSize) {\n case 'xsmall':\n return 'container--xsmall';\n case 'small':\n return 'container--small';\n default:\n return 'container';\n }\n};\n\nconst cardTextStyleFromCardSize = (\n cardSize: 'xsmall' | 'small' | 'medium' | 'big'\n): string => {\n switch (cardSize) {\n case 'xsmall':\n case 'small':\n return 'card-text--small';\n case 'medium':\n return 'card-text--medium';\n default:\n return 'card-text--big';\n }\n};\n\nexport type CardWithLeftIconProps = Omit<CardProps, 'title'> & {\n cardSize?: 'xsmall' | 'small' | 'medium' | 'big';\n leftIcon?: Icon;\n rightIcon?: 'arrow' | Icon;\n leftIconSize?: IconSize;\n title?: string;\n subtitle?: string;\n}\n\nexport const CardWithLeftIcon = ({\n className = '',\n title,\n subtitle,\n cardSize = 'medium',\n children,\n leftIcon,\n rightIcon,\n state = 'actionable',\n dropshadow = true,\n leftIconSize,\n ...props\n}: CardWithLeftIconProps) => {\n const cardStyle = `d-flex ai-center ${className} ${associatedClassForCardState(\n state,\n dropshadow\n )} ${styles[containerStyleFromCardSize(cardSize)]}`;\n\n const headingStyle = headingForCardSize(cardSize);\n const iconStyle = cardSize === 'xsmall' ? 'mr16' : 'mr32';\n const cardTextStyle = `tc-grey-600 ${\n cardSize === 'xsmall' ? 'p-p--small' : 'p-p '\n } ${styles[cardTextStyleFromCardSize(cardSize)]}`;\n\n return (\n <div className={cardStyle} {...props}>\n {leftIcon && (\n <img\n width={`${leftIconSize?.width || 48}px`}\n height={`${leftIconSize?.height || 48}px`}\n className={iconStyle}\n src={leftIcon.src}\n alt={leftIcon.alt}\n />\n )}\n <div>\n <div className=\"d-flex\">\n {(title || subtitle) && (\n <div>\n {title && (\n <div className={headingStyle}>{title}</div>\n )}\n {subtitle && (\n <div className={`tc-grey-500 ${headingStyle}`}>{subtitle}</div>\n )}\n </div>\n )}\n {rightIcon && (\n <img\n className=\"ml-auto\"\n width=\"24px\"\n height=\"24px\"\n src={rightIcon === 'arrow' ? arrowRight.src : rightIcon.src}\n alt={rightIcon === 'arrow' ? arrowRight.alt : rightIcon.alt}\n />\n )}\n </div>\n <p className={cardTextStyle}>{children}</p>\n </div>\n </div>\n );\n};\n"],"names":["styles","_jsxs","_jsx"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../../src/lib/components/cards/cardWithTopLeftIcon/index.tsx","../../../../../src/lib/components/cards/cardWithTopIcon/index.tsx","../../../../../src/lib/components/cards/infoCard/index.tsx","../../../../../src/lib/components/cards/index.tsx","../../../../../src/lib/components/cards/cardWithLeftIcon/index.tsx"],"sourcesContent":["import { associatedClassForCardState, CardProps, headingForCardSize } from '..';\nimport { arrowRight, featherLogo, Icon } from '../icons';\n\nimport styles from './style.module.scss';\n\nconst containerStyleFromTitleSize = (\n titleSize: 'xsmall' | 'small' | 'medium' | 'big'\n): string => {\n switch (titleSize) {\n case 'xsmall':\n return 'container--xsmall';\n default:\n return 'container';\n }\n};\n\nexport type CardWithTopLeftIconProps = CardProps & {\n cardSize?: 'xsmall' | 'small' | 'medium' | 'big';\n leftIcon?: 'logo' | Icon;\n rightIcon?: 'arrow' | Icon;\n};\n\nexport const CardWithTopLeftIcon = ({\n className,\n title,\n cardSize = 'medium',\n children,\n leftIcon,\n rightIcon,\n state = 'actionable',\n dropshadow = true,\n ...props\n}: CardWithTopLeftIconProps) => {\n const cardStyle = `${className} ${associatedClassForCardState(\n state,\n dropshadow\n )} ${styles[containerStyleFromTitleSize(cardSize)]}`;\n\n const titleContainerStyle = styles['title-container'];\n const headingStyle = headingForCardSize(cardSize);\n const iconStyle = styles['right-icon'];\n const cardTextStyle = `p-p tc-grey-600 ${\n cardSize === 'xsmall' ? styles.indent : 'mt16'\n }`;\n\n return (\n <div className={cardStyle} {...props}>\n <div className={titleContainerStyle}>\n {leftIcon && (\n <img\n className=\"mr8\"\n width=\"28px\"\n height=\"28px\"\n src={leftIcon === 'logo' ? featherLogo.src : leftIcon.src}\n alt={leftIcon === 'logo' ? featherLogo.alt : leftIcon.src}\n />\n )}\n <div className={headingStyle}>{title}</div>\n {rightIcon && (\n <img\n className={iconStyle}\n width=\"24px\"\n height=\"24px\"\n src={rightIcon === 'arrow' ? arrowRight.src : rightIcon.src}\n alt={rightIcon === 'arrow' ? arrowRight.alt : rightIcon.alt}\n />\n )}\n </div>\n <div className={cardTextStyle}>{children}</div>\n </div>\n );\n};\n","import { associatedClassForCardState, CardProps, headingForCardSize } from '..';\nimport { Icon, arrowRight, IconSize } from '../icons';\n\nimport styles from './style.module.scss';\n\nexport type CardWithTopIconProps = CardProps & {\n topIcon: Icon;\n topIconSize: IconSize;\n cardSize?: 'small' | 'medium' | 'big';\n rightIcon?: 'arrow' | Icon;\n};\n\nexport const CardWithTopIcon = ({\n className,\n title,\n cardSize = 'medium',\n children,\n topIcon,\n topIconSize = { width: 48, height: 48 },\n rightIcon,\n state = 'actionable',\n dropshadow = true,\n ...props\n}: CardWithTopIconProps) => {\n const cardStyle = `d-flex fd-column ai-center ${className} ${associatedClassForCardState(\n state,\n dropshadow\n )} ${styles.container}`;\n\n const headingStyle = headingForCardSize(cardSize);\n const iconStyle = styles['right-icon'];\n\n return (\n <>\n <div className={cardStyle} {...props}>\n <img\n width={topIconSize.width}\n height={topIconSize.height}\n alt={topIcon.alt}\n src={topIcon.src}\n />\n <div className=\"d-flex mt16\">\n <div className={headingStyle}>{title}</div>\n {rightIcon && (\n <img\n className={iconStyle}\n width=\"24px\"\n height=\"24px\"\n src={rightIcon === 'arrow' ? arrowRight.src : rightIcon.src}\n alt={rightIcon === 'arrow' ? arrowRight.alt : rightIcon.alt}\n />\n )}\n </div>\n {children}\n </div>\n </>\n );\n};\n","import { associatedClassForCardState, CardProps } from '..';\nimport { Icon, info } from '../icons';\n\nimport styles from './style.module.scss';\n\nexport type InfoCardProps = CardProps & {\n topIcon: Icon;\n rightIcon?: 'info' | Icon;\n};\n\nexport const InfoCard = ({\n className,\n title,\n children,\n topIcon,\n rightIcon,\n state = 'actionable',\n dropshadow = true,\n ...props\n}: InfoCardProps) => (\n <div className={`${styles['root-container']} ${className ?? ''}`} {...props}>\n <img\n src={topIcon.src}\n alt={topIcon.alt}\n className={`${styles['top-icon']} ${\n state === 'muted' ? styles['top-icon--muted'] : ''\n } `}\n width=\"80px\"\n height=\"80px\"\n />\n <div\n className={`${associatedClassForCardState(state, dropshadow)} ${\n styles.container\n }`}\n >\n {rightIcon && (\n <img\n width=\"20px\"\n height=\"20px\"\n className={styles['right-icon']}\n src={rightIcon === 'info' ? info.src : rightIcon.src}\n alt={rightIcon === 'info' ? info.alt : rightIcon.alt}\n />\n )}\n <div className=\"p-h4 ta-center mt64\">{title}</div>\n <p className=\"p-p mt16 tc-grey-600\">{children}</p>\n </div>\n </div>\n);\n","import { CardWithTopLeftIcon } from './cardWithTopLeftIcon';\nimport { CardWithLeftIcon } from './cardWithLeftIcon';\nimport { CardWithTopIcon } from './cardWithTopIcon';\nimport { InfoCard } from './infoCard';\nimport { CardButton } from './cardButton';\n\ntype CardState = 'actionable' | 'static' | 'muted';\n\nexport type CardProps = {\n title: string;\n children: React.ReactNode;\n state?: CardState;\n dropshadow?: boolean;\n} & JSX.IntrinsicElements['div'];\n\nexport const headingForCardSize = (\n cardSize: 'xsmall' | 'small' | 'medium' | 'big'\n): string => {\n switch (cardSize) {\n case 'xsmall':\n case 'small':\n return 'p-h4';\n case 'medium':\n return 'p-h3';\n case 'big':\n return 'p-h2';\n }\n};\n\nexport const associatedClassForCardState = (\n state: CardState,\n dropshadow: boolean\n): string => {\n const baseClass = (() => {\n switch (state) {\n case 'actionable':\n return 'ds-card--actionable';\n case 'muted':\n return 'ds-card--muted';\n case 'static':\n return 'ds-card';\n }\n })();\n\n if (dropshadow === false) {\n return `${baseClass} ds-card--no-dropshadow`;\n }\n return baseClass;\n};\n\nexport {\n CardWithTopLeftIcon,\n CardWithLeftIcon,\n CardWithTopIcon,\n InfoCard,\n CardButton,\n};\n","import { associatedClassForCardState, CardProps, headingForCardSize } from '..';\nimport { arrowRight, Icon, IconSize } from '../icons';\n\nimport styles from './style.module.scss';\n\nconst containerStyleFromCardSize = (\n cardSize: 'xsmall' | 'small' | 'medium' | 'big'\n): string => {\n switch (cardSize) {\n case 'xsmall':\n return 'container--xsmall';\n case 'small':\n return 'container--small';\n default:\n return 'container';\n }\n};\n\nconst cardTextStyleFromCardSize = (\n cardSize: 'xsmall' | 'small' | 'medium' | 'big'\n): string => {\n switch (cardSize) {\n case 'xsmall':\n case 'small':\n return 'card-text--small';\n case 'medium':\n return 'card-text--medium';\n default:\n return 'card-text--big';\n }\n};\n\nexport type CardWithLeftIconProps = Omit<CardProps, 'title'> & {\n cardSize?: 'xsmall' | 'small' | 'medium' | 'big';\n leftIcon?: Icon;\n rightIcon?: 'arrow' | Icon;\n leftIconSize?: IconSize;\n title?: string;\n subtitle?: string;\n};\n\nexport const CardWithLeftIcon = ({\n className = '',\n title,\n subtitle,\n cardSize = 'medium',\n children,\n leftIcon,\n rightIcon,\n state = 'actionable',\n dropshadow = true,\n leftIconSize,\n ...props\n}: CardWithLeftIconProps) => {\n const cardStyle = `d-flex ai-center ${className} ${associatedClassForCardState(\n state,\n dropshadow\n )} ${styles[containerStyleFromCardSize(cardSize)]}`;\n\n const headingStyle = headingForCardSize(cardSize);\n const iconStyle = cardSize === 'xsmall' ? 'mr16' : 'mr32';\n const cardTextStyle = `tc-grey-600 ${\n cardSize === 'xsmall' ? 'p-p--small' : 'p-p '\n } ${styles[cardTextStyleFromCardSize(cardSize)]}`;\n\n return (\n <div className={cardStyle} {...props}>\n {leftIcon && (\n <img\n width={`${leftIconSize?.width || 48}px`}\n height={`${leftIconSize?.height || 48}px`}\n className={iconStyle}\n src={leftIcon.src}\n alt={leftIcon.alt}\n />\n )}\n <div>\n <div className=\"d-flex\">\n {(title || subtitle) && (\n <div>\n {title && <div className={headingStyle}>{title}</div>}\n {subtitle && (\n <div className={`tc-grey-500 ${headingStyle}`}>{subtitle}</div>\n )}\n </div>\n )}\n {rightIcon && (\n <img\n className=\"ml-auto\"\n width=\"24px\"\n height=\"24px\"\n src={rightIcon === 'arrow' ? arrowRight.src : rightIcon.src}\n alt={rightIcon === 'arrow' ? arrowRight.alt : rightIcon.alt}\n />\n )}\n </div>\n <div className={cardTextStyle}>{children}</div>\n </div>\n </div>\n );\n};\n"],"names":["styles","_jsxs","_jsx"],"mappings":"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"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import '../../../tslib.es6-5bc94358.js';
|
|
2
2
|
import 'react/jsx-runtime';
|
|
3
3
|
import '../../../index-6ea95111.js';
|
|
4
|
-
export { U as default } from '../../../index-
|
|
4
|
+
export { U as default } from '../../../index-3e39c956.js';
|
|
5
5
|
import '../../../style-inject.es-1f59c1d0.js';
|
|
6
6
|
//# sourceMappingURL=index.js.map
|
|
@@ -6,7 +6,7 @@ import { o as objectAssign } from '../../index-dd80248b.js';
|
|
|
6
6
|
import { A as AnimateHeight } from '../../index-e27b50cf.js';
|
|
7
7
|
import { g as generateId } from '../../index-fb46adf9.js';
|
|
8
8
|
import { s as styleInject } from '../../style-inject.es-1f59c1d0.js';
|
|
9
|
-
import { i as icons, U as UploadFileCell } from '../../index-
|
|
9
|
+
import { i as icons, U as UploadFileCell } from '../../index-3e39c956.js';
|
|
10
10
|
|
|
11
11
|
var propTypes = {exports: {}};
|
|
12
12
|
|
|
@@ -2857,7 +2857,7 @@ var MultiDropzone = function (_a) {
|
|
|
2857
2857
|
progress: 0,
|
|
2858
2858
|
}, onRemoveFile: function () { return removeError(id); }, uploading: false }, id));
|
|
2859
2859
|
}),
|
|
2860
|
-
uploadedFiles.length > 0 && (jsx("div", __assign({ className: "w100 mt16" }, { children: uploadedFiles.map(function (file) { return (jsx(UploadFileCell, { uploadStatus: getUploadStatus(file.progress, file.error), file: file, onRemoveFile: onRemoveFile, uploading: uploading }, file.id)); }) }), void 0)),
|
|
2860
|
+
uploadedFiles.length > 0 && (jsx("div", __assign({ className: "w100 mt16" }, { children: uploadedFiles.map(function (file) { return (jsx(UploadFileCell, __assign({ uploadStatus: getUploadStatus(file.progress, file.error), file: file }, !onRemoveFile ? {} : { onRemoveFile: onRemoveFile }, { uploading: uploading }), file.id)); }) }), void 0)),
|
|
2861
2861
|
jsx(AnimateHeight, __assign({ duration: 300, height: isOverMaxFiles ? 'auto' : 0 }, { children: jsx("p", __assign({ className: "tc-red-500 p-p--small" }, { children: (textOverrides === null || textOverrides === void 0 ? void 0 : textOverrides.tooManyFilesError) || 'Too many files.' }), void 0) }), void 0)] }), void 0));
|
|
2862
2862
|
};
|
|
2863
2863
|
|