chore(docs): additional tweeks to material icons and symbols page

mlaursen · Nov 19, 2023 · 3a38b27 · 3a38b27
1 parent 6a49fe1
commit 3a38b27
Show file tree

Hide file tree

Showing 12 changed files with 132 additions and 88 deletions.
diff --git a/apps/docs/src/app/components/material-icons-and-symbols/AdditionalChanges.tsx b/apps/docs/src/app/components/material-icons-and-symbols/AdditionalChanges.tsx
@@ -6,6 +6,7 @@ import styles from "./AdditionalChanges.module.scss";
 import { AdditionalChangesPanels } from "./AdditionalChangesPanels.js";
 import { MaterialConfigChanges } from "./MaterialConfigChanges.js";
 import { useMaterialIconsAndSymbols } from "./MaterialIconsAndSymbolsProvider.js";
+import { isMaterialIconType } from "./searchParams.js";
 
 export interface AdditionalChangesProps {
   isSvg?: boolean;
@@ -17,8 +18,9 @@ export function AdditionalChanges(
   const { isSvg } = props;
 
   const { iconType } = useMaterialIconsAndSymbols();
-  const configDescription =
-    iconType === "icon" ? "icon family" : "symbol customizations";
+  const configDescription = isMaterialIconType(iconType)
+    ? "icon family"
+    : "symbol customizations";
 
   return (
     <>

diff --git a/apps/docs/src/app/components/material-icons-and-symbols/FilterCategoryPanel.tsx b/apps/docs/src/app/components/material-icons-and-symbols/FilterCategoryPanel.tsx
@@ -12,15 +12,17 @@ import {
   MATERIAL_ICON_CATEGORIES,
   MATERIAL_SYMBOL_CATEGORIES,
 } from "./metadata.js";
+import { isMaterialIconType } from "./searchParams.js";
 
 export function FilterCategoryPanel(
   props: ProvidedExpansionPanelProps
 ): ReactElement {
   const { isDesktop } = useAppSize();
   const { iconType, iconCategory, setIconCategory } =
     useMaterialIconsAndSymbols();
-  const iconCategories =
-    iconType === "icon" ? MATERIAL_ICON_CATEGORIES : MATERIAL_SYMBOL_CATEGORIES;
+  const iconCategories = isMaterialIconType(iconType)
+    ? MATERIAL_ICON_CATEGORIES
+    : MATERIAL_SYMBOL_CATEGORIES;
 
   return (
     <FilterPanel

diff --git a/apps/docs/src/app/components/material-icons-and-symbols/FilterStylePanel.tsx b/apps/docs/src/app/components/material-icons-and-symbols/FilterStylePanel.tsx
@@ -12,17 +12,17 @@ import {
   MATERIAL_ICON_FAMILY_TYPES,
   MATERIAL_SYMBOL_FAMILY_TYPES,
 } from "./metadata.js";
+import { isMaterialIconType } from "./searchParams.js";
 
 export function FilterStylePanel(
   props: ProvidedExpansionPanelProps
 ): ReactElement {
   const { iconType, iconFamily, setIconType, setIconFamily } =
     useMaterialIconsAndSymbols();
 
-  const iconFamilies =
-    iconType === "icon"
-      ? MATERIAL_ICON_FAMILY_TYPES
-      : MATERIAL_SYMBOL_FAMILY_TYPES;
+  const iconFamilies = isMaterialIconType(iconType)
+    ? MATERIAL_ICON_FAMILY_TYPES
+    : MATERIAL_SYMBOL_FAMILY_TYPES;
 
   return (
     <FilterPanel {...props} icon={<StyleOutlinedIcon />} name="Style">
@@ -32,7 +32,8 @@ export function FilterStylePanel(
         onChange={(event) => setIconType(event.currentTarget.value)}
       >
         <Option value="symbol">Material Symbols</Option>
-        <Option value="icon">Material Icons</Option>
+        <Option value="icon">Material Icons (SVG)</Option>
+        <Option value="icon-font">Material Icons (Font)</Option>
       </Select>
       <Select
         label="Icon Family"

diff --git a/apps/docs/src/app/components/material-icons-and-symbols/FiltersSheet.tsx b/apps/docs/src/app/components/material-icons-and-symbols/FiltersSheet.tsx
@@ -24,7 +24,7 @@ export function FiltersSheet(props: FiltersSheetProps): ReactElement {
   const { className } = props;
 
   const titleId = useId();
-  const { filtersVisible, toggleFilters, isResettable, dispatch } =
+  const { filtersVisible, toggleFilters, isResettable, resetSymbols } =
     useMaterialIconsAndSymbols();
 
   // I use temporary layout until desktop
@@ -90,9 +90,7 @@ export function FiltersSheet(props: FiltersSheetProps): ReactElement {
       >
         <Button
           disabled={!isResettable}
-          onClick={() => {
-            dispatch({ type: "resetSymbols" });
-          }}
+          onClick={resetSymbols}
           className={styles.button}
         >
           <RefreshOutlinedIcon />

diff --git a/apps/docs/src/app/components/material-icons-and-symbols/HowToUseSheetContent.tsx b/apps/docs/src/app/components/material-icons-and-symbols/HowToUseSheetContent.tsx
@@ -1,4 +1,5 @@
 import {
+  DialogContent,
   Slide,
   SlideContainer,
   Tab,
@@ -12,34 +13,38 @@ import { useMaterialIconsAndSymbols } from "./MaterialIconsAndSymbolsProvider.js
 import { MaterialSymbolStylesheets } from "./MaterialSymbolStylesheets.jsx";
 import { MaterialSymbolUsage } from "./MaterialSymbolUsage.jsx";
 import { SVGIconImportAndUsage } from "./SVGIconImportAndUsage.jsx";
+import { isMaterialIconType } from "./searchParams.js";
 
 export function HowToUseSheetContent(): ReactElement | null {
+  const { selectedIconName, iconType } = useMaterialIconsAndSymbols();
   const { getTabListProps, getTabProps, getTabPanelProps, getTabPanelsProps } =
     useTabs();
-  const { selectedIconName, iconType } = useMaterialIconsAndSymbols();
 
   if (!selectedIconName) {
     return null;
   }
 
-  const isSymbol = iconType === "symbol";
+  if (isMaterialIconType(iconType)) {
+    const isSvg = iconType === "icon";
+    return (
+      <DialogContent>
+        {isSvg ? <SVGIconImportAndUsage /> : <FontIconImportAndUsage />}
+      </DialogContent>
+    );
+  }
 
   return (
     <>
       <TabList {...getTabListProps()}>
-        <Tab {...getTabProps(0)}>{isSymbol ? "Usage" : "SVG Icon Usage"}</Tab>
-        <Tab {...getTabProps(1)}>
-          {isSymbol ? "Stylesheet" : "Font Icon Usage"}
-        </Tab>
+        <Tab {...getTabProps(0)}>Usage</Tab>
+        <Tab {...getTabProps(1)}>Stylesheet</Tab>
       </TabList>
       <SlideContainer {...getTabPanelsProps()} className={dialogContent()}>
         <Slide {...getTabPanelProps(0)} timeout={0}>
-          {isSymbol && <MaterialSymbolUsage />}
-          {!isSymbol && <SVGIconImportAndUsage />}
+          <MaterialSymbolUsage />
         </Slide>
         <Slide {...getTabPanelProps(1)} timeout={0}>
-          {isSymbol && <MaterialSymbolStylesheets />}
-          {!isSymbol && <FontIconImportAndUsage />}
+          <MaterialSymbolStylesheets />
         </Slide>
       </SlideContainer>
     </>

diff --git a/apps/docs/src/app/components/material-icons-and-symbols/IconImportAndUsage.tsx b/apps/docs/src/app/components/material-icons-and-symbols/IconImportAndUsage.tsx
@@ -1,22 +1,16 @@
 import { type ReactElement } from "react";
 import { CopyCode } from "./CopyCode.jsx";
 import { useMaterialIconsAndSymbols } from "./MaterialIconsAndSymbolsProvider.jsx";
-import { getMaterialIconComponentName } from "./utils.js";
 
 export function IconImportAndUsage(): ReactElement | null {
-  const { iconFamily, selectedIconName, iconType } =
-    useMaterialIconsAndSymbols();
+  const { selectedIconName, iconType } = useMaterialIconsAndSymbols();
   if (!selectedIconName) {
     return null;
   }
 
-  const importCode = `import { Material${
-    iconType === "symbol" ? "Symbol" : "Icon"
-  } } from "@react-md/core"`;
-  const usageCode = `<${getMaterialIconComponentName({
-    iconName: selectedIconName,
-    iconFamily,
-  })} name="${selectedIconName}" />`;
+  const component = `Material${iconType === "symbol" ? "Symbol" : "Icon"}`;
+  const importCode = `import { Material${component} } from "@react-md/core"`;
+  const usageCode = `<${component} name="${selectedIconName}" />`;
 
   return (
     <>

diff --git a/apps/docs/src/app/components/material-icons-and-symbols/MaterialIconsAndSymbolsProvider.tsx b/apps/docs/src/app/components/material-icons-and-symbols/MaterialIconsAndSymbolsProvider.tsx
@@ -25,7 +25,11 @@ import {
   MATERIAL_ICON_FAMILY_TYPES,
   MATERIAL_SYMBOL_FAMILY_TYPES,
 } from "./metadata.js";
-import { getIconUrl, getInitialState } from "./searchParams.js";
+import {
+  getIconUrl,
+  getInitialState,
+  isMaterialIconType,
+} from "./searchParams.js";
 import {
   type MaterialIconsAndSymbolsAction,
   type MaterialIconsAndSymbolsContext,
@@ -70,10 +74,9 @@ export function MaterialIconsAndSymbolsProvider({
         case "setIconType": {
           const iconType = action.payload;
           let { iconFamily, iconCategory } = state;
-          const nextFamilyTypes =
-            iconType === "icon"
-              ? MATERIAL_ICON_FAMILY_TYPES
-              : MATERIAL_SYMBOL_FAMILY_TYPES;
+          const nextFamilyTypes = isMaterialIconType(iconType)
+            ? MATERIAL_ICON_FAMILY_TYPES
+            : MATERIAL_SYMBOL_FAMILY_TYPES;
           if (!nextFamilyTypes.includes(iconFamily as "outlined")) {
             iconFamily = "outlined";
           }
@@ -143,6 +146,11 @@ export function MaterialIconsAndSymbolsProvider({
               ? state.selectedIconName
               : null,
           };
+        case "changeSvgToFont":
+          return {
+            ...state,
+            iconType: "icon-font" as const,
+          };
         default:
           throw new Error("Unreachable");
       }
@@ -177,7 +185,6 @@ export function MaterialIconsAndSymbolsProvider({
       iconType,
       iconFamily,
       iconCategory,
-      dispatch,
       fill: indexToMaterialFill(symbolFill),
       weight: indexToMaterialWeight(symbolWeight),
       grade: indexToMaterialGrade(symbolGrade),
@@ -201,6 +208,12 @@ export function MaterialIconsAndSymbolsProvider({
       deselectIcon() {
         dispatch({ type: "deselectIcon" });
       },
+      resetSymbols() {
+        dispatch({ type: "resetSymbols" });
+      },
+      resetFilters() {
+        dispatch({ type: "resetFilters" });
+      },
       setFill(value) {
         const payload = typeof value === "number" ? value : value(symbolFill);
         dispatch({ type: "setFill", payload });
@@ -233,6 +246,9 @@ export function MaterialIconsAndSymbolsProvider({
       setIconCategory(iconCategory) {
         dispatch({ type: "setIconCategory", payload: iconCategory });
       },
+      changeSvgToFont() {
+        dispatch({ type: "changeSvgToFont" });
+      },
     }),
     [
       filtersVisible,

diff --git a/apps/docs/src/app/components/material-icons-and-symbols/NoMatches.tsx b/apps/docs/src/app/components/material-icons-and-symbols/NoMatches.tsx
@@ -4,17 +4,14 @@ import type { ReactElement } from "react";
 import { useMaterialIconsAndSymbols } from "./MaterialIconsAndSymbolsProvider.jsx";
 
 export function NoMatches(): ReactElement {
-  const { dispatch, search } = useMaterialIconsAndSymbols();
+  const { search, resetFilters } = useMaterialIconsAndSymbols();
   return (
     <div>
       <RandomEmoji />
       <Typography type="headline-5">
         {`No icons found for '${search}'`}
       </Typography>
-      <Button
-        themeType="outline"
-        onClick={() => dispatch({ type: "resetFilters" })}
-      >
+      <Button themeType="outline" onClick={() => resetFilters()}>
         Clear your filters and try again
       </Button>
     </div>

diff --git a/apps/docs/src/app/components/material-icons-and-symbols/SVGIconImportAndUsage.tsx b/apps/docs/src/app/components/material-icons-and-symbols/SVGIconImportAndUsage.tsx
@@ -3,17 +3,22 @@ import { PackageManagerCodeBlock } from "@/components/PackageManagerCodeBlock.js
 import { highlightCode } from "@/utils/highlightCode.js";
 import { Typography } from "@react-md/core";
 import { cnb } from "cnbuilder";
+import Link from "next/link.js";
+import { usePathname } from "next/navigation.js";
 import { type ReactElement } from "react";
 import { AdditionalChanges } from "./AdditionalChanges.jsx";
 import { CopyCode } from "./CopyCode.js";
 import { useMaterialIconsAndSymbols } from "./MaterialIconsAndSymbolsProvider.js";
 import styles from "./SVGIconImportAndUsage.module.scss";
 import { TwoToneIconWarning } from "./TwoToneIconWarning.jsx";
+import { getIconUrl } from "./searchParams.js";
 import { getMaterialIconComponentName } from "./utils.js";
 
 export function SVGIconImportAndUsage(): ReactElement | null {
-  const { selectedIconName, iconFamily, isFontFamilyChanged } =
-    useMaterialIconsAndSymbols();
+  const pathname = usePathname();
+  const context = useMaterialIconsAndSymbols();
+  const { selectedIconName, iconFamily, isFontFamilyChanged, changeSvgToFont } =
+    context;
   if (!selectedIconName) {
     return null;
   }
@@ -32,7 +37,7 @@ export function SVGIconImportAndUsage(): ReactElement | null {
         margin="top"
         className={cnb(styles.heading, styles.noMarginTop)}
       >
-        Import and usage
+        SVG Icon import and usage
       </Typography>
       <CopyCode>{importCode}</CopyCode>
       <CopyCode>{usageCode}</CopyCode>
@@ -43,7 +48,18 @@ export function SVGIconImportAndUsage(): ReactElement | null {
       <Blockquote theme="info">
         <Typography>
           If you use a lot of icons in your app, you might be able to reduce
-          your bundle size and dependencies by using the font icons instead.
+          your bundle size and dependencies by using the{" "}
+          <Link
+            onClick={changeSvgToFont}
+            href={getIconUrl({
+              ...context,
+              pathname,
+              iconType: "icon-font",
+            })}
+          >
+            font icons
+          </Link>{" "}
+          instead.
         </Typography>
       </Blockquote>
       <PackageManagerCodeBlock