@sproutsocial/seeds-react-icon 2.1.1 → 2.2.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 +24 -23
  2. package/dist/esm/index.js.map +1 -1
  3. package/dist/index.js +24 -23
  4. package/dist/index.js.map +1 -1
  5. package/package.json +4 -4
package/dist/esm/index.js CHANGED
@@ -57,7 +57,6 @@ import {
57
57
  ExternalIconNames
58
58
  } from "@sproutsocial/seeds-icons";
59
59
  import { jsx, jsxs } from "react/jsx-runtime";
60
- import { createElement } from "react";
61
60
  var AllViewboxes = {
62
61
  ...ExternalViewBoxes,
63
62
  ...GeneralViewBoxes,
@@ -102,35 +101,37 @@ var Icon = ({
102
101
  );
103
102
  const iconViewBox = AllViewboxes[iconName];
104
103
  const hasAriaLabel = !!ariaLabel || !!rest["aria-label"];
105
- const ariaProps = hasAriaLabel ? { role: "img", "aria-label": ariaLabel } : { "aria-hidden": true };
106
- return /* @__PURE__ */ createElement(
104
+ const containerAriaProps = hasAriaLabel ? {} : { "aria-hidden": "true" };
105
+ const svgAriaProps = hasAriaLabel ? { role: "img", "aria-label": ariaLabel ?? rest["aria-label"] } : {};
106
+ return /* @__PURE__ */ jsx(
107
107
  styles_default,
108
108
  {
109
- ...ariaProps,
110
109
  iconSize: size,
111
110
  fixedWidth: !!fixedWidth,
112
- key: iconName,
113
111
  "data-qa-icon": iconName,
114
112
  color,
115
- ...rest
113
+ ...rest,
114
+ ...containerAriaProps,
115
+ children: /* @__PURE__ */ jsx(
116
+ "svg",
117
+ {
118
+ className: "Icon-svg",
119
+ viewBox: iconViewBox,
120
+ focusable: false,
121
+ "data-qa-icon-svg": `${iconName}-svg`,
122
+ ...svgProps,
123
+ ...svgAriaProps,
124
+ children: /* @__PURE__ */ jsx(
125
+ "use",
126
+ {
127
+ xmlnsXlink: "http://www.w3.org/1999/xlink",
128
+ xlinkHref: `#seeds-svgs_${iconName}`
129
+ }
130
+ )
131
+ }
132
+ )
116
133
  },
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
- )
134
+ iconName
134
135
  );
135
136
  };
136
137
  var ToggleableIcon = styled2(Icon)`
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\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"]}
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 containerAriaProps = hasAriaLabel ? {} : { \"aria-hidden\": \"true\" };\n const svgAriaProps = hasAriaLabel\n ? { role: \"img\", \"aria-label\": ariaLabel ?? rest[\"aria-label\"] }\n : {};\n\n return (\n <Container\n iconSize={size}\n fixedWidth={!!fixedWidth}\n key={iconName}\n data-qa-icon={iconName}\n color={color}\n {...rest}\n {...containerAriaProps}\n >\n <svg\n className=\"Icon-svg\"\n viewBox={iconViewBox}\n focusable={false}\n data-qa-icon-svg={`${iconName}-svg`}\n {...svgProps}\n {...svgAriaProps}\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,7 +90,6 @@ 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");
94
93
  var AllViewboxes = {
95
94
  ...import_seeds_icons.ExternalViewBoxes,
96
95
  ...import_seeds_icons.GeneralViewBoxes,
@@ -135,35 +134,37 @@ var Icon = ({
135
134
  );
136
135
  const iconViewBox = AllViewboxes[iconName];
137
136
  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
+ const containerAriaProps = hasAriaLabel ? {} : { "aria-hidden": "true" };
138
+ const svgAriaProps = hasAriaLabel ? { role: "img", "aria-label": ariaLabel ?? rest["aria-label"] } : {};
139
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
140
140
  styles_default,
141
141
  {
142
- ...ariaProps,
143
142
  iconSize: size,
144
143
  fixedWidth: !!fixedWidth,
145
- key: iconName,
146
144
  "data-qa-icon": iconName,
147
145
  color,
148
- ...rest
146
+ ...rest,
147
+ ...containerAriaProps,
148
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
149
+ "svg",
150
+ {
151
+ className: "Icon-svg",
152
+ viewBox: iconViewBox,
153
+ focusable: false,
154
+ "data-qa-icon-svg": `${iconName}-svg`,
155
+ ...svgProps,
156
+ ...svgAriaProps,
157
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
158
+ "use",
159
+ {
160
+ xmlnsXlink: "http://www.w3.org/1999/xlink",
161
+ xlinkHref: `#seeds-svgs_${iconName}`
162
+ }
163
+ )
164
+ }
165
+ )
149
166
  },
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
- )
167
+ iconName
167
168
  );
168
169
  };
169
170
  var ToggleableIcon = (0, import_styled_components2.default)(Icon)`
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\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"]}
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 containerAriaProps = hasAriaLabel ? {} : { \"aria-hidden\": \"true\" };\n const svgAriaProps = hasAriaLabel\n ? { role: \"img\", \"aria-label\": ariaLabel ?? rest[\"aria-label\"] }\n : {};\n\n return (\n <Container\n iconSize={size}\n fixedWidth={!!fixedWidth}\n key={iconName}\n data-qa-icon={iconName}\n color={color}\n {...rest}\n {...containerAriaProps}\n >\n <svg\n className=\"Icon-svg\"\n viewBox={iconViewBox}\n focusable={false}\n data-qa-icon-svg={`${iconName}-svg`}\n {...svgProps}\n {...svgAriaProps}\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.1.1",
3
+ "version": "2.2.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.10",
23
- "@sproutsocial/seeds-react-partner-logo": "^1.6.1",
22
+ "@sproutsocial/seeds-react-box": "^1.1.12",
23
+ "@sproutsocial/seeds-react-partner-logo": "^1.7.0",
24
24
  "@sproutsocial/seeds-react-system-props": "^3.0.1",
25
- "@sproutsocial/seeds-react-theme": "^3.3.2",
25
+ "@sproutsocial/seeds-react-theme": "^3.5.0",
26
26
  "@sproutsocial/seeds-react-utilities": "^4.0.1",
27
27
  "styled-system": "^5.1.5"
28
28
  },