@pareto-engineering/design-system 0.0.1-alpha.60 → 0.0.1-alpha.64

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

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

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

@@ -1,51 +0,0 @@
-/* @pareto-engineering/generator-front 1.0.12 */
-
-@use "@pareto-engineering/bem";
-@use "@aztlan/stylebook/src/mixins";
-@use "@aztlan/stylebook/src/globals" as *;
-
-$onboarding-step-img-height:10em;
-$index-color:var(--dark-subtitle);
-$title-color: var(--dark-heading);
-$description-color:var(--subtitle);
-$onboarding-step-gap:var(--u);
-$onboarding-step-min-max:250px;
-
-.#{bem.$base}.onboarding-step {
-  display: grid;
-  gap: $onboarding-step-gap;
-  grid-template-columns: 1fr;
-  height: auto;
-  justify-content: center;
-
-  @include mixins.media($from:$sm-md) {
-    grid-template-columns: repeat(3, 1fr);
-  }
-
-  .content {
-    align-items: center;
-    display: flex;
-    flex-direction: column;
-    padding: var(--v);
-
-    /*
-    .img {
-      height: $onboarding-step-img-height;
-      object-fit: contain;
-    } */
-
-    .index {
-      color: $index-color;
-    }
-
-    .title {
-      color: $title-color;
-    }
-
-    .description {
-      color: $description-color;
-    }
-  }
-}
-
-

package/src/ui/c/SitePricing/SitePricing.jsx

@@ -1,120 +0,0 @@
-/* @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'
-
-import { Button } from 'ui/b'
-
-// Local Definitions
-
-const baseClassName = styleNames.base
-
-const componentClassName = 'pricing'
-
-/**
- * This is the component description.
- */
-const SitePricing = ({
-  id,
-  className:userClassName,
-  style,
-  color,
-  pricingMap,
-  ctaLink,
-  // ...otherProps
-}) => {
-  useLayoutEffect(() => {
-    import('./styles.scss')
-  }, [])
-
-  return (
-    <div
-      id={id}
-      className={[
-        baseClassName,
-        componentClassName,
-        userClassName,
-        `y-${color}`,
-        'u2',
-      ]
-        .filter((e) => e)
-        .join(' ')}
-      style={style}
-      // {...otherProps}
-    >
-      <div className="content s-1 md-s0">
-        {
-          pricingMap.map((pricing, index) => (
-
-            <div key={pricing.type} className="info-content md-u2 u1 p-u">
-              <div className="info md-v2 v1">
-                <span className="plan-name uc s1 mb-v">{pricing.type}</span>
-                <span className="plan-price uc s5 mb-v">{pricing.price}</span>
-                <ul>
-                  {pricing.features.map((feature) => (
-                    <li key={feature} className="mb-v">
-                      {feature}
-                    </li>
-                  ))}
-                </ul>
-              </div>
-              {index === 0 && (
-                <div className="cta">
-                  <a href={ctaLink} rel="noreferrer">
-                    <Button>Get started in 5 min</Button>
-                  </a>
-                </div>
-              )}
-            </div>
-          ))
-        }
-      </div>
-    </div>
-  )
-}
-
-SitePricing.propTypes = {
-  /**
-   * The HTML id for this element
-   */
-  id:PropTypes.string,
-
-  /**
-   * The HTML class names for this element
-   */
-  className:PropTypes.string,
-
-  /**
-   * The title and background color
-   */
-  color:PropTypes.string,
-
-  /**
-   * The link of the call to action button
-   */
-  ctaLink:PropTypes.string,
-
-  /**
-   * The React-written, css properties for this element.
-   */
-  style:PropTypes.objectOf(PropTypes.string),
-
-  /**
-   *  The pricingMap
-   */
-  pricingMap:PropTypes.arrayOf(PropTypes.shape({
-    type    :PropTypes.string.isRequired,
-    price   :PropTypes.string.isRequired,
-    features:PropTypes.arrayOf(PropTypes.string).isRequired,
-  })).isRequired,
-}
-
-SitePricing.defaultProps = {
-  color:'main1',
-}
-
-export default SitePricing

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

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

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

@@ -1,73 +0,0 @@
-/* @pareto-engineering/generator-front 1.0.12 */
-
-@use "@pareto-engineering/bem";
-@use "@aztlan/stylebook/src/mixins";
-@use "@aztlan/stylebook/src/globals" as *;
-
-$default-pricing-main-column-width: 220px;
-$desktop-pricing-main-column-width: 300px;
-$box-shadow:0 2px 2px 0 var(--background2);
-
-.#{bem.$base}.pricing {
-  height: auto;
-
-  .content {
-    display: grid;
-    gap: var(--u);
-    grid-template-columns: repeat(auto-fit, minmax($default-pricing-main-column-width, 1fr));
-    justify-content: center;
-    
-    @include mixins.media($from: $sm-md) {
-      grid-template-columns: repeat(auto-fit, minmax($desktop-pricing-main-column-width, 1fr));
-    }
-  }
-
-  .info-content {
-    background-color: var(--on-main1);
-    border-radius: var(--theme-border-radius);
-    //box-shadow: $box-shadow;
-    display: flex;
-    flex-direction: column;
-
-    button {
-      margin: 0 auto;
-      width: auto;
-    }
-  }
-
-  .info {
-    align-items: center;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-
-    ul {
-      display: flex;
-      flex-direction: column;
-      list-style: none;
-      padding: 0;
-    }
-  }
-
-  .cta {
-    align-items: center;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-  }
-
-  .title {
-    color: var(--on-y);
-  }
-
-  @include mixins.media($to:$sm-md) {
-    .content {
-      display: grid;
-      gap: var(--u);
-      grid-template-columns: none;
-      justify-content: center;
-    }
-  }
-}
-
-

package/src/ui/c/SiteServices/SiteServices.jsx

@@ -1,222 +0,0 @@
-/* @pareto-engineering/generator-front 1.0.12 */
-import * as React from 'react'
-
-import { useState, useEffect, useLayoutEffect } from 'react'
-
-import PropTypes from 'prop-types'
-
-import styleNames from '@pareto-engineering/bem'
-
-// Local  Definitions
-
-const baseClassName = styleNames.base
-
-const componentClassName = 'services'
-
-/**
- * This is the component description.
- */
-const SiteServices = ({
-  id,
-  className:userClassName,
-  style,
-  deletePath,
-  servicesMap,
-  attachmentPath,
-  defaultService,
-  defaultServiceTask,
-  defaultTaskEmailContent,
-  // ...otherProps
-}) => {
-  useLayoutEffect(() => {
-    import('./styles.scss')
-  }, [])
-
-  const [service, setService] = useState(defaultService)
-  const [serviceTask, setServiceTask] = useState(defaultServiceTask)
-  const [serviceTaskIndx, setServiceTaskIndx] = useState(0)
-  const [taskEmailContent, setTaskEmailContent] = useState(defaultTaskEmailContent)
-
-  const handleServiceClick = (serviceArg) => setService(serviceArg)
-  const handleTaskClick = (taskArg) => setServiceTask(taskArg)
-
-  useEffect(() => {
-    const serviceObjs = servicesMap[service]
-    setServiceTask(serviceObjs[0].task)
-  }, [service])
-
-  useEffect(() => {
-    const serviceContent = servicesMap[service]
-      .find((serviceObj) => serviceObj.task === serviceTask)
-    setTaskEmailContent(serviceContent.email)
-  }, [serviceTask])
-
-  return (
-    <div
-      id={id}
-      className={[
-        baseClassName,
-        componentClassName,
-        userClassName,
-        'u2 v1',
-      ]
-        .filter((e) => e)
-        .join(' ')}
-      style={style}
-    >
-      <div className="btn-content v1 s-1 md-s0">
-        {Object.keys(servicesMap).map((serviceName) => (
-          <button
-            className={`s1 ${serviceName === service && 'active-service-btn'}`}
-            key={serviceName}
-            type="button"
-            onClick={() => {
-              handleServiceClick(serviceName)
-              setServiceTaskIndx(0)
-            }}
-          >
-            {serviceName}
-          </button>
-        ))}
-      </div>
-      <div className="tasks-and-content s-1 md-s0">
-        <div className="tasks">
-          {servicesMap[service].map((serviceObj, index) => (
-            <button
-              key={serviceObj.task}
-              className={`v1 mb-v ${serviceTaskIndx === index ? 'b-dark-y c-on-y' : 'b-on-y'}`}
-              type="button"
-              onClick={() => {
-                handleTaskClick(serviceObj.task)
-                setServiceTaskIndx(index)
-              }}
-            >
-              <span className="v50 m-v">{serviceObj.icon}</span>
-              <p className="ul">{serviceObj.task}</p>
-            </button>
-          ))}
-        </div>
-        <div className="task-email b-on-y u2 p-u">
-          <div className="task-email-header">
-            <span>To</span>
-            <span className="ml-u">camille@hellopareto.com</span>
-          </div>
-          <span className="v1 mv-v">
-            {taskEmailContent.subject}
-          </span>
-          <p className="email-content v25 pb-v">
-            Hi Camille,
-            <br />
-            <br />
-            {taskEmailContent.description}
-            <br />
-            <br />
-            Warmly,
-            <br />
-            Phoebe
-          </p>
-          <div className="u1 task-email-footer">
-            <div className="task-footer-text">
-              <span className="mr-u">Send</span>
-              <span className="mr-u">Send later</span>
-              <span className="mr-u">Remind me</span>
-            </div>
-            <div className="task-footer-icons">
-              <img className="ml-u" alt="attach" src={attachmentPath} />
-              <img className="ml-u" alt="delete" src={deletePath} />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-SiteServices.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),
-
-  /**
-   *  services map
-   */
-  servicesMap:PropTypes.shape({
-    sales:PropTypes.arrayOf(PropTypes.shape({
-      task :PropTypes.string.isRequired,
-      icon :PropTypes.string.isRequired,
-      email:PropTypes.shape({
-        subject    :PropTypes.string.isRequired,
-        description:PropTypes.string.isRequired,
-      }).isRequired,
-    })).isRequired,
-    product:PropTypes.arrayOf(PropTypes.shape({
-      task :PropTypes.string.isRequired,
-      icon :PropTypes.string.isRequired,
-      email:PropTypes.shape({
-        subject    :PropTypes.string.isRequired,
-        description:PropTypes.string.isRequired,
-      }).isRequired,
-    })).isRequired,
-    hiring:PropTypes.arrayOf(PropTypes.shape({
-      task :PropTypes.string.isRequired,
-      icon :PropTypes.string.isRequired,
-      email:PropTypes.shape({
-        subject    :PropTypes.string.isRequired,
-        description:PropTypes.string.isRequired,
-      }).isRequired,
-    })).isRequired,
-    admin:PropTypes.arrayOf(PropTypes.shape({
-      task :PropTypes.string.isRequired,
-      icon :PropTypes.string.isRequired,
-      email:PropTypes.shape({
-        subject    :PropTypes.string.isRequired,
-        description:PropTypes.string.isRequired,
-      }).isRequired,
-    })).isRequired,
-  }).isRequired,
-
-  /**
-   *  default service
-   */
-  defaultService:PropTypes.string,
-
-  /**
-   *  default service task
-   */
-  defaultServiceTask:PropTypes.string,
-
-  /**
-   *  default service task
-   */
-  defaultTaskEmailContent:PropTypes.objectOf(PropTypes.string),
-  /**
-   *  email attachment path
-   */
-  attachmentPath         :PropTypes.string.isRequired,
-  /**
-   *  delete attachment path
-   */
-  deletePath             :PropTypes.string.isRequired,
-}
-
-SiteServices.defaultProps = {
-  defaultService         :'sales',
-  defaultServiceTask     :'Generate sales leads',
-  defaultTaskEmailContent:{
-    subject    :'Fintech founder lead generation',
-    description:'I need a list of all fintech founders featured in Forbes, Business Insider, CB Insights, and AngelList newsletters. Please send me a spreadsheet containing their name, title, company website, and email address within the week.',
-  },
-}
-
-export default SiteServices