imbric-theme 0.1.0

package/molecules/CardServices/CardServices.js

@@ -0,0 +1,461 @@
+import React, { useState } from 'react'
+import PropTypes from 'prop-types'
+import ReactTooltip from 'react-tooltip'
+import { Horizontal, Vertical } from '../../layout/Spacer/components'
+import Label from '../../atoms/Label'
+import Icon from '../../atoms/Icon'
+
+import styles from './CardServices.module.css'
+import { options } from './constants'
+import withStyles from '../../hocs/withStyles'
+
+export const handleClick = ({ onClick }) => (event) => {
+  onClick(event)
+}
+
+export const CardServices = ({
+  getStyles,
+  onClick,
+  isClickable,
+  txtDateService,
+  txtOriginService,
+  txtDestinationService,
+  txtServiceService,
+  txtUserService,
+  txtRefService,
+  txtUserNumberService,
+  onClickUserView,
+  txtTootipUserView,
+  onClickReturnOrder,
+  txtTootipReturnOrder,
+  onClickRepeatOrder,
+  txtTootipRepeatOrder,
+  onClickEdit,
+  txtTootipEdit,
+  onClickTrash,
+  txtTootipTrash,
+  txtTootipCircleStatus,
+  selectCard,
+  statusService,
+  labelOriginService,
+  labelDestinationService,
+  labelServiceService,
+  labelUserService,
+  labelRefService,
+  labelUserNumberService,
+  isViewAction,
+}) => {
+
+  // STATE TOOLTIP
+  const [isToolTipMounted, setIsToolTipMounted] = useState(false)
+
+  // TOOLTIP
+  const handleMouseEnter = () => {
+    setIsToolTipMounted(true)
+  }
+  const handleMouseLeave = () => {
+    setIsToolTipMounted(false)
+  }
+
+
+  return (
+    <div
+      onClick={onClick && handleClick({ onClick })}
+      className={getStyles('card-services',
+        { 'is-clickable': isClickable, },
+        { 'selectCard': selectCard },
+        // { 'flip-out-hor-bottom': selectCard }
+      )}
+    >
+
+      <div className={getStyles('card-content-p-box')}>
+
+        <p className={getStyles('card-content-p')}>
+          <Icon
+            name="clock"
+            size="xs"
+          />
+          &nbsp;
+          {txtDateService}
+        </p>
+        <Vertical size="xs" />
+
+        <div className={getStyles('card-content')}>
+
+          <div className={getStyles('card-subcontent')}>
+
+            <Vertical size="xs" />
+
+            <Label >
+              <Icon
+                name="originOrder"
+                size="xs"
+                color="highlight"
+              />
+              &nbsp;
+              {labelOriginService}
+            </Label>
+
+            <p className={getStyles('card-content-p')}>{txtOriginService}</p>
+
+          </div>
+
+          <Horizontal size="sm" />
+
+          <div className={getStyles('card-subcontent')}>
+
+            <Vertical size="xs" />
+
+            <Label >
+              <Icon
+                name="destinationOrder"
+                size="xs"
+                color="highlight"
+              />
+              &nbsp;
+              {labelDestinationService}
+            </Label>
+
+            <p className={getStyles('card-content-p')}>{txtDestinationService}</p>
+
+          </div>
+
+        </div>
+
+        <Vertical size="xs" />
+
+        <div className={getStyles('card-content')}>
+
+          <div className={getStyles('card-subcontent')}>
+
+            <Vertical size="xs" />
+
+            <Label >
+              <Icon
+                name="travelPrograms"
+                size="xs"
+                color="highlight"
+              />
+              &nbsp;
+              {labelServiceService}
+            </Label>
+
+            <p className={getStyles('card-content-p')}>{txtServiceService}</p>
+
+          </div>
+
+          <Horizontal size="sm" />
+
+          <div className={getStyles('card-subcontent')}>
+
+            <Vertical size="xs" />
+
+            <Label >
+              <Icon
+                name="user"
+                size="xs"
+                color="highlight"
+              />
+              &nbsp;
+              {labelUserService}
+            </Label>
+
+            <p className={getStyles('card-content-p')}>{txtUserService}</p>
+
+          </div>
+
+        </div>
+
+        <Vertical size="xs" />
+
+        <div className={getStyles('card-content')}>
+
+          <div className={getStyles('card-subcontent')}>
+
+            <Vertical size="xs" />
+
+            <Label >
+              <Icon
+                name="reference"
+                size="xs"
+                color="highlight"
+              />
+              &nbsp;
+              {labelRefService}
+            </Label>
+
+            <p className={getStyles('card-content-p')}>{txtRefService}</p>
+
+          </div>
+
+          <Horizontal size="sm" />
+
+          <div className={getStyles('card-subcontent')}>
+
+            <Vertical size="xs" />
+
+            <Label >
+              <Icon
+                name="userNumber"
+                size="xs"
+                color="highlight"
+              />
+              &nbsp;
+              {labelUserNumberService}
+            </Label>
+
+            <p className={getStyles('card-content-p')}>{txtUserNumberService}</p>
+
+          </div>
+
+        </div>
+
+      </div>
+
+      {isViewAction ? (
+        <div className={getStyles('card-content-action')}>
+
+          <div className={getStyles('card-subcontent-action')}>
+
+            <span
+              data-tip
+              data-for='userView'
+              onMouseEnter={handleMouseEnter}
+              onMouseLeave={handleMouseLeave}
+            >
+              <Icon
+                color="highlight"
+                id='userViewIcon'
+                isClickable
+                name="userView"
+                onClick={onClickUserView}
+                size="sm"
+                className={getStyles('icon-view')}
+              />
+
+            </span>
+
+            {isToolTipMounted ? (
+              <ReactTooltip id='userView' type='error'>
+                <span>{txtTootipUserView}</span>
+              </ReactTooltip>
+            ) : null}
+
+          </div>
+
+          <div className={getStyles('card-subcontent-action')}>
+
+            <span
+              data-tip
+              data-for='returnOrder'
+              onMouseEnter={handleMouseEnter}
+              onMouseLeave={handleMouseLeave}
+            >
+              <Icon
+                color="highlight"
+                id='returnOrderIcon'
+                isClickable
+                name="returnOrder"
+                onClick={onClickReturnOrder}
+                size="sm"
+                className={getStyles('icon-view')}
+              />
+
+            </span>
+
+            {isToolTipMounted ? (
+              <ReactTooltip id='returnOrder' type='error'>
+                <span>{txtTootipReturnOrder}</span>
+              </ReactTooltip>
+            ) : null}
+
+          </div>
+
+          <div className={getStyles('card-subcontent-action')}>
+
+            <span
+              data-tip
+              data-for='repeatOrder'
+              onMouseEnter={handleMouseEnter}
+              onMouseLeave={handleMouseLeave}
+            >
+              <Icon
+                color="highlight"
+                id='repeatOrderIcon'
+                isClickable
+                name="repeatOrder"
+                onClick={onClickRepeatOrder}
+                size="sm"
+                className={getStyles('icon-view')}
+              />
+
+            </span>
+
+            {isToolTipMounted ? (
+              <ReactTooltip id='repeatOrder' type='error'>
+                <span>{txtTootipRepeatOrder}</span>
+              </ReactTooltip>
+            ) : null}
+
+
+          </div>
+
+          <div className={getStyles('card-subcontent-action')}>
+
+            <span
+              data-tip
+              data-for='edit'
+              onMouseEnter={handleMouseEnter}
+              onMouseLeave={handleMouseLeave}
+            >
+              <Icon
+                color="highlight"
+                id='editIcon'
+                isClickable
+                name="edit"
+                onClick={onClickEdit}
+                size="sm"
+                className={getStyles('icon-view')}
+              />
+
+            </span>
+
+            {isToolTipMounted ? (
+              <ReactTooltip id='edit' type='error'>
+                <span>{txtTootipEdit}</span>
+              </ReactTooltip>
+            ) : null}
+
+
+          </div>
+
+          <div className={getStyles('card-subcontent-action')}>
+
+            <span
+              data-tip
+              data-for='trash'
+              onMouseEnter={handleMouseEnter}
+              onMouseLeave={handleMouseLeave}
+            >
+              <Icon
+                color="highlight"
+                id='trashIcon'
+                isClickable
+                name="trash"
+                onClick={onClickTrash}
+                size="sm"
+                className={getStyles('icon-view-delete')}
+              />
+
+            </span>
+
+            {isToolTipMounted ? (
+              <ReactTooltip id='trash' type='error'>
+                <span>{txtTootipTrash}</span>
+              </ReactTooltip>
+            ) : null}
+
+          </div>
+
+          <div className={getStyles('card-subcontent-action')}>
+
+            <span
+              data-tip
+              data-for='circleStatus'
+              onMouseEnter={handleMouseEnter}
+              onMouseLeave={handleMouseLeave}
+            >
+
+              <Icon
+                className={getStyles(
+                  { 'icon-view-status10': statusService === 10 || -30 },
+                  { 'icon-view-status20': statusService === 20 },
+                  // { 'icon-view-status30': statusService === 30 || -20 || -40 },
+                )}
+                name="circleStatus"
+                size="sm"
+              />
+
+            </span>
+
+            {isToolTipMounted ? (
+              <ReactTooltip id='circleStatus' type='error'>
+                <span>{txtTootipCircleStatus}</span>
+              </ReactTooltip>
+            ) : null}
+
+          </div>
+
+        </div>
+      ) : null}
+
+      {/* {children} */}
+    </div>
+  )
+}
+
+CardServices.propTypes = {
+  getStyles: PropTypes.func.isRequired,
+  onClick: PropTypes.func,
+  isClickable: PropTypes.bool,
+  txtDateService: PropTypes.any,
+  txtOriginService: PropTypes.string,
+  txtDestinationService: PropTypes.string,
+  txtServiceService: PropTypes.string,
+  txtUserService: PropTypes.string,
+  txtRefService: PropTypes.string,
+  txtUserNumberService: PropTypes.string,
+  onClickUserView: PropTypes.func,
+  txtTootipUserView: PropTypes.string,
+  onClickReturnOrder: PropTypes.func,
+  txtTootipReturnOrder: PropTypes.string,
+  onClickRepeatOrder: PropTypes.func,
+  txtTootipRepeatOrder: PropTypes.string,
+  onClickEdit: PropTypes.func,
+  txtTootipEdit: PropTypes.string,
+  onClickTrash: PropTypes.func,
+  txtTootipTrash: PropTypes.string,
+  txtTootipCircleStatus: PropTypes.string,
+  selectCard: PropTypes.bool,
+  statusService: PropTypes.number,
+  labelOriginService: PropTypes.string,
+  labelDestinationService: PropTypes.string,
+  labelServiceService: PropTypes.string,
+  labelUserService: PropTypes.string,
+  labelRefService: PropTypes.string,
+  labelUserNumberService: PropTypes.string,
+  isViewAction: PropTypes.bool,
+}
+
+CardServices.defaultProps = {
+  getStyles: () => { },
+  txtDateService: '31/08/2022 13:21',
+  txtOriginService: 'Aeropuerto Barajas T4, Madrid, España',
+  txtDestinationService: 'Estación de Chamartín, Madrid, España',
+  txtServiceService: 'ECO (Tarifa máxima)',
+  txtUserService: 'Alberto Alvarez',
+  txtRefService: '1946980768',
+  txtUserNumberService: 'WF3941',
+  onClickUserView: () => { },
+  txtTootipUserView: 'Ver detalle del servicio',
+  onClickReturnOrder: () => { },
+  txtTootipReturnOrder: 'Crear retorno del servicio',
+  onClickRepeatOrder: () => { },
+  txtTootipRepeatOrder: 'Repetir servicio',
+  onClickEdit: () => { },
+  txtTootipEdit: 'Editar servicio (solo se puede editar 60min. antes)',
+  onClickTrash: () => { },
+  txtTootipTrash: 'Cancelar servicio',
+  txtTootipCircleStatus: '',
+  selectCard: false,
+  statusService: 10,
+  labelOriginService: 'Origen',
+  labelDestinationService: 'Destino',
+  labelServiceService: 'Servicio',
+  labelUserService: 'Pasajero',
+  labelRefService: 'REF',
+  labelUserNumberService: 'Usuario',
+  isViewAction: true,
+}
+
+export default withStyles(styles)(CardServices)

package/molecules/CardServices/CardServices.module.css

@@ -0,0 +1,213 @@
+.card-services {
+  /* display: flex; */
+  width: 100%;
+  align-items: center;
+  padding: 2px 10px;
+  border: var(--border-width-thin) solid var(--color-base-transparent);
+  border-radius: var(--card-border-radius);
+  box-shadow: 0px 2px 1px -1px rgb(0 0 0 / 20%), 0px 1px 1px 0px rgb(0 0 0 / 14%), 0px 1px 3px 0px rgb(0 0 0 / 12%);
+  color: var(--color-font-base);
+  transition: box-shadow .28s cubic-bezier(.4, 0, .2, 1);
+  background-color: #fff;
+  margin: 0;
+  cursor: auto;
+  max-width: 360px;
+  min-width: 360px;
+
+  align-items: center;
+  align-content: center;
+  justify-content: space-around;
+  margin-bottom: 10px;
+  display: flex;
+
+}
+
+.card-content {
+  display: flex;
+  align-items: flex-start;
+  align-content: space-between;
+  border-top: 1px solid #dfe8f2;
+}
+
+.card-content-p-box {
+  padding: 6px;
+}
+
+.card-content-action {
+  padding-left: 10px;
+  border-left: 1px solid #dfe8f2;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+}
+
+.card-content-p {
+  margin: 0;
+  padding: 0;
+  font-size: var(--font-size-mini);
+  font-weight: var(--font-weight-normal);
+  line-height: var(--line-height-tight);
+}
+
+.card-subcontent {
+  width: 100%;
+}
+
+.card-subcontent-action {
+  display: flex;
+  align-items: center;
+}
+
+.size-sm {
+  min-height: 45px;
+}
+
+.size-md {
+  min-height: 80px;
+}
+
+.size-lg {
+  min-height: 115px;
+}
+
+.color-primary {
+  background: var(--color-primary);
+  color: var(--color-primary-inverted);
+}
+
+.color-secondary {
+  background: var(--color-secondary);
+  color: var(--color-secondary-inverted);
+}
+
+.color-base {
+  border: var(--border-width-thin) solid var(--color-gray-400);
+  background: var(--background-color-primary-highlight);
+}
+
+.is-clickable {
+  cursor: pointer;
+}
+
+.is-draggable {
+  cursor: grab;
+  user-select: none;
+}
+
+.card-services.is-clickable:active,
+.card-services.is-draggable:active {
+  box-shadow: var(--box-shadow-xs);
+}
+
+.selectCard {
+  border-top: 4px solid #39b54a;
+  border-bottom: 4px solid #00a3ff;
+  border-left: 1px solid #39b54a;
+  border-right: 1px solid #00a3ff;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  background-position: 0 0, 100% 0;
+  background-repeat: no-repeat;
+  -webkit-background-size: 4px 100%;
+  -moz-background-size: 4px 100%;
+  background-size: 4px 100%;
+  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMzYWNmZDUiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzNhNGVkNSIgc3RvcC1vcGFjaXR5PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2xlc3NoYXQtZ2VuZXJhdGVkKSIgLz48L3N2Zz4=),url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMzYWNmZDUiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzNhNGVkNSIgc3RvcC1vcGFjaXR5PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2xlc3NoYXQtZ2VuZXJhdGVkKSIgLz48L3N2Zz4=);
+  background-image: -webkit-linear-gradient(top, #39b54a 0%, #00a3ff 100%), -webkit-linear-gradient(top, #39b54a 0%, #00a3ff 100%);
+  background-image: -moz-linear-gradient(top, #39b54a 0%, #00a3ff 100%), -moz-linear-gradient(top, #39b54a 0%, #00a3ff 100%);
+  background-image: -o-linear-gradient(top, #39b54a 0%, #00a3ff 100%), -o-linear-gradient(top, #39b54a 0%, #00a3ff 100%);
+  background-image: linear-gradient(to bottom, #39b54a 0%, #00a3ff 100%), linear-gradient(to bottom, #39b54a 0%, #00a3ff 100%);
+}
+
+.flip-out-hor-bottom {
+	-webkit-animation: flip-out-hor-bottom 0.45s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
+	        animation: flip-out-hor-bottom 0.45s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
+}
+
+.flip-in-hor-bottom {
+	-webkit-animation: flip-in-hor-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+	        animation: flip-in-hor-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+}
+
+/**
+ * ----------------------------------------
+ * animation flip-out-hor-bottom
+ * ----------------------------------------
+ */
+ @-webkit-keyframes flip-out-hor-bottom {
+  0% {
+    -webkit-transform: rotateX(0);
+            transform: rotateX(0);
+    opacity: 1;
+  }
+  100% {
+    -webkit-transform: rotateX(-70deg);
+            transform: rotateX(-70deg);
+    opacity: 0;
+  }
+}
+@keyframes flip-out-hor-bottom {
+  0% {
+    -webkit-transform: rotateX(0);
+            transform: rotateX(0);
+    opacity: 1;
+  }
+  100% {
+    -webkit-transform: rotateX(-70deg);
+            transform: rotateX(-70deg);
+    opacity: 0;
+  }
+}
+
+
+/**
+ * ----------------------------------------
+ * animation flip-in-hor-bottom
+ * ----------------------------------------
+ */
+ @-webkit-keyframes flip-in-hor-bottom {
+  0% {
+    -webkit-transform: rotateX(80deg);
+            transform: rotateX(80deg);
+    opacity: 0;
+  }
+  100% {
+    -webkit-transform: rotateX(0);
+            transform: rotateX(0);
+    opacity: 1;
+  }
+}
+@keyframes flip-in-hor-bottom {
+  0% {
+    -webkit-transform: rotateX(80deg);
+            transform: rotateX(80deg);
+    opacity: 0;
+  }
+  100% {
+    -webkit-transform: rotateX(0);
+            transform: rotateX(0);
+    opacity: 1;
+  }
+}
+
+
+.icon-view:hover svg path {
+  fill: var(--color-primary-muted);
+}
+
+.icon-view-delete:hover svg path {
+  fill: var(--color-secondary-muted);
+}
+
+.icon-view-status10 svg circle {
+  fill: #00a3ff;
+}
+
+.icon-view-status20 svg circle {
+  fill: #39b54a;
+}
+
+.icon-view-status30 svg circle {
+  fill: #8F12FE;
+}

package/molecules/CardServices/CardServices.stories.js

@@ -0,0 +1,41 @@
+import { CardServices, options, styles } from '.'
+import {
+  getTemplate,
+  getListTemplate,
+  getOptionsArgTypes,
+} from '../../helpers/storybook'
+
+const Template = getTemplate(CardServices, styles)
+const ListTemplate = getListTemplate(CardServices, styles)
+
+export default {
+  title: 'Molecules/CardServices',
+  component: CardServices,
+  args: {
+    // children:
+    //   'Lacerations coaster sort comings windlance happily EIf-witch handful unbefitting? Decide rising startled Aragorn invitations midnight deserves fortunes innards. You cannot hide. I see you. There is no life in the void. Only death. Mirror Emyn dreamed!',
+  },
+  argTypes: {
+    // color: getOptionsArgTypes(options.colors),
+    // size: getOptionsArgTypes(options.sizes),
+    // children: { control: 'text' },
+  },
+}
+
+export const Default = Template.bind({})
+
+// export const Clickable = Template.bind({})
+// Clickable.args = {
+//   isClickable: true,
+// }
+
+// export const Dragabble = Template.bind({})
+// Dragabble.args = {
+//   isDraggable: true,
+// }
+
+// export const Colors = ListTemplate.bind({})
+// Colors.args = { items: options.colors.map((color) => ({ color })) }
+
+// export const Sizes = ListTemplate.bind({})
+// Sizes.args = { items: options.sizes.map((size) => ({ size })) }