@docusaurus/theme-classic 0.0.0-5093 → 0.0.0-5094

package/lib/theme/Admonition/index.js

@@ -6,6 +6,8 @@
  */
 import React from 'react';
 import clsx from 'clsx';
+import {ThemeClassNames} from '@docusaurus/theme-common';
+import Translate from '@docusaurus/Translate';
 import styles from './styles.module.css';
 function NoteIcon() {
   return (
@@ -57,38 +59,75 @@ function CautionIcon() {
     </svg>
   );
 }
+// eslint-disable-next-line @typescript-eslint/consistent-indexed-object-style
 const AdmonitionConfigs = {
   note: {
     infimaClassName: 'secondary',
     iconComponent: NoteIcon,
+    label: (
+      <Translate
+        id="theme.admonition.note"
+        description="The default label used for the Note admonition (:::note)">
+        note
+      </Translate>
+    ),
   },
   tip: {
     infimaClassName: 'success',
     iconComponent: TipIcon,
+    label: (
+      <Translate
+        id="theme.admonition.tip"
+        description="The default label used for the Tip admonition (:::tip)">
+        tip
+      </Translate>
+    ),
   },
   danger: {
     infimaClassName: 'danger',
     iconComponent: DangerIcon,
+    label: (
+      <Translate
+        id="theme.admonition.danger"
+        description="The default label used for the Danger admonition (:::danger)">
+        danger
+      </Translate>
+    ),
   },
   info: {
     infimaClassName: 'info',
     iconComponent: InfoIcon,
+    label: (
+      <Translate
+        id="theme.admonition.info"
+        description="The default label used for the Info admonition (:::info)">
+        info
+      </Translate>
+    ),
   },
   caution: {
     infimaClassName: 'warning',
     iconComponent: CautionIcon,
+    label: (
+      <Translate
+        id="theme.admonition.caution"
+        description="The default label used for the Caution admonition (:::caution)">
+        caution
+      </Translate>
+    ),
   },
+};
+// Legacy aliases, undocumented but kept for retro-compatibility
+const aliases = {
   secondary: 'note',
   important: 'info',
   success: 'tip',
   warning: 'danger',
 };
-function getAdmonitionConfig(type) {
+function getAdmonitionConfig(unsafeType) {
+  const type = aliases[unsafeType] ?? unsafeType;
   const config = AdmonitionConfigs[type];
   if (config) {
-    if (typeof config === 'string') {
-      return AdmonitionConfigs[config];
-    }
     return config;
   }
   console.warn(
@@ -115,26 +154,28 @@ function processAdmonitionProps(props) {
   const {mdxAdmonitionTitle, rest} = extractMDXAdmonitionTitle(props.children);
   return {
     ...props,
-    title: props.title ?? mdxAdmonitionTitle ?? props.type,
+    title: props.title ?? mdxAdmonitionTitle,
     children: rest,
   };
 }
 export default function Admonition(props) {
-  const {
-    children,
-    type,
-    title = type,
-    icon: iconProp,
-  } = processAdmonitionProps(props);
-  const config = getAdmonitionConfig(type);
-  const {infimaClassName, iconComponent: IconComponent} = config;
+  const {children, type, title, icon: iconProp} = processAdmonitionProps(props);
+  const typeConfig = getAdmonitionConfig(type);
+  const titleLabel = title ?? typeConfig.label;
+  const {iconComponent: IconComponent} = typeConfig;
   const icon = iconProp ?? <IconComponent />;
   return (
     <div
-      className={clsx('alert', `alert--${infimaClassName}`, styles.admonition)}>
+      className={clsx(
+        ThemeClassNames.common.admonition,
+        ThemeClassNames.common.admonitionType(props.type),
+        'alert',
+        `alert--${typeConfig.infimaClassName}`,
+        styles.admonition,
+      )}>
       <div className={styles.admonitionHeading}>
         <span className={styles.admonitionIcon}>{icon}</span>
-        {title}
+        {titleLabel}
       </div>
       <div className={styles.admonitionContent}>{children}</div>
     </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@docusaurus/theme-classic",
-  "version": "0.0.0-5093",
+  "version": "0.0.0-5094",
   "description": "Classic theme for Docusaurus",
   "main": "lib/index.js",
   "types": "src/theme-classic.d.ts",
@@ -20,18 +20,18 @@
     "copy:watch": "node ../../admin/scripts/copyUntypedFiles.js --watch"
   },
   "dependencies": {
-    "@docusaurus/core": "0.0.0-5093",
-    "@docusaurus/mdx-loader": "0.0.0-5093",
-    "@docusaurus/module-type-aliases": "0.0.0-5093",
-    "@docusaurus/plugin-content-blog": "0.0.0-5093",
-    "@docusaurus/plugin-content-docs": "0.0.0-5093",
-    "@docusaurus/plugin-content-pages": "0.0.0-5093",
-    "@docusaurus/theme-common": "0.0.0-5093",
-    "@docusaurus/theme-translations": "0.0.0-5093",
-    "@docusaurus/types": "0.0.0-5093",
-    "@docusaurus/utils": "0.0.0-5093",
-    "@docusaurus/utils-common": "0.0.0-5093",
-    "@docusaurus/utils-validation": "0.0.0-5093",
+    "@docusaurus/core": "0.0.0-5094",
+    "@docusaurus/mdx-loader": "0.0.0-5094",
+    "@docusaurus/module-type-aliases": "0.0.0-5094",
+    "@docusaurus/plugin-content-blog": "0.0.0-5094",
+    "@docusaurus/plugin-content-docs": "0.0.0-5094",
+    "@docusaurus/plugin-content-pages": "0.0.0-5094",
+    "@docusaurus/theme-common": "0.0.0-5094",
+    "@docusaurus/theme-translations": "0.0.0-5094",
+    "@docusaurus/types": "0.0.0-5094",
+    "@docusaurus/utils": "0.0.0-5094",
+    "@docusaurus/utils-common": "0.0.0-5094",
+    "@docusaurus/utils-validation": "0.0.0-5094",
     "@mdx-js/react": "^1.6.22",
     "clsx": "^1.1.1",
     "copy-text-to-clipboard": "^3.0.1",
@@ -64,5 +64,5 @@
   "engines": {
     "node": ">=16.14"
   },
-  "gitHead": "2aa3114f2c53ba37b785f22ac723059c7a4a75be"
+  "gitHead": "5ed0ed8f0a5918441c8b83093fd1975bfe7e0cfd"
 }

package/src/theme/Admonition/index.tsx

@@ -7,6 +7,8 @@
 
 import React, {type ReactNode} from 'react';
 import clsx from 'clsx';
+import {ThemeClassNames} from '@docusaurus/theme-common';
+import Translate from '@docusaurus/Translate';
 import type {Props} from '@theme/Admonition';
 
 import styles from './styles.module.css';
@@ -69,41 +71,82 @@ function CautionIcon() {
 type AdmonitionConfig = {
   iconComponent: React.ComponentType;
   infimaClassName: string;
+  label: ReactNode;
 };
 
-const AdmonitionConfigs: {[key: string]: AdmonitionConfig | string} = {
+// eslint-disable-next-line @typescript-eslint/consistent-indexed-object-style
+const AdmonitionConfigs: Record<Props['type'], AdmonitionConfig> = {
   note: {
     infimaClassName: 'secondary',
     iconComponent: NoteIcon,
+    label: (
+      <Translate
+        id="theme.admonition.note"
+        description="The default label used for the Note admonition (:::note)">
+        note
+      </Translate>
+    ),
   },
   tip: {
     infimaClassName: 'success',
     iconComponent: TipIcon,
+    label: (
+      <Translate
+        id="theme.admonition.tip"
+        description="The default label used for the Tip admonition (:::tip)">
+        tip
+      </Translate>
+    ),
   },
   danger: {
     infimaClassName: 'danger',
     iconComponent: DangerIcon,
+    label: (
+      <Translate
+        id="theme.admonition.danger"
+        description="The default label used for the Danger admonition (:::danger)">
+        danger
+      </Translate>
+    ),
   },
   info: {
     infimaClassName: 'info',
     iconComponent: InfoIcon,
+    label: (
+      <Translate
+        id="theme.admonition.info"
+        description="The default label used for the Info admonition (:::info)">
+        info
+      </Translate>
+    ),
   },
   caution: {
     infimaClassName: 'warning',
     iconComponent: CautionIcon,
+    label: (
+      <Translate
+        id="theme.admonition.caution"
+        description="The default label used for the Caution admonition (:::caution)">
+        caution
+      </Translate>
+    ),
   },
+};
+
+// Legacy aliases, undocumented but kept for retro-compatibility
+const aliases = {
   secondary: 'note',
   important: 'info',
   success: 'tip',
   warning: 'danger',
-};
+} as const;
 
-function getAdmonitionConfig(type: string): AdmonitionConfig {
+function getAdmonitionConfig(
+  unsafeType: Props['type'] | keyof typeof aliases,
+): AdmonitionConfig {
+  const type = aliases[unsafeType as keyof typeof aliases] ?? unsafeType;
   const config = AdmonitionConfigs[type];
   if (config) {
-    if (typeof config === 'string') {
-      return AdmonitionConfigs[config] as AdmonitionConfig;
-    }
     return config;
   }
   console.warn(
@@ -136,28 +179,30 @@ function processAdmonitionProps(props: Props): Props {
   const {mdxAdmonitionTitle, rest} = extractMDXAdmonitionTitle(props.children);
   return {
     ...props,
-    title: props.title ?? mdxAdmonitionTitle ?? props.type,
+    title: props.title ?? mdxAdmonitionTitle,
     children: rest,
   };
 }
 
 export default function Admonition(props: Props): JSX.Element {
-  const {
-    children,
-    type,
-    title = type,
-    icon: iconProp,
-  } = processAdmonitionProps(props);
+  const {children, type, title, icon: iconProp} = processAdmonitionProps(props);
 
-  const config = getAdmonitionConfig(type);
-  const {infimaClassName, iconComponent: IconComponent} = config;
+  const typeConfig = getAdmonitionConfig(type);
+  const titleLabel = title ?? typeConfig.label;
+  const {iconComponent: IconComponent} = typeConfig;
   const icon = iconProp ?? <IconComponent />;
   return (
     <div
-      className={clsx('alert', `alert--${infimaClassName}`, styles.admonition)}>
+      className={clsx(
+        ThemeClassNames.common.admonition,
+        ThemeClassNames.common.admonitionType(props.type),
+        'alert',
+        `alert--${typeConfig.infimaClassName}`,
+        styles.admonition,
+      )}>
       <div className={styles.admonitionHeading}>
         <span className={styles.admonitionIcon}>{icon}</span>
-        {title}
+        {titleLabel}
       </div>
       <div className={styles.admonitionContent}>{children}</div>
     </div>