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

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

@@ -0,0 +1,199 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+
+@use "@pareto-engineering/bem";
+
+$default-ellipse-height:50em;
+$default-diamond-height:40em;
+$default-circle-height:50em;
+$default-triangle-height:40em;
+$default-rectangle-height:50em;
+$default-shapes-opacity:.8;
+
+.#{bem.$base}.shapes {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: var(--pin);
+    align-items: center;
+    height: 100%;
+    width: 100%;
+
+    .triangle {
+      background-image: linear-gradient(transparent, var(--dark-y));
+      clip-path: polygon(0 0, 50% 100%, 100% 0);
+      height: calc(var(--shape-height, #{$default-triangle-height}) * 0.86);
+      opacity: $default-shapes-opacity;
+      width: var(--shape-height, #{$default-triangle-height});
+    }
+
+    .half-ellipses {
+      height: var(--shape-height, #{$default-ellipse-height});
+      opacity: $default-shapes-opacity;
+      width: calc(var(--shape-height, #{$default-ellipse-height}) * 2);
+
+      .up {
+        background-image: linear-gradient(var(--light-y), var(--y));
+        clip-path: ellipse(40% 100% at 50% 0%);
+        height: 50%;
+      }
+
+      .down {
+        background-image: linear-gradient(to top, var(--light-y), var(--y));
+        clip-path: ellipse(40% 100% at 50% 100%);
+        height: 50%;
+      }
+    }
+
+    .ellipse {
+      background-image: linear-gradient(to top left, var(--dark-y), var(--light-y), var(--dark-y));
+      clip-path: ellipse(50% 25% at 50% 50%);
+      height: var(--shape-height, #{$default-ellipse-height});
+      opacity: $default-shapes-opacity;
+      transform: rotate3d(0, 0, -1, 10deg);
+      width: calc(var(--shape-height, #{$default-ellipse-height}) * 2);
+    }
+
+    .diamonds {
+      height: var(--shape-height, #{$default-diamond-height});
+      opacity: $default-shapes-opacity;
+      position: relative;
+      width: var(--shape-height, #{$default-diamond-height});
+
+      .top-right {
+        background-image: linear-gradient(to right, var(--dark-y), var(--y));
+        clip-path: polygon(100% 100%, 0 0, 100% 0);
+        height: 100%;
+        position: absolute;
+        width: 100%;
+      }
+
+      .bottom-left {
+        background-image: linear-gradient(to left, var(--dark-y), var(--y));
+        clip-path: polygon(0 100%, 0 0, 100% 100%);
+        height: 100%;
+        opacity: .95;
+        position: absolute;
+        width: 100%;
+        z-index: 1;
+      }
+
+      .bottom-right {
+        background-image: linear-gradient(to bottom, var(--dark-y), var(--y));
+        clip-path: polygon(100% 100%, 100% 0, 0 100%);
+        height: 100%;
+        position: absolute;
+        width: 100%;
+      }
+    }
+
+    .rectangles {
+      display: grid;
+      grid-template-rows: repeat(3, 1fr);
+      height: var(--shape-height, #{$default-rectangle-height});
+      opacity: $default-shapes-opacity;
+      width: var(--shape-height, #{$default-rectangle-height});
+
+      .top {
+        background-image: linear-gradient(to right, var(--dark-y), var(--y));
+      }
+
+      .center {
+        background-image: linear-gradient(to left, var(--dark-y), var(--y));
+      }
+
+      .bottom {
+        background-image: linear-gradient(to right, var(--dark-y), var(--y));
+      }
+    }
+
+    .half-ellipse {
+      background-image: linear-gradient(var(--light-y), var(--dark-y));
+      clip-path: ellipse(50% 50% at 50% 0);
+      height: var(--shape-height, #{$default-ellipse-height});
+      opacity: $default-shapes-opacity;
+      width: calc(var(--shape-height, #{$default-ellipse-height}) * 2);
+    }
+
+    .circle {
+      background-image: linear-gradient(var(--light-y), var(--dark-y));
+      clip-path: circle(50% at 50% 50%);
+      height: var(--shape-height, #{$default-circle-height});
+      opacity: $default-shapes-opacity;
+      width: var(--shape-height, #{$default-circle-height});
+    }
+
+    .half-circle {
+      background: linear-gradient(var(--light-y) 30%, var(--dark-y) 100%);
+      clip-path: circle(50% at 50% 100%);
+      height: var(--shape-height, #{$default-circle-height});
+      opacity: $default-shapes-opacity;
+      width: calc(var(--shape-height, #{$default-circle-height}) * 2);
+    }
+
+    .ellipses {
+      height: var(--shape-height, #{$default-ellipse-height});
+      opacity: $default-shapes-opacity;
+      position: relative;
+      width: var(--shape-height, #{$default-ellipse-height});
+
+      .first {
+        background-image: linear-gradient(to top, var(--dark-y), var(--y), var(--light-y) 50%, transparent);
+        clip-path: ellipse(50% 20% at 50% 60%);
+        height: 100%;
+        position: absolute;
+        width: 100%;
+        z-index: 1;
+      }
+
+      .second {
+        background-image: linear-gradient(to bottom,var(--dark-y), var(--y), var(--light-y) 45%, transparent);
+        clip-path: ellipse(50% 20% at 50% 40%);
+        height: 100%;
+        position: absolute;
+        width: 100%;
+      }
+    }
+
+    .spiral {
+      height: var(--shape-height, #{$default-ellipse-height});
+      width: var(--shape-height, #{$default-ellipse-height});
+      opacity: $default-shapes-opacity;
+      position: relative;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      > * {
+        border-radius: 50%;
+        background: radial-gradient(ellipse at center bottom ,var(--dark-y) 10%, transparent 60%);
+        position: absolute;
+        opacity: .5;
+      }
+
+       .circle-one {
+        transform: rotate(45deg);
+        height: 55%;
+        width: 55%;
+      }
+
+       .circle-two {
+        height: 70%;
+        width: 70%;
+      }
+
+       .circle-three {
+        transform: rotate(-45deg);
+        height: 85%;
+        width: 85%;
+      }
+
+       .circle-four {
+        transform: rotate(-90deg);
+        height: 100%;
+        width: 100%;
+      }
+    }
+
+}

package/src/ui/a/SiteContext/Context.js

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

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

@@ -0,0 +1,89 @@
+/* @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 SiteContextProvider = ({
+  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>
+  )
+}
+
+SiteContextProvider.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 site-wide
+   */
+  config:PropTypes.shape({
+    SITE: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,
+    }),
+  }).isRequired,
+
+  /**
+   * Site context initial state
+   */
+  initialState:PropTypes.objectOf(PropTypes.string),
+}
+
+SiteContextProvider.defaultProps = {
+  initialState:{},
+}
+
+export default SiteContextProvider

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

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

package/src/ui/a/SiteContext/useSite.js

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

package/src/ui/a/SiteContext/useTheme.js

@@ -0,0 +1,47 @@
+import { useCallback, useState, useEffect } from 'react'
+
+export default (
+  initialTheme,
+  storageKey = 'theme',
+) => {
+  const isClient = typeof window === 'object'
+
+  const [preferredTheme, setPreferredTheme] = useState(initialTheme)
+
+  const [userTheme, setUserTheme] = useState()
+
+  useEffect(() => {
+    const storage = window.localStorage
+    if (isClient) {
+      const storedTheme = window.localStorage.getItem(storageKey)
+      // console.log(storedTheme, storedTheme != userTheme)
+      if (storedTheme && (storedTheme !== userTheme)) {
+        // console.warn('Theme load')
+        setPreferredTheme(storedTheme)
+        setUserTheme(storedTheme)
+      } else if (preferredTheme && preferredTheme.length && preferredTheme !== 'system') {
+        setUserTheme(preferredTheme)
+        storage.setItem(
+          storageKey,
+          preferredTheme,
+        )
+        // console.warn('theme change', preferredTheme)
+      } else {
+        setUserTheme(window.matchMedia('(prefers-color-scheme:dark)').matches ? 'dark' : 'light')
+        storage.removeItem(storageKey)
+        // console.warn('theme reset')
+      }
+    } else {
+      setUserTheme('light')
+    }
+  }, [preferredTheme, isClient])
+
+  const isTheme = useCallback((theme) => (userTheme === theme) || undefined, [userTheme])
+
+  return {
+    userTheme,
+    preferredTheme,
+    setPreferredTheme,
+    isTheme,
+  }
+}

package/src/ui/a/Spinner/Spinner.jsx

@@ -0,0 +1,75 @@
+/* @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 = 'spinner'
+
+/**
+ * This is the component description.
+ */
+const Spinner = ({
+  id,
+  className:userClassName,
+  style,
+  color,
+  // ...otherProps
+}) => {
+  useLayoutEffect(() => {
+    import('./styles.scss')
+  }, [])
+
+  return (
+    <div
+      id={id}
+      className={[
+        baseClassName,
+        componentClassName,
+        userClassName,
+        `x-${color}`,
+      ]
+        .filter((e) => e)
+        .join(' ')}
+      style={style}
+      // {...otherProps}
+    >
+      <div className="loader" />
+    </div>
+  )
+}
+
+Spinner.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 color of the spinner
+   */
+  color:PropTypes.node,
+}
+
+Spinner.defaultProps = {
+  color:'main1',
+}
+
+export default Spinner

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

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

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

@@ -0,0 +1,23 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+
+@use "@pareto-engineering/bem";
+
+.#{bem.$base}.spinner {
+  display: flex;
+  justify-content: center;
+
+  .loader {
+    animation: spin 2s linear infinite;
+    border: .5em solid var(--on-x);
+    border-radius: 50%;
+    border-top: .5em solid var(--x);
+    height: 4em;
+    width: 4em;
+  }
+  @keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+  }
+}
+
+

package/src/ui/a/TeamInfo/TeamInfo.jsx

@@ -0,0 +1,99 @@
+/* @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 = 'team-info'
+
+/**
+ * This is the component description.
+ */
+const SiteTeamInfo = ({
+  id,
+  className:userClassName,
+  style,
+  description,
+  img,
+  name,
+  role,
+  // ...otherProps
+}) => {
+  useLayoutEffect(() => {
+    import('./styles.scss')
+  }, [])
+
+  return (
+    <div
+      id={id}
+      className={[
+        baseClassName,
+        componentClassName,
+        userClassName,
+        'u1',
+      ]
+        .filter((e) => e)
+        .join(' ')}
+      style={style}
+      // {...otherProps}
+    >
+      <p className="description s-1 md-s0">
+        {description}
+      </p>
+      <div className="content">
+        <img className="img mr-u" src={img} alt={`${name}, ${role} at Pareto`} />
+        <div className="team-member">
+          <span className="name s-1">{name}</span>
+          <span className="role s-2">{role}</span>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+SiteTeamInfo.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 team description
+   */
+  description:PropTypes.string.isRequired,
+  /**
+   *  The team member image
+   */
+  img        :PropTypes.string.isRequired,
+  /**
+   *  The team member name
+   */
+  name       :PropTypes.string.isRequired,
+  /**
+   *  The team member role
+   */
+  role       :PropTypes.string.isRequired,
+}
+
+SiteTeamInfo.defaultProps = {
+  // someProp:false
+}
+
+export default SiteTeamInfo

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

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

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

@@ -0,0 +1,58 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+
+@use "@pareto-engineering/bem";
+@use "@aztlan/stylebook/src/mixins";
+@use "@aztlan/stylebook/src/globals" as *;
+
+$team-info-padding:var(--u);
+$img-height-width: 3.5em;
+$img-border-radius: var(--theme-border-radius);
+$p-h4-color:var(--subtitle);
+$role-color:var(--metadata);
+$default-name-color:var(--main1);
+$box-shadow:0 .45em 1em 0 var(--background1);
+
+.#{bem.$base}.team-info {
+  align-items: flex-start;
+  background: var(--light-y, var(--light-background1));
+  box-shadow: $box-shadow;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  padding: $team-info-padding;
+  width: 100%;
+
+
+  .description {
+    color: $p-h4-color;
+  }
+
+  .content {
+    display: flex;
+    width: 100%;
+
+    .img {
+      border-radius: $img-border-radius;
+      height: $img-height-width;
+      object-fit: cover;
+      width: $img-height-width;
+    }
+
+    .team-member {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-around;
+
+      .name {
+        color: $default-name-color;
+      }
+
+      .role {
+        color: $role-color;
+        margin: 0;
+      }
+    }
+  }
+}
+
+