LITE-26563 add status component (#29)

Author: paulinaczybir

src/index.js

@@ -8,6 +8,7 @@ import card from './widgets/card/widget.vue';
 import icon from './widgets/icon/widget.vue';
 import view from './widgets/view/widget.vue';
 import navigation from './widgets/navigation/widget.vue';
+import status from './widgets/status/widget.vue';
 
 import _store from './core/store';
 import _bus from './core/eventBus';
@@ -19,6 +20,7 @@ export const Card = card;
 export const Icon = icon;
 export const View = view;
 export const Navigation = navigation;
+export const Status = status;
 
 export const bus = _bus;
 export const store = _store;

src/stories/Status.stories.js

@@ -0,0 +1,39 @@
+import Status from '~widgets/status/widget.vue';
+import registerWidget from '~core/registerWidget';
+
+import * as icons from '@cloudblueconnect/material-svg';
+
+registerWidget('ui-status', Status);
+
+export default {
+  title: 'Components/Status',
+  component: Status,
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    iconName: {
+      options: Object.keys(icons),
+      control: { 
+        type: 'select',
+      },
+    }
+  }
+};
+
+export const Component = {
+  render: (args) => ({
+    components: { Status },
+    setup() {
+      return { args };
+    },
+    template: '<ui-status style="font-size: 20px" v-bind="args"></ui-status>',
+  }),
+
+  args: {
+    text: 'Status text',
+    iconName: 'googleUpdateBaseline',
+    iconColor: 'green',
+    iconSize: '20',
+  }
+};

src/widgets/status/widget.vue

@@ -0,0 +1,67 @@
+<template>
+  <div class="status-mark">
+    <ui-icon
+      class="status-mark__icon"
+      :icon-name="iconName"
+      :color="iconColor"
+      :size="iconSize"
+    />
+    <span 
+      class="status-mark__text"
+    > {{ text }}
+    </span>
+  </div>
+</template>
+
+
+<script>
+import icon from '~widgets/icon/widget.vue';
+import registerWidget from '~core/registerWidget';
+registerWidget('ui-icon', icon);
+
+export default {
+  props: {
+    text: {
+      type: String,
+      default: '',
+    },
+
+    iconName: {
+      type: String,
+      default: '',
+    },
+
+    iconColor: {
+      type: String,
+      default: '#212121',
+    },
+
+    iconSize: {
+      type: [Number, String],
+      default: '16',
+    }
+  },
+};
+</script>
+
+
+<style lang="stylus">
+.status-mark {
+  display: inline-flex;
+  align-items: center;
+  vertical-align: middle;
+  font-size: 14px;
+  line-height: 20px;
+
+  &__icon {
+    margin-right: 4px;
+    flex: 0 0 auto;
+  }
+
+  &__text {
+    font-size: inherit;
+    line-height: inherit;
+    white-space: nowrap;
+  }
+}
+</style>