fix(community-quiet-button): address issue #362, fix bug

telus · Nov 2, 2020 · d09fb28 · d09fb28
1 parent 89cb923
commit d09fb28
Show file tree

Hide file tree

Showing 4 changed files with 173 additions and 134 deletions.
diff --git a/packages/QuietButton/QuietButton.jsx b/packages/QuietButton/QuietButton.jsx
@@ -1,35 +1,44 @@
 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',
+  padding: '0rem',
   cursor: 'pointer',
-  background: '#FFFFFF',
+  background: colorWhite,
   transition: 'all 0.2s ease-in-out',
-  minWidth: '44px',
-  height: '28px',
-  border: '1px solid #71757B',
+  minWidth: '2.75rem',
+  minHeight: '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)': {
@@ -39,14 +48,13 @@ const baseButton = {
 const btnWrapper = {
   display: 'flex',
   flexDirection: 'row',
-  alignItems: 'center',
-  padding: '3px 0px 5px 0px',
+  padding: '0.1875rem 0rem 0.3125rem 0rem',
   '& svg': {
-    margin: '-3px 0 -5px 0',
+    margin: '-0.0625rem 0rem -0.4375rem 0rem',
   },
 }
 const spaceWrapper = {
-  paddingRight: '4px',
+  paddingRight: '0.25rem',
 }
 
 const StyledQuietButton = styled.button(baseButton, small, borders.rounded)
@@ -55,7 +63,7 @@ const SpaceWrapper = styled.div(spaceWrapper)
 
 const spaceFunction = childrenArray => {
   return childrenArray.map((child, index) => {
-    if (child.type && child.type.name !== 'A11yContent' && index === childrenArray.length - 1) {
+    if ((child.type && child.type.name === 'A11yContent') || index === childrenArray.length - 1) {
       return child
     }
     return <SpaceWrapper key={child || child.type.name}>{child}</SpaceWrapper>
@@ -72,7 +80,9 @@ const QuietButton = ({ children, ...rest }) => {
 
   return (
     <StyledQuietButton type="button" {...safeRest(rest)}>
-      <ButtonWrapper>{spaceFunction(childrenArray)}</ButtonWrapper>
+      <Box horizontal={3}>
+        <ButtonWrapper>{spaceFunction(childrenArray)}</ButtonWrapper>
+      </Box>
     </StyledQuietButton>
   )
 }
@@ -82,7 +92,16 @@ 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('Dependent', true),
+      ])
+    ),
+    PropTypes.string,
+  ]).isRequired,
 }
 
 export default QuietButton
diff --git a/packages/QuietButton/__tests__/QuietButton.spec.jsx b/packages/QuietButton/__tests__/QuietButton.spec.jsx
@@ -50,9 +50,9 @@ describe('QuietButton', () => {
   })
 
   it('should contain text', () => {
-    const button = shallow(<QuietButton>Text</QuietButton>)
-
-    expect(button.text()).toEqual('Text')
+    const quietButton = doMount()
+    expect(quietButton.text().includes('Words')).toBe(true)
+    quietButton.unmount()
   })
 
   it('should do something when clicked', () => {