imbric-theme 0.1.1

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

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

@@ -0,0 +1,178 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Molecules/ButtonIcon Default 1`] = `
+<div
+  style={
+    Object {
+      "alignContent": "flex-start",
+      "display": "flex",
+      "flexDirection": "column",
+      "flexWrap": "wrap",
+      "gap": "10px 30px",
+      "height": "100%",
+      "justifyContent": "flex-start",
+      "maxHeight": "auto",
+    }
+  }
+>
+  <button
+    className="button type-secondary is-inline"
+    onClick={[Function]}
+  >
+    <h1
+      className="heading color-primary size-md weight-light is-centered is-inline"
+    >
+      Cowards Agreed
+    </h1>
+    <div
+      className="spacer horizontal"
+      style={
+        Object {
+          "height": "100%",
+          "maxHeight": "auto",
+          "width": 5,
+        }
+      }
+    />
+    <div
+      className="icon color-primary size-md background-transparent"
+      style={
+        Object {
+          "height": 35,
+          "width": 35,
+        }
+      }
+    >
+      <svg
+        height={35}
+        viewBox="0 0 19 20"
+        width={35}
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          clipRule="evenodd"
+          d="M8.65792 19.316L7.34192 18L15.6849 9.658L7.34192 1.316L8.65792 0L18.3149 9.658L8.65792 19.316Z"
+          fillRule="evenodd"
+        />
+        <path
+          clipRule="evenodd"
+          d="M0 8.65796H17V10.658H0V8.65796Z"
+          fillRule="evenodd"
+        />
+      </svg>
+    </div>
+  </button>
+</div>
+`;
+
+exports[`Storyshots Molecules/ButtonIcon Types 1`] = `
+<div
+  style={
+    Object {
+      "alignContent": "flex-start",
+      "display": "flex",
+      "flexDirection": "column",
+      "flexWrap": "wrap",
+      "gap": "10px 30px",
+      "height": "100%",
+      "justifyContent": "flex-start",
+      "maxHeight": "auto",
+    }
+  }
+>
+  <button
+    className="button type-primary is-inline"
+    onClick={[Function]}
+  >
+    <h1
+      className="heading color-inverted size-md weight-light is-centered is-inline"
+    >
+      Cowards Agreed
+    </h1>
+    <div
+      className="spacer horizontal"
+      style={
+        Object {
+          "height": "100%",
+          "maxHeight": "auto",
+          "width": 5,
+        }
+      }
+    />
+    <div
+      className="icon color-inverted size-md background-transparent"
+      style={
+        Object {
+          "height": 35,
+          "width": 35,
+        }
+      }
+    >
+      <svg
+        height={35}
+        viewBox="0 0 19 20"
+        width={35}
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          clipRule="evenodd"
+          d="M8.65792 19.316L7.34192 18L15.6849 9.658L7.34192 1.316L8.65792 0L18.3149 9.658L8.65792 19.316Z"
+          fillRule="evenodd"
+        />
+        <path
+          clipRule="evenodd"
+          d="M0 8.65796H17V10.658H0V8.65796Z"
+          fillRule="evenodd"
+        />
+      </svg>
+    </div>
+  </button>
+  <button
+    className="button type-secondary is-inline"
+    onClick={[Function]}
+  >
+    <h1
+      className="heading color-primary size-md weight-light is-centered is-inline"
+    >
+      Cowards Agreed
+    </h1>
+    <div
+      className="spacer horizontal"
+      style={
+        Object {
+          "height": "100%",
+          "maxHeight": "auto",
+          "width": 5,
+        }
+      }
+    />
+    <div
+      className="icon color-primary size-md background-transparent"
+      style={
+        Object {
+          "height": 35,
+          "width": 35,
+        }
+      }
+    >
+      <svg
+        height={35}
+        viewBox="0 0 19 20"
+        width={35}
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          clipRule="evenodd"
+          d="M8.65792 19.316L7.34192 18L15.6849 9.658L7.34192 1.316L8.65792 0L18.3149 9.658L8.65792 19.316Z"
+          fillRule="evenodd"
+        />
+        <path
+          clipRule="evenodd"
+          d="M0 8.65796H17V10.658H0V8.65796Z"
+          fillRule="evenodd"
+        />
+      </svg>
+    </div>
+  </button>
+</div>
+`;

package/molecules/ButtonIcon/constants.js

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

package/molecules/ButtonIcon/index.js

@@ -0,0 +1,2 @@
+export { default, ButtonIcon } from './ButtonIcon'
+export { options } from './constants'

package/molecules/Dropdown/Dropdown.js

@@ -0,0 +1,59 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import Icon from '../../atoms/Icon'
+
+import styles from './Dropdown.module.css'
+import withStyles from '../../hocs/withStyles'
+
+export const Dropdown = ({
+  getStyles,
+  id,
+  options,
+  value,
+  isInline,
+  onChange,
+}) => (
+  <div
+    id={id}
+    className={getStyles('dropdown', {
+      'is-inline': isInline,
+    })}
+  >
+    <Icon className="dropdown-icon" name="angleDown" background="highlight" />
+    <select
+      className={getStyles('dropdown-select')}
+      onChange={(event) => onChange(event?.currentTarget?.value)}
+      value={value}
+    >
+      {options.map(({ text, value }) => (
+        <option key={value} value={value}>
+          {text}
+        </option>
+      ))}
+    </select>
+  </div>
+)
+
+Dropdown.propTypes = {
+  onChange: PropTypes.func.isRequired,
+  getStyles: PropTypes.func.isRequired,
+  options: PropTypes.arrayOf(
+    PropTypes.shape({
+      text: PropTypes.string,
+      value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    })
+  ).isRequired,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  id: PropTypes.string,
+  isInline: PropTypes.bool,
+}
+
+Dropdown.defaultProps = {
+  value: '',
+  isInline: false,
+  onChange: () => {},
+  getStyles: () => {},
+}
+
+export default withStyles(styles)(Dropdown)

package/molecules/Dropdown/Dropdown.module.css

@@ -0,0 +1,34 @@
+.dropdown {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+  cursor: pointer;
+}
+
+.dropdown :global(.dropdown-icon) {
+  position: absolute;
+  top: 50%;
+  right: 1px;
+  pointer-events: none;
+  transform: translateY(-50%);
+}
+
+.dropdown-select {
+  width: 100%;
+  height: var(--input-height);
+  padding: 10px 30px 10px 20px;
+  border: var(--border-width-thin) solid var(--color-primary);
+  background: var(--input-background);
+  border-radius: var(--input-border-radius);
+  color: var(--color-font-base);
+  transition: box-shadow 0.2s ease;
+}
+
+.dropdown-select:focus {
+  box-shadow: 0 0 0 1px var(--color-primary), 0 0 10px 0 var(--color-primary);
+  outline: none;
+}
+
+.is-inline {
+  max-width: max-content;
+}

package/molecules/Dropdown/Dropdown.stories.js

@@ -0,0 +1,41 @@
+import { Dropdown, styles } from '.'
+
+import { getTemplate } from '../../helpers/storybook'
+
+const Template = getTemplate(Dropdown, styles)
+
+export default {
+  title: 'Molecules/Dropdown',
+  component: Dropdown,
+  args: {
+    options: [
+      {
+        text: '8:00 AM',
+        value: 800,
+      },
+      {
+        text: '1:00 PM',
+        value: 1300,
+      },
+    ],
+  },
+  argTypes: {
+    options: {
+      description: '**array of shaped objects:**',
+      table: {
+        type: {
+          summary: 'object',
+          detail: "{ text: 'string', value: 'string|number'}",
+        },
+      },
+    },
+  },
+}
+
+export const Default = Template.bind({})
+
+export const Value = Template.bind({})
+Value.args = { value: 1300 }
+
+export const Inline = Template.bind({})
+Inline.args = { isInline: true }

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

@@ -0,0 +1,181 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Molecules/Dropdown 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="dropdown"
+  >
+    <div
+      className="dropdown-icon icon color-base size-md background-highlight"
+      style={
+        Object {
+          "height": 35,
+          "width": 35,
+        }
+      }
+    >
+      <svg
+        height={35}
+        viewBox="0 0 15 9"
+        width={35}
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          clipRule="evenodd"
+          d="M7.82633 8.70623L0.882568 1.54063L1.89405 0.496826L7.82633 6.61863L13.7586 0.496826L14.7701 1.54063L7.82633 8.70623Z"
+          fillRule="evenodd"
+        />
+      </svg>
+    </div>
+    <select
+      className="dropdown-select"
+      onChange={[Function]}
+      value=""
+    >
+      <option
+        value={800}
+      >
+        8:00 AM
+      </option>
+      <option
+        value={1300}
+      >
+        1:00 PM
+      </option>
+    </select>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Molecules/Dropdown Inline 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="dropdown is-inline"
+  >
+    <div
+      className="dropdown-icon icon color-base size-md background-highlight"
+      style={
+        Object {
+          "height": 35,
+          "width": 35,
+        }
+      }
+    >
+      <svg
+        height={35}
+        viewBox="0 0 15 9"
+        width={35}
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          clipRule="evenodd"
+          d="M7.82633 8.70623L0.882568 1.54063L1.89405 0.496826L7.82633 6.61863L13.7586 0.496826L14.7701 1.54063L7.82633 8.70623Z"
+          fillRule="evenodd"
+        />
+      </svg>
+    </div>
+    <select
+      className="dropdown-select"
+      onChange={[Function]}
+      value=""
+    >
+      <option
+        value={800}
+      >
+        8:00 AM
+      </option>
+      <option
+        value={1300}
+      >
+        1:00 PM
+      </option>
+    </select>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Molecules/Dropdown Value 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="dropdown"
+  >
+    <div
+      className="dropdown-icon icon color-base size-md background-highlight"
+      style={
+        Object {
+          "height": 35,
+          "width": 35,
+        }
+      }
+    >
+      <svg
+        height={35}
+        viewBox="0 0 15 9"
+        width={35}
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          clipRule="evenodd"
+          d="M7.82633 8.70623L0.882568 1.54063L1.89405 0.496826L7.82633 6.61863L13.7586 0.496826L14.7701 1.54063L7.82633 8.70623Z"
+          fillRule="evenodd"
+        />
+      </svg>
+    </div>
+    <select
+      className="dropdown-select"
+      onChange={[Function]}
+      value={1300}
+    >
+      <option
+        value={800}
+      >
+        8:00 AM
+      </option>
+      <option
+        value={1300}
+      >
+        1:00 PM
+      </option>
+    </select>
+  </div>
+</div>
+`;

package/molecules/Dropdown/index.js

@@ -0,0 +1,2 @@
+export { default, Dropdown } from './Dropdown'
+export { default as styles } from './Dropdown.module.css'