Added custom css in example (#457)

examples/vic-gov-au/assets/_custom.scss

@@ -0,0 +1,8 @@
+@import "~@dpc-sdp/ripple-global/style";
+
+// Example custom css
+.tide-page--demo_landing_page {
+  .example-message {
+    background-color: rgb(217, 217, 217)
+  }
+}

examples/vic-gov-au/components/examples/Message.vue

@@ -1,5 +1,8 @@
 <template>
-  <h1>{{text}}</h1>
+  <div class="example-message">
+    <h2>This is a example of custom component</h2>
+    <p>{{text}}</p>
+  </div>
 </template>
 
 <script>

examples/vic-gov-au/nuxt.config.js

@@ -51,6 +51,13 @@ export default {
     }]
   ],
   /*
+  ** Css
+  * https://nuxtjs.org/api/configuration-css/
+  */
+  css: [
+    '@/assets/_custom.scss'
+  ],
+  /*
   ** styleResources
   * Override the path to the theme customisation scss
   * loads scss with @nuxtjs/style-resources

packages/ripple-nuxt-tide/lib/layouts/default.vue

@@ -162,6 +162,4 @@ export default {
 @import "~@dpc-sdp/ripple-global/style";
 @import "~@dpc-sdp/ripple-nuxt-tide/lib/components/scss/wysiwyg/_embedded-entity-video.scss";
 @import "~@dpc-sdp/ripple-nuxt-tide/lib/components/scss/wysiwyg/_embedded-entity.scss";
-// @import "~assets/_custom.scss";
-// TODO : these ~ alias wont work, need a different way
 </style>

packages/ripple-nuxt-tide/lib/layouts/minimal.vue

@@ -1,8 +1,3 @@
 <template>
   <nuxt/>
 </template>
-
-<style lang="scss">
-@import "~@dpc-sdp/ripple-global/style";
-// @import "~assets/_custom.scss";
-</style>

test/e2e/integration/CustomCss/CustomCss.feature

@@ -0,0 +1,10 @@
+Feature: Custom css should work
+
+  Custom css is getting loaded
+
+  Background:
+    Given I visit the page "/demo-landing-page"
+
+  @smoke
+  Scenario: Custom css for example message is applied
+    And the example message has custom background color

test/e2e/integration/CustomCss/CustomCss/step_definition.js

@@ -0,0 +1,7 @@
+/* global cy */
+
+import { Then } from 'cypress-cucumber-preprocessor/steps'
+
+Then(`the example message has custom background color`, () => {
+  cy.get('.example-message').should('have.css', 'background-color', 'rgb(217, 217, 217)')
+})

test/e2e/integration/CustomMiddleware/CustomMiddleware.feature

@@ -0,0 +1,10 @@
+Feature: Custom middleware
+
+  Custom middleware should work
+
+  Background:
+    Given I visit the page "/demo-landing-page"
+
+  @smoke
+  Scenario: Example for adding component
+    And the example message is added

test/e2e/integration/CustomMiddleware/CustomMiddleware/step_definition.js

@@ -0,0 +1,7 @@
+/* global cy */
+
+import { Then } from 'cypress-cucumber-preprocessor/steps'
+
+Then(`the example message is added`, () => {
+  cy.get('.example-message').should('exist')
+})