-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: [IOBP-186] Import updated
ListItemTransaction component (#51)
## Short description This PR imports the new updated version of `ListItemTransaction` component and adds a new prop `badgeText` in order to show a text inside when the badge is visible (useful for translated text) ## List of changes proposed in this pull request - Added `ListItemTransaction` component and its utilities; - Added a new propr `badgeText` which is required only when the status of a transaction is: `"failure" | "pending" | "cancelled" | "reversal"` ## How to test Open the ListItem section and check if the ListItemTransaction is correctly showed; ## Preview https://github.com/pagopa/io-app-design-system/assets/34343582/e8a786ce-a229-482d-811e-3b7d7160076c --------- Co-authored-by: Damiano Plebani <damiano.plebani@pagopa.it>
- Loading branch information
Showing
6 changed files
with
273 additions
and
119 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,60 @@ | ||
| import * as O from "fp-ts/lib/Option"; | ||
| import { pipe } from "fp-ts/lib/function"; | ||
| import * as React from "react"; | ||
| import { findFirstCaseInsensitive } from "../../utils/object"; | ||
| import { IOColors } from "../../core"; | ||
| import { IOIconSizeScale, Icon } from "../icons"; | ||
| import { | ||
| IOLogoPaymentExtType, | ||
| IOLogoPaymentType, | ||
| IOPaymentExtLogos, | ||
| IOPaymentLogos, | ||
| LogoPayment, | ||
| LogoPaymentExt | ||
| } from "../logos"; | ||
|
|
||
| export type LogoPaymentWithFallback = { | ||
| brand?: string; | ||
| fallbackIconColor?: IOColors; | ||
| size?: IOIconSizeScale; | ||
| isExtended?: boolean; | ||
| }; | ||
| export type LogoPaymentExtOrDefaultIconProps = { | ||
| cardIcon?: IOLogoPaymentExtType; | ||
| fallbackIconColor?: IOColors; | ||
| size?: IOIconSizeScale; | ||
| }; | ||
| /** | ||
| * This component renders either | ||
| * - a LogoPayment/LogoPaymentExt component | ||
| * - a default credit card icon | ||
| * @param cardIcon: IOLogoPaymentType icon | ||
| * @param size: the size of the icon (standard is 24/48) | ||
| * @param fallbackIconColor: default icon color (standard is grey-700) | ||
| * @param isExtended: if true, renders a LogoPaymentExt component | ||
| * @returns a LogoPayment/LogopaymentExt component if the cardIcon is supported, a default credit card icon otherwise | ||
| */ | ||
| export const LogoPaymentWithFallback = ({ | ||
| brand, | ||
| fallbackIconColor = "grey-700", | ||
| isExtended = false, | ||
| size = isExtended ? 48 : 24 | ||
| }: LogoPaymentWithFallback) => { | ||
| const logos = isExtended ? IOPaymentExtLogos : IOPaymentLogos; | ||
|
|
||
| return pipe( | ||
| brand, | ||
| O.fromNullable, | ||
| O.chain(findFirstCaseInsensitive(logos)), | ||
| O.map(([brand]) => brand), | ||
| O.fold( | ||
| () => <Icon name="creditCard" size={size} color={fallbackIconColor} />, | ||
| brand => | ||
| isExtended ? ( | ||
| <LogoPaymentExt name={brand as IOLogoPaymentExtType} size={size} /> | ||
| ) : ( | ||
| <LogoPayment name={brand as IOLogoPaymentType} size={size} /> | ||
| ) | ||
| ) | ||
| ); | ||
| }; |
Oops, something went wrong.