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.