@gitlab/ui 111.7.1 → 111.8.0

package/dist/index.js

@@ -13,6 +13,9 @@ export { default as GlIntersectionObserver } from './components/utilities/inters
 export { default as GlDeprecatedLink, default as GlLink } from './components/base/link/link';
 export { default as GlIcon } from './components/base/icon/icon';
 export { default as GlAnimatedChevronRightDownIcon } from './components/base/animated_icon/animated_chevron_right_down_icon';
+export { default as GlAnimatedChevronLgRightDownIcon } from './components/base/animated_icon/animated_chevron_lg_right_down_icon';
+export { default as GlAnimatedChevronDownUpIcon } from './components/base/animated_icon/animated_chevron_down_up_icon';
+export { default as GlAnimatedChevronLgDownUpIcon } from './components/base/animated_icon/animated_chevron_lg_down_up_icon';
 export { default as GlAnimatedDuoChatIcon } from './components/base/animated_icon/animated_duo_chat_icon';
 export { default as GlAnimatedLoaderIcon } from './components/base/animated_icon/animated_loader_icon';
 export { default as GlAnimatedNotificationIcon } from './components/base/animated_icon/animated_notifications_icon';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "111.7.1",
+  "version": "111.8.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",

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

@@ -0,0 +1,36 @@
+<script>
+import GlBaseAnimatedIcon from './base_animated_icon.vue';
+
+export default {
+  name: 'GlAnimatedChevronDownUpIcon',
+  extends: GlBaseAnimatedIcon,
+};
+</script>
+<template>
+  <svg
+    :class="[iconStateClass, iconVariantClass]"
+    :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-chevron-down-up-arrow-left-line"
+      d="M0 0L0 4.6"
+      stroke="currentColor"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      class="gl-animated-chevron-down-up-arrow-right-line"
+      d="M0 0L0 4.6"
+      stroke="currentColor"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+</template>

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

@@ -0,0 +1,36 @@
+<script>
+import GlBaseAnimatedIcon from './base_animated_icon.vue';
+
+export default {
+  name: 'GlAnimatedChevronLgDownUpIcon',
+  extends: GlBaseAnimatedIcon,
+};
+</script>
+<template>
+  <svg
+    :class="[iconStateClass, iconVariantClass]"
+    :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-chevron-lg-down-up-arrow-left-line"
+      d="M0 0L0 7.5"
+      stroke="currentColor"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      class="gl-animated-chevron-lg-down-up-arrow-right-line"
+      d="M0 0L0 7.5"
+      stroke="currentColor"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+</template>

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

@@ -0,0 +1,28 @@
+<script>
+import GlBaseAnimatedIcon from './base_animated_icon.vue';
+
+export default {
+  name: 'GlAnimatedChevronLgRightDownIcon',
+  extends: GlBaseAnimatedIcon,
+};
+</script>
+<template>
+  <svg
+    :class="[iconStateClass, iconVariantClass]"
+    :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-chevron-lg-right-down-arrow"
+      d="M5.75 13.2537L11.0018 8.00183L5.75 2.75"
+      stroke="currentColor"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+</template>

package/src/components/base/animated_icon/animated_icon.scss

@@ -53,6 +53,28 @@
   color: var(--gl-icon-color-success);
 }
 
+/* * * * * * * * * * * * * * * * *
+ * animated_chevron_lg_right_down_icon.vue
+ * * * * * * * * * * * * * * * * */
+
+.gl-animated-chevron-lg-right-down-arrow {
+  transform-origin: center center;
+}
+
+/* on state */
+.gl-animated-icon-on {
+  .gl-animated-chevron-lg-right-down-arrow {
+    rotate: 90deg;
+  }
+}
+
+/* off state */
+.gl-animated-icon-off {
+  .gl-animated-chevron-lg-right-down-arrow {
+    rotate: 0deg;
+  }
+}
+
 /* * * * * * * * * * * * * * * * *
  * animated_chevron_right_down_icon.vue
  * * * * * * * * * * * * * * * * */
@@ -75,6 +97,90 @@
   }
 }
 
+/* * * * * * * * * * * * * * * * *
+ * animated_chevron_lg_down_up_icon.vue
+ * * * * * * * * * * * * * * * * */
+
+ /* on state */
+ .gl-animated-icon-on {
+  .gl-animated-chevron-lg-down-up-arrow-left-line,
+  .gl-animated-chevron-lg-down-up-arrow-right-line {
+    translate: 50% 31.2%;
+    scale: 1 1.01;
+    transition: all $gl-transition-duration-medium $gl-easing-out-cubic,
+                scale $gl-transition-duration-medium linear(1 0%, -29 16%, 1 100%);
+  }
+
+  .gl-animated-chevron-lg-down-up-arrow-left-line {
+    rotate: 45deg;
+  }
+
+  .gl-animated-chevron-lg-down-up-arrow-right-line {
+    rotate: -45deg;
+  }
+}
+
+/* off state */
+.gl-animated-icon-off {
+  .gl-animated-chevron-lg-down-up-arrow-left-line,
+  .gl-animated-chevron-lg-down-up-arrow-right-line {
+    translate: 50% 68.8%;
+    scale: 1 1;
+    transition: all $gl-transition-duration-medium $gl-easing-out-cubic,
+                scale $gl-transition-duration-medium linear(1 0%, 29 16%, 1 100%);
+  }
+
+  .gl-animated-chevron-lg-down-up-arrow-left-line {
+    rotate: 135deg;
+  }
+
+  .gl-animated-chevron-lg-down-up-arrow-right-line {
+    rotate: -135deg;
+  }
+}
+
+/* * * * * * * * * * * * * * * * *
+ * animated_chevron_down_up_icon.vue
+ * * * * * * * * * * * * * * * * */
+
+ /* on state */
+ .gl-animated-icon-on {
+  .gl-animated-chevron-down-up-arrow-left-line,
+  .gl-animated-chevron-down-up-arrow-right-line {
+    translate: 50% 37.6%;
+    scale: 1 1.01;
+    transition: all $gl-transition-duration-medium $gl-easing-out-cubic,
+                scale $gl-transition-duration-medium linear(1 0%, -27 16%, 1 100%);
+  }
+
+  .gl-animated-chevron-down-up-arrow-left-line {
+    rotate: 45deg;
+  }
+
+  .gl-animated-chevron-down-up-arrow-right-line {
+    rotate: -45deg;
+  }
+}
+
+/* off state */
+.gl-animated-icon-off {
+  .gl-animated-chevron-down-up-arrow-left-line,
+  .gl-animated-chevron-down-up-arrow-right-line {
+    translate: 50% 62.6%;
+    scale: 1 1;
+    transition: all $gl-transition-duration-medium $gl-easing-out-cubic,
+                scale $gl-transition-duration-medium linear(1 0%, 27 16%, 1 100%);
+  }
+
+  .gl-animated-chevron-down-up-arrow-left-line {
+    rotate: 135deg;
+  }
+
+  .gl-animated-chevron-down-up-arrow-right-line {
+    rotate: -135deg;
+  }
+}
+
 /* * * * * * * * * * * * * * * * *
  * animated_duo_chat_icon.vue
  * * * * * * * * * * * * * * * * */

package/src/index.js

@@ -19,6 +19,9 @@ export { default as GlIntersectionObserver } from './components/utilities/inters
 export { default as GlLink, default as GlDeprecatedLink } from './components/base/link/link.vue';
 export { default as GlIcon } from './components/base/icon/icon.vue';
 export { default as GlAnimatedChevronRightDownIcon } from './components/base/animated_icon/animated_chevron_right_down_icon.vue';
+export { default as GlAnimatedChevronLgRightDownIcon } from './components/base/animated_icon/animated_chevron_lg_right_down_icon.vue';
+export { default as GlAnimatedChevronDownUpIcon } from './components/base/animated_icon/animated_chevron_down_up_icon.vue';
+export { default as GlAnimatedChevronLgDownUpIcon } from './components/base/animated_icon/animated_chevron_lg_down_up_icon.vue';
 export { default as GlAnimatedDuoChatIcon } from './components/base/animated_icon/animated_duo_chat_icon.vue';
 export { default as GlAnimatedLoaderIcon } from './components/base/animated_icon/animated_loader_icon.vue';
 export { default as GlAnimatedNotificationIcon } from './components/base/animated_icon/animated_notifications_icon.vue';