@sproutsocial/seeds-react-icon 1.0.0

package/dist/index.d.mts

@@ -0,0 +1,67 @@
+import * as React from 'react';
+import { EnumIconNames } from '@sproutsocial/seeds-icons';
+import { EnumLogoNamesWithoutVariants } from '@sproutsocial/seeds-partner-logos';
+import { TypeStyledComponentsCommonProps, TypeSystemCommonProps } from '@sproutsocial/seeds-react-system-props';
+import { TypeBoxProps } from '@sproutsocial/seeds-react-box';
+import * as styled_components from 'styled-components';
+
+type TypeIconName = EnumIconNames | EnumLogoNamesWithoutVariants;
+type TypeIconSize = "mini" | "default" | "small" | "medium" | "large" | "jumbo";
+interface TypeIconProps extends TypeStyledComponentsCommonProps, TypeSystemCommonProps, Omit<React.ComponentPropsWithoutRef<"span">, "color"> {
+    /** Name of the icon in the svg sprite */
+    name: TypeIconName;
+    size?: TypeIconSize;
+    /** Whether the icon should have a fixed width or not. Use this when you need to align icons/text vertically in a list. */
+    fixedWidth?: boolean;
+    /** Label used to describe the icon if not used with an accompanying visual label */
+    ariaLabel?: string;
+    svgProps?: React.ComponentPropsWithoutRef<"svg">;
+}
+interface TypeToggleProps extends TypeBoxProps {
+    /** Name of the icon to be shown in the active state */
+    activeName: TypeIconName;
+    /** Name of the icon to be shown in the inactive state */
+    inactiveName: TypeIconName;
+    /** Whether the active icon should be shown or not */
+    isActive: boolean;
+    /** The size of the icon. `small` is the default */
+    size?: TypeIconSize;
+    fixedWidth?: boolean;
+    ariaLabel?: string;
+}
+
+declare const Icon: {
+    ({ name, size, fixedWidth, ariaLabel, color, svgProps, ...rest }: TypeIconProps): React.JSX.Element;
+    /**
+     * **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.
+     *
+     * @link https://www.w3.org/TR/wai-aria-practices-1.1/#button
+     * @example
+     * const [toggleState, setToggleState] = useState(false);
+     * <Button  // Wrap Icon.Toggle with Button
+     *  appearance='pill'
+     *  aria-label='like' // required for accessibility
+     *  aria-pressed={toggleState} // required for accessibility
+     *  onClick={() => setToggleState(!toggleState)}
+     * >
+     *  <Icon.Toggle
+     *    activeName="heart-solid"
+     *    inactiveName="heart-outline"
+     *    isActive={toggleState}
+     *   />
+     * </Button>
+     */
+    Toggle: {
+        ({ activeName, inactiveName, isActive, size, fixedWidth, ariaLabel, ...rest }: TypeToggleProps): React.JSX.Element;
+        displayName: string;
+    };
+};
+
+declare const Container: styled_components.StyledComponent<"span", any, {
+    className: "Icon";
+} & {
+    iconSize: TypeIconSize;
+    fixedWidth: boolean;
+}, "className">;
+
+export { Icon, Container as IconContainer, type TypeIconName, type TypeIconProps, type TypeIconSize, type TypeToggleProps, Icon as default };

package/dist/index.d.ts

@@ -0,0 +1,67 @@
+import * as React from 'react';
+import { EnumIconNames } from '@sproutsocial/seeds-icons';
+import { EnumLogoNamesWithoutVariants } from '@sproutsocial/seeds-partner-logos';
+import { TypeStyledComponentsCommonProps, TypeSystemCommonProps } from '@sproutsocial/seeds-react-system-props';
+import { TypeBoxProps } from '@sproutsocial/seeds-react-box';
+import * as styled_components from 'styled-components';
+
+type TypeIconName = EnumIconNames | EnumLogoNamesWithoutVariants;
+type TypeIconSize = "mini" | "default" | "small" | "medium" | "large" | "jumbo";
+interface TypeIconProps extends TypeStyledComponentsCommonProps, TypeSystemCommonProps, Omit<React.ComponentPropsWithoutRef<"span">, "color"> {
+    /** Name of the icon in the svg sprite */
+    name: TypeIconName;
+    size?: TypeIconSize;
+    /** Whether the icon should have a fixed width or not. Use this when you need to align icons/text vertically in a list. */
+    fixedWidth?: boolean;
+    /** Label used to describe the icon if not used with an accompanying visual label */
+    ariaLabel?: string;
+    svgProps?: React.ComponentPropsWithoutRef<"svg">;
+}
+interface TypeToggleProps extends TypeBoxProps {
+    /** Name of the icon to be shown in the active state */
+    activeName: TypeIconName;
+    /** Name of the icon to be shown in the inactive state */
+    inactiveName: TypeIconName;
+    /** Whether the active icon should be shown or not */
+    isActive: boolean;
+    /** The size of the icon. `small` is the default */
+    size?: TypeIconSize;
+    fixedWidth?: boolean;
+    ariaLabel?: string;
+}
+
+declare const Icon: {
+    ({ name, size, fixedWidth, ariaLabel, color, svgProps, ...rest }: TypeIconProps): React.JSX.Element;
+    /**
+     * **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.
+     *
+     * @link https://www.w3.org/TR/wai-aria-practices-1.1/#button
+     * @example
+     * const [toggleState, setToggleState] = useState(false);
+     * <Button  // Wrap Icon.Toggle with Button
+     *  appearance='pill'
+     *  aria-label='like' // required for accessibility
+     *  aria-pressed={toggleState} // required for accessibility
+     *  onClick={() => setToggleState(!toggleState)}
+     * >
+     *  <Icon.Toggle
+     *    activeName="heart-solid"
+     *    inactiveName="heart-outline"
+     *    isActive={toggleState}
+     *   />
+     * </Button>
+     */
+    Toggle: {
+        ({ activeName, inactiveName, isActive, size, fixedWidth, ariaLabel, ...rest }: TypeToggleProps): React.JSX.Element;
+        displayName: string;
+    };
+};
+
+declare const Container: styled_components.StyledComponent<"span", any, {
+    className: "Icon";
+} & {
+    iconSize: TypeIconSize;
+    fixedWidth: boolean;
+}, "className">;
+
+export { Icon, Container as IconContainer, type TypeIconName, type TypeIconProps, type TypeIconSize, type TypeToggleProps, Icon as default };

package/dist/index.js

@@ -0,0 +1,221 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  Icon: () => Icon_default,
+  IconContainer: () => styles_default,
+  default: () => src_default
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/Icon.tsx
+var React = __toESM(require("react"));
+var import_styled_components2 = __toESM(require("styled-components"));
+var import_seeds_react_box = __toESM(require("@sproutsocial/seeds-react-box"));
+var import_seeds_react_partner_logo = __toESM(require("@sproutsocial/seeds-react-partner-logo"));
+var import_seeds_react_utilities = require("@sproutsocial/seeds-react-utilities");
+var import_seeds_partner_logos = require("@sproutsocial/seeds-partner-logos");
+
+// src/styles.ts
+var import_styled_components = __toESM(require("styled-components"));
+var import_styled_system = require("styled-system");
+var import_seeds_react_system_props = require("@sproutsocial/seeds-react-system-props");
+var sizes = {
+  mini: "12px",
+  /** TODO: deprecate default  in favor of small in future release */
+  default: "16px",
+  small: "16px",
+  medium: "24px",
+  large: "32px",
+  jumbo: "64px"
+};
+var stylesForSize = (iconActualSize, fixedWidth) => import_styled_components.css`
+  line-height: ${iconActualSize};
+
+  &,
+  .Icon-svg {
+    height: ${iconActualSize};
+    fill: currentColor;
+  }
+
+  ${fixedWidth && `
+    &,
+    & .Icon-svg {
+      width: ${iconActualSize}
+    }
+  `}
+`;
+var Container = import_styled_components.default.span.attrs({
+  className: "Icon"
+})`
+  display: inline-block;
+  color: inherit;
+  vertical-align: middle;
+
+  ${(props) => stylesForSize(sizes[props.iconSize], props.fixedWidth)}
+
+  ${import_seeds_react_system_props.COMMON}
+  ${import_styled_system.verticalAlign}
+`;
+var styles_default = Container;
+
+// src/Icon.tsx
+var import_seeds_icons = require("@sproutsocial/seeds-icons");
+var AllViewboxes = {
+  ...import_seeds_icons.ExternalViewBoxes,
+  ...import_seeds_icons.GeneralViewBoxes,
+  ...import_seeds_icons.SproutViewBoxes
+};
+var Icon = ({
+  name,
+  size = "small",
+  fixedWidth = false,
+  ariaLabel,
+  color,
+  svgProps,
+  ...rest
+}) => {
+  if ((0, import_seeds_react_utilities.includes)(import_seeds_partner_logos.LogoNamesWithoutVariants, name)) {
+    const logoSize = size === "default" ? "small" : size;
+    const logoProps = {
+      partnerName: name,
+      size: logoSize,
+      logoType: "symbol",
+      svgProps
+    };
+    return /* @__PURE__ */ React.createElement(
+      import_seeds_react_partner_logo.default,
+      {
+        "aria-label": ariaLabel,
+        ...rest,
+        ...logoProps
+      }
+    );
+  }
+  const defaultVariant = size === "mini" ? "solid" : "outline";
+  const iconName = (
+    // if not external and has no variant
+    !name?.endsWith("-outline") && !name?.endsWith("-solid") && !(0, import_seeds_react_utilities.includes)(import_seeds_icons.ExternalIconNames, name) ? (
+      // then add default variant
+      `${name}-${defaultVariant}`
+    ) : (
+      // else use name as is
+      name
+    )
+  );
+  const iconViewBox = AllViewboxes[iconName];
+  return /* @__PURE__ */ React.createElement(
+    styles_default,
+    {
+      iconSize: size,
+      fixedWidth: !!fixedWidth,
+      key: iconName,
+      role: "img",
+      "aria-label": ariaLabel,
+      "data-qa-icon": iconName,
+      color,
+      ...rest
+    },
+    /* @__PURE__ */ React.createElement(
+      "svg",
+      {
+        className: "Icon-svg",
+        viewBox: iconViewBox,
+        focusable: false,
+        "data-qa-icon-svg": `${iconName}-svg`,
+        ...svgProps
+      },
+      /* @__PURE__ */ React.createElement(
+        "use",
+        {
+          xmlnsXlink: "http://www.w3.org/1999/xlink",
+          xlinkHref: `#seeds-svgs_${iconName}`
+        }
+      )
+    )
+  );
+};
+var ToggleableIcon = (0, import_styled_components2.default)(Icon)`
+  transition: all ${(p) => p.theme.duration.fast} linear;
+
+  ${(p) => p.active && import_styled_components2.css`
+      opacity: 1;
+      transform: scale(1);
+    `}
+
+  ${(p) => !p.active && import_styled_components2.css`
+      position: absolute;
+      opacity: 0;
+      transform: scale(0);
+    `}
+`;
+var IconToggle = ({
+  activeName,
+  inactiveName,
+  isActive,
+  size = "small",
+  fixedWidth = false,
+  ariaLabel,
+  ...rest
+}) => {
+  return /* @__PURE__ */ React.createElement(import_seeds_react_box.default, { as: "span", position: "relative", display: "inline-flex", ...rest }, /* @__PURE__ */ React.createElement(
+    ToggleableIcon,
+    {
+      active: isActive,
+      name: activeName,
+      size,
+      fixedWidth,
+      "aria-label": ariaLabel,
+      "aria-hidden": !isActive
+    }
+  ), /* @__PURE__ */ React.createElement(
+    ToggleableIcon,
+    {
+      active: !isActive,
+      name: inactiveName,
+      size,
+      fixedWidth,
+      "aria-label": ariaLabel,
+      "aria-hidden": isActive
+    }
+  ));
+};
+IconToggle.displayName = "Icon.Toggle";
+Icon.Toggle = IconToggle;
+var Icon_default = Icon;
+
+// src/index.ts
+var src_default = Icon_default;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Icon,
+  IconContainer
+});

package/dist/index.mjs

@@ -0,0 +1,188 @@
+// src/Icon.tsx
+import * as React from "react";
+import styled2, { css as css2 } from "styled-components";
+import Box from "@sproutsocial/seeds-react-box";
+import PartnerLogo from "@sproutsocial/seeds-react-partner-logo";
+import { includes } from "@sproutsocial/seeds-react-utilities";
+import { LogoNamesWithoutVariants as PartnerLogoNames } from "@sproutsocial/seeds-partner-logos";
+
+// src/styles.ts
+import styled, { css } from "styled-components";
+import { verticalAlign } from "styled-system";
+import { COMMON } from "@sproutsocial/seeds-react-system-props";
+var sizes = {
+  mini: "12px",
+  /** TODO: deprecate default  in favor of small in future release */
+  default: "16px",
+  small: "16px",
+  medium: "24px",
+  large: "32px",
+  jumbo: "64px"
+};
+var stylesForSize = (iconActualSize, fixedWidth) => css`
+  line-height: ${iconActualSize};
+
+  &,
+  .Icon-svg {
+    height: ${iconActualSize};
+    fill: currentColor;
+  }
+
+  ${fixedWidth && `
+    &,
+    & .Icon-svg {
+      width: ${iconActualSize}
+    }
+  `}
+`;
+var Container = styled.span.attrs({
+  className: "Icon"
+})`
+  display: inline-block;
+  color: inherit;
+  vertical-align: middle;
+
+  ${(props) => stylesForSize(sizes[props.iconSize], props.fixedWidth)}
+
+  ${COMMON}
+  ${verticalAlign}
+`;
+var styles_default = Container;
+
+// src/Icon.tsx
+import {
+  ExternalViewBoxes,
+  GeneralViewBoxes,
+  SproutViewBoxes,
+  ExternalIconNames
+} from "@sproutsocial/seeds-icons";
+var AllViewboxes = {
+  ...ExternalViewBoxes,
+  ...GeneralViewBoxes,
+  ...SproutViewBoxes
+};
+var Icon = ({
+  name,
+  size = "small",
+  fixedWidth = false,
+  ariaLabel,
+  color,
+  svgProps,
+  ...rest
+}) => {
+  if (includes(PartnerLogoNames, name)) {
+    const logoSize = size === "default" ? "small" : size;
+    const logoProps = {
+      partnerName: name,
+      size: logoSize,
+      logoType: "symbol",
+      svgProps
+    };
+    return /* @__PURE__ */ React.createElement(
+      PartnerLogo,
+      {
+        "aria-label": ariaLabel,
+        ...rest,
+        ...logoProps
+      }
+    );
+  }
+  const defaultVariant = size === "mini" ? "solid" : "outline";
+  const iconName = (
+    // if not external and has no variant
+    !name?.endsWith("-outline") && !name?.endsWith("-solid") && !includes(ExternalIconNames, name) ? (
+      // then add default variant
+      `${name}-${defaultVariant}`
+    ) : (
+      // else use name as is
+      name
+    )
+  );
+  const iconViewBox = AllViewboxes[iconName];
+  return /* @__PURE__ */ React.createElement(
+    styles_default,
+    {
+      iconSize: size,
+      fixedWidth: !!fixedWidth,
+      key: iconName,
+      role: "img",
+      "aria-label": ariaLabel,
+      "data-qa-icon": iconName,
+      color,
+      ...rest
+    },
+    /* @__PURE__ */ React.createElement(
+      "svg",
+      {
+        className: "Icon-svg",
+        viewBox: iconViewBox,
+        focusable: false,
+        "data-qa-icon-svg": `${iconName}-svg`,
+        ...svgProps
+      },
+      /* @__PURE__ */ React.createElement(
+        "use",
+        {
+          xmlnsXlink: "http://www.w3.org/1999/xlink",
+          xlinkHref: `#seeds-svgs_${iconName}`
+        }
+      )
+    )
+  );
+};
+var ToggleableIcon = styled2(Icon)`
+  transition: all ${(p) => p.theme.duration.fast} linear;
+
+  ${(p) => p.active && css2`
+      opacity: 1;
+      transform: scale(1);
+    `}
+
+  ${(p) => !p.active && css2`
+      position: absolute;
+      opacity: 0;
+      transform: scale(0);
+    `}
+`;
+var IconToggle = ({
+  activeName,
+  inactiveName,
+  isActive,
+  size = "small",
+  fixedWidth = false,
+  ariaLabel,
+  ...rest
+}) => {
+  return /* @__PURE__ */ React.createElement(Box, { as: "span", position: "relative", display: "inline-flex", ...rest }, /* @__PURE__ */ React.createElement(
+    ToggleableIcon,
+    {
+      active: isActive,
+      name: activeName,
+      size,
+      fixedWidth,
+      "aria-label": ariaLabel,
+      "aria-hidden": !isActive
+    }
+  ), /* @__PURE__ */ React.createElement(
+    ToggleableIcon,
+    {
+      active: !isActive,
+      name: inactiveName,
+      size,
+      fixedWidth,
+      "aria-label": ariaLabel,
+      "aria-hidden": isActive
+    }
+  ));
+};
+IconToggle.displayName = "Icon.Toggle";
+Icon.Toggle = IconToggle;
+var Icon_default = Icon;
+
+// src/index.ts
+var src_default = Icon_default;
+export {
+  Icon_default as Icon,
+  styles_default as IconContainer,
+  src_default as default
+};

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@sproutsocial/seeds-react-icon",
+  "version": "1.0.0",
+  "description": "Seeds React Icon component",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "author": "Sprout Social, Inc.",
+  "license": "MIT",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup"
+  },
+  "dependencies": {
+    "@sproutsocial/seeds-react-box": "^1.0.1",
+    "@sproutsocial/seeds-react-partner-logo": "^1.0.0",
+    "@sproutsocial/seeds-react-system-props": "^2.1.0",
+    "@sproutsocial/seeds-react-theme": "^1.0.0",
+    "@sproutsocial/seeds-react-utilities": "^2.0.0",
+    "styled-system": "^5.1.5"
+  },
+  "devDependencies": {
+    "@sproutsocial/eslint-config-seeds": "*",
+    "@sproutsocial/seeds-icons": "^1.8.0",
+    "@sproutsocial/seeds-partner-logos": "^1.5.0",
+    "styled-components": "^5.2.3",
+    "tsx": "3.13.0",
+    "typescript": "^5.1.6",
+    "tsup": "^8.0.2"
+  },
+  "peerDependencies": {
+    "@sproutsocial/seeds-icons": ">=1.8.0",
+    "@sproutsocial/seeds-partner-logos": ">=1.5.0",
+    "styled-components": "^5.2.3"
+  },
+  "engines": {
+    "node": ">=18"
+  }
+}