update fundamental styles library version in angular example 0.8.1

test/e2e-test-application/e2e/tests/1-angular/luigi-client-ux-manager-features.spec.js

@@ -27,7 +27,7 @@ describe('Luigi Client ux manager features', () => {
       cy.get('.lui-backdrop').should('exist');
       //close modal
       cy.wrap($iframeBody)
-        .find('.fd-modal__footer')
+        .find('.fd-dialog__footer')
         .contains('Confirm')
         .click();
 

test/e2e-test-application/package.json

@@ -28,7 +28,7 @@
     "@luigi-project/core": "1.0.0",
     "ajv": "^6.1.1",
     "core-js": "^2.4.1",
-    "fundamental-styles": "^0.6.0",
+    "fundamental-styles": "^0.8.1",
     "rxjs": "6.2.0",
     "zone.js": "^0.8.14",
     "lodash": ">=4.17.13"

test/e2e-test-application/src/app/app.component.scss

@@ -12,3 +12,6 @@ $fd-icons-path: '~fundamental-styles/scss/icons/';
 .fd-list-group__item {
   display: block;
 }
+.fd-dialog {
+  z-index: 2;
+}

test/e2e-test-application/src/app/project/modal/modal.component.html

@@ -1,38 +1,47 @@
 <div
   *ngIf="modalActive"
-  class="fd-ui__overlay fd-overlay fd-overlay--modal"
+  class="fd-dialog fd-dialog--active fd-dialog-docs-static"
+  role="dialog"
+  data-testid="luigi-confirmation-modal"
   aria-hidden="false"
 >
-  <div class="fd-modal" role="dialog">
-    <div class="fd-modal__content" role="document">
-      <header class="fd-modal__header">
-        <h1 class="fd-modal__title">Modal Header</h1>
-        <button
-          (click)="onCloseModalClick()"
-          class="fd-button--light fd-modal__close sap-icon--decline sap-icon--l"
-          aria-label="close"
-        ></button>
-      </header>
-      <div class="fd-modal__body">
-        <p>
-          Lorem tipsum dolor sit amet, consectetur adipisicing elit, sed do
-          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
-          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-          aliquip ex ea commodo consequat. Duis aute irure dolor in
-          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-          pariatur.
-        </p>
+  <div class="fd-dialog__content fd-dialog__content--s">
+    <header class="fd-dialog__header fd-bar fd-bar--header">
+      <div class="fd-bar__left">
+        <div class="fd-bar__element">
+          <h1 class="fd-dialog__title">Modal Header</h1>
+        </div>
       </div>
-      <footer class="fd-modal__footer">
-        <div class="fd-modal__actions">
-          <button (click)="onCloseModalClick()" class="fd-button--light">
-            Cancel
-          </button>
-          <button (click)="onCloseModalClick()" class="fd-button">
+    </header>
+    <div class="fd-dialog__body">
+      <p>
+        Lorem tipsum dolor sit amet, consectetur adipisicing elit, sed do
+        eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
+        minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
+        ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
+        voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+      </p>
+    </div>
+    <footer class="fd-dialog__footer fd-bar fd-bar--footer">
+      <div class="fd-bar__right">
+        <div class="fd-bar__element">
+          <button
+            (click)="onCloseModalClick()"
+            class="fd-dialog__decisive-button fd-button fd-button--emphasized fd-button--compact"
+          >
             Confirm
           </button>
         </div>
-      </footer>
-    </div>
+        <div class="fd-bar__element">
+          <button
+            (click)="onCloseModalClick()"
+            class="fd-dialog__decisive-button fd-button fd-button--transparent fd-button--compact"
+            aria-label="close"
+          >
+            Cancel
+          </button>
+        </div>
+      </div>
+    </footer>
   </div>
 </div>

test/e2e-test-application/src/app/project/modal/modal.component.scss

@@ -0,0 +1,3 @@
+:host .fd-dialog__content {
+  max-width: 460px;
+}

website/fiddle/README.md

@@ -1,3 +1,11 @@
 [![Netlify Status](https://api.netlify.com/api/v1/badges/6e36180d-2486-4daf-80a5-90a0ab363992/deploy-status)](https://app.netlify.com/sites/relaxed-kowalevski-49f468/deploys)
 
 Luigi fiddle, deployed via netlify and accessible at https://fiddle.luigi-project.io
+Go to the [Luigi Fiddle](https://fiddle.luigi-project.io) site to see Luigi in action and configure a sample application.
+
+### Code formatting for contributors
+
+Run the `npm install` command in the root folder to install it.
+
+### Run fiddle locally
+`npm run dev`