@sproutsocial/seeds-react-banner 1.1.40 → 1.1.41
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 +8 -8
- package/CHANGELOG.md +10 -0
- package/dist/esm/index.js +4 -2
- package/dist/esm/index.js.map +1 -1
- package/dist/index.js +4 -2
- package/dist/index.js.map +1 -1
- package/package.json +6 -6
- package/src/Banner.stories.tsx +27 -0
- package/src/__tests__/banner.css.test.ts +23 -0
- package/src/__tests__/features.test.tsx +54 -0
- package/src/banner.css +7 -4
- package/src/styles.ts +4 -2
package/.turbo/turbo-build.log
CHANGED
|
@@ -8,14 +8,14 @@ $ tsup --dts
|
|
|
8
8
|
[34mCLI[39m Cleaning output folder
|
|
9
9
|
[34mCJS[39m Build start
|
|
10
10
|
[34mESM[39m Build start
|
|
11
|
-
[32mCJS[39m [1mdist/index.js [22m[32m9.
|
|
12
|
-
[32mCJS[39m [1mdist/index.js.map [22m[
|
|
13
|
-
[32mCJS[39m ⚡️ Build success in
|
|
14
|
-
[32mESM[39m [1mdist/esm/index.js [22m[32m6.
|
|
15
|
-
[32mESM[39m [1mdist/esm/index.js.map [22m[32m12.
|
|
16
|
-
[32mESM[39m ⚡️ Build success in
|
|
11
|
+
[32mCJS[39m [1mdist/index.js [22m[32m9.19 KB[39m
|
|
12
|
+
[32mCJS[39m [1mdist/index.js.map [22m[32m13.16 KB[39m
|
|
13
|
+
[32mCJS[39m ⚡️ Build success in 97ms
|
|
14
|
+
[32mESM[39m [1mdist/esm/index.js [22m[32m6.50 KB[39m
|
|
15
|
+
[32mESM[39m [1mdist/esm/index.js.map [22m[32m12.94 KB[39m
|
|
16
|
+
[32mESM[39m ⚡️ Build success in 97ms
|
|
17
17
|
[34mDTS[39m Build start
|
|
18
|
-
[32mDTS[39m ⚡️ Build success in
|
|
18
|
+
[32mDTS[39m ⚡️ Build success in 4991ms
|
|
19
19
|
[32mDTS[39m [1mdist/index.d.ts [22m[32m1.42 KB[39m
|
|
20
20
|
[32mDTS[39m [1mdist/index.d.mts [22m[32m1.42 KB[39m
|
|
21
|
-
Done in 6.
|
|
21
|
+
Done in 6.69s.
|
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,15 @@
|
|
|
1
1
|
# @sproutsocial/seeds-react-banner
|
|
2
2
|
|
|
3
|
+
## 1.1.41
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- 0f2fba6: Banner no longer overrides the text colour of Seeds Buttons rendered inside it (secondary Buttons were invisible on hover). Plain anchors/buttons and Links keep Banner's inline-action styling.
|
|
8
|
+
- @sproutsocial/seeds-react-theme@4.8.1
|
|
9
|
+
- @sproutsocial/seeds-react-box@1.1.37
|
|
10
|
+
- @sproutsocial/seeds-react-icon@2.5.7
|
|
11
|
+
- @sproutsocial/seeds-react-button@2.3.14
|
|
12
|
+
|
|
3
13
|
## 1.1.40
|
|
4
14
|
|
|
5
15
|
### Patch Changes
|
package/dist/esm/index.js
CHANGED
|
@@ -30,8 +30,10 @@ var Container = styled.div(
|
|
|
30
30
|
${props.variant === "ghost" ? props.theme.colors.container.border.base : props.theme.colors.container.border[props.type]};
|
|
31
31
|
background-color: ${props.variant === "ghost" ? props.theme.colors.container.background.base : props.theme.colors.container.background[props.type]};
|
|
32
32
|
|
|
33
|
-
|
|
34
|
-
|
|
33
|
+
/* Seeds Buttons (.seeds-btn) own their appearance colours, so exclude them.
|
|
34
|
+
Plain anchors/buttons and Seeds Links keep the inline-action styling. */
|
|
35
|
+
a:not(.seeds-btn),
|
|
36
|
+
button:not(.seeds-btn) {
|
|
35
37
|
font-weight: ${props.theme.fontWeights.semibold};
|
|
36
38
|
color: ${props.theme.colors.text.body};
|
|
37
39
|
font-size: inherit;
|
package/dist/esm/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Banner.tsx","../../src/BannerHybrid.tsx","../../src/styles.ts","../../src/BannerTailwind.tsx","../../src/bannerIcon.ts","../../src/BannerTypes.ts","../../src/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport BannerHybrid from \"./BannerHybrid\";\nimport type { TypeBannerProps } from \"./BannerTypes\";\n\n/**\n * Banner component. Automatically routes between the Tailwind implementation\n * (preferred) and the styled-components implementation (for consumers using\n * system props or a styled() extension).\n */\nconst Banner = (props: TypeBannerProps) => <BannerHybrid {...props} />;\n\nexport default Banner;\n","/**\n * Hybrid Banner Component\n * Automatically chooses between Tailwind and styled-components based on props.\n */\n\nimport * 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\"; // Styled-components version\nimport BannerTailwind from \"./BannerTailwind\"; // Tailwind version\nimport { getBannerIconName, getBannerIconColor } from \"./bannerIcon\";\nimport { hasStyledProps } from \"@sproutsocial/seeds-react-system-props\";\nimport type { TypeBannerProps } from \"./BannerTypes\";\n\n/** TODO: change to 'info' type by default in future version */\nconst BannerHybrid = ({\n type = \"info\",\n variant = \"default\",\n text,\n onClose,\n closeButtonLabel = \"Close\",\n typeIconProps,\n ...rest\n}: TypeBannerProps) => {\n if (hasStyledProps(rest)) {\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\n // Use Tailwind version (preferred - better performance)\n return (\n <BannerTailwind\n type={type}\n variant={variant}\n text={text}\n onClose={onClose}\n closeButtonLabel={closeButtonLabel}\n typeIconProps={typeIconProps}\n {...rest}\n />\n );\n};\n\nexport default BannerHybrid;\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","/**\n * Tailwind CSS implementation of Banner component\n * Uses Seeds banner CSS classes from banner.css\n */\n\nimport * 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 { getBannerIconName, getBannerIconColor } from \"./bannerIcon\";\nimport type { TypeBannerProps } from \"./BannerTypes\";\n\n// Utility for merging class names properly\nfunction cn(\n ...inputs: (string | undefined | null | false | Record<string, boolean>)[]\n): string {\n const classes: string[] = [];\n\n for (const input of inputs) {\n if (!input) continue;\n\n if (typeof input === \"string\") {\n classes.push(input);\n } else if (typeof input === \"object\") {\n for (const [key, value] of Object.entries(input)) {\n if (value) {\n classes.push(key);\n }\n }\n }\n }\n\n return classes.join(\" \");\n}\n\n/** TODO: change to 'info' type by default in future version */\nconst BannerTailwind = ({\n type = \"info\",\n variant = \"default\",\n text,\n onClose,\n closeButtonLabel = \"Close\",\n typeIconProps,\n className,\n ...rest\n}: TypeBannerProps) => {\n const variantClass =\n variant === \"ghost\" ? \"seeds-banner-ghost\" : `seeds-banner-${type}`;\n\n return (\n <div\n className={cn(\"seeds-banner\", variantClass, className)}\n data-qa-alert=\"\"\n data-qa-alert-type={type}\n data-qa-alert-text={text}\n {...(rest as React.HTMLAttributes<HTMLDivElement>)}\n >\n <Box display=\"flex\" alignItems=\"center\" width={1}>\n <Icon\n name={getBannerIconName(type)}\n color={getBannerIconColor(type, variant)}\n className=\"Icon seeds-banner-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 </div>\n );\n};\n\nexport default BannerTailwind;\n","import type { EnumBannerType, EnumBannerVariant } from \"./BannerTypes\";\n\nexport const 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 \"gem-outline\";\n case \"info\":\n default:\n return \"circle-i-outline\";\n }\n};\n\nexport const 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","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":["Box","Button","Icon","Icon","Icon","jsx","jsxs","Box","Button","Icon","jsx"]}
|
|
1
|
+
{"version":3,"sources":["../../src/Banner.tsx","../../src/BannerHybrid.tsx","../../src/styles.ts","../../src/BannerTailwind.tsx","../../src/bannerIcon.ts","../../src/BannerTypes.ts","../../src/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport BannerHybrid from \"./BannerHybrid\";\nimport type { TypeBannerProps } from \"./BannerTypes\";\n\n/**\n * Banner component. Automatically routes between the Tailwind implementation\n * (preferred) and the styled-components implementation (for consumers using\n * system props or a styled() extension).\n */\nconst Banner = (props: TypeBannerProps) => <BannerHybrid {...props} />;\n\nexport default Banner;\n","/**\n * Hybrid Banner Component\n * Automatically chooses between Tailwind and styled-components based on props.\n */\n\nimport * 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\"; // Styled-components version\nimport BannerTailwind from \"./BannerTailwind\"; // Tailwind version\nimport { getBannerIconName, getBannerIconColor } from \"./bannerIcon\";\nimport { hasStyledProps } from \"@sproutsocial/seeds-react-system-props\";\nimport type { TypeBannerProps } from \"./BannerTypes\";\n\n/** TODO: change to 'info' type by default in future version */\nconst BannerHybrid = ({\n type = \"info\",\n variant = \"default\",\n text,\n onClose,\n closeButtonLabel = \"Close\",\n typeIconProps,\n ...rest\n}: TypeBannerProps) => {\n if (hasStyledProps(rest)) {\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\n // Use Tailwind version (preferred - better performance)\n return (\n <BannerTailwind\n type={type}\n variant={variant}\n text={text}\n onClose={onClose}\n closeButtonLabel={closeButtonLabel}\n typeIconProps={typeIconProps}\n {...rest}\n />\n );\n};\n\nexport default BannerHybrid;\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 /* Seeds Buttons (.seeds-btn) own their appearance colours, so exclude them.\n Plain anchors/buttons and Seeds Links keep the inline-action styling. */\n a:not(.seeds-btn),\n button:not(.seeds-btn) {\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","/**\n * Tailwind CSS implementation of Banner component\n * Uses Seeds banner CSS classes from banner.css\n */\n\nimport * 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 { getBannerIconName, getBannerIconColor } from \"./bannerIcon\";\nimport type { TypeBannerProps } from \"./BannerTypes\";\n\n// Utility for merging class names properly\nfunction cn(\n ...inputs: (string | undefined | null | false | Record<string, boolean>)[]\n): string {\n const classes: string[] = [];\n\n for (const input of inputs) {\n if (!input) continue;\n\n if (typeof input === \"string\") {\n classes.push(input);\n } else if (typeof input === \"object\") {\n for (const [key, value] of Object.entries(input)) {\n if (value) {\n classes.push(key);\n }\n }\n }\n }\n\n return classes.join(\" \");\n}\n\n/** TODO: change to 'info' type by default in future version */\nconst BannerTailwind = ({\n type = \"info\",\n variant = \"default\",\n text,\n onClose,\n closeButtonLabel = \"Close\",\n typeIconProps,\n className,\n ...rest\n}: TypeBannerProps) => {\n const variantClass =\n variant === \"ghost\" ? \"seeds-banner-ghost\" : `seeds-banner-${type}`;\n\n return (\n <div\n className={cn(\"seeds-banner\", variantClass, className)}\n data-qa-alert=\"\"\n data-qa-alert-type={type}\n data-qa-alert-text={text}\n {...(rest as React.HTMLAttributes<HTMLDivElement>)}\n >\n <Box display=\"flex\" alignItems=\"center\" width={1}>\n <Icon\n name={getBannerIconName(type)}\n color={getBannerIconColor(type, variant)}\n className=\"Icon seeds-banner-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 </div>\n );\n};\n\nexport default BannerTailwind;\n","import type { EnumBannerType, EnumBannerVariant } from \"./BannerTypes\";\n\nexport const 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 \"gem-outline\";\n case \"info\":\n default:\n return \"circle-i-outline\";\n }\n};\n\nexport const 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","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":["Box","Button","Icon","Icon","Icon","jsx","jsxs","Box","Button","Icon","jsx"]}
|
package/dist/index.js
CHANGED
|
@@ -63,8 +63,10 @@ var Container = import_styled_components.default.div(
|
|
|
63
63
|
${props.variant === "ghost" ? props.theme.colors.container.border.base : props.theme.colors.container.border[props.type]};
|
|
64
64
|
background-color: ${props.variant === "ghost" ? props.theme.colors.container.background.base : props.theme.colors.container.background[props.type]};
|
|
65
65
|
|
|
66
|
-
|
|
67
|
-
|
|
66
|
+
/* Seeds Buttons (.seeds-btn) own their appearance colours, so exclude them.
|
|
67
|
+
Plain anchors/buttons and Seeds Links keep the inline-action styling. */
|
|
68
|
+
a:not(.seeds-btn),
|
|
69
|
+
button:not(.seeds-btn) {
|
|
68
70
|
font-weight: ${props.theme.fontWeights.semibold};
|
|
69
71
|
color: ${props.theme.colors.text.body};
|
|
70
72
|
font-size: inherit;
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts","../src/Banner.tsx","../src/BannerHybrid.tsx","../src/styles.ts","../src/BannerTailwind.tsx","../src/bannerIcon.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 BannerHybrid from \"./BannerHybrid\";\nimport type { TypeBannerProps } from \"./BannerTypes\";\n\n/**\n * Banner component. Automatically routes between the Tailwind implementation\n * (preferred) and the styled-components implementation (for consumers using\n * system props or a styled() extension).\n */\nconst Banner = (props: TypeBannerProps) => <BannerHybrid {...props} />;\n\nexport default Banner;\n","/**\n * Hybrid Banner Component\n * Automatically chooses between Tailwind and styled-components based on props.\n */\n\nimport * 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\"; // Styled-components version\nimport BannerTailwind from \"./BannerTailwind\"; // Tailwind version\nimport { getBannerIconName, getBannerIconColor } from \"./bannerIcon\";\nimport { hasStyledProps } from \"@sproutsocial/seeds-react-system-props\";\nimport type { TypeBannerProps } from \"./BannerTypes\";\n\n/** TODO: change to 'info' type by default in future version */\nconst BannerHybrid = ({\n type = \"info\",\n variant = \"default\",\n text,\n onClose,\n closeButtonLabel = \"Close\",\n typeIconProps,\n ...rest\n}: TypeBannerProps) => {\n if (hasStyledProps(rest)) {\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\n // Use Tailwind version (preferred - better performance)\n return (\n <BannerTailwind\n type={type}\n variant={variant}\n text={text}\n onClose={onClose}\n closeButtonLabel={closeButtonLabel}\n typeIconProps={typeIconProps}\n {...rest}\n />\n );\n};\n\nexport default BannerHybrid;\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","/**\n * Tailwind CSS implementation of Banner component\n * Uses Seeds banner CSS classes from banner.css\n */\n\nimport * 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 { getBannerIconName, getBannerIconColor } from \"./bannerIcon\";\nimport type { TypeBannerProps } from \"./BannerTypes\";\n\n// Utility for merging class names properly\nfunction cn(\n ...inputs: (string | undefined | null | false | Record<string, boolean>)[]\n): string {\n const classes: string[] = [];\n\n for (const input of inputs) {\n if (!input) continue;\n\n if (typeof input === \"string\") {\n classes.push(input);\n } else if (typeof input === \"object\") {\n for (const [key, value] of Object.entries(input)) {\n if (value) {\n classes.push(key);\n }\n }\n }\n }\n\n return classes.join(\" \");\n}\n\n/** TODO: change to 'info' type by default in future version */\nconst BannerTailwind = ({\n type = \"info\",\n variant = \"default\",\n text,\n onClose,\n closeButtonLabel = \"Close\",\n typeIconProps,\n className,\n ...rest\n}: TypeBannerProps) => {\n const variantClass =\n variant === \"ghost\" ? \"seeds-banner-ghost\" : `seeds-banner-${type}`;\n\n return (\n <div\n className={cn(\"seeds-banner\", variantClass, className)}\n data-qa-alert=\"\"\n data-qa-alert-type={type}\n data-qa-alert-text={text}\n {...(rest as React.HTMLAttributes<HTMLDivElement>)}\n >\n <Box display=\"flex\" alignItems=\"center\" width={1}>\n <Icon\n name={getBannerIconName(type)}\n color={getBannerIconColor(type, variant)}\n className=\"Icon seeds-banner-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 </div>\n );\n};\n\nexport default BannerTailwind;\n","import type { EnumBannerType, EnumBannerVariant } from \"./BannerTypes\";\n\nexport const 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 \"gem-outline\";\n case \"info\":\n default:\n return \"circle-i-outline\";\n }\n};\n\nexport const 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","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":["React","React","import_seeds_react_box","import_seeds_react_button","import_seeds_react_icon","styled","Icon","import_seeds_react_icon","Box","Icon","Button","import_seeds_react_system_props","import_jsx_runtime","Box","Button","Icon","import_jsx_runtime","React"]}
|
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/Banner.tsx","../src/BannerHybrid.tsx","../src/styles.ts","../src/BannerTailwind.tsx","../src/bannerIcon.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 BannerHybrid from \"./BannerHybrid\";\nimport type { TypeBannerProps } from \"./BannerTypes\";\n\n/**\n * Banner component. Automatically routes between the Tailwind implementation\n * (preferred) and the styled-components implementation (for consumers using\n * system props or a styled() extension).\n */\nconst Banner = (props: TypeBannerProps) => <BannerHybrid {...props} />;\n\nexport default Banner;\n","/**\n * Hybrid Banner Component\n * Automatically chooses between Tailwind and styled-components based on props.\n */\n\nimport * 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\"; // Styled-components version\nimport BannerTailwind from \"./BannerTailwind\"; // Tailwind version\nimport { getBannerIconName, getBannerIconColor } from \"./bannerIcon\";\nimport { hasStyledProps } from \"@sproutsocial/seeds-react-system-props\";\nimport type { TypeBannerProps } from \"./BannerTypes\";\n\n/** TODO: change to 'info' type by default in future version */\nconst BannerHybrid = ({\n type = \"info\",\n variant = \"default\",\n text,\n onClose,\n closeButtonLabel = \"Close\",\n typeIconProps,\n ...rest\n}: TypeBannerProps) => {\n if (hasStyledProps(rest)) {\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\n // Use Tailwind version (preferred - better performance)\n return (\n <BannerTailwind\n type={type}\n variant={variant}\n text={text}\n onClose={onClose}\n closeButtonLabel={closeButtonLabel}\n typeIconProps={typeIconProps}\n {...rest}\n />\n );\n};\n\nexport default BannerHybrid;\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 /* Seeds Buttons (.seeds-btn) own their appearance colours, so exclude them.\n Plain anchors/buttons and Seeds Links keep the inline-action styling. */\n a:not(.seeds-btn),\n button:not(.seeds-btn) {\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","/**\n * Tailwind CSS implementation of Banner component\n * Uses Seeds banner CSS classes from banner.css\n */\n\nimport * 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 { getBannerIconName, getBannerIconColor } from \"./bannerIcon\";\nimport type { TypeBannerProps } from \"./BannerTypes\";\n\n// Utility for merging class names properly\nfunction cn(\n ...inputs: (string | undefined | null | false | Record<string, boolean>)[]\n): string {\n const classes: string[] = [];\n\n for (const input of inputs) {\n if (!input) continue;\n\n if (typeof input === \"string\") {\n classes.push(input);\n } else if (typeof input === \"object\") {\n for (const [key, value] of Object.entries(input)) {\n if (value) {\n classes.push(key);\n }\n }\n }\n }\n\n return classes.join(\" \");\n}\n\n/** TODO: change to 'info' type by default in future version */\nconst BannerTailwind = ({\n type = \"info\",\n variant = \"default\",\n text,\n onClose,\n closeButtonLabel = \"Close\",\n typeIconProps,\n className,\n ...rest\n}: TypeBannerProps) => {\n const variantClass =\n variant === \"ghost\" ? \"seeds-banner-ghost\" : `seeds-banner-${type}`;\n\n return (\n <div\n className={cn(\"seeds-banner\", variantClass, className)}\n data-qa-alert=\"\"\n data-qa-alert-type={type}\n data-qa-alert-text={text}\n {...(rest as React.HTMLAttributes<HTMLDivElement>)}\n >\n <Box display=\"flex\" alignItems=\"center\" width={1}>\n <Icon\n name={getBannerIconName(type)}\n color={getBannerIconColor(type, variant)}\n className=\"Icon seeds-banner-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 </div>\n );\n};\n\nexport default BannerTailwind;\n","import type { EnumBannerType, EnumBannerVariant } from \"./BannerTypes\";\n\nexport const 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 \"gem-outline\";\n case \"info\":\n default:\n return \"circle-i-outline\";\n }\n};\n\nexport const 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","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":["React","React","import_seeds_react_box","import_seeds_react_button","import_seeds_react_icon","styled","Icon","import_seeds_react_icon","Box","Icon","Button","import_seeds_react_system_props","import_jsx_runtime","Box","Button","Icon","import_jsx_runtime","React"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sproutsocial/seeds-react-banner",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.41",
|
|
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": "^4.8.
|
|
21
|
+
"@sproutsocial/seeds-react-theme": "^4.8.1",
|
|
22
22
|
"@sproutsocial/seeds-react-system-props": "^3.3.0",
|
|
23
|
-
"@sproutsocial/seeds-react-box": "^1.1.
|
|
24
|
-
"@sproutsocial/seeds-react-button": "^2.3.
|
|
25
|
-
"@sproutsocial/seeds-react-icon": "^2.5.
|
|
23
|
+
"@sproutsocial/seeds-react-box": "^1.1.37",
|
|
24
|
+
"@sproutsocial/seeds-react-button": "^2.3.14",
|
|
25
|
+
"@sproutsocial/seeds-react-icon": "^2.5.7"
|
|
26
26
|
},
|
|
27
27
|
"devDependencies": {
|
|
28
28
|
"@types/react": "^18.0.0",
|
|
@@ -36,7 +36,7 @@
|
|
|
36
36
|
"@sproutsocial/seeds-testing": "*",
|
|
37
37
|
"@sproutsocial/seeds-react-testing-library": "*",
|
|
38
38
|
"@sproutsocial/seeds-react-text": "^1.5.6",
|
|
39
|
-
"@sproutsocial/seeds-react-link": "^1.1.
|
|
39
|
+
"@sproutsocial/seeds-react-link": "^1.1.29"
|
|
40
40
|
},
|
|
41
41
|
"peerDependencies": {
|
|
42
42
|
"styled-components": "^5.2.3"
|
package/src/Banner.stories.tsx
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { Banner, type TypeBannerProps } from "./";
|
|
3
3
|
import { Box } from "@sproutsocial/seeds-react-box";
|
|
4
|
+
import { Button } from "@sproutsocial/seeds-react-button";
|
|
4
5
|
import { Link } from "@sproutsocial/seeds-react-link";
|
|
5
6
|
import { Text } from "@sproutsocial/seeds-react-text";
|
|
6
7
|
import type { Meta, StoryObj } from "@storybook/react";
|
|
@@ -106,6 +107,32 @@ export const Buttons: Story = {
|
|
|
106
107
|
name: "With button",
|
|
107
108
|
};
|
|
108
109
|
|
|
110
|
+
export const WithSeedsButton: Story = {
|
|
111
|
+
render: (args) => (
|
|
112
|
+
<Banner
|
|
113
|
+
type={args.type}
|
|
114
|
+
variant={args.variant}
|
|
115
|
+
typeIconProps={args.typeIconProps}
|
|
116
|
+
text={
|
|
117
|
+
<Box
|
|
118
|
+
width={1}
|
|
119
|
+
display="flex"
|
|
120
|
+
alignItems="center"
|
|
121
|
+
justifyContent="space-between"
|
|
122
|
+
>
|
|
123
|
+
<Text>{findText(args.type)}</Text>
|
|
124
|
+
<Box display="flex" alignItems="center" gap={300}>
|
|
125
|
+
<Link onClick={() => alert("Clicked")}>Learn more</Link>
|
|
126
|
+
<Button appearance="secondary">Secondary</Button>
|
|
127
|
+
<Button appearance="primary">Primary</Button>
|
|
128
|
+
</Box>
|
|
129
|
+
</Box>
|
|
130
|
+
}
|
|
131
|
+
/>
|
|
132
|
+
),
|
|
133
|
+
name: "With Seeds Button",
|
|
134
|
+
};
|
|
135
|
+
|
|
109
136
|
export const Multiline: Story = {
|
|
110
137
|
args: {
|
|
111
138
|
text: "A very long opportunity message that is going to stretch to multiple lines, while the icon stays aligned with the first line.",
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
/* eslint-env jest, node */
|
|
2
|
+
import fs from "fs";
|
|
3
|
+
import path from "path";
|
|
4
|
+
|
|
5
|
+
const cssPath = path.resolve(__dirname, "../banner.css");
|
|
6
|
+
|
|
7
|
+
describe("Banner CSS", () => {
|
|
8
|
+
it("excludes Seeds Buttons from the descendant link/button rules", () => {
|
|
9
|
+
const css = fs.readFileSync(cssPath, "utf8");
|
|
10
|
+
|
|
11
|
+
expect(css).toContain(".seeds-banner a:not(.seeds-btn)");
|
|
12
|
+
expect(css).toContain(".seeds-banner button:not(.seeds-btn)");
|
|
13
|
+
expect(css).toContain(".seeds-banner a:not(.seeds-btn):hover");
|
|
14
|
+
expect(css).toContain(".seeds-banner button:not(.seeds-btn):hover");
|
|
15
|
+
expect(css).not.toContain("data-qa-button");
|
|
16
|
+
});
|
|
17
|
+
|
|
18
|
+
it("does not style bare descendant anchors or buttons", () => {
|
|
19
|
+
const css = fs.readFileSync(cssPath, "utf8");
|
|
20
|
+
|
|
21
|
+
expect(css).not.toMatch(/\.seeds-banner (a|button)(:hover)?\s*[,{]/);
|
|
22
|
+
});
|
|
23
|
+
});
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
import { render, screen } from "@sproutsocial/seeds-react-testing-library";
|
|
2
2
|
import { theme } from "@sproutsocial/seeds-react-theme";
|
|
3
|
+
import { Button } from "@sproutsocial/seeds-react-button";
|
|
4
|
+
import { Link } from "@sproutsocial/seeds-react-link";
|
|
3
5
|
import Banner from "../Banner";
|
|
4
6
|
|
|
5
7
|
describe("Banner", () => {
|
|
@@ -120,4 +122,56 @@ describe("Banner", () => {
|
|
|
120
122
|
).toHaveStyleRule("color", theme.colors.container.border.decorative.blue);
|
|
121
123
|
});
|
|
122
124
|
});
|
|
125
|
+
|
|
126
|
+
describe("descendant Buttons", () => {
|
|
127
|
+
const getStyles = () =>
|
|
128
|
+
Array.from(document.head.querySelectorAll("style"))
|
|
129
|
+
.map((style) => style.textContent)
|
|
130
|
+
.join("\n");
|
|
131
|
+
|
|
132
|
+
it("marks Seeds Buttons with the seeds-btn class but not Links", () => {
|
|
133
|
+
render(
|
|
134
|
+
<Banner
|
|
135
|
+
mt={300}
|
|
136
|
+
text={
|
|
137
|
+
<>
|
|
138
|
+
<Button appearance="secondary">Act</Button>
|
|
139
|
+
<Link onClick={() => {}}>More</Link>
|
|
140
|
+
<Link href="https://example.com">Docs</Link>
|
|
141
|
+
</>
|
|
142
|
+
}
|
|
143
|
+
/>
|
|
144
|
+
);
|
|
145
|
+
|
|
146
|
+
expect(screen.getByText("Act").closest("button")).toHaveClass(
|
|
147
|
+
"seeds-btn"
|
|
148
|
+
);
|
|
149
|
+
expect(screen.getByText("More").closest("button")).not.toHaveClass(
|
|
150
|
+
"seeds-btn"
|
|
151
|
+
);
|
|
152
|
+
expect(screen.getByText("Docs").closest("a")).not.toHaveClass(
|
|
153
|
+
"seeds-btn"
|
|
154
|
+
);
|
|
155
|
+
});
|
|
156
|
+
|
|
157
|
+
it("excludes Seeds Buttons from the styled Container link/button rules", () => {
|
|
158
|
+
render(
|
|
159
|
+
<Banner mt={300} text={<Button appearance="secondary">Act</Button>} />
|
|
160
|
+
);
|
|
161
|
+
|
|
162
|
+
const styles = getStyles();
|
|
163
|
+
|
|
164
|
+
expect(styles).toContain("a:not(.seeds-btn)");
|
|
165
|
+
expect(styles).toContain("button:not(.seeds-btn)");
|
|
166
|
+
expect(styles).not.toContain("data-qa-button");
|
|
167
|
+
});
|
|
168
|
+
|
|
169
|
+
it("close button keeps Banner descendant styling", () => {
|
|
170
|
+
render(<Banner mt={300} text="x" onClose={() => {}} />);
|
|
171
|
+
|
|
172
|
+
expect(screen.getByLabelText("Close").closest("button")).not.toHaveClass(
|
|
173
|
+
"seeds-btn"
|
|
174
|
+
);
|
|
175
|
+
});
|
|
176
|
+
});
|
|
123
177
|
});
|
package/src/banner.css
CHANGED
|
@@ -23,15 +23,18 @@
|
|
|
23
23
|
padding: var(--space-300);
|
|
24
24
|
}
|
|
25
25
|
|
|
26
|
-
.seeds-
|
|
27
|
-
|
|
26
|
+
/* Seeds Buttons (.seeds-btn) own their appearance colours, so exclude them.
|
|
27
|
+
Plain anchors/buttons and Seeds Links (including href-less Links, which
|
|
28
|
+
render as <button>) keep Banner's inline-action styling. */
|
|
29
|
+
.seeds-banner a:not(.seeds-btn),
|
|
30
|
+
.seeds-banner button:not(.seeds-btn) {
|
|
28
31
|
font-weight: var(--font-weight-semibold);
|
|
29
32
|
color: var(--color-text-body);
|
|
30
33
|
font-size: inherit;
|
|
31
34
|
}
|
|
32
35
|
|
|
33
|
-
.seeds-banner a:hover,
|
|
34
|
-
.seeds-banner button:hover {
|
|
36
|
+
.seeds-banner a:not(.seeds-btn):hover,
|
|
37
|
+
.seeds-banner button:not(.seeds-btn):hover {
|
|
35
38
|
color: var(--color-text-body);
|
|
36
39
|
text-decoration: underline;
|
|
37
40
|
}
|
package/src/styles.ts
CHANGED
|
@@ -31,8 +31,10 @@ const Container = styled.div<TypeContainerProps>(
|
|
|
31
31
|
? props.theme.colors.container.background.base
|
|
32
32
|
: props.theme.colors.container.background[props.type]};
|
|
33
33
|
|
|
34
|
-
|
|
35
|
-
|
|
34
|
+
/* Seeds Buttons (.seeds-btn) own their appearance colours, so exclude them.
|
|
35
|
+
Plain anchors/buttons and Seeds Links keep the inline-action styling. */
|
|
36
|
+
a:not(.seeds-btn),
|
|
37
|
+
button:not(.seeds-btn) {
|
|
36
38
|
font-weight: ${props.theme.fontWeights.semibold};
|
|
37
39
|
color: ${props.theme.colors.text.body};
|
|
38
40
|
font-size: inherit;
|