@pareto-engineering/design-system 1.0.3 → 2.0.0-alpha.5

package/src/ui/c/ContentSlides/common/Slide/Slide.jsx

@@ -0,0 +1,87 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import PropTypes from 'prop-types'
+
+import styleNames from '@pareto-engineering/bem'
+
+// Local Definitions
+import useContentSlides from '../../useContentSlides'
+
+// const baseClassName = styleNames.base
+
+const componentClassName = 'slide'
+
+/**
+ * This is the component description.
+ */
+const Slide = ({
+  id,
+  className:userClassName,
+  style,
+  children,
+
+  index,
+  // ...otherProps
+}) => {
+  const {
+    currentStepIndex,
+  } = useContentSlides()
+
+  const isActive = currentStepIndex === index
+
+  return (
+    <div
+      id={id}
+      className={[
+
+        // baseClassName,
+        isActive && styleNames.modifierActive,
+        componentClassName,
+        userClassName,
+      ]
+        .filter((e) => e)
+        .join(' ')}
+      style={style}
+    >
+      <div className="wrapper">
+        <div className="content">
+          {children}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+Slide.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,
+
+  /**
+   * The index of this slide
+   */
+  index:PropTypes.number,
+}
+
+Slide.defaultProps = {
+  // someProp:false
+}
+
+export default Slide

package/src/ui/c/ContentSlides/common/Slide/index.js

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

package/src/ui/c/ContentSlides/common/index.js

@@ -0,0 +1,4 @@
+export { Sidebar } from './Sidebar'
+export { HorizontalMenu } from './HorizontalMenu'
+export { Slide } from './Slide'
+export { Navigator } from './Navigator'

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

@@ -0,0 +1,4 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+export { default as ContentSlides } from './ContentSlides'
+export { default as useContentSlides } from './useContentSlides'
+export { default as ContentSlidesContext } from './Context'

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

@@ -0,0 +1,308 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+
+@use "@pareto-engineering/bem";
+@use "@aztlan/stylebook/src/mixins";
+@use "@aztlan/stylebook/src/globals" as *;
+
+$class-sidebar:sidebar;
+$class-horizontal-menu:horizontal-menu;
+$class-slide:slide;
+$class-navigator:navigator;
+
+//$class-main-container:main;
+
+$default-sidebar-width:minmax(250px, 330px);
+$default-border:none;//2px solid var(--grid);
+$default-border-radius:var(--theme-border-radius);
+$default-content-background:var(--y);
+$default-padding:var(--u);
+
+$mobile-content-margin:6em;
+
+.#{bem.$base}.content-slides {
+  height: 100%;
+
+  .#{$class-sidebar} {
+    background: $default-content-background;
+    border-right: $default-border;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    justify-content: space-between;
+    overflow: auto;
+
+    header,
+    .#{bem.$element-content},
+    footer {
+      padding: $default-padding;
+    }
+
+    header {
+      border-bottom: $default-border;
+    }
+
+    footer {
+      border-top: $default-border;
+    }
+
+    /* stylelint-disable selector-max-compound-selectors -- Required here  */
+    .#{bem.$element-content} {
+      .icon-list {
+        .#{bem.$element-item} {
+          &:not(:last-child) {
+            margin-bottom: 1em;
+          }
+        }
+      }
+    }
+    /* stylelint-enable selector-max-compound-selectors */
+  }
+
+
+  //.#{$class-main-container} {
+  main {
+    background: var(--dark-y);
+    overflow: hidden;
+    position: relative;
+
+    .#{$class-slide} {
+      height: 100%;
+      left: 0;
+      position: absolute;
+      right: 0;
+      top: 0;
+      transition: opacity .3s;
+
+      .wrapper {
+        padding: var(--u);
+
+        .#{bem.$element-content} {
+          background: $default-content-background;
+
+          border: $default-border;
+          border-radius: $default-border-radius;
+          max-width: 600px;
+          padding: $default-padding;
+          position: relative;
+          width: 90%;
+          //z-index: 1;
+
+          .#{$class-navigator} {
+            display: flex;
+            margin-top: $default-padding;
+          }
+        }
+      }
+
+
+      &:not(.#{bem.$modifier-active}) {
+        opacity: .5;
+        z-index: -1;
+      }
+
+      &.#{bem.$modifier-active} {
+        opacity: 1;
+      }
+    }
+  }
+
+  .#{$class-horizontal-menu} {
+    background: $default-content-background;
+    border-bottom: $default-border;
+    color: var(--heading);
+
+    .#{bem.$element-content} {
+      display: grid;
+      grid-template-columns: 1fr [title] 6fr 1fr;
+      padding: $default-padding;
+
+      .title {
+        grid-column: title/span 1;
+        text-align: center;
+        //font-weight:600;
+      }
+
+      .left {
+        text-align: left;
+      }
+
+      .right {
+        text-align: right;
+      }
+    }
+    //
+  }
+
+  @include mixins.media($to:$sm-md) {
+    display: flex;
+    flex-direction: column;
+
+    .#{$class-sidebar} {
+      display: none;
+    }
+
+    //.#{$class-main-container} {
+
+    main {
+      flex-grow: 1;
+
+      .#{$class-slide} {
+        display: flex;
+        flex-direction: column;
+        justify-content: safe center;
+        overflow: auto;
+
+        /*
+        > img {
+          height: 100%;
+          object-fit: cover;
+          position: absolute;
+          top: 0;
+          transition: opacity .3s;
+          width: 100%;
+        } */
+
+        /* stylelint-disable selector-max-compound-selectors -- Required here  */
+        /* stylelint-disable max-nesting-depth -- Required here  */
+        /* stylelint-disable scss/media-feature-value-dollar-variable -- For orientation mq */
+        .wrapper {
+          display: flex;
+          flex-direction: column;
+          height: 100%;
+          //justify-content: safe center;
+          overflow: auto;
+
+          -ms-overflow-style: none;
+          padding-bottom: 0;
+          padding-top: 0;
+          //padding-bottom: $mobile-content-margin;
+          //padding-top: $mobile-content-margin;
+          scrollbar-width: none;
+
+          &::-webkit-scrollbar {
+            display: none;
+          }
+
+          &::after,
+          &::before {
+            //background: red;
+            content: " ";
+            flex-grow: 1;
+            white-space: pre;
+            //z-index: 20;
+            @media (orientation: portrait) {
+              min-height: calc(#{$mobile-content-margin} + var(--u));
+            }
+          }
+          @media (orientation: landscape) {
+            &::before {
+              min-height: var(--u);
+            }
+          }
+
+          .#{bem.$element-content} {
+            margin: 0 auto;
+
+            .#{$class-navigator} {
+              .prev {
+                display: none;
+              }
+
+              .next {
+                flex-grow: 1;
+              }
+            }
+          }
+        }
+        /* stylelint-enable */
+
+        /*
+        &:not(.#{bem.$modifier-active}) {
+        }
+
+        &.#{bem.$modifier-active} {
+        } */
+      }
+    }
+  }
+
+  @include mixins.media($from:$sm-md) {
+    display: grid;
+    grid-template-columns: $default-sidebar-width 1fr;
+
+    .#{$class-horizontal-menu} {
+      display: none;
+    }
+
+    &.simple {
+      grid-template-columns: 1fr;
+      grid-template-rows: auto 1fr;
+
+      .#{$class-horizontal-menu} {
+        display: block;
+
+        .#{bem.$element-content} {
+          padding: .5em;
+        }
+
+        .left,
+        .right {
+          display: none;
+        }
+      }
+    }
+
+
+
+    main {
+      .#{$class-slide} {
+        //display: flex;
+        //flex-direction: column;
+        overflow: auto;
+        -ms-overflow-style: none;
+        scrollbar-width: none;
+
+        &::-webkit-scrollbar {
+          background: transparent;  /* Optional: just make scrollbar invisible */
+          width: 0;  /* Remove scrollbar space */
+        }
+
+        /*
+        > img {
+          height: 100%;
+          object-fit: cover;
+          position: absolute;
+          top: 0;
+          transition: opacity .3s;
+          width: 100%;
+        } */
+
+        .wrapper {
+          display: flex;
+          //flex-direction: column;
+          height: 100%;
+          justify-content: center;
+          //overflow: auto;
+          .#{bem.$element-content} {
+            height: min-content;
+            margin: auto 0;
+
+            .#{$class-navigator} {
+              justify-content: space-between;
+            }
+          }
+        }
+
+
+        /*
+        &:not(.#{bem.$modifier-active}) {
+        }
+
+        &.#{bem.$modifier-active} {
+        } */
+      }
+    }
+  }
+}
+
+

package/src/ui/c/ContentSlides/useContentSlides.js

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

package/src/ui/c/Hero/Hero.jsx

@@ -0,0 +1,96 @@
+/* @pareto-engineering/generator-front 1.0.9 */
+import * as React from 'react'
+
+import { useLayoutEffect } from 'react'
+
+import PropTypes from 'prop-types'
+
+import styleNames from '@pareto-engineering/bem'
+
+// Local Definitions
+
+const baseClassName = styleNames.base
+
+const componentClassName = 'hero'
+
+/**
+ * This is the component description.
+ */
+const Hero = ({
+  id,
+  className:userClassName,
+  style,
+
+  title,
+  illustration,
+  cta,
+  // ...otherProps
+}) => {
+  useLayoutEffect(() => {
+    import('./styles.scss')
+  }, [])
+
+  return (
+    <div
+      id={id}
+      className={[
+        baseClassName,
+        componentClassName,
+        userClassName,
+      ]
+        .filter((e) => e)
+        .join(' ')}
+      style={style}
+      // {...otherProps}
+    >
+
+      <div className="title">
+        { title }
+      </div>
+      <div className="illustration">
+        { illustration }
+      </div>
+      <div className="cta">
+        { cta }
+      </div>
+    </div>
+  )
+}
+
+Hero.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 to be displayed
+   */
+  title:PropTypes.node,
+
+  /**
+   * The illustration to be displayed
+   */
+  illustration:PropTypes.node,
+
+  /**
+   * The CTA to be displayed
+   */
+  cta:PropTypes.node,
+}
+
+Hero.defaultProps = {
+  // someProp:false
+}
+
+export default Hero

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

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

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

@@ -0,0 +1,41 @@
+/* @pareto-engineering/generator-front 1.0.9 */
+
+@use "@pareto-engineering/bem";
+@use "@aztlan/stylebook/src/mixins";
+@use "@aztlan/stylebook/src/globals" as *;
+
+$default-padding:1em;
+
+.#{bem.$base}.hero {
+  display: grid;
+  grid-template-areas:
+    "illustration"
+    "title"
+    "cta";
+  text-align: center;
+
+  @include mixins.media($from:$sm-md) {
+    grid-template-areas:
+      "title illustration"
+      "cta illustration";
+    grid-template-columns: var(--content-width, minmax(400px, 650px)) 1fr;
+    text-align: left;
+  }
+
+  > .title {
+    grid-area: title;
+    padding: $default-padding;
+  }
+
+  > .illustration {
+    background: #df1f00;
+    grid-area: illustration;
+  }
+
+  > .cta {
+    grid-area: cta;
+    padding: $default-padding;
+  }
+}
+
+

package/src/ui/c/Shortener/Shortener.jsx

@@ -0,0 +1,142 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { useLayoutEffect, useState } from 'react'
+
+import PropTypes from 'prop-types'
+
+import styleNames from '@pareto-engineering/bem'
+
+// Local Definitions
+import { Button } from 'ui/b'
+
+const baseClassName = styleNames.base
+
+const componentClassName = 'shortener'
+
+/**
+ * This is the component description.
+ */
+const Shortener = ({
+  id,
+  className:userClassName,
+  style,
+  children,
+  // ...otherProps
+
+  as:Element,
+
+  limit,
+  separator,
+
+  countLetters,
+}) => {
+  useLayoutEffect(() => {
+    import('./styles.scss')
+  }, [])
+
+  const [displayFull, setDisplayFull] = useState(false)
+
+  const text = children || ''
+
+  const excerpt = countLetters
+    ? text.slice(0, limit)
+    : text.split(separator).slice(0, limit).join(separator)
+  const doShorten = countLetters
+    ? text.length > limit
+    : text.split(separator).length > limit
+
+  return (
+    <Element
+      id={id}
+      className={[
+
+        baseClassName,
+
+        componentClassName,
+        userClassName,
+      ]
+        .filter((e) => e)
+        .join(' ')}
+      style={style}
+      // {...otherProps}
+    >
+      { (text && !displayFull && doShorten)
+        ? (
+          <>
+            { excerpt }
+            { '... ' }
+            <Button
+              isSimple
+              className="s-2"
+              onClick={(e) => {
+                e.preventDefault()
+                e.stopPropagation()
+                setDisplayFull(true)
+              }}
+            >
+              Show
+            </Button>
+          </>
+        )
+        : text}
+    </Element>
+  )
+}
+
+Shortener.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,
+
+  /**
+   * Which html tag to use
+   */
+  as:PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.object,
+  ]),
+  // as: PropTypes.string,
+
+  /**
+   * How many separated elements to accept before the read more.
+   * This may mean how many words, or how many letters if `countLetters=true`
+   */
+  limit:PropTypes.number,
+
+  /**
+   * Which separator to use to count words. This is only used in if `countLetters=false`.
+   */
+  separator:PropTypes.string,
+
+  /**
+   * Whether to count letters instead of using a split
+   */
+  countLetters:PropTypes.bool,
+}
+
+Shortener.defaultProps = {
+  // someProp:false
+  as          :'span',
+  separator   :' ',
+  limit       :20,
+  countLetters:false,
+}
+
+export default Shortener

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

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

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

@@ -0,0 +1,7 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+
+@use "@pareto-engineering/bem";
+
+// .#{bem.$base}.shortener {
+
+// }

package/src/ui/c/index.js

@@ -0,0 +1,3 @@
+export { Hero } from './Hero'
+export { ContentSlides, useContentSlides } from './ContentSlides'
+export { Shortener } from './Shortener'