imbric-theme 0.3.4 → 0.3.8

package/atoms/Checkbox/Checkbox.js

@@ -5,7 +5,8 @@ import styles from './Checkbox.module.css'
 import { options } from './constants'
 import withStyles from '../../hocs/withStyles'
 
-export const Checkbox = ({ getStyles, onChange, label, id, value, name }) => {
+
+export const Checkbox = ({ getStyles, onChange, label, id, value, name, linkCheck, nameLinkCheck }) => {
 
   const [checked, setChecked] = React.useState(false);
 
@@ -14,17 +15,29 @@ export const Checkbox = ({ getStyles, onChange, label, id, value, name }) => {
 
     <div className={getStyles('checkbox')}>
 
-      <input
-      type="checkbox"
+      {/* <input
+        type="checkbox"
         id={id}
         name={name}
         label={label}
         value={value}
         onChange={onChange}
       />
-      {label}
+      &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>
-    
+
   )
 }
 
@@ -33,17 +46,21 @@ Checkbox.propTypes = {
   onChange: PropTypes.func.isRequired,
   id: PropTypes.string.isRequired,
   name: PropTypes.string.isRequired,
-  value: PropTypes.string.isRequired,
-  label: PropTypes.string
+  value: PropTypes.bool.isRequired,
+  label: PropTypes.string,
+  nameLinkCheck: PropTypes.string,
+  linkCheck: PropTypes.string,
 }
 
 Checkbox.defaultProps = {
   getStyles: () => { },
   onChange: () => { },
-  id: '1',
-  name: '1',
+  id: 'hola',
+  name: 'hola',
   value: true,
   label: 'Hola',
+  nameLinkCheck: '',
+  linkCheck: '',
 }
 
 export default withStyles(styles)(Checkbox)

package/atoms/Checkbox/Checkbox.module.css

@@ -1,3 +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

@@ -13,10 +13,12 @@ export default {
   title: 'Atoms/Checkbox',
   component: Checkbox,
   args: {
-    id: '1',
-    name: '1',
+    id: 'hola',
+    name: 'hola',
     value: true,
     label: 'Hola',
+    nameLinkCheck: '',
+    linkCheck: '',
   },
   argTypes: {
     // types: getOptionsArgTypes(options.types),

package/atoms/Icon/constants.js

@@ -88,7 +88,7 @@ export const iconsMap = {
   angleUpDown: {
     viewBox: '0 0 15 15',
     svg: (
-      <path class="st0" 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
+      <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"/>
     ),

package/atoms/Input/Input.js

@@ -20,6 +20,7 @@ export const Input = ({
   onChange,
   onClick,
   placeholder,
+  pattern,
 }) => (
   <input
     className={getStyles('input', {

package/atoms/LinkItem/LinkItem.js

@@ -0,0 +1,36 @@
+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 }) => {
+  return (
+    <Link href={isHref} passHref>
+      <a 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),
+}
+
+LinkItem.defaultProps = {
+  getStyles: () => { },
+  color: 'primary',
+  size: 'md',
+  isHref: '/',
+}
+
+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,7 @@ export const Modal = ({
   getStyles,
   type,
   isPlayground,
+  titleModal,
 }) => {
   const isDesktop = useMedia(['(min-width: 992px)'], [true])
   const [onFadeOut, setOnFadeOut] = useState(false)
@@ -54,7 +57,7 @@ export const Modal = ({
         <div className={getStyles('heading')}>
           {!!onClose && (
             <Icon
-              color={isDesktop && type === 'secondary' ? 'primary' : 'inverted'}
+              color={isDesktop && type === 'secondary' ? 'primary' : 'primary'}
               name={isDesktop ? 'cross' : 'angleLeft'}
               background={isDesktop ? 'transparent' : 'muted'}
               onClick={handleClose}
@@ -71,6 +74,9 @@ export const Modal = ({
               })}
             />
           )}
+					<Heading color='black' size='lg' weight='light'>
+						{titleModal}
+					</Heading>
         </div>
         <Container>{children}</Container>
       </div>
@@ -88,11 +94,13 @@ Modal.propTypes = {
   }),
   type: PropTypes.oneOf(options.types),
   isPlayground: PropTypes.bool,
+  titleModal: PropTypes.string,
 }
 
 Modal.defaultProps = {
   getStyles: () => {},
   type: 'primary',
+  titleModal: 'Ejemplo titulo'
 }
 
 export default withStyles(styles)(Modal)

package/atoms/Modal/Modal.module.css

@@ -4,7 +4,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  background: var(--modal-backdrop-color);
+  background: rgb(0 0 0 / 50%);
   inset: 0;
 }
 
@@ -24,7 +24,7 @@
   padding: 16px 32px;
 }
 
-:not(.is-playground) > .modal {
+:not(.is-playground)>.modal {
   animation: fadeInModal 0.4s ease-in forwards;
   opacity: 0;
 }
@@ -45,7 +45,7 @@
 }
 
 .type-primary {
-  background-color: var(--color-primary);
+  background-color: var(--color-primary-inverted);
 }
 
 .type-secondary {
@@ -54,8 +54,8 @@
 
 @media (min-width: 992px) {
   .modal {
-    max-width: var(--modal-desktop-max-width);
-    height: var(--modal-desktop-height);
+    max-width: 465px;
+    height: auto;
     border-radius: var(--border-radius-sm);
   }
 
@@ -82,4 +82,4 @@
   to {
     opacity: 0;
   }
-}
+}

package/hook/useAddColumn.js

@@ -0,0 +1,40 @@
+const useAddColumn = (event) => {
+
+    let listKeyColumnOrder = []
+
+    event.forEach(element => {
+      listKeyColumnOrder[element.value] = true
+    });
+
+    for (const itemAddColumns of addColumsData) {
+      if (listKeyColumnOrder[itemAddColumns.value]) {
+        itemAddColumns.activeView = true
+      } else {
+        itemAddColumns.activeView = false
+      }
+    }
+
+
+    for (const itemEvent of addColumsData) {
+
+      for (const itemColumns of columnsData) {
+
+        if (itemColumns.accessor === itemEvent.value) {
+
+          if (itemEvent.activeView) {
+            itemColumns.activeView = true
+          } else {
+            itemColumns.activeView = false
+          }
+
+
+        }
+      }
+
+    }
+
+    setColumnsData([])
+
+  }
+
+  export default useAddColumn

package/hook/useStateDate.js

@@ -0,0 +1,25 @@
+import { useEffect, useState } from 'react'
+import {
+    addDays,
+  } from "date-fns";
+
+const useStateDate = () => {
+
+    const [state, setState] = useState([
+        {
+          startDate: addDays(new Date(), -59),
+          endDate: new Date(),
+          key: 'selection',
+        }
+      ]);
+
+
+      useEffect(() => {
+
+      }, [state]);
+
+
+  return { state, setState }
+}
+
+export default useStateDate

package/hook/useTable.js

@@ -0,0 +1,45 @@
+import { useState, useEffect } from "react";
+
+const calculateRange = (data, rowsPerPage) => {
+  const range = []
+  if (!data) {
+    var num = Math.ceil(1);
+  } else {
+    num = Math.ceil(data.length / rowsPerPage);
+
+  }
+
+  // const num = Math.ceil(data.length / rowsPerPage);
+
+  // let i = 1;
+  for (let i = 1; i <= num; i++) {
+    range.push(i);
+  }
+  return range;
+};
+
+const sliceData = (data, page, rowsPerPage) => {
+
+  if (!data) {
+    return data = [];
+  } else {
+    return data.slice((page - 1) * rowsPerPage, page * rowsPerPage);
+  }
+};
+
+const useTable = (data, page, rowsPerPage) => {
+  const [tableRange, setTableRange] = useState([]);
+  const [slice, setSlice] = useState([]);
+
+  useEffect(() => {
+    const range = calculateRange(data, rowsPerPage);
+    setTableRange([...range]);
+
+    const slice = sliceData(data, page, rowsPerPage);
+    setSlice([...slice]);
+  }, [data, setTableRange, page, setSlice, rowsPerPage]);
+
+  return { slice, range: tableRange };
+};
+
+export default useTable;

package/index.js

@@ -24,7 +24,7 @@ export { default as Heading } from './atoms/Heading'
 export { default as Icon } from './atoms/Icon'
 export { default as Input } from './atoms/Input'
 export { default as Label } from './atoms/Label'
-export { default as Link } from './atoms/Link'
+export { default as LinkItem } from './atoms/LinkItem'
 export { default as Modal } from './atoms/Modal'
 export { default as Paragraph } from './atoms/Paragraph'
 export { default as Picture } from './atoms/Picture'
@@ -32,7 +32,6 @@ export { default as Textarea } from './atoms/Textarea'
 export { default as Tab } from './atoms/Tab'
 
 
-
 // Molecules
 export { default as Accordion } from './molecules/Accordion'
 export { default as AddButton } from './molecules/AddButton'
@@ -47,9 +46,12 @@ export { default as ItemMenu } from './molecules/ItemMenu'
 export { default as CheckList } from './molecules/CheckList'
 export { default as ColumnTable } from './molecules/ColumnTable'
 export { default as RowTable } from './molecules/RowTable'
+export { default as FooterTable } from './molecules/FooterTable'
 export { default as DynamicSelect } from './molecules/DynamicSelect'
 export { default as DatePicker } from './molecules/DynamicSelect'
 
+export { default as useTable } from './hook/useTable'
+export { default as useStateDate } from './hook/useStateDate'