imbric-theme 0.4.5 → 0.4.6

package/Dockerfile

@@ -0,0 +1,18 @@
+FROM node:18-alpine
+
+## set environment stage
+ENV PATH /app/node_modules/.bin:$PATH
+ENV NODE_OPTIONS --openssl-legacy-provider
+WORKDIR /app
+COPY . /app/
+
+## build app stage
+RUN yarn install --network-timeout 200000 \
+    && yarn add next@11 react@18 react-dom@18 --network-timeout 200000 \
+    && yarn build
+
+## final image stage
+FROM nginx:alpine
+COPY --from=0 /app/storybook-static/ /usr/share/nginx/html/
+
+EXPOSE 80

package/atoms/Checkbox/Checkbox.js

@@ -30,7 +30,7 @@ export const Checkbox = ({ getStyles, onChange, label, id, value, name, linkChec
         id={id}
         name={name}
         label={label}
-        value={value}
+        checked={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>

package/atoms/Icon/constants.js

@@ -879,8 +879,61 @@ export const iconsMap = {
       </>
     ),
   },
-
-
+  distance: {
+    viewBox: '0 0 24 24',
+    svg: (
+      <>
+        <circle cx="7.5" cy="6.5" r="1.5" />
+        <circle cx="16.5" cy="15.5" r="1.5" />
+        <path d="M11.4,10.4c2.1-2.1,2.1-5.6,0-7.8c-2.1-2.1-5.6-2.1-7.8,0s-2.1,5.6,0,7.8l3.9,3.9v0L11.4,10.4z M5,9C3.7,7.6,3.7,5.4,5,4
+		C6.4,2.7,8.6,2.7,10,4c1.4,1.4,1.4,3.6,0,4.9l-2.5,2.5L5,9z"/>
+        <path d="M20.4,11.6c-2.1-2.1-5.6-2.1-7.8,0c-2.1,2.1-2.1,5.6,0,7.8l3.9,3.9l3.9-3.9v0C22.5,17.2,22.5,13.8,20.4,11.6z M19,18
+		l-2.5,2.5L14,18c-1.4-1.4-1.4-3.6,0-4.9c1.4-1.4,3.6-1.4,4.9,0C20.3,14.4,20.3,16.6,19,18z"/>
+      </>
+    ),
+  },
+  moneyPayment: {
+    viewBox: '0 0 24 24',
+    svg: (
+      <>
+        <path d="M23.7,6.5c-0.3-0.7-1-1.2-1.6-1.4L5.7,1c-1-0.3-1.8,0.4-1.8,1.4l0,2.8c0,0.2-0.2,0.4-0.4,0.4H1.9C0.9,5.6,0,6.5,0,7.6v13.6
+		c0,1.1,0.9,1.9,1.9,1.9h20.2c0.3,0,0.6-0.1,0.8-0.2c0.6-0.1,1.1-0.6,1.1-1.4c0-0.1,0-0.2,0-0.4V7.6C24,7.2,23.9,6.8,23.7,6.5z
+		 M6.2,3l9.5,2.4c0.1,0,0.1,0.2,0,0.2H6.1c-0.2,0-0.4-0.2-0.4-0.4l0-1.8C5.7,3.2,6,3,6.2,3z M22.1,15.7h-3.2c-0.4,0-0.7-0.2-0.9-0.3
+		c-0.2-0.2-0.3-0.5-0.3-0.8c0-0.3,0.1-0.6,0.3-0.8c0.2-0.2,0.4-0.3,0.9-0.3h3.2V15.7z M22.1,11.5h-3.2c-0.9,0-1.7,0.4-2.2,1
+		c-0.5,0.6-0.8,1.3-0.8,2c0,0.7,0.2,1.5,0.8,2c0.5,0.6,1.3,1,2.2,1h3.2v3.1c0,0.3-0.2,0.5-0.5,0.5H2.4c-0.3,0-0.5-0.2-0.5-0.5V8
+		c0-0.3,0.2-0.5,0.5-0.5h19.2c0.3,0,0.5,0.2,0.5,0.5V11.5z"/>
+      </>
+    ),
+  },
+  price: {
+    viewBox: '0 0 24 24',
+    svg: (
+      <>
+        <path class="st0" d="M18.4,8.8c0.9-0.9,0.9-2.3,0-3.2c-0.9-0.9-2.3-0.9-3.2,0c-0.9,0.9-0.9,2.3,0,3.2C16.1,9.7,17.6,9.7,18.4,8.8z
+	 M17.5,6.5c0.4,0.4,0.4,1,0,1.3c-0.4,0.4-1,0.4-1.3,0c-0.4-0.4-0.4-1,0-1.3C16.5,6.1,17.1,6.1,17.5,6.5z"/>
+        <path class="st0" d="M1.5,12c-0.7,0.7-0.7,1.7,0,2.4l8.1,8.1c0.7,0.7,1.7,0.7,2.4,0L22.5,12c0.3-0.3,0.5-0.7,0.5-1.2V2.7
+	C23,1.8,22.2,1,21.3,1h-8.1c-0.4,0-0.9,0.2-1.2,0.5L1.5,12z M11.4,20.7c-0.3,0.3-0.9,0.3-1.2,0l-6.9-6.9c-0.3-0.3-0.3-0.9,0-1.2
+	l9.6-9.6c0.2-0.2,0.4-0.2,0.6-0.2h6.9c0.5,0,0.8,0.4,0.8,0.8v6.9c0,0.2-0.1,0.4-0.2,0.6L11.4,20.7z"/>
+      </>
+    ),
+  },
+  messageDriver: {
+    viewBox: '0 0 24 24',
+    svg: (
+      <>
+        <g>
+          <g>
+            <path d="M0,3.4v17.2h24V3.4H0z M22,5.2l-10,8.3L2,5.2H22z M22.2,18.8H1.8V7.5L12,16l10.2-8.5V18.8z" />
+          </g>
+        </g>
+        <g>
+          <g>
+            <rect x="17.2" y="15.1" width="3.1" height="1.8" />
+          </g>
+        </g>
+      </>
+    ),
+  },
 
 }
 

package/atoms/Input/Input.js

@@ -27,7 +27,7 @@ export const Input = ({
   onClick,
   onKeyDown,
   placeholder,
-  autocomplete,
+  autoComplete,
   disabled,
   isViewIcon,
   idIcon,
@@ -70,7 +70,7 @@ export const Input = ({
           onBlur={onBlur}
           onClick={onClick}
           onKeyDown={onKeyDown}
-          autocomplete={autocomplete}
+          autoComplete={autoComplete}
           disabled={disabled}
         ></input>
 
@@ -92,7 +92,7 @@ export const Input = ({
         onBlur={onBlur}
         onClick={onClick}
         onKeyDown={onKeyDown}
-        autocomplete={autocomplete}
+        autoComplete={autoComplete}
         disabled={disabled}
       ></input>
 
@@ -122,7 +122,7 @@ Input.propTypes = {
   sizeIcon: PropTypes.string,
   colorIcon: PropTypes.string,
   backgroundIcon: PropTypes.string,
-  autocomplete: PropTypes.string,
+  autoComplete: PropTypes.string,
   disabled: PropTypes.bool,
 }
 
@@ -147,7 +147,7 @@ Input.defaultProps = {
   sizeIcon: 'md',
   colorIcon: 'highlight',
   backgroundIcon: 'base',
-  autocomplete: 'on',
+  autoComplete: 'on',
   disabled: false
 }
 

package/atoms/Input/Input.stories.js

@@ -35,4 +35,4 @@ export const InlineCode = Template.bind({})
 InlineCode.args = { isInlineCode: true }
 
 export const isInputFilter = Template.bind({})
-isInputFilter.args = { isisInputFilter: true }
+isInputFilter.args = { isInputFilter: true }

package/atoms/Input/constants.js

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

package/atoms/Toggle/Toggle.js

@@ -0,0 +1,56 @@
+import React, { useState } from 'react'
+import PropTypes from 'prop-types'
+
+import styles from './Toggle.module.css'
+import { options } from './constants'
+import withStyles from '../../hocs/withStyles'
+
+export const Toggle = ({ getStyles, onChangeCheckbox, value, id, checked, name }) => {
+
+  const [isChecked, setIsChecked] = useState(false);
+
+  const handleOnChange = () => {
+    setIsChecked(!isChecked)
+  };
+
+
+  return <div className={getStyles('toggle')}>
+
+    <input
+      type="checkbox"
+      id={id}
+      name={name}
+      value={value}
+      checked={isChecked || checked}
+      onChange={(e) => {
+        handleOnChange()
+        onChangeCheckbox()
+      }}
+      className={getStyles('toggle-item')}
+    />
+    <label htmlFor={id} className={getStyles('checkbox-custom-label')} for={id}></label>
+
+
+  </div>
+}
+
+Toggle.propTypes = {
+  getStyles: PropTypes.func.isRequired,
+  onChangeCheckbox: PropTypes.func.isRequired,
+  id: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+  checked: PropTypes.bool.isRequired,
+  value: PropTypes.string,
+}
+
+Toggle.defaultProps = {
+  getStyles: () => { },
+  onChangeCheckbox: () => { },
+  id: 'toggle',
+  name: 'toggle',
+  checked: false,
+  value: 'Hola',
+}
+
+
+export default withStyles(styles)(Toggle)

package/atoms/Toggle/Toggle.module.css

@@ -0,0 +1,41 @@
+.toggle {
+  display: flex;
+}
+
+.toggle-item {
+  opacity: 0;
+  width: 3em;
+  height: 1.4em;
+  position: absolute;
+  z-index: 1;
+  cursor: pointer;
+}
+.toggle-item + .checkbox-custom-label {
+  display: flex;
+  width: 4em;
+  height: 2em;
+  background: #aaa;
+  border-radius: 50px;
+  position: relative;
+  transition: all .3s ease;
+  cursor: pointer;
+  box-shadow: inset 0 0 5px #222;
+}
+.toggle-item + .checkbox-custom-label:after {
+  content: '';
+  position: absolute;
+  width: 1.5em;
+  height: 1.5em;
+  background: #fff;
+  border-radius: 50%;
+  top: .25em;
+  left: .25em;
+  transition: all .2s ease;
+}
+.toggle-item:checked + .checkbox-custom-label {
+  background: var(--color-tertiary);
+  box-shadow: inset 0 0 5px rgb(95, 95, 95);
+}
+.toggle-item:checked + .checkbox-custom-label:after {
+  left: 2.3em;
+}

package/atoms/Toggle/Toggle.stories.js

@@ -0,0 +1,21 @@
+import { Toggle, styles, options } from '.'
+
+import {
+  getTemplate,
+  getListTemplate,
+  getOptionsArgTypes,
+} from '../../helpers/storybook'
+
+const Template = getTemplate(Toggle, styles)
+const ListTemplate = getListTemplate(Toggle, styles)
+
+export default {
+  title: 'Atoms/Toggle',
+  component: Toggle,
+  args: {},
+  argTypes: {
+    // types: getOptionsArgTypes(options.types),
+  },
+}
+
+export const Default = Template.bind({})

package/atoms/Toggle/constants.js

@@ -0,0 +1 @@
+export const options = { types: [] }

package/atoms/Toggle/index.js

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

package/index.js

@@ -25,17 +25,21 @@ export { default as Icon } from './atoms/Icon'
 export { default as Input } from './atoms/Input'
 export { default as Label } from './atoms/Label'
 export { default as LinkItem } from './atoms/LinkItem'
+export { default as Loading } from './atoms/Loading'
 export { default as Modal } from './atoms/Modal'
 export { default as Paragraph } from './atoms/Paragraph'
 export { default as Picture } from './atoms/Picture'
 export { default as Textarea } from './atoms/Textarea'
 export { default as Tab } from './atoms/Tab'
+export { default as Toggle } from './atoms/Toggle'
+
 
 
 // Molecules
 export { default as Accordion } from './molecules/Accordion'
 export { default as AddButton } from './molecules/AddButton'
 export { default as ButtonIcon } from './molecules/ButtonIcon'
+export { default as CardServiceDetail } from './molecules/CardServiceDetail'
 export { default as CardServices } from './molecules/CardServices'
 export { default as CardProductTypesBooking } from './molecules/CardProductTypesBooking'
 export { default as Dropdown } from './molecules/Dropdown'

package/molecules/CardProductTypesBooking/CardProductTypesBooking.js

@@ -35,21 +35,23 @@ export const CardProductTypesBooking = ({
         />
       </div>
 
-      <Horizontal size="sm" />
+      <Horizontal size="lg" />
 
-      <div>
+      <div class={getStyles('contentInfo')}>
         <div className={getStyles('titleCardProductTypes')}>{textProductTypes}</div>
         <div className={getStyles('etaCardProductTypesSub')}>{textEtaProductTypesSub}</div>
         <div className={getStyles('titleCardProductTypesSub')}>{textDescription}</div>
       </div>
 
-      <Horizontal size="sm" />
+      <Horizontal size="md" />
 
       <div class={getStyles('contentPrice')}>
         <div class={getStyles('priceCardProductTypes')}>{priceProductTypes}</div>
         <div class={getStyles('priceCardProductTypesSub')}>{priceProductTypesSub}</div>
       </div>
 
+      <Horizontal size="md" />
+
     </div>
 
   </div>

package/molecules/CardProductTypesBooking/CardProductTypesBooking.module.css

@@ -58,7 +58,11 @@
 }
 
 .contentPrice {
-  min-width: 70px;
+  min-width: 100px;
+}
+
+.contentInfo {
+  width: 100%;
 }
 
 .priceCardProductTypes {