SERV-2286 - card documentation modifications (needs verification)

src/Views/Limitless/Card/Config.php

@@ -46,7 +46,7 @@
         {
             return View('Limitless::Card.Start')
             ->withTitle( ($parameters['title'] ?? 'No Title') )
-            ->withIcon( ($parameters['icon'] ?? 'icon-circle2') )
+            ->withIcon( ($parameters['icon'] ?? null) )
             ->withCollapsible( ($parameters['collapsible'] ?? true) )
             ->withRemovable( ($parameters['removable'] ?? false) )
             ->withExtra( ($parameters['extra'] ?? []) );

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

@@ -5,18 +5,44 @@
 
 
     {{-- Description --}}
-    @Limitless::CardStart(['title' => "Card", 'icon' => 'icon-newspaper'])
-        <p>A styled container for grouping contents.</p>
+    @Limitless::CardStart(['title' => "Description", 'icon' => 'icon-info22'])
+        <p>
+            A styled container for grouping contents. For more details, refer to the original documentation
+            <a href="/ceetrox/sidekick/resource/public/Webdesigns/design-limitless/Template/layout_1/LTR/dark/full/content_cards.html" target="_blank">
+                here
+            </a>.
+        </p>
     @Limitless::CardStop
 
-    {{-- Elements --}}
-    @Limitless::CardStart(['title' => "Fragments", 'icon' => 'icon-grid5'])
+    {{-- Basics --}}
+    @Limitless::CardStart(['title' => "Basics", 'icon' => 'icon-book'])
 
         <div class="bg-dark rounded py-2 px-3 mb-3">
-            <h6 class="mb-0 font-weight-semibold">CardStart</h6>
-            <p class="mb-3 text-muted">The opening fragment of the card element.</p>
-            <p class="font-italic font-size-lg">Parameters</p>
-            <div class="row mt-2">
+            <h6 class="mb-0 font-weight-semibold">Output</h6>
+            @Limitless::Divider
+            <div class="mt-2">
+                @Limitless::CardStart( ['title' => "Card"] )
+                    @Limitless::LoremIpsum
+                @Limitless::CardStop
+            </div>
+        </div>
+
+        @php
+            $example = base64_decode("QExpbWl0bGVzczo6Q2FyZFN0YXJ0KCBbJ3RpdGxlJyA9PiAiQ2FyZCJdICkKCUBMaW1pdGxlc3M6OkxvcmVtSXBzdW0KQExpbWl0bGVzczo6Q2FyZFN0b3A=");
+        @endphp
+
+        <div class="bg-dark rounded py-2 px-3 mb-3">
+            <h6 class="mb-0 font-weight-semibold">Code</h6>
+            @Limitless::Divider
+            <div class="mt-2">
+                @Limitless::Codemirror([ 'language' => 'javascript', 'theme' => 'zenburn', 'value' => $example ])
+            </div>
+        </div>
+
+        <div class="bg-dark rounded py-2 px-3 mb-3">
+            <h6 class="mb-0 font-weight-semibold">Parameters</h6>
+            @Limitless::Divider
+            <div class="mt-2">
                 @Limitless::TableStart([ 'extra' => ['class' => 'table table-xs table-striped'] ])
 
                     @Limitless::TableAutofillHeader([
@@ -30,12 +56,103 @@
                             ['value' => 'title'],
                             ['value' => '<i>String</i> [Default = <code>"No Title"</code>]', 'secure' => false],
                             ['value' => 'The header title of the card.']
-                        ],
+                        ]
+                    ])
+
+                @Limitless::TableStop
+            </div>
+        </div>
+
+    @Limitless::CardStop
+
+    {{-- Styling --}}
+    @Limitless::CardStart(['title' => "Styling", 'icon' => 'icon-brush', 'extra' => ['class' => 'card card-collapsed'] ])
+
+        <div class="bg-dark rounded py-2 px-3 mb-3">
+            <h6 class="mb-0 font-weight-semibold">Output</h6>
+            @Limitless::Divider
+            <div class="mt-2">
+                @Limitless::CardStart( ['icon' => "icon-newspaper"] )
+                    @Limitless::LoremIpsum
+                @Limitless::CardStop
+            </div>
+        </div>
+
+        @php
+            $example = base64_decode("QExpbWl0bGVzczo6Q2FyZFN0YXJ0KCBbJ2ljb24nID0+ICJpY29uLW5ld3NwYXBlciJdICkKCUBMaW1pdGxlc3M6OkxvcmVtSXBzdW0KQExpbWl0bGVzczo6Q2FyZFN0b3A=");
+        @endphp
+
+        <div class="bg-dark rounded py-2 px-3 mb-3">
+            <h6 class="mb-0 font-weight-semibold">Code</h6>
+            @Limitless::Divider
+            <div class="mt-2">
+                @Limitless::Codemirror([ 'language' => 'javascript', 'theme' => 'zenburn', 'value' => $example ])
+            </div>
+        </div>
+
+        <div class="bg-dark rounded py-2 px-3 mb-3">
+            <h6 class="mb-0 font-weight-semibold">Parameters</h6>
+            <div class="mt-2">
+                @Limitless::TableStart([ 'extra' => ['class' => 'table table-xs table-striped'] ])
+
+                    @Limitless::TableAutofillHeader([
+                        ['name' => 'Key'],
+                        ['name' => 'Type'],
+                        ['name' => 'Description']
+                    ])
+
+                    @Limitless::TableAutofillBody([
                         [
                             ['value' => 'icon'],
-                            ['value' => '<i>String</i> [Default = <code>"icon-circle2"</code>]', 'secure' => false],
+                            ['value' => '<i>String</i> [Default = <code>null</code>]', 'secure' => false],
                             ['value' => 'The header icon of the card.']
-                        ],
+                        ]
+                    ])
+
+                @Limitless::TableStop
+            </div>
+        </div>
+
+    @Limitless::CardStop
+
+
+    {{-- Attributes --}}
+    @Limitless::CardStart(['title' => "Attributes", 'icon' => 'icon-tree5', 'extra' => ['class' => 'card card-collapsed'] ])
+
+    <div class="bg-dark rounded py-2 px-3 mb-3">
+        <h6 class="mb-0 font-weight-semibold">Output</h6>
+        @Limitless::Divider
+        <div class="mt-2">
+            @Limitless::CardStart([ 'collapsible' => false, 'removable' => true, 'extra' => ['style' => 'position:relative;', 'id' => 'elemento1', 'class' => 'card my-card-css-class'] ])
+                @Limitless::LoremIpsum
+            @Limitless::CardStop
+        </div>
+    </div>
+
+    @php
+        $example = base64_decode("QExpbWl0bGVzczo6Q2FyZFN0YXJ0KFsgJ2NvbGxhcHNpYmxlJyA9PiBmYWxzZSwgJ3JlbW92YWJsZScgPT4gdHJ1ZSwgJ2V4dHJhJyA9PiBbJ3N0eWxlJyA9PiAncG9zaXRpb246cmVsYXRpdmU7JywgJ2lkJyA9PiAnZWxlbWVudG8xJywgJ2NsYXNzJyA9PiAnY2FyZCBteS1jYXJkLWNzcy1jbGFzcyddIF0pCglATGltaXRsZXNzOjpMb3JlbUlwc3VtCkBMaW1pdGxlc3M6OkNhcmRTdG9w");
+    @endphp
+
+    <div class="bg-dark rounded py-2 px-3 mb-3">
+        <h6 class="mb-0 font-weight-semibold">Code</h6>
+        @Limitless::Divider
+        <div class="mt-2">
+            @Limitless::Codemirror([ 'language' => 'javascript', 'theme' => 'zenburn', 'value' => $example ])
+        </div>
+    </div>
+
+    <div class="bg-dark rounded py-2 px-3 mb-3">
+        <h6 class="mb-0 font-weight-semibold">Parameters</h6>
+        <div class="mt-2">
+            @Limitless::TableStart([ 'extra' => ['class' => 'table table-xs table-striped'] ])
+
+                @Limitless::TableAutofillHeader([
+                    ['name' => 'Key'],
+                    ['name' => 'Type'],
+                    ['name' => 'Description']
+                ])
+
+                @Limitless::TableAutofillBody([
                     [
                         ['value' => 'collapsible'],
                         ['value' => '<i>Boolean</i> [Default = <code>true</code>]', 'secure' => false],
@@ -52,34 +169,11 @@
                         ['value' => 'Adds custom attributes for the card div element. existing attributes such as class will be overwritten.']
                     ]
                 ])
+
             @Limitless::TableStop
         </div>
     </div>
 
-        <div class="bg-dark rounded py-2 px-3 mb-3">
-            <h6 class="mb-0 font-weight-semibold">CardStop</h6>
-            <p class="mb-3 text-muted">The closing fragment of the card element.</p>
-            <p class="font-italic font-size-lg">Parameters</p> NONE
-        </div>
-
-    @Limitless::CardStop
-
-    {{-- Sample Output --}}
-    @Limitless::CardStart(['title' => "Sample Output", 'icon' => 'icon-display4' ] )
-        @Limitless::CardStart(['title' => "Card", 'icon' => 'icon-newspaper', 'collapsible' => true, 'removable' => true, 'extra' => ['style' => 'position:relative;', 'id' => 'elemento1', 'class' => 'card']] )
-            I am inside a card!
-        @Limitless::CardStop
-    @Limitless::CardStop
-
-    @php
-        $example = base64_decode("QExpbWl0bGVzczo6RWxlbWVudENhcmRTdGFydChbJ3RpdGxlJyA9PiAiQ2FyZCIsICdpY29uJyA9PiAnaWNvbi1uZXdzcGFwZXInLCAnY29sbGFwc2libGUnID0+IHRydWUsICdyZW1vdmVhYmxlJyA9PiB0cnVlLCAnZXh0cmEnID0+IFsnc3R5bGUnID0+ICdwb3NpdGlvbjpyZWxhdGl2ZTsnLCAnaWQnID0+ICdlbGVtZW50bzEnLCAnY2xhc3MnID0+ICdjYXJkJ11dICkKCUkgYW0gaW5zaWRlIGEgY2FyZCEKQExpbWl0bGVzczo6RWxlbWVudENhcmRTdG9w");
-    @endphp
-
-    {{-- Sample Code --}}
-    @Limitless::CardStart(['title' => "Sample Code", 'icon' => 'icon-circle-code' ] )
-        @Limitless::Codemirror([ 'language' => 'javascript', 'theme' => 'zenburn', 'value' => $example ])
     @Limitless::CardStop
 
-
-
 @stop

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

@@ -2,7 +2,10 @@
 
     <div class="card-header header-elements-inline">
 
-        <h5 class="card-title"> <i class="{{$icon}}"></i>&nbsp;&nbsp;{{$title}}</h5>
+        <h5 class="card-title">
+            @if($icon) <i class="{{ $icon }} mr-1"></i> @endif
+            {{$title}}
+        </h5>
 
         <div class="header-elements">
             <div class="list-icons">