imbric-theme 0.1.1

package/layout/Spacer/components/Horizontal/Horizontal.stories.js

@@ -0,0 +1,32 @@
+import { Horizontal } from '.'
+import { options, styles } from '../..'
+
+import {
+  getTemplate,
+  getListTemplate,
+  getOptionsArgTypes,
+} from '../../../../helpers/storybook'
+
+const Template = getTemplate(Horizontal, styles)
+const ListTemplate = getListTemplate(Horizontal, styles)
+
+export default {
+  title: 'Layout/Spacer/Horizontal',
+  component: Horizontal,
+  args: {
+    height: 100,
+    maxHeight: 100,
+    isPlayground: true,
+  },
+  argTypes: {
+    size: getOptionsArgTypes(options.sizes),
+    height: { control: 'number' },
+    maxHeight: { control: 'number' },
+  },
+  parameters: { __sb: { fd: 'row' } },
+}
+
+export const Default = Template.bind({})
+
+export const Sizes = ListTemplate.bind({})
+Sizes.args = { items: options.sizes.map((size) => ({ size })) }

package/layout/Spacer/components/Horizontal/__snapshots__/Horizontal.stories.js.snap

@@ -0,0 +1,97 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Layout/Spacer/Horizontal Default 1`] = `
+<div
+  style={
+    Object {
+      "alignContent": "flex-start",
+      "display": "flex",
+      "flexDirection": "row",
+      "flexWrap": "wrap",
+      "gap": "10px 30px",
+      "height": "100%",
+      "justifyContent": "flex-start",
+      "maxHeight": "auto",
+    }
+  }
+>
+  <div
+    className="spacer horizontal is-playground"
+    style={
+      Object {
+        "height": 100,
+        "maxHeight": 100,
+        "width": 0,
+      }
+    }
+  />
+</div>
+`;
+
+exports[`Storyshots Layout/Spacer/Horizontal Sizes 1`] = `
+<div
+  style={
+    Object {
+      "alignContent": "flex-start",
+      "display": "flex",
+      "flexDirection": "row",
+      "flexWrap": "wrap",
+      "gap": "10px 30px",
+      "height": "100%",
+      "justifyContent": "flex-start",
+      "maxHeight": "auto",
+    }
+  }
+>
+  <div
+    className="spacer horizontal is-playground"
+    style={
+      Object {
+        "height": 100,
+        "maxHeight": 100,
+        "width": 0,
+      }
+    }
+  />
+  <div
+    className="spacer horizontal is-playground"
+    style={
+      Object {
+        "height": 100,
+        "maxHeight": 100,
+        "width": 5,
+      }
+    }
+  />
+  <div
+    className="spacer horizontal is-playground"
+    style={
+      Object {
+        "height": 100,
+        "maxHeight": 100,
+        "width": 15,
+      }
+    }
+  />
+  <div
+    className="spacer horizontal is-playground"
+    style={
+      Object {
+        "height": 100,
+        "maxHeight": 100,
+        "width": 20,
+      }
+    }
+  />
+  <div
+    className="spacer horizontal is-playground"
+    style={
+      Object {
+        "height": 100,
+        "maxHeight": 100,
+        "width": 40,
+      }
+    }
+  />
+</div>
+`;

package/layout/Spacer/components/Horizontal/index.js

@@ -0,0 +1 @@
+export { default, Horizontal } from './Horizontal'

package/layout/Spacer/components/Vertical/Vertical.js

@@ -0,0 +1,31 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { mapSize } from '../../helpers'
+
+import styles from '../../Spacer.module.css'
+import withStyles from '../../../../hocs/withStyles'
+
+export const Vertical = ({ getStyles, size, isPlayground }) => (
+  <div
+    className={getStyles('spacer', 'vertical', {
+      'is-playground': isPlayground,
+    })}
+    style={{
+      height: mapSize(size),
+    }}
+  />
+)
+
+Vertical.propTypes = {
+  getStyles: PropTypes.func.isRequired,
+  size: PropTypes.string.isRequired,
+  isPlayground: PropTypes.bool,
+}
+
+Vertical.defaultProps = {
+  size: 'none',
+  isPlayground: false,
+  getStyles: () => {},
+}
+
+export default withStyles(styles)(Vertical)

package/layout/Spacer/components/Vertical/Vertical.stories.js

@@ -0,0 +1,25 @@
+import { Vertical } from '.'
+import { options, styles } from '../..'
+
+import {
+  getTemplate,
+  getListTemplate,
+  getOptionsArgTypes,
+} from '../../../../helpers/storybook'
+
+const Template = getTemplate(Vertical, styles)
+const ListTemplate = getListTemplate(Vertical, styles)
+
+export default {
+  title: 'Layout/Spacer/Vertical',
+  component: Vertical,
+  args: { isPlayground: true },
+  argTypes: {
+    size: getOptionsArgTypes(options.sizes),
+  },
+}
+
+export const Default = Template.bind({})
+
+export const Sizes = ListTemplate.bind({})
+Sizes.args = { items: options.sizes.map((size) => ({ size })) }

package/layout/Spacer/components/Vertical/__snapshots__/Vertical.stories.js.snap

@@ -0,0 +1,85 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Layout/Spacer/Vertical 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="spacer vertical is-playground"
+    style={
+      Object {
+        "height": 0,
+      }
+    }
+  />
+</div>
+`;
+
+exports[`Storyshots Layout/Spacer/Vertical Sizes 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="spacer vertical is-playground"
+    style={
+      Object {
+        "height": 0,
+      }
+    }
+  />
+  <div
+    className="spacer vertical is-playground"
+    style={
+      Object {
+        "height": 5,
+      }
+    }
+  />
+  <div
+    className="spacer vertical is-playground"
+    style={
+      Object {
+        "height": 15,
+      }
+    }
+  />
+  <div
+    className="spacer vertical is-playground"
+    style={
+      Object {
+        "height": 20,
+      }
+    }
+  />
+  <div
+    className="spacer vertical is-playground"
+    style={
+      Object {
+        "height": 40,
+      }
+    }
+  />
+</div>
+`;

package/layout/Spacer/components/Vertical/index.js

@@ -0,0 +1 @@
+export { default, Vertical } from './Vertical'

package/layout/Spacer/components/index.js

@@ -0,0 +1,2 @@
+export { default as Horizontal } from './Horizontal'
+export { default as Vertical } from './Vertical'

package/layout/Spacer/constants.js

@@ -0,0 +1,5 @@
+import { choices } from '../../tokens'
+
+export const options = {
+  sizes: Object.keys(choices.spacing),
+}

package/layout/Spacer/helpers.js

@@ -0,0 +1,3 @@
+import { choices } from '../../tokens'
+export const mapSize = (size) =>
+  typeof size === 'number' ? size : choices.spacing[size]

package/layout/Spacer/index.js

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

package/molecules/Accordion/Accordion.js

@@ -0,0 +1,70 @@
+import React, { useState } from 'react'
+import PropTypes from 'prop-types'
+
+import Paragraph from '../../atoms/Paragraph'
+import Divider from '../../atoms/Divider'
+import Icon from '../../atoms/Icon'
+import Spacer from '../../layout/Spacer'
+
+import styles from './Accordion.module.css'
+import withStyles from '../../hocs/withStyles'
+
+const handleToggle = ({ onToggle, isCollapsed, setIsCollapsed }) => () => {
+  setIsCollapsed(!isCollapsed)
+  onToggle(!isCollapsed)
+}
+
+export const Accordion = ({
+  title,
+  children,
+  onToggle,
+  getStyles,
+  defaultIsCollapsed,
+  addons,
+}) => {
+  const [isCollapsed, setIsCollapsed] = useState(defaultIsCollapsed)
+
+  return (
+    <div className={getStyles('accordion')}>
+      <div
+        className={getStyles('container')}
+        onClick={handleToggle({ onToggle, isCollapsed, setIsCollapsed })}
+      >
+        <Icon
+          color="inverted"
+          size="sm"
+          name={isCollapsed ? 'angleDown' : 'angleUp'}
+          background="muted"
+        />
+        <Spacer.Horizontal size="sm" />
+        {addons && addons.prepend}
+        <Paragraph weight="medium">{title}</Paragraph>
+        {addons && addons.append}
+      </div>
+      <Spacer.Vertical size="xs" />
+      <Divider />
+      {!isCollapsed && children}
+    </div>
+  )
+}
+
+Accordion.propTypes = {
+  title: PropTypes.string.isRequired,
+  getStyles: PropTypes.func.isRequired,
+  children: PropTypes.node,
+  onToggle: PropTypes.func,
+  defaultIsCollapsed: PropTypes.bool,
+  addons: PropTypes.shape({
+    prepend: PropTypes.node,
+    append: PropTypes.node,
+  }),
+}
+
+Accordion.defaultProps = {
+  getStyles: () => {},
+  onToggle: () => {},
+  current: 0,
+  defaultIsCollapsed: true,
+}
+
+export default withStyles(styles)(Accordion)

package/molecules/Accordion/Accordion.module.css

@@ -0,0 +1,12 @@
+.accordion {
+  width: 100%;
+  cursor: pointer;
+}
+
+.container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  line-height: 1;
+  text-transform: uppercase;
+}

package/molecules/Accordion/Accordion.stories.js

@@ -0,0 +1,31 @@
+import { Accordion, styles } from '.'
+
+import { getTemplate } from '../../helpers/storybook'
+
+const Template = getTemplate(Accordion, styles)
+
+export default {
+  title: 'Molecules/Accordion',
+  component: Accordion,
+  args: {
+    title: 'Em Sméagol body.',
+    children:
+      "Fells defeated veins this. There and Back Again. A Hobbit's Tale. Loved lucky Istari difficult lay? Dale fellow's rioting. Blanket Misty Mountain started rival wriggles flatten convinced succumbed closing? Slug town fond pipe-weed flatten recognizes Goblins! Innards pouf admirable freely nothingness sleepless exactly afternoon cruelty Bofur? Craftsmen tested fair Alfrid gets figure words winter's field offer healed squash? These galumphing Grima tread mustn't seen melt ideal picked recover employment. Nazgûl alas luckiest?",
+  },
+}
+
+export const Default = Template.bind({})
+
+export const AddonPrepend = Template.bind({})
+AddonPrepend.args = {
+  addons: {
+    prepend: 'Dare Erebor forgive most.',
+  },
+}
+
+export const AddonAppend = Template.bind({})
+AddonAppend.args = {
+  addons: {
+    append: 'But ill-tempered Thengel.',
+  },
+}

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'