@leaflink/stash 43.5.1 → 44.0.0-beta.2

package/styles/base.css

@@ -1,7 +1,14 @@
 @tailwind base;
-
 @tailwind components;
 
+/*
+  NOTE: Commenting this out cause packaging tw classes inside of stash's build causes a
+  lot of duplication and order issues with downstream applications. You need to configure your
+  application downstream to analyze stash files to ensure they are included in your build.
+
+  @tailwind utilities;
+*/
+
 /**
  * This is a custom .container class that conflicts with tailwinds out of the box container class.
  * Placed here before tw utilities, and specifically not within @layer components, so that it is
@@ -15,19 +22,6 @@
   width: 100%;
 }
 
-/* helpful class to show an emdash when an element like a table cell is empty */
-.show-empty:empty::before {
-  content: "—";
-}
-
-/*
-  NOTE: Commenting this out cause packaging tw classes inside of stash's build causes a
-  lot of duplication and order issues with downstream applications. You need to configure your
-  application downstream to analyze stash files to ensure they are included in your build.
-
-  @tailwind utilities;
-*/
-
 /**
  * General styles and/or reset css could go here.
  */
@@ -35,6 +29,12 @@
 :root {
   --grid-gutter: 12px;
 
+  /* The tooltips position relative to the toggle element */
+  --tooltip-position: calc(100% + theme('spacing.3'));
+
+  /* Centers arrow horizontally or vertically along tooltip on arrow's center */
+  --arrow-position-centered: calc(50% - theme('spacing[1.5]'));
+
   @media screen(lg) {
     --grid-gutter: 24px;
   }
@@ -42,7 +42,7 @@
 
 @layer base {
   @font-face {
-    font-family: 'Sofia';
+    font-family: Sofia;
     font-style: normal;
     font-weight: 400;
     src:
@@ -51,7 +51,7 @@
   }
 
   @font-face {
-    font-family: 'Sofia';
+    font-family: Sofia;
     font-style: normal;
     font-weight: 500;
     src:
@@ -60,7 +60,7 @@
   }
 
   @font-face {
-    font-family: 'Sofia';
+    font-family: Sofia;
     font-style: normal;
     font-weight: 600;
     src:
@@ -79,7 +79,7 @@
   body {
     @apply tw-leading-normal tw-text-ice-700 tw-bg-ice-100 tw-font-normal tw-text-sm;
 
-    font-family: 'Sofia', sans-serif;
+    font-family: Sofia, sans-serif;
     min-height: 100vh;
     position: relative;
   }
@@ -128,7 +128,7 @@
 
   @media screen(md) {
     .heading-jumbo {
-      font-size: theme(fontSize.5xl);
+      font-size: theme('fontSize.5xl');
     }
   }
 
@@ -142,6 +142,8 @@
 
   address {
     font-style: normal;
+    line-height: theme('spacing.6');
+    white-space: pre-line;
   }
 
   /**
@@ -258,6 +260,12 @@
     margin: 0; /* 2 */
   }
 
+  button {
+    display: inline-block;
+    font-size: 0.875rem;
+    vertical-align: middle;
+  }
+
   /**
    * Show the overflow in IE.
    * 1. Show the overflow in Edge.
@@ -395,4 +403,365 @@
   template {
     display: none;
   }
+
+  ul,
+  ol {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+
+    &.bullets {
+      list-style-type: disc;
+      padding-left: theme('spacing.9');
+
+      li {
+        margin-bottom: theme('spacing.3');
+      }
+    }
+  }
+
+  table {
+    border-collapse: collapse;
+    border-spacing: 0;
+    max-width: 100%;
+    width: 100%;
+
+    td,
+    th {
+      border-top: 1px solid var(--color-ice-500);
+      padding: 0.766rem;
+    }
+
+    thead {
+      td,
+      th {
+        background-color: var(--color-ice-200);
+        border-bottom: 2px solid var(--color-ice-500);
+        border-top: none;
+        color: var(--color-ice-900);
+        font-weight: 500;
+        text-align: left;
+        user-select: none;
+        white-space: nowrap;
+      }
+    }
+
+    tbody {
+      td {
+        font-weight: 400;
+      }
+    }
+
+    tfoot {
+      tr {
+        td {
+          border: none;
+        }
+      }
+    }
+  }
+}
+
+/**
+ * Custom global classes.
+ *
+ * These are global classes that are not part of the tailwindcss framework. These should be created & used sparingly
+ * and only when using a global class is the best solution.
+ */
+
+/* helpful class to show an emdash when an element like a table cell is empty */
+.show-empty:empty::before {
+  content: "—";
+}
+
+/**
+ * Stash's v-tooltip styles.
+ */
+
+.tooltip {
+  --offset: 0;
+
+  background: var(--color-ice-900);
+  border-radius: theme('borderRadius.DEFAULT');
+  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25);
+  color: var(--color-white);
+  font-size: 0.75rem;
+  line-height: calc(16 / 12);
+  opacity: 0;
+  padding: theme('spacing.3');
+  pointer-events: none; /* Tooltips should disappear once the user hovers away */
+  position: absolute;
+  text-align: center;
+  transition: opacity theme('transitionDuration.150') theme('transitionTimingFunction.swing'), visibility theme('transitionDuration.150') theme('transitionTimingFunction.swing');
+  visibility: hidden;
+  white-space: normal;
+  width: 148px;
+
+  &::after {
+    background-color: var(--color-ice-900);
+    border-radius: 0 2px 0 0;
+    clip-path: polygon(100% 0%, 100% 100%, 0% 0%);
+    content: '';
+    display: inline-block;
+    height: 12px;
+    position: absolute;
+    top: calc(-1 * theme('spacing[1.5]'));
+    transform: rotate(135deg);
+    z-index: theme('zIndex.behind');
+    width: 12px;
+  }
+
+  &--bottom,
+  &--top {
+    left: calc(50% + calc(var(--offset) * 1px));
+    transform: translateX(-50%);
+
+    &::after {
+      left: calc(#{$arrow-position-centered} + calc(var(--offset) * -1px));
+    }
+  }
+
+  &--bottom {
+    top: var(--tooltip-position);
+
+    &::after {
+      transform: rotate(-45deg);
+    }
+  }
+
+  &--top {
+    bottom: var(--tooltip-position);
+
+    &::after {
+      top: calc(100% - theme('spacing[1.5]'));
+    }
+  }
+
+  &--left,
+  &--right {
+    top: 50%;
+    transform: translateY(-50%);
+
+    &::after {
+      top: var(--arrow-position-centered);
+    }
+  }
+
+  &--left {
+    right: var(--tooltip-position);
+
+    &::after {
+      left: calc(100% - theme('spacing[1.5]'));
+      transform: rotate(45deg);
+    }
+  }
+
+  &--right {
+    left: var(--tooltip-position);
+
+    &::after {
+      left: calc(-1 * theme('spacing[1.5]'));
+      transform: rotate(-135deg);
+    }
+  }
+}
+
+.tooltip-toggle {
+  display: inline-block;
+  position: relative;
+  z-index: 0;
+
+  &:hover {
+    outline: none;
+    z-index: theme('zIndex.modal');
+
+    .tooltip {
+      opacity: 1;
+      visibility: visible;
+    }
+  }
+}
+
+/**
+ * Animations
+ *
+ * Todo: These should be moved to tailwind as custom animations.
+ */
+
+@keyframes shake {
+  from,
+  to {
+    transform: translate3d(0, 0, 0);
+  }
+
+  10%,
+  30%,
+  50%,
+  70%,
+  90% {
+    transform: translate3d(-10px, 0, 0);
+  }
+
+  20%,
+  40%,
+  60%,
+  80% {
+    transform: translate3d(10px, 0, 0);
+  }
+}
+
+.fx-shake {
+  animation: 2s shake 1;
+}
+
+
+@keyframes pulse {
+  from {
+    transform: scale3d(1, 1, 1);
+  }
+
+  50% {
+    transform: scale3d(1.25, 1.25, 1.25);
+  }
+
+  to {
+    transform: scale3d(1, 1, 1);
+  }
+}
+
+.fx-pulse {
+  animation: 1s pulse;
+}
+
+@keyframes spin-loading {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  65% {
+    transform: rotate(720deg);
+  }
+
+  100% {
+    transform: rotate(720deg);
+  }
+}
+
+.fx-spin {
+  animation-duration: 1.5s;
+  animation-iteration-count: infinite;
+  animation-name: spin-loading;
+  animation-timing-function: ease-in-out;
+}
+
+@keyframes flash {
+  from {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+.fx-flash {
+  animation: 0.5s flash;
+}
+
+/**
+ * Transitions
+ *
+ * Todo: These should be moved to tailwind as custom transitions.
+ * See: https://tailwindcss.com/docs/transition-property
+ */
+
+.scale {
+  &-enter-active,
+  &-leave-active {
+    transition: theme('transitionDuration.300') theme('transitionTimingFunction.ease-in-out');
+  }
+
+  &-enter-from,
+  &-leave-from,
+  &-leave-to {
+    opacity: 0;
+    transform: scale(0);
+  }
+}
+
+.slide-y {
+  &-enter-active,
+  &-leave-active {
+    transition: theme('transitionDuration.150') theme('transitionTimingFunction.swing');
+  }
+
+  &-enter-from,
+  &-leave-to {
+    opacity: 0;
+    transform: translateY(-0.875rem);
+  }
+}
+
+.slide-x {
+  &-enter-active,
+  &-leave-active {
+    transition: theme('transitionDuration.150') theme('transitionTimingFunction.swing');
+  }
+
+  &-enter-from,
+  &-leave-to {
+    opacity: 0;
+    transform: translateX(-0.875rem);
+  }
+}
+
+.fade {
+  &-enter-active,
+  &-leave-active {
+    transition: opacity theme('transitionDuration.150') theme('transitionTimingFunction.swing');
+  }
+
+  &-enter-from,
+  &-leave-to {
+    opacity: 0;
+  }
+
+  &-enter-to {
+    opacity: 1;
+  }
+}
+
+.expand {
+  &-enter-active,
+  &-leave-active {
+    transition:
+    height theme('transitionDuration.300') theme('transitionTimingFunction.ease-in-out'),
+    opacity theme('transitionDuration.500') theme('transitionDuration.150'),
+    transform theme('transitionDuration.500') theme('transitionDuration.150');
+  }
+
+  &-enter-from,
+  &-leave-to {
+    height: 0;
+    opacity: 0;
+    transform: translateY(-0.875rem);
+    transition-delay: 0s;
+  }
+
+  &-leave-from,
+  &-enter-to {
+    height: auto;
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.move {
+  &-move {
+    transition: transform theme('transitionDuration.150') theme('transitionTimingFunction.swing');
+  }
 }

package/styles/elements/_links.scss

@@ -15,7 +15,7 @@
 ---------------------------------------- */
 
 a {
-  color: var(--color-blue);
+  color: var(--color-blue-500);
   font-weight: font-weight('medium');
   text-decoration: none;
 

package/dist/Button.vue_used_vue_type_style_index_0_lang.module-b77978d6.js

@@ -1,17 +0,0 @@
-const t = "_button_1ocn8_2", o = {
-  button: t,
-  "button--solid": "_button--solid_1ocn8_36",
-  "button--ghost": "_button--ghost_1ocn8_58",
-  "button--primary": "_button--primary_1ocn8_81 _button--solid_1ocn8_36",
-  "button--secondary": "_button--secondary_1ocn8_88 _button--ghost_1ocn8_58",
-  "button--tertiary": "_button--tertiary_1ocn8_95 _button--ghost_1ocn8_58",
-  "button--icon": "_button--icon_1ocn8_102",
-  "button--iconLabel": "_button--iconLabel_1ocn8_103",
-  "button--inline": "_button--inline_1ocn8_143",
-  "button--blue": "_button--blue_1ocn8_161",
-  "button--red": "_button--red_1ocn8_175"
-};
-export {
-  o as s
-};
-//# sourceMappingURL=Button.vue_used_vue_type_style_index_0_lang.module-b77978d6.js.map

package/dist/Button.vue_used_vue_type_style_index_0_lang.module-b77978d6.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Button.vue_used_vue_type_style_index_0_lang.module-b77978d6.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;"}

package/dist/Checkbox.vue_vue_type_style_index_0_scoped_0d7e7fd0_lang-4ed993c7.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Checkbox.vue_vue_type_style_index_0_scoped_0d7e7fd0_lang-4ed993c7.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/Paginate.vue_used_vue_type_style_index_0_lang.module-bfccf992.js

@@ -1,11 +0,0 @@
-const _ = "_pagination_kh7yl_2", i = "_prev_kh7yl_20", t = "_next_kh7yl_25", n = {
-  pagination: _,
-  prev: i,
-  next: t,
-  "is-active": "_is-active_kh7yl_38",
-  "is-disabled": "_is-disabled_kh7yl_51"
-};
-export {
-  n as s
-};
-//# sourceMappingURL=Paginate.vue_used_vue_type_style_index_0_lang.module-bfccf992.js.map

package/dist/Paginate.vue_used_vue_type_style_index_0_lang.module-bfccf992.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Paginate.vue_used_vue_type_style_index_0_lang.module-bfccf992.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/dist/Tab.vue_vue_type_script_setup_true_lang-b810bee8.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Tab.vue_vue_type_script_setup_true_lang-b810bee8.js","sources":["../src/components/Tab/Tab.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { computed, inject, nextTick, onMounted, toRefs } from 'vue';\n  import { type RouteLocationRaw, type RouterLinkProps } from 'vue-router';\n\n  import Badge from '../Badge/Badge.vue';\n  import { TABS_INJECTION } from '../Tabs/Tabs.vue';\n\n  /**\n   * Allowed attributes for the `<a>` element when the `href` prop is used.\n   */\n  type AnchorAttrs = HTMLAnchorElement['download'] | HTMLAnchorElement['hreflang'] | HTMLAnchorElement['ping'] | HTMLAnchorElement['referrerPolicy'] | HTMLAnchorElement['rel'] | HTMLAnchorElement['target'] | HTMLAnchorElement['type'];\n\n  export interface TabProps {\n    /**\n     * The tab identifier\n     */\n    value: string;\n\n    /**\n     * Router link `to` prop\n     */\n    to?: RouteLocationRaw;\n\n    /**\n     * Anchor tag href. Used for navigating to non-vue pages, such as Django pages in marketplace.\n     */\n    href?: string;\n\n    /**\n     * The badge's content\n     */\n    badge?: string | number;\n\n    /**\n     * Will render a plain text item if true.\n     */\n    disabled?: boolean\n\n    /**\n     * Props for the `<a>` element when the `href` prop is used\n     */\n    anchorProps?: Record<AnchorAttrs, string>;\n\n    /**\n     * Props for the `<RouterLink>` element when the `to` prop is used\n     */\n    routerLinkProps?: Omit<RouterLinkProps, 'to'>;\n  }\n\n  const props = defineProps<TabProps>();\n\n  const tabsInjection = inject(TABS_INJECTION.key);\n\n  if (!tabsInjection) {\n    throw Error('The Tab component must be a child of the Tabs component.');\n  }\n\n  const { setActiveTab, activeTab, variant } = tabsInjection;\n\n  const isTabActive = computed(() => {\n    return props.value === activeTab.value;\n  });\n\n  const is = computed(() => {\n    if (props.to) {\n      return 'router-link';\n    }\n\n    if (props.href) {\n      return 'a';\n    }\n\n    return 'button';\n  });\n\n  /**\n   * Note: this click handler gets ignored when the `href` prop is used; `preventDefault()` is intentionally omitted in order to enable the `href` prop to work correctly. The `href` prop is used for navigation to non-vue pages, such as Django pages in marketplace.\n   */\n  function onClick(tabValue: string) {\n    if (props.disabled) {\n      return;\n    }\n\n    setActiveTab(tabValue);\n  }\n\n  const panelId = computed(() => `tabpanel-${props.value}`);\n\n  onMounted(async () => {\n    await nextTick();\n\n    if (process.env.NODE_ENV !== 'test' && isTabActive.value && !document.getElementById(panelId.value)) {\n      // The following warning ensures optimal accessibility is maintained when using the Tabs component. See: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tab_role#example\n      console.warn(`The <Tab> with value \"${props.value}\" is active, but its corresponding tab panel cannot be found. Please ensure that the corresponding tab panel has an \"id\" attribute with value \"${panelId.value}\" and a \"role\" attribute with value \"tabpanel\".`);\n    }\n  });\n\n  const dynamicComponentAttrs = computed(() => {\n    if (props.to && props.routerLinkProps) {\n      return toRefs(props.routerLinkProps);\n    }\n\n    if (props.href && props.anchorProps) {\n      return toRefs(props.anchorProps);\n    }\n\n    return {};\n  });\n</script>\n\n<template>\n  <li\n    :id=\"`tab-${props.value}`\"\n    role=\"tab\"\n    :aria-selected=\"isTabActive\"\n    :aria-controls=\"panelId\"\n    :aria-disabled=\"props.disabled\"\n    class=\"stash-tab\"\n    :class=\"[\n      {\n        'stash-tab--active is-active': isTabActive,\n        'stash-tab--disabled': props.disabled,\n        'stash-tab--variant-line': variant === 'line',\n        'stash-tab--variant-enclosed': variant === 'enclosed',\n      },\n    ]\"\n    @click=\"onClick(props.value)\"\n    @keypress.enter=\"onClick(props.value)\"\n  >\n    <component\n      v-bind=\"dynamicComponentAttrs\"\n      :is=\"is\"\n      :to=\"props.to\"\n      :href=\"props.href\"\n      class=\"\n        tw-font-medium tw-text-sm tw-border-solid tw-py-1.5 tw-flex tw-items-center tw-justify-center tw-cursor-pointer\n        hover:tw-no-underline\n        tw-whitespace-nowrap\n      \"\n      :class=\"[\n        {\n          'tw-border-b-2': variant === 'line',\n          'tw-px-6 tw-border-t-4': variant === 'enclosed',\n          'tw-rounded-t tw-bg-white': isTabActive && variant === 'enclosed',\n          'focus:tw-no-underline': props.href,\n          'tw-pointer-events-none tw-text-ice-500': props.disabled,\n          'tw-text-ice-700': !props.disabled && !isTabActive,\n        },\n        [\n          isTabActive\n            ? 'tw-border-blue-500 tw-text-blue-500'\n            : 'tw-border-transparent hover:tw-text-blue-500 focus:tw-text-blue-500',\n        ],\n      ]\"\n      :tabindex=\"props.disabled ? -1 : 0\"\n    >\n      <!-- The margin-top on the <div> below is necessary to fix the vertical alignment of text in the default slot since our Sofia font has extra space under the baseline -->\n      <div class=\"tw-mt-0.5\">\n        <Badge :content=\"props.badge\" position=\"inline\" color=\"red\" :is-disabled=\"props.disabled\">\n          <slot :is-active=\"isTabActive\" :is-disabled=\"props.disabled\" :variant=\"variant\"></slot>\n        </Badge>\n      </div>\n    </component>\n  </li>\n</template>\n"],"names":["tabsInjection","inject","TABS_INJECTION","setActiveTab","activeTab","variant","isTabActive","computed","props","is","onClick","tabValue","panelId","onMounted","nextTick","dynamicComponentAttrs","toRefs"],"mappings":";;;;;;;;;;;;;;;iBAmDQA,IAAgBC,EAAOC,EAAe,GAAG;AAE/C,QAAI,CAACF;AACH,YAAM,MAAM,0DAA0D;AAGxE,UAAM,EAAE,cAAAG,GAAc,WAAAC,GAAW,SAAAC,EAAA,IAAYL,GAEvCM,IAAcC,EAAS,MACpBC,EAAM,UAAUJ,EAAU,KAClC,GAEKK,IAAKF,EAAS,MACdC,EAAM,KACD,gBAGLA,EAAM,OACD,MAGF,QACR;AAKD,aAASE,EAAQC,GAAkB;AACjC,MAAIH,EAAM,YAIVL,EAAaQ,CAAQ;AAAA,IACvB;AAEA,UAAMC,IAAUL,EAAS,MAAM,YAAYC,EAAM,KAAK,EAAE;AAExD,IAAAK,EAAU,YAAY;AACpB,YAAMC,EAAS,GAEX,QAAQ,IAAI,aAAa,UAAUR,EAAY,SAAS,CAAC,SAAS,eAAeM,EAAQ,KAAK,KAEhG,QAAQ,KAAK,yBAAyBJ,EAAM,KAAK,kJAAkJI,EAAQ,KAAK,iDAAiD;AAAA,IACnQ,CACD;AAEK,UAAAG,IAAwBR,EAAS,MACjCC,EAAM,MAAMA,EAAM,kBACbQ,EAAOR,EAAM,eAAe,IAGjCA,EAAM,QAAQA,EAAM,cACfQ,EAAOR,EAAM,WAAW,IAG1B,EACR;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/styles/components/_all.scss

@@ -1,14 +0,0 @@
-/**
-
-  Components: specific UI components. This is where majority
-              of our work takes place.
-
-              Note: ideally (ie. eventually) this layer should
-              be auto-generated by code from each Vue component.
-
-*/
-
-@import 'box';
-@import 'item-list';
-@import 'sidebar';
-@import 'top-header';

package/styles/components/_box.scss

@@ -1,13 +0,0 @@
-/**
- * Box: Emulated "ibox" style, from olden days. DEPRECATED!
- *
- * @deprecated rather than using the global .box class, please use the Box` component instead.
- */
-
-.box {
-  @include elevation('low');
-
-  background: var(--color-white);
-  border-radius: $border-radius;
-  padding: space(3) var(--grid-gutter);
-}

package/styles/components/_item-list.scss

@@ -1,78 +0,0 @@
-/**
-
-  Item List. (Item List?? This name is temporary)
-
-  Styles to support lists of "items". These are generic items, the
-  only distinguishing feature -- what makes it distinct from <table> --
-  is that these "lists" are not tabular data. Tables, by contrast, are
-  more for displaying large amounts of _data_ (ie. what is more
-  prevalent on Reports pages, etc).
-
-
-  examples:
-  * Products in the Inventory,
-  * Customers List
-  * Items in an Order
-  * Service items (on Browse Services)
-  * Clients in the Contact List
-
-
-       ◡◠ ✥ ◠◡
-
-  Table of Contents:
-
-    • Item List
-
-*/
-
-/* ---------------------------------------
-  Item List
----------------------------------------- */
-$border: border(thin, var(--color-ice));
-
-.item-list {
-  border-bottom: $border;
-  border-top: $border;
-  margin-left: calc(var(--grid-gutter) * -1);
-  margin-right: calc(var(--grid-gutter) * -1);
-  min-width: 100%;
-
-  &__header {
-    background: var(--color-ice-200);
-    border-bottom: $border;
-    border-top-left-radius: $border-radius;
-    border-top-right-radius: $border-radius;
-    color: var(--color-ice-900);
-    font-weight: 500;
-    overflow: hidden;
-    padding: space(2);
-  }
-
-  &__content {
-    border-bottom-left-radius: $border-radius;
-    border-bottom-right-radius: $border-radius;
-  }
-
-  &__row {
-    background: var(--color-white);
-    border-bottom: $border;
-    padding: space(2);
-
-    &:last-child {
-      border-bottom: 0;
-      border-bottom-left-radius: $border-radius;
-      border-bottom-right-radius: $border-radius;
-    }
-  }
-
-  @include breakpoint('md') {
-    border: $border;
-    border-radius: $border-radius;
-    margin: 0;
-
-    &__header,
-    &__row {
-      padding: space(1) space(2);
-    }
-  }
-}