From f1019c950a6c5232b1518886714d3ed05e3569d6 Mon Sep 17 00:00:00 2001
From: druid <druid@druids-MBP-2.lan>
Date: Fri, 15 Jan 2021 12:48:23 +0200
Subject: [PATCH] checked property for hy-checkbox
---
src/components.d.ts | 8 ++++++++
src/components/hy-checkbox/hy-checkbox.tsx | 6 ++++++
src/components/hy-checkbox/readme.md | 13 +++++++------
src/index.html | 18 ++++++++++++++++--
4 files changed, 37 insertions(+), 8 deletions(-)
diff --git a/src/components.d.ts b/src/components.d.ts
index a4f09efe..3e9e50d2 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 53ab8374..fe53d3bd 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 68265a21..d42a5bad 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 6193d4b4..6003be80 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
--
GitLab