@cypress-design/vue-alert 0.1.1 → 0.2.0

package/Alert.rootstory.tsx

@@ -3,29 +3,28 @@ import dedent from 'dedent'
 import { ref } from 'vue'
 import Alert from './Alert.vue'
 
-export default () => ({
-  setup() {
-    const displayTimedAlert = ref(false)
-    return () => (
-      <div class="flex flex-col p-4 gap-16px">
-        <Alert type="error" detailsTitle="Stack trace" data-cy="alert-1">
-          {{
-            default: () => 'Spec not found',
-            body: () => (
-              <>
-                There is no spec matching the following location:
-                <code class="bg-red-100 m-8px rounded px-2px">
-                  path/to/spec.cy.js
-                </code>
-                <br />
-                <br />
-                It is possible that the file has since been moved or deleted.
-                Please choose from the list of specs below
-              </>
-            ),
-            details: () => (
-              <pre class="bg-white rounded border border-red-500 px-16px py-8px overflow-x-auto">
-                {dedent`Uncaught Error: Error occurred in defineConfig()
+export default () => {
+  const displayTimedAlert = ref(false)
+  return (
+    <div class="flex flex-col p-4 gap-16px">
+      <Alert type="error" detailsTitle="Stack trace" data-cy="alert-1">
+        {{
+          default: () => 'Spec not found',
+          body: () => (
+            <>
+              There is no spec matching the following location:
+              <code class="bg-red-100 m-8px rounded px-2px">
+                path/to/spec.cy.js
+              </code>
+              <br />
+              <br />
+              It is possible that the file has since been moved or deleted.
+              Please choose from the list of specs below
+            </>
+          ),
+          details: () => (
+            <pre class="bg-white rounded border border-red-500 px-16px py-8px overflow-x-auto">
+              {dedent`Uncaught Error: Error occurred in defineConfig()
             Trace: add called with  2 and 3
                 at sum (/home/dev/Documents/stacktrace.js:2:13)
                 at start (/home/dev/Documents/stacktrace.js:11:13)
@@ -58,53 +57,68 @@ export default () => ({
                 at Function.Module._load (internal/modules/cjs/loader.js:727:14)
                 at Function.Module.runMain (internal/modules/cjs/loader.js:1047:10)
                 at internal/main/run_main_module.js:17:11`}
-              </pre>
-            ),
-          }}
-        </Alert>
-        <button
-          class="border rounded p-8px"
-          onClick={() => (displayTimedAlert.value = true)}
+            </pre>
+          ),
+        }}
+      </Alert>
+      <button
+        class="border rounded p-8px"
+        onClick={() => (displayTimedAlert.value = true)}
+      >
+        open alert for 5 seconds
+      </button>
+      {displayTimedAlert.value && (
+        <Alert
+          duration={5000}
+          onDismiss={() => (displayTimedAlert.value = false)}
+          dismissible
+          data-cy="alert-2"
         >
-          open alert for 5 seconds
-        </button>
-        {displayTimedAlert.value && (
-          <Alert
-            duration={5000}
-            onDismiss={() => (displayTimedAlert.value = false)}
-            dismissible
-            data-cy="alert-2"
-          >
-            Wait 5 seconds please
-          </Alert>
-        )}
-        <Alert type="success" dismissible data-cy="alert-3">
-          {{
-            default: () => 'Success with body',
-            body: () => 'Success body',
-          }}
-        </Alert>
-        <Alert type="warning" not-rounded>
-          Warning
-        </Alert>
-        <Alert type="neutral">Neutral</Alert>
-        <Alert type="error" dismissible class="text-justify" data-cy="alert-4">
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
-          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-          aliquip ex ea commodo consequat. Duis aute irure dolor in
-          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
-          culpa qui officia deserunt mollit anim id est laborum.
+          Wait 5 seconds please
         </Alert>
-        <Alert type="info">Info</Alert>
-        <Alert type="info">
-          {{
-            default: () => 'Info',
-            icon: (props: any) => <IconArrowRight {...props} />,
-          }}
-        </Alert>
-      </div>
-    )
-  },
-})
+      )}
+      <Alert type="success" dismissible data-cy="alert-3">
+        {{
+          default: () => 'Success with body',
+          body: () => 'Success body',
+        }}
+      </Alert>
+      <Alert type="warning" not-rounded>
+        Warning
+      </Alert>
+      <Alert type="neutral">Neutral</Alert>
+      <Alert type="error" dismissible class="text-justify" data-cy="alert-4">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
+        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
+        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
+        mollit anim id est laborum.
+      </Alert>
+      <Alert type="info">Info</Alert>
+      <Alert type="info">
+        {{
+          default: () => 'Info',
+          icon: (props: any) => <IconArrowRight {...props} />,
+        }}
+      </Alert>
+      {(['xs', 'sm', 'md', 'lg'] as const).map((size) => (
+        <>
+          <Alert type="error" data-cy="alert-size" size={size}>
+            {size} - Lorem ipsum dolor sit amet
+          </Alert>
+          <Alert type="warning" data-cy="alert-size" size={size}>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
+            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+            aliquip ex ea commodo consequat. Duis aute irure dolor in
+            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+            pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+            culpa qui officia deserunt mollit anim id est laborum.
+          </Alert>
+        </>
+      ))}
+    </div>
+  )
+}

package/Alert.stories.mdx

@@ -17,7 +17,7 @@ import AlertStory from './Alert.rootstory'
 
 <Canvas withSource="none">
   <Story name="Alert">
-    {AlertStory}
+    {AlertStory()}
   </Story>
 </Canvas>
 

package/Alert.vue

@@ -1,43 +1,21 @@
-<template>
-  <div v-if="!dismissed" class="overflow-hidden text-left" :class="props.notRounded ? undefined : 'rounded'">
-    <div class="flex p-16px" :class="typeClasses.headerClass">
-      <!-- @slot replace the default left icon here -->
-      <slot name="icon" v-bind="computedIconProps">
-        <component v-if="!props.noIcon && icon" :is="icon" v-bind="computedIconProps" />
-      </slot>
-      <div class="flex-1 font-medium">
-        <!-- @slot title of the alert -->
-        <slot />
-      </div>
-      <button v-if="dismissible" class="m-4px ml-8px h-16px" @click="dismiss" aria-label="Dismiss">
-        <IconActionDeleteLarge :stroke-color="typeClasses.iconCloseColor" />
-      </button>
-    </div>
-    <div v-if="slots.body" class="p-16px" :class="typeClasses.bodyClass">
-      <!-- @slot body/details of the alert -->
-      <slot name="body" />
-    </div>
-    <details v-if="slots.details" class="p-16px border-t-1" :class="[typeClasses.bodyClass, typeClasses.borderClass]">
-      <summary class="flex font-medium cursor-pointer" :class="typeClasses.detailsHeaderClass">
-        <IconChevronDownSmall :strokeColor="typeClasses.iconChevronColor" class="icon my-4px mr-8px" />
-        {{ props.detailsTitle }}
-      </summary>
-      <div class="mt-16px">
-        <!--@slot Togglable additional details-->
-        <slot name="details" />
-      </div>
-    </details>
-  </div>
-</template>
-
 <script lang="ts" setup>
-import type { FunctionalComponent, ComputedRef } from 'vue';
+import type { FunctionalComponent, ComputedRef } from 'vue'
 import { computed, useSlots, h, ref, onMounted, onUnmounted } from 'vue'
 import {
-  IconChevronDownSmall, IconActionDeleteLarge,
-  IconWarningCircle, IconCheckmarkOutline,
+  IconChevronDownSmall,
+  IconActionDeleteLarge,
+  IconWarningCircle,
+  IconCheckmarkOutline,
 } from '@cypress-design/vue-icon'
-import type { AlertType } from '../constants'
+import { DetailsAnimation } from '@cypress-design/details-animation'
+import {
+  AlertSize,
+  alertSizesClasses,
+  AlertType,
+  defaultAlertSize,
+  defaultAlertTitle,
+  defaultAlertType,
+} from '../constants'
 import { alertClasses } from '../constants'
 
 const dismissed = ref(false)
@@ -48,38 +26,49 @@ const emit = defineEmits<{
   /**
    * Clicking on the dismiss button or dismissed after a timeout
    */
-  (event: 'dismiss'): void,
+  (event: 'dismiss'): void
 }>()
 
-const props = withDefaults(defineProps<{
-  /**
-   * Color scheme
-   */
-  type?: AlertType
-  /**
-   * If details are provided,text used in the toggle button
-   */
-  detailsTitle?: string
-  /**
-   * Show the dismiss button
-   */
-  dismissible?: boolean
-  /**
-   * When an icon is displayed by default, use this to remove it
-   */
-  noIcon?: boolean
-  /**
-   * If you need square corners
-   */
-  notRounded?: boolean
-  /**
-   * Dismiss the alert after a delay (in ms)
-   */
-  duration?: number
-}>(), {
-  type: 'info',
-  detailsTitle: 'Additional details',
-})
+const props = withDefaults(
+  defineProps<{
+    /**
+     * Color scheme
+     */
+    type?: AlertType
+    /**
+     * If details are provided,text used in the toggle button
+     */
+    detailsTitle?: string
+    /**
+     * Show the dismiss button
+     */
+    dismissible?: boolean
+    /**
+     * When an icon is displayed by default, use this to remove it
+     */
+    noIcon?: boolean
+    /**
+     * If you need square corners
+     */
+    notRounded?: boolean
+    /**
+     * Dismiss the alert after a delay (in ms)
+     */
+    duration?: number
+    /**
+     * Size of the alert
+     */
+    size?: AlertSize
+  }>(),
+  {
+    type: defaultAlertType,
+    detailsTitle: defaultAlertTitle,
+    size: defaultAlertSize,
+  }
+)
+
+const detailsRef = ref(null)
+const contentRef = ref(null)
 
 const typeClasses = computed(() => {
   return alertClasses[props.type]
@@ -93,6 +82,12 @@ onMounted(() => {
   }
 })
 
+onMounted(() => {
+  if (detailsRef.value && contentRef.value) {
+    new DetailsAnimation(detailsRef.value, contentRef.value)
+  }
+})
+
 onUnmounted(() => {
   if (timeout) {
     clearTimeout(timeout)
@@ -111,14 +106,14 @@ function dismiss() {
 const computedIconProps = computed(() => {
   return {
     strokeColor: alertClasses[props.type].iconColor,
-    class: 'my-4px mr-8px'
+    class: 'my-4px mr-8px',
   }
 })
 
 const icon: ComputedRef<FunctionalComponent | null> = computed(() => {
   switch (props.type) {
     case 'info':
-      return null;
+      return null
     case 'success':
       return () => h(IconCheckmarkOutline, computedIconProps.value)
     case 'warning':
@@ -126,23 +121,69 @@ const icon: ComputedRef<FunctionalComponent | null> = computed(() => {
     case 'error':
       return () => h(IconWarningCircle, computedIconProps.value)
     default:
-      return null;
+      return null
   }
 })
 
+const sizeClasses = computed(() => {
+  return alertSizesClasses[props.size]
+})
 </script>
 
-<style scoped>
-details :deep(summary::-webkit-details-marker) {
-  display: none;
-}
-
-details summary .icon {
-  transform: rotate(-90deg);
-  transition: transform 0.2s;
-}
-
-details[open] summary .icon {
-  transform: rotate(0);
-}
-</style>
+<template>
+  <div
+    v-if="!dismissed"
+    class="overflow-hidden text-left"
+    :class="props.notRounded ? undefined : 'rounded'"
+  >
+    <div class="flex" :class="[typeClasses.headerClass, sizeClasses]">
+      <!-- @slot replace the default left icon here -->
+      <slot name="icon" v-bind="computedIconProps">
+        <component
+          v-if="!props.noIcon && icon"
+          :is="icon"
+          v-bind="computedIconProps"
+        />
+      </slot>
+      <div class="flex-1 font-medium">
+        <!-- @slot title of the alert -->
+        <slot />
+      </div>
+      <button
+        v-if="dismissible"
+        class="m-4px ml-8px h-16px"
+        @click="dismiss"
+        aria-label="Dismiss"
+      >
+        <IconActionDeleteLarge :stroke-color="typeClasses.iconCloseColor" />
+      </button>
+    </div>
+    <div v-if="slots.body" class="p-16px" :class="typeClasses.bodyClass">
+      <!-- @slot body/details of the alert -->
+      <slot name="body" />
+    </div>
+    <details
+      v-if="slots.details"
+      class="p-16px border-t-1"
+      ref="detailsRef"
+      :class="[typeClasses.bodyClass, typeClasses.borderClass]"
+    >
+      <summary
+        class="flex font-medium cursor-pointer details-none"
+        :class="typeClasses.detailsHeaderClass"
+      >
+        <IconChevronDownSmall
+          :strokeColor="typeClasses.iconChevronColor"
+          class="icon my-4px mr-8px transition transform -rotate-90 open:rotate-0"
+        />
+        {{ props.detailsTitle }}
+      </summary>
+      <div ref="contentRef">
+        <div>
+          <!--@slot Togglable additional details-->
+          <slot name="details" />
+        </div>
+      </div>
+    </details>
+  </div>
+</template>

package/AlertVue.cy.tsx

@@ -4,6 +4,6 @@ import AlertStory from './Alert.rootstory'
 
 describe('<Alert />', { viewportHeight: 800 }, () => {
   it('renders', () => {
-    mount(AlertStory)
+    mount(() => <AlertStory />)
   })
 })

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @cypress-design/vue-alert
 
+## 0.2.0
+
+### Minor Changes
+
+- [#114](https://github.com/cypress-io/cypress-design/pull/114) [`2a6597c`](https://github.com/cypress-io/cypress-design/commit/2a6597c16efc05ffe4ec51ab19cd2d7836a24c5c) Thanks [@elevatebart](https://github.com/elevatebart)! - fix: add sizes to alerts
+
+## 0.1.2
+
+### Patch Changes
+
+- [#74](https://github.com/cypress-io/cypress-design/pull/74) [`6d8b6fd`](https://github.com/cypress-io/cypress-design/commit/6d8b6fd763b0389d748884c35f4ff6dd73724977) Thanks [@elevatebart](https://github.com/elevatebart)! - refactor to remove need for custom css
+
+- Updated dependencies [[`6d8b6fd`](https://github.com/cypress-io/cypress-design/commit/6d8b6fd763b0389d748884c35f4ff6dd73724977)]:
+  - @cypress-design/details-animation@0.0.1
+
 ## 0.1.1
 
 ### Patch Changes

package/dist/constants.d.ts

@@ -1,5 +1,13 @@
 import type { WindiColor } from '@cypress-design/icon-registry';
 export declare type AlertType = 'info' | 'success' | 'error' | 'warning' | 'neutral';
+export declare const alertSizesClasses: {
+    readonly xs: "py-4px px-8px leading-22px text-14px";
+    readonly sm: "py-8px px-12px leading-22px text-14px";
+    readonly md: "py-12px px-16px leading-24px text-16px";
+    readonly lg: "p-16px leading-24px text-16px";
+};
+export declare type AlertSize = keyof typeof alertSizesClasses;
+export declare const defaultAlertSize: AlertSize;
 export declare type AlertClasses = {
     headerClass: string;
     bodyClass: string;
@@ -10,4 +18,6 @@ export declare type AlertClasses = {
     iconChevronColor: WindiColor;
 };
 export declare const alertClasses: Record<AlertType, AlertClasses>;
+export declare const defaultAlertType: AlertType;
+export declare const defaultAlertTitle = "Additional details";
 //# sourceMappingURL=constants.d.ts.map

package/dist/constants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../constants.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAA;AAE/D,oBAAY,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,CAAA;AAE5E,oBAAY,YAAY,GAAG;IACzB,WAAW,EAAE,MAAM,CAAA;IACnB,SAAS,EAAE,MAAM,CAAA;IACjB,WAAW,EAAE,MAAM,CAAA;IACnB,kBAAkB,EAAE,MAAM,CAAA;IAC1B,cAAc,EAAE,UAAU,CAAA;IAC1B,SAAS,CAAC,EAAE,UAAU,CAAA;IACtB,gBAAgB,EAAE,UAAU,CAAA;CAC7B,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,MAAM,CAAC,SAAS,EAAE,YAAY,CA6DxD,CAAA"}
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../constants.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAA;AAE/D,oBAAY,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,CAAA;AAC5E,eAAO,MAAM,iBAAiB;;;;;CAKpB,CAAA;AAEV,oBAAY,SAAS,GAAG,MAAM,OAAO,iBAAiB,CAAA;AACtD,eAAO,MAAM,gBAAgB,EAAE,SAAgB,CAAA;AAE/C,oBAAY,YAAY,GAAG;IACzB,WAAW,EAAE,MAAM,CAAA;IACnB,SAAS,EAAE,MAAM,CAAA;IACjB,WAAW,EAAE,MAAM,CAAA;IACnB,kBAAkB,EAAE,MAAM,CAAA;IAC1B,cAAc,EAAE,UAAU,CAAA;IAC1B,SAAS,CAAC,EAAE,UAAU,CAAA;IACtB,gBAAgB,EAAE,UAAU,CAAA;CAC7B,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,MAAM,CAAC,SAAS,EAAE,YAAY,CA6DxD,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,SAAkB,CAAA;AAEjD,eAAO,MAAM,iBAAiB,uBAAuB,CAAA"}