imbric-theme 0.3.3 → 0.3.6

package/.storybook/main.js

@@ -3,7 +3,7 @@ const cssModules = require('../webpack/cssModules')
 const reactInlineSvg = require('../webpack/reactInlineSvg')
 
 module.exports = {
-  stories: ['../{tokens,atoms,molecules,layout}/**/*.stories.@(js|mdx)'],
+  stories: ['../{tokens,atoms,molecules,layout,pages}/**/*.stories.@(js|mdx)'],
   addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
   staticDirs: ['../public'],
   webpackFinal: loadConfigs([cssModules, reactInlineSvg]),

package/atoms/AlertModal/AlertModal.js

@@ -0,0 +1,77 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import styles from './AlertModal.module.css'
+import { options } from './constants'
+import withStyles from '../../hocs/withStyles'
+import withReactContent from 'sweetalert2-react-content'
+import Swal from 'sweetalert2'
+
+export const handleClickConfirmed = ( resultIsConfirmed ) => {
+  resultIsConfirmed
+}
+
+
+export const AlertModal = ({ children, getStyles, titleAlert, subTitleAlert, iconAlert, txtBtnAlert, resultIsConfirmed, resultIsDenied }) => {
+
+  const MySwal = withReactContent(Swal)
+
+  // MySwal.fire({
+  //   title: <p>Hello World</p>,
+  //   didOpen: () => {
+  //     // `MySwal` is a subclass of `Swal` with all the same instance & static methods
+  //     MySwal.showLoading()
+  //   },
+  // }).then(() => {
+  //   return MySwal.fire(<p>Shorthand works too</p>)
+  // })
+
+  // MySwal.fire(
+  //   'Good job!',
+  //   'You clicked the button!',
+  //   'success'
+  // )
+
+  MySwal.fire({
+    title: titleAlert,
+    icon: iconAlert,
+    html: subTitleAlert,
+    confirmButtonText: txtBtnAlert,
+  }).then((result) => {
+    /* Read more about isConfirmed, isDenied below */
+    if (result.isConfirmed) {
+
+      handleClickConfirmed(resultIsConfirmed)  
+
+    } else if (result.isDenied) {
+      resultIsDenied
+    }
+  })
+
+
+  return <div className={getStyles('alert-modal')}>{children}</div>
+}
+
+AlertModal.propTypes = {
+  children: PropTypes.node,
+  getStyles: PropTypes.func.isRequired,
+  titleAlert: PropTypes.string.isRequired,
+  subTitleAlert:  PropTypes.string.isRequired,
+  txtBtnAlert:  PropTypes.string.isRequired,
+  resultIsConfirmed: PropTypes.any,
+  resultIsDenied: PropTypes.any,
+  iconAlert: PropTypes.oneOf(options.icon),
+}
+
+AlertModal.defaultProps = {
+  getStyles: () => {},
+  titleAlert: 'Felicidades!',
+  subTitleAlert:  'Ejemplo de subtitulo',
+  txtBtnAlert: 'Aceptar',
+  iconAlert: 'success',
+  // resultIsConfirmed: () => { setModalAlert(false)},
+  // resultIsConfirmed: (setModalAlert(false)),
+  // resultIsDenied: '',
+}
+
+export default withStyles(styles)(AlertModal)

package/atoms/AlertModal/AlertModal.module.css

@@ -0,0 +1,3 @@
+.alert-modal {
+  display: flex;
+}

package/atoms/AlertModal/AlertModal.stories.js

@@ -0,0 +1,30 @@
+import { AlertModal, styles, options } from '.'
+options
+
+import {
+  getTemplate,
+  getListTemplate,
+  getOptionsArgTypes,
+} from '../../helpers/storybook'
+
+const Template = getTemplate(AlertModal, styles)
+const ListTemplate = getListTemplate(AlertModal, styles)
+
+export default {
+  title: 'Atoms/AlertModal',
+  component: AlertModal,
+  args: {
+    titleAlert: 'Felicidades!',
+    subTitleAlert:  'Ejemplo de subtitulo',
+    txtBtnAlert:  'Aceptar',
+    // resultIsConfirmed: true,
+    // resultIsDenied: '',
+  },
+  argTypes: {
+    iconAlert: getOptionsArgTypes(options.icon),
+  },
+}
+
+export const Default = Template.bind({})
+// export const List = ListTemplate.bind({})
+// List.args = { items: options.types.map((type) => ({ type })) }

package/atoms/AlertModal/constants.js

@@ -0,0 +1,4 @@
+export const options = {
+    icon: ['success', 'error', 'warning', 'info', 'question'],
+  }
+  

package/atoms/AlertModal/index.js

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

package/atoms/Button/Button.js

@@ -24,6 +24,8 @@ export const Button = ({
   getStyles,
 }) => (
   <button
+    type="submit"
+    disabled={isMuted}
     className={getStyles('button', ['type'], {
       'is-inline': isInline || type === 'tertiary',
       'is-muted': isMuted && type === 'primary',
@@ -37,6 +39,7 @@ export const Button = ({
       isCentered
       isInline={isObject(addons) && !isEmpty(addons)}
       weight={'light'}
+      size={'xs'}
     >
       {children}
     </Heading>
@@ -60,8 +63,8 @@ Button.propTypes = {
 
 Button.defaultProps = {
   type: 'primary',
-  getStyles: () => {},
-  onClick: () => {},
+  getStyles: () => { },
+  onClick: () => { },
   isInline: false,
 }
 

package/atoms/Button/Button.module.css

@@ -2,10 +2,10 @@
   display: inline-flex;
   width: 100%;
   min-width: max-content;
-  height: 45px;
+  height: 40px;
   align-items: center;
   justify-content: center;
-  padding: 20px 30px;
+  padding: 12px 30px;
   border: var(--border-width-thin) solid var(--color-base-transparent);
   border-radius: var(--button-border-radius-none);
   box-shadow: var(--box-shadow-sm);
@@ -59,5 +59,8 @@
 }
 
 .is-muted {
-  background: var(--color-primary-muted);
+  background: var(--color-font-muted);
+  cursor: default;
+  box-shadow: var(--box-shadow-none) !important;
+  filter: brightness(1) !important;
 }

package/atoms/Checkbox/Checkbox.js

@@ -0,0 +1,66 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import styles from './Checkbox.module.css'
+import { options } from './constants'
+import withStyles from '../../hocs/withStyles'
+
+
+export const Checkbox = ({ getStyles, onChange, label, id, value, name, linkCheck, nameLinkCheck }) => {
+
+  const [checked, setChecked] = React.useState(false);
+
+
+  return (
+
+    <div className={getStyles('checkbox')}>
+
+      {/* <input
+        type="checkbox"
+        id={id}
+        name={name}
+        label={label}
+        value={value}
+        onChange={onChange}
+      />
+      &nbsp;{label} */}
+
+      <input className={getStyles('checkbox-custom')} 
+        type="checkbox"
+        id={id}
+        name={name}
+        label={label}
+        value={value}
+        onChange={onChange}
+ />
+      <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,
+}
+
+Checkbox.defaultProps = {
+  getStyles: () => { },
+  onChange: () => { },
+  id: 'hola',
+  name: 'hola',
+  value: true,
+  label: 'Hola',
+  nameLinkCheck: '',
+  linkCheck: '',
+}
+
+export default withStyles(styles)(Checkbox)

package/atoms/Checkbox/Checkbox.module.css

@@ -0,0 +1,54 @@
+.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;
+}

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

@@ -19,7 +19,7 @@ export const Heading = ({ children, isCentered, isInline, getStyles }) => {
 }
 
 Heading.propTypes = {
-  children: PropTypes.string.isRequired,
+  children: PropTypes.any.isRequired,
   getStyles: PropTypes.func.isRequired,
   isInline: PropTypes.bool,
   isCentered: PropTypes.bool,

package/atoms/Heading/Heading.module.css

@@ -20,6 +20,10 @@
   color: var(--color-tertiary);
 }
 
+.color-black {
+  color: var(--color-base-black);
+}
+
 .size-xs {
   font-size: var(--font-size-xs);
 }

package/atoms/Heading/constants.js

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

package/atoms/Icon/constants.js

@@ -59,18 +59,18 @@ export const iconsMap = {
         d="M5,10L15,0l0.9,0.9L6.8,10l9.1,9.1L15,20L5,10z"
       />
 
-      
+
     ),
   },
   angleRight: {
     viewBox: '0 0 20 20',
     svg: (
 
-      <path 
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M15.9,10l-10,10L5,19.1l9.1-9.1L5,0.9L5.9,0C5.9,0,15.9,10,15.9,10z"
-    />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M15.9,10l-10,10L5,19.1l9.1-9.1L5,0.9L5.9,0C5.9,0,15.9,10,15.9,10z"
+      />
 
 
     ),
@@ -85,6 +85,30 @@ export const iconsMap = {
       />
     ),
   },
+  angleUpDown: {
+    viewBox: '0 0 15 15',
+    svg: (
+      <path d="M3.6,4.3c-0.3,0.3-0.3,0.7,0,1c0.3,0.3,0.7,0.3,1,0l2.9-2.9l2.9,2.9c0.3,0.3,0.7,0.3,1,0c0.3-0.3,0.3-0.7,0-1
+	L8,0.9C7.9,0.8,7.7,0.7,7.5,0.7C7.3,0.7,7.1,0.8,7,0.9L3.6,4.3z M11.4,10.7c0.3-0.3,0.3-0.7,0-1c-0.3-0.3-0.7-0.3-1,0l-2.9,2.9
+	L4.6,9.7c-0.3-0.3-0.7-0.3-1,0c-0.3,0.3-0.3,0.7,0,1L7,14.1c0.3,0.3,0.7,0.3,1,0L11.4,10.7z"/>
+    ),
+  },
+
+  fileDownload: {
+    viewBox: '0 0 21 21',
+    svg: (
+      <g transform="translate(4 2)">
+        <path d="M11.7,18.8H1.3c-1.7,0-3.1-1.4-3.1-3.1v-13c0-1.7,1.4-3.1,3.1-3.1h2.6c0.3,0,0.5,0.2,0.5,0.5S4.2,0.5,3.9,0.5H1.3
+		c-1.2,0-2.1,0.9-2.1,2.1v13c0,1.2,0.9,2.1,2.1,2.1h10.4c1.2,0,2.1-0.9,2.1-2.1l0-10.2L8.8,0.4c-0.2-0.2-0.2-0.5,0-0.7
+		s0.5-0.2,0.7,0l5.2,5.2c0.1,0.1,0.1,0.2,0.1,0.4l0,10.4C14.8,17.4,13.4,18.8,11.7,18.8z"/>
+        <path d="M6.5,13.6c-0.1,0-0.3,0-0.3-0.1L2.2,9.6C2,9.4,2,9.1,2.2,8.9c0.2-0.2,0.5-0.2,0.7,0l3.6,3.5l3.6-3.5c0.2-0.2,0.5-0.2,0.7,0
+		c0.2,0.2,0.2,0.5,0,0.7l-3.9,3.8C6.8,13.5,6.6,13.6,6.5,13.6z"/>
+        <path d="M6.5,13.6c-0.3,0-0.5-0.2-0.5-0.5V-1.3c0-0.3,0.2-0.5,0.5-0.5S7-1.6,7-1.3v14.3C7,13.3,6.8,13.6,6.5,13.6z" />
+      </g>
+    ),
+  },
+
+
   pauseCircle: {
     viewBox: '0 0 28 28',
     svg: (

package/atoms/Input/Input.js

@@ -5,44 +5,61 @@ import styles from './Input.module.css'
 import { options } from './constants'
 import withStyles from '../../hocs/withStyles'
 
-const handleChange = ({ onChange }) => () => {
-  onChange()
-}
+// const handleChange = ({ onChange }) => () => {
+//   onChange()
+// }
 
 export const Input = ({
   getStyles,
   type,
+  id,
   value,
   isInline,
+  isInlineCode,
+  isInputFilter,
   onChange,
+  onClick,
   placeholder,
+  pattern,
 }) => (
   <input
     className={getStyles('input', {
       'is-inline': isInline,
+      'is-inline-code': isInlineCode,
+      'is-input-filter': isInputFilter,
     })}
     type={type}
+    id={id}
     value={value}
     placeholder={placeholder}
-    onChange={handleChange({ onChange })}
+    onChange={onChange}
+    onClick={onClick}
   ></input>
 )
 
 Input.propTypes = {
   onChange: PropTypes.func.isRequired,
+  onClick: PropTypes.func,
   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,
 }
 
 Input.defaultProps = {
   type: 'text',
-  value: '',
+  // value: '',
+  id: '',
   placeholder: '',
   isInline: false,
+  isInlineCode: false,
+  isInputFilter: false,
   onChange: () => {},
+  onClick: () => {},
   getStyles: () => {},
 }
 

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 {
@@ -25,3 +26,22 @@
 .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;
+}

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 = { isisInputFilter: 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'],
 }

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.string,
+  getStyles: PropTypes.func.isRequired,
+  isHint: PropTypes.bool,
+  color: PropTypes.oneOf(options.colors),
+  // type: PropTypes.oneOf(options.types),
+}
+
+Label.defaultProps = {
+  getStyles: () => {},
+  children: 'label example',
+  isHint: false,
+  color: 'label',
+}
+
+export default withStyles(styles)(Label)