`;
-const styles = '';
@Component({
selector: 'app-button-disabled',
standalone: true,
- imports: [Button],
- template,
- styles
+ imports: [ButtonModule],
+ template
})
export class ButtonDisabledComponent {}
@@ -27,25 +47,7 @@ export const Disabled: StoryObj = {
parameters: {
docs: {
description: {
- story: 'Disabled кнопка'
- },
- source: {
- language: 'ts',
- code: `
-import { Component } from '@angular/core';
-import { Button } from 'primeng/button';
-
-@Component({
- selector: 'app-button-disabled',
- standalone: true,
- imports: [
- Button
- ],
- template: ${template},
- styles: ${styles}
-})
-export class ButtonDisabledComponent {}
- `
+ story: 'Состояние кнопки, при котором взаимодействие с ней заблокировано.'
}
}
}
diff --git a/src/stories/components/button/examples/button-icon-only.component.ts b/src/stories/components/button/examples/button-icon-only.component.ts
new file mode 100644
index 0000000..6884f55
--- /dev/null
+++ b/src/stories/components/button/examples/button-icon-only.component.ts
@@ -0,0 +1,40 @@
+import { Component } from '@angular/core';
+import { StoryObj } from '@storybook/angular';
+import { ButtonModule } from 'primeng/button';
+
+const template = `
+
+`;
+
+@Component({
+ selector: 'app-button-icon-only',
+ standalone: true,
+ imports: [ButtonModule],
+ template
+})
+export class ButtonIconOnlyComponent {}
+
+export const IconOnly: StoryObj = {
+ render: () => ({
+ template: `
`
+ }),
+ parameters: {
+ docs: {
+ description: {
+ story: 'В случаях, когда текст не требуется, можно использовать только иконку.'
+ }
+ }
+ }
+};
diff --git a/src/stories/components/button/examples/button-icon.component.ts b/src/stories/components/button/examples/button-icon.component.ts
index 0d7123d..a45d32d 100644
--- a/src/stories/components/button/examples/button-icon.component.ts
+++ b/src/stories/components/button/examples/button-icon.component.ts
@@ -1,53 +1,54 @@
import { Component } from '@angular/core';
-import { Button } from 'primeng/button';
import { StoryObj } from '@storybook/angular';
+import { ButtonModule } from 'primeng/button';
const template = `
-
-
-
-
+
+
+
icon prefix
+
icon postfix
+
rounded
+
+
xlarge
+
+
+
+
+
large
+
+
+
+
+
base
+
+
+
+
+
small
+
+
+
`;
-const styles = '';
@Component({
selector: 'app-button-icon',
standalone: true,
- imports: [Button],
- template,
- styles
+ imports: [ButtonModule],
+ template
})
export class ButtonIconComponent {}
-export const Icon: StoryObj = {
+export const Icons: StoryObj = {
render: () => ({
template: `
`
}),
parameters: {
docs: {
description: {
- story: 'Кнопки с иконками'
- },
- source: {
- language: 'ts',
- code: `
-import { Component } from '@angular/core';
-import { Button } from 'primeng/button';
-
-@Component({
- selector: 'app-button-icon',
- standalone: true,
- imports: [
- Button
- ],
- template: ${template},
- styles: ${styles}
-})
-export class ButtonIconComponent {}
- `
+ story: 'Кнопки могут содержать иконки слева, справа или быть скруглёнными.'
}
}
}
diff --git a/src/stories/components/button/examples/button-link.component.ts b/src/stories/components/button/examples/button-link.component.ts
new file mode 100644
index 0000000..12aeaf6
--- /dev/null
+++ b/src/stories/components/button/examples/button-link.component.ts
@@ -0,0 +1,40 @@
+import { Component } from '@angular/core';
+import { StoryObj } from '@storybook/angular';
+import { ButtonModule } from 'primeng/button';
+
+const template = `
+
+
+
size="small"
+
size="base"
+
size="large"
+
class="p-button-xlg"
+
+
+
+
+
+
+
+`;
+
+@Component({
+ selector: 'app-button-link',
+ standalone: true,
+ imports: [ButtonModule],
+ template
+})
+export class ButtonLinkComponent {}
+
+export const Link: StoryObj = {
+ render: () => ({
+ template: `
`
+ }),
+ parameters: {
+ docs: {
+ description: {
+ story: 'Кнопка, стилизованная под ссылку.'
+ }
+ }
+ }
+};
diff --git a/src/stories/components/button/examples/button-loading.component.ts b/src/stories/components/button/examples/button-loading.component.ts
index 23cb0a1..1e0a2e3 100644
--- a/src/stories/components/button/examples/button-loading.component.ts
+++ b/src/stories/components/button/examples/button-loading.component.ts
@@ -1,22 +1,28 @@
import { Component } from '@angular/core';
-import { Button } from 'primeng/button';
import { StoryObj } from '@storybook/angular';
+import { ButtonModule } from 'primeng/button';
const template = `
-
-
+
+
size="small"
+
size="base"
+
size="large"
+
class="p-button-xlg"
+
+
+
+
+
`;
-const styles = '';
@Component({
selector: 'app-button-loading',
standalone: true,
- imports: [Button],
- template,
- styles
+ imports: [ButtonModule],
+ template
})
export class ButtonLoadingComponent {}
@@ -27,25 +33,7 @@ export const Loading: StoryObj = {
parameters: {
docs: {
description: {
- story: 'Кнопка в состоянии загрузки'
- },
- source: {
- language: 'ts',
- code: `
-import { Component } from '@angular/core';
-import { Button } from 'primeng/button';
-
-@Component({
- selector: 'app-button-loading',
- standalone: true,
- imports: [
- Button
- ],
- template: ${template},
- styles: ${styles}
-})
-export class ButtonLoadingComponent {}
- `
+ story: 'Кнопка с индикатором загрузки. Полезно для асинхронных действий.'
}
}
}
diff --git a/src/stories/components/button/examples/button-outlined.component.ts b/src/stories/components/button/examples/button-outlined.component.ts
index 6d005e5..8126e39 100644
--- a/src/stories/components/button/examples/button-outlined.component.ts
+++ b/src/stories/components/button/examples/button-outlined.component.ts
@@ -1,20 +1,28 @@
import { Component } from '@angular/core';
-import { Button } from 'primeng/button';
import { StoryObj } from '@storybook/angular';
+import { ButtonModule } from 'primeng/button';
const template = `
`;
-const styles = '';
+
+
size="small"
+
size="base"
+
size="large"
+
class="p-button-xlg"
+
+
+
+
+
+
+
+`;
@Component({
selector: 'app-button-outlined',
standalone: true,
- imports: [Button],
- template,
- styles
+ imports: [ButtonModule],
+ template
})
export class ButtonOutlinedComponent {}
@@ -25,25 +33,7 @@ export const Outlined: StoryObj = {
parameters: {
docs: {
description: {
- story: 'Outlined кнопка'
- },
- source: {
- language: 'ts',
- code: `
-import { Component } from '@angular/core';
-import { Button } from 'primeng/button';
-
-@Component({
- selector: 'app-button-outlined',
- standalone: true,
- imports: [
- Button
- ],
- template: ${template},
- styles: ${styles}
-})
-export class ButtonOutlinedComponent {}
- `
+ story: 'Кнопка с контуром без заливки.'
}
}
}
diff --git a/src/stories/components/button/examples/button-rounded.component.ts b/src/stories/components/button/examples/button-rounded.component.ts
index b197af6..d6ed93d 100644
--- a/src/stories/components/button/examples/button-rounded.component.ts
+++ b/src/stories/components/button/examples/button-rounded.component.ts
@@ -1,22 +1,28 @@
import { Component } from '@angular/core';
-import { Button } from 'primeng/button';
import { StoryObj } from '@storybook/angular';
+import { ButtonModule } from 'primeng/button';
const template = `
-
-
+
+
size="small"
+
size="base"
+
size="large"
+
class="p-button-xlg"
+
+
+
+
+
`;
-const styles = '';
@Component({
selector: 'app-button-rounded',
standalone: true,
- imports: [Button],
- template,
- styles
+ imports: [ButtonModule],
+ template
})
export class ButtonRoundedComponent {}
@@ -27,25 +33,7 @@ export const Rounded: StoryObj = {
parameters: {
docs: {
description: {
- story: 'Скругленная кнопка'
- },
- source: {
- language: 'ts',
- code: `
-import { Component } from '@angular/core';
-import { Button } from 'primeng/button';
-
-@Component({
- selector: 'app-button-rounded',
- standalone: true,
- imports: [
- Button
- ],
- template: ${template},
- styles: ${styles}
-})
-export class ButtonRoundedComponent {}
- `
+ story: 'Полностью скруглённая форма кнопки.'
}
}
}
diff --git a/src/stories/components/button/examples/button-severity.component.ts b/src/stories/components/button/examples/button-severity.component.ts
index ddaff4c..a7b87d8 100644
--- a/src/stories/components/button/examples/button-severity.component.ts
+++ b/src/stories/components/button/examples/button-severity.component.ts
@@ -1,92 +1,48 @@
import { Component } from '@angular/core';
-import { Button } from 'primeng/button';
import { StoryObj } from '@storybook/angular';
+import { ButtonModule } from 'primeng/button';
const template = `
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
success
+
info
+
warn
+
danger
+
+
small
+
+
+
+
+
+
base
+
+
+
+
+
+
large
+
+
+
+
+
+
xlarge
+
+
+
+
`;
-const styles = '';
@Component({
selector: 'app-button-severity',
standalone: true,
- imports: [Button],
- template,
- styles
+ imports: [ButtonModule],
+ template
})
export class ButtonSeverityComponent {}
@@ -97,25 +53,7 @@ export const Severity: StoryObj = {
parameters: {
docs: {
description: {
- story: 'Кнопки с разным Severity'
- },
- source: {
- language: 'ts',
- code: `
-import { Component } from '@angular/core';
-import { Button } from 'primeng/button';
-
-@Component({
- selector: 'app-button-severity',
- standalone: true,
- imports: [
- Button
- ],
- template: ${template},
- styles: ${styles}
-})
-export class ButtonSeverityComponent {}
- `
+ story: 'Цветовые схемы для различных контекстов: success, info, warn, danger.'
}
}
}
diff --git a/src/stories/components/button/examples/button-sizes.component.ts b/src/stories/components/button/examples/button-sizes.component.ts
index 7b5b9a7..3ab7b54 100644
--- a/src/stories/components/button/examples/button-sizes.component.ts
+++ b/src/stories/components/button/examples/button-sizes.component.ts
@@ -1,26 +1,28 @@
import { Component } from '@angular/core';
import { StoryObj } from '@storybook/angular';
-import { Button } from 'primeng/button';
+import { ButtonModule } from 'primeng/button';
const template = `
-
-
-
-
-
+
+
size="small"
+
size="base"
+
size="large"
+
class="p-button-xlg"
+
+
+
+
+
`;
-const styles = '';
-
@Component({
selector: 'app-button-sizes',
standalone: true,
- imports: [Button],
- template,
- styles
+ imports: [ButtonModule],
+ template
})
export class ButtonSizesComponent {}
@@ -31,25 +33,7 @@ export const Sizes: StoryObj = {
parameters: {
docs: {
description: {
- story: 'Кнопки разных размеров'
- },
- source: {
- language: 'ts',
- code: `
-import { Component } from '@angular/core';
-import { Button } from 'primeng/button';
-
-@Component({
- selector: 'app-button-sizes',
- standalone: true,
- imports: [
- Button
- ],
- template: ${template},
- styles: ${styles}
-})
-export class ButtonSizesComponent {}
- `
+ story: 'Все доступные размеры: small, base, large, xlg.'
}
}
}
diff --git a/src/stories/components/button/examples/button-text.component.ts b/src/stories/components/button/examples/button-text.component.ts
index 6e2a925..dd897af 100644
--- a/src/stories/components/button/examples/button-text.component.ts
+++ b/src/stories/components/button/examples/button-text.component.ts
@@ -1,20 +1,28 @@
import { Component } from '@angular/core';
-import { Button } from 'primeng/button';
import { StoryObj } from '@storybook/angular';
+import { ButtonModule } from 'primeng/button';
const template = `
-
+
+
size="small"
+
size="base"
+
size="large"
+
class="p-button-xlg"
+
+
+
+
+
+
`;
-const styles = '';
@Component({
selector: 'app-button-text',
standalone: true,
- imports: [Button],
- template,
- styles
+ imports: [ButtonModule],
+ template
})
export class ButtonTextComponent {}
@@ -25,25 +33,7 @@ export const Text: StoryObj = {
parameters: {
docs: {
description: {
- story: 'Text кнопка'
- },
- source: {
- language: 'ts',
- code: `
-import { Component } from '@angular/core';
-import { Button } from 'primeng/button';
-
-@Component({
- selector: 'app-button-text',
- standalone: true,
- imports: [
- Button
- ],
- template: ${template},
- styles: ${styles}
-})
-export class ButtonTextComponent {}
- `
+ story: 'Кнопка без заливки и границ, часто используется в тулбарах или списках.'
}
}
}
diff --git a/src/styles.scss b/src/styles.scss
index e6cb491..4c7a2aa 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -3,3 +3,7 @@
@tailwind utilities;
@import '@tabler/icons-webfont/dist/tabler-icons.min.css';
+
+html {
+ font-size: 14px;
+}