mirror/mudita-center
1
0
Fork 0
mirror of https://github.com/mudita/mudita-center.git synced 2025-12-23 22:28:03 -05:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Daniel Karski
2025-01-10 10:41:41 +01:00
committed by GitHub
parent 66977831bc
commit 58572e551e
58 changed files with 774 additions and 730 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
__mocks__/e2e-test-ids.ts Normal file
View File

@@ -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",
}

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

@@ -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,

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

@@ -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 = {}

4
libs/e2e-mock/responses/src/lib/contacts-responses.ts
View File

@@ -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: {

19
libs/generic-view/models/src/index.ts
View File

@@ -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

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

@@ -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)

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

@@ -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
}

11
libs/generic-view/models/src/lib/paragraphs.ts
View File

@@ -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",

60
libs/generic-view/models/src/lib/typography.ts Normal file
View File

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

10
libs/generic-view/theme/src/lib/theme.ts
View File

@@ -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
}

5
libs/generic-view/ui/src/index.ts
View File

@@ -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,
}

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

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

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

@@ -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>
)

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

@@ -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",
childrenKeys: [`${id}ContactsDeletedToastMessage`],
},
[`${id}ContactsDeletedToastMessage`]: {
component: "format-message",
component: "typography.p1",
config: {
messageTemplate: singleContact
? "1 contact deleted"

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

@@ -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",
childrenKeys: ["selectedContactsCounterText"],
},
selectedContactsCounterText: {
component: "format-message",
component: "typography.p4",
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",
},
childrenKeys: ["contactCheckboxTooltipContentText"],
},
contactCheckboxTooltipContentText: {
component: "format-message",
config: {
messageTemplate: "Select",
text: "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",
},

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

@@ -51,11 +51,7 @@ export const generateDeleteFiles = (
},
},
[`${id}deleteModalContent`]: {
component: "p1-component",
childrenKeys: [`${id}deleteModalContentText`],
},
[`${id}deleteModalContentText`]: {
component: "format-message",
component: "typography.p1",
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",
childrenKeys: [`${id}filesDeletedToastMessage`],
},
[`${id}filesDeletedToastMessage`]: {
component: "format-message",
component: "typography.p1",
config: {
messageTemplate:
"{selectedItems} {selectedItems, plural, one {file} other {files}} deleted",

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

@@ -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}}",

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

@@ -193,11 +193,7 @@ const generateFileList = ({
],
},
[`${id}fileListPanelHeaderWrapper`]: {
component: "h3-component",
childrenKeys: [`${id}fileListPanelHeader`],
},
[`${id}fileListPanelHeader`]: {
component: "format-message",
component: "typography.h3",
config: {
messageTemplate: `${name} {totalEntities, plural, =0 {} other { (#)}}`,
},
@@ -280,11 +276,7 @@ const generateFileList = ({
},
},
[`${id}selectedItemsCounter`]: {
component: "p4-component",
childrenKeys: [`${id}selectedItemsCounterText`],
},
[`${id}selectedItemsCounterText`]: {
component: "format-message",
component: "typography.p4",
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",
},
childrenKeys: [`${id}contactCheckboxTooltipContentText`],
},
[`${id}contactCheckboxTooltipContentText`]: {
component: "format-message",
config: {
messageTemplate: "Select",
text: "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",

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

@@ -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 = (

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

@@ -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",
},

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

@@ -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",

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

@@ -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>

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

@@ -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 (

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

@@ -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>
)}
</>
)

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

@@ -5,8 +5,7 @@
import React, { FunctionComponent } from "react"
import styled, { css } from "styled-components"
import { H4, H5 } from "../../../texts/headers"
import { P3 } from "../../../texts/paragraphs"
import { Typography } from "../../../typography"
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>
<H5>{serialNumber}</H5>
<Typography.P3>
{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;

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

@@ -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 { P3 } from "../../../texts/paragraphs"
import { Typography } from "../../../typography"
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>
<P3>{intl.formatMessage(messages.serialNumber)}</P3>
<H5>{selectedDevice?.serialNumber}</H5>
<Typography.H4>{selectedDevice?.name}</Typography.H4>
<Typography.P3>
{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>
<P3>{intl.formatMessage(messages.serialNumber)}</P3>
<H5>{serialNumber}</H5>
<Typography.H4>{name}</Typography.H4>
<Typography.P3>
{intl.formatMessage(messages.serialNumber)}
</Typography.P3>
<Typography.H5>{serialNumber}</Typography.H5>
</Info>
<Check>{active && <CheckSvg />}</Check>
</ListItemCard>

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

@@ -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",

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

@@ -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] : []}

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

@@ -5,12 +5,7 @@
/* stylelint-disable no-duplicate-selectors */
import React, {
FunctionComponent,
useCallback,
useEffect,
useState,
} from "react"
import 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 {
GenericThemeProvider,
modalTransitionDuration,
} from "generic-view/theme"
import { 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;

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

@@ -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>
<P3>{intl.formatMessage(messages.step1)}</P3>
<Typography.P1>
{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>
<P3>{intl.formatMessage(messages.step2)}</P3>
<Typography.P1>
{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>
<P3>{intl.formatMessage(messages.step3)}</P3>
<Typography.P1>
{intl.formatMessage(messages.step, { number: 3 })}
</Typography.P1>
<Typography.P3>{intl.formatMessage(messages.step3)}</Typography.P3>
</Step>
</Steps>
</InstructionWrapper>

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

@@ -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) => {

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

@@ -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>

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

@@ -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 { P2 } from "../texts/paragraphs"
import { Typography } from "../typography"
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>
<P2 data-testid={`${dataTestId.text}-${dataTestIdSuffix}`}>
</Typography.H4>
<Typography.P2 data-testid={`${dataTestId.text}-${dataTestIdSuffix}`}>
{" "}
{config.text}
</P2>
</Typography.P2>
</TextWrapper>
</Wrapper>
)

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

@@ -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>

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

@@ -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>

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

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

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

@@ -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};
`

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

@@ -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};
`

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

@@ -3,35 +3,9 @@
* For licensing, see https://github.com/mudita/mudita-center/blob/master/LICENSE.md
*/
import { Header3, Header4, Header5 } from "./headers"
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 "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,
}

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

@@ -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};
}
`

0
libs/generic-view/ui/src/lib/texts/apply-text-transform.ts → libs/generic-view/ui/src/lib/typography/apply-text-transform.ts
View File

0
libs/generic-view/ui/src/lib/texts/format-bytes.test.ts → libs/generic-view/ui/src/lib/typography/format-bytes.test.ts
View File

0
libs/generic-view/ui/src/lib/texts/format-bytes.ts → libs/generic-view/ui/src/lib/typography/format-bytes.ts
View File

19
libs/generic-view/ui/src/lib/typography/index.ts Normal file
View File

@@ -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,
}

38
libs/generic-view/ui/src/lib/typography/typography-content.tsx Normal file
View File

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

109
libs/generic-view/ui/src/lib/typography/typography.config.tsx Normal file
View File

@@ -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}`,
},
}

150
libs/generic-view/ui/src/lib/typography/typography.tsx Normal file
View File

@@ -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" />
)

47
libs/generic-view/ui/src/lib/typography/use-overflow-title.tsx Normal file
View File

@@ -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 }
}

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

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

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

@@ -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};
`

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

@@ -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};
`

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

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

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

@@ -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>
<P1 data-testid={HelpTestId.ArticleWarning}>
<Typography.H4>{intl.formatMessage(messages.warning)}</Typography.H4>
<Typography.P1 data-testid={HelpTestId.ArticleWarning}>
{article.warningMessage}
</P1>
</Typography.P1>
</Content>
</Wrapper>
)

6
libs/help/ui/src/lib/components/help-footer.tsx
View File

@@ -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>

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

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

10
libs/help/ui/src/lib/components/search.tsx
View File

@@ -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>
<P3 data-testid={HelpTestId.MainSubheader}>
</Typography.H3>
<Typography.P3 data-testid={HelpTestId.MainSubheader}>
{intl.formatMessage(messages.description)}
</P3>
</Typography.P3>
<InputWrapper
onKeyDown={handleKeyDown}
dropdownActive={deferredSearchPhrase.length > 1}

4
libs/help/ui/src/lib/components/subcategory.tsx
View File

@@ -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;

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

@@ -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 { P3 } from "../../../../../generic-view/ui/src/lib/texts/paragraphs"
import { Typography } from "../../../../../generic-view/ui/src/lib/typography"
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>
<P3>{intl.formatMessage(messages.description)}</P3>
<Typography.H3>{intl.formatMessage(messages.header)}</Typography.H3>
<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>