@pareto-engineering/design-system 2.0.0-alpha.6 → 2.0.0-alpha.60

package/src/local.scss

@@ -5,10 +5,12 @@
   --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/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/helpers.js

@@ -37,6 +37,21 @@ const charList = [' ', '!', '"', '#', '$', '%', '&', '\'', '(', ')', '*', '+', '
   '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,
@@ -45,4 +60,5 @@ export {
   smMap,
   monochromeMap,
   charList,
+  spritesMap,
 }

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/{SiteContext.stories.jsx → AppContext.stories.jsx}

@@ -1,13 +1,13 @@
 /* @pareto-engineering/generator-front 1.0.0 */
 import * as React from 'react'
 
-import { SiteContextProvider } from 'ui'
+import { AppContextProvider } from 'ui'
 
 export default {
-  title        :'a/SiteContext',
-  component    :SiteContextProvider,
+  title        :'a/AppContext',
+  component    :AppContextProvider,
   subcomponents:{
-    // Item:SiteContext.Item
+    // Item:AppContext.Item
   },
   decorators:[
     // storyfn => <div className="">{ storyfn() }</div>,
@@ -18,9 +18,9 @@ export default {
 }
 
 export const Base = () => (
-  <SiteContextProvider
+  <AppContextProvider
     config={{
-      SITE:{
+      APP:{
         NAME         :'Pareto',
         CANONICAL    :'https://hellopareto.com',
         SUPPORT_EMAIL:'support@hellopareto.com',
@@ -37,6 +37,6 @@ export const Base = () => (
     }}
 
   >
-    Sample SiteContext
-  </SiteContextProvider>
+    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',
+}