imbric-theme 0.1.1

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

@@ -0,0 +1,101 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Atoms/Input Default 1`] = `
+<div
+  style={
+    Object {
+      "alignContent": "flex-start",
+      "display": "flex",
+      "flexDirection": "column",
+      "flexWrap": "wrap",
+      "gap": "10px 30px",
+      "height": "100%",
+      "justifyContent": "flex-start",
+      "maxHeight": "auto",
+    }
+  }
+>
+  <input
+    className="input"
+    onChange={[Function]}
+    placeholder="Kingdom slowed"
+    type="text"
+    value=""
+  />
+</div>
+`;
+
+exports[`Storyshots Atoms/Input Inline 1`] = `
+<div
+  style={
+    Object {
+      "alignContent": "flex-start",
+      "display": "flex",
+      "flexDirection": "column",
+      "flexWrap": "wrap",
+      "gap": "10px 30px",
+      "height": "100%",
+      "justifyContent": "flex-start",
+      "maxHeight": "auto",
+    }
+  }
+>
+  <input
+    className="input is-inline"
+    onChange={[Function]}
+    placeholder="Kingdom slowed"
+    type="text"
+    value=""
+  />
+</div>
+`;
+
+exports[`Storyshots Atoms/Input Types 1`] = `
+<div
+  style={
+    Object {
+      "alignContent": "flex-start",
+      "display": "flex",
+      "flexDirection": "column",
+      "flexWrap": "wrap",
+      "gap": "10px 30px",
+      "height": "100%",
+      "justifyContent": "flex-start",
+      "maxHeight": "auto",
+    }
+  }
+>
+  <input
+    className="input"
+    onChange={[Function]}
+    placeholder="Kingdom slowed"
+    type="text"
+    value=""
+  />
+</div>
+`;
+
+exports[`Storyshots Atoms/Input Value 1`] = `
+<div
+  style={
+    Object {
+      "alignContent": "flex-start",
+      "display": "flex",
+      "flexDirection": "column",
+      "flexWrap": "wrap",
+      "gap": "10px 30px",
+      "height": "100%",
+      "justifyContent": "flex-start",
+      "maxHeight": "auto",
+    }
+  }
+>
+  <input
+    className="input"
+    onChange={[Function]}
+    placeholder="Kingdom slowed"
+    type="text"
+    value="Others mainly cakehole Thorin moldy facial."
+  />
+</div>
+`;

package/atoms/Input/constants.js

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

package/atoms/Input/index.js

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

package/atoms/Link/Link.js

@@ -0,0 +1,33 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import styles from './Link.module.css'
+import { options } from './constants'
+import withStyles from '../../hocs/withStyles'
+
+import Paragraph from '../Paragraph'
+
+export const Link = ({ children, size, color, getStyles }) => {
+  return (
+    <a className={getStyles('link', ['color'])}>
+      <Paragraph size={size} color={color} weight="semibold" isInline>
+        {children}
+      </Paragraph>
+    </a>
+  )
+}
+
+Link.propTypes = {
+  children: PropTypes.node.isRequired,
+  getStyles: PropTypes.func.isRequired,
+  color: PropTypes.oneOf(options.colors),
+  size: PropTypes.oneOf(options.sizes),
+}
+
+Link.defaultProps = {
+  getStyles: () => {},
+  color: 'primary',
+  size: 'md',
+}
+
+export default withStyles(styles)(Link)

package/atoms/Link/Link.module.css

@@ -0,0 +1,14 @@
+.link {
+  display: inline;
+  max-width: max-content;
+  border-bottom: 1px solid currentColor;
+  cursor: pointer;
+}
+
+.color-primary {
+  color: var(--color-primary);
+}
+
+.color-tertiary {
+  color: var(--color-tertiary);
+}

package/atoms/Link/Link.stories.js

@@ -0,0 +1,30 @@
+import { Link, styles, options } from '.'
+
+import {
+  getTemplate,
+  getListTemplate,
+  getOptionsArgTypes,
+} from '../../helpers/storybook'
+
+const Template = getTemplate(Link, styles)
+const ListTemplate = getListTemplate(Link, styles)
+
+export default {
+  title: 'Atoms/Link',
+  component: Link,
+  args: {
+    children: 'Mouths Muil',
+  },
+  argTypes: {
+    color: getOptionsArgTypes(options.colors),
+    size: getOptionsArgTypes(options.sizes),
+  },
+}
+
+export const Default = Template.bind({})
+
+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 })) }

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

@@ -0,0 +1,118 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Atoms/Link Colors 1`] = `
+<div
+  style={
+    Object {
+      "alignContent": "flex-start",
+      "display": "flex",
+      "flexDirection": "column",
+      "flexWrap": "wrap",
+      "gap": "10px 30px",
+      "height": "100%",
+      "justifyContent": "flex-start",
+      "maxHeight": "auto",
+    }
+  }
+>
+  <a
+    className="link color-primary"
+  >
+    <p
+      className="paragraph color-primary size-md weight-semibold is-inline"
+    >
+      Mouths Muil
+    </p>
+  </a>
+  <a
+    className="link color-tertiary"
+  >
+    <p
+      className="paragraph color-tertiary size-md weight-semibold is-inline"
+    >
+      Mouths Muil
+    </p>
+  </a>
+</div>
+`;
+
+exports[`Storyshots Atoms/Link Default 1`] = `
+<div
+  style={
+    Object {
+      "alignContent": "flex-start",
+      "display": "flex",
+      "flexDirection": "column",
+      "flexWrap": "wrap",
+      "gap": "10px 30px",
+      "height": "100%",
+      "justifyContent": "flex-start",
+      "maxHeight": "auto",
+    }
+  }
+>
+  <a
+    className="link color-primary"
+  >
+    <p
+      className="paragraph color-primary size-md weight-semibold is-inline"
+    >
+      Mouths Muil
+    </p>
+  </a>
+</div>
+`;
+
+exports[`Storyshots Atoms/Link Sizes 1`] = `
+<div
+  style={
+    Object {
+      "alignContent": "flex-start",
+      "display": "flex",
+      "flexDirection": "column",
+      "flexWrap": "wrap",
+      "gap": "10px 30px",
+      "height": "100%",
+      "justifyContent": "flex-start",
+      "maxHeight": "auto",
+    }
+  }
+>
+  <a
+    className="link color-primary"
+  >
+    <p
+      className="paragraph color-primary size-xs weight-semibold is-inline"
+    >
+      Mouths Muil
+    </p>
+  </a>
+  <a
+    className="link color-primary"
+  >
+    <p
+      className="paragraph color-primary size-sm weight-semibold is-inline"
+    >
+      Mouths Muil
+    </p>
+  </a>
+  <a
+    className="link color-primary"
+  >
+    <p
+      className="paragraph color-primary size-md weight-semibold is-inline"
+    >
+      Mouths Muil
+    </p>
+  </a>
+  <a
+    className="link color-primary"
+  >
+    <p
+      className="paragraph color-primary size-lg weight-semibold is-inline"
+    >
+      Mouths Muil
+    </p>
+  </a>
+</div>
+`;

package/atoms/Link/constants.js

@@ -0,0 +1,5 @@
+import { options as paragraphOptions } from '../Paragraph/constants'
+export const options = {
+  colors: ['primary', 'tertiary'],
+  sizes: paragraphOptions.sizes,
+}

package/atoms/Link/index.js

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

package/atoms/Loading/Loading.js

@@ -0,0 +1,30 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import styles from './Loading.module.css'
+import withStyles from '../../hocs/withStyles'
+
+export const Loading = ({ children, isShown, getStyles, isPlayground }) => {
+  if (isShown || isPlayground) {
+    return (
+      <div className={getStyles('container')}>
+        <div className={getStyles('loading', { 'is-shown': isShown })} />
+      </div>
+    )
+  }
+
+  return <>{children}</>
+}
+
+Loading.propTypes = {
+  getStyles: PropTypes.func.isRequired,
+  children: PropTypes.node,
+  isShown: PropTypes.bool,
+  isPlayground: PropTypes.bool,
+}
+
+Loading.defaultProps = {
+  getStyles: () => {},
+}
+
+export default withStyles(styles)(Loading)

package/atoms/Loading/Loading.module.css

@@ -0,0 +1,51 @@
+.container {
+  --size: 15px;
+  --gap: 25px;
+}
+
+.loading,
+.loading:before,
+.loading:after {
+  width: var(--size);
+  height: var(--size);
+  animation: pulse 1.8s infinite ease-in-out;
+  animation-fill-mode: both;
+  border-radius: var(--border-radius-full);
+}
+
+.loading {
+  position: relative;
+  top: calc(var(--size) * -1);
+  left: var(--gap);
+  animation-delay: -0.16s;
+  color: var(--color-primary);
+  transform: translateZ(0);
+}
+
+.loading:before,
+.loading:after {
+  position: absolute;
+  top: 0;
+  content: '';
+}
+
+.loading:before {
+  left: calc(var(--gap) * -1);
+  animation-delay: -0.32s;
+}
+
+.loading:after {
+  left: var(--gap);
+}
+
+@keyframes pulse {
+  0%,
+  80%,
+  100% {
+    box-shadow: 0 var(--size) 0 calc(var(--size) / -2);
+  }
+
+  40% {
+    box-shadow: 0 var(--size) 0 0;
+  }
+}

package/atoms/Loading/Loading.stories.js

@@ -0,0 +1,17 @@
+import { Loading, styles } from '.'
+
+import { getTemplate } from '../../helpers/storybook'
+
+const Template = getTemplate(Loading, styles)
+
+export default {
+  title: 'Atoms/Loading',
+  component: Loading,
+  args: {
+    isPlayground: true,
+    children:
+      "Adventures washed awfully web poured pirate Iáve extend shared? Glows visit bitter fire-breather 400 triumphant splash responsible Oakenshield's prong invitations mortal? It must be taken deep into Mordor and cast back into the fiery chasm from whence it came.",
+  },
+}
+
+export const Default = Template.bind({})

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

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

package/atoms/Loading/index.js

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

package/atoms/Modal/Modal.js

@@ -0,0 +1,98 @@
+import React, { useState } from 'react'
+import PropTypes from 'prop-types'
+
+import styles from './Modal.module.css'
+import { options } from './constants'
+import withStyles from '../../hocs/withStyles'
+import Icon from '../Icon'
+import Container from '../../layout/Container'
+import isEmpty from '../../utils/isEmpty'
+
+import useMedia from '../../hook/useMedia'
+
+// Sync with ./Modal.module.css#L13-L17
+const FADE_OUT_ANIMATION_TIME = 400
+
+const createHandlerClick = () => (event) => {
+  event?.stopPropagation()
+}
+
+const createHandlerClose = ({ onClose, setOnFadeOut }) => () => {
+  setOnFadeOut(true)
+  setTimeout(onClose, FADE_OUT_ANIMATION_TIME)
+}
+
+const handleSecondaryAction = ({ onSecondaryAction }) => () => {
+  onSecondaryAction()
+}
+
+export const Modal = ({
+  onClose,
+  secondaryAction,
+  children,
+  getStyles,
+  type,
+  isPlayground,
+}) => {
+  const isDesktop = useMedia(['(min-width: 992px)'], [true])
+  const [onFadeOut, setOnFadeOut] = useState(false)
+
+  const handleClose = createHandlerClose({ onClose, setOnFadeOut })
+
+  return (
+    <div
+      className={getStyles('backdrop', {
+        'is-playground': isPlayground,
+        'on-fade-out': onFadeOut,
+      })}
+      onClick={handleClose}
+    >
+      <div
+        className={getStyles('modal', ['type'])}
+        onClick={createHandlerClick()}
+      >
+        <div className={getStyles('heading')}>
+          {!!onClose && (
+            <Icon
+              color={isDesktop && type === 'secondary' ? 'primary' : 'inverted'}
+              name={isDesktop ? 'cross' : 'angleLeft'}
+              background={isDesktop ? 'transparent' : 'muted'}
+              onClick={handleClose}
+              size={isDesktop ? 'lg' : 'md'}
+            />
+          )}
+          {secondaryAction && !isEmpty(secondaryAction) && (
+            <Icon
+              color="inverted"
+              name={secondaryAction?.icon}
+              background="muted"
+              onClick={handleSecondaryAction({
+                onSecondaryAction: secondaryAction?.handler,
+              })}
+            />
+          )}
+        </div>
+        <Container>{children}</Container>
+      </div>
+    </div>
+  )
+}
+
+Modal.propTypes = {
+  children: PropTypes.node.isRequired,
+  getStyles: PropTypes.func.isRequired,
+  onClose: PropTypes.func,
+  secondaryAction: PropTypes.shape({
+    icon: PropTypes.string,
+    handler: PropTypes.func,
+  }),
+  type: PropTypes.oneOf(options.types),
+  isPlayground: PropTypes.bool,
+}
+
+Modal.defaultProps = {
+  getStyles: () => {},
+  type: 'primary',
+}
+
+export default withStyles(styles)(Modal)

package/atoms/Modal/Modal.module.css

@@ -0,0 +1,85 @@
+.backdrop {
+  position: fixed;
+  z-index: var(--z-index-50);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--modal-backdrop-color);
+  inset: 0;
+}
+
+.backdrop:not(.is-playground) {
+  animation: fadeInModal 0.2s ease-in forwards;
+}
+
+.backdrop.on-fade-out {
+  animation: fadeOutModal 0.2s ease-in forwards;
+}
+
+.modal {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  flex-direction: column;
+  padding: 16px 32px;
+}
+
+:not(.is-playground) > .modal {
+  animation: fadeInModal 0.4s ease-in forwards;
+  opacity: 0;
+}
+
+.backdrop.on-fade-out .modal {
+  animation: fadeOutModal 0.4s ease-in forwards;
+}
+
+.heading {
+  display: flex;
+  justify-content: space-between;
+}
+
+.is-playground {
+  position: relative;
+  width: calc(50% - 15px);
+  border: var(--border-width-thick) dashed var(--color-primary);
+}
+
+.type-primary {
+  background-color: var(--color-primary);
+}
+
+.type-secondary {
+  background-color: var(--background-color-primary);
+}
+
+@media (min-width: 992px) {
+  .modal {
+    max-width: var(--modal-desktop-max-width);
+    height: var(--modal-desktop-height);
+    border-radius: var(--border-radius-sm);
+  }
+
+  .heading {
+    flex-direction: row-reverse;
+  }
+}
+
+@keyframes fadeInModal {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fadeOutModal {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
+}

package/atoms/Modal/Modal.stories.js

@@ -0,0 +1,43 @@
+import { Modal, styles, options } from '.'
+
+import {
+  getTemplate,
+  getListTemplate,
+  getOptionsArgTypes,
+} from '../../helpers/storybook'
+
+const Template = getTemplate(Modal, styles)
+const ListTemplate = getListTemplate(Modal, styles)
+
+export default {
+  title: 'Atoms/Modal',
+  component: Modal,
+  args: {
+    isPlayground: true,
+    onClose: null,
+    children:
+      "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",
+  },
+  argTypes: {
+    type: getOptionsArgTypes(options.types),
+    onClose: { action: 'clicked' },
+  },
+  parameters: { __sb: { fd: 'row' } },
+}
+
+export const Default = Template.bind({})
+
+export const Closable = Template.bind({})
+Closable.args = { onClose: () => {} }
+
+export const SecondaryAction = Template.bind({})
+SecondaryAction.args = {
+  onClose: () => {},
+  secondaryAction: {
+    icon: 'checkCircle',
+    handler: () => {},
+  },
+}
+
+export const Types = ListTemplate.bind({})
+Types.args = { items: options.types.map((type) => ({ type })) }