docs: replace h3 with h2 headings (#1452)

carbon-design-system · Aug 17, 2022 · e2a9000 · e2a9000
1 parent b5c4501
commit e2a9000
Show file tree

Hide file tree

Showing 70 changed files with 552 additions and 559 deletions.
diff --git a/docs/src/components/ComponentApi.svelte b/docs/src/components/ComponentApi.svelte
@@ -46,7 +46,7 @@
   </OutboundLink>
 </p>
 
-<h3 id="props">Props</h3>
+<h2 id="props">Props</h2>
 
 {#if component.props.length > 0}
   <div class="overflow">
@@ -128,7 +128,7 @@
   <p class="my-layout-01-03">No props.</p>
 {/if}
 
-<h3 id="typedefs">Typedefs</h3>
+<h2 id="typedefs">Typedefs</h2>
 
 {#if component.typedefs.length > 0}
   <CodeSnippet
@@ -141,7 +141,7 @@
   <p class="my-layout-01-03">No typedefs.</p>
 {/if}
 
-<h3 id="slots">Slots</h3>
+<h2 id="slots">Slots</h2>
 {#if component.slots.length > 0}
   <UnorderedList class="my-layout-01-03">
     {#each component.slots as slot (slot.name)}
@@ -152,7 +152,7 @@
   <p class="my-layout-01-03">No slots.</p>
 {/if}
 
-<h3 id="forwarded-events">Forwarded events</h3>
+<h2 id="forwarded-events">Forwarded events</h2>
 {#if forwarded_events.length > 0}
   <UnorderedList class="my-layout-01-03">
     {#each forwarded_events as event (event.name)}
@@ -163,7 +163,7 @@
   <p class="my-layout-01-03">No forwarded events.</p>
 {/if}
 
-<h3 id="dispatched-events">Dispatched events</h3>
+<h2 id="dispatched-events">Dispatched events</h2>
 
 {#if dispatched_events.length > 0}
   <UnorderedList class="my-layout-01-03">
@@ -175,7 +175,7 @@
   <p class="my-layout-01-03">No dispatched events.</p>
 {/if}
 
-<h3 id="rest-props">$$restProps</h3>
+<h2 id="rest-props">$$restProps</h2>
 
 <div class="my-layout-01-03">
   {#if component.rest_props}

diff --git a/docs/src/global.css b/docs/src/global.css
@@ -223,16 +223,8 @@ html[theme="g90"] .code-override {
   padding: 0 var(--cds-spacing-02);
 }
 
-.bx--col > h2 {
-  font-size: var(--cds-expressive-heading-05-font-size);
-  font-weight: var(--cds-expressive-heading-05-font-weight);
-  letter-spacing: var(--cds-expressive-heading-05-letter-spacing);
-  line-height: var(--cds-expressive-heading-05-line-height);
-  padding-top: var(--cds-layout-03);
-  margin-bottom: var(--cds-layout-01);
-}
-
-.bx--col > h3 {
+[class*="bx--col"] > h2,
+.bx--tab-content > h2 {
   font-size: var(--cds-expressive-heading-04-font-size);
   font-weight: var(--cds-expressive-heading-04-font-weight);
   letter-spacing: var(--cds-expressive-heading-04-letter-spacing);
@@ -251,6 +243,7 @@ html[theme="g90"] .code-override {
 }
 
 .bx--col > h2,
+.bx--tab-content > h2,
 .bx--col > h3,
 .bx--col > h4 {
   scroll-margin-top: 3rem;

diff --git a/docs/src/layouts/ComponentLayout.svelte b/docs/src/layouts/ComponentLayout.svelte
@@ -104,7 +104,7 @@
           <slot name="aside" />
         </div>
         <slot />
-        <h3 id="component-api">Component API</h3>
+        <h2 id="component-api">Component API</h2>
         <p>
           API documentation is
           <Link

diff --git a/docs/src/pages/components/Accordion.svx b/docs/src/pages/components/Accordion.svx
@@ -10,7 +10,7 @@ components: ["Accordion", "AccordionItem", "AccordionSkeleton"]
   import Preview from "../../components/Preview.svelte";
 </script>
 
-### Default
+## Default
 
 <Accordion>
   <AccordionItem title="Natural Language Classifier">
@@ -25,7 +25,7 @@ components: ["Accordion", "AccordionItem", "AccordionSkeleton"]
   </AccordionItem>
 </Accordion>
 
-### Left-aligned chevron
+## Left-aligned chevron
 
 <Accordion align="start">
   <AccordionItem title="Natural Language Classifier">
@@ -40,7 +40,7 @@ components: ["Accordion", "AccordionItem", "AccordionSkeleton"]
   </AccordionItem>
 </Accordion>
 
-### Custom title slot
+## Custom title slot
 
 <Accordion>
   <AccordionItem>
@@ -67,7 +67,7 @@ components: ["Accordion", "AccordionItem", "AccordionSkeleton"]
   </AccordionItem>
 </Accordion>
 
-### First item open
+## First item open
 
 <Accordion>
   <AccordionItem open title="Natural Language Classifier">
@@ -82,13 +82,13 @@ components: ["Accordion", "AccordionItem", "AccordionSkeleton"]
   </AccordionItem>
 </Accordion>
 
-### Programmatic example
+## Programmatic example
 
 This example demonstrates how a list of items can be programmatically expanded and collapsed.
 
 <FileSource src="/framed/Accordion/ExpandableAccordion" />
 
-### Extra-large size
+## Extra-large size
 
 <Accordion size="xl">
   <AccordionItem title="Natural Language Classifier">
@@ -103,7 +103,7 @@ This example demonstrates how a list of items can be programmatically expanded a
   </AccordionItem>
 </Accordion>
 
-### Small size
+## Small size
 
 <Accordion size="sm">
   <AccordionItem title="Natural Language Classifier">
@@ -118,7 +118,7 @@ This example demonstrates how a list of items can be programmatically expanded a
   </AccordionItem>
 </Accordion>
 
-### Disabled
+## Disabled
 
 <Accordion disabled>
   <AccordionItem title="Natural Language Classifier">
@@ -133,7 +133,7 @@ This example demonstrates how a list of items can be programmatically expanded a
   </AccordionItem>
 </Accordion>
 
-### Disabled (item)
+## Disabled (item)
 
 <Accordion>
   <AccordionItem disabled title="Natural Language Classifier">
@@ -148,27 +148,27 @@ This example demonstrates how a list of items can be programmatically expanded a
   </AccordionItem>
 </Accordion>
 
-### Skeleton
+## Skeleton
 
 <Accordion skeleton />
 
-### Skeleton (left-aligned chevron)
+## Skeleton (left-aligned chevron)
 
 <Accordion skeleton align="start" />
 
-### Skeleton (custom count)
+## Skeleton (custom count)
 
 <Accordion skeleton count={3} />
 
-### Skeleton (closed)
+## Skeleton (closed)
 
 <Accordion skeleton open={false} />
 
-### Skeleton (extra-large)
+## Skeleton (extra-large)
 
 <Accordion skeleton size="xl" />
 
-### Skeleton (small)
+## Skeleton (small)
 
 <Accordion skeleton size="sm" />
 
diff --git a/docs/src/pages/components/AspectRatio.svx b/docs/src/pages/components/AspectRatio.svx
@@ -7,61 +7,61 @@ The `AspectRatio` component is useful for constraining fluid content within an a
 
 Supported aspect ratios include `"2x1"`, `"2x3"`, `"16x9"`, `"4x3"`, `"1x1"`, `"3x4"`, `"3x2"`, `"9x16"` and `"1x2"`.
 
-### Default (2x1)
+## Default (2x1)
 
 <AspectRatio>
   2x1
 </AspectRatio>
 
-### Ratio 2x3
+## Ratio 2x3
 
 <AspectRatio ratio="2x3">
   2x3
 </AspectRatio>
 
-### Ratio 16x9
+## Ratio 16x9
 
 <AspectRatio ratio="16x9">
   16x9
 </AspectRatio>
 
-### Ratio 4x3
+## Ratio 4x3
 
 <AspectRatio ratio="4x3">
   4x3
 </AspectRatio>
 
-### Ratio 1x1
+## Ratio 1x1
 
 <AspectRatio ratio="1x1">
   1x1
 </AspectRatio>
 
-### Ratio 3x4
+## Ratio 3x4
 
 <AspectRatio ratio="3x4">
   3x4
 </AspectRatio>
 
-### Ratio 3x2
+## Ratio 3x2
 
 <AspectRatio ratio="3x2">
   3x2
 </AspectRatio>
 
-### Ratio 9x16
+## Ratio 9x16
 
 <AspectRatio ratio="9x16">
   9x16
 </AspectRatio>
 
-### Ratio 1x2
+## Ratio 1x2
 
 <AspectRatio ratio="1x2">
   1x2
 </AspectRatio>
 
-### Tile (16x9)
+## Tile (16x9)
 
 <AspectRatio ratio="16x9">
   <Tile style="height: 100%">Content</Tile>

diff --git a/docs/src/pages/components/Breadcrumb.svx b/docs/src/pages/components/Breadcrumb.svx
@@ -12,22 +12,22 @@ components: ["Breadcrumb", "BreadcrumbItem"]
   import Preview from "../../components/Preview.svelte";
 </script>
 
-### Default
+## Default
 
 <Breadcrumb>
   <BreadcrumbItem href="/">Dashboard</BreadcrumbItem>
   <BreadcrumbItem href="/reports">Annual reports</BreadcrumbItem>
   <BreadcrumbItem href="/reports/2019" isCurrentPage>2019</BreadcrumbItem>
 </Breadcrumb>
 
-### No trailing slash
+## No trailing slash
 
 <Breadcrumb noTrailingSlash>
   <BreadcrumbItem href="/">Home</BreadcrumbItem>
   <BreadcrumbItem href="/profile" isCurrentPage>Profile</BreadcrumbItem>
 </Breadcrumb>
 
-### Overflow menu
+## Overflow menu
 
 <Breadcrumb>
   <BreadcrumbItem href="/">Home</BreadcrumbItem>
@@ -41,10 +41,10 @@ components: ["Breadcrumb", "BreadcrumbItem"]
   <BreadcrumbItem href="/api/data/latest/usage" isCurrentPage>Usage</BreadcrumbItem>
 </Breadcrumb>
 
-### Breadcrumb trail
+## Breadcrumb trail
 
 <FileSource src="/framed/Breadcrumbs/Breadcrumbs" />
 
-### Skeleton
+## Skeleton
 
 <Breadcrumb noTrailingSlash skeleton count={3} />
diff --git a/docs/src/pages/components/Breakpoint.svx b/docs/src/pages/components/Breakpoint.svx
@@ -18,15 +18,15 @@ The [Carbon Design System grid implementation](https://carbondesignsystem.com/gu
 
 This utility component uses the [Window.matchMedia API](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia) to declaratively determine the current Carbon breakpoint size.
 
-### Default
+## Default
 
 Bind to the `size` prop to determine the current breakpoint size. Possible values include: `"sm" | "md" | "lg" | "xlg" | "max"`.
 
 The `"on:change"` event will fire when the size is initially determined and when a breakpoint change event occurs (e.g., the browser width is resized).
 
 <FileSource src="/framed/Breakpoint/Breakpoint" />
 
-### Store and Breakpoint Values
+## Store and Breakpoint Values
 
 As an alternative to the component, `breakpointObserver` can be used to get the current size as a Svelte store. The store has two additional functions which create derived stores that return a `boolean` indicating whether the size is smaller/larger than a certain breakpoint.