imbric-theme 0.1.0

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

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

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

@@ -0,0 +1,43 @@
+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 Horizontal = ({
+  getStyles,
+  size,
+  height,
+  maxHeight,
+  isPlayground,
+}) => (
+  <div
+    className={getStyles('spacer', 'horizontal', {
+      'is-playground': isPlayground,
+    })}
+    style={{
+      height,
+      maxHeight,
+      width: mapSize(size),
+    }}
+  />
+)
+
+Horizontal.propTypes = {
+  getStyles: PropTypes.func.isRequired,
+  size: PropTypes.string,
+  isPlayground: PropTypes.bool,
+  height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  maxHeight: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+}
+
+Horizontal.defaultProps = {
+  size: 'none',
+  height: '100%',
+  maxHeight: 'auto',
+  isPlayground: false,
+  getStyles: () => {},
+}
+
+export default withStyles(styles)(Horizontal)

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'
+
+export const Accordion = ({
+  title,
+  children,
+  onToggle,
+  getStyles,
+  collapsed,
+  idAccordion,
+  addons,
+}) => {
+  const [isCollapsed, setIsCollapsed] = useState(collapsed)
+
+  return (
+    <div className={getStyles('accordion')}>
+      <div
+        id={idAccordion}
+        className={getStyles('container')}
+        onClick={() => {
+          setIsCollapsed(!isCollapsed)
+          onToggle(!isCollapsed)
+        }}
+      >
+        <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,
+  collapsed: PropTypes.bool.isRequired,
+  children: PropTypes.node,
+  onToggle: PropTypes.func,
+  addons: PropTypes.shape({
+    prepend: PropTypes.node,
+    append: PropTypes.node,
+  }),
+}
+
+Accordion.defaultProps = {
+  title: '',
+  getStyles: () => {},
+  collapsed: true,
+  onToggle: () => {},
+}
+
+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.',
+  },
+}