@sproutsocial/seeds-react-token 1.4.29 → 1.5.7
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 +90 -0
- package/dist/esm/index.js +13 -0
- 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 +13 -0
- package/dist/index.js.map +1 -1
- package/package.json +8 -8
- package/src/Token.stories.tsx +14 -0
- package/src/Token.tsx +2 -0
- package/src/TokenTypes.ts +3 -0
- package/src/styles.ts +13 -0
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
|
-
[
|
|
12
|
-
[
|
|
13
|
-
[
|
|
14
|
-
[
|
|
15
|
-
[
|
|
16
|
-
[
|
|
11
|
+
[32mESM[39m [1mdist/esm/index.js [22m[32m5.37 KB[39m
|
|
12
|
+
[32mESM[39m [1mdist/esm/index.js.map [22m[32m9.94 KB[39m
|
|
13
|
+
[32mESM[39m ⚡️ Build success in 21ms
|
|
14
|
+
[32mCJS[39m [1mdist/index.js [22m[32m7.81 KB[39m
|
|
15
|
+
[32mCJS[39m [1mdist/index.js.map [22m[32m10.07 KB[39m
|
|
16
|
+
[32mCJS[39m ⚡️ Build success in 21ms
|
|
17
17
|
[34mDTS[39m Build start
|
|
18
|
-
[32mDTS[39m ⚡️ Build success in
|
|
19
|
-
[32mDTS[39m [1mdist/index.d.ts [22m[32m1.
|
|
20
|
-
[32mDTS[39m [1mdist/index.d.mts [22m[32m1.
|
|
21
|
-
Done in
|
|
18
|
+
[32mDTS[39m ⚡️ Build success in 3889ms
|
|
19
|
+
[32mDTS[39m [1mdist/index.d.ts [22m[32m1.31 KB[39m
|
|
20
|
+
[32mDTS[39m [1mdist/index.d.mts [22m[32m1.31 KB[39m
|
|
21
|
+
Done in 5.49s.
|
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,95 @@
|
|
|
1
1
|
# @sproutsocial/seeds-react-token
|
|
2
2
|
|
|
3
|
+
## 1.5.7
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- Updated dependencies [a13a571]
|
|
8
|
+
- @sproutsocial/seeds-react-theme@4.1.1
|
|
9
|
+
- @sproutsocial/seeds-react-box@1.1.22
|
|
10
|
+
- @sproutsocial/seeds-react-hooks@3.2.3
|
|
11
|
+
- @sproutsocial/seeds-react-icon@2.4.1
|
|
12
|
+
- @sproutsocial/seeds-react-mixins@4.3.8
|
|
13
|
+
- @sproutsocial/seeds-react-visually-hidden@1.0.23
|
|
14
|
+
|
|
15
|
+
## 1.5.6
|
|
16
|
+
|
|
17
|
+
### Patch Changes
|
|
18
|
+
|
|
19
|
+
- Updated dependencies [69c9d02]
|
|
20
|
+
- @sproutsocial/seeds-react-icon@2.4.0
|
|
21
|
+
|
|
22
|
+
## 1.5.5
|
|
23
|
+
|
|
24
|
+
### Patch Changes
|
|
25
|
+
|
|
26
|
+
- Updated dependencies [5892f44]
|
|
27
|
+
- @sproutsocial/seeds-react-system-props@3.1.1
|
|
28
|
+
- @sproutsocial/seeds-react-box@1.1.21
|
|
29
|
+
- @sproutsocial/seeds-react-icon@2.3.13
|
|
30
|
+
- @sproutsocial/seeds-react-visually-hidden@1.0.22
|
|
31
|
+
|
|
32
|
+
## 1.5.4
|
|
33
|
+
|
|
34
|
+
### Patch Changes
|
|
35
|
+
|
|
36
|
+
- Updated dependencies [5114a32]
|
|
37
|
+
- @sproutsocial/seeds-react-theme@4.1.0
|
|
38
|
+
- @sproutsocial/seeds-react-box@1.1.20
|
|
39
|
+
- @sproutsocial/seeds-react-hooks@3.2.2
|
|
40
|
+
- @sproutsocial/seeds-react-icon@2.3.12
|
|
41
|
+
- @sproutsocial/seeds-react-mixins@4.3.7
|
|
42
|
+
- @sproutsocial/seeds-react-visually-hidden@1.0.21
|
|
43
|
+
|
|
44
|
+
## 1.5.3
|
|
45
|
+
|
|
46
|
+
### Patch Changes
|
|
47
|
+
|
|
48
|
+
- Updated dependencies [132ef9d]
|
|
49
|
+
- Updated dependencies [132ef9d]
|
|
50
|
+
- @sproutsocial/seeds-react-theme@4.0.0
|
|
51
|
+
- @sproutsocial/seeds-react-system-props@3.1.0
|
|
52
|
+
- @sproutsocial/seeds-react-box@1.1.19
|
|
53
|
+
- @sproutsocial/seeds-react-hooks@3.2.1
|
|
54
|
+
- @sproutsocial/seeds-react-icon@2.3.11
|
|
55
|
+
- @sproutsocial/seeds-react-mixins@4.3.6
|
|
56
|
+
- @sproutsocial/seeds-react-visually-hidden@1.0.20
|
|
57
|
+
|
|
58
|
+
## 1.5.2
|
|
59
|
+
|
|
60
|
+
### Patch Changes
|
|
61
|
+
|
|
62
|
+
- @sproutsocial/seeds-react-icon@2.3.10
|
|
63
|
+
|
|
64
|
+
## 1.5.1
|
|
65
|
+
|
|
66
|
+
### Patch Changes
|
|
67
|
+
|
|
68
|
+
- Updated dependencies [47c62b3]
|
|
69
|
+
- Updated dependencies [b961e75]
|
|
70
|
+
- @sproutsocial/seeds-react-theme@3.7.1
|
|
71
|
+
- @sproutsocial/seeds-react-hooks@3.2.0
|
|
72
|
+
- @sproutsocial/seeds-react-box@1.1.18
|
|
73
|
+
- @sproutsocial/seeds-react-icon@2.3.9
|
|
74
|
+
- @sproutsocial/seeds-react-mixins@4.3.5
|
|
75
|
+
- @sproutsocial/seeds-react-visually-hidden@1.0.19
|
|
76
|
+
|
|
77
|
+
## 1.5.0
|
|
78
|
+
|
|
79
|
+
### Minor Changes
|
|
80
|
+
|
|
81
|
+
- 06da9c2: Add an `isGenerated` state to Token for styling AI-generated content, with supporting `ai_generated` theme color tokens (light & dark).
|
|
82
|
+
|
|
83
|
+
### Patch Changes
|
|
84
|
+
|
|
85
|
+
- Updated dependencies [06da9c2]
|
|
86
|
+
- @sproutsocial/seeds-react-theme@3.7.0
|
|
87
|
+
- @sproutsocial/seeds-react-box@1.1.17
|
|
88
|
+
- @sproutsocial/seeds-react-hooks@3.1.9
|
|
89
|
+
- @sproutsocial/seeds-react-icon@2.3.8
|
|
90
|
+
- @sproutsocial/seeds-react-mixins@4.3.4
|
|
91
|
+
- @sproutsocial/seeds-react-visually-hidden@1.0.18
|
|
92
|
+
|
|
3
93
|
## 1.4.29
|
|
4
94
|
|
|
5
95
|
### Patch Changes
|
package/dist/esm/index.js
CHANGED
|
@@ -87,6 +87,17 @@ var Container = styled.button`
|
|
|
87
87
|
}
|
|
88
88
|
`}
|
|
89
89
|
|
|
90
|
+
${({ isGenerated, theme }) => isGenerated && `
|
|
91
|
+
background: ${theme.colors.container.background.ai_generated};
|
|
92
|
+
border: 1px solid ${theme.colors.container.border.ai_generated};
|
|
93
|
+
&:hover {
|
|
94
|
+
box-shadow: ${theme.shadows.low};
|
|
95
|
+
border: 1px solid
|
|
96
|
+
${useInteractiveColor(theme.colors.container.border.ai_generated)};
|
|
97
|
+
}
|
|
98
|
+
color: ${theme.colors.text.ai_generated};
|
|
99
|
+
`}
|
|
100
|
+
|
|
90
101
|
${COMMON}
|
|
91
102
|
`;
|
|
92
103
|
var styles_default = Container;
|
|
@@ -100,6 +111,7 @@ var Token = ({
|
|
|
100
111
|
qa,
|
|
101
112
|
valid = true,
|
|
102
113
|
hasWarning = false,
|
|
114
|
+
isGenerated = false,
|
|
103
115
|
disabled = false,
|
|
104
116
|
palette = "neutral",
|
|
105
117
|
innerRef = null,
|
|
@@ -112,6 +124,7 @@ var Token = ({
|
|
|
112
124
|
ref: mergeRefs(textContainer, innerRef),
|
|
113
125
|
valid,
|
|
114
126
|
hasWarning,
|
|
127
|
+
isGenerated,
|
|
115
128
|
palette,
|
|
116
129
|
type: closeable || onClick ? "button" : void 0,
|
|
117
130
|
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 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 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 font-family: ${({ theme }) => theme.fontFamily};\n font-size: ${({ theme }) => theme.fontSizes[200]};\n line-height: 13px;\n font-weight: ${({ theme }) => theme.fontWeights.normal};\n border: 1px solid ${({ theme }) => theme.colors.container.border.base};\n border-radius: ${({ theme }) => theme.radii[500]};\n color: ${({ theme }) => theme.colors.text.body};\n background: ${({ theme }) => theme.colors.container.background.base};\n padding: ${({ theme }) => theme.space[200]} ${({ theme }) => theme.space[300]};\n transition: all ${({ theme }) => theme.duration.fast}\n ${({ theme }) => theme.easing.ease_inout};\n\n &:focus {\n ${focusRing}\n }\n\n ${({ closeable, theme }) =>\n closeable &&\n `\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 `\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 `\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 `\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 ${({ hasWarning, theme }) =>\n hasWarning &&\n `\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\t${COMMON}\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?: React.EventHandler<React.SyntheticEvent>;\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":[]}
|
|
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 isGenerated = 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 isGenerated={isGenerated}\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 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 font-family: ${({ theme }) => theme.fontFamily};\n font-size: ${({ theme }) => theme.fontSizes[200]};\n line-height: 13px;\n font-weight: ${({ theme }) => theme.fontWeights.normal};\n border: 1px solid ${({ theme }) => theme.colors.container.border.base};\n border-radius: ${({ theme }) => theme.radii[500]};\n color: ${({ theme }) => theme.colors.text.body};\n background: ${({ theme }) => theme.colors.container.background.base};\n padding: ${({ theme }) => theme.space[200]} ${({ theme }) => theme.space[300]};\n transition: all ${({ theme }) => theme.duration.fast}\n ${({ theme }) => theme.easing.ease_inout};\n\n &:focus {\n ${focusRing}\n }\n\n ${({ closeable, theme }) =>\n closeable &&\n `\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 `\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 `\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 `\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 ${({ hasWarning, theme }) =>\n hasWarning &&\n `\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 ${({ isGenerated, theme }) =>\n isGenerated &&\n `\n background: ${theme.colors.container.background.ai_generated};\n border: 1px solid ${theme.colors.container.border.ai_generated};\n &:hover {\n box-shadow: ${theme.shadows.low};\n border: 1px solid\n ${useInteractiveColor(theme.colors.container.border.ai_generated)};\n }\n color: ${theme.colors.text.ai_generated};\n `}\n\n\t${COMMON}\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?: React.EventHandler<React.SyntheticEvent>;\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 was generated by AI */\n isGenerated?: 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
|
@@ -13,6 +13,8 @@ interface TypeTokenProps extends TypeStyledComponentsCommonProps, TypeSystemComm
|
|
|
13
13
|
valid?: boolean;
|
|
14
14
|
/** Indicates whether the token has a related warning */
|
|
15
15
|
hasWarning?: boolean;
|
|
16
|
+
/** Indicates whether the token was generated by AI */
|
|
17
|
+
isGenerated?: boolean;
|
|
16
18
|
/** Indicates whether the token is disabled */
|
|
17
19
|
disabled?: boolean;
|
|
18
20
|
palette?: "neutral" | "blue";
|
|
@@ -21,6 +23,6 @@ interface TypeTokenProps extends TypeStyledComponentsCommonProps, TypeSystemComm
|
|
|
21
23
|
innerRef?: React.Ref<HTMLElement>;
|
|
22
24
|
}
|
|
23
25
|
|
|
24
|
-
declare const Token: ({ children, closeable, onClick, qa, valid, hasWarning, disabled, palette, innerRef, ...rest }: TypeTokenProps) => react_jsx_runtime.JSX.Element;
|
|
26
|
+
declare const Token: ({ children, closeable, onClick, qa, valid, hasWarning, isGenerated, disabled, palette, innerRef, ...rest }: TypeTokenProps) => react_jsx_runtime.JSX.Element;
|
|
25
27
|
|
|
26
28
|
export { Token, type TypeTokenProps, Token as default };
|
package/dist/index.d.ts
CHANGED
|
@@ -13,6 +13,8 @@ interface TypeTokenProps extends TypeStyledComponentsCommonProps, TypeSystemComm
|
|
|
13
13
|
valid?: boolean;
|
|
14
14
|
/** Indicates whether the token has a related warning */
|
|
15
15
|
hasWarning?: boolean;
|
|
16
|
+
/** Indicates whether the token was generated by AI */
|
|
17
|
+
isGenerated?: boolean;
|
|
16
18
|
/** Indicates whether the token is disabled */
|
|
17
19
|
disabled?: boolean;
|
|
18
20
|
palette?: "neutral" | "blue";
|
|
@@ -21,6 +23,6 @@ interface TypeTokenProps extends TypeStyledComponentsCommonProps, TypeSystemComm
|
|
|
21
23
|
innerRef?: React.Ref<HTMLElement>;
|
|
22
24
|
}
|
|
23
25
|
|
|
24
|
-
declare const Token: ({ children, closeable, onClick, qa, valid, hasWarning, disabled, palette, innerRef, ...rest }: TypeTokenProps) => react_jsx_runtime.JSX.Element;
|
|
26
|
+
declare const Token: ({ children, closeable, onClick, qa, valid, hasWarning, isGenerated, disabled, palette, innerRef, ...rest }: TypeTokenProps) => react_jsx_runtime.JSX.Element;
|
|
25
27
|
|
|
26
28
|
export { Token, type TypeTokenProps, Token as default };
|
package/dist/index.js
CHANGED
|
@@ -124,6 +124,17 @@ var Container = import_styled_components.default.button`
|
|
|
124
124
|
}
|
|
125
125
|
`}
|
|
126
126
|
|
|
127
|
+
${({ isGenerated, theme }) => isGenerated && `
|
|
128
|
+
background: ${theme.colors.container.background.ai_generated};
|
|
129
|
+
border: 1px solid ${theme.colors.container.border.ai_generated};
|
|
130
|
+
&:hover {
|
|
131
|
+
box-shadow: ${theme.shadows.low};
|
|
132
|
+
border: 1px solid
|
|
133
|
+
${(0, import_seeds_react_hooks.useInteractiveColor)(theme.colors.container.border.ai_generated)};
|
|
134
|
+
}
|
|
135
|
+
color: ${theme.colors.text.ai_generated};
|
|
136
|
+
`}
|
|
137
|
+
|
|
127
138
|
${import_seeds_react_system_props.COMMON}
|
|
128
139
|
`;
|
|
129
140
|
var styles_default = Container;
|
|
@@ -137,6 +148,7 @@ var Token = ({
|
|
|
137
148
|
qa,
|
|
138
149
|
valid = true,
|
|
139
150
|
hasWarning = false,
|
|
151
|
+
isGenerated = false,
|
|
140
152
|
disabled = false,
|
|
141
153
|
palette = "neutral",
|
|
142
154
|
innerRef = null,
|
|
@@ -149,6 +161,7 @@ var Token = ({
|
|
|
149
161
|
ref: (0, import_seeds_react_utilities.mergeRefs)(textContainer, innerRef),
|
|
150
162
|
valid,
|
|
151
163
|
hasWarning,
|
|
164
|
+
isGenerated,
|
|
152
165
|
palette,
|
|
153
166
|
type: closeable || onClick ? "button" : void 0,
|
|
154
167
|
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 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 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 font-family: ${({ theme }) => theme.fontFamily};\n font-size: ${({ theme }) => theme.fontSizes[200]};\n line-height: 13px;\n font-weight: ${({ theme }) => theme.fontWeights.normal};\n border: 1px solid ${({ theme }) => theme.colors.container.border.base};\n border-radius: ${({ theme }) => theme.radii[500]};\n color: ${({ theme }) => theme.colors.text.body};\n background: ${({ theme }) => theme.colors.container.background.base};\n padding: ${({ theme }) => theme.space[200]} ${({ theme }) => theme.space[300]};\n transition: all ${({ theme }) => theme.duration.fast}\n ${({ theme }) => theme.easing.ease_inout};\n\n &:focus {\n ${focusRing}\n }\n\n ${({ closeable, theme }) =>\n closeable &&\n `\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 `\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 `\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 `\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 ${({ hasWarning, theme }) =>\n hasWarning &&\n `\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\t${COMMON}\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?: React.EventHandler<React.SyntheticEvent>;\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"]}
|
|
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 isGenerated = 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 isGenerated={isGenerated}\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 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 font-family: ${({ theme }) => theme.fontFamily};\n font-size: ${({ theme }) => theme.fontSizes[200]};\n line-height: 13px;\n font-weight: ${({ theme }) => theme.fontWeights.normal};\n border: 1px solid ${({ theme }) => theme.colors.container.border.base};\n border-radius: ${({ theme }) => theme.radii[500]};\n color: ${({ theme }) => theme.colors.text.body};\n background: ${({ theme }) => theme.colors.container.background.base};\n padding: ${({ theme }) => theme.space[200]} ${({ theme }) => theme.space[300]};\n transition: all ${({ theme }) => theme.duration.fast}\n ${({ theme }) => theme.easing.ease_inout};\n\n &:focus {\n ${focusRing}\n }\n\n ${({ closeable, theme }) =>\n closeable &&\n `\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 `\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 `\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 `\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 ${({ hasWarning, theme }) =>\n hasWarning &&\n `\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 ${({ isGenerated, theme }) =>\n isGenerated &&\n `\n background: ${theme.colors.container.background.ai_generated};\n border: 1px solid ${theme.colors.container.border.ai_generated};\n &:hover {\n box-shadow: ${theme.shadows.low};\n border: 1px solid\n ${useInteractiveColor(theme.colors.container.border.ai_generated)};\n }\n color: ${theme.colors.text.ai_generated};\n `}\n\n\t${COMMON}\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?: React.EventHandler<React.SyntheticEvent>;\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 was generated by AI */\n isGenerated?: 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
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sproutsocial/seeds-react-token",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.5.7",
|
|
4
4
|
"description": "Seeds React Token",
|
|
5
5
|
"author": "Sprout Social, Inc.",
|
|
6
6
|
"license": "MIT",
|
|
@@ -18,14 +18,14 @@
|
|
|
18
18
|
"test:watch": "jest --watch --coverage=false"
|
|
19
19
|
},
|
|
20
20
|
"dependencies": {
|
|
21
|
-
"@sproutsocial/seeds-react-theme": "^
|
|
22
|
-
"@sproutsocial/seeds-react-system-props": "^3.
|
|
23
|
-
"@sproutsocial/seeds-react-box": "^1.1.
|
|
24
|
-
"@sproutsocial/seeds-react-icon": "^2.
|
|
25
|
-
"@sproutsocial/seeds-react-visually-hidden": "^1.0.
|
|
26
|
-
"@sproutsocial/seeds-react-hooks": "^3.
|
|
21
|
+
"@sproutsocial/seeds-react-theme": "^4.1.1",
|
|
22
|
+
"@sproutsocial/seeds-react-system-props": "^3.1.1",
|
|
23
|
+
"@sproutsocial/seeds-react-box": "^1.1.22",
|
|
24
|
+
"@sproutsocial/seeds-react-icon": "^2.4.1",
|
|
25
|
+
"@sproutsocial/seeds-react-visually-hidden": "^1.0.23",
|
|
26
|
+
"@sproutsocial/seeds-react-hooks": "^3.2.3",
|
|
27
27
|
"@sproutsocial/seeds-react-utilities": "^4.2.0",
|
|
28
|
-
"@sproutsocial/seeds-react-mixins": "^4.3.
|
|
28
|
+
"@sproutsocial/seeds-react-mixins": "^4.3.8"
|
|
29
29
|
},
|
|
30
30
|
"devDependencies": {
|
|
31
31
|
"@types/react": "^18.0.0",
|
package/src/Token.stories.tsx
CHANGED
|
@@ -113,3 +113,17 @@ export const HasWarning: Story = {
|
|
|
113
113
|
</Token>
|
|
114
114
|
),
|
|
115
115
|
};
|
|
116
|
+
|
|
117
|
+
export const IsGenerated: Story = {
|
|
118
|
+
args: {
|
|
119
|
+
closeable: true,
|
|
120
|
+
isGenerated: true,
|
|
121
|
+
},
|
|
122
|
+
name: "Is Generated",
|
|
123
|
+
render: (args) => (
|
|
124
|
+
<Token {...args}>
|
|
125
|
+
<Icon aria-label="Keyword" size="mini" name="text-serif-solid" pr={300} />
|
|
126
|
+
<span>I was created by AI</span>
|
|
127
|
+
</Token>
|
|
128
|
+
),
|
|
129
|
+
};
|
package/src/Token.tsx
CHANGED
|
@@ -14,6 +14,7 @@ const Token = ({
|
|
|
14
14
|
qa,
|
|
15
15
|
valid = true,
|
|
16
16
|
hasWarning = false,
|
|
17
|
+
isGenerated = false,
|
|
17
18
|
disabled = false,
|
|
18
19
|
palette = "neutral",
|
|
19
20
|
innerRef = null,
|
|
@@ -28,6 +29,7 @@ const Token = ({
|
|
|
28
29
|
ref={mergeRefs(textContainer, innerRef)}
|
|
29
30
|
valid={valid}
|
|
30
31
|
hasWarning={hasWarning}
|
|
32
|
+
isGenerated={isGenerated}
|
|
31
33
|
palette={palette}
|
|
32
34
|
type={closeable || onClick ? "button" : undefined}
|
|
33
35
|
as={closeable || onClick ? "button" : "div"}
|
package/src/TokenTypes.ts
CHANGED
|
@@ -23,6 +23,9 @@ export interface TypeTokenProps
|
|
|
23
23
|
/** Indicates whether the token has a related warning */
|
|
24
24
|
hasWarning?: boolean;
|
|
25
25
|
|
|
26
|
+
/** Indicates whether the token was generated by AI */
|
|
27
|
+
isGenerated?: boolean;
|
|
28
|
+
|
|
26
29
|
/** Indicates whether the token is disabled */
|
|
27
30
|
disabled?: boolean;
|
|
28
31
|
palette?: "neutral" | "blue";
|
package/src/styles.ts
CHANGED
|
@@ -90,6 +90,19 @@ const Container = styled.button<TypeTokenProps>`
|
|
|
90
90
|
}
|
|
91
91
|
`}
|
|
92
92
|
|
|
93
|
+
${({ isGenerated, theme }) =>
|
|
94
|
+
isGenerated &&
|
|
95
|
+
`
|
|
96
|
+
background: ${theme.colors.container.background.ai_generated};
|
|
97
|
+
border: 1px solid ${theme.colors.container.border.ai_generated};
|
|
98
|
+
&:hover {
|
|
99
|
+
box-shadow: ${theme.shadows.low};
|
|
100
|
+
border: 1px solid
|
|
101
|
+
${useInteractiveColor(theme.colors.container.border.ai_generated)};
|
|
102
|
+
}
|
|
103
|
+
color: ${theme.colors.text.ai_generated};
|
|
104
|
+
`}
|
|
105
|
+
|
|
93
106
|
${COMMON}
|
|
94
107
|
`;
|
|
95
108
|
|