From 899788fcc35aa8169a796e29dde376bed61f6b2f Mon Sep 17 00:00:00 2001 From: Damiano Plebani Date: Tue, 19 Sep 2023 16:10:25 +0200 Subject: [PATCH] [IOAPPFD0-150] Add the new `IOPictogramsObject` set (#74) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Short description This PR adds a new `IOPictogramsObject` set to distinguish between pictograms with hands and objects and pictograms with objects only. ## List of changes proposed in this pull request - Add the new `IOPictogramsObject` object - Move `FeatureInfo` component in the correct folder (was in `example` before, not exported) - Add three new pictograms: - key - clock - message ### Preview ## How to test Go to the example app → **Pictograms** --- example/src/pages/Advice.tsx | 4 +- example/src/pages/Pictograms.tsx | 27 ++++++++ .../components/featureInfo}/FeatureInfo.tsx | 14 ++-- src/components/featureInfo/index.tsx | 1 + src/components/index.tsx | 1 + src/components/pictograms/Pictogram.tsx | 43 +++++++++--- .../pictograms/svg/PictogramIBANCard.tsx | 67 ------------------- .../pictograms/svg/PictogramObjClock.tsx | 20 ++++++ .../svg/PictogramObjFlyingMessage.tsx | 24 +++++++ ...sage.tsx => PictogramObjFollowMessage.tsx} | 4 +- .../pictograms/svg/PictogramObjIbanCard.tsx | 67 +++++++++++++++++++ .../pictograms/svg/PictogramObjKey.tsx | 22 ++++++ ...ogramManual.tsx => PictogramObjManual.tsx} | 4 +- ...ctogramTrash.tsx => PictogramObjTrash.tsx} | 4 +- .../svg/originals/PictogramIBANCard.svg | 15 ----- .../svg/originals/PictogramObjClock.svg | 12 ++++ .../originals/PictogramObjFlyingMessage.svg | 12 ++++ ...sage.svg => PictogramObjFollowMessage.svg} | 0 .../svg/originals/PictogramObjIbanCard.svg | 59 ++++++++++++++++ .../svg/originals/PictogramObjKey.svg | 14 ++++ ...ogramManual.svg => PictogramObjManual.svg} | 0 ...ctogramTrash.svg => PictogramObjTrash.svg} | 0 22 files changed, 308 insertions(+), 106 deletions(-) rename {example/src/components => src/components/featureInfo}/FeatureInfo.tsx (92%) create mode 100644 src/components/featureInfo/index.tsx delete mode 100644 src/components/pictograms/svg/PictogramIBANCard.tsx create mode 100644 src/components/pictograms/svg/PictogramObjClock.tsx create mode 100644 src/components/pictograms/svg/PictogramObjFlyingMessage.tsx rename src/components/pictograms/svg/{PictogramFollowMessage.tsx => PictogramObjFollowMessage.tsx} (95%) create mode 100644 src/components/pictograms/svg/PictogramObjIbanCard.tsx create mode 100644 src/components/pictograms/svg/PictogramObjKey.tsx rename src/components/pictograms/svg/{PictogramManual.tsx => PictogramObjManual.tsx} (95%) rename src/components/pictograms/svg/{PictogramTrash.tsx => PictogramObjTrash.tsx} (94%) delete mode 100644 src/components/pictograms/svg/originals/PictogramIBANCard.svg create mode 100644 src/components/pictograms/svg/originals/PictogramObjClock.svg create mode 100644 src/components/pictograms/svg/originals/PictogramObjFlyingMessage.svg rename src/components/pictograms/svg/originals/{PictogramFollowMessage.svg => PictogramObjFollowMessage.svg} (100%) create mode 100644 src/components/pictograms/svg/originals/PictogramObjIbanCard.svg create mode 100644 src/components/pictograms/svg/originals/PictogramObjKey.svg rename src/components/pictograms/svg/originals/{PictogramManual.svg => PictogramObjManual.svg} (100%) rename src/components/pictograms/svg/originals/{PictogramTrash.svg => PictogramObjTrash.svg} (100%) diff --git a/example/src/pages/Advice.tsx b/example/src/pages/Advice.tsx index 5db6fc56..f378b329 100644 --- a/example/src/pages/Advice.tsx +++ b/example/src/pages/Advice.tsx @@ -1,4 +1,5 @@ import { + FeatureInfo, Banner, H2, IOPictogramsBleed, @@ -9,7 +10,6 @@ import { import React from "react"; import { Alert, View } from "react-native"; import { ComponentViewerBox } from "../components/ComponentViewerBox"; -import { FeatureInfo } from "../components/FeatureInfo"; import { Screen } from "../components/Screen"; const onLinkPress = () => { @@ -75,7 +75,7 @@ const renderFeatureInfo = () => ( { ))} +

+ Objects Pictograms +

+ + {Object.entries(IOPictogramsObject).map(([pictogramItemName]) => ( + + } + /> + ))} + +

} - + {actionLabel} - + )} diff --git a/src/components/featureInfo/index.tsx b/src/components/featureInfo/index.tsx new file mode 100644 index 00000000..e9391bcf --- /dev/null +++ b/src/components/featureInfo/index.tsx @@ -0,0 +1 @@ +export * from "./FeatureInfo"; diff --git a/src/components/index.tsx b/src/components/index.tsx index e919c972..546e6fff 100644 --- a/src/components/index.tsx +++ b/src/components/index.tsx @@ -6,6 +6,7 @@ export * from "./buttons"; export * from "./checkbox"; export * from "./contentWrapper"; export * from "./divider"; +export * from "./featureInfo"; export * from "./icons"; export * from "./listitems"; export * from "./logos"; diff --git a/src/components/pictograms/Pictogram.tsx b/src/components/pictograms/Pictogram.tsx index 1269b861..096da0d2 100644 --- a/src/components/pictograms/Pictogram.tsx +++ b/src/components/pictograms/Pictogram.tsx @@ -17,13 +17,10 @@ import PictogramEmptyArchive from "./svg/PictogramEmptyArchive"; import PictogramError from "./svg/PictogramError"; import PictogramFeedback from "./svg/PictogramFeedback"; import PictogramFireworks from "./svg/PictogramFireworks"; -import PictogramFollowMessage from "./svg/PictogramFollowMessage"; import PictogramHeart from "./svg/PictogramHeart"; import PictogramHourglass from "./svg/PictogramHourglass"; -import PictogramIBANCard from "./svg/PictogramIBANCard"; import PictogramInProgress from "./svg/PictogramInProgress"; import PictogramInbox from "./svg/PictogramInbox"; -import PictogramManual from "./svg/PictogramManual"; import PictogramNotAvailable from "./svg/PictogramNotAvailable"; import PictogramPiggyBank from "./svg/PictogramPiggyBank"; import PictogramPin from "./svg/PictogramPin"; @@ -53,11 +50,17 @@ import PictogramStopSecurity from "./svg/PictogramStopSecurity"; import PictogramSecurity from "./svg/PictogramSecurity"; import PictogramPasscode from "./svg/PictogramPasscode"; import PictogramIdentityCheck from "./svg/PictogramIdentityCheck"; -import PictogramTrash from "./svg/PictogramTrash"; import PictogramCharity from "./svg/PictogramCharity"; import PictogramEmpty from "./svg/PictogramEmpty"; import PictogramCie from "./svg/PictogramCie"; import PictogramFeature from "./svg/PictogramFeature"; +import PictogramObjClock from "./svg/PictogramObjClock"; +import PictogramObjIbanCard from "./svg/PictogramObjIbanCard"; +import PictogramObjManual from "./svg/PictogramObjManual"; +import PictogramObjTrash from "./svg/PictogramObjTrash"; +import PictogramObjKey from "./svg/PictogramObjKey"; +import PictogramObjFlyingMessage from "./svg/PictogramObjFlyingMessage"; +import PictogramObjFollowMessage from "./svg/PictogramObjFollowMessage"; /* Bleed Pictograms */ import PictogramBleedCharity from "./svg/PictogramBleedCharity"; import PictogramBleedHelp from "./svg/PictogramBleedHelp"; @@ -99,10 +102,6 @@ export const IOPictograms = { heart: PictogramHeart, completed: PictogramCompleted, // End legacy pictograms - ibanCard: PictogramIBANCard, - followMessage: PictogramFollowMessage, - manual: PictogramManual, - trash: PictogramTrash, empty: PictogramEmpty, feature: PictogramFeature, charity: PictogramCharity, @@ -125,7 +124,16 @@ export const IOPictograms = { security: PictogramSecurity, cie: PictogramCie, time: PictogramTime, - passcode: PictogramPasscode + passcode: PictogramPasscode, + // Start Objects Pictogram + ibanCard: PictogramObjIbanCard, + followMessage: PictogramObjFollowMessage, + manual: PictogramObjManual, + trash: PictogramObjTrash, + clock: PictogramObjClock, + key: PictogramObjKey, + flyingMessage: PictogramObjFlyingMessage + // End Objects Pictogram }; export type IOPictograms = keyof typeof IOPictograms; @@ -187,6 +195,23 @@ export const PictogramBleed = ({ return ; }; +/* Object Pictograms */ + +const { ibanCard, followMessage, manual, trash, clock, key, flyingMessage } = + IOPictograms; + +export const IOPictogramsObject = { + ibanCard, + followMessage, + manual, + trash, + clock, + key, + flyingMessage +} as const; + +export type IOPictogramsObject = keyof typeof IOPictogramsObject; + /* Legacy pictograms */ const { diff --git a/src/components/pictograms/svg/PictogramIBANCard.tsx b/src/components/pictograms/svg/PictogramIBANCard.tsx deleted file mode 100644 index 39a2bc05..00000000 --- a/src/components/pictograms/svg/PictogramIBANCard.tsx +++ /dev/null @@ -1,67 +0,0 @@ -import React from "react"; -import { Svg, G, Mask, Path } from "react-native-svg"; -import { SVGPictogramProps } from "../Pictogram"; - -const IBANCard = ({ size, color, ...props }: SVGPictogramProps) => ( - - - - - - - - - - - - - - - -); - -export default IBANCard; diff --git a/src/components/pictograms/svg/PictogramObjClock.tsx b/src/components/pictograms/svg/PictogramObjClock.tsx new file mode 100644 index 00000000..9794f503 --- /dev/null +++ b/src/components/pictograms/svg/PictogramObjClock.tsx @@ -0,0 +1,20 @@ +import React from "react"; +import { Svg, Path } from "react-native-svg"; +import { SVGPictogramProps } from "../Pictogram"; + +const PictogramObjClock = ({ size, color, ...props }: SVGPictogramProps) => ( + + + + +); + +export default PictogramObjClock; diff --git a/src/components/pictograms/svg/PictogramObjFlyingMessage.tsx b/src/components/pictograms/svg/PictogramObjFlyingMessage.tsx new file mode 100644 index 00000000..e560391e --- /dev/null +++ b/src/components/pictograms/svg/PictogramObjFlyingMessage.tsx @@ -0,0 +1,24 @@ +import React from "react"; +import { Svg, Path } from "react-native-svg"; +import { SVGPictogramProps } from "../Pictogram"; + +const PictogramObjFlyingMessage = ({ + size, + color, + ...props +}: SVGPictogramProps) => ( + + + + +); + +export default PictogramObjFlyingMessage; diff --git a/src/components/pictograms/svg/PictogramFollowMessage.tsx b/src/components/pictograms/svg/PictogramObjFollowMessage.tsx similarity index 95% rename from src/components/pictograms/svg/PictogramFollowMessage.tsx rename to src/components/pictograms/svg/PictogramObjFollowMessage.tsx index 413c3412..397f13df 100644 --- a/src/components/pictograms/svg/PictogramFollowMessage.tsx +++ b/src/components/pictograms/svg/PictogramObjFollowMessage.tsx @@ -2,7 +2,7 @@ import React from "react"; import { Svg, Path } from "react-native-svg"; import { SVGPictogramProps } from "../Pictogram"; -const PictogramFollowMessage = ({ +const PictogramObjFollowMessage = ({ size, color, ...props @@ -19,4 +19,4 @@ const PictogramFollowMessage = ({ ); -export default PictogramFollowMessage; +export default PictogramObjFollowMessage; diff --git a/src/components/pictograms/svg/PictogramObjIbanCard.tsx b/src/components/pictograms/svg/PictogramObjIbanCard.tsx new file mode 100644 index 00000000..8ddde657 --- /dev/null +++ b/src/components/pictograms/svg/PictogramObjIbanCard.tsx @@ -0,0 +1,67 @@ +import React from "react"; +import { Svg, G, Mask, Path } from "react-native-svg"; +import { SVGPictogramProps } from "../Pictogram"; + +const PictogramObjIbanCard = ({ size, color, ...props }: SVGPictogramProps) => ( + + + + + + + + + + + + + + + +); + +export default PictogramObjIbanCard; diff --git a/src/components/pictograms/svg/PictogramObjKey.tsx b/src/components/pictograms/svg/PictogramObjKey.tsx new file mode 100644 index 00000000..cc5be8a9 --- /dev/null +++ b/src/components/pictograms/svg/PictogramObjKey.tsx @@ -0,0 +1,22 @@ +import React from "react"; +import { Svg, Path } from "react-native-svg"; +import { SVGPictogramProps } from "../Pictogram"; + +const PictogramObjKey = ({ size, color, ...props }: SVGPictogramProps) => ( + + + + +); + +export default PictogramObjKey; diff --git a/src/components/pictograms/svg/PictogramManual.tsx b/src/components/pictograms/svg/PictogramObjManual.tsx similarity index 95% rename from src/components/pictograms/svg/PictogramManual.tsx rename to src/components/pictograms/svg/PictogramObjManual.tsx index 71089159..50680b9b 100644 --- a/src/components/pictograms/svg/PictogramManual.tsx +++ b/src/components/pictograms/svg/PictogramObjManual.tsx @@ -2,7 +2,7 @@ import React from "react"; import { Svg, Path } from "react-native-svg"; import { SVGPictogramProps } from "../Pictogram"; -const PictogramManual = ({ size, color, ...props }: SVGPictogramProps) => ( +const PictogramObjManual = ({ size, color, ...props }: SVGPictogramProps) => ( ( ); -export default PictogramManual; +export default PictogramObjManual; diff --git a/src/components/pictograms/svg/PictogramTrash.tsx b/src/components/pictograms/svg/PictogramObjTrash.tsx similarity index 94% rename from src/components/pictograms/svg/PictogramTrash.tsx rename to src/components/pictograms/svg/PictogramObjTrash.tsx index f06d502f..3e014c04 100644 --- a/src/components/pictograms/svg/PictogramTrash.tsx +++ b/src/components/pictograms/svg/PictogramObjTrash.tsx @@ -2,7 +2,7 @@ import React from "react"; import { Svg, Path } from "react-native-svg"; import { SVGPictogramProps } from "../Pictogram"; -const PictogramTrash = ({ size, color, ...props }: SVGPictogramProps) => ( +const PictogramObjTrash = ({ size, color, ...props }: SVGPictogramProps) => ( ( ); -export default PictogramTrash; +export default PictogramObjTrash; diff --git a/src/components/pictograms/svg/originals/PictogramIBANCard.svg b/src/components/pictograms/svg/originals/PictogramIBANCard.svg deleted file mode 100644 index d6036aa7..00000000 --- a/src/components/pictograms/svg/originals/PictogramIBANCard.svg +++ /dev/null @@ -1,15 +0,0 @@ - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/src/components/pictograms/svg/originals/PictogramObjClock.svg b/src/components/pictograms/svg/originals/PictogramObjClock.svg new file mode 100644 index 00000000..c08e83e4 --- /dev/null +++ b/src/components/pictograms/svg/originals/PictogramObjClock.svg @@ -0,0 +1,12 @@ + + + + diff --git a/src/components/pictograms/svg/originals/PictogramObjFlyingMessage.svg b/src/components/pictograms/svg/originals/PictogramObjFlyingMessage.svg new file mode 100644 index 00000000..7e54ca01 --- /dev/null +++ b/src/components/pictograms/svg/originals/PictogramObjFlyingMessage.svg @@ -0,0 +1,12 @@ + + + + diff --git a/src/components/pictograms/svg/originals/PictogramFollowMessage.svg b/src/components/pictograms/svg/originals/PictogramObjFollowMessage.svg similarity index 100% rename from src/components/pictograms/svg/originals/PictogramFollowMessage.svg rename to src/components/pictograms/svg/originals/PictogramObjFollowMessage.svg diff --git a/src/components/pictograms/svg/originals/PictogramObjIbanCard.svg b/src/components/pictograms/svg/originals/PictogramObjIbanCard.svg new file mode 100644 index 00000000..58cb56d0 --- /dev/null +++ b/src/components/pictograms/svg/originals/PictogramObjIbanCard.svg @@ -0,0 +1,59 @@ + + + + + + + + + + + + + + + diff --git a/src/components/pictograms/svg/originals/PictogramObjKey.svg b/src/components/pictograms/svg/originals/PictogramObjKey.svg new file mode 100644 index 00000000..3705731f --- /dev/null +++ b/src/components/pictograms/svg/originals/PictogramObjKey.svg @@ -0,0 +1,14 @@ + + + + diff --git a/src/components/pictograms/svg/originals/PictogramManual.svg b/src/components/pictograms/svg/originals/PictogramObjManual.svg similarity index 100% rename from src/components/pictograms/svg/originals/PictogramManual.svg rename to src/components/pictograms/svg/originals/PictogramObjManual.svg diff --git a/src/components/pictograms/svg/originals/PictogramTrash.svg b/src/components/pictograms/svg/originals/PictogramObjTrash.svg similarity index 100% rename from src/components/pictograms/svg/originals/PictogramTrash.svg rename to src/components/pictograms/svg/originals/PictogramObjTrash.svg