[CP-3275] Merge headers and paragraphs into a typography component (#2261)

__mocks__/e2e-test-ids.ts

@@ -0,0 +1,90 @@
+
+export enum ModalCloseButtonTestIds {
+  IconButton = "modal-close-button-icon-button",
+}
+
+export enum InteractiveTextInputTestIds {
+  Text = "interactive-text-input-text",
+  Input = "interactive-text-input-input",
+  IconButton = "interactive-text-input-icon-button",
+  ErrorText = "interactive-text-input-error-text",
+}
+
+export enum TypographyTestIds {
+  H1 = "ui-typography-h1",
+  H2 = "ui-typography-h2",
+  H3 = "ui-typography-h3",
+  H4 = "ui-typography-h4",
+  H5 = "ui-typography-h5",
+  P1 = "ui-typography-p1",
+  P2 = "ui-typography-p2",
+  P3 = "ui-typography-p3",
+  P4 = "ui-typography-p4",
+  P5 = "ui-typography-p5",
+}
+
+export enum CheckboxTestIds {
+  Checkbox = "ui-checkbox",
+}
+
+export enum TableTestIds {
+  Table = "ui-table",
+  TableRow = "ui-table-row",
+  TableHeaderRow = "ui-table-header-row",
+  TablePlaceholderRow = "ui-table-place-holder-row",
+  TableCell = "ui-table-cell",
+  TableHeaderCell = "ui-table-header-cell",
+}
+
+export enum PredefinedBackupPasswordTestIds {
+  Title = "predefined-backup-password-title",
+  Description = "predefined-backup-password-description",
+  PasswordPlaceholder = "predefined-backup-password-placeholder",
+  PasswordRepeatPlaceholder = "predefined-backup-password-repeat-placeholder",
+  ConfirmButton = "predefined-backup-password-confirm-button",
+  SkipButton = "predefined-backup-password-skip-button",
+}
+
+export enum PredefinedBackupProgressTestIds {
+  Title = "predefined-backup-progress-title",
+  Description = "predefined-backup-progress-description",
+  ProgressBar = "predefined-backup-progress-progressbar",
+}
+
+export enum ProgressBarTestIds {
+  Description = "progressbar-description",
+  Progress = "progressbar-progress",
+  Details = "progressbar-details",
+}
+
+export enum ContactSupportModalTestIds {
+  Title = "contact-support-modal-success-title",
+  Description = "contact-support-modal-success-description",
+  CloseButton = "contact-support-modal-success-close-button",
+}
+
+export enum ButtonTestIds {
+  PrimaryButton = "primary-button",
+}
+
+export enum BackupModalTestIds {
+  Title = "backup-features-modal-title",
+  Description = "backup-features-modal-description",
+  FeatureElementActive = "backup-features-modal-element-active",
+  FeatureElementInactive = "backup-features-modal-element-inactive",
+  CreateBackupAction = "backup-features-modal-create-action",
+  CancelBackupAction = "backup-features-modal-cancel-action",
+}
+
+export enum ModalTestIds {
+  Modal = "modal-content",
+}
+
+export enum NewContactSupportModalTestIds {
+  Title = "contact-support-modal-title",
+  Subtitle = "contact-support-modal-subtitle",
+  EmailLabel = "email-label",
+  MessageLabel = "message-label",
+  AttachedFilesLabel = "attached-files-label",
+  AttachedFilesSubtext = "attached-files-subtext",
+}

libs/core/contact-support/components/contact-support-modal.component.test.tsx

@@ -12,19 +12,6 @@ import { ContactSupportModalTestIds } from "Core/contact-support/components/cont
 import { noop } from "Core/__deprecated__/renderer/utils/noop"
 import { FileListTestIds } from "Core/__deprecated__/renderer/components/core/file-list/file-list-test-ids.enum"
 
-jest.mock("e2e-test-ids", () => {
-  return {
-    NewContactSupportModalTestIds: {
-      Title: "contact-support-modal-title",
-      Subtitle: "contact-support-modal-subtitle",
-      EmailLabel: "email-label",
-      MessageLabel: "message-label",
-      AttachedFilesLabel: "attached-files-label",
-      AttachedFilesSubtext: "attached-files-subtext",
-    },
-  }
-})
-
 type Props = ComponentProps<typeof ContactSupportModal>
 const defaultProps: Props = {
   open: true,

libs/core/contact-support/containers/contact-support-flow.container.test.tsx

@@ -15,22 +15,6 @@ jest.mock("Core/settings/store/schemas/generate-application-id", () => ({
   generateApplicationId: () => "123",
 }))
 
-jest.mock("e2e-test-ids", () => {
-  return {
-    ModalTestIds: {
-      Modal: "modal-content",
-    },
-    NewContactSupportModalTestIds: {
-      Title: "contact-support-modal-title",
-      Subtitle: "contact-support-modal-subtitle",
-      EmailLabel: "email-label",
-      MessageLabel: "message-label",
-      AttachedFilesLabel: "attached-files-label",
-      AttachedFilesSubtext: "attached-files-subtext",
-    },
-  }
-})
-
 type Props = ComponentProps<typeof ModalsManager>
 
 const defaultProps: Props = {}

libs/e2e-mock/responses/src/lib/contacts-responses.ts

@@ -32,11 +32,11 @@ export const contactsConfig = {
     },
   },
   title: {
-    component: "h3-component",
+    component: "typography.h3",
     config: { text: "Import your contacts" },
   },
   detailText: {
-    component: "p1-component",
+    component: "typography.p1",
     config: { text: "Import all your contacts from a singles ource." },
   },
   importContactsButton: {

libs/generic-view/models/src/index.ts

@@ -40,14 +40,6 @@ import { tooltipAnchor } from "./lib/tooltip-anchor"
 import { overviewOsVersion } from "./lib/overview-os-version"
 import { tooltipContent } from "./lib/tooltip-content"
 import { aboutDataBox } from "./lib/about-data-box"
-import { h3Component, h4Component, h5Component } from "./lib/headers"
-import {
-  p1Component,
-  p2Component,
-  p3Component,
-  p4Component,
-  p5Component,
-} from "./lib/paragraphs"
 import { lastBackupDate } from "./lib/last-backup-date"
 import { listItem } from "./lib/list-item"
 import { marker } from "./lib/marker"
@@ -71,6 +63,7 @@ import { appPortal } from "./lib/app-portal"
 import { buttonPlain } from "./lib/button-plain"
 import { highlightText } from "./lib/highlight-text"
 import { mcContactsSearchResults } from "./lib/mc-contacts-search-results"
+import { TypographyMap } from "./lib/typography"
 
 export * from "./lib/block-box"
 export * from "./lib/block-plain"
@@ -137,6 +130,7 @@ export * from "./lib/selection-manager"
 export * from "./lib/app-portal"
 export * from "./lib/highlight-text"
 export * from "./lib/mc-contacts-search-results"
+export * from "./lib/typography"
 
 export default {
   [blockBox.key]: blockBox,
@@ -175,14 +169,6 @@ export default {
   [tooltip.key]: tooltip,
   [tooltipAnchor.key]: tooltipAnchor,
   [tooltipContent.key]: tooltipContent,
-  [h3Component.key]: h3Component,
-  [h4Component.key]: h4Component,
-  [h5Component.key]: h5Component,
-  [p1Component.key]: p1Component,
-  [p2Component.key]: p2Component,
-  [p3Component.key]: p3Component,
-  [p4Component.key]: p4Component,
-  [p5Component.key]: p5Component,
   [overviewOsVersion.key]: overviewOsVersion,
   [aboutDataBox.key]: aboutDataBox,
   [lastBackupDate.key]: lastBackupDate,
@@ -208,4 +194,5 @@ export default {
   [appPortal.key]: appPortal,
   [highlightText.key]: highlightText,
   [mcContactsSearchResults.key]: mcContactsSearchResults,
+  ...TypographyMap,
 } as const

libs/generic-view/models/src/lib/common-text-validators.ts

@@ -43,7 +43,12 @@ const textAlignValidator = z.object({
     .optional(),
 })
 
+const unboldValidator = z.object({
+  unbold: z.boolean().optional(),
+})
+
 export const commonTextValidators = singleLineTextValidator
+  .merge(unboldValidator)
   .merge(textTransformValidator)
   .merge(colorValidator)
   .merge(textAlignValidator)

libs/generic-view/models/src/lib/format-message.ts

@@ -5,17 +5,20 @@
 
 import { z } from "zod"
 
-const fieldsSchema = z.record(z.string(), z.union([z.string(), z.number()]))
+export const formatMessageFieldsSchema = z.record(
+  z.string(),
+  z.union([z.string(), z.number()])
+)
 
 const dataValidator = z.object({
-  fields: fieldsSchema,
+  fields: formatMessageFieldsSchema,
 })
 
 export type FormatMessageData = z.infer<typeof dataValidator>
 
 const configValidator = z.object({
   messageTemplate: z.string(),
-  fields: fieldsSchema.optional(),
+  fields: formatMessageFieldsSchema.optional(),
 })
 
 export type FormatMessageConfig = z.infer<typeof configValidator>
@@ -25,3 +28,17 @@ export const formatMessage = {
   dataValidator,
   configValidator,
 } as const
+
+export const isValidFormatMessageConfig = (
+  config: unknown
+): config is FormatMessageConfig => {
+  const result = configValidator.safeParse(config)
+  return result.success
+}
+
+export const isValidFormatMessageData = (
+  data: unknown
+): data is FormatMessageData => {
+  const result = dataValidator.safeParse(data)
+  return result.success
+}

libs/generic-view/models/src/lib/paragraphs.ts

@@ -20,12 +20,6 @@ const configValidator = z
 
 export type ParagraphConfig = z.infer<typeof configValidator>
 
-export const p1Component = {
-  key: "p1-component",
-  dataValidator,
-  configValidator,
-} as const
-
 export const p2Component = {
   key: "p2-component",
   dataValidator,
@@ -38,11 +32,6 @@ export const p3Component = {
   configValidator,
 } as const
 
-export const p4Component = {
-  key: "p4-component",
-  dataValidator,
-  configValidator,
-} as const
 
 export const p5Component = {
   key: "p5-component",

libs/generic-view/models/src/lib/typography.ts

@@ -0,0 +1,60 @@
+/**
+ * Copyright (c) Mudita sp. z o.o. All rights reserved.
+ * For licensing, see https://github.com/mudita/mudita-center/blob/master/LICENSE.md
+ */
+
+import { z } from "zod"
+import { commonTextValidators } from "./common-text-validators"
+import { formatMessageFieldsSchema } from "./format-message"
+
+const dataValidator = z
+  .object({
+    text: z.string().optional(),
+    fields: formatMessageFieldsSchema.optional(),
+  })
+  .optional()
+
+export type TypographyData = z.infer<typeof dataValidator>
+
+const configValidator = z
+  .object({
+    text: z.string().optional(),
+    messageTemplate: z.string().optional(),
+    fields: formatMessageFieldsSchema.optional(),
+  })
+  .merge(commonTextValidators)
+  .optional()
+
+export type TypographyConfig = z.infer<typeof configValidator>
+
+export const typographyKeys = [
+  "typography.h3",
+  "typography.h4",
+  "typography.h5",
+  "typography.p1",
+  "typography.p2",
+  "typography.p3",
+  "typography.p4",
+  "typography.p5",
+] as const
+
+export type TypographyKey = (typeof typographyKeys)[number]
+
+export const TypographyMap = typographyKeys.reduce(
+  (acc, key) => {
+    acc[key] = {
+      key,
+      dataValidator,
+      configValidator,
+    }
+    return acc
+  },
+  {} as Record<
+    (typeof typographyKeys)[number],
+    {
+      key: (typeof typographyKeys)[number]
+      dataValidator: typeof dataValidator
+      configValidator: typeof configValidator
+    }
+  >
+)

libs/generic-view/theme/src/lib/theme.ts

@@ -3,6 +3,7 @@
  * For licensing, see https://github.com/mudita/mudita-center/blob/master/LICENSE.md
  */
 
+import { DefaultTheme } from "styled-components"
 import { color } from "./color"
 import { fontSize } from "./font-size"
 import { radius } from "./radius"
@@ -19,4 +20,11 @@ export const theme = {
   fontWeight,
 } as const
 
-export type Theme = typeof theme
+export interface Theme extends DefaultTheme {
+  color: typeof color
+  radius: typeof radius
+  space: typeof space
+  fontSize: typeof fontSize
+  lineHeight: typeof lineHeight
+  fontWeight: typeof fontWeight
+}

libs/generic-view/ui/src/index.ts

@@ -16,6 +16,7 @@ import { texts } from "./lib/texts"
 import { Icon } from "./lib/icon/icon"
 import { table } from "./lib/table"
 import { entities } from "./lib/entities"
+import { typography } from "./lib/typography"
 
 export * from "./lib/icon/icon"
 export * from "./lib/api-connection-demo"
@@ -35,10 +36,9 @@ export { DataMigrationPage } from "./lib/predefined/data-migration/data-migratio
 export * from "./lib/segment-bar"
 export * from "./lib/buttons/button-text"
 export * from "./lib/buttons/button-primary"
-export * from "./lib/texts/paragraphs"
-export * from "./lib/texts/headers"
 export * from "./lib/texts/highlight-text"
 export * from "./lib/entities"
+export * from "./lib/typography"
 
 const apiComponents = {
   ...predefinedComponents,
@@ -53,6 +53,7 @@ const apiComponents = {
   ...texts,
   ...table,
   ...entities,
+  ...typography,
   icon: Icon,
 }
 

libs/generic-view/ui/src/lib/data-rows/labeled-text.tsx

@@ -10,7 +10,7 @@ import { LabeledTextConfig, LabeledTextData } from "generic-view/models"
 
 export const LabeledText: APIFC<LabeledTextData, LabeledTextConfig> = ({
   data,
-  config,
+  config = {},
   ...props
 }) => {
   return (

libs/generic-view/ui/src/lib/entities/entities-loader.tsx

@@ -16,7 +16,7 @@ import {
   selectEntitiesLoadingState,
 } from "generic-view/store"
 import { Dispatch, ReduxRootState } from "Core/__deprecated__/renderer/store"
-import { H3 } from "../texts/headers"
+import { Typography } from "../typography"
 import { ProgressBar } from "../interactive/progress-bar/progress-bar"
 
 export const EntitiesLoader: APIFC<undefined, EntitiesLoaderConfig> = ({
@@ -80,7 +80,7 @@ export const EntitiesLoader: APIFC<undefined, EntitiesLoaderConfig> = ({
   }
   return (
     <div {...props}>
-      {config.text && <H3>{config.text}</H3>}
+      {config.text && <Typography.H3 config={config} />}
       <Progress config={{ maxValue: 100 }} data={{ value: totalProgress }} />
     </div>
   )

libs/generic-view/ui/src/lib/generated/mc-contacts-view/delete-modal.tsx

@@ -40,7 +40,7 @@ const generateDeleteModal = ({
       childrenKeys: [`${id}DeleteModalTitleText`],
     },
     [`${id}DeleteModalContent`]: {
-      component: "p1-component",
+      component: "typography.p1",
       config: {
         text: "This can't be undone so please make a copy of any important information first.",
       },
@@ -164,11 +164,7 @@ const generateDeleteModal = ({
       },
     },
     [`${id}ContactsDeletedToastText`]: {
-      component: "p1-component",
+      component: "typography.p1",
-      childrenKeys: [`${id}ContactsDeletedToastMessage`],
-    },
-    [`${id}ContactsDeletedToastMessage`]: {
-      component: "format-message",
       config: {
         messageTemplate: singleContact
           ? "1 contact deleted"

libs/generic-view/ui/src/lib/generated/mc-contacts-view/mc-contacts-view.ts

@@ -255,7 +255,7 @@ export const generateMcContactsView: ComponentGenerator<McContactsView> = (
       },
     },
     contactsSearchResultsItemPhoneNumber: {
-      component: "p4-component",
+      component: "typography.p4",
       config: {
         color: "black",
       },
@@ -367,11 +367,7 @@ export const generateMcContactsView: ComponentGenerator<McContactsView> = (
       },
     },
     selectedContactsCounter: {
-      component: "p4-component",
+      component: "typography.p4",
-      childrenKeys: ["selectedContactsCounterText"],
-    },
-    selectedContactsCounterText: {
-      component: "format-message",
       config: {
         messageTemplate:
           "{selectedContacts} {selectedContacts, plural, one {contact} other {contacts}} selected",
@@ -490,16 +486,10 @@ export const generateMcContactsView: ComponentGenerator<McContactsView> = (
       childrenKeys: ["contactCheckboxTooltipContentTextWrapper"],
     },
     contactCheckboxTooltipContentTextWrapper: {
-      component: "p5-component",
+      component: "typography.p5",
       config: {
         color: "grey1",
-      },
+        text: "Select",
-      childrenKeys: ["contactCheckboxTooltipContentText"],
-    },
-    contactCheckboxTooltipContentText: {
-      component: "format-message",
-      config: {
-        messageTemplate: "Select",
       },
     },
     contactCheckbox: {
@@ -520,7 +510,7 @@ export const generateMcContactsView: ComponentGenerator<McContactsView> = (
       },
     },
     contactDisplayName: {
-      component: "p1-component",
+      component: "typography.p1",
       config: {
         color: "black",
       },
@@ -550,7 +540,7 @@ export const generateMcContactsView: ComponentGenerator<McContactsView> = (
       childrenKeys: ["contactPhoneNumberWrapper"],
     },
     contactPhoneNumber: {
-      component: "p1-component",
+      component: "typography.p1",
       config: {
         color: "black",
       },
@@ -658,7 +648,7 @@ export const generateMcContactsView: ComponentGenerator<McContactsView> = (
       childrenKeys: ["phoneDropdownCounterTooltipContentText"],
     },
     phoneDropdownCounterTooltipContentText: {
-      component: "p5-component",
+      component: "typography.p5",
       config: {
         color: "grey1",
       },
@@ -846,13 +836,13 @@ export const generateMcContactsView: ComponentGenerator<McContactsView> = (
       },
     },
     emptyStateTitle: {
-      component: "h3-component",
+      component: "typography.h3",
       config: {
         text: "Import your contacts",
       },
     },
     emptyStateDetailText: {
-      component: "p1-component",
+      component: "typography.p1",
       config: {
         text: "Import all your contacts from a single source.",
       },
@@ -1026,7 +1016,7 @@ export const generateMcContactsView: ComponentGenerator<McContactsView> = (
       childrenKeys: ["contactDisplayNameHeader", "contactDetailsHeaderActions"],
     },
     contactDisplayNameHeader: {
-      component: "h3-component",
+      component: "typography.h3",
       config: {
         text: "",
         unbold: true,
@@ -1060,7 +1050,7 @@ export const generateMcContactsView: ComponentGenerator<McContactsView> = (
       },
     },
     contactInformationText: {
-      component: "h4-component",
+      component: "typography.h4",
       layout: {
         margin: "0 0 16px 0",
       },
@@ -1094,7 +1084,7 @@ export const generateMcContactsView: ComponentGenerator<McContactsView> = (
       ],
     },
     contactDetailsPhoneNumberLabel: {
-      component: "h5-component",
+      component: "typography.h5",
       config: {
         text: "Phone number",
       },
@@ -1130,7 +1120,7 @@ export const generateMcContactsView: ComponentGenerator<McContactsView> = (
       ],
     },
     contactDetailsPhoneNumber1Value: {
-      component: "p4-component",
+      component: "typography.p4",
       config: {
         color: "black",
       },
@@ -1146,15 +1136,9 @@ export const generateMcContactsView: ComponentGenerator<McContactsView> = (
       },
     },
     contactDetailsPhoneNumber1Type: {
-      component: "p4-component",
+      component: "typography.p4",
       config: {
         color: "black",
-      },
-      childrenKeys: ["contactDetailsPhoneNumber1TypeText"],
-    },
-    contactDetailsPhoneNumber1TypeText: {
-      component: "format-message",
-      config: {
         messageTemplate: "• <c>{phoneType}</c>",
       },
       dataProvider: {
@@ -1197,17 +1181,12 @@ export const generateMcContactsView: ComponentGenerator<McContactsView> = (
       ],
     },
     contactDetailsPhoneNumber1DefaultIconTooltipContentTextWrapper: {
-      component: "p5-component",
+      component: "typography.p5",
       config: {
         color: "grey1",
-      },
-      childrenKeys: ["contactDetailsPhoneNumber1DefaultIconTooltipContentText"],
-    },
-    contactDetailsPhoneNumber1DefaultIconTooltipContentText: {
-      component: "format-message",
-      config: {
         messageTemplate: "Calls and SMS will go to this number by default.",
       },
+      childrenKeys: ["contactDetailsPhoneNumber1DefaultIconTooltipContentText"],
     },
     contactDetailsPhoneNumber1DefaultIcon: {
       component: "icon",
@@ -1247,7 +1226,7 @@ export const generateMcContactsView: ComponentGenerator<McContactsView> = (
       ],
     },
     contactDetailsPhoneNumber2Value: {
-      component: "p4-component",
+      component: "typography.p4",
       config: {
         color: "black",
       },
@@ -1263,15 +1242,9 @@ export const generateMcContactsView: ComponentGenerator<McContactsView> = (
       },
     },
     contactDetailsPhoneNumber2Type: {
-      component: "p4-component",
+      component: "typography.p4",
       config: {
         color: "black",
-      },
-      childrenKeys: ["contactDetailsPhoneNumber2TypeText"],
-    },
-    contactDetailsPhoneNumber2TypeText: {
-      component: "format-message",
-      config: {
         messageTemplate: "• <c>{phoneType}</c>",
       },
       dataProvider: {
@@ -1308,13 +1281,13 @@ export const generateMcContactsView: ComponentGenerator<McContactsView> = (
       ],
     },
     contactDetailsFirstNameLabel: {
-      component: "h5-component",
+      component: "typography.h5",
       config: {
         text: "First name",
       },
     },
     contactDetailsFirstNameValue: {
-      component: "p4-component",
+      component: "typography.p4",
       config: {
         color: "black",
       },
@@ -1352,13 +1325,13 @@ export const generateMcContactsView: ComponentGenerator<McContactsView> = (
       ],
     },
     contactDetailsLastNameLabel: {
-      component: "h5-component",
+      component: "typography.h5",
       config: {
         text: "Last name",
       },
     },
     contactDetailsLastNameValue: {
-      component: "p4-component",
+      component: "typography.p4",
       config: {
         color: "black",
       },
@@ -1396,13 +1369,13 @@ export const generateMcContactsView: ComponentGenerator<McContactsView> = (
       ],
     },
     contactDetailsNamePrefixLabel: {
-      component: "h5-component",
+      component: "typography.h5",
       config: {
         text: "Name prefix",
       },
     },
     contactDetailsNamePrefixValue: {
-      component: "p4-component",
+      component: "typography.p4",
       config: {
         color: "black",
       },
@@ -1440,13 +1413,13 @@ export const generateMcContactsView: ComponentGenerator<McContactsView> = (
       ],
     },
     contactDetailsMiddleNameLabel: {
-      component: "h5-component",
+      component: "typography.h5",
       config: {
         text: "Middle name",
       },
     },
     contactDetailsMiddleNameValue: {
-      component: "p4-component",
+      component: "typography.p4",
       config: {
         color: "black",
       },
@@ -1484,13 +1457,13 @@ export const generateMcContactsView: ComponentGenerator<McContactsView> = (
       ],
     },
     contactDetailsNameSuffixLabel: {
-      component: "h5-component",
+      component: "typography.h5",
       config: {
         text: "Name suffix",
       },
     },
     contactDetailsNameSuffixValue: {
-      component: "p4-component",
+      component: "typography.p4",
       config: {
         color: "black",
       },
@@ -1521,7 +1494,7 @@ export const generateMcContactsView: ComponentGenerator<McContactsView> = (
       childrenKeys: ["contactDetailsEmail"],
     },
     contactDetailsEmailLabel: {
-      component: "h5-component",
+      component: "typography.h5",
       config: {
         text: "Email",
       },
@@ -1538,7 +1511,7 @@ export const generateMcContactsView: ComponentGenerator<McContactsView> = (
       childrenKeys: ["contactDetailsEmailValue", "contactDetailsEmailType"],
     },
     contactDetailsEmailValue: {
-      component: "p4-component",
+      component: "typography.p4",
       config: {
         color: "black",
       },
@@ -1554,15 +1527,9 @@ export const generateMcContactsView: ComponentGenerator<McContactsView> = (
       },
     },
     contactDetailsEmailType: {
-      component: "p4-component",
+      component: "typography.p4",
       config: {
         color: "black",
-      },
-      childrenKeys: ["contactDetailsEmailTypeText"],
-    },
-    contactDetailsEmailTypeText: {
-      component: "format-message",
-      config: {
         messageTemplate: "• <c>{emailType}</c>",
       },
       dataProvider: {
@@ -1599,13 +1566,13 @@ export const generateMcContactsView: ComponentGenerator<McContactsView> = (
       ],
     },
     contactDetailsNickNameLabel: {
-      component: "h5-component",
+      component: "typography.h5",
       config: {
         text: "Nickname",
       },
     },
     contactDetailsNickNameValue: {
-      component: "p4-component",
+      component: "typography.p4",
       config: {
         color: "black",
       },
@@ -1643,13 +1610,13 @@ export const generateMcContactsView: ComponentGenerator<McContactsView> = (
       ],
     },
     contactDetailsCompanyLabel: {
-      component: "h5-component",
+      component: "typography.h5",
       config: {
         text: "Company",
       },
     },
     contactDetailsCompanyValue: {
-      component: "p4-component",
+      component: "typography.p4",
       config: {
         color: "black",
       },
@@ -1687,13 +1654,13 @@ export const generateMcContactsView: ComponentGenerator<McContactsView> = (
       ],
     },
     contactDetailsDepartmentLabel: {
-      component: "h5-component",
+      component: "typography.h5",
       config: {
         text: "Department",
       },
     },
     contactDetailsDepartmentValue: {
-      component: "p4-component",
+      component: "typography.p4",
       config: {
         color: "black",
       },
@@ -1728,13 +1695,13 @@ export const generateMcContactsView: ComponentGenerator<McContactsView> = (
       childrenKeys: ["contactDetailsTitleLabel", "contactDetailsTitleValue"],
     },
     contactDetailsTitleLabel: {
-      component: "h5-component",
+      component: "typography.h5",
       config: {
         text: "Job Title",
       },
     },
     contactDetailsTitleValue: {
-      component: "p4-component",
+      component: "typography.p4",
       config: {
         color: "black",
       },
@@ -1769,13 +1736,13 @@ export const generateMcContactsView: ComponentGenerator<McContactsView> = (
       childrenKeys: ["contactDetailsSipLabel", "contactDetailsSipValue"],
     },
     contactDetailsSipLabel: {
-      component: "h5-component",
+      component: "typography.h5",
       config: {
         text: "SIP",
       },
     },
     contactDetailsSipValue: {
-      component: "p4-component",
+      component: "typography.p4",
       config: {
         color: "black",
       },
@@ -1817,7 +1784,7 @@ export const generateMcContactsView: ComponentGenerator<McContactsView> = (
       ],
     },
     contactDetailsAddressLabel: {
-      component: "h5-component",
+      component: "typography.h5",
       config: {
         text: "Address",
       },
@@ -1838,15 +1805,9 @@ export const generateMcContactsView: ComponentGenerator<McContactsView> = (
       childrenKeys: ["contactDetailsAddressStreetValue"],
     },
     contactDetailsAddressStreetValue: {
-      component: "p4-component",
+      component: "typography.p4",
       config: {
         color: "black",
-      },
-      childrenKeys: ["contactDetailsAddressStreetValueText"],
-    },
-    contactDetailsAddressStreetValueText: {
-      component: "format-message",
-      config: {
         messageTemplate: "{streetAddress} • <c>{addressType}</c>",
       },
       dataProvider: {
@@ -1880,15 +1841,9 @@ export const generateMcContactsView: ComponentGenerator<McContactsView> = (
       childrenKeys: ["contactDetailsAddressCity"],
     },
     contactDetailsAddressCity: {
-      component: "p4-component",
+      component: "typography.p4",
       config: {
         color: "black",
-      },
-      childrenKeys: ["contactDetailsAddressCityValue"],
-    },
-    contactDetailsAddressCityValue: {
-      component: "format-message",
-      config: {
         messageTemplate: "{city} {zipCode}",
       },
       dataProvider: {
@@ -1922,7 +1877,7 @@ export const generateMcContactsView: ComponentGenerator<McContactsView> = (
       childrenKeys: ["contactDetailsAddressCountryValue"],
     },
     contactDetailsAddressCountryValue: {
-      component: "p4-component",
+      component: "typography.p4",
       config: {
         color: "black",
       },
@@ -1960,13 +1915,13 @@ export const generateMcContactsView: ComponentGenerator<McContactsView> = (
       ],
     },
     contactDetailsWebsiteLabel: {
-      component: "h5-component",
+      component: "typography.h5",
       config: {
         text: "Website",
       },
     },
     contactDetailsWebsiteValue: {
-      component: "p4-component",
+      component: "typography.p4",
       config: {
         color: "black",
       },
@@ -2001,7 +1956,7 @@ export const generateMcContactsView: ComponentGenerator<McContactsView> = (
       childrenKeys: ["contactDetailsNotesLabel", "contactDetailsNotesValue"],
     },
     contactDetailsNotesLabel: {
-      component: "h5-component",
+      component: "typography.h5",
       layout: {
         margin: "16px 0 0 0",
       },
@@ -2010,7 +1965,7 @@ export const generateMcContactsView: ComponentGenerator<McContactsView> = (
       },
     },
     contactDetailsNotesValue: {
-      component: "p4-component",
+      component: "typography.p4",
       config: {
         color: "black",
       },

libs/generic-view/ui/src/lib/generated/mc-file-manager/delete-files.ts

@@ -51,11 +51,7 @@ export const generateDeleteFiles = (
       },
     },
     [`${id}deleteModalContent`]: {
-      component: "p1-component",
+      component: "typography.p1",
-      childrenKeys: [`${id}deleteModalContentText`],
-    },
-    [`${id}deleteModalContentText`]: {
-      component: "format-message",
       config: {
         messageTemplate:
           "This will remove the {selectedItems, plural, one {file} other {files}} from Kompakt.",
@@ -169,11 +165,7 @@ export const generateDeleteFiles = (
       },
     },
     [`${id}filesDeletedToastText`]: {
-      component: "p1-component",
+      component: "typography.p1",
-      childrenKeys: [`${id}filesDeletedToastMessage`],
-    },
-    [`${id}filesDeletedToastMessage`]: {
-      component: "format-message",
       config: {
         messageTemplate:
           "{selectedItems} {selectedItems, plural, one {file} other {files}} deleted",

libs/generic-view/ui/src/lib/generated/mc-file-manager/file-category-list.ts

@@ -122,7 +122,7 @@ const generateFileCategoryListItem = ({
       },
     },
     [`${id}CategoryListItemNameText`]: {
-      component: "h4-component",
+      component: "typography.h4",
       config: {
         text: name,
       },
@@ -148,7 +148,7 @@ const generateFileCategoryListItem = ({
       ],
     },
     [`${id}CategoryListItemStorageText`]: {
-      component: "p3-component",
+      component: "typography.p3",
       config: {
         text: "0",
         color: "black",
@@ -169,7 +169,7 @@ const generateFileCategoryListItem = ({
       },
     },
     [`${id}CategoryListItemCountTextWrapper`]: {
-      component: "p3-component",
+      component: "typography.p3",
       layout: {
         margin: "8px 0 0 0",
         gridPlacement: {
@@ -179,10 +179,6 @@ const generateFileCategoryListItem = ({
           height: 1,
         },
       },
-      childrenKeys: [`${id}CategoryListItemCountText`],
-    },
-    [`${id}CategoryListItemCountText`]: {
-      component: "format-message",
       config: {
         messageTemplate:
           "{totalEntities} {totalEntities, plural, one {file} other {files}}",

libs/generic-view/ui/src/lib/generated/mc-file-manager/file-list.ts

@@ -193,11 +193,7 @@ const generateFileList = ({
       ],
     },
     [`${id}fileListPanelHeaderWrapper`]: {
-      component: "h3-component",
+      component: "typography.h3",
-      childrenKeys: [`${id}fileListPanelHeader`],
-    },
-    [`${id}fileListPanelHeader`]: {
-      component: "format-message",
       config: {
         messageTemplate: `${name} {totalEntities, plural, =0 {} other { (#)}}`,
       },
@@ -280,11 +276,7 @@ const generateFileList = ({
       },
     },
     [`${id}selectedItemsCounter`]: {
-      component: "p4-component",
+      component: "typography.p4",
-      childrenKeys: [`${id}selectedItemsCounterText`],
-    },
-    [`${id}selectedItemsCounterText`]: {
-      component: "format-message",
       config: {
         messageTemplate:
           "{selectedItems} {selectedItems, plural, one {file} other {files}} selected",
@@ -333,7 +325,7 @@ const generateFileList = ({
       ],
     },
     [`${id}fileListEmptyStateHeader`]: {
-      component: "h4-component",
+      component: "typography.h4",
       layout: {
         margin: "0 0 8px 0",
       },
@@ -342,7 +334,7 @@ const generateFileList = ({
       },
     },
     [`${id}fileListEmptyStateDescription`]: {
-      component: "p3-component",
+      component: "typography.p3",
       layout: {
         margin: "0 auto 24px auto",
         width: "388px",
@@ -414,7 +406,7 @@ const generateFileList = ({
       childrenKeys: [`${id}headerCellNameText`],
     },
     [`${id}headerCellNameText`]: {
-      component: "p5-component",
+      component: "typography.p5",
       config: {
         textTransform: "uppercase",
         text: "Name",
@@ -431,7 +423,7 @@ const generateFileList = ({
       childrenKeys: [`${id}headerCellTypeText`],
     },
     [`${id}headerCellTypeText`]: {
-      component: "p5-component",
+      component: "typography.p5",
       config: {
         textTransform: "uppercase",
         text: "Type",
@@ -448,7 +440,7 @@ const generateFileList = ({
       childrenKeys: [`${id}headerCellSizeText`],
     },
     [`${id}headerCellSizeText`]: {
-      component: "p5-component",
+      component: "typography.p5",
       config: {
         textTransform: "uppercase",
         text: "Size",
@@ -487,16 +479,10 @@ const generateFileList = ({
       childrenKeys: [`${id}contactCheckboxTooltipContentTextWrapper`],
     },
     [`${id}contactCheckboxTooltipContentTextWrapper`]: {
-      component: "p5-component",
+      component: "typography.p5",
       config: {
         color: "grey1",
-      },
+        text: "Select",
-      childrenKeys: [`${id}contactCheckboxTooltipContentText`],
-    },
-    [`${id}contactCheckboxTooltipContentText`]: {
-      component: "format-message",
-      config: {
-        messageTemplate: "Select",
       },
     },
     [`${id}contactCheckbox`]: {
@@ -527,7 +513,7 @@ const generateFileList = ({
       childrenKeys: [`${id}columnNameText`],
     },
     [`${id}columnNameText`]: {
-      component: "p1-component",
+      component: "typography.p1",
       config: {
         color: "black",
       },
@@ -550,7 +536,7 @@ const generateFileList = ({
       childrenKeys: [`${id}columnTypeText`],
     },
     [`${id}columnTypeText`]: {
-      component: "p3-component",
+      component: "typography.p3",
       config: {
         color: "black",
         textTransform: "uppercase",
@@ -574,7 +560,7 @@ const generateFileList = ({
       childrenKeys: [`${id}columnSizeText`],
     },
     [`${id}columnSizeText`]: {
-      component: "p3-component",
+      component: "typography.p3",
       config: {
         color: "black",
         textTransform: "format-bytes",

libs/generic-view/ui/src/lib/generated/mc-file-manager/mc-file-manager-data.ts

@@ -10,7 +10,7 @@ import {
   segmentBarItemData,
 } from "generic-view/models"
 import { View } from "generic-view/utils"
-import { formatBytes } from "../../texts/format-bytes"
+import { formatBytes } from "../../typography/format-bytes"
 import { SEGMENTS_CONFIG_MAP } from "./storage-summary-bar"
 
 const isEntitiesLoaderConfig = (

libs/generic-view/ui/src/lib/generated/mc-file-manager/mc-file-manager-view.ts

@@ -99,7 +99,7 @@ export const generateMcFileManagerView: ComponentGenerator<
       childrenKeys: ["storageSummaryHeader", "storageSummaryContent"],
     },
     storageSummaryHeader: {
-      component: "h3-component",
+      component: "typography.h3",
       layout: {
         margin: "0 0 24px 0",
       },
@@ -122,7 +122,7 @@ export const generateMcFileManagerView: ComponentGenerator<
       ],
     },
     storageSummaryUsedText: {
-      component: "p3-component",
+      component: "typography.p3",
       config: {
         // TODO: Refactor to template after https://appnroll.atlassian.net/browse/CP-3275
         text: "Used: 0 KB",
@@ -138,7 +138,7 @@ export const generateMcFileManagerView: ComponentGenerator<
       },
     },
     storageSummaryFreeText: {
-      component: "p3-component",
+      component: "typography.p3",
       config: {
         text: "0",
         color: "grey2",
@@ -191,13 +191,13 @@ export const generateMcFileManagerView: ComponentGenerator<
       ],
     },
     fileCategoryOtherFilesItemNameText: {
-      component: "h4-component",
+      component: "typography.h4",
       config: {
         text: "Other files",
       },
     },
     fileCategoryOtherFilesItemNameSize: {
-      component: "p3-component",
+      component: "typography.p3",
       layout: {
         margin: "0 0 0 3px",
       },

libs/generic-view/ui/src/lib/generated/mc-file-manager/other-files-list.tsx

@@ -28,7 +28,7 @@ const generateOtherFilesListItem = ({
       ],
     },
     [`${id}otherFilesListItemMarker`]: {
-      component: "p5-component",
+      component: "typography.p5",
       layout: {
         margin: "0 6px",
       },
@@ -38,7 +38,7 @@ const generateOtherFilesListItem = ({
       },
     },
     [`${id}otherFilesListItemText`]: {
-      component: "p5-component",
+      component: "typography.p5",
       config: {
         text: name,
         color: "grey1",

libs/generic-view/ui/src/lib/interactive/form/input/search-results.tsx

@@ -19,7 +19,7 @@ import styled from "styled-components"
 import { intl } from "Core/__deprecated__/renderer/utils/intl"
 import { APIFC, IconType } from "generic-view/utils"
 import { Icon } from "../../../icon/icon"
-import { P3 } from "../../../texts/paragraphs"
+import { Typography } from "../../../typography"
 import {
   FormSearchInputResultsConfig,
   FormSearchInputResultsData,
@@ -143,9 +143,9 @@ export const SearchResults: APIFC<
       ) : (
         <EmptyResults>
           <Icon config={{ type: IconType.Search }} />
-          <P3>
+          <Typography.P3>
             {config?.noResultsMessage || intl.formatMessage(messages.noResults)}
-          </P3>
+          </Typography.P3>
         </EmptyResults>
       )}
     </SearchResultsWrapper>

libs/generic-view/ui/src/lib/interactive/modal/modal.tsx

@@ -30,7 +30,7 @@ export const Modal: BaseGenericComponent<
   CloseButton: typeof ModalCloseButton
   SizeController: typeof ModalSizeController
   VisibilityController: typeof ModalVisibilityController
-} = ({ children, componentKey, config }) => {
+} = ({ children, componentKey, config = {} }) => {
   const { opened } = useModalsQueue(componentKey)
 
   return (

libs/generic-view/ui/src/lib/predefined/contacts/mc-contacts-search-result.tsx

@@ -10,7 +10,7 @@ import {
   ContactsSearchResultsConfig,
   ContactsSearchResultsData,
 } from "generic-view/models"
-import { P3, P4 } from "../../texts/paragraphs"
+import { Typography } from "../../typography"
 import { findMatches, HighlightText } from "../../texts/highlight-text"
 
 export const McContactsSearchResult: APIFC<
@@ -46,7 +46,7 @@ export const McContactsSearchResult: APIFC<
 
   return (
     <>
-      <P3 $color={"black"} $singleLine>
+      <Typography.P3 config={{ color: "black", singleLine: true }}>
         <HighlightText
           data={{
             text: firstLine,
@@ -58,9 +58,9 @@ export const McContactsSearchResult: APIFC<
             phraseWordsSeparated: true,
           }}
         />
-      </P3>
+      </Typography.P3>
       {renderSecondLine && (
-        <P4 $color={"black"} $singleLine>
+        <Typography.P4 config={{ color: "black", singleLine: true }}>
           <HighlightText
             data={{
               text: secondLineMatches.text,
@@ -70,7 +70,7 @@ export const McContactsSearchResult: APIFC<
               matches: secondLineMatches.matches,
             }}
           />
-        </P4>
+        </Typography.P4>
       )}
     </>
   )

libs/generic-view/ui/src/lib/predefined/data-migration/components/device-card.tsx

@@ -5,8 +5,7 @@
 
 import React, { FunctionComponent } from "react"
 import styled, { css } from "styled-components"
-import { H4, H5 } from "../../../texts/headers"
+import { Typography } from "../../../typography"
-import { P3 } from "../../../texts/paragraphs"
 import { ButtonPrimary } from "../../../buttons/button-primary"
 import { defineMessages } from "react-intl"
 import { intl } from "Core/__deprecated__/renderer/utils/intl"
@@ -35,8 +34,10 @@ export const DeviceCard: FunctionComponent<
       </Image>
       <Info>
         <H4>{name}</H4>
-        <P3>{intl.formatMessage(messages.serialNumber)}</P3>
+        <Typography.P3>
-        <H5>{serialNumber}</H5>
+          {intl.formatMessage(messages.serialNumber)}
+        </Typography.P3>
+        <Typography.H5>{serialNumber}</Typography.H5>
       </Info>
       <SelectButton
         config={{
@@ -95,6 +96,8 @@ export const Image = styled.div`
   }
 `
 
+const H4 = styled(Typography.H4)``
+
 export const Info = styled.div`
   grid-area: info;
   align-self: center;

libs/generic-view/ui/src/lib/predefined/data-migration/components/device-selector.tsx

@@ -6,8 +6,7 @@
 import React, { FunctionComponent, useRef, useState } from "react"
 import { deviceCardStyles, Image, Info, Tag } from "./device-card"
 import styled, { css } from "styled-components"
-import { H4, H5 } from "../../../texts/headers"
+import { Typography } from "../../../typography"
-import { P3 } from "../../../texts/paragraphs"
 import * as DropdownArrowSvg from "../dropdown.svg"
 import * as CheckSvg from "../check.svg"
 import useOutsideClick from "Core/__deprecated__/renderer/utils/hooks/useOutsideClick"
@@ -76,9 +75,11 @@ export const DeviceSelector: FunctionComponent<Props> = ({ type, devices }) => {
           <img src={selectedDevice?.image} alt={""} />
         </Image>
         <Info>
-          <H4>{selectedDevice?.name}</H4>
+          <Typography.H4>{selectedDevice?.name}</Typography.H4>
-          <P3>{intl.formatMessage(messages.serialNumber)}</P3>
+          <Typography.P3>
-          <H5>{selectedDevice?.serialNumber}</H5>
+            {intl.formatMessage(messages.serialNumber)}
+          </Typography.P3>
+          <Typography.H5>{selectedDevice?.serialNumber}</Typography.H5>
         </Info>
         <Arrow>{dropdownVisible && <DropdownArrowSvg />}</Arrow>
       </CardWrapper>
@@ -112,9 +113,11 @@ const ListItem: FunctionComponent<
         <img src={image} alt={name} />
       </Image>
       <Info>
-        <H4>{name}</H4>
+        <Typography.H4>{name}</Typography.H4>
-        <P3>{intl.formatMessage(messages.serialNumber)}</P3>
+        <Typography.P3>
-        <H5>{serialNumber}</H5>
+          {intl.formatMessage(messages.serialNumber)}
+        </Typography.P3>
+        <Typography.H5>{serialNumber}</Typography.H5>
       </Info>
       <Check>{active && <CheckSvg />}</Check>
     </ListItemCard>

libs/generic-view/ui/src/lib/predefined/data-migration/components/features-selector.tsx

@@ -4,7 +4,7 @@
  */
 
 import React, { FunctionComponent, useCallback } from "react"
-import { H4 } from "../../../texts/headers"
+import { Typography } from "../../../typography"
 import styled from "styled-components"
 import { DataMigrationFeature } from "generic-view/models"
 import { Divider } from "../../../helpers/divider"
@@ -75,7 +75,7 @@ export const FeaturesSelector: FunctionComponent<Props> = ({ features }) => {
 
   return (
     <Wrapper>
-      <H4>{intl.formatMessage(messages.title)}</H4>
+      <Typography.H4>{intl.formatMessage(messages.title)}</Typography.H4>
       <AllCheckbox
         config={{
           name: "all-features",

libs/generic-view/ui/src/lib/predefined/data-migration/components/source-selector.tsx

@@ -7,7 +7,7 @@ import React, { FunctionComponent } from "react"
 import { DeviceSelector } from "./device-selector"
 import styled from "styled-components"
 import * as ArrowSvg from "../arrow.svg"
-import { H4 } from "../../../texts/headers"
+import { Typography } from "../../../typography"
 import { useSelector } from "react-redux"
 import {
   selectDataMigrationSourceDevices,
@@ -31,15 +31,15 @@ export const SourceSelector: FunctionComponent = () => {
   return (
     <Wrapper>
       <Column>
-        <H4>{intl.formatMessage(messages.from)}</H4>
+        <Typography.H4>{intl.formatMessage(messages.from)}</Typography.H4>
         <DeviceSelector type={"source"} devices={sourceDevices} />
       </Column>
       <Column>
-        <H4>&nbsp;</H4>
+        <Typography.H4>&nbsp;</Typography.H4>
         <ArrowSvg />
       </Column>
       <Column>
-        <H4>{intl.formatMessage(messages.to)}</H4>
+        <Typography.H4>{intl.formatMessage(messages.to)}</Typography.H4>
         <DeviceSelector
           type={"target"}
           devices={targetDevice ? [targetDevice] : []}

libs/generic-view/ui/src/lib/predefined/data-migration/data-migration.tsx

@@ -5,12 +5,7 @@
 
 /* stylelint-disable no-duplicate-selectors */
 
-import React, {
+import React, { FunctionComponent, useCallback, useEffect, useState } from "react"
-  FunctionComponent,
-  useCallback,
-  useEffect,
-  useState,
-} from "react"
 import { defineMessages } from "react-intl"
 import { useDispatch, useSelector } from "react-redux"
 import { APIFC } from "generic-view/utils"
@@ -36,15 +31,12 @@ import {
 } from "generic-view/store"
 import { Instruction, InstructionWrapper } from "./instruction"
 import styled from "styled-components"
-import { H3 } from "../../texts/headers"
+import { Typography } from "../../typography"
 import { Divider } from "../../helpers/divider"
 import { TargetSelector, TargetSelectorWrapper } from "./target-selector"
 import Form from "../../interactive/form/form"
 import { TransferSetup } from "./transfer-setup"
-import {
+import { GenericThemeProvider, modalTransitionDuration } from "generic-view/theme"
-  GenericThemeProvider,
-  modalTransitionDuration,
-} from "generic-view/theme"
 import { intl } from "Core/__deprecated__/renderer/utils/intl"
 import { Dispatch } from "Core/__deprecated__/renderer/store"
 import { PureErrorModal } from "./components/pure-error-modal"
@@ -305,6 +297,8 @@ const Wrapper = styled.div`
   }
 `
 
+const H3 = styled(Typography.H3)``
+
 const Header = styled.div`
   display: flex;
   justify-content: center;

libs/generic-view/ui/src/lib/predefined/data-migration/instruction.tsx

@@ -5,7 +5,7 @@
 
 import React, { FunctionComponent } from "react"
 import styled from "styled-components"
-import { P1, P3 } from "../../texts/paragraphs"
+import { Typography } from "../../typography"
 import * as ConnectionSvg from "./connection.svg"
 import { defineMessages } from "react-intl"
 import { intl } from "Core/__deprecated__/renderer/utils/intl"
@@ -36,23 +36,31 @@ export const Instruction: FunctionComponent = () => {
     <InstructionWrapper>
       <Header>
         <h2>{intl.formatMessage(messages.title)}</h2>
-        <P3>{intl.formatMessage(messages.description)}</P3>
+        <Typography.P3>
+          {intl.formatMessage(messages.description)}
+        </Typography.P3>
       </Header>
       <Image>
         <ConnectionSvg />
       </Image>
       <Steps>
         <Step>
-          <P1>{intl.formatMessage(messages.step, { number: 1 })}</P1>
+          <Typography.P1>
-          <P3>{intl.formatMessage(messages.step1)}</P3>
+            {intl.formatMessage(messages.step, { number: 1 })}
+          </Typography.P1>
+          <Typography.P3>{intl.formatMessage(messages.step1)}</Typography.P3>
         </Step>
         <Step>
-          <P1>{intl.formatMessage(messages.step, { number: 2 })}</P1>
+          <Typography.P1>
-          <P3>{intl.formatMessage(messages.step2)}</P3>
+            {intl.formatMessage(messages.step, { number: 2 })}
+          </Typography.P1>
+          <Typography.P3>{intl.formatMessage(messages.step2)}</Typography.P3>
         </Step>
         <Step>
-          <P1>{intl.formatMessage(messages.step, { number: 3 })}</P1>
+          <Typography.P1>
-          <P3>{intl.formatMessage(messages.step3)}</P3>
+            {intl.formatMessage(messages.step, { number: 3 })}
+          </Typography.P1>
+          <Typography.P3>{intl.formatMessage(messages.step3)}</Typography.P3>
         </Step>
       </Steps>
     </InstructionWrapper>

libs/generic-view/ui/src/lib/predefined/data-migration/target-selector.tsx

@@ -5,7 +5,7 @@
 
 import React, { FunctionComponent } from "react"
 import styled from "styled-components"
-import { P3 } from "../../texts/paragraphs"
+import { Typography } from "../../typography"
 import { DeviceCard } from "./components/device-card"
 import { useDataMigrationDeviceSelector } from "shared/feature"
 import { defineMessages } from "react-intl"
@@ -32,7 +32,9 @@ export const TargetSelector: FunctionComponent<Props> = ({ devices }) => {
     <TargetSelectorWrapper>
       <Header>
         <h2>{intl.formatMessage(messages.title)}</h2>
-        <P3>{intl.formatMessage(messages.description)}</P3>
+        <Typography.P3>
+          {intl.formatMessage(messages.description)}
+        </Typography.P3>
       </Header>
       <Devices>
         {devices.map((device) => {

libs/generic-view/ui/src/lib/predefined/import-contacts/import-contacts-list.tsx

@@ -17,7 +17,7 @@ import { useSelector } from "react-redux"
 import { Divider } from "../../helpers/divider"
 import { Form } from "../../interactive/form/form"
 import { ButtonAction } from "generic-view/models"
-import { Paragraph5 } from "../../texts/paragraphs"
+import { Typography } from "../../typography"
 
 export const SELECTED_CONTACTS_FIELD = "selected-contacts"
 
@@ -148,7 +148,9 @@ const ContactItem: React.FC<UnifiedContact> = ({
                 </Tooltip.Anchor>
                 <Tooltip.Content>
                   {phoneNumbers.slice(1).map((number) => (
-                    <Paragraph5 key={number.value}>{number.value}</Paragraph5>
+                    <Typography.P5 key={number.value}>
+                      {number.value}
+                    </Typography.P5>
                   ))}
                 </Tooltip.Content>
               </Tooltip>

libs/generic-view/ui/src/lib/predefined/incoming-feature-info.tsx

@@ -7,8 +7,7 @@ import React from "react"
 import styled from "styled-components"
 import { APIFC } from "generic-view/utils"
 import { IncomingFeatureInfoConfig } from "generic-view/models"
-import { H4 } from "../texts/headers"
+import { Typography } from "../typography"
-import { P2 } from "../texts/paragraphs"
 import { Icon } from "../icon/icon"
 
 const dataTestId = {
@@ -29,13 +28,13 @@ export const IncomingFeatureInfo: APIFC<
     <Wrapper {...props} data-testid={dataTestId.wrapper}>
       <IconWrapper config={{ type: config.icon }} />
       <TextWrapper>
-        <H4 data-testid={`${dataTestId.header}-${dataTestIdSuffix}`}>
+        <Typography.H4 data-testid={`${dataTestId.header}-${dataTestIdSuffix}`}>
           {config.header}
-        </H4>
+        </Typography.H4>
-        <P2 data-testid={`${dataTestId.text}-${dataTestIdSuffix}`}>
+        <Typography.P2 data-testid={`${dataTestId.text}-${dataTestIdSuffix}`}>
           {" "}
           {config.text}
-        </P2>
+        </Typography.P2>
       </TextWrapper>
     </Wrapper>
   )

libs/generic-view/ui/src/lib/segment-bar/segment-bar-item.tsx

@@ -7,7 +7,7 @@ import React from "react"
 import styled from "styled-components"
 import { BaseGenericComponent } from "generic-view/utils"
 import { Tooltip } from "../interactive/tooltip/tooltip"
-import { P5 } from "../texts/paragraphs"
+import { Typography } from "../typography"
 import { ComputedSegmentBarItem } from "./compute-segment-bar-items.helper"
 
 interface SegmentBarItemProps extends ComputedSegmentBarItem {
@@ -34,7 +34,7 @@ export const SegmentBarItem: BaseGenericComponent<
     {...props}
   >
     <Tooltip.Content>
-      <P5 $color={"grey1"}>{label}</P5>
+      <Typography.P5 config={{ color: "grey1" }}>{label}</Typography.P5>
     </Tooltip.Content>
     <Tooltip.Anchor />
   </TooltipStyled>

libs/generic-view/ui/src/lib/shared/warrning-box.tsx

@@ -12,7 +12,7 @@ import Icon, {
   IconSize,
 } from "Core/__deprecated__/renderer/components/core/icon/icon.component"
 import { IconType } from "Core/__deprecated__/renderer/components/core/icon/icon-type"
-import { H4 } from "../texts/headers"
+import { Typography } from "../typography"
 
 const Wrapper = styled.div`
   display: block;
@@ -59,7 +59,7 @@ export const WarrningBox: FunctionComponent<WarningBoxProps> = ({
         <Icon type={IconType.Exclamation} size={IconSize.ExtraLarge} />
       </Top>
       <Header>
-        <H4>{intl.formatMessage(messages.header)}</H4>
+        <Typography.H4>{intl.formatMessage(messages.header)}</Typography.H4>
       </Header>
       <Content>{children}</Content>
     </Wrapper>

libs/generic-view/ui/src/lib/table/table-cell.tsx

@@ -11,7 +11,7 @@ import { TableTestIds } from "e2e-test-ids"
 
 export const TableCell: APIFC<undefined, TableCellConfig> = ({
   children,
-  config,
+  config = {},
   data,
   ...props
 }) => {

libs/generic-view/ui/src/lib/texts/common-text-styles.ts

@@ -1,39 +0,0 @@
-/**
- * Copyright (c) Mudita sp. z o.o. All rights reserved.
- * For licensing, see https://github.com/mudita/mudita-center/blob/master/LICENSE.md
- */
-
-import { css } from "styled-components"
-import { CommonTextValidators } from "generic-view/models"
-
-export interface CommonTextProps {
-  $singleLine?: NonNullable<CommonTextValidators["singleLine"]>
-  $textTransform?: NonNullable<CommonTextValidators["textTransform"]>
-  $color?: NonNullable<CommonTextValidators["color"]>
-  $textAlign?: NonNullable<CommonTextValidators["textAlign"]>
-}
-
-export const commonTextStyles = css<CommonTextProps>`
-  ${({ $singleLine }) =>
-    $singleLine &&
-    css`
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    `}
-
-  text-transform: ${({ $textTransform = "unset" }) =>
-    $textTransform === "capitalize-first-letter"
-      ? "lowercase"
-      : $textTransform};
-
-  ${({ $textTransform }) =>
-    $textTransform === "capitalize-first-letter" &&
-    css`
-      &:first-letter {
-        text-transform: uppercase;
-      }
-    `}
-
-  text-align: ${({ $textAlign = "unset" }) => $textAlign};
-`

libs/generic-view/ui/src/lib/texts/headers.tsx

@@ -1,114 +0,0 @@
-/**
- * Copyright (c) Mudita sp. z o.o. All rights reserved.
- * For licensing, see https://github.com/mudita/mudita-center/blob/master/LICENSE.md
- */
-
-import React from "react"
-import { isEmpty } from "lodash"
-import styled, { css } from "styled-components"
-import { TypographyTestIds } from "e2e-test-ids"
-import { APIFC } from "generic-view/utils"
-import { HeaderConfig, UnboldValidator } from "generic-view/models"
-import { CommonTextProps, commonTextStyles } from "./common-text-styles"
-
-interface HeaderProps extends CommonTextProps {
-  $unbold?: NonNullable<UnboldValidator["unbold"]>
-}
-
-const commonStyle = css<HeaderProps>`
-  ${commonTextStyles};
-  color: ${({ theme, $color = "black" }) => theme.color[$color]};
-
-  ${({ $unbold }) =>
-    $unbold &&
-    css`
-      font-weight: ${({ theme }) => theme.fontWeight.regular};
-
-      b,
-      strong {
-        font-weight: ${({ theme }) => theme.fontWeight.bold};
-      }
-    `}
-`
-
-export const Header3: APIFC<undefined, HeaderConfig> = ({
-  config,
-  children,
-  ...props
-}) => {
-  return (
-    <H3
-      data-testid={TypographyTestIds.H3}
-      $unbold={config?.unbold}
-      $singleLine={config?.singleLine}
-      $color={config?.color}
-      $textTransform={config?.textTransform}
-      {...props}
-    >
-      {isEmpty(children) ? config?.text : children}
-    </H3>
-  )
-}
-
-export const H3 = styled.h3<HeaderProps>`
-  font-size: ${({ theme }) => theme.fontSize.headline3};
-  line-height: ${({ theme }) => theme.lineHeight.headline3};
-  font-weight: ${({ theme }) => theme.fontWeight.bold};
-  margin: 0;
-  ${commonStyle};
-`
-
-export const Header4: APIFC<undefined, HeaderConfig> = ({
-  config,
-  children,
-  ...props
-}) => {
-  return (
-    <H4
-      data-testid={TypographyTestIds.H4}
-      $unbold={config?.unbold}
-      $singleLine={config?.singleLine}
-      $color={config?.color}
-      $textTransform={config?.textTransform}
-      {...props}
-    >
-      {isEmpty(children) ? config?.text : children}
-    </H4>
-  )
-}
-
-export const H4 = styled.h4<HeaderProps>`
-  font-size: ${({ theme }) => theme.fontSize.headline4};
-  line-height: ${({ theme }) => theme.lineHeight.headline4};
-  letter-spacing: 0.02em;
-  margin: 0;
-  ${commonStyle};
-`
-
-export const Header5: APIFC<undefined, HeaderConfig> = ({
-  config,
-  children,
-  ...props
-}) => {
-  return (
-    <H5
-      data-testid={TypographyTestIds.H5}
-      $unbold={config?.unbold}
-      $singleLine={config?.singleLine}
-      $color={config?.color}
-      $textTransform={config?.textTransform}
-      {...props}
-    >
-      {isEmpty(children) ? config?.text : children}
-    </H5>
-  )
-}
-
-export const H5 = styled.h5<HeaderProps>`
-  font-size: ${({ theme }) => theme.fontSize.headline5};
-  line-height: ${({ theme }) => theme.lineHeight.headline5};
-  letter-spacing: 0.04em;
-  font-weight: ${({ theme }) => theme.fontWeight.bold};
-  margin: 0;
-  ${commonStyle};
-`

libs/generic-view/ui/src/lib/texts/index.ts

@@ -3,35 +3,9 @@
  * For licensing, see https://github.com/mudita/mudita-center/blob/master/LICENSE.md
  */
 
-import { Header3, Header4, Header5 } from "./headers"
+import { highlightText } from "generic-view/models"
-import {
-  Paragraph1,
-  Paragraph2,
-  Paragraph3,
-  Paragraph4,
-  Paragraph5,
-} from "./paragraphs"
-import {
-  h3Component,
-  h4Component,
-  h5Component,
-  highlightText,
-  p1Component,
-  p2Component,
-  p3Component,
-  p4Component,
-  p5Component,
-} from "generic-view/models"
 import { HighlightText } from "./highlight-text"
 
 export const texts = {
-  [h3Component.key]: Header3,
-  [h4Component.key]: Header4,
-  [h5Component.key]: Header5,
-  [p1Component.key]: Paragraph1,
-  [p2Component.key]: Paragraph2,
-  [p3Component.key]: Paragraph3,
-  [p4Component.key]: Paragraph4,
-  [p5Component.key]: Paragraph5,
   [highlightText.key]: HighlightText,
 }

libs/generic-view/ui/src/lib/texts/paragraphs.tsx

@@ -1,231 +0,0 @@
-/**
- * Copyright (c) Mudita sp. z o.o. All rights reserved.
- * For licensing, see https://github.com/mudita/mudita-center/blob/master/LICENSE.md
- */
-
-import React from "react"
-import { APIFC } from "generic-view/utils"
-import styled, { css } from "styled-components"
-import { isEmpty } from "lodash"
-import { ParagraphConfig, ParagraphData } from "generic-view/models"
-import { Content } from "../data-rows/text-formatted"
-import { CommonTextProps, commonTextStyles } from "./common-text-styles"
-import { applyTextTransform } from "./apply-text-transform"
-import { TypographyTestIds } from "e2e-test-ids"
-
-type ParagraphsProps = CommonTextProps
-
-const commonStyles = css<ParagraphsProps>`
-  white-space: pre-wrap;
-  margin: 0;
-  color: ${({ theme, $color = "grey2" }) => theme.color[$color]};
-  ${commonTextStyles};
-`
-
-export const Paragraph1: APIFC<ParagraphData, ParagraphConfig> = ({
-  config,
-  data,
-  children,
-  ...props
-}) => {
-  const text = data?.text ?? config?.text
-
-  const transformedText = applyTextTransform(
-    text,
-    config?.textTransform,
-    config?.textTransformOptions
-  )
-
-  return (
-    <P1
-      data-testid={TypographyTestIds.P1}
-      $color={config?.color}
-      $textTransform={config?.textTransform}
-      $singleLine={config?.singleLine}
-      $textAlign={config?.textAlign}
-      {...props}
-    >
-      {isEmpty(children) ? transformedText : children}
-    </P1>
-  )
-}
-
-export const P1 = styled.p<ParagraphsProps>`
-  &,
-  ${Content} p {
-    font-size: ${({ theme }) => theme.fontSize.paragraph1};
-    line-height: ${({ theme }) => theme.lineHeight.paragraph1};
-    letter-spacing: 0.02em;
-    font-weight: ${({ theme }) => theme.fontWeight.regular};
-
-    b,
-    strong {
-      font-weight: ${({ theme }) => theme.fontWeight.bold};
-    }
-    ${commonStyles};
-  }
-`
-
-export const Paragraph2: APIFC<ParagraphData, ParagraphConfig> = ({
-  config,
-  data,
-  children,
-  ...props
-}) => {
-  const text = data?.text ?? config?.text
-
-  const transformedText = applyTextTransform(
-    text,
-    config?.textTransform,
-    config?.textTransformOptions
-  )
-
-  return (
-    <P2
-      data-testid={TypographyTestIds.P2}
-      $color={config?.color}
-      $textTransform={config?.textTransform}
-      $singleLine={config?.singleLine}
-      $textAlign={config?.textAlign}
-      {...props}
-    >
-      {isEmpty(children) ? transformedText : children}
-    </P2>
-  )
-}
-
-export const P2 = styled.p<ParagraphsProps>`
-  font-size: ${({ theme }) => theme.fontSize.paragraph2};
-  line-height: ${({ theme }) => theme.lineHeight.paragraph2};
-  letter-spacing: 0.02em;
-  font-weight: ${({ theme }) => theme.fontWeight.light};
-
-  b,
-  strong {
-    font-weight: ${({ theme }) => theme.fontWeight.regular};
-  }
-  ${commonStyles};
-`
-
-export const Paragraph3: APIFC<ParagraphData, ParagraphConfig> = ({
-  config,
-  data,
-  children,
-  ...props
-}) => {
-  const text = data?.text ?? config?.text
-
-  const transformedText = applyTextTransform(
-    text,
-    config?.textTransform,
-    config?.textTransformOptions
-  )
-
-  return (
-    <P3
-      data-testid={TypographyTestIds.P3}
-      $color={config?.color}
-      $textTransform={config?.textTransform}
-      $singleLine={config?.singleLine}
-      $textAlign={config?.textAlign}
-      {...props}
-    >
-      {isEmpty(children) ? transformedText : children}
-    </P3>
-  )
-}
-
-export const P3 = styled.p<ParagraphsProps>`
-  font-size: ${({ theme }) => theme.fontSize.paragraph3};
-  line-height: ${({ theme }) => theme.lineHeight.paragraph3};
-  letter-spacing: 0.05em;
-  font-weight: ${({ theme }) => theme.fontWeight.regular};
-
-  b,
-  strong {
-    font-weight: ${({ theme }) => theme.fontWeight.bold};
-  }
-  ${commonStyles};
-`
-
-export const Paragraph4: APIFC<ParagraphData, ParagraphConfig> = ({
-  config,
-  data,
-  children,
-  ...props
-}) => {
-  const text = data?.text ?? config?.text
-
-  const transformedText = applyTextTransform(
-    text,
-    config?.textTransform,
-    config?.textTransformOptions
-  )
-
-  return (
-    <P4
-      data-testid={TypographyTestIds.P4}
-      $color={config?.color}
-      $textTransform={config?.textTransform}
-      $singleLine={config?.singleLine}
-      $textAlign={config?.textAlign}
-      {...props}
-    >
-      {isEmpty(children) ? transformedText : children}
-    </P4>
-  )
-}
-
-export const P4 = styled.p<ParagraphsProps>`
-  font-size: ${({ theme }) => theme.fontSize.paragraph4};
-  line-height: ${({ theme }) => theme.lineHeight.paragraph4};
-  font-weight: ${({ theme }) => theme.fontWeight.light};
-  letter-spacing: 0.02em;
-
-  b,
-  strong {
-    font-weight: ${({ theme }) => theme.fontWeight.bold};
-  }
-  ${commonStyles};
-`
-
-export const Paragraph5: APIFC<ParagraphData, ParagraphConfig> = ({
-  config,
-  data,
-  children,
-  ...props
-}) => {
-  const text = data?.text ?? config?.text
-
-  const transformedText = applyTextTransform(
-    text,
-    config?.textTransform,
-    config?.textTransformOptions
-  )
-
-  return (
-    <P5
-      data-testid={TypographyTestIds.P5}
-      $color={config?.color}
-      $textTransform={config?.textTransform}
-      $singleLine={config?.singleLine}
-      $textAlign={config?.textAlign}
-      {...props}
-    >
-      {isEmpty(children) ? transformedText : children}
-    </P5>
-  )
-}
-
-export const P5 = styled.p<ParagraphsProps>`
-  ${commonStyles};
-  font-size: ${({ theme }) => theme.fontSize.paragraph5};
-  line-height: ${({ theme }) => theme.lineHeight.paragraph5};
-  letter-spacing: 0.04em;
-  font-weight: ${({ theme }) => theme.fontWeight.regular};
-
-  b,
-  strong {
-    font-weight: ${({ theme }) => theme.fontWeight.bold};
-  }
-`

libs/generic-view/ui/src/lib/typography/index.ts

@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) Mudita sp. z o.o. All rights reserved.
+ * For licensing, see https://github.com/mudita/mudita-center/blob/master/LICENSE.md
+ */
+
+import { Typography } from "./typography"
+
+export * from "./typography"
+
+export const typography = {
+  "typography.h3": Typography.H3,
+  "typography.h4": Typography.H4,
+  "typography.h5": Typography.H5,
+  "typography.p1": Typography.P1,
+  "typography.p2": Typography.P2,
+  "typography.p3": Typography.P3,
+  "typography.p4": Typography.P4,
+  "typography.p5": Typography.P5,
+}

libs/generic-view/ui/src/lib/typography/typography-content.tsx

@@ -0,0 +1,38 @@
+/**
+ * Copyright (c) Mudita sp. z o.o. All rights reserved.
+ * For licensing, see https://github.com/mudita/mudita-center/blob/master/LICENSE.md
+ */
+
+import React from "react"
+import { isEmpty } from "lodash"
+import { APIFC } from "generic-view/utils"
+import {
+  isValidFormatMessageConfig,
+  isValidFormatMessageData,
+  TypographyConfig,
+  TypographyData,
+} from "generic-view/models"
+import { applyTextTransform } from "./apply-text-transform"
+import { FormatMessage } from "../interactive/format-message"
+
+export const TypographyContent: APIFC<TypographyData, TypographyConfig> = ({
+  config,
+  data,
+  children,
+}) => {
+  if (!isEmpty(children)) {
+    return children
+  }
+
+  if (isValidFormatMessageConfig(config) && isValidFormatMessageData(data)) {
+    return <FormatMessage config={config} data={data} />
+  }
+
+  const text = data?.text ?? config?.text
+
+  return applyTextTransform(
+    text,
+    config?.textTransform,
+    config?.textTransformOptions
+  )
+}

libs/generic-view/ui/src/lib/typography/typography.config.tsx

@@ -0,0 +1,109 @@
+/**
+ * Copyright (c) Mudita sp. z o.o. All rights reserved.
+ * For licensing, see https://github.com/mudita/mudita-center/blob/master/LICENSE.md
+ */
+
+import React from "react"
+import { TypographyTestIds } from "e2e-test-ids"
+import { TypographyKey } from "generic-view/models"
+import { Theme } from "generic-view/theme"
+import { ThemeProps } from "styled-components"
+
+interface BaseTypographyConfig {
+  as: React.ElementType
+  ["data-testid"]: string
+}
+
+export interface TypographyStyle {
+  letterSpacing: string
+  defaultColor: string
+  fontSize: (theme: ThemeProps<Theme>) => string
+  fontHeight: (theme: ThemeProps<Theme>) => string
+  fontWeight?: (theme: ThemeProps<Theme>) => string
+  strongFontWeight?: (theme: ThemeProps<Theme>) => string
+}
+
+interface TypographyConfig extends TypographyStyle, BaseTypographyConfig {}
+
+type TypographyConfigMap = {
+  [key in TypographyKey]: TypographyConfig
+}
+
+export const typographyConfig: TypographyConfigMap = {
+  "typography.h3": {
+    as: "h3",
+    ["data-testid"]: TypographyTestIds.H3,
+    letterSpacing: "0.02em",
+    defaultColor: "black",
+    fontSize: ({ theme }) => theme.fontSize.headline3,
+    fontHeight: ({ theme }) => theme.lineHeight.headline3,
+    fontWeight: ({ theme }) => `${theme.fontWeight.bold}`,
+  },
+  "typography.h4": {
+    as: "h4",
+    ["data-testid"]: TypographyTestIds.H4,
+    letterSpacing: "0.02em",
+    defaultColor: "black",
+    fontSize: ({ theme }) => theme.fontSize.headline4,
+    fontHeight: ({ theme }) => theme.lineHeight.headline4,
+  },
+  "typography.h5": {
+    as: "h5",
+    ["data-testid"]: TypographyTestIds.H5,
+    letterSpacing: "0.04em",
+    defaultColor: "black",
+    fontSize: ({ theme }) => theme.fontSize.headline5,
+    fontHeight: ({ theme }) => theme.lineHeight.headline5,
+    fontWeight: ({ theme }) => `${theme.fontWeight.bold}`,
+  },
+  "typography.p1": {
+    as: "p",
+    ["data-testid"]: TypographyTestIds.P1,
+    letterSpacing: "0.02em",
+    defaultColor: "grey2",
+    fontSize: ({ theme }) => theme.fontSize.paragraph1,
+    fontHeight: ({ theme }) => theme.lineHeight.paragraph1,
+    fontWeight: ({ theme }) => `${theme.fontWeight.regular}`,
+    strongFontWeight: ({ theme }) => `${theme.fontWeight.bold}`,
+  },
+  "typography.p2": {
+    as: "p",
+    ["data-testid"]: TypographyTestIds.P2,
+    letterSpacing: "0.02em",
+    defaultColor: "grey2",
+    fontSize: ({ theme }) => theme.fontSize.paragraph2,
+    fontHeight: ({ theme }) => theme.lineHeight.paragraph2,
+    fontWeight: ({ theme }) => `${theme.fontWeight.light}`,
+    strongFontWeight: ({ theme }) => `${theme.fontWeight.regular}`,
+  },
+  "typography.p3": {
+    as: "p",
+    ["data-testid"]: TypographyTestIds.P3,
+    letterSpacing: "0.05em",
+    defaultColor: "grey2",
+    fontSize: ({ theme }) => theme.fontSize.paragraph3,
+    fontHeight: ({ theme }) => theme.lineHeight.paragraph3,
+    fontWeight: ({ theme }) => `${theme.fontWeight.regular}`,
+    strongFontWeight: ({ theme }) => `${theme.fontWeight.bold}`,
+  },
+  "typography.p4": {
+    as: "p",
+    ["data-testid"]: TypographyTestIds.P4,
+    letterSpacing: "0.02em",
+    defaultColor: "grey2",
+    fontSize: ({ theme }) => theme.fontSize.paragraph4,
+    fontHeight: ({ theme }) => theme.lineHeight.paragraph4,
+    fontWeight: ({ theme }) => `${theme.fontWeight.light}`,
+    strongFontWeight: ({ theme }) => `${theme.fontWeight.bold}`,
+  },
+  "typography.p5": {
+    as: "p",
+    ["data-testid"]: TypographyTestIds.P5,
+    letterSpacing: "0.04em",
+    defaultColor: "grey2",
+    fontSize: ({ theme }) => theme.fontSize.paragraph5,
+    fontHeight: ({ theme }) => theme.lineHeight.paragraph5,
+    fontWeight: ({ theme }) => `${theme.fontWeight.regular}`,
+    strongFontWeight: ({ theme }) => `${theme.fontWeight.bold}`,
+  },
+}

libs/generic-view/ui/src/lib/typography/typography.tsx

@@ -0,0 +1,150 @@
+/**
+ * Copyright (c) Mudita sp. z o.o. All rights reserved.
+ * For licensing, see https://github.com/mudita/mudita-center/blob/master/LICENSE.md
+ */
+
+import React from "react"
+import styled, { css } from "styled-components"
+import { APIFC } from "generic-view/utils"
+import {
+  CommonTextValidators,
+  TypographyConfig,
+  TypographyData,
+  TypographyKey,
+  UnboldValidator,
+} from "generic-view/models"
+import { Content } from "../data-rows/text-formatted"
+import { typographyConfig, TypographyStyle } from "./typography.config"
+import { TypographyContent } from "./typography-content"
+import { useOverflowTitle } from "./use-overflow-title"
+
+const BaseTypography: APIFC<TypographyData, TypographyConfig> = (props) => {
+  const { componentName, config, ...restProps } = props
+  const variant = componentName as TypographyKey
+  const staticTypographyConfig = typographyConfig[variant]
+  const { containerRef, title } = useOverflowTitle()
+
+  return (
+    <TypographyWrapper
+      ref={containerRef}
+      title={title}
+      $color={config?.color ?? staticTypographyConfig.defaultColor}
+      $textTransform={config?.textTransform}
+      $singleLine={config?.singleLine}
+      $textAlign={config?.textAlign}
+      {...staticTypographyConfig}
+      {...restProps}
+    >
+      <TypographyContent {...props} />
+    </TypographyWrapper>
+  )
+}
+
+interface TypographyWrapperStyledProps extends TypographyStyle {
+  as?: React.ElementType
+  $singleLine?: NonNullable<CommonTextValidators["singleLine"]>
+  $textTransform?: NonNullable<CommonTextValidators["textTransform"]>
+  $textAlign?: NonNullable<CommonTextValidators["textAlign"]>
+  $unbold?: NonNullable<UnboldValidator["unbold"]>
+  $color: NonNullable<CommonTextValidators["color"]>
+}
+
+const TypographyWrapper = styled.div<TypographyWrapperStyledProps>`
+  &,
+  ${Content} p {
+    margin: 0;
+    padding: 0;
+    white-space: pre-wrap;
+    color: ${({ theme, $color }) => theme.color[$color]};
+
+    font-size: ${({ fontSize, theme }) => fontSize({ theme })};
+    line-height: ${({ fontHeight, theme }) => fontHeight({ theme })};
+    font-weight: ${({ fontWeight, theme }) =>
+      fontWeight && fontWeight({ theme })};
+
+    b,
+    strong {
+      font-weight: ${({ strongFontWeight, theme }) =>
+        strongFontWeight && strongFontWeight({ theme })};
+    }
+
+    ${({ $singleLine }) =>
+      $singleLine &&
+      css`
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      `}
+
+    text-transform: ${({ $textTransform = "unset" }) =>
+      $textTransform === "capitalize-first-letter"
+        ? "lowercase"
+        : $textTransform};
+
+    ${({ $textTransform }) =>
+      $textTransform === "capitalize-first-letter" &&
+      css`
+        &:first-letter {
+          text-transform: uppercase;
+        }
+      `}
+
+    text-align: ${({ $textAlign = "unset" }) => $textAlign};
+
+    ${({ $unbold }) =>
+      $unbold &&
+      css`
+        font-weight: ${({ theme }) => theme.fontWeight.regular};
+
+        b,
+        strong {
+          font-weight: ${({ theme }) => theme.fontWeight.bold};
+        }
+      `}
+  }
+`
+
+export const Typography = BaseTypography as typeof BaseTypography & {
+  H3: typeof BaseTypography
+  H4: typeof BaseTypography
+  H5: typeof BaseTypography
+  P1: typeof BaseTypography
+  P2: typeof BaseTypography
+  P3: typeof BaseTypography
+  P4: typeof BaseTypography
+  P5: typeof BaseTypography
+}
+
+
+Typography.H3 = (props) => (
+  <BaseTypography {...props} componentName="typography.h3" />
+)
+
+Typography.H4 = (props) => (
+  <BaseTypography {...props} componentName="typography.h4" />
+)
+
+Typography.H5 = (props) => (
+  <BaseTypography {...props} componentName="typography.h5" />
+)
+
+Typography.P1 = (props) => (
+  <BaseTypography {...props} componentName="typography.p1" />
+)
+
+Typography.P2 = (props) => (
+  <BaseTypography {...props} componentName="typography.p2" />
+)
+
+Typography.P3 = (props) => (
+  <BaseTypography {...props} componentName="typography.p3" />
+)
+
+Typography.P4 = (props) => (
+  <BaseTypography {...props} componentName="typography.p4" />
+)
+
+Typography.P5 = (props) => (
+  <BaseTypography {...props} componentName="typography.p5" />
+)
+

libs/generic-view/ui/src/lib/typography/use-overflow-title.tsx

@@ -0,0 +1,47 @@
+/**
+ * Copyright (c) Mudita sp. z o.o. All rights reserved.
+ * For licensing, see https://github.com/mudita/mudita-center/blob/master/LICENSE.md
+ */
+
+import { useRef, useState, useEffect } from "react"
+
+export const useOverflowTitle = () => {
+  const containerRef = useRef<HTMLDivElement>(null)
+  const [title, setTitle] = useState<string | undefined>(undefined)
+
+  useEffect(() => {
+    let resizeTimeout: NodeJS.Timeout
+
+    const checkOverflow = () => {
+      if (containerRef.current) {
+        const isOverflowing =
+          containerRef.current.scrollWidth > containerRef.current.clientWidth
+        const text = containerRef.current.textContent
+
+        if (isOverflowing && text) {
+          setTitle(text)
+        } else {
+          setTitle(undefined)
+        }
+      }
+    }
+
+    const handleResize = () => {
+      clearTimeout(resizeTimeout)
+      resizeTimeout = setTimeout(() => {
+        checkOverflow()
+      }, 200)
+    }
+
+    checkOverflow()
+
+    window.addEventListener("resize", handleResize)
+
+    return () => {
+      window.removeEventListener("resize", handleResize)
+      clearTimeout(resizeTimeout)
+    }
+  }, [])
+
+  return { containerRef, title }
+}

libs/generic-view/utils/src/lib/models/api-fc.types.ts

@@ -17,9 +17,15 @@ type DefaultProps = Partial<
   componentRef?: Ref<any>
 }
 
-type ComponentConfigProp<T> = T extends undefined
+type HasRequired<T> = {
-  ? { config?: T }
+  [K in keyof T]-?: NonNullable<unknown> extends Pick<T, K> ? never : K
-  : { config: T }
+}[keyof T] extends never
+  ? false
+  : true
+
+type ComponentConfigProp<T> = HasRequired<T> extends true
+  ? { config: T }
+  : { config?: T }
 
 export type BaseGenericComponent<
   Data = undefined,

libs/help/ui/src/lib/components/article-content.tsx

@@ -16,7 +16,7 @@ import { URL_MAIN } from "Core/__deprecated__/renderer/constants/urls"
 import { ModalStateKey, showModal } from "Core/modals-manager"
 import { useDispatch, useSelector } from "react-redux"
 import { ButtonTextConfig } from "generic-view/models"
-import { ButtonText, P3 } from "generic-view/ui"
+import { ButtonText, Typography } from "generic-view/ui"
 import { ReduxRootState } from "Core/__deprecated__/renderer/store"
 import { selectCurrentArticle } from "help/store"
 import { useParams } from "react-router"
@@ -205,6 +205,6 @@ const Heading = styled.h2`
   margin: 0 0 1.4rem;
 `
 
-const Paragraph = styled(P3)`
+const Paragraph = styled(Typography.P3)`
   color: ${({ theme }) => theme.color.black};
 `

libs/help/ui/src/lib/components/article-feedback.tsx

@@ -6,7 +6,7 @@
 import React from "react"
 import { FunctionComponent } from "Core/core/types/function-component.interface"
 import styled from "styled-components"
-import { H5, Icon, P1, P3 } from "generic-view/ui"
+import { Icon, Typography } from "generic-view/ui"
 import { defineMessages } from "react-intl"
 import { intl } from "Core/__deprecated__/renderer/utils/intl"
 import { useDispatch, useSelector } from "react-redux"
@@ -48,9 +48,9 @@ export const ArticleFeedback: FunctionComponent = () => {
 
   return (
     <Wrapper data-testid={HelpTestId.ArticleFeedback}>
-      <H5 data-testid={HelpTestId.ArticleFeedbackTitle}>
+      <Typography.H5 data-testid={HelpTestId.ArticleFeedbackTitle}>
         {intl.formatMessage(messages.title)}
-      </H5>
+      </Typography.H5>
       <Content>
         {isRated ? (
           <>
@@ -65,13 +65,17 @@ export const ArticleFeedback: FunctionComponent = () => {
               onClick={givePositiveFeedback}
               data-testid={HelpTestId.ArticleFeedbackYesButton}
             >
-              <P1>{intl.formatMessage(messages.yesButtonLabel)}</P1>
+              <Typography.P1>
+                {intl.formatMessage(messages.yesButtonLabel)}
+              </Typography.P1>
             </FeedbackButton>
             <FeedbackButton
               onClick={giveNegativeFeedback}
               data-testid={HelpTestId.ArticleFeedbackNoButton}
             >
-              <P1>{intl.formatMessage(messages.noButtonLabel)}</P1>
+              <Typography.P1>
+                {intl.formatMessage(messages.noButtonLabel)}
+              </Typography.P1>
             </FeedbackButton>
           </>
         )}
@@ -131,6 +135,6 @@ const FeedbackButton = styled.button`
   }
 `
 
-const Thanks = styled(P3)`
+const Thanks = styled(Typography.P3)`
   color: ${({ theme }) => theme.color.grey1};
 `

libs/help/ui/src/lib/components/article-header.tsx

@@ -8,7 +8,7 @@ import { FunctionComponent } from "Core/core/types/function-component.interface"
 import styled from "styled-components"
 import { IconType } from "generic-view/utils"
 import { useHistory } from "react-router"
-import { ButtonText, H3 } from "generic-view/ui"
+import { ButtonText, Typography } from "generic-view/ui"
 import { HelpTestId } from "../test-ids"
 
 interface Props {
@@ -34,7 +34,9 @@ export const ArticleHeader: FunctionComponent<Props> = ({ title }) => {
           modifiers: ["uppercase"],
         }}
       />
-      <H3 data-testid={HelpTestId.ArticleTitle}>{title}</H3>
+      <Typography.H3 data-testid={HelpTestId.ArticleTitle}>
+        {title}
+      </Typography.H3>
     </Wrapper>
   )
 }

libs/help/ui/src/lib/components/article-warning.tsx

@@ -8,7 +8,7 @@ import { FunctionComponent } from "Core/core/types/function-component.interface"
 import styled from "styled-components"
 import { intl } from "Core/__deprecated__/renderer/utils/intl"
 import { defineMessages } from "react-intl"
-import { H4, P1 } from "generic-view/ui"
+import { Typography } from "generic-view/ui"
 import { useParams } from "react-router"
 import { useSelector } from "react-redux"
 import { ReduxRootState } from "Core/__deprecated__/renderer/store"
@@ -55,10 +55,10 @@ export const ArticleWarning: FunctionComponent = () => {
         />
       </svg>
       <Content>
-        <H4>{intl.formatMessage(messages.warning)}</H4>
+        <Typography.H4>{intl.formatMessage(messages.warning)}</Typography.H4>
-        <P1 data-testid={HelpTestId.ArticleWarning}>
+        <Typography.P1 data-testid={HelpTestId.ArticleWarning}>
           {article.warningMessage}
-        </P1>
+        </Typography.P1>
       </Content>
     </Wrapper>
   )

libs/help/ui/src/lib/components/help-footer.tsx

@@ -11,7 +11,7 @@ import { intl } from "Core/__deprecated__/renderer/utils/intl"
 import { ModalStateKey, showModal } from "Core/modals-manager"
 import { defineMessages } from "react-intl"
 import { IconType } from "generic-view/utils"
-import { ButtonText, H5 } from "generic-view/ui"
+import { ButtonText, Typography } from "generic-view/ui"
 import { HelpTestId } from "../test-ids"
 
 const messages = defineMessages({
@@ -33,9 +33,9 @@ export const HelpFooter: FunctionComponent = () => {
   }
   return (
     <Wrapper data-testid={HelpTestId.MainFooter}>
-      <H5 data-testid={HelpTestId.MainFooterTitle}>
+      <Typography.H5 data-testid={HelpTestId.MainFooterTitle}>
         {intl.formatMessage(messages.title)}
-      </H5>
+      </Typography.H5>
       <Text data-testid={HelpTestId.MainFooterDescription}>
         {intl.formatMessage(messages.description)}
       </Text>

libs/help/ui/src/lib/components/search-results.tsx

@@ -14,7 +14,7 @@ import { intl } from "Core/__deprecated__/renderer/utils/intl"
 import { NavLink } from "react-router-dom"
 import { useFormContext } from "react-hook-form"
 import { IconType } from "generic-view/utils"
-import { HighlightText, Icon, P3 } from "generic-view/ui"
+import { HighlightText, Icon, Typography } from "generic-view/ui"
 import { HelpTestId } from "../test-ids"
 import { cleanSearchPhrase } from "help/feature"
 
@@ -62,6 +62,7 @@ const SearchResultsFC: FunctionComponent<
                     data-testid={HelpTestId.SearchResultsItem}
                   >
                     <CategoryName>{category.name}/</CategoryName>
+                    {/*@ts-ignore*/}
                     <ArticleTitle>
                       <HighlightText
                         config={{
@@ -82,7 +83,9 @@ const SearchResultsFC: FunctionComponent<
       ) : (
         <EmptyResults>
           <Icon config={{ type: IconType.Search }} />
-          <P3>{intl.formatMessage(messages.noResults)}</P3>
+          <Typography.P3>
+            {intl.formatMessage(messages.noResults)}
+          </Typography.P3>
         </EmptyResults>
       )}
     </SearchResultsWrapper>
@@ -139,12 +142,12 @@ const ListItemLink = styled(NavLink)`
   }
 `
 
-const CategoryName = styled(P3)`
+const CategoryName = styled(Typography.P3)`
   color: ${({ theme }) => theme.color.grey2};
   white-space: nowrap;
 `
 
-const ArticleTitle = styled(P3)`
+const ArticleTitle = styled(Typography.P3)`
   color: ${({ theme }) => theme.color.black};
   overflow: hidden;
   text-overflow: ellipsis;
@@ -168,6 +171,7 @@ const EmptyResults = styled.div`
     height: 4.8rem;
     margin: 1rem;
   }
+
   svg * {
     fill: ${({ theme }) => theme.color.black};
   }

libs/help/ui/src/lib/components/search.tsx

@@ -16,7 +16,7 @@ import styled, { css } from "styled-components"
 import { useFormContext } from "react-hook-form"
 import { useHelpSearch } from "help/feature"
 import { SearchResults, SearchResultsWrapper } from "./search-results"
-import { H3, P3, SearchInput } from "generic-view/ui"
+import { SearchInput, Typography } from "generic-view/ui"
 import { useHistory } from "react-router"
 import { URL_MAIN } from "Core/__deprecated__/renderer/constants/urls"
 import { HelpTestId } from "../test-ids"
@@ -106,12 +106,12 @@ export const Search: FunctionComponent = () => {
 
   return (
     <Wrapper>
-      <H3 data-testid={HelpTestId.MainHeader}>
+      <Typography.H3 data-testid={HelpTestId.MainHeader}>
         {intl.formatMessage(messages.title)}
-      </H3>
+      </Typography.H3>
-      <P3 data-testid={HelpTestId.MainSubheader}>
+      <Typography.P3 data-testid={HelpTestId.MainSubheader}>
         {intl.formatMessage(messages.description)}
-      </P3>
+      </Typography.P3>
       <InputWrapper
         onKeyDown={handleKeyDown}
         dropdownActive={deferredSearchPhrase.length > 1}

libs/help/ui/src/lib/components/subcategory.tsx

@@ -10,7 +10,7 @@ import { ArticlesList } from "./articles-list"
 import { useSelector } from "react-redux"
 import { ReduxRootState } from "Core/__deprecated__/renderer/store"
 import { selectCurrentSubcategory, selectHelpAssets } from "help/store"
-import { H5 } from "generic-view/ui"
+import { Typography } from "generic-view/ui"
 import { HelpTestId } from "../test-ids"
 
 interface Props {
@@ -53,6 +53,8 @@ const Wrapper = styled.div`
   gap: 1.4rem;
 `
 
+const H5 = styled(Typography.H5)``
+
 const Title = styled(H5)`
   display: flex;
   flex-direction: row;

libs/msc-flash/msc-flash-harmony/src/lib/ui/recovery-mode.tsx

@@ -9,8 +9,7 @@ import styled, { ThemeProvider } from "styled-components"
 import { defineMessages } from "react-intl"
 import { intl, textFormatters } from "Core/__deprecated__/renderer/utils/intl"
 import { GenericThemeProvider } from "generic-view/theme"
-import { H3 } from "../../../../../generic-view/ui/src/lib/texts/headers"
+import { Typography } from "../../../../../generic-view/ui/src/lib/typography"
-import { P3 } from "../../../../../generic-view/ui/src/lib/texts/paragraphs"
 import { IconType } from "Core/__deprecated__/renderer/components/core/icon/icon-type"
 import Icon, {
   IconSize,
@@ -147,30 +146,40 @@ const RecoveryModeUI: FunctionComponent = () => {
       <Wrapper>
         <Header>
           <Icon type={IconType.RecoveryModeBlack} size={IconSize.ExtraLarge} />
-          <H3>{intl.formatMessage(messages.header)}</H3>
+          <Typography.H3>{intl.formatMessage(messages.header)}</Typography.H3>
-          <P3>{intl.formatMessage(messages.description)}</P3>
+          <Typography.P3>
+            {intl.formatMessage(messages.description)}
+          </Typography.P3>
         </Header>
         <WarrningBox>
           <Warning>
             <ul>
               <li>
-                <P3>{intl.formatMessage(messages.warning1, textFormatters)}</P3>
+                <Typography.P3>
+                  {intl.formatMessage(messages.warning1, textFormatters)}
+                </Typography.P3>
               </li>
               {process.platform === "linux" && (
                 <li>
-                  <P3>
+                  <Typography.P3>
                     {intl.formatMessage(messages.warningLinux, textFormatters)}
-                  </P3>
+                  </Typography.P3>
                 </li>
               )}
               <li>
-                <P3>{intl.formatMessage(messages.warning2)}</P3>
+                <Typography.P3>
+                  {intl.formatMessage(messages.warning2)}
+                </Typography.P3>
               </li>
               <li>
-                <P3>{intl.formatMessage(messages.warning3)}</P3>
+                <Typography.P3>
+                  {intl.formatMessage(messages.warning3)}
+                </Typography.P3>
               </li>
               <li>
-                <P3>{intl.formatMessage(messages.warning4)}</P3>
+                <Typography.P3>
+                  {intl.formatMessage(messages.warning4)}
+                </Typography.P3>
               </li>
             </ul>
             <Form>