imbric-theme 0.1.0

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

@@ -0,0 +1,228 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Molecules/Accordion Addon Append 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="accordion"
+  >
+    <div
+      className="container"
+      onClick={[Function]}
+    >
+      <div
+        className="icon color-inverted size-sm background-muted"
+        style={
+          Object {
+            "height": 25,
+            "width": 25,
+          }
+        }
+      >
+        <svg
+          height={25}
+          viewBox="0 0 15 9"
+          width={25}
+          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>
+      <div
+        className="spacer horizontal"
+        style={
+          Object {
+            "height": "100%",
+            "maxHeight": "auto",
+            "width": 15,
+          }
+        }
+      />
+      <p
+        className="paragraph color-base size-md weight-medium"
+      >
+        Em Sméagol body.
+      </p>
+      But ill-tempered Thengel.
+    </div>
+    <div
+      className="spacer vertical"
+      style={
+        Object {
+          "height": 5,
+        }
+      }
+    />
+    <div
+      className="divider"
+    />
+  </div>
+</div>
+`;
+
+exports[`Storyshots Molecules/Accordion Addon Prepend 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="accordion"
+  >
+    <div
+      className="container"
+      onClick={[Function]}
+    >
+      <div
+        className="icon color-inverted size-sm background-muted"
+        style={
+          Object {
+            "height": 25,
+            "width": 25,
+          }
+        }
+      >
+        <svg
+          height={25}
+          viewBox="0 0 15 9"
+          width={25}
+          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>
+      <div
+        className="spacer horizontal"
+        style={
+          Object {
+            "height": "100%",
+            "maxHeight": "auto",
+            "width": 15,
+          }
+        }
+      />
+      Dare Erebor forgive most.
+      <p
+        className="paragraph color-base size-md weight-medium"
+      >
+        Em Sméagol body.
+      </p>
+    </div>
+    <div
+      className="spacer vertical"
+      style={
+        Object {
+          "height": 5,
+        }
+      }
+    />
+    <div
+      className="divider"
+    />
+  </div>
+</div>
+`;
+
+exports[`Storyshots Molecules/Accordion 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="accordion"
+  >
+    <div
+      className="container"
+      onClick={[Function]}
+    >
+      <div
+        className="icon color-inverted size-sm background-muted"
+        style={
+          Object {
+            "height": 25,
+            "width": 25,
+          }
+        }
+      >
+        <svg
+          height={25}
+          viewBox="0 0 15 9"
+          width={25}
+          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>
+      <div
+        className="spacer horizontal"
+        style={
+          Object {
+            "height": "100%",
+            "maxHeight": "auto",
+            "width": 15,
+          }
+        }
+      />
+      <p
+        className="paragraph color-base size-md weight-medium"
+      >
+        Em Sméagol body.
+      </p>
+    </div>
+    <div
+      className="spacer vertical"
+      style={
+        Object {
+          "height": 5,
+        }
+      }
+    />
+    <div
+      className="divider"
+    />
+  </div>
+</div>
+`;

package/molecules/Accordion/index.js

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

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?",
+}