@tds/core-interactive-icon - npm Package Compare versions

Comparing version 1.4.7 to 2.0.0

__tests__/InteractiveIcon.spec.jsx

 import React from 'react'
 import { shallow, mount } from 'enzyme'
 
-import InteractiveIcon, { StyledInteractiveIconButton } from '../InteractiveButton'
+import IconButton, { StyledIconButton } from '../IconButton'
+import Add from '../svgs/Dependent/Add'
 import Edit from '../svgs/Dependent/Edit'
@@ -12,15 +13,15 @@ import Link from '../../Link'
     shallow(
-      <InteractiveIcon a11yText="This is an interactive icon" {...props}>
+      <IconButton icon={Add} a11yText="This is an interactive icon" {...props}>
         <svg />
-      </InteractiveIcon>
+      </IconButton>
     )
 
   it('renders', () => {
-    const interactiveIcon = mount(
-      <InteractiveIcon a11yText="This is an interactive icon">
+    const iconButton = mount(
+      <IconButton icon={Add} a11yText="This is an interactive icon">
         <svg />
-      </InteractiveIcon>
+      </IconButton>
     )
 
-    expect(interactiveIcon).toMatchSnapshot()
+    expect(iconButton).toMatchSnapshot()
   })
@@ -39,14 +40,14 @@
   it('does other things', () => {
-    const interactiveIcon = doShallow()
+    const iconButton = doShallow()
 
-    expect(interactiveIcon).toExist()
+    expect(iconButton).toExist()
   })
 
   it('passes additional attributes to the element', () => {
-    const interactiveIcon = doShallow({ id: 'the-id', 'data-some-attr': 'some value' }).find(
-      StyledInteractiveIconButton
+    const iconButton = doShallow({ id: 'the-id', 'data-some-attr': 'some value' }).find(
+      StyledIconButton
     )
 
-    expect(interactiveIcon).toHaveProp('id', 'the-id')
-    expect(interactiveIcon).toHaveProp('data-some-attr', 'some value')
+    expect(iconButton).toHaveProp('id', 'the-id')
+    expect(iconButton).toHaveProp('data-some-attr', 'some value')
   })
@@ -61,3 +62,3 @@
 
-    expect(invertedLink.find(Edit)).toHaveProp('invert', true)
+    expect(invertedLink.find(Edit)).toHaveProp('color', 'white')
   })
@@ -105,3 +106,3 @@
   it('does not allow custom CSS', () => {
-    const interactiveIcon = doShallow({
+    const iconButton = doShallow({
       className: 'my-custom-class',
@@ -111,4 +112,4 @@ style: { color: 'hotpink' },
 
-    expect(interactiveIcon).not.toHaveProp('className', 'my-custom-class')
-    expect(interactiveIcon).not.toHaveProp('style')
+    expect(iconButton).not.toHaveProp('className', 'my-custom-class')
+    expect(iconButton).not.toHaveProp('style')
   })
@@ -118,10 +119,10 @@
     const ref = React.createRef()
-    const interactiveIcon = mount(
+    const iconButton = mount(
       <>
-        <InteractiveIcon ref={ref} a11yText="This is an interactive icon">
+        <IconButton icon={Add} ref={ref} a11yText="This is an iconButton">
           <svg />
-        </InteractiveIcon>
+        </IconButton>
       </>
     )
-    const target = interactiveIcon
+    const target = iconButton
       .find('StyledComponent')
@@ -128,0 +129,0 @@ .at(0)

CHANGELOG.md

@@ -6,2 +6,19 @@ # Change Log
 
+# [2.0.0](https://github.com/telus/tds-core/compare/@tds/core-interactive-icon@1.4.7...@tds/core-interactive-icon@2.0.0) (2020-03-17)
+
+
+### Features
+
+* **core-interactive-icon:** add color prop to dependent icon ([ef70f1e](https://github.com/telus/tds-core/commit/ef70f1e29553cf5dafb8b6d4eb7390211a39db43))
+* **core-interactive-icon:** replace InteractiveIcon with IconButton ([b29f2f5](https://github.com/telus/tds-core/commit/b29f2f5abd0918544c75dc8964c138fff47e53ab))
+
+
+### BREAKING CHANGES
+
+* **core-interactive-icon:** move all InteractiveIcon components to Dependent, add IconButton wrapper component
+
+
+
+
+
 ## [1.4.7](https://github.com/telus/tds-core/compare/@tds/core-interactive-icon@1.4.6...@tds/core-interactive-icon@1.4.7) (2020-03-11)
@@ -8,0 +25,0 @@

Dependent.jsx

 import React from 'react'
 import PropTypes from 'prop-types'
 import styled from 'styled-components'
-import { colorWhite } from '@tds/core-colours'
 
 import { DependentIconSizeContext } from '@tds/util-helpers'
+import {
+  colorGreyShark,
+  colorTelusPurple,
+  colorWhite,
+  colorAccessibleGreen,
+} from '@tds/core-colours'
 
@@ -20,16 +25,27 @@ const positionStyles = ({ paragraphSize }) => {
 
-const invertStyles = ({ invert }) => {
-  return {
-    fill: invert && colorWhite,
-  }
-}
 export const StyledDependentSVG = styled.svg.attrs({
   'aria-hidden': true,
   focusable: false,
-})(positionStyles, invertStyles, ({ paragraphSize }) => ({
-  width: paragraphSize === 'small' ? 20 : 24,
-  height: paragraphSize === 'small' ? 20 : 24,
-}))
+})(
+  positionStyles,
+  ({ paragraphSize }) => ({
+    width: paragraphSize === 'small' ? 20 : 24,
+    height: paragraphSize === 'small' ? 20 : 24,
+  }),
+  ({ color }) => {
+    let fill
+    if (color === 'greyShark') {
+      fill = colorGreyShark
+    } else if (color === 'white') {
+      fill = colorWhite
+    } else if (color === 'telusPurple') {
+      fill = colorTelusPurple
+    } else if (color === 'accessibleGreen') {
+      fill = colorAccessibleGreen
+    }
+    return { fill }
+  }
+)
 
-const Dependent = ({ invert, children, ...rest }) => {
+const Dependent = ({ children, ...rest }) => {
   return (
@@ -40,3 +56,2 @@ <DependentIconSizeContext.Consumer>
           paragraphSize,
-          invert,
           'data-testid': 'dependentSvg',
@@ -54,13 +69,9 @@ ...rest,
    */
-  invert: PropTypes.bool,
-  /**
-   * @ignore
-   */
   children: PropTypes.node.isRequired,
+  color: PropTypes.oneOf(['greyShark', 'white', 'telusPurple', 'accessibleGreen']),
 }
 
 Dependent.defaultProps = {
-  invert: false,
+  color: 'greyShark',
 }
-
 export default Dependent

Dependent.md

@@ -1,6 +0,4 @@
-## Dependent Icons
-
 ### Usage criteria
 
-These icons indicate interactivity, but are not interactive on their own. They depend on the Link component. They depend on the [Link](#/Links?id=link) component.
+These icons indicate interactivity, but are not interactive on their own. They depend on the [Link](#/Links?id=link) component.
 
@@ -12,63 +10,129 @@ - Must include accessible hidden text using `A11yContent` when label does not explicitly indicate use or action
 - Should depend on other interactive components with a visible label as part of the wrapper component
+- When used with [Link](#/Links?id=link), Dependent icons are 20x20 when wrapped by small Paragraph or Text sizes (14px), or 24x24 when wrapped with medium or large Paragraph or Text sizes. See Links with icons for more details
 
 ```jsx noeditor
 const IconTable = require('../../docs/components/custom/IconTable/IconTable').default
-;<IconTable
-  heading="Icons"
-  icons={[
-    {
-      name: 'Delete',
-      Component: Delete,
-      usageCriteria:
-        'Delete or edit an item. Use for authenticated or internal applications. Don’t use on marketing pages.',
-    },
-    {
-      name: 'Download',
-      Component: Download,
-      usageCriteria: 'Indicate download function',
-    },
-    {
-      name: 'DownloadPDF',
-      Component: DownloadPDF,
-      usageCriteria: 'Indicate download of a single PDF',
-    },
-    {
-      name: 'DownloadPDFs',
-      Component: DownloadPDFs,
-      usageCriteria: 'Indicate download of multiple PDFs',
-    },
-    {
-      name: 'Edit',
-      Component: Edit,
-      usageCriteria:
-        'Indicate ability to edit. Use for authenticated or internal applications. Don’t use on marketing pages',
-    },
-    {
-      name: 'LinkExternal',
-      Component: LinkExternal,
-      usageCriteria:
-        'Indicate a reference to an external source; will direct away from the TELUS experience or the primary flow ',
-    },
-    {
-      name: 'Print',
-      Component: Print,
-      usageCriteria: 'Prompt native print module',
-    },
-    {
-      name: 'Profile',
-      Component: Profile,
-      usageCriteria: 'Direct to, or indicate user profile',
-    },
-    {
-      name: 'Search',
-      Component: Search,
-      usageCriteria: 'Direct to, or indicate search functions',
-    },
-    {
-      name: 'Settings',
-      Component: Settings,
-      usageCriteria: 'Direct to, or indicate available settings',
-    },
-  ]}
-/>
+;<Box between={4}>
+  <IconTable
+    heading="Icons for use with Links"
+    icons={[
+      {
+        name: 'LinkExternal',
+        Component: LinkExternal,
+        usageCriteria:
+          'Indicate a reference to an external source; will direct away from the TELUS experience or the primary flow ',
+      },
+    ]}
+  />
+  <IconTable
+    heading="Icons for use with Buttons"
+    icons={[
+      {
+        name: 'Add',
+        Component: Add,
+        usageCriteria: (
+          <>
+            Used to add items. Works well with <Link href="#/Icons?id=iconbutton">IconButton</Link>
+          </>
+        ),
+        props: {
+          a11yText: 'Add',
+        },
+      },
+      {
+        name: 'Close',
+        Component: Close,
+        usageCriteria: (
+          <>
+            Used to close. Works well with <Link href="#/Icons?id=iconbutton">IconButton</Link>
+          </>
+        ),
+        props: {
+          a11yText: 'Close',
+        },
+      },
+      {
+        name: 'PlayVideo',
+        Component: PlayVideo,
+        usageCriteria: (
+          <>
+            Used to indicate that a video is available, used with text link to bring to another page
+            or window. Works well with <Link href="#/Icons?id=iconbutton">IconButton</Link>
+          </>
+        ),
+        props: {
+          a11yText: 'Play',
+        },
+      },
+      {
+        name: 'Subtract',
+        Component: Subtract,
+        usageCriteria: (
+          <>
+            Used to reduce items. Works well with{' '}
+            <Link href="#/Icons?id=iconbutton">IconButton</Link>
+          </>
+        ),
+        props: {
+          a11yText: 'Remove',
+        },
+      },
+      {
+        name: 'Delete',
+        Component: Delete,
+        usageCriteria:
+          'Delete or edit an item. Use for authenticated or internal applications. Don’t use on marketing pages.',
+        props: {
+          a11yText: 'Delete',
+        },
+      },
+    ]}
+  />
+  <IconTable
+    heading="Icons for use with Links or Buttons"
+    icons={[
+      {
+        name: 'Download',
+        Component: Download,
+        usageCriteria: 'Indicate download function',
+      },
+      {
+        name: 'DownloadPDF',
+        Component: DownloadPDF,
+        usageCriteria: 'Indicate download of a single PDF',
+      },
+      {
+        name: 'DownloadPDFs',
+        Component: DownloadPDFs,
+        usageCriteria: 'Indicate download of multiple PDFs',
+      },
+      {
+        name: 'Edit',
+        Component: Edit,
+        usageCriteria:
+          'Indicate ability to edit. Use for authenticated or internal applications. Don’t use on marketing pages',
+      },
+      {
+        name: 'Print',
+        Component: Print,
+        usageCriteria: 'Prompt native print module',
+      },
+      {
+        name: 'Profile',
+        Component: Profile,
+        usageCriteria: 'Direct to, or indicate user profile',
+      },
+      {
+        name: 'Search',
+        Component: Search,
+        usageCriteria: 'Direct to, or indicate search functions',
+      },
+      {
+        name: 'Settings',
+        Component: Settings,
+        usageCriteria: 'Direct to, or indicate available settings',
+      },
+    ]}
+  />
+</Box>
 ```
@@ -75,0 +139,0 @@

dist/index.cjs.js

@@ -12,3 +12,2 @@ 'use strict';
 var styled__default = _interopDefault(styled);
-var A11yContent = _interopDefault(require('@tds/core-a11y-content'));
 var coreColours = require('@tds/core-colours');
@@ -18,2 +17,4 @@ var utilHelpers = require('@tds/util-helpers');
 var Text = _interopDefault(require('@tds/core-text'));
+var A11yContent = _interopDefault(require('@tds/core-a11y-content'));
+var utilPropTypes = require('@tds/util-prop-types');
 
@@ -46,40 +47,19 @@ function createCommonjsModule(fn, module) {
 
-function _objectWithoutPropertiesLoose(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
+function _defineProperty(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
   }
 
-  return target;
+  return obj;
 }
 
-var objectWithoutPropertiesLoose = _objectWithoutPropertiesLoose;
+var defineProperty = _defineProperty;
 
-function _objectWithoutProperties(source, excluded) {
-  if (source == null) return {};
-  var target = objectWithoutPropertiesLoose(source, excluded);
-  var key, i;
-
-  if (Object.getOwnPropertySymbols) {
-    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
-
-    for (i = 0; i < sourceSymbolKeys.length; i++) {
-      key = sourceSymbolKeys[i];
-      if (excluded.indexOf(key) >= 0) continue;
-      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
-      target[key] = source[key];
-    }
-  }
-
-  return target;
-}
-
-var objectWithoutProperties = _objectWithoutProperties;
-
 var animations = {
@@ -92,7 +72,8 @@ reduceMotion: {
   scale: {
-    transition: 'transform 150ms ease-in-out',
     '&:hover svg': {
+      transition: 'transform 150ms ease-in-out',
       transform: 'scale(1.1, 1.1)'
     },
     '&:active svg': {
+      transition: 'transform 150ms ease-in-out',
       transform: 'scale(1, 1)'
@@ -117,216 +98,2 @@ }
 
-var getOutline = function getOutline(_ref) {
-  var variant = _ref.variant;
-
-  if (variant !== 'inverted') {
-    return {
-      outline: 'none',
-      '&:focus::-moz-focus-inner': {
-        border: 0
-      }
-    };
-  }
-
-  return {
-    '&:focus': {
-      outline: 'transparent',
-      border: "0.125rem solid ".concat(coreColours.colorWhite),
-      borderRadius: '50%'
-    },
-    '&:active': {
-      borderRadius: '50%',
-      backgroundColor: 'rgba(0,0,0,0.5)',
-      backgroundBlendMode: 'multiply'
-    }
-  };
-};
-
-var StyledInteractiveIconButton = styled__default.button.withConfig({
-  displayName: "StyledInteractiveIconButton",
-  componentId: "sc-1phwvk2-0"
-})(sharedStyles.buttons.noStyle, getOutline, {
-  width: '2.5rem',
-  height: '2.5rem',
-  display: 'inline-flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-  position: 'relative',
-  '-webkit-tap-highlight-color': 'transparent'
-});
-
-function _defineProperty(obj, key, value) {
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value: value,
-      enumerable: true,
-      configurable: true,
-      writable: true
-    });
-  } else {
-    obj[key] = value;
-  }
-
-  return obj;
-}
-
-var defineProperty = _defineProperty;
-
-var StyledInteractiveIconHover = styled__default.span.withConfig({
-  displayName: "StyledInteractiveIconHover",
-  componentId: "sc-1aj10i2-0"
-})(function (_ref) {
-  var theme = _ref.theme;
-  return {
-    backgroundColor: theme.hoverBackgroundColor
-  };
-}, animations.reduceMotion, defineProperty({
-  position: 'absolute',
-  top: 0,
-  left: 0,
-  width: '100%',
-  height: '100%',
-  zIndex: '1',
-  borderRadius: '50%',
-  transition: 'transform 200ms ease-in-out',
-  transform: 'scale(0,0)'
-}, "".concat(StyledInteractiveIconButton, ":focus &, ").concat(StyledInteractiveIconButton, ":active &"), {
-  transform: 'scale(1,1)'
-}));
-
-var StyledInteractiveIconSVG$1 = styled__default(StyledInteractiveIconSVG)({
-  transition: 'transform 150ms ease-in-out'
-}, animations.reduceMotion);
-var StyledInteractiveIconButton$1 = styled__default(StyledInteractiveIconButton)(animations.scale, animations.reduceMotion);
-
-var getTheme = function getTheme(variant) {
-  if (variant === 'alternative') {
-    return {
-      hoverBackgroundColor: '#D8CBE5',
-      iconColor: coreColours.colorTelusPurple
-    };
-  }
-
-  if (variant === 'inverted') {
-    return {
-      hoverBackgroundColor: 'transparent',
-      iconColor: coreColours.colorWhite
-    };
-  }
-
-  return {
-    hoverBackgroundColor: coreColours.colorGreyGainsboro,
-    iconColor: coreColours.colorGreyShark
-  };
-};
-/**
- * @version ./package.json
- */
-
-
-var Button = React.forwardRef(function (_ref, ref) {
-  var a11yText = _ref.a11yText,
-      variant = _ref.variant,
-      onClick = _ref.onClick,
-      children = _ref.children,
-      tag = _ref.tag,
-      rest = objectWithoutProperties(_ref, ["a11yText", "variant", "onClick", "children", "tag"]);
-
-  return React__default.createElement(styled.ThemeProvider, {
-    theme: getTheme(variant)
-  }, React__default.createElement(StyledInteractiveIconButton$1, _extends_1({}, utilHelpers.safeRest(rest), {
-    variant: variant,
-    onClick: onClick,
-    as: tag,
-    ref: ref
-  }), React__default.createElement(A11yContent, null, a11yText), React__default.createElement(StyledInteractiveIconHover, null), children));
-});
-Button.displayName = 'Button';
-Button.propTypes = {
-  /**
-   * A description of the icon for screen readers.
-   */
-  a11yText: PropTypes.string.isRequired,
-
-  /**
-   * The style.
-   */
-  variant: PropTypes.oneOf(['default', 'alternative', 'inverted']),
-
-  /**
-   * Pass a handler to the icon to make it interactive.
-   */
-  onClick: PropTypes.func,
-
-  /**
-   * The tag
-   */
-  tag: PropTypes.oneOf(['button', 'a']),
-
-  /**
-   * @ignore
-   */
-  children: PropTypes.node.isRequired
-};
-Button.defaultProps = {
-  variant: 'default',
-  onClick: undefined,
-  tag: 'button'
-};
-
-var Add = React.forwardRef(function (props, ref) {
-  return React__default.createElement(Button, _extends_1({}, props, {
-    ref: ref
-  }), React__default.createElement(StyledInteractiveIconSVG$1, {
-    width: "24",
-    height: "24",
-    viewBox: "0 0 24 24"
-  }, React__default.createElement("path", {
-    d: "M12 24C5.383 24 0 18.617 0 12S5.383 0 12 0s12 5.383 12 12-5.383 12-12 12zm0-22.957C5.958 1.043 1.043 5.958 1.043 12c0 6.042 4.915 10.957 10.957 10.957 6.042 0 10.957-4.915 10.957-10.957 0-6.042-4.915-10.957-10.957-10.957zm-.697 11.654l-5.7-.176A.632.632 0 0 1 5 11.892v.21c0-.332.27-.605.602-.605h5.697v-.1l.178-5.791a.64.64 0 0 1 .63-.606h-.209c.334 0 .605.267.605.602v5.895h5.895c.335 0 .602.27.602.605v-.21a.64.64 0 0 1-.606.63l-5.79.178-.101.001v5.697a.605.605 0 0 1-.605.602h.21a.632.632 0 0 1-.63-.603l-.175-5.7z",
-    fillRule: "nonzero"
-  })));
-});
-Add.displayName = 'Add';
-
-var Close = React.forwardRef(function (props, ref) {
-  return React__default.createElement(Button, _extends_1({}, props, {
-    ref: ref
-  }), React__default.createElement(StyledInteractiveIconSVG$1, {
-    width: "24",
-    height: "24",
-    viewBox: "0 0 24 24"
-  }, React__default.createElement("path", {
-    d: "M12 12.707l-4.147 4.146a.498.498 0 0 1-.707 0 .5.5 0 0 1 0-.707L11.293 12 7.146 7.853a.5.5 0 0 1 .707-.707L12 11.293l4.146-4.147a.5.5 0 0 1 .707.707L12.707 12l4.146 4.146a.5.5 0 0 1-.707.707L12 12.707zM12 24C5.383 24 0 18.617 0 12S5.383 0 12 0s12 5.383 12 12-5.383 12-12 12zm0-22.957C5.958 1.043 1.043 5.958 1.043 12c0 6.042 4.915 10.957 10.957 10.957 6.042 0 10.957-4.915 10.957-10.957 0-6.042-4.915-10.957-10.957-10.957z",
-    fillRule: "nonzero"
-  })));
-});
-Close.displayName = 'Close';
-
-var PlayVideo = React.forwardRef(function (props, ref) {
-  return React__default.createElement(Button, _extends_1({}, props, {
-    ref: ref
-  }), React__default.createElement(StyledInteractiveIconSVG$1, {
-    width: "24",
-    height: "24",
-    viewBox: "0 0 24 24"
-  }, React__default.createElement("path", {
-    d: "M12 24C5.383 24 0 18.617 0 12S5.383 0 12 0s12 5.383 12 12-5.383 12-12 12zm0-22.957C5.958 1.043 1.043 5.958 1.043 12c0 6.042 4.915 10.957 10.957 10.957 6.042 0 10.957-4.915 10.957-10.957 0-6.042-4.915-10.957-10.957-10.957zM9.4 17c-.08 0-.16 0-.16-.077-.16 0-.24-.155-.24-.31v-9.27c0-.154.08-.309.24-.309.16 0 .32-.077.4 0l7.2 4.636c.08.077.16.154.16.309 0 .154-.08.231-.16.309l-7.2 4.635C9.56 17 9.48 17 9.4 17zm.4-8.961v7.802l6.08-3.94L9.8 8.04z",
-    fillRule: "evenodd"
-  })));
-});
-PlayVideo.displayName = 'PlayVideo';
-
-var Subtract = React.forwardRef(function (props, ref) {
-  return React__default.createElement(Button, _extends_1({}, props, {
-    ref: ref
-  }), React__default.createElement(StyledInteractiveIconSVG$1, {
-    width: "24",
-    height: "24",
-    viewBox: "0 0 24 24"
-  }, React__default.createElement("path", {
-    d: "M12 24C5.383 24 0 18.617 0 12S5.383 0 12 0s12 5.383 12 12-5.383 12-12 12zm0-22.957C5.958 1.043 1.043 5.958 1.043 12c0 6.042 4.915 10.957 10.957 10.957 6.042 0 10.957-4.915 10.957-10.957 0-6.042-4.915-10.957-10.957-10.957zM12 11l6.303.162c.387.01.697.329.697.712v-.388a.737.737 0 0 1-.7.723s-3.96.178-6.3.178c-1.994 0-6.3-.18-6.3-.18a.726.726 0 0 1-.7-.721v.388c0-.378.312-.702.697-.712L12 11z",
-    fillRule: "nonzero"
-  })));
-});
-Subtract.displayName = 'Subtract';
-
 var StyledLimitedInteractiveIconSVG = styled__default(StyledInteractiveIconSVG)(function (_ref) {
@@ -344,3 +111,3 @@ var animationDirection = _ref.animationDirection;
 
-var getTheme$1 = function getTheme(variant) {
+var getTheme = function getTheme(variant) {
   if (variant === 'basic') {
@@ -381,3 +148,3 @@ return {
   return React__default.createElement(styled.ThemeProvider, {
-    theme: getTheme$1(variant)
+    theme: getTheme(variant)
   }, children);
@@ -459,2 +226,40 @@ };
 
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+
+  return target;
+}
+
+var objectWithoutPropertiesLoose = _objectWithoutPropertiesLoose;
+
+function _objectWithoutProperties(source, excluded) {
+  if (source == null) return {};
+  var target = objectWithoutPropertiesLoose(source, excluded);
+  var key, i;
+
+  if (Object.getOwnPropertySymbols) {
+    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+
+    for (i = 0; i < sourceSymbolKeys.length; i++) {
+      key = sourceSymbolKeys[i];
+      if (excluded.indexOf(key) >= 0) continue;
+      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+      target[key] = source[key];
+    }
+  }
+
+  return target;
+}
+
+var objectWithoutProperties = _objectWithoutProperties;
+
 var cartEmptyBoldCopyDictionary = {
@@ -531,2 +336,62 @@ en: {
 
+var getOutline = function getOutline(_ref) {
+  var variant = _ref.variant;
+
+  if (variant !== 'inverted') {
+    return {
+      outline: 'none',
+      '&:focus::-moz-focus-inner': {
+        border: 0
+      }
+    };
+  }
+
+  return {
+    '&:focus': {
+      outline: 'transparent',
+      border: "0.125rem solid ".concat(coreColours.colorWhite),
+      borderRadius: '50%'
+    },
+    '&:active': {
+      borderRadius: '50%',
+      backgroundColor: 'rgba(0,0,0,0.5)',
+      backgroundBlendMode: 'multiply'
+    }
+  };
+};
+
+var StyledInteractiveIconButton = styled__default.button.withConfig({
+  displayName: "StyledInteractiveIconButton",
+  componentId: "sc-1phwvk2-0"
+})(sharedStyles.buttons.noStyle, getOutline, {
+  width: '2.5rem',
+  height: '2.5rem',
+  display: 'inline-flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  position: 'relative',
+  '-webkit-tap-highlight-color': 'transparent'
+});
+
+var StyledInteractiveIconHover = styled__default.span.withConfig({
+  displayName: "StyledInteractiveIconHover",
+  componentId: "sc-1aj10i2-0"
+})(function (_ref) {
+  var theme = _ref.theme;
+  return {
+    backgroundColor: theme.hoverBackgroundColor
+  };
+}, animations.reduceMotion, defineProperty({
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  width: '100%',
+  height: '100%',
+  borderRadius: '50%',
+  transition: 'transform 200ms ease-in-out',
+  transform: 'scale(0,0)'
+}, "".concat(StyledInteractiveIconButton, ":focus &, ").concat(StyledInteractiveIconButton, ":active &"), {
+  transform: 'scale(1,1)'
+}));
+
 function _arrayWithHoles(arr) {
@@ -645,6 +510,6 @@ if (Array.isArray(arr)) return arr;
 
-var StyledInteractiveIconSVG$2 = styled__default(StyledInteractiveIconSVG)({
+var StyledInteractiveIconSVG$1 = styled__default(StyledInteractiveIconSVG)({
   transition: 'transform 150ms ease-in-out'
 }, animations.reduceMotion);
-var StyledInteractiveIconButton$2 = styled__default(StyledInteractiveIconButton)(animations.scale, animations.reduceMotion);
+var StyledInteractiveIconButton$1 = styled__default(StyledInteractiveIconButton)(animations.scale, animations.reduceMotion);
 var StyledButtonAndTooltip = styled__default.div.withConfig({
@@ -657,3 +522,3 @@ displayName: "NavButton__StyledButtonAndTooltip",
 
-var getTheme$2 = function getTheme(variant) {
+var getTheme$1 = function getTheme(variant) {
   if (variant === 'inverted') {
@@ -686,4 +551,4 @@ return {
   return React__default.createElement(styled.ThemeProvider, {
-    theme: getTheme$2(variant)
-  }, React__default.createElement(StyledButtonAndTooltip, null, React__default.createElement(StyledInteractiveIconButton$2, _extends_1({}, utilHelpers.safeRest(rest), {
+    theme: getTheme$1(variant)
+  }, React__default.createElement(StyledButtonAndTooltip, null, React__default.createElement(StyledInteractiveIconButton$1, _extends_1({}, utilHelpers.safeRest(rest), {
     "aria-labelledby": ariaId,
@@ -752,3 +617,3 @@ variant: variant,
 
-  }), React__default.createElement(StyledInteractiveIconSVG$2, {
+  }), React__default.createElement(StyledInteractiveIconSVG$1, {
     width: "24",
@@ -810,3 +675,3 @@ height: "24",
 
-  }), React__default.createElement(StyledInteractiveIconSVG$2, {
+  }), React__default.createElement(StyledInteractiveIconSVG$1, {
     width: "24",
@@ -846,3 +711,3 @@ height: "24",
 
-  }), React__default.createElement(StyledInteractiveIconSVG$2, {
+  }), React__default.createElement(StyledInteractiveIconSVG$1, {
     width: "24",
@@ -873,3 +738,3 @@ height: "24",
 
-  }), React__default.createElement(StyledInteractiveIconSVG$2, {
+  }), React__default.createElement(StyledInteractiveIconSVG$1, {
     width: "24",
@@ -900,3 +765,3 @@ height: "24",
 
-  }), React__default.createElement(StyledInteractiveIconSVG$2, {
+  }), React__default.createElement(StyledInteractiveIconSVG$1, {
     width: "24",
@@ -926,3 +791,3 @@ height: "24",
 
-  }), React__default.createElement(StyledInteractiveIconSVG$2, {
+  }), React__default.createElement(StyledInteractiveIconSVG$1, {
     width: "24",
@@ -953,3 +818,3 @@ height: "24",
 
-  }), React__default.createElement(StyledInteractiveIconSVG$2, {
+  }), React__default.createElement(StyledInteractiveIconSVG$1, {
     width: "24",
@@ -980,3 +845,3 @@ height: "24",
 
-  }), React__default.createElement(StyledInteractiveIconSVG$2, {
+  }), React__default.createElement(StyledInteractiveIconSVG$1, {
     width: "24",
@@ -1012,14 +877,7 @@ height: "24",
 
-var invertStyles = function invertStyles(_ref2) {
-  var invert = _ref2.invert;
-  return {
-    fill: invert && coreColours.colorWhite
-  };
-};
-
 var StyledDependentSVG = styled__default.svg.attrs({
   'aria-hidden': true,
   focusable: false
-})(positionStyles, invertStyles, function (_ref3) {
-  var paragraphSize = _ref3.paragraphSize;
+})(positionStyles, function (_ref2) {
+  var paragraphSize = _ref2.paragraphSize;
   return {
@@ -1029,8 +887,24 @@ width: paragraphSize === 'small' ? 20 : 24,
   };
+}, function (_ref3) {
+  var color = _ref3.color;
+  var fill;
+
+  if (color === 'greyShark') {
+    fill = coreColours.colorGreyShark;
+  } else if (color === 'white') {
+    fill = coreColours.colorWhite;
+  } else if (color === 'telusPurple') {
+    fill = coreColours.colorTelusPurple;
+  } else if (color === 'accessibleGreen') {
+    fill = coreColours.colorAccessibleGreen;
+  }
+
+  return {
+    fill: fill
+  };
 });
 
 var Dependent = function Dependent(_ref4) {
-  var invert = _ref4.invert,
-      children = _ref4.children,
-      rest = objectWithoutProperties(_ref4, ["invert", "children"]);
+  var children = _ref4.children,
+      rest = objectWithoutProperties(_ref4, ["children"]);
 
@@ -1041,3 +915,2 @@ return React__default.createElement(utilHelpers.DependentIconSizeContext.Consumer, null, function (_ref5) {
       paragraphSize: paragraphSize,
-      invert: invert,
       'data-testid': 'dependentSvg'
@@ -1052,11 +925,7 @@ }, rest));
    */
-  invert: PropTypes.bool,
-
-  /**
-   * @ignore
-   */
-  children: PropTypes.node.isRequired
+  children: PropTypes.node.isRequired,
+  color: PropTypes.oneOf(['greyShark', 'white', 'telusPurple', 'accessibleGreen'])
 };
 Dependent.defaultProps = {
-  invert: false
+  color: 'greyShark'
 };
@@ -1194,2 +1063,155 @@
 
+var Add = function Add(props) {
+  return React__default.createElement(Dependent, props, React__default.createElement(StyledDependentSVG, {
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24"
+  }, React__default.createElement("path", {
+    d: "M12 24C5.383 24 0 18.617 0 12S5.383 0 12 0s12 5.383 12 12-5.383 12-12 12zm0-22.957C5.958 1.043 1.043 5.958 1.043 12c0 6.042 4.915 10.957 10.957 10.957 6.042 0 10.957-4.915 10.957-10.957 0-6.042-4.915-10.957-10.957-10.957zm-.697 11.654l-5.7-.176A.632.632 0 0 1 5 11.892v.21c0-.332.27-.605.602-.605h5.697v-.1l.178-5.791a.64.64 0 0 1 .63-.606h-.209c.334 0 .605.267.605.602v5.895h5.895c.335 0 .602.27.602.605v-.21a.64.64 0 0 1-.606.63l-5.79.178-.101.001v5.697a.605.605 0 0 1-.605.602h.21a.632.632 0 0 1-.63-.603l-.175-5.7z",
+    fillRule: "nonzero"
+  })));
+};
+
+Add.displayName = 'Dependent';
+
+var Close = function Close(props) {
+  return React__default.createElement(Dependent, props, React__default.createElement(StyledDependentSVG, {
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24"
+  }, React__default.createElement("path", {
+    d: "M12 12.707l-4.147 4.146a.498.498 0 0 1-.707 0 .5.5 0 0 1 0-.707L11.293 12 7.146 7.853a.5.5 0 0 1 .707-.707L12 11.293l4.146-4.147a.5.5 0 0 1 .707.707L12.707 12l4.146 4.146a.5.5 0 0 1-.707.707L12 12.707zM12 24C5.383 24 0 18.617 0 12S5.383 0 12 0s12 5.383 12 12-5.383 12-12 12zm0-22.957C5.958 1.043 1.043 5.958 1.043 12c0 6.042 4.915 10.957 10.957 10.957 6.042 0 10.957-4.915 10.957-10.957 0-6.042-4.915-10.957-10.957-10.957z",
+    fillRule: "nonzero"
+  })));
+};
+
+Close.displayName = 'Dependent';
+
+var PlayVideo = function PlayVideo(props) {
+  return React__default.createElement(Dependent, props, React__default.createElement(StyledDependentSVG, {
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24"
+  }, React__default.createElement("path", {
+    d: "M12 24C5.383 24 0 18.617 0 12S5.383 0 12 0s12 5.383 12 12-5.383 12-12 12zm0-22.957C5.958 1.043 1.043 5.958 1.043 12c0 6.042 4.915 10.957 10.957 10.957 6.042 0 10.957-4.915 10.957-10.957 0-6.042-4.915-10.957-10.957-10.957zM9.4 17c-.08 0-.16 0-.16-.077-.16 0-.24-.155-.24-.31v-9.27c0-.154.08-.309.24-.309.16 0 .32-.077.4 0l7.2 4.636c.08.077.16.154.16.309 0 .154-.08.231-.16.309l-7.2 4.635C9.56 17 9.48 17 9.4 17zm.4-8.961v7.802l6.08-3.94L9.8 8.04z",
+    fillRule: "evenodd"
+  })));
+};
+
+PlayVideo.displayName = 'Dependent';
+
+var Subtract = function Subtract(props) {
+  return React__default.createElement(Dependent, props, React__default.createElement(StyledDependentSVG, {
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24"
+  }, React__default.createElement("path", {
+    d: "M12 24C5.383 24 0 18.617 0 12S5.383 0 12 0s12 5.383 12 12-5.383 12-12 12zm0-22.957C5.958 1.043 1.043 5.958 1.043 12c0 6.042 4.915 10.957 10.957 10.957 6.042 0 10.957-4.915 10.957-10.957 0-6.042-4.915-10.957-10.957-10.957zM12 11l6.303.162c.387.01.697.329.697.712v-.388a.737.737 0 0 1-.7.723s-3.96.178-6.3.178c-1.994 0-6.3-.18-6.3-.18a.726.726 0 0 1-.7-.721v.388c0-.378.312-.702.697-.712L12 11z",
+    fillRule: "nonzero"
+  })));
+};
+
+Subtract.displayName = 'Dependent';
+
+/* eslint-disable import/prefer-default-export */
+var warn = function warn(componentName, message) {
+  if (process.env.NODE_ENV === 'production') {
+    return;
+  }
+
+  console.warn("[TDS] ".concat(componentName, ": ").concat(message)); // eslint-disable-line no-console
+};
+
+var StyledIconButton = styled__default(StyledInteractiveIconButton)(animations.scale, {
+  '&:hover > svg': animations.reduceMotion
+});
+
+var getTheme$2 = function getTheme(variant) {
+  if (variant === 'alternative') {
+    return {
+      hoverBackgroundColor: '#D8CBE5'
+    };
+  }
+
+  if (variant === 'inverted') {
+    return {
+      hoverBackgroundColor: 'transparent'
+    };
+  }
+
+  return {
+    hoverBackgroundColor: coreColours.colorGreyGainsboro
+  };
+};
+/**
+ * @version ./package.json
+ */
+
+
+var IconButton = React.forwardRef(function (_ref, ref) {
+  var a11yText = _ref.a11yText,
+      variant = _ref.variant,
+      onClick = _ref.onClick,
+      tag = _ref.tag,
+      Icon = _ref.icon,
+      rest = objectWithoutProperties(_ref, ["a11yText", "variant", "onClick", "tag", "icon"]);
+
+  var color;
+
+  if (variant === 'alternative') {
+    color = 'telusPurple';
+  } else if (variant === 'inverted') {
+    color = 'white';
+  } else {
+    color = 'greyShark';
+  }
+
+  if (Icon.name !== 'Add' && Icon.name !== 'Close' && Icon.name !== 'Subtract' && Icon.name !== 'PlayVideo') {
+    warn('IconButton', 'IconButton is meant to be used with the Add, Close, Subtract, and PlayVideo icons for their universally-recognizable appearance. Other icons should be accompanied with text and not as a part of IconButton.');
+  }
+
+  return React__default.createElement(styled.ThemeProvider, {
+    theme: getTheme$2(variant)
+  }, React__default.createElement(StyledIconButton, _extends_1({}, utilHelpers.safeRest(rest), {
+    variant: variant,
+    onClick: onClick,
+    as: tag,
+    ref: ref
+  }), React__default.createElement(A11yContent, null, a11yText), React__default.createElement(StyledInteractiveIconHover, null), React__default.createElement(Icon, {
+    color: color
+  })));
+});
+IconButton.displayName = 'IconButton';
+IconButton.propTypes = {
+  /**
+   * A description of the icon for assistive technology.
+   */
+  a11yText: PropTypes.string.isRequired,
+
+  /**
+   * The visual style.
+   */
+  variant: PropTypes.oneOf(['default', 'alternative', 'inverted']),
+
+  /**
+   * Pass a handler to the icon to make it interactive.
+   */
+  onClick: PropTypes.func,
+
+  /**
+   * The tag
+   */
+  tag: PropTypes.oneOf(['button', 'a']),
+
+  /**
+   * The icon. Can be one of either the `Add`, `Close`, `PlayVideo`, or `Subtract` icons.
+   */
+  icon: PropTypes.oneOfType([utilPropTypes.componentWithName('Add'), utilPropTypes.componentWithName('Close'), utilPropTypes.componentWithName('PlayVideo'), utilPropTypes.componentWithName('Subtract')]).isRequired
+};
+IconButton.defaultProps = {
+  variant: 'default',
+  onClick: undefined,
+  tag: 'button'
+};
+
 exports.Add = Add;
@@ -1208,2 +1230,3 @@ exports.CaretDown = CaretDown;
 exports.Edit = Edit;
+exports.IconButton = IconButton;
 exports.LinkExternal = LinkExternal;
@@ -1210,0 +1233,0 @@ exports.NotifyBold = NotifyBold;

dist/index.es.js

 import React, { forwardRef, useRef, useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import styled, { ThemeProvider } from 'styled-components';
-import A11yContent from '@tds/core-a11y-content';
-import { colorWhite, colorTelusPurple, colorGreyGainsboro, colorGreyShark, colorShark, colorAccessibleGreen, colorGreyShuttle, colorTelusGreen } from '@tds/core-colours';
-import { safeRest, uniqueId, getCopy, DependentIconSizeContext } from '@tds/util-helpers';
+import { colorShark, colorTelusPurple, colorWhite, colorAccessibleGreen, colorGreyShuttle, colorGreyGainsboro, colorTelusGreen, colorGreyShark } from '@tds/core-colours';
+import { uniqueId, safeRest, getCopy, DependentIconSizeContext } from '@tds/util-helpers';
 import { buttons } from '@tds/shared-styles';
 import Text from '@tds/core-text';
+import A11yContent from '@tds/core-a11y-content';
+import { componentWithName } from '@tds/util-prop-types';
 
@@ -36,40 +37,19 @@ function createCommonjsModule(fn, module) {
 
-function _objectWithoutPropertiesLoose(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
+function _defineProperty(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
   }
 
-  return target;
+  return obj;
 }
 
-var objectWithoutPropertiesLoose = _objectWithoutPropertiesLoose;
+var defineProperty = _defineProperty;
 
-function _objectWithoutProperties(source, excluded) {
-  if (source == null) return {};
-  var target = objectWithoutPropertiesLoose(source, excluded);
-  var key, i;
-
-  if (Object.getOwnPropertySymbols) {
-    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
-
-    for (i = 0; i < sourceSymbolKeys.length; i++) {
-      key = sourceSymbolKeys[i];
-      if (excluded.indexOf(key) >= 0) continue;
-      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
-      target[key] = source[key];
-    }
-  }
-
-  return target;
-}
-
-var objectWithoutProperties = _objectWithoutProperties;
-
 var animations = {
@@ -82,7 +62,8 @@ reduceMotion: {
   scale: {
-    transition: 'transform 150ms ease-in-out',
     '&:hover svg': {
+      transition: 'transform 150ms ease-in-out',
       transform: 'scale(1.1, 1.1)'
     },
     '&:active svg': {
+      transition: 'transform 150ms ease-in-out',
       transform: 'scale(1, 1)'
@@ -107,216 +88,2 @@ }
 
-var getOutline = function getOutline(_ref) {
-  var variant = _ref.variant;
-
-  if (variant !== 'inverted') {
-    return {
-      outline: 'none',
-      '&:focus::-moz-focus-inner': {
-        border: 0
-      }
-    };
-  }
-
-  return {
-    '&:focus': {
-      outline: 'transparent',
-      border: "0.125rem solid ".concat(colorWhite),
-      borderRadius: '50%'
-    },
-    '&:active': {
-      borderRadius: '50%',
-      backgroundColor: 'rgba(0,0,0,0.5)',
-      backgroundBlendMode: 'multiply'
-    }
-  };
-};
-
-var StyledInteractiveIconButton = styled.button.withConfig({
-  displayName: "StyledInteractiveIconButton",
-  componentId: "sc-1phwvk2-0"
-})(buttons.noStyle, getOutline, {
-  width: '2.5rem',
-  height: '2.5rem',
-  display: 'inline-flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-  position: 'relative',
-  '-webkit-tap-highlight-color': 'transparent'
-});
-
-function _defineProperty(obj, key, value) {
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value: value,
-      enumerable: true,
-      configurable: true,
-      writable: true
-    });
-  } else {
-    obj[key] = value;
-  }
-
-  return obj;
-}
-
-var defineProperty = _defineProperty;
-
-var StyledInteractiveIconHover = styled.span.withConfig({
-  displayName: "StyledInteractiveIconHover",
-  componentId: "sc-1aj10i2-0"
-})(function (_ref) {
-  var theme = _ref.theme;
-  return {
-    backgroundColor: theme.hoverBackgroundColor
-  };
-}, animations.reduceMotion, defineProperty({
-  position: 'absolute',
-  top: 0,
-  left: 0,
-  width: '100%',
-  height: '100%',
-  zIndex: '1',
-  borderRadius: '50%',
-  transition: 'transform 200ms ease-in-out',
-  transform: 'scale(0,0)'
-}, "".concat(StyledInteractiveIconButton, ":focus &, ").concat(StyledInteractiveIconButton, ":active &"), {
-  transform: 'scale(1,1)'
-}));
-
-var StyledInteractiveIconSVG$1 = styled(StyledInteractiveIconSVG)({
-  transition: 'transform 150ms ease-in-out'
-}, animations.reduceMotion);
-var StyledInteractiveIconButton$1 = styled(StyledInteractiveIconButton)(animations.scale, animations.reduceMotion);
-
-var getTheme = function getTheme(variant) {
-  if (variant === 'alternative') {
-    return {
-      hoverBackgroundColor: '#D8CBE5',
-      iconColor: colorTelusPurple
-    };
-  }
-
-  if (variant === 'inverted') {
-    return {
-      hoverBackgroundColor: 'transparent',
-      iconColor: colorWhite
-    };
-  }
-
-  return {
-    hoverBackgroundColor: colorGreyGainsboro,
-    iconColor: colorGreyShark
-  };
-};
-/**
- * @version ./package.json
- */
-
-
-var Button = forwardRef(function (_ref, ref) {
-  var a11yText = _ref.a11yText,
-      variant = _ref.variant,
-      onClick = _ref.onClick,
-      children = _ref.children,
-      tag = _ref.tag,
-      rest = objectWithoutProperties(_ref, ["a11yText", "variant", "onClick", "children", "tag"]);
-
-  return React.createElement(ThemeProvider, {
-    theme: getTheme(variant)
-  }, React.createElement(StyledInteractiveIconButton$1, _extends_1({}, safeRest(rest), {
-    variant: variant,
-    onClick: onClick,
-    as: tag,
-    ref: ref
-  }), React.createElement(A11yContent, null, a11yText), React.createElement(StyledInteractiveIconHover, null), children));
-});
-Button.displayName = 'Button';
-Button.propTypes = {
-  /**
-   * A description of the icon for screen readers.
-   */
-  a11yText: PropTypes.string.isRequired,
-
-  /**
-   * The style.
-   */
-  variant: PropTypes.oneOf(['default', 'alternative', 'inverted']),
-
-  /**
-   * Pass a handler to the icon to make it interactive.
-   */
-  onClick: PropTypes.func,
-
-  /**
-   * The tag
-   */
-  tag: PropTypes.oneOf(['button', 'a']),
-
-  /**
-   * @ignore
-   */
-  children: PropTypes.node.isRequired
-};
-Button.defaultProps = {
-  variant: 'default',
-  onClick: undefined,
-  tag: 'button'
-};
-
-var Add = forwardRef(function (props, ref) {
-  return React.createElement(Button, _extends_1({}, props, {
-    ref: ref
-  }), React.createElement(StyledInteractiveIconSVG$1, {
-    width: "24",
-    height: "24",
-    viewBox: "0 0 24 24"
-  }, React.createElement("path", {
-    d: "M12 24C5.383 24 0 18.617 0 12S5.383 0 12 0s12 5.383 12 12-5.383 12-12 12zm0-22.957C5.958 1.043 1.043 5.958 1.043 12c0 6.042 4.915 10.957 10.957 10.957 6.042 0 10.957-4.915 10.957-10.957 0-6.042-4.915-10.957-10.957-10.957zm-.697 11.654l-5.7-.176A.632.632 0 0 1 5 11.892v.21c0-.332.27-.605.602-.605h5.697v-.1l.178-5.791a.64.64 0 0 1 .63-.606h-.209c.334 0 .605.267.605.602v5.895h5.895c.335 0 .602.27.602.605v-.21a.64.64 0 0 1-.606.63l-5.79.178-.101.001v5.697a.605.605 0 0 1-.605.602h.21a.632.632 0 0 1-.63-.603l-.175-5.7z",
-    fillRule: "nonzero"
-  })));
-});
-Add.displayName = 'Add';
-
-var Close = forwardRef(function (props, ref) {
-  return React.createElement(Button, _extends_1({}, props, {
-    ref: ref
-  }), React.createElement(StyledInteractiveIconSVG$1, {
-    width: "24",
-    height: "24",
-    viewBox: "0 0 24 24"
-  }, React.createElement("path", {
-    d: "M12 12.707l-4.147 4.146a.498.498 0 0 1-.707 0 .5.5 0 0 1 0-.707L11.293 12 7.146 7.853a.5.5 0 0 1 .707-.707L12 11.293l4.146-4.147a.5.5 0 0 1 .707.707L12.707 12l4.146 4.146a.5.5 0 0 1-.707.707L12 12.707zM12 24C5.383 24 0 18.617 0 12S5.383 0 12 0s12 5.383 12 12-5.383 12-12 12zm0-22.957C5.958 1.043 1.043 5.958 1.043 12c0 6.042 4.915 10.957 10.957 10.957 6.042 0 10.957-4.915 10.957-10.957 0-6.042-4.915-10.957-10.957-10.957z",
-    fillRule: "nonzero"
-  })));
-});
-Close.displayName = 'Close';
-
-var PlayVideo = forwardRef(function (props, ref) {
-  return React.createElement(Button, _extends_1({}, props, {
-    ref: ref
-  }), React.createElement(StyledInteractiveIconSVG$1, {
-    width: "24",
-    height: "24",
-    viewBox: "0 0 24 24"
-  }, React.createElement("path", {
-    d: "M12 24C5.383 24 0 18.617 0 12S5.383 0 12 0s12 5.383 12 12-5.383 12-12 12zm0-22.957C5.958 1.043 1.043 5.958 1.043 12c0 6.042 4.915 10.957 10.957 10.957 6.042 0 10.957-4.915 10.957-10.957 0-6.042-4.915-10.957-10.957-10.957zM9.4 17c-.08 0-.16 0-.16-.077-.16 0-.24-.155-.24-.31v-9.27c0-.154.08-.309.24-.309.16 0 .32-.077.4 0l7.2 4.636c.08.077.16.154.16.309 0 .154-.08.231-.16.309l-7.2 4.635C9.56 17 9.48 17 9.4 17zm.4-8.961v7.802l6.08-3.94L9.8 8.04z",
-    fillRule: "evenodd"
-  })));
-});
-PlayVideo.displayName = 'PlayVideo';
-
-var Subtract = forwardRef(function (props, ref) {
-  return React.createElement(Button, _extends_1({}, props, {
-    ref: ref
-  }), React.createElement(StyledInteractiveIconSVG$1, {
-    width: "24",
-    height: "24",
-    viewBox: "0 0 24 24"
-  }, React.createElement("path", {
-    d: "M12 24C5.383 24 0 18.617 0 12S5.383 0 12 0s12 5.383 12 12-5.383 12-12 12zm0-22.957C5.958 1.043 1.043 5.958 1.043 12c0 6.042 4.915 10.957 10.957 10.957 6.042 0 10.957-4.915 10.957-10.957 0-6.042-4.915-10.957-10.957-10.957zM12 11l6.303.162c.387.01.697.329.697.712v-.388a.737.737 0 0 1-.7.723s-3.96.178-6.3.178c-1.994 0-6.3-.18-6.3-.18a.726.726 0 0 1-.7-.721v.388c0-.378.312-.702.697-.712L12 11z",
-    fillRule: "nonzero"
-  })));
-});
-Subtract.displayName = 'Subtract';
-
 var StyledLimitedInteractiveIconSVG = styled(StyledInteractiveIconSVG)(function (_ref) {
@@ -334,3 +101,3 @@ var animationDirection = _ref.animationDirection;
 
-var getTheme$1 = function getTheme(variant) {
+var getTheme = function getTheme(variant) {
   if (variant === 'basic') {
@@ -371,3 +138,3 @@ return {
   return React.createElement(ThemeProvider, {
-    theme: getTheme$1(variant)
+    theme: getTheme(variant)
   }, children);
@@ -449,2 +216,40 @@ };
 
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+
+  return target;
+}
+
+var objectWithoutPropertiesLoose = _objectWithoutPropertiesLoose;
+
+function _objectWithoutProperties(source, excluded) {
+  if (source == null) return {};
+  var target = objectWithoutPropertiesLoose(source, excluded);
+  var key, i;
+
+  if (Object.getOwnPropertySymbols) {
+    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+
+    for (i = 0; i < sourceSymbolKeys.length; i++) {
+      key = sourceSymbolKeys[i];
+      if (excluded.indexOf(key) >= 0) continue;
+      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+      target[key] = source[key];
+    }
+  }
+
+  return target;
+}
+
+var objectWithoutProperties = _objectWithoutProperties;
+
 var cartEmptyBoldCopyDictionary = {
@@ -521,2 +326,62 @@ en: {
 
+var getOutline = function getOutline(_ref) {
+  var variant = _ref.variant;
+
+  if (variant !== 'inverted') {
+    return {
+      outline: 'none',
+      '&:focus::-moz-focus-inner': {
+        border: 0
+      }
+    };
+  }
+
+  return {
+    '&:focus': {
+      outline: 'transparent',
+      border: "0.125rem solid ".concat(colorWhite),
+      borderRadius: '50%'
+    },
+    '&:active': {
+      borderRadius: '50%',
+      backgroundColor: 'rgba(0,0,0,0.5)',
+      backgroundBlendMode: 'multiply'
+    }
+  };
+};
+
+var StyledInteractiveIconButton = styled.button.withConfig({
+  displayName: "StyledInteractiveIconButton",
+  componentId: "sc-1phwvk2-0"
+})(buttons.noStyle, getOutline, {
+  width: '2.5rem',
+  height: '2.5rem',
+  display: 'inline-flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  position: 'relative',
+  '-webkit-tap-highlight-color': 'transparent'
+});
+
+var StyledInteractiveIconHover = styled.span.withConfig({
+  displayName: "StyledInteractiveIconHover",
+  componentId: "sc-1aj10i2-0"
+})(function (_ref) {
+  var theme = _ref.theme;
+  return {
+    backgroundColor: theme.hoverBackgroundColor
+  };
+}, animations.reduceMotion, defineProperty({
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  width: '100%',
+  height: '100%',
+  borderRadius: '50%',
+  transition: 'transform 200ms ease-in-out',
+  transform: 'scale(0,0)'
+}, "".concat(StyledInteractiveIconButton, ":focus &, ").concat(StyledInteractiveIconButton, ":active &"), {
+  transform: 'scale(1,1)'
+}));
+
 function _arrayWithHoles(arr) {
@@ -635,6 +500,6 @@ if (Array.isArray(arr)) return arr;
 
-var StyledInteractiveIconSVG$2 = styled(StyledInteractiveIconSVG)({
+var StyledInteractiveIconSVG$1 = styled(StyledInteractiveIconSVG)({
   transition: 'transform 150ms ease-in-out'
 }, animations.reduceMotion);
-var StyledInteractiveIconButton$2 = styled(StyledInteractiveIconButton)(animations.scale, animations.reduceMotion);
+var StyledInteractiveIconButton$1 = styled(StyledInteractiveIconButton)(animations.scale, animations.reduceMotion);
 var StyledButtonAndTooltip = styled.div.withConfig({
@@ -647,3 +512,3 @@ displayName: "NavButton__StyledButtonAndTooltip",
 
-var getTheme$2 = function getTheme(variant) {
+var getTheme$1 = function getTheme(variant) {
   if (variant === 'inverted') {
@@ -676,4 +541,4 @@ return {
   return React.createElement(ThemeProvider, {
-    theme: getTheme$2(variant)
-  }, React.createElement(StyledButtonAndTooltip, null, React.createElement(StyledInteractiveIconButton$2, _extends_1({}, safeRest(rest), {
+    theme: getTheme$1(variant)
+  }, React.createElement(StyledButtonAndTooltip, null, React.createElement(StyledInteractiveIconButton$1, _extends_1({}, safeRest(rest), {
     "aria-labelledby": ariaId,
@@ -742,3 +607,3 @@ variant: variant,
 
-  }), React.createElement(StyledInteractiveIconSVG$2, {
+  }), React.createElement(StyledInteractiveIconSVG$1, {
     width: "24",
@@ -800,3 +665,3 @@ height: "24",
 
-  }), React.createElement(StyledInteractiveIconSVG$2, {
+  }), React.createElement(StyledInteractiveIconSVG$1, {
     width: "24",
@@ -836,3 +701,3 @@ height: "24",
 
-  }), React.createElement(StyledInteractiveIconSVG$2, {
+  }), React.createElement(StyledInteractiveIconSVG$1, {
     width: "24",
@@ -863,3 +728,3 @@ height: "24",
 
-  }), React.createElement(StyledInteractiveIconSVG$2, {
+  }), React.createElement(StyledInteractiveIconSVG$1, {
     width: "24",
@@ -890,3 +755,3 @@ height: "24",
 
-  }), React.createElement(StyledInteractiveIconSVG$2, {
+  }), React.createElement(StyledInteractiveIconSVG$1, {
     width: "24",
@@ -916,3 +781,3 @@ height: "24",
 
-  }), React.createElement(StyledInteractiveIconSVG$2, {
+  }), React.createElement(StyledInteractiveIconSVG$1, {
     width: "24",
@@ -943,3 +808,3 @@ height: "24",
 
-  }), React.createElement(StyledInteractiveIconSVG$2, {
+  }), React.createElement(StyledInteractiveIconSVG$1, {
     width: "24",
@@ -970,3 +835,3 @@ height: "24",
 
-  }), React.createElement(StyledInteractiveIconSVG$2, {
+  }), React.createElement(StyledInteractiveIconSVG$1, {
     width: "24",
@@ -1002,14 +867,7 @@ height: "24",
 
-var invertStyles = function invertStyles(_ref2) {
-  var invert = _ref2.invert;
-  return {
-    fill: invert && colorWhite
-  };
-};
-
 var StyledDependentSVG = styled.svg.attrs({
   'aria-hidden': true,
   focusable: false
-})(positionStyles, invertStyles, function (_ref3) {
-  var paragraphSize = _ref3.paragraphSize;
+})(positionStyles, function (_ref2) {
+  var paragraphSize = _ref2.paragraphSize;
   return {
@@ -1019,8 +877,24 @@ width: paragraphSize === 'small' ? 20 : 24,
   };
+}, function (_ref3) {
+  var color = _ref3.color;
+  var fill;
+
+  if (color === 'greyShark') {
+    fill = colorGreyShark;
+  } else if (color === 'white') {
+    fill = colorWhite;
+  } else if (color === 'telusPurple') {
+    fill = colorTelusPurple;
+  } else if (color === 'accessibleGreen') {
+    fill = colorAccessibleGreen;
+  }
+
+  return {
+    fill: fill
+  };
 });
 
 var Dependent = function Dependent(_ref4) {
-  var invert = _ref4.invert,
-      children = _ref4.children,
-      rest = objectWithoutProperties(_ref4, ["invert", "children"]);
+  var children = _ref4.children,
+      rest = objectWithoutProperties(_ref4, ["children"]);
 
@@ -1031,3 +905,2 @@ return React.createElement(DependentIconSizeContext.Consumer, null, function (_ref5) {
       paragraphSize: paragraphSize,
-      invert: invert,
       'data-testid': 'dependentSvg'
@@ -1042,11 +915,7 @@ }, rest));
    */
-  invert: PropTypes.bool,
-
-  /**
-   * @ignore
-   */
-  children: PropTypes.node.isRequired
+  children: PropTypes.node.isRequired,
+  color: PropTypes.oneOf(['greyShark', 'white', 'telusPurple', 'accessibleGreen'])
 };
 Dependent.defaultProps = {
-  invert: false
+  color: 'greyShark'
 };
@@ -1184,2 +1053,155 @@
 
-export { Add, CaretDown, CaretUp, CartEmptyBold, CartFilledBold, ChevronLeft, ChevronRight, Close, Delete, Download, DownloadPDF, DownloadPDFs, Edit, LinkExternal, NotifyBold, PlayVideo, Print, Profile, ProfileBold, Search, SearchBold, Settings, SettingsBold, Subtract, SupportBold, UserAddBold };
+var Add = function Add(props) {
+  return React.createElement(Dependent, props, React.createElement(StyledDependentSVG, {
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24"
+  }, React.createElement("path", {
+    d: "M12 24C5.383 24 0 18.617 0 12S5.383 0 12 0s12 5.383 12 12-5.383 12-12 12zm0-22.957C5.958 1.043 1.043 5.958 1.043 12c0 6.042 4.915 10.957 10.957 10.957 6.042 0 10.957-4.915 10.957-10.957 0-6.042-4.915-10.957-10.957-10.957zm-.697 11.654l-5.7-.176A.632.632 0 0 1 5 11.892v.21c0-.332.27-.605.602-.605h5.697v-.1l.178-5.791a.64.64 0 0 1 .63-.606h-.209c.334 0 .605.267.605.602v5.895h5.895c.335 0 .602.27.602.605v-.21a.64.64 0 0 1-.606.63l-5.79.178-.101.001v5.697a.605.605 0 0 1-.605.602h.21a.632.632 0 0 1-.63-.603l-.175-5.7z",
+    fillRule: "nonzero"
+  })));
+};
+
+Add.displayName = 'Dependent';
+
+var Close = function Close(props) {
+  return React.createElement(Dependent, props, React.createElement(StyledDependentSVG, {
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24"
+  }, React.createElement("path", {
+    d: "M12 12.707l-4.147 4.146a.498.498 0 0 1-.707 0 .5.5 0 0 1 0-.707L11.293 12 7.146 7.853a.5.5 0 0 1 .707-.707L12 11.293l4.146-4.147a.5.5 0 0 1 .707.707L12.707 12l4.146 4.146a.5.5 0 0 1-.707.707L12 12.707zM12 24C5.383 24 0 18.617 0 12S5.383 0 12 0s12 5.383 12 12-5.383 12-12 12zm0-22.957C5.958 1.043 1.043 5.958 1.043 12c0 6.042 4.915 10.957 10.957 10.957 6.042 0 10.957-4.915 10.957-10.957 0-6.042-4.915-10.957-10.957-10.957z",
+    fillRule: "nonzero"
+  })));
+};
+
+Close.displayName = 'Dependent';
+
+var PlayVideo = function PlayVideo(props) {
+  return React.createElement(Dependent, props, React.createElement(StyledDependentSVG, {
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24"
+  }, React.createElement("path", {
+    d: "M12 24C5.383 24 0 18.617 0 12S5.383 0 12 0s12 5.383 12 12-5.383 12-12 12zm0-22.957C5.958 1.043 1.043 5.958 1.043 12c0 6.042 4.915 10.957 10.957 10.957 6.042 0 10.957-4.915 10.957-10.957 0-6.042-4.915-10.957-10.957-10.957zM9.4 17c-.08 0-.16 0-.16-.077-.16 0-.24-.155-.24-.31v-9.27c0-.154.08-.309.24-.309.16 0 .32-.077.4 0l7.2 4.636c.08.077.16.154.16.309 0 .154-.08.231-.16.309l-7.2 4.635C9.56 17 9.48 17 9.4 17zm.4-8.961v7.802l6.08-3.94L9.8 8.04z",
+    fillRule: "evenodd"
+  })));
+};
+
+PlayVideo.displayName = 'Dependent';
+
+var Subtract = function Subtract(props) {
+  return React.createElement(Dependent, props, React.createElement(StyledDependentSVG, {
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24"
+  }, React.createElement("path", {
+    d: "M12 24C5.383 24 0 18.617 0 12S5.383 0 12 0s12 5.383 12 12-5.383 12-12 12zm0-22.957C5.958 1.043 1.043 5.958 1.043 12c0 6.042 4.915 10.957 10.957 10.957 6.042 0 10.957-4.915 10.957-10.957 0-6.042-4.915-10.957-10.957-10.957zM12 11l6.303.162c.387.01.697.329.697.712v-.388a.737.737 0 0 1-.7.723s-3.96.178-6.3.178c-1.994 0-6.3-.18-6.3-.18a.726.726 0 0 1-.7-.721v.388c0-.378.312-.702.697-.712L12 11z",
+    fillRule: "nonzero"
+  })));
+};
+
+Subtract.displayName = 'Dependent';
+
+/* eslint-disable import/prefer-default-export */
+var warn = function warn(componentName, message) {
+  if (process.env.NODE_ENV === 'production') {
+    return;
+  }
+
+  console.warn("[TDS] ".concat(componentName, ": ").concat(message)); // eslint-disable-line no-console
+};
+
+var StyledIconButton = styled(StyledInteractiveIconButton)(animations.scale, {
+  '&:hover > svg': animations.reduceMotion
+});
+
+var getTheme$2 = function getTheme(variant) {
+  if (variant === 'alternative') {
+    return {
+      hoverBackgroundColor: '#D8CBE5'
+    };
+  }
+
+  if (variant === 'inverted') {
+    return {
+      hoverBackgroundColor: 'transparent'
+    };
+  }
+
+  return {
+    hoverBackgroundColor: colorGreyGainsboro
+  };
+};
+/**
+ * @version ./package.json
+ */
+
+
+var IconButton = forwardRef(function (_ref, ref) {
+  var a11yText = _ref.a11yText,
+      variant = _ref.variant,
+      onClick = _ref.onClick,
+      tag = _ref.tag,
+      Icon = _ref.icon,
+      rest = objectWithoutProperties(_ref, ["a11yText", "variant", "onClick", "tag", "icon"]);
+
+  var color;
+
+  if (variant === 'alternative') {
+    color = 'telusPurple';
+  } else if (variant === 'inverted') {
+    color = 'white';
+  } else {
+    color = 'greyShark';
+  }
+
+  if (Icon.name !== 'Add' && Icon.name !== 'Close' && Icon.name !== 'Subtract' && Icon.name !== 'PlayVideo') {
+    warn('IconButton', 'IconButton is meant to be used with the Add, Close, Subtract, and PlayVideo icons for their universally-recognizable appearance. Other icons should be accompanied with text and not as a part of IconButton.');
+  }
+
+  return React.createElement(ThemeProvider, {
+    theme: getTheme$2(variant)
+  }, React.createElement(StyledIconButton, _extends_1({}, safeRest(rest), {
+    variant: variant,
+    onClick: onClick,
+    as: tag,
+    ref: ref
+  }), React.createElement(A11yContent, null, a11yText), React.createElement(StyledInteractiveIconHover, null), React.createElement(Icon, {
+    color: color
+  })));
+});
+IconButton.displayName = 'IconButton';
+IconButton.propTypes = {
+  /**
+   * A description of the icon for assistive technology.
+   */
+  a11yText: PropTypes.string.isRequired,
+
+  /**
+   * The visual style.
+   */
+  variant: PropTypes.oneOf(['default', 'alternative', 'inverted']),
+
+  /**
+   * Pass a handler to the icon to make it interactive.
+   */
+  onClick: PropTypes.func,
+
+  /**
+   * The tag
+   */
+  tag: PropTypes.oneOf(['button', 'a']),
+
+  /**
+   * The icon. Can be one of either the `Add`, `Close`, `PlayVideo`, or `Subtract` icons.
+   */
+  icon: PropTypes.oneOfType([componentWithName('Add'), componentWithName('Close'), componentWithName('PlayVideo'), componentWithName('Subtract')]).isRequired
+};
+IconButton.defaultProps = {
+  variant: 'default',
+  onClick: undefined,
+  tag: 'button'
+};
+
+export { Add, CaretDown, CaretUp, CartEmptyBold, CartFilledBold, ChevronLeft, ChevronRight, Close, Delete, Download, DownloadPDF, DownloadPDFs, Edit, IconButton, LinkExternal, NotifyBold, PlayVideo, Print, Profile, ProfileBold, Search, SearchBold, Settings, SettingsBold, Subtract, SupportBold, UserAddBold };

index.js

 export * from './svgs'
+export { default as IconButton } from './IconButton'

package.json

 {
   "name": "@tds/core-interactive-icon",
-  "version": "1.4.7",
+  "version": "2.0.0",
   "description": "",
@@ -34,5 +34,6 @@ "main": "index.cjs.js",
     "@tds/util-helpers": "^1.4.2",
+    "@tds/util-prop-types": "^1.3.2",
     "prop-types": "^15.5.10"
   },
-  "gitHead": "296a85b279e277a284bdda468136e0fe40f8c6d6"
+  "gitHead": "d52fae01fca9520cf9ffe296c40cb91242a6bc2b"
 }

shared/animations.js

@@ -8,7 +8,8 @@ const animations = {
   scale: {
-    transition: 'transform 150ms ease-in-out',
     '&:hover svg': {
+      transition: 'transform 150ms ease-in-out',
       transform: 'scale(1.1, 1.1)',
     },
     '&:active svg': {
+      transition: 'transform 150ms ease-in-out',
       transform: 'scale(1, 1)',
@@ -15,0 +16,0 @@ },

shared/StyledInteractiveIconHover.jsx

@@ -16,3 +16,2 @@ import styled from 'styled-components'
     height: '100%',
-    zIndex: '1',
     borderRadius: '50%',
@@ -19,0 +18,0 @@ transition: 'transform 200ms ease-in-out',

svgs/Dependent/index.js

@@ -11,1 +11,5 @@ export { default as Delete } from './Delete'
 export { default as Settings } from './Settings'
+export { default as Add } from './Add'
+export { default as Close } from './Close'
+export { default as PlayVideo } from './PlayVideo'
+export { default as Subtract } from './Subtract'

svgs/index.js

@@ -1,4 +0,3 @@
-export * from './InteractiveButton'
 export * from './Limited'
 export * from './NavButton'
 export * from './Dependent'

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

198150

increased by3.62%

Lines of code

3504

increased by1.54%

Worsened metrics

Dependency count

10

increased by11.11%

Number of package files

58

decreased by-1.69%

Number of low supply chain risk alerts

12

increased by20%

Dependency changes

• + Added@tds/util-prop-types@^1.3.2