-
-
Notifications
You must be signed in to change notification settings - Fork 262
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(heading): add
Heading
and Section
components
- Loading branch information
Showing
11 changed files
with
287 additions
and
2 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,6 +1,6 @@ | ||
# Component Index | ||
|
||
> 166 components exported from [email protected]. | ||
> 168 components exported from [email protected]. | ||
## Components | ||
|
||
|
@@ -63,6 +63,7 @@ | |
- [`HeaderPanelLinks`](#headerpanellinks) | ||
- [`HeaderSearch`](#headersearch) | ||
- [`HeaderUtilities`](#headerutilities) | ||
- [`Heading`](#heading) | ||
- [`ImageLoader`](#imageloader) | ||
- [`InlineLoading`](#inlineloading) | ||
- [`InlineNotification`](#inlinenotification) | ||
|
@@ -109,6 +110,7 @@ | |
- [`Row`](#row) | ||
- [`Search`](#search) | ||
- [`SearchSkeleton`](#searchskeleton) | ||
- [`Section`](#section) | ||
- [`Select`](#select) | ||
- [`SelectItem`](#selectitem) | ||
- [`SelectItemGroup`](#selectitemgroup) | ||
|
@@ -1852,6 +1854,28 @@ None. | |
|
||
None. | ||
|
||
## `Heading` | ||
|
||
### Types | ||
|
||
```ts | ||
export type SectionLevel = 1 | 2 | 3 | 4 | 5 | 6; | ||
``` | ||
|
||
### Props | ||
|
||
None. | ||
|
||
### Slots | ||
|
||
| Slot name | Default | Props | Fallback | | ||
| :-------- | :------ | :---- | :------- | | ||
| -- | Yes | -- | -- | | ||
|
||
### Events | ||
|
||
None. | ||
|
||
## `ImageLoader` | ||
|
||
### Props | ||
|
@@ -3177,6 +3201,31 @@ None. | |
| mouseenter | forwarded | -- | | ||
| mouseleave | forwarded | -- | | ||
|
||
## `Section` | ||
|
||
### Types | ||
|
||
```ts | ||
export type SectionLevel = 1 | 2 | 3 | 4 | 5 | 6; | ||
``` | ||
|
||
### Props | ||
|
||
| Prop name | Required | Kind | Reactive | Type | Default value | Description | | ||
| :-------- | :------- | :--------------- | :------- | ---------------------------------------- | ---------------------- | ---------------------------------------------- | | ||
| level | No | <code>let</code> | No | <code>SectionLevel</code> | <code>1</code> | Specify the level the section should start at. | | ||
| tag | No | <code>let</code> | No | <code>keyof HTMLElementTagNameMap</code> | <code>"section"</code> | Specify the tag name | | ||
|
||
### Slots | ||
|
||
| Slot name | Default | Props | Fallback | | ||
| :-------- | :------ | :---- | :------- | | ||
| -- | Yes | -- | -- | | ||
|
||
### Events | ||
|
||
None. | ||
|
||
## `Select` | ||
|
||
### Props | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,72 @@ | ||
--- | ||
components: ["Heading", "Section"] | ||
--- | ||
|
||
<script> | ||
import { Heading, Section } from "carbon-components-svelte"; | ||
import Preview from "../../components/Preview.svelte"; | ||
</script> | ||
|
||
The `Heading` component automatically adjusts the level of the heading based on the nesting level of the `Section` component. | ||
|
||
## Default | ||
|
||
For example, the top-level `Heading` inside a `Section` will be rendered as a semantic `h1` element. | ||
|
||
<Section> | ||
<Heading>Heading 1</Heading> | ||
</Section> | ||
|
||
## Nested sections | ||
|
||
Section headings are capped at `h6`. | ||
|
||
<Section> | ||
<Heading>Heading 1</Heading> | ||
<Section> | ||
<Heading>Heading 2</Heading> | ||
<Section> | ||
<Heading>Heading 3</Heading> | ||
<Section> | ||
<Heading>Heading 4</Heading> | ||
<Section> | ||
<Heading>Heading 5</Heading> | ||
<Section> | ||
<Heading>Heading 6</Heading> | ||
<Section> | ||
<Heading>Capped at Heading 6</Heading> | ||
</Section> | ||
</Section> | ||
</Section> | ||
</Section> | ||
</Section> | ||
</Section> | ||
<Section> | ||
<Heading>Heading 2</Heading> | ||
</Section> | ||
</Section> | ||
|
||
|
||
## Custom level | ||
|
||
To specify a custom start level, use the `level` prop. | ||
|
||
<Section level={5}> | ||
<Heading>Starts at Heading 5</Heading> | ||
<Section> | ||
<Heading>Heading 6</Heading> | ||
<Section> | ||
<Heading>Capped at Heading 6</Heading> | ||
</Section> | ||
</Section> | ||
</Section> | ||
|
||
## Custom section element | ||
|
||
The `Section` component renders a `section` by default. | ||
|
||
Use the `tag` prop to render a different element. | ||
|
||
<Section tag="div"> | ||
<Heading>Heading 1</Heading> | ||
</Section> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,18 @@ | ||
<script> | ||
// @ts-check | ||
/** | ||
* @typedef {1 | 2 | 3 | 4 | 5 | 6} SectionLevel | ||
*/ | ||
import { getContext } from "svelte"; | ||
/** @type {undefined | SectionLevel} */ | ||
const sectionLevel = getContext("Section"); | ||
$: tag = `h${sectionLevel ?? 1}`; | ||
</script> | ||
<svelte:element this="{tag}"> | ||
<slot /> | ||
</svelte:element> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,42 @@ | ||
<script> | ||
// @ts-check | ||
/** | ||
* @typedef {1 | 2 | 3 | 4 | 5 | 6} SectionLevel | ||
*/ | ||
/** | ||
* Specify the level the section should start at. | ||
* @type {SectionLevel} | ||
*/ | ||
export let level = 1; | ||
/** | ||
* Specify the tag name | ||
* @type {keyof HTMLElementTagNameMap} | ||
*/ | ||
export let tag = "section"; | ||
import { getContext, setContext } from "svelte"; | ||
import { writable } from "svelte/store"; | ||
/** @type {undefined | SectionLevel} */ | ||
const parentLevel = getContext("Section"); | ||
/** @type {import ("svelte/store").Writable<SectionLevel>} */ | ||
const internalLevel = writable(level); | ||
if (typeof parentLevel === "number") { | ||
// @ts-expect-error | ||
internalLevel.set(Math.min(parentLevel + 1, 6)); | ||
} | ||
// Custom level should override the inferred parent level. | ||
if (level !== 1) { | ||
internalLevel.set(level); | ||
} | ||
setContext("Section", $internalLevel); | ||
</script> | ||
|
||
<svelte:element this="{tag}"><slot /></svelte:element> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,2 @@ | ||
export { default as Heading } from "./Heading.svelte"; | ||
export { default as Section } from "./Section.svelte"; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,10 @@ | ||
<script lang="ts"> | ||
import { Heading, Section } from "../types"; | ||
</script> | ||
|
||
<Section tag="div"> | ||
<Heading>Heading 1</Heading> | ||
<Section level="{5}"> | ||
<Heading>Starts at Heading 5</Heading> | ||
</Section> | ||
</Section> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
import type { SvelteComponentTyped } from "svelte"; | ||
|
||
export type SectionLevel = 1 | 2 | 3 | 4 | 5 | 6; | ||
|
||
export interface HeadingProps {} | ||
|
||
export default class Heading extends SvelteComponentTyped< | ||
HeadingProps, | ||
Record<string, any>, | ||
{ default: {} } | ||
> {} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,23 @@ | ||
import type { SvelteComponentTyped } from "svelte"; | ||
|
||
export type SectionLevel = 1 | 2 | 3 | 4 | 5 | 6; | ||
|
||
export interface SectionProps { | ||
/** | ||
* Specify the level the section should start at. | ||
* @default 1 | ||
*/ | ||
level?: SectionLevel; | ||
|
||
/** | ||
* Specify the tag name | ||
* @default "section" | ||
*/ | ||
tag?: keyof HTMLElementTagNameMap; | ||
} | ||
|
||
export default class Section extends SvelteComponentTyped< | ||
SectionProps, | ||
Record<string, any>, | ||
{ default: {} } | ||
> {} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters