-
Notifications
You must be signed in to change notification settings - Fork 13
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
refactor(sbb-title): extract base class (#2594)
- Loading branch information
1 parent
ffbcef7
commit 694bffe
Showing
9 changed files
with
139 additions
and
136 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
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
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 +1,2 @@ | ||
| export * from './title/title.js'; | ||
| export * from './title/title-base.js'; |
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,58 @@ | ||
| import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit'; | ||
| import { LitElement } from 'lit'; | ||
| import { property } from 'lit/decorators.js'; | ||
| import { html, unsafeStatic } from 'lit/static-html.js'; | ||
|
|
||
| import { hostAttributes } from '../core/decorators.js'; | ||
| import { SbbNegativeMixin } from '../core/mixins.js'; | ||
|
|
||
| import style from './title-common.scss?lit&inline'; | ||
|
|
||
| export type SbbTitleLevel = '1' | '2' | '3' | '4' | '5' | '6'; | ||
|
|
||
| /** | ||
| * It displays a title with a heading role. | ||
| * | ||
| * @slot - Use the unnamed slot to display the title. | ||
| */ | ||
| @hostAttributes({ | ||
| role: 'heading', | ||
| }) | ||
| export abstract class SbbTitleBase extends SbbNegativeMixin(LitElement) { | ||
| public static override styles: CSSResultGroup = style; | ||
|
|
||
| /** Title level */ | ||
| @property({ reflect: true }) public level: SbbTitleLevel = '1'; | ||
|
|
||
| /** Visual level for the title. Optional, if not set, the value of level will be used. */ | ||
| @property({ attribute: 'visual-level', reflect: true }) | ||
| public visualLevel?: SbbTitleLevel; | ||
|
|
||
| /** | ||
| * Sometimes we need a title in the markup to present a proper hierarchy | ||
| * to the screen readers while we do not want to let that title appear | ||
| * visually. In this case we set visuallyHidden to true. | ||
| */ | ||
| @property({ attribute: 'visually-hidden', reflect: true, type: Boolean }) | ||
| public visuallyHidden?: boolean; | ||
|
|
||
| protected override willUpdate(changedProperties: PropertyValues): void { | ||
| super.willUpdate(changedProperties); | ||
|
|
||
| if (changedProperties.has('level')) { | ||
| this.setAttribute('aria-level', this.level); | ||
| } | ||
| } | ||
|
|
||
| protected override render(): TemplateResult { | ||
| const TAGNAME = `h${this.level}`; | ||
|
|
||
| /* eslint-disable lit/binding-positions */ | ||
| return html` | ||
| <${unsafeStatic(TAGNAME)} class="sbb-title" role="presentation"> | ||
| <slot></slot> | ||
| </${unsafeStatic(TAGNAME)}> | ||
| `; | ||
| /* eslint-enable lit/binding-positions */ | ||
| } | ||
| } |
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,53 @@ | ||
| @use '../core/styles' as sbb; | ||
|
|
||
| // Box-sizing rules contained in typography are not traversing Shadow DOM boundaries. We need to include box-sizing mixin in every component. | ||
| @include sbb.box-sizing; | ||
|
|
||
| :host { | ||
| --sbb-title-text-color-normal: var( | ||
| --sbb-title-text-color-normal-override, | ||
| var(--sbb-color-charcoal) | ||
| ); | ||
|
|
||
| display: block; | ||
| } | ||
|
|
||
| :host([negative]) { | ||
| @include sbb.title--negative; | ||
| } | ||
|
|
||
| :host([id]) { | ||
| @include sbb.scroll-margin-block-start; | ||
| } | ||
|
|
||
| .sbb-title { | ||
| color: var(--sbb-title-text-color-normal); | ||
|
|
||
| :host([visually-hidden]) & { | ||
| @include sbb.screen-reader-only; | ||
| } | ||
|
|
||
| :host(:is([level='1']:not([visual-level]), [visual-level='1'])) & { | ||
| @include sbb.title-1($exclude-spacing: true); | ||
| } | ||
|
|
||
| :host(:is([level='2']:not([visual-level]), [visual-level='2'])) & { | ||
| @include sbb.title-2($exclude-spacing: true); | ||
| } | ||
|
|
||
| :host(:is([level='3']:not([visual-level]), [visual-level='3'])) & { | ||
| @include sbb.title-3($exclude-spacing: true); | ||
| } | ||
|
|
||
| :host(:is([level='4']:not([visual-level]), [visual-level='4'])) & { | ||
| @include sbb.title-4($exclude-spacing: true); | ||
| } | ||
|
|
||
| :host(:is([level='5']:not([visual-level]), [visual-level='5'])) & { | ||
| @include sbb.title-5($exclude-spacing: true); | ||
| } | ||
|
|
||
| :host(:is([level='6']:not([visual-level]), [visual-level='6'])) & { | ||
| @include sbb.title-6($exclude-spacing: true); | ||
| } | ||
| } |
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
Oops, something went wrong.