@gitlab/ui 92.4.0 → 93.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "92.4.0",
+  "version": "93.0.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -114,7 +114,7 @@
     "@gitlab/eslint-plugin": "20.2.1",
     "@gitlab/fonts": "^1.3.0",
     "@gitlab/stylelint-config": "6.2.2",
-    "@gitlab/svgs": "3.115.0",
+    "@gitlab/svgs": "3.116.0",
     "@jest/test-sequencer": "^29.7.0",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
@@ -172,8 +172,8 @@
     "module-alias": "^2.2.2",
     "npm-run-all": "^4.1.5",
     "pikaday": "^1.8.0",
-    "playwright": "^1.47.0",
-    "playwright-core": "^1.47.0",
+    "playwright": "^1.47.1",
+    "playwright-core": "^1.47.1",
     "plop": "^2.5.4",
     "postcss": "8.4.28",
     "postcss-loader": "^7.0.2",

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

@@ -0,0 +1,28 @@
+<script>
+import GlBaseAnimatedIcon from './base_animated_icon.vue';
+
+export default {
+  name: 'GlAnimatedChevronRightDownIcon',
+  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-chevron-right-down-arrow"
+      d="M6.75 4.75L10 8L6.75 11.25"
+      stroke="currentColor"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+</template>

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

@@ -0,0 +1,39 @@
+<script>
+import GlBaseAnimatedIcon from './base_animated_icon.vue';
+
+export default {
+  name: 'GlAnimatedDuoChatIcon',
+  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
+      d="M3.75297 12.25V11.5H3.44253L3.2229 11.7194L3.75297 12.25ZM0.75 15.25H0C0 15.5533 0.182651 15.8267 0.462816 15.9428C0.742981 16.059 1.06551 15.9949 1.28007 15.7806L0.75 15.25ZM7.74 1C7.32579 1 6.99 1.33579 6.99 1.75C6.99 2.16421 7.32579 2.5 7.74 2.5V1ZM1.5 6.75C1.5 6.33579 1.16421 6 0.75 6C0.335786 6 0 6.33579 0 6.75H1.5ZM14.5 4V10H16V4H14.5ZM13 11.5H3.75297V13H13V11.5ZM3.2229 11.7194L0.219933 14.7194L1.28007 15.7806L4.28304 12.7806L3.2229 11.7194ZM7.74 2.5H13V1H7.74V2.5ZM1.5 15.25V6.75H0V15.25H1.5ZM14.5 10C14.5 10.8284 13.8284 11.5 13 11.5V13C14.6569 13 16 11.6569 16 10H14.5ZM16 4C16 2.34315 14.6569 1 13 1V2.5C13.8284 2.5 14.5 3.17157 14.5 4H16Z"
+      fill="currentColor"
+      stroke-width="0"
+    />
+    <path
+      class="gl-animated-duo-chat-small-sparkle"
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M8.56489 5.39914C8.37631 4.86695 7.62369 4.86695 7.43511 5.39914L6.99787 6.63314C6.93751 6.80349 6.80349 6.93751 6.63314 6.99787L5.39914 7.43511C4.86695 7.62369 4.86695 8.37631 5.39914 8.56489L6.63314 9.00213C6.80349 9.06249 6.93751 9.19651 6.99787 9.36686L7.43511 10.6009C7.62369 11.133 8.37631 11.133 8.56489 10.6009L9.00213 9.36686C9.06249 9.19651 9.19651 9.06249 9.36686 9.00213L10.6009 8.56489C11.133 8.37631 11.133 7.62369 10.6009 7.43511L9.36686 6.99787C9.19651 6.93751 9.06249 6.80349 9.00213 6.63314L8.56489 5.39914Z"
+      fill="currentColor"
+      stroke-width="0"
+    />
+    <path
+      class="gl-animated-duo-chat-big-sparkle"
+      d="M8.56489 5.39914C8.37631 4.86695 7.62369 4.86695 7.43511 5.39914L6.99787 6.63314C6.93751 6.80349 6.80349 6.93751 6.63314 6.99787L5.39914 7.43511C4.86695 7.62369 4.86695 8.37631 5.39914 8.56489L6.63314 9.00213C6.80349 9.06249 6.93751 9.19651 6.99787 9.36686L7.43511 10.6009C7.62369 11.133 8.37631 11.133 8.56489 10.6009L9.00213 9.36686C9.06249 9.19651 9.19651 9.06249 9.36686 9.00213L10.6009 8.56489C11.133 8.37631 11.133 7.62369 10.6009 7.43511L9.36686 6.99787C9.19651 6.93751 9.06249 6.80349 9.00213 6.63314L8.56489 5.39914Z"
+      fill="currentColor"
+      stroke-width="0"
+    />
+  </svg>
+</template>

package/src/components/base/animated_icon/animated_icon.md

@@ -0,0 +1,4 @@
+## Usage
+
+The `GlAnimatedIcon` component can be used to render animated SVG
+with any other interactive Pajamas component that can switch `GlAnimatedIcon` state.

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

@@ -0,0 +1,456 @@
+.gl-animated-icon {
+  display: flex;
+  fill: none !important;
+  stroke: currentColor !important;
+
+  * {
+    @include gl-prefers-reduced-motion-transition;
+    @include gl-prefers-reduced-motion-animation;
+    transition: all $gl-transition-duration-medium $gl-easing-out-cubic;
+    animation-duration: $gl-transition-duration-slow;
+    animation-timing-function: $gl-easing-out-cubic;
+    animation-fill-mode: both;
+  }
+}
+
+/* * * * * * * * * * * * * * * * *
+ * animated_chevron_right_down_icon.vue
+ * * * * * * * * * * * * * * * * */
+
+.gl-animated-chevron-right-down-arrow {
+  transform-origin: center center;
+}
+
+/* on state */
+.gl-animated-icon-on {
+  .gl-animated-chevron-right-down-arrow {
+    rotate: 90deg;
+  }
+}
+
+/* off state */
+.gl-animated-icon-off {
+  .gl-animated-chevron-right-down-arrow {
+    rotate: 0deg;
+  }
+}
+
+/* * * * * * * * * * * * * * * * *
+ * animated_duo_chat_icon.vue
+ * * * * * * * * * * * * * * * * */
+
+.gl-animated-duo-chat-small-sparkle,
+.gl-animated-duo-chat-big-sparkle {
+  transform-origin: 50% 50%;
+}
+
+/* on state */
+.gl-animated-icon-on .gl-animated-duo-chat-small-sparkle,
+.gl-animated-icon-on .gl-animated-duo-chat-big-sparkle {
+  animation-name: gl-animated-duo-chat-sparkle;
+  animation-duration: 2s;
+  animation-iteration-count: infinite;
+}
+
+.gl-animated-icon-on .gl-animated-duo-chat-small-sparkle {
+  animation-delay: -0.5s;
+}
+
+.gl-animated-icon-on .gl-animated-duo-chat-big-sparkle {
+  animation-delay: -1.5s;
+}
+
+@keyframes gl-animated-duo-chat-sparkle {
+  0% {
+    translate: -45% -45%;
+    scale: 0;
+  }
+
+  20%,
+  45% {
+    translate: -31% -31%;
+    scale: 1;
+  }
+
+  50%,
+  80% {
+    translate: 0 -6%;
+    scale: 0.8;
+  }
+
+  100% {
+    translate: 0 -6%;
+    scale: 0;
+  }
+}
+
+/* off state */
+.gl-animated-duo-chat-small-sparkle {
+  translate: 0 -6%;
+  scale: 0.8;
+}
+
+.gl-animated-duo-chat-big-sparkle {
+  translate: -31% -31%;
+  scale: 1;
+}
+
+@media (prefers-reduced-motion) {
+  .gl-animated-icon-on .gl-animated-duo-chat-small-sparkle,
+  .gl-animated-icon-on .gl-animated-duo-chat-big-sparkle {
+    animation-name: none;
+  }
+}
+
+/* * * * * * * * * * * * * * * * *
+ * animated_notifications_icon.vue
+ * * * * * * * * * * * * * * * * */
+
+/* on state */
+.gl-animated-icon-on .gl-animated-notifications-bottom-part {
+  stroke-dasharray: 80% 100%;
+  stroke-dashoffset: -43%;
+}
+
+.gl-animated-icon-on .gl-animated-notifications-top-part {
+  stroke-dashoffset: 0;
+}
+
+.gl-animated-icon-on .gl-animated-notifications-line {
+  stroke-dasharray: 115% 120%;
+  stroke-dashoffset: 0;
+}
+
+/* off state */
+.gl-animated-icon-off .gl-animated-notifications-bottom-part {
+  stroke-dasharray: 145% 100%;
+  stroke-dashoffset: 0;
+}
+
+.gl-animated-icon-off .gl-animated-notifications-top-part {
+  stroke-dasharray: 100% 100%;
+  stroke-dashoffset: 0;
+}
+
+.gl-animated-icon-off .gl-animated-notifications-line {
+  stroke-dasharray: 115% 120%;
+  stroke-dashoffset: -111%;
+}
+
+/* * * * * * * * * * * * * * * * *
+ * animated_sidebar_icon.vue
+ * * * * * * * * * * * * * * * * */
+
+/* on state */
+.gl-animated-icon-on .gl-animated-sidebar-line {
+  translate: 1% 0;
+  transition-timing-function: linear(0 0%, 5 60%, 1 100%);
+}
+
+/* off state */
+.gl-animated-icon-off .gl-animated-sidebar-line {
+  translate: -1% 0;
+  transition-timing-function: linear(0 0%, 5 60%, 1 100%);
+}
+
+/* * * * * * * * * * * * * * * * *
+ * animated_smile_icon.vue
+ * * * * * * * * * * * * * * * * */
+
+.gl-animated-smile-big-smile {
+  transform-origin: 50% 70%;
+}
+
+.gl-animated-smile-eyes circle {
+  fill: currentColor !important;
+}
+
+/* on state */
+.gl-animated-icon-on .gl-animated-smile-eyes {
+  transition-timing-function: linear(0 0%, -1 20%, 1 100%);
+  translate: 0 -6%;
+}
+
+.gl-animated-icon-on .gl-animated-smile-big-smile {
+  scale: 1;
+  transition-delay: 0.1s;
+}
+
+.gl-animated-icon-on .gl-animated-smile-slight-smile {
+  stroke-dasharray: 10% 100%;
+  stroke-dashoffset: -8%;
+}
+
+/* off state */
+.gl-animated-icon-off .gl-animated-smile-eyes {
+  translate: 0 0;
+}
+
+.gl-animated-icon-off .gl-animated-smile-big-smile {
+  scale: 0.1;
+}
+
+.gl-animated-icon-off .gl-animated-smile-slight-smile {
+  stroke-dasharray: 30% 100%;
+  stroke-dashoffset: 0;
+}
+
+/* * * * * * * * * * * * * * * * *
+ * animated_sort_icon.vue
+ * * * * * * * * * * * * * * * * */
+
+ .gl-animated-sort-icon {
+  overflow: visible;
+}
+
+/* off state */
+.gl-animated-icon-off .gl-animated {
+  animation-name: gl-animated-star-off;
+}
+
+.gl-animated-sort-arrow-left,
+.gl-animated-sort-arrow-right {
+  transform-origin: 18.7% 6.7%;
+}
+
+.gl-animated-icon-off .gl-animated-sort-arrow-left,
+.gl-animated-icon-off .gl-animated-sort-arrow-right {
+  rotate: 0deg;
+  translate: 0 10%;
+}
+
+.gl-animated-icon-off .gl-animated-sort-long-line-off,
+.gl-animated-icon-off .gl-animated-sort-medium-line-off,
+.gl-animated-icon-off .gl-animated-sort-short-line-off {
+  opacity: 0;
+  transition-delay: -1s;
+}
+
+.gl-animated-icon-off .gl-animated-sort-long-line-on {
+  transition-delay: 0.05s;
+}
+
+.gl-animated-icon-off .gl-animated-sort-medium-line-on {
+  transition-delay: 0.1s;
+}
+
+.gl-animated-icon-off .gl-animated-sort-short-line-on {
+  transition-delay: 0.15s;
+}
+
+.gl-animated-icon-off .gl-animated-sort-line {
+  translate: 0 -7%;
+}
+
+/* on state */
+.gl-animated-icon-on .gl-animated-sort-arrow-left {
+  rotate: 90deg;
+  translate: 0 77%;
+}
+
+.gl-animated-icon-on .gl-animated-sort-arrow-right {
+  rotate: -90deg;
+  translate: 0 77%;
+}
+
+.gl-animated-icon-on .gl-animated-sort-long-line-on,
+.gl-animated-icon-on .gl-animated-sort-medium-line-on,
+.gl-animated-icon-on .gl-animated-sort-short-line-on {
+  opacity: 0;
+  transition-delay: -1s;
+}
+
+.gl-animated-icon-on .gl-animated-sort-long-line-off {
+  transition-delay: 0.15s;
+}
+
+.gl-animated-icon-on .gl-animated-sort-medium-line-off {
+  transition-delay: 0.1s;
+}
+
+.gl-animated-icon-on .gl-animated-sort-short-line-off {
+  transition-delay: 0.05s;
+}
+
+.gl-animated-icon-on .gl-animated-sort-line {
+  translate: 0 0;
+}
+
+
+/* * * * * * * * * * * * * * * * *
+ * animated_star_icon.vue
+ * * * * * * * * * * * * * * * * */
+
+.gl-animated-star-shape {
+  transform-origin: center center;
+}
+
+/* on state */
+.gl-animated-icon-on .gl-animated-star-shape {
+  animation-name: gl-animated-star-on;
+}
+
+@keyframes gl-animated-star-on {
+  0%,
+  25% {
+    fill: transparent;
+  }
+
+  50% {
+    fill: currentColor;
+  }
+
+  100% {
+    fill: currentColor;
+  }
+
+  0%,
+  100% {
+    scale: 1;
+  }
+
+  25% {
+    scale: 0.7;
+  }
+
+  50% {
+    scale: 1.1;
+  }
+}
+
+/* off state */
+.gl-animated-icon-off .gl-animated-star-shape {
+  animation-name: gl-animated-star-off;
+}
+
+@keyframes gl-animated-star-off {
+  0%,
+  25% {
+    fill: currentColor;
+  }
+
+  50% {
+    fill: transparent;
+  }
+
+  100% {
+    fill: transparent;
+  }
+
+  0%,
+  100% {
+    scale: 1;
+  }
+
+  25% {
+    scale: 0.7;
+  }
+
+  50% {
+    scale: 1.1;
+  }
+}
+
+
+/* * * * * * * * * * * * * * * * *
+ * animated_todo_icon.vue
+ * * * * * * * * * * * * * * * * */
+
+/* on state */
+.gl-animated-icon-on .gl-animated-todo-box {
+  stroke-dasharray: 240% 100%;
+  stroke-dashoffset: -19%;
+}
+
+.gl-animated-icon-on .gl-animated-todo-plus-line {
+  stroke-dasharray: 0% 100%;
+  stroke-dashoffset: -14%;
+  translate: 14% 7%;
+}
+
+.gl-animated-icon-on .gl-animated-todo-check {
+  stroke-dasharray: 76% 100%;
+  stroke-dashoffset: 0;
+}
+
+/* off state */
+.gl-animated-icon-off .gl-animated-todo-box {
+  stroke-dasharray: 215% 100%;
+  stroke-dashoffset: -12%;
+}
+
+.gl-animated-icon-off .gl-animated-todo-plus-line {
+  stroke-dasharray: 30% 100%;
+  stroke-dashoffset: 0;
+  translate: 0 0;
+}
+
+.gl-animated-icon-off .gl-animated-todo-check {
+  stroke-dasharray: 76% 100%;
+  stroke-dashoffset: -76%;
+}
+
+/* * * * * * * * * * * * * * * * *
+ * animated_upload_icon.vue
+ * * * * * * * * * * * * * * * * */
+
+.gl-animated-upload-line {
+  stroke-dasharray: 70% 100%;
+}
+
+/* on state */
+.gl-animated-icon-on .gl-animated-upload-line {
+  animation-name: gl-animated-upload-line;
+  animation-duration: 2s;
+  animation-iteration-count: infinite;
+}
+
+@keyframes gl-animated-upload-line {
+  0%,
+  60%,
+  100% {
+    translate: 0 0;
+    stroke-dashoffset: 0;
+  }
+
+  10% {
+    translate: 0% 20%;
+    stroke-dashoffset: -20%;
+  }
+
+  40% {
+    translate: 0 -10%;
+    stroke-dashoffset: 0;
+  }
+
+  55% {
+    translate: 0 5%;
+    stroke-dashoffset: -5%;
+  }
+}
+
+.gl-animated-icon-on .gl-animated-upload-arrow {
+  animation-name: gl-animated-upload-arrow;
+  animation-duration: 2s;
+  animation-iteration-count: infinite;
+}
+
+@keyframes gl-animated-upload-arrow {
+  0%,
+  60%,
+  100% {
+    translate: 0 0;
+  }
+
+  10% {
+    translate: 0 20%;
+  }
+
+  40% {
+    translate: 0 -8%;
+  }
+
+  55% {
+    translate: 0 8%;
+  }
+}

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

@@ -0,0 +1,49 @@
+<script>
+import GlBaseAnimatedIcon from './base_animated_icon.vue';
+
+export default {
+  name: 'GlAnimatedNotificationIcon',
+  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-notifications-bottom-part"
+      d="M3.72 11.25L2.35519 12.837C2.21579 12.9991 2.33095 13.25 2.54473 13.25H13.4428C13.6586 13.25 13.773 12.995 13.6296 12.8338L12.22 11.25V7C12.22 6.06556 11.9184 5.20155 11.4073 4.5"
+      stroke="currentColor"
+      stroke-width="1.5"
+      stroke-linecap="round"
+    />
+    <path
+      class="gl-animated-notifications-top-part"
+      d="M3.72 11.75V7C3.72 4.65279 5.62279 2.75 7.97 2.75C9.38277 2.75 10.6345 3.43933 11.4073 4.5"
+      stroke="currentColor"
+      stroke-width="1.5"
+      stroke-linecap="round"
+    />
+    <path
+      class="gl-animated-notifications-line"
+      d="M1.75 14.25L14.2461 1.75391"
+      stroke="currentColor"
+      stroke-width="1.5"
+      stroke-linecap="round"
+    />
+    <path
+      d="M6 13H10V13C10 14.1046 9.10457 15 8 15V15C6.89543 15 6 14.1046 6 13V13Z"
+      fill="currentColor"
+    />
+    <path
+      d="M7 2C7 1.44772 7.44772 1 8 1V1C8.55228 1 9 1.44772 9 2V2C9 2.55228 8.55228 3 8 3V3C7.44772 3 7 2.55228 7 2V2Z"
+      fill="currentColor"
+    />
+  </svg>
+</template>

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

@@ -0,0 +1,35 @@
+<script>
+import GlBaseAnimatedIcon from './base_animated_icon.vue';
+
+export default {
+  name: 'GlAnimatedSidebarIcon',
+  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"
+  >
+    <rect
+      x="1.75"
+      y="1.75"
+      width="12.5"
+      height="12.5"
+      rx="1.25"
+      stroke="currentColor"
+      stroke-width="1.5"
+    />
+    <path
+      class="gl-animated-sidebar-line"
+      d="M5.25 2V14"
+      stroke="currentColor"
+      stroke-width="1.5"
+    />
+  </svg>
+</template>

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

@@ -0,0 +1,37 @@
+<script>
+import GlBaseAnimatedIcon from './base_animated_icon.vue';
+
+export default {
+  name: 'GlAnimatedSmileIcon',
+  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"
+  >
+    <g class="gl-animated-smile-eyes">
+      <circle cy="7" cx="6" r="0.5" />
+      <circle cy="7" cx="10" r="0.5" />
+    </g>
+    <path
+      class="gl-animated-smile-big-smile"
+      d="M8 12C9.65685 12 11 10.6569 11 9H5C5 10.6569 6.34315 12 8 12Z"
+      fill="currentColor"
+    />
+    <path
+      class="gl-animated-smile-slight-smile"
+      d="M6.3 10C6.46667 10.3333 7 11 8 11C9 11 9.53333 10.3333 9.7 10"
+      stroke="currentColor"
+      stroke-width="1.5"
+      stroke-linecap="round"
+    />
+    <circle cx="8" cy="8" r="7.25" stroke="currentColor" stroke-width="1.5" />
+  </svg>
+</template>