Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[IOAPPFD0-147] Add new pictograms and icons #69

Merged
merged 3 commits into from
Sep 15, 2023
Merged

[IOAPPFD0-147] Add new pictograms and icons #69

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
3c331bb
Add new pictograms and icons
dmnplb Sep 14, 2023
7201d63
Merge branch 'main' into IOAPPFD0-147-update-assets-itwallet
dmnplb Sep 15, 2023
51ac1de
Merge branch 'main' into IOAPPFD0-147-update-assets-itwallet
dmnplb Sep 15, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 22 additions & 16 deletions src/components/icons/Icon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -143,12 +143,15 @@ import IconTransactions from "./svg/IconTransactions";
import IconTrashcan from "./svg/IconTrashcan";
import IconWarningFilled from "./svg/IconWarningFilled";
import IconWebsite from "./svg/IconWebsite";
import IconOption from "./svg/IconOption";
import IconKey from "./svg/IconKey";
import IconNotification from "./svg/IconNotification";
import IconChange from "./svg/IconChange";
import IconDialpad from "./svg/IconDialpad";
import LegIconCheckOff from "./svg/LegIconCheckOff";
import LegIconCheckOn from "./svg/LegIconCheckOn";
import LegIconRadioOff from "./svg/LegIconRadioOff";
import LegIconRadioOn from "./svg/LegIconRadioOn";
import IconChange from "./svg/IconChange";
import IconDialpad from "./svg/IconDialpad";

export const IOIcons = {
archive: IconArchive,
Expand All @@ -166,7 +169,7 @@ export const IOIcons = {
hourglass: IconHourglass,
shareiOs: IconShareiOs,
shareAndroid: IconShareAndroid,
locked: IconLockOn /* io-lucchetto */,
locked: IconLockOn,
unlocked: IconLockOff,
initiatives: IconInitiatives,
analytics: IconAnalytics,
Expand All @@ -177,8 +180,8 @@ export const IOIcons = {
pinOn: IconPinOn,
emojiSad: IconEmojiSad,
emojiHappy: IconEmojiHappy,
phone: IconPhone /* io-phone */,
email: IconEmail /* io-envelope */,
phone: IconPhone,
email: IconEmail,
emailFill: IconEmailFill,
pec: IconPEC,
messageLegal: IconMessageLegal,
Expand All @@ -188,6 +191,8 @@ export const IOIcons = {
docSign: IconDocumentSign,
docAgree: IconAgreement,
security: IconSecurity,
option: IconOption,
key: IconKey,
docGiacenza: IconGiacenza,
docAttach: IconDocumentAttachment,
docAttachPDF: IconDocumentAttachmentPDF,
Expand All @@ -196,7 +201,7 @@ export const IOIcons = {
success: IconSuccess,
ok: IconOk,
fiscalCodeIndividual: IconFiscalCodeIndividual,
creditCard: IconCreditCard /* io-carta */,
creditCard: IconCreditCard,
bonus: IconBonus,
transactions: IconTransactions,
amount: IconAmount,
Expand All @@ -206,7 +211,7 @@ export const IOIcons = {
locationAndroid: IconLocationAndroid,
coggle: IconCoggle,
warningFilled: IconWarningFilled,
notice: IconNotice /* io-warning */,
notice: IconNotice,
noticeFilled: IconNoticeFilled,
info: IconInfo,
infoFilled: IconInfoFilled,
Expand All @@ -219,16 +224,17 @@ export const IOIcons = {
edit: IconEdit,
battery: IconBattery,
trashcan: IconTrashcan,
calendar: IconCalendar /* io-calendar */ /* io-calendario */,
calendar: IconCalendar,
profile: IconProfile,
profileFilled: IconProfileFilled,
profileAlt: IconProfileAlt /* io-titolare */,
profileAlt: IconProfileAlt,
lightbulb: IconLightbulb,
magicWand: IconMagicWand,
starFilled: IconStarFilled,
starEmpty: IconStarEmpty,
switchOff: IconSwitchOff,
device: IconDevice,
notification: IconNotification,
dialpad: IconDialpad,
dotMenu: IconDotMenu,
barcode: IconBarcode,
Expand All @@ -241,13 +247,13 @@ export const IOIcons = {
externalLink: IconExternalLink,
cancel: IconCancel,
help: IconQuestion,
search: IconSearch /* io-search */,
search: IconSearch,
chevronRight: IconChevronRight,
chevronLeft: IconChevronLeft,
chevronBottom: IconChevronBottom,
chevronTop: IconChevronTop,
chevronRightListItem: IconChevronRightListItem,
closeLarge: IconCloseLarge /* io-close */,
closeLarge: IconCloseLarge,
closeMedium: IconCloseMedium,
closeSmall: IconCloseSmall,
arrowBottom: IconArrowBottom,
Expand All @@ -257,9 +263,9 @@ export const IOIcons = {
change: IconChange,
backiOS: IconBackiOS,
backAndroid: IconBackAndroid,
navMessages: IconNavMessages /* io-messaggi */,
navMessages: IconNavMessages,
navMessagesFocused: IconNavMessagesFocused,
navWallet: IconNavWallet /* io-portafoglio */,
navWallet: IconNavWallet,
navWalletFocused: IconNavWalletFocused,
navScan: IconNavScan,
navServices: IconNavServices,
Expand All @@ -271,8 +277,8 @@ export const IOIcons = {
legRadioOff: LegIconRadioOff,
legCheckOn: LegIconCheckOn,
legCheckOff: LegIconCheckOff,
biomFingerprint: IconBiomFingerprint /* io-fingerprint */,
biomFaceID: IconBiomFaceID /* io-face-id */,
biomFingerprint: IconBiomFingerprint,
biomFaceID: IconBiomFaceID,
categCulture: IconCategCulture,
categWellness: IconCategWellness,
categLearning: IconCategLearning,
Expand All @@ -286,7 +292,7 @@ export const IOIcons = {
categShopping: IconCategShopping,
categSustainability: IconCategSustainability,
productIOApp: IconProductIOApp,
productPagoPA: IconProductPagoPA /* io-pagopa */,
productPagoPA: IconProductPagoPA,
productIOAppBlueBg: IconProductIOAppBlueBg,
checkTick: IconCheckTick,
checkTickBig: IconCheckTickBig,
Expand Down
4 changes: 1 addition & 3 deletions src/components/icons/svg/IconDialpad.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,8 @@ import { SVGIconProps } from "../Icon";
const IconDialpad = ({ size, style, ...props }: SVGIconProps) => (
<Svg width={size} height={size} viewBox="0 0 24 24" style={style} {...props}>
<Path
fillRule="evenodd"
clipRule="evenodd"
d="M23.7071 16.2929C24.0976 16.6834 24.0976 17.3166 23.7071 17.7071C23.3166 18.0976 22.6834 18.0976 22.2929 17.7071L20 15.4142L20 17C20 20.866 16.866 24 13 24L5 24C4.44772 24 4 23.5523 4 23C4 22.4477 4.44772 22 5 22L13 22C15.7614 22 18 19.7614 18 17L18 15.4142L15.7071 17.7071C15.3166 18.0976 14.6834 18.0976 14.2929 17.7071C13.9024 17.3166 13.9024 16.6834 14.2929 16.2929L18.2929 12.2929C18.6834 11.9024 19.3166 11.9024 19.7071 12.2929L23.7071 16.2929ZM6 7C6 4.23858 8.23858 2 11 2L19 2C19.5523 2 20 1.55228 20 1C20 0.447716 19.5523 1.94416e-07 19 2.18557e-07L11 5.68248e-07C7.13401 7.37236e-07 4 3.13401 4 7L4 8.58579L1.70711 6.29289C1.31658 5.90237 0.683417 5.90237 0.292892 6.29289C-0.0976322 6.68342 -0.0976322 7.31658 0.292892 7.70711L4.29289 11.7071C4.68342 12.0976 5.31658 12.0976 5.70711 11.7071L9.70711 7.70711C10.0976 7.31658 10.0976 6.68342 9.70711 6.29289C9.31658 5.90237 8.68342 5.90237 8.29289 6.29289L6 8.58578L6 7Z"
fill="currentColor"
d="M12 19C10.9 19 10 19.9 10 21C10 22.1 10.9 23 12 23C13.1 23 14 22.1 14 21C14 19.9 13.1 19 12 19ZM6 1C4.9 1 4 1.9 4 3C4 4.1 4.9 5 6 5C7.1 5 8 4.1 8 3C8 1.9 7.1 1 6 1ZM6 7C4.9 7 4 7.9 4 9C4 10.1 4.9 11 6 11C7.1 11 8 10.1 8 9C8 7.9 7.1 7 6 7ZM6 13C4.9 13 4 13.9 4 15C4 16.1 4.9 17 6 17C7.1 17 8 16.1 8 15C8 13.9 7.1 13 6 13ZM18 5C19.1 5 20 4.1 20 3C20 1.9 19.1 1 18 1C16.9 1 16 1.9 16 3C16 4.1 16.9 5 18 5ZM12 13C10.9 13 10 13.9 10 15C10 16.1 10.9 17 12 17C13.1 17 14 16.1 14 15C14 13.9 13.1 13 12 13ZM18 13C16.9 13 16 13.9 16 15C16 16.1 16.9 17 18 17C19.1 17 20 16.1 20 15C20 13.9 19.1 13 18 13ZM18 7C16.9 7 16 7.9 16 9C16 10.1 16.9 11 18 11C19.1 11 20 10.1 20 9C20 7.9 19.1 7 18 7ZM12 7C10.9 7 10 7.9 10 9C10 10.1 10.9 11 12 11C13.1 11 14 10.1 14 9C14 7.9 13.1 7 12 7ZM12 1C10.9 1 10 1.9 10 3C10 4.1 10.9 5 12 5C13.1 5 14 4.1 14 3C14 1.9 13.1 1 12 1Z"
/>
</Svg>
);
Expand Down
16 changes: 16 additions & 0 deletions src/components/icons/svg/IconKey.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import React from "react";
import { Svg, Path } from "react-native-svg";
import { SVGIconProps } from "../Icon";

const IconKey = ({ size, style, ...props }: SVGIconProps) => (
<Svg width={size} height={size} viewBox="0 0 24 24" style={style} {...props}>
<Path
fill="currentColor"
fillRule="evenodd"
clipRule="evenodd"
d="M16 12c0-1.6569 1.3431-3 3-3s3 1.3431 3 3-1.3431 3-3 3-3-1.3431-3-3Zm-1.901.9952A1.01133 1.01133 0 0 1 14 13H8v3c0 .5523-.44772 1-1 1s-1-.4477-1-1v-3H4v1c0 .5523-.44772 1-1 1s-1-.4477-1-1v-1H1c-.55229 0-1-.4477-1-1s.44771-1 1-1h13c.0334 0 .0665.0016.099.0048C14.5604 8.72019 16.5793 7 19 7c2.7614 0 5 2.23858 5 5 0 2.7614-2.2386 5-5 5-2.4207 0-4.4396-1.7202-4.901-4.0048Z"
/>
</Svg>
);

export default IconKey;
16 changes: 16 additions & 0 deletions src/components/icons/svg/IconNotification.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import React from "react";
import { Svg, Path } from "react-native-svg";
import { SVGIconProps } from "../Icon";

const IconNotification = ({ size, style, ...props }: SVGIconProps) => (
<Svg width={size} height={size} viewBox="0 0 24 24" style={style} {...props}>
<Path
fill="currentColor"
fillRule="evenodd"
clipRule="evenodd"
d="M17 8c2.2091 0 4-1.79086 4-4s-1.7909-4-4-4c-2.2091 0-4 1.79086-4 4s1.7909 4 4 4ZM8 1h3.8027c-.3377.58383-.5799 1.22984-.7052 1.91667H8c-1.65685 0-3 1.28718-3 2.875V19.2083c0 1.5879 1.34315 2.875 3 2.875h6c1.6569 0 3-1.2871 3-2.875V10c.7013 0 1.3744-.12031 2-.34141v9.54971C19 21.8547 16.7614 24 14 24H8c-2.76142 0-5-2.1453-5-4.7917V5.79167C3 3.1453 5.23858 1 8 1Zm4 18.2083c0 .5293-.4477.9584-1 .9584s-1-.4291-1-.9584c0-.5292.4477-.9583 1-.9583s1 .4291 1 .9583Z"
/>
</Svg>
);

export default IconNotification;
16 changes: 16 additions & 0 deletions src/components/icons/svg/IconOption.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import React from "react";
import { Svg, Path } from "react-native-svg";
import { SVGIconProps } from "../Icon";

const IconOption = ({ size, style, ...props }: SVGIconProps) => (
<Svg width={size} height={size} viewBox="0 0 24 24" style={style} {...props}>
<Path
fill="currentColor"
fillRule="evenodd"
clipRule="evenodd"
d="M3 6c0-1.65685 1.34315-3 3-3s3 1.34315 3 3-1.34315 3-3 3-3-1.34315-3-3Zm3-5C3.23858 1 1 3.23858 1 6s2.23858 5 5 5 5-2.23858 5-5-2.23858-5-5-5Zm12.0009 12c.5491 0 .9991.4477 1 1v3h2.9999c.5523 0 1 .4477 1 1s-.4477 1-1 1h-2.9999v3.0008c0 .5522-.4477 1-1 1s-1-.4478-1-1V19H14.002c-.5523 0-1-.4477-1-1s.4477-1 1-1h2.9989v-3c-.0009-.5523.4491-1 1-1ZM6 15c-1.65685 0-3 1.3431-3 3s1.34315 3 3 3 3-1.3431 3-3-1.34315-3-3-3Zm-5 3c0-2.7614 2.23858-5 5-5s5 2.2386 5 5-2.23858 5-5 5-5-2.2386-5-5ZM15 6c0-1.65685 1.3431-3 3-3s3 1.34315 3 3-1.3431 3-3 3-3-1.34315-3-3Zm3-5c-2.7614 0-5 2.23858-5 5s2.2386 5 5 5 5-2.23858 5-5-2.2386-5-5-5Z"
/>
</Svg>
);

export default IconOption;
6 changes: 4 additions & 2 deletions src/components/icons/svg/originals/IconDialpad.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
7 changes: 7 additions & 0 deletions src/components/icons/svg/originals/IconKey.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
7 changes: 7 additions & 0 deletions src/components/icons/svg/originals/IconNotification.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
7 changes: 7 additions & 0 deletions src/components/icons/svg/originals/IconOption.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
16 changes: 14 additions & 2 deletions src/components/pictograms/Pictogram.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,16 +50,22 @@ import PictogramIdentity from "./svg/PictogramIdentity";
import PictogramAccessDenied from "./svg/PictogramAccessDenied";
import PictogramTime from "./svg/PictogramTime";
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";
/* Bleed Pictograms */
import PictogramBleedCharity from "./svg/PictogramBleedCharity";
import PictogramBleedHelp from "./svg/PictogramBleedHelp";
import PictogramBleedITWallet from "./svg/PictogramBleedITWallet";
import PictogramBleedFeedback from "./svg/PictogramBleedFeedback";
import PictogramBleedSecurity from "./svg/PictogramBleedSecurity";
import PictogramBleedFeature from "./svg/PictogramBleedFeature";
import PictogramBleedCie from "./svg/PictogramBleedCie";

export const IOPictograms = {
// Start legacy pictograms //
Expand Down Expand Up @@ -98,6 +104,7 @@ export const IOPictograms = {
manual: PictogramManual,
trash: PictogramTrash,
empty: PictogramEmpty,
feature: PictogramFeature,
charity: PictogramCharity,
attention: PictogramAttention,
emptyArchive: PictogramEmptyArchive,
Expand All @@ -115,6 +122,8 @@ export const IOPictograms = {
identityCheck: PictogramIdentityCheck,
accessDenied: PictogramAccessDenied,
stopSecurity: PictogramStopSecurity,
security: PictogramSecurity,
cie: PictogramCie,
time: PictogramTime,
passcode: PictogramPasscode
};
Expand Down Expand Up @@ -152,7 +161,7 @@ export const Pictogram = ({
*/

export type IOPictogramsBleed = Extract<
"charity" | "help" | "feedback" | "itWallet",
"charity" | "help" | "feedback" | "itWallet" | "security" | "feature" | "cie",
IOPictograms
>;

Expand All @@ -162,7 +171,10 @@ export const IOPictogramsBleed: {
charity: PictogramBleedCharity,
help: PictogramBleedHelp,
feedback: PictogramBleedFeedback,
itWallet: PictogramBleedITWallet
itWallet: PictogramBleedITWallet,
security: PictogramBleedSecurity,
feature: PictogramBleedFeature,
cie: PictogramBleedCie
};

export const PictogramBleed = ({
Expand Down
38 changes: 38 additions & 0 deletions src/components/pictograms/svg/PictogramBleedCie.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
import React from "react";
import { Svg, Path } from "react-native-svg";
import { SVGPictogramProps } from "../Pictogram";

const PictogramBleedCie = ({ size, color, ...props }: SVGPictogramProps) => (
<Svg fill="none" width={size} height={size} viewBox="0 0 240 240" {...props}>
<Path
d="M19 155.41v15.07c0 5.87 4.76 10.63 10.63 10.63h152.76c5.87 0 10.63-4.76 10.63-10.63v-17.77c0-.39-11.26-4.36-18.16-5.23-6.9-.87-16.08-7.6-16.08-7.6-10.32-3.9-.42-12.65-.42-12.65l2.72-.43c-11.11-.83-15.11-10.96-15.11-10.96l8.14-3.44-1.41-2.87-3.59-2.58 2.86-2.61 1.38-.98s4.14-1.27 4.79-1.33c.65-.06 6.02.68 6.02.68l7.73.98s11.4 3.27 11.63 3.34c.23.07 9.5 2.47 9.5 2.47V69.63c0-5.87-4.76-10.63-10.63-10.63H29.63C23.76 59 19 63.76 19 69.63V155.41Z"
fill="#AAEEEF"
/>
<Path
d="M180.31 177.12H30.9201c-4.6 0-8.34-3.74-8.34-8.34V70.42c0-4.6 3.74-8.34 8.34-8.34H181.51c4.6 0 8.34 3.74 8.34 8.34v37.71c0 .75-.61 1.35-1.35 1.35-.74 0-1.35-.61-1.35-1.35V70.42c0-3.1-2.53-5.63-5.63-5.63H30.9201c-3.1 0-5.63 2.53-5.63 5.63v98.37c0 3.1 2.53 5.63 5.63 5.63H180.31c3.1 0 5.63-2.53 5.63-5.63V152.5c0-.75.61-1.35 1.35-1.35.74 0 1.35.61 1.35 1.35v16.29c0 4.6-3.74 8.34-8.34 8.34l.01-.01Z"
fill="#00C5CA"
/>
<Path
d="M240.209 121.41c-9.7-6.57-37.08-23.63-47.18-23.63v-4.2c13.44 0 48.07 23.36 49.53 24.35l-2.36 3.48h.01ZM176.839 120.23c-19.38-2.54-29-6.34-30.27-11.94-.78-3.43 1.93-6.24 3.66-7.36 9.65-6.19 40.15 5.89 43.59 7.29l-1.58 3.89c-12.24-4.96-33.86-11.43-39.74-7.65 0 0-2.16 1.51-1.84 2.91.21.89 2.47 5.51 26.72 8.69l-.55 4.16.01.01Z"
fill="#0B3EE3"
/>
<Path
d="M176.68 134.11c-28.52-5.99-32.37-11.92-32.78-15.85-.55-5.29 6.04-8.35 6.79-8.68l1.69 3.84c-1.49.66-4.5 2.61-4.31 4.41.15 1.44 2.73 6.56 29.46 12.17l-.86 4.11h.01Z"
fill="#0B3EE3"
/>
<Path
d="M240.52 173.83c-38.99-17.68-53.2-21.59-71.19-26.54l-2.55-.7c-9.02-2.49-14.19-6.14-15.37-10.85-1.36-5.4 3.12-9.76 3.31-9.94l2.9 3.04-1.45-1.52 1.46 1.51s-2.92 2.88-2.14 5.9c.78 3.04 5.19 5.81 12.41 7.81l2.55.7c18.17 5 32.52 8.95 71.81 26.76l-1.73 3.82-.01.01Z"
fill="#0B3EE3"
/>
<Path
d="M54.21 143.18c-8.36 0-15.17-6.8-15.17-15.17 0-8.37 6.8-15.17 15.17-15.17 8.37 0 15.17 6.8 15.17 15.17 0 8.37-6.8 15.17-15.17 15.17Zm0-27.33c-6.71 0-12.17 5.46-12.17 12.17s5.46 12.17 12.17 12.17 12.17-5.46 12.17-12.17-5.46-12.17-12.17-12.17Z"
fill="#00C5CA"
/>
<Path
d="M74.0501 163.12c-.83 0-1.5-.67-1.5-1.5 0-10.11-8.23-18.34-18.34-18.34s-18.34 8.23-18.34 18.34c0 .83-.67 1.5-1.5 1.5s-1.5-.67-1.5-1.5c0-11.77 9.57-21.34 21.34-21.34s21.34 9.57 21.34 21.34c0 .83-.67 1.5-1.5 1.5ZM128.57 144.21H86.04c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5h42.53c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5ZM115.18 82H40.5498c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5H115.18c1.93 0 3.5 1.57 3.5 3.5s-1.57 3.5-3.5 3.5ZM82.2198 93.76h-41.67c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5h41.67c1.93 0 3.5 1.57 3.5 3.5s-1.57 3.5-3.5 3.5ZM117.74 158.72H86.0498c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5H117.74c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5ZM134.76 151.66H86.0498c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5H134.76c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5Z"
fill="#00C5CA"
/>
</Svg>
);

export default PictogramBleedCie;
Loading