fix(checkbox): add partially selected and omitted label props to chec…

…kbox
epignosis · Feb 4, 2022 · 4500970 · 4500970
1 parent 4c81fa7
commit 4500970
Show file tree

Hide file tree

Showing 8 changed files with 62 additions and 10 deletions.
diff --git a/src/components/FormElements/CheckboxGroup/Checkbox.stories.tsx b/src/components/FormElements/CheckboxGroup/Checkbox.stories.tsx
@@ -42,6 +42,16 @@ const options = [
     value: "failed",
     name: "failed",
   },
+  {
+    label: "Partially selected",
+    value: "",
+    name: "partiallySelected",
+    isPartiallySelected: true,
+  },
+  {
+    value: "noLabel",
+    name: "noLabel",
+  },
 ];
 
 export const Checkbox: Story<Omit<CheckboxProps, "label" | "value" | "name" | "id">> = (args) => {

diff --git a/src/components/FormElements/CheckboxGroup/Checkbox.tsx b/src/components/FormElements/CheckboxGroup/Checkbox.tsx
@@ -5,9 +5,10 @@ import { ExtendableProps } from "types/common";
 
 export type CheckboxOption = {
   value: string;
-  label: string;
+  label?: string;
   name: string;
   disabled?: boolean;
+  isPartiallySelected?: boolean;
 };
 
 export type CheckboxSize = "md" | "lg";
@@ -23,14 +24,23 @@ export type CheckboxProps = ExtendableProps<
 >;
 
 const Checkbox: ForwardRefRenderFunction<HTMLDivElement, CheckboxProps> = (props, ref) => {
-  const { id, label, size = "md", inline = false, containerAttrs, ...rest } = props;
+  const {
+    id,
+    label,
+    size = "md",
+    inline = false,
+    containerAttrs,
+    isPartiallySelected,
+    ...rest
+  } = props;
 
   return (
     <div
       ref={ref}
       css={(theme): SerializedStyles => checkboxContainer(theme, { size, inline })}
       {...containerAttrs}
     >
+      {isPartiallySelected && <span data-testid="is-partially-selected" className="dash" />}
       <input id={id} type="checkbox" {...rest} />
       <label htmlFor={id}>
         <span className="shadow-element" tabIndex={-1} aria-hidden="true" />

diff --git a/src/components/FormElements/CheckboxGroup/__tests__/Checkbox.test.tsx b/src/components/FormElements/CheckboxGroup/__tests__/Checkbox.test.tsx
@@ -58,6 +58,26 @@ describe("<Checkbox />", () => {
     expect(input).not.toBeChecked();
   });
 
+  it("is partially selected", () => {
+    const labelTxt = faker.lorem.word();
+    const id = faker.random.alphaNumeric();
+    const name = faker.random.alphaNumeric();
+
+    render(
+      <Checkbox
+        id={id}
+        label={labelTxt}
+        name={name}
+        value="testValue"
+        isPartiallySelected={true}
+      />,
+    );
+
+    const span = screen.getByTestId("is-partially-selected");
+
+    expect(span).toBeInTheDocument();
+  });
+
   it("matches snapshot with `md` size", () => {
     const { container } = render(
       <Checkbox

diff --git a/src/components/FormElements/CheckboxGroup/__tests__/__snapshots__/Checkbox.test.tsx.snap b/src/components/FormElements/CheckboxGroup/__tests__/__snapshots__/Checkbox.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<Checkbox /> matches snapshot with \`inline\` = true 1`] = `
 <div>
   <div
-    class="css-6emo4e-checkboxContainer-checkboxContainer"
+    class="css-oyi2sc-checkboxContainer-checkboxContainer"
   >
     <input
       id="testId"
@@ -28,7 +28,7 @@ exports[`<Checkbox /> matches snapshot with \`inline\` = true 1`] = `
 exports[`<Checkbox /> matches snapshot with \`lg\` size 1`] = `
 <div>
   <div
-    class="css-1p9f0hm-checkboxContainer-checkboxContainer"
+    class="css-1tvii3m-checkboxContainer-checkboxContainer"
   >
     <input
       id="testId"
@@ -53,7 +53,7 @@ exports[`<Checkbox /> matches snapshot with \`lg\` size 1`] = `
 exports[`<Checkbox /> matches snapshot with \`md\` size 1`] = `
 <div>
   <div
-    class="container-class css-1j4ss74-checkboxContainer-checkboxContainer"
+    class="container-class css-gdblks-checkboxContainer-checkboxContainer"
     id="my-container-id"
   >
     <input

diff --git a/...components/FormElements/CheckboxGroup/__tests__/__snapshots__/CheckboxGroup.test.tsx.snap b/...components/FormElements/CheckboxGroup/__tests__/__snapshots__/CheckboxGroup.test.tsx.snap
@@ -8,7 +8,7 @@ exports[`<CheckBoxGroup /> matches snapshot 1`] = `
   >
     <legend>
       <div
-        class="css-6emo4e-checkboxContainer-checkboxContainer"
+        class="css-oyi2sc-checkboxContainer-checkboxContainer"
       >
         <input
           aria-checked="false"
@@ -32,7 +32,7 @@ exports[`<CheckBoxGroup /> matches snapshot 1`] = `
     <ul>
       <li>
         <div
-          class="css-6emo4e-checkboxContainer-checkboxContainer"
+          class="css-oyi2sc-checkboxContainer-checkboxContainer"
         >
           <input
             id="Test groupname-testValue"
@@ -65,7 +65,7 @@ exports[`<CheckBoxGroup /> matches snapshot with \`inline = true\` 1`] = `
   >
     <legend>
       <div
-        class="css-6emo4e-checkboxContainer-checkboxContainer"
+        class="css-oyi2sc-checkboxContainer-checkboxContainer"
       >
         <input
           aria-checked="false"
@@ -89,7 +89,7 @@ exports[`<CheckBoxGroup /> matches snapshot with \`inline = true\` 1`] = `
     <ul>
       <li>
         <div
-          class="css-6emo4e-checkboxContainer-checkboxContainer"
+          class="css-oyi2sc-checkboxContainer-checkboxContainer"
         >
           <input
             id="Test groupname-testValue"

diff --git a/src/components/FormElements/CheckboxGroup/styles.ts b/src/components/FormElements/CheckboxGroup/styles.ts
@@ -49,6 +49,17 @@ export const checkboxContainer = (
   return css`
     display: ${inline ? "inline-flex" : "flex"};
     padding: 0.75rem ${inline ? "1.5rem" : "0"} 0.75rem 0;
+    position: relative;
+
+    .dash {
+      position: absolute;
+      top: 21px;
+      left: 7px;
+      width: 8px;
+      height: 2px;
+      background-color: white;
+      z-index: 3;
+    }
 
     input[type="checkbox"] {
       opacity: 0;

diff --git a/src/icons/ellipses.svg → src/icons/ellipsis.svg b/src/icons/ellipses.svg → src/icons/ellipsis.svg
diff --git a/src/icons/index.ts b/src/icons/index.ts
@@ -6,7 +6,7 @@ export { default as HelpSVG } from "./help.svg";
 export { default as BackArrowSVG } from "./back_arrow.svg";
 export { default as CloseCircledSVG } from "./close_circled.svg";
 export { default as InfoCircledSVG } from "./info_circled.svg";
-export { default as EllipsesSVG } from "./ellipses.svg";
+export { default as EllipsisSVG } from "./ellipsis.svg";
 export { default as VerticalEllipsisSVG } from "./vertical_ellipsis.svg";
 export { default as CertificateSVG } from "./certificate.svg";
 export { default as PlayVideoSVG } from "./play_video.svg";
@@ -61,6 +61,7 @@ export { default as AddOperatorSVG } from "./add_operator.svg";
 export { default as BadgeNoCertificatesSVG } from "./badge_no_certificate.svg";
 export { default as BadgeBellSVG } from "./badge_bell.svg";
 export { default as BellSlashSVG } from "./bell_slash.svg";
+export { default as BellSolidSVG } from "./bell_solid.svg";
 export { default as BadgeBooksSVG } from "./badge_books.svg";
 export { default as BadgeCalendarSVG } from "./badge_calendar.svg";
 export { default as BadgeStatsSVG } from "./badge_stats.svg";