API.skeleton

docs/components-api/skeleton.md

@@ -2,8 +2,15 @@
 
 # ExtraSkeleton
 
+> ✅ **Реализован**: `ExtraSkeletonComponent` (`@cdek-it/angular-ui-kit`) соответствует спецификации.
+
 Плейсхолдер контента на момент загрузки.
 
-| Свойство | Описание | Типизация             |
-| -------- | -------- | --------------------- |
-| `shape`  | форма    | `rectangle \| circle` |
+| Свойство       | Описание                                                                    | Типизация             |
+| -------------- | --------------------------------------------------------------------------- | --------------------- |
+| `shape`        | форма                                                                       | `rectangle \| circle` |
+| `animation`    | тип анимации: волновой шиммер или без анимации                              | `wave \| none`        |
+| `width`        | ширина элемента (CSS-значение); игнорируется при заданном `size`            | `string`              |
+| `height`       | высота элемента (CSS-значение); игнорируется при заданном `size`            | `string`              |
+| `size`         | размер элемента, задаёт ширину и высоту одновременно (для `shape="circle"`) | `string \| undefined` |
+| `borderRadius` | скругление углов (CSS-значение), переопределяет значение темы               | `string \| undefined` |

src/stories/components/skeleton/examples/skeleton-card-placeholder.component.ts

@@ -37,7 +37,7 @@ export const CardPlaceholder: StoryObj = {
         language: 'ts',
         code: `
 import { Component } from '@angular/core';
-import { SkeletonComponent } from '@cdek-it/angular-ui-kit';
+import { ExtraSkeletonComponent } from '@cdek-it/angular-ui-kit';
 
 @Component({
   selector: 'app-skeleton-card-placeholder',

src/stories/components/skeleton/examples/skeleton-circle.component.ts

@@ -36,7 +36,7 @@ export const Circle: StoryObj = {
         language: 'ts',
         code: `
 import { Component } from '@angular/core';
-import { SkeletonComponent } from '@cdek-it/angular-ui-kit';
+import { ExtraSkeletonComponent } from '@cdek-it/angular-ui-kit';
 
 @Component({
   selector: 'app-skeleton-circle',

src/stories/components/skeleton/examples/skeleton-no-animation.component.ts

@@ -34,7 +34,7 @@ export const NoAnimation: StoryObj = {
         language: 'ts',
         code: `
 import { Component } from '@angular/core';
-import { SkeletonComponent } from '@cdek-it/angular-ui-kit';
+import { ExtraSkeletonComponent } from '@cdek-it/angular-ui-kit';
 
 @Component({
   selector: 'app-skeleton-no-animation',

src/stories/components/skeleton/examples/skeleton-rectangles.component.ts

@@ -2,8 +2,10 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { StoryObj } from '@storybook/angular';
 import { ExtraSkeletonComponent } from '../../../../lib/components/skeleton/skeleton.component';
 
+// Пунктирная рамка — границы контейнера: без неё верхняя строка выглядит просто длинной
+// полосой, и не видно, что width по умолчанию равен 100% и считается от родителя.
 const template = `
-<div>
+<div class="border border-dashed border-surface-200 p-4" style="width: 600px">
   <div class="flex flex-col gap-3">
     <extra-skeleton height="1rem"></extra-skeleton>
     <extra-skeleton height="1rem" width="75%"></extra-skeleton>
@@ -30,24 +32,27 @@ export const Rectangles: StoryObj = {
   parameters: {
     docs: {
       description: {
-        story: 'Прямоугольные строки-заглушки разной ширины — паттерн для списка отправлений или текстового контента.'
+        story:
+          'Прямоугольные строки-заглушки разной ширины — паттерн для списка отправлений или текстового контента. Пунктирная рамка показывает границы контейнера: `width` по умолчанию равен `100%` и считается от родителя, поэтому верхняя строка занимает его целиком, а следующие — 75% и 50% от той же ширины.'
       },
       source: {
         language: 'ts',
         code: `
 import { Component } from '@angular/core';
-import { SkeletonComponent } from '@cdek-it/angular-ui-kit';
+import { ExtraSkeletonComponent } from '@cdek-it/angular-ui-kit';
 
 @Component({
   selector: 'app-skeleton-rectangles',
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [ExtraSkeletonComponent],
   template: \`
-    <div class="flex flex-col gap-3">
-      <extra-skeleton height="1rem"></extra-skeleton>
-      <extra-skeleton height="1rem" width="75%"></extra-skeleton>
-      <extra-skeleton height="1rem" width="50%"></extra-skeleton>
+    <div class="border border-dashed border-surface-200 p-4" style="width: 600px">
+      <div class="flex flex-col gap-3">
+        <extra-skeleton height="1rem"></extra-skeleton>
+        <extra-skeleton height="1rem" width="75%"></extra-skeleton>
+        <extra-skeleton height="1rem" width="50%"></extra-skeleton>
+      </div>
     </div>
   \`,
 })

src/stories/components/skeleton/skeleton.stories.ts

@@ -26,7 +26,7 @@ const meta: Meta<SkeletonComponent> = {
         component: `Заглушка для контента, пока данные загружаются. Поддерживает прямоугольную и круглую форму, а также волновую анимацию.
 
 \`\`\`typescript
-import { SkeletonComponent } from '@cdek-it/angular-ui-kit';
+import { ExtraSkeletonComponent } from '@cdek-it/angular-ui-kit';
 \`\`\``
       }
     },
@@ -39,7 +39,7 @@ import { SkeletonComponent } from '@cdek-it/angular-ui-kit';
       options: ['rectangle', 'circle'],
       description: 'Форма скелетона',
       table: {
-        category: 'Props',
+        category: 'Свойства',
         defaultValue: { summary: 'rectangle' },
         type: { summary: "'rectangle' | 'circle'" }
       }
@@ -49,7 +49,7 @@ import { SkeletonComponent } from '@cdek-it/angular-ui-kit';
       options: ['wave', 'none'],
       description: 'Тип анимации',
       table: {
-        category: 'Props',
+        category: 'Свойства',
         defaultValue: { summary: 'wave' },
         type: { summary: "'wave' | 'none'" }
       }
@@ -58,7 +58,7 @@ import { SkeletonComponent } from '@cdek-it/angular-ui-kit';
       control: 'text',
       description: 'Ширина элемента',
       table: {
-        category: 'Props',
+        category: 'Свойства',
         defaultValue: { summary: '100%' },
         type: { summary: 'string' }
       }
@@ -67,7 +67,7 @@ import { SkeletonComponent } from '@cdek-it/angular-ui-kit';
       control: 'text',
       description: 'Высота элемента',
       table: {
-        category: 'Props',
+        category: 'Свойства',
         defaultValue: { summary: '1rem' },
         type: { summary: 'string' }
       }
@@ -76,7 +76,7 @@ import { SkeletonComponent } from '@cdek-it/angular-ui-kit';
       control: 'text',
       description: 'Размер элемента (устанавливает ширину и высоту одновременно; используется для circle)',
       table: {
-        category: 'Props',
+        category: 'Свойства',
         defaultValue: { summary: 'undefined' },
         type: { summary: 'string' }
       }
@@ -85,7 +85,7 @@ import { SkeletonComponent } from '@cdek-it/angular-ui-kit';
       control: 'text',
       description: 'Скругление углов (переопределяет значение темы)',
       table: {
-        category: 'Props',
+        category: 'Свойства',
         defaultValue: { summary: 'undefined' },
         type: { summary: 'string' }
       }