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

Comparing version 1.1.0 to 1.2.0

__tests__/InteractiveIcon.spec.jsx

 import React from 'react'
 import { shallow, mount } from 'enzyme'
 
-import InteractiveIcon from '../InteractiveIcon'
+import InteractiveIcon from '../InteractiveButton'
 
@@ -32,3 +32,3 @@ describe('InteractiveIcon', () => {
     const interactiveIcon = doShallow({ id: 'the-id', 'data-some-attr': 'some value' }).find(
-      'InteractiveIcon__StyledInteractiveIconButton'
+      'InteractiveButton__StyledInteractiveIconButton'
     )
@@ -35,0 +35,0 @@

CHANGELOG.md

@@ -6,2 +6,13 @@ # Change Log
 
+# [1.2.0](https://github.com/telus/tds-core/compare/@tds/core-interactive-icon@1.1.0...@tds/core-interactive-icon@1.2.0) (2019-10-04)
+
+
+### Features
+
+* **core-interactive-icon:** add caret and chevron icons ([eaa6bc2](https://github.com/telus/tds-core/commit/eaa6bc2))
+
+
+
+
+
 # [1.1.0](https://github.com/telus/tds-core/compare/@tds/core-interactive-icon@1.0.2...@tds/core-interactive-icon@1.1.0) (2019-09-18)
@@ -8,0 +19,0 @@

dist/index.cjs.js

@@ -106,4 +106,4 @@ 'use strict';
 var StyledInteractiveIconButton = styled__default.button.withConfig({
-  displayName: "InteractiveIcon__StyledInteractiveIconButton",
-  componentId: "sc-1pxz8wd-0"
+  displayName: "InteractiveButton__StyledInteractiveIconButton",
+  componentId: "kya8jb-0"
 })(sharedStyles.buttons.noStyle, getOutline, {
@@ -125,4 +125,4 @@ width: '40px',
 var StyledInteractiveIconSVG = styled__default.svg.withConfig({
-  displayName: "InteractiveIcon__StyledInteractiveIconSVG",
-  componentId: "sc-1pxz8wd-1"
+  displayName: "InteractiveButton__StyledInteractiveIconSVG",
+  componentId: "kya8jb-1"
 })(function (_ref2) {
@@ -143,4 +143,4 @@ var theme = _ref2.theme;
 var StyledInteractiveIconHover = styled__default.span.withConfig({
-  displayName: "InteractiveIcon__StyledInteractiveIconHover",
-  componentId: "sc-1pxz8wd-2"
+  displayName: "InteractiveButton__StyledInteractiveIconHover",
+  componentId: "kya8jb-2"
 })(function (_ref3) {
@@ -184,4 +184,4 @@ var theme = _ref3.theme;
   return {
-    backgroundColor: coreColours.colorGainsboro,
-    iconColor: coreColours.colorShark
+    backgroundColor: coreColours.colorGreyGainsboro,
+    iconColor: coreColours.colorGreyShark
   };
@@ -194,3 +194,3 @@ };
 
-var InteractiveIcon = React.forwardRef(function (_ref4, ref) {
+var Button = React.forwardRef(function (_ref4, ref) {
   var a11yText = _ref4.a11yText,
@@ -212,4 +212,4 @@ variant = _ref4.variant,
 });
-InteractiveIcon.displayName = 'InteractiveIcon';
-InteractiveIcon.propTypes = {
+Button.displayName = 'Button';
+Button.propTypes = {
   /**
@@ -240,3 +240,3 @@ * A description of the icon for screen readers.
 };
-InteractiveIcon.defaultProps = {
+Button.defaultProps = {
   variant: 'default',
@@ -248,3 +248,3 @@ onClick: undefined,
 var Add = React.forwardRef(function (props, ref) {
-  return React__default.createElement(InteractiveIcon, _extends_1({}, props, {
+  return React__default.createElement(Button, _extends_1({}, props, {
     ref: ref
@@ -263,3 +263,3 @@ }), React__default.createElement(StyledInteractiveIconSVG, {
 var Close = React.forwardRef(function (props, ref) {
-  return React__default.createElement(InteractiveIcon, _extends_1({}, props, {
+  return React__default.createElement(Button, _extends_1({}, props, {
     ref: ref
@@ -278,3 +278,3 @@ }), React__default.createElement(StyledInteractiveIconSVG, {
 var PlayVideo = React.forwardRef(function (props, ref) {
-  return React__default.createElement(InteractiveIcon, _extends_1({}, props, {
+  return React__default.createElement(Button, _extends_1({}, props, {
     ref: ref
@@ -293,3 +293,3 @@ }), React__default.createElement(StyledInteractiveIconSVG, {
 var Subtract = React.forwardRef(function (props, ref) {
-  return React__default.createElement(InteractiveIcon, _extends_1({}, props, {
+  return React__default.createElement(Button, _extends_1({}, props, {
     ref: ref
@@ -307,5 +307,145 @@ }), React__default.createElement(StyledInteractiveIconSVG, {
 
+var StyledLimitedInteractiveIconSVG = styled__default.svg.withConfig({
+  displayName: "Limited__StyledLimitedInteractiveIconSVG",
+  componentId: "sc-1rpief5-0"
+})(function (_ref) {
+  var theme = _ref.theme;
+  return {
+    fill: theme.iconColor
+  };
+}, function (_ref2) {
+  var animationDirection = _ref2.animationDirection;
+  return defineProperty({
+    width: '24px',
+    height: '24px',
+    zIndex: '2',
+    transition: 'transform 150ms ease-in-out',
+    '@media (prefers-reduced-motion: reduce)': {
+      transition: 'none'
+    }
+  }, ":hover, :focus, :active", {
+    transform: "translate".concat(animationDirection === 'up' || animationDirection === 'down' ? 'Y' : 'X', "(").concat(animationDirection === 'up' || animationDirection === 'left' ? '-' : '', "4px)")
+  });
+});
+
+var getTheme$1 = function getTheme(variant) {
+  if (variant === 'basic') {
+    return {
+      backgroundColor: 'transparent',
+      iconColor: coreColours.colorShark
+    };
+  }
+
+  if (variant === 'alternative') {
+    return {
+      backgroundColor: 'transparent',
+      iconColor: coreColours.colorTelusPurple
+    };
+  }
+
+  if (variant === 'inverted') {
+    return {
+      backgroundColor: 'transparent',
+      iconColor: coreColours.colorWhite
+    };
+  }
+
+  return {
+    backgroundColor: 'transparent',
+    iconColor: coreColours.colorAccessibleGreen
+  };
+};
+/**
+ * @version ./package.json
+ */
+
+
+var Limited = function Limited(_ref4) {
+  var variant = _ref4.variant,
+      children = _ref4.children;
+  return React__default.createElement(styled.ThemeProvider, {
+    theme: getTheme$1(variant)
+  }, children);
+};
+
+Limited.displayName = 'Limited';
+Limited.propTypes = {
+  /**
+   * The style.
+   */
+  variant: PropTypes.oneOf(['default', 'basic', 'alternative', 'inverted']),
+
+  /**
+   * @ignore
+   */
+  children: PropTypes.node.isRequired
+};
+Limited.defaultProps = {
+  variant: 'default'
+};
+
+var CaretUp = React.forwardRef(function (props, ref) {
+  return React__default.createElement(Limited, _extends_1({}, props, {
+    animationDirection: "up",
+    ref: ref
+  }), React__default.createElement(StyledLimitedInteractiveIconSVG, {
+    animationDirection: "up",
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24"
+  }, React__default.createElement("path", {
+    d: "M17.7940812,14.8167698 C17.4424627,15.1174894 17.0896181,14.9549557 16.8868854,14.7547243 L11.9968161,10.259447 L7.11722187,14.7547243 C6.93839231,14.9185479 6.49053328,15.1800328 6.16524043,14.8167698 C5.83994757,14.4535067 6.06520964,14.0838947 6.24327169,13.9200711 L11.6348225,8.12339734 C11.8136521,7.95886755 12.1060729,7.95886755 12.2849025,8.12339734 C12.2849025,8.12410347 17.7940809,13.920071 17.7940809,13.920071 C17.9792355,14.0649573 18.1456996,14.5160501 17.7940812,14.8167698 Z"
+  })));
+});
+CaretUp.displayName = 'CaretUp';
+
+var CaretDown = React.forwardRef(function (props, ref) {
+  return React__default.createElement(Limited, _extends_1({}, props, {
+    ref: ref
+  }), React__default.createElement(StyledLimitedInteractiveIconSVG, {
+    animationDirection: "down",
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24"
+  }, React__default.createElement("path", {
+    d: "M17.7940812,9.18323023 C17.4424627,8.8825106 17.0896181,9.04504427 16.8868854,9.24527574 L11.9968161,13.740553 L7.11722187,9.24527573 C6.93839231,9.08145209 6.49053328,8.81996721 6.16524043,9.18323023 C5.83994757,9.54649326 6.06520964,9.91610528 6.24327169,10.0799289 L11.6348225,15.8766027 C11.8136521,16.0411324 12.1060729,16.0411324 12.2849025,15.8766027 C12.2849025,15.8758965 17.7940809,10.079929 17.7940809,10.079929 C17.9792355,9.93504267 18.1456996,9.48394985 17.7940812,9.18323023 Z"
+  })));
+});
+CaretDown.displayName = 'CaretDown';
+
+var ChevronLeft = React.forwardRef(function (props, ref) {
+  return React__default.createElement(Limited, _extends_1({}, props, {
+    ref: ref
+  }), React__default.createElement(StyledLimitedInteractiveIconSVG, {
+    animationDirection: "left",
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24"
+  }, React__default.createElement("path", {
+    d: "M14.8167698,17.7940812 C14.5160501,18.1456996 14.0649573,17.9792355 13.920071,17.7940809 C13.920071,17.7940809 8.12410347,12.2849025 8.12339734,12.2849025 C7.95886755,12.1060729 7.95886755,11.8136521 8.12339734,11.6348225 L13.9200711,6.24327169 C14.0838947,6.06520964 14.4535067,5.83994757 14.8167698,6.16524043 C15.1800328,6.49053328 14.9185479,6.93839231 14.7547243,7.11722187 L10.259447,11.9968161 L14.7547243,16.8868854 C14.9549557,17.0896181 15.1174894,17.4424627 14.8167698,17.7940812 Z"
+  })));
+});
+ChevronLeft.displayName = 'ChevronLeft';
+
+var ChevronRight = React.forwardRef(function (props, ref) {
+  return React__default.createElement(Limited, _extends_1({}, props, {
+    ref: ref
+  }), React__default.createElement(StyledLimitedInteractiveIconSVG, {
+    animationDirection: "right",
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24"
+  }, React__default.createElement("path", {
+    d: "M9.18323023,17.7940812 C8.8825106,17.4424627 9.04504427,17.0896181 9.24527574,16.8868854 L13.740553,11.9968161 L9.24527573,7.11722187 C9.08145209,6.93839231 8.81996721,6.49053328 9.18323023,6.16524043 C9.54649326,5.83994757 9.91610528,6.06520964 10.0799289,6.24327169 L15.8766027,11.6348225 C16.0411324,11.8136521 16.0411324,12.1060729 15.8766027,12.2849025 C15.8758965,12.2849025 10.079929,17.7940809 10.079929,17.7940809 C9.93504267,17.9792355 9.48394985,18.1456996 9.18323023,17.7940812 Z"
+  })));
+});
+ChevronRight.displayName = 'ChevronRight';
+
 exports.Add = Add;
+exports.CaretDown = CaretDown;
+exports.CaretUp = CaretUp;
+exports.ChevronLeft = ChevronLeft;
+exports.ChevronRight = ChevronRight;
 exports.Close = Close;
 exports.PlayVideo = PlayVideo;
 exports.Subtract = Subtract;

dist/index.es.js

@@ -5,3 +5,3 @@ import React, { forwardRef } from 'react';
 import A11yContent from '@tds/core-a11y-content';
-import { colorTelusPurple, colorWhite, colorGainsboro, colorShark } from '@tds/core-colours';
+import { colorTelusPurple, colorWhite, colorGreyGainsboro, colorGreyShark, colorShark, colorAccessibleGreen } from '@tds/core-colours';
 import { buttons } from '@tds/shared-styles';
@@ -99,4 +99,4 @@ import { safeRest } from '@tds/util-helpers';
 var StyledInteractiveIconButton = styled.button.withConfig({
-  displayName: "InteractiveIcon__StyledInteractiveIconButton",
-  componentId: "sc-1pxz8wd-0"
+  displayName: "InteractiveButton__StyledInteractiveIconButton",
+  componentId: "kya8jb-0"
 })(buttons.noStyle, getOutline, {
@@ -118,4 +118,4 @@ width: '40px',
 var StyledInteractiveIconSVG = styled.svg.withConfig({
-  displayName: "InteractiveIcon__StyledInteractiveIconSVG",
-  componentId: "sc-1pxz8wd-1"
+  displayName: "InteractiveButton__StyledInteractiveIconSVG",
+  componentId: "kya8jb-1"
 })(function (_ref2) {
@@ -136,4 +136,4 @@ var theme = _ref2.theme;
 var StyledInteractiveIconHover = styled.span.withConfig({
-  displayName: "InteractiveIcon__StyledInteractiveIconHover",
-  componentId: "sc-1pxz8wd-2"
+  displayName: "InteractiveButton__StyledInteractiveIconHover",
+  componentId: "kya8jb-2"
 })(function (_ref3) {
@@ -177,4 +177,4 @@ var theme = _ref3.theme;
   return {
-    backgroundColor: colorGainsboro,
-    iconColor: colorShark
+    backgroundColor: colorGreyGainsboro,
+    iconColor: colorGreyShark
   };
@@ -187,3 +187,3 @@ };
 
-var InteractiveIcon = forwardRef(function (_ref4, ref) {
+var Button = forwardRef(function (_ref4, ref) {
   var a11yText = _ref4.a11yText,
@@ -205,4 +205,4 @@ variant = _ref4.variant,
 });
-InteractiveIcon.displayName = 'InteractiveIcon';
-InteractiveIcon.propTypes = {
+Button.displayName = 'Button';
+Button.propTypes = {
   /**
@@ -233,3 +233,3 @@ * A description of the icon for screen readers.
 };
-InteractiveIcon.defaultProps = {
+Button.defaultProps = {
   variant: 'default',
@@ -241,3 +241,3 @@ onClick: undefined,
 var Add = forwardRef(function (props, ref) {
-  return React.createElement(InteractiveIcon, _extends_1({}, props, {
+  return React.createElement(Button, _extends_1({}, props, {
     ref: ref
@@ -256,3 +256,3 @@ }), React.createElement(StyledInteractiveIconSVG, {
 var Close = forwardRef(function (props, ref) {
-  return React.createElement(InteractiveIcon, _extends_1({}, props, {
+  return React.createElement(Button, _extends_1({}, props, {
     ref: ref
@@ -271,3 +271,3 @@ }), React.createElement(StyledInteractiveIconSVG, {
 var PlayVideo = forwardRef(function (props, ref) {
-  return React.createElement(InteractiveIcon, _extends_1({}, props, {
+  return React.createElement(Button, _extends_1({}, props, {
     ref: ref
@@ -286,3 +286,3 @@ }), React.createElement(StyledInteractiveIconSVG, {
 var Subtract = forwardRef(function (props, ref) {
-  return React.createElement(InteractiveIcon, _extends_1({}, props, {
+  return React.createElement(Button, _extends_1({}, props, {
     ref: ref
@@ -300,2 +300,138 @@ }), React.createElement(StyledInteractiveIconSVG, {
 
-export { Add, Close, PlayVideo, Subtract };
+var StyledLimitedInteractiveIconSVG = styled.svg.withConfig({
+  displayName: "Limited__StyledLimitedInteractiveIconSVG",
+  componentId: "sc-1rpief5-0"
+})(function (_ref) {
+  var theme = _ref.theme;
+  return {
+    fill: theme.iconColor
+  };
+}, function (_ref2) {
+  var animationDirection = _ref2.animationDirection;
+  return defineProperty({
+    width: '24px',
+    height: '24px',
+    zIndex: '2',
+    transition: 'transform 150ms ease-in-out',
+    '@media (prefers-reduced-motion: reduce)': {
+      transition: 'none'
+    }
+  }, ":hover, :focus, :active", {
+    transform: "translate".concat(animationDirection === 'up' || animationDirection === 'down' ? 'Y' : 'X', "(").concat(animationDirection === 'up' || animationDirection === 'left' ? '-' : '', "4px)")
+  });
+});
+
+var getTheme$1 = function getTheme(variant) {
+  if (variant === 'basic') {
+    return {
+      backgroundColor: 'transparent',
+      iconColor: colorShark
+    };
+  }
+
+  if (variant === 'alternative') {
+    return {
+      backgroundColor: 'transparent',
+      iconColor: colorTelusPurple
+    };
+  }
+
+  if (variant === 'inverted') {
+    return {
+      backgroundColor: 'transparent',
+      iconColor: colorWhite
+    };
+  }
+
+  return {
+    backgroundColor: 'transparent',
+    iconColor: colorAccessibleGreen
+  };
+};
+/**
+ * @version ./package.json
+ */
+
+
+var Limited = function Limited(_ref4) {
+  var variant = _ref4.variant,
+      children = _ref4.children;
+  return React.createElement(ThemeProvider, {
+    theme: getTheme$1(variant)
+  }, children);
+};
+
+Limited.displayName = 'Limited';
+Limited.propTypes = {
+  /**
+   * The style.
+   */
+  variant: PropTypes.oneOf(['default', 'basic', 'alternative', 'inverted']),
+
+  /**
+   * @ignore
+   */
+  children: PropTypes.node.isRequired
+};
+Limited.defaultProps = {
+  variant: 'default'
+};
+
+var CaretUp = forwardRef(function (props, ref) {
+  return React.createElement(Limited, _extends_1({}, props, {
+    animationDirection: "up",
+    ref: ref
+  }), React.createElement(StyledLimitedInteractiveIconSVG, {
+    animationDirection: "up",
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24"
+  }, React.createElement("path", {
+    d: "M17.7940812,14.8167698 C17.4424627,15.1174894 17.0896181,14.9549557 16.8868854,14.7547243 L11.9968161,10.259447 L7.11722187,14.7547243 C6.93839231,14.9185479 6.49053328,15.1800328 6.16524043,14.8167698 C5.83994757,14.4535067 6.06520964,14.0838947 6.24327169,13.9200711 L11.6348225,8.12339734 C11.8136521,7.95886755 12.1060729,7.95886755 12.2849025,8.12339734 C12.2849025,8.12410347 17.7940809,13.920071 17.7940809,13.920071 C17.9792355,14.0649573 18.1456996,14.5160501 17.7940812,14.8167698 Z"
+  })));
+});
+CaretUp.displayName = 'CaretUp';
+
+var CaretDown = forwardRef(function (props, ref) {
+  return React.createElement(Limited, _extends_1({}, props, {
+    ref: ref
+  }), React.createElement(StyledLimitedInteractiveIconSVG, {
+    animationDirection: "down",
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24"
+  }, React.createElement("path", {
+    d: "M17.7940812,9.18323023 C17.4424627,8.8825106 17.0896181,9.04504427 16.8868854,9.24527574 L11.9968161,13.740553 L7.11722187,9.24527573 C6.93839231,9.08145209 6.49053328,8.81996721 6.16524043,9.18323023 C5.83994757,9.54649326 6.06520964,9.91610528 6.24327169,10.0799289 L11.6348225,15.8766027 C11.8136521,16.0411324 12.1060729,16.0411324 12.2849025,15.8766027 C12.2849025,15.8758965 17.7940809,10.079929 17.7940809,10.079929 C17.9792355,9.93504267 18.1456996,9.48394985 17.7940812,9.18323023 Z"
+  })));
+});
+CaretDown.displayName = 'CaretDown';
+
+var ChevronLeft = forwardRef(function (props, ref) {
+  return React.createElement(Limited, _extends_1({}, props, {
+    ref: ref
+  }), React.createElement(StyledLimitedInteractiveIconSVG, {
+    animationDirection: "left",
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24"
+  }, React.createElement("path", {
+    d: "M14.8167698,17.7940812 C14.5160501,18.1456996 14.0649573,17.9792355 13.920071,17.7940809 C13.920071,17.7940809 8.12410347,12.2849025 8.12339734,12.2849025 C7.95886755,12.1060729 7.95886755,11.8136521 8.12339734,11.6348225 L13.9200711,6.24327169 C14.0838947,6.06520964 14.4535067,5.83994757 14.8167698,6.16524043 C15.1800328,6.49053328 14.9185479,6.93839231 14.7547243,7.11722187 L10.259447,11.9968161 L14.7547243,16.8868854 C14.9549557,17.0896181 15.1174894,17.4424627 14.8167698,17.7940812 Z"
+  })));
+});
+ChevronLeft.displayName = 'ChevronLeft';
+
+var ChevronRight = forwardRef(function (props, ref) {
+  return React.createElement(Limited, _extends_1({}, props, {
+    ref: ref
+  }), React.createElement(StyledLimitedInteractiveIconSVG, {
+    animationDirection: "right",
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24"
+  }, React.createElement("path", {
+    d: "M9.18323023,17.7940812 C8.8825106,17.4424627 9.04504427,17.0896181 9.24527574,16.8868854 L13.740553,11.9968161 L9.24527573,7.11722187 C9.08145209,6.93839231 8.81996721,6.49053328 9.18323023,6.16524043 C9.54649326,5.83994757 9.91610528,6.06520964 10.0799289,6.24327169 L15.8766027,11.6348225 C16.0411324,11.8136521 16.0411324,12.1060729 15.8766027,12.2849025 C15.8758965,12.2849025 10.079929,17.7940809 10.079929,17.7940809 C9.93504267,17.9792355 9.48394985,18.1456996 9.18323023,17.7940812 Z"
+  })));
+});
+ChevronRight.displayName = 'ChevronRight';
+
+export { Add, CaretDown, CaretUp, ChevronLeft, ChevronRight, Close, PlayVideo, Subtract };

package.json

 {
   "name": "@tds/core-interactive-icon",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "",
@@ -30,8 +30,8 @@ "main": "index.cjs.js",
     "@tds/core-a11y-content": "^2.1.1",
-    "@tds/core-colours": "^2.1.0",
-    "@tds/shared-styles": "^1.5.0",
+    "@tds/core-colours": "^2.2.0",
+    "@tds/shared-styles": "^1.5.1",
     "@tds/util-helpers": "^1.2.0",
     "prop-types": "^15.5.10"
   },
-  "gitHead": "a38146d0546ea892056615a9b2adcdb0533e5e8d"
+  "gitHead": "d3b1a20b3d787966d7aa1ffd601963f1584da21f"
 }

svgs/Add.jsx

 import React, { forwardRef } from 'react'
 
-import InteractiveIcon, { StyledInteractiveIconSVG } from '../InteractiveIcon'
+import InteractiveIcon, { StyledInteractiveIconSVG } from '../InteractiveButton'
 
@@ -5,0 +5,0 @@ const Add = forwardRef((props, ref) => (

svgs/Close.jsx

 import React, { forwardRef } from 'react'
 
-import InteractiveIcon, { StyledInteractiveIconSVG } from '../InteractiveIcon'
+import InteractiveIcon, { StyledInteractiveIconSVG } from '../InteractiveButton'
 
@@ -5,0 +5,0 @@ const Close = forwardRef((props, ref) => (

svgs/index.js

@@ -5,1 +5,5 @@ export { default as Add } from './Add'
 export { default as Subtract } from './Subtract'
+export { default as CaretUp } from './CaretUp'
+export { default as CaretDown } from './CaretDown'
+export { default as ChevronLeft } from './ChevronLeft'
+export { default as ChevronRight } from './ChevronRight'

svgs/PlayVideo.jsx

 import React, { forwardRef } from 'react'
 
-import InteractiveIcon, { StyledInteractiveIconSVG } from '../InteractiveIcon'
+import InteractiveIcon, { StyledInteractiveIconSVG } from '../InteractiveButton'
 
@@ -5,0 +5,0 @@ const PlayVideo = forwardRef((props, ref) => (

svgs/Subtract.jsx

 import React, { forwardRef } from 'react'
 
-import InteractiveIcon, { StyledInteractiveIconSVG } from '../InteractiveIcon'
+import InteractiveIcon, { StyledInteractiveIconSVG } from '../InteractiveButton'
 
@@ -5,0 +5,0 @@ const Subtract = forwardRef((props, ref) => (

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

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

58998

increased by47.83%

Number of package files

25

increased by31.58%

Lines of code

1163

increased by51.24%

Dependency changes

• Updated@tds/core-colours@^2.2.0

• Updated@tds/shared-styles@^1.5.1