imbric-theme 0.1.2 → 0.1.3

package/atoms/Input/Input.js

@@ -4,46 +4,226 @@ 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()
-}
+
+// 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,
 }) => (
-  <input
-    className={getStyles('input', {
-      'is-inline': isInline,
-    })}
-    type={type}
-    value={value}
-    placeholder={placeholder}
-    onChange={handleChange({ onChange })}
-  ></input>
+
+  <>
+
+    {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: '',
+  // value: '',
+  id: '',
   placeholder: '',
   isInline: false,
-  onChange: () => {},
-  getStyles: () => {},
+  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

@@ -1,20 +1,21 @@
 .input {
   width: 100%;
   height: var(--input-height);
-  padding: 12px 17px;
-  border: var(--border-width-thin) solid var(--color-primary);
+  padding: 10px 17px;
+  border: var(--border-width-thin) solid var(--color-brand-white-lilac);
   background: var(--input-background);
-  border-radius: var(--input-border-radius);
+  /* border-radius: var(--input-border-radius); */
   color: var(--color-font-base);
   font-family: var(--font-family-sans);
-  font-size: var(--input-font-size);
+  font-size: var(--font-size-base);
   font-weight: var(--font-weight-medium);
-  line-height: var(--line-height-tight);
+  line-height: var(--line-height-relaxed);
   transition: box-shadow 0.2s ease;
 }
 
 .input::placeholder {
-  color: var(--color-font-highlight);
+  color: var(--color-brand-white-lilac);
+  font-weight: var(--font-weight-light);
 }
 
 .input:focus {
@@ -22,6 +23,61 @@
   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

@@ -13,7 +13,7 @@ export default {
   title: 'Atoms/Input',
   component: Input,
   args: {
-    placeholder: 'Kingdom slowed',
+    placeholder: 'Et harum quidem',
   },
   argTypes: {
     type: getOptionsArgTypes(options.types),
@@ -23,10 +23,16 @@ export default {
 export const Default = Template.bind({})
 
 export const Value = Template.bind({})
-Value.args = { value: 'Others mainly cakehole Thorin moldy facial.' }
+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

@@ -18,7 +18,7 @@ exports[`Storyshots Atoms/Input Default 1`] = `
   <input
     className="input"
     onChange={[Function]}
-    placeholder="Kingdom slowed"
+    placeholder="Et harum quidem"
     type="text"
     value=""
   />
@@ -43,7 +43,7 @@ exports[`Storyshots Atoms/Input Inline 1`] = `
   <input
     className="input is-inline"
     onChange={[Function]}
-    placeholder="Kingdom slowed"
+    placeholder="Et harum quidem"
     type="text"
     value=""
   />
@@ -68,7 +68,7 @@ exports[`Storyshots Atoms/Input Types 1`] = `
   <input
     className="input"
     onChange={[Function]}
-    placeholder="Kingdom slowed"
+    placeholder="Et harum quidem"
     type="text"
     value=""
   />
@@ -93,9 +93,9 @@ exports[`Storyshots Atoms/Input Value 1`] = `
   <input
     className="input"
     onChange={[Function]}
-    placeholder="Kingdom slowed"
+    placeholder="Et harum quidem"
     type="text"
-    value="Others mainly cakehole Thorin moldy facial."
+    value="Nam libero tempore, cum soluta."
   />
 </div>
 `;

package/atoms/Input/constants.js

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

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/{Link/Link.module.css → LinkItem/LinkItem.module.css}

@@ -1,7 +1,7 @@
 .link {
   display: inline;
   max-width: max-content;
-  border-bottom: 1px solid currentColor;
+  /* border-bottom: 1px solid currentColor; */
   cursor: pointer;
 }
 
@@ -12,3 +12,8 @@
 .color-tertiary {
   color: var(--color-tertiary);
 }
+
+.link p {
+  font-weight: var(--font-weight-normal);
+  text-decoration: underline;
+}

package/atoms/{Link/Link.stories.js → LinkItem/LinkItem.stories.js}

@@ -1,4 +1,4 @@
-import { Link, styles, options } from '.'
+import { LinkItem, styles, options } from '.'
 
 import {
   getTemplate,
@@ -6,12 +6,12 @@ import {
   getOptionsArgTypes,
 } from '../../helpers/storybook'
 
-const Template = getTemplate(Link, styles)
-const ListTemplate = getListTemplate(Link, styles)
+const Template = getTemplate(LinkItem, styles)
+const ListTemplate = getListTemplate(LinkItem, styles)
 
 export default {
-  title: 'Atoms/Link',
-  component: Link,
+  title: 'Atoms/LinkItem',
+  component: LinkItem,
   args: {
     children: 'Mouths Muil',
   },

package/atoms/LinkItem/index.js

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

package/atoms/Modal/Modal.js

@@ -8,7 +8,9 @@ import Icon from '../Icon'
 import Container from '../../layout/Container'
 import isEmpty from '../../utils/isEmpty'
 
+
 import useMedia from '../../hook/useMedia'
+import Heading from '../Heading'
 
 // Sync with ./Modal.module.css#L13-L17
 const FADE_OUT_ANIMATION_TIME = 400
@@ -33,6 +35,9 @@ export const Modal = ({
   getStyles,
   type,
   isPlayground,
+  titleModal,
+  isFullWidth,
+  isFullWidthSoft,
 }) => {
   const isDesktop = useMedia(['(min-width: 992px)'], [true])
   const [onFadeOut, setOnFadeOut] = useState(false)
@@ -48,13 +53,14 @@ export const Modal = ({
       onClick={handleClose}
     >
       <div
-        className={getStyles('modal', ['type'])}
+        className={getStyles(isFullWidth ? 'modal-full' : isFullWidthSoft ? 'modal-full-soft' : 'modal', ['type'])}
         onClick={createHandlerClick()}
       >
         <div className={getStyles('heading')}>
           {!!onClose && (
             <Icon
-              color={isDesktop && type === 'secondary' ? 'primary' : 'inverted'}
+              id='btnColsedModal'
+              color={isDesktop && type === 'secondary' ? 'primary' : 'primary'}
               name={isDesktop ? 'cross' : 'angleLeft'}
               background={isDesktop ? 'transparent' : 'muted'}
               onClick={handleClose}
@@ -71,8 +77,19 @@ export const Modal = ({
               })}
             />
           )}
+          <Heading color='black' size='lg' weight='light'>
+            {titleModal}
+          </Heading>
         </div>
-        <Container>{children}</Container>
+
+        {isFullWidth ?
+          <div className={getStyles('container-full')}>{children}</div>
+          :
+          isFullWidthSoft ? <div className={getStyles('container-full-soft')}>{children}</div>
+            :
+            <Container><div className={getStyles('container')}>{children}</div></Container>
+        }
+
       </div>
     </div>
   )
@@ -88,11 +105,17 @@ Modal.propTypes = {
   }),
   type: PropTypes.oneOf(options.types),
   isPlayground: PropTypes.bool,
+  isFullWidth: PropTypes.bool,
+  isFullWidthSoft: PropTypes.bool,
+  titleModal: PropTypes.string,
 }
 
 Modal.defaultProps = {
-  getStyles: () => {},
+  getStyles: () => { },
   type: 'primary',
+  titleModal: 'Ejemplo titulo',
+  isFullWidth: false,
+  isFullWidthSoft: false
 }
 
 export default withStyles(styles)(Modal)