@pagopa/io-app-design-system 1.7.0 → 1.8.0

package/src/components/switch/SwitchLabel.tsx

@@ -1,10 +1,12 @@
 import * as React from "react";
 import { useState } from "react";
-import { Pressable, View } from "react-native";
-import { H6 } from "../typography/H6";
-import { HSpacer } from "../spacer/Spacer";
+import { Pressable, StyleSheet, Text, View } from "react-native";
+import { IOColors, useIOExperimentalDesign } from "../../core";
 import { IOStyles } from "../../core/IOStyles";
 import { triggerHaptic } from "../../functions/haptic-feedback/hapticFeedback";
+import { makeFontStyleObject } from "../../utils/fonts";
+import { HSpacer } from "../spacer/Spacer";
+import { H6 } from "../typography/H6";
 import { AnimatedSwitch } from "./AnimatedSwitch";
 
 type Props = {
@@ -21,6 +23,17 @@ type OwnProps = Props &
   Pick<React.ComponentProps<typeof AnimatedSwitch>, "disabled" | "checked"> &
   Pick<React.ComponentProps<typeof Pressable>, "onPress">;
 
+// TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
+const styles = StyleSheet.create({
+  legacyTextValue: {
+    fontSize: 16,
+    lineHeight: 24,
+    color: IOColors.bluegreyDark,
+    flexShrink: 1,
+    ...makeFontStyleObject("SemiBold", undefined, "TitilliumWeb")
+  }
+});
+
 /**
  * A checkbox with the automatic state management that uses a {@link AnimatedCheckBox}
  * The toggleValue change when a `onPress` event is received and dispatch the `onValueChange`.
@@ -36,6 +49,22 @@ export const SwitchLabel = ({
 }: OwnProps) => {
   const [toggleValue, setToggleValue] = useState(checked ?? false);
 
+  const { isExperimental } = useIOExperimentalDesign();
+  const switchLabelText = (
+    <H6 style={{ flexShrink: 1 }} color={"black"}>
+      {label}
+    </H6>
+  );
+
+  // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
+  const legacySwitchlabelText = (
+    <Text style={styles.legacyTextValue}>{label}</Text>
+  );
+
+  const switchLabelTextComponent = isExperimental
+    ? switchLabelText
+    : legacySwitchlabelText;
+
   const toggleCheckbox = () => {
     triggerHaptic("impactLight");
     setToggleValue(!toggleValue);
@@ -64,9 +93,7 @@ export const SwitchLabel = ({
           <AnimatedSwitch checked={checked ?? toggleValue} />
         </View>
         <HSpacer size={8} />
-        <H6 style={{ flexShrink: 1 }} color={"black"}>
-          {label}
-        </H6>
+        {switchLabelTextComponent}
       </View>
     </Pressable>
   );

package/src/components/tag/Tag.tsx

@@ -4,9 +4,8 @@ import { pipe } from "fp-ts/lib/function";
 import { View, Text, StyleSheet, Platform } from "react-native";
 import { WithTestID } from "../../utils/types";
 import { makeFontStyleObject } from "../../utils/fonts";
-import { IOColors } from "../../core/IOColors";
 import { IOIconSizeScale, IOIcons, Icon } from "../icons";
-import { IOTagRadius } from "../../core/IOShapes";
+import { IOColors, IOTagRadius, useIOExperimentalDesign } from "../../core";
 import {
   IOSpacingScale,
   IOTagHSpacing,
@@ -99,33 +98,49 @@ const styles = StyleSheet.create({
     alignSelf: "center",
     textTransform: "uppercase",
     color: IOColors["grey-700"],
-    flexShrink: 1,
+    flexShrink: 1
+  },
+  labelFont: {
     ...makeFontStyleObject("Regular", false, "ReadexPro")
+  },
+  // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
+  legacyLabelFont: {
+    ...makeFontStyleObject("SemiBold", false, "TitilliumWeb")
   }
 });
 
 /**
  * Tag component, used mainly for message list and details
  */
-export const Tag = ({ text, variant, testID }: Tag) => (
-  <View testID={testID} style={styles.tag}>
-    {pipe(
-      mapVariants[variant],
-      O.fromNullable,
-      O.fold(
-        () => null,
-        ({ iconColor, iconName }) => (
-          <View style={styles.iconWrapper}>
-            <Icon name={iconName} color={iconColor} size={IOTagIconSize} />
-          </View>
+export const Tag = ({ text, variant, testID }: Tag) => {
+  const { isExperimental } = useIOExperimentalDesign();
+  return (
+    <View testID={testID} style={styles.tag}>
+      {pipe(
+        mapVariants[variant],
+        O.fromNullable,
+        O.fold(
+          () => null,
+          ({ iconColor, iconName }) => (
+            <View style={styles.iconWrapper}>
+              <Icon name={iconName} color={iconColor} size={IOTagIconSize} />
+            </View>
+          )
         )
-      )
-    )}
-    {mapVariants[variant] && text && <View style={styles.spacer} />}
-    {text && (
-      <Text numberOfLines={1} ellipsizeMode="tail" style={styles.label}>
-        {text}
-      </Text>
-    )}
-  </View>
-);
+      )}
+      {mapVariants[variant] && text && <View style={styles.spacer} />}
+      {text && (
+        <Text
+          numberOfLines={1}
+          ellipsizeMode="tail"
+          style={[
+            styles.label,
+            isExperimental ? styles.labelFont : styles.legacyLabelFont
+          ]}
+        >
+          {text}
+        </Text>
+      )}
+    </View>
+  );
+};

package/src/components/textInput/TextInputBase.tsx

@@ -13,7 +13,12 @@ import Animated, {
   useSharedValue,
   withTiming
 } from "react-native-reanimated";
-import { IOColors, IOSpacingScale, IOStyles } from "../../core";
+import {
+  IOColors,
+  IOSpacingScale,
+  IOStyles,
+  useIOExperimentalDesign
+} from "../../core";
 import { IOIcons, Icon } from "../icons";
 import { HSpacer } from "../spacer";
 import { LabelSmall } from "../typography";
@@ -58,12 +63,18 @@ const styles = StyleSheet.create({
   },
   textInputStyle: {
     ...IOStyles.flex,
-    ...makeFontStyleObject("Regular", false, "ReadexPro"),
     fontSize: 16,
     marginTop: IOSpacingScale[2],
     lineHeight: 24,
     height: "100%"
   },
+  textInputStyleFont: {
+    ...makeFontStyleObject("Regular", false, "ReadexPro")
+  },
+  // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
+  textInputStyleLegacyFont: {
+    ...makeFontStyleObject("SemiBold", false, "TitilliumWeb")
+  },
   textInputLabelWrapper: {
     position: "absolute",
     paddingHorizontal: 12,
@@ -247,6 +258,7 @@ export const TextInputBase = ({
     [value, derivedInputProps]
   );
 
+  const { isExperimental } = useIOExperimentalDesign();
   return (
     <>
       <Pressable
@@ -286,7 +298,12 @@ export const TextInputBase = ({
           onBlur={onBlurHandler}
           value={inputValue}
           onChangeText={onChangeTextHandler}
-          style={styles.textInputStyle}
+          style={[
+            styles.textInputStyle,
+            isExperimental
+              ? styles.textInputStyleFont
+              : styles.textInputStyleLegacyFont
+          ]}
         />
         {/** Left value is due to the absolute position of the label in order to let it
          * translate to top on focus

package/src/components/typography/Body.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { IOColors, IOTheme } from "../../core";
 import { FontFamily, IOFontWeight } from "../../utils/fonts";
 import { useTypographyFactory } from "./Factory";
@@ -11,7 +10,7 @@ type PartialAllowedColors = Extract<
 type AllowedColors = PartialAllowedColors | IOTheme["textBody-default"];
 type AllowedWeight = IOFontWeight | "Regular" | "SemiBold";
 
-type OwnProps = ExternalTypographyProps<
+type BodyProps = ExternalTypographyProps<
   TypographyProps<AllowedWeight, AllowedColors>
 >;
 
@@ -22,12 +21,9 @@ export const bodyDefaultColor: AllowedColors = "bluegrey";
 export const bodyDefaultWeight: AllowedWeight = "Regular";
 
 /**
- * Typography component to render `Body` text with font size {@link fontSize} and fontFamily {@link fontName}.
- * default values (if not defined) are weight: `Regular`, color: `bluegrey`
- * @param props`
- * @constructor
+ * `Body` typographic style
  */
-export const Body: React.FunctionComponent<OwnProps> = props =>
+export const Body = (props: BodyProps) =>
   useTypographyFactory<AllowedWeight, AllowedColors>({
     ...props,
     defaultWeight: bodyDefaultWeight,

package/src/components/typography/BodyMonospace.tsx

@@ -0,0 +1,29 @@
+import type { IOColors } from "../../core/IOColors";
+import { FontFamily, IOFontWeight } from "../../utils/fonts";
+import { useTypographyFactory } from "./Factory";
+import { ExternalTypographyProps, TypographyProps } from "./common";
+
+type AllowedColors = Extract<IOColors, "bluegreyDark" | "bluegrey">;
+type AllowedWeight = Extract<IOFontWeight, "Medium">;
+
+type BodyMonospaceProps = ExternalTypographyProps<
+  TypographyProps<AllowedWeight, AllowedColors>
+>;
+
+const fontName: FontFamily = "DMMono";
+const fontSize = 16;
+const lineHeight = 24;
+const monospaceDefaultWeight = "Medium";
+const monospaceDefaultcolor = "bluegrey";
+
+/**
+ * `BodyMonospace` typographic style
+ */
+export const BodyMonospace = (props: BodyMonospaceProps) =>
+  useTypographyFactory<AllowedWeight, AllowedColors>({
+    ...props,
+    defaultWeight: monospaceDefaultWeight,
+    defaultColor: monospaceDefaultcolor,
+    font: fontName,
+    fontStyle: { fontSize, lineHeight }
+  });

package/src/components/typography/ButtonText.tsx

@@ -0,0 +1,45 @@
+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" | "Bold">;
+
+type ButtonTextProps = ExternalTypographyProps<
+  TypographyProps<AllowedWeight, ButtonTextAllowedColors>
+>;
+
+export const buttonTextFontSize = 16;
+/* Needed to render `ButtonOutline` and`ButtonLink` because they use
+`AnimatedText` for color transition through Reanimated */
+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) => {
+  const { isExperimental } = useIOExperimentalDesign();
+
+  return useTypographyFactory<AllowedWeight, ButtonTextAllowedColors>({
+    ...props,
+    defaultWeight: isExperimental
+      ? buttonTextDefaultWeight
+      : legacyTextDefaultWeight,
+    defaultColor: buttonTextDefaultColor,
+    font: isExperimental ? buttonTextFontName : legacyTextFontName,
+    fontStyle: {
+      fontSize: buttonTextFontSize
+    }
+  });
+};

package/src/components/typography/Caption.tsx

@@ -0,0 +1,37 @@
+import { IOTheme, useIOExperimentalDesign } from "../../core";
+import { FontFamily, IOFontWeight } from "../../utils/fonts";
+import { useTypographyFactory } from "./Factory";
+import { ExternalTypographyProps, TypographyProps } from "./common";
+
+type AllowedColors = IOTheme["textHeading-default"];
+type AllowedWeight = Extract<IOFontWeight, "Regular">;
+
+type CaptionProps = ExternalTypographyProps<
+  TypographyProps<AllowedWeight, AllowedColors>
+>;
+
+export const captionFontSize = 12;
+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) => {
+  const { isExperimental } = useIOExperimentalDesign();
+
+  return useTypographyFactory<AllowedWeight, AllowedColors>({
+    ...props,
+    defaultWeight,
+    defaultColor,
+    font: isExperimental ? font : legacyFont,
+    fontStyle: {
+      fontSize: captionFontSize,
+      textTransform: "uppercase"
+    }
+  });
+};

package/src/components/typography/Chip.tsx

@@ -0,0 +1,33 @@
+import { IOColors, useIOExperimentalDesign } from "../../core";
+import { FontFamily, IOFontWeight } from "../../utils/fonts";
+import { useTypographyFactory } from "./Factory";
+import { ExternalTypographyProps, TypographyProps } from "./common";
+
+type AllowedColors = IOColors;
+type AllowedWeight = Extract<IOFontWeight, "SemiBold" | "Regular">;
+
+type ChipProps = ExternalTypographyProps<
+  TypographyProps<AllowedWeight, AllowedColors>
+>;
+
+const chipFontSize = 12;
+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";
+/**
+ * `Chip` typographic style
+ */
+export const Chip = (props: ChipProps) => {
+  const { isExperimental } = useIOExperimentalDesign();
+
+  return useTypographyFactory<AllowedWeight, AllowedColors>({
+    ...props,
+    defaultWeight,
+    defaultColor,
+    font: isExperimental ? font : legacyFont,
+    fontStyle: { fontSize: chipFontSize }
+  });
+};

package/src/components/typography/H1.tsx

@@ -1,45 +1,36 @@
-import React from "react";
-import {
-  IOColors,
-  IOColorsStatusForeground,
-  IOTheme
-} from "../../core/IOColors";
+import { IOTheme, useIOExperimentalDesign } from "../../core";
 import { FontFamily, IOFontWeight } from "../../utils/fonts";
 import { useTypographyFactory } from "./Factory";
 import { ExternalTypographyProps, TypographyProps } from "./common";
 
-type PartialAllowedColors = Extract<
-  IOColors,
-  "bluegreyDark" | "white" | "blue"
->;
-type AllowedColors =
-  | PartialAllowedColors
-  | IOColorsStatusForeground
-  | IOTheme["textHeading-default"];
-type AllowedWeight = Extract<IOFontWeight, "Bold">;
+type AllowedColors = IOTheme["textHeading-default"];
+type AllowedWeight = Extract<IOFontWeight, "Regular" | "Bold">;
 
-type OwnProps = ExternalTypographyProps<
+type H1Props = ExternalTypographyProps<
   TypographyProps<AllowedWeight, AllowedColors>
 >;
 
-export const h1FontSize = 26;
-export const h1LineHeight = 32;
-export const h1DefaultColor: AllowedColors = "bluegreyDark";
-export const h1DefaultWeight: AllowedWeight = "Bold";
+export const h1FontSize = 28;
+export const h1LineHeight = 42;
+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";
+const legacyDefaultWeight: AllowedWeight = "Bold";
 
 /**
- * Typography component to render H1 text with font size {@link fontSize} and fontFamily {@link fontName}.
- * default values(if not defined) are weight: `Bold`, color: `bluegreyDark`
- * @param props
- * @constructor
+ * `H1` typographic style
  */
-export const H1: React.FC<OwnProps> = props => {
-  const fontName: FontFamily = "TitilliumWeb";
+export const H1 = (props: H1Props) => {
+  const { isExperimental } = useIOExperimentalDesign();
+
   return useTypographyFactory<AllowedWeight, AllowedColors>({
     ...props,
-    defaultWeight: h1DefaultWeight,
-    defaultColor: h1DefaultColor,
-    font: fontName,
+    defaultWeight: isExperimental ? defaultWeight : legacyDefaultWeight,
+    defaultColor,
+    font: isExperimental ? font : legacyFont,
     fontStyle: { fontSize: h1FontSize, lineHeight: h1LineHeight }
   });
 };

package/src/components/typography/H2.tsx

@@ -1,45 +1,36 @@
-import React from "react";
-import {
-  IOColors,
-  IOColorsStatusForeground,
-  IOTheme
-} from "../../core/IOColors";
+import { IOTheme, useIOExperimentalDesign } from "../../core";
 import { FontFamily, IOFontWeight } from "../../utils/fonts";
 import { useTypographyFactory } from "./Factory";
 import { ExternalTypographyProps, TypographyProps } from "./common";
 
-type PartialAllowedColors = Extract<
-  IOColors,
-  "bluegreyDark" | "white" | "blue" | "bluegrey"
->;
-type AllowedColors =
-  | PartialAllowedColors
-  | IOColorsStatusForeground
-  | IOTheme["textHeading-default"];
-type AllowedWeight = Extract<IOFontWeight, "Bold" | "SemiBold">;
+type AllowedColors = IOTheme["textHeading-default"];
+type AllowedWeight = Extract<IOFontWeight, "SemiBold" | "Regular" | "Bold">;
 
-type OwnProps = ExternalTypographyProps<
+type H2Props = ExternalTypographyProps<
   TypographyProps<AllowedWeight, AllowedColors>
 >;
 
-export const h2FontSize = 20;
-export const h2LineHeight = 24;
-export const h2DefaultColor: AllowedColors = "bluegreyDark";
-export const h2DefaultWeight: AllowedWeight = "Bold";
+export const h2FontSize = 26;
+export const h2LineHeight = 39;
+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";
+const legacyDefaultWeight: AllowedWeight = "Bold";
 
 /**
- * Typography component to render `H2` text with font size {@link fontSize} and fontFamily {@link fontName}.
- * default values(if not defined) are weight: `Bold`, color: `bluegreyDark`
- * @param props
- * @constructor
+ * `H2` typographic style
  */
-export const H2: React.FC<OwnProps> = props => {
-  const fontName: FontFamily = "TitilliumWeb";
+export const H2 = (props: H2Props) => {
+  const { isExperimental } = useIOExperimentalDesign();
+
   return useTypographyFactory<AllowedWeight, AllowedColors>({
     ...props,
-    defaultWeight: h2DefaultWeight,
-    defaultColor: h2DefaultColor,
-    font: fontName,
+    defaultWeight: isExperimental ? defaultWeight : legacyDefaultWeight,
+    defaultColor,
+    font: isExperimental ? font : legacyFont,
     fontStyle: { fontSize: h2FontSize, lineHeight: h2LineHeight }
   });
 };

package/src/components/typography/H3.tsx

@@ -1,35 +1,36 @@
-import * as React from "react";
-import { IOFontFamily, IOFontWeight } from "../../utils/fonts";
-import { IOColorsStatusForeground, IOTheme } from "../../core";
-import { ExternalTypographyProps, TypographyProps } from "./common";
+import { IOTheme, useIOExperimentalDesign } from "../../core";
+import { FontFamily, IOFontWeight } from "../../utils/fonts";
 import { useTypographyFactory } from "./Factory";
+import { ExternalTypographyProps, TypographyProps } from "./common";
 
-type AllowedColors = IOColorsStatusForeground | IOTheme["textHeading-default"];
-type AllowedWeight = Extract<IOFontWeight, "Bold" | "Regular">;
+type AllowedColors = IOTheme["textHeading-default"];
+type AllowedWeight = Extract<IOFontWeight, "SemiBold" | "Regular" | "Bold">;
 
-type OwnProps = ExternalTypographyProps<
+type H3Props = ExternalTypographyProps<
   TypographyProps<AllowedWeight, AllowedColors>
 >;
 
 /* Common typographic styles */
 export const h3FontSize = 22;
 export const h3LineHeight = 33;
-/* New typographic styles */
-const h3FontName: IOFontFamily = "ReadexPro";
-const h3DefaultColor: AllowedColors = "black";
-const h3DefaultWeight: AllowedWeight = "Regular";
+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 legacyFontName: FontFamily = "TitilliumWeb";
+const legacyDefaultColor: AllowedColors = "bluegreyDark";
+const legacyDefaultWeight: AllowedWeight = "Bold";
 /**
- * Typography component to render `H2` text with font size {@link fontSize} and fontFamily {@link fontName}.
- * default values(if not defined) are weight: `Bold`, color: `bluegreyDark`
- * @param props
- * @constructor
+ * `H3` typographic style
  */
-export const H3: React.FunctionComponent<OwnProps> = props =>
-  useTypographyFactory<AllowedWeight, AllowedColors>({
+export const H3 = (props: H3Props) => {
+  const { isExperimental } = useIOExperimentalDesign();
+  return useTypographyFactory<AllowedWeight, AllowedColors>({
     ...props,
-    defaultWeight: h3DefaultWeight,
-    defaultColor: h3DefaultColor,
-    font: h3FontName,
+    defaultWeight: isExperimental ? defaultWeight : legacyDefaultWeight,
+    defaultColor: isExperimental ? defaultColor : legacyDefaultColor,
+    font: isExperimental ? font : legacyFontName,
     fontStyle: { fontSize: h3FontSize, lineHeight: h3LineHeight }
   });
+};

package/src/components/typography/H4.tsx

@@ -1,37 +1,36 @@
-import React from "react";
-import { IOColorsStatusForeground, IOTheme } from "../../core/IOColors";
+import { IOTheme, useIOExperimentalDesign } from "../../core";
 import { FontFamily, IOFontWeight } from "../../utils/fonts";
 import { useTypographyFactory } from "./Factory";
 import { ExternalTypographyProps, TypographyProps } from "./common";
 
-type AllowedColors = IOColorsStatusForeground | IOTheme["textHeading-default"];
-type AllowedWeight = Extract<IOFontWeight, "SemiBold" | "Regular">;
+type AllowedColors = IOTheme["textHeading-default"];
+type AllowedWeight = Extract<IOFontWeight, "Regular" | "SemiBold">;
 
-type OwnProps = ExternalTypographyProps<
+type H4Props = ExternalTypographyProps<
   TypographyProps<AllowedWeight, AllowedColors>
 >;
 
-/* Common typographic styles */
 export const h4FontSize = 20;
-export const h4LineHeight = 24;
+export const h4LineHeight = 30;
+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 legacyFontName: FontFamily = "TitilliumWeb";
+const legacyDefaultColor: AllowedColors = "bluegreyDark";
+const legacyDefaultWeight: AllowedWeight = "SemiBold";
 
 /**
- * Typography component to render `H4` text with font size {@link fontSize} and fontFamily {@link fontName}.
- * default values(if not defined) are weight: `Regular/SemiBold`, color: `black/bluegreyDark` if design system is enabled or not
- * @param props
- * @constructor
+ * `H4` typographic style
  */
-export const H4: React.FC<OwnProps> = props => {
-  /* New typographic styles */
-  const font: FontFamily = "ReadexPro";
-  const defaultColor: AllowedColors = "black";
-  const defaultWeight: AllowedWeight = "Regular";
-
+export const H4 = (props: H4Props) => {
+  const { isExperimental } = useIOExperimentalDesign();
   return useTypographyFactory<AllowedWeight, AllowedColors>({
     ...props,
-    defaultWeight,
-    defaultColor,
-    font,
+    defaultWeight: isExperimental ? defaultWeight : legacyDefaultWeight,
+    defaultColor: isExperimental ? defaultColor : legacyDefaultColor,
+    font: isExperimental ? font : legacyFontName,
     fontStyle: { fontSize: h4FontSize, lineHeight: h4LineHeight }
   });
 };