feat(Checkbox): [JELLY-8594] add label slot (#514)

Author: xalvarez

package-lock.json

@@ -7,7 +7,9 @@ exports[`should apply an error style if it is marked as invalid. 1`] = `
       <div class="b2b-checkbox-items">
         <input class="b2b-checkbox__input" type="checkbox">
         <b2b-input-label>
-          test
+          <slot name="label">
+            test
+          </slot>
         </b2b-input-label>
       </div>
       <span>
@@ -25,7 +27,9 @@ exports[`should disable the checkbox 1`] = `
       <div class="b2b-checkbox-items">
         <input class="b2b-checkbox__input" disabled="" type="checkbox">
         <b2b-input-label disabled="">
-          test
+          <slot name="label">
+            test
+          </slot>
         </b2b-input-label>
       </div>
     </div>
@@ -40,7 +44,9 @@ exports[`should render a hint if  invalid and disabled are true at the same time
       <div class="b2b-checkbox-items">
         <input class="b2b-checkbox__input" disabled="" type="checkbox">
         <b2b-input-label disabled="">
-          test
+          <slot name="label">
+            test
+          </slot>
         </b2b-input-label>
       </div>
       <span>
@@ -58,7 +64,9 @@ exports[`should render a hint message if a hint string is specified 1`] = `
       <div class="b2b-checkbox-items">
         <input class="b2b-checkbox__input" type="checkbox">
         <b2b-input-label>
-          test
+          <slot name="label">
+            test
+          </slot>
         </b2b-input-label>
       </div>
       <span>
@@ -76,7 +84,9 @@ exports[`should render an error message if an error is specified and it is marke
       <div class="b2b-checkbox-items">
         <input class="b2b-checkbox__input" type="checkbox">
         <b2b-input-label>
-          test
+          <slot name="label">
+            test
+          </slot>
         </b2b-input-label>
       </div>
       <span>
@@ -94,7 +104,9 @@ exports[`should render the checkbox 1`] = `
       <div class="b2b-checkbox-items">
         <input class="b2b-checkbox__input" type="checkbox">
         <b2b-input-label>
-          test
+          <slot name="label">
+            test
+          </slot>
         </b2b-input-label>
       </div>
     </div>

packages/core-components/src/components/checkbox/__snapshots__/checkbox.spec.tsx.snap

@@ -24,7 +24,7 @@ import * as CheckboxStories from './checkbox.stories';
 
 The label of the checkbox which appears on the right hand side next to it. This is the only
 required property. It is not the same as the checkbox value, which indicates its programmatical
-value.
+value. If you need custom content like bold text or a link, use the named slot label.
 
 ### Required
 
@@ -85,6 +85,14 @@ checkbox is currently checked.
   checked: boolean;
 }`
 
+## Slots
+
+### Label
+
+If you need the label to contain something other than plain text you may use the label slot like so:
+
+<Canvas of={CheckboxStories.story070LabelSlot} sourceState="shown" />
+
 ## Attributes
 
 <ArgsTable story={PRIMARY_STORY} />

packages/core-components/src/components/checkbox/checkbox.docs.mdx

@@ -44,4 +44,15 @@ describe('b2b-checkbox', () => {
 
     expect(element).toHaveClass('b2b-checkbox--checked');
   });
+
+  it('use label slot if provided', async () => {
+    const page = await newE2EPage();
+    await page.setContent(
+      '<b2b-checkbox><span slot="label">Custom label</span></b2b-checkbox>',
+    );
+
+    const element = await page.find('span');
+
+    expect(element).toEqualText('Custom label');
+  });
 });

packages/core-components/src/components/checkbox/checkbox.e2e.tsx

@@ -1,4 +1,4 @@
-import { Meta, Story } from '@storybook/web-components';
+import { Meta, Story, StoryObj } from '@storybook/web-components';
 import { html } from 'lit-html';
 import { getArgTypes } from '../../docs/config/utils';
 
@@ -82,6 +82,14 @@ story060Required.args = {
 };
 story060Required.storyName = 'Required';
 
+export const story070LabelSlot: StoryObj = {
+  args: {
+    ...defaultArgs,
+  },
+  render: ({}) =>
+    html`<b2b-checkbox><span slot="label">Label Slot</span></b2b-input>`,
+};
+
 const controls = {};
 const inputCheckboxArgs = getArgTypes('b2b-checkbox', controls);
 

packages/core-components/src/components/checkbox/checkbox.stories.tsx

@@ -168,7 +168,7 @@ export class CheckboxComponent {
                 id={this.name}
                 required={this.required}
                 disabled={this.disabled}>
-                {this.label}
+                <slot name="label">{this.label}</slot>
               </b2b-input-label>
             )}
           </div>

packages/core-components/src/components/checkbox/checkbox.tsx

@@ -321,6 +321,13 @@
         hint="I am a hint"></b2b-checkbox>
       <b2b-checkbox
         label="Checkbox with a very long label. Checkbox with a very long label. Checkbox with a very long label. Checkbox with a very long label."></b2b-checkbox>
+      <b2b-checkbox
+        ><span slot="label"
+          >This is a custom label
+          <b2b-icon-100
+            icon="b2b_icon-paper-plane"
+            size="24"></b2b-icon-100></span
+      ></b2b-checkbox>
     </div>
 
     <div class="content-container">