@tds/core-button-group - npm Package Compare versions

Comparing version 1.0.17 to 2.0.0

__tests__/ButtonGroup.spec.jsx

@@ -36,3 +36,3 @@ import React from 'react'
   it('renders', () => {
-    const buttonGroup = doShallow()
+    const buttonGroup = doMount()
 
@@ -39,0 +39,0 @@ expect(buttonGroup).toMatchSnapshot()

ButtonGroup.jsx

@@ -8,2 +8,3 @@ import React from 'react'
 
+import styled from 'styled-components'
 import ButtonGroupItem from './ButtonGroupItem/ButtonGroupItem'
@@ -14,3 +15,6 @@
 
-import styles from './ButtonGroup.modules.scss'
+const StyledButtonGroup = styled(Box)({
+  flexFlow: 'row wrap',
+  maxWidth: '784px',
+})
 
@@ -43,2 +47,3 @@ /**
   }
+
   return (
@@ -52,5 +57,5 @@ <fieldset {...safeRest(rest)} name={name}>
 
-      <Box between={3} inline className={styles.buttonGroup}>
+      <StyledButtonGroup between={3} inline>
         {passedButtons}
-      </Box>
+      </StyledButtonGroup>
     </fieldset>
@@ -57,0 +62,0 @@ )

ButtonGroupItem/ButtonGroupItem.jsx

@@ -6,7 +6,66 @@ import React from 'react'
 
+import styled from 'styled-components'
+
+import { borders, forms } from '@tds/shared-styles'
+import { medium, boldFont } from '@tds/shared-typography'
+import { media } from '@tds/core-responsive'
+import { colorTelusPurple, colorWhite } from '@tds/core-colours'
+import generateId from '../../../shared/utils/generateId/generateId'
 import safeRest from '../../../shared/utils/safeRest'
-import generateId from '../../../shared/utils/generateId/generateId'
 
-import styles from './ButtonGroupItem.modules.scss'
+const baseButton = {
+  margin: 0,
+  padding: '0 2rem',
+  cursor: 'pointer',
+  background: 'none',
+  transition: 'background 0.2s',
+  display: 'flex',
+  width: '100%',
+  alignItems: 'center',
+  justifyContent: 'center',
+  ...media.from('md').css({
+    display: 'inline-flex',
+    width: 'auto',
+    minWidth: '136px',
+  }),
+}
 
+const StyledButtonGroupItem = styled.div({
+  margin: '0.5rem 0',
+})
+const StyledInput = styled.input({
+  position: 'fixed',
+  opacity: '0',
+  '&:checked ~ label': {
+    backgroundColor: colorTelusPurple,
+    boxShadow: `0px 0px 0px 0px ${colorTelusPurple}`,
+    color: colorWhite,
+  },
+  '&:focus ~ label': {
+    boxShadow: `0px 0px 0px 2px ${colorTelusPurple}, 0px 0px 8px 1px ${colorTelusPurple}`,
+  },
+})
+const StyledLabel = styled.label(
+  borders.none,
+  borders.rounded,
+  medium,
+  boldFont,
+  forms.height,
+  forms.font,
+  baseButton,
+  {
+    transition: 'background 0.2s, color 0.2s, box-shadow 0.2s',
+    backgroundColor: colorWhite,
+    boxShadow: `0px 0px 0px 1px ${colorTelusPurple}`,
+    color: colorTelusPurple,
+    whiteSpace: 'nowrap',
+    minWidth: '136px',
+    '&:hover': {
+      backgroundColor: colorWhite,
+      color: colorTelusPurple,
+      boxShadow: `0px 0px 0px 2px ${colorTelusPurple}, 0px 0px 8px 1px ${colorTelusPurple}`,
+    },
+  }
+)
+
 const ButtonGroupItem = ({
@@ -24,4 +83,4 @@ name,
   return (
-    <div {...safeRest(rest)} className={styles.itemContainer}>
-      <input
+    <StyledButtonGroupItem {...safeRest(rest)}>
+      <StyledInput
         id={itemId}
@@ -35,8 +94,5 @@ name={name}
         onBlur={onBlur}
-        className={styles.hiddenRadio}
       />
-      <label htmlFor={itemId} className={styles.itemButton}>
-        {children}
-      </label>
-    </div>
+      <StyledLabel htmlFor={itemId}>{children}</StyledLabel>
+    </StyledButtonGroupItem>
   )
@@ -43,0 +99,0 @@ }

CHANGELOG.md

@@ -6,2 +6,18 @@ # Change Log
 
+# [2.0.0](https://github.com/telusdigital/tds-core/compare/@tds/core-button-group@1.0.17...@tds/core-button-group@2.0.0) (2019-05-06)
+
+
+### Features
+
+* **core-button-group:** upgrade to styled components ([5f358fd](https://github.com/telusdigital/tds-core/commit/5f358fd))
+
+
+### BREAKING CHANGES
+
+* **core-button-group:** styled components 4.1.3 and react 16.8.2 are peer dependencies
+
+
+
+
+
 ## [1.0.17](https://github.com/telusdigital/tds-core/compare/@tds/core-button-group@1.0.16...@tds/core-button-group@1.0.17) (2019-05-01)
@@ -8,0 +24,0 @@

dist/index.cjs.js

@@ -10,2 +10,6 @@ 'use strict';
 var utilPropTypes = require('@tds/util-prop-types');
+var styled = _interopDefault(require('styled-components'));
+var sharedStyles = require('@tds/shared-styles');
+var sharedTypography = require('@tds/shared-typography');
+var coreResponsive = require('@tds/core-responsive');
 
@@ -76,11 +80,6 @@ function createCommonjsModule(fn, module) {
 
-var safeRest = (function (_ref) {
-  var style = _ref.style,
-      className = _ref.className,
-      as = _ref.as,
-      props = objectWithoutProperties(_ref, ["style", "className", "as"]);
+// colours
+var colorTelusPurple = '#4b286d';
+var colorWhite = '#fff';
 
-  return props;
-});
-
 function find(t,n,r){if("function"==typeof Array.prototype.find)return t.find(n,r);r=r||this;var f=t.length;if("function"!=typeof n)throw new TypeError(n+" is not a function");for(var o=0;o<f;o++)if(n.call(r,t[o],o,t))return t[o]}
@@ -110,4 +109,65 @@
 
-var styles = {"itemContainer":"TDS_ButtonGroupItem-modules__itemContainer___3a5w6","itemButton":"TDS_ButtonGroupItem-modules__itemButton___31uOH TDS_BaseButton-modules__sizing___2kf7G TDS_BaseButton-modules__base___61gnI TDS_BaseButton-modules__wordBreak___1qfBE TDS_Borders-modules__none___1fCjZ TDS_Borders-modules__rounded___3df1Q TDS_BaseButton-modules__medium___P82Pj TDS_BaseButton-modules__wordBreak___1qfBE TDS_BaseButton-modules__boldFont___1EFV0 TDS_BaseButton-modules__wordBreak___1qfBE TDS_Forms-modules__height___W6QXx TDS_Forms-modules__font___g7OGX","hiddenRadio":"TDS_ButtonGroupItem-modules__hiddenRadio___2vB96"};
+var safeRest = (function (_ref) {
+  var style = _ref.style,
+      className = _ref.className,
+      as = _ref.as,
+      props = objectWithoutProperties(_ref, ["style", "className", "as"]);
 
+  return props;
+});
+
+var baseButton = _extends_1({
+  margin: 0,
+  padding: '0 2rem',
+  cursor: 'pointer',
+  background: 'none',
+  transition: 'background 0.2s',
+  display: 'flex',
+  width: '100%',
+  alignItems: 'center',
+  justifyContent: 'center'
+}, coreResponsive.media.from('md').css({
+  display: 'inline-flex',
+  width: 'auto',
+  minWidth: '136px'
+}));
+
+var StyledButtonGroupItem = styled.div.withConfig({
+  displayName: "ButtonGroupItem__StyledButtonGroupItem",
+  componentId: "drabnz-0"
+})({
+  margin: '0.5rem 0'
+});
+var StyledInput = styled.input.withConfig({
+  displayName: "ButtonGroupItem__StyledInput",
+  componentId: "drabnz-1"
+})({
+  position: 'fixed',
+  opacity: '0',
+  '&:checked ~ label': {
+    backgroundColor: colorTelusPurple,
+    boxShadow: "0px 0px 0px 0px ".concat(colorTelusPurple),
+    color: colorWhite
+  },
+  '&:focus ~ label': {
+    boxShadow: "0px 0px 0px 2px ".concat(colorTelusPurple, ", 0px 0px 8px 1px ").concat(colorTelusPurple)
+  }
+});
+var StyledLabel = styled.label.withConfig({
+  displayName: "ButtonGroupItem__StyledLabel",
+  componentId: "drabnz-2"
+})(sharedStyles.borders.none, sharedStyles.borders.rounded, sharedTypography.medium, sharedTypography.boldFont, sharedStyles.forms.height, sharedStyles.forms.font, baseButton, {
+  transition: 'background 0.2s, color 0.2s, box-shadow 0.2s',
+  backgroundColor: colorWhite,
+  boxShadow: "0px 0px 0px 1px ".concat(colorTelusPurple),
+  color: colorTelusPurple,
+  whiteSpace: 'nowrap',
+  minWidth: '136px',
+  '&:hover': {
+    backgroundColor: colorWhite,
+    color: colorTelusPurple,
+    boxShadow: "0px 0px 0px 2px ".concat(colorTelusPurple, ", 0px 0px 8px 1px ").concat(colorTelusPurple)
+  }
+});
+
 var ButtonGroupItem = function ButtonGroupItem(_ref) {
@@ -124,5 +184,3 @@ var name = _ref.name,
   var itemId = generateId(name).postfix(value);
-  return React.createElement("div", _extends_1({}, safeRest(rest), {
-    className: styles.itemContainer
-  }), React.createElement("input", {
+  return React.createElement(StyledButtonGroupItem, safeRest(rest), React.createElement(StyledInput, {
     id: itemId,
@@ -135,7 +193,5 @@ name: name,
     onFocus: onFocus,
-    onBlur: onBlur,
-    className: styles.hiddenRadio
-  }), React.createElement("label", {
-    htmlFor: itemId,
-    className: styles.itemButton
+    onBlur: onBlur
+  }), React.createElement(StyledLabel, {
+    htmlFor: itemId
   }, children));
@@ -208,4 +264,6 @@ };
 
-var styles$1 = {"buttonGroup":"TDS_ButtonGroup-modules__buttonGroup___2jYkO"};
-
+var StyledButtonGroup = styled(Box)({
+  flexFlow: 'row wrap',
+  maxWidth: '784px'
+});
 /**
@@ -249,6 +307,5 @@ * An input component utilizing buttons that act as radios.
     size: "medium"
-  }, label)), React.createElement(Box, {
+  }, label)), React.createElement(StyledButtonGroup, {
     between: 3,
-    inline: true,
-    className: styles$1.buttonGroup
+    inline: true
   }, passedButtons));
@@ -255,0 +312,0 @@ };

dist/index.es.js

@@ -6,2 +6,6 @@ import React from 'react';
 import { or, componentWithName } from '@tds/util-prop-types';
+import styled from 'styled-components';
+import { borders, forms } from '@tds/shared-styles';
+import { medium, boldFont } from '@tds/shared-typography';
+import { media } from '@tds/core-responsive';
 
@@ -72,11 +76,6 @@ function createCommonjsModule(fn, module) {
 
-var safeRest = (function (_ref) {
-  var style = _ref.style,
-      className = _ref.className,
-      as = _ref.as,
-      props = objectWithoutProperties(_ref, ["style", "className", "as"]);
+// colours
+var colorTelusPurple = '#4b286d';
+var colorWhite = '#fff';
 
-  return props;
-});
-
 function find(t,n,r){if("function"==typeof Array.prototype.find)return t.find(n,r);r=r||this;var f=t.length;if("function"!=typeof n)throw new TypeError(n+" is not a function");for(var o=0;o<f;o++)if(n.call(r,t[o],o,t))return t[o]}
@@ -106,4 +105,65 @@
 
-var styles = {"itemContainer":"TDS_ButtonGroupItem-modules__itemContainer___3a5w6","itemButton":"TDS_ButtonGroupItem-modules__itemButton___31uOH TDS_BaseButton-modules__sizing___2kf7G TDS_BaseButton-modules__base___61gnI TDS_BaseButton-modules__wordBreak___1qfBE TDS_Borders-modules__none___1fCjZ TDS_Borders-modules__rounded___3df1Q TDS_BaseButton-modules__medium___P82Pj TDS_BaseButton-modules__wordBreak___1qfBE TDS_BaseButton-modules__boldFont___1EFV0 TDS_BaseButton-modules__wordBreak___1qfBE TDS_Forms-modules__height___W6QXx TDS_Forms-modules__font___g7OGX","hiddenRadio":"TDS_ButtonGroupItem-modules__hiddenRadio___2vB96"};
+var safeRest = (function (_ref) {
+  var style = _ref.style,
+      className = _ref.className,
+      as = _ref.as,
+      props = objectWithoutProperties(_ref, ["style", "className", "as"]);
 
+  return props;
+});
+
+var baseButton = _extends_1({
+  margin: 0,
+  padding: '0 2rem',
+  cursor: 'pointer',
+  background: 'none',
+  transition: 'background 0.2s',
+  display: 'flex',
+  width: '100%',
+  alignItems: 'center',
+  justifyContent: 'center'
+}, media.from('md').css({
+  display: 'inline-flex',
+  width: 'auto',
+  minWidth: '136px'
+}));
+
+var StyledButtonGroupItem = styled.div.withConfig({
+  displayName: "ButtonGroupItem__StyledButtonGroupItem",
+  componentId: "drabnz-0"
+})({
+  margin: '0.5rem 0'
+});
+var StyledInput = styled.input.withConfig({
+  displayName: "ButtonGroupItem__StyledInput",
+  componentId: "drabnz-1"
+})({
+  position: 'fixed',
+  opacity: '0',
+  '&:checked ~ label': {
+    backgroundColor: colorTelusPurple,
+    boxShadow: "0px 0px 0px 0px ".concat(colorTelusPurple),
+    color: colorWhite
+  },
+  '&:focus ~ label': {
+    boxShadow: "0px 0px 0px 2px ".concat(colorTelusPurple, ", 0px 0px 8px 1px ").concat(colorTelusPurple)
+  }
+});
+var StyledLabel = styled.label.withConfig({
+  displayName: "ButtonGroupItem__StyledLabel",
+  componentId: "drabnz-2"
+})(borders.none, borders.rounded, medium, boldFont, forms.height, forms.font, baseButton, {
+  transition: 'background 0.2s, color 0.2s, box-shadow 0.2s',
+  backgroundColor: colorWhite,
+  boxShadow: "0px 0px 0px 1px ".concat(colorTelusPurple),
+  color: colorTelusPurple,
+  whiteSpace: 'nowrap',
+  minWidth: '136px',
+  '&:hover': {
+    backgroundColor: colorWhite,
+    color: colorTelusPurple,
+    boxShadow: "0px 0px 0px 2px ".concat(colorTelusPurple, ", 0px 0px 8px 1px ").concat(colorTelusPurple)
+  }
+});
+
 var ButtonGroupItem = function ButtonGroupItem(_ref) {
@@ -120,5 +180,3 @@ var name = _ref.name,
   var itemId = generateId(name).postfix(value);
-  return React.createElement("div", _extends_1({}, safeRest(rest), {
-    className: styles.itemContainer
-  }), React.createElement("input", {
+  return React.createElement(StyledButtonGroupItem, safeRest(rest), React.createElement(StyledInput, {
     id: itemId,
@@ -131,7 +189,5 @@ name: name,
     onFocus: onFocus,
-    onBlur: onBlur,
-    className: styles.hiddenRadio
-  }), React.createElement("label", {
-    htmlFor: itemId,
-    className: styles.itemButton
+    onBlur: onBlur
+  }), React.createElement(StyledLabel, {
+    htmlFor: itemId
   }, children));
@@ -204,4 +260,6 @@ };
 
-var styles$1 = {"buttonGroup":"TDS_ButtonGroup-modules__buttonGroup___2jYkO"};
-
+var StyledButtonGroup = styled(Box)({
+  flexFlow: 'row wrap',
+  maxWidth: '784px'
+});
 /**
@@ -245,6 +303,5 @@ * An input component utilizing buttons that act as radios.
     size: "medium"
-  }, label)), React.createElement(Box, {
+  }, label)), React.createElement(StyledButtonGroup, {
     between: 3,
-    inline: true,
-    className: styles$1.buttonGroup
+    inline: true
   }, passedButtons));
@@ -251,0 +308,0 @@ };

index.cjs.js

@@ -1,4 +0,3 @@
-require('./dist/index.css')
 const ButtonGroup = require('./dist/index.cjs')
 
 module.exports = ButtonGroup

index.es.js

@@ -1,4 +0,3 @@
-import './dist/index.css'
 import ButtonGroup from './dist/index.es'
 
 export default ButtonGroup

package.json

 {
   "name": "@tds/core-button-group",
-  "version": "1.0.17",
+  "version": "2.0.0",
   "description": "An input component utilizing buttons that act as radios.",
@@ -24,8 +24,12 @@ "main": "index.cjs.js",
   "peerDependencies": {
-    "react": ">=15",
-    "react-dom": ">=15"
+    "react": "^16.8.2",
+    "react-dom": "^16.8.2",
+    "styled-components": "^4.1.3"
   },
   "dependencies": {
     "@tds/core-box": "^1.2.3",
+    "@tds/core-responsive": "^1.2.0",
     "@tds/core-text": "^1.0.11",
+    "@tds/shared-styles": "^1.0.1",
+    "@tds/shared-typography": "^1.2.2",
     "@tds/util-prop-types": "^1.3.1",
@@ -39,3 +43,3 @@ "prop-types": "^15.5.10"
   },
-  "gitHead": "24679ca1369e64d054bf825ab56b54cbb38180b4"
+  "gitHead": "9a6257afa04405b207017dd9fa32a2452aa03a51"
 }

No alert changes

Improved metrics

Total package byte prevSize

62035

increased by53.11%

Lines of code

923

increased by5.37%

Worsened metrics

Dependency count

10

increased by66.67%

Number of package files

14

decreased by-17.65%

Dependency changes

• + Added@tds/core-responsive@^1.2.0

• + Added@tds/shared-styles@^1.0.1

• + Added@tds/shared-typography@^1.2.2

• + Added@ampproject/remapping@2.3.0(transitive)

• + Added@babel/code-frame@7.26.2(transitive)

• + Added@babel/compat-data@7.26.8(transitive)

• + Added@babel/core@7.26.9(transitive)

• + Added@babel/generator@7.26.9(transitive)

• + Added@babel/helper-annotate-as-pure@7.25.9(transitive)

• + Added@babel/helper-compilation-targets@7.26.5(transitive)

• + Added@babel/helper-module-imports@7.25.9(transitive)

• + Added@babel/helper-module-transforms@7.26.0(transitive)

• + Added@babel/helper-plugin-utils@7.26.5(transitive)

• + Added@babel/helper-string-parser@7.25.9(transitive)

• + Added@babel/helper-validator-identifier@7.25.9(transitive)

• + Added@babel/helper-validator-option@7.25.9(transitive)

• + Added@babel/helpers@7.26.9(transitive)

• + Added@babel/parser@7.26.9(transitive)

• + Added@babel/plugin-syntax-jsx@7.25.9(transitive)

• + Added@babel/runtime@7.26.9(transitive)

• + Added@babel/template@7.26.9(transitive)

• + Added@babel/traverse@7.26.9(transitive)

• + Added@babel/types@7.26.9(transitive)

• + Added@emotion/is-prop-valid@0.8.8(transitive)

• + Added@emotion/memoize@0.7.4(transitive)

• + Added@emotion/unitless@0.7.5(transitive)

• + Added@jridgewell/gen-mapping@0.3.8(transitive)

• + Added@jridgewell/resolve-uri@3.1.2(transitive)

• + Added@jridgewell/set-array@1.2.1(transitive)

• + Added@jridgewell/sourcemap-codec@1.5.0(transitive)

• + Added@jridgewell/trace-mapping@0.3.25(transitive)

• + Added@tds/core-colours@2.2.4(transitive)

• + Added@tds/core-responsive@1.3.7(transitive)

• + Added@tds/shared-styles@1.5.2(transitive)

• + Addedbabel-plugin-styled-components@2.1.4(transitive)

• + Addedbrowserslist@4.24.4(transitive)

• + Addedcamelize@1.0.1(transitive)

• + Addedcaniuse-lite@1.0.30001700(transitive)

• + Addedconvert-source-map@2.0.0(transitive)

• + Addedcss-color-keywords@1.0.0(transitive)

• + Addedcss-to-react-native@2.3.2(transitive)

• + Addeddebug@4.4.0(transitive)

• + Addedelectron-to-chromium@1.5.105(transitive)

• + Addedescalade@3.2.0(transitive)

• + Addedgensync@1.0.0-beta.2(transitive)

• + Addedglobals@11.12.0(transitive)

• + Addedhas-flag@3.0.0(transitive)

• + Addedinvariant@2.2.4(transitive)

• + Addedis-what@3.14.1(transitive)

• + Addedjsesc@3.1.0(transitive)

• + Addedjson2mq@0.2.0(transitive)

• + Addedjson5@2.2.3(transitive)

• + Addedlodash@4.17.21(transitive)

• + Addedlru-cache@5.1.1(transitive)

• + Addedmemoize-one@5.2.1(transitive)

• + Addedmerge-anything@2.4.4(transitive)

• + Addedms@2.1.3(transitive)

• + Addednode-releases@2.0.19(transitive)

• + Addedpicocolors@1.1.1(transitive)

• + Addedpicomatch@2.3.1(transitive)

• + Addedpostcss-value-parser@3.3.1(transitive)

• + Addedreact@16.14.0(transitive)

• + Addedreact-dom@16.14.0(transitive)

• + Addedreact-media@1.10.0(transitive)

• + Addedregenerator-runtime@0.14.1(transitive)

• + Addedsass-mq@5.0.1(transitive)

• + Addedscheduler@0.19.1(transitive)

• + Addedsemver@6.3.1(transitive)

• + Addedstring-convert@0.2.1(transitive)

• + Addedstyled-components@4.4.1(transitive)

• + Addedstylis@3.5.4(transitive)

• + Addedstylis-rule-sheet@0.0.10(transitive)

• + Addedsupports-color@5.5.0(transitive)

• + Addedupdate-browserslist-db@1.1.2(transitive)

• + Addedyallist@3.1.1(transitive)

• - Removedreact@19.0.0(transitive)

• - Removedreact-dom@19.0.0(transitive)

• - Removedscheduler@0.25.0(transitive)