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

package/src/components/typography/Label.tsx

@@ -1,36 +1,38 @@
-import React from "react";
 import type { IOColors, IOColorsStatusForeground } from "../../core/IOColors";
 import { FontFamily, IOFontWeight } from "../../utils/fonts";
 import { useTypographyFactory } from "./Factory";
-import { ExternalTypographyProps, TypographyProps } from "./common";
+import {
+  ExternalTypographyProps,
+  FontSize,
+  TypographyProps,
+  fontSizeMapping,
+  lineHeightMapping
+} from "./common";
 
-type PartialAllowedColors = Extract<
-  IOColors,
-  "blue" | "bluegrey" | "bluegreyDark" | "white" | "red"
->;
+type PartialAllowedColors = Extract<IOColors, "black" | "white">;
 type AllowedColors = PartialAllowedColors | IOColorsStatusForeground;
 type AllowedWeight = Extract<IOFontWeight, "Bold" | "Regular" | "SemiBold">;
-type OwnProps = ExternalTypographyProps<
+type LabelProps = ExternalTypographyProps<
   TypographyProps<AllowedWeight, AllowedColors>
->;
+> & { fontSize?: FontSize };
+
+const fontName: FontFamily = "TitilliumWeb";
+const labelDefaultWeight = "Bold";
+const labelDefaultcolor = "black";
 
 /**
- * Typography component to render `Label` text with font size {@link fontSize} and fontFamily {@link fontName}.
- * default values(if not defined) are weight: `Bold`, color: `blue`
- * @param props`
- * @constructor
+ * `Label` typographic style
  */
-export const Label: React.FC<OwnProps> = props => {
-  const fontName: FontFamily = "TitilliumWeb";
-  const fontSize = 16;
-  const labelDefaultWeight = "Bold";
-  const labelDefaultcolor = "blue";
-
-  return useTypographyFactory<AllowedWeight, AllowedColors>({
+export const Label = ({ fontSize, ...props }: LabelProps) =>
+  useTypographyFactory<AllowedWeight, AllowedColors>({
     ...props,
     defaultWeight: labelDefaultWeight,
     defaultColor: labelDefaultcolor,
     font: fontName,
-    fontStyle: { fontSize }
+    fontStyle: {
+      fontSize: fontSize ? fontSizeMapping[fontSize] : fontSizeMapping.regular,
+      lineHeight: fontSize
+        ? lineHeightMapping[fontSize]
+        : lineHeightMapping.regular
+    }
   });
-};

package/src/components/typography/LabelHeader.tsx

@@ -1,6 +1,5 @@
-import * as React from "react";
 import { IOFontFamily, IOFontWeight } from "../../utils/fonts";
-import { IOTheme, IOThemeLight } from "../../core";
+import { IOTheme, IOThemeLight, useIOExperimentalDesign } from "../../core";
 import { useTypographyFactory } from "./Factory";
 import { ExternalTypographyProps, TypographyProps } from "./common";
 
@@ -12,33 +11,34 @@ type AllowedColors =
   | "black";
 type AllowedWeight = Extract<IOFontWeight, "Regular">;
 
-type OwnProps = ExternalTypographyProps<
+type LabelHeaderProps = ExternalTypographyProps<
   TypographyProps<AllowedWeight, AllowedColors>
 >;
 
-/* Common typographic styles */
 export const labelHeaderFontSize = 14;
 export const labelHeaderLineHeight = 18;
 export const labelHeaderDefaultColor: AllowedColors =
   IOThemeLight["textBody-default"];
-/* New typographic styles */
 const labelHeaderFontName: IOFontFamily = "ReadexPro";
 const labelHeaderDefaultWeight: AllowedWeight = "Regular";
 
+// TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
+const legacyLabelHeaderFontName: IOFontFamily = "TitilliumWeb";
+
 /**
- * Typography component to render `LabelHeader` text with font size {@link fontSize} and fontFamily {@link fontName}.
- * default values(if not defined) are weight: `Regular`, color: `bluegreyDark`
- * @param props
- * @constructor
+ * `LabelHeader` typographic style
  */
-export const LabelHeader: React.FunctionComponent<OwnProps> = props =>
-  useTypographyFactory<AllowedWeight, AllowedColors>({
+export const LabelHeader = (props: LabelHeaderProps) => {
+  const { isExperimental } = useIOExperimentalDesign();
+
+  return useTypographyFactory<AllowedWeight, AllowedColors>({
     ...props,
     defaultWeight: labelHeaderDefaultWeight,
     defaultColor: labelHeaderDefaultColor,
-    font: labelHeaderFontName,
+    font: isExperimental ? legacyLabelHeaderFontName : labelHeaderFontName,
     fontStyle: {
       fontSize: labelHeaderFontSize,
       lineHeight: labelHeaderLineHeight
     }
   });
+};

package/src/components/typography/{Link.tsx → LabelLink.tsx}

@@ -1,32 +1,32 @@
-import * as React from "react";
 import { IOFontFamily, IOFontWeight } from "../../utils/fonts";
 import type { IOColors } from "../../core";
-import { ExternalTypographyProps, TypographyProps } from "./common";
+import {
+  ExternalTypographyProps,
+  FontSize,
+  TypographyProps,
+  fontSizeMapping,
+  lineHeightMapping
+} from "./common";
 import { useTypographyFactory } from "./Factory";
 
 type AllowedColors = IOColors;
-type AllowedWeight = Extract<IOFontWeight, "SemiBold" | "Bold">;
-type FontSize = "regular" | "small";
+type AllowedWeight = Extract<IOFontWeight, "SemiBold">;
 type AllowedFontSize = { fontSize?: FontSize };
 
-type OwnProps = ExternalTypographyProps<
+type LinkProps = ExternalTypographyProps<
   TypographyProps<AllowedWeight, AllowedColors>
 > &
   AllowedFontSize;
 
 const fontName: IOFontFamily = "TitilliumWeb";
-const fontSizeMapping: Record<FontSize, number> = { regular: 16, small: 14 };
 
 export const linkDefaultColor: AllowedColors = "blueIO-500";
-export const linkDefaultWeight: AllowedWeight = "Bold";
+export const linkDefaultWeight: AllowedWeight = "SemiBold";
 
 /**
- * Typography component to render `Link` text with font size {@link fontSize} and fontFamily {@link fontName}.
- * default values(if not defined) are weight: `SemiBold`, color: `blue`
- * @param props`
- * @constructor
+ * `Link` typographic style
  */
-export const Link: React.FunctionComponent<OwnProps> = props =>
+export const LabelLink = (props: LinkProps) =>
   useTypographyFactory<AllowedWeight, AllowedColors>({
     accessibilityRole: props.onPress ? "link" : undefined,
     ...props,
@@ -37,6 +37,9 @@ export const Link: React.FunctionComponent<OwnProps> = props =>
       fontSize: props.fontSize
         ? fontSizeMapping[props.fontSize]
         : fontSizeMapping.regular,
+      lineHeight: props.fontSize
+        ? lineHeightMapping[props.fontSize]
+        : lineHeightMapping.regular,
       textDecorationLine: "underline"
     }
   });

package/src/components/typography/LabelSmall.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import type { IOColors, IOTheme } from "../../core/IOColors";
 import { FontFamily, IOFontWeight } from "../../utils/fonts";
 import { useTypographyFactory } from "./Factory";
@@ -18,24 +17,25 @@ type AllowedColors = PartialAllowedColors | IOTheme["textBody-tertiary"];
 type AllowedWeight = Extract<IOFontWeight, "Bold" | "Regular" | "SemiBold">;
 type FontSize = "regular" | "small";
 type AllowedFontSize = { fontSize?: FontSize };
-type OwnProps = ExternalTypographyProps<
+
+type LabelSmallProps = ExternalTypographyProps<
   TypographyProps<AllowedWeight, AllowedColors>
 > &
   AllowedFontSize;
 
+const fontName: FontFamily = "TitilliumWeb";
+const fontSizeMapping: Record<FontSize, number> = {
+  regular: 14,
+  small: 12
+};
+const labelDefaultWeight = "Bold";
+const labelDefaultcolor = "blue";
+
 /**
- * Typography component to render `LabelSmall` text with font size {@link fontSize} and fontFamily {@link fontName}.
- * default values(if not defined) are weight: `Bold`, color: `blue`
- * @param props`
- * @constructor
+ * `LabelSmall` typographic style
  */
-export const LabelSmall: React.FC<OwnProps> = props => {
-  const fontName: FontFamily = "TitilliumWeb";
-  const fontSizeMapping: Record<FontSize, number> = { regular: 14, small: 12 };
-  const labelDefaultWeight = "Bold";
-  const labelDefaultcolor = "blue";
-
-  return useTypographyFactory<AllowedWeight, AllowedColors>({
+export const LabelSmall = (props: LabelSmallProps) =>
+  useTypographyFactory<AllowedWeight, AllowedColors>({
     ...props,
     defaultWeight: labelDefaultWeight,
     defaultColor: labelDefaultcolor,
@@ -46,4 +46,3 @@ export const LabelSmall: React.FC<OwnProps> = props => {
         : fontSizeMapping.regular
     }
   });
-};