imbric-theme 0.1.0

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

@@ -0,0 +1,239 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Atoms/Modal Closable 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="backdrop is-playground"
+    onClick={[Function]}
+  >
+    <div
+      className="modal type-primary"
+      onClick={[Function]}
+    >
+      <div
+        className="heading"
+      >
+        <div
+          className="icon color-inverted size-md background-muted is-clickable"
+          onClick={[Function]}
+          style={
+            Object {
+              "height": 35,
+              "width": 35,
+            }
+          }
+        >
+          <svg
+            height={35}
+            viewBox="-3 0 20 20"
+            width={35}
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              clipRule="evenodd"
+              d="M9.707 19.414L0 9.707L9.707 0L11.121 1.414L2.828 9.707L11.121 18L9.707 19.414Z"
+              fillRule="evenodd"
+            />
+          </svg>
+        </div>
+      </div>
+      <div
+        className="container"
+      >
+        Successful boar world's somebody herbs helpful spiders Samwise Gamgee helps unlost circles guard? Investment Thofin folly? Troublemaker minutes moldy Rivendell eve late traveling around crescent fault never naught
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Atoms/Modal 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="backdrop is-playground"
+    onClick={[Function]}
+  >
+    <div
+      className="modal type-primary"
+      onClick={[Function]}
+    >
+      <div
+        className="heading"
+      />
+      <div
+        className="container"
+      >
+        Successful boar world's somebody herbs helpful spiders Samwise Gamgee helps unlost circles guard? Investment Thofin folly? Troublemaker minutes moldy Rivendell eve late traveling around crescent fault never naught
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Atoms/Modal Secondary Action 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="backdrop is-playground"
+    onClick={[Function]}
+  >
+    <div
+      className="modal type-primary"
+      onClick={[Function]}
+    >
+      <div
+        className="heading"
+      >
+        <div
+          className="icon color-inverted size-md background-muted is-clickable"
+          onClick={[Function]}
+          style={
+            Object {
+              "height": 35,
+              "width": 35,
+            }
+          }
+        >
+          <svg
+            height={35}
+            viewBox="-3 0 20 20"
+            width={35}
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              clipRule="evenodd"
+              d="M9.707 19.414L0 9.707L9.707 0L11.121 1.414L2.828 9.707L11.121 18L9.707 19.414Z"
+              fillRule="evenodd"
+            />
+          </svg>
+        </div>
+        <div
+          className="icon color-inverted size-md background-muted is-clickable"
+          onClick={[Function]}
+          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>
+      <div
+        className="container"
+      >
+        Successful boar world's somebody herbs helpful spiders Samwise Gamgee helps unlost circles guard? Investment Thofin folly? Troublemaker minutes moldy Rivendell eve late traveling around crescent fault never naught
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Atoms/Modal Types 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="backdrop is-playground"
+    onClick={[Function]}
+  >
+    <div
+      className="modal type-primary"
+      onClick={[Function]}
+    >
+      <div
+        className="heading"
+      />
+      <div
+        className="container"
+      >
+        Successful boar world's somebody herbs helpful spiders Samwise Gamgee helps unlost circles guard? Investment Thofin folly? Troublemaker minutes moldy Rivendell eve late traveling around crescent fault never naught
+      </div>
+    </div>
+  </div>
+  <div
+    className="backdrop is-playground"
+    onClick={[Function]}
+  >
+    <div
+      className="modal type-secondary"
+      onClick={[Function]}
+    >
+      <div
+        className="heading"
+      />
+      <div
+        className="container"
+      >
+        Successful boar world's somebody herbs helpful spiders Samwise Gamgee helps unlost circles guard? Investment Thofin folly? Troublemaker minutes moldy Rivendell eve late traveling around crescent fault never naught
+      </div>
+    </div>
+  </div>
+</div>
+`;

package/atoms/Modal/constants.js

@@ -0,0 +1 @@
+export const options = { types: ['primary', 'secondary'] }

package/atoms/Modal/index.js

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

package/atoms/Paragraph/Paragraph.js

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

package/atoms/Paragraph/Paragraph.module.css

@@ -0,0 +1,72 @@
+.paragraph {
+  width: 100%;
+  margin-block-start: 0em;
+  margin-block-end: 0em;
+  margin-inline-start: 0px;
+  margin-inline-end: 0px;
+}
+
+.color-base {
+  color: var(--color-font-base);
+}
+
+.color-inverted {
+  color: var(--color-font-inverted);
+}
+
+.color-muted {
+  color: var(--color-font-muted);
+}
+
+.color-primary {
+  color: var(--color-primary);
+}
+
+.color-tertiary {
+  color: var(--color-tertiary);
+}
+
+.size-xs {
+  font-size: var(--paragraph-font-size-xs);
+}
+
+.size-sm {
+  font-size: var(--paragraph-font-size-sm);
+}
+
+.size-md {
+  font-size: var(--paragraph-font-size-md);
+}
+
+.size-lg {
+  font-size: var(--paragraph-font-size-lg);
+}
+
+.weight-normal {
+  font-weight: var(--font-weight-normal);
+}
+
+.weight-medium {
+  font-weight: var(--font-weight-medium);
+}
+
+.weight-semibold {
+  font-weight: var(--font-weight-semibold);
+}
+
+.is-striked {
+  text-decoration: line-through;
+}
+
+.is-inline {
+  display: inline-block;
+  max-width: max-content;
+}
+
+.is-monospace {
+  font-family: var(--font-family-mono);
+}
+
+.is-centered {
+  text-align: center;
+}

package/atoms/Paragraph/Paragraph.stories.js

@@ -0,0 +1,52 @@
+import { Paragraph, options, styles } from '.'
+
+import {
+  getTemplate,
+  getListTemplate,
+  getOptionsArgTypes,
+} from '../../helpers/storybook'
+
+const Template = getTemplate(Paragraph, styles)
+const ListTemplate = getListTemplate(Paragraph, styles)
+
+export default {
+  title: 'Atoms/Paragraph',
+  component: Paragraph,
+  args: {
+    children:
+      'But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness.',
+  },
+  argTypes: {
+    color: getOptionsArgTypes(options.colors),
+    size: getOptionsArgTypes(options.sizes),
+    weight: getOptionsArgTypes(options.weights),
+    children: { control: 'text' },
+  },
+}
+
+export const Default = Template.bind({})
+
+export const Striked = Template.bind({})
+Striked.args = { isStriked: true }
+
+export const Inline = Template.bind({})
+Inline.args = { isInline: true, children: 'Swords are no more.' }
+
+export const Centered = Template.bind({})
+Centered.args = {
+  isCentered: true,
+  children:
+    'Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.',
+}
+
+export const Monospace = Template.bind({})
+Monospace.args = { isMonospace: true }
+
+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/Paragraph/__snapshots__/Paragraph.stories.js.snap

@@ -0,0 +1,230 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Atoms/Paragraph Centered 1`] = `
+<div
+  style={
+    Object {
+      "alignContent": "flex-start",
+      "display": "flex",
+      "flexDirection": "column",
+      "flexWrap": "wrap",
+      "gap": "10px 30px",
+      "height": "100%",
+      "justifyContent": "flex-start",
+      "maxHeight": "auto",
+    }
+  }
+>
+  <p
+    className="paragraph color-base size-md weight-normal is-centered"
+  >
+    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
+  </p>
+</div>
+`;
+
+exports[`Storyshots Atoms/Paragraph Colors 1`] = `
+<div
+  style={
+    Object {
+      "alignContent": "flex-start",
+      "display": "flex",
+      "flexDirection": "column",
+      "flexWrap": "wrap",
+      "gap": "10px 30px",
+      "height": "100%",
+      "justifyContent": "flex-start",
+      "maxHeight": "auto",
+    }
+  }
+>
+  <p
+    className="paragraph color-base size-md weight-normal"
+  >
+    But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness.
+  </p>
+  <p
+    className="paragraph color-muted size-md weight-normal"
+  >
+    But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness.
+  </p>
+  <p
+    className="paragraph color-inverted size-md weight-normal"
+  >
+    But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness.
+  </p>
+  <p
+    className="paragraph color-primary size-md weight-normal"
+  >
+    But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness.
+  </p>
+  <p
+    className="paragraph color-tertiary size-md weight-normal"
+  >
+    But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness.
+  </p>
+</div>
+`;
+
+exports[`Storyshots Atoms/Paragraph Default 1`] = `
+<div
+  style={
+    Object {
+      "alignContent": "flex-start",
+      "display": "flex",
+      "flexDirection": "column",
+      "flexWrap": "wrap",
+      "gap": "10px 30px",
+      "height": "100%",
+      "justifyContent": "flex-start",
+      "maxHeight": "auto",
+    }
+  }
+>
+  <p
+    className="paragraph color-base size-md weight-normal"
+  >
+    But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness.
+  </p>
+</div>
+`;
+
+exports[`Storyshots Atoms/Paragraph Inline 1`] = `
+<div
+  style={
+    Object {
+      "alignContent": "flex-start",
+      "display": "flex",
+      "flexDirection": "column",
+      "flexWrap": "wrap",
+      "gap": "10px 30px",
+      "height": "100%",
+      "justifyContent": "flex-start",
+      "maxHeight": "auto",
+    }
+  }
+>
+  <p
+    className="paragraph color-base size-md weight-normal is-inline"
+  >
+    Swords are no more.
+  </p>
+</div>
+`;
+
+exports[`Storyshots Atoms/Paragraph Monospace 1`] = `
+<div
+  style={
+    Object {
+      "alignContent": "flex-start",
+      "display": "flex",
+      "flexDirection": "column",
+      "flexWrap": "wrap",
+      "gap": "10px 30px",
+      "height": "100%",
+      "justifyContent": "flex-start",
+      "maxHeight": "auto",
+    }
+  }
+>
+  <p
+    className="paragraph color-base size-md weight-normal is-monospace"
+  >
+    But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness.
+  </p>
+</div>
+`;
+
+exports[`Storyshots Atoms/Paragraph Sizes 1`] = `
+<div
+  style={
+    Object {
+      "alignContent": "flex-start",
+      "display": "flex",
+      "flexDirection": "column",
+      "flexWrap": "wrap",
+      "gap": "10px 30px",
+      "height": "100%",
+      "justifyContent": "flex-start",
+      "maxHeight": "auto",
+    }
+  }
+>
+  <p
+    className="paragraph color-base size-xs weight-normal"
+  >
+    But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness.
+  </p>
+  <p
+    className="paragraph color-base size-sm weight-normal"
+  >
+    But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness.
+  </p>
+  <p
+    className="paragraph color-base size-md weight-normal"
+  >
+    But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness.
+  </p>
+  <p
+    className="paragraph color-base size-lg weight-normal"
+  >
+    But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness.
+  </p>
+</div>
+`;
+
+exports[`Storyshots Atoms/Paragraph Striked 1`] = `
+<div
+  style={
+    Object {
+      "alignContent": "flex-start",
+      "display": "flex",
+      "flexDirection": "column",
+      "flexWrap": "wrap",
+      "gap": "10px 30px",
+      "height": "100%",
+      "justifyContent": "flex-start",
+      "maxHeight": "auto",
+    }
+  }
+>
+  <p
+    className="paragraph color-base size-md weight-normal is-striked"
+  >
+    But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness.
+  </p>
+</div>
+`;
+
+exports[`Storyshots Atoms/Paragraph Weights 1`] = `
+<div
+  style={
+    Object {
+      "alignContent": "flex-start",
+      "display": "flex",
+      "flexDirection": "column",
+      "flexWrap": "wrap",
+      "gap": "10px 30px",
+      "height": "100%",
+      "justifyContent": "flex-start",
+      "maxHeight": "auto",
+    }
+  }
+>
+  <p
+    className="paragraph color-base size-md weight-normal"
+  >
+    But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness.
+  </p>
+  <p
+    className="paragraph color-base size-md weight-medium"
+  >
+    But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness.
+  </p>
+  <p
+    className="paragraph color-base size-md weight-semibold"
+  >
+    But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness.
+  </p>
+</div>
+`;

package/atoms/Paragraph/constants.js

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

package/atoms/Paragraph/index.js

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