@sproutsocial/seeds-react-token 1.3.0 → 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 +7 -7
- package/CHANGELOG.md +6 -0
- package/dist/esm/index.js +20 -24
- package/dist/esm/index.js.map +1 -1
- package/dist/index.js +18 -22
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/src/styles.ts +20 -24
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
|
|
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
14
|
[32mESM[39m [1mdist/esm/index.js [22m[32m4.92 KB[39m
|
|
15
|
-
[32mESM[39m [1mdist/esm/index.js.map [22m[32m9.
|
|
16
|
-
[32mESM[39m ⚡️ Build success in
|
|
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
package/dist/esm/index.js
CHANGED
|
@@ -7,8 +7,8 @@ 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
|
|
11
|
-
import { COMMON
|
|
10
|
+
import styled from "styled-components";
|
|
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";
|
|
14
14
|
var Container = styled.button`
|
|
@@ -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,11 +77,7 @@ var Container = styled.button`
|
|
|
79
77
|
}
|
|
80
78
|
`}
|
|
81
79
|
|
|
82
|
-
|
|
83
|
-
${TYPOGRAPHY}
|
|
84
|
-
|
|
85
|
-
${({ hasWarning, theme }) => hasWarning && css`
|
|
86
|
-
color: ${theme.colors.text.body};
|
|
80
|
+
${({ hasWarning, theme }) => hasWarning && `
|
|
87
81
|
background: ${theme.colors.container.background.warning};
|
|
88
82
|
border: 1px solid ${theme.colors.container.border.warning};
|
|
89
83
|
&:hover {
|
|
@@ -92,6 +86,8 @@ var Container = styled.button`
|
|
|
92
86
|
${useInteractiveColor(theme.colors.container.border.warning)};
|
|
93
87
|
}
|
|
94
88
|
`}
|
|
89
|
+
|
|
90
|
+
${COMMON}
|
|
95
91
|
`;
|
|
96
92
|
var styles_default = Container;
|
|
97
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":";AAAA,OAAuB;AACvB,SAAS,iBAAiB;AAC1B,SAAS,sBAAsB;AAC/B,OAAO,SAAS;AAChB,OAAO,UAAU;AACjB,SAAS,sBAAsB;;;ACL/B,OAAO,YAAY;AACnB,SAAS,cAAc;AACvB,SAAS,iBAAiB;AAC1B,SAAS,2BAA2B;AAGpC,IAAM,YAAY,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAOR,CAAC,EAAE,MAAM,MAAM,MAAM,UAAU;AAAA,eACjC,CAAC,EAAE,MAAM,MAAM,MAAM,UAAU,GAAG,CAAC;AAAA;AAAA,iBAEjC,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,MAAM;AAAA,sBAClC,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,UAAU,OAAO,IAAI;AAAA,mBACpD,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA,WACvC,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,KAAK,IAAI;AAAA,gBAChC,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,UAAU,WAAW,IAAI;AAAA,aACxD,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,GAAG,CAAC,IAAI,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA,oBAC3D,CAAC,EAAE,MAAM,MAAM,MAAM,SAAS,IAAI;AAAA,MAChD,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,UAAU;AAAA;AAAA;AAAA,MAGtC,SAAS;AAAA;AAAA;AAAA,IAGX,CAAC,EAAE,WAAW,MAAM,MACpB,aACA;AAAA;AAAA;AAAA;AAAA,sBAIkB,MAAM,QAAQ,GAAG;AAAA;AAAA,YAE3B,oBAAoB,MAAM,OAAO,UAAU,OAAO,IAAI,CAAC;AAAA;AAAA,KAE9D;AAAA;AAAA,IAED,CAAC,EAAE,OAAO,QAAQ,MAClB,YAAY,UACZ;AAAA,oBACgB,MAAM,OAAO,UAAU,WAAW,WAAW,IAAI;AAAA,0BAC3C,MAAM,OAAO,UAAU,OAAO,WAAW,IAAI;AAAA;AAAA;AAAA;AAAA,sBAIjD,MAAM,QAAQ,GAAG;AAAA;AAAA,YAE3B,oBAAoB,MAAM,OAAO,UAAU,OAAO,WAAW,IAAI,CAAC;AAAA;AAAA,KAEzE;AAAA;AAAA,IAED,CAAC,EAAE,UAAU,MAAM,MACnB,YACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,4BAMwB,MAAM,OAAO,UAAU,OAAO,IAAI;AAAA;AAAA,KAEzD;AAAA;AAAA,IAED,CAAC,EAAE,OAAO,MAAM,MAChB,CAAC,SACD;AAAA,eACW,MAAM,OAAO,KAAK,KAAK;AAAA,oBAClB,MAAM,OAAO,UAAU,WAAW,KAAK;AAAA,0BACjC,MAAM,OAAO,UAAU,OAAO,KAAK;AAAA;AAAA,sBAEvC,MAAM,QAAQ,GAAG;AAAA;AAAA,YAE3B,oBAAoB,MAAM,OAAO,UAAU,OAAO,KAAK,CAAC;AAAA;AAAA,KAE/D;AAAA;AAAA,MAEC,CAAC,EAAE,YAAY,MAAM,MACvB,cACA;AAAA,oBACgB,MAAM,OAAO,UAAU,WAAW,OAAO;AAAA,0BACnC,MAAM,OAAO,UAAU,OAAO,OAAO;AAAA;AAAA,sBAEzC,MAAM,QAAQ,GAAG;AAAA;AAAA,YAE3B,oBAAoB,MAAM,OAAO,UAAU,OAAO,OAAO,CAAC;AAAA;AAAA,KAEjE;AAAA;AAAA,GAEF,MAAM;AAAA;AAGT,IAAO,iBAAQ;;;ADnDP,mBACE,KADF;AAnCR,IAAM,QAAQ,CAAC;AAAA,EACb;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,aAAa;AAAA,EACb,WAAW;AAAA,EACX,UAAU;AAAA,EACV,WAAW;AAAA,EACX,GAAG;AACL,MAAsB;AACpB,QAAM,gBAAgB,eAAe,EAAE;AAEvC,SACE;AAAA,IAAC;AAAA;AAAA,MAGC,KAAK,UAAU,eAAe,QAAQ;AAAA,MACtC;AAAA,MACA;AAAA,MACA;AAAA,MACA,MAAM,aAAa,UAAU,WAAW;AAAA,MACxC,IAAI,aAAa,UAAU,WAAW;AAAA,MACtC,WAAW,aAAa,CAAC,CAAC;AAAA,MAC1B;AAAA,MACA;AAAA,MACA,iBAAe,cAAc;AAAA,MAC7B,6BAA2B,cAAc;AAAA,MACzC,yBAAuB,UAAU;AAAA,MACjC,4BAA0B,aAAa;AAAA,MACtC,GAAG;AAAA,MACH,GAAG;AAAA,MAEH;AAAA,SAAC,SACA,iCACE;AAAA,8BAAC,kBAAe,IAAG,OAAM,MAAK,UAAS,sCAEvC;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,eAAW;AAAA,cACX,IAAI;AAAA,cACJ,MAAK;AAAA,cACL,MAAK;AAAA;AAAA,UACP;AAAA,UACA,oBAAC,kBAAe,qBAAO;AAAA,WACzB;AAAA,QAED,YACC,qBAAC,OAAI,SAAQ,QAAO,YAAW,UAAS,gBAAe,iBACrD;AAAA,8BAAC,OAAI,IAAG,QAAO,SAAQ,QAAO,YAAW,UACtC,UACH;AAAA,UACA,oBAAC,QAAK,eAAW,MAAC,IAAI,KAAK,MAAK,WAAU,MAAK,QAAO;AAAA,WACxD,IAEA;AAAA;AAAA;AAAA,EAEJ;AAEJ;AAEA,IAAO,gBAAQ;;;AEvEf,OAAuB;;;ACEvB,IAAO,gBAAQ;","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,11 +114,7 @@ var Container = import_styled_components.default.button`
|
|
|
116
114
|
}
|
|
117
115
|
`}
|
|
118
116
|
|
|
119
|
-
|
|
120
|
-
${import_seeds_react_system_props.TYPOGRAPHY}
|
|
121
|
-
|
|
122
|
-
${({ hasWarning, theme }) => hasWarning && import_styled_components.css`
|
|
123
|
-
color: ${theme.colors.text.body};
|
|
117
|
+
${({ hasWarning, theme }) => hasWarning && `
|
|
124
118
|
background: ${theme.colors.container.background.warning};
|
|
125
119
|
border: 1px solid ${theme.colors.container.border.warning};
|
|
126
120
|
&:hover {
|
|
@@ -129,6 +123,8 @@ var Container = import_styled_components.default.button`
|
|
|
129
123
|
${(0, import_seeds_react_hooks.useInteractiveColor)(theme.colors.container.border.warning)};
|
|
130
124
|
}
|
|
131
125
|
`}
|
|
126
|
+
|
|
127
|
+
${import_seeds_react_system_props.COMMON}
|
|
132
128
|
`;
|
|
133
129
|
var styles_default = Container;
|
|
134
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
package/src/styles.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import styled
|
|
2
|
-
import { COMMON
|
|
1
|
+
import styled from "styled-components";
|
|
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";
|
|
5
5
|
import type { TypeTokenProps } from "./TokenTypes";
|
|
@@ -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,13 +78,9 @@ const Container = styled.button<TypeTokenProps>`
|
|
|
80
78
|
}
|
|
81
79
|
`}
|
|
82
80
|
|
|
83
|
-
${COMMON}
|
|
84
|
-
${TYPOGRAPHY}
|
|
85
|
-
|
|
86
81
|
${({ hasWarning, theme }) =>
|
|
87
82
|
hasWarning &&
|
|
88
|
-
|
|
89
|
-
color: ${theme.colors.text.body};
|
|
83
|
+
`
|
|
90
84
|
background: ${theme.colors.container.background.warning};
|
|
91
85
|
border: 1px solid ${theme.colors.container.border.warning};
|
|
92
86
|
&:hover {
|
|
@@ -95,6 +89,8 @@ const Container = styled.button<TypeTokenProps>`
|
|
|
95
89
|
${useInteractiveColor(theme.colors.container.border.warning)};
|
|
96
90
|
}
|
|
97
91
|
`}
|
|
92
|
+
|
|
93
|
+
${COMMON}
|
|
98
94
|
`;
|
|
99
95
|
|
|
100
96
|
export default Container;
|