imbric-theme 0.1.1

package/molecules/AddButton/AddButton.js

@@ -0,0 +1,137 @@
+import React, { useState, useRef } from 'react'
+import PropTypes from 'prop-types'
+
+import Paragraph from '../../atoms/Paragraph'
+import Icon from '../../atoms/Icon'
+import Spacer from '../../layout/Spacer'
+
+import styles from './AddButton.module.css'
+import { options } from './constants'
+import {
+  handleClick,
+  handleChange,
+  handleKeyDown,
+  handleBlur,
+  handleFocus,
+} from './handlers'
+import { useKeydownEnterKey } from './hooks'
+import { shouldShowHelpText } from './helpers'
+import withStyles from '../../hocs/withStyles'
+
+export const AddButton = ({
+  id,
+  getStyles,
+  children,
+  focusHelpText,
+  blurHelpText,
+  type,
+  icon,
+  onAdd,
+  defaultIsEditable,
+  defaultIsFocused,
+  defaultValue,
+  defaultIsInvalid,
+}) => {
+  const [isEditable, setIsEditable] = useState(defaultIsEditable)
+  const [inputValue, setInputValue] = useState(defaultValue)
+  const [isInvalid, setIsInvalid] = useState(defaultIsInvalid)
+  const [isFocused, setIsFocused] = useState(defaultIsFocused)
+  const inputRef = useRef(null)
+
+  useKeydownEnterKey(() => setIsEditable(true))
+
+  return (
+    <div
+      id={`${id}-add-button`}
+      className={getStyles('add-button', ['type'], {
+        'is-editable': isEditable,
+        'is-focused': isFocused,
+        'is-invalid': isInvalid,
+      })}
+      onClick={handleClick({ setIsEditable, inputRef })}
+    >
+      {isEditable ? (
+        <div className={getStyles('edit-container')}>
+          <input
+            id={`${id}-add-button-input`}
+            ref={inputRef}
+            type="text"
+            value={inputValue}
+            autoFocus={!defaultIsEditable}
+            onFocus={handleFocus({ setIsFocused })}
+            onBlur={handleBlur({
+              inputValue,
+              setIsEditable,
+              setIsFocused,
+              setIsInvalid,
+            })}
+            onChange={handleChange({ setInputValue, setIsInvalid })}
+            onKeyDown={handleKeyDown({
+              setInputValue,
+              setIsEditable,
+              inputValue,
+              setIsInvalid,
+              onAdd,
+            })}
+          />
+          {shouldShowHelpText({
+            isEditable,
+            inputValue,
+            focusHelpText,
+            blurHelpText,
+          }) && (
+            <>
+              <Paragraph
+                size="sm"
+                className="help-text"
+                color={isFocused ? 'muted' : 'inverted'}
+              >
+                {isFocused ? focusHelpText : blurHelpText}
+              </Paragraph>
+              <Spacer.Horizontal size="sm" />
+            </>
+          )}
+        </div>
+      ) : (
+        <>
+          <Icon
+            name={icon}
+            color={type === 'primary' ? 'base' : 'highlight'}
+            background={type === 'primary' ? 'highlight' : undefined}
+          />
+          <Spacer.Horizontal size="sm" />
+          <Paragraph weight="medium">{children}</Paragraph>
+        </>
+      )}
+    </div>
+  )
+}
+
+AddButton.propTypes = {
+  children: PropTypes.node.isRequired,
+  getStyles: PropTypes.func.isRequired,
+  onAdd: PropTypes.func.isRequired,
+  type: PropTypes.oneOf(options.types),
+  icon: PropTypes.oneOf(options.icons),
+  id: PropTypes.string,
+  focusHelpText: PropTypes.string,
+  blurHelpText: PropTypes.string,
+  defaultIsEditable: PropTypes.bool,
+  defaultIsFocused: PropTypes.bool,
+  defaultIsInvalid: PropTypes.bool,
+  defaultValue: PropTypes.string,
+  isInvalid: PropTypes.bool,
+}
+
+AddButton.defaultProps = {
+  id: '',
+  type: 'primary',
+  icon: 'plusCircle',
+  defaultIsEditable: false,
+  defaultIsFocused: false,
+  defaultValue: '',
+  onAdd: () => {},
+  getStyles: () => {},
+}
+
+export default withStyles(styles)(AddButton)

package/molecules/AddButton/AddButton.module.css

@@ -0,0 +1,128 @@
+.add-button {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  padding: 10px 12px;
+  border: var(--border-width-thin) dashed;
+  background: var(--input-background);
+  cursor: pointer;
+  user-select: none;
+}
+
+.type-primary {
+  height: 48px;
+  border-color: var(--color-font-base);
+  border-radius: var(--button-border-radius-sm);
+}
+
+.type-secondary {
+  height: 40px;
+  border-color: var(--color-primary);
+  border-radius: var(--button-border-radius-md);
+}
+
+.is-editable {
+  padding: 0;
+  border: var(--border-width-thin) solid var(--color-primary);
+  background: var(--color-primary);
+  box-shadow: 0 0 0 1px var(--color-primary);
+  cursor: text;
+  transition: box-shadow 0.2s ease;
+}
+
+.is-editable.is-focused {
+  background: var(--input-background);
+  box-shadow: 0 0 0 1px var(--color-primary), 0 0 10px 0 var(--color-primary);
+}
+
+.is-editable.is-focused.is-invalid {
+  animation: shake 0.8s cubic-bezier(0.36, 0.07, 0.19, 0.97) both,
+    fadeOutInvalidBorderColor 2s ease-out forwards,
+    fadeOutInvalidBoxShadow 2s ease-out forwards;
+  backface-visibility: hidden;
+  perspective: 1000px;
+  transform: translate3d(0, 0, 0);
+}
+
+.is-editable input {
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+  padding: 0 12px;
+  border: var(--border-width-thin) solid transparent;
+  background: var(--color-transparent);
+  color: var(--color-font-inverted);
+  font-family: var(--font-family-sans);
+  font-size: var(--input-font-size);
+  font-weight: var(--font-weight-medium);
+  line-height: var(--line-height-none);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.is-editable.is-focused input {
+  color: var(--color-font-base);
+}
+
+.is-editable input:focus {
+  outline: none;
+}
+
+.edit-container {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.edit-container :global(.help-text) {
+  width: 100%;
+  max-width: max-content;
+}
+
+@keyframes fadeOutInvalidBoxShadow {
+  0%,
+  50% {
+    box-shadow: 0 0 0 1px var(--color-rose-500),
+      0 0 10px 0 var(--color-rose-500);
+  }
+
+  100% {
+    box-shadow: 0 0 0 1px var(--color-primary), 0 0 10px 0 var(--color-primary);
+  }
+}
+
+@keyframes fadeOutInvalidBorderColor {
+  0%,
+  50% {
+    border-color: var(--color-rose-500);
+  }
+
+  100% {
+    border-color: var(--color-primary);
+  }
+}
+
+@keyframes shake {
+  10%,
+  90% {
+    transform: translate3d(-1px, 0, 0);
+  }
+
+  20%,
+  80% {
+    transform: translate3d(2px, 0, 0);
+  }
+
+  30%,
+  50%,
+  70% {
+    transform: translate3d(-4px, 0, 0);
+  }
+
+  40%,
+  60% {
+    transform: translate3d(4px, 0, 0);
+  }
+}

package/molecules/AddButton/AddButton.stories.js

@@ -0,0 +1,47 @@
+import { AddButton, options, styles } from '.'
+import {
+  getTemplate,
+  getListTemplate,
+  getOptionsArgTypes,
+} from '../../helpers/storybook'
+
+const Template = getTemplate(AddButton, styles)
+const ListTemplate = getListTemplate(AddButton, styles)
+
+export default {
+  title: 'Molecules/AddButton',
+  component: AddButton,
+  args: {
+    children: "Caves they've pick stealth Dwarf?",
+  },
+  argTypes: {
+    type: getOptionsArgTypes(options.types),
+    icon: getOptionsArgTypes(options.icons),
+  },
+}
+
+export const Default = Template.bind({})
+
+export const Types = ListTemplate.bind({})
+Types.args = { items: options.types.map((type) => ({ type })) }
+
+export const EditMode = Template.bind({})
+EditMode.args = {
+  defaultValue: 'Fixed caught squash wax Silvan sweet-taking keeps.',
+  defaultIsEditable: true,
+}
+
+export const Invalid = Template.bind({})
+Invalid.args = {
+  defaultIsInvalid: true,
+  defaultIsEditable: true,
+  defaultIsFocused: true,
+}
+
+export const HelpText = Template.bind({})
+HelpText.args = {
+  defaultValue: "Understand bravely halfling's rank balls.",
+  defaultIsEditable: true,
+  focusHelpText: 'Fly, you fools!',
+  blurHelpText: "Morgul-rats cripples you'll?",
+}

package/molecules/AddButton/__snapshots__/AddButton.stories.js.snap

@@ -0,0 +1,326 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Molecules/AddButton Default 1`] = `
+<div
+  style={
+    Object {
+      "alignContent": "flex-start",
+      "display": "flex",
+      "flexDirection": "column",
+      "flexWrap": "wrap",
+      "gap": "10px 30px",
+      "height": "100%",
+      "justifyContent": "flex-start",
+      "maxHeight": "auto",
+    }
+  }
+>
+  <div
+    className="add-button type-primary"
+    id="-add-button"
+    onClick={[Function]}
+  >
+    <div
+      className="icon color-base size-md background-highlight"
+      style={
+        Object {
+          "height": 35,
+          "width": 35,
+        }
+      }
+    >
+      <svg
+        height={35}
+        viewBox="0 0 20 20"
+        width={35}
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          clipRule="evenodd"
+          d="M10 20C4.48612 20 0 15.5139 0 10C0 4.48612 4.48612 0 10 0C15.5139 0 20 4.48612 20 10C20 15.5139 15.5139 20 10 20ZM10 1.09864C5.09155 1.09864 1.09864 5.09155 1.09864 10C1.09864 14.9084 5.09155 18.9014 10 18.9014C14.9084 18.9014 18.9014 14.9084 18.9014 10C18.9014 5.09155 14.9084 1.09864 10 1.09864Z"
+          fillRule="evenodd"
+        />
+        <path
+          clipRule="evenodd"
+          d="M4.68396 9.4093H15.316V10.5906H4.68396V9.4093Z"
+          fillRule="evenodd"
+        />
+        <path
+          clipRule="evenodd"
+          d="M9.40942 4.68396H10.5908V15.316H9.40942V4.68396Z"
+          fillRule="evenodd"
+        />
+      </svg>
+    </div>
+    <div
+      className="spacer horizontal"
+      style={
+        Object {
+          "height": "100%",
+          "maxHeight": "auto",
+          "width": 15,
+        }
+      }
+    />
+    <p
+      className="paragraph color-base size-md weight-medium"
+    >
+      Caves they've pick stealth Dwarf?
+    </p>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Molecules/AddButton Edit Mode 1`] = `
+<div
+  style={
+    Object {
+      "alignContent": "flex-start",
+      "display": "flex",
+      "flexDirection": "column",
+      "flexWrap": "wrap",
+      "gap": "10px 30px",
+      "height": "100%",
+      "justifyContent": "flex-start",
+      "maxHeight": "auto",
+    }
+  }
+>
+  <div
+    className="add-button type-primary is-editable"
+    id="-add-button"
+    onClick={[Function]}
+  >
+    <div
+      className="edit-container"
+    >
+      <input
+        autoFocus={false}
+        id="-add-button-input"
+        onBlur={[Function]}
+        onChange={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        type="text"
+        value="Fixed caught squash wax Silvan sweet-taking keeps."
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Molecules/AddButton Help Text 1`] = `
+<div
+  style={
+    Object {
+      "alignContent": "flex-start",
+      "display": "flex",
+      "flexDirection": "column",
+      "flexWrap": "wrap",
+      "gap": "10px 30px",
+      "height": "100%",
+      "justifyContent": "flex-start",
+      "maxHeight": "auto",
+    }
+  }
+>
+  <div
+    className="add-button type-primary is-editable"
+    id="-add-button"
+    onClick={[Function]}
+  >
+    <div
+      className="edit-container"
+    >
+      <input
+        autoFocus={false}
+        id="-add-button-input"
+        onBlur={[Function]}
+        onChange={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        type="text"
+        value="Understand bravely halfling's rank balls."
+      />
+      <p
+        className="help-text paragraph color-inverted size-sm weight-normal"
+      >
+        Morgul-rats cripples you'll?
+      </p>
+      <div
+        className="spacer horizontal"
+        style={
+          Object {
+            "height": "100%",
+            "maxHeight": "auto",
+            "width": 15,
+          }
+        }
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Molecules/AddButton Invalid 1`] = `
+<div
+  style={
+    Object {
+      "alignContent": "flex-start",
+      "display": "flex",
+      "flexDirection": "column",
+      "flexWrap": "wrap",
+      "gap": "10px 30px",
+      "height": "100%",
+      "justifyContent": "flex-start",
+      "maxHeight": "auto",
+    }
+  }
+>
+  <div
+    className="add-button type-primary is-editable is-focused is-invalid"
+    id="-add-button"
+    onClick={[Function]}
+  >
+    <div
+      className="edit-container"
+    >
+      <input
+        autoFocus={false}
+        id="-add-button-input"
+        onBlur={[Function]}
+        onChange={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        type="text"
+        value=""
+      />
+      
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Molecules/AddButton Types 1`] = `
+<div
+  style={
+    Object {
+      "alignContent": "flex-start",
+      "display": "flex",
+      "flexDirection": "column",
+      "flexWrap": "wrap",
+      "gap": "10px 30px",
+      "height": "100%",
+      "justifyContent": "flex-start",
+      "maxHeight": "auto",
+    }
+  }
+>
+  <div
+    className="add-button type-primary"
+    id="-add-button"
+    onClick={[Function]}
+  >
+    <div
+      className="icon color-base size-md background-highlight"
+      style={
+        Object {
+          "height": 35,
+          "width": 35,
+        }
+      }
+    >
+      <svg
+        height={35}
+        viewBox="0 0 20 20"
+        width={35}
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          clipRule="evenodd"
+          d="M10 20C4.48612 20 0 15.5139 0 10C0 4.48612 4.48612 0 10 0C15.5139 0 20 4.48612 20 10C20 15.5139 15.5139 20 10 20ZM10 1.09864C5.09155 1.09864 1.09864 5.09155 1.09864 10C1.09864 14.9084 5.09155 18.9014 10 18.9014C14.9084 18.9014 18.9014 14.9084 18.9014 10C18.9014 5.09155 14.9084 1.09864 10 1.09864Z"
+          fillRule="evenodd"
+        />
+        <path
+          clipRule="evenodd"
+          d="M4.68396 9.4093H15.316V10.5906H4.68396V9.4093Z"
+          fillRule="evenodd"
+        />
+        <path
+          clipRule="evenodd"
+          d="M9.40942 4.68396H10.5908V15.316H9.40942V4.68396Z"
+          fillRule="evenodd"
+        />
+      </svg>
+    </div>
+    <div
+      className="spacer horizontal"
+      style={
+        Object {
+          "height": "100%",
+          "maxHeight": "auto",
+          "width": 15,
+        }
+      }
+    />
+    <p
+      className="paragraph color-base size-md weight-medium"
+    >
+      Caves they've pick stealth Dwarf?
+    </p>
+  </div>
+  <div
+    className="add-button type-secondary"
+    id="-add-button"
+    onClick={[Function]}
+  >
+    <div
+      className="icon color-highlight size-md"
+      style={
+        Object {
+          "height": 35,
+          "width": 35,
+        }
+      }
+    >
+      <svg
+        height={35}
+        viewBox="0 0 20 20"
+        width={35}
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          clipRule="evenodd"
+          d="M10 20C4.48612 20 0 15.5139 0 10C0 4.48612 4.48612 0 10 0C15.5139 0 20 4.48612 20 10C20 15.5139 15.5139 20 10 20ZM10 1.09864C5.09155 1.09864 1.09864 5.09155 1.09864 10C1.09864 14.9084 5.09155 18.9014 10 18.9014C14.9084 18.9014 18.9014 14.9084 18.9014 10C18.9014 5.09155 14.9084 1.09864 10 1.09864Z"
+          fillRule="evenodd"
+        />
+        <path
+          clipRule="evenodd"
+          d="M4.68396 9.4093H15.316V10.5906H4.68396V9.4093Z"
+          fillRule="evenodd"
+        />
+        <path
+          clipRule="evenodd"
+          d="M9.40942 4.68396H10.5908V15.316H9.40942V4.68396Z"
+          fillRule="evenodd"
+        />
+      </svg>
+    </div>
+    <div
+      className="spacer horizontal"
+      style={
+        Object {
+          "height": "100%",
+          "maxHeight": "auto",
+          "width": 15,
+        }
+      }
+    />
+    <p
+      className="paragraph color-base size-md weight-medium"
+    >
+      Caves they've pick stealth Dwarf?
+    </p>
+  </div>
+</div>
+`;

package/molecules/AddButton/constants.js

@@ -0,0 +1,6 @@
+import { options as iconOptions } from '../../atoms/Icon'
+
+export const options = {
+  types: ['primary', 'secondary'],
+  icons: iconOptions.names,
+}

package/molecules/AddButton/handlers.js

@@ -0,0 +1,58 @@
+import keyboardCodes from '../../utils/keyboardCodes'
+import isEmpty from '../../utils/isEmpty'
+
+const setIsInvalidAnimation = ({ setIsInvalid }) => {
+  setIsInvalid(false)
+  setTimeout(() => setIsInvalid(true), 0)
+}
+
+export const handleClick = ({ setIsEditable, inputRef }) => () => {
+  setIsEditable(true)
+  inputRef?.current?.focus()
+}
+
+export const handleChange = ({ setInputValue, setIsInvalid }) => (event) => {
+  const { value } = event.currentTarget
+  setIsInvalid(false)
+  setInputValue(value)
+}
+
+export const handleKeyDown = ({
+  onAdd,
+  setIsEditable,
+  setInputValue,
+  setIsInvalid,
+  inputValue,
+}) => (event) => {
+  if (event.key === keyboardCodes.ENTER) {
+    onAdd({ value: inputValue })
+    setInputValue('')
+    setIsEditable(false)
+
+    if (isEmpty(inputValue)) {
+      setIsInvalidAnimation({ setIsInvalid })
+    }
+  }
+
+  if (event.key === keyboardCodes.ESC) {
+    setInputValue('')
+    setIsEditable(false)
+    setIsInvalid(false)
+  }
+}
+
+export const handleBlur = ({
+  inputValue,
+  setIsEditable,
+  setIsFocused,
+  setIsInvalid,
+}) => () => {
+  setIsFocused(false)
+  setIsInvalid(false)
+  !inputValue && setIsEditable(false)
+}
+
+export const handleFocus = ({ setIsFocused }) => (event) => {
+  event && event.currentTarget.select()
+  setIsFocused(true)
+}