feat: ribbon component

packages/documentation/components/ribbon/ribbon.doc.md

@@ -11,7 +11,7 @@ It can be used to highlight a new feature, a promotion, a warning, or a call to
 
 ## Ribbon types
 
-There are 4 types of ribbons: `info`, `warning`, `critical`, and `error`.
+There are 6 types of ribbons: `info`, `success`, `warning`, `critical`, `danger` and `neutral`
 
 <RibbonTypes />
 
@@ -21,6 +21,10 @@ Set `hide-close` to hide the close button
 
 <RibbonWithoutClose />
 
+::: details Source code
+<<< ../../../examples/demos/ribbon/RibbonWithoutClose.vue
+:::
+
 ## Related components
 
 - [Alert](/components/alert/alert.doc)

packages/documentation/components/ribbon/ribbon.md

@@ -11,20 +11,16 @@ description: This file is generated automatically from the source code. Changes
 
 ## Props
 
-| Prop name   | Description           | Type                                                      | Values | Default |
-| ----------- | --------------------- | --------------------------------------------------------- | ------ | ------- |
-| alerts      | List of alerts        | Array                                                     | -      |         |
-| variant     |                       | "info" \| "success" \| "warning" \| "critical" \| "error" | -      |         |
-| title       | The alert title       | string                                                    | -      |         |
-| description | The alert message     | string                                                    | -      |         |
-| hideClose   | Hide the close button | boolean                                                   | -      |         |
-| closeable   | Show the close button | boolean                                                   | -      |         |
+| Prop name | Description           | Type    | Values                                                                                                                 | Default |
+| --------- | --------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------- | ------- |
+| alerts    | List of alerts        | Array   | [{ description: string, type: string, link?: { href: string, target?: string, title: string, click: () => void } }] | []      |
+| hideClose | Hide the close button | boolean | true, false                                                                                                            | false   |
 
 ## Events
 
-| Event name | Properties                                                                                   | Description                        |
-| ---------- | -------------------------------------------------------------------------------------------- | ---------------------------------- |
-| close      | **eventName** `string` - The name of the event<br/>**alertIndex** `number` - The alert index | Triggered when the alert is closed |
+| Event name | Properties                                | Description                        |
+| ---------- | ----------------------------------------- | ---------------------------------- |
+| close      | **alertIndex** `number` - The alert index | Triggered when the alert is closed |
 
 ## Slots
 

packages/examples/demos/ribbon/RibbonBasic.vue

@@ -1,7 +1,8 @@
 <script setup>
-  import Ribbon from '@/components/ribbon/ribbon.vue';
+  import AcvRibbon from '@/components/ribbon/ribbon.vue';
+  import { reactive } from 'vue';
 
-  const alerts = [
+  const alerts = reactive([
     {
       description: `Data center maintenance is scheduled for ${new Date()}. For more details, refer to the`,
       type: 'info',
@@ -12,17 +13,24 @@
       }
     },
     {
-      description: `Data center maintenance is scheduled for ${new Date()}. For more details, refer to the`,
+      description: `Data center`,
       type: 'critical',
       link: {
         href: 'https://www.acronis.com/en-sg/',
         target: '_blank',
         title: 'About Page'
       }
     }
-  ];
+  ]);
+
+  function onClose(index) {
+    alerts.splice(index, 1);
+  }
 </script>
 
 <template>
-  <Ribbon :alerts="alerts" />
+  <AcvRibbon
+    :alerts="alerts"
+    @close="onClose"
+  />
 </template>

packages/examples/demos/ribbon/RibbonTypes.vue

@@ -1,58 +1,42 @@
 <script setup>
-  import Link from '@/components/link/link.vue';
-  import Ribbon from '@/components/ribbon/ribbon.vue';
+  import AcvRibbon from '@/components/ribbon/ribbon.vue';
+  import { reactive } from 'vue';
 
-  let ribbons = [
+  const ribbons = reactive([
     {
-      title: 'This is a title.',
-      description: 'This is a description.',
-      variant: 'info'
+      description: 'Informational message.',
+      type: 'info'
     },
     {
-      title: 'This is a title.',
-      description: 'This is a description.',
-      variant: 'success'
+      description: 'Success message.',
+      type: 'success'
     },
     {
-      title: 'This is a title.',
-      description: 'This is a description.',
-      variant: 'warning'
+      description: 'Warning message.',
+      type: 'warning'
     },
     {
-      title: 'This is a title.',
-      description: 'This is a description.',
-      variant: 'critical'
+      description: 'Critical message.',
+      type: 'critical'
     },
     {
-      title: 'This is a title.',
-      description: 'This is a description.',
-      variant: 'error'
+      description: 'Danger message.',
+      type: 'danger'
     },
     {
-      title: 'This is a title.',
-      description: 'This is a description.',
-      variant: 'unknown'
+      description: 'Neutral message.',
+      type: 'neutral'
     }
-  ];
+  ]);
 
   function onClose(index) {
-    ribbons = ribbons.filter((_, i) => i !== index);
+    ribbons.splice(index, 1);
   }
 </script>
 
 <template>
-  <Ribbon
-    v-for="(ribbon, index) in ribbons"
-    :key="index"
-    :variant="ribbon.variant"
-    :title="ribbon.title"
-    :description="ribbon.description"
-    show-close
+  <AcvRibbon
+    :alerts="ribbons"
     @close="onClose"
-  >
-    <template #actions>
-      <span><Link>First action</Link></span>
-      <Link>Second action</Link>
-    </template>
-  </Ribbon>
+  />
 </template>

packages/examples/demos/ribbon/RibbonWithoutClose.vue

@@ -1,12 +1,13 @@
 <script setup>
-  import Ribbon from '@/components/ribbon/ribbon.vue';
-  import { reactive, ref } from 'vue';
+  import AcvDialog from '@/components/dialog/dialog.vue';
+  import AcvRibbon from '@/components/ribbon/ribbon.vue';
+  import { ref } from 'vue';
 
   const currentDate = new Intl
     .DateTimeFormat('en-GB', { dateStyle: 'long', timeStyle: 'short' })
     .format(new Date().setHours(new Date().getHours() + 6));
 
-  let ribbons = reactive([
+  const ribbons = [
     {
       description: 'Please note that the examples below just represent the html markup.',
       type: 'success',
@@ -25,35 +26,41 @@
       }
     },
     {
-      description: 'Description 1',
+      description: 'A critical message.',
       type: 'critical'
     },
     {
-      description: 'Description 2',
+      description: 'A warning message.',
       type: 'warning'
     },
     {
-      description: 'Description 3',
+      description: 'A success message.',
       type: 'success'
     }
-  ]);
+  ];
 
   const showDialog = ref(false);
 
   function onShowDialog() {
     showDialog.value = !showDialog.value;
   }
-
-  function onClose(index) {
-    ribbons = ribbons.filter((_, i) => i !== index);
-  }
 </script>
 
 <template>
-  <Ribbon
-    :alerts="ribbons"
-    hide-close
-    class="pb-16"
-    @close="onClose"
-  />
+  <div>
+    <AcvRibbon
+      :alerts="ribbons"
+      hide-close
+      class="pb-16"
+      @close="onClose"
+    />
+    <AcvDialog
+      v-model="showDialog"
+      title="Dialog title"
+    >
+      <div class="px-24 py-16">
+        {{ "Dialog body" }}
+      </div>
+    </AcvDialog>
+  </div>
 </template>

packages/ui/src/components/ribbon/ribbon.cy.ts

@@ -0,0 +1,11 @@
+/* TODO: Temporarily commented out, due to issues with updating snapshots */
+// import { mount } from '@cypress/vue';
+// import RibbonBasic from '../../../../examples/demos/ribbon/RibbonBasic.vue';
+
+// describe('Ribbon', () => {
+//   it('Ribbon component basic', () => {
+//     mount(RibbonBasic as any);
+
+//     cy.matchImageSnapshot(`ribbon-basic`);
+//   });
+// });

packages/ui/src/components/ribbon/ribbon.spec.ts

@@ -9,11 +9,7 @@ describe('test Ribbon component', () => {
     expect(wrapper.props()).toMatchInlineSnapshot(`
       {
         "alerts": undefined,
-        "closeable": false,
-        "description": undefined,
         "hideClose": false,
-        "title": undefined,
-        "variant": undefined,
       }
     `);
   });
@@ -28,11 +24,7 @@ describe('test Ribbon component', () => {
     expect(wrapper.props()).toMatchInlineSnapshot(`
       {
         "alerts": undefined,
-        "closeable": false,
-        "description": undefined,
         "hideClose": false,
-        "title": "test",
-        "variant": undefined,
       }
     `);
   });

packages/ui/src/components/ribbon/ribbon.ts

@@ -1,22 +1,28 @@
-export interface AcvRibbonAlert {
-  /**
-   * The alert title
-   */
-  title: string
+export const TYPE = {
+  info: 'info',
+  success: 'success',
+  warning: 'warning',
+  critical: 'critical',
+  danger: 'danger',
+  neutral: 'neutral',
+} as const;
+
+export type AcvRibbonType = keyof typeof TYPE;
 
+export interface AcvRibbonAlert {
   /**
    * The alert message
    */
   description: string
   /**
    * The alert type
    */
-  type: 'info' | 'success' | 'warning' | 'critical' | 'error'
+  type: AcvRibbonType
 
   /**
    * The alert link
    */
-  link: AcvRibbonLink
+  link?: AcvRibbonLink
 }
 
 export interface AcvRibbonLink {
@@ -29,36 +35,22 @@ export interface AcvRibbonLink {
 export interface AcvRibbonProps {
   /**
    * List of alerts
+   * @values [{ description: string, type: string, link?: { href: string, target?: string, title: string, click: () => void } }]
+   * @defaultValue []
    */
   alerts?: AcvRibbonAlert[]
 
-  variant?: 'info' | 'success' | 'warning' | 'critical' | 'error'
-
-  /**
-   * The alert title
-   */
-  title?: string
-
-  /**
-   * The alert message
-   */
-  description?: string
-
   /**
    * Hide the close button
+   * @values true, false
+   * @defaultValue false
    */
   hideClose?: boolean
-
-  /**
-   * Show the close button
-   */
-  closeable?: boolean
 }
 
 export interface AcvRibbonEvents {
   /**
    * Triggered when the alert is closed
-   * @arg {string} eventName - The name of the event
    * @arg {number} alertIndex - The alert index
    */
   (eventName: 'close', alertIndex: number): void