fix(checkbox-group): use lowercase values for orientation attribute

fix(radio-group): use lowercase values for orientation attribute
statistikZH · Jul 16, 2024 · da68c5e · da68c5e
1 parent 78eb332
commit da68c5e
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 10 deletions.
diff --git a/src/components/checkbox/CheckboxGroup.js b/src/components/checkbox/CheckboxGroup.js
@@ -19,7 +19,8 @@ export class LeuCheckboxGroup extends LeuElement {
 
   constructor() {
     super()
-    this.orientation = "HORIZONTAL"
+    /** @type {"horizontal" | "vertical"} */
+    this.orientation = "horizontal"
     this.items = []
   }
 
@@ -38,7 +39,7 @@ export class LeuCheckboxGroup extends LeuElement {
   render() {
     const fieldsetClasses = {
       fieldset: "true",
-      "fieldset--vertical": this.orientation === "VERTICAL",
+      "fieldset--vertical": this.orientation === "vertical",
     }
 
     return html`

diff --git a/src/components/checkbox/stories/checkbox-group.stories.js b/src/components/checkbox/stories/checkbox-group.stories.js
@@ -9,7 +9,7 @@ export default {
   argTypes: {
     legend: { control: "text" },
     orientation: {
-      options: ["VERTICAL", "HORIZONTAL"],
+      options: ["vertical", "horizontal"],
       control: { type: "checkbox" },
     },
   },
@@ -49,11 +49,11 @@ HorizontalLabel.args = {
 
 export const Vertical = Template.bind({})
 Vertical.args = {
-  orientation: "VERTICAL",
+  orientation: "vertical",
 }
 
 export const VerticalLabel = Template.bind({})
 VerticalLabel.args = {
-  orientation: "VERTICAL",
+  orientation: "vertical",
   label: "Anrede",
 }
diff --git a/src/components/radio/RadioGroup.js b/src/components/radio/RadioGroup.js
@@ -19,7 +19,8 @@ export class LeuRadioGroup extends LeuElement {
 
   constructor() {
     super()
-    this.orientation = "HORIZONTAL"
+    /** @type {"horizontal" | "vertical"} */
+    this.orientation = "horizontal"
     this._currentIndex = 0
     this.items = []
   }
@@ -154,7 +155,7 @@ export class LeuRadioGroup extends LeuElement {
   render() {
     const fieldsetClasses = {
       fieldset: "true",
-      "fieldset--vertical": this.orientation === "VERTICAL",
+      "fieldset--vertical": this.orientation === "vertical",
     }
 
     return html`

diff --git a/src/components/radio/stories/radio-group.stories.js b/src/components/radio/stories/radio-group.stories.js
@@ -9,7 +9,7 @@ export default {
   argTypes: {
     label: { control: "text" },
     orientation: {
-      options: ["VERTICAL", "HORIZONTAL"],
+      options: ["vertical", "horizontal"],
       control: { type: "radio" },
     },
   },
@@ -44,11 +44,11 @@ HorizontalLabel.args = {
 
 export const Vertical = Template.bind({})
 Vertical.args = {
-  orientation: "VERTICAL",
+  orientation: "vertical",
 }
 
 export const VerticalLabel = Template.bind({})
 VerticalLabel.args = {
-  orientation: "VERTICAL",
+  orientation: "vertical",
   label: "Anrede",
 }