@pareto-engineering/design-system 0.0.1-alpha.60 → 0.0.1-alpha.64

package/dist/es/a/RatingsInput/RatingsInput.js

@@ -1,72 +0,0 @@
-/* @pareto-engineering/generator-front 1.0.12 */
-import * as React from 'react';
-import { useState, useLayoutEffect } from 'react';
-import PropTypes from 'prop-types';
-import styleNames from '@pareto-engineering/bem'; // Local Definitions
-
-import { Rating } from "./common";
-const baseClassName = styleNames.base;
-const componentClassName = 'ratings-input';
-/**
- * This is the component description.
- */
-
-const RatingsInput = ({
-  id,
-  className: userClassName,
-  style,
-  name,
-  ratingCount // ...otherProps
-
-}) => {
-  useLayoutEffect(() => {
-    import("./styles.scss");
-  }, []);
-  const [hover, setHover] = useState(null);
-  return /*#__PURE__*/React.createElement("div", {
-    id: id,
-    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
-    style: style // {...otherProps}
-
-  }, [...Array(ratingCount)].map((_, index) => {
-    const ratingValue = index + 1;
-    return /*#__PURE__*/React.createElement(Rating, {
-      key: ratingValue,
-      ratingId: `${name}-${ratingValue}`,
-      value: ratingValue,
-      name: name,
-      hover: hover,
-      setHover: setHover
-    });
-  }));
-};
-
-RatingsInput.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 number of ratings input stars to be displayed
-   */
-  ratingCount: PropTypes.number,
-
-  /**
-   * Name of the rating input
-   */
-  name: PropTypes.string
-};
-RatingsInput.defaultProps = {// someProp:false
-};
-export default RatingsInput;

package/dist/es/a/RatingsInput/common/Rating/Rating.js

@@ -1,102 +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 PropTypes from 'prop-types';
-import { useField } from 'formik';
-import styleNames from '@pareto-engineering/bem'; // Local Definitions
-
-const baseClassName = styleNames.base;
-const componentClassName = 'rating';
-/**
- * This is the component description.
- */
-
-const Rating = ({
-  id,
-  className: userClassName,
-  style,
-  value,
-  name,
-  ratingId,
-  hover,
-  setHover,
-  activeBackgroundColor,
-  inactiveBackgroundColor // ...otherProps
-
-}) => {
-  const [field] = useField(name);
-  return /*#__PURE__*/React.createElement("div", {
-    id: id,
-    className: [baseClassName, componentClassName, userClassName, `x-${activeBackgroundColor}`, `y-${inactiveBackgroundColor}`].filter(e => e).join(' '),
-    style: style
-  }, /*#__PURE__*/React.createElement("label", {
-    htmlFor: ratingId,
-    onMouseEnter: () => setHover(value),
-    onMouseLeave: () => setHover(null)
-  }, ' ', /*#__PURE__*/React.createElement("span", {
-    className: ['f-icons', value <= (hover || Number(field.value)) ? 'c-x' : 'c-dark-y'].filter(e => e).join(' ')
-  }, "[")), /*#__PURE__*/React.createElement("input", _extends({}, field, {
-    type: "radio",
-    id: ratingId,
-    name: name,
-    value: value
-  })));
-};
-
-Rating.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 value of each an every rating star
-   */
-  value: PropTypes.number,
-
-  /**
-   * The current hover value
-   */
-  hover: PropTypes.number,
-
-  /**
-   * Function to update the hover value
-   */
-  setHover: PropTypes.func,
-
-  /**
-   * Unique Id for each rating star
-   */
-  ratingId: PropTypes.string,
-
-  /**
-   * Name of the rating input
-   */
-  name: PropTypes.string,
-
-  /**
-   * The start rating backgriund color when hovered or clicked
-   */
-  activeBackgroundColor: PropTypes.string,
-
-  /**
-   * The start rating backgriund color when not hovered and not clicked
-   */
-  inactiveBackgroundColor: PropTypes.string
-};
-Rating.defaultProps = {
-  activeBackgroundColor: 'secondary2',
-  inactiveBackgroundColor: 'background'
-};
-export default Rating;

package/dist/es/a/RatingsInput/common/Rating/index.js

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

package/dist/es/a/RatingsInput/common/index.js

@@ -1 +0,0 @@
-export { Rating } from "./Rating";

package/dist/es/a/RatingsInput/index.js

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

package/dist/es/a/RatingsInput/styles.scss

@@ -1,35 +0,0 @@
-/* @pareto-engineering/generator-front 1.0.12 */
-@use "@pareto-engineering/bem";
-
-$default-rating-icon-margin: .5em;
-$default-padding: .2em;
-$default-transition: all .2s;
-
-.#{bem.$base}.ratings-input {
-  display: flex;
-
-  >:not(:first-child) {
-    margin-left: $default-rating-icon-margin;
-  }
-
-  .#{bem.$base}.rating {
-    display: flex;
-
-    input {
-      opacity: 0;
-      position: absolute;
-      visibility: none;
-      z-index: -1;
-    }
-
-    label {
-      padding: $default-padding;
-      transition: $default-transition;
-      cursor: pointer;
-    }
-  }
-}
-
-
-
-

package/src/stories/c/AcceptCookies.stories.jsx

@@ -1,27 +0,0 @@
-/* @pareto-engineering/generator-front 1.0.12 */
-import * as React from 'react'
-
-import { AcceptCookies } from 'ui'
-
-export default {
-  title        :'c/AcceptCookies',
-  component    :AcceptCookies,
-  subcomponents:{
-    // Item:AcceptCookies.Item
-  },
-  decorators:[
-    // storyfn => <div className="">{ storyfn() }</div>,
-  ],
-  argTypes:{
-    backgroundColor:{ control: 'color' },
-  },
-}
-
-export const Base = () => (
-  <div className="y-background b-dark-y" style={{ height: '100%' }}>
-    <AcceptCookies
-      title="This website uses cookies."
-      subtitle="We use cookies to personalise content and ads, to provide social medial features and to analyse our traffic."
-    />
-  </div>
-)

package/src/stories/c/BlogCategoryButton.stories.jsx

@@ -1,33 +0,0 @@
-/* @pareto-engineering/generator-front 1.0.12 */
-import * as React from 'react'
-
-import { BlogCategoryButton, BlogContextProvider } from 'ui'
-
-import blogUrlMap from './blogUrlMap'
-
-import Router from '../utils/Router'
-
-export default {
-  title        :'c/BlogCategoryButton',
-  component    :BlogCategoryButton,
-  subcomponents:{
-    // Item:BlogCategoryButton.Item
-  },
-  decorators:[
-    (storyfn) => <Router>{ storyfn() }</Router>,
-    (storyfn) => (
-      <BlogContextProvider
-        urlMap={blogUrlMap}
-      >
-        { storyfn() }
-      </BlogContextProvider>
-    ),
-  ],
-  argTypes:{
-    backgroundColor:{ control: 'color' },
-  },
-}
-
-export const Base = () => (
-  <BlogCategoryButton categorySlug="productivity" color="secondary1">Sample BlogCategoryButton</BlogCategoryButton>
-)

package/src/stories/c/BlogPost.stories.jsx

@@ -1,68 +0,0 @@
-/* @pareto-engineering/generator-front 1.0.12 */
-import * as React from 'react'
-
-import { BlogPost, BlogContextProvider } from 'ui'
-
-import blogUrlMap from './blogUrlMap'
-
-import Router from '../utils/Router'
-
-export default {
-  title        :'c/BlogPost',
-  component    :BlogPost,
-  subcomponents:{
-    // Item:BlogPost.Item
-  },
-  decorators:[
-    (storyfn) => <Router>{ storyfn() }</Router>,
-    (storyfn) => (
-      <BlogContextProvider
-        urlMap={blogUrlMap}
-      >
-        { storyfn() }
-      </BlogContextProvider>
-    ),
-  ],
-  argTypes:{
-    backgroundColor:{ control: 'color' },
-  },
-}
-
-export const Base = () => {
-  const blogPost = {
-    title      :'10 productivity tips you didnt know',
-    description:'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dapibus lectus nisl, ac maximus ex convallis sed. Donec quis eros vehicula, hendrerit enim sit amet, varius libero. Nullam vel nulla a ipsum cursus molestie. Phasellus ut sodales justo. Pellentesque maximus nulla in nibh condimentum, et eleifend turpis molestie.',
-    content    :`
-    <p>For new business owners, it is a challenge to avoid <strong>startup mistakes</strong> . But, identifying those mistakes at an early stage of business will give you an edge and a higher chance of success. While there isn't a fool-proof plan to reach small business startup success, there are several reasons why tech startups fail. According to the data provided by the <u>U.S. Bureau of Labor Statistics</u>, 20% of new businesses fail during the first two years of operation, and roughly half of all businesses don't survive past the fifth year.</p>
-
-<p>
-In business, prevention is always better than cure, and while it’s not always possible to prevent problems, being prepared usually pays off. But if a problem or mistake already occured, how do you ensure that it won’t happen again? Here are some common startup mistakes that you can prevent to improve your chances of success.
-</p>
-
-<p>
-There are a lot of reasons why a business startup fails. It is why you have to know the most significant causes so you can avoid them as early as possible. 
-</p>
-
-<h2 id="1-doing-it-alone">1. Doing It All Alone</h2>
-<p>Don’t try to complete all of your business tasks on your own – learn to delegate. Keep the 80/20 principle in mind and try to focus on the stuff that you deem the most important. Doing it all alone is a <strong>startup mistake</strong>. In reality, it requires a lot more than a single individual to launch a business. There are highs and lows, not to mention tasks that few can undertake alone. <em>Delegate all the non-essential stuff to others. This will also help you keep your productivity up – a must for all startup entrepreneurs.</em></p>
-
-<h2 id="2-doing-it-alone">2. No Concise Vision and Direction</h2>
-<p>Another big <strong>startup mistake</strong> is disregarding the value of setting a concise startup vision. Jay DesMarteau, head of small business banking at TD Bank, said an entrepreneur’s vision, whether in words, photos, graphs or other images—helps drive the business’ development and the owner’s decisions. <u>TD Bank</u> survey found that one in five small business owners used a vision board or other visual representations <strong>when starting their business</strong>; 76% of those business owners said that today their business is where they envisioned it would be when they started it. When the vision is clear, everyone has a good understanding of what needs to happen and will be more productive and motivated to excel.</p>
-    `,
-    publishedOn:'2021-07-01T14:47:46.963221+00:00',
-    author     :{
-      firstName:'Melissa',
-      lastName :'Lee',
-    },
-    category:{
-      name:'Business Tips',
-      slug:'business-tips',
-    },
-    mainImage:'https://images.pexels.com/photos/8647586/pexels-photo-8647586.jpeg?cs=srgb&dl=pexels-maxim-kovalev-8647586.jpg&fm=jpg',
-
-  }
-
-  return (
-    <BlogPost className="u1 md-u2" {...blogPost}>Sample BlogPost</BlogPost>
-  )
-}

package/src/stories/c/BlogPostsList.stories.jsx

@@ -1,91 +0,0 @@
-/* @pareto-engineering/generator-front 1.0.12 */
-import * as React from 'react'
-
-import { BlogPostsList, BlogContextProvider } from 'ui'
-
-import blogUrlMap from './blogUrlMap'
-
-import Router from '../utils/Router'
-
-export default {
-  title        :'c/BlogPostsList',
-  component    :BlogPostsList,
-  subcomponents:{
-    'BlogPostList.Card':BlogPostsList.Card,
-  },
-  decorators:[
-    (storyfn) => <Router>{ storyfn() }</Router>,
-    (storyfn) => (
-      <BlogContextProvider
-        urlMap={blogUrlMap}
-      >
-        { storyfn() }
-      </BlogContextProvider>
-    ),
-  ],
-  argTypes:{
-    backgroundColor:{ control: 'color' },
-  },
-}
-
-const cardMap = [
-  {
-    title      :'Some title',
-    slug       :'some-slug1',
-    updatedAt  :'2021-07-07T14:47:46.963221+00:00',
-    publishedOn:'2021-07-01T14:47:46.963221+00:00',
-    wordCount  :'820',
-    category   :{
-      name:'Productivity',
-      slug:'productivity',
-    },
-    mainImage  :'https://images.pexels.com/photos/4297441/pexels-photo-4297441.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260',
-    description:'In this article you will find some tips to increase your productivity',
-    author     :{
-      firstName:'John',
-      lastName :'Doe',
-    },
-    size:'lg',
-  },
-  {
-    title      :'Some Other Article',
-    slug       :'some-slug2',
-    updatedAt  :'2021-07-07T14:47:46.963221+00:00',
-    publishedOn:'2021-07-02T14:47:46.963221+00:00',
-    wordCount  :'2020',
-    category   :{
-      name:'Business',
-      slug:'business',
-    },
-    mainImage  :'https://images.pexels.com/photos/8557946/pexels-photo-8557946.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260',
-    description:'In this article you will find some tips to increase your productivity',
-    author     :{
-      firstName:'John',
-      lastName :'Doe',
-    },
-  },
-  {
-    title      :'Some title',
-    slug       :'some-slug3',
-    updatedAt  :'2021-07-07T14:47:46.963221+00:00',
-    publishedOn:'2021-06-27T14:47:46.963221+00:00',
-    wordCount  :'1320',
-    category   :{
-      name:'Productivity',
-      slug:'productivity',
-    },
-    mainImage  :'https://images.pexels.com/photos/5039042/pexels-photo-5039042.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260',
-    description:'In this article you will find some tips to increase your productivity',
-    author     :{
-      firstName:'John',
-      lastName :'Doe',
-    },
-    color:'secondary1',
-  },
-]
-
-export const Base = () => (
-  <BlogPostsList style={{ background: 'green' }}>
-    { cardMap.map((article) => <BlogPostsList.Card key={article.slug} {...article} />) }
-  </BlogPostsList>
-)