feature: Add bookmark icons (#191)

* Add bookmark icons * Storyshots * bump version
5afe · Mar 10, 2022 · 918a93f · 918a93f
1 parent c678149
commit 918a93f
Show file tree

Hide file tree

Showing 24 changed files with 419 additions and 270 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@gnosis.pm/safe-react-components",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "description": "Gnosis UI components",
   "main": "dist/index.min.js",
   "typings": "dist/index.d.ts",

diff --git a/src/dataDisplay/Icon/icon.stories.tsx b/src/dataDisplay/Icon/icon.stories.tsx
@@ -45,6 +45,8 @@ export const Icons = (): React.ReactElement => {
     'arrowLeft',
     'assets',
     'awaitingConfirmations',
+    'bookmark',
+    'bookmarkFilled',
     'camera',
     'chain',
     'check',

diff --git a/src/dataDisplay/Icon/images/bookmark.tsx b/src/dataDisplay/Icon/images/bookmark.tsx
@@ -0,0 +1,40 @@
+import React from 'react';
+
+export default {
+  sm: (
+    <svg
+      height="16"
+      width="12"
+      viewBox="0 0 12 12"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg">
+      <g fill="none" fillRule="evenodd">
+        <path
+          className="icon-stroke"
+          d="M9 11L5 8.22222L1 11V2.11111C1 1.81643 1.12041 1.53381 1.33474 1.32544C1.54906 1.11706 1.83975 1 2.14286 1H7.85714C8.16025 1 8.45094 1.11706 8.66527 1.32544C8.87959 1.53381 9 1.81643 9 2.11111V11Z"
+          strokeWidth="1"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+    </svg>
+  ),
+  md: (
+    <svg
+      height="24"
+      width="20"
+      viewBox="0 0 12 12"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg">
+      <g fill="none" fillRule="evenodd">
+        <path
+          className="icon-stroke"
+          d="M9 11L5 8.22222L1 11V2.11111C1 1.81643 1.12041 1.53381 1.33474 1.32544C1.54906 1.11706 1.83975 1 2.14286 1H7.85714C8.16025 1 8.45094 1.11706 8.66527 1.32544C8.87959 1.53381 9 1.81643 9 2.11111V11Z"
+          strokeWidth="1"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+    </svg>
+  ),
+};
diff --git a/src/dataDisplay/Icon/images/bookmarkFilled.tsx b/src/dataDisplay/Icon/images/bookmarkFilled.tsx
@@ -0,0 +1,40 @@
+import React from 'react';
+
+export default {
+  sm: (
+    <svg
+      height="16"
+      width="12"
+      viewBox="0 0 12 12"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg">
+      <g fill="none" fillRule="evenodd">
+        <path
+          className="icon-color icon-stroke"
+          d="M9 11L5 8.22222L1 11V2.11111C1 1.81643 1.12041 1.53381 1.33474 1.32544C1.54906 1.11706 1.83975 1 2.14286 1H7.85714C8.16025 1 8.45094 1.11706 8.66527 1.32544C8.87959 1.53381 9 1.81643 9 2.11111V11Z"
+          strokeWidth="1"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+    </svg>
+  ),
+  md: (
+    <svg
+      height="24"
+      width="20"
+      viewBox="0 0 12 12"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg">
+      <g fill="none" fillRule="evenodd">
+        <path
+          className="icon-color icon-stroke"
+          d="M9 11L5 8.22222L1 11V2.11111C1 1.81643 1.12041 1.53381 1.33474 1.32544C1.54906 1.11706 1.83975 1 2.14286 1H7.85714C8.16025 1 8.45094 1.11706 8.66527 1.32544C8.87959 1.53381 9 1.81643 9 2.11111V11Z"
+          strokeWidth="1"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+    </svg>
+  ),
+};
diff --git a/src/dataDisplay/Icon/index.tsx b/src/dataDisplay/Icon/index.tsx
@@ -15,6 +15,8 @@ import arrowDown from './images/arrowDown';
 import arrowLeft from './images/arrowLeft';
 import assets from './images/assets';
 import awaitingConfirmations from './images/awaitingConfirmations';
+import bookmark from './images/bookmark';
+import bookmarkFilled from './images/bookmarkFilled';
 import camera from './images/camera';
 import chain from './images/chain';
 import check from './images/check';
@@ -88,6 +90,11 @@ const StyledIcon = styled.span<{ color?: ThemeColors }>`
     fill: ${({ theme, color }) =>
       color ? theme.colors[color] : theme.colors.icon};
   }
+
+  .icon-stroke {
+    stroke: ${({ theme, color }) =>
+      color ? theme.colors[color] : theme.colors.icon};
+  }
 `;
 
 const icons = {
@@ -103,6 +110,8 @@ const icons = {
   arrowRight,
   assets,
   awaitingConfirmations,
+  bookmark,
+  bookmarkFilled,
   camera,
   chain,
   check,

diff --git a/tests/dataDisplay/Accordion/__snapshots__/accordion.stories.storyshot b/tests/dataDisplay/Accordion/__snapshots__/accordion.stories.storyshot
@@ -41,7 +41,7 @@ exports[`Storyshots Data Display/Accordion Compact Accordion 1`] = `
           className="sc-egiyK cgERpw"
         >
           <span
-            className="sc-iqseJM iJclAE"
+            className="sc-iqseJM drawdo"
           >
             <svg
               height="16"
@@ -171,7 +171,7 @@ exports[`Storyshots Data Display/Accordion Compact Accordion 1`] = `
           className="sc-egiyK cgERpw"
         >
           <span
-            className="sc-iqseJM iJclAE"
+            className="sc-iqseJM drawdo"
           >
             <svg
               height="16"
@@ -301,7 +301,7 @@ exports[`Storyshots Data Display/Accordion Compact Accordion 1`] = `
           className="sc-egiyK cgERpw"
         >
           <span
-            className="sc-iqseJM iJclAE"
+            className="sc-iqseJM drawdo"
           >
             <svg
               height="16"
@@ -438,7 +438,7 @@ exports[`Storyshots Data Display/Accordion Simple Accordion 1`] = `
           className="sc-egiyK cgERpw"
         >
           <span
-            className="sc-iqseJM iJclAE"
+            className="sc-iqseJM drawdo"
           >
             <svg
               height="16"
@@ -568,7 +568,7 @@ exports[`Storyshots Data Display/Accordion Simple Accordion 1`] = `
           className="sc-egiyK cgERpw"
         >
           <span
-            className="sc-iqseJM iJclAE"
+            className="sc-iqseJM drawdo"
           >
             <svg
               height="16"
@@ -698,7 +698,7 @@ exports[`Storyshots Data Display/Accordion Simple Accordion 1`] = `
           className="sc-egiyK cgERpw"
         >
           <span
-            className="sc-iqseJM iJclAE"
+            className="sc-iqseJM drawdo"
           >
             <svg
               height="16"

diff --git a/tests/dataDisplay/Card/__snapshots__/card.stories.storyshot b/tests/dataDisplay/Card/__snapshots__/card.stories.storyshot
@@ -45,7 +45,7 @@ exports[`Storyshots Data Display/Card Card Disabled 1`] = `
       className="MuiButton-label"
     >
       <span
-        className="sc-iqseJM iJclAE sc-bBHxTw jBIXxL"
+        className="sc-iqseJM drawdo sc-bBHxTw jBIXxL"
       >
         <svg
           height="16"
@@ -125,7 +125,7 @@ exports[`Storyshots Data Display/Card Simple Card 1`] = `
       className="MuiButton-label"
     >
       <span
-        className="sc-iqseJM iJclAE sc-bBHxTw jBIXxL"
+        className="sc-iqseJM drawdo sc-bBHxTw jBIXxL"
       >
         <svg
           height="16"

diff --git a/tests/dataDisplay/Dot/__snapshots__/dot.stories.storyshot b/tests/dataDisplay/Dot/__snapshots__/dot.stories.storyshot
@@ -6,7 +6,7 @@ exports[`Storyshots Data Display/Dot Dot With Icon 1`] = `
   color="rinkeby"
 >
   <span
-    className="sc-iqseJM lvDyr"
+    className="sc-iqseJM kNdvIY"
     color="white"
   >
     <svg