@pareto-engineering/design-system 0.0.1-alpha.9 → 0.0.4-testing-id.0

package/src/ui/a/AnimatedCounter/AnimatedCounter.jsx

@@ -0,0 +1,118 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { useLayoutEffect, useCallback } from 'react'
+
+import CountUp from 'react-countup'
+
+import VisibilitySensor from 'react-visibility-sensor'
+
+import PropTypes from 'prop-types'
+
+import styleNames from '@pareto-engineering/bem'
+
+// Local Definitions
+
+const baseClassName = styleNames.base
+
+const componentClassName = 'animated-counter'
+
+/**
+ * This is the component description
+ */
+const AnimatedCounter = ({
+  id,
+  className:userClassName,
+  style,
+  color,
+  number,
+  before,
+  after,
+  delay,
+  // ...otherProps
+}) => {
+  useLayoutEffect(() => {
+    import('./styles.scss')
+  }, [])
+
+  const countDecimals = useCallback((value) => {
+    if ((value % 1) !== 0) return value.toString().split('.')[1].length
+    return 0
+  }, [])
+
+  return (
+    <div
+      id={id}
+      className={[
+        baseClassName,
+        componentClassName,
+        userClassName,
+        `x-${color}`,
+      ]
+        .filter((e) => e)
+        .join(' ')}
+      style={style}
+      // {...otherProps}
+    >
+      <div className="count s3">
+        {before && <span>{before}</span>}
+        <CountUp end={number} delay={delay} decimals={countDecimals(number)} redraw>
+          {({ countUpRef, start }) => (
+            <VisibilitySensor onChange={start} delayedCall>
+              <span ref={countUpRef} />
+            </VisibilitySensor>
+          )}
+        </CountUp>
+        {after && <span>{after}</span>}
+      </div>
+    </div>
+  )
+}
+
+AnimatedCounter.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 count color
+   */
+  color:PropTypes.string,
+
+  /**
+   *  The review count value
+   */
+  number:PropTypes.number,
+
+  /**
+   *  The unit before the number
+   */
+  before:PropTypes.string,
+
+  /**
+   *  The unit after the number
+   */
+  after:PropTypes.string,
+
+  /**
+   *  react counter delay
+   */
+  delay:PropTypes.number,
+}
+
+AnimatedCounter.defaultProps = {
+  color:'main1',
+}
+
+export default AnimatedCounter

package/src/ui/a/AnimatedCounter/index.js

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

package/src/ui/a/AnimatedCounter/styles.scss

@@ -0,0 +1,16 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+
+@use "@pareto-engineering/bem";
+//@use "@aztlan/stylebook/src/mixins";
+//@use "@aztlan/stylebook/src/globals" as *;
+
+.#{bem.$base}.animated-counter {
+  display: flex;
+  justify-content: center;
+
+  .count {
+    color: var(--x);
+  }
+}
+
+

package/src/ui/a/AppContext/ContextProvider.jsx

@@ -0,0 +1,90 @@
+/* @pareto-engineering/generator-front 0.2.3 */
+import * as React from 'react'
+import { useReducer } from 'react'
+import PropTypes from 'prop-types'
+
+import useTheme from './useTheme'
+
+// Package-level Imports
+import Context from './Context'
+
+// Component-level imports
+
+// Helper Definitions
+
+const reducer = (state, action) => {
+  switch (action.type) {
+    case 'UPDATE_STATE':
+      return {
+        ...state,
+        ...action.payload,
+      }
+    default:
+      return state
+  }
+}
+
+const AppContextProvider = ({
+  children,
+  initialTheme,
+  config,
+  initialState,
+  // ...otherProps
+}) => {
+  const theme = useTheme(initialTheme)
+  const [state, dispatch] = useReducer(reducer, initialState)
+
+  return (
+    <Context.Provider
+      value={{
+        state,
+        dispatch,
+        ...config,
+        ...theme,
+      }}
+    >
+      {children}
+    </Context.Provider>
+  )
+}
+
+AppContextProvider.propTypes = {
+  /**
+   *  The children JSX
+   */
+  children:PropTypes.node,
+
+  /**
+   * The initial theme for the website. If undefined, fallbacks on system preference.
+   */
+  initialTheme:PropTypes.string,
+
+  /**
+   * A dictionnary containing settings and preferences to be used application-wide
+   */
+  config:PropTypes.shape({
+    APP:PropTypes.shape({
+      NAME         :PropTypes.string.isRequired,
+      CANONICAL    :PropTypes.string.isRequired,
+      SUPPORT_EMAIL:PropTypes.string,
+      TITLE_SUFFIX :PropTypes.string,
+    }),
+    SOCIAL:PropTypes.shape({
+      FACEBOOK :PropTypes.string,
+      INSTAGRAM:PropTypes.string,
+      YOUTUBE  :PropTypes.string,
+    }),
+    CONSTANTS:PropTypes.shape({}),
+  }).isRequired,
+
+  /**
+   * Application context initial state
+   */
+  initialState:PropTypes.objectOf(PropTypes.string),
+}
+
+AppContextProvider.defaultProps = {
+  initialState:{},
+}
+
+export default AppContextProvider

package/src/ui/a/AppContext/index.js

@@ -0,0 +1,5 @@
+/* @pareto-engineering/generator-front 0.2.3 */
+export { default as AppContext } from './Context'
+export { default as AppContextProvider } from './ContextProvider'
+export { default as useApp } from './useApp'
+export { default as useTheme } from './useTheme'

package/src/ui/a/{SiteContext → AppContext}/useTheme.js

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react'
+import { useCallback, useState, useEffect } from 'react'
 
 export default (
   initialTheme,
@@ -36,9 +36,12 @@ export default (
     }
   }, [preferredTheme, isClient])
 
+  const isTheme = useCallback((theme) => (userTheme === theme) || undefined, [userTheme])
+
   return {
     userTheme,
     preferredTheme,
     setPreferredTheme,
+    isTheme,
   }
 }

package/src/ui/a/BackgroundGradient/BackgroundGradient.jsx

@@ -0,0 +1,76 @@
+/* @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'
+
+// Local Definitions
+
+const baseClassName = styleNames.base
+
+const componentClassName = 'background-gradient'
+
+/**
+ * This is the component description.
+ */
+const BackgroundGradient = ({
+  id,
+  className:userClassName,
+  style,
+  height,
+  // ...otherProps
+}) => {
+  useLayoutEffect(() => {
+    import('./styles.scss')
+  }, [])
+
+  return (
+    <div
+      id={id}
+      className={[
+
+        baseClassName,
+
+        componentClassName,
+        userClassName,
+      ]
+        .filter((e) => e)
+        .join(' ')}
+      style={{
+        ...style,
+        '--gradient-height':height,
+      }}
+    />
+  )
+}
+
+BackgroundGradient.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 height of the shape.
+   */
+  height:PropTypes.string,
+}
+
+BackgroundGradient.defaultProps = {
+  // someProp: false,
+}
+
+export default BackgroundGradient

package/src/ui/a/BackgroundGradient/index.js

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

package/src/ui/a/BackgroundGradient/styles.scss

@@ -0,0 +1,16 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+@use "@pareto-engineering/bem";
+
+.#{bem.$base}.background-gradient{
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: var(--gradient-height);
+    background-image: linear-gradient(var(--background1), var(--y) 25%, var(--light-y) 75%, var(--background1));
+    opacity: .4;
+    z-index: -1;
+}
+
+
+

package/src/ui/a/ContentCard/ContentCard.jsx

@@ -0,0 +1,84 @@
+/* @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'
+
+// Local Definitions
+
+import { Section } from './common'
+
+const baseClassName = styleNames.base
+
+const componentClassName = 'content-card'
+
+/**
+ * This is the component description.
+ */
+const ContentCard = ({
+  id,
+  className:userClassName,
+  style,
+  color,
+  children,
+  // messages,
+  // ...otherProps
+}) => {
+  useLayoutEffect(() => {
+    import('./styles.scss')
+  }, [])
+
+  return (
+    <div
+      id={id}
+      className={[
+        baseClassName,
+        componentClassName,
+        userClassName,
+        `y-${color}`,
+        'u1',
+      ]
+        .filter((e) => e)
+        .join(' ')}
+      style={style}
+    >
+      {children}
+    </div>
+  )
+}
+
+ContentCard.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),
+  /**
+  * Base color
+ */
+  color   :PropTypes.string,
+  /**
+   * The children jsx
+   */
+  children:PropTypes.node,
+}
+
+ContentCard.defaultProps = {
+  color:'background2',
+}
+
+ContentCard.Section = Section
+
+export default ContentCard

package/src/ui/{c/TeamGallery/common/PersonCard/PersonCard.jsx → a/ContentCard/common/Section/Section.jsx}

@@ -1,52 +1,48 @@
-/* @pareto-engineering/generator-front 1.0.2 */
+/* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react'
+
 import PropTypes from 'prop-types'
 
 import styleNames from '@pareto-engineering/bem'
 
-// Imports from the component folder
-
 // Local Definitions
 
 const baseClassName = styleNames.base
 
-const componentClassName = 'person-card'
+const componentClassName = 'section'
 
-const PersonCard = ({
+/**
+ * This is the component description.
+ */
+const Section = ({
   id,
   className:userClassName,
   style,
-
-  name,
-  position,
-  picture,
-
+  children,
+  layout,
+  contentAfter,
   // ...otherProps
 }) => (
   <div
     id={id}
     className={[
-
       baseClassName,
-
       componentClassName,
       userClassName,
+      layout === 'left' && 'layout-left',
+      layout === 'right' && 'layout-right',
+      layout === 'center' && 'layout-center',
+      contentAfter && 'content-after',
     ]
       .filter((e) => e)
       .join(' ')}
     style={style}
   >
-    <header>
-      <img src={picture} alt="" />
-    </header>
-    <main>
-      <p className="name"><strong>{ name }</strong></p>
-      <p className="position">{ position }</p>
-    </main>
+    {children}
   </div>
 )
 
-PersonCard.propTypes = {
+Section.propTypes = {
   /**
    * The HTML id for this element
    */
@@ -63,24 +59,21 @@ PersonCard.propTypes = {
   style:PropTypes.objectOf(PropTypes.string),
 
   /**
-   * The name of the person.
+   *  The children JSX
    */
-  name:PropTypes.string.isRequired,
-
+  children    :PropTypes.node,
   /**
-   * The position of the person.
+   * The main content position
    */
-  position:PropTypes.string.isRequired,
-
+  layout      :PropTypes.oneOf(['left', 'right', 'center']),
   /**
-   * The picture of the person.
+   * Whether content should appear before or after illustration
    */
-  picture:PropTypes.string.isRequired,
-
+  contentAfter:PropTypes.bool,
 }
 
-PersonCard.defaultProps = {
-  // someProp:false
+Section.defaultProps = {
+  contentAfter:false,
 }
 
-export default PersonCard
+export default Section

package/src/ui/a/ContentCard/common/Section/index.js

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

package/src/ui/a/ContentCard/common/index.js

@@ -0,0 +1 @@
+export { Section } from './Section'

package/src/ui/a/ContentCard/index.js

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

package/src/ui/a/ContentCard/styles.scss

@@ -0,0 +1,78 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+
+@use "@pareto-engineering/bem";
+@use "@aztlan/stylebook/src/mixins";
+@use "@aztlan/stylebook/src/globals" as *;
+
+
+$default-padding:var(--u);
+$default-card-background: var(--y);
+$default-content-width:minmax(350px, 500px);
+
+.#{bem.$base}.content-card {
+  background-color: $default-card-background;
+  border-radius: var(--theme-border-radius);
+
+  .#{bem.$base}.section {
+    column-gap: var(--u);
+    display: grid;
+  }
+
+  .layout-left {
+    grid-template-areas:
+      "content"
+      "illustration";
+  }
+
+  .layout-right {
+    grid-template-areas:
+      "content"
+      "illustration";
+
+    .illustration {
+      margin-bottom: 0;
+    }
+  }
+
+  .layout-center {
+    grid-template-areas:
+      "spacer"
+      "content"
+      "spacer2";
+  }
+
+  .content-after {
+    grid-template-areas:
+      "illustration"
+      "content";
+  }
+
+  .content {
+    grid-area: content;
+  }
+
+  .illustration {
+    grid-area: illustration;
+  }
+
+  .heading {
+    margin-bottom: 0;
+  }
+
+  @include mixins.media($from:$sm-md) {
+    .layout-left {
+      grid-template-areas: "content illustration";
+      grid-template-columns: $default-content-width 1fr;
+    }
+
+    .layout-right {
+      grid-template-areas: "illustration content";
+      grid-template-columns: 1fr $default-content-width;
+    }
+
+    .layout-center {
+      grid-template-areas: "spacer content spacer2";
+      grid-template-columns: 1fr minmax(450px, 650px) 1fr;
+    }
+  }
+}