@pareto-engineering/design-system 2.0.0-alpha.5 → 2.0.0-alpha.50

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/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',
+}