tide-design-system 2.4.4 → 2.4.5

package/index.ts

@@ -15,6 +15,7 @@ import TideChipFilter from '@/components/TideChipFilter.vue';
 import TideChipInput from '@/components/TideChipInput.vue';
 import TideColumns from '@/components/TideColumns.vue';
 import TideDivider from '@/components/TideDivider.vue';
+import TideForm from '@/components/TideForm.vue';
 import TideIcon from '@/components/TideIcon.vue';
 import TideImage from '@/components/TideImage.vue';
 import TideImageBackground from '@/components/TideImageBackground.vue';
@@ -159,6 +160,7 @@ export {
   TideChipInput,
   TideColumns,
   TideDivider,
+  TideForm,
   TideIcon,
   TideImage,
   TideImageBackground,

package/package.json

@@ -63,7 +63,7 @@
   "main": "dist/tide-design-system.cjs",
   "module": "dist/tide-design-system.esm.js",
   "types": "dist/tide-design-system.esm.d.ts",
-  "version": "2.4.4",
+  "version": "2.4.5",
   "dependencies": {
     "@floating-ui/vue": "^1.1.6"
   }

package/src/components/TideAlert.vue

@@ -1,9 +1,11 @@
 <script lang="ts" setup>
-  import { computed } from 'vue';
+  import { Comment, computed, useSlots } from 'vue';
 
   import TideButtonIcon from '@/components/TideButtonIcon.vue';
   import TideIcon from '@/components/TideIcon.vue';
+  import TideLink from '@/components/TideLink.vue';
   import { ALERT } from '@/types/Alert';
+  import { ELEMENT } from '@/types/Element';
   import { ICON } from '@/types/Icon';
   import { PRIORITY } from '@/types/Priority';
   import { SIZE } from '@/types/Size';
@@ -13,6 +15,7 @@
 
   type Props = {
     heading?: string;
+    ctaLabel?: string;
     isDismissible?: boolean;
     isToast?: boolean;
     type?: Alert;
@@ -20,9 +23,11 @@
 
   type Emits = {
     (event: 'close'): void;
+    (event: 'ctaClick'): void;
   };
 
   const props = withDefaults(defineProps<Props>(), {
+    ctaLabel: undefined,
     heading: undefined,
     isDismissible: true,
     isToast: false,
@@ -30,6 +35,15 @@
   });
 
   const emit = defineEmits<Emits>();
+  const slots = useSlots();
+  const hasBody = computed(() => {
+    const nodes = slots.default?.();
+    if (!nodes) return false;
+
+    return nodes.some(
+      (node) => node.type !== Comment && (typeof node.children !== 'string' || node.children.trim().length > 0)
+    );
+  });
 
   const iconType = computed(() => {
     if (props.type === ALERT.ERROR) return ICON.PRIORITY_HIGH;
@@ -78,8 +92,24 @@
       />
     </div>
 
-    <div :class="['tide-alert-heading', CSS.DISPLAY.FLEX, CSS.AXIS2.CENTER, CSS.FONT.ROLE.LABEL_1_SEMIBOLD]">
-      {{ props.heading }}
+    <div
+      :class="[
+        'tide-alert-heading',
+        CSS.DISPLAY.FLEX,
+        CSS.AXIS2.CENTER,
+        CSS.FLEX.DIRECTION.ROW,
+        !hasBody ? [CSS.AXIS1.BETWEEN, CSS.MARGIN.RIGHT.HALF] : '',
+      ]"
+    >
+      <span :class="CSS.FONT.ROLE.LABEL_2_SEMIBOLD">{{ props.heading }}</span>
+
+      <TideLink
+        :class="[CSS.FONT.ROLE.LINK_2]"
+        :element="ELEMENT.BUTTON"
+        :label="props.ctaLabel"
+        @click="emit('ctaClick')"
+        v-if="props.ctaLabel && !hasBody"
+      />
     </div>
 
     <TideButtonIcon
@@ -93,6 +123,19 @@
 
     <div :class="['tide-alert-body', CSS.FONT.ROLE.BODY_2, !props.isToast && CSS.FONT.COLOR.SURFACE.DEFAULT]">
       <slot />
+
+      <div
+        :class="[CSS.MARGIN.TOP.HALF]"
+        v-if="props.ctaLabel && hasBody"
+      >
+        <TideLink
+          :class="[CSS.FONT.ROLE.LINK_2]"
+          :element="ELEMENT.BUTTON"
+          :label="props.ctaLabel"
+          @click="emit('ctaClick')"
+          v-if="props.ctaLabel"
+        />
+      </div>
     </div>
   </div>
 </template>

package/src/stories/TideAlert.stories.ts

@@ -14,6 +14,7 @@ import {
 
 type Args = InstanceType<typeof TideAlert>['$props'] & {
   handleClose: string;
+  handleCtaClick: string;
 };
 
 const render = (args: Args) => ({
@@ -33,16 +34,38 @@ const render = (args: Args) => ({
         alert('Please specify a valid handler in the "close" control.');
       }
     },
+    handleCtaClick: () => {
+      action('TideAlert "Action" CTA clicked')({});
+
+      try {
+        const callback = eval(args.handleCtaClick);
+
+        if (callback) {
+          callback();
+        }
+      } catch {
+        alert('Please specify a valid handler in the "ctaClick" control.');
+      }
+    },
   },
   setup: () => ({ args }),
-  template: `<TideAlert @close="handleClose" v-bind="args">{{ args.default }}</TideAlert>`,
+  template: `<TideAlert @close="handleClose" @click="handleCtaClick" v-bind="args">{{ args.default }}</TideAlert>`,
 });
 
 const ALERT = prependNoneAsUndefined(STANDARD_ALERT.ALERT);
 
 export default {
   argTypes: {
+    click: disabledArgType,
     close: disabledArgType,
+    ctaLabel: {
+      control: 'text',
+      description: 'Call To Action that renders as a TideLink; clicking emits a separate `click` event',
+      table: {
+        defaultValue: { summary: 'None' },
+        type: { summary: 'string' },
+      },
+    },
     dataTrack,
     default: {
       control: 'text',
@@ -63,6 +86,17 @@ export default {
         type: { summary: '() => void' },
       },
     },
+    handleCtaClick: {
+      control: 'text',
+      description: 'JS code or function to execute on CTA click event',
+      isEmit: true,
+      name: 'click',
+      table: {
+        category: 'Events',
+        defaultValue: { summary: 'None' },
+        type: { summary: '() => void' },
+      },
+    },
     heading: {
       control: 'text',
       description: 'Heading text',
@@ -88,9 +122,11 @@ export default {
     },
   },
   args: {
+    ctaLabel: '',
     dataTrack: '',
     default: '',
     handleClose: 'doSomething',
+    handleCtaClick: 'doSomething',
     heading: 'Heading',
     isDismissible: undefined,
     isToast: undefined,