Fix typo, add example and specs

Author: stiwwelll

docs/components/legend.md

@@ -9,12 +9,12 @@ The HTML legend tag implemented in ruby.
 This component can take 2 optional configuration params and optional content.
 
 #### # id (optional)
-Expects a string with all ids the main should have.
+Expects a string with all ids the legend should have.
 
 #### # class (optional)
-Expects a string with all classes the main should have.
+Expects a string with all classes the legend should have.
 
-## Example
+## Example 1: Yield a given block
 
 ```ruby
 legend id: "foo", class: "bar" do
@@ -29,3 +29,16 @@ returns
   Hello World
 </legend>
 ```
+
+## Example 2: Render options[:text] param
+
+```ruby
+legend id: "foo", class: "bar", text: 'Hello World'
+```
+
+returns
+
+```html
+<legend id="foo" class="bar">
+  Hello World
+</legend>

spec/usage/components/legend_spec.rb

@@ -9,8 +9,11 @@ class ExamplePage < Matestack::Ui::Page
 
       def response
         components {
+          legend text: 'I am simple'
+
+          # enhanced legend
           legend id: 'my-id', class: 'my-class' do
-            plain 'Hello World' #optional content
+            plain 'I am enhanced'
           end
         }
       end
@@ -22,9 +25,8 @@ def response
     static_output = page.html
 
     expected_static_output = <<~HTML
-    <legend id="my-id" class="my-class">
-      Hello World
-    </legend>
+      <legend>I am simple</legend>
+      <legend id="my-id" class="my-class">I am enhanced</legend>
     HTML
 
     expect(stripped(static_output)).to include(stripped(expected_static_output))