@sproutsocial/seeds-react-button 1.2.0 → 1.2.2
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/dist/esm/index.js +2 -2
- package/dist/esm/index.js.map +1 -1
- package/dist/index.js +5 -5
- package/dist/index.js.map +1 -1
- package/package.json +5 -5
package/dist/esm/index.js
CHANGED
|
@@ -152,9 +152,9 @@ var Button_default = Button;
|
|
|
152
152
|
import "react";
|
|
153
153
|
|
|
154
154
|
// src/index.ts
|
|
155
|
-
var
|
|
155
|
+
var index_default = Button_default;
|
|
156
156
|
export {
|
|
157
157
|
Button_default as Button,
|
|
158
|
-
|
|
158
|
+
index_default as default
|
|
159
159
|
};
|
|
160
160
|
//# sourceMappingURL=index.js.map
|
package/dist/esm/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Button.tsx","../../src/styles.ts","../../src/ButtonTypes.ts","../../src/index.ts"],"sourcesContent":["import React from \"react\";\nimport type { TypeButtonProps } from \"./ButtonTypes\";\nimport Container from \"./styles\";\n\nconst Button = ({\n href,\n appearance = \"unstyled\",\n active = false,\n disabled,\n external,\n children,\n size = \"default\",\n innerRef,\n onClick,\n title,\n qa = {},\n as,\n ariaLabel,\n ...rest\n}: TypeButtonProps) => {\n if (!href && external) {\n // eslint-disable-next-line no-console\n console.warn(\n \"Warning: external prop cannot be set without a href declaration\"\n );\n }\n\n return (\n <Container\n title={title}\n active={active}\n href={href}\n target={external ? \"_blank\" : undefined}\n rel={external ? \"noopener noreferrer\" : undefined}\n as={as || (href ? \"a\" : \"button\")}\n type={href ? undefined : \"button\"}\n aria-disabled={disabled ? disabled : undefined}\n disabled={disabled}\n buttonSize={size}\n appearance={appearance || \"unstyled\"}\n ref={innerRef}\n onClick={onClick}\n data-qa-button={title || \"\"}\n data-qa-button-isdisabled={disabled === true}\n aria-label={ariaLabel}\n {...qa}\n {...rest}\n >\n {children}\n </Container>\n );\n};\n\nButton.displayName = \"Button\";\nexport default Button;\n","import styled, { css } from \"styled-components\";\nimport {\n COMMON,\n LAYOUT,\n FLEXBOX,\n GRID,\n} from \"@sproutsocial/seeds-react-system-props\";\nimport { focusRing, disabled, pill } from \"@sproutsocial/seeds-react-mixins\";\nimport { IconContainer } from \"@sproutsocial/seeds-react-icon\";\nimport type { TypeButtonProps, TypeButtonAppearance } from \"./index\";\ninterface TypeButtonStyleProps extends TypeButtonProps {\n appearance: TypeButtonAppearance;\n buttonSize?: \"large\" | \"default\";\n}\nconst Container = styled.button<TypeButtonStyleProps>`\n display: inline-block;\n box-sizing: border-box;\n text-align: center;\n font-family: ${(props) => props.theme.fontFamily};\n border: 1px solid\n ${(props) => props.theme.colors.button[props.appearance].border.base};\n border-radius: ${(props) => props.theme.radii[500]};\n border-style: ${(props) =>\n props.appearance === \"placeholder\" ? \"dashed\" : \"solid\"};\n background: ${(props) =>\n props.theme.colors.button[props.appearance].background.base};\n color: ${(props) => props.theme.colors.button[props.appearance].text.base};\n cursor: pointer;\n text-decoration: none;\n /**\n * Matches default line height of Icon. Also matches the overall height of\n * Input and Select.\n */\n line-height: 16px;\n white-space: nowrap;\n font-weight: ${(props) => props.theme.fontWeights.bold};\n transition: all ${(props) => props.theme.duration.fast} linear;\n\n margin: 0;\n padding: ${(props) =>\n props.buttonSize === \"default\"\n ? `${props.theme.space[300]}`\n : `${props.theme.space[350]}`};\n\n font-size: ${(props) =>\n props.buttonSize === \"default\"\n ? props.theme.typography[200].fontSize\n : props.theme.typography[300].fontSize};\n\n &:visited {\n color: ${(props) => props.theme.colors.button[props.appearance].text.base};\n }\n\n &:hover {\n color: ${(props) => props.theme.colors.button[props.appearance].text.hover};\n ${(props) =>\n props.appearance !== \"unstyled\" &&\n `background: ${\n props.theme.colors.button[props.appearance].background.hover\n }`};\n text-decoration: none;\n box-shadow: ${(props) =>\n props.appearance === \"placeholder\" ? props.theme.shadows.low : \"none\"};\n }\n\n &:active {\n color: ${(props) => props.theme.colors.button[props.appearance].text.hover};\n ${(props) =>\n props.appearance !== \"unstyled\" &&\n `background: ${\n props.theme.colors.button[props.appearance].background.active\n }`};\n transform: translateY(1px);\n }\n\n &:focus {\n ${focusRing}\n }\n\n &:focus:active {\n box-shadow: none;\n }\n\n ${(props) =>\n props.active &&\n css`\n color: ${props.theme.colors.button[props.appearance].text\n .hover} !important;\n ${props.appearance !== \"unstyled\" &&\n `background: ${\n props.theme.colors.button[props.appearance].background.active\n } !important`};\n `}\n\n ${(props) => props.disabled && disabled}\n\n ${(props) =>\n props.appearance === \"pill\" &&\n css`\n display: inline-flex;\n align-items: center;\n justify-content: center;\n background-color: transparent;\n ${pill}\n\n &:focus:active,\n &:hover {\n background-color: transparent;\n box-shadow: inset 0px 0px 0px 1px\n ${props.theme.colors.button.pill.border.hover};\n }\n `}\n\n ${IconContainer} {\n vertical-align: text-bottom;\n }\n\n ${LAYOUT}\n ${COMMON}\n ${FLEXBOX}\n ${GRID}\n`;\nContainer.displayName = \"Button-Container\";\nexport default Container; //${props.theme.mode === \"dark\" ? \"screen\" : \"multiply\"}\n","import * as React from \"react\";\nimport type { TypeStyledComponentsCommonProps } from \"@sproutsocial/seeds-react-system-props\";\nimport type {\n TypeSystemCommonProps,\n TypeSystemLayoutProps,\n TypeSystemFlexboxProps,\n TypeSystemGridProps,\n} from \"@sproutsocial/seeds-react-system-props\";\n\nexport type TypeButtonAppearance =\n | \"primary\"\n | \"secondary\"\n | \"pill\"\n | \"destructive\"\n | \"unstyled\"\n | \"placeholder\";\n\nexport interface TypeButtonProps\n extends TypeStyledComponentsCommonProps,\n TypeSystemCommonProps,\n TypeSystemLayoutProps,\n TypeSystemFlexboxProps,\n TypeSystemGridProps,\n Omit<React.ComponentPropsWithoutRef<\"button\">, \"color\"> {\n /** If the button is being used as an anchor, this prop will cause the link to open in a new tab. */\n external?: boolean;\n size?: \"large\" | \"small\" | \"default\"; // @ts-notes: small is referenced in the code, but not in the type, so I added it here until refactor\n\n /** What the button looks like. */\n appearance?: TypeButtonAppearance;\n\n /** Set the button to display in its active state */\n active?: boolean;\n\n /** Disables user action and applies a disabled style on the button */\n disabled?: boolean;\n children: React.ReactNode;\n\n /** Setting this prop will cause the component to be rendered as an anchor element instead of a button element */\n href?: string;\n\n /** If the component is rendered as an anchor to a file, this prop sets the name of the file to be downloaded */\n download?: string;\n\n /** Used to get a reference to the underlying button */\n innerRef?: React.Ref<HTMLButtonElement>;\n\n /** Action to perform when the button is clicked */\n onClick?: React.MouseEventHandler<HTMLButtonElement>;\n title?: string;\n qa?: object;\n as?: TypeStyledComponentsCommonProps[\"as\"];\n\n /** Label used to describe the button if the button does not have text within it */\n ariaLabel?: string;\n}\n","import Button from \"./Button\";\n\nexport default Button;\nexport { Button };\nexport * from \"./ButtonTypes\";\n"],"mappings":"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
|
|
1
|
+
{"version":3,"sources":["../../src/Button.tsx","../../src/styles.ts","../../src/ButtonTypes.ts","../../src/index.ts"],"sourcesContent":["import React from \"react\";\nimport type { TypeButtonProps } from \"./ButtonTypes\";\nimport Container from \"./styles\";\n\nconst Button = ({\n href,\n appearance = \"unstyled\",\n active = false,\n disabled,\n external,\n children,\n size = \"default\",\n innerRef,\n onClick,\n title,\n qa = {},\n as,\n ariaLabel,\n ...rest\n}: TypeButtonProps) => {\n if (!href && external) {\n // eslint-disable-next-line no-console\n console.warn(\n \"Warning: external prop cannot be set without a href declaration\"\n );\n }\n\n return (\n <Container\n title={title}\n active={active}\n href={href}\n target={external ? \"_blank\" : undefined}\n rel={external ? \"noopener noreferrer\" : undefined}\n as={as || (href ? \"a\" : \"button\")}\n type={href ? undefined : \"button\"}\n aria-disabled={disabled ? disabled : undefined}\n disabled={disabled}\n buttonSize={size}\n appearance={appearance || \"unstyled\"}\n ref={innerRef}\n onClick={onClick}\n data-qa-button={title || \"\"}\n data-qa-button-isdisabled={disabled === true}\n aria-label={ariaLabel}\n {...qa}\n {...rest}\n >\n {children}\n </Container>\n );\n};\n\nButton.displayName = \"Button\";\nexport default Button;\n","import styled, { css } from \"styled-components\";\nimport {\n COMMON,\n LAYOUT,\n FLEXBOX,\n GRID,\n} from \"@sproutsocial/seeds-react-system-props\";\nimport { focusRing, disabled, pill } from \"@sproutsocial/seeds-react-mixins\";\nimport { IconContainer } from \"@sproutsocial/seeds-react-icon\";\nimport type { TypeButtonProps, TypeButtonAppearance } from \"./index\";\ninterface TypeButtonStyleProps extends TypeButtonProps {\n appearance: TypeButtonAppearance;\n buttonSize?: \"large\" | \"default\";\n}\nconst Container = styled.button<TypeButtonStyleProps>`\n display: inline-block;\n box-sizing: border-box;\n text-align: center;\n font-family: ${(props) => props.theme.fontFamily};\n border: 1px solid\n ${(props) => props.theme.colors.button[props.appearance].border.base};\n border-radius: ${(props) => props.theme.radii[500]};\n border-style: ${(props) =>\n props.appearance === \"placeholder\" ? \"dashed\" : \"solid\"};\n background: ${(props) =>\n props.theme.colors.button[props.appearance].background.base};\n color: ${(props) => props.theme.colors.button[props.appearance].text.base};\n cursor: pointer;\n text-decoration: none;\n /**\n * Matches default line height of Icon. Also matches the overall height of\n * Input and Select.\n */\n line-height: 16px;\n white-space: nowrap;\n font-weight: ${(props) => props.theme.fontWeights.bold};\n transition: all ${(props) => props.theme.duration.fast} linear;\n\n margin: 0;\n padding: ${(props) =>\n props.buttonSize === \"default\"\n ? `${props.theme.space[300]}`\n : `${props.theme.space[350]}`};\n\n font-size: ${(props) =>\n props.buttonSize === \"default\"\n ? props.theme.typography[200].fontSize\n : props.theme.typography[300].fontSize};\n\n &:visited {\n color: ${(props) => props.theme.colors.button[props.appearance].text.base};\n }\n\n &:hover {\n color: ${(props) => props.theme.colors.button[props.appearance].text.hover};\n ${(props) =>\n props.appearance !== \"unstyled\" &&\n `background: ${\n props.theme.colors.button[props.appearance].background.hover\n }`};\n text-decoration: none;\n box-shadow: ${(props) =>\n props.appearance === \"placeholder\" ? props.theme.shadows.low : \"none\"};\n }\n\n &:active {\n color: ${(props) => props.theme.colors.button[props.appearance].text.hover};\n ${(props) =>\n props.appearance !== \"unstyled\" &&\n `background: ${\n props.theme.colors.button[props.appearance].background.active\n }`};\n transform: translateY(1px);\n }\n\n &:focus {\n ${focusRing}\n }\n\n &:focus:active {\n box-shadow: none;\n }\n\n ${(props) =>\n props.active &&\n css`\n color: ${props.theme.colors.button[props.appearance].text\n .hover} !important;\n ${props.appearance !== \"unstyled\" &&\n `background: ${\n props.theme.colors.button[props.appearance].background.active\n } !important`};\n `}\n\n ${(props) => props.disabled && disabled}\n\n ${(props) =>\n props.appearance === \"pill\" &&\n css`\n display: inline-flex;\n align-items: center;\n justify-content: center;\n background-color: transparent;\n ${pill}\n\n &:focus:active,\n &:hover {\n background-color: transparent;\n box-shadow: inset 0px 0px 0px 1px\n ${props.theme.colors.button.pill.border.hover};\n }\n `}\n\n ${IconContainer} {\n vertical-align: text-bottom;\n }\n\n ${LAYOUT}\n ${COMMON}\n ${FLEXBOX}\n ${GRID}\n`;\nContainer.displayName = \"Button-Container\";\nexport default Container; //${props.theme.mode === \"dark\" ? \"screen\" : \"multiply\"}\n","import * as React from \"react\";\nimport type { TypeStyledComponentsCommonProps } from \"@sproutsocial/seeds-react-system-props\";\nimport type {\n TypeSystemCommonProps,\n TypeSystemLayoutProps,\n TypeSystemFlexboxProps,\n TypeSystemGridProps,\n} from \"@sproutsocial/seeds-react-system-props\";\n\nexport type TypeButtonAppearance =\n | \"primary\"\n | \"secondary\"\n | \"pill\"\n | \"destructive\"\n | \"unstyled\"\n | \"placeholder\";\n\nexport interface TypeButtonProps\n extends TypeStyledComponentsCommonProps,\n TypeSystemCommonProps,\n TypeSystemLayoutProps,\n TypeSystemFlexboxProps,\n TypeSystemGridProps,\n Omit<React.ComponentPropsWithoutRef<\"button\">, \"color\"> {\n /** If the button is being used as an anchor, this prop will cause the link to open in a new tab. */\n external?: boolean;\n size?: \"large\" | \"small\" | \"default\"; // @ts-notes: small is referenced in the code, but not in the type, so I added it here until refactor\n\n /** What the button looks like. */\n appearance?: TypeButtonAppearance;\n\n /** Set the button to display in its active state */\n active?: boolean;\n\n /** Disables user action and applies a disabled style on the button */\n disabled?: boolean;\n children: React.ReactNode;\n\n /** Setting this prop will cause the component to be rendered as an anchor element instead of a button element */\n href?: string;\n\n /** If the component is rendered as an anchor to a file, this prop sets the name of the file to be downloaded */\n download?: string;\n\n /** Used to get a reference to the underlying button */\n innerRef?: React.Ref<HTMLButtonElement>;\n\n /** Action to perform when the button is clicked */\n onClick?: React.MouseEventHandler<HTMLButtonElement>;\n title?: string;\n qa?: object;\n as?: TypeStyledComponentsCommonProps[\"as\"];\n\n /** Label used to describe the button if the button does not have text within it */\n ariaLabel?: string;\n}\n","import Button from \"./Button\";\n\nexport default Button;\nexport { Button };\nexport * from \"./ButtonTypes\";\n"],"mappings":"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","names":["disabled"]}
|
package/dist/index.js
CHANGED
|
@@ -28,12 +28,12 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
|
|
|
28
28
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
29
|
|
|
30
30
|
// src/index.ts
|
|
31
|
-
var
|
|
32
|
-
__export(
|
|
31
|
+
var index_exports = {};
|
|
32
|
+
__export(index_exports, {
|
|
33
33
|
Button: () => Button_default,
|
|
34
|
-
default: () =>
|
|
34
|
+
default: () => index_default
|
|
35
35
|
});
|
|
36
|
-
module.exports = __toCommonJS(
|
|
36
|
+
module.exports = __toCommonJS(index_exports);
|
|
37
37
|
|
|
38
38
|
// src/Button.tsx
|
|
39
39
|
var import_react = require("react");
|
|
@@ -184,7 +184,7 @@ var Button_default = Button;
|
|
|
184
184
|
var React2 = require("react");
|
|
185
185
|
|
|
186
186
|
// src/index.ts
|
|
187
|
-
var
|
|
187
|
+
var index_default = Button_default;
|
|
188
188
|
// Annotate the CommonJS export names for ESM import in node:
|
|
189
189
|
0 && (module.exports = {
|
|
190
190
|
Button
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts","../src/Button.tsx","../src/styles.ts","../src/ButtonTypes.ts"],"sourcesContent":["import Button from \"./Button\";\n\nexport default Button;\nexport { Button };\nexport * from \"./ButtonTypes\";\n","import React from \"react\";\nimport type { TypeButtonProps } from \"./ButtonTypes\";\nimport Container from \"./styles\";\n\nconst Button = ({\n href,\n appearance = \"unstyled\",\n active = false,\n disabled,\n external,\n children,\n size = \"default\",\n innerRef,\n onClick,\n title,\n qa = {},\n as,\n ariaLabel,\n ...rest\n}: TypeButtonProps) => {\n if (!href && external) {\n // eslint-disable-next-line no-console\n console.warn(\n \"Warning: external prop cannot be set without a href declaration\"\n );\n }\n\n return (\n <Container\n title={title}\n active={active}\n href={href}\n target={external ? \"_blank\" : undefined}\n rel={external ? \"noopener noreferrer\" : undefined}\n as={as || (href ? \"a\" : \"button\")}\n type={href ? undefined : \"button\"}\n aria-disabled={disabled ? disabled : undefined}\n disabled={disabled}\n buttonSize={size}\n appearance={appearance || \"unstyled\"}\n ref={innerRef}\n onClick={onClick}\n data-qa-button={title || \"\"}\n data-qa-button-isdisabled={disabled === true}\n aria-label={ariaLabel}\n {...qa}\n {...rest}\n >\n {children}\n </Container>\n );\n};\n\nButton.displayName = \"Button\";\nexport default Button;\n","import styled, { css } from \"styled-components\";\nimport {\n COMMON,\n LAYOUT,\n FLEXBOX,\n GRID,\n} from \"@sproutsocial/seeds-react-system-props\";\nimport { focusRing, disabled, pill } from \"@sproutsocial/seeds-react-mixins\";\nimport { IconContainer } from \"@sproutsocial/seeds-react-icon\";\nimport type { TypeButtonProps, TypeButtonAppearance } from \"./index\";\ninterface TypeButtonStyleProps extends TypeButtonProps {\n appearance: TypeButtonAppearance;\n buttonSize?: \"large\" | \"default\";\n}\nconst Container = styled.button<TypeButtonStyleProps>`\n display: inline-block;\n box-sizing: border-box;\n text-align: center;\n font-family: ${(props) => props.theme.fontFamily};\n border: 1px solid\n ${(props) => props.theme.colors.button[props.appearance].border.base};\n border-radius: ${(props) => props.theme.radii[500]};\n border-style: ${(props) =>\n props.appearance === \"placeholder\" ? \"dashed\" : \"solid\"};\n background: ${(props) =>\n props.theme.colors.button[props.appearance].background.base};\n color: ${(props) => props.theme.colors.button[props.appearance].text.base};\n cursor: pointer;\n text-decoration: none;\n /**\n * Matches default line height of Icon. Also matches the overall height of\n * Input and Select.\n */\n line-height: 16px;\n white-space: nowrap;\n font-weight: ${(props) => props.theme.fontWeights.bold};\n transition: all ${(props) => props.theme.duration.fast} linear;\n\n margin: 0;\n padding: ${(props) =>\n props.buttonSize === \"default\"\n ? `${props.theme.space[300]}`\n : `${props.theme.space[350]}`};\n\n font-size: ${(props) =>\n props.buttonSize === \"default\"\n ? props.theme.typography[200].fontSize\n : props.theme.typography[300].fontSize};\n\n &:visited {\n color: ${(props) => props.theme.colors.button[props.appearance].text.base};\n }\n\n &:hover {\n color: ${(props) => props.theme.colors.button[props.appearance].text.hover};\n ${(props) =>\n props.appearance !== \"unstyled\" &&\n `background: ${\n props.theme.colors.button[props.appearance].background.hover\n }`};\n text-decoration: none;\n box-shadow: ${(props) =>\n props.appearance === \"placeholder\" ? props.theme.shadows.low : \"none\"};\n }\n\n &:active {\n color: ${(props) => props.theme.colors.button[props.appearance].text.hover};\n ${(props) =>\n props.appearance !== \"unstyled\" &&\n `background: ${\n props.theme.colors.button[props.appearance].background.active\n }`};\n transform: translateY(1px);\n }\n\n &:focus {\n ${focusRing}\n }\n\n &:focus:active {\n box-shadow: none;\n }\n\n ${(props) =>\n props.active &&\n css`\n color: ${props.theme.colors.button[props.appearance].text\n .hover} !important;\n ${props.appearance !== \"unstyled\" &&\n `background: ${\n props.theme.colors.button[props.appearance].background.active\n } !important`};\n `}\n\n ${(props) => props.disabled && disabled}\n\n ${(props) =>\n props.appearance === \"pill\" &&\n css`\n display: inline-flex;\n align-items: center;\n justify-content: center;\n background-color: transparent;\n ${pill}\n\n &:focus:active,\n &:hover {\n background-color: transparent;\n box-shadow: inset 0px 0px 0px 1px\n ${props.theme.colors.button.pill.border.hover};\n }\n `}\n\n ${IconContainer} {\n vertical-align: text-bottom;\n }\n\n ${LAYOUT}\n ${COMMON}\n ${FLEXBOX}\n ${GRID}\n`;\nContainer.displayName = \"Button-Container\";\nexport default Container; //${props.theme.mode === \"dark\" ? \"screen\" : \"multiply\"}\n","import * as React from \"react\";\nimport type { TypeStyledComponentsCommonProps } from \"@sproutsocial/seeds-react-system-props\";\nimport type {\n TypeSystemCommonProps,\n TypeSystemLayoutProps,\n TypeSystemFlexboxProps,\n TypeSystemGridProps,\n} from \"@sproutsocial/seeds-react-system-props\";\n\nexport type TypeButtonAppearance =\n | \"primary\"\n | \"secondary\"\n | \"pill\"\n | \"destructive\"\n | \"unstyled\"\n | \"placeholder\";\n\nexport interface TypeButtonProps\n extends TypeStyledComponentsCommonProps,\n TypeSystemCommonProps,\n TypeSystemLayoutProps,\n TypeSystemFlexboxProps,\n TypeSystemGridProps,\n Omit<React.ComponentPropsWithoutRef<\"button\">, \"color\"> {\n /** If the button is being used as an anchor, this prop will cause the link to open in a new tab. */\n external?: boolean;\n size?: \"large\" | \"small\" | \"default\"; // @ts-notes: small is referenced in the code, but not in the type, so I added it here until refactor\n\n /** What the button looks like. */\n appearance?: TypeButtonAppearance;\n\n /** Set the button to display in its active state */\n active?: boolean;\n\n /** Disables user action and applies a disabled style on the button */\n disabled?: boolean;\n children: React.ReactNode;\n\n /** Setting this prop will cause the component to be rendered as an anchor element instead of a button element */\n href?: string;\n\n /** If the component is rendered as an anchor to a file, this prop sets the name of the file to be downloaded */\n download?: string;\n\n /** Used to get a reference to the underlying button */\n innerRef?: React.Ref<HTMLButtonElement>;\n\n /** Action to perform when the button is clicked */\n onClick?: React.MouseEventHandler<HTMLButtonElement>;\n title?: string;\n qa?: object;\n as?: TypeStyledComponentsCommonProps[\"as\"];\n\n /** Label used to describe the button if the button does not have text within it */\n ariaLabel?: string;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,mBAAkB;;;ACAlB,+BAA4B;AAC5B,sCAKO;AACP,gCAA0C;AAC1C,8BAA8B;AAM9B,IAAM,YAAY,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA,iBAIR,CAAC,UAAU,MAAM,MAAM,UAAU;AAAA;AAAA,MAE5C,CAAC,UAAU,MAAM,MAAM,OAAO,OAAO,MAAM,UAAU,EAAE,OAAO,IAAI;AAAA,mBACrD,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA,kBAClC,CAAC,UACf,MAAM,eAAe,gBAAgB,WAAW,OAAO;AAAA,gBAC3C,CAAC,UACb,MAAM,MAAM,OAAO,OAAO,MAAM,UAAU,EAAE,WAAW,IAAI;AAAA,WACpD,CAAC,UAAU,MAAM,MAAM,OAAO,OAAO,MAAM,UAAU,EAAE,KAAK,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAS1D,CAAC,UAAU,MAAM,MAAM,YAAY,IAAI;AAAA,oBACpC,CAAC,UAAU,MAAM,MAAM,SAAS,IAAI;AAAA;AAAA;AAAA,aAG3C,CAAC,UACV,MAAM,eAAe,YACjB,GAAG,MAAM,MAAM,MAAM,GAAG,CAAC,KACzB,GAAG,MAAM,MAAM,MAAM,GAAG,CAAC,EAAE;AAAA;AAAA,eAEpB,CAAC,UACZ,MAAM,eAAe,YACjB,MAAM,MAAM,WAAW,GAAG,EAAE,WAC5B,MAAM,MAAM,WAAW,GAAG,EAAE,QAAQ;AAAA;AAAA;AAAA,aAG/B,CAAC,UAAU,MAAM,MAAM,OAAO,OAAO,MAAM,UAAU,EAAE,KAAK,IAAI;AAAA;AAAA;AAAA;AAAA,aAIhE,CAAC,UAAU,MAAM,MAAM,OAAO,OAAO,MAAM,UAAU,EAAE,KAAK,KAAK;AAAA,MACxE,CAAC,UACD,MAAM,eAAe,cACrB,eACE,MAAM,MAAM,OAAO,OAAO,MAAM,UAAU,EAAE,WAAW,KACzD,EAAE;AAAA;AAAA,kBAEU,CAAC,UACb,MAAM,eAAe,gBAAgB,MAAM,MAAM,QAAQ,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA,aAI9D,CAAC,UAAU,MAAM,MAAM,OAAO,OAAO,MAAM,UAAU,EAAE,KAAK,KAAK;AAAA,MACxE,CAAC,UACD,MAAM,eAAe,cACrB,eACE,MAAM,MAAM,OAAO,OAAO,MAAM,UAAU,EAAE,WAAW,MACzD,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA,MAKF,mCAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOX,CAAC,UACD,MAAM,UACN;AAAA,eACW,MAAM,MAAM,OAAO,OAAO,MAAM,UAAU,EAAE,KAClD,KAAK;AAAA,QACN,MAAM,eAAe,cACvB,eACE,MAAM,MAAM,OAAO,OAAO,MAAM,UAAU,EAAE,WAAW,MACzD,aAAa;AAAA,KACd;AAAA;AAAA,IAED,CAAC,UAAU,MAAM,YAAY,kCAAQ;AAAA;AAAA,IAErC,CAAC,UACD,MAAM,eAAe,UACrB;AAAA;AAAA;AAAA;AAAA;AAAA,QAKI,8BAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAMA,MAAM,MAAM,OAAO,OAAO,KAAK,OAAO,KAAK;AAAA;AAAA,KAElD;AAAA;AAAA,IAED,qCAAa;AAAA;AAAA;AAAA;AAAA,IAIb,sCAAM;AAAA,IACN,sCAAM;AAAA,IACN,uCAAO;AAAA,IACP,oCAAI;AAAA;AAER,UAAU,cAAc;AACxB,IAAO,iBAAQ;;;AD/FX;AAxBJ,IAAM,SAAS,CAAC;AAAA,EACd;AAAA,EACA,aAAa;AAAA,EACb,SAAS;AAAA,EACT,UAAAC;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA,KAAK,CAAC;AAAA,EACN;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAuB;AACrB,MAAI,CAAC,QAAQ,UAAU;AAErB,YAAQ;AAAA,MACN;AAAA,IACF;AAAA,EACF;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,QAAQ,WAAW,WAAW;AAAA,MAC9B,KAAK,WAAW,wBAAwB;AAAA,MACxC,IAAI,OAAO,OAAO,MAAM;AAAA,MACxB,MAAM,OAAO,SAAY;AAAA,MACzB,iBAAeA,YAAWA,YAAW;AAAA,MACrC,UAAUA;AAAA,MACV,YAAY;AAAA,MACZ,YAAY,cAAc;AAAA,MAC1B,KAAK;AAAA,MACL;AAAA,MACA,kBAAgB,SAAS;AAAA,MACzB,6BAA2BA,cAAa;AAAA,MACxC,cAAY;AAAA,MACX,GAAG;AAAA,MACH,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ;AAEA,OAAO,cAAc;AACrB,IAAO,iBAAQ;;;AEtDf,IAAAC,SAAuB;;;AHEvB,IAAO,
|
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/Button.tsx","../src/styles.ts","../src/ButtonTypes.ts"],"sourcesContent":["import Button from \"./Button\";\n\nexport default Button;\nexport { Button };\nexport * from \"./ButtonTypes\";\n","import React from \"react\";\nimport type { TypeButtonProps } from \"./ButtonTypes\";\nimport Container from \"./styles\";\n\nconst Button = ({\n href,\n appearance = \"unstyled\",\n active = false,\n disabled,\n external,\n children,\n size = \"default\",\n innerRef,\n onClick,\n title,\n qa = {},\n as,\n ariaLabel,\n ...rest\n}: TypeButtonProps) => {\n if (!href && external) {\n // eslint-disable-next-line no-console\n console.warn(\n \"Warning: external prop cannot be set without a href declaration\"\n );\n }\n\n return (\n <Container\n title={title}\n active={active}\n href={href}\n target={external ? \"_blank\" : undefined}\n rel={external ? \"noopener noreferrer\" : undefined}\n as={as || (href ? \"a\" : \"button\")}\n type={href ? undefined : \"button\"}\n aria-disabled={disabled ? disabled : undefined}\n disabled={disabled}\n buttonSize={size}\n appearance={appearance || \"unstyled\"}\n ref={innerRef}\n onClick={onClick}\n data-qa-button={title || \"\"}\n data-qa-button-isdisabled={disabled === true}\n aria-label={ariaLabel}\n {...qa}\n {...rest}\n >\n {children}\n </Container>\n );\n};\n\nButton.displayName = \"Button\";\nexport default Button;\n","import styled, { css } from \"styled-components\";\nimport {\n COMMON,\n LAYOUT,\n FLEXBOX,\n GRID,\n} from \"@sproutsocial/seeds-react-system-props\";\nimport { focusRing, disabled, pill } from \"@sproutsocial/seeds-react-mixins\";\nimport { IconContainer } from \"@sproutsocial/seeds-react-icon\";\nimport type { TypeButtonProps, TypeButtonAppearance } from \"./index\";\ninterface TypeButtonStyleProps extends TypeButtonProps {\n appearance: TypeButtonAppearance;\n buttonSize?: \"large\" | \"default\";\n}\nconst Container = styled.button<TypeButtonStyleProps>`\n display: inline-block;\n box-sizing: border-box;\n text-align: center;\n font-family: ${(props) => props.theme.fontFamily};\n border: 1px solid\n ${(props) => props.theme.colors.button[props.appearance].border.base};\n border-radius: ${(props) => props.theme.radii[500]};\n border-style: ${(props) =>\n props.appearance === \"placeholder\" ? \"dashed\" : \"solid\"};\n background: ${(props) =>\n props.theme.colors.button[props.appearance].background.base};\n color: ${(props) => props.theme.colors.button[props.appearance].text.base};\n cursor: pointer;\n text-decoration: none;\n /**\n * Matches default line height of Icon. Also matches the overall height of\n * Input and Select.\n */\n line-height: 16px;\n white-space: nowrap;\n font-weight: ${(props) => props.theme.fontWeights.bold};\n transition: all ${(props) => props.theme.duration.fast} linear;\n\n margin: 0;\n padding: ${(props) =>\n props.buttonSize === \"default\"\n ? `${props.theme.space[300]}`\n : `${props.theme.space[350]}`};\n\n font-size: ${(props) =>\n props.buttonSize === \"default\"\n ? props.theme.typography[200].fontSize\n : props.theme.typography[300].fontSize};\n\n &:visited {\n color: ${(props) => props.theme.colors.button[props.appearance].text.base};\n }\n\n &:hover {\n color: ${(props) => props.theme.colors.button[props.appearance].text.hover};\n ${(props) =>\n props.appearance !== \"unstyled\" &&\n `background: ${\n props.theme.colors.button[props.appearance].background.hover\n }`};\n text-decoration: none;\n box-shadow: ${(props) =>\n props.appearance === \"placeholder\" ? props.theme.shadows.low : \"none\"};\n }\n\n &:active {\n color: ${(props) => props.theme.colors.button[props.appearance].text.hover};\n ${(props) =>\n props.appearance !== \"unstyled\" &&\n `background: ${\n props.theme.colors.button[props.appearance].background.active\n }`};\n transform: translateY(1px);\n }\n\n &:focus {\n ${focusRing}\n }\n\n &:focus:active {\n box-shadow: none;\n }\n\n ${(props) =>\n props.active &&\n css`\n color: ${props.theme.colors.button[props.appearance].text\n .hover} !important;\n ${props.appearance !== \"unstyled\" &&\n `background: ${\n props.theme.colors.button[props.appearance].background.active\n } !important`};\n `}\n\n ${(props) => props.disabled && disabled}\n\n ${(props) =>\n props.appearance === \"pill\" &&\n css`\n display: inline-flex;\n align-items: center;\n justify-content: center;\n background-color: transparent;\n ${pill}\n\n &:focus:active,\n &:hover {\n background-color: transparent;\n box-shadow: inset 0px 0px 0px 1px\n ${props.theme.colors.button.pill.border.hover};\n }\n `}\n\n ${IconContainer} {\n vertical-align: text-bottom;\n }\n\n ${LAYOUT}\n ${COMMON}\n ${FLEXBOX}\n ${GRID}\n`;\nContainer.displayName = \"Button-Container\";\nexport default Container; //${props.theme.mode === \"dark\" ? \"screen\" : \"multiply\"}\n","import * as React from \"react\";\nimport type { TypeStyledComponentsCommonProps } from \"@sproutsocial/seeds-react-system-props\";\nimport type {\n TypeSystemCommonProps,\n TypeSystemLayoutProps,\n TypeSystemFlexboxProps,\n TypeSystemGridProps,\n} from \"@sproutsocial/seeds-react-system-props\";\n\nexport type TypeButtonAppearance =\n | \"primary\"\n | \"secondary\"\n | \"pill\"\n | \"destructive\"\n | \"unstyled\"\n | \"placeholder\";\n\nexport interface TypeButtonProps\n extends TypeStyledComponentsCommonProps,\n TypeSystemCommonProps,\n TypeSystemLayoutProps,\n TypeSystemFlexboxProps,\n TypeSystemGridProps,\n Omit<React.ComponentPropsWithoutRef<\"button\">, \"color\"> {\n /** If the button is being used as an anchor, this prop will cause the link to open in a new tab. */\n external?: boolean;\n size?: \"large\" | \"small\" | \"default\"; // @ts-notes: small is referenced in the code, but not in the type, so I added it here until refactor\n\n /** What the button looks like. */\n appearance?: TypeButtonAppearance;\n\n /** Set the button to display in its active state */\n active?: boolean;\n\n /** Disables user action and applies a disabled style on the button */\n disabled?: boolean;\n children: React.ReactNode;\n\n /** Setting this prop will cause the component to be rendered as an anchor element instead of a button element */\n href?: string;\n\n /** If the component is rendered as an anchor to a file, this prop sets the name of the file to be downloaded */\n download?: string;\n\n /** Used to get a reference to the underlying button */\n innerRef?: React.Ref<HTMLButtonElement>;\n\n /** Action to perform when the button is clicked */\n onClick?: React.MouseEventHandler<HTMLButtonElement>;\n title?: string;\n qa?: object;\n as?: TypeStyledComponentsCommonProps[\"as\"];\n\n /** Label used to describe the button if the button does not have text within it */\n ariaLabel?: string;\n}\n"],"mappings":"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","names":["styled","disabled","React"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sproutsocial/seeds-react-button",
|
|
3
|
-
"version": "1.2.
|
|
3
|
+
"version": "1.2.2",
|
|
4
4
|
"description": "Seeds React Button",
|
|
5
5
|
"author": "Sprout Social, Inc.",
|
|
6
6
|
"license": "MIT",
|
|
@@ -21,9 +21,9 @@
|
|
|
21
21
|
"test:watch": "jest --watch --coverage=false"
|
|
22
22
|
},
|
|
23
23
|
"dependencies": {
|
|
24
|
-
"@sproutsocial/seeds-react-icon": "
|
|
25
|
-
"@sproutsocial/seeds-react-system-props": "
|
|
26
|
-
"@sproutsocial/seeds-react-mixins": "
|
|
24
|
+
"@sproutsocial/seeds-react-icon": "^1.1.3",
|
|
25
|
+
"@sproutsocial/seeds-react-system-props": "^3.0.2",
|
|
26
|
+
"@sproutsocial/seeds-react-mixins": "^4.1.2"
|
|
27
27
|
},
|
|
28
28
|
"devDependencies": {
|
|
29
29
|
"@types/react": "^18.0.0",
|
|
@@ -32,7 +32,7 @@
|
|
|
32
32
|
"react": "^18.0.0",
|
|
33
33
|
"styled-components": "^5.2.3",
|
|
34
34
|
"typescript": "^5.6.2",
|
|
35
|
-
"tsup": "^8.
|
|
35
|
+
"tsup": "^8.3.4",
|
|
36
36
|
"@sproutsocial/seeds-tsconfig": "*",
|
|
37
37
|
"@sproutsocial/seeds-testing": "*"
|
|
38
38
|
},
|