diff --git a/example/src/components/AssetViewerBox.tsx b/example/src/components/AssetViewerBox.tsx index 1942fc01..62c2a026 100644 --- a/example/src/components/AssetViewerBox.tsx +++ b/example/src/components/AssetViewerBox.tsx @@ -1,4 +1,4 @@ -import { IOColors, LabelSmall, hexToRgba } from "@pagopa/io-app-design-system"; +import { IOColors, BodySmall, hexToRgba } from "@pagopa/io-app-design-system"; import React from "react"; import { ImageBackground, @@ -157,13 +157,13 @@ export const AssetViewerBox = ({ }} > {name && ( - {name} - + )} diff --git a/example/src/pages/Advice.tsx b/example/src/pages/Advice.tsx index 8ef3e7e6..6f939b51 100644 --- a/example/src/pages/Advice.tsx +++ b/example/src/pages/Advice.tsx @@ -55,7 +55,7 @@ const renderFeatureInfo = () => { }, { text: "Questa la seconda parte in grassetto. ", - weight: "Bold" + weight: "Semibold" }, { text: "Questa la terza parte che torna " diff --git a/example/src/pages/Colors.tsx b/example/src/pages/Colors.tsx index 339073ab..2f3c52e8 100644 --- a/example/src/pages/Colors.tsx +++ b/example/src/pages/Colors.tsx @@ -1,4 +1,5 @@ import { + BodySmall, H2, H3, IOColorGradients, @@ -12,7 +13,6 @@ import { IOThemeLight, IOVisualCostants, LabelMini, - LabelSmall, VSpacer, hexToRgba, themeStatusColorsDarkMode, @@ -336,9 +336,9 @@ const GradientBox = ({ name, colors }: GradientBoxProps) => { {last && {last}} {name && ( - + {name} - + )} ); diff --git a/example/src/pages/Layout.tsx b/example/src/pages/Layout.tsx index 9786dcca..67eee31a 100644 --- a/example/src/pages/Layout.tsx +++ b/example/src/pages/Layout.tsx @@ -10,7 +10,7 @@ import { IOSpacer, IOVisualCostants, LabelMini, - LabelSmall, + BodySmall, VSpacer, VStack, useIOTheme @@ -201,10 +201,10 @@ const VStackBlocks = () => { backgroundColor: IOColors[theme["appBackground-tertiary"]] }} > - {`Block n.${i + 1}`} + >{`Block n.${i + 1}`} ))} { backgroundColor: IOColors[theme["appBackground-tertiary"]] }} > - + Different height - + ); @@ -240,9 +240,9 @@ const HStackBlocks = () => { backgroundColor: IOColors[theme["appBackground-tertiary"]] }} > - {`${ + {`${ i + 1 - }`} + }`} ))} { backgroundColor: IOColors[theme["appBackground-tertiary"]] }} > - + Growing block - + ); diff --git a/example/src/pages/MainScreen.tsx b/example/src/pages/MainScreen.tsx index f455ec41..20e4a7a5 100644 --- a/example/src/pages/MainScreen.tsx +++ b/example/src/pages/MainScreen.tsx @@ -2,7 +2,7 @@ import { Divider, H1, IOStyles, - LabelSmall, + BodySmall, ListItemNav, ListItemSwitch, VSpacer, @@ -78,9 +78,9 @@ const MainScreen = (props: Props) => {

{title}

{description && ( - + {description} - + )} ); diff --git a/example/src/pages/NumberPad.tsx b/example/src/pages/NumberPad.tsx index e19db567..7b2b5671 100644 --- a/example/src/pages/NumberPad.tsx +++ b/example/src/pages/NumberPad.tsx @@ -1,4 +1,5 @@ import { + BodySmall, CodeInput, ContentWrapper, H1, @@ -6,7 +7,6 @@ import { IOColors, IOStyles, IOVisualCostants, - LabelSmall, ListItemSwitch, NumberPad, VSpacer, @@ -69,12 +69,12 @@ export const NumberPadScreen = () => {
{"Value Typed on the NumberPad component"}
- {value} - + {
Validation+Secret
- Correct OTP {`${OTP_COMPARE}`} + Correct OTP {`${OTP_COMPARE}`} diff --git a/example/src/pages/Selection.tsx b/example/src/pages/Selection.tsx index 99b7ae92..408f779b 100644 --- a/example/src/pages/Selection.tsx +++ b/example/src/pages/Selection.tsx @@ -1,5 +1,6 @@ import { AnimatedMessageCheckbox, + BodySmall, CheckboxLabel, Divider, H2, @@ -7,7 +8,6 @@ import { IOColors, IOStyles, IOVisualCostants, - LabelSmall, ListItemCheckbox, ListItemSwitch, NativeSwitch, @@ -179,13 +179,13 @@ const mockRadioItems = (): ReadonlyArray> => [ { value: "Let's try with JSX description", description: ( - + Ti contatteranno solo i servizi che hanno qualcosa di importante da dirti.{" "} Potrai sempre disattivare le comunicazioni che non ti interessano. - + ), id: "example-jsx-element" }, diff --git a/example/src/pages/Typography.tsx b/example/src/pages/Typography.tsx index 16795771..2e092f6a 100644 --- a/example/src/pages/Typography.tsx +++ b/example/src/pages/Typography.tsx @@ -3,7 +3,6 @@ import { BodyMonospace, ButtonText, Caption, - Chip, Divider, H1, H2, @@ -12,11 +11,11 @@ import { H5, H6, HSpacer, + HStack, Hero, IOColors, - Label, LabelMini, - LabelSmall, + BodySmall, MdH1, MdH2, MdH3, @@ -52,7 +51,6 @@ export const Typography = () => ( - Body @@ -64,16 +62,14 @@ export const Typography = () => ( massa, eget pharetra mauris posuere semper. Body Semibold - Body Bold Body asLink BodyMonoSpace - + - @@ -124,15 +120,14 @@ export const H2Row = () => ( ); export const H3Row = () => ( - +

Header H3

-

Header H3

-

Header H3

 - +

Header H3 Bold

+ ); export const H4Row = () => ( @@ -190,74 +185,64 @@ export const CaptionRow = () => ( ); -export const ChipRow = () => ( - - Chip - - Chip - - Chip - -); - -export const LabelSmallRow = () => ( +export const BodySmallRow = () => ( <> - Label small + Body small - Label small + Body small - Label small + Body small - Label small + Body small - - Label small asLink - + + Body small asLink + - Label small SB + Body small SB - - Label small SB - + + Body small SB + - - Label small SB - + + Body small SB + - - Label small SB - + + Body small SB + - - Label small SB asLink - + + Body small SB asLink + - Label small Regular + Body small Regular - - Label small Regular - + + Body small Regular + - - Label small Regular - + + Body small Regular + - - Label small Regular - + + Body small Regular + - - Label small Regular asLink - + + Body small Regular asLink + ); @@ -312,28 +297,6 @@ export const LabelMiniRow = () => ( ); -export const LabelRow = () => ( - - - - - - - - - - - -); - export const MdH1Row = () => ( {getTitle("Markdown H1")} diff --git a/src/components/alert/Alert.tsx b/src/components/alert/Alert.tsx index ce1cc837..590b7e0d 100644 --- a/src/components/alert/Alert.tsx +++ b/src/components/alert/Alert.tsx @@ -29,9 +29,8 @@ import { IOAlertSpacing } from "../../core/IOSpacing"; import { WithTestID } from "../../utils/types"; import { IOIconSizeScale, IOIcons, Icon } from "../icons"; import { VSpacer } from "../spacer"; -import { ButtonText } from "../typography"; +import { Body, ButtonText } from "../typography"; import { H4 } from "../typography/H4"; -import { Label } from "../typography/Label"; const iconSize: IOIconSizeScale = 24; @@ -197,14 +196,14 @@ export const Alert = React.forwardRef( )} - + {action && ( <> diff --git a/src/components/alert/AlertEdgeToEdge.tsx b/src/components/alert/AlertEdgeToEdge.tsx index fb2472f4..46030d4d 100644 --- a/src/components/alert/AlertEdgeToEdge.tsx +++ b/src/components/alert/AlertEdgeToEdge.tsx @@ -33,7 +33,7 @@ import { IOStyles } from "../../core/IOStyles"; import { makeFontStyleObject } from "../../utils/fonts"; import { WithTestID } from "../../utils/types"; import { IOIconSizeScale, IOIcons, Icon } from "../icons"; -import { Label } from "../typography/Label"; +import { Body } from "../typography"; const iconSize: IOIconSizeScale = 24; @@ -161,7 +161,7 @@ export const AlertEdgeToEdge = ({ /> - + ); diff --git a/src/components/banner/Banner.tsx b/src/components/banner/Banner.tsx index 6ed840d6..3616a459 100644 --- a/src/components/banner/Banner.tsx +++ b/src/components/banner/Banner.tsx @@ -33,7 +33,7 @@ import { PictogramBleed } from "../pictograms"; import { VSpacer } from "../spacer"; -import { H6, LabelSmall } from "../typography"; +import { H6, BodySmall } from "../typography"; /* Styles */ const colorTitle: IOColors = "blueIO-850"; @@ -157,7 +157,7 @@ export const Banner = ({ onClose, accessibilityHint, accessibilityLabel, - testID, + testID }: Banner) => { const isPressed: Animated.SharedValue = useSharedValue(0); @@ -197,7 +197,9 @@ export const Banner = ({ /* Generates a complete fallbackAccessibilityLabel by concatenating the title, content, and action if they are present. */ - const fallbackAccessibilityLabel = [title, content, action].filter(Boolean).join(" "); + const fallbackAccessibilityLabel = [title, content, action] + .filter(Boolean) + .join(" "); const renderMainBlock = () => ( <> @@ -219,9 +221,9 @@ export const Banner = ({ )} {content && ( <> - + {content} - + {action && } )} diff --git a/src/components/banner/__test__/__snapshots__/banner.test.tsx.snap b/src/components/banner/__test__/__snapshots__/banner.test.tsx.snap index 29a8420a..fd7e04c0 100644 --- a/src/components/banner/__test__/__snapshots__/banner.test.tsx.snap +++ b/src/components/banner/__test__/__snapshots__/banner.test.tsx.snap @@ -82,7 +82,7 @@ exports[`Test Banner Components - Experimental Enabled Banner Snapshot 1`] = ` { "color": "#031344", "fontFamily": "Titillio", - "fontSize": 18, + "fontSize": 16, "fontStyle": "normal", "fontWeight": "600", "lineHeight": 24, @@ -546,7 +546,7 @@ exports[`Test Banner Components Banner Snapshot 1`] = ` "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": undefined, }, { diff --git a/src/components/buttons/ButtonLink.tsx b/src/components/buttons/ButtonLink.tsx index fa6a8ef0..978b8e9d 100644 --- a/src/components/buttons/ButtonLink.tsx +++ b/src/components/buttons/ButtonLink.tsx @@ -238,7 +238,7 @@ export const ButtonLink = React.forwardRef( accessibilityElementsHidden importantForAccessibility="no-hide-descendants" font={isExperimental ? "Titillio" : "TitilliumSansPro"} - weight={isExperimental ? "Semibold" : "Bold"} + weight={"Semibold"} size={buttonTextFontSize} style={ disabled diff --git a/src/components/buttons/ButtonOutline.tsx b/src/components/buttons/ButtonOutline.tsx index b524a81e..e183430d 100644 --- a/src/components/buttons/ButtonOutline.tsx +++ b/src/components/buttons/ButtonOutline.tsx @@ -375,7 +375,7 @@ export const ButtonOutline = React.forwardRef( )} { if (typeof body === "string") { return ( - + {body} - + ); } @@ -75,7 +74,8 @@ export const FeatureInfo = ({ This verbose code could be deleted once we got "gap" property support */} {body && } - + )} diff --git a/src/components/layout/HeaderFirstLevel.tsx b/src/components/layout/HeaderFirstLevel.tsx index 1fddc332..3cba07d3 100644 --- a/src/components/layout/HeaderFirstLevel.tsx +++ b/src/components/layout/HeaderFirstLevel.tsx @@ -126,6 +126,7 @@ export const HeaderFirstLevel = ({

- + {description} - + )} diff --git a/src/components/listitems/ListItemInfo.tsx b/src/components/listitems/ListItemInfo.tsx index 17c47393..c460049a 100644 --- a/src/components/listitems/ListItemInfo.tsx +++ b/src/components/listitems/ListItemInfo.tsx @@ -12,7 +12,7 @@ import { ButtonLink, IconButton } from "../buttons"; import { LogoPaymentWithFallback } from "../common/LogoPaymentWithFallback"; import { IOIconSizeScale, IOIcons, Icon } from "../icons"; import { IOLogoPaymentType } from "../logos"; -import { H6, LabelSmall } from "../typography"; +import { H6, BodySmall } from "../typography"; type ButtonLinkActionProps = { type: "buttonLink"; @@ -84,9 +84,9 @@ export const ListItemInfo = ({ const itemInfoTextComponent = useMemo( () => ( - + {label} - + {typeof value === "string" ? (
{value} diff --git a/src/components/listitems/ListItemInfoCopy.tsx b/src/components/listitems/ListItemInfoCopy.tsx index 5191c497..3fff51f1 100644 --- a/src/components/listitems/ListItemInfoCopy.tsx +++ b/src/components/listitems/ListItemInfoCopy.tsx @@ -22,7 +22,7 @@ import { } from "../../core"; import { WithTestID } from "../../utils/types"; import { IOIcons, Icon } from "../icons"; -import { H6, LabelSmall } from "../typography"; +import { BodySmall, H6 } from "../typography"; export type ListItemInfoCopy = WithTestID<{ label: string; @@ -69,9 +69,9 @@ export const ListItemInfoCopy = ({ const listItemInfoCopyContent = ( <> - + {label} - + {/* Let developer using a custom component (e.g: skeleton) */} {typeof value === "string" ? (
diff --git a/src/components/listitems/ListItemNav.tsx b/src/components/listitems/ListItemNav.tsx index 879ffde7..a7ff7a3d 100644 --- a/src/components/listitems/ListItemNav.tsx +++ b/src/components/listitems/ListItemNav.tsx @@ -33,7 +33,7 @@ import { Badge } from "../badge"; import { IOIcons, Icon } from "../icons"; import { LoadingSpinner } from "../loadingSpinner"; import { HSpacer, VSpacer } from "../spacer"; -import { Caption, H6, LabelSmall } from "../typography"; +import { Caption, H6, BodySmall } from "../typography"; type ListItemTopElementProps = | { @@ -161,9 +161,9 @@ export const ListItemNav = ({ {description && ( <> {typeof description === "string" ? ( - + {description} - + ) : ( description )} diff --git a/src/components/listitems/ListItemNavAlert.tsx b/src/components/listitems/ListItemNavAlert.tsx index 2722d638..008d1864 100644 --- a/src/components/listitems/ListItemNavAlert.tsx +++ b/src/components/listitems/ListItemNavAlert.tsx @@ -22,7 +22,7 @@ import { } from "../../core"; import { WithTestID } from "../../utils/types"; import { Icon } from "../icons"; -import { H6, LabelSmall } from "../typography"; +import { H6, BodySmall } from "../typography"; export type ListItemNavAlert = WithTestID<{ value: string | React.ReactNode; @@ -82,9 +82,9 @@ export const ListItemNavAlert = ({ {description && ( <> {typeof description === "string" ? ( - + {description} - + ) : ( description )} diff --git a/src/components/listitems/ListItemRadio.tsx b/src/components/listitems/ListItemRadio.tsx index 6b7bbd7f..916bb957 100644 --- a/src/components/listitems/ListItemRadio.tsx +++ b/src/components/listitems/ListItemRadio.tsx @@ -27,7 +27,7 @@ import { IOIcons, Icon } from "../icons"; import { IOLogoPaymentType, LogoPayment } from "../logos"; import { AnimatedRadio } from "../radio/AnimatedRadio"; import { HSpacer, VSpacer } from "../spacer"; -import { H6, LabelSmall } from "../typography"; +import { H6, BodySmall } from "../typography"; type ListItemRadioGraphicProps = | { icon?: never; paymentLogo: IOLogoPaymentType; uri?: never } @@ -287,9 +287,9 @@ export const ListItemRadio = ({ - + {description} - + )} diff --git a/src/components/listitems/ListItemRadioWithAmount.tsx b/src/components/listitems/ListItemRadioWithAmount.tsx index 3f0a8b33..70a61025 100644 --- a/src/components/listitems/ListItemRadioWithAmount.tsx +++ b/src/components/listitems/ListItemRadioWithAmount.tsx @@ -5,7 +5,7 @@ import { IOColors, useIOTheme } from "../../core"; import { Icon } from "../icons"; import { AnimatedRadio } from "../radio/AnimatedRadio"; import { HSpacer, VSpacer } from "../spacer"; -import { H6, LabelSmall } from "../typography"; +import { H6, BodySmall } from "../typography"; import { PressableListItemBase } from "./PressableListItemsBase"; export type ListItemRadioWithAmountProps = { @@ -55,22 +55,22 @@ export const ListItemRadioWithAmount = ({ }} > - {label} - + {isSuggested && ( <> - + {suggestReason} - + )} diff --git a/src/components/listitems/ListItemSwitch.tsx b/src/components/listitems/ListItemSwitch.tsx index 46ad6f0b..7191041f 100644 --- a/src/components/listitems/ListItemSwitch.tsx +++ b/src/components/listitems/ListItemSwitch.tsx @@ -1,18 +1,18 @@ import React, { useMemo } from "react"; import { GestureResponderEvent, Platform, Switch, View } from "react-native"; -import { WithTestID } from "../../utils/types"; import { IOSelectionListItemStyles, IOSelectionListItemVisualParams, useIOTheme } from "../../core"; +import { WithTestID } from "../../utils/types"; import { Badge } from "../badge"; import { IOIcons, Icon } from "../icons"; import { LoadingSpinner } from "../loadingSpinner"; import { IOLogoPaymentType, LogoPayment } from "../logos"; import { HSpacer, VSpacer } from "../spacer"; import { NativeSwitch } from "../switch/NativeSwitch"; -import { H6, LabelMini, LabelSmall } from "../typography"; +import { BodySmall, H6, LabelMini } from "../typography"; type PartialProps = WithTestID<{ label: string; @@ -178,9 +178,9 @@ export const ListItemSwitch = React.memo( {description && ( <> - + {description} - + )} {action && ( diff --git a/src/components/listitems/ListItemTransaction.tsx b/src/components/listitems/ListItemTransaction.tsx index 3c1b9ac4..30a45c34 100644 --- a/src/components/listitems/ListItemTransaction.tsx +++ b/src/components/listitems/ListItemTransaction.tsx @@ -21,7 +21,7 @@ import { IOIconSizeScale, Icon } from "../icons"; import { IOLogoPaymentType } from "../logos"; import { VSpacer } from "../spacer"; import { HStack } from "../stack"; -import { H6, LabelSmall } from "../typography"; +import { H6, BodySmall } from "../typography"; import { PressableBaseProps, PressableListItemBase @@ -146,16 +146,16 @@ export const ListItemTransaction = ({ )} - {title} - - + + {subtitle} - + diff --git a/src/components/listitems/__test__/__snapshots__/listitem.test.tsx.snap b/src/components/listitems/__test__/__snapshots__/listitem.test.tsx.snap index b7143765..39780df4 100644 --- a/src/components/listitems/__test__/__snapshots__/listitem.test.tsx.snap +++ b/src/components/listitems/__test__/__snapshots__/listitem.test.tsx.snap @@ -262,7 +262,7 @@ exports[`Test List Item Components - Experimental Enabled ListItemInfo Snapshot { "color": "#0E0F13", "fontFamily": "Titillio", - "fontSize": 18, + "fontSize": 16, "fontStyle": "normal", "fontWeight": "600", "lineHeight": 24, @@ -384,7 +384,7 @@ exports[`Test List Item Components - Experimental Enabled ListItemInfoCopy Snap { "color": "#0B3EE3", "fontFamily": "Titillio", - "fontSize": 18, + "fontSize": 16, "fontStyle": "normal", "fontWeight": "600", "lineHeight": 24, @@ -551,7 +551,7 @@ exports[`Test List Item Components - Experimental Enabled ListItemNav Snapshot { "color": "#0E0F13", "fontFamily": "Titillio", - "fontSize": 18, + "fontSize": 16, "fontStyle": "normal", "fontWeight": "600", "lineHeight": 24, @@ -780,7 +780,7 @@ exports[`Test List Item Components - Experimental Enabled ListItemNavAlert Snap { "color": "#0E0F13", "fontFamily": "Titillio", - "fontSize": 18, + "fontSize": 16, "fontStyle": "normal", "fontWeight": "600", "lineHeight": 24, @@ -1082,7 +1082,7 @@ exports[`Test List Item Components - Experimental Enabled ListItemRadioWithAmou { "color": "#0B3EE3", "fontFamily": "Titillio", - "fontSize": 18, + "fontSize": 16, "fontStyle": "normal", "fontWeight": "600", "lineHeight": 24, @@ -1366,7 +1366,7 @@ exports[`Test List Item Components - Experimental Enabled ListItemRadioWithAmou { "color": "#0B3EE3", "fontFamily": "Titillio", - "fontSize": 18, + "fontSize": 16, "fontStyle": "normal", "fontWeight": "600", "lineHeight": 24, @@ -1774,7 +1774,7 @@ exports[`Test List Item Components ListItemAction Snapshot 1`] = ` "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": 20, }, ] diff --git a/src/components/modules/ModuleAttachment.tsx b/src/components/modules/ModuleAttachment.tsx index 4689aee6..1f807db0 100644 --- a/src/components/modules/ModuleAttachment.tsx +++ b/src/components/modules/ModuleAttachment.tsx @@ -7,7 +7,7 @@ import { Badge } from "../badge"; import { Icon } from "../icons"; import { LoadingSpinner } from "../loadingSpinner"; import { HStack, VStack } from "../stack"; -import { Label } from "../typography"; +import { Body } from "../typography"; import { ModuleStatic } from "./ModuleStatic"; import { PressableModuleBase } from "./PressableModuleBase"; @@ -66,13 +66,13 @@ const ModuleAttachmentContent = ({ space={4} style={{ alignItems: "flex-start", flexShrink: 1, flexGrow: 1 }} > - + diff --git a/src/components/modules/ModuleCheckout.tsx b/src/components/modules/ModuleCheckout.tsx index 6d74fcc0..f5a44247 100644 --- a/src/components/modules/ModuleCheckout.tsx +++ b/src/components/modules/ModuleCheckout.tsx @@ -15,7 +15,7 @@ import { import { ButtonLink } from "../buttons"; import { IOLogoPaymentType, LogoPayment } from "../logos"; import { HStack, VStack } from "../stack"; -import { H6, LabelSmall } from "../typography"; +import { H6, BodySmall } from "../typography"; import { ModuleStatic } from "./ModuleStatic"; import { PressableModuleBase } from "./PressableModuleBase"; @@ -70,9 +70,9 @@ export const ModuleCheckout = (props: ModuleCheckoutProps) => {
{title}
{subtitle && ( - + {subtitle} - + )} diff --git a/src/components/modules/ModuleCredential.tsx b/src/components/modules/ModuleCredential.tsx index e6634b48..d82bac4a 100644 --- a/src/components/modules/ModuleCredential.tsx +++ b/src/components/modules/ModuleCredential.tsx @@ -20,7 +20,7 @@ import { Badge } from "../badge"; import { IOIcons, Icon } from "../icons"; import { LoadingSpinner } from "../loadingSpinner"; import { HStack } from "../stack/Stack"; -import { LabelSmall } from "../typography"; +import { BodySmall } from "../typography"; import { ModuleStatic } from "./ModuleStatic"; import { PressableModuleBase, @@ -89,7 +89,7 @@ const ModuleCredential = (props: WithTestID) => { {/* Graphical assets */} {iconComponent ?? imageComponent} - ) => { style={{ flexShrink: 1 }} > {label} - + {badge ? ( diff --git a/src/components/modules/ModuleNavigation.tsx b/src/components/modules/ModuleNavigation.tsx index a4aa9b8f..7ca00651 100644 --- a/src/components/modules/ModuleNavigation.tsx +++ b/src/components/modules/ModuleNavigation.tsx @@ -18,7 +18,7 @@ import { WithTestID } from "../../utils/types"; import { Badge } from "../badge"; import { IOIcons, Icon } from "../icons"; import { HStack, VStack } from "../stack"; -import { Chip, LabelSmall } from "../typography"; +import { LabelMini, BodySmall } from "../typography"; import { ModuleStatic } from "./ModuleStatic"; import { PressableModuleBase, @@ -79,7 +79,7 @@ export const ModuleNavigation = (props: WithTestID) => { {iconComponent ?? imageComponent} - ) => { style={{ flexShrink: 1 }} > {title} - + {subtitle && ( - {subtitle} + + {subtitle} + )} diff --git a/src/components/modules/ModulePaymentNotice.tsx b/src/components/modules/ModulePaymentNotice.tsx index e0e5ca89..d12de6ad 100644 --- a/src/components/modules/ModulePaymentNotice.tsx +++ b/src/components/modules/ModulePaymentNotice.tsx @@ -6,7 +6,7 @@ import { WithTestID } from "../../utils/types"; import { Badge } from "../badge"; import { Icon } from "../icons"; import { HStack, VStack } from "../stack"; -import { H6, Label, LabelSmall } from "../typography"; +import { Body, H6, BodySmall } from "../typography"; import { ModuleStatic } from "./ModuleStatic"; import { PressableModuleBase } from "./PressableModuleBase"; @@ -93,22 +93,22 @@ const ModulePaymentNoticeContent = ({ {title && ( - {title} - + )} {subtitle && ( - + )} diff --git a/src/components/modules/ModuleSummary.tsx b/src/components/modules/ModuleSummary.tsx index d90ce983..2d18607b 100644 --- a/src/components/modules/ModuleSummary.tsx +++ b/src/components/modules/ModuleSummary.tsx @@ -2,7 +2,7 @@ import React from "react"; import { View } from "react-native"; import { useIOTheme } from "../../core"; import { IOIcons, Icon } from "../icons"; -import { H6, LabelSmall } from "../typography"; +import { H6, BodySmall } from "../typography"; import { PressableModuleBase, PressableModuleBaseProps @@ -28,9 +28,9 @@ export const ModuleSummary = ({
{label}
{description && ( - + {description} - + )} diff --git a/src/components/otpInput/BoxedInput.tsx b/src/components/otpInput/BoxedInput.tsx index 7405735e..cfe5dc73 100644 --- a/src/components/otpInput/BoxedInput.tsx +++ b/src/components/otpInput/BoxedInput.tsx @@ -2,7 +2,7 @@ import * as React from "react"; import { useMemo } from "react"; import { StyleSheet, View } from "react-native"; import { IOColors } from "../../core"; -import { BaseTypography, H6 } from "../typography"; +import { H6, IOText } from "../typography"; type Props = { status: "default" | "focus" | "error"; @@ -36,15 +36,16 @@ const styles = StyleSheet.create({ // FIXME Replace this component with H3 once the legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153 const SecretValue = () => ( - {"•"} - + ); export const BoxedInput = ({ status, value, secret }: Props) => { diff --git a/src/components/otpInput/OTPInput.tsx b/src/components/otpInput/OTPInput.tsx index 670c0b65..048ba788 100644 --- a/src/components/otpInput/OTPInput.tsx +++ b/src/components/otpInput/OTPInput.tsx @@ -1,11 +1,18 @@ import * as React from "react"; -import { AccessibilityInfo, NativeSyntheticEvent, Pressable, TextInput, TextInputKeyPressEventData, View } from "react-native"; +import { + AccessibilityInfo, + NativeSyntheticEvent, + Pressable, + TextInput, + TextInputKeyPressEventData, + View +} from "react-native"; import Animated from "react-native-reanimated"; import { IOStyles } from "../../core/IOStyles"; -import { LabelSmall } from "../typography"; import { triggerHaptic } from "../../functions"; -import { VSpacer } from "../spacer"; import { useErrorShakeAnimation } from "../../utils/hooks/useErrorShakeAnimation"; +import { VSpacer } from "../spacer"; +import { BodySmall } from "../typography"; import { BoxedInput } from "./BoxedInput"; type Props = { @@ -95,11 +102,15 @@ export const OTPInput = React.forwardRef( handleValidate(value); }; - const handleKeyPress = ({ nativeEvent }: NativeSyntheticEvent) => { + const handleKeyPress = ({ + nativeEvent + }: NativeSyntheticEvent) => { switch (nativeEvent.key) { - case 'Backspace': + case "Backspace": if (deleteButtonAccessibilityLabel && value.length > 0) { - AccessibilityInfo.announceForAccessibility(deleteButtonAccessibilityLabel); + AccessibilityInfo.announceForAccessibility( + deleteButtonAccessibilityLabel + ); } break; default: @@ -156,9 +167,13 @@ export const OTPInput = React.forwardRef( {hasError && errorMessage && ( - + {errorMessage} - + )} ); diff --git a/src/components/tabs/TabItem.tsx b/src/components/tabs/TabItem.tsx index c87e6aef..dff59baf 100644 --- a/src/components/tabs/TabItem.tsx +++ b/src/components/tabs/TabItem.tsx @@ -20,7 +20,7 @@ import { useSpringPressProgressValue } from "../../utils/hooks/useSpringPressPro import { WithTestID } from "../../utils/types"; import { IOIcons, Icon } from "../icons"; import { HSpacer } from "../spacer"; -import { LabelSmall } from "../typography"; +import { BodySmall } from "../typography"; type ColorMode = "light" | "dark"; @@ -257,9 +257,9 @@ const TabItem = ({ )} - + {label} - + ); diff --git a/src/components/textInput/TextInputBase.tsx b/src/components/textInput/TextInputBase.tsx index 19c73af3..b2616031 100644 --- a/src/components/textInput/TextInputBase.tsx +++ b/src/components/textInput/TextInputBase.tsx @@ -31,7 +31,7 @@ import { RNTextInputProps, getInputPropsByType } from "../../utils/textInput"; import { InputType, WithTestID } from "../../utils/types"; import { IOIconSizeScale, IOIcons, Icon } from "../icons"; import { HSpacer } from "../spacer"; -import { LabelSmall } from "../typography"; +import { BodySmall } from "../typography"; type InputStatus = "initial" | "focused" | "disabled" | "error"; @@ -186,15 +186,15 @@ const HelperRow = ({ } > {bottomMessage && ( - + {bottomMessage} - + )} {counterLimit && ( - {`${valueCount} / ${counterLimit}`} + >{`${valueCount} / ${counterLimit}`} )} ); diff --git a/src/components/toast/__tests__/__snapshots__/ToastNotification.test.tsx.snap b/src/components/toast/__tests__/__snapshots__/ToastNotification.test.tsx.snap index f1aab6d3..2e54a8f8 100644 --- a/src/components/toast/__tests__/__snapshots__/ToastNotification.test.tsx.snap +++ b/src/components/toast/__tests__/__snapshots__/ToastNotification.test.tsx.snap @@ -395,7 +395,7 @@ exports[`Test ToastNotification component should match snapshot for props ({ mes "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": 20, }, { @@ -511,7 +511,7 @@ exports[`Test ToastNotification component should match snapshot for props ({ mes "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": 20, }, { @@ -560,7 +560,7 @@ exports[`Test ToastNotification component should match snapshot for props ({ mes "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": 20, }, { @@ -609,7 +609,7 @@ exports[`Test ToastNotification component should match snapshot for props ({ mes "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": 20, }, { @@ -658,7 +658,7 @@ exports[`Test ToastNotification component should match snapshot for props ({ mes "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": 20, }, { @@ -707,7 +707,7 @@ exports[`Test ToastNotification component should match snapshot for props ({ mes "fontFamily": "Titillium Sans Pro", "fontSize": 16, "fontStyle": "normal", - "fontWeight": "700", + "fontWeight": "600", "lineHeight": 20, }, { diff --git a/src/components/typography/BaseTypography.tsx b/src/components/typography/BaseTypography.tsx deleted file mode 100644 index af895646..00000000 --- a/src/components/typography/BaseTypography.tsx +++ /dev/null @@ -1,71 +0,0 @@ -import React, { useMemo } from "react"; -import { Text, TextStyle, View } from "react-native"; -import { IOColors } from "../../core/IOColors"; -import { - IOFontFamily, - IOFontSize, - IOFontWeight, - makeFontStyleObject -} from "../../utils/fonts"; - -/** - * The specific properties needed to calculate the font style using {@link makeFontStyleObject} (these information - * cannot be included in the default StyleProp - */ -type BaseTypographyProps = { - weight: IOFontWeight; - color: IOColors; - font?: IOFontFamily; - isItalic?: boolean; -}; - -type OwnProps = BaseTypographyProps & { - fontStyle?: TextStyle; -} & React.ComponentPropsWithRef; - -/** - * Decorate the function {@link makeFontStyleObject} with the additional color calculation. - * @param color A value key from {@link IOColors}, transformed here in {@link ColorValue} - * @param args the args of the function {@link makeFontStyleObject} - */ -const calculateTextStyle = ( - color: IOColors, - ...args: Parameters -) => ({ - ...makeFontStyleObject(...args), - color: IOColors[color] -}); - -/** - * `BaseTypography` is the core Typography component used to render a text. - * It accepts all the default text style `StyleProp` in addition with {@link BaseTypographyProps} - * used to calculate at runtime the platform-dependent styles. - * This component shouldn't be used in the application but only to compose others `Typography elements`. - * @param props - * @deprecated Use {@link IOText} instead - * @constructor - */ -export const BaseTypography = React.forwardRef((props, ref) => { - const fontStyle = useMemo( - () => - calculateTextStyle( - props.color, - props.fontStyle?.fontSize as IOFontSize, - props.font, - props.fontStyle?.lineHeight, - props.weight, - props.isItalic ? "italic" : "normal" - ), - [props.color, props.fontStyle, props.font, props.weight, props.isItalic] - ); - - const style = props.style - ? [props.style, props.fontStyle, fontStyle] - : [props.fontStyle, fontStyle]; - - return ( - - {props.children} - - ); -}); diff --git a/src/components/typography/Body.tsx b/src/components/typography/Body.tsx index 1bf2e9f5..9e0b306a 100644 --- a/src/components/typography/Body.tsx +++ b/src/components/typography/Body.tsx @@ -10,7 +10,7 @@ import { } from "./IOText"; type BodyStyleProps = TypographicStyleProps & { - weight?: Extract; + weight?: Extract; } & TypographicStyleAsLinkProps; export const bodyFontSize = 16; diff --git a/src/components/typography/LabelSmall.tsx b/src/components/typography/BodySmall.tsx similarity index 70% rename from src/components/typography/LabelSmall.tsx rename to src/components/typography/BodySmall.tsx index 53900637..5277cdf2 100644 --- a/src/components/typography/LabelSmall.tsx +++ b/src/components/typography/BodySmall.tsx @@ -9,20 +9,17 @@ import { TypographicStyleProps } from "./IOText"; -type LabelSmallProps = TypographicStyleProps & { - weight?: Extract; +type BodySmallProps = TypographicStyleProps & { + weight?: Extract; } & TypographicStyleAsLinkProps; const fontName: IOFontFamily = "Titillio"; -const fontWeight: IOFontWeight = "Semibold"; - const legacyFontName: IOFontFamily = "TitilliumSansPro"; -const legacyFontWeight: IOFontWeight = "Semibold"; /** - * `LabelSmall` typographic style + * `BodySmall` typographic style */ -export const LabelSmall = forwardRef( +export const BodySmall = forwardRef( ( { weight: customWeight, color: customColor, asLink, ...props }, ref?: ForwardedRef @@ -34,15 +31,11 @@ export const LabelSmall = forwardRef( ? theme["interactiveElem-default"] : theme["textBody-tertiary"]; - const LabelSmallProps: IOTextProps = { + const BodySmallProps: IOTextProps = { ...props, dynamicTypeRamp: "footnote" /* iOS only */, font: isExperimental ? fontName : legacyFontName, - weight: customWeight - ? customWeight - : isExperimental - ? fontWeight - : legacyFontWeight, + weight: customWeight ?? "Regular", size: 14, lineHeight: 21, color: customColor ?? defaultColor, @@ -55,7 +48,7 @@ export const LabelSmall = forwardRef( }; return ( - + {props.children} ); diff --git a/src/components/typography/ButtonText.tsx b/src/components/typography/ButtonText.tsx index 729f5d7c..6aa4a101 100644 --- a/src/components/typography/ButtonText.tsx +++ b/src/components/typography/ButtonText.tsx @@ -2,7 +2,7 @@ import React, { ForwardedRef, forwardRef } from "react"; import { View } from "react-native"; import { useIOExperimentalDesign } from "../../core"; import { IOColors } from "../../core/IOColors"; -import { IOFontFamily, IOFontSize, IOFontWeight } from "../../utils/fonts"; +import { IOFontFamily, IOFontSize } from "../../utils/fonts"; import { IOText, IOTextProps, TypographicStyleProps } from "./IOText"; export const buttonTextFontSize: IOFontSize = 16; @@ -10,11 +10,9 @@ export const buttonTextFontSize: IOFontSize = 16; `AnimatedText` for color transition through Reanimated */ const defaultColor: IOColors = "white"; const fontName: IOFontFamily = "Titillio"; -const fontWeight: IOFontWeight = "Semibold"; // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153 const legacyFontName: IOFontFamily = "TitilliumSansPro"; -const legacyFontWeight: IOFontWeight = "Bold"; /** * `ButtonText` typographic style @@ -26,7 +24,7 @@ export const ButtonText = forwardRef( const ButtonTextProps: IOTextProps = { ...props, font: isExperimental ? fontName : legacyFontName, - weight: isExperimental ? fontWeight : legacyFontWeight, + weight: "Semibold", size: buttonTextFontSize, lineHeight: 20, color: customColor ?? defaultColor diff --git a/src/components/typography/Chip.tsx b/src/components/typography/Chip.tsx deleted file mode 100644 index 41a98573..00000000 --- a/src/components/typography/Chip.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import React, { ForwardedRef, forwardRef } from "react"; -import { View } from "react-native"; -import { useIOExperimentalDesign, useIOTheme } from "../../core"; -import { IOFontFamily } from "../../utils/fonts"; -import { IOText, IOTextProps, TypographicStyleProps } from "./IOText"; - -const fontName: IOFontFamily = "Titillio"; -// TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153 -const legacyFontName: IOFontFamily = "TitilliumSansPro"; -/** - * `Chip` typographic style - */ -export const Chip = forwardRef( - ({ color: customColor, ...props }, ref?: ForwardedRef) => { - const theme = useIOTheme(); - const { isExperimental } = useIOExperimentalDesign(); - - const ChipProps: IOTextProps = { - ...props, - dynamicTypeRamp: "caption2", // iOS only - font: isExperimental ? fontName : legacyFontName, - weight: "Regular", - size: 12, - color: customColor ?? theme["textBody-default"] - }; - - return ( - - {props.children} - - ); - } -); diff --git a/src/components/typography/Factory.tsx b/src/components/typography/Factory.tsx deleted file mode 100644 index 72231e1d..00000000 --- a/src/components/typography/Factory.tsx +++ /dev/null @@ -1,98 +0,0 @@ -import React, { useMemo } from "react"; -import { View } from "react-native"; -import { IOColors } from "../../core"; -import { IOFontWeight } from "../../utils/fonts"; -import { XOR } from "../../utils/types"; -import { BaseTypography } from "./BaseTypography"; -import { - calculateWeightColor, - RequiredTypographyProps, - TypographyProps -} from "./common"; - -/** - * Using the DefaultArgumentProps is possible to define a default fallback value for weight and color - * that will be used when the fields weight and color will be undefined. - */ -type DefaultArgumentProps = { - defaultWeight: WeightPropsType; - defaultColor: ColorsPropsType; -}; - -/** - * Using the DefaultFactoryProps is possible to define a custom factory to calculate the default value for - * weight and color, thus allowing to implement more sophisticated strategies. - */ -type DefaultFactoryProps = { - weightColorFactory: ( - weight?: WeightPropsType, - color?: ColorsPropsType - ) => RequiredTypographyProps; -}; - -/** - * Only one type of default props strategy is allowed - */ -type DefaultProps = XOR< - DefaultArgumentProps, - DefaultFactoryProps ->; - -/** - * The factory props will include: - * - One of the two DefaultProps - * - The props of {@link BaseTypographyProps} without weight and color - * - The default {@link TypographyProps} - */ -type FactoryProps = TypographyProps< - WeightPropsType, - ColorsPropsType -> & - DefaultProps & - Omit, "weight" | "color">; - -/** - * Calculate if the props is of type {@link DefaultFactoryProps} - * @param props - */ -function isDefaultFactoryProps( - props: - | DefaultFactoryProps - | DefaultArgumentProps -): props is DefaultFactoryProps { - return ( - (props as DefaultFactoryProps) - .weightColorFactory !== undefined - ); -} - -/** - * Build a {@link BaseTypography} component, calculating the default values for weight and color if undefined. - * The default values can be calculated specifying some fallback values using {@link DefaultArgumentProps} - * or with a factory function to define some custom behaviour using {@link DefaultFactoryProps} - * @param props - * @deprecated Use `IOText` instead. Or use the new typographic styles that use it. - */ -export function useTypographyFactory< - WeightPropsType extends IOFontWeight, - ColorsPropsType extends IOColors ->( - props: FactoryProps, - ref?: React.ForwardedRef -) { - // Use different strategy to calculate the default values, based on DefaultProps - const { weight, color } = useMemo( - () => - isDefaultFactoryProps(props) - ? props.weightColorFactory(props.weight, props.color) - : calculateWeightColor( - props.defaultWeight, - props.defaultColor, - props.weight, - props.color - ), - [props] - ); - - return ; -} diff --git a/src/components/typography/H3.tsx b/src/components/typography/H3.tsx index 2736bcba..1b7b6062 100644 --- a/src/components/typography/H3.tsx +++ b/src/components/typography/H3.tsx @@ -1,26 +1,29 @@ import React, { ForwardedRef, forwardRef } from "react"; import { View } from "react-native"; -import { IOTheme, useIOExperimentalDesign, useIOTheme } from "../../core"; +import { useIOExperimentalDesign, useIOTheme } from "../../core"; import { IOFontFamily, IOFontSize, IOFontWeight } from "../../utils/fonts"; import { IOText, IOTextProps, TypographicStyleProps } from "./IOText"; -const defaultColor: keyof IOTheme = "textHeading-default"; +type H3StyleProps = TypographicStyleProps & { + weight?: Extract; +}; /* Common typographic styles */ export const h3FontSize: IOFontSize = 22; export const h3LineHeight = 33; const fontName: IOFontFamily = "Titillio"; -const fontWeight: IOFontWeight = "Semibold"; // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153 const legacyFontName: IOFontFamily = "TitilliumSansPro"; -const legacyFontWeight: IOFontWeight = "Semibold"; /** * `H3` typographic style */ -export const H3 = forwardRef( - ({ color: customColor, ...props }, ref?: ForwardedRef) => { +export const H3 = forwardRef( + ( + { weight: customWeight, color: customColor, ...props }, + ref?: ForwardedRef + ) => { const theme = useIOTheme(); const { isExperimental } = useIOExperimentalDesign(); @@ -28,10 +31,10 @@ export const H3 = forwardRef( ...props, dynamicTypeRamp: "title2", // iOS only font: isExperimental ? fontName : legacyFontName, - weight: isExperimental ? fontWeight : legacyFontWeight, + weight: customWeight ?? "Semibold", size: h3FontSize, lineHeight: h3LineHeight, - color: customColor ?? theme[defaultColor] + color: customColor ?? theme["textHeading-default"] }; return ( diff --git a/src/components/typography/H6.tsx b/src/components/typography/H6.tsx index b63d736d..4bf32f64 100644 --- a/src/components/typography/H6.tsx +++ b/src/components/typography/H6.tsx @@ -1,19 +1,18 @@ import React, { ForwardedRef, forwardRef } from "react"; import { View } from "react-native"; import { IOTheme, useIOExperimentalDesign, useIOTheme } from "../../core"; -import { IOFontFamily, IOFontSize, IOFontWeight } from "../../utils/fonts"; +import { IOFontFamily, IOFontSize } from "../../utils/fonts"; import { IOText, IOTextProps, TypographicStyleProps } from "./IOText"; const defaultColor: keyof IOTheme = "textHeading-default"; -export const h6FontSize: IOFontSize = 18; +export const h6FontSize: IOFontSize = 16; export const h6LineHeight = 24; const fontName: IOFontFamily = "Titillio"; -const fontWeight: IOFontWeight = "Semibold"; // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153 +const legacyFontSize: IOFontSize = 18; const legacyFontName: IOFontFamily = "TitilliumSansPro"; -const legacyFontWeight: IOFontWeight = "Semibold"; /** * `H6` typographic style @@ -27,9 +26,9 @@ export const H6 = forwardRef( ...props, dynamicTypeRamp: "headline", // iOS only font: isExperimental ? fontName : legacyFontName, - size: h6FontSize, + size: isExperimental ? h6FontSize : legacyFontSize, lineHeight: h6LineHeight, - weight: isExperimental ? fontWeight : legacyFontWeight, + weight: "Semibold", color: customColor ?? theme[defaultColor] }; diff --git a/src/components/typography/Label.tsx b/src/components/typography/Label.tsx deleted file mode 100644 index 583aeeb5..00000000 --- a/src/components/typography/Label.tsx +++ /dev/null @@ -1,62 +0,0 @@ -import React, { ForwardedRef, forwardRef } from "react"; -import { View } from "react-native"; -import { useIOExperimentalDesign, useIOTheme } from "../../core"; -import { IOFontFamily, IOFontWeight } from "../../utils/fonts"; -import { - IOText, - IOTextProps, - TypographicStyleAsLinkProps, - TypographicStyleProps -} from "./IOText"; - -type LabelProps = TypographicStyleProps & { - weight?: Extract; -} & TypographicStyleAsLinkProps; - -const fontName: IOFontFamily = "Titillio"; -const fontWeight: IOFontWeight = "Semibold"; - -const legacyFontName: IOFontFamily = "TitilliumSansPro"; -const legacyFontWeight: IOFontWeight = "Semibold"; - -/** - * `LabelSmall` typographic style - */ -export const Label = forwardRef( - ( - { weight: customWeight, color: customColor, asLink, ...props }, - ref?: ForwardedRef - ) => { - const theme = useIOTheme(); - const { isExperimental } = useIOExperimentalDesign(); - - const defaultColor = asLink - ? theme["interactiveElem-default"] - : theme["textBody-tertiary"]; - - const LabelProps: IOTextProps = { - ...props, - font: isExperimental ? fontName : legacyFontName, - weight: customWeight - ? customWeight - : isExperimental - ? fontWeight - : legacyFontWeight, - size: 16, - lineHeight: 24, - color: customColor ?? defaultColor, - ...(asLink - ? { - accessibilityRole: "link", - textStyle: { textDecorationLine: "underline" } - } - : {}) - }; - - return ( - - {props.children} - - ); - } -); diff --git a/src/components/typography/LabelMini.tsx b/src/components/typography/LabelMini.tsx index b0bdde74..6c5541ad 100644 --- a/src/components/typography/LabelMini.tsx +++ b/src/components/typography/LabelMini.tsx @@ -10,7 +10,7 @@ import { } from "./IOText"; type LabelMiniProps = TypographicStyleProps & { - weight?: Extract; + weight?: Extract; } & TypographicStyleAsLinkProps; const fontName: IOFontFamily = "Titillio"; diff --git a/src/components/typography/__test__/__snapshots__/typography.test.tsx.snap b/src/components/typography/__test__/__snapshots__/typography.test.tsx.snap index 02621e53..fb811bca 100644 --- a/src/components/typography/__test__/__snapshots__/typography.test.tsx.snap +++ b/src/components/typography/__test__/__snapshots__/typography.test.tsx.snap @@ -48,6 +48,121 @@ exports[`Test Typography Components BodyMonospace Snapshot 1`] = ` `; +exports[`Test Typography Components BodySmall Snapshot 1`] = ` + + Text + +`; + +exports[`Test Typography Components BodySmall Snapshot 2`] = ` + + Text + +`; + +exports[`Test Typography Components BodySmall Snapshot 3`] = ` + + Text + +`; + +exports[`Test Typography Components BodySmall Snapshot 4`] = ` + + Text + +`; + +exports[`Test Typography Components BodySmall Snapshot 5`] = ` + + Text + +`; + exports[`Test Typography Components CTA Snapshot 1`] = ` `; -exports[`Test Typography Components Label Snapshot 1`] = ` - - Text - -`; - -exports[`Test Typography Components Label Snapshot 2`] = ` - - Text - -`; - -exports[`Test Typography Components LabelSmall Snapshot 1`] = ` - - Text - -`; - -exports[`Test Typography Components LabelSmall Snapshot 2`] = ` - - Text - -`; - -exports[`Test Typography Components LabelSmall Snapshot 3`] = ` - - Text - -`; - -exports[`Test Typography Components LabelSmall Snapshot 4`] = ` - - Text - -`; - -exports[`Test Typography Components LabelSmall Snapshot 5`] = ` - - Text - -`; - exports[`Test Typography Components Link Snapshot 1`] = ` { @@ -85,13 +84,13 @@ describe("Test Typography Components", () => { const cta = TestRenderer.create(Text).toJSON(); expect(cta).toMatchSnapshot(); }); - it("LabelSmall Snapshot", () => { + it("BodySmall Snapshot", () => { const labelSmallDefault = TestRenderer.create( - Text + Text ).toJSON(); expect(labelSmallDefault).toMatchSnapshot(); - type BodyColors = React.ComponentProps["color"]; + type BodyColors = React.ComponentProps["color"]; const allowedColors: ReadonlyArray = [ "blue", @@ -102,31 +101,16 @@ describe("Test Typography Components", () => { allowedColors.map(color => { const labelSmall = TestRenderer.create( - Text + Text ).toJSON(); expect(labelSmall).toMatchSnapshot(); }); }); - it("Label Snapshot", () => { - const labelDefault = TestRenderer.create().toJSON(); - expect(labelDefault).toMatchSnapshot(); - - type BodyColors = React.ComponentProps["color"]; - - const allowedColors: ReadonlyArray = ["black"]; - - allowedColors.map(color => { - const label = TestRenderer.create( - - ).toJSON(); - expect(label).toMatchSnapshot(); - }); - }); it("Link Snapshot", () => { const link = TestRenderer.create( - + ).toJSON(); expect(link).toMatchSnapshot(); }); diff --git a/src/components/typography/index.tsx b/src/components/typography/index.tsx index 414d0764..fc80ddaa 100644 --- a/src/components/typography/index.tsx +++ b/src/components/typography/index.tsx @@ -1,11 +1,10 @@ -export * from "./BaseTypography"; -export * from "./IOText"; export * from "./Body"; -export * from "./ComposedBodyFromArray"; -export * from "./Caption"; -export * from "./Chip"; +export * from "./BodyMonospace"; +export * from "./BodySmall"; export * from "./ButtonText"; -export * from "./Factory"; +export * from "./Caption"; +export * from "./common"; +export * from "./ComposedBodyFromArray"; export * from "./H1"; export * from "./H2"; export * from "./H3"; @@ -13,11 +12,8 @@ export * from "./H4"; export * from "./H5"; export * from "./H6"; export * from "./Hero"; -export * from "./Label"; -export * from "./LabelSmall"; +export * from "./IOText"; export * from "./LabelMini"; -export * from "./BodyMonospace"; -export * from "./common"; export * from "./markdown/MdH1"; export * from "./markdown/MdH2"; export * from "./markdown/MdH3"; diff --git a/stories/foundation/layout/HStack.stories.tsx b/stories/foundation/layout/HStack.stories.tsx index 01504b2f..7bc24ba6 100644 --- a/stories/foundation/layout/HStack.stories.tsx +++ b/stories/foundation/layout/HStack.stories.tsx @@ -2,7 +2,7 @@ import type { Meta, StoryObj } from "@storybook/react"; import React from "react"; import { View } from "react-native"; -import { HStack, LabelSmall } from "../../../src/components"; +import { HStack, BodySmall } from "../../../src/components"; import { IOColors } from "../../../src/core"; // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export @@ -48,9 +48,9 @@ export const Base: Story = { backgroundColor: IOColors["grey-700"] }} > - {`${ + {`${ i + 1 - }`} + }`} ))} - + Growing width - + ) diff --git a/stories/foundation/layout/VStack.stories.tsx b/stories/foundation/layout/VStack.stories.tsx index e636817d..c67343f6 100644 --- a/stories/foundation/layout/VStack.stories.tsx +++ b/stories/foundation/layout/VStack.stories.tsx @@ -2,7 +2,7 @@ import type { Meta, StoryObj } from "@storybook/react"; import React from "react"; import { View } from "react-native"; -import { LabelSmall, VStack } from "../../../src/components"; +import { BodySmall, VStack } from "../../../src/components"; import { IOColors } from "../../../src/core"; // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export @@ -48,9 +48,9 @@ export const Base: Story = { backgroundColor: IOColors["grey-700"] }} > - {`Block n.${ + {`Block n.${ i + 1 - }`} + }`} ))} - + Different height - + ) diff --git a/stories/foundation/typography/Label.stories.ts b/stories/foundation/typography/BodySmall.stories.ts similarity index 84% rename from stories/foundation/typography/Label.stories.ts rename to stories/foundation/typography/BodySmall.stories.ts index cceee29a..6a28bd15 100644 --- a/stories/foundation/typography/Label.stories.ts +++ b/stories/foundation/typography/BodySmall.stories.ts @@ -1,12 +1,12 @@ import type { Meta, StoryObj } from "@storybook/react"; import { Alert } from "react-native"; -import { Label } from "../../../src/components"; +import { BodySmall } from "../../../src/components"; // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export const meta = { - title: "Foundation/Typography/Label", - component: Label, + title: "Foundation/Typography/BodySmall", + component: BodySmall, parameters: { // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout layout: "centered", @@ -14,7 +14,7 @@ const meta = { }, // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs tags: ["autodocs"] -} satisfies Meta; +} satisfies Meta; export default meta; type Story = StoryObj; diff --git a/stories/foundation/typography/Chip.stories.ts b/stories/foundation/typography/Chip.stories.ts deleted file mode 100644 index 9a0c0042..00000000 --- a/stories/foundation/typography/Chip.stories.ts +++ /dev/null @@ -1,29 +0,0 @@ -import type { Meta, StoryObj } from "@storybook/react"; - -import { Alert } from "react-native"; -import { Chip } from "../../../src/components"; - -// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export -const meta = { - title: "Foundation/Typography/Chip", - component: Chip, - parameters: { - // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout - layout: "centered", - actions: { argTypesRegex: "^on.*" } - }, - // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs - tags: ["autodocs"] -} satisfies Meta; - -export default meta; -type Story = StoryObj; - -export const Primary: Story = { - args: { - color: "black", - accessibilityLabel: "Tap to trigger test alert", - onPress: () => Alert.alert("Alert", "Action triggered"), - children: "Hello World" - } -}; diff --git a/stories/foundation/typography/LabelSmall.stories.ts b/stories/foundation/typography/LabelSmall.stories.ts deleted file mode 100644 index 5f20c984..00000000 --- a/stories/foundation/typography/LabelSmall.stories.ts +++ /dev/null @@ -1,28 +0,0 @@ -import type { Meta, StoryObj } from "@storybook/react"; - -import { Alert } from "react-native"; -import { LabelSmall } from "../../../src/components"; - -// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export -const meta = { - title: "Foundation/Typography/LabelSmall", - component: LabelSmall, - parameters: { - // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout - layout: "centered", - actions: { argTypesRegex: "^on.*" } - }, - // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs - tags: ["autodocs"] -} satisfies Meta; - -export default meta; -type Story = StoryObj; - -export const Primary: Story = { - args: { - accessibilityLabel: "Tap to trigger test alert", - onPress: () => Alert.alert("Alert", "Action triggered"), - children: "Hello World" - } -}; diff --git a/stories/markdown/Typography.md b/stories/markdown/Typography.md index 4905c7dd..c89ab514 100644 --- a/stories/markdown/Typography.md +++ b/stories/markdown/Typography.md @@ -1,7 +1,7 @@ # Typography ## Components -The library provides a set of components to manage the text rendering. Components have a predefined set of styles that can't be customized using the props. In case of need to create a new custom text component it is possible to use the `BaseTypography` component and apply the customization using its props. +The library provides a set of components to manage the text rendering. Components have a predefined set of styles that can't be customized using the props. In case of need to create a new custom text component it is possible to use the `IOText` component and apply the customization using its props. Each component has its own font size and line height and a set of accepted weight.