Leany labs/storybook 2a (#4)

* fix/fix-coments

* minor changes

Co-authored-by: Kandio16 <kandio1604@gmail.com>

src/components/Checkbox/__stories__/checkbox.stories.mdx

@@ -41,9 +41,9 @@ Checkboxes allow users to select one or more items from a set of options.
 
 ## Usage
 <UsageGuidelines guidelines={[
-  <span class="monday-style-story-checkbox_list">Use checkboxes to:
-    <span class="monday-style-story-checkbox_list-item">1. Select one or more options from a list</span>
-    <span class="monday-style-story-checkbox_list-item">2. Turn an item on or off in a desktop environment</span>
+  <span className="monday-style-story-checkbox_list">Use checkboxes to:
+    <span className="monday-style-story-checkbox_list-item">1. Select one or more options from a list</span>
+    <span className="monday-style-story-checkbox_list-item">2. Turn an item on or off in a desktop environment</span>
   </span>,
   "Use checkboxes independently from each other: selecting one checkbox shouldn’t change the selection status of another checkbox in the list. The exception is when a checkbox is used to make a bulk selection.",
   "Ensure both label and input are clickable to select the checkbox field. ",
@@ -98,7 +98,7 @@ Has 4 states: regular, hover, selected, and disabled.
       negative: {
         component: [
           <div className="monday-style-story-checkbox_border">
-            <Checkbox componentClassName="monday-style-story-checkbox_minus-margin" checked />
+            <Checkbox className="monday-style-story-checkbox_minus-margin" checked />
           </div>,
           <div className="monday-style-story-checkbox_border">Option</div>
         ],
@@ -120,15 +120,15 @@ Has 4 states: regular, hover, selected, and disabled.
           <DialogContentContainer className="monday-style-story-checkbox_wrapper">
             <div className="monday-style-story-checkbox_inline-wrapper">
               <span>Item 1</span>
-              <Checkbox componentClassName="monday-style-story-checkbox_minus-margin" />
+              <Checkbox className="monday-style-story-checkbox_minus-margin" />
             </div>
             <div className="monday-style-story-checkbox_inline-wrapper">
               <span>Item 2</span>
-              <Checkbox componentClassName="monday-style-story-checkbox_minus-margin" checked />
+              <Checkbox className="monday-style-story-checkbox_minus-margin" checked />
             </div>
             <div className="monday-style-story-checkbox_inline-wrapper">
               <span>Item 3</span>
-              <Checkbox componentClassName="monday-style-story-checkbox_minus-margin" checked />
+              <Checkbox className="monday-style-story-checkbox_minus-margin" checked />
             </div>
           </DialogContentContainer>,
         description:"Don’t change the position of the checkbox. Keep it to the left side of the label."

src/components/Checkbox/__stories__/checkbox.stories.scss

@@ -5,7 +5,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    border: 1px dashed grey;
+    border: 1px dashed var(--ui-border-color);
     padding: 0 8px;
     height: 38px;
     margin-right: 3px;
@@ -36,7 +36,9 @@
 
   &_list {
     display: flexbox;
+    padding-top: 40px;
   }
+
   &_list-item {
     display: inline-block;
     width: 100%;

src/components/Checkbox/__tests__/__snapshots__/checkbox-snapshot-tests.jest.js.snap

@@ -160,6 +160,47 @@ exports[`Checkbox renders correctly when interminate 1`] = `
 </label>
 `;
 
+exports[`Checkbox renders correctly with ariaLabelledBy 1`] = `
+<label
+  className="monday-style-checkbox"
+  onMouseUp={[Function]}
+>
+  <input
+    aria-labelledby="aria"
+    className="monday-style-checkbox__input"
+    defaultChecked={false}
+    disabled={false}
+    name=""
+    onChange={[Function]}
+    type="checkbox"
+    value=""
+  />
+  <div
+    className="monday-style-checkbox__checkbox monday-style-checkbox__prevent-animation"
+  >
+    <svg
+      aria-hidden={true}
+      className="icon_component monday-style-checkbox__icon icon_component--no-focus-style"
+      fill="currentColor"
+      height="16"
+      onClick={[Function]}
+      viewBox="0 0 20 20"
+      width="16"
+    >
+      <path
+        clipRule="evenodd"
+        d="M8.53033 14.2478L8 13.7175L7.46967 14.2478C7.76256 14.5407 8.23744 14.5407 8.53033 14.2478ZM8 12.6569L4.53033 9.18718C4.23744 8.89429 3.76256 8.89429 3.46967 9.18718C3.17678 9.48008 3.17678 9.95495 3.46967 10.2478L7.46967 14.2478L8 13.7175L8.53033 14.2478L16.2478 6.53033C16.5407 6.23743 16.5407 5.76256 16.2478 5.46967C15.955 5.17677 15.4801 5.17677 15.1872 5.46967L8 12.6569Z"
+        fill="currentColor"
+        fillRule="evenodd"
+      />
+    </svg>
+  </div>
+  <span
+    className="monday-style-checkbox__label"
+  />
+</label>
+`;
+
 exports[`Checkbox renders correctly with empty props 1`] = `
 <label
   className="monday-style-checkbox"

src/components/Checkbox/__tests__/checkbox-snapshot-tests.jest.js

@@ -44,4 +44,9 @@ describe("Checkbox renders correctly", () => {
       const tree = renderer.create(<Checkbox indeterminate />).toJSON();
       expect(tree).toMatchSnapshot();
     });
+
+    it("with ariaLabelledBy", () => {
+      const tree = renderer.create(<Checkbox ariaLabelledBy="aria" />).toJSON();
+      expect(tree).toMatchSnapshot();
+    });
 });

src/components/Checkbox/__tests__/checkbox-tests.jest.js

@@ -1,6 +1,5 @@
 import React from "react";
 import { fireEvent, render, cleanup, screen } from "@testing-library/react";
-import { expect as sinonExpect } from "../../../test/test-helpers";
 import Checkbox from "../Checkbox";
 
 describe("Checkbox tests", () => {
@@ -14,14 +13,26 @@ describe("Checkbox tests", () => {
   const option3Value = "3";
   const option3Text = "Option 3";
 
-  let onChangedMock;
+  let onChangeMock1;
+  let onChangeMock2;
+  let onChangeMock3;
+
   beforeEach(() => {
-    onChangedMock = jest.fn();
+    onChangeMock1 = jest.fn();
+    onChangeMock2 = jest.fn();
+    onChangeMock3 = jest.fn();
+
     render(
       <form name={formName}>
-        <Checkbox name={checkboxName} value={option1Value} label={option1Text} defaultChecked={true} />
-        <Checkbox name={checkboxName} value={option2Value} label={option2Text} onChange={onChangedMock} />
-        <Checkbox name={checkboxName} value={option3Value} label={option3Text} />
+        <Checkbox
+          name={checkboxName}
+          value={option1Value}
+          label={option1Text}
+          defaultChecked={true}
+          onChange={onChangeMock1}
+        />
+        <Checkbox name={checkboxName} value={option2Value} label={option2Text} onChange={onChangeMock2} />
+        <Checkbox name={checkboxName} value={option3Value} label={option3Text} onChange={onChangeMock3} />
       </form>
     );
   });
@@ -59,20 +70,29 @@ describe("Checkbox tests", () => {
     expect(option3.checked).toBeFalsy();
   });
 
-  it("should call the onchange callback when clicked", () => {
+  it("should call the onChange callback when clicked", () => {
+    const option1 = screen.getByLabelText(option1Text);
     const option2 = screen.getByLabelText(option2Text);
+    fireEvent.click(option1);
     fireEvent.click(option2);
-    expect(onChangedMock.mock.calls.length).toBe(1);
+    expect(onChangeMock1.mock.calls.length).toBe(1);
+    expect(onChangeMock2.mock.calls.length).toBe(1);
+    expect(onChangeMock3.mock.calls.length).toBe(0);
   });
 
   describe("a11y", () => {
     it("should add the label", () => {
       const ariaLabel = "Lable Name";
-      const { getByLabelText } = render(
-        <Checkbox label={ariaLabel} />
-      );
+      const { getByLabelText } = render(<Checkbox label={ariaLabel} />);
       const checkboxComponent = getByLabelText(ariaLabel);
-      sinonExpect(checkboxComponent).to.be.ok;
-    }); 
+      expect(checkboxComponent).toBeTruthy();
+    });
+
+    it("should be the same text", () => {
+      const ariaLabel = "Lable Name";
+      const { getByText } = render(<Checkbox label={ariaLabel} />);
+      const checkboxComponentText = getByText(ariaLabel);
+      expect(checkboxComponentText).toBeTruthy();
+    });
   });
 });

src/components/Label/__tests__/__snapshots__/label-snapshot-tests.jest.js.snap

@@ -166,26 +166,9 @@ exports[`Label renders correctly line with leg 1`] = `
 </span>
 `;
 
-exports[`Label renders correctly line without animation 1`] = `
+exports[`Label renders correctly line with wrapperClassName 1`] = `
 <span
-  className=""
->
-  <div
-    className="monday-style-label monday-style-label--kind-fill monday-style-label--color-primary"
-  >
-    <span>
-      Test
-    </span>
-    <span
-      className="monday-style-label__leg-wrapper"
-    />
-  </div>
-</span>
-`;
-
-exports[`Label renders correctly with empty props 1`] = `
-<span
-  className=""
+  className="test"
 >
   <div
     className="monday-style-label monday-style-label--kind-fill monday-style-label--color-primary monday-style-label--with-animation"
@@ -200,15 +183,15 @@ exports[`Label renders correctly with empty props 1`] = `
 </span>
 `;
 
-exports[`Label renders correctly with x 1`] = `
+exports[`Label renders correctly line without animation 1`] = `
 <span
   className=""
 >
   <div
-    className="monday-style-label monday-style-label--kind-fill monday-style-label--color-primary monday-style-label--with-animation"
+    className="monday-style-label monday-style-label--kind-fill monday-style-label--color-primary"
   >
     <span>
-      
+      Test
     </span>
     <span
       className="monday-style-label__leg-wrapper"
@@ -217,7 +200,7 @@ exports[`Label renders correctly with x 1`] = `
 </span>
 `;
 
-exports[`Label renders correctly with y 1`] = `
+exports[`Label renders correctly with empty props 1`] = `
 <span
   className=""
 >

src/components/Label/__tests__/label-snapshot-tests.jest.js

@@ -72,5 +72,10 @@ describe("Label renders correctly", () => {
       const tree = renderer.create(<Label text={"Test"} isLegIncluded />).toJSON();
       expect(tree).toMatchSnapshot();
     });
+
+    it("with wrapperClassName", () => {
+      const tree = renderer.create(<Label wrapperClassName="test" />).toJSON();
+      expect(tree).toMatchSnapshot();
+    });
   });
 });

src/components/RadioButton/__stories__/radioButton.stories.mdx

@@ -67,36 +67,36 @@ Radio buttons have 3 states: regular, selected, and disabled.
       positive: {
         component:
           <DialogContentContainer className="monday-style-radio-buttons_wrapper">
-            <RadioButton text="Item 1" />
-            <RadioButton text="Item 2" checked />
+            <RadioButton text="Item 1" name="Item 1" />
+            <RadioButton text="Item 2" name="Item 2" checked />
           </DialogContentContainer>,
         description:"Use radio buttons when only one item can be selected from a list."
       },
       negative: {
         component:
           <DialogContentContainer className="monday-style-radio-buttons_wrapper">
-            <RadioButton text="Item 1" checked />
-            <RadioButton text="Item 2" checked />
+            <RadioButton text="Item 1" name="Item 2" checked />
+            <RadioButton text="Item 2" name="Item 1" checked />
           </DialogContentContainer>,
-        description:<>Don't use <Link href="/?path=/docs/components-checkbox--overview" withoutSpacing>checkboxes</Link> when only one item can be selected from a list. Use radio buttons instead.</>
+        description:<>Don't use radio buttons when only one item can be selected from a list. Use <Link href="/?path=/docs/components-checkbox--overview" withoutSpacing>checkbox</Link> instead.</>
       }
     },
     {
       positive: {
         component:
         <DialogContentContainer className="monday-style-radio-buttons_wrapper">
-            <RadioButton text="Item 1" checked />
-            <RadioButton text="Item 2" />
-            <RadioButton text="Item 3" />
+            <RadioButton text="Item 1" name="Item 1" checked />
+            <RadioButton text="Item 2" name="Item 2" />
+            <RadioButton text="Item 3" name="Item 3" />
           </DialogContentContainer>,
         description:"Mark the first item as selected, and make sure it’s the most common or popular action."
       },
       negative: {
         component:     
         <DialogContentContainer className="monday-style-radio-buttons_wrapper">
-            <RadioButton text="Item 1" />
-            <RadioButton text="Item 2" />
-            <RadioButton text="Item 3" />
+            <RadioButton text="Item 1" name="Item 1" />
+            <RadioButton text="Item 2" name="Item 2" />
+            <RadioButton text="Item 3" name="Item 3" />
         </DialogContentContainer>,
         description:<>Don’t leave all radio buttons unselcted. If you can’t offer a smart default, consider using the <Link href="/?path=/docs/components-dropdown--overview" withoutSpacing>dropdown component.</Link></>
       }

src/components/RadioButton/__tests__/__snapshots__/radioButton-snapshot-tests.jest.js.snap

@@ -92,16 +92,16 @@ exports[`RadioButton renders correctly when unchecked 1`] = `
 </label>
 `;
 
-exports[`RadioButton renders correctly whend default checked 1`] = `
+exports[`RadioButton renders correctly with componentClassName 1`] = `
 <label
-  className="monday-style-radio-button-component"
+  className="monday-style-radio-button-component test-classname"
 >
   <span
     className="monday-style-radio-button-component__radio-input-container"
   >
     <input
       className="monday-style-radio-button-component__radio-input-container__radio-input"
-      defaultChecked={true}
+      defaultChecked={false}
       disabled={false}
       name=""
       type="radio"
@@ -149,7 +149,7 @@ exports[`RadioButton renders correctly with name 1`] = `
       className="monday-style-radio-button-component__radio-input-container__radio-input"
       defaultChecked={false}
       disabled={false}
-      name="radios"
+      name="radiosName"
       type="radio"
       value=""
     />
@@ -161,7 +161,7 @@ exports[`RadioButton renders correctly with name 1`] = `
 </label>
 `;
 
-exports[`RadioButton renders correctly with name 2`] = `
+exports[`RadioButton renders correctly with text 1`] = `
 <label
   className="monday-style-radio-button-component"
 >
@@ -172,15 +172,19 @@ exports[`RadioButton renders correctly with name 2`] = `
       className="monday-style-radio-button-component__radio-input-container__radio-input"
       defaultChecked={false}
       disabled={false}
-      name="radiosName"
+      name=""
       type="radio"
       value=""
     />
     <span
       className="monday-style-radio-button-component__radio-input-container__radio-control"
     />
   </span>
-  
+  <span
+    className="monday-style-radio-button-component__radio-label"
+  >
+    test text
+  </span>
 </label>
 `;