Merge branch 'main' into UI-472

packages/alto/src/components/Loader/Loader.vue

@@ -15,44 +15,23 @@ withDefaults(
 </script>
 
 <template>
-  <div class="loader-block">
+  <div class="yc-loader">
     <Bar v-if="variant === 'bar'" v-bind="{ color, size }" />
     <Brand v-else-if="variant === 'brand'" v-bind="{ color, size }" />
     <Spinner v-else v-bind="{ color, size }" />
 
-    <p v-if="label" class="label" :class="[labelFontSize]">
+    <p v-if="label" class="yc-loader__label" :class="`yc-loader__label--${labelFontSize}`">
       {{ label }}
     </p>
   </div>
 </template>
 
 <style scoped>
-.loader-block {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 10px;
-}
-
-.loader-block .label {
-  margin: 0;
-  color: v-bind("labelColor");
-  font: var(--text-md-regular);
-}
-
-.loader-block .label.xs {
-  font: var(--text-xs-regular);
-}
-
-.loader-block .label.sm {
-  font: var(--text-sm-regular);
-}
-
-.loader-block .label.lg {
-  font: var(--text-lg-regular);
+.yc-loader__label {
+  color: v-bind(labelColor);
 }
+</style>
 
-.loader-block .label.xl {
-  font: var(--text-xl-regular);
-}
+<style>
+@import "@youcan/styles/loader";
 </style>

packages/alto/src/components/Loader/internal/Bar.vue

@@ -5,31 +5,11 @@ defineProps<BarLoadingProps>();
 </script>
 
 <template>
-  <div class="bar-loading" />
+  <div class="yc-loader__bar" />
 </template>
 
 <style scoped>
-.bar-loading {
-  position: relative;
-  width: 160px;
-  height: 4px;
-  overflow: hidden;
-  border-radius: 2px;
-  background-color: var(--gray-100);
-}
-
-.bar-loading::before {
-  content: "";
-  display: block;
-  width: 100%;
-  height: 100%;
-  animation: progress 1200ms ease-in-out backwards alternate  infinite;
-  border-radius: 2px;
+.yc-loader__bar::before {
   background-color: v-bind(color);
 }
-
-@keyframes progress {
-  0% { transform: translateX(-93%); }
-  100% { transform: translateX(93%); }
-}
 </style>

packages/alto/src/components/Loader/internal/Brand.vue

@@ -12,17 +12,20 @@ const width = computed(() => `${props.size}px`);
 </script>
 
 <template>
-  <svg class="animated-svg" :width="width" :height="height" viewBox="0 0 67 59" :fill="color" :stroke="color" xmlns="http://www.w3.org/2000/svg">
+  <svg class="yc-loader__brand" :width="width" :height="height" viewBox="0 0 67 59" xmlns="http://www.w3.org/2000/svg">
     <path d="M32.4472 28.5835H13.1062L0.765851 0.5H20.1169L32.4472 28.5835Z" />
     <path d="M33.6705 29.2951L33.6705 29.295L46.319 0.5H65.6703L53.1985 28.8927L53.1984 28.8928L40.5501 57.667H21.1989L33.6705 29.2951Z" />
   </svg>
 </template>
 
 <style scoped>
-.animated-svg path {
+.yc-loader__brand {
+  stroke: v-bind(color);
+  fill: v-bind(color);
+}
+
+.yc-loader__brand path {
   animation: draw 1500ms linear forwards   infinite;
-  stroke-dasharray: 163.58;
-  fill: var(--gray-100);
 }
 
 @keyframes draw {

packages/alto/src/components/Loader/internal/Spinner.vue

@@ -9,23 +9,13 @@ const borderWidth = computed(() => `${props.size * 0.1}px`);
 </script>
 
 <template>
-  <div class="spinner" />
+  <div class="yc-loader__spinner" />
 </template>
 
 <style scoped>
-.spinner {
-  box-sizing: border-box;
+.yc-loader__spinner {
   width: v-bind(spinnerSize);
-  animation: s4 1s infinite linear;
   border: v-bind(borderWidth) solid var(--gray-100);
-  border-radius: 50%;
   border-right-color: v-bind(color);
-  aspect-ratio: 1;
-}
-
-@keyframes s4 {
-  100% {
-    transform: rotate(1turn);
-  }
 }
 </style>

packages/alto/src/components/Radio/Internal/Radio.vue

@@ -20,54 +20,10 @@ const id = Utils.uid('radio_');
 </script>
 
 <template>
-  <div class="radio">
-    <input :id="id" v-model="model" type="radio" :name="name" class="trigger" :checked="model">
-    <label v-if="slots.default" class="label" :for="id">
+  <div class="yc-radio-group__item">
+    <input :id="id" v-model="model" type="radio" :name="name" class="yc-radio-group__item__trigger" :checked="model">
+    <label v-if="slots.default" class="yc-radio-group__item__label" :for="id">
       <slot />
     </label>
   </div>
 </template>
-
-<style scoped>
-.radio {
-  display: flex;
-  box-sizing: border-box;
-  align-items: center;
-  gap: 8px;
-}
-
-.radio .label {
-  color: var(--gray-900);
-  font: var(--text-sm-regular);
-  cursor: pointer;
-}
-
-.radio .trigger {
-  width: 18px;
-  height: 18px;
-  margin: 0;
-  transition: 75ms all linear;
-  border: 1px solid var(--gray-200);
-  border-radius: 50%;
-  background-color: var(--base-white);
-  appearance: none;
-  cursor: pointer;
-}
-
-.radio .trigger:hover {
-  border-color: var(--gray-300);
-  background-color: var(--gray-50);
-}
-
-.radio .trigger:active {
-  background-color: var(--gray-100);
-}
-
-.radio .trigger:checked {
-  border: 4px solid var(--brand-500);
-}
-
-.radio .trigger:checked:hover {
-  border-color: var(--brand-600);
-}
-</style>

packages/alto/src/components/Radio/RadioGroup.vue

@@ -22,7 +22,7 @@ const handleRadioCheck = (radio: RadioData) => model.value = radio.value;
 </script>
 
 <template>
-  <fieldset role="radiogroup" class="radio-group">
+  <fieldset role="radiogroup" class="yc-radio-group">
     <Radio
       v-for="(radio, i) in items"
       :key="i" :model-value="radio.value === model" :name="name" @update:model-value="() => handleRadioCheck(radio)"
@@ -32,9 +32,6 @@ const handleRadioCheck = (radio: RadioData) => model.value = radio.value;
   </fieldset>
 </template>
 
-<style scoped>
-.radio-group {
-  all: unset;
-  box-sizing: border-box;
-}
+<style>
+@import "@youcan/styles/radio-group";
 </style>

packages/alto/src/components/RadioList/RadioList.vue

@@ -13,68 +13,15 @@ const model = computed({
 </script>
 
 <template>
-  <div class="radio-list">
-    <label v-for="option in options" :key="option.label" class="radio-item" :for="option.label">
-      <input :id="option.label" v-model="model" :name="option.label" :value="option.label" type="radio" class="trigger">
-      <span class="name">{{ option.label }}</span>
-      <span class="suffix">{{ option.suffix }}</span>
+  <div class="yc-radio-list">
+    <label v-for="option in options" :key="option.label" class="yc-radio-list__item" :for="option.label">
+      <input :id="option.label" v-model="model" :name="option.label" :value="option.label" type="radio" class="yc-radio-list__item__trigger">
+      <span class="yc-radio-list__item__name">{{ option.label }}</span>
+      <span class="yc-radio-list__item__suffix">{{ option.suffix }}</span>
     </label>
   </div>
 </template>
 
 <style scoped>
-.radio-list {
-  display: flex;
-  box-sizing: border-box;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.radio-item {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 11.5px 16px;
-  border: 1px solid var(--gray-200);
-  border-radius: 8px;
-  box-shadow: var(--shadow-xs-gray);
-  cursor: pointer;
-}
-
-.name,
-.suffix {
-  color: var(--gray-900);
-  font: var(--text-sm-regular);
-}
-
-.name {
-  flex-grow: 1;
-}
-
-.trigger {
-  width: 14px;
-  height: 14px;
-  margin: 0;
-  transition: 75ms all linear;
-  border: 1px solid var(--gray-200);
-  border-radius: 50%;
-  outline: 2px solid var(--base-white);
-  background-color: var(--base-white);
-  appearance: none;
-}
-
-.trigger:hover {
-  border-color: var(--gray-300);
-  background-color: var(--gray-50);
-}
-
-.trigger:active {
-  background-color: var(--gray-100);
-}
-
-.trigger:checked {
-  border: 3px solid var(--base-white);
-  outline-color: var(--brand-500);
-  background-color: var(--brand-500);
-}
+@import "@youcan/styles/radio-list";
 </style>

packages/alto/src/components/Skeleton/Skeleton.stories.ts

@@ -9,7 +9,7 @@ const meta: Meta<typeof Skeleton> = {
   argTypes: {
     type: {
       control: 'select',
-      options: ['text', 'media'],
+      options: ['text', 'media', 'card'],
     },
     lines: {
       control: { type: 'number' },

packages/alto/src/components/Skeleton/Skeleton.vue

@@ -11,77 +11,17 @@ withDefaults(
 </script>
 
 <template>
-  <div v-if="type === 'text'" class="content">
-    <div v-for="index in lines" :key="index" class="pulse">
-      <div class="line" />
+  <div v-if="type === 'text'" class="yc-skeleton__content">
+    <div v-for="index in lines" :key="index" class="yc-skeleton__pulse">
+      <div class="yc-skeleton__content__line" />
     </div>
   </div>
-  <div v-if="type === 'media'" class="media pulse">
-    <i class="i-youcan:image icon" />
+  <div v-if="type === 'media'" class="yc-skeleton__media yc-skeleton__pulse">
+    <i class="i-youcan:image yc-skeleton__media__icon" />
   </div>
-  <div v-if="type === 'card'" class="card pulse" />
+  <div v-if="type === 'card'" class="yc-skeleton__card yc-skeleton__pulse" />
 </template>
 
 <style scoped>
-.content {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  row-gap: 15px;
-  justify-items: flex-start;
-}
-
-.pulse {
-  animation: blink 2s linear infinite;
-}
-
-.content .pulse .line {
-  height: 1.2vh;
-  border-bottom: 1px solid var(--gray-300);
-  background-color: var(--gray-300);
-}
-
-.content .pulse:last-child {
-  width: 80%;
-}
-
-.media,
-.card {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-  min-height: 40px;
-  border-radius: 6px;
-  background-color: var(--gray-200);
-}
-
-.media .icon {
-  min-width: 80px;
-  min-height: 80px;
-  color: var(--gray-300);
-}
-
-@keyframes blink {
-  0% {
-    opacity: 0.3;
-  }
-
-  25% {
-    opacity: 0.7;
-  }
-
-  50% {
-    opacity: 1;
-  }
-
-  75% {
-    opacity: 0.7;
-  }
-
-  100% {
-    opacity: 0.3;
-  }
-}
+@import "@youcan/styles/skeleton";
 </style>

packages/styles/package.json

@@ -13,7 +13,11 @@
     "./alert": "./dist/alert.css",
     "./checkbox": "./dist/checkbox.css",
     "./badge": "./dist/badge.css",
-    "./divider": "./dist/divider.css"
+    "./divider": "./dist/divider.css",
+    "./radio-list": "./dist/radio-list.css",
+    "./loader": "./dist/loader.css",
+    "./radio-group": "./dist/radio-group.css",
+    "./skeleton": "./dist/skeleton.css"
   },
   "files": [
     "dist"