@worksafevictoria/wcl7.5 1.0.0

package/src/components/Paragraphs/RichText/index.stories.js

@@ -0,0 +1,393 @@
+import RichText from './index.vue'
+import customIcon from '../../../assets/icons/external-link.svg?url'
+import printIcon from '../../../assets/icons/SocialShare/print.svg?url'
+import instagramIcon from '../../../assets/icons/instagram.svg?url'
+import playIcon from '../../../assets/icons/video-play.svg?url'
+
+const mockData = {
+  processed: `
+  <h2>Cta buttons with custom icons</h2>
+    <a href="#" class="cta-button has-icon">Class cta-button has-icon <span><img alt="" src="${customIcon}" /></span></a>
+    <a href="#" class="cta-button has-icon dark">Class cta-button has-icon dark<span><img alt="" src="${instagramIcon}" /></span></a>
+    <a href="#" class="cta-button has-icon workwell">Class cta-button has-icon workwell <span><img alt="" src="${printIcon}" /></span></a>
+    <a href="#" class="cta-button has-icon">Class cta-button has-icon <span><img alt="" src="${playIcon}" /></span></a>
+    <a href="#" class="cta-button has-icon dark">Class cta-button has-icon dark <span><img alt="" src="${printIcon}" /></span></a>
+    <a href="#" class="cta-button has-icon workwell">Class cta-button has-icon workwell<span><img alt="" src="${printIcon}" /></span></a>
+    <a href="#" class="cta-button has-icon rtl">Class cta-button has-icon rtl <span><img alt="" src="${printIcon}" /></span></a>
+  <h2>This is a heading</h2>
+  <p>This is a paragraph</p>
+  <div class="header-rich-text-wrap"><p><a class="cta-button" href="#">Class cta-button</a> <a class="cta-button dark" href="#">Class cta-button dark</a> <a class="cta-button workwell" href="#">Class cta-button workwell</a> <a class="cta-button rtl" href="#">Class cta-button rtl</a> <a class="cta-button dark rtl" href="#">Class cta-button dark rtl</a> <a class="cta-button workwell rtl" href="#">Class cta-button workwell rtl</a>
+    <a href="#" class="cta-button">Class cta-button</a>
+    <a href="#" class="cta-button dark">Class cta-button dark</a>
+    <a href="#" class="cta-button workwell">Class cta-button workwell</a>
+    <a href="#" class="cta-button rtl">Class cta-button rtl</a>
+    <a href="#" class="cta-button dark rtl">Class cta-button dark rtl</a>
+    <a href="#" class="cta-button workwell rtl"
+      >Class cta-button workwell rtl</a
+    >
+  </p>
+  </div>
+  <div>
+    <a href="http://www.google.com">Go to google</a>
+  </div>
+  <table class="table-stacked">
+      <thead>
+        <tr tabindex="0">
+          <th>CODE</th>
+          <th>STOCK</th>
+          <th>CAP</th>
+          <th>INCH</th>
+          <th>BOX TYPE</th>
+          <th>RELOCATION</th>
+          <th>COMMERCIAL</th>
+          <th>OFFICIAL</th>
+          <th>QUALITY</th>
+          <th>PERFORMANCE</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>CES-9000</td>
+          <td>50mt</td>
+          <td>9mm</td>
+          <td>1/2"</td>
+          <td>Kangal / Coil</td>
+          <td>CES-9000</td>
+          <td>50mt</td>
+          <td>9mm</td>
+          <td>1/2"</td>
+          <td>Kangal / Coil</td>
+        </tr>
+        <tr>
+          <td>CES-9001</td>
+          <td>50mt</td>
+          <td>9mm</td>
+          <td>1/2"</td>
+          <td>Kangal / Coil</td>
+          <td>CES-9000</td>
+          <td>50mt</td>
+          <td>9mm</td>
+          <td>1/2"</td>
+          <td>Kangal / Coil</td>
+        </tr>
+        <tr>
+          <td>CES-9002</td>
+          <td>50mt</td>
+          <td>9mm</td>
+          <td>1/2"</td>
+          <td>Kangal / Coil</td>
+          <td>CES-9000</td>
+          <td>50mt</td>
+          <td>9mm</td>
+          <td>1/2"</td>
+          <td>Kangal / Coil</td>
+        </tr>
+        <tr>
+          <td>CES-9003</td>
+          <td>50mt</td>
+          <td>9mm</td>
+          <td>1/2"</td>
+          <td>Kangal / Coil</td>
+          <td>CES-9000</td>
+          <td>50mt</td>
+          <td>9mm</td>
+          <td>1/2"</td>
+          <td>Kangal / Coil</td>
+        </tr>
+      </tbody>
+    </table>
+    <h2>Default Table</h2>
+    <table>
+      <thead>
+        <tr>
+          <th>CODE</th>
+          <th>STOCK</th>
+          <th>CAP</th>
+          <th>INCH</th>
+          <th>BOX TYPE</th>
+          <th>RELOCATION</th>
+          <th>COMMERCIAL</th>
+          <th>OFFICIAL</th>
+          <th>QUALITY</th>
+          <th>PERFORMANCE</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>CES-9000</td>
+          <td>50mt</td>
+          <td>9mm</td>
+          <td>1/2"</td>
+          <td>Kangal / Coil</td>
+          <td>CES-9000</td>
+          <td>50mt</td>
+          <td>9mm</td>
+          <td>1/2"</td>
+          <td>Kangal / Coil</td>
+        </tr>
+        <tr>
+          <td>CES-9001</td>
+          <td>50mt</td>
+          <td>9mm</td>
+          <td>1/2"</td>
+          <td>Kangal / Coil</td>
+          <td>CES-9000</td>
+          <td>50mt</td>
+          <td>9mm</td>
+          <td>1/2"</td>
+          <td>Kangal / Coil</td>
+        </tr>
+        <tr>
+          <td>CES-9002</td>
+          <td>50mt</td>
+          <td>9mm</td>
+          <td>1/2"</td>
+          <td>Kangal / Coil</td>
+          <td>CES-9000</td>
+          <td>50mt</td>
+          <td>9mm</td>
+          <td>1/2"</td>
+          <td>Kangal / Coil</td>
+        </tr>
+        <tr>
+          <td>CES-9003</td>
+          <td>50mt</td>
+          <td>9mm</td>
+          <td>1/2"</td>
+          <td>Kangal / Coil</td>
+          <td>CES-9000</td>
+          <td>50mt</td>
+          <td>9mm</td>
+          <td>1/2"</td>
+          <td>Kangal / Coil</td>
+        </tr>
+      </tbody>
+    </table>
+
+  <h2>Button Group</h2>
+    <a href="#" class="cta-button has-icon">Class cta-button <span><img alt="" src="${customIcon}" /></span></a>
+    <a href="#" class="cta-button has-icon dark">Class cta-button <span><img alt="" src="${instagramIcon}" /></span></a>
+    <a href="#" class="cta-button has-icon workwell">Class cta-button <span><img alt="" src="${printIcon}" /></span></a>
+    <a href="#" class="cta-button has-icon">Class cta-button <span><img alt="" src="${playIcon}" /></span></a>
+    <a href="#" class="cta-button has-icon dark">Class cta-button <span><img alt="" src="${printIcon}" /></span></a>
+    <a href="#" class="cta-button has-icon workwell">Class cta-button <span><img alt="" src="${printIcon}" /></span></a>
+    <a href="#" class="cta-button has-icon rtl">Class cta-button <span><img alt="" src="${printIcon}" /></span></a>
+    <a href="#" class="cta-button">Class cta-button</a>
+    <a href="#" class="cta-button dark">Class cta-button dark</a>
+    <a href="#" class="cta-button workwell">Class cta-button workwell</a>
+    <a href="#" class="cta-button rtl">Class cta-button rtl</a>
+    <a href="#" class="cta-button dark rtl">Class cta-button dark rtl</a>
+    <a href="#" class="cta-button workwell rtl"
+      >Class cta-button workwell rtl</a
+    >
+    <h2>Mixed UnOrdered Styled list with default and overrides</h2>
+    <ul class="styled-list">
+      <li><img class="tick" alt="" src="https://unpkg.com/@worksafevictoria/wcl@1.0.0-beta.282/src/assets/icons/tick.svg" /> mobility
+        <ul>
+          <li><img class="tick" alt="" src="https://unpkg.com/@worksafevictoria/wcl@1.0.0-beta.282/src/assets/icons/tick.svg" /> tick</li>
+          <li><img class="cross" alt="" src="https://unpkg.com/@worksafevictoria/wcl@1.0.0-beta.282/src/assets/icons/cross.svg" /> with cross</li>
+          <li><img alt="" src="https://unpkg.com/@worksafevictoria/wcl@1.0.0-beta.282/src/assets/icons/bullet-empty.svg" /> with sub bullet</li>
+        </ul>
+      </li>
+      <li><img class="tick" alt="" src="https://unpkg.com/@worksafevictoria/wcl@1.0.0-beta.282/src/assets/icons/tick.svg" /> with tick</li>
+      <li><img class="cross" alt="" src="https://unpkg.com/@worksafevictoria/wcl@1.0.0-beta.282/src/assets/icons/cross.svg" /> with cross</li>
+    </ul>
+    <h2>nested ul with checkbox</h2>
+    <ul class="styled-list" type="checkbox">
+      <li>Coffee</li>
+      <li>Tea
+        <ul>
+          <li>Coffee</li>
+          <li>Tea
+          </li>
+          <li>Milk</li>
+        </ul>
+      </li>
+      <li>Milk</li>
+    </ul>
+    <h2>nested ol with checkbox</h2>
+    <ol class="styled-list" type="checkbox">
+      <li>Coffee</li>
+      <li>Tea
+        <ol>
+          <li>Coffee</li>
+          <li>Tea
+          </li>
+          <li>Milk</li>
+        </ol>
+      </li>
+      <li>Milk</li>
+    </ol>
+    <h2>nested ul with checkbox and rtl</h2>
+    <ul class="styled-list rtl" type="checkbox">
+      <li>Coffee</li>
+      <li>Tea
+        <ul>
+          <li>Coffee</li>
+          <li>Tea
+          </li>
+          <li>Milk</li>
+        </ul>
+      </li>
+      <li>Milk</li>
+    </ul>
+    <h2>nested ol with checkbox and rtl</h2>
+    <ol class="styled-list rtl" type="checkbox">
+      <li>Coffee</li>
+      <li>Tea
+        <ol>
+          <li>Coffee</li>
+          <li>Tea
+          </li>
+          <li>Milk</li>
+        </ol>
+      </li>
+      <li>Milk</li>
+    </ol>
+
+    <h2>Styled list with all default</h2>
+    <ul class="styled-list">
+      <li><img alt="" src="https://unpkg.com/@worksafevictoria/wcl@1.0.0-beta.282/src/assets/icons/bullet.svg" /> mobility
+        <ul>
+          <li><img alt="" src="https://unpkg.com/@worksafevictoria/wcl@1.0.0-beta.282/src/assets/icons/bullet.svg" /> bullet</li>
+          <li><img alt="" src="https://unpkg.com/@worksafevictoria/wcl@1.0.0-beta.282/src/assets/icons/bullet.svg" /> with bullet</li>
+          <li><img alt="" src="https://unpkg.com/@worksafevictoria/wcl@1.0.0-beta.282/src/assets/icons/bullet.svg" /> with bullet</li>
+        </ul>
+      </li>
+      <li><img alt="" src="https://unpkg.com/@worksafevictoria/wcl@1.0.0-beta.282/src/assets/icons/bullet.svg" /> with bullet</li>
+      <li><img alt="" src="https://unpkg.com/@worksafevictoria/wcl@1.0.0-beta.282/src/assets/icons/bullet.svg" /> with bullet</li>
+    </ul>
+
+    <h2 class="rtl">قائمة منسقة</h2>
+    <ul class="styled-list rtl">
+      <li><img class="tick" alt="" src="https://unpkg.com/@worksafevictoria/wcl@1.0.0-beta.282/src/assets/icons/tick.svg" />
+        إمكانية التنقل
+        <ul>
+          <li>
+            <img class="cross" alt="" src="https://unpkg.com/@worksafevictoria/wcl@1.0.0-beta.282/src/assets/icons/cross.svg" /> إمكانية التنقل
+          </li>
+        </ul>
+      </li>
+      <li>
+        <img alt="" src="https://unpkg.com/@worksafevictoria/wcl@1.0.0-beta.282/src/assets/icons/bullet-empty.svg" /> إمكانية التنقل
+      </li>
+      <li>
+        <img alt="" src="https://unpkg.com/@worksafevictoria/wcl@1.0.0-beta.282/src/assets/icons/bullet.svg" /> استقلال
+      </li>
+      <li>
+        <img alt="" src="https://unpkg.com/@worksafevictoria/wcl@1.0.0-beta.282/src/assets/icons/bullet.svg" /> تخفيف الآلام أو الانزعاج
+      </li>
+    </ul>
+    <h2>Ordered Styled list with all default</h2>
+    <ol class="styled-list">
+      <li>Coffee</li>
+      <li>Tea
+        <ol type="lower-a">
+          <li>Black tea</li>
+          <li>Green tea</li>
+        </ol>
+      </li>
+      <li>Milk</li>
+    </ol>
+    <ol class="styled-list rtl">
+      <li>Coffee</li>
+      <li>Tea
+        <ol type="lower-a">
+          <li>Black tea</li>
+          <li>Green tea</li>
+        </ol>
+      </li>
+      <li>Milk</li>
+    </ol>
+    <h2>type number</h2>
+    <ol class="styled-list" type="number">
+      <li>Coffee</li>
+      <li>Tea</li>
+      <li>Milk</li>
+    </ol>
+    <h2>type upper-a</h2>
+    <ol class="styled-list" type="upper-a">
+      <li>Coffee</li>
+      <li>Tea</li>
+      <li>Milk</li>
+    </ol>
+    <h2>type lower-a</h2>
+    <ol class="styled-list" type="lower-a">
+      <li>Coffee</li>
+      <li>Tea</li>
+      <li>Milk</li>
+    </ol>
+    <h2>type upper-i</h2>
+    <ol class="styled-list" type="upper-i">
+      <li>Coffee</li>
+      <li>Tea</li>
+      <li>Milk</li>
+    </ol>
+    <h2>type lower-i</h2>
+    <ol class="styled-list" type="lower-i">
+      <li>Coffee</li>
+      <li>Tea</li>
+      <li>Milk</li>
+    </ol>
+
+    <h2>Definition List</h2>
+    <dl>
+      <dt>Coffee</dt>
+      <dd>Black hot drink</dd>
+      <dt>Milk</dt>
+      <dd>White cold drink</dd>
+      <dt>Coffee</dt>
+      <dd>Black hot drink</dd>
+      <dt>Milk</dt>
+      <dd>White cold drink</dd>
+      <dt>Coffee</dt>
+      <dd>Black hot drink</dd>
+      <dt>Milk</dt>
+      <dd>White cold drink</dd>
+      <dt>Coffee</dt>
+      <dd>Black hot drink</dd>
+      <dt>Milk</dt>
+      <dd>White cold drink</dd>
+      <dt>Coffee</dt>
+      <dd>Black hot drink</dd>
+      <dt>Milk</dt>
+      <dd>White cold drink</dd>
+    </dl>
+    <dl class="rtl">
+      <dt>إمكانية التنقل</dt>
+      <dd>تخفيف الآلام أو الانزعاج</dd>
+      <dt>إمكانية التنقل</dt>
+      <dd>تخفيف الآلام أو الانزعاج</dd>
+      <dt>إمكانية التنقل</dt>
+      <dd>تخفيف الآلام أو الانزعاج</dd>
+      <dt>إمكانية التنقل</dt>
+      <dd>تخفيف الآلام أو الانزعاج</dd>
+      <dt>إمكانية التنقل</dt>
+      <dd>تخفيف الآلام أو الانزعاج</dd>
+      <dt>إمكانية التنقل</dt>
+      <dd>تخفيف الآلام أو الانزعاج</dd>
+      <dt>إمكانية التنقل</dt>
+      <dd>تخفيف الآلام أو الانزعاج</dd>
+      <dt>إمكانية التنقل</dt>
+      <dd>تخفيف الآلام أو الانزعاج</dd>
+      <dt>إمكانية التنقل</dt>
+      <dd>تخفيف الآلام أو الانزعاج</dd>
+      <dt>إمكانية التنقل</dt>
+      <dd>تخفيف الآلام أو الانزعاج</dd>
+    </dl>`
+}
+
+export default {
+  title: 'SubComponents/RichText',
+  component: RichText
+}
+
+export const WYSIWYG = {
+  args: {
+    rtl: false,
+    content: mockData,
+    stripHtml: false,
+    tag: 'div',
+    tagClass: 'some-tag-class'
+  }
+}

package/src/components/Paragraphs/RichText/index.vue

@@ -0,0 +1,113 @@
+<!-- eslint-disable vue/no-v-html -->
+<template>
+  <div
+    class="wcl-rich-text wysiwyg"
+    :class="{ ['wcl-rich-text--rtl']: rtl, ['wcl-rich-text--ltr']: !rtl }"
+  >
+    <component
+      :is="tag"
+      v-if="html"
+      :class="tagClass"
+      v-bind="$attrs"
+    >
+      <div v-html="html"></div>
+    </component>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'RichText',
+
+  props: {
+    content: {
+      type: [Object, String],
+      required: true
+    },
+    tag: {
+      type: String,
+      default: 'div'
+    },
+    tagClass: {
+      type: String,
+      default: ''
+    },
+    stripHtml: {
+      type: Boolean,
+      default: false
+    },
+    rtl: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    html() {
+      let contentVar = this.content
+      if (contentVar) {
+        if (typeof contentVar === 'string') {
+          contentVar = contentVar
+        } else if (typeof contentVar === 'object') {
+          contentVar = contentVar.processed
+        }
+      }
+
+      if (contentVar && this.stripHtml) {
+        contentVar = contentVar
+          .replace(/<a.*?>.*?<\/a>/gi, '') // remove links
+          .replace(/(<([^>]+)>)/gi, '') // remove opening and closing html tags
+          .replace(/(\r\n|\n|\r)/gm, ' ') // remove line breaks
+      }
+
+      if (contentVar && !contentVar.startsWith('<') && !this.tag?.startsWith('h')) {
+        contentVar = `<p>${contentVar}</p>`
+      }
+
+      return contentVar
+    }
+  },
+  mounted() {
+    var tablesDetected = document.getElementsByClassName('table-stacked')
+    if (tablesDetected) {
+      // Iterate thru each table
+      for (let t = 0; t < tablesDetected.length; t++) {
+        // Iterate thru each row of the table
+        for (let r = 0, row; (row = tablesDetected[t].rows[r]); r++) {
+          // grab the first row and the column names from that row
+          if (r === 0) {
+            var columnNames = []
+            for (let h = 0, heading; (heading = row.cells[h]); h++) {
+              columnNames[h] = heading.innerText
+            }
+            continue
+          }
+          // // Iterate thru each cell in the row
+          for (let c = 0, col; (col = row.cells[c]); c++) {
+            col.innerHTML = `<span class="hidden-md">
+              ${columnNames[c]}:
+              </span>
+              ${col.innerHTML}`
+          }
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../../includes/scss/all';
+
+.wcl-rich-text {
+  display: inline-block;
+
+  &--rtl {
+    @include makeRTL();
+    float: right;
+  }
+}
+@import './scss/base.scss';
+@import './scss/styled-list.scss';
+@import './scss/definition-list.scss';
+@import './scss/table.scss';
+</style>