Skip to content

Commit

Permalink
feat(FileIcon): refactor file-icons, add JSON file icon (#1057)
Browse files Browse the repository at this point in the history 
issue -  #1056
  • Loading branch information
@kolebayev
kolebayev committed Apr 20, 2021
1 parent 123352a commit a16c746
Show file tree
Hide file tree
Showing 95 changed files with 800 additions and 494 deletions.
2 changes: 2 additions & 0 deletions src/components/File/File.tsx
View file
Expand Up @@ -10,6 +10,7 @@ import { FileIconDoc } from '../../fileIcons/FileIconDoc/FileIconDoc';
import { FileIconExe } from '../../fileIcons/FileIconExe/FileIconExe';
import { FileIconGif } from '../../fileIcons/FileIconGif/FileIconGif';
import { FileIconJpg } from '../../fileIcons/FileIconJpg/FileIconJpg';
import { FileIconJson } from '../../fileIcons/FileIconJson/FileIconJson';
import { FileIconLoading } from '../../fileIcons/FileIconLoading/FileIconLoading';
import { FileIconMov } from '../../fileIcons/FileIconMov/FileIconMov';
import { FileIconMp3 } from '../../fileIcons/FileIconMp3/FileIconMp3';
Expand Down Expand Up @@ -66,6 +67,7 @@ const mapExtensionToSvg: { [value: string]: React.FC<FileIconProps> } = {
gz: FileIconZip,
xls: FileIconXls,
xlsx: FileIconXls,
json: FileIconJson,
};

function getIconByExtension(extension?: string): React.FC<FileIconProps> {
Expand Down
4 changes: 4 additions & 0 deletions src/components/File/__stories__/File.stories.tsx
View file
Expand Up @@ -44,5 +44,9 @@ export default createMetadata({
docs: {
page: mdx,
},
design: {
type: 'figma',
url: 'https://www.figma.com/file/SLc0YGhuDotve6MTCBHlGxDU/Consta-Graphics?node-id=718%3A31',
},
},
});
1 change: 1 addition & 0 deletions src/fileIcons/FileIcon/FileIcon.css
View file
Expand Up @@ -27,6 +27,7 @@
&.FileIconUndefined,
&.FileIconExe,
&.FileIconRar,
&.FileIconJson,
&.FileIconZip {
color: #c3cad1;
}
Expand Down
2 changes: 2 additions & 0 deletions src/fileIcons/FileIcon/__stories__/FileIconsGallery/FileIconsGallery.tsx
View file
Expand Up @@ -8,6 +8,7 @@ import { FileIconDoc } from '../../../FileIconDoc/FileIconDoc';
import { FileIconExe } from '../../../FileIconExe/FileIconExe';
import { FileIconGif } from '../../../FileIconGif/FileIconGif';
import { FileIconJpg } from '../../../FileIconJpg/FileIconJpg';
import { FileIconJson } from '../../../FileIconJson/FileIconJson';
import { FileIconLoading } from '../../../FileIconLoading/FileIconLoading';
import { FileIconMov } from '../../../FileIconMov/FileIconMov';
import { FileIconMp3 } from '../../../FileIconMp3/FileIconMp3';
Expand Down Expand Up @@ -39,6 +40,7 @@ const icons = {
FileIconExe,
FileIconGif,
FileIconJpg,
FileIconJson,
FileIconLoading,
FileIconMov,
FileIconMp3,
Expand Down
19 changes: 11 additions & 8 deletions src/fileIcons/FileIconAvi/FileIconAvi_size_m.svg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
14 changes: 7 additions & 7 deletions src/fileIcons/FileIconAvi/FileIconAvi_size_m.tsx
View file
Expand Up @@ -5,20 +5,20 @@ function FileIconAviSizeM(props: React.SVGProps<SVGSVGElement>) {
<svg viewBox="0 0 30 40" {...props}>
<path d="M28 0H2a2 2 0 00-2 2v36a2 2 0 002 2h26a2 2 0 002-2V2a2 2 0 00-2-2z" />
<path
fill="#fff"
opacity={0.6}
fillRule="evenodd"
d="M24 18v17H7V18h17zm-3 .944h2V20h-2v-1.056zm0 15.112h2V33h-2v1.056zM21 32h2v-2h-2v2zm0-3h2v-2h-2v2zm-1-2v7.056h-9V27h9zm0-1h-9v-7.056h9V26zm1 0h2v-2h-2v2zm0-3h2v-2h-2v2zm-11 1v2H8v-2h2zm-2 5v-2h2v2H8zm0 1v2h2v-2H8zm0 4.056V33h2v1.056H8zM10 23v-2H8v2h2zm-2-4.056V20h2v-1.056H8z"
clipRule="evenodd"
opacity={0.7}
d="M23 17v16H7V17h16zm-2.823.889h1.882v.993h-1.883v-.993zm0 14.222h1.882v-.993h-1.883v.993zm0-1.934h1.882v-1.883h-1.883v1.883zm0-2.824h1.882V25.47h-1.883v1.882zm-.942-1.882v6.64h-8.47v-6.64h8.47zm0-.942h-8.47v-6.64h8.47v6.64zm.942 0h1.882v-1.882h-1.883v1.882zm0-2.823h1.882v-1.883h-1.883v1.883zm-10.353.941v1.882H7.94v-1.882h1.883zM7.94 27.353V25.47h1.883v1.882H7.94zm0 .941v1.883h1.883v-1.883H7.94zm0 3.817v-.993h1.883v.993H7.94zm1.883-10.405v-1.883H7.94v1.883h1.883zM7.94 17.889v.993h1.883v-.993H7.94z"
fill="#fff"
/>
<path fill="#fff" d="M20 6V5h-1v1h1zm-2 1v1h1v3h-1v1h3v-1h-1V7h-2z" />
<path d="M20 6V5h-1v1h1zM18 7v1h1v3h-1v1h3v-1h-1V7h-2z" fill="#fff" />
<path
fill="#fff"
fillRule="evenodd"
d="M12.95 12a.66.66 0 01-.29-.08.818.818 0 01-.26-.22.73.73 0 01-.61.3h-1.34c-.507 0-.877-.1-1.11-.3-.227-.207-.34-.557-.34-1.05v-.1C9 9.517 9.487 9 10.46 9H12v-.35c0-.207-.063-.367-.19-.48-.127-.113-.313-.17-.56-.17H9.5V7h1.8c.58 0 1.007.127 1.28.38.28.253.42.66.42 1.22V11c0 .1.037.177.11.23.08.047.21.07.39.07v.7h-.55zm-1.41-1c.2 0 .327-.047.38-.14a.72.72 0 00.08-.36V10h-1.4a.583.583 0 00-.599.554c.008.146.048.255.119.326.08.08.207.12.38.12h1.04z"
clipRule="evenodd"
d="M12.95 12a.66.66 0 01-.29-.08.818.818 0 01-.26-.22.73.73 0 01-.61.3h-1.34c-.507 0-.877-.1-1.11-.3-.227-.207-.34-.557-.34-1.05v-.1C9 9.517 9.487 9 10.46 9H12v-.35c0-.207-.063-.367-.19-.48-.127-.113-.313-.17-.56-.17H9.5V7h1.8c.58 0 1.007.127 1.28.38.28.253.42.66.42 1.22V11c0 .1.037.177.11.23.08.047.21.07.39.07v.7h-.55zm-1.41-1c.2 0 .327-.047.38-.14a.72.72 0 00.08-.36V10h-1.4a.583.583 0 00-.599.554c.008.146.048.255.119.326.08.08.207.12.38.12h1.04z"
fill="#fff"
/>
<path fill="#fff" d="M15 7h-1v3l1 2h1l1-2V7h-1v3h-1V7z" />
<path d="M15 7h-1v3l1 2h1l1-2V7h-1v3h-1V7z" fill="#fff" />
</svg>
);
}
Expand Down
17 changes: 9 additions & 8 deletions src/fileIcons/FileIconAvi/FileIconAvi_size_s.svg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
14 changes: 7 additions & 7 deletions src/fileIcons/FileIconAvi/FileIconAvi_size_s.tsx
View file
Expand Up @@ -5,20 +5,20 @@ function FileIconAviSizeS(props: React.SVGProps<SVGSVGElement>) {
<svg viewBox="0 0 21 28" {...props}>
<path d="M19.6 0H1.4A1.4 1.4 0 000 1.4v25.2A1.4 1.4 0 001.4 28h18.2a1.4 1.4 0 001.4-1.4V1.4A1.4 1.4 0 0019.6 0z" />
<path
fill="#fff"
opacity={0.6}
fillRule="evenodd"
d="M17 12v13H4V12h13zm-3 12h2v-2h-2v2zm0-3h2v-2h-2v2zm-1-2v5.056H8V19h5zm0-1H8v-5.056h5V18zm1 0h2v-2h-2v2zm0-3h2v-2h-2v2zm-7 1v2H5v-2h2zm-2 5v-2h2v2H5zm0 1v2h2v-2H5zm2-7v-2H5v2h2z"
clipRule="evenodd"
opacity={0.7}
d="M17 12v13H4V12h13zm-3 12h2v-2h-2v2zm0-3h2v-2h-2v2zm-1-2v5.056H8V19h5zm0-1H8v-5.056h5V18zm1 0h2v-2h-2v2zm0-3h2v-2h-2v2zm-7 1v2H5v-2h2zm-2 5v-2h2v2H5zm0 1v2h2v-2H5zm2-7v-2H5v2h2z"
fill="#fff"
/>
<path fill="#fff" d="M16 3V2h-1v1h1zm-2 1v1h1v3h-1v1h3V8h-1V4h-2z" />
<path d="M15.5 3V2h-1v1h1zM13.5 4v1h1v3h-1v1h3V8h-1V4h-2z" fill="#fff" />
<path
fill="#fff"
fillRule="evenodd"
d="M8.95 9a.659.659 0 01-.29-.08.818.818 0 01-.26-.22.73.73 0 01-.61.3H6.45c-.507 0-.877-.1-1.11-.3C5.113 8.493 5 8.143 5 7.65v-.1C5 6.517 5.487 6 6.46 6H8v-.35c0-.207-.063-.367-.19-.48-.127-.113-.313-.17-.56-.17H5.5V4h1.8c.58 0 1.007.127 1.28.38.28.253.42.66.42 1.22V8c0 .1.037.177.11.23.08.047.21.07.39.07V9h-.55zM7.54 8c.2 0 .327-.047.38-.14A.72.72 0 008 7.5V7H6.6a.583.583 0 00-.599.554c.008.146.048.255.119.326.08.08.207.12.38.12h1.04z"
clipRule="evenodd"
d="M8.45 9a.659.659 0 01-.29-.08.818.818 0 01-.26-.22.73.73 0 01-.61.3H5.95c-.507 0-.877-.1-1.11-.3-.227-.207-.34-.557-.34-1.05v-.1C4.5 6.517 4.987 6 5.96 6H7.5v-.35c0-.207-.063-.367-.19-.48-.127-.113-.313-.17-.56-.17H5V4h1.8c.58 0 1.007.127 1.28.38.28.253.42.66.42 1.22V8c0 .1.037.177.11.23.08.047.21.07.39.07V9h-.55zM7.04 8c.2 0 .327-.047.38-.14a.72.72 0 00.08-.36V7H6.1a.583.583 0 00-.599.554c.008.146.048.255.119.326.08.08.207.12.38.12h1.04z"
fill="#fff"
/>
<path fill="#fff" d="M11 4h-1v3l1 2h1l1-2V4h-1v3h-1V4z" />
<path d="M10.5 4h-1v3l1 2h1l1-2V4h-1v3h-1V4z" fill="#fff" />
</svg>
);
}
Expand Down
20 changes: 11 additions & 9 deletions src/fileIcons/FileIconBmp/FileIconBmp_size_m.svg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
16 changes: 8 additions & 8 deletions src/fileIcons/FileIconBmp/FileIconBmp_size_m.tsx
View file
Expand Up @@ -5,27 +5,27 @@ function FileIconBmpSizeM(props: React.SVGProps<SVGSVGElement>) {
<svg viewBox="0 0 30 40" {...props}>
<path d="M28 0H2a2 2 0 00-2 2v36a2 2 0 002 2h26a2 2 0 002-2V2a2 2 0 00-2-2z" />
<path
fill="#fff"
opacity={0.6}
fillRule="evenodd"
d="M8.5 18a.5.5 0 00-.5.5v9.167L10 25l5 5 4-3 3 2.25V18.5a.5.5 0 00-.5-.5h-13zM8 31.5v-2.167l2.108-2.81 4.798 4.797L19 28.25l3 2.25v1a.5.5 0 01-.5.5h-13a.5.5 0 01-.5-.5zm-1-13V32a1 1 0 001 1h14a1 1 0 001-1V18.5a1.5 1.5 0 00-1.5-1.5h-13A1.5 1.5 0 007 18.5zm9 4a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0zm1.5-2.5a2.5 2.5 0 100 5 2.5 2.5 0 000-5z"
clipRule="evenodd"
opacity={0.6}
d="M8.5 18H8v9.667L10 25l5 5 4-3 3 2.25V18.5 18H8.5zM8 31.5v-2.167l2.108-2.81 4.798 4.797L19 28.25l3 2.25V32H8v-.5zm-1-13V33h16v-3-11.5V17H7v1.5zm9 4a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0zm1.5-2.5a2.5 2.5 0 100 5 2.5 2.5 0 000-5z"
fill="#fff"
/>
<path
fill="#fff"
fillRule="evenodd"
d="M9 10.77c.22.153.487.23.8.23h.5c.587 0 1.017-.123 1.29-.37.273-.253.41-.663.41-1.23V7.6c0-.56-.137-.967-.41-1.22-.28-.253-.77-.38-1.35-.38H9V4H8v7h1v-.23zm.65-.77c-.22 0-.383-.057-.49-.17A.566.566 0 019 9.45V7h1.25c.247 0 .433.057.56.17.127.113.19.273.19.48v1.7c0 .207-.063.367-.19.48-.127.113-.313.17-.56.17h-.6z"
clipRule="evenodd"
d="M8.5 11.77c.22.153.487.23.8.23h.5c.587 0 1.017-.123 1.29-.37.273-.253.41-.663.41-1.23V8.6c0-.56-.137-.967-.41-1.22-.28-.253-.77-.38-1.35-.38H8.5V5h-1v7h1v-.23zm.65-.77c-.22 0-.383-.057-.49-.17a.566.566 0 01-.16-.38V8h1.25c.247 0 .433.057.56.17.127.113.19.273.19.48v1.7c0 .207-.063.367-.19.48-.127.113-.313.17-.56.17h-.6z"
fill="#fff"
/>
<path
d="M14 7c.384 0 .735.144 1 .382a1.5 1.5 0 012.497 1.026l.003.002V12h-1V8.5a.5.5 0 00-1 0V12h-1V8.5a.5.5 0 00-1 0V12h-1V7h.8v.173c.209-.11.447-.173.7-.173z"
fill="#fff"
d="M14.5 6c.384 0 .735.144 1 .382a1.5 1.5 0 012.497 1.026L18 7.41V11h-1V7.5a.5.5 0 00-1 0V11h-1V7.5a.5.5 0 00-1 0V11h-1V6h.8v.173c.209-.11.447-.173.7-.173z"
/>
<path
fill="#fff"
fillRule="evenodd"
d="M19.8 6.24V6H19v7h1.01v-2h1.29c.58 0 1.007-.127 1.28-.38.28-.253.42-.66.42-1.22V7.6c0-.567-.137-.973-.41-1.22-.273-.253-.703-.38-1.29-.38h-.7c-.327 0-.593.08-.8.24zm.36.94c.107-.12.27-.18.49-.18h.6c.247 0 .433.057.56.17.127.113.19.273.19.48v1.7c0 .207-.063.367-.19.48-.127.113-.313.17-.56.17h-1.24L20 7.55a.53.53 0 01.16-.37z"
clipRule="evenodd"
d="M19.3 7.24V7h-.8v7h1.01v-2h1.29c.58 0 1.007-.127 1.28-.38.28-.253.42-.66.42-1.22V8.6c0-.567-.137-.973-.41-1.22-.273-.253-.703-.38-1.29-.38h-.7c-.327 0-.593.08-.8.24zm.36.94c.107-.12.27-.18.49-.18h.6c.247 0 .433.057.56.17.127.113.19.273.19.48v1.7c0 .207-.063.367-.19.48-.127.113-.313.17-.56.17h-1.24l-.01-2.45a.53.53 0 01.16-.37z"
fill="#fff"
/>
</svg>
);
Expand Down

0 comments on commit a16c746

Please sign in to comment.