[IOAPPFD0-150] Add the new IOPictogramsObject set (#74)

## Short description This PR adds a new `IOPictogramsObject` set to distinguish between pictograms with hands and objects and pictograms with objects only. ## List of changes proposed in this pull request - Add the new `IOPictogramsObject` object - Move `FeatureInfo` component in the correct folder (was in `example` before, not exported) - Add three new pictograms: - key - clock - message ### Preview <img src="https://github.com/pagopa/io-app-design-system/assets/1255491/3e1e2966-b7ff-4948-a288-51d8dc9d12d7" width="320" /> ## How to test Go to the example app → **Pictograms**
pagopa · Sep 19, 2023 · 899788f · 899788f
1 parent debbbd1
commit 899788f
Show file tree

Hide file tree

Showing 22 changed files with 308 additions and 106 deletions.
diff --git a/example/src/pages/Advice.tsx b/example/src/pages/Advice.tsx
@@ -1,4 +1,5 @@
 import {
+  FeatureInfo,
   Banner,
   H2,
   IOPictogramsBleed,
@@ -9,7 +10,6 @@ import {
 import React from "react";
 import { Alert, View } from "react-native";
 import { ComponentViewerBox } from "../components/ComponentViewerBox";
-import { FeatureInfo } from "../components/FeatureInfo";
 import { Screen } from "../components/Screen";
 
 const onLinkPress = () => {
@@ -75,7 +75,7 @@ const renderFeatureInfo = () => (
     <VSpacer size={16} />
     <ComponentViewerBox name="FeatureInfo · with Pictogram">
       <FeatureInfo
-        pictogramName="followMessage"
+        pictogramName="clock"
         body={
           "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor ut labore et dolore magna aliqua. sed do eiusmod tempor ut labore et dolore magna aliqua"
         }

diff --git a/example/src/pages/Pictograms.tsx b/example/src/pages/Pictograms.tsx
@@ -3,6 +3,7 @@ import {
   IOPictograms,
   IOPictogramsBleed,
   IOPictogramsLegacy,
+  IOPictogramsObject,
   IOThemeContext,
   IOVisualCostants,
   Pictogram,
@@ -47,6 +48,7 @@ const filterPictogramSet = (
 
 const filteredIOPictograms = filterPictogramSet(
   {
+    ...IOPictogramsObject,
     ...IOPictogramsLegacy
   },
   IOPictograms
@@ -110,6 +112,31 @@ export const Pictograms = () => {
         ))}
       </View>
 
+      <H2
+        color={theme["textHeading-default"]}
+        weight={"SemiBold"}
+        style={{
+          marginBottom: 16,
+          paddingTop: IOVisualCostants.appMarginDefault
+        }}
+      >
+        Objects Pictograms
+      </H2>
+      <View style={styles.itemsWrapper}>
+        {Object.entries(IOPictogramsObject).map(([pictogramItemName]) => (
+          <AssetViewerBox
+            key={pictogramItemName}
+            name={pictogramItemName}
+            image={
+              <Pictogram
+                name={pictogramItemName as IOPictogramsObject}
+                size="100%"
+              />
+            }
+          />
+        ))}
+      </View>
+
       <H2
         color={theme["textHeading-default"]}
         weight={"SemiBold"}

diff --git a/example/src/components/FeatureInfo.tsx → src/components/featureInfo/FeatureInfo.tsx b/example/src/components/FeatureInfo.tsx → src/components/featureInfo/FeatureInfo.tsx
@@ -1,18 +1,18 @@
+import React from "react";
+import { GestureResponderEvent, View } from "react-native";
+import { IOStyles } from "../../core";
 import {
   HSpacer,
   IOIconSizeScale,
   IOIcons,
   IOPictogramSizeScale,
   IOPictograms,
-  IOStyles,
   Icon,
+  LabelLink,
   LabelSmall,
-  LabelLink as Link,
   Pictogram,
   VSpacer
-} from "@pagopa/io-app-design-system";
-import React from "react";
-import { GestureResponderEvent, View } from "react-native";
+} from "../../components";
 
 type PartialFeatureInfo = {
   // Necessary to render main body with different formatting
@@ -75,9 +75,9 @@ export const FeatureInfo = ({
           This verbose code could be deleted once we got "gap"
           property support */}
           {body && <VSpacer size={8} />}
-          <Link fontSize="small" onPress={actionOnPress}>
+          <LabelLink fontSize="small" onPress={actionOnPress}>
             {actionLabel}
-          </Link>
+          </LabelLink>
         </>
       )}
     </View>

diff --git a/src/components/featureInfo/index.tsx b/src/components/featureInfo/index.tsx
@@ -0,0 +1 @@
+export * from "./FeatureInfo";
diff --git a/src/components/index.tsx b/src/components/index.tsx
@@ -6,6 +6,7 @@ export * from "./buttons";
 export * from "./checkbox";
 export * from "./contentWrapper";
 export * from "./divider";
+export * from "./featureInfo";
 export * from "./icons";
 export * from "./listitems";
 export * from "./logos";

diff --git a/src/components/pictograms/Pictogram.tsx b/src/components/pictograms/Pictogram.tsx
@@ -17,13 +17,10 @@ import PictogramEmptyArchive from "./svg/PictogramEmptyArchive";
 import PictogramError from "./svg/PictogramError";
 import PictogramFeedback from "./svg/PictogramFeedback";
 import PictogramFireworks from "./svg/PictogramFireworks";
-import PictogramFollowMessage from "./svg/PictogramFollowMessage";
 import PictogramHeart from "./svg/PictogramHeart";
 import PictogramHourglass from "./svg/PictogramHourglass";
-import PictogramIBANCard from "./svg/PictogramIBANCard";
 import PictogramInProgress from "./svg/PictogramInProgress";
 import PictogramInbox from "./svg/PictogramInbox";
-import PictogramManual from "./svg/PictogramManual";
 import PictogramNotAvailable from "./svg/PictogramNotAvailable";
 import PictogramPiggyBank from "./svg/PictogramPiggyBank";
 import PictogramPin from "./svg/PictogramPin";
@@ -53,11 +50,17 @@ import PictogramStopSecurity from "./svg/PictogramStopSecurity";
 import PictogramSecurity from "./svg/PictogramSecurity";
 import PictogramPasscode from "./svg/PictogramPasscode";
 import PictogramIdentityCheck from "./svg/PictogramIdentityCheck";
-import PictogramTrash from "./svg/PictogramTrash";
 import PictogramCharity from "./svg/PictogramCharity";
 import PictogramEmpty from "./svg/PictogramEmpty";
 import PictogramCie from "./svg/PictogramCie";
 import PictogramFeature from "./svg/PictogramFeature";
+import PictogramObjClock from "./svg/PictogramObjClock";
+import PictogramObjIbanCard from "./svg/PictogramObjIbanCard";
+import PictogramObjManual from "./svg/PictogramObjManual";
+import PictogramObjTrash from "./svg/PictogramObjTrash";
+import PictogramObjKey from "./svg/PictogramObjKey";
+import PictogramObjFlyingMessage from "./svg/PictogramObjFlyingMessage";
+import PictogramObjFollowMessage from "./svg/PictogramObjFollowMessage";
 /* Bleed Pictograms */
 import PictogramBleedCharity from "./svg/PictogramBleedCharity";
 import PictogramBleedHelp from "./svg/PictogramBleedHelp";
@@ -99,10 +102,6 @@ export const IOPictograms = {
   heart: PictogramHeart,
   completed: PictogramCompleted,
   // End legacy pictograms
-  ibanCard: PictogramIBANCard,
-  followMessage: PictogramFollowMessage,
-  manual: PictogramManual,
-  trash: PictogramTrash,
   empty: PictogramEmpty,
   feature: PictogramFeature,
   charity: PictogramCharity,
@@ -125,7 +124,16 @@ export const IOPictograms = {
   security: PictogramSecurity,
   cie: PictogramCie,
   time: PictogramTime,
-  passcode: PictogramPasscode
+  passcode: PictogramPasscode,
+  // Start Objects Pictogram
+  ibanCard: PictogramObjIbanCard,
+  followMessage: PictogramObjFollowMessage,
+  manual: PictogramObjManual,
+  trash: PictogramObjTrash,
+  clock: PictogramObjClock,
+  key: PictogramObjKey,
+  flyingMessage: PictogramObjFlyingMessage
+  // End Objects Pictogram
 };
 
 export type IOPictograms = keyof typeof IOPictograms;
@@ -187,6 +195,23 @@ export const PictogramBleed = ({
   return <PictogramElement {...props} size={size} color={IOColors[color]} />;
 };
 
+/* Object Pictograms */
+
+const { ibanCard, followMessage, manual, trash, clock, key, flyingMessage } =
+  IOPictograms;
+
+export const IOPictogramsObject = {
+  ibanCard,
+  followMessage,
+  manual,
+  trash,
+  clock,
+  key,
+  flyingMessage
+} as const;
+
+export type IOPictogramsObject = keyof typeof IOPictogramsObject;
+
 /* Legacy pictograms */
 
 const {

diff --git a/src/components/pictograms/svg/PictogramIBANCard.tsx b/src/components/pictograms/svg/PictogramIBANCard.tsx
diff --git a/src/components/pictograms/svg/PictogramObjClock.tsx b/src/components/pictograms/svg/PictogramObjClock.tsx
@@ -0,0 +1,20 @@
+import React from "react";
+import { Svg, Path } from "react-native-svg";
+import { SVGPictogramProps } from "../Pictogram";
+
+const PictogramObjClock = ({ size, color, ...props }: SVGPictogramProps) => (
+  <Svg fill="none" width={size} height={size} viewBox="0 0 240 240" {...props}>
+    <Path
+      d="M121 240c65.722 0 119-53.726 119-120C240 53.7258 186.722 0 121 0 55.2781 0 2 53.7258 2 120c0 66.274 53.2781 120 119 120Z"
+      fill="#AAEEEF"
+    />
+    <Path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M117 53c1.105 0 2 .8954 2 2v63.983l52.678 38.401c.893.651 1.089 1.902.438 2.794-.651.893-1.902 1.089-2.794.438l-53.5-39c-.517-.376-.822-.977-.822-1.616V55c0-1.1046.895-2 2-2Z"
+      fill="#00C5CA"
+    />
+  </Svg>
+);
+
+export default PictogramObjClock;
diff --git a/src/components/pictograms/svg/PictogramObjFlyingMessage.tsx b/src/components/pictograms/svg/PictogramObjFlyingMessage.tsx
@@ -0,0 +1,24 @@
+import React from "react";
+import { Svg, Path } from "react-native-svg";
+import { SVGPictogramProps } from "../Pictogram";
+
+const PictogramObjFlyingMessage = ({
+  size,
+  color,
+  ...props
+}: SVGPictogramProps) => (
+  <Svg fill="none" width={size} height={size} viewBox="0 0 240 240" {...props}>
+    <Path
+      d="M69.0186 82.1914 50.677 65.9896c-4.0915-3.6142-2.1733-10.357 3.2079-11.2764L224.344 25.5895c5.663-.9675 9.704 5.3495 6.451 10.085L152.866 149.143c-2.281 3.322-7.004 3.788-9.891.977l-9.628-9.374c-2.233-2.174-5.695-2.457-8.251-.675l-25.9573 18.102c-3.707 2.585-8.8556.691-10.003-3.68L71.002 85.4119a6.49865 6.49865 0 0 0-1.9834-3.2205Z"
+      fill="#AAEEEF"
+    />
+    <Path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M225.313 32.7611c.696-.4487.897-1.377.448-2.0734-.448-.6964-1.377-.8971-2.073-.4484l-117.3 75.5827c-.758.488-1.421 1.096-1.967 1.794-.17.071-.33.175-.469.311-.326.318-.476.748-.449 1.17-.243.509-.434 1.046-.566 1.603l-10.8962 45.954c-.1911.806.3074 1.615 1.1135 1.806.806.191 1.6144-.308 1.8056-1.114l10.7761-45.447 19.691 20.149c.579.593 1.529.604 2.121.025.593-.579.604-1.529.025-2.121l-20.426-20.902c.259-.265.549-.502.865-.706l117.301-75.5829Zm-29.836 10.6617c.785-.2629 1.209-1.1129.946-1.8985-.263-.7856-1.113-1.2093-1.899-.9463l-119.4997 40c-.7856.2629-1.2093 1.1129-.9463 1.8985.2629.7856 1.1129 1.2093 1.8985.9463l119.5005-40ZM89.7303 173.358c.474-.679.3075-1.614-.3719-2.088-.6795-.474-1.6145-.308-2.0885.372-14.7656 21.164-40.7893 42.307-85.63845 38.364-.82524-.073-1.55305.538-1.6256 1.363-.07254.825.53763 1.553 1.36288 1.625 46.15087 4.058 73.12717-17.8 88.36157-39.636Z"
+      fill="#00C5CA"
+    />
+  </Svg>
+);
+
+export default PictogramObjFlyingMessage;
diff --git a/...pictograms/svg/PictogramFollowMessage.tsx → ...tograms/svg/PictogramObjFollowMessage.tsx b/...pictograms/svg/PictogramFollowMessage.tsx → ...tograms/svg/PictogramObjFollowMessage.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import { Svg, Path } from "react-native-svg";
 import { SVGPictogramProps } from "../Pictogram";
 
-const PictogramFollowMessage = ({
+const PictogramObjFollowMessage = ({
   size,
   color,
   ...props
@@ -19,4 +19,4 @@ const PictogramFollowMessage = ({
   </Svg>
 );
 
-export default PictogramFollowMessage;
+export default PictogramObjFollowMessage;