From 8cc0e2d0bff0f1fcce4e1daf72acb7a5f0569cc5 Mon Sep 17 00:00:00 2001
From: Mustafa UZUN <mustafauzun0@gmail.com>
Date: Sat, 23 Dec 2023 14:56:04 +0300
Subject: [PATCH] feat(switch): add bl-switch label

https://github.com/Trendyol/baklava/issues/747
---
 src/components/switch/bl-switch.css         | 27 +++++++++++++++++++++
 src/components/switch/bl-switch.stories.mdx |  7 +-----
 src/components/switch/bl-switch.test.ts     |  7 +++++-
 src/components/switch/bl-switch.ts          | 24 +++++++++---------
 4 files changed, 47 insertions(+), 18 deletions(-)

diff --git a/src/components/switch/bl-switch.css b/src/components/switch/bl-switch.css
index 4f3464cb..8d821082 100644
--- a/src/components/switch/bl-switch.css
+++ b/src/components/switch/bl-switch.css
@@ -1,6 +1,7 @@
 :host {
   display: inline-block;
   cursor: pointer;
+  vertical-align: middle;
 }
 
 span {
@@ -40,6 +41,32 @@ span {
   width: var(--thumb-width);
 }
 
+label {
+  display: flex;
+  gap: var(--bl-size-2xs);
+  color: var(--bl-color-neutral-darker);
+  font: var(--bl-font-title-3);
+  cursor: pointer;
+  user-select: none;
+  line-height: normal;
+  align-items: center;
+  margin-block: 0;
+}
+
+.label {
+  overflow-wrap: anywhere;
+}
+
+:host([disabled]) .label {
+  color: var(--bl-color-neutral-light);
+  border: 1px solid var(--bl-color-neutral-lighter);
+}
+
+:host([checked]) .label,
+:host(:hover) .label {
+  color: var(--bl-color-primary);
+}
+
 :host([checked]) .switch {
   --switch-color: var(--bl-switch-color-on, var(--bl-switch-color, var(--bl-color-primary)));
 }
diff --git a/src/components/switch/bl-switch.stories.mdx b/src/components/switch/bl-switch.stories.mdx
index bc984b17..1cc5bacf 100644
--- a/src/components/switch/bl-switch.stories.mdx
+++ b/src/components/switch/bl-switch.stories.mdx
@@ -26,14 +26,11 @@ export const SwitchTemplate = (args) => html`
 `;
 
 export const SwitchWithLabel = (args) => html`
-<div style="display: flex;align-items: center;gap: var(--bl-size-2xs)">
-  <label style="font: var(--bl-font-title-3);color: var(--bl-color-neutral-dark)">${args.label}</label>
   <bl-switch
     ?disabled=${args.disabled}
     ?checked=${args.checked}
     aria-label="${args.label}"
-  ></bl-switch>
-</div>
+  >${args.label}</bl-switch>
 `;
 
 export const SwitchStyled = args => html`
@@ -75,8 +72,6 @@ Switch is _Off_ by default.
 
 Switch with label.
 
-<bl-alert variant="warning" icon>Inline styles in this example are only for **demo purposes**. Use regular CSS classes or tag selectors to set styles.</bl-alert>
-
 <Canvas>
   <Story name="Switch with label" args={{ label: "Label for Switch" }}>
     {SwitchWithLabel.bind({})}
diff --git a/src/components/switch/bl-switch.test.ts b/src/components/switch/bl-switch.test.ts
index 74557798..7c566876 100644
--- a/src/components/switch/bl-switch.test.ts
+++ b/src/components/switch/bl-switch.test.ts
@@ -15,13 +15,18 @@ describe("bl-switch", () => {
     assert.shadowDom.equal(
       el,
       `
+      <label>
+        <slot class="label">
+        </slot>
         <span
           aria-checked="false"
           aria-readonly="false"
           class="switch"
           role="switch"
           tabindex="0"
-        ></span>
+        >
+        </span>
+      </label>
       `
     );
   });
diff --git a/src/components/switch/bl-switch.ts b/src/components/switch/bl-switch.ts
index 8e624f0a..c58705a1 100644
--- a/src/components/switch/bl-switch.ts
+++ b/src/components/switch/bl-switch.ts
@@ -56,17 +56,19 @@ export default class BlSwitch extends LitElement {
       this.ariaLabel ?? this.attributes.getNamedItem("aria-label")?.value ?? undefined;
 
     return html`
-      <span
-        class="switch"
-        role="switch"
-        aria-checked=${this.checked}
-        aria-readonly=${!!this.disabled}
-        @click=${this.toggle}
-        @keydown=${this.handleKeyDown}
-        aria-label=${ifDefined(ariaLabel)}
-        tabindex="0"
-      >
-      </span>
+      <label @click=${this.toggle}>
+        <slot class="label"></slot>
+        <span
+          class="switch"
+          role="switch"
+          aria-checked=${this.checked}
+          aria-readonly=${!!this.disabled}
+          @keydown=${this.handleKeyDown}
+          aria-label=${ifDefined(ariaLabel)}
+          tabindex="0"
+        >
+        </span>
+      </label>
     `;
   }
 }