paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 39 Packages Projects Releases Wiki Activity

Remove icon svgs, replace with v4 mui icons.

Browse Source 
Signed-off-by: hiba-aldalaty <hibaaldalaty@gmail.com>
This commit is contained in:
hiba-aldalaty
2021-11-29 09:49:50 +00:00
parent 32cac66991
commit 8836aef4a3
9 changed files with 53 additions and 197 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/core-components/src/layout/Sidebar/Bar.test.tsx
+4 -8
View File
@@ -20,8 +20,8 @@ import { screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import BuildRoundedIcon from '@material-ui/icons/BuildRounded';
import CreateComponentIcon from '@material-ui/icons/AddCircleOutline';
import { CatalogSidebarLogo } from './icons/CatalogSidebarLogo';
import { MiscIcon } from './icons/MiscIcon';
import MenuBookIcon from '@material-ui/icons/MenuBook';
import AcUnitIcon from '@material-ui/icons/AcUnit';
import { Sidebar, SidebarExpandButton } from './Bar';
import { SidebarItem, SidebarSearchField } from './Items';
import { SidebarSubmenuItem } from './SidebarSubmenuItem';
@@ -35,17 +35,13 @@ async function renderScalableSidebar() {
>
<Sidebar disableExpandOnHover>
<SidebarSearchField onSearch={() => {}} to="/search" />
<SidebarItem
icon={CatalogSidebarLogo}
onClick={() => {}}
text="Catalog"
>
<SidebarItem icon={MenuBookIcon} onClick={() => {}} text="Catalog">
<SidebarSubmenu title="Catalog">
<SidebarSubmenuItem title="Tools" to="/1" icon={BuildRoundedIcon} />
<SidebarSubmenuItem
title="Misc"
to="/6"
icon={MiscIcon}
icon={AcUnitIcon}
dropdownItems={[
{
title: 'dropdown item 1',
packages/core-components/src/layout/Sidebar/Items.tsx
+1 -1
View File
@@ -388,7 +388,7 @@ export const SidebarItem = forwardRef<any, SidebarItemProps>((props, ref) => {
variant="dot"
overlap="circular"
invisible={!hasNotifications}
className={clsx({ [classes.closeItemIcon]: !isOpen })}
className={clsx({ [classes.closedItemIcon]: !isOpen })}
>
<Icon fontSize="small" />
</Badge>
packages/core-components/src/layout/Sidebar/Sidebar.stories.tsx
+12 -8
View File
@@ -32,10 +32,10 @@ import {
SidebarSpace,
} from '.';
import { SidebarSubmenuItem } from './SidebarSubmenuItem';
import { CatalogSidebarLogo } from './icons/CatalogSidebarLogo';
import { APIsIcon } from './icons/APIsIcon';
import { ServicesIcon } from './icons/ServicesIcon';
import { MiscIcon } from './icons/MiscIcon';
import MenuBookIcon from '@material-ui/icons/MenuBook';
import CloudQueueIcon from '@material-ui/icons/CloudQueue';
import SettingsApplications from '@material-ui/icons/SettingsApplications';
import AcUnitIcon from '@material-ui/icons/AcUnit';
import { SidebarSubmenu } from './SidebarSubmenu';
export default {
@@ -72,11 +72,15 @@ export const SampleScalableSidebar = () => (
<Sidebar disableExpandOnHover>
<SidebarSearchField onSearch={handleSearch} to="/search" />
<SidebarDivider />
<SidebarItem icon={CatalogSidebarLogo} text="Catalog">
<SidebarItem icon={MenuBookIcon} text="Catalog">
<SidebarSubmenu title="Catalog">
<SidebarSubmenuItem title="Tools" to="/1" icon={BuildRoundedIcon} />
<SidebarSubmenuItem title="APIs" to="/2" icon={APIsIcon} />
<SidebarSubmenuItem title="Services" to="/3" icon={ServicesIcon} />
<SidebarSubmenuItem title="APIs" to="/2" icon={CloudQueueIcon} />
<SidebarSubmenuItem
title="Services"
to="/3"
icon={SettingsApplications}
/>
<SidebarSubmenuItem
title="Libraries"
to="/4"
@@ -86,7 +90,7 @@ export const SampleScalableSidebar = () => (
<SidebarSubmenuItem
title="Misc"
to="/6"
icon={MiscIcon}
icon={AcUnitIcon}
dropdownItems={[
{
title: 'Lorem Ipsum',
packages/core-components/src/layout/Sidebar/icons/APIsIcon.tsx
-33
View File
@@ -1,33 +0,0 @@
/*
* Copyright 2021 The Backstage Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import React from 'react';
export const APIsIcon = () => {
return (
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M14 12L12 14L10 12L12 10L14 12ZM12 6L14.12 8.12L16.62 5.62L12 1L7.38 5.62L9.88 8.12L12 6ZM6 12L8.12 9.88L5.62 7.38L1 12L5.62 16.62L8.12 14.12L6 12ZM18 12L15.88 14.12L18.38 16.62L23 12L18.38 7.38L15.88 9.88L18 12ZM12 18L9.88 15.88L7.38 18.38L12 23L16.62 18.38L14.12 15.88L12 18Z"
fill="#BDBDBD"
/>
</svg>
);
};
packages/core-components/src/layout/Sidebar/icons/CatalogSidebarLogo.tsx
-41
View File
@@ -1,41 +0,0 @@
/*
* Copyright 2021 The Backstage Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import SvgIcon from '@material-ui/core/SvgIcon';
import React from 'react';
export const CatalogSidebarLogo = () => {
return (
<SvgIcon
xmlns="http://www.w3.org/2000/svg"
width="20"
height="21"
fill="none"
viewBox="0 0 20 21"
fontSize="small"
>
<path
fillRule="evenodd"
d="M4 9.923l5.5-9 5.5 9H4zm7.43-2L9.5 4.763l-1.94 3.16h3.87zm3.57 4c-2.49 0-4.5 2.01-4.5 4.5s2.01 4.5 4.5 4.5 4.5-2.01 4.5-4.5-2.01-4.5-4.5-4.5zm-2.5 4.5a2.5 2.5 0 005 0 2.5 2.5 0 00-5 0zm-12 4h8v-8h-8v8zm6-6h-4v4h4v-4z"
clipRule="evenodd"
/>
<path
fillRule="evenodd"
d="M4 9.923l5.5-9 5.5 9H4zm7.43-2L9.5 4.763l-1.94 3.16h3.87zm3.57 4c-2.49 0-4.5 2.01-4.5 4.5s2.01 4.5 4.5 4.5 4.5-2.01 4.5-4.5-2.01-4.5-4.5-4.5zm-2.5 4.5a2.5 2.5 0 005 0 2.5 2.5 0 00-5 0zm-12 4h8v-8h-8v8zm6-6h-4v4h4v-4z"
clipRule="evenodd"
/>
</SvgIcon>
);
};
packages/core-components/src/layout/Sidebar/icons/DoubleArrowLeft.tsx
+19 -21
View File
@@ -16,35 +16,33 @@
import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import ArrowBackIosIcon from '@material-ui/icons/ArrowBackIos';
const useStyles = makeStyles({
svg: {
width: 'auto',
height: 15,
iconContainer: {
display: 'flex',
position: 'relative',
width: '100%',
},
path: {
fill: '#7df3e1',
arrow1: {
right: '6px',
position: 'absolute',
},
});
const DoubleArrowRight = () => {
const DoubleArrowLeft = () => {
const classes = useStyles();
return (
<svg
className={classes.svg}
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
>
<path
d="M15.18 4.94408L14.236 4.00008L8.90266 9.33341L14.236 14.6667L15.18 13.7227L10.7907 9.33341L15.18 4.94408Z"
fill="#BDBDBD"
/>
<path
d="M8.90271 4.94408L7.95871 4.00008L2.62538 9.33341L7.95871 14.6667L8.90271 13.7227L4.51338 9.33341L8.90271 4.94408Z"
fill="#BDBDBD"
/>
</svg>
<div className={classes.iconContainer}>
<div className={classes.arrow1}>
<ArrowBackIosIcon style={{ fontSize: '12px' }} />
</div>
<div>
<ArrowBackIosIcon style={{ fontSize: '12px' }} />
</div>
</div>
);
};
export default DoubleArrowRight;
export default DoubleArrowLeft;
packages/core-components/src/layout/Sidebar/icons/DoubleArrowRight.tsx
+17 -19
View File
@@ -16,34 +16,32 @@
import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import ArrowForwardIosIcon from '@material-ui/icons/ArrowForwardIos';
const useStyles = makeStyles({
svg: {
width: 'auto',
height: 15,
iconContainer: {
display: 'flex',
position: 'relative',
width: '100%',
},
path: {
fill: '#7df3e1',
arrow1: {
right: '6px',
position: 'absolute',
},
});
const DoubleArrowRight = () => {
const classes = useStyles();
return (
<svg
className={classes.svg}
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
>
<path
d="M0.82 11.0559L1.764 11.9999L7.09733 6.66658L1.764 1.33325L0.82 2.27725L5.20933 6.66658L0.82 11.0559Z"
fill="#BDBDBD"
/>
<path
d="M7.0973 11.0559L8.0413 11.9999L13.3746 6.66658L8.0413 1.33325L7.0973 2.27725L11.4866 6.66658L7.0973 11.0559Z"
fill="#BDBDBD"
/>
</svg>
<div className={classes.iconContainer}>
<div className={classes.arrow1}>
<ArrowForwardIosIcon style={{ fontSize: '12px' }} />
</div>
<div>
<ArrowForwardIosIcon style={{ fontSize: '12px' }} />
</div>
</div>
);
};
packages/core-components/src/layout/Sidebar/icons/MiscIcon.tsx
-33
View File
@@ -1,33 +0,0 @@
/*
* Copyright 2021 The Backstage Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import React from 'react';
export const MiscIcon = () => {
return (
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M21.29 13.9L18 12L21.29 10.1C21.77 9.82 21.93 9.21 21.66 8.73L19.66 5.27C19.38 4.79 18.77 4.63 18.29 4.9L15 6.8V3C15 2.45 14.55 2 14 2H9.99999C9.44999 2 8.99999 2.45 8.99999 3V6.8L5.71 4.9C5.23 4.63 4.62 4.79 4.34 5.27L2.33999 8.73C2.05999 9.21 2.22999 9.82 2.70999 10.1L5.99999 12L2.70999 13.9C2.22999 14.18 2.06999 14.79 2.33999 15.27L4.34 18.73C4.62 19.21 5.23 19.37 5.71 19.1L8.99999 17.2V21C8.99999 21.55 9.44999 22 9.99999 22H14C14.55 22 15 21.55 15 21V17.2L18.29 19.1C18.77 19.38 19.38 19.21 19.66 18.73L21.66 15.27C21.94 14.79 21.77 14.18 21.29 13.9ZM18.43 16.87L13.75 14.17C13.42 13.97 13 14.21 13 14.6V20H11V14.6C11 14.22 10.58 13.97 10.25 14.17L5.57 16.87L4.57 15.14L9.24999 12.44C9.57999 12.25 9.57999 11.77 9.24999 11.57L4.57 8.87L5.57 7.14L10.25 9.84C10.58 10.03 11 9.79 11 9.4V4H13V9.4C13 9.78 13.42 10.03 13.75 9.83L18.43 7.13L19.43 8.86L14.75 11.56C14.42 11.75 14.42 12.23 14.75 12.43L19.43 15.13L18.43 16.87Z"
fill="#BDBDBD"
/>
</svg>
);
};
packages/core-components/src/layout/Sidebar/icons/ServicesIcon.tsx
-33
View File
@@ -1,33 +0,0 @@
/*
* Copyright 2021 The Backstage Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import React from 'react';
export const ServicesIcon = () => {
return (
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M16.59 6.59L14.18 5.5L16.59 4.41L17.68 2L18.77 4.41L21.18 5.5L18.77 6.59L17.68 9L16.59 6.59ZM20.46 12.72L19.68 11L18.9 12.72L17.18 13.5L18.9 14.28L19.68 16L20.46 14.28L22.18 13.5L20.46 12.72ZM15.42 14.37L17.36 15.84L14.86 20.17L12.62 19.23C12.42 19.36 12.2 19.49 11.98 19.6L11.68 22H6.68L6.38 19.59C6.16 19.48 5.95 19.36 5.74 19.22L3.5 20.16L1 15.83L2.94 14.36C2.93 14.25 2.93 14.12 2.93 14C2.93 13.88 2.93 13.75 2.94 13.63L1 12.16L3.5 7.83L5.74 8.77C5.94 8.64 6.16 8.51 6.38 8.4L6.68 6H11.68L11.98 8.41C12.2 8.52 12.41 8.64 12.62 8.78L14.86 7.84L17.36 12.17L15.42 13.64C15.43 13.76 15.43 13.88 15.43 14.01C15.43 14.14 15.43 14.25 15.42 14.37ZM12.18 14C12.18 12.34 10.84 11 9.18 11C7.52 11 6.18 12.34 6.18 14C6.18 15.66 7.52 17 9.18 17C10.84 17 12.18 15.66 12.18 14Z"
fill="#BDBDBD"
/>
</svg>
);
};