@vcita/design-system 1.17.11 → 1.17.13

package/dist/{vue2-pdf-embed-5bd16a3c.js → vue2-pdf-embed-fadf09e1.js}

@@ -1,4 +1,4 @@
-import { aY as getDefaultExportFromCjs, aZ as createCommonjsModule } from './entry-895c8c40.js';
+import { aY as getDefaultExportFromCjs, aZ as createCommonjsModule } from './entry-1a9ab185.js';
 
 function _mergeNamespaces(n, m) {
 	m.forEach(function (e) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vcita/design-system",
-  "version": "1.17.11",
+  "version": "1.17.13",
   "description": "vcita design system",
   "author": "vcita",
   "scripts": {

package/src/components/VcAlert/VcAlert.stories.js

@@ -155,7 +155,7 @@ const slotTemplate = (args, {argTypes}) => ({
       >
         <template v-slot:body>
             Here's an example of a body slot, here you can use other components.
-            <VcLink label="e.g VcLink component" url="https://www.vcita.com"/>
+            <VcLink class="d-inline-flex" label="e.g VcLink component" url="https://www.vcita.com"/>
         </template>
       </VcAlert>
       `,
@@ -185,7 +185,7 @@ export default {
     parameters: {
         design: {
             type: 'figma',
-            url: 'https://www.figma.com/file/xIOY6fBoA1wpy1tHv3i5js/vcita---ui-library?node-id=1863%3A1405',
+            url: 'https://www.figma.com/file/xIOY6fBoA1wpy1tHv3i5js/vcita---ui-library?node-id=251-918',
         },
         status: {
             type: 'stable', // 'beta' | 'stable' | 'deprecated' | 'releaseCandidate'

package/src/components/VcAlert/VcAlert.vue

@@ -10,13 +10,11 @@
         {{ headerText }}
       </span>
       <span>
-        <slot name="body">
-          <span class="alert-body"
-                :class="{'alert-body--with-inline-action': inlineActionText}"
-                v-if="bodyText"
-                v-html="getBodyText">
-          </span>
-        </slot>
+        <span class="alert-body" :class="{'alert-body--with-inline-action': inlineActionText}">
+          <slot name="body">
+            <span v-if="bodyText" v-html="getBodyText"></span>
+          </slot>
+        </span>
         <span class="inline-action"
                     v-if="inlineActionText"
                     @click="$emit('onInlineAction')">
@@ -315,7 +313,7 @@ export default {
     color: var(--gray-darken-5);
 
     a {
-      color: -webkit-link;
+      color: var(--link-color);
     }
 
     &--with-inline-action {

package/src/components/VcLink/VcLink.vue

@@ -43,7 +43,7 @@ export default {
     target:{
       type: String,
       default: '_blank',
-      validator: prop => ['_blank', '_self', '_parent', '_top', '_system'].includes(prop)
+      validator: target => ['_blank', '_self', '_parent', '_top', '_system'].includes(target)
     },
     disabled: {
       type: Boolean,
@@ -56,13 +56,14 @@ export default {
 <style lang="scss" scoped>
 
 .VcLink {
+  // FIXME: Change to inline-flex https://myvcita.atlassian.net/browse/VCITA2-2648
   display: flex;
   align-items: center;
   font-size: var(--font-size-x-small);
   font-weight: var(--font-weight-medium2);
   padding-top: var(--size-value1);
   text-decoration: none;
-  color: var(--blue);
+  color: var(--link-color);
 
   &.link-secondary {
     color: var(--gray-darken-4);
@@ -84,7 +85,7 @@ export default {
   .VcLink-icon {
     ::v-deep {
       svg path {
-        fill: var(--blue);
+        fill: var(--link-color);
       }
     }
   }

package/styles/variables.scss

@@ -184,6 +184,8 @@
   --shadow-8: 0px 5px 7px 3px rgba(0, 0, 0, 0.26);
   --shadow-9: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 2px 13px 19px 2px rgba(0, 0, 0, 0.14), 0px 5px 24px rgba(0, 0, 0, 0.12);
   --shadow-10: 0px 4px 8px #cccccc;
+
+  --link-color: #1155CC;
 }
 
 @import "additional-colors.scss";