paris 0.15.1 → 0.15.2

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # paris
 
+## 0.15.2
+
+### Patch Changes
+
+- 656978c: Checkbox: added `panel` variant
+
 ## 0.15.1
 
 ### Patch Changes

package/package.json

@@ -2,7 +2,7 @@
   "name": "paris",
   "author": "Sanil Chawla <sanil@slingshot.fm> (https://sanil.co)",
   "description": "Paris is Slingshot's React design system. It's a collection of reusable components, design tokens, and guidelines that help us build consistent, accessible, and performant user interfaces.",
-  "version": "0.15.1",
+  "version": "0.15.2",
   "homepage": "https://paris.slingshot.fm",
   "license": "MIT",
   "repository": {

package/src/stories/checkbox/Checkbox.module.scss

@@ -93,6 +93,44 @@
             background-color: var(--pte-new-colors-overlayStrong);
         }
     }
+
+    &.panel {
+        width: 100%;
+        padding: 8px 10px 8px 8px;
+        color: var(--pte-new-colors-contentSecondary);
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        transition: var(--pte-animations-interaction);
+
+        &:focus-visible {
+            outline: 1px solid var(--pte-new-colors-borderUltrastrong);
+        }
+
+        &[data-state="checked"], &[data-state="indeterminate"] {
+            color: var(--pte-new-colors-contentPrimary);
+        }
+
+        &[data-disabled=true] {
+            color: var(--pte-new-colors-contentDisabled);
+        }
+
+        &:hover {
+            background-color: var(--pte-new-colors-overlaySubtle);
+        }
+
+        .box {
+            width: 13px;
+            height: 13px;
+            border: 2px solid var(--pte-new-colors-contentTertiary);
+            margin-right: 0.5px;
+        }
+        &[data-state="checked"], &[data-state="indeterminate"] {
+            .box {
+                display: none;
+            }
+        }
+    }
 }
 
 .indicator {

package/src/stories/checkbox/Checkbox.stories.ts

@@ -42,6 +42,22 @@ export const Surface: Story = {
     },
 };
 
+export const Panel: Story = {
+    args: {
+        children: 'Credit/debit card',
+        kind: 'panel',
+    },
+    render: (args) => {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        const [checked, setChecked] = useState(false);
+        return createElement(Checkbox, {
+            ...args,
+            checked,
+            onChange: (e) => setChecked(!!e),
+        });
+    },
+};
+
 export const Switch: Story = {
     args: {
         children: 'ACH Bank Transfer',

package/src/stories/checkbox/Checkbox.tsx

@@ -8,8 +8,8 @@ import { TextWhenString, VisuallyHidden } from '../utility';
 import { Check, Icon } from '../icon';
 
 export type CheckboxProps = {
-    /** The visual style of the Checkbox. `default` is a standard checkbox with a label next to it, `surface` is a clickable card that displays a check when selected, `switch` is a switch toggle.  */
-    kind?: 'default' | 'surface' | 'switch'
+    /** The visual style of the Checkbox. `default` is a standard checkbox with a label next to it, `surface` is a clickable card that displays a check when selected, `panel` is a clickable card with the checkbox aligned right, `switch` is a switch toggle.  */
+    kind?: 'default' | 'surface' | 'panel' | 'switch';
     checked?: boolean;
     onChange?: (checked: boolean | 'indeterminate') => void;
     disabled?: boolean;
@@ -52,7 +52,7 @@ export const Checkbox: FC<CheckboxProps> = ({
             className={clsx(styles.container, disabled && styles.disabled, className, checked && styles.checked)}
             {...props}
         >
-            {(kind === 'default' || kind === 'surface') && (
+            {(kind === 'default' || kind === 'surface' || kind === 'panel') && (
                 <RadixCheckbox.Root
                     id={inputID}
                     className={clsx(styles.root, styles[kind])}
@@ -61,13 +61,14 @@ export const Checkbox: FC<CheckboxProps> = ({
                     data-disabled={disabled}
                     aria-details={typeof children === 'string' ? children : undefined}
                 >
-                    {kind === 'surface' && (
+                    {(kind === 'surface' || kind === 'panel') && (
                         <TextWhenString kind="paragraphXSmall">
                             {children}
                         </TextWhenString>
                     )}
+                    {kind === 'panel' && <div className={styles.box} />}
                     <RadixCheckbox.Indicator className={styles.indicator}>
-                        {kind === 'default' && (
+                        {(kind === 'default' || kind === 'panel') && (
                             <svg width={14} height={14} viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                                 <path
                                     className={styles.checkSvg}