@pareto-engineering/design-system 2.0.0-alpha.4 → 2.0.0-alpha.40

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

@@ -4,6 +4,7 @@ import * as React from 'react'
 import {
   ContentSlides,
   SiteContextProvider,
+  Shapes,
   useContentSlides,
   Title,
   Logo,
@@ -74,7 +75,7 @@ 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}>
           <ContentSlides.Sidebar
             header={(
               <Logo color="paragraph" />
@@ -341,7 +342,158 @@ export const Simple = () => {
     )
   }
   return (
-    <ContentSlides className="y-background1" steps={steps} simple>
+    <ContentSlides className="y-background1 b-dark-y" steps={steps} simple>
+      <Main />
+    </ContentSlides>
+  )
+}
+
+export const WithBackgroundShape = () => {
+  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()
+
+    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>
+
+            <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-background4 b-light-y" steps={steps} simple>
+      <Shapes
+        height="65em"
+        verticalAlign="center"
+        horizontalAlign="flex-start"
+        shape="spiral"
+      />
       <Main />
     </ContentSlides>
   )

package/src/stories/c/SocialMediaShareButton.stories.jsx

@@ -0,0 +1,25 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+import { SocialMediaShareButton } from 'ui'
+import Router from '../utils/Router'
+
+export default {
+  title        :'c/SocialMediaShareButton',
+  component    :SocialMediaShareButton,
+  subcomponents:{
+    // Item:SocialMediaShareButton.Item
+  },
+  decorators:[
+    (storyfn) => <Router>{storyfn()}</Router>,
+  ],
+  argTypes:{
+    backgroundColor:{ control: 'color' },
+  },
+}
+
+export const Base = () => (
+  <div>
+    <SocialMediaShareButton type="facebook" />
+    <SocialMediaShareButton type="twitter" />
+  </div>
+)

package/src/stories/f/RatingsInput.stories.jsx

@@ -29,14 +29,14 @@ export default {
 
 export const Base = () => (
   <>
-    <RatingsInput ratingCount={5} name="ratings" />
+    <RatingsInput ratingCount={5} name="ratings" label="Your Rating" />
     <FormDebugger />
   </>
 )
 
 export const Numbers = () => (
   <>
-    <RatingsInput ratingCount={10} name="ratings" showRatingValue />
+    <RatingsInput ratingCount={10} name="ratings" showRatingValue label="Your Rating" />
     <FormDebugger />
   </>
 )
@@ -44,6 +44,7 @@ export const Numbers = () => (
 export const Labels = () => (
   <>
     <RatingsInput
+      label="Your Rating"
       labelMax="very satisfied."
       labelMin="not satisfied."
       ratingCount={10}

package/src/stories/f/SelectInput.stories.jsx

@@ -13,10 +13,9 @@ export default {
   decorators:[
     (storyfn) => (
       <Formik
-        initialValues={{ workType: 'Work' }}
+        initialValues={{ workType: '' }}
       >
         <Form>
-
           { storyfn() }
         </Form>
       </Formik>
@@ -32,18 +31,46 @@ export const Base = () => (
     <SelectInput
       name="workType"
       label="Work Type"
-      options={['Work', 'Managing', 'Training']}
+      options={[{ value: '', label: 'Select an option', disabled: true }, 'Work', 'Managing', 'Training']}
     />
     <FormDebugger />
   </>
 )
 
+export const RequiredSelect = () => {
+  const requiredInput = (inputValue) => {
+    let error = ''
+
+    if (!inputValue || !inputValue?.length === 0) {
+      error = 'This information is required'
+    }
+    return error
+  }
+
+  return (
+    <>
+      <SelectInput
+        validate={requiredInput}
+        name="activity"
+        label="Activity Type"
+        options={[
+          { value: '', label: 'Select an option', disabled: true },
+          { value: 'review', label: 'Review' },
+          { value: 'Approve', label: 'Approve' },
+        ]}
+      />
+      <FormDebugger />
+    </>
+  )
+}
+
 export const Objects = () => (
   <>
     <SelectInput
       name="workType"
       label="Work Type"
       options={[
+        { value: '', label: 'Select an option', disabled: true },
         { value: '20th Aug 2020 to 19th Sept, 2020', label: '20th Aug 2020 to 19th Sept, 2020' },
         { value: '20th Sept 2020 to 19th Oct, 2020', label: '20th Sept 2020 to 19th Oct, 2020' },
       ]}
@@ -57,7 +84,9 @@ export const StringAndObjects = () => (
     <SelectInput
       name="workType"
       label="Work Type"
-      options={['Work', 'Managing', 'Training',
+      options={[
+        { value: '', label: 'Select an option', disabled: true },
+        'Work', 'Managing', 'Training',
         { value: '20th Aug 2020 to 19th Sept, 2020', label: '20th Aug 2020 to 19th Sept, 2020' },
         { value: '20th Sept 2020 to 19th Oct, 2020', label: '20th Sept 2020 to 19th Oct, 2020' },
       ]}
@@ -70,7 +99,9 @@ export const DisabledSelectInput = () => (
     <SelectInput
       name="workType"
       label="Work Type"
-      options={['Work', 'Managing', 'Training',
+      options={[
+        { value: '', label: 'Select an option', disabled: true },
+        'Work', 'Managing', 'Training',
         { value: '20th Aug 2020 to 19th Sept, 2020', label: '20th Aug 2020 to 19th Sept, 2020' },
         { value: '20th Sept 2020 to 19th Oct, 2020', label: '20th Sept 2020 to 19th Oct, 2020' },
       ]}

package/src/stories/f/TextInput.stories.jsx

@@ -41,7 +41,7 @@ export const Base = () => {
     return errorMessage
   }
   return (
-    <div className="y-background1 b-dark-y u2 pb-u">
+    <div className=" u2 pb-u">
       <TextInput
         name="firstName"
         label="What's your first name ?"
@@ -52,8 +52,19 @@ export const Base = () => {
   )
 }
 
-export const DisabledTextInput = () => (
-  <div className="y-background1 b-dark-y u2 pb-u">
+export const Placeholder = () => (
+  <div className="u2 pb-u">
+    <TextInput
+      name="firstName"
+      label="What's your first name ?"
+      placeholder="First Name"
+    />
+    <FormDebugger />
+  </div>
+)
+
+export const Disabled = () => (
+  <div className="u2 pb-u">
     <TextInput
       name="firstName"
       label="What's your first name ?"
@@ -63,7 +74,7 @@ export const DisabledTextInput = () => (
 )
 
 export const DateTime = () => (
-  <div className="y-background1 b-dark-y">
+  <div>
     <TextInput
       name="date"
       label="Select date"

package/src/stories/f/TextareaInput.stories.jsx

@@ -14,7 +14,7 @@ export default {
   decorators:[
     (storyfn) => (
       <Formik
-        initialValues={{ feedBack: '' }}
+        initialValues={{ feedback: '' }}
       >
         <Form>
 
@@ -29,18 +29,54 @@ export default {
 }
 
 export const Base = () => (
-  <div className="y-background1 b-dark-y">
+  <div>
     <TextareaInput
-      name="feedBack"
+      name="feedback"
       label="What can we improve on?"
     />
     <FormDebugger />
   </div>
 )
-export const DisabledTextareaInput = () => (
-  <div className="y-background1 b-dark-y">
+
+export const Placeholder = () => (
+  <div>
+    <TextareaInput
+      name="feedback"
+      label="What can we improve on?"
+      placeholder="Type your feedback here..."
+    />
+    <FormDebugger />
+  </div>
+)
+
+export const Validation = () => {
+  const validate = (value) => {
+    let errorMessage = ''
+    const isValid = value.length > 3
+
+    if (!isValid) {
+      errorMessage = 'Value should be greater than 3 characters'
+    }
+    return errorMessage
+  }
+
+  return (
+    <div>
+      <TextareaInput
+        name="feedback"
+        label="What can we improve on?"
+        placeholder="Type your feedback here..."
+        validate={validate}
+      />
+      <FormDebugger />
+    </div>
+  )
+}
+
+export const Disabled = () => (
+  <div>
     <TextareaInput
-      name="feedBack"
+      name="feedback"
       label="What can we improve on?"
       disabled
     />

package/src/ui/a/BackgroundGradient/BackgroundGradient.jsx

@@ -0,0 +1,76 @@
+/* @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 = 'background-gradient'
+
+/**
+ * This is the component description.
+ */
+const BackgroundGradient = ({
+  id,
+  className:userClassName,
+  style,
+  height,
+  // ...otherProps
+}) => {
+  useLayoutEffect(() => {
+    import('./styles.scss')
+  }, [])
+
+  return (
+    <div
+      id={id}
+      className={[
+
+        baseClassName,
+
+        componentClassName,
+        userClassName,
+      ]
+        .filter((e) => e)
+        .join(' ')}
+      style={{
+        ...style,
+        '--gradient-height':height,
+      }}
+    />
+  )
+}
+
+BackgroundGradient.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 height of the shape.
+   */
+  height:PropTypes.string,
+}
+
+BackgroundGradient.defaultProps = {
+  // someProp: false,
+}
+
+export default BackgroundGradient

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

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

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

@@ -0,0 +1,16 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+@use "@pareto-engineering/bem";
+
+.#{bem.$base}.background-gradient{
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: var(--gradient-height);
+    background-image: linear-gradient(var(--background1), var(--y) 25%, var(--light-y) 75%, var(--background1));
+    opacity: .4;
+    z-index: -1;
+}
+
+
+

package/src/ui/a/ContentTree/ContentTree.jsx

@@ -0,0 +1,88 @@
+/* @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 { Tree, useContentTree } from './common'
+
+const baseClassName = styleNames.base
+
+const componentClassName = 'content-tree'
+
+/**
+ * This is the component description.
+ */
+const ContentTree = ({
+  id,
+  className:userClassName,
+  style,
+  target,
+  selectors,
+  // ...otherProps
+}) => {
+  useLayoutEffect(() => {
+    import('./styles.scss')
+  }, [])
+
+  const contentTree = useContentTree(target, selectors)
+
+  return (
+    <div
+      id={id}
+      className={[
+
+        baseClassName,
+
+        componentClassName,
+        userClassName,
+      ]
+        .filter((e) => e)
+        .join(' ')}
+      style={style}
+      // {...otherProps}
+    >
+      <Tree tree={contentTree} />
+    </div>
+  )
+}
+
+ContentTree.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 selectors to use to extract the navigation tree from the content.
+   */
+  selectors:PropTypes.arrayOf(PropTypes.string),
+
+  /**
+   * The reference to the parent element.
+   */
+  target:PropTypes.oneOfType([
+    PropTypes.func,
+    PropTypes.shape({ current: PropTypes.instanceOf(Element) }),
+  ]),
+}
+
+ContentTree.defaultProps = {
+  selectors:['h2', 'h3'],
+}
+
+export default ContentTree