From 374cbdf98917f31be992d00fa33dbdc013e39a84 Mon Sep 17 00:00:00 2001 From: keitakn Date: Sat, 27 May 2023 01:21:33 +0900 Subject: [PATCH 1/2] =?UTF-8?q?:recycle:=20#276=20GlobalMenu=20=E3=82=92CS?= =?UTF-8?q?SModule=E3=81=AB=E7=BD=AE=E6=8F=9B=E3=81=88?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../GlobalMenu/GlobalMenu.module.css | 85 +++++++++ .../GlobalMenu/GlobalMenu.module.css.d.ts | 12 ++ src/components/GlobalMenu/GlobalMenu.tsx | 166 +++++------------- 3 files changed, 144 insertions(+), 119 deletions(-) create mode 100644 src/components/GlobalMenu/GlobalMenu.module.css create mode 100644 src/components/GlobalMenu/GlobalMenu.module.css.d.ts diff --git a/src/components/GlobalMenu/GlobalMenu.module.css b/src/components/GlobalMenu/GlobalMenu.module.css new file mode 100644 index 0000000..ba543c4 --- /dev/null +++ b/src/components/GlobalMenu/GlobalMenu.module.css @@ -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); +} diff --git a/src/components/GlobalMenu/GlobalMenu.module.css.d.ts b/src/components/GlobalMenu/GlobalMenu.module.css.d.ts new file mode 100644 index 0000000..482d17f --- /dev/null +++ b/src/components/GlobalMenu/GlobalMenu.module.css.d.ts @@ -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; diff --git a/src/components/GlobalMenu/GlobalMenu.tsx b/src/components/GlobalMenu/GlobalMenu.tsx index 7582eae..bb1cd6c 100644 --- a/src/components/GlobalMenu/GlobalMenu.tsx +++ b/src/components/GlobalMenu/GlobalMenu.tsx @@ -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 = ({ language, onClickCloseButton }) => { const termsOfUseLinks = createTermsOfUseLinksFromLanguages(language); - const privacyPolicyLinks = createPrivacyPolicyLinksFromLanguages(language); return ( - <_Wrapper> - <_HeaderWrapper> - <_FaTimesWrapper onClick={onClickCloseButton}> - - - - <_LinkGroupWrapper> - <_LinkWrapper> +
+
+
+ +
+
+
+
- <_LinkText data-gtm-click="global-menu-top-link">TOP + + TOP + - <_UnderLine /> - - <_LinkWrapper> +
+
+
- <_LinkText data-gtm-click="global-menu-upload-cat-link"> - + + Upload new Cats - + - <_UnderLine /> - - <_LinkWrapper> +
+
+
- <_LinkText data-gtm-click="global-menu-terms-link"> + {termsOfUseLinks.text} - + - <_UnderLine /> - - <_LinkWrapper> +
+
+
- <_LinkText data-gtm-click="global-menu-terms-link"> + {privacyPolicyLinks.text} - + - <_UnderLine /> - - - +
+
+
+
); }; From 31aa380afe27e1ce183979bc19073005e8774fb1 Mon Sep 17 00:00:00 2001 From: keitakn Date: Sat, 27 May 2023 15:26:58 +0900 Subject: [PATCH 2/2] =?UTF-8?q?:art:=20#276=20=E3=82=A2=E3=82=AF=E3=82=BB?= =?UTF-8?q?=E3=82=B7=E3=83=93=E3=83=AA=E3=83=86=E3=82=A3=E9=96=A2=E9=80=A3?= =?UTF-8?q?=E3=81=AE=E4=BB=A5=E4=B8=8B=E3=81=AE=E3=82=A8=E3=83=A9=E3=83=BC?= =?UTF-8?q?=E3=82=92=E5=9B=9E=E9=81=BF=E3=81=99=E3=82=8B=E7=82=BA=E3=81=AB?= =?UTF-8?q?Button=E3=82=BF=E3=82=B0=E3=82=92=E5=88=A9=E7=94=A8=E3=81=99?= =?UTF-8?q?=E3=82=8B=E3=82=88=E3=81=86=E3=81=AB=E5=A4=89=E6=9B=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 24:9 error Visible, non-interactive elements with click handlers must have at least one keyboard listener jsx-a11y/click-events-have-key-events 24:9 error Avoid non-native interactive elements. If using native HTML is not possible, add an appropriate role and support for tabbing, mouse, keyboard, and touch inputs to an interactive content element jsx-a11y/no-static-element-interaction --- src/components/GlobalMenu/GlobalMenu.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/GlobalMenu/GlobalMenu.tsx b/src/components/GlobalMenu/GlobalMenu.tsx index bb1cd6c..2b31422 100644 --- a/src/components/GlobalMenu/GlobalMenu.tsx +++ b/src/components/GlobalMenu/GlobalMenu.tsx @@ -21,12 +21,12 @@ export const GlobalMenu: FC = ({ language, onClickCloseButton }) => { return (
-
-
+