@pareto-engineering/design-system 0.0.1-alpha.8 → 0.0.4-testing-id.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 +1,4 @@
-export { TeamGallery } from './TeamGallery'
+export { Hero } from './Hero'
+export { ContentSlides, useContentSlides } from './ContentSlides'
+export { Shortener } from './Shortener'
+export { SocialMediaShareButton } from './SocialMediaShareButton'

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

@@ -0,0 +1,171 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { memo, useLayoutEffect } from 'react'
+
+import PropTypes from 'prop-types'
+
+import {
+  TextInput,
+  TextareaInput,
+  ChoicesInput,
+  SelectInput,
+  QueryCombobox,
+  QuerySelect,
+  RatingsInput,
+  Checkbox,
+} from '../fields'
+
+// Local Definitions
+
+// const baseClassName = styleNames.base
+
+const componentClassName = 'form-input'
+
+/**
+ * This is the component description.
+ */
+const FormInput = ({
+  className,
+  type,
+  extraTypes,
+  disabled,
+  ...otherProps
+}) => {
+  useLayoutEffect(() => {
+    import('./styles.scss')
+  }, [])
+
+  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 (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 (
+      <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',
+    'query-combobox',
+    'url',
+    'rating',
+    // 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/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

@@ -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="main2">
+        { 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,93 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { useLayoutEffect } from 'react'
+
+import { useField } from 'formik'
+
+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,
+  description,
+  name,
+  color,
+  // ...otherProps
+}) => {
+  useLayoutEffect(() => {
+    import('./styles.scss')
+  }, [])
+
+  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 = {
+  /**
+   * 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 base color for the description
+   */
+  color:PropTypes.string,
+
+  /**
+   * Input description - extra description to guide a use in filling the input
+   */
+  description:PropTypes.string,
+
+  /**
+   * The input name (html - and Formik state)
+   */
+  name:PropTypes.string.isRequired,
+}
+
+Description.defaultProps = {
+  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);
+}
+
+

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

@@ -0,0 +1,102 @@
+/* @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 = 'form-label'
+
+/**
+ * This is the component description.
+ */
+const Label = ({
+  id,
+  className:userClassName,
+  style,
+  children,
+  name,
+  color,
+  optional,
+  as:Wrapper,
+  // ...otherProps
+}) => {
+  useLayoutEffect(() => {
+    import('./styles.scss')
+  }, [])
+
+  return (
+    <Wrapper
+      htmlFor={Wrapper === 'label' ? name : undefined}
+      id={id}
+      className={[
+        baseClassName,
+        componentClassName,
+        userClassName,
+        `x-${color}`,
+      ]
+        .filter((e) => e)
+        .join(' ')}
+      style={style}
+      // {...otherProps}
+    >
+      {children}
+      {optional && '(Optional)'}
+    </Wrapper>
+  )
+}
+
+Label.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 name of the input label
+   */
+  name:PropTypes.string,
+
+  /**
+   *  The html tag that acts as an input label
+   */
+  as   :PropTypes.node,
+  /**
+   *  The default color of the label
+   */
+  color:PropTypes.string,
+
+  /**
+   * Whether the input should have an optional tag
+   */
+  optional:PropTypes.bool,
+}
+
+Label.defaultProps = {
+  as      :'label',
+  color   :'main2',
+  optional:false,
+}
+
+export default Label

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

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

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

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

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

@@ -0,0 +1,3 @@
+export { Label as FormLabel } from './Label'
+export { Description as FormDescription } from './Description'
+export { Debugger as FormDebugger } from './Debugger'