showcase-rails 0.3.2 → 0.4.0

Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 151c0562d98ae25ac207acf0921c0f299fb60ca37ca325b6f2ccc117e32ed09b
4
- data.tar.gz: 5d532b1992e910ff03a4e4bde0ae41c1e32d83c3e58a17be68378d0e6b6380a1
3
+ metadata.gz: 7bf404f8262fdae51c6ab3541595e310d63777b55f20125d41240565e77c147f
4
+ data.tar.gz: 145c8eb4f5c2f90ae15946d277fd444d0c8c3c6cd3f18357daa004391ec3ecf7
5
5
  SHA512:
6
- metadata.gz: 6c65a5683153a76fe6410ab0e4140b311100ea5843da37a056f3ae70f02a13565ee58e2f9624d07a8969f8676093a59eab30bdf69b6a2d9d06852b8ab9640d6a
7
- data.tar.gz: 77d2f23c5f9a0871f14713d46637bb326d48b9caa8610cf50654f5da05092d062d3ba0dd03500678e0af1902573b6c79f8c12e8998cbcd6ae3aa313fbda5ec58
6
+ metadata.gz: a95d16e34f3e0c500356c38217a0e859e1963635c4b0ae14262c5d293c0c11e43063f2e6457b2a698b554351d847c8372885194edfd66c3885e2169978c404e1
7
+ data.tar.gz: 2584d6cab57b362d6a685f0b2268f8dbe02135dac6919628780d9de1a5d21fd3a865aae08a67155f309638291b3d474c50017ec15530668721be77fd8960c75f
data/README.md CHANGED
@@ -2,20 +2,32 @@
2
2
 
3
3
  Showcase lets you build previews for your partials, components, view helpers, Stimulus controllers and more — Rails engines included!
4
4
 
5
- Add a partial to `app/views/showcase/previews` and it'll show up in Showcase's menu. Here's how to showcase a standard button component:
5
+ Add a partial to `app/views/showcase/previews` and it'll show up in Showcase's menu.
6
6
 
7
- ```html
7
+ | Light Mode | Dark Mode |
8
+ | --- | --- |
9
+ | ![](/readme/example-light.png?raw=true "Showcase showing a button component") | ![](/readme/example-dark.png?raw=true "Showcase showing a button component") |
10
+
11
+ Each sample shows the render time in milliseconds and the allocation count so it's easier to spot if there's something different happening between your samples.
12
+
13
+ ## What can I showcase?
14
+
15
+ ### Rails partials
16
+
17
+ Here's how to showcase a standard button component written with standard Rails partials:
18
+
19
+ ```erb
8
20
  <%# app/views/showcase/previews/components/_button.html.erb %>
9
21
  <% showcase.title "Button" %> <%# `title` is optional and inferred from the filename, by default. %>
10
22
  <% showcase.badge :partial, :component %> <%# Optional badges you can add to further clarify the type of the showcase. %>
11
23
  <% showcase.description "This button component handles what we click on" %>
12
24
 
13
25
  <% showcase.sample "Basic" do %>
14
- <%= render "component/button", content: "Button content", mode: :small %>
26
+ <%= render "components/button", content: "Button content", mode: :small %>
15
27
  <% end %>
16
28
 
17
29
  <% showcase.sample "Large", description: "This is our larger button" do %>
18
- <%= render "component/button", content: "Button content", mode: :large %>
30
+ <%= render "components/button", content: "Button content", mode: :large %>
19
31
  <% end %>
20
32
 
21
33
  <% showcase.options do |o| %>
@@ -24,13 +36,137 @@ Add a partial to `app/views/showcase/previews` and it'll show up in Showcase's m
24
36
  <% end %>
25
37
  ```
26
38
 
27
- Which will then render the following:
39
+ ### Components with ViewComponent
28
40
 
29
- | Light Mode | Dark Mode |
30
- | --- | --- |
31
- | ![](/readme/example-light.png?raw=true "Showcase showing a button component") | ![](/readme/example-dark.png?raw=true "Showcase showing a button component") |
41
+ If we take the `MessageComponent` as seen on [https://viewcomponent.org]():
32
42
 
33
- Each sample shows the render time in milliseconds and the allocation count so it's easier to spot if there's something different happening between your samples.
43
+ ```ruby
44
+ # app/components/message_component.rb
45
+ class MessageComponent < ViewComponent::Base
46
+ def initialize(name:)
47
+ @name = name
48
+ end
49
+ end
50
+ ```
51
+
52
+ ```erb
53
+ <%# app/components/message_component.html.erb %>
54
+ <h1>Hello, <%= @name %>!</h1>
55
+ ```
56
+
57
+ We can showcase it just by rendering it:
58
+
59
+ ```erb
60
+ <%# app/views/showcase/previews/components/_message_component.html.erb %>
61
+ <% showcase.sample "Basic" do %>
62
+ <%= render MessageComponent.new(name: "World") %>
63
+ <% end %>
64
+
65
+ <% showcase.options do |o| %>
66
+ <% o.required :name, "The name to say hello to" %>
67
+ <% end %>
68
+ ```
69
+
70
+ ### Components with Phlex
71
+
72
+ Given this [phlex-rails](https://www.phlex.fun/rails/) component:
73
+
74
+ ```ruby
75
+ # app/views/components/article.rb
76
+ class Components::Article < Phlex::HTML
77
+ def initialize(article) = @article = article
78
+
79
+ def template
80
+ h1 { @article.title }
81
+ end
82
+ end
83
+ ```
84
+
85
+ We can use Rails' `render` method to showcase it:
86
+
87
+ ```erb
88
+ <%# app/views/showcase/previews/components/_article.html.erb %>
89
+ <% showcase.sample "Basic" do %>
90
+ <%= render Components::Article.new(Article.first) %>
91
+ <% end %>
92
+ ```
93
+
94
+ ### View helpers
95
+
96
+ Any application helpers defined in `app/helpers` are automatically available in Showcase's engine, so given a helper like this:
97
+
98
+ ```ruby
99
+ # app/helpers/upcase_helper.rb
100
+ module UpcaseHelper
101
+ def upcase_string(string)
102
+ string.upcase
103
+ end
104
+ end
105
+ ```
106
+
107
+ You can showcase it like this:
108
+
109
+ ```erb
110
+ <%# app/views/showcase/previews/helpers/_upcase_helper.html.erb %>
111
+ <% showcase.sample "Basic" do %>
112
+ <%= upcase_string "hello" %>
113
+ <% end %>
114
+ ```
115
+
116
+ ### JavaScript with Stimulus controllers
117
+
118
+ Assuming we have a Stimulus controller like this:
119
+
120
+ ```javascript
121
+ // app/assets/javascripts/controllers/welcome_controller.js
122
+ import { Controller } from "@hotwired/stimulus"
123
+
124
+ export default class extends Controller {
125
+ static targets = [ "greeter" ]
126
+ static values = { yell: Boolean }
127
+
128
+ connect() {
129
+ let greeting = this.hasGreeterTarget ? `Welcome, ${this.greeterTarget.textContent}!` : "Welcome!"
130
+ if (this.yellValue) greeting = greeting.toUpperCase()
131
+
132
+ console.log(greeting)
133
+ this.dispatch("greeting", { detail: { greeting } })
134
+ }
135
+ })
136
+ ```
137
+
138
+ We can then render it to showcase it:
139
+
140
+ ```erb
141
+ <% showcase.description "The welcome controller says hello when it enters the screen" %>
142
+
143
+ <% showcase.sample "Basic", events: "welcome:greeting" do %>
144
+ <div data-controller="welcome">I've just said welcome!</div>
145
+ <% end %>
146
+
147
+ <% showcase.sample "With greeter", events: "welcome:greeting" do %>
148
+ <div data-controller="welcome">
149
+ <div data-welcome-target="greeter">Somebody</div>
150
+ </div>
151
+ <% end %>
152
+
153
+ <% showcase.sample "Yelling!!!", events: "welcome:greeting" do %>
154
+ <div data-controller="welcome" data-welcome-yell-value="true">
155
+ <% end %>
156
+
157
+ <%# We're using the built-in Stimulus context here to output `data-` attributes correctly, and save some typing. %>
158
+ <% showcase.options.context :stimulus, controller: :welcome do |o| %>
159
+ <% o.optional.targets :greeter, "If the id of the target element must be printed" %>
160
+ <% o.required.values :yell, "Whether the hello is to be YELLED", default: false %>
161
+
162
+ <%# We support the other Stimulus declarations too: %>
163
+ <% o.required.classes :success, "The success class to append after greeting" %>
164
+ <% o.required.outlet :list, "An outlet to append each yelled greeter to" %>
165
+ <% o.optional.action :greet, "An action to repeat the greeting, if need be" %>
166
+ <% end %>
167
+ ```
168
+
169
+ Note that by adding `events: "welcome:greeting"` we're listening for any time that event is dispatched. Events are logged with `console.log`, but also output alongside the sample in the browser.
34
170
 
35
171
  ## Syntax Highlighting
36
172
 
@@ -56,31 +192,46 @@ if defined?(Showcase)
56
192
  end
57
193
  ```
58
194
 
59
- ## Using options contexts
195
+ ### Loading your own syntax highlighting theme
60
196
 
61
- Showcase also supports custom options contexts. They're useful for cases where the options have a very specific format and it would be nice to keep them standardized.
197
+ By default, Showcase's syntax highlighting runs on Rouge's "github" theme.
62
198
 
63
- By default, Showcase ships Nice Partials and Stimulus contexts out of the box. Here's a sample of the Stimulus one:
199
+ To use a different theme, override [showcase/engine/_stylesheets.html.erb][] with the following, replacing `:magritte` with a [valid theme](rouge-themes):
64
200
 
65
201
  ```erb
66
- <% showcase.options.context :stimulus, controller: :welcome do |o| %>
67
- <% o.optional.targets :greeter, "If the id of the target element must be printed" %>
68
- <% end %>
202
+ <%= stylesheet_link_tag "showcase" %> # We've removed the default showcase.highlights file here.
203
+ <%= tag.style Rouge::Theme.find(:magritte).render(scope: ".sc-highlight") %>
69
204
  ```
70
205
 
71
- In case Showcase didn't ship with a Stimulus context, here's how you could add it:
206
+ [rouge-themes]: https://github.com/rouge-ruby/rouge/tree/master/lib/rouge/themes
207
+
208
+ ## Using options contexts
209
+
210
+ Showcase also supports custom options contexts. They're useful for cases where the options have a very specific format and it would be nice to keep them standardized.
211
+
212
+ By default, Showcase ships Nice Partials and Stimulus contexts out of the box. See [lib/showcase.rb][] for how they're defined.
213
+
214
+ To add a new context, you can do this:
72
215
 
73
216
  ```ruby
74
217
  # config/initializers/showcase.rb
75
- if defined?(Showcase)
76
- Showcase.options.define :stimulus do
77
- def targets(name, ...)
78
- option(%(data-#{@controller}-target="#{name}"), ...)
79
- end
218
+ return unless defined?(Showcase)
219
+
220
+ Showcase.options.define :some_context do
221
+ def targets(name, ...)
222
+ option("data-#{@prefix}-#{name}", ...)
80
223
  end
81
224
  end
82
225
  ```
83
226
 
227
+ And now we can use it, here passing in `prefix:` which becomes an instance variable available in the `define` block.
228
+
229
+ ```erb
230
+ <% showcase.options.context :some_context, prefix: "super-" do |o| %>
231
+ <% o.required.targets :title %>
232
+ <% end %>
233
+ ```
234
+
84
235
  ## Automatic previews testing
85
236
 
86
237
  Showcase can automatically generate tests for all your Showcases to have it executed in your CI setup, run `bin/rails showcase:install:previews_test` to set this up.
@@ -183,19 +334,6 @@ partials, make sure to include `"showcase"` in your list of assets.
183
334
  [showcase/engine/_javascripts.html.erb]: ./showcase/engine/_javascripts.html.erb
184
335
  [showcase/engine/_stylesheets.html.erb]: ./showcase/engine/_stylesheets.html.erb
185
336
 
186
- ### Loading your own syntax highlighting theme
187
-
188
- By default, Showcase's syntax highlighting runs on Rouge's "github" theme.
189
-
190
- To use a different theme, override [showcase/engine/_stylesheets.html.erb][] with the following, replacing `:magritte` with a [valid theme](rouge-themes):
191
-
192
- ```erb
193
- <%= stylesheet_link_tag "showcase" %> # We've removed the default showcase.highlights file here.
194
- <%= tag.style Rouge::Theme.find(:magritte).render(scope: ".sc-highlight") %>
195
- ```
196
-
197
- [rouge-themes]: https://github.com/rouge-ruby/rouge/tree/master/lib/rouge/themes
198
-
199
337
  ## Installation
200
338
 
201
339
  Add this line to your application's Gemfile. To get the previews testing make sure the `showcase-rails` gem is available to your test environment:
@@ -203,6 +341,7 @@ Add this line to your application's Gemfile. To get the previews testing make su
203
341
  ```ruby
204
342
  group :development, :test do
205
343
  gem "showcase-rails"
344
+ gem "rouge" # For syntax highlighting in Showcase.
206
345
  end
207
346
  ```
208
347
 
@@ -1,588 +1,29 @@
1
1
  /*
2
- ! tailwindcss v3.2.7 | MIT License | https://tailwindcss.com
3
- */
2
+ ! tailwindcss v3.2.7 | MIT License | https://tailwindcss.com
3
+ */
4
4
 
5
5
  /*
6
- 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
7
- 2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
8
- */
6
+ 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
7
+ 2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
8
+ */
9
9
 
10
- *,
11
- ::before,
12
- ::after {
10
+ * {
13
11
  box-sizing: border-box;
14
- /* 1 */
15
- border-width: 0;
16
- /* 2 */
17
- border-style: solid;
18
- /* 2 */
19
- border-color: #e5e7eb;
20
- /* 2 */
21
- }
22
-
23
- ::before,
24
- ::after {
25
- --tw-content: '';
26
12
  }
27
13
 
28
- /*
29
- 1. Use a consistent sensible line-height in all browsers.
30
- 2. Prevent adjustments of font size after orientation changes in iOS.
31
- 3. Use a more readable tab size.
32
- 4. Use the user's configured `sans` font-family by default.
33
- 5. Use the user's configured `sans` font-feature-settings by default.
34
- */
35
-
36
14
  html {
37
15
  line-height: 1.5;
38
- /* 1 */
39
- -webkit-text-size-adjust: 100%;
40
- /* 2 */
41
- -moz-tab-size: 4;
42
- /* 3 */
43
- -o-tab-size: 4;
44
- tab-size: 4;
45
- /* 3 */
46
16
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
47
- /* 4 */
48
- font-feature-settings: normal;
49
- /* 5 */
50
17
  }
51
18
 
52
- /*
53
- 1. Remove the margin in all browsers.
54
- 2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
55
- */
56
-
57
19
  body {
58
20
  margin: 0;
59
- /* 1 */
60
- line-height: inherit;
61
- /* 2 */
62
- }
63
-
64
- /*
65
- 1. Add the correct height in Firefox.
66
- 2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
67
- 3. Ensure horizontal rules are visible by default.
68
- */
69
-
70
- hr {
71
- height: 0;
72
- /* 1 */
73
- color: inherit;
74
- /* 2 */
75
- border-top-width: 1px;
76
- /* 3 */
77
- }
78
-
79
- /*
80
- Add the correct text decoration in Chrome, Edge, and Safari.
81
- */
82
-
83
- abbr:where([title]) {
84
- -webkit-text-decoration: underline dotted;
85
- text-decoration: underline dotted;
86
- }
87
-
88
- /*
89
- Remove the default font size and weight for headings.
90
- */
91
-
92
- h1,
93
- h2,
94
- h3,
95
- h4,
96
- h5,
97
- h6 {
98
- font-size: inherit;
99
- font-weight: inherit;
100
- }
101
-
102
- /*
103
- Reset links to optimize for opt-in styling instead of opt-out.
104
- */
105
-
106
- a {
107
- color: inherit;
108
- text-decoration: inherit;
109
21
  }
110
22
 
111
- /*
112
- Add the correct font weight in Edge and Safari.
113
- */
114
-
115
- b,
116
- strong {
117
- font-weight: bolder;
118
- }
119
-
120
- /*
121
- 1. Use the user's configured `mono` font family by default.
122
- 2. Correct the odd `em` font sizing in all browsers.
123
- */
124
-
125
- code,
126
- kbd,
127
- samp,
128
23
  pre {
24
+ margin: 0;
129
25
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
130
- /* 1 */
131
26
  font-size: 1em;
132
- /* 2 */
133
- }
134
-
135
- /*
136
- Add the correct font size in all browsers.
137
- */
138
-
139
- small {
140
- font-size: 80%;
141
- }
142
-
143
- /*
144
- Prevent `sub` and `sup` elements from affecting the line height in all browsers.
145
- */
146
-
147
- sub,
148
- sup {
149
- font-size: 75%;
150
- line-height: 0;
151
- position: relative;
152
- vertical-align: baseline;
153
- }
154
-
155
- sub {
156
- bottom: -0.25em;
157
- }
158
-
159
- sup {
160
- top: -0.5em;
161
- }
162
-
163
- /*
164
- 1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
165
- 2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
166
- 3. Remove gaps between table borders by default.
167
- */
168
-
169
- table {
170
- text-indent: 0;
171
- /* 1 */
172
- border-color: inherit;
173
- /* 2 */
174
- border-collapse: collapse;
175
- /* 3 */
176
- }
177
-
178
- /*
179
- 1. Change the font styles in all browsers.
180
- 2. Remove the margin in Firefox and Safari.
181
- 3. Remove default padding in all browsers.
182
- */
183
-
184
- button,
185
- input,
186
- optgroup,
187
- select,
188
- textarea {
189
- font-family: inherit;
190
- /* 1 */
191
- font-size: 100%;
192
- /* 1 */
193
- font-weight: inherit;
194
- /* 1 */
195
- line-height: inherit;
196
- /* 1 */
197
- color: inherit;
198
- /* 1 */
199
- margin: 0;
200
- /* 2 */
201
- padding: 0;
202
- /* 3 */
203
- }
204
-
205
- /*
206
- Remove the inheritance of text transform in Edge and Firefox.
207
- */
208
-
209
- button,
210
- select {
211
- text-transform: none;
212
- }
213
-
214
- /*
215
- 1. Correct the inability to style clickable types in iOS and Safari.
216
- 2. Remove default button styles.
217
- */
218
-
219
- button,
220
- [type='button'],
221
- [type='reset'],
222
- [type='submit'] {
223
- -webkit-appearance: button;
224
- /* 1 */
225
- background-color: transparent;
226
- /* 2 */
227
- background-image: none;
228
- /* 2 */
229
- }
230
-
231
- /*
232
- Use the modern Firefox focus style for all focusable elements.
233
- */
234
-
235
- :-moz-focusring {
236
- outline: auto;
237
- }
238
-
239
- /*
240
- Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
241
- */
242
-
243
- :-moz-ui-invalid {
244
- box-shadow: none;
245
- }
246
-
247
- /*
248
- Add the correct vertical alignment in Chrome and Firefox.
249
- */
250
-
251
- progress {
252
- vertical-align: baseline;
253
- }
254
-
255
- /*
256
- Correct the cursor style of increment and decrement buttons in Safari.
257
- */
258
-
259
- ::-webkit-inner-spin-button,
260
- ::-webkit-outer-spin-button {
261
- height: auto;
262
- }
263
-
264
- /*
265
- 1. Correct the odd appearance in Chrome and Safari.
266
- 2. Correct the outline style in Safari.
267
- */
268
-
269
- [type='search'] {
270
- -webkit-appearance: textfield;
271
- /* 1 */
272
- outline-offset: -2px;
273
- /* 2 */
274
- }
275
-
276
- /*
277
- Remove the inner padding in Chrome and Safari on macOS.
278
- */
279
-
280
- ::-webkit-search-decoration {
281
- -webkit-appearance: none;
282
- }
283
-
284
- /*
285
- 1. Correct the inability to style clickable types in iOS and Safari.
286
- 2. Change font properties to `inherit` in Safari.
287
- */
288
-
289
- ::-webkit-file-upload-button {
290
- -webkit-appearance: button;
291
- /* 1 */
292
- font: inherit;
293
- /* 2 */
294
- }
295
-
296
- /*
297
- Add the correct display in Chrome and Safari.
298
- */
299
-
300
- summary {
301
- display: list-item;
302
- }
303
-
304
- /*
305
- Removes the default spacing and border for appropriate elements.
306
- */
307
-
308
- blockquote,
309
- dl,
310
- dd,
311
- h1,
312
- h2,
313
- h3,
314
- h4,
315
- h5,
316
- h6,
317
- hr,
318
- figure,
319
- p,
320
- pre {
321
- margin: 0;
322
- }
323
-
324
- fieldset {
325
- margin: 0;
326
- padding: 0;
327
- }
328
-
329
- legend {
330
- padding: 0;
331
- }
332
-
333
- ol,
334
- ul,
335
- menu {
336
- list-style: none;
337
- margin: 0;
338
- padding: 0;
339
- }
340
-
341
- /*
342
- Prevent resizing textareas horizontally by default.
343
- */
344
-
345
- textarea {
346
- resize: vertical;
347
- }
348
-
349
- /*
350
- 1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
351
- 2. Set the default placeholder color to the user's configured gray 400 color.
352
- */
353
-
354
- input::-moz-placeholder, textarea::-moz-placeholder {
355
- opacity: 1;
356
- /* 1 */
357
- color: #9ca3af;
358
- /* 2 */
359
- }
360
-
361
- input::placeholder,
362
- textarea::placeholder {
363
- opacity: 1;
364
- /* 1 */
365
- color: #9ca3af;
366
- /* 2 */
367
- }
368
-
369
- /*
370
- Set the default cursor for buttons.
371
- */
372
-
373
- button,
374
- [role="button"] {
375
- cursor: pointer;
376
- }
377
-
378
- /*
379
- Make sure disabled buttons don't get the pointer cursor.
380
- */
381
-
382
- :disabled {
383
- cursor: default;
384
- }
385
-
386
- /*
387
- 1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
388
- 2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
389
- This can trigger a poorly considered lint error in some tools but is included by design.
390
- */
391
-
392
- img,
393
- svg,
394
- video,
395
- canvas,
396
- audio,
397
- iframe,
398
- embed,
399
- object {
400
- display: block;
401
- /* 1 */
402
- vertical-align: middle;
403
- /* 2 */
404
- }
405
-
406
- /*
407
- Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
408
- */
409
-
410
- img,
411
- video {
412
- max-width: 100%;
413
- height: auto;
414
- }
415
-
416
- /* Make elements with the HTML hidden attribute stay hidden by default */
417
-
418
- [hidden] {
419
- display: none;
420
- }
421
-
422
- [type='text'],[type='email'],[type='url'],[type='password'],[type='number'],[type='date'],[type='datetime-local'],[type='month'],[type='search'],[type='tel'],[type='time'],[type='week'],[multiple],textarea,select {
423
- -webkit-appearance: none;
424
- -moz-appearance: none;
425
- appearance: none;
426
- background-color: #fff;
427
- border-color: #6b7280;
428
- border-width: 1px;
429
- border-radius: 0px;
430
- padding-top: 0.5rem;
431
- padding-right: 0.75rem;
432
- padding-bottom: 0.5rem;
433
- padding-left: 0.75rem;
434
- font-size: 1rem;
435
- line-height: 1.5rem;
436
- --tw-shadow: 0 0 #0000;
437
- }
438
-
439
- [type='text']:focus, [type='email']:focus, [type='url']:focus, [type='password']:focus, [type='number']:focus, [type='date']:focus, [type='datetime-local']:focus, [type='month']:focus, [type='search']:focus, [type='tel']:focus, [type='time']:focus, [type='week']:focus, [multiple]:focus, textarea:focus, select:focus {
440
- outline: 2px solid transparent;
441
- outline-offset: 2px;
442
- --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
443
- --tw-ring-offset-width: 0px;
444
- --tw-ring-offset-color: #fff;
445
- --tw-ring-color: #2563eb;
446
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
447
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
448
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
449
- border-color: #2563eb;
450
- }
451
-
452
- input::-moz-placeholder, textarea::-moz-placeholder {
453
- color: #6b7280;
454
- opacity: 1;
455
- }
456
-
457
- input::placeholder,textarea::placeholder {
458
- color: #6b7280;
459
- opacity: 1;
460
- }
461
-
462
- ::-webkit-datetime-edit-fields-wrapper {
463
- padding: 0;
464
- }
465
-
466
- ::-webkit-date-and-time-value {
467
- min-height: 1.5em;
468
- }
469
-
470
- ::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field {
471
- padding-top: 0;
472
- padding-bottom: 0;
473
- }
474
-
475
- select {
476
- background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
477
- background-position: right 0.5rem center;
478
- background-repeat: no-repeat;
479
- background-size: 1.5em 1.5em;
480
- padding-right: 2.5rem;
481
- -webkit-print-color-adjust: exact;
482
- print-color-adjust: exact;
483
- }
484
-
485
- [multiple] {
486
- background-image: initial;
487
- background-position: initial;
488
- background-repeat: unset;
489
- background-size: initial;
490
- padding-right: 0.75rem;
491
- -webkit-print-color-adjust: unset;
492
- print-color-adjust: unset;
493
- }
494
-
495
- [type='checkbox'],[type='radio'] {
496
- -webkit-appearance: none;
497
- -moz-appearance: none;
498
- appearance: none;
499
- padding: 0;
500
- -webkit-print-color-adjust: exact;
501
- print-color-adjust: exact;
502
- display: inline-block;
503
- vertical-align: middle;
504
- background-origin: border-box;
505
- -webkit-user-select: none;
506
- -moz-user-select: none;
507
- user-select: none;
508
- flex-shrink: 0;
509
- height: 1rem;
510
- width: 1rem;
511
- color: #2563eb;
512
- background-color: #fff;
513
- border-color: #6b7280;
514
- border-width: 1px;
515
- --tw-shadow: 0 0 #0000;
516
- }
517
-
518
- [type='checkbox'] {
519
- border-radius: 0px;
520
- }
521
-
522
- [type='radio'] {
523
- border-radius: 100%;
524
- }
525
-
526
- [type='checkbox']:focus,[type='radio']:focus {
527
- outline: 2px solid transparent;
528
- outline-offset: 2px;
529
- --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
530
- --tw-ring-offset-width: 2px;
531
- --tw-ring-offset-color: #fff;
532
- --tw-ring-color: #2563eb;
533
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
534
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
535
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
536
- }
537
-
538
- [type='checkbox']:checked,[type='radio']:checked {
539
- border-color: transparent;
540
- background-color: currentColor;
541
- background-size: 100% 100%;
542
- background-position: center;
543
- background-repeat: no-repeat;
544
- }
545
-
546
- [type='checkbox']:checked {
547
- background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
548
- }
549
-
550
- [type='radio']:checked {
551
- background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
552
- }
553
-
554
- [type='checkbox']:checked:hover,[type='checkbox']:checked:focus,[type='radio']:checked:hover,[type='radio']:checked:focus {
555
- border-color: transparent;
556
- background-color: currentColor;
557
- }
558
-
559
- [type='checkbox']:indeterminate {
560
- background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");
561
- border-color: transparent;
562
- background-color: currentColor;
563
- background-size: 100% 100%;
564
- background-position: center;
565
- background-repeat: no-repeat;
566
- }
567
-
568
- [type='checkbox']:indeterminate:hover,[type='checkbox']:indeterminate:focus {
569
- border-color: transparent;
570
- background-color: currentColor;
571
- }
572
-
573
- [type='file'] {
574
- background: unset;
575
- border-color: inherit;
576
- border-width: 0;
577
- border-radius: 0;
578
- padding: 0;
579
- font-size: unset;
580
- line-height: inherit;
581
- }
582
-
583
- [type='file']:focus {
584
- outline: 1px solid ButtonText;
585
- outline: 1px auto -webkit-focus-ring-color;
586
27
  }
587
28
 
588
29
  *, ::before, ::after {
@@ -679,6 +120,15 @@ select {
679
120
  --tw-backdrop-sepia: ;
680
121
  }
681
122
 
123
+ .sc-link {
124
+ color: inherit !important;
125
+ text-decoration-line: none;
126
+ }
127
+
128
+ .sc-link:hover {
129
+ text-decoration-line: underline;
130
+ }
131
+
682
132
  .sc-relative {
683
133
  position: relative;
684
134
  }
@@ -691,6 +141,10 @@ select {
691
141
  grid-column: span 9 / span 9;
692
142
  }
693
143
 
144
+ .sc-m-0 {
145
+ margin: 0px;
146
+ }
147
+
694
148
  .sc-m-2 {
695
149
  margin: 0.5rem;
696
150
  }
@@ -707,6 +161,10 @@ select {
707
161
  margin-top: 0.25rem;
708
162
  }
709
163
 
164
+ .sc-block {
165
+ display: block;
166
+ }
167
+
710
168
  .sc-inline-block {
711
169
  display: inline-block;
712
170
  }
@@ -723,6 +181,10 @@ select {
723
181
  display: grid;
724
182
  }
725
183
 
184
+ .sc-list-item {
185
+ display: list-item;
186
+ }
187
+
726
188
  .sc-h-full {
727
189
  height: 100%;
728
190
  }
@@ -788,12 +250,6 @@ select {
788
250
  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
789
251
  }
790
252
 
791
- .sc-space-y-4 > :not([hidden]) ~ :not([hidden]) {
792
- --tw-space-y-reverse: 0;
793
- margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
794
- margin-bottom: calc(1rem * var(--tw-space-y-reverse));
795
- }
796
-
797
253
  .sc-space-y-8 > :not([hidden]) ~ :not([hidden]) {
798
254
  --tw-space-y-reverse: 0;
799
255
  margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
@@ -839,6 +295,10 @@ select {
839
295
  border-width: 1px;
840
296
  }
841
297
 
298
+ .sc-border-0 {
299
+ border-width: 0px;
300
+ }
301
+
842
302
  .sc-border-2 {
843
303
  border-width: 2px;
844
304
  }
@@ -851,6 +311,10 @@ select {
851
311
  border-top-width: 1px;
852
312
  }
853
313
 
314
+ .sc-border-solid {
315
+ border-style: solid;
316
+ }
317
+
854
318
  .sc-border-gray-200 {
855
319
  --tw-border-opacity: 1;
856
320
  border-color: rgb(229 231 235 / var(--tw-border-opacity));
@@ -875,6 +339,10 @@ select {
875
339
  background-color: rgb(248 250 252 / var(--tw-bg-opacity));
876
340
  }
877
341
 
342
+ .sc-p-0 {
343
+ padding: 0px;
344
+ }
345
+
878
346
  .sc-p-12 {
879
347
  padding: 3rem;
880
348
  }
@@ -903,15 +371,18 @@ select {
903
371
  padding-bottom: 0.5rem;
904
372
  }
905
373
 
906
- .sc-py-5 {
907
- padding-top: 1.25rem;
908
- padding-bottom: 1.25rem;
374
+ .sc-pb-2 {
375
+ padding-bottom: 0.5rem;
909
376
  }
910
377
 
911
378
  .sc-pl-4 {
912
379
  padding-left: 1rem;
913
380
  }
914
381
 
382
+ .sc-pt-5 {
383
+ padding-top: 1.25rem;
384
+ }
385
+
915
386
  .sc-pt-7 {
916
387
  padding-top: 1.75rem;
917
388
  }
@@ -998,10 +469,6 @@ select {
998
469
  background-color: rgb(238 242 255 / var(--tw-bg-opacity));
999
470
  }
1000
471
 
1001
- .hover\:sc-underline:hover {
1002
- text-decoration-line: underline;
1003
- }
1004
-
1005
472
  @media (prefers-color-scheme: dark) {
1006
473
  .dark\:sc-bg-neutral-700\/50 {
1007
474
  background-color: rgb(64 64 64 / 0.5);
@@ -1046,4 +513,4 @@ select {
1046
513
  .xl\:sc-col-span-2 {
1047
514
  grid-column: span 2 / span 2;
1048
515
  }
1049
- }
516
+ }
@@ -0,0 +1,44 @@
1
+ @tailwind base;
2
+ @tailwind components;
3
+ @tailwind utilities;
4
+
5
+ @layer base {
6
+ /*
7
+ ! tailwindcss v3.2.7 | MIT License | https://tailwindcss.com
8
+ */
9
+
10
+ /*
11
+ 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
12
+ 2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
13
+ */
14
+
15
+ * {
16
+ box-sizing: border-box;
17
+ }
18
+
19
+ html {
20
+ line-height: 1.5;
21
+ font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
22
+ }
23
+
24
+ body {
25
+ margin: 0;
26
+ }
27
+
28
+ pre {
29
+ margin: 0;
30
+ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
31
+ font-size: 1em;
32
+ }
33
+ }
34
+
35
+ @layer components {
36
+ .sc-link {
37
+ color: inherit !important;
38
+ text-decoration-line: none;
39
+ }
40
+
41
+ .sc-link:hover {
42
+ text-decoration-line: underline;
43
+ }
44
+ }
@@ -43,7 +43,7 @@ class Showcase::Preview
43
43
  # <%= showcase.link_to id: "extra-large" %>
44
44
  # # => <a href="components/button#extra-large"><showcase components/button#extra-large></a>
45
45
  def link_to(preview_id = id, id: nil)
46
- @view_context.link_to @view_context.preview_path(preview_id, anchor: id), class: "sc-font-mono sc-text-sm" do
46
+ @view_context.link_to @view_context.preview_path(preview_id, anchor: id), class: "sc-link sc-font-mono sc-text-sm" do
47
47
  "<showcase #{[preview_id, id].compact.join("#").squish}>"
48
48
  end
49
49
  end
@@ -1,7 +1,7 @@
1
1
  <section class="sc-w-full sc-overflow-x-auto">
2
- <h2 class="sc-text-xl sc-font-semibold sc-mb-2">Options</h2>
2
+ <h2 class="sc-text-xl sc-font-semibold sc-m-0 sc-mb-2">Options</h2>
3
3
 
4
- <table class="sc-table sc-border-collapse sc-border sc-border-gray-200">
4
+ <table class="sc-table sc-border-collapse sc-border sc-border-solid sc-border-gray-200">
5
5
  <thead>
6
6
  <tr class="sc-bg-slate-50 dark:sc-bg-neutral-800">
7
7
  <% options.headers.each do |header| %>
@@ -12,7 +12,7 @@
12
12
 
13
13
  <tbody>
14
14
  <% options.each do |option| %>
15
- <tr class="sc-border-t sc-border-gray-200">
15
+ <tr class="sc-border-0 sc-border-t sc-border-solid sc-border-gray-200">
16
16
  <% option.each do |key, value| %>
17
17
  <% if key == :required %>
18
18
  <td class="sc-p-4">
@@ -2,22 +2,22 @@
2
2
  <section>
3
3
  <% if preview.title %>
4
4
  <div class="sc-flex sc-items-center sc-space-x-2 sc-mb-2">
5
- <h2 class="sc-font-semibold sc-text-3xl"><%= preview.title %></h2>
5
+ <h2 class="sc-font-semibold sc-text-3xl sc-m-0"><%= preview.title %></h2>
6
6
 
7
7
  <% preview.badges.each do |badge| %>
8
- <span class="sc-border-2 sc-border-indigo-300 sc-rounded-full sc-px-2 sc-mt-1"><%= badge.to_s.titleize %></span>
8
+ <span class="sc-border-0 sc-border-2 sc-border-solid sc-border-indigo-300 sc-rounded-full sc-px-2 sc-mt-1"><%= badge.to_s.titleize %></span>
9
9
  <% end %>
10
10
  </div>
11
11
  <% end %>
12
12
 
13
13
  <% if preview.description %>
14
- <p class="sc-font-normal sc-text-base"><%= preview.description %></p>
14
+ <div class="sc-font-normal sc-text-base"><%= preview.description %></div>
15
15
  <% end %>
16
16
  </section>
17
17
 
18
18
  <% if preview.samples.any? %>
19
19
  <section>
20
- <h2 class="sc-font-semibold sc-text-xl sc-mb-2">Samples</h2>
20
+ <h2 class="sc-font-semibold sc-text-xl sc-m-0 sc-mb-2">Samples</h2>
21
21
  <%= render partial: "showcase/engine/sample", collection: preview.samples %>
22
22
  </section>
23
23
  <% end %>
@@ -1,8 +1,8 @@
1
1
  <main class="sc-flex sc-flex-wrap dark:sc-bg-neutral-900 dark:sc-text-white" aria-labelledby="showcase_main_title">
2
2
  <section class="sc-grid sc-grid-cols-12 sc-w-full">
3
- <nav class="sc-col-span-3 xl:sc-col-span-2 sc-py-5 sc-h-full sc-border-r">
4
- <h1 id="showcase_main_title" class="sc-font-black sc-text-2xl sc-py-2 sc-pl-4 sc-cursor-pointer">
5
- <%= link_to "Showcase", root_url, class: "!sc-text-inherit hover:sc-underline" %>
3
+ <nav class="sc-col-span-3 xl:sc-col-span-2 sc-h-full sc-border-0 sc-border-r sc-border-solid sc-border-gray-200">
4
+ <h1 id="showcase_main_title" class="sc-font-black sc-text-2xl sc-m-0">
5
+ <%= link_to "Showcase", root_url, class: "sc-link sc-block sc-pt-5 sc-pb-2 sc-pl-4" %>
6
6
  </h1>
7
7
 
8
8
  <%= render Showcase::Path.tree %>
@@ -1,9 +1,9 @@
1
- <section class="sc-mb-4 sc-border sc-border-gray-200 sc-rounded-md sc-overflow-clip" aria-labelledby="showcase_<%= sample.id %>_title">
1
+ <section class="sc-mb-4 sc-border sc-border-solid sc-border-gray-200 sc-rounded-md sc-overflow-clip" aria-labelledby="showcase_<%= sample.id %>_title">
2
2
  <showcase-sample id="<%= sample.id %>" events="<%= sample.events %>">
3
3
  <header class="sc-bg-slate-100/50 dark:sc-bg-neutral-700/50">
4
4
  <div class="sc-flex sc-justify-between">
5
- <h3 id="showcase_<%= sample.id %>_title" class="sc-px-4 sc-py-2 sc-font-medium sc-text-base md:sc-text-lg sc-leading-snug sc-truncate">
6
- <%= link_to sample.name, "##{sample.id}", class: "!sc-text-inherit" %>
5
+ <h3 id="showcase_<%= sample.id %>_title" class="sc-m-0 sc-px-4 sc-py-2 sc-font-medium sc-text-base md:sc-text-lg sc-leading-snug sc-truncate">
6
+ <%= link_to sample.name, "##{sample.id}", class: "sc-link" %>
7
7
  </h3>
8
8
 
9
9
  <% if event = sample.instrumented %>
@@ -15,7 +15,7 @@
15
15
  </div>
16
16
 
17
17
  <% if sample.description %>
18
- <p class="sc-px-4 sc-py-2 sc-text-base"><%= sample.description %></p>
18
+ <div class="sc-px-4 sc-pb-2 sc-text-base"><%= sample.description %></div>
19
19
  <% end %>
20
20
  </header>
21
21
 
@@ -27,7 +27,7 @@
27
27
 
28
28
  <% if sample.source %>
29
29
  <details>
30
- <summary class="sc-px-4 sc-py-2 hover:sc-bg-indigo-50 dark:hover:sc-bg-neutral-700/50 sc-cursor-pointer sc-select-none">View Source</summary>
30
+ <summary class="sc-list-item sc-px-4 sc-py-2 hover:sc-bg-indigo-50 dark:hover:sc-bg-neutral-700/50 sc-cursor-pointer sc-select-none">View Source</summary>
31
31
 
32
32
  <section class="sc-highlight sc-px-4 sc-py-2 sc-relative sc-overflow-y-auto hover:sc-select-all">
33
33
  <pre><%= sample.source %></pre>
@@ -37,7 +37,7 @@
37
37
 
38
38
  <% if sample.events.any? %>
39
39
  <section class="sc-px-4 sc-py-2 sc-font-small sc-bg-slate-50 dark:sc-bg-neutral-800 sc-rounded-b-md" aria-labelledby="showcase_<%= sample.id %>_javascript_events_title">
40
- <h4 id="showcase_<%= sample.id %>_javascript_events_title" class="sc-mb-2 sc-font-medium sc-text-base">JavaScript Events</h4>
40
+ <h4 id="showcase_<%= sample.id %>_javascript_events_title" class="sc-m-0 sc-mb-2 sc-font-medium sc-text-base">JavaScript Events</h4>
41
41
 
42
42
  <div class="sc-overflow-scroll sc-max-h-48">
43
43
  <pre data-showcase-sample-target="relay"></pre>
@@ -1,35 +1,35 @@
1
- <article class="sc-space-y-4 sc-font-normal sc-text-base" aria-labelledby="showcase_article_title">
2
- <p id="showcase_article_title" class="sc-font-normal sc-text-xl">👋 Welcome to <span class="sc-italic">Showcase</span> — your UI Pattern Library!</p>
1
+ <article class="sc-font-normal sc-text-base" aria-labelledby="showcase_article_title">
2
+ <p id="showcase_article_title" class="sc-m-0 sc-font-normal sc-text-xl">👋 Welcome to <span class="sc-italic">Showcase</span> — your UI Pattern Library!</p>
3
3
 
4
- <section class="sc-space-y-4">
4
+ <section>
5
5
  <h2 class="sc-font-semibold sc-text-2xl">What is this thing?</h2>
6
6
  <p>This resource is intended to be a hub for all-things UI for your developers, with the goal of <span class="italic font-semibold">sharing knowledge</span>, <span class="italic font-semibold">promoting reuse of existing code</span>, and <span class="italic font-semibold">ensuring consistency</span> across your application.</p>
7
7
  </section>
8
8
 
9
- <section class="sc-space-y-4">
9
+ <section>
10
10
  <h2 class="sc-font-semibold sc-text-2xl">How do I use it?</h2>
11
11
  <p>On each preview, you can add a series of usage examples for each component, style, or pattern. In the samples blocks, you'll see a live preview, as well as the source used to produce the example.</p>
12
12
  <p>At the bottom of most previews, you will see a table, listing any options for configuring the partial or component.</p>
13
13
  </section>
14
14
 
15
- <section class="sc-space-y-4">
15
+ <section>
16
16
  <h2 class="sc-font-semibold sc-text-2xl">But I don't see the thing I need 🤔</h2>
17
17
  <p>If you don't see the pattern or component here, that doesn't mean it doesn't aleady exist or can't be created with some combination of existing building blocks.</p>
18
18
  </section>
19
19
 
20
- <section class="sc-space-y-4">
20
+ <section>
21
21
  <h2 class="sc-font-semibold sc-text-2xl">I have questions, who do I reach out to?</h2>
22
22
  <p>If you need help or have questions, please reach out to <%#= Showcase.links.support %>.</p>
23
23
  </section>
24
24
 
25
- <section class="sc-space-y-4">
25
+ <section>
26
26
  <h2 class="sc-font-semibold sc-text-2xl">Additional resources</h2>
27
- <ul class="sc-list-none">
27
+ <ul class="sc-list-none sc-p-0">
28
28
  <li>
29
- <%= link_to "Showcase documentation", "https://github.com/bullet-train-co/showcase", target: "_blank" %>
29
+ <%= link_to "Showcase documentation", "https://github.com/bullet-train-co/showcase", target: "_blank", class: "sc-link" %>
30
30
  </li>
31
31
  <li>
32
- <%= link_to "Bullet Train field partials documentation", "https://bullettrain.co/docs/field-partials", target: "_blank" %>
32
+ <%= link_to "Bullet Train field partials documentation", "https://bullettrain.co/docs/field-partials", target: "_blank", class: "sc-link" %>
33
33
  </li>
34
34
  </ul>
35
35
  </section>
@@ -1,4 +1,4 @@
1
1
  <details open class="sc-flex sc-flex-col <%= "sc-pl-4" unless tree.root? %>">
2
- <%= tag.summary tree.name.titleize, class: "hover:sc-bg-indigo-50 dark:hover:sc-bg-neutral-700/50 sc-font-medium sc-text-base sc-py-2 sc-pl-4 sc-cursor-pointer" %>
2
+ <%= tag.summary tree.name.titleize, class: "sc-list-item hover:sc-bg-indigo-50 dark:hover:sc-bg-neutral-700/50 sc-font-medium sc-text-base sc-py-2 sc-pl-4 sc-cursor-pointer" %>
3
3
  <%= render tree.ordered_children %>
4
4
  </details>
@@ -15,9 +15,8 @@ module.exports = {
15
15
  },
16
16
  },
17
17
  },
18
- plugins: [
19
- require('@tailwindcss/forms'),
20
- require('@tailwindcss/aspect-ratio'),
21
- require('@tailwindcss/typography'),
22
- ]
18
+ corePlugins: {
19
+ preflight: false,
20
+ },
21
+ plugins: []
23
22
  }
@@ -1,3 +1,3 @@
1
1
  module Showcase
2
- VERSION = "0.3.2"
2
+ VERSION = "0.4.0"
3
3
  end
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: showcase-rails
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.3.2
4
+ version: 0.4.0
5
5
  platform: ruby
6
6
  authors:
7
7
  - Daniel Pence
@@ -9,7 +9,7 @@ authors:
9
9
  autorequire:
10
10
  bindir: bin
11
11
  cert_chain: []
12
- date: 2023-03-27 00:00:00.000000000 Z
12
+ date: 2023-03-28 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: rails
@@ -53,6 +53,7 @@ files:
53
53
  - app/assets/builds/showcase.highlights.css
54
54
  - app/assets/config/showcase_manifest.js
55
55
  - app/assets/javascripts/showcase.js
56
+ - app/assets/stylesheets/showcase.tailwind.css
56
57
  - app/controllers/showcase/engine_controller.rb
57
58
  - app/controllers/showcase/previews_controller.rb
58
59
  - app/models/showcase/path.rb