@sproutsocial/seeds-react-token 1.1.2 → 1.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.turbo/turbo-build.log +19 -19
- package/CHANGELOG.md +22 -0
- package/dist/esm/index.js.map +1 -1
- package/dist/index.d.mts +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js.map +1 -1
- package/package.json +9 -9
- package/src/TokenTypes.ts +1 -1
- package/tsconfig.json +7 -1
package/.turbo/turbo-build.log
CHANGED
|
@@ -1,21 +1,21 @@
|
|
|
1
1
|
yarn run v1.22.22
|
|
2
2
|
$ tsup --dts
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
Done in
|
|
3
|
+
[34mCLI[39m Building entry: src/index.ts
|
|
4
|
+
[34mCLI[39m Using tsconfig: tsconfig.json
|
|
5
|
+
[34mCLI[39m tsup v8.5.0
|
|
6
|
+
[34mCLI[39m Using tsup config: /home/runner/work/seeds/seeds/seeds-react/seeds-react-token/tsup.config.ts
|
|
7
|
+
[34mCLI[39m Target: es2022
|
|
8
|
+
[34mCLI[39m Cleaning output folder
|
|
9
|
+
[34mCJS[39m Build start
|
|
10
|
+
[34mESM[39m Build start
|
|
11
|
+
[32mCJS[39m [1mdist/index.js [22m[32m7.45 KB[39m
|
|
12
|
+
[32mCJS[39m [1mdist/index.js.map [22m[32m9.09 KB[39m
|
|
13
|
+
[32mCJS[39m ⚡️ Build success in 202ms
|
|
14
|
+
[32mESM[39m [1mdist/esm/index.js [22m[32m4.89 KB[39m
|
|
15
|
+
[32mESM[39m [1mdist/esm/index.js.map [22m[32m8.96 KB[39m
|
|
16
|
+
[32mESM[39m ⚡️ Build success in 217ms
|
|
17
|
+
[34mDTS[39m Build start
|
|
18
|
+
[32mDTS[39m ⚡️ Build success in 42490ms
|
|
19
|
+
[32mDTS[39m [1mdist/index.d.ts [22m[32m1.22 KB[39m
|
|
20
|
+
[32mDTS[39m [1mdist/index.d.mts [22m[32m1.22 KB[39m
|
|
21
|
+
Done in 48.90s.
|
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,27 @@
|
|
|
1
1
|
# @sproutsocial/seeds-react-token
|
|
2
2
|
|
|
3
|
+
## 1.2.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- Updated dependencies [22e1111]
|
|
8
|
+
- @sproutsocial/seeds-react-theme@3.0.1
|
|
9
|
+
- @sproutsocial/seeds-react-box@1.1.3
|
|
10
|
+
- @sproutsocial/seeds-react-visually-hidden@1.0.3
|
|
11
|
+
- @sproutsocial/seeds-react-hooks@3.0.3
|
|
12
|
+
- @sproutsocial/seeds-react-icon@1.1.3
|
|
13
|
+
- @sproutsocial/seeds-react-mixins@4.1.2
|
|
14
|
+
|
|
15
|
+
## 1.2.0
|
|
16
|
+
|
|
17
|
+
### Minor Changes
|
|
18
|
+
|
|
19
|
+
- f78ba19: Simplify onClick event types
|
|
20
|
+
|
|
21
|
+
### Patch Changes
|
|
22
|
+
|
|
23
|
+
- 1cf5097: Fix the minimum @sproutsocial/seeds-react-utilities version to 4.2.0
|
|
24
|
+
|
|
3
25
|
## 1.1.2
|
|
4
26
|
|
|
5
27
|
### Patch Changes
|
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, { css } from \"styled-components\";\nimport { COMMON } from \"@sproutsocial/seeds-react-system-props\";\nimport { focusRing } from \"@sproutsocial/seeds-react-mixins\";\nimport { useInteractiveColor } from \"@sproutsocial/seeds-react-hooks\";\nimport type { TypeTokenProps } from \"./TokenTypes\";\n\nconst Container = styled.button<TypeTokenProps>`\n position: relative;\n display: inline-flex;\n align-items: center;\n margin: 0;\n line-height: 1;\n outline: none;\n /* Theme Properties */\n ${({ theme }) => css`\n ${theme.typography[200]}\n font-family: ${theme.fontFamily};\n font-weight: ${theme.fontWeights.normal};\n border: 1px solid ${theme.colors.container.border.base};\n border-radius: ${theme.radii[500]};\n color: ${theme.colors.text.body};\n background: ${theme.colors.container.background.base};\n padding: ${theme.space[200]} ${theme.space[300]};\n transition: all ${theme.duration.fast} ${theme.easing.ease_inout};\n `}\n\n &:focus {\n ${focusRing}\n }\n\n ${({ closeable, theme }) =>\n closeable &&\n css`\n cursor: pointer;\n &:hover,\n &:active {\n box-shadow: ${theme.shadows.low};\n border: 1px solid\n ${useInteractiveColor(theme.colors.container.border.base)};\n }\n `}\n\n ${({ theme, palette }) =>\n palette === \"blue\" &&\n css`\n color: ${theme.colors.text.body};\n background: ${theme.colors.container.background.decorative.blue};\n border: 1px solid ${theme.colors.container.border.decorative.blue};\n &:hover,\n &:active {\n cursor: pointer;\n box-shadow: ${theme.shadows.low};\n border: 1px solid\n ${useInteractiveColor(theme.colors.container.border.decorative.blue)};\n }\n `}\n\n ${({ disabled, theme }) =>\n disabled &&\n css`\n opacity: 0.4;\n cursor: not-allowed;\n &:hover,\n &:active {\n box-shadow: none;\n border: 1px solid ${theme.colors.container.border.base};\n }\n `}\n \n ${({ valid, theme }) =>\n !valid &&\n css`\n color: ${theme.colors.text.error};\n background: ${theme.colors.container.background.error};\n border: 1px solid ${theme.colors.container.border.error};\n &:hover {\n box-shadow: ${theme.shadows.low};\n border: 1px solid\n ${useInteractiveColor(theme.colors.container.border.error)};\n }\n `}\n\n ${COMMON}\n\n ${({ hasWarning, theme }) =>\n hasWarning &&\n css`\n color: ${theme.colors.text.body};\n background: ${theme.colors.container.background.warning};\n border: 1px solid ${theme.colors.container.border.warning};\n &:hover {\n box-shadow: ${theme.shadows.low};\n border: 1px solid\n ${useInteractiveColor(theme.colors.container.border.warning)};\n }\n `}\n`;\n\nexport default Container;\n","import * as React from \"react\";\nimport type {\n TypeStyledComponentsCommonProps,\n TypeSystemCommonProps,\n} from \"@sproutsocial/seeds-react-system-props\";\n\ntype TypeQaProps = object;\n\nexport interface TypeTokenProps\n extends TypeStyledComponentsCommonProps,\n TypeSystemCommonProps,\n Omit<React.ComponentPropsWithoutRef<\"button\">, \"color\"> {\n onClick
|
|
1
|
+
{"version":3,"sources":["../../src/Token.tsx","../../src/styles.ts","../../src/TokenTypes.ts","../../src/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport { mergeRefs } from \"@sproutsocial/seeds-react-utilities\";\nimport { useTextContent } from \"@sproutsocial/seeds-react-hooks\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport Icon from \"@sproutsocial/seeds-react-icon\";\nimport { VisuallyHidden } from \"@sproutsocial/seeds-react-visually-hidden\";\nimport Container from \"./styles\";\nimport type { TypeTokenProps } from \"./TokenTypes\";\n\nconst Token = ({\n children,\n closeable = true,\n onClick,\n qa,\n valid = true,\n hasWarning = false,\n disabled = false,\n palette = \"neutral\",\n innerRef = null,\n ...rest\n}: TypeTokenProps) => {\n const textContainer = useTextContent(\"\");\n\n return (\n <Container\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n //@ts-ignore some legacy ref type mismatch between divs\n ref={mergeRefs(textContainer, innerRef)}\n valid={valid}\n hasWarning={hasWarning}\n palette={palette}\n type={closeable || onClick ? \"button\" : undefined}\n as={closeable || onClick ? \"button\" : \"div\"}\n closeable={closeable || !!onClick}\n disabled={disabled}\n onClick={onClick}\n data-qa-token={textContainer.current}\n data-qa-token-iscloseable={closeable === true}\n data-qa-token-isvalid={valid === true}\n data-qa-token-isdisabled={disabled === true}\n {...qa}\n {...rest}\n >\n {!valid && (\n <>\n <VisuallyHidden as=\"div\" role=\"status\">\n This is an invalid token\n </VisuallyHidden>\n <Icon\n aria-hidden\n pr={300}\n name=\"circle-exclamation-solid\"\n size=\"mini\"\n />\n <VisuallyHidden>Invalid</VisuallyHidden>\n </>\n )}\n {closeable ? (\n <Box display=\"flex\" alignItems=\"center\" justifyContent=\"space-between\">\n <Box as=\"span\" display=\"flex\" alignItems=\"center\">\n {children}\n </Box>\n <Icon aria-hidden pl={300} name=\"x-solid\" size=\"mini\" />\n </Box>\n ) : (\n children\n )}\n </Container>\n );\n};\n\nexport default Token;\n","import styled, { css } from \"styled-components\";\nimport { COMMON } from \"@sproutsocial/seeds-react-system-props\";\nimport { focusRing } from \"@sproutsocial/seeds-react-mixins\";\nimport { useInteractiveColor } from \"@sproutsocial/seeds-react-hooks\";\nimport type { TypeTokenProps } from \"./TokenTypes\";\n\nconst Container = styled.button<TypeTokenProps>`\n position: relative;\n display: inline-flex;\n align-items: center;\n margin: 0;\n line-height: 1;\n outline: none;\n /* Theme Properties */\n ${({ theme }) => css`\n ${theme.typography[200]}\n font-family: ${theme.fontFamily};\n font-weight: ${theme.fontWeights.normal};\n border: 1px solid ${theme.colors.container.border.base};\n border-radius: ${theme.radii[500]};\n color: ${theme.colors.text.body};\n background: ${theme.colors.container.background.base};\n padding: ${theme.space[200]} ${theme.space[300]};\n transition: all ${theme.duration.fast} ${theme.easing.ease_inout};\n `}\n\n &:focus {\n ${focusRing}\n }\n\n ${({ closeable, theme }) =>\n closeable &&\n css`\n cursor: pointer;\n &:hover,\n &:active {\n box-shadow: ${theme.shadows.low};\n border: 1px solid\n ${useInteractiveColor(theme.colors.container.border.base)};\n }\n `}\n\n ${({ theme, palette }) =>\n palette === \"blue\" &&\n css`\n color: ${theme.colors.text.body};\n background: ${theme.colors.container.background.decorative.blue};\n border: 1px solid ${theme.colors.container.border.decorative.blue};\n &:hover,\n &:active {\n cursor: pointer;\n box-shadow: ${theme.shadows.low};\n border: 1px solid\n ${useInteractiveColor(theme.colors.container.border.decorative.blue)};\n }\n `}\n\n ${({ disabled, theme }) =>\n disabled &&\n css`\n opacity: 0.4;\n cursor: not-allowed;\n &:hover,\n &:active {\n box-shadow: none;\n border: 1px solid ${theme.colors.container.border.base};\n }\n `}\n \n ${({ valid, theme }) =>\n !valid &&\n css`\n color: ${theme.colors.text.error};\n background: ${theme.colors.container.background.error};\n border: 1px solid ${theme.colors.container.border.error};\n &:hover {\n box-shadow: ${theme.shadows.low};\n border: 1px solid\n ${useInteractiveColor(theme.colors.container.border.error)};\n }\n `}\n\n ${COMMON}\n\n ${({ hasWarning, theme }) =>\n hasWarning &&\n css`\n color: ${theme.colors.text.body};\n background: ${theme.colors.container.background.warning};\n border: 1px solid ${theme.colors.container.border.warning};\n &:hover {\n box-shadow: ${theme.shadows.low};\n border: 1px solid\n ${useInteractiveColor(theme.colors.container.border.warning)};\n }\n `}\n`;\n\nexport default Container;\n","import * as React from \"react\";\nimport type {\n TypeStyledComponentsCommonProps,\n TypeSystemCommonProps,\n} from \"@sproutsocial/seeds-react-system-props\";\n\ntype TypeQaProps = object;\n\nexport interface TypeTokenProps\n extends TypeStyledComponentsCommonProps,\n TypeSystemCommonProps,\n Omit<React.ComponentPropsWithoutRef<\"button\">, \"color\"> {\n onClick?: 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.d.mts
CHANGED
|
@@ -4,7 +4,7 @@ import { TypeStyledComponentsCommonProps, TypeSystemCommonProps } from '@sprouts
|
|
|
4
4
|
|
|
5
5
|
type TypeQaProps = object;
|
|
6
6
|
interface TypeTokenProps extends TypeStyledComponentsCommonProps, TypeSystemCommonProps, Omit<React.ComponentPropsWithoutRef<"button">, "color"> {
|
|
7
|
-
onClick
|
|
7
|
+
onClick?: React.EventHandler<React.SyntheticEvent>;
|
|
8
8
|
children: React.ReactNode;
|
|
9
9
|
qa?: TypeQaProps;
|
|
10
10
|
/** Show the close icon in the token. Can be used with or without icon prop */
|
package/dist/index.d.ts
CHANGED
|
@@ -4,7 +4,7 @@ import { TypeStyledComponentsCommonProps, TypeSystemCommonProps } from '@sprouts
|
|
|
4
4
|
|
|
5
5
|
type TypeQaProps = object;
|
|
6
6
|
interface TypeTokenProps extends TypeStyledComponentsCommonProps, TypeSystemCommonProps, Omit<React.ComponentPropsWithoutRef<"button">, "color"> {
|
|
7
|
-
onClick
|
|
7
|
+
onClick?: React.EventHandler<React.SyntheticEvent>;
|
|
8
8
|
children: React.ReactNode;
|
|
9
9
|
qa?: TypeQaProps;
|
|
10
10
|
/** Show the close icon in the token. Can be used with or without icon prop */
|
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, { css } from \"styled-components\";\nimport { COMMON } from \"@sproutsocial/seeds-react-system-props\";\nimport { focusRing } from \"@sproutsocial/seeds-react-mixins\";\nimport { useInteractiveColor } from \"@sproutsocial/seeds-react-hooks\";\nimport type { TypeTokenProps } from \"./TokenTypes\";\n\nconst Container = styled.button<TypeTokenProps>`\n position: relative;\n display: inline-flex;\n align-items: center;\n margin: 0;\n line-height: 1;\n outline: none;\n /* Theme Properties */\n ${({ theme }) => css`\n ${theme.typography[200]}\n font-family: ${theme.fontFamily};\n font-weight: ${theme.fontWeights.normal};\n border: 1px solid ${theme.colors.container.border.base};\n border-radius: ${theme.radii[500]};\n color: ${theme.colors.text.body};\n background: ${theme.colors.container.background.base};\n padding: ${theme.space[200]} ${theme.space[300]};\n transition: all ${theme.duration.fast} ${theme.easing.ease_inout};\n `}\n\n &:focus {\n ${focusRing}\n }\n\n ${({ closeable, theme }) =>\n closeable &&\n css`\n cursor: pointer;\n &:hover,\n &:active {\n box-shadow: ${theme.shadows.low};\n border: 1px solid\n ${useInteractiveColor(theme.colors.container.border.base)};\n }\n `}\n\n ${({ theme, palette }) =>\n palette === \"blue\" &&\n css`\n color: ${theme.colors.text.body};\n background: ${theme.colors.container.background.decorative.blue};\n border: 1px solid ${theme.colors.container.border.decorative.blue};\n &:hover,\n &:active {\n cursor: pointer;\n box-shadow: ${theme.shadows.low};\n border: 1px solid\n ${useInteractiveColor(theme.colors.container.border.decorative.blue)};\n }\n `}\n\n ${({ disabled, theme }) =>\n disabled &&\n css`\n opacity: 0.4;\n cursor: not-allowed;\n &:hover,\n &:active {\n box-shadow: none;\n border: 1px solid ${theme.colors.container.border.base};\n }\n `}\n \n ${({ valid, theme }) =>\n !valid &&\n css`\n color: ${theme.colors.text.error};\n background: ${theme.colors.container.background.error};\n border: 1px solid ${theme.colors.container.border.error};\n &:hover {\n box-shadow: ${theme.shadows.low};\n border: 1px solid\n ${useInteractiveColor(theme.colors.container.border.error)};\n }\n `}\n\n ${COMMON}\n\n ${({ hasWarning, theme }) =>\n hasWarning &&\n css`\n color: ${theme.colors.text.body};\n background: ${theme.colors.container.background.warning};\n border: 1px solid ${theme.colors.container.border.warning};\n &:hover {\n box-shadow: ${theme.shadows.low};\n border: 1px solid\n ${useInteractiveColor(theme.colors.container.border.warning)};\n }\n `}\n`;\n\nexport default Container;\n","import * as React from \"react\";\nimport type {\n TypeStyledComponentsCommonProps,\n TypeSystemCommonProps,\n} from \"@sproutsocial/seeds-react-system-props\";\n\ntype TypeQaProps = object;\n\nexport interface TypeTokenProps\n extends TypeStyledComponentsCommonProps,\n TypeSystemCommonProps,\n Omit<React.ComponentPropsWithoutRef<\"button\">, \"color\"> {\n onClick
|
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/Token.tsx","../src/styles.ts","../src/TokenTypes.ts"],"sourcesContent":["import Token from \"./Token\";\n\nexport default Token;\nexport { Token };\nexport * from \"./TokenTypes\";\n","import * as React from \"react\";\nimport { mergeRefs } from \"@sproutsocial/seeds-react-utilities\";\nimport { useTextContent } from \"@sproutsocial/seeds-react-hooks\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport Icon from \"@sproutsocial/seeds-react-icon\";\nimport { VisuallyHidden } from \"@sproutsocial/seeds-react-visually-hidden\";\nimport Container from \"./styles\";\nimport type { TypeTokenProps } from \"./TokenTypes\";\n\nconst Token = ({\n children,\n closeable = true,\n onClick,\n qa,\n valid = true,\n hasWarning = false,\n disabled = false,\n palette = \"neutral\",\n innerRef = null,\n ...rest\n}: TypeTokenProps) => {\n const textContainer = useTextContent(\"\");\n\n return (\n <Container\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n //@ts-ignore some legacy ref type mismatch between divs\n ref={mergeRefs(textContainer, innerRef)}\n valid={valid}\n hasWarning={hasWarning}\n palette={palette}\n type={closeable || onClick ? \"button\" : undefined}\n as={closeable || onClick ? \"button\" : \"div\"}\n closeable={closeable || !!onClick}\n disabled={disabled}\n onClick={onClick}\n data-qa-token={textContainer.current}\n data-qa-token-iscloseable={closeable === true}\n data-qa-token-isvalid={valid === true}\n data-qa-token-isdisabled={disabled === true}\n {...qa}\n {...rest}\n >\n {!valid && (\n <>\n <VisuallyHidden as=\"div\" role=\"status\">\n This is an invalid token\n </VisuallyHidden>\n <Icon\n aria-hidden\n pr={300}\n name=\"circle-exclamation-solid\"\n size=\"mini\"\n />\n <VisuallyHidden>Invalid</VisuallyHidden>\n </>\n )}\n {closeable ? (\n <Box display=\"flex\" alignItems=\"center\" justifyContent=\"space-between\">\n <Box as=\"span\" display=\"flex\" alignItems=\"center\">\n {children}\n </Box>\n <Icon aria-hidden pl={300} name=\"x-solid\" size=\"mini\" />\n </Box>\n ) : (\n children\n )}\n </Container>\n );\n};\n\nexport default Token;\n","import styled, { css } from \"styled-components\";\nimport { COMMON } from \"@sproutsocial/seeds-react-system-props\";\nimport { focusRing } from \"@sproutsocial/seeds-react-mixins\";\nimport { useInteractiveColor } from \"@sproutsocial/seeds-react-hooks\";\nimport type { TypeTokenProps } from \"./TokenTypes\";\n\nconst Container = styled.button<TypeTokenProps>`\n position: relative;\n display: inline-flex;\n align-items: center;\n margin: 0;\n line-height: 1;\n outline: none;\n /* Theme Properties */\n ${({ theme }) => css`\n ${theme.typography[200]}\n font-family: ${theme.fontFamily};\n font-weight: ${theme.fontWeights.normal};\n border: 1px solid ${theme.colors.container.border.base};\n border-radius: ${theme.radii[500]};\n color: ${theme.colors.text.body};\n background: ${theme.colors.container.background.base};\n padding: ${theme.space[200]} ${theme.space[300]};\n transition: all ${theme.duration.fast} ${theme.easing.ease_inout};\n `}\n\n &:focus {\n ${focusRing}\n }\n\n ${({ closeable, theme }) =>\n closeable &&\n css`\n cursor: pointer;\n &:hover,\n &:active {\n box-shadow: ${theme.shadows.low};\n border: 1px solid\n ${useInteractiveColor(theme.colors.container.border.base)};\n }\n `}\n\n ${({ theme, palette }) =>\n palette === \"blue\" &&\n css`\n color: ${theme.colors.text.body};\n background: ${theme.colors.container.background.decorative.blue};\n border: 1px solid ${theme.colors.container.border.decorative.blue};\n &:hover,\n &:active {\n cursor: pointer;\n box-shadow: ${theme.shadows.low};\n border: 1px solid\n ${useInteractiveColor(theme.colors.container.border.decorative.blue)};\n }\n `}\n\n ${({ disabled, theme }) =>\n disabled &&\n css`\n opacity: 0.4;\n cursor: not-allowed;\n &:hover,\n &:active {\n box-shadow: none;\n border: 1px solid ${theme.colors.container.border.base};\n }\n `}\n \n ${({ valid, theme }) =>\n !valid &&\n css`\n color: ${theme.colors.text.error};\n background: ${theme.colors.container.background.error};\n border: 1px solid ${theme.colors.container.border.error};\n &:hover {\n box-shadow: ${theme.shadows.low};\n border: 1px solid\n ${useInteractiveColor(theme.colors.container.border.error)};\n }\n `}\n\n ${COMMON}\n\n ${({ hasWarning, theme }) =>\n hasWarning &&\n css`\n color: ${theme.colors.text.body};\n background: ${theme.colors.container.background.warning};\n border: 1px solid ${theme.colors.container.border.warning};\n &:hover {\n box-shadow: ${theme.shadows.low};\n border: 1px solid\n ${useInteractiveColor(theme.colors.container.border.warning)};\n }\n `}\n`;\n\nexport default Container;\n","import * as React from \"react\";\nimport type {\n TypeStyledComponentsCommonProps,\n TypeSystemCommonProps,\n} from \"@sproutsocial/seeds-react-system-props\";\n\ntype TypeQaProps = object;\n\nexport interface TypeTokenProps\n extends TypeStyledComponentsCommonProps,\n TypeSystemCommonProps,\n Omit<React.ComponentPropsWithoutRef<\"button\">, \"color\"> {\n onClick?: 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.1
|
|
3
|
+
"version": "1.2.1",
|
|
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": "^
|
|
21
|
+
"@sproutsocial/seeds-react-theme": "^3.0.1",
|
|
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.
|
|
27
|
-
"@sproutsocial/seeds-react-utilities": "^4.0
|
|
28
|
-
"@sproutsocial/seeds-react-mixins": "^4.1.
|
|
23
|
+
"@sproutsocial/seeds-react-box": "^1.1.3",
|
|
24
|
+
"@sproutsocial/seeds-react-icon": "^1.1.3",
|
|
25
|
+
"@sproutsocial/seeds-react-visually-hidden": "^1.0.3",
|
|
26
|
+
"@sproutsocial/seeds-react-hooks": "^3.0.3",
|
|
27
|
+
"@sproutsocial/seeds-react-utilities": "^4.2.0",
|
|
28
|
+
"@sproutsocial/seeds-react-mixins": "^4.1.2"
|
|
29
29
|
},
|
|
30
30
|
"devDependencies": {
|
|
31
31
|
"@types/react": "^18.0.0",
|
|
@@ -33,7 +33,7 @@
|
|
|
33
33
|
"@sproutsocial/eslint-config-seeds": "*",
|
|
34
34
|
"react": "^18.0.0",
|
|
35
35
|
"styled-components": "^5.2.3",
|
|
36
|
-
"tsup": "^8.
|
|
36
|
+
"tsup": "^8.3.4",
|
|
37
37
|
"typescript": "^5.6.2",
|
|
38
38
|
"@sproutsocial/seeds-tsconfig": "*",
|
|
39
39
|
"@sproutsocial/seeds-testing": "*",
|
package/src/TokenTypes.ts
CHANGED
|
@@ -10,7 +10,7 @@ export interface TypeTokenProps
|
|
|
10
10
|
extends TypeStyledComponentsCommonProps,
|
|
11
11
|
TypeSystemCommonProps,
|
|
12
12
|
Omit<React.ComponentPropsWithoutRef<"button">, "color"> {
|
|
13
|
-
onClick
|
|
13
|
+
onClick?: React.EventHandler<React.SyntheticEvent>;
|
|
14
14
|
children: React.ReactNode;
|
|
15
15
|
qa?: TypeQaProps;
|
|
16
16
|
|