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

package/src/ui/a/AnimatedCounter/AnimatedCounter.jsx

@@ -0,0 +1,118 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { useLayoutEffect, useCallback } from 'react'
+
+import CountUp from 'react-countup'
+
+import VisibilitySensor from 'react-visibility-sensor'
+
+import PropTypes from 'prop-types'
+
+import styleNames from '@pareto-engineering/bem'
+
+// Local Definitions
+
+const baseClassName = styleNames.base
+
+const componentClassName = 'animated-counter'
+
+/**
+ * This is the component description
+ */
+const AnimatedCounter = ({
+  id,
+  className:userClassName,
+  style,
+  color,
+  number,
+  before,
+  after,
+  delay,
+  // ...otherProps
+}) => {
+  useLayoutEffect(() => {
+    import('./styles.scss')
+  }, [])
+
+  const countDecimals = useCallback((value) => {
+    if ((value % 1) !== 0) return value.toString().split('.')[1].length
+    return 0
+  }, [])
+
+  return (
+    <div
+      id={id}
+      className={[
+        baseClassName,
+        componentClassName,
+        userClassName,
+        `x-${color}`,
+      ]
+        .filter((e) => e)
+        .join(' ')}
+      style={style}
+      // {...otherProps}
+    >
+      <div className="count s3">
+        {before && <span>{before}</span>}
+        <CountUp end={number} delay={delay} decimals={countDecimals(number)} redraw>
+          {({ countUpRef, start }) => (
+            <VisibilitySensor onChange={start} delayedCall>
+              <span ref={countUpRef} />
+            </VisibilitySensor>
+          )}
+        </CountUp>
+        {after && <span>{after}</span>}
+      </div>
+    </div>
+  )
+}
+
+AnimatedCounter.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 count color
+   */
+  color:PropTypes.string,
+
+  /**
+   *  The review count value
+   */
+  number:PropTypes.number,
+
+  /**
+   *  The unit before the number
+   */
+  before:PropTypes.string,
+
+  /**
+   *  The unit after the number
+   */
+  after:PropTypes.string,
+
+  /**
+   *  react counter delay
+   */
+  delay:PropTypes.number,
+}
+
+AnimatedCounter.defaultProps = {
+  color:'main1',
+}
+
+export default AnimatedCounter

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

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

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

@@ -0,0 +1,16 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+
+@use "@pareto-engineering/bem";
+//@use "@aztlan/stylebook/src/mixins";
+//@use "@aztlan/stylebook/src/globals" as *;
+
+.#{bem.$base}.animated-counter {
+  display: flex;
+  justify-content: center;
+
+  .count {
+    color: var(--x);
+  }
+}
+
+

package/src/ui/a/ContentCard/ContentCard.jsx

@@ -0,0 +1,84 @@
+/* @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
+
+import { Section } from './common'
+
+const baseClassName = styleNames.base
+
+const componentClassName = 'content-card'
+
+/**
+ * This is the component description.
+ */
+const ContentCard = ({
+  id,
+  className:userClassName,
+  style,
+  color,
+  children,
+  // messages,
+  // ...otherProps
+}) => {
+  useLayoutEffect(() => {
+    import('./styles.scss')
+  }, [])
+
+  return (
+    <div
+      id={id}
+      className={[
+        baseClassName,
+        componentClassName,
+        userClassName,
+        `y-${color}`,
+        'u1',
+      ]
+        .filter((e) => e)
+        .join(' ')}
+      style={style}
+    >
+      {children}
+    </div>
+  )
+}
+
+ContentCard.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),
+  /**
+  * Base color
+ */
+  color   :PropTypes.string,
+  /**
+   * The children jsx
+   */
+  children:PropTypes.node,
+}
+
+ContentCard.defaultProps = {
+  color:'background2',
+}
+
+ContentCard.Section = Section
+
+export default ContentCard

package/src/ui/a/ContentCard/common/Section/Section.jsx

@@ -0,0 +1,79 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import PropTypes from 'prop-types'
+
+import styleNames from '@pareto-engineering/bem'
+
+// Local Definitions
+
+const baseClassName = styleNames.base
+
+const componentClassName = 'section'
+
+/**
+ * This is the component description.
+ */
+const Section = ({
+  id,
+  className:userClassName,
+  style,
+  children,
+  layout,
+  contentAfter,
+  // ...otherProps
+}) => (
+  <div
+    id={id}
+    className={[
+      baseClassName,
+      componentClassName,
+      userClassName,
+      layout === 'left' && 'layout-left',
+      layout === 'right' && 'layout-right',
+      layout === 'center' && 'layout-center',
+      contentAfter && 'content-after',
+    ]
+      .filter((e) => e)
+      .join(' ')}
+    style={style}
+  >
+    {children}
+  </div>
+)
+
+Section.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 main content position
+   */
+  layout      :PropTypes.oneOf(['left', 'right', 'center']),
+  /**
+   * Whether content should appear before or after illustration
+   */
+  contentAfter:PropTypes.bool,
+}
+
+Section.defaultProps = {
+  contentAfter:false,
+}
+
+export default Section

package/src/ui/a/ContentCard/common/Section/index.js

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

package/src/ui/a/ContentCard/common/index.js

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

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

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

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

@@ -0,0 +1,78 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+
+@use "@pareto-engineering/bem";
+@use "@aztlan/stylebook/src/mixins";
+@use "@aztlan/stylebook/src/globals" as *;
+
+
+$default-padding:var(--u);
+$default-card-background: var(--y);
+$default-content-width:minmax(350px, 500px);
+
+.#{bem.$base}.content-card {
+  background-color: $default-card-background;
+  border-radius: var(--theme-border-radius);
+
+  .#{bem.$base}.section {
+    column-gap: var(--u);
+    display: grid;
+  }
+
+  .layout-left {
+    grid-template-areas:
+      "content"
+      "illustration";
+  }
+
+  .layout-right {
+    grid-template-areas:
+      "content"
+      "illustration";
+
+    .illustration {
+      margin-bottom: 0;
+    }
+  }
+
+  .layout-center {
+    grid-template-areas:
+      "spacer"
+      "content"
+      "spacer2";
+  }
+
+  .content-after {
+    grid-template-areas:
+      "illustration"
+      "content";
+  }
+
+  .content {
+    grid-area: content;
+  }
+
+  .illustration {
+    grid-area: illustration;
+  }
+
+  .heading {
+    margin-bottom: 0;
+  }
+
+  @include mixins.media($from:$sm-md) {
+    .layout-left {
+      grid-template-areas: "content illustration";
+      grid-template-columns: $default-content-width 1fr;
+    }
+
+    .layout-right {
+      grid-template-areas: "illustration content";
+      grid-template-columns: 1fr $default-content-width;
+    }
+
+    .layout-center {
+      grid-template-areas: "spacer content spacer2";
+      grid-template-columns: 1fr minmax(450px, 650px) 1fr;
+    }
+  }
+}

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

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

package/src/ui/a/Conversation/Conversation.jsx

@@ -0,0 +1,107 @@
+/* @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
+
+import { Message } from './common'
+
+import ConversationContext from './Context'
+
+const baseClassName = styleNames.base
+
+const componentClassName = 'conversation'
+
+/**
+ * This is the component description.
+ */
+const Conversation = ({
+  id,
+  className:userClassName,
+  style,
+  backgroundColor,
+  ourColor,
+  theirColor,
+  children,
+  // ...otherProps
+}) => {
+  useLayoutEffect(() => {
+    import('./styles.scss')
+  }, [])
+
+  // const messageColors = { ours: color, theirs: 'main2' }
+
+  return (
+    <ConversationContext.Provider
+      value={{
+        ourColor,
+        theirColor,
+      }}
+    >
+      <div
+        id={id}
+        className={[
+          baseClassName,
+          componentClassName,
+          userClassName,
+          `y-${backgroundColor}`,
+          'u1',
+        ]
+          .filter((e) => e)
+          .join(' ')}
+        style={style}
+      >
+        {children}
+      </div>
+    </ConversationContext.Provider>
+  )
+}
+
+Conversation.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 to our messages component
+   */
+  ourColor  :PropTypes.string,
+  /**
+   * The base color to their messages component
+   */
+  theirColor:PropTypes.string,
+
+  /**
+   * The component background color
+   */
+  backgroundColor:PropTypes.string,
+  /**
+   *  The children JSX
+   */
+  children       :PropTypes.node,
+}
+
+Conversation.defaultProps = {
+  backgroundColor:'background',
+  ourColor       :'main2',
+  theirColor     :'background2',
+}
+
+Conversation.Message = Message
+
+export default Conversation

package/src/ui/a/Conversation/common/Message/Message.jsx

@@ -0,0 +1,90 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import PropTypes from 'prop-types'
+
+import styleNames from '@pareto-engineering/bem'
+
+// Local Definitions
+
+import useConversation from '../../useConversation'
+
+const baseClassName = styleNames.base
+
+const componentClassName = 'message'
+
+/**
+ * This is the component description.
+ */
+const Message = ({
+  id,
+  className:userClassName,
+  style,
+  message,
+  sender,
+  from,
+  // ...otherProps
+}) => {
+  const { ourColor, theirColor } = useConversation()
+
+  return (
+    <div
+      id={id}
+      className={[
+        baseClassName,
+        componentClassName,
+        userClassName,
+        `x-${from === 'ours' ? ourColor : theirColor}`,
+        from === 'ours' && 'ours',
+      ]
+        .filter((e) => e)
+        .join(' ')}
+      style={style}
+    >
+      <div className={styleNames.elementContent}>
+        <p className="sender v25 mb-v s-1">
+          {sender}
+          :
+        </p>
+        <p>
+          {message}
+        </p>
+      </div>
+    </div>
+  )
+}
+
+Message.propTypes = {
+  /**
+   * The HTML id for this element
+   */
+  id:PropTypes.string,
+
+  /**
+   * The HTML class names for this element
+   */
+  className:PropTypes.string,
+
+  /**
+   * The message in the conversation
+   */
+  message:PropTypes.string.isRequired,
+  /**
+   * The sender of the message
+   */
+  sender :PropTypes.string.isRequired,
+  /**
+   * The owner of the message
+   */
+  from   :PropTypes.oneOf(['ours', 'theirs']),
+  /**
+   * The React-written, css properties for this element.
+   */
+  style  :PropTypes.objectOf(PropTypes.string),
+}
+
+Message.defaultProps = {
+  from:'theirs',
+}
+
+export default Message

package/src/ui/a/Conversation/common/Message/index.js

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

package/src/ui/a/Conversation/common/index.js

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

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

@@ -0,0 +1,4 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+export { default as Conversation } from './Conversation'
+export { default as ConversationContext } from './Context'
+export { default as useConversation } from './useConversation'

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

@@ -0,0 +1,54 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+@use "@pareto-engineering/bem";
+@use "@aztlan/stylebook/src/mixins";
+@use "@aztlan/stylebook/src/globals" as *;
+
+$default-padding: var(--u);
+$default-conversation-background: var(--y);
+$default-message-max-width: calc(100% - #{$default-padding});
+$default-message-min-width: 12em;
+$default-message-border: var(--theme-border);
+
+.#{bem.$base}.conversation {
+    display: flex;
+    flex-direction: column;
+    background-color: $default-conversation-background;
+    padding: $default-padding;
+    border-radius: var(--theme-border-radius);
+
+    >:not(:last-child) {
+        margin-bottom: $default-padding;
+    }
+
+    .#{bem.$base}.message {
+        min-width: $default-message-min-width;
+        max-width: $default-message-max-width;
+        padding: $default-padding;
+        border-radius: var(--theme-border-radius);
+        background-color: var(--x);
+        align-self: flex-start;
+        border: $default-message-border;
+
+        .#{bem.$element-content} {
+            display: flex;
+            flex-direction: column;
+
+            >p {
+                color: var(--on-x);
+            }
+
+            .sender {
+                font-weight: 800;
+                margin-bottom: .5em;
+            }
+        }
+    }
+
+    .#{bem.$base}.ours {
+        align-self: flex-end;
+    }
+
+}
+
+
+

package/src/ui/a/Conversation/useConversation.js

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