@sproutsocial/seeds-react-icon 1.0.2 → 1.1.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.
Files changed (7) hide show
  1. package/dist/esm/index.js +49 -41
  2. package/dist/esm/index.js.map +1 -0
  3. package/dist/index.d.mts +3 -2
  4. package/dist/index.d.ts +3 -2
  5. package/dist/index.js +49 -41
  6. package/dist/index.js.map +1 -0
  7. package/package.json +16 -12
package/dist/esm/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  // src/Icon.tsx
2
- import * as React from "react";
2
+ import "react";
3
3
  import styled2, { css as css2 } from "styled-components";
4
4
  import Box from "@sproutsocial/seeds-react-box";
5
5
  import PartnerLogo from "@sproutsocial/seeds-react-partner-logo";
@@ -56,6 +56,7 @@ import {
56
56
  SproutViewBoxes,
57
57
  ExternalIconNames
58
58
  } from "@sproutsocial/seeds-icons";
59
+ import { jsx, jsxs } from "react/jsx-runtime";
59
60
  var AllViewboxes = {
60
61
  ...ExternalViewBoxes,
61
62
  ...GeneralViewBoxes,
@@ -78,7 +79,7 @@ var Icon = ({
78
79
  logoType: "symbol",
79
80
  svgProps
80
81
  };
81
- return /* @__PURE__ */ React.createElement(
82
+ return /* @__PURE__ */ jsx(
82
83
  PartnerLogo,
83
84
  {
84
85
  "aria-label": ariaLabel,
@@ -99,35 +100,35 @@ var Icon = ({
99
100
  )
100
101
  );
101
102
  const iconViewBox = AllViewboxes[iconName];
102
- return /* @__PURE__ */ React.createElement(
103
+ return /* @__PURE__ */ jsx(
103
104
  styles_default,
104
105
  {
105
106
  iconSize: size,
106
107
  fixedWidth: !!fixedWidth,
107
- key: iconName,
108
108
  role: "img",
109
109
  "aria-label": ariaLabel,
110
110
  "data-qa-icon": iconName,
111
111
  color,
112
- ...rest
113
- },
114
- /* @__PURE__ */ React.createElement(
115
- "svg",
116
- {
117
- className: "Icon-svg",
118
- viewBox: iconViewBox,
119
- focusable: false,
120
- "data-qa-icon-svg": `${iconName}-svg`,
121
- ...svgProps
122
- },
123
- /* @__PURE__ */ React.createElement(
124
- "use",
112
+ ...rest,
113
+ children: /* @__PURE__ */ jsx(
114
+ "svg",
125
115
  {
126
- xmlnsXlink: "http://www.w3.org/1999/xlink",
127
- xlinkHref: `#seeds-svgs_${iconName}`
116
+ className: "Icon-svg",
117
+ viewBox: iconViewBox,
118
+ focusable: false,
119
+ "data-qa-icon-svg": `${iconName}-svg`,
120
+ ...svgProps,
121
+ children: /* @__PURE__ */ jsx(
122
+ "use",
123
+ {
124
+ xmlnsXlink: "http://www.w3.org/1999/xlink",
125
+ xlinkHref: `#seeds-svgs_${iconName}`
126
+ }
127
+ )
128
128
  }
129
129
  )
130
- )
130
+ },
131
+ iconName
131
132
  );
132
133
  };
133
134
  var ToggleableIcon = styled2(Icon)`
@@ -153,32 +154,38 @@ var IconToggle = ({
153
154
  ariaLabel,
154
155
  ...rest
155
156
  }) => {
156
- return /* @__PURE__ */ React.createElement(Box, { as: "span", position: "relative", display: "inline-flex", ...rest }, /* @__PURE__ */ React.createElement(
157
- ToggleableIcon,
158
- {
159
- active: isActive,
160
- name: activeName,
161
- size,
162
- fixedWidth,
163
- "aria-label": ariaLabel,
164
- "aria-hidden": !isActive
165
- }
166
- ), /* @__PURE__ */ React.createElement(
167
- ToggleableIcon,
168
- {
169
- active: !isActive,
170
- name: inactiveName,
171
- size,
172
- fixedWidth,
173
- "aria-label": ariaLabel,
174
- "aria-hidden": isActive
175
- }
176
- ));
157
+ return /* @__PURE__ */ jsxs(Box, { as: "span", position: "relative", display: "inline-flex", ...rest, children: [
158
+ /* @__PURE__ */ jsx(
159
+ ToggleableIcon,
160
+ {
161
+ active: isActive,
162
+ name: activeName,
163
+ size,
164
+ fixedWidth,
165
+ "aria-label": ariaLabel,
166
+ "aria-hidden": !isActive
167
+ }
168
+ ),
169
+ /* @__PURE__ */ jsx(
170
+ ToggleableIcon,
171
+ {
172
+ active: !isActive,
173
+ name: inactiveName,
174
+ size,
175
+ fixedWidth,
176
+ "aria-label": ariaLabel,
177
+ "aria-hidden": isActive
178
+ }
179
+ )
180
+ ] });
177
181
  };
178
182
  IconToggle.displayName = "Icon.Toggle";
179
183
  Icon.Toggle = IconToggle;
180
184
  var Icon_default = Icon;
181
185
 
186
+ // src/IconTypes.ts
187
+ import "react";
188
+
182
189
  // src/index.ts
183
190
  var src_default = Icon_default;
184
191
  export {
@@ -186,3 +193,4 @@ export {
186
193
  styles_default as IconContainer,
187
194
  src_default as default
188
195
  };
196
+ //# sourceMappingURL=index.js.map
package/dist/esm/index.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../src/Icon.tsx","../../src/styles.ts","../../src/IconTypes.ts","../../src/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport styled, { css } from \"styled-components\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport PartnerLogo from \"@sproutsocial/seeds-react-partner-logo\";\nimport { includes } from \"@sproutsocial/seeds-react-utilities\";\nimport { LogoNamesWithoutVariants as PartnerLogoNames } from \"@sproutsocial/seeds-partner-logos\";\n\nimport type { TypeIconProps, TypeToggleProps } from \"./IconTypes\";\nimport Container from \"./styles\";\nimport {\n ExternalViewBoxes,\n GeneralViewBoxes,\n SproutViewBoxes,\n ExternalIconNames,\n type EnumIconSvgNames,\n type EnumIconNamesWithoutVariants,\n} from \"@sproutsocial/seeds-icons\";\n\nconst AllViewboxes = {\n ...ExternalViewBoxes,\n ...GeneralViewBoxes,\n ...SproutViewBoxes,\n};\n\nconst Icon = ({\n name,\n size = \"small\",\n fixedWidth = false,\n ariaLabel,\n color,\n svgProps,\n ...rest\n}: TypeIconProps) => {\n if (includes(PartnerLogoNames, name)) {\n // Icon's \"default\" size is equivalent to PartnerLogo's \"small\" size\n const logoSize = size === \"default\" ? \"small\" : size;\n const logoProps = {\n partnerName: name,\n size: logoSize,\n logoType: \"symbol\" as const,\n svgProps,\n };\n return (\n <PartnerLogo\n // ariaLabel needs to be overridable by aria-label prop in ...rest\n aria-label={ariaLabel}\n {...rest}\n {...logoProps}\n />\n );\n }\n\n const defaultVariant = size === \"mini\" ? \"solid\" : \"outline\";\n\n const iconName: EnumIconSvgNames =\n // if not external and has no variant\n !name?.endsWith(\"-outline\") &&\n !name?.endsWith(\"-solid\") &&\n !includes(ExternalIconNames, name)\n ? // then add default variant\n `${name as EnumIconNamesWithoutVariants}-${defaultVariant}`\n : // else use name as is\n (name as EnumIconSvgNames);\n\n const iconViewBox = AllViewboxes[iconName];\n return (\n <Container\n iconSize={size}\n fixedWidth={!!fixedWidth}\n key={iconName}\n role=\"img\"\n aria-label={ariaLabel}\n data-qa-icon={iconName}\n color={color}\n {...rest}\n >\n <svg\n className=\"Icon-svg\"\n viewBox={iconViewBox}\n focusable={false}\n data-qa-icon-svg={`${iconName}-svg`}\n {...svgProps}\n >\n <use\n xmlnsXlink=\"http://www.w3.org/1999/xlink\"\n xlinkHref={`#seeds-svgs_${iconName}`}\n />\n </svg>\n </Container>\n );\n};\n\nconst ToggleableIcon = styled(Icon)<{ active: boolean }>`\n transition: all ${(p) => p.theme.duration.fast} linear;\n\n ${(p) =>\n p.active &&\n css`\n opacity: 1;\n transform: scale(1);\n `}\n\n ${(p) =>\n !p.active &&\n css`\n position: absolute;\n opacity: 0;\n transform: scale(0);\n `}\n`;\n\nconst IconToggle = ({\n activeName,\n inactiveName,\n isActive,\n size = \"small\",\n fixedWidth = false,\n ariaLabel,\n ...rest\n}: TypeToggleProps) => {\n return (\n <Box as=\"span\" position=\"relative\" display=\"inline-flex\" {...rest}>\n <ToggleableIcon\n active={isActive}\n name={activeName}\n size={size}\n fixedWidth={fixedWidth}\n aria-label={ariaLabel}\n aria-hidden={!isActive}\n />\n <ToggleableIcon\n active={!isActive}\n name={inactiveName}\n size={size}\n fixedWidth={fixedWidth}\n aria-label={ariaLabel}\n aria-hidden={isActive}\n />\n </Box>\n );\n};\n\nIconToggle.displayName = \"Icon.Toggle\";\n/**\n * **Accessibility note:** It is best practice to wrap `<Icon.Toggle />` in a button. The button must include `aria-label` and `aria-pressed` in order for a screen reader to properly communicate the icon's state. See example below.\n *\n * @link https://www.w3.org/TR/wai-aria-practices-1.1/#button\n * @example\n * const [toggleState, setToggleState] = useState(false);\n * <Button // Wrap Icon.Toggle with Button\n * appearance='pill'\n * aria-label='like' // required for accessibility\n * aria-pressed={toggleState} // required for accessibility\n * onClick={() => setToggleState(!toggleState)}\n * >\n * <Icon.Toggle\n * activeName=\"heart-solid\"\n * inactiveName=\"heart-outline\"\n * isActive={toggleState}\n * />\n * </Button>\n */\nIcon.Toggle = IconToggle;\n\nexport default Icon;\n","import styled, { css } from \"styled-components\";\nimport { verticalAlign } from \"styled-system\";\nimport { COMMON } from \"@sproutsocial/seeds-react-system-props\";\nimport type { TypeIconSize } from \"./IconTypes\";\n\nconst sizes: { [key in TypeIconSize]: string } = {\n mini: \"12px\",\n\n /** TODO: deprecate default in favor of small in future release */\n default: \"16px\",\n small: \"16px\",\n medium: \"24px\",\n large: \"32px\",\n jumbo: \"64px\",\n};\n\nconst stylesForSize = (iconActualSize: string, fixedWidth: boolean) => css`\n line-height: ${iconActualSize};\n\n &,\n .Icon-svg {\n height: ${iconActualSize};\n fill: currentColor;\n }\n\n ${fixedWidth &&\n `\n &,\n & .Icon-svg {\n width: ${iconActualSize}\n }\n `}\n`;\n\nconst Container = styled.span.attrs({\n className: \"Icon\",\n})<{\n iconSize: TypeIconSize;\n fixedWidth: boolean;\n}>`\n display: inline-block;\n color: inherit;\n vertical-align: middle;\n\n ${(props) => stylesForSize(sizes[props.iconSize], props.fixedWidth)}\n\n ${COMMON}\n ${verticalAlign}\n`;\nexport default Container;\n","import * as React from \"react\";\nimport type { EnumIconNames } from \"@sproutsocial/seeds-icons\";\nimport type { EnumLogoNamesWithoutVariants } from \"@sproutsocial/seeds-partner-logos\";\nimport type {\n TypeStyledComponentsCommonProps,\n TypeSystemCommonProps,\n} from \"@sproutsocial/seeds-react-system-props\";\nimport type { TypeBoxProps } from \"@sproutsocial/seeds-react-box\";\n\nexport type TypeIconName = EnumIconNames | EnumLogoNamesWithoutVariants;\n\nexport type TypeIconSize =\n | \"mini\" // 12x12\n // TODO: deprecate default in favor of small in future release\n | \"default\" // 16x16\n | \"small\" // 16x16\n | \"medium\" // 24x24\n | \"large\" // 32x32\n | \"jumbo\"; // 64x64\n\nexport interface TypeIconProps\n extends TypeStyledComponentsCommonProps,\n TypeSystemCommonProps,\n Omit<React.ComponentPropsWithoutRef<\"span\">, \"color\"> {\n /** Name of the icon in the svg sprite */\n name: TypeIconName;\n size?: TypeIconSize;\n /** Whether the icon should have a fixed width or not. Use this when you need to align icons/text vertically in a list. */\n fixedWidth?: boolean;\n /** Label used to describe the icon if not used with an accompanying visual label */\n ariaLabel?: string;\n svgProps?: React.ComponentPropsWithoutRef<\"svg\">;\n}\n\nexport interface TypeToggleProps extends TypeBoxProps {\n /** Name of the icon to be shown in the active state */\n activeName: TypeIconName;\n /** Name of the icon to be shown in the inactive state */\n inactiveName: TypeIconName;\n /** Whether the active icon should be shown or not */\n isActive: boolean;\n /** The size of the icon. `small` is the default */\n size?: TypeIconSize;\n fixedWidth?: boolean;\n ariaLabel?: string;\n}\n","import Icon from \"./Icon\";\n\nexport default Icon;\nexport { Icon };\nexport { default as IconContainer } from \"./styles\";\nexport * from \"./IconTypes\";\n"],"mappings":"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","names":["styled","css","styled","css"]}
package/dist/index.d.mts CHANGED
@@ -1,3 +1,4 @@
1
+ import * as react_jsx_runtime from 'react/jsx-runtime';
1
2
  import * as React from 'react';
2
3
  import { EnumIconNames } from '@sproutsocial/seeds-icons';
3
4
  import { EnumLogoNamesWithoutVariants } from '@sproutsocial/seeds-partner-logos';
@@ -31,7 +32,7 @@ interface TypeToggleProps extends TypeBoxProps {
31
32
  }
32
33
 
33
34
  declare const Icon: {
34
- ({ name, size, fixedWidth, ariaLabel, color, svgProps, ...rest }: TypeIconProps): React.JSX.Element;
35
+ ({ name, size, fixedWidth, ariaLabel, color, svgProps, ...rest }: TypeIconProps): react_jsx_runtime.JSX.Element;
35
36
  /**
36
37
  * **Accessibility note:** It is best practice to wrap `<Icon.Toggle />` in a button. The button must include `aria-label` and `aria-pressed` in order for a screen reader to properly communicate the icon's state. See example below.
37
38
  *
@@ -52,7 +53,7 @@ declare const Icon: {
52
53
  * </Button>
53
54
  */
54
55
  Toggle: {
55
- ({ activeName, inactiveName, isActive, size, fixedWidth, ariaLabel, ...rest }: TypeToggleProps): React.JSX.Element;
56
+ ({ activeName, inactiveName, isActive, size, fixedWidth, ariaLabel, ...rest }: TypeToggleProps): react_jsx_runtime.JSX.Element;
56
57
  displayName: string;
57
58
  };
58
59
  };
package/dist/index.d.ts CHANGED
@@ -1,3 +1,4 @@
1
+ import * as react_jsx_runtime from 'react/jsx-runtime';
1
2
  import * as React from 'react';
2
3
  import { EnumIconNames } from '@sproutsocial/seeds-icons';
3
4
  import { EnumLogoNamesWithoutVariants } from '@sproutsocial/seeds-partner-logos';
@@ -31,7 +32,7 @@ interface TypeToggleProps extends TypeBoxProps {
31
32
  }
32
33
 
33
34
  declare const Icon: {
34
- ({ name, size, fixedWidth, ariaLabel, color, svgProps, ...rest }: TypeIconProps): React.JSX.Element;
35
+ ({ name, size, fixedWidth, ariaLabel, color, svgProps, ...rest }: TypeIconProps): react_jsx_runtime.JSX.Element;
35
36
  /**
36
37
  * **Accessibility note:** It is best practice to wrap `<Icon.Toggle />` in a button. The button must include `aria-label` and `aria-pressed` in order for a screen reader to properly communicate the icon's state. See example below.
37
38
  *
@@ -52,7 +53,7 @@ declare const Icon: {
52
53
  * </Button>
53
54
  */
54
55
  Toggle: {
55
- ({ activeName, inactiveName, isActive, size, fixedWidth, ariaLabel, ...rest }: TypeToggleProps): React.JSX.Element;
56
+ ({ activeName, inactiveName, isActive, size, fixedWidth, ariaLabel, ...rest }: TypeToggleProps): react_jsx_runtime.JSX.Element;
56
57
  displayName: string;
57
58
  };
58
59
  };
package/dist/index.js CHANGED
@@ -37,7 +37,7 @@ __export(src_exports, {
37
37
  module.exports = __toCommonJS(src_exports);
38
38
 
39
39
  // src/Icon.tsx
40
- var React = __toESM(require("react"));
40
+ var React = require("react");
41
41
  var import_styled_components2 = __toESM(require("styled-components"));
42
42
  var import_seeds_react_box = __toESM(require("@sproutsocial/seeds-react-box"));
43
43
  var import_seeds_react_partner_logo = __toESM(require("@sproutsocial/seeds-react-partner-logo"));
@@ -89,6 +89,7 @@ var styles_default = Container;
89
89
 
90
90
  // src/Icon.tsx
91
91
  var import_seeds_icons = require("@sproutsocial/seeds-icons");
92
+ var import_jsx_runtime = require("react/jsx-runtime");
92
93
  var AllViewboxes = {
93
94
  ...import_seeds_icons.ExternalViewBoxes,
94
95
  ...import_seeds_icons.GeneralViewBoxes,
@@ -111,7 +112,7 @@ var Icon = ({
111
112
  logoType: "symbol",
112
113
  svgProps
113
114
  };
114
- return /* @__PURE__ */ React.createElement(
115
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
115
116
  import_seeds_react_partner_logo.default,
116
117
  {
117
118
  "aria-label": ariaLabel,
@@ -132,35 +133,35 @@ var Icon = ({
132
133
  )
133
134
  );
134
135
  const iconViewBox = AllViewboxes[iconName];
135
- return /* @__PURE__ */ React.createElement(
136
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
136
137
  styles_default,
137
138
  {
138
139
  iconSize: size,
139
140
  fixedWidth: !!fixedWidth,
140
- key: iconName,
141
141
  role: "img",
142
142
  "aria-label": ariaLabel,
143
143
  "data-qa-icon": iconName,
144
144
  color,
145
- ...rest
146
- },
147
- /* @__PURE__ */ React.createElement(
148
- "svg",
149
- {
150
- className: "Icon-svg",
151
- viewBox: iconViewBox,
152
- focusable: false,
153
- "data-qa-icon-svg": `${iconName}-svg`,
154
- ...svgProps
155
- },
156
- /* @__PURE__ */ React.createElement(
157
- "use",
145
+ ...rest,
146
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
147
+ "svg",
158
148
  {
159
- xmlnsXlink: "http://www.w3.org/1999/xlink",
160
- xlinkHref: `#seeds-svgs_${iconName}`
149
+ className: "Icon-svg",
150
+ viewBox: iconViewBox,
151
+ focusable: false,
152
+ "data-qa-icon-svg": `${iconName}-svg`,
153
+ ...svgProps,
154
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
155
+ "use",
156
+ {
157
+ xmlnsXlink: "http://www.w3.org/1999/xlink",
158
+ xlinkHref: `#seeds-svgs_${iconName}`
159
+ }
160
+ )
161
161
  }
162
162
  )
163
- )
163
+ },
164
+ iconName
164
165
  );
165
166
  };
166
167
  var ToggleableIcon = (0, import_styled_components2.default)(Icon)`
@@ -186,32 +187,38 @@ var IconToggle = ({
186
187
  ariaLabel,
187
188
  ...rest
188
189
  }) => {
189
- return /* @__PURE__ */ React.createElement(import_seeds_react_box.default, { as: "span", position: "relative", display: "inline-flex", ...rest }, /* @__PURE__ */ React.createElement(
190
- ToggleableIcon,
191
- {
192
- active: isActive,
193
- name: activeName,
194
- size,
195
- fixedWidth,
196
- "aria-label": ariaLabel,
197
- "aria-hidden": !isActive
198
- }
199
- ), /* @__PURE__ */ React.createElement(
200
- ToggleableIcon,
201
- {
202
- active: !isActive,
203
- name: inactiveName,
204
- size,
205
- fixedWidth,
206
- "aria-label": ariaLabel,
207
- "aria-hidden": isActive
208
- }
209
- ));
190
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_seeds_react_box.default, { as: "span", position: "relative", display: "inline-flex", ...rest, children: [
191
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
192
+ ToggleableIcon,
193
+ {
194
+ active: isActive,
195
+ name: activeName,
196
+ size,
197
+ fixedWidth,
198
+ "aria-label": ariaLabel,
199
+ "aria-hidden": !isActive
200
+ }
201
+ ),
202
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
203
+ ToggleableIcon,
204
+ {
205
+ active: !isActive,
206
+ name: inactiveName,
207
+ size,
208
+ fixedWidth,
209
+ "aria-label": ariaLabel,
210
+ "aria-hidden": isActive
211
+ }
212
+ )
213
+ ] });
210
214
  };
211
215
  IconToggle.displayName = "Icon.Toggle";
212
216
  Icon.Toggle = IconToggle;
213
217
  var Icon_default = Icon;
214
218
 
219
+ // src/IconTypes.ts
220
+ var React2 = require("react");
221
+
215
222
  // src/index.ts
216
223
  var src_default = Icon_default;
217
224
  // Annotate the CommonJS export names for ESM import in node:
@@ -219,3 +226,4 @@ var src_default = Icon_default;
219
226
  Icon,
220
227
  IconContainer
221
228
  });
229
+ //# sourceMappingURL=index.js.map
package/dist/index.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/index.ts","../src/Icon.tsx","../src/styles.ts","../src/IconTypes.ts"],"sourcesContent":["import Icon from \"./Icon\";\n\nexport default Icon;\nexport { Icon };\nexport { default as IconContainer } from \"./styles\";\nexport * from \"./IconTypes\";\n","import * as React from \"react\";\nimport styled, { css } from \"styled-components\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport PartnerLogo from \"@sproutsocial/seeds-react-partner-logo\";\nimport { includes } from \"@sproutsocial/seeds-react-utilities\";\nimport { LogoNamesWithoutVariants as PartnerLogoNames } from \"@sproutsocial/seeds-partner-logos\";\n\nimport type { TypeIconProps, TypeToggleProps } from \"./IconTypes\";\nimport Container from \"./styles\";\nimport {\n ExternalViewBoxes,\n GeneralViewBoxes,\n SproutViewBoxes,\n ExternalIconNames,\n type EnumIconSvgNames,\n type EnumIconNamesWithoutVariants,\n} from \"@sproutsocial/seeds-icons\";\n\nconst AllViewboxes = {\n ...ExternalViewBoxes,\n ...GeneralViewBoxes,\n ...SproutViewBoxes,\n};\n\nconst Icon = ({\n name,\n size = \"small\",\n fixedWidth = false,\n ariaLabel,\n color,\n svgProps,\n ...rest\n}: TypeIconProps) => {\n if (includes(PartnerLogoNames, name)) {\n // Icon's \"default\" size is equivalent to PartnerLogo's \"small\" size\n const logoSize = size === \"default\" ? \"small\" : size;\n const logoProps = {\n partnerName: name,\n size: logoSize,\n logoType: \"symbol\" as const,\n svgProps,\n };\n return (\n <PartnerLogo\n // ariaLabel needs to be overridable by aria-label prop in ...rest\n aria-label={ariaLabel}\n {...rest}\n {...logoProps}\n />\n );\n }\n\n const defaultVariant = size === \"mini\" ? \"solid\" : \"outline\";\n\n const iconName: EnumIconSvgNames =\n // if not external and has no variant\n !name?.endsWith(\"-outline\") &&\n !name?.endsWith(\"-solid\") &&\n !includes(ExternalIconNames, name)\n ? // then add default variant\n `${name as EnumIconNamesWithoutVariants}-${defaultVariant}`\n : // else use name as is\n (name as EnumIconSvgNames);\n\n const iconViewBox = AllViewboxes[iconName];\n return (\n <Container\n iconSize={size}\n fixedWidth={!!fixedWidth}\n key={iconName}\n role=\"img\"\n aria-label={ariaLabel}\n data-qa-icon={iconName}\n color={color}\n {...rest}\n >\n <svg\n className=\"Icon-svg\"\n viewBox={iconViewBox}\n focusable={false}\n data-qa-icon-svg={`${iconName}-svg`}\n {...svgProps}\n >\n <use\n xmlnsXlink=\"http://www.w3.org/1999/xlink\"\n xlinkHref={`#seeds-svgs_${iconName}`}\n />\n </svg>\n </Container>\n );\n};\n\nconst ToggleableIcon = styled(Icon)<{ active: boolean }>`\n transition: all ${(p) => p.theme.duration.fast} linear;\n\n ${(p) =>\n p.active &&\n css`\n opacity: 1;\n transform: scale(1);\n `}\n\n ${(p) =>\n !p.active &&\n css`\n position: absolute;\n opacity: 0;\n transform: scale(0);\n `}\n`;\n\nconst IconToggle = ({\n activeName,\n inactiveName,\n isActive,\n size = \"small\",\n fixedWidth = false,\n ariaLabel,\n ...rest\n}: TypeToggleProps) => {\n return (\n <Box as=\"span\" position=\"relative\" display=\"inline-flex\" {...rest}>\n <ToggleableIcon\n active={isActive}\n name={activeName}\n size={size}\n fixedWidth={fixedWidth}\n aria-label={ariaLabel}\n aria-hidden={!isActive}\n />\n <ToggleableIcon\n active={!isActive}\n name={inactiveName}\n size={size}\n fixedWidth={fixedWidth}\n aria-label={ariaLabel}\n aria-hidden={isActive}\n />\n </Box>\n );\n};\n\nIconToggle.displayName = \"Icon.Toggle\";\n/**\n * **Accessibility note:** It is best practice to wrap `<Icon.Toggle />` in a button. The button must include `aria-label` and `aria-pressed` in order for a screen reader to properly communicate the icon's state. See example below.\n *\n * @link https://www.w3.org/TR/wai-aria-practices-1.1/#button\n * @example\n * const [toggleState, setToggleState] = useState(false);\n * <Button // Wrap Icon.Toggle with Button\n * appearance='pill'\n * aria-label='like' // required for accessibility\n * aria-pressed={toggleState} // required for accessibility\n * onClick={() => setToggleState(!toggleState)}\n * >\n * <Icon.Toggle\n * activeName=\"heart-solid\"\n * inactiveName=\"heart-outline\"\n * isActive={toggleState}\n * />\n * </Button>\n */\nIcon.Toggle = IconToggle;\n\nexport default Icon;\n","import styled, { css } from \"styled-components\";\nimport { verticalAlign } from \"styled-system\";\nimport { COMMON } from \"@sproutsocial/seeds-react-system-props\";\nimport type { TypeIconSize } from \"./IconTypes\";\n\nconst sizes: { [key in TypeIconSize]: string } = {\n mini: \"12px\",\n\n /** TODO: deprecate default in favor of small in future release */\n default: \"16px\",\n small: \"16px\",\n medium: \"24px\",\n large: \"32px\",\n jumbo: \"64px\",\n};\n\nconst stylesForSize = (iconActualSize: string, fixedWidth: boolean) => css`\n line-height: ${iconActualSize};\n\n &,\n .Icon-svg {\n height: ${iconActualSize};\n fill: currentColor;\n }\n\n ${fixedWidth &&\n `\n &,\n & .Icon-svg {\n width: ${iconActualSize}\n }\n `}\n`;\n\nconst Container = styled.span.attrs({\n className: \"Icon\",\n})<{\n iconSize: TypeIconSize;\n fixedWidth: boolean;\n}>`\n display: inline-block;\n color: inherit;\n vertical-align: middle;\n\n ${(props) => stylesForSize(sizes[props.iconSize], props.fixedWidth)}\n\n ${COMMON}\n ${verticalAlign}\n`;\nexport default Container;\n","import * as React from \"react\";\nimport type { EnumIconNames } from \"@sproutsocial/seeds-icons\";\nimport type { EnumLogoNamesWithoutVariants } from \"@sproutsocial/seeds-partner-logos\";\nimport type {\n TypeStyledComponentsCommonProps,\n TypeSystemCommonProps,\n} from \"@sproutsocial/seeds-react-system-props\";\nimport type { TypeBoxProps } from \"@sproutsocial/seeds-react-box\";\n\nexport type TypeIconName = EnumIconNames | EnumLogoNamesWithoutVariants;\n\nexport type TypeIconSize =\n | \"mini\" // 12x12\n // TODO: deprecate default in favor of small in future release\n | \"default\" // 16x16\n | \"small\" // 16x16\n | \"medium\" // 24x24\n | \"large\" // 32x32\n | \"jumbo\"; // 64x64\n\nexport interface TypeIconProps\n extends TypeStyledComponentsCommonProps,\n TypeSystemCommonProps,\n Omit<React.ComponentPropsWithoutRef<\"span\">, \"color\"> {\n /** Name of the icon in the svg sprite */\n name: TypeIconName;\n size?: TypeIconSize;\n /** Whether the icon should have a fixed width or not. Use this when you need to align icons/text vertically in a list. */\n fixedWidth?: boolean;\n /** Label used to describe the icon if not used with an accompanying visual label */\n ariaLabel?: string;\n svgProps?: React.ComponentPropsWithoutRef<\"svg\">;\n}\n\nexport interface TypeToggleProps extends TypeBoxProps {\n /** Name of the icon to be shown in the active state */\n activeName: TypeIconName;\n /** Name of the icon to be shown in the inactive state */\n inactiveName: TypeIconName;\n /** Whether the active icon should be shown or not */\n isActive: boolean;\n /** The size of the icon. `small` is the default */\n size?: TypeIconSize;\n fixedWidth?: boolean;\n ariaLabel?: string;\n}\n"],"mappings":"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","names":["import_styled_components","styled","PartnerLogoNames","PartnerLogo","styled","Box","React"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sproutsocial/seeds-react-icon",
3
- "version": "1.0.2",
3
+ "version": "1.1.1",
4
4
  "description": "Seeds React Icon component",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/esm/index.js",
@@ -11,24 +11,28 @@
11
11
  "dist"
12
12
  ],
13
13
  "scripts": {
14
- "build": "tsup"
14
+ "build": "tsup --dts",
15
+ "dev": "tsup --watch --dts",
16
+ "clean": "rm -rf .turbo dist",
17
+ "clean:modules": "rm -rf node_modules",
18
+ "typecheck": "tsc --noEmit"
15
19
  },
16
20
  "dependencies": {
17
- "@sproutsocial/seeds-react-box": "^1.0.1",
18
- "@sproutsocial/seeds-react-partner-logo": "^1.0.0",
19
- "@sproutsocial/seeds-react-system-props": "^2.2.0",
20
- "@sproutsocial/seeds-react-theme": "^1.0.0",
21
- "@sproutsocial/seeds-react-utilities": "^3.0.0",
21
+ "@sproutsocial/seeds-react-box": "^*",
22
+ "@sproutsocial/seeds-react-partner-logo": "*",
23
+ "@sproutsocial/seeds-react-system-props": "*",
24
+ "@sproutsocial/seeds-react-theme": "*",
25
+ "@sproutsocial/seeds-react-utilities": "*",
22
26
  "styled-system": "^5.1.5"
23
27
  },
24
28
  "devDependencies": {
25
29
  "@sproutsocial/eslint-config-seeds": "*",
26
- "@sproutsocial/seeds-icons": "^1.8.0",
27
- "@sproutsocial/seeds-partner-logos": "^1.5.0",
30
+ "@sproutsocial/seeds-icons": "*",
31
+ "@sproutsocial/seeds-partner-logos": "*",
28
32
  "styled-components": "^5.2.3",
29
- "tsx": "3.13.0",
30
- "typescript": "^5.1.6",
31
- "tsup": "^8.0.2"
33
+ "typescript": "^5.6.2",
34
+ "tsup": "^8.0.2",
35
+ "@sproutsocial/seeds-tsconfig": "*"
32
36
  },
33
37
  "peerDependencies": {
34
38
  "@sproutsocial/seeds-icons": ">=1.8.0",