@pagopa/io-app-design-system 1.16.1 → 1.17.1

package/src/components/typography/__test__/__snapshots__/typography.test.tsx.snap

@@ -102,29 +102,29 @@ exports[`Test Typography Components H1 Snapshot 1`] = `
   allowFontScaling={false}
   color="black"
   defaultColor="black"
-  defaultWeight="Bold"
+  defaultWeight="SemiBold"
   font="TitilliumWeb"
   fontStyle={
     {
-      "fontSize": 28,
-      "lineHeight": 42,
+      "fontSize": 31,
+      "lineHeight": 43,
     }
   }
   style={
     [
       {
-        "fontSize": 28,
-        "lineHeight": 42,
+        "fontSize": 31,
+        "lineHeight": 43,
       },
       {
         "color": "#0E0F13",
         "fontFamily": "Titillium Web",
         "fontStyle": "normal",
-        "fontWeight": "700",
+        "fontWeight": "600",
       },
     ]
   }
-  weight="Bold"
+  weight="SemiBold"
 >
   Text
 </Text>
@@ -135,29 +135,29 @@ exports[`Test Typography Components H1 Snapshot 2`] = `
   allowFontScaling={false}
   color="white"
   defaultColor="black"
-  defaultWeight="Bold"
+  defaultWeight="SemiBold"
   font="TitilliumWeb"
   fontStyle={
     {
-      "fontSize": 28,
-      "lineHeight": 42,
+      "fontSize": 31,
+      "lineHeight": 43,
     }
   }
   style={
     [
       {
-        "fontSize": 28,
-        "lineHeight": 42,
+        "fontSize": 31,
+        "lineHeight": 43,
       },
       {
         "color": "#FFFFFF",
         "fontFamily": "Titillium Web",
         "fontStyle": "normal",
-        "fontWeight": "700",
+        "fontWeight": "600",
       },
     ]
   }
-  weight="Bold"
+  weight="SemiBold"
 >
   Text
 </Text>
@@ -168,29 +168,29 @@ exports[`Test Typography Components H2 Snapshot 1`] = `
   allowFontScaling={false}
   color="black"
   defaultColor="black"
-  defaultWeight="Bold"
+  defaultWeight="SemiBold"
   font="TitilliumWeb"
   fontStyle={
     {
-      "fontSize": 26,
-      "lineHeight": 39,
+      "fontSize": 28,
+      "lineHeight": 40,
     }
   }
   style={
     [
       {
-        "fontSize": 26,
-        "lineHeight": 39,
+        "fontSize": 28,
+        "lineHeight": 40,
       },
       {
         "color": "#0E0F13",
         "fontFamily": "Titillium Web",
         "fontStyle": "normal",
-        "fontWeight": "700",
+        "fontWeight": "600",
       },
     ]
   }
-  weight="Bold"
+  weight="SemiBold"
 >
   Text
 </Text>
@@ -201,29 +201,29 @@ exports[`Test Typography Components H3 Snapshot 1`] = `
   allowFontScaling={false}
   color="bluegreyDark"
   defaultColor="bluegreyDark"
-  defaultWeight="Bold"
+  defaultWeight="SemiBold"
   font="TitilliumWeb"
   fontStyle={
     {
-      "fontSize": 22,
-      "lineHeight": 33,
+      "fontSize": 24,
+      "lineHeight": 34,
     }
   }
   style={
     [
       {
-        "fontSize": 22,
-        "lineHeight": 33,
+        "fontSize": 24,
+        "lineHeight": 34,
       },
       {
         "color": "#17324D",
         "fontFamily": "Titillium Web",
         "fontStyle": "normal",
-        "fontWeight": "700",
+        "fontWeight": "600",
       },
     ]
   }
-  weight="Bold"
+  weight="SemiBold"
 >
   Text
 </Text>
@@ -234,29 +234,29 @@ exports[`Test Typography Components H3 Snapshot 2`] = `
   allowFontScaling={false}
   color="bluegreyLight"
   defaultColor="bluegreyDark"
-  defaultWeight="Bold"
+  defaultWeight="SemiBold"
   font="TitilliumWeb"
   fontStyle={
     {
-      "fontSize": 22,
-      "lineHeight": 33,
+      "fontSize": 24,
+      "lineHeight": 34,
     }
   }
   style={
     [
       {
-        "fontSize": 22,
-        "lineHeight": 33,
+        "fontSize": 24,
+        "lineHeight": 34,
       },
       {
         "color": "#CCD4DC",
         "fontFamily": "Titillium Web",
         "fontStyle": "normal",
-        "fontWeight": "700",
+        "fontWeight": "600",
       },
     ]
   }
-  weight="Bold"
+  weight="SemiBold"
 >
   Text
 </Text>
@@ -267,29 +267,29 @@ exports[`Test Typography Components H3 Snapshot 3`] = `
   allowFontScaling={false}
   color="white"
   defaultColor="bluegreyDark"
-  defaultWeight="Bold"
+  defaultWeight="SemiBold"
   font="TitilliumWeb"
   fontStyle={
     {
-      "fontSize": 22,
-      "lineHeight": 33,
+      "fontSize": 24,
+      "lineHeight": 34,
     }
   }
   style={
     [
       {
-        "fontSize": 22,
-        "lineHeight": 33,
+        "fontSize": 24,
+        "lineHeight": 34,
       },
       {
         "color": "#FFFFFF",
         "fontFamily": "Titillium Web",
         "fontStyle": "normal",
-        "fontWeight": "700",
+        "fontWeight": "600",
       },
     ]
   }
-  weight="Bold"
+  weight="SemiBold"
 >
   Text
 </Text>
@@ -300,29 +300,29 @@ exports[`Test Typography Components H3 Snapshot 4`] = `
   allowFontScaling={false}
   color="white"
   defaultColor="bluegreyDark"
-  defaultWeight="Bold"
+  defaultWeight="SemiBold"
   font="TitilliumWeb"
   fontStyle={
     {
-      "fontSize": 22,
-      "lineHeight": 33,
+      "fontSize": 24,
+      "lineHeight": 34,
     }
   }
   style={
     [
       {
-        "fontSize": 22,
-        "lineHeight": 33,
+        "fontSize": 24,
+        "lineHeight": 34,
       },
       {
         "color": "#FFFFFF",
         "fontFamily": "Titillium Web",
         "fontStyle": "normal",
-        "fontWeight": "700",
+        "fontWeight": "600",
       },
     ]
   }
-  weight="Bold"
+  weight="SemiBold"
 >
   Text
 </Text>
@@ -333,29 +333,29 @@ exports[`Test Typography Components H3 Snapshot 5`] = `
   allowFontScaling={false}
   color="bluegreyDark"
   defaultColor="bluegreyDark"
-  defaultWeight="Bold"
+  defaultWeight="SemiBold"
   font="TitilliumWeb"
   fontStyle={
     {
-      "fontSize": 22,
-      "lineHeight": 33,
+      "fontSize": 24,
+      "lineHeight": 34,
     }
   }
   style={
     [
       {
-        "fontSize": 22,
-        "lineHeight": 33,
+        "fontSize": 24,
+        "lineHeight": 34,
       },
       {
         "color": "#17324D",
         "fontFamily": "Titillium Web",
         "fontStyle": "normal",
-        "fontWeight": "700",
+        "fontWeight": "600",
       },
     ]
   }
-  weight="Bold"
+  weight="SemiBold"
 >
   Text
 </Text>
@@ -370,14 +370,14 @@ exports[`Test Typography Components H4 Snapshot 1`] = `
   font="TitilliumWeb"
   fontStyle={
     {
-      "fontSize": 20,
+      "fontSize": 22,
       "lineHeight": 30,
     }
   }
   style={
     [
       {
-        "fontSize": 20,
+        "fontSize": 22,
         "lineHeight": 30,
       },
       {
@@ -403,14 +403,14 @@ exports[`Test Typography Components H4 Snapshot 2`] = `
   font="TitilliumWeb"
   fontStyle={
     {
-      "fontSize": 20,
+      "fontSize": 22,
       "lineHeight": 30,
     }
   }
   style={
     [
       {
-        "fontSize": 20,
+        "fontSize": 22,
         "lineHeight": 30,
       },
       {
@@ -436,14 +436,14 @@ exports[`Test Typography Components H4 Snapshot 3`] = `
   font="TitilliumWeb"
   fontStyle={
     {
-      "fontSize": 20,
+      "fontSize": 22,
       "lineHeight": 30,
     }
   }
   style={
     [
       {
-        "fontSize": 20,
+        "fontSize": 22,
         "lineHeight": 30,
       },
       {
@@ -469,14 +469,14 @@ exports[`Test Typography Components H4 Snapshot 4`] = `
   font="TitilliumWeb"
   fontStyle={
     {
-      "fontSize": 20,
+      "fontSize": 22,
       "lineHeight": 30,
     }
   }
   style={
     [
       {
-        "fontSize": 20,
+        "fontSize": 22,
         "lineHeight": 30,
       },
       {
@@ -502,14 +502,14 @@ exports[`Test Typography Components H4 Snapshot 5`] = `
   font="TitilliumWeb"
   fontStyle={
     {
-      "fontSize": 20,
+      "fontSize": 22,
       "lineHeight": 30,
     }
   }
   style={
     [
       {
-        "fontSize": 20,
+        "fontSize": 22,
         "lineHeight": 30,
       },
       {
@@ -535,14 +535,14 @@ exports[`Test Typography Components H4 Snapshot 6`] = `
   font="TitilliumWeb"
   fontStyle={
     {
-      "fontSize": 20,
+      "fontSize": 22,
       "lineHeight": 30,
     }
   }
   style={
     [
       {
-        "fontSize": 20,
+        "fontSize": 22,
         "lineHeight": 30,
       },
       {
@@ -568,14 +568,14 @@ exports[`Test Typography Components H4 Snapshot 7`] = `
   font="TitilliumWeb"
   fontStyle={
     {
-      "fontSize": 20,
+      "fontSize": 22,
       "lineHeight": 30,
     }
   }
   style={
     [
       {
-        "fontSize": 20,
+        "fontSize": 22,
         "lineHeight": 30,
       },
       {
@@ -749,15 +749,15 @@ exports[`Test Typography Components H6 Snapshot 1`] = `
   font="TitilliumWeb"
   fontStyle={
     {
-      "fontSize": 16,
-      "lineHeight": 24,
+      "fontSize": 18,
+      "lineHeight": 25,
     }
   }
   style={
     [
       {
-        "fontSize": 16,
-        "lineHeight": 24,
+        "fontSize": 18,
+        "lineHeight": 25,
       },
       {
         "color": "#0E0F13",
@@ -849,12 +849,14 @@ exports[`Test Typography Components LabelSmall Snapshot 1`] = `
   fontStyle={
     {
       "fontSize": 14,
+      "lineHeight": 21,
     }
   }
   style={
     [
       {
         "fontSize": 14,
+        "lineHeight": 21,
       },
       {
         "color": "#0073E6",
@@ -880,12 +882,14 @@ exports[`Test Typography Components LabelSmall Snapshot 2`] = `
   fontStyle={
     {
       "fontSize": 14,
+      "lineHeight": 21,
     }
   }
   style={
     [
       {
         "fontSize": 14,
+        "lineHeight": 21,
       },
       {
         "color": "#0073E6",
@@ -911,12 +915,14 @@ exports[`Test Typography Components LabelSmall Snapshot 3`] = `
   fontStyle={
     {
       "fontSize": 14,
+      "lineHeight": 21,
     }
   }
   style={
     [
       {
         "fontSize": 14,
+        "lineHeight": 21,
       },
       {
         "color": "#475A6D",
@@ -942,12 +948,14 @@ exports[`Test Typography Components LabelSmall Snapshot 4`] = `
   fontStyle={
     {
       "fontSize": 14,
+      "lineHeight": 21,
     }
   }
   style={
     [
       {
         "fontSize": 14,
+        "lineHeight": 21,
       },
       {
         "color": "#C02927",
@@ -973,12 +981,14 @@ exports[`Test Typography Components LabelSmall Snapshot 5`] = `
   fontStyle={
     {
       "fontSize": 14,
+      "lineHeight": 21,
     }
   }
   style={
     [
       {
         "fontSize": 14,
+        "lineHeight": 21,
       },
       {
         "color": "#FFFFFF",

package/src/components/typography/index.tsx

@@ -13,6 +13,7 @@ export * from "./H6";
 export * from "./Hero";
 export * from "./Label";
 export * from "./LabelSmall";
+export * from "./LabelSmallAlt";
 export * from "./LabelLink";
 export * from "./BodyMonospace";
 export * from "./common";

package/src/core/IOSpacing.ts

@@ -28,8 +28,10 @@ export const IOSpacer: ReadonlyArray<IOSpacer> = [
 ] as const;
 
 // Margin values used in the new `<ContentWrapper>` component
-export type IOAppMargin = Extract<IOSpacingScale, 8 | 16 | 24 | 32>;
-export const IOAppMargin: ReadonlyArray<IOAppMargin> = [8, 16, 24, 32] as const;
+export type IOAppMargin = Extract<IOSpacingScale, 8 | 16 | 24 | 32 | 48>;
+export const IOAppMargin: ReadonlyArray<IOAppMargin> = [
+  8, 16, 24, 32, 48
+] as const;
 
 // Values used in the `<Alert>` component
 export type IOAlertSpacing = Extract<IOSpacingScale, 16 | 24>;

package/lib/commonjs/components/icons/generateNewIcons.js

@@ -1,165 +0,0 @@
-"use strict";
-
-/* eslint-disable @typescript-eslint/no-var-requires */
-/* eslint-disable no-console */
-/* eslint-disable @typescript-eslint/restrict-plus-operands */
-
-/**
-DRAFT for an AUTOMATIC process to generate new icon components 
-(`Icon....tsx`) from the SVG files exported from Figma.
-
-Prerequisites:
-- The icon must be exported from the 24 × 24 frame
-- The icon must be saved with the final name
-  - To learn more about naming conventions, please read the local README
-*/
-
-// STEPS:
-
-/**
- * 1. Only process the newly added files
- *
- * Suggested path:
- * 1. Files that need to be processed must be in the `svg/originals` folder.
- * 2. Add a new file with the timestamp of the last process run.
- *    The file must be committed along with others.
- * 3. Only files added after that timestamp value will be processed.
- * 4. After the process run, update the new file with the current timestamp.
- */
-
-/**
- * 2. Optimize SVG files with SVGO package (https://github.com/svg/svgo)
- *
- * Suggested path:
- * 1. Add `svgo` to the `package.json` to use it as an executable
- * 2. Configure it with the following parameters:
- *   - removeDimensions
- *   - removeRasterImages
- *   - removeScriptElement
- *   - removeViewBox (disabled)
- * 3. Overwrite the original files
- * 4. Optionally save the old ones in a `tmp` folder, which may be useful
- *    for debugging purposes.
- *    - Consider adding a `--debug' flag to the
- *      command to enable this behavior.
- *    - Add the `tmp` folder to `.gitignore` to keep the folder clean
- *  5. Check the files after the optimizations
- */
-
-/**
- * 3. Create the relative React component (with .tsx)
- *
- * Suggested path:
- * - For every new SVG file:
- *   1. Copy all the code contained in the `<svg>` tag
- *   2. Use the file `_IconTemplate.tsx` as component template
- *      - Replace `IconTemplate` with the original SVG name
- *      - Remove all the comments inserted in the component file
- *   3. Replace the `{SVGContent}` placeholder with the code copied
- *      in the step 1, replacing all the tags with the appropriate
- *      React ones. E.g: `path` becomes `Path` and so on…
- *   4. Replace all the color values, set in hexadecimal format, with the
- *      `currentColor` attribute.
- *      E.g: fill="#CCCCCC" -> fill="currentColor"
- *   5. Save a new file in the `svg` folder with the same filename
- *      of the relative SVG file and extension `.tsx`.
- *      E.g: svg/originals/IconProfile.svg -> svg/IconProfile.tsx
- *   6. Save the list of processed SVG files and corresponding generated
- *      React components to a separate file. Add it to the `.gitignore`
- *      to keep the folder clean.
- */
-
-const path = require("path");
-const join = path.join;
-const {
-  optimize
-} = require("svgo");
-const prettier = require("prettier");
-const fs = require("fs-extra");
-const {
-  transform
-} = require("@svgr/core");
-const svgDir = join(__dirname, "svg/originals");
-const tsxDir = join(__dirname, "svg");
-const templateFilePath = join(__dirname, "svg/_IconTemplate.tsx");
-const timestampFilePath = join(__dirname, "timestamp.txt");
-const convertTimestampToReadableFormat = timestamp => new Date(timestamp).toLocaleString("it-IT", {
-  timeZone: "Europe/Rome"
-});
-fs.readFile(timestampFilePath, "utf8", (err, timestamp) => {
-  if (err) {
-    console.log("Timestamp file not found.");
-    throw err;
-  }
-  console.log("Last processed timestamp:", convertTimestampToReadableFormat(timestamp));
-  console.log(`————————————————`);
-  fs.readdir(svgDir, (err, files) => {
-    if (err) {
-      throw err;
-    }
-    files.forEach(file => {
-      const filePath = join(svgDir, file);
-      const fileStats = fs.statSync(filePath);
-
-      /* Only process files with a more recent creation
-      date later than the timestamp value */
-      if (fileStats.mtime > new Date(timestamp)) {
-        const data = fs.readFileSync(filePath, "utf8");
-
-        // Check if the file is an SVG
-        if (!file.endsWith(".svg")) {
-          return;
-        }
-
-        // Using SVGO to optimize the SVG
-        const result = optimize(data, {
-          path: filePath,
-          plugins: ["removeDimensions", "removeRasterImages", "removeScriptElement", "removeViewBox"]
-        });
-        // Overwrite original SVG file with optimized code
-        fs.writeFileSync(filePath, result.data);
-
-        // Convert SVG to JSX using `svgr`
-        const jsxCode = transform.sync(result.data, {
-          // Optimize SVG code using SVGO
-          svgo: true,
-          svgoConfig: {
-            removeRasterImages: true,
-            removeScriptElement: true,
-            removeUselessDefs: true
-          },
-          // Transform tags in Capital Case for React Native
-          native: true,
-          // Remove `width` and `height` attrs
-          dimensions: false,
-          /* Prettify the result */
-          plugins: ["@svgr/plugin-jsx"]
-        });
-
-        /* Replace hardcoded color value with `currentColor` */
-        const jsxCodeWithoutHardcodedColors = jsxCode.replace(/fill="[^"]*"/g, 'fill="currentColor"');
-
-        // Extract only the Path tags from the JSX code
-        const pathTagRegex = /<Path[^>]*\/>/g;
-        const pathTags = jsxCodeWithoutHardcodedColors.match(pathTagRegex);
-        const jsxCodeWithPathOnly = pathTags.join("");
-        const template = fs.readFileSync(templateFilePath, "utf8");
-        const componentData = template.replace(/IconTemplate/g, file.replace(".svg", "")).replace(/\/\/.*\n/g, "") // Remove lines starting with //
-        .replace(`{/* SVGContent */}`, jsxCodeWithPathOnly);
-        const fileWithTsxExtension = file.replace(".svg", ".tsx");
-        const tsxFilePath = join(tsxDir, fileWithTsxExtension);
-        fs.writeFileSync(tsxFilePath, prettier.format(componentData, {
-          parser: "typescript"
-        }));
-        console.log(`${file} → ${fileWithTsxExtension}`);
-      }
-    });
-    const newTimestamp = new Date();
-    const convertedISOTimestamp = newTimestamp.toISOString();
-    fs.writeFileSync(timestampFilePath, convertedISOTimestamp);
-    const readableUpdatedTimestamp = convertTimestampToReadableFormat(newTimestamp);
-    console.log(`————————————————`);
-    console.log("Updated timestamp:", readableUpdatedTimestamp);
-  });
-});
-//# sourceMappingURL=generateNewIcons.js.map