@gitlab/duo-ui 0.1.0

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>

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>