refactor(Switch): change prop name for consistency

Endava · Jul 3, 2024 · 56ef001 · 56ef001
1 parent 29feb15
commit 56ef001
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 46 deletions.
diff --git a/packages/beeq/src/components.d.ts b/packages/beeq/src/components.d.ts
@@ -29,7 +29,7 @@ import { TSpinnerSize, TSpinnerTextPosition } from "./components/spinner/bq-spin
 import { TStatusType } from "./components/status/bq-status.types";
 import { TStepsSize, TStepsType } from "./components/steps/bq-steps.types";
 import { TStepItemStatus } from "./components/step-item/bq-step-item.types";
-import { TSwitchInnerLabel, TSwitchJustifyContent, TSwitchWritingMode } from "./components/switch/bq-switch.types";
+import { TSwitchInnerLabel, TSwitchJustifyContent, TSwitchOrientation } from "./components/switch/bq-switch.types";
 import { TTabSize } from "./components/tab/bq-tab.types";
 import { TTagBorderRadius, TTagColor, TTagSize, TTagVariant } from "./components/tag/bq-tag.types";
 import { TTextareaAutoCapitalize, TTextareaWrap } from "./components/textarea/bq-textarea.types";
@@ -58,7 +58,7 @@ export { TSpinnerSize, TSpinnerTextPosition } from "./components/spinner/bq-spin
 export { TStatusType } from "./components/status/bq-status.types";
 export { TStepsSize, TStepsType } from "./components/steps/bq-steps.types";
 export { TStepItemStatus } from "./components/step-item/bq-step-item.types";
-export { TSwitchInnerLabel, TSwitchJustifyContent, TSwitchWritingMode } from "./components/switch/bq-switch.types";
+export { TSwitchInnerLabel, TSwitchJustifyContent, TSwitchOrientation } from "./components/switch/bq-switch.types";
 export { TTabSize } from "./components/tab/bq-tab.types";
 export { TTagBorderRadius, TTagColor, TTagSize, TTagVariant } from "./components/tag/bq-tag.types";
 export { TTextareaAutoCapitalize, TTextareaWrap } from "./components/textarea/bq-textarea.types";
@@ -1183,6 +1183,10 @@ export namespace Components {
           * Name of the form control. Submitted with the form as part of a name/value pair
          */
         "name": string;
+        /**
+          * This prop defines the CSS support orientation layout direction of the switch component.
+         */
+        "orientation"?: TSwitchOrientation;
         /**
           * If `true`, it will indicate that the user must switch `ON` the element before the owning form can be submitted
          */
@@ -1207,10 +1211,6 @@ export namespace Components {
           * The input control's value, submitted as a name/value pair with form data.
          */
         "value"?: string;
-        /**
-          * Defines the writing mode of the switch.  This prop determines the orientation in which the switch and its label are displayed. It can be set to either 'horizontal' or 'vertical'.  - 'horizontal': The switch and its label are displayed in a horizontal layout. - 'vertical': The switch and its label are displayed in a vertical layout.  Default is 'horizontal'.
-         */
-        "writingMode"?: TSwitchWritingMode;
     }
     interface BqTab {
         /**
@@ -3586,6 +3586,10 @@ declare namespace LocalJSX {
           * Handler to be called when the switch gets focus
          */
         "onBqFocus"?: (event: BqSwitchCustomEvent<HTMLBqSwitchElement>) => void;
+        /**
+          * This prop defines the CSS support orientation layout direction of the switch component.
+         */
+        "orientation"?: TSwitchOrientation;
         /**
           * If `true`, it will indicate that the user must switch `ON` the element before the owning form can be submitted
          */
@@ -3598,10 +3602,6 @@ declare namespace LocalJSX {
           * The input control's value, submitted as a name/value pair with form data.
          */
         "value"?: string;
-        /**
-          * Defines the writing mode of the switch.  This prop determines the orientation in which the switch and its label are displayed. It can be set to either 'horizontal' or 'vertical'.  - 'horizontal': The switch and its label are displayed in a horizontal layout. - 'vertical': The switch and its label are displayed in a vertical layout.  Default is 'horizontal'.
-         */
-        "writingMode"?: TSwitchWritingMode;
     }
     interface BqTab {
         /**

diff --git a/packages/beeq/src/components/switch/_storybook/bq-switch.stories.tsx b/packages/beeq/src/components/switch/_storybook/bq-switch.stories.tsx
@@ -2,7 +2,7 @@ import type { Args, Meta, StoryObj } from '@storybook/web-components';
 import { html } from 'lit-html';
 
 import mdx from './bq-switch.mdx';
-import { SWITCH_INNER_LABEL, SWITCH_JUSTIFY_CONTENT, SWITCH_WRITING_MODE } from '../bq-switch.types';
+import { SWITCH_INNER_LABEL, SWITCH_JUSTIFY_CONTENT, SWITCH_ORIENTATION_MODE } from '../bq-switch.types';
 
 const meta: Meta = {
   title: 'Components/Switch',
@@ -19,7 +19,7 @@ const meta: Meta = {
     'full-width': { control: 'boolean' },
     'inner-label': { control: 'inline-radio', options: [...SWITCH_INNER_LABEL] },
     'justify-content': { control: 'select', options: [...SWITCH_JUSTIFY_CONTENT] },
-    'writing-mode': { control: 'select', options: [...SWITCH_WRITING_MODE] },
+    orientation: { control: 'select', options: [...SWITCH_ORIENTATION_MODE] },
     name: { control: 'text' },
     required: { control: 'boolean' },
     'reverse-order': { control: 'boolean' },
@@ -38,7 +38,7 @@ const meta: Meta = {
     'full-width': false,
     'inner-label': 'default',
     'justify-content': 'start',
-    'writing-mode': 'horizontal',
+    orientation: 'horizontal',
     name: 'bq-switch',
     required: false,
     'reverse-order': false,
@@ -59,7 +59,7 @@ const Template = (args: Args) => html`
     ?full-width=${args['full-width']}
     inner-label=${args['inner-label']}
     justify-content=${args['justify-content']}
-    writing-mode=${args['writing-mode']}
+    orientation=${args.orientation}
     name=${args.name}
     ?required=${args.required}
     ?reverse-order=${args['reverse-order']}
@@ -74,9 +74,6 @@ const Template = (args: Args) => html`
 
 export const Default: Story = {
   render: Template,
-  args: {
-    'writing-mode': 'vertical',
-  },
 };
 
 export const Checked: Story = {

diff --git a/packages/beeq/src/components/switch/bq-switch.tsx b/packages/beeq/src/components/switch/bq-switch.tsx
@@ -1,6 +1,6 @@
 import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State } from '@stencil/core';
 
-import { TSwitchInnerLabel, TSwitchJustifyContent, TSwitchWritingMode } from './bq-switch.types';
+import { TSwitchInnerLabel, TSwitchJustifyContent, TSwitchOrientation } from './bq-switch.types';
 import { getTextContent, isNil } from '../../shared/utils';
 
 /**
@@ -76,18 +76,8 @@ export class BqSwitch {
   /** The input control's value, submitted as a name/value pair with form data. */
   @Prop({ reflect: true }) value?: string;
 
-  /**
-   * Defines the writing mode of the switch.
-   *
-   * This prop determines the orientation in which the switch and its label are displayed.
-   * It can be set to either 'horizontal' or 'vertical'.
-   *
-   * - 'horizontal': The switch and its label are displayed in a horizontal layout.
-   * - 'vertical': The switch and its label are displayed in a vertical layout.
-   *
-   * Default is 'horizontal'.
-   */
-  @Prop({ reflect: true }) writingMode?: TSwitchWritingMode = 'horizontal';
+  /** This prop defines the CSS support orientation layout direction of the switch component. */
+  @Prop({ reflect: true }) orientation?: TSwitchOrientation = 'horizontal';
 
   // Prop lifecycle events
   // =======================
@@ -197,7 +187,7 @@ export class BqSwitch {
 
   render() {
     const transformValue =
-      this.writingMode === 'vertical'
+      this.orientation === 'vertical'
         ? 'translateY(calc(var(--bq-switch--width) - var(--bq-switch--dot-size) - 8px))'
         : 'translateX(calc(var(--bq-switch--width) - var(--bq-switch--dot-size) - 8px))';
 

diff --git a/packages/beeq/src/components/switch/bq-switch.types.ts b/packages/beeq/src/components/switch/bq-switch.types.ts
@@ -19,5 +19,5 @@ export const SWITCH_JUSTIFY_CONTENT = [
 ] as const;
 export type TSwitchJustifyContent = (typeof SWITCH_JUSTIFY_CONTENT)[number];
 
-export const SWITCH_WRITING_MODE = ['horizontal', 'vertical'] as const;
-export type TSwitchWritingMode = (typeof SWITCH_WRITING_MODE)[number];
+export const SWITCH_ORIENTATION_MODE = ['horizontal', 'vertical'] as const;
+export type TSwitchOrientation = (typeof SWITCH_ORIENTATION_MODE)[number];