@pagopa/io-app-design-system 1.0.0-0

package/src/components/typography/Body.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import { IOColors, IOTheme } 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" | "bluegreyLight"
+>;
+type AllowedColors = PartialAllowedColors | IOTheme["textBody-default"];
+type AllowedWeight = IOFontWeight | "Regular" | "SemiBold";
+
+type OwnProps = ExternalTypographyProps<
+    TypographyProps<AllowedWeight, AllowedColors>
+>;
+
+const fontName: FontFamily = "TitilliumWeb";
+export const bodyFontSize = 16;
+export const bodyLineHeight = 24;
+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
+ */
+export const Body: React.FunctionComponent<OwnProps> = props =>
+    useTypographyFactory<AllowedWeight, AllowedColors>({
+        ...props,
+        defaultWeight: bodyDefaultWeight,
+        defaultColor: bodyDefaultColor,
+        font: fontName,
+        fontStyle: { fontSize: bodyFontSize, lineHeight: bodyLineHeight }
+    });

package/src/components/typography/Factory.tsx

@@ -0,0 +1,93 @@
+import React, { useMemo } from "react";
+import { IOColors } from "../../core";
+import { IOFontWeight } from "../../utils/fonts";
+import { XOR } from "../../utils/types";
+import { BaseTypography } from "./BaseTypography";
+import {
+    calculateWeightColor,
+    RequiredTypographyProps,
+    TypographyProps
+} from "./common";
+
+/**
+ * Using the DefaultArgumentProps is possible to define a default fallback value for  weight and color
+ * that will be used when the fields weight and color will be undefined.
+ */
+type DefaultArgumentProps<WeightPropsType, ColorsPropsType> = {
+    defaultWeight: WeightPropsType;
+    defaultColor: ColorsPropsType;
+};
+
+/**
+ * Using the DefaultFactoryProps is possible to define a custom factory to calculate the default value for
+ * weight and color, thus allowing to implement more sophisticated strategies.
+ */
+type DefaultFactoryProps<WeightPropsType, ColorsPropsType> = {
+    weightColorFactory: (
+        weight?: WeightPropsType,
+        color?: ColorsPropsType
+    ) => RequiredTypographyProps<WeightPropsType, ColorsPropsType>;
+};
+
+/**
+ * Only one type of default props strategy is allowed
+ */
+type DefaultProps<WeightPropsType, ColorsPropsType> = XOR<
+    DefaultArgumentProps<WeightPropsType, ColorsPropsType>,
+    DefaultFactoryProps<WeightPropsType, ColorsPropsType>
+>;
+
+/**
+ * The factory props will include:
+ * - One of the two DefaultProps
+ * - The props of {@link BaseTypographyProps} without weight and color
+ * - The default {@link TypographyProps}
+ */
+type FactoryProps<WeightPropsType, ColorsPropsType> = TypographyProps<
+    WeightPropsType,
+    ColorsPropsType
+> &
+    DefaultProps<WeightPropsType, ColorsPropsType> &
+    Omit<React.ComponentProps<typeof BaseTypography>, "weight" | "color">;
+
+/**
+ * Calculate if the props is of type {@link DefaultFactoryProps}
+ * @param props
+ */
+function isDefaultFactoryProps<WeightPropsType, ColorsPropsType>(
+    props:
+        | DefaultFactoryProps<WeightPropsType, ColorsPropsType>
+        | DefaultArgumentProps<WeightPropsType, ColorsPropsType>
+): props is DefaultFactoryProps<WeightPropsType, ColorsPropsType> {
+    return (
+        (props as DefaultFactoryProps<WeightPropsType, ColorsPropsType>)
+            .weightColorFactory !== undefined
+    );
+}
+
+/**
+ * Build a {@link BaseTypography} component, calculating the default values for weight and color if undefined.
+ * The default values can be calculated specifying some fallback values using {@link DefaultArgumentProps}
+ * or with a factory function to define some custom behaviour using {@link DefaultFactoryProps}
+ * @param props
+ */
+export function useTypographyFactory<
+    WeightPropsType extends IOFontWeight,
+    ColorsPropsType extends IOColors
+>(props: FactoryProps<WeightPropsType, ColorsPropsType>) {
+    // Use different strategy to calculate the default values, based on DefaultProps
+    const { weight, color } = useMemo(
+        () =>
+            isDefaultFactoryProps(props)
+                ? props.weightColorFactory(props.weight, props.color)
+                : calculateWeightColor(
+                    props.defaultWeight,
+                    props.defaultColor,
+                    props.weight,
+                    props.color
+                ),
+        [props]
+    );
+
+    return <BaseTypography weight={weight} color={color} {...props} />;
+}

package/src/components/typography/H1.tsx

@@ -0,0 +1,45 @@
+import React from "react";
+import {
+    IOColors,
+    IOColorsStatusForeground,
+    IOTheme
+} from "../../core/IOColors";
+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 OwnProps = ExternalTypographyProps<
+    TypographyProps<AllowedWeight, AllowedColors>
+>;
+
+export const h1FontSize = 26;
+export const h1LineHeight = 32;
+export const h1DefaultColor: AllowedColors = "bluegreyDark";
+export const h1DefaultWeight: 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
+ */
+export const H1: React.FC<OwnProps> = (props) => {
+    const fontName: FontFamily = "TitilliumWeb";
+    return useTypographyFactory<AllowedWeight, AllowedColors>({
+        ...props,
+        defaultWeight: h1DefaultWeight,
+        defaultColor: h1DefaultColor,
+        font: fontName,
+        fontStyle: { fontSize: h1FontSize, lineHeight: h1LineHeight }
+    });
+};

package/src/components/typography/H2.tsx

@@ -0,0 +1,45 @@
+import React from "react";
+import {
+    IOColors,
+    IOColorsStatusForeground,
+    IOTheme
+} from "../../core/IOColors";
+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 OwnProps = ExternalTypographyProps<
+    TypographyProps<AllowedWeight, AllowedColors>
+>;
+
+export const h2FontSize = 20;
+export const h2LineHeight = 24;
+export const h2DefaultColor: AllowedColors = "bluegreyDark";
+export const h2DefaultWeight: 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
+ */
+export const H2: React.FC<OwnProps> = (props) => {
+    const fontName: FontFamily = "TitilliumWeb";
+    return useTypographyFactory<AllowedWeight, AllowedColors>({
+        ...props,
+        defaultWeight: h2DefaultWeight,
+        defaultColor: h2DefaultColor,
+        font: fontName,
+        fontStyle: { fontSize: h2FontSize, lineHeight: h2LineHeight }
+    });
+};

package/src/components/typography/H3.tsx

@@ -0,0 +1,101 @@
+import React from "react";
+import type { IOColors, IOTheme } from "../../core/IOColors";
+import { FontFamily, IOFontWeight } from "../../utils/fonts";
+import { useTypographyFactory } from "./Factory";
+import { ExternalTypographyProps, RequiredTypographyProps } from "./common";
+
+// these colors are allowed only when the weight is SemiBold
+type AllowedSemiBoldColors = Extract<
+    IOColors,
+    | "bluegreyDark"
+    | "bluegreyLight"
+    | "white"
+    | "red"
+    | "blue"
+    | "bluegrey"
+    | "grey"
+>;
+
+// when the weight is bold, only the white color is allowed
+type AllowedBoldColors = Extract<
+    IOColors,
+    | "white"
+    | "bluegreyLight"
+    | "black"
+    | "bluegreyDark"
+    | "blue"
+    | "bluegrey"
+    | "grey-200"
+>;
+
+// all the possible colors
+type AllowedColors =
+    | AllowedBoldColors
+    | AllowedSemiBoldColors
+    | IOTheme["textHeading-default"];
+
+// all the possible weight
+type AllowedWeight = Extract<IOFontWeight, "Bold" | "SemiBold">;
+
+// these are the properties allowed only if weight is undefined or SemiBold
+type SemiBoldProps = {
+    weight?: Extract<IOFontWeight, "SemiBold">;
+    color?: AllowedSemiBoldColors | IOTheme["textHeading-default"];
+};
+
+// these are the properties allowed only if weight is Bold
+type BoldProps = {
+    weight: Extract<IOFontWeight, "Bold">;
+    color?: AllowedBoldColors | IOTheme["textHeading-default"];
+};
+
+type BoldKindProps = SemiBoldProps | BoldProps;
+
+type OwnProps = ExternalTypographyProps<BoldKindProps>;
+
+export const h3FontSize = 18;
+export const h3LineHeight = 22;
+
+/**
+ * A custom function to calculate the values if no weight or color is provided.
+ * The choose of the default color depends on the weight, for this reason cannot be used
+ * the default calculateWeightColor with fallback if undefined.
+ * @param weight
+ * @param color
+ */
+export const calculateH3WeightColor = (
+    weight?: AllowedWeight,
+    color?: AllowedColors
+): RequiredTypographyProps<AllowedWeight, AllowedColors> => {
+    const newWeight = weight ?? "SemiBold";
+    const newColor =
+        color !== undefined
+            ? color
+            : newWeight === "SemiBold"
+                ? "bluegreyDark"
+                : "white";
+    return {
+        weight: newWeight,
+        color: newColor
+    };
+};
+
+/**
+ * Typography component to render `H3` text with font size {@link fontSize} and fontFamily {@link fontName}.
+ * default values(if not defined) are weight: `SemiBold`, color: `bluegreyDark`
+ * @param props
+ * @constructor
+ */
+export const H3: React.FC<OwnProps> = (props) => {
+    const fontName: FontFamily = "TitilliumWeb";
+    const weightColorFactory = React.useCallback(
+        () => calculateH3WeightColor(props.weight, props.color),
+        [props.weight, props.color]
+    );
+    return useTypographyFactory<AllowedWeight, AllowedColors>({
+        ...props,
+        weightColorFactory,
+        font: fontName,
+        fontStyle: { fontSize: h3FontSize, lineHeight: h3LineHeight }
+    });
+};

package/src/components/typography/H4.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import { IOColorsStatusForeground, IOTheme } from "../../core/IOColors";
+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 OwnProps = ExternalTypographyProps<
+    TypographyProps<AllowedWeight, AllowedColors>
+>;
+
+/* Common typographic styles */
+export const h4FontSize = 20;
+export const h4LineHeight = 24;
+
+/**
+ * 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
+ */
+export const H4: React.FC<OwnProps> = props => {
+    /* New typographic styles */
+    const font: FontFamily = "ReadexPro";
+    const defaultColor: AllowedColors = "black";
+    const defaultWeight: AllowedWeight = "Regular";
+
+    return useTypographyFactory<AllowedWeight, AllowedColors>({
+        ...props,
+        defaultWeight,
+        defaultColor,
+        font,
+        fontStyle: { fontSize: h4FontSize, lineHeight: h4LineHeight }
+    });
+};

package/src/components/typography/H5.tsx

@@ -0,0 +1,66 @@
+import React from "react";
+import type { IOColors } from "../../core/IOColors";
+import { FontFamily, IOFontWeight } from "../../utils/fonts";
+import { useTypographyFactory } from "./Factory";
+import { ExternalTypographyProps } from "./common";
+
+// these colors are allowed only when the weight is SemiBold
+type AllowedSemiBoldColors = Extract<
+    IOColors,
+    "bluegreyDark" | "bluegrey" | "bluegreyLight" | "blue" | "white" | "red"
+>;
+
+// when the weight is bold, only the white color is allowed
+type AllowedRegularColors = Extract<
+    IOColors,
+    | "bluegreyDark"
+    | "bluegrey"
+    | "bluegreyLight"
+    | "blue"
+    | "white"
+    | "red"
+    | "grey"
+>;
+
+// 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";
+
+/**
+ * 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
+ */
+export const H5: React.FC<OwnProps> = (props) => {
+    const fontName: FontFamily = "TitilliumWeb";
+    return useTypographyFactory<AllowedWeight, AllowedColors>({
+        ...props,
+        defaultWeight: h5DefaultWeight,
+        defaultColor: h5DefaultColor,
+        font: fontName,
+        fontStyle: { fontSize: h5FontSize }
+    });
+};

package/src/components/typography/H6.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+import { IOTheme, IOThemeLight } from "../../core/IOColors";
+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 OwnProps = ExternalTypographyProps<
+    TypographyProps<AllowedWeight, AllowedColors>
+>;
+
+export const h6FontSize = 16;
+export const h6LineHeight = 20;
+export const h6DefaultColor: AllowedColors = IOThemeLight["textBody-default"];
+export const h6DefaultWeight: AllowedWeight = "Regular";
+
+/**
+ * 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
+ */
+export const H6: React.FC<OwnProps> = (props) => {
+    const fontName: FontFamily = "ReadexPro";
+    return useTypographyFactory<AllowedWeight, AllowedColors>({
+        ...props,
+        defaultWeight: h6DefaultWeight,
+        defaultColor: h6DefaultColor,
+        font: fontName,
+        fontStyle: { fontSize: h6FontSize, lineHeight: h6LineHeight }
+    });
+};

package/src/components/typography/Label.tsx

@@ -0,0 +1,36 @@
+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";
+
+type PartialAllowedColors = Extract<
+    IOColors,
+    "blue" | "bluegrey" | "bluegreyDark" | "white" | "red"
+>;
+type AllowedColors = PartialAllowedColors | IOColorsStatusForeground;
+type AllowedWeight = Extract<IOFontWeight, "Bold" | "Regular" | "SemiBold">;
+type OwnProps = ExternalTypographyProps<
+    TypographyProps<AllowedWeight, AllowedColors>
+>;
+
+/**
+ * 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
+ */
+export const Label: React.FC<OwnProps> = (props) => {
+    const fontName: FontFamily = "TitilliumWeb";
+    const fontSize = 16;
+    const labelDefaultWeight = "Bold";
+    const labelDefaultcolor = "blue";
+
+    return useTypographyFactory<AllowedWeight, AllowedColors>({
+        ...props,
+        defaultWeight: labelDefaultWeight,
+        defaultColor: labelDefaultcolor,
+        font: fontName,
+        fontStyle: { fontSize }
+    });
+};

package/src/components/typography/LabelSmall.tsx

@@ -0,0 +1,50 @@
+import React from "react";
+import type { IOColors, IOTheme } from "../../core/IOColors";
+import { FontFamily, IOFontWeight } from "../../utils/fonts";
+import { useTypographyFactory } from "./Factory";
+import { ExternalTypographyProps, TypographyProps } from "./common";
+
+type PartialAllowedColors = Extract<
+    IOColors,
+    | "blue"
+    | "bluegrey"
+    | "red"
+    | "white"
+    | "bluegreyDark"
+    | "grey-700"
+    | "grey-200"
+>;
+type AllowedColors = PartialAllowedColors | IOTheme["textBody-tertiary"];
+type AllowedWeight = Extract<IOFontWeight, "Bold" | "Regular" | "SemiBold">;
+type FontSize = "regular" | "small";
+type AllowedFontSize = { fontSize?: FontSize };
+type OwnProps = ExternalTypographyProps<
+    TypographyProps<AllowedWeight, AllowedColors>
+> &
+    AllowedFontSize;
+
+
+/**
+ * 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
+ */
+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>({
+        ...props,
+        defaultWeight: labelDefaultWeight,
+        defaultColor:labelDefaultcolor,
+        font: fontName,
+        fontStyle: {
+            fontSize: props.fontSize
+                ? fontSizeMapping[props.fontSize]
+                : fontSizeMapping.regular
+        }
+    });
+};

package/src/components/typography/Link.tsx

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

package/src/components/typography/Monospace.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+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, "Regular" | "SemiBold" | "Bold">;
+
+type OwnProps = ExternalTypographyProps<
+    TypographyProps<AllowedWeight, AllowedColors>
+>;
+
+/**
+ * Typography component to render `Monospace` text with font size {@link fontSize} and fontFamily {@link fontName}.
+ * default values(if not defined) are weight: `Regular`, color: `bluegrey`
+ * @param props`
+ * @constructor
+ */
+export const Monospace: React.FC<OwnProps> = (props) => {
+    const fontName: FontFamily = "RobotoMono";
+    const fontSize = 16;
+
+    const monospaceDefaultWeight = "Regular";
+    const monospaceDefaultcolor = "bluegrey";
+
+    return useTypographyFactory<AllowedWeight, AllowedColors>({
+        ...props,
+        defaultWeight: monospaceDefaultWeight,
+        defaultColor: monospaceDefaultcolor,
+        font: fontName,
+        fontStyle: { fontSize }
+    });
+};