Skip to content

Commit

Permalink
Add apple component
Browse files Browse the repository at this point in the history
  • Loading branch information
onemanfighter committed Jun 1, 2024
1 parent 19d1052 commit 3dc4cf7
Show file tree
Hide file tree
Showing 19 changed files with 549 additions and 47 deletions.
8 changes: 1 addition & 7 deletions src/assets/icons/Apple.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,7 @@ import * as React from 'react';

const AppleIcon = (props: React.SVGProps<SVGSVGElement>) => {
return (
<svg
viewBox="0 0 1024 1024"
fill="currentColor"
height="1em"
width="1em"
{...props}
>
<svg viewBox="0 0 1024 1024" fill="currentColor" {...props}>
<path d="M747.4 535.7c-.4-68.2 30.5-119.6 92.9-157.5-34.9-50-87.7-77.5-157.3-82.8-65.9-5.2-138 38.4-164.4 38.4-27.9 0-91.7-36.6-141.9-36.6C273.1 298.8 163 379.8 163 544.6c0 48.7 8.9 99 26.7 150.8 23.8 68.2 109.6 235.3 199.1 232.6 46.8-1.1 79.9-33.2 140.8-33.2 59.1 0 89.7 33.2 141.9 33.2 90.3-1.3 167.9-153.2 190.5-221.6-121.1-57.1-114.6-167.2-114.6-170.7zm-105.1-305c50.7-60.2 46.1-115 44.6-134.7-44.8 2.6-96.6 30.5-126.1 64.8-32.5 36.8-51.6 82.3-47.5 133.6 48.4 3.7 92.6-21.2 129-63.7z" />
</svg>
);
Expand Down
2 changes: 0 additions & 2 deletions src/assets/icons/__tests__/__snapshots__/Apple.test.tsx.snap
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,7 @@ exports[`Apple should render correctly 1`] = `
<div>
<svg
fill="currentColor"
height="1em"
viewBox="0 0 1024 1024"
width="1em"
>
<path
d="M747.4 535.7c-.4-68.2 30.5-119.6 92.9-157.5-34.9-50-87.7-77.5-157.3-82.8-65.9-5.2-138 38.4-164.4 38.4-27.9 0-91.7-36.6-141.9-36.6C273.1 298.8 163 379.8 163 544.6c0 48.7 8.9 99 26.7 150.8 23.8 68.2 109.6 235.3 199.1 232.6 46.8-1.1 79.9-33.2 140.8-33.2 59.1 0 89.7 33.2 141.9 33.2 90.3-1.3 167.9-153.2 190.5-221.6-121.1-57.1-114.6-167.2-114.6-170.7zm-105.1-305c50.7-60.2 46.1-115 44.6-134.7-44.8 2.6-96.6 30.5-126.1 64.8-32.5 36.8-51.6 82.3-47.5 133.6 48.4 3.7 92.6-21.2 129-63.7z"
Expand Down
5 changes: 3 additions & 2 deletions src/components/MenuItem/MenuItemComponent.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,20 +6,21 @@ const MenuItemComponent = ({
command,
icon,
onClick,
side = 'right',
ariaLabel,
}: MenuItemComponentProps) => {
return (
<MenuItem
borderRadius={2}
icon={icon}
py={0.2}
color={'white'}
fontSize={'xs'}
py={1}
fontWeight={600}
onClick={onClick}
aria-label={ariaLabel}
command={command}
_hover={{ bg: '#f0f0f06f' }}
_hover={{ bg: side === 'right' ? '#f0f0f06f' : 'blue.500' }}
bg={'transparent'}
>
{text}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ exports[`MenuItemComponent should render for default values 1`] = `
<div>
<button
aria-label="abc-component"
class="chakra-menu__menuitem css-pk46t1"
class="chakra-menu__menuitem css-nxv7i8"
data-index="0"
id="menu-list-:r1:-menuitem-:r2:"
role="menuitem"
Expand All @@ -20,7 +20,7 @@ exports[`MenuItemComponent should render with search icon 1`] = `
<div>
<button
aria-label="abc-component"
class="chakra-menu__menuitem css-pk46t1"
class="chakra-menu__menuitem css-nxv7i8"
data-index="0"
id="menu-list-:r4:-menuitem-:r5:"
role="menuitem"
Expand Down Expand Up @@ -55,7 +55,7 @@ exports[`MenuItemComponent should render with search icon 2`] = `
<div>
<button
aria-label="abc-component"
class="chakra-menu__menuitem css-pk46t1"
class="chakra-menu__menuitem css-nxv7i8"
data-index="0"
id="menu-list-:r7:-menuitem-:r8:"
role="menuitem"
Expand Down
1 change: 1 addition & 0 deletions src/components/MenuItem/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,5 +3,6 @@ export type MenuItemComponentProps = {
command?: string;
icon?: React.ReactElement;
ariaLabel: string;
side?: 'left' | 'right';
onClick: () => void;
};
1 change: 1 addition & 0 deletions src/components/TopBarButton/TopBarButton.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ const TopBarButton = ({
<MenuButton
fontSize={'12'}
px={2}
py={0.5}
color={'white'}
borderRadius={4}
fontWeight={'600'}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ exports[`TopBar button should render for default values 1`] = `
aria-expanded="false"
aria-haspopup="menu"
aria-label="abc-component"
class="chakra-menu__menu-button css-qnx1nw"
class="chakra-menu__menu-button css-bracgg"
id="menu-button-:r1:"
>
<span
Expand All @@ -30,7 +30,7 @@ exports[`TopBar button should render with search icon 1`] = `
aria-expanded="false"
aria-haspopup="menu"
aria-label="abc-component"
class="chakra-menu__menu-button css-qnx1nw"
class="chakra-menu__menu-button css-bracgg"
id="menu-button-:r5:"
>
<span
Expand Down
15 changes: 12 additions & 3 deletions src/localization/locales/en/main.json
Original file line number Diff line number Diff line change
Expand Up @@ -41,9 +41,18 @@
"otherNetwork": "Other Network",
"wifiSettings": "Wi-Fi settings..."
},
"appleIcon": {
"title": "Apple Icon",
"appleIconSettings": "Apple Icon settings..."
"apple": {
"aboutThisMac": "About This Mac",
"systemSettings": "System Settings...",
"appStore": "App Store...",
"updates": "{{count: string}} updates",
"recentItems": "Recent Items",
"forceQuit": "Force Quit...",
"sleep": "Sleep",
"restart": "Restart...",
"shutDown": "Shut Down...",
"lockScreen": "Lock Screen",
"logOut": "Log out {{userName: string}}..."
}
}
}
93 changes: 93 additions & 0 deletions src/screens/private/Home/TopBar/LeftSideComponents/Apple.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,93 @@
import { AppleIcon } from '@assets';
import { Menu, MenuDivider } from '@chakra-ui/react';
import {
MenuItemComponent,
MenuListComponent,
TopBarButton,
} from '@components';
import { useTranslation } from 'react-i18next';

const Apple = () => {
const { t } = useTranslation();
return (
<Menu>
<TopBarButton
text=""
onClick={() => {}}
ariaLabel="apple-top-bar-button"
icon={<AppleIcon width="1.5em" height="1.5em" color="white" />}
/>
<MenuListComponent>
<MenuItemComponent
text={t('TopAppBar.apple.aboutThisMac')}
ariaLabel="about-this-mac"
onClick={() => {}}
side="left"
/>
<MenuDivider p={0} m={0.5} />
<MenuItemComponent
text={t('TopAppBar.apple.systemSettings')}
ariaLabel="system-settings"
onClick={() => {}}
side="left"
/>
<MenuItemComponent
text={t('TopAppBar.apple.appStore')}
ariaLabel="app-store"
onClick={() => {}}
side="left"
/>
<MenuDivider p={0} m={0.5} />
<MenuItemComponent
text={t('TopAppBar.apple.recentItems')}
ariaLabel="recent-items"
onClick={() => {}}
command=">"
side="left"
/>
<MenuDivider p={0} m={0.5} />
<MenuItemComponent
text={t('TopAppBar.apple.forceQuit')}
ariaLabel="force-quit"
onClick={() => {}}
side="left"
command=""
/>
<MenuDivider p={0} m={0.5} />
<MenuItemComponent
text={t('TopAppBar.apple.sleep')}
ariaLabel="sleep"
side="left"
onClick={() => {}}
/>
<MenuItemComponent
text={t('TopAppBar.apple.restart')}
ariaLabel="restart"
side="left"
onClick={() => {}}
/>
<MenuItemComponent
text={t('TopAppBar.apple.shutDown')}
ariaLabel="shutDown"
side="left"
onClick={() => {}}
/>
<MenuDivider p={0} m={0.5} />
<MenuItemComponent
text={t('TopAppBar.apple.lockScreen')}
ariaLabel="lock-screen"
side="left"
onClick={() => {}}
/>
<MenuItemComponent
text={t('TopAppBar.apple.logOut', { userName: 'Amit Raikwar' })}
ariaLabel="logout"
side="left"
onClick={() => {}}
/>
</MenuListComponent>
</Menu>
);
};

export default Apple;
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import { fireEvent, render, screen } from '@testing-library/react';
import Apple from '../Apple';

describe('Apple', () => {
it('Should render apple button correctly', () => {
const { container } = render(<Apple />);

expect(container).toMatchSnapshot();
});

it('Should render apple menu correctly', () => {
const { container } = render(<Apple />);

fireEvent.click(screen.getByLabelText('apple-top-bar-button'));

expect(container).toMatchSnapshot();
});
});
Loading

0 comments on commit 3dc4cf7

Please sign in to comment.