SERV-2286 - card documentation

src/Views/Limitless/Element/Card/Documentation/Index.blade.php

@@ -3,20 +3,87 @@
 
 @section('Limitless::Content')
 
-    @php
-        $example = base64_decode("ICAgIEBMaW1pdGxlc3M6OkVsZW1lbnRDYXJkU3RhcnQoWyd0aXRsZScgPT4gIkNvZGVtaXJyb3IgVGVzdCIsICdpY29uJyA9PiAnaWNvbi1maWxlLWVtcHR5JyBdICkKICAgICAgICBJIGFtIGluc2lkZSBhIGNhcmQhCiAgICBATGltaXRsZXNzOjpFbGVtZW50Q2FyZFN0b3A=");
-    @endphp
 
-    @Limitless::ElementCardStart(['title' => "Documentation", 'icon' => 'icon-file-text3', 'collapsable' => true, 'removeable' => false, 'extra' => ['style' => 'position:relative;', 'id' => 'elemento1', 'class' => 'card'] ])
-        Description for card element here.
+    {{-- Description --}}
+    @Limitless::ElementCardStart(['title' => "Card", 'icon' => 'icon-newspaper'])
+        <p>A styled horizontal line for separating contents.</p>
+    @Limitless::ElementCardStop
+
+    {{-- Elements --}}
+    @Limitless::ElementCardStart(['title' => "Elements", 'icon' => 'icon-grid5'])
+
+        @Limitless::ElementCardStart(['title' => "ElementCardStart"])
+
+            <p>The opening element for the card.</p>
+            @Limitless::Divider
+            </br>
+            <h6>Parameters</h6>
+            @Limitless::TableStart([ 'extra' => ['class' => 'table table-xs table-striped table-docu'] ])
+
+                @Limitless::TableAutofillHeader([
+                    ['name' => 'Key'],
+                    ['name' => 'Type'],
+                    ['name' => 'Description']
+                ])
+
+                @Limitless::TableAutofillBody([
+                    [
+                        ['value' => 'title'],
+                        ['value' => '<i>String</i> [Default = <code>"No Title"</code>]', 'secure' => false],
+                        ['value' => 'The header title of the card.']
+                    ],
+                    [
+                        ['value' => 'icon'],
+                        ['value' => 'String [Default = <code>"icon-circle2"</code>]', 'secure' => false],
+                        ['value' => 'The header icon of the card.']
+                    ],
+                    [
+                        ['value' => 'collapsible'],
+                        ['value' => 'Boolean [Default = <code>true</code>]', 'secure' => false],
+                        ['value' => 'Option to make the card body to show or hide.']
+                    ],
+                    [
+                        ['value' => 'removable'],
+                        ['value' => 'Boolean [Default = <code>false</code>]', 'secure' => false],
+                        ['value' => 'Option to show or hide the close button.']
+                    ],
+                    [
+                        ['value' => 'extra'],
+                        ['value' => 'Array [Default = <code>[]</code>]', 'secure' => false],
+                        ['value' => 'Adds custom attributes for the card div element. existing attributes such as class will be overwritten.']
+                    ]
+                ])
+            @Limitless::TableStop
+
+        @Limitless::ElementCardStop
+
+        @Limitless::ElementCardStart(['title' => "ElementCardStop"])
+
+            <p>The closing element for the card.</p>
+            @Limitless::Divider
+            </br>
+            <h6>Parameters : NONE</h6>
+
+        @Limitless::ElementCardStop
+
     @Limitless::ElementCardStop
 
-    @Limitless::ElementCardStart(['title' => "Card Sample", 'icon' => 'icon-file-empty' ] )
-        I am inside a card!
+    {{-- Sample Output --}}
+    @Limitless::ElementCardStart(['title' => "Sample Output", 'icon' => 'icon-display4' ] )
+        @Limitless::ElementCardStart(['title' => "Card", 'icon' => 'icon-newspaper', 'collapsible' => true, 'removable' => true, 'extra' => ['style' => 'position:relative;', 'id' => 'elemento1', 'class' => 'card']] )
+            I am inside a card!
+        @Limitless::ElementCardStop
     @Limitless::ElementCardStop
 
-    @Limitless::ElementCardStart(['title' => "Card Syntax", 'icon' => 'icon-file-empty' ] )
+    @php
+        $example = base64_decode("QExpbWl0bGVzczo6RWxlbWVudENhcmRTdGFydChbJ3RpdGxlJyA9PiAiQ2FyZCIsICdpY29uJyA9PiAnaWNvbi1uZXdzcGFwZXInLCAnY29sbGFwc2libGUnID0+IHRydWUsICdyZW1vdmVhYmxlJyA9PiB0cnVlLCAnZXh0cmEnID0+IFsnc3R5bGUnID0+ICdwb3NpdGlvbjpyZWxhdGl2ZTsnLCAnaWQnID0+ICdlbGVtZW50bzEnLCAnY2xhc3MnID0+ICdjYXJkJ11dICkKCUkgYW0gaW5zaWRlIGEgY2FyZCEKQExpbWl0bGVzczo6RWxlbWVudENhcmRTdG9w");
+    @endphp
+
+    {{-- Sample Code --}}
+    @Limitless::ElementCardStart(['title' => "Sample Code", 'icon' => 'icon-circle-code' ] )
         @Limitless::Codemirror([ 'language' => 'javascript', 'theme' => 'zenburn', 'value' => $example ])
     @Limitless::ElementCardStop
 
+
+
 @stop

src/Views/Limitless/Element/Card/Start.blade.php

@@ -7,11 +7,11 @@
         <div class="header-elements">
             <div class="list-icons">
 
-                @if($collapsable)
+                @if($collapsible)
                     <a class="list-icons-item" data-action="collapse"></a>
                 @endif
 
-                @if($removeable)
+                @if($removable)
                     <a class="list-icons-item" data-action="remove"></a>
                 @endif
          </div>

src/Views/Limitless/Element/Config.php

@@ -62,8 +62,8 @@
             return View('Limitless::Element.Card.Start')
             ->withTitle( (isset($parameters['title']) ? $parameters['title'] : 'No Title') )
             ->withIcon( (isset($parameters['icon']) ? $parameters['icon'] : 'icon-circle2') )
-            ->withCollapsable( (isset($parameters['collapsable']) ? $parameters['collapsable'] : true) )
-            ->withRemoveable( (isset($parameters['removeable']) ? $parameters['removeable'] : false) )
+            ->withCollapsible( (isset($parameters['collapsible']) ? $parameters['collapsible'] : true) )
+            ->withRemovable( (isset($parameters['removable']) ? $parameters['removable'] : false) )
             ->withExtra( (isset($parameters['extra']) ? $parameters['extra'] : [] ) );
 
         }

src/Views/Limitless/Help/Layout/Master.blade.php

@@ -27,7 +27,7 @@
         @Limitless::NavigationMenuItem(['url' => '/ceetrox/sidekick/resource/public/Webdesigns/design-limitless/Template/layout_1/LTR/dark/full/icons_icomoon.html', 'target' => '_blank', 'icon' => 'icon-file-picture', 'title' => 'Icons'])
         @Limitless::NavigationMenuSectionTitle(['title' => 'Elements'])
         @Limitless::NavigationMenuItem(['url' => '?page=example', 'target' => '_self', 'icon' => 'icon-exclamation', 'title' => 'Example'])
-        @Limitless::NavigationMenuItem(['url' => '?page=card', 'target' => '_self', 'icon' => 'icon-square', 'title' => 'Card'])
+        @Limitless::NavigationMenuItem(['url' => '?page=card', 'target' => '_self', 'icon' => 'icon-newspaper', 'title' => 'Card'])
         @Limitless::NavigationMenuItem(['url' => '?page=table', 'target' => '_self', 'icon' => 'icon-table2', 'title' => 'Table'])
         @Limitless::NavigationMenuItem(['url' => '?page=codemirror', 'target' => '_self', 'icon' => 'icon-circle-code', 'title' => 'Code Mirror'])
         @Limitless::NavigationMenuItem(['url' => '?page=navigation', 'target' => '_self', 'icon' => 'icon-menu8', 'title' => 'Navigation'])

src/Views/Limitless/Help/Pages/Home.blade.php

@@ -3,7 +3,7 @@
 
 @section('Limitless::Content')
 
-@Limitless::ElementCardStart(['title' => "Documentation", 'icon' => 'icon-file-text3', 'collapsable' => true, 'removeable' => false, 'extra' => ['style' => 'position:relative;', 'id' => 'elemento1', 'class' => 'card'] ])
+@Limitless::ElementCardStart(['title' => "Documentation", 'icon' => 'icon-file-text3', 'collapsible' => true, 'removable' => false, 'extra' => ['style' => 'position:relative;', 'id' => 'elemento1', 'class' => 'card'] ])
     This is the documentation for the <i>Limitless</i> theme.
     <i>Limitless</i> is a part of <i>Picasso</i>, a feature of the package <i>Sidekick</i> from <i>Ceetrox</i>.
     The elements shown in this documentation are available as blade code and can be copied directly into your project.