@cypress-design/vue-alert 0.1.2 → 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,61 +1,3 @@
-<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"
-      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 class="mt-16px">
-          <!--@slot Togglable additional details-->
-          <slot name="details" />
-        </div>
-      </div>
-    </details>
-  </div>
-</template>
-
 <script lang="ts" setup>
 import type { FunctionalComponent, ComputedRef } from 'vue'
 import { computed, useSlots, h, ref, onMounted, onUnmounted } from 'vue'
@@ -66,7 +8,14 @@ import {
   IconCheckmarkOutline,
 } from '@cypress-design/vue-icon'
 import { DetailsAnimation } from '@cypress-design/details-animation'
-import type { AlertType } from '../constants'
+import {
+  AlertSize,
+  alertSizesClasses,
+  AlertType,
+  defaultAlertSize,
+  defaultAlertTitle,
+  defaultAlertType,
+} from '../constants'
 import { alertClasses } from '../constants'
 
 const dismissed = ref(false)
@@ -106,10 +55,15 @@ const props = withDefaults(
      * Dismiss the alert after a delay (in ms)
      */
     duration?: number
+    /**
+     * Size of the alert
+     */
+    size?: AlertSize
   }>(),
   {
-    type: 'info',
-    detailsTitle: 'Additional details',
+    type: defaultAlertType,
+    detailsTitle: defaultAlertTitle,
+    size: defaultAlertSize,
   }
 )
 
@@ -170,4 +124,66 @@ const icon: ComputedRef<FunctionalComponent | null> = computed(() => {
       return null
   }
 })
+
+const sizeClasses = computed(() => {
+  return alertSizesClasses[props.size]
+})
 </script>
+
+<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,11 @@
 # @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

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"}