feat(Alert): add new bordered style (previously called border)

- deprecate `border` props in favor of new `bordered` prop

packages/alert/src/VAlert.stories.ts

@@ -20,13 +20,6 @@ export default {
     },
   },
   args: {
-    modelValue: '',
-    label: 'Alert text',
-    dismissable: false,
-    solid: false,
-    outlined: false,
-    icon: '',
-    border: '',
   },
 } as Meta;
 
@@ -39,7 +32,14 @@ const Template: Story = (args) => ({
   },
   template: `
 <div class="space-y-2">
-  <my-component v-for="color in themeColors" :key="color" v-bind="args" :color="color">{{ args.label }}</my-component>
+  <my-component
+    v-for="color in themeColors"
+    :key="color"
+    v-bind="args"
+    :color="color"
+  >
+    You changes have been saved.
+  </my-component>
 </div>
 `,
 });
@@ -89,6 +89,8 @@ Outlined.parameters = {
 export const Bordered = Template.bind({});
 Bordered.args = {
   border: true,
+  dismissable: true,
+  icon: 'ic:round-info'
 };
 Bordered.parameters = {
   docs: {
@@ -98,6 +100,39 @@ Bordered.parameters = {
   },
 };
 
+export const BorderPosition = (args: any) => ({
+  components: {VAlert, VAlertTitle, Icon},
+  setup() {
+    const positions = ['left', 'top', 'right', 'bottom']
+    return {args, positions};
+  },
+  template: `
+    <v-alert
+      v-for="position in positions"
+      :key="position"
+      :border-position="position"
+      class="mb-2"
+      bordered
+      v-bind="args"
+    >
+      <VAlertTitle>Alert: {{ position }}<VAlertTitle>
+      Change a few things up and try submitting again.
+    </v-alert>
+  `,
+});
+
+export const Tile = Template.bind({});
+Tile.args = {
+  tile: true,
+};
+Tile.parameters = {
+  docs: {
+    source: {
+      code: `<v-alert tile>Alert text</v-alert>`,
+    },
+  },
+};
+
 export const Dismissable = Template.bind({});
 Dismissable.args = {
   dismissable: true,
@@ -276,4 +311,4 @@ export const Group: StoryFn<typeof VAlert> = (args) => ({
       </VAlertGroup>
     </div>
   `,
-});
+});

packages/alert/src/VAlert.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import {computed, toRefs, ref, watch, provide, onMounted} from 'vue';
+import {computed, toRefs, ref, watch, provide, onMounted, PropType} from 'vue';
 import Icon from '@morpheme/icon';
 import {AlertSymbol} from './api';
 
@@ -35,6 +35,9 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  /**
+   * @deprecated Use `bordered` instead
+   */
   border: {
     type: [String, Boolean],
     default: false,
@@ -51,6 +54,18 @@ const props = defineProps({
     type: String,
     default: 'xs',
   },
+  tile: {
+    type: Boolean,
+    default: false,
+  },
+  bordered: {
+    type: Boolean,
+    default: false,
+  },
+  borderPosition: {
+    type: String as PropType<'top' | 'bottom' | 'left' | 'right'>,
+    default: 'left',
+  },
 });
 
 const {modelValue, color} = toRefs(props);
@@ -74,10 +89,13 @@ watch(isOpen, (val) => {
 const classes = computed(() => {
   return [
     `alert-${props.color}`,
+    `alert__bordered--${props.borderPosition}`,
     {
       'alert--outlined': props.outlined,
       'alert--solid': props.solid,
-      'alert--bordered': props.border,
+      'alert--bordered': props.border || props.bordered,
+      'alert__bordered': props.border || props.bordered,
+      'alert--tile': props.tile
     },
   ];
 });

packages/themes/src/morpheme/_alert.scss

@@ -33,6 +33,10 @@
   font-size: var(--alert-font-size);
   line-height: var(--alert-line-height);
 
+  &--tile {
+    --alert-border-radius: 0;
+  }
+
   // Element
   &-content {
     flex: 1;
@@ -251,4 +255,57 @@
     font-weight: var(--alert-title-font-weight, 600);
     margin-bottom: var(--alert-title-margin-bottom, 4px);
   }
+
+  // bordered
+  &__bordered {
+    border-width: 1px;
+    border-style: solid;
+    border-color: var(--alert-border-color);
+    --alert-border-width: 4px;
+
+    &--top {
+      border-top-width: var(--alert-border-width);
+    }
+
+    &--right {
+      border-right-width: var(--alert-border-width);
+    }
+
+    &--bottom {
+      border-bottom-width: var(--alert-border-width);
+    }
+
+    &--left {
+      border-left-width: var(--alert-border-width);
+    }
+
+    // Colors
+    &.alert-primary {
+      --alert-border-color: var(--color-primary-500);
+    }
+
+    &.alert-secondary {
+      --alert-border-color: var(--color-secondary-500);
+    }
+
+    &.alert-info {
+      --alert-border-color: var(--color-info-500);
+    }
+
+    &.alert-warning {
+      --alert-border-color: var(--color-warning-500);
+    }
+
+    &.alert-success {
+      --alert-border-color: var(--color-success-500);
+    }
+
+    &.alert-error {
+      --alert-border-color: var(--color-error-500);
+    }
+
+    &.alert-dark {
+      --alert-border-color: var(--color-gray-500);
+    }
+  }
 }