Merge pull request #39 from sebgroup/issue/34

fix: 🐛 Change name of the slideout component

src/_vanilla-all.scss

@@ -23,4 +23,4 @@
 @import "components/tabs/tabs";
 @import "components/datepicker/datepicker";
 @import "components/text/preamble";
-@import "components/modals/slideout-modal";
+@import "components/modals/slideout";

src/components/modals/_slideout-modal-mixins.scss → src/components/modals/_slideout-mixins.scss

@@ -10,7 +10,7 @@
 
 ///
 /// @access public
-@mixin vanilla-modal-slideout() {
+@mixin vanilla-slideout() {
   position: fixed;
   top: 0;
   left: 0;

src/components/modals/_slideout-modal.scss → src/components/modals/_slideout.scss

@@ -1,9 +1,9 @@
 @import 'modal-mixins';
-@import 'slideout-modal-mixins';
+@import 'slideout-mixins';
 
 @include _vanilla-exports('modal-slideout') {
-  .sdv-slideout-modal {
-    @include vanilla-modal-slideout();
+  .sdv-slideout {
+    @include vanilla-slideout();
   }
   .sdv-modal-backdrop {
     @include vanilla-modal-backdrop();

src/components/modals/slideout-modal.md → src/components/modals/slideout.md

@@ -1,6 +1,6 @@
 ---
-title: Slideout Modal
-componentid: component-slideout-modal
+title: Slideout
+componentid: component-slideout
 variantid: normal
 guid: component-slideout-modal-normal
 ---
@@ -10,20 +10,20 @@ guid: component-slideout-modal-normal
 Import classes:
 
 ```scss
-@import '~@sebgroup/vanilla/src/components/modals/slideout-modal';
+@import '~@sebgroup/vanilla/src/components/modals/slideout';
 ```
 
 Use them in your template:
 
 ```html
-<div class="sdv-slideout-modal sdv-slideout-modal--right">...</div>
-<div class="sdv-slideout-modal sdv-slideout-modal--left">...</div>
+<div class="sdv-slideout sdv-slideout--right">...</div>
+<div class="sdv-slideout sdv-slideout--left">...</div>
 ```
 
 To activate the modal, add the `-active` modifier:
 
 ```html
-<div class="sdv-slideout-modal sdv-slideout-modal--right -active">
+<div class="sdv-slideout sdv-slideout--right -active">
   ...
   <div class="sdv-modal-backdrop"></div>
 </div>
@@ -36,11 +36,11 @@ Please note - the backdrop element has to be a child of the modal, like above (s
 You can also use the mixins:
 
 ```scss
-@import '~@sebgroup/vanilla/src/components/modals/slideout-modal-mixins';
+@import '~@sebgroup/vanilla/src/components/modals/slideout-mixins';
 @import '~@sebgroup/vanilla/src/components/modals/modal-mixins';
 
 .my-modal-class {
-  @include vanilla-modal-slideout();
+  @include vanilla-slideout();
 }
 .my-backdrop-class {
   @include vanilla-modal-backdrop();
@@ -49,10 +49,10 @@ You can also use the mixins:
 
 ---
 
-The width of `.slideout-modal__container` is set to `33%` by default. To override the width to `50%`:
+The width of `.slideout__container` is set to `33%` by default. To override the width to `50%`:
 
 ```scss
-.sdv-slideout-modal {
+.sdv-slideout {
   &__container {
     width: 50%;
   }
@@ -63,7 +63,7 @@ For screens smaller or equal to `tablet` the width is set to `100%`.
 To override them use the media mixin from the 'include-media' package. For example:
 
 ```scss
-.sdv-slideout-modal {
+.sdv-slideout {
   &__container {
     @include media('>=tablet', '<desktop') {
       width: 50%;
@@ -77,15 +77,15 @@ To override them use the media mixin from the 'include-media' package. For examp
 ## Right
 
 ```html
-<div class="sdv-slideout-modal sdv-slideout-modal--right -active">
-  <div class="sdv-slideout-modal__container">
-    <header class="sdv-slideout-modal__header">
-      <h3 class="sdv-slideout-modal__heading">Modal Heading</h3>
-      <button class="sdv-slideout-modal__close" data-modal-dismiss>
+<div class="sdv-slideout sdv-slideout--right -active">
+  <div class="sdv-slideout__container">
+    <header class="sdv-slideout__header">
+      <h3 class="sdv-slideout__heading">Modal Heading</h3>
+      <button class="sdv-slideout__close">
         <i class="fal fa-times"></i>
       </button>
     </header>
-    <div class="sdv-slideout-modal__content">
+    <div class="sdv-slideout__content">
       <h4>Modal Content</h4>
       <p>Lorem ipsum dolor sit amet</p>
     </div>