@pareto-engineering/design-system 0.0.1-alpha.9 → 2.0.0-alpha.3

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;
+  }
+}
+
+

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

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

package/src/ui/f/FormInput/FormInput.jsx

@@ -0,0 +1,122 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { memo } from 'react'
+
+import PropTypes from 'prop-types'
+
+import {
+  TextInput,
+  TextareaInput,
+  ChoicesInput,
+  SelectInput,
+} from '../fields'
+
+// Local Definitions
+
+// const baseClassName = styleNames.base
+
+const componentClassName = 'form-input'
+
+/**
+ * This is the component description.
+ */
+const FormInput = ({
+  className,
+  type,
+  extraTypes,
+  disabled,
+  ...otherProps
+}) => {
+  const newClassName = [
+    className,
+    componentClassName,
+  ].filter(Boolean).join(' ')
+
+  if (type === 'textarea') {
+    return (
+      <TextareaInput
+        className={newClassName}
+        disabled={disabled}
+        {...otherProps}
+      />
+    )
+  }
+  if (type === 'choices') {
+    return (
+      <ChoicesInput
+        className={newClassName}
+        disabled={disabled}
+        {...otherProps}
+      />
+    )
+  }
+  if (type === 'select') {
+    return (
+      <SelectInput
+        className={newClassName}
+        disabled={disabled}
+        {...otherProps}
+      />
+    )
+  }
+  if (extraTypes?.[type]) {
+    const Component = extraTypes[type]
+    return (
+      <Component
+        className={newClassName}
+        disabled={disabled}
+        {...otherProps}
+      />
+    )
+  }
+  return (
+    <TextInput
+      className={newClassName}
+      disabled={disabled}
+      type={type}
+      {...otherProps}
+    />
+  )
+}
+
+FormInput.propTypes = {
+  /**
+   * The HTML class names for this element
+   */
+  className:PropTypes.string,
+
+  /**
+   * The HTML class names for this element
+   */
+  type:PropTypes.oneOf([
+    'text',
+    'email',
+    'password',
+    'number',
+    'date',
+    'datetime',
+    'month',
+    'tel',
+    'hidden',
+    'select',
+    'choices',
+    'textarea',
+    // to be removed
+    'extendedTypeInput',
+  ]),
+  /**
+   * The object with external Input types that would make the form input extensible
+   */
+  extraTypes:PropTypes.objectOf(PropTypes.func),
+  /**
+   * Whether the Form input input should be disabled
+   */
+  disabled  :PropTypes.bool,
+}
+
+FormInput.defaultProps = {
+  disabled:false,
+}
+
+export default memo(FormInput)

package/src/ui/f/FormInput/index.js

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

package/src/ui/f/common/Debugger/Debugger.jsx

@@ -0,0 +1,85 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+import { useState, useLayoutEffect, useContext } from 'react'
+
+import PropTypes from 'prop-types'
+
+import { Button } from 'ui/b'
+import { FormikContext } from 'formik'
+
+// Local Definitions
+
+const componentClassName = 'debugger'
+
+/**
+ * This is the component description.
+ */
+const Debugger = ({
+  id,
+  className:userClassName,
+  style,
+  initialIsOpen,
+  // ...otherProps
+}) => {
+  useLayoutEffect(() => {
+    import('./styles.scss')
+  }, [])
+
+  const [isOpen, setIsOpen] = useState(initialIsOpen)
+
+  const toggleDebugger = () => setIsOpen(!isOpen)
+  const formikContext = useContext(FormikContext)
+
+  return (
+    <div
+      id={id}
+      className={[
+        componentClassName,
+        userClassName,
+      ]
+        .filter((e) => e)
+        .join(' ')}
+      style={style}
+    >
+      <Button onClick={toggleDebugger} color="main1">
+        { isOpen
+          ? 'Close FormDebugger'
+          : 'Open FormDebugger'}
+      </Button>
+      { isOpen
+      && (
+      <pre className="debuger-content">
+        { JSON.stringify(formikContext, null, 2) }
+      </pre>
+      )}
+    </div>
+  )
+}
+
+Debugger.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),
+  /**
+   * state to control the opening and closing of the debugger
+   */
+  initialIsOpen:PropTypes.bool,
+}
+
+Debugger.defaultProps = {
+  initialIsOpen:false,
+}
+
+export default Debugger

package/src/ui/f/common/Debugger/index.js

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

package/src/ui/f/common/Debugger/styles.scss

@@ -0,0 +1,12 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+
+@use "@pareto-engineering/bem";
+
+.#{bem.$base}.debuger {
+  .debuger-content {
+    font-size: calc(var(--s-1) * 1em);
+    white-space: pre;
+  }
+}
+
+

package/src/ui/f/common/Description/Description.jsx

@@ -0,0 +1,88 @@
+/* @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 = 'description'
+
+/**
+ * This is the component description.
+ */
+const Description = ({
+  id,
+  className:userClassName,
+  style,
+  children,
+  isError,
+  color,
+  // ...otherProps
+}) => {
+  useLayoutEffect(() => {
+    import('./styles.scss')
+  }, [])
+
+  return (
+    <div
+      id={id}
+      className={[
+
+        baseClassName,
+
+        componentClassName,
+        userClassName,
+        isError ? 'x-error' : `x-${color}`,
+      ]
+        .filter((e) => e)
+        .join(' ')}
+      style={style}
+      // {...otherProps}
+    >
+      {children}
+    </div>
+  )
+}
+
+Description.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 base color for the description
+   */
+  color   :PropTypes.string,
+  /**
+   * isError
+   */
+  isError :PropTypes.bool,
+}
+
+Description.defaultProps = {
+  isError:false,
+  color  :'metadata',
+}
+
+export default Description

package/src/ui/f/common/Description/index.js

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

package/src/ui/f/common/Description/styles.scss

@@ -0,0 +1,10 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+
+@use "@pareto-engineering/bem";
+
+
+.#{bem.$base}.description {
+  color: var(--x);
+}
+
+