imbric-theme 0.1.0

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)
+}

package/molecules/AddButton/handlers.test.js

@@ -0,0 +1,19 @@
+import { handleClick } from './handlers'
+
+describe('[ Molecules / AddButton / Handlers ]', () => {
+  describe('#handleClick', () => {
+    describe('when the handler is call', () => {
+      it('should return a function', () => {
+        // Arrange
+        const params = {}
+
+        // Act
+        const result = typeof handleClick(params)
+        const expected = 'function'
+
+        // Assert
+        expect(result).toBe(expected)
+      })
+    })
+  })
+})

package/molecules/AddButton/helpers.js

@@ -0,0 +1,6 @@
+export const shouldShowHelpText = ({
+  isEditable,
+  inputValue,
+  focusHelpText,
+  blurHelpText,
+}) => isEditable && inputValue && (focusHelpText || blurHelpText)

package/molecules/AddButton/helpers.test.js

@@ -0,0 +1,41 @@
+import { shouldShowHelpText } from './helpers'
+
+describe('[ Molecules / AddButton / Helpers ]', () => {
+  describe('#shouldShowHelpText', () => {
+    describe('when `isEditable`, `inputValue`, and `focusHelpText` exist', () => {
+      it('should return `true`', () => {
+        // Arrange
+        const params = {
+          isEditable: true,
+          inputValue: true,
+          focusHelpText: true,
+        }
+
+        // Act
+        const result = shouldShowHelpText(params)
+        const expected = true
+
+        // Assert
+        expect(result).toBe(expected)
+      })
+    })
+
+    describe('when `isEditable`, `inputValue`, and `blurHelpText` exist', () => {
+      it('should return `true`', () => {
+        // Arrange
+        const params = {
+          isEditable: true,
+          inputValue: true,
+          blurHelpText: true,
+        }
+
+        // Act
+        const result = shouldShowHelpText(params)
+        const expected = true
+
+        // Assert
+        expect(result).toBe(expected)
+      })
+    })
+  })
+})

package/molecules/AddButton/hooks.js

@@ -0,0 +1,14 @@
+import { useEffect } from 'react'
+import keyboardCodes from '../../utils/keyboardCodes'
+
+const createKeydownEvent = (callback) => (event) => {
+  event.key === keyboardCodes.ENTER && callback()
+}
+
+export const useKeydownEnterKey = (callback) => {
+  useEffect(() => {
+    window.addEventListener('keydown', createKeydownEvent(callback))
+    return () =>
+      window.removeEventListener('keydown', createKeydownEvent(callback))
+  }, [])
+}

package/molecules/AddButton/index.js

@@ -0,0 +1,3 @@
+export { default, AddButton } from './AddButton'
+export { options } from './constants'
+export { default as styles } from './AddButton.module.css'

package/molecules/ButtonIcon/ButtonIcon.js

@@ -0,0 +1,41 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import Spacer from '../../layout/Spacer'
+import Button from '../../atoms/Button'
+import Icon from '../../atoms/Icon'
+
+import { options } from './constants'
+
+export const ButtonIcon = ({ children, type, icon }) => (
+  <Button
+    type={type}
+    isInline={true}
+    addons={{
+      append: (
+        <>
+          <Spacer.Horizontal size="xs"></Spacer.Horizontal>
+          <Icon
+            name={icon}
+            color={type === 'primary' ? 'inverted' : 'primary'}
+          />
+        </>
+      ),
+    }}
+  >
+    {children}
+  </Button>
+)
+
+ButtonIcon.propTypes = {
+  children: PropTypes.node.isRequired,
+  icon: PropTypes.oneOf(options.icons),
+  type: PropTypes.oneOf(options.types),
+}
+
+ButtonIcon.defaultProps = {
+  type: 'secondary',
+  icon: 'arrowRight',
+}
+
+export default ButtonIcon

package/molecules/ButtonIcon/ButtonIcon.stories.js

@@ -0,0 +1,27 @@
+import { ButtonIcon, options } from '.'
+import {
+  getTemplate,
+  getListTemplate,
+  getOptionsArgTypes,
+} from '../../helpers/storybook'
+
+const Template = getTemplate(ButtonIcon)
+const ListTemplate = getListTemplate(ButtonIcon)
+
+export default {
+  title: 'Molecules/ButtonIcon',
+  component: ButtonIcon,
+  args: {
+    children: 'Cowards Agreed',
+  },
+  argTypes: {
+    type: getOptionsArgTypes(options.types),
+    icon: getOptionsArgTypes(options.icons),
+    children: { control: 'text' },
+  },
+}
+
+export const Default = Template.bind({})
+
+export const Types = ListTemplate.bind({})
+Types.args = { items: options.types.map((type) => ({ type })) }