From 75e6aad74efe42734d5fe50886f0393292df8285 Mon Sep 17 00:00:00 2001 From: Damiano Plebani Date: Mon, 11 Sep 2023 16:17:23 +0200 Subject: [PATCH 1/4] Add the new `transactions` icon --- src/components/icons/Icon.tsx | 4 +++- src/components/icons/svg/IconTransactions.tsx | 2 +- .../icons/svg/IconTransactionsBoxed.tsx | 16 ++++++++++++++++ .../icons/svg/originals/IconTransactions.svg | 8 ++++++++ .../svg/originals/IconTransactionsBoxed.svg | 8 ++++++++ 5 files changed, 36 insertions(+), 2 deletions(-) create mode 100644 src/components/icons/svg/IconTransactionsBoxed.tsx create mode 100644 src/components/icons/svg/originals/IconTransactions.svg create mode 100644 src/components/icons/svg/originals/IconTransactionsBoxed.svg diff --git a/src/components/icons/Icon.tsx b/src/components/icons/Icon.tsx index 0c2c19af..4f54ac53 100644 --- a/src/components/icons/Icon.tsx +++ b/src/components/icons/Icon.tsx @@ -139,6 +139,7 @@ import IconSystemSettingsAndroid from "./svg/IconSystemSettingsAndroid"; import IconSystemSettingsiOS from "./svg/IconSystemSettingsiOS"; import IconSystemToggleInstructions from "./svg/IconSystemToggleInstructions"; import IconTag from "./svg/IconTag"; +import IconTransactionsBoxed from "./svg/IconTransactionsBoxed"; import IconTransactions from "./svg/IconTransactions"; import IconTrashcan from "./svg/IconTrashcan"; import IconWarningFilled from "./svg/IconWarningFilled"; @@ -161,6 +162,7 @@ export const IOIcons = { copy: IconCopy, selfCert: IconSelfCertification, institution: IconInstitution, + merchant: IconMerchant, hourglass: IconHourglass, shareiOs: IconShareiOs, shareAndroid: IconShareAndroid, @@ -196,6 +198,7 @@ export const IOIcons = { fiscalCodeIndividual: IconFiscalCodeIndividual, creditCard: IconCreditCard /* io-carta */, bonus: IconBonus, + transactionsBoxed: IconTransactionsBoxed, transactions: IconTransactions, amount: IconAmount, psp: IconPSP, @@ -286,7 +289,6 @@ export const IOIcons = { productIOAppBlueBg: IconProductIOAppBlueBg, checkTick: IconCheckTick, checkTickBig: IconCheckTickBig, - merchant: IconMerchant, light: IconLight, lightFilled: IconLightFilled, systemSettingsAndroid: IconSystemSettingsAndroid, diff --git a/src/components/icons/svg/IconTransactions.tsx b/src/components/icons/svg/IconTransactions.tsx index 816608d9..d5588301 100644 --- a/src/components/icons/svg/IconTransactions.tsx +++ b/src/components/icons/svg/IconTransactions.tsx @@ -7,7 +7,7 @@ const IconTransactions = ({ size, style, ...props }: SVGIconProps) => ( diff --git a/src/components/icons/svg/IconTransactionsBoxed.tsx b/src/components/icons/svg/IconTransactionsBoxed.tsx new file mode 100644 index 00000000..f7ba5421 --- /dev/null +++ b/src/components/icons/svg/IconTransactionsBoxed.tsx @@ -0,0 +1,16 @@ +import React from "react"; +import { Svg, Path } from "react-native-svg"; +import { SVGIconProps } from "../Icon"; + +const IconTransactionsBoxed = ({ size, style, ...props }: SVGIconProps) => ( + + + +); + +export default IconTransactionsBoxed; diff --git a/src/components/icons/svg/originals/IconTransactions.svg b/src/components/icons/svg/originals/IconTransactions.svg new file mode 100644 index 00000000..3a027d2b --- /dev/null +++ b/src/components/icons/svg/originals/IconTransactions.svg @@ -0,0 +1,8 @@ + + + diff --git a/src/components/icons/svg/originals/IconTransactionsBoxed.svg b/src/components/icons/svg/originals/IconTransactionsBoxed.svg new file mode 100644 index 00000000..a97fab83 --- /dev/null +++ b/src/components/icons/svg/originals/IconTransactionsBoxed.svg @@ -0,0 +1,8 @@ + + + From b72d37b960befd9ae35bb582af20ab5f1a417f4e Mon Sep 17 00:00:00 2001 From: Damiano Plebani Date: Mon, 11 Sep 2023 17:38:29 +0200 Subject: [PATCH 2/4] Add the new `IconContained` component --- example/src/pages/Icons.tsx | 17 +++++++ src/components/icons/IconContained.tsx | 70 ++++++++++++++++++++++++++ src/components/icons/index.tsx | 1 + src/core/IOStyles.ts | 4 +- 4 files changed, 91 insertions(+), 1 deletion(-) create mode 100644 src/components/icons/IconContained.tsx diff --git a/example/src/pages/Icons.tsx b/example/src/pages/Icons.tsx index 9eaf0cb1..041d22ed 100644 --- a/example/src/pages/Icons.tsx +++ b/example/src/pages/Icons.tsx @@ -1,6 +1,8 @@ import { H2, H3, + H4, + HSpacer, IOBiometricIcons, IOCategoryIcons, IOColors, @@ -8,15 +10,18 @@ import { IOIcons, IONavIcons, IOProductIcons, + IOStyles, IOThemeContext, IOVisualCostants, Icon, + IconContained, SVGIconProps } from "@pagopa/io-app-design-system"; import React, { useContext } from "react"; import { StyleSheet, View } from "react-native"; import { IconViewerBox, iconItemGutter } from "../components/IconViewerBox"; import { Screen } from "../components/Screen"; +import { ComponentViewerBox } from "../components/ComponentViewerBox"; // Filter the main object, removing already displayed icons in the other sets type IconSubsetObject = Record< @@ -177,6 +182,18 @@ export const Icons = () => { /> ))} + +

+ IconContained +

+ + + + + + + +

; + +const tonalColorMap: IconContainedColorVariants = { + neutral: { + background: "blueIO-50", + foreground: "grey-450" + } +}; + +const variantMap: Record = + { + tonal: tonalColorMap + }; + +const IconContainedDefaultSize = IOVisualCostants.iconContainedSizeDefault; + +const styles = StyleSheet.create({ + iconContainedWrapper: { + overflow: "hidden", + display: "flex", + alignItems: "center", + justifyContent: "center", + width: IconContainedDefaultSize, + height: IconContainedDefaultSize, + borderRadius: IconContainedDefaultSize / 2 + } +}); + +export const IconContained = ({ variant, color, icon }: IconContained) => { + const backgroundColor = useMemo( + () => variantMap[variant][color].background, + [variant, color] + ); + + const foregroundColor = useMemo( + () => variantMap[variant][color].foreground, + [variant, color] + ); + + return ( + + + + ); +}; diff --git a/src/components/icons/index.tsx b/src/components/icons/index.tsx index 998237c4..1aecc35a 100644 --- a/src/components/icons/index.tsx +++ b/src/components/icons/index.tsx @@ -1 +1,2 @@ export * from "./Icon"; +export * from "./IconContained"; diff --git a/src/core/IOStyles.ts b/src/core/IOStyles.ts index e65827c6..44eca42c 100644 --- a/src/core/IOStyles.ts +++ b/src/core/IOStyles.ts @@ -14,13 +14,15 @@ interface IOVisualCostants { // Dimensions avatarSizeSmall: number; avatarSizeMedium: number; + iconContainedSizeDefault: number; } export const IOVisualCostants: IOVisualCostants = { appMarginDefault: 24, headerHeight: 56, avatarSizeSmall: 44, - avatarSizeMedium: 66 + avatarSizeMedium: 66, + iconContainedSizeDefault: 44 }; export const IOStyles = StyleSheet.create({ From 3fa4f1cdb449fe2b138ac76f94225c90b638a684 Mon Sep 17 00:00:00 2001 From: Damiano Plebani Date: Mon, 11 Sep 2023 17:59:26 +0200 Subject: [PATCH 3/4] Add important comment to the `IconContained` component --- src/components/icons/IconContained.tsx | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/components/icons/IconContained.tsx b/src/components/icons/IconContained.tsx index 5d886341..5ed2171d 100644 --- a/src/components/icons/IconContained.tsx +++ b/src/components/icons/IconContained.tsx @@ -46,6 +46,12 @@ const styles = StyleSheet.create({ } }); +/* +`IconContained` is just a special wrapper for the `Icon` component. +It's also not an interactive component when compared to the `IconButton` component. +When adding new styles, you should be aware of this context and be careful +not to add variants that look like interactive counterparts. +*/ export const IconContained = ({ variant, color, icon }: IconContained) => { const backgroundColor = useMemo( () => variantMap[variant][color].background, From 5ea0c861925cd3e200d05937ef2cbf6f2e881297 Mon Sep 17 00:00:00 2001 From: Damiano Plebani Date: Tue, 12 Sep 2023 09:10:12 +0200 Subject: [PATCH 4/4] Update comment --- src/components/icons/IconContained.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/icons/IconContained.tsx b/src/components/icons/IconContained.tsx index 5ed2171d..c9b593b0 100644 --- a/src/components/icons/IconContained.tsx +++ b/src/components/icons/IconContained.tsx @@ -48,7 +48,7 @@ const styles = StyleSheet.create({ /* `IconContained` is just a special wrapper for the `Icon` component. -It's also not an interactive component when compared to the `IconButton` component. +It's also not an interactive component, unlike the `IconButton`. When adding new styles, you should be aware of this context and be careful not to add variants that look like interactive counterparts. */