ariadne_view_components 0.0.4 → 0.0.5

Sign up to get free protection for your applications and to get access to all the features.
Files changed (67) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +1 -1
  3. data/app/assets/builds/ariadne_view_components.css +1874 -0
  4. data/app/assets/javascripts/ariadne.d.ts +1 -0
  5. data/app/assets/javascripts/ariadne_view_components.js +1 -1
  6. data/app/assets/javascripts/ariadne_view_components.js.map +1 -1
  7. data/app/assets/javascripts/clipboard-copy-component.d.ts +4 -0
  8. data/app/assets/javascripts/slideover-component.d.ts +9 -0
  9. data/app/assets/javascripts/time_ago_component.d.ts +1 -0
  10. data/app/assets/javascripts/tooltip-component.d.ts +24 -0
  11. data/app/assets/stylesheets/application.ariadne_view_components.css +5 -3
  12. data/app/assets/stylesheets/tooltip-component.css +37 -0
  13. data/app/components/ariadne/ariadne.d.ts +1 -0
  14. data/app/components/ariadne/ariadne.js +9 -0
  15. data/app/components/ariadne/ariadne.ts +3 -0
  16. data/app/components/ariadne/base_button.rb +9 -8
  17. data/app/components/ariadne/blankslate_component.rb +1 -1
  18. data/app/components/ariadne/body_component.rb +30 -0
  19. data/app/components/ariadne/button_component.rb +5 -10
  20. data/app/components/ariadne/clipboard-copy-component.d.ts +4 -0
  21. data/app/components/ariadne/clipboard-copy-component.js +18 -0
  22. data/app/components/ariadne/clipboard_copy_component.d.ts +4 -0
  23. data/app/components/ariadne/clipboard_copy_component.html.erb +2 -2
  24. data/app/components/ariadne/clipboard_copy_component.js +18 -0
  25. data/app/components/ariadne/clipboard_copy_component.rb +41 -3
  26. data/app/components/ariadne/comment_component.html.erb +25 -0
  27. data/app/components/ariadne/comment_component.rb +45 -0
  28. data/app/components/ariadne/component.rb +2 -1
  29. data/app/components/ariadne/container_component.rb +1 -1
  30. data/app/components/ariadne/flash_component.rb +1 -1
  31. data/app/components/ariadne/flex_component.rb +51 -0
  32. data/app/components/ariadne/grid_component.html.erb +12 -3
  33. data/app/components/ariadne/grid_component.rb +18 -7
  34. data/app/components/ariadne/header_component.rb +1 -1
  35. data/app/components/ariadne/heading_component.rb +2 -2
  36. data/app/components/ariadne/heroicon_component.html.erb +4 -6
  37. data/app/components/ariadne/heroicon_component.rb +18 -7
  38. data/app/components/ariadne/inline_flex_component.rb +11 -9
  39. data/app/components/ariadne/link_component.rb +13 -8
  40. data/app/components/ariadne/list_component.html.erb +5 -7
  41. data/app/components/ariadne/list_component.rb +4 -34
  42. data/app/components/ariadne/main_component.rb +32 -0
  43. data/app/components/ariadne/slideover-component.d.ts +9 -0
  44. data/app/components/ariadne/slideover-component.js +20 -0
  45. data/app/components/ariadne/slideover_component.d.ts +9 -0
  46. data/app/components/ariadne/slideover_component.html.erb +1 -4
  47. data/app/components/ariadne/slideover_component.js +19 -0
  48. data/app/components/ariadne/slideover_component.rb +19 -15
  49. data/app/components/ariadne/time_ago_component.d.ts +1 -0
  50. data/app/components/ariadne/time_ago_component.js +1 -0
  51. data/app/components/ariadne/tooltip-component.d.ts +24 -0
  52. data/app/components/ariadne/tooltip-component.js +42 -0
  53. data/app/components/ariadne/tooltip-component.ts +57 -0
  54. data/app/components/ariadne/tooltip_component.html.erb +4 -0
  55. data/app/components/ariadne/tooltip_component.rb +34 -31
  56. data/app/lib/ariadne/form_builder.rb +14 -14
  57. data/lib/ariadne/classify.rb +4 -98
  58. data/lib/ariadne/view_components/version.rb +1 -1
  59. data/lib/ariadne/view_components.rb +31 -29
  60. data/lib/rubocop/cop/ariadne/ariadne_heroicon.rb +2 -2
  61. data/lib/tasks/docs.rake +4 -0
  62. data/static/arguments.yml +89 -13
  63. data/static/audited_at.json +4 -0
  64. data/static/classes.yml +40 -8
  65. data/static/constants.json +83 -101
  66. data/static/statuses.json +4 -0
  67. metadata +48 -6
data/static/classes.yml CHANGED
@@ -1,10 +1,13 @@
1
1
  ---
2
2
  - ".-"
3
+ - ".-m-0.5"
3
4
  - ".-mb-8"
5
+ - ".-mr-px"
4
6
  - ".-mx-1.5"
5
7
  - ".-mx-2"
6
8
  - ".-my-1.5"
7
9
  - ".a"
10
+ - ".absolute"
8
11
  - ".all"
9
12
  - ".alt:"
10
13
  - ".and"
@@ -20,24 +23,26 @@
20
23
  - ".bg-green-50"
21
24
  - ".bg-purple-50"
22
25
  - ".bg-red-50"
26
+ - ".bg-slate-900"
23
27
  - ".bg-state-closed"
24
28
  - ".bg-state-open"
25
29
  - ".bg-white"
26
30
  - ".bg-yellow-50"
27
31
  - ".billion:"
32
+ - ".block"
28
33
  - ".bold"
29
34
  - ".bold-button-0"
30
35
  - ".border"
36
+ - ".border-b"
31
37
  - ".border-billy-purple"
38
+ - ".border-black"
32
39
  - ".border-blue-300"
33
40
  - ".border-gray-300"
34
41
  - ".border-green-300"
35
- - ".border-our-purple-300"
36
42
  - ".border-purple-300"
37
43
  - ".border-red-300"
38
44
  - ".border-state-closed"
39
45
  - ".border-state-open"
40
- - ".border-t"
41
46
  - ".border-transparent"
42
47
  - ".border-yellow-300"
43
48
  - ".button-with-tooltip"
@@ -49,6 +54,7 @@
49
54
  - ".clock"
50
55
  - ".color-fg-success"
51
56
  - ".cursor-pointer"
57
+ - ".decoration-double"
52
58
  - ".divide-gray-200"
53
59
  - ".divide-gray-300"
54
60
  - ".divide-y"
@@ -58,13 +64,14 @@
58
64
  - ".fill-state-closed"
59
65
  - ".fill-state-open"
60
66
  - ".flex"
67
+ - ".flex-1"
61
68
  - ".flex-auto"
62
69
  - ".flex-col"
63
- - ".flex-row"
64
70
  - ".flex-shrink-0"
65
71
  - ".flow-root"
66
72
  - ".focus-visible:outline-2"
67
73
  - ".focus-visible:outline-offset-2"
74
+ - ".focus:border-indigo-500"
68
75
  - ".focus:outline-none"
69
76
  - ".focus:ring-2"
70
77
  - ".focus:ring-blue-600"
@@ -93,9 +100,11 @@
93
100
  - ".group"
94
101
  - ".h-10"
95
102
  - ".h-full"
103
+ - ".h-screen"
96
104
  - ".hidden"
97
105
  - ".hover:bg-blue-100"
98
106
  - ".hover:bg-button-hover-color"
107
+ - ".hover:bg-gray-100"
99
108
  - ".hover:bg-gray-50"
100
109
  - ".hover:bg-gray-700"
101
110
  - ".hover:bg-green-100"
@@ -103,6 +112,9 @@
103
112
  - ".hover:bg-red-100"
104
113
  - ".hover:bg-slate-100"
105
114
  - ".hover:bg-yellow-100"
115
+ - ".hover:text-button-text-color"
116
+ - ".hover:text-gray-500"
117
+ - ".hover:text-gray-900"
106
118
  - ".hover:text-slate-900"
107
119
  - ".id:"
108
120
  - ".immediately"
@@ -110,16 +122,17 @@
110
122
  - ".information-circle"
111
123
  - ".inline-block"
112
124
  - ".inline-flex"
113
- - ".inset-0"
125
+ - ".invisible"
114
126
  - ".is"
115
127
  - ".items-baseline"
116
128
  - ".items-center"
117
129
  - ".justify-between"
118
130
  - ".justify-center"
131
+ - ".justify-end"
119
132
  - ".leading-4"
120
133
  - ".leading-5"
121
134
  - ".leading-7"
122
- - ".lg:grid-cols-4"
135
+ - ".lg:grid-cols-3"
123
136
  - ".lg:px-8"
124
137
  - ".lg:py-16"
125
138
  - ".link"
@@ -129,28 +142,35 @@
129
142
  - ".m:"
130
143
  - ".mail"
131
144
  - ".max-w-7xl"
132
- - ".md:grid-cols-3"
145
+ - ".max-w-xs"
133
146
  - ".members"
134
147
  - ".menu"
135
148
  - ".million:"
136
149
  - ".min-h-screen"
137
150
  - ".ml-2"
138
151
  - ".ml-3"
139
- - ".mt-1"
140
152
  - ".mt-2"
141
153
  - ".mt-4"
142
154
  - ".mt-6"
143
155
  - ".mt-8"
156
+ - ".mt-px"
144
157
  - ".mx-auto"
158
+ - ".mx-px"
159
+ - ".my-4"
145
160
  - ".organization"
161
+ - ".p-0.5"
146
162
  - ".p-1"
147
163
  - ".p-1.5"
148
164
  - ".p-4"
165
+ - ".p-8"
166
+ - ".pb-12"
167
+ - ".pb-2"
149
168
  - ".pb-4"
150
169
  - ".pencil"
151
170
  - ".pl-2"
152
171
  - ".pl-3"
153
172
  - ".plus-sm"
173
+ - ".pt-2"
154
174
  - ".pt-5"
155
175
  - ".pt-6"
156
176
  - ".pt:"
@@ -165,10 +185,12 @@
165
185
  - ".py-12"
166
186
  - ".py-2"
167
187
  - ".py-3"
188
+ - ".py-4"
168
189
  - ".py-5"
169
190
  - ".question-mark-circle"
170
191
  - ".relative"
171
192
  - ".rounded"
193
+ - ".rounded-bl-lg"
172
194
  - ".rounded-full"
173
195
  - ".rounded-lg"
174
196
  - ".rounded-m"
@@ -177,6 +199,7 @@
177
199
  - ".scroll-smooth"
178
200
  - ".search"
179
201
  - ".secure"
202
+ - ".shadow"
180
203
  - ".shadow-sm"
181
204
  - ".should"
182
205
  - ".sm:grid-cols-2"
@@ -184,6 +207,7 @@
184
207
  - ".sm:px-6"
185
208
  - ".sm:text-3xl"
186
209
  - ".sm:text-4xl"
210
+ - ".sm:text-sm"
187
211
  - ".sr-only"
188
212
  - ".sticky"
189
213
  - ".stroke-billy-purple"
@@ -196,12 +220,15 @@
196
220
  - ".text-3xl"
197
221
  - ".text-base"
198
222
  - ".text-billy-purple"
223
+ - ".text-black-700"
199
224
  - ".text-blue-500"
200
225
  - ".text-blue-700"
201
226
  - ".text-blue-800"
202
227
  - ".text-button-text-color"
203
228
  - ".text-center"
229
+ - ".text-gray-500"
204
230
  - ".text-gray-700"
231
+ - ".text-gray-800"
205
232
  - ".text-gray-900"
206
233
  - ".text-green-500"
207
234
  - ".text-green-700"
@@ -227,14 +254,18 @@
227
254
  - ".the"
228
255
  - ".to"
229
256
  - ".tooltip"
257
+ - ".tooltip-arrow"
258
+ - ".tooltip-component"
230
259
  - ".top-0"
231
- - ".top-4"
232
260
  - ".tracking-tight"
233
261
  - ".transition"
234
262
  - ".trash"
263
+ - ".trigger"
235
264
  - ".type:"
265
+ - ".underline"
236
266
  - ".up"
237
267
  - ".vault"
268
+ - ".w-0"
238
269
  - ".w-auto"
239
270
  - ".w-full"
240
271
  - ".whitespace-nowrap"
@@ -243,3 +274,4 @@
243
274
  - ".x"
244
275
  - ".z-10"
245
276
  - ".z-50"
277
+ - ".z-max"
@@ -1,14 +1,14 @@
1
1
  {
2
2
  "Ariadne::BaseButton": {
3
3
  "DEFAULT_CLASSES": "inline-flex items-center px-4 py-2 text-sm border border-gray-300 shadow-sm text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500",
4
- "DEFAULT_SIZE": "m",
4
+ "DEFAULT_SIZE": "md",
5
5
  "DEFAULT_TAG": "button",
6
6
  "DEFAULT_TYPE": "button",
7
7
  "SIZE_CLASS_MAPPINGS": {
8
8
  "xs": "inline-flex items-center px-2.5 py-1.5 text-xs font-medium rounded",
9
- "s": "inline-flex items-center px-3 py-2 text-sm leading-4 font-medium rounded-m",
10
- "m": "inline-flex items-center px-4 py-2 text-sm font-medium rounded-md",
11
- "l": "inline-flex items-center px-4 py-2 text-base font-medium rounded-md",
9
+ "sm": "inline-flex items-center px-3 py-2 text-sm leading-4 font-medium rounded-m",
10
+ "md": "inline-flex items-center px-4 py-2 text-sm font-medium rounded-md",
11
+ "lg": "inline-flex items-center px-4 py-2 text-base font-medium rounded-md",
12
12
  "xl": "inline-flex items-center px-6 py-3 text-base font-medium rounded-md"
13
13
  },
14
14
  "TAG_OPTIONS": [
@@ -21,11 +21,12 @@
21
21
  "reset",
22
22
  "submit"
23
23
  ],
24
+ "TYPE_SUBMIT": "submit",
24
25
  "VALID_SIZES": [
25
26
  "xs",
26
- "s",
27
- "m",
28
- "l",
27
+ "sm",
28
+ "md",
29
+ "lg",
29
30
  "xl"
30
31
  ]
31
32
  },
@@ -56,6 +57,9 @@
56
57
  "div"
57
58
  ]
58
59
  },
60
+ "Ariadne::BodyComponent": {
61
+ "DEFAULT_CLASSES": "flex flex-col min-h-screen"
62
+ },
59
63
  "Ariadne::ButtonComponent": {
60
64
  "DEFAULT_SCHEME": "default",
61
65
  "LINK_SCHEME": "link",
@@ -77,11 +81,28 @@
77
81
  "Ariadne::ClipboardCopyComponent": {
78
82
  "DATA_ACTION": "click->clipboard-copy-component#copy",
79
83
  "DATA_CONTROLLER": "clipboard-copy-component",
80
- "DEFAULT_CLASSES": "cursor-pointer",
84
+ "DATA_CONTROLLERS": {
85
+ "data-controller": "clipboard-copy-component",
86
+ "data-action": "click->clipboard-copy-component#copy"
87
+ },
88
+ "DATA_CONTROLLERS_WITH_TOOLTIPS": {
89
+ "data-controller": "clipboard-copy-component tooltip-component",
90
+ "data-action": "click->clipboard-copy-component#copy mouseover->tooltip-component#show mouseout->tooltip-component#hide",
91
+ "data-tooltip-component-target": "trigger"
92
+ },
93
+ "DEFAULT_CLASSES": " cursor-pointer underline decoration-double font-semibold hover:text-button-text-color focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500",
81
94
  "DEFAULT_TAG": "clipboard-copy"
82
95
  },
96
+ "Ariadne::CommentComponent": {
97
+ "DEFAULT_CLASSES": "",
98
+ "DEFAULT_TAB_CLASSES": "text-gray-500 hover:text-gray-900 bg-white hover:bg-gray-100 px-3 py-1.5 border border-transparent text-sm font-medium rounded-md",
99
+ "DEFAULT_TAG": "form",
100
+ "TAG_OPTIONS": [
101
+ "form"
102
+ ]
103
+ },
83
104
  "Ariadne::ContainerComponent": {
84
- "DEFAULT_CLASSES": "px-4 py-5 sm:px-6 lg:px-8"
105
+ "DEFAULT_CLASSES": "px-4 sm:px-6 lg:px-8"
85
106
  },
86
107
  "Ariadne::Content": {
87
108
  },
@@ -133,84 +154,34 @@
133
154
  "danger"
134
155
  ]
135
156
  },
136
- "Ariadne::FooterComponent": {
137
- "DEFAULT_CLASSES": "py-5"
138
- },
139
- "Ariadne::FormComponent": {
140
- "CheckboxField": "Ariadne::FormComponent::CheckboxField",
141
- "DEFAULT_CLASSES": "space-y-8 divide-y divide-gray-200 sm:space-y-5",
142
- "DEFAULT_TAG": "form",
143
- "EmailField": "Ariadne::FormComponent::EmailField",
144
- "FORM_TYPE_CHECKBOX": "checkbox",
145
- "FORM_TYPE_EMAIL": "email",
146
- "FORM_TYPE_HIDDEN": "hidden",
147
- "FORM_TYPE_PASSWORD": "password",
148
- "FORM_TYPE_RADIO": "radio",
149
- "FORM_TYPE_TEXT": "text",
150
- "FORM_TYPE_TEXTAREA": "textarea",
151
- "HiddenField": "Ariadne::FormComponent::HiddenField",
152
- "PasswordField": "Ariadne::FormComponent::PasswordField",
153
- "RadioField": "Ariadne::FormComponent::RadioField",
154
- "Section": "Ariadne::FormComponent::Section",
157
+ "Ariadne::FlexComponent": {
158
+ "DEFAULT_CLASSES": "flex",
159
+ "DEFAULT_TAG": "div",
155
160
  "TAG_OPTIONS": [
156
- "form"
157
- ],
158
- "TextField": "Ariadne::FormComponent::TextField",
159
- "TextareaField": "Ariadne::FormComponent::TextareaField",
160
- "VALID_FORM_TYPES": [
161
- "text",
162
- "checkbox",
163
- "radio",
164
- "textarea",
165
- "hidden",
166
- "password",
167
- "email"
161
+ "div"
168
162
  ],
169
- "VALID_METHODS": [
170
- "get",
171
- "post",
172
- "put",
173
- "delete",
174
- "patch"
163
+ "VALID_TYPES": [
164
+ "row",
165
+ "column",
166
+ "row_reverse",
167
+ "column_reverse"
175
168
  ]
176
169
  },
177
- "Ariadne::FormComponent::CheckboxField": {
178
- "DEFAULT_CHECKBOX_CLASSES": "focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
179
- },
180
- "Ariadne::FormComponent::EmailField": {
181
- "AUTOCOMPLETE": "email",
182
- "DEFAULT_EMAIL_CLASSES": "shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-md"
183
- },
184
- "Ariadne::FormComponent::HiddenField": {
185
- },
186
- "Ariadne::FormComponent::PasswordField": {
187
- "AUTOCOMPLETE": "current-password",
188
- "DEFAULT_PASSWORD_CLASSES": "appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
189
- },
190
- "Ariadne::FormComponent::RadioField": {
191
- "DEFAULT_RADIO_CLASSES": "focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
192
- },
193
- "Ariadne::FormComponent::Section": {
194
- "DEFAULT_SECTION_CLASSES": "divide-y divide-gray-200 pt-8 space-y-6 sm:pt-10 sm:space-y-5",
195
- "DEFAULT_SECTION_HEADING_CLASSES": "text-lg leading-6 font-medium text-gray-900",
196
- "DEFAULT_SECTION_SUBHEADING_CLASSES": "mt-1 max-w-2xl text-sm text-gray-500",
197
- "ITEMS_LAMBDA": "#<Proc:0x00007f117916e6a8 /home/runner/work/ariadne/ariadne/ruby/ariadne_view_components/app/components/ariadne/form_component.rb:71 (lambda)>"
198
- },
199
- "Ariadne::FormComponent::TextField": {
200
- "DEFAULT_TEXT_CLASSES": "shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-md"
201
- },
202
- "Ariadne::FormComponent::TextareaField": {
203
- "DEFAULT_TEXTAREA_CLASSES": "shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border border-gray-300 rounded-md"
170
+ "Ariadne::FooterComponent": {
171
+ "DEFAULT_CLASSES": "py-5"
204
172
  },
205
173
  "Ariadne::GridComponent": {
206
- "DEFAULT_CLASSES": "grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4",
207
- "DEFAULT_LINK_COLOR_CLASSES": "text-button-text-color bg-button-bg-color hover:bg-button-hover-color focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500",
174
+ "DEFAULT_CLASSES": "grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3",
175
+ "DEFAULT_LINK_COLOR_CLASSES": "text-button-text-color bg-button-bg-color focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500",
208
176
  "Item": "Ariadne::GridComponent::Item"
209
177
  },
210
178
  "Ariadne::GridComponent::Item": {
179
+ "DEFAULT_ACTION_LINK_CLASSES": "text-button-text-color relative -mr-px w-0 flex-1 inline-flex items-center justify-center py-4 text-sm font-medium border border-transparent rounded-bl-lg rounded-lg",
180
+ "DEFAULT_ENTRY_CLASSES": "group flex-1 flex flex-col p-8 hover:bg-button-hover-color hover:text-gray-500 rounded-lg",
181
+ "DEFAULT_ITEM_CLASSES": "flex flex-col text-center rounded-lg shadow my-4 text-black-700 border-black"
211
182
  },
212
183
  "Ariadne::HeaderComponent": {
213
- "DEFAULT_CLASSES": "sticky top-0 z-50 px-4 py-2 bg-white shadow-sm shadow-slate-900/5 transition duration-500",
184
+ "DEFAULT_CLASSES": "sticky top-0 z-50 px-4 py-5 bg-white shadow-sm shadow-slate-900/5 transition duration-500",
214
185
  "DEFAULT_IMAGE_LOGO_CLASSES": "h-10 w-auto",
215
186
  "DEFAULT_NAV_LINK_CLASSES": "inline-block rounded-lg py-1 px-2 text-sm text-slate-700 hover:bg-slate-100 hover:text-slate-900",
216
187
  "DEFAULT_PROFILE_LINK_CLASSES": "group inline-flex items-center justify-center rounded-full py-2 px-4 text-sm font-semibold focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2",
@@ -229,11 +200,12 @@
229
200
  ],
230
201
  "TAG_TO_CLASSES": {
231
202
  "h1": "font-bold leading-7 sm:text-3xl",
232
- "h2": "text-3xl font-extrabold text-gray-900",
233
- "h3": "text-2xl font-extrabold text-gray-900"
203
+ "h2": "text-3xl font-extrabold",
204
+ "h3": "text-2xl font-extrabold"
234
205
  }
235
206
  },
236
207
  "Ariadne::HeroiconComponent": {
208
+ "DEFAULT_TEXT_CLASSES": "pl-2",
237
209
  "PRELOADED_ICONS": [
238
210
  {
239
211
  "name": "bell",
@@ -308,15 +280,18 @@
308
280
  "variant": "outline"
309
281
  }
310
282
  ],
311
- "SIZE_DEFAULT": "s",
283
+ "SIZE_DEFAULT": "sm",
284
+ "SIZE_LARGE": "lg",
312
285
  "SIZE_MAPPINGS": {
313
- "s": 16,
314
- "m": 24
286
+ "sm": 16,
287
+ "md": 24,
288
+ "lg": 128
315
289
  },
316
- "SIZE_MEDIUM": "m",
290
+ "SIZE_MEDIUM": "md",
317
291
  "SIZE_OPTIONS": [
318
- "s",
319
- "m"
292
+ "sm",
293
+ "md",
294
+ "lg"
320
295
  ]
321
296
  },
322
297
  "Ariadne::ImageComponent": {
@@ -324,8 +299,9 @@
324
299
  },
325
300
  "Ariadne::InlineFlexComponent": {
326
301
  "DEFAULT_CLASSES": "inline-flex items-baseline",
302
+ "DEFAULT_LABEL_CLASSES": "pl-2 text-sm font-medium text-gray-900",
327
303
  "DEFAULT_TAG": "span",
328
- "DEFAULT_TEXT_CLASSES": "pl-2 text-sm font-medium text-gray-900 text-sm",
304
+ "DEFAULT_TEXT_CLASSES": "pl-2 text-sm font-medium text-gray-900",
329
305
  "DEFAULT_TEXT_CLOSED_CLASSES": "text-state-closed",
330
306
  "DEFAULT_TEXT_OPEN_CLASSES": "text-state-open",
331
307
  "STATE_CLOSED_SVG": "<svg viewBox=\"0 0 24 24\" width=\"12\" height=\"12\" class=\"stroke-state-closed fill-state-closed \" stroke=\"currentColor\" stroke-width=\"2\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <circle cx=\"12\" cy=\"12\" r=\"10\"></circle>\n</svg>\n",
@@ -336,6 +312,8 @@
336
312
  ]
337
313
  },
338
314
  "Ariadne::LinkComponent": {
315
+ "DEFAULT_ACTIONABLE_CLASSES": " cursor-pointer underline decoration-double font-semibold hover:text-button-text-color focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500",
316
+ "DEFAULT_CLASSES": "cursor-pointer",
339
317
  "DEFAULT_TAG": "a",
340
318
  "TAG_OPTIONS": [
341
319
  "a",
@@ -347,6 +325,10 @@
347
325
  "Item": "Ariadne::ListComponent::Item"
348
326
  },
349
327
  "Ariadne::ListComponent::Item": {
328
+ "DEFAULT_ITEM_CLASSES": "relative p-1.5 focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 hover:bg-button-hover-color"
329
+ },
330
+ "Ariadne::MainComponent": {
331
+ "DEFAULT_CLASSES": "flex-auto"
350
332
  },
351
333
  "Ariadne::PillComponent": {
352
334
  "DEFAULT_CLASSES": "flex-shrink-0 inline-block px-2 py-0.5 text-xs font-medium rounded-full",
@@ -356,17 +338,17 @@
356
338
  ]
357
339
  },
358
340
  "Ariadne::SlideoverComponent": {
359
- "DEFAULT_BUTTON_CLASSES": "inline-flex items-center shadow-sm px-4 py-1.5 border border-our-purple-300 z-50 text-sm leading-5 font-medium rounded-full text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500",
341
+ "DEFAULT_BUTTON_CLASSES": "inline-flex items-center shadow-sm px-4 py-1.5 pb-2 text-sm leading-5 font-medium rounded-full text-purple-800 bg-purple-50 hover:bg-purple-100 border-purple-300 focus:ring-offset-purple-50 focus:ring-purple-600",
360
342
  "DEFAULT_CLASSES": "",
361
343
  "DEFAULT_TAG": "div",
362
- "DIRECTION_X": "x",
363
- "DIRECTION_Y": "y",
344
+ "DIRECTION_X_LEFT": "xl",
345
+ "DIRECTION_Y_DOWN": "yd",
364
346
  "TAG_OPTIONS": [
365
347
  "div"
366
348
  ],
367
349
  "VALID_DIRECTIONS": [
368
- "y",
369
- "x"
350
+ "yd",
351
+ "xl"
370
352
  ]
371
353
  },
372
354
  "Ariadne::Text": {
@@ -384,21 +366,21 @@
384
366
  "DEFAULT_TAG": "div"
385
367
  },
386
368
  "Ariadne::TooltipComponent": {
387
- "DIRECTION_DEFAULT": "s",
388
- "DIRECTION_OPTIONS": [
389
- "s",
390
- "n",
391
- "e",
392
- "w",
393
- "ne",
394
- "nw",
395
- "se",
396
- "sw"
397
- ],
369
+ "DATA_ACTION": "mouseover->tooltip-component#show mouseout->tooltip-component#hide",
370
+ "DATA_CONTROLLER": "tooltip-component",
371
+ "DEFAULT_CLASSES": "invisible absolute bg-slate-900 text-white font-semibold max-w-xs py-1 px-2 rounded z-max",
372
+ "DEFAULT_PLACEMENT": "top",
373
+ "DEFAULT_TAG": "tooltip",
398
374
  "TYPE_DEFAULT": "description",
399
375
  "TYPE_OPTIONS": [
400
376
  "label",
401
377
  "description"
378
+ ],
379
+ "VALID_PLACEMENTS": [
380
+ "top",
381
+ "right",
382
+ "bottom",
383
+ "left"
402
384
  ]
403
385
  }
404
386
  }
data/static/statuses.json CHANGED
@@ -2,12 +2,15 @@
2
2
  "Ariadne::BaseButton": "stable",
3
3
  "Ariadne::BaseComponent": "stable",
4
4
  "Ariadne::BlankslateComponent": "stable",
5
+ "Ariadne::BodyComponent": "stable",
5
6
  "Ariadne::ButtonComponent": "stable",
6
7
  "Ariadne::ClipboardCopyComponent": "stable",
8
+ "Ariadne::CommentComponent": "stable",
7
9
  "Ariadne::ContainerComponent": "stable",
8
10
  "Ariadne::Content": "stable",
9
11
  "Ariadne::CounterComponent": "stable",
10
12
  "Ariadne::FlashComponent": "stable",
13
+ "Ariadne::FlexComponent": "stable",
11
14
  "Ariadne::FooterComponent": "stable",
12
15
  "Ariadne::GridComponent": "stable",
13
16
  "Ariadne::GridComponent::Item": "stable",
@@ -19,6 +22,7 @@
19
22
  "Ariadne::LinkComponent": "stable",
20
23
  "Ariadne::ListComponent": "stable",
21
24
  "Ariadne::ListComponent::Item": "stable",
25
+ "Ariadne::MainComponent": "stable",
22
26
  "Ariadne::PillComponent": "stable",
23
27
  "Ariadne::SlideoverComponent": "stable",
24
28
  "Ariadne::Text": "stable",
metadata CHANGED
@@ -1,15 +1,29 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: ariadne_view_components
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.0.4
4
+ version: 0.0.5
5
5
  platform: ruby
6
6
  authors:
7
7
  - Garen J. Torikian
8
- autorequire:
8
+ autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2022-07-25 00:00:00.000000000 Z
11
+ date: 2022-08-15 00:00:00.000000000 Z
12
12
  dependencies:
13
+ - !ruby/object:Gem::Dependency
14
+ name: tailwind_merge
15
+ requirement: !ruby/object:Gem::Requirement
16
+ requirements:
17
+ - - "~>"
18
+ - !ruby/object:Gem::Version
19
+ version: '0.1'
20
+ type: :runtime
21
+ prerelease: false
22
+ version_requirements: !ruby/object:Gem::Requirement
23
+ requirements:
24
+ - - "~>"
25
+ - !ruby/object:Gem::Version
26
+ version: '0.1'
13
27
  - !ruby/object:Gem::Dependency
14
28
  name: actionview
15
29
  requirement: !ruby/object:Gem::Requirement
@@ -84,7 +98,7 @@ dependencies:
84
98
  - - "<"
85
99
  - !ruby/object:Gem::Version
86
100
  version: '3.0'
87
- description:
101
+ description:
88
102
  email:
89
103
  - gjtorikian@yettoapp.com
90
104
  executables: []
@@ -93,20 +107,36 @@ extra_rdoc_files: []
93
107
  files:
94
108
  - LICENSE.txt
95
109
  - README.md
110
+ - app/assets/builds/ariadne_view_components.css
96
111
  - app/assets/config/manifest.js
112
+ - app/assets/javascripts/ariadne.d.ts
97
113
  - app/assets/javascripts/ariadne_view_components.js
98
114
  - app/assets/javascripts/ariadne_view_components.js.map
115
+ - app/assets/javascripts/clipboard-copy-component.d.ts
116
+ - app/assets/javascripts/slideover-component.d.ts
117
+ - app/assets/javascripts/time_ago_component.d.ts
118
+ - app/assets/javascripts/tooltip-component.d.ts
99
119
  - app/assets/stylesheets/application.ariadne_view_components.css
120
+ - app/assets/stylesheets/tooltip-component.css
121
+ - app/components/ariadne/ariadne.d.ts
122
+ - app/components/ariadne/ariadne.js
100
123
  - app/components/ariadne/ariadne.ts
101
124
  - app/components/ariadne/base_button.rb
102
125
  - app/components/ariadne/base_component.rb
103
126
  - app/components/ariadne/blankslate_component.html.erb
104
127
  - app/components/ariadne/blankslate_component.rb
128
+ - app/components/ariadne/body_component.rb
105
129
  - app/components/ariadne/button_component.html.erb
106
130
  - app/components/ariadne/button_component.rb
131
+ - app/components/ariadne/clipboard-copy-component.d.ts
132
+ - app/components/ariadne/clipboard-copy-component.js
107
133
  - app/components/ariadne/clipboard-copy-component.ts
134
+ - app/components/ariadne/clipboard_copy_component.d.ts
108
135
  - app/components/ariadne/clipboard_copy_component.html.erb
136
+ - app/components/ariadne/clipboard_copy_component.js
109
137
  - app/components/ariadne/clipboard_copy_component.rb
138
+ - app/components/ariadne/comment_component.html.erb
139
+ - app/components/ariadne/comment_component.rb
110
140
  - app/components/ariadne/component.rb
111
141
  - app/components/ariadne/container_component.html.erb
112
142
  - app/components/ariadne/container_component.rb
@@ -114,6 +144,7 @@ files:
114
144
  - app/components/ariadne/counter_component.rb
115
145
  - app/components/ariadne/flash_component.html.erb
116
146
  - app/components/ariadne/flash_component.rb
147
+ - app/components/ariadne/flex_component.rb
117
148
  - app/components/ariadne/footer_component.html.erb
118
149
  - app/components/ariadne/footer_component.rb
119
150
  - app/components/ariadne/grid_component.html.erb
@@ -129,16 +160,27 @@ files:
129
160
  - app/components/ariadne/link_component.rb
130
161
  - app/components/ariadne/list_component.html.erb
131
162
  - app/components/ariadne/list_component.rb
163
+ - app/components/ariadne/main_component.rb
132
164
  - app/components/ariadne/pill_component.html.erb
133
165
  - app/components/ariadne/pill_component.rb
166
+ - app/components/ariadne/slideover-component.d.ts
167
+ - app/components/ariadne/slideover-component.js
134
168
  - app/components/ariadne/slideover-component.ts
169
+ - app/components/ariadne/slideover_component.d.ts
135
170
  - app/components/ariadne/slideover_component.html.erb
171
+ - app/components/ariadne/slideover_component.js
136
172
  - app/components/ariadne/slideover_component.rb
137
173
  - app/components/ariadne/text.rb
174
+ - app/components/ariadne/time_ago_component.d.ts
175
+ - app/components/ariadne/time_ago_component.js
138
176
  - app/components/ariadne/time_ago_component.rb
139
177
  - app/components/ariadne/time_ago_component.ts
140
178
  - app/components/ariadne/timeline_component.html.erb
141
179
  - app/components/ariadne/timeline_component.rb
180
+ - app/components/ariadne/tooltip-component.d.ts
181
+ - app/components/ariadne/tooltip-component.js
182
+ - app/components/ariadne/tooltip-component.ts
183
+ - app/components/ariadne/tooltip_component.html.erb
142
184
  - app/components/ariadne/tooltip_component.rb
143
185
  - app/lib/ariadne/action_view_extensions/form_helper.rb
144
186
  - app/lib/ariadne/audited/dsl.rb
@@ -194,7 +236,7 @@ licenses:
194
236
  - MIT
195
237
  metadata:
196
238
  allowed_push_host: https://rubygems.org
197
- post_install_message:
239
+ post_install_message:
198
240
  rdoc_options: []
199
241
  require_paths:
200
242
  - lib
@@ -213,7 +255,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
213
255
  version: '0'
214
256
  requirements: []
215
257
  rubygems_version: 3.3.7
216
- signing_key:
258
+ signing_key:
217
259
  specification_version: 4
218
260
  summary: ViewComponents for the Ariadne Design System
219
261
  test_files: []