@everchron/ec-shards 7.4.16 → 7.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everchron/ec-shards",
-  "version": "7.4.16",
+  "version": "7.5.0",
   "private": false,
   "description": "Everchron Shards UI Library",
   "repository": "https://github.com/everchron/ec-shards.git",

package/src/components/banner/banner.vue

@@ -0,0 +1,174 @@
+<template>
+  <div
+    v-if="show"
+    class="ecs-banner"
+    :class="[type, fixed]"
+    role="alert"
+  >
+    <slot></slot>
+    <button
+      v-if="dismissable"
+      @click="dismiss"
+      :style="dismissButtonStyle"
+      class="close"
+      aria-label="Dismiss"
+    >
+      <ecs-icon type="close" size="20" />
+      <ecs-focus-ring />
+    </button>
+  </div>
+</template>
+
+<script>
+import EcsIcon from '../icon/icon'
+import EcsFocusRing from '../mixins/focus-ring'
+
+export default {
+  components: { EcsIcon, EcsFocusRing },
+
+  props: {
+    /** The alert variant, which defines it's background color. */
+    type: {
+      type: String,
+      validator: v => ['success', 'info', 'error', 'warning', 'important'].includes(v),
+      default: 'warning'
+    },
+    /** When set to true, a close button is displayed which allows the user to dismiss the alert. */
+    dismissable: {
+      type: Boolean,
+      default: false
+    },
+    /** If true, the alert will have no rounded corners and no margins. This is usefull when the alert directly touches other UI elements. */
+    fixed: {
+      type: Boolean,
+      default: true
+    }
+  },
+
+  data() {
+    return {
+      dismissed: false
+    }
+  },
+
+  computed: {
+    show() {
+      return !this.dismissed
+    },
+
+    // Returns color and background color for the dismiss button. Based on the type prop.
+    // Refactor me with css variables.
+    dismissButtonStyle() {
+      switch (this.type) {
+        case 'success':
+          return {
+            color: '#004925',
+            backgroundColor: '#76E2AD'
+          }
+        case 'info':
+          return {
+            color: '#2A2D3D',
+            backgroundColor: '#A1A6B0'
+          }
+        case 'error':
+          return {
+            color: '#940014',
+            backgroundColor: '#FF99A6'
+          }
+        case 'warning':
+          return {
+            color: '#664B29',
+            backgroundColor: '#F1B251'
+          }
+        case 'important':
+          return {
+            color: '#003992',
+            backgroundColor: '#6BAFFF'
+          }
+      }
+    }
+  },
+
+  methods: {
+    dismiss() {
+      this.dismissed = true;
+      /** Emitted when the banner has been dismissed manually by the user. */
+      this.$emit('dismiss');
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "../../tokens/build/scss/tokens.scss";
+
+.ecs-banner {
+  position: relative;
+  font-size: $type-scale-2-font-size;
+  line-height: $type-scale-2-line-height;
+  font-weight: $font-weight-medium;
+  text-align: center;
+  color: #FFF;
+  padding: 6px $spacing-20;
+
+  &.fixed {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 9;
+  }
+
+  a{
+    text-decoration: underline;
+    color: #FFF;
+  }
+
+  &.info {
+    background-color: $color-gray-10;
+  }
+
+  &.error {
+    background-color: $color-red-10;
+  }
+
+  &.success {
+    background-color: $color-green-10;
+  }
+
+  &.warning {
+    background-color: $color-yellow-10;
+  }
+
+  &.important {
+    background-color: $color-blue-10;
+  }
+}
+
+.close {
+  position: absolute;
+  top: $spacing-5;
+  right: $spacing-5;
+  width: $spacing-25;
+  height: $spacing-25;
+  border-radius: $border-radius-medium;
+  color: inherit;
+  cursor: pointer;
+  padding: 0;
+  transition: .12s;
+
+  &:hover {
+    filter: brightness(1.2);
+  }
+
+  &:focus-visible {
+    z-index: 1;
+    outline: none;
+
+    .ecs-focus-ring {
+      display: block;
+    }
+  }
+}
+
+</style>

package/src/components/index.js

@@ -6,6 +6,7 @@ import EcsAlert from "./alert/alert.vue"
 import EcsActionToolbar from "./action-toolbar/action-toolbar.vue"
 import EcsAudio from "./audio/audio.vue"
 import EcsAvatar from "./avatar/avatar.vue"
+import EcsBanner from "./banner/banner.vue"
 import EcsBreadcrumb from "./breadcrumb/breadcrumb.vue"
 import EcsBreadcrumbButton from "./breadcrumb-button/breadcrumb-button.vue"
 import EcsBreadcrumbTitle from "./breadcrumb-title/breadcrumb-title.vue"
@@ -144,6 +145,7 @@ const Components = {
   EcsActionToolbar,
   EcsAudio,
   EcsAvatar,
+  EcsBanner,
   EcsBreadcrumb,
   EcsBreadcrumbButton,
   EcsBreadcrumbTitle,

package/src/stories/banner/banner.stories.js

@@ -0,0 +1,17 @@
+import EcsBanner from '@components/banner/banner';
+
+export default {
+  title: 'Feedback/Banner',
+  component: EcsBanner
+};
+
+export const types = () => ({
+  components: { EcsBanner },
+  template: `<div>
+              <ecs-banner type="success" dismissable>This is a success <a href="#">alert</a> — check it out!</ecs-banner>
+              <ecs-banner type="info" dismissable>This is an info alert — check it out!</ecs-banner>
+              <ecs-banner type="error" dismissable>This is an error alert — check it out!</ecs-banner>
+              <ecs-banner type="warning" dismissable>This is a warning alert — check it out!</ecs-banner>
+              <ecs-banner type="important" dismissable>This is an important alert — check it out!</ecs-banner>
+            </div>`,
+});