docs(link): bring the overview page in line with the proofread text (#DS-5797)

apps/docs/src/app/seo-descriptions.ts

@@ -160,8 +160,8 @@ export const DOCS_SEO_DESCRIPTIONS = {
         "ru": "Layout flex — набор CSS-классов Koobiq для компоновки, выравнивания и упорядочивания элементов во flex-контейнерах."
     },
     "link": {
-        "en": "A link connects web pages or acts as a lighter alternative to a button.",
-        "ru": "Ссылка связывает веб-страницы или выступает как более легкий аналог кнопки."
+        "en": "KbqLink is a link that takes the user to another page, a document, or an external site.",
+        "ru": "KbqLink — ссылка, которая ведет пользователя к другой странице, документу или внешнему сайту."
     },
     "list": {
         "en": "A list shows a set of related items and lets the user select one or several of them. To pick a single value from a closed set inside a form use Select, and for hierarchical data use Tree.",

apps/docs/src/llms.txt

@@ -61,7 +61,7 @@ Rules for code that uses Koobiq:
 - [Inline edit](https://koobiq.io/en/components/inline-edit.md): Inline editing can replace a traditional form when the user only needs to update a few fields among many available parameters. Entry point: `@koobiq/components/inline-edit`.
 - [Input](https://koobiq.io/en/components/input.md): Input provides text, numeric, and password fields with formatting, validation, masking, and other data-entry behavior. Entry point: `@koobiq/components/input`.
 - [Layout flex](https://koobiq.io/en/components/layout-flex.md): Layout flex provides Koobiq CSS classes for arranging, aligning, and ordering elements in flex containers.
-- [Link](https://koobiq.io/en/components/link.md): A link connects web pages or acts as a lighter alternative to a button. Entry point: `@koobiq/components/link`.
+- [Link](https://koobiq.io/en/components/link.md): `KbqLink` is a link that takes the user to another page, a document, or an external site. Entry point: `@koobiq/components/link`.
 - [List](https://koobiq.io/en/components/list.md): A list shows a set of related items and lets the user select one or several of them. Entry point: `@koobiq/components/list`.
 - [Markdown](https://koobiq.io/en/components/markdown.md): `KbqMarkdown` - component that allows converting text written in _Markdown_ markup language into _HTML_. Entry point: `@koobiq/components/markdown`.
 - [Modal](https://koobiq.io/en/components/modal.md): A modal dialog opens as a window on top of the page, dims the underlying layer, and blocks all interaction with it. Entry point: `@koobiq/components/modal`.

packages/components-dev/link/module.ts

@@ -1,19 +1,16 @@
 import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
-import { KbqIconModule } from '@koobiq/components/icon';
-import { KbqLink, KbqLinkPrefix, KbqLinkSuffix } from '@koobiq/components/link';
 import {
     LinkApplicationExample,
-    LinkCaptionExample,
     LinkDisabledExample,
     LinkExternalExample,
-    LinkGeneralExample,
     LinkIconsExample,
+    LinkInTextExample,
     LinkMultiLineExample,
     LinkOverviewExample,
-    LinkPrepositionsExample,
     LinkPrintExample,
     LinkPseudoExample,
-    LinkTargetBlankExample,
+    LinkSizeExample,
+    LinkUnderlineExample,
     LinkVisitedExample,
     LinkWithCaptionExample
 } from 'packages/docs-examples/components/link';
@@ -23,61 +20,56 @@ import { DevThemeToggle } from '../theme-toggle';
     selector: 'dev-examples',
     imports: [
         LinkApplicationExample,
-        LinkCaptionExample,
         LinkDisabledExample,
         LinkExternalExample,
-        LinkGeneralExample,
         LinkIconsExample,
+        LinkInTextExample,
         LinkMultiLineExample,
         LinkOverviewExample,
-        LinkPrepositionsExample,
         LinkPrintExample,
         LinkPseudoExample,
-        LinkTargetBlankExample,
+        LinkSizeExample,
+        LinkUnderlineExample,
         LinkVisitedExample,
         LinkWithCaptionExample
     ],
     template: `
-        <link-with-caption-example />
+        <link-overview-example />
         <hr />
-        <link-application-example />
+        <link-size-example />
         <hr />
-        <link-caption-example />
+        <link-underline-example />
         <hr />
         <link-disabled-example />
         <hr />
-        <link-external-example />
-        <hr />
-        <link-general-example />
+        <link-visited-example />
         <hr />
         <link-icons-example />
         <hr />
         <link-multi-line-example />
         <hr />
-        <link-overview-example />
+        <link-in-text-example />
         <hr />
-        <link-prepositions-example />
+        <link-external-example />
         <hr />
-        <link-print-example />
+        <link-application-example />
         <hr />
         <link-pseudo-example />
         <hr />
-        <link-target-blank-example />
+        <link-print-example />
         <hr />
-        <link-visited-example />
+        <link-with-caption-example />
     `,
     changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class DevDocsExamples {}
 
 @Component({
     selector: 'dev-app',
-    imports: [KbqLink, KbqLinkPrefix, KbqLinkSuffix, KbqIconModule, DevDocsExamples, DevThemeToggle],
+    imports: [DevDocsExamples, DevThemeToggle],
     templateUrl: './template.html',
     styleUrls: ['./styles.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
     encapsulation: ViewEncapsulation.None
 })
-export class DevApp {
-    readonly url = 'http://localhost:3003/';
-}
+export class DevApp {}

packages/components-dev/link/styles.scss

@@ -1 +1,5 @@
-/* stylelint-disable no-empty-source */
+dev-app {
+    display: block;
+    max-width: 608px;
+    margin: var(--kbq-size-l);
+}