@sproutsocial/seeds-react-banner 1.0.0 → 1.0.1

package/.turbo/turbo-build.log

@@ -8,14 +8,14 @@ CLI Target: es2022
 CLI Cleaning output folder
 CJS Build start
 ESM Build start
-CJS dist/index.js     5.46 KB
+CJS dist/index.js     5.47 KB
 CJS dist/index.js.map 6.58 KB
-CJS ⚡️ Build success in 64ms
+CJS ⚡️ Build success in 180ms
 ESM dist/esm/index.js     3.29 KB
 ESM dist/esm/index.js.map 6.44 KB
-ESM ⚡️ Build success in 64ms
+ESM ⚡️ Build success in 180ms
 DTS Build start
-DTS ⚡️ Build success in 15624ms
+DTS ⚡️ Build success in 39730ms
 DTS dist/index.d.ts  1.17 KB
 DTS dist/index.d.mts 1.17 KB
-Done in 18.84s.
+Done in 48.38s.

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @sproutsocial/seeds-react-banner
 
+## 1.0.1
+
+### Patch Changes
+
+- 9fd8bac: Update dependencies to use semantic package version instead of wildcards
+- Updated dependencies [9fd8bac]
+  - @sproutsocial/seeds-react-system-props@3.0.2
+  - @sproutsocial/seeds-react-button@1.2.1
+  - @sproutsocial/seeds-react-theme@2.2.1
+  - @sproutsocial/seeds-react-icon@1.1.2
+  - @sproutsocial/seeds-react-box@1.1.2
+
 ## 1.0.0
 
 ### Major Changes

package/dist/esm/index.js

@@ -122,9 +122,9 @@ var Banner = ({
 var Banner_default = Banner;
 
 // src/index.ts
-var src_default = Banner_default;
+var index_default = Banner_default;
 export {
   Banner_default as Banner,
-  src_default as default
+  index_default as default
 };
 //# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -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"]}
+{"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"]}

package/dist/index.js

@@ -28,12 +28,12 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
-var src_exports = {};
-__export(src_exports, {
+var index_exports = {};
+__export(index_exports, {
   Banner: () => Banner_default,
-  default: () => src_default
+  default: () => index_default
 });
-module.exports = __toCommonJS(src_exports);
+module.exports = __toCommonJS(index_exports);
 
 // src/Banner.tsx
 var React2 = require("react");
@@ -159,7 +159,7 @@ var Banner = ({
 var Banner_default = Banner;
 
 // src/index.ts
-var src_default = Banner_default;
+var index_default = Banner_default;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Banner

package/dist/index.js.map

@@ -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"]}
+{"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"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/seeds-react-banner",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Seeds React Banner",
   "author": "Sprout Social, Inc.",
   "license": "MIT",
@@ -18,11 +18,11 @@
     "test:watch": "jest --watch --coverage=false"
   },
   "dependencies": {
-    "@sproutsocial/seeds-react-theme": "^*",
-    "@sproutsocial/seeds-react-system-props": "^*",
-    "@sproutsocial/seeds-react-box": "*",
-    "@sproutsocial/seeds-react-button": "*",
-    "@sproutsocial/seeds-react-icon": "*"
+    "@sproutsocial/seeds-react-theme": "^2.2.0",
+    "@sproutsocial/seeds-react-system-props": "^3.0.1",
+    "@sproutsocial/seeds-react-box": "^1.1.1",
+    "@sproutsocial/seeds-react-button": "^1.2.0",
+    "@sproutsocial/seeds-react-icon": "^1.1.1"
   },
   "devDependencies": {
     "@types/react": "^18.0.0",
@@ -35,8 +35,8 @@
     "@sproutsocial/seeds-tsconfig": "*",
     "@sproutsocial/seeds-testing": "*",
     "@sproutsocial/seeds-react-testing-library": "*",
-    "@sproutsocial/seeds-react-text": "*",
-    "@sproutsocial/seeds-react-link": "*"
+    "@sproutsocial/seeds-react-text": "^1.3.0",
+    "@sproutsocial/seeds-react-link": "^1.0.0"
   },
   "peerDependencies": {
     "styled-components": "^5.2.3"

package/src/Banner.stories.tsx

@@ -0,0 +1,148 @@
+import React from "react";
+import { Banner, type TypeBannerProps } from "./";
+import { Box } from "@sproutsocial/seeds-react-box";
+import { Link } from "@sproutsocial/seeds-react-link";
+import { Text } from "@sproutsocial/seeds-react-text";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof Banner> = {
+  title: "Components/Banner",
+  component: Banner,
+  argTypes: {
+    type: {
+      options: ["success", "info", "error", "warning", "opportunity"],
+      control: { type: "select" },
+    },
+  },
+  args: {
+    type: "success",
+    typeIconProps: { "aria-label": "Success" },
+    text: "This is a success message!",
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Banner>;
+
+const findText = (bannerType: TypeBannerProps["type"]) => {
+  switch (bannerType) {
+    case "warning":
+      return "This is a warning message!";
+    case "opportunity":
+      return "This is an opportunity message!";
+    case "error":
+      return "This is an error message!";
+    case "info":
+      return "This is an informative message!";
+    case "success":
+    default:
+      return "This is a success message!";
+  }
+};
+
+export const Permutations: Story = {
+  render: (args) => (
+    <Banner
+      text={findText(args.type)}
+      type={args.type}
+      typeIconProps={{ "aria-label": args.type }}
+    />
+  ),
+  name: "Permutations",
+};
+
+export const Links: Story = {
+  render: (args) => (
+    <Banner
+      type={args.type}
+      typeIconProps={args.typeIconProps}
+      text={
+        <Box
+          width={1}
+          display="flex"
+          alignItems="center"
+          justifyContent="space-between"
+        >
+          <Text>{findText(args.type)}</Text>
+          <Text>
+            <Link href="/">Learn more</Link>
+          </Text>
+        </Box>
+      }
+    />
+  ),
+  name: "With link",
+};
+
+export const Buttons: Story = {
+  render: (args) => (
+    <Banner
+      type={args.type}
+      typeIconProps={args.typeIconProps}
+      text={
+        <Box
+          width={1}
+          display="flex"
+          alignItems="center"
+          justifyContent="space-between"
+        >
+          <Text>{findText(args.type)}</Text>
+          <Text>
+            <Link onClick={() => alert("Clicked")}>Learn more</Link>
+          </Text>
+        </Box>
+      }
+    />
+  ),
+  name: "With button",
+};
+
+export const Multiline: Story = {
+  args: {
+    text: "A very long opportunity message that is going to stretch to multiple lines, while the icon stays aligned with the first line.",
+  },
+  render: (args) => (
+    <Box width="416px">
+      <Banner
+        text={args.text}
+        type={args.type}
+        typeIconProps={args.typeIconProps}
+      />
+    </Box>
+  ),
+  name: "With multiline text",
+};
+
+export const Closeable: Story = {
+  args: {
+    text: "This is a banner that has a closeable x icon with an onClose callback.",
+  },
+  render: (args) => (
+    <Banner
+      text={args.text}
+      type={args.type}
+      typeIconProps={args.typeIconProps}
+      onClose={() => alert("Testing...")}
+      closeButtonLabel="Close the banner"
+    />
+  ),
+  name: "With OnClose callback",
+};
+
+export const HiddenIcon: Story = {
+  args: {
+    text: "Success! This is a banner that hides the icon from screen readers!",
+    typeIconProps: { "aria-hidden": true },
+  },
+  render: (args) => (
+    <Banner
+      text={args.text}
+      type={args.type}
+      typeIconProps={args.typeIconProps}
+      onClose={() => alert("Testing...")}
+      closeButtonLabel="Close the banner"
+    />
+  ),
+  name: "With aria-hidden Icon",
+};

package/src/index.stories.tsx

@@ -1,140 +0,0 @@
-import React from "react";
-import { Banner, type TypeBannerProps, type EnumBannerType } from "./";
-import { Box } from "@sproutsocial/seeds-react-box";
-import { Link } from "@sproutsocial/seeds-react-link";
-import { Text } from "@sproutsocial/seeds-react-text";
-
-export default {
-  title: "Components/Banner",
-  component: Banner,
-  argTypes: {
-    type: {
-      options: ["success", "info", "error", "warning", "opportunity"],
-      control: { type: "select" },
-    },
-  },
-  args: {
-    type: "success",
-    typeIconProps: { "aria-label": "Success" },
-    text: "This is a success message!",
-  },
-};
-
-const findText = (bannerType: TypeBannerProps["type"]) => {
-  switch (bannerType) {
-    case "warning":
-      return "This is a warning message!";
-    case "opportunity":
-      return "This is an opportunity message!";
-    case "error":
-      return "This is an error message!";
-    case "info":
-      return "This is an informative message!";
-    case "success":
-    default:
-      return "This is a success message!";
-  }
-};
-
-export const permutations = (args: TypeBannerProps) => (
-  <Banner
-    text={findText(args.type)}
-    type={args.type}
-    typeIconProps={{ "aria-label": args.type }}
-  />
-);
-
-permutations.storyName = "Permutations";
-
-export const links = (args: TypeBannerProps) => (
-  <Banner
-    type={args.type}
-    typeIconProps={args.typeIconProps}
-    text={
-      <Box
-        width={1}
-        display="flex"
-        alignItems="center"
-        justifyContent="space-between"
-      >
-        <Text>{findText(args.type)}</Text>
-        <Text>
-          <Link href="/">Learn more</Link>
-        </Text>
-      </Box>
-    }
-  />
-);
-
-links.storyName = "With link";
-
-export const buttons = (args: TypeBannerProps) => (
-  <Banner
-    type={args.type}
-    typeIconProps={args.typeIconProps}
-    text={
-      <Box
-        width={1}
-        display="flex"
-        alignItems="center"
-        justifyContent="space-between"
-      >
-        <Text>{findText(args.type)}</Text>
-        <Text>
-          <Link onClick={() => alert("Clicked")}>Learn more</Link>
-        </Text>
-      </Box>
-    }
-  />
-);
-
-buttons.storyName = "With button";
-
-export const multiline = (args: TypeBannerProps) => (
-  <Box width="416px">
-    <Banner
-      text={args.text}
-      type={args.type}
-      typeIconProps={args.typeIconProps}
-    />
-  </Box>
-);
-
-multiline.args = {
-  text: "A very long opportunity message that is going to stretch to multiple lines, while the icon stays aligned with the first line.",
-};
-
-multiline.storyName = "With multiline text";
-
-export const closeable = (args: TypeBannerProps) => (
-  <Banner
-    text={args.text}
-    type={args.type}
-    typeIconProps={args.typeIconProps}
-    onClose={() => alert("Testing...")}
-    closeButtonLabel="Close the banner"
-  />
-);
-
-closeable.args = {
-  text: "This is a banner that has a closeable x icon with an onClose callback.",
-};
-
-closeable.storyName = "With OnClose callback";
-
-export const hiddenIcon = (args: TypeBannerProps) => (
-  <Banner
-    text={args.text}
-    type={args.type}
-    typeIconProps={args.typeIconProps}
-    onClose={() => alert("Testing...")}
-    closeButtonLabel="Close the banner"
-  />
-);
-
-hiddenIcon.args = {
-  text: "Success! This is a banner that hides the icon from screen readers!",
-  typeIconProps: { "aria-hidden": true },
-};
-
-hiddenIcon.storyName = "With aria-hidden Icon";