diff --git a/src/components.d.ts b/src/components.d.ts index a4f09efe95e6a13ff5da3dcf778cef1da478a7aa..3e9e50d2304551703ff7fb07c5d515a32c147f92 100644 --- a/src/components.d.ts +++ b/src/components.d.ts @@ -221,6 +221,10 @@ export namespace Components { variant: ButtonVariants; } interface HyCheckbox { + /** + * Checked attribute + */ + checkboxChecked: boolean; /** * Unique id for checkbox element */ @@ -1500,6 +1504,10 @@ declare namespace LocalJSX { variant?: ButtonVariants; } interface HyCheckbox { + /** + * Checked attribute + */ + checkboxChecked?: boolean; /** * Unique id for checkbox element */ diff --git a/src/components/hy-checkbox/hy-checkbox.tsx b/src/components/hy-checkbox/hy-checkbox.tsx index 53ab8374cf5e6516a5905be0bc09c9f8c75b841f..fe53d3bdf85da866ce6c205320a49a6adbec5371 100644 --- a/src/components/hy-checkbox/hy-checkbox.tsx +++ b/src/components/hy-checkbox/hy-checkbox.tsx @@ -19,6 +19,10 @@ export class HyCheckbox { * Label for input to describe */ @Prop() checkboxLabel: string; + /** + * Checked attribute + */ + @Prop() checkboxChecked: boolean = false; /** * Variant to deifne what style of checkbox to use */ @@ -32,6 +36,7 @@ export class HyCheckbox { <input type="checkbox" class="hy-checkbox--button__checkbox" + checked={this.checkboxChecked} id={`${this.checkboxId}`} value={`${this.checkboxValue}`} /> @@ -50,6 +55,7 @@ export class HyCheckbox { <input type="checkbox" class="hy-checkbox__checkbox" + checked={this.checkboxChecked} id={`${this.checkboxId}`} value={`${this.checkboxValue}`} /> diff --git a/src/components/hy-checkbox/readme.md b/src/components/hy-checkbox/readme.md index 68265a213d83776c24ffe2d645a2568e43cc08ad..d42a5badc07adf844f2bd167c9c225245dfdca8f 100644 --- a/src/components/hy-checkbox/readme.md +++ b/src/components/hy-checkbox/readme.md @@ -4,12 +4,13 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| --------------- | ---------------- | ----------------------------------------------- | ----------------------------------------------------- | -------------------------- | -| `checkboxId` | `checkbox-id` | Unique id for checkbox element | `number \| string` | `undefined` | -| `checkboxLabel` | `checkbox-label` | Label for input to describe | `string` | `undefined` | -| `checkboxValue` | `checkbox-value` | Value for input element | `number \| string` | `undefined` | -| `variant` | `variant` | Variant to deifne what style of checkbox to use | `CheckboxVariants.button \| CheckboxVariants.default` | `CheckboxVariants.default` | +| Property | Attribute | Description | Type | Default | +| ----------------- | ------------------ | ----------------------------------------------- | ----------------------------------------------------- | -------------------------- | +| `checkboxChecked` | `checkbox-checked` | Checked attribute | `boolean` | `false` | +| `checkboxId` | `checkbox-id` | Unique id for checkbox element | `number \| string` | `undefined` | +| `checkboxLabel` | `checkbox-label` | Label for input to describe | `string` | `undefined` | +| `checkboxValue` | `checkbox-value` | Value for input element | `number \| string` | `undefined` | +| `variant` | `variant` | Variant to deifne what style of checkbox to use | `CheckboxVariants.button \| CheckboxVariants.default` | `CheckboxVariants.default` | ## Dependencies diff --git a/src/index.html b/src/index.html index 6193d4b4519bf6e7bcc7722a41744a5bb0232b18..6003be80acaebe2e9c5c61b96192dcf216e80bb0 100644 --- a/src/index.html +++ b/src/index.html @@ -408,17 +408,29 @@ Do you want to shape the future world and understand how the universe is built u </hy-paragraph-text> <hy-box pt="2" pb="2" align="center"> - <hy-checkbox checkbox-id="1" checkbox-value="checkbox_1" checkbox-label="Introduction course"></hy-checkbox> - <hy-checkbox checkbox-id="2" checkbox-value="checkbox_2" checkbox-label="Open online course"></hy-checkbox> + <hy-checkbox + checkbox-id="1" + checkbox-value="checkbox_1" + checkbox-label="Introduction course" + checkbox-checked="true" + ></hy-checkbox> + <hy-checkbox + checkbox-id="2" + checkbox-value="checkbox_2" + checkbox-label="Open online course" + checkbox-checked="false" + ></hy-checkbox> <hy-checkbox checkbox-id="3" checkbox-value="checkbox_3" checkbox-label="Flexible start"></hy-checkbox> <hy-checkbox checkbox-id="4" + checkbox-checked="true" checkbox-value="checkbox_4" checkbox-label="Introduction course long text" ></hy-checkbox> <hy-checkbox checkbox-id="5" checkbox-value="checkbox_5" + checkbox-checked="true" checkbox-label="Open online course very long text" ></hy-checkbox> <hy-checkbox @@ -432,12 +444,14 @@ Do you want to shape the future world and understand how the universe is built u variant="button" checkbox-id="3" checkbox-value="checkbox_3" + checkbox-checked="true" checkbox-label="Web pages (204)" ></hy-checkbox> <hy-checkbox variant="button" checkbox-id="4" checkbox-value="checkbox_4" + checkbox-checked="false" checkbox-label="People (89)" ></hy-checkbox> <hy-checkbox