Skip to content

Commit

Permalink
[IOAPPFD0-143] Add new pictograms needed for ITWallet flow (#60)
Browse files Browse the repository at this point in the history
## Short description
This PR adds the new pictograms needed for the IT Wallet flow. It also
updates the `SVG` path of some new pictograms with inconsistent stroke
and dimension values.

## List of changes proposed in this pull request
- Create a new `IOPictogramsLegacy` set from the main `IOPictograms`
- Add the following new pictograms:
  - `trash`
  - `charity` (leaving `donation` to not generate a breaking change)
  - `empty` (leaving `setup` to not generate a breaking change)
  - `fatalError`
  - `itWallet`
  - `updateOS`
  - `identity`
  - `identityAdd`,
  - `identityRefresh`
  - `identityCheck`
  - `accessDenied`
  - `stopSecurity`
  - `time`
  - `passcode`
- Update the existing new pictograms with stroke inconsistencies:
  - `attention`
  - `emptyArchive`
  - `feedback`
  - `success`

### Preview
 
<img
src="https://github.com/pagopa/io-app-design-system/assets/1255491/db27fab2-4d5c-47db-a0fc-f3fdbae90bc8"
width="300" />

## How to test
Go to the **Foundation → Pictograms**
  • Loading branch information
dmnplb authored Sep 12, 2023
1 parent 59054d9 commit 0cc44cc
Show file tree
Hide file tree
Showing 39 changed files with 1,397 additions and 233 deletions.
33 changes: 32 additions & 1 deletion example/src/pages/Icons.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import {
IOIcons,
IONavIcons,
IOProductIcons,
IOSystemIcons,
IOThemeContext,
IOVisualCostants,
Icon,
Expand All @@ -26,6 +27,7 @@ type IconSubsetObject = Record<
interface IconSetObject {
[key: string]: ({ size, style }: SVGIconProps) => JSX.Element;
}

const filterIconSet = (
iconSubsetObject: IconSubsetObject,
iconSetObject: IconSetObject
Expand All @@ -37,7 +39,13 @@ const filterIconSet = (
);

const filteredIOIcons = filterIconSet(
{ ...IONavIcons, ...IOCategoryIcons, ...IOProductIcons, ...IOBiometricIcons },
{
...IONavIcons,
...IOCategoryIcons,
...IOProductIcons,
...IOBiometricIcons,
...IOSystemIcons
},
IOIcons
);

Expand Down Expand Up @@ -108,6 +116,29 @@ export const Icons = () => {
/>
))}
</View>
<H2
color={theme["textHeading-default"]}
weight={"SemiBold"}
style={{ marginBottom: 12 }}
>
System
</H2>
<View style={styles.itemsWrapper}>
{Object.entries(IOSystemIcons).map(([iconItemName]) => (
<IconViewerBox
key={iconItemName}
name={iconItemName}
size="small"
image={
<Icon
name={iconItemName as IOBiometricIcons}
color={theme["icon-default"]}
size="100%"
/>
}
/>
))}
</View>
<H2
color={theme["textHeading-default"]}
weight={"SemiBold"}
Expand Down
105 changes: 80 additions & 25 deletions example/src/pages/Pictograms.tsx
Original file line number Diff line number Diff line change
@@ -1,11 +1,15 @@
import {
H2,
IOPictograms,
IOPictogramsLegacy,
IOThemeContext,
IOVisualCostants,
Pictogram
Pictogram,
SVGPictogramProps
} from "@pagopa/io-app-design-system";
import * as React from "react";
import { StyleSheet, View } from "react-native";
import { useContext } from "react";
import { AssetViewerBox, assetItemGutter } from "../components/AssetViewerBox";
import { Screen } from "../components/Screen";

Expand All @@ -20,28 +24,79 @@ const styles = StyleSheet.create({
}
});

export const Pictograms = () => (
<Screen>
<H2
color={"bluegrey"}
weight={"SemiBold"}
style={{
marginBottom: 16,
paddingTop: IOVisualCostants.appMarginDefault
}}
>
Pictograms
</H2>
<View style={styles.itemsWrapper}>
{Object.entries(IOPictograms).map(([pictogramItemName]) => (
<AssetViewerBox
key={pictogramItemName}
name={pictogramItemName}
image={
<Pictogram name={pictogramItemName as IOPictograms} size="100%" />
}
/>
))}
</View>
</Screen>
// Filter the main object, removing already displayed pictograms in the other sets
type PictogramSubsetObject = Record<
string,
({ size }: SVGPictogramProps) => JSX.Element
>;
interface PictogramSetObject {
[key: string]: ({ size }: SVGPictogramProps) => JSX.Element;
}

const filterPictogramSet = (
pictogramSubsetObject: PictogramSubsetObject,
pictogramSetObject: PictogramSetObject
): PictogramSetObject =>
Object.fromEntries(
Object.entries(pictogramSetObject).filter(
([key]) => !Object.keys(pictogramSubsetObject).includes(key)
)
);

const filteredIOPictograms = filterPictogramSet(
{
...IOPictogramsLegacy
},
IOPictograms
);

export const Pictograms = () => {
const theme = useContext(IOThemeContext);
return (
<Screen>
<H2
color={theme["textHeading-default"]}
weight={"SemiBold"}
style={{
marginBottom: 16,
paddingTop: IOVisualCostants.appMarginDefault
}}
>
Pictograms
</H2>
<View style={styles.itemsWrapper}>
{Object.entries(filteredIOPictograms).map(([pictogramItemName]) => (
<AssetViewerBox
key={pictogramItemName}
name={pictogramItemName}
image={
<Pictogram name={pictogramItemName as IOPictograms} size="100%" />
}
/>
))}
</View>

<H2
color={theme["textHeading-default"]}
weight={"SemiBold"}
style={{
marginBottom: 16,
paddingTop: IOVisualCostants.appMarginDefault
}}
>
Legacy Pictograms
</H2>
<View style={styles.itemsWrapper}>
{Object.entries(IOPictogramsLegacy).map(([pictogramItemName]) => (
<AssetViewerBox
key={pictogramItemName}
name={pictogramItemName}
image={
<Pictogram name={pictogramItemName as IOPictograms} size="100%" />
}
/>
))}
</View>
</Screen>
);
};
100 changes: 99 additions & 1 deletion src/components/pictograms/Pictogram.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -43,8 +43,23 @@ import PictogramUnrecognized from "./svg/PictogramUnrecognized";
import PictogramUploadFile from "./svg/PictogramUploadFile";
import PictogramSuccess from "./svg/PictogramSuccess";
import PictogramFocusOn from "./svg/PictogramFocusOn";
import PictogramITWallet from "./svg/PictogramITWallet";
import PictogramFatalError from "./svg/PictogramFatalError";
import PictogramUpdateOS from "./svg/PictogramUpdateOS";
import PictogramIdentityAdd from "./svg/PictogramIdentityAdd";
import PictogramIdentityRefresh from "./svg/PictogramIdentityRefresh";
import PictogramIdentity from "./svg/PictogramIdentity";
import PictogramAccessDenied from "./svg/PictogramAccessDenied";
import PictogramTime from "./svg/PictogramTime";
import PictogramStopSecurity from "./svg/PictogramStopSecurity";
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";

export const IOPictograms = {
// Start legacy pictograms //
messages: PictogramMessages,
airBaloon: PictogramAirBaloon,
abacus: PictogramAbacus,
Expand Down Expand Up @@ -74,18 +89,33 @@ export const IOPictograms = {
sms: PictogramSms,
heart: PictogramHeart,
completed: PictogramCompleted,
// End legacy pictograms
ibanCard: PictogramIBANCard,
followMessage: PictogramFollowMessage,
manual: PictogramManual,
trash: PictogramTrash,
setup: PictogramSetup,
empty: PictogramEmpty,
donation: PictogramDonation,
charity: PictogramCharity,
attention: PictogramAttention,
emptyArchive: PictogramEmptyArchive,
umbrellaNew: PictogramUmbrellaNew,
feedback: PictogramFeedback,
cameraRequest: PictogramCameraRequest,
success: PictogramSuccess,
focusOn: PictogramFocusOn
fatalError: PictogramFatalError,
focusOn: PictogramFocusOn,
itWallet: PictogramITWallet,
updateOS: PictogramUpdateOS,
identity: PictogramIdentity,
identityAdd: PictogramIdentityAdd,
identityRefresh: PictogramIdentityRefresh,
identityCheck: PictogramIdentityCheck,
accessDenied: PictogramAccessDenied,
stopSecurity: PictogramStopSecurity,
time: PictogramTime,
passcode: PictogramPasscode
};

export type IOPictograms = keyof typeof IOPictograms;
Expand Down Expand Up @@ -128,3 +158,71 @@ const IOPictogramsBleed = {
} as const;

export type IOPictogramsBleed = keyof typeof IOPictogramsBleed;

/* Legacy pictograms */

const {
messages,
airBaloon,
abacus,
emailValidation,
emailToValidate,
inbox,
piggyBank,
processing,
baloons,
places,
notAvailable,
airship,
search,
unrecognized,
error,
umbrella,
inProgress,
fireworks,
puzzle,
question,
pin,
timeout,
uploadFile,
hourglass,
teaBreak,
beerMug,
sms,
heart,
completed
} = IOPictograms;

export const IOPictogramsLegacy = {
messages,
airBaloon,
abacus,
emailValidation,
emailToValidate,
inbox,
piggyBank,
processing,
baloons,
places,
notAvailable,
airship,
search,
unrecognized,
error,
umbrella,
inProgress,
fireworks,
puzzle,
question,
pin,
timeout,
uploadFile,
hourglass,
teaBreak,
beerMug,
sms,
heart,
completed
} as const;

export type IOPictogramsLegacy = keyof typeof IOPictogramsLegacy;
46 changes: 46 additions & 0 deletions src/components/pictograms/svg/PictogramAccessDenied.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
import React from "react";
import { Svg, Path } from "react-native-svg";
import { SVGPictogramProps } from "../Pictogram";

const PictogramAccessDenied = ({
size,
color,
...props
}: SVGPictogramProps) => (
<Svg fill="none" width={size} height={size} viewBox="0 0 240 240" {...props}>
<Path
d="m180.1 169.56-71.27-26.27c-4.97-1.83-9.8897-2.7-14.6397-2.57-9.17.24-15.28 3.56-18.15 9.87-2.07 4.56-1.33 7.86 2.27 10.07 5.54 3.41 14.62 2.48 16.23.48.88-1.09 2.26-3.77 1.9-6.91-.32-2.75-1.94-5.27-4.79-7.5l2.46-3.16c3.74 2.91 5.86 6.33 6.3097 10.19.49 4.16-1.1797 7.92-2.7497 9.88-3.35 4.17-14.98 4.4-21.45.42-5.31-3.27-6.7-8.78-3.81-15.14 3.5-7.71 11-11.93 21.68-12.21 5.24-.13 10.6797.81 16.1297 2.82l71.27 26.27-1.38 3.75-.01.01Z"
fill="#0B3EE3"
/>
<Path
d="m100.01 154.85-2.2297-3.32c.25-.17 6.0697-4.03 11.8297-3.77l-.19 4c-4.43-.22-9.36 3.06-9.41 3.1v-.01ZM78.7802 184.37c-4.15-2.1-6.77-5.1-7.8-8.92-1.97-7.36 2.91-14.96 3.12-15.28l3.35 2.19-1.67-1.09 1.68 1.09c-.04.06-4.12 6.45-2.61 12.08.72 2.66 2.65 4.8 5.73 6.37l-1.81 3.57.01-.01ZM112.46 190.12c-6.57-3.8-8.86-8.6-9.62-11.96-.83-3.65-.1-6.37-.02-6.67l3.84 1.11-1.92-.55 1.93.54c-.09.34-2.13 8.33 7.79 14.08l-2 3.46v-.01ZM93.8103 182.84l-3.33-2.22c2.4-3.6 3.28-6.79 2.61-9.46-.78-3.13-3.53-4.63-3.56-4.65l1.85-3.55c.18.09 4.31 2.28 5.57 7.15.99 3.83-.07 8.12-3.14 12.73Z"
fill="#0B3EE3"
/>
<Path
d="M90.4501 199.23c-1.1 0-2.18-.17-3.2-.52-3.02-1.02-8.54-3.95-11.61-12.06-.51-1.34-.35-2.79.44-4 .78-1.2 2.08-1.96 3.5-2.05l18.64-1.12h.09c1.8799.06 3.6399.94 4.8299 2.4 1.22 1.5 1.73 3.46 1.4 5.38-1.02 5.86-5.0199 9.99-11.2699 11.61-.94.24-1.88.37-2.81.37l-.01-.01Zm7.8-15.75-18.44 1.11c-.21.01-.33.15-.38.23-.06.09-.12.24-.05.41 2.36 6.25 6.28 8.72 9.15 9.69 1.14.38 2.42.41 3.73.07 4.78-1.24 7.58-4.08 8.3399-8.43.13-.78-.07-1.57-.56-2.17-.4499-.55-1.0799-.88-1.7799-.92l-.01.01Z"
fill="#0B3EE3"
/>
<Path
d="M165.53 226.17c-32.54-15.26-72.9396-27.2-73.3396-27.32l1.13-3.84c.41.12 41.0896 12.15 73.9096 27.54l-1.7 3.62Z"
fill="#0B3EE3"
/>
<Path
d="M100.56 220c-2.7599 0-4.9999-2.24-4.9999-5v-16.83l.72-.32c4.2499-1.87 7.3699-5.63 8.4299-10.15l.84-1.22v28.53c0 2.76-2.24 5-5 5l.01-.01ZM105.56 148.21l-5.6299 2.54-4.37-6.07v-38.51h9.9999v42.04Z"
fill="#AAEEEF"
/>
<Path
d="M100.02 111.32c23.207 0 42.02-22.0097 42.02-49.16 0-27.1503-18.813-49.16-42.02-49.16C76.813 13 58 35.0097 58 62.16c0 27.1503 18.813 49.16 42.02 49.16Z"
fill="#AAEEEF"
/>
<Path
d="M118.13 92.36c-.5 0-.98-.25-1.27-.7L81.73 36.21c-.44-.7-.24-1.63.46-2.07.7-.44 1.63-.23 2.07.46l35.13 55.45c.44.7.24 1.63-.46 2.07-.25.16-.53.23-.8.23v.01Z"
fill="#00C5CA"
/>
<Path
d="M82.9998 92.36c-.27 0-.55-.08-.8-.23-.7-.44-.91-1.37-.46-2.07L116.86 34.6c.44-.7 1.37-.91 2.07-.46.7.45.91 1.37.46 2.07L84.2598 91.66c-.29.45-.77.7-1.27.7h.01Z"
fill="#00C5CA"
/>
</Svg>
);

export default PictogramAccessDenied;
23 changes: 10 additions & 13 deletions src/components/pictograms/svg/PictogramAttention.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,29 +3,26 @@ import Svg, { Path } from "react-native-svg";
import { SVGPictogramProps } from "../Pictogram";

const PictogramAttention = ({ size, color, ...props }: SVGPictogramProps) => (
<Svg width={size} height={size} viewBox="0 0 72 72" {...props}>
<Svg width={size} height={size} viewBox="0 0 240 240" {...props}>
<Path
d="m137.89 157.04-3.23-2.71-2.03-3.21-1.92-5.21 2.32-5.88 5.93-4.45 7.74-3.5 6.14.47 1.61-1.4 3.16-3.58 3.66-1.45 5.49.29 1.79-3.11-.48-2.25-1.99-6.51-1.24-7.65-.7-3.38 1.53-7.15 1.73-2.81 4.81-1.45 3.81.55 5.21 8.7 1.11-1.92c2.19-3.79 2.19-8.47 0-12.26l-30.62-53.04c-2.19-3.79-6.24-6.13-10.62-6.13H79.8701c-4.38 0-8.43 2.34-10.62 6.13l-30.61 53.03c-2.19 3.79-2.19 8.47 0 12.26l30.62 53.03c2.19 3.79 6.24 6.13 10.62 6.13H139l-1.1-1.54h-.01ZM146.15 158.58h2.04l.25-.45-2.29.45Z"
fill="#AAEEEF"
fill-rule="evenodd"
d="M57.0317 22.2055 45.7322 2.6343H16.8246L2.3708 27.669l14.4538 25.0348h28.9076l1.2675-2.1953c.1657-.8017.3311-1.5533.4911-2.2465-2.5348.4908-4.2729-.6946-4.9379-2.2926-.3361-.8089-.4285-1.74-.2528-2.7113l.0007-.004c.3649-1.9728 1.857-4.0841 4.7376-5.5468 1.6869-.8602 3.2284-1.069 4.5941-.6248l-.0399-.0249-.0038-.0007c.623-1.2678 1.5098-2.0917 2.5579-2.3803.6887-.1916 1.3683-.1394 1.9792.0248l.0308-.0533c-1.3369-3.7749-1.4964-7.1019-1.2647-9.6251.0081-.1085.0232-.2118.0428-.3181.2159-1.164 1.0059-2.1041 2.0969-2.4994Z"
clip-rule="evenodd"
/>
<Path
d="M139.17 211.62c-2.17-36.04 8.61-64.12 9.07-65.29l3.73 1.45c-.11.28-10.92 28.48-8.8 63.6l-3.99.24h-.01Z"
fill="#0B3EE3"
fill-rule="evenodd"
d="M54.9355 24.7055c.2317-1.249 1.1244-2.2403 2.3408-2.5773 1.3266-.3661 2.6906.1488 3.4715 1.3027 2.3347 3.4569 3.7708 8.935 4.6201 13.5118.9593-.5152 2.3516-1.0232 3.5675-.5442.6993.2746 1.5981.9887 1.9219 2.8167.7996 4.5475-4.1613 16.1899-4.7285 17.5004l-.1318-.0595c-.0994 8.3197.5587 10.938.6922 11.4691.0125.0499.0205.0814.0227.0974l-1.8388.296c-.0023-.015-.0097-.0441-.0212-.0896v-.0001c-.1789-.7086-1.3643-5.403-.2472-23.2988-.0881-1.0628-1.2983-14.5495-5.3929-20.6126-.403-.5957-1.0252-.678-1.4689-.5548-.2153.0586-.9174.3433-.9999 1.2226-.3617 3.9506.3385 10.0713 5.7305 16.793l-1.4434 1.2145c-1.5273-1.9042-2.7034-3.7686-3.6001-5.5607l-.0565.0861-.0027-.0023c-.438-.3805-1.8087-1.2873-2.9091-.9773-.5064.1398-.9211.5373-1.267 1.2043 2.4641 2.0062 3.058 6.1106 3.0839 6.3011l-1.8145.2888c-.0042-.0416-.6129-4.2022-2.9227-5.4414-1.0133-.5423-2.2285-.4406-3.706.3104-3.2214 1.6404-4.2576 4.2114-3.5963 5.8027.5231 1.2505 1.9494 1.6106 3.759.9701.4255-1.6683.7462-2.7201.8148-2.927l1.9369.6025c-.0037.0115-.012.0356-.0246.0719-.3911 1.1334-4.8976 14.1913-3.4078 27.723l-2.073-1.0262c-.5133-8.3908 1.0276-17.071 2.2471-22.3562-2.5348.4909-4.2729-.6946-4.9379-2.2925-.3361-.8089-.4285-1.7401-.2528-2.7114l.0007-.004c.3649-1.9728 1.857-4.084 4.7376-5.5467 1.6869-.8603 3.2284-1.0691 4.5941-.6249l-.0399-.0249-.0038-.0007c.623-1.2678 1.5098-2.0917 2.5579-2.3803.7095-.1973 1.4093-.136 2.0344.04-1.3594-3.8031-1.5222-7.1551-1.2891-9.6935.0081-.1086.0232-.2118.0428-.3182Zm11.1919 26.9943c1.5768-4.2263 3.3193-9.7422 2.8972-12.1179-.1341-.7719-.3934-1.2349-.771-1.3836-.669-.2647-1.8212.2817-2.5403.7439.5352 3.3383.7357 5.844.7539 6.0891a.79162.79162 0 0 1-.001.1352c-.1527 2.4142-.2629 4.5842-.3388 6.5333Z"
clip-rule="evenodd"
/>
<Path
fill="#00C5CA"
fill-rule="evenodd"
d="M30.9508 11.3999c.7456 0 1.35.4768 1.35 1.065v19.17c0 .5882-.6044 1.065-1.35 1.065s-1.35-.4768-1.35-1.065v-19.17c0-.5882.6044-1.065 1.35-1.065Z"
clip-rule="evenodd"
d="M141.88 159.04c-1.89 0-3.99-.32-5.94-1.31-2.79-1.43-4.71-3.93-5.7-7.42-1.9-6.71 3.38-13.54 9.46-17.33 6.97-4.34 14.18-4.71 18.38-.95 8.62 7.74 7.4 16.64 7.34 17.02l-3.96-.59c.04-.28.9-7.2-6.06-13.45-3.23-2.9-9.15-1.4-13.59 1.36-4.65 2.9-9.05 8.16-7.72 12.85.68 2.41 1.88 4.02 3.66 4.94 3.7 1.91 8.72.15 8.77.13l1.36 3.76c-.17.06-2.78.99-6 .99ZM188.26 209.3c-2.26-18.75-1.7-30.7-1.2-41.23.22-4.76.44-9.26.37-14.02-.2-15.04-3.78-31.52-3.81-31.69l-.02-.11c-3.42-21.01-7.81-25.83-10.11-26.83-.68-.29-1.77-.56-3.47.58-2.17 1.45-3.47 4.14-3.38 7.02.66 22.39 14.42 38.36 14.55 38.52l-3.01 2.64c-.61-.69-14.84-17.17-15.54-41.04-.13-4.24 1.85-8.25 5.16-10.46 2.43-1.62 4.95-1.93 7.29-.92 5.5 2.39 9.57 12.14 12.46 29.8.27 1.24 3.69 17.26 3.89 32.44.06 4.87-.15 9.43-.38 14.26-.49 10.38-1.04 22.15 1.17 40.57l-3.97.48v-.01Z"
fill="#0B3EE3"
/>
<Path
d="m190.41 178.07-3.58-1.79c10.31-20.61 14.77-39.24 12.34-43.07-.37-.57-.81-.88-1.46-.99-2.34-.4-6.31 1.88-8.27 3.42l-2.47-3.15c.66-.52 6.57-5.04 11.4-4.21 1.75.3 3.19 1.26 4.16 2.78 4.67 7.33-4.7 32.13-12.13 47l.01.01ZM156.68 132.7l-3.89-.92c.04-.18 1.07-4.42 5.23-6.75 3.32-1.87 7.56-1.97 12.6-.31l-1.25 3.8c-3.9-1.28-7.05-1.29-9.34-.03-2.62 1.44-3.33 4.19-3.34 4.22l-.01-.01Z"
fill="#0B3EE3"
/>
<Path
d="M113.19 106.19c-.83 0-1.5-.67-1.5-1.5V58.06c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5v46.63c0 .83-.67 1.5-1.5 1.5ZM113.35 125.55c2.563 0 4.64-2.077 4.64-4.64 0-2.563-2.077-4.64-4.64-4.64-2.563 0-4.64 2.077-4.64 4.64 0 2.563 2.077 4.64 4.64 4.64Z"
fill="#00C5CA"
stroke="#00C5CA"
d="M32.9992 39.1501c0 1.1612-.8788 2.05-1.9 2.05-1.0212 0-1.9-.8888-1.9-2.05 0-1.1612.8788-2.05 1.9-2.05 1.0212 0 1.9.8888 1.9 2.05Z"
/>
</Svg>
);
Expand Down
Loading

0 comments on commit 0cc44cc

Please sign in to comment.