@sproutsocial/seeds-react-banner 1.0.0 → 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 (16) hide show
  1. package/.turbo/turbo-build.log +10 -10
  2. package/CHANGELOG.md +18 -0
  3. package/dist/esm/index.js +18 -16
  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 +22 -20
  8. package/dist/index.js.map +1 -1
  9. package/package.json +8 -8
  10. package/src/Banner.stories.tsx +159 -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
  16. package/src/index.stories.tsx +0 -140
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.46 KB
12
- CJS dist/index.js.map 6.58 KB
13
- CJS ⚡️ Build success in 64ms
14
- ESM dist/esm/index.js 3.29 KB
15
- ESM dist/esm/index.js.map 6.44 KB
16
- ESM ⚡️ Build success in 64ms
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 15624ms
19
- DTS dist/index.d.ts 1.17 KB
20
- DTS dist/index.d.mts 1.17 KB
21
- Done in 18.84s.
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,23 @@
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
+
9
+ ## 1.0.1
10
+
11
+ ### Patch Changes
12
+
13
+ - 9fd8bac: Update dependencies to use semantic package version instead of wildcards
14
+ - Updated dependencies [9fd8bac]
15
+ - @sproutsocial/seeds-react-system-props@3.0.2
16
+ - @sproutsocial/seeds-react-button@1.2.1
17
+ - @sproutsocial/seeds-react-theme@2.2.1
18
+ - @sproutsocial/seeds-react-icon@1.1.2
19
+ - @sproutsocial/seeds-react-box@1.1.2
20
+
3
21
  ## 1.0.0
4
22
 
5
23
  ### Major 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,10 +120,13 @@ 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
- var src_default = Banner_default;
127
+ var index_default = Banner_default;
126
128
  export {
127
129
  Banner_default as Banner,
128
- src_default as default
130
+ index_default as default
129
131
  };
130
132
  //# sourceMappingURL=index.js.map
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,cAAQ;","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
@@ -28,15 +28,15 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
28
28
  var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
29
29
 
30
30
  // src/index.ts
31
- var src_exports = {};
32
- __export(src_exports, {
31
+ var index_exports = {};
32
+ __export(index_exports, {
33
33
  Banner: () => Banner_default,
34
- default: () => src_default
34
+ default: () => index_default
35
35
  });
36
- module.exports = __toCommonJS(src_exports);
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,8 +157,11 @@ 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
- var src_default = Banner_default;
164
+ var index_default = Banner_default;
163
165
  // Annotate the CommonJS export names for ESM import in node:
164
166
  0 && (module.exports = {
165
167
  Banner
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,cAAQ;","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.0",
3
+ "version": "1.0.2",
4
4
  "description": "Seeds React Banner",
5
5
  "author": "Sprout Social, Inc.",
6
6
  "license": "MIT",
@@ -18,11 +18,11 @@
18
18
  "test:watch": "jest --watch --coverage=false"
19
19
  },
20
20
  "dependencies": {
21
- "@sproutsocial/seeds-react-theme": "^*",
22
- "@sproutsocial/seeds-react-system-props": "^*",
23
- "@sproutsocial/seeds-react-box": "*",
24
- "@sproutsocial/seeds-react-button": "*",
25
- "@sproutsocial/seeds-react-icon": "*"
21
+ "@sproutsocial/seeds-react-theme": "^2.2.0",
22
+ "@sproutsocial/seeds-react-system-props": "^3.0.1",
23
+ "@sproutsocial/seeds-react-box": "^1.1.1",
24
+ "@sproutsocial/seeds-react-button": "^1.2.0",
25
+ "@sproutsocial/seeds-react-icon": "^1.1.1"
26
26
  },
27
27
  "devDependencies": {
28
28
  "@types/react": "^18.0.0",
@@ -35,8 +35,8 @@
35
35
  "@sproutsocial/seeds-tsconfig": "*",
36
36
  "@sproutsocial/seeds-testing": "*",
37
37
  "@sproutsocial/seeds-react-testing-library": "*",
38
- "@sproutsocial/seeds-react-text": "*",
39
- "@sproutsocial/seeds-react-link": "*"
38
+ "@sproutsocial/seeds-react-text": "^1.3.0",
39
+ "@sproutsocial/seeds-react-link": "^1.0.0"
40
40
  },
41
41
  "peerDependencies": {
42
42
  "styled-components": "^5.2.3"
package/src/Banner.stories.tsx ADDED
@@ -0,0 +1,159 @@
1
+ import React from "react";
2
+ import { Banner, type TypeBannerProps } from "./";
3
+ import { Box } from "@sproutsocial/seeds-react-box";
4
+ import { Link } from "@sproutsocial/seeds-react-link";
5
+ import { Text } from "@sproutsocial/seeds-react-text";
6
+ import type { Meta, StoryObj } from "@storybook/react";
7
+
8
+ const meta: Meta<typeof Banner> = {
9
+ title: "Components/Banner",
10
+ component: Banner,
11
+ argTypes: {
12
+ type: {
13
+ options: ["success", "info", "error", "warning", "opportunity"],
14
+ control: { type: "select" },
15
+ },
16
+ variant: {
17
+ options: ["default", "ghost"],
18
+ control: { type: "select" },
19
+ },
20
+ },
21
+ args: {
22
+ type: "success",
23
+ variant: "default",
24
+ typeIconProps: { "aria-label": "Success" },
25
+ text: "This is a success message!",
26
+ },
27
+ };
28
+
29
+ export default meta;
30
+
31
+ type Story = StoryObj<typeof Banner>;
32
+
33
+ const findText = (bannerType: TypeBannerProps["type"]) => {
34
+ switch (bannerType) {
35
+ case "warning":
36
+ return "This is a warning message!";
37
+ case "opportunity":
38
+ return "This is an opportunity message!";
39
+ case "error":
40
+ return "This is an error message!";
41
+ case "info":
42
+ return "This is an informative message!";
43
+ case "success":
44
+ default:
45
+ return "This is a success message!";
46
+ }
47
+ };
48
+
49
+ export const Permutations: Story = {
50
+ render: (args) => (
51
+ <Banner
52
+ text={findText(args.type)}
53
+ type={args.type}
54
+ variant={args.variant}
55
+ typeIconProps={{ "aria-label": args.type }}
56
+ />
57
+ ),
58
+ name: "Permutations",
59
+ };
60
+
61
+ export const Links: Story = {
62
+ render: (args) => (
63
+ <Banner
64
+ type={args.type}
65
+ variant={args.variant}
66
+ typeIconProps={args.typeIconProps}
67
+ text={
68
+ <Box
69
+ width={1}
70
+ display="flex"
71
+ alignItems="center"
72
+ justifyContent="space-between"
73
+ >
74
+ <Text>{findText(args.type)}</Text>
75
+ <Text>
76
+ <Link href="/">Learn more</Link>
77
+ </Text>
78
+ </Box>
79
+ }
80
+ />
81
+ ),
82
+ name: "With link",
83
+ };
84
+
85
+ export const Buttons: Story = {
86
+ render: (args) => (
87
+ <Banner
88
+ type={args.type}
89
+ variant={args.variant}
90
+ typeIconProps={args.typeIconProps}
91
+ text={
92
+ <Box
93
+ width={1}
94
+ display="flex"
95
+ alignItems="center"
96
+ justifyContent="space-between"
97
+ >
98
+ <Text>{findText(args.type)}</Text>
99
+ <Text>
100
+ <Link onClick={() => alert("Clicked")}>Learn more</Link>
101
+ </Text>
102
+ </Box>
103
+ }
104
+ />
105
+ ),
106
+ name: "With button",
107
+ };
108
+
109
+ export const Multiline: Story = {
110
+ args: {
111
+ text: "A very long opportunity message that is going to stretch to multiple lines, while the icon stays aligned with the first line.",
112
+ },
113
+ render: (args) => (
114
+ <Box width="416px">
115
+ <Banner
116
+ text={args.text}
117
+ type={args.type}
118
+ variant={args.variant}
119
+ typeIconProps={args.typeIconProps}
120
+ />
121
+ </Box>
122
+ ),
123
+ name: "With multiline text",
124
+ };
125
+
126
+ export const Closeable: Story = {
127
+ args: {
128
+ text: "This is a banner that has a closeable x icon with an onClose callback.",
129
+ },
130
+ render: (args) => (
131
+ <Banner
132
+ text={args.text}
133
+ type={args.type}
134
+ variant={args.variant}
135
+ typeIconProps={args.typeIconProps}
136
+ onClose={() => alert("Testing...")}
137
+ closeButtonLabel="Close the banner"
138
+ />
139
+ ),
140
+ name: "With OnClose callback",
141
+ };
142
+
143
+ export const HiddenIcon: Story = {
144
+ args: {
145
+ text: "Success! This is a banner that hides the icon from screen readers!",
146
+ typeIconProps: { "aria-hidden": true },
147
+ },
148
+ render: (args) => (
149
+ <Banner
150
+ text={args.text}
151
+ type={args.type}
152
+ variant={args.variant}
153
+ typeIconProps={args.typeIconProps}
154
+ onClose={() => alert("Testing...")}
155
+ closeButtonLabel="Close the banner"
156
+ />
157
+ ),
158
+ name: "With aria-hidden Icon",
159
+ };
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 {
package/src/index.stories.tsx DELETED
@@ -1,140 +0,0 @@
1
- import React from "react";
2
- import { Banner, type TypeBannerProps, type EnumBannerType } from "./";
3
- import { Box } from "@sproutsocial/seeds-react-box";
4
- import { Link } from "@sproutsocial/seeds-react-link";
5
- import { Text } from "@sproutsocial/seeds-react-text";
6
-
7
- export default {
8
- title: "Components/Banner",
9
- component: Banner,
10
- argTypes: {
11
- type: {
12
- options: ["success", "info", "error", "warning", "opportunity"],
13
- control: { type: "select" },
14
- },
15
- },
16
- args: {
17
- type: "success",
18
- typeIconProps: { "aria-label": "Success" },
19
- text: "This is a success message!",
20
- },
21
- };
22
-
23
- const findText = (bannerType: TypeBannerProps["type"]) => {
24
- switch (bannerType) {
25
- case "warning":
26
- return "This is a warning message!";
27
- case "opportunity":
28
- return "This is an opportunity message!";
29
- case "error":
30
- return "This is an error message!";
31
- case "info":
32
- return "This is an informative message!";
33
- case "success":
34
- default:
35
- return "This is a success message!";
36
- }
37
- };
38
-
39
- export const permutations = (args: TypeBannerProps) => (
40
- <Banner
41
- text={findText(args.type)}
42
- type={args.type}
43
- typeIconProps={{ "aria-label": args.type }}
44
- />
45
- );
46
-
47
- permutations.storyName = "Permutations";
48
-
49
- export const links = (args: TypeBannerProps) => (
50
- <Banner
51
- type={args.type}
52
- typeIconProps={args.typeIconProps}
53
- text={
54
- <Box
55
- width={1}
56
- display="flex"
57
- alignItems="center"
58
- justifyContent="space-between"
59
- >
60
- <Text>{findText(args.type)}</Text>
61
- <Text>
62
- <Link href="/">Learn more</Link>
63
- </Text>
64
- </Box>
65
- }
66
- />
67
- );
68
-
69
- links.storyName = "With link";
70
-
71
- export const buttons = (args: TypeBannerProps) => (
72
- <Banner
73
- type={args.type}
74
- typeIconProps={args.typeIconProps}
75
- text={
76
- <Box
77
- width={1}
78
- display="flex"
79
- alignItems="center"
80
- justifyContent="space-between"
81
- >
82
- <Text>{findText(args.type)}</Text>
83
- <Text>
84
- <Link onClick={() => alert("Clicked")}>Learn more</Link>
85
- </Text>
86
- </Box>
87
- }
88
- />
89
- );
90
-
91
- buttons.storyName = "With button";
92
-
93
- export const multiline = (args: TypeBannerProps) => (
94
- <Box width="416px">
95
- <Banner
96
- text={args.text}
97
- type={args.type}
98
- typeIconProps={args.typeIconProps}
99
- />
100
- </Box>
101
- );
102
-
103
- multiline.args = {
104
- text: "A very long opportunity message that is going to stretch to multiple lines, while the icon stays aligned with the first line.",
105
- };
106
-
107
- multiline.storyName = "With multiline text";
108
-
109
- export const closeable = (args: TypeBannerProps) => (
110
- <Banner
111
- text={args.text}
112
- type={args.type}
113
- typeIconProps={args.typeIconProps}
114
- onClose={() => alert("Testing...")}
115
- closeButtonLabel="Close the banner"
116
- />
117
- );
118
-
119
- closeable.args = {
120
- text: "This is a banner that has a closeable x icon with an onClose callback.",
121
- };
122
-
123
- closeable.storyName = "With OnClose callback";
124
-
125
- export const hiddenIcon = (args: TypeBannerProps) => (
126
- <Banner
127
- text={args.text}
128
- type={args.type}
129
- typeIconProps={args.typeIconProps}
130
- onClose={() => alert("Testing...")}
131
- closeButtonLabel="Close the banner"
132
- />
133
- );
134
-
135
- hiddenIcon.args = {
136
- text: "Success! This is a banner that hides the icon from screen readers!",
137
- typeIconProps: { "aria-hidden": true },
138
- };
139
-
140
- hiddenIcon.storyName = "With aria-hidden Icon";