feat: [EUDIW-54] Add new pictograms for EUDIW app (#332)

## Short description This PR adds three new pictograms created for the EUDIW app. ## List of changes proposed in this pull request - Added `PictogramFingerprint` - Added `PictogramSmile` - Added `PictogramWalletDoc` ## How to test Use the new pictograms in the `Pictogram` component or run the storybook.
pagopa · Sep 18, 2024 · 408009b · 408009b
1 parent 81e3990
commit 408009b
Show file tree

Hide file tree

Showing 9 changed files with 134 additions and 4 deletions.
diff --git a/scripts/pictograms_timestamp.txt b/scripts/pictograms_timestamp.txt
@@ -1 +1 @@
-2024-07-10T13:20:00.647Z
+2024-09-13T09:57:37.653Z
diff --git a/src/components/pictograms/Pictogram.tsx b/src/components/pictograms/Pictogram.tsx
@@ -95,6 +95,7 @@ import PictogramEmailDotCheck from "./svg/PictogramEmailDotCheck";
 import PictogramEmailDotNotif from "./svg/PictogramEmailDotNotif";
 import PictogramEnded from "./svg/PictogramEnded";
 import PictogramEventClose from "./svg/PictogramEventClose";
+import PictogramFingerprint from "./svg/PictogramFingerprint";
 import PictogramIdea from "./svg/PictogramIdea";
 import PictogramLostConnection from "./svg/PictogramLostConnection";
 import PictogramMessage from "./svg/PictogramMessage";
@@ -106,8 +107,10 @@ import PictogramQrCode from "./svg/PictogramQrCode";
 import PictogramReactivate from "./svg/PictogramReactivate";
 import PictogramSearchLens from "./svg/PictogramSearchLens";
 import PictogramSettings from "./svg/PictogramSettings";
+import PictogramSmile from "./svg/PictogramSmile";
 import PictogramStar from "./svg/PictogramStar";
 import PictogramTiming from "./svg/PictogramTiming";
+import PictogramWalletDoc from "./svg/PictogramWalletDoc";
 import { IOPictogramSizeScale, SVGPictogramProps } from "./types";
 
 export const IOPictograms = {
@@ -169,6 +172,9 @@ export const IOPictograms = {
   comunicationProblem: PictogramComunicationProblem,
   payments: PictogramPayments,
   workInProgress: PictogramWorkInProgress,
+  smile: PictogramSmile,
+  fingerprint: PictogramFingerprint,
+  walletDoc: PictogramWalletDoc,
   // Start Objects Pictogram
   ibanCard: PictogramObjIbanCard,
   followMessage: PictogramObjFollowMessage,
@@ -196,6 +202,7 @@ type PictogramPalette = {
   hands: ColorValue;
   main: ColorValue;
   secondary: ColorValue;
+  tertiary: ColorValue;
 };
 
 export const Pictogram = ({
@@ -223,7 +230,8 @@ export const Pictogram = ({
     () => ({
       hands: IOColors[themeObj["pictogram-hands"]],
       main: IOColors[themeObj["pictogram-tint-main"]],
-      secondary: IOColors[themeObj["pictogram-tint-secondary"]]
+      secondary: IOColors[themeObj["pictogram-tint-secondary"]],
+      tertiary: IOColors[themeObj["pictogram-tint-tertiary"]]
     }),
     [themeObj]
   );
@@ -365,7 +373,8 @@ export const PictogramBleed = ({
     () => ({
       hands: IOColors[themeObj["pictogram-hands"]],
       main: IOColors[themeObj["pictogram-tint-main"]],
-      secondary: IOColors[themeObj["pictogram-tint-secondary"]]
+      secondary: IOColors[themeObj["pictogram-tint-secondary"]],
+      tertiary: IOColors[themeObj["pictogram-tint-tertiary"]]
     }),
     [themeObj]
   );

diff --git a/src/components/pictograms/svg/PictogramFingerprint.tsx b/src/components/pictograms/svg/PictogramFingerprint.tsx
@@ -0,0 +1,50 @@
+import React from "react";
+import { Svg, Path } from "react-native-svg";
+import { SVGPictogramProps } from "../types";
+
+const PictogramFingerprint = ({
+  size,
+  colorValues,
+  ...props
+}: SVGPictogramProps) => (
+  <Svg width={size} height={size} viewBox="0 0 240 240" {...props}>
+    <Path
+      d="M78.365 84.373a1.251 1.251 0 0 1 -2.233 -0.675L73.183 44.48a1.251 1.251 0 0 1 2.492 -0.191l2.949 39.22a1.2 1.2 0 0 1 -0.267 0.867z"
+      fill={colorValues.main}
+    />
+    <Path
+      d="M92.667 89.816a1.245 1.245 0 0 1 -1.6 0.307 1.253 1.253 0 0 1 -0.467 -1.707l20.696 -36.137a1.253 1.253 0 0 1 2.176 1.24L92.773 89.659a1.333 1.333 0 0 1 -0.1 0.149z"
+      fill={colorValues.main}
+    />
+    <Path
+      d="m118.32 142.176 23.688 2.641 -25.564 45.852c-2.8 5.024 -9.291 6.591 -14.073 3.4L4.392 128.785A9.853 9.853 0 0 1 2.04 114.579l29.613 -38.553c3.241 -4.216 9.249 -5.107 13.565 -2l50.269 36.129 -5.416 3.632 -9.891 5.992 -6.541 4.14 -4.833 3.925v4.516l1.667 2.025 4.467 1.091 7.849 -3.116 11.248 -4.833 2.367 4.833 1.416 4.7 2.184 0.816 1.091 6.865 4.249 5.125 7.475 3.816s4.291 -0.433 4.949 -0.875c0.659 -0.443 2.724 -2.184 2.724 -2.184l0.984 -3.049 -1.417 -3.816z"
+      fill={colorValues.tertiary}
+    />
+    <Path
+      d="M107.304 190.344a5.16 5.16 0 0 1 -2.916 -0.908L8.941 123.244A5.067 5.067 0 0 1 6.8 119.82a5.067 5.067 0 0 1 1.008 -3.908L35.973 79.541a5.115 5.115 0 0 1 6.965 -1.067l47.844 33.237a1.253 1.253 0 0 1 0.316 1.741 1.253 1.253 0 0 1 -1.741 0.317L41.512 80.533a2.62 2.62 0 0 0 -3.565 0.549L9.783 117.437a2.613 2.613 0 0 0 -0.516 2c0.108 0.716 0.5 1.34 1.091 1.749l95.447 66.191a2.587 2.587 0 0 0 2.075 0.4 2.587 2.587 0 0 0 1.692 -1.265l24.372 -43.095a1.247 1.247 0 1 1 2.175 1.224l-24.372 43.095a5.12 5.12 0 0 1 -4.457 2.592z"
+      fill={colorValues.main}
+    />
+    <Path
+      d="M73.235 137.051a6.72 6.72 0 0 1 -6.116 -3.875c-1.241 -2.616 -0.708 -5.649 1.341 -7.715 11.907 -11.983 40.504 -19.864 41.712 -20.189q0.136 -0.037 0.275 -0.051c38.72 -4.765 87.581 -21.713 88.072 -21.88l1.292 3.707c-0.492 0.176 -49.619 17.207 -88.739 22.056 -2.125 0.592 -29.055 8.291 -39.829 19.132 -1.057 1.067 -0.991 2.391 -0.573 3.267 0.2 0.424 1.04 1.773 2.857 1.607 8.157 -0.767 20.321 -4.573 31.947 -18.364l3.007 2.533C96 132.085 82.784 136.184 73.893 137.017a5.333 5.333 0 0 1 -0.667 0.033z"
+      fill={colorValues.hands}
+    />
+    <Path
+      d="M99.231 139.567c-2.508 -0.832 -4.3 -2.408 -5.175 -4.54 -1.775 -4.3 0.641 -9.324 0.925 -9.883l3.507 1.767 -1.757 -0.884 1.759 0.876c-0.543 1.083 -1.733 4.391 -0.8 6.632 0.44 1.075 1.357 1.825 2.783 2.3l-1.241 3.724z"
+      fill={colorValues.hands}
+    />
+    <Path
+      d="M114.813 155.84c-4.167 0 -9.04 -2.324 -13.115 -7.832 -2.859 -3.849 -3.741 -7.624 -2.625 -11.215 2.259 -7.257 12.067 -10.691 12.481 -10.832l1.276 3.716c-0.084 0.025 -8.349 2.933 -10.008 8.291 -0.724 2.349 -0.057 4.875 2.033 7.699 4.567 6.157 10.207 7.341 13.207 5.324 2.467 -1.667 2.567 -5.041 0.267 -8.815l3.359 -2.051c3.933 6.449 2.116 11.74 -1.425 14.124 -1.525 1.024 -3.392 1.583 -5.44 1.591z"
+      fill={colorValues.hands}
+    />
+    <Path
+      d="M161.681 145.341c-24.88 0 -47.244 -2.808 -48.993 -3.032l0.5 -3.9c0.8 0.1 81.04 10.157 107.136 -7.565 12.224 -8.307 18.073 -24.005 14.899 -39.987 -3.283 -16.532 -15.132 -28.464 -31.696 -31.905l0.8 -3.849c18.164 3.775 31.153 16.856 34.745 34.987 3.483 17.54 -3.008 34.813 -16.54 44.004 -13.073 8.881 -38.02 11.248 -60.851 11.248"
+      fill={colorValues.hands}
+    />
+    <Path
+      d="M96.281 112.72c-0.533 -0.483 -5.157 -4.873 -4.324 -9.299 0.291 -1.557 1.391 -3.699 4.941 -5.073 8.832 -3.408 34.045 2.424 36.887 3.099l-0.908 3.825c-7.4 -1.759 -28.055 -5.783 -34.563 -3.259 -1.5 0.575 -2.333 1.292 -2.492 2.133 -0.341 1.8 1.951 4.608 3.116 5.683l-2.657 2.9z"
+      fill={colorValues.hands}
+    />
+  </Svg>
+);
+
+export default PictogramFingerprint;
diff --git a/src/components/pictograms/svg/PictogramSmile.tsx b/src/components/pictograms/svg/PictogramSmile.tsx
@@ -0,0 +1,22 @@
+import React from "react";
+import { Svg, Path } from "react-native-svg";
+import { SVGPictogramProps } from "../types";
+
+const PictogramSmile = ({ size, colorValues, ...props }: SVGPictogramProps) => (
+  <Svg width={size} height={size} viewBox="0 0 240 240" {...props}>
+    <Path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M118.373 48.416c-1.925 -0.96 -4.276 -0.203 -5.251 1.693l-3.5 6.799 -0.053 0.121c-8.031 18.679 -12.457 33.252 -14.88 43.209 -1.211 4.979 -1.92 8.801 -2.331 11.405 -0.204 1.303 -0.333 2.3 -0.413 2.984a40 40 0 0 0 -0.103 1.007l-0.005 0.064 -0.001 0.021v0.007l-0.001 0.004s0 0.003 3.896 0.287l-3.896 -0.284 -0.005 0.065 -0.003 0.067c-0.268 6.657 3.584 11.48 7.889 14.44 4.229 2.908 9.444 4.441 13.387 4.441 2.157 0 3.907 -1.723 3.907 -3.848s-1.749 -3.848 -3.907 -3.848c-2.232 0 -5.901 -0.984 -8.913 -3.053 -2.915 -2.004 -4.656 -4.597 -4.557 -7.753a24 24 0 0 1 0.077 -0.747c0.067 -0.581 0.183 -1.476 0.372 -2.676 0.376 -2.4 1.045 -6.016 2.207 -10.789 2.317 -9.523 6.595 -23.652 14.425 -41.88l3.379 -6.564a3.82 3.82 0 0 0 -1.72 -5.172"
+      fill={colorValues.hands}
+    />
+    <Path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M151.184 153.164a3.813 3.813 0 0 1 0.888 5.371l-3.171 -2.248a330.667 330.667 0 0 1 3.168 2.252l-0.012 0.016 -0.024 0.032 -0.077 0.104 -0.273 0.355a45.333 45.333 0 0 1 -1.004 1.223 54.667 54.667 0 0 1 -3.749 3.956c-3.217 3.076 -7.952 6.873 -13.881 9.5 -5.969 2.644 -13.221 4.129 -21.285 2.413 -8.056 -1.715 -16.504 -6.535 -25.04 -15.765a3.807 3.807 0 0 1 0.259 -5.435 3.947 3.947 0 0 1 5.52 0.253c7.715 8.344 14.803 12.124 20.912 13.425 6.099 1.297 11.639 0.212 16.429 -1.909 4.829 -2.14 8.824 -5.308 11.644 -8.004a46.667 46.667 0 0 0 3.208 -3.384c0.363 -0.425 0.633 -0.761 0.808 -0.984q0.132 -0.167 0.189 -0.244l0.039 -0.051 0.003 -0.004m5.451 -0.872c-1.751 -1.24 -4.189 -0.851 -5.451 0.872z"
+      fill={colorValues.hands}
+    />
+  </Svg>
+);
+
+export default PictogramSmile;
diff --git a/src/components/pictograms/svg/PictogramWalletDoc.tsx b/src/components/pictograms/svg/PictogramWalletDoc.tsx
@@ -0,0 +1,44 @@
+import React from "react";
+import { Svg, Path } from "react-native-svg";
+import { SVGPictogramProps } from "../types";
+
+const PictogramWalletDoc = ({
+  size,
+  colorValues,
+  ...props
+}: SVGPictogramProps) => (
+  <Svg width={size} height={size} viewBox="0 0 240 240" fill="none" {...props}>
+    <Path
+      d="M84.112 141.587H75.08a5.821 5.821 0 0 1 -5.821 -5.821V28.785a5.821 5.821 0 0 1 5.821 -5.821h157.832a5.82 5.82 0 0 1 5.82 5.821v105.511a5.82 5.82 0 0 1 -5.82 5.821H131.904l-3.093 -5.619 -7.291 -6.521 -8.288 -2.096 -8.067 0.22 -10.384 5.415 -10.661 10.053z"
+      fill={colorValues.tertiary}
+    />
+    <Path
+      d="m56.485 164.693 -3.625 3.48a0.48 0.48 0 0 0 -0.152 0.355 0.533 0.533 0 0 0 0.144 0.364l2.763 2.881a0.533 0.533 0 0 0 0.363 0.152c0.127 0 0.253 -0.051 0.356 -0.144l42.115 -40.392c1.333 -0.641 10.501 -4.807 19.017 -1.841 5.28 1.833 9.469 6.083 12.453 12.631 -0.06 1.267 -0.449 4.891 -2.957 6.235 -3.347 1.791 -10.207 -0.659 -18.807 -6.708a0.493 0.493 0 0 0 -0.38 -0.084 0.52 0.52 0 0 0 -0.329 0.211l-2.289 3.261a0.507 0.507 0 0 0 -0.085 0.38c0.027 0.135 0.101 0.253 0.212 0.329 10.831 7.62 18.704 9.919 24.069 7.012 5.761 -3.117 5.584 -10.899 5.576 -11.228a2.533 2.533 0 0 0 -0.212 -0.912c-3.573 -8.161 -8.837 -13.493 -15.637 -15.84 -11.38 -3.937 -22.785 2.053 -23.267 2.307a2.667 2.667 0 0 0 -0.549 0.396l-35.145 33.7 -18.324 -16.804a0.507 0.507 0 0 0 -0.719 0.035l-2.695 2.94a0.511 0.511 0 0 0 0.025 0.717l18.088 16.584z"
+      fill={colorValues.hands}
+    />
+    <Path
+      d="M172.657 139.923a0.507 0.507 0 0 0 -0.464 -0.304l-4.191 0.041a0.507 0.507 0 0 0 -0.423 0.229 0.52 0.52 0 0 0 -0.041 0.481c0.971 2.239 1.985 6.048 1.165 7.527 -0.727 1.319 -2.383 1.767 -2.821 1.859h-0.304c-0.863 0 -1.699 0.025 -2.544 0.051 1.783 -3.835 0.929 -7.755 -0.515 -9.917a0.573 0.573 0 0 0 -0.44 -0.229l-4.131 0.119a0.493 0.493 0 0 0 -0.448 0.339 0.547 0.547 0 0 0 0.144 0.557c0.271 0.253 1.267 2.297 1.14 4.713 -0.101 1.969 -0.904 3.616 -2.373 4.9 -30.127 3.532 -50.184 24.019 -66.591 40.781 -9.267 9.469 -17.267 17.648 -25.049 20.697 -11.168 4.368 -26.891 -7.197 -38.127 -17.665 -12.621 -11.768 -22.447 -24.804 -22.54 -24.939a0.493 0.493 0 0 0 -0.339 -0.195 0.533 0.533 0 0 0 -0.38 0.093l-3.185 2.391a0.507 0.507 0 0 0 -0.101 0.709c1.395 1.859 34.411 45.528 59.503 45.528 2.475 0 4.824 -0.431 6.987 -1.276 8.777 -3.439 17.124 -11.971 26.807 -21.864 17.352 -17.733 38.947 -39.808 72.173 -39.808h0.491c0.16 0 0.244 0 0.363 -0.025 0.187 -0.025 4.512 -0.643 6.607 -4.368 1.555 -2.763 1.42 -6.277 -0.397 -10.443z"
+      fill={colorValues.hands}
+    />
+    <Path
+      d="M210.591 65.864a4.093 4.093 0 0 1 -3.184 -1.512l-14.929 -18.248c-2.069 -2.535 -2.331 -6.083 -0.649 -8.829a10.76 10.76 0 0 1 9.225 -5.169 10.8 10.8 0 0 1 9.537 5.736c1.825 -3.413 5.416 -5.736 9.539 -5.736a10.76 10.76 0 0 1 9.225 5.169c1.681 2.747 1.42 6.295 -0.651 8.829l-14.928 18.248a4.107 4.107 0 0 1 -3.185 1.512M201.053 34.64a8.213 8.213 0 0 0 -7.063 3.961c-1.124 1.825 -0.939 4.2 0.447 5.897l14.929 18.248c0.599 0.735 1.849 0.744 2.449 0l14.928 -18.248c1.395 -1.699 1.572 -4.072 0.448 -5.897a8.24 8.24 0 0 0 -7.063 -3.961 8.28 8.28 0 0 0 -8.271 8.271h-2.535a8.28 8.28 0 0 0 -8.271 -8.271"
+      fill={colorValues.main}
+    />
+    <Path
+      d="M238.732 109.619H69.251a1.267 1.267 0 0 1 -1.267 -1.267 1.267 1.267 0 0 1 1.267 -1.268h169.481a1.267 1.267 0 1 1 0 2.533"
+      fill={colorValues.main}
+    />
+    <Path
+      d="M85.023 61.876h55.573a3.364 3.364 0 0 1 3.364 3.364v2.204a3.364 3.364 0 0 1 -3.364 3.364h-55.573a3.364 3.364 0 0 1 -3.364 -3.364V65.24a3.364 3.364 0 0 1 3.364 -3.364Z"
+      stroke={colorValues.main}
+      strokeWidth={2.6666666666666665}
+    />
+    <Path
+      d="M85.023 80.436h92.104a3.364 3.364 0 0 1 3.364 3.364v2.205a3.364 3.364 0 0 1 -3.364 3.364H85.023a3.364 3.364 0 0 1 -3.364 -3.364V83.8a3.364 3.364 0 0 1 3.364 -3.364Z"
+      stroke={colorValues.main}
+      strokeWidth={2.6666666666666665}
+    />
+  </Svg>
+);
+
+export default PictogramWalletDoc;
diff --git a/src/components/pictograms/svg/originals/PictogramFingerprint.svg b/src/components/pictograms/svg/originals/PictogramFingerprint.svg
diff --git a/src/components/pictograms/svg/originals/PictogramSmile.svg b/src/components/pictograms/svg/originals/PictogramSmile.svg