npm - @sproutsocial/seeds-react-icon - Versions diffs - 2.2.1 → 2.2.2 - Mend

@sproutsocial/seeds-react-icon 2.2.1 → 2.2.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/dist/esm/index.js CHANGED Viewed

@@ -100,9 +100,10 @@ var Icon = ({
     )
   );
   const iconViewBox = AllViewboxes[iconName];
-  const hasAriaLabel = !!ariaLabel || !!rest["aria-label"];
+  const { "aria-label": ariaLabelFromRest, ...restWithoutAriaLabel } = rest;
+  const hasAriaLabel = !!ariaLabel || !!ariaLabelFromRest;
   const containerAriaProps = hasAriaLabel ? {} : { "aria-hidden": "true" };
-  const svgAriaProps = hasAriaLabel ? { role: "img", "aria-label": ariaLabel ?? rest["aria-label"] } : {};
+  const svgAriaProps = hasAriaLabel ? { role: "img", "aria-label": ariaLabel ?? ariaLabelFromRest } : {};
   return /* @__PURE__ */ jsx(
     styles_default,
     {
@@ -110,7 +111,7 @@ var Icon = ({
       fixedWidth: !!fixedWidth,
       "data-qa-icon": iconName,
       color,
-      ...rest,
+      ...restWithoutAriaLabel,
       ...containerAriaProps,
       children: /* @__PURE__ */ jsx(
         "svg",

package/dist/esm/index.js.map CHANGED Viewed

	@@ -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 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"]}
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 { \"aria-label\": ariaLabelFromRest, ...restWithoutAriaLabel } = rest;\n const hasAriaLabel = !!ariaLabel \|\| !!ariaLabelFromRest;\n const containerAriaProps = hasAriaLabel ? {} : { \"aria-hidden\": \"true\" };\n const svgAriaProps = hasAriaLabel\n ? { role: \"img\", \"aria-label\": ariaLabel ?? ariaLabelFromRest }\n : {};\n\n return (\n <Container\n iconSize={size}\n fixedWidth={!!fixedWidth}\n key={iconName}\n data-qa-icon={iconName}\n color={color}\n {...restWithoutAriaLabel}\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 Viewed

@@ -133,9 +133,10 @@ var Icon = ({
     )
   );
   const iconViewBox = AllViewboxes[iconName];
-  const hasAriaLabel = !!ariaLabel || !!rest["aria-label"];
+  const { "aria-label": ariaLabelFromRest, ...restWithoutAriaLabel } = rest;
+  const hasAriaLabel = !!ariaLabel || !!ariaLabelFromRest;
   const containerAriaProps = hasAriaLabel ? {} : { "aria-hidden": "true" };
-  const svgAriaProps = hasAriaLabel ? { role: "img", "aria-label": ariaLabel ?? rest["aria-label"] } : {};
+  const svgAriaProps = hasAriaLabel ? { role: "img", "aria-label": ariaLabel ?? ariaLabelFromRest } : {};
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     styles_default,
     {
@@ -143,7 +144,7 @@ var Icon = ({
       fixedWidth: !!fixedWidth,
       "data-qa-icon": iconName,
       color,
-      ...rest,
+      ...restWithoutAriaLabel,
       ...containerAriaProps,
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         "svg",

package/dist/index.js.map CHANGED Viewed

	@@ -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 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"]}
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 { \"aria-label\": ariaLabelFromRest, ...restWithoutAriaLabel } = rest;\n const hasAriaLabel = !!ariaLabel \|\| !!ariaLabelFromRest;\n const containerAriaProps = hasAriaLabel ? {} : { \"aria-hidden\": \"true\" };\n const svgAriaProps = hasAriaLabel\n ? { role: \"img\", \"aria-label\": ariaLabel ?? ariaLabelFromRest }\n : {};\n\n return (\n <Container\n iconSize={size}\n fixedWidth={!!fixedWidth}\n key={iconName}\n data-qa-icon={iconName}\n color={color}\n {...restWithoutAriaLabel}\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 Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/seeds-react-icon",
-  "version": "2.2.1",
+  "version": "2.2.2",
   "description": "Seeds React Icon component",
   "main": "dist/index.js",
   "module": "dist/esm/index.js",