feat: Added basic functionality [IconBox] #6

src/QUI/PresentationBricks/Controls/IconBox.css

+.iconBox-wrapper {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.iconBox-entry {
+    flex-basis: var(--qui-iconBox-entryWidth);
+    padding: 2rem;
+}
+
+.iconBox-entry-title {
+    margin: 1rem 0;
+}
+
+.iconBox-entry__centerContent {
+    text-align: center;
+}
+
+.iconBox-entry__centerContent > .iconBox-entry-icon{
+    margin: auto;
+}
+
+.iconBox__iconSize-large {
+    font-size: 5rem;
+}
+
+.iconBox__iconSize-medium {
+    font-size: 3rem;
+}
+
+.iconBox__iconSize-small {
+    font-size: 1.5rem;
+}
+
+.iconBox-entry-icon:not(.twojaKlasaDlaFontAwesome) {
+    height: var(--qui-iconBox-imgHeight);
+}
\ No newline at end of file

src/QUI/PresentationBricks/Controls/IconBox.default.html

@@ -10,3 +10,32 @@
 </div>
 {/if}
 
+
+<div class="iconBox-wrapper"
+     style="
+     --qui-iconBox-entryWidth: calc(100% / {$entriesPerLine});
+     --qui-iconBox-imgHeight: {$imgIconSize}px;
+
+">
+    {foreach $entries as $entry}
+
+    <div class="iconBox-entry {if $centerContent} iconBox-entry__centerContent{/if}">
+
+        {if $entry['image']}
+        <div class="iconBox-entry-icon iconBox__iconSize-{$iconSize}">
+            {image src=$entry['image'] loading="lazy" height="{$imgIconSize}"}
+        </div>
+        {/if}
+
+        {if $entry['entryTitle']}
+        <h3 class="iconBox-entry-title">{$entry['entryTitle']}</h3>
+        {/if}
+
+        {if $entry['entryContent']}
+        <p class="iconBox-entry-content">{$entry['entryContent']}</p>
+        {/if}
+
+    </div>
+
+    {/foreach}
+</div>
\ No newline at end of file

src/QUI/PresentationBricks/Controls/IconBox.php

@@ -24,12 +24,17 @@ public function __construct($attributes = [])
     {
         // default options
         $this->setAttributes([
+            'template'       => 'default',
+            'centerContent'  => false,
+            'entriesPerLine' => 2,
+            'iconSize'       => 'small',
+            'imgIconSize'    => '50px'
         ]);
 
         parent::__construct($attributes);
 
         $this->addCSSFile(
-            dirname(__FILE__).'/IconBox.css'
+            dirname(__FILE__) . '/IconBox.css'
         );
     }
 
@@ -42,10 +47,31 @@ public function getBody()
     {
         $Engine = QUI::getTemplateManager()->getEngine();
 
+        $entries        = json_decode($this->getAttribute('entries'), true);
+        $template       = $this->getAttribute('template');
+        $centerContent  = $this->getAttribute('centerContent');
+        $entriesPerLine = $this->getAttribute('entriesPerLine');
+        $iconSize       = $this->getAttribute('iconSize');
+        $imgIconSize    = $this->getAttribute('imgIconSize');
+        $enabledEntries = [];
+
+        foreach ($entries as $entry) {
+            if ($entry['isDisabled'] === 1) {
+                continue;
+            }
+
+            array_push($enabledEntries, $entry);
+        }
+
         $Engine->assign([
-            'this' => $this
+            'this'           => $this,
+            'centerContent'  => $centerContent,
+            'entriesPerLine' => $entriesPerLine,
+            'iconSize'       => $iconSize,
+            'imgIconSize'    => $imgIconSize,
+            'entries'        => $enabledEntries
         ]);
 
-        return $Engine->fetch(dirname(__FILE__).'/IconBox.html');
+        return $Engine->fetch(dirname(__FILE__) . '/IconBox.' . $template . '.html');
     }
 }