imbric-theme 0.1.0

package/atoms/Icon/helpers.js

@@ -0,0 +1,9 @@
+const iconSize = {
+  xs: 14,
+  sm: 25,
+  md: 35,
+  lg: 50,
+  xl: 70,
+}
+
+export const mapSize = (size) => iconSize[size]

package/atoms/Icon/index.js

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

package/atoms/Input/Input.js

@@ -0,0 +1,229 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import styles from './Input.module.css'
+import { options } from './constants'
+import withStyles from '../../hocs/withStyles'
+import Icon from '../Icon'
+import { Horizontal } from '../../layout/Spacer/components'
+
+
+// const handleChange = ({ onChange }) => () => {
+//   onChange()
+// }
+
+export const Input = ({
+  getStyles,
+  type,
+  id,
+  value,
+  isInline,
+  isInlineCode,
+  isInputFilter,
+  isInputSecondary,
+  onChange,
+  onFocus,
+  onBlur,
+  onClick,
+  onKeyDown,
+  onKeyUp,
+  onInput,
+  maxLength,
+  placeholder,
+  autoComplete,
+  disabled,
+  isViewIcon,
+  idIcon,
+  nameIcon,
+  sizeIcon,
+  colorIcon,
+  backgroundIcon,
+  pattern,
+  onClickViewPass,
+  viewPass,
+  min,
+  autoFocus,
+  readonly,
+}) => (
+
+  <>
+
+    {isViewIcon ?
+
+      <div className={getStyles('box-icon-input')}>
+
+        <Icon
+          id={idIcon}
+          name={nameIcon}
+          size={sizeIcon}
+          color={colorIcon}
+          background={backgroundIcon}
+        />
+
+        <Horizontal size="xs" />
+
+        <input
+          className={getStyles('input', {
+            'is-inline': isInline,
+            'is-inline-code': isInlineCode,
+            'is-input-filter': isInputFilter,
+            'is-input-secondary': isInputSecondary,
+          })}
+          readOnly={readonly}
+          type={type}
+          id={id}
+          value={value}
+          placeholder={placeholder}
+          onChange={onChange}
+          onFocus={onFocus}
+          onBlur={onBlur}
+          onClick={onClick}
+          onKeyDown={onKeyDown}
+          onKeyUp={onKeyUp}
+          onInput={onInput}
+          autoComplete={autoComplete}
+          disabled={disabled}
+          min={min}
+        ></input>
+
+      </div> :
+
+      type === 'password' ?
+
+
+
+        <div className={getStyles('box-icon-input')}>
+
+          <input
+            className={getStyles('input', {
+              'is-inline': isInline,
+              'is-inline-code': isInlineCode,
+              'is-input-filter': isInputFilter,
+              'is-input-secondary': isInputSecondary,
+            })}
+            readOnly={readonly}
+            type={type}
+            id={id}
+            value={value}
+            placeholder={placeholder}
+            onChange={onChange}
+            onFocus={onFocus}
+            onBlur={onBlur}
+            onClick={onClick}
+            onKeyDown={onKeyDown}
+            autoComplete={autoComplete}
+            disabled={disabled}
+            min={min}
+            onInput={onInput}
+          ></input>
+
+          <Horizontal size="xs" />
+
+          <Icon
+            background={!viewPass ? "inverted" : "success"}
+            color={!viewPass ? "base" : "inverted"}
+            isClickable
+            name="userView"
+            onClick={onClickViewPass}
+            size="sm"
+          />
+
+
+        </div>
+
+
+
+        : <input
+          className={getStyles('input', {
+            'is-inline': isInline,
+            'is-inline-code': isInlineCode,
+            'is-input-filter': isInputFilter,
+            'is-input-secondary': isInputSecondary,
+          })}
+          readOnly={readonly}
+          type={type}
+          id={id}
+          value={value}
+          placeholder={placeholder}
+          onChange={onChange}
+          onFocus={onFocus}
+          onBlur={onBlur}
+          onClick={onClick}
+          onKeyDown={onKeyDown}
+          maxLength={maxLength}
+          autoComplete={autoComplete}
+          disabled={disabled}
+          min={min}
+          autoFocus={autoFocus}
+          onInput={onInput}
+        ></input>
+
+    }
+
+  </>
+)
+
+Input.propTypes = {
+  onChange: PropTypes.func.isRequired,
+  onFocus: PropTypes.func,
+  onBlur: PropTypes.func,
+  onClick: PropTypes.func,
+  onKeyDown: PropTypes.func,
+  onKeyUp: PropTypes.func,
+  onInput: PropTypes.func,
+  maxLength: PropTypes.number,
+  getStyles: PropTypes.func.isRequired,
+  type: PropTypes.oneOf(options.types),
+  id: PropTypes.string.isRequired,
+  value: PropTypes.string,
+  placeholder: PropTypes.string,
+  isInline: PropTypes.bool,
+  isInlineCode: PropTypes.bool,
+  isInputFilter: PropTypes.bool,
+  isInputSecondary: PropTypes.bool,
+  isViewIcon: PropTypes.bool,
+  idIcon: PropTypes.string,
+  nameIcon: PropTypes.string,
+  sizeIcon: PropTypes.string,
+  colorIcon: PropTypes.string,
+  backgroundIcon: PropTypes.string,
+  autoComplete: PropTypes.string,
+  disabled: PropTypes.bool,
+  readonly: PropTypes.bool,
+  min: PropTypes.any,
+  autoFocus: PropTypes.any,
+  onClickViewPass: PropTypes.func,
+  viewPass: PropTypes.bool,
+}
+
+Input.defaultProps = {
+  type: 'text',
+  // value: '',
+  id: '',
+  placeholder: '',
+  isInline: false,
+  isInlineCode: false,
+  isInputFilter: false,
+  isInputSecondary: false,
+  onChange: () => { },
+  onFocus: () => { },
+  onBlur: () => { },
+  onClick: () => { },
+  onKeyDown: () => { },
+  onKeyUp: () => { },
+  onInput: () => { },
+  getStyles: () => { },
+  isViewIcon: false,
+  idIcon: 'Ejemplo',
+  nameIcon: 'user',
+  sizeIcon: 'md',
+  colorIcon: 'highlight',
+  backgroundIcon: 'base',
+  autoComplete: 'on',
+  disabled: false,
+  readonly: false,
+  onClickViewPass: () => { },
+  viewPass: false,
+}
+
+export default withStyles(styles)(Input)

package/atoms/Input/Input.module.css

@@ -0,0 +1,83 @@
+.input {
+  width: 100%;
+  height: var(--input-height);
+  padding: 10px 17px;
+  border: var(--border-width-thin) solid var(--color-brand-white-lilac);
+  background: var(--input-background);
+  /* border-radius: var(--input-border-radius); */
+  color: var(--color-font-base);
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-medium);
+  line-height: var(--line-height-relaxed);
+  transition: box-shadow 0.2s ease;
+}
+
+.input::placeholder {
+  color: var(--color-brand-white-lilac);
+  font-weight: var(--font-weight-light);
+}
+
+.input:focus {
+  box-shadow: 0 0 0 1px var(--color-primary), 0 0 10px 0 var(--color-primary);
+  outline: none;
+}
+
+.input:disabled::placeholder {
+  color: #9a9a9a;
+  font-weight: var(--font-weight-light);
+}
+
+.input:disabled {
+  background: #dedede;
+}
+
+[data-theme="GrupoMutua"] .input {
+  border-radius: var(--button-border-radius-sm);
+}
+
+[data-theme="Taxisvalencia"] .input,
+[data-theme="Radiotaxiaragon"] .input,
+[data-theme="Spartan"] .input,
+[data-theme="Default"] .input {
+  border-radius: var(--button-border-radius-sm);
+}
+
+
+.is-inline {
+  max-width: max-content;
+}
+
+.is-inline-code {
+  max-width: 38px;
+  padding: 7px 9px;
+  margin-right: 8px;
+  font-size: var(--font-size-md);
+  font-weight: var(--font-weight-bold);
+  text-align: center;
+}
+
+.is-input-filter {
+  border-radius: var(--border-radius-sm);
+  color: var(--color-font-highlight);
+  padding: 7px 9px;
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-light);
+  text-align: left;
+  height: 28px;
+}
+
+.is-input-secondary {
+  border-radius: var(--border-radius-sm);
+  color: var(--color-font-base);
+  padding: 7px 9px;
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-light);
+  text-align: left;
+  height: 28px;
+}
+
+.box-icon-input {
+  display: flex;
+  align-items: center;
+}

package/atoms/Input/Input.stories.js

@@ -0,0 +1,38 @@
+import { Input, options, styles } from '.'
+
+import {
+  getTemplate,
+  getListTemplate,
+  getOptionsArgTypes,
+} from '../../helpers/storybook'
+
+const Template = getTemplate(Input, styles)
+const ListTemplate = getListTemplate(Input, styles)
+
+export default {
+  title: 'Atoms/Input',
+  component: Input,
+  args: {
+    placeholder: 'Et harum quidem',
+  },
+  argTypes: {
+    type: getOptionsArgTypes(options.types),
+  },
+}
+
+export const Default = Template.bind({})
+
+export const Value = Template.bind({})
+Value.args = { value: 'Nam libero tempore, cum soluta.' }
+
+export const Types = ListTemplate.bind({})
+Types.args = { items: options.types.map((type) => ({ type })) }
+
+export const Inline = Template.bind({})
+Inline.args = { isInline: true }
+
+export const InlineCode = Template.bind({})
+InlineCode.args = { isInlineCode: true }
+
+export const isInputFilter = Template.bind({})
+isInputFilter.args = { isInputFilter: true }

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="Et harum quidem"
+    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="Et harum quidem"
+    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="Et harum quidem"
+    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="Et harum quidem"
+    type="text"
+    value="Nam libero tempore, cum soluta."
+  />
+</div>
+`;

package/atoms/Input/constants.js

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

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/Label/Label.js

@@ -0,0 +1,31 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import styles from './Label.module.css'
+import { options } from './constants'
+import withStyles from '../../hocs/withStyles'
+
+export const Label = ({ children, getStyles, isHint }) => {
+  return (
+
+    <label className={getStyles('label', ['color'], { 'is-hint': isHint })}>{children}</label>
+
+  )
+}
+
+Label.propTypes = {
+  children: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+  getStyles: PropTypes.func.isRequired,
+  isHint: PropTypes.bool,
+  color: PropTypes.oneOf(options.colors),
+  // type: PropTypes.oneOf(options.types),
+}
+
+Label.defaultProps = {
+  getStyles: () => { },
+  children: ' ',
+  isHint: false,
+  color: 'label',
+}
+
+export default withStyles(styles)(Label)

package/atoms/Label/Label.module.css

@@ -0,0 +1,42 @@
+.label {
+  display: flex;
+  text-align: left;
+  width: 100%;
+  /* color: var(--color-brand-eastern-blue); */
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-mini);
+  font-weight: var(--font-weight-light);
+  line-height: var(--line-height-tight);
+}
+
+.is-hint {
+  font-size: 11px;
+}
+
+.color-label {
+  color: var(--color-brand-eastern-blue);
+}
+
+.color-base {
+  color: var(--color-font-base);
+}
+
+.color-inverted {
+  color: var(--color-font-inverted);
+}
+
+.color-muted {
+  color: var(--color-brand-mandy);
+}
+
+.color-primary {
+  color: var(--color-primary);
+}
+
+.color-tertiary {
+  color: var(--color-tertiary);
+}
+
+.color-info {
+  color: var(--color-brand-azure-radiance);
+}

package/atoms/Label/Label.stories.js

@@ -0,0 +1,26 @@
+import { Label, styles, options } from '.'
+
+import {
+  getTemplate,
+  getListTemplate,
+  getOptionsArgTypes,
+} from '../../helpers/storybook'
+
+const Template = getTemplate(Label, styles)
+const ListTemplate = getListTemplate(Label, styles)
+
+export default {
+  title: 'Atoms/Label',
+  component: Label,
+  args: {
+    isHint: false
+  },
+  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/Label/constants.js

@@ -0,0 +1 @@
+export const options = { colors: ['label', 'base', 'muted', 'inverted', 'primary', 'tertiary', 'info'], }

package/atoms/Label/index.js

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

package/atoms/LinkItem/LinkItem.js

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

package/atoms/LinkItem/LinkItem.module.css

@@ -0,0 +1,19 @@
+.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);
+}
+
+.link p {
+  font-weight: var(--font-weight-normal);
+  text-decoration: underline;
+}

package/atoms/LinkItem/LinkItem.stories.js

@@ -0,0 +1,30 @@
+import { LinkItem, styles, options } from '.'
+
+import {
+  getTemplate,
+  getListTemplate,
+  getOptionsArgTypes,
+} from '../../helpers/storybook'
+
+const Template = getTemplate(LinkItem, styles)
+const ListTemplate = getListTemplate(LinkItem, styles)
+
+export default {
+  title: 'Atoms/LinkItem',
+  component: LinkItem,
+  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 })) }