refactor(ui): rename Settings to Section (#9428)

Author: austincalvelage

.changeset/section-component.md

@@ -0,0 +1,2 @@
+---
+---

packages/swingset/src/components/DocsViewer.tsx

@@ -42,7 +42,7 @@ const docModules: Record<string, Record<string, React.ComponentType>> = {
     icon: dynamic(() => import('../stories/icon.mdx')),
     menu: dynamic(() => import('../stories/menu.component.mdx')),
     popover: dynamic(() => import('../stories/popover.component.mdx')),
-    settings: dynamic(() => import('../stories/settings.mdx')),
+    section: dynamic(() => import('../stories/section.mdx')),
     tabs: dynamic(() => import('../stories/tabs.component.mdx')),
     text: dynamic(() => import('../stories/text.mdx')),
     field: dynamic(() => import('../stories/field.component.mdx')),

packages/swingset/src/lib/registry.ts

@@ -106,14 +106,14 @@ import {
   ShadowIndicators as ScrollAreaShadowIndicators,
   ThemedScrollbar as ScrollAreaThemedScrollbar,
 } from '../stories/scroll-area.stories';
-import { meta as selectMeta } from '../stories/select.stories';
 import {
-  ConnectedAccounts as SettingsConnectedAccounts,
-  Default as SettingsDefault,
-  Destructive as SettingsDestructive,
-  meta as settingsMeta,
-  MultipleEmailAndPhoneNumbers as SettingsMultipleEmailAndPhoneNumbers,
-} from '../stories/settings.stories';
+  ConnectedAccounts as SectionConnectedAccounts,
+  Default as SectionDefault,
+  Destructive as SectionDestructive,
+  meta as sectionMeta,
+  MultipleEmailAndPhoneNumbers as SectionMultipleEmailAndPhoneNumbers,
+} from '../stories/section.stories';
+import { meta as selectMeta } from '../stories/select.stories';
 import { Default as TabsComponentDefault, meta as tabsComponentMeta } from '../stories/tabs.component.stories';
 import { meta as tabsMeta } from '../stories/tabs.stories';
 import {
@@ -134,12 +134,12 @@ import { toSlug } from './slug';
 import type { StoryModule } from './types';
 
 const destructiveModule: StoryModule = { meta: destructiveMeta, Default: DestructiveDefault };
-const settingsModule: StoryModule = {
-  meta: settingsMeta,
-  Default: SettingsDefault,
-  MultipleEmailAndPhoneNumbers: SettingsMultipleEmailAndPhoneNumbers,
-  ConnectedAccounts: SettingsConnectedAccounts,
-  Destructive: SettingsDestructive,
+const sectionModule: StoryModule = {
+  meta: sectionMeta,
+  Default: SectionDefault,
+  MultipleEmailAndPhoneNumbers: SectionMultipleEmailAndPhoneNumbers,
+  ConnectedAccounts: SectionConnectedAccounts,
+  Destructive: SectionDestructive,
 };
 const organizationProfileLeaveSectionModule: StoryModule = {
   meta: organizationProfileLeaveSectionMeta,
@@ -297,7 +297,7 @@ export const registry: StoryModule[] = [
   iconModule,
   menuComponentModule,
   popoverComponentModule,
-  settingsModule,
+  sectionModule,
   tabsComponentModule,
   textModule,
   fieldModule,

packages/swingset/src/stories/section.mdx

@@ -0,0 +1,72 @@
+import * as SectionStories from './section.stories';
+
+# Section
+
+A section component that carries the canonical heading, surface, row grouping, and item layout. Use it for product sections while composing each item's media, content, and actions as needed.
+
+## Usage
+
+```tsx
+import { Section } from '@clerk/ui/mosaic/components/section';
+
+<Section.Root>
+  <Section.Title>Account</Section.Title>
+  <Section.Group>
+    <Section.Row>
+      <Section.Item>
+        <Section.Media>{icon}</Section.Media>
+        <Section.Content>
+          <Section.Label>Name</Section.Label>
+          <Section.Description>Shown throughout the application.</Section.Description>
+        </Section.Content>
+        <Section.Actions>{control}</Section.Actions>
+      </Section.Item>
+    </Section.Row>
+  </Section.Group>
+</Section.Root>
+```
+
+`Section.Group` owns the outlined surface. Its direct `Section.Row` children own separation and may stack one or more `Section.Item` entries. Each item lays out optional media, flexible content, and trailing actions. `Section.Media` accepts `md` and `lg` sizes.
+
+Use `Section.Items` for a nested value list beneath a row's header item. The row keeps an 8px header-to-list gap, nested items stack without gaps at a 44px minimum height, and their content receives 12px vertical padding.
+
+## Examples
+
+<Story
+  name='Default'
+  storyModule={SectionStories}
+  composition={[
+    { name: 'Avatar', href: '/components/avatar', layer: 'Components' },
+    { name: 'Button', href: '/components/button', layer: 'Components' },
+  ]}
+/>
+
+### Multiple email addresses and phone numbers
+
+<Story
+  name='MultipleEmailAndPhoneNumbers'
+  storyModule={SectionStories}
+  composition={[
+    { name: 'Badge', href: '/components/badge', layer: 'Components' },
+    { name: 'Button', href: '/components/button', layer: 'Components' },
+    { name: 'Icon', href: '/components/icon', layer: 'Components' },
+  ]}
+/>
+
+### Connected accounts
+
+<Story
+  name='ConnectedAccounts'
+  storyModule={SectionStories}
+  composition={[
+    { name: 'Button', href: '/components/button', layer: 'Components' },
+    { name: 'Icon', href: '/components/icon', layer: 'Components' },
+  ]}
+/>
+
+### Destructive section
+
+<Story
+  name='Destructive'
+  storyModule={SectionStories}
+/>