diff --git a/CHANGELOG.md b/CHANGELOG.md index 029ce87b..6a005a4a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,9 +4,90 @@ 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). +#### [v1.36.10](https://github.com/pagopa/io-app-design-system/compare/v1.37.0...v1.36.10) + +- [IOAPPX-293] Uniform spacing between list items, modules, and selection components [`#259`](https://github.com/pagopa/io-app-design-system/pull/259) +- [IOAPPX-294] Add `activate` and `reactivate` bleed pictograms [`#261`](https://github.com/pagopa/io-app-design-system/pull/261) +- chore: [PE-594] Remove marginLeft from `ListItemNav` chevron icon [`#260`](https://github.com/pagopa/io-app-design-system/pull/260) +- [IOPID-1825] Add accessibility label to idp module component [`#257`](https://github.com/pagopa/io-app-design-system/pull/257) +- [chore] Add optional `switchTestID` to `ListItemSwitch` [`#256`](https://github.com/pagopa/io-app-design-system/pull/256) +- chore: [PE-578] Add new variant to the `Tag` component [`#255`](https://github.com/pagopa/io-app-design-system/pull/255) +- chore: release 1.36.7 [`33e0987`](https://github.com/pagopa/io-app-design-system/commit/33e0987e6887c5143da5eeba8fd6e6f4e4663274) +- chore: release 1.36.9 [`b3b7782`](https://github.com/pagopa/io-app-design-system/commit/b3b7782672c38e4cf75c4cebfd460e5610a6a00a) +- chore: release 1.36.8 [`13395bd`](https://github.com/pagopa/io-app-design-system/commit/13395bdb439ea740ee33dd9a3d9674ffd51caed0) + +#### [v1.37.0](https://github.com/pagopa/io-app-design-system/compare/v1.36.9...v1.37.0) + +> 2 May 2024 + +- chore: Add new variant to the `Tag` component [`ec9d386`](https://github.com/pagopa/io-app-design-system/commit/ec9d3863c89e1042b5426c0e1026dbbe2e0bee60) +- chore: release 1.37.0 [`026ca97`](https://github.com/pagopa/io-app-design-system/commit/026ca975a6ec22a1874a699b75de7ecd032b5c26) + +#### [v1.36.9](https://github.com/pagopa/io-app-design-system/compare/v1.36.8...v1.36.9) + +> 3 May 2024 + +- [IOPID-1825] Add accessibility label to idp module component [`#257`](https://github.com/pagopa/io-app-design-system/pull/257) +- chore: release 1.36.9 [`b3b7782`](https://github.com/pagopa/io-app-design-system/commit/b3b7782672c38e4cf75c4cebfd460e5610a6a00a) + +#### [v1.36.8](https://github.com/pagopa/io-app-design-system/compare/v1.36.7...v1.36.8) + +> 3 May 2024 + +- [chore] Add optional `switchTestID` to `ListItemSwitch` [`#256`](https://github.com/pagopa/io-app-design-system/pull/256) +- chore: release 1.36.8 [`13395bd`](https://github.com/pagopa/io-app-design-system/commit/13395bdb439ea740ee33dd9a3d9674ffd51caed0) + +#### [v1.36.7](https://github.com/pagopa/io-app-design-system/compare/v1.36.6...v1.36.7) + +> 2 May 2024 + +- chore: [PE-578] Add new variant to the `Tag` component [`#255`](https://github.com/pagopa/io-app-design-system/pull/255) +- chore: release 1.36.7 [`33e0987`](https://github.com/pagopa/io-app-design-system/commit/33e0987e6887c5143da5eeba8fd6e6f4e4663274) + +#### [v1.36.6](https://github.com/pagopa/io-app-design-system/compare/v1.36.5...v1.36.6) + +> 2 May 2024 + +- [chore] Fix for WithTestID import on SwtichListItem [`#254`](https://github.com/pagopa/io-app-design-system/pull/254) +- chore: release 1.36.6 [`f5bf018`](https://github.com/pagopa/io-app-design-system/commit/f5bf0186acb870236d167cc37deb56e0e5b293f3) + +#### [v1.36.5](https://github.com/pagopa/io-app-design-system/compare/v1.36.4...v1.36.5) + +> 2 May 2024 + +- chore: Add `ModuleNavigation` component [`#251`](https://github.com/pagopa/io-app-design-system/pull/251) +- chore: release 1.36.5 [`484ea8e`](https://github.com/pagopa/io-app-design-system/commit/484ea8e5de4456b60c5ee34de0b4663dab69e466) + +#### [v1.36.4](https://github.com/pagopa/io-app-design-system/compare/v1.36.3...v1.36.4) + +> 2 May 2024 + +- chore: Expose `autoFocus` `prop` on `OTPInput` [`#252`](https://github.com/pagopa/io-app-design-system/pull/252) +- chore: release 1.36.4 [`c1d42bc`](https://github.com/pagopa/io-app-design-system/commit/c1d42bc573f032932215ab9cc7085d2bddf8cd35) + +#### [v1.36.3](https://github.com/pagopa/io-app-design-system/compare/v1.36.2...v1.36.3) + +> 2 May 2024 + +- [chore] Add optional `testID` property to `ListItemSwitch` [`#253`](https://github.com/pagopa/io-app-design-system/pull/253) +- Revert "feat: add `ModuleNavigation` component" [`9476296`](https://github.com/pagopa/io-app-design-system/commit/9476296cb4453dd22abf01134d0fd97fb8095662) +- feat: add `ModuleNavigation` component [`99d065e`](https://github.com/pagopa/io-app-design-system/commit/99d065e8348292eecc932852eb0c21b354dff659) +- chore: release 1.36.3 [`1de1183`](https://github.com/pagopa/io-app-design-system/commit/1de11832418086fd3c332149bf2a7baf0bb58c89) + +#### [v1.36.2](https://github.com/pagopa/io-app-design-system/compare/v1.36.1...v1.36.2) + +> 24 April 2024 + +- fix: Typo into `ListItemRadioWithAmount` [`#250`](https://github.com/pagopa/io-app-design-system/pull/250) +- [chore] Optional viewRef for Banner [`#249`](https://github.com/pagopa/io-app-design-system/pull/249) +- chore: release 1.36.2 [`3cd3947`](https://github.com/pagopa/io-app-design-system/commit/3cd394739e22441f1b222549c02c51317d09b05e) + #### [v1.36.1](https://github.com/pagopa/io-app-design-system/compare/v1.36.0...v1.36.1) +> 23 April 2024 + - chore: Let OTPInput reset value on demand by parent [`#248`](https://github.com/pagopa/io-app-design-system/pull/248) +- chore: release 1.36.1 [`01f165e`](https://github.com/pagopa/io-app-design-system/commit/01f165eaa68478f11b32ea32566ba10d8d169111) #### [v1.36.0](https://github.com/pagopa/io-app-design-system/compare/v1.35.0...v1.36.0) diff --git a/example/src/pages/Advice.tsx b/example/src/pages/Advice.tsx index f378b329..d031956b 100644 --- a/example/src/pages/Advice.tsx +++ b/example/src/pages/Advice.tsx @@ -100,148 +100,134 @@ const renderFeatureInfo = () => ( ); -const renderBanner = () => { - const viewRef = React.createRef(); - - return ( - <> -

- Banner -

- {bannerBackgroundColours.map(color => ( - - - } - color={color} - size="big" - title="Banner title" - pictogramName="charity" - action="Action text" - onPress={onLinkPress} - /> - - } - color={color} - size="big" - content={ - "Fai una donazione alle organizzazioni umanitarie che assistono le vittime civile della crisi in Ucraina" - } - pictogramName="charity" - /> - - } - color={color} - size="big" - content={ - "Fai una donazione alle organizzazioni umanitarie che assistono le vittime civile della crisi in Ucraina" - } - pictogramName="charity" - action="Dona anche tu" - onPress={onLinkPress} - /> - - } - color={color} - size="big" - title="Banner title" - content={ - "Fai una donazione alle organizzazioni umanitarie che assistono le vittime civile della crisi in Ucraina" - } - pictogramName="charity" - /> - - } - color={color} - size="big" - title="Banner title" - content={ - "Fai una donazione alle organizzazioni umanitarie che assistono le vittime civile della crisi in Ucraina" - } - pictogramName="charity" - action="Dona anche tu" - onPress={onLinkPress} - /> - - - } - color={color} - size="big" - title="Banner title" - content={ - "Fai una donazione alle organizzazioni umanitarie che assistono le vittime civile della crisi in Ucraina" - } - pictogramName="charity" - onClose={onClose} - labelClose="Nascondi questo banner" - /> - - } - color={color} - size="big" - content={ - "Fai una donazione alle organizzazioni umanitarie che assistono le vittime civile della crisi in Ucraina" - } - action="Dona anche tu" - onPress={onLinkPress} - pictogramName="charity" - onClose={onClose} - labelClose="Nascondi questo banner" - /> - - - } - color={color} - size="small" - title="Banner title" - content={ - "Fai una donazione alle organizzazioni umanitarie che assistono le vittime civile della crisi in Ucraina" - } - pictogramName="charity" - action="Dona anche tu" - onPress={onLinkPress} - /> - - } - color={color} - size="small" - content={ - "Fai una donazione alle organizzazioni umanitarie che assistono le vittime civile della crisi in Ucraina" - } - action="Dona anche tu" - onPress={onLinkPress} - pictogramName="charity" - /> - - } - color={color} - size="small" - content={ - "Fai una donazione alle organizzazioni umanitarie che assistono le vittime civile della crisi in Ucraina" - } - pictogramName="charity" - /> - - - ))} - - ); -}; +const renderBanner = () => ( + <> +

+ Banner +

+ {bannerBackgroundColours.map(color => ( + + + + + + + + + + + + + + + + + + + + + + + + + + ))} + +); diff --git a/example/src/pages/Badges.tsx b/example/src/pages/Badges.tsx index 1d4a9d44..18e6ba9c 100644 --- a/example/src/pages/Badges.tsx +++ b/example/src/pages/Badges.tsx @@ -117,6 +117,15 @@ const renderTag = () => ( + + ( ); +const renderModuleNavigation = () => ( + <> + + + + + + + + + + + + + + + + +); + const Modules = () => { const { isExperimental, setExperimental } = useIOExperimentalDesign(); const theme = useIOTheme(); @@ -306,6 +342,14 @@ const Modules = () => { ModuleCredential {renderModuleCredential()} +

+ ModuleNavigation +

+ {renderModuleNavigation()} ); }; diff --git a/example/src/pages/OTPInput.tsx b/example/src/pages/OTPInput.tsx index b9023724..2fbd53d3 100644 --- a/example/src/pages/OTPInput.tsx +++ b/example/src/pages/OTPInput.tsx @@ -1,5 +1,6 @@ import * as React from "react"; -import { View } from "react-native"; +import { useHeaderHeight } from "@react-navigation/elements"; +import { KeyboardAvoidingView, Platform, ScrollView, View } from "react-native"; import { H1, H5, @@ -7,10 +8,11 @@ import { VSpacer, OTPInput, LabelSmall, - ButtonSolid + ButtonSolid, + ContentWrapper, + ButtonOutline } from "@pagopa/io-app-design-system"; import { useState } from "react"; -import { Screen } from "../components/Screen"; const OTP_LENGTH = 8; const OTP_COMPARE = "12345678"; @@ -18,61 +20,133 @@ const OTP_COMPARE = "12345678"; type WrapperProps = { secret?: boolean; validation?: boolean; + autoFocus?: boolean; }; -const OTPWrapper = ({ secret = false, validation = false }: WrapperProps) => { +const OTPWrapper = ({ + secret = false, + validation = false, + autoFocus = false +}: WrapperProps) => { const [value, setValue] = useState(""); - const onValueChange = (v: string) => { + const onValueChange = React.useCallback((v: string) => { if (v.length <= OTP_LENGTH) { setValue(v); } - }; + }, []); - const onValidate = (v: string) => !validation || v === OTP_COMPARE; + const onValidate = React.useCallback( + (v: string) => !validation || v === OTP_COMPARE, + [validation] + ); - return ( - <> - - - setValue("")} label={"Pulisci valore"} /> - + return React.useMemo( + () => ( + <> + + + setValue("")} label={"Pulisci valore"} /> + + ), + [value, onValueChange, secret, onValidate, autoFocus] ); }; + +const scrollVerticallyToView = ( + scrollViewRef: React.RefObject, + targetViewRef: React.RefObject +) => { + if (targetViewRef.current && scrollViewRef.current) { + targetViewRef.current.measureLayout( + scrollViewRef.current.getInnerViewNode(), + (_: number, y: number) => { + scrollViewRef.current?.scrollTo({ y, animated: true }); + } + ); + } +}; + /** * 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 OTPInputScreen = () => ( - - - -

OTP Input

- - -
Default
- - - -
Secret
- - - -
Validation+Secret
- Correct OTP {`${OTP_COMPARE}`} - - - - -); +export const OTPInputScreen = () => { + const scrollViewRef = React.useRef(null); + const autofocusableOTPViewRef = React.useRef(null); + const [showAutofocusableOTP, setShowAutofocusableOTP] = useState(false); + const headerHeight = useHeaderHeight(); + + const ToggleButton = showAutofocusableOTP ? ButtonSolid : ButtonOutline; + + 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`} + /> + + {showAutofocusableOTP && ( + + + + + )} + + + + + ); +}; diff --git a/package.json b/package.json index e72e4917..28c86a0e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@pagopa/io-app-design-system", - "version": "1.36.1", + "version": "1.36.10", "description": "The library defining the core components of the design system of @pagopa/io-app", "main": "lib/commonjs/index", "module": "lib/module/index", diff --git a/scripts/pictograms_timestamp.txt b/scripts/pictograms_timestamp.txt index 125d5b7a..26df7827 100644 --- a/scripts/pictograms_timestamp.txt +++ b/scripts/pictograms_timestamp.txt @@ -1 +1 @@ -2023-11-30T19:56:51.037Z \ No newline at end of file +2024-05-10T08:16:05.659Z \ No newline at end of file diff --git a/src/components/alert/Alert.tsx b/src/components/alert/Alert.tsx index 2fbfd756..d5413c7b 100644 --- a/src/components/alert/Alert.tsx +++ b/src/components/alert/Alert.tsx @@ -14,7 +14,7 @@ import Animated, { useSharedValue, withSpring } from "react-native-reanimated"; -import { useIOExperimentalDesign } from "../../core"; +import { IOVisualCostants, useIOExperimentalDesign } from "../../core"; import { IOScaleValues, IOSpringValues } from "../../core/IOAnimations"; import { IOColors, @@ -27,7 +27,7 @@ import { IOStyles } from "../../core/IOStyles"; import { makeFontStyleObject } from "../../utils/fonts"; import { WithTestID } from "../../utils/types"; import { IOIconSizeScale, IOIcons, Icon } from "../icons"; -import { HSpacer, VSpacer } from "../spacer"; +import { VSpacer } from "../spacer"; import { H4 } from "../typography/H4"; import { Label } from "../typography/Label"; @@ -163,12 +163,13 @@ export const Alert = ({ const renderMainBlock = () => ( <> - - + + + {title && ( <> diff --git a/src/components/banner/Banner.tsx b/src/components/banner/Banner.tsx index 5ea5cead..0a3aca2c 100644 --- a/src/components/banner/Banner.tsx +++ b/src/components/banner/Banner.tsx @@ -81,7 +81,7 @@ type BaseBannerProps = WithTestID<{ size: "big" | "small"; color: "neutral" | "turquoise"; pictogramName: IOPictogramsBleed; - viewRef: React.RefObject; + viewRef?: React.RefObject; // A11y related props accessibilityLabel?: string; accessibilityHint?: string; diff --git a/src/components/banner/__test__/banner.test.tsx b/src/components/banner/__test__/banner.test.tsx index 09c54a32..e96595d8 100644 --- a/src/components/banner/__test__/banner.test.tsx +++ b/src/components/banner/__test__/banner.test.tsx @@ -1,10 +1,9 @@ import React from "react"; -import { Alert, View } from "react-native"; +import { Alert } from "react-native"; import * as TestRenderer from "react-test-renderer"; import { TestRendererWithExperimentalEnabledContextProvider } from "../../../utils/testing"; import { Banner } from "../Banner"; -const viewRef = React.createRef(); const onLinkPress = () => { Alert.alert("Alert", "Action triggered"); }; @@ -13,7 +12,6 @@ describe("Test Banner Components", () => { it("Banner Snapshot", () => { const advice = TestRenderer.create( { it("Banner Snapshot", () => { const advice = TestRendererWithExperimentalEnabledContextProvider( {icon && ( - + {listItemNavContent} {loading && } {!loading && !hideChevron && ( - - - + )} diff --git a/src/components/listitems/ListItemRadioWithAmount.tsx b/src/components/listitems/ListItemRadioWithAmount.tsx index e6839bf5..787317e2 100644 --- a/src/components/listitems/ListItemRadioWithAmount.tsx +++ b/src/components/listitems/ListItemRadioWithAmount.tsx @@ -57,7 +57,7 @@ export const ListItemRadioWithAmount = ({ > - {label} con nome molto molto lungo + {label} {isSuggested && ( <> diff --git a/src/components/listitems/ListItemSwitch.tsx b/src/components/listitems/ListItemSwitch.tsx index 7b13f6a2..75c42173 100644 --- a/src/components/listitems/ListItemSwitch.tsx +++ b/src/components/listitems/ListItemSwitch.tsx @@ -1,5 +1,6 @@ import React, { useMemo } from "react"; import { GestureResponderEvent, Platform, Switch, View } from "react-native"; +import { WithTestID } from "../../utils/types"; import { IOSelectionListItemStyles, IOSelectionListItemVisualParams, @@ -13,14 +14,15 @@ import { HSpacer, VSpacer } from "../spacer"; import { NativeSwitch } from "../switch/NativeSwitch"; import { H6, LabelLink, LabelSmall } from "../typography"; -type PartialProps = { +type PartialProps = WithTestID<{ label: string; onSwitchValueChange?: (newValue: boolean) => void; description?: string; action?: SwitchAction; isLoading?: boolean; badge?: Badge; -}; + switchTestID?: string; +}>; export type SwitchAction = { label: string; @@ -53,7 +55,9 @@ export const ListItemSwitch = React.memo( action, isLoading, badge, - onSwitchValueChange + onSwitchValueChange, + switchTestID, + testID }: ListItemSwitchProps) => { const theme = useIOTheme(); @@ -66,7 +70,7 @@ export const ListItemSwitch = React.memo( return ( )} diff --git a/src/components/listitems/__test__/__snapshots__/listitem.test.tsx.snap b/src/components/listitems/__test__/__snapshots__/listitem.test.tsx.snap index 72e0a08e..45d271fd 100644 --- a/src/components/listitems/__test__/__snapshots__/listitem.test.tsx.snap +++ b/src/components/listitems/__test__/__snapshots__/listitem.test.tsx.snap @@ -437,7 +437,7 @@ exports[`Test List Item Components - Experimental Enabled ListItemInfoCopy Snap @@ -611,74 +611,66 @@ exports[`Test List Item Components - Experimental Enabled ListItemNav Snapshot testValue - - - - - - - + fillRule={0} + propList={ + [ + "fill", + "fillRule", + ] + } + /> + + @@ -753,7 +745,7 @@ exports[`Test List Item Components - Experimental Enabled ListItemNavAlert Snap @@ -859,7 +851,7 @@ exports[`Test List Item Components - Experimental Enabled ListItemNavAlert Snap @@ -1032,7 +1024,6 @@ exports[`Test List Item Components - Experimental Enabled ListItemRadioWithAmou weight="Regular" > label - con nome molto molto lungo label - con nome molto molto lungo @@ -1704,7 +1694,7 @@ exports[`Test List Item Components - Experimental Enabled ListItemTransaction S @@ -2242,7 +2232,7 @@ exports[`Test List Item Components ListItemInfoCopy Snapshot 1`] = ` @@ -2416,74 +2406,66 @@ exports[`Test List Item Components ListItemNav Snapshot 1`] = ` testValue - - - - - - - + fillRule={0} + propList={ + [ + "fill", + "fillRule", + ] + } + /> + + @@ -2558,7 +2540,7 @@ exports[`Test List Item Components ListItemNavAlert Snapshot 1`] = ` @@ -2664,7 +2646,7 @@ exports[`Test List Item Components ListItemNavAlert Snapshot 1`] = ` @@ -2837,7 +2819,6 @@ exports[`Test List Item Components ListItemRadioWithAmount Snapshot 1`] = ` weight="SemiBold" > label - con nome molto molto lungo label - con nome molto molto lungo @@ -3509,7 +3489,7 @@ exports[`Test List Item Components ListItemTransaction Snapshot 1`] = ` diff --git a/src/components/modules/ModuleCredential.tsx b/src/components/modules/ModuleCredential.tsx index c5271ea3..9c83ad31 100644 --- a/src/components/modules/ModuleCredential.tsx +++ b/src/components/modules/ModuleCredential.tsx @@ -12,12 +12,12 @@ import { IOModuleStyles, IOSelectionListItemVisualParams, IOStyles, + IOVisualCostants, useIOTheme } from "../../core"; import { WithTestID } from "../../utils/types"; import { Badge } from "../badge"; import { IOIcons, Icon } from "../icons"; -import { HSpacer } from "../spacer"; import { LabelSmallAlt } from "../typography"; import { PressableModuleBase, @@ -51,7 +51,7 @@ const ModuleCredential = (props: WithTestID) => { const { icon, image, label, onPress, badge, ...pressableProps } = props; const iconComponent = ( - <> + {icon && } {image && ( ) => { accessibilityIgnoresInvertColors={true} /> )} - + ); return ( - {iconComponent} - + {(icon || image) && iconComponent} + ) => { const ModuleCredentialSkeleton = () => ( - - + + + diff --git a/src/components/modules/ModuleIDP.tsx b/src/components/modules/ModuleIDP.tsx index 04ce585c..50278632 100644 --- a/src/components/modules/ModuleIDP.tsx +++ b/src/components/modules/ModuleIDP.tsx @@ -22,6 +22,7 @@ interface ModuleIDP extends PressableModuleBaseProps { name: string; localLogo: ImageSourcePropType; logo: ImageSourcePropType; + accessibilityLabel?: string; } const styles = StyleSheet.create({ @@ -59,7 +60,8 @@ export const ModuleIDP = ({ logo, withLooseSpacing = false, onPress, - testID + testID, + accessibilityLabel }: ModuleIDP) => { const { isExperimental } = useIOExperimentalDesign(); @@ -80,6 +82,7 @@ export const ModuleIDP = ({ styles.idpName, isExperimental ? styles.idpNameFont : styles.idpLegacyNameFont ]} + accessibilityLabel={accessibilityLabel ?? name} > {name} diff --git a/src/components/modules/ModuleNavigation.tsx b/src/components/modules/ModuleNavigation.tsx new file mode 100644 index 00000000..4dc089e0 --- /dev/null +++ b/src/components/modules/ModuleNavigation.tsx @@ -0,0 +1,119 @@ +import React from "react"; +import { + Image, + ImageSourcePropType, + ImageURISource, + StyleSheet, + View +} from "react-native"; +import Placeholder from "rn-placeholder"; +import { + IOListItemVisualParams, + IOModuleStyles, + IOSelectionListItemVisualParams, + IOStyles, + IOVisualCostants, + useIOTheme +} from "../../core"; +import { WithTestID } from "../../utils/types"; +import { Badge } from "../badge"; +import { IOIcons, Icon } from "../icons"; +import { VSpacer } from "../spacer"; +import { Chip, LabelSmallAlt } from "../typography"; +import { + PressableModuleBase, + PressableModuleBaseProps +} from "./PressableModuleBase"; + +type LoadingProps = { + isLoading: true; +}; + +type ImageProps = + | { icon: IOIcons; image?: never } + | { icon?: never; image: ImageURISource | ImageSourcePropType }; + +type BaseProps = { + isLoading?: false; + title: string; + subtitle?: string; + badge?: Badge; +} & ImageProps & + PressableModuleBaseProps; + +type ModuleNavigationProps = LoadingProps | BaseProps; + +export const ModuleNavigation = (props: WithTestID) => { + const theme = useIOTheme(); + + if (props.isLoading) { + return ; + } + + const { icon, image, title, subtitle, onPress, badge, ...pressableProps } = + props; + + const iconComponent = ( + + {icon && } + {image && ( + + )} + + ); + + return ( + + {(icon || image) && iconComponent} + + + {title} + + {subtitle && {subtitle}} + + + {badge ? ( + + ) : onPress ? ( + + ) : null} + + + ); +}; + +const ModuleNavigationSkeleton = () => ( + + + + + + + + + + + + + +); + +const styles = StyleSheet.create({ + image: { + width: IOSelectionListItemVisualParams.iconSize, + height: IOSelectionListItemVisualParams.iconSize, + resizeMode: "contain" + } +}); diff --git a/src/components/modules/index.tsx b/src/components/modules/index.tsx index c55410c9..f3957d35 100644 --- a/src/components/modules/index.tsx +++ b/src/components/modules/index.tsx @@ -2,5 +2,6 @@ export * from "./ModuleAttachment"; export * from "./ModuleCheckout"; export * from "./ModuleCredential"; export * from "./ModuleIDP"; +export * from "./ModuleNavigation"; export * from "./ModulePaymentNotice"; export * from "./PressableModuleBase"; diff --git a/src/components/otpInput/OTPInput.tsx b/src/components/otpInput/OTPInput.tsx index ca247558..eecf98ef 100644 --- a/src/components/otpInput/OTPInput.tsx +++ b/src/components/otpInput/OTPInput.tsx @@ -19,6 +19,7 @@ type Props = { accessibilityLabel?: string; accessibilityHint?: string; inputAccessoryViewID?: string; + autoFocus?: boolean; }; /** @@ -46,11 +47,12 @@ export const OTPInput = React.forwardRef( errorMessage = "", secret = false, autocomplete = false, - inputAccessoryViewID + inputAccessoryViewID, + autoFocus = false }, ref ) => { - const [hasFocus, setHasFocus] = React.useState(false); + const [hasFocus, setHasFocus] = React.useState(autoFocus); const [hasError, setHasError] = React.useState(false); const { translate, animatedStyle, shakeAnimation } = @@ -119,6 +121,7 @@ export const OTPInput = React.forwardRef( autoComplete={autocomplete ? "sms-otp" : undefined} inputAccessoryViewID={inputAccessoryViewID} accessible={true} + autoFocus={autoFocus} /> {[...Array(length)].map((_, i) => ( ; @@ -373,7 +378,9 @@ export const IOPictogramsBleed: { doc: PictogramBleedDoc, qrCode: PictogramBleedQrCode, lostConnection: PictogramBleedLostConnection, - payments: PictogramBleedPayments + payments: PictogramBleedPayments, + activate: PictogramBleedActivate, + reactivate: PictogramBleedReactivate }; export const PictogramBleed = ({ diff --git a/src/components/pictograms/svg/PictogramBleedActivate.tsx b/src/components/pictograms/svg/PictogramBleedActivate.tsx new file mode 100644 index 00000000..17051471 --- /dev/null +++ b/src/components/pictograms/svg/PictogramBleedActivate.tsx @@ -0,0 +1,46 @@ +import React from "react"; +import { Svg, Path } from "react-native-svg"; +import { SVGPictogramProps } from "../types"; + +const PictogramBleedActivate = ({ + size, + colorValues, + ...props +}: SVGPictogramProps) => ( + + + + + + + + + + +); + +export default PictogramBleedActivate; diff --git a/src/components/pictograms/svg/PictogramBleedPayments.tsx b/src/components/pictograms/svg/PictogramBleedPayments.tsx index b3e1ea83..6cb09e9f 100644 --- a/src/components/pictograms/svg/PictogramBleedPayments.tsx +++ b/src/components/pictograms/svg/PictogramBleedPayments.tsx @@ -1,5 +1,5 @@ import React from "react"; -import { Path, Svg } from "react-native-svg"; +import { Svg, Path } from "react-native-svg"; import { SVGPictogramProps } from "../types"; const PictogramBleedPayments = ({ @@ -7,17 +7,17 @@ const PictogramBleedPayments = ({ colorValues, ...props }: SVGPictogramProps) => ( - + diff --git a/src/components/pictograms/svg/PictogramBleedReactivate.tsx b/src/components/pictograms/svg/PictogramBleedReactivate.tsx new file mode 100644 index 00000000..dbd099a7 --- /dev/null +++ b/src/components/pictograms/svg/PictogramBleedReactivate.tsx @@ -0,0 +1,50 @@ +import React from "react"; +import { Svg, Path } from "react-native-svg"; +import { SVGPictogramProps } from "../types"; + +const PictogramBleedReactivate = ({ + size, + colorValues, + ...props +}: SVGPictogramProps) => ( + + + + + + + + + + + +); + +export default PictogramBleedReactivate; diff --git a/src/components/pictograms/svg/PictogramHello.tsx b/src/components/pictograms/svg/PictogramHello.tsx index 3848778e..b2e98907 100644 --- a/src/components/pictograms/svg/PictogramHello.tsx +++ b/src/components/pictograms/svg/PictogramHello.tsx @@ -1,5 +1,5 @@ import React from "react"; -import { Path, Svg } from "react-native-svg"; +import { Svg, Path } from "react-native-svg"; import { SVGPictogramProps } from "../types"; const PictogramHello = ({ size, colorValues, ...props }: SVGPictogramProps) => ( diff --git a/src/components/pictograms/svg/PictogramPayments.tsx b/src/components/pictograms/svg/PictogramPayments.tsx index d2f480a3..5c59c4d0 100644 --- a/src/components/pictograms/svg/PictogramPayments.tsx +++ b/src/components/pictograms/svg/PictogramPayments.tsx @@ -1,5 +1,5 @@ import React from "react"; -import { Path, Svg } from "react-native-svg"; +import { Svg, Path } from "react-native-svg"; import { SVGPictogramProps } from "../types"; const PictogramPayments = ({ diff --git a/src/components/pictograms/svg/originals/PictogramBleedActivate.svg b/src/components/pictograms/svg/originals/PictogramBleedActivate.svg new file mode 100644 index 00000000..e6cdcdf8 --- /dev/null +++ b/src/components/pictograms/svg/originals/PictogramBleedActivate.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/pictograms/svg/originals/PictogramBleedPayments.svg b/src/components/pictograms/svg/originals/PictogramBleedPayments.svg index fb8b117c..31d70eeb 100644 --- a/src/components/pictograms/svg/originals/PictogramBleedPayments.svg +++ b/src/components/pictograms/svg/originals/PictogramBleedPayments.svg @@ -1,21 +1 @@ - - - - - - - - - - - - + \ No newline at end of file diff --git a/src/components/pictograms/svg/originals/PictogramBleedReactivate.svg b/src/components/pictograms/svg/originals/PictogramBleedReactivate.svg new file mode 100644 index 00000000..af9ee161 --- /dev/null +++ b/src/components/pictograms/svg/originals/PictogramBleedReactivate.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/pictograms/svg/originals/PictogramComunicationProblem.svg b/src/components/pictograms/svg/originals/PictogramComunicationProblem.svg index a94524f3..0244835e 100644 --- a/src/components/pictograms/svg/originals/PictogramComunicationProblem.svg +++ b/src/components/pictograms/svg/originals/PictogramComunicationProblem.svg @@ -1,91 +1 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - -; + \ No newline at end of file diff --git a/src/components/pictograms/svg/originals/PictogramEventClose.svg b/src/components/pictograms/svg/originals/PictogramEventClose.svg index b10f61fd..39d9a9d4 100644 --- a/src/components/pictograms/svg/originals/PictogramEventClose.svg +++ b/src/components/pictograms/svg/originals/PictogramEventClose.svg @@ -1,34 +1 @@ - - - - - - - - - - - - - -; + \ No newline at end of file diff --git a/src/components/pictograms/svg/originals/PictogramHello.svg b/src/components/pictograms/svg/originals/PictogramHello.svg index 5d244be3..e94cc509 100644 --- a/src/components/pictograms/svg/originals/PictogramHello.svg +++ b/src/components/pictograms/svg/originals/PictogramHello.svg @@ -1,8 +1 @@ - - - - - - - - + \ No newline at end of file diff --git a/src/components/pictograms/svg/originals/PictogramPayments.svg b/src/components/pictograms/svg/originals/PictogramPayments.svg index ce12546e..52870a88 100644 --- a/src/components/pictograms/svg/originals/PictogramPayments.svg +++ b/src/components/pictograms/svg/originals/PictogramPayments.svg @@ -1,28 +1 @@ - - - - - - - - - - - - + \ No newline at end of file diff --git a/src/components/tag/Tag.tsx b/src/components/tag/Tag.tsx index ce331403..c5536aa7 100644 --- a/src/components/tag/Tag.tsx +++ b/src/components/tag/Tag.tsx @@ -12,60 +12,34 @@ import { makeFontStyleObject } from "../../utils/fonts"; import { WithTestID } from "../../utils/types"; import { IOIconSizeScale, IOIcons, Icon } from "../icons"; -export type Tag = WithTestID<{ - text?: string; - variant: - | "qrCode" - | "legalMessage" - | "info" - | "warning" - | "error" - | "success" - | "attachment" - | "noIcon"; - iconAccessibilityLabel?: string; -}>; +export type Tag = WithTestID< + | { + text?: string; + variant: + | "qrCode" + | "legalMessage" + | "info" + | "warning" + | "error" + | "success" + | "attachment" + | "noIcon"; + iconAccessibilityLabel?: string; + customIconProps?: never; + } + | { + text?: string; + variant: "customIcon"; + customIconProps: VariantProps; + iconAccessibilityLabel?: string; + } +>; type VariantProps = { iconColor: IOColors; iconName: IOIcons; }; -const mapVariants: Record< - NonNullable, - VariantProps | undefined -> = { - qrCode: { - iconColor: "blueIO-500", - iconName: "qrCode" - }, - attachment: { - iconColor: "grey-700", - iconName: "attachment" - }, - legalMessage: { - iconColor: "blueIO-500", - iconName: "legalValue" - }, - info: { - iconColor: "info-700", - iconName: "info" - }, - warning: { - iconColor: "warning-700", - iconName: "warningFilled" - }, - error: { - iconColor: "error-600", - iconName: "errorFilled" - }, - success: { - iconColor: "success-700", - iconName: "success" - }, - noIcon: undefined -}; - const IOTagIconMargin: IOSpacingScale = 6; const IOTagIconSize: IOIconSizeScale = 16; @@ -111,15 +85,73 @@ const styles = StyleSheet.create({ } }); +const getVariantProps = ( + variant: NonNullable, + customIconProps?: VariantProps +): VariantProps | undefined => { + switch (variant) { + case "customIcon": + return customIconProps; + case "qrCode": + return { + iconColor: "blueIO-500", + iconName: "qrCode" + }; + case "attachment": + return { + iconColor: "grey-700", + iconName: "attachment" + }; + case "legalMessage": + return { + iconColor: "blueIO-500", + iconName: "legalValue" + }; + case "info": + return { + iconColor: "info-700", + iconName: "info" + }; + case "warning": + return { + iconColor: "warning-700", + iconName: "warningFilled" + }; + case "error": + return { + iconColor: "error-600", + iconName: "errorFilled" + }; + case "success": + return { + iconColor: "success-700", + iconName: "success" + }; + case "noIcon": + return undefined; + default: + return undefined; + } +}; + /** * Tag component, used mainly for message list and details */ -export const Tag = ({ text, variant, testID, iconAccessibilityLabel }: Tag) => { +export const Tag = ({ + text, + variant, + testID, + customIconProps, + iconAccessibilityLabel +}: Tag) => { const { isExperimental } = useIOExperimentalDesign(); + + const variantProps = getVariantProps(variant, customIconProps); + return ( {pipe( - mapVariants[variant], + variantProps, O.fromNullable, O.fold( () => null, @@ -136,7 +168,7 @@ export const Tag = ({ text, variant, testID, iconAccessibilityLabel }: Tag) => { ) ) )} - {mapVariants[variant] && text && } + {variantProps && text && } {text && (