imbric-theme 0.1.1

package/atoms/Card/__snapshots__/Card.stories.js.snap

@@ -0,0 +1,136 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Atoms/Card Clickable 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="card color-base size-sm is-clickable"
+  >
+    Lacerations coaster sort comings windlance happily EIf-witch handful unbefitting? Decide rising startled Aragorn invitations midnight deserves fortunes innards. You cannot hide. I see you. There is no life in the void. Only death. Mirror Emyn dreamed!
+  </div>
+</div>
+`;
+
+exports[`Storyshots Atoms/Card Colors 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="card color-base size-sm"
+  >
+    Lacerations coaster sort comings windlance happily EIf-witch handful unbefitting? Decide rising startled Aragorn invitations midnight deserves fortunes innards. You cannot hide. I see you. There is no life in the void. Only death. Mirror Emyn dreamed!
+  </div>
+  <div
+    className="card color-primary size-sm"
+  >
+    Lacerations coaster sort comings windlance happily EIf-witch handful unbefitting? Decide rising startled Aragorn invitations midnight deserves fortunes innards. You cannot hide. I see you. There is no life in the void. Only death. Mirror Emyn dreamed!
+  </div>
+  <div
+    className="card color-secondary size-sm"
+  >
+    Lacerations coaster sort comings windlance happily EIf-witch handful unbefitting? Decide rising startled Aragorn invitations midnight deserves fortunes innards. You cannot hide. I see you. There is no life in the void. Only death. Mirror Emyn dreamed!
+  </div>
+</div>
+`;
+
+exports[`Storyshots Atoms/Card 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="card color-base size-sm"
+  >
+    Lacerations coaster sort comings windlance happily EIf-witch handful unbefitting? Decide rising startled Aragorn invitations midnight deserves fortunes innards. You cannot hide. I see you. There is no life in the void. Only death. Mirror Emyn dreamed!
+  </div>
+</div>
+`;
+
+exports[`Storyshots Atoms/Card Dragabble 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="card color-base size-sm is-draggable"
+  >
+    Lacerations coaster sort comings windlance happily EIf-witch handful unbefitting? Decide rising startled Aragorn invitations midnight deserves fortunes innards. You cannot hide. I see you. There is no life in the void. Only death. Mirror Emyn dreamed!
+  </div>
+</div>
+`;
+
+exports[`Storyshots Atoms/Card 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="card color-base size-sm"
+  >
+    Lacerations coaster sort comings windlance happily EIf-witch handful unbefitting? Decide rising startled Aragorn invitations midnight deserves fortunes innards. You cannot hide. I see you. There is no life in the void. Only death. Mirror Emyn dreamed!
+  </div>
+  <div
+    className="card color-base size-md"
+  >
+    Lacerations coaster sort comings windlance happily EIf-witch handful unbefitting? Decide rising startled Aragorn invitations midnight deserves fortunes innards. You cannot hide. I see you. There is no life in the void. Only death. Mirror Emyn dreamed!
+  </div>
+  <div
+    className="card color-base size-lg"
+  >
+    Lacerations coaster sort comings windlance happily EIf-witch handful unbefitting? Decide rising startled Aragorn invitations midnight deserves fortunes innards. You cannot hide. I see you. There is no life in the void. Only death. Mirror Emyn dreamed!
+  </div>
+</div>
+`;

package/atoms/Card/constants.js

@@ -0,0 +1,4 @@
+export const options = {
+  colors: ['base', 'primary', 'secondary'],
+  sizes: ['sm', 'md', 'lg'],
+}

package/atoms/Card/index.js

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

package/atoms/Check/Check.js

@@ -0,0 +1,26 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import Icon from '../Icon'
+
+import styles from './Check.module.css'
+import withStyles from '../../hocs/withStyles'
+
+export const Check = ({ isChecked, getStyles }) => {
+  return isChecked ? (
+    <Icon name="checkCircle" color="muted" isClickable />
+  ) : (
+    <span className={getStyles('check')} />
+  )
+}
+
+Check.propTypes = {
+  getStyles: PropTypes.func.isRequired,
+  isChecked: PropTypes.bool,
+}
+
+Check.defaultProps = {
+  getStyles: () => {},
+}
+
+export default withStyles(styles)(Check)

package/atoms/Check/Check.module.css

@@ -0,0 +1,11 @@
+.check {
+  display: inline-flex;
+  width: 100%;
+  max-width: 17px;
+  height: 17px;
+  box-sizing: content-box;
+  border: var(--picture-border);
+  margin: 8px;
+  border-radius: var(--border-radius-full);
+  cursor: pointer;
+}

package/atoms/Check/Check.stories.js

@@ -0,0 +1,15 @@
+import { Check, styles } from '.'
+
+import { getTemplate } from '../../helpers/storybook'
+
+const Template = getTemplate(Check, styles)
+
+export default {
+  title: 'Atoms/Check',
+  component: Check,
+}
+
+export const Default = Template.bind({})
+
+export const Checked = Template.bind({})
+Checked.args = { isChecked: true }

package/atoms/Check/__snapshots__/Check.stories.js.snap

@@ -0,0 +1,67 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Atoms/Check Checked 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="icon color-muted size-md background-transparent is-clickable"
+    style={
+      Object {
+        "height": 35,
+        "width": 35,
+      }
+    }
+  >
+    <svg
+      height={35}
+      viewBox="5 1 20 20"
+      width={35}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        clipRule="evenodd"
+        d="M14.93 20.86C9.45472 20.86 5 16.4053 5 10.93C5 5.45472 9.45472 1 14.93 1C20.4053 1 24.86 5.45472 24.86 10.93C24.86 16.4053 20.4053 20.86 14.93 20.86ZM14.93 2.09095C10.0559 2.09095 6.09095 6.05591 6.09095 10.93C6.09095 15.8041 10.0559 19.769 14.93 19.769C19.8041 19.769 23.769 15.8041 23.769 10.93C23.769 6.05591 19.8041 2.09095 14.93 2.09095Z"
+        fillRule="evenodd"
+      />
+      <path
+        clipRule="evenodd"
+        d="M13.744 15.221L8.67871 10.1423L9.45059 9.37155L13.7458 13.6773L20.41 7.01251L21.1807 7.78439L13.744 15.221Z"
+        fillRule="evenodd"
+      />
+    </svg>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Atoms/Check Default 1`] = `
+<div
+  style={
+    Object {
+      "alignContent": "flex-start",
+      "display": "flex",
+      "flexDirection": "column",
+      "flexWrap": "wrap",
+      "gap": "10px 30px",
+      "height": "100%",
+      "justifyContent": "flex-start",
+      "maxHeight": "auto",
+    }
+  }
+>
+  <span
+    className="check"
+  />
+</div>
+`;

package/atoms/Check/index.js

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

package/atoms/Divider/Divider.js

@@ -0,0 +1,19 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import styles from './Divider.module.css'
+import withStyles from '../../hocs/withStyles'
+
+export const Divider = ({ getStyles }) => {
+  return <div className={getStyles('divider')} />
+}
+
+Divider.propTypes = {
+  getStyles: PropTypes.func.isRequired,
+}
+
+Divider.defaultProps = {
+  getStyles: () => {},
+}
+
+export default withStyles(styles)(Divider)

package/atoms/Divider/Divider.module.css

@@ -0,0 +1,5 @@
+.divider {
+  width: 100%;
+  height: 1px;
+  background: var(--color-font-base);
+}

package/atoms/Divider/Divider.stories.js

@@ -0,0 +1,12 @@
+import { Divider, styles } from '.'
+
+import { getTemplate } from '../../helpers/storybook'
+
+const Template = getTemplate(Divider, styles)
+
+export default {
+  title: 'Atoms/Divider',
+  component: Divider,
+}
+
+export const Default = Template.bind({})

package/atoms/Divider/__snapshots__/Divider.stories.js.snap

@@ -0,0 +1,22 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Atoms/Divider 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="divider"
+  />
+</div>
+`;

package/atoms/Divider/index.js

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

package/atoms/Heading/Heading.js

@@ -0,0 +1,37 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import styles from './Heading.module.css'
+import { options } from './constants'
+import withStyles from '../../hocs/withStyles'
+
+export const Heading = ({ children, isCentered, isInline, getStyles }) => {
+  return (
+    <h1
+      className={getStyles('heading', ['color', 'size', 'weight'], {
+        'is-centered': isCentered,
+        'is-inline': isInline,
+      })}
+    >
+      {children}
+    </h1>
+  )
+}
+
+Heading.propTypes = {
+  children: PropTypes.string.isRequired,
+  getStyles: PropTypes.func.isRequired,
+  isInline: PropTypes.bool,
+  isCentered: PropTypes.bool,
+  color: PropTypes.oneOf(options.colors),
+  size: PropTypes.oneOf(options.sizes),
+  weight: PropTypes.oneOf(options.weights),
+}
+
+Heading.defaultProps = {
+  color: 'base',
+  size: 'md',
+  weight: 'bold',
+}
+
+export default withStyles(styles)(Heading)

package/atoms/Heading/Heading.module.css

@@ -0,0 +1,66 @@
+.heading {
+  width: 100%;
+  font-family: var(--font-family-sans);
+  line-height: var(--line-height-tight);
+}
+
+.color-base {
+  color: var(--color-font-base);
+}
+
+.color-inverted {
+  color: var(--color-primary-inverted);
+}
+
+.color-primary {
+  color: var(--color-primary);
+}
+
+.color-tertiary {
+  color: var(--color-tertiary);
+}
+
+.size-xs {
+  font-size: var(--font-size-xs);
+}
+
+.size-sm {
+  font-size: var(--font-size-sm);
+}
+
+.size-md {
+  font-size: var(--font-size-md);
+}
+
+.size-lg {
+  font-size: var(--font-size-lg);
+}
+
+.size-xl {
+  font-size: var(--font-size-xl);
+}
+
+.size-2xl {
+  font-size: var(--font-size-2xl);
+}
+
+.weight-light {
+  font-weight: var(--font-weight-light);
+}
+
+.weight-normal {
+  font-weight: var(--font-weight-normal);
+}
+
+.weight-bold {
+  font-weight: var(--font-weight-bold);
+}
+
+.is-centered {
+  text-align: center;
+}
+
+.is-inline {
+  display: inline-block;
+  max-width: max-content;
+}

package/atoms/Heading/Heading.stories.js

@@ -0,0 +1,46 @@
+import { Heading, styles, options } from '.'
+import {
+  getTemplate,
+  getListTemplate,
+  getOptionsArgTypes,
+} from '../../helpers/storybook'
+
+const Template = getTemplate(Heading, styles)
+const ListTemplate = getListTemplate(Heading, styles)
+
+export default {
+  title: 'Atoms/Heading',
+  component: Heading,
+  args: {
+    children: 'Consent doubt Tuckborough challenge destroying.',
+  },
+  argTypes: {
+    color: getOptionsArgTypes(options.colors),
+    size: getOptionsArgTypes(options.sizes),
+    weight: getOptionsArgTypes(options.weights),
+    children: { control: 'text' },
+  },
+}
+
+export const Default = Template.bind({})
+
+export const Inline = Template.bind({})
+Inline.args = {
+  isInline: true,
+}
+
+export const Centered = Template.bind({})
+Centered.args = {
+  isCentered: true,
+  children:
+    'Lose consequence night studies Wolves should wizards destruction burglar? All right, then. Keep your secrets.',
+}
+
+export const Colors = ListTemplate.bind({})
+Colors.args = { items: options.colors.map((color) => ({ color })) }
+
+export const Sizes = ListTemplate.bind({})
+Sizes.args = { items: options.sizes.map((size) => ({ size })) }
+
+export const Weights = ListTemplate.bind({})
+Weights.args = { items: options.weights.map((weight) => ({ weight })) }

package/atoms/Heading/__snapshots__/Heading.stories.js.snap

@@ -0,0 +1,189 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Atoms/Heading Centered 1`] = `
+<div
+  style={
+    Object {
+      "alignContent": "flex-start",
+      "display": "flex",
+      "flexDirection": "column",
+      "flexWrap": "wrap",
+      "gap": "10px 30px",
+      "height": "100%",
+      "justifyContent": "flex-start",
+      "maxHeight": "auto",
+    }
+  }
+>
+  <h1
+    className="heading color-base size-md weight-bold is-centered"
+  >
+    Lose consequence night studies Wolves should wizards destruction burglar? All right, then. Keep your secrets.
+  </h1>
+</div>
+`;
+
+exports[`Storyshots Atoms/Heading Colors 1`] = `
+<div
+  style={
+    Object {
+      "alignContent": "flex-start",
+      "display": "flex",
+      "flexDirection": "column",
+      "flexWrap": "wrap",
+      "gap": "10px 30px",
+      "height": "100%",
+      "justifyContent": "flex-start",
+      "maxHeight": "auto",
+    }
+  }
+>
+  <h1
+    className="heading color-base size-md weight-bold"
+  >
+    Consent doubt Tuckborough challenge destroying.
+  </h1>
+  <h1
+    className="heading color-primary size-md weight-bold"
+  >
+    Consent doubt Tuckborough challenge destroying.
+  </h1>
+  <h1
+    className="heading color-tertiary size-md weight-bold"
+  >
+    Consent doubt Tuckborough challenge destroying.
+  </h1>
+  <h1
+    className="heading color-inverted size-md weight-bold"
+  >
+    Consent doubt Tuckborough challenge destroying.
+  </h1>
+</div>
+`;
+
+exports[`Storyshots Atoms/Heading Default 1`] = `
+<div
+  style={
+    Object {
+      "alignContent": "flex-start",
+      "display": "flex",
+      "flexDirection": "column",
+      "flexWrap": "wrap",
+      "gap": "10px 30px",
+      "height": "100%",
+      "justifyContent": "flex-start",
+      "maxHeight": "auto",
+    }
+  }
+>
+  <h1
+    className="heading color-base size-md weight-bold"
+  >
+    Consent doubt Tuckborough challenge destroying.
+  </h1>
+</div>
+`;
+
+exports[`Storyshots Atoms/Heading Inline 1`] = `
+<div
+  style={
+    Object {
+      "alignContent": "flex-start",
+      "display": "flex",
+      "flexDirection": "column",
+      "flexWrap": "wrap",
+      "gap": "10px 30px",
+      "height": "100%",
+      "justifyContent": "flex-start",
+      "maxHeight": "auto",
+    }
+  }
+>
+  <h1
+    className="heading color-base size-md weight-bold is-inline"
+  >
+    Consent doubt Tuckborough challenge destroying.
+  </h1>
+</div>
+`;
+
+exports[`Storyshots Atoms/Heading Sizes 1`] = `
+<div
+  style={
+    Object {
+      "alignContent": "flex-start",
+      "display": "flex",
+      "flexDirection": "column",
+      "flexWrap": "wrap",
+      "gap": "10px 30px",
+      "height": "100%",
+      "justifyContent": "flex-start",
+      "maxHeight": "auto",
+    }
+  }
+>
+  <h1
+    className="heading color-base size-xs weight-bold"
+  >
+    Consent doubt Tuckborough challenge destroying.
+  </h1>
+  <h1
+    className="heading color-base size-sm weight-bold"
+  >
+    Consent doubt Tuckborough challenge destroying.
+  </h1>
+  <h1
+    className="heading color-base size-md weight-bold"
+  >
+    Consent doubt Tuckborough challenge destroying.
+  </h1>
+  <h1
+    className="heading color-base size-lg weight-bold"
+  >
+    Consent doubt Tuckborough challenge destroying.
+  </h1>
+  <h1
+    className="heading color-base size-xl weight-bold"
+  >
+    Consent doubt Tuckborough challenge destroying.
+  </h1>
+  <h1
+    className="heading color-base size-2xl weight-bold"
+  >
+    Consent doubt Tuckborough challenge destroying.
+  </h1>
+</div>
+`;
+
+exports[`Storyshots Atoms/Heading Weights 1`] = `
+<div
+  style={
+    Object {
+      "alignContent": "flex-start",
+      "display": "flex",
+      "flexDirection": "column",
+      "flexWrap": "wrap",
+      "gap": "10px 30px",
+      "height": "100%",
+      "justifyContent": "flex-start",
+      "maxHeight": "auto",
+    }
+  }
+>
+  <h1
+    className="heading color-base size-md weight-light"
+  >
+    Consent doubt Tuckborough challenge destroying.
+  </h1>
+  <h1
+    className="heading color-base size-md weight-normal"
+  >
+    Consent doubt Tuckborough challenge destroying.
+  </h1>
+  <h1
+    className="heading color-base size-md weight-bold"
+  >
+    Consent doubt Tuckborough challenge destroying.
+  </h1>
+</div>
+`;

package/atoms/Heading/constants.js

@@ -0,0 +1,5 @@
+export const options = {
+  colors: ['base', 'primary', 'tertiary', 'inverted'],
+  sizes: ['xs', 'sm', 'md', 'lg', 'xl', '2xl'],
+  weights: ['light', 'normal', 'bold'],
+}

package/atoms/Heading/index.js

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