paris 0.13.0 → 0.13.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +12 -0
- package/package.json +1 -1
- package/src/stories/accordion/Accordion.tsx +35 -5
- package/src/stories/tabs/Tabs.tsx +21 -5
package/CHANGELOG.md
CHANGED
package/package.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"name": "paris",
|
|
3
3
|
"author": "Sanil Chawla <sanil@slingshot.fm> (https://sanil.co)",
|
|
4
4
|
"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.",
|
|
5
|
-
"version": "0.13.
|
|
5
|
+
"version": "0.13.2",
|
|
6
6
|
"homepage": "https://paris.slingshot.fm",
|
|
7
7
|
"license": "MIT",
|
|
8
8
|
"repository": {
|
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
import type { FC, ReactNode } from 'react';
|
|
1
|
+
import type { ComponentPropsWithoutRef, FC, ReactNode } from 'react';
|
|
2
2
|
import { useState } from 'react';
|
|
3
|
+
import type { MotionProps } from 'framer-motion';
|
|
3
4
|
import { AnimatePresence, motion } from 'framer-motion';
|
|
4
5
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
|
5
6
|
import { faPlus } from '@fortawesome/free-solid-svg-icons';
|
|
@@ -27,6 +28,12 @@ export type AccordionProps = {
|
|
|
27
28
|
onOpenChange?: (open: boolean) => void | Promise<void>;
|
|
28
29
|
/** The collapsible contents of the Accordion. */
|
|
29
30
|
children?: ReactNode;
|
|
31
|
+
overrides?: {
|
|
32
|
+
container?: ComponentPropsWithoutRef<'div'>;
|
|
33
|
+
titleContainer?: ComponentPropsWithoutRef<'div'>;
|
|
34
|
+
dropdownContainer?: ComponentPropsWithoutRef<'div'> & MotionProps;
|
|
35
|
+
dropdownContent?: ComponentPropsWithoutRef<'div'>;
|
|
36
|
+
}
|
|
30
37
|
};
|
|
31
38
|
|
|
32
39
|
/**
|
|
@@ -48,15 +55,20 @@ export const Accordion: FC<AccordionProps> = ({
|
|
|
48
55
|
isOpen,
|
|
49
56
|
onOpenChange,
|
|
50
57
|
children,
|
|
58
|
+
overrides,
|
|
51
59
|
}) => {
|
|
52
60
|
const [open, setOpen] = useState(isOpen ?? false);
|
|
53
61
|
|
|
54
62
|
return (
|
|
55
63
|
<div
|
|
56
|
-
|
|
64
|
+
{...overrides?.container}
|
|
65
|
+
className={clsx(
|
|
66
|
+
styles[kind],
|
|
67
|
+
open && styles.open,
|
|
68
|
+
overrides?.container?.className,
|
|
69
|
+
)}
|
|
57
70
|
>
|
|
58
71
|
<div
|
|
59
|
-
className={clsx(styles.title, styles[size], open && styles.open)}
|
|
60
72
|
onClick={() => setOpen((o) => !o)}
|
|
61
73
|
onKeyDown={(e) => {
|
|
62
74
|
if (e.key === 'Enter' || e.key === ' ') {
|
|
@@ -67,6 +79,13 @@ export const Accordion: FC<AccordionProps> = ({
|
|
|
67
79
|
}}
|
|
68
80
|
role="button"
|
|
69
81
|
tabIndex={0}
|
|
82
|
+
{...overrides?.titleContainer}
|
|
83
|
+
className={clsx(
|
|
84
|
+
styles.title,
|
|
85
|
+
styles[size],
|
|
86
|
+
open && styles.open,
|
|
87
|
+
overrides?.titleContainer?.className,
|
|
88
|
+
)}
|
|
70
89
|
>
|
|
71
90
|
<div>
|
|
72
91
|
<TextWhenString kind="paragraphSmall" weight="medium">
|
|
@@ -92,7 +111,6 @@ export const Accordion: FC<AccordionProps> = ({
|
|
|
92
111
|
<AnimatePresence>
|
|
93
112
|
{open && (
|
|
94
113
|
<motion.div
|
|
95
|
-
className={styles.dropdown}
|
|
96
114
|
key="content"
|
|
97
115
|
initial="collapsed"
|
|
98
116
|
animate="open"
|
|
@@ -105,8 +123,20 @@ export const Accordion: FC<AccordionProps> = ({
|
|
|
105
123
|
duration: 0.8,
|
|
106
124
|
ease: [0.87, 0, 0.13, 1],
|
|
107
125
|
}}
|
|
126
|
+
{...overrides?.dropdownContainer}
|
|
127
|
+
className={clsx(
|
|
128
|
+
styles.dropdown,
|
|
129
|
+
overrides?.dropdownContainer?.className,
|
|
130
|
+
)}
|
|
108
131
|
>
|
|
109
|
-
<div
|
|
132
|
+
<div
|
|
133
|
+
{...overrides?.dropdownContent}
|
|
134
|
+
className={clsx(
|
|
135
|
+
styles.dropdownContent,
|
|
136
|
+
styles[size],
|
|
137
|
+
overrides?.dropdownContent?.className,
|
|
138
|
+
)}
|
|
139
|
+
>
|
|
110
140
|
<TextWhenString kind="paragraphXSmall">
|
|
111
141
|
{children}
|
|
112
142
|
</TextWhenString>
|
|
@@ -4,10 +4,12 @@ import type {
|
|
|
4
4
|
ComponentPropsWithoutRef, CSSProperties, FC, ReactNode,
|
|
5
5
|
} from 'react';
|
|
6
6
|
import { useId, useState } from 'react';
|
|
7
|
+
import type { TabGroupProps, TabPanelProps, TabProps } from '@headlessui/react';
|
|
7
8
|
import { Tab } from '@headlessui/react';
|
|
8
9
|
import clsx from 'clsx';
|
|
9
10
|
import type { CSSLength } from '@ssh/csstypes';
|
|
10
11
|
import { motion } from 'framer-motion';
|
|
12
|
+
import type { TabListProps } from '@ariakit/react';
|
|
11
13
|
import styles from './Tabs.module.scss';
|
|
12
14
|
import typography from '../text/Typography.module.css';
|
|
13
15
|
import { easeInOutExpo } from '../utility';
|
|
@@ -60,11 +62,13 @@ export type TabsProps = {
|
|
|
60
62
|
* Prop overrides for other rendered elements. Overrides for the input itself should be passed directly to the component.
|
|
61
63
|
*/
|
|
62
64
|
overrides?: {
|
|
63
|
-
group?:
|
|
64
|
-
panel?:
|
|
65
|
+
group?: TabGroupProps<'div'>;
|
|
66
|
+
panel?: TabPanelProps<'div'>;
|
|
65
67
|
panelContainer?: ComponentPropsWithoutRef<'div'>;
|
|
66
|
-
tabList?:
|
|
68
|
+
tabList?: TabListProps<'div'>;
|
|
69
|
+
tabListBorder?: ComponentPropsWithoutRef<'div'>;
|
|
67
70
|
tabBackground?: ComponentPropsWithoutRef<'div'>;
|
|
71
|
+
tab?: TabProps<'div'>;
|
|
68
72
|
}
|
|
69
73
|
};
|
|
70
74
|
|
|
@@ -104,9 +108,13 @@ export const Tabs: FC<TabsProps> = ({
|
|
|
104
108
|
onTabChange?.(i);
|
|
105
109
|
}
|
|
106
110
|
}}
|
|
111
|
+
{...overrides?.group}
|
|
107
112
|
className={clsx(styles.tabGroup, styles[backgroundStyle], overrides?.group?.className)}
|
|
108
113
|
>
|
|
109
|
-
<div
|
|
114
|
+
<div
|
|
115
|
+
{...overrides?.tabBackground}
|
|
116
|
+
className={clsx(styles.tabBackground, styles[backgroundStyle], overrides?.tabBackground?.className)}
|
|
117
|
+
>
|
|
110
118
|
{backgroundStyle === 'glass' && (
|
|
111
119
|
<div className={styles.glassContainer}>
|
|
112
120
|
<div className={styles.glassOpacity} />
|
|
@@ -114,9 +122,11 @@ export const Tabs: FC<TabsProps> = ({
|
|
|
114
122
|
</div>
|
|
115
123
|
)}
|
|
116
124
|
<Tab.List
|
|
125
|
+
{...overrides?.tabList}
|
|
117
126
|
style={{
|
|
118
127
|
'--tab-width': tabWidth,
|
|
119
128
|
'--tab-index': `${index ?? selectedIndex}`,
|
|
129
|
+
...(overrides?.tabList?.style || {}),
|
|
120
130
|
} as CSSProperties}
|
|
121
131
|
className={clsx(
|
|
122
132
|
styles.tabList,
|
|
@@ -128,6 +138,7 @@ export const Tabs: FC<TabsProps> = ({
|
|
|
128
138
|
{tabs.map(({ title }, i) => (
|
|
129
139
|
<Tab
|
|
130
140
|
key={`${id}-tab-${title}`}
|
|
141
|
+
{...overrides?.tab}
|
|
131
142
|
className={clsx(
|
|
132
143
|
typography.paragraphXSmall,
|
|
133
144
|
styles.tab,
|
|
@@ -150,15 +161,20 @@ export const Tabs: FC<TabsProps> = ({
|
|
|
150
161
|
|
|
151
162
|
{/* <div key={`${id}-tab-active-border`} className={styles.activeTabBorder} /> */}
|
|
152
163
|
</Tab.List>
|
|
153
|
-
<div
|
|
164
|
+
<div
|
|
165
|
+
{...overrides?.tabListBorder}
|
|
166
|
+
className={clsx(styles.tabListBorder, styles[barStyle], overrides?.tabListBorder?.className)}
|
|
167
|
+
/>
|
|
154
168
|
</div>
|
|
155
169
|
|
|
156
170
|
<Tab.Panels
|
|
171
|
+
{...overrides?.panelContainer}
|
|
157
172
|
className={clsx(styles.tabPanels, styles[backgroundStyle], overrides?.panelContainer?.className)}
|
|
158
173
|
>
|
|
159
174
|
{tabs.map(({ title, content }) => (
|
|
160
175
|
<Tab.Panel
|
|
161
176
|
key={`${id}-tab-${title}-content`}
|
|
177
|
+
{...overrides?.panel}
|
|
162
178
|
className={clsx(
|
|
163
179
|
styles.panel,
|
|
164
180
|
styles[backgroundStyle],
|