imbric-theme 0.1.0

package/atoms/Heading/Heading.stories.js

@@ -0,0 +1,46 @@
+import { Heading, styles, options } from '.'
+import {
+  getTemplate,
+  getListTemplate,
+  getOptionsArgTypes,
+} from '../../helpers/storybook'
+
+const Template = getTemplate(Heading, styles)
+const ListTemplate = getListTemplate(Heading, styles)
+
+export default {
+  title: 'Atoms/Heading',
+  component: Heading,
+  args: {
+    children: 'Lorem ipsum dolor sit amet, consectetur adipiscing.',
+  },
+  argTypes: {
+    color: getOptionsArgTypes(options.colors),
+    size: getOptionsArgTypes(options.sizes),
+    weight: getOptionsArgTypes(options.weights),
+    children: { control: 'text' },
+  },
+}
+
+export const Default = Template.bind({})
+
+export const Inline = Template.bind({})
+Inline.args = {
+  isInline: true,
+}
+
+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 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/Heading/__snapshots__/Heading.stories.js.snap

@@ -0,0 +1,189 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Atoms/Heading Centered 1`] = `
+<div
+  style={
+    Object {
+      "alignContent": "flex-start",
+      "display": "flex",
+      "flexDirection": "column",
+      "flexWrap": "wrap",
+      "gap": "10px 30px",
+      "height": "100%",
+      "justifyContent": "flex-start",
+      "maxHeight": "auto",
+    }
+  }
+>
+  <h1
+    className="heading color-base size-md weight-bold is-centered"
+  >
+    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
+  </h1>
+</div>
+`;
+
+exports[`Storyshots Atoms/Heading Colors 1`] = `
+<div
+  style={
+    Object {
+      "alignContent": "flex-start",
+      "display": "flex",
+      "flexDirection": "column",
+      "flexWrap": "wrap",
+      "gap": "10px 30px",
+      "height": "100%",
+      "justifyContent": "flex-start",
+      "maxHeight": "auto",
+    }
+  }
+>
+  <h1
+    className="heading color-base size-md weight-bold"
+  >
+    Lorem ipsum dolor sit amet, consectetur adipiscing.
+  </h1>
+  <h1
+    className="heading color-primary size-md weight-bold"
+  >
+    Lorem ipsum dolor sit amet, consectetur adipiscing.
+  </h1>
+  <h1
+    className="heading color-tertiary size-md weight-bold"
+  >
+    Lorem ipsum dolor sit amet, consectetur adipiscing.
+  </h1>
+  <h1
+    className="heading color-inverted size-md weight-bold"
+  >
+    Lorem ipsum dolor sit amet, consectetur adipiscing.
+  </h1>
+</div>
+`;
+
+exports[`Storyshots Atoms/Heading Default 1`] = `
+<div
+  style={
+    Object {
+      "alignContent": "flex-start",
+      "display": "flex",
+      "flexDirection": "column",
+      "flexWrap": "wrap",
+      "gap": "10px 30px",
+      "height": "100%",
+      "justifyContent": "flex-start",
+      "maxHeight": "auto",
+    }
+  }
+>
+  <h1
+    className="heading color-base size-md weight-bold"
+  >
+    Lorem ipsum dolor sit amet, consectetur adipiscing.
+  </h1>
+</div>
+`;
+
+exports[`Storyshots Atoms/Heading Inline 1`] = `
+<div
+  style={
+    Object {
+      "alignContent": "flex-start",
+      "display": "flex",
+      "flexDirection": "column",
+      "flexWrap": "wrap",
+      "gap": "10px 30px",
+      "height": "100%",
+      "justifyContent": "flex-start",
+      "maxHeight": "auto",
+    }
+  }
+>
+  <h1
+    className="heading color-base size-md weight-bold is-inline"
+  >
+    Lorem ipsum dolor sit amet, consectetur adipiscing.
+  </h1>
+</div>
+`;
+
+exports[`Storyshots Atoms/Heading Sizes 1`] = `
+<div
+  style={
+    Object {
+      "alignContent": "flex-start",
+      "display": "flex",
+      "flexDirection": "column",
+      "flexWrap": "wrap",
+      "gap": "10px 30px",
+      "height": "100%",
+      "justifyContent": "flex-start",
+      "maxHeight": "auto",
+    }
+  }
+>
+  <h1
+    className="heading color-base size-xs weight-bold"
+  >
+    Lorem ipsum dolor sit amet, consectetur adipiscing.
+  </h1>
+  <h1
+    className="heading color-base size-sm weight-bold"
+  >
+    Lorem ipsum dolor sit amet, consectetur adipiscing.
+  </h1>
+  <h1
+    className="heading color-base size-md weight-bold"
+  >
+    Lorem ipsum dolor sit amet, consectetur adipiscing.
+  </h1>
+  <h1
+    className="heading color-base size-lg weight-bold"
+  >
+    Lorem ipsum dolor sit amet, consectetur adipiscing.
+  </h1>
+  <h1
+    className="heading color-base size-xl weight-bold"
+  >
+    Lorem ipsum dolor sit amet, consectetur adipiscing.
+  </h1>
+  <h1
+    className="heading color-base size-2xl weight-bold"
+  >
+    Lorem ipsum dolor sit amet, consectetur adipiscing.
+  </h1>
+</div>
+`;
+
+exports[`Storyshots Atoms/Heading Weights 1`] = `
+<div
+  style={
+    Object {
+      "alignContent": "flex-start",
+      "display": "flex",
+      "flexDirection": "column",
+      "flexWrap": "wrap",
+      "gap": "10px 30px",
+      "height": "100%",
+      "justifyContent": "flex-start",
+      "maxHeight": "auto",
+    }
+  }
+>
+  <h1
+    className="heading color-base size-md weight-light"
+  >
+    Lorem ipsum dolor sit amet, consectetur adipiscing.
+  </h1>
+  <h1
+    className="heading color-base size-md weight-normal"
+  >
+    Lorem ipsum dolor sit amet, consectetur adipiscing.
+  </h1>
+  <h1
+    className="heading color-base size-md weight-bold"
+  >
+    Lorem ipsum dolor sit amet, consectetur adipiscing.
+  </h1>
+</div>
+`;

package/atoms/Heading/constants.js

@@ -0,0 +1,5 @@
+export const options = {
+  colors: ['base', 'primary', 'tertiary', 'inverted', 'black'],
+  sizes: ['xs', 'sm', 'md', 'lg', 'xl', '2xl'],
+  weights: ['light', 'normal', 'bold'],
+}

package/atoms/Heading/index.js

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

package/atoms/Icon/Icon.js

@@ -0,0 +1,66 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { mapSize } from './helpers'
+
+import styles from './Icon.module.css'
+import { options, iconsMap } from './constants'
+import withStyles from '../../hocs/withStyles'
+
+const handleClick = ({ onClick }) => (event) => {
+  onClick(event)
+}
+
+export const Icon = ({
+  id,
+  className,
+  onClick,
+  name,
+  size,
+  isClickable,
+  getStyles,
+}) => {
+  const icon = iconsMap[name]
+  const mappedSize = mapSize(size)
+
+  return (
+    <div
+      id={id}
+      className={getStyles(className, 'icon', ['color', 'size', 'background'], {
+        'is-clickable': isClickable || !!onClick,
+      })}
+      style={{ width: mappedSize, height: mappedSize }}
+      onClick={onClick && handleClick({ onClick })}
+    >
+      <svg
+        viewBox={icon.viewBox}
+        xmlns="http://www.w3.org/2000/svg"
+        width={mappedSize}
+        height={mappedSize}
+      >
+        {icon.svg}
+      </svg>
+    </div>
+  )
+}
+
+Icon.propTypes = {
+  name: PropTypes.oneOf(options.names).isRequired,
+  getStyles: PropTypes.func.isRequired,
+  onClick: PropTypes.func,
+  size: PropTypes.oneOf(options.sizes),
+  color: PropTypes.oneOf(options.colors),
+  background: PropTypes.oneOf(options.backgrounds),
+  id: PropTypes.string,
+  className: PropTypes.string,
+  isClickable: PropTypes.bool,
+}
+
+Icon.defaultProps = {
+  size: 'md',
+  color: 'base',
+  background: 'transparent',
+  isClickable: false,
+  getStyles: () => { },
+}
+
+export default withStyles(styles)(Icon)

package/atoms/Icon/Icon.module.css

@@ -0,0 +1,142 @@
+.icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  user-select: none;
+}
+
+.size-sm {
+  padding: 5px;
+}
+
+.size-md {
+  padding: 8px;
+}
+
+.size-lg {
+  padding: 12px;
+}
+
+.size-xl {
+  padding: 15px;
+}
+
+.color-success path,
+.color-success circle {
+  fill: var(--color-tertiary-muted);
+}
+
+.color-success line,
+.color-success rect {
+  stroke: var(--color-tertiary-muted);
+}
+
+.color-error path,
+.color-error circle {
+  fill: var(--color-secondary-muted);
+}
+
+.color-error line,
+.color-error rect {
+  stroke: var(--color-secondary-muted);
+}
+
+.color-base path,
+.color-base circle {
+  fill: var(--color-font-base);
+}
+
+.color-base line,
+.color-base rect {
+  stroke: var(--color-font-base);
+}
+
+.color-highlight path,
+.color-highlight circle {
+  fill: var(--color-font-highlight);
+}
+
+.color-highlight line,
+.color-highlight rect {
+  stroke: var(--color-font-highlight);
+}
+
+.color-muted path,
+.color-muted circle {
+  fill: var(--color-font-muted);
+}
+
+.color-muted line,
+.color-muted rect {
+  stroke: var(--color-font-muted);
+}
+
+.color-primary path,
+.color-primary circle {
+  fill: var(--color-primary);
+}
+
+.color-primary line,
+.color-primary rect {
+  stroke: var(--color-primary);
+}
+
+.color-inverted path,
+.color-inverted circle {
+  fill: var(--color-primary-inverted);
+}
+
+.color-inverted line,
+.color-inverted rect {
+  stroke: var(--color-primary-inverted);
+}
+
+.icon rect:global(.transparent) {
+  fill: var(--color-base-transparent) !important;
+}
+
+.background-success {
+  background: var(--color-tertiary-muted);
+  border-radius: var(--border-radius-full);
+}
+
+.background-error {
+  background: var(--color-secondary-muted);
+  border-radius: var(--border-radius-full);
+}
+
+.background-base {
+  background: var(--color-gray-100);
+  border-radius: var(--border-radius-full);
+}
+
+.background-transparent {
+  background: var(--color-base-transparent);
+}
+
+.background-highlight {
+  background: var(--color-primary-highlight);
+  border-radius: var(--border-radius-full);
+}
+
+.background-muted {
+  background: var(--color-primary-muted);
+  border-radius: var(--border-radius-full);
+}
+
+.background-inverted {
+  border: var(--picture-border);
+  background: var(--color-font-inverted);
+  border-radius: var(--border-radius-full);
+  box-shadow: var(--box-shadow-sm);
+}
+
+.background-spotlight {
+  background: var(--color-yellow-100);
+  border-radius: var(--border-radius-full);
+  box-shadow: var(--box-shadow-sm);
+}
+
+.is-clickable {
+  cursor: pointer;
+}

package/atoms/Icon/Icon.stories.js

@@ -0,0 +1,48 @@
+import { Icon, styles, options } from '.'
+
+import {
+  getTemplate,
+  getListTemplate,
+  getOptionsArgTypes,
+} from '../../helpers/storybook'
+
+const Template = getTemplate(Icon, styles)
+const ListTemplate = getListTemplate(Icon, styles)
+
+export default {
+  title: 'Atoms/Icon',
+  component: Icon,
+  args: {
+    name: 'arrowRight',
+  },
+  argTypes: {
+    color: getOptionsArgTypes(options.colors),
+    size: getOptionsArgTypes(options.sizes),
+    name: getOptionsArgTypes(options.names),
+    background: getOptionsArgTypes(options.backgrounds),
+  },
+  parameters: { __sb: { fd: 'row' } },
+}
+
+export const Default = Template.bind({})
+
+export const Clickable = Template.bind({})
+Clickable.args = { isClickable: true }
+
+export const Names = ListTemplate.bind({})
+Names.args = {
+  items: options.names.map((name) => ({ name })),
+}
+
+export const Sizes = ListTemplate.bind({})
+Sizes.args = { items: options.sizes.map((size) => ({ size })) }
+
+export const Colors = ListTemplate.bind({})
+Colors.args = {
+  items: options.colors.map((color) => ({ color })),
+}
+
+export const Backgrounds = ListTemplate.bind({})
+Backgrounds.args = {
+  items: options.backgrounds.map((background) => ({ background })),
+}