@sproutsocial/seeds-react-banner 1.0.1 → 1.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/.turbo/turbo-build.log +10 -10
  2. package/CHANGELOG.md +6 -0
  3. package/dist/esm/index.js +16 -14
  4. package/dist/esm/index.js.map +1 -1
  5. package/dist/index.d.mts +5 -2
  6. package/dist/index.d.ts +5 -2
  7. package/dist/index.js +17 -15
  8. package/dist/index.js.map +1 -1
  9. package/package.json +1 -1
  10. package/src/Banner.stories.tsx +11 -0
  11. package/src/Banner.tsx +24 -8
  12. package/src/BannerTypes.ts +4 -0
  13. package/src/__tests__/Banner.typetest.tsx +4 -0
  14. package/src/__tests__/features.test.tsx +33 -1
  15. package/src/styles.ts +11 -5
package/.turbo/turbo-build.log CHANGED
@@ -8,14 +8,14 @@ CLI Target: es2022
8
8
  CLI Cleaning output folder
9
9
  CJS Build start
10
10
  ESM Build start
11
- CJS dist/index.js 5.47 KB
12
- CJS dist/index.js.map 6.58 KB
13
- CJS ⚡️ Build success in 180ms
14
- ESM dist/esm/index.js 3.29 KB
15
- ESM dist/esm/index.js.map 6.44 KB
16
- ESM ⚡️ Build success in 180ms
11
+ CJS dist/index.js 5.97 KB
12
+ CJS dist/index.js.map 7.67 KB
13
+ CJS ⚡️ Build success in 108ms
14
+ ESM dist/esm/index.js 3.79 KB
15
+ ESM dist/esm/index.js.map 7.53 KB
16
+ ESM ⚡️ Build success in 112ms
17
17
  DTS Build start
18
- DTS ⚡️ Build success in 39730ms
19
- DTS dist/index.d.ts 1.17 KB
20
- DTS dist/index.d.mts 1.17 KB
21
- Done in 48.38s.
18
+ DTS ⚡️ Build success in 38628ms
19
+ DTS dist/index.d.ts 1.31 KB
20
+ DTS dist/index.d.mts 1.31 KB
21
+ Done in 46.59s.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # @sproutsocial/seeds-react-banner
2
2
 
3
+ ## 1.0.2
4
+
5
+ ### Patch Changes
6
+
7
+ - e2de2b6: New Banner variant prop, which changes the background color, border, and icon color of the Banner component
8
+
3
9
  ## 1.0.1
4
10
 
5
11
  ### Patch Changes
package/dist/esm/index.js CHANGED
@@ -8,11 +8,6 @@ import Icon2 from "@sproutsocial/seeds-react-icon";
8
8
  import styled, { css } from "styled-components";
9
9
  import { COMMON, LAYOUT } from "@sproutsocial/seeds-react-system-props";
10
10
  import Icon from "@sproutsocial/seeds-react-icon";
11
-
12
- // src/BannerTypes.ts
13
- import "react";
14
-
15
- // src/styles.ts
16
11
  var Container = styled.div(
17
12
  (props) => css`
18
13
  display: flex;
@@ -24,8 +19,9 @@ var Container = styled.div(
24
19
  font-family: ${props.theme.fontFamily};
25
20
  ${props.theme.typography[200]}
26
21
  padding: ${props.theme.space[300]};
27
- border: 1px solid ${props.theme.colors.container.border[props.type]};
28
- background-color: ${props.theme.colors.container.background[props.type]};
22
+ border: 1px solid
23
+ ${props.variant === "ghost" ? props.theme.colors.container.border.base : props.theme.colors.container.border[props.type]};
24
+ background-color: ${props.variant === "ghost" ? props.theme.colors.container.background.base : props.theme.colors.container.background[props.type]};
29
25
 
30
26
  a,
31
27
  button {
@@ -69,23 +65,25 @@ var getBannerIconName = (type) => {
69
65
  return "circle-i-outline";
70
66
  }
71
67
  };
72
- var getBannerIconColor = (type) => {
68
+ var getBannerIconColor = (type, variant) => {
69
+ const isGhostVariant = variant === "ghost";
73
70
  switch (type) {
74
71
  case "success":
75
- return "icon.success";
72
+ return isGhostVariant ? "container.border.decorative.green" : "icon.success";
76
73
  case "error":
77
- return "icon.error";
74
+ return isGhostVariant ? "container.border.decorative.red" : "icon.error";
78
75
  case "warning":
79
- return "icon.warning";
76
+ return isGhostVariant ? "container.border.decorative.yellow" : "icon.warning";
80
77
  case "opportunity":
81
- return "icon.opportunity";
78
+ return isGhostVariant ? "container.border.decorative.purple" : "icon.opportunity";
82
79
  case "info":
83
80
  default:
84
- return "icon.info";
81
+ return isGhostVariant ? "container.border.decorative.blue" : "icon.info";
85
82
  }
86
83
  };
87
84
  var Banner = ({
88
85
  type = "info",
86
+ variant = "default",
89
87
  text,
90
88
  onClose,
91
89
  closeButtonLabel = "Close",
@@ -96,6 +94,7 @@ var Banner = ({
96
94
  styles_default,
97
95
  {
98
96
  type,
97
+ variant,
99
98
  "data-qa-alert": "",
100
99
  "data-qa-alert-type": type,
101
100
  "data-qa-alert-text": text,
@@ -105,7 +104,7 @@ var Banner = ({
105
104
  StyledBannerIcon,
106
105
  {
107
106
  name: getBannerIconName(type),
108
- color: getBannerIconColor(type),
107
+ color: getBannerIconColor(type, variant),
109
108
  className: "Icon",
110
109
  fixedWidth: true,
111
110
  mt: 100,
@@ -121,6 +120,9 @@ var Banner = ({
121
120
  };
122
121
  var Banner_default = Banner;
123
122
 
123
+ // src/BannerTypes.ts
124
+ import "react";
125
+
124
126
  // src/index.ts
125
127
  var index_default = Banner_default;
126
128
  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 { TypeBannerProps, EnumBannerType } 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 = (type: EnumBannerType) => {\n switch (type) {\n case \"success\":\n return \"icon.success\";\n case \"error\":\n return \"icon.error\";\n case \"warning\":\n return \"icon.warning\";\n case \"opportunity\":\n return \"icon.opportunity\";\n case \"info\":\n default:\n return \"icon.info\";\n }\n};\n\n/** TODO: change to 'info' type by default in future version */\nconst Banner = ({\n type = \"info\",\n text,\n onClose,\n closeButtonLabel = \"Close\",\n typeIconProps,\n ...rest\n}: TypeBannerProps) => {\n return (\n <Container\n type={type}\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)}\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 { COMMON, LAYOUT } from \"@sproutsocial/seeds-react-system-props\";\nimport Icon from \"@sproutsocial/seeds-react-icon\";\nimport { type EnumBannerType } from \"./BannerTypes\";\n\ntype TypeProps = {\n type: EnumBannerType;\n};\n\nconst Container = styled.div<TypeProps>(\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 ${props.theme.colors.container.border[props.type]};\n background-color: ${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 `\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} 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 interface TypeBannerProps\n extends Omit<React.ComponentPropsWithoutRef<\"div\">, \"color\">,\n TypeSystemCommonProps,\n TypeSystemLayoutProps,\n TypeStyledComponentsCommonProps {\n text: React.ReactNode;\n /** Type of banner. */\n type?: EnumBannerType;\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":";AAAA,OAAuB;AACvB,OAAO,SAAS;AAChB,OAAO,YAAY;AACnB,OAAOA,WAAU;;;ACHjB,OAAO,UAAU,WAAW;AAC5B,SAAS,QAAQ,cAAc;AAC/B,OAAO,UAAU;;;ACFjB,OAAuB;;;ADSvB,IAAM,YAAY,OAAO;AAAA,EACvB,CAAC,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,aAKA,MAAM,MAAM,OAAO,KAAK,IAAI;AAAA,qBACpB,MAAM,MAAM,MAAM,KAAK;AAAA,mBACzB,MAAM,MAAM,UAAU;AAAA,MACnC,MAAM,MAAM,WAAW,GAAG,CAAC;AAAA,eAClB,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA,wBACb,MAAM,MAAM,OAAO,UAAU,OAAO,MAAM,IAAI,CAAC;AAAA,wBAC/C,MAAM,MAAM,OAAO,UAAU,WAAW,MAAM,IAAI,CAAC;AAAA;AAAA;AAAA;AAAA,qBAItD,MAAM,MAAM,YAAY,QAAQ;AAAA,eACtC,MAAM,MAAM,OAAO,KAAK,IAAI;AAAA;AAAA;AAAA,iBAG1B,MAAM,MAAM,OAAO,KAAK,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MASvC,MAAM;AAAA,MACN,MAAM;AAAA;AAEZ;AAEA,IAAO,iBAAQ;AAER,IAAM,mBAAmB,OAAO,IAAI;AAAA;AAAA;AAAA;;;ADWrC,SACE,KADF;AAjDN,IAAM,oBAAoB,CAAC,SAAyB;AAClD,UAAQ,MAAM;AAAA,IACZ,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AAAA,IACL;AACE,aAAO;AAAA,EACX;AACF;AAEA,IAAM,qBAAqB,CAAC,SAAyB;AACnD,UAAQ,MAAM;AAAA,IACZ,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AAAA,IACL;AACE,aAAO;AAAA,EACX;AACF;AAGA,IAAM,SAAS,CAAC;AAAA,EACd,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA,mBAAmB;AAAA,EACnB;AAAA,EACA,GAAG;AACL,MAAuB;AACrB,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,iBAAc;AAAA,MACd,sBAAoB;AAAA,MACpB,sBAAoB;AAAA,MACnB,GAAG;AAAA,MAEJ,+BAAC,OAAI,SAAQ,QAAO,YAAW,UAAS,OAAO,GAC7C;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,MAAM,kBAAkB,IAAI;AAAA,YAC5B,OAAO,mBAAmB,IAAI;AAAA,YAC9B,WAAU;AAAA,YACV,YAAU;AAAA,YACV,IAAI;AAAA,YACJ,IAAI;AAAA,YACH,GAAG;AAAA;AAAA,QACN;AAAA,QACC;AAAA,QACA,WACC,oBAAC,OAAI,IAAG,QAAO,IAAI,KAAK,WAAU,cAChC,8BAAC,UAAO,GAAG,GAAG,SAAS,SAAS,WAAW,kBACzC,8BAACC,OAAA,EAAK,MAAK,aAAY,eAAW,MAAC,GACrC,GACF;AAAA,SAEJ;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,iBAAQ;;;AG7Ef,IAAO,gBAAQ;","names":["Icon","Icon"]}
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 { COMMON, LAYOUT } 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 `\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} 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 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
@@ -4,10 +4,13 @@ import { TypeSystemCommonProps, TypeSystemLayoutProps, TypeStyledComponentsCommo
4
4
  import { TypeIconProps } from '@sproutsocial/seeds-react-icon';
5
5
 
6
6
  type EnumBannerType = "success" | "info" | "error" | "warning" | "opportunity";
7
+ type EnumBannerVariant = "default" | "ghost";
7
8
  interface TypeBannerProps extends Omit<React.ComponentPropsWithoutRef<"div">, "color">, TypeSystemCommonProps, TypeSystemLayoutProps, 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
@@ -4,10 +4,13 @@ import { TypeSystemCommonProps, TypeSystemLayoutProps, TypeStyledComponentsCommo
4
4
  import { TypeIconProps } from '@sproutsocial/seeds-react-icon';
5
5
 
6
6
  type EnumBannerType = "success" | "info" | "error" | "warning" | "opportunity";
7
+ type EnumBannerVariant = "default" | "ghost";
7
8
  interface TypeBannerProps extends Omit<React.ComponentPropsWithoutRef<"div">, "color">, TypeSystemCommonProps, TypeSystemLayoutProps, 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 React2 = require("react");
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 ${props.theme.colors.container.border[props.type]};
65
- background-color: ${props.theme.colors.container.background[props.type]};
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 {
@@ -106,23 +102,25 @@ var getBannerIconName = (type) => {
106
102
  return "circle-i-outline";
107
103
  }
108
104
  };
109
- var getBannerIconColor = (type) => {
105
+ var getBannerIconColor = (type, variant) => {
106
+ const isGhostVariant = variant === "ghost";
110
107
  switch (type) {
111
108
  case "success":
112
- return "icon.success";
109
+ return isGhostVariant ? "container.border.decorative.green" : "icon.success";
113
110
  case "error":
114
- return "icon.error";
111
+ return isGhostVariant ? "container.border.decorative.red" : "icon.error";
115
112
  case "warning":
116
- return "icon.warning";
113
+ return isGhostVariant ? "container.border.decorative.yellow" : "icon.warning";
117
114
  case "opportunity":
118
- return "icon.opportunity";
115
+ return isGhostVariant ? "container.border.decorative.purple" : "icon.opportunity";
119
116
  case "info":
120
117
  default:
121
- return "icon.info";
118
+ return isGhostVariant ? "container.border.decorative.blue" : "icon.info";
122
119
  }
123
120
  };
124
121
  var Banner = ({
125
122
  type = "info",
123
+ variant = "default",
126
124
  text,
127
125
  onClose,
128
126
  closeButtonLabel = "Close",
@@ -133,6 +131,7 @@ var Banner = ({
133
131
  styles_default,
134
132
  {
135
133
  type,
134
+ variant,
136
135
  "data-qa-alert": "",
137
136
  "data-qa-alert-type": type,
138
137
  "data-qa-alert-text": text,
@@ -142,7 +141,7 @@ var Banner = ({
142
141
  StyledBannerIcon,
143
142
  {
144
143
  name: getBannerIconName(type),
145
- color: getBannerIconColor(type),
144
+ color: getBannerIconColor(type, variant),
146
145
  className: "Icon",
147
146
  fixedWidth: true,
148
147
  mt: 100,
@@ -158,6 +157,9 @@ var Banner = ({
158
157
  };
159
158
  var Banner_default = Banner;
160
159
 
160
+ // src/BannerTypes.ts
161
+ var React2 = require("react");
162
+
161
163
  // src/index.ts
162
164
  var index_default = Banner_default;
163
165
  // 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 { TypeBannerProps, EnumBannerType } 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 = (type: EnumBannerType) => {\n switch (type) {\n case \"success\":\n return \"icon.success\";\n case \"error\":\n return \"icon.error\";\n case \"warning\":\n return \"icon.warning\";\n case \"opportunity\":\n return \"icon.opportunity\";\n case \"info\":\n default:\n return \"icon.info\";\n }\n};\n\n/** TODO: change to 'info' type by default in future version */\nconst Banner = ({\n type = \"info\",\n text,\n onClose,\n closeButtonLabel = \"Close\",\n typeIconProps,\n ...rest\n}: TypeBannerProps) => {\n return (\n <Container\n type={type}\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)}\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 { COMMON, LAYOUT } from \"@sproutsocial/seeds-react-system-props\";\nimport Icon from \"@sproutsocial/seeds-react-icon\";\nimport { type EnumBannerType } from \"./BannerTypes\";\n\ntype TypeProps = {\n type: EnumBannerType;\n};\n\nconst Container = styled.div<TypeProps>(\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 ${props.theme.colors.container.border[props.type]};\n background-color: ${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 `\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} 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 interface TypeBannerProps\n extends Omit<React.ComponentPropsWithoutRef<\"div\">, \"color\">,\n TypeSystemCommonProps,\n TypeSystemLayoutProps,\n TypeStyledComponentsCommonProps {\n text: React.ReactNode;\n /** Type of banner. */\n type?: EnumBannerType;\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,IAAAA,SAAuB;AACvB,6BAAgB;AAChB,gCAAmB;AACnB,IAAAC,2BAAiB;;;ACHjB,+BAA4B;AAC5B,sCAA+B;AAC/B,8BAAiB;;;ACFjB,YAAuB;;;ADSvB,IAAM,YAAY,yBAAAC,QAAO;AAAA,EACvB,CAAC,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,aAKA,MAAM,MAAM,OAAO,KAAK,IAAI;AAAA,qBACpB,MAAM,MAAM,MAAM,KAAK;AAAA,mBACzB,MAAM,MAAM,UAAU;AAAA,MACnC,MAAM,MAAM,WAAW,GAAG,CAAC;AAAA,eAClB,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA,wBACb,MAAM,MAAM,OAAO,UAAU,OAAO,MAAM,IAAI,CAAC;AAAA,wBAC/C,MAAM,MAAM,OAAO,UAAU,WAAW,MAAM,IAAI,CAAC;AAAA;AAAA;AAAA;AAAA,qBAItD,MAAM,MAAM,YAAY,QAAQ;AAAA,eACtC,MAAM,MAAM,OAAO,KAAK,IAAI;AAAA;AAAA;AAAA,iBAG1B,MAAM,MAAM,OAAO,KAAK,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MASvC,sCAAM;AAAA,MACN,sCAAM;AAAA;AAEZ;AAEA,IAAO,iBAAQ;AAER,IAAM,uBAAmB,yBAAAA,SAAO,wBAAAC,OAAI;AAAA;AAAA;AAAA;;;ADWrC;AAjDN,IAAM,oBAAoB,CAAC,SAAyB;AAClD,UAAQ,MAAM;AAAA,IACZ,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AAAA,IACL;AACE,aAAO;AAAA,EACX;AACF;AAEA,IAAM,qBAAqB,CAAC,SAAyB;AACnD,UAAQ,MAAM;AAAA,IACZ,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AAAA,IACL;AACE,aAAO;AAAA,EACX;AACF;AAGA,IAAM,SAAS,CAAC;AAAA,EACd,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA,mBAAmB;AAAA,EACnB;AAAA,EACA,GAAG;AACL,MAAuB;AACrB,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,iBAAc;AAAA,MACd,sBAAoB;AAAA,MACpB,sBAAoB;AAAA,MACnB,GAAG;AAAA,MAEJ,uDAAC,uBAAAC,SAAA,EAAI,SAAQ,QAAO,YAAW,UAAS,OAAO,GAC7C;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,MAAM,kBAAkB,IAAI;AAAA,YAC5B,OAAO,mBAAmB,IAAI;AAAA,YAC9B,WAAU;AAAA,YACV,YAAU;AAAA,YACV,IAAI;AAAA,YACJ,IAAI;AAAA,YACH,GAAG;AAAA;AAAA,QACN;AAAA,QACC;AAAA,QACA,WACC,4CAAC,uBAAAA,SAAA,EAAI,IAAG,QAAO,IAAI,KAAK,WAAU,cAChC,sDAAC,0BAAAC,SAAA,EAAO,GAAG,GAAG,SAAS,SAAS,WAAW,kBACzC,sDAAC,yBAAAC,SAAA,EAAK,MAAK,aAAY,eAAW,MAAC,GACrC,GACF;AAAA,SAEJ;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,iBAAQ;;;AD7Ef,IAAO,gBAAQ;","names":["React","import_seeds_react_icon","styled","Icon","Box","Button","Icon"]}
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 { COMMON, LAYOUT } 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 `\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} 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 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.1",
3
+ "version": "1.0.2",
4
4
  "description": "Seeds React Banner",
5
5
  "author": "Sprout Social, Inc.",
6
6
  "license": "MIT",
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 { TypeBannerProps, EnumBannerType } from "./BannerTypes";
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 = (type: EnumBannerType) => {
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 "icon.success";
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 "icon.warning";
41
+ return isGhostVariant
42
+ ? "container.border.decorative.yellow"
43
+ : "icon.warning";
32
44
  case "opportunity":
33
- return "icon.opportunity";
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
@@ -13,6 +13,8 @@ export type EnumBannerType =
13
13
  | "warning"
14
14
  | "opportunity";
15
15
 
16
+ export type EnumBannerVariant = "default" | "ghost";
17
+
16
18
  export interface TypeBannerProps
17
19
  extends Omit<React.ComponentPropsWithoutRef<"div">, "color">,
18
20
  TypeSystemCommonProps,
@@ -21,6 +23,8 @@ export interface TypeBannerProps
21
23
  text: React.ReactNode;
22
24
  /** Type of banner. */
23
25
  type?: EnumBannerType;
26
+ /** Variant of banner. */
27
+ variant?: EnumBannerVariant;
24
28
  /** Show the close icon in the banner with an action when clicked */
25
29
  onClose?: () => void;
26
30
  /** Close icon aria label */
package/src/__tests__/Banner.typetest.tsx CHANGED
@@ -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
package/src/__tests__/features.test.tsx CHANGED
@@ -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,14 @@
1
1
  import styled, { css } from "styled-components";
2
2
  import { COMMON, LAYOUT } from "@sproutsocial/seeds-react-system-props";
3
3
  import Icon from "@sproutsocial/seeds-react-icon";
4
- import { type EnumBannerType } from "./BannerTypes";
4
+ import type { EnumBannerType, EnumBannerVariant } from "./BannerTypes";
5
5
 
6
- type TypeProps = {
6
+ type TypeContainerProps = {
7
7
  type: EnumBannerType;
8
+ variant: EnumBannerVariant;
8
9
  };
9
10
 
10
- const Container = styled.div<TypeProps>(
11
+ const Container = styled.div<TypeContainerProps>(
11
12
  (props) => css`
12
13
  display: flex;
13
14
  overflow: hidden;
@@ -18,8 +19,13 @@ const Container = styled.div<TypeProps>(
18
19
  font-family: ${props.theme.fontFamily};
19
20
  ${props.theme.typography[200]}
20
21
  padding: ${props.theme.space[300]};
21
- border: 1px solid ${props.theme.colors.container.border[props.type]};
22
- background-color: ${props.theme.colors.container.background[props.type]};
22
+ border: 1px solid
23
+ ${props.variant === "ghost"
24
+ ? props.theme.colors.container.border.base
25
+ : props.theme.colors.container.border[props.type]};
26
+ background-color: ${props.variant === "ghost"
27
+ ? props.theme.colors.container.background.base
28
+ : props.theme.colors.container.background[props.type]};
23
29
 
24
30
  a,
25
31
  button {