From 6806fa24ceb44a8e2e1b4a6b2ad4f54bca719f37 Mon Sep 17 00:00:00 2001 From: Eric Liu Date: Sun, 21 Apr 2024 14:24:36 -0700 Subject: [PATCH] feat(heading): add `Heading` and `Section` components --- COMPONENT_INDEX.md | 51 ++++++++++++++++++- docs/src/COMPONENT_API.json | 57 ++++++++++++++++++++- docs/src/pages/components/Heading.svx | 72 +++++++++++++++++++++++++++ src/Heading/Heading.svelte | 18 +++++++ src/Heading/Section.svelte | 42 ++++++++++++++++ src/Heading/index.js | 2 + src/index.js | 1 + tests/Heading.test.svelte | 10 ++++ types/Heading/Heading.svelte.d.ts | 11 ++++ types/Heading/Section.svelte.d.ts | 23 +++++++++ types/index.d.ts | 2 + 11 files changed, 287 insertions(+), 2 deletions(-) create mode 100644 docs/src/pages/components/Heading.svx create mode 100644 src/Heading/Heading.svelte create mode 100644 src/Heading/Section.svelte create mode 100644 src/Heading/index.js create mode 100644 tests/Heading.test.svelte create mode 100644 types/Heading/Heading.svelte.d.ts create mode 100644 types/Heading/Section.svelte.d.ts diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index cfbd9062cb..7b0d60ed14 100644 --- a/COMPONENT_INDEX.md +++ b/COMPONENT_INDEX.md @@ -1,6 +1,6 @@ # Component Index -> 166 components exported from carbon-components-svelte@1.0.0-next.1. +> 168 components exported from carbon-components-svelte@1.0.0-next.1. ## 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 | let | No | SectionLevel | 1 | Specify the level the section should start at. | +| tag | No | let | No | keyof HTMLElementTagNameMap | "section" | Specify the tag name | + +### Slots + +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------- | +| -- | Yes | -- | -- | + +### Events + +None. + ## `Select` ### Props diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json index 0e4fd36def..c181ed8093 100644 --- a/docs/src/COMPONENT_API.json +++ b/docs/src/COMPONENT_API.json @@ -1,5 +1,5 @@ { - "total": 166, + "total": 168, "components": [ { "moduleName": "Accordion", @@ -5386,6 +5386,21 @@ "events": [], "typedefs": [] }, + { + "moduleName": "Heading", + "filePath": "src/Heading/Heading.svelte", + "props": [], + "moduleExports": [], + "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], + "events": [], + "typedefs": [ + { + "type": "1 | 2 | 3 | 4 | 5 | 6", + "name": "SectionLevel", + "ts": "type SectionLevel = 1 | 2 | 3 | 4 | 5 | 6" + } + ] + }, { "moduleName": "ImageLoader", "filePath": "src/ImageLoader/ImageLoader.svelte", @@ -10181,6 +10196,46 @@ "typedefs": [], "rest_props": { "type": "Element", "name": "div" } }, + { + "moduleName": "Section", + "filePath": "src/Heading/Section.svelte", + "props": [ + { + "name": "level", + "kind": "let", + "description": "Specify the level the section should start at.", + "type": "SectionLevel", + "value": "1", + "isFunction": false, + "isFunctionDeclaration": false, + "isRequired": false, + "constant": false, + "reactive": false + }, + { + "name": "tag", + "kind": "let", + "description": "Specify the tag name", + "type": "keyof HTMLElementTagNameMap", + "value": "\"section\"", + "isFunction": false, + "isFunctionDeclaration": false, + "isRequired": false, + "constant": false, + "reactive": false + } + ], + "moduleExports": [], + "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], + "events": [], + "typedefs": [ + { + "type": "1 | 2 | 3 | 4 | 5 | 6", + "name": "SectionLevel", + "ts": "type SectionLevel = 1 | 2 | 3 | 4 | 5 | 6" + } + ] + }, { "moduleName": "Select", "filePath": "src/Select/Select.svelte", diff --git a/docs/src/pages/components/Heading.svx b/docs/src/pages/components/Heading.svx new file mode 100644 index 0000000000..c97bc75870 --- /dev/null +++ b/docs/src/pages/components/Heading.svx @@ -0,0 +1,72 @@ +--- +components: ["Heading", "Section"] +--- + + + +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. + +
+ Heading 1 +
+ +## Nested sections + +Section headings are capped at `h6`. + +
+ Heading 1 +
+ Heading 2 +
+ Heading 3 +
+ Heading 4 +
+ Heading 5 +
+ Heading 6 +
+ Capped at Heading 6 +
+
+
+
+
+
+
+ Heading 2 +
+
+ + +## Custom level + +To specify a custom start level, use the `level` prop. + +
+ Starts at Heading 5 +
+ Heading 6 +
+ Capped at Heading 6 +
+
+
+ +## Custom section element + +The `Section` component renders a `section` by default. + +Use the `tag` prop to render a different element. + +
+ Heading 1 +
\ No newline at end of file diff --git a/src/Heading/Heading.svelte b/src/Heading/Heading.svelte new file mode 100644 index 0000000000..6040b7d282 --- /dev/null +++ b/src/Heading/Heading.svelte @@ -0,0 +1,18 @@ + + + + + diff --git a/src/Heading/Section.svelte b/src/Heading/Section.svelte new file mode 100644 index 0000000000..0faaf5673f --- /dev/null +++ b/src/Heading/Section.svelte @@ -0,0 +1,42 @@ + + + diff --git a/src/Heading/index.js b/src/Heading/index.js new file mode 100644 index 0000000000..2807968516 --- /dev/null +++ b/src/Heading/index.js @@ -0,0 +1,2 @@ +export { default as Heading } from "./Heading.svelte"; +export { default as Section } from "./Section.svelte"; diff --git a/src/index.js b/src/index.js index 6763f0cc43..d42445a263 100644 --- a/src/index.js +++ b/src/index.js @@ -56,6 +56,7 @@ export { FormGroup } from "./FormGroup"; export { FormItem } from "./FormItem"; export { FormLabel } from "./FormLabel"; export { Grid, Row, Column } from "./Grid"; +export { Heading, Section } from "./Heading"; export { ImageLoader } from "./ImageLoader"; export { InlineLoading } from "./InlineLoading"; export { Layer } from "./Layer"; diff --git a/tests/Heading.test.svelte b/tests/Heading.test.svelte new file mode 100644 index 0000000000..7d67d342d5 --- /dev/null +++ b/tests/Heading.test.svelte @@ -0,0 +1,10 @@ + + +
+ Heading 1 +
+ Starts at Heading 5 +
+
diff --git a/types/Heading/Heading.svelte.d.ts b/types/Heading/Heading.svelte.d.ts new file mode 100644 index 0000000000..a78820663a --- /dev/null +++ b/types/Heading/Heading.svelte.d.ts @@ -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, + { default: {} } +> {} diff --git a/types/Heading/Section.svelte.d.ts b/types/Heading/Section.svelte.d.ts new file mode 100644 index 0000000000..ea8174170d --- /dev/null +++ b/types/Heading/Section.svelte.d.ts @@ -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, + { default: {} } +> {} diff --git a/types/index.d.ts b/types/index.d.ts index dcb0e56c93..58ab50e157 100644 --- a/types/index.d.ts +++ b/types/index.d.ts @@ -62,6 +62,8 @@ export { default as FormLabel } from "./FormLabel/FormLabel.svelte"; export { default as Grid } from "./Grid/Grid.svelte"; export { default as Row } from "./Grid/Row.svelte"; export { default as Column } from "./Grid/Column.svelte"; +export { default as Heading } from "./Heading/Heading.svelte"; +export { default as Section } from "./Heading/Section.svelte"; export { default as ImageLoader } from "./ImageLoader/ImageLoader.svelte"; export { default as InlineLoading } from "./InlineLoading/InlineLoading.svelte"; export { default as Layer } from "./Layer/Layer.svelte";