-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(checkbox): initial component generation and markup
- Loading branch information
1 parent
283a6d4
commit 6b3dbda
Showing
4 changed files
with
263 additions
and
0 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,33 @@ | ||
| # sage-checkbox | ||
|
|
||
|
|
||
|
|
||
| <!-- Auto Generated Below --> | ||
|
|
||
|
|
||
| ## Properties | ||
|
|
||
| | Property | Attribute | Description | Type | Default | | ||
| | --------------- | --------------- | -------------------------------------------------------- | --------- | ----------- | | ||
| | `checked` | `checked` | Whether or not the checkbox is checked. | `boolean` | `undefined` | | ||
| | `disabled` | `disabled` | Whether or not the checkbox is disabled. | `boolean` | `undefined` | | ||
| | `error` | `error` | Whether or not the checkbox is invalid. | `boolean` | `undefined` | | ||
| | `id` | `id` | String used for checkbox ID and label `for` attribute. | `string` | `undefined` | | ||
| | `indeterminate` | `indeterminate` | Whether or not the checkbox is indeterminate. | `boolean` | `undefined` | | ||
| | `label` | `label` | String used for label next to checkbox | `string` | `undefined` | | ||
| | `message` | `message` | String used for message below checkbox | `string` | `undefined` | | ||
| | `name` | `name` | String used for checkbox `name` attribute. | `string` | `undefined` | | ||
| | `required` | `required` | Whether or not the checkbox is required. | `boolean` | `undefined` | | ||
| | `value` | `value` | The value of the checkbox that is submitted with a form. | `string` | `undefined` | | ||
|
|
||
|
|
||
| ## Events | ||
|
|
||
| | Event | Description | Type | | ||
| | ---------------- | ----------- | ---------------------- | | ||
| | `checkedChanged` | | `CustomEvent<boolean>` | | ||
|
|
||
|
|
||
| ---------------------------------------------- | ||
|
|
||
|
|
121 changes: 121 additions & 0 deletions
121
libs/core/src/components/sage-checkbox/sage-checkbox.tsx
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,121 @@ | ||
| import { Component, h, Prop, State, Event, EventEmitter, Host } from '@stencil/core'; | ||
|
|
||
| @Component({ | ||
| tag: 'sage-checkbox', | ||
| styleUrl: 'sage-checkbox.scss', | ||
| shadow: true, | ||
| }) | ||
| export class SageCheckbox { | ||
| /** | ||
| * Whether or not the checkbox is checked. | ||
| * @defaultValue false | ||
| */ | ||
| @Prop() checked: boolean; | ||
|
|
||
| /** | ||
| * Whether or not the checkbox is disabled. | ||
| * @defaultValue false | ||
| */ | ||
| @Prop() disabled: boolean; | ||
|
|
||
| /** | ||
| * Whether or not the checkbox is invalid. | ||
| * @defaultValue false | ||
| */ | ||
| @Prop() error: boolean; | ||
|
|
||
| /** | ||
| * String used for checkbox ID and label `for` attribute. | ||
| */ | ||
| @Prop() id: string; | ||
|
|
||
| /** | ||
| * String used for label next to checkbox | ||
| */ | ||
| @Prop() label: string; | ||
|
|
||
| /** | ||
| * String used for message below checkbox | ||
| */ | ||
| @Prop() message: string; | ||
|
|
||
| /** | ||
| * String used for checkbox `name` attribute. | ||
| */ | ||
| @Prop() name: string; | ||
|
|
||
| /** | ||
| * Whether or not the checkbox is indeterminate. | ||
| * @defaultValue false | ||
| */ | ||
| @Prop() indeterminate: boolean; | ||
|
|
||
| /** | ||
| * Whether or not the checkbox is required. | ||
| * @defaultValue false | ||
| */ | ||
| @Prop() required: boolean; | ||
|
|
||
| /** | ||
| * The value of the checkbox that is submitted with a form. | ||
| */ | ||
| @Prop() value: string; | ||
|
|
||
| @State() checkboxState: 'checked' | 'indeterminate' | 'unchecked' = 'unchecked'; | ||
|
|
||
| @Event() checkedChanged: EventEmitter<boolean>; | ||
|
|
||
| private handleCheckboxChange(event: Event) { | ||
| if (this.disabled) { | ||
| return; | ||
| } | ||
|
|
||
| const target = event.target as HTMLInputElement; | ||
| const isChecked = target.checked; | ||
|
|
||
| this.checkedChanged.emit(isChecked); | ||
| } | ||
|
|
||
| private classNames() { | ||
| let className = `sage-checkbox`; | ||
|
|
||
| if (this.error) { | ||
| const errorClassName = 'sage-checkbox--error'; | ||
| className += ' ' + errorClassName; | ||
| } | ||
|
|
||
| if (this.indeterminate) { | ||
| const indeterminateClassName = 'sage-checkbox--indeterminate'; | ||
| className += ' ' + indeterminateClassName; | ||
| } | ||
|
|
||
| return className; | ||
| } | ||
|
|
||
| render() { | ||
| let message; | ||
|
|
||
| if (this.message) { | ||
| message = <div class={'sage-checkbox__message'}>{this.message}</div>; | ||
| } | ||
|
|
||
| return ( | ||
| <Host> | ||
| <div class={this.classNames()}> | ||
| <input | ||
| type="checkbox" | ||
| id={this.id} | ||
| name={this.name} | ||
| value={this.value} | ||
| checked={this.checked} | ||
| onChange={(event) => this.handleCheckboxChange(event)} | ||
| required={this.required} | ||
| disabled={this.disabled} | ||
| /> | ||
| <label htmlFor={this.id}>{this.label}</label> | ||
| {message} | ||
| </div> | ||
| </Host> | ||
| ); | ||
| } | ||
| } |
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