imbric-theme 0.6.5 → 0.6.7

package/.storybook/main.js

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

package/.storybook/preview.js

@@ -3,6 +3,10 @@ import React from 'react'
 import 'minireset.css'
 import '../styles/globals.css'
 import '../styles/tokens.css'
+import '../styles/GrupoMutua.css'
+import '../styles/taxisvalencia.css'
+import '../styles/radiotaxiaragon.css'
+import '../styles/spartan.css'
 
 const getStyles = ({ __sb } = {}) => ({
   display: 'flex',
@@ -30,3 +34,15 @@ export const parameters = {
   },
   actions: { argTypesRegex: '^on[A-Z].*' },
 }
+
+export const globalTypes = {
+  themes: {
+    defaultValue: [
+      "Imbric",
+      "GrupoMutua",
+      "Taxisvalencia",
+      "Radiotaxiaragon",
+      "Spartan",
+    ],
+  }
+}

package/atoms/Button/Button.module.css

@@ -13,6 +13,16 @@
   transition: filter 0.5s ease, box-shadow 0.2s ease-in;
 }
 
+[data-theme="GrupoMutua"] .button {
+  border-radius: var(--button-border-radius-sm);
+}
+
+[data-theme="Taxisvalencia"] .button,
+[data-theme="Radiotaxiaragon"] .button,
+[data-theme="Spartan"] .button {
+  border-radius: var(--button-border-radius-sm);
+}
+
 .button:focus {
   box-shadow: 0 0 0 1px var(--color-primary), 0 0 10px 0 var(--color-primary);
   outline: none;

package/atoms/Check/Check.js

@@ -6,21 +6,23 @@ import Icon from '../Icon'
 import styles from './Check.module.css'
 import withStyles from '../../hocs/withStyles'
 
-export const Check = ({ isChecked, getStyles }) => {
+export const Check = ({ isChecked, getStyles, onClickChecked }) => {
   return isChecked ? (
-    <Icon name="checkCircle" color="muted" isClickable />
+    <Icon name="checkCircle" color="muted" isClickable onClick={onClickChecked} />
   ) : (
-    <span className={getStyles('check')} />
+    <span onClick={onClickChecked} className={getStyles('check')} />
   )
 }
 
 Check.propTypes = {
   getStyles: PropTypes.func.isRequired,
   isChecked: PropTypes.bool,
+  onClickChecked: PropTypes.func,
 }
 
 Check.defaultProps = {
-  getStyles: () => {},
+  getStyles: () => { },
+  onClickChecked: () => { },
 }
 
 export default withStyles(styles)(Check)

package/atoms/Input/Input.module.css

@@ -27,6 +27,17 @@
   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 {
+  border-radius: var(--button-border-radius-sm);
+}
+
+
 .is-inline {
   max-width: max-content;
 }

package/atoms/Toggle/Toggle.js

@@ -6,11 +6,11 @@ import withStyles from '../../hocs/withStyles'
 
 export const Toggle = ({ getStyles, onChangeCheckbox, disabled, id, checked, name }) => {
 
-  const [isChecked, setIsChecked] = useState(false);
+  // const [isChecked, setIsChecked] = useState(false);
 
-  const handleOnChange = () => {
-    setIsChecked(!isChecked)
-  };
+  // const handleOnChange = () => {
+  //   setIsChecked(!isChecked)
+  // };
 
 
   return <div className={getStyles('toggle')}>
@@ -20,9 +20,10 @@ export const Toggle = ({ getStyles, onChangeCheckbox, disabled, id, checked, nam
       id={id}
       name={name}
       disabled={disabled}
-      checked={isChecked || checked}
+      // checked={isChecked || checked}
+      checked={checked}
       onChange={(e) => {
-        handleOnChange()
+        // handleOnChange()
         onChangeCheckbox(e)
       }}
       className={getStyles('toggle-item')}

package/layout/Sidebar/Sidebar.js

@@ -1,6 +1,7 @@
 import React, { ReactNode, useRef, useState, useEffect } from 'react'
 import PropTypes from 'prop-types'
 import withStyles from '../../hocs/withStyles'
+import { useRouter } from 'next/router'
 
 // import { options } from './constants'
 
@@ -11,8 +12,9 @@ import Icon from '../../atoms/Icon'
 import Divider from '../../atoms/Divider'
 import ItemMenu from '../../molecules/ItemMenu/ItemMenu'
 
-export const Sidebar = ({ getStyles, menuCollapseView, options, isHrefLogo }) => {
+export const Sidebar = ({ getStyles, menuCollapseView, options, isHrefLogo, isSrcLogoS, isSrcLogo }) => {
 
+  const router = useRouter()
 
   return (
     <>
@@ -30,7 +32,7 @@ export const Sidebar = ({ getStyles, menuCollapseView, options, isHrefLogo }) =>
 
                 <div className={getStyles('logotext')}>
                   {/* small and big change using menuCollapseView state */}
-                  {menuCollapseView ? <Picture isHref={isHrefLogo} src="./static/logotipoS.svg" width={19}></Picture> : <Picture isHref={isHrefLogo} src="./static/logotipo.svg" width={100}></Picture>}
+                  {menuCollapseView ? <Picture isHref={isHrefLogo} src={router.basePath + isSrcLogoS} width={19}></Picture> : <Picture isHref={isHrefLogo} src={router.basePath + isSrcLogo} width={100}></Picture>}
                 </div>
                 {/* <div className={getStyles('closemenu')}>
 
@@ -93,7 +95,9 @@ export const Sidebar = ({ getStyles, menuCollapseView, options, isHrefLogo }) =>
 
 Sidebar.propTypes = {
   getStyles: PropTypes.func.isRequired,
-  isHrefLogo: PropTypes.any
+  isHrefLogo: PropTypes.any,
+  isSrcLogoS: PropTypes.string,
+  isSrcLogo: PropTypes.string
   // options: PropTypes.arrayOf(
   //   PropTypes.shape({
   //     text: PropTypes.string,
@@ -105,7 +109,9 @@ Sidebar.propTypes = {
 Sidebar.defaultProps = {
   getStyles: () => { },
   menuCollapseView: false,
-  isHrefLogo: ''
+  isHrefLogo: '',
+  isSrcLogoS: '',
+  isSrcLogo: ''
 }
 
 export default withStyles(styles)(Sidebar)

package/molecules/ColumnTable/ColumnTable.js

@@ -13,117 +13,123 @@ import { Horizontal, Vertical } from '../../layout/Spacer/components'
 
 export const ColumnTable = ({ getStyles, handleSorting, columnUppercase, onChangeInput, onChangeSelect, columnsData, opSelect }) => {
 
-  const [sortable, setSortable] = useState(true);
-  const [accessor, setAccessor] = useState("");
-  const [sortField, setSortField] = useState("");
-  const [order, setOrder] = useState("asc");
+  // const [sortable, setSortable] = useState(true)
+  // const [accessor, setAccessor] = useState("")
+
+  const [sortField, setSortField] = useState("")
+  const [order, setOrder] = useState("asc")
 
   // const [optionsSelect, setOptionsSelect] = useState(opSelect);
 
 
   const handleSortingChange = (accessor) => {
     const sortOrder =
-      accessor === sortField && order === "asc" ? "desc" : "asc";
-    setSortField(accessor);
-    setOrder(sortOrder);
-    handleSorting(accessor, sortOrder);
-  };
+      accessor === sortField && order === "asc" ? "desc" : "asc"
 
-  const cl = sortable
-    ? sortField && sortField === accessor && order === "asc"
-      ? "angleUp"
-      : sortField && sortField === accessor && order === "desc"
-        ? "angleDown"
-        : "default"
-    : "";
+    setSortField(accessor)
+    setOrder(sortOrder)
+    handleSorting(accessor, sortOrder)
+  };
 
 
   return (
 
-    <div className={getStyles('tbl-header')}>
-      <table className={getStyles('table')} cellPadding="0" cellSpacing="0" border="0">
-        <thead>
-          <tr>
-
-            {columnsData.map((item) => (
-              item.activeView ?
-                // setSortable(item.sortable)
-                // setAccessor()
-                (<th
-                  key={item.idInput}
-                  className={getStyles('column-table', 
-                  {'column-uppercase': columnUppercase},
-                  {'thacction': item.accessor === 'iconUrl' } ,
-                  {'thcheckbox': item.isCheckbox } 
-                    )}>
-
-                  <span onClick={item.sortable ? () => handleSortingChange(item.accessor) : null}>
-                    <Paragraph
-                      size="xs"
-                      isInline
-                    >
-                      {item.title}
-                    </Paragraph>
-
-                    <Horizontal size="xs" />
-
-                    {item.sortable ?
-
-                      cl === "default" ?
-                        <Icon
-                          name="angleUpDown"
-                          size="xs"
-                        />
-                        : cl === "" ? null
-
-                          : cl === "angleDown"
-                            ? <Icon
-                              name="angleDown"
-                              size="xs"
-                            />
-
-                            : <Icon
-                              name="angleUp"
-                              size="xs"
-                            />
-                      : null
-                    }
-                  </span>
-
-
-                  <Vertical size="xs" />
-
-                  {item.viewIsFilter ? (
-
-                    item.typeFilter === 'select' ?
-                      <DynamicSelect
-                        isInline
-                        onChange={onChangeSelect}
-                        optionsSelect={opSelect}
-                        placeholder={item.placeholder}
-                      />
-                      :
-                      <Input
-                        isInputFilter
-                        id={item.idInput}
-                        type={item.typeFilter}
-                        name={item.nameInput}
-                        onChange={onChangeInput}
-                        placeholder={item.placeholder}
+    // <div className={getStyles('tbl-header')}>
+    //   <table className={getStyles('table')} cellPadding="0" cellSpacing="0" border="0">
+    <thead>
+      <tr>
+
+        {columnsData.map(({ accessor, sortable, ...props }) => {
+
+          const cl = sortable
+            ? sortField && sortField === accessor && order === "asc"
+              ? "up"
+              : sortField && sortField === accessor && order === "desc"
+                ? "down"
+                : "default"
+            : "";
+
+          return (
+            props.activeView ?
+              // setSortable(props.sortable)
+              // setAccessor()
+              (<th
+                key={props.idInput}
+                className={getStyles('column-table',
+                  { 'column-uppercase': columnUppercase },
+                  { 'thacction': accessor === 'iconUrl' },
+                  { 'thcheckbox': props.isCheckbox }
+                )}>
+
+                <span className={getStyles('tbl-txtTh')} onClick={sortable ? () => handleSortingChange(accessor) : null}>
+                  <Paragraph
+                    size="xs"
+                    isInline
+                  >
+                    {props.title}
+                  </Paragraph>
+
+                  <Horizontal size="xs" />
+
+                  {sortable ?
+
+                    cl === "default" ?
+                      <Icon
+                        name="angleUpDown"
+                        size="xs"
                       />
-                  )
-
+                      : cl === "" ? null
+
+                        : cl === "up"
+                          ? <Icon
+                            name="angleDown"
+                            size="xs"
+                          />
+
+                          : <Icon
+                            name="angleUp"
+                            size="xs"
+                          />
                     : null
                   }
+                </span>
+
 
-                </th>
-                ) : null
-            ))}
+                <Vertical size="xs" />
 
-          </tr>
-        </thead>
-      </table>
-    </div>
+                {props.viewIsFilter ? (
+
+                  props.typeFilter === 'select' ?
+                    <DynamicSelect
+                      isInline
+                      onChange={onChangeSelect}
+                      optionsSelect={opSelect}
+                      placeholder={props.placeholder}
+                    />
+                    :
+                    <Input
+                      isInputFilter
+                      id={props.idInput}
+                      type={props.typeFilter}
+                      name={props.nameInput}
+                      onChange={onChangeInput}
+                      placeholder={props.placeholder}
+                    />
+                )
+
+                  : null
+                }
+
+              </th>
+              ) : null
+          )
+
+        })}
+
+      </tr>
+    </thead>
+    // </table>
+    // </div>
 
   )
 }

package/molecules/ColumnTable/ColumnTable.module.css

@@ -4,12 +4,24 @@
   color: var(--color-font-base);
   display: table-cell;
   vertical-align: top;
+  /* overflow: hidden;
+  text-overflow: ellipsis; */
+  border-bottom-color: rgba(0, 0, 0, 0.12);
+  border-bottom-width: 1px;
+  border-bottom-style: solid;
 }
 
 .column-uppercase {
   text-transform: uppercase;
 }
 
+.tbl-txtTh {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  cursor: pointer;
+}
+
 .table {
   width: 100%;
   table-layout: fixed;

package/molecules/InputAutocomplete/InputAutocomplete.js

@@ -5,6 +5,7 @@ import PropTypes from 'prop-types'
 import styles from './InputAutocomplete.module.css'
 import { options } from './constants'
 import withStyles from '../../hocs/withStyles'
+import { useRouter } from 'next/router'
 
 import { BarLoader, ClipLoader } from 'react-spinners'
 import Input from '../../atoms/Input'
@@ -73,6 +74,8 @@ export const InputAutocomplete = ({
 
   // }
 
+  const router = useRouter()
+
 
   return <div className={getStyles('input-autocomplete')}>
 
@@ -127,11 +130,11 @@ export const InputAutocomplete = ({
             <li id={'idLiItem' + index} key={index} className={getStyles('input-autocomplete-li')} onClick={handleOnSelect}>
               {viewIconList ?
                 <div className={getStyles('input-autocomplete-li-icon')}>
-                    <Picture
-                      src={itemAddresses.iconURL ? itemAddresses.iconURL : "../../static/google-maps.png"}
-                      width={15}
-                      height={15}
-                    />
+                  <Picture
+                    src={itemAddresses.iconURL ? itemAddresses.iconURL : router.basePath + "/static/google-maps.png"}
+                    width={15}
+                    height={15}
+                  />
                 </div>
                 :
                 null