README.md in lookbook-0.4.8 vs README.md in lookbook-0.5.0.beta.0
- old
+ new
@@ -77,11 +77,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.
@@ -108,11 +108,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
@@ -186,11 +186,11 @@
<h3 id="display-tag">🏷 @display</h3>
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
def default
@@ -204,9 +204,11 @@
@display <key> <value>
```
- `<key>` must be a valid Ruby hash key name, without quotes or spaces
- `<value>` will be parsed using the [Ruby YAML parser](https://yaml.org/YAML_for_ruby.html) to resolve the value
+
+> Note: Ruby YAML does not (generally) require quoting of string values. However in some cases it _is_ required due to the presence of [indicator characters](https://yaml.org/YAML_for_ruby.html#indicators_in_strings) (such as `#`, `:` etc) - hence why the hex color code in the example above is surrounded by quotes. It's perfectly ok to quote all string values if you prefer.
These display parameters can then be accessed via the `params` hash in your preview layout using `params[:lookbook][:display][<key>]`:
```html
<!DOCTYPE html>