@pareto-engineering/design-system 2.0.0-alpha.9 → 3.0.0-alpha.18

package/src/ui/b/Button/styles.scss

@@ -2,32 +2,68 @@
 
 @use "@pareto-engineering/bem";
 
-$default-padding: 1em 1em .84em;
-$compact-padding: .6em .6em .48em;
+$default-padding: .75em 1.75em;
+$compact-padding: .5em .75em;
+$default-border-radius: 3em;
 $default-color:primary;
 $font-weight:bold;
+$default-margin: .5em;
+$default-animation-time: .31s;
 
 .#{bem.$base}.button {
   background: var(--x, var(--#{$default-color}));
   border: transparent;
-  border-radius: var(--theme-border-radius);
+  border-radius: $default-border-radius;
   color: var(--on-x, var(--on-#{$default-color}));
-  font-weight: 600;
+  display: inline-flex;
+  font-family: var(--theme-default-paragraph);
+  font-weight: 400;
+  justify-content: space-between;
   padding: $default-padding;
   transition: all .25s;
 
+  &.arrow-right {
+    &::after {
+      content: "-->";
+      margin-left: $default-margin;
+      vertical-align: middle;
+    }
+
+    &:hover {
+      &::after {
+        --final-position: 50%;
+        animation: animateArrow $default-animation-time forwards;
+      }
+    }
+  }
+
+  &.arrow-left {
+    &::before {
+      content: "<--";
+      margin-right: $default-margin;
+      vertical-align: middle;
+    }
+
+    &:hover {
+      &::before {
+        --final-position: -50%;
+        animation: animateArrow $default-animation-time forwards;
+      }
+    }
+  }
+
   &:not(:disabled) {
     cursor: pointer;
 
     &:hover {
-      background: var(--light-x, var(--light-#{$default-color}));
+      background: var(--soft-x, var(--soft-#{$default-color}));
     }
+
     &:focus {
-      background: var(--dark-x, var(--dark-#{$default-color}));
+      background: var(--hard-x, var(--hard-#{$default-color}));
     }
   }
 
-
   &.#{bem.$modifier-compact} {
     padding: $compact-padding;
   }
@@ -39,23 +75,23 @@ $font-weight:bold;
 
     &:hover,
     &:focus,
-    &:disabled{
+    &:disabled {
       background: transparent;
     }
 
     &:not(:disabled) {
       &:hover {
-        border: 1px solid var(--light-x, var(--light-#{$default-color}));
-        color: var(--light-x, var(--light-#{$default-color}));
+        border: 1px solid var(--soft-x, var(--soft-#{$default-color}));
+        color: var(--soft-x, var(--soft-#{$default-color}));
       }
 
       &:focus {
-        border: 1px solid var(--dark-x, var(--dark-#{$default-color}));
-        color: var(--dark-x, var(--dark-#{$default-color}));
+        border: 1px solid var(--hard-x, var(--hard-#{$default-color}));
+        color: var(--hard-x, var(--hard-#{$default-color}));
       }
     }
 
-    &:disabled{
+    &:disabled {
       border: 1px solid var(--x, var(--#{$default-color}));
       color: var(--x, var(--#{$default-color}));
     }
@@ -65,6 +101,7 @@ $font-weight:bold;
     background: transparent;
     border: 1px solid transparent;
     color: var(--x, var(--#{$default-color}));
+    padding: 0;
 
     &:disabled,
     &:hover,
@@ -73,13 +110,13 @@ $font-weight:bold;
     }
 
     &:not(:disabled) {
-       &:hover {
-         color: var(--light-x, var(--light-#{$default-color}));
-       }
+      &:hover {
+        color: var(--soft-x, var(--soft-#{$default-color}));
+      }
 
-       &:focus {
-         color: var(--dark-x, var(--dark-#{$default-color}));
-       }
+      &:focus {
+        color: var(--hard-x, var(--hard-#{$default-color}));
+      }
     }
 
     &:disabled {
@@ -94,3 +131,12 @@ $font-weight:bold;
 }
 
 
+@keyframes animateArrow {
+  from {
+    transform: translateX(0);
+  }
+
+  to {
+    transform: translateX(var(--final-position));
+  }
+}

package/src/ui/b/Logo/Logo.jsx

@@ -5,7 +5,7 @@ import { useMemo, useLayoutEffect } from 'react'
 
 import PropTypes from 'prop-types'
 
-import styleNames from '@pareto-engineering/bem'
+import styleNames from '@pareto-engineering/bem/exports'
 
 import { SVG } from 'ui/a'
 
@@ -15,37 +15,37 @@ const baseClassName = styleNames.base
 
 const componentClassName = 'logo'
 
-const defaultTargets = [
+const defaultTargetssquare = [
   {
-    id    :'logo__p',
-    target:'logo__p',
+    id    :'logo',
+    target:'logo',
   },
+]
+
+const contentMapSquare = {
+  default:{
+    sprite :'/logo_square.svg',
+    viewBox:'0 0 39 39',
+    targets:defaultTargetssquare,
+  },
+}
+
+const defaultTargetsWithName = [
   {
-    id    :'logo__areto',
-    target:'logo__areto',
+    id    :'logo_squares',
+    target:'logo_squares',
   },
   {
-    id    :'logo__t',
-    target:'logo__t',
+    id    :'logo_pareto',
+    target:'logo_pareto',
   },
 ]
 
-const contentMap = {
+const contentMapWithName = {
   default:{
-    sprite :'/logo_parts.svg',
-    viewBox:'0 0 688 250',
-    targets:defaultTargets,
-  },
-  beta:{
-    sprite :'/logo_parts_beta.svg',
-    viewBox:'0 0 1000 300',
-    targets:[
-      ...defaultTargets,
-      {
-        id    :'logo__beta',
-        target:'logo__beta',
-      },
-    ],
+    sprite :'/logo.svg',
+    viewBox:'0 0 156 30',
+    targets:defaultTargetsWithName,
   },
 }
 
@@ -57,17 +57,18 @@ const Logo = ({
   className:userClassName,
   style,
   color,
-  animated,
-  loop,
   height,
   width,
   variant,
+  strokeColor,
+  square,
   // ...otherProps
 }) => {
   useLayoutEffect(() => {
     import('./styles.scss')
   }, [])
 
+  const contentMap = square ? contentMapSquare : contentMapWithName
   const svgConfig = useMemo(() => contentMap[variant], [variant])
 
   return (
@@ -82,13 +83,12 @@ const Logo = ({
         baseClassName,
         componentClassName,
         `x-${color}`,
+        `y-${strokeColor}`,
         userClassName,
-        loop && 'loop',
       ]
         .filter((e) => e)
         .join(' ')}
       style={style}
-      animated={animated}
       // {...otherProps}
     />
   )
@@ -115,16 +115,6 @@ Logo.propTypes = {
    */
   color:PropTypes.string,
 
-  /**
-   *  Whether the logo is animated
-   */
-  animated:PropTypes.bool,
-
-  /**
-   *  Whether the animation loops
-   */
-  loop:PropTypes.bool,
-
   /**
    * The height of the element
    */
@@ -139,14 +129,24 @@ Logo.propTypes = {
    * The variant to display. At the moment only `beta` is available.
    */
   variant:PropTypes.string,
+
+  /**
+   * The color of the svg stroke
+   */
+  strokeColor:PropTypes.string,
+
+  /**
+   * Whether the logo should have a name.
+   */
+  square:PropTypes.bool,
 }
 
 Logo.defaultProps = {
-  color   :'primary',
-  animated:false,
-  loop    :false,
-  height  :'4em',
-  variant :'default',
+  color      :'paragraph',
+  height     :'2em',
+  variant    :'default',
+  strokeColor:'transparent',
+  square     :false,
 }
 
 export default Logo

package/src/ui/b/Logo/styles.scss

@@ -1,147 +1,9 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 
-/* stylelint-disable selector-id-pattern, selector-max-id -- because of the custom svg */
-
 @use "@pareto-engineering/bem";
 
-// Main animation - finishes after the drawing
-
-@keyframes draw-logo-p {
-  0% {
-    stroke-dashoffset: var(--svg-origin-stroke-dashoffset, 1000);
-  }
-
-  20%,
-  100% {
-    stroke-dashoffset: var(--svg-target-stroke-dashoffset, 0);
-  }
-}
-@keyframes draw-logo-areto {
-  0%,
-  20% {
-    stroke-dashoffset: var(--svg-origin-stroke-dashoffset, 1000);
-  }
-
-  90%,
-  100% {
-    stroke-dashoffset: var(--svg-target-stroke-dashoffset, 0);
-  }
-}
-@keyframes draw-logo-t {
-  0%,
-  90% {
-    stroke-dashoffset: var(--svg-origin-stroke-dashoffset, 1000);
-  }
-
-  100% {
-    stroke-dashoffset: var(--svg-target-stroke-dashoffset, 0);
-  }
-}
-
-// Alt animation - looping
-
-@keyframes draw-alt-logo-p {
-  0% {
-    stroke-dashoffset: var(--svg-origin-stroke-dashoffset, 1000);
-  }
-
-  10%,
-  50% {
-    stroke-dashoffset: var(--svg-target-stroke-dashoffset, 0);
-  }
-
-  60%,
-  100% {
-    stroke-dashoffset: var(--svg-final-stroke-dashoffset, 1000);
-  }
-}
-@keyframes draw-alt-logo-areto {
-  0%,
-  10% {
-    stroke-dashoffset: var(--svg-origin-stroke-dashoffset, 1000);
-  }
-
-  45%,
-  60% {
-    stroke-dashoffset: var(--svg-target-stroke-dashoffset, 0);
-  }
-
-  95%,
-  100% {
-    stroke-dashoffset: var(--svg-final-stroke-dashoffset, 1000);
-  }
-}
-@keyframes draw-alt-logo-t {
-  0%,
-  45% {
-    stroke-dashoffset: var(--svg-origin-stroke-dashoffset, 1000);
-  }
-
-  50%,
-  95% {
-    stroke-dashoffset: var(--svg-target-stroke-dashoffset, 0);
-  }
-
-  100% {
-    stroke-dashoffset: var(--svg-final-stroke-dashoffset, 1000);
-  }
-}
-
 .#{bem.$base}.logo {
-  &.animated.animated {
-    --svg-animation-repeats: 1;
-    --svg-animation-time: 3.5s;
-
-    &:hover,
-    &:focus {
-      //--path-animation: dash-a 1s linear 0s 1 forwards;
-    }
-
-    use#logo__p {
-      //--svg-animation-delay: 0;
-      --svg-dasharray: 1000;
-      --svg-origin-stroke-dashoffset: -1000;
-      //--svg-target-stroke-dashoffset: 0;
-      --svg-final-stroke-dashoffset: 1000;
-      animation-name: draw-logo-p;
-    }
-
-    use#logo__areto {
-      --svg-dasharray: 2000;
-      --svg-origin-stroke-dashoffset: 2000;
-      //--svg-target-stroke-dashoffset: 0;
-      --svg-final-stroke-dashoffset: -2000;
-      animation-name: draw-logo-areto;
-    }
-
-    use#logo__t {
-      --svg-dasharray: 200;
-      --svg-origin-stroke-dashoffset: 200;
-      //--svg-target-stroke-dashoffset: 0;
-      --svg-final-stroke-dashoffset: -200;
-      animation-name: draw-logo-t;
-    }
-
-    &.loop.loop {
-      --svg-animation-time: 6s;
-      --svg-animation-repeats: infinite;
-
-      use#logo__p {
-        --svg-final-stroke-dashoffset: 1000;
-        animation-name: draw-alt-logo-p;
-      }
-
-      use#logo__areto {
-        --svg-final-stroke-dashoffset: -2000;
-        animation-name: draw-alt-logo-areto;
-      }
 
-      use#logo__t {
-        --svg-final-stroke-dashoffset: -200;
-        animation-name: draw-alt-logo-t;
-      }
-    }
-  }
 }
 
 

package/src/ui/b/Page/Page.jsx

@@ -2,7 +2,7 @@
 import * as React from 'react'
 import { useLayoutEffect, useEffect } from 'react'
 import PropTypes from 'prop-types'
-import styleNames from '@pareto-engineering/bem'
+import styleNames from '@pareto-engineering/bem/exports'
 
 // Imports from the component folder
 import { PageHelmet, Section } from './common'

package/src/ui/b/Page/common/PageHelmet/PageHelmet.jsx

@@ -3,7 +3,7 @@ import * as React from 'react'
 import { useMemo } from 'react'
 import PropTypes from 'prop-types'
 import { Helmet } from 'react-helmet'
-import { useSite } from 'ui/a'
+import { useApp } from 'ui/a'
 
 const helmetMap = [
   {
@@ -163,7 +163,7 @@ const PageHelmet = ({
   ...props
 }) => {
   // const intl = useIntl()
-  const context = useSite()
+  const context = useApp()
 
   const HelmetContent = useMemo(() => helmetMap.reduce(
     /* eslint-disable no-unused-vars -- TODO add test or ssr mode */

package/src/ui/b/Page/common/Section/Section.jsx

@@ -1,10 +1,9 @@
 /* @pareto-engineering/generator-front 1.0.0 */
 import * as React from 'react'
 import PropTypes from 'prop-types'
-import styleNames from '@pareto-engineering/bem'
+import styleNames from '@pareto-engineering/bem/exports'
 
 // Local Definitions
-import { Shapes } from 'ui/a'
 import usePage from '../../usePage'
 
 const baseClassName = styleNames.base
@@ -15,11 +14,6 @@ const Section = ({
   className:userClassName,
   style,
   children,
-  backgroundShape,
-  backgroundVerticalAlign,
-  backgroundHorizontalAlign,
-  backgroundHeight,
-  backgroundOverflow,
   ...otherProps
 }) => {
   const {
@@ -41,15 +35,6 @@ const Section = ({
       {...otherProps}
     >
       {children}
-      {backgroundShape && (
-        <Shapes
-          verticalAlign={backgroundVerticalAlign}
-          horizontalAlign={backgroundHorizontalAlign}
-          backgroundOverflow={backgroundOverflow}
-          height={backgroundHeight}
-          shape={backgroundShape}
-        />
-      )}
     </section>
   )
 }
@@ -74,41 +59,6 @@ Section.propTypes = {
    *  The children JSX
    */
   children:PropTypes.node,
-
-  /**
-   * The background shape to use for this section.
-   */
-  backgroundShape:PropTypes.oneOf([
-    'triangle',
-    'ellipse',
-    'half-ellipse',
-    'half-ellipses',
-    'spiral',
-    'diamonds',
-    'circle',
-    'half-circle',
-    'ellipses',
-    'rectangles',
-  ]),
-
-  /**
-   * The background vertical alingment to use for if the background shape is set.
-   */
-  backgroundVerticalAlign  :PropTypes.oneOf(['flex-start', 'center', 'flex-end']),
-  /**
-   * The background horizontal alingment to use for if the background shape is set.
-   */
-  backgroundHorizontalAlign:PropTypes.oneOf(['flex-start', 'center', 'flex-end']),
-
-  /**
-   * The background height to use for if the background shape is set.
-   */
-  backgroundHeight:PropTypes.string,
-
-  /**
-   * The background overflow to use for if the background shape is set.
-   */
-  backgroundOverflow:PropTypes.oneOf(['visible', 'hidden', 'scroll']),
 }
 
 Section.defaultProps = {

package/src/ui/b/SocialMediaButton/SocialMediaButton.jsx

@@ -5,9 +5,9 @@ import { useLayoutEffect } from 'react'
 
 import PropTypes from 'prop-types'
 
-import styleNames from '@pareto-engineering/bem'
+import styleNames from '@pareto-engineering/bem/exports'
 
-import { useSite } from 'ui/a'
+import { useApp } from 'ui/a'
 
 // Local Definitions
 
@@ -37,7 +37,7 @@ const defaultsMap = {
 /**
  * This is the component description.
  * This component takes `y` as the default color and `x` as the hover color.
- * This components needs to be wrapped within a `SiteContextProvider`.
+ * This components needs to be wrapped within a `AppContextProvider`.
  */
 const SocialMediaButton = ({
   id,
@@ -50,14 +50,14 @@ const SocialMediaButton = ({
   isTransparent,
   ...otherProps
 }) => {
-  const siteContext = useSite()
+  const applicationContext = useApp()
 
   useLayoutEffect(() => {
     import('./styles.scss')
   }, [])
 
   const content = type && defaultsMap[type]
-  const href = link || siteContext?.SOCIAL?.[content.link]
+  const href = link || applicationContext?.SOCIAL?.[content.link]
 
   return (
     <a href={href} target="_blank" rel="noreferrer">

package/src/ui/b/SocialMediaButton/styles.scss

@@ -1,8 +1,8 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 
 @use "@pareto-engineering/bem";
-@use "@aztlan/stylebook/src/mixins";
-@use "@aztlan/stylebook/src/globals" as *;
+@use "@pareto-engineering/styles/src/mixins";
+@use "@pareto-engineering/styles/src/globals" as *;
 
 $default-dimensions: 2em;
 $mobile-dimensions: 2.75em;
@@ -29,7 +29,7 @@ $mobile-dimensions: 2.75em;
   }
 
   &:focus {
-    background: var(--light-x);
+    background: var(--soft-x);
   }
 
   &.#{bem.$modifier-transparent} {
@@ -41,7 +41,7 @@ $mobile-dimensions: 2.75em;
     }
   
     &:focus {
-      color: var(--light-x);
+      color: var(--soft-x);
     }
   }
 }

package/src/ui/b/ThemeSelector/ThemeSelector.jsx

@@ -2,9 +2,9 @@
 import * as React from 'react'
 import { useLayoutEffect, useCallback } from 'react'
 import PropTypes from 'prop-types'
-import styleNames from '@pareto-engineering/bem'
+import styleNames from '@pareto-engineering/bem/exports'
 
-import { useSite } from 'ui/a'
+import { useApp } from 'ui/a'
 
 // Local Definitions
 
@@ -27,7 +27,7 @@ const ThemeSelector = ({
   const {
     userTheme,
     setPreferredTheme,
-  } = useSite()
+  } = useApp()
 
   useLayoutEffect(() => {
     import('./styles.scss')

package/src/ui/b/Title/Title.jsx

@@ -3,7 +3,7 @@ import * as React from 'react'
 import PropTypes from 'prop-types'
 
 // Package-level Imports
-import styleNames from '@pareto-engineering/bem'
+import styleNames from '@pareto-engineering/bem/exports'
 
 // Component-level imports
 import('./styles.scss')

package/src/ui/b/index.js

@@ -1,10 +1,6 @@
 export { Button } from './Button'
-export { Segment } from './Segment'
-export { Card } from './Card'
-export { Title } from './Title'
-export { Page } from './Page'
-export { QuestionDropdown } from './QuestionDropdown'
-export { ThemeSelector } from './ThemeSelector'
 export { Logo } from './Logo'
+export { Page } from './Page'
 export { SocialMediaButton } from './SocialMediaButton'
-export { Metrics } from './Metrics'
+export { ThemeSelector } from './ThemeSelector'
+export { Title } from './Title'

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

@@ -7,7 +7,7 @@ import PropTypes from 'prop-types'
 
 import { useHistory } from 'react-router-dom'
 
-import styleNames from '@pareto-engineering/bem'
+import styleNames from '@pareto-engineering/bem/exports'
 
 import ContentSlidesContext from './Context'