Skip to content
This repository was archived by the owner on Apr 26, 2024. It is now read-only.

[Feature] - New Icons #131

Merged
matextrem merged 2 commits into from
May 10, 2021
Merged

[Feature] - New Icons #131

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d13e304
Add import/export icons
matextrem May 6, 2021
0ee294a
Add icons to the stories + Run test and prettier
matextrem May 7, 2021
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
2 changes: 2 additions & 0 deletions src/dataDisplay/Icon/icon.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,7 @@ export const Icons = (): React.ReactElement => {
'edit',
'error',
'eth',
'exportImg',
'externalLink',
'eye',
'eyeOff',
Expand All @@ -69,6 +70,7 @@ export const Icons = (): React.ReactElement => {
'fuelIndicator',
'getInTouch',
'home',
'importImg',
'info',
'knowledge',
'licenses',
Expand Down
44 changes: 44 additions & 0 deletions src/dataDisplay/Icon/images/export.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
import React from 'react';

export default {
sm: (
<svg
width="16"
height="16"
viewBox="0 0 16 16"
xmlns="http://www.w3.org/2000/svg">
<path
fillRule="evenodd"
clipRule="evenodd"
className="icon-color"
d="M12.7005 6.69844C12.3115 7.08944 11.6765 7.08944 11.2875 6.69844L8.9975 4.40644V10.9994C8.9975 11.5494 8.5475 12.0004 7.9975 12.0004C7.4455 12.0004 6.9975 11.5494 6.9975 10.9994V4.40644L4.7065 6.69844C4.3165 7.08844 3.6805 7.08844 3.2925 6.69844C2.9025 6.30944 2.9025 5.67344 3.2925 5.28344L7.2905 1.28144C7.3475 1.22144 7.4225 1.18944 7.4895 1.14844C7.5315 1.12344 7.5655 1.08744 7.6115 1.06744C7.6525 1.04944 7.6985 1.04944 7.7415 1.03944C7.9545 0.982438 8.1785 0.983438 8.3825 1.06744C8.4265 1.08644 8.4595 1.12144 8.5005 1.14644C8.5695 1.18744 8.6425 1.22044 8.7045 1.28144L12.7005 5.28344C13.0905 5.67344 13.0905 6.30944 12.7005 6.69844Z"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
className="icon-color"
d="M3 12.1429V13.0002H13.0007V12.1429C13.0007 12.14 13.0006 12.1357 13.0005 12.1303C12.9976 11.9873 12.9781 11 14.0007 11C15.0007 11 15.0007 12.0643 15.0007 12.1429V14.0002H15C15 14.0002 15 14.0002 15 14.0002C15 14.5502 14.55 15.0002 14 15.0002H2C1.45 15.0002 1 14.5502 1 14.0002V14.0001L1 12.1429L0.999808 12.1303C0.996978 11.9873 0.97744 11 2 11C3 11 3 12.0643 3 12.1429Z"
/>
</svg>
),
md: (
<svg
width="24"
height="24"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
<path
fillRule="evenodd"
clipRule="evenodd"
className="icon-color"
d="M4 17.2V19.9998H20V17.2C20 17.0898 20 16 21 16C22 16 22 17.0898 22 17.2V21.0002C21.9998 21.0002 21.9997 21.0002 21.9995 21.0002C21.9993 21.55 21.5504 21.9998 20.9995 21.9998H2.99951C2.44951 21.9998 1.99951 21.5498 1.99951 20.9998C1.99951 20.9894 1.99968 20.9789 2 20.9685L2 17.2C2 17.0898 2 16 3 16C4 16 4 17.0898 4 17.2Z"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
className="icon-color"
d="M10.9996 5.414V16.997C10.9996 17.55 11.4476 17.997 11.9996 17.997C12.5526 17.997 12.9996 17.55 12.9996 16.997V5.414L17.1216 9.535C17.5126 9.926 18.1456 9.926 18.5356 9.535C18.9266 9.144 18.9266 8.512 18.5356 8.121L12.8786 2.464C12.8496 2.435 12.8186 2.408 12.7876 2.384C12.6036 2.149 12.3196 2 11.9996 2C11.6806 2 11.3956 2.149 11.2126 2.384C11.1816 2.408 11.1496 2.435 11.1216 2.464L5.46464 8.121C5.07364 8.512 5.07364 9.144 5.46464 9.535C5.85464 9.926 6.48764 9.926 6.87864 9.535L10.9996 5.414Z"
/>
</svg>
),
};
44 changes: 44 additions & 0 deletions src/dataDisplay/Icon/images/import.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
import React from 'react';

export default {
sm: (
<svg
width="16"
height="16"
viewBox="0 0 16 16"
xmlns="http://www.w3.org/2000/svg">
<path
fillRule="evenodd"
clipRule="evenodd"
className="icon-color"
d="M3.2925 6.30205C3.6815 5.91105 4.3165 5.91105 4.7055 6.30205L6.9955 8.59405L6.9955 2.00105C6.9955 1.45105 7.4455 1.00005 7.9955 1.00005C8.5475 1.00005 8.9955 1.45105 8.9955 2.00105L8.9955 8.59405L11.2865 6.30205C11.6765 5.91205 12.3125 5.91205 12.7005 6.30205C13.0905 6.69105 13.0905 7.32705 12.7005 7.71705L8.7025 11.7191C8.6455 11.7791 8.5705 11.8111 8.5035 11.8521C8.4615 11.8771 8.4275 11.9131 8.3815 11.9331C8.3405 11.9511 8.2945 11.9511 8.2515 11.9611C8.0385 12.0181 7.8145 12.0171 7.6105 11.9331C7.5665 11.9141 7.5335 11.8791 7.4925 11.8541C7.4235 11.8131 7.3505 11.7801 7.2885 11.7191L3.2925 7.71705C2.9025 7.32705 2.9025 6.69105 3.2925 6.30205Z"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
className="icon-color"
d="M3 12.1429V13.0002H13.0007V12.1429C13.0007 12.14 13.0006 12.1357 13.0005 12.1303C12.9976 11.9873 12.9781 11 14.0007 11C15.0007 11 15.0007 12.0643 15.0007 12.1429V14.0002H15C15 14.0002 15 14.0002 15 14.0002C15 14.5502 14.55 15.0002 14 15.0002H2C1.45 15.0002 1 14.5502 1 14.0002V14.0001L1 12.1429L0.999808 12.1303C0.996978 11.9873 0.97744 11 2 11C3 11 3 12.0643 3 12.1429Z"
/>
</svg>
),
md: (
<svg
width="24"
height="24"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
<path
fillRule="evenodd"
clipRule="evenodd"
className="icon-color"
d="M4 17.2V19.9998H20V17.2C20 17.0898 20 16 21 16C22 16 22 17.0898 22 17.2V21.0002C21.9998 21.0002 21.9997 21.0002 21.9995 21.0002C21.9993 21.55 21.5504 21.9998 20.9995 21.9998H2.99951C2.44951 21.9998 1.99951 21.5498 1.99951 20.9998C1.99951 20.9894 1.99968 20.9789 2 20.9685L2 17.2C2 17.0898 2 16 3 16C4 16 4 17.0898 4 17.2Z"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
className="icon-color"
d="M13.0009 14.5831L13.0009 3.00007C13.0009 2.44707 12.5529 2.00007 12.0009 2.00007C11.4479 2.00007 11.0009 2.44707 11.0009 3.00007L11.0009 14.5831L6.87885 10.4621C6.48785 10.0711 5.85485 10.0711 5.46485 10.4621C5.07385 10.8531 5.07385 11.4851 5.46485 11.8761L11.1219 17.5331C11.1509 17.5621 11.1819 17.5891 11.2129 17.6131C11.3969 17.8481 11.6809 17.9971 12.0009 17.9971C12.3199 17.9971 12.6049 17.8481 12.7879 17.6131C12.8189 17.5891 12.8509 17.5621 12.8789 17.5331L18.5359 11.8761C18.9269 11.4851 18.9269 10.8531 18.5359 10.4621C18.1459 10.0711 17.5129 10.0711 17.1219 10.4621L13.0009 14.5831Z"
/>
</svg>
),
};
4 changes: 4 additions & 0 deletions src/dataDisplay/Icon/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ import devicePassword from './images/devicePassword';
import edit from './images/edit';
import error from './images/error';
import eth from './images/eth';
import exportImg from './images/export';
import externalLink from './images/externalLink';
import eye from './images/eye';
import eyeOff from './images/eyeOff';
Expand All @@ -39,6 +40,7 @@ import fingerPrint from './images/fingerPrint';
import fuelIndicator from './images/fuelIndicator';
import getInTouch from './images/getInTouch';
import home from './images/home';
import importImg from './images/import';
import info from './images/info';
import knowledge from './images/knowledge';
import licenses from './images/licenses';
Expand Down Expand Up @@ -116,6 +118,7 @@ const icons = {
edit,
error,
eth,
exportImg,
externalLink,
eye,
eyeOff,
Expand All @@ -124,6 +127,7 @@ const icons = {
fuelIndicator,
getInTouch,
home,
importImg,
info,
knowledge,
licenses,
Expand Down
56 changes: 56 additions & 0 deletions tests/__snapshots__/storybook.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3548,6 +3548,34 @@ exports[`Storyshots Data Display/Icon Icons 1`] = `
</span>
eth
</div>
<div
className="c1"
>
<span
className="c2"
>
<svg
height="24"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<path
className="icon-color"
clipRule="evenodd"
d="M4 17.2V19.9998H20V17.2C20 17.0898 20 16 21 16C22 16 22 17.0898 22 17.2V21.0002C21.9998 21.0002 21.9997 21.0002 21.9995 21.0002C21.9993 21.55 21.5504 21.9998 20.9995 21.9998H2.99951C2.44951 21.9998 1.99951 21.5498 1.99951 20.9998C1.99951 20.9894 1.99968 20.9789 2 20.9685L2 17.2C2 17.0898 2 16 3 16C4 16 4 17.0898 4 17.2Z"
fillRule="evenodd"
/>
<path
className="icon-color"
clipRule="evenodd"
d="M10.9996 5.414V16.997C10.9996 17.55 11.4476 17.997 11.9996 17.997C12.5526 17.997 12.9996 17.55 12.9996 16.997V5.414L17.1216 9.535C17.5126 9.926 18.1456 9.926 18.5356 9.535C18.9266 9.144 18.9266 8.512 18.5356 8.121L12.8786 2.464C12.8496 2.435 12.8186 2.408 12.7876 2.384C12.6036 2.149 12.3196 2 11.9996 2C11.6806 2 11.3956 2.149 11.2126 2.384C11.1816 2.408 11.1496 2.435 11.1216 2.464L5.46464 8.121C5.07364 8.512 5.07364 9.144 5.46464 9.535C5.85464 9.926 6.48764 9.926 6.87864 9.535L10.9996 5.414Z"
fillRule="evenodd"
/>
</svg>
</span>
exportImg
</div>
<div
className="c1"
>
Expand Down Expand Up @@ -3805,6 +3833,34 @@ exports[`Storyshots Data Display/Icon Icons 1`] = `
</span>
home
</div>
<div
className="c1"
>
<span
className="c2"
>
<svg
height="24"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<path
className="icon-color"
clipRule="evenodd"
d="M4 17.2V19.9998H20V17.2C20 17.0898 20 16 21 16C22 16 22 17.0898 22 17.2V21.0002C21.9998 21.0002 21.9997 21.0002 21.9995 21.0002C21.9993 21.55 21.5504 21.9998 20.9995 21.9998H2.99951C2.44951 21.9998 1.99951 21.5498 1.99951 20.9998C1.99951 20.9894 1.99968 20.9789 2 20.9685L2 17.2C2 17.0898 2 16 3 16C4 16 4 17.0898 4 17.2Z"
fillRule="evenodd"
/>
<path
className="icon-color"
clipRule="evenodd"
d="M13.0009 14.5831L13.0009 3.00007C13.0009 2.44707 12.5529 2.00007 12.0009 2.00007C11.4479 2.00007 11.0009 2.44707 11.0009 3.00007L11.0009 14.5831L6.87885 10.4621C6.48785 10.0711 5.85485 10.0711 5.46485 10.4621C5.07385 10.8531 5.07385 11.4851 5.46485 11.8761L11.1219 17.5331C11.1509 17.5621 11.1819 17.5891 11.2129 17.6131C11.3969 17.8481 11.6809 17.9971 12.0009 17.9971C12.3199 17.9971 12.6049 17.8481 12.7879 17.6131C12.8189 17.5891 12.8509 17.5621 12.8789 17.5331L18.5359 11.8761C18.9269 11.4851 18.9269 10.8531 18.5359 10.4621C18.1459 10.0711 17.5129 10.0711 17.1219 10.4621L13.0009 14.5831Z"
fillRule="evenodd"
/>
</svg>
</span>
importImg
</div>
<div
className="c1"
>
Expand Down