[IOPLT-154] chore: adds fonts variation for legacy typography components

example/src/pages/MainScreen.tsx

@@ -7,7 +7,9 @@ import {
   H1,
   LabelSmall,
   VSpacer,
-  ListItemNav
+  ListItemNav,
+  useIOExperimentalDesign,
+  ListItemSwitch
 } from "@pagopa/io-app-design-system";
 import APP_ROUTES from "../navigation/routes";
 import { AppParamsList } from "../navigation/params";
@@ -54,7 +56,7 @@ const DESIGN_SYSTEM_SECTION_DATA = [
 
 const MainScreen = (props: Props) => {
   const theme = useIOTheme();
-
+  const { isExperimental, setExperimental } = useIOExperimentalDesign();
   const renderDSNavItem = ({
     item: { title, route }
   }: {
@@ -85,16 +87,26 @@ const MainScreen = (props: Props) => {
   const renderDSSectionFooter = () => <VSpacer size={24} />;
 
   return (
-    <SectionList
-      keyExtractor={(item, index) => `${item.route}-${index}`}
-      stickySectionHeadersEnabled={false}
-      contentContainerStyle={IOStyles.horizontalContentPadding}
-      renderSectionHeader={renderDSSection}
-      renderSectionFooter={renderDSSectionFooter}
-      renderItem={renderDSNavItem}
-      ItemSeparatorComponent={() => <Divider />}
-      sections={DESIGN_SYSTEM_SECTION_DATA}
-    />
+    <>
+      <View style={IOStyles.horizontalContentPadding}>
+        <ListItemSwitch
+          label="Abilita Design Sperimentale"
+          value={isExperimental}
+          onSwitchValueChange={setExperimental}
+        />
+        <VSpacer size={4} />
+      </View>
+      <SectionList
+        keyExtractor={(item, index) => `${item.route}-${index}`}
+        stickySectionHeadersEnabled={false}
+        contentContainerStyle={IOStyles.horizontalContentPadding}
+        renderSectionHeader={renderDSSection}
+        renderSectionFooter={renderDSSectionFooter}
+        renderItem={renderDSNavItem}
+        ItemSeparatorComponent={() => <Divider />}
+        sections={DESIGN_SYSTEM_SECTION_DATA}
+      />
+    </>
   );
 };
 

src/components/banner/__test__/__snapshots__/banner.test.tsx.snap

@@ -72,8 +72,8 @@ exports[`Test Banner Components Banner Snapshot 1`] = `
       <Text
         color="blueIO-850"
         defaultColor="black"
-        defaultWeight="Regular"
-        font="ReadexPro"
+        defaultWeight="SemiBold"
+        font="TitilliumWeb"
         fontStyle={
           {
             "fontSize": 16,
@@ -88,13 +88,13 @@ exports[`Test Banner Components Banner Snapshot 1`] = `
             },
             {
               "color": "#031344",
-              "fontFamily": "Readex Pro",
+              "fontFamily": "Titillium Web",
               "fontStyle": "normal",
-              "fontWeight": "400",
+              "fontWeight": "600",
             },
           ]
         }
-        weight="Regular"
+        weight="SemiBold"
       >
         Banner title
       </Text>

src/components/buttons/ButtonExtendedOutline.tsx

@@ -14,7 +14,7 @@ import Animated, {
   withSpring
 } from "react-native-reanimated";
 import { IOIcons, Icon } from "../icons";
-import { H4, LabelSmall } from "../typography";
+import { H6, LabelSmall } from "../typography";
 import { IOScaleValues, IOSpringValues, IOColors, IOStyles } from "../../core";
 
 type Props = {
@@ -88,7 +88,7 @@ export const ButtonExtendedOutline = ({
     >
       <Animated.View style={[styles.button, animatedStyle]}>
         <View style={IOStyles.flex}>
-          <H4>{label}</H4>
+          <H6>{label}</H6>
           {description && (
             <LabelSmall weight="Regular" color={"bluegreyDark"}>
               {description}

src/components/buttons/ButtonOutline.tsx

@@ -325,6 +325,7 @@ export const ButtonOutline = ({
         style={[
           buttonStyles.button,
           buttonStylesLocal.buttonWithBorder,
+          buttonStyles.buttonSizeDefault,
           iconPosition === "end" && { flexDirection: "row-reverse" },
           disabled
             ? {

src/components/buttons/__test__/__snapshots__/button.test.tsx.snap

@@ -69,29 +69,29 @@ exports[`Test Buttons Components ButtonExtendedOutline Snapshot 1`] = `
       <Text
         color="black"
         defaultColor="black"
-        defaultWeight="Regular"
-        font="ReadexPro"
+        defaultWeight="SemiBold"
+        font="TitilliumWeb"
         fontStyle={
           {
-            "fontSize": 20,
-            "lineHeight": 30,
+            "fontSize": 16,
+            "lineHeight": 24,
           }
         }
         style={
           [
             {
-              "fontSize": 20,
-              "lineHeight": 30,
+              "fontSize": 16,
+              "lineHeight": 24,
             },
             {
               "color": "#0E0F13",
-              "fontFamily": "Readex Pro",
+              "fontFamily": "Titillium Web",
               "fontStyle": "normal",
-              "fontWeight": "400",
+              "fontWeight": "600",
             },
           ]
         }
-        weight="Regular"
+        weight="SemiBold"
       >
         label
       </Text>
@@ -311,6 +311,9 @@ exports[`Test Buttons Components ButtonOutline Snapshot 1`] = `
         {
           "borderWidth": 1,
         },
+        {
+          "height": 40,
+        },
         false,
         {
           "backgroundColor": "rgba(0,115,230,0)",
@@ -428,9 +431,9 @@ exports[`Test Buttons Components ButtonSolid Snapshot 1`] = `
     <Text
       color="white"
       defaultColor="white"
-      defaultWeight="Regular"
+      defaultWeight="Bold"
       ellipsizeMode="tail"
-      font="ReadexPro"
+      font="TitilliumWeb"
       fontStyle={
         {
           "fontSize": 16,
@@ -447,13 +450,13 @@ exports[`Test Buttons Components ButtonSolid Snapshot 1`] = `
           },
           {
             "color": "#FFFFFF",
-            "fontFamily": "Readex Pro",
+            "fontFamily": "Titillium Web",
             "fontStyle": "normal",
-            "fontWeight": "400",
+            "fontWeight": "700",
           },
         ]
       }
-      weight="Regular"
+      weight="Bold"
     >
       label
     </Text>

src/components/listitems/__test__/__snapshots__/listitem.test.tsx.snap

@@ -249,8 +249,8 @@ exports[`Test List Item Components ListItemInfo Snapshot 1`] = `
       <Text
         color="black"
         defaultColor="black"
-        defaultWeight="Regular"
-        font="ReadexPro"
+        defaultWeight="SemiBold"
+        font="TitilliumWeb"
         fontStyle={
           {
             "fontSize": 16,
@@ -266,13 +266,13 @@ exports[`Test List Item Components ListItemInfo Snapshot 1`] = `
             },
             {
               "color": "#0E0F13",
-              "fontFamily": "Readex Pro",
+              "fontFamily": "Titillium Web",
               "fontStyle": "normal",
-              "fontWeight": "400",
+              "fontWeight": "600",
             },
           ]
         }
-        weight="Regular"
+        weight="SemiBold"
       >
         testValue
       </Text>
@@ -384,8 +384,8 @@ exports[`Test List Item Components ListItemInfoCopy Snapshot 1`] = `
         <Text
           color="blueIO-500"
           defaultColor="black"
-          defaultWeight="Regular"
-          font="ReadexPro"
+          defaultWeight="SemiBold"
+          font="TitilliumWeb"
           fontStyle={
             {
               "fontSize": 16,
@@ -401,13 +401,13 @@ exports[`Test List Item Components ListItemInfoCopy Snapshot 1`] = `
               },
               {
                 "color": "#0B3EE3",
-                "fontFamily": "Readex Pro",
+                "fontFamily": "Titillium Web",
                 "fontStyle": "normal",
-                "fontWeight": "400",
+                "fontWeight": "600",
               },
             ]
           }
-          weight="Regular"
+          weight="SemiBold"
         >
           testValue
         </Text>
@@ -555,8 +555,8 @@ exports[`Test List Item Components ListItemNav Snapshot 1`] = `
         <Text
           color="black"
           defaultColor="black"
-          defaultWeight="Regular"
-          font="ReadexPro"
+          defaultWeight="SemiBold"
+          font="TitilliumWeb"
           fontStyle={
             {
               "fontSize": 16,
@@ -571,13 +571,13 @@ exports[`Test List Item Components ListItemNav Snapshot 1`] = `
               },
               {
                 "color": "#0E0F13",
-                "fontFamily": "Readex Pro",
+                "fontFamily": "Titillium Web",
                 "fontStyle": "normal",
-                "fontWeight": "400",
+                "fontWeight": "600",
               },
             ]
           }
-          weight="Regular"
+          weight="SemiBold"
         >
           testValue
         </Text>
@@ -787,8 +787,8 @@ exports[`Test List Item Components ListItemNavAlert Snapshot 1`] = `
         <Text
           color="black"
           defaultColor="black"
-          defaultWeight="Regular"
-          font="ReadexPro"
+          defaultWeight="SemiBold"
+          font="TitilliumWeb"
           fontStyle={
             {
               "fontSize": 16,
@@ -803,13 +803,13 @@ exports[`Test List Item Components ListItemNavAlert Snapshot 1`] = `
               },
               {
                 "color": "#0E0F13",
-                "fontFamily": "Readex Pro",
+                "fontFamily": "Titillium Web",
                 "fontStyle": "normal",
-                "fontWeight": "400",
+                "fontWeight": "600",
               },
             ]
           }
-          weight="Regular"
+          weight="SemiBold"
         >
           testValue
         </Text>

src/components/typography/ButtonText.tsx

@@ -1,13 +1,14 @@
 import { IOColors } from "src/core/IOColors";
 import { IOFontFamily, IOFontWeight } from "../../utils/fonts";
+import { useIOExperimentalDesign } from "../../core";
 import { useTypographyFactory } from "./Factory";
 import { ExternalTypographyProps, TypographyProps } from "./common";
 
 export type ButtonTextAllowedColors = Extract<
   IOColors,
   "white" | "blueIO-500" | "grey-700"
 >;
-type AllowedWeight = Extract<IOFontWeight, "SemiBold" | "Regular">;
+type AllowedWeight = Extract<IOFontWeight, "SemiBold" | "Regular" | "Bold">;
 
 type ButtonTextProps = ExternalTypographyProps<
   TypographyProps<AllowedWeight, ButtonTextAllowedColors>
@@ -20,16 +21,25 @@ const buttonTextDefaultColor: ButtonTextAllowedColors = "white";
 const buttonTextFontName: IOFontFamily = "ReadexPro";
 const buttonTextDefaultWeight: AllowedWeight = "Regular";
 
+// TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
+const legacyTextFontName: IOFontFamily = "TitilliumWeb";
+const legacyTextDefaultWeight: AllowedWeight = "Bold";
+
 /**
  * `ButtonText` typographic style
  */
-export const ButtonText = (props: ButtonTextProps) =>
-  useTypographyFactory<AllowedWeight, ButtonTextAllowedColors>({
+export const ButtonText = (props: ButtonTextProps) => {
+  const { isExperimental } = useIOExperimentalDesign();
+
+  return useTypographyFactory<AllowedWeight, ButtonTextAllowedColors>({
     ...props,
-    defaultWeight: buttonTextDefaultWeight,
+    defaultWeight: isExperimental
+      ? buttonTextDefaultWeight
+      : legacyTextDefaultWeight,
     defaultColor: buttonTextDefaultColor,
-    font: buttonTextFontName,
+    font: isExperimental ? buttonTextFontName : legacyTextFontName,
     fontStyle: {
       fontSize: buttonTextFontSize
     }
   });
+};

src/components/typography/Caption.tsx

@@ -1,4 +1,4 @@
-import { IOTheme } from "../../core/IOColors";
+import { IOTheme, useIOExperimentalDesign } from "../../core";
 import { FontFamily, IOFontWeight } from "../../utils/fonts";
 import { useTypographyFactory } from "./Factory";
 import { ExternalTypographyProps, TypographyProps } from "./common";
@@ -15,17 +15,23 @@ const font: FontFamily = "ReadexPro";
 const defaultColor: AllowedColors = "black";
 const defaultWeight: AllowedWeight = "Regular";
 
+// TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
+const legacyFont: FontFamily = "TitilliumWeb";
+
 /**
  * `Caption` typographic style
  */
-export const Caption = (props: CaptionProps) =>
-  useTypographyFactory<AllowedWeight, AllowedColors>({
+export const Caption = (props: CaptionProps) => {
+  const { isExperimental } = useIOExperimentalDesign();
+
+  return useTypographyFactory<AllowedWeight, AllowedColors>({
     ...props,
     defaultWeight,
     defaultColor,
-    font,
+    font: isExperimental ? font : legacyFont,
     fontStyle: {
       fontSize: captionFontSize,
       textTransform: "uppercase"
     }
   });
+};