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

Comparing version 1.0.10 to 1.0.11

__tests__/FeedbackIcon.spec.jsx

@@ -11,3 +11,3 @@ import React from 'react'
 describe('FeedbackIcon', () => {
-  const defaultProps = { copy: { a11yText: 'Hello' } }
+  const defaultProps = { copy: { a11yText: 'Hello' }, width: 20, height: 20 }
 
@@ -18,3 +18,3 @@ const doShallow = props => shallow(<FeedbackIcon {...defaultProps} {...props} />)
     const feedbackIcon = render(
-      <FeedbackIcon copy={{ a11yText: 'Hello' }}>
+      <FeedbackIcon copy={{ a11yText: 'Hello' }} width={20} height={20}>
         <svg />
@@ -27,12 +27,2 @@ </FeedbackIcon>
 
-  it('to render an svg tag', () => {
-    const feedbackIcon = doShallow({
-      children: <path />,
-      id: 'the-id',
-      'data-some-attr': 'some value',
-    })
-
-    expect(feedbackIcon.type()).toEqual('svg')
-  })
-
   it('has an img="role" attribute', () => {
@@ -39,0 +29,0 @@ const feedbackIcon = doShallow({

CHANGELOG.md

@@ -6,2 +6,13 @@ # Change Log
 
+## [1.0.11](https://github.com/telus/tds-core/compare/@tds/core-feedback-icon@1.0.10...@tds/core-feedback-icon@1.0.11) (2021-01-15)
+
+
+### Bug Fixes
+
+* **core-feedback-icon:** scale icon size with browser font size ([2ae9a9e](https://github.com/telus/tds-core/commit/2ae9a9ef3ae963bfdfdd0e8c3e2dc980cb763c43))
+
+
+
+
+
 ## [1.0.10](https://github.com/telus/tds-core/compare/@tds/core-feedback-icon@1.0.9...@tds/core-feedback-icon@1.0.10) (2020-09-11)
@@ -8,0 +19,0 @@

dist/index.cjs.js

@@ -10,2 +10,3 @@ 'use strict';
 var PropTypes = _interopDefault(require('prop-types'));
+var styled = _interopDefault(require('styled-components'));
 var utilHelpers = require('@tds/util-helpers');
@@ -86,2 +87,13 @@
 
+var StyledSVG = styled.svg.withConfig({
+  displayName: "FeedbackIcon__StyledSVG",
+  componentId: "sc-1swr281-0"
+})(function (_ref) {
+  var width = _ref.width,
+      height = _ref.height;
+  return {
+    width: "".concat(width, "rem"),
+    height: "".concat(height, "rem")
+  };
+});
 /**
@@ -91,8 +103,10 @@ * @version ./package.json
 
-var FeedbackIcon = function FeedbackIcon(_ref) {
-  var copy = _ref.copy,
-      copyDictionary = _ref.copyDictionary,
-      optionalText = _ref.optionalText,
-      children = _ref.children,
-      rest = objectWithoutProperties(_ref, ["copy", "copyDictionary", "optionalText", "children"]);
+var FeedbackIcon = function FeedbackIcon(_ref2) {
+  var width = _ref2.width,
+      height = _ref2.height,
+      copy = _ref2.copy,
+      copyDictionary = _ref2.copyDictionary,
+      optionalText = _ref2.optionalText,
+      children = _ref2.children,
+      rest = objectWithoutProperties(_ref2, ["width", "height", "copy", "copyDictionary", "optionalText", "children"]);
 
@@ -109,5 +123,7 @@ if (rest.onClick) {
 
-  return React.createElement("svg", _extends_1({}, utilHelpers.safeRest(rest), {
+  return React.createElement(StyledSVG, _extends_1({}, utilHelpers.safeRest(rest), {
     role: "img",
-    "aria-hidden": a11yText === '' ? true : undefined
+    "aria-hidden": a11yText === '' ? true : undefined,
+    width: utilHelpers.pixelToRem(width),
+    height: utilHelpers.pixelToRem(height)
   }), a11yText && React.createElement("title", null, a11yText), children);
@@ -134,3 +150,9 @@ };
   /** @ignore */
-  children: PropTypes.node.isRequired
+  children: PropTypes.node.isRequired,
+
+  /** @ignore */
+  width: PropTypes.number.isRequired,
+
+  /** @ignore */
+  height: PropTypes.number.isRequired
 };
@@ -137,0 +159,0 @@ FeedbackIcon.defaultProps = {

dist/index.es.js

 import React from 'react';
 import { colorAccessibleGreen, colorCardinal, colorRajahDark, colorGreyShark } from '@tds/core-colours';
 import PropTypes from 'prop-types';
-import { getCopy, safeRest } from '@tds/util-helpers';
+import styled from 'styled-components';
+import { getCopy, safeRest, pixelToRem } from '@tds/util-helpers';
 
@@ -79,2 +80,13 @@ function createCommonjsModule(fn, module) {
 
+var StyledSVG = styled.svg.withConfig({
+  displayName: "FeedbackIcon__StyledSVG",
+  componentId: "sc-1swr281-0"
+})(function (_ref) {
+  var width = _ref.width,
+      height = _ref.height;
+  return {
+    width: "".concat(width, "rem"),
+    height: "".concat(height, "rem")
+  };
+});
 /**
@@ -84,8 +96,10 @@ * @version ./package.json
 
-var FeedbackIcon = function FeedbackIcon(_ref) {
-  var copy = _ref.copy,
-      copyDictionary = _ref.copyDictionary,
-      optionalText = _ref.optionalText,
-      children = _ref.children,
-      rest = objectWithoutProperties(_ref, ["copy", "copyDictionary", "optionalText", "children"]);
+var FeedbackIcon = function FeedbackIcon(_ref2) {
+  var width = _ref2.width,
+      height = _ref2.height,
+      copy = _ref2.copy,
+      copyDictionary = _ref2.copyDictionary,
+      optionalText = _ref2.optionalText,
+      children = _ref2.children,
+      rest = objectWithoutProperties(_ref2, ["width", "height", "copy", "copyDictionary", "optionalText", "children"]);
 
@@ -102,5 +116,7 @@ if (rest.onClick) {
 
-  return React.createElement("svg", _extends_1({}, safeRest(rest), {
+  return React.createElement(StyledSVG, _extends_1({}, safeRest(rest), {
     role: "img",
-    "aria-hidden": a11yText === '' ? true : undefined
+    "aria-hidden": a11yText === '' ? true : undefined,
+    width: pixelToRem(width),
+    height: pixelToRem(height)
   }), a11yText && React.createElement("title", null, a11yText), children);
@@ -127,3 +143,9 @@ };
   /** @ignore */
-  children: PropTypes.node.isRequired
+  children: PropTypes.node.isRequired,
+
+  /** @ignore */
+  width: PropTypes.number.isRequired,
+
+  /** @ignore */
+  height: PropTypes.number.isRequired
 };
@@ -130,0 +152,0 @@ FeedbackIcon.defaultProps = {

FeedbackIcon.jsx

 import React from 'react'
 import PropTypes from 'prop-types'
-import { getCopy, safeRest } from '@tds/util-helpers'
+import styled from 'styled-components'
 
+import { getCopy, safeRest, pixelToRem } from '@tds/util-helpers'
+
 import { warn } from '../../shared/utils/warn'
 
+const StyledSVG = styled.svg(({ width, height }) => ({
+  width: `${width}rem`,
+  height: `${height}rem`,
+}))
 /**
  * @version ./package.json
  */
-const FeedbackIcon = ({ copy, copyDictionary, optionalText, children, ...rest }) => {
+const FeedbackIcon = ({ width, height, copy, copyDictionary, optionalText, children, ...rest }) => {
   if (rest.onClick) {
@@ -28,6 +34,12 @@ warn(
   return (
-    <svg {...safeRest(rest)} role="img" aria-hidden={a11yText === '' ? true : undefined}>
+    <StyledSVG
+      {...safeRest(rest)}
+      role="img"
+      aria-hidden={a11yText === '' ? true : undefined}
+      width={pixelToRem(width)}
+      height={pixelToRem(height)}
+    >
       {a11yText && <title>{a11yText}</title>}
       {children}
-    </svg>
+    </StyledSVG>
   )
@@ -55,2 +67,6 @@ }
   children: PropTypes.node.isRequired,
+  /** @ignore */
+  width: PropTypes.number.isRequired,
+  /** @ignore */
+  height: PropTypes.number.isRequired,
 }
@@ -57,0 +73,0 @@

package.json

 {
   "name": "@tds/core-feedback-icon",
-  "version": "1.0.10",
+  "version": "1.0.11",
   "description": "",
@@ -30,6 +30,6 @@ "main": "index.cjs.js",
     "@tds/core-colours": "^2.2.1",
-    "@tds/util-helpers": "^1.5.1",
+    "@tds/util-helpers": "^1.6.0",
     "prop-types": "^15.5.10"
   },
-  "gitHead": "75cca2ccb763f7a4d8834024e2e64d0ad88f0981"
+  "gitHead": "7e200d67011651c14f894191e0667af9817d2377"
 }

No alert changes

Improved metrics

Total package byte prevSize

44792

increased by4.3%

Lines of code

974

increased by5.07%

Dependency changes

• Updated@tds/util-helpers@^1.6.0