From 402a5e1f883272f1d5e9da1db4d432e30a879b26 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9bastien=20Lorber?= Date: Wed, 1 Sep 2021 19:48:13 +0200 Subject: [PATCH] feat: infima 33 + navbar-sidebar close button (#5460) * infima 33 + navbar-sidebar close button * duplicate close icons + theme switch margin --- .../docusaurus-theme-classic/package.json | 2 +- .../src/theme/AnnouncementBar/index.tsx | 5 ++-- .../src/theme/IconCloseThick/index.tsx | 28 +++++++++++++++++++ .../src/theme/IconCloseThin/index.tsx | 28 +++++++++++++++++++ .../src/theme/Navbar/index.tsx | 14 +++++++++- .../src/theme/Navbar/styles.module.css | 8 ++++++ .../docusaurus-theme-classic/src/types.d.ts | 14 ++++++++++ yarn.lock | 8 +++--- 8 files changed, 98 insertions(+), 9 deletions(-) create mode 100644 packages/docusaurus-theme-classic/src/theme/IconCloseThick/index.tsx create mode 100644 packages/docusaurus-theme-classic/src/theme/IconCloseThin/index.tsx diff --git a/packages/docusaurus-theme-classic/package.json b/packages/docusaurus-theme-classic/package.json index 17b7d1c135..12f6eabc6e 100644 --- a/packages/docusaurus-theme-classic/package.json +++ b/packages/docusaurus-theme-classic/package.json @@ -39,7 +39,7 @@ "copy-text-to-clipboard": "^3.0.1", "fs-extra": "^10.0.0", "globby": "^11.0.2", - "infima": "0.2.0-alpha.32", + "infima": "0.2.0-alpha.33", "lodash": "^4.17.20", "parse-numeric-range": "^1.2.0", "postcss": "^8.2.15", diff --git a/packages/docusaurus-theme-classic/src/theme/AnnouncementBar/index.tsx b/packages/docusaurus-theme-classic/src/theme/AnnouncementBar/index.tsx index a3dbe9dfcd..b6c3e975e2 100644 --- a/packages/docusaurus-theme-classic/src/theme/AnnouncementBar/index.tsx +++ b/packages/docusaurus-theme-classic/src/theme/AnnouncementBar/index.tsx @@ -9,6 +9,7 @@ import React from 'react'; import clsx from 'clsx'; import {useThemeConfig, useAnnouncementBar} from '@docusaurus/theme-common'; import {translate} from '@docusaurus/Translate'; +import IconCloseThick from '@theme/IconCloseThick'; import styles from './styles.module.css'; @@ -48,9 +49,7 @@ function AnnouncementBar(): JSX.Element | null { message: 'Close', description: 'The ARIA label for close button of announcement bar', })}> - - - + ) : null} diff --git a/packages/docusaurus-theme-classic/src/theme/IconCloseThick/index.tsx b/packages/docusaurus-theme-classic/src/theme/IconCloseThick/index.tsx new file mode 100644 index 0000000000..971dfd7e73 --- /dev/null +++ b/packages/docusaurus-theme-classic/src/theme/IconCloseThick/index.tsx @@ -0,0 +1,28 @@ +/** + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +import React from 'react'; +import type {Props} from '@theme/IconCloseThick'; + +export default function IconCloseThick({ + width = 20, + height = 20, + className, + ...restProps +}: Props): JSX.Element { + return ( + + + + ); +} diff --git a/packages/docusaurus-theme-classic/src/theme/IconCloseThin/index.tsx b/packages/docusaurus-theme-classic/src/theme/IconCloseThin/index.tsx new file mode 100644 index 0000000000..60c33ada58 --- /dev/null +++ b/packages/docusaurus-theme-classic/src/theme/IconCloseThin/index.tsx @@ -0,0 +1,28 @@ +/** + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +import React from 'react'; +import type {Props} from '@theme/IconCloseThin'; + +export default function IconCloseThin({ + width = 20, + height = 20, + className, + ...restProps +}: Props): JSX.Element { + return ( + + + + ); +} diff --git a/packages/docusaurus-theme-classic/src/theme/Navbar/index.tsx b/packages/docusaurus-theme-classic/src/theme/Navbar/index.tsx index 20d6406380..23513b8b61 100644 --- a/packages/docusaurus-theme-classic/src/theme/Navbar/index.tsx +++ b/packages/docusaurus-theme-classic/src/theme/Navbar/index.tsx @@ -23,6 +23,7 @@ import {useActivePlugin} from '@theme/hooks/useDocs'; import NavbarItem, {Props as NavbarItemConfig} from '@theme/NavbarItem'; import Logo from '@theme/Logo'; import IconMenu from '@theme/IconMenu'; +import IconCloseThin from '@theme/IconCloseThin'; import styles from './styles.module.css'; @@ -155,12 +156,23 @@ function NavbarMobileSidebar({ imageClassName="navbar__logo" titleClassName="navbar__title" /> - {!colorModeToggle.disabled && sidebarShown && ( + {!colorModeToggle.disabled && ( )} +
; + export default function IconCloseThick(props: Props): JSX.Element; +} + +declare module '@theme/IconCloseThin' { + import type {ComponentProps} from 'react'; + + export type Props = ComponentProps<'svg'>; + export default function IconCloseThin(props: Props): JSX.Element; +} + declare module '@theme/IconLanguage' { import type {ComponentProps} from 'react'; diff --git a/yarn.lock b/yarn.lock index 67f9a959d7..cca839595f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -11140,10 +11140,10 @@ infer-owner@^1.0.3, infer-owner@^1.0.4: resolved "https://registry.yarnpkg.com/infer-owner/-/infer-owner-1.0.4.tgz#c4cefcaa8e51051c2a40ba2ce8a3d27295af9467" integrity sha512-IClj+Xz94+d7irH5qRyfJonOdfTzuDaifE6ZPWfx0N0+/ATZCbuTPq2prFl526urkQd90WyUKIh1DfBQ2hMz9A== -infima@0.2.0-alpha.32: - version "0.2.0-alpha.32" - resolved "https://registry.yarnpkg.com/infima/-/infima-0.2.0-alpha.32.tgz#55ec893ec94bd4a5cd6f4cfa4ed5d0a9b692f772" - integrity sha512-zvPiqT/2TAPtMvMy7+b8IiH7ykL8IBQbR0vAQe6SPnrC610YVMWBqKYv49GuwzTREEB+QEPxfGQfcOJ89+zwoQ== +infima@0.2.0-alpha.33: + version "0.2.0-alpha.33" + resolved "https://registry.yarnpkg.com/infima/-/infima-0.2.0-alpha.33.tgz#8d1a77ea916bedcebffa60dcd2dffbe382e09abf" + integrity sha512-iLZI8/vGTbbhbeFhlWv1zwvrqfNDLAayuEdqZqNqCyGuh0IW469dRIRm0FLZ98YyLikt2njzuKfy6xUrBWRXcg== inflight@^1.0.4: version "1.0.6"