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

chore: [IOAPPFD0-134] Add the new AccordionItem to the Design System playground #4938

Merged
merged 6 commits into from
Aug 31, 2023
Merged

chore: [IOAPPFD0-134] Add the new AccordionItem to the Design System playground #4938

Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
ff1a716
Add the new `AccordionItem` to the `Accordion` DS page
dmnplb Aug 29, 2023
f124f19
Update lockfile
dmnplb Aug 29, 2023
aeefeaf
Merge branch 'master' into IOAPPFD0-134-add-accordion-ds
dmnplb Aug 29, 2023
669676e
Merge branch 'master' into IOAPPFD0-134-add-accordion-ds
dmnplb Aug 29, 2023
23f6964
Merge branch 'master' into IOAPPFD0-134-add-accordion-ds
dmnplb Aug 31, 2023
260eaa9
Remove unused import
dmnplb Aug 31, 2023
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
84 changes: 76 additions & 8 deletions ts/features/design-system/core/DSAccordion.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,87 @@
import { View } from "react-native";
import { FlatList, ListRenderItemInfo, View } from "react-native";
import * as React from "react";
import { Icon } from "@pagopa/io-app-design-system";
import { AccordionItem, Icon, useIOTheme } from "@pagopa/io-app-design-system";
import { RawAccordion } from "../../../components/core/accordion/RawAccordion";
import { Body } from "../../../components/core/typography/Body";
import { H3 } from "../../../components/core/typography/H3";
import { H5 } from "../../../components/core/typography/H5";
import { Label } from "../../../components/core/typography/Label";
import { IOColors } from "../../../components/core/variables/IOColors";
import { IOStyles } from "../../../components/core/variables/IOStyles";
import { DesignSystemScreen } from "../components/DesignSystemScreen";
import { VSpacer } from "../../../components/core/spacer/Spacer";

export const DSAccordion = () => (
<DesignSystemScreen title={"Accordion"}>
<Label>{"<RawAccordion />"}</Label>
const assistanceData: Array<AccordionItem> = [
{
id: 1,
title: "Come posso pagare su IO?",
body: "Puoi pagare con carte di debito, credito e prepagate, con PayPal o BANCOMAT Pay."
},
{
id: 2,
title: "Come posso eliminare un metodo di pagamento?",
body: "I tuoi metodi di pagamento sono visualizzati come card nella parte alta dello schermo del Portafoglio. Seleziona la card del metodo che vuoi eliminare e poi premi 'Elimina questo metodo!"
},
{
id: 3,
title:
"Nel 2021 ho maturato degli importi che non mi sono ancora stati rimborsati. Cosa posso fare?",
body: "Probabilmente non hai indicato l'IBAN del conto su cui desideri ricevere l'accredito, oppure quello che hai indicato non è valido.Per inserire l'IBAN o verificarne la correttezza, apri l'app, vai al Portafoglio e premi sulla card del Cashback. Poi, inseriscilo o modificalo e seleziona 'Continua'. Entro 90 giorni riceverai tramite l'app 10 un messaggio sullo stato del rimborso. Le attività tra PagoPA S.p.A. e Consap S.p.A. per i pagamenti dei rimborsi sono in corso di dismissione, quindi, se non inserisci o non correggi l'IBAN entro il 31/07/2022, potrebbe non essere più possibile effettuare il bonifico per il rimborso."
},
{
id: 4,
title: "Come posso eliminare un metodo di pagamento?",
body: (
<Body>
I tuoi metodi di pagamento sono visualizzati come card nella parte alta
dello schermo del Portafoglio. Seleziona la card del metodo che vuoi
eliminare e poi premi Elimina questo metodo!
</Body>
)
},
{
id: 5,
title:
"Nel 2021 ho maturato degli importi che non mi sono ancora stati rimborsati. Cosa posso fare?",
body: "Probabilmente non hai indicato l'IBAN del conto su cui desideri ricevere l'accredito, oppure quello che hai indicato non è valido.Per inserire l'IBAN o verificarne la correttezza, apri l'app, vai al Portafoglio e premi sulla card del Cashback. Poi, inseriscilo o modificalo e seleziona 'Continua'. Entro 90 giorni riceverai tramite l'app 10 un messaggio sullo stato del rimborso. Le attività tra PagoPA S.p.A. e Consap S.p.A. per i pagamenti dei rimborsi sono in corso di dismissione, quindi, se non inserisci o non correggi l'IBAN entro il 31/07/2022, potrebbe non essere più possibile effettuare il bonifico per il rimborso."
}
];

export const DSAccordion = () => {
const renderAccordionHeader = () => (
<View style={{ marginBottom: 24 }}>
<H3 color={theme["textHeading-default"]}>AccordionItem</H3>
</View>
);

const theme = useIOTheme();

const renderItem = ({ item }: ListRenderItemInfo<AccordionItem>) => (
<AccordionItem id={item.id} title={item.title} body={item.body} />
);

return (
<DesignSystemScreen title={"Accordion"}>
<FlatList
scrollEnabled={false}
data={assistanceData}
contentContainerStyle={{
flexGrow: 1
}}
ListHeaderComponent={renderAccordionHeader}
ItemSeparatorComponent={() => <VSpacer size={8} />}
keyExtractor={(item, index) => `${item.id}-${index}`}
renderItem={renderItem}
/>

{renderRawAccordion()}
</DesignSystemScreen>
);
};

const renderRawAccordion = () => (
<>
<VSpacer size={40} />
<H3>RawAccordion</H3>
<VSpacer size={16} />
<View style={[IOStyles.flex, { width: "100%" }]}>
<RawAccordion
Expand All @@ -23,7 +91,7 @@ export const DSAccordion = () => (
}}
header={
<View style={IOStyles.row}>
<Icon name="biomFingerprint" size={32} />
<Icon name="productIOApp" size={24} color="grey-650" />
<H3 style={{ alignSelf: "center" }}>{"Custom header "}</H3>
<H5 style={{ alignSelf: "center" }}>{"Purgatorio, Canto VI"}</H5>
</View>
Expand Down Expand Up @@ -52,5 +120,5 @@ export const DSAccordion = () => (
</Body>
</RawAccordion>
</View>
</DesignSystemScreen>
</>
);