@sproutsocial/seeds-react-banner 1.0.1 → 1.0.3
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/.turbo/turbo-build.log +19 -19
- package/CHANGELOG.md +14 -0
- package/dist/esm/index.js +22 -15
- package/dist/esm/index.js.map +1 -1
- package/dist/index.d.mts +7 -4
- package/dist/index.d.ts +7 -4
- package/dist/index.js +18 -15
- package/dist/index.js.map +1 -1
- package/package.json +2 -2
- package/src/Banner.stories.tsx +11 -0
- package/src/Banner.tsx +24 -8
- package/src/BannerTypes.ts +6 -0
- package/src/__tests__/Banner.typetest.tsx +10 -0
- package/src/__tests__/features.test.tsx +33 -1
- package/src/styles.ts +17 -6
- package/tsconfig.json +7 -1
package/.turbo/turbo-build.log
CHANGED
|
@@ -1,21 +1,21 @@
|
|
|
1
1
|
yarn run v1.22.22
|
|
2
2
|
$ tsup --dts
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
Done in 48.
|
|
3
|
+
[34mCLI[39m Building entry: src/index.ts
|
|
4
|
+
[34mCLI[39m Using tsconfig: tsconfig.json
|
|
5
|
+
[34mCLI[39m tsup v8.5.0
|
|
6
|
+
[34mCLI[39m Using tsup config: /home/runner/work/seeds/seeds/seeds-react/seeds-react-banner/tsup.config.ts
|
|
7
|
+
[34mCLI[39m Target: es2022
|
|
8
|
+
[34mCLI[39m Cleaning output folder
|
|
9
|
+
[34mCJS[39m Build start
|
|
10
|
+
[34mESM[39m Build start
|
|
11
|
+
[32mCJS[39m [1mdist/index.js [22m[32m6.02 KB[39m
|
|
12
|
+
[32mCJS[39m [1mdist/index.js.map [22m[32m7.77 KB[39m
|
|
13
|
+
[32mCJS[39m ⚡️ Build success in 252ms
|
|
14
|
+
[32mESM[39m [1mdist/esm/index.js [22m[32m3.82 KB[39m
|
|
15
|
+
[32mESM[39m [1mdist/esm/index.js.map [22m[32m7.66 KB[39m
|
|
16
|
+
[32mESM[39m ⚡️ Build success in 251ms
|
|
17
|
+
[34mDTS[39m Build start
|
|
18
|
+
[32mDTS[39m ⚡️ Build success in 40618ms
|
|
19
|
+
[32mDTS[39m [1mdist/index.d.ts [22m[32m1.35 KB[39m
|
|
20
|
+
[32mDTS[39m [1mdist/index.d.mts [22m[32m1.35 KB[39m
|
|
21
|
+
Done in 48.26s.
|
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,19 @@
|
|
|
1
1
|
# @sproutsocial/seeds-react-banner
|
|
2
2
|
|
|
3
|
+
## 1.0.3
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- 2e2a4db: Adds FLEXBOX system props to Banner
|
|
8
|
+
- Updated dependencies [bbf32af]
|
|
9
|
+
- @sproutsocial/seeds-react-theme@2.4.2
|
|
10
|
+
|
|
11
|
+
## 1.0.2
|
|
12
|
+
|
|
13
|
+
### Patch Changes
|
|
14
|
+
|
|
15
|
+
- e2de2b6: New Banner variant prop, which changes the background color, border, and icon color of the Banner component
|
|
16
|
+
|
|
3
17
|
## 1.0.1
|
|
4
18
|
|
|
5
19
|
### Patch Changes
|
package/dist/esm/index.js
CHANGED
|
@@ -6,13 +6,12 @@ import Icon2 from "@sproutsocial/seeds-react-icon";
|
|
|
6
6
|
|
|
7
7
|
// src/styles.ts
|
|
8
8
|
import styled, { css } from "styled-components";
|
|
9
|
-
import {
|
|
9
|
+
import {
|
|
10
|
+
COMMON,
|
|
11
|
+
LAYOUT,
|
|
12
|
+
FLEXBOX
|
|
13
|
+
} from "@sproutsocial/seeds-react-system-props";
|
|
10
14
|
import Icon from "@sproutsocial/seeds-react-icon";
|
|
11
|
-
|
|
12
|
-
// src/BannerTypes.ts
|
|
13
|
-
import "react";
|
|
14
|
-
|
|
15
|
-
// src/styles.ts
|
|
16
15
|
var Container = styled.div(
|
|
17
16
|
(props) => css`
|
|
18
17
|
display: flex;
|
|
@@ -24,8 +23,9 @@ var Container = styled.div(
|
|
|
24
23
|
font-family: ${props.theme.fontFamily};
|
|
25
24
|
${props.theme.typography[200]}
|
|
26
25
|
padding: ${props.theme.space[300]};
|
|
27
|
-
border: 1px solid
|
|
28
|
-
|
|
26
|
+
border: 1px solid
|
|
27
|
+
${props.variant === "ghost" ? props.theme.colors.container.border.base : props.theme.colors.container.border[props.type]};
|
|
28
|
+
background-color: ${props.variant === "ghost" ? props.theme.colors.container.background.base : props.theme.colors.container.background[props.type]};
|
|
29
29
|
|
|
30
30
|
a,
|
|
31
31
|
button {
|
|
@@ -44,6 +44,7 @@ var Container = styled.div(
|
|
|
44
44
|
|
|
45
45
|
${COMMON}
|
|
46
46
|
${LAYOUT}
|
|
47
|
+
${FLEXBOX}
|
|
47
48
|
`
|
|
48
49
|
);
|
|
49
50
|
var styles_default = Container;
|
|
@@ -69,23 +70,25 @@ var getBannerIconName = (type) => {
|
|
|
69
70
|
return "circle-i-outline";
|
|
70
71
|
}
|
|
71
72
|
};
|
|
72
|
-
var getBannerIconColor = (type) => {
|
|
73
|
+
var getBannerIconColor = (type, variant) => {
|
|
74
|
+
const isGhostVariant = variant === "ghost";
|
|
73
75
|
switch (type) {
|
|
74
76
|
case "success":
|
|
75
|
-
return "icon.success";
|
|
77
|
+
return isGhostVariant ? "container.border.decorative.green" : "icon.success";
|
|
76
78
|
case "error":
|
|
77
|
-
return "icon.error";
|
|
79
|
+
return isGhostVariant ? "container.border.decorative.red" : "icon.error";
|
|
78
80
|
case "warning":
|
|
79
|
-
return "icon.warning";
|
|
81
|
+
return isGhostVariant ? "container.border.decorative.yellow" : "icon.warning";
|
|
80
82
|
case "opportunity":
|
|
81
|
-
return "icon.opportunity";
|
|
83
|
+
return isGhostVariant ? "container.border.decorative.purple" : "icon.opportunity";
|
|
82
84
|
case "info":
|
|
83
85
|
default:
|
|
84
|
-
return "icon.info";
|
|
86
|
+
return isGhostVariant ? "container.border.decorative.blue" : "icon.info";
|
|
85
87
|
}
|
|
86
88
|
};
|
|
87
89
|
var Banner = ({
|
|
88
90
|
type = "info",
|
|
91
|
+
variant = "default",
|
|
89
92
|
text,
|
|
90
93
|
onClose,
|
|
91
94
|
closeButtonLabel = "Close",
|
|
@@ -96,6 +99,7 @@ var Banner = ({
|
|
|
96
99
|
styles_default,
|
|
97
100
|
{
|
|
98
101
|
type,
|
|
102
|
+
variant,
|
|
99
103
|
"data-qa-alert": "",
|
|
100
104
|
"data-qa-alert-type": type,
|
|
101
105
|
"data-qa-alert-text": text,
|
|
@@ -105,7 +109,7 @@ var Banner = ({
|
|
|
105
109
|
StyledBannerIcon,
|
|
106
110
|
{
|
|
107
111
|
name: getBannerIconName(type),
|
|
108
|
-
color: getBannerIconColor(type),
|
|
112
|
+
color: getBannerIconColor(type, variant),
|
|
109
113
|
className: "Icon",
|
|
110
114
|
fixedWidth: true,
|
|
111
115
|
mt: 100,
|
|
@@ -121,6 +125,9 @@ var Banner = ({
|
|
|
121
125
|
};
|
|
122
126
|
var Banner_default = Banner;
|
|
123
127
|
|
|
128
|
+
// src/BannerTypes.ts
|
|
129
|
+
import "react";
|
|
130
|
+
|
|
124
131
|
// src/index.ts
|
|
125
132
|
var index_default = Banner_default;
|
|
126
133
|
export {
|
package/dist/esm/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Banner.tsx","../../src/styles.ts","../../src/BannerTypes.ts","../../src/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport Button from \"@sproutsocial/seeds-react-button\";\nimport Icon from \"@sproutsocial/seeds-react-icon\";\nimport Container, { StyledBannerIcon } from \"./styles\";\nimport type {
|
|
1
|
+
{"version":3,"sources":["../../src/Banner.tsx","../../src/styles.ts","../../src/BannerTypes.ts","../../src/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport Button from \"@sproutsocial/seeds-react-button\";\nimport Icon from \"@sproutsocial/seeds-react-icon\";\nimport Container, { StyledBannerIcon } from \"./styles\";\nimport type {\n TypeBannerProps,\n EnumBannerType,\n EnumBannerVariant,\n} from \"./BannerTypes\";\n\nconst getBannerIconName = (type: EnumBannerType) => {\n switch (type) {\n case \"success\":\n return \"circle-check-outline\";\n case \"error\":\n return \"triangle-exclamation-outline\";\n case \"warning\":\n return \"triangle-exclamation-outline\";\n case \"opportunity\":\n return \"sparkle-outline\";\n case \"info\":\n default:\n return \"circle-i-outline\";\n }\n};\n\nconst getBannerIconColor = (\n type: EnumBannerType,\n variant: EnumBannerVariant\n) => {\n const isGhostVariant = variant === \"ghost\";\n switch (type) {\n case \"success\":\n return isGhostVariant\n ? \"container.border.decorative.green\"\n : \"icon.success\";\n case \"error\":\n return isGhostVariant ? \"container.border.decorative.red\" : \"icon.error\";\n case \"warning\":\n return isGhostVariant\n ? \"container.border.decorative.yellow\"\n : \"icon.warning\";\n case \"opportunity\":\n return isGhostVariant\n ? \"container.border.decorative.purple\"\n : \"icon.opportunity\";\n case \"info\":\n default:\n return isGhostVariant ? \"container.border.decorative.blue\" : \"icon.info\";\n }\n};\n\n/** TODO: change to 'info' type by default in future version */\nconst Banner = ({\n type = \"info\",\n variant = \"default\",\n text,\n onClose,\n closeButtonLabel = \"Close\",\n typeIconProps,\n ...rest\n}: TypeBannerProps) => {\n return (\n <Container\n type={type}\n variant={variant}\n data-qa-alert=\"\"\n data-qa-alert-type={type}\n data-qa-alert-text={text}\n {...rest}\n >\n <Box display=\"flex\" alignItems=\"center\" width={1}>\n <StyledBannerIcon\n name={getBannerIconName(type)}\n color={getBannerIconColor(type, variant)}\n className=\"Icon\"\n fixedWidth\n mt={100}\n mr={350}\n {...typeIconProps}\n />\n {text}\n {onClose && (\n <Box ml=\"auto\" pl={400} alignSelf=\"flex-start\">\n <Button p={0} onClick={onClose} ariaLabel={closeButtonLabel}>\n <Icon name=\"x-outline\" aria-hidden />\n </Button>\n </Box>\n )}\n </Box>\n </Container>\n );\n};\n\nexport default Banner;\n","import styled, { css } from \"styled-components\";\nimport {\n COMMON,\n LAYOUT,\n FLEXBOX,\n} from \"@sproutsocial/seeds-react-system-props\";\nimport Icon from \"@sproutsocial/seeds-react-icon\";\nimport type { EnumBannerType, EnumBannerVariant } from \"./BannerTypes\";\n\ntype TypeContainerProps = {\n type: EnumBannerType;\n variant: EnumBannerVariant;\n};\n\nconst Container = styled.div<TypeContainerProps>(\n (props) => css`\n display: flex;\n overflow: hidden;\n align-items: center;\n justify-content: space-between;\n color: ${props.theme.colors.text.body};\n border-radius: ${props.theme.radii.outer};\n font-family: ${props.theme.fontFamily};\n ${props.theme.typography[200]}\n padding: ${props.theme.space[300]};\n border: 1px solid\n ${props.variant === \"ghost\"\n ? props.theme.colors.container.border.base\n : props.theme.colors.container.border[props.type]};\n background-color: ${props.variant === \"ghost\"\n ? props.theme.colors.container.background.base\n : props.theme.colors.container.background[props.type]};\n\n a,\n button {\n font-weight: ${props.theme.fontWeights.semibold};\n color: ${props.theme.colors.text.body};\n font-size: inherit;\n &:hover {\n color: ${props.theme.colors.text.body};\n text-decoration: underline;\n }\n }\n\n > span:not(.Icon) {\n display: block;\n }\n\n ${COMMON}\n ${LAYOUT}\n ${FLEXBOX}\n `\n);\n\nexport default Container;\n\nexport const StyledBannerIcon = styled(Icon)`\n align-self: flex-start;\n min-width: 16px;\n`;\n","import * as React from \"react\";\nimport type { TypeStyledComponentsCommonProps } from \"@sproutsocial/seeds-react-system-props\";\nimport type {\n TypeSystemCommonProps,\n TypeSystemLayoutProps,\n TypeSystemFlexboxProps,\n} from \"@sproutsocial/seeds-react-system-props\";\nimport type { TypeIconProps } from \"@sproutsocial/seeds-react-icon\";\n\nexport type EnumBannerType =\n | \"success\"\n | \"info\"\n | \"error\"\n | \"warning\"\n | \"opportunity\";\n\nexport type EnumBannerVariant = \"default\" | \"ghost\";\n\nexport interface TypeBannerProps\n extends Omit<React.ComponentPropsWithoutRef<\"div\">, \"color\">,\n TypeSystemCommonProps,\n TypeSystemLayoutProps,\n TypeSystemFlexboxProps,\n TypeStyledComponentsCommonProps {\n text: React.ReactNode;\n /** Type of banner. */\n type?: EnumBannerType;\n /** Variant of banner. */\n variant?: EnumBannerVariant;\n /** Show the close icon in the banner with an action when clicked */\n onClose?: () => void;\n /** Close icon aria label */\n closeButtonLabel?: string;\n /** Icon props that can be passed to the Type specific Icon */\n typeIconProps?: Partial<Omit<TypeIconProps, \"name\">>;\n}\n","import Banner from \"./Banner\";\n\nexport default Banner;\nexport { Banner };\nexport * from \"./BannerTypes\";\n"],"mappings":"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","names":["Icon","Icon"]}
|
package/dist/index.d.mts
CHANGED
|
@@ -1,13 +1,16 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
2
|
import * as React from 'react';
|
|
3
|
-
import { TypeSystemCommonProps, TypeSystemLayoutProps, TypeStyledComponentsCommonProps } from '@sproutsocial/seeds-react-system-props';
|
|
3
|
+
import { TypeSystemCommonProps, TypeSystemLayoutProps, TypeSystemFlexboxProps, TypeStyledComponentsCommonProps } from '@sproutsocial/seeds-react-system-props';
|
|
4
4
|
import { TypeIconProps } from '@sproutsocial/seeds-react-icon';
|
|
5
5
|
|
|
6
6
|
type EnumBannerType = "success" | "info" | "error" | "warning" | "opportunity";
|
|
7
|
-
|
|
7
|
+
type EnumBannerVariant = "default" | "ghost";
|
|
8
|
+
interface TypeBannerProps extends Omit<React.ComponentPropsWithoutRef<"div">, "color">, TypeSystemCommonProps, TypeSystemLayoutProps, TypeSystemFlexboxProps, TypeStyledComponentsCommonProps {
|
|
8
9
|
text: React.ReactNode;
|
|
9
10
|
/** Type of banner. */
|
|
10
11
|
type?: EnumBannerType;
|
|
12
|
+
/** Variant of banner. */
|
|
13
|
+
variant?: EnumBannerVariant;
|
|
11
14
|
/** Show the close icon in the banner with an action when clicked */
|
|
12
15
|
onClose?: () => void;
|
|
13
16
|
/** Close icon aria label */
|
|
@@ -17,6 +20,6 @@ interface TypeBannerProps extends Omit<React.ComponentPropsWithoutRef<"div">, "c
|
|
|
17
20
|
}
|
|
18
21
|
|
|
19
22
|
/** TODO: change to 'info' type by default in future version */
|
|
20
|
-
declare const Banner: ({ type, text, onClose, closeButtonLabel, typeIconProps, ...rest }: TypeBannerProps) => react_jsx_runtime.JSX.Element;
|
|
23
|
+
declare const Banner: ({ type, variant, text, onClose, closeButtonLabel, typeIconProps, ...rest }: TypeBannerProps) => react_jsx_runtime.JSX.Element;
|
|
21
24
|
|
|
22
|
-
export { Banner, type EnumBannerType, type TypeBannerProps, Banner as default };
|
|
25
|
+
export { Banner, type EnumBannerType, type EnumBannerVariant, type TypeBannerProps, Banner as default };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,13 +1,16 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
2
|
import * as React from 'react';
|
|
3
|
-
import { TypeSystemCommonProps, TypeSystemLayoutProps, TypeStyledComponentsCommonProps } from '@sproutsocial/seeds-react-system-props';
|
|
3
|
+
import { TypeSystemCommonProps, TypeSystemLayoutProps, TypeSystemFlexboxProps, TypeStyledComponentsCommonProps } from '@sproutsocial/seeds-react-system-props';
|
|
4
4
|
import { TypeIconProps } from '@sproutsocial/seeds-react-icon';
|
|
5
5
|
|
|
6
6
|
type EnumBannerType = "success" | "info" | "error" | "warning" | "opportunity";
|
|
7
|
-
|
|
7
|
+
type EnumBannerVariant = "default" | "ghost";
|
|
8
|
+
interface TypeBannerProps extends Omit<React.ComponentPropsWithoutRef<"div">, "color">, TypeSystemCommonProps, TypeSystemLayoutProps, TypeSystemFlexboxProps, TypeStyledComponentsCommonProps {
|
|
8
9
|
text: React.ReactNode;
|
|
9
10
|
/** Type of banner. */
|
|
10
11
|
type?: EnumBannerType;
|
|
12
|
+
/** Variant of banner. */
|
|
13
|
+
variant?: EnumBannerVariant;
|
|
11
14
|
/** Show the close icon in the banner with an action when clicked */
|
|
12
15
|
onClose?: () => void;
|
|
13
16
|
/** Close icon aria label */
|
|
@@ -17,6 +20,6 @@ interface TypeBannerProps extends Omit<React.ComponentPropsWithoutRef<"div">, "c
|
|
|
17
20
|
}
|
|
18
21
|
|
|
19
22
|
/** TODO: change to 'info' type by default in future version */
|
|
20
|
-
declare const Banner: ({ type, text, onClose, closeButtonLabel, typeIconProps, ...rest }: TypeBannerProps) => react_jsx_runtime.JSX.Element;
|
|
23
|
+
declare const Banner: ({ type, variant, text, onClose, closeButtonLabel, typeIconProps, ...rest }: TypeBannerProps) => react_jsx_runtime.JSX.Element;
|
|
21
24
|
|
|
22
|
-
export { Banner, type EnumBannerType, type TypeBannerProps, Banner as default };
|
|
25
|
+
export { Banner, type EnumBannerType, type EnumBannerVariant, type TypeBannerProps, Banner as default };
|
package/dist/index.js
CHANGED
|
@@ -36,7 +36,7 @@ __export(index_exports, {
|
|
|
36
36
|
module.exports = __toCommonJS(index_exports);
|
|
37
37
|
|
|
38
38
|
// src/Banner.tsx
|
|
39
|
-
var
|
|
39
|
+
var React = require("react");
|
|
40
40
|
var import_seeds_react_box = __toESM(require("@sproutsocial/seeds-react-box"));
|
|
41
41
|
var import_seeds_react_button = __toESM(require("@sproutsocial/seeds-react-button"));
|
|
42
42
|
var import_seeds_react_icon2 = __toESM(require("@sproutsocial/seeds-react-icon"));
|
|
@@ -45,11 +45,6 @@ var import_seeds_react_icon2 = __toESM(require("@sproutsocial/seeds-react-icon")
|
|
|
45
45
|
var import_styled_components = __toESM(require("styled-components"));
|
|
46
46
|
var import_seeds_react_system_props = require("@sproutsocial/seeds-react-system-props");
|
|
47
47
|
var import_seeds_react_icon = __toESM(require("@sproutsocial/seeds-react-icon"));
|
|
48
|
-
|
|
49
|
-
// src/BannerTypes.ts
|
|
50
|
-
var React = require("react");
|
|
51
|
-
|
|
52
|
-
// src/styles.ts
|
|
53
48
|
var Container = import_styled_components.default.div(
|
|
54
49
|
(props) => import_styled_components.css`
|
|
55
50
|
display: flex;
|
|
@@ -61,8 +56,9 @@ var Container = import_styled_components.default.div(
|
|
|
61
56
|
font-family: ${props.theme.fontFamily};
|
|
62
57
|
${props.theme.typography[200]}
|
|
63
58
|
padding: ${props.theme.space[300]};
|
|
64
|
-
border: 1px solid
|
|
65
|
-
|
|
59
|
+
border: 1px solid
|
|
60
|
+
${props.variant === "ghost" ? props.theme.colors.container.border.base : props.theme.colors.container.border[props.type]};
|
|
61
|
+
background-color: ${props.variant === "ghost" ? props.theme.colors.container.background.base : props.theme.colors.container.background[props.type]};
|
|
66
62
|
|
|
67
63
|
a,
|
|
68
64
|
button {
|
|
@@ -81,6 +77,7 @@ var Container = import_styled_components.default.div(
|
|
|
81
77
|
|
|
82
78
|
${import_seeds_react_system_props.COMMON}
|
|
83
79
|
${import_seeds_react_system_props.LAYOUT}
|
|
80
|
+
${import_seeds_react_system_props.FLEXBOX}
|
|
84
81
|
`
|
|
85
82
|
);
|
|
86
83
|
var styles_default = Container;
|
|
@@ -106,23 +103,25 @@ var getBannerIconName = (type) => {
|
|
|
106
103
|
return "circle-i-outline";
|
|
107
104
|
}
|
|
108
105
|
};
|
|
109
|
-
var getBannerIconColor = (type) => {
|
|
106
|
+
var getBannerIconColor = (type, variant) => {
|
|
107
|
+
const isGhostVariant = variant === "ghost";
|
|
110
108
|
switch (type) {
|
|
111
109
|
case "success":
|
|
112
|
-
return "icon.success";
|
|
110
|
+
return isGhostVariant ? "container.border.decorative.green" : "icon.success";
|
|
113
111
|
case "error":
|
|
114
|
-
return "icon.error";
|
|
112
|
+
return isGhostVariant ? "container.border.decorative.red" : "icon.error";
|
|
115
113
|
case "warning":
|
|
116
|
-
return "icon.warning";
|
|
114
|
+
return isGhostVariant ? "container.border.decorative.yellow" : "icon.warning";
|
|
117
115
|
case "opportunity":
|
|
118
|
-
return "icon.opportunity";
|
|
116
|
+
return isGhostVariant ? "container.border.decorative.purple" : "icon.opportunity";
|
|
119
117
|
case "info":
|
|
120
118
|
default:
|
|
121
|
-
return "icon.info";
|
|
119
|
+
return isGhostVariant ? "container.border.decorative.blue" : "icon.info";
|
|
122
120
|
}
|
|
123
121
|
};
|
|
124
122
|
var Banner = ({
|
|
125
123
|
type = "info",
|
|
124
|
+
variant = "default",
|
|
126
125
|
text,
|
|
127
126
|
onClose,
|
|
128
127
|
closeButtonLabel = "Close",
|
|
@@ -133,6 +132,7 @@ var Banner = ({
|
|
|
133
132
|
styles_default,
|
|
134
133
|
{
|
|
135
134
|
type,
|
|
135
|
+
variant,
|
|
136
136
|
"data-qa-alert": "",
|
|
137
137
|
"data-qa-alert-type": type,
|
|
138
138
|
"data-qa-alert-text": text,
|
|
@@ -142,7 +142,7 @@ var Banner = ({
|
|
|
142
142
|
StyledBannerIcon,
|
|
143
143
|
{
|
|
144
144
|
name: getBannerIconName(type),
|
|
145
|
-
color: getBannerIconColor(type),
|
|
145
|
+
color: getBannerIconColor(type, variant),
|
|
146
146
|
className: "Icon",
|
|
147
147
|
fixedWidth: true,
|
|
148
148
|
mt: 100,
|
|
@@ -158,6 +158,9 @@ var Banner = ({
|
|
|
158
158
|
};
|
|
159
159
|
var Banner_default = Banner;
|
|
160
160
|
|
|
161
|
+
// src/BannerTypes.ts
|
|
162
|
+
var React2 = require("react");
|
|
163
|
+
|
|
161
164
|
// src/index.ts
|
|
162
165
|
var index_default = Banner_default;
|
|
163
166
|
// Annotate the CommonJS export names for ESM import in node:
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts","../src/Banner.tsx","../src/styles.ts","../src/BannerTypes.ts"],"sourcesContent":["import Banner from \"./Banner\";\n\nexport default Banner;\nexport { Banner };\nexport * from \"./BannerTypes\";\n","import * as React from \"react\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport Button from \"@sproutsocial/seeds-react-button\";\nimport Icon from \"@sproutsocial/seeds-react-icon\";\nimport Container, { StyledBannerIcon } from \"./styles\";\nimport type {
|
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/Banner.tsx","../src/styles.ts","../src/BannerTypes.ts"],"sourcesContent":["import Banner from \"./Banner\";\n\nexport default Banner;\nexport { Banner };\nexport * from \"./BannerTypes\";\n","import * as React from \"react\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport Button from \"@sproutsocial/seeds-react-button\";\nimport Icon from \"@sproutsocial/seeds-react-icon\";\nimport Container, { StyledBannerIcon } from \"./styles\";\nimport type {\n TypeBannerProps,\n EnumBannerType,\n EnumBannerVariant,\n} from \"./BannerTypes\";\n\nconst getBannerIconName = (type: EnumBannerType) => {\n switch (type) {\n case \"success\":\n return \"circle-check-outline\";\n case \"error\":\n return \"triangle-exclamation-outline\";\n case \"warning\":\n return \"triangle-exclamation-outline\";\n case \"opportunity\":\n return \"sparkle-outline\";\n case \"info\":\n default:\n return \"circle-i-outline\";\n }\n};\n\nconst getBannerIconColor = (\n type: EnumBannerType,\n variant: EnumBannerVariant\n) => {\n const isGhostVariant = variant === \"ghost\";\n switch (type) {\n case \"success\":\n return isGhostVariant\n ? \"container.border.decorative.green\"\n : \"icon.success\";\n case \"error\":\n return isGhostVariant ? \"container.border.decorative.red\" : \"icon.error\";\n case \"warning\":\n return isGhostVariant\n ? \"container.border.decorative.yellow\"\n : \"icon.warning\";\n case \"opportunity\":\n return isGhostVariant\n ? \"container.border.decorative.purple\"\n : \"icon.opportunity\";\n case \"info\":\n default:\n return isGhostVariant ? \"container.border.decorative.blue\" : \"icon.info\";\n }\n};\n\n/** TODO: change to 'info' type by default in future version */\nconst Banner = ({\n type = \"info\",\n variant = \"default\",\n text,\n onClose,\n closeButtonLabel = \"Close\",\n typeIconProps,\n ...rest\n}: TypeBannerProps) => {\n return (\n <Container\n type={type}\n variant={variant}\n data-qa-alert=\"\"\n data-qa-alert-type={type}\n data-qa-alert-text={text}\n {...rest}\n >\n <Box display=\"flex\" alignItems=\"center\" width={1}>\n <StyledBannerIcon\n name={getBannerIconName(type)}\n color={getBannerIconColor(type, variant)}\n className=\"Icon\"\n fixedWidth\n mt={100}\n mr={350}\n {...typeIconProps}\n />\n {text}\n {onClose && (\n <Box ml=\"auto\" pl={400} alignSelf=\"flex-start\">\n <Button p={0} onClick={onClose} ariaLabel={closeButtonLabel}>\n <Icon name=\"x-outline\" aria-hidden />\n </Button>\n </Box>\n )}\n </Box>\n </Container>\n );\n};\n\nexport default Banner;\n","import styled, { css } from \"styled-components\";\nimport {\n COMMON,\n LAYOUT,\n FLEXBOX,\n} from \"@sproutsocial/seeds-react-system-props\";\nimport Icon from \"@sproutsocial/seeds-react-icon\";\nimport type { EnumBannerType, EnumBannerVariant } from \"./BannerTypes\";\n\ntype TypeContainerProps = {\n type: EnumBannerType;\n variant: EnumBannerVariant;\n};\n\nconst Container = styled.div<TypeContainerProps>(\n (props) => css`\n display: flex;\n overflow: hidden;\n align-items: center;\n justify-content: space-between;\n color: ${props.theme.colors.text.body};\n border-radius: ${props.theme.radii.outer};\n font-family: ${props.theme.fontFamily};\n ${props.theme.typography[200]}\n padding: ${props.theme.space[300]};\n border: 1px solid\n ${props.variant === \"ghost\"\n ? props.theme.colors.container.border.base\n : props.theme.colors.container.border[props.type]};\n background-color: ${props.variant === \"ghost\"\n ? props.theme.colors.container.background.base\n : props.theme.colors.container.background[props.type]};\n\n a,\n button {\n font-weight: ${props.theme.fontWeights.semibold};\n color: ${props.theme.colors.text.body};\n font-size: inherit;\n &:hover {\n color: ${props.theme.colors.text.body};\n text-decoration: underline;\n }\n }\n\n > span:not(.Icon) {\n display: block;\n }\n\n ${COMMON}\n ${LAYOUT}\n ${FLEXBOX}\n `\n);\n\nexport default Container;\n\nexport const StyledBannerIcon = styled(Icon)`\n align-self: flex-start;\n min-width: 16px;\n`;\n","import * as React from \"react\";\nimport type { TypeStyledComponentsCommonProps } from \"@sproutsocial/seeds-react-system-props\";\nimport type {\n TypeSystemCommonProps,\n TypeSystemLayoutProps,\n TypeSystemFlexboxProps,\n} from \"@sproutsocial/seeds-react-system-props\";\nimport type { TypeIconProps } from \"@sproutsocial/seeds-react-icon\";\n\nexport type EnumBannerType =\n | \"success\"\n | \"info\"\n | \"error\"\n | \"warning\"\n | \"opportunity\";\n\nexport type EnumBannerVariant = \"default\" | \"ghost\";\n\nexport interface TypeBannerProps\n extends Omit<React.ComponentPropsWithoutRef<\"div\">, \"color\">,\n TypeSystemCommonProps,\n TypeSystemLayoutProps,\n TypeSystemFlexboxProps,\n TypeStyledComponentsCommonProps {\n text: React.ReactNode;\n /** Type of banner. */\n type?: EnumBannerType;\n /** Variant of banner. */\n variant?: EnumBannerVariant;\n /** Show the close icon in the banner with an action when clicked */\n onClose?: () => void;\n /** Close icon aria label */\n closeButtonLabel?: string;\n /** Icon props that can be passed to the Type specific Icon */\n typeIconProps?: Partial<Omit<TypeIconProps, \"name\">>;\n}\n"],"mappings":"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","names":["import_seeds_react_icon","styled","Icon","Box","Button","Icon","React"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sproutsocial/seeds-react-banner",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.3",
|
|
4
4
|
"description": "Seeds React Banner",
|
|
5
5
|
"author": "Sprout Social, Inc.",
|
|
6
6
|
"license": "MIT",
|
|
@@ -30,7 +30,7 @@
|
|
|
30
30
|
"@sproutsocial/eslint-config-seeds": "*",
|
|
31
31
|
"react": "^18.0.0",
|
|
32
32
|
"styled-components": "^5.2.3",
|
|
33
|
-
"tsup": "^8.
|
|
33
|
+
"tsup": "^8.3.4",
|
|
34
34
|
"typescript": "^5.6.2",
|
|
35
35
|
"@sproutsocial/seeds-tsconfig": "*",
|
|
36
36
|
"@sproutsocial/seeds-testing": "*",
|
package/src/Banner.stories.tsx
CHANGED
|
@@ -13,9 +13,14 @@ const meta: Meta<typeof Banner> = {
|
|
|
13
13
|
options: ["success", "info", "error", "warning", "opportunity"],
|
|
14
14
|
control: { type: "select" },
|
|
15
15
|
},
|
|
16
|
+
variant: {
|
|
17
|
+
options: ["default", "ghost"],
|
|
18
|
+
control: { type: "select" },
|
|
19
|
+
},
|
|
16
20
|
},
|
|
17
21
|
args: {
|
|
18
22
|
type: "success",
|
|
23
|
+
variant: "default",
|
|
19
24
|
typeIconProps: { "aria-label": "Success" },
|
|
20
25
|
text: "This is a success message!",
|
|
21
26
|
},
|
|
@@ -46,6 +51,7 @@ export const Permutations: Story = {
|
|
|
46
51
|
<Banner
|
|
47
52
|
text={findText(args.type)}
|
|
48
53
|
type={args.type}
|
|
54
|
+
variant={args.variant}
|
|
49
55
|
typeIconProps={{ "aria-label": args.type }}
|
|
50
56
|
/>
|
|
51
57
|
),
|
|
@@ -56,6 +62,7 @@ export const Links: Story = {
|
|
|
56
62
|
render: (args) => (
|
|
57
63
|
<Banner
|
|
58
64
|
type={args.type}
|
|
65
|
+
variant={args.variant}
|
|
59
66
|
typeIconProps={args.typeIconProps}
|
|
60
67
|
text={
|
|
61
68
|
<Box
|
|
@@ -79,6 +86,7 @@ export const Buttons: Story = {
|
|
|
79
86
|
render: (args) => (
|
|
80
87
|
<Banner
|
|
81
88
|
type={args.type}
|
|
89
|
+
variant={args.variant}
|
|
82
90
|
typeIconProps={args.typeIconProps}
|
|
83
91
|
text={
|
|
84
92
|
<Box
|
|
@@ -107,6 +115,7 @@ export const Multiline: Story = {
|
|
|
107
115
|
<Banner
|
|
108
116
|
text={args.text}
|
|
109
117
|
type={args.type}
|
|
118
|
+
variant={args.variant}
|
|
110
119
|
typeIconProps={args.typeIconProps}
|
|
111
120
|
/>
|
|
112
121
|
</Box>
|
|
@@ -122,6 +131,7 @@ export const Closeable: Story = {
|
|
|
122
131
|
<Banner
|
|
123
132
|
text={args.text}
|
|
124
133
|
type={args.type}
|
|
134
|
+
variant={args.variant}
|
|
125
135
|
typeIconProps={args.typeIconProps}
|
|
126
136
|
onClose={() => alert("Testing...")}
|
|
127
137
|
closeButtonLabel="Close the banner"
|
|
@@ -139,6 +149,7 @@ export const HiddenIcon: Story = {
|
|
|
139
149
|
<Banner
|
|
140
150
|
text={args.text}
|
|
141
151
|
type={args.type}
|
|
152
|
+
variant={args.variant}
|
|
142
153
|
typeIconProps={args.typeIconProps}
|
|
143
154
|
onClose={() => alert("Testing...")}
|
|
144
155
|
closeButtonLabel="Close the banner"
|
package/src/Banner.tsx
CHANGED
|
@@ -3,7 +3,11 @@ import Box from "@sproutsocial/seeds-react-box";
|
|
|
3
3
|
import Button from "@sproutsocial/seeds-react-button";
|
|
4
4
|
import Icon from "@sproutsocial/seeds-react-icon";
|
|
5
5
|
import Container, { StyledBannerIcon } from "./styles";
|
|
6
|
-
import type {
|
|
6
|
+
import type {
|
|
7
|
+
TypeBannerProps,
|
|
8
|
+
EnumBannerType,
|
|
9
|
+
EnumBannerVariant,
|
|
10
|
+
} from "./BannerTypes";
|
|
7
11
|
|
|
8
12
|
const getBannerIconName = (type: EnumBannerType) => {
|
|
9
13
|
switch (type) {
|
|
@@ -21,25 +25,36 @@ const getBannerIconName = (type: EnumBannerType) => {
|
|
|
21
25
|
}
|
|
22
26
|
};
|
|
23
27
|
|
|
24
|
-
const getBannerIconColor = (
|
|
28
|
+
const getBannerIconColor = (
|
|
29
|
+
type: EnumBannerType,
|
|
30
|
+
variant: EnumBannerVariant
|
|
31
|
+
) => {
|
|
32
|
+
const isGhostVariant = variant === "ghost";
|
|
25
33
|
switch (type) {
|
|
26
34
|
case "success":
|
|
27
|
-
return
|
|
35
|
+
return isGhostVariant
|
|
36
|
+
? "container.border.decorative.green"
|
|
37
|
+
: "icon.success";
|
|
28
38
|
case "error":
|
|
29
|
-
return "icon.error";
|
|
39
|
+
return isGhostVariant ? "container.border.decorative.red" : "icon.error";
|
|
30
40
|
case "warning":
|
|
31
|
-
return
|
|
41
|
+
return isGhostVariant
|
|
42
|
+
? "container.border.decorative.yellow"
|
|
43
|
+
: "icon.warning";
|
|
32
44
|
case "opportunity":
|
|
33
|
-
return
|
|
45
|
+
return isGhostVariant
|
|
46
|
+
? "container.border.decorative.purple"
|
|
47
|
+
: "icon.opportunity";
|
|
34
48
|
case "info":
|
|
35
49
|
default:
|
|
36
|
-
return "icon.info";
|
|
50
|
+
return isGhostVariant ? "container.border.decorative.blue" : "icon.info";
|
|
37
51
|
}
|
|
38
52
|
};
|
|
39
53
|
|
|
40
54
|
/** TODO: change to 'info' type by default in future version */
|
|
41
55
|
const Banner = ({
|
|
42
56
|
type = "info",
|
|
57
|
+
variant = "default",
|
|
43
58
|
text,
|
|
44
59
|
onClose,
|
|
45
60
|
closeButtonLabel = "Close",
|
|
@@ -49,6 +64,7 @@ const Banner = ({
|
|
|
49
64
|
return (
|
|
50
65
|
<Container
|
|
51
66
|
type={type}
|
|
67
|
+
variant={variant}
|
|
52
68
|
data-qa-alert=""
|
|
53
69
|
data-qa-alert-type={type}
|
|
54
70
|
data-qa-alert-text={text}
|
|
@@ -57,7 +73,7 @@ const Banner = ({
|
|
|
57
73
|
<Box display="flex" alignItems="center" width={1}>
|
|
58
74
|
<StyledBannerIcon
|
|
59
75
|
name={getBannerIconName(type)}
|
|
60
|
-
color={getBannerIconColor(type)}
|
|
76
|
+
color={getBannerIconColor(type, variant)}
|
|
61
77
|
className="Icon"
|
|
62
78
|
fixedWidth
|
|
63
79
|
mt={100}
|
package/src/BannerTypes.ts
CHANGED
|
@@ -3,6 +3,7 @@ import type { TypeStyledComponentsCommonProps } from "@sproutsocial/seeds-react-
|
|
|
3
3
|
import type {
|
|
4
4
|
TypeSystemCommonProps,
|
|
5
5
|
TypeSystemLayoutProps,
|
|
6
|
+
TypeSystemFlexboxProps,
|
|
6
7
|
} from "@sproutsocial/seeds-react-system-props";
|
|
7
8
|
import type { TypeIconProps } from "@sproutsocial/seeds-react-icon";
|
|
8
9
|
|
|
@@ -13,14 +14,19 @@ export type EnumBannerType =
|
|
|
13
14
|
| "warning"
|
|
14
15
|
| "opportunity";
|
|
15
16
|
|
|
17
|
+
export type EnumBannerVariant = "default" | "ghost";
|
|
18
|
+
|
|
16
19
|
export interface TypeBannerProps
|
|
17
20
|
extends Omit<React.ComponentPropsWithoutRef<"div">, "color">,
|
|
18
21
|
TypeSystemCommonProps,
|
|
19
22
|
TypeSystemLayoutProps,
|
|
23
|
+
TypeSystemFlexboxProps,
|
|
20
24
|
TypeStyledComponentsCommonProps {
|
|
21
25
|
text: React.ReactNode;
|
|
22
26
|
/** Type of banner. */
|
|
23
27
|
type?: EnumBannerType;
|
|
28
|
+
/** Variant of banner. */
|
|
29
|
+
variant?: EnumBannerVariant;
|
|
24
30
|
/** Show the close icon in the banner with an action when clicked */
|
|
25
31
|
onClose?: () => void;
|
|
26
32
|
/** Close icon aria label */
|
|
@@ -11,6 +11,8 @@ function BannerTypes() {
|
|
|
11
11
|
<Banner text="Banner Text" type="error" />
|
|
12
12
|
<Banner text="Banner Text" type="warning" />
|
|
13
13
|
<Banner text="Banner Text" type="opportunity" />
|
|
14
|
+
<Banner text="Banner Text" variant="default" />
|
|
15
|
+
<Banner text="Banner Text" variant="ghost" />
|
|
14
16
|
<Banner
|
|
15
17
|
text="Banner Text"
|
|
16
18
|
mb="400"
|
|
@@ -34,6 +36,8 @@ function BannerTypes() {
|
|
|
34
36
|
/>
|
|
35
37
|
{/* @ts-expect-error - test that invalid type is rejected */}
|
|
36
38
|
<Banner text="Banner Text" type="invalid" />
|
|
39
|
+
{/* @ts-expect-error - test that invalid variant is rejected */}
|
|
40
|
+
<Banner text="Banner Text" variant="invalid" />
|
|
37
41
|
{/* @ts-expect-error - test that invalid onClose is rejected */}
|
|
38
42
|
<Banner text="Banner Text" onClose="invalid" />
|
|
39
43
|
<Banner
|
|
@@ -47,6 +51,12 @@ function BannerTypes() {
|
|
|
47
51
|
// @ts-expect-error - test that typeIconProps does not allow name
|
|
48
52
|
typeIconProps={{ name: "sparkles" }}
|
|
49
53
|
/>
|
|
54
|
+
<Banner
|
|
55
|
+
text="Banner Text"
|
|
56
|
+
type="warning"
|
|
57
|
+
m={100}
|
|
58
|
+
alignSelf={"flex-start"}
|
|
59
|
+
/>
|
|
50
60
|
</>
|
|
51
61
|
);
|
|
52
62
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import React from "react";
|
|
2
1
|
import { render, screen } from "@sproutsocial/seeds-react-testing-library";
|
|
2
|
+
import { theme } from "@sproutsocial/seeds-react-theme";
|
|
3
3
|
import Banner from "../Banner";
|
|
4
4
|
|
|
5
5
|
describe("Banner", () => {
|
|
@@ -97,4 +97,36 @@ describe("Banner", () => {
|
|
|
97
97
|
expect(screen.getByText("Warning: Banner Text")).toBeInTheDocument();
|
|
98
98
|
expect(screen.getByRole("img", { hidden: true })).toBeInTheDocument();
|
|
99
99
|
});
|
|
100
|
+
|
|
101
|
+
describe("variant ghost", () => {
|
|
102
|
+
it("should set the correct background color", () => {
|
|
103
|
+
render(<Banner text="Warning: Banner Text" variant="ghost" />);
|
|
104
|
+
|
|
105
|
+
expect(
|
|
106
|
+
screen.getByDataQaLabel({ "alert-text": "Warning: Banner Text" })
|
|
107
|
+
).toHaveStyleRule(
|
|
108
|
+
"background-color",
|
|
109
|
+
theme.colors.container.background.base
|
|
110
|
+
);
|
|
111
|
+
});
|
|
112
|
+
|
|
113
|
+
it("should set the correct border color", () => {
|
|
114
|
+
render(<Banner text="Warning: Banner Text" variant="ghost" />);
|
|
115
|
+
|
|
116
|
+
expect(
|
|
117
|
+
screen.getByDataQaLabel({ "alert-text": "Warning: Banner Text" })
|
|
118
|
+
).toHaveStyleRule(
|
|
119
|
+
"border",
|
|
120
|
+
`1px solid ${theme.colors.container.border.base}`
|
|
121
|
+
);
|
|
122
|
+
});
|
|
123
|
+
|
|
124
|
+
it("should set the correct icon color", () => {
|
|
125
|
+
render(<Banner text="Warning: Banner Text" variant="ghost" />);
|
|
126
|
+
|
|
127
|
+
expect(
|
|
128
|
+
screen.getByDataQaLabel({ icon: "circle-i-outline" })
|
|
129
|
+
).toHaveStyleRule("color", theme.colors.container.border.decorative.blue);
|
|
130
|
+
});
|
|
131
|
+
});
|
|
100
132
|
});
|
package/src/styles.ts
CHANGED
|
@@ -1,13 +1,18 @@
|
|
|
1
1
|
import styled, { css } from "styled-components";
|
|
2
|
-
import {
|
|
2
|
+
import {
|
|
3
|
+
COMMON,
|
|
4
|
+
LAYOUT,
|
|
5
|
+
FLEXBOX,
|
|
6
|
+
} from "@sproutsocial/seeds-react-system-props";
|
|
3
7
|
import Icon from "@sproutsocial/seeds-react-icon";
|
|
4
|
-
import {
|
|
8
|
+
import type { EnumBannerType, EnumBannerVariant } from "./BannerTypes";
|
|
5
9
|
|
|
6
|
-
type
|
|
10
|
+
type TypeContainerProps = {
|
|
7
11
|
type: EnumBannerType;
|
|
12
|
+
variant: EnumBannerVariant;
|
|
8
13
|
};
|
|
9
14
|
|
|
10
|
-
const Container = styled.div<
|
|
15
|
+
const Container = styled.div<TypeContainerProps>(
|
|
11
16
|
(props) => css`
|
|
12
17
|
display: flex;
|
|
13
18
|
overflow: hidden;
|
|
@@ -18,8 +23,13 @@ const Container = styled.div<TypeProps>(
|
|
|
18
23
|
font-family: ${props.theme.fontFamily};
|
|
19
24
|
${props.theme.typography[200]}
|
|
20
25
|
padding: ${props.theme.space[300]};
|
|
21
|
-
border: 1px solid
|
|
22
|
-
|
|
26
|
+
border: 1px solid
|
|
27
|
+
${props.variant === "ghost"
|
|
28
|
+
? props.theme.colors.container.border.base
|
|
29
|
+
: props.theme.colors.container.border[props.type]};
|
|
30
|
+
background-color: ${props.variant === "ghost"
|
|
31
|
+
? props.theme.colors.container.background.base
|
|
32
|
+
: props.theme.colors.container.background[props.type]};
|
|
23
33
|
|
|
24
34
|
a,
|
|
25
35
|
button {
|
|
@@ -38,6 +48,7 @@ const Container = styled.div<TypeProps>(
|
|
|
38
48
|
|
|
39
49
|
${COMMON}
|
|
40
50
|
${LAYOUT}
|
|
51
|
+
${FLEXBOX}
|
|
41
52
|
`
|
|
42
53
|
);
|
|
43
54
|
|