Merge branch 'master' into refactor/editablefield

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@helpscout/hsds-react",
-  "version": "3.13.0",
+  "version": "3.14.0",
   "private": false,
   "main": "dist/index.js",
   "module": "dist/index.es.js",

src/components/Attachment/Attachment.css.js

@@ -73,6 +73,11 @@ export const AttachmentUI = styled.a`
       ${d400Effect}
     }
 
+    &:focus {
+      outline: none;
+      box-shadow: 0 0 0 2px ${getColor('blue.500')};
+    }
+
     &.has-image {
       padding: 3px;
     }
@@ -111,23 +116,44 @@ export const AttachmentUI = styled.a`
   ${bem.element('closeButton')} {
     ${cardStyles()};
     display: block;
-    clip: rect(0, 0, 0, 0);
     border-radius: 9999px !important;
     position: absolute;
     right: 0;
     top: 0;
     transform: translate(50%, -50%);
     z-index: 1;
+    opacity: 0;
+
+    transition: all 200ms linear;
+    will-change: box-shadow, color, opacity;
+
+    box-shadow: inset 0 0 0 1px ${getColor('grey.700')};
+    color: ${getColor('charcoal.300')};
+
+    & .c-Icon {
+      &,
+      &:focus,
+      &:hover {
+        opacity: 1;
+      }
+    }
   }
 
   &:hover,
   &:focus {
     ${bem.element('closeButton')} {
-      clip: unset;
+      opacity: 1;
     }
   }
 
   ${bem.element('closeButton')}:focus {
-    clip: unset;
+    opacity: 1;
+    box-shadow: 0 0 0 2px ${getColor('blue.500')};
+  }
+
+  ${bem.element('closeButton')}:hover {
+    box-shadow: inset 0 0 0 1px ${getColor('red.500')};
+
+    color: ${getColor('red.500')};
   }
 `

src/components/Attachment/Attachment.stories.mdx

@@ -98,3 +98,20 @@ A Provider component provides child components with props accessible as `context
     </Attachment.Provider>
   </Story>
 </Canvas>
+
+#### Preview theme with image
+
+<Canvas>
+  <Story name="Preview theme with image">
+    <div style={{ width: '86px' }}>
+      <Attachment.Provider theme="preview">
+        <Attachment
+          name={text('name', 'image.png')}
+          imageUrl={
+            'http://matthewjamestaylor.com/img/illustrations/large/how-to-convert-a-liquid-layout-to-fixed-width.jpg'
+          }
+        />
+      </Attachment.Provider>
+    </div>
+  </Story>
+</Canvas>

src/components/Avatar/Avatar.Image.jsx

@@ -10,7 +10,7 @@ import getValidProps from '@helpscout/react-utils/dist/getValidProps'
 import VisuallyHidden from '../VisuallyHidden'
 import { classNames } from '../../utilities/classNames'
 import { noop } from '../../utilities/other'
-import { ImageWrapperUI, ImageUI, TitleUI } from './Avatar.css'
+import { ImageWrapperUI, ImageUI, InitialsUI } from './Avatar.css'
 import { getAnimationProps } from './Avatar.utils'
 
 let cache = {}
@@ -184,15 +184,15 @@ export class AvatarImage extends React.PureComponent {
     }
   }
 
-  getTitleMarkup() {
-    const { light, title } = this.props
+  renderInitials() {
+    const { light, initials } = this.props
 
     const componentClassName = classNames(
-      'c-Avatar__title',
+      'c-Avatar__initials',
       light && 'is-light'
     )
 
-    return <TitleUI className={componentClassName}>{title}</TitleUI>
+    return <InitialsUI className={componentClassName}>{initials}</InitialsUI>
   }
 
   render() {
@@ -228,7 +228,7 @@ export class AvatarImage extends React.PureComponent {
         </ImageUI>
       </ImageWrapperUI>
     )
-    return hasImage ? contentMarkup : this.getTitleMarkup()
+    return hasImage ? contentMarkup : this.renderInitials()
   }
 }
 
@@ -237,12 +237,12 @@ AvatarImage.defaultProps = {
   animationDuration: 160,
   animationEasing: 'ease',
   'data-cy': 'AvatarImage',
-  src: null,
+  initials: null,
+  light: false,
+  name: null,
   onError: noop,
   onLoad: noop,
-  name: null,
-  title: null,
-  light: false,
+  src: null,
 }
 
 AvatarImage.propTypes = {
@@ -251,12 +251,12 @@ AvatarImage.propTypes = {
   animationEasing: PropTypes.string,
   /** Data attr for Cypress tests. */
   'data-cy': PropTypes.string,
-  src: PropTypes.any,
+  initials: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   light: PropTypes.bool,
   name: PropTypes.string,
   onError: PropTypes.func,
   onLoad: PropTypes.func,
-  title: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  src: PropTypes.any,
 }
 
 export default AvatarImage

src/components/Avatar/Avatar.css.js

@@ -155,7 +155,7 @@ export const ImageUI = styled('div')`
   width: 100%;
 `
 
-export const TitleUI = styled('div')`
+export const InitialsUI = styled('div')`
   color: white;
   line-height: 1;
   text-transform: uppercase;

src/components/Avatar/Avatar.jsx

@@ -114,7 +114,7 @@ export class Avatar extends React.PureComponent {
 
     const hasImage = this.src.length > 0 && !this.state.imageFailed
 
-    const title = this.getTitle()
+    const initials = this.getInitials()
     return (
       <AvatarCrop
         className={shapeClassnames}
@@ -129,7 +129,7 @@ export class Avatar extends React.PureComponent {
           className={classNames('c-Avatar__imageMainWrapper', shapeClassnames)}
           src={this.src}
           name={name}
-          title={title}
+          initials={initials}
           light={light}
           onError={this.onImageLoadedError}
           onLoad={this.onImageLoadedSuccess}
@@ -143,7 +143,7 @@ export class Avatar extends React.PureComponent {
             )}
             src={fallbackImage}
             name={name}
-            title={title}
+            initials={initials}
             light={light}
           />
         )}
@@ -182,7 +182,7 @@ export class Avatar extends React.PureComponent {
     )
   }
 
-  getTitle() {
+  getInitials() {
     const { count, initials, name } = this.props
 
     return count || initials || nameToInitials(name)

src/components/Avatar/Avatar.test.js

@@ -16,7 +16,7 @@ const ui = {
   borderAnimation: '.c-Avatar__borderAnimation',
   image: '.c-Avatar__image',
   imageWrapper: '.c-Avatar__imageWrapper',
-  initials: '.c-Avatar__title',
+  initials: '.c-Avatar__initials',
   action: '.c-Avatar__action',
 }
 

src/components/DropList/DropList.stories.mdx

@@ -711,6 +711,29 @@ The `toggler` prop accepts any React component, so you can provide your own cust
       />
     </div>
   </Story>
+  <Story name="Toggler: SelectTag with error">
+    <div
+      style={{
+        width: '400px',
+        margin: '50px 100px 0 150px',
+        border: '1px dashed silver',
+        borderRadius: '5px',
+        padding: '20px',
+      }}
+    >
+      <DropList
+        items={regularItems}
+        toggler={
+          <SelectTag
+            onClick={() => {
+              console.log('Clicked from story')
+            }}
+            error={'Some error'}
+          />
+        }
+      />
+    </div>
+  </Story>
   <Story name="Toggler: SplittedButton">
     <div
       style={{

src/components/DropList/DropList.test.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import { render, waitFor } from '@testing-library/react'
+import { getByLabelText, render, waitFor } from '@testing-library/react'
 import user from '@testing-library/user-event'
 import { css } from 'styled-components'
 import DropList from './DropList'
@@ -628,6 +628,31 @@ describe('Togglers', () => {
     })
   })
 
+  describe('SelectTag error state', () => {
+    test('Should show error when error provided to toggler', async () => {
+      const error = 'Some error'
+      const { getByLabelText, getByTitle } = render(
+        <DropList items={beatles} toggler={<SelectTag error={error} />} />
+      )
+
+      await waitFor(() => {
+        expect(getByTitle('alert')).toBeInTheDocument()
+      })
+      expect(getByLabelText('toggle menu')).toHaveClass('is-error')
+    })
+
+    test('Should not show error when none', async () => {
+      const { getByLabelText, queryByTitle } = render(
+        <DropList items={beatles} toggler={<SelectTag />} />
+      )
+
+      await waitFor(() => {
+        expect(getByLabelText('toggle menu')).not.toHaveClass('is-error')
+      })
+      expect(queryByTitle('alert')).not.toBeInTheDocument()
+    })
+  })
+
   test('Should run action click callback on a SplittedButton', async () => {
     const onActionClick = jest.fn()
     const { getByText } = render(

src/components/DropList/DropList.togglers.jsx

@@ -6,6 +6,8 @@ import { noop } from '../../utilities/other'
 import ControlGroup from '../ControlGroup'
 import HSDSButton from '../Button'
 import Icon from '../Icon'
+import { STATES } from '../../constants'
+import Tooltip from '../Tooltip'
 
 export const SimpleButton = forwardRef(
   (
@@ -196,14 +198,33 @@ const SplitButtonTogglerUI = styled(HSDSButton)`
   }
 `
 
+const ErrorTooltipIcon = ({ error }) => {
+  return (
+    <Tooltip
+      animationDelay={0}
+      animationDuration={0}
+      closeOnContentClick={true}
+      display="block"
+      placement="top-end"
+      title={error}
+    >
+      <Icon name={'alert'} size={24} state={STATES.error} tabIndex={-1} />
+    </Tooltip>
+  )
+}
+
 export const SelectTag = forwardRef(
-  ({ isActive = false, text = '', onClick = noop, ...rest }, ref) => {
+  ({ isActive = false, text = '', onClick = noop, error, ...rest }, ref) => {
+    const className = classNames(
+      'DropListToggler SelectTagToggler',
+      error && 'is-error'
+    )
     return (
       <SelectUI
         aria-label="toggle menu"
         aria-haspopup="true"
         aria-expanded={isActive}
-        className="DropListToggler SelectTagToggler"
+        className={className}
         data-cy="DropList.SelectTagToggler"
         data-testid="DropList.SelectTagToggler"
         onClick={onClick}
@@ -213,6 +234,12 @@ export const SelectTag = forwardRef(
       >
         <span>{text}</span>
         <SelectArrowsUI />
+        {error && (
+          // avoid list open/close when clicked on error icon
+          <SelectErrorTooltipIconUI onClick={e => e.stopPropagation()}>
+            <ErrorTooltipIcon error={error} />
+          </SelectErrorTooltipIconUI>
+        )}
       </SelectUI>
     )
   }
@@ -235,13 +262,19 @@ const SelectUI = styled('button')`
   font-size: 13px;
   color: ${getColor('charcoal.600')};
 
+  &.is-error {
+    box-shadow: inset 0 0 0 2px ${getColor('red.500')};
+    padding-right: 10px;
+  }
+
   &:focus {
     outline: 0;
     box-shadow: inset 0 0 0 2px ${getColor('blue.500')};
   }
 `
 
 const SelectArrowsUI = styled('div')`
+  margin-left: auto;
   width: 7px;
   height: 14px;
   position: relative;
@@ -266,6 +299,10 @@ const SelectArrowsUI = styled('div')`
   }
 `
 
+const SelectErrorTooltipIconUI = styled('div')`
+  margin-left: 8px;
+`
+
 const KebabUI = styled('button')`
   width: 24px;
   height: 24px;

src/components/Emoticon/Emoticon.css.js

@@ -1,10 +1,11 @@
 import styled from 'styled-components'
+import { getColor } from '../../styles/utilities/color'
 
-// Note: colours here are not from the Help Scout palette
+// Note: some colours here are not from the Help Scout palette
 export const reactionEmoticonsColours = {
   off: {
     head: '#E5E9EC',
-    face: '#A5B2BD',
+    face: getColor('charcoal.300'),
   },
   on: {
     face: '#2E2D2E',