@atom-learning/components 2.21.0 → 2.22.0

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 (12) hide show
  1. package/CHANGELOG.md +2 -3
  2. package/dist/components/sidedrawer/SidedrawerAccordion/SidedrawerAccordionContent.d.ts +268 -1
  3. package/dist/components/sidedrawer/SidedrawerAccordion/SidedrawerAccordionContent.js +1 -1
  4. package/dist/components/sidedrawer/SidedrawerAccordion/SidedrawerAccordionTrigger.d.ts +270 -1
  5. package/dist/components/sidedrawer/SidedrawerAccordion/SidedrawerAccordionTrigger.js +1 -1
  6. package/dist/components/sidedrawer/SidedrawerContent.d.ts +268 -1
  7. package/dist/components/sidedrawer/SidedrawerContent.js +1 -1
  8. package/dist/components/sidedrawer/SidedrawerHeader.d.ts +268 -1
  9. package/dist/components/sidedrawer/SidedrawerHeader.js +1 -1
  10. package/dist/docgen.json +1 -1
  11. package/dist/index.cjs.js +1 -1
  12. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,10 +1,9 @@
1
- # [2.21.0](https://github.com/Atom-Learning/components/compare/v2.20.0...v2.21.0) (2022-12-05)
1
+ # [2.22.0](https://github.com/Atom-Learning/components/compare/v2.21.0...v2.22.0) (2022-12-07)
2
2
 
3
3
 
4
4
  ### Features
5
5
 
6
- * remove all uses of color inherit when used with Text or Heading ([9dde805](https://github.com/Atom-Learning/components/commit/9dde805856befa95f6def3c22d521fd585bf8dd3))
7
- * remove hardcoded color from Text and Heading ([676f382](https://github.com/Atom-Learning/components/commit/676f3824fd6cbaaad4bf011349b67b76119606de))
6
+ * sidedrawer - remaining props to allow custom styling. fix for content height ([b6b2081](https://github.com/Atom-Learning/components/commit/b6b2081608fa68fbf2fd1da02c59000a82d090e9))
8
7
 
9
8
  # [1.4.0](https://github.com/Atom-Learning/components/compare/v1.3.0...v1.4.0) (2022-04-11)
10
9
 
package/dist/components/sidedrawer/SidedrawerAccordion/SidedrawerAccordionContent.d.ts CHANGED
@@ -1,2 +1,269 @@
1
1
  import React from 'react';
2
- export declare const SidedrawerAccordionContent: React.FC;
2
+ declare const StyledContent: import("@stitches/react/types/styled-component").StyledComponent<React.ForwardRefExoticComponent<import("@radix-ui/react-accordion").AccordionContentProps & React.RefAttributes<HTMLDivElement>>, {}, {
3
+ sm: string;
4
+ md: string;
5
+ lg: string;
6
+ xl: string;
7
+ reducedMotion: string;
8
+ allowMotion: string;
9
+ hover: string;
10
+ }, import("@stitches/react/types/css-util").CSS<{
11
+ sm: string;
12
+ md: string;
13
+ lg: string;
14
+ xl: string;
15
+ reducedMotion: string;
16
+ allowMotion: string;
17
+ hover: string;
18
+ }, {
19
+ colors: {
20
+ textForeground: any;
21
+ textSubtle: any;
22
+ textPlaceholder: any;
23
+ background: any;
24
+ backgroundAccent: any;
25
+ tonal50: any;
26
+ tonal100: any;
27
+ tonal200: any;
28
+ tonal300: any;
29
+ tonal400: any;
30
+ tonal500: any;
31
+ tonal600: any;
32
+ alpha100: any;
33
+ alpha150: any;
34
+ alpha200: any;
35
+ alpha250: any;
36
+ alpha600: any;
37
+ primaryLight: any;
38
+ primary: any;
39
+ primaryMid: any;
40
+ primaryDark: any;
41
+ secondary: any;
42
+ brandRed: any;
43
+ brandRedAccent: any;
44
+ brandGreen: any;
45
+ brandGreenAccent: any;
46
+ brandPurple: any;
47
+ brandPurpleAccent: any;
48
+ brandYellow: any;
49
+ brandYellowAccent: any;
50
+ successLight: any;
51
+ success: any;
52
+ successMid: any;
53
+ successDark: any;
54
+ dangerLight: any;
55
+ danger: any;
56
+ dangerMid: any;
57
+ dangerDark: any;
58
+ warningLight: any;
59
+ warning: any;
60
+ warningMid: any;
61
+ warningDark: any;
62
+ warningText: any;
63
+ subjectEnglish: any;
64
+ subjectMaths: any;
65
+ subjectScience: any;
66
+ subjectVerbalReasoning: any;
67
+ subjectNonVerbalReasoning: any;
68
+ subjectCreativeWriting: any;
69
+ subjectExamSkills: any;
70
+ };
71
+ space: {
72
+ "0": any;
73
+ "1": any;
74
+ "2": any;
75
+ "3": any;
76
+ "4": any;
77
+ "5": any;
78
+ "6": any;
79
+ "7": any;
80
+ "8": any;
81
+ "9": any;
82
+ };
83
+ fontSizes: {
84
+ xs: any;
85
+ sm: any;
86
+ md: any;
87
+ lg: any;
88
+ xl: any;
89
+ "2xl": any;
90
+ "3xl": any;
91
+ "4xl": any;
92
+ };
93
+ fonts: {
94
+ sans: any;
95
+ mono: any;
96
+ display: any;
97
+ body: any;
98
+ };
99
+ sizes: {
100
+ "0": any;
101
+ "1": any;
102
+ "2": any;
103
+ "3": any;
104
+ "4": any;
105
+ "5": any;
106
+ "6": any;
107
+ "7": any;
108
+ "8": any;
109
+ };
110
+ radii: {
111
+ "0": any;
112
+ "1": any;
113
+ "2": any;
114
+ "3": any;
115
+ round: any;
116
+ };
117
+ shadows: {
118
+ "0": any;
119
+ "1": any;
120
+ "2": any;
121
+ "3": any;
122
+ };
123
+ }, import("@stitches/react/types/config").DefaultThemeMap, {
124
+ bg: (value: {
125
+ readonly [$$PropertyValue]: "background";
126
+ }) => {
127
+ background: {
128
+ readonly [$$PropertyValue]: "background";
129
+ };
130
+ };
131
+ inset: (value: string | number | {
132
+ readonly [$$ScaleValue]: "space";
133
+ }) => {
134
+ top: string | number | {
135
+ readonly [$$ScaleValue]: "space";
136
+ };
137
+ right: string | number | {
138
+ readonly [$$ScaleValue]: "space";
139
+ };
140
+ bottom: string | number | {
141
+ readonly [$$ScaleValue]: "space";
142
+ };
143
+ left: string | number | {
144
+ readonly [$$ScaleValue]: "space";
145
+ };
146
+ };
147
+ size: (value: string | number | {
148
+ readonly [$$ScaleValue]: "size";
149
+ }) => {
150
+ height: string | number | {
151
+ readonly [$$ScaleValue]: "size";
152
+ };
153
+ width: string | number | {
154
+ readonly [$$ScaleValue]: "size";
155
+ };
156
+ };
157
+ p: (value: string | number | {
158
+ readonly [$$ScaleValue]: "space";
159
+ }) => {
160
+ padding: string | number | {
161
+ readonly [$$ScaleValue]: "space";
162
+ };
163
+ };
164
+ pt: (value: string | number | {
165
+ readonly [$$ScaleValue]: "space";
166
+ }) => {
167
+ paddingTop: string | number | {
168
+ readonly [$$ScaleValue]: "space";
169
+ };
170
+ };
171
+ pr: (value: string | number | {
172
+ readonly [$$ScaleValue]: "space";
173
+ }) => {
174
+ paddingRight: string | number | {
175
+ readonly [$$ScaleValue]: "space";
176
+ };
177
+ };
178
+ pb: (value: string | number | {
179
+ readonly [$$ScaleValue]: "space";
180
+ }) => {
181
+ paddingBottom: string | number | {
182
+ readonly [$$ScaleValue]: "space";
183
+ };
184
+ };
185
+ pl: (value: string | number | {
186
+ readonly [$$ScaleValue]: "space";
187
+ }) => {
188
+ paddingLeft: string | number | {
189
+ readonly [$$ScaleValue]: "space";
190
+ };
191
+ };
192
+ px: (value: string | number | {
193
+ readonly [$$ScaleValue]: "space";
194
+ }) => {
195
+ paddingLeft: string | number | {
196
+ readonly [$$ScaleValue]: "space";
197
+ };
198
+ paddingRight: string | number | {
199
+ readonly [$$ScaleValue]: "space";
200
+ };
201
+ };
202
+ py: (value: string | number | {
203
+ readonly [$$ScaleValue]: "space";
204
+ }) => {
205
+ paddingTop: string | number | {
206
+ readonly [$$ScaleValue]: "space";
207
+ };
208
+ paddingBottom: string | number | {
209
+ readonly [$$ScaleValue]: "space";
210
+ };
211
+ };
212
+ m: (value: string | number | {
213
+ readonly [$$ScaleValue]: "space";
214
+ }) => {
215
+ margin: string | number | {
216
+ readonly [$$ScaleValue]: "space";
217
+ };
218
+ };
219
+ mt: (value: string | number | {
220
+ readonly [$$ScaleValue]: "space";
221
+ }) => {
222
+ marginTop: string | number | {
223
+ readonly [$$ScaleValue]: "space";
224
+ };
225
+ };
226
+ mr: (value: string | number | {
227
+ readonly [$$ScaleValue]: "space";
228
+ }) => {
229
+ marginRight: string | number | {
230
+ readonly [$$ScaleValue]: "space";
231
+ };
232
+ };
233
+ mb: (value: string | number | {
234
+ readonly [$$ScaleValue]: "space";
235
+ }) => {
236
+ marginBottom: string | number | {
237
+ readonly [$$ScaleValue]: "space";
238
+ };
239
+ };
240
+ ml: (value: string | number | {
241
+ readonly [$$ScaleValue]: "space";
242
+ }) => {
243
+ marginLeft: string | number | {
244
+ readonly [$$ScaleValue]: "space";
245
+ };
246
+ };
247
+ mx: (value: string | number | {
248
+ readonly [$$ScaleValue]: "space";
249
+ }) => {
250
+ marginLeft: string | number | {
251
+ readonly [$$ScaleValue]: "space";
252
+ };
253
+ marginRight: string | number | {
254
+ readonly [$$ScaleValue]: "space";
255
+ };
256
+ };
257
+ my: (value: string | number | {
258
+ readonly [$$ScaleValue]: "space";
259
+ }) => {
260
+ marginTop: string | number | {
261
+ readonly [$$ScaleValue]: "space";
262
+ };
263
+ marginBottom: string | number | {
264
+ readonly [$$ScaleValue]: "space";
265
+ };
266
+ };
267
+ }>>;
268
+ export declare const SidedrawerAccordionContent: React.FC<React.ComponentProps<typeof StyledContent>>;
269
+ export {};
package/dist/components/sidedrawer/SidedrawerAccordion/SidedrawerAccordionContent.js CHANGED
@@ -1 +1 @@
1
- import t from"react";import{Content as n}from"@radix-ui/react-accordion";import{Box as r}from"../../box/Box.js";import{keyframes as o,styled as i}from"../../../stitches.js";const m=o({from:{height:0},to:{height:"var(--radix-accordion-content-height)"}}),d=o({from:{height:"var(--radix-accordion-content-height)"},to:{height:0}}),h=i(n,{bg:"white",overflow:"hidden","@allowMotion":{'&[data-state="open"]':{animation:`${m} 300ms ease-out`},'&[data-state="closed"]':{animation:`${d} 300ms ease-out`}}}),c=({children:e})=>t.createElement(h,null,t.Children.map(e,a=>t.createElement(r,{css:{"> a":{px:"$6"},"> button":{px:"$6"}}},a)));export{c as SidedrawerAccordionContent};
1
+ import t from"react";import{Content as i}from"@radix-ui/react-accordion";import{Box as n}from"../../box/Box.js";import{keyframes as o,styled as m}from"../../../stitches.js";const c=o({from:{height:0},to:{height:"var(--radix-accordion-content-height)"}}),d=o({from:{height:"var(--radix-accordion-content-height)"},to:{height:0}}),h=m(i,{bg:"white",overflow:"hidden","@allowMotion":{'&[data-state="open"]':{animation:`${c} 300ms ease-out`},'&[data-state="closed"]':{animation:`${d} 300ms ease-out`}}}),s=({children:e,...a})=>t.createElement(h,{...a},t.Children.map(e,r=>t.createElement(n,{css:{"> a":{px:"$6"},"> button":{px:"$6"}}},r)));export{s as SidedrawerAccordionContent};
package/dist/components/sidedrawer/SidedrawerAccordion/SidedrawerAccordionTrigger.d.ts CHANGED
@@ -1,2 +1,271 @@
1
1
  import React from 'react';
2
- export declare const SidedrawerAccordionTrigger: React.FC;
2
+ declare const StyledTrigger: import("@stitches/react/types/styled-component").StyledComponent<React.ForwardRefExoticComponent<import("@radix-ui/react-accordion").AccordionTriggerProps & React.RefAttributes<HTMLButtonElement>>, {
3
+ active?: boolean | "true" | undefined;
4
+ }, {
5
+ sm: string;
6
+ md: string;
7
+ lg: string;
8
+ xl: string;
9
+ reducedMotion: string;
10
+ allowMotion: string;
11
+ hover: string;
12
+ }, import("@stitches/react/types/css-util").CSS<{
13
+ sm: string;
14
+ md: string;
15
+ lg: string;
16
+ xl: string;
17
+ reducedMotion: string;
18
+ allowMotion: string;
19
+ hover: string;
20
+ }, {
21
+ colors: {
22
+ textForeground: any;
23
+ textSubtle: any;
24
+ textPlaceholder: any;
25
+ background: any;
26
+ backgroundAccent: any;
27
+ tonal50: any;
28
+ tonal100: any;
29
+ tonal200: any;
30
+ tonal300: any;
31
+ tonal400: any;
32
+ tonal500: any;
33
+ tonal600: any;
34
+ alpha100: any;
35
+ alpha150: any;
36
+ alpha200: any;
37
+ alpha250: any;
38
+ alpha600: any;
39
+ primaryLight: any;
40
+ primary: any;
41
+ primaryMid: any;
42
+ primaryDark: any;
43
+ secondary: any;
44
+ brandRed: any;
45
+ brandRedAccent: any;
46
+ brandGreen: any;
47
+ brandGreenAccent: any;
48
+ brandPurple: any;
49
+ brandPurpleAccent: any;
50
+ brandYellow: any;
51
+ brandYellowAccent: any;
52
+ successLight: any;
53
+ success: any;
54
+ successMid: any;
55
+ successDark: any;
56
+ dangerLight: any;
57
+ danger: any;
58
+ dangerMid: any;
59
+ dangerDark: any;
60
+ warningLight: any;
61
+ warning: any;
62
+ warningMid: any;
63
+ warningDark: any;
64
+ warningText: any;
65
+ subjectEnglish: any;
66
+ subjectMaths: any;
67
+ subjectScience: any;
68
+ subjectVerbalReasoning: any;
69
+ subjectNonVerbalReasoning: any;
70
+ subjectCreativeWriting: any;
71
+ subjectExamSkills: any;
72
+ };
73
+ space: {
74
+ "0": any;
75
+ "1": any;
76
+ "2": any;
77
+ "3": any;
78
+ "4": any;
79
+ "5": any;
80
+ "6": any;
81
+ "7": any;
82
+ "8": any;
83
+ "9": any;
84
+ };
85
+ fontSizes: {
86
+ xs: any;
87
+ sm: any;
88
+ md: any;
89
+ lg: any;
90
+ xl: any;
91
+ "2xl": any;
92
+ "3xl": any;
93
+ "4xl": any;
94
+ };
95
+ fonts: {
96
+ sans: any;
97
+ mono: any;
98
+ display: any;
99
+ body: any;
100
+ };
101
+ sizes: {
102
+ "0": any;
103
+ "1": any;
104
+ "2": any;
105
+ "3": any;
106
+ "4": any;
107
+ "5": any;
108
+ "6": any;
109
+ "7": any;
110
+ "8": any;
111
+ };
112
+ radii: {
113
+ "0": any;
114
+ "1": any;
115
+ "2": any;
116
+ "3": any;
117
+ round: any;
118
+ };
119
+ shadows: {
120
+ "0": any;
121
+ "1": any;
122
+ "2": any;
123
+ "3": any;
124
+ };
125
+ }, import("@stitches/react/types/config").DefaultThemeMap, {
126
+ bg: (value: {
127
+ readonly [$$PropertyValue]: "background";
128
+ }) => {
129
+ background: {
130
+ readonly [$$PropertyValue]: "background";
131
+ };
132
+ };
133
+ inset: (value: string | number | {
134
+ readonly [$$ScaleValue]: "space";
135
+ }) => {
136
+ top: string | number | {
137
+ readonly [$$ScaleValue]: "space";
138
+ };
139
+ right: string | number | {
140
+ readonly [$$ScaleValue]: "space";
141
+ };
142
+ bottom: string | number | {
143
+ readonly [$$ScaleValue]: "space";
144
+ };
145
+ left: string | number | {
146
+ readonly [$$ScaleValue]: "space";
147
+ };
148
+ };
149
+ size: (value: string | number | {
150
+ readonly [$$ScaleValue]: "size";
151
+ }) => {
152
+ height: string | number | {
153
+ readonly [$$ScaleValue]: "size";
154
+ };
155
+ width: string | number | {
156
+ readonly [$$ScaleValue]: "size";
157
+ };
158
+ };
159
+ p: (value: string | number | {
160
+ readonly [$$ScaleValue]: "space";
161
+ }) => {
162
+ padding: string | number | {
163
+ readonly [$$ScaleValue]: "space";
164
+ };
165
+ };
166
+ pt: (value: string | number | {
167
+ readonly [$$ScaleValue]: "space";
168
+ }) => {
169
+ paddingTop: string | number | {
170
+ readonly [$$ScaleValue]: "space";
171
+ };
172
+ };
173
+ pr: (value: string | number | {
174
+ readonly [$$ScaleValue]: "space";
175
+ }) => {
176
+ paddingRight: string | number | {
177
+ readonly [$$ScaleValue]: "space";
178
+ };
179
+ };
180
+ pb: (value: string | number | {
181
+ readonly [$$ScaleValue]: "space";
182
+ }) => {
183
+ paddingBottom: string | number | {
184
+ readonly [$$ScaleValue]: "space";
185
+ };
186
+ };
187
+ pl: (value: string | number | {
188
+ readonly [$$ScaleValue]: "space";
189
+ }) => {
190
+ paddingLeft: string | number | {
191
+ readonly [$$ScaleValue]: "space";
192
+ };
193
+ };
194
+ px: (value: string | number | {
195
+ readonly [$$ScaleValue]: "space";
196
+ }) => {
197
+ paddingLeft: string | number | {
198
+ readonly [$$ScaleValue]: "space";
199
+ };
200
+ paddingRight: string | number | {
201
+ readonly [$$ScaleValue]: "space";
202
+ };
203
+ };
204
+ py: (value: string | number | {
205
+ readonly [$$ScaleValue]: "space";
206
+ }) => {
207
+ paddingTop: string | number | {
208
+ readonly [$$ScaleValue]: "space";
209
+ };
210
+ paddingBottom: string | number | {
211
+ readonly [$$ScaleValue]: "space";
212
+ };
213
+ };
214
+ m: (value: string | number | {
215
+ readonly [$$ScaleValue]: "space";
216
+ }) => {
217
+ margin: string | number | {
218
+ readonly [$$ScaleValue]: "space";
219
+ };
220
+ };
221
+ mt: (value: string | number | {
222
+ readonly [$$ScaleValue]: "space";
223
+ }) => {
224
+ marginTop: string | number | {
225
+ readonly [$$ScaleValue]: "space";
226
+ };
227
+ };
228
+ mr: (value: string | number | {
229
+ readonly [$$ScaleValue]: "space";
230
+ }) => {
231
+ marginRight: string | number | {
232
+ readonly [$$ScaleValue]: "space";
233
+ };
234
+ };
235
+ mb: (value: string | number | {
236
+ readonly [$$ScaleValue]: "space";
237
+ }) => {
238
+ marginBottom: string | number | {
239
+ readonly [$$ScaleValue]: "space";
240
+ };
241
+ };
242
+ ml: (value: string | number | {
243
+ readonly [$$ScaleValue]: "space";
244
+ }) => {
245
+ marginLeft: string | number | {
246
+ readonly [$$ScaleValue]: "space";
247
+ };
248
+ };
249
+ mx: (value: string | number | {
250
+ readonly [$$ScaleValue]: "space";
251
+ }) => {
252
+ marginLeft: string | number | {
253
+ readonly [$$ScaleValue]: "space";
254
+ };
255
+ marginRight: string | number | {
256
+ readonly [$$ScaleValue]: "space";
257
+ };
258
+ };
259
+ my: (value: string | number | {
260
+ readonly [$$ScaleValue]: "space";
261
+ }) => {
262
+ marginTop: string | number | {
263
+ readonly [$$ScaleValue]: "space";
264
+ };
265
+ marginBottom: string | number | {
266
+ readonly [$$ScaleValue]: "space";
267
+ };
268
+ };
269
+ }>>;
270
+ export declare const SidedrawerAccordionTrigger: React.FC<React.ComponentProps<typeof StyledTrigger>>;
271
+ export {};
package/dist/components/sidedrawer/SidedrawerAccordion/SidedrawerAccordionTrigger.js CHANGED
@@ -1 +1 @@
1
- import{ChevronDown as o}from"@atom-learning/icons";import e from"react";import{Trigger as m,Header as n}from"@radix-ui/react-accordion";import{styled as t}from"../../../stitches.js";import{Icon as a}from"../../icon/Icon.js";import{Flex as i}from"../../flex/Flex.js";import{sidedrawerItemStyles as s}from"../Sidedrawer.styles.js";const l=t(m,{justifyContent:"space-between",m:0,p:0,"&[data-state=open]":{fontWeight:"600"},...s}),c=t(a,{transition:"transform 300ms",'[data-state="open"] > &':{transform:"rotate(180deg)"}}),d=({children:r})=>e.createElement(n,null,e.createElement(l,null,e.createElement(i,{css:{alignItems:"center"}},r),e.createElement(c,{is:o,size:"sm"})));export{d as SidedrawerAccordionTrigger};
1
+ import{ChevronDown as m}from"@atom-learning/icons";import e from"react";import{Trigger as n,Header as a}from"@radix-ui/react-accordion";import{styled as t}from"../../../stitches.js";import{Icon as i}from"../../icon/Icon.js";import{Flex as s}from"../../flex/Flex.js";import{sidedrawerItemStyles as c}from"../Sidedrawer.styles.js";const p=t(n,{justifyContent:"space-between",m:0,p:0,"&[data-state=open]":{fontWeight:"600"},...c}),d=t(i,{transition:"transform 300ms",'[data-state="open"] > &':{transform:"rotate(180deg)"}}),f=({children:r,...o})=>e.createElement(a,null,e.createElement(p,{...o},e.createElement(s,{css:{alignItems:"center"}},r),e.createElement(d,{is:m,size:"sm"})));export{f as SidedrawerAccordionTrigger};