@cypress-design/vue-alert 0.5.2 → 0.5.4

package/.turbo/turbo-build.log

@@ -1,13 +1,13 @@
 $ yarn build:module && yarn build:types
 $ yarn vite build
 $ /home/runner/work/cypress-design/cypress-design/node_modules/.bin/vite build
-vite v4.2.2 building for production...
+vite v4.3.5 building for production...
 transforming...
 ✓ 5 modules transformed.
 rendering chunks...
 computing gzip size...
-dist/index.es.mjs  9.84 kB │ gzip: 2.76 kB │ map: 269.11 kB
-dist/index.umd.js  8.26 kB │ gzip: 2.62 kB │ map: 268.50 kB
-✓ built in 6.39s
+dist/index.es.mjs  10.97 kB │ gzip: 2.89 kB │ map: 295.13 kB
+dist/index.umd.js  9.03 kB │ gzip: 2.72 kB │ map: 294.33 kB
+✓ built in 13.67s
 $ yarn vue-tsc --project ./tsconfig.build.json
 $ /home/runner/work/cypress-design/cypress-design/node_modules/.bin/vue-tsc --project ./tsconfig.build.json

package/Alert.vue

@@ -11,10 +11,10 @@ import { DetailsAnimation } from '@cypress-design/details-animation'
 import {
   AlertSize,
   alertSizesClasses,
-  AlertType,
+  AlertVariant,
   defaultAlertSize,
   defaultAlertTitle,
-  defaultAlertType,
+  defaultAlertVariant,
   alertClasses,
 } from '@cypress-design/constants-alert'
 
@@ -34,7 +34,12 @@ const props = withDefaults(
     /**
      * Color scheme
      */
-    type?: AlertType
+    variant?: AlertVariant
+    /**
+     * Color scheme
+     * @deprecated use `variant` instead
+     */
+    type?: AlertVariant
     /**
      * If details are provided,text used in the toggle button
      */
@@ -61,24 +66,29 @@ const props = withDefaults(
     size?: AlertSize
   }>(),
   {
-    type: defaultAlertType,
+    variant: undefined,
+    type: defaultAlertVariant,
     detailsTitle: defaultAlertTitle,
     size: defaultAlertSize,
   }
 )
 
+const variant = computed(() => {
+  return props.variant ?? props.type
+})
+
 const detailsRef = ref(null)
 const contentRef = ref(null)
 
-const typeClasses = computed(() => {
-  return alertClasses[props.type] ?? {}
+const variantClasses = computed(() => {
+  return alertClasses[variant.value] ?? {}
 })
 
 let timeout: number | undefined
 
 onMounted(() => {
   if (props.duration) {
-    timeout = setTimeout(dismiss, props.duration) as any
+    timeout = setTimeout(dismiss, props.duration)
   }
 })
 
@@ -105,13 +115,13 @@ function dismiss() {
 
 const computedIconProps = computed(() => {
   return {
-    strokeColor: typeClasses.value.iconColor,
+    strokeColor: variantClasses.value.iconColor,
     class: 'my-[4px] mr-[8px]',
   }
 })
 
 const icon: ComputedRef<FunctionalComponent | null> = computed(() => {
-  switch (props.type) {
+  switch (variant.value) {
     case 'info':
       return null
     case 'success':
@@ -134,9 +144,9 @@ const sizeClasses = computed(() => {
   <div
     v-if="!dismissed"
     class="overflow-hidden text-left"
-    :class="props.notRounded ? undefined : 'rounded'"
+    :class="[variantClasses.wrapperClass, { rounded: !props.notRounded }]"
   >
-    <div class="flex" :class="[typeClasses.headerClass, sizeClasses]">
+    <div class="flex" :class="[variantClasses.headerClass, sizeClasses]">
       <!--
         @slot replace the default left icon here
         @binding strokeColor - a windicolor that to be passed to `strokeColor`
@@ -159,10 +169,10 @@ const sizeClasses = computed(() => {
         @click="dismiss"
         aria-label="Dismiss"
       >
-        <IconActionDeleteLarge :stroke-color="typeClasses.iconCloseColor" />
+        <IconActionDeleteLarge :stroke-color="variantClasses.iconCloseColor" />
       </button>
     </div>
-    <div v-if="slots.body" class="p-[16px]" :class="typeClasses.bodyClass">
+    <div v-if="slots.body" class="p-[16px]" :class="variantClasses.bodyClass">
       <!-- @slot body/details of the alert -->
       <slot name="body" />
     </div>
@@ -170,14 +180,14 @@ const sizeClasses = computed(() => {
       v-if="slots.details"
       class="p-[16px] border-t border-t-1"
       ref="detailsRef"
-      :class="[typeClasses.bodyClass, typeClasses.borderClass]"
+      :class="[variantClasses.bodyClass, variantClasses.borderClass]"
     >
       <summary
         class="flex font-medium cursor-pointer details-none"
-        :class="typeClasses.detailsHeaderClass"
+        :class="variantClasses.detailsHeaderClass"
       >
         <IconChevronDownSmall
-          :strokeColor="typeClasses.iconChevronColor"
+          :strokeColor="variantClasses.iconChevronColor"
           class="icon my-[4px] mr-[8px] transition transform -rotate-90 open:rotate-0"
         />
         {{ props.detailsTitle }}
@@ -189,5 +199,11 @@ const sizeClasses = computed(() => {
         </div>
       </div>
     </details>
+    <template v-if="$slots.footer">
+      <div :class="variantClasses.bodyClass">
+        <!--@slot A box to add buttons or additional content -->
+        <slot name="footer" />
+      </div>
+    </template>
   </div>
 </template>

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @cypress-design/vue-alert
 
+## 0.5.4
+
+### Patch Changes
+
+- [#219](https://github.com/cypress-io/cypress-design/pull/219) [`0a4ce3b`](https://github.com/cypress-io/cypress-design/commit/0a4ce3bb55b9ab0510f7fb9ba207d5fdc3cb723f) Thanks [@elevatebart](https://github.com/elevatebart)! - refactor some typings so eslint passes without warning
+
+- Updated dependencies [[`0a4ce3b`](https://github.com/cypress-io/cypress-design/commit/0a4ce3bb55b9ab0510f7fb9ba207d5fdc3cb723f)]:
+  - @cypress-design/vue-icon@0.22.3
+
+## 0.5.3
+
+### Patch Changes
+
+- [#217](https://github.com/cypress-io/cypress-design/pull/217) [`0e24977`](https://github.com/cypress-io/cypress-design/commit/0e24977b5c2196b50409c4b1f7fe6fbe6639eb64) Thanks [@elevatebart](https://github.com/elevatebart)! - add alerts new variant and demos
+
+- Updated dependencies [[`0e24977`](https://github.com/cypress-io/cypress-design/commit/0e24977b5c2196b50409c4b1f7fe6fbe6639eb64)]:
+  - @cypress-design/constants-alert@0.1.1
+
 ## 0.5.2
 
 ### Patch Changes

package/ReadMe.md

@@ -20,25 +20,24 @@ import Alert from '@cypress-design/vue-alert'
 
 The simplest is to use with plain text. By default, type is `info`.
 
-```vue live
-<script setup>
-import Alert from '@cypress-design/vue-alert'
-</script>
-
-<template>
-  <Alert type="error">Great Scott!!</Alert>
-</template>
+```jsx live
+<Alert variant="error">Great Scott!!</Alert>
 ```
 
 One can also have rich text in both the title and the body.
 
 ```jsx live
-<Alert>
-  This is an <code>info</code> message
-  <template #body>
-    <p>This is the body of the alert.</p>
-  </template>
-</Alert>
+<div class="bg-white p-4">
+  <Alert>
+    This is an <code>info</code> message
+    <template #body>
+      <p>This is the body of <b>the alert.</b></p>
+    </template>
+    <template #details>
+      <p>This is the details of the alert.</p>
+    </template>
+  </Alert>
+</div>
 ```
 
 If you want the alert to be dismissible, you can add the `dismissible` prop. Don't forget to add the `@dismiss` prop to handle the dismiss event.
@@ -58,7 +57,55 @@ const dismissed = false
 You can also remove the rounded corners and the icon of the alert by adding the `notRounded` and the `noIcon` props.
 
 ```jsx live
-<Alert type="warning" notRounded noIcon>
+<Alert variant="warning" notRounded noIcon>
   Look at my corners
 </Alert>
 ```
+
+```vue live
+<script setup>
+import { ref } from 'vue'
+import Button from '@cypress-design/vue-button'
+const dismissed = ref(false)
+</script>
+
+<template>
+  <Alert variant="clear" dismissible @dismiss="dismissed = true">
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      class="mr-2 inline"
+    >
+      <path
+        d="M8 0L0.552002 2.656L1.688 12.504L8 16L14.312 12.504L15.448 2.656L8 0Z"
+        fill="#DD0031"
+      />
+      <path
+        d="M8 0L8.00001 1.776V1.768L8 16L14.312 12.504L15.448 2.656L8 0Z"
+        fill="#C3002F"
+      />
+      <path
+        d="M8.00001 1.768L3.34401 12.208H5.08001L6.01601 9.872H9.96801L10.904 12.208H12.64L8.00001 1.768ZM9.36001 8.432H6.64001L8.00001 5.16L9.36001 8.432Z"
+        fill="white"
+      />
+    </svg>
+    Angular component testing is available for this project
+    <template #body>
+      You can now use Cypress to develop and test individual components without
+      running your whole application. Generate the config in just a few clicks.
+    </template>
+    <template #footer>
+      <div class="p-4 flex flex-wrap overflow-x-hidden gap-4">
+        <Button variant="outline-indigo" size="32">Quick setup</Button>
+        <Button variant="link" size="32">Read our guides</Button>
+        <div class="md:flex-grow md:grow" />
+        <Button variant="link" size="32">Give feedback</Button>
+      </div>
+    </template>
+  </Alert>
+  <p v-if="dismissed">Alert dismissed</p>
+</template>
+```

package/dist/Alert.vue.d.ts

@@ -1,9 +1,14 @@
-import { AlertSize, AlertType } from '@cypress-design/constants-alert';
+import { AlertVariant } from '@cypress-design/constants-alert';
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     /**
      * Color scheme
      */
-    type?: AlertType | undefined;
+    variant?: AlertVariant | undefined;
+    /**
+     * Color scheme
+     * @deprecated use `variant` instead
+     */
+    type?: AlertVariant | undefined;
     /**
      * If details are provided,text used in the toggle button
      */
@@ -29,7 +34,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
      */
     size?: "xs" | "sm" | "md" | "lg" | undefined;
 }>, {
-    type: AlertType;
+    variant: undefined;
+    type: AlertVariant;
     detailsTitle: string;
     size: "xs" | "sm" | "md" | "lg";
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
@@ -38,7 +44,12 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     /**
      * Color scheme
      */
-    type?: AlertType | undefined;
+    variant?: AlertVariant | undefined;
+    /**
+     * Color scheme
+     * @deprecated use `variant` instead
+     */
+    type?: AlertVariant | undefined;
     /**
      * If details are provided,text used in the toggle button
      */
@@ -64,23 +75,26 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
      */
     size?: "xs" | "sm" | "md" | "lg" | undefined;
 }>, {
-    type: AlertType;
+    variant: undefined;
+    type: AlertVariant;
     detailsTitle: string;
     size: "xs" | "sm" | "md" | "lg";
 }>>> & {
     onDismiss?: (() => any) | undefined;
 }, {
-    type: AlertType;
+    variant: AlertVariant;
+    type: AlertVariant;
     detailsTitle: string;
-    size: AlertSize;
-}>, {
-    icon: (_: {
+    size: "xs" | "sm" | "md" | "lg";
+}, {}>, {
+    icon?(_: {
         strokeColor: import("@cypress-design/vue-icon").WindiColor | undefined;
         class: string;
-    }) => any;
-    default: (_: {}) => any;
-    body: (_: {}) => any;
-    details: (_: {}) => any;
+    }): any;
+    default?(_: {}): any;
+    body?(_: {}): any;
+    details?(_: {}): any;
+    footer?(_: {}): any;
 }>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
@@ -93,13 +107,16 @@ type __VLS_TypePropsToRuntimeProps<T> = {
     };
 };
 type __VLS_WithDefaults<P, D> = {
-    [K in keyof Pick<P, keyof P>]: K extends keyof D ? P[K] & {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
         default: D[K];
-    } : P[K];
+    }> : P[K];
 };
 type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {
         $slots: S;
     };
 };
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
 //# sourceMappingURL=Alert.vue.d.ts.map

package/dist/Alert.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Alert.vue.d.ts","sourceRoot":"","sources":["../Alert.vue.ts"],"names":[],"mappings":"AAUA,OAAO,EACL,SAAS,EAET,SAAS,EAKV,MAAM,iCAAiC,CAAA;;IAyHpC;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;;;;;;;;IA1BH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;;;;;;;;UAvBI,SAAS;kBAID,MAAM;UAoBd,SAAS;;;;;UA4LS,GAAG;wBACA,GAAG;qBACL,GAAG;wBACA,GAAG;;AAjVpC,wBA0Wc;AACd,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AACjE,KAAK,6BAA6B,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CAAE,CAAC;AAC9M,KAAK,kBAAkB,CAAC,CAAC,EAAE,CAAC,IAAI;KAE1B,CAAC,IAAI,MAAM,IAAI,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,GAAG,CAAC,SAAS,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG;QACzD,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,CAAA;KACb,GAAG,CAAC,CAAC,CAAC,CAAC;CACR,CAAC;AAWN,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAAE,QAAO;QAAE,MAAM,EAAE,CAAC,CAAA;KAAE,CAAA;CAAE,CAAC"}
+{"version":3,"file":"Alert.vue.d.ts","sourceRoot":"","sources":["../Alert.vue.ts"],"names":[],"mappings":"AAWA,OAAO,EAGL,YAAY,EAKb,MAAM,iCAAiC,CAAA;;IAmIpC;;OAEG;;IAEH;;;OAGG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;;;;;;;;;IA/BH;;OAEG;;IAEH;;;OAGG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;;;;;;;;;;;;;;;;;;;;;;;AAiQP,wBAA8G;AAE9G,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AACjE,KAAK,6BAA6B,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CAAE,CAAC;AAC9M,KAAK,kBAAkB,CAAC,CAAC,EAAE,CAAC,IAAI;KAE1B,CAAC,IAAI,MAAM,IAAI,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,GAAG,CAAC,SAAS,MAAM,CAAC,GAAG,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG;QACxE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,CAAA;KACb,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CACT,CAAC;AAWN,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAAE,QAAO;QAClD,MAAM,EAAE,CAAC,CAAC;KACT,CAAA;CAAE,CAAC;AACJ,KAAK,cAAc,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC"}