@gitlab/ui 92.3.1 → 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/components/experimental/duo/workflow/components/duo_workflow_panel/duo_workflow_panel.md

@@ -5,13 +5,17 @@ and WebUI.
 
 To use this component, import it and fill out the available slots:
 
-* `title`: the main title for the panel
-* `subtitle`: the small text adjacent to the title
-* `content`: the content of the panel, hidden away when the collapse is toggled
+- `title`: the main title for the panel
+- `subtitle`: the small text adjacent to the title
+- `content`: the content of the panel, hidden away when the collapse is toggled
 
 Also provide an icon via the `headerIcon` prop. This icon is displayed adjacent
 to the title.
 
+You can pass `expanded` prop set to `false` if you need a section to be
+collapsed by default. You can also listen to `toggle-panel` event to know
+when the expanded state changed.
+
 Translations for the title of the single button can be provided either via the
 props `expandButtonTitle` and `collapseTitleButton` or via the translation
 configuration:

package/src/components/experimental/duo/workflow/components/duo_workflow_panel/duo_workflow_panel.vue

@@ -34,9 +34,14 @@ export default {
       required: false,
       default: translate('GlDuoWorkflowPanel.collapseButtonTitle', 'Collapse'),
     },
-  },
-  data() {
-    return { expanded: true };
+    /**
+     * Whether the panel is expanded or not
+     */
+    expanded: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
   },
   computed: {
     buttonIcon() {
@@ -46,11 +51,6 @@ export default {
       return this.expanded ? this.collapsePanelButtonTitle : this.expandPanelButtonTitle;
     },
   },
-  methods: {
-    toggleExpanded() {
-      this.expanded = !this.expanded;
-    },
-  },
 };
 </script>
 <template>
@@ -74,7 +74,7 @@ export default {
         :icon="buttonIcon"
         :title="buttonTitle"
         :aria-label="buttonTitle"
-        @click="toggleExpanded"
+        @click="$emit('toggle-panel')"
       />
     </div>
     <gl-collapse :visible="expanded">

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