@pareto-engineering/design-system 0.0.1-alpha.8 → 2.0.0-alpha.2

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

@@ -0,0 +1,135 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import PropTypes from 'prop-types'
+
+import { IconList } from 'ui/a'
+import { ThemeSelector } from 'ui/b'
+import styleNames from '@pareto-engineering/bem'
+import useContentSlides from '../../useContentSlides'
+
+// Local Definitions
+
+// const baseClassName = styleNames.base
+
+const componentClassName = 'sidebar'
+
+/**
+ * This is the component description.
+ */
+const Sidebar = ({
+  id,
+  className:userClassName,
+  style,
+  header,
+  footer,
+  // ...otherProps
+}) => {
+  const {
+    steps,
+    // setPrevStepIndex,
+    // setNextStepIndex,
+    setStepIndex,
+    // isFirstStep,
+    // isLastStep,
+    // currentStep,
+    currentStepIndex,
+  } = useContentSlides()
+
+  return (
+    <nav
+      id={id}
+      className={[
+
+        // baseClassName,
+
+        componentClassName,
+        userClassName,
+      ]
+        .filter((e) => e)
+        .join(' ')}
+      style={style}
+    >
+      { header
+        ? (
+          <header>
+            { header }
+
+          </header>
+        )
+        : <span />}
+      <div className={styleNames.elementContent}>
+        <IconList>
+          { steps.map((step, i) => (
+            /* eslint-disable no-nested-ternary -- bc of math inequality cases */
+            <IconList.Item
+              key={step.location}
+              icon={
+              (currentStepIndex === i) ? 'L'
+                : (i < currentStepIndex) ? 'I' : undefined
+            }
+              iconHover={
+                (i < currentStepIndex) ? 'L' : undefined
+            }
+              className={
+              [
+                (currentStepIndex === i) ? 'x-heading'
+                  : (i < currentStepIndex) ? 'pointer x-paragraph xh-main2'
+                    : 'x-subtitle',
+                'c-x',
+              ].filter((e) => e).join(' ')
+            }
+              onClick={
+                (i < currentStepIndex) ? (() => setStepIndex(i)) : undefined
+            }
+            >
+              { step.title }
+            </IconList.Item>
+            /* eslint-enable no-nested-ternary */
+          )) }
+        </IconList>
+      </div>
+      { (footer || true)
+        ? (
+          <footer>
+            {footer}
+            <ThemeSelector className="x-heading" />
+          </footer>
+        )
+        : <span />}
+    </nav>
+  )
+}
+
+Sidebar.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 header JSX
+   */
+  header:PropTypes.node,
+
+  /**
+   *  The footer JSX
+   */
+  footer:PropTypes.node,
+}
+
+Sidebar.defaultProps = {
+  // someProp:false
+}
+
+export default Sidebar

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

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

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/{TeamGallery/TeamGallery.jsx → Hero/Hero.jsx}

@@ -1,57 +1,63 @@
-/* @pareto-engineering/generator-front 1.0.2 */
+/* @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'
 
-// Imports from the component folder
-import { PersonCard } from './common'
-
 // Local Definitions
 
-// import('./styles.scss')
-
 const baseClassName = styleNames.base
 
-const componentClassName = 'team-gallery'
+const componentClassName = 'hero'
 
-const TeamGallery = ({
+/**
+ * This is the component description.
+ */
+const Hero = ({
   id,
   className:userClassName,
   style,
-  children,
+
   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}
+        { title }
       </div>
-      <div className="content">
-        {children}
+      <div className="illustration">
+        { illustration }
+      </div>
+      <div className="cta">
+        { cta }
       </div>
     </div>
   )
 }
 
-TeamGallery.propTypes = {
+Hero.propTypes = {
   /**
    * The HTML id for this element
    */
@@ -68,20 +74,23 @@ TeamGallery.propTypes = {
   style:PropTypes.objectOf(PropTypes.string),
 
   /**
-   *  The children JSX
+   * The title to be displayed
    */
-  children:PropTypes.node.isRequired,
+  title:PropTypes.node,
 
   /**
-   *  Title of gallery
+   * The illustration to be displayed
    */
-  title:PropTypes.string.isRequired,
+  illustration:PropTypes.node,
+
+  /**
+   * The CTA to be displayed
+   */
+  cta:PropTypes.node,
 }
 
-TeamGallery.defaultProps = {
+Hero.defaultProps = {
   // someProp:false
 }
 
-TeamGallery.PersonCard = PersonCard
-
-export default TeamGallery
+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;
+  }
+}
+
+