@gitlab/ui 92.4.0 → 92.5.0

package/src/components/base/animated_icon/animated_sort_icon.vue

@@ -0,0 +1,84 @@
+<script>
+import GlBaseAnimatedIcon from './base_animated_icon.vue';
+
+export default {
+  name: 'GlAnimatedSortIcon',
+  extends: GlBaseAnimatedIcon,
+};
+</script>
+<template>
+  <svg
+    :class="iconStateClass"
+    class="gl-animated-sort-icon"
+    :aria-label="ariaLabel"
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      class="gl-animated-sort-arrow-left"
+      d="M3 1.06065L0.75 3.31065"
+      stroke="currentColor"
+      stroke-width="1.5"
+      stroke-linecap="round"
+    />
+    <path
+      class="gl-animated-sort-arrow-right"
+      d="M5.25 3.31065L3 1.06065"
+      stroke="currentColor"
+      stroke-width="1.5"
+      stroke-linecap="round"
+    />
+    <path
+      class="gl-animated-sort-long-line-on"
+      d="M8.75 2.75L15.25 2.75"
+      stroke="currentColor"
+      stroke-width="1.5"
+      stroke-linecap="round"
+    />
+    <path
+      class="gl-animated-sort-medium-line-on"
+      d="M8.75 6L13.25 6"
+      stroke="currentColor"
+      stroke-width="1.5"
+      stroke-linecap="round"
+    />
+    <path
+      class="gl-animated-sort-short-line-on"
+      d="M8.75 9.25L10.25 9.25"
+      stroke="currentColor"
+      stroke-width="1.5"
+      stroke-linecap="round"
+    />
+    <path
+      class="gl-animated-sort-long-line-off"
+      d="M8.75 13.25L15.25 13.25"
+      stroke="currentColor"
+      stroke-width="1.5"
+      stroke-linecap="round"
+    />
+    <path
+      class="gl-animated-sort-medium-line-off"
+      d="M8.75 10L13.25 10"
+      stroke="currentColor"
+      stroke-width="1.5"
+      stroke-linecap="round"
+    />
+    <path
+      class="gl-animated-sort-short-line-off"
+      d="M8.75 6.75L10.25 6.75"
+      stroke="currentColor"
+      stroke-width="1.5"
+      stroke-linecap="round"
+    />
+    <path
+      class="gl-animated-sort-line"
+      d="M3 13.2506L3 4.0006"
+      stroke="currentColor"
+      stroke-width="1.5"
+      stroke-linecap="round"
+    />
+  </svg>
+</template>

package/src/components/base/animated_icon/animated_star_icon.vue

@@ -0,0 +1,27 @@
+<script>
+import GlBaseAnimatedIcon from './base_animated_icon.vue';
+
+export default {
+  name: 'GlAnimatedStarIcon',
+  extends: GlBaseAnimatedIcon,
+};
+</script>
+<template>
+  <svg
+    :class="iconStateClass"
+    :aria-label="ariaLabel"
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      class="gl-animated-star-shape"
+      d="M6.56177 5.79259L8 2.33467L9.43822 5.79259C9.58223 6.13883 9.90785 6.37539 10.2816 6.40536L14.0147 6.70464L11.1705 9.14103C10.8857 9.38498 10.7613 9.76775 10.8484 10.1325L11.7173 13.7754L8.52125 11.8232C8.20124 11.6278 7.79876 11.6278 7.47875 11.8232L4.28269 13.7754L5.15165 10.1325C5.23865 9.76776 5.11428 9.38498 4.82949 9.14103L1.98526 6.70464L5.71837 6.40536C6.09216 6.37539 6.41777 6.13882 6.56177 5.79259Z"
+      fill="transparent"
+      stroke="currentColor"
+      stroke-width="1.5"
+    />
+  </svg>
+</template>

package/src/components/base/animated_icon/animated_todo_icon.vue

@@ -0,0 +1,49 @@
+<script>
+import GlBaseAnimatedIcon from './base_animated_icon.vue';
+
+export default {
+  name: 'GlAnimatedTodoIcon',
+  extends: GlBaseAnimatedIcon,
+};
+</script>
+<template>
+  <svg
+    :class="iconStateClass"
+    :aria-label="ariaLabel"
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      class="gl-animated-todo-box"
+      d="M14.25 6.75L14.25 13C14.25 13.6904 13.6904 14.25 13 14.25L3 14.25C2.30964 14.25 1.75 13.6904 1.75 13L1.75 3C1.75 2.30964 2.30964 1.75 3 1.75L13.25 1.75"
+      stroke="currentColor"
+      stroke-width="1.5"
+      stroke-linecap="round"
+    />
+    <path
+      class="gl-animated-todo-plus-line"
+      d="M10.75 3L15.25 3"
+      stroke="currentColor"
+      stroke-width="1.5"
+      stroke-linecap="round"
+    />
+    <path
+      class="gl-animated-todo-plus-line"
+      d="M13 5.25L13 0.75"
+      stroke="currentColor"
+      stroke-width="1.5"
+      stroke-linecap="round"
+    />
+    <path
+      class="gl-animated-todo-check"
+      d="M6.75 7.76299L9.15312 10.2469L15.25 4.15"
+      stroke="currentColor"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+</template>

package/src/components/base/animated_icon/animated_upload_icon.vue

@@ -0,0 +1,41 @@
+<script>
+import GlBaseAnimatedIcon from './base_animated_icon.vue';
+
+export default {
+  name: 'GlAnimatedUploadIcon',
+  extends: GlBaseAnimatedIcon,
+};
+</script>
+<template>
+  <svg
+    :class="iconStateClass"
+    :aria-label="ariaLabel"
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      class="gl-animated-upload-base"
+      d="M14.25 9.75V13C14.25 13.6904 13.6904 14.25 13 14.25L3 14.25C2.30964 14.25 1.75 13.6904 1.75 13L1.75 9.75"
+      stroke="currentColor"
+      stroke-width="1.5"
+      stroke-linecap="round"
+    />
+    <path
+      class="gl-animated-upload-line"
+      d="M8 11.25V2.5"
+      stroke="currentColor"
+      stroke-width="1.5"
+      stroke-linecap="round"
+    />
+    <path
+      class="gl-animated-upload-arrow"
+      d="M11.25 5.31066L8 2.06066L4.75 5.31066"
+      stroke="currentColor"
+      stroke-width="1.5"
+      stroke-linecap="round"
+    />
+  </svg>
+</template>

package/src/components/base/animated_icon/base_animated_icon.vue

@@ -0,0 +1,39 @@
+<script>
+export default {
+  name: 'GlBaseAnimatedIcon',
+  props: {
+    /**
+     * Accessible icon name used by screen readers and other assistive technologies.
+     * Provide when icon is not merely decorative
+     */
+    ariaLabel: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    isOn: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  computed: {
+    iconStateClass() {
+      return this.isOn
+        ? 'gl-animated-icon gl-animated-icon-on'
+        : 'gl-animated-icon gl-animated-icon-off';
+    },
+  },
+};
+</script>
+<template>
+  <svg
+    :class="iconStateClass"
+    :aria-label="ariaLabel"
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  />
+</template>

package/src/scss/components.scss

@@ -19,6 +19,7 @@
 @import '../components/base/avatar_labeled/avatar_labeled';
 @import '../components/base/avatar_link/avatar_link';
 @import '../components/base/avatars_inline/avatars_inline';
+@import '../components/base/animated_icon/animated_icon';
 @import '../components/base/badge/badge';
 @import '../components/base/breadcrumb/breadcrumb';
 @import '../components/base/banner/banner';

package/src/scss/utilities.scss

@@ -76,12 +76,30 @@ $gl-animate-skeleton-loader-max-width: 64 * $grid-size;
 .gl-prefers-reduced-motion-transition {
   @media (prefers-reduced-motion) {
     transition-duration: .01ms !important;
+    transition-delay: 0ms !important;
   }
 }
 
 .gl-prefers-reduced-motion-transition\! {
   @media (prefers-reduced-motion) {
     transition-duration: .01ms !important;
+    transition-delay: 0ms !important;
+  }
+}
+
+.gl-prefers-reduced-motion-animation {
+  @media (prefers-reduced-motion) {
+    animation-duration: .01ms !important;
+    animation-iteration-count: 1 !important;
+    animation-delay: 0ms !important;
+  }
+}
+
+.gl-prefers-reduced-motion-animation\! {
+  @media (prefers-reduced-motion) {
+    animation-duration: .01ms !important;
+    animation-iteration-count: 1 !important;
+    animation-delay: 0ms !important;
   }
 }
 

package/src/scss/utility-mixins/animation.scss

@@ -1,6 +1,15 @@
 @mixin gl-prefers-reduced-motion-transition {
   @media (prefers-reduced-motion) {
     transition-duration: .01ms !important;
+    transition-delay: 0ms !important;
+  }
+}
+
+@mixin gl-prefers-reduced-motion-animation {
+  @media (prefers-reduced-motion) {
+    animation-duration: .01ms !important;
+    animation-iteration-count: 1 !important;
+    animation-delay: 0ms !important;
   }
 }