@pareto-engineering/design-system 2.0.0-alpha.7 → 2.0.0-alpha.70

package/src/ui/c/Modal/common/ModalHeader/ModalHeader.jsx

@@ -0,0 +1,89 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import PropTypes from 'prop-types'
+
+import styleNames from '@pareto-engineering/bem'
+
+import { Button } from 'ui'
+
+// Local Definitions
+
+const baseClassName = styleNames.base
+
+const componentClassName = 'modal-header'
+
+/**
+ * This is the component description.
+ */
+const ModalHeader = ({
+  id,
+  className: userClassName,
+  style,
+  title,
+  close,
+  color,
+  // ...otherProps
+}) => (
+  <div
+    id={id}
+    className={[
+      baseClassName,
+      componentClassName,
+      userClassName,
+    ]
+      .filter((e) => e)
+      .join(' ')}
+    style={style}
+  >
+    <p>{title}</p>
+    <Button
+      color={color}
+      onClick={() => close()}
+      isCompact
+      className="close-button"
+    >
+      <span className="f-icons">
+        Y
+      </span>
+    </Button>
+  </div>
+)
+
+ModalHeader.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
+     */
+  title:PropTypes.string,
+
+  /**
+   *  The close modal function
+   */
+  close:PropTypes.func,
+
+  /**
+   *  The color for the button to open and close the modal
+   */
+  color:PropTypes.string.isRequired,
+}
+
+ModalHeader.defaultProps = {
+  // someProp:false
+}
+
+export default ModalHeader

package/src/ui/c/Modal/common/ModalHeader/index.js

@@ -0,0 +1 @@
+export { default as ModalHeader } from './ModalHeader'

package/src/ui/c/Modal/common/index.js

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

package/src/ui/c/Modal/index.js

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

package/src/ui/c/Modal/styles.scss

@@ -0,0 +1,46 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+@use "@pareto-engineering/bem";
+
+$default-background: var(--background1);
+$default-box-shadow: 0 10px 20px rgba(black, 0.2);
+$default-padding: 1em / 2;
+$default-margin: 2em;
+$default-max-height: 75vh;
+$default-max-width: 90%;
+$default-min-width: 20em;
+
+.#{bem.$base}.modal{
+  background: $default-background;
+  box-shadow: $default-box-shadow;
+  display: flex;
+  flex-direction: column;
+  left: 50%;
+  max-height: $default-max-height;
+  max-width: $default-max-width;
+  min-width: $default-min-width;
+  overflow: auto;
+  position: absolute;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 100;
+  
+  .modal-body {
+    padding: $default-padding;
+  }
+
+  .modal-header {
+    background: $default-background;
+    border-bottom: var(--theme-border);
+    display: flex;
+    font-size: calc(var(--theme-heading-font-size-multiplier, 1) * var(--s1) * 1em);
+    justify-content: space-between;
+    position: sticky;
+    top: 0;
+    z-index: 2;
+    
+    > p {
+      padding: $default-padding;
+      margin: 0;
+    }
+  }
+}

package/src/ui/c/SocialMediaShareButton/SocialMediaShareButton.jsx

@@ -0,0 +1,121 @@
+/* @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 = 'social-media-share-button'
+
+/**
+ * This is the component description.
+ */
+const SocialMediaShareButton = ({
+  id,
+  className:userClassName,
+  style,
+  icon,
+  // children,
+  type,
+  color,
+}) => {
+  useLayoutEffect(() => {
+    import('./styles.scss')
+  }, [])
+
+  const isServer = typeof window === 'undefined'
+
+  const link = isServer ? '' : window.location.href
+
+  // We can pass additional text to the social media share buttons such as the title.
+  // See commented code below for an example on how to pass text.
+  // It is important we encode the text with the encodeURIComponent function to pass
+  // special characters (such as |, &, etc.) properly through the URL.
+
+  // const title = isServer ? '' : encodeURIComponent(document.title)
+
+  const defaultsMap = {
+    facebook:{
+      icon:'f',
+      link:`https://www.facebook.com/sharer/sharer.php?u=${link}`,
+      // link: `https://www.facebook.com/sharer/sharer.php?u=${link}&quote=${title}`,
+    },
+    twitter:{
+      icon:'t',
+      link:`https://twitter.com/intent/tweet?url=${link}`,
+      // link: `https://twitter.com/intent/tweet?text=${title}&url=${link}`,
+    },
+  }
+
+  return (
+    <a
+      href={defaultsMap[type].link}
+      target="_blank"
+      rel="noreferrer"
+      id={id}
+      className={[
+        baseClassName,
+        componentClassName,
+        `x-${color || type}`,
+        userClassName,
+      ]
+        .filter((e) => e)
+        .join(' ')}
+      style={style}
+    >
+      <button type="button">
+        { icon || defaultsMap[type].icon }
+      </button>
+    </a>
+  )
+}
+
+SocialMediaShareButton.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 Social Media to Target.
+   * If blank, you need to provide both an icon letter (from glyphter) and a link.
+   */
+  type:PropTypes.oneOf(['twitter', 'facebook']),
+
+  /**
+   * The icon of the social media
+   */
+  icon:PropTypes.string,
+
+  /**
+   * The button color
+   */
+  color:PropTypes.string,
+}
+
+SocialMediaShareButton.defaultProps = {
+  // someProp:false
+}
+
+export default SocialMediaShareButton

package/src/ui/c/SocialMediaShareButton/index.js

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

package/src/ui/c/SocialMediaShareButton/styles.scss

@@ -0,0 +1,39 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+
+@use "@pareto-engineering/bem";
+@use "@aztlan/stylebook/src/mixins";
+@use "@aztlan/stylebook/src/globals" as *;
+
+$default-dimensions: 2em;
+$mobile-dimensions: 2.75em;
+
+.#{bem.$base}.social-media-share-button{
+
+  > button {
+    appearance: none;
+    background: transparent;
+    border: 0;
+    border-radius: 3em;
+    color: var(--x);
+    cursor: pointer;
+    font-family: "icons", sans-serif;
+    height: $default-dimensions;
+    transition: all .3s;
+    width: $default-dimensions;
+
+    @include mixins.media($to:$sm-md) {
+      height: $mobile-dimensions;
+      width: $mobile-dimensions;
+    }
+
+    &:hover {
+      background: var(--x);
+      color: var(--on-x);
+    }
+
+    &:focus, &:active {
+      background: var(--light-x);
+      color: var(--on-x);
+    }
+  }
+}

package/src/ui/c/index.js

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

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

@@ -1,7 +1,7 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react'
 
-import { memo } from 'react'
+import { memo, useLayoutEffect } from 'react'
 
 import PropTypes from 'prop-types'
 
@@ -10,6 +10,10 @@ import {
   TextareaInput,
   ChoicesInput,
   SelectInput,
+  QueryCombobox,
+  QuerySelect,
+  RatingsInput,
+  Checkbox,
 } from '../fields'
 
 // Local Definitions
@@ -28,6 +32,10 @@ const FormInput = ({
   disabled,
   ...otherProps
 }) => {
+  useLayoutEffect(() => {
+    import('./styles.scss')
+  }, [])
+
   const newClassName = [
     className,
     componentClassName,
@@ -60,6 +68,44 @@ const FormInput = ({
       />
     )
   }
+  if (type === 'query-combobox') {
+    return (
+      <QueryCombobox
+        className={newClassName}
+        disabled={disabled}
+        {...otherProps}
+      />
+    )
+  }
+  if (type === 'query-select') {
+    return (
+      <QuerySelect
+        className={newClassName}
+        disabled={disabled}
+        {...otherProps}
+      />
+    )
+  }
+
+  if (type === 'rating') {
+    return (
+      <RatingsInput
+        className={newClassName}
+        {...otherProps}
+      />
+    )
+  }
+
+  if (type === 'checkbox') {
+    return (
+      <Checkbox
+        className={newClassName}
+        disabled={disabled}
+        {...otherProps}
+      />
+    )
+  }
+
   if (extraTypes?.[type]) {
     const Component = extraTypes[type]
     return (
@@ -102,6 +148,9 @@ FormInput.propTypes = {
     'select',
     'choices',
     'textarea',
+    'query-combobox',
+    'url',
+    'rating',
     // to be removed
     'extendedTypeInput',
   ]),

package/src/ui/f/FormInput/styles.scss

@@ -0,0 +1,11 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+
+@use "@pareto-engineering/bem";
+
+$default-margin: 1em;
+
+.#{bem.$base}.form-input {
+    &+& {
+        margin-top: $default-margin;
+    }
+}

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

@@ -41,7 +41,7 @@ const Debugger = ({
         .join(' ')}
       style={style}
     >
-      <Button onClick={toggleDebugger} color="main1">
+      <Button onClick={toggleDebugger} color="main2">
         { isOpen
           ? 'Close FormDebugger'
           : 'Open FormDebugger'}

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

@@ -3,6 +3,8 @@ import * as React from 'react'
 
 import { useLayoutEffect } from 'react'
 
+import { useField } from 'formik'
+
 import PropTypes from 'prop-types'
 
 import styleNames from '@pareto-engineering/bem'
@@ -20,8 +22,8 @@ const Description = ({
   id,
   className:userClassName,
   style,
-  children,
-  isError,
+  description,
+  name,
   color,
   // ...otherProps
 }) => {
@@ -29,25 +31,27 @@ const Description = ({
     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>
-  )
+  const [field, meta] = useField(name)
+
+  if (description || ((meta.touched || field.value) && meta.error)) {
+    return (
+      <div
+        id={id}
+        className={[
+          baseClassName,
+          componentClassName,
+          userClassName,
+          meta.error ? 'x-error' : `x-${color}`,
+        ]
+          .filter((e) => e)
+          .join(' ')}
+        style={style}
+      >
+        { meta.error || description}
+      </div>
+    )
+  }
+  return null
 }
 
 Description.propTypes = {
@@ -67,22 +71,23 @@ Description.propTypes = {
   style:PropTypes.objectOf(PropTypes.string),
 
   /**
-   *  The children JSX
+   * The base color for the description
    */
-  children:PropTypes.node,
+  color:PropTypes.string,
+
   /**
-   * The base color for the description
+   * Input description - extra description to guide a use in filling the input
    */
-  color   :PropTypes.string,
+  description:PropTypes.string,
+
   /**
-   * isError
+   * The input name (html - and Formik state)
    */
-  isError :PropTypes.bool,
+  name:PropTypes.string.isRequired,
 }
 
 Description.defaultProps = {
-  isError:false,
-  color  :'metadata',
+  color:'metadata',
 }
 
 export default Description

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

@@ -11,7 +11,7 @@ import styleNames from '@pareto-engineering/bem'
 
 const baseClassName = styleNames.base
 
-const componentClassName = 'label'
+const componentClassName = 'form-label'
 
 /**
  * This is the component description.
@@ -23,6 +23,7 @@ const Label = ({
   children,
   name,
   color,
+  optional,
   as:Wrapper,
   // ...otherProps
 }) => {
@@ -46,6 +47,7 @@ const Label = ({
       // {...otherProps}
     >
       {children}
+      {optional && '(Optional)'}
     </Wrapper>
   )
 }
@@ -85,12 +87,16 @@ Label.propTypes = {
    */
   color:PropTypes.string,
 
+  /**
+   * Whether the input should have an optional tag
+   */
+  optional:PropTypes.bool,
 }
 
 Label.defaultProps = {
-  // someProp:false
-  as   :'label',
-  color:'main1',
+  as      :'label',
+  color   :'main2',
+  optional:false,
 }
 
 export default Label

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

@@ -3,9 +3,6 @@
 @use "@pareto-engineering/bem";
 @use "../../../form.scss";
 
-
-.#{bem.$base}.label {
- color: var(--x);
+.#{bem.$base}.form-label {
+ color: var(--dark-x);
 }
-
-