Hugging Face's logo

Spaces:
aletrn
/
driver.js
Running

App Files Community
kamrify commited on
Commit
1a01674
·
1 Parent(s): 79edf8b

Popover positioning example

Browse files
Files changed (3) hide show
  1. docs/src/components/CodeSample.tsx +0 -1
  2. docs/src/content/guides/popover-position.mdx +181 -179
  3. docs/src/content/guides/tour-progress.mdx +2 -0
docs/src/components/CodeSample.tsx CHANGED
@@ -100,7 +100,6 @@ export function CodeSample(props: CodeSampleProps) {
100
  <div id={id} className={className}>
101
  {heading && <p className="text-lg -mt-0 font-medium text-black -mb-3 rounded-md">{heading}</p>}
102
  {children && <div className="-mb-4">{children}</div>}
103
- {!children && <div className="mb-1"></div>}
104
  <button onClick={onClick} className="w-full rounded-md bg-black p-2 text-white">
105
  {buttonText}
106
  </button>
 
100
  <div id={id} className={className}>
101
  {heading && <p className="text-lg -mt-0 font-medium text-black -mb-3 rounded-md">{heading}</p>}
102
  {children && <div className="-mb-4">{children}</div>}
 
103
  <button onClick={onClick} className="w-full rounded-md bg-black p-2 text-white">
104
  {buttonText}
105
  </button>
docs/src/content/guides/popover-position.mdx CHANGED
@@ -30,182 +30,184 @@ driverObj.highlight({
30
  <p>Use the buttons below to show the popover.</p>
31
  </div>
32
 
33
- <CodeSample
34
- buttonText={"Left Start"}
35
- highlight={{
36
- element: '#sample-box',
37
- popover: {
38
- title: 'Left Start Example',
39
- description: 'We have side set to <mark>left</mark> and align set to <mark>start</mark>. PS, we can use HTML in the title and descriptions of popover.',
40
- side: "left",
41
- align: 'start'
42
- }
43
- }}
44
- id={"left-start"}
45
- client:load
46
- />
47
-
48
- <CodeSample
49
- buttonText={"Left Center"}
50
- highlight={{
51
- element: '#sample-box',
52
- popover: {
53
- title: 'Left Center Example',
54
- description: 'We have side set to <mark>left</mark> and align set to <mark>center</mark>. PS, we can use HTML in the title and descriptions of popover.',
55
- side: "left",
56
- align: 'center'
57
- }
58
- }}
59
- id={"left-start"}
60
- client:load
61
- />
62
-
63
- <CodeSample
64
- buttonText={"Left End"}
65
- highlight={{
66
- element: '#sample-box',
67
- popover: {
68
- title: 'Left End Example',
69
- description: 'We have side set to <mark>left</mark> and align set to <mark>end</mark>. PS, we can use HTML in the title and descriptions of popover.',
70
- side: "left",
71
- align: 'end'
72
- }
73
- }}
74
- id={"left-start"}
75
- client:load
76
- />
77
-
78
- <CodeSample
79
- buttonText={"Top Start"}
80
- highlight={{
81
- element: '#sample-box',
82
- popover: {
83
- title: 'Top Start Example',
84
- description: 'We have side set to <mark>top</mark> and align set to <mark>start</mark>. PS, we can use HTML in the title and descriptions of popover.',
85
- side: "top",
86
- align: 'start'
87
- }
88
- }}
89
- id={"top-start"}
90
- client:load
91
- />
92
-
93
- <CodeSample
94
- buttonText={"Top Center"}
95
- highlight={{
96
- element: '#sample-box',
97
- popover: {
98
- title: 'Top Center Example',
99
- description: 'We have side set to <mark>top</mark> and align set to <mark>center</mark>. PS, we can use HTML in the title and descriptions of popover.',
100
- side: "top",
101
- align: 'center'
102
- }
103
- }}
104
- id={"top-start"}
105
- client:load
106
- />
107
-
108
- <CodeSample
109
- buttonText={"Top End"}
110
- highlight={{
111
- element: '#sample-box',
112
- popover: {
113
- title: 'Top End Example',
114
- description: 'We have side set to <mark>top</mark> and align set to <mark>end</mark>. PS, we can use HTML in the title and descriptions of popover.',
115
- side: "top",
116
- align: 'end'
117
- }
118
- }}
119
- id={"top-start"}
120
- client:load
121
- />
122
-
123
- <CodeSample
124
- buttonText={"Right Start"}
125
- highlight={{
126
- element: '#sample-box',
127
- popover: {
128
- title: 'Right Start Example',
129
- description: 'We have side set to <mark>right</mark> and align set to <mark>start</mark>. PS, we can use HTML in the title and descriptions of popover.',
130
- side: "right",
131
- align: 'start'
132
- }
133
- }}
134
- id={"right-start"}
135
- client:load
136
- />
137
-
138
- <CodeSample
139
- buttonText={"Right Center"}
140
- highlight={{
141
- element: '#sample-box',
142
- popover: {
143
- title: 'Right Center Example',
144
- description: 'We have side set to <mark>right</mark> and align set to <mark>center</mark>. PS, we can use HTML in the title and descriptions of popover.',
145
- side: "right",
146
- align: 'center'
147
- }
148
- }}
149
- id={"right-start"}
150
- client:load
151
- />
152
-
153
- <CodeSample
154
- buttonText={"Right End"}
155
- highlight={{
156
- element: '#sample-box',
157
- popover: {
158
- title: 'Right End Example',
159
- description: 'We have side set to <mark>right</mark> and align set to <mark>end</mark>. PS, we can use HTML in the title and descriptions of popover.',
160
- side: "right",
161
- align: 'end'
162
- }
163
- }}
164
- id={"right-start"}
165
- client:load
166
- />
167
-
168
- <CodeSample
169
- buttonText={"Bottom Start"}
170
- highlight={{
171
- element: '#sample-box',
172
- popover: {
173
- title: 'Bottom Start Example',
174
- description: 'We have side set to <mark>bottom</mark> and align set to <mark>start</mark>. PS, we can use HTML in the title and descriptions of popover.',
175
- side: "bottom",
176
- align: 'start'
177
- }
178
- }}
179
- id={"bottom-start"}
180
- client:load
181
- />
182
-
183
- <CodeSample
184
- buttonText={"Bottom Center"}
185
- highlight={{
186
- element: '#sample-box',
187
- popover: {
188
- title: 'Bottom Center Example',
189
- description: 'We have side set to <mark>bottom</mark> and align set to <mark>center</mark>. PS, we can use HTML in the title and descriptions of popover.',
190
- side: "bottom",
191
- align: 'center'
192
- }
193
- }}
194
- id={"bottom-start"}
195
- client:load
196
- />
197
-
198
- <CodeSample
199
- buttonText={"Bottom End"}
200
- highlight={{
201
- element: '#sample-box',
202
- popover: {
203
- title: 'Bottom End Example',
204
- description: 'We have side set to <mark>bottom</mark> and align set to <mark>end</mark>. PS, we can use HTML in the title and descriptions of popover.',
205
- side: "bottom",
206
- align: 'end'
207
- }
208
- }}
209
- id={"right-start"}
210
- client:load
211
- />
 
 
 
30
  <p>Use the buttons below to show the popover.</p>
31
  </div>
32
 
33
+ <div className="flex flex-wrap mt-3 gap-1 justify-start">
34
+ <CodeSample
35
+ buttonText={"Left Start"}
36
+ highlight={{
37
+ element: '#sample-box',
38
+ popover: {
39
+ title: 'Left Start Example',
40
+ description: 'We have side set to <mark>left</mark> and align set to <mark>start</mark>. PS, we can use HTML in the title and descriptions of popover.',
41
+ side: "left",
42
+ align: 'start'
43
+ }
44
+ }}
45
+ id={"left-start"}
46
+ client:load
47
+ />
48
+
49
+ <CodeSample
50
+ buttonText={"Left Center"}
51
+ highlight={{
52
+ element: '#sample-box',
53
+ popover: {
54
+ title: 'Left Center Example',
55
+ description: 'We have side set to <mark>left</mark> and align set to <mark>center</mark>. PS, we can use HTML in the title and descriptions of popover.',
56
+ side: "left",
57
+ align: 'center'
58
+ }
59
+ }}
60
+ id={"left-start"}
61
+ client:load
62
+ />
63
+
64
+ <CodeSample
65
+ buttonText={"Left End"}
66
+ highlight={{
67
+ element: '#sample-box',
68
+ popover: {
69
+ title: 'Left End Example',
70
+ description: 'We have side set to <mark>left</mark> and align set to <mark>end</mark>. PS, we can use HTML in the title and descriptions of popover.',
71
+ side: "left",
72
+ align: 'end'
73
+ }
74
+ }}
75
+ id={"left-start"}
76
+ client:load
77
+ />
78
+
79
+ <CodeSample
80
+ buttonText={"Top Start"}
81
+ highlight={{
82
+ element: '#sample-box',
83
+ popover: {
84
+ title: 'Top Start Example',
85
+ description: 'We have side set to <mark>top</mark> and align set to <mark>start</mark>. PS, we can use HTML in the title and descriptions of popover.',
86
+ side: "top",
87
+ align: 'start'
88
+ }
89
+ }}
90
+ id={"top-start"}
91
+ client:load
92
+ />
93
+
94
+ <CodeSample
95
+ buttonText={"Top Center"}
96
+ highlight={{
97
+ element: '#sample-box',
98
+ popover: {
99
+ title: 'Top Center Example',
100
+ description: 'We have side set to <mark>top</mark> and align set to <mark>center</mark>. PS, we can use HTML in the title and descriptions of popover.',
101
+ side: "top",
102
+ align: 'center'
103
+ }
104
+ }}
105
+ id={"top-start"}
106
+ client:load
107
+ />
108
+
109
+ <CodeSample
110
+ buttonText={"Top End"}
111
+ highlight={{
112
+ element: '#sample-box',
113
+ popover: {
114
+ title: 'Top End Example',
115
+ description: 'We have side set to <mark>top</mark> and align set to <mark>end</mark>. PS, we can use HTML in the title and descriptions of popover.',
116
+ side: "top",
117
+ align: 'end'
118
+ }
119
+ }}
120
+ id={"top-start"}
121
+ client:load
122
+ />
123
+
124
+ <CodeSample
125
+ buttonText={"Right Start"}
126
+ highlight={{
127
+ element: '#sample-box',
128
+ popover: {
129
+ title: 'Right Start Example',
130
+ description: 'We have side set to <mark>right</mark> and align set to <mark>start</mark>. PS, we can use HTML in the title and descriptions of popover.',
131
+ side: "right",
132
+ align: 'start'
133
+ }
134
+ }}
135
+ id={"right-start"}
136
+ client:load
137
+ />
138
+
139
+ <CodeSample
140
+ buttonText={"Right Center"}
141
+ highlight={{
142
+ element: '#sample-box',
143
+ popover: {
144
+ title: 'Right Center Example',
145
+ description: 'We have side set to <mark>right</mark> and align set to <mark>center</mark>. PS, we can use HTML in the title and descriptions of popover.',
146
+ side: "right",
147
+ align: 'center'
148
+ }
149
+ }}
150
+ id={"right-start"}
151
+ client:load
152
+ />
153
+
154
+ <CodeSample
155
+ buttonText={"Right End"}
156
+ highlight={{
157
+ element: '#sample-box',
158
+ popover: {
159
+ title: 'Right End Example',
160
+ description: 'We have side set to <mark>right</mark> and align set to <mark>end</mark>. PS, we can use HTML in the title and descriptions of popover.',
161
+ side: "right",
162
+ align: 'end'
163
+ }
164
+ }}
165
+ id={"right-start"}
166
+ client:load
167
+ />
168
+
169
+ <CodeSample
170
+ buttonText={"Bottom Start"}
171
+ highlight={{
172
+ element: '#sample-box',
173
+ popover: {
174
+ title: 'Bottom Start Example',
175
+ description: 'We have side set to <mark>bottom</mark> and align set to <mark>start</mark>. PS, we can use HTML in the title and descriptions of popover.',
176
+ side: "bottom",
177
+ align: 'start'
178
+ }
179
+ }}
180
+ id={"bottom-start"}
181
+ client:load
182
+ />
183
+
184
+ <CodeSample
185
+ buttonText={"Bottom Center"}
186
+ highlight={{
187
+ element: '#sample-box',
188
+ popover: {
189
+ title: 'Bottom Center Example',
190
+ description: 'We have side set to <mark>bottom</mark> and align set to <mark>center</mark>. PS, we can use HTML in the title and descriptions of popover.',
191
+ side: "bottom",
192
+ align: 'center'
193
+ }
194
+ }}
195
+ id={"bottom-start"}
196
+ client:load
197
+ />
198
+
199
+ <CodeSample
200
+ buttonText={"Bottom End"}
201
+ highlight={{
202
+ element: '#sample-box',
203
+ popover: {
204
+ title: 'Bottom End Example',
205
+ description: 'We have side set to <mark>bottom</mark> and align set to <mark>end</mark>. PS, we can use HTML in the title and descriptions of popover.',
206
+ side: "bottom",
207
+ align: 'end'
208
+ }
209
+ }}
210
+ id={"right-start"}
211
+ client:load
212
+ />
213
+ </div>
docs/src/content/guides/tour-progress.mdx CHANGED
@@ -45,6 +45,8 @@ Please note that `showProgress` is `false` by default. Also the default text for
45
  ```
46
  </CodeSample>
47
 
 
 
48
  <CodeSample
49
  buttonText={"Different Progress Text"}
50
  config={{
 
45
  ```
46
  </CodeSample>
47
 
48
+ <div className="mb-1.5"></div>
49
+
50
  <CodeSample
51
  buttonText={"Different Progress Text"}
52
  config={{