feat(project): add header to checkbox

jwplayer · Jul 27, 2021 · 23e2ef3 · 23e2ef3
1 parent 95017c5
commit 23e2ef3
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 3 deletions.
diff --git a/src/components/Checkbox/Checkbox.module.scss b/src/components/Checkbox/Checkbox.module.scss
@@ -3,6 +3,7 @@
 
 .checkbox {
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
 
   > label {
@@ -22,6 +23,14 @@
     }
   }
 
+  .header {
+    flex: 1 1 100%;
+    margin-bottom: 4px;
+    font-family: theme.$body-font-family;
+    font-weight: 700;
+    text-align: left;
+  }
+
   input {
     display: flex;
     flex-shrink: 0;

diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx
@@ -1,21 +1,23 @@
-import React, { ReactNode } from 'react';
+import React from 'react';
 
 import useOpaqueId from '../../hooks/useOpaqueId';
 
 import styles from './Checkbox.module.scss';
 
 type Props = {
-  label?: string | ReactNode;
+  label?: string;
   name: string;
   value: boolean;
   onChange: React.ChangeEventHandler<HTMLInputElement>;
+  header?: string;
 };
 
-const Checkbox: React.FC<Props> = ({ label, name, onChange }: Props) => {
+const Checkbox: React.FC<Props> = ({ label, name, onChange, header }: Props) => {
   const id = useOpaqueId('check-box', name);
 
   return (
     <div className={styles.checkbox}>
+      {header && <span className={styles.header}>{header}</span>}
       <input name={name} type="checkbox" id={id} onChange={onChange} />
       <label htmlFor={id}>{label}</label>
     </div>