docs(swingset): toggle showSearch from the profile playgrounds

Author: alexcarpenter

packages/swingset/src/stories/organization-profile.mdx

@@ -39,3 +39,15 @@ navigation dismisses it in place of the corner close button.
   name='Fullscreen'
   storyModule={Stories}
 />
+
+## Playground
+
+`showSearch` adds a search field above the navigation that finds pages, and the sections on them.
+Only the column layout shows it.
+
+<Preview
+  name='Default'
+  storyModule={Stories}
+/>
+
+<PropTable meta={Stories.meta} />

packages/swingset/src/stories/organization-profile.stories.tsx

@@ -16,16 +16,29 @@ export const meta: StoryMeta = {
   label: 'Organization profile',
   layout: 'wide',
   source: 'packages/mosaic/src/features/organization-profile/organization-profile.view.tsx',
+  styles: {
+    _variants: {
+      showSearch: { true: {}, false: {} },
+    },
+    _defaultVariants: {
+      showSearch: 'false',
+    },
+  },
 };
 
-export function Default() {
+function knobsAsProps(props: Record<string, unknown>) {
+  return { showSearch: props.showSearch === true || props.showSearch === 'true' };
+}
+
+export function Default(props: Record<string, unknown>) {
   const { activePage, setActivePage, pages } = useOrganizationProfileFixture();
   return (
     <OrganizationProfileView
       activePage={activePage}
       pages={pages}
       onPageChange={setActivePage}
       elevation='flush'
+      {...knobsAsProps(props)}
     />
   );
 }

packages/swingset/src/stories/user-profile.mdx

@@ -41,3 +41,15 @@ navigation dismisses it in place of the corner close button.
   name='Fullscreen'
   storyModule={Stories}
 />
+
+## Playground
+
+`showSearch` adds a search field above the navigation that finds pages, and the sections on them.
+Only the column layout shows it.
+
+<Preview
+  name='Default'
+  storyModule={Stories}
+/>
+
+<PropTable meta={Stories.meta} />

packages/swingset/src/stories/user-profile.stories.tsx

@@ -15,21 +15,34 @@ export const meta: StoryMeta = {
   label: 'User profile',
   layout: 'wide',
   source: 'packages/mosaic/src/features/user-profile/user-profile.view.tsx',
+  styles: {
+    _variants: {
+      showSearch: { true: {}, false: {} },
+    },
+    _defaultVariants: {
+      showSearch: 'false',
+    },
+  },
 };
 
+function knobsAsProps(props: Record<string, unknown>) {
+  return { showSearch: props.showSearch === true || props.showSearch === 'true' };
+}
+
 /**
  * The profile as a page's content — `elevation='flush'`, the way a `Card` chooses its elevation:
  * unframed, flush with its host, scrolling with the page. The fixture stands in for the model and
  * controller: every page's data, and actions that update it, so the surface behaves.
  */
-export function Default() {
+export function Default(props: Record<string, unknown>) {
   const { activePage, setActivePage, pages } = useUserProfileFixture();
   return (
     <UserProfileView
       activePage={activePage}
       pages={pages}
       onPageChange={setActivePage}
       elevation='flush'
+      {...knobsAsProps(props)}
     />
   );
 }