Skip to content

Commit

Permalink
chore: add new batch of pictograms (#159)
Browse files Browse the repository at this point in the history 
## Short description


<img
src="https://github.com/pagopa/io-app-design-system/assets/6160324/d68634b8-3140-44f5-98a0-693d1052119b"
width="100" />
<img
src="https://github.com/pagopa/io-app-design-system/assets/6160324/ff25e4fc-1bf4-498c-95bb-1973f1e8235f"
width="100" />
<img
src="https://github.com/pagopa/io-app-design-system/assets/6160324/5a315223-3d7b-47da-a3ab-230fc1751f99"
width="100" />

## List of changes proposed in this pull request
- New `eventClose` pictogram
- New `comunicationProblem` pictogram
- New `hello` pictogram
- Added alphabetical order for pictograms in the example app

## How to test
In the example app, navigate to the **Pictograms** page and check if the
new pictograms are correctly visible.
  • Loading branch information
@mastro993
mastro993 authored Dec 1, 2023
1 parent 3cda4e7 commit 73052ea
Show file tree
Hide file tree
Showing 9 changed files with 448 additions and 75 deletions.
26 changes: 20 additions & 6 deletions example/src/pages/Pictograms.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,11 +14,11 @@ import {
hexToRgba
} from "@pagopa/io-app-design-system";
import * as React from "react";
import { StyleSheet, View } from "react-native";
import { useContext } from "react";
import { StyleSheet, View } from "react-native";
import { AssetViewerBox, assetItemGutter } from "../components/AssetViewerBox";
import { Screen } from "../components/Screen";
import { ComponentViewerBox } from "../components/ComponentViewerBox";
import { Screen } from "../components/Screen";

const styles = StyleSheet.create({
itemsWrapper: {
Expand Down Expand Up @@ -50,6 +50,15 @@ const filterPictogramSet = (
)
);

const sortPictogramSet = (
pictogramSetObject: PictogramSetObject
): PictogramSetObject =>
Object.fromEntries(
[...Object.entries(pictogramSetObject)].sort(([l], [r]) =>
l.localeCompare(r)
)
);

const filteredIOPictograms = filterPictogramSet(
{
...IOPictogramsObject,
Expand All @@ -58,6 +67,11 @@ const filteredIOPictograms = filterPictogramSet(
IOPictograms
);

const sortedIOPictograms = sortPictogramSet(filteredIOPictograms);
const sortedIOPictogramsBleed = sortPictogramSet(IOPictogramsBleed);
const sortedIOPictogramsObject = sortPictogramSet(IOPictogramsObject);
const sortedIOPictogramsLegacy = sortPictogramSet(IOPictogramsLegacy);

export const Pictograms = () => {
const theme = useContext(IOThemeContext);
return (
Expand All @@ -73,7 +87,7 @@ export const Pictograms = () => {
Pictograms
</H2>
<View style={styles.itemsWrapper}>
{Object.entries(filteredIOPictograms).map(([pictogramItemName]) => (
{Object.entries(sortedIOPictograms).map(([pictogramItemName]) => (
<AssetViewerBox
key={pictogramItemName}
name={pictogramItemName}
Expand All @@ -100,7 +114,7 @@ export const Pictograms = () => {
Bleed Pictograms
</H2>
<View style={styles.itemsWrapper}>
{Object.entries(IOPictogramsBleed).map(([pictogramItemName]) => (
{Object.entries(sortedIOPictogramsBleed).map(([pictogramItemName]) => (
<AssetViewerBox
type="bleed"
key={pictogramItemName}
Expand All @@ -127,7 +141,7 @@ export const Pictograms = () => {
Objects Pictograms
</H2>
<View style={styles.itemsWrapper}>
{Object.entries(IOPictogramsObject).map(([pictogramItemName]) => (
{Object.entries(sortedIOPictogramsObject).map(([pictogramItemName]) => (
<AssetViewerBox
key={pictogramItemName}
name={pictogramItemName}
Expand Down Expand Up @@ -198,7 +212,7 @@ export const Pictograms = () => {
Legacy Pictograms
</H2>
<View style={styles.itemsWrapper}>
{Object.entries(IOPictogramsLegacy).map(([pictogramItemName]) => (
{Object.entries(sortedIOPictogramsLegacy).map(([pictogramItemName]) => (
<AssetViewerBox
key={pictogramItemName}
name={pictogramItemName}
Expand Down
2 changes: 1 addition & 1 deletion scripts/pictograms_timestamp.txt
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
2023-11-22T09:24:53.903Z
2023-11-30T19:56:51.037Z
142 changes: 74 additions & 68 deletions src/components/pictograms/Pictogram.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,127 +7,130 @@ import {
useIOTheme
} from "../../core/IOColors";

import PictogramMessages from "./svg/PictogramMessages";
import PictogramAbacus from "./svg/PictogramAbacus";
import PictogramAccessDenied from "./svg/PictogramAccessDenied";
import PictogramAirBaloon from "./svg/PictogramAirBaloon";
import PictogramAirship from "./svg/PictogramAirship";
import PictogramAttention from "./svg/PictogramAttention";
import PictogramBaloons from "./svg/PictogramBaloons";
import PictogramBeerMug from "./svg/PictogramBeerMug";
import PictogramCameraRequest from "./svg/PictogramCameraRequest";
import PictogramCameraDenied from "./svg/PictogramCameraDenied";
import PictogramCameraRequest from "./svg/PictogramCameraRequest";
import PictogramCharity from "./svg/PictogramCharity";
import PictogramCie from "./svg/PictogramCie";
import PictogramCompleted from "./svg/PictogramCompleted";
import PictogramComunicationProblem from "./svg/PictogramComunicationProblem";
import PictogramEmailToValidate from "./svg/PictogramEmailToValidate";
import PictogramEmailValidation from "./svg/PictogramEmailValidation";
import PictogramEmpty from "./svg/PictogramEmpty";
import PictogramEmptyArchive from "./svg/PictogramEmptyArchive";
import PictogramError from "./svg/PictogramError";
import PictogramFatalError from "./svg/PictogramFatalError";
import PictogramFeature from "./svg/PictogramFeature";
import PictogramFeedback from "./svg/PictogramFeedback";
import PictogramFireworks from "./svg/PictogramFireworks";
import PictogramHeart from "./svg/PictogramHeart";
import PictogramHello from "./svg/PictogramHello";
import PictogramHelp from "./svg/PictogramHelp";
import PictogramHourglass from "./svg/PictogramHourglass";
import PictogramITWallet from "./svg/PictogramITWallet";
import PictogramIdentity from "./svg/PictogramIdentity";
import PictogramIdentityAdd from "./svg/PictogramIdentityAdd";
import PictogramIdentityCheck from "./svg/PictogramIdentityCheck";
import PictogramIdentityRefresh from "./svg/PictogramIdentityRefresh";
import PictogramInProgress from "./svg/PictogramInProgress";
import PictogramInbox from "./svg/PictogramInbox";
import PictogramMessages from "./svg/PictogramMessages";
import PictogramNotAvailable from "./svg/PictogramNotAvailable";
import PictogramNotification from "./svg/PictogramNotification";
import PictogramObjClock from "./svg/PictogramObjClock";
import PictogramObjFlyingMessage from "./svg/PictogramObjFlyingMessage";
import PictogramObjFollowMessage from "./svg/PictogramObjFollowMessage";
import PictogramObjIbanCard from "./svg/PictogramObjIbanCard";
import PictogramObjKey from "./svg/PictogramObjKey";
import PictogramObjManual from "./svg/PictogramObjManual";
import PictogramObjTrash from "./svg/PictogramObjTrash";
import PictogramPasscode from "./svg/PictogramPasscode";
import PictogramPiggyBank from "./svg/PictogramPiggyBank";
import PictogramPin from "./svg/PictogramPin";
import PictogramPlaces from "./svg/PictogramPlaces";
import PictogramProcessing from "./svg/PictogramProcessing";
import PictogramPuzzle from "./svg/PictogramPuzzle";
import PictogramQuestion from "./svg/PictogramQuestion";
import PictogramSearch from "./svg/PictogramSearch";
import PictogramSecurity from "./svg/PictogramSecurity";
import PictogramSms from "./svg/PictogramSms";
import PictogramStopSecurity from "./svg/PictogramStopSecurity";
import PictogramSuccess from "./svg/PictogramSuccess";
import PictogramTeaBreak from "./svg/PictogramTeaBreak";
import PictogramTime from "./svg/PictogramTime";
import PictogramTimeout from "./svg/PictogramTimeout";
import PictogramUmbrella from "./svg/PictogramUmbrella";
import PictogramUmbrellaNew from "./svg/PictogramUmbrellaNew";
import PictogramUnrecognized from "./svg/PictogramUnrecognized";
import PictogramUploadFile from "./svg/PictogramUploadFile";
import PictogramSuccess from "./svg/PictogramSuccess";
import PictogramHelp from "./svg/PictogramHelp";
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 PictogramSecurity from "./svg/PictogramSecurity";
import PictogramPasscode from "./svg/PictogramPasscode";
import PictogramIdentityCheck from "./svg/PictogramIdentityCheck";
import PictogramCharity from "./svg/PictogramCharity";
import PictogramEmpty from "./svg/PictogramEmpty";
import PictogramCie from "./svg/PictogramCie";
import PictogramFeature from "./svg/PictogramFeature";
import PictogramNotification from "./svg/PictogramNotification";
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";
import PictogramUploadFile from "./svg/PictogramUploadFile";
/* Bleed Pictograms */
import PictogramActivate from "./svg/PictogramActivate";
import PictogramAttachment from "./svg/PictogramAttachment";
import PictogramBiometric from "./svg/PictogramBiometric";
import PictogramBleedAccessDenied from "./svg/PictogramBleedAccessDenied";
import PictogramBleedAttention from "./svg/PictogramBleedAttention";
import PictogramBleedCameraDenied from "./svg/PictogramBleedCameraDenied";
import PictogramBleedCameraRequest from "./svg/PictogramBleedCameraRequest";
import PictogramBleedCardAdd from "./svg/PictogramBleedCardAdd";
import PictogramBleedCardFavourite from "./svg/PictogramBleedCardFavourite";
import PictogramBleedCardIssue from "./svg/PictogramBleedCardIssue";
import PictogramBleedCardQuestion from "./svg/PictogramBleedCardQuestion";
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";
import PictogramBleedCameraRequest from "./svg/PictogramBleedCameraRequest";
import PictogramBleedCameraDenied from "./svg/PictogramBleedCameraDenied";
import PictogramBleedNotification from "./svg/PictogramBleedNotification";
import PictogramStar from "./svg/PictogramStar";
import PictogramBleedStar from "./svg/PictogramBleedStar";
import PictogramBleedDoc from "./svg/PictogramBleedDoc";
import PictogramBleedEmpty from "./svg/PictogramBleedEmpty";
import PictogramBleedAttention from "./svg/PictogramBleedAttention";
import PictogramBleedSuccess from "./svg/PictogramBleedSuccess";
import PictogramBleedEnded from "./svg/PictogramBleedEnded";
import PictogramBleedFatalError from "./svg/PictogramBleedFatalError";
import PictogramBleedFeature from "./svg/PictogramBleedFeature";
import PictogramBleedFeedback from "./svg/PictogramBleedFeedback";
import PictogramBleedHelp from "./svg/PictogramBleedHelp";
import PictogramBleedITWallet from "./svg/PictogramBleedITWallet";
import PictogramBleedIdea from "./svg/PictogramBleedIdea";
import PictogramBleedIdentity from "./svg/PictogramBleedIdentity";
import PictogramBleedIdentityAdd from "./svg/PictogramBleedIdentityAdd";
import PictogramBleedIdentityCheck from "./svg/PictogramBleedIdentityCheck";
import PictogramBleedIdentityRefresh from "./svg/PictogramBleedIdentityRefresh";
import PictogramBleedAccessDenied from "./svg/PictogramBleedAccessDenied";
import PictogramBleedLostConnection from "./svg/PictogramBleedLostConnection";
import PictogramBleedMessage from "./svg/PictogramBleedMessage";
import PictogramBleedNotification from "./svg/PictogramBleedNotification";
import PictogramBleedPasscode from "./svg/PictogramBleedPasscode";
import PictogramBleedPending from "./svg/PictogramBleedPending";
import PictogramBleedQrCode from "./svg/PictogramBleedQrCode";
import PictogramBleedSearch from "./svg/PictogramBleedSearch";
import PictogramBleedSecurity from "./svg/PictogramBleedSecurity";
import PictogramBleedStar from "./svg/PictogramBleedStar";
import PictogramBleedStopSecurity from "./svg/PictogramBleedStopSecurity";
import PictogramBleedSuccess from "./svg/PictogramBleedSuccess";
import PictogramBleedTime from "./svg/PictogramBleedTime";
import PictogramBleedPasscode from "./svg/PictogramBleedPasscode";
import PictogramTiming from "./svg/PictogramTiming";
import PictogramBleedTiming from "./svg/PictogramBleedTiming";
import PictogramCardAdd from "./svg/PictogramCardAdd";
import PictogramCardFavourite from "./svg/PictogramCardFavourite";
import PictogramCardIssue from "./svg/PictogramCardIssue";
import PictogramCardQuestion from "./svg/PictogramCardQuestion";
import PictogramCardFavourite from "./svg/PictogramCardFavourite";
import PictogramCardAdd from "./svg/PictogramCardAdd";
import PictogramBleedCardAdd from "./svg/PictogramBleedCardAdd";
import PictogramBleedCardFavourite from "./svg/PictogramBleedCardFavourite";
import PictogramBleedCardQuestion from "./svg/PictogramBleedCardQuestion";
import PictogramBleedCardIssue from "./svg/PictogramBleedCardIssue";
import PictogramSearchLens from "./svg/PictogramSearchLens";
import PictogramBleedSearch from "./svg/PictogramBleedSearch";
import PictogramBleedDoc from "./svg/PictogramBleedDoc";
import PictogramDoc from "./svg/PictogramDoc";
import PictogramPending from "./svg/PictogramPending";
import PictogramBleedPending from "./svg/PictogramBleedPending";
import PictogramMessage from "./svg/PictogramMessage";
import PictogramBleedMessage from "./svg/PictogramBleedMessage";
import PictogramEmailDotCheck from "./svg/PictogramEmailDotCheck";
import PictogramEmailDotNotif from "./svg/PictogramEmailDotNotif";
import PictogramEnded from "./svg/PictogramEnded";
import PictogramEventClose from "./svg/PictogramEventClose";
import PictogramIdea from "./svg/PictogramIdea";
import PictogramBleedIdea from "./svg/PictogramBleedIdea";
import PictogramLostConnection from "./svg/PictogramLostConnection";
import PictogramMessage from "./svg/PictogramMessage";
import PictogramMoneyCheck from "./svg/PictogramMoneyCheck";
import PictogramReactivate from "./svg/PictogramReactivate";
import PictogramActivate from "./svg/PictogramActivate";
import PictogramNFCScanAndroid from "./svg/PictogramNFCScanAndroid";
import PictogramNFCScaniOS from "./svg/PictogramNFCScaniOS";
import PictogramAttachment from "./svg/PictogramAttachment";
import PictogramLostConnection from "./svg/PictogramLostConnection";
import PictogramPending from "./svg/PictogramPending";
import PictogramQrCode from "./svg/PictogramQrCode";
import PictogramBleedQrCode from "./svg/PictogramBleedQrCode";
import PictogramEmailDotNotif from "./svg/PictogramEmailDotNotif";
import PictogramEmailDotCheck from "./svg/PictogramEmailDotCheck";
import PictogramBiometric from "./svg/PictogramBiometric";
import PictogramBleedLostConnection from "./svg/PictogramBleedLostConnection";
import PictogramEnded from "./svg/PictogramEnded";
import PictogramBleedEnded from "./svg/PictogramBleedEnded";
import PictogramReactivate from "./svg/PictogramReactivate";
import PictogramSearchLens from "./svg/PictogramSearchLens";
import PictogramStar from "./svg/PictogramStar";
import PictogramTiming from "./svg/PictogramTiming";

export const IOPictograms = {
// Start legacy pictograms //
Expand Down Expand Up @@ -209,6 +212,9 @@ export const IOPictograms = {
emailDotNotif: PictogramEmailDotNotif,
emailDotCheck: PictogramEmailDotCheck,
biometric: PictogramBiometric,
eventClose: PictogramEventClose,
hello: PictogramHello,
comunicationProblem: PictogramComunicationProblem,
// Start Objects Pictogram
ibanCard: PictogramObjIbanCard,
followMessage: PictogramObjFollowMessage,
Expand Down
Loading

0 comments on commit 73052ea

Please sign in to comment.