@cypress-design/vue-alert 0.0.2 → 0.1.0

package/Alert.rootstory.tsx

@@ -3,7 +3,7 @@ import dedent from 'dedent'
 import { ref } from 'vue'
 import Alert from './Alert.vue'
 
-export default (() => ({
+export default () => ({
   setup() {
     const displayTimedAlert = ref(false)
     return () => (
@@ -107,4 +107,4 @@ export default (() => ({
       </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

@@ -133,8 +133,13 @@ const icon: ComputedRef<FunctionalComponent | null> = computed(() => {
 </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 {

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @cypress-design/vue-alert
 
+## 0.1.0
+
+### Minor Changes
+
+- [#51](https://github.com/cypress-io/cypress-design/pull/51) [`ccd8f9a`](https://github.com/cypress-io/cypress-design/commit/ccd8f9a8feb624c0a52deaa9754c76969f43fc1e) Thanks [@elevatebart](https://github.com/elevatebart)! - in the build asset, add a comment containing all used windicss classes in the component
+
+### Patch Changes
+
+- [#46](https://github.com/cypress-io/cypress-design/pull/46) [`2608f59`](https://github.com/cypress-io/cypress-design/commit/2608f59e77f13ebdc25834309bf5d6390b37c350) Thanks [@elevatebart](https://github.com/elevatebart)! - fix alert story and details caret on webkit
+
+* [#50](https://github.com/cypress-io/cypress-design/pull/50) [`1cb98e6`](https://github.com/cypress-io/cypress-design/commit/1cb98e6fc921e61e4645cdc9a60d48acb6d812c7) Thanks [@elevatebart](https://github.com/elevatebart)! - animate transition of details caret from closed to open
+
+* Updated dependencies [[`ccd8f9a`](https://github.com/cypress-io/cypress-design/commit/ccd8f9a8feb624c0a52deaa9754c76969f43fc1e), [`0866c65`](https://github.com/cypress-io/cypress-design/commit/0866c654f24c36951c98468d789462748606b428), [`43b53eb`](https://github.com/cypress-io/cypress-design/commit/43b53eb6bd10111629239a87374cfcc894eda0e3)]:
+  - @cypress-design/vue-icon@0.5.0
+
 ## 0.0.2
 
 ### Patch Changes

package/dist/index.es.js

@@ -1,223 +1,215 @@
-import { defineComponent, ref, useSlots, computed, onMounted, onUnmounted, h, openBlock, createElementBlock, normalizeClass, createElementVNode, unref, createCommentVNode, renderSlot, normalizeProps, guardReactiveProps, createBlock, resolveDynamicComponent, mergeProps, createVNode, createTextVNode, toDisplayString } from 'vue';
-import { IconWarningCircle, IconCheckmarkOutline, IconActionDeleteLarge, IconChevronDownSmall } from '@cypress-design/vue-icon';
-
-const alertClasses = {
-    neutral: {
-        headerClass: 'text-gray-800 bg-gray-100',
-        bodyClass: 'bg-gray-50 text-gray-500',
-        borderClass: 'border-gray-100',
-        detailsHeaderClass: 'text-gray-600',
-        /* <windi-keep strokeColor="gray-600"/> */
-        iconCloseColor: 'gray-600',
-        /* <windi-keep strokeColor="gray-500"/> */
-        iconColor: 'gray-500',
-        /* <windi-keep strokeColor="gray-300"/> */
-        iconChevronColor: 'gray-300',
-    },
-    info: {
-        headerClass: 'text-indigo-700 bg-indigo-100',
-        bodyClass: 'bg-indigo-50 text-indigo-500',
-        borderClass: 'border-indigo-100',
-        detailsHeaderClass: 'text-indigo-600',
-        /* <windi-keep strokeColor="indigo-500"/> */
-        iconCloseColor: 'indigo-500',
-        /* <windi-keep strokeColor="indigo-500"/> */
-        iconColor: 'indigo-500',
-        /* <windi-keep strokeColor="indigo-300"/> */
-        iconChevronColor: 'indigo-300',
-    },
-    warning: {
-        headerClass: 'text-orange-700 bg-orange-100',
-        bodyClass: 'bg-orange-50 text-orange-500',
-        borderClass: 'border-orange-100',
-        detailsHeaderClass: 'text-orange-600',
-        /* <windi-keep strokeColor="orange-500"/> */
-        iconCloseColor: 'orange-500',
-        /* <windi-keep strokeColor="orange-400"/> */
-        iconColor: 'orange-400',
-        /* <windi-keep strokeColor="orange-300"/> */
-        iconChevronColor: 'orange-300',
-    },
-    error: {
-        headerClass: 'text-red-700 bg-red-100',
-        bodyClass: 'bg-red-50 text-red-500',
-        borderClass: 'border-red-100',
-        detailsHeaderClass: 'text-red-600',
-        /* <windi-keep strokeColor="red-500"/> */
-        iconCloseColor: 'red-500',
-        /* <windi-keep strokeColor="red-400"/> */
-        iconColor: 'red-400',
-        /* <windi-keep strokeColor="red-300"/> */
-        iconChevronColor: 'red-300',
-    },
-    success: {
-        headerClass: 'text-jade-700 bg-jade-100',
-        bodyClass: 'bg-jade-50 text-jade-600',
-        borderClass: 'border-jade-100',
-        detailsHeaderClass: 'text-jade-600',
-        /* <windi-keep strokeColor="jade-600"/> */
-        iconCloseColor: 'jade-600',
-        /* <windi-keep strokeColor="jade-500"/> */
-        iconColor: 'jade-500',
-        /* <windi-keep strokeColor="jade-300"/> */
-        iconChevronColor: 'jade-300',
-    },
-};
-
-function styleInject(css, ref) {
-  if ( ref === void 0 ) ref = {};
-  var insertAt = ref.insertAt;
-
-  if (!css || typeof document === 'undefined') { return; }
-
-  var head = document.head || document.getElementsByTagName('head')[0];
-  var style = document.createElement('style');
-  style.type = 'text/css';
-
-  if (insertAt === 'top') {
-    if (head.firstChild) {
-      head.insertBefore(style, head.firstChild);
-    } else {
-      head.appendChild(style);
-    }
-  } else {
-    head.appendChild(style);
-  }
-
-  if (style.styleSheet) {
-    style.styleSheet.cssText = css;
-  } else {
-    style.appendChild(document.createTextNode(css));
-  }
-}
-
-var css_248z = "\ndetails summary .icon[data-v-836252c4] {\n  transform: rotate(-90deg);\n}\ndetails[open] summary .icon[data-v-836252c4] {\n  transform: rotate(0);\n}\n";
-styleInject(css_248z);
-
-var _export_sfc = (sfc, props) => {
-  const target = sfc.__vccOpts || sfc;
-  for (const [key, val] of props) {
-    target[key] = val;
+import { h as n, defineComponent as j, ref as E, useSlots as A, computed as f, onMounted as B, onUnmounted as I, openBlock as C, createElementBlock as b, normalizeClass as p, createElementVNode as v, unref as t, renderSlot as y, normalizeProps as x, guardReactiveProps as D, createBlock as S, resolveDynamicComponent as $, mergeProps as H, createCommentVNode as m, createVNode as _, createTextVNode as M, toDisplayString as N } from "vue";
+import * as h from "@cypress-design/icon-registry";
+import { ICON_COLOR_PROP_NAMES as O } from "@cypress-design/icon-registry";
+const k = ({
+  body: s,
+  compiledClasses: e,
+  size: o,
+  class: r,
+  interactiveColorsOnGroup: c,
+  ...l
+}) => {
+  const a = Object.keys(l).reduce((i, d) => (O.includes(d) || (i[d] = l[d]), i), {}), u = {
+    width: o,
+    height: o,
+    fill: "none",
+    innerHTML: s,
+    ...a
+  };
+  return e.length && (u.class = e.join(" ")), u;
+}, T = (s) => {
+  const { sizeWithDefault: e, compiledClasses: o } = h.getComponentAttributes({ ...s, availableSizes: ["16"] }), r = {
+    16: '<path d="M3 13 13 3M3 3l10 10" stroke="currentColor" class="icon-dark" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>'
+  }[e];
+  if (!r)
+    throw Error(`Icon "action-delete-large" is not available in size ${e}`);
+  return n("svg", k({
+    ...s,
+    size: e,
+    body: r,
+    compiledClasses: o
+  }));
+}, P = (s) => {
+  const { sizeWithDefault: e, compiledClasses: o } = h.getComponentAttributes({ ...s, availableSizes: ["16"] }), r = {
+    16: '<path d="M12.95 12.95a7 7 0 1 1-9.9-9.9 7 7 0 0 1 9.9 9.9Z" stroke="#1B1E2E" stroke-width="2" class="icon-dark"/><path d="m6 8 1.5 2L10 6" stroke="#1B1E2E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon-dark"/>'
+  }[e];
+  if (!r)
+    throw Error(`Icon "checkmark-outline" is not available in size ${e}`);
+  return n("svg", k({
+    ...s,
+    size: e,
+    body: r,
+    compiledClasses: o
+  }));
+}, R = (s) => {
+  const { sizeWithDefault: e, compiledClasses: o } = h.getComponentAttributes({ ...s, availableSizes: ["8", "16"] }), r = {
+    8: '<path d="m1 2.5 3 3 3-3" stroke="#1B1E2E" class="icon-dark" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>',
+    16: '<path d="m4 6 4 4 4-4" stroke="currentColor" class="icon-dark" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>'
+  }[e];
+  if (!r)
+    throw Error(`Icon "chevron-down-small" is not available in size ${e}`);
+  return n("svg", k({
+    ...s,
+    size: e,
+    body: r,
+    compiledClasses: o
+  }));
+}, z = (s) => {
+  const { sizeWithDefault: e, compiledClasses: o } = h.getComponentAttributes({ ...s, availableSizes: ["16"] }), r = {
+    16: '<path fill-rule="evenodd" clip-rule="evenodd" d="M2 8a6 6 0 1 1 12 0A6 6 0 0 1 2 8Zm6-8a8 8 0 1 0 0 16A8 8 0 0 0 8 0Zm1 5a1 1 0 0 0-2 0v3a1 1 0 0 0 2 0V5Zm-1 7a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z" fill="#DB7903" class="icon-dark"/>'
+  }[e];
+  if (!r)
+    throw Error(`Icon "warning-circle" is not available in size ${e}`);
+  return n("svg", k({
+    ...s,
+    size: e,
+    body: r,
+    compiledClasses: o
+  }));
+}, w = {
+  neutral: {
+    headerClass: "text-gray-800 bg-gray-100",
+    bodyClass: "bg-gray-50 text-gray-500",
+    borderClass: "border-gray-100",
+    detailsHeaderClass: "text-gray-600",
+    iconCloseColor: "gray-600",
+    iconColor: "gray-500",
+    iconChevronColor: "gray-300"
+  },
+  info: {
+    headerClass: "text-indigo-700 bg-indigo-100",
+    bodyClass: "bg-indigo-50 text-indigo-500",
+    borderClass: "border-indigo-100",
+    detailsHeaderClass: "text-indigo-600",
+    iconCloseColor: "indigo-500",
+    iconColor: "indigo-500",
+    iconChevronColor: "indigo-300"
+  },
+  warning: {
+    headerClass: "text-orange-700 bg-orange-100",
+    bodyClass: "bg-orange-50 text-orange-500",
+    borderClass: "border-orange-100",
+    detailsHeaderClass: "text-orange-600",
+    iconCloseColor: "orange-500",
+    iconColor: "orange-400",
+    iconChevronColor: "orange-300"
+  },
+  error: {
+    headerClass: "text-red-700 bg-red-100",
+    bodyClass: "bg-red-50 text-red-500",
+    borderClass: "border-red-100",
+    detailsHeaderClass: "text-red-600",
+    iconCloseColor: "red-500",
+    iconColor: "red-400",
+    iconChevronColor: "red-300"
+  },
+  success: {
+    headerClass: "text-jade-700 bg-jade-100",
+    bodyClass: "bg-jade-50 text-jade-600",
+    borderClass: "border-jade-100",
+    detailsHeaderClass: "text-jade-600",
+    iconCloseColor: "jade-600",
+    iconColor: "jade-500",
+    iconChevronColor: "jade-300"
   }
-  return target;
 };
-
-const _hoisted_1 = { class: "flex-1 font-medium" };
-const _hoisted_2 = { class: "mt-16px" };
-const _sfc_main = /* @__PURE__ */ defineComponent({
+const V = (s, e) => {
+  const o = s.__vccOpts || s;
+  for (const [r, c] of e)
+    o[r] = c;
+  return o;
+}, Z = { class: "flex-1 font-medium" }, W = { class: "mt-16px" }, L = /* @__PURE__ */ j({
   __name: "Alert",
   props: {
-    type: { type: null, required: false, default: "info" },
-    detailsTitle: { type: String, required: false, default: "Additional details" },
-    dismissible: { type: Boolean, required: false },
-    noIcon: { type: Boolean, required: false },
-    notRounded: { type: Boolean, required: false },
-    duration: { type: Number, required: false }
+    type: { default: "info" },
+    detailsTitle: { default: "Additional details" },
+    dismissible: { type: Boolean },
+    noIcon: { type: Boolean },
+    notRounded: { type: Boolean },
+    duration: null
   },
   emits: ["dismiss"],
-  setup(__props, { emit }) {
-    const props = __props;
-    const dismissed = ref(false);
-    const slots = useSlots();
-    const typeClasses = computed(() => {
-      return alertClasses[props.type];
-    });
-    let timeout;
-    onMounted(() => {
-      if (props.duration) {
-        timeout = setTimeout(dismiss, props.duration);
-      }
-    });
-    onUnmounted(() => {
-      if (timeout) {
-        clearTimeout(timeout);
-      }
+  setup(s, { emit: e }) {
+    const o = s, r = E(!1), c = A(), l = f(() => w[o.type]);
+    let a;
+    B(() => {
+      o.duration && (a = setTimeout(u, o.duration));
+    }), I(() => {
+      a && clearTimeout(a);
     });
-    function dismiss() {
-      dismissed.value = true;
-      emit("dismiss");
-      if (timeout) {
-        clearTimeout(timeout);
-        timeout = void 0;
-      }
+    function u() {
+      r.value = !0, e("dismiss"), a && (clearTimeout(a), a = void 0);
     }
-    const computedIconProps = computed(() => {
-      return {
-        strokeColor: alertClasses[props.type].iconColor,
-        class: "my-4px mr-8px"
-      };
-    });
-    const icon = computed(() => {
-      switch (props.type) {
+    const i = f(() => ({
+      strokeColor: w[o.type].iconColor,
+      class: "my-4px mr-8px"
+    })), d = f(() => {
+      switch (o.type) {
         case "info":
           return null;
         case "success":
-          return () => h(IconCheckmarkOutline, computedIconProps.value);
+          return () => n(P, i.value);
         case "warning":
-          return () => h(IconWarningCircle, computedIconProps.value);
+          return () => n(z, i.value);
         case "error":
-          return () => h(IconWarningCircle, computedIconProps.value);
+          return () => n(z, i.value);
         default:
           return null;
       }
     });
-    return (_ctx, _cache) => {
-      return !dismissed.value ? (openBlock(), createElementBlock("div", {
-        key: 0,
-        class: normalizeClass(["overflow-hidden text-left", props.notRounded ? void 0 : "rounded"])
+    return (g, G) => r.value ? m("", !0) : (C(), b("div", {
+      key: 0,
+      class: p(["overflow-hidden text-left", o.notRounded ? void 0 : "rounded"])
+    }, [
+      v("div", {
+        class: p(["flex p-16px", t(l).headerClass])
       }, [
-        createElementVNode("div", {
-          class: normalizeClass(["flex p-16px", unref(typeClasses).headerClass])
-        }, [
-          createCommentVNode(" @slot replace the default left icon here "),
-          renderSlot(_ctx.$slots, "icon", normalizeProps(guardReactiveProps(unref(computedIconProps))), () => [
-            !props.noIcon && unref(icon) ? (openBlock(), createBlock(resolveDynamicComponent(unref(icon)), normalizeProps(mergeProps({ key: 0 }, unref(computedIconProps))), null, 16)) : createCommentVNode("v-if", true)
-          ], true),
-          createElementVNode("div", _hoisted_1, [
-            createCommentVNode(" @slot title of the alert "),
-            renderSlot(_ctx.$slots, "default", {}, void 0, true)
-          ]),
-          __props.dismissible ? (openBlock(), createElementBlock("button", {
-            key: 0,
-            class: "m-4px ml-8px h-16px",
-            onClick: dismiss,
-            "aria-label": "Dismiss"
-          }, [
-            createVNode(unref(IconActionDeleteLarge), {
-              "stroke-color": unref(typeClasses).iconCloseColor
-            }, null, 8, ["stroke-color"])
-          ])) : createCommentVNode("v-if", true)
-        ], 2),
-        unref(slots).body ? (openBlock(), createElementBlock("div", {
+        y(g.$slots, "icon", x(D(t(i))), () => [
+          !o.noIcon && t(d) ? (C(), S($(t(d)), x(H({ key: 0 }, t(i))), null, 16)) : m("", !0)
+        ], !0),
+        v("div", Z, [
+          y(g.$slots, "default", {}, void 0, !0)
+        ]),
+        s.dismissible ? (C(), b("button", {
           key: 0,
-          class: normalizeClass(["p-16px", unref(typeClasses).bodyClass])
+          class: "m-4px ml-8px h-16px",
+          onClick: u,
+          "aria-label": "Dismiss"
         }, [
-          createCommentVNode(" @slot body/details of the alert "),
-          renderSlot(_ctx.$slots, "body", {}, void 0, true)
-        ], 2)) : createCommentVNode("v-if", true),
-        unref(slots).details ? (openBlock(), createElementBlock("details", {
-          key: 1,
-          class: normalizeClass(["p-16px border-t-1", [unref(typeClasses).bodyClass, unref(typeClasses).borderClass]])
+          _(t(T), {
+            "stroke-color": t(l).iconCloseColor
+          }, null, 8, ["stroke-color"])
+        ])) : m("", !0)
+      ], 2),
+      t(c).body ? (C(), b("div", {
+        key: 0,
+        class: p(["p-16px", t(l).bodyClass])
+      }, [
+        y(g.$slots, "body", {}, void 0, !0)
+      ], 2)) : m("", !0),
+      t(c).details ? (C(), b("details", {
+        key: 1,
+        class: p(["p-16px border-t-1", [t(l).bodyClass, t(l).borderClass]])
+      }, [
+        v("summary", {
+          class: p(["flex font-medium cursor-pointer", t(l).detailsHeaderClass])
         }, [
-          createElementVNode("summary", {
-            class: normalizeClass(["flex font-medium cursor-pointer", unref(typeClasses).detailsHeaderClass])
-          }, [
-            createVNode(unref(IconChevronDownSmall), {
-              strokeColor: unref(typeClasses).iconChevronColor,
-              class: "icon my-4px mr-8px"
-            }, null, 8, ["strokeColor"]),
-            createTextVNode(" " + toDisplayString(props.detailsTitle), 1)
-          ], 2),
-          createElementVNode("div", _hoisted_2, [
-            createCommentVNode("@slot Togglable additional details"),
-            renderSlot(_ctx.$slots, "details", {}, void 0, true)
-          ])
-        ], 2)) : createCommentVNode("v-if", true)
-      ], 2)) : createCommentVNode("v-if", true);
-    };
+          _(t(R), {
+            strokeColor: t(l).iconChevronColor,
+            class: "icon my-4px mr-8px"
+          }, null, 8, ["strokeColor"]),
+          M(" " + N(o.detailsTitle), 1)
+        ], 2),
+        v("div", W, [
+          y(g.$slots, "details", {}, void 0, !0)
+        ])
+      ], 2)) : m("", !0)
+    ], 2));
   }
-});
-var Alert = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-836252c4"], ["__file", "/home/runner/work/cypress-design/cypress-design/components/Alert/vue/Alert.vue"]]);
+}), F = /* @__PURE__ */ V(L, [["__scopeId", "data-v-5e7e1d8e"]]);
+export {
+  F as default
+};
+/* <windicss-keep class="overflow-hidden text-left rounded flex p-16px flex-1 font-medium m-4px ml-8px h-16px border-t-1 cursor-pointer my-4px mr-8px mt-16px transform text-gray-800 bg-gray-100 bg-gray-50 text-gray-500 border-gray-100 text-gray-600 text-indigo-700 bg-indigo-100 bg-indigo-50 text-indigo-500 border-indigo-100 text-indigo-600 text-orange-700 bg-orange-100 bg-orange-50 text-orange-500 border-orange-100 text-orange-600 text-red-700 bg-red-100 bg-red-50 text-red-500 border-red-100 text-red-600 text-jade-700 bg-jade-100 bg-jade-50 text-jade-600 border-jade-100 icon-dark-gray-600 icon-dark-gray-500 icon-dark-gray-300 icon-dark-indigo-500 icon-dark-indigo-300 icon-dark-orange-500 icon-dark-orange-400 icon-dark-orange-300 icon-dark-red-500 icon-dark-red-400 icon-dark-red-300 icon-dark-jade-600 icon-dark-jade-500 icon-dark-jade-300"> */
 
-export { Alert as default };
 //# sourceMappingURL=index.es.js.map