@worksafevictoria/wcl7.5 1.0.0

package/src/assets/styles/webfonts.css

@@ -0,0 +1,155 @@
+@font-face {
+  font-family: 'VIC';
+  src: url('../fonts/VIC-Italic.eot');
+  src: local('VIC Italic'), local('VIC-Italic'),
+    url('../fonts/VIC-Italic.eot?#iefix') format('embedded-opentype'),
+    url('../fonts/VIC-Italic.woff2') format('woff2'),
+    url('../fonts/VIC-Italic.woff') format('woff'),
+    url('../fonts/VIC-Italic.ttf') format('truetype');
+  font-weight: normal;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'VIC';
+  src: url('../fonts/VIC-BoldItalic.eot');
+  src: local('VIC Bold Italic'), local('VIC-BoldItalic'),
+    url('../fonts/VIC-BoldItalic.eot?#iefix') format('embedded-opentype'),
+    url('../fonts/VIC-BoldItalic.woff2') format('woff2'),
+    url('../fonts/VIC-BoldItalic.woff') format('woff'),
+    url('../fonts/VIC-BoldItalic.ttf') format('truetype');
+  font-weight: bold;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'VIC';
+  src: url('../fonts/VIC-ExtraLightItalic.eot');
+  src: local('VIC ExtraLight Italic'), local('VIC-ExtraLightItalic'),
+    url('../fonts/VIC-ExtraLightItalic.eot?#iefix') format('embedded-opentype'),
+    url('../fonts/VIC-ExtraLightItalic.woff2') format('woff2'),
+    url('../fonts/VIC-ExtraLightItalic.woff') format('woff'),
+    url('../fonts/VIC-ExtraLightItalic.ttf') format('truetype');
+  font-weight: 200;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'VIC';
+  src: url('../fonts/VIC-Bold.eot');
+  src: local('VIC Bold'), local('VIC-Bold'),
+    url('../fonts/VIC-Bold.eot?#iefix') format('embedded-opentype'),
+    url('../fonts/VIC-Bold.woff2') format('woff2'),
+    url('../fonts/VIC-Bold.woff') format('woff'),
+    url('../fonts/VIC-Bold.ttf') format('truetype');
+  font-weight: bold;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'VIC';
+  src: url('../fonts/VIC-ExtraLight.eot');
+  src: local('VIC ExtraLight'), local('VIC-ExtraLight'),
+    url('../fonts/VIC-ExtraLight.eot?#iefix') format('embedded-opentype'),
+    url('../fonts/VIC-ExtraLight.woff2') format('woff2'),
+    url('../fonts/VIC-ExtraLight.woff') format('woff'),
+    url('../fonts/VIC-ExtraLight.ttf') format('truetype');
+  font-weight: 200;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'VIC';
+  src: url('../fonts/VIC-SemiBold.eot');
+  src: local('VIC SemiBold'), local('VIC-SemiBold'),
+    url('../fonts/VIC-SemiBold.eot?#iefix') format('embedded-opentype'),
+    url('../fonts/VIC-SemiBold.woff2') format('woff2'),
+    url('../fonts/VIC-SemiBold.woff') format('woff'),
+    url('../fonts/VIC-SemiBold.ttf') format('truetype');
+  font-weight: 600;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'VIC';
+  src: url('../fonts/VIC-Regular.eot');
+  src: local('VIC'), local('VIC-Regular'),
+    url('../fonts/VIC-Regular.eot?#iefix') format('embedded-opentype'),
+    url('../fonts/VIC-Regular.woff2') format('woff2'),
+    url('../fonts/VIC-Regular.woff') format('woff'),
+    url('../fonts/VIC-Regular.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'VIC';
+  src: url('../fonts/VIC-Light.eot');
+  src: local('VIC Light'), local('VIC-Light'),
+    url('../fonts/VIC-Light.eot?#iefix') format('embedded-opentype'),
+    url('../fonts/VIC-Light.woff2') format('woff2'),
+    url('../fonts/VIC-Light.woff') format('woff'),
+    url('../fonts/VIC-Light.ttf') format('truetype');
+  font-weight: 300;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'VIC';
+  src: url('../fonts/VIC-MediumItalic.eot');
+  src: local('VIC Medium Italic'), local('VIC-MediumItalic'),
+    url('../fonts/VIC-MediumItalic.eot?#iefix') format('embedded-opentype'),
+    url('../fonts/VIC-MediumItalic.woff2') format('woff2'),
+    url('../fonts/VIC-MediumItalic.woff') format('woff'),
+    url('../fonts/VIC-MediumItalic.ttf') format('truetype');
+  font-weight: 500;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'VIC';
+  src: url('../fonts/VIC-Medium.eot');
+  src: local('VIC Medium'), local('VIC-Medium'),
+    url('../fonts/VIC-Medium.eot?#iefix') format('embedded-opentype'),
+    url('../fonts/VIC-Medium.woff2') format('woff2'),
+    url('../fonts/VIC-Medium.woff') format('woff'),
+    url('../fonts/VIC-Medium.ttf') format('truetype');
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'VIC';
+  src: url('../fonts/VIC-SemiBoldItalic.eot');
+  src: local('VIC SemiBold Italic'), local('VIC-SemiBoldItalic'),
+    url('../fonts/VIC-SemiBoldItalic.eot?#iefix') format('embedded-opentype'),
+    url('../fonts/VIC-SemiBoldItalic.woff2') format('woff2'),
+    url('../fonts/VIC-SemiBoldItalic.woff') format('woff'),
+    url('../fonts/VIC-SemiBoldItalic.ttf') format('truetype');
+  font-weight: 600;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'VIC';
+  src: url('../fonts/VIC-LightItalic.eot');
+  src: local('VIC Light Italic'), local('VIC-LightItalic'),
+    url('../fonts/VIC-LightItalic.eot?#iefix') format('embedded-opentype'),
+    url('../fonts/VIC-LightItalic.woff2') format('woff2'),
+    url('../fonts/VIC-LightItalic.woff') format('woff'),
+    url('../fonts/VIC-LightItalic.ttf') format('truetype');
+  font-weight: 300;
+  font-style: italic;
+  font-display: swap;
+}

package/src/components/Common/CardGrid/cardgrid.stories.js

@@ -0,0 +1,269 @@
+import CardGridItem from './../CardGridItem/index.vue'
+import Column from './../../Containers/Column/index.vue'
+import CardGrid from './index.vue'
+
+const cardGridTitle = 'Card Grid Title'
+
+export default {
+  title: 'Common/CardGrid',
+  component: CardGrid,
+  argTypes: {
+    cards: {
+      control: 'array'
+    },
+    onClick: {},
+    rtl: {
+      control: 'boolean'
+    },
+    title: {
+      control: 'text'
+    },
+    titleTag: {
+      control: {
+        type: 'select',
+      },
+      options: ['h2', 'h3']
+    },
+    subHeading: {
+      control: 'text'
+    },
+    gridColumnSize: {
+      control: 'number'
+    },
+    columnsPerRow: {
+      control: 'number'
+    },
+    forceLgcolumns: {
+      control: 'number'
+    },
+    forceMdcolumns: {
+      control: 'number'
+    },
+    forceSmcolumns: {
+      control: 'number'
+    },
+    size: {
+      control: 'select',
+        options: ['half-content', 'content', 'page', 'full']
+    },
+    isSelectable: {
+      control: 'boolean'
+    },
+    cardIdPrefix: {
+      control: 'text'
+    },
+    rowSpacing: {
+      control: 'select',
+        options: ['large', 'small', 'none']
+      },
+    columnSpacing: {
+      control: 'select',
+      options: ['default', 'none']
+    },
+    backgroundVariant: {
+      control: 'select',
+      options: [
+        'none',
+        'light',
+        'dark',
+        'grey',
+        'yellow',
+        'white',
+        'lightblue'
+      ]
+    },
+    applyBackgroundOn: {
+      control: 'select',
+      options: ['content', 'block', 'container', 'section']
+    },
+    noPaddingTop: {
+      control: 'boolean'
+    },
+    cardHeaderImageType: {
+      control: 'select',
+      options: ['none', 'icon', 'image']
+    },
+    iconPosition: {
+      control: 'select',
+      options: ['top', 'top-left', 'after-title', 'before-description']
+    },
+    iconSize: {
+      control:'select',
+      options: ['small', 'medium', 'large']
+    },
+    iconIsBordered: {
+      control: 'boolean'
+    },
+    showDivider: {
+      control: 'boolean'
+    },
+    cardHeaderTitle: {
+      control: 'text'
+    },
+    headerSize: {
+      control: 'select',
+      options: ['medium', 'large', 'extra-large', '2x-extra-large', 'custom']
+    },
+    headerTextAlign: {
+      control:'select',
+      options: ['left', 'center', 'right']
+    },
+    headerTag: {
+      control: 'text'
+    },
+    caret: {
+      control:'select',
+      options: ['right', 'down', 'up', 'left', 'external', 'none']
+    },
+    caretPosition: {
+      control:'select',
+      options: ['top', 'none', 'bottom']
+    },
+    cardPadding: {
+      control:'select',
+      options: ['small', 'xsmall', 'medium', 'large', 'none']
+    },
+    borderType: {
+      control:'select',
+      options: ['thin', 'none', 'shadow']
+    },
+    contentClass: {
+      control: 'text'
+    },
+    cardDescription: {
+      control: 'text'
+    }
+  }
+}
+
+const Template = (args) => ({
+  components: { CardGrid, CardGridItem, Column },
+  setup () {
+    return { args }
+  },
+  computed: {
+    computedTitle() {
+      if (args.title) {
+        let device
+        if (args.isMobileView) {
+          device = 'Mobile'
+        } else if (args.isTabletView) {
+          device = 'Tablet'
+        } else {
+          device = 'Desktop'
+        }
+      return `${args.title} - ${device} view - ${args.gridColumnSize} columns`
+      }
+      return null
+    }
+  },
+  data () {
+    const overrideCSS = `
+    .slot {
+      color: black;
+    }
+    .card-grid__column--default{
+      margin-bottom:50px;`;
+    const glyphExtSrc = 'https://content-staging-v2.api.worksafe.vic.gov.au/sites/default/files/2021-10/instagram.svg?raw';
+    const imgExtSrc = 'https://content-staging-v2.api.worksafe.vic.gov.au/sites/default/files/styles/large/public/trees-orange-night_0.png?itok=-1wXLs9A';
+    
+    return {
+      overrideCSS,
+      glyphExtSrc,
+      imgExtSrc
+    }
+
+  },
+  mounted() {
+    const styleTag = document.createElement('style')
+    styleTag.appendChild(document.createTextNode(this.overrideCSS))
+    this.$el.appendChild(styleTag)
+  },
+  template: 
+  `
+  <card-grid v-bind="args" :title="computedTitle" >
+  <template v-slot:cardItem="{ card }">
+      <card-grid-item
+        v-bind="args"
+        :image-src="args.cardHeaderImageType === 'image' ? imgExtSrc : undefined"
+        :glyph-src="args.cardHeaderImageType === 'icon' ? glyphExtSrc : undefined"
+     >
+        <template v-slot:cardDescription>
+          <div>
+            {{ args.cardDescription }}
+          </div>
+        </template>
+
+        <template v-slot:cardTop>
+          <div class="slot">
+           Card Top slot
+          </div>
+        </template>
+
+        <template v-slot:beforeCard>
+          <div class="slot">
+           Before Card slot
+          </div>
+        </template>
+
+        <template v-slot:afterCard>
+          <div class="slot">
+           After Card slot
+          </div>
+        </template>
+
+      </card-grid-item>
+    </template>
+
+    <template v-slot:gridHeaderRight>
+      <column class="slot">
+        Grid header right slot.
+      </column>
+    </template>
+
+    <template v-slot:cardGridFooter>
+    <div class="slot">
+      Grid footer slot.
+    </div>
+  </template>
+</card-grid>
+`
+})
+
+export const Default = Template.bind({})
+
+Default.args = {
+    title: cardGridTitle,
+    titleTag: 'h2',
+    subHeading: 'Card Grid Sub Heading',
+    backgroundVariant: 'light',
+    applyBackgroundOn: 'container',
+    cards:  Array.from({length: 9}, () => ({})),
+    rtl: false,
+    gridColumnSize: 3,
+    columnsPerRow: 3,
+    forceLgcolumns: 3,
+    forceMdcolumns: 2,
+    forceSmcolumns: 1,
+    size: 'page',
+    isSelectable: true,
+    cardIdPrefix: 'cardIdPrefixSample',
+    rowSpacing: 'large',
+    columnSpacing: 'default',
+    noPaddingTop: false,
+    cardHeaderImageType: 'none',
+    iconPosition: 'top',
+    iconSize: 'small',
+    iconIsBordered: true,
+    showDivider: false,
+    cardHeaderTitle: 'Card header title',
+    headerSize: 'medium',
+    headerTextAlign: 'left',
+    headerTag: 'h3',
+    caret: 'right',
+    caretPosition: 'top',
+    cardPadding: 'small',
+    borderType: 'thin',
+    contentClass: 'Content Class',
+    cardDescription: 'Card description slot. text 123 Sample text. You can also use description prop.',
+  }