imbric-theme 0.1.1

package/molecules/Error/Error.js

@@ -0,0 +1,35 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import styles from './Error.module.css'
+import withStyles from '../../hocs/withStyles'
+
+import Spacer from '../../layout/Spacer'
+import Paragraph from '../../atoms/Paragraph'
+import Heading from '../../atoms/Heading'
+import Icon from '../../atoms/Icon'
+
+export const Error = ({ title, children, getStyles }) => {
+  return (
+    <div className={getStyles('error')}>
+      <Icon className="icon-warning" name="warning" size="md" />
+      <Spacer.Horizontal size="sm" />
+      <div>
+        {title && <Heading>{title}</Heading>}
+        <Paragraph>{children}</Paragraph>
+      </div>
+    </div>
+  )
+}
+
+Error.propTypes = {
+  children: PropTypes.node.isRequired,
+  getStyles: PropTypes.func.isRequired,
+  title: PropTypes.string,
+}
+
+Error.defaultProps = {
+  getStyles: () => {},
+}
+
+export default withStyles(styles)(Error)

package/molecules/Error/Error.module.css

@@ -0,0 +1,11 @@
+.error {
+  display: flex;
+  padding: 10px 20px;
+  border-top: 4px solid var(--color-red-500);
+  background: var(--color-red-200);
+  color: var(--color-red-800);
+}
+
+.error :global(.icon-warning) {
+  margin-top: -4px;
+}

package/molecules/Error/Error.stories.js

@@ -0,0 +1,18 @@
+import { Error, styles } from '.'
+
+import { getTemplate } from '../../helpers/storybook'
+
+const Template = getTemplate(Error, styles)
+
+export default {
+  title: 'Molecules/Error',
+  component: Error,
+  args: {
+    children:
+      "Meets counts consumed 200 Meriadoc tombs rabble noble crash thread. Another kind Imladris. Dump each Kingdom mere other's by blame ugly sending bestow mist adventure.",
+  },
+}
+
+export const Default = Template.bind({})
+export const Title = Template.bind({})
+Title.args = { title: 'Lindir glowers saw 111th utter.' }

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

@@ -0,0 +1,134 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Molecules/Error 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="error"
+  >
+    <div
+      className="icon-warning icon color-base size-md background-transparent"
+      style={
+        Object {
+          "height": 35,
+          "width": 35,
+        }
+      }
+    >
+      <svg
+        height={35}
+        viewBox="0 0 20 20"
+        width={35}
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          clipRule="evenodd"
+          d="M10 20C4.48612 20 0 15.5139 0 10C0 4.48612 4.48612 0 10 0C15.5139 0 20 4.48612 20 10C20 15.5139 15.5139 20 10 20ZM10 1.09864C5.09155 1.09864 1.09864 5.09155 1.09864 10C1.09864 14.9084 5.09155 18.9014 10 18.9014C14.9084 18.9014 18.9014 14.9084 18.9014 10C18.9014 5.09155 14.9084 1.09864 10 1.09864Z"
+          fillRule="evenodd"
+        />
+        <path
+          d="M10.7837 11.8579H9.25293L9.08447 4.33594H10.9595L10.7837 11.8579ZM9.0332 14.1577C9.0332 13.8794 9.12354 13.6499 9.3042 13.4692C9.48486 13.2837 9.73145 13.1909 10.0439 13.1909C10.3564 13.1909 10.603 13.2837 10.7837 13.4692C10.9644 13.6499 11.0547 13.8794 11.0547 14.1577C11.0547 14.4263 10.9668 14.6509 10.791 14.8315C10.6152 15.0122 10.3662 15.1025 10.0439 15.1025C9.72168 15.1025 9.47266 15.0122 9.29688 14.8315C9.12109 14.6509 9.0332 14.4263 9.0332 14.1577Z"
+        />
+      </svg>
+    </div>
+    <div
+      className="spacer horizontal"
+      style={
+        Object {
+          "height": "100%",
+          "maxHeight": "auto",
+          "width": 15,
+        }
+      }
+    />
+    <div>
+      <p
+        className="paragraph color-base size-md weight-normal"
+      >
+        Meets counts consumed 200 Meriadoc tombs rabble noble crash thread. Another kind Imladris. Dump each Kingdom mere other's by blame ugly sending bestow mist adventure.
+      </p>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Molecules/Error Title 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="error"
+  >
+    <div
+      className="icon-warning icon color-base size-md background-transparent"
+      style={
+        Object {
+          "height": 35,
+          "width": 35,
+        }
+      }
+    >
+      <svg
+        height={35}
+        viewBox="0 0 20 20"
+        width={35}
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          clipRule="evenodd"
+          d="M10 20C4.48612 20 0 15.5139 0 10C0 4.48612 4.48612 0 10 0C15.5139 0 20 4.48612 20 10C20 15.5139 15.5139 20 10 20ZM10 1.09864C5.09155 1.09864 1.09864 5.09155 1.09864 10C1.09864 14.9084 5.09155 18.9014 10 18.9014C14.9084 18.9014 18.9014 14.9084 18.9014 10C18.9014 5.09155 14.9084 1.09864 10 1.09864Z"
+          fillRule="evenodd"
+        />
+        <path
+          d="M10.7837 11.8579H9.25293L9.08447 4.33594H10.9595L10.7837 11.8579ZM9.0332 14.1577C9.0332 13.8794 9.12354 13.6499 9.3042 13.4692C9.48486 13.2837 9.73145 13.1909 10.0439 13.1909C10.3564 13.1909 10.603 13.2837 10.7837 13.4692C10.9644 13.6499 11.0547 13.8794 11.0547 14.1577C11.0547 14.4263 10.9668 14.6509 10.791 14.8315C10.6152 15.0122 10.3662 15.1025 10.0439 15.1025C9.72168 15.1025 9.47266 15.0122 9.29688 14.8315C9.12109 14.6509 9.0332 14.4263 9.0332 14.1577Z"
+        />
+      </svg>
+    </div>
+    <div
+      className="spacer horizontal"
+      style={
+        Object {
+          "height": "100%",
+          "maxHeight": "auto",
+          "width": 15,
+        }
+      }
+    />
+    <div>
+      <h1
+        className="heading color-base size-md weight-bold"
+      >
+        Lindir glowers saw 111th utter.
+      </h1>
+      <p
+        className="paragraph color-base size-md weight-normal"
+      >
+        Meets counts consumed 200 Meriadoc tombs rabble noble crash thread. Another kind Imladris. Dump each Kingdom mere other's by blame ugly sending bestow mist adventure.
+      </p>
+    </div>
+  </div>
+</div>
+`;

package/molecules/Error/index.js

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

package/molecules/IconLabel/IconLabel.js

@@ -0,0 +1,83 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import styles from './IconLabel.module.css'
+import withStyles from '../../hocs/withStyles'
+
+import Icon from '../../atoms/Icon'
+import Paragraph from '../../atoms/Paragraph'
+
+import { options } from './constants'
+import Spacer from '../../layout/Spacer'
+
+const handleClick = ({ onClick }) => (event) => {
+  onClick(event)
+}
+
+const sizesMap = {
+  sm: {
+    icon: 'sm',
+    paragraph: 'xs',
+  },
+  md: {
+    icon: 'md',
+    paragraph: 'sm',
+  },
+}
+
+export const IconLabel = ({
+  getStyles,
+  icon,
+  label,
+  onClick,
+  isClickable,
+  direction,
+  isActive,
+  size,
+}) => {
+  return (
+    <div
+      className={getStyles('icon-label', {
+        'is-clickable': isClickable || !!onClick,
+        [`direction-${direction}`]: direction,
+      })}
+      onClick={onClick && handleClick({ onClick })}
+    >
+      <Icon
+        name={icon}
+        color={isActive ? 'primary' : 'base'}
+        background={isActive ? 'highlight' : 'transparent'}
+        size={sizesMap[size].icon}
+      ></Icon>
+      {direction === 'horizontal' && <Spacer.Horizontal size="xs" />}
+      <Paragraph
+        size={sizesMap[size].paragraph}
+        color={isActive ? 'primary' : 'base'}
+        isInline
+      >
+        {label}
+      </Paragraph>
+    </div>
+  )
+}
+
+IconLabel.propTypes = {
+  getStyles: PropTypes.func.isRequired,
+  icon: PropTypes.oneOf(options.icons).isRequired,
+  label: PropTypes.string.isRequired,
+  direction: PropTypes.oneOf(['vertical', 'horizontal']),
+  isClickable: PropTypes.bool,
+  onClick: PropTypes.func,
+  isActive: PropTypes.bool,
+  size: PropTypes.oneOf(options.sizes),
+}
+
+IconLabel.defaultProps = {
+  direction: 'vertical',
+  size: 'sm',
+  isActive: false,
+  getStyles: () => {},
+  onClick: () => {},
+}
+
+export default withStyles(styles)(IconLabel)

package/molecules/IconLabel/IconLabel.module.css

@@ -0,0 +1,16 @@
+.icon-label {
+  display: flex;
+  align-items: center;
+}
+
+.direction-vertical {
+  flex-direction: column;
+}
+
+.direction-horizontal {
+  flex-direction: row;
+}
+
+.is-clickable {
+  cursor: pointer;
+}

package/molecules/IconLabel/IconLabel.stories.js

@@ -0,0 +1,25 @@
+import { IconLabel, styles, options } from '.'
+
+import { getTemplate, getOptionsArgTypes } from '../../helpers/storybook'
+
+const Template = getTemplate(IconLabel, styles)
+
+export default {
+  title: 'Molecules/IconLabel',
+  component: IconLabel,
+  args: { icon: 'user', label: 'User' },
+  argTypes: {
+    icon: getOptionsArgTypes(options.icons),
+  },
+}
+
+export const Default = Template.bind({})
+
+export const Clickable = Template.bind({})
+Clickable.args = { isClickable: true }
+
+export const Active = Template.bind({})
+Active.args = { isActive: true }
+
+export const Horizontal = Template.bind({})
+Horizontal.args = { direction: 'horizontal' }

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

@@ -0,0 +1,211 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Molecules/IconLabel Active 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-label is-clickable direction-vertical"
+    onClick={[Function]}
+  >
+    <div
+      className="icon color-primary size-sm background-highlight"
+      style={
+        Object {
+          "height": 25,
+          "width": 25,
+        }
+      }
+    >
+      <svg
+        height={25}
+        viewBox="0 0 14 15"
+        width={25}
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          clipRule="evenodd"
+          d="M1.01693 15L0 14.5538C0.308723 13.8561 1.22056 13.4481 2.2775 12.975C3.29682 12.5187 4.56575 11.9509 4.56575 11.2777V10.3614C4.20448 10.0594 3.59241 9.41 3.49627 8.43355C3.20367 8.15831 2.71819 7.59711 2.71819 6.90245C2.71819 6.48066 2.88539 6.14048 3.03229 5.92422C2.94272 5.47204 2.77432 4.52538 2.77432 3.83073C2.77432 1.50369 4.39855 0 6.91192 0C7.63327 0 8.50928 0.193026 8.99714 0.714314C10.1365 0.914489 11.0501 2.26031 11.0501 3.83073C11.0501 4.83815 10.8728 5.66685 10.7659 6.07673C10.8847 6.2775 11.0131 6.57538 11.0131 6.92092C11.0131 7.70196 10.6178 8.20716 10.2488 8.47704C10.1443 9.43979 9.59429 10.0606 9.25869 10.3549V11.2777C9.25869 11.8502 10.2989 12.2351 11.3051 12.6074C12.4492 13.0304 13.6328 13.4683 14 14.4257L12.9616 14.8213C12.7753 14.3328 11.7888 13.9681 10.9187 13.6464C9.62056 13.1657 8.1486 12.6211 8.1486 11.2777V9.77997L8.40776 9.61732C8.43404 9.60005 9.15598 9.11629 9.15598 8.14997V7.77524L9.50471 7.63583C9.56323 7.60902 9.90241 7.43089 9.90241 6.92092C9.90241 6.76483 9.78298 6.59028 9.74118 6.54142L9.53875 6.30431L9.63191 6.00226C9.63489 5.99273 9.94003 5.0562 9.94003 3.83073C9.94003 2.78517 9.33931 1.79681 8.70335 1.79681H8.38447L8.22384 1.52216C8.10621 1.32139 7.607 1.10811 6.91192 1.10811C5.01659 1.10811 3.88441 2.12567 3.88441 3.83073C3.88441 4.63619 4.16746 5.93316 4.17044 5.94626L4.23613 6.24653L4.01638 6.461C4.01638 6.461 3.82828 6.65939 3.82828 6.90245C3.82828 7.20927 4.19731 7.59115 4.37586 7.72818L4.59202 7.89439L4.59382 8.16844C4.59382 9.08114 5.38324 9.59588 5.41727 9.61732L5.67285 9.78056L5.67584 11.2777C5.67584 12.6688 4.11192 13.3688 2.73133 13.986C2.06492 14.2839 1.15308 14.6926 1.01693 15Z"
+          fillRule="evenodd"
+        />
+      </svg>
+    </div>
+    <p
+      className="paragraph color-primary size-xs weight-normal is-inline"
+    >
+      User
+    </p>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Molecules/IconLabel 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="icon-label is-clickable direction-vertical"
+    onClick={[Function]}
+  >
+    <div
+      className="icon color-base size-sm background-transparent"
+      style={
+        Object {
+          "height": 25,
+          "width": 25,
+        }
+      }
+    >
+      <svg
+        height={25}
+        viewBox="0 0 14 15"
+        width={25}
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          clipRule="evenodd"
+          d="M1.01693 15L0 14.5538C0.308723 13.8561 1.22056 13.4481 2.2775 12.975C3.29682 12.5187 4.56575 11.9509 4.56575 11.2777V10.3614C4.20448 10.0594 3.59241 9.41 3.49627 8.43355C3.20367 8.15831 2.71819 7.59711 2.71819 6.90245C2.71819 6.48066 2.88539 6.14048 3.03229 5.92422C2.94272 5.47204 2.77432 4.52538 2.77432 3.83073C2.77432 1.50369 4.39855 0 6.91192 0C7.63327 0 8.50928 0.193026 8.99714 0.714314C10.1365 0.914489 11.0501 2.26031 11.0501 3.83073C11.0501 4.83815 10.8728 5.66685 10.7659 6.07673C10.8847 6.2775 11.0131 6.57538 11.0131 6.92092C11.0131 7.70196 10.6178 8.20716 10.2488 8.47704C10.1443 9.43979 9.59429 10.0606 9.25869 10.3549V11.2777C9.25869 11.8502 10.2989 12.2351 11.3051 12.6074C12.4492 13.0304 13.6328 13.4683 14 14.4257L12.9616 14.8213C12.7753 14.3328 11.7888 13.9681 10.9187 13.6464C9.62056 13.1657 8.1486 12.6211 8.1486 11.2777V9.77997L8.40776 9.61732C8.43404 9.60005 9.15598 9.11629 9.15598 8.14997V7.77524L9.50471 7.63583C9.56323 7.60902 9.90241 7.43089 9.90241 6.92092C9.90241 6.76483 9.78298 6.59028 9.74118 6.54142L9.53875 6.30431L9.63191 6.00226C9.63489 5.99273 9.94003 5.0562 9.94003 3.83073C9.94003 2.78517 9.33931 1.79681 8.70335 1.79681H8.38447L8.22384 1.52216C8.10621 1.32139 7.607 1.10811 6.91192 1.10811C5.01659 1.10811 3.88441 2.12567 3.88441 3.83073C3.88441 4.63619 4.16746 5.93316 4.17044 5.94626L4.23613 6.24653L4.01638 6.461C4.01638 6.461 3.82828 6.65939 3.82828 6.90245C3.82828 7.20927 4.19731 7.59115 4.37586 7.72818L4.59202 7.89439L4.59382 8.16844C4.59382 9.08114 5.38324 9.59588 5.41727 9.61732L5.67285 9.78056L5.67584 11.2777C5.67584 12.6688 4.11192 13.3688 2.73133 13.986C2.06492 14.2839 1.15308 14.6926 1.01693 15Z"
+          fillRule="evenodd"
+        />
+      </svg>
+    </div>
+    <p
+      className="paragraph color-base size-xs weight-normal is-inline"
+    >
+      User
+    </p>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Molecules/IconLabel 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="icon-label is-clickable direction-vertical"
+    onClick={[Function]}
+  >
+    <div
+      className="icon color-base size-sm background-transparent"
+      style={
+        Object {
+          "height": 25,
+          "width": 25,
+        }
+      }
+    >
+      <svg
+        height={25}
+        viewBox="0 0 14 15"
+        width={25}
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          clipRule="evenodd"
+          d="M1.01693 15L0 14.5538C0.308723 13.8561 1.22056 13.4481 2.2775 12.975C3.29682 12.5187 4.56575 11.9509 4.56575 11.2777V10.3614C4.20448 10.0594 3.59241 9.41 3.49627 8.43355C3.20367 8.15831 2.71819 7.59711 2.71819 6.90245C2.71819 6.48066 2.88539 6.14048 3.03229 5.92422C2.94272 5.47204 2.77432 4.52538 2.77432 3.83073C2.77432 1.50369 4.39855 0 6.91192 0C7.63327 0 8.50928 0.193026 8.99714 0.714314C10.1365 0.914489 11.0501 2.26031 11.0501 3.83073C11.0501 4.83815 10.8728 5.66685 10.7659 6.07673C10.8847 6.2775 11.0131 6.57538 11.0131 6.92092C11.0131 7.70196 10.6178 8.20716 10.2488 8.47704C10.1443 9.43979 9.59429 10.0606 9.25869 10.3549V11.2777C9.25869 11.8502 10.2989 12.2351 11.3051 12.6074C12.4492 13.0304 13.6328 13.4683 14 14.4257L12.9616 14.8213C12.7753 14.3328 11.7888 13.9681 10.9187 13.6464C9.62056 13.1657 8.1486 12.6211 8.1486 11.2777V9.77997L8.40776 9.61732C8.43404 9.60005 9.15598 9.11629 9.15598 8.14997V7.77524L9.50471 7.63583C9.56323 7.60902 9.90241 7.43089 9.90241 6.92092C9.90241 6.76483 9.78298 6.59028 9.74118 6.54142L9.53875 6.30431L9.63191 6.00226C9.63489 5.99273 9.94003 5.0562 9.94003 3.83073C9.94003 2.78517 9.33931 1.79681 8.70335 1.79681H8.38447L8.22384 1.52216C8.10621 1.32139 7.607 1.10811 6.91192 1.10811C5.01659 1.10811 3.88441 2.12567 3.88441 3.83073C3.88441 4.63619 4.16746 5.93316 4.17044 5.94626L4.23613 6.24653L4.01638 6.461C4.01638 6.461 3.82828 6.65939 3.82828 6.90245C3.82828 7.20927 4.19731 7.59115 4.37586 7.72818L4.59202 7.89439L4.59382 8.16844C4.59382 9.08114 5.38324 9.59588 5.41727 9.61732L5.67285 9.78056L5.67584 11.2777C5.67584 12.6688 4.11192 13.3688 2.73133 13.986C2.06492 14.2839 1.15308 14.6926 1.01693 15Z"
+          fillRule="evenodd"
+        />
+      </svg>
+    </div>
+    <p
+      className="paragraph color-base size-xs weight-normal is-inline"
+    >
+      User
+    </p>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Molecules/IconLabel Horizontal 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-label is-clickable direction-horizontal"
+    onClick={[Function]}
+  >
+    <div
+      className="icon color-base size-sm background-transparent"
+      style={
+        Object {
+          "height": 25,
+          "width": 25,
+        }
+      }
+    >
+      <svg
+        height={25}
+        viewBox="0 0 14 15"
+        width={25}
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          clipRule="evenodd"
+          d="M1.01693 15L0 14.5538C0.308723 13.8561 1.22056 13.4481 2.2775 12.975C3.29682 12.5187 4.56575 11.9509 4.56575 11.2777V10.3614C4.20448 10.0594 3.59241 9.41 3.49627 8.43355C3.20367 8.15831 2.71819 7.59711 2.71819 6.90245C2.71819 6.48066 2.88539 6.14048 3.03229 5.92422C2.94272 5.47204 2.77432 4.52538 2.77432 3.83073C2.77432 1.50369 4.39855 0 6.91192 0C7.63327 0 8.50928 0.193026 8.99714 0.714314C10.1365 0.914489 11.0501 2.26031 11.0501 3.83073C11.0501 4.83815 10.8728 5.66685 10.7659 6.07673C10.8847 6.2775 11.0131 6.57538 11.0131 6.92092C11.0131 7.70196 10.6178 8.20716 10.2488 8.47704C10.1443 9.43979 9.59429 10.0606 9.25869 10.3549V11.2777C9.25869 11.8502 10.2989 12.2351 11.3051 12.6074C12.4492 13.0304 13.6328 13.4683 14 14.4257L12.9616 14.8213C12.7753 14.3328 11.7888 13.9681 10.9187 13.6464C9.62056 13.1657 8.1486 12.6211 8.1486 11.2777V9.77997L8.40776 9.61732C8.43404 9.60005 9.15598 9.11629 9.15598 8.14997V7.77524L9.50471 7.63583C9.56323 7.60902 9.90241 7.43089 9.90241 6.92092C9.90241 6.76483 9.78298 6.59028 9.74118 6.54142L9.53875 6.30431L9.63191 6.00226C9.63489 5.99273 9.94003 5.0562 9.94003 3.83073C9.94003 2.78517 9.33931 1.79681 8.70335 1.79681H8.38447L8.22384 1.52216C8.10621 1.32139 7.607 1.10811 6.91192 1.10811C5.01659 1.10811 3.88441 2.12567 3.88441 3.83073C3.88441 4.63619 4.16746 5.93316 4.17044 5.94626L4.23613 6.24653L4.01638 6.461C4.01638 6.461 3.82828 6.65939 3.82828 6.90245C3.82828 7.20927 4.19731 7.59115 4.37586 7.72818L4.59202 7.89439L4.59382 8.16844C4.59382 9.08114 5.38324 9.59588 5.41727 9.61732L5.67285 9.78056L5.67584 11.2777C5.67584 12.6688 4.11192 13.3688 2.73133 13.986C2.06492 14.2839 1.15308 14.6926 1.01693 15Z"
+          fillRule="evenodd"
+        />
+      </svg>
+    </div>
+    <div
+      className="spacer horizontal"
+      style={
+        Object {
+          "height": "100%",
+          "maxHeight": "auto",
+          "width": 5,
+        }
+      }
+    />
+    <p
+      className="paragraph color-base size-xs weight-normal is-inline"
+    >
+      User
+    </p>
+  </div>
+</div>
+`;

package/molecules/IconLabel/constants.js

@@ -0,0 +1,6 @@
+import { options as iconOptions } from '../../atoms/Icon/constants'
+
+export const options = {
+  icons: iconOptions.names,
+  sizes: ['sm', 'md'],
+}

package/molecules/IconLabel/index.js

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

package/molecules/LoadingError/LoadingError.js

@@ -0,0 +1,31 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import Loading from '../../atoms/Loading'
+import Error from '../Error'
+
+export const LoadingError = ({
+  children,
+  isLoading,
+  errorMessage,
+  errorTitle,
+}) => {
+  if (isLoading) {
+    return <Loading isShown={isLoading} />
+  }
+
+  if (errorMessage) {
+    return <Error title={errorTitle}>{errorMessage}</Error>
+  }
+
+  return <>{children}</>
+}
+
+LoadingError.propTypes = {
+  children: PropTypes.node.isRequired,
+  isLoading: PropTypes.bool,
+  errorMessage: PropTypes.string,
+  errorTitle: PropTypes.string,
+}
+
+export default LoadingError

package/molecules/LoadingError/LoadingError.stories.js

@@ -0,0 +1,24 @@
+import { LoadingError } from '.'
+
+import { getTemplate } from '../../helpers/storybook'
+
+const Template = getTemplate(LoadingError)
+
+export default {
+  title: 'Molecules/LoadingError',
+  component: LoadingError,
+  args: {
+    children:
+      "Exile ruins brook Angmar inn wars retaken. Swiftly attacks Grma merely! Opinion Eorlingas inquisitive windlance? You are full of surprises, Master Baggins. Houses warning garden noble innocent silver charm numerous thirsty came Treebeard's warm.",
+  },
+}
+
+export const Default = Template.bind({})
+
+export const Loading = Template.bind({})
+Loading.args = { isLoading: true }
+
+export const Error = Template.bind({})
+Error.args = {
+  errorMessage: 'ext Grimbold sneak-thief cheekbones myth overfond task',
+}