From caaf7baff0b5995ef6c8fef213f1ec7af34ca911 Mon Sep 17 00:00:00 2001
From: Derick Montague <derick.montague@ibm.com>
Date: Fri, 9 Oct 2020 11:17:48 -0500
Subject: Fix documentation render bug

Using the i18n module in the BVToastMixin file caused an issue with
VuePress that resulted in the static files not being created and the
documentation rendering as a blank page.

- Removed the import of the BVToastMixin
- Copied BVToastMixin to docs components and removed i18n
- Copied the StatusIcon to docs components to so icons will render
with the correct fill color in the toast notifications

GitHub Issue: https://github.com/openbmc/webui-vue/issues/40

Signed-off-by: Derick Montague <derick.montague@ibm.com>
Change-Id: Ie479df17d529ad2803c41e7442801e13601a0a02
---
 docs/.vuepress/components/BmcToasts.vue            |  2 +-
 .../components/app-imports/BVToastMixin.js         | 58 ++++++++++++++++++++
 .../components/app-imports/StatusIcon.vue          | 61 ++++++++++++++++++++++
 3 files changed, 120 insertions(+), 1 deletion(-)
 create mode 100644 docs/.vuepress/components/app-imports/BVToastMixin.js
 create mode 100644 docs/.vuepress/components/app-imports/StatusIcon.vue

(limited to 'docs/.vuepress/components')

diff --git a/docs/.vuepress/components/BmcToasts.vue b/docs/.vuepress/components/BmcToasts.vue
index 4c9d30f3..6f90d1f1 100644
--- a/docs/.vuepress/components/BmcToasts.vue
+++ b/docs/.vuepress/components/BmcToasts.vue
@@ -8,7 +8,7 @@
 </template>
 
 <script>
-import BVToastMixin from '@/src/components/Mixins/BVToastMixin';
+import BVToastMixin from './app-imports/BVToastMixin';
 export default {
     name: 'BmcToasts',
     mixins: [BVToastMixin],
diff --git a/docs/.vuepress/components/app-imports/BVToastMixin.js b/docs/.vuepress/components/app-imports/BVToastMixin.js
new file mode 100644
index 00000000..10075658
--- /dev/null
+++ b/docs/.vuepress/components/app-imports/BVToastMixin.js
@@ -0,0 +1,58 @@
+import StatusIcon from './StatusIcon';
+const BVToastMixin = {
+  components: {
+    StatusIcon
+  },
+  methods: {
+    toastTitle(title, status) {
+      // Create title with icon
+      const titleWithIcon = this.$createElement(
+        'strong',
+        { class: 'toast-icon' },
+        [
+          this.$createElement('StatusIcon', { props: { status: status } }),
+          title
+        ]
+      );
+      return titleWithIcon;
+    },
+    successToast(message, title = 'Success') {
+      this.$root.$bvToast.toast(message, {
+        title: this.toastTitle(title, 'success'),
+        variant: 'success',
+        autoHideDelay: 10000, //auto hide in milliseconds
+        isStatus: true,
+        solid: true
+      });
+    },
+    errorToast(message, title = 'Error') {
+      this.$root.$bvToast.toast(message, {
+        title: this.toastTitle(title, 'danger'),
+        variant: 'danger',
+        noAutoHide: true,
+        isStatus: true,
+        solid: true
+      });
+    },
+    warningToast(message, title = 'Warning') {
+      this.$root.$bvToast.toast(message, {
+        title: this.toastTitle(title, 'warning'),
+        variant: 'warning',
+        noAutoHide: true,
+        isStatus: true,
+        solid: true
+      });
+    },
+    infoToast(message, title = 'Informational') {
+      this.$root.$bvToast.toast(message, {
+        title: this.toastTitle(title, 'info'),
+        variant: 'info',
+        noAutoHide: true,
+        isStatus: true,
+        solid: true
+      });
+    }
+  }
+};
+
+export default BVToastMixin;
diff --git a/docs/.vuepress/components/app-imports/StatusIcon.vue b/docs/.vuepress/components/app-imports/StatusIcon.vue
new file mode 100644
index 00000000..954e4775
--- /dev/null
+++ b/docs/.vuepress/components/app-imports/StatusIcon.vue
@@ -0,0 +1,61 @@
+<template>
+  <span :class="['status-icon', status]">
+    <icon-info v-if="status === 'info'" />
+    <icon-success v-else-if="status === 'success'" />
+    <icon-warning v-else-if="status === 'warning'" />
+    <icon-danger v-else-if="status === 'danger'" />
+    <icon-secondary v-else />
+  </span>
+</template>
+
+<script>
+import IconInfo from '@carbon/icons-vue/es/information--filled/20';
+import IconCheckmark from '@carbon/icons-vue/es/checkmark--filled/20';
+import IconWarning from '@carbon/icons-vue/es/warning--filled/20';
+import IconError from '@carbon/icons-vue/es/error--filled/20';
+import IconMisuse from '@carbon/icons-vue/es/misuse/20';
+
+export default {
+  name: 'StatusIcon',
+  components: {
+    IconInfo: IconInfo,
+    iconSuccess: IconCheckmark,
+    iconDanger: IconMisuse,
+    iconSecondary: IconError,
+    iconWarning: IconWarning
+  },
+  props: {
+    status: {
+      type: String,
+      default: ''
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import "src/assets/styles/bmc/helpers";
+@import "src/assets/styles/bootstrap/helpers";
+.status-icon {
+  vertical-align: text-bottom;
+  &.info {
+    fill: theme-color('info');
+  }
+  &.success {
+    fill: theme-color('success');
+  }
+  &.danger {
+    fill: theme-color('danger');
+  }
+  &.secondary {
+    fill: gray('600');
+
+    svg {
+      transform: rotate(-45deg);
+    }
+  }
+  &.warning {
+    fill: theme-color('warning');
+  }
+}
+</style>
-- 
cgit v1.2.3