@nimbus-ds/sidebar 2.2.0 → 3.0.0-rc.1

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.
Files changed (3) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/dist/index.d.ts +196 -44
  3. package/package.json +9 -8
package/CHANGELOG.md CHANGED
@@ -2,6 +2,12 @@
2
2
 
3
3
  The Sidebar component is a large floating container that goes into the page from the corners. It allows us to present actions, forms or sections with a lot of information about the context of the page.
4
4
 
5
+ ## 2023-05-18 `3.0.0`
6
+
7
+ #### 🛠 Breaking changes
8
+
9
+ - Changed the dynamic sending option of the `zIndex` property to use `zIndex` in the component API. ([#162](https://github.com/TiendaNube/nimbus-design-system/pull/162) by [@juniorconquista](https://github.com/juniorconquista))
10
+
5
11
  ## 2023-03-13 `2.2.0`
6
12
 
7
13
  ### 💡 Others
@@ -38,6 +44,7 @@ The Sidebar component is a large floating container that goes into the page from
38
44
  - Removed `terser-webpack-plugin@5.3.5`. ([#63](https://github.com/TiendaNube/nimbus-design-system/pull/63) by [@juniorconquista](https://github.com/juniorconquista))
39
45
  - Removed `ts-loader@9.3.1`. ([#63](https://github.com/TiendaNube/nimbus-design-system/pull/63) by [@juniorconquista](https://github.com/juniorconquista))
40
46
  - Removed `webpack-cli@4.10.0`. ([#63](https://github.com/TiendaNube/nimbus-design-system/pull/63) by [@juniorconquista](https://github.com/juniorconquista))
47
+ - Removed `webpack@5.74.0`. ([#63](https://github.com/TiendaNube/nimbus-design-system/pull/63) by [@juniorconquista](https://github.com/juniorconquista))
41
48
  - Removed `typescript@4.7.4`. ([#63](https://github.com/TiendaNube/nimbus-design-system/pull/63) by [@juniorconquista](https://github.com/juniorconquista))
42
49
 
43
50
  ## 2022-12-01 `1.2.0`
package/dist/index.d.ts CHANGED
@@ -13,6 +13,58 @@ declare const sidebarSprinkle: {
13
13
  sprinkle: import("rainbow-sprinkles/dist/declarations/src/createRuntimeFn").SprinklesFn<[
14
14
  {
15
15
  config: {
16
+ zIndex: {
17
+ values: {
18
+ 100: {
19
+ default: string;
20
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
21
+ };
22
+ 200: {
23
+ default: string;
24
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
25
+ };
26
+ 300: {
27
+ default: string;
28
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
29
+ };
30
+ 400: {
31
+ default: string;
32
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
33
+ };
34
+ 500: {
35
+ default: string;
36
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
37
+ };
38
+ 600: {
39
+ default: string;
40
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
41
+ };
42
+ 700: {
43
+ default: string;
44
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
45
+ };
46
+ 800: {
47
+ default: string;
48
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
49
+ };
50
+ 900: {
51
+ default: string;
52
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
53
+ };
54
+ };
55
+ staticScale: {
56
+ "100": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
57
+ "200": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
58
+ "300": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
59
+ "400": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
60
+ "500": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
61
+ "600": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
62
+ "700": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
63
+ "800": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
64
+ "900": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
65
+ };
66
+ name: "zIndex";
67
+ };
16
68
  padding: {
17
69
  values: {
18
70
  base: {
@@ -50,28 +102,27 @@ declare const sidebarSprinkle: {
50
102
  conditions: Record<"xs" | "md" | "lg" | "xl", string>;
51
103
  };
52
104
  };
53
- zIndex: {
54
- dynamic: {
55
- default: string;
56
- conditions: Record<"xs" | "md" | "lg" | "xl", string>;
57
- };
58
- dynamicScale: true;
59
- name: "zIndex";
60
- vars: {
61
- default: string;
62
- conditions: Record<"xs" | "md" | "lg" | "xl", string>;
63
- };
64
- };
65
105
  };
66
106
  } & {
67
107
  config: {
68
108
  [x: string]: {
69
- mappings: ("maxWidth" | "zIndex" | "padding")[];
109
+ mappings: ("zIndex" | "maxWidth" | "padding")[];
70
110
  };
71
111
  };
72
112
  }
73
113
  ]>;
74
114
  properties: {
115
+ zIndex: {
116
+ "100": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
117
+ "200": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
118
+ "300": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
119
+ "400": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
120
+ "500": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
121
+ "600": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
122
+ "700": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
123
+ "800": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
124
+ "900": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
125
+ };
75
126
  padding: {
76
127
  base: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
77
128
  small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -80,15 +131,79 @@ declare const sidebarSprinkle: {
80
131
  };
81
132
  };
82
133
  export type SidebarPaddingProperties = keyof typeof sidebarSprinkle.properties.padding;
134
+ export type SidebarZIndexProperties = keyof typeof sidebarSprinkle.properties.zIndex;
83
135
  export interface SidebarSprinkle {
136
+ /**
137
+ * The maxWidth property specifies the maxWidth of a sidebar's content area.
138
+ * @default 375px
139
+ */
84
140
  maxWidth?: string | Conditions<string>;
85
- zIndex?: number | Conditions<number>;
141
+ /**
142
+ * The zIndex property specifies the stack order of the sidebar.
143
+ */
144
+ zIndex?: SidebarZIndexProperties | Conditions<SidebarZIndexProperties>;
145
+ /**
146
+ * The padding properties are used to generate space around an sidebar's content area.
147
+ * @default base
148
+ */
86
149
  padding?: SidebarPaddingProperties | Conditions<SidebarPaddingProperties>;
87
150
  }
88
151
  declare const sidebar: {
89
152
  sprinkle: import("rainbow-sprinkles/dist/declarations/src/createRuntimeFn").SprinklesFn<[
90
153
  {
91
154
  config: {
155
+ zIndex: {
156
+ values: {
157
+ 100: {
158
+ default: string;
159
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
160
+ };
161
+ 200: {
162
+ default: string;
163
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
164
+ };
165
+ 300: {
166
+ default: string;
167
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
168
+ };
169
+ 400: {
170
+ default: string;
171
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
172
+ };
173
+ 500: {
174
+ default: string;
175
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
176
+ };
177
+ 600: {
178
+ default: string;
179
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
180
+ };
181
+ 700: {
182
+ default: string;
183
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
184
+ };
185
+ 800: {
186
+ default: string;
187
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
188
+ };
189
+ 900: {
190
+ default: string;
191
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
192
+ };
193
+ };
194
+ staticScale: {
195
+ "100": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
196
+ "200": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
197
+ "300": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
198
+ "400": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
199
+ "500": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
200
+ "600": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
201
+ "700": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
202
+ "800": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
203
+ "900": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
204
+ };
205
+ name: "zIndex";
206
+ };
92
207
  padding: {
93
208
  values: {
94
209
  base: {
@@ -126,28 +241,27 @@ declare const sidebar: {
126
241
  conditions: Record<"xs" | "md" | "lg" | "xl", string>;
127
242
  };
128
243
  };
129
- zIndex: {
130
- dynamic: {
131
- default: string;
132
- conditions: Record<"xs" | "md" | "lg" | "xl", string>;
133
- };
134
- dynamicScale: true;
135
- name: "zIndex";
136
- vars: {
137
- default: string;
138
- conditions: Record<"xs" | "md" | "lg" | "xl", string>;
139
- };
140
- };
141
244
  };
142
245
  } & {
143
246
  config: {
144
247
  [x: string]: {
145
- mappings: ("maxWidth" | "zIndex" | "padding")[];
248
+ mappings: ("zIndex" | "maxWidth" | "padding")[];
146
249
  };
147
250
  };
148
251
  }
149
252
  ]>;
150
253
  properties: {
254
+ zIndex: {
255
+ "100": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
256
+ "200": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
257
+ "300": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
258
+ "400": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
259
+ "500": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
260
+ "600": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
261
+ "700": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
262
+ "800": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
263
+ "900": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
264
+ };
151
265
  padding: {
152
266
  base: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
153
267
  small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -164,47 +278,85 @@ declare const sidebar: {
164
278
  isVisible: string;
165
279
  };
166
280
  };
167
- export interface SidebarBodyProps extends HTMLAttributes<HTMLElement> {
168
- /** Body content */
281
+ export interface SidebarBodyProperties {
282
+ /**
283
+ * The content of the sidebar body.
284
+ * @TJS-type React.ReactNode
285
+ */
169
286
  children: ReactNode;
170
- /** Sidebar padding */
287
+ /**
288
+ * The padding properties are used to generate space around an sidebar's body content area.
289
+ * @default base
290
+ */
171
291
  padding?: keyof typeof sidebar.properties.padding;
172
292
  }
293
+ export type SidebarBodyProps = SidebarBodyProperties & HTMLAttributes<HTMLElement>;
173
294
  declare const SidebarBody: React.FC<SidebarBodyProps>;
174
- export interface SidebarFooterProps extends HTMLAttributes<HTMLElement> {
175
- /** Footer content */
295
+ export interface SidebarFooterProperties {
296
+ /**
297
+ * The content of the sidebar footer.
298
+ * @TJS-type React.ReactNode
299
+ */
176
300
  children: ReactNode;
177
- /** Sidebar padding */
301
+ /**
302
+ * The padding properties are used to generate space around an sidebar's footer content area.
303
+ * @default base
304
+ */
178
305
  padding?: keyof typeof sidebar.properties.padding;
179
306
  }
307
+ export type SidebarFooterProps = SidebarFooterProperties & HTMLAttributes<HTMLElement>;
180
308
  declare const SidebarFooter: React.FC<SidebarFooterProps>;
181
- export interface SidebarHeaderProps extends HTMLAttributes<HTMLElement> {
182
- /** Header content */
309
+ export interface SidebarHeaderProperties {
310
+ /**
311
+ * The content of the sidebar header.
312
+ * @TJS-type React.ReactNode
313
+ */
183
314
  children?: ReactNode;
184
- /** Header title */
315
+ /**
316
+ * The title to display in the sidebar header.
317
+ */
185
318
  title?: string;
186
- /** Sidebar padding */
319
+ /**
320
+ * The padding properties are used to generate space around an sidebar's header content area.
321
+ * @default base
322
+ */
187
323
  padding?: keyof typeof sidebar.properties.padding;
188
324
  }
325
+ export type SidebarHeaderProps = SidebarHeaderProperties & HTMLAttributes<HTMLElement>;
189
326
  declare const SidebarHeader: React.FC<SidebarHeaderProps>;
190
- export type SidebarExtends = SidebarSprinkle & HTMLAttributes<HTMLDivElement>;
191
327
  export interface SidebarComponents {
192
328
  Body: typeof SidebarBody;
193
329
  Footer: typeof SidebarFooter;
194
330
  Header: typeof SidebarHeader;
195
331
  }
196
- export interface SidebarProps extends SidebarExtends {
197
- /** Sidebar position */
332
+ export interface SidebarProperties extends SidebarSprinkle {
333
+ /**
334
+ * Side from which the sidebar will appear.
335
+ * @default right
336
+ */
198
337
  position?: "right" | "left";
199
- /** Sidebar padding */
338
+ /**
339
+ * The padding properties are used to generate space around an sidebar's content area.
340
+ * @default base
341
+ */
200
342
  padding?: keyof typeof sidebar.properties.padding;
201
- /** Sidebar body content */
343
+ /**
344
+ * The content of the sidebar.
345
+ * @TJS-type React.ReactNode
346
+ */
202
347
  children: ReactNode;
203
- /** Function to be passed on actioning the dismiss button */
348
+ /**
349
+ * Callback fired when the component requests to be closed.
350
+ * () => void;
351
+ */
204
352
  onRemove?: () => void;
205
- /** Controls the menu display */
353
+ /**
354
+ * Determines if the sidebar is shown or not.
355
+ * @default true
356
+ */
206
357
  open?: boolean;
207
358
  }
359
+ export type SidebarProps = SidebarProperties & HTMLAttributes<HTMLDivElement>;
208
360
  export declare const Sidebar: React.FC<SidebarProps> & SidebarComponents;
209
361
 
210
362
  export {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nimbus-ds/sidebar",
3
- "version": "2.2.0",
3
+ "version": "3.0.0-rc.1",
4
4
  "license": "MIT",
5
5
  "main": "dist/index.js",
6
6
  "files": [
@@ -9,13 +9,13 @@
9
9
  ],
10
10
  "sideEffects": false,
11
11
  "scripts": {
12
- "build": "webpack",
12
+ "build": "yarn g:webpack",
13
13
  "clean": "rm -rf dist",
14
14
  "version": "yarn version"
15
15
  },
16
16
  "dependencies": {
17
17
  "@floating-ui/react-dom-interactions": "^0.10.1",
18
- "@nimbus-ds/title": "^3.0.0"
18
+ "@nimbus-ds/title": "^3.1.0"
19
19
  },
20
20
  "peerDependencies": {
21
21
  "react": "^16.8 || ^17.0 || ^18.0",
@@ -30,9 +30,10 @@
30
30
  "url": "https://github.com/TiendaNube/nimbus-design-system/issues"
31
31
  },
32
32
  "devDependencies": {
33
- "@nimbus-ds/box": "^3.0.0",
34
- "@nimbus-ds/button": "^2.4.0",
35
- "@nimbus-ds/text": "^6.0.0",
36
- "webpack": "^5.74.0"
37
- }
33
+ "@nimbus-ds/box": "^4.0.0-rc.1",
34
+ "@nimbus-ds/button": "^2.5.0",
35
+ "@nimbus-ds/text": "^6.1.0",
36
+ "@nimbus-ds/webpack": "^1.3.0"
37
+ },
38
+ "stableVersion": "2.2.0"
38
39
  }