fix(community-quiet-button): addresses issue 362, followup

telus · Jul 29, 2020 · fe2628a · fe2628a
1 parent d7eb137
commit fe2628a
Show file tree

Hide file tree

Showing 5 changed files with 226 additions and 84 deletions.
diff --git a/.all-contributorsrc b/.all-contributorsrc
@@ -248,6 +248,15 @@
       "contributions": [
         "tds"
       ]
+    },
+    {
+      "login": "ashwanitelus",
+      "name": "ashwanitelus",
+      "avatar_url": "https://avatars1.githubusercontent.com/u/63233715?v=4",
+      "profile": "https://github.com/ashwanitelus",
+      "contributions": [
+        "tds"
+      ]
     }
   ]
 }
diff --git a/README.md b/README.md
@@ -68,7 +68,7 @@ To learn how to make contributions to TDS Community, See the [contributing guide
 | :---: | :---: | :---: | :---: | :---: | :---: | :---: |
 | [<img src="https://avatars3.githubusercontent.com/u/42220619?v=4" width="100px;"/><br /><sub><b>Christina L.</b></sub>](https://github.com/Christina-Lo)<br />[](#tds-Christina-Lo "") | [<img src="https://avatars0.githubusercontent.com/u/931411?v=4" width="100px;"/><br /><sub><b>Andrew Lam</b></sub>](https://github.com/Andrew-K-Lam)<br />[](#tds-Andrew-K-Lam "") | [<img src="https://avatars0.githubusercontent.com/u/1036187?v=4" width="100px;"/><br /><sub><b>Jordan Raffoul</b></sub>](http://jordanraffoul.com)<br />[](#tds-jraff "") | [<img src="https://avatars2.githubusercontent.com/u/22725151?v=4" width="100px;"/><br /><sub><b>Nicholas Mak</b></sub>](https://github.com/nicmak)<br />[](#tds-nicmak "") | [<img src="https://avatars1.githubusercontent.com/in/2740?v=4" width="100px;"/><br /><sub><b>renovate[bot]</b></sub>](https://github.com/apps/renovate)<br />[](#tds-renovate[bot] "") | [<img src="https://avatars1.githubusercontent.com/u/3803746?v=4" width="100px;"/><br /><sub><b>Mike Bunce</b></sub>](https://github.com/sketchidea)<br />[](#tds-sketchidea "") | [<img src="https://avatars2.githubusercontent.com/u/2739819?v=4" width="100px;"/><br /><sub><b>Ani</b></sub>](https://github.com/simpleimpulse)<br />[](#tds-simpleimpulse "") |
 | [<img src="https://avatars0.githubusercontent.com/u/1015398?v=4" width="100px;"/><br /><sub><b>Samantha Vale</b></sub>](https://github.com/karlasamantha)<br />[](#tds-karlasamantha "") | [<img src="https://avatars0.githubusercontent.com/u/10473576?v=4" width="100px;"/><br /><sub><b>Tyler Dewald</b></sub>](https://github.com/DewaldoDev)<br />[](#tds-DewaldoDev "") | [<img src="https://avatars1.githubusercontent.com/u/3495961?v=4" width="100px;"/><br /><sub><b>Varun Jain</b></sub>](https://github.com/varunj90)<br />[](#tds-varunj90 "") | [<img src="https://avatars0.githubusercontent.com/u/5270458?v=4" width="100px;"/><br /><sub><b>abdul khan</b></sub>](https://github.com/invalidred)<br />[](#tds-invalidred "") | [<img src="https://avatars3.githubusercontent.com/u/4324431?v=4" width="100px;"/><br /><sub><b>Nate X</b></sub>](https://github.com/nateriesling)<br />[](#tds-nateriesling "") | [<img src="https://avatars1.githubusercontent.com/u/3803746?v=4" width="100px;"/><br /><sub><b>Mike Bunce</b></sub>](https://github.com/mike-bunce)<br />[](#tds-mike-bunce "") | [<img src="https://avatars3.githubusercontent.com/u/21316148?v=4" width="100px;"/><br /><sub><b>Donna Vitan</b></sub>](http://donnavitan.com)<br />[](#tds-donnavitan "") |
-| [<img src="https://avatars1.githubusercontent.com/u/18021992?v=4" width="100px;"/><br /><sub><b>harmeetsaimbhi</b></sub>](https://github.com/harmeetsaimbhi)<br />[](#tds-harmeetsaimbhi "") | [<img src="https://avatars2.githubusercontent.com/u/1115?v=4" width="100px;"/><br /><sub><b>Fabio Neves</b></sub>](https://github.com/fzero)<br />[](#tds-fzero "") | [<img src="https://avatars1.githubusercontent.com/u/49662501?v=4" width="100px;"/><br /><sub><b>Edison Li</b></sub>](https://ca.linkedin.com/in/edison-li)<br />[](#tds-zyl-edison-telus "") | [<img src="https://avatars1.githubusercontent.com/u/9220735?v=4" width="100px;"/><br /><sub><b>Michelle Linley</b></sub>](https://github.com/meeschka)<br />[](#tds-meeschka "") | [<img src="https://avatars3.githubusercontent.com/u/30445300?v=4" width="100px;"/><br /><sub><b>Jeffrey Chang</b></sub>](https://github.com/Jeffrey-Chang)<br />[](#tds-Jeffrey-Chang "") |
+| [<img src="https://avatars1.githubusercontent.com/u/18021992?v=4" width="100px;"/><br /><sub><b>harmeetsaimbhi</b></sub>](https://github.com/harmeetsaimbhi)<br />[](#tds-harmeetsaimbhi "") | [<img src="https://avatars2.githubusercontent.com/u/1115?v=4" width="100px;"/><br /><sub><b>Fabio Neves</b></sub>](https://github.com/fzero)<br />[](#tds-fzero "") | [<img src="https://avatars1.githubusercontent.com/u/49662501?v=4" width="100px;"/><br /><sub><b>Edison Li</b></sub>](https://ca.linkedin.com/in/edison-li)<br />[](#tds-zyl-edison-telus "") | [<img src="https://avatars1.githubusercontent.com/u/9220735?v=4" width="100px;"/><br /><sub><b>Michelle Linley</b></sub>](https://github.com/meeschka)<br />[](#tds-meeschka "") | [<img src="https://avatars3.githubusercontent.com/u/30445300?v=4" width="100px;"/><br /><sub><b>Jeffrey Chang</b></sub>](https://github.com/Jeffrey-Chang)<br />[](#tds-Jeffrey-Chang "") | [<img src="https://avatars1.githubusercontent.com/u/63233715?v=4" width="100px;"/><br /><sub><b>ashwanitelus</b></sub>](https://github.com/ashwanitelus)<br />[](#tds-ashwanitelus "") |
 <!-- ALL-CONTRIBUTORS-LIST:END -->
 
 [circle-url]: https://circleci.com/gh/telus/tds-community

diff --git a/packages/QuietButton/QuietButton.jsx b/packages/QuietButton/QuietButton.jsx
@@ -1,35 +1,43 @@
 import React from 'react'
 import styled from 'styled-components'
+import Box from '@tds/core-box'
+import {
+  colorGreyRaven,
+  colorWhite,
+  colorGreyShuttle,
+  colorGreyGainsboro,
+  colorGreyShark,
+} from '@tds/core-colours'
+import { componentWithName } from '@tds/util-prop-types'
 import { safeRest } from '@tds/util-helpers'
 import { small } from '@tds/shared-typography'
 import { borders } from '@tds/shared-styles'
 import PropTypes from 'prop-types'
 
 const baseButton = {
   boxSizing: 'border-box',
-  margin: '2px',
-  padding: '0px 16px 0px 16px',
+  margin: '0.125rem',
   cursor: 'pointer',
-  background: '#FFFFFF',
+  background: colorWhite,
   transition: 'all 0.2s ease-in-out',
-  minWidth: '44px',
-  height: '28px',
-  border: '1px solid #71757B',
+  minWidth: '2.75rem',
+  height: '1.75rem',
+  border: `0.0625rem solid ${colorGreyRaven}`,
   position: 'relative',
-  borderRadius: '3px',
-  color: '#2A2C2E',
+  borderRadius: '0.1875rem',
+  color: colorGreyShark,
   '&:hover': {
-    boxShadow: '0 0 0 2px #71757B',
-    midWidth: '72px',
+    boxShadow: `0 0 0 0.125rem ${colorGreyRaven}`,
+    midWidth: '4.5rem',
   },
   '&:active': {
-    border: '1px solid #54595F',
-    boxShadow: '0 0 0 2px #54595F',
-    background: '#D8D8D8',
+    border: `0.0625rem solid ${colorGreyShuttle}`,
+    boxShadow: `0 0 0 0.125rem ${colorGreyShuttle}`,
+    background: colorGreyGainsboro,
   },
   '&:focus': {
-    background: '#FFFFFF',
-    boxShadow: '0 0 0 2px #71757B,0 0 0 2px #FFFFFF inset, 0 0 0 3px #54595F inset',
+    background: colorWhite,
+    boxShadow: `0 0 0 0.125rem ${colorGreyRaven}, 0 0 0 0.125rem ${colorWhite} inset, 0 0 0 0.1875rem ${colorGreyShuttle} inset`,
     outline: 'none !important',
   },
   '@media (prefers-reduced-motion: reduce)': {
@@ -40,15 +48,19 @@ const btnWrapper = {
   display: 'flex',
   flexDirection: 'row',
   alignItems: 'center',
-  padding: '3px 0px 5px 0px',
   '& svg': {
-    margin: '-3px 0 -5px 0',
+    margin: '-0.125rem 0rem -0.3125rem 0rem',
   },
 }
 const spaceWrapper = {
-  paddingRight: '4px',
+  paddingRight: '0.25rem',
 }
 
+const StyledBox = styled(Box)`
+  padding-top: 0.125rem;
+  padding-bottom: 0.3125rem;
+`
+
 const StyledQuietButton = styled.button(baseButton, small, borders.rounded)
 const ButtonWrapper = styled.div(btnWrapper)
 const SpaceWrapper = styled.div(spaceWrapper)
@@ -72,7 +84,9 @@ const QuietButton = ({ children, ...rest }) => {
 
   return (
     <StyledQuietButton type="button" {...safeRest(rest)}>
-      <ButtonWrapper>{spaceFunction(childrenArray)}</ButtonWrapper>
+      <StyledBox horizontal={2}>
+        <ButtonWrapper>{spaceFunction(childrenArray)}</ButtonWrapper>
+      </StyledBox>
     </StyledQuietButton>
   )
 }
@@ -82,7 +96,28 @@ QuietButton.propTypes = {
    * Button children.
    */
 
-  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
+  children: PropTypes.oneOfType([
+    PropTypes.arrayOf(
+      PropTypes.oneOfType([
+        PropTypes.string,
+        componentWithName('A11yContent'),
+        componentWithName('Edit'),
+        componentWithName('Print'),
+        componentWithName('Profile'),
+        componentWithName('Add'),
+        componentWithName('Close'),
+        componentWithName('Delete'),
+        componentWithName('PlayVideo'),
+        componentWithName('Subtract'),
+        componentWithName('Download'),
+        componentWithName('DownloadPDF'),
+        componentWithName('DownloadPDFs'),
+        componentWithName('Search'),
+        componentWithName('Settings'),
+      ])
+    ),
+    PropTypes.string,
+  ]).isRequired,
 }
 
 export default QuietButton