@gitlab/duo-ui 0.1.0 → 0.2.0

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

@@ -1,456 +0,0 @@
-.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

@@ -1,49 +0,0 @@
-<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

@@ -1,35 +0,0 @@
-<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

@@ -1,37 +0,0 @@
-<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

@@ -1,84 +0,0 @@
-<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

@@ -1,27 +0,0 @@
-<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>