paris 0.8.21 → 0.9.0

package/src/stories/input/Input.tsx

@@ -100,11 +100,16 @@ export const Input: FC<InputProps & ComponentPropsWithoutRef<'input'>> = forward
         >
             <div
                 className={styles.inputContainer}
-                data-status={status}
-                data-disabled={disabled}
+                // data-status={status}
+                // data-disabled={disabled}
+                data-status={disabled ? 'disabled' : (status || 'default')}
             >
                 {!!startEnhancer && (
-                    <div {...overrides?.startEnhancerContainer} className={clsx(styles.enhancer, overrides?.startEnhancerContainer?.className)}>
+                    <div
+                        {...overrides?.startEnhancerContainer}
+                        className={clsx(styles.enhancer, overrides?.startEnhancerContainer?.className)}
+                        data-status={disabled ? 'disabled' : (status || 'default')}
+                    >
                         {!!startEnhancer && (
                             <MemoizedEnhancer
                                 enhancer={startEnhancer}
@@ -121,7 +126,7 @@ export const Input: FC<InputProps & ComponentPropsWithoutRef<'input'>> = forward
                     aria-label={typeof label === 'string' ? label : props['aria-label']}
                     aria-describedby={`${inputID}-description`}
                     aria-disabled={disabled}
-                    data-status={status}
+                    data-status={disabled ? 'disabled' : (status || 'default')}
                     readOnly={disabled}
                     className={clsx(
                         props.className,
@@ -129,7 +134,11 @@ export const Input: FC<InputProps & ComponentPropsWithoutRef<'input'>> = forward
                     )}
                 />
                 {!!endEnhancer && (
-                    <div {...overrides?.endEnhancerContainer} className={clsx(styles.enhancer, overrides?.endEnhancerContainer?.className)}>
+                    <div
+                        {...overrides?.endEnhancerContainer}
+                        className={clsx(styles.enhancer, overrides?.endEnhancerContainer?.className)}
+                        data-status={disabled ? 'disabled' : (status || 'default')}
+                    >
                         {!!endEnhancer && (
                             <MemoizedEnhancer
                                 enhancer={endEnhancer}

package/src/stories/menu/Menu.module.scss

@@ -9,9 +9,9 @@
     margin-top: 6px;
 
     border-radius: 8px;
-    background: var(--pte-colors-backgroundPrimary);
-    box-shadow: var(--pte-borders-dropdown-shadow);
-    border: var(--pte-borders-dropdown-border);
+    background: var(--pte-new-colors-surfacePrimary);
+    box-shadow: var(--pte-new-lighting-deepBelow);
+    border: var(--pte-new-borders-dropdown-border);
 
     display: flex;
     width: 200px;
@@ -40,16 +40,16 @@
     align-items: center;
     justify-content: space-between;
 
-    color: var(--pte-colors-contentSecondary);
+    color: var(--pte-new-colors-contentPrimary);
 
-    border-bottom: 0.5px solid var(--pte-colors-borderOpaque);
+    border-bottom: 0.5px solid var(--pte-new-colors-borderMedium);
 
     &:last-child {
         border-bottom: none;
     }
 
     &:hover {
-        background-color: var(--pte-colors-backgroundSecondary);
+        background-color: var(--pte-new-colors-overlayMedium);
     }
 
     @keyframes gradientFlow {

package/src/stories/menu/Menu.stories.tsx

@@ -19,33 +19,29 @@ export const Default: Story = {
         children: 'Hello world! This is a new Menu component.',
     },
     render: (args) => (
-        <Menu as="div">
-            <Menu.Button>
-                <Button
-                    kind="tertiary"
-                    shape="circle"
-                    startEnhancer={(
-                        <Ellipsis size={20} />
-                    )}
-                >
-                    Action menu
-                </Button>
-            </Menu.Button>
-            <Menu.Items>
-                <Menu.Item as="button">
-                    Dispute
-                </Menu.Item>
-                <Menu.Item as="button">
-                    Transfer
-                    <ChevronRight size={20} />
-                </Menu.Item>
-            </Menu.Items>
-        </Menu>
+        <div style={{ height: '150px' }}>
+            <Menu as="div">
+                <Menu.Button>
+                    <Button
+                        kind="tertiary"
+                        shape="circle"
+                        startEnhancer={(
+                            <Ellipsis size={20} />
+                        )}
+                    >
+                        Action menu
+                    </Button>
+                </Menu.Button>
+                <Menu.Items>
+                    <Menu.Item as="button">
+                        Dispute
+                    </Menu.Item>
+                    <Menu.Item as="button">
+                        Transfer
+                        <ChevronRight size={20} />
+                    </Menu.Item>
+                </Menu.Items>
+            </Menu>
+        </div>
     ),
 };
-
-export const Secondary: Story = {
-    args: {
-        children: 'Hello world! This is a secondary component.',
-    },
-};

package/src/stories/popover/Popover.module.scss

@@ -13,10 +13,10 @@
 }
 
 .content {
-    background-color: var(--pte-colors-backgroundPrimary);
+    background-color: var(--pte-new-colors-surfacePrimary);
     animation: var(--pte-animations-duration-normal) var(--pte-animations-timing-easeInOutExpo) 0s 1 intro;
     width: fit-content;
     border-radius: var(--pte-borders-radius-rounded);
-    box-shadow: var(--pte-lighting-shallowPopup);
-    border: var(--pte-borders-dropdown-border);
+    box-shadow: var(--pte-new-lighting-shallowPopup);
+    border: var(--pte-new-borders-dropdown-border);
 }

package/src/stories/select/Select.module.scss

@@ -7,6 +7,16 @@
     }
 }
 
+.listboxButton {
+    &[aria-expanded = true] {
+        .chevron {
+            color: var(--pte-new-colors-contentPrimary);
+        }
+        border-color: var(--pte-new-colors-inputBorderFocus);
+        background-color: var(--pte-new-colors-inputFillFocus);
+    }
+}
+
 .field {
     display: flex;
     flex-direction: row;
@@ -33,11 +43,11 @@
     display: flex;
     flex-direction: column;
 
-    background-color: var(--pte-colors-backgroundPrimary);
+    background-color: var(--pte-new-colors-surfacePrimary);
 
-    border: var(--pte-borders-dropdown-border);
+    border: var(--pte-new-borders-dropdown-border);
     border-radius: var(--pte-borders-radius-rectangle);
-    box-shadow: var(--pte-borders-dropdown-shadow);
+    box-shadow: var(--pte-new-lighting-deepBelow);
 
     transition: var(--pte-animations-interaction);
 
@@ -49,12 +59,12 @@
 .option {
     display: flex;
     flex-direction: row;
-    justify-content: flex-start;
+    justify-content: space-between;
     align-items: center;
     gap: 8px;
 
-    padding: 8px 16px;
-    margin: -1px;
+    padding: 6.5px 14px;
+    //margin: -1px;
 
     // border: 1px solid var(--pte-borders-dropdown-color);
     //border-right: 1px solid var(--pte-borders-dropdown-color);
@@ -62,19 +72,19 @@
     transition: var(--pte-animations-interaction);
 
     &:hover, &[data-headlessui-state="active"] {
-        background-color: var(--pte-colors-backgroundSecondary);
+        background-color: var(--pte-new-colors-overlayMedium);
     }
 
     &[data-selected=true] {
-        background-color: var(--pte-colors-backgroundTertiary);
+        background-color: var(--pte-new-colors-overlaySubtle);
     }
 
-    &[data-disabled=true], &[data-headlessui-state~="disabled"] {
+    &[data-status="disabled"], &[data-headlessui-state~="disabled"] {
         pointer-events: none;
         cursor: default;
 
         &, & * {
-            color: var(--pte-colors-contentDisabled);
+            color: var(--pte-new-colors-contentDisabled);
         }
     }
 }
@@ -100,26 +110,38 @@
 
     &[data-headlessui-state~="active"] {
         .radioCircle {
-            border-color: var(--pte-colors-contentPrimary);
+            border-color: var(--pte-new-colors-contentPrimary);
         }
     }
 
     &[data-headlessui-state~="checked"] {
         .radioCircle {
-            border: 5px solid var(--pte-colors-contentPrimary);
+            border: 5px solid var(--pte-new-colors-contentPrimary);
         }
     }
 
-    &[data-headlessui-state~="disabled"] {
+    &[data-status="disabled"], &[data-headlessui-state~="disabled"] {
         pointer-events: none;
         cursor: default;
 
         &, & * {
-            color: var(--pte-colors-contentDisabled);
+            color: var(--pte-new-colors-contentDisabled);
+        }
+
+        .radioCircle {
+            border-color: var(--pte-new-colors-contentDisabled);
         }
+    }
+
+    &[data-status="error"] {
+        .radioCircle {
+            border-color: var(--pte-new-colors-contentNegative);
+        }
+    }
 
+    &[data-status="success"] {
         .radioCircle {
-            border-color: var(--pte-colors-contentDisabled);
+            border-color: var(--pte-new-colors-contentPositive);
         }
     }
 }
@@ -130,6 +152,6 @@
     width: 14px;
     height: 14px;
     border-radius: 100%;
-    border: 1.5px solid var(--pte-colors-contentTertiary);
+    border: 1.5px solid var(--pte-new-colors-contentTertiary);
     transition: all var(--pte-animations-interaction);
 }

package/src/stories/select/Select.stories.ts

@@ -32,18 +32,15 @@ export const Default: Story = {
             { id: '1', node: 'Single' },
             { id: '2', node: 'EP' },
             { id: '3', node: 'Album (LP)' },
-            { id: '3', node: 'Album (LP)' },
-            { id: '3', node: 'Album (LP)' },
-            { id: '3', node: 'Album (LP)' },
-            { id: '3', node: 'Album (LP)' },
-            { id: '3', node: 'Album (LP)' },
-            { id: '3', node: 'Album (LP)' },
-            { id: '3', node: 'Album (LP)' },
-            { id: '3', node: 'Album (LP)' },
-            { id: '3', node: 'Album (LP)' },
-            { id: '3', node: 'Album (LP)' },
-            { id: '3', node: 'Album (LP)' },
-            { id: '3', node: 'Album (LP)' },
+            { id: '4', node: 'Compilation' },
+            { id: '5', node: 'Mixtape' },
+            { id: '6', node: 'Live album' },
+            { id: '7', node: 'Remix album' },
+            { id: '8', node: 'Soundtrack' },
+            { id: '9', node: 'Demo' },
+            { id: '10', node: 'Reissue' },
+            { id: '11', node: 'Promo' },
+            { id: '12', node: 'Other' },
         ],
     },
     render,
@@ -83,3 +80,18 @@ export const WithCustomNodes: Story = {
     },
     render,
 };
+
+export const Radio: Story = {
+    args: {
+        label: 'Release type',
+        description: 'Select the type of release you want to create.',
+        kind: 'radio',
+        options: [
+            { id: '1', node: 'Single' },
+            { id: '2', node: 'EP' },
+            { id: '3', node: 'Album (LP)' },
+            { id: '4', node: 'Compilation' },
+        ],
+    },
+    render,
+};

package/src/stories/select/Select.tsx

@@ -20,6 +20,7 @@ import { MemoizedEnhancer } from '../../helpers/renderEnhancer';
 import { pget, theme } from '../theme';
 import { Field } from '../field';
 import { TextWhenString } from '../utility';
+import { Check, Icon } from '../icon';
 
 export type Option<T = Record<string, any>> = {
     id: string,
@@ -131,11 +132,16 @@ export const Select = forwardRef(function <T = Record<string, any>>({
                         className={clsx(
                             overrides?.selectInput?.className,
                             inputStyles.inputContainer,
+                            styles.listboxButton,
                             styles.field,
                         )}
                     >
                         {!!startEnhancer && (
-                            <div {...overrides?.startEnhancerContainer} className={clsx(inputStyles.enhancer, overrides?.startEnhancerContainer?.className)}>
+                            <div
+                                {...overrides?.startEnhancerContainer}
+                                className={clsx(inputStyles.enhancer, overrides?.startEnhancerContainer?.className)}
+                                data-status={disabled ? 'disabled' : (status || 'default')}
+                            >
                                 {!!startEnhancer && (
                                     <MemoizedEnhancer
                                         enhancer={startEnhancer}
@@ -146,7 +152,11 @@ export const Select = forwardRef(function <T = Record<string, any>>({
                         )}
                         {options?.find((o) => o.id === value)?.node || placeholder || 'Select an option'}
                         {endEnhancer ? (
-                            <div {...overrides?.endEnhancerContainer} className={clsx(inputStyles.enhancer, overrides?.endEnhancerContainer?.className)}>
+                            <div
+                                {...overrides?.endEnhancerContainer}
+                                className={clsx(inputStyles.enhancer, overrides?.endEnhancerContainer?.className)}
+                                data-status={disabled ? 'disabled' : (status || 'default')}
+                            >
                                 {!!endEnhancer && (
                                     <MemoizedEnhancer
                                         enhancer={endEnhancer}
@@ -155,7 +165,7 @@ export const Select = forwardRef(function <T = Record<string, any>>({
                                 )}
                             </div>
                         ) : (
-                            <FontAwesomeIcon className={inputStyles.enhancer} width="10px" icon={faChevronDown} />
+                            <FontAwesomeIcon className={clsx(inputStyles.enhancer, styles.chevron)} data-status={disabled ? 'disabled' : (status || 'default')} width="10px" icon={faChevronDown} />
                         )}
                     </Listbox.Button>
                     <Transition
@@ -193,6 +203,9 @@ export const Select = forwardRef(function <T = Record<string, any>>({
                                             {option.node}
                                         </Text>
                                     ) : option.node}
+                                    {option.id === value && (
+                                        <Icon icon={Check} size={12} />
+                                    )}
                                 </Listbox.Option>
                             ))}
                         </Listbox.Options>
@@ -210,6 +223,7 @@ export const Select = forwardRef(function <T = Record<string, any>>({
                             key={option.id}
                             value={option.id}
                             disabled={option.disabled || false}
+                            data-status={disabled ? 'disabled' : (status || 'default')}
                         >
                             <div className={styles.radioCircle} />
                             <TextWhenString kind="paragraphXSmall">

package/src/stories/styledlink/StyledLink.module.scss

@@ -1,11 +1,11 @@
 .link {
     text-decoration: none;
-    border-bottom: 1px solid var(--pte-colors-borderOpaque);
+    border-bottom: 1px solid var(--pte-new-colors-borderMedium);
     cursor: pointer;
     font-weight: var(--pte-typography-fontWeights-medium);
     transition: border-bottom-color var(--pte-animations-interaction);
 
     &:hover {
-        border-bottom: 1px solid var(--pte-colors-contentPrimary);
+        border-bottom: 1px solid var(--pte-new-colors-contentPrimary);
     }
 }

package/src/stories/table/Table.module.scss

@@ -11,7 +11,7 @@
     }
 
     th {
-        color: var(--pte-colors-contentSecondary);
+        color: var(--pte-new-colors-contentSecondary);
         padding: 10px 12px;
     }
 
@@ -20,11 +20,12 @@
     }
 
     tr {
-        border-top: 1px solid var(--pte-colors-borderOpaque);
+        border-bottom: 1px solid var(--pte-new-colors-borderSubtle);
     }
 
-    tr:last-child {
-        border-bottom: 1px solid var(--pte-colors-borderOpaque);
+    .tableHeader {
+        border-top: 1px solid var(--pte-new-colors-borderMedium);
+        border-bottom: 1px solid var(--pte-new-colors-borderMedium);
     }
 
     tr.empty {
@@ -39,7 +40,7 @@
         transition: background-color var(--pte-animations-interaction);
 
         &:hover {
-            background-color: var(--pte-colors-backgroundSecondary);
+            background-color: var(--pte-new-colors-overlayMedium);
         }
 
         &, & * {

package/src/stories/table/Table.stories.ts

@@ -19,7 +19,7 @@ export const Default: Story = {
                 title: 'Name',
             },
             {
-                title: 'Type',
+                title: 'Role',
                 hideBelow: 'sm',
             },
             {
@@ -29,21 +29,21 @@ export const Default: Story = {
         rows: [
             {
                 id: 1,
-                name: 'Billie Eilish',
-                type: 'Artist',
-                email: 'billie@slingshot.fm',
+                name: 'Mia Dolan',
+                type: 'Actress',
+                email: 'mia@slingshot.fm',
             },
             {
                 id: 2,
-                name: 'Taylor Swift',
+                name: 'Sebastian Wilder',
                 type: 'Artist',
-                email: 'taylor@slingshot.fm',
+                email: 'seb@slingshot.fm',
             },
             {
                 id: 3,
-                name: 'Valkyrae',
-                type: 'Creator',
-                email: 'valkyrae@slingshot.fm',
+                name: 'Amy Brandt',
+                type: 'Casting',
+                email: 'amy@slingshot.fm',
             },
         ],
         rowRenderFn: (row) => ({

package/src/stories/table/Table.tsx

@@ -151,7 +151,13 @@ export function Table<RowData extends Record<string, any>[]>({
             }}
         >
             <thead {...overrides?.thead}>
-                <tr {...overrides?.trHead}>
+                <tr
+                    {...overrides?.trHead}
+                    className={clsx(
+                        styles.tableHeader,
+                        overrides?.trHead?.className,
+                    )}
+                >
                     {columns.map((column) => (
                         <th
                             {...{