@pareto-engineering/design-system 2.0.0-alpha.30 → 2.0.0-alpha.34

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,
 }