From fc8cca0e61bc762cdc26011bfec8a4990f888301 Mon Sep 17 00:00:00 2001
From: Dimitri POSTOLOV <en3m@ya.ru>
Date: Thu, 20 Oct 2022 01:22:20 +0200
Subject: [PATCH] add `<InformationCircleIcon />` icon, improve `<Callout />`
 default emojis (#887)

* add `<InformationCircleIcon />` icon, improve `<Callout />` default emojis

* update snapshots

* fix
---
 .changeset/dry-wombats-film.md                |  6 +++++
 .../swr-site/pages/docs/callout.en-US.mdx     | 23 +++++++++++++++++++
 .../src/components/callout.tsx                | 20 +++++++++++-----
 .../__snapshots__/context.test.ts.snap        | 18 +++++++++++++++
 .../__snapshots__/page-map.test.ts.snap       | 13 +++++++++++
 packages/nextra/src/icons/index.ts            |  1 +
 .../nextra/src/icons/information-circle.tsx   | 22 ++++++++++++++++++
 7 files changed, 97 insertions(+), 6 deletions(-)
 create mode 100644 .changeset/dry-wombats-film.md
 create mode 100644 examples/swr-site/pages/docs/callout.en-US.mdx
 create mode 100644 packages/nextra/src/icons/information-circle.tsx

diff --git a/.changeset/dry-wombats-film.md b/.changeset/dry-wombats-film.md
new file mode 100644
index 0000000000..12ccb031bf
--- /dev/null
+++ 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
new file mode 100644
index 0000000000..269a20500f
--- /dev/null
+++ 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
index 5ad23dfda7..2b71952875 100644
--- 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
index 9c7c9dbc85..c9067090df 100644
--- 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
index 7122299d60..5c068ed8c7 100644
--- 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
index 085af04294..6cf0741f4a 100644
--- 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
new file mode 100644
index 0000000000..c458fc51dc
--- /dev/null
+++ 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>
+  )
+}