Skip to content

Commit

Permalink
Merge branch 'main' into IOAPPX-352-add-new-titillio-typeface
Browse files Browse the repository at this point in the history
  • Loading branch information
dmnplb committed Oct 22, 2024
2 parents 01460f5 + 72467a9 commit 4872a33
Show file tree
Hide file tree
Showing 44 changed files with 1,313 additions and 170 deletions.
51 changes: 50 additions & 1 deletion CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,31 @@ All notable changes to this project will be documented in this file. Dates are d

Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).

#### [v2.0.3](https://github.com/pagopa/io-app-design-system/compare/v2.0.2...v2.0.3)

- Make the `2.x` version the official, latest release. [`#339`](https://github.com/pagopa/io-app-design-system/pull/339)
- [IOAPPX-402] Add full dark mode support to `ListItemTransaction` [`#337`](https://github.com/pagopa/io-app-design-system/pull/337)

#### [v2.0.2](https://github.com/pagopa/io-app-design-system/compare/v2.0.1...v2.0.2)

> 17 October 2024
- [IOAPPX-400] Add `testID` to `ContentWrapper` [`#336`](https://github.com/pagopa/io-app-design-system/pull/336)
- [IOAPPX-398] Add dark mode compatibility to `HeaderSecondLevel` [`#335`](https://github.com/pagopa/io-app-design-system/pull/335)
- [IOAPPX-353] Add the new `FooterActions` (from `io-app`) and `FooterActionsInline` [`#316`](https://github.com/pagopa/io-app-design-system/pull/316)
- feat: [EUDIW-54] Add new pictograms for EUDIW app [`#332`](https://github.com/pagopa/io-app-design-system/pull/332)
- chore: release 1.46.2 [`492b8a6`](https://github.com/pagopa/io-app-design-system/commit/492b8a67d452c93b47b6a3ca23a1dd3d191b267f)
- chore: release 2.0.2 [`f904e02`](https://github.com/pagopa/io-app-design-system/commit/f904e025a426d346e0e3848f5ae572487bfe5048)
- chore: release 1.47.0 [`5b3f8a6`](https://github.com/pagopa/io-app-design-system/commit/5b3f8a650fa3c7573000eb35a332d0906d0551ed)

#### [v2.0.1](https://github.com/pagopa/io-app-design-system/compare/v2.0.0...v2.0.1)

> 18 September 2024
- feat: [PE-680] Change purple badge colors [`#333`](https://github.com/pagopa/io-app-design-system/pull/333)
- feat(Icons): add iconCieLetter [`#331`](https://github.com/pagopa/io-app-design-system/pull/331)
- chore: release 1.46.1 [`de72bac`](https://github.com/pagopa/io-app-design-system/commit/de72bac13e4d20c30553609586898d87ad7dfa67)
- chore: release 2.0.1 [`6cdf523`](https://github.com/pagopa/io-app-design-system/commit/6cdf523a9f723b50d1fae1b63b1a3e821db5d226)

### [v2.0.0](https://github.com/pagopa/io-app-design-system/compare/v2.0.0-1...v2.0.0)

Expand All @@ -35,13 +55,42 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
- [IOAPPX-362] Change `Label…` default weight to Semibold + Fix autocomplete of `IOText` when using `font` prop [`#322`](https://github.com/pagopa/io-app-design-system/pull/322)
- chore: release 2.0.0-1 [`15cfe9c`](https://github.com/pagopa/io-app-design-system/commit/15cfe9ccbfa743e9252e13e0687f482dbeb07a58)

#### [v2.0.0-0](https://github.com/pagopa/io-app-design-system/compare/v1.46.1...v2.0.0-0)
#### [v2.0.0-0](https://github.com/pagopa/io-app-design-system/compare/v1.47.2...v2.0.0-0)

> 31 July 2024
- [IOAPPX-349] Add the new `IOText` component with support for advanced a11y features [`#312`](https://github.com/pagopa/io-app-design-system/pull/312)
- chore: release 2.0.0-0 [`7227d4b`](https://github.com/pagopa/io-app-design-system/commit/7227d4bee6d1fe913973a5a35e3308555d0101bb)

#### [v1.47.2](https://github.com/pagopa/io-app-design-system/compare/v1.47.1...v1.47.2)

> 16 October 2024
- [IOAPPX-400] Add `testID` to `ContentWrapper` [`#336`](https://github.com/pagopa/io-app-design-system/pull/336)
- chore: release 1.47.2 [`2ccec35`](https://github.com/pagopa/io-app-design-system/commit/2ccec35de737493b3092592fe63911c77e1abef3)

#### [v1.47.1](https://github.com/pagopa/io-app-design-system/compare/v1.47.0...v1.47.1)

> 15 October 2024
- [IOAPPX-398] Add dark mode compatibility to `HeaderSecondLevel` [`#335`](https://github.com/pagopa/io-app-design-system/pull/335)
- chore: release 1.47.1 [`49173c4`](https://github.com/pagopa/io-app-design-system/commit/49173c4f3c232303cab4e2e4799d21ef7032274c)

#### [v1.47.0](https://github.com/pagopa/io-app-design-system/compare/v1.46.2...v1.47.0)

> 9 October 2024
- [IOAPPX-353] Add the new `FooterActions` (from `io-app`) and `FooterActionsInline` [`#316`](https://github.com/pagopa/io-app-design-system/pull/316)
- chore: release 1.47.0 [`5b3f8a6`](https://github.com/pagopa/io-app-design-system/commit/5b3f8a650fa3c7573000eb35a332d0906d0551ed)

#### [v1.46.2](https://github.com/pagopa/io-app-design-system/compare/v1.46.1...v1.46.2)

> 19 September 2024
- feat: [EUDIW-54] Add new pictograms for EUDIW app [`#332`](https://github.com/pagopa/io-app-design-system/pull/332)
- feat: [PE-680] Change purple badge colors [`#333`](https://github.com/pagopa/io-app-design-system/pull/333)
- chore: release 1.46.2 [`492b8a6`](https://github.com/pagopa/io-app-design-system/commit/492b8a67d452c93b47b6a3ca23a1dd3d191b267f)

#### [v1.46.1](https://github.com/pagopa/io-app-design-system/compare/v1.46.0...v1.46.1)

> 11 September 2024
Expand Down
69 changes: 55 additions & 14 deletions example/src/navigation/navigator.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -20,12 +20,19 @@ import { DSAlert } from "../pages/Alert";
import { Badges } from "../pages/Badges";
import { Buttons } from "../pages/Buttons";
import { Colors } from "../pages/Colors";
import { FooterWithButton } from "../pages/FooterWithButton";
import { FooterWithButtonEmptyState } from "../pages/FooterWithButtonEmptyState";
import { FooterActionsEmptyStateScreen } from "../pages/FooterActionsEmptyStateScreen";
import { FooterActionsInlineNotFixed } from "../pages/FooterActionsInlineNotFixed";
import { FooterActionsInlineScreen } from "../pages/FooterActionsInlineScreen";
import { FooterActionsNotFixed } from "../pages/FooterActionsNotFixed";
import { FooterActionsScreen } from "../pages/FooterActionsScreen";
import { FooterActionsStickyScreen } from "../pages/FooterActionsStickyScreen";
import { ForceScrollDownViewPage } from "../pages/ForceScrollDownViewPage";
import { GradientScroll } from "../pages/GradientScroll";
import { HeaderFirstLevelScreen } from "../pages/HeaderFirstLevel";
import { HeaderSecondLevelScreen } from "../pages/HeaderSecondLevel";
import { HeaderSecondLevelCustomBackground } from "../pages/HeaderSecondLevelCustomBackground";
import { HeaderSecondLevelScreenDiscreteTransition } from "../pages/HeaderSecondLevelDiscreteTransition";
import { HeaderSecondLevelScreenDiscreteTransitionCustomBg } from "../pages/HeaderSecondLevelScreenDiscreteTransitionCustomBg";
import { HeaderSecondLevelWithStepper } from "../pages/HeaderSecondLevelWithStepper";
import { Icons } from "../pages/Icons";
import { ImageScreen } from "../pages/Image";
Expand All @@ -39,18 +46,15 @@ import { NumberPadScreen } from "../pages/NumberPad";
import { OTPInputScreen } from "../pages/OTPInput";
import { Pictograms } from "../pages/Pictograms";
import { Sandbox } from "../pages/Sandbox";
import { SearchCustom } from "../pages/SearchCustom";
import { SearchNative } from "../pages/SearchNative";
import { Selection } from "../pages/Selection";
import { StaticHeaderSecondLevelScreen } from "../pages/StaticHeaderSecondLevel";
import { HeaderSecondLevelScreenStatic } from "../pages/StaticHeaderSecondLevel";
import { StepperPage } from "../pages/Stepper";
import { TabNavigationScreen } from "../pages/TabNavigation";
import { TextInputs } from "../pages/TextInputs";
import { Toasts } from "../pages/Toasts";
import { Typography } from "../pages/Typography";
import { SearchCustom } from "../pages/SearchCustom";
import { HeaderSecondLevelCustomBackground } from "../pages/HeaderSecondLevelCustomBackground";
import { HeaderSecondLevelScreenDiscreteTransition } from "../pages/HeaderSecondLevelDiscreteTransition";
import { HeaderSecondLevelScreenDiscreteTransitionCustomBg } from "../pages/HeaderSecondLevelScreenDiscreteTransitionCustomBg";
import { AppParamsList } from "./params";
import APP_ROUTES from "./routes";

Expand Down Expand Up @@ -275,20 +279,57 @@ const AppNavigator = () => {
/>

<Stack.Screen
name={APP_ROUTES.SCREENS.FOOTER_WITH_BUTTON.route}
component={FooterWithButton}
name={APP_ROUTES.SCREENS.FOOTER_ACTIONS.route}
component={FooterActionsScreen}
options={{
headerTitle: APP_ROUTES.SCREENS.FOOTER_WITH_BUTTON.title,
headerTitle: APP_ROUTES.SCREENS.FOOTER_ACTIONS.title,
headerBackTitleVisible: false
}}
/>

<Stack.Screen
name={APP_ROUTES.SCREENS.FOOTER_ACTIONS_STICKY.route}
component={FooterActionsStickyScreen}
options={{
headerTitle: APP_ROUTES.SCREENS.FOOTER_ACTIONS_STICKY.title,
headerBackTitleVisible: false
}}
/>

<Stack.Screen
name={APP_ROUTES.SCREENS.FOOTER_ACTIONS_NOT_FIXED.route}
component={FooterActionsNotFixed}
options={{
headerTitle: APP_ROUTES.SCREENS.FOOTER_ACTIONS_NOT_FIXED.title,
headerBackTitleVisible: false
}}
/>

<Stack.Screen
name={APP_ROUTES.SCREENS.FOOTER_ACTIONS_INLINE.route}
component={FooterActionsInlineScreen}
options={{
headerTitle: APP_ROUTES.SCREENS.FOOTER_ACTIONS_INLINE.title,
headerBackTitleVisible: false
}}
/>

<Stack.Screen
name={APP_ROUTES.SCREENS.FOOTER_ACTIONS_INLINE_NOT_FIXED.route}
component={FooterActionsInlineNotFixed}
options={{
headerTitle:
APP_ROUTES.SCREENS.FOOTER_ACTIONS_INLINE_NOT_FIXED.title,
headerBackTitleVisible: false
}}
/>

<Stack.Screen
name={APP_ROUTES.SCREENS.FOOTER_WITH_BUTTON_EMPTY.route}
component={FooterWithButtonEmptyState}
name={APP_ROUTES.SCREENS.FOOTER_ACTIONS_EMPTY_STATE.route}
component={FooterActionsEmptyStateScreen}
options={{
headerShown: false,
headerTitle: APP_ROUTES.SCREENS.FOOTER_WITH_BUTTON.title,
headerTitle: APP_ROUTES.SCREENS.FOOTER_ACTIONS_EMPTY_STATE.title,
headerBackTitleVisible: false
}}
/>
Expand Down Expand Up @@ -360,7 +401,7 @@ const AppNavigator = () => {

<Stack.Screen
name={APP_ROUTES.COMPONENTS.HEADER_SECOND_LEVEL_STATIC.route}
component={StaticHeaderSecondLevelScreen}
component={HeaderSecondLevelScreenStatic}
options={{
headerTitle:
APP_ROUTES.COMPONENTS.HEADER_SECOND_LEVEL_STATIC.title,
Expand Down
9 changes: 7 additions & 2 deletions example/src/navigation/params.ts
Original file line number Diff line number Diff line change
Expand Up @@ -36,9 +36,14 @@ export type AppParamsList = {
[DESIGN_SYSTEM_ROUTES.COMPONENTS.HEADER_SECOND_LEVEL_STATIC.route]: undefined;
[DESIGN_SYSTEM_ROUTES.COMPONENTS.HEADER_SECOND_LEVEL_STEPPER
.route]: undefined;
[DESIGN_SYSTEM_ROUTES.SCREENS.FOOTER_WITH_BUTTON.route]: undefined;
[DESIGN_SYSTEM_ROUTES.SCREENS.FOOTER_ACTIONS_INLINE.route]: undefined;
[DESIGN_SYSTEM_ROUTES.SCREENS.FOOTER_ACTIONS_INLINE_NOT_FIXED
.route]: undefined;
[DESIGN_SYSTEM_ROUTES.SCREENS.FOOTER_ACTIONS.route]: undefined;
[DESIGN_SYSTEM_ROUTES.SCREENS.FOOTER_ACTIONS_STICKY.route]: undefined;
[DESIGN_SYSTEM_ROUTES.SCREENS.FOOTER_ACTIONS_NOT_FIXED.route]: undefined;
[DESIGN_SYSTEM_ROUTES.SCREENS.FOOTER_ACTIONS_EMPTY_STATE.route]: undefined;
[DESIGN_SYSTEM_ROUTES.SCREENS.GRADIENT_SCROLLVIEW.route]: undefined;
[DESIGN_SYSTEM_ROUTES.SCREENS.FOOTER_WITH_BUTTON_EMPTY.route]: undefined;
[DESIGN_SYSTEM_ROUTES.COMPONENTS.TOASTS.route]: undefined;
[DESIGN_SYSTEM_ROUTES.SCREENS.FULL_SCREEN_MODAL.route]: undefined;
[DESIGN_SYSTEM_ROUTES.SCREENS.FULL_SCREEN_MODAL_2.route]: undefined;
Expand Down
28 changes: 22 additions & 6 deletions example/src/navigation/routes.ts
Original file line number Diff line number Diff line change
Expand Up @@ -78,13 +78,29 @@ const APP_ROUTES = {
title: "Full screen modal (second example)"
},
SEARCH: { route: "DESIGN_SYSTEM_SEARCHBAR", title: "Search" },
FOOTER_WITH_BUTTON_EMPTY: {
route: "DESIGN_SYSTEM_FOOTER_WITH_BUTTON_EMPTY",
title: "Footer with button (Empty state)"
FOOTER_ACTIONS: {
route: "DESIGN_SYSTEM_FOOTER_ACTIONS",
title: "Footer actions"
},
FOOTER_WITH_BUTTON: {
route: "DESIGN_SYSTEM_FOOTER_WITH_BUTTON",
title: "Footer with button"
FOOTER_ACTIONS_STICKY: {
route: "DESIGN_SYSTEM_FOOTER_ACTIONS_STICKY",
title: "Footer actions (sticky)"
},
FOOTER_ACTIONS_NOT_FIXED: {
route: "DESIGN_SYSTEM_FOOTER_ACTIONS_NOT_FIXED",
title: "Footer actions (not fixed)"
},
FOOTER_ACTIONS_EMPTY_STATE: {
route: "DESIGN_SYSTEM_FOOTER_ACTIONS_EMPTY_STATE",
title: "Footer actions (Empty state)"
},
FOOTER_ACTIONS_INLINE: {
route: "DESIGN_SYSTEM_FOOTER_ACTIONS_INLINE",
title: "Footer actions (inline)"
},
FOOTER_ACTIONS_INLINE_NOT_FIXED: {
route: "DESIGN_SYSTEM_FOOTER_ACTIONS_INLINE_NOT_FIXED",
title: "Footer actions (inline, not fixed)"
},
GRADIENT_SCROLLVIEW: {
route: "DESIGN_SYSTEM_GRADIENT_SCROLLVIEW",
Expand Down
Original file line number Diff line number Diff line change
@@ -1,21 +1,22 @@
import {
Body,
ContentWrapper,
FooterWithButtons,
FooterActions,
H2,
IOColors,
VSpacer
VSpacer,
useFooterActionsMeasurements
} from "@pagopa/io-app-design-system";
import * as React from "react";
import { useState } from "react";
import { Alert, Platform, ScrollView, View } from "react-native";

/**
* This Screen is used to test components in isolation while developing.
* @returns a screen with a flexed view where you can test components
*/
export const FooterWithButtonEmptyState = () => {
const [footerHeight, setFooterHeight] = useState(0);
export const FooterActionsEmptyStateScreen = () => {
const { footerActionsMeasurements, handleFooterActionsMeasurements } =
useFooterActionsMeasurements();

return (
<View
Expand All @@ -27,7 +28,12 @@ export const FooterWithButtonEmptyState = () => {
{/* This extra View is mandatory when you have a fixed
bottom component to get a consistent behavior
across platforms */}
<View style={{ flexGrow: 1, paddingBottom: footerHeight }}>
<View
style={{
flexGrow: 1,
paddingBottom: footerActionsMeasurements.safeBottomAreaHeight
}}
>
<ScrollView
centerContent
contentContainerStyle={[
Expand All @@ -49,28 +55,15 @@ export const FooterWithButtonEmptyState = () => {
</ContentWrapper>
</ScrollView>
</View>
<FooterWithButtons
onLayoutChange={setFooterHeight}
sticky={true}
primary={{
type: "Solid",
buttonProps: {
color: "primary",
accessibilityLabel: "primary button",
onPress: () => Alert.alert("Button pressed"),
label: "Primary button"
<FooterActions
onMeasure={handleFooterActionsMeasurements}
actions={{
type: "SingleButton",
primary: {
label: "Pay button",
onPress: () => Alert.alert("Button pressed")
}
}}
// secondary={{
// type: "Outline",
// buttonProps: {
// color: "primary",
// accessibilityLabel: "secondary button",
// onPress: () => Alert.alert("Button pressed"),
// label: "Secondary button"
// }
// }}
type="SingleButton"
/>
</View>
);
Expand Down
55 changes: 55 additions & 0 deletions example/src/pages/FooterActionsInlineNotFixed.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
import {
FooterActionsInline,
IOColors,
VSpacer,
useIOTheme
} from "@pagopa/io-app-design-system";
import React from "react";
import { Alert, ScrollView, StyleSheet, Text, View } from "react-native";

const onButtonPress = () => {
Alert.alert("Alert", "Action triggered");
};

export const FooterActionsInlineNotFixed = () => {
const theme = useIOTheme();

return (
<ScrollView>
{[...Array(9)].map((_el, i) => (
<React.Fragment key={`view-${i}`}>
<View
style={[
styles.block,
{ backgroundColor: IOColors[theme["appBackground-secondary"]] }
]}
>
<Text style={{ color: IOColors[theme["textBody-tertiary"]] }}>
{`Block ${i}`}
</Text>
</View>
<VSpacer size={4} />
</React.Fragment>
))}
<FooterActionsInline
fixed={false}
startAction={{
label: "Secondary",
onPress: onButtonPress
}}
endAction={{
label: "Primary",
onPress: onButtonPress
}}
/>
</ScrollView>
);
};

const styles = StyleSheet.create({
block: {
alignItems: "center",
justifyContent: "center",
aspectRatio: 16 / 10
}
});
Loading

0 comments on commit 4872a33

Please sign in to comment.