README.md in lookbook-0.4.0.beta.1 vs README.md in lookbook-0.4.0.beta.2
- old
+ new
@@ -74,11 +74,11 @@
Lookbook parses [Yard-style comment tags](https://rubydoc.info/gems/yard/file/docs/Tags.md) in your preview classes to customise and extend the standard ViewComponent preview experience:
```ruby
# @label Basic Button
-# @display bg_color: "#fff"
+# @display bg_color "#fff"
class ButtonComponentPreview < ViewComponent::Preview
# Primary button
# ---------------
# This is the button style you should use for most things.
@@ -92,11 +92,11 @@
# Inverted button
# ---------------
# For light-on-dark screens
#
- # @display bg_color: "#000"
+ # @display bg_color "#000"
def secondary
render ButtonComponent.new(style: :inverted) do
"Click me"
end
end
@@ -178,29 +178,29 @@
def default
end
end
```
-### 🔖 `@display <key>: <value>`
+### 🔖 `@display <key> <value>`
The `@display` tag lets you pass custom parameters to your preview layout so that the component preview can be customised on a per-example basis.
```ruby
-# @display bg_color: "#eee"
+# @display bg_color "#eee"
class FooComponentPreview < ViewComponent::Preview
- # @display max_width: "500px"
- # @display wrapper: true
+ # @display max_width "500px"
+ # @display wrapper true
def default
end
end
```
The `@display` tag can be applied at the preview (class) or at the example (method) level, and takes the following format:
```ruby
-# @display <key>: <value>
+# @display <key> <value>
```
- `<key>` must be a valid Ruby hash key name, without quotes or spaces
- `<value>` must be a valid JSON-parsable value. It can be a string (surrounded by **double** quotes), a boolean or an integer.
@@ -247,22 +247,22 @@
#### Some `@display` value examples:
Valid:
```ruby
-# @display body_classes: "bg-red border border-4 border-green"
-# @display wrap_in_container: true
-# @display emojis_to_show: 4
-# @display page_title: "Special example title"
+# @display body_classes "bg-red border border-4 border-green"
+# @display wrap_in_container true
+# @display emojis_to_show 4
+# @display page_title "Special example title"
```
Invalid:
```ruby
-# @display body_classes: 'bg-red border border-4 border-green' [❌ single quotes]
-# @display wrap_in_container: should_wrap [❌ unquoted string, perhaps trying to call a method]
-# @display page title: "Special example title" [❌ space in key]
-# @display bg_color: #fff [❌ colors need quotes around them, it's not CSS!]
+# @display body_classes 'bg-red border border-4 border-green' [❌ single quotes]
+# @display wrap_in_container should_wrap [❌ unquoted string, perhaps trying to call a method]
+# @display page title "Special example title" [❌ space in key]
+# @display bg_color #fff [❌ colors need quotes around them, it's not CSS!]
```
### 🔖 `@!group <name> ... @!endgroup`
For smaller components, it can often make sense to render a set of preview examples in a single window, rather than representing them as individual items in the navigation which can start to look a bit cluttered.