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

package/src/ui/c/BlogContext/Context.js

@@ -1,3 +0,0 @@
-import * as React from 'react'
-
-export default React.createContext({})

package/src/ui/c/BlogContext/ContextProvider.jsx

@@ -1,60 +0,0 @@
-/* @pareto-engineering/generator-front 1.0.12 */
-import * as React from 'react'
-import { useCallback } from 'react'
-
-import PropTypes from 'prop-types'
-
-import { generatePath } from 'react-router-dom'
-
-import Context from './Context'
-
-/**
- * This is the component description.
- */
-const BlogContextProvider = ({
-  urlMap,
-  children,
-  // ...otherProps
-}) => {
-  const generateBlogPath = useCallback((key, variables) => generatePath(
-    urlMap[key],
-    variables,
-  ),
-  [urlMap])
-
-  return (
-    <Context.Provider value={{
-      generateBlogPath,
-      urlMap,
-    }}
-    >
-      { children }
-    </Context.Provider>
-  )
-}
-
-BlogContextProvider.propTypes = {
-  /**
-   * The hash of urls
-   */
-  urlMap:PropTypes.shape({
-    HOME                   :PropTypes.string.isRequired,
-    LIST                   :PropTypes.string.isRequired,
-    LIST_PAGINATED         :PropTypes.string.isRequired,
-    LIST_CATEGORY          :PropTypes.string.isRequired,
-    LIST_CATEGORY_PAGINATED:PropTypes.string.isRequired,
-    SINGLE                 :PropTypes.string.isRequired,
-
-  }).isRequired,
-
-  /**
-   *  The children JSX
-   */
-  children:PropTypes.node,
-}
-
-BlogContextProvider.defaultProps = {
-  // someProp:false
-}
-
-export default BlogContextProvider

package/src/ui/c/BlogContext/index.js

@@ -1,4 +0,0 @@
-/* @pareto-engineering/generator-front 1.0.12 */
-export { default as BlogContext } from './Context'
-export { default as BlogContextProvider } from './ContextProvider'
-export { default as useBlog } from './useBlog'

package/src/ui/c/BlogContext/useBlog.js

@@ -1,4 +0,0 @@
-import { useContext } from 'react'
-import Context from './Context'
-
-export default () => useContext(Context)

package/src/ui/c/BlogPost/BlogPost.jsx

@@ -1,161 +0,0 @@
-/* @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 format from 'date-fns/format'
-
-import { Title } from 'ui/b'
-
-import { BlogCategoryButton } from '../BlogCategoryButton'
-
-// Local Definitions
-
-const baseClassName = styleNames.base
-
-const componentClassName = 'blog-post'
-
-/**
- * This is the component description.
- */
-const BlogPost = ({
-  id,
-  className:userClassName,
-  style,
-  title,
-  // slug,
-  description,
-  content,
-  mainImage,
-  author,
-  category = {},
-  // itemType
-  // wordCount,
-  publishedOn,
-  // updatedAt,
-  // ...otherProps
-}) => {
-  useLayoutEffect(() => {
-    import('./styles.scss')
-  }, [])
-
-  return (
-    <div
-      id={id}
-      className={[
-
-        baseClassName,
-
-        componentClassName,
-        userClassName,
-      ]
-        .filter((e) => e)
-        .join(' ')}
-      style={style}
-      // {...otherProps}
-    >
-      <div
-        className="y-red b-y uc article-head ph-u pv-v v4 md-v6"
-      >
-        <div className="v2 mv-v">
-          <BlogCategoryButton
-            categorySlug={category.slug}
-            className="s-1"
-          >
-            { category.name }
-          </BlogCategoryButton>
-        </div>
-        <Title
-          heading={title}
-          subtitle={description}
-          subtitleClassName="x-subtitle c-x"
-        />
-        <p className="x-metadata c-x v2 mt-v">
-
-          { 'Published on ' }
-          { format(
-            new Date(publishedOn),
-            'MMMM do, yyyy',
-          ) }
-          .
-        </p>
-        <p className="x-metadata c-x v1 mt-v">
-
-          {`${author.firstName} ${author.lastName}`}
-        </p>
-      </div>
-      <div className="article-illustration v4 md-v6 mb-v">
-        <img src={mainImage} alt={description} />
-      </div>
-      <div dangerouslySetInnerHTML={{ __html: content }} className="article-body p-u s0 md-s1" />
-
-    </div>
-  )
-}
-
-BlogPost.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 title of this blog post
-   */
-  title:PropTypes.string.isRequired,
-
-  /**
-   * The description of this blog post
-   */
-  description:PropTypes.string.isRequired,
-
-  /**
-   * The content of this blog post
-   */
-  content:PropTypes.string.isRequired,
-
-  /**
-   * The link to the main image of this blog post
-   */
-  mainImage:PropTypes.string.isRequired,
-
-  /**
-   * The first and last name of the article's author
-   */
-  author:PropTypes.shape({
-    firstName:PropTypes.string.isRequired,
-    lastName :PropTypes.string.isRequired,
-  }).isRequired,
-  /**
-   * The category of this blog post
-   */
-  category:PropTypes.shape({
-    name:PropTypes.string.isRequired,
-    slug:PropTypes.string.isRequired,
-  }).isRequired,
-
-  /**
-   * The date this blog post was published
-   */
-  publishedOn:PropTypes.string.isRequired,
-}
-
-BlogPost.defaultProps = {
-  // someProp:false
-}
-
-export default BlogPost

package/src/ui/c/BlogPost/index.js

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

package/src/ui/c/BlogPost/styles.scss

@@ -1,33 +0,0 @@
-/* @pareto-engineering/generator-front 1.0.12 */
-
-@use "@pareto-engineering/bem";
-@use "@aztlan/stylebook/src/mixins";
-@use "@aztlan/stylebook/src/globals" as *;
-
-
-.#{bem.$base}.blog-post {
-  .article-body {
-    p {
-      line-height: var(--s3);
-      text-align: justify;
-    }
-  }
-
-  .article-illustration {
-    height: 13em;
-
-    img {
-      height: 100%;
-      object-fit: cover;
-      width: 100%;
-    }
-  }
-
-  @include mixins.media($from:$sm-md) {
-    .article-illustration {
-      height: 22em;
-    }
-  }
-}
-
-

package/src/ui/c/BlogPostsList/BlogPostsList.jsx

@@ -1,81 +0,0 @@
-/* @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 { Card } from './common'
-
-// Local Definitions
-
-const baseClassName = styleNames.base
-
-const componentClassName = 'blog-posts-list'
-
-/**
- * This is the component description.
- */
-const BlogPostsList = ({
-  id,
-  className:userClassName,
-  style,
-  children,
-  // ...otherProps
-}) => {
-  useLayoutEffect(() => {
-    import('./styles.scss')
-  }, [])
-
-  return (
-    <div
-      id={id}
-      className={[
-
-        baseClassName,
-
-        componentClassName,
-        userClassName,
-        'u1',
-      ]
-        .filter((e) => e)
-        .join(' ')}
-      style={style}
-      // {...otherProps}
-    >
-      {children}
-    </div>
-  )
-}
-
-BlogPostsList.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 children JSX
-   */
-  children:PropTypes.node,
-}
-
-BlogPostsList.defaultProps = {
-  // someProp:false
-}
-
-BlogPostsList.Card = Card
-
-export default BlogPostsList

package/src/ui/c/BlogPostsList/common/Card/Card.jsx

@@ -1,195 +0,0 @@
-/* @pareto-engineering/generator-front 1.0.12 */
-import * as React from 'react'
-
-import PropTypes from 'prop-types'
-
-import styleNames from '@pareto-engineering/bem'
-
-import { Link } from 'react-router-dom'
-
-import format from 'date-fns/format'
-
-// TODO need to be imported from a common dir instread
-import { useBlog } from '../../../BlogContext'
-import { BlogCategoryButton } from '../../../BlogCategoryButton'
-
-// Local Definitions
-
-const baseClassName = styleNames.base
-
-const componentClassName = 'article-card'
-
-const wordsPerMinute = 230
-
-/**
- * This is the component description.
- */
-const Card = ({
-  id,
-  className:userClassName,
-  style,
-
-  title,
-  slug,
-  description,
-  mainImage,
-  author,
-  category,
-  wordCount,
-  publishedOn,
-
-  color,
-  size,
-
-  ...otherProps
-}) => {
-  const {
-    generateBlogPath,
-  } = useBlog()
-
-  return (
-    <div
-      id={id}
-      className={[
-
-        baseClassName,
-
-        componentClassName,
-        userClassName,
-        `y-${color}`,
-        `size-${size}`,
-      ]
-        .filter((e) => e)
-        .join(' ')}
-      style={style}
-      {...otherProps}
-    >
-      <div className="header">
-        <span>
-          { format(
-            new Date(publishedOn),
-            'MMMM do, yyyy',
-          ) }
-        </span>
-        { category
-        && (
-        <BlogCategoryButton className="s-1" categorySlug={category.slug}>
-          { category.name }
-        </BlogCategoryButton>
-        )}
-      </div>
-      <div className="illustration">
-        <img src={mainImage} alt={description} />
-      </div>
-      <div className="title">
-        <Link to={generateBlogPath(
-          'SINGLE',
-          {
-            slug,
-          },
-        )}
-        >
-          <p className="h3">
-            {title}
-          </p>
-        </Link>
-
-      </div>
-      <div className={styleNames.elementContent}>
-        { description
-      && (
-      <p>
-        { description }
-      </p>
-      )}
-        { wordCount
-      && (
-      <p className="word-count">
-        Reading Time :
-        {' '}
-        { Math.floor(wordCount / wordsPerMinute) }
-        {' '}
-        minutes.
-      </p>
-      )}
-      </div>
-    </div>
-  )
-}
-
-Card.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 article title
-   */
-  title      :PropTypes.string.isRequired,
-  /**
-  * String of characters that uniquely identify the article
-  */
-  slug       :PropTypes.string.isRequired,
-  /**
-   * The article description
-   */
-  description:PropTypes.string.isRequired,
-  /**
-   * The article image
-   */
-  mainImage  :PropTypes.string,
-  /**
-   * The first and last name of the article's author
-   */
-  author     :PropTypes.shape({
-    firstName:PropTypes.string.isRequired,
-    lastName :PropTypes.string.isRequired,
-  }).isRequired,
-
-  /**
-   * The category of the article
-   */
-  category:PropTypes.shape({
-    name:PropTypes.string.isRequired,
-    slug:PropTypes.string.isRequired,
-  }),
-  /**
-   * Number of words in the article
-   */
-  wordCount  :PropTypes.string,
-  /**
-   * The date when the article was published
-   */
-  publishedOn:PropTypes.string.isRequired,
-
-  /**
-   * The card color
-   */
-  color:PropTypes.string,
-
-  /**
-   * The card size
-   */
-  size:PropTypes.oneOf([
-    'sm',
-    'lg',
-  ]),
-
-}
-
-Card.defaultProps = {
-  color:'background',
-}
-
-export default Card