imbric-theme 0.1.0

package/molecules/FooterTable/FooterTable.js

@@ -0,0 +1,166 @@
+import React, { useEffect, useState } from "react";
+import PropTypes from 'prop-types'
+
+import styles from './FooterTable.module.css'
+import { options } from './constants'
+import withStyles from '../../hocs/withStyles'
+import DynamicSelect from '../../molecules/DynamicSelect'
+import Icon from "../../atoms/Icon/Icon";
+
+
+export const FooterTable = ({ getStyles, range, setPage, setDataPage, setScrollPage, page, slice, placeholderDinamicSelect, handleResultsForPage, defaultValueSelect, positionPag, useAvancesCeil, setPositionPag }) => {
+
+
+  // const [positionPag, setPositionPag] = useState(0)
+
+  useEffect(() => {
+    if (slice.length < 1 && page !== 1) {
+      setPage(page - 1);
+    }
+
+    console.log(page)
+
+  }, [slice, page, setPage, positionPag, useAvancesCeil]);
+
+  // const nextPagScroll = (page) => {
+
+  //   console.log(page)
+  //   if (page >= 4) {
+  //     setPositionPag('-40')
+  //     console.log(positionPag)
+  //     const elem = document.getElementById('table-pag-scroll');
+  //     elem.style.marginLeft = '-40px';
+  //     console.log(elem)
+  //   }
+  // }
+
+
+  return (
+    <div className={getStyles('footer-table')}>
+
+      <div className={styles.tableFooter}>
+
+        {page >= 2 ?
+          <Icon
+            name="angleLeft"
+            onClick={() => { setPage(page - 1); setDataPage(page - 1); setScrollPage('angleLeft') }}
+          />
+          : null}
+
+
+        {page >= 4 ?
+
+          <button
+            className={`${styles.button} ${styles.inactiveButton}`}
+            onClick={() => { setPage(1); setDataPage(1); setPositionPag(0); }}
+          >
+            1
+          </button>
+
+          : null}
+
+
+        {page >= 5 ?
+
+          <button
+            disabled
+            className={`${styles.button} ${styles.disabled}`}
+          >
+            ...
+          </button>
+          : null}
+
+        <div className={getStyles('footer-table-pag-box')}>
+
+          <div id="table-pag-scroll" className={getStyles('footer-table-pag')} style={{ marginLeft: positionPag + 'px' }}>
+
+            {range.map((el, index) => (
+
+              <button
+                key={'footer' + index}
+                className={`${styles.button} ${page === el ? styles.activeButton : styles.inactiveButton
+                  }`}
+                onClick={() => { setPage(el); setDataPage(el) }}
+                onChange={item => { handleSelectRange(item); onChangeRange(item); }}
+              >
+                {el}
+              </button>
+
+            ))}
+
+          </div>
+        </div>
+
+
+        {page <= (range.length - 4) && range.length > 5 ?
+
+          <button
+            disabled
+            className={`${styles.button} ${styles.disabled}`}
+          >
+            ...
+          </button>
+
+          : null}
+
+
+        {page <= (range.length - 3) && range.length > 5 ?
+
+          <button
+            onClick={() => { setPage(range.length); setDataPage(range.length); setPositionPag('-' + (38 * (useAvancesCeil - 1))) }}
+            className={`${styles.button} ${styles.inactiveButton}`}
+          >
+            {range.length}
+          </button>
+
+          : null}
+
+        {page <= (range.length - 1) ?
+          < Icon
+            name="angleRight"
+            onClick={() => { setPage(page + 1); setDataPage(page + 1); setScrollPage('angleRight') }}
+          // onChange={item => { handleSelectRange(item); onChangeRange(item); }}
+          />
+          : null}
+
+
+      </div>
+
+      <DynamicSelect
+        isInline
+        onChange={handleResultsForPage}
+        optionsSelect={options.opResultsForPage}
+        placeholder={placeholderDinamicSelect}
+        isClearable={false}
+        defaultValue={defaultValueSelect}
+        closeMenuOnSelect={false}
+        instanceId={'idResultsForPage'}
+      />
+
+    </div>
+
+
+  )
+}
+
+FooterTable.propTypes = {
+  // children: PropTypes.node.isRequired,
+  getStyles: PropTypes.func.isRequired,
+  setDataPage: PropTypes.func,
+  setScrollPage: PropTypes.func,
+  placeholderDinamicSelect: PropTypes.string,
+  handleResultsForPage: PropTypes.func,
+  defaultValueSelect: PropTypes.any,
+  // type: PropTypes.oneOf(options.types),
+}
+
+FooterTable.defaultProps = {
+  getStyles: () => { },
+  setDataPage: () => { },
+  setScrollPage: () => { },
+  handleResultsForPage: () => { },
+  placeholderDinamicSelect: 'resultados por pagina',
+  defaultValueSelect: { value: 10, label: '10' },
+}
+
+export default withStyles(styles)(FooterTable)

package/molecules/FooterTable/FooterTable.module.css

@@ -0,0 +1,63 @@
+.footer-table {
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+}
+
+.tableFooter {
+  /* background-color: #f1f1f1; */
+  padding: 4px 0px;
+  font-weight: 500;
+  text-align: left;
+  font-size: 16px;
+  color: #2c3e50;
+  border-bottom-left-radius: 5px;
+  border-bottom-right-radius: 0px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+}
+
+.button {
+  border: none;
+  padding: 6px 0px;
+  border-radius: 10px;
+  cursor: pointer;
+  margin-right: 4px;
+  margin-left: 4px;
+  min-width: 30px;
+  max-width: 30px;
+}
+
+.activeButton {
+  color: white;
+  background: rgb(73, 125, 189, .4);
+}
+
+.inactiveButton {
+  color: #2c3e50;
+  background: #f9f9f9;
+}
+
+.inactiveButton:hover {
+  color: white;
+  background: rgb(73, 125, 189, .4);
+}
+
+.disabled {
+  color: #2c3e50;
+  background: #f9f9f9;
+  cursor: no-drop;
+}
+
+.footer-table-pag-box {
+  display: flex;
+  overflow-x: clip;
+  width: 100%;
+  max-width: 190px;
+}
+
+.footer-table-pag {
+  display: flex;
+  width: 100%;
+}

package/molecules/FooterTable/FooterTable.stories.js

@@ -0,0 +1,23 @@
+import { FooterTable, styles, options } from '.'
+
+import {
+  getTemplate,
+  getListTemplate,
+  getOptionsArgTypes,
+} from '../../helpers/storybook'
+
+const Template = getTemplate(FooterTable, styles)
+const ListTemplate = getListTemplate(FooterTable, styles)
+
+export default {
+  title: 'Molecules/FooterTable',
+  component: FooterTable,
+  args: {},
+  argTypes: {
+    // types: getOptionsArgTypes(options.types),
+  },
+}
+
+export const Default = Template.bind({})
+// export const List = ListTemplate.bind({})
+// List.args = { items: options.types.map((type) => ({ type })) }

package/molecules/FooterTable/constants.js

@@ -0,0 +1,9 @@
+export const options =
+{
+    opResultsForPage: [
+        { id: 'pagOps1', value: 5, label: '5' },
+        { id: 'pagOps2', value: 10, label: '10' },
+        { id: 'pagOps3', value: 20, label: '20' },
+        { id: 'pagOps4', value: 50, label: '50' },
+    ]
+}

package/molecules/FooterTable/index.js

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

package/molecules/IconLabel/IconLabel.js

@@ -0,0 +1,83 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import styles from './IconLabel.module.css'
+import withStyles from '../../hocs/withStyles'
+
+import Icon from '../../atoms/Icon'
+import Paragraph from '../../atoms/Paragraph'
+
+import { options } from './constants'
+import Spacer from '../../layout/Spacer'
+
+const handleClick = ({ onClick }) => (event) => {
+  onClick(event)
+}
+
+const sizesMap = {
+  sm: {
+    icon: 'sm',
+    paragraph: 'xs',
+  },
+  md: {
+    icon: 'md',
+    paragraph: 'sm',
+  },
+}
+
+export const IconLabel = ({
+  getStyles,
+  icon,
+  label,
+  onClick,
+  isClickable,
+  direction,
+  isActive,
+  size,
+}) => {
+  return (
+    <div
+      className={getStyles('icon-label', {
+        'is-clickable': isClickable || !!onClick,
+        [`direction-${direction}`]: direction,
+      })}
+      onClick={onClick && handleClick({ onClick })}
+    >
+      <Icon
+        name={icon}
+        color={isActive ? 'primary' : 'base'}
+        background={isActive ? 'highlight' : 'transparent'}
+        size={sizesMap[size].icon}
+      ></Icon>
+      {direction === 'horizontal' && <Spacer.Horizontal size="xs" />}
+      <Paragraph
+        size={sizesMap[size].paragraph}
+        color={isActive ? 'primary' : 'base'}
+        isInline
+      >
+        {label}
+      </Paragraph>
+    </div>
+  )
+}
+
+IconLabel.propTypes = {
+  getStyles: PropTypes.func.isRequired,
+  icon: PropTypes.oneOf(options.icons).isRequired,
+  label: PropTypes.string.isRequired,
+  direction: PropTypes.oneOf(['vertical', 'horizontal']),
+  isClickable: PropTypes.bool,
+  onClick: PropTypes.func,
+  isActive: PropTypes.bool,
+  size: PropTypes.oneOf(options.sizes),
+}
+
+IconLabel.defaultProps = {
+  direction: 'vertical',
+  size: 'sm',
+  isActive: false,
+  getStyles: () => {},
+  onClick: () => {},
+}
+
+export default withStyles(styles)(IconLabel)

package/molecules/IconLabel/IconLabel.module.css

@@ -0,0 +1,16 @@
+.icon-label {
+  display: flex;
+  align-items: center;
+}
+
+.direction-vertical {
+  flex-direction: column;
+}
+
+.direction-horizontal {
+  flex-direction: row;
+}
+
+.is-clickable {
+  cursor: pointer;
+}

package/molecules/IconLabel/IconLabel.stories.js

@@ -0,0 +1,25 @@
+import { IconLabel, styles, options } from '.'
+
+import { getTemplate, getOptionsArgTypes } from '../../helpers/storybook'
+
+const Template = getTemplate(IconLabel, styles)
+
+export default {
+  title: 'Molecules/IconLabel',
+  component: IconLabel,
+  args: { icon: 'user', label: 'User' },
+  argTypes: {
+    icon: getOptionsArgTypes(options.icons),
+  },
+}
+
+export const Default = Template.bind({})
+
+export const Clickable = Template.bind({})
+Clickable.args = { isClickable: true }
+
+export const Active = Template.bind({})
+Active.args = { isActive: true }
+
+export const Horizontal = Template.bind({})
+Horizontal.args = { direction: 'horizontal' }

package/molecules/IconLabel/__snapshots__/IconLabel.stories.js.snap

@@ -0,0 +1,211 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Molecules/IconLabel Active 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="icon-label is-clickable direction-vertical"
+    onClick={[Function]}
+  >
+    <div
+      className="icon color-primary size-sm background-highlight"
+      style={
+        Object {
+          "height": 25,
+          "width": 25,
+        }
+      }
+    >
+      <svg
+        height={25}
+        viewBox="0 0 14 15"
+        width={25}
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          clipRule="evenodd"
+          d="M1.01693 15L0 14.5538C0.308723 13.8561 1.22056 13.4481 2.2775 12.975C3.29682 12.5187 4.56575 11.9509 4.56575 11.2777V10.3614C4.20448 10.0594 3.59241 9.41 3.49627 8.43355C3.20367 8.15831 2.71819 7.59711 2.71819 6.90245C2.71819 6.48066 2.88539 6.14048 3.03229 5.92422C2.94272 5.47204 2.77432 4.52538 2.77432 3.83073C2.77432 1.50369 4.39855 0 6.91192 0C7.63327 0 8.50928 0.193026 8.99714 0.714314C10.1365 0.914489 11.0501 2.26031 11.0501 3.83073C11.0501 4.83815 10.8728 5.66685 10.7659 6.07673C10.8847 6.2775 11.0131 6.57538 11.0131 6.92092C11.0131 7.70196 10.6178 8.20716 10.2488 8.47704C10.1443 9.43979 9.59429 10.0606 9.25869 10.3549V11.2777C9.25869 11.8502 10.2989 12.2351 11.3051 12.6074C12.4492 13.0304 13.6328 13.4683 14 14.4257L12.9616 14.8213C12.7753 14.3328 11.7888 13.9681 10.9187 13.6464C9.62056 13.1657 8.1486 12.6211 8.1486 11.2777V9.77997L8.40776 9.61732C8.43404 9.60005 9.15598 9.11629 9.15598 8.14997V7.77524L9.50471 7.63583C9.56323 7.60902 9.90241 7.43089 9.90241 6.92092C9.90241 6.76483 9.78298 6.59028 9.74118 6.54142L9.53875 6.30431L9.63191 6.00226C9.63489 5.99273 9.94003 5.0562 9.94003 3.83073C9.94003 2.78517 9.33931 1.79681 8.70335 1.79681H8.38447L8.22384 1.52216C8.10621 1.32139 7.607 1.10811 6.91192 1.10811C5.01659 1.10811 3.88441 2.12567 3.88441 3.83073C3.88441 4.63619 4.16746 5.93316 4.17044 5.94626L4.23613 6.24653L4.01638 6.461C4.01638 6.461 3.82828 6.65939 3.82828 6.90245C3.82828 7.20927 4.19731 7.59115 4.37586 7.72818L4.59202 7.89439L4.59382 8.16844C4.59382 9.08114 5.38324 9.59588 5.41727 9.61732L5.67285 9.78056L5.67584 11.2777C5.67584 12.6688 4.11192 13.3688 2.73133 13.986C2.06492 14.2839 1.15308 14.6926 1.01693 15Z"
+          fillRule="evenodd"
+        />
+      </svg>
+    </div>
+    <p
+      className="paragraph color-primary size-xs weight-normal is-inline"
+    >
+      User
+    </p>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Molecules/IconLabel Clickable 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="icon-label is-clickable direction-vertical"
+    onClick={[Function]}
+  >
+    <div
+      className="icon color-base size-sm background-transparent"
+      style={
+        Object {
+          "height": 25,
+          "width": 25,
+        }
+      }
+    >
+      <svg
+        height={25}
+        viewBox="0 0 14 15"
+        width={25}
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          clipRule="evenodd"
+          d="M1.01693 15L0 14.5538C0.308723 13.8561 1.22056 13.4481 2.2775 12.975C3.29682 12.5187 4.56575 11.9509 4.56575 11.2777V10.3614C4.20448 10.0594 3.59241 9.41 3.49627 8.43355C3.20367 8.15831 2.71819 7.59711 2.71819 6.90245C2.71819 6.48066 2.88539 6.14048 3.03229 5.92422C2.94272 5.47204 2.77432 4.52538 2.77432 3.83073C2.77432 1.50369 4.39855 0 6.91192 0C7.63327 0 8.50928 0.193026 8.99714 0.714314C10.1365 0.914489 11.0501 2.26031 11.0501 3.83073C11.0501 4.83815 10.8728 5.66685 10.7659 6.07673C10.8847 6.2775 11.0131 6.57538 11.0131 6.92092C11.0131 7.70196 10.6178 8.20716 10.2488 8.47704C10.1443 9.43979 9.59429 10.0606 9.25869 10.3549V11.2777C9.25869 11.8502 10.2989 12.2351 11.3051 12.6074C12.4492 13.0304 13.6328 13.4683 14 14.4257L12.9616 14.8213C12.7753 14.3328 11.7888 13.9681 10.9187 13.6464C9.62056 13.1657 8.1486 12.6211 8.1486 11.2777V9.77997L8.40776 9.61732C8.43404 9.60005 9.15598 9.11629 9.15598 8.14997V7.77524L9.50471 7.63583C9.56323 7.60902 9.90241 7.43089 9.90241 6.92092C9.90241 6.76483 9.78298 6.59028 9.74118 6.54142L9.53875 6.30431L9.63191 6.00226C9.63489 5.99273 9.94003 5.0562 9.94003 3.83073C9.94003 2.78517 9.33931 1.79681 8.70335 1.79681H8.38447L8.22384 1.52216C8.10621 1.32139 7.607 1.10811 6.91192 1.10811C5.01659 1.10811 3.88441 2.12567 3.88441 3.83073C3.88441 4.63619 4.16746 5.93316 4.17044 5.94626L4.23613 6.24653L4.01638 6.461C4.01638 6.461 3.82828 6.65939 3.82828 6.90245C3.82828 7.20927 4.19731 7.59115 4.37586 7.72818L4.59202 7.89439L4.59382 8.16844C4.59382 9.08114 5.38324 9.59588 5.41727 9.61732L5.67285 9.78056L5.67584 11.2777C5.67584 12.6688 4.11192 13.3688 2.73133 13.986C2.06492 14.2839 1.15308 14.6926 1.01693 15Z"
+          fillRule="evenodd"
+        />
+      </svg>
+    </div>
+    <p
+      className="paragraph color-base size-xs weight-normal is-inline"
+    >
+      User
+    </p>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Molecules/IconLabel 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="icon-label is-clickable direction-vertical"
+    onClick={[Function]}
+  >
+    <div
+      className="icon color-base size-sm background-transparent"
+      style={
+        Object {
+          "height": 25,
+          "width": 25,
+        }
+      }
+    >
+      <svg
+        height={25}
+        viewBox="0 0 14 15"
+        width={25}
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          clipRule="evenodd"
+          d="M1.01693 15L0 14.5538C0.308723 13.8561 1.22056 13.4481 2.2775 12.975C3.29682 12.5187 4.56575 11.9509 4.56575 11.2777V10.3614C4.20448 10.0594 3.59241 9.41 3.49627 8.43355C3.20367 8.15831 2.71819 7.59711 2.71819 6.90245C2.71819 6.48066 2.88539 6.14048 3.03229 5.92422C2.94272 5.47204 2.77432 4.52538 2.77432 3.83073C2.77432 1.50369 4.39855 0 6.91192 0C7.63327 0 8.50928 0.193026 8.99714 0.714314C10.1365 0.914489 11.0501 2.26031 11.0501 3.83073C11.0501 4.83815 10.8728 5.66685 10.7659 6.07673C10.8847 6.2775 11.0131 6.57538 11.0131 6.92092C11.0131 7.70196 10.6178 8.20716 10.2488 8.47704C10.1443 9.43979 9.59429 10.0606 9.25869 10.3549V11.2777C9.25869 11.8502 10.2989 12.2351 11.3051 12.6074C12.4492 13.0304 13.6328 13.4683 14 14.4257L12.9616 14.8213C12.7753 14.3328 11.7888 13.9681 10.9187 13.6464C9.62056 13.1657 8.1486 12.6211 8.1486 11.2777V9.77997L8.40776 9.61732C8.43404 9.60005 9.15598 9.11629 9.15598 8.14997V7.77524L9.50471 7.63583C9.56323 7.60902 9.90241 7.43089 9.90241 6.92092C9.90241 6.76483 9.78298 6.59028 9.74118 6.54142L9.53875 6.30431L9.63191 6.00226C9.63489 5.99273 9.94003 5.0562 9.94003 3.83073C9.94003 2.78517 9.33931 1.79681 8.70335 1.79681H8.38447L8.22384 1.52216C8.10621 1.32139 7.607 1.10811 6.91192 1.10811C5.01659 1.10811 3.88441 2.12567 3.88441 3.83073C3.88441 4.63619 4.16746 5.93316 4.17044 5.94626L4.23613 6.24653L4.01638 6.461C4.01638 6.461 3.82828 6.65939 3.82828 6.90245C3.82828 7.20927 4.19731 7.59115 4.37586 7.72818L4.59202 7.89439L4.59382 8.16844C4.59382 9.08114 5.38324 9.59588 5.41727 9.61732L5.67285 9.78056L5.67584 11.2777C5.67584 12.6688 4.11192 13.3688 2.73133 13.986C2.06492 14.2839 1.15308 14.6926 1.01693 15Z"
+          fillRule="evenodd"
+        />
+      </svg>
+    </div>
+    <p
+      className="paragraph color-base size-xs weight-normal is-inline"
+    >
+      User
+    </p>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Molecules/IconLabel Horizontal 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="icon-label is-clickable direction-horizontal"
+    onClick={[Function]}
+  >
+    <div
+      className="icon color-base size-sm background-transparent"
+      style={
+        Object {
+          "height": 25,
+          "width": 25,
+        }
+      }
+    >
+      <svg
+        height={25}
+        viewBox="0 0 14 15"
+        width={25}
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          clipRule="evenodd"
+          d="M1.01693 15L0 14.5538C0.308723 13.8561 1.22056 13.4481 2.2775 12.975C3.29682 12.5187 4.56575 11.9509 4.56575 11.2777V10.3614C4.20448 10.0594 3.59241 9.41 3.49627 8.43355C3.20367 8.15831 2.71819 7.59711 2.71819 6.90245C2.71819 6.48066 2.88539 6.14048 3.03229 5.92422C2.94272 5.47204 2.77432 4.52538 2.77432 3.83073C2.77432 1.50369 4.39855 0 6.91192 0C7.63327 0 8.50928 0.193026 8.99714 0.714314C10.1365 0.914489 11.0501 2.26031 11.0501 3.83073C11.0501 4.83815 10.8728 5.66685 10.7659 6.07673C10.8847 6.2775 11.0131 6.57538 11.0131 6.92092C11.0131 7.70196 10.6178 8.20716 10.2488 8.47704C10.1443 9.43979 9.59429 10.0606 9.25869 10.3549V11.2777C9.25869 11.8502 10.2989 12.2351 11.3051 12.6074C12.4492 13.0304 13.6328 13.4683 14 14.4257L12.9616 14.8213C12.7753 14.3328 11.7888 13.9681 10.9187 13.6464C9.62056 13.1657 8.1486 12.6211 8.1486 11.2777V9.77997L8.40776 9.61732C8.43404 9.60005 9.15598 9.11629 9.15598 8.14997V7.77524L9.50471 7.63583C9.56323 7.60902 9.90241 7.43089 9.90241 6.92092C9.90241 6.76483 9.78298 6.59028 9.74118 6.54142L9.53875 6.30431L9.63191 6.00226C9.63489 5.99273 9.94003 5.0562 9.94003 3.83073C9.94003 2.78517 9.33931 1.79681 8.70335 1.79681H8.38447L8.22384 1.52216C8.10621 1.32139 7.607 1.10811 6.91192 1.10811C5.01659 1.10811 3.88441 2.12567 3.88441 3.83073C3.88441 4.63619 4.16746 5.93316 4.17044 5.94626L4.23613 6.24653L4.01638 6.461C4.01638 6.461 3.82828 6.65939 3.82828 6.90245C3.82828 7.20927 4.19731 7.59115 4.37586 7.72818L4.59202 7.89439L4.59382 8.16844C4.59382 9.08114 5.38324 9.59588 5.41727 9.61732L5.67285 9.78056L5.67584 11.2777C5.67584 12.6688 4.11192 13.3688 2.73133 13.986C2.06492 14.2839 1.15308 14.6926 1.01693 15Z"
+          fillRule="evenodd"
+        />
+      </svg>
+    </div>
+    <div
+      className="spacer horizontal"
+      style={
+        Object {
+          "height": "100%",
+          "maxHeight": "auto",
+          "width": 5,
+        }
+      }
+    />
+    <p
+      className="paragraph color-base size-xs weight-normal is-inline"
+    >
+      User
+    </p>
+  </div>
+</div>
+`;

package/molecules/IconLabel/constants.js

@@ -0,0 +1,6 @@
+import { options as iconOptions } from '../../atoms/Icon/constants'
+
+export const options = {
+  icons: iconOptions.names,
+  sizes: ['sm', 'md'],
+}

package/molecules/IconLabel/index.js

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