@sproutsocial/seeds-react-button 1.2.2 → 1.3.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.
Files changed (7) hide show
  1. package/dist/esm/index.js +47 -45
  2. package/dist/esm/index.js.map +1 -1
  3. package/dist/index.d.mts +2 -5
  4. package/dist/index.d.ts +2 -5
  5. package/dist/index.js +47 -45
  6. package/dist/index.js.map +1 -1
  7. package/package.json +3 -3
package/dist/esm/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  // src/Button.tsx
2
- import "react";
2
+ import React from "react";
3
3
 
4
4
  // src/styles.ts
5
5
  import styled, { css } from "styled-components";
@@ -99,52 +99,54 @@ var styles_default = Container;
99
99
 
100
100
  // src/Button.tsx
101
101
  import { jsx } from "react/jsx-runtime";
102
- var Button = ({
103
- href,
104
- appearance = "unstyled",
105
- active = false,
106
- disabled: disabled2,
107
- external,
108
- children,
109
- size = "default",
110
- innerRef,
111
- onClick,
112
- title,
113
- qa = {},
114
- as,
115
- ariaLabel,
116
- ...rest
117
- }) => {
118
- if (!href && external) {
119
- console.warn(
120
- "Warning: external prop cannot be set without a href declaration"
102
+ var Button = React.forwardRef(
103
+ ({
104
+ href,
105
+ appearance = "unstyled",
106
+ active = false,
107
+ disabled: disabled2,
108
+ external,
109
+ children,
110
+ size = "default",
111
+ innerRef,
112
+ onClick,
113
+ title,
114
+ qa = {},
115
+ as,
116
+ ariaLabel,
117
+ ...rest
118
+ }, ref) => {
119
+ if (!href && external) {
120
+ console.warn(
121
+ "Warning: external prop cannot be set without a href declaration"
122
+ );
123
+ }
124
+ return /* @__PURE__ */ jsx(
125
+ styles_default,
126
+ {
127
+ title,
128
+ active,
129
+ href,
130
+ target: external ? "_blank" : void 0,
131
+ rel: external ? "noopener noreferrer" : void 0,
132
+ as: as || (href ? "a" : "button"),
133
+ type: href ? void 0 : "button",
134
+ "aria-disabled": disabled2 ? disabled2 : void 0,
135
+ disabled: disabled2,
136
+ buttonSize: size,
137
+ appearance: appearance || "unstyled",
138
+ ref: ref || innerRef,
139
+ onClick,
140
+ "data-qa-button": title || "",
141
+ "data-qa-button-isdisabled": disabled2 === true,
142
+ "aria-label": ariaLabel,
143
+ ...qa,
144
+ ...rest,
145
+ children
146
+ }
121
147
  );
122
148
  }
123
- return /* @__PURE__ */ jsx(
124
- styles_default,
125
- {
126
- title,
127
- active,
128
- href,
129
- target: external ? "_blank" : void 0,
130
- rel: external ? "noopener noreferrer" : void 0,
131
- as: as || (href ? "a" : "button"),
132
- type: href ? void 0 : "button",
133
- "aria-disabled": disabled2 ? disabled2 : void 0,
134
- disabled: disabled2,
135
- buttonSize: size,
136
- appearance: appearance || "unstyled",
137
- ref: innerRef,
138
- onClick,
139
- "data-qa-button": title || "",
140
- "data-qa-button-isdisabled": disabled2 === true,
141
- "aria-label": ariaLabel,
142
- ...qa,
143
- ...rest,
144
- children
145
- }
146
- );
147
- };
149
+ );
148
150
  Button.displayName = "Button";
149
151
  var Button_default = Button;
150
152
 
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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","names":["disabled"]}
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 = React.forwardRef<HTMLButtonElement, TypeButtonProps>(\n (\n {\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 ref: React.Ref<HTMLButtonElement>\n ) => {\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={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);\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.d.mts CHANGED
@@ -1,5 +1,5 @@
1
- import * as react_jsx_runtime from 'react/jsx-runtime';
2
1
  import * as React from 'react';
2
+ import React__default from 'react';
3
3
  import { TypeStyledComponentsCommonProps, TypeSystemCommonProps, TypeSystemLayoutProps, TypeSystemFlexboxProps, TypeSystemGridProps } from '@sproutsocial/seeds-react-system-props';
4
4
 
5
5
  type TypeButtonAppearance = "primary" | "secondary" | "pill" | "destructive" | "unstyled" | "placeholder";
@@ -29,9 +29,6 @@ interface TypeButtonProps extends TypeStyledComponentsCommonProps, TypeSystemCom
29
29
  ariaLabel?: string;
30
30
  }
31
31
 
32
- declare const Button: {
33
- ({ href, appearance, active, disabled, external, children, size, innerRef, onClick, title, qa, as, ariaLabel, ...rest }: TypeButtonProps): react_jsx_runtime.JSX.Element;
34
- displayName: string;
35
- };
32
+ declare const Button: React__default.ForwardRefExoticComponent<Omit<TypeButtonProps, "ref"> & React__default.RefAttributes<HTMLButtonElement>>;
36
33
 
37
34
  export { Button, type TypeButtonAppearance, type TypeButtonProps, Button as default };
package/dist/index.d.ts CHANGED
@@ -1,5 +1,5 @@
1
- import * as react_jsx_runtime from 'react/jsx-runtime';
2
1
  import * as React from 'react';
2
+ import React__default from 'react';
3
3
  import { TypeStyledComponentsCommonProps, TypeSystemCommonProps, TypeSystemLayoutProps, TypeSystemFlexboxProps, TypeSystemGridProps } from '@sproutsocial/seeds-react-system-props';
4
4
 
5
5
  type TypeButtonAppearance = "primary" | "secondary" | "pill" | "destructive" | "unstyled" | "placeholder";
@@ -29,9 +29,6 @@ interface TypeButtonProps extends TypeStyledComponentsCommonProps, TypeSystemCom
29
29
  ariaLabel?: string;
30
30
  }
31
31
 
32
- declare const Button: {
33
- ({ href, appearance, active, disabled, external, children, size, innerRef, onClick, title, qa, as, ariaLabel, ...rest }: TypeButtonProps): react_jsx_runtime.JSX.Element;
34
- displayName: string;
35
- };
32
+ declare const Button: React__default.ForwardRefExoticComponent<Omit<TypeButtonProps, "ref"> & React__default.RefAttributes<HTMLButtonElement>>;
36
33
 
37
34
  export { Button, type TypeButtonAppearance, type TypeButtonProps, Button as default };
package/dist/index.js CHANGED
@@ -36,7 +36,7 @@ __export(index_exports, {
36
36
  module.exports = __toCommonJS(index_exports);
37
37
 
38
38
  // src/Button.tsx
39
- var import_react = require("react");
39
+ var import_react = __toESM(require("react"));
40
40
 
41
41
  // src/styles.ts
42
42
  var import_styled_components = __toESM(require("styled-components"));
@@ -131,52 +131,54 @@ var styles_default = Container;
131
131
 
132
132
  // src/Button.tsx
133
133
  var import_jsx_runtime = require("react/jsx-runtime");
134
- var Button = ({
135
- href,
136
- appearance = "unstyled",
137
- active = false,
138
- disabled: disabled2,
139
- external,
140
- children,
141
- size = "default",
142
- innerRef,
143
- onClick,
144
- title,
145
- qa = {},
146
- as,
147
- ariaLabel,
148
- ...rest
149
- }) => {
150
- if (!href && external) {
151
- console.warn(
152
- "Warning: external prop cannot be set without a href declaration"
134
+ var Button = import_react.default.forwardRef(
135
+ ({
136
+ href,
137
+ appearance = "unstyled",
138
+ active = false,
139
+ disabled: disabled2,
140
+ external,
141
+ children,
142
+ size = "default",
143
+ innerRef,
144
+ onClick,
145
+ title,
146
+ qa = {},
147
+ as,
148
+ ariaLabel,
149
+ ...rest
150
+ }, ref) => {
151
+ if (!href && external) {
152
+ console.warn(
153
+ "Warning: external prop cannot be set without a href declaration"
154
+ );
155
+ }
156
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
157
+ styles_default,
158
+ {
159
+ title,
160
+ active,
161
+ href,
162
+ target: external ? "_blank" : void 0,
163
+ rel: external ? "noopener noreferrer" : void 0,
164
+ as: as || (href ? "a" : "button"),
165
+ type: href ? void 0 : "button",
166
+ "aria-disabled": disabled2 ? disabled2 : void 0,
167
+ disabled: disabled2,
168
+ buttonSize: size,
169
+ appearance: appearance || "unstyled",
170
+ ref: ref || innerRef,
171
+ onClick,
172
+ "data-qa-button": title || "",
173
+ "data-qa-button-isdisabled": disabled2 === true,
174
+ "aria-label": ariaLabel,
175
+ ...qa,
176
+ ...rest,
177
+ children
178
+ }
153
179
  );
154
180
  }
155
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
156
- styles_default,
157
- {
158
- title,
159
- active,
160
- href,
161
- target: external ? "_blank" : void 0,
162
- rel: external ? "noopener noreferrer" : void 0,
163
- as: as || (href ? "a" : "button"),
164
- type: href ? void 0 : "button",
165
- "aria-disabled": disabled2 ? disabled2 : void 0,
166
- disabled: disabled2,
167
- buttonSize: size,
168
- appearance: appearance || "unstyled",
169
- ref: innerRef,
170
- onClick,
171
- "data-qa-button": title || "",
172
- "data-qa-button-isdisabled": disabled2 === true,
173
- "aria-label": ariaLabel,
174
- ...qa,
175
- ...rest,
176
- children
177
- }
178
- );
179
- };
181
+ );
180
182
  Button.displayName = "Button";
181
183
  var Button_default = Button;
182
184
 
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":"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","names":["styled","disabled","React"]}
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 = React.forwardRef<HTMLButtonElement, TypeButtonProps>(\n (\n {\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 ref: React.Ref<HTMLButtonElement>\n ) => {\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={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);\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","React","disabled","React"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sproutsocial/seeds-react-button",
3
- "version": "1.2.2",
3
+ "version": "1.3.0",
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": "^1.1.3",
24
+ "@sproutsocial/seeds-react-icon": "^1.1.4",
25
25
  "@sproutsocial/seeds-react-system-props": "^3.0.2",
26
- "@sproutsocial/seeds-react-mixins": "^4.1.2"
26
+ "@sproutsocial/seeds-react-mixins": "^4.1.3"
27
27
  },
28
28
  "devDependencies": {
29
29
  "@types/react": "^18.0.0",