imbric-theme 0.1.1

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

@@ -0,0 +1,105 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Atoms/Avatar 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="avatar"
+  >
+    <picture
+      className="picture is-rounded with-border"
+    >
+      <img
+        src="https://picsum.photos/id/1027/200/200"
+        style={
+          Object {
+            "height": 44,
+            "maxWidth": 44,
+          }
+        }
+      />
+    </picture>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Atoms/Avatar Sizes 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="avatar"
+  >
+    <picture
+      className="picture is-rounded with-border"
+    >
+      <img
+        src="https://picsum.photos/id/1027/200/200"
+        style={
+          Object {
+            "height": 22,
+            "maxWidth": 22,
+          }
+        }
+      />
+    </picture>
+  </div>
+  <div
+    className="avatar"
+  >
+    <picture
+      className="picture is-rounded with-border"
+    >
+      <img
+        src="https://picsum.photos/id/1027/200/200"
+        style={
+          Object {
+            "height": 44,
+            "maxWidth": 44,
+          }
+        }
+      />
+    </picture>
+  </div>
+  <div
+    className="avatar"
+  >
+    <picture
+      className="picture is-rounded with-border"
+    >
+      <img
+        src="https://picsum.photos/id/1027/200/200"
+        style={
+          Object {
+            "height": 66,
+            "maxWidth": 66,
+          }
+        }
+      />
+    </picture>
+  </div>
+</div>
+`;

package/atoms/Avatar/constants.js

@@ -0,0 +1,3 @@
+export const options = {
+  sizes: ['sm', 'md', 'lg'],
+}

package/atoms/Avatar/helpers.js

@@ -0,0 +1,7 @@
+const avatarSize = {
+  sm: 22,
+  md: 44,
+  lg: 66,
+}
+
+export const mapSize = (size) => avatarSize[size]

package/atoms/Avatar/index.js

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

package/atoms/Button/Button.js

@@ -0,0 +1,68 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import Heading from '../Heading'
+
+import styles from './Button.module.css'
+import { options } from './constants'
+import withStyles from '../../hocs/withStyles'
+
+import isEmpty from '../../utils/isEmpty'
+import isObject from '../../utils/isObject'
+
+export const handleClick = ({ onClick }) => (event) => {
+  onClick(event)
+}
+
+export const Button = ({
+  type,
+  children,
+  addons,
+  isMuted,
+  isInline,
+  onClick,
+  getStyles,
+}) => (
+  <button
+    className={getStyles('button', ['type'], {
+      'is-inline': isInline || type === 'tertiary',
+      'is-muted': isMuted && type === 'primary',
+    })}
+    onClick={onClick && handleClick({ onClick })}
+  >
+    {addons && addons.prepend}
+
+    <Heading
+      color={type === 'primary' ? 'inverted' : 'primary'}
+      isCentered
+      isInline={isObject(addons) && !isEmpty(addons)}
+      weight={'light'}
+    >
+      {children}
+    </Heading>
+
+    {addons && addons.append}
+  </button>
+)
+
+Button.propTypes = {
+  children: PropTypes.string.isRequired,
+  getStyles: PropTypes.func.isRequired,
+  type: PropTypes.oneOf(options.types),
+  addons: PropTypes.shape({
+    prepend: PropTypes.node,
+    append: PropTypes.node,
+  }),
+  onClick: PropTypes.func,
+  isInline: PropTypes.bool,
+  isMuted: PropTypes.bool,
+}
+
+Button.defaultProps = {
+  type: 'primary',
+  getStyles: () => {},
+  onClick: () => {},
+  isInline: false,
+}
+
+export default withStyles(styles)(Button)

package/atoms/Button/Button.module.css

@@ -0,0 +1,63 @@
+.button {
+  display: inline-flex;
+  width: 100%;
+  min-width: max-content;
+  height: 45px;
+  align-items: center;
+  justify-content: center;
+  padding: 20px 30px;
+  border: var(--border-width-thin) solid var(--color-base-transparent);
+  border-radius: var(--button-border-radius-none);
+  box-shadow: var(--box-shadow-sm);
+  cursor: pointer;
+  transition: filter 0.5s ease, box-shadow 0.2s ease-in;
+}
+
+.button:focus {
+  box-shadow: 0 0 0 1px var(--color-primary), 0 0 10px 0 var(--color-primary);
+  outline: none;
+}
+
+.button:hover {
+  filter: brightness(1.1);
+}
+
+.button:active {
+  box-shadow: var(--box-shadow-xs);
+  filter: brightness(0.9);
+}
+
+.type-primary {
+  background: var(--color-primary);
+}
+
+.type-primary:focus {
+  box-shadow: 0 0 0 1px var(--color-primary-inverted),
+    0 0 10px 0 var(--color-primary);
+}
+
+.type-secondary {
+  border: var(--border-width-thin) solid var(--color-primary);
+  background: var(--color-base-transparent);
+}
+
+.type-tertiary {
+  height: 25px;
+  padding: 0;
+  border-bottom: 1px solid var(--color-primary);
+  background: var(--color-base-transparent);
+  border-radius: var(--border-radius-none);
+  box-shadow: var(--shadows-none);
+}
+
+.type-tertiary:focus {
+  box-shadow: 0 10px 10px -8px var(--color-primary);
+}
+
+.button.is-inline {
+  max-width: max-content;
+}
+
+.is-muted {
+  background: var(--color-primary-muted);
+}

package/atoms/Button/Button.stories.js

@@ -0,0 +1,47 @@
+import { Button, options, styles } from '.'
+import {
+  getTemplate,
+  getListTemplate,
+  getOptionsArgTypes,
+} from '../../helpers/storybook'
+
+const Template = getTemplate(Button, styles)
+const ListTemplate = getListTemplate(Button, styles)
+
+export default {
+  title: 'Atoms/Button',
+  component: Button,
+  args: {
+    children: 'You Shall Not Pass!',
+  },
+  argTypes: {
+    type: getOptionsArgTypes(options.types),
+    children: { control: 'text' },
+    isMuted: { description: 'It requires `type` to be "primary"' },
+  },
+}
+
+export const Default = Template.bind({})
+
+export const Types = ListTemplate.bind({})
+Types.args = { items: options.types.map((type) => ({ type })) }
+
+export const Inline = Template.bind({})
+Inline.args = { isInline: true }
+
+export const Muted = Template.bind({})
+Muted.args = { type: 'primary', isMuted: true }
+
+export const AddonPrepend = Template.bind({})
+AddonPrepend.args = {
+  addons: {
+    prepend: 'Dare Erebor forgive most.',
+  },
+}
+
+export const AddonAppend = Template.bind({})
+AddonAppend.args = {
+  addons: {
+    append: 'But ill-tempered Thengel.',
+  },
+}

package/atoms/Button/Button.test.js

@@ -0,0 +1,60 @@
+import React from 'react'
+import { render, fireEvent, screen } from '@testing-library/react'
+
+import Button, { handleClick } from './Button'
+
+describe('[ atoms / Button ]', () => {
+  describe('#Button', () => {
+    describe('when `Button`is clicked', () => {
+      it('should call `onClick`', () => {
+        // Arrange
+        const onClickMock = jest.fn()
+        const props = {
+          onClick: onClickMock,
+        }
+
+        // Act
+        render(<Button {...props}>Button</Button>)
+        fireEvent.click(screen.getByText('Button'))
+
+        // Assert
+        expect(onClickMock).toHaveBeenCalled()
+      })
+    })
+  })
+
+  describe('#handleClick', () => {
+    // Given, When, Then
+    describe('when `handleClick` is called', () => {
+      it('should return a function', () => {
+        // Arrange
+        const params = {}
+
+        // Act
+        const result = typeof handleClick(params)
+        const expected = 'function'
+
+        // Assert
+        expect(result).toBe(expected)
+      })
+    })
+
+    describe('when `handleClick` returned function is called', () => {
+      it('should call `onClick` with the `event`', () => {
+        // Arrange
+        const onClickMock = jest.fn()
+        const params = {
+          onClick: onClickMock,
+        }
+
+        const event = 'event'
+
+        // Act
+        handleClick(params)(event)
+
+        // Assert
+        expect(onClickMock).toHaveBeenCalledWith(event)
+      })
+    })
+  })
+})

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

@@ -0,0 +1,191 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Atoms/Button Addon Append 1`] = `
+<div
+  style={
+    Object {
+      "alignContent": "flex-start",
+      "display": "flex",
+      "flexDirection": "column",
+      "flexWrap": "wrap",
+      "gap": "10px 30px",
+      "height": "100%",
+      "justifyContent": "flex-start",
+      "maxHeight": "auto",
+    }
+  }
+>
+  <button
+    className="button type-primary"
+    onClick={[Function]}
+  >
+    <h1
+      className="heading color-inverted size-md weight-light is-centered is-inline"
+    >
+      You Shall Not Pass!
+    </h1>
+    But ill-tempered Thengel.
+  </button>
+</div>
+`;
+
+exports[`Storyshots Atoms/Button Addon Prepend 1`] = `
+<div
+  style={
+    Object {
+      "alignContent": "flex-start",
+      "display": "flex",
+      "flexDirection": "column",
+      "flexWrap": "wrap",
+      "gap": "10px 30px",
+      "height": "100%",
+      "justifyContent": "flex-start",
+      "maxHeight": "auto",
+    }
+  }
+>
+  <button
+    className="button type-primary"
+    onClick={[Function]}
+  >
+    Dare Erebor forgive most.
+    <h1
+      className="heading color-inverted size-md weight-light is-centered is-inline"
+    >
+      You Shall Not Pass!
+    </h1>
+  </button>
+</div>
+`;
+
+exports[`Storyshots Atoms/Button Default 1`] = `
+<div
+  style={
+    Object {
+      "alignContent": "flex-start",
+      "display": "flex",
+      "flexDirection": "column",
+      "flexWrap": "wrap",
+      "gap": "10px 30px",
+      "height": "100%",
+      "justifyContent": "flex-start",
+      "maxHeight": "auto",
+    }
+  }
+>
+  <button
+    className="button type-primary"
+    onClick={[Function]}
+  >
+    <h1
+      className="heading color-inverted size-md weight-light is-centered"
+    >
+      You Shall Not Pass!
+    </h1>
+  </button>
+</div>
+`;
+
+exports[`Storyshots Atoms/Button Inline 1`] = `
+<div
+  style={
+    Object {
+      "alignContent": "flex-start",
+      "display": "flex",
+      "flexDirection": "column",
+      "flexWrap": "wrap",
+      "gap": "10px 30px",
+      "height": "100%",
+      "justifyContent": "flex-start",
+      "maxHeight": "auto",
+    }
+  }
+>
+  <button
+    className="button type-primary is-inline"
+    onClick={[Function]}
+  >
+    <h1
+      className="heading color-inverted size-md weight-light is-centered"
+    >
+      You Shall Not Pass!
+    </h1>
+  </button>
+</div>
+`;
+
+exports[`Storyshots Atoms/Button Muted 1`] = `
+<div
+  style={
+    Object {
+      "alignContent": "flex-start",
+      "display": "flex",
+      "flexDirection": "column",
+      "flexWrap": "wrap",
+      "gap": "10px 30px",
+      "height": "100%",
+      "justifyContent": "flex-start",
+      "maxHeight": "auto",
+    }
+  }
+>
+  <button
+    className="button type-primary is-muted"
+    onClick={[Function]}
+  >
+    <h1
+      className="heading color-inverted size-md weight-light is-centered"
+    >
+      You Shall Not Pass!
+    </h1>
+  </button>
+</div>
+`;
+
+exports[`Storyshots Atoms/Button Types 1`] = `
+<div
+  style={
+    Object {
+      "alignContent": "flex-start",
+      "display": "flex",
+      "flexDirection": "column",
+      "flexWrap": "wrap",
+      "gap": "10px 30px",
+      "height": "100%",
+      "justifyContent": "flex-start",
+      "maxHeight": "auto",
+    }
+  }
+>
+  <button
+    className="button type-primary"
+    onClick={[Function]}
+  >
+    <h1
+      className="heading color-inverted size-md weight-light is-centered"
+    >
+      You Shall Not Pass!
+    </h1>
+  </button>
+  <button
+    className="button type-secondary"
+    onClick={[Function]}
+  >
+    <h1
+      className="heading color-primary size-md weight-light is-centered"
+    >
+      You Shall Not Pass!
+    </h1>
+  </button>
+  <button
+    className="button type-tertiary is-inline"
+    onClick={[Function]}
+  >
+    <h1
+      className="heading color-primary size-md weight-light is-centered"
+    >
+      You Shall Not Pass!
+    </h1>
+  </button>
+</div>
+`;

package/atoms/Button/constants.js

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

package/atoms/Button/index.js

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

package/atoms/Card/Card.js

@@ -0,0 +1,48 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import styles from './Card.module.css'
+import { options } from './constants'
+import withStyles from '../../hocs/withStyles'
+
+export const handleClick = ({ onClick }) => (event) => {
+  onClick(event)
+}
+
+export const Card = ({
+  getStyles,
+  onClick,
+  isClickable,
+  isDraggable,
+  children,
+}) => {
+  return (
+    <div
+      onClick={onClick && handleClick({ onClick })}
+      className={getStyles('card', ['color', 'size'], {
+        'is-clickable': isClickable,
+        'is-draggable': isDraggable,
+      })}
+    >
+      {children}
+    </div>
+  )
+}
+
+Card.propTypes = {
+  children: PropTypes.node.isRequired,
+  getStyles: PropTypes.func.isRequired,
+  onClick: PropTypes.func,
+  color: PropTypes.oneOf(options.colors),
+  size: PropTypes.oneOf(options.sizes),
+  isClickable: PropTypes.bool,
+  isDraggable: PropTypes.bool,
+}
+
+Card.defaultProps = {
+  color: 'base',
+  size: 'sm',
+  getStyles: () => {},
+}
+
+export default withStyles(styles)(Card)

package/atoms/Card/Card.module.css

@@ -0,0 +1,52 @@
+.card {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  padding: 12px 10px;
+  border: var(--border-width-thin) solid var(--color-base-transparent);
+  border-radius: var(--card-border-radius);
+  box-shadow: var(--box-shadow-sm);
+  color: var(--color-font-base);
+  transition: box-shadow 0.2s ease-in;
+}
+
+.size-sm {
+  min-height: 45px;
+}
+
+.size-md {
+  min-height: 80px;
+}
+
+.size-lg {
+  min-height: 115px;
+}
+
+.color-primary {
+  background: var(--color-primary);
+  color: var(--color-primary-inverted);
+}
+
+.color-secondary {
+  background: var(--color-secondary);
+  color: var(--color-secondary-inverted);
+}
+
+.color-base {
+  border: var(--border-width-thin) solid var(--color-gray-400);
+  background: var(--background-color-primary-highlight);
+}
+
+.is-clickable {
+  cursor: pointer;
+}
+
+.is-draggable {
+  cursor: grab;
+  user-select: none;
+}
+
+.card.is-clickable:active,
+.card.is-draggable:active {
+  box-shadow: var(--box-shadow-xs);
+}

package/atoms/Card/Card.stories.js

@@ -0,0 +1,41 @@
+import { Card, options, styles } from '.'
+import {
+  getTemplate,
+  getListTemplate,
+  getOptionsArgTypes,
+} from '../../helpers/storybook'
+
+const Template = getTemplate(Card, styles)
+const ListTemplate = getListTemplate(Card, styles)
+
+export default {
+  title: 'Atoms/Card',
+  component: Card,
+  args: {
+    children:
+      '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!',
+  },
+  argTypes: {
+    color: getOptionsArgTypes(options.colors),
+    size: getOptionsArgTypes(options.sizes),
+    children: { control: 'text' },
+  },
+}
+
+export const Default = Template.bind({})
+
+export const Clickable = Template.bind({})
+Clickable.args = {
+  isClickable: true,
+}
+
+export const Dragabble = Template.bind({})
+Dragabble.args = {
+  isDraggable: 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 })) }