imbric-theme 0.1.0

package/atoms/LinkItem/__snapshots__/Link.stories.js.snap

@@ -0,0 +1,118 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Atoms/Link Colors 1`] = `
+<div
+  style={
+    Object {
+      "alignContent": "flex-start",
+      "display": "flex",
+      "flexDirection": "column",
+      "flexWrap": "wrap",
+      "gap": "10px 30px",
+      "height": "100%",
+      "justifyContent": "flex-start",
+      "maxHeight": "auto",
+    }
+  }
+>
+  <a
+    className="link color-primary"
+  >
+    <p
+      className="paragraph color-primary size-md weight-semibold is-inline"
+    >
+      Mouths Muil
+    </p>
+  </a>
+  <a
+    className="link color-tertiary"
+  >
+    <p
+      className="paragraph color-tertiary size-md weight-semibold is-inline"
+    >
+      Mouths Muil
+    </p>
+  </a>
+</div>
+`;
+
+exports[`Storyshots Atoms/Link Default 1`] = `
+<div
+  style={
+    Object {
+      "alignContent": "flex-start",
+      "display": "flex",
+      "flexDirection": "column",
+      "flexWrap": "wrap",
+      "gap": "10px 30px",
+      "height": "100%",
+      "justifyContent": "flex-start",
+      "maxHeight": "auto",
+    }
+  }
+>
+  <a
+    className="link color-primary"
+  >
+    <p
+      className="paragraph color-primary size-md weight-semibold is-inline"
+    >
+      Mouths Muil
+    </p>
+  </a>
+</div>
+`;
+
+exports[`Storyshots Atoms/Link Sizes 1`] = `
+<div
+  style={
+    Object {
+      "alignContent": "flex-start",
+      "display": "flex",
+      "flexDirection": "column",
+      "flexWrap": "wrap",
+      "gap": "10px 30px",
+      "height": "100%",
+      "justifyContent": "flex-start",
+      "maxHeight": "auto",
+    }
+  }
+>
+  <a
+    className="link color-primary"
+  >
+    <p
+      className="paragraph color-primary size-xs weight-semibold is-inline"
+    >
+      Mouths Muil
+    </p>
+  </a>
+  <a
+    className="link color-primary"
+  >
+    <p
+      className="paragraph color-primary size-sm weight-semibold is-inline"
+    >
+      Mouths Muil
+    </p>
+  </a>
+  <a
+    className="link color-primary"
+  >
+    <p
+      className="paragraph color-primary size-md weight-semibold is-inline"
+    >
+      Mouths Muil
+    </p>
+  </a>
+  <a
+    className="link color-primary"
+  >
+    <p
+      className="paragraph color-primary size-lg weight-semibold is-inline"
+    >
+      Mouths Muil
+    </p>
+  </a>
+</div>
+`;

package/atoms/LinkItem/constants.js

@@ -0,0 +1,5 @@
+import { options as paragraphOptions } from '../Paragraph/constants'
+export const options = {
+  colors: ['primary', 'tertiary'],
+  sizes: paragraphOptions.sizes,
+}

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/Loading/Loading.js

@@ -0,0 +1,30 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import styles from './Loading.module.css'
+import withStyles from '../../hocs/withStyles'
+
+export const Loading = ({ children, isShown, getStyles, isPlayground }) => {
+  if (isShown || isPlayground) {
+    return (
+      <div className={getStyles('container')}>
+        <div className={getStyles('loading', { 'is-shown': isShown })} />
+      </div>
+    )
+  }
+
+  return <>{children}</>
+}
+
+Loading.propTypes = {
+  getStyles: PropTypes.func.isRequired,
+  children: PropTypes.node,
+  isShown: PropTypes.bool,
+  isPlayground: PropTypes.bool,
+}
+
+Loading.defaultProps = {
+  getStyles: () => {},
+}
+
+export default withStyles(styles)(Loading)

package/atoms/Loading/Loading.module.css

@@ -0,0 +1,51 @@
+.container {
+  --size: 15px;
+  --gap: 25px;
+}
+
+.loading,
+.loading:before,
+.loading:after {
+  width: var(--size);
+  height: var(--size);
+  animation: pulse 1.8s infinite ease-in-out;
+  animation-fill-mode: both;
+  border-radius: var(--border-radius-full);
+}
+
+.loading {
+  position: relative;
+  top: calc(var(--size) * -1);
+  left: var(--gap);
+  animation-delay: -0.16s;
+  color: var(--color-primary);
+  transform: translateZ(0);
+}
+
+.loading:before,
+.loading:after {
+  position: absolute;
+  top: 0;
+  content: '';
+}
+
+.loading:before {
+  left: calc(var(--gap) * -1);
+  animation-delay: -0.32s;
+}
+
+.loading:after {
+  left: var(--gap);
+}
+
+@keyframes pulse {
+  0%,
+  80%,
+  100% {
+    box-shadow: 0 var(--size) 0 calc(var(--size) / -2);
+  }
+
+  40% {
+    box-shadow: 0 var(--size) 0 0;
+  }
+}

package/atoms/Loading/Loading.stories.js

@@ -0,0 +1,17 @@
+import { Loading, styles } from '.'
+
+import { getTemplate } from '../../helpers/storybook'
+
+const Template = getTemplate(Loading, styles)
+
+export default {
+  title: 'Atoms/Loading',
+  component: Loading,
+  args: {
+    isPlayground: true,
+    children:
+      "Adventures washed awfully web poured pirate Iáve extend shared? Glows visit bitter fire-breather 400 triumphant splash responsible Oakenshield's prong invitations mortal? It must be taken deep into Mordor and cast back into the fiery chasm from whence it came.",
+  },
+}
+
+export const Default = Template.bind({})

package/atoms/Loading/__snapshots__/Loading.stories.js.snap

@@ -0,0 +1,26 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Atoms/Loading Default 1`] = `
+<div
+  style={
+    Object {
+      "alignContent": "flex-start",
+      "display": "flex",
+      "flexDirection": "column",
+      "flexWrap": "wrap",
+      "gap": "10px 30px",
+      "height": "100%",
+      "justifyContent": "flex-start",
+      "maxHeight": "auto",
+    }
+  }
+>
+  <div
+    className="container"
+  >
+    <div
+      className="loading"
+    />
+  </div>
+</div>
+`;

package/atoms/Loading/index.js

@@ -0,0 +1,2 @@
+export { default, Loading } from './Loading'
+export { default as styles } from './Loading.module.css'

package/atoms/Modal/Modal.js

@@ -0,0 +1,121 @@
+import React, { useState } from 'react'
+import PropTypes from 'prop-types'
+
+import styles from './Modal.module.css'
+import { options } from './constants'
+import withStyles from '../../hocs/withStyles'
+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
+
+const createHandlerClick = () => (event) => {
+  event?.stopPropagation()
+}
+
+const createHandlerClose = ({ onClose, setOnFadeOut }) => () => {
+  setOnFadeOut(true)
+  setTimeout(onClose, FADE_OUT_ANIMATION_TIME)
+}
+
+const handleSecondaryAction = ({ onSecondaryAction }) => () => {
+  onSecondaryAction()
+}
+
+export const Modal = ({
+  onClose,
+  secondaryAction,
+  children,
+  getStyles,
+  type,
+  isPlayground,
+  titleModal,
+  isFullWidth,
+  isFullWidthSoft,
+}) => {
+  const isDesktop = useMedia(['(min-width: 992px)'], [true])
+  const [onFadeOut, setOnFadeOut] = useState(false)
+
+  const handleClose = createHandlerClose({ onClose, setOnFadeOut })
+
+  return (
+    <div
+      className={getStyles('backdrop', {
+        'is-playground': isPlayground,
+        'on-fade-out': onFadeOut,
+      })}
+      onClick={handleClose}
+    >
+      <div
+        className={getStyles(isFullWidth ? 'modal-full' : isFullWidthSoft ? 'modal-full-soft' : 'modal', ['type'])}
+        onClick={createHandlerClick()}
+      >
+        <div className={getStyles('heading')}>
+          {!!onClose && (
+            <Icon
+              id='btnColsedModal'
+              color={isDesktop && type === 'secondary' ? 'primary' : 'primary'}
+              name={isDesktop ? 'cross' : 'angleLeft'}
+              background={isDesktop ? 'transparent' : 'muted'}
+              onClick={handleClose}
+              size={isDesktop ? 'lg' : 'md'}
+            />
+          )}
+          {secondaryAction && !isEmpty(secondaryAction) && (
+            <Icon
+              color="inverted"
+              name={secondaryAction?.icon}
+              background="muted"
+              onClick={handleSecondaryAction({
+                onSecondaryAction: secondaryAction?.handler,
+              })}
+            />
+          )}
+          <Heading color='black' size='lg' weight='light'>
+            {titleModal}
+          </Heading>
+        </div>
+
+        {isFullWidth ?
+          <div className={getStyles('container-full')}>{children}</div>
+          :
+          isFullWidthSoft ? <div className={getStyles('container-full-soft')}>{children}</div>
+            :
+            <Container><div className={getStyles('container')}>{children}</div></Container>
+        }
+
+      </div>
+    </div>
+  )
+}
+
+Modal.propTypes = {
+  children: PropTypes.node.isRequired,
+  getStyles: PropTypes.func.isRequired,
+  onClose: PropTypes.func,
+  secondaryAction: PropTypes.shape({
+    icon: PropTypes.string,
+    handler: PropTypes.func,
+  }),
+  type: PropTypes.oneOf(options.types),
+  isPlayground: PropTypes.bool,
+  isFullWidth: PropTypes.bool,
+  isFullWidthSoft: PropTypes.bool,
+  titleModal: PropTypes.string,
+}
+
+Modal.defaultProps = {
+  getStyles: () => { },
+  type: 'primary',
+  titleModal: 'Ejemplo titulo',
+  isFullWidth: false,
+  isFullWidthSoft: false
+}
+
+export default withStyles(styles)(Modal)

package/atoms/Modal/Modal.module.css

@@ -0,0 +1,142 @@
+.backdrop {
+  position: fixed;
+  z-index: var(--z-index-50);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgb(0 0 0 / 50%);
+  inset: 0;
+}
+
+.backdrop:not(.is-playground) {
+  animation: fadeInModal 0.2s ease-in forwards;
+}
+
+.backdrop.on-fade-out {
+  animation: fadeOutModal 0.2s ease-in forwards;
+}
+
+.modal {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  flex-direction: column;
+  padding: 16px 32px;
+}
+
+.modal-full {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  flex-direction: column;
+  padding: 16px 32px;
+}
+
+.modal-full-soft {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  flex-direction: column;
+  padding: 16px 32px;
+}
+
+:not(.is-playground)>.modal {
+  animation: fadeInModal 0.4s ease-in forwards;
+  opacity: 0;
+}
+
+:not(.is-playground)>.modal-full {
+  animation: fadeInModal 0.4s ease-in forwards;
+  opacity: 0;
+}
+
+.backdrop.on-fade-out .modal {
+  animation: fadeOutModal 0.4s ease-in forwards;
+}
+
+.backdrop.on-fade-out .modal-full {
+  animation: fadeOutModal 0.4s ease-in forwards;
+}
+
+.heading {
+  display: flex;
+  justify-content: space-between;
+}
+
+.is-playground {
+  position: relative;
+  width: calc(50% - 15px);
+  border: var(--border-width-thick) dashed var(--color-primary);
+}
+
+.type-primary {
+  background-color: var(--color-primary-inverted);
+}
+
+.type-secondary {
+  background-color: var(--background-color-primary);
+}
+
+@media (min-width: 992px) {
+  .modal {
+    max-width: 600px;
+    height: auto;
+    border-radius: var(--border-radius-sm);
+    /* max-height: 100%;
+    overflow: auto; */
+  }
+
+  .modal-full {
+    width: 100%;
+    height: 100%;
+    padding: 16px 32px;
+  }
+
+  .modal-full-soft {
+    width: 90%;
+    height: auto;
+    border-radius: var(--border-radius-sm);
+  }
+
+  .heading {
+    flex-direction: row-reverse;
+  }
+
+  .container {
+    max-height: 700px;
+    overflow: auto;
+    min-width: 100%;
+  }
+
+  .container-full {
+    overflow: auto;
+    min-width: 100%;
+  }
+
+  .container-full-soft {
+    max-height: 700px;
+    overflow: auto;
+    min-width: 100%;
+  }
+
+}
+
+@keyframes fadeInModal {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fadeOutModal {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
+}

package/atoms/Modal/Modal.stories.js

@@ -0,0 +1,43 @@
+import { Modal, styles, options } from '.'
+
+import {
+  getTemplate,
+  getListTemplate,
+  getOptionsArgTypes,
+} from '../../helpers/storybook'
+
+const Template = getTemplate(Modal, styles)
+const ListTemplate = getListTemplate(Modal, styles)
+
+export default {
+  title: 'Atoms/Modal',
+  component: Modal,
+  args: {
+    isPlayground: true,
+    onClose: null,
+    children:
+      "Successful boar world's somebody herbs helpful spiders Samwise Gamgee helps unlost circles guard? Investment Thofin folly? Troublemaker minutes moldy Rivendell eve late traveling around crescent fault never naught",
+  },
+  argTypes: {
+    type: getOptionsArgTypes(options.types),
+    onClose: { action: 'clicked' },
+  },
+  parameters: { __sb: { fd: 'row' } },
+}
+
+export const Default = Template.bind({})
+
+export const Closable = Template.bind({})
+Closable.args = { onClose: () => {} }
+
+export const SecondaryAction = Template.bind({})
+SecondaryAction.args = {
+  onClose: () => {},
+  secondaryAction: {
+    icon: 'checkCircle',
+    handler: () => {},
+  },
+}
+
+export const Types = ListTemplate.bind({})
+Types.args = { items: options.types.map((type) => ({ type })) }