From 456724301cef84598127b9e8da06f4d097b656c5 Mon Sep 17 00:00:00 2001 From: utkarsha-deriv Date: Mon, 22 May 2023 11:40:35 +0400 Subject: [PATCH 01/16] feat: feat1 --- docusaurus.config.js | 8 ++++++++ src/components/LanguageSwitcher/index.tsx | 19 +++++++++++++++++++ .../language_switcher.module.scss | 1 + src/theme/NavbarItem/ComponentTypes.tsx | 2 ++ 4 files changed, 30 insertions(+) create mode 100644 src/components/LanguageSwitcher/index.tsx create mode 100644 src/components/LanguageSwitcher/language_switcher.module.scss diff --git a/docusaurus.config.js b/docusaurus.config.js index 5186b780..0a8fa0d1 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -82,6 +82,14 @@ const config = { type: 'custom-user-navbar-item', position: 'right', }, + // { + // type: 'custom-language-switcher-navbar-item', + // position: 'right', + // }, + { + type: 'localeDropdown', + position: 'right', + }, ], }, prism: { diff --git a/src/components/LanguageSwitcher/index.tsx b/src/components/LanguageSwitcher/index.tsx new file mode 100644 index 00000000..fe4f7e76 --- /dev/null +++ b/src/components/LanguageSwitcher/index.tsx @@ -0,0 +1,19 @@ +import React, { useRef, useState } from 'react'; +import styles from './language_switcher.module.scss'; +import useClickOutsideDropdown from '@site/src/hooks/useClickOutsideDropdown'; + +const LanguageSwitcher = () => { + const [is_toggle_dropdown, setToggleDropdown] = useState(false); + const dropdown_toggle = is_toggle_dropdown ? styles.active : styles.inactive; + + const dropdownRef = useRef(null); + useClickOutsideDropdown(dropdownRef, setToggleDropdown, false); + + return ( +
+ +
+ ); +}; + +export default LanguageSwitcher; diff --git a/src/components/LanguageSwitcher/language_switcher.module.scss b/src/components/LanguageSwitcher/language_switcher.module.scss new file mode 100644 index 00000000..f3e5ce27 --- /dev/null +++ b/src/components/LanguageSwitcher/language_switcher.module.scss @@ -0,0 +1 @@ +@use 'src/styles/utility' as *; diff --git a/src/theme/NavbarItem/ComponentTypes.tsx b/src/theme/NavbarItem/ComponentTypes.tsx index 393dad7b..a011fa1a 100644 --- a/src/theme/NavbarItem/ComponentTypes.tsx +++ b/src/theme/NavbarItem/ComponentTypes.tsx @@ -9,6 +9,7 @@ import ComponentTypes from '@theme-original/NavbarItem/ComponentTypes'; import UserNavbarItem from '@site/src/components/UserNavbarItem'; import ApiTokenNavbarItem from '@site/src/components/ApiTokenNavbarItem'; import NavbarSeparator from '@site/src/components/NavbarSeparator'; +import LanguageSwitcher from '@site/src/components/LanguageSwitcher'; // We have to provide custom in the name of the component export default { @@ -16,4 +17,5 @@ export default { 'custom-user-navbar-item': UserNavbarItem, 'custom-api-token-navbar-item': ApiTokenNavbarItem, 'custom-navbar-separator': NavbarSeparator, + 'custom-language-switcher-navbar-item': LanguageSwitcher, }; From 5a904dffb59f31f697c9c9237d6befa64b7aa623 Mon Sep 17 00:00:00 2001 From: utkarsha-deriv Date: Mon, 22 May 2023 17:28:15 +0400 Subject: [PATCH 02/16] feat: dropdown --- docusaurus.config.js | 10 ++- src/components/LanguageSwitcher/index.tsx | 4 +- src/styles/index.scss | 14 ++++ .../LocaleDropdownNavbarItem/index.tsx | 74 +++++++++++++++++++ .../styles.module.css | 4 + 5 files changed, 104 insertions(+), 2 deletions(-) create mode 100644 src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx create mode 100644 src/theme/NavbarItem/LocaleDropdownNavbarItem/styles.module.css diff --git a/docusaurus.config.js b/docusaurus.config.js index 0a8fa0d1..9f7fee7f 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -24,7 +24,15 @@ const config = { // to replace "en" with "zh-Hans". i18n: { defaultLocale: 'en', - locales: ['en'], + locales: ['en', 'pr'], + localeConfigs: { + en: { + label: 'English', + }, + pr: { + label: 'Portuguese', + }, + }, }, plugins: ['@docusaurus/theme-live-codeblock', 'docusaurus-plugin-sass'], diff --git a/src/components/LanguageSwitcher/index.tsx b/src/components/LanguageSwitcher/index.tsx index fe4f7e76..88303746 100644 --- a/src/components/LanguageSwitcher/index.tsx +++ b/src/components/LanguageSwitcher/index.tsx @@ -11,7 +11,9 @@ const LanguageSwitcher = () => { return (
- +
); }; diff --git a/src/styles/index.scss b/src/styles/index.scss index ae6fc8a5..2243fc3c 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -266,3 +266,17 @@ main[class*='docMainContainer'] .container { width: rem(1.2); } } + +.dropdown--right .dropdown__menu { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 16px; + top: 51px; +} + +.dropdown__menu { + padding: 24px 24px; + background-color: var(--colors-greyLight100); + border-radius: 8px; + box-shadow: 0 0 20px #0000000d, 0 16px 20px #0000000d; +} diff --git a/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx b/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx new file mode 100644 index 00000000..322e0ad9 --- /dev/null +++ b/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx @@ -0,0 +1,74 @@ +import React from 'react'; +import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; +import { useAlternatePageUtils } from '@docusaurus/theme-common/internal'; +import { translate } from '@docusaurus/Translate'; +import { useLocation } from '@docusaurus/router'; +import DropdownNavbarItem from '@theme/NavbarItem/DropdownNavbarItem'; +import type { LinkLikeNavbarItemProps } from '@theme/NavbarItem'; +import type { Props } from '@theme/NavbarItem/LocaleDropdownNavbarItem'; + +import styles from './styles.module.css'; + +export default function LocaleDropdownNavbarItem({ + mobile, + dropdownItemsBefore, + dropdownItemsAfter, + ...props +}: Props): JSX.Element { + const { + i18n: { currentLocale, locales, localeConfigs }, + } = useDocusaurusContext(); + const alternatePageUtils = useAlternatePageUtils(); + const { search, hash } = useLocation(); + + const localeItems = locales.map((locale): LinkLikeNavbarItemProps => { + const baseTo = `pathname://${alternatePageUtils.createUrl({ + locale, + fullyQualified: false, + })}`; + // preserve ?search#hash suffix on locale switches + const to = `${baseTo}${search}${hash}`; + return { + label: localeConfigs[locale].label, + lang: localeConfigs[locale].htmlLang, + to, + target: '_self', + autoAddBaseUrl: false, + className: + // eslint-disable-next-line no-nested-ternary + locale === currentLocale + ? // Similar idea as DefaultNavbarItem: select the right Infima active + // class name. This cannot be substituted with isActive, because the + // target URLs contain `pathname://` and therefore are not NavLinks! + mobile + ? 'menu__link--active' + : 'dropdown__link--active' + : '', + }; + }); + + const items = [...dropdownItemsBefore, ...localeItems, ...dropdownItemsAfter]; + + // Mobile is handled a bit differently + const dropdownLabel = mobile + ? translate({ + message: 'Languages', + id: 'theme.navbar.mobileLanguageDropdown.label', + description: 'The label for the mobile language switcher dropdown', + }) + : localeConfigs[currentLocale].label; + + return ( + + {/* */} + {dropdownLabel === 'English' ? 'EN' : 'PT'} + + } + items={items} + /> + ); +} diff --git a/src/theme/NavbarItem/LocaleDropdownNavbarItem/styles.module.css b/src/theme/NavbarItem/LocaleDropdownNavbarItem/styles.module.css new file mode 100644 index 00000000..8804a08e --- /dev/null +++ b/src/theme/NavbarItem/LocaleDropdownNavbarItem/styles.module.css @@ -0,0 +1,4 @@ +.iconLanguage { + vertical-align: text-bottom; + margin-right: 5px; +} From b3547a5cfc4002c9b688daf55956593a137233fe Mon Sep 17 00:00:00 2001 From: utkarsha-deriv Date: Tue, 23 May 2023 17:01:17 +0400 Subject: [PATCH 03/16] fix: gap with hover not possible --- docusaurus.config.js | 6 +---- src/styles/index.scss | 24 +++++++++++++++---- src/theme/NavbarItem/ComponentTypes.tsx | 2 -- .../LocaleDropdownNavbarItem/index.tsx | 18 ++++++++------ 4 files changed, 31 insertions(+), 19 deletions(-) diff --git a/docusaurus.config.js b/docusaurus.config.js index 9f7fee7f..8fdfa327 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -24,7 +24,7 @@ const config = { // to replace "en" with "zh-Hans". i18n: { defaultLocale: 'en', - locales: ['en', 'pr'], + locales: ['en', 'pr', 'fr', 'ar'], localeConfigs: { en: { label: 'English', @@ -90,10 +90,6 @@ const config = { type: 'custom-user-navbar-item', position: 'right', }, - // { - // type: 'custom-language-switcher-navbar-item', - // position: 'right', - // }, { type: 'localeDropdown', position: 'right', diff --git a/src/styles/index.scss b/src/styles/index.scss index 2243fc3c..6530c24c 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -267,16 +267,30 @@ main[class*='docMainContainer'] .container { } } -.dropdown--right .dropdown__menu { +.dropdown__menu { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; - top: 51px; -} - -.dropdown__menu { padding: 24px 24px; background-color: var(--colors-greyLight100); border-radius: 8px; box-shadow: 0 0 20px #0000000d, 0 16px 20px #0000000d; + visibility: visible; +} + +.dropdown > .navbar__link:after { + display: none; +} + +.dropdown:hover, +.dropdown:focus { + .dropdown__menu { + display: block; + margin-top: 50px; + } +} +.dropdown__link:hover, +.dropdown__link--active { + background-color: var(--colors-greyLight100); + color: var(--ifm-dropdown-link-color); } diff --git a/src/theme/NavbarItem/ComponentTypes.tsx b/src/theme/NavbarItem/ComponentTypes.tsx index a011fa1a..393dad7b 100644 --- a/src/theme/NavbarItem/ComponentTypes.tsx +++ b/src/theme/NavbarItem/ComponentTypes.tsx @@ -9,7 +9,6 @@ import ComponentTypes from '@theme-original/NavbarItem/ComponentTypes'; import UserNavbarItem from '@site/src/components/UserNavbarItem'; import ApiTokenNavbarItem from '@site/src/components/ApiTokenNavbarItem'; import NavbarSeparator from '@site/src/components/NavbarSeparator'; -import LanguageSwitcher from '@site/src/components/LanguageSwitcher'; // We have to provide custom in the name of the component export default { @@ -17,5 +16,4 @@ export default { 'custom-user-navbar-item': UserNavbarItem, 'custom-api-token-navbar-item': ApiTokenNavbarItem, 'custom-navbar-separator': NavbarSeparator, - 'custom-language-switcher-navbar-item': LanguageSwitcher, }; diff --git a/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx b/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx index 322e0ad9..bfb26a27 100644 --- a/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx +++ b/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useRef, useState } from 'react'; import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; import { useAlternatePageUtils } from '@docusaurus/theme-common/internal'; import { translate } from '@docusaurus/Translate'; @@ -6,6 +6,7 @@ import { useLocation } from '@docusaurus/router'; import DropdownNavbarItem from '@theme/NavbarItem/DropdownNavbarItem'; import type { LinkLikeNavbarItemProps } from '@theme/NavbarItem'; import type { Props } from '@theme/NavbarItem/LocaleDropdownNavbarItem'; +// import useClickOutsideDropdown from '@site/src/hooks/useClickOutsideDropdown'; import styles from './styles.module.css'; @@ -58,17 +59,20 @@ export default function LocaleDropdownNavbarItem({ }) : localeConfigs[currentLocale].label; + // const [is_toggle_dropdown, setToggleDropdown] = useState(false); + // const dropdown_toggle = is_toggle_dropdown ? styles.active : styles.inactive; + + // const dropdownRef = useRef(null); + // useClickOutsideDropdown(dropdownRef, setToggleDropdown, false); + return ( - {/* */} - {dropdownLabel === 'English' ? 'EN' : 'PT'} - - } + label={<>{dropdownLabel === 'English' ? 'EN' : 'PT'}} items={items} + // className={`${styles.displayMenu} ${dropdown_toggle}`} + // onClick={() => setToggleDropdown((prev) => !prev)} /> ); } From 58442daeaec8e08cee7566c0f9b45212d377f5ac Mon Sep 17 00:00:00 2001 From: utkarsha-deriv Date: Tue, 23 May 2023 17:50:49 +0400 Subject: [PATCH 04/16] feat: fixed it with hover --- docusaurus.config.js | 2 +- src/styles/index.scss | 14 +++++++------- .../LocaleDropdownNavbarItem/styles.module.css | 4 ++++ 3 files changed, 12 insertions(+), 8 deletions(-) diff --git a/docusaurus.config.js b/docusaurus.config.js index 8fdfa327..de82ccbe 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -24,7 +24,7 @@ const config = { // to replace "en" with "zh-Hans". i18n: { defaultLocale: 'en', - locales: ['en', 'pr', 'fr', 'ar'], + locales: ['en', 'pr'], localeConfigs: { en: { label: 'English', diff --git a/src/styles/index.scss b/src/styles/index.scss index 6530c24c..4803b49c 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -277,18 +277,18 @@ main[class*='docMainContainer'] .container { box-shadow: 0 0 20px #0000000d, 0 16px 20px #0000000d; visibility: visible; } +.dropdown { + height: 100%; + padding-top: 25px; +} +.navbar__items--right { + align-items: baseline; +} .dropdown > .navbar__link:after { display: none; } -.dropdown:hover, -.dropdown:focus { - .dropdown__menu { - display: block; - margin-top: 50px; - } -} .dropdown__link:hover, .dropdown__link--active { background-color: var(--colors-greyLight100); diff --git a/src/theme/NavbarItem/LocaleDropdownNavbarItem/styles.module.css b/src/theme/NavbarItem/LocaleDropdownNavbarItem/styles.module.css index 8804a08e..3400dbf0 100644 --- a/src/theme/NavbarItem/LocaleDropdownNavbarItem/styles.module.css +++ b/src/theme/NavbarItem/LocaleDropdownNavbarItem/styles.module.css @@ -2,3 +2,7 @@ vertical-align: text-bottom; margin-right: 5px; } + +.displayMenu { + /* padding-top: 27px; */ +} From a43d75c9c46136c198afd958e7e00378bcbf8229 Mon Sep 17 00:00:00 2001 From: utkarsha-deriv Date: Tue, 23 May 2023 17:58:35 +0400 Subject: [PATCH 05/16] refactor: code refactor --- src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx | 9 --------- .../LocaleDropdownNavbarItem/styles.module.css | 4 ---- 2 files changed, 13 deletions(-) diff --git a/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx b/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx index bfb26a27..82f7cd7f 100644 --- a/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx +++ b/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx @@ -6,7 +6,6 @@ import { useLocation } from '@docusaurus/router'; import DropdownNavbarItem from '@theme/NavbarItem/DropdownNavbarItem'; import type { LinkLikeNavbarItemProps } from '@theme/NavbarItem'; import type { Props } from '@theme/NavbarItem/LocaleDropdownNavbarItem'; -// import useClickOutsideDropdown from '@site/src/hooks/useClickOutsideDropdown'; import styles from './styles.module.css'; @@ -59,20 +58,12 @@ export default function LocaleDropdownNavbarItem({ }) : localeConfigs[currentLocale].label; - // const [is_toggle_dropdown, setToggleDropdown] = useState(false); - // const dropdown_toggle = is_toggle_dropdown ? styles.active : styles.inactive; - - // const dropdownRef = useRef(null); - // useClickOutsideDropdown(dropdownRef, setToggleDropdown, false); - return ( {dropdownLabel === 'English' ? 'EN' : 'PT'}} items={items} - // className={`${styles.displayMenu} ${dropdown_toggle}`} - // onClick={() => setToggleDropdown((prev) => !prev)} /> ); } diff --git a/src/theme/NavbarItem/LocaleDropdownNavbarItem/styles.module.css b/src/theme/NavbarItem/LocaleDropdownNavbarItem/styles.module.css index 3400dbf0..8804a08e 100644 --- a/src/theme/NavbarItem/LocaleDropdownNavbarItem/styles.module.css +++ b/src/theme/NavbarItem/LocaleDropdownNavbarItem/styles.module.css @@ -2,7 +2,3 @@ vertical-align: text-bottom; margin-right: 5px; } - -.displayMenu { - /* padding-top: 27px; */ -} From 52c6612fbe26b509ac6f96308fd15ff5adc7a199 Mon Sep 17 00:00:00 2001 From: utkarsha-deriv Date: Wed, 24 May 2023 13:03:03 +0400 Subject: [PATCH 06/16] style: modify --- src/styles/index.scss | 37 +++++++++++++++++++++++++------------ 1 file changed, 25 insertions(+), 12 deletions(-) diff --git a/src/styles/index.scss b/src/styles/index.scss index 4803b49c..332f63d2 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -267,30 +267,43 @@ main[class*='docMainContainer'] .container { } } +.dropdown > .navbar__link:after { + display: none; +} + .dropdown__menu { display: grid; grid-template-columns: repeat(3, 1fr); - gap: 16px; - padding: 24px 24px; + gap: rem(1.6); + padding: rem(2.4) rem(2.4); background-color: var(--colors-greyLight100); - border-radius: 8px; - box-shadow: 0 0 20px #0000000d, 0 16px 20px #0000000d; + border-radius: rem(0.8); + box-shadow: 0 0 rem(2) #0000000d, 0 rem(1.6) rem(1.6) #0000000d; visibility: visible; } + +.navbar__items--right .dropdown__link { + font-weight: normal; + font-size: 16px; + line-height: 24px; +} + .dropdown { height: 100%; - padding-top: 25px; + padding-top: rem(2.5); } -.navbar__items--right { - align-items: baseline; -} -.dropdown > .navbar__link:after { - display: none; +.dropdown:hover { + .navbar__link { + color: var(--colors-coral500); + } } -.dropdown__link:hover, .dropdown__link--active { + color: var(--colors-coral500); background-color: var(--colors-greyLight100); - color: var(--ifm-dropdown-link-color); +} + +.dropdown__link--active:hover { + color: var(--colors-coral500); } From 520f36d7b23deb29892ff9829053180c99774186 Mon Sep 17 00:00:00 2001 From: utkarsha-deriv Date: Wed, 24 May 2023 16:27:48 +0400 Subject: [PATCH 07/16] feat: mobile version --- src/styles/index.scss | 15 +++++++--- .../LocaleDropdownNavbarItem/index.tsx | 28 +++++++++---------- .../styles.module.css | 4 --- 3 files changed, 24 insertions(+), 23 deletions(-) delete mode 100644 src/theme/NavbarItem/LocaleDropdownNavbarItem/styles.module.css diff --git a/src/styles/index.scss b/src/styles/index.scss index 332f63d2..022d3b35 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -275,22 +275,25 @@ main[class*='docMainContainer'] .container { display: grid; grid-template-columns: repeat(3, 1fr); gap: rem(1.6); - padding: rem(2.4) rem(2.4); + padding: rem(1.6) rem(1.6); background-color: var(--colors-greyLight100); border-radius: rem(0.8); - box-shadow: 0 0 rem(2) #0000000d, 0 rem(1.6) rem(1.6) #0000000d; + box-shadow: 0 0 rem(2) rgba(0, 0, 0, 0.05), 0 rem(1.6) rem(1.6) rgba(0, 0, 0, 0.05); visibility: visible; } .navbar__items--right .dropdown__link { font-weight: normal; - font-size: 16px; - line-height: 24px; + font-size: rem(1.6); + line-height: rem(2.4); } .dropdown { height: 100%; padding-top: rem(2.5); + @media screen { + display: grid; + } } .dropdown:hover { @@ -307,3 +310,7 @@ main[class*='docMainContainer'] .container { .dropdown__link--active:hover { color: var(--colors-coral500); } + +.menu__list-item:last-child { + display: none; +} diff --git a/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx b/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx index 82f7cd7f..85abf43f 100644 --- a/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx +++ b/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx @@ -1,4 +1,4 @@ -import React, { useRef, useState } from 'react'; +import React from 'react'; import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; import { useAlternatePageUtils } from '@docusaurus/theme-common/internal'; import { translate } from '@docusaurus/Translate'; @@ -7,10 +7,8 @@ import DropdownNavbarItem from '@theme/NavbarItem/DropdownNavbarItem'; import type { LinkLikeNavbarItemProps } from '@theme/NavbarItem'; import type { Props } from '@theme/NavbarItem/LocaleDropdownNavbarItem'; -import styles from './styles.module.css'; - export default function LocaleDropdownNavbarItem({ - mobile, + // mobile, dropdownItemsBefore, dropdownItemsAfter, ...props @@ -40,9 +38,9 @@ export default function LocaleDropdownNavbarItem({ ? // Similar idea as DefaultNavbarItem: select the right Infima active // class name. This cannot be substituted with isActive, because the // target URLs contain `pathname://` and therefore are not NavLinks! - mobile - ? 'menu__link--active' - : 'dropdown__link--active' + // mobile + // ? 'menu__link--active' : + 'dropdown__link--active' : '', }; }); @@ -50,18 +48,18 @@ export default function LocaleDropdownNavbarItem({ const items = [...dropdownItemsBefore, ...localeItems, ...dropdownItemsAfter]; // Mobile is handled a bit differently - const dropdownLabel = mobile - ? translate({ - message: 'Languages', - id: 'theme.navbar.mobileLanguageDropdown.label', - description: 'The label for the mobile language switcher dropdown', - }) - : localeConfigs[currentLocale].label; + const dropdownLabel = + // mobile ? translate({ + // message: 'Languages', + // id: 'theme.navbar.mobileLanguageDropdown.label', + // description: 'The label for the mobile language switcher dropdown', + // }) : + localeConfigs[currentLocale].label; return ( {dropdownLabel === 'English' ? 'EN' : 'PT'}} items={items} /> diff --git a/src/theme/NavbarItem/LocaleDropdownNavbarItem/styles.module.css b/src/theme/NavbarItem/LocaleDropdownNavbarItem/styles.module.css deleted file mode 100644 index 8804a08e..00000000 --- a/src/theme/NavbarItem/LocaleDropdownNavbarItem/styles.module.css +++ /dev/null @@ -1,4 +0,0 @@ -.iconLanguage { - vertical-align: text-bottom; - margin-right: 5px; -} From 5cd40ca58d832a8b957b9f3ef4392b51af24b8b2 Mon Sep 17 00:00:00 2001 From: utkarsha-deriv Date: Wed, 24 May 2023 16:59:16 +0400 Subject: [PATCH 08/16] test: pr fix --- src/features/Home/GetStarted/__tests__/GetStarted.test.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/features/Home/GetStarted/__tests__/GetStarted.test.tsx b/src/features/Home/GetStarted/__tests__/GetStarted.test.tsx index 7a791b19..a5a12670 100644 --- a/src/features/Home/GetStarted/__tests__/GetStarted.test.tsx +++ b/src/features/Home/GetStarted/__tests__/GetStarted.test.tsx @@ -22,10 +22,10 @@ describe('GetStarted', () => { 'href', 'https://deriv.com/signup/', ); - expect(screen.getByTestId('register').closest('a')).toHaveAttribute('href', '/dashboard'); + expect(screen.getByTestId('register').closest('a')).toHaveAttribute('href', '/pr/dashboard'); expect(screen.getByTestId('guide').closest('a')).toHaveAttribute( 'href', - '/docs/category/guides', + '/pr/docs/category/guides', ); }); }); From 35ec304fa1e7a25678a0cd3a70071449fbe3edbb Mon Sep 17 00:00:00 2001 From: utkarsha-deriv Date: Tue, 30 May 2023 10:48:30 +0400 Subject: [PATCH 09/16] style: mobile dropdown --- src/styles/index.scss | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/styles/index.scss b/src/styles/index.scss index 022d3b35..64b6f6a5 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -286,6 +286,9 @@ main[class*='docMainContainer'] .container { font-weight: normal; font-size: rem(1.6); line-height: rem(2.4); + @media (max-width: 1201px) { + font-size: rem(1.4); + } } .dropdown { From 32bb5fdfd65ec32713965203cc8411328486496c Mon Sep 17 00:00:00 2001 From: utkarsha-deriv Date: Mon, 5 Jun 2023 13:42:40 +0400 Subject: [PATCH 10/16] test: modified testcase for diff language case --- .../GetStarted/__tests__/GetStarted.test.tsx | 24 +++++++++++++------ 1 file changed, 17 insertions(+), 7 deletions(-) diff --git a/src/features/Home/GetStarted/__tests__/GetStarted.test.tsx b/src/features/Home/GetStarted/__tests__/GetStarted.test.tsx index a5a12670..4a836ba7 100644 --- a/src/features/Home/GetStarted/__tests__/GetStarted.test.tsx +++ b/src/features/Home/GetStarted/__tests__/GetStarted.test.tsx @@ -1,6 +1,8 @@ import React from 'react'; import { cleanup, render, screen } from '@site/src/test-utils'; import { GetStarted } from '../GetStarted'; +import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; +import { act, renderHook } from '@testing-library/react-hooks'; describe('GetStarted', () => { beforeEach(() => { @@ -13,19 +15,27 @@ describe('GetStarted', () => { const get_started = screen.getByTestId('started-header'); expect(get_started).toBeInTheDocument(); }); - it('should render title properly', () => { - const started_header = screen.getByRole('heading', { level: 2, name: /Get started with/ }); - expect(started_header).toHaveTextContent('Get started with our API in 3 simple steps:'); - }); - it('should navigate to the correct links on click', () => { + + it('should navigate to the correct links on click when language is portuguese', () => { + const { result } = renderHook(() => useDocusaurusContext()); + + let local: string; + act(() => { + local = result.current.i18n.currentLocale; + }); + const lang = local === 'en' ? '' : `/${local}`; + expect(screen.getByTestId('signUp').closest('a')).toHaveAttribute( 'href', 'https://deriv.com/signup/', ); - expect(screen.getByTestId('register').closest('a')).toHaveAttribute('href', '/pr/dashboard'); + expect(screen.getByTestId('register').closest('a')).toHaveAttribute( + 'href', + `${lang}/dashboard`, + ); expect(screen.getByTestId('guide').closest('a')).toHaveAttribute( 'href', - '/pr/docs/category/guides', + `${lang}/docs/category/guides`, ); }); }); From 5a6cdfcc6f9f046c911cb0c0d5540655227213bf Mon Sep 17 00:00:00 2001 From: utkarsha-deriv Date: Tue, 6 Jun 2023 17:23:52 +0400 Subject: [PATCH 11/16] style: modified design --- src/styles/index.scss | 11 +++++++++-- .../LocaleDropdownNavbarItem/index.tsx | 19 ++----------------- 2 files changed, 11 insertions(+), 19 deletions(-) diff --git a/src/styles/index.scss b/src/styles/index.scss index 64b6f6a5..9059783c 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -273,8 +273,7 @@ main[class*='docMainContainer'] .container { .dropdown__menu { display: grid; - grid-template-columns: repeat(3, 1fr); - gap: rem(1.6); + gap: rem(0.8); padding: rem(1.6) rem(1.6); background-color: var(--colors-greyLight100); border-radius: rem(0.8); @@ -291,6 +290,12 @@ main[class*='docMainContainer'] .container { } } +.navbar__items--right a { + @media (max-width: 1201px) { + font-size: rem(1.4); + } +} + .dropdown { height: 100%; padding-top: rem(2.5); @@ -314,6 +319,8 @@ main[class*='docMainContainer'] .container { color: var(--colors-coral500); } +// removes language switcher from sidebar +// docusaurus puts all navbaritems into sidebar in responsive design by default .menu__list-item:last-child { display: none; } diff --git a/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx b/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx index 85abf43f..01835750 100644 --- a/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx +++ b/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx @@ -1,7 +1,6 @@ import React from 'react'; import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; import { useAlternatePageUtils } from '@docusaurus/theme-common/internal'; -import { translate } from '@docusaurus/Translate'; import { useLocation } from '@docusaurus/router'; import DropdownNavbarItem from '@theme/NavbarItem/DropdownNavbarItem'; import type { LinkLikeNavbarItemProps } from '@theme/NavbarItem'; @@ -34,27 +33,13 @@ export default function LocaleDropdownNavbarItem({ autoAddBaseUrl: false, className: // eslint-disable-next-line no-nested-ternary - locale === currentLocale - ? // Similar idea as DefaultNavbarItem: select the right Infima active - // class name. This cannot be substituted with isActive, because the - // target URLs contain `pathname://` and therefore are not NavLinks! - // mobile - // ? 'menu__link--active' : - 'dropdown__link--active' - : '', + locale === currentLocale ? 'dropdown__link--active' : '', }; }); const items = [...dropdownItemsBefore, ...localeItems, ...dropdownItemsAfter]; - // Mobile is handled a bit differently - const dropdownLabel = - // mobile ? translate({ - // message: 'Languages', - // id: 'theme.navbar.mobileLanguageDropdown.label', - // description: 'The label for the mobile language switcher dropdown', - // }) : - localeConfigs[currentLocale].label; + const dropdownLabel = localeConfigs[currentLocale].label; return ( Date: Wed, 7 Jun 2023 10:32:59 +0400 Subject: [PATCH 12/16] fix: fix testcase --- src/components/LanguageSwitcher/index.tsx | 21 ------------------- .../language_switcher.module.scss | 1 - 2 files changed, 22 deletions(-) delete mode 100644 src/components/LanguageSwitcher/index.tsx delete mode 100644 src/components/LanguageSwitcher/language_switcher.module.scss diff --git a/src/components/LanguageSwitcher/index.tsx b/src/components/LanguageSwitcher/index.tsx deleted file mode 100644 index 88303746..00000000 --- a/src/components/LanguageSwitcher/index.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import React, { useRef, useState } from 'react'; -import styles from './language_switcher.module.scss'; -import useClickOutsideDropdown from '@site/src/hooks/useClickOutsideDropdown'; - -const LanguageSwitcher = () => { - const [is_toggle_dropdown, setToggleDropdown] = useState(false); - const dropdown_toggle = is_toggle_dropdown ? styles.active : styles.inactive; - - const dropdownRef = useRef(null); - useClickOutsideDropdown(dropdownRef, setToggleDropdown, false); - - return ( -
- -
- ); -}; - -export default LanguageSwitcher; diff --git a/src/components/LanguageSwitcher/language_switcher.module.scss b/src/components/LanguageSwitcher/language_switcher.module.scss deleted file mode 100644 index f3e5ce27..00000000 --- a/src/components/LanguageSwitcher/language_switcher.module.scss +++ /dev/null @@ -1 +0,0 @@ -@use 'src/styles/utility' as *; From a1ddedca75c77e9d791db0458dbe1a098813d476 Mon Sep 17 00:00:00 2001 From: utkarsha-deriv Date: Wed, 21 Jun 2023 13:04:39 +0400 Subject: [PATCH 13/16] refactor: use classnames --- docusaurus.config.js | 6 +++--- src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx | 9 +++------ 2 files changed, 6 insertions(+), 9 deletions(-) diff --git a/docusaurus.config.js b/docusaurus.config.js index 64ccad75..f74b7b47 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -24,13 +24,13 @@ const config = { // to replace "en" with "zh-Hans". i18n: { defaultLocale: 'en', - locales: ['en', 'pr'], + locales: ['en', 'es'], localeConfigs: { en: { label: 'English', }, - pr: { - label: 'Portuguese', + es: { + label: 'Español', }, }, }, diff --git a/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx b/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx index 01835750..9a84d1a7 100644 --- a/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx +++ b/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx @@ -5,9 +5,9 @@ import { useLocation } from '@docusaurus/router'; import DropdownNavbarItem from '@theme/NavbarItem/DropdownNavbarItem'; import type { LinkLikeNavbarItemProps } from '@theme/NavbarItem'; import type { Props } from '@theme/NavbarItem/LocaleDropdownNavbarItem'; +import classnames from 'classnames'; export default function LocaleDropdownNavbarItem({ - // mobile, dropdownItemsBefore, dropdownItemsAfter, ...props @@ -31,9 +31,7 @@ export default function LocaleDropdownNavbarItem({ to, target: '_self', autoAddBaseUrl: false, - className: - // eslint-disable-next-line no-nested-ternary - locale === currentLocale ? 'dropdown__link--active' : '', + className: classnames({ 'dropdown__link--active': locale === currentLocale }), }; }); @@ -44,8 +42,7 @@ export default function LocaleDropdownNavbarItem({ return ( {dropdownLabel === 'English' ? 'EN' : 'PT'}} + label={<>{dropdownLabel === 'English' ? 'EN' : 'ES'}} items={items} /> ); From eb7545cbcd6318a12fe68f389cd34cbfbf3550bb Mon Sep 17 00:00:00 2001 From: utkarsha-deriv Date: Mon, 9 Oct 2023 18:52:01 +0400 Subject: [PATCH 14/16] chore: added new languages --- docusaurus.config.js | 2 +- src/styles/index.scss | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/docusaurus.config.js b/docusaurus.config.js index f74b7b47..be9eb49b 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -24,7 +24,7 @@ const config = { // to replace "en" with "zh-Hans". i18n: { defaultLocale: 'en', - locales: ['en', 'es'], + locales: ['en', 'es', 'zh-Hans', 'zh-Hant', 'fr', 'de', 'vi', 'th'], localeConfigs: { en: { label: 'English', diff --git a/src/styles/index.scss b/src/styles/index.scss index 9059783c..c2cd1542 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -273,7 +273,8 @@ main[class*='docMainContainer'] .container { .dropdown__menu { display: grid; - gap: rem(0.8); + grid-template-columns: repeat(3, 1fr); + gap: rem(1.6); padding: rem(1.6) rem(1.6); background-color: var(--colors-greyLight100); border-radius: rem(0.8); From 3c08280b9f195566336ea4ebbd4d983d2444a75e Mon Sep 17 00:00:00 2001 From: utkarsha-deriv Date: Tue, 31 Oct 2023 17:05:35 +0400 Subject: [PATCH 15/16] fix: config for label for langauge switcher --- docusaurus.config.js | 12 +++++++ .../LocaleDropdownNavbarItem/index.tsx | 34 ++++++++++++++----- 2 files changed, 37 insertions(+), 9 deletions(-) diff --git a/docusaurus.config.js b/docusaurus.config.js index be9eb49b..f6a08eef 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -32,6 +32,18 @@ const config = { es: { label: 'Español', }, + fr: { + label: 'Français', + }, + de: { + label: 'Deutsch', + }, + vi: { + label: 'Tiếng Việt', + }, + th: { + label: 'Thai', + }, }, }, diff --git a/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx b/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx index 9a84d1a7..5e99de48 100644 --- a/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx +++ b/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx @@ -35,15 +35,31 @@ export default function LocaleDropdownNavbarItem({ }; }); - const items = [...dropdownItemsBefore, ...localeItems, ...dropdownItemsAfter]; + const getShortNames = (locale) => { + switch (locale) { + case 'en': + return 'EN'; + case 'es': + return 'ES'; + case 'zh-Hans': + return '简体'; + case 'zh-Hant': + return '繁體'; + case 'fr': + return 'FR'; + case 'de': + return 'DE'; + case 'vi': + return 'VI'; + case 'th': + return 'TH'; + default: + return ''; + } + }; - const dropdownLabel = localeConfigs[currentLocale].label; + const items = [...dropdownItemsBefore, ...localeItems, ...dropdownItemsAfter]; + const dropdownLabel = getShortNames(currentLocale); - return ( - {dropdownLabel === 'English' ? 'EN' : 'ES'}} - items={items} - /> - ); + return {dropdownLabel}} items={items} />; } From 39acb4440080c99cf833095af9a168446806ee54 Mon Sep 17 00:00:00 2001 From: utkarsha-deriv Date: Mon, 27 Nov 2023 11:02:51 +0400 Subject: [PATCH 16/16] fix: localeConfig fix --- docusaurus.config.js | 15 --------------- .../NavbarItem/LocaleDropdownNavbarItem/index.tsx | 2 +- 2 files changed, 1 insertion(+), 16 deletions(-) diff --git a/docusaurus.config.js b/docusaurus.config.js index f6a08eef..cb8935bd 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -26,21 +26,6 @@ const config = { defaultLocale: 'en', locales: ['en', 'es', 'zh-Hans', 'zh-Hant', 'fr', 'de', 'vi', 'th'], localeConfigs: { - en: { - label: 'English', - }, - es: { - label: 'Español', - }, - fr: { - label: 'Français', - }, - de: { - label: 'Deutsch', - }, - vi: { - label: 'Tiếng Việt', - }, th: { label: 'Thai', }, diff --git a/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx b/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx index 5e99de48..4e83e4c9 100644 --- a/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx +++ b/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx @@ -54,7 +54,7 @@ export default function LocaleDropdownNavbarItem({ case 'th': return 'TH'; default: - return ''; + return 'EN'; } };