Update styleguide to group colors together

pradoslaw · Dec 13, 2024 · 1c86da0 · 1c86da0
1 parent e22c2ca
commit 1c86da0
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 19 deletions.
diff --git a/app/Feature/LookAndFeel/LookAndFeelServiceProvider.php b/app/Feature/LookAndFeel/LookAndFeelServiceProvider.php
@@ -22,7 +22,7 @@ public function boot(): void
         Route::middleware(['web', 'auth'])->group(function () {
             Route::get('/LookAndFeel/StyleGuide', function (StyleGuide $guide, StyleGuideView $view) {
                 if ($this->userSetting() === 'modern') {
-                    return $view->view($guide->getColors());
+                    return $view->view($guide->getColorGroups());
                 }
                 return response(status:404);
             });

diff --git a/app/Feature/LookAndFeel/StyleGuide.php b/app/Feature/LookAndFeel/StyleGuide.php
@@ -3,10 +3,10 @@
 
 class StyleGuide
 {
-    public function getColors(): array
+    public function getColorGroups(): array
     {
         $content = file_get_contents('../resources/feature/lookAndFeel/style-guide.scss');
-        $colors = [];
+        $groups = [];
         $lines = \explode("\n", $content);
         foreach ($lines as $line) {
             if (empty(\trim($line))) {
@@ -19,8 +19,14 @@ public function getColors(): array
             if ($value === 'white') {
                 $value = '#ffffff';
             }
-            $colors[$key] = \trim($value);
+            $exploded = \explode('-', $key);
+            if (count($exploded) === 1) {
+                [$group, $groupValue] = [$exploded[0], $exploded[0]];
+            } else {
+                [$group, $groupValue] = $exploded;
+            }
+            $groups[$group][$groupValue] = \trim($value);
         }
-        return $colors;
+        return $groups;
     }
 }
diff --git a/app/Feature/LookAndFeel/StyleGuideView.php b/app/Feature/LookAndFeel/StyleGuideView.php
@@ -5,32 +5,34 @@
 
 class StyleGuideView
 {
-    public function view(array $colors): string
+    public function view(array $colorGroups): string
     {
         return Blade::render('
             <style>
               body { background: #e0e0e0; }
               .color-preview {
-                  min-width: 90px;
-                  height: 80px;
+                  min-width: 60px;
+                  height: 40px;
               }
               code {
                   background:#d0d0d0;
                   padding:1px 5px;
                   border-radius:4px;
               }
             </style>
-            <h2 style="font-family:sans-serif;">4programmers - Style guide</h2>
-            <div style="display:flex; flex-wrap:wrap;">
-                @foreach ($colors as $colorName => $colorValue)
-                  <div style="padding: 32px 24px; border: 1px solid #d0d0d0; text-align:center;">
-                    <div class="color-preview" style="background:{{$colorValue}}"></div>
-                    <p><code>{{$colorName}}</code></p>
-                    <code>{{$colorValue}}</code>
-                  </div>
-                @endforeach
-            </div>
+            <h2 style="font-family:sans-serif;">4programmers - Primitive colors</h2>
+            @foreach ($colorGroups as $colors)
+                <div style="display:flex; flex-wrap:wrap;">
+                    @foreach ($colors as $colorName => $colorValue)
+                      <div style="padding: 24px 16px; border: 1px solid #d0d0d0; text-align:center;">
+                        <div class="color-preview" style="background:{{$colorValue}}"></div>
+                        <p><code>{{$colorName}}</code></p>
+                        <code>{{$colorValue}}</code>
+                      </div>
+                    @endforeach
+                </div>
+            @endforeach
         ',
-            ['colors' => $colors]);
+            ['colorGroups' => $colorGroups]);
     }
 }