SERV-2286 - alert element added

src/Views/Limitless/Alert/Config.php

-<?php
-
-    namespace Ceetrox\Sidekick\Views\Limitless\Alert;
-
-    use View;
-
-
-    class Config
-    {
-        public $methodAllocation = [
-            'Limitless::Alert' => 'alerts',
-        ];
-
-        public function alerts($parameters)
-        {
-            return View('Limitless::Alert.Alert');
-
-        }
-
-    }
-
-
-

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

-{{-- Layout Reference --}}
-@extends('Limitless::Help.Layout.Master')
-
-@section('Limitless::Content')
-
-    {{-- Description --}}
-    @Limitless::ElementCardStart(['title' => "Alert", 'icon' => 'icon-comments'])
-    <p>Popup message notifications.</p>
-    @Limitless::ElementCardStop
-
-    {{-- Elements --}}
-    @Limitless::ElementCardStart(['title' => "Fragments", 'icon' => 'icon-grid5'])
-
-        <div class="bg-dark rounded py-2 px-3 mb-3">
-            <h6 class="mb-0 font-weight-semibold">fragment name here</h6>
-            <p class="mb-3 text-muted">description here</p>
-            <p class="font-italic font-size-lg">Parameters</p>
-            <div class="row mt-2">
-                @Limitless::TableStart([ 'extra' => ['class' => 'table table-xs table-striped'] ])
-
-                @Limitless::TableAutofillHeader([
-                    ['name' => 'Key'],
-                    ['name' => 'Type'],
-                    ['name' => 'Description']
-                ])
-
-                @Limitless::TableAutofillBody([
-                    [
-                        ['value' => 'param here'],
-                        ['value' => '<i>Array</i> [Default = <code>[]</code>]', 'secure' => false],
-                        ['value' => 'Description here']
-                    ]
-                ])
-                @Limitless::TableStop
-            </div>
-        </div>
-
-    @Limitless::ElementCardStop
-
-    {{-- Sample Output --}}
-    @Limitless::ElementCardStart(['title' => "Sample Output", 'icon' => 'icon-display4' ] )
-        sample output here
-    @Limitless::ElementCardStop
-
-    @php
-        $example = base64_decode("");
-    @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/Alert/Alert.blade.php

+<div class="alert
+    @if($default) alert-{{ $type }} @else bg-{{ $type }} @endif
+    @if($border) border-{{ $border }} @endif
+    @if($styled) alert-styled-{{ $styled }} @endif
+    @if($rounded) alert-rounded @endif
+    @if($dismissible) alert-dismissible @endif
+    ">
+    @if($dismissible) <button type="button" class="close" data-dismiss="alert"><span>×</span></button> @endif
+    <span class="font-weight-semibold">{{ $title }}</span>
+    {{ $message }}
+</div>
\ No newline at end of file

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

+{{-- Layout Reference --}}
+@extends('Limitless::Help.Layout.Master')
+
+@section('Limitless::Content')
+
+    {{-- Description --}}
+    @Limitless::ElementCardStart(['title' => "Alert", 'icon' => 'icon-comments'])
+    <p>A styled container for alert messages.</p>
+    @Limitless::ElementCardStop
+
+    {{-- Elements --}}
+    @Limitless::ElementCardStart(['title' => "Fragments", 'icon' => 'icon-grid5'])
+
+        <div class="bg-dark rounded py-2 px-3 mb-3">
+            <h6 class="mb-0 font-weight-semibold">Alert</h6>
+            <p class="mb-3 text-muted">A styled container for alert messages.</p>
+            <p class="font-italic font-size-lg">Parameters</p>
+            <div class="row mt-2">
+                @Limitless::TableStart([ 'extra' => ['class' => 'table table-xs table-striped'] ])
+
+                @Limitless::TableAutofillHeader([
+                    ['name' => 'Key'],
+                    ['name' => 'Type'],
+                    ['name' => 'Description']
+                ])
+
+                @Limitless::TableAutofillBody([
+                    [
+                        ['value' => 'default'],
+                        ['value' => '<i>Boolean</i> [Default = <code>true</code>]', 'secure' => false],
+                        ['value' => 'Type of alert container whether <code>true = default</code> or <code>false = solid</code>.', 'secure' => false]
+                    ],
+                    [
+                        ['value' => 'type'],
+                        ['value' => '<i>String</i> [Default = <code>"primary"</code>]', 'secure' => false],
+                        ['value' => 'Type of alert color whether <code>primary | success | danger | info | warning</code>.', 'secure' => false]
+                    ],
+                    [
+                        ['value' => 'border'],
+                        ['value' => '<i>String?</i> [Default = <code>null</code>]', 'secure' => false],
+                        ['value' => 'Border container of the alert. <code>0 | 1 | 2 | 3</code>', 'secure' => false]
+                    ],
+                    [
+                        ['value' => 'styled'],
+                        ['value' => '<i>String?</i> [Default = <code>null</code>]', 'secure' => false],
+                        ['value' => 'Adds icon depending on the alert type on <code>left</code> or <code>right</code> side of the container. ', 'secure' => false]
+                    ],
+                    [
+                        ['value' => 'rounded'],
+                        ['value' => '<i>Boolean</i> [Default = <code>false</code>]', 'secure' => false],
+                        ['value' => 'Makes the container round shaped if set to <code>true</code>.', 'secure' => false]
+                    ],
+                    [
+                        ['value' => 'dismissible'],
+                        ['value' => '<i>Boolean</i> [Default = <code>false</code>]', 'secure' => false],
+                        ['value' => 'Adds a closing button to make the container have an option to be dismissed.']
+                    ],
+                    [
+                        ['value' => 'title'],
+                        ['value' => '<i>String</i> [Default = <code>"No title."</code>]', 'secure' => false],
+                        ['value' => 'The starting text of the alert message.']
+                    ],
+                    [
+                        ['value' => 'message'],
+                        ['value' => '<i>String</i> [Default = <code>"No message."</code>]', 'secure' => false],
+                        ['value' => 'The main text of the alert message.']
+                    ]
+                ])
+                @Limitless::TableStop
+            </div>
+        </div>
+
+    @Limitless::ElementCardStop
+
+    {{-- Sample Output --}}
+    @Limitless::ElementCardStart(['title' => "Sample Output", 'icon' => 'icon-display4' ] )
+        @Limitless::Alert
+        @Limitless::Alert(['type' => 'success', 'title' => 'Success!', 'message' => 'Default success.'])
+        @Limitless::Alert(['default' => false, 'type' => 'danger', 'title' => 'Danger!', 'message' => 'Solid danger dismissible.', 'dismissible' => true])
+        @Limitless::Alert(['type' => 'info', 'title' => 'Info!', 'message' => 'Default info dismissible border 3.', 'dismissible' => true, 'border' => 3])
+        @Limitless::Alert(['type' => 'primary', 'title' => 'Primary!', 'message' => 'Default primary dismissible styled left.', 'dismissible' => true, 'styled' => 'left'])
+        @Limitless::Alert(['default' => false, 'type' => 'warning', 'title' => 'Warning!', 'message' => 'Solid warning dismissible styled right.', 'dismissible' => true, 'styled' => 'right'])
+        @Limitless::Alert(['type' => 'success', 'title' => 'Round!', 'message' => 'Default success rounded styled left.', 'styled' => 'left', 'rounded' => true])
+    @Limitless::ElementCardStop
+
+    @php
+        $example = base64_decode("QExpbWl0bGVzczo6QWxlcnQKQExpbWl0bGVzczo6QWxlcnQoWyd0eXBlJyA9PiAnc3VjY2VzcycsICd0aXRsZScgPT4gJ1N1Y2Nlc3MhJywgJ21lc3NhZ2UnID0+ICdEZWZhdWx0IHN1Y2Nlc3MuJ10pCkBMaW1pdGxlc3M6OkFsZXJ0KFsnZGVmYXVsdCcgPT4gZmFsc2UsICd0eXBlJyA9PiAnZGFuZ2VyJywgJ3RpdGxlJyA9PiAnRGFuZ2VyIScsICdtZXNzYWdlJyA9PiAnU29saWQgZGFuZ2VyIGRpc21pc3NpYmxlLicsICdkaXNtaXNzaWJsZScgPT4gdHJ1ZV0pCkBMaW1pdGxlc3M6OkFsZXJ0KFsndHlwZScgPT4gJ2luZm8nLCAndGl0bGUnID0+ICdJbmZvIScsICdtZXNzYWdlJyA9PiAnRGVmYXVsdCBpbmZvIGRpc21pc3NpYmxlIGJvcmRlciAzLicsICdkaXNtaXNzaWJsZScgPT4gdHJ1ZSwgJ2JvcmRlcicgPT4gM10pCkBMaW1pdGxlc3M6OkFsZXJ0KFsndHlwZScgPT4gJ3ByaW1hcnknLCAndGl0bGUnID0+ICdQcmltYXJ5IScsICdtZXNzYWdlJyA9PiAnRGVmYXVsdCBwcmltYXJ5IGRpc21pc3NpYmxlIHN0eWxlZCBsZWZ0LicsICdkaXNtaXNzaWJsZScgPT4gdHJ1ZSwgJ3N0eWxlZCcgPT4gJ2xlZnQnXSkKQExpbWl0bGVzczo6QWxlcnQoWydkZWZhdWx0JyA9PiBmYWxzZSwgJ3R5cGUnID0+ICd3YXJuaW5nJywgJ3RpdGxlJyA9PiAnV2FybmluZyEnLCAnbWVzc2FnZScgPT4gJ1NvbGlkIHdhcm5pbmcgZGlzbWlzc2libGUgc3R5bGVkIHJpZ2h0LicsICdkaXNtaXNzaWJsZScgPT4gdHJ1ZSwgJ3N0eWxlZCcgPT4gJ3JpZ2h0J10pCkBMaW1pdGxlc3M6OkFsZXJ0KFsndHlwZScgPT4gJ3N1Y2Nlc3MnLCAndGl0bGUnID0+ICdSb3VuZCEnLCAnbWVzc2FnZScgPT4gJ0RlZmF1bHQgc3VjY2VzcyByb3VuZGVkIHN0eWxlZCBsZWZ0LicsICdzdHlsZWQnID0+ICdsZWZ0JywgJ3JvdW5kZWQnID0+IHRydWVdKQ==");
+    @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/Config.php

@@ -37,21 +37,40 @@
         |--------------------------------------------------------------------------------------------
         */
         public $methodAllocation = [
-        'Limitless::ElementCardStart' => 'cardStart',
-        'Limitless::ElementCardStop' => 'cardStop',
-        'Limitless::LoremIpsum' => 'loremIpsum',
-        'Limitless::RandomSelect' => 'randomSelect',
-        'Limitless::Divider' => 'divider',
-        'Limitless::Example' => 'example',
+            'Limitless::Alert' => 'alert',
+            'Limitless::ElementCardStart' => 'cardStart',
+            'Limitless::ElementCardStop' => 'cardStop',
+            'Limitless::LoremIpsum' => 'loremIpsum',
+            'Limitless::RandomSelect' => 'randomSelect',
+            'Limitless::Divider' => 'divider',
+            'Limitless::Example' => 'example',
         ];
 
         public $assetAllocation = [
-        'Limitless::Example' => [
-        'Example/example.js',
-        'Example/example.css'
-        ]
+            'Limitless::Example' => [
+            'Example/example.js',
+            'Example/example.css'
+            ]
         ];
 
+        /*
+        |--------------------------------------------------------------------------------------------
+        | Method "alert"
+        |--------------------------------------------------------------------------------------------
+        */
+        public function alert($parameters)
+        {
+            return View('Limitless::Element.Alert.Alert')
+                ->withDefault($parameters['default'] ?? true)
+                ->withType($parameters['type'] ?? 'primary')
+                ->withBorder(isset($parameters['border']) ? (string)$parameters['border'] : null)
+                ->withStyled($parameters['styled'] ?? null)
+                ->withRounded($parameters['rounded'] ?? false)
+                ->withDismissible($parameters['dismissible'] ?? false)
+                ->withTitle($parameters['title'] ?? 'No title.')
+                ->withMessage($parameters['message'] ?? 'No message.');
+
+        }
 
         /*
         |--------------------------------------------------------------------------------------------

src/Views/Limitless/Help/Config.php

@@ -51,8 +51,8 @@
                     case "example":
                         $path = 'Limitless::Element.Example.Documentation.Index';
                         break;
-                    case "alerts":
-                        $path = 'Limitless::Alert.Documentation.Index';
+                    case "alert":
+                        $path = 'Limitless::Element.Alert.Documentation.Index';
                         break;
                     case "card":
                         $path = 'Limitless::Element.Card.Documentation.Index';

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

@@ -27,7 +27,7 @@
         @Limitless::NavigationMenuItem(['url' => '/', 'target' => '_self', 'icon' => 'icon-home2', 'title' => 'Home'])
         @Limitless::NavigationMenuSectionTitle(['title' => 'Elements'])
         @Limitless::NavigationMenuItem(['url' => '?page=example', 'target' => '_self', 'icon' => 'icon-exclamation', 'title' => 'Example'])
-        @Limitless::NavigationMenuItem(['url' => '?page=alerts', 'target' => '_self', 'icon' => 'icon-comments', 'title' => 'Alerts'])
+        @Limitless::NavigationMenuItem(['url' => '?page=alert', 'target' => '_self', 'icon' => 'icon-comments', 'title' => 'Alert'])
         @Limitless::NavigationMenuItem(['url' => '?page=card', 'target' => '_self', 'icon' => 'icon-newspaper', 'title' => 'Card'])
         @Limitless::NavigationMenuItem(['url' => '?page=codemirror', 'target' => '_self', 'icon' => 'icon-circle-code', 'title' => 'Code Mirror'])
         @Limitless::NavigationMenuItem(['url' => '?page=divider', 'target' => '_self', 'icon' => 'icon-minus2', 'title' => 'Divider'])