@worksafevictoria/wcl7.5 1.2.2 → 1.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@worksafevictoria/wcl7.5",
-  "version": "1.2.2",
+  "version": "1.3.0",
   "main": "src/index.js",
   "license": "MIT",
   "repository": {

package/src/assets/icons/WSV-reversed.svg

@@ -0,0 +1,20 @@
+<svg width="90" height="44" viewBox="0 0 90 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M78.9207 11.1641H77.5454H1.06184C0.475264 11.1641 0 11.6333 0 12.2123V30.5279C0 31.1062 0.475264 31.5754 1.06184 31.5754H79.9975C80.7862 31.5754 81.5425 31.2652 82.0983 30.7126L89.0307 23.8229C90.3231 22.5384 90.3231 21.2657 89.0307 19.9883L81.0215 12.0276C80.4657 11.475 79.7095 11.1641 78.9207 11.1641Z" fill="#191919"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M37.3808 26.0121V14.0369H35.4766V26.0121H37.3808ZM42.5291 18.6888L43.3604 17.8689H40.7133L39.8662 18.695L38.6867 19.8641C38.1546 20.3874 37.8555 21.0984 37.8555 21.8399C37.8555 22.5814 38.1546 23.2923 38.6867 23.8156L40.8997 26.0111H43.5697L40.4157 22.8936C39.8259 22.3078 39.8259 21.3618 40.4157 20.776L42.5291 18.6888Z" fill="white"/>
+<path d="M34.5238 20.0153C34.3336 19.9062 33.9578 19.8493 33.5867 19.8493C31.8736 19.8493 31.8736 21.9498 31.8736 23.0923V26.0119H29.7617V18.0559H31.6351V19.8641H31.6628C31.7638 19.1159 32.618 17.8689 33.8812 17.8689C34.0825 17.8689 34.3075 17.8689 34.5238 17.9312V20.0153Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M28.8096 22.235C28.8096 19.5189 26.948 17.8689 24.5141 17.8689C22.0959 17.8689 20.2383 19.5189 20.2383 22.235C20.2383 24.6098 21.8141 26.4905 24.5141 26.4905H24.5149C27.2307 26.4905 28.8096 24.6098 28.8096 22.235ZM22.3828 22.0033C22.3828 20.7695 23.076 19.5701 24.5176 19.5701C25.9765 19.5701 26.6689 20.7462 26.6689 22.0033C26.6689 23.3711 26.2268 24.8387 24.5176 24.8387C22.8218 24.8387 22.3828 23.3532 22.3828 22.0033Z" fill="white"/>
+<path d="M15.0845 26.0115L13.1203 17.2068H13.0982L11.1655 26.0115H8.35183L5.47656 14.9949H7.75499L9.7871 23.7934H9.81236L11.6653 14.9941H14.6179L16.53 23.7934H16.5616L18.5984 14.9941H20.7142L17.8784 26.0115H15.0845Z" fill="white"/>
+<rect width="31.2092" height="31.4202" rx="2.46809" transform="matrix(0.711639 -0.702545 0.711639 0.702545 42.6992 21.9258)" fill="#FDCD59"/>
+<path d="M53.7916 18.011C53.7916 16.7679 54.7887 16.425 55.5648 16.425C56.3519 16.4291 57.1295 16.5953 57.848 16.9129L58.0532 15.0322C57.2361 14.7563 56.3345 14.623 55.369 14.623C53.3922 14.623 51.4453 15.5536 51.4453 18.11C51.4453 21.8784 56.3598 20.9743 56.3598 23.1534C56.3598 24.1814 55.2214 24.6241 54.368 24.6241C53.4845 24.6241 52.6019 24.3459 51.8322 23.9196L51.6253 25.9849C52.7322 26.2538 53.2761 26.4198 54.499 26.4198C56.7648 26.4198 58.7156 25.4729 58.7156 22.9711C58.7156 19.1544 53.7916 19.986 53.7916 18.0103" fill="#201F2B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M66.7555 21.1614C66.7555 18.6752 65.7078 17.6152 63.187 17.6152C62.2697 17.6152 61.1423 17.8561 60.311 18.2512L60.371 20.1319C61.0886 19.5762 62.0107 19.2177 62.9289 19.2177C64.196 19.2177 64.796 19.6736 64.796 21.0282H63.6055C62.7055 21.0282 61.6413 21.11 60.8226 21.5161C59.9968 21.9315 59.4062 22.6618 59.4062 23.9189C59.4062 25.5166 60.8391 26.4192 62.2997 26.4192C63.2818 26.4192 64.3571 25.9056 64.8544 24.9695H64.886C64.89 25.034 64.8929 25.1174 64.8963 25.2132C64.9065 25.4991 64.9206 25.8952 64.9768 26.2274H66.8802C66.8321 25.5728 66.8021 24.9804 66.7871 24.3452C66.7689 23.7256 66.7555 23.0826 66.7555 22.2448V21.1614ZM63.7705 22.3345L64.7973 22.334C64.7973 22.991 64.6962 23.5911 64.3449 24.072C64.0054 24.5241 63.4899 24.821 62.8291 24.821C62.0546 24.821 61.4609 24.5124 61.4609 23.7922C61.4609 22.5444 62.8098 22.3454 63.7705 22.3345Z" fill="#201F2B"/>
+<path d="M72.7126 17.813H70.8328V16.7671C70.8328 16.1171 71.0586 15.4733 71.7834 15.4733C72.2476 15.4733 72.527 15.6557 72.7118 15.7718L72.891 13.9535C72.3754 13.8396 71.849 13.7806 71.3207 13.7773C69.6115 13.7773 68.6799 14.9519 68.6799 16.6346V17.813H67.082V19.4084H68.6799V26.2273H70.8328V19.4076H72.7118V17.813H72.7126Z" fill="#201F2B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M80.5944 22.6922C80.5944 19.7554 79.726 17.6152 76.6573 17.6152V17.616C74.0883 17.616 72.8086 19.6237 72.8086 22.0562C72.8086 24.823 74.4073 26.4207 77.1349 26.4207C78.2915 26.4207 79.1954 26.1916 79.9841 25.7489V23.9657C79.1789 24.4232 78.2789 24.8214 77.236 24.8214C75.8986 24.8214 74.967 24.0498 74.866 22.6922H80.5944ZM74.8672 21.1906C74.9682 20.0675 75.5777 19.2188 76.7896 19.2188C77.9896 19.2188 78.4743 20.133 78.5343 21.1906H74.8672Z" fill="#201F2B"/>
+<path d="M57.4489 30.9046H57.4417L56.8552 29.0684H56.3594L57.1473 31.4081H57.7133L58.487 29.0684H58.0275L57.4489 30.9046Z" fill="#191919"/>
+<path d="M59.1894 31.4081H59.6536V29.0684H59.1886L59.1894 31.4081Z" fill="#191919"/>
+<path d="M61.6749 31.0799C61.1846 31.0799 60.8917 30.719 60.8917 30.2436C60.8917 29.7659 61.1917 29.398 61.6638 29.398C61.8265 29.398 61.9875 29.4214 62.162 29.5188L62.1896 29.1236C62.0251 29.0628 61.8506 29.0322 61.6749 29.0332C60.8917 29.0332 60.4102 29.4775 60.4102 30.2802C60.4102 31.0674 60.9296 31.4509 61.6749 31.4509C61.8454 31.4509 62.0302 31.4096 62.196 31.3745L62.1731 30.977C62.0665 31.0409 61.8557 31.0799 61.6757 31.0799" fill="#191919"/>
+<path d="M62.6992 29.437H63.3569V31.4081H63.8219V29.4362H64.474V29.0684H62.6992V29.437Z" fill="#191919"/>
+<path d="M70.3101 31.4081H70.7743V29.0684H70.3101V31.4081Z" fill="#191919"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M67.2447 30.2335C67.2447 29.525 66.8326 29.0332 66.1142 29.0332V29.034C65.3863 29.034 64.9805 29.5156 64.9805 30.2335C64.9805 30.945 65.3799 31.4516 66.1142 31.4516C66.8413 31.4516 67.2447 30.9396 67.2447 30.2335ZM65.4688 30.2343C65.4688 29.8213 65.6535 29.4004 66.113 29.4004C66.5685 29.4004 66.7588 29.8213 66.7588 30.2343C66.7588 30.6536 66.5803 31.0815 66.113 31.0815C65.6424 31.0815 65.4688 30.6529 65.4688 30.2343Z" fill="#191919"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M69.5053 29.6977C69.5053 29.1032 68.9957 29.0582 68.5312 29.0549L67.8711 29.0547V31.3515H68.4032V30.4062H68.5106C68.6985 30.4062 68.76 30.4607 68.8303 30.6369L69.0987 31.3515H69.6182L69.2827 30.4677C69.2501 30.3927 69.1608 30.3224 69.1081 30.2811C69.0843 30.2623 69.0679 30.2494 69.0679 30.2448C69.334 30.2043 69.5053 29.9736 69.5053 29.6977ZM68.4051 29.4598H68.518C68.5299 29.4598 68.5418 29.4597 68.5539 29.4597C68.5591 29.4596 68.5642 29.4596 68.5694 29.4596C68.7769 29.4589 68.9996 29.4643 68.9996 29.7248C68.9996 29.9895 68.7756 29.9999 68.5691 30L68.4051 29.9999V29.4598Z" fill="#191919"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M73.771 31.3515L72.8615 29.0547H72.3437L71.4531 31.3515H71.93L72.1234 30.8106H73.0573L73.2587 31.3515H73.771ZM72.5925 29.5957H72.5949L72.9312 30.5419H72.2617L72.5925 29.5957Z" fill="#191919"/>
+</svg>

package/src/assets/icons/contrast.svg

@@ -0,0 +1,4 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="9.99999" cy="9.99999" r="8.99999" fill="white" stroke="black" stroke-width="2"/>
+<path d="M7.62939e-06 10C7.62939e-06 4.47716 4.47716 1.52588e-05 10 1.52588e-05L10 10L10 20C4.47716 20 7.62939e-06 15.5229 7.62939e-06 10Z" fill="#191919"/>
+</svg>

package/src/assets/icons/lang.svg

@@ -0,0 +1,13 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_4_1811)">
+<path d="M6.5 4.59521C6.30117 4.59548 6.11056 4.67458 5.96996 4.81518C5.82937 4.95577 5.75026 5.14638 5.75 5.34521V5.84521C5.75 5.91152 5.77634 5.97511 5.82322 6.02199C5.87011 6.06888 5.9337 6.09521 6 6.09521H7C7.0663 6.09521 7.12989 6.06888 7.17678 6.02199C7.22366 5.97511 7.25 5.91152 7.25 5.84521V5.34521C7.24974 5.14638 7.17063 4.95577 7.03004 4.81518C6.88944 4.67458 6.69883 4.59548 6.5 4.59521Z" fill="#191919"/>
+<path d="M17.223 17.5952C17.1825 17.5952 17.1426 17.605 17.1066 17.6238C17.0707 17.6426 17.0399 17.6698 17.0169 17.7032C16.9939 17.7366 16.9793 17.775 16.9745 17.8153C16.9696 17.8555 16.9746 17.8963 16.989 17.9342C17.0712 18.1471 17.1716 18.3525 17.289 18.5482C17.311 18.5858 17.3424 18.6169 17.3801 18.6386C17.4178 18.6602 17.4605 18.6716 17.504 18.6716C17.5475 18.6716 17.5903 18.6602 17.628 18.6386C17.6657 18.6169 17.6971 18.5858 17.719 18.5482C17.8361 18.3523 17.9365 18.147 18.019 17.9342C18.0335 17.8963 18.0385 17.8555 18.0336 17.8153C18.0288 17.775 18.0142 17.7366 17.9912 17.7032C17.9681 17.6698 17.9373 17.6426 17.9014 17.6238C17.8655 17.605 17.8256 17.5952 17.785 17.5952H17.223Z" fill="#191919"/>
+<path d="M22.5 11.3452H14.75C14.6837 11.3452 14.6201 11.3716 14.5732 11.4184C14.5263 11.4653 14.5 11.5289 14.5 11.5952V14.0952C14.5 14.2941 14.421 14.4849 14.2803 14.6255C14.1397 14.7662 13.9489 14.8452 13.75 14.8452H10.75C10.6837 14.8452 10.6201 14.8716 10.5732 14.9184C10.5263 14.9653 10.5 15.0289 10.5 15.0952V22.8452C10.5 23.243 10.658 23.6246 10.9393 23.9059C11.2206 24.1872 11.6022 24.3452 12 24.3452H22.5C22.8978 24.3452 23.2794 24.1872 23.5607 23.9059C23.842 23.6246 24 23.243 24 22.8452V12.8452C24 12.4474 23.842 12.0659 23.5607 11.7846C23.2794 11.5032 22.8978 11.3452 22.5 11.3452ZM14.5 16.0952H16.5C16.5663 16.0952 16.6299 16.0689 16.6768 16.022C16.7237 15.9751 16.75 15.9115 16.75 15.8452V15.3452C16.75 15.1463 16.829 14.9555 16.9697 14.8149C17.1103 14.6742 17.3011 14.5952 17.5 14.5952C17.6989 14.5952 17.8897 14.6742 18.0303 14.8149C18.171 14.9555 18.25 15.1463 18.25 15.3452V15.8452C18.25 15.9115 18.2763 15.9751 18.3232 16.022C18.3701 16.0689 18.4337 16.0952 18.5 16.0952H20.5C20.6989 16.0952 20.8897 16.1742 21.0303 16.3149C21.171 16.4555 21.25 16.6463 21.25 16.8452C21.25 17.0441 21.171 17.2349 21.0303 17.3755C20.8897 17.5162 20.6989 17.5952 20.5 17.5952H19.873C19.8168 17.5951 19.7621 17.614 19.718 17.6488C19.6739 17.6837 19.6429 17.7325 19.63 17.7872C19.4626 18.4724 19.1652 19.1191 18.754 19.6922C18.7334 19.7208 18.7191 19.7533 18.7121 19.7878C18.705 19.8223 18.7053 19.8579 18.713 19.8922C18.7201 19.9262 18.7342 19.9582 18.7546 19.9863C18.7749 20.0144 18.801 20.0379 18.831 20.0552C19.2624 20.3024 19.7234 20.494 20.203 20.6252C20.2981 20.6516 20.3871 20.6965 20.4648 20.7573C20.5426 20.8182 20.6075 20.8938 20.656 20.9798C20.7044 21.0658 20.7354 21.1605 20.7472 21.2585C20.759 21.3565 20.7513 21.4559 20.7246 21.5509C20.6978 21.646 20.6526 21.7348 20.5915 21.8123C20.5304 21.8898 20.4546 21.9545 20.3684 22.0026C20.2822 22.0508 20.1874 22.0815 20.0893 22.0929C19.9913 22.1043 19.8919 22.0963 19.797 22.0692C19.028 21.8598 18.3 21.5217 17.644 21.0692C17.6021 21.0395 17.5519 21.0235 17.5005 21.0235C17.4491 21.0235 17.3989 21.0395 17.357 21.0692C16.7009 21.5217 15.973 21.8598 15.204 22.0692C15.1091 22.0963 15.0097 22.1043 14.9117 22.0929C14.8136 22.0815 14.7188 22.0508 14.6326 22.0026C14.5464 21.9545 14.4706 21.8898 14.4095 21.8123C14.3484 21.7348 14.3032 21.646 14.2764 21.5509C14.2497 21.4559 14.242 21.3565 14.2538 21.2585C14.2656 21.1605 14.2966 21.0658 14.345 20.9798C14.3935 20.8938 14.4584 20.8182 14.5362 20.7573C14.6139 20.6965 14.7029 20.6516 14.798 20.6252C15.2776 20.494 15.7386 20.3024 16.17 20.0552C16.2001 20.0378 16.2262 20.0143 16.2467 19.9863C16.2672 19.9582 16.2816 19.9262 16.289 19.8922C16.2963 19.8578 16.2963 19.8222 16.2891 19.7878C16.2819 19.7533 16.2675 19.7208 16.247 19.6922C15.8358 19.1191 15.5384 18.4724 15.371 17.7872C15.3581 17.7325 15.3271 17.6837 15.283 17.6488C15.2389 17.614 15.1842 17.5951 15.128 17.5952H14.5C14.3011 17.5952 14.1103 17.5162 13.9697 17.3755C13.829 17.2349 13.75 17.0441 13.75 16.8452C13.75 16.6463 13.829 16.4555 13.9697 16.3149C14.1103 16.1742 14.3011 16.0952 14.5 16.0952Z" fill="#191919"/>
+<path d="M12.75 13.3452C12.8163 13.3452 12.8799 13.3189 12.9268 13.272C12.9737 13.2251 13 13.1615 13 13.0952V1.84521C13 1.44739 12.842 1.06586 12.5607 0.784554C12.2793 0.50325 11.8978 0.345215 11.5 0.345215L1.5 0.345215C1.10217 0.345215 0.720644 0.50325 0.43934 0.784554C0.158035 1.06586 0 1.44739 0 1.84521L0 11.8452C0 12.243 0.158035 12.6246 0.43934 12.9059C0.720644 13.1872 1.10217 13.3452 1.5 13.3452H12.75ZM6 7.59521C5.93369 7.59521 5.8701 7.62155 5.82322 7.66843C5.77634 7.71532 5.75 7.77891 5.75 7.84521V9.84521C5.75 10.0441 5.67098 10.2349 5.53033 10.3755C5.38967 10.5162 5.19891 10.5952 5 10.5952C4.80108 10.5952 4.61032 10.5162 4.46967 10.3755C4.32901 10.2349 4.25 10.0441 4.25 9.84521V5.34521C4.25 4.74848 4.48705 4.17618 4.90901 3.75422C5.33096 3.33227 5.90326 3.09521 6.5 3.09521C7.09673 3.09521 7.66903 3.33227 8.09099 3.75422C8.51294 4.17618 8.75 4.74848 8.75 5.34521V9.84521C8.75 10.0441 8.67098 10.2349 8.53032 10.3755C8.38967 10.5162 8.19891 10.5952 8 10.5952C7.80108 10.5952 7.61032 10.5162 7.46967 10.3755C7.32901 10.2349 7.25 10.0441 7.25 9.84521V7.84521C7.25 7.77891 7.22366 7.71532 7.17677 7.66843C7.12989 7.62155 7.0663 7.59521 7 7.59521H6Z" fill="#191919"/>
+</g>
+<defs>
+<clipPath id="clip0_4_1811">
+<rect width="24" height="24" fill="white" transform="translate(0 0.345215)"/>
+</clipPath>
+</defs>
+</svg>

package/src/assets/icons/login.svg

@@ -0,0 +1,4 @@
+<svg width="16" height="20" viewBox="0 0 16 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15 19C15 17.1435 14.2625 15.363 12.9497 14.0503C11.637 12.7375 9.85652 12 8 12C6.14348 12 4.36301 12.7375 3.05025 14.0503C1.7375 15.363 1 17.1435 1 19" stroke="white" stroke-width="2" stroke-linecap="round"/>
+<path d="M8 9C10.2091 9 12 7.20914 12 5C12 2.79086 10.2091 1 8 1C5.79086 1 4 2.79086 4 5C4 7.20914 5.79086 9 8 9Z" stroke="white" stroke-width="2"/>
+</svg>

package/src/components/Global/AppHeaderNew/ModalSearch/index.vue

@@ -0,0 +1,71 @@
+<template>
+  <div class="app-search" @keyup.esc="$emit('closed')">
+    <!-- Do not change the position of elements as they are used for keyboard nav -->
+    <button
+      ref="closeSearchButton"
+      class="close app-search__close-btn"
+      @click="$emit('closed')"
+    >
+      Close menu
+      <img class="app-search__close-icon" width="22" height="18" :src="Close" />
+    </button>
+    <form @submit.prevent>
+      <label
+        class="app-search__label font-weight-bold"
+        for="app-search--search-input-box"
+        >Search WorkSafe</label
+      >
+      <search
+        ref="searchInputBox"
+        :google-search-flag="googleSearchFlag"
+        :initial-search-query="searchQuery"
+        :page-limit="pageLimit"
+        :page-number="pageNumber"
+        :content-parser="contentParser"
+        :is-typeahead="false"
+        @loading="(e) => (searchResults = null)"
+        @results="(e) => (searchResults = e)"
+        @selected="$emit('closed')"
+      />
+    </form>
+  </div>
+</template>
+
+<script>
+import Close from '../../../../assets/icons/close.svg?url'
+import Search from '../../../SubComponents/Search/index.vue'
+
+export default {
+  name: 'ModalSearch',
+  components: { Search },
+  props: {
+    searchQuery: {
+      type: String,
+      default: ''
+    },
+    contentParser: {
+      type: Function,
+      required: true
+    },
+    googleSearchFlag: {
+      type: String,
+      default: 'googlerest'
+    }
+  },
+  data() {
+    return {
+      pageLimit: 20,
+      pageNumber: 1,
+      searchResults: null,
+      Close
+    }
+  },
+  mounted() {
+    this.$refs.searchInputBox.$el.querySelector('input').focus()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import './styles';
+</style>

package/src/components/Global/AppHeaderNew/ModalSearch/styles.scss

@@ -0,0 +1,43 @@
+@import '../includes';
+@import '../../../../includes/scss/vars/src/colors.scss';
+
+.app-search {
+  position: relative;
+
+  @include fp('padding-left', 16, 60, $start: 320, $end: 980);
+  @include fp('padding-right', 16, 60, $start: 320, $end: 980);
+
+  & > &__close-btn {
+    position: absolute;
+    font-size: 16px;
+    color: $app-menu-black;
+    background: transparent;
+    border: none;
+    padding: 0;
+    font-family: inherit;
+    top: -32px;
+    @include fp('right', 16, 60, $start: 320, $end: 980);
+
+    &:hover {
+      cursor: pointer;
+    }
+
+    span {
+      font-size: 24px;
+      padding-left: 16px;
+    }
+
+    .app-search__close-icon {
+      margin-left: 16px;
+    }
+  }
+
+  &__label {
+    font-size: 18px;
+    line-height: 1.56;
+    display: block;
+    margin-bottom: 8px;
+    margin-top: 56px;
+    color: $app-menu-black;
+  }
+}

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({})