@pareto-engineering/design-system 0.0.1-alpha.9 → 0.0.8-testing-id.0

package/src/local.scss

@@ -1,15 +1,16 @@
 @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap");
 
 :root {
-  --border-radius: .4em;
   --font-default: inter, helvetica, helvetica neue, arial, verdana, sans-serif;
-  --primary-color: #8990b3;
-  --theme-border: 1px solid var(--metadata);
+  --theme-border-style: 1px solid;
+  --theme-border-color: var(--paragraph);
+  --theme-border: var(--theme-border-style) var(--theme-border-color);
+  --default-gap: 1em;
 }
 
-
 html {
   font-family: var(--font-default);
   font-size: 18px;
-}
-
+  font-feature-settings: 'liga' on;
+  scroll-behavior: smooth;
+}

package/src/stories/Introduction.stories.mdx

@@ -1,16 +1,17 @@
-import { Meta } from '@storybook/addon-docs/blocks';
-import Code from './assets/code-brackets.svg';
-import Colors from './assets/colors.svg';
-import Comments from './assets/comments.svg';
-import Direction from './assets/direction.svg';
-import Flow from './assets/flow.svg';
-import Plugin from './assets/plugin.svg';
-import Repo from './assets/repo.svg';
-import StackAlt from './assets/stackalt.svg';
+import { Meta } from "@storybook/addon-docs";
+import Code from "./assets/code-brackets.svg";
+import Colors from "./assets/colors.svg";
+import Comments from "./assets/comments.svg";
+import Direction from "./assets/direction.svg";
+import Flow from "./assets/flow.svg";
+import Plugin from "./assets/plugin.svg";
+import Repo from "./assets/repo.svg";
+import StackAlt from "./assets/stackalt.svg";
 
 <Meta title="Example/Introduction" />
 
-<style>{`
+<style>
+  {`
   .subheading {
     --mediumdark: '#999999';
     font-weight: 900;
@@ -73,7 +74,7 @@ import StackAlt from './assets/stackalt.svg';
     display: block;
     margin-bottom: 2px;
   }
-  
+
   .link-item img {
     height: 40px;
     width: 40px;
@@ -110,9 +111,8 @@ import StackAlt from './assets/stackalt.svg';
     font-size: 12px;
     display: inline-block;
   }
-
-  
-`}</style>
+`}
+</style>
 
 # Welcome to Storybook
 
@@ -126,7 +126,11 @@ We recommend building UIs with a [**component-driven**](https://componentdriven.
 <div className="subheading">Configure</div>
 
 <div className="link-list">
-  <a className="link-item" href="https://storybook.js.org/docs/react/addons/addon-types" target="_blank">
+  <a
+    className="link-item"
+    href="https://storybook.js.org/docs/react/addons/addon-types"
+    target="_blank"
+  >
     <img src={Plugin} alt="plugin" />
     <span>
       <strong>Presets for popular tools</strong>
@@ -178,14 +182,22 @@ We recommend building UIs with a [**component-driven**](https://componentdriven.
       Configure, customize, and extend
     </span>
   </a>
-  <a className="link-item" href="https://www.learnstorybook.com" target="_blank">
+  <a
+    className="link-item"
+    href="https://www.learnstorybook.com"
+    target="_blank"
+  >
     <img src={Direction} alt="direction" />
     <span>
       <strong>In-depth guides</strong>
       Best practices from leading teams
     </span>
   </a>
-  <a className="link-item" href="https://github.com/storybookjs/storybook" target="_blank">
+  <a
+    className="link-item"
+    href="https://github.com/storybookjs/storybook"
+    target="_blank"
+  >
     <img src={Code} alt="code" />
     <span>
       <strong>GitHub project</strong>
@@ -202,6 +214,6 @@ We recommend building UIs with a [**component-driven**](https://componentdriven.
 </div>
 
 <div className="tip-wrapper">
-  <span className="tip">Tip</span>Edit the Markdown in{' '}
+  <span className="tip">Tip</span>Edit the Markdown in{" "}
   <code>src/stories/Introduction.stories.mdx</code>
 </div>

package/src/stories/StyleGuide/Sprites.stories.mdx

@@ -0,0 +1,25 @@
+import { Canvas, Story, Meta } from '@storybook/addon-docs/blocks';
+
+import { SVG } from '../../ui'
+
+import { spritesMap } from './helpers.js'
+
+<Meta title="StyleGuide/Sprites" />
+
+
+# Sprites
+
+<div className="y-paragraph x-main3">
+  <Canvas>
+    { spritesMap.map((item) =>
+      item.targets.map((target) => 
+      <SVG
+        width="200"
+        height="200"
+        sprite={item.sprite}
+        target={target}
+        key={target}
+      />
+    ))}
+  </Canvas>
+</div>

package/src/stories/StyleGuide/colors.stories.mdx

@@ -2,7 +2,6 @@ import { Meta, ColorItem, ColorPalette } from '@storybook/addon-docs/blocks';
 
 import { 
   brandMap, 
-  wheelMap, 
   modalsMap, 
   uiMap ,
   smMap,
@@ -29,15 +28,6 @@ Color are collections of colors that put together, make a UI theme.
      />
    ) }
  </ColorPalette>
- <ColorPalette>
-   {
-     wheelMap.map((e,i) =>
-       <ColorItem
-         key={i}
-         { ...e }
-       />
-     ) }
- </ColorPalette>
  <ColorPalette>
    { modalsMap.map((e,i) =>
      <ColorItem

package/src/stories/StyleGuide/cssClasses.stories.mdx

@@ -0,0 +1,16 @@
+import { Meta} from '@storybook/addon-docs/blocks';
+
+<Meta title="StyleGuide/CSSClasses" />
+
+# CSS Classes
+
+The CSS classes are defined in [@pareto-engineering/styles/src/swatch](https://github.com/HelloPareto/styles/tree/main/src/swatch) and make use of the open source library [@aztlan/swatch](https://github.com/AztlanEngineering/swatch).
+
+## Font Sizes
+
+Color are collections of colors that put together, make a UI theme.
+
+## Padding / Margin
+
+Color are collections of colors that put together, make a UI theme.
+

package/src/stories/StyleGuide/helpers.js

@@ -1,6 +1,6 @@
 import {
   THEME,
-  WHEEL,
+  // WHEEL,
   MODALS,
   UI,
   SM,
@@ -23,18 +23,42 @@ const getColorMap = (prefix, list) => {
 }
 
 const brandMap = getColorMap('colorschemes.light.brand', THEME)
-const wheelMap = getColorMap('colorschemes.light.wheel', WHEEL)
+// const wheelMap = getColorMap('colorschemes.light.wheel', WHEEL)
 const modalsMap = getColorMap('colorschemes.light.modals', MODALS)
 const uiMap = getColorMap('colorschemes.light.ui', UI)
 
 const smMap = getColorMap('palettes.social-media', SM)
 const monochromeMap = getColorMap('palettes.momochrome', MONOCHROME)
 
+const charList = [' ', '!', '"', '#', '$', '%', '&', '\'', '(', ')', '*', '+', ',', '-', '.', '/',
+  '0', '1', '2', '3', '4', '5', '6', '7', '8', '9', ':', ';', '<', '=', '>', '?',
+  '@', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P',
+  'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', '[', '\\', ']', '^', '_', '`',
+  'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't',
+  'u', 'v', 'w', 'x', 'y', 'z', '{', '|', '}', '~']
+
+const spritesMap = [
+  {
+    sprite :'/homepage.sprite.svg',
+    targets:['grow-faster', 'secret-superpower', 'women-led'],
+  },
+  {
+    sprite :'/illustrations.sprite.svg',
+    targets:['building-1', 'building-2', 'building-3', 'building-4', 'building-5', 'woman-1', 'woman-2', 'woman-3', 'man-1', 'man-2', 'man-3'],
+  },
+  {
+    sprite :'/solutions.sprite.svg',
+    targets:['custom-data', 'vetting', 'contact-gen', 'research', 'tracking'],
+  },
+]
+
 export {
   brandMap,
-  wheelMap,
+  // wheelMap,
   modalsMap,
   uiMap,
   smMap,
   monochromeMap,
+  charList,
+  spritesMap,
 }

package/src/stories/StyleGuide/icons.stories.mdx

@@ -0,0 +1,29 @@
+import { Meta, IconGallery, IconItems } from '@storybook/addon-docs/blocks';
+
+import { 
+  charList
+} from './helpers';
+
+<Meta title="StyleGuide/Icons" />
+
+
+# Icons                                                                                                                             
+                                                                                                                                    
+The icons are defined in [@pareto-engineering/assets/fonts/icons.woff](https://github.com/HelloPareto/assets/tree/master/fonts),              
+imported in [@pareto-engineering/styles/src/stylebook.scss](https://github.com/HelloPareto/styles/blob/master/src/stylebook.scss).            
+                                                                                                                                    
+To add more fonts, connect to [glyphter](https://glyphter.com).                                                                     
+                                                                                                                                    
+<div style={{ display:'grid', 'grid-template-columns':'repeat(auto-fill, minmax(100px, 150px))' }}>                                 
+{ charList.map(letter =>                                                                                                          
+<div>                                                                                                                               
+<div style={{ textAlign:'center', padding:'.5em', fontWeight:'bold', outline:'1px solid #DCDCDC', color:'#ACACAC' }}>               
+{ letter }                                                                                                                          
+</div>                                                                                                                              
+<div style={{ outline:'1px solid #DCDCDC', padding:'2em', 'text-align':'center', 'font-family':'icons', 'font-size':'2em' }}>       
+{ letter }                                                                                                                          
+</div>                                                                                                                              
+</div>                                                                                                                              
+) }                                                                                                                                 
+</div>
+

package/src/stories/StyleGuide/typography.stories.mdx

@@ -1,4 +1,4 @@
-import { Typeset, Meta } from '@storybook/addon-docs/blocks';
+import { Typeset, Meta } from "@storybook/addon-docs";
 
 <Meta title="StyleGuide/Typography" />
 
@@ -11,23 +11,14 @@ The fonts are imported in [@pareto-engineering/styles/src/main.scss](https://git
 In css, consume with `font-family:var(--font-heading)`
 
 <Typeset
-  fontSizes={
-    [
-      '-3',
-      '-2',
-      '-1',
-      0,
-      1,
-      2,
-      3,
-      4,
-      5,
-      6,
-    ].map((e) => `calc(var(--s${e}) * 1rem)`)
+  fontSizes={["-3", "-2", "-1", 0, 1, 2, 3, 4, 5, 6].map(
+    (e) => `calc(var(--s${e}) * 1rem)`
+  )}
+  fontWeight={"bold"}
+  sampleText={
+    "Voix ambiguë d'un cœur qui, au zéphyr, préfère les jattes de kiwis"
   }
-  fontWeight={'bold'}
-  sampleText={'Voix ambiguë d\'un cœur qui, au zéphyr, préfère les jattes de kiwis'}
-  fontFamily={ 'var(--font-paragraph)' }
+  fontFamily={"var(--font-paragraph)"}
 />
 
 ## Paragraph (body) font
@@ -35,22 +26,11 @@ In css, consume with `font-family:var(--font-heading)`
 In css, consume with `font-family:var(--font-paragraph)`
 
 <Typeset
-  fontSizes={
-    [
-      '-3',
-      '-2',
-      '-1',
-      0,
-      1,
-      2,
-      3,
-      4,
-      5,
-      6,
-    ].map((e) => `calc(var(--s${e}) * 1rem)`)
+  fontSizes={["-3", "-2", "-1", 0, 1, 2, 3, 4, 5, 6].map(
+    (e) => `calc(var(--s${e}) * 1rem)`
+  )}
+  sampleText={
+    "Voix ambiguë d'un cœur qui, au zéphyr, préfère les jattes de kiwis"
   }
-  //fontWeight={'bold'}
-  sampleText={'Voix ambiguë d\'un cœur qui, au zéphyr, préfère les jattes de kiwis'}
-  fontFamily={ 'var(--font-paragraph)' }
+  fontFamily={"var(--font-paragraph)"}
 />
-

package/src/stories/a/Alert.stories.jsx

@@ -0,0 +1,75 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { Alert } from 'ui'
+
+export default {
+  title        :'a/Alert',
+  component    :Alert,
+  subcomponents:{
+    // Item:Alert.Item
+  },
+  decorators:[
+    // storyfn => <div className="">{ storyfn() }</div>,
+  ],
+  argTypes:{
+    withCloseIcon    :{ control: 'boolean' },
+    primaryPosition  :{ control: 'select', options: ['top', 'bottom', 'center'] },
+    secondaryPosition:{ control: 'select', options: ['left', 'right'] },
+    autoCloseMs      :{ control: 'text' },
+    type             :{ control: 'select', options: ['success', 'warning', 'error'] },
+  },
+}
+
+const Template = (args) => (
+  <Alert {...args}>
+    <div
+      style={{
+        display   :'flex',
+        alignItems:'center',
+      }}
+      className="v1"
+    >
+      <span className="icon mr-v f-icons">g</span>
+      <p>This is the alert content This is the alert content</p>
+    </div>
+  </Alert>
+)
+
+export const Base = Template.bind({})
+Base.args = {
+  type:'error',
+}
+
+export const WithoutCloseIcon = Template.bind({})
+WithoutCloseIcon.args = {
+  ...Base.args,
+  withCloseIcon:false,
+}
+
+export const WithAutoClose = Template.bind({})
+WithAutoClose.args = {
+  ...WithoutCloseIcon.args,
+  withCloseIcon:true,
+  autoCloseMs  :'2000',
+}
+
+export const Centered = Template.bind({})
+Centered.args = {
+  ...Base.args,
+  primaryPosition:'center',
+}
+
+export const TopRight = Template.bind({})
+TopRight.args = {
+  ...Base.args,
+  primaryPosition  :'top',
+  secondaryPosition:'right',
+}
+
+export const BottomLeft = Template.bind({})
+BottomLeft.args = {
+  ...Base.args,
+  primaryPosition  :'bottom',
+  secondaryPosition:'left',
+}

package/src/stories/a/AnimatedCounter.stories.jsx

@@ -0,0 +1,34 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { AnimatedCounter } from 'ui'
+
+export default {
+  title        :'a/AnimatedCounter',
+  component    :AnimatedCounter,
+  subcomponents:{
+    // Item:AnimatedCounter.Item
+  },
+  decorators:[
+    // storyfn => <div className="">{ storyfn() }</div>,
+  ],
+  argTypes:{
+    backgroundColor:{ control: 'color' },
+  },
+}
+
+export const Base = () => (
+  <AnimatedCounter delay={5} number={100.555} after="%" />
+)
+
+export const Before = () => (
+  <AnimatedCounter delay={5} number={100} before="%" />
+)
+
+export const After = () => (
+  <AnimatedCounter delay={5} number={100} after="%" />
+)
+
+export const BeforeAndAfter = () => (
+  <AnimatedCounter delay={5} number={100} before="%" after="+" />
+)

package/src/stories/a/AppContext.stories.jsx

@@ -0,0 +1,42 @@
+/* @pareto-engineering/generator-front 1.0.0 */
+import * as React from 'react'
+
+import { AppContextProvider } from 'ui'
+
+export default {
+  title        :'a/AppContext',
+  component    :AppContextProvider,
+  subcomponents:{
+    // Item:AppContext.Item
+  },
+  decorators:[
+    // storyfn => <div className="">{ storyfn() }</div>,
+  ],
+  argTypes:{
+    // backgroundColor:{ control: 'color' },
+  },
+}
+
+export const Base = () => (
+  <AppContextProvider
+    config={{
+      APP:{
+        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',
+      },
+    }}
+
+  >
+    Sample AppContext
+  </AppContextProvider>
+)

package/src/stories/a/BackgroundGradient.stories.jsx

@@ -0,0 +1,38 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { BackgroundGradient } from 'ui'
+
+export default {
+  title        :'a/BackgroundGradient',
+  component    :BackgroundGradient,
+  subcomponents:{
+    // Item:BackgroundGradient.Item
+  },
+  decorators:[
+    // storyfn => <div className="">{ storyfn() }</div>,
+  ],
+  argTypes:{
+    height:{ control: 'text' },
+    color :{ control: 'text' },
+  },
+}
+
+// eslint-disable-next-line react/prop-types
+const Template = ({ color, ...rest }) => (
+  <div
+    className={`y-${color}`}
+    style={{
+      position:'relative',
+      height  :'700px',
+    }}
+  >
+    <BackgroundGradient {...rest} />
+  </div>
+)
+
+export const Base = Template.bind({})
+Base.args = {
+  height:'50em',
+  color :'background4',
+}