Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[IOAPPX-349] Add the new IOText component with support for advanced a11y features #312

Merged
merged 31 commits into from
Jul 24, 2024
Merged

[IOAPPX-349] Add the new IOText component with support for advanced a11y features #312

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
31 commits
Select commit Hold shift + click to select a range
2996753
Simplify `fonts.ts` logic, add the new `IOText` starting from `BaseTy…
dmnplb Jul 17, 2024
586e104
Add new `H1` made with `IOText`
dmnplb Jul 18, 2024
ae929da
fixes fontStyle compilation
CrisTofani Jul 18, 2024
e72cb80
Add `useBoldTextEnabled` a11y hook
dmnplb Jul 18, 2024
d4fa673
Add dynamic font weight to `IOText` if bold text is enabled
dmnplb Jul 19, 2024
516cabd
Merge branch 'main' into IOAPPX-349-add-IOText-component
dmnplb Jul 19, 2024
dfdd871
Deprecate `BaseTypography` component
dmnplb Jul 22, 2024
ac97f23
Update `Hero` typographic style
dmnplb Jul 22, 2024
e595003
Update `H2` typographic style
dmnplb Jul 22, 2024
d4aa3a8
Update `H3` typographic style
dmnplb Jul 22, 2024
dd2891b
Update `H4` typographic style
dmnplb Jul 22, 2024
8db4427
Update `H5` typographic style
dmnplb Jul 22, 2024
eb3ad7d
Update `H6` typographic style
dmnplb Jul 22, 2024
4d3555f
Update `ButtonText` typographic style
dmnplb Jul 22, 2024
b90b65d
Update `Caption` typographic style
dmnplb Jul 22, 2024
558659a
Update `Chip` typographic style
dmnplb Jul 22, 2024
b607655
Improve code of all the typographic styles
dmnplb Jul 22, 2024
2435a3f
Update `Body` typographic style
dmnplb Jul 22, 2024
c29a176
Update `BodyMonospace` typographic style
dmnplb Jul 22, 2024
fd60a43
Add custom weight prop to `Body` style
dmnplb Jul 22, 2024
96dce07
Update `Label…` typographic styles, remove `LabelLink`
dmnplb Jul 23, 2024
ecdd67e
Add `asLink` prop to `Body`
dmnplb Jul 23, 2024
69a3b7d
Update all the MD-related styles, remove some ones
dmnplb Jul 23, 2024
14949fa
Update some DS pages to resolve TS errors
dmnplb Jul 23, 2024
7f2c6ab
Fix TS errors on some components
dmnplb Jul 23, 2024
591b219
Fix TS errors on some components, part II
dmnplb Jul 23, 2024
dc62017
Fix TS errors on some components, part III
dmnplb Jul 23, 2024
80e12a9
Add ability to overwrite the `color`prop
dmnplb Jul 23, 2024
374c794
Update `jest` snapshots
dmnplb Jul 23, 2024
a3bfc0c
Remove `LabelHeader`
dmnplb Jul 24, 2024
8389060
fixes snaps and tests
CrisTofani Jul 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 10 additions & 9 deletions example/src/pages/Advice.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,9 +48,7 @@ export const DSAdvice = () => (

const renderFeatureInfo = () => (
<>
<H2 color={"bluegrey"} weight={"Semibold"} style={{ marginBottom: 16 }}>
FeatureInfo
</H2>
<H2 style={{ marginBottom: 16 }}>FeatureInfo</H2>
<ComponentViewerBox name="FeatureInfo · with Icon">
<FeatureInfo
iconName="info"
Expand All @@ -68,8 +66,11 @@ const renderFeatureInfo = () => (
<VSpacer size={24} />
<FeatureInfo
iconName="security"
actionLabel="Si applicano i Termini e condizioni d’uso e l’Informativa Privacy di Paytipper"
actionOnPress={onLinkPress}
action={{
label:
"Si applicano i Termini e condizioni d’uso e l’Informativa Privacy di Paytipper",
onPress: onLinkPress
}}
/>
</ComponentViewerBox>
<VSpacer size={16} />
Expand All @@ -93,8 +94,10 @@ const renderFeatureInfo = () => (
body={
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor ut labore et dolore magna aliqua. sed do eiusmod tempor ut labore et dolore magna aliqua"
}
actionLabel="Scopri di più"
actionOnPress={onLinkPress}
action={{
label: "Scopri di più",
onPress: onLinkPress
}}
/>
</ComponentViewerBox>
</>
Expand All @@ -103,8 +106,6 @@ const renderFeatureInfo = () => (
const renderBanner = () => (
<>
<H2
color={"bluegrey"}
weight={"Semibold"}
style={{
marginBottom: 16,
paddingTop: IOVisualCostants.appMarginDefault
Expand Down
7 changes: 3 additions & 4 deletions example/src/pages/Alert.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,6 @@ export const DSAlert = () => {
{/* Content only */}
<H2
color={"bluegrey"}
weight={"Semibold"}
style={{
marginBottom: 16,
paddingTop: IOVisualCostants.appMarginDefault
Expand Down Expand Up @@ -55,7 +54,7 @@ export const DSAlert = () => {

<VSpacer size={40} />

<H2 color={"bluegrey"} weight={"Semibold"} style={{ marginBottom: 16 }}>
<H2 color={"bluegrey"} style={{ marginBottom: 16 }}>
Title + Content
</H2>

Expand Down Expand Up @@ -104,7 +103,7 @@ export const DSAlert = () => {

<VSpacer size={40} />

<H2 color={"bluegrey"} weight={"Semibold"} style={{ marginBottom: 16 }}>
<H2 color={"bluegrey"} style={{ marginBottom: 16 }}>
Content + Action
</H2>

Expand Down Expand Up @@ -157,7 +156,7 @@ export const DSAlert = () => {
<VSpacer size={40} />

{/* Full width */}
<H2 color={"bluegrey"} weight={"Semibold"} style={{ marginBottom: 16 }}>
<H2 color={"bluegrey"} style={{ marginBottom: 16 }}>
Full width
</H2>
<FullWidthComponent>
Expand Down
37 changes: 6 additions & 31 deletions example/src/pages/Buttons.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,6 @@ export const Buttons = () => {
{/* The title should be dynamic, got from the route object */}
<H2
color={"bluegrey"}
weight={"Semibold"}
style={{
marginBottom: 16,
paddingTop: IOVisualCostants.appMarginDefault
Expand Down Expand Up @@ -290,11 +289,7 @@ export const Buttons = () => {

<VSpacer size={40} />

<H2
color={"bluegrey"}
weight={"Semibold"}
style={{ marginBottom: 16, marginTop: 16 }}
>
<H2 color={"bluegrey"} style={{ marginBottom: 16, marginTop: 16 }}>
ButtonOutline
</H2>
<ComponentViewerBox name="ButtonOutline · Primary variant (using Pressable API)">
Expand Down Expand Up @@ -449,11 +444,7 @@ export const Buttons = () => {

<VSpacer size={40} />

<H2
color={"bluegrey"}
weight={"Semibold"}
style={{ marginBottom: 16, marginTop: 16 }}
>
<H2 color={"bluegrey"} style={{ marginBottom: 16, marginTop: 16 }}>
ButtonLink
</H2>
<ComponentViewerBox name="ButtonLink · Primary variant (using Pressable API)">
Expand Down Expand Up @@ -594,11 +585,7 @@ export const Buttons = () => {

<VSpacer size={40} />

<H2
color={"bluegrey"}
weight={"Semibold"}
style={{ marginBottom: 16, marginTop: 16 }}
>
<H2 color={"bluegrey"} style={{ marginBottom: 16, marginTop: 16 }}>
IconButton
</H2>
<ComponentViewerBox name="IconButton · Primary variant">
Expand Down Expand Up @@ -707,11 +694,7 @@ export const Buttons = () => {

<VSpacer size={40} />

<H2
color={"bluegrey"}
weight={"Semibold"}
style={{ marginBottom: 16, marginTop: 16 }}
>
<H2 color={"bluegrey"} style={{ marginBottom: 16, marginTop: 16 }}>
IconButtonSolid
</H2>

Expand Down Expand Up @@ -775,11 +758,7 @@ export const Buttons = () => {

<VSpacer size={40} />

<H2
color={"bluegrey"}
weight={"Semibold"}
style={{ marginBottom: 16, marginTop: 16 }}
>
<H2 color={"bluegrey"} style={{ marginBottom: 16, marginTop: 16 }}>
IconButtonContained (Icebox)
</H2>
<ComponentViewerBox name="IconButtonContained · Primary variant">
Expand Down Expand Up @@ -861,11 +840,7 @@ export const Buttons = () => {

<VSpacer size={40} />

<H2
color={"bluegrey"}
weight={"Semibold"}
style={{ marginBottom: 16, marginTop: 16 }}
>
<H2 color={"bluegrey"} style={{ marginBottom: 16, marginTop: 16 }}>
Specific buttons
</H2>

Expand Down
12 changes: 4 additions & 8 deletions example/src/pages/Colors.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import {
IOThemeDark,
IOThemeLight,
IOVisualCostants,
LabelMini,
LabelSmall,
VSpacer,
hexToRgba,
Expand Down Expand Up @@ -263,11 +264,7 @@ export const Colors = () => (
)}

{/* Gradients */}
<H2
color={"bluegrey"}
weight={"Semibold"}
style={{ marginBottom: sectionTitleMargin }}
>
<H2 color={"bluegrey"} style={{ marginBottom: sectionTitleMargin }}>
Gradients
</H2>
<View style={styles.gradientItemsWrapper}>
Expand Down Expand Up @@ -309,14 +306,13 @@ const ColorBox = ({
</View>

{name && (
<LabelSmall
fontSize="small"
<LabelMini
numberOfLines={1}
color={mode === "dark" ? "grey-200" : "bluegrey"}
weight={"Regular"}
>
{name}
</LabelSmall>
</LabelMini>
)}
</View>
);
Expand Down
44 changes: 8 additions & 36 deletions example/src/pages/Icons.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,11 +100,7 @@ export const Icons = () => {
/>
))}
</View>
<H2
color={theme["textHeading-default"]}
weight={"Semibold"}
style={{ marginBottom: 12 }}
>
<H2 color={theme["textHeading-default"]} style={{ marginBottom: 12 }}>
Navigation
</H2>
<View style={styles.itemsWrapper}>
Expand All @@ -123,11 +119,7 @@ export const Icons = () => {
/>
))}
</View>
<H2
color={theme["textHeading-default"]}
weight={"Semibold"}
style={{ marginBottom: 12 }}
>
<H2 color={theme["textHeading-default"]} style={{ marginBottom: 12 }}>
System
</H2>
<View style={styles.itemsWrapper}>
Expand All @@ -146,11 +138,7 @@ export const Icons = () => {
/>
))}
</View>
<H2
color={theme["textHeading-default"]}
weight={"Semibold"}
style={{ marginBottom: 12 }}
>
<H2 color={theme["textHeading-default"]} style={{ marginBottom: 12 }}>
Biometric
</H2>
<View style={styles.itemsWrapper}>
Expand All @@ -169,11 +157,7 @@ export const Icons = () => {
/>
))}
</View>
<H2
color={theme["textHeading-default"]}
weight={"Semibold"}
style={{ marginBottom: 12 }}
>
<H2 color={theme["textHeading-default"]} style={{ marginBottom: 12 }}>
Categories
</H2>
<View style={styles.itemsWrapper}>
Expand All @@ -192,13 +176,7 @@ export const Icons = () => {
/>
))}
</View>
<H2
color={theme["textHeading-default"]}
weight={"Semibold"}
style={{ marginBottom: 12 }}
>
Product
</H2>
<H2 style={{ marginBottom: 12 }}>Product</H2>
<View style={styles.itemsWrapper}>
{Object.entries(IOProductIcons).map(([iconItemName]) => (
<IconViewerBox
Expand All @@ -216,9 +194,7 @@ export const Icons = () => {
))}
</View>

<H4 color={theme["textHeading-default"]} style={{ marginBottom: 12 }}>
IconContained
</H4>
<H4 style={{ marginBottom: 12 }}>IconContained</H4>
<ComponentViewerBox name={"IconContained, default variant"}>
<View style={IOStyles.row}>
<IconContained icon="device" variant="tonal" color="neutral" />
Expand All @@ -227,9 +203,7 @@ export const Icons = () => {
</View>
</ComponentViewerBox>

<H3 color={theme["textHeading-default"]} style={{ marginBottom: 12 }}>
Sizes
</H3>
<H3 style={{ marginBottom: 12 }}>Sizes</H3>
<View style={styles.itemsWrapper}>
{/* If you want to render another icon in different sizes,
just change the name below */}
Expand All @@ -247,9 +221,7 @@ export const Icons = () => {
/>
))}
</View>
<H3 color={theme["textHeading-default"]} style={{ marginBottom: 12 }}>
Colors
</H3>
<H3 style={{ marginBottom: 12 }}>Colors</H3>
<View style={styles.itemsWrapper}>
{IOIconColors.map(color => (
<IconViewerBox
Expand Down
6 changes: 3 additions & 3 deletions example/src/pages/Layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import {
IOColors,
IOSpacer,
IOVisualCostants,
LabelMini,
LabelSmall,
VSpacer,
VStack,
Expand Down Expand Up @@ -56,14 +57,13 @@ export const Layout = () => {
}}
>
<Body color={theme["textBody-secondary"]}>Content example</Body>
<LabelSmall
<LabelMini
style={{ position: "absolute", right: 4, top: 4 }}
fontSize="small"
weight="Regular"
color={theme["textBody-tertiary"]}
>
{value}
</LabelSmall>
</LabelMini>
</View>
</ContentWrapper>
</View>
Expand Down
Loading
Loading