feat: Add a popup component for announcements (#4615)

app/javascript/dashboard/components/ui/AnnouncementPopup.vue

@@ -0,0 +1,88 @@
+<template>
+  <div class="announcement-popup">
+    <span v-if="popupMessage" class="popup-content">
+      {{ popupMessage }}
+      <span v-if="routeText" class="route-url" @click="onClickOpenPath">
+        {{ routeText }}
+      </span>
+    </span>
+    <div v-if="hasCloseButton" class="popup-close">
+      <woot-button
+        v-if="hasCloseButton"
+        color-scheme="primary"
+        variant="link"
+        size="small"
+        @click="onClickClose"
+      >
+        {{ closeButtonText }}
+      </woot-button>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    popupMessage: {
+      type: String,
+      default: '',
+    },
+    routeText: {
+      type: String,
+      default: '',
+    },
+    hasCloseButton: {
+      type: Boolean,
+      default: true,
+    },
+    closeButtonText: {
+      type: String,
+      default: '',
+    },
+  },
+  methods: {
+    onClickOpenPath() {
+      this.$emit('open');
+    },
+    onClickClose(e) {
+      this.$emit('close', e);
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+.announcement-popup {
+  max-width: 24rem;
+  min-width: 16rem;
+  display: flex;
+  position: absolute;
+  flex-direction: column;
+  align-items: flex-start;
+  height: fit-content;
+  background: var(--white);
+  padding: 0 var(--space-normal);
+  z-index: var(--z-index-much-higher);
+  box-shadow: var(--b-200) 4px 4px 16px 4px;
+  border-radius: var(--border-radius-normal);
+
+  .popup-content {
+    font-size: var(--font-size-mini);
+    color: var(--s-700);
+    padding: var(--space-one) 0;
+    .route-url {
+      font-size: var(--font-size-mini);
+      color: var(--s-600);
+      cursor: pointer;
+      text-decoration: underline;
+    }
+  }
+
+  .popup-close {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    padding: var(--space-one) 0;
+    border-top: 1px solid var(--color-border-light);
+  }
+}
+</style>

app/javascript/dashboard/components/ui/stories/AnnouncementPopup.stories.js

@@ -0,0 +1,46 @@
+import { action } from '@storybook/addon-actions';
+import WootAnnouncementPopup from '../AnnouncementPopup.vue';
+
+export default {
+  title: 'Components/Popup/Announcement Popup',
+  argTypes: {
+    popupMessage: {
+      defaultValue:
+        'Now a new key shortcut (⌘ + ↵) is available to send messages. You can enable it in the',
+      control: {
+        type: 'text',
+      },
+    },
+    routeText: {
+      defaultValue: 'profile settings',
+      control: {
+        type: 'text',
+      },
+    },
+    hasCloseButton: {
+      defaultValue: true,
+      control: {
+        type: 'boolean',
+      },
+    },
+    closeButtonText: {
+      defaultValue: 'Got it',
+      control: {
+        type: 'text',
+      },
+    },
+  },
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { WootAnnouncementPopup },
+  template:
+    '<woot-announcement-popup v-bind="$props" @open="onClickOpenPath" @close="onClickClose"></woot-announcement-popup>',
+});
+
+export const AnnouncementPopup = Template.bind({});
+AnnouncementPopup.args = {
+  onClickOpenPath: action('opened path'),
+  onClickClose: action('closed the popup'),
+};