add <InformationCircleIcon /> icon, improve <Callout /> default e…

…mojis (#887) * add `<InformationCircleIcon />` icon, improve `<Callout />` default emojis * update snapshots * fix
shuding · Oct 19, 2022 · fc8cca0 · fc8cca0
1 parent 9f5af54
commit fc8cca0
Show file tree

Hide file tree

Showing 7 changed files with 97 additions and 6 deletions.
diff --git a/.changeset/dry-wombats-film.md b/.changeset/dry-wombats-film.md
@@ -0,0 +1,6 @@
+---
+'nextra': patch
+'nextra-theme-docs': patch
+---
+
+add `<InformationCircleIcon />` icon, improve `<Callout />` default emojis
diff --git a/examples/swr-site/pages/docs/callout.en-US.mdx b/examples/swr-site/pages/docs/callout.en-US.mdx
@@ -0,0 +1,23 @@
+import { Callout } from 'nextra-theme-docs'
+
+# `<Callout />` Component
+
+<Callout>
+  `<Callout>…`
+</Callout>
+
+<Callout type="info">
+  `<Callout type="info">…`
+</Callout>
+
+<Callout type="warning">
+  `<Callout type="warning">…`
+</Callout>
+
+<Callout type="error">
+  `<Callout type="error">…`
+</Callout>
+
+<Callout type="info" emoji="🇫🇷">
+  `<Callout type="info" emoji="🇫🇷">…`
+</Callout>
diff --git a/packages/nextra-theme-docs/src/components/callout.tsx b/packages/nextra-theme-docs/src/components/callout.tsx
@@ -1,7 +1,17 @@
 import React, { ReactElement, ReactNode } from 'react'
 import cn from 'clsx'
+import { InformationCircleIcon } from 'nextra/icons'
 
-const themes = {
+const TypeToEmoji = {
+  default: '💡',
+  error: '🚫',
+  info: <InformationCircleIcon className="mt-1" />,
+  warning: '⚠️'
+}
+
+type CalloutType = keyof typeof TypeToEmoji
+
+const themes: Record<CalloutType, string> = {
   default:
     'bg-orange-50 border-orange-100 text-orange-800 dark:text-orange-300 dark:bg-orange-400/20 dark:border-orange-400/30',
   error:
@@ -12,17 +22,15 @@ const themes = {
 }
 
 type CalloutProps = {
-  /** Callout Theme default to 'default'  */
-  type?: keyof typeof themes
-  /** default emoji 💡*/
-  emoji: string
+  type?: CalloutType
+  emoji?: string | ReactElement
   children: ReactNode
 }
 
 export function Callout({
   children,
   type = 'default',
-  emoji = '💡'
+  emoji = TypeToEmoji[type]
 }: CalloutProps): ReactElement {
   return (
     <div

diff --git a/packages/nextra/__test__/__snapshots__/context.test.ts.snap b/packages/nextra/__test__/__snapshots__/context.test.ts.snap
@@ -1345,6 +1345,15 @@ exports[`context > getAllPages() > should work 1`] = `
         "name": "raw-layout",
         "route": "/docs/raw-layout",
       },
+      {
+        "kind": "MdxPage",
+        "locale": "en-US",
+        "meta": {
+          "title": "Callout",
+        },
+        "name": "callout",
+        "route": "/docs/callout",
+      },
       {
         "kind": "MdxPage",
         "locale": "en-US",
@@ -3128,6 +3137,15 @@ exports[`context > getCurrentLevelPages() > should work 1`] = `
     "name": "raw-layout",
     "route": "/docs/raw-layout",
   },
+  {
+    "kind": "MdxPage",
+    "locale": "en-US",
+    "meta": {
+      "title": "Callout",
+    },
+    "name": "callout",
+    "route": "/docs/callout",
+  },
   {
     "kind": "MdxPage",
     "locale": "en-US",

diff --git a/packages/nextra/__test__/__snapshots__/page-map.test.ts.snap b/packages/nextra/__test__/__snapshots__/page-map.test.ts.snap
@@ -194,6 +194,7 @@ exports[`Page Process > pageMap en-US 1`] = `
               "title": "Advanced",
             },
             "arguments": "Arguments",
+            "callout": "Callout",
             "change-log": {
               "theme": {
                 "sidebar": false,
@@ -340,6 +341,12 @@ exports[`Page Process > pageMap en-US 1`] = `
           "name": "arguments",
           "route": "/docs/arguments",
         },
+        {
+          "kind": "MdxPage",
+          "locale": "en-US",
+          "name": "callout",
+          "route": "/docs/callout",
+        },
         {
           "kind": "MdxPage",
           "locale": "en-US",
@@ -873,6 +880,12 @@ exports[`Page Process > pageMap zh-CN 1`] = `
           "name": "advanced",
           "route": "/docs/advanced",
         },
+        {
+          "kind": "MdxPage",
+          "locale": "en-US",
+          "name": "callout",
+          "route": "/docs/callout",
+        },
         {
           "kind": "MdxPage",
           "locale": "en-US",

diff --git a/packages/nextra/src/icons/index.ts b/packages/nextra/src/icons/index.ts
@@ -4,6 +4,7 @@ export * from './copy'
 export * from './discord'
 export * from './github'
 export * from './globe'
+export * from './information-circle'
 export * from './menu'
 export * from './moon'
 export * from './spinner'

diff --git a/packages/nextra/src/icons/information-circle.tsx b/packages/nextra/src/icons/information-circle.tsx
@@ -0,0 +1,22 @@
+import React, { ComponentProps, ReactElement } from 'react'
+
+export function InformationCircleIcon(
+  props: ComponentProps<'svg'>
+): ReactElement {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 20 20"
+      fill="currentColor"
+      width="20"
+      height="20"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
+      />
+    </svg>
+  )
+}