Skip to content

Commit fe6b1dc

Browse files
xelaintxelaint
authored
feat(design): create DaffBadgeComponent (#4585)
1 parent 4a40119 commit fe6b1dc

36 files changed

Lines changed: 950 additions & 0 deletions

‎apps/daffio/src/app/docs/design/examples/content.provider.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { makeEnvironmentProviders } from '@angular/core';
33
import { provideDaffDesignAccordionExamplesContent } from '@daffodil/design-examples/accordion';
44
import { provideDaffDesignArticleExamplesContent } from '@daffodil/design-examples/article';
55
import { provideDaffDesignArticleEncapsulatedExamplesContent } from '@daffodil/design-examples/article-encapsulated';
6+
import { provideDaffDesignBadgeExamplesContent } from '@daffodil/design-examples/badge';
67
import { provideDaffDesignBeaconExamplesContent } from '@daffodil/design-examples/beacon';
78
import { provideDaffDesignBreadcrumbExamplesContent } from '@daffodil/design-examples/breadcrumb';
89
import { provideDaffDesignButtonExamplesContent } from '@daffodil/design-examples/button';
@@ -45,6 +46,7 @@ export const provideDaffioDesignExamplesContent = () => makeEnvironmentProviders
4546
provideDaffDocsColorPaletteGeneratorExampleContent(),
4647
provideDaffDesignAccordionExamplesContent(),
4748
provideDaffDesignArticleExamplesContent(),
49+
provideDaffDesignBadgeExamplesContent(),
4850
provideDaffDesignBeaconExamplesContent(),
4951
provideDaffDesignBreadcrumbExamplesContent(),
5052
provideDaffDesignButtonExamplesContent(),

‎libs/design-examples/badge/ng-package.json‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"$schema": "../../../node_modules/ng-packagr/ng-entrypoint.schema.json",
3+
"lib": {
4+
"entryFile": "src/index.ts",
5+
"styleIncludePaths": ["../../src/scss"]
6+
}
7+
}

‎libs/design-examples/badge/src/badge-appearances/badge-appearances.component.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
<daff-badge appearance="filled">Filled</daff-badge>
2+
<daff-badge appearance="outlined">Outlined</daff-badge>

‎libs/design-examples/badge/src/badge-appearances/badge-appearances.component.scss‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
:host {
2+
display: flex;
3+
align-items: center;
4+
flex-wrap: wrap;
5+
justify-content: center;
6+
gap: 0.5rem;
7+
}

‎libs/design-examples/badge/src/badge-appearances/badge-appearances.component.ts‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import {
2+
ChangeDetectionStrategy,
3+
Component,
4+
} from '@angular/core';
5+
6+
import { DaffBadgeComponent } from '@daffodil/design/badge';
7+
8+
@Component({
9+
selector: 'badge-appearances-example',
10+
templateUrl: './badge-appearances.component.html',
11+
styleUrl: './badge-appearances.component.scss',
12+
changeDetection: ChangeDetectionStrategy.OnPush,
13+
imports: [
14+
DaffBadgeComponent,
15+
],
16+
})
17+
export class BadgeAppearancesExampleComponent {}

‎libs/design-examples/badge/src/badge-colors/badge-colors.component.html‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<div class="daff-example-badge-colors__wrapper">
2+
<daff-badge color="primary">Primary</daff-badge>
3+
<daff-badge color="secondary">Secondary</daff-badge>
4+
<daff-badge color="tertiary">Tertiary</daff-badge>
5+
<daff-badge color="theme">Theme</daff-badge>
6+
<daff-badge color="theme-contrast">Theme Contrast</daff-badge>
7+
<daff-badge color="dark">Dark</daff-badge>
8+
<daff-badge color="light">Light</daff-badge>
9+
</div>
10+
11+
<div class="daff-example-badge-colors__wrapper">
12+
<daff-badge appearance="outlined" color="primary">Primary</daff-badge>
13+
<daff-badge appearance="outlined" color="secondary">Secondary</daff-badge>
14+
<daff-badge appearance="outlined" color="tertiary">Tertiary</daff-badge>
15+
<daff-badge appearance="outlined" color="theme">Theme</daff-badge>
16+
<daff-badge appearance="outlined" color="theme-contrast">Theme Contrast</daff-badge>
17+
<daff-badge appearance="outlined" color="dark">Dark</daff-badge>
18+
<daff-badge appearance="outlined" color="light">Light</daff-badge>
19+
</div>

‎libs/design-examples/badge/src/badge-colors/badge-colors.component.scss‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
:host {
2+
display: flex;
3+
flex-direction: column;
4+
gap: 0.5rem;
5+
}
6+
7+
.daff-example-badge-colors {
8+
&__wrapper {
9+
display: flex;
10+
align-items: center;
11+
flex-wrap: wrap;
12+
justify-content: center;
13+
gap: 0.5rem;
14+
}
15+
}

‎libs/design-examples/badge/src/badge-colors/badge-colors.component.ts‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import {
2+
ChangeDetectionStrategy,
3+
Component,
4+
} from '@angular/core';
5+
6+
import { DaffBadgeComponent } from '@daffodil/design/badge';
7+
8+
@Component({
9+
selector: 'badge-colors-example',
10+
templateUrl: './badge-colors.component.html',
11+
styleUrl: './badge-colors.component.scss',
12+
changeDetection: ChangeDetectionStrategy.OnPush,
13+
imports: [
14+
DaffBadgeComponent,
15+
],
16+
})
17+
export class BadgeColorsExampleComponent {}

‎libs/design-examples/badge/src/badge-prefix/badge-prefix.component.html‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
<daff-badge status="success">
2+
<fa-icon [icon]="faCircleCheck" daffPrefix></fa-icon>
3+
Verified
4+
</daff-badge>

‎libs/design-examples/badge/src/badge-prefix/badge-prefix.component.ts‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import {
2+
ChangeDetectionStrategy,
3+
Component,
4+
} from '@angular/core';
5+
import { FaIconComponent } from '@fortawesome/angular-fontawesome';
6+
import { faCircleCheck } from '@fortawesome/free-solid-svg-icons';
7+
8+
import { DAFF_BADGE_COMPONENTS } from '@daffodil/design/badge';
9+
10+
@Component({
11+
selector: 'badge-prefix-example',
12+
templateUrl: './badge-prefix.component.html',
13+
changeDetection: ChangeDetectionStrategy.OnPush,
14+
imports: [
15+
DAFF_BADGE_COMPONENTS,
16+
FaIconComponent,
17+
],
18+
})
19+
export class BadgePrefixExampleComponent {
20+
faCircleCheck = faCircleCheck;
21+
}

0 commit comments

Comments
 (0)