@mrshmllw/smores-react 2.19.3 → 3.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Accordion/Accordion.d.ts +1 -0
- package/dist/Accordion/Accordion.js +16 -12
- package/dist/Accordion/Accordion.js.map +1 -1
- package/dist/Accordion/Accordion.stories.d.ts +1 -2
- package/dist/Accordion/Accordion.stories.js +2 -8
- package/dist/Accordion/Accordion.stories.js.map +1 -1
- package/dist/Accordion/Collection.d.ts +2 -0
- package/dist/Accordion/Collection.js +52 -0
- package/dist/Accordion/Collection.js.map +1 -0
- package/dist/Accordion/__tests__/Accordion.js +9 -0
- package/dist/Accordion/__tests__/Accordion.js.map +1 -0
- package/dist/ActionDropdown/ActionDropdown.js +7 -7
- package/dist/ActionDropdown/ActionDropdown.js.map +1 -1
- package/dist/ActionDropdown/ActionDropdown.stories.js +1 -1
- package/dist/ActionDropdown/Container.js +16 -10
- package/dist/ActionDropdown/Container.js.map +1 -1
- package/dist/ActionDropdown/List.js +3 -3
- package/dist/ActionDropdown/List.js.map +1 -1
- package/dist/ActionDropdown/__tests__/ActionDropdown.js +3 -3
- package/dist/ActionDropdown/__tests__/ActionDropdown.js.map +1 -1
- package/dist/Banner/Banner.stories.d.ts +9 -0
- package/dist/Banner/Banner.stories.js +86 -0
- package/dist/Banner/Banner.stories.js.map +1 -0
- package/dist/Banner/BannerContainer.d.ts +7 -0
- package/dist/Banner/BannerContainer.js +40 -0
- package/dist/Banner/BannerContainer.js.map +1 -0
- package/dist/Banner/BannerItem.d.ts +7 -0
- package/dist/Banner/BannerItem.js +64 -0
- package/dist/Banner/BannerItem.js.map +1 -0
- package/dist/Banner/hooks.d.ts +3 -0
- package/dist/Banner/hooks.js +6 -0
- package/dist/Banner/hooks.js.map +1 -0
- package/dist/Banner/index.d.ts +2 -0
- package/dist/Banner/index.js +3 -0
- package/dist/Banner/index.js.map +1 -0
- package/dist/Banner/types.d.ts +18 -0
- package/dist/Banner/types.js +2 -0
- package/dist/Banner/types.js.map +1 -0
- package/dist/Box/Box.stories.js +2 -2
- package/dist/Box/Box.stories.js.map +1 -1
- package/dist/BrandCard/BrandCard.d.ts +27 -0
- package/dist/BrandCard/BrandCard.js +60 -0
- package/dist/BrandCard/BrandCard.js.map +1 -0
- package/dist/BrandCard/BrandCard.stories.d.ts +11 -0
- package/dist/BrandCard/BrandCard.stories.js +54 -0
- package/dist/BrandCard/BrandCard.stories.js.map +1 -0
- package/dist/BrandCard/__tests__/BrandCard.js +9 -0
- package/dist/BrandCard/__tests__/BrandCard.js.map +1 -0
- package/dist/BrandCard/index.d.ts +1 -0
- package/dist/BrandCard/index.js +2 -0
- package/dist/BrandCard/index.js.map +1 -0
- package/dist/Button/Button.d.ts +4 -6
- package/dist/Button/Button.js +52 -54
- package/dist/Button/Button.js.map +1 -1
- package/dist/Button/Button.stories.js +1 -1
- package/dist/Button/Button.stories.js.map +1 -1
- package/dist/Button/Collection.d.ts +2 -0
- package/dist/Button/Collection.js +4 -2
- package/dist/Button/Collection.js.map +1 -1
- package/dist/Button/__tests__/Button.js.map +1 -1
- package/dist/Card/Card.d.ts +22 -2
- package/dist/Card/Card.js +56 -11
- package/dist/Card/Card.js.map +1 -1
- package/dist/Card/Card.stories.d.ts +9 -4
- package/dist/Card/Card.stories.js +82 -18
- package/dist/Card/Card.stories.js.map +1 -1
- package/dist/CheckBox/CheckBox.js +39 -16
- package/dist/CheckBox/CheckBox.js.map +1 -1
- package/dist/Chip/Chip.js +15 -9
- package/dist/Chip/Chip.js.map +1 -1
- package/dist/Datepicker/Datepicker.js +23 -15
- package/dist/Datepicker/Datepicker.js.map +1 -1
- package/dist/Datepicker/DatesList.js +18 -10
- package/dist/Datepicker/DatesList.js.map +1 -1
- package/dist/Divider/Divider.js +1 -1
- package/dist/Divider/Divider.js.map +1 -1
- package/dist/Dropdown/Collection.d.ts +2 -0
- package/dist/Dropdown/Collection.js +91 -0
- package/dist/Dropdown/Collection.js.map +1 -0
- package/dist/Dropdown/Dropdown.d.ts +2 -1
- package/dist/Dropdown/Dropdown.js +24 -30
- package/dist/Dropdown/Dropdown.js.map +1 -1
- package/dist/Dropdown/Dropdown.stories.d.ts +2 -16
- package/dist/Dropdown/Dropdown.stories.js +7 -156
- package/dist/Dropdown/Dropdown.stories.js.map +1 -1
- package/dist/Icon/Icon.js +1 -1
- package/dist/Icon/Icon.stories.js +2 -2
- package/dist/IconStrict/IconStrict.d.ts +20 -0
- package/dist/IconStrict/IconStrict.js +50 -0
- package/dist/IconStrict/IconStrict.js.map +1 -0
- package/dist/IconStrict/IconStrict.stories.d.ts +11 -0
- package/dist/IconStrict/IconStrict.stories.js +33 -0
- package/dist/IconStrict/IconStrict.stories.js.map +1 -0
- package/dist/IconStrict/__tests__/IconStrict.js +9 -0
- package/dist/IconStrict/__tests__/IconStrict.js.map +1 -0
- package/dist/IconStrict/index.d.ts +1 -0
- package/dist/IconStrict/index.js +2 -0
- package/dist/IconStrict/index.js.map +1 -0
- package/dist/IconWrapper/IconWrapper.js +2 -2
- package/dist/IconWrapper/IconWrapper.js.map +1 -1
- package/dist/LabelledText/LabelledText.js +1 -1
- package/dist/LabelledText/LabelledText.js.map +1 -1
- package/dist/Link/Link.d.ts +3 -0
- package/dist/Link/Link.js +10 -13
- package/dist/Link/Link.js.map +1 -1
- package/dist/Link/Link.stories.d.ts +2 -0
- package/dist/Link/Link.stories.js +5 -1
- package/dist/Link/Link.stories.js.map +1 -1
- package/dist/Loader/Loader.js +1 -1
- package/dist/Loader/Loader.js.map +1 -1
- package/dist/Loader/Loader.stories.d.ts +1 -1
- package/dist/Loader/Loader.stories.js +3 -3
- package/dist/Loader/Loader.stories.js.map +1 -1
- package/dist/Loader/__tests__/Loader.js +1 -1
- package/dist/Loader/__tests__/Loader.js.map +1 -1
- package/dist/Modal/Modal.js +6 -23
- package/dist/Modal/Modal.js.map +1 -1
- package/dist/NumberInput/Collection.d.ts +2 -0
- package/dist/NumberInput/Collection.js +97 -0
- package/dist/NumberInput/Collection.js.map +1 -0
- package/dist/NumberInput/NumberInput.d.ts +1 -6
- package/dist/NumberInput/NumberInput.js +13 -89
- package/dist/NumberInput/NumberInput.js.map +1 -1
- package/dist/NumberInput/NumberInput.stories.d.ts +2 -7
- package/dist/NumberInput/NumberInput.stories.js +5 -73
- package/dist/NumberInput/NumberInput.stories.js.map +1 -1
- package/dist/Pagination/Pagination.js +43 -12
- package/dist/Pagination/Pagination.js.map +1 -1
- package/dist/Pagination/Pagination.stories.js +8 -1
- package/dist/Pagination/Pagination.stories.js.map +1 -1
- package/dist/RadioGroup/RadioElement.js +4 -4
- package/dist/RadioGroup/RadioElement.js.map +1 -1
- package/dist/RadioGroup/RadioGroup.d.ts +4 -0
- package/dist/RadioGroup/RadioGroup.js +2 -2
- package/dist/RadioGroup/RadioGroup.js.map +1 -1
- package/dist/RadioGroup/RadioGroup.stories.d.ts +3 -0
- package/dist/RadioGroup/RadioGroup.stories.js +2 -0
- package/dist/RadioGroup/RadioGroup.stories.js.map +1 -1
- package/dist/RadioGroup/RadioItem.d.ts +2 -0
- package/dist/RadioGroup/RadioItem.js +25 -9
- package/dist/RadioGroup/RadioItem.js.map +1 -1
- package/dist/Row/Row.js +14 -8
- package/dist/Row/Row.js.map +1 -1
- package/dist/Row/Row.stories.js +1 -1
- package/dist/SearchInput/Container.js +2 -2
- package/dist/SearchInput/Container.js.map +1 -1
- package/dist/SearchInput/SearchInput.d.ts +1 -2
- package/dist/SearchInput/SearchInput.js +8 -55
- package/dist/SearchInput/SearchInput.js.map +1 -1
- package/dist/SearchInput/SearchInput.stories.d.ts +0 -1
- package/dist/SearchInput/SearchInput.stories.js +0 -5
- package/dist/SearchInput/SearchInput.stories.js.map +1 -1
- package/dist/SearchInput/SearchOptions.d.ts +0 -1
- package/dist/SearchInput/SearchOptions.js +11 -15
- package/dist/SearchInput/SearchOptions.js.map +1 -1
- package/dist/Snackbar/SnackbarItem.js +5 -5
- package/dist/Snackbar/SnackbarItem.js.map +1 -1
- package/dist/SupportMessage/Collection.js +6 -1
- package/dist/SupportMessage/Collection.js.map +1 -1
- package/dist/SupportMessage/SupportMessage.d.ts +1 -1
- package/dist/SupportMessage/SupportMessage.js +27 -26
- package/dist/SupportMessage/SupportMessage.js.map +1 -1
- package/dist/Tag/Collection.d.ts +2 -0
- package/dist/Tag/Collection.js +77 -0
- package/dist/Tag/Collection.js.map +1 -0
- package/dist/Tag/Tag.d.ts +3 -13
- package/dist/Tag/Tag.js +7 -8
- package/dist/Tag/Tag.js.map +1 -1
- package/dist/Tag/Tag.stories.d.ts +1 -1
- package/dist/Tag/Tag.stories.js +5 -9
- package/dist/Tag/Tag.stories.js.map +1 -1
- package/dist/Tag/__tests__/Tag.js +1 -1
- package/dist/Tag/__tests__/Tag.js.map +1 -1
- package/dist/Text/Text.js +1 -1
- package/dist/Text/Text.stories.js +4 -4
- package/dist/Text/Text.stories.js.map +1 -1
- package/dist/Text/fontMapping.js +3 -3
- package/dist/TextInput/Collection.d.ts +2 -0
- package/dist/TextInput/Collection.js +69 -0
- package/dist/TextInput/Collection.js.map +1 -0
- package/dist/TextInput/TextInput.d.ts +0 -3
- package/dist/TextInput/TextInput.js +7 -60
- package/dist/TextInput/TextInput.js.map +1 -1
- package/dist/TextInput/TextInput.stories.d.ts +2 -10
- package/dist/TextInput/TextInput.stories.js +5 -111
- package/dist/TextInput/TextInput.stories.js.map +1 -1
- package/dist/Textarea/Container.js +1 -1
- package/dist/Textarea/Container.js.map +1 -1
- package/dist/Textarea/Textarea.d.ts +1 -0
- package/dist/Textarea/Textarea.js +10 -16
- package/dist/Textarea/Textarea.js.map +1 -1
- package/dist/Textarea/Textarea.stories.js +2 -0
- package/dist/Textarea/Textarea.stories.js.map +1 -1
- package/dist/Toggle/Toggle.js +19 -13
- package/dist/Toggle/Toggle.js.map +1 -1
- package/dist/Tooltip/Tooltip.d.ts +3 -3
- package/dist/Tooltip/Tooltip.js +16 -13
- package/dist/Tooltip/Tooltip.js.map +1 -1
- package/dist/Tooltip/Tooltip.stories.d.ts +1 -0
- package/dist/Tooltip/Tooltip.stories.js +15 -4
- package/dist/Tooltip/Tooltip.stories.js.map +1 -1
- package/dist/colors.stories.js +37 -11
- package/dist/colors.stories.js.map +1 -1
- package/dist/fields/Field/Field.d.ts +0 -1
- package/dist/fields/Field/Field.js.map +1 -1
- package/dist/fields/Fieldset/Fieldset.js +1 -1
- package/dist/fields/Fieldset/Fieldset.js.map +1 -1
- package/dist/fields/commonFieldTypes.d.ts +4 -3
- package/dist/fields/components/CommonInput.d.ts +18 -0
- package/dist/fields/components/CommonInput.js +64 -0
- package/dist/fields/components/CommonInput.js.map +1 -0
- package/dist/fields/components/InternalField.d.ts +3 -3
- package/dist/fields/components/InternalField.js +7 -6
- package/dist/fields/components/InternalField.js.map +1 -1
- package/dist/fields/components/Placeholder.js +3 -3
- package/dist/fields/components/Placeholder.js.map +1 -1
- package/dist/fontStyle.js +2 -2
- package/dist/index.d.ts +0 -3
- package/dist/index.js +0 -3
- package/dist/index.js.map +1 -1
- package/dist/theme.d.ts +58 -28
- package/dist/theme.js +34 -18
- package/dist/theme.js.map +1 -1
- package/dist/utils/focusOutline.d.ts +1 -0
- package/dist/utils/focusOutline.js +7 -1
- package/dist/utils/focusOutline.js.map +1 -1
- package/package.json +5 -4
- package/dist/Button/LegacyButton.d.ts +0 -15
- package/dist/Button/LegacyButton.js +0 -50
- package/dist/Button/LegacyButton.js.map +0 -1
- package/dist/ConfirmationRadioButtons/Confirmation.d.ts +0 -17
- package/dist/ConfirmationRadioButtons/Confirmation.js +0 -100
- package/dist/ConfirmationRadioButtons/Confirmation.js.map +0 -1
- package/dist/ConfirmationRadioButtons/Confirmation.stories.d.ts +0 -21
- package/dist/ConfirmationRadioButtons/Confirmation.stories.js +0 -76
- package/dist/ConfirmationRadioButtons/Confirmation.stories.js.map +0 -1
- package/dist/ConfirmationRadioButtons/Container.d.ts +0 -2
- package/dist/ConfirmationRadioButtons/Container.js +0 -8
- package/dist/ConfirmationRadioButtons/Container.js.map +0 -1
- package/dist/ConfirmationRadioButtons/RadioButtonStyled.d.ts +0 -17
- package/dist/ConfirmationRadioButtons/RadioButtonStyled.js +0 -41
- package/dist/ConfirmationRadioButtons/RadioButtonStyled.js.map +0 -1
- package/dist/ConfirmationRadioButtons/__tests__/Confirmation.js +0 -8
- package/dist/ConfirmationRadioButtons/__tests__/Confirmation.js.map +0 -1
- package/dist/ConfirmationRadioButtons/index.d.ts +0 -1
- package/dist/ConfirmationRadioButtons/index.js +0 -2
- package/dist/ConfirmationRadioButtons/index.js.map +0 -1
- package/dist/Dropdown/__tests__/Dropdown.js +0 -80
- package/dist/Dropdown/__tests__/Dropdown.js.map +0 -1
- package/dist/Message/Message.d.ts +0 -21
- package/dist/Message/Message.js +0 -45
- package/dist/Message/Message.js.map +0 -1
- package/dist/Message/Message.stories.d.ts +0 -13
- package/dist/Message/Message.stories.js +0 -38
- package/dist/Message/Message.stories.js.map +0 -1
- package/dist/Message/__tests__/Message.js +0 -26
- package/dist/Message/__tests__/Message.js.map +0 -1
- package/dist/Message/index.d.ts +0 -1
- package/dist/Message/index.js +0 -2
- package/dist/Message/index.js.map +0 -1
- package/dist/RadioButton/Container.d.ts +0 -2
- package/dist/RadioButton/Container.js +0 -9
- package/dist/RadioButton/Container.js.map +0 -1
- package/dist/RadioButton/RadioButton.d.ts +0 -10
- package/dist/RadioButton/RadioButton.js +0 -68
- package/dist/RadioButton/RadioButton.js.map +0 -1
- package/dist/RadioButton/RadioButton.stories.d.ts +0 -15
- package/dist/RadioButton/RadioButton.stories.js +0 -29
- package/dist/RadioButton/RadioButton.stories.js.map +0 -1
- package/dist/RadioButton/__tests__/RadioButton.d.ts +0 -1
- package/dist/RadioButton/__tests__/RadioButton.js +0 -13
- package/dist/RadioButton/__tests__/RadioButton.js.map +0 -1
- package/dist/RadioButton/index.d.ts +0 -1
- package/dist/RadioButton/index.js +0 -2
- package/dist/RadioButton/index.js.map +0 -1
- /package/dist/{ConfirmationRadioButtons/__tests__/Confirmation.d.ts → Accordion/__tests__/Accordion.d.ts} +0 -0
- /package/dist/{Dropdown/__tests__/Dropdown.d.ts → BrandCard/__tests__/BrandCard.d.ts} +0 -0
- /package/dist/{Message/__tests__/Message.d.ts → IconStrict/__tests__/IconStrict.d.ts} +0 -0
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/Banner/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAA;AACjC,cAAc,SAAS,CAAA"}
|
@@ -0,0 +1,18 @@
|
|
1
|
+
export interface Banner {
|
2
|
+
id: string;
|
3
|
+
message: string;
|
4
|
+
type: 'upsell' | 'critical' | 'general' | 'success';
|
5
|
+
topOffset: string;
|
6
|
+
exploreAction?: () => void;
|
7
|
+
showExploreText?: boolean;
|
8
|
+
showExploreIcon?: boolean;
|
9
|
+
autoCloseTime?: 4 | 5 | 6 | 7 | 8 | 9 | 10;
|
10
|
+
leadingIcon?: string;
|
11
|
+
canManuallyClose?: boolean;
|
12
|
+
showCloseIcon?: boolean;
|
13
|
+
noTimeout?: boolean;
|
14
|
+
}
|
15
|
+
export type CreateBanner = Omit<Banner, 'id'>;
|
16
|
+
export interface BannerContextType {
|
17
|
+
addBanner: (banner: CreateBanner) => void;
|
18
|
+
}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/Banner/types.ts"],"names":[],"mappings":""}
|
package/dist/Box/Box.stories.js
CHANGED
@@ -23,11 +23,11 @@ Default.argTypes = {
|
|
23
23
|
as: { table: { disable: true } },
|
24
24
|
forwardedAs: { table: { disable: true } },
|
25
25
|
};
|
26
|
-
const Card = () => (React.createElement(Box, { px: { small: '12px', medium: '24px' }, pt: { small: '8px', medium: '16px' }, pb: { small: '24px', medium: '32px' }, style: { backgroundColor: theme.colors.
|
26
|
+
const Card = () => (React.createElement(Box, { px: { small: '12px', medium: '24px' }, pt: { small: '8px', medium: '16px' }, pb: { small: '24px', medium: '32px' }, style: { backgroundColor: theme.colors.coconut, borderRadius: 8 } },
|
27
27
|
React.createElement(Box, { flex: true, direction: { small: 'column', medium: 'row' }, gap: { small: { custom: 2 }, medium: '8px' }, alignItems: { medium: 'center' }, mb: "8px" },
|
28
28
|
React.createElement(Icon, { render: "help-aboutus", size: 24 }),
|
29
29
|
React.createElement(Text, { typo: "heading-small" }, "Card content.")),
|
30
|
-
React.createElement(Text, { color: "
|
30
|
+
React.createElement(Text, { color: "sesame" }, "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s.")));
|
31
31
|
const ResponsiveTemplate = () => {
|
32
32
|
return (React.createElement(Box, { flex: true, direction: { small: 'column', medium: 'row' }, gap: { small: '12px', medium: '16px' } },
|
33
33
|
React.createElement(Card, null),
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Box.stories.js","sourceRoot":"","sources":["../../src/Box/Box.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,GAAG,EAAY,MAAM,OAAO,CAAA;AACrC,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAEhC,eAAe;IACb,KAAK,EAAE,KAAK;IACZ,SAAS,EAAE,GAAG;CACf,CAAA;AAED,MAAM,QAAQ,GAAG,CAAC,KAAe,EAAE,EAAE,CAAC,CACpC,oBAAC,GAAG,oBAAK,KAAK;IACZ,oBAAC,IAAI,+BAA4B,CAC7B,CACP,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAExC,OAAO,CAAC,IAAI,GAAG;IACb,IAAI,EAAE,IAAI;IACV,SAAS,EAAE,KAAK;IAChB,cAAc,EAAE,YAAY;IAC5B,UAAU,EAAE,aAAa;IACzB,CAAC,EAAE,MAAM;IACT,CAAC,EAAE,MAAM;CACV,CAAA;AAED,OAAO,CAAC,QAAQ,GAAG;IACjB,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;IACnC,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;IAChC,WAAW,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;CAC1C,CAAA;AAED,MAAM,IAAI,GAAG,GAAG,EAAE,CAAC,CACjB,oBAAC,GAAG,IACF,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,EACrC,EAAE,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,EACpC,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,EACrC,KAAK,EAAE,EAAE,eAAe,EAAE,KAAK,CAAC,MAAM,CAAC,
|
1
|
+
{"version":3,"file":"Box.stories.js","sourceRoot":"","sources":["../../src/Box/Box.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,GAAG,EAAY,MAAM,OAAO,CAAA;AACrC,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAEhC,eAAe;IACb,KAAK,EAAE,KAAK;IACZ,SAAS,EAAE,GAAG;CACf,CAAA;AAED,MAAM,QAAQ,GAAG,CAAC,KAAe,EAAE,EAAE,CAAC,CACpC,oBAAC,GAAG,oBAAK,KAAK;IACZ,oBAAC,IAAI,+BAA4B,CAC7B,CACP,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAExC,OAAO,CAAC,IAAI,GAAG;IACb,IAAI,EAAE,IAAI;IACV,SAAS,EAAE,KAAK;IAChB,cAAc,EAAE,YAAY;IAC5B,UAAU,EAAE,aAAa;IACzB,CAAC,EAAE,MAAM;IACT,CAAC,EAAE,MAAM;CACV,CAAA;AAED,OAAO,CAAC,QAAQ,GAAG;IACjB,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;IACnC,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;IAChC,WAAW,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;CAC1C,CAAA;AAED,MAAM,IAAI,GAAG,GAAG,EAAE,CAAC,CACjB,oBAAC,GAAG,IACF,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,EACrC,EAAE,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,EACpC,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,EACrC,KAAK,EAAE,EAAE,eAAe,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,EAAE,YAAY,EAAE,CAAC,EAAE;IAEjE,oBAAC,GAAG,IACF,IAAI,QACJ,SAAS,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,EAC7C,GAAG,EAAE,EAAE,KAAK,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,EAC5C,UAAU,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,EAChC,EAAE,EAAC,KAAK;QAER,oBAAC,IAAI,IAAC,MAAM,EAAC,cAAc,EAAC,IAAI,EAAE,EAAE,GAAI;QACxC,oBAAC,IAAI,IAAC,IAAI,EAAC,eAAe,oBAAqB,CAC3C;IACN,oBAAC,IAAI,IAAC,KAAK,EAAC,QAAQ,8JAIb,CACH,CACP,CAAA;AAED,MAAM,kBAAkB,GAAG,GAAG,EAAE;IAC9B,OAAO,CACL,oBAAC,GAAG,IACF,IAAI,QACJ,SAAS,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,EAC7C,GAAG,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE;QAEtC,oBAAC,IAAI,OAAG;QACR,oBAAC,IAAI,OAAG;QACR,oBAAC,IAAI,OAAG,CACJ,CACP,CAAA;AACH,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,eAAe,GAAG,kBAAkB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA"}
|
@@ -0,0 +1,27 @@
|
|
1
|
+
import { FC, ReactNode } from 'react';
|
2
|
+
import { MarginProps } from '../utils/space';
|
3
|
+
import { Color } from '../theme';
|
4
|
+
export type BrandCardProps = {
|
5
|
+
/** generic card title */
|
6
|
+
title: string;
|
7
|
+
/** generic card body */
|
8
|
+
body: string;
|
9
|
+
/** card image */
|
10
|
+
visual: string;
|
11
|
+
/** alignment of the image */
|
12
|
+
alignVisual?: 'left' | 'right';
|
13
|
+
/** height of the image, leave this blank for 100% */
|
14
|
+
visualHeight?: string;
|
15
|
+
/** render image at bottom of card */
|
16
|
+
visualBottom?: boolean;
|
17
|
+
bgColour: Color;
|
18
|
+
/** card tag */
|
19
|
+
tag?: ReactNode;
|
20
|
+
/** primary button */
|
21
|
+
buttonAction?: ReactNode;
|
22
|
+
/** fallback color scheme */
|
23
|
+
fallbackStyle?: boolean;
|
24
|
+
/** margin */
|
25
|
+
maxWidth?: string;
|
26
|
+
} & MarginProps;
|
27
|
+
export declare const BrandCard: FC<BrandCardProps>;
|
@@ -0,0 +1,60 @@
|
|
1
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
2
|
+
var t = {};
|
3
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
4
|
+
t[p] = s[p];
|
5
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
6
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
7
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
8
|
+
t[p[i]] = s[p[i]];
|
9
|
+
}
|
10
|
+
return t;
|
11
|
+
};
|
12
|
+
import React from 'react';
|
13
|
+
import styled from 'styled-components';
|
14
|
+
import { theme } from '../theme';
|
15
|
+
import { Box } from '../Box';
|
16
|
+
import { Text } from '../Text';
|
17
|
+
export const BrandCard = (_a) => {
|
18
|
+
var { title, body, visual, visualHeight = '', alignVisual, visualBottom, tag, buttonAction, fallbackStyle = false, bgColour = 'matcha', maxWidth = '' } = _a, otherProps = __rest(_a, ["title", "body", "visual", "visualHeight", "alignVisual", "visualBottom", "tag", "buttonAction", "fallbackStyle", "bgColour", "maxWidth"]);
|
19
|
+
return (React.createElement(Container, Object.assign({ maxWidth: maxWidth, visual: visual, fallbackStyle: fallbackStyle, bgColor: bgColour }, otherProps),
|
20
|
+
tag && React.createElement(TagWrapper, null, tag),
|
21
|
+
visual && !visualBottom && (React.createElement(VisualWrapper, { visualHeight: visualHeight },
|
22
|
+
React.createElement(Visual, { visualUrl: visual, visualHeight: visualHeight, alignVisual: alignVisual }))),
|
23
|
+
React.createElement(Box, { flex: true, alignItems: "center", justifyContent: "space-between", mt: "16px" },
|
24
|
+
React.createElement(Box, { flex: true, alignItems: "center" },
|
25
|
+
React.createElement(Box, null,
|
26
|
+
title && (React.createElement(Text, { typo: "hero-alternate", color: "liquorice" }, title)),
|
27
|
+
body && (React.createElement(Text, { typo: "body-regular", color: "liquorice" }, body))))),
|
28
|
+
buttonAction && React.createElement(Box, { mt: "16px" }, buttonAction),
|
29
|
+
visual && visualBottom && (React.createElement(VisualWrapper, { visualHeight: visualHeight, mt: "16px" },
|
30
|
+
React.createElement(Visual, { visualUrl: visual, visualHeight: visualHeight, alignVisual: alignVisual })))));
|
31
|
+
};
|
32
|
+
const Container = styled(Box) `
|
33
|
+
background: ${({ fallbackStyle, bgColor }) => fallbackStyle ? theme.colors.cream : theme.colors[bgColor]};
|
34
|
+
box-sizing: border-box;
|
35
|
+
border-radius: 16px 16px 0px 0px;
|
36
|
+
|
37
|
+
padding: 16px;
|
38
|
+
position: relative;
|
39
|
+
overflow: hidden;
|
40
|
+
`;
|
41
|
+
const TagWrapper = styled(Box) `
|
42
|
+
position: absolute;
|
43
|
+
top: 16px;
|
44
|
+
right: 16px;
|
45
|
+
`;
|
46
|
+
const VisualWrapper = styled(Box) `
|
47
|
+
width: 100%;
|
48
|
+
|
49
|
+
${({ visualHeight }) => visualHeight && `height: ${visualHeight};`}
|
50
|
+
`;
|
51
|
+
const Visual = styled(Box) `
|
52
|
+
width: 100%;
|
53
|
+
background-image: url('${(p) => p.visualUrl}');
|
54
|
+
background-size: contain;
|
55
|
+
background-repeat: no-repeat;
|
56
|
+
background-position: ${({ alignVisual }) => alignVisual ? alignVisual : 'left'};
|
57
|
+
|
58
|
+
${({ visualHeight }) => visualHeight ? `height: ${visualHeight};` : 'padding-top: 100%;'}
|
59
|
+
`;
|
60
|
+
//# sourceMappingURL=BrandCard.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"BrandCard.js","sourceRoot":"","sources":["../../src/BrandCard/BrandCard.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAwB,MAAM,OAAO,CAAA;AAC5C,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAEtC,OAAO,EAAS,KAAK,EAAE,MAAM,UAAU,CAAA;AACvC,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AA0B9B,MAAM,CAAC,MAAM,SAAS,GAAuB,CAAC,EAa7C,EAAE,EAAE;QAbyC,EAC5C,KAAK,EACL,IAAI,EACJ,MAAM,EACN,YAAY,GAAG,EAAE,EACjB,WAAW,EACX,YAAY,EACZ,GAAG,EACH,YAAY,EACZ,aAAa,GAAG,KAAK,EACrB,QAAQ,GAAG,QAAQ,EACnB,QAAQ,GAAG,EAAE,OAEd,EADI,UAAU,cAZ+B,0IAa7C,CADc;IAEb,OAAO,CACL,oBAAC,SAAS,kBACR,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,aAAa,EAAE,aAAa,EAC5B,OAAO,EAAE,QAAQ,IACb,UAAU;QAEb,GAAG,IAAI,oBAAC,UAAU,QAAE,GAAG,CAAc;QACrC,MAAM,IAAI,CAAC,YAAY,IAAI,CAC1B,oBAAC,aAAa,IAAC,YAAY,EAAE,YAAY;YACvC,oBAAC,MAAM,IACL,SAAS,EAAE,MAAM,EACjB,YAAY,EAAE,YAAY,EAC1B,WAAW,EAAE,WAAW,GACxB,CACY,CACjB;QACD,oBAAC,GAAG,IAAC,IAAI,QAAC,UAAU,EAAC,QAAQ,EAAC,cAAc,EAAC,eAAe,EAAC,EAAE,EAAC,MAAM;YACpE,oBAAC,GAAG,IAAC,IAAI,QAAC,UAAU,EAAC,QAAQ;gBAC3B,oBAAC,GAAG;oBACD,KAAK,IAAI,CACR,oBAAC,IAAI,IAAC,IAAI,EAAC,gBAAgB,EAAC,KAAK,EAAC,WAAW,IAC1C,KAAK,CACD,CACR;oBACA,IAAI,IAAI,CACP,oBAAC,IAAI,IAAC,IAAI,EAAC,cAAc,EAAC,KAAK,EAAC,WAAW,IACxC,IAAI,CACA,CACR,CACG,CACF,CACF;QACL,YAAY,IAAI,oBAAC,GAAG,IAAC,EAAE,EAAC,MAAM,IAAE,YAAY,CAAO;QACnD,MAAM,IAAI,YAAY,IAAI,CACzB,oBAAC,aAAa,IAAC,YAAY,EAAE,YAAY,EAAE,EAAE,EAAC,MAAM;YAClD,oBAAC,MAAM,IACL,SAAS,EAAE,MAAM,EACjB,YAAY,EAAE,YAAY,EAC1B,WAAW,EAAE,WAAW,GACxB,CACY,CACjB,CACS,CACb,CAAA;AACH,CAAC,CAAA;AAED,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAC,CAI3B;gBACc,CAAC,EAAE,aAAa,EAAE,OAAO,EAAE,EAAE,EAAE,CAC3C,aAAa,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC;;;;;;;CAO7D,CAAA;AAED,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAC,CAAA;;;;CAI7B,CAAA;AAED,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAC,CAA0B;;;IAGvD,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,YAAY,IAAI,WAAW,YAAY,GAAG;CACnE,CAAA;AAED,MAAM,MAAM,GAAG,MAAM,CAAC,GAAG,CAAC,CAIxB;;2BAEyB,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,SAAS;;;yBAGpB,CAAC,EAAE,WAAW,EAAE,EAAE,EAAE,CACzC,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,MAAM;;IAElC,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CACrB,YAAY,CAAC,CAAC,CAAC,WAAW,YAAY,GAAG,CAAC,CAAC,CAAC,oBAAoB;CACnE,CAAA"}
|
@@ -0,0 +1,11 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import { BrandCardProps } from './BrandCard';
|
3
|
+
declare const _default: {
|
4
|
+
title: string;
|
5
|
+
component: React.FC<BrandCardProps>;
|
6
|
+
};
|
7
|
+
export default _default;
|
8
|
+
export declare const Default: any;
|
9
|
+
export declare const BrandCardWithImageWithTag: any;
|
10
|
+
export declare const BrandCardAlignImageRight: any;
|
11
|
+
export declare const BrandCardWithImageBelow: any;
|
@@ -0,0 +1,54 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import { BrandCard } from './BrandCard';
|
3
|
+
import placeHolderSvg from './assets/placeHolderImage.svg';
|
4
|
+
import { Tag } from '../Tag';
|
5
|
+
import { Button } from '../Button';
|
6
|
+
export default {
|
7
|
+
title: 'BrandCard',
|
8
|
+
component: BrandCard,
|
9
|
+
};
|
10
|
+
const Template = (props) => React.createElement(BrandCard, Object.assign({}, props));
|
11
|
+
export const Default = Template.bind({});
|
12
|
+
Default.args = {
|
13
|
+
title: 'All about marshmallow miles',
|
14
|
+
body: 'Puzzled by your driving score? Wondering about rewards? Here’s how it all works!',
|
15
|
+
alignVisual: 'left',
|
16
|
+
bgColor: 'macaroon',
|
17
|
+
visualHeight: '200px',
|
18
|
+
visual: placeHolderSvg,
|
19
|
+
};
|
20
|
+
export const BrandCardWithImageWithTag = Template.bind({});
|
21
|
+
BrandCardWithImageWithTag.args = {
|
22
|
+
title: 'All about marshmallow miles',
|
23
|
+
body: 'Puzzled by your driving score? Wondering about rewards? Here’s how it all works!',
|
24
|
+
maxWidth: '350px',
|
25
|
+
bgColor: 'matcha',
|
26
|
+
visualHeight: '180px',
|
27
|
+
tag: React.createElement(Tag, { label: "default tag", bgColor: "fairyFloss", color: "liquorice" }),
|
28
|
+
buttonAction: React.createElement(Button, { fallbackStyle: true }, "Tell me more"),
|
29
|
+
visual: placeHolderSvg,
|
30
|
+
};
|
31
|
+
export const BrandCardAlignImageRight = Template.bind({});
|
32
|
+
BrandCardAlignImageRight.args = {
|
33
|
+
title: 'All about marshmallow miles',
|
34
|
+
body: 'Puzzled by your driving score? Wondering about rewards? Here’s how it all works!',
|
35
|
+
bgColor: 'matcha',
|
36
|
+
alignVisual: 'right',
|
37
|
+
visualHeight: '180px',
|
38
|
+
buttonAction: React.createElement(Button, { fallbackStyle: true }, "Tell me more"),
|
39
|
+
visual: placeHolderSvg,
|
40
|
+
};
|
41
|
+
export const BrandCardWithImageBelow = Template.bind({});
|
42
|
+
BrandCardWithImageBelow.args = {
|
43
|
+
title: 'All about marshmallow miles',
|
44
|
+
body: 'Puzzled by your driving score? Wondering about rewards? Here’s how it all works!',
|
45
|
+
maxWidth: '350px',
|
46
|
+
visualHeight: '180px',
|
47
|
+
alignVisual: 'left',
|
48
|
+
visualBottom: true,
|
49
|
+
bgColor: 'peanut',
|
50
|
+
tag: React.createElement(Tag, { label: "new", bgColor: "fairyFloss", color: "liquorice" }),
|
51
|
+
buttonAction: React.createElement(Button, { fallbackStyle: true }, "Tell me more"),
|
52
|
+
visual: placeHolderSvg,
|
53
|
+
};
|
54
|
+
//# sourceMappingURL=BrandCard.stories.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"BrandCard.stories.js","sourceRoot":"","sources":["../../src/BrandCard/BrandCard.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,SAAS,EAAkB,MAAM,aAAa,CAAA;AACvD,OAAO,cAAc,MAAM,+BAA+B,CAAA;AAC1D,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAElC,eAAe;IACb,KAAK,EAAE,WAAW;IAClB,SAAS,EAAE,SAAS;CACrB,CAAA;AAED,MAAM,QAAQ,GAAG,CAAC,KAAqB,EAAE,EAAE,CAAC,oBAAC,SAAS,oBAAK,KAAK,EAAI,CAAA;AAEpE,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAExC,OAAO,CAAC,IAAI,GAAG;IACb,KAAK,EAAE,6BAA6B;IACpC,IAAI,EAAE,kFAAkF;IACxF,WAAW,EAAE,MAAM;IACnB,OAAO,EAAE,UAAU;IACnB,YAAY,EAAE,OAAO;IACrB,MAAM,EAAE,cAAc;CACvB,CAAA;AAED,MAAM,CAAC,MAAM,yBAAyB,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAE1D,yBAAyB,CAAC,IAAI,GAAG;IAC/B,KAAK,EAAE,6BAA6B;IACpC,IAAI,EAAE,kFAAkF;IACxF,QAAQ,EAAE,OAAO;IACjB,OAAO,EAAE,QAAQ;IACjB,YAAY,EAAE,OAAO;IACrB,GAAG,EAAE,oBAAC,GAAG,IAAC,KAAK,EAAC,aAAa,EAAC,OAAO,EAAC,YAAY,EAAC,KAAK,EAAC,WAAW,GAAG;IACvE,YAAY,EAAE,oBAAC,MAAM,IAAC,aAAa,yBAAsB;IACzD,MAAM,EAAE,cAAc;CACvB,CAAA;AAED,MAAM,CAAC,MAAM,wBAAwB,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAEzD,wBAAwB,CAAC,IAAI,GAAG;IAC9B,KAAK,EAAE,6BAA6B;IACpC,IAAI,EAAE,kFAAkF;IACxF,OAAO,EAAE,QAAQ;IACjB,WAAW,EAAE,OAAO;IACpB,YAAY,EAAE,OAAO;IACrB,YAAY,EAAE,oBAAC,MAAM,IAAC,aAAa,yBAAsB;IACzD,MAAM,EAAE,cAAc;CACvB,CAAA;AAED,MAAM,CAAC,MAAM,uBAAuB,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAExD,uBAAuB,CAAC,IAAI,GAAG;IAC7B,KAAK,EAAE,6BAA6B;IACpC,IAAI,EAAE,kFAAkF;IACxF,QAAQ,EAAE,OAAO;IACjB,YAAY,EAAE,OAAO;IACrB,WAAW,EAAE,MAAM;IACnB,YAAY,EAAE,IAAI;IAClB,OAAO,EAAE,QAAQ;IACjB,GAAG,EAAE,oBAAC,GAAG,IAAC,KAAK,EAAC,KAAK,EAAC,OAAO,EAAC,YAAY,EAAC,KAAK,EAAC,WAAW,GAAG;IAC/D,YAAY,EAAE,oBAAC,MAAM,IAAC,aAAa,yBAAsB;IACzD,MAAM,EAAE,cAAc;CACvB,CAAA"}
|
@@ -0,0 +1,9 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import { render } from '@testing-library/react';
|
3
|
+
import 'jest-styled-components';
|
4
|
+
import { BrandCard } from '../BrandCard';
|
5
|
+
test('renders', () => {
|
6
|
+
const { container } = render(React.createElement(BrandCard, null, "Text inside"));
|
7
|
+
expect(container.firstChild).toMatchSnapshot();
|
8
|
+
});
|
9
|
+
//# sourceMappingURL=BrandCard.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"BrandCard.js","sourceRoot":"","sources":["../../../src/BrandCard/__tests__/BrandCard.js"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAA;AAC/C,OAAO,wBAAwB,CAAA;AAE/B,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAExC,IAAI,CAAC,SAAS,EAAE,GAAG,EAAE;IACnB,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,CAAC,oBAAC,SAAS,sBAAwB,CAAC,CAAA;IAChE,MAAM,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC,eAAe,EAAE,CAAA;AAChD,CAAC,CAAC,CAAA"}
|
@@ -0,0 +1 @@
|
|
1
|
+
export { BrandCard } from './BrandCard';
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/BrandCard/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA"}
|
package/dist/Button/Button.d.ts
CHANGED
@@ -1,21 +1,19 @@
|
|
1
1
|
import React, { FC, ReactNode, ButtonHTMLAttributes } from 'react';
|
2
|
-
import { Color } from '../theme';
|
3
2
|
import { MarginProps } from '../utils/space';
|
4
3
|
type Props = {
|
5
4
|
children: ReactNode;
|
6
5
|
id?: string;
|
7
6
|
className?: string;
|
8
|
-
color?: Color;
|
9
|
-
block?: boolean;
|
10
|
-
inverted?: boolean;
|
11
7
|
disabled?: boolean;
|
12
|
-
outlined?: boolean;
|
13
8
|
handleClick?: (e: React.FormEvent<HTMLButtonElement>) => void;
|
14
9
|
loading?: boolean;
|
15
10
|
primary?: boolean;
|
16
11
|
secondary?: boolean;
|
17
|
-
|
12
|
+
fallbackStyle?: boolean;
|
13
|
+
textBtn?: boolean;
|
14
|
+
smallButton?: boolean;
|
18
15
|
icon?: string;
|
16
|
+
trailingIcon?: boolean;
|
19
17
|
forcedWidth?: string;
|
20
18
|
form?: string;
|
21
19
|
};
|
package/dist/Button/Button.js
CHANGED
@@ -11,46 +11,29 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
11
11
|
};
|
12
12
|
import React, { forwardRef } from 'react';
|
13
13
|
import styled, { css } from 'styled-components';
|
14
|
-
import { darken } from 'polished';
|
15
14
|
import { theme } from '../theme';
|
16
|
-
import { focusOutline } from '../utils/focusOutline';
|
17
|
-
import { useDeprecatedWarning } from '../utils/deprecated';
|
18
|
-
import { LegacyButton } from './LegacyButton';
|
19
15
|
import { Box } from '../Box';
|
20
16
|
import { Loader } from '../Loader';
|
21
17
|
import { Icon as IconComponent } from '../Icon';
|
22
18
|
export const Button = forwardRef((props, ref) => {
|
23
|
-
const { children, id, className = '',
|
24
|
-
|
25
|
-
useDeprecatedWarning({
|
26
|
-
enabled: isLegacyButton,
|
27
|
-
title: 'Legacy Button',
|
28
|
-
message: "You're using the legacy Button component. Please use the new Button by providing one of the following props: 'primary', 'secondary', 'tertiary'.",
|
29
|
-
componentProps: props,
|
30
|
-
});
|
31
|
-
if (isLegacyButton) {
|
32
|
-
return (React.createElement(LegacyButton, { id: id, className: className, color: color, block: block, inverted: inverted, disabled: disabled, outlined: outlined, handleClick: (e) => {
|
33
|
-
handleClick && handleClick(e);
|
34
|
-
} }, children));
|
35
|
-
}
|
36
|
-
return (React.createElement(Container, Object.assign({ as: "button", id: id, className: className, disabled: disabled || loading, onClick: handleClick, "$loading": loading, primary: primary, secondary: secondary, tertiary: tertiary, icon: icon, forcedWidth: forcedWidth }, (form ? { form } : {}), { type: type }, otherProps, { ref: ref }),
|
19
|
+
const { children, id, className = '', disabled = false, handleClick, loading = false, primary = false, secondary = false, fallbackStyle = false, textBtn = false, smallButton = false, icon = '', trailingIcon = false, forcedWidth = '', form, type } = props, otherProps = __rest(props, ["children", "id", "className", "disabled", "handleClick", "loading", "primary", "secondary", "fallbackStyle", "textBtn", "smallButton", "icon", "trailingIcon", "forcedWidth", "form", "type"]);
|
20
|
+
return (React.createElement(Container, Object.assign({ as: "button", id: id, className: className, disabled: disabled, onClick: handleClick, "$loading": loading, primary: primary, secondary: secondary, fallbackStyle: fallbackStyle, textBtn: textBtn, smallButton: smallButton, icon: icon, trailingIcon: trailingIcon, forcedWidth: forcedWidth }, (form ? { form } : {}), { type: type }, otherProps, { ref: ref }),
|
37
21
|
loading && (React.createElement(LoaderContainer, null,
|
38
|
-
React.createElement(Loader, { color:
|
22
|
+
React.createElement(Loader, { color: 'liquorice', height: "16" }))),
|
39
23
|
React.createElement(ContentContainer, { icon: icon, "$loading": loading },
|
40
|
-
icon && (React.createElement(IconContainer, {
|
41
|
-
React.createElement(ChildrenContainer,
|
24
|
+
!trailingIcon && icon && (React.createElement(IconContainer, { trailingIcon: trailingIcon, render: icon, size: smallButton ? 16 : 24, color: 'liquorice' })),
|
25
|
+
React.createElement(ChildrenContainer, { className: "childrenContainer" }, children),
|
26
|
+
trailingIcon && icon && textBtn && (React.createElement(IconContainer, { trailingIcon: trailingIcon, render: icon, size: smallButton ? 16 : 24, color: 'liquorice', className: "iconContainer" })))));
|
42
27
|
});
|
43
28
|
Button.displayName = 'Button';
|
44
|
-
const Container = styled(Box)(({ disabled, $loading, primary, secondary,
|
45
|
-
${focusOutline()}
|
29
|
+
const Container = styled(Box)(({ disabled, $loading, primary, secondary, forcedWidth, fallbackStyle, textBtn, smallButton, }) => css `
|
46
30
|
position: relative;
|
47
|
-
background-color: ${theme.colors.
|
48
|
-
border: 2px solid;
|
31
|
+
background-color: ${theme.colors.marshmallowPink};
|
49
32
|
box-shadow: none;
|
50
|
-
color: ${theme.colors.
|
33
|
+
color: ${theme.colors.liquorice};
|
51
34
|
padding: 0 20px;
|
52
35
|
outline: none;
|
53
|
-
border-radius:
|
36
|
+
border-radius: 10000px;
|
54
37
|
font-weight: ${theme.font.weight.medium};
|
55
38
|
cursor: ${disabled || $loading ? 'not-allowed' : 'pointer'};
|
56
39
|
line-height: 100%;
|
@@ -60,49 +43,64 @@ const Container = styled(Box)(({ disabled, $loading, primary, secondary, tertiar
|
|
60
43
|
|
61
44
|
${primary &&
|
62
45
|
css `
|
63
|
-
color: ${theme.colors.
|
64
|
-
border-color: ${theme.colors.primary};
|
46
|
+
color: ${theme.colors.liquorice};
|
65
47
|
|
66
48
|
&:hover {
|
67
|
-
background-color: ${!(disabled || $loading) &&
|
68
|
-
darken(0.1, theme.colors.primary)};
|
69
|
-
border-color: ${!(disabled || $loading) &&
|
70
|
-
darken(0.1, theme.colors.primary)};
|
49
|
+
background-color: ${!(disabled || $loading) && theme.colors.bubblegum};
|
71
50
|
}
|
72
51
|
&:active {
|
73
|
-
background-color: ${
|
74
|
-
border-color: ${darken(0.1, theme.colors.primary)};
|
52
|
+
background-color: ${theme.colors.lollipop};
|
75
53
|
}
|
76
54
|
`}
|
77
55
|
${secondary &&
|
78
56
|
css `
|
79
|
-
background-color: ${theme.colors.
|
80
|
-
border-color: ${theme.colors.secondary};
|
57
|
+
background-color: ${theme.colors.oatmeal};
|
81
58
|
|
82
59
|
&:hover {
|
83
|
-
background-color: ${!(disabled || $loading) && theme.colors.
|
84
|
-
border: ${!(disabled || $loading) &&
|
85
|
-
`2px solid ${theme.colors.secondary}`};
|
60
|
+
background-color: ${!(disabled || $loading) && theme.colors.mascarpone};
|
86
61
|
}
|
87
62
|
&:active {
|
88
|
-
background-color: ${theme.colors.
|
89
|
-
border: 2px solid ${theme.colors.secondary};
|
63
|
+
background-color: ${theme.colors.custard};
|
90
64
|
}
|
91
65
|
`}
|
92
|
-
${
|
66
|
+
${fallbackStyle &&
|
93
67
|
css `
|
94
|
-
background-color: ${theme.colors.
|
95
|
-
border-color: ${theme.colors.background};
|
68
|
+
background-color: ${theme.colors.cream};
|
96
69
|
|
97
70
|
&:hover {
|
98
|
-
background-color: ${!(disabled || $loading) &&
|
99
|
-
darken(0.1, theme.colors.background)};
|
100
|
-
border-color: ${!(disabled || $loading) &&
|
101
|
-
darken(0.1, theme.colors.background)};
|
71
|
+
background-color: ${!(disabled || $loading) && theme.colors.coconut};
|
102
72
|
}
|
103
73
|
&:active {
|
104
|
-
background-color: ${
|
105
|
-
|
74
|
+
background-color: ${theme.colors.mascarpone};
|
75
|
+
}
|
76
|
+
`}
|
77
|
+
${textBtn &&
|
78
|
+
css `
|
79
|
+
background-color: transparent;
|
80
|
+
padding: 0;
|
81
|
+
border-radius: 0;
|
82
|
+
text-decoration: underline;
|
83
|
+
|
84
|
+
&:hover {
|
85
|
+
background-color: ${!(disabled || $loading) && theme.colors.fairyFloss};
|
86
|
+
}
|
87
|
+
&:active {
|
88
|
+
background-color: transparent;
|
89
|
+
color: ${theme.colors.sesame};
|
90
|
+
}
|
91
|
+
`}
|
92
|
+
${smallButton &&
|
93
|
+
css `
|
94
|
+
padding: 0 10px;
|
95
|
+
min-width: 54px;
|
96
|
+
font-size: 14px;
|
97
|
+
|
98
|
+
.childrenContainer {
|
99
|
+
padding: 9px 0;
|
100
|
+
}
|
101
|
+
|
102
|
+
span {
|
103
|
+
margin: 0 5px 0 0;
|
106
104
|
}
|
107
105
|
`}
|
108
106
|
`);
|
@@ -122,9 +120,9 @@ const ContentContainer = styled.div `
|
|
122
120
|
justify-content: ${({ icon }) => (icon ? 'space-evenly' : 'center')};
|
123
121
|
opacity: ${({ $loading }) => ($loading ? '0' : '1')};
|
124
122
|
`;
|
125
|
-
const IconContainer = styled(IconComponent) `
|
126
|
-
|
127
|
-
|
123
|
+
const IconContainer = styled(IconComponent)(({ trailingIcon }) => css `
|
124
|
+
margin: ${trailingIcon ? '0 0 0 10px' : '0 10px 0 0'};
|
125
|
+
`);
|
128
126
|
const ChildrenContainer = styled.div `
|
129
127
|
padding: 16px 0;
|
130
128
|
flex-grow: 1;
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../src/Button/Button.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAuC,UAAU,EAAE,MAAM,OAAO,CAAA;AAC9E,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;
|
1
|
+
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../src/Button/Button.tsx"],"names":[],"mappings":"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"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Button.stories.js","sourceRoot":"","sources":["../../src/Button/Button.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,MAAM,EAAe,MAAM,UAAU,CAAA;AAC9C,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAA;AAC/D,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAA;AAE7C,eAAe;IACb,KAAK,EAAE,QAAQ;IACf,SAAS,EAAE,MAAM;IACjB,QAAQ,EAAE,EAAE,WAAW,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE;CACjD,CAAA;AAED,MAAM,QAAQ,GAAG,CAAC,KAAkB,EAAE,EAAE,CAAC,oBAAC,MAAM,oBAAK,KAAK,iBAAsB,CAAA;AAEhF,MAAM,6BAA6B,GAAG,CAAC,KAAkB,EAAE,EAAE,CAAC,CAC5D,oBAAC,qBAAqB,oBAAK,KAAK,EAAI,CACrC,CAAA;AAED,MAAM,CAAC,MAAM,UAAU,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAE3C,UAAU,CAAC,IAAI,GAAG;IAChB,OAAO,EAAE,IAAI;IACb,SAAS,EAAE,KAAK;IAChB,
|
1
|
+
{"version":3,"file":"Button.stories.js","sourceRoot":"","sources":["../../src/Button/Button.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,MAAM,EAAe,MAAM,UAAU,CAAA;AAC9C,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAA;AAC/D,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAA;AAE7C,eAAe;IACb,KAAK,EAAE,QAAQ;IACf,SAAS,EAAE,MAAM;IACjB,QAAQ,EAAE,EAAE,WAAW,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE;CACjD,CAAA;AAED,MAAM,QAAQ,GAAG,CAAC,KAAkB,EAAE,EAAE,CAAC,oBAAC,MAAM,oBAAK,KAAK,iBAAsB,CAAA;AAEhF,MAAM,6BAA6B,GAAG,CAAC,KAAkB,EAAE,EAAE,CAAC,CAC5D,oBAAC,qBAAqB,oBAAK,KAAK,EAAI,CACrC,CAAA;AAED,MAAM,CAAC,MAAM,UAAU,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAE3C,UAAU,CAAC,IAAI,GAAG;IAChB,OAAO,EAAE,IAAI;IACb,SAAS,EAAE,KAAK;IAChB,aAAa,EAAE,KAAK;IACpB,QAAQ,EAAE,KAAK;IACf,OAAO,EAAE,KAAK;IACd,IAAI,EAAE,EAAE;CACT,CAAA;AAED,MAAM,CAAC,MAAM,WAAW,GAAG,6BAA6B,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACjE,MAAM,CAAC,MAAM,UAAU,GAAG,cAAc,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAEjD,MAAM,CAAC,MAAM,WAAW,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAE5C,WAAW,CAAC,IAAI,GAAG;IACjB,OAAO,EAAE,IAAI;IACb,WAAW,EAAE,OAAO;CACrB,CAAA"}
|
@@ -3,10 +3,12 @@ import styled from 'styled-components';
|
|
3
3
|
import { Text } from '../Text';
|
4
4
|
import { Box } from '../Box';
|
5
5
|
import { Button } from './Button';
|
6
|
-
const buttonList = [
|
6
|
+
export const buttonList = [
|
7
7
|
{ primary: true, children: 'Save' },
|
8
8
|
{ secondary: true, children: 'Edit' },
|
9
|
-
{
|
9
|
+
{ fallbackStyle: true, children: 'Cancel' },
|
10
|
+
{ textBtn: true, children: 'View' },
|
11
|
+
{ smallButton: true, children: 'Small' },
|
10
12
|
];
|
11
13
|
export const CollectionPage = () => {
|
12
14
|
return (React.createElement(Wrapper, null,
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Collection.js","sourceRoot":"","sources":["../../src/Button/Collection.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAA;AAC5C,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAEtC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,MAAM,EAAe,MAAM,UAAU,CAAA;AAE9C,MAAM,UAAU,GAAuB;
|
1
|
+
{"version":3,"file":"Collection.js","sourceRoot":"","sources":["../../src/Button/Collection.tsx"],"names":[],"mappings":"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"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../src/Button/__tests__/Button.js"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,
|
1
|
+
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../src/Button/__tests__/Button.js"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAA;AAC/C,OAAO,wBAAwB,CAAA;AAE/B,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAElC,IAAI,CAAC,SAAS,EAAE,GAAG,EAAE;IACnB,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,CAAC,oBAAC,MAAM,IAAC,KAAK,EAAC,OAAO,GAAG,CAAC,CAAA;IACtD,MAAM,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC,eAAe,EAAE,CAAA;AAChD,CAAC,CAAC,CAAA"}
|
package/dist/Card/Card.d.ts
CHANGED
@@ -1,7 +1,27 @@
|
|
1
|
-
import { FC, ReactNode } from 'react';
|
1
|
+
import { FC, MouseEventHandler, ReactNode } from 'react';
|
2
2
|
import { MarginProps } from '../utils/space';
|
3
3
|
export type CardProps = {
|
4
|
-
children
|
4
|
+
children?: ReactNode;
|
5
|
+
/** leading card icon */
|
6
|
+
leadingIcon?: string;
|
7
|
+
/** generic card title */
|
8
|
+
title?: string;
|
9
|
+
/** generic card body */
|
10
|
+
body?: string;
|
11
|
+
/** card image */
|
12
|
+
visual?: string;
|
13
|
+
/** height of the image */
|
14
|
+
visualHeight?: string;
|
15
|
+
/** card tag */
|
16
|
+
tag?: ReactNode;
|
17
|
+
/** action for a fully clickable card */
|
18
|
+
cardOnClickAction?: MouseEventHandler<HTMLDivElement>;
|
19
|
+
/** action to the right of the card, chevron, chip or link text */
|
20
|
+
rightAction?: ReactNode;
|
21
|
+
/** primary button */
|
22
|
+
buttonAction?: ReactNode;
|
23
|
+
/** fallback color scheme */
|
24
|
+
fallbackStyle?: boolean;
|
5
25
|
className?: string;
|
6
26
|
/** margin */
|
7
27
|
maxWidth?: string;
|