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

package/src/stories/b/Logo.stories.jsx

@@ -14,24 +14,33 @@ export default {
     // storyfn => <div className="">{ storyfn() }</div>,
   ],
   argTypes:{
-    backgroundColor:{ control: 'color' },
+    // backgroundColor:{ control: 'color' },
+    square:{ control: 'boolean' },
   },
 }
 
-export const Base = () => (
-  <Logo />
-)
+const SingleTemplate = (args) => <Logo {...args} />
 
-export const Color = () => ALL_COLORS.map((color) => <Logo color={color} key={color} />)
+export const Base = SingleTemplate.bind({})
 
-export const Animated = () => (
-  <Logo animated />
-)
+const MultipleTemplate = (args) => ALL_COLORS
+  .map((color) => <Logo key={color} color={color} {...args} />)
 
-export const Loop = () => (
-  <Logo animated loop />
-)
+export const Color = MultipleTemplate.bind({})
 
-export const Beta = () => (
-  <Logo variant="beta" color="main1" />
-)
+export const Square = MultipleTemplate.bind({})
+Square.args = {
+  square:true,
+}
+
+// export const Animated = () => (
+//   <Logo animated />
+// )
+
+// export const Loop = () => (
+//   <Logo animated loop />
+// )
+
+// export const Beta = () => (
+//   <Logo variant="beta" color="main1" />
+// )

package/src/stories/b/Page.stories.jsx

@@ -60,7 +60,7 @@ export const WithSections = () => (
 
 export const SectionsWithBackground = () => (
   <Page
-    id="with-sections"
+    id="with-background"
   >
     <Page.Section
       id="s1"
@@ -83,3 +83,27 @@ export const SectionsWithBackground = () => (
     </Page.Section>
   </Page>
 )
+
+export const SectionsWithBackgroundGradient = () => (
+  <Page
+    id="with-background-gradient"
+  >
+    <Page.Section
+      id="s1"
+      backgroundGradient
+      backgroundGradientHeight="50em"
+      className="y-success"
+      style={{
+        height        :'30em',
+        display       :'flex',
+        justifyContent:'center',
+        alignItems    :'center',
+      }}
+    >
+      <Quote author="Austen Spoonts" color="paragraph">
+        Pareto was like having a full-time employee without having to hire somebody.
+        That’s how I would explain it. An on-call, on-demand full-time employee.
+      </Quote>
+    </Page.Section>
+  </Page>
+)

package/src/stories/b/QuestionDropdown.stories.jsx

@@ -13,11 +13,14 @@ export default {
     // storyfn => <div className="">{ storyfn() }</div>,
   ],
   argTypes:{
+    question     :{ control: 'text' },
+    isFAQSchema  :{ control: 'boolean' },
+    defaultIsOpen:{ control: 'boolean' },
   },
 }
 
-export const Base = () => (
-  <QuestionDropdown question="What is Pareto?">
+const Template = (args) => (
+  <QuestionDropdown question="What is Pareto?" {...args}>
     <p>
       Pareto is a female-owned and operated virtual workforce helping startups and
       small businesses automate day-to-day data processing, sales outreach,
@@ -31,32 +34,19 @@ export const Base = () => (
   </QuestionDropdown>
 )
 
-export const withSEO = () => (
-  <QuestionDropdown question="What is Pareto?" isFAQSchema>
-    <p>
-      Pareto is a female-owned and operated virtual workforce helping startups and
-      small businesses automate day-to-day data processing, sales outreach,
-      product research, and admin operations. We combine the quality and care of
-      real people with the efficiency of machine automation to get the job done.
-    </p>
-    <p>
-      At the same time, we’re a WBENC-certified business,
-      empowering women in developing countries with meaningful economic opportunities.
-    </p>
-  </QuestionDropdown>
-)
+export const Base = Template.bind({})
+Base.args = {
+  question:'What is Pareto?',
+}
 
-export const OpenQuestionDropdown = () => (
-  <QuestionDropdown question="What is Pareto?" defaultIsOpen>
-    <p>
-      Pareto is a female-owned and operated virtual workforce helping startups and
-      small businesses automate day-to-day data processing, sales outreach,
-      product research, and admin operations. We combine the quality and care of
-      real people with the efficiency of machine automation to get the job done.
-    </p>
-    <p>
-      At the same time, we’re a WBENC-certified business,
-      empowering women in developing countries with meaningful economic opportunities.
-    </p>
-  </QuestionDropdown>
-)
+export const withSEO = Template.bind({})
+withSEO.args = {
+  ...Base.args,
+  isFAQSchema:true,
+}
+
+export const OpenQuestionDropdown = Template.bind({})
+OpenQuestionDropdown.args = {
+  ...Base.args,
+  defaultIsOpen:true,
+}

package/src/stories/b/SocialMediaButton.stories.jsx

@@ -1,7 +1,7 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react'
 
-import { SiteContextProvider, SocialMediaButton } from 'ui'
+import { AppContextProvider, SocialMediaButton } from 'ui'
 
 export default {
   title        :'b/SocialMediaButton',
@@ -13,61 +13,44 @@ export default {
     // storyfn => <div className="">{ storyfn() }</div>,
   ],
   argTypes:{
-    backgroundColor:{ control: 'color' },
+    // backgroundColor:{ control: 'color' },
+    isTransparent:{ control: 'boolean' },
   },
 }
 
-export const Base = () => (
-  <SiteContextProvider
-    config={{
-      SITE:{
-        NAME         :'Pareto',
-        CANONICAL    :'https://hellopareto.com',
-        SUPPORT_EMAIL:'support@hellopareto.com',
-        TITLE_SUFFIX :'| Pareto',
-      },
-      SOCIAL:{
-        FACEBOOK :'https://www.facebook.com/hellopareto',
-        INSTAGRAM:'https://www.instagram.com/hellopareto',
-        TWITTER  :'https://www.twitter.com/hellopareto',
-        LINKEDIN :'https://www.linkedin.com/company/hellopareto',
-      },
-      EXTRA:{
-        SURVEY:'https://survey.hellopareto.com',
-      },
-    }}
-
-  >
-    <SocialMediaButton type="facebook" />
-    <SocialMediaButton type="twitter" />
-    <SocialMediaButton type="instagram" />
-    <SocialMediaButton type="linkedin" />
-  </SiteContextProvider>
+// eslint-disable-next-line react/prop-types
+const Template = ({ isTransparent = false, ...rest }) => (
+  <AppContextProvider {...rest}>
+    <SocialMediaButton type="facebook" isTransparent={isTransparent} />
+    <SocialMediaButton type="twitter" isTransparent={isTransparent} />
+    <SocialMediaButton type="instagram" isTransparent={isTransparent} />
+    <SocialMediaButton type="linkedin" isTransparent={isTransparent} />
+  </AppContextProvider>
 )
 
-export const Transparent = () => (
-  <SiteContextProvider
-    config={{
-      SITE:{
-        NAME         :'Pareto',
-        CANONICAL    :'https://hellopareto.com',
-        SUPPORT_EMAIL:'support@hellopareto.com',
-        TITLE_SUFFIX :'| Pareto',
-      },
-      SOCIAL:{
-        FACEBOOK :'https://www.facebook.com/hellopareto',
-        INSTAGRAM:'https://www.instagram.com/hellopareto',
-        TWITTER  :'https://www.twitter.com/hellopareto',
-      },
-      EXTRA:{
-        SURVEY:'https://survey.hellopareto.com',
-      },
-    }}
+export const Base = Template.bind({})
+Base.args = {
+  config:{
+    SITE:{
+      NAME         :'Pareto',
+      CANONICAL    :'https://hellopareto.com',
+      SUPPORT_EMAIL:'support@hellopareto.com',
+      TITLE_SUFFIX :'| Pareto',
+    },
+    SOCIAL:{
+      FACEBOOK :'https://www.facebook.com/hellopareto',
+      INSTAGRAM:'https://www.instagram.com/hellopareto',
+      TWITTER  :'https://www.twitter.com/hellopareto',
+      LINKEDIN :'https://www.linkedin.com/company/hellopareto',
+    },
+    EXTRA:{
+      SURVEY:'https://survey.hellopareto.com',
+    },
+  },
+}
 
-  >
-    <SocialMediaButton type="facebook" isTransparent />
-    <SocialMediaButton type="twitter" isTransparent />
-    <SocialMediaButton type="instagram" isTransparent />
-    <SocialMediaButton type="linkedin" isTransparent />
-  </SiteContextProvider>
-)
+export const Transparent = Template.bind({})
+Transparent.args = {
+  ...Base.args,
+  isTransparent:true,
+}

package/src/stories/b/ThemeSelector.stories.jsx

@@ -1,7 +1,7 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react'
 
-import { useSite, SiteContextProvider, ThemeSelector } from 'ui'
+import { useApp, AppContextProvider, ThemeSelector } from 'ui'
 
 export default {
   title        :'b/ThemeSelector',
@@ -11,15 +11,15 @@ export default {
   },
   decorators:[
     (storyfn) => (
-      <SiteContextProvider config={{
-        SITE:{
+      <AppContextProvider config={{
+        APP:{
           NAME     :'name of my site',
           CANONICAL:'https://mysite.com',
         },
       }}
       >
         { storyfn() }
-      </SiteContextProvider>
+      </AppContextProvider>
     ),
   ],
   argTypes:{
@@ -29,7 +29,7 @@ export default {
 
 export const Base = () => {
   const ChildCo = () => {
-    const { userTheme } = useSite()
+    const { userTheme } = useApp()
     return (
       <div
         className={

package/src/stories/b/Title.stories.jsx

@@ -13,25 +13,23 @@ export default {
     // storyfn => <div className="">{ storyfn() }</div>,
   ],
   argTypes:{
-    // heading :{ control: 'string' },
-    // subtitle:{ control: 'string' },
+    heading :{ control: 'text' },
+    subtitle:{ control: 'text' },
   },
 }
 
-export const Base = (props) => (
-  <Title
-    heading="Test"
-    {...props}
-  />
-)
+const Template = (args) => <Title {...args} />
 
-export const WithSubtitle = (props) => (
-  <Title
-    heading="Test"
-    subtitle="This will appear as the subtitle"
-    {...props}
-  />
-)
+export const Base = Template.bind({})
+Base.args = {
+  heading:'Test',
+}
+
+export const WithSubtitle = Template.bind({})
+WithSubtitle.args = {
+  heading :'Test',
+  subtitle:'This will appear as the subtitle',
+}
 
 export const Sizes = (props) => (
   ['h1', 'h2', 'h3', 'h4', 'h5'].map((size) => (

package/src/stories/c/ContentSlides.stories.jsx

@@ -3,11 +3,12 @@ import * as React from 'react'
 
 import {
   ContentSlides,
-  SiteContextProvider,
+  AppContextProvider,
+  Shapes,
   useContentSlides,
   Title,
   Logo,
-  useSite,
+  useApp,
 } from 'ui'
 
 // import Router from 'stories/utils/Router'
@@ -25,25 +26,29 @@ export default {
   decorators:[
     (storyfn) => <Router>{ storyfn() }</Router>,
     (storyfn) => (
-      <SiteContextProvider config={{
-        SITE:{
+      <AppContextProvider config={{
+        APP:{
           NAME     :'name of my site',
           CANONICAL:'https://mysite.com',
         },
       }}
       >
         { storyfn() }
-      </SiteContextProvider>
+      </AppContextProvider>
     ),
   ],
   argTypes:{
-    backgroundColor:{ control: 'color' },
+    // backgroundColor:{ control: 'color' },
+    isSimple          :{ control: 'boolean' },
+    hasBackgroundShape:{ control: 'boolean' },
   },
 }
 
-export const Base = () => {
+const Template = (args) => {
   const Main = () => {
-    const { userTheme } = useSite()
+    const { isSimple, hasBackgroundShape } = args || {}
+    const { userTheme } = useApp()
+    const { isLastStep } = useContentSlides()
 
     const steps = [
       {
@@ -74,13 +79,24 @@ export const Base = () => {
 
     return (
       <div className={`ui-${userTheme}`} style={{ height: '100%' }}>
-        <ContentSlides className="y-background1" steps={steps}>
+        <ContentSlides className="y-background1 b-dark-y" steps={steps} simple={isSimple}>
+          {!isSimple && (
           <ContentSlides.Sidebar
             header={(
               <Logo color="paragraph" />
             )}
           />
-          <ContentSlides.HorizontalMenu />
+          )}
+          {hasBackgroundShape && (
+          <Shapes
+            className="y-background4 b-light-y"
+            height="65em"
+            verticalAlign="center"
+            horizontalAlign="flex-start"
+            shape="spiral"
+          />
+          )}
+          <ContentSlides.HorizontalMenu hideBackIcon={isLastStep} />
           <main>
             <ContentSlides.Slide
               index={0}
@@ -202,147 +218,15 @@ export const Base = () => {
   )
 }
 
-export const Simple = () => {
-  const steps = [
-    {
-      id      :'welcome',
-      title   :'Welcome',
-      progress:40,
-      location:'welcome',
-    },
-    {
-      id      :'plan',
-      title   :'Choose your plan',
-      progress:60,
-      location:'select-plan',
-    },
-    {
-      id      :'details',
-      title   :'Personal details',
-      progress:70,
-      location:'personal-details',
-    },
-    {
-      id      :'payment',
-      title   :'Payment',
-      progress:90,
-      location:'payment',
-    },
-  ]
-
-  const Main = () => {
-    const { isLastStep } = useContentSlides()
+export const Base = Template.bind({})
 
-    return (
-      <>
-        <ContentSlides.HorizontalMenu hideBackIcon={isLastStep} />
-        {' '}
-        <main>
-          <ContentSlides.Slide
-            index={0}
-          >
-            <Title
-              heading="Welcome"
-              headingAs="h1"
-              headingClassName="small"
-              subtitle="Welcome to this site. We hope you will have an amazing experience here."
-            />
-            <ContentSlides.Navigator />
-          </ContentSlides.Slide
-      >
-          <ContentSlides.Slide
-            index={1}
-          >
-            <Title
-              heading="Part 2"
-              headingAs="h1"
-              headingClassName="small"
-              subtitle="Welcome to this site. We hope you will have an amazing experience here."
-            />
-            <p>
-              In ut sollicitudin elit. Maecenas tempor ex aliquet enim egestas,
-              non sollicitudin mi tempor. Pellentesque fermentum, massa in cursus faucibus,
-              enim tortor fringilla ligula, sit amet tincidunt neque orci et tellus.
-              Nam dignissim tristique justo. Cras nulla sem, dictum pellentesque libero eget,
-              porta placerat leo.
-              Donec scelerisque enim risus, in pharetra purus fringilla eu.
-              Cras placerat ac enim viverra rhoncus.
-              Cras sagittis euismod orci eget aliquam. Nulla et mi non enim aliquam consequat.
-              Cras volutpat porta convallis. Mauris ullamcorper vitae sapien ac rhoncus.
-              Nullam vel porttitor mi, ut vestibulum arcu.
-              {' '}
-            </p>
-            <p>
-              In ut sollicitudin elit. Maecenas tempor ex aliquet enim egestas,
-              non sollicitudin mi tempor. Pellentesque fermentum, massa in cursus faucibus,
-              enim tortor fringilla ligula, sit amet tincidunt neque orci et tellus.
-              Nam dignissim tristique justo. Cras nulla sem, dictum pellentesque libero eget,
-              porta placerat leo.
-              Donec scelerisque enim risus, in pharetra purus fringilla eu.
-              Cras placerat ac enim viverra rhoncus.
-              Cras sagittis euismod orci eget aliquam. Nulla et mi non enim aliquam consequat.
-              Cras volutpat porta convallis. Mauris ullamcorper vitae sapien ac rhoncus.
-              Nullam vel porttitor mi, ut vestibulum arcu.
-              {' '}
-            </p>
-            <p>
-              In ut sollicitudin elit. Maecenas tempor ex aliquet enim egestas,
-              non sollicitudin mi tempor. Pellentesque fermentum, massa in cursus faucibus,
-              enim tortor fringilla ligula, sit amet tincidunt neque orci et tellus.
-              Nam dignissim tristique justo. Cras nulla sem, dictum pellentesque libero eget,
-              porta placerat leo.
-              Donec scelerisque enim risus, in pharetra purus fringilla eu.
-              Cras placerat ac enim viverra rhoncus.
-              Cras sagittis euismod orci eget aliquam. Nulla et mi non enim aliquam consequat.
-              Cras volutpat porta convallis. Mauris ullamcorper vitae sapien ac rhoncus.
-              Nullam vel porttitor mi, ut vestibulum arcu.
-              {' '}
-            </p>
-            <p>
-              In ut sollicitudin elit. Maecenas tempor ex aliquet enim egestas,
-              non sollicitudin mi tempor. Pellentesque fermentum, massa in cursus faucibus,
-              enim tortor fringilla ligula, sit amet tincidunt neque orci et tellus.
-              Nam dignissim tristique justo. Cras nulla sem, dictum pellentesque libero eget,
-              porta placerat leo.
-              Donec scelerisque enim risus, in pharetra purus fringilla eu.
-              Cras placerat ac enim viverra rhoncus.
-              Cras sagittis euismod orci eget aliquam. Nulla et mi non enim aliquam consequat.
-              Cras volutpat porta convallis. Mauris ullamcorper vitae sapien ac rhoncus.
-              Nullam vel porttitor mi, ut vestibulum arcu.
-              {' '}
-            </p>
+export const Simple = Template.bind({})
+Simple.args = {
+  isSimple:true,
+}
 
-            <ContentSlides.Navigator />
-          </ContentSlides.Slide>
-          <ContentSlides.Slide
-            index={2}
-          >
-            <Title
-              heading="Part 3"
-              headingAs="h1"
-              headingClassName="small"
-              subtitle="Welcome to this site. We hope you will have an amazing experience here."
-            />
-            <ContentSlides.Navigator />
-          </ContentSlides.Slide>
-          <ContentSlides.Slide
-            index={3}
-          >
-            <Title
-              heading="Part 4"
-              headingAs="h1"
-              headingClassName="small"
-              subtitle="Welcome to this site. We hope you will have an amazing experience here."
-            />
-            <ContentSlides.Navigator />
-          </ContentSlides.Slide>
-        </main>
-      </>
-    )
-  }
-  return (
-    <ContentSlides className="y-background1" steps={steps} simple>
-      <Main />
-    </ContentSlides>
-  )
+export const WithBackgroundShape = Template.bind({})
+WithBackgroundShape.args = {
+  ...Simple.args,
+  hasBackgroundShape:true,
 }

package/src/stories/c/Modal.stories.jsx

@@ -0,0 +1,67 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { useState } from 'react'
+
+import { Button, Modal } from 'ui'
+
+import { ALL_COLORS } from 'stories/colors'
+
+export default {
+  title        :'c/Modal',
+  component    :Modal,
+  subcomponents:{
+    // Item:ModalButton.Item
+  },
+  decorators:[
+    // (storyfn) => <ModalContextProvider>{storyfn()}</ModalContextProvider>,
+  ],
+  argTypes:{
+    children:{ control: { type: 'text' } },
+    color   :{ control: { type: 'select', options: ALL_COLORS } },
+    title   :{ control: { type: 'text' } },
+  },
+}
+
+const Template = (args) => {
+  const { children } = args
+
+  return (
+    <Modal {...args}>
+      {children}
+    </Modal>
+  )
+}
+
+const FunctionalTemplate = (args) => {
+  const { children } = args
+  const [isOpen, setOpen] = useState(false)
+
+  return (
+    <>
+      <Button onClick={() => setOpen(!isOpen)} color="anchor">
+        Click to open modal
+      </Button>
+      {isOpen && (
+        <Modal {...args} close={() => setOpen(false)}>
+          {children}
+        </Modal>
+      )}
+    </>
+  )
+}
+
+export const Base = Template.bind({})
+Base.args = {
+  children:<div>This is a modal.</div>,
+  color   :'anchor',
+  title   :'Modal Title',
+  close   :() => console.log('You clicked the close button!'),
+}
+
+export const FunctionalModal = FunctionalTemplate.bind({})
+FunctionalModal.args = {
+  color   :'anchor',
+  title   :'Modal Title',
+  children:<div>This is a modal.</div>,
+}

package/src/stories/c/Shortener.stories.jsx

@@ -13,16 +13,22 @@ export default {
     // storyfn => <div className="">{ storyfn() }</div>,
   ],
   argTypes:{
-    backgroundColor:{ control: 'color' },
+    // backgroundColor:{ control: 'color' },
+    // limit:{ control: 'number' },
   },
 }
 
-export const Base = () => (
+const Template = (args) => (
   <Shortener
-    limit={10}
     style={{ maxWidth: '300px' }}
+    {...args}
   >
     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
     incididunt ut labore et dolore magna aliqua.
   </Shortener>
 )
+
+export const Base = Template.bind({})
+Base.args = {
+  limit:10,
+}