@sproutsocial/seeds-react-banner 1.0.2 → 1.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.turbo/turbo-build.log +19 -19
- package/CHANGELOG.md +8 -0
- package/dist/esm/index.js +6 -1
- package/dist/esm/index.js.map +1 -1
- package/dist/index.d.mts +2 -2
- package/dist/index.d.ts +2 -2
- package/dist/index.js +1 -0
- package/dist/index.js.map +1 -1
- package/package.json +2 -2
- package/src/BannerTypes.ts +2 -0
- package/src/__tests__/Banner.typetest.tsx +6 -0
- package/src/styles.ts +6 -1
- package/tsconfig.json +7 -1
package/.turbo/turbo-build.log
CHANGED
|
@@ -1,21 +1,21 @@
|
|
|
1
1
|
yarn run v1.22.22
|
|
2
2
|
$ tsup --dts
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
Done in
|
|
3
|
+
[34mCLI[39m Building entry: src/index.ts
|
|
4
|
+
[34mCLI[39m Using tsconfig: tsconfig.json
|
|
5
|
+
[34mCLI[39m tsup v8.5.0
|
|
6
|
+
[34mCLI[39m Using tsup config: /home/runner/work/seeds/seeds/seeds-react/seeds-react-banner/tsup.config.ts
|
|
7
|
+
[34mCLI[39m Target: es2022
|
|
8
|
+
[34mCLI[39m Cleaning output folder
|
|
9
|
+
[34mCJS[39m Build start
|
|
10
|
+
[34mESM[39m Build start
|
|
11
|
+
[32mCJS[39m [1mdist/index.js [22m[32m6.02 KB[39m
|
|
12
|
+
[32mCJS[39m [1mdist/index.js.map [22m[32m7.77 KB[39m
|
|
13
|
+
[32mCJS[39m ⚡️ Build success in 252ms
|
|
14
|
+
[32mESM[39m [1mdist/esm/index.js [22m[32m3.82 KB[39m
|
|
15
|
+
[32mESM[39m [1mdist/esm/index.js.map [22m[32m7.66 KB[39m
|
|
16
|
+
[32mESM[39m ⚡️ Build success in 251ms
|
|
17
|
+
[34mDTS[39m Build start
|
|
18
|
+
[32mDTS[39m ⚡️ Build success in 40618ms
|
|
19
|
+
[32mDTS[39m [1mdist/index.d.ts [22m[32m1.35 KB[39m
|
|
20
|
+
[32mDTS[39m [1mdist/index.d.mts [22m[32m1.35 KB[39m
|
|
21
|
+
Done in 48.26s.
|
package/CHANGELOG.md
CHANGED
package/dist/esm/index.js
CHANGED
|
@@ -6,7 +6,11 @@ import Icon2 from "@sproutsocial/seeds-react-icon";
|
|
|
6
6
|
|
|
7
7
|
// src/styles.ts
|
|
8
8
|
import styled, { css } from "styled-components";
|
|
9
|
-
import {
|
|
9
|
+
import {
|
|
10
|
+
COMMON,
|
|
11
|
+
LAYOUT,
|
|
12
|
+
FLEXBOX
|
|
13
|
+
} from "@sproutsocial/seeds-react-system-props";
|
|
10
14
|
import Icon from "@sproutsocial/seeds-react-icon";
|
|
11
15
|
var Container = styled.div(
|
|
12
16
|
(props) => css`
|
|
@@ -40,6 +44,7 @@ var Container = styled.div(
|
|
|
40
44
|
|
|
41
45
|
${COMMON}
|
|
42
46
|
${LAYOUT}
|
|
47
|
+
${FLEXBOX}
|
|
43
48
|
`
|
|
44
49
|
);
|
|
45
50
|
var styles_default = Container;
|
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 {\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 {
|
|
1
|
+
{"version":3,"sources":["../../src/Banner.tsx","../../src/styles.ts","../../src/BannerTypes.ts","../../src/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport Button from \"@sproutsocial/seeds-react-button\";\nimport Icon from \"@sproutsocial/seeds-react-icon\";\nimport Container, { StyledBannerIcon } from \"./styles\";\nimport type {\n TypeBannerProps,\n EnumBannerType,\n EnumBannerVariant,\n} from \"./BannerTypes\";\n\nconst getBannerIconName = (type: EnumBannerType) => {\n switch (type) {\n case \"success\":\n return \"circle-check-outline\";\n case \"error\":\n return \"triangle-exclamation-outline\";\n case \"warning\":\n return \"triangle-exclamation-outline\";\n case \"opportunity\":\n return \"sparkle-outline\";\n case \"info\":\n default:\n return \"circle-i-outline\";\n }\n};\n\nconst getBannerIconColor = (\n type: EnumBannerType,\n variant: EnumBannerVariant\n) => {\n const isGhostVariant = variant === \"ghost\";\n switch (type) {\n case \"success\":\n return isGhostVariant\n ? \"container.border.decorative.green\"\n : \"icon.success\";\n case \"error\":\n return isGhostVariant ? \"container.border.decorative.red\" : \"icon.error\";\n case \"warning\":\n return isGhostVariant\n ? \"container.border.decorative.yellow\"\n : \"icon.warning\";\n case \"opportunity\":\n return isGhostVariant\n ? \"container.border.decorative.purple\"\n : \"icon.opportunity\";\n case \"info\":\n default:\n return isGhostVariant ? \"container.border.decorative.blue\" : \"icon.info\";\n }\n};\n\n/** TODO: change to 'info' type by default in future version */\nconst Banner = ({\n type = \"info\",\n variant = \"default\",\n text,\n onClose,\n closeButtonLabel = \"Close\",\n typeIconProps,\n ...rest\n}: TypeBannerProps) => {\n return (\n <Container\n type={type}\n variant={variant}\n data-qa-alert=\"\"\n data-qa-alert-type={type}\n data-qa-alert-text={text}\n {...rest}\n >\n <Box display=\"flex\" alignItems=\"center\" width={1}>\n <StyledBannerIcon\n name={getBannerIconName(type)}\n color={getBannerIconColor(type, variant)}\n className=\"Icon\"\n fixedWidth\n mt={100}\n mr={350}\n {...typeIconProps}\n />\n {text}\n {onClose && (\n <Box ml=\"auto\" pl={400} alignSelf=\"flex-start\">\n <Button p={0} onClick={onClose} ariaLabel={closeButtonLabel}>\n <Icon name=\"x-outline\" aria-hidden />\n </Button>\n </Box>\n )}\n </Box>\n </Container>\n );\n};\n\nexport default Banner;\n","import styled, { css } from \"styled-components\";\nimport {\n COMMON,\n LAYOUT,\n FLEXBOX,\n} from \"@sproutsocial/seeds-react-system-props\";\nimport Icon from \"@sproutsocial/seeds-react-icon\";\nimport type { EnumBannerType, EnumBannerVariant } from \"./BannerTypes\";\n\ntype TypeContainerProps = {\n type: EnumBannerType;\n variant: EnumBannerVariant;\n};\n\nconst Container = styled.div<TypeContainerProps>(\n (props) => css`\n display: flex;\n overflow: hidden;\n align-items: center;\n justify-content: space-between;\n color: ${props.theme.colors.text.body};\n border-radius: ${props.theme.radii.outer};\n font-family: ${props.theme.fontFamily};\n ${props.theme.typography[200]}\n padding: ${props.theme.space[300]};\n border: 1px solid\n ${props.variant === \"ghost\"\n ? props.theme.colors.container.border.base\n : props.theme.colors.container.border[props.type]};\n background-color: ${props.variant === \"ghost\"\n ? props.theme.colors.container.background.base\n : props.theme.colors.container.background[props.type]};\n\n a,\n button {\n font-weight: ${props.theme.fontWeights.semibold};\n color: ${props.theme.colors.text.body};\n font-size: inherit;\n &:hover {\n color: ${props.theme.colors.text.body};\n text-decoration: underline;\n }\n }\n\n > span:not(.Icon) {\n display: block;\n }\n\n ${COMMON}\n ${LAYOUT}\n ${FLEXBOX}\n `\n);\n\nexport default Container;\n\nexport const StyledBannerIcon = styled(Icon)`\n align-self: flex-start;\n min-width: 16px;\n`;\n","import * as React from \"react\";\nimport type { TypeStyledComponentsCommonProps } from \"@sproutsocial/seeds-react-system-props\";\nimport type {\n TypeSystemCommonProps,\n TypeSystemLayoutProps,\n TypeSystemFlexboxProps,\n} from \"@sproutsocial/seeds-react-system-props\";\nimport type { TypeIconProps } from \"@sproutsocial/seeds-react-icon\";\n\nexport type EnumBannerType =\n | \"success\"\n | \"info\"\n | \"error\"\n | \"warning\"\n | \"opportunity\";\n\nexport type EnumBannerVariant = \"default\" | \"ghost\";\n\nexport interface TypeBannerProps\n extends Omit<React.ComponentPropsWithoutRef<\"div\">, \"color\">,\n TypeSystemCommonProps,\n TypeSystemLayoutProps,\n TypeSystemFlexboxProps,\n TypeStyledComponentsCommonProps {\n text: React.ReactNode;\n /** Type of banner. */\n type?: EnumBannerType;\n /** Variant of banner. */\n variant?: EnumBannerVariant;\n /** Show the close icon in the banner with an action when clicked */\n onClose?: () => void;\n /** Close icon aria label */\n closeButtonLabel?: string;\n /** Icon props that can be passed to the Type specific Icon */\n typeIconProps?: Partial<Omit<TypeIconProps, \"name\">>;\n}\n","import Banner from \"./Banner\";\n\nexport default Banner;\nexport { Banner };\nexport * from \"./BannerTypes\";\n"],"mappings":"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","names":["Icon","Icon"]}
|
package/dist/index.d.mts
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
2
|
import * as React from 'react';
|
|
3
|
-
import { TypeSystemCommonProps, TypeSystemLayoutProps, TypeStyledComponentsCommonProps } from '@sproutsocial/seeds-react-system-props';
|
|
3
|
+
import { TypeSystemCommonProps, TypeSystemLayoutProps, TypeSystemFlexboxProps, TypeStyledComponentsCommonProps } from '@sproutsocial/seeds-react-system-props';
|
|
4
4
|
import { TypeIconProps } from '@sproutsocial/seeds-react-icon';
|
|
5
5
|
|
|
6
6
|
type EnumBannerType = "success" | "info" | "error" | "warning" | "opportunity";
|
|
7
7
|
type EnumBannerVariant = "default" | "ghost";
|
|
8
|
-
interface TypeBannerProps extends Omit<React.ComponentPropsWithoutRef<"div">, "color">, TypeSystemCommonProps, TypeSystemLayoutProps, TypeStyledComponentsCommonProps {
|
|
8
|
+
interface TypeBannerProps extends Omit<React.ComponentPropsWithoutRef<"div">, "color">, TypeSystemCommonProps, TypeSystemLayoutProps, TypeSystemFlexboxProps, TypeStyledComponentsCommonProps {
|
|
9
9
|
text: React.ReactNode;
|
|
10
10
|
/** Type of banner. */
|
|
11
11
|
type?: EnumBannerType;
|
package/dist/index.d.ts
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
2
|
import * as React from 'react';
|
|
3
|
-
import { TypeSystemCommonProps, TypeSystemLayoutProps, TypeStyledComponentsCommonProps } from '@sproutsocial/seeds-react-system-props';
|
|
3
|
+
import { TypeSystemCommonProps, TypeSystemLayoutProps, TypeSystemFlexboxProps, TypeStyledComponentsCommonProps } from '@sproutsocial/seeds-react-system-props';
|
|
4
4
|
import { TypeIconProps } from '@sproutsocial/seeds-react-icon';
|
|
5
5
|
|
|
6
6
|
type EnumBannerType = "success" | "info" | "error" | "warning" | "opportunity";
|
|
7
7
|
type EnumBannerVariant = "default" | "ghost";
|
|
8
|
-
interface TypeBannerProps extends Omit<React.ComponentPropsWithoutRef<"div">, "color">, TypeSystemCommonProps, TypeSystemLayoutProps, TypeStyledComponentsCommonProps {
|
|
8
|
+
interface TypeBannerProps extends Omit<React.ComponentPropsWithoutRef<"div">, "color">, TypeSystemCommonProps, TypeSystemLayoutProps, TypeSystemFlexboxProps, TypeStyledComponentsCommonProps {
|
|
9
9
|
text: React.ReactNode;
|
|
10
10
|
/** Type of banner. */
|
|
11
11
|
type?: EnumBannerType;
|
package/dist/index.js
CHANGED
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 {\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 {
|
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/Banner.tsx","../src/styles.ts","../src/BannerTypes.ts"],"sourcesContent":["import Banner from \"./Banner\";\n\nexport default Banner;\nexport { Banner };\nexport * from \"./BannerTypes\";\n","import * as React from \"react\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport Button from \"@sproutsocial/seeds-react-button\";\nimport Icon from \"@sproutsocial/seeds-react-icon\";\nimport Container, { StyledBannerIcon } from \"./styles\";\nimport type {\n TypeBannerProps,\n EnumBannerType,\n EnumBannerVariant,\n} from \"./BannerTypes\";\n\nconst getBannerIconName = (type: EnumBannerType) => {\n switch (type) {\n case \"success\":\n return \"circle-check-outline\";\n case \"error\":\n return \"triangle-exclamation-outline\";\n case \"warning\":\n return \"triangle-exclamation-outline\";\n case \"opportunity\":\n return \"sparkle-outline\";\n case \"info\":\n default:\n return \"circle-i-outline\";\n }\n};\n\nconst getBannerIconColor = (\n type: EnumBannerType,\n variant: EnumBannerVariant\n) => {\n const isGhostVariant = variant === \"ghost\";\n switch (type) {\n case \"success\":\n return isGhostVariant\n ? \"container.border.decorative.green\"\n : \"icon.success\";\n case \"error\":\n return isGhostVariant ? \"container.border.decorative.red\" : \"icon.error\";\n case \"warning\":\n return isGhostVariant\n ? \"container.border.decorative.yellow\"\n : \"icon.warning\";\n case \"opportunity\":\n return isGhostVariant\n ? \"container.border.decorative.purple\"\n : \"icon.opportunity\";\n case \"info\":\n default:\n return isGhostVariant ? \"container.border.decorative.blue\" : \"icon.info\";\n }\n};\n\n/** TODO: change to 'info' type by default in future version */\nconst Banner = ({\n type = \"info\",\n variant = \"default\",\n text,\n onClose,\n closeButtonLabel = \"Close\",\n typeIconProps,\n ...rest\n}: TypeBannerProps) => {\n return (\n <Container\n type={type}\n variant={variant}\n data-qa-alert=\"\"\n data-qa-alert-type={type}\n data-qa-alert-text={text}\n {...rest}\n >\n <Box display=\"flex\" alignItems=\"center\" width={1}>\n <StyledBannerIcon\n name={getBannerIconName(type)}\n color={getBannerIconColor(type, variant)}\n className=\"Icon\"\n fixedWidth\n mt={100}\n mr={350}\n {...typeIconProps}\n />\n {text}\n {onClose && (\n <Box ml=\"auto\" pl={400} alignSelf=\"flex-start\">\n <Button p={0} onClick={onClose} ariaLabel={closeButtonLabel}>\n <Icon name=\"x-outline\" aria-hidden />\n </Button>\n </Box>\n )}\n </Box>\n </Container>\n );\n};\n\nexport default Banner;\n","import styled, { css } from \"styled-components\";\nimport {\n COMMON,\n LAYOUT,\n FLEXBOX,\n} from \"@sproutsocial/seeds-react-system-props\";\nimport Icon from \"@sproutsocial/seeds-react-icon\";\nimport type { EnumBannerType, EnumBannerVariant } from \"./BannerTypes\";\n\ntype TypeContainerProps = {\n type: EnumBannerType;\n variant: EnumBannerVariant;\n};\n\nconst Container = styled.div<TypeContainerProps>(\n (props) => css`\n display: flex;\n overflow: hidden;\n align-items: center;\n justify-content: space-between;\n color: ${props.theme.colors.text.body};\n border-radius: ${props.theme.radii.outer};\n font-family: ${props.theme.fontFamily};\n ${props.theme.typography[200]}\n padding: ${props.theme.space[300]};\n border: 1px solid\n ${props.variant === \"ghost\"\n ? props.theme.colors.container.border.base\n : props.theme.colors.container.border[props.type]};\n background-color: ${props.variant === \"ghost\"\n ? props.theme.colors.container.background.base\n : props.theme.colors.container.background[props.type]};\n\n a,\n button {\n font-weight: ${props.theme.fontWeights.semibold};\n color: ${props.theme.colors.text.body};\n font-size: inherit;\n &:hover {\n color: ${props.theme.colors.text.body};\n text-decoration: underline;\n }\n }\n\n > span:not(.Icon) {\n display: block;\n }\n\n ${COMMON}\n ${LAYOUT}\n ${FLEXBOX}\n `\n);\n\nexport default Container;\n\nexport const StyledBannerIcon = styled(Icon)`\n align-self: flex-start;\n min-width: 16px;\n`;\n","import * as React from \"react\";\nimport type { TypeStyledComponentsCommonProps } from \"@sproutsocial/seeds-react-system-props\";\nimport type {\n TypeSystemCommonProps,\n TypeSystemLayoutProps,\n TypeSystemFlexboxProps,\n} from \"@sproutsocial/seeds-react-system-props\";\nimport type { TypeIconProps } from \"@sproutsocial/seeds-react-icon\";\n\nexport type EnumBannerType =\n | \"success\"\n | \"info\"\n | \"error\"\n | \"warning\"\n | \"opportunity\";\n\nexport type EnumBannerVariant = \"default\" | \"ghost\";\n\nexport interface TypeBannerProps\n extends Omit<React.ComponentPropsWithoutRef<\"div\">, \"color\">,\n TypeSystemCommonProps,\n TypeSystemLayoutProps,\n TypeSystemFlexboxProps,\n TypeStyledComponentsCommonProps {\n text: React.ReactNode;\n /** Type of banner. */\n type?: EnumBannerType;\n /** Variant of banner. */\n variant?: EnumBannerVariant;\n /** Show the close icon in the banner with an action when clicked */\n onClose?: () => void;\n /** Close icon aria label */\n closeButtonLabel?: string;\n /** Icon props that can be passed to the Type specific Icon */\n typeIconProps?: Partial<Omit<TypeIconProps, \"name\">>;\n}\n"],"mappings":"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","names":["import_seeds_react_icon","styled","Icon","Box","Button","Icon","React"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sproutsocial/seeds-react-banner",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.3",
|
|
4
4
|
"description": "Seeds React Banner",
|
|
5
5
|
"author": "Sprout Social, Inc.",
|
|
6
6
|
"license": "MIT",
|
|
@@ -30,7 +30,7 @@
|
|
|
30
30
|
"@sproutsocial/eslint-config-seeds": "*",
|
|
31
31
|
"react": "^18.0.0",
|
|
32
32
|
"styled-components": "^5.2.3",
|
|
33
|
-
"tsup": "^8.
|
|
33
|
+
"tsup": "^8.3.4",
|
|
34
34
|
"typescript": "^5.6.2",
|
|
35
35
|
"@sproutsocial/seeds-tsconfig": "*",
|
|
36
36
|
"@sproutsocial/seeds-testing": "*",
|
package/src/BannerTypes.ts
CHANGED
|
@@ -3,6 +3,7 @@ import type { TypeStyledComponentsCommonProps } from "@sproutsocial/seeds-react-
|
|
|
3
3
|
import type {
|
|
4
4
|
TypeSystemCommonProps,
|
|
5
5
|
TypeSystemLayoutProps,
|
|
6
|
+
TypeSystemFlexboxProps,
|
|
6
7
|
} from "@sproutsocial/seeds-react-system-props";
|
|
7
8
|
import type { TypeIconProps } from "@sproutsocial/seeds-react-icon";
|
|
8
9
|
|
|
@@ -19,6 +20,7 @@ export interface TypeBannerProps
|
|
|
19
20
|
extends Omit<React.ComponentPropsWithoutRef<"div">, "color">,
|
|
20
21
|
TypeSystemCommonProps,
|
|
21
22
|
TypeSystemLayoutProps,
|
|
23
|
+
TypeSystemFlexboxProps,
|
|
22
24
|
TypeStyledComponentsCommonProps {
|
|
23
25
|
text: React.ReactNode;
|
|
24
26
|
/** Type of banner. */
|
|
@@ -51,6 +51,12 @@ function BannerTypes() {
|
|
|
51
51
|
// @ts-expect-error - test that typeIconProps does not allow name
|
|
52
52
|
typeIconProps={{ name: "sparkles" }}
|
|
53
53
|
/>
|
|
54
|
+
<Banner
|
|
55
|
+
text="Banner Text"
|
|
56
|
+
type="warning"
|
|
57
|
+
m={100}
|
|
58
|
+
alignSelf={"flex-start"}
|
|
59
|
+
/>
|
|
54
60
|
</>
|
|
55
61
|
);
|
|
56
62
|
}
|
package/src/styles.ts
CHANGED
|
@@ -1,5 +1,9 @@
|
|
|
1
1
|
import styled, { css } from "styled-components";
|
|
2
|
-
import {
|
|
2
|
+
import {
|
|
3
|
+
COMMON,
|
|
4
|
+
LAYOUT,
|
|
5
|
+
FLEXBOX,
|
|
6
|
+
} from "@sproutsocial/seeds-react-system-props";
|
|
3
7
|
import Icon from "@sproutsocial/seeds-react-icon";
|
|
4
8
|
import type { EnumBannerType, EnumBannerVariant } from "./BannerTypes";
|
|
5
9
|
|
|
@@ -44,6 +48,7 @@ const Container = styled.div<TypeContainerProps>(
|
|
|
44
48
|
|
|
45
49
|
${COMMON}
|
|
46
50
|
${LAYOUT}
|
|
51
|
+
${FLEXBOX}
|
|
47
52
|
`
|
|
48
53
|
);
|
|
49
54
|
|