@pareto-engineering/design-system 2.0.0-alpha.9 → 3.0.0-alpha.22

package/dist/es/f/fields/TaskRecommendation/TaskRecommendation.js

@@ -1,111 +0,0 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-/* @pareto-engineering/generator-front 1.0.12 */
-import * as React from 'react';
-import { useLayoutEffect } from 'react';
-import PropTypes from 'prop-types';
-import { useField } from 'formik';
-import styleNames from '@pareto-engineering/bem';
-import { FormLabel } from "../../common"; // Local Definitions
-
-const baseClassName = styleNames.base;
-const componentClassName = 'task-recommendation';
-/**
- * This is the component description.
- */
-
-const TaskRecommendation = ({
-  id,
-  className: userClassName,
-  style,
-  name,
-  value,
-  oneLiner,
-  label,
-  color,
-  image // ...otherProps
-
-}) => {
-  var _field$value;
-
-  useLayoutEffect(() => {
-    import("./styles.scss");
-  }, []);
-  const [field] = useField(name);
-  const isOptionSelected = !!(((_field$value = field.value) === null || _field$value === void 0 ? void 0 : _field$value.length) > 0 && field.value.includes(value));
-  return /*#__PURE__*/React.createElement("div", {
-    id: id,
-    className: [baseClassName, componentClassName, userClassName, `x-${color}`].filter(e => e).join(' '),
-    style: style // {...otherProps}
-
-  }, /*#__PURE__*/React.createElement("div", {
-    className: `task-content ${isOptionSelected ? 'b-x' : 'b-on-x'}`
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "v1 p-v task"
-  }, /*#__PURE__*/React.createElement(FormLabel, {
-    className: `uc mb-v ${isOptionSelected ? 'c-on-x' : 'c-x'}`,
-    name: name
-  }, label), /*#__PURE__*/React.createElement("input", _extends({}, field, {
-    value: value,
-    id: name,
-    className: "input",
-    type: "checkbox"
-  })), /*#__PURE__*/React.createElement("img", {
-    className: "image",
-    src: image,
-    alt: "img"
-  }), /*#__PURE__*/React.createElement("p", {
-    className: ['uc u2 mt-u', isOptionSelected && 'c-on-x'].filter(e => e).join(' ')
-  }, oneLiner))));
-};
-
-TaskRecommendation.propTypes = {
-  /**
-   * The HTML id for this element
-   */
-  id: PropTypes.string,
-
-  /**
-   * The HTML class names for this element
-   */
-  className: PropTypes.string,
-
-  /**
-   * The React-written, css properties for this element.
-   */
-  style: PropTypes.objectOf(PropTypes.string),
-
-  /**
-   *  The name of the input
-   */
-  name: PropTypes.string.isRequired,
-
-  /**
-   *  The value of the input
-   */
-  value: PropTypes.string.isRequired,
-
-  /**
-   *  The task one liner description
-   */
-  oneLiner: PropTypes.string.isRequired,
-
-  /**
-   *  The task label
-   */
-  label: PropTypes.string.isRequired,
-
-  /**
-   *  The color
-   */
-  color: PropTypes.string,
-
-  /**
-   *  Task image
-   */
-  image: PropTypes.string.isRequired
-};
-TaskRecommendation.defaultProps = {
-  color: 'main2'
-};
-export default TaskRecommendation;

package/dist/es/f/fields/TaskRecommendation/index.js

@@ -1,2 +0,0 @@
-/* @pareto-engineering/generator-front 1.0.12 */
-export { default as TaskRecommendation } from "./TaskRecommendation";

package/dist/es/f/fields/TaskRecommendation/styles.scss

@@ -1,37 +0,0 @@
-/* @pareto-engineering/generator-front 1.0.12 */
-@use "@pareto-engineering/bem";
-
-.#{bem.$base}.task-recommendation {
-
-  .task-content {
-    border-radius: var(--theme-border-radius);
-    border: 1px solid var(--x);
-    height: 100%;
-
-    .task {
-      position: relative;
-      display: flex;
-      flex-direction: column;
-      justify-content: space-around;
-      align-items: center;
-      height: 100%;
-
-      .input {
-        appearance: none;
-        position: absolute;
-        left: 0;
-        top: 0;
-        bottom:0;
-        cursor: pointer;
-        width: 100%;
-      }
-
-      .image {
-        width: 7rem;
-      }
-    }
-  }
-}
-
-
-

package/dist/es/f/fields/TaskRecommendationInput/TaskRecommendationInput.js

@@ -1,111 +0,0 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-/* @pareto-engineering/generator-front 1.0.12 */
-import * as React from 'react';
-import { useLayoutEffect, memo } from 'react';
-import PropTypes from 'prop-types';
-import { useField } from 'formik';
-import styleNames from '@pareto-engineering/bem';
-import { FormLabel } from "../../common"; // Local Definitions
-
-const baseClassName = styleNames.base;
-const componentClassName = 'task-recommendation-input';
-/**
- * This is the component description.
- */
-
-const TaskRecommendationInput = ({
-  id,
-  className: userClassName,
-  style,
-  name,
-  value,
-  oneLiner,
-  label,
-  color,
-  image // ...otherProps
-
-}) => {
-  var _field$value;
-
-  useLayoutEffect(() => {
-    import("./styles.scss");
-  }, []);
-  const [field] = useField(name);
-  const isOptionSelected = !!(((_field$value = field.value) === null || _field$value === void 0 ? void 0 : _field$value.length) > 0 && field.value.includes(value));
-  return /*#__PURE__*/React.createElement("div", {
-    id: id,
-    className: [baseClassName, componentClassName, userClassName, `x-${color}`].filter(e => e).join(' '),
-    style: style // {...otherProps}
-
-  }, /*#__PURE__*/React.createElement("div", {
-    className: `task-content ${isOptionSelected ? 'b-x' : 'b-on-x'}`
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "v1 p-v task"
-  }, /*#__PURE__*/React.createElement(FormLabel, {
-    className: `uc mb-v ${isOptionSelected ? styleNames.modifierActive : ''}`,
-    name: name
-  }, label), /*#__PURE__*/React.createElement("input", _extends({}, field, {
-    value: value,
-    id: name,
-    className: "input",
-    type: "checkbox"
-  })), /*#__PURE__*/React.createElement("img", {
-    className: "image",
-    src: image,
-    alt: "img"
-  }), /*#__PURE__*/React.createElement("p", {
-    className: ['uc u2 mt-u', isOptionSelected && 'c-on-x'].filter(e => e).join(' ')
-  }, oneLiner))));
-};
-
-TaskRecommendationInput.propTypes = {
-  /**
-   * The HTML id for this element
-   */
-  id: PropTypes.string,
-
-  /**
-   * The HTML class names for this element
-   */
-  className: PropTypes.string,
-
-  /**
-   * The React-written, css properties for this element.
-   */
-  style: PropTypes.objectOf(PropTypes.string),
-
-  /**
-   *  The name of the input
-   */
-  name: PropTypes.string.isRequired,
-
-  /**
-   *  The value of the input
-   */
-  value: PropTypes.string.isRequired,
-
-  /**
-   *  The task one liner description
-   */
-  oneLiner: PropTypes.string.isRequired,
-
-  /**
-   *  The task label
-   */
-  label: PropTypes.string.isRequired,
-
-  /**
-   *  The color
-   */
-  color: PropTypes.string,
-
-  /**
-   *  Task image
-   */
-  image: PropTypes.string.isRequired
-};
-TaskRecommendationInput.defaultProps = {
-  color: 'main1'
-};
-export default /*#__PURE__*/memo(TaskRecommendationInput);

package/dist/es/f/fields/TaskRecommendationInput/index.js

@@ -1,2 +0,0 @@
-/* @pareto-engineering/generator-front 1.0.12 */
-export { default as TaskRecommendationInput } from "./TaskRecommendationInput";

package/dist/es/f/fields/TaskRecommendationInput/styles.scss

@@ -1,41 +0,0 @@
-/* @pareto-engineering/generator-front 1.0.12 */
-@use "@pareto-engineering/bem";
-
-.#{bem.$base}.task-recommendation-input {
-
-  .task-content {
-    border-radius: var(--theme-border-radius);
-    border: 1px solid var(--x);
-    height: 100%;
-
-    .task {
-      position: relative;
-      display: flex;
-      flex-direction: column;
-      justify-content: space-around;
-      align-items: center;
-      height: 100%;
-
-      .#{bem.$modifier-active} {
-        color: var(--on-x);
-      }
-
-      .input {
-        appearance: none;
-        position: absolute;
-        left: 0;
-        top: 0;
-        bottom:0;
-        cursor: pointer;
-        width: 100%;
-      }
-
-      .image {
-        width: 7rem;
-      }
-    }
-  }
-}
-
-
-

package/dist/es/f/fields/TextArea/TextArea.js

@@ -1,124 +0,0 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-/* @pareto-engineering/generator-front 1.0.12 */
-import * as React from 'react';
-import { useLayoutEffect } from 'react';
-import PropTypes from 'prop-types';
-import styleNames from '@pareto-engineering/bem';
-import { useField } from 'formik'; // Local Definitions
-
-import { FormLabel, FormDescription } from "../../common";
-const baseClassName = styleNames.base;
-const componentClassName = 'text-area';
-/**
- * This is the component description.
- */
-
-const TextArea = ({
-  id,
-  className: userClassName,
-  style,
-  name,
-  label,
-  validate,
-  labelAsDescription,
-  textAreaId,
-  rows,
-  textAreaColor,
-  labelColor,
-  description // ...otherProps
-
-}) => {
-  useLayoutEffect(() => {
-    import("./styles.scss");
-  }, []);
-  const [field, meta] = useField({
-    name,
-    validate
-  });
-  return /*#__PURE__*/React.createElement("div", {
-    id: id,
-    className: [baseClassName, componentClassName, userClassName, `x-${textAreaColor}`, `y-${labelColor}`].filter(e => e).join(' '),
-    style: style // {...otherProps}
-
-  }, /*#__PURE__*/React.createElement(FormLabel, {
-    className: ['c-y', labelAsDescription ? 'md-s2 s0 v1 mb-v' : 'v50 mb-v'].filter(e => e).join(' '),
-    name: name
-  }, label), /*#__PURE__*/React.createElement("textarea", _extends({
-    id: textAreaId,
-    className: `textarea v50 pv-v ${meta.touched && meta.error ? 'input-border-error' : 'input-border'}`
-  }, field, {
-    rows: rows
-  })), (description || meta.touched && meta.error) && /*#__PURE__*/React.createElement(FormDescription, {
-    isError: !!meta.error,
-    className: "v50 mt-v s-1"
-  }, meta.error || description), ' ');
-};
-
-TextArea.propTypes = {
-  /**
-   * The HTML id for this element
-   */
-  id: PropTypes.string,
-
-  /**
-   * The HTML class names for this element
-   */
-  className: PropTypes.string,
-
-  /**
-   * The React-written, css properties for this element.
-   */
-  style: PropTypes.objectOf(PropTypes.string),
-
-  /**
-   * The input name (html - and Formik state)
-   */
-  name: PropTypes.string.isRequired,
-
-  /**
-   * The input label
-   */
-  label: PropTypes.string.isRequired,
-
-  /**
-   * The input value validator function
-   */
-  validate: PropTypes.func,
-
-  /**
-   * If the text area depends on it's label's text as the default description
-   */
-  labelAsDescription: PropTypes.bool,
-
-  /**
-   * The textarea id
-  */
-  textAreaId: PropTypes.string,
-
-  /**
-   * The number of rows int the text area
-   */
-  rows: PropTypes.number,
-
-  /**
-   * Text area base color
-   */
-  textAreaColor: PropTypes.string,
-
-  /**
-   * Label base color
-   */
-  labelColor: PropTypes.string,
-
-  /**
-   * Text area description
-   */
-  description: PropTypes.string
-};
-TextArea.defaultProps = {
-  rows: 3,
-  textAreaColor: 'background',
-  labelColor: 'main1'
-};
-export default TextArea;

package/dist/es/f/fields/TextArea/index.js

@@ -1,2 +0,0 @@
-/* @pareto-engineering/generator-front 1.0.12 */
-export { default as TextArea } from "./TextArea";

package/dist/es/f/fields/TextArea/styles.scss

@@ -1,19 +0,0 @@
-/* @pareto-engineering/generator-front 1.0.12 */
-@use "@pareto-engineering/bem";
-
-.#{bem.$base}.text-area{
-  display: flex;
-  flex-direction: column;
-
-  .textarea {
-    background: var(--light-x);
-    color: var(--on-x);
-
-    &:focus {
-      background: var(--dark-x);
-    }
-  }
-}
-
-
-

package/scripts/postinstall.js

@@ -1 +0,0 @@
-console.log(`${process.env.npm_package_name}@${process.env.npm_package_version} successfully installed.`)

package/scripts/upgrade.sh

@@ -1,10 +0,0 @@
-#!/bin/bash
-
-read -p "You are about to upgrade stroybook automatically to the latest version. Please understand this might break, so please only continue (Y) if you promess you will test the upgrade BEFORE committing it to the repo. " -n 1 -r
-echo    # (optional) move to a new line
-if [[ $REPLY =~ ^[Yy]$ ]]
-then
-  npx sb upgrade
-    # do dangerous stuff
-fi
-

package/src/stories/a/ContentCard.stories.jsx

@@ -1,158 +0,0 @@
-/* @pareto-engineering/generator-front 1.0.12 */
-import * as React from 'react'
-
-import { Title, Conversation, ContentCard } from 'ui'
-
-export default {
-  title        :'a/ContentCard',
-  component    :ContentCard,
-  subcomponents:{
-    'ContentCard.Section':ContentCard.Section,
-  },
-  decorators:[
-    // storyfn => <div className="">{ storyfn() }</div>,
-  ],
-  argTypes:{
-    backgroundColor:{ control: 'color' },
-  },
-}
-
-export const LayoutLeft = () => {
-  const conversations = [
-    {
-      message:'Hi Camille, please compile an assesment of top 5 firms/brand providers for the listed fields in the US.',
-      sender :'Camille',
-      from   :'ours',
-    },
-    {
-      message:'Hi Camille, please compile an assesment of top 4 firms/brand providers for the listed fields in the US.',
-      sender :'HUMBL',
-      from   :'theirs',
-    },
-    {
-      message:'Hi Camille, please compile an assesment of top 3 firms/brand providers for the listed fields in the US.',
-      sender :'Camille',
-      from   :'ours',
-    },
-  ]
-
-  return (
-    <div className="u1 p-u" style={{ backgroundColor: 'green' }}>
-      <ContentCard>
-        <ContentCard.Section layout="left" className="p-u">
-          <Title
-            heading="Task Followup"
-            className="content p-u"
-            headingAs="p"
-            headingClassName="heading h1"
-            subtitle="Camille shows Humbl the initial progress to verify that the work aligns with the needs. She shares the document populated with one hour of work"
-            subtitleClassName="subtitle"
-          />
-          <Conversation className="illustration">
-            {conversations.map((conversation) => (
-              <Conversation.Message key={conversation.message} {...conversation} />
-            ))}
-          </Conversation>
-        </ContentCard.Section>
-      </ContentCard>
-    </div>
-  )
-}
-
-export const LayoutRight = () => {
-  const conversations = [
-    {
-      message:'Hi Camille, please compile an assesment of top 5 firms/brand providers for the listed fields in the US.',
-      sender :'Camille',
-      from   :'ours',
-    },
-    {
-      message:'Hi Camille, please compile an assesment of top 4 firms/brand providers for the listed fields in the US.',
-      sender :'HUMBL',
-      from   :'theirs',
-    },
-    {
-      message:'Hi Camille, please compile an assesment of top 3 firms/brand providers for the listed fields in the US.',
-      sender :'Camille',
-      from   :'ours',
-    },
-  ]
-
-  return (
-    <div className="u1 p-u" style={{ backgroundColor: 'green' }}>
-      <ContentCard>
-        <ContentCard.Section layout="right" className="p-u">
-          <Title
-            heading="Task Followup"
-            className="content p-u"
-            headingAs="p"
-            headingClassName="heading h1"
-            subtitle="Camille shows Humbl the initial progress to verify that the work aligns with the needs. She shares the document populated with one hour of work"
-            subtitleClassName="subtitle"
-          />
-          <Conversation className="illustration">
-            {conversations.map((conversation) => (
-              <Conversation.Message key={conversation.message} {...conversation} />
-            ))}
-          </Conversation>
-        </ContentCard.Section>
-      </ContentCard>
-    </div>
-  )
-}
-
-export const LayoutCenter = () => (
-  <div className="u1 p-u" style={{ backgroundColor: 'green' }}>
-    <ContentCard color="background1">
-      <ContentCard.Section layout="center" className="p-u">
-        <p className="content p-u">
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit asperiores facilis,
-          praesentium porro accusantium id ducimus adipisci repudiandae ab totam, sit provident.
-          Quisquam aliquam facere delectus est vel illo nobis?
-        </p>
-      </ContentCard.Section>
-    </ContentCard>
-  </div>
-)
-
-export const ContentAfter = () => {
-  const conversations = [
-    {
-      message:'Hi Camille, please compile an assesment of top 5 firms/brand providers for the listed fields in the US.',
-      sender :'Camille',
-      from   :'ours',
-    },
-    {
-      message:'Hi Camille, please compile an assesment of top 4 firms/brand providers for the listed fields in the US.',
-      sender :'HUMBL',
-      from   :'theirs',
-    },
-    {
-      message:'Hi Camille, please compile an assesment of top 3 firms/brand providers for the listed fields in the US.',
-      sender :'Camille',
-      from   :'ours',
-    },
-  ]
-
-  return (
-    <div className="u1 p-u" style={{ backgroundColor: 'green' }}>
-      <ContentCard>
-        <ContentCard.Section layout="right" className="p-u" contentAfter>
-          <Title
-            heading="Task Followup"
-            className="content p-u"
-            headingAs="p"
-            headingClassName="heading h1"
-            subtitle="Camille shows Humbl the initial progress to verify that the work aligns with the needs. She shares the document populated with one hour of work"
-            subtitleClassName="subtitle"
-          />
-          <Conversation className="illustration">
-            {conversations.map((conversation) => (
-              <Conversation.Message key={conversation.message} {...conversation} />
-            ))}
-          </Conversation>
-        </ContentCard.Section>
-      </ContentCard>
-    </div>
-  )
-}

package/src/stories/a/CustomerLogos.stories.jsx

@@ -1,35 +0,0 @@
-/* @pareto-engineering/generator-front 1.0.12 */
-import * as React from 'react'
-
-import { CustomerLogos } from 'ui'
-
-export default {
-  title        :'a/CustomerLogos',
-  component    :CustomerLogos,
-  subcomponents:{
-    // Item:CustomerLogos.Item
-  },
-  decorators:[
-    // storyfn => <div className="">{ storyfn() }</div>,
-  ],
-  argTypes:{
-    backgroundColor:{ control: 'color' },
-  },
-}
-
-export const Base = () => {
-  const logosMap = [
-    { img: 'https://pareto-v1.s3-us-west-2.amazonaws.com/community-logos/1517-logo.png', altText: '1517 VC logo' },
-    { img: 'https://pareto-v1.s3-us-west-2.amazonaws.com/community-logos/yc-logo.png', altText: 'YC logo' },
-    { img: 'https://pareto-v1.s3-us-west-2.amazonaws.com/community-logos/stanford-logo.png', altText: 'Stanford University logo' },
-    { img: 'https://pareto-v1.s3-us-west-2.amazonaws.com/community-logos/startx-logo.png', altText: 'StartX logo' },
-    { img: 'https://pareto-v1.s3-us-west-2.amazonaws.com/community-logos/techstars-logo.png', altText: 'Techstars logo' },
-    { img: 'https://pareto-v1.s3-us-west-2.amazonaws.com/community-logos/contrary-logo.png', altText: 'Contrary Capital logo' },
-    { img: 'https://pareto-v1.s3-us-west-2.amazonaws.com/community-logos/alchemist-logo.png', altText: 'Alchemist Accelerator logo' },
-    { img: 'https://pareto-v1.s3-us-west-2.amazonaws.com/community-logos/pear-logo.png', altText: 'Pear logo' },
-  ]
-
-  return (
-    <CustomerLogos logosMap={logosMap} />
-  )
-}

package/src/stories/a/CustomerStat.stories.jsx

@@ -1,22 +0,0 @@
-/* @pareto-engineering/generator-front 1.0.12 */
-import * as React from 'react'
-
-import { CustomerStat } from 'ui'
-
-export default {
-  title        :'a/CustomerStat',
-  component    :CustomerStat,
-  subcomponents:{
-    // Item:AnimatedCounter.Item
-  },
-  decorators:[
-    // storyfn => <div className="">{ storyfn() }</div>,
-  ],
-  argTypes:{
-    backgroundColor:{ control: 'color' },
-  },
-}
-
-export const Base = () => (
-  <CustomerStat description="Company Name" label="Pareto Inc." />
-)