perf(Divider): improve code readability and performance (#1159)

Endava · Jul 23, 2024 · 5ab2149 · 5ab2149
1 parent a7852b1
commit 5ab2149
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 54 deletions.
diff --git a/packages/beeq/src/components/divider/_storybook/bq-divider.stories.tsx b/packages/beeq/src/components/divider/_storybook/bq-divider.stories.tsx
@@ -1,5 +1,7 @@
 import type { Args, Meta, StoryObj } from '@storybook/web-components';
-import { html } from 'lit-html';
+import { classMap } from 'lit/directives/class-map.js';
+import { html, nothing } from 'lit-html';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
 
 import mdx from './bq-divider.mdx';
 import { DIVIDER_ORIENTATION, DIVIDER_STROKE_LINECAP, DIVIDER_TITLE_ALIGNMENT } from '../bq-divider.types';
@@ -43,25 +45,24 @@ export default meta;
 type Story = StoryObj;
 
 const Template = (args: Args) => html`
-  <style>
-    .container {
-      /* width: 40%; */
-      height: ${args.orientation === 'vertical' ? html`70vh` : 'auto'};
-    }
-  </style>
-  <div class="container">
+  <div
+    class=${classMap({
+      'bs-[70dvh]': args.orientation === 'vertical',
+      'is-[70dvw]': args.orientation === 'horizontal',
+    })}
+  >
     <bq-divider
-      orientation=${args.orientation}
+      orientation=${ifDefined(args.orientation)}
       ?dashed=${args.dashed}
-      stroke-color=${args['stroke-color']}
-      stroke-dash-width=${args['stroke-dash-width']}
-      stroke-dash-gap=${args['stroke-dash-gap']}
-      stroke-thickness=${args['stroke-thickness']}
-      stroke-basis=${args['stroke-basis']}
-      stroke-linecap=${args['stroke-linecap']}
-      title-alignment=${args['title-alignment']}
+      stroke-color=${ifDefined(args['stroke-color'])}
+      stroke-dash-width=${ifDefined(args['stroke-dash-width'])}
+      stroke-dash-gap=${ifDefined(args['stroke-dash-gap'])}
+      stroke-thickness=${ifDefined(args['stroke-thickness'])}
+      stroke-basis=${ifDefined(args['stroke-basis'])}
+      stroke-linecap=${ifDefined(args['stroke-linecap'])}
+      title-alignment=${ifDefined(args['title-alignment'])}
     >
-      ${args['title-text'] ? html`<p style="margin: 0; white-space: nowrap;">${args['title-text']}</p>` : null}
+      ${args['title-text'] ? html`<p class="m-0 text-nowrap p-0">${args['title-text']}</p>` : nothing}
     </bq-divider>
   </div>
 `;

diff --git a/packages/beeq/src/components/divider/bq-divider.tsx b/packages/beeq/src/components/divider/bq-divider.tsx
@@ -11,15 +11,6 @@ import {
 } from './bq-divider.types';
 import { getColorCSSVariable, getTextContent, hasSlotContent, validatePropValue } from '../../shared/utils';
 
-const strokeDrawPositions = {
-  HORIZONTAL: (drawOffset: number) => {
-    return { x1: drawOffset, x2: '100%', y1: drawOffset, y2: drawOffset };
-  },
-  VERTICAL: (drawOffset: number) => {
-    return { x1: drawOffset, x2: drawOffset, y1: drawOffset, y2: '100%' };
-  },
-};
-
 /**
  * @part base - The component's internal wrapper.
  * @part dash-start - The component's internal svg wrapper for the start line of the divider's stroke
@@ -99,7 +90,7 @@ export class BqDivider {
   // Ordered by their natural call order
   // =====================================
 
-  componentWillLoad() {
+  connectedCallback() {
     this.checkPropValues();
   }
 
@@ -122,33 +113,33 @@ export class BqDivider {
   // These methods cannot be called from the host element.
   // =======================================================
 
-  private getStrokeDrawPositions = () => {
-    switch (this.orientation) {
-      case DIVIDER_ORIENTATION_ENUM.HORIZONTAL:
-        return strokeDrawPositions.HORIZONTAL(this.strokeThickness / 2);
-      case DIVIDER_ORIENTATION_ENUM.VERTICAL:
-        return strokeDrawPositions.VERTICAL(this.strokeThickness / 2);
-      default:
-        break;
-    }
-  };
-
-  private getStrokeDasharray = () => {
-    return `${this.strokeDashWidth}, ${this.strokeDashGap}`;
+  private handleSlotChange = () => {
+    this.hasTitle = hasSlotContent(this.titleElem) || !!getTextContent(this.titleElem.querySelector('slot'));
   };
 
-  private getStrokeAttributes = () => {
+  private get strokeAttributes() {
     return {
-      ...this.getStrokeDrawPositions(),
-      ...(this.dashed && { 'stroke-dasharray': this.getStrokeDasharray() }),
+      ...this.strokeDrawPositions,
+      ...(this.dashed && { 'stroke-dasharray': this.strokeDasharray }),
       'stroke-linecap': this.strokeLinecap,
       'stroke-width': this.strokeThickness,
     };
-  };
+  }
 
-  private handleSlotChange = () => {
-    this.hasTitle = hasSlotContent(this.titleElem) || !!getTextContent(this.titleElem.querySelector('slot'));
-  };
+  private get strokeDrawPositions() {
+    const drawOffset = this.strokeThickness / 2;
+    const strokeDrawPositions = {
+      [DIVIDER_ORIENTATION_ENUM.HORIZONTAL]: { x1: drawOffset, x2: '100%', y1: drawOffset, y2: drawOffset },
+      [DIVIDER_ORIENTATION_ENUM.VERTICAL]: { x1: drawOffset, x2: drawOffset, y1: drawOffset, y2: '100%' },
+    };
+    const orientationMap = new Map(Object.entries(strokeDrawPositions));
+
+    return orientationMap.get(this.orientation);
+  }
+
+  private get strokeDasharray() {
+    return `${this.strokeDashWidth}, ${this.strokeDashGap}`;
+  }
 
   // render() function
   // Always the last one in the class.
@@ -161,8 +152,6 @@ export class BqDivider {
       ...(this.strokeBasis && { '--bq-divider--stroke-basis': `${this.strokeBasis}px` }),
     };
 
-    const strokeAttributes = this.getStrokeAttributes();
-
     return (
       <Host style={styles}>
         <div
@@ -178,11 +167,11 @@ export class BqDivider {
           aria-orientation={this.orientation}
         >
           <svg class="bq-divider--stroke start" part="dash-start">
-            <line {...strokeAttributes} part="dash-start-line" />
+            <line {...this.strokeAttributes} part="dash-start-line" />
           </svg>
           <slot onSlotchange={this.handleSlotChange} />
           <svg class={{ 'bq-divider--stroke end': true, '!hidden': !this.hasTitle }} part="dash-end">
-            <line {...strokeAttributes} part="dash-end-line" />
+            <line {...this.strokeAttributes} part="dash-end-line" />
           </svg>
         </div>
       </Host>

diff --git a/packages/beeq/src/components/divider/scss/bq-divider.scss b/packages/beeq/src/components/divider/scss/bq-divider.scss
@@ -4,12 +4,20 @@
 
 @import './bq-divider.variables';
 
+:host {
+  @apply flex is-full;
+}
+
+:host([orientation='vertical']) {
+  @apply bs-full;
+}
+
 .bq-divider {
   @apply flex items-center gap-[var(--bq-divider--title-marginX)];
 }
 
 .bq-divider--stroke {
-  @apply h-[var(--bq-divider--stroke-thickness)] w-full flex-grow stroke-[color:var(--bq-divider--stroke-color)];
+  @apply flex-grow stroke-[color:var(--bq-divider--stroke-color)] bs-[var(--bq-divider--stroke-thickness)] is-full;
 
   &.end {
     @apply rotate-180;
@@ -22,9 +30,9 @@
 }
 
 .bq-divider--vertical {
-  @apply h-full flex-col items-center gap-[var(--bq-divider--title-marginX)];
+  @apply flex-col items-center gap-[var(--bq-divider--title-marginX)] is-full;
 
   .bq-divider--stroke {
-    @apply h-full w-[var(--bq-divider--stroke-thickness)];
+    @apply bs-full is-[var(--bq-divider--stroke-thickness)];
   }
 }