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.

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-188] Update pictogram set #140

Merged
merged 5 commits into from
Nov 22, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
20 changes: 18 additions & 2 deletions src/components/pictograms/Pictogram.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -119,6 +119,13 @@ 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 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";

export const IOPictograms = {
// Start legacy pictograms //
Expand Down Expand Up @@ -194,6 +201,11 @@ export const IOPictograms = {
nfcScanAndroid: PictogramNFCScanAndroid,
nfcScaniOS: PictogramNFCScaniOS,
attachment: PictogramAttachment,
lostConnection: PictogramLostConnection,
qrCode: PictogramQrCode,
emailDotNotif: PictogramEmailDotNotif,
emailDotCheck: PictogramEmailDotCheck,
biometric: PictogramBiometric,
// Start Objects Pictogram
ibanCard: PictogramObjIbanCard,
followMessage: PictogramObjFollowMessage,
Expand Down Expand Up @@ -313,7 +325,9 @@ export type IOPictogramsBleed = Extract<
| "star"
| "doc"
| "notification"
| "star",
| "star"
| "qrCode"
| "lostConnection",
IOPictograms
>;

Expand Down Expand Up @@ -352,7 +366,9 @@ export const IOPictogramsBleed: {
fatalError: PictogramBleedFatalError,
notification: PictogramBleedNotification,
star: PictogramBleedStar,
doc: PictogramBleedDoc
doc: PictogramBleedDoc,
qrCode: PictogramBleedQrCode,
lostConnection: PictogramBleedLostConnection
};

export const PictogramBleed = ({
Expand Down
78 changes: 78 additions & 0 deletions src/components/pictograms/svg/PictogramBiometric.tsx

Large diffs are not rendered by default.

66 changes: 66 additions & 0 deletions src/components/pictograms/svg/PictogramBleedLostConnection.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
import React from "react";
import { Svg, Path } from "react-native-svg";
import { SVGPictogramProps } from "../Pictogram";

const PictogramBleedLostConnection = ({
size,
colorValues,
...props
}: SVGPictogramProps) => (
<Svg width={size} height={size} viewBox="0 0 240 240" {...props}>
<Path
d="M152.979 101.86L150.119 98.24C154.119 95.08 163.309 90.82 169.519 97.35L166.169 100.53C164.189 98.45 161.569 97.99 158.149 99.13C155.269 100.09 153.009 101.85 152.989 101.87L152.979 101.86Z"
fill={colorValues.main}
/>
<Path
d="M201.789 133.55C199.879 133.55 197.999 133.26 196.139 132.67C184.069 128.86 177.939 113.91 177.689 113.28L181.969 111.56C182.019 111.7 187.559 125.13 197.549 128.28C202.149 129.73 207.129 128.74 212.349 125.34L214.869 129.21C210.429 132.1 206.049 133.55 201.789 133.55Z"
fill={colorValues.main}
/>
<Path
d="M137.66 122.327L125.946 98.9034L136.365 93.6925C141.964 90.8924 148.78 93.1637 151.58 98.7626L153.15 101.902C155.95 107.501 153.679 114.316 148.08 117.117L137.66 122.327Z"
fill={colorValues.main}
/>
<Path
d="M126.31 122.36C125.04 122.36 123.82 121.66 123.21 120.44C122.35 118.73 123.05 116.65 124.76 115.79L135.48 110.43C137.19 109.57 139.27 110.27 140.13 111.98C140.99 113.69 140.29 115.77 138.58 116.63L127.86 121.99C127.36 122.24 126.83 122.36 126.31 122.36Z"
fill={colorValues.main}
/>
<Path
d="M121.62 112.98C120.35 112.98 119.13 112.28 118.52 111.06C117.66 109.35 118.36 107.27 120.07 106.41L130.79 101.05C132.5 100.19 134.58 100.89 135.44 102.6C136.3 104.31 135.6 106.39 133.89 107.25L123.17 112.61C122.67 112.86 122.14 112.98 121.62 112.98Z"
fill={colorValues.main}
/>
<Path
d="M158.539 119.9C155.759 119.9 153.779 119.25 152.499 117.95C151.389 116.82 150.329 114.69 151.619 110.96C152.789 107.56 155.409 104.68 158.799 103.04C162.689 101.16 165.719 99.16 167.799 97.1C170.809 94.1 170.279 90.35 168.899 88.05C167.479 85.68 164.329 83.36 160.149 84.64C154.389 86.39 149.829 89.21 146.579 93.01C145.179 94.66 142.849 95.24 140.509 94.53C137.439 93.6 135.189 90.83 134.779 87.48C134.299 83.53 136.029 75.4 152.929 65.43C156.949 63.14 166.219 60.63 172.779 67.47L169.889 70.24C163.879 63.96 155.299 68.69 154.929 68.89C139.459 78.02 138.459 84.59 138.749 87C139.009 89.16 140.479 90.35 141.659 90.7C141.959 90.79 142.999 91.04 143.529 90.41C147.279 86.02 152.469 82.78 158.979 80.81C164.969 78.98 169.999 82.1 172.329 86C175.119 90.66 174.449 96.13 170.619 99.94C168.219 102.32 164.829 104.58 160.539 106.65C158.099 107.83 156.219 109.88 155.399 112.27C155.119 113.08 154.739 114.54 155.349 115.16C155.749 115.56 158.369 117.37 170.909 113.29C179.599 110.44 196.879 104.64 200.099 103.06C204.849 100.72 226.009 98.06 239.819 98.06V102.06C226.269 102.06 205.629 104.8 201.869 106.65C197.609 108.75 173.199 116.75 172.159 117.09C166.369 118.97 161.889 119.91 158.549 119.91L158.539 119.9Z"
fill={colorValues.hands}
/>
<Path
d="M137.52 70.64C136.55 70.64 135.56 70.51 134.58 70.19C131.91 69.32 128.97 66.45 128.79 62.83C128.65 60.02 130.07 55.96 137.66 52.61C150.77 46.82 156.78 47.6 169.37 53.09L167.77 56.76C156.05 51.65 151.18 51.01 139.28 56.27C134.98 58.17 132.67 60.43 132.79 62.63C132.88 64.47 134.61 66 135.83 66.39C137.94 67.08 140.38 66.27 142.48 65.4C151.23 61.77 157.3 63.94 157.56 64.04L156.19 67.8C155.99 67.73 151.22 66.12 144.02 69.1C142.16 69.87 139.9 70.65 137.54 70.65L137.52 70.64Z"
fill={colorValues.hands}
/>
<Path
d="M230.921 59.41C219.711 59.41 203.591 58.28 189.281 49.89C169.491 38.29 158.281 35.36 152.921 40.4C151.231 41.99 151.391 43.12 151.441 43.49C151.781 45.94 155.501 48.39 156.781 49.05L154.951 52.6C154.261 52.24 148.181 48.98 147.491 44.05C147.261 42.43 147.551 39.98 150.191 37.49C158.921 29.28 175.111 36.95 191.311 46.45C207.631 56.02 226.841 55.57 237.161 55.33C238.121 55.31 238.991 55.29 239.791 55.28L239.841 59.28C239.051 59.29 238.191 59.31 237.251 59.33C235.401 59.37 233.271 59.42 230.921 59.42V59.41Z"
fill={colorValues.hands}
/>
<Path
d="M123.01 176.67L95.8498 204.26C91.3898 208.79 83.7498 207.29 81.3298 201.41L44.6698 112.25C43.3198 108.96 44.0598 105.19 46.5498 102.66L73.7098 75.07C78.1698 70.54 85.8098 72.04 88.2298 77.92L124.89 167.07C126.24 170.36 125.5 174.13 123.01 176.66V176.67Z"
fill={colorValues.main}
/>
<Path
d="M91.0297 178.53C90.4597 178.53 89.8697 178.47 89.2797 178.36C85.6697 177.65 82.5197 174.99 81.0497 171.42L63.1897 127.98C61.7597 124.51 62.2797 120.92 64.5397 118.62L76.7898 106.18C78.5697 104.37 81.1597 103.64 83.9097 104.18C87.5197 104.89 90.6697 107.55 92.1397 111.12L110 154.56C111.43 158.03 110.91 161.62 108.65 163.91L96.3997 176.35C94.9997 177.77 93.1097 178.52 91.0297 178.52V178.53ZM82.1497 107.01C81.1497 107.01 79.9297 107.27 78.9297 108.29L66.6797 120.73C65.2797 122.15 64.9997 124.5 65.9697 126.84L83.8298 170.28C84.8997 172.89 87.2697 174.91 89.8597 175.41C90.8797 175.61 92.8097 175.73 94.2597 174.25L106.51 161.81C107.91 160.38 108.19 158.04 107.22 155.7L89.3597 112.26C88.2897 109.65 85.9198 107.63 83.3298 107.13C83.0098 107.07 82.5998 107.01 82.1497 107.01Z"
fill={colorValues.secondary}
/>
<Path
d="M87.9624 134.568C88.2798 131.153 86.6157 128.206 84.2456 127.986C81.8755 127.766 79.6968 130.356 79.3794 133.771C79.062 137.186 80.7261 140.133 83.0962 140.353C85.4663 140.573 87.645 137.983 87.9624 134.568Z"
fill={colorValues.secondary}
/>
<Path
d="M94.1401 149.596C94.4575 146.181 92.7935 143.234 90.4233 143.014C88.0532 142.793 85.8745 145.383 85.5571 148.798C85.2397 152.213 86.9038 155.16 89.2739 155.38C91.6441 155.601 93.8227 153.011 94.1401 149.596Z"
fill={colorValues.secondary}
/>
<Path
d="M139.92 117.63C139.46 117.63 139.03 117.38 138.8 116.95C138.48 116.33 138.72 115.57 139.34 115.25L146.13 111.73C146.62 111.26 149.06 108.54 146.71 103.45C146.42 102.82 146.69 102.07 147.33 101.78C147.96 101.49 148.71 101.76 149 102.4C152.38 109.73 147.85 113.58 147.65 113.74L147.43 113.89L140.5 117.48C140.32 117.58 140.12 117.62 139.92 117.62V117.63Z"
fill={colorValues.secondary}
/>
</Svg>
);

export default PictogramBleedLostConnection;
86 changes: 86 additions & 0 deletions src/components/pictograms/svg/PictogramBleedQrCode.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,86 @@
import React from "react";
import { Svg, Path } from "react-native-svg";
import { SVGPictogramProps } from "../Pictogram";

const PictogramBleedQrCode = ({
size,
colorValues,
...props
}: SVGPictogramProps) => (
<Svg width={size} height={size} viewBox="0 0 240 240" {...props}>
<Path
d="M19 160.5V198.93C19 204.8 23.76 209.56 29.63 209.56H182.39C188.26 209.56 193.02 204.8 193.02 198.93V161.15C193.02 160.76 179.15 154.94 172.25 154.07C165.35 153.2 156.95 146.92 156.95 146.92C146.63 143.02 157.24 134.96 157.24 134.96L157.34 133.58C146.23 132.75 147.31 122.17 147.31 122.17L151.36 117.89L149.5 114.56L152.03 111.79L151.96 109.42L153.34 108.44C153.34 108.44 157.48 107.17 158.13 107.11C158.78 107.05 164.15 107.79 164.15 107.79L171.88 108.77C171.88 108.77 183.28 112.04 183.51 112.11C183.74 112.18 193.01 116.82 193.01 116.82V40.63C193.01 34.76 188.25 30 182.38 30H29.63C23.76 30 19 34.76 19 40.63V128V160.5Z"
fill={colorValues.main}
/>
<Path
d="M85.5103 136.71C71.6103 136.69 57.7203 136.67 43.8203 136.64V181.42C44.0903 181.45 44.3703 181.51 44.6403 181.51C58.8103 181.51 72.9903 181.52 87.1603 181.51C87.6803 181.51 88.2003 181.37 88.7403 181.3V136.71C87.5303 136.71 86.5203 136.71 85.5103 136.71ZM78.0003 170.71H54.9903V147.76H78.0003V170.71Z"
fill={colorValues.secondary}
/>
<Path
d="M44.1794 60.06C44.1694 73.41 44.1694 86.75 44.1794 100.1C44.1794 100.81 44.2794 101.52 44.3494 102.36H89.1594V57.59H44.3694C44.2994 58.41 44.1794 59.24 44.1794 60.06ZM55.0594 68.64C62.6094 68.64 70.1994 68.64 78.1194 68.64V91.68H55.0594V68.64Z"
fill={colorValues.secondary}
/>
<Path
d="M167.741 102C167.781 101.47 167.841 100.92 167.841 100.37C167.841 86.84 167.841 73.31 167.841 59.78C167.841 59.05 167.721 58.32 167.661 57.59H122.881V102.19C127.001 102.81 165.811 102.61 167.741 102ZM133.961 68.74H156.941V91.68H133.961V68.74Z"
fill={colorValues.secondary}
/>
<Path
d="M111.821 68.76V57.59H100.211C100.311 61.3 100.411 65.01 100.511 68.76H111.821Z"
fill={colorValues.secondary}
/>
<Path
d="M156.6 181.97H168.21V170.36C164.43 170.5 160.65 170.65 156.6 170.8V181.96V181.97Z"
fill={colorValues.secondary}
/>
<Path
d="M145.361 113.95C143.381 113.95 141.561 113.94 139.731 113.95C137.841 113.97 135.961 114.01 133.861 114.04V125.24C131.901 125.24 130.161 125.28 128.421 125.23C126.631 125.18 124.801 125.45 122.801 124.96V114H111.871C111.751 117.63 111.621 121.27 111.491 125.22H100.971V136.59H111.451V147.96H100.681C100.111 151.8 100.271 179.31 100.831 181.21H111.871V158.63H122.881C122.961 151.1 122.831 143.87 122.951 136.39H134.591V125.01H143.731C143.851 123.57 144.501 122.32 145.351 121.27V113.95H145.361Z"
fill={colorValues.secondary}
/>
<Path
d="M134.471 159.36H134.531V159.3H134.471V159.36Z"
fill={colorValues.secondary}
/>
<Path
d="M151.261 143.61C150.361 140.03 152.021 136.92 153.301 135.17C149.271 133.36 146.931 131.64 145.561 130.07V133.56C145.561 135.95 145.621 138.35 145.541 140.74C145.471 143.18 145.881 145.65 145.201 148.34H134.531V159.31H157.081V150.59C153.881 148.62 151.921 146.29 151.251 143.63L151.261 143.61Z"
fill={colorValues.secondary}
/>
<Path
d="M111.811 113.93V113.99H111.871C111.871 113.99 111.871 113.95 111.871 113.93C111.851 113.93 111.831 113.93 111.811 113.93Z"
fill={colorValues.secondary}
/>
<Path
d="M100.359 80.43V83.6C100.359 92.71 100.359 101.83 100.359 110.94C100.359 111.92 100.249 112.9 100.189 113.87C104.069 113.89 107.939 113.91 111.809 113.93V80.42H100.359V80.43Z"
fill={colorValues.secondary}
/>
<Path
d="M123.571 181.16C130.981 181.16 138.391 181.16 145.881 181.16V170.51H134.471V159.37H123.371C122.791 163.36 122.961 179.31 123.571 181.17V181.16Z"
fill={colorValues.secondary}
/>
<Path
d="M66.7012 114.06V124.91H77.8512V114.06H66.7012Z"
fill={colorValues.secondary}
/>
<Path
d="M55.4205 114.14H44.3105V124.86H55.4105C55.4605 121.11 55.4605 117.58 55.4205 114.14Z"
fill={colorValues.secondary}
/>
<Path
d="M89.3105 124.91H100.091V113.96H89.3105V124.91Z"
fill={colorValues.secondary}
/>
<Path
d="M100.09 113.96H100.18C100.18 113.96 100.18 113.91 100.18 113.88C100.15 113.88 100.12 113.88 100.09 113.88V113.96Z"
fill={colorValues.secondary}
/>
<Path
d="M242.411 125.8C240.941 124.81 206.321 101.45 192.881 101.45V105.65C202.971 105.65 230.361 122.71 240.061 129.28L242.421 125.8H242.411Z"
fill={colorValues.hands}
/>
<Path
d="M167.751 150.41C165.071 149.67 162.781 148.82 160.921 147.9C157.761 146.33 155.831 144.52 155.341 142.61C154.651 139.91 156.871 137.35 157.381 136.81C160.201 137.84 163.611 138.88 167.711 139.93C170.351 140.61 173.281 141.29 176.541 141.98L177.401 137.87C167.791 135.85 161.321 133.9 156.941 132.16C149.761 129.3 148.251 127.02 147.981 125.95C147.961 125.86 147.941 125.77 147.931 125.7C147.771 124.2 149.851 122.59 151.411 121.72C152.861 122.54 154.631 123.29 156.721 124C157.671 124.32 158.671 124.63 159.761 124.93C164.231 126.16 169.851 127.22 176.691 128.12L177.241 123.96C173.571 123.48 170.411 122.96 167.681 122.43C162.751 121.47 159.241 120.47 156.731 119.52C151.451 117.52 150.641 115.78 150.521 115.26C150.191 113.86 152.361 112.35 152.361 112.35C158.251 108.57 179.861 115.04 192.101 120L193.681 116.11C190.231 114.71 159.741 102.63 150.091 108.82C148.371 109.94 145.661 112.75 146.431 116.18C146.651 117.17 147.151 118.1 147.901 118.98C147.051 119.58 146.131 120.35 145.381 121.28C144.531 122.33 143.881 123.58 143.761 125.02C143.731 125.38 143.731 125.76 143.761 126.14C143.881 127.3 144.311 128.63 145.571 130.08C146.941 131.66 149.281 133.38 153.311 135.18C152.031 136.93 150.371 140.04 151.271 143.62C151.941 146.29 153.891 148.61 157.101 150.58C159.551 152.09 162.741 153.39 166.651 154.46L169.201 155.16C187.191 160.11 201.401 164.02 240.391 181.7L242.121 177.88C202.831 160.07 188.481 156.12 170.311 151.12L167.771 150.42L167.751 150.41Z"
fill={colorValues.hands}
/>
</Svg>
);

export default PictogramBleedQrCode;
53 changes: 53 additions & 0 deletions src/components/pictograms/svg/PictogramEmailDotCheck.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
import React from "react";
import { Svg, Path, Circle } from "react-native-svg";
import { SVGPictogramProps } from "../Pictogram";

const PictogramEmailDotCheck = ({
size,
colorValues,
...props
}: SVGPictogramProps) => (
<Svg width={size} height={size} viewBox="0 0 240 240" {...props}>
<Path
d="M39 154.112V166.947C39 171.946 43.0756 176 48.1017 176H178.898C183.924 176 188 171.946 188 166.947V159.767C188 159.435 178.205 144.641 172.305 143.9C166.406 143.159 158.683 140.885 158.683 140.885C149.847 137.563 158.323 130.111 158.323 130.111L160.652 129.745C151.14 129.038 150.241 119.984 150.241 119.984L154.676 117.472L153.469 115.027L152.895 112.617L152.835 110.599L154.016 109.764C154.016 109.764 157.561 108.682 158.118 108.631C158.674 108.58 163.272 109.21 163.272 109.21L169.891 110.045C169.891 110.045 179.652 112.83 179.849 112.89C180.046 112.949 187.983 116.901 187.983 116.901V81.0535C187.983 76.054 183.907 72 178.881 72H48.1017C43.0756 72 39 76.054 39 81.0535V126.423V154.103V154.112Z"
fill={colorValues.main}
/>
<Path
d="M230.222 149.517C217.744 132.729 195.306 106.091 188.178 106.091V102.653C199.371 102.653 229.584 142.881 232.993 147.471L230.222 149.517Z"
fill={colorValues.hands}
/>
<Path
d="M174.87 124.477C158.939 122.397 151.026 119.285 149.982 114.704C149.343 111.902 151.57 109.598 152.985 108.678C160.924 103.615 185.994 113.5 188.825 114.644L187.53 117.833C177.468 113.767 159.699 108.472 154.866 111.566C154.866 111.566 153.088 112.804 153.356 113.947C153.528 114.678 155.393 118.46 175.327 121.065L174.879 124.477H174.87Z"
fill={colorValues.hands}
/>
<Path
d="M174.74 135.841C151.293 130.933 148.134 126.085 147.798 122.861C147.349 118.529 152.76 116.028 153.381 115.753L154.779 118.899C153.554 119.44 151.077 121.039 151.241 122.509C151.371 123.686 153.485 127.881 175.465 132.48L174.758 135.841H174.74Z"
fill={colorValues.hands}
/>
<Path
d="M206.084 185C203.987 182.112 201.933 179.095 199.758 175.897C189.938 161.465 179.78 146.534 166.465 145.202C159.328 144.488 155.047 142.365 153.727 138.884C151.949 134.208 156.428 129.317 156.618 129.11L159.155 131.448L157.886 130.279L159.155 131.44C158.258 132.42 156.109 135.445 156.954 137.672C157.757 139.76 161.252 141.222 166.81 141.772C181.731 143.268 192.345 158.869 202.615 173.963C204.772 177.135 206.809 180.135 208.88 182.98L206.084 184.991V185Z"
fill={colorValues.hands}
/>
<Path
fillRule="evenodd"
clipRule="evenodd"
d="M41.5 84C41.5 78.7533 45.7533 74.5 51 74.5H176C181.247 74.5 185.5 78.7533 185.5 84V114.241H182.5V84C182.5 80.4101 179.59 77.5 176 77.5H51C47.4102 77.5 44.5 80.4102 44.5 84V164C44.5 167.59 47.4101 170.5 51 170.5H176C179.59 170.5 182.5 167.59 182.5 164V153.676H185.5V164C185.5 169.247 181.247 173.5 176 173.5H51C45.7533 173.5 41.5 169.247 41.5 164V84Z"
fill={colorValues.secondary}
/>
<Path
fillRule="evenodd"
clipRule="evenodd"
d="M108.556 120.967L44.1992 80.2678L45.8027 77.7322L110.159 118.432C112.979 120.215 116.581 120.184 119.37 118.352L181.177 77.7463L182.825 80.2537L121.017 120.859C117.244 123.337 112.371 123.38 108.556 120.967Z"
fill={colorValues.secondary}
/>
<Circle cx="47" cy="75" r="22" fill={colorValues.secondary} />
<Path
fillRule="evenodd"
clipRule="evenodd"
d="M59.5607 66.9393C60.1464 67.5251 60.1464 68.4749 59.5607 69.0607L44.2678 84.3536C43.2915 85.3299 41.7085 85.3299 40.7322 84.3536L33.9393 77.5607C33.3536 76.9749 33.3536 76.0251 33.9393 75.4393C34.5251 74.8536 35.4749 74.8536 36.0607 75.4393L42.5 81.8787L57.4393 66.9393C58.0251 66.3536 58.9749 66.3536 59.5607 66.9393Z"
fill={colorValues.main}
/>
</Svg>
);

export default PictogramEmailDotCheck;
Loading