[IOPID-2011] integrate setting pictogram (#308)

## Short description This PR introduces the `PictogramSettings` and `PictogramBleedSettings` pictograms. <img width="150" alt="Screenshot 2024-07-10 alle 12 45 01" src="https://github.com/pagopa/io-app-design-system/assets/83651704/08566546-b491-4426-9c18-6ba4319d6a6b"> ## How to test Within the example app, navigate to the **Pictograms** section and check that the new pictograms are correctly rendered --------- Co-authored-by: Damiano Plebani <[email protected]>
pagopa · Jul 10, 2024 · e919e4a · e919e4a
1 parent e7b46d2
commit e919e4a
Show file tree

Hide file tree

Showing 6 changed files with 60 additions and 1 deletion.
diff --git a/scripts/pictograms_timestamp.txt b/scripts/pictograms_timestamp.txt
@@ -1 +1 @@
-2024-06-07T12:07:14.442Z
+2024-07-10T13:20:00.647Z
diff --git a/src/components/pictograms/Pictogram.tsx b/src/components/pictograms/Pictogram.tsx
@@ -105,6 +105,7 @@ import PictogramBleedQrCode from "./svg/PictogramBleedQrCode";
 import PictogramBleedReactivate from "./svg/PictogramBleedReactivate";
 import PictogramBleedSearch from "./svg/PictogramBleedSearch";
 import PictogramBleedSecurity from "./svg/PictogramBleedSecurity";
+import PictogramBleedSettings from "./svg/PictogramBleedSettings";
 import PictogramBleedStar from "./svg/PictogramBleedStar";
 import PictogramBleedStopSecurity from "./svg/PictogramBleedStopSecurity";
 import PictogramBleedSuccess from "./svg/PictogramBleedSuccess";
@@ -131,6 +132,7 @@ import PictogramPending from "./svg/PictogramPending";
 import PictogramQrCode from "./svg/PictogramQrCode";
 import PictogramReactivate from "./svg/PictogramReactivate";
 import PictogramSearchLens from "./svg/PictogramSearchLens";
+import PictogramSettings from "./svg/PictogramSettings";
 import PictogramStar from "./svg/PictogramStar";
 import PictogramTiming from "./svg/PictogramTiming";
 import { IOPictogramSizeScale, SVGPictogramProps } from "./types";
@@ -189,6 +191,7 @@ export const IOPictograms = {
   identityCheck: PictogramIdentityCheck,
   accessDenied: PictogramAccessDenied,
   stopSecurity: PictogramStopSecurity,
+  settings: PictogramSettings,
   security: PictogramSecurity,
   cie: PictogramCie,
   pending: PictogramPending,
@@ -320,6 +323,7 @@ export type IOPictogramsBleed = Extract<
   | "cardQuestion"
   | "cardIssue"
   | "accessDenied"
+  | "settings"
   | "stopSecurity"
   | "time"
   | "pending"
@@ -369,6 +373,7 @@ export const IOPictogramsBleed: {
   cardIssue: PictogramBleedCardIssue,
   accessDenied: PictogramBleedAccessDenied,
   stopSecurity: PictogramBleedStopSecurity,
+  settings: PictogramBleedSettings,
   time: PictogramBleedTime,
   pending: PictogramBleedPending,
   ended: PictogramBleedEnded,

diff --git a/src/components/pictograms/svg/PictogramBleedSettings.tsx b/src/components/pictograms/svg/PictogramBleedSettings.tsx
@@ -0,0 +1,26 @@
+import React from "react";
+import { Svg, Path } from "react-native-svg";
+import { SVGPictogramProps } from "../types";
+
+const PictogramBleedSettings = ({
+  size,
+  colorValues,
+  ...props
+}: SVGPictogramProps) => (
+  <Svg width={size} height={size} viewBox="0 0 240 240" {...props}>
+    <Path
+      fill={colorValues.hands}
+      d="M195.491 126.862a2.322 2.322 0 0 0 1.05 2.853c1.937 1.057 47.11 25.409 69.065 17.362.273-.1.546-.2.811-.322l-1.789-4.288c-7.973 3.305-21.801 1.502-40.007-5.234-10.895-4.028-20.372-8.749-24.13-10.683 2.897-9.392 1.388-19.01.164-24.085-.909-3.783-4.412-6.404-8.332-6.253-3.089.12-5.812 1.908-7.111 4.67-2.043 4.308-4.723 11.531-6.005 15.079-4.101-1.587-14.171-6.671-32.443-17.153a17.256 17.256 0 0 0-9.991-2.245 9.503 9.503 0 0 0-8.65 7.891c-.468 2.767.279 5.57 2.076 7.693 4.78 5.687 15.519 13.331 19.958 16.376-1.58 2.705-2.639 6.491-2.471 11.793a33.282 33.282 0 0 0 1.053 7.203s-.013.029-.009.04l.021-.008c2.325 8.875 8.39 17.144 18.139 24.657 34.542 26.591 71.474 28.652 73.036 28.722l.227-4.631c-.364-.015-37.069-2.097-70.417-27.767-8.446-6.494-13.841-13.514-16.143-20.914 1.301-3.702 4.622-10.493 9.554-11.46 4.098-.81 9.208 2.508 14.784 9.585a4.255 4.255 0 0 1 .621 4.11c-.476 1.262-1.481 2.1-2.753 2.344-3.83.699-7.866-.813-11.986-4.505l-3.099 3.459c6.536 5.847 12.268 6.28 15.933 5.604a8.138 8.138 0 0 0 1.36-.375c2.237-.819 4.019-2.573 4.898-4.897.988-2.599.663-5.532-.797-7.852 2.883-6.198 2.049-12.504-2.393-17.203-5.878-6.213-15.803-7.506-24.137-3.13-.8.417-1.625.967-2.429 1.644-4.041-2.77-14.898-10.432-19.392-15.78a4.887 4.887 0 0 1-1.054-3.94 4.881 4.881 0 0 1 4.431-4.046 12.632 12.632 0 0 1 7.302 1.637c13.931 8.007 31.469 17.67 35.889 18.274a2.318 2.318 0 0 0 2.51-1.525c.034-.111 3.961-11.178 6.57-16.707.568-1.184 1.747-1.95 3.088-2.009 1.708-.07 3.239 1.062 3.631 2.698 1.178 4.92 2.671 14.494-.67 23.319l.037-.001Zm-37.721.54c7.237-3.79 14.83-1.765 18.595 2.206 2.595 2.744 3.388 6.211 2.374 9.882-5.784-6.259-11.322-8.926-16.481-7.9-4.489.891-7.725 4.413-9.899 7.929-.071-6.116 1.747-10.194 5.411-12.117Z"
+    />
+    <Path
+      fill={colorValues.main}
+      d="M53.78 92.97c-.497 0-1.153.12-1.8.36-3.598 1.288-7.206 2.577-10.804 3.866-1.243.45-2.406.15-3.29-.84a48.829 48.829 0 0 1-6.949-10 46.713 46.713 0 0 1-3.15-7.534c-.368-1.16-.11-2.209.804-3.008 1.82-1.598 3.678-3.147 5.527-4.716 1.213-1.039 2.455-2.048 3.638-3.117 2.416-2.178 2.446-6.125.03-8.323-1.412-1.279-2.892-2.488-4.344-3.717-1.62-1.379-3.26-2.738-4.85-4.146-.915-.81-1.173-1.859-.796-3.028a47.678 47.678 0 0 1 3.4-7.973 48.14 48.14 0 0 1 6.75-9.592c.854-.95 1.928-1.229 3.12-.81 2.903 1.02 5.795 2.069 8.698 3.098.835.3 1.66.62 2.505.88 3.33 1.038 6.72-1.02 7.366-4.457.556-2.977 1.083-5.955 1.63-8.932.149-.84.298-1.669.457-2.498.248-1.27 1.123-2.108 2.386-2.368 2.584-.52 5.178-.86 7.813-.98 2.634-.12 5.258-.05 7.862.29 1.431.19 2.853.43 4.274.69 1.462.27 2.247 1.109 2.515 2.568.636 3.537 1.283 7.064 1.939 10.59.119.64.238 1.29.497 1.88.964 2.157 2.654 3.316 5.01 3.476.785.05 1.54-.09 2.276-.36 3.598-1.288 7.186-2.577 10.785-3.856 1.242-.44 2.395-.14 3.28.849a48.743 48.743 0 0 1 7.445 11 46.648 46.648 0 0 1 2.644 6.515c.368 1.16.12 2.208-.795 3.008-1.829 1.598-3.688 3.157-5.537 4.726-1.212 1.039-2.455 2.048-3.638 3.117-2.405 2.178-2.425 6.125-.029 8.313 1.411 1.279 2.892 2.488 4.343 3.717 1.621 1.388 3.271 2.747 4.871 4.156.905.8 1.173 1.839.795 2.988-1.719 5.305-4.264 10.181-7.664 14.587a64.715 64.715 0 0 1-2.485 2.998c-.845.959-1.918 1.239-3.111.829-2.515-.87-5.01-1.788-7.515-2.678-1.252-.45-2.485-.919-3.747-1.319-2.903-.939-6.153.71-7.078 3.637-.288.92-.427 1.889-.596 2.838-.586 3.157-1.153 6.315-1.73 9.472-.218 1.189-1.103 2.068-2.325 2.318-2.555.52-5.13.859-7.744.989-2.823.13-5.636.04-8.43-.34a84.91 84.91 0 0 1-3.965-.649c-1.243-.23-2.107-1.099-2.336-2.348-.567-3.047-1.113-6.095-1.67-9.142-.15-.84-.288-1.689-.467-2.528-.577-2.638-2.903-4.496-5.785-4.496h-.03Zm6.173-29.186c0 7.834 6.312 14.238 14.065 14.248a14.187 14.187 0 0 0 14.234-14.218c.01-7.823-6.332-14.218-14.115-14.218-7.833 0-14.184 6.345-14.184 14.198v-.01Z"
+    />
+    <Path
+      fill={colorValues.secondary}
+      d="M82.514 19.484c-.305-.17-7.724-4.049-16.741-.772a3.032 3.032 0 0 0-1.904 2.175l-2.703 11.485-.326 1.293a5.388 5.388 0 0 1-2.486 3.347 5.28 5.28 0 0 1-4.094.571l-13.9-3.738-.651.441c-.296.2-7.163 5-8.563 14.632a3.074 3.074 0 0 0 .986 2.736l8.76 7.897a6.632 6.632 0 0 1 2.339 5.351 6.58 6.58 0 0 1-2.753 5.141l-6.462 4.64a6.67 6.67 0 0 0-2.357 7.687c1.48 4.039 4.054 9.48 7.882 12.407.316.24.68.35 1.036.35.523 0 1.036-.24 1.381-.7a1.774 1.774 0 0 0-.335-2.456c-2.467-1.894-4.854-5.743-6.729-10.834-.483-1.302-.02-2.786 1.115-3.607l6.462-4.64a10.097 10.097 0 0 0 4.203-7.868c.128-3.166-1.184-6.153-3.542-8.147l-8.553-7.707c1.016-6.383 4.962-10.262 6.462-11.535l12.321 3.307a8.677 8.677 0 0 0 6.719-.931c2.042-1.213 3.492-3.167 4.084-5.502l2.989-12.618c7.419-2.585 13.634.602 13.742.662.839.45 1.885.12 2.329-.732a1.76 1.76 0 0 0-.72-2.365l.01.03ZM146.686 11.236c.753-.585.9-1.666.323-2.43a1.687 1.687 0 0 0-2.396-.327l-20.988 16.248a1.745 1.745 0 0 0-.323 2.43c.333.447.841.685 1.359.685.362 0 .724-.119 1.037-.357l20.988-16.249ZM153.148 31.619c-.167-.963-1.063-1.6-1.998-1.428l-24.46 4.578c-.935.172-1.555 1.093-1.387 2.056.147.85.876 1.458 1.693 1.458.098 0 .206 0 .305-.03l24.459-4.578c.935-.172 1.555-1.094 1.388-2.056Z"
+    />
+  </Svg>
+);
+
+export default PictogramBleedSettings;
diff --git a/src/components/pictograms/svg/PictogramSettings.tsx b/src/components/pictograms/svg/PictogramSettings.tsx
@@ -0,0 +1,26 @@
+import React from "react";
+import { Svg, Path } from "react-native-svg";
+import { SVGPictogramProps } from "../types";
+
+const PictogramSettings = ({
+  size,
+  colorValues,
+  ...props
+}: SVGPictogramProps) => (
+  <Svg width={size} height={size} viewBox="0 0 240 240" {...props}>
+    <Path
+      fill={colorValues.hands}
+      d="M165.32 150.77c-.65.75-.65 1.88 0 2.62 1.25 1.43 30.49 34.53 50.61 34.53.25 0 .5 0 .75-.02l-.17-4c-7.42.31-18.05-5.25-30.75-16.1-7.6-6.49-13.85-13.12-16.31-15.8 5.13-6.74 6.77-14.97 7.29-19.44.39-3.33-1.66-6.49-4.87-7.53-2.53-.82-5.26-.18-7.13 1.67-2.93 2.88-7.24 7.93-9.33 10.42-2.84-2.5-9.46-9.6-21.1-23.5a14.817 14.817 0 0 0-7.4-4.78 8.181 8.181 0 0 0-9.33 3.82c-1.2 2.1-1.43 4.59-.61 6.84 2.17 6.02 8.57 15.39 11.25 19.17-2.08 1.72-4.06 4.47-5.5 8.81-.66 2-1.08 4.05-1.29 6.14 0 0-.02.02-.02.03h.02c-.76 7.87 1.68 16.36 7.32 25.33 19.99 31.76 49.2 44.38 50.44 44.9l1.56-3.68c-.29-.12-29.31-12.69-48.61-43.35-4.89-7.76-7.16-15.04-6.82-21.71 2.15-2.61 6.85-7.12 11.12-6.44 3.55.56 6.69 4.76 9.09 12.14.39 1.2.11 2.55-.72 3.51-.76.88-1.82 1.26-2.92 1.08-3.3-.57-6.11-2.99-8.34-7.2l-3.53 1.88c3.54 6.67 8.04 8.72 11.2 9.26.4.07.81.1 1.21.1 2.05 0 4.01-.89 5.41-2.51a7.676 7.676 0 0 0 1.69-6.59c4.17-4.16 5.37-9.51 3.18-14.63-2.9-6.77-10.53-10.76-18.56-9.69-.77.1-1.6.3-2.45.61-2.44-3.44-8.93-12.86-10.97-18.52a4.22 4.22 0 0 1 .32-3.5 4.201 4.201 0 0 1 4.78-1.96c2.12.59 3.99 1.8 5.41 3.49 8.87 10.61 20.16 23.63 23.55 25.43.84.45 1.88.24 2.48-.49.06-.08 6.52-7.87 10.27-11.57a3.07 3.07 0 0 1 3.09-.71c1.4.45 2.3 1.82 2.13 3.26-.51 4.33-2.15 12.52-7.47 18.67l.03.01Zm-30.62-10.75c6.97-.92 12.5 2.97 14.36 7.3 1.28 2.99.89 6.03-1.02 8.7-2.81-6.78-6.49-10.58-10.96-11.28-3.89-.61-7.55 1.28-10.35 3.48 1.76-4.97 4.44-7.73 7.97-8.2Z"
+    />
+    <Path
+      fill={colorValues.main}
+      d="M50.32 102.11c-.5 0-1.16.12-1.81.36-3.62 1.29-7.25 2.58-10.87 3.87-1.25.45-2.42.15-3.31-.84a48.867 48.867 0 0 1-6.99-10.01 46.621 46.621 0 0 1-3.17-7.54c-.37-1.16-.11-2.21.81-3.01 1.83-1.6 3.7-3.15 5.56-4.72 1.22-1.04 2.47-2.05 3.66-3.12 2.43-2.18 2.46-6.13.03-8.33-1.42-1.28-2.91-2.49-4.37-3.72-1.63-1.38-3.28-2.74-4.88-4.15-.92-.81-1.18-1.86-.8-3.03a47.58 47.58 0 0 1 3.42-7.98 48.18 48.18 0 0 1 6.79-9.6c.86-.95 1.94-1.23 3.14-.81 2.92 1.02 5.83 2.07 8.75 3.1.84.3 1.67.62 2.52.88 3.35 1.04 6.76-1.02 7.41-4.46.56-2.98 1.09-5.96 1.64-8.94.15-.84.3-1.67.46-2.5.25-1.27 1.13-2.11 2.4-2.37 2.6-.52 5.21-.86 7.86-.98 2.65-.12 5.29-.05 7.91.29 1.44.19 2.87.43 4.3.69 1.47.27 2.26 1.11 2.53 2.57.64 3.54 1.29 7.07 1.95 10.6.12.64.24 1.29.5 1.88.97 2.16 2.67 3.32 5.04 3.48.79.05 1.55-.09 2.29-.36 3.62-1.29 7.23-2.58 10.85-3.86 1.25-.44 2.41-.14 3.3.85 3 3.33 5.5 7 7.49 11.01 1.05 2.11 1.94 4.28 2.66 6.52.37 1.16.12 2.21-.8 3.01-1.84 1.6-3.71 3.16-5.57 4.73-1.22 1.04-2.47 2.05-3.66 3.12-2.42 2.18-2.44 6.13-.03 8.32 1.42 1.28 2.91 2.49 4.37 3.72 1.63 1.39 3.29 2.75 4.9 4.16.91.8 1.18 1.84.8 2.99-1.73 5.31-4.29 10.19-7.71 14.6a65.1 65.1 0 0 1-2.5 3c-.85.96-1.93 1.24-3.13.83-2.53-.87-5.04-1.79-7.56-2.68-1.26-.45-2.5-.92-3.77-1.32-2.92-.94-6.19.71-7.12 3.64-.29.92-.43 1.89-.6 2.84-.59 3.16-1.16 6.32-1.74 9.48-.22 1.19-1.11 2.07-2.34 2.32-2.57.52-5.16.86-7.79.99-2.84.13-5.67.04-8.48-.34-1.34-.18-2.67-.41-3.99-.65-1.25-.23-2.12-1.1-2.35-2.35-.57-3.05-1.12-6.1-1.68-9.15-.15-.84-.29-1.69-.47-2.53-.58-2.64-2.92-4.5-5.82-4.5h-.03Zm6.21-29.21c0 7.84 6.35 14.25 14.15 14.26 7.93.01 14.31-6.33 14.32-14.23.01-7.83-6.37-14.23-14.2-14.23-7.88 0-14.27 6.35-14.27 14.21v-.01Z"
+    />
+    <Path
+      fill={colorValues.secondary}
+      d="M79.58 28.58c-.31-.17-7.83-4.04-16.97-.77-.97.35-1.69 1.16-1.93 2.17l-2.74 11.46-.33 1.29a5.385 5.385 0 0 1-2.52 3.34c-1.26.74-2.73.94-4.15.57l-14.09-3.73-.66.44c-.3.2-7.26 4.99-8.68 14.6a3.04 3.04 0 0 0 1 2.73l8.88 7.88a6.571 6.571 0 0 1 2.37 5.34 6.54 6.54 0 0 1-2.79 5.13l-6.55 4.63c-2.44 1.73-3.43 4.88-2.39 7.67 1.5 4.03 4.11 9.46 7.99 12.38a1.752 1.752 0 0 0 2.45-.35c.58-.77.43-1.87-.34-2.45-2.5-1.89-4.92-5.73-6.82-10.81-.49-1.3-.02-2.78 1.13-3.6l6.55-4.63c2.58-1.83 4.14-4.69 4.26-7.85.13-3.16-1.2-6.14-3.59-8.13l-8.67-7.69c1.03-6.37 5.03-10.24 6.55-11.51l12.49 3.3c2.32.61 4.74.28 6.81-.93a8.874 8.874 0 0 0 4.14-5.49l3.03-12.59c7.52-2.58 13.82.6 13.93.66.85.45 1.91.12 2.36-.73.45-.85.13-1.91-.73-2.36l.01.03ZM143.919 20.14c.77-.59.92-1.68.33-2.45-.58-.77-1.68-.92-2.45-.33l-21.46 16.38c-.77.59-.92 1.68-.33 2.45.34.45.86.69 1.39.69.37 0 .74-.12 1.06-.36l21.46-16.38ZM150.22 40.65a1.748 1.748 0 0 0-2.03-1.41l-24.85 4.52a1.748 1.748 0 0 0 .31 3.47c.1 0 .21 0 .31-.03l24.85-4.52c.95-.17 1.58-1.08 1.41-2.03Z"
+    />
+  </Svg>
+);
+
+export default PictogramSettings;
diff --git a/src/components/pictograms/svg/originals/PictogramBleedSettings.svg b/src/components/pictograms/svg/originals/PictogramBleedSettings.svg