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

package/src/components/typography/H5.tsx

@@ -1,66 +1,34 @@
-import React from "react";
-import type { IOColors } from "../../core/IOColors";
+import { IOTheme } from "../../core/IOColors";
 import { FontFamily, IOFontWeight } from "../../utils/fonts";
 import { useTypographyFactory } from "./Factory";
-import { ExternalTypographyProps } from "./common";
+import { ExternalTypographyProps, TypographyProps } from "./common";
 
-// these colors are allowed only when the weight is SemiBold
-type AllowedSemiBoldColors = Extract<
-  IOColors,
-  "bluegreyDark" | "bluegrey" | "bluegreyLight" | "blue" | "white" | "red"
->;
+type AllowedColors = IOTheme["textHeading-default"];
+type AllowedWeight = Extract<IOFontWeight, "SemiBold">;
 
-// when the weight is bold, only the white color is allowed
-type AllowedRegularColors = Extract<
-  IOColors,
-  | "bluegreyDark"
-  | "bluegrey"
-  | "bluegreyLight"
-  | "blue"
-  | "white"
-  | "red"
-  | "grey"
+type H5Props = ExternalTypographyProps<
+  TypographyProps<AllowedWeight, AllowedColors>
 >;
 
-// all the possible colors
-type AllowedColors = AllowedSemiBoldColors | AllowedRegularColors;
-
-// all the possible weight
-type AllowedWeight = Extract<IOFontWeight, "SemiBold" | "Regular">;
-
-// these are the properties allowed only if weight is undefined or SemiBold
-type SemiBoldProps = {
-  weight?: Extract<IOFontWeight, "SemiBold">;
-  color?: AllowedSemiBoldColors;
-};
-
-// these are the properties allowed only if weight is Bold
-type RegularProps = {
-  weight: Extract<IOFontWeight, "Regular">;
-  color?: AllowedRegularColors;
-};
-
-type BoldKindProps = SemiBoldProps | RegularProps;
-
-type OwnProps = ExternalTypographyProps<BoldKindProps>;
-
 export const h5FontSize = 14;
-export const h5DefaultColor: AllowedColors = "bluegreyDark";
-export const h5DefaultWeight: AllowedWeight = "SemiBold";
+export const h5LineHeight = 16;
+const font: FontFamily = "TitilliumWeb";
+const defaultColor: AllowedColors = "black";
+const defaultWeight: AllowedWeight = "SemiBold";
 
 /**
- * Typography component to render `H5` text with font size {@link fontSize} and fontFamily {@link fontName}.
- * default values(if not defined) are weight: `SemiBold`, color: `bluegreyDark`
- * @param props
- * @constructor
+ * `H5` typographic style
  */
-export const H5: React.FC<OwnProps> = props => {
-  const fontName: FontFamily = "TitilliumWeb";
-  return useTypographyFactory<AllowedWeight, AllowedColors>({
+export const H5 = (props: H5Props) =>
+  useTypographyFactory<AllowedWeight, AllowedColors>({
     ...props,
-    defaultWeight: h5DefaultWeight,
-    defaultColor: h5DefaultColor,
-    font: fontName,
-    fontStyle: { fontSize: h5FontSize }
+    defaultWeight,
+    defaultColor,
+    font,
+    fontStyle: {
+      fontSize: h5FontSize,
+      lineHeight: h5LineHeight,
+      textTransform: "uppercase",
+      letterSpacing: 0.5
+    }
   });
-};

package/src/components/typography/H6.tsx

@@ -1,35 +1,37 @@
-import React from "react";
-import { IOTheme, IOThemeLight } from "../../core/IOColors";
+import { IOTheme, IOThemeLight, useIOExperimentalDesign } from "../../core";
 import { FontFamily, IOFontWeight } from "../../utils/fonts";
 import { useTypographyFactory } from "./Factory";
 import { ExternalTypographyProps, TypographyProps } from "./common";
 
 // when the weight is bold, only these color are allowed
 type AllowedColors = IOTheme["textBody-default"] | "blueIO-850";
-type AllowedWeight = Extract<IOFontWeight, "SemiBold" | "Regular">;
+type AllowedWeight = Extract<IOFontWeight, "Regular" | "SemiBold">;
 
-type OwnProps = ExternalTypographyProps<
+type H6Props = ExternalTypographyProps<
   TypographyProps<AllowedWeight, AllowedColors>
 >;
 
 export const h6FontSize = 16;
-export const h6LineHeight = 20;
-export const h6DefaultColor: AllowedColors = IOThemeLight["textBody-default"];
-export const h6DefaultWeight: AllowedWeight = "Regular";
+export const h6LineHeight = 24;
+const h6DefaultColor: AllowedColors = IOThemeLight["textBody-default"];
+const h6DefaultWeight: AllowedWeight = "Regular";
+const fontName: FontFamily = "ReadexPro";
+
+// TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
+const legacyFontName: FontFamily = "TitilliumWeb";
+const legacyDefaultWeight: AllowedWeight = "SemiBold";
 
 /**
- * Typography component to render `H6` text with font size {@link fontSize} and fontFamily {@link fontName}.
- * default values(if not defined) are weight: `Regular`, color: `black`
- * @param props
- * @constructor
+ * `H6` typographic style
  */
-export const H6: React.FC<OwnProps> = props => {
-  const fontName: FontFamily = "ReadexPro";
+export const H6 = (props: H6Props) => {
+  const { isExperimental } = useIOExperimentalDesign();
+
   return useTypographyFactory<AllowedWeight, AllowedColors>({
     ...props,
-    defaultWeight: h6DefaultWeight,
+    defaultWeight: isExperimental ? h6DefaultWeight : legacyDefaultWeight,
     defaultColor: h6DefaultColor,
-    font: fontName,
+    font: isExperimental ? fontName : legacyFontName,
     fontStyle: { fontSize: h6FontSize, lineHeight: h6LineHeight }
   });
 };

package/src/components/typography/Hero.tsx

@@ -0,0 +1,34 @@
+import { useIOExperimentalDesign, IOTheme } 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 HeroProps = ExternalTypographyProps<
+  TypographyProps<AllowedWeight, AllowedColors>
+>;
+
+export const heroFontSize = 32;
+export const heroLineHeight = 48;
+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";
+/**
+ * `Hero` typographic style
+ */
+export const Hero = (props: HeroProps) => {
+  const { isExperimental } = useIOExperimentalDesign();
+
+  return useTypographyFactory<AllowedWeight, AllowedColors>({
+    ...props,
+    defaultWeight,
+    defaultColor,
+    font: isExperimental ? font : legacyFont,
+    fontStyle: { fontSize: heroFontSize, lineHeight: heroLineHeight }
+  });
+};

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
     }
   });
-};