From 408009bef32a8f9ab7329624fba3b428d6f672d4 Mon Sep 17 00:00:00 2001 From: Gianluca Spada Date: Wed, 18 Sep 2024 17:43:32 +0200 Subject: [PATCH] feat: [EUDIW-54] Add new pictograms for EUDIW app (#332) ## Short description This PR adds three new pictograms created for the EUDIW app. ## List of changes proposed in this pull request - Added `PictogramFingerprint` - Added `PictogramSmile` - Added `PictogramWalletDoc` ## How to test Use the new pictograms in the `Pictogram` component or run the storybook. --- scripts/pictograms_timestamp.txt | 2 +- src/components/pictograms/Pictogram.tsx | 13 ++++- .../pictograms/svg/PictogramFingerprint.tsx | 50 +++++++++++++++++++ .../pictograms/svg/PictogramSmile.tsx | 22 ++++++++ .../pictograms/svg/PictogramWalletDoc.tsx | 44 ++++++++++++++++ .../svg/originals/PictogramFingerprint.svg | 1 + .../svg/originals/PictogramSmile.svg | 1 + .../svg/originals/PictogramWalletDoc.svg | 1 + src/core/IOColors.ts | 4 +- 9 files changed, 134 insertions(+), 4 deletions(-) create mode 100644 src/components/pictograms/svg/PictogramFingerprint.tsx create mode 100644 src/components/pictograms/svg/PictogramSmile.tsx create mode 100644 src/components/pictograms/svg/PictogramWalletDoc.tsx create mode 100644 src/components/pictograms/svg/originals/PictogramFingerprint.svg create mode 100644 src/components/pictograms/svg/originals/PictogramSmile.svg create mode 100644 src/components/pictograms/svg/originals/PictogramWalletDoc.svg diff --git a/scripts/pictograms_timestamp.txt b/scripts/pictograms_timestamp.txt index 0c29636d..519f491c 100644 --- a/scripts/pictograms_timestamp.txt +++ b/scripts/pictograms_timestamp.txt @@ -1 +1 @@ -2024-07-10T13:20:00.647Z \ No newline at end of file +2024-09-13T09:57:37.653Z \ No newline at end of file diff --git a/src/components/pictograms/Pictogram.tsx b/src/components/pictograms/Pictogram.tsx index a32a5ce2..9873ef95 100644 --- a/src/components/pictograms/Pictogram.tsx +++ b/src/components/pictograms/Pictogram.tsx @@ -95,6 +95,7 @@ import PictogramEmailDotCheck from "./svg/PictogramEmailDotCheck"; import PictogramEmailDotNotif from "./svg/PictogramEmailDotNotif"; import PictogramEnded from "./svg/PictogramEnded"; import PictogramEventClose from "./svg/PictogramEventClose"; +import PictogramFingerprint from "./svg/PictogramFingerprint"; import PictogramIdea from "./svg/PictogramIdea"; import PictogramLostConnection from "./svg/PictogramLostConnection"; import PictogramMessage from "./svg/PictogramMessage"; @@ -106,8 +107,10 @@ import PictogramQrCode from "./svg/PictogramQrCode"; import PictogramReactivate from "./svg/PictogramReactivate"; import PictogramSearchLens from "./svg/PictogramSearchLens"; import PictogramSettings from "./svg/PictogramSettings"; +import PictogramSmile from "./svg/PictogramSmile"; import PictogramStar from "./svg/PictogramStar"; import PictogramTiming from "./svg/PictogramTiming"; +import PictogramWalletDoc from "./svg/PictogramWalletDoc"; import { IOPictogramSizeScale, SVGPictogramProps } from "./types"; export const IOPictograms = { @@ -169,6 +172,9 @@ export const IOPictograms = { comunicationProblem: PictogramComunicationProblem, payments: PictogramPayments, workInProgress: PictogramWorkInProgress, + smile: PictogramSmile, + fingerprint: PictogramFingerprint, + walletDoc: PictogramWalletDoc, // Start Objects Pictogram ibanCard: PictogramObjIbanCard, followMessage: PictogramObjFollowMessage, @@ -196,6 +202,7 @@ type PictogramPalette = { hands: ColorValue; main: ColorValue; secondary: ColorValue; + tertiary: ColorValue; }; export const Pictogram = ({ @@ -223,7 +230,8 @@ export const Pictogram = ({ () => ({ hands: IOColors[themeObj["pictogram-hands"]], main: IOColors[themeObj["pictogram-tint-main"]], - secondary: IOColors[themeObj["pictogram-tint-secondary"]] + secondary: IOColors[themeObj["pictogram-tint-secondary"]], + tertiary: IOColors[themeObj["pictogram-tint-tertiary"]] }), [themeObj] ); @@ -365,7 +373,8 @@ export const PictogramBleed = ({ () => ({ hands: IOColors[themeObj["pictogram-hands"]], main: IOColors[themeObj["pictogram-tint-main"]], - secondary: IOColors[themeObj["pictogram-tint-secondary"]] + secondary: IOColors[themeObj["pictogram-tint-secondary"]], + tertiary: IOColors[themeObj["pictogram-tint-tertiary"]] }), [themeObj] ); diff --git a/src/components/pictograms/svg/PictogramFingerprint.tsx b/src/components/pictograms/svg/PictogramFingerprint.tsx new file mode 100644 index 00000000..9b71ea49 --- /dev/null +++ b/src/components/pictograms/svg/PictogramFingerprint.tsx @@ -0,0 +1,50 @@ +import React from "react"; +import { Svg, Path } from "react-native-svg"; +import { SVGPictogramProps } from "../types"; + +const PictogramFingerprint = ({ + size, + colorValues, + ...props +}: SVGPictogramProps) => ( + + + + + + + + + + + +); + +export default PictogramFingerprint; diff --git a/src/components/pictograms/svg/PictogramSmile.tsx b/src/components/pictograms/svg/PictogramSmile.tsx new file mode 100644 index 00000000..71de7c0d --- /dev/null +++ b/src/components/pictograms/svg/PictogramSmile.tsx @@ -0,0 +1,22 @@ +import React from "react"; +import { Svg, Path } from "react-native-svg"; +import { SVGPictogramProps } from "../types"; + +const PictogramSmile = ({ size, colorValues, ...props }: SVGPictogramProps) => ( + + + + +); + +export default PictogramSmile; diff --git a/src/components/pictograms/svg/PictogramWalletDoc.tsx b/src/components/pictograms/svg/PictogramWalletDoc.tsx new file mode 100644 index 00000000..0f4bdcf0 --- /dev/null +++ b/src/components/pictograms/svg/PictogramWalletDoc.tsx @@ -0,0 +1,44 @@ +import React from "react"; +import { Svg, Path } from "react-native-svg"; +import { SVGPictogramProps } from "../types"; + +const PictogramWalletDoc = ({ + size, + colorValues, + ...props +}: SVGPictogramProps) => ( + + + + + + + + + +); + +export default PictogramWalletDoc; diff --git a/src/components/pictograms/svg/originals/PictogramFingerprint.svg b/src/components/pictograms/svg/originals/PictogramFingerprint.svg new file mode 100644 index 00000000..f15d9581 --- /dev/null +++ b/src/components/pictograms/svg/originals/PictogramFingerprint.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/pictograms/svg/originals/PictogramSmile.svg b/src/components/pictograms/svg/originals/PictogramSmile.svg new file mode 100644 index 00000000..e42df606 --- /dev/null +++ b/src/components/pictograms/svg/originals/PictogramSmile.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/pictograms/svg/originals/PictogramWalletDoc.svg b/src/components/pictograms/svg/originals/PictogramWalletDoc.svg new file mode 100644 index 00000000..d9235baa --- /dev/null +++ b/src/components/pictograms/svg/originals/PictogramWalletDoc.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/core/IOColors.ts b/src/core/IOColors.ts index 1ee94cd1..a2f8e7f9 100644 --- a/src/core/IOColors.ts +++ b/src/core/IOColors.ts @@ -283,6 +283,7 @@ export type IOTheme = { "pictogram-hands": IOColors; "pictogram-tint-main": IOColors; "pictogram-tint-secondary": IOColors; + "pictogram-tint-tertiary": IOColors; }; export const IOThemeLight: IOTheme = { @@ -311,7 +312,8 @@ export const IOThemeLight: IOTheme = { // Pictograms "pictogram-hands": "blueIO-500", "pictogram-tint-main": "turquoise-150", - "pictogram-tint-secondary": "turquoise-500" + "pictogram-tint-secondary": "turquoise-500", + "pictogram-tint-tertiary": "blueIO-400" }; export const IOThemeLightLegacy: IOTheme = {