@sproutsocial/seeds-react-token 1.0.3 → 1.1.1
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 +10 -10
- package/CHANGELOG.md +18 -0
- package/dist/esm/index.js +15 -2
- package/dist/esm/index.js.map +1 -1
- package/dist/index.d.mts +3 -1
- package/dist/index.d.ts +3 -1
- package/dist/index.js +15 -2
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/src/Token.stories.tsx +12 -0
- package/src/Token.tsx +4 -2
- package/src/TokenTypes.ts +3 -0
- package/src/styles.ts +13 -0
package/.turbo/turbo-build.log
CHANGED
|
@@ -8,14 +8,14 @@ CLI Target: es2022
|
|
|
8
8
|
CLI Cleaning output folder
|
|
9
9
|
CJS Build start
|
|
10
10
|
ESM Build start
|
|
11
|
-
CJS dist/index.js
|
|
12
|
-
CJS dist/index.js.map
|
|
13
|
-
CJS ⚡️ Build success in
|
|
14
|
-
ESM dist/esm/index.js 4.
|
|
15
|
-
ESM dist/esm/index.js.map 8.
|
|
16
|
-
ESM ⚡️ Build success in
|
|
11
|
+
CJS dist/index.js 7.45 KB
|
|
12
|
+
CJS dist/index.js.map 9.10 KB
|
|
13
|
+
CJS ⚡️ Build success in 225ms
|
|
14
|
+
ESM dist/esm/index.js 4.89 KB
|
|
15
|
+
ESM dist/esm/index.js.map 8.98 KB
|
|
16
|
+
ESM ⚡️ Build success in 226ms
|
|
17
17
|
DTS Build start
|
|
18
|
-
DTS ⚡️ Build success in
|
|
19
|
-
DTS dist/index.d.ts 1.
|
|
20
|
-
DTS dist/index.d.mts 1.
|
|
21
|
-
Done in 50.
|
|
18
|
+
DTS ⚡️ Build success in 40112ms
|
|
19
|
+
DTS dist/index.d.ts 1.23 KB
|
|
20
|
+
DTS dist/index.d.mts 1.23 KB
|
|
21
|
+
Done in 50.60s.
|
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,23 @@
|
|
|
1
1
|
# @sproutsocial/seeds-react-token
|
|
2
2
|
|
|
3
|
+
## 1.1.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- bb01698: Refactors internal handling of refs
|
|
8
|
+
- Use updated version and API of mergeRefs in @sproutsocial/seeds-react-utilities
|
|
9
|
+
- No expected changes for consumers
|
|
10
|
+
- Updated dependencies [bb01698]
|
|
11
|
+
- @sproutsocial/seeds-react-utilities@4.2.0
|
|
12
|
+
|
|
13
|
+
## 1.1.0
|
|
14
|
+
|
|
15
|
+
### Minor Changes
|
|
16
|
+
|
|
17
|
+
- d61745a: Adds boolean `hasWarning` prop to `Token` component, which is set to `false` by default. Instances of `Token` with `hasWarning` set to `true` will appear in a yellow warning state.
|
|
18
|
+
|
|
19
|
+
Adds support for new `hasWarning` state for `Tokens` within the `TokenInput` component.
|
|
20
|
+
|
|
3
21
|
## 1.0.3
|
|
4
22
|
|
|
5
23
|
### Patch Changes
|
package/dist/esm/index.js
CHANGED
|
@@ -80,6 +80,17 @@ var Container = styled.button`
|
|
|
80
80
|
`}
|
|
81
81
|
|
|
82
82
|
${COMMON}
|
|
83
|
+
|
|
84
|
+
${({ hasWarning, theme }) => hasWarning && css`
|
|
85
|
+
color: ${theme.colors.text.body};
|
|
86
|
+
background: ${theme.colors.container.background.warning};
|
|
87
|
+
border: 1px solid ${theme.colors.container.border.warning};
|
|
88
|
+
&:hover {
|
|
89
|
+
box-shadow: ${theme.shadows.low};
|
|
90
|
+
border: 1px solid
|
|
91
|
+
${useInteractiveColor(theme.colors.container.border.warning)};
|
|
92
|
+
}
|
|
93
|
+
`}
|
|
83
94
|
`;
|
|
84
95
|
var styles_default = Container;
|
|
85
96
|
|
|
@@ -91,17 +102,19 @@ var Token = ({
|
|
|
91
102
|
onClick,
|
|
92
103
|
qa,
|
|
93
104
|
valid = true,
|
|
105
|
+
hasWarning = false,
|
|
94
106
|
disabled = false,
|
|
95
107
|
palette = "neutral",
|
|
96
|
-
innerRef,
|
|
108
|
+
innerRef = null,
|
|
97
109
|
...rest
|
|
98
110
|
}) => {
|
|
99
111
|
const textContainer = useTextContent("");
|
|
100
112
|
return /* @__PURE__ */ jsxs(
|
|
101
113
|
styles_default,
|
|
102
114
|
{
|
|
103
|
-
ref: mergeRefs(
|
|
115
|
+
ref: mergeRefs(textContainer, innerRef),
|
|
104
116
|
valid,
|
|
117
|
+
hasWarning,
|
|
105
118
|
palette,
|
|
106
119
|
type: closeable || onClick ? "button" : void 0,
|
|
107
120
|
as: closeable || onClick ? "button" : "div",
|
package/dist/esm/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Token.tsx","../../src/styles.ts","../../src/TokenTypes.ts","../../src/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport { mergeRefs } from \"@sproutsocial/seeds-react-utilities\";\nimport { useTextContent } from \"@sproutsocial/seeds-react-hooks\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport Icon from \"@sproutsocial/seeds-react-icon\";\nimport { VisuallyHidden } from \"@sproutsocial/seeds-react-visually-hidden\";\nimport Container from \"./styles\";\nimport type { TypeTokenProps } from \"./TokenTypes\";\n\nconst Token = ({\n children,\n closeable = true,\n onClick,\n qa,\n valid = true,\n disabled = false,\n palette = \"neutral\",\n innerRef,\n ...rest\n}: TypeTokenProps) => {\n const textContainer = useTextContent(\"\");\n\n return (\n <Container\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n //@ts-ignore some legacy ref type mismatch between divs\n ref={mergeRefs(
|
|
1
|
+
{"version":3,"sources":["../../src/Token.tsx","../../src/styles.ts","../../src/TokenTypes.ts","../../src/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport { mergeRefs } from \"@sproutsocial/seeds-react-utilities\";\nimport { useTextContent } from \"@sproutsocial/seeds-react-hooks\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport Icon from \"@sproutsocial/seeds-react-icon\";\nimport { VisuallyHidden } from \"@sproutsocial/seeds-react-visually-hidden\";\nimport Container from \"./styles\";\nimport type { TypeTokenProps } from \"./TokenTypes\";\n\nconst Token = ({\n children,\n closeable = true,\n onClick,\n qa,\n valid = true,\n hasWarning = false,\n disabled = false,\n palette = \"neutral\",\n innerRef = null,\n ...rest\n}: TypeTokenProps) => {\n const textContainer = useTextContent(\"\");\n\n return (\n <Container\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n //@ts-ignore some legacy ref type mismatch between divs\n ref={mergeRefs(textContainer, innerRef)}\n valid={valid}\n hasWarning={hasWarning}\n palette={palette}\n type={closeable || onClick ? \"button\" : undefined}\n as={closeable || onClick ? \"button\" : \"div\"}\n closeable={closeable || !!onClick}\n disabled={disabled}\n onClick={onClick}\n data-qa-token={textContainer.current}\n data-qa-token-iscloseable={closeable === true}\n data-qa-token-isvalid={valid === true}\n data-qa-token-isdisabled={disabled === true}\n {...qa}\n {...rest}\n >\n {!valid && (\n <>\n <VisuallyHidden as=\"div\" role=\"status\">\n This is an invalid token\n </VisuallyHidden>\n <Icon\n aria-hidden\n pr={300}\n name=\"circle-exclamation-solid\"\n size=\"mini\"\n />\n <VisuallyHidden>Invalid</VisuallyHidden>\n </>\n )}\n {closeable ? (\n <Box display=\"flex\" alignItems=\"center\" justifyContent=\"space-between\">\n <Box as=\"span\" display=\"flex\" alignItems=\"center\">\n {children}\n </Box>\n <Icon aria-hidden pl={300} name=\"x-solid\" size=\"mini\" />\n </Box>\n ) : (\n children\n )}\n </Container>\n );\n};\n\nexport default Token;\n","import styled, { css } from \"styled-components\";\nimport { COMMON } from \"@sproutsocial/seeds-react-system-props\";\nimport { focusRing } from \"@sproutsocial/seeds-react-mixins\";\nimport { useInteractiveColor } from \"@sproutsocial/seeds-react-hooks\";\nimport type { TypeTokenProps } from \"./TokenTypes\";\n\nconst Container = styled.button<TypeTokenProps>`\n position: relative;\n display: inline-flex;\n align-items: center;\n margin: 0;\n line-height: 1;\n outline: none;\n /* Theme Properties */\n ${({ theme }) => css`\n ${theme.typography[200]}\n font-family: ${theme.fontFamily};\n font-weight: ${theme.fontWeights.normal};\n border: 1px solid ${theme.colors.container.border.base};\n border-radius: ${theme.radii[500]};\n color: ${theme.colors.text.body};\n background: ${theme.colors.container.background.base};\n padding: ${theme.space[200]} ${theme.space[300]};\n transition: all ${theme.duration.fast} ${theme.easing.ease_inout};\n `}\n\n &:focus {\n ${focusRing}\n }\n\n ${({ closeable, theme }) =>\n closeable &&\n css`\n cursor: pointer;\n &:hover,\n &:active {\n box-shadow: ${theme.shadows.low};\n border: 1px solid\n ${useInteractiveColor(theme.colors.container.border.base)};\n }\n `}\n\n ${({ theme, palette }) =>\n palette === \"blue\" &&\n css`\n color: ${theme.colors.text.body};\n background: ${theme.colors.container.background.decorative.blue};\n border: 1px solid ${theme.colors.container.border.decorative.blue};\n &:hover,\n &:active {\n cursor: pointer;\n box-shadow: ${theme.shadows.low};\n border: 1px solid\n ${useInteractiveColor(theme.colors.container.border.decorative.blue)};\n }\n `}\n\n ${({ disabled, theme }) =>\n disabled &&\n css`\n opacity: 0.4;\n cursor: not-allowed;\n &:hover,\n &:active {\n box-shadow: none;\n border: 1px solid ${theme.colors.container.border.base};\n }\n `}\n \n ${({ valid, theme }) =>\n !valid &&\n css`\n color: ${theme.colors.text.error};\n background: ${theme.colors.container.background.error};\n border: 1px solid ${theme.colors.container.border.error};\n &:hover {\n box-shadow: ${theme.shadows.low};\n border: 1px solid\n ${useInteractiveColor(theme.colors.container.border.error)};\n }\n `}\n\n ${COMMON}\n\n ${({ hasWarning, theme }) =>\n hasWarning &&\n css`\n color: ${theme.colors.text.body};\n background: ${theme.colors.container.background.warning};\n border: 1px solid ${theme.colors.container.border.warning};\n &:hover {\n box-shadow: ${theme.shadows.low};\n border: 1px solid\n ${useInteractiveColor(theme.colors.container.border.warning)};\n }\n `}\n`;\n\nexport default Container;\n","import * as React from \"react\";\nimport type {\n TypeStyledComponentsCommonProps,\n TypeSystemCommonProps,\n} from \"@sproutsocial/seeds-react-system-props\";\n\ntype TypeQaProps = object;\n\nexport interface TypeTokenProps\n extends TypeStyledComponentsCommonProps,\n TypeSystemCommonProps,\n Omit<React.ComponentPropsWithoutRef<\"button\">, \"color\"> {\n onClick?: (event: React.MouseEvent<Element, MouseEvent>) => void;\n children: React.ReactNode;\n qa?: TypeQaProps;\n\n /** Show the close icon in the token. Can be used with or without icon prop */\n closeable?: boolean;\n\n /** Indicates whether the token value is valid or not */\n valid?: boolean;\n\n /** Indicates whether the token has a related warning */\n hasWarning?: boolean;\n\n /** Indicates whether the token is disabled */\n disabled?: boolean;\n palette?: \"neutral\" | \"blue\";\n as?: TypeStyledComponentsCommonProps[\"as\"];\n\n /** Used to get a reference to the underlying element */\n innerRef?: React.Ref<HTMLElement>;\n}\n","import Token from \"./Token\";\n\nexport default Token;\nexport { Token };\nexport * from \"./TokenTypes\";\n"],"mappings":"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","names":[]}
|
package/dist/index.d.mts
CHANGED
|
@@ -11,6 +11,8 @@ interface TypeTokenProps extends TypeStyledComponentsCommonProps, TypeSystemComm
|
|
|
11
11
|
closeable?: boolean;
|
|
12
12
|
/** Indicates whether the token value is valid or not */
|
|
13
13
|
valid?: boolean;
|
|
14
|
+
/** Indicates whether the token has a related warning */
|
|
15
|
+
hasWarning?: boolean;
|
|
14
16
|
/** Indicates whether the token is disabled */
|
|
15
17
|
disabled?: boolean;
|
|
16
18
|
palette?: "neutral" | "blue";
|
|
@@ -19,6 +21,6 @@ interface TypeTokenProps extends TypeStyledComponentsCommonProps, TypeSystemComm
|
|
|
19
21
|
innerRef?: React.Ref<HTMLElement>;
|
|
20
22
|
}
|
|
21
23
|
|
|
22
|
-
declare const Token: ({ children, closeable, onClick, qa, valid, disabled, palette, innerRef, ...rest }: TypeTokenProps) => react_jsx_runtime.JSX.Element;
|
|
24
|
+
declare const Token: ({ children, closeable, onClick, qa, valid, hasWarning, disabled, palette, innerRef, ...rest }: TypeTokenProps) => react_jsx_runtime.JSX.Element;
|
|
23
25
|
|
|
24
26
|
export { Token, type TypeTokenProps, Token as default };
|
package/dist/index.d.ts
CHANGED
|
@@ -11,6 +11,8 @@ interface TypeTokenProps extends TypeStyledComponentsCommonProps, TypeSystemComm
|
|
|
11
11
|
closeable?: boolean;
|
|
12
12
|
/** Indicates whether the token value is valid or not */
|
|
13
13
|
valid?: boolean;
|
|
14
|
+
/** Indicates whether the token has a related warning */
|
|
15
|
+
hasWarning?: boolean;
|
|
14
16
|
/** Indicates whether the token is disabled */
|
|
15
17
|
disabled?: boolean;
|
|
16
18
|
palette?: "neutral" | "blue";
|
|
@@ -19,6 +21,6 @@ interface TypeTokenProps extends TypeStyledComponentsCommonProps, TypeSystemComm
|
|
|
19
21
|
innerRef?: React.Ref<HTMLElement>;
|
|
20
22
|
}
|
|
21
23
|
|
|
22
|
-
declare const Token: ({ children, closeable, onClick, qa, valid, disabled, palette, innerRef, ...rest }: TypeTokenProps) => react_jsx_runtime.JSX.Element;
|
|
24
|
+
declare const Token: ({ children, closeable, onClick, qa, valid, hasWarning, disabled, palette, innerRef, ...rest }: TypeTokenProps) => react_jsx_runtime.JSX.Element;
|
|
23
25
|
|
|
24
26
|
export { Token, type TypeTokenProps, Token as default };
|
package/dist/index.js
CHANGED
|
@@ -117,6 +117,17 @@ var Container = import_styled_components.default.button`
|
|
|
117
117
|
`}
|
|
118
118
|
|
|
119
119
|
${import_seeds_react_system_props.COMMON}
|
|
120
|
+
|
|
121
|
+
${({ hasWarning, theme }) => hasWarning && import_styled_components.css`
|
|
122
|
+
color: ${theme.colors.text.body};
|
|
123
|
+
background: ${theme.colors.container.background.warning};
|
|
124
|
+
border: 1px solid ${theme.colors.container.border.warning};
|
|
125
|
+
&:hover {
|
|
126
|
+
box-shadow: ${theme.shadows.low};
|
|
127
|
+
border: 1px solid
|
|
128
|
+
${(0, import_seeds_react_hooks.useInteractiveColor)(theme.colors.container.border.warning)};
|
|
129
|
+
}
|
|
130
|
+
`}
|
|
120
131
|
`;
|
|
121
132
|
var styles_default = Container;
|
|
122
133
|
|
|
@@ -128,17 +139,19 @@ var Token = ({
|
|
|
128
139
|
onClick,
|
|
129
140
|
qa,
|
|
130
141
|
valid = true,
|
|
142
|
+
hasWarning = false,
|
|
131
143
|
disabled = false,
|
|
132
144
|
palette = "neutral",
|
|
133
|
-
innerRef,
|
|
145
|
+
innerRef = null,
|
|
134
146
|
...rest
|
|
135
147
|
}) => {
|
|
136
148
|
const textContainer = (0, import_seeds_react_hooks2.useTextContent)("");
|
|
137
149
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
138
150
|
styles_default,
|
|
139
151
|
{
|
|
140
|
-
ref: (0, import_seeds_react_utilities.mergeRefs)(
|
|
152
|
+
ref: (0, import_seeds_react_utilities.mergeRefs)(textContainer, innerRef),
|
|
141
153
|
valid,
|
|
154
|
+
hasWarning,
|
|
142
155
|
palette,
|
|
143
156
|
type: closeable || onClick ? "button" : void 0,
|
|
144
157
|
as: closeable || onClick ? "button" : "div",
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts","../src/Token.tsx","../src/styles.ts","../src/TokenTypes.ts"],"sourcesContent":["import Token from \"./Token\";\n\nexport default Token;\nexport { Token };\nexport * from \"./TokenTypes\";\n","import * as React from \"react\";\nimport { mergeRefs } from \"@sproutsocial/seeds-react-utilities\";\nimport { useTextContent } from \"@sproutsocial/seeds-react-hooks\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport Icon from \"@sproutsocial/seeds-react-icon\";\nimport { VisuallyHidden } from \"@sproutsocial/seeds-react-visually-hidden\";\nimport Container from \"./styles\";\nimport type { TypeTokenProps } from \"./TokenTypes\";\n\nconst Token = ({\n children,\n closeable = true,\n onClick,\n qa,\n valid = true,\n disabled = false,\n palette = \"neutral\",\n innerRef,\n ...rest\n}: TypeTokenProps) => {\n const textContainer = useTextContent(\"\");\n\n return (\n <Container\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n //@ts-ignore some legacy ref type mismatch between divs\n ref={mergeRefs(
|
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/Token.tsx","../src/styles.ts","../src/TokenTypes.ts"],"sourcesContent":["import Token from \"./Token\";\n\nexport default Token;\nexport { Token };\nexport * from \"./TokenTypes\";\n","import * as React from \"react\";\nimport { mergeRefs } from \"@sproutsocial/seeds-react-utilities\";\nimport { useTextContent } from \"@sproutsocial/seeds-react-hooks\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport Icon from \"@sproutsocial/seeds-react-icon\";\nimport { VisuallyHidden } from \"@sproutsocial/seeds-react-visually-hidden\";\nimport Container from \"./styles\";\nimport type { TypeTokenProps } from \"./TokenTypes\";\n\nconst Token = ({\n children,\n closeable = true,\n onClick,\n qa,\n valid = true,\n hasWarning = false,\n disabled = false,\n palette = \"neutral\",\n innerRef = null,\n ...rest\n}: TypeTokenProps) => {\n const textContainer = useTextContent(\"\");\n\n return (\n <Container\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n //@ts-ignore some legacy ref type mismatch between divs\n ref={mergeRefs(textContainer, innerRef)}\n valid={valid}\n hasWarning={hasWarning}\n palette={palette}\n type={closeable || onClick ? \"button\" : undefined}\n as={closeable || onClick ? \"button\" : \"div\"}\n closeable={closeable || !!onClick}\n disabled={disabled}\n onClick={onClick}\n data-qa-token={textContainer.current}\n data-qa-token-iscloseable={closeable === true}\n data-qa-token-isvalid={valid === true}\n data-qa-token-isdisabled={disabled === true}\n {...qa}\n {...rest}\n >\n {!valid && (\n <>\n <VisuallyHidden as=\"div\" role=\"status\">\n This is an invalid token\n </VisuallyHidden>\n <Icon\n aria-hidden\n pr={300}\n name=\"circle-exclamation-solid\"\n size=\"mini\"\n />\n <VisuallyHidden>Invalid</VisuallyHidden>\n </>\n )}\n {closeable ? (\n <Box display=\"flex\" alignItems=\"center\" justifyContent=\"space-between\">\n <Box as=\"span\" display=\"flex\" alignItems=\"center\">\n {children}\n </Box>\n <Icon aria-hidden pl={300} name=\"x-solid\" size=\"mini\" />\n </Box>\n ) : (\n children\n )}\n </Container>\n );\n};\n\nexport default Token;\n","import styled, { css } from \"styled-components\";\nimport { COMMON } from \"@sproutsocial/seeds-react-system-props\";\nimport { focusRing } from \"@sproutsocial/seeds-react-mixins\";\nimport { useInteractiveColor } from \"@sproutsocial/seeds-react-hooks\";\nimport type { TypeTokenProps } from \"./TokenTypes\";\n\nconst Container = styled.button<TypeTokenProps>`\n position: relative;\n display: inline-flex;\n align-items: center;\n margin: 0;\n line-height: 1;\n outline: none;\n /* Theme Properties */\n ${({ theme }) => css`\n ${theme.typography[200]}\n font-family: ${theme.fontFamily};\n font-weight: ${theme.fontWeights.normal};\n border: 1px solid ${theme.colors.container.border.base};\n border-radius: ${theme.radii[500]};\n color: ${theme.colors.text.body};\n background: ${theme.colors.container.background.base};\n padding: ${theme.space[200]} ${theme.space[300]};\n transition: all ${theme.duration.fast} ${theme.easing.ease_inout};\n `}\n\n &:focus {\n ${focusRing}\n }\n\n ${({ closeable, theme }) =>\n closeable &&\n css`\n cursor: pointer;\n &:hover,\n &:active {\n box-shadow: ${theme.shadows.low};\n border: 1px solid\n ${useInteractiveColor(theme.colors.container.border.base)};\n }\n `}\n\n ${({ theme, palette }) =>\n palette === \"blue\" &&\n css`\n color: ${theme.colors.text.body};\n background: ${theme.colors.container.background.decorative.blue};\n border: 1px solid ${theme.colors.container.border.decorative.blue};\n &:hover,\n &:active {\n cursor: pointer;\n box-shadow: ${theme.shadows.low};\n border: 1px solid\n ${useInteractiveColor(theme.colors.container.border.decorative.blue)};\n }\n `}\n\n ${({ disabled, theme }) =>\n disabled &&\n css`\n opacity: 0.4;\n cursor: not-allowed;\n &:hover,\n &:active {\n box-shadow: none;\n border: 1px solid ${theme.colors.container.border.base};\n }\n `}\n \n ${({ valid, theme }) =>\n !valid &&\n css`\n color: ${theme.colors.text.error};\n background: ${theme.colors.container.background.error};\n border: 1px solid ${theme.colors.container.border.error};\n &:hover {\n box-shadow: ${theme.shadows.low};\n border: 1px solid\n ${useInteractiveColor(theme.colors.container.border.error)};\n }\n `}\n\n ${COMMON}\n\n ${({ hasWarning, theme }) =>\n hasWarning &&\n css`\n color: ${theme.colors.text.body};\n background: ${theme.colors.container.background.warning};\n border: 1px solid ${theme.colors.container.border.warning};\n &:hover {\n box-shadow: ${theme.shadows.low};\n border: 1px solid\n ${useInteractiveColor(theme.colors.container.border.warning)};\n }\n `}\n`;\n\nexport default Container;\n","import * as React from \"react\";\nimport type {\n TypeStyledComponentsCommonProps,\n TypeSystemCommonProps,\n} from \"@sproutsocial/seeds-react-system-props\";\n\ntype TypeQaProps = object;\n\nexport interface TypeTokenProps\n extends TypeStyledComponentsCommonProps,\n TypeSystemCommonProps,\n Omit<React.ComponentPropsWithoutRef<\"button\">, \"color\"> {\n onClick?: (event: React.MouseEvent<Element, MouseEvent>) => void;\n children: React.ReactNode;\n qa?: TypeQaProps;\n\n /** Show the close icon in the token. Can be used with or without icon prop */\n closeable?: boolean;\n\n /** Indicates whether the token value is valid or not */\n valid?: boolean;\n\n /** Indicates whether the token has a related warning */\n hasWarning?: boolean;\n\n /** Indicates whether the token is disabled */\n disabled?: boolean;\n palette?: \"neutral\" | \"blue\";\n as?: TypeStyledComponentsCommonProps[\"as\"];\n\n /** Used to get a reference to the underlying element */\n innerRef?: React.Ref<HTMLElement>;\n}\n"],"mappings":"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","names":["import_seeds_react_hooks","styled","Icon","Box","React"]}
|
package/package.json
CHANGED
package/src/Token.stories.tsx
CHANGED
|
@@ -101,3 +101,15 @@ export const BluePalette: Story = {
|
|
|
101
101
|
</Token>
|
|
102
102
|
),
|
|
103
103
|
};
|
|
104
|
+
|
|
105
|
+
export const HasWarning: Story = {
|
|
106
|
+
args: {
|
|
107
|
+
hasWarning: true,
|
|
108
|
+
},
|
|
109
|
+
name: "Has Warning",
|
|
110
|
+
render: (args) => (
|
|
111
|
+
<Token {...args}>
|
|
112
|
+
<span>bad idea</span>
|
|
113
|
+
</Token>
|
|
114
|
+
),
|
|
115
|
+
};
|
package/src/Token.tsx
CHANGED
|
@@ -13,9 +13,10 @@ const Token = ({
|
|
|
13
13
|
onClick,
|
|
14
14
|
qa,
|
|
15
15
|
valid = true,
|
|
16
|
+
hasWarning = false,
|
|
16
17
|
disabled = false,
|
|
17
18
|
palette = "neutral",
|
|
18
|
-
innerRef,
|
|
19
|
+
innerRef = null,
|
|
19
20
|
...rest
|
|
20
21
|
}: TypeTokenProps) => {
|
|
21
22
|
const textContainer = useTextContent("");
|
|
@@ -24,8 +25,9 @@ const Token = ({
|
|
|
24
25
|
<Container
|
|
25
26
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
26
27
|
//@ts-ignore some legacy ref type mismatch between divs
|
|
27
|
-
ref={mergeRefs(
|
|
28
|
+
ref={mergeRefs(textContainer, innerRef)}
|
|
28
29
|
valid={valid}
|
|
30
|
+
hasWarning={hasWarning}
|
|
29
31
|
palette={palette}
|
|
30
32
|
type={closeable || onClick ? "button" : undefined}
|
|
31
33
|
as={closeable || onClick ? "button" : "div"}
|
package/src/TokenTypes.ts
CHANGED
|
@@ -20,6 +20,9 @@ export interface TypeTokenProps
|
|
|
20
20
|
/** Indicates whether the token value is valid or not */
|
|
21
21
|
valid?: boolean;
|
|
22
22
|
|
|
23
|
+
/** Indicates whether the token has a related warning */
|
|
24
|
+
hasWarning?: boolean;
|
|
25
|
+
|
|
23
26
|
/** Indicates whether the token is disabled */
|
|
24
27
|
disabled?: boolean;
|
|
25
28
|
palette?: "neutral" | "blue";
|
package/src/styles.ts
CHANGED
|
@@ -81,6 +81,19 @@ const Container = styled.button<TypeTokenProps>`
|
|
|
81
81
|
`}
|
|
82
82
|
|
|
83
83
|
${COMMON}
|
|
84
|
+
|
|
85
|
+
${({ hasWarning, theme }) =>
|
|
86
|
+
hasWarning &&
|
|
87
|
+
css`
|
|
88
|
+
color: ${theme.colors.text.body};
|
|
89
|
+
background: ${theme.colors.container.background.warning};
|
|
90
|
+
border: 1px solid ${theme.colors.container.border.warning};
|
|
91
|
+
&:hover {
|
|
92
|
+
box-shadow: ${theme.shadows.low};
|
|
93
|
+
border: 1px solid
|
|
94
|
+
${useInteractiveColor(theme.colors.container.border.warning)};
|
|
95
|
+
}
|
|
96
|
+
`}
|
|
84
97
|
`;
|
|
85
98
|
|
|
86
99
|
export default Container;
|