imbric-theme 0.1.0

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

@@ -0,0 +1,181 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Molecules/Dropdown 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="dropdown"
+  >
+    <div
+      className="dropdown-icon icon color-base size-md background-highlight"
+      style={
+        Object {
+          "height": 35,
+          "width": 35,
+        }
+      }
+    >
+      <svg
+        height={35}
+        viewBox="0 0 15 9"
+        width={35}
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          clipRule="evenodd"
+          d="M7.82633 8.70623L0.882568 1.54063L1.89405 0.496826L7.82633 6.61863L13.7586 0.496826L14.7701 1.54063L7.82633 8.70623Z"
+          fillRule="evenodd"
+        />
+      </svg>
+    </div>
+    <select
+      className="dropdown-select"
+      onChange={[Function]}
+      value=""
+    >
+      <option
+        value={800}
+      >
+        8:00 AM
+      </option>
+      <option
+        value={1300}
+      >
+        1:00 PM
+      </option>
+    </select>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Molecules/Dropdown Inline 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="dropdown is-inline"
+  >
+    <div
+      className="dropdown-icon icon color-base size-md background-highlight"
+      style={
+        Object {
+          "height": 35,
+          "width": 35,
+        }
+      }
+    >
+      <svg
+        height={35}
+        viewBox="0 0 15 9"
+        width={35}
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          clipRule="evenodd"
+          d="M7.82633 8.70623L0.882568 1.54063L1.89405 0.496826L7.82633 6.61863L13.7586 0.496826L14.7701 1.54063L7.82633 8.70623Z"
+          fillRule="evenodd"
+        />
+      </svg>
+    </div>
+    <select
+      className="dropdown-select"
+      onChange={[Function]}
+      value=""
+    >
+      <option
+        value={800}
+      >
+        8:00 AM
+      </option>
+      <option
+        value={1300}
+      >
+        1:00 PM
+      </option>
+    </select>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Molecules/Dropdown Value 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="dropdown"
+  >
+    <div
+      className="dropdown-icon icon color-base size-md background-highlight"
+      style={
+        Object {
+          "height": 35,
+          "width": 35,
+        }
+      }
+    >
+      <svg
+        height={35}
+        viewBox="0 0 15 9"
+        width={35}
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          clipRule="evenodd"
+          d="M7.82633 8.70623L0.882568 1.54063L1.89405 0.496826L7.82633 6.61863L13.7586 0.496826L14.7701 1.54063L7.82633 8.70623Z"
+          fillRule="evenodd"
+        />
+      </svg>
+    </div>
+    <select
+      className="dropdown-select"
+      onChange={[Function]}
+      value={1300}
+    >
+      <option
+        value={800}
+      >
+        8:00 AM
+      </option>
+      <option
+        value={1300}
+      >
+        1:00 PM
+      </option>
+    </select>
+  </div>
+</div>
+`;

package/molecules/Dropdown/index.js

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

package/molecules/DynamicSelect/DynamicSelect.js

@@ -0,0 +1,186 @@
+import React from 'react'
+import Select from 'react-select'
+import PropTypes from 'prop-types'
+import styles from './DynamicSelect.module.css'
+import withStyles from '../../hocs/withStyles'
+
+
+export const DynamicSelect = ({
+  getStyles,
+  optionsSelect,
+  value,
+  defaultValue,
+  placeholder,
+  isMulti,
+  isClearable,
+  isDisabled,
+  isLoading,
+  isRtl,
+  isSearchable,
+  isInline,
+  onChange,
+  onFocus,
+  onBlur,
+  closeMenuOnSelect,
+  maxMenuHeight,
+  instanceId,
+}) => {
+
+
+  const customStyles = {
+
+    option: (base, state) => ({
+      ...base,
+      cursor: 'pointer',
+      width: "max-content",
+      minWidth: "100%",
+      position: 'relative',
+      backgroundColor: state.isSelected ? 'var(--color-primary)' : 'transparent',
+      "&:hover": {
+        backgroundColor: "var(--color-primary-highlight)",
+        color: 'var(--color-primary)',
+      },
+      // "&:active": {
+      //   backgroundColor: "var(--color-primary)"
+      // }
+    }),
+    control: (base, state) => ({
+      ...base,
+      cursor: 'pointer',
+      width: '100%',
+      borderRadius: 0,
+      border: 'var(--border-width-thin) solid var(--color-brand-white-lilac)',
+      // border: state.isFocused ? "var(--border-width-thin) solid var(--color-brand-white-lilac)" : "var(--border-width-thin) solid var(--color-brand-white-lilac)",
+      boxShadow: state.isFocused ? "0 0 0 1px var(--color-primary), 0 0 10px 0 var(--color-primary)" : "none",
+      "&:hover": {
+        borderColor: "var(--color-primary)"
+      }
+    }),
+    input: (base) => ({
+      ...base,
+      cursor: 'pointer',
+      margin: '2px',
+      paddingBottom: '2px',
+      paddingTop: '2px',
+    }),
+
+    placeholder: (base) => ({
+      ...base,
+      color: 'var(--color-brand-white-lilac)',
+      fontWeight: 'var(--font-weight-light)',
+      whiteSpace: 'nowrap',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+    }),
+
+    valueContainer: (base, state) => ({
+      ...base,
+      textOverflow: "ellipsis",
+      whiteSpace: "nowrap",
+      overflow: "hidden",
+      // display: "inline-grid"
+      // maxHeight: "38px",
+    }),
+
+    container: (base) => ({
+      ...base,
+      // width: "max-content",
+      minWidth: "100%",
+    }),
+
+    menu: (base) => ({
+      ...base,
+      width: "max-content",
+      minWidth: "100%",
+    }),
+
+    // menu: styles => ({ ...styles,                 
+    //   width: '500px'
+    //  })  
+
+    // indicatorsContainer: (provided, state) => ({
+    //   ...provided,
+    //   height: '50px',
+    // }),
+
+  }
+
+  // const handleChange = (value) => {
+  //   console.group('Value Changed');
+  //   console.log(value);
+  //   // console.log(`action: ${actionMeta.action}`);
+  //   console.groupEnd();
+  // };
+
+  return (
+
+    <div className={getStyles('dynamic-select', {
+      'is-inline': isInline,
+    })}>
+      <Select
+        name="basic"
+        // className="basic-single"
+        // classNamePrefix="select"
+        placeholder={placeholder}
+        styles={customStyles}
+        options={optionsSelect}
+        defaultValue={defaultValue}
+        value={value}
+        isMulti={isMulti}
+        isClearable={isClearable}
+        isDisabled={isDisabled}
+        isLoading={isLoading}
+        isRtl={isRtl}
+        isSearchable={isSearchable}
+        onChange={onChange}
+        onFocus={onFocus}
+        onBlur={onBlur}
+        closeMenuOnSelect={closeMenuOnSelect}
+        maxMenuHeight={maxMenuHeight}
+        autosize={true}
+        instanceId={instanceId}
+      />
+    </div>
+
+  )
+}
+
+DynamicSelect.propTypes = {
+  getStyles: PropTypes.func.isRequired,
+  defaultValue: PropTypes.any,
+  value: PropTypes.any,
+  placeholder: PropTypes.string,
+  isMulti: PropTypes.bool,
+  isClearable: PropTypes.bool,
+  isDisabled: PropTypes.bool,
+  isLoading: PropTypes.bool,
+  isRtl: PropTypes.bool,
+  isSearchable: PropTypes.bool,
+  isInline: PropTypes.bool,
+  onChange: PropTypes.func,
+  onFocus: PropTypes.func,
+  onBlur: PropTypes.func,
+  closeMenuOnSelect: PropTypes.bool,
+  maxMenuHeight: PropTypes.number,
+  instanceId: PropTypes.string,
+}
+
+DynamicSelect.defaultProps = {
+  getStyles: () => { },
+  placeholder: 'seleccionar',
+  isMulti: false,
+  isClearable: true,
+  isDisabled: false,
+  isLoading: false,
+  isRtl: false,
+  isSearchable: false,
+  isInline: false,
+  onChange: () => { },
+  onFocus: () => { },
+  onBlur: () => { },
+  closeMenuOnSelect: true,
+  maxMenuHeight: 300,
+  instanceId: ''
+}
+
+export default withStyles(styles)(DynamicSelect)

package/molecules/DynamicSelect/DynamicSelect.module.css

@@ -0,0 +1,10 @@
+.dynamic-select {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+  cursor: pointer;
+}
+
+.is-inline {
+  max-width: max-content;
+}

package/molecules/DynamicSelect/DynamicSelect.stories.js

@@ -0,0 +1,32 @@
+import { DynamicSelect, styles, options } from '.'
+
+import {
+  getTemplate,
+  getListTemplate,
+  getOptionsArgTypes,
+} from '../../helpers/storybook'
+
+const Template = getTemplate(DynamicSelect, styles)
+const ListTemplate = getListTemplate(DynamicSelect, styles)
+
+export default {
+  title: 'Molecules/DynamicSelect',
+  component: DynamicSelect,
+  args: {
+    optionsSelect: options.optionsSelect,
+    defaultValue: options.optionsSelect[0],
+    placeholder: 'seleccionar',
+    isMulti: false,
+    isClearable: true,
+    isDisabled: false,
+    isLoading: false,
+    isRtl: false,
+    isSearchable: false,
+    isInline: false,
+  },
+  argTypes: {
+    // types: getOptionsArgTypes(options.types),
+  },
+}
+
+export const Default = Template.bind({})

package/molecules/DynamicSelect/constants.js

@@ -0,0 +1,7 @@
+export const options = {
+    optionsSelect: [
+        { value: 'chocolate', label: 'Chocolate' },
+        { value: 'strawberry', label: 'Strawberry' },
+        { value: 'vanilla', label: 'Vanilla' }
+    ]
+}

package/molecules/DynamicSelect/index.js

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

package/molecules/Error/Error.js

@@ -0,0 +1,35 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import styles from './Error.module.css'
+import withStyles from '../../hocs/withStyles'
+
+import Spacer from '../../layout/Spacer'
+import Paragraph from '../../atoms/Paragraph'
+import Heading from '../../atoms/Heading'
+import Icon from '../../atoms/Icon'
+
+export const Error = ({ title, children, getStyles }) => {
+  return (
+    <div className={getStyles('error')}>
+      <Icon className="icon-warning" name="warning" size="lg" />
+      <Spacer.Horizontal size="sm" />
+      <div>
+        {title && <Heading>{title}</Heading>}
+        <Paragraph size="sm">{children}</Paragraph>
+      </div>
+    </div>
+  )
+}
+
+Error.propTypes = {
+  children: PropTypes.node.isRequired,
+  getStyles: PropTypes.func.isRequired,
+  title: PropTypes.string,
+}
+
+Error.defaultProps = {
+  getStyles: () => {},
+}
+
+export default withStyles(styles)(Error)

package/molecules/Error/Error.module.css

@@ -0,0 +1,12 @@
+.error {
+  display: flex;
+  padding: 10px 20px;
+  border-top: 2px solid var(--color-red-500);
+  background: var(--color-red-100);
+  color: var(--color-red-800);
+  border-radius: var(--border-radius-sm);
+}
+
+.error :global(.icon-warning) {
+  margin-top: -4px;
+}

package/molecules/Error/Error.stories.js

@@ -0,0 +1,18 @@
+import { Error, styles } from '.'
+
+import { getTemplate } from '../../helpers/storybook'
+
+const Template = getTemplate(Error, styles)
+
+export default {
+  title: 'Molecules/Error',
+  component: Error,
+  args: {
+    children:
+      "Meets counts consumed 200 Meriadoc tombs rabble noble crash thread. Another kind Imladris. Dump each Kingdom mere other's by blame ugly sending bestow mist adventure.",
+  },
+}
+
+export const Default = Template.bind({})
+export const Title = Template.bind({})
+Title.args = { title: 'Lindir glowers saw 111th utter.' }

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

@@ -0,0 +1,134 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Molecules/Error 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="error"
+  >
+    <div
+      className="icon-warning icon color-base size-md background-transparent"
+      style={
+        Object {
+          "height": 35,
+          "width": 35,
+        }
+      }
+    >
+      <svg
+        height={35}
+        viewBox="0 0 20 20"
+        width={35}
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          clipRule="evenodd"
+          d="M10 20C4.48612 20 0 15.5139 0 10C0 4.48612 4.48612 0 10 0C15.5139 0 20 4.48612 20 10C20 15.5139 15.5139 20 10 20ZM10 1.09864C5.09155 1.09864 1.09864 5.09155 1.09864 10C1.09864 14.9084 5.09155 18.9014 10 18.9014C14.9084 18.9014 18.9014 14.9084 18.9014 10C18.9014 5.09155 14.9084 1.09864 10 1.09864Z"
+          fillRule="evenodd"
+        />
+        <path
+          d="M10.7837 11.8579H9.25293L9.08447 4.33594H10.9595L10.7837 11.8579ZM9.0332 14.1577C9.0332 13.8794 9.12354 13.6499 9.3042 13.4692C9.48486 13.2837 9.73145 13.1909 10.0439 13.1909C10.3564 13.1909 10.603 13.2837 10.7837 13.4692C10.9644 13.6499 11.0547 13.8794 11.0547 14.1577C11.0547 14.4263 10.9668 14.6509 10.791 14.8315C10.6152 15.0122 10.3662 15.1025 10.0439 15.1025C9.72168 15.1025 9.47266 15.0122 9.29688 14.8315C9.12109 14.6509 9.0332 14.4263 9.0332 14.1577Z"
+        />
+      </svg>
+    </div>
+    <div
+      className="spacer horizontal"
+      style={
+        Object {
+          "height": "100%",
+          "maxHeight": "auto",
+          "width": 15,
+        }
+      }
+    />
+    <div>
+      <p
+        className="paragraph color-base size-md weight-normal"
+      >
+        Meets counts consumed 200 Meriadoc tombs rabble noble crash thread. Another kind Imladris. Dump each Kingdom mere other's by blame ugly sending bestow mist adventure.
+      </p>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Molecules/Error Title 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="error"
+  >
+    <div
+      className="icon-warning icon color-base size-md background-transparent"
+      style={
+        Object {
+          "height": 35,
+          "width": 35,
+        }
+      }
+    >
+      <svg
+        height={35}
+        viewBox="0 0 20 20"
+        width={35}
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          clipRule="evenodd"
+          d="M10 20C4.48612 20 0 15.5139 0 10C0 4.48612 4.48612 0 10 0C15.5139 0 20 4.48612 20 10C20 15.5139 15.5139 20 10 20ZM10 1.09864C5.09155 1.09864 1.09864 5.09155 1.09864 10C1.09864 14.9084 5.09155 18.9014 10 18.9014C14.9084 18.9014 18.9014 14.9084 18.9014 10C18.9014 5.09155 14.9084 1.09864 10 1.09864Z"
+          fillRule="evenodd"
+        />
+        <path
+          d="M10.7837 11.8579H9.25293L9.08447 4.33594H10.9595L10.7837 11.8579ZM9.0332 14.1577C9.0332 13.8794 9.12354 13.6499 9.3042 13.4692C9.48486 13.2837 9.73145 13.1909 10.0439 13.1909C10.3564 13.1909 10.603 13.2837 10.7837 13.4692C10.9644 13.6499 11.0547 13.8794 11.0547 14.1577C11.0547 14.4263 10.9668 14.6509 10.791 14.8315C10.6152 15.0122 10.3662 15.1025 10.0439 15.1025C9.72168 15.1025 9.47266 15.0122 9.29688 14.8315C9.12109 14.6509 9.0332 14.4263 9.0332 14.1577Z"
+        />
+      </svg>
+    </div>
+    <div
+      className="spacer horizontal"
+      style={
+        Object {
+          "height": "100%",
+          "maxHeight": "auto",
+          "width": 15,
+        }
+      }
+    />
+    <div>
+      <h1
+        className="heading color-base size-md weight-bold"
+      >
+        Lindir glowers saw 111th utter.
+      </h1>
+      <p
+        className="paragraph color-base size-md weight-normal"
+      >
+        Meets counts consumed 200 Meriadoc tombs rabble noble crash thread. Another kind Imladris. Dump each Kingdom mere other's by blame ugly sending bestow mist adventure.
+      </p>
+    </div>
+  </div>
+</div>
+`;

package/molecules/Error/index.js

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