@purpurds/drawer 5.18.1 → 5.18.3
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/dist/LICENSE.txt +3 -3
- package/dist/drawer.cjs.js +5 -5
- package/dist/drawer.cjs.js.map +1 -1
- package/dist/drawer.es.js +149 -151
- package/dist/drawer.es.js.map +1 -1
- package/dist/styles.css +1 -1
- package/package.json +6 -6
- package/src/drawer-content.module.scss +2 -2
- package/src/drawer.module.scss +0 -1
- package/src/drawer.stories.tsx +78 -34
package/dist/styles.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
._purpur-
|
|
1
|
+
._purpur-drawer-content_10vdf_1{animation:_drawerSmallScreenAnimation_10vdf_1 var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out);height:90vh;max-width:100%;position:absolute;right:0;top:10%;transition:transform var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out);width:100%}@media screen and (min-width: 600px){._purpur-drawer-content_10vdf_1{animation:_drawerLargeScreenAnimation_10vdf_1 var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out);height:100vh;max-width:calc(30rem * var(--purpur-rescale));top:0}}._purpur-drawer-content_10vdf_1:focus{outline:none}._purpur-drawer-content__content-container_10vdf_22{display:flex;flex-direction:column;gap:var(--purpur-spacing-400)}._purpur-drawer-content__drawer-frame_10vdf_27[data-swipe=cancel]{transform:translateY(0);transition:transform var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out)}._purpur-drawer-content__drawer-frame_10vdf_27[data-swipe=move]{transform:translateY(var(--purpur-drawer-swipe-move-y))}._purpur-drawer-content__drawer-frame_10vdf_27[data-swipe=end]{animation:_slideDown_10vdf_1 var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out) forwards}._purpur-drawer-content__description_10vdf_37{color:var(--purpur-color-text-default);display:block;font-family:var(--purpur-typography-family-default);font-size:var(--purpur-typography-scale-100);font-weight:var(--purpur-typography-weight-normal);-webkit-hyphens:none;hyphens:none;line-height:var(--purpur-typography-line-height-loose);margin:0}._purpur-drawer-overlay_10vdf_48{animation:_overlayAnimation_10vdf_1 var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out);background:var(--purpur-color-overlay-default);top:0;right:0;bottom:0;left:0;position:fixed;transition:opacity var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out)}@keyframes _slideDown_10vdf_1{0%{transform:translateY(var(--purpur-drawer-swipe-end-y))}to{transform:translateY(100%)}}@keyframes _overlayAnimation_10vdf_1{0%{opacity:0}to{opacity:1}}@keyframes _drawerLargeScreenAnimation_10vdf_1{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes _drawerSmallScreenAnimation_10vdf_1{0%{transform:translateY(100%)}to{transform:translateY(0)}}._purpur-drawer-container--header_1r6tb_1{padding:var(--purpur-spacing-250) var(--purpur-spacing-300) var(--purpur-spacing-200);border-bottom:var(--purpur-border-width-xs) solid var(--purpur-color-border-weak)}._purpur-drawer-container--body_1r6tb_5{padding:var(--purpur-spacing-400) var(--purpur-spacing-300) 0}._purpur-drawer-container--body_1r6tb_5._purpur-drawer-container--sticky_1r6tb_8{padding:var(--purpur-spacing-400) var(--purpur-spacing-300)}._purpur-drawer-container--footer_1r6tb_11{padding:0 var(--purpur-spacing-300) var(--purpur-spacing-200)}._purpur-drawer-container--footer_1r6tb_11._purpur-drawer-container--sticky_1r6tb_8{border-top:var(--purpur-border-width-xs) solid var(--purpur-color-border-weak);padding:var(--purpur-spacing-200) var(--purpur-spacing-300)}._purpur-drawer-frame_jj7dt_1{background-color:var(--purpur-color-background-primary);border-top-left-radius:var(--purpur-border-radius-lg);border-top-right-radius:var(--purpur-border-radius-lg);box-shadow:var(--purpur-shadow-lg);display:flex;flex-direction:column;height:100%;position:relative}@media screen and (min-width: 600px){._purpur-drawer-frame_jj7dt_1{border-bottom-left-radius:var(--purpur-border-radius-lg);border-top-right-radius:0}}._purpur-drawer-frame--sticky-footer_jj7dt_17{gap:0}._purpur-drawer-frame__header_jj7dt_20{flex:0 0 auto}._purpur-drawer-frame__body_jj7dt_23{flex:1 1 auto;overflow:hidden}._purpur-drawer-frame__footer_jj7dt_27{flex:0 0 auto}._purpur-drawer-frame__content-container_jj7dt_30{display:flex;flex-direction:column;gap:var(--purpur-spacing-400)}._purpur-drawer-frame__content-container--no-footer_jj7dt_35{margin-bottom:var(--purpur-spacing-400)}._purpur-drawer-handle_3n0ew_1{align-items:center;display:flex;height:var(--purpur-spacing-250);justify-content:center;position:absolute;top:0;width:100%}@media screen and (min-width: 600px){._purpur-drawer-handle_3n0ew_1{display:none}}._purpur-drawer-handle_3n0ew_1:before{content:"";background:var(--purpur-color-border-weak);border-radius:var(--purpur-border-radius-full);height:var(--purpur-spacing-50);width:var(--purpur-spacing-600)}._purpur-drawer-header__row_1yg5w_1{display:flex;align-items:center;gap:var(--purpur-spacing-100)}._purpur-drawer-header__row--with-back-button_1yg5w_6{margin-bottom:var(--purpur-spacing-100)}._purpur-drawer-header__left_1yg5w_9{flex:1 1 auto}._purpur-drawer-header__right_1yg5w_12{flex:0 0 auto}._purpur-drawer-header__close-button_1yg5w_15{margin-right:calc(-1 * var(--purpur-spacing-100))}._purpur-drawer-header__back-button--only-icon_1yg5w_18{margin-left:calc(-1 * var(--purpur-spacing-100))}._purpur-drawer-scroll-area__root_1p63i_1,._purpur-drawer-scroll-area__viewport_1p63i_4{height:100%}._purpur-drawer-scroll-area__scrollbar_1p63i_7{display:flex;-webkit-user-select:none;user-select:none;touch-action:none;padding:var(--purpur-spacing-25);background:var(--purpur-color-functional-white);transition:background var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out);width:var(--purpur-spacing-100)}._purpur-drawer-scroll-area__thumb_1p63i_18{background:var(--purpur-color-gray-200);border-radius:var(--purpur-spacing-200);flex:1;position:relative}._purpur-drawer-scroll-area__thumb_1p63i_18:before{content:"";height:100%;left:50%;min-height:var(--purpur-spacing-300);min-width:var(--purpur-spacing-300);position:absolute;top:50%;transform:translate(-50%,-50%);width:100%}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@purpurds/drawer",
|
|
3
|
-
"version": "5.18.
|
|
3
|
+
"version": "5.18.3",
|
|
4
4
|
"license": "AGPL-3.0-only",
|
|
5
5
|
"main": "./dist/drawer.cjs.js",
|
|
6
6
|
"types": "./dist/drawer.d.ts",
|
|
@@ -17,11 +17,11 @@
|
|
|
17
17
|
"@radix-ui/react-dialog": "~1.0.5",
|
|
18
18
|
"@radix-ui/react-scroll-area": "~1.0.5",
|
|
19
19
|
"classnames": "~2.5.0",
|
|
20
|
-
"@purpurds/
|
|
21
|
-
"@purpurds/paragraph": "5.18.
|
|
22
|
-
"@purpurds/
|
|
23
|
-
"@purpurds/
|
|
24
|
-
"@purpurds/
|
|
20
|
+
"@purpurds/heading": "5.18.3",
|
|
21
|
+
"@purpurds/paragraph": "5.18.3",
|
|
22
|
+
"@purpurds/icon": "5.18.3",
|
|
23
|
+
"@purpurds/button": "5.18.3",
|
|
24
|
+
"@purpurds/tokens": "5.18.3"
|
|
25
25
|
},
|
|
26
26
|
"devDependencies": {
|
|
27
27
|
"@rushstack/eslint-patch": "~1.10.0",
|
|
@@ -4,7 +4,7 @@ $animation-settings: var(--purpur-motion-duration-200) var(--purpur-motion-easin
|
|
|
4
4
|
|
|
5
5
|
.purpur-drawer-content {
|
|
6
6
|
animation: drawerSmallScreenAnimation $animation-settings;
|
|
7
|
-
height:
|
|
7
|
+
height: 90vh;
|
|
8
8
|
max-width: 100%;
|
|
9
9
|
position: absolute;
|
|
10
10
|
right: 0;
|
|
@@ -14,7 +14,7 @@ $animation-settings: var(--purpur-motion-duration-200) var(--purpur-motion-easin
|
|
|
14
14
|
|
|
15
15
|
@media screen and (min-width: $purpur-breakpoint-md) {
|
|
16
16
|
animation: drawerLargeScreenAnimation $animation-settings;
|
|
17
|
-
height:
|
|
17
|
+
height: 100vh;
|
|
18
18
|
max-width: calc(30rem * var(--purpur-rescale));
|
|
19
19
|
top: 0;
|
|
20
20
|
}
|
package/src/drawer.module.scss
CHANGED
package/src/drawer.stories.tsx
CHANGED
|
@@ -61,6 +61,82 @@ const StorybookTestBodyContent = () => {
|
|
|
61
61
|
);
|
|
62
62
|
};
|
|
63
63
|
|
|
64
|
+
const StorybookMultiDrawerTestComponent = () => {
|
|
65
|
+
const [open1, setOpen1] = React.useState(false);
|
|
66
|
+
const [open2, setOpen2] = React.useState(false);
|
|
67
|
+
const [open3, setOpen3] = React.useState(false);
|
|
68
|
+
return (
|
|
69
|
+
<div>
|
|
70
|
+
<div style={{ padding: "20px", border: "1px solid black" }}>
|
|
71
|
+
<Drawer open={open1} onOpenChange={setOpen1}>
|
|
72
|
+
<Drawer.Trigger>
|
|
73
|
+
<Button variant="primary">Open drawer 1</Button>
|
|
74
|
+
</Drawer.Trigger>
|
|
75
|
+
<Drawer.Content
|
|
76
|
+
backButton
|
|
77
|
+
backButtonText="Back"
|
|
78
|
+
backButtonOnlyIcon={false}
|
|
79
|
+
bodyText="This is the body text"
|
|
80
|
+
closeButtonText="Close drawer"
|
|
81
|
+
onBackButtonClick={() => {
|
|
82
|
+
return undefined;
|
|
83
|
+
}}
|
|
84
|
+
footerContent={<StorybookTestFooterContent />}
|
|
85
|
+
title="This is drawer 1"
|
|
86
|
+
stickyFooter
|
|
87
|
+
>
|
|
88
|
+
<StorybookTestBodyContent />
|
|
89
|
+
</Drawer.Content>
|
|
90
|
+
</Drawer>
|
|
91
|
+
</div>
|
|
92
|
+
<div style={{ padding: "20px", border: "1px solid black" }}>
|
|
93
|
+
<Drawer open={open2} onOpenChange={setOpen2}>
|
|
94
|
+
<Drawer.Trigger>
|
|
95
|
+
<Button variant="primary">Open drawer 2</Button>
|
|
96
|
+
</Drawer.Trigger>
|
|
97
|
+
<Drawer.Content
|
|
98
|
+
backButton
|
|
99
|
+
backButtonText="Back"
|
|
100
|
+
backButtonOnlyIcon={false}
|
|
101
|
+
bodyText="This is the body text"
|
|
102
|
+
closeButtonText="Close drawer"
|
|
103
|
+
onBackButtonClick={() => {
|
|
104
|
+
return undefined;
|
|
105
|
+
}}
|
|
106
|
+
footerContent={<StorybookTestFooterContent />}
|
|
107
|
+
title="This is drawer 2"
|
|
108
|
+
stickyFooter
|
|
109
|
+
>
|
|
110
|
+
<StorybookTestBodyContent />
|
|
111
|
+
</Drawer.Content>
|
|
112
|
+
</Drawer>
|
|
113
|
+
</div>
|
|
114
|
+
<div style={{ padding: "20px", border: "1px solid black" }}>
|
|
115
|
+
<Drawer open={open3} onOpenChange={setOpen3}>
|
|
116
|
+
<Drawer.Trigger>
|
|
117
|
+
<Button variant="primary">Open drawer 3</Button>
|
|
118
|
+
</Drawer.Trigger>
|
|
119
|
+
<Drawer.Content
|
|
120
|
+
backButton
|
|
121
|
+
backButtonText="Back"
|
|
122
|
+
backButtonOnlyIcon={false}
|
|
123
|
+
bodyText="This is the body text"
|
|
124
|
+
closeButtonText="Close drawer"
|
|
125
|
+
onBackButtonClick={() => {
|
|
126
|
+
return undefined;
|
|
127
|
+
}}
|
|
128
|
+
footerContent={<StorybookTestFooterContent />}
|
|
129
|
+
title="This is drawer 3"
|
|
130
|
+
stickyFooter
|
|
131
|
+
>
|
|
132
|
+
<StorybookTestBodyContent />
|
|
133
|
+
</Drawer.Content>
|
|
134
|
+
</Drawer>
|
|
135
|
+
</div>
|
|
136
|
+
</div>
|
|
137
|
+
);
|
|
138
|
+
};
|
|
139
|
+
|
|
64
140
|
const StorybookTestFooterContent = () => {
|
|
65
141
|
return (
|
|
66
142
|
<div style={{ textAlign: "center" }}>
|
|
@@ -117,40 +193,8 @@ type DrawerStory = StoryObj<typeof Drawer>;
|
|
|
117
193
|
|
|
118
194
|
export const ShowcaseForDrawer: DrawerStory = {
|
|
119
195
|
name: "Showcase",
|
|
120
|
-
render: (
|
|
121
|
-
|
|
122
|
-
DrawerProps,
|
|
123
|
-
(newArgs: Partial<DrawerProps>) => void,
|
|
124
|
-
(argNames?: (keyof DrawerProps)[] | undefined) => void
|
|
125
|
-
] = useArgs(); // eslint-disable-line react-hooks/rules-of-hooks
|
|
126
|
-
const handler = (isOpen: boolean) => {
|
|
127
|
-
updateArgs({ open: isOpen });
|
|
128
|
-
};
|
|
129
|
-
|
|
130
|
-
return (
|
|
131
|
-
<div>
|
|
132
|
-
<Drawer {...args} {...props} onOpenChange={handler}>
|
|
133
|
-
<Drawer.Trigger>
|
|
134
|
-
<Button variant="primary">Open drawer</Button>
|
|
135
|
-
</Drawer.Trigger>
|
|
136
|
-
<Drawer.Content
|
|
137
|
-
backButton
|
|
138
|
-
backButtonText="Back"
|
|
139
|
-
backButtonOnlyIcon={false}
|
|
140
|
-
bodyText="This is the body text"
|
|
141
|
-
closeButtonText="Close drawer"
|
|
142
|
-
onBackButtonClick={() => {
|
|
143
|
-
return undefined;
|
|
144
|
-
}}
|
|
145
|
-
footerContent={<StorybookTestFooterContent />}
|
|
146
|
-
title="Title"
|
|
147
|
-
stickyFooter
|
|
148
|
-
>
|
|
149
|
-
<StorybookTestBodyContent />
|
|
150
|
-
</Drawer.Content>
|
|
151
|
-
</Drawer>
|
|
152
|
-
</div>
|
|
153
|
-
);
|
|
196
|
+
render: () => {
|
|
197
|
+
return <StorybookMultiDrawerTestComponent />;
|
|
154
198
|
},
|
|
155
199
|
};
|
|
156
200
|
|