@sproutsocial/seeds-react-token 1.2.1 → 1.4.0
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 +22 -0
- package/dist/esm/index.js +19 -22
- package/dist/esm/index.js.map +1 -1
- package/dist/index.js +18 -21
- package/dist/index.js.map +1 -1
- package/package.json +7 -7
- package/src/styles.ts +19 -22
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[32m7.
|
|
12
|
-
[32mCJS[39m [1mdist/index.js.map [22m[32m9.
|
|
13
|
-
[32mCJS[39m ⚡️ Build success in
|
|
14
|
-
[32mESM[39m [1mdist/esm/index.js [22m[32m4.
|
|
15
|
-
[32mESM[39m [1mdist/esm/index.js.map [22m[
|
|
16
|
-
[32mESM[39m ⚡️ Build success in
|
|
11
|
+
[32mCJS[39m [1mdist/index.js [22m[32m7.34 KB[39m
|
|
12
|
+
[32mCJS[39m [1mdist/index.js.map [22m[32m9.23 KB[39m
|
|
13
|
+
[32mCJS[39m ⚡️ Build success in 244ms
|
|
14
|
+
[32mESM[39m [1mdist/esm/index.js [22m[32m4.92 KB[39m
|
|
15
|
+
[32mESM[39m [1mdist/esm/index.js.map [22m[32m9.10 KB[39m
|
|
16
|
+
[32mESM[39m ⚡️ Build success in 245ms
|
|
17
17
|
[34mDTS[39m Build start
|
|
18
|
-
[32mDTS[39m ⚡️ Build success in
|
|
18
|
+
[32mDTS[39m ⚡️ Build success in 34836ms
|
|
19
19
|
[32mDTS[39m [1mdist/index.d.ts [22m[32m1.22 KB[39m
|
|
20
20
|
[32mDTS[39m [1mdist/index.d.mts [22m[32m1.22 KB[39m
|
|
21
|
-
Done in
|
|
21
|
+
Done in 43.52s.
|
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,27 @@
|
|
|
1
1
|
# @sproutsocial/seeds-react-token
|
|
2
2
|
|
|
3
|
+
## 1.4.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- 116b126: Fix bug in Token styles
|
|
8
|
+
|
|
9
|
+
## 1.3.0
|
|
10
|
+
|
|
11
|
+
### Minor Changes
|
|
12
|
+
|
|
13
|
+
- 47580c4: Adjust theme types and add TYPE system props support to Token
|
|
14
|
+
|
|
15
|
+
### Patch Changes
|
|
16
|
+
|
|
17
|
+
- Updated dependencies [47580c4]
|
|
18
|
+
- @sproutsocial/seeds-react-theme@3.1.0
|
|
19
|
+
- @sproutsocial/seeds-react-box@1.1.4
|
|
20
|
+
- @sproutsocial/seeds-react-hooks@3.0.4
|
|
21
|
+
- @sproutsocial/seeds-react-icon@1.1.4
|
|
22
|
+
- @sproutsocial/seeds-react-mixins@4.1.3
|
|
23
|
+
- @sproutsocial/seeds-react-visually-hidden@1.0.4
|
|
24
|
+
|
|
3
25
|
## 1.2.1
|
|
4
26
|
|
|
5
27
|
### Patch Changes
|
package/dist/esm/index.js
CHANGED
|
@@ -7,7 +7,7 @@ import Icon from "@sproutsocial/seeds-react-icon";
|
|
|
7
7
|
import { VisuallyHidden } from "@sproutsocial/seeds-react-visually-hidden";
|
|
8
8
|
|
|
9
9
|
// src/styles.ts
|
|
10
|
-
import styled
|
|
10
|
+
import styled from "styled-components";
|
|
11
11
|
import { COMMON } from "@sproutsocial/seeds-react-system-props";
|
|
12
12
|
import { focusRing } from "@sproutsocial/seeds-react-mixins";
|
|
13
13
|
import { useInteractiveColor } from "@sproutsocial/seeds-react-hooks";
|
|
@@ -18,24 +18,23 @@ var Container = styled.button`
|
|
|
18
18
|
margin: 0;
|
|
19
19
|
line-height: 1;
|
|
20
20
|
outline: none;
|
|
21
|
-
|
|
22
|
-
${({ theme }) =>
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
`}
|
|
21
|
+
font-family: ${({ theme }) => theme.fontFamily};
|
|
22
|
+
font-size: ${({ theme }) => theme.fontSizes[200]};
|
|
23
|
+
line-height: 13px;
|
|
24
|
+
font-weight: ${({ theme }) => theme.fontWeights.normal};
|
|
25
|
+
border: 1px solid ${({ theme }) => theme.colors.container.border.base};
|
|
26
|
+
border-radius: ${({ theme }) => theme.radii[500]};
|
|
27
|
+
color: ${({ theme }) => theme.colors.text.body};
|
|
28
|
+
background: ${({ theme }) => theme.colors.container.background.base};
|
|
29
|
+
padding: ${({ theme }) => theme.space[200]} ${({ theme }) => theme.space[300]};
|
|
30
|
+
transition: all ${({ theme }) => theme.duration.fast}
|
|
31
|
+
${({ theme }) => theme.easing.ease_inout};
|
|
33
32
|
|
|
34
33
|
&:focus {
|
|
35
34
|
${focusRing}
|
|
36
35
|
}
|
|
37
36
|
|
|
38
|
-
${({ closeable, theme }) => closeable &&
|
|
37
|
+
${({ closeable, theme }) => closeable && `
|
|
39
38
|
cursor: pointer;
|
|
40
39
|
&:hover,
|
|
41
40
|
&:active {
|
|
@@ -45,8 +44,7 @@ var Container = styled.button`
|
|
|
45
44
|
}
|
|
46
45
|
`}
|
|
47
46
|
|
|
48
|
-
${({ theme, palette }) => palette === "blue" &&
|
|
49
|
-
color: ${theme.colors.text.body};
|
|
47
|
+
${({ theme, palette }) => palette === "blue" && `
|
|
50
48
|
background: ${theme.colors.container.background.decorative.blue};
|
|
51
49
|
border: 1px solid ${theme.colors.container.border.decorative.blue};
|
|
52
50
|
&:hover,
|
|
@@ -58,7 +56,7 @@ var Container = styled.button`
|
|
|
58
56
|
}
|
|
59
57
|
`}
|
|
60
58
|
|
|
61
|
-
${({ disabled, theme }) => disabled &&
|
|
59
|
+
${({ disabled, theme }) => disabled && `
|
|
62
60
|
opacity: 0.4;
|
|
63
61
|
cursor: not-allowed;
|
|
64
62
|
&:hover,
|
|
@@ -68,7 +66,7 @@ var Container = styled.button`
|
|
|
68
66
|
}
|
|
69
67
|
`}
|
|
70
68
|
|
|
71
|
-
${({ valid, theme }) => !valid &&
|
|
69
|
+
${({ valid, theme }) => !valid && `
|
|
72
70
|
color: ${theme.colors.text.error};
|
|
73
71
|
background: ${theme.colors.container.background.error};
|
|
74
72
|
border: 1px solid ${theme.colors.container.border.error};
|
|
@@ -79,10 +77,7 @@ var Container = styled.button`
|
|
|
79
77
|
}
|
|
80
78
|
`}
|
|
81
79
|
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
${({ hasWarning, theme }) => hasWarning && css`
|
|
85
|
-
color: ${theme.colors.text.body};
|
|
80
|
+
${({ hasWarning, theme }) => hasWarning && `
|
|
86
81
|
background: ${theme.colors.container.background.warning};
|
|
87
82
|
border: 1px solid ${theme.colors.container.border.warning};
|
|
88
83
|
&:hover {
|
|
@@ -91,6 +86,8 @@ var Container = styled.button`
|
|
|
91
86
|
${useInteractiveColor(theme.colors.container.border.warning)};
|
|
92
87
|
}
|
|
93
88
|
`}
|
|
89
|
+
|
|
90
|
+
${COMMON}
|
|
94
91
|
`;
|
|
95
92
|
var styles_default = Container;
|
|
96
93
|
|
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
|
|
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":[]}
|
package/dist/index.js
CHANGED
|
@@ -55,24 +55,23 @@ var Container = import_styled_components.default.button`
|
|
|
55
55
|
margin: 0;
|
|
56
56
|
line-height: 1;
|
|
57
57
|
outline: none;
|
|
58
|
-
|
|
59
|
-
${({ theme }) =>
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
`}
|
|
58
|
+
font-family: ${({ theme }) => theme.fontFamily};
|
|
59
|
+
font-size: ${({ theme }) => theme.fontSizes[200]};
|
|
60
|
+
line-height: 13px;
|
|
61
|
+
font-weight: ${({ theme }) => theme.fontWeights.normal};
|
|
62
|
+
border: 1px solid ${({ theme }) => theme.colors.container.border.base};
|
|
63
|
+
border-radius: ${({ theme }) => theme.radii[500]};
|
|
64
|
+
color: ${({ theme }) => theme.colors.text.body};
|
|
65
|
+
background: ${({ theme }) => theme.colors.container.background.base};
|
|
66
|
+
padding: ${({ theme }) => theme.space[200]} ${({ theme }) => theme.space[300]};
|
|
67
|
+
transition: all ${({ theme }) => theme.duration.fast}
|
|
68
|
+
${({ theme }) => theme.easing.ease_inout};
|
|
70
69
|
|
|
71
70
|
&:focus {
|
|
72
71
|
${import_seeds_react_mixins.focusRing}
|
|
73
72
|
}
|
|
74
73
|
|
|
75
|
-
${({ closeable, theme }) => closeable &&
|
|
74
|
+
${({ closeable, theme }) => closeable && `
|
|
76
75
|
cursor: pointer;
|
|
77
76
|
&:hover,
|
|
78
77
|
&:active {
|
|
@@ -82,8 +81,7 @@ var Container = import_styled_components.default.button`
|
|
|
82
81
|
}
|
|
83
82
|
`}
|
|
84
83
|
|
|
85
|
-
${({ theme, palette }) => palette === "blue" &&
|
|
86
|
-
color: ${theme.colors.text.body};
|
|
84
|
+
${({ theme, palette }) => palette === "blue" && `
|
|
87
85
|
background: ${theme.colors.container.background.decorative.blue};
|
|
88
86
|
border: 1px solid ${theme.colors.container.border.decorative.blue};
|
|
89
87
|
&:hover,
|
|
@@ -95,7 +93,7 @@ var Container = import_styled_components.default.button`
|
|
|
95
93
|
}
|
|
96
94
|
`}
|
|
97
95
|
|
|
98
|
-
${({ disabled, theme }) => disabled &&
|
|
96
|
+
${({ disabled, theme }) => disabled && `
|
|
99
97
|
opacity: 0.4;
|
|
100
98
|
cursor: not-allowed;
|
|
101
99
|
&:hover,
|
|
@@ -105,7 +103,7 @@ var Container = import_styled_components.default.button`
|
|
|
105
103
|
}
|
|
106
104
|
`}
|
|
107
105
|
|
|
108
|
-
${({ valid, theme }) => !valid &&
|
|
106
|
+
${({ valid, theme }) => !valid && `
|
|
109
107
|
color: ${theme.colors.text.error};
|
|
110
108
|
background: ${theme.colors.container.background.error};
|
|
111
109
|
border: 1px solid ${theme.colors.container.border.error};
|
|
@@ -116,10 +114,7 @@ var Container = import_styled_components.default.button`
|
|
|
116
114
|
}
|
|
117
115
|
`}
|
|
118
116
|
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
${({ hasWarning, theme }) => hasWarning && import_styled_components.css`
|
|
122
|
-
color: ${theme.colors.text.body};
|
|
117
|
+
${({ hasWarning, theme }) => hasWarning && `
|
|
123
118
|
background: ${theme.colors.container.background.warning};
|
|
124
119
|
border: 1px solid ${theme.colors.container.border.warning};
|
|
125
120
|
&:hover {
|
|
@@ -128,6 +123,8 @@ var Container = import_styled_components.default.button`
|
|
|
128
123
|
${(0, import_seeds_react_hooks.useInteractiveColor)(theme.colors.container.border.warning)};
|
|
129
124
|
}
|
|
130
125
|
`}
|
|
126
|
+
|
|
127
|
+
${import_seeds_react_system_props.COMMON}
|
|
131
128
|
`;
|
|
132
129
|
var styles_default = Container;
|
|
133
130
|
|
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
|
|
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"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sproutsocial/seeds-react-token",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.4.0",
|
|
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": "^3.0
|
|
21
|
+
"@sproutsocial/seeds-react-theme": "^3.1.0",
|
|
22
22
|
"@sproutsocial/seeds-react-system-props": "^3.0.1",
|
|
23
|
-
"@sproutsocial/seeds-react-box": "^1.1.
|
|
24
|
-
"@sproutsocial/seeds-react-icon": "^1.1.
|
|
25
|
-
"@sproutsocial/seeds-react-visually-hidden": "^1.0.
|
|
26
|
-
"@sproutsocial/seeds-react-hooks": "^3.0.
|
|
23
|
+
"@sproutsocial/seeds-react-box": "^1.1.4",
|
|
24
|
+
"@sproutsocial/seeds-react-icon": "^1.1.4",
|
|
25
|
+
"@sproutsocial/seeds-react-visually-hidden": "^1.0.4",
|
|
26
|
+
"@sproutsocial/seeds-react-hooks": "^3.0.4",
|
|
27
27
|
"@sproutsocial/seeds-react-utilities": "^4.2.0",
|
|
28
|
-
"@sproutsocial/seeds-react-mixins": "^4.1.
|
|
28
|
+
"@sproutsocial/seeds-react-mixins": "^4.1.3"
|
|
29
29
|
},
|
|
30
30
|
"devDependencies": {
|
|
31
31
|
"@types/react": "^18.0.0",
|
package/src/styles.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import styled
|
|
1
|
+
import styled from "styled-components";
|
|
2
2
|
import { COMMON } from "@sproutsocial/seeds-react-system-props";
|
|
3
3
|
import { focusRing } from "@sproutsocial/seeds-react-mixins";
|
|
4
4
|
import { useInteractiveColor } from "@sproutsocial/seeds-react-hooks";
|
|
@@ -11,18 +11,17 @@ const Container = styled.button<TypeTokenProps>`
|
|
|
11
11
|
margin: 0;
|
|
12
12
|
line-height: 1;
|
|
13
13
|
outline: none;
|
|
14
|
-
|
|
15
|
-
${({ theme }) =>
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
`}
|
|
14
|
+
font-family: ${({ theme }) => theme.fontFamily};
|
|
15
|
+
font-size: ${({ theme }) => theme.fontSizes[200]};
|
|
16
|
+
line-height: 13px;
|
|
17
|
+
font-weight: ${({ theme }) => theme.fontWeights.normal};
|
|
18
|
+
border: 1px solid ${({ theme }) => theme.colors.container.border.base};
|
|
19
|
+
border-radius: ${({ theme }) => theme.radii[500]};
|
|
20
|
+
color: ${({ theme }) => theme.colors.text.body};
|
|
21
|
+
background: ${({ theme }) => theme.colors.container.background.base};
|
|
22
|
+
padding: ${({ theme }) => theme.space[200]} ${({ theme }) => theme.space[300]};
|
|
23
|
+
transition: all ${({ theme }) => theme.duration.fast}
|
|
24
|
+
${({ theme }) => theme.easing.ease_inout};
|
|
26
25
|
|
|
27
26
|
&:focus {
|
|
28
27
|
${focusRing}
|
|
@@ -30,7 +29,7 @@ const Container = styled.button<TypeTokenProps>`
|
|
|
30
29
|
|
|
31
30
|
${({ closeable, theme }) =>
|
|
32
31
|
closeable &&
|
|
33
|
-
|
|
32
|
+
`
|
|
34
33
|
cursor: pointer;
|
|
35
34
|
&:hover,
|
|
36
35
|
&:active {
|
|
@@ -42,8 +41,7 @@ const Container = styled.button<TypeTokenProps>`
|
|
|
42
41
|
|
|
43
42
|
${({ theme, palette }) =>
|
|
44
43
|
palette === "blue" &&
|
|
45
|
-
|
|
46
|
-
color: ${theme.colors.text.body};
|
|
44
|
+
`
|
|
47
45
|
background: ${theme.colors.container.background.decorative.blue};
|
|
48
46
|
border: 1px solid ${theme.colors.container.border.decorative.blue};
|
|
49
47
|
&:hover,
|
|
@@ -57,7 +55,7 @@ const Container = styled.button<TypeTokenProps>`
|
|
|
57
55
|
|
|
58
56
|
${({ disabled, theme }) =>
|
|
59
57
|
disabled &&
|
|
60
|
-
|
|
58
|
+
`
|
|
61
59
|
opacity: 0.4;
|
|
62
60
|
cursor: not-allowed;
|
|
63
61
|
&:hover,
|
|
@@ -69,7 +67,7 @@ const Container = styled.button<TypeTokenProps>`
|
|
|
69
67
|
|
|
70
68
|
${({ valid, theme }) =>
|
|
71
69
|
!valid &&
|
|
72
|
-
|
|
70
|
+
`
|
|
73
71
|
color: ${theme.colors.text.error};
|
|
74
72
|
background: ${theme.colors.container.background.error};
|
|
75
73
|
border: 1px solid ${theme.colors.container.border.error};
|
|
@@ -80,12 +78,9 @@ const Container = styled.button<TypeTokenProps>`
|
|
|
80
78
|
}
|
|
81
79
|
`}
|
|
82
80
|
|
|
83
|
-
${COMMON}
|
|
84
|
-
|
|
85
81
|
${({ hasWarning, theme }) =>
|
|
86
82
|
hasWarning &&
|
|
87
|
-
|
|
88
|
-
color: ${theme.colors.text.body};
|
|
83
|
+
`
|
|
89
84
|
background: ${theme.colors.container.background.warning};
|
|
90
85
|
border: 1px solid ${theme.colors.container.border.warning};
|
|
91
86
|
&:hover {
|
|
@@ -94,6 +89,8 @@ const Container = styled.button<TypeTokenProps>`
|
|
|
94
89
|
${useInteractiveColor(theme.colors.container.border.warning)};
|
|
95
90
|
}
|
|
96
91
|
`}
|
|
92
|
+
|
|
93
|
+
${COMMON}
|
|
97
94
|
`;
|
|
98
95
|
|
|
99
96
|
export default Container;
|