Adds Icon page back to .design

package.json

@@ -19,44 +19,44 @@
     "@leafygreen-ui/callout": "^9.0.22",
     "@leafygreen-ui/card": "^10.0.7",
     "@leafygreen-ui/code": "^14.3.3",
-    "@leafygreen-ui/combobox": "^9.0.0",
-    "@leafygreen-ui/confirmation-modal": "^5.0.14",
+    "@leafygreen-ui/combobox": "^9.1.0",
+    "@leafygreen-ui/confirmation-modal": "^5.2.0",
     "@leafygreen-ui/copyable": "^8.0.25",
-    "@leafygreen-ui/date-picker": "^1.1.3",
+    "@leafygreen-ui/date-picker": "^1.2.0",
     "@leafygreen-ui/empty-state": "^1.0.17",
     "@leafygreen-ui/expandable-card": "^3.2.2",
-    "@leafygreen-ui/form-footer": "^3.1.4",
-    "@leafygreen-ui/guide-cue": "^5.0.8",
-    "@leafygreen-ui/icon": "^12.3.0",
+    "@leafygreen-ui/form-footer": "^4.0.0",
+    "@leafygreen-ui/guide-cue": "^5.1.0",
+    "@leafygreen-ui/icon": "^12.5.3",
     "@leafygreen-ui/icon-button": "^15.0.21",
     "@leafygreen-ui/info-sprinkle": "^1.0.5",
     "@leafygreen-ui/leafygreen-provider": "^3.1.12",
     "@leafygreen-ui/loading-indicator": "^2.0.12",
     "@leafygreen-ui/logo": "^9.1.1",
     "@leafygreen-ui/marketing-modal": "^4.2.3",
-    "@leafygreen-ui/modal": "^16.0.7",
-    "@leafygreen-ui/number-input": "^2.0.0",
+    "@leafygreen-ui/modal": "^16.0.8",
+    "@leafygreen-ui/number-input": "^2.2.0",
     "@leafygreen-ui/pagination": "^1.0.24",
     "@leafygreen-ui/password-input": "^2.0.0",
     "@leafygreen-ui/pipeline": "^5.0.20",
     "@leafygreen-ui/radio-box-group": "^13.0.0",
     "@leafygreen-ui/radio-group": "^11.0.1",
-    "@leafygreen-ui/search-input": "^3.0.1",
-    "@leafygreen-ui/segmented-control": "^8.2.12",
-    "@leafygreen-ui/select": "^12.0.0",
+    "@leafygreen-ui/search-input": "^3.1.0",
+    "@leafygreen-ui/segmented-control": "^8.2.13",
+    "@leafygreen-ui/select": "^12.1.0",
     "@leafygreen-ui/side-nav": "^14.1.3",
     "@leafygreen-ui/skeleton-loader": "^1.2.0",
-    "@leafygreen-ui/split-button": "^1.0.13",
+    "@leafygreen-ui/split-button": "^1.1.0",
     "@leafygreen-ui/stepper": "^3.2.13",
     "@leafygreen-ui/table": "^12.6.3",
-    "@leafygreen-ui/tabs": "^11.2.0",
-    "@leafygreen-ui/text-area": "^9.0.0",
-    "@leafygreen-ui/text-input": "^13.0.2",
+    "@leafygreen-ui/tabs": "^12.0.0",
+    "@leafygreen-ui/text-area": "^9.1.0",
+    "@leafygreen-ui/text-input": "^13.1.0",
     "@leafygreen-ui/toast": "^6.1.25",
     "@leafygreen-ui/toggle": "^10.1.1",
-    "@leafygreen-ui/tokens": "^2.7.0",
-    "@leafygreen-ui/tooltip": "^11.0.4",
-    "@leafygreen-ui/typography": "^19.1.1",
+    "@leafygreen-ui/tokens": "^2.8.0",
+    "@leafygreen-ui/tooltip": "^11.1.0",
+    "@leafygreen-ui/typography": "^19.1.2",
     "@lg-tools/storybook-utils": "^0.1.1",
     "@next/third-parties": "^14.2.3",
     "@storybook/react": "^8.0.10",

src/app/[contentPageGroup]/[contentPage]/page.tsx

@@ -12,11 +12,7 @@ export default async function ContentPage({
   const contentPage = await getContentPage(startCase(contentPageName));
 
   return (
-    <div
-      className={css`
-        max-width: 700px; // TODO: Make this responsive
-      `}
-    >
+    <div>
       <ContentstackRichText content={contentPage?.content} />
     </div>
   );

src/app/[contentPageGroup]/[contentPage]/template.tsx

@@ -0,0 +1,16 @@
+'use client';
+
+import { css } from '@emotion/css';
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <div
+      id="layout"
+      className={css`
+        max-width: 700px;
+      `}
+    >
+      {children}
+    </div>
+  );
+}

src/app/component/[component]/code-docs/utils.ts

@@ -31,12 +31,6 @@ export function parseComponentPropsFromTSDocs(
     return reducedPropTables;
   } else {
     const centralProps = tsDocs.find(tsdoc => {
-      console.log({
-        displayName: tsdoc.displayName,
-        kebabCaseDisplay: kebabCase(tsdoc.displayName),
-        componentName,
-        kebabCaseName: kebabCase(componentName),
-      });
       return kebabCase(tsdoc.displayName).includes(kebabCase(componentName));
     });
     const mergedProps = mergeProps(centralProps?.props);

src/app/component/[component]/live-example/page.tsx

@@ -14,7 +14,6 @@ import { loadStories } from './server';
 import { Knobs } from '@/components/live-example/Knobs';
 import { useDarkMode } from '@leafygreen-ui/leafygreen-provider';
 import { createDefaultProps } from './utils';
-import { CardSkeleton } from '@leafygreen-ui/skeleton-loader';
 
 export default function Page({ params }: { params: { component: string } }) {
   const { darkMode } = useDarkMode();

src/app/component/[component]/live-example/server.ts

@@ -4,7 +4,9 @@ import { composeStories } from '@storybook/react';
 export async function loadStories(componentName: string) {
   try {
     const stories = await import(`@leafygreen-ui/${componentName}/stories`);
-    const { LiveExample, default: meta } = composeStories(stories);
+    const { LiveExample, default: extractMeta } = composeStories(stories);
+    const meta = extractMeta ?? stories.default;
+
     return { LiveExample, meta } as StoryData;
   } catch (error) {
     console.log('ERROR LOADING STORIES');

src/app/component/[component]/live-example/utils.ts

@@ -1,4 +1,3 @@
-import { StoryData } from '@/components/live-example';
 import { mergeObjects } from '@/utils';
 import { Meta } from '@storybook/react';
 

src/components/content-stack/ContentstackRichText.tsx

@@ -23,7 +23,7 @@ export const ContentStackRichText = ({
 }: CSRichTextProps): JSX.Element => {
   return (
     <ErrorBoundary
-      errorComponent={err => {
+      errorComponent={() => {
         console.error(
           'The above error occurred mapping the following content to an element',
           content,

src/components/global/SideNavigation/SideNavigation.tsx

@@ -56,6 +56,13 @@ export function SideNavigation() {
         }
       />
       <SideNavList key="foundation-list">
+        <SideNavItem
+          key="grid"
+          active={pathname === '/foundations/forms/'}
+          href={'/foundations/forms'}
+        >
+          Form Guidelines
+        </SideNavItem>
         <SideNavItem
           key="grid"
           active={pathname === '/foundations/grid/'}

src/components/live-example/KnobRow.tsx

@@ -49,7 +49,7 @@ export const KnobRow = ({ knob, knobValue, setKnobValue }: KnobRowProps) => {
   const renderedKnob = (
     <Knob
       propName={name}
-      knobType={control}
+      knobType={control === 'color' ? 'text' : control}
       knobOptions={options}
       value={knobValue}
       onChange={eventOrVal => {

src/components/live-example/types.ts

@@ -15,6 +15,7 @@ export type ComponentProps = { [key: string]: any };
 export type Knobs =
   | 'string'
   | 'text'
+  | 'color'
   | 'number'
   | 'range'
   | 'date'

src/utils/components.ts

@@ -30,6 +30,7 @@ const Component = {
   ExpandableCard: 'expandable-card',
   FormFooter: 'form-footer',
   GuideCue: 'guide-cue',
+  Icon: 'icon',
   IconButton: 'icon-button',
   InfoSprinkle: 'info-sprinkle',
   InlineDefinition: 'inline-definition',
@@ -161,6 +162,11 @@ export const components: Array<ComponentMeta> = [
     navPath: generateComponentNavPath(Component.GuideCue),
     group: Group.Dialogs,
   },
+  {
+    name: titlecase(Component.Icon),
+    navPath: generateComponentNavPath(Component.Icon),
+    group: Group.Display,
+  },
   {
     name: titlecase(Component.IconButton),
     navPath: generateComponentNavPath(Component.IconButton),