@worksafevictoria/wcl7.5 1.1.0-beta.9 → 1.1.0-beta.91

package/src/components/Global/AppHeaderNew/includes.scss

@@ -0,0 +1,71 @@
+//
+// Not importing variables and mixins because needs to be
+// as portable as it can for v2 migrate
+//
+// TODO for v2:
+//
+// [] hook up with includes
+//
+
+//
+// Fluid Properties
+// Usage : h1 { @include fp(font-size, 50, 100); //50px at 320, 100px at 1920;}
+//
+$app-menu-yellow: #fdcd59;
+$app-menu-gold: #fecc56;
+$primary-color: $app-menu-gold;
+$app-menu-white: #ffffff;
+$app-menu-black: #191919;
+$app-menu-grey: lightgrey;
+$app-menu-green: #356041;
+$app-menu-border-color: rgba(255, 255, 255, 0.3);
+// $app-menu-border-color: $app-menu-black;
+
+$app-header-background-colour: $app-menu-grey !default;
+$app-header-text-colour: $app-menu-black !default;
+$app-header-hover: $app-menu-gold !default;
+$app-header-active: $app-menu-yellow !default;
+$app-subheader-text-colour: $app-menu-white !default;
+
+@if ($primary-color == #478157) {
+  $app-header-background-colour: $app-menu-green !global;
+  $app-header-outline-colour: $app-menu-white !global;
+  $app-header-hover: $app-menu-white !global;
+  $app-header-active: $app-menu-white !global;
+}
+
+@mixin fp(
+  $property,
+  $min,
+  $max,
+  $start: 320,
+  $end: 1920,
+  $clip: true,
+  $clipAtStart: true,
+  $clipAtEnd: true
+) {
+  $multiplier: calc($max - $min / $end - $start) * 100;
+  $adder: calc($min * $end - $max * $start / $end - $start);
+  $formula: calc(#{$multiplier + 0vw} + #{$adder + 0px});
+  @if $clip and $clipAtStart {
+    @media (max-width: #{$start + 0px}) {
+      #{$property}: $min + 0px;
+    }
+  }
+  @if $clip and $clipAtEnd {
+    @media (min-width: #{$end + 0px}) {
+      #{$property}: $max + 0px;
+    }
+  }
+  #{$property}: $formula;
+}
+
+@mixin visually-hidden {
+  position: absolute;
+  left: -10000px;
+  top: auto;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(1px, 1px, 1px, 1px);
+}

package/src/components/Global/AppHeaderNew/index.stories.js

@@ -0,0 +1,74 @@
+import AppHeader from './index.vue'
+import { appHeaderData } from '../../../mock/app-header-new'
+
+const contentParser = () => {
+  return Promise.resolve({
+    results: [
+      {
+        title: 'Content title 1',
+        description: 'Content description 2'
+      }
+    ],
+    offset: 0,
+    numFound: 1000
+  })
+}
+
+
+export default {
+  title: 'Website_Redesign/AppHeader',
+  component: AppHeader,
+  tags: ['autodocs'],
+  data() {
+    return {
+      appHeaderData
+    }
+  },
+  argTypes: {
+    contentParser: {
+      table: { disable: true }
+    }
+  },
+  args: {
+    headerMenu: appHeaderData,
+    contentParser: contentParser,
+    isWorkWell: false,
+    authenticated: false,
+    mainContent: 'Some dummy main content required for this example',
+    footerContent: 'Some dummy footer content required for this example'
+  }
+}
+
+const DefaultContent = (args) => ({
+  components: { AppHeader },
+  setup() {
+    return { args }
+  },
+  template: `
+  <div>
+  <app-header
+  v-bind="args"
+  />
+    <main>
+      <div class="container">
+        <div class="row">
+          <div class="col">
+            {{args.mainContent}}
+          </div>
+        </div>
+      </div>
+    </main>
+    <footer>
+      <div class="container">
+        <div class="row">
+          <div class="col">
+          {{args.footerContent}}
+          </div>
+        </div>
+      </div>
+    </footer>
+  </div>
+  `
+})
+
+export const Default = DefaultContent.bind({})