imbric-theme 0.1.0

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

@@ -0,0 +1,136 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Atoms/Card 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="card color-base size-sm is-clickable"
+  >
+    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!
+  </div>
+</div>
+`;
+
+exports[`Storyshots Atoms/Card Colors 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="card color-base size-sm"
+  >
+    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!
+  </div>
+  <div
+    className="card color-primary size-sm"
+  >
+    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!
+  </div>
+  <div
+    className="card color-secondary size-sm"
+  >
+    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!
+  </div>
+</div>
+`;
+
+exports[`Storyshots Atoms/Card 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="card color-base size-sm"
+  >
+    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!
+  </div>
+</div>
+`;
+
+exports[`Storyshots Atoms/Card Dragabble 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="card color-base size-sm is-draggable"
+  >
+    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!
+  </div>
+</div>
+`;
+
+exports[`Storyshots Atoms/Card Sizes 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="card color-base size-sm"
+  >
+    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!
+  </div>
+  <div
+    className="card color-base size-md"
+  >
+    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!
+  </div>
+  <div
+    className="card color-base size-lg"
+  >
+    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!
+  </div>
+</div>
+`;

package/atoms/Card/constants.js

@@ -0,0 +1,4 @@
+export const options = {
+  colors: ['base', 'primary', 'secondary'],
+  sizes: ['sm', 'md', 'lg'],
+}

package/atoms/Card/index.js

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

package/atoms/Check/Check.js

@@ -0,0 +1,28 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import Icon from '../Icon'
+
+import styles from './Check.module.css'
+import withStyles from '../../hocs/withStyles'
+
+export const Check = ({ isChecked, getStyles, onClickChecked }) => {
+  return isChecked ? (
+    <Icon name="checkCircle" color="muted" isClickable onClick={onClickChecked} />
+  ) : (
+    <span onClick={onClickChecked} className={getStyles('check')} />
+  )
+}
+
+Check.propTypes = {
+  getStyles: PropTypes.func.isRequired,
+  isChecked: PropTypes.bool,
+  onClickChecked: PropTypes.func,
+}
+
+Check.defaultProps = {
+  getStyles: () => { },
+  onClickChecked: () => { },
+}
+
+export default withStyles(styles)(Check)

package/atoms/Check/Check.module.css

@@ -0,0 +1,11 @@
+.check {
+  display: inline-flex;
+  width: 100%;
+  max-width: 17px;
+  height: 17px;
+  box-sizing: content-box;
+  border: var(--picture-border);
+  margin: 8px;
+  border-radius: var(--border-radius-full);
+  cursor: pointer;
+}

package/atoms/Check/Check.stories.js

@@ -0,0 +1,15 @@
+import { Check, styles } from '.'
+
+import { getTemplate } from '../../helpers/storybook'
+
+const Template = getTemplate(Check, styles)
+
+export default {
+  title: 'Atoms/Check',
+  component: Check,
+}
+
+export const Default = Template.bind({})
+
+export const Checked = Template.bind({})
+Checked.args = { isChecked: true }

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

@@ -0,0 +1,67 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Atoms/Check Checked 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 color-muted size-md background-transparent is-clickable"
+    style={
+      Object {
+        "height": 35,
+        "width": 35,
+      }
+    }
+  >
+    <svg
+      height={35}
+      viewBox="5 1 20 20"
+      width={35}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        clipRule="evenodd"
+        d="M14.93 20.86C9.45472 20.86 5 16.4053 5 10.93C5 5.45472 9.45472 1 14.93 1C20.4053 1 24.86 5.45472 24.86 10.93C24.86 16.4053 20.4053 20.86 14.93 20.86ZM14.93 2.09095C10.0559 2.09095 6.09095 6.05591 6.09095 10.93C6.09095 15.8041 10.0559 19.769 14.93 19.769C19.8041 19.769 23.769 15.8041 23.769 10.93C23.769 6.05591 19.8041 2.09095 14.93 2.09095Z"
+        fillRule="evenodd"
+      />
+      <path
+        clipRule="evenodd"
+        d="M13.744 15.221L8.67871 10.1423L9.45059 9.37155L13.7458 13.6773L20.41 7.01251L21.1807 7.78439L13.744 15.221Z"
+        fillRule="evenodd"
+      />
+    </svg>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Atoms/Check Default 1`] = `
+<div
+  style={
+    Object {
+      "alignContent": "flex-start",
+      "display": "flex",
+      "flexDirection": "column",
+      "flexWrap": "wrap",
+      "gap": "10px 30px",
+      "height": "100%",
+      "justifyContent": "flex-start",
+      "maxHeight": "auto",
+    }
+  }
+>
+  <span
+    className="check"
+  />
+</div>
+`;

package/atoms/Check/index.js

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

package/atoms/Checkbox/Checkbox.js

@@ -0,0 +1,77 @@
+import { useState } from 'react'
+import PropTypes from 'prop-types'
+
+import styles from './Checkbox.module.css'
+import withStyles from '../../hocs/withStyles'
+
+export const Checkbox = ({
+  getStyles,
+  onChange,
+  label,
+  id,
+  value,
+  name,
+  linkCheck,
+  nameLinkCheck,
+  handleClick,
+  disabled,
+}) => {
+  const [checked, setChecked] = useState(value)
+
+  return (
+    <div className={getStyles('checkbox')}>
+      <input
+        className={getStyles('checkbox-custom', { 'is-disabled': disabled })}
+        type="checkbox"
+        id={id}
+        name={name}
+        label={label}
+        checked={checked}
+        onChange={(e) => {
+          setChecked(!checked)
+          onChange(e)
+        }}
+        onClick={handleClick}
+        disabled={disabled}
+      />
+      <label htmlFor={name} className={getStyles('checkbox-custom-label')}>
+        {label}
+        <a
+          className={getStyles('checkbox-custom-link')}
+          href={linkCheck}
+          target="_black"
+        >
+          {' '}
+          {nameLinkCheck}
+        </a>{' '}
+      </label>
+    </div>
+  )
+}
+
+Checkbox.propTypes = {
+  getStyles: PropTypes.func.isRequired,
+  onChange: PropTypes.func.isRequired,
+  id: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+  value: PropTypes.bool.isRequired,
+  label: PropTypes.string,
+  nameLinkCheck: PropTypes.string,
+  linkCheck: PropTypes.string,
+  disabled: PropTypes.bool,
+}
+
+Checkbox.defaultProps = {
+  getStyles: () => { },
+  onChange: () => { },
+  id: 'checkbox',
+  name: 'checkbox',
+  value: true,
+  label: 'Aceptas los terminos',
+  nameLinkCheck: '',
+  linkCheck: '',
+  handleClick: () => { },
+  disabled: false,
+}
+
+export default withStyles(styles)(Checkbox)

package/atoms/Checkbox/Checkbox.module.css

@@ -0,0 +1,60 @@
+.checkbox {
+  display: flex;
+}
+
+/* ////////////////////// */
+
+
+.checkbox-custom {
+  opacity: 0;
+  position: absolute;
+}
+
+.checkbox-custom,
+.checkbox-custom-label {
+  display: inline-block;
+  vertical-align: middle;
+  margin: 5px;
+  cursor: pointer;
+  color: var(--color-brand-regent-gray);
+  font-weight: var(--font-weight-light);
+}
+
+.checkbox-custom+.checkbox-custom-label:before {
+  content: '';
+  background: #fff;
+  border-radius: 5px;
+  border: 2px solid #ddd;
+  display: inline-block;
+  vertical-align: middle;
+  width: 10px;
+  height: 10px;
+  padding: 2px;
+  margin-right: 10px;
+  text-align: center;
+}
+
+.checkbox-custom:checked+.checkbox-custom-label:before {
+  content: "";
+  display: inline-block;
+  width: 1px;
+  height: 5px;
+  border: solid var(--color-brand-smalt);
+  border-width: 0 3px 3px 0;
+  transform: rotate(45deg);
+  -webkit-transform: rotate(45deg);
+  -ms-transform: rotate(45deg);
+  border-radius: 0px;
+  margin: 0px 15px 5px 5px;
+}
+
+.checkbox-custom,
+.checkbox-custom-link {
+  font-weight: var(--font-weight-normal);
+  color: var(--color-primary);
+  text-decoration: underline;
+}
+
+.is-disabled {
+  cursor: no-drop;
+}

package/atoms/Checkbox/Checkbox.stories.js

@@ -0,0 +1,30 @@
+import { Checkbox, styles, options } from '.'
+
+import {
+  getTemplate,
+  getListTemplate,
+  getOptionsArgTypes,
+} from '../../helpers/storybook'
+
+const Template = getTemplate(Checkbox, styles)
+const ListTemplate = getListTemplate(Checkbox, styles)
+
+export default {
+  title: 'Atoms/Checkbox',
+  component: Checkbox,
+  args: {
+    id: 'hola',
+    name: 'hola',
+    value: true,
+    label: 'Hola',
+    nameLinkCheck: '',
+    linkCheck: '',
+  },
+  argTypes: {
+    // types: getOptionsArgTypes(options.types),
+  },
+}
+
+export const Default = Template.bind({})
+// export const List = ListTemplate.bind({})
+// List.args = { items: options.types.map((type) => ({ type })) }

package/atoms/Checkbox/constants.js

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

package/atoms/Checkbox/index.js

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

package/atoms/Divider/Divider.js

@@ -0,0 +1,22 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import styles from './Divider.module.css'
+import { options } from './constants'
+import withStyles from '../../hocs/withStyles'
+
+export const Divider = ({ color, getStyles }) => {
+  return <div className={getStyles('divider', ['color'])} />
+}
+
+Divider.propTypes = {
+  getStyles: PropTypes.func.isRequired,
+  color: PropTypes.oneOf(options.colors),
+}
+
+Divider.defaultProps = {
+  getStyles: () => {},
+  color: 'primary',
+}
+
+export default withStyles(styles)(Divider)

package/atoms/Divider/Divider.module.css

@@ -0,0 +1,25 @@
+.divider {
+  width: 100%;
+  height: 1px;
+  background: var(--color-font-base);
+}
+
+.color-primary {
+  background: var(--color-primary);
+}
+
+.color-secondary {
+  background: var(--color-secondary);
+}
+
+.color-tertiary {
+  background: var(--color-tertiary);
+}
+
+.color-highlight {
+  background: var(--color-primary-highlight);
+}
+
+.color-inverted {
+  background: var(--color-primary-inverted);
+}

package/atoms/Divider/Divider.stories.js

@@ -0,0 +1,23 @@
+import { Divider, styles, options } from '.'
+
+import {
+  getTemplate,
+  getListTemplate,
+  getOptionsArgTypes,
+} from '../../helpers/storybook'
+
+const Template = getTemplate(Divider, styles)
+const ListTemplate = getListTemplate(Divider, styles)
+
+export default {
+  title: 'Atoms/Divider',
+  component: Divider,
+  argTypes: {
+    color: getOptionsArgTypes(options.colors),
+  },
+}
+
+export const Default = Template.bind({})
+
+export const Colors = ListTemplate.bind({})
+Colors.args = { items: options.colors.map((color) => ({ color })) }

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

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

package/atoms/Divider/constants.js

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

package/atoms/Divider/index.js

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

package/atoms/Heading/Heading.js

@@ -0,0 +1,37 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import styles from './Heading.module.css'
+import { options } from './constants'
+import withStyles from '../../hocs/withStyles'
+
+export const Heading = ({ children, isCentered, isInline, getStyles }) => {
+  return (
+    <h1
+      className={getStyles('heading', ['color', 'size', 'weight'], {
+        'is-centered': isCentered,
+        'is-inline': isInline,
+      })}
+    >
+      {children}
+    </h1>
+  )
+}
+
+Heading.propTypes = {
+  children: PropTypes.any.isRequired,
+  getStyles: PropTypes.func.isRequired,
+  isInline: PropTypes.bool,
+  isCentered: PropTypes.bool,
+  color: PropTypes.oneOf(options.colors),
+  size: PropTypes.oneOf(options.sizes),
+  weight: PropTypes.oneOf(options.weights),
+}
+
+Heading.defaultProps = {
+  color: 'base',
+  size: 'md',
+  weight: 'bold',
+}
+
+export default withStyles(styles)(Heading)

package/atoms/Heading/Heading.module.css

@@ -0,0 +1,70 @@
+.heading {
+  width: 100%;
+  font-family: var(--font-family-sans);
+  line-height: var(--line-height-tight);
+}
+
+.color-base {
+  color: var(--color-font-base);
+}
+
+.color-inverted {
+  color: var(--color-primary-inverted);
+}
+
+.color-primary {
+  color: var(--color-primary);
+}
+
+.color-tertiary {
+  color: var(--color-tertiary);
+}
+
+.color-black {
+  color: var(--color-base-black);
+}
+
+.size-xs {
+  font-size: var(--font-size-xs);
+}
+
+.size-sm {
+  font-size: var(--font-size-sm);
+}
+
+.size-md {
+  font-size: var(--font-size-md);
+}
+
+.size-lg {
+  font-size: var(--font-size-lg);
+}
+
+.size-xl {
+  font-size: var(--font-size-xl);
+}
+
+.size-2xl {
+  font-size: var(--font-size-2xl);
+}
+
+.weight-light {
+  font-weight: var(--font-weight-light);
+}
+
+.weight-normal {
+  font-weight: var(--font-weight-normal);
+}
+
+.weight-bold {
+  font-weight: var(--font-weight-bold);
+}
+
+.is-centered {
+  text-align: center;
+}
+
+.is-inline {
+  display: inline-block;
+  max-width: max-content;
+}