diff --git a/ts/features/design-system/DesignSystem.tsx b/ts/features/design-system/DesignSystem.tsx
index 478def23625..22d764f464e 100644
--- a/ts/features/design-system/DesignSystem.tsx
+++ b/ts/features/design-system/DesignSystem.tsx
@@ -3,10 +3,11 @@ import {
IOVisualCostants,
ListItemNav,
VSpacer,
+ VStack,
useIOTheme
} from "@pagopa/io-app-design-system";
import * as React from "react";
-import { SectionList, StatusBar, View, useColorScheme } from "react-native";
+import { SectionList, StatusBar, useColorScheme } from "react-native";
import { H1 } from "../../components/core/typography/H1";
import { LabelSmall } from "../../components/core/typography/LabelSmall";
import { IOStyles } from "../../components/core/variables/IOStyles";
@@ -100,14 +101,14 @@ export const DesignSystem = () => {
}: {
section: { title: string; description?: string };
}) => (
-
+
{title}
{description && (
{description}
)}
-
+
);
const renderDSSectionFooter = ({ section }: { section: SectionDataProps }) =>
@@ -115,7 +116,7 @@ export const DesignSystem = () => {
we already apply the `screenEndMargin` */
DESIGN_SYSTEM_SECTION_DATA.indexOf(section) !==
DESIGN_SYSTEM_SECTION_DATA.length - 1 ? (
-
- {children}
-
- {name && (
+ {reverse ? (
+ {children}
+ ) : (
+ children
+ )}
+ {name && (
+
{name}
- )}
-
+
+ )}
);
};
diff --git a/ts/features/design-system/components/DSIconViewerBox.tsx b/ts/features/design-system/components/DSIconViewerBox.tsx
index dc103082821..250c01d9432 100644
--- a/ts/features/design-system/components/DSIconViewerBox.tsx
+++ b/ts/features/design-system/components/DSIconViewerBox.tsx
@@ -7,7 +7,6 @@ export const iconItemGutter = 8;
const styles = StyleSheet.create({
iconWrapper: {
justifyContent: "flex-start",
- marginBottom: 16,
paddingHorizontal: iconItemGutter / 2
},
iconWrapperSmall: {
diff --git a/ts/features/design-system/components/DSLogoPaymentViewerBox.tsx b/ts/features/design-system/components/DSLogoPaymentViewerBox.tsx
index e56d4e69406..899d91c16d4 100644
--- a/ts/features/design-system/components/DSLogoPaymentViewerBox.tsx
+++ b/ts/features/design-system/components/DSLogoPaymentViewerBox.tsx
@@ -10,7 +10,6 @@ export const logoItemGutter = 8;
const styles = StyleSheet.create({
logoWrapper: {
justifyContent: "flex-start",
- marginBottom: 16,
paddingHorizontal: logoItemGutter / 2
},
logoWrapperMedium: {
diff --git a/ts/features/design-system/components/DesignSystemSection.tsx b/ts/features/design-system/components/DesignSystemSection.tsx
index 9eb5227d40d..0358e1fc3a5 100644
--- a/ts/features/design-system/components/DesignSystemSection.tsx
+++ b/ts/features/design-system/components/DesignSystemSection.tsx
@@ -1,23 +1,20 @@
+import { H3, VStack, useIOTheme } from "@pagopa/io-app-design-system";
import * as React from "react";
-import { View, StyleSheet } from "react-native";
-import { H1 } from "../../../components/core/typography/H1";
-
-const styles = StyleSheet.create({
- content: {
- marginBottom: 54
- },
- title: {
- marginBottom: 16
- }
-});
+import { View } from "react-native";
type OwnProps = React.PropsWithChildren<{
title: string;
}>;
-export const DesignSystemSection = (props: OwnProps) => (
-
- {props.title}
- {props.children}
-
-);
+const sectionTitleMargin = 24;
+
+export const DesignSystemSection = (props: OwnProps) => {
+ const theme = useIOTheme();
+
+ return (
+
+ {props.title}
+ {props.children}
+
+ );
+};
diff --git a/ts/features/design-system/core/DSAccordion.tsx b/ts/features/design-system/core/DSAccordion.tsx
index 8ee8820b665..b1ee7705acd 100644
--- a/ts/features/design-system/core/DSAccordion.tsx
+++ b/ts/features/design-system/core/DSAccordion.tsx
@@ -1,12 +1,12 @@
import {
AccordionItem,
VSpacer,
+ H4,
useIOTheme
} from "@pagopa/io-app-design-system";
import * as React from "react";
import { FlatList, ListRenderItemInfo, View } from "react-native";
import { Body } from "../../../components/core/typography/Body";
-import { H3 } from "../../../components/core/typography/H3";
import { DesignSystemScreen } from "../components/DesignSystemScreen";
const assistanceData: Array = [
@@ -41,14 +41,14 @@ const assistanceData: Array = [
];
export const DSAccordion = () => {
+ const theme = useIOTheme();
+
const renderAccordionHeader = () => (
- AccordionItem
+ AccordionItem
);
- const theme = useIOTheme();
-
const renderItem = ({ item }: ListRenderItemInfo) => (
- {renderFeatureInfo()}
+const sectionTitleMargin = 16;
+const blockMargin = 40;
+const componentMargin = 40;
+const componentInnerMargin = 16;
-
-);
+ return (
+
+
+
+ FeatureInfo
+ {renderFeatureInfo()}
+
+
+
+ Banner
+ {renderBanner()}
+
+
+
+ );
+};
const renderFeatureInfo = () => (
- <>
-
- FeatureInfo
-
+
-
+
-
-
+
-
+
);
-const renderBanner = () => {
- const viewRef = React.createRef();
-
- return (
- <>
-
- Banner
-
- {bannerBackgroundColours.map(color => (
-
-
+const renderBanner = () => (
+
+ {bannerBackgroundColours.map(color => (
+
+
+
{
action="Action text"
onPress={onLinkPress}
/>
- {
}
pictogramName="charity"
/>
- {
action="Dona anche tu"
onPress={onLinkPress}
/>
- {
}
pictogramName="charity"
/>
- {
action="Dona anche tu"
onPress={onLinkPress}
/>
-
-
+
+
+
+
{
onClose={onClose}
labelClose="Nascondi questo banner"
/>
- {
onClose={onClose}
labelClose="Nascondi questo banner"
/>
-
-
+
+
+
+
{
action="Dona anche tu"
onPress={onLinkPress}
/>
- {
onPress={onLinkPress}
pictogramName="charity"
/>
- {
}
pictogramName="charity"
/>
-
-
- ))}
-
- );
-};
+
+
+
+ ))}
+
+);
diff --git a/ts/features/design-system/core/DSAlert.tsx b/ts/features/design-system/core/DSAlert.tsx
index 0dac630c89a..fca332de23c 100644
--- a/ts/features/design-system/core/DSAlert.tsx
+++ b/ts/features/design-system/core/DSAlert.tsx
@@ -1,93 +1,99 @@
-import { Alert, VSpacer } from "@pagopa/io-app-design-system";
+import { Alert, H4, VStack, useIOTheme } from "@pagopa/io-app-design-system";
import * as React from "react";
import { DSFullWidthComponent } from "../components/DSFullWidthComponent";
/* Types */
-import { H2 } from "../../../components/core/typography/H2";
import { DesignSystemScreen } from "../components/DesignSystemScreen";
-export const DSAlert = () => (
-
- {/* Content only */}
-
- Content only
-
+const componentInnerMargin = 8;
+const sectionTitleMargin = 16;
+const blockMargin = 40;
+
+export const DSAlert = () => {
+ const theme = useIOTheme();
+
+ return (
+
+
+ {/* Content only */}
+
+ Content only
+ {renderContentOnly()}
+
+
+
+ Title + Content
+ {renderTitlePlusContent()}
+
+
+
+ Content + Action
+ {renderContentPlusAction()}
+
+
+ {/* Full width */}
+
+ Full width
+ {renderFullWidth()}
+
+
+
+ );
+};
+
+const renderContentOnly = () => (
+
+);
-
- Title + Content
-
-
+const renderTitlePlusContent = () => (
+
+);
-
- Content + Action
-
-
+const renderContentPlusAction = () => (
+
(
}}
content="Ut enim ad minim veniam, quis ullamco laboris nisi ut aliquid"
/>
-
- (
}}
content="Ut enim ad minim veniam, quis ullamco laboris nisi ut aliquid"
/>
-
- (
}}
content="Ut enim ad minim veniam, quis ullamco laboris nisi ut aliquid"
/>
-
- (
}}
content="Ut enim ad minim veniam, quis ullamco laboris nisi ut aliquid"
/>
+
+);
-
- Full width
-
-
+const renderFullWidth = () => (
+
+
(
}}
content="Ut enim ad minim veniam, quis ullamco labo nisi ut aliquid ad minim veniam"
/>
-
-
+
+
);
diff --git a/ts/features/design-system/core/DSBadges.tsx b/ts/features/design-system/core/DSBadges.tsx
index a60c76321bf..5dab0647abe 100644
--- a/ts/features/design-system/core/DSBadges.tsx
+++ b/ts/features/design-system/core/DSBadges.tsx
@@ -1,120 +1,118 @@
import {
Badge,
- HSpacer,
+ H4,
+ HStack,
IOColors,
IOTagRadius,
Tag,
- VSpacer
+ VStack,
+ useIOTheme
} from "@pagopa/io-app-design-system";
import * as React from "react";
import { View } from "react-native";
-import { H2 } from "../../../components/core/typography/H2";
-import { IOStyles } from "../../../components/core/variables/IOStyles";
import { DSComponentViewerBox } from "../components/DSComponentViewerBox";
import { DesignSystemScreen } from "../components/DesignSystemScreen";
-export const DSBadges = () => (
-
-
- Tag
-
- {renderTag()}
+const sectionTitleMargin = 16;
+const sectionMargin = 40;
+const componentMargin = 24;
+const componentInnerMargin = 8;
-
- Badge
-
- {renderBadge()}
-
-);
+ return (
+
+
+
+ Tag
+ {renderTag()}
+
+
+
+ Badge
+ {renderBadge()}
+
+
+
+ );
+};
const renderBadge = () => (
- <>
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
+
+
);
const renderTag = () => (
-
+
-
-
+
+
+
+
-
@@ -132,12 +130,12 @@ const renderTag = () => (
style={{
backgroundColor: IOColors["error-100"],
padding: 8,
- width: "60%",
+ width: "40%",
borderRadius: IOTagRadius + 8
}}
>
-
+
);
diff --git a/ts/features/design-system/core/DSBottomSheet.tsx b/ts/features/design-system/core/DSBottomSheet.tsx
index bbc4ce42aa8..e3174963be2 100644
--- a/ts/features/design-system/core/DSBottomSheet.tsx
+++ b/ts/features/design-system/core/DSBottomSheet.tsx
@@ -1,14 +1,16 @@
-import * as React from "react";
-import { SafeAreaView } from "react-native";
import {
ButtonSolid,
- VSpacer,
ContentWrapper,
+ Divider,
+ H4,
ListItemNav,
+ VSpacer,
+ VStack,
useIOTheme
} from "@pagopa/io-app-design-system";
+import * as React from "react";
+import { SafeAreaView, View } from "react-native";
import { Body } from "../../../components/core/typography/Body";
-import { H2 } from "../../../components/core/typography/H2";
import {
useIOBottomSheetAutoresizableModal,
useIOBottomSheetModal,
@@ -19,6 +21,7 @@ import DESIGN_SYSTEM_ROUTES from "../navigation/routes";
export const DSBottomSheet = () => {
const theme = useIOTheme();
+
const handlePressDismiss = () => {
dismissStaticBottomSheet();
dismissStaticBottomSheetWithFooter();
@@ -186,80 +189,89 @@ export const DSBottomSheet = () => {
defaultFooter
);
+ const sectionTitleMargin = 16;
+ const blockMargin = 48;
+
return (
-
- Available bottom sheets
-
-
- Legacy
-
+
+
+ Available bottom sheets
+
+
+
-
+ Legacy
+
+
+
+
+ {staticBottomSheet}
+ {staticBottomSheetWithFooter}
+ {autoResizableBottomSheet}
+ {autoResizableBottomSheetWithFooter}
+ {veryLongAutoResizableBottomSheetWithFooter}
+ {veryLongAutoResizableBottomSheetWithFooterFullScreen}
+ {legacyBottomSheet}
+ {legacyBottomSheetWithFooter}
+
);
};
diff --git a/ts/features/design-system/core/DSButtons.tsx b/ts/features/design-system/core/DSButtons.tsx
index e35c8f6e0f9..14bfcb99a1a 100644
--- a/ts/features/design-system/core/DSButtons.tsx
+++ b/ts/features/design-system/core/DSButtons.tsx
@@ -2,21 +2,20 @@ import {
ButtonLink,
ButtonOutline,
ButtonSolid,
- HSpacer,
+ H4,
+ HStack,
IOColors,
IconButton,
IconButtonContained,
IconButtonSolid,
ListItemSwitch,
- VSpacer,
+ VStack,
useIOExperimentalDesign,
useIOTheme
} from "@pagopa/io-app-design-system";
import * as React from "react";
import { useState } from "react";
import { Alert, StyleSheet, View } from "react-native";
-import { H2 } from "../../../components/core/typography/H2";
-import { IOStyles } from "../../../components/core/variables/IOStyles";
import { DSComponentViewerBox } from "../components/DSComponentViewerBox";
import { DesignSystemScreen } from "../components/DesignSystemScreen";
@@ -37,118 +36,87 @@ const onButtonPress = () => {
Alert.alert("Alert", "Action triggered");
};
+const sectionTitleMargin = 16;
+const sectionMargin = 48;
+const buttonBlockMargin = 24;
+const buttonBlockInnerSpacing = 8;
+const buttonBlockInnerSpacingLoose = 16;
+
export const DSButtons = () => {
const { isExperimental } = useIOExperimentalDesign();
const theme = useIOTheme();
return (
-
- ButtonSolid
-
- {renderButtonSolid(isExperimental)}
-
-
- ButtonOutline
-
- {renderButtonOutline(isExperimental)}
-
-
- ButtonLink
-
- {renderButtonLink(isExperimental)}
-
-
- IconButton
-
- {renderIconButton(isExperimental)}
-
-
- IconButtonSolid
-
- {renderIconButtonSolid(isExperimental)}
-
-
- IconButtonContained (Icebox)
-
- {renderIconButtonContained(isExperimental)}
+
+
+ ButtonSolid
+ {renderButtonSolid(isExperimental)}
+
+
+
+ ButtonOutline
+ {renderButtonOutline(isExperimental)}
+
+
+
+ ButtonLink
+ {renderButtonLink(isExperimental)}
+
+
+
+ IconButton
+ {renderIconButton(isExperimental)}
+
+
+
+ IconButtonSolid
+ {renderIconButtonSolid(isExperimental)}
+
+
+
+
+ IconButtonContained (Icebox)
+
+ {renderIconButtonContained(isExperimental)}
+
+
);
};
const renderButtonSolid = (isExperimental: boolean) => (
- <>
-
-
+
+
+
+
+
+
+
-
+
(
-
+
(
icon="qrCode"
onPress={onButtonPress}
/>
-
+
-
+
(
accessibilityLabel="Tap to trigger test alert"
/>
- (
onPress={onButtonPress}
/>
- (
iconPosition="end"
onPress={onButtonPress}
/>
-
+
-
-
+
-
+
(
onPress={onButtonPress}
/>
- (
icon="trashcan"
onPress={onButtonPress}
/>
-
-
(
label={"Danger Button (full width, disabled)"}
onPress={onButtonPress}
/>
-
+
-
-
-
+
+
+
+
+
-
-
-
-
+
-
-
+
(
onPress={onButtonPress}
accessibilityLabel="Tap to trigger test alert"
/>
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
-
+
);
const renderButtonOutline = (isExperimental: boolean) => (
- <>
-
-
+
+
+
-
-
-
+
+
+
+
+
+
+
+
-
+
(
onPress={onButtonPress}
/>
- (
iconPosition="end"
onPress={onButtonPress}
/>
-
+
{!isExperimental && (
<>
-
+
(
accessibilityLabel="Tap to trigger test alert"
/>
- (
onPress={onButtonPress}
/>
- (
accessibilityLabel="Tap to trigger test alert"
onPress={onButtonPress}
/>
-
+
-
- {
- alert("Action triggered");
- }}
- />
-
+ {
+ alert("Action triggered");
+ }}
+ />
-
+
(
alert("Action triggered");
}}
/>
-
-
(
alert("Action triggered");
}}
/>
-
+
)}
@@ -519,46 +443,42 @@ const renderButtonOutline = (isExperimental: boolean) => (
-
-
-
+
+
+
-
+
-
+
(
onPress={onButtonPress}
accessibilityLabel="Tap to trigger test alert"
/>
-
-
-
-
-
-
-
-
+
+
+
+
+
-
+
);
const renderButtonLink = (isExperimental: boolean) => (
- <>
-
-
+
+
+
+
+
+
+
-
+
(
onPress={onButtonPress}
/>
- (
iconPosition="end"
onPress={onButtonPress}
/>
-
+
-
-
-
+
+
+
-
-
-
-
-
+
+
+
-
+
+
-
+
-
+
+
-
+
(
onPress={onButtonPress}
/>
- (
onPress={onButtonPress}
/>
- (
disabled
onPress={onButtonPress}
/>
-
+
(
-
+
(
onPress={onButtonPress}
/>
- (
onPress={onButtonPress}
/>
- (
disabled
onPress={onButtonPress}
/>
-
+
-
+
);
const renderIconButtonSolid = (isExperimental: boolean) => (
- <>
+
-
+
{
- alert("Action triggered");
- }}
+ onPress={onButtonPress}
/>
- {
- alert("Action triggered");
- }}
+ onPress={onButtonPress}
/>
-
+
(
-
+
(
onPress={onButtonPress}
/>
- (
disabled
onPress={onButtonPress}
/>
-
+
-
+
);
const renderIconButtonContained = (isExperimental: boolean) => (
- <>
+
-
+
{
- alert("Action triggered");
- }}
+ onPress={onButtonPress}
/>
{
- alert("Action triggered");
- }}
+ onPress={onButtonPress}
/>
-
+
-
+
{
- alert("Action triggered");
- }}
+ onPress={onButtonPress}
/>
(
accessibilityLabel="Tap to trigger test alert"
icon="help"
disabled
- onPress={() => {
- alert("Action triggered");
- }}
+ onPress={onButtonPress}
/>
-
+
(
-
+
(
disabled
onPress={onButtonPress}
/>
-
+
-
+
);
const LoadingSolidButtonExample = () => {
diff --git a/ts/features/design-system/core/DSCards.tsx b/ts/features/design-system/core/DSCards.tsx
index 94e879a1566..f84890eb932 100644
--- a/ts/features/design-system/core/DSCards.tsx
+++ b/ts/features/design-system/core/DSCards.tsx
@@ -1,14 +1,18 @@
import {
- HSpacer,
- TabNavigation,
- TabItem,
ContentWrapper,
- VSpacer
+ HStack,
+ IOVisualCostants,
+ TabItem,
+ TabNavigation,
+ VSpacer,
+ VStack
} from "@pagopa/io-app-design-system";
import * as React from "react";
-import { Alert, ScrollView, StyleSheet, View } from "react-native";
+import { Alert, ScrollView } from "react-native";
import { CgnCard } from "../../bonus/cgn/components/CgnCard";
import { IdPayCard } from "../../idpay/wallet/components/IdPayCard";
+import { ItwCredentialCard } from "../../itwallet/common/components/ItwCredentialCard";
+import { CredentialType } from "../../itwallet/common/utils/itwMocksUtils";
import { PaymentCard } from "../../payments/common/components/PaymentCard";
import { PaymentCardBig } from "../../payments/common/components/PaymentCardBig";
import { PaymentCardSmall } from "../../payments/common/components/PaymentCardSmall";
@@ -30,17 +34,6 @@ import {
import { DSComponentViewerBox } from "../components/DSComponentViewerBox";
import { DesignSystemScreen } from "../components/DesignSystemScreen";
import { DesignSystemSection } from "../components/DesignSystemSection";
-import { ItwCredentialCard } from "../../itwallet/common/components/ItwCredentialCard";
-import { CredentialType } from "../../itwallet/common/utils/itwMocksUtils";
-
-const styles = StyleSheet.create({
- content: {
- flex: 1,
- flexDirection: "row",
- flexWrap: "wrap",
- justifyContent: "space-between"
- }
-});
const onPress = () => {
Alert.alert("Alert", "Action triggered");
@@ -162,166 +155,176 @@ const featuredServicesDataForCarousel: FeaturedServicesCarouselProps = {
]
};
+const cardHorizontalScrollGap = 16;
+const cardHorizontalScrollGapSmall = 8;
+const componentMargin = 32;
+const blockMargin = 48;
+
const PaymentCards = () => (
- <>
+
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
+
);
const BonusCards = () => (
- <>
+
(
/>
-
-
-
-
-
-
+
+
+
+
+
+
+
+
-
+
);
const ServicesCards = () => (
- <>
+
-
-
-
-
+
+
+
+
+
+
-
-
-
-
+
+
+
+
+
+
-
+
);
const ItwCards = () => (
- <>
+
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
-
+
);
// for testing reasons, abi codes can be found here:
@@ -505,7 +522,7 @@ export const DSCards = () => {
{page === 0 &&
- {name && (
-
- {name}
-
- )}
+
+ {name && {name} }
{/* Show the two different columns
with both light and dark modes */}
@@ -164,7 +160,7 @@ const ColorThemeGroup = ({
+
{Object.entries(colorObjectLightMode).map(
([name, colorValue], i) => {
const [, darkModeColorValue] = colorArrayDarkMode[i];
@@ -195,11 +191,11 @@ const ColorThemeGroup = ({
);
}
)}
-
+
+
{Object.entries(colorObjectDarkMode).map(
([name, colorValue], i) => {
const [, lightModeColorValue] = colorArrayLightMode[i];
@@ -220,11 +216,11 @@ const ColorThemeGroup = ({
);
}
)}
-
+
-
+
);
};
@@ -237,21 +233,15 @@ const ColorGroup = ({ name, colorObject }: ColorGroupProps) => {
const theme = useIOTheme();
return (
-
- {name && (
-
- {name}
-
- )}
+
+ {name && {name} }
- {Object.entries(colorObject).map(([name, colorValue]) => (
-
+
+ {Object.entries(colorObject).map(([name, colorValue]) => (
+
+
);
};
@@ -260,71 +250,69 @@ export const DSColors = () => {
return (
-
- Color scales
-
- {/* Neutrals */}
-
+ {/* COLOR SCALES */}
+
+ Color scales
-
- Theme
-
+
+ {/* Neutrals */}
+
+
-
+ Theme
-
+
+
- {/* Gradients */}
-
- Gradients
-
-
- {Object.entries(IOColorGradients).map(([name, colorValues]) => (
-
+ {/* GRADIENTS */}
+
+ Gradients
-
+ {Object.entries(IOColorGradients).map(([name, colorValues]) => (
+
+
- {/* Legacy */}
-
-
- Legacy palette (†2023)
-
-
- Not moved to the “Legacy” category yet, because it's
- currently used everywhere
-
-
- {Object.entries(IOColorsLegacy).map(([name, colorValue]) => (
-
+
+ Legacy palette (†2023)
+
+ Not moved to the “Legacy” category yet, because
+ it's currently used everywhere
+
+
+
+
+ {Object.entries(IOColorsLegacy).map(([name, colorValue]) => (
+
+
+
);
};
diff --git a/ts/features/design-system/core/DSHapticFeedback.tsx b/ts/features/design-system/core/DSHapticFeedback.tsx
index b7fe2194404..aa26a192a47 100644
--- a/ts/features/design-system/core/DSHapticFeedback.tsx
+++ b/ts/features/design-system/core/DSHapticFeedback.tsx
@@ -1,79 +1,45 @@
+import {
+ ButtonSolid,
+ H4,
+ VStack,
+ useIOTheme
+} from "@pagopa/io-app-design-system";
import * as React from "react";
-import ReactNativeHapticFeedback from "react-native-haptic-feedback";
-import { ButtonSolid, VSpacer, useIOTheme } from "@pagopa/io-app-design-system";
-import { H2 } from "../../../components/core/typography/H2";
+import ReactNativeHapticFeedback, {
+ HapticFeedbackTypes
+} from "react-native-haptic-feedback";
import { DesignSystemScreen } from "../components/DesignSystemScreen";
+const hapticFeedbacks = [
+ "impactLight",
+ "impactMedium",
+ "impactHeavy",
+ "rigid",
+ "soft",
+ "notificationSuccess",
+ "notificationWarning",
+ "notificationError"
+] as Array>;
+
export const DSHapticFeedback = () => {
const theme = useIOTheme();
return (
- Feedback
- ReactNativeHapticFeedback.trigger("impactLight")}
- accessibilityLabel="impactLight"
- accessibilityHint="impactLight"
- />
- ReactNativeHapticFeedback.trigger("impactMedium")}
- accessibilityLabel="impactMedium"
- accessibilityHint="impactMedium"
- />
- ReactNativeHapticFeedback.trigger("impactHeavy")}
- accessibilityLabel="impactHeavy"
- accessibilityHint="impactHeavy"
- />
- ReactNativeHapticFeedback.trigger("rigid")}
- accessibilityLabel="rigid"
- accessibilityHint="rigid"
- />
- ReactNativeHapticFeedback.trigger("soft")}
- accessibilityLabel="soft"
- accessibilityHint="soft"
- />
- ReactNativeHapticFeedback.trigger("notificationSuccess")}
- accessibilityLabel="notificationSuccess"
- accessibilityHint="notificationSuccess"
- />
- ReactNativeHapticFeedback.trigger("notificationWarning")}
- accessibilityLabel="notificationWarning"
- accessibilityHint="notificationWarning"
- />
- ReactNativeHapticFeedback.trigger("notificationError")}
- accessibilityLabel="notificationError"
- accessibilityHint="notificationError"
- />
+
+ Feedback
+
+ {hapticFeedbacks.map(feedback => (
+ ReactNativeHapticFeedback.trigger(feedback)}
+ accessibilityLabel={feedback}
+ />
+ ))}
+
+
);
};
diff --git a/ts/features/design-system/core/DSIcons.tsx b/ts/features/design-system/core/DSIcons.tsx
index c1c0f9e6ce4..9b235b52602 100644
--- a/ts/features/design-system/core/DSIcons.tsx
+++ b/ts/features/design-system/core/DSIcons.tsx
@@ -1,27 +1,25 @@
-import * as React from "react";
-import { View, StyleSheet } from "react-native";
import {
- Icon,
- IOIcons,
- IONavIcons,
+ H4,
+ HStack,
IOBiometricIcons,
IOCategoryIcons,
- IOProductIcons,
- IOIconsNew,
- SVGIconProps,
IOIconSizeScale,
+ IOIcons,
+ IOIconsNew,
+ IONavIcons,
+ IOProductIcons,
IOSystemIcons,
- IOColors,
+ Icon,
IconContained,
- HSpacer,
- IOStyles,
+ SVGIconProps,
+ VStack,
useIOTheme
} from "@pagopa/io-app-design-system";
+import * as React from "react";
+import { StyleSheet, View } from "react-native";
+import { DSComponentViewerBox } from "../components/DSComponentViewerBox";
import { DSIconViewerBox, iconItemGutter } from "../components/DSIconViewerBox";
-import { H2 } from "../../../components/core/typography/H2";
-import { H3 } from "../../../components/core/typography/H3";
import { DesignSystemScreen } from "../components/DesignSystemScreen";
-import { DSComponentViewerBox } from "../components/DSComponentViewerBox";
// Filter the main object, removing already displayed icons in the other sets
type IconSubsetObject = Record<
@@ -56,13 +54,6 @@ const filteredIOIcons = filterIconSet(
// Once we defined a general set of icon sizes,
// just replace the following array:
const IOIconSizes: Array = [16, 24, 32, 48];
-const IOIconColors = [
- "grey-200",
- "grey-450",
- "grey-650",
- "blueIO-500",
- "error-500"
-];
const styles = StyleSheet.create({
itemsWrapper: {
@@ -71,205 +62,178 @@ const styles = StyleSheet.create({
justifyContent: "flex-start",
marginLeft: (iconItemGutter / 2) * -1,
marginRight: (iconItemGutter / 2) * -1,
- marginBottom: 16
+ rowGap: 16
}
});
+const sectionMargin = 40;
+const sectionTitleMargin = 16;
+
export const DSIcons = () => {
const theme = useIOTheme();
+
return (
-
- {Object.entries(filteredIOIcons).map(([iconItemName]) => (
-
-
- Navigation
-
-
- {Object.entries(IONavIcons).map(([iconItemName]) => (
-
+ {/* General Set */}
+
+ {Object.entries(filteredIOIcons).map(([iconItemName]) => (
+
+
+ {/* Navigation */}
+
+ Navigation
+
+ {Object.entries(IONavIcons).map(([iconItemName]) => (
+
-
- Biometric
-
-
- {Object.entries(IOBiometricIcons).map(([iconItemName]) => (
-
+
+
+ {/* Biometric */}
+
+ Biometric
+
+ {Object.entries(IOBiometricIcons).map(([iconItemName]) => (
+
-
- Categories
-
-
- {Object.entries(IOCategoryIcons).map(([iconItemName]) => (
-
+
+
+ {/* Categories */}
+
+ Categories
+
+ {Object.entries(IOCategoryIcons).map(([iconItemName]) => (
+
-
- Product
-
-
- {Object.entries(IOProductIcons).map(([iconItemName]) => (
-
+
+
+ {/* Product */}
+
+ Product
+
+ {Object.entries(IOProductIcons).map(([iconItemName]) => (
+
-
- System
-
-
- {Object.entries(IOSystemIcons).map(([iconItemName]) => (
-
+
+
+ {/* System */}
+
+ System
+
+ {Object.entries(IOSystemIcons).map(([iconItemName]) => (
+
+ ))}
+
+
-
- IconContained
-
-
-
-
-
+ {/* IconContained */}
+
+ IconContained
+
+
+
+
+
-
- Sizes
-
-
- {/* If you want to render another icon in different sizes,
- just change the name below */}
- {IOIconSizes.map(size => (
-
+ Sizes
+
+ {IOIconSizes.map(size => (
+
-
- Colors
-
-
- {IOIconColors.map(color => (
-
+ ))}
+
+
+
);
};
diff --git a/ts/features/design-system/core/DSLayout.tsx b/ts/features/design-system/core/DSLayout.tsx
index 89a0003b187..9c5d9896d05 100644
--- a/ts/features/design-system/core/DSLayout.tsx
+++ b/ts/features/design-system/core/DSLayout.tsx
@@ -1,27 +1,43 @@
-import * as React from "react";
-import { View } from "react-native";
import {
- IOColors,
+ ContentWrapper,
Divider,
- HSpacer,
- VSpacer,
+ HStack,
IOAppMargin,
+ IOColors,
IOSpacer,
- ContentWrapper,
+ VStack,
useIOTheme
} from "@pagopa/io-app-design-system";
-import { DesignSystemScreen } from "../components/DesignSystemScreen";
-import { DSSpacerViewerBox } from "../components/DSSpacerViewerBox";
+import * as React from "react";
+import { View } from "react-native";
import { Body } from "../../../components/core/typography/Body";
-import { LabelSmall } from "../../../components/core/typography/LabelSmall";
-import { H3 } from "../../../components/core/typography/H3";
import { H1 } from "../../../components/core/typography/H1";
+import { H3 } from "../../../components/core/typography/H3";
+import { LabelSmall } from "../../../components/core/typography/LabelSmall";
+import { DSComponentViewerBox } from "../components/DSComponentViewerBox";
+import { DSSpacerViewerBox } from "../components/DSSpacerViewerBox";
+import { DesignSystemScreen } from "../components/DesignSystemScreen";
export const DSLayout = () => {
- const theme = useIOTheme();
+ const sectionMargin = 40;
return (
+
+
+
+ );
+};
+
+const Grid = () => {
+ const theme = useIOTheme();
+
+ return (
+
{
ContentWrapper
- {IOAppMargin.map((value, i, arr) => (
-
+
+
+ {IOAppMargin.map((value, i) => (
{
- {i !== arr.length - 1 &&
-
- Spacing
-
+ return (
+
+
+ Spacing
+
-
- VSpacer
-
+
+ {/* VSPACER */}
+
+
+ VSpacer
+
- {/* Vertical */}
- {IOSpacer.map((spacerEntry, i, arr) => (
-
-
- ))}
+ {/* Vertical */}
+
+ {IOSpacer.map((spacerEntry, i) => (
+
+
-
+
+ HSpacer
+
-
+ {IOSpacer.map((spacerEntry, i) => (
+
+
+
+ );
+};
+
+const Stack = () => {
+ const theme = useIOTheme();
+
+ return (
+
+
+ Stack
+
+
+
+
+
+ VStack
+
+
+
+
+
+
+
+
+
+
+ {/*
+
+
+
+
+ */}
+
+
+
+
+
+ HStack
+
+
+
+
+
+
+
+
+
+ {/*
+
+
+
+
+ */}
+
+
+
+ );
+};
+
+const VStackBlocks = () => {
+ const theme = useIOTheme();
+
+ return (
+ <>
+ {[...Array(3)].map((_el, i) => (
+
- HSpacer
-
+ {`Block n.${i + 1}`}
+
+ ))}
+
+
+ Different height
+
+
+
+ );
+};
+
+const HStackBlocks = () => {
+ const theme = useIOTheme();
- {/* Horizontal */}
-
- {IOSpacer.map((spacerEntry, i, arr) => (
-
-
- ))}
+ return (
+ <>
+ {[...Array(3)].map((_el, i) => (
+
+ {`${
+ i + 1
+ }`}
+ ))}
+
+
+ Growing block
+
+
+
+ );
+};
-
+const DividerRow = () => {
+ const theme = useIOTheme();
+ return (
+ <>
{
-
- Block Buttons (not NativeBase)
-
- {renderBlockButtons()}
+
+
+ Block Buttons
+ {renderBlockButtons()}
+
-
- Specific buttons
-
- {renderSpecificButtons()}
+
+ Specific buttons
+ {renderSpecificButtons()}
+
+
);
};
const renderBlockButtons = () => (
- <>
+
(
}
}}
/>
- (
}
}}
/>
- (
}
}}
/>
- (
}
}}
/>
-
+
);
const renderSpecificButtons = () => (
- <>
+
(
organizationFiscalCode={"46545" as OrganizationFiscalCode}
/>
-
-
+
);
diff --git a/ts/features/design-system/core/DSLegacyListItems.tsx b/ts/features/design-system/core/DSLegacyListItems.tsx
index c2c58d2f4ee..2cfc755a78f 100644
--- a/ts/features/design-system/core/DSLegacyListItems.tsx
+++ b/ts/features/design-system/core/DSLegacyListItems.tsx
@@ -1,151 +1,165 @@
-import { Icon } from "@pagopa/io-app-design-system";
+import {
+ Divider,
+ H4,
+ Icon,
+ VStack,
+ useIOTheme
+} from "@pagopa/io-app-design-system";
import * as React from "react";
+import { Alert } from "react-native";
import DetailedlistItemComponent from "../../../components/DetailedlistItemComponent";
-import { H2 } from "../../../components/core/typography/H2";
import ListItemComponent from "../../../components/screens/ListItemComponent";
import OrderOption from "../../bonus/cgn/components/merchants/search/OrderOption";
import ZendeskItemPermissionComponent from "../../zendesk/components/ZendeskItemPermissionComponent";
import { DSComponentViewerBox } from "../components/DSComponentViewerBox";
import { DesignSystemScreen } from "../components/DesignSystemScreen";
-export const DSLegacyListItems = () => (
-
-
- alert("Action triggered")}
- />
-
-
- alert("Action triggered")}
- />
-
-
- alert("Action triggered")}
- />
-
-
- alert("Action triggered")}
- hideSeparator={true}
- />
-
-
- alert("Action triggered")}
- />
-
-
- alert("Action triggered")}
- />
-
+const onListItemPress = () => Alert.alert("Action triggered");
-
- alert("Action triggered")}
- />
-
-
- alert("Action triggered")}
- />
-
-
- alert("Action triggered")}
- />
-
-
- alert("Action triggered")}
- />
-
-
- alert("Action triggered")}
- />
-
+const componentMargin = 24;
+const sectionTitleMargin = 16;
+const blockMargin = 48;
-
- Derivated from ListItem (NativeBase)
-
-
- alert("Action triggered")}
- />
- alert("Action triggered")}
- />
-
+export const DSLegacyListItems = () => {
+ const theme = useIOTheme();
-
-
-
- Misc
-
-
- alert("Action triggered")}
- accessible={true}
- accessibilityRole={"button"}
- accessibilityLabel={"Accessibility Label"}
- />
-
-
-);
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Derivated from ListItem (NativeBase)
+
+
+
+
+
+
+
+
+
+
+ Misc
+
+
+
+
+
+ );
+};
diff --git a/ts/features/design-system/core/DSLegacyPictograms.tsx b/ts/features/design-system/core/DSLegacyPictograms.tsx
index a24e04cd1d4..7b8732e5c5e 100644
--- a/ts/features/design-system/core/DSLegacyPictograms.tsx
+++ b/ts/features/design-system/core/DSLegacyPictograms.tsx
@@ -1,13 +1,14 @@
import {
+ H4,
IOColors,
IOPictograms,
IOPictogramsLegacy,
Pictogram,
+ VStack,
useIOTheme
} from "@pagopa/io-app-design-system";
import * as React from "react";
import { StyleSheet, View } from "react-native";
-import { H2 } from "../../../components/core/typography/H2";
import {
DSAssetViewerBox,
assetItemGutter,
@@ -37,7 +38,6 @@ import Baloons from "../../../../img/messages/empty-due-date-list-icon.png";
import Heart from "../../../../img/features/uaDonations/heart.svg";
/* Sections */
import { DesignSystemScreen } from "../components/DesignSystemScreen";
-import { H3 } from "../../../components/core/typography/H3";
const styles = StyleSheet.create({
itemsWrapper: {
@@ -46,144 +46,146 @@ const styles = StyleSheet.create({
justifyContent: "flex-start",
marginLeft: (assetItemGutter / 2) * -1,
marginRight: (assetItemGutter / 2) * -1,
- marginBottom: 24
+ rowGap: 16
}
});
+const sectionTitleMargin = 16;
+const blockMargin = 48;
+
export const DSLegacyPictograms = () => {
const theme = useIOTheme();
return (
-
- Vector
-
-
-
- {Object.entries(IOPictogramsLegacy).map(([pictogramItemName]) => (
-
+
+
+ Vector
+ {renderVectorPictograms()}
+
-
- Raster
-
-
-
+ Raster
+ {renderRasterPictograms()}
+
-
-
- EU Covid Certificate
-
-
-
+
+ EU Covid Certificate
+ {renderEUCovidCertificatePictograms()}
+
+
);
};
+
+const renderVectorPictograms = () => (
+
+ {Object.entries(IOPictogramsLegacy).map(([pictogramItemName]) => (
+
+);
+
+const renderRasterPictograms = () => (
+
+
+);
+
+const renderEUCovidCertificatePictograms = () => (
+
+
+);
diff --git a/ts/features/design-system/core/DSLegacyTypography.tsx b/ts/features/design-system/core/DSLegacyTypography.tsx
new file mode 100644
index 00000000000..cf7fa49b656
--- /dev/null
+++ b/ts/features/design-system/core/DSLegacyTypography.tsx
@@ -0,0 +1,165 @@
+import { HStack, IOColors, VStack } from "@pagopa/io-app-design-system";
+import * as React from "react";
+import { Alert, View } from "react-native";
+import { Body as LegacyBody } from "../../../components/core/typography/Body";
+import { H1 as LegacyH1 } from "../../../components/core/typography/H1";
+import { H2 as LegacyH2 } from "../../../components/core/typography/H2";
+import { H3 as LegacyH3 } from "../../../components/core/typography/H3";
+import { H4 as LegacyH4 } from "../../../components/core/typography/H4";
+import { H5 as LegacyH5 } from "../../../components/core/typography/H5";
+import { Label as LegacyLabel } from "../../../components/core/typography/Label";
+import { LabelSmall as LegacyLabelSmall } from "../../../components/core/typography/LabelSmall";
+import { Link as LegacyLink } from "../../../components/core/typography/Link";
+import { Monospace as LegacyMonospace } from "../../../components/core/typography/Monospace";
+import { DesignSystemScreen } from "../components/DesignSystemScreen";
+
+export const DSLegacyTypography = () => (
+
+
+ Alert.alert("onPress link!")}>Link
+ MonoSpace
+
+
+);
+
+const getTitle = (element: string) => `Heading ${element}`;
+const getLongerTitle = (element: string) =>
+ `Very loooong looong title set with Heading ${element}`;
+
+const typeSpecimenMargin = 8;
+
+const LegacyH1Row = () => (
+
+ {getTitle("H1")}
+ {getLongerTitle("H1")}
+
+);
+
+const LegacyH2Row = () => (
+
+ {getTitle("H2")}
+ {getLongerTitle("H2")}
+ {getTitle("H2 Semibold")}
+
+);
+
+const LegacyH3Row = () => (
+
+
+ Header H3 SB
+ Header H3 SB
+
+ Header H3 SB
+
+
+
+
+
+ Header H3 Bold
+
+
+
+
+);
+
+const LegacyH4Row = () => (
+
+
+ {/* Bold */}
+ Header H4 Bold
+ Header H4 Bold
+
+ Header H4 Bold
+
+
+
+ {/* Semibold */}
+
+
+ Header H4 Semibold
+
+
+
+
+ {/* Regular */}
+
+ Header H4
+
+
+ Header H4
+
+
+ Header H4
+
+
+
+ Header H4
+
+
+
+
+);
+
+const LegacyH5Row = () => (
+
+
+ Header H5 SB
+ Header H5 SB
+ Header H5 SB
+
+ Header H5 SB
+
+
+
+ Header H5
+
+ Header H5
+
+
+ Header H5
+
+
+
+);
+
+const LegacyBodyRow = () => (
+
+ Body
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a felis
+ congue, congue leo sit amet, semper ex. Nulla consectetur non quam vel
+ porttitor. Vivamus ac ex non nunc pellentesque molestie. Aliquam id lorem
+ aliquam, aliquam massa eget, commodo erat. Maecenas finibus dui massa,
+ eget pharetra mauris posuere semper.
+
+
+);
+
+const LegacyLabelSmallRow = () => (
+
+ Label small
+ Label small
+ Label small
+
+ Label small
+
+
+);
+
+const LegacyLabelRow = () => (
+
+ Label
+ Label
+
+ Label
+
+
+);
diff --git a/ts/features/design-system/core/DSListItems.tsx b/ts/features/design-system/core/DSListItems.tsx
index 319ec5ae6ec..bdf0f05500a 100644
--- a/ts/features/design-system/core/DSListItems.tsx
+++ b/ts/features/design-system/core/DSListItems.tsx
@@ -3,6 +3,7 @@ import * as React from "react";
import {
Divider,
+ H4,
Icon,
ListItemAction,
ListItemHeader,
@@ -13,18 +14,17 @@ import {
ListItemTransaction,
ListItemTransactionLogo,
ListItemTransactionStatusWithBadge,
- VSpacer,
+ VStack,
useIOTheme
} from "@pagopa/io-app-design-system";
-import { Alert, View } from "react-native";
-import { H2 } from "../../../components/core/typography/H2";
+import { Alert } from "react-native";
import { DSComponentViewerBox } from "../components/DSComponentViewerBox";
-import CgnMerchantDiscountItem from "../../bonus/cgn/components/merchants/CgnMerchantsDiscountItem";
-import { BankPreviewItem } from "../../wallet/onboarding/bancomat/components/BankPreviewItem";
import { ProductCategoryEnum } from "../../../../definitions/cgn/merchants/ProductCategory";
+import CgnMerchantDiscountItem from "../../bonus/cgn/components/merchants/CgnMerchantsDiscountItem";
import { getBadgeTextByTransactionStatus } from "../../payments/common/utils";
+import { BankPreviewItem } from "../../wallet/onboarding/bancomat/components/BankPreviewItem";
import { DesignSystemScreen } from "../components/DesignSystemScreen";
const onButtonPress = () => {
@@ -35,157 +35,138 @@ const onCopyButtonPress = () => {
Alert.alert("Copied!", "Value copied");
};
+const sectionTitleMargin = 16;
+const sectionMargin = 48;
+const componentMargin = 32;
+
export const DSListItems = () => {
const theme = useIOTheme();
+
return (
-
- ListItemNav
-
- {renderListItemNav()}
-
-
- ListItemInfoCopy
-
- {renderListItemInfoCopy()}
-
-
- ListItemInfo
-
- {renderListItemInfo()}
-
-
- ListItemHeader
-
- {renderListItemHeader()}
-
-
- ListItemAction
-
- {renderListItemAction()}
-
-
- ListItemTransaction
-
- {renderListItemTransaction()}
-
-
- Specific
-
-
- alert("Action triggered")}
- />
-
-
-
+
+
+ ListItemNav
+ {renderListItemNav()}
+
+
+
+ ListItemInfoCopy
+ {renderListItemInfoCopy()}
+
+
+
+ ListItemInfo
+ {renderListItemInfo()}
+
+
+
+ ListItemHeader
+ {renderListItemHeader()}
+
+
+
+ ListItemAction
+ {renderListItemAction()}
+
+
+
+ ListItemTransaction
+ {renderListItemTransaction()}
+
+
+
+ Specific
+
+
+
+
+
+
+
+
);
};
+
const renderListItemNav = () => (
- <>
+
-
- {
- alert("Action triggered");
- }}
- accessibilityLabel="Empty just for testing purposes"
- topElement={{
- badgeProps: {
- text: "Novità",
- variant: "blue"
- }
- }}
- />
-
+ {
+ alert("Action triggered");
+ }}
+ accessibilityLabel="Empty just for testing purposes"
+ topElement={{
+ badgeProps: {
+ text: "Novità",
+ variant: "blue"
+ }
+ }}
+ />
(
/>
-
-
-
-
-);
-
-const renderListItemInfoCopy = () => (
-
-
-
+
+
+);
+
+const renderListItemInfoCopy = () => (
+
+
);
const renderListItemAction = () => (
- <>
+
(
accessibilityLabel="Empty just for testing purposes"
/>
-
+
);
const renderListItemInfo = () => (
-
-
+
);
/* LIST ITEM HEADER */
const renderListItemHeader = () => (
- <>
+
(
}}
/>
-
+
);
/* LIST ITEM TRANSACTION */
@@ -533,8 +508,8 @@ const transactionStatusArray: Array = [
];
const renderListItemTransaction = () => (
-
-
+
+
(
isLoading={true}
onPress={onButtonPress}
/>
+
-
{transactionStatusArray.map(
- ({ status, asset }: mockTransactionStatusData) => (
+ ({ status, asset }: mockTransactionStatusData, i) => (
(
badgeText={getBadgeTextByTransactionStatus(status)}
onPress={onButtonPress}
/>
-
)
)}
+
+
(
hasChevronRight={true}
onPress={onButtonPress}
/>
+
-
+
+
(
onPress={onButtonPress}
transactionStatus="success"
/>
+
-
(
transactionAmount=""
onPress={onButtonPress}
/>
-
-
-
+
+
);
diff --git a/ts/features/design-system/core/DSLoaders.tsx b/ts/features/design-system/core/DSLoaders.tsx
index 2dda53d782b..cb309ae29a4 100644
--- a/ts/features/design-system/core/DSLoaders.tsx
+++ b/ts/features/design-system/core/DSLoaders.tsx
@@ -1,21 +1,21 @@
import {
- H3,
+ H4,
IOColors,
LoadingSpinner,
Pictogram,
ProgressLoader,
- VSpacer,
+ VStack,
hexToRgba,
useIOTheme
} from "@pagopa/io-app-design-system";
import * as React from "react";
import { StyleSheet, View } from "react-native";
import ActivityIndicator from "../../../components/ui/ActivityIndicator";
+import { CircularProgress } from "../../../components/ui/CircularProgress";
import { LoadingIndicator } from "../../../components/ui/LoadingIndicator";
import I18n from "../../../i18n";
import { DSComponentViewerBox } from "../components/DSComponentViewerBox";
import { DesignSystemScreen } from "../components/DesignSystemScreen";
-import { CircularProgress } from "../../../components/ui/CircularProgress";
// Image dimension
const imgDimension = 188;
@@ -30,9 +30,6 @@ const styles = StyleSheet.create({
padding: 16,
overflow: "hidden"
},
- sectionTitle: {
- marginBottom: 16
- },
imgWrapper: {
height: imgDimension + 30,
width: imgDimension + 30,
@@ -83,7 +80,15 @@ const ProgressLoaderViewerBox = () => {
}, []);
return (
-
+
@@ -109,76 +114,71 @@ const CircularProgressViewerBox = () => (
);
+const sectionMargin = 40;
+const sectionTitleMargin = 16;
+
export const DSLoaders = () => {
const theme = useIOTheme();
return (
- {/* Present in the main Messages screen */}
-
- Activity Indicator
-
-
-
-
-
- Loading Indicator
-
-
-
-
-
- Loading Spinner
-
-
-
-
-
-
-
-
- ProgressLoader
- CircularProgress (CIE Card Reading)
-
+
+ Activity Indicator
+
+
+
+
+
+ Loading Indicator
+
+
+
+
+
+ Loading Spinner
+
+
+
+
+
+
+
+
+
+
+
+ ProgressLoader
+
+
+
+ {/* CIE Card Reading */}
+ CircularProgress
+
+
);
};
diff --git a/ts/features/design-system/core/DSLogos.tsx b/ts/features/design-system/core/DSLogos.tsx
index c4de36eef14..b6ba74d7e44 100644
--- a/ts/features/design-system/core/DSLogos.tsx
+++ b/ts/features/design-system/core/DSLogos.tsx
@@ -1,7 +1,9 @@
import {
Avatar,
AvatarSearch,
+ H4,
HSpacer,
+ HStack,
IOColors,
IOLogoPaymentCardType,
IOLogoPaymentExtType,
@@ -14,12 +16,12 @@ import {
LogoPaymentCard,
LogoPaymentExt,
VSpacer,
+ VStack,
hexToRgba,
useIOTheme
} from "@pagopa/io-app-design-system";
import * as React from "react";
import { ScrollView, StyleSheet, View } from "react-native";
-import { H2 } from "../../../components/core/typography/H2";
import { LogoPaymentExtended } from "../../../components/ui/LogoPaymentExtended";
import { DSComponentViewerBox } from "../components/DSComponentViewerBox";
import {
@@ -33,9 +35,9 @@ const styles = StyleSheet.create({
flexDirection: "row",
flexWrap: "wrap",
justifyContent: "flex-start",
- marginBottom: 16,
marginLeft: (logoItemGutter / 2) * -1,
- marginRight: (logoItemGutter / 2) * -1
+ marginRight: (logoItemGutter / 2) * -1,
+ rowGap: 16
},
horizontalScroll: {
marginLeft: -IOVisualCostants.appMarginDefault,
@@ -44,63 +46,40 @@ const styles = StyleSheet.create({
}
});
+const sectionMargin = 40;
+const sectionTitleMargin = 16;
+
export const DSLogos = () => {
const theme = useIOTheme();
return (
-
- Avatar
-
- {renderAvatar()}
-
-
- Payment Networks (Small)
-
- {renderPaymentLogosSmall()}
-
-
- Payment Networks (Big)
-
- {renderPaymentLogosBig()}
+
+
+ Avatar
+ {renderAvatar()}
+
-
+ Payment Networks (Small)
+ {renderPaymentLogosSmall()}
+
-
- Banks (Extended)
-
- {renderLogoPaymentExtended()}
+
+ Payment Networks (Big)
+ {renderPaymentLogosBig()}
+
-
+ Banks (Extended)
+ {renderLogoPaymentExtended()}
+
-
- Payment Networks (Card)
-
- {renderPaymentLogosCard()}
+
+ Payment Networks (Card)
+ {renderPaymentLogosCard()}
+
+
);
};
@@ -146,16 +125,17 @@ const organizationsURIs = [
];
const renderAvatar = () => (
- <>
+
- {organizationsURIs.map(({ imageSource }, i) => (
-
+
+ {organizationsURIs.map(({ imageSource }, i) => (
(
: undefined
}
/>
- {i < organizationsURIs.length - 1 &&
- ))}
+ ))}
+
+
- {organizationsURIs.map(({ imageSource }, i) => (
-
+
+ {organizationsURIs.map(({ imageSource }, i) => (
(
: undefined
}
/>
- {i < organizationsURIs.length - 1 &&
- ))}
+ ))}
+
+
- {organizationsURIs.map(({ imageSource }, i) => (
-
+
+ {organizationsURIs.map(({ imageSource }, i) => (
(
: []
}
/>
- {i < organizationsURIs.length - 1 &&
- ))}
+ ))}
+
-
+
);
const renderPaymentLogosSmall = () => (
@@ -255,7 +236,7 @@ const renderPaymentLogosBig = () => (
);
const renderLogoPaymentExtended = () => (
- <>
+
(
dimensions={{ height: 33, width: 150 }}
/>
-
+
);
const renderPaymentLogosCard = () => (
-
+
{Object.entries(IOPaymentCardLogos).map(([logoItemName]) => (
(
}
/>
))}
- (
borderWidth: 1
}}
>
-
+
-
+
);
diff --git a/ts/features/design-system/core/DSModules.tsx b/ts/features/design-system/core/DSModules.tsx
index 0905d654006..3802945d24e 100644
--- a/ts/features/design-system/core/DSModules.tsx
+++ b/ts/features/design-system/core/DSModules.tsx
@@ -1,25 +1,25 @@
-import * as React from "react";
-import { Alert, View, ImageSourcePropType } from "react-native";
import {
- ModuleSummary,
+ H4,
ModuleAttachment,
ModuleCheckout,
ModuleCredential,
ModuleIDP,
ModuleNavigation,
ModulePaymentNotice,
+ ModuleSummary,
PaymentNoticeStatus,
- VSpacer,
+ VStack,
useIOTheme
} from "@pagopa/io-app-design-system";
+import * as React from "react";
+import { Alert, ImageSourcePropType } from "react-native";
+import CgnLogo from "../../../../img/bonus/cgn/cgn_logo.png";
+import { useIOSelector } from "../../../store/hooks";
+import { isDesignSystemEnabledSelector } from "../../../store/reducers/persistedPreferences";
+import { LegacyModuleAttachment } from "../../messages/components/MessageDetail/LegacyModuleAttachment";
import { getBadgeTextByPaymentNoticeStatus } from "../../messages/utils/strings";
-import { H2 } from "../../../components/core/typography/H2";
import { DSComponentViewerBox } from "../components/DSComponentViewerBox";
import { DesignSystemScreen } from "../components/DesignSystemScreen";
-import { LegacyModuleAttachment } from "../../messages/components/MessageDetail/LegacyModuleAttachment";
-import { useIOSelector } from "../../../store/hooks";
-import { isDesignSystemEnabledSelector } from "../../../store/reducers/persistedPreferences";
-import CgnLogo from "../../../../img/bonus/cgn/cgn_logo.png";
const onButtonPress = () => {
Alert.alert("Alert", "Action triggered");
@@ -38,91 +38,58 @@ const noticeStatusArray: Array = [
"canceled"
];
+const sectionTitleMargin = 16;
+const sectionMargin = 48;
+const componentMargin = 24;
+const componentInnerMargin = 8;
+
export const DSModules = () => {
const isDesignSystemEnabled = useIOSelector(isDesignSystemEnabledSelector);
const theme = useIOTheme();
return (
-
- ModuleAttachment
-
- {renderModuleAttachment(isDesignSystemEnabled)}
-
-
- ModulePaymentNotice
-
- {renderModulePaymentNotice()}
-
-
- ModuleCheckout
-
- {renderModuleCheckout()}
-
-
+
+ ModuleAttachment
+ {renderModuleAttachment(isDesignSystemEnabled)}
+
-
- ModuleCredential
-
- {renderModuleCredential()}
+
+ ModulePaymentNotice
+ {renderModulePaymentNotice()}
+
-
+ ModuleCheckout
+ {renderModuleCheckout()}
+
-
- ModuleNavigation
-
- {renderModuleNavigation()}
+
+ ModuleCredential
+ {renderModuleCredential()}
+
-
+ ModuleNavigation
+ {renderModuleNavigation()}
+
-
- ModuleSummary
-
- {renderModuleSummary()}
+
+ ModuleSummary
+ {renderModuleSummary()}
+
-
- ModuleIDP
-
- {renderModuleIDP()}
+
+ ModuleIDP
+ {renderModuleIDP()}
+
+
);
};
const renderModuleAttachment = (isDesignSystemEnabled: boolean) => (
- <>
+
{isDesignSystemEnabled ? (
(
)}
- {isDesignSystemEnabled ? (
-
+ {isDesignSystemEnabled ? (
+
{isDesignSystemEnabled ? (
@@ -216,11 +185,11 @@ const renderModuleAttachment = (isDesignSystemEnabled: boolean) => (
/>
)}
-
+
);
const renderModulePaymentNotice = () => (
- <>
+
(
/>
- {noticeStatusArray.map(
- (noticeStatus: PaymentNoticeStatusWithoutDefault, index: number) => (
-
+
+ {noticeStatusArray.map(
+ (noticeStatus: PaymentNoticeStatusWithoutDefault) => (
- )
- )}
+ )
+ )}
+
-
(
onPress={onButtonPress}
/>
-
+
);
const renderModuleCheckout = () => (
- <>
+
@@ -325,14 +293,11 @@ const renderModuleCheckout = () => (
onPress={onButtonPress}
/>
-
-
-
+
);
const renderModuleSummary = () => (
- <>
+
(
/>
-
-
+
(
onPress={onButtonPress}
/>
-
+
);
const mockIDPProviderItem = {
@@ -368,46 +331,43 @@ const mockIDPProviderItem = {
};
const renderModuleIDP = () => (
- <>
+
-
-
+
-
-
+
-
-
+
-
+
);
const renderModuleCredential = () => (
- <>
+
+
+
(
isFetching={true}
/>
-
-
-
-
-
+
);
const renderModuleNavigation = () => (
- <>
+
+
+
(
}}
/>
-
-
-
+
);
diff --git a/ts/features/design-system/core/DSOTPInput.tsx b/ts/features/design-system/core/DSOTPInput.tsx
index b78ff28c3fe..67c3f947b2c 100644
--- a/ts/features/design-system/core/DSOTPInput.tsx
+++ b/ts/features/design-system/core/DSOTPInput.tsx
@@ -1,18 +1,20 @@
-import * as React from "react";
-import { useHeaderHeight } from "@react-navigation/elements";
-import { KeyboardAvoidingView, Platform, ScrollView, View } from "react-native";
import {
- H5,
- IOStyles,
- VSpacer,
- OTPInput,
- LabelSmall,
+ Body,
+ ButtonOutline,
ButtonSolid,
ContentWrapper,
- ButtonOutline,
- H3
+ H4,
+ H5,
+ IOVisualCostants,
+ OTPInput,
+ VStack,
+ useIOTheme
} from "@pagopa/io-app-design-system";
-import { useState } from "react";
+import { useHeaderHeight } from "@react-navigation/elements";
+import * as React from "react";
+import { useCallback, useMemo, useRef, useState } from "react";
+import { KeyboardAvoidingView, Platform, ScrollView, View } from "react-native";
+import { useScreenEndMargin } from "../../../hooks/useScreenEndMargin";
const OTP_LENGTH = 8;
const OTP_COMPARE = "12345678";
@@ -29,20 +31,20 @@ const OTPWrapper = ({
autoFocus = false
}: WrapperProps) => {
const [value, setValue] = useState("");
- const onValueChange = React.useCallback((v: string) => {
+ const onValueChange = useCallback((v: string) => {
if (v.length <= OTP_LENGTH) {
setValue(v);
}
}, []);
- const onValidate = React.useCallback(
+ const onValidate = useCallback(
(v: string) => !validation || v === OTP_COMPARE,
[validation]
);
- return React.useMemo(
+ return useMemo(
() => (
- <>
+
setValue("")} label={"Pulisci valore"} />
-
+
),
[value, onValueChange, secret, onValidate, autoFocus]
);
@@ -82,68 +83,86 @@ const scrollVerticallyToView = (
* @returns a screen with a flexed view where you can test components
*/
export const DSOTPInput = () => {
- const scrollViewRef = React.useRef(null);
- const autofocusableOTPViewRef = React.useRef(null);
+ const theme = useIOTheme();
+
+ const scrollViewRef = useRef(null);
+ const autofocusableOTPViewRef = useRef(null);
const [showAutofocusableOTP, setShowAutofocusableOTP] = useState(false);
const headerHeight = useHeaderHeight();
const ToggleButton = showAutofocusableOTP ? ButtonSolid : ButtonOutline;
+ const { screenEndMargin } = useScreenEndMargin();
+
+ const sectionTitleMargin = 16;
+ const blockMargin = 40;
+
return (
-
+
- OTP Input
- Default
- Secret
- Validation+Secret
- Correct OTP {`${OTP_COMPARE}`}
- Autofocus
- {
- setShowAutofocusableOTP(!showAutofocusableOTP);
- setTimeout(() => {
- scrollVerticallyToView(
- scrollViewRef,
- autofocusableOTPViewRef
- );
- }, 100);
- }}
- label={`${
- showAutofocusableOTP ? "Hide" : "Show"
- } Autofocusable OTP`}
- />
-
-
- )}
+
+ OTP Input
+
+
+
+
+ Default
+
+
+
+ Secret
+
+
+
+
+
+ {"Validation + Secret"}
+
+ Correct OTP {`${OTP_COMPARE}`}
+
+
+
+
+ Autofocus
+ {
+ setShowAutofocusableOTP(!showAutofocusableOTP);
+ setTimeout(() => {
+ scrollVerticallyToView(
+ scrollViewRef,
+ autofocusableOTPViewRef
+ );
+ }, 100);
+ }}
+ label={`${
+ showAutofocusableOTP ? "Hide" : "Show"
+ } Autofocusable OTP`}
+ />
+ {showAutofocusableOTP && (
+
+
+ )}
+
+
diff --git a/ts/features/design-system/core/DSPictograms.tsx b/ts/features/design-system/core/DSPictograms.tsx
index cff0963d0cf..eabbf45e30c 100644
--- a/ts/features/design-system/core/DSPictograms.tsx
+++ b/ts/features/design-system/core/DSPictograms.tsx
@@ -1,4 +1,5 @@
import {
+ H4,
HSpacer,
IOColors,
IOPictograms,
@@ -8,12 +9,12 @@ import {
Pictogram,
PictogramBleed,
SVGPictogramProps,
+ VStack,
hexToRgba,
useIOTheme
} from "@pagopa/io-app-design-system";
import * as React from "react";
import { StyleSheet, View } from "react-native";
-import { H2 } from "../../../components/core/typography/H2";
import {
DSAssetViewerBox,
assetItemGutter
@@ -28,10 +29,11 @@ const styles = StyleSheet.create({
justifyContent: "flex-start",
marginLeft: (assetItemGutter / 2) * -1,
marginRight: (assetItemGutter / 2) * -1,
- marginBottom: 24
+ rowGap: 16
},
agnosticPictogramWrapper: {
- borderRadius: 8,
+ borderRadius: 24,
+ borderCurve: "continuous",
padding: 16,
alignContent: "center",
justifyContent: "center",
@@ -74,114 +76,110 @@ const filteredIOPictograms = filterPictogramSet(
IOPictograms
);
+const sectionMargin = 40;
+const sectionTitleMargin = 16;
+
export const DSPictograms = () => {
const theme = useIOTheme();
return (
-
- {Object.entries(filteredIOPictograms).map(([pictogramItemName]) => (
-
+
+ {/* General Pictogram set */}
+
+ {Object.entries(filteredIOPictograms).map(([pictogramItemName]) => (
+
-
- Bleed Pictograms
-
-
- {Object.entries(IOPictogramsBleed).map(([pictogramItemName]) => (
-
+ Bleed
+
+ {Object.entries(IOPictogramsBleed).map(([pictogramItemName]) => (
+
+ ))}
+
+
-
- Object Pictograms
-
-
- {Object.entries(IOPictogramsObject).map(([pictogramItemName]) => (
-
+ Objects
+
+ {Object.entries(IOPictogramsObject).map(([pictogramItemName]) => (
+
+ ))}
+
+
-
- Color mode agnostic
-
-
-
-
-
+ {/* Color mode agnostic */}
+
+ Color mode agnostic
+
+
+
+
+
-
-
-
-
+
+
+
+
+
+
+
);
};
diff --git a/ts/features/design-system/core/DSSelection.tsx b/ts/features/design-system/core/DSSelection.tsx
index 33d36321718..00f101b925c 100644
--- a/ts/features/design-system/core/DSSelection.tsx
+++ b/ts/features/design-system/core/DSSelection.tsx
@@ -2,6 +2,7 @@ import {
AnimatedMessageCheckbox,
CheckboxLabel,
Divider,
+ H4,
HSpacer,
IOColors,
LabelSmall,
@@ -12,65 +13,84 @@ import {
RadioGroup,
RadioItem,
SwitchLabel,
- VSpacer
+ VStack,
+ useIOTheme
} from "@pagopa/io-app-design-system";
import * as React from "react";
import { useState } from "react";
import { Alert, Text, View } from "react-native";
-import { H2 } from "../../../components/core/typography/H2";
import { IOStyles } from "../../../components/core/variables/IOStyles";
import { DSComponentViewerBox } from "../components/DSComponentViewerBox";
import { DesignSystemScreen } from "../components/DesignSystemScreen";
-export const DSSelection = () => (
-
-
- Checkbox
-
- {/* CheckboxLabel */}
- {renderCheckboxLabel()}
- {/* ListItemCheckbox */}
- {renderListItemCheckbox()}
- {/* AnimatedMessageCheckbox */}
-
- Checkbox (Messages)
-
-
- Radio
-
-
- Switch
-
- {/* Native Switch */}
-
-);
+export const DSSelection = () => {
+ const theme = useIOTheme();
+ return (
+
+
+
+ Checkbox
+
+ {/* CheckboxLabel */}
+ {renderCheckboxLabel()}
+ {/* ListItemCheckbox */}
+ {renderListItemCheckbox()}
+
+
+
+ {/* AnimatedMessageCheckbox */}
+
+ Checkbox (Messages)
+
+
+ {/* RadioListItem */}
+
+ Radio
+
+
+ {/* Switch */}
+
+ Switch
+
+ {/* Native Switch */}
+
+
+
+
+ );
+};
const renderCheckboxLabel = () => (
- <>
+
-
+
-
+
-
+
);
const renderListItemCheckbox = () => (
- <>
+
(
accessibilityLabel={""}
/>
-
+
);
// RADIO ITEMS
@@ -248,7 +268,7 @@ const RadioListItemsShowroom = () => {
);
return (
- <>
+
type="radioListItem"
@@ -274,14 +294,13 @@ const RadioListItemsShowroom = () => {
suggestReason="Perché sei già cliente"
isSuggested={true}
/>
-
-
+
);
};
@@ -306,9 +325,10 @@ const AnimatedMessageCheckboxShowroom = () => {
const renderAnimatedSwitch = () => (
-
+
);
@@ -375,7 +395,7 @@ const ListItemSwitchSample = ({
};
const ListItemSwitchShowroom = () => (
- <>
+
-
+
);
diff --git a/ts/features/design-system/core/DSStepper.tsx b/ts/features/design-system/core/DSStepper.tsx
index 99c0e07690b..6f8b66a6dc0 100644
--- a/ts/features/design-system/core/DSStepper.tsx
+++ b/ts/features/design-system/core/DSStepper.tsx
@@ -1,34 +1,33 @@
import {
- H3,
+ H4,
IOVisualCostants,
Stepper,
- VSpacer,
+ VStack,
useIOTheme
} from "@pagopa/io-app-design-system";
import * as React from "react";
import { View } from "react-native";
import { DesignSystemScreen } from "../components/DesignSystemScreen";
+const componentMargin = 24;
+const sectionTitleMargin = 16;
+
export const DSStepper = () => {
const theme = useIOTheme();
return (
-
-
- Stepper
-
-
-
-
+
+
+ Stepper
+
+
+
+
);
};
diff --git a/ts/features/design-system/core/DSTabNavigation.tsx b/ts/features/design-system/core/DSTabNavigation.tsx
index cb953469d02..1a8dbf0c2a2 100644
--- a/ts/features/design-system/core/DSTabNavigation.tsx
+++ b/ts/features/design-system/core/DSTabNavigation.tsx
@@ -1,348 +1,379 @@
/* eslint-disable @typescript-eslint/no-empty-function */
-
import * as React from "react";
-import { StyleSheet, View } from "react-native";
import {
- IOColors,
- HSpacer,
- VSpacer,
+ BodyMonospace,
ContentWrapper,
+ H4,
+ H6,
+ HStack,
+ IOColors,
TabItem,
- BodyMonospace,
- TabNavigation
+ TabNavigation,
+ VStack,
+ useIOTheme
} from "@pagopa/io-app-design-system";
+import { View } from "react-native";
import DESIGN_SYSTEM_ROUTES from "../navigation/routes";
-import { H2 } from "../../../components/core/typography/H2";
-import { H3 } from "../../../components/core/typography/H3";
import { DSComponentViewerBox } from "../components/DSComponentViewerBox";
import { DesignSystemScreen } from "../components/DesignSystemScreen";
+const tabItemMargin = 8;
+const componentMargin = 16;
+const innerBlockMargin = 24;
+const sectionTitleMargin = 16;
+const blockTitleMargin = 24;
+const blockMargin = 48;
+
+const blueBackground = IOColors["blueIO-850"];
+
+const handlePress = () => {};
+
export const DSTabNavigation = () => {
- const handlePress = () => {};
+ const theme = useIOTheme();
return (
-
- Tab Item
- Light
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Dark
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Tab Navigation
- Light
-
-
-
-
+
+
+
+ Tab Item
+
+
+
+ Light
+ {renderTabItemLight()}
+
+
+
+ Dark
+ {renderTabItemDark()}
+
+
+
+
-
+
+ Tab Navigation
+
+
+
+
+
+ Light
+
+ {renderTabNavigationLight()}
+
+
+
+
+ Dark
+
+ {renderTabNavigationDark()}
+
+
+
+
+
+
+ Tab Alignment
+
+
+
+
+
+
+ center (default)
+
+
+
+
+
+
+
+
+
+ start
+
+
+
+
+
+
+
+
+
+ end
+
+
+
+
+
+
+
+
+
+ stretch
+
+
+
+
+
+
+
+
+
+ );
+};
-
-
+const TabNavigationWithState = (props: TabNavigation) => {
+ const [index, setIndex] = React.useState(0);
-
+ {props.children}
+
+ );
+};
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+);
+
+const renderTabItemDark = () => (
+
+
+
+
-
-
-
- Dark
-
+
+
-
-
-
-
-
-
-
-
-
+
+
+
+
+
-
-
-
- Tab alignment
-
-
-
-
- {`center (default)`}
-
-
-
-
-
-
- {`start`}
-
-
-
-
-
-
- {`end`}
-
-
-
-
-
-
- {`stretch`}
-
-
-
-
-
-
- {props.children}
-
- );
-};
-
-const styles = StyleSheet.create({
- dark: {
- backgroundColor: IOColors["blueIO-850"]
- }
-});
+
+
+
+
+);
+
+const renderTabNavigationLight = () => (
+
+
+
+
+
+
+
+
+
+
+);
+
+const renderTabNavigationDark = () => (
+
+
+
+
+
+
+
+
+
+
+
+
+);
diff --git a/ts/features/design-system/core/DSTextFields.tsx b/ts/features/design-system/core/DSTextFields.tsx
index 3bc1acb2f80..083a9ad208c 100644
--- a/ts/features/design-system/core/DSTextFields.tsx
+++ b/ts/features/design-system/core/DSTextFields.tsx
@@ -1,91 +1,102 @@
import {
- H3,
H4,
TextInput,
TextInputPassword,
TextInputValidation,
- VSpacer,
+ VStack,
useIOTheme
} from "@pagopa/io-app-design-system";
import React from "react";
+import { View } from "react-native";
import { DSComponentViewerBox } from "../components/DSComponentViewerBox";
import { DesignSystemScreen } from "../components/DesignSystemScreen";
export const DSTextFields = () => {
const theme = useIOTheme();
+ const sectionTitleMargin = 16;
+ const componentMargin = 24;
+ const sectionMargin = 40;
+
return (
- Text Fields
-
- Base input
-
-
-
-
-
-
-
- value.length > 2}
- bottomMessage="Inserisci almeno 3 caratteri"
- />
-
-
-
- value.length > 2}
- bottomMessage="Inserisci almeno 3 caratteri"
- errorMessage="Troppo corto"
- />
-
-
-
-
-
- Secret input
-
-
-
- Disabled states
-
- value.length > 2}
- />
-
-
+
+ Base input
+
+
+
+
+
+
+
+
+
+ value.length > 2}
+ bottomMessage="Inserisci almeno 3 caratteri"
+ />
+
+
+
+ value.length > 2}
+ bottomMessage="Inserisci almeno 3 caratteri"
+ errorMessage="Troppo corto"
+ />
+
+
+
+
+
+
+
+
+ Secret input
+
+
+
+ Disabled states
+
+
+ value.length > 2}
+ />
+
+
+
+
);
};
diff --git a/ts/features/design-system/core/DSToastNotifications.tsx b/ts/features/design-system/core/DSToastNotifications.tsx
index 5c18f470327..c4641f3de26 100644
--- a/ts/features/design-system/core/DSToastNotifications.tsx
+++ b/ts/features/design-system/core/DSToastNotifications.tsx
@@ -1,93 +1,93 @@
import {
ButtonOutline,
- VSpacer,
+ H4,
IOToast,
- ToastNotification
+ ToastNotification,
+ VStack,
+ useIOTheme
} from "@pagopa/io-app-design-system";
import * as React from "react";
-import { H3 } from "../../../components/core/typography/H3";
import { DesignSystemScreen } from "../components/DesignSystemScreen";
-export const DSToastNotifications = () => (
-
-
- Events
-
+const sectionTitleMargin = 16;
+const sectionMargin = 40;
+const componentMargin = 8;
- IOToast.show("Hello!")}
- />
+export const DSToastNotifications = () => {
+ const theme = useIOTheme();
-
+
+
+ Events
+
+ IOToast.show("Hello!")}
+ />
+ IOToast.error("Error")}
+ />
+ IOToast.info("Info")}
+ />
+ IOToast.success("Success")}
+ />
+ IOToast.warning("Warning")}
+ />
+ IOToast.hideAll()}
+ />
+
+
- IOToast.error("Error")}
- />
-
- IOToast.info("Info")}
- />
-
- IOToast.success("Success")}
- />
-
- IOToast.warning("Warning")}
- />
-
- IOToast.hideAll()}
- />
-
-
- Component
-
-
-
-);
+
+ Component
+
+
+
+
+
+ );
+};
diff --git a/ts/features/design-system/core/DSTypography.tsx b/ts/features/design-system/core/DSTypography.tsx
index f15875e7087..27a5a8a192c 100644
--- a/ts/features/design-system/core/DSTypography.tsx
+++ b/ts/features/design-system/core/DSTypography.tsx
@@ -1,64 +1,40 @@
-import * as React from "react";
-import { Alert, StyleSheet, View } from "react-native";
import {
Body,
+ BodyMonospace,
ButtonText,
Caption,
Chip,
+ Divider,
H1,
H2,
H3,
H4,
H5,
H6,
+ HStack,
Hero,
IOColors,
Label,
- LabelSmall,
LabelLink,
- BodyMonospace,
- HSpacer,
+ LabelSmall,
+ MdH1,
+ MdH2,
+ MdH3,
+ MdH4,
+ MdH5,
+ MdH6,
VSpacer,
- useIOTheme,
- Divider
+ VStack
} from "@pagopa/io-app-design-system";
-import { Body as LegacyBody } from "../../../components/core/typography/Body";
-import { H1 as LegacyH1 } from "../../../components/core/typography/H1";
-import { H2 as LegacyH2 } from "../../../components/core/typography/H2";
-import { H3 as LegacyH3 } from "../../../components/core/typography/H3";
-import { H4 as LegacyH4 } from "../../../components/core/typography/H4";
-import { H5 as LegacyH5 } from "../../../components/core/typography/H5";
-import { Label as LegacyLabel } from "../../../components/core/typography/Label";
-import { LabelSmall as LegacyLabelSmall } from "../../../components/core/typography/LabelSmall";
-import { Link as LegacyLink } from "../../../components/core/typography/Link";
-import { Monospace as LegacyMonospace } from "../../../components/core/typography/Monospace";
+import * as React from "react";
+import { Alert, View } from "react-native";
import { DesignSystemScreen } from "../components/DesignSystemScreen";
-const styles = StyleSheet.create({
- row: {
- flexDirection: "row",
- flexWrap: "wrap"
- },
- distancedTitle: {
- marginTop: 12
- }
-});
-
-const sectionTitleMargin = 16;
-
-export const DSTypography = () => {
- const theme = useIOTheme();
-
- return (
-
-
- New typographic scale
-
+const blockMargin = 40;
+export const DSTypography = () => (
+
+
Body
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a felis
- congue, congue leo sit amet, semper ex. Nulla consectetur non quam vel
- porttitor. Vivamus ac ex non nunc pellentesque molestie. Aliquam id
- lorem aliquam, aliquam massa eget, commodo erat. Maecenas finibus dui
- massa, eget pharetra mauris posuere semper.
-
- BodyMonoSpace
- Alert.alert("onPress LabelLink!")}>
LabelLink
-
-
- Legacy typographic scale
-
- {/* Alert.alert("onPress link!")}>Link
- MonoSpace
-
- );
-};
+
+
+
+
+);
const getTitle = (element: string) => `Heading ${element}`;
const getLongerTitle = (element: string) =>
`Very loooong looong title set with Heading ${element}`;
-const LegacyH1Row = () => (
- <>
-
- {getTitle("H1")}
- {getLongerTitle("H1")}
-
-
- {getTitle("H2")}
- {getLongerTitle("H2")}
-
- {getTitle("H2 Semibold")}
-
-
-
- Header H3 SB
- Header H3 SB
-
- Header H3 SB
-
-
-
-
-
- Header H3 Bold
-
-
-
-
- {/* Bold */}
- Header H4 Bold
- Header H4 Bold
-
- Header H4 Bold
-
-
-
- {/* Semibold */}
-
-
- Header H4 Semibold
-
-
-
-
- {/* Regular */}
-
- Header H4
-
-
- Header H4
-
-
- Header H4
-
-
-
- Header H4
-
-
-
-
- Header H5 SB
- Header H5 SB
- Header H5 SB
-
- Header H5 SB
-
-
-
- Header H5
-
- Header H5
-
-
- Header H5
-
-
-
- Label small
- Label small
- Label small
-
- Label small
-
-
-
- Label
- Label
-
- Label
-
-
-
- {getTitle("Hero")}
- {getLongerTitle("Hero")}
-
-
+ {getTitle("Hero")}
+ {getLongerTitle("Hero")}
+
);
const H1Row = () => (
- <>
-
- {getTitle("H1")}
- {getLongerTitle("H1")}
-
-
+ {getTitle("H1")}
+ {getLongerTitle("H1")}
+
);
const H2Row = () => (
- <>
-
- {getTitle("H2")}
- {getLongerTitle("H2")}
-
-
+ {getTitle("H2")}
+ {getLongerTitle("H2")}
+
);
const H3Row = () => (
- <>
-
- Header H3
- Header H3
-
- Header H3
-
+
+ Header H3
+ Header H3
+
+ Header H3
-
);
const H4Row = () => (
- <>
-
- {/* Bold */}
- Header H4
- Header H4
-
- Header H4
-
+
+ Header H4
+ Header H4
+
+ Header H4
-
);
const H5Row = () => (
- <>
-
- Header H5
- Header H5
- Header H5
-
-
+ Header H5
+ Header H5
+ Header H5
+
);
const H6Row = () => (
- <>
-
- Header H6
- Header H6
- Header H6
-
-
+ Header H6
+ Header H6
+ Header H6
+
);
const ButtonTextRow = () => (
- <>
-
-
- ButtonText
-
- ButtonText
- ButtonText
+
+ ButtonText
+ ButtonText
+
+ ButtonText
-
);
const CaptionRow = () => (
- <>
-
- Caption
- Caption
- Caption
-
-
+ Caption
+ Caption
+ Caption
+
);
const ChipRow = () => (
- <>
-
- Chip
- Chip
- Chip
-
-
+ Chip
+ Chip
+ Chip
+
+);
+
+const BodyRow = () => (
+
+ Body
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a felis
+ congue, congue leo sit amet, semper ex. Nulla consectetur non quam vel
+ porttitor. Vivamus ac ex non nunc pellentesque molestie. Aliquam id lorem
+ aliquam, aliquam massa eget, commodo erat. Maecenas finibus dui massa,
+ eget pharetra mauris posuere semper.
+
+
);
const LabelSmallRow = () => (
- <>
-
- Label small
- Label small
- Label small
-
- Label small
-
+
+ Label small
+ Label small
+ Label small
+
+ Label small
-
);
const LabelRow = () => (
- <>
-
- Label
-
- Label
-
+
+ Label
+
+ Label
-
+);
+
+export const MdH1Row = () => (
+
+ {getTitle("Markdown H1")}
+ {getLongerTitle("Markdown H1")}
+
+);
+
+export const MdH2Row = () => (
+
+ {getTitle("Markdown H2")}
+ {getLongerTitle("Markdown H2")}
+
+);
+
+export const MdH3Row = () => (
+
+ {getTitle("Markdown H3")}
+ {getLongerTitle("Markdown H3")}
+
+);
+
+export const MdH4Row = () => (
+
+ {getTitle("Markdown H4")}
+ {getLongerTitle("Markdown H4")}
+
+);
+
+export const MdH5Row = () => (
+
+ {getTitle("Markdown H5")}
+ {getLongerTitle("Markdown H5")}
+
+);
+
+export const MdH6Row = () => (
+
+ {getTitle("Markdown H6")}
+ {getLongerTitle("Markdown H6")}
+
);
diff --git a/ts/features/design-system/core/DSWallet.tsx b/ts/features/design-system/core/DSWallet.tsx
index c3120c5189f..abfa49afe2b 100644
--- a/ts/features/design-system/core/DSWallet.tsx
+++ b/ts/features/design-system/core/DSWallet.tsx
@@ -1,4 +1,9 @@
-import { Banner, ListItemSwitch, VSpacer } from "@pagopa/io-app-design-system";
+import {
+ Banner,
+ ListItemSwitch,
+ VSpacer,
+ VStack
+} from "@pagopa/io-app-design-system";
import * as React from "react";
import { CredentialType } from "../../itwallet/common/utils/itwMocksUtils";
import { WalletCardsCategoryContainer } from "../../newWallet/components/WalletCardsCategoryContainer";
@@ -96,6 +101,8 @@ export const DSWallet = () => {
{} as { [category in WalletCardCategory]: ReadonlyArray }
);
+ const blockMargin = 48;
+
return (
{
value={isStacked}
onSwitchValueChange={setStacked}
/>
-
-
-
+
+
+
+
-
-
+
+
+
);
};
diff --git a/ts/features/design-system/navigation/navigator.tsx b/ts/features/design-system/navigation/navigator.tsx
index b8bb152dbf5..14aa19da9ae 100644
--- a/ts/features/design-system/navigation/navigator.tsx
+++ b/ts/features/design-system/navigation/navigator.tsx
@@ -1,6 +1,7 @@
import {
IOVisualCostants,
IconButton,
+ useIOExperimentalDesign,
useIOThemeContext
} from "@pagopa/io-app-design-system";
import { ThemeProvider, useNavigation } from "@react-navigation/native";
@@ -10,9 +11,7 @@ import {
createStackNavigator
} from "@react-navigation/stack";
import * as React from "react";
-import { useMemo } from "react";
import { Alert, Platform, View } from "react-native";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
import { makeFontStyleObject } from "../../../components/core/fonts";
import HeaderFirstLevel from "../../../components/ui/HeaderFirstLevel";
import {
@@ -39,12 +38,14 @@ import { DSHapticFeedback } from "../core/DSHapticFeedback";
import { DSHeaderFirstLevel } from "../core/DSHeaderFirstLevel";
import { DSHeaderSecondLevel } from "../core/DSHeaderSecondLevel";
import { DSHeaderSecondLevelWithSectionTitle } from "../core/DSHeaderSecondLevelWithSectionTitle";
+import { DSIOMarkdown } from "../core/DSIOMarkdown";
import { DSIOScrollView } from "../core/DSIOScrollView";
import { DSIOScrollViewScreenWithLargeHeader } from "../core/DSIOScrollViewWithLargeHeader";
import { DSIOScrollViewWithoutActions } from "../core/DSIOScrollViewWithoutActions";
import { DSIcons } from "../core/DSIcons";
import { DSLayout } from "../core/DSLayout";
import { DSLegacyAccordion } from "../core/DSLegacyAccordion";
+import { DSLegacyAdvice } from "../core/DSLegacyAdvice";
import { DSLegacyAlert } from "../core/DSLegacyAlert";
import { DSLegacyBadges } from "../core/DSLegacyBadges";
import { DSLegacyButtons } from "../core/DSLegacyButtons";
@@ -52,6 +53,7 @@ import { DSLegacyListItems } from "../core/DSLegacyListItems";
import { DSLegacyPictograms } from "../core/DSLegacyPictograms";
import { DSLegacySelection } from "../core/DSLegacySelection";
import { DSLegacyTextFields } from "../core/DSLegacyTextFields";
+import { DSLegacyTypography } from "../core/DSLegacyTypography";
import DSListItemScreen from "../core/DSListItemScreen";
import { DSListItems } from "../core/DSListItems";
import { DSLoaders } from "../core/DSLoaders";
@@ -72,8 +74,6 @@ import { DSToastNotifications } from "../core/DSToastNotifications";
import { DSTypography } from "../core/DSTypography";
import { DSWallet } from "../core/DSWallet";
import { DSWizardScreen } from "../core/DSWizardScreen";
-import { DSLegacyAdvice } from "../core/DSLegacyAdvice";
-import { DSIOMarkdown } from "../core/DSIOMarkdown";
import { DesignSystemParamsList } from "./params";
import DESIGN_SYSTEM_ROUTES from "./routes";
@@ -86,7 +86,10 @@ const RNNBackButton = () => {
return (
{
navigation.goBack();
@@ -147,23 +150,19 @@ const customModalHeaderConf: StackNavigationOptions = {
};
export const DesignSystemNavigator = () => {
+ const { isExperimental } = useIOExperimentalDesign();
const { themeType } = useIOThemeContext();
- const insets = useSafeAreaInsets();
-
- const customHeaderConf: StackNavigationOptions = useMemo(
- () => ({
- headerTitleStyle: {
- ...makeFontStyleObject("Regular", false, "ReadexPro"),
- fontSize: 14
- },
- headerTitleAlign: "center",
-
- headerStyle: { height: insets.top + IOVisualCostants.headerHeight },
- headerLeft: RNNBackButton,
- headerMode: "screen"
- }),
- [insets]
- );
+
+ const customHeaderConf: StackNavigationOptions = {
+ headerTitleStyle: {
+ ...(isExperimental
+ ? makeFontStyleObject("Regular", false, "ReadexPro")
+ : makeFontStyleObject("Semibold", false, "TitilliumSansPro")),
+ fontSize: 14
+ },
+ headerTitleAlign: "center",
+ headerLeft: RNNBackButton
+ };
return (
{
{/* LEGACY */}
+