imbric-theme 0.3.5 → 0.3.9

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/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 target="_blank" 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,8 +74,11 @@ export const Modal = ({
               })}
             />
           )}
+					<Heading color='black' size='lg' weight='light'>
+						{titleModal}
+					</Heading>
         </div>
-        <Container>{children}</Container>
+        <Container><div className={getStyles('container')}>{children}</div></Container>
       </div>
     </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,14 +54,22 @@
 
 @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);
+    /* max-height: 100%;
+    overflow: auto; */
   }
 
   .heading {
     flex-direction: row-reverse;
   }
+
+  .container {
+    max-height: 600px;
+    overflow: auto;
+    min-width: 100%;
+  }
 }
 
 @keyframes fadeInModal {
@@ -82,4 +90,4 @@
   to {
     opacity: 0;
   }
-}
+}

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'

package/layout/DynamicTable/DynamicTable.js

@@ -164,7 +164,7 @@ DynamicTable.defaultProps = {
   isViewRange: true,
   isViewAddColumn: true,
   isViewDownloadDoc: true,
-  isLayoutDate: 'DateRangePicker',
+  isLayoutDate: 'Calendar',
   handleSelectRange: () => { },
   handleDownloadExcel: () => { },
 }

package/molecules/ColumnTable/ColumnTable.js

@@ -61,24 +61,26 @@ export const ColumnTable = ({ getStyles, handleSorting, columnUppercase, onChang
 
                     <Horizontal size="xs" />
 
-                    {cl === "default" ?
-                      <Icon
-                        name="angleUpDown"
-                        size="xs"
-                      />
-                      : cl === "" ? null
-
-                        : cl === "angleDown"
-                          ? <Icon
-                            name="angleDown"
-                            size="xs"
-                          />
+                    {item.sortable ?
 
-                          : <Icon
-                            name="angleUp"
+                        cl === "default" ?
+                          <Icon
+                            name="angleUpDown"
                             size="xs"
                           />
-
+                          : cl === "" ? null
+
+                            : cl === "angleDown"
+                              ? <Icon
+                                name="angleDown"
+                                size="xs"
+                              />
+
+                              : <Icon
+                                name="angleUp"
+                                size="xs"
+                              />
+                        : null
                     }
                   </span>
 
@@ -113,12 +115,14 @@ ColumnTable.propTypes = {
   handleSorting: PropTypes.func.isRequired,
   getStyles: PropTypes.func.isRequired,
   columnUppercase: PropTypes.bool,
+  onChangeInput: PropTypes.func,
 }
 
 ColumnTable.defaultProps = {
   getStyles: () => { },
   handleSorting: () => { },
   columnUppercase: false,
+  onChangeInput: () => { },
 }
 
 export default withStyles(styles)(ColumnTable)

package/molecules/ColumnTable/ColumnTable.stories.js

@@ -16,9 +16,9 @@ export default {
     columnUppercase: false,
     columnsData: options.columns,
   },
-  argTypes: {
-    // typeInput: getOptionsArgTypes(options.typeInput),
-  },
+  // argTypes: {
+  //   // typeInput: getOptionsArgTypes(options.typeInput),
+  // },
 }
 
 export const Default = Template.bind({})

package/molecules/DynamicSelect/DynamicSelect.js

@@ -43,6 +43,15 @@ export const DynamicSelect = ({ getStyles, optionsSelect, defaultValue, placehol
       paddingTop: '2px',
     }),
 
+    placeholder: (base) => ({
+      ...base,
+      color: 'var(--color-brand-white-lilac)',
+      fontWeight: 'var(--font-weight-light)',
+      whiteSpace: 'nowrap',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+    }),
+
   }
 
   // const handleChange = (value) => {
@@ -80,7 +89,7 @@ export const DynamicSelect = ({ getStyles, optionsSelect, defaultValue, placehol
 
 DynamicSelect.propTypes = {
   getStyles: PropTypes.func.isRequired,
-  defaultValue: PropTypes.string,
+  defaultValue: PropTypes.object,
   placeholder: PropTypes.string,
   isMulti: PropTypes.bool,
   isClearable: PropTypes.bool,
@@ -94,7 +103,6 @@ DynamicSelect.propTypes = {
 
 DynamicSelect.defaultProps = {
   getStyles: () => { },
-  defaultValue: '',
   placeholder: 'seleccionar',
   isMulti: false,
   isClearable: true,

package/molecules/DynamicSelect/DynamicSelect.stories.js

@@ -14,7 +14,7 @@ export default {
   component: DynamicSelect,
   args: {
     optionsSelect: options.optionsSelect,
-    defaultValue: '',
+    defaultValue: options.optionsSelect[0],
     placeholder: 'seleccionar',
     isMulti: false,
     isClearable: true,

package/molecules/RowTable/RowTable.js

@@ -6,8 +6,20 @@ import { options } from './constants'
 import withStyles from '../../hocs/withStyles'
 
 import Moment from 'react-moment'
+import Icon from '../../atoms/Icon'
+import { Horizontal, Vertical } from '../../layout/Spacer/components'
+
+export const RowTable = ({ getStyles, slice, columnsData, onClickActionEdit, onClickActionSendEmail, onClickActionDelete }) => {
+
+
+
+
+  // const handleEditStaff = (e, item) => {
+  //   console.log(item)
+  //   console.log(e)
+  // }
+
 
-export const RowTable = ({ getStyles, slice, columnsData }) => {
   return (
     <div className={getStyles('tbl-content')}>
       <table className={getStyles('table')} cellPadding="0" cellSpacing="0" border="0">
@@ -17,33 +29,59 @@ export const RowTable = ({ getStyles, slice, columnsData }) => {
             <tr key={index}>
               {columnsData.map((itemTd) => (
                 itemTd.activeView ?
-
                   (
-                    itemTd.subAccessor !== '' ?
 
-                      <td className={getStyles('td')} key={[itemTd.accessor]}>{item[itemTd.accessor][itemTd.subAccessor]}</td> :
 
-                      itemTd.typeFilter === 'date' ?
+                    itemTd.subAccessor === 'action' ?
+
+                      <td className={getStyles('td')} key={[itemTd.accessor]}>
+
+                        <Icon
+                          background="base"
+                          name="settings"
+                          onClick={(e) => { onClickActionEdit(e, item) }}
+                        />
+                        <Horizontal size="xs" />
+                        <Icon
+                          background="base"
+                          name="arrowUp"
+                          // onClick={(e) => onClickEdit(e, item)}
+                          onClick={e => { onClickActionSendEmail(e, item) }}
+                        />
+                        <Horizontal size="xs" />
+                        <Icon
+                          background="base"
+                          name="trash"
+                          // onClick={(e) => onClickEdit(e, item)}
+                          onClick={e => { onClickActionDelete(e, item) }}
+                        />
+                      </td> :
+
+                      itemTd.subAccessor !== '' ?
+
+                        <td className={getStyles('td')} key={[itemTd.accessor]}>{item[itemTd.accessor][itemTd.subAccessor]}</td> :
+
+                        itemTd.typeFilter === 'date' ?
 
-                        <td className={getStyles('td')} key={[itemTd.accessor]}>
-                          <Moment format="DD/MM/YYYY hh:mm:ss">
-                            {item[itemTd.accessor]}
-                          </Moment>
-                        </td>
+                          <td className={getStyles('td')} key={[itemTd.accessor]}>
+                            <Moment format="DD/MM/YYYY hh:mm:ss">
+                              {item[itemTd.accessor]}
+                            </Moment>
+                          </td>
 
-                        : itemTd.typeFilter === 'number' ?
+                          : itemTd.typeFilter === 'number' ?
 
-                          itemTd.subTypeFilter ?
+                            itemTd.subTypeFilter ?
 
-                            <td className={getStyles('td')} key={[itemTd.accessor]}>{item[itemTd.accessor].toFixed(2).toString().replace(/\./g, ',')} €</td>
-                            :
-                            <td className={getStyles('td')} key={[itemTd.accessor]}>{item[itemTd.accessor]}</td>
+                              <td className={getStyles('td')} key={[itemTd.accessor]}>{item[itemTd.accessor].toFixed(2).toString().replace(/\./g, ',')} €</td>
+                              :
+                              <td className={getStyles('td')} key={[itemTd.accessor]}>{item[itemTd.accessor]}</td>
 
-                          : itemTd.subTypeFilter ?
+                            : itemTd.subTypeFilter ?
 
-                            <td className={getStyles('td')} key={[itemTd.accessor]}>{item[itemTd.accessor].toString().replace(/\./g, ',').slice(0, 5)} €</td>
-                            :
-                            <td className={getStyles('td')} key={[itemTd.accessor]}>{item[itemTd.accessor]}</td>
+                              <td className={getStyles('td')} key={[itemTd.accessor]}>{item[itemTd.accessor].toString().replace(/\./g, ',').slice(0, 5)} €</td>
+                              :
+                              <td className={getStyles('td')} key={[itemTd.accessor]}>{item[itemTd.accessor]}</td>
 
                   ) : null
               ))}
@@ -59,10 +97,14 @@ export const RowTable = ({ getStyles, slice, columnsData }) => {
 RowTable.propTypes = {
   getStyles: PropTypes.func.isRequired,
   type: PropTypes.oneOf(options.types),
+  onClickActionEdit: PropTypes.func,
+  onClickActionSendEmail: PropTypes.func,
+  onClickActionDelete: PropTypes.func
 }
 
 RowTable.defaultProps = {
   getStyles: () => { },
+  onClickActionEdit: () => { },
 }
 
 export default withStyles(styles)(RowTable)

package/molecules/RowTable/constants.js

@@ -300,6 +300,19 @@ export const options = {
             nameInput: 'ID Proveedor',
             placeholder: 'ID Proveedor'
         },
+        {
+            accessor: 'action',
+            subAccessor: 'action',
+            activeView: true,
+            idInput: 'action',
+            nameInput: 'Acciones',
+            placeholder: 'Acciones',
+            sortable: false,
+            subTypeFilter: false,
+            title: '',
+            typeFilter: 'text',
+            viewIsFilter: false,
+        },
     ],
 
  }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "imbric-theme",
-  "version": "0.3.5",
+  "version": "0.3.9",
   "description": "Components library IMBRIC",
   "private": false,
   "main": "index.js",

package/atoms/Link/Link.js

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

package/atoms/Link/index.js

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