[IOAPPFD0-145] Add the new PictogramBleed component (#63)

## Short description This PR adds the new `PictogramBleed` component. It also updates the `AssetViewerBox` component in the `example` app to better display the pictograms. > [!WARNING] > This PR introduces a breaking change for some pictograms. Here are the replacements: > * `donation` → `charity` > * `focusOn` → `help` > * `setup` → `empty` ## List of changes proposed in this pull request - Add the new **_Bleed Pictograms_** section to the `Pictograms` page - Add the new `PictogramBleed` component, which only accepts pictograms that exist in the `IOPictogramsBleed` object - Update the `Banner` component to use the `PictogramBleed` component and accept only `IOPictogramsBleed` keys ### Preview <img src="https://github.com/pagopa/io-app-design-system/assets/1255491/d2d86e03-6d1d-4015-b69c-cd1a91d3f55c" width="300" /> Normal pictograms are marked with the `Bleed` indicator just to signal the presence of the bleed variant below: <img src="https://github.com/pagopa/io-app-design-system/assets/1255491/95adcaa3-cfa0-4f2a-94b5-9b90f5f6cd1e" width="300" /> ## How to test Go to the **_Pictograms_** page. Also check the **_Advice & Banners_** page
pagopa · Sep 12, 2023 · b41092f · b41092f
1 parent a453f29
commit b41092f
Show file tree

Hide file tree

Showing 21 changed files with 489 additions and 114 deletions.
diff --git a/example/src/components/AssetViewerBox.tsx b/example/src/components/AssetViewerBox.tsx
@@ -37,12 +37,18 @@ const styles = StyleSheet.create({
     position: "relative",
     aspectRatio: 1,
     borderRadius: 8,
-    padding: 32,
+    padding: 24,
     alignItems: "center",
     justifyContent: "center",
     borderColor: hexToRgba(IOColors.black, 0.1),
     borderWidth: 1
   },
+  assetItemBleed: {
+    paddingRight: 0,
+    paddingLeft: 8,
+    paddingVertical: 4,
+    justifyContent: "flex-end"
+  },
   assetItemSmall: {
     padding: 24
   },
@@ -67,16 +73,18 @@ const styles = StyleSheet.create({
     backgroundColor: IOColors.yellow,
     color: IOColors.black
   },
-  pillIconFont: {
-    backgroundColor: IOColors.aqua,
-    color: IOColors.black
+  pillBleed: {
+    backgroundColor: IOColors["success-500"],
+    color: IOColors.white
   }
 });
 
 type AssetViewerBoxProps = {
   name: string;
   image: React.ReactNode;
-  type?: "vector" | "raster" | "iconFont";
+  /* "bleed" shows the pictogram without padding
+  "hasBleed" shows the pictgram label on top right */
+  type?: "vector" | "raster" | "bleed" | "hasBleed";
   size?: "small" | "medium";
   colorMode?: "light" | "dark";
 };
@@ -95,9 +103,9 @@ const pillMap = {
     style: styles.pillRaster,
     text: "Png"
   },
-  iconFont: {
-    style: styles.pillIconFont,
-    text: "Font"
+  hasBleed: {
+    style: styles.pillBleed,
+    text: "Bleed"
   }
 };
 
@@ -118,6 +126,7 @@ export const AssetViewerBox = ({
       style={[
         styles.assetItem,
         size === "small" ? styles.assetItemSmall : {},
+        type === "bleed" ? styles.assetItemBleed : {},
         colorMode === "dark" ? styles.assetItemDark : {}
       ]}
     >
@@ -126,17 +135,18 @@ export const AssetViewerBox = ({
         source={FakeTransparentBg}
       />
       {image}
-      {type !== "vector" && (
-        <Text
-          style={[
-            styles.pill,
-            size === "small" ? styles.pillSmall : {},
-            pillMap[type].style
-          ]}
-        >
-          {pillMap[type].text}
-        </Text>
-      )}
+      {type === "raster" ||
+        (type === "hasBleed" && (
+          <Text
+            style={[
+              styles.pill,
+              size === "small" ? styles.pillSmall : {},
+              pillMap[type].style
+            ]}
+          >
+            {pillMap[type].text}
+          </Text>
+        ))}
     </View>
     <View
       style={{

diff --git a/example/src/pages/Advice.tsx b/example/src/pages/Advice.tsx
@@ -123,7 +123,7 @@ const renderBanner = () => {
               color={color}
               size="big"
               title="Banner title"
-              pictogramName="donation"
+              pictogramName="charity"
               action="Action text"
               onPress={onLinkPress}
             />
@@ -135,7 +135,7 @@ const renderBanner = () => {
               content={
                 "Fai una donazione alle organizzazioni umanitarie che assistono le vittime civile della crisi in Ucraina"
               }
-              pictogramName="donation"
+              pictogramName="charity"
             />
             <VSpacer size={24} />
             <Banner
@@ -145,7 +145,7 @@ const renderBanner = () => {
               content={
                 "Fai una donazione alle organizzazioni umanitarie che assistono le vittime civile della crisi in Ucraina"
               }
-              pictogramName="donation"
+              pictogramName="charity"
               action="Dona anche tu"
               onPress={onLinkPress}
             />
@@ -158,7 +158,7 @@ const renderBanner = () => {
               content={
                 "Fai una donazione alle organizzazioni umanitarie che assistono le vittime civile della crisi in Ucraina"
               }
-              pictogramName="donation"
+              pictogramName="charity"
             />
             <VSpacer size={24} />
             <Banner
@@ -169,7 +169,7 @@ const renderBanner = () => {
               content={
                 "Fai una donazione alle organizzazioni umanitarie che assistono le vittime civile della crisi in Ucraina"
               }
-              pictogramName="donation"
+              pictogramName="charity"
               action="Dona anche tu"
               onPress={onLinkPress}
             />
@@ -185,7 +185,7 @@ const renderBanner = () => {
               content={
                 "Fai una donazione alle organizzazioni umanitarie che assistono le vittime civile della crisi in Ucraina"
               }
-              pictogramName="donation"
+              pictogramName="charity"
               onClose={onClose}
               labelClose="Nascondi questo banner"
             />
@@ -199,7 +199,7 @@ const renderBanner = () => {
               }
               action="Dona anche tu"
               onPress={onLinkPress}
-              pictogramName="donation"
+              pictogramName="charity"
               onClose={onClose}
               labelClose="Nascondi questo banner"
             />
@@ -213,7 +213,7 @@ const renderBanner = () => {
               content={
                 "Fai una donazione alle organizzazioni umanitarie che assistono le vittime civile della crisi in Ucraina"
               }
-              pictogramName="donation"
+              pictogramName="charity"
               action="Dona anche tu"
               onPress={onLinkPress}
             />
@@ -227,7 +227,7 @@ const renderBanner = () => {
               }
               action="Dona anche tu"
               onPress={onLinkPress}
-              pictogramName="donation"
+              pictogramName="charity"
             />
             <VSpacer size={24} />
             <Banner
@@ -237,7 +237,7 @@ const renderBanner = () => {
               content={
                 "Fai una donazione alle organizzazioni umanitarie che assistono le vittime civile della crisi in Ucraina"
               }
-              pictogramName="donation"
+              pictogramName="charity"
             />
           </ComponentViewerBox>
         </React.Fragment>

diff --git a/example/src/pages/Pictograms.tsx b/example/src/pages/Pictograms.tsx
@@ -1,10 +1,12 @@
 import {
   H2,
   IOPictograms,
+  IOPictogramsBleed,
   IOPictogramsLegacy,
   IOThemeContext,
   IOVisualCostants,
   Pictogram,
+  PictogramBleed,
   SVGPictogramProps
 } from "@pagopa/io-app-design-system";
 import * as React from "react";
@@ -69,13 +71,45 @@ export const Pictograms = () => {
           <AssetViewerBox
             key={pictogramItemName}
             name={pictogramItemName}
+            type={
+              Object.keys(IOPictogramsBleed).includes(pictogramItemName)
+                ? "hasBleed"
+                : "vector"
+            }
             image={
               <Pictogram name={pictogramItemName as IOPictograms} size="100%" />
             }
           />
         ))}
       </View>
 
+      <H2
+        color={theme["textHeading-default"]}
+        weight={"SemiBold"}
+        style={{
+          marginBottom: 16,
+          paddingTop: IOVisualCostants.appMarginDefault
+        }}
+      >
+        Bleed Pictograms
+      </H2>
+      <View style={styles.itemsWrapper}>
+        {Object.entries(IOPictogramsBleed).map(([pictogramItemName]) => (
+          <AssetViewerBox
+            type="bleed"
+            key={pictogramItemName}
+            name={pictogramItemName}
+            size="small"
+            image={
+              <PictogramBleed
+                name={pictogramItemName as IOPictogramsBleed}
+                size="100%"
+              />
+            }
+          />
+        ))}
+      </View>
+
       <H2
         color={theme["textHeading-default"]}
         weight={"SemiBold"}

diff --git a/src/components/banner/Banner.tsx b/src/components/banner/Banner.tsx
@@ -28,9 +28,9 @@ import { IOColors } from "../../core/IOColors";
 import { WithTestID } from "../../utils/types";
 import { ButtonLink, IconButton } from "../buttons";
 import {
+  PictogramBleed,
   IOPictogramSizeScale,
-  IOPictogramsBleed,
-  Pictogram
+  IOPictogramsBleed
 } from "../pictograms";
 import { VSpacer } from "../spacer";
 import { H6, LabelSmall } from "../typography";
@@ -226,7 +226,7 @@ export const Banner = ({
         )}
       </View>
       <View style={[styles.bleedPictogram, IOStyles.selfCenter]}>
-        <Pictogram
+        <PictogramBleed
           name={pictogramName}
           size={size === "big" ? sizePictogramBig : sizePictogramSmall}
         />

diff --git a/src/components/banner/__test__/__snapshots__/banner.test.tsx.snap b/src/components/banner/__test__/__snapshots__/banner.test.tsx.snap
@@ -225,6 +225,8 @@ exports[`Test Banner Components Banner Snapshot 1`] = `
         align="xMidYMid"
         bbHeight={80}
         bbWidth={80}
+        color={4278240714}
+        fill="none"
         focusable={false}
         height={80}
         meetOrSlice={0}
@@ -243,25 +245,57 @@ exports[`Test Banner Components Banner Snapshot 1`] = `
             },
           ]
         }
+        tintColor={4278240714}
         vbHeight={240}
         vbWidth={240}
         width={80}
       >
-        <RNSVGGroup>
+        <RNSVGGroup
+          fill={null}
+          propList={
+            [
+              "fill",
+            ]
+          }
+        >
+          <RNSVGPath
+            d="M133.46 173.8c-2.88 0-5.61-1.57-7.03-4.28-1.01-1.92-1.2-4.11-.53-6.18.66-2.04 2.07-3.69 3.98-4.64 6.87-3.44 17.93-6.91 24.11-8.73-2.58-2.4-4.34-6.01-4.32-9.54 0-2.68 1.14-9.19 11.43-11.65 16.11-3.86 78.12 18.71 80.75 19.67l-1.37 3.76c-.16-.06-16.14-5.89-33.81-11.18-29.21-8.75-40.4-9.37-44.64-8.36-5.38 1.29-8.35 4.05-8.36 7.77-.01 3.88 3.08 7.55 5.86 8.23.88.22 1.51 1.01 1.52 1.92 0 .91-.6 1.71-1.48 1.95-.18.05-18.53 5.04-27.9 9.73-.94.47-1.64 1.28-1.96 2.29-.33 1.03-.24 2.13.27 3.09.96 1.83 3.13 2.61 5.04 1.82 9.17-3.8 21.12-8.32 26.15-8.25l-.06 4h-.08c-3.38 0-12.29 2.89-24.47 7.94-1.01.42-2.05.62-3.08.62l-.02.02Z"
+            fill={4278927075}
+            propList={
+              [
+                "fill",
+              ]
+            }
+          />
+          <RNSVGPath
+            d="M137.37 190.23c-3.78 0-7.45-2.01-9.39-5.54-2.16-3.92-1.62-8.82 1.33-12.19l1.47-1.68 3.01 2.63-1.47 1.68c-1.84 2.11-2.18 5.17-.83 7.63 1.76 3.21 5.81 4.41 9.02 2.67 12.01-6.5 20.08-9.56 23.94-9.11l-.47 3.97c-2.88-.34-10.93 2.9-21.57 8.66-1.6.87-3.33 1.28-5.04 1.28Z"
+            fill={4278927075}
+            propList={
+              [
+                "fill",
+              ]
+            }
+          />
+          <RNSVGPath
+            d="M240.29 213.7c-39.81-19.17-81.44-13.87-92.88-10.51-2.82.83-5.84.2-8.1-1.68-2.34-1.95-3.52-5.04-3.07-8.05l.77-5.2 3.96.59-.77 5.2c-.25 1.64.4 3.33 1.67 4.39 1.23 1.03 2.88 1.37 4.41.92 11.83-3.48 54.81-8.97 95.75 10.74l-1.73 3.6h-.01ZM169.508 150.199l-.698 3.939 10.348 1.834.698-3.939-10.348-1.834Z"
+            fill={4278927075}
+            propList={
+              [
+                "fill",
+              ]
+            }
+          />
           <RNSVGPath
-            clipRule={0}
-            d="M147.212 192.138c.852.489 1.722.687 2.557.688 1.688-.002 3.239-.8 4.178-1.531 7.01-3.154 96.182-35.614 99.267-36.674h.001l.189-.065-1.328-3.835-.574.197c-5.355 1.842-93.089 33.823-99.504 36.809-.155.077-.319.189-.457.301 0 0-.006.004-.015.011h-.001c-.157.12-1.433 1.085-2.287.591-1.146-.68-6.407-6.424 2.924-52.883 4.407-21.91 2.285-38.661-6.295-49.7966-10.504-13.6464-27.726-14.7298-33.383-15.0824l-.888-.0516c-3.536.0774-11.8661.7223-12.832 5.1851-.6467 2.9494 1.932 5.8989 8.503 9.5534-12.1766.4299-28.967 2.4593-35.0553 9.9833-.0776.1032-.1466.2063-.2069.3181-.6037 1.1179-1.1901 3.5084.3794 5.3917.4798.573 1.161 1.147 2.2752 1.557-2.1345 1.696-3.9916 3.899-3.8706 6.38.207 4.187 5.5364 5.984 7.287 6.569.1294.043.2587.078.3967.095.1811.026 1.7075.206 4.0963.206l-.0087.009c1.4315 0 3.1716-.066 5.1144-.271-.581 2.115-.8166 4.783.629 6.892 1.3194 1.935 3.6737 2.898 6.9248 2.898l.0087-.009c.8537 0 1.7678-.06 2.7509-.198 1.8857-.095 5.7711-.365 9.6731-1.091-3.196 15.023-15.1229 77.882 4.582 96.651 1.561 2.063 15.359 19.055 45.05 19.055v.008c15.574 0 65.53-14.678 90.374-28.642l-2-3.534C138 262 121 220.936 115.442 218.433c-.086-.12-.181-.232-.284-.326-19.07-17.837-5.227-85.166-3.106-94.877 2.869-.886 5.268-2.124 6.21-3.856l-3.579-1.934c-1 1.84-9.71 3.525-17.0745 3.903-3.0701.422-5.2432.069-5.9417-.945-.8383-1.215-.129-3.711.5702-5.31 3.7122-.764 7.786-2.086 11.701-4.33l-2.026-3.517c-9.8141 5.624-21.1456 4.764-22.7496 4.609-3.1218-1.083-4.2773-2.21-4.3118-2.855-.0756-1.499 3.5311-4.206 6.9223-5.792 3.4963-.397 8.28-1.458 14.887-3.5632l-1.2418-3.8609c-17.3595 5.5291-19.8 2.9924-19.9035 2.8807-.138-.1634-.0518-.5504.0259-.7653 6.5712-7.6702 29.8555-8.3581 36.8925-8.3839 1.285-.0086 2.38-.8857 2.664-2.1326.285-1.2726-.336-2.5624-1.517-3.13-10.487-5.0561-10.849-7.3434-10.849-7.3434.483-.9373 4.915-1.9433 8.779-2.0379l.724.0516.008.0004c5.757.3615 21.029 1.3204 30.408 13.4998 7.83 10.1639 9.693 25.8227 5.528 46.5287-10.391 51.726-3.295 55.841-.966 57.191Z"
+            d="M191.07 170.8c-10.44-5.97-15.77-22.75-15.99-23.46l3.82-1.19c.05.16 5.09 15.99 14.16 21.18l-1.99 3.47ZM163.258 156.644l-3.982.38 2.844 29.854 3.982-.379-2.844-29.855Z"
             fill={4278927075}
-            fillRule={0}
             propList={
               [
                 "fill",
-                "fillRule",
               ]
             }
           />
           <RNSVGPath
-            d="M89.9306 0C76.0999 0 64.8867 11.1786 64.8867 24.9668 64.8867 11.1786 53.6769 0 39.8462 0c-.2464 0-.4929.00332-.7393.00996C21.2631.52456 11.9649 21.5073 23.268 35.2822l32.1174 39.1467c4.9122 5.986 14.0938 5.986 19.006 0l32.1176-39.1467C117.809 21.5073 108.51.52457 90.6666.00996A27.44628 27.44628 0 0 0 89.9273 0h.0033Z"
+            d="M133.75 39.82c-4.15-4.68-9.41-8.27-15.31-10.44-5.9-2.18-12.26-2.88-18.5099-2.03-3.78.51-7.45 1.58-10.89 3.15-4.49 2.05-7.86 5.81-10.65 9.88l-3.1 4.53c-3.74-2.62-7.92-4.57-12.35-5.72-4.86-1.26-9.92-1.56-14.89-.88-4.97.68-9.77 2.33-14.1 4.86-4.33 2.52-8.13 5.87-11.16 9.85-3.04 3.98-5.25 8.52-6.53 13.35-1.28 4.83-1.59 9.87-.91 14.81.68 4.95 2.34 9.71 4.87 14.02 2.53 4.31 5.9 8.08 9.89 11.09L103.6 145.21l26.72-45.64 10.54-20.04c1.85-4.42 3.76-12.92 1.34-23.34-1.41-6.07-4.32-11.7-8.47-16.38l.02.01Z"
             fill={4289392367}
             propList={
               [
@@ -270,14 +304,11 @@ exports[`Test Banner Components Banner Snapshot 1`] = `
             }
           />
           <RNSVGPath
-            clipRule={0}
-            d="M87.1816 7.87002c0-.72428.5872-1.31143 1.3115-1.31143 5.9448 0 10.2533 2.29037 13.0539 5.63291 2.77 3.3058 3.994 7.5532 3.994 11.4157 0 .7242-.587 1.3114-1.311 1.3114s-1.311-.5872-1.311-1.3114c0-3.3505-1.07-6.9716-3.3825-9.7312-2.2813-2.7228-5.8413-4.69455-11.0434-4.69455-.7243 0-1.3115-.58715-1.3115-1.31143Z"
+            d="M25.2295 81.79c-.79 0-1.45-.62-1.5-1.42-1.37-25.26 18.17-33.75 28.7-34.71.83-.08 1.55.53 1.63 1.36.08.83-.53 1.55-1.35 1.63-1.12.11-27.54 2.92-25.98 31.56.04.83-.59 1.53-1.42 1.58h-.08Z"
             fill={4278240714}
-            fillRule={0}
             propList={
               [
                 "fill",
-                "fillRule",
               ]
             }
           />

diff --git a/src/components/banner/__test__/banner.test.tsx b/src/components/banner/__test__/banner.test.tsx
@@ -16,7 +16,7 @@ describe("Test Banner Components", () => {
         color="neutral"
         size="big"
         title="Banner title"
-        pictogramName="donation"
+        pictogramName="charity"
         action="Action text"
         onPress={onLinkPress}
       />