Merge pull request #4 from dcodegroup/feature/DCO-55-preset-package-optimisations

-Included missing component features to styleguide and sass

Author: lionslair

README.md

@@ -2,4 +2,8 @@
 To build the preset boilerplate, run the following command:
 ```php artisan ui dcode-preset-ui```
 
+## Updating Sass
+To update the base and component sass directories, run the following command:
+```php artisan ui dcode-preset-sass```
+
 

src/DcodePreset.php

@@ -41,7 +41,15 @@ public static function install()
             return str_replace("RouteServiceProvider::HOME", "route('home')", $file);
         });
     }
-
+    
+    public static function updateSass()
+    {
+        $filesystem = new Filesystem();
+        $filesystem->deleteDirectory(resource_path('sass/base'));
+        $filesystem->copyDirectory(__DIR__ . '/../stubs/default/resources/sass/base/', resource_path('sass/base'));
+        $filesystem->deleteDirectory(resource_path('sass/components'));
+        $filesystem->copyDirectory(__DIR__ . '/../stubs/default/resources/sass/components/', resource_path('sass/components'));
+    }
     // public static function installAuth()
     // {
     //     $filesystem = new Filesystem();

src/DcodeServiceProvider.php

@@ -28,5 +28,11 @@ public function boot()
 
         Paginator::defaultView('pagination::default');
         Paginator::defaultSimpleView('pagination::simple-default');
+
+        UiCommand::macro('dcode-preset-sass', function ($command) {
+            DcodePreset::updateSass();
+            $command->info('Dcode preset Sass base and components directories have been updated.');
+            $command->comment('Run "npm run dev" to compile your updated Sass assets.');
+        });
     }
 }

stubs/default/public/imgs/icons/plus.svg

@@ -1,10 +1,9 @@
-// ToDo: Needs Window pall to trigger the click off event
 
 export default class {
     constructor(el){
         this.selectFilterContainer = el;
-        this.selectFilterBtn = this.selectFilterContainer.querySelector("p > button");
-        this.selectFilterText = this.selectFilterContainer.querySelector("p > span");
+        this.selectFilterBtn = this.selectFilterContainer.querySelector("div > button");
+        this.selectFilterText = this.selectFilterContainer.querySelector("div > span");
         this.selectFilterMenu = this.selectFilterContainer.querySelector("ul");
         this.selectFilterMenuButtons = Array.from(this.selectFilterMenu.querySelectorAll('li > button'));
         this.menuOpen = false;

stubs/default/resources/js/lib/SelectFilter.js

@@ -1,11 +1,8 @@
-
 @use 'base';
-
 @use 'components';
-
 @use 'page-layouts/app';
+@use 'page-layouts/styleguide';
 
-@use 'sections';
 
 
 

stubs/default/resources/sass/app.scss

@@ -62,4 +62,13 @@
             top: 0;
         }
 	}
-}
+}
+
+@function shade($color, $percentage) {
+    @return mix(#000, $color, $percentage);
+}
+
+@function tint($color, $percentage) {
+    @return mix(#fff, $color, $percentage);
+}
+

stubs/default/resources/sass/base/agnostic.scss

@@ -1,2 +1,3 @@
 
 
+// ToDo: bring animations over from AME?

stubs/default/resources/sass/base/animations.scss

@@ -1,13 +1,6 @@
 
-$breakpoints: (
-    xs: 350px,
-    sm: 480px,
-    md: 764px,
-    lg: 1024px,
-    xl: 1170px,
-    xxl: 1400px
-  ) !default;
-  
+@use '../settings/variables.scss' as *;
+
   // breakpoint-next
   // =============================================================================
   /// Gets the next breakpoint in a map.