Skip to content
This repository has been archived by the owner on Feb 27, 2024. It is now read-only.

GlobalMenu をCSSModuleに置換え #281

Merged
merged 2 commits into from May 27, 2023
Merged

GlobalMenu をCSSModuleに置換え #281

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
374cbdf
:recycle: #276 GlobalMenu をCSSModuleに置換え
keitakn May 26, 2023
31aa380
:art: #276 アクセシビリティ関連の以下のエラーを回避する為にButtonタグを利用するように変更
keitakn May 27, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
85 changes: 85 additions & 0 deletions src/components/GlobalMenu/GlobalMenu.module.css
View file
Open in desktop
@@ -0,0 +1,85 @@
.wrapper {
position: relative;
display: flex;
flex-direction: column;
gap: 10px;
align-items: flex-start;
justify-content: center;
width: 69px;
height: 35px;
padding: 10px 22px 7px 0;
}

.header-wrapper {
display: flex;
flex-direction: column;
gap: 10px;
align-items: flex-start;
justify-content: center;
padding: 10px 22px 7px 0;
}

.fa-times-wrapper {
flex: none;
flex-grow: 0;
order: 0;
width: 30px;
height: 30px;
}

.fa-times {
font-style: normal;
font-weight: 900;
font-size: 30px;
line-height: 30px;
color: var(--primary-color);
cursor: pointer;
}

.fa-cloud-upload-alt {
font-style: normal;
font-weight: 900;
font-size: 16px;
line-height: 30px;
color: var(--primary-color);
margin-right: 10px;
}

.link-group-wrapper {
position: absolute;
top: 73px;
left: 15px;
display: flex;
flex-direction: column;
align-items: flex-start;
width: 305px;
height: 180px;
padding: 0;
}

.link-wrapper {
flex: none;
flex-grow: 0;
order: 0;
width: 305px;
height: 45px;
}

.link-text {
display: flex;
align-items: center;
font-family: Roboto, sans-serif;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 30px;
color: var(--primary-color);
text-decoration-line: underline;
cursor: pointer;
}

.underline {
box-sizing: border-box;
background: var(--background-color);
border-bottom: 1px solid var(--sub-color);
}
12 changes: 12 additions & 0 deletions src/components/GlobalMenu/GlobalMenu.module.css.d.ts
View file
Open in desktop
@@ -0,0 +1,12 @@
declare const styles: {
readonly wrapper: string;
readonly 'header-wrapper': string;
readonly 'fa-times-wrapper': string;
readonly 'fa-times': string;
readonly 'fa-cloud-upload-alt': string;
readonly 'link-group-wrapper': string;
readonly 'link-wrapper': string;
readonly 'link-text': string;
readonly underline: string;
};
export = styles;
166 changes: 47 additions & 119 deletions src/components/GlobalMenu/GlobalMenu.tsx
View file
Open in desktop
@@ -1,152 +1,80 @@
import type { FC } from 'react';
import Link from 'next/link';
import { FaTimes, FaCloudUploadAlt } from 'react-icons/fa';
import styled from 'styled-components';
import {
createPrivacyPolicyLinksFromLanguages,
createTermsOfUseLinksFromLanguages,
} from '../../features';
import { mixins } from '../../styles';

import type { Language } from '../../types';

const _Wrapper = styled.div`
position: relative;
display: flex;
flex-direction: column;
gap: 10px;
align-items: flex-start;
justify-content: center;
width: 69px;
height: 35px;
padding: 10px 22px 7px 0;
`;

const _HeaderWrapper = styled.div`
display: flex;
flex-direction: column;
gap: 10px;
align-items: flex-start;
justify-content: center;
padding: 10px 22px 7px 0;
`;

const _FaTimesWrapper = styled.div`
flex: none;
flex-grow: 0;
order: 0;
width: 30px;
height: 30px;
`;

const faTimesStyle = {
fontStyle: 'normal',
fontWeight: 900,
fontSize: '30px',
lineHeight: '30px',
color: `${mixins.colors.primary}`,
cursor: 'pointer',
};

const _LinkGroupWrapper = styled.div`
position: absolute;
top: 73px;
left: 15px;
display: flex;
flex-direction: column;
align-items: flex-start;
width: 305px;
height: 180px;
padding: 0;
`;

const _LinkWrapper = styled.div`
flex: none;
flex-grow: 0;
order: 0;
width: 305px;
height: 45px;
`;

const _LinkText = styled.span`
display: flex;
align-items: center;
font-family: Roboto, sans-serif;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 30px;
color: ${mixins.colors.primary};
text-decoration-line: underline;
cursor: pointer;
`;

const _UnderLine = styled.div`
box-sizing: border-box;
background: ${mixins.colors.background};
border-bottom: 1px solid ${mixins.colors.sub};
`;

const faCloudUploadAltStyle = {
fontStyle: 'normal',
fontWeight: 900,
fontSize: '16px',
lineHeight: '30px',
color: `${mixins.colors.primary}`,
marginRight: '10px',
};
import styles from './GlobalMenu.module.css';

export type Props = {
language: Language;
onClickCloseButton: () => void;
};

// eslint-disable-next-line max-lines-per-function
export const GlobalMenu: FC<Props> = ({ language, onClickCloseButton }) => {
const termsOfUseLinks = createTermsOfUseLinksFromLanguages(language);

const privacyPolicyLinks = createPrivacyPolicyLinksFromLanguages(language);

return (
<_Wrapper>
<_HeaderWrapper>
<_FaTimesWrapper onClick={onClickCloseButton}>
<FaTimes style={faTimesStyle} />
</_FaTimesWrapper>
</_HeaderWrapper>
<_LinkGroupWrapper>
<_LinkWrapper>
<div className={styles.wrapper}>
<div className={styles['header-wrapper']}>
<button
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ESLintのアクセシビリティ関連のエラーが出たのでButtonタグを使うように変更。

className={styles['fa-times-wrapper']}
onClick={onClickCloseButton}
>
<FaTimes className={styles['fa-times']} />
</button>
</div>
<div className={styles['link-group-wrapper']}>
<div className={styles['link-wrapper']}>
<Link href="/" prefetch={false}>
<_LinkText data-gtm-click="global-menu-top-link">TOP</_LinkText>
<span
className={styles['link-text']}
data-gtm-click="global-menu-top-link"
>
TOP
</span>
</Link>
<_UnderLine />
</_LinkWrapper>
<_LinkWrapper>
<div className={styles.underline} />
</div>
<div className={styles['link-wrapper']}>
<Link href="/upload" prefetch={false}>
<_LinkText data-gtm-click="global-menu-upload-cat-link">
<FaCloudUploadAlt style={faCloudUploadAltStyle} />
<span
className={styles['link-text']}
data-gtm-click="global-menu-upload-cat-link"
>
<FaCloudUploadAlt className={styles['fa-cloud-upload-alt']} />
Upload new Cats
</_LinkText>
</span>
</Link>
<_UnderLine />
</_LinkWrapper>
<_LinkWrapper>
<div className={styles.underline} />
</div>
<div className={styles['link-wrapper']}>
<Link href={termsOfUseLinks.link} prefetch={false}>
<_LinkText data-gtm-click="global-menu-terms-link">
<span
className={styles['link-text']}
data-gtm-click="global-menu-terms-link"
>
{termsOfUseLinks.text}
</_LinkText>
</span>
</Link>
<_UnderLine />
</_LinkWrapper>
<_LinkWrapper>
<div className={styles.underline} />
</div>
<div className={styles['link-wrapper']}>
<Link href={privacyPolicyLinks.link} prefetch={false}>
<_LinkText data-gtm-click="global-menu-terms-link">
<span
className={styles['link-text']}
data-gtm-click="global-menu-terms-link"
>
{privacyPolicyLinks.text}
</_LinkText>
</span>
</Link>
<_UnderLine />
</_LinkWrapper>
</_LinkGroupWrapper>
</_Wrapper>
<div className={styles.underline} />
</div>
</div>
</div>
);
};