imbric-theme 0.1.1

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

@@ -0,0 +1,109 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Molecules/LoadingError Default 1`] = `
+<div
+  style={
+    Object {
+      "alignContent": "flex-start",
+      "display": "flex",
+      "flexDirection": "column",
+      "flexWrap": "wrap",
+      "gap": "10px 30px",
+      "height": "100%",
+      "justifyContent": "flex-start",
+      "maxHeight": "auto",
+    }
+  }
+>
+  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.
+</div>
+`;
+
+exports[`Storyshots Molecules/LoadingError Error 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"
+      >
+        ext Grimbold sneak-thief cheekbones myth overfond task
+      </p>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Molecules/LoadingError Loading 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="container"
+  >
+    <div
+      className="loading is-shown"
+    />
+  </div>
+</div>
+`;

package/molecules/LoadingError/index.js

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

package/molecules/Score/Score.js

@@ -0,0 +1,61 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import styles from './Score.module.css'
+import withStyles from '../../hocs/withStyles'
+
+import Spacer from '../../layout/Spacer'
+import Paragraph from '../../atoms/Paragraph'
+
+import SadFace from './faces/sad.svg'
+import NormalFace from './faces/normal.svg'
+import HappyFace from './faces/happy.svg'
+
+const handleClickScore = ({ score, onClickScore }) => () => {
+  onClickScore({ score })
+}
+
+export const Score = ({ getStyles, onClickScore }) => {
+  return (
+    <div className={getStyles('score')}>
+      <div
+        className={getStyles('face')}
+        onClick={handleClickScore({ score: 0, onClickScore })}
+      >
+        <SadFace />
+        <Spacer.Vertical size="xs" />
+        <Paragraph>Frustrado</Paragraph>
+      </div>
+      <Spacer.Horizontal size="lg" />
+      <div
+        className={getStyles('face')}
+        onClick={handleClickScore({ score: 2.5, onClickScore })}
+      >
+        <NormalFace />
+        <Spacer.Vertical size="xs" />
+        <Paragraph>Normal</Paragraph>
+      </div>
+      <Spacer.Horizontal size="lg" />
+      <div
+        className={getStyles('face')}
+        onClick={handleClickScore({ score: 5, onClickScore })}
+      >
+        <HappyFace />
+        <Spacer.Vertical size="xs" />
+        <Paragraph>Muy motivado</Paragraph>
+      </div>
+    </div>
+  )
+}
+
+Score.propTypes = {
+  getStyles: PropTypes.func.isRequired,
+  onClickScore: PropTypes.func.isRequired,
+}
+
+Score.defaultProps = {
+  getStyles: () => {},
+  onClickScore: () => {},
+}
+
+export default withStyles(styles)(Score)

package/molecules/Score/Score.module.css

@@ -0,0 +1,11 @@
+.score {
+  display: flex;
+  justify-content: center;
+}
+
+.face {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  cursor: pointer;
+}

package/molecules/Score/Score.stories.js

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

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

@@ -0,0 +1,100 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Molecules/Score 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="score"
+  >
+    <div
+      className="face"
+      onClick={[Function]}
+    >
+      <SvgrURL />
+      <div
+        className="spacer vertical"
+        style={
+          Object {
+            "height": 5,
+          }
+        }
+      />
+      <p
+        className="paragraph color-base size-md weight-normal"
+      >
+        Frustrado
+      </p>
+    </div>
+    <div
+      className="spacer horizontal"
+      style={
+        Object {
+          "height": "100%",
+          "maxHeight": "auto",
+          "width": 40,
+        }
+      }
+    />
+    <div
+      className="face"
+      onClick={[Function]}
+    >
+      <SvgrURL />
+      <div
+        className="spacer vertical"
+        style={
+          Object {
+            "height": 5,
+          }
+        }
+      />
+      <p
+        className="paragraph color-base size-md weight-normal"
+      >
+        Normal
+      </p>
+    </div>
+    <div
+      className="spacer horizontal"
+      style={
+        Object {
+          "height": "100%",
+          "maxHeight": "auto",
+          "width": 40,
+        }
+      }
+    />
+    <div
+      className="face"
+      onClick={[Function]}
+    >
+      <SvgrURL />
+      <div
+        className="spacer vertical"
+        style={
+          Object {
+            "height": 5,
+          }
+        }
+      />
+      <p
+        className="paragraph color-base size-md weight-normal"
+      >
+        Muy motivado
+      </p>
+    </div>
+  </div>
+</div>
+`;

package/molecules/Score/faces/happy.svg

@@ -0,0 +1,7 @@
+<svg width="37" height="37" viewBox="0 0 37 37" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.5215 36.7731C28.7237 36.7731 36.9942 28.5789 36.9942 18.4709C36.9942 8.36288 28.7237 0.168701 18.5215 0.168701C8.31941 0.168701 0.0489502 8.36288 0.0489502 18.4709C0.0489502 28.5789 8.31941 36.7731 18.5215 36.7731Z" fill="#F9DF70"/>
+<path d="M25.4679 12.0657C23.1133 12.0657 21.1991 13.9622 21.1991 16.2951C21.1991 16.7605 21.5808 17.1386 22.0505 17.1386C22.5202 17.1386 22.9019 16.7605 22.9019 16.2951C22.9019 14.8989 24.0528 13.7586 25.462 13.7586C26.8712 13.7586 28.0221 14.8989 28.0221 16.2951C28.0221 16.7605 28.4038 17.1386 28.8735 17.1386C29.3432 17.1386 29.7249 16.7605 29.7249 16.2951C29.7367 13.9622 27.8225 12.0657 25.4679 12.0657Z" fill="#C6A20C"/>
+<path d="M14.3761 16.2893C14.3761 16.7547 14.7578 17.1329 15.2275 17.1329C15.6973 17.1329 16.0789 16.7547 16.0789 16.2893C16.0789 13.9565 14.1647 12.0599 11.8101 12.0599C9.45556 12.0599 7.54724 13.9623 7.54724 16.2893C7.54724 16.7547 7.9289 17.1329 8.39864 17.1329C8.86838 17.1329 9.25005 16.7547 9.25005 16.2893C9.25005 14.8931 10.4009 13.7529 11.8101 13.7529C13.2252 13.7529 14.3761 14.8931 14.3761 16.2893Z" fill="#C6A20C"/>
+<path d="M28.7443 20.4141C28.7443 26.0048 24.1702 30.5425 18.5216 30.5425C12.8729 30.5425 8.29883 26.0106 8.29883 20.4141H28.7443Z" fill="white"/>
+<path d="M28.7443 20.4141C28.7443 26.0048 24.1702 30.5425 18.5216 30.5425C12.8729 30.5425 8.29883 26.0106 8.29883 20.4141H28.7443Z" stroke="#C6A20C" stroke-width="1.68" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/molecules/Score/faces/normal.svg

@@ -0,0 +1,6 @@
+<svg width="38" height="37" viewBox="0 0 38 37" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.5655 36.6044C28.7676 36.6044 37.0381 28.4102 37.0381 18.3022C37.0381 8.19417 28.7676 0 18.5655 0C8.36336 0 0.0928955 8.19417 0.0928955 18.3022C0.0928955 28.4102 8.36336 36.6044 18.5655 36.6044Z" fill="#F9DF70"/>
+<path d="M12.2475 17.8484C13.6567 17.8484 14.8076 16.7082 14.8076 15.312C14.8076 13.9157 13.6567 12.7755 12.2475 12.7755C10.8382 12.7755 9.68738 13.9157 9.68738 15.312C9.68738 16.7082 10.8324 17.8484 12.2475 17.8484ZM12.2475 14.4626C12.7172 14.4626 13.0989 14.8407 13.0989 15.3061C13.0989 15.7716 12.7172 16.1497 12.2475 16.1497C11.7777 16.1497 11.3961 15.7716 11.3961 15.3061C11.3961 14.8407 11.7777 14.4626 12.2475 14.4626Z" fill="#C6A20C"/>
+<path d="M25.9052 12.7755C24.496 12.7755 23.3451 13.9157 23.3451 15.312C23.3451 16.7082 24.496 17.8484 25.9052 17.8484C27.3144 17.8484 28.4653 16.7082 28.4653 15.312C28.4653 13.9157 27.3144 12.7755 25.9052 12.7755ZM25.9052 16.1555C25.4355 16.1555 25.0538 15.7774 25.0538 15.312C25.0538 14.8466 25.4355 14.4684 25.9052 14.4684C26.375 14.4684 26.7566 14.8466 26.7566 15.312C26.7566 15.7774 26.375 16.1555 25.9052 16.1555Z" fill="#C6A20C"/>
+<path d="M27.608 22.9214H10.5388C10.0691 22.9214 9.68738 23.2996 9.68738 23.765C9.68738 24.2304 10.0691 24.6085 10.5388 24.6085H27.608C28.0778 24.6085 28.4594 24.2304 28.4594 23.765C28.4653 23.2996 28.0778 22.9214 27.608 22.9214Z" fill="#C6A20C"/>
+</svg>

package/molecules/Score/faces/sad.svg

@@ -0,0 +1,6 @@
+<svg width="37" height="38" viewBox="0 0 37 38" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.2241 37.1237C28.289 37.1237 36.4482 28.9305 36.4482 18.8237C36.4482 8.71687 28.289 0.523682 18.2241 0.523682C8.15921 0.523682 0 8.71687 0 18.8237C0 28.9305 8.15921 37.1237 18.2241 37.1237Z" fill="#F9DF70"/>
+<path d="M14.0532 15.4441C14.0532 14.0481 12.9178 12.908 11.5275 12.908C10.1372 12.908 9.00185 14.0481 9.00185 15.4441C9.00185 16.8402 10.1372 17.9803 11.5275 17.9803C12.9178 17.9803 14.0532 16.8402 14.0532 15.4441ZM10.6818 15.4441C10.6818 14.9788 11.0583 14.6007 11.5217 14.6007C11.9851 14.6007 12.3617 14.9788 12.3617 15.4441C12.3617 15.9095 11.9851 16.2876 11.5217 16.2876C11.0583 16.2876 10.6818 15.9095 10.6818 15.4441Z" fill="#C6A20C"/>
+<path d="M24.9956 12.908C23.6054 12.908 22.47 14.0481 22.47 15.4441C22.47 16.8402 23.6054 17.9803 24.9956 17.9803C26.3859 17.9803 27.5213 16.8402 27.5213 15.4441C27.5213 14.0481 26.3917 12.908 24.9956 12.908ZM24.9956 16.2876C24.5322 16.2876 24.1557 15.9095 24.1557 15.4441C24.1557 14.9788 24.5322 14.6007 24.9956 14.6007C25.459 14.6007 25.8356 14.9788 25.8356 15.4441C25.8356 15.9095 25.4648 16.2876 24.9956 16.2876Z" fill="#C6A20C"/>
+<path d="M18.259 23.0526C15.1193 23.0526 12.1302 24.3905 10.0506 26.7173C9.7436 27.0663 9.77256 27.6015 10.1143 27.9098C10.4619 28.2239 10.9948 28.189 11.3019 27.8458C13.0571 25.8738 15.5943 24.7454 18.2532 24.7454C20.9121 24.7454 23.4493 25.8738 25.2045 27.8458C25.3725 28.0319 25.5985 28.125 25.8302 28.125C26.0271 28.125 26.2299 28.0552 26.3921 27.9098C26.7396 27.6015 26.7686 27.0663 26.4558 26.7173C24.3935 24.3905 21.4045 23.0526 18.259 23.0526Z" fill="#C6A20C"/>
+</svg>

package/molecules/Score/index.js

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

package/molecules/Task/Task.js

@@ -0,0 +1,114 @@
+import React, { useState } from 'react'
+import PropTypes from 'prop-types'
+
+import Spacer from '../../layout/Spacer'
+import Card from '../../atoms/Card'
+import Paragraph from '../../atoms/Paragraph'
+import Icon from '../../atoms/Icon'
+import Check from '../../atoms/Check'
+
+import styles from './Task.module.css'
+import { options } from './constants'
+import withStyles from '../../hocs/withStyles'
+
+const handleCheck = ({ isChecked, setIsChecked, isPending, onCheck }) => (
+  event
+) => {
+  event && event.stopPropagation()
+
+  if (!isPending) {
+    setIsChecked(!isChecked)
+    onCheck({ isChecked: !isChecked })
+  }
+}
+
+const handleDelete = ({ onDelete }) => (event) => {
+  event && event.stopPropagation()
+  onDelete()
+}
+
+const handleClick = ({ onClick }) => () => {
+  onClick()
+}
+
+export const Task = ({
+  children,
+  defaultIsChecked,
+  onCheck,
+  onClick,
+  onDelete,
+  getStyles,
+  isPending,
+}) => {
+  const [isChecked, setIsChecked] = useState(defaultIsChecked && !isPending)
+
+  return (
+    <div className={getStyles('container')}>
+      <Card
+        onClick={handleClick({ onClick })}
+        isClickable={!isPending}
+        isDraggable={isPending}
+      >
+        <div
+          className={getStyles('task', ['type'], {
+            'is-checked': isChecked,
+          })}
+        >
+          <div className={getStyles('content')}>
+            {isPending ? (
+              <Icon name="grip" size="sm" />
+            ) : (
+              <div
+                className={getStyles('check-container')}
+                onClick={handleCheck({
+                  isChecked,
+                  setIsChecked,
+                  isPending,
+                  onCheck,
+                })}
+              >
+                <Check isChecked={isChecked} />
+              </div>
+            )}
+            <Spacer.Horizontal size="xs" />
+            <Paragraph
+              color={isChecked ? 'muted' : 'base'}
+              weight="medium"
+              isStriked={isChecked}
+            >
+              {children}
+            </Paragraph>
+          </div>
+          <Spacer.Horizontal size="sm" />
+          <Icon
+            name="trash"
+            size="sm"
+            onClick={handleDelete({ onDelete })}
+            background="inverted"
+          />
+        </div>
+      </Card>
+    </div>
+  )
+}
+
+Task.propTypes = {
+  children: PropTypes.node.isRequired,
+  getStyles: PropTypes.func.isRequired,
+  onCheck: PropTypes.func.isRequired,
+  onClick: PropTypes.func.isRequired,
+  onDelete: PropTypes.func.isRequired,
+  type: PropTypes.oneOf(options.types),
+  defaultIsChecked: PropTypes.bool,
+  isPending: PropTypes.bool,
+}
+
+Task.defaultProps = {
+  getStyles: () => {},
+  onCheck: () => {},
+  onClick: () => {},
+  onDelete: () => {},
+  defaultIsChecked: false,
+}
+
+export default withStyles(styles)(Task)

package/molecules/Task/Task.module.css

@@ -0,0 +1,47 @@
+.container {
+  position: relative;
+  width: 100%;
+}
+
+.task {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.content {
+  display: flex;
+  width: 100%;
+  align-items: center;
+}
+
+.type-active:not(.is-checked)::after {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  border-radius: var(--task-border-radius);
+  box-shadow: var(--box-shadow-sm), inset 0 -3px 0 var(--color-green-300);
+  content: '';
+  pointer-events: none;
+}
+
+.type-standby:not(.is-checked)::after {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  border-radius: var(--task-border-radius);
+  box-shadow: var(--box-shadow-sm), inset 0 -3px 0 var(--color-yellow-400);
+  content: '';
+  pointer-events: none;
+}
+
+.check-container {
+  display: inline-flex;
+  width: 100%;
+  max-width: 35px;
+}

package/molecules/Task/Task.stories.js

@@ -0,0 +1,47 @@
+import { Task, styles, options } from '.'
+
+import {
+  getTemplate,
+  getListTemplate,
+  getOptionsArgTypes,
+} from '../../helpers/storybook'
+
+const Template = getTemplate(Task, styles)
+const ListTemplate = getListTemplate(Task, styles)
+
+export default {
+  title: 'Molecules/Task',
+  component: Task,
+  args: {
+    children: 'Sir Goblin-town feels characters ruined precautions.',
+  },
+  argTypes: {
+    type: getOptionsArgTypes(options.types),
+  },
+}
+
+export const Default = Template.bind({})
+
+export const Long = Template.bind({})
+Long.args = {
+  children:
+    "Swords are no more use here. Moments shiny rings Cirith nowhere garrison ax pointy endless mention trousers. Retribution Frodo's wrong? Them leaf question require spared houses sapphire Balin. Kind pouring Lothlórien ragged retribution covers lair less goings recognizes unleash. Whence Precious token hidden hire bandy make farming. Shards farmer unfriendly handle Bain gongs. Mend recall sorry oncoming roll unmade cries visitors Lobelia Sackville-Baggins was bidden. Dank rather between short doomed Mellon tomb consequence girl crescent attacking.",
+}
+
+export const Checked = Template.bind({})
+Checked.args = {
+  defaultIsChecked: true,
+}
+
+export const Pending = Template.bind({})
+Pending.args = {
+  isPending: true,
+}
+
+export const Types = ListTemplate.bind({})
+Types.args = { items: options.types.map((type) => ({ type })) }
+
+export const PendingTypes = ListTemplate.bind({})
+PendingTypes.args = {
+  items: options.types.map((type) => ({ type, isPending: true })),
+}