@sproutsocial/seeds-react-icon 2.0.4 → 2.1.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 (5) hide show
  1. package/dist/esm/index.js +28 -27
  2. package/dist/esm/index.js.map +1 -1
  3. package/dist/index.js +28 -27
  4. package/dist/index.js.map +1 -1
  5. package/package.json +4 -4
package/dist/esm/index.js CHANGED
@@ -57,6 +57,7 @@ import {
57
57
  ExternalIconNames
58
58
  } from "@sproutsocial/seeds-icons";
59
59
  import { jsx, jsxs } from "react/jsx-runtime";
60
+ import { createElement } from "react";
60
61
  var AllViewboxes = {
61
62
  ...ExternalViewBoxes,
62
63
  ...GeneralViewBoxes,
@@ -100,36 +101,36 @@ var Icon = ({
100
101
  )
101
102
  );
102
103
  const iconViewBox = AllViewboxes[iconName];
103
- return /* @__PURE__ */ jsx(
104
+ const hasAriaLabel = !!ariaLabel || !!rest["aria-label"];
105
+ const ariaProps = hasAriaLabel ? { role: "img", "aria-label": ariaLabel } : { "aria-hidden": true };
106
+ return /* @__PURE__ */ createElement(
104
107
  styles_default,
105
108
  {
109
+ ...ariaProps,
106
110
  iconSize: size,
107
111
  fixedWidth: !!fixedWidth,
108
- role: "img",
109
- "aria-label": ariaLabel,
112
+ key: iconName,
110
113
  "data-qa-icon": iconName,
111
114
  color,
112
- "aria-hidden": ariaLabel || rest["aria-label"] ? void 0 : true,
113
- ...rest,
114
- children: /* @__PURE__ */ jsx(
115
- "svg",
116
- {
117
- className: "Icon-svg",
118
- viewBox: iconViewBox,
119
- focusable: false,
120
- "data-qa-icon-svg": `${iconName}-svg`,
121
- ...svgProps,
122
- children: /* @__PURE__ */ jsx(
123
- "use",
124
- {
125
- xmlnsXlink: "http://www.w3.org/1999/xlink",
126
- xlinkHref: `#seeds-svgs_${iconName}`
127
- }
128
- )
129
- }
130
- )
115
+ ...rest
131
116
  },
132
- iconName
117
+ /* @__PURE__ */ jsx(
118
+ "svg",
119
+ {
120
+ className: "Icon-svg",
121
+ viewBox: iconViewBox,
122
+ focusable: false,
123
+ "data-qa-icon-svg": `${iconName}-svg`,
124
+ ...svgProps,
125
+ children: /* @__PURE__ */ jsx(
126
+ "use",
127
+ {
128
+ xmlnsXlink: "http://www.w3.org/1999/xlink",
129
+ xlinkHref: `#seeds-svgs_${iconName}`
130
+ }
131
+ )
132
+ }
133
+ )
133
134
  );
134
135
  };
135
136
  var ToggleableIcon = styled2(Icon)`
@@ -163,8 +164,8 @@ var IconToggle = ({
163
164
  name: activeName,
164
165
  size,
165
166
  fixedWidth,
166
- "aria-label": ariaLabel,
167
- "aria-hidden": !isActive
167
+ "aria-hidden": !isActive,
168
+ "aria-label": !isActive ? void 0 : ariaLabel
168
169
  }
169
170
  ),
170
171
  /* @__PURE__ */ jsx(
@@ -174,8 +175,8 @@ var IconToggle = ({
174
175
  name: inactiveName,
175
176
  size,
176
177
  fixedWidth,
177
- "aria-label": ariaLabel,
178
- "aria-hidden": isActive
178
+ "aria-hidden": isActive,
179
+ "aria-label": isActive ? ariaLabel : void 0
179
180
  }
180
181
  )
181
182
  ] });
package/dist/esm/index.js.map CHANGED
@@ -1 +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 aria-hidden={ariaLabel || rest[\"aria-label\"] ? undefined : true}\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"]}
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\n const hasAriaLabel = !!ariaLabel || !!rest[\"aria-label\"];\n const ariaProps = hasAriaLabel\n ? { role: \"img\", \"aria-label\": ariaLabel }\n : { \"aria-hidden\": true };\n\n return (\n <Container\n {...ariaProps}\n iconSize={size}\n fixedWidth={!!fixedWidth}\n key={iconName}\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-hidden={!isActive}\n aria-label={!isActive ? undefined : ariaLabel}\n />\n <ToggleableIcon\n active={!isActive}\n name={inactiveName}\n size={size}\n fixedWidth={fixedWidth}\n aria-hidden={isActive}\n aria-label={isActive ? ariaLabel : undefined}\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.js CHANGED
@@ -90,6 +90,7 @@ var styles_default = Container;
90
90
  // src/Icon.tsx
91
91
  var import_seeds_icons = require("@sproutsocial/seeds-icons");
92
92
  var import_jsx_runtime = require("react/jsx-runtime");
93
+ var import_react = require("react");
93
94
  var AllViewboxes = {
94
95
  ...import_seeds_icons.ExternalViewBoxes,
95
96
  ...import_seeds_icons.GeneralViewBoxes,
@@ -133,36 +134,36 @@ var Icon = ({
133
134
  )
134
135
  );
135
136
  const iconViewBox = AllViewboxes[iconName];
136
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
137
+ const hasAriaLabel = !!ariaLabel || !!rest["aria-label"];
138
+ const ariaProps = hasAriaLabel ? { role: "img", "aria-label": ariaLabel } : { "aria-hidden": true };
139
+ return /* @__PURE__ */ (0, import_react.createElement)(
137
140
  styles_default,
138
141
  {
142
+ ...ariaProps,
139
143
  iconSize: size,
140
144
  fixedWidth: !!fixedWidth,
141
- role: "img",
142
- "aria-label": ariaLabel,
145
+ key: iconName,
143
146
  "data-qa-icon": iconName,
144
147
  color,
145
- "aria-hidden": ariaLabel || rest["aria-label"] ? void 0 : true,
146
- ...rest,
147
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
148
- "svg",
149
- {
150
- className: "Icon-svg",
151
- viewBox: iconViewBox,
152
- focusable: false,
153
- "data-qa-icon-svg": `${iconName}-svg`,
154
- ...svgProps,
155
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
156
- "use",
157
- {
158
- xmlnsXlink: "http://www.w3.org/1999/xlink",
159
- xlinkHref: `#seeds-svgs_${iconName}`
160
- }
161
- )
162
- }
163
- )
148
+ ...rest
164
149
  },
165
- iconName
150
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
151
+ "svg",
152
+ {
153
+ className: "Icon-svg",
154
+ viewBox: iconViewBox,
155
+ focusable: false,
156
+ "data-qa-icon-svg": `${iconName}-svg`,
157
+ ...svgProps,
158
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
159
+ "use",
160
+ {
161
+ xmlnsXlink: "http://www.w3.org/1999/xlink",
162
+ xlinkHref: `#seeds-svgs_${iconName}`
163
+ }
164
+ )
165
+ }
166
+ )
166
167
  );
167
168
  };
168
169
  var ToggleableIcon = (0, import_styled_components2.default)(Icon)`
@@ -196,8 +197,8 @@ var IconToggle = ({
196
197
  name: activeName,
197
198
  size,
198
199
  fixedWidth,
199
- "aria-label": ariaLabel,
200
- "aria-hidden": !isActive
200
+ "aria-hidden": !isActive,
201
+ "aria-label": !isActive ? void 0 : ariaLabel
201
202
  }
202
203
  ),
203
204
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -207,8 +208,8 @@ var IconToggle = ({
207
208
  name: inactiveName,
208
209
  size,
209
210
  fixedWidth,
210
- "aria-label": ariaLabel,
211
- "aria-hidden": isActive
211
+ "aria-hidden": isActive,
212
+ "aria-label": isActive ? ariaLabel : void 0
212
213
  }
213
214
  )
214
215
  ] });
package/dist/index.js.map CHANGED
@@ -1 +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 aria-hidden={ariaLabel || rest[\"aria-label\"] ? undefined : true}\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"]}
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\n const hasAriaLabel = !!ariaLabel || !!rest[\"aria-label\"];\n const ariaProps = hasAriaLabel\n ? { role: \"img\", \"aria-label\": ariaLabel }\n : { \"aria-hidden\": true };\n\n return (\n <Container\n {...ariaProps}\n iconSize={size}\n fixedWidth={!!fixedWidth}\n key={iconName}\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-hidden={!isActive}\n aria-label={!isActive ? undefined : ariaLabel}\n />\n <ToggleableIcon\n active={!isActive}\n name={inactiveName}\n size={size}\n fixedWidth={fixedWidth}\n aria-hidden={isActive}\n aria-label={isActive ? ariaLabel : undefined}\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": "2.0.4",
3
+ "version": "2.1.0",
4
4
  "description": "Seeds React Icon component",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/esm/index.js",
@@ -19,10 +19,10 @@
19
19
  "typecheck": "tsc --noEmit"
20
20
  },
21
21
  "dependencies": {
22
- "@sproutsocial/seeds-react-box": "^1.1.8",
23
- "@sproutsocial/seeds-react-partner-logo": "^1.5.0",
22
+ "@sproutsocial/seeds-react-box": "^1.1.9",
23
+ "@sproutsocial/seeds-react-partner-logo": "^1.6.0",
24
24
  "@sproutsocial/seeds-react-system-props": "^3.0.1",
25
- "@sproutsocial/seeds-react-theme": "^3.3.0",
25
+ "@sproutsocial/seeds-react-theme": "^3.3.1",
26
26
  "@sproutsocial/seeds-react-utilities": "^4.0.1",
27
27
  "styled-system": "^5.1.5"
28
28
  },