Added noMargin option, and fixed fontweight issue on safari

PxTools · Mar 14, 2024 · ddad250 · ddad250
1 parent 5e1e21f
commit ddad250
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 8 deletions.
diff --git a/libs/pxweb2-ui/src/lib/components/Checkbox/Checkbox.module.scss b/libs/pxweb2-ui/src/lib/components/Checkbox/Checkbox.module.scss
@@ -31,16 +31,22 @@
   justify-content: center;
 }
 
+.checkmarkWithoutMargin {
+  margin-left: 0px;
+}
+
 .checked {
   background-color: var(--px-color-surface-action);
   color: white;
 }
 
-.strong {
-  font-weight: 600;
-}
-
 .label {
   margin-top: 12px;
   margin-bottom: 8px;
+  font-family: PxWeb-font-400;
+  letter-spacing: 0em;
+}
+.strong {
+  font-family: PxWeb-font-700;
+  margin-top: 13px;
 }
diff --git a/libs/pxweb2-ui/src/lib/components/Checkbox/Checkbox.stories.tsx b/libs/pxweb2-ui/src/lib/components/Checkbox/Checkbox.stories.tsx
@@ -119,3 +119,41 @@ export const LongTextOn400pxWideMax: StoryFn<typeof Checkbox> = () => {
     </div>
   );
 };
+export const NoMargin: StoryFn<typeof Checkbox> = () => {
+  const [selectedVar1, setSelectedVar1] = React.useState(true);
+  const [selectedVar2, setSelectedVar2] = React.useState(true);
+  const [selectedVar3, setSelectedVar3] = React.useState(false);
+
+  return (
+    <div style={{ width: '400px' }}>
+      <Checkbox
+        id="var1"
+        text="No margin"
+        onChange={(val) => {
+          setSelectedVar2(val);
+        }}
+        value={selectedVar2}
+        noMargin={true}
+      />
+
+      <Checkbox
+        id="var2"
+        text="No margin"
+        onChange={(val) => {
+          setSelectedVar1(val);
+        }}
+        value={selectedVar1}
+        noMargin={true}
+      />
+      <Checkbox
+        id="var3"
+        text="Margin"
+        onChange={(val) => {
+          setSelectedVar3(val);
+        }}
+        value={selectedVar3}
+        noMargin={false}
+      />
+    </div>
+  );
+};
diff --git a/libs/pxweb2-ui/src/lib/components/Checkbox/Checkbox.tsx b/libs/pxweb2-ui/src/lib/components/Checkbox/Checkbox.tsx
@@ -11,6 +11,7 @@ interface CheckboxProps {
   onChange: (str: boolean) => void;
   tabIndex?: number;
   strong?: boolean;
+  noMargin?: boolean;
 }
 
 export const Checkbox: React.FC<CheckboxProps> = ({
@@ -20,6 +21,7 @@ export const Checkbox: React.FC<CheckboxProps> = ({
   onChange,
   tabIndex,
   strong,
+  noMargin,
 }) => {
   return (
     <div
@@ -43,6 +45,7 @@ export const Checkbox: React.FC<CheckboxProps> = ({
       <span
         className={cl(styles.checkmark, {
           [styles.checked]: value,
+          [styles.checkmarkWithoutMargin]: noMargin,
         })}
       >
         {value && <Icon iconName="CheckMark"></Icon>}
@@ -63,6 +66,7 @@ interface MixedCheckboxProps {
   ariaControls: string[];
   tabIndex?: number;
   strong?: boolean;
+  noMargin?: boolean;
 }
 export const MixedCheckbox: React.FC<MixedCheckboxProps> = ({
   id,
@@ -72,6 +76,7 @@ export const MixedCheckbox: React.FC<MixedCheckboxProps> = ({
   ariaControls,
   tabIndex,
   strong,
+  noMargin,
 }) => {
   return (
     <div
@@ -106,15 +111,17 @@ export const MixedCheckbox: React.FC<MixedCheckboxProps> = ({
       <span
         className={cl(styles.checkmark, {
           [styles.checked]: value === 'mixed' || value === 'true',
+          [styles.checkmarkWithoutMargin]: noMargin,
         })}
       >
         {value === 'true' && <Icon iconName="CheckMark"></Icon>}
         {value === 'mixed' && <Icon iconName="IndeterminateCheckMark"></Icon>}
       </span>
-      <div className={styles.label} id={id + '-label'}>
-        <Label>
-          <span className={cl({ [styles.strong]: strong })}>{text}</span>
-        </Label>
+      <div
+        className={cl(styles.label, { [styles.strong]: strong })}
+        id={id + '-label'}
+      >
+        {text}
       </div>
     </div>
   );