Merge 0e94ae6 into 4c32502

src/components/Emoji/Emoji.jsx

@@ -0,0 +1,38 @@
+/* istanbul ignore file */
+// No need to test this Component
+import React from 'react'
+import PropTypes from 'prop-types'
+import getValidProps from '@helpscout/react-utils/dist/getValidProps'
+import { classNames } from '../../utilities/classNames'
+
+function Emoji({
+  'data-cy': dataCy = 'EmojiPickerEmoji',
+  className = '',
+  name = 'Unicorn Face',
+  symbol = '🦄',
+  ...rest
+}) {
+  return (
+    <span
+      {...getValidProps(rest)}
+      aria-label={name}
+      className={classNames('c-EmojiPickerView', className)}
+      role="img"
+    >
+      {symbol}
+    </span>
+  )
+}
+
+Emoji.propTypes = {
+  /** The className of the component. */
+  className: PropTypes.string,
+  /** The name of the emoji. */
+  name: PropTypes.string,
+  /** The emoji symbol. */
+  symbol: PropTypes.string,
+  /** Data attr for Cypress tests. */
+  'data-cy': PropTypes.string,
+}
+
+export default Emoji

src/components/Emoji/index.js

@@ -0,0 +1,3 @@
+import Emoji from './Emoji'
+
+export default Emoji

src/components/EmojiPicker/EmojiPicker.Toggler.jsx

@@ -0,0 +1,26 @@
+import React, { forwardRef } from 'react'
+import { noop } from '../../utilities/other'
+import Icon from '../Icon'
+import { TogglerUI } from './EmojiPicker.css'
+
+export const IconToggler = forwardRef(
+  ({ isActive = false, size = '24', onClick = noop, ...rest }, ref) => {
+    return (
+      <TogglerUI
+        aria-label="toggle menu"
+        aria-haspopup="true"
+        aria-expanded={isActive}
+        className="c-EmojiPickerToggler"
+        data-cy="EmojiPickerToggler"
+        data-testid="EmojiPickerToggler"
+        isActive={isActive}
+        onClick={onClick}
+        ref={ref}
+        type="button"
+        {...rest}
+      >
+        <Icon size={size} />
+      </TogglerUI>
+    )
+  }
+)

src/components/EmojiPicker/EmojiPicker.css.js

@@ -1,88 +1,75 @@
 import styled from 'styled-components'
-import Icon from '../Icon'
 import { getColor } from '../../styles/utilities/color'
+import { DropListWrapperUI, MenuListUI } from '../DropList/DropList.css'
 
-export const config = {
-  sizes: {
-    default: '24px',
+const SIZES = {
+  EMOJI: {
     sm: '16px',
+    md: '24px',
     lg: '32px',
   },
+  LIST_HEIGHT: {
+    sm: '32px',
+    md: '40px',
+    lg: '48px',
+  },
+  LIST_WIDTH: {
+    sm: '200px',
+    md: '250px',
+    lg: '300px',
+  },
+  GRID_COLUMNS: {
+    sm: '32px',
+    md: '40px',
+    lg: '48px',
+  },
 }
 
-export const MenuUI = styled('div')`
-  display: flex;
-  overflow: hidden;
-  padding-left: 5px;
-  padding-right: 5px;
+export const TogglerUI = styled('button')`
+  border: 0;
+  background-color: transparent;
+  cursor: pointer;
+  color: ${getColor('grey.600')};
 
-  .c-DropdownItem.is-option {
-    background: none !important;
-    padding: 0;
-    outline: none !important;
+  &:active,
+  &:focus,
+  &:hover {
+    color: ${getColor('yellow.500')};
   }
 `
 
-export const ItemWrapperUI = styled('div')`
-  align-items: center;
-  background: transparent;
-  border-radius: 9999px;
-  display: flex;
-  justify-content: center;
-  margin: 3px;
+export const EmojiItemUI = styled('div')`
+  width: 100%;
+  text-align: center;
+  cursor: pointer;
   transform: scale(1);
 
-  .c-DropdownItem.is-focused &,
-  &:hover {
+  .is-highlighted & {
     transform: scale(1.075);
   }
-
-  ${({ size }) =>
-    size &&
-    `
-    height: calc(${config.sizes[size]} + 10px);
-    width: calc(${config.sizes[size]} + 10px);
-  `}
 `
 
-export const ItemUI = styled('div')`
-  ${({ size }) =>
-    size &&
-    `
-    font-size: ${config.sizes[size]};
-    padding: 0 !important;
-    height: ${config.sizes[size]};
-    width: ${config.sizes[size]};
-  `}
-
-  &.is-focused {
-    &.is-option {
-      border-radius: 50% !important;
-    }
+export const EmojiPickerUI = styled('div')`
+  ${DropListWrapperUI} {
+    width: ${({ emojiSize }) => SIZES.LIST_WIDTH[emojiSize]};
+    height: ${({ emojiSize }) => SIZES.LIST_HEIGHT[emojiSize]};
+    padding: 0;
   }
 
-  .c-EmojiPickerView {
-    display: block;
-    line-height: 1;
-    position: relative;
-    top: 1px;
-
-    ${({ size }) =>
-      size &&
-      `
-    font-size: ${config.sizes[size]};
-    height: ${config.sizes[size]};
-    width: ${config.sizes[size]};
-  `};
+  ${MenuListUI} {
+    display: grid;
+    grid-template-columns: repeat(
+      6,
+      ${({ emojiSize }) => SIZES.GRID_COLUMNS[emojiSize]}
+    );
+    justify-items: center;
+    align-items: center;
+    width: 100%;
+    height: ${({ emojiSize }) => SIZES.LIST_HEIGHT[emojiSize]};
+    padding: 0 5px;
   }
-`
-
-export const TriggerUI = styled(Icon)`
-  color: ${getColor('grey.600')};
 
-  .c-DropdownTrigger:active &,
-  .c-DropdownTrigger:focus &,
-  .c-DropdownTrigger:hover & {
-    color: ${getColor('yellow.500')};
+  ${EmojiItemUI} {
+    font-size: ${({ emojiSize }) => SIZES.EMOJI[emojiSize]};
   }
 `