diff --git a/libs/pxweb2-ui/src/lib/components/Checkbox/Checkbox.module.scss b/libs/pxweb2-ui/src/lib/components/Checkbox/Checkbox.module.scss index dd4698ff..e23dce5e 100644 --- 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 index 21091a8e..ab39ffcb 100644 --- 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 = () => { ); }; +export const NoMargin: StoryFn = () => { + const [selectedVar1, setSelectedVar1] = React.useState(true); + const [selectedVar2, setSelectedVar2] = React.useState(true); + const [selectedVar3, setSelectedVar3] = React.useState(false); + + return ( +
+ { + setSelectedVar2(val); + }} + value={selectedVar2} + noMargin={true} + /> + + { + setSelectedVar1(val); + }} + value={selectedVar1} + noMargin={true} + /> + { + setSelectedVar3(val); + }} + value={selectedVar3} + noMargin={false} + /> +
+ ); +}; diff --git a/libs/pxweb2-ui/src/lib/components/Checkbox/Checkbox.tsx b/libs/pxweb2-ui/src/lib/components/Checkbox/Checkbox.tsx index 49ada63e..050bb63c 100644 --- 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 = ({ @@ -20,6 +21,7 @@ export const Checkbox: React.FC = ({ onChange, tabIndex, strong, + noMargin, }) => { return (
= ({ {value && } @@ -63,6 +66,7 @@ interface MixedCheckboxProps { ariaControls: string[]; tabIndex?: number; strong?: boolean; + noMargin?: boolean; } export const MixedCheckbox: React.FC = ({ id, @@ -72,6 +76,7 @@ export const MixedCheckbox: React.FC = ({ ariaControls, tabIndex, strong, + noMargin, }) => { return (
= ({ {value === 'true' && } {value === 'mixed' && } -
- +
+ {text}
);