diff --git a/live-editing/configs/BadgeConfigGenerator.ts b/live-editing/configs/BadgeConfigGenerator.ts index c331361e12..0015cbc597 100644 --- a/live-editing/configs/BadgeConfigGenerator.ts +++ b/live-editing/configs/BadgeConfigGenerator.ts @@ -17,34 +17,53 @@ export class BadgeConfigGenerator implements IConfigGenerator { shortenComponentPathBy: "/data-display/badge/" })); - // badge sample 2 + // badge overview configs.push(new Config({ - component: 'BadgeSample2Component', - additionalFiles: ["src/app/data-display/badge/model/member.model.ts"], + component: 'BadgeOverviewComponent', appConfig: BaseAppConfig, shortenComponentPathBy: "/data-display/badge/" })); - // badge sample 3 + // badge size configs.push(new Config({ - component: 'BadgeSample3Component', - additionalFiles: ["src/app/data-display/badge/model/member.model.ts"], + component: 'BadgeSizeComponent', + appConfig: BaseAppConfig, + shortenComponentPathBy: "/data-display/badge/" + })); + + // badge type + configs.push(new Config({ + component: 'BadgeTypeComponent', + appConfig: BaseAppConfig, + shortenComponentPathBy: "/data-display/badge/" + })); + + // badge shape + configs.push(new Config({ + component: 'BadgeShapeComponent', + appConfig: BaseAppConfig, + shortenComponentPathBy: "/data-display/badge/" + })); + + // badge variants + configs.push(new Config({ + component: 'BadgeVariantsComponent', appConfig: BaseAppConfig, shortenComponentPathBy: "/data-display/badge/" })); - // badge styling sample + // badge styling configs.push(new Config({ - component: 'BadgeStylingSampleComponent', - additionalFiles: ["src/app/data-display/badge/model/member.model.ts", "src/app/data-display/badge/badge-styling-sample/layout.scss"], + component: 'BadgeStylingComponent', + additionalFiles: ["src/app/data-display/badge/model/member.model.ts", "src/app/data-display/badge/badge-styling/layout.scss"], appConfig: BaseAppConfig, shortenComponentPathBy: "/data-display/badge/" })); - // badge dot sample + // badge dot configs.push(new Config({ - component: 'BadgeDotSampleComponent', - additionalFiles: ["src/app/data-display/badge/model/member.model.ts", "src/app/data-display/badge/badge-dot-sample/badge-dot-sample.component.scss"], + component: 'BadgeDotComponent', + additionalFiles: ["src/app/data-display/badge/badge-dot/badge-dot.component.scss"], appConfig: BaseAppConfig, shortenComponentPathBy: "/data-display/badge/" })); diff --git a/src/app/data-display/badge/badge-dot-sample/badge-dot-sample.component.html b/src/app/data-display/badge/badge-dot-sample/badge-dot-sample.component.html deleted file mode 100644 index 798c7e17ae..0000000000 --- a/src/app/data-display/badge/badge-dot-sample/badge-dot-sample.component.html +++ /dev/null @@ -1,4 +0,0 @@ -
- - -
diff --git a/src/app/data-display/badge/badge-dot-sample/badge-dot-sample.component.scss b/src/app/data-display/badge/badge-dot-sample/badge-dot-sample.component.scss deleted file mode 100644 index da1d082f57..0000000000 --- a/src/app/data-display/badge/badge-dot-sample/badge-dot-sample.component.scss +++ /dev/null @@ -1,17 +0,0 @@ -.wrapper { - display: flex; - position: relative; - margin: 15px 0 0 15px; - - igx-avatar { - anchor-name: --avatar; - } - - igx-badge { - position: absolute; - position-anchor: --avatar; - bottom: anchor(--avatar top); - left: anchor(right); - transform: translate(-75%, 75%); - } -} diff --git a/src/app/data-display/badge/badge-dot/badge-dot.component.html b/src/app/data-display/badge/badge-dot/badge-dot.component.html new file mode 100644 index 0000000000..659f1a328e --- /dev/null +++ b/src/app/data-display/badge/badge-dot/badge-dot.component.html @@ -0,0 +1,43 @@ +
+
+
+ notifications +
+ +
+
+ @for (item of notifications; track item.title) { +
+ + @if (item.unread) { + + } + + {{ item.title }} + {{ item.time }} + chevron_right +
+ } +
+
+ + +
+
+ @for (tab of tabs; track tab.label) { +
+ + @if (tab.icon === 'facebookMessenger') { + + } @else { + + } + @if (tab.hasUpdates) { + + } + + {{ tab.label }} +
+ } +
+
diff --git a/src/app/data-display/badge/badge-dot/badge-dot.component.scss b/src/app/data-display/badge/badge-dot/badge-dot.component.scss new file mode 100644 index 0000000000..8cfe07c79d --- /dev/null +++ b/src/app/data-display/badge/badge-dot/badge-dot.component.scss @@ -0,0 +1,129 @@ +igx-badge { + --ig-size: var(--ig-size-small); +} + +igx-avatar { + --size: 40px; +} + +.icon-example igx-badge, +.avatar-example igx-badge, +.nav-icon igx-badge { + position: absolute; +} + +.icon-example igx-badge { + inset-block-start: 0; + inset-inline-end: 2px; +} + +.avatar-example igx-badge { + inset-block-start: -0.25rem; + inset-inline-end: -2px; +} + +.nav-icon igx-badge { + inset-block-start: -2px; + inset-inline-end: -6px; +} + +.badge-dot { + display: flex; + align-items: center; + justify-content: center; + gap: 40px; + min-height: 8.5rem; +} + +.dot-example { + position: relative; +} + +.icon-example, +.avatar-example, +.icon-circle { + display: flex; + align-items: center; + width: 36px; + height: 36px; +} + +.icon-circle { + justify-content: center; + border-radius: 50%; + background: var(--ig-gray-200); + color: var(--ig-gray-800); +} + +.notifications-card, +.nav-card { + background: var(--ig-surface-500); + border-radius: 4px; + box-shadow: 0 1px 3px hsl(from var(--ig-gray-900) h s l / 0.12); +} + +.notifications-card { + min-width: 272px; + padding: 8px 0; +} + +.notification-row { + display: flex; + align-items: center; + gap: 8px; + padding: 8px 12px; + font-size: 14px; + color: var(--ig-gray-900); +} + +.row-indicator { + display: inline-flex; + justify-content: center; + width: 12px; +} + +.row-title { + flex: 1; +} + +.row-time { + font-size: 13px; + color: var(--ig-gray-900); +} + +.row-time.unread { + color: #0057A9; + font-weight: 600; +} + +.row-chevron { + --ig-size: 1rem; + color: var(--ig-gray-600); + font-size: 18px; +} + +.nav-card { + display: flex; + align-items: center; + gap: 8px; + padding: 8px 12px; +} + +.nav-item { + display: flex; + flex-direction: column; + align-items: center; + gap: 4px; + min-width: 56px; + color: var(--ig-gray-700); + font-size: 12px; +} + +.nav-item.active { + color: #0057A9; +} + +.nav-icon { + position: relative; + display: inline-flex; +} diff --git a/src/app/data-display/badge/badge-dot/badge-dot.component.ts b/src/app/data-display/badge/badge-dot/badge-dot.component.ts new file mode 100644 index 0000000000..ed27a1e9ac --- /dev/null +++ b/src/app/data-display/badge/badge-dot/badge-dot.component.ts @@ -0,0 +1,28 @@ +import { Component } from '@angular/core'; +import { IgxAvatarComponent } from 'igniteui-angular/avatar'; +import { IgxBadgeComponent } from 'igniteui-angular/badge'; +import { IgxIconComponent, IgxIconService} from 'igniteui-angular/icon'; +import { facebookMessenger } from '@igniteui/material-icons-extended'; + +@Component({ + selector: 'app-badge-dot', + styleUrls: ['./badge-dot.component.scss'], + templateUrl: './badge-dot.component.html', + imports: [IgxAvatarComponent, IgxBadgeComponent, IgxIconComponent] +}) +export class BadgeDotComponent { + constructor(private iconService: IgxIconService) { + this.iconService.addSvgIconFromText('facebookMessenger', facebookMessenger.value); + } + + public notifications = [ + { title: 'Contract renewal', time: '09:12', unread: true }, + { title: 'Weekly digest', time: 'Yesterday', unread: false } + ]; + + public tabs = [ + { label: 'Home', icon: 'home', active: true, hasUpdates: false }, + { label: 'Chat', icon: 'facebookMessenger', active: false, hasUpdates: true }, + { label: 'Profile', icon: 'person', active: false, hasUpdates: false } + ]; +} diff --git a/src/app/data-display/badge/badge-icon/badge-icon.component.html b/src/app/data-display/badge/badge-icon/badge-icon.component.html index 3969983d30..b49c231b15 100644 --- a/src/app/data-display/badge/badge-icon/badge-icon.component.html +++ b/src/app/data-display/badge/badge-icon/badge-icon.component.html @@ -1,4 +1,17 @@ -
- - -
\ No newline at end of file +
+ @for (item of badges; track item.label) { +
+
+ +
+ {{ item.label }} +
+ } +
+
+ + +
+ on avatar +
+
diff --git a/src/app/data-display/badge/badge-icon/badge-icon.component.scss b/src/app/data-display/badge/badge-icon/badge-icon.component.scss index dbb6d9c2b7..fadf787c8d 100644 --- a/src/app/data-display/badge/badge-icon/badge-icon.component.scss +++ b/src/app/data-display/badge/badge-icon/badge-icon.component.scss @@ -1,10 +1,58 @@ -.wrapper { - position: relative; - margin: 15px 0 0 15px; +igx-avatar { + --size: 40px; + --ig-avatar-background: var(--ig-gray-700); + --ig-avatar-color: var(--ig-gray-50); } -igx-badge { - position: absolute; - bottom: 0; - left: 28px; +.icon-wrapper { + display: flex; + align-items: flex-end; + justify-content: center; + width: 40px; + height: 40px; +} + +.icon-wrapper > igx-badge { + --ig-size: var(--ig-size-medium); + display: inline-flex; + align-items: center; + justify-content: center; + text-align: center; +} + +.avatar-wrapper igx-badge { + --ig-size: var(--ig-size-small); + position: absolute; + inset-block-start: -4px; + inset-inline-end: -6px; +} + +.badge-icon { + display: flex; + align-items: center; + justify-content: center; + gap: 40px; + min-height: 8.5rem; +} + +.badge-icon-item { + display: flex; + flex-direction: column; + align-items: center; + gap: 6px; + min-width: 56px; +} + +.badge-icon-item span { + color: var(--ig-gray-700); + font-size: 12px; + transform: translateY(4px); +} + +.avatar-wrapper { + position: relative; + display: flex; + align-items: center; + justify-content: center; + height: 40px; } diff --git a/src/app/data-display/badge/badge-icon/badge-icon.component.ts b/src/app/data-display/badge/badge-icon/badge-icon.component.ts index baea07f9be..c169696772 100644 --- a/src/app/data-display/badge/badge-icon/badge-icon.component.ts +++ b/src/app/data-display/badge/badge-icon/badge-icon.component.ts @@ -1,6 +1,4 @@ -import { Component, OnInit, inject } from '@angular/core'; -import { heartMonitor } from '@igniteui/material-icons-extended'; -import { IgxIconService } from 'igniteui-angular/icon'; +import { Component } from '@angular/core'; import { IgxAvatarComponent } from 'igniteui-angular/avatar'; import { IgxBadgeComponent } from 'igniteui-angular/badge'; @@ -10,11 +8,12 @@ import { IgxBadgeComponent } from 'igniteui-angular/badge'; templateUrl: './badge-icon.component.html', imports: [IgxAvatarComponent, IgxBadgeComponent] }) -export class BadgeIconComponent implements OnInit { - protected _iconService = inject(IgxIconService); - - - public ngOnInit() { - this._iconService.addSvgIconFromText(heartMonitor.name, heartMonitor.value, 'imx-icons'); - } +export class BadgeIconComponent { + public badges = [ + { icon: 'check', type: 'success', label: 'check' }, + { icon: 'favorite_border', type: 'error', label: 'favorite' }, + { icon: 'notifications', type: 'info', label: 'notification' }, + { icon: 'star_border', type: 'warning', label: 'star' }, + { icon: 'settings', type: 'info', label: 'settings' } + ]; } diff --git a/src/app/data-display/badge/badge-outlined/badge-outlined.component.html b/src/app/data-display/badge/badge-outlined/badge-outlined.component.html index 3a7e6f397a..c260ae5624 100644 --- a/src/app/data-display/badge/badge-outlined/badge-outlined.component.html +++ b/src/app/data-display/badge/badge-outlined/badge-outlined.component.html @@ -1,7 +1,28 @@ -
-
- - -
- Terrance Orta -
+
+
+
+ favorite_border +
+ +
+
+ + +
+
+ @for (step of steps; track step.label) { + @if (!$first) { + + } +
+
+ {{ step.index }} + @if (step.current) { + + } +
+ {{ step.label }} +
+ } +
+
diff --git a/src/app/data-display/badge/badge-outlined/badge-outlined.component.scss b/src/app/data-display/badge/badge-outlined/badge-outlined.component.scss index 21db08ffe6..2ff5d88026 100644 --- a/src/app/data-display/badge/badge-outlined/badge-outlined.component.scss +++ b/src/app/data-display/badge/badge-outlined/badge-outlined.component.scss @@ -1,33 +1,115 @@ +igx-badge { + --ig-size: var(--ig-size-small); +} + +igx-avatar { + --size: 40px; + --ig-avatar-background: var(--ig-gray-700); + --ig-avatar-color: var(--ig-gray-50); +} + +:host ::ng-deep .outlined-example igx-avatar igx-icon { + color: var(--ig-gray-50); +} + +.outlined-example:nth-child(2) igx-badge { + inset-block-start: auto; + inset-block-end: -6px; + inset-inline-end: -6px; +} + +.step-marker igx-badge { + position: absolute; + inset-block-start: -1px; + inset-inline-end: -2px; +} + +.outlined-example igx-badge { + position: absolute; + inset-block-start: -6px; + inset-inline-end: -10px; +} + +.icon-circle igx-icon { + font-size: 20px; +} + :host { - display: block; - padding-inline: 1rem; + display: block; + padding-inline: 1rem; } -.wrapper { - position: relative; - display: flex; - align-items: center; - margin-block: 1rem; - width: fit-content; - padding: 0.5rem; - gap: 0.5rem; - border: 1px solid var(--ig-gray-300); - border-radius: .25rem; +.badge-outlined { + display: flex; + align-items: center; + justify-content: center; + gap: 60px; + min-height: 7rem; } -igx-avatar { - anchor-name: --avatar; +.outlined-example { + position: relative; + display: flex; } -igx-badge { - --size: 1rem; +.icon-circle, +.step-circle { + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; +} + +.icon-circle { + width: 36px; + height: 36px; + background: var(--ig-gray-200); + color: var(--ig-gray-800); +} + +.steps { + display: flex; + align-items: flex-start; + gap: 8px; +} + +.step { + display: flex; + flex-direction: column; + align-items: center; + gap: 8px; +} + +.step-marker { + position: relative; + display: flex; +} + +.step-circle { + width: 26px; + height: 26px; + background: var(--ig-gray-900); + color: var(--ig-gray-50); + font-size: 12px; +} + +.step-circle.pending { + background: var(--ig-gray-200); + color: var(--ig-gray-800); +} + +.step-connector { + width: 56px; + margin-block-start: 13px; + border-block-start: 1px solid var(--ig-gray-900); +} - position: absolute; - inset-block-end: anchor(--avatar bottom); - inset-inline-end: anchor(--avatar right); +.step-connector.pending { + border-block-start-style: dashed; + border-block-start-color: var(--ig-gray-400); } -span { - display: block; - font-weight: 600; +.step-label { + color: var(--ig-gray-700); + font-size: 13px; } diff --git a/src/app/data-display/badge/badge-outlined/badge-outlined.component.ts b/src/app/data-display/badge/badge-outlined/badge-outlined.component.ts index 5f99c356b5..6b2013340f 100644 --- a/src/app/data-display/badge/badge-outlined/badge-outlined.component.ts +++ b/src/app/data-display/badge/badge-outlined/badge-outlined.component.ts @@ -1,12 +1,19 @@ import { Component } from '@angular/core'; import { IgxAvatarComponent } from 'igniteui-angular/avatar'; import { IgxBadgeComponent } from 'igniteui-angular/badge'; +import { IgxIconComponent } from 'igniteui-angular/icon'; @Component({ selector: 'app-badge-outlined', styleUrls: ['./badge-outlined.component.scss'], templateUrl: './badge-outlined.component.html', - imports: [IgxAvatarComponent, IgxBadgeComponent] + imports: [IgxAvatarComponent, IgxBadgeComponent, IgxIconComponent] }) -export class BadgeOutlinedComponent { } +export class BadgeOutlinedComponent { + public steps = [ + { index: 1, label: 'Orders', current: false, pending: false }, + { index: 2, label: 'Payment', current: true, pending: false }, + { index: 3, label: 'Shipping', current: false, pending: true } + ]; +} diff --git a/src/app/data-display/badge/badge-overview/badge-overview.component.html b/src/app/data-display/badge/badge-overview/badge-overview.component.html new file mode 100644 index 0000000000..caa9148204 --- /dev/null +++ b/src/app/data-display/badge/badge-overview/badge-overview.component.html @@ -0,0 +1,18 @@ +
+
+ + +
+
+ mail + +
+
+ Events + +
+
+ notifications + +
+
diff --git a/src/app/data-display/badge/badge-overview/badge-overview.component.scss b/src/app/data-display/badge/badge-overview/badge-overview.component.scss new file mode 100644 index 0000000000..3830a130dd --- /dev/null +++ b/src/app/data-display/badge/badge-overview/badge-overview.component.scss @@ -0,0 +1,67 @@ +igx-avatar { + --size: 40px; +} + +igx-icon { + color: var(--ig-gray-700); + font-size: 1.5rem; +} + +igx-badge { + --ig-size: var(--ig-size-small); + position: absolute; + inset-block-start: -0.15rem; + inset-inline-end: -0.15rem; +} + +.avatar-example igx-badge { + inset-block-start: auto; + inset-block-end: -0.15rem; + inset-inline-end: -0.15rem; +} + +.event-example igx-chip { + --ig-size: var(--ig-size-large); +} + +.event-example igx-badge { + inset-block-start: 0; + inset-inline-end: -0.8rem; +} + +.icon-example igx-badge { + inset-block-start: 0; + inset-inline-end: 0; +} + +.notification-example igx-badge { + inset-block-start: 0.5rem; + inset-inline-end: 0.5rem; +} + +.event-example { + min-width: auto; +} + +.badge-overview { + display: flex; + align-items: center; + justify-content: center; + gap: 60px; + min-height: 7rem; +} + +.badge-example { + position: relative; + display: inline-flex; + align-items: center; + justify-content: center; + min-width: 2.5rem; + min-height: 2.5rem; +} + +.icon-example, +.notification-example { + width: 2.5rem; + height: 2.5rem; +} diff --git a/src/app/data-display/badge/badge-overview/badge-overview.component.ts b/src/app/data-display/badge/badge-overview/badge-overview.component.ts new file mode 100644 index 0000000000..73ed64752d --- /dev/null +++ b/src/app/data-display/badge/badge-overview/badge-overview.component.ts @@ -0,0 +1,13 @@ +import { Component } from '@angular/core'; +import { IgxAvatarComponent } from 'igniteui-angular/avatar'; +import { IgxBadgeComponent } from 'igniteui-angular/badge'; +import { IgxChipComponent } from 'igniteui-angular/chips'; +import { IgxIconComponent } from 'igniteui-angular/icon'; + +@Component({ + selector: 'app-badge-overview', + templateUrl: './badge-overview.component.html', + styleUrls: ['./badge-overview.component.scss'], + imports: [IgxAvatarComponent, IgxBadgeComponent, IgxChipComponent, IgxIconComponent] +}) +export class BadgeOverviewComponent { } diff --git a/src/app/data-display/badge/badge-sample-2/badge-sample-2.component.html b/src/app/data-display/badge/badge-sample-2/badge-sample-2.component.html deleted file mode 100644 index 2e629a9a69..0000000000 --- a/src/app/data-display/badge/badge-sample-2/badge-sample-2.component.html +++ /dev/null @@ -1,4 +0,0 @@ -
- - -
diff --git a/src/app/data-display/badge/badge-sample-2/badge-sample-2.component.scss b/src/app/data-display/badge/badge-sample-2/badge-sample-2.component.scss deleted file mode 100644 index dbb6d9c2b7..0000000000 --- a/src/app/data-display/badge/badge-sample-2/badge-sample-2.component.scss +++ /dev/null @@ -1,10 +0,0 @@ -.wrapper { - position: relative; - margin: 15px 0 0 15px; -} - -igx-badge { - position: absolute; - bottom: 0; - left: 28px; -} diff --git a/src/app/data-display/badge/badge-sample-3/badge-sample-3.component.html b/src/app/data-display/badge/badge-sample-3/badge-sample-3.component.html deleted file mode 100644 index 36c6a560c2..0000000000 --- a/src/app/data-display/badge/badge-sample-3/badge-sample-3.component.html +++ /dev/null @@ -1,18 +0,0 @@ - - - Team Members (4) - - @for (member of members; track member) { - -
-
- - -
-
- {{ member.name }} -
-
- - } - diff --git a/src/app/data-display/badge/badge-sample-3/badge-sample-3.component.scss b/src/app/data-display/badge/badge-sample-3/badge-sample-3.component.scss deleted file mode 100644 index c5aee48558..0000000000 --- a/src/app/data-display/badge/badge-sample-3/badge-sample-3.component.scss +++ /dev/null @@ -1,18 +0,0 @@ -.wrapper { - display: flex; - flex-direction: row; -} - -.contact-name { - font-weight: 600; -} - -.contact-container { - margin-left: 20px; -} - -.badge-style { - position: absolute; - bottom: 2.5px; - left: 40px; -} diff --git a/src/app/data-display/badge/badge-sample-3/badge-sample-3.component.ts b/src/app/data-display/badge/badge-sample-3/badge-sample-3.component.ts deleted file mode 100644 index 00cdf74e74..0000000000 --- a/src/app/data-display/badge/badge-sample-3/badge-sample-3.component.ts +++ /dev/null @@ -1,21 +0,0 @@ -import { Component } from '@angular/core'; -import { Member } from '../model/member.model'; -import { IgxListComponent, IgxListItemComponent } from 'igniteui-angular/list'; -import { IgxAvatarComponent } from 'igniteui-angular/avatar'; -import { IgxBadgeComponent } from 'igniteui-angular/badge'; - - -@Component({ - selector: 'app-badge-sample-3', - styleUrls: ['./badge-sample-3.component.scss'], - templateUrl: './badge-sample-3.component.html', - imports: [IgxListComponent, IgxListItemComponent, IgxAvatarComponent, IgxBadgeComponent] -}) -export class BadgeSample3Component { - public members: Member[] = [ - new Member('Terrance Orta', 'online'), - new Member('Donna Price', 'online'), - new Member('Lisa Landers', 'away'), - new Member('Dorothy H. Spencer', 'offline') - ]; -} diff --git a/src/app/data-display/badge/badge-shape/badge-shape.component.html b/src/app/data-display/badge/badge-shape/badge-shape.component.html new file mode 100644 index 0000000000..181f4727ee --- /dev/null +++ b/src/app/data-display/badge/badge-shape/badge-shape.component.html @@ -0,0 +1,14 @@ +
+
+ Rounded + + + +
+
+ Square + + + +
+
diff --git a/src/app/data-display/badge/badge-shape/badge-shape.component.scss b/src/app/data-display/badge/badge-shape/badge-shape.component.scss new file mode 100644 index 0000000000..917648462a --- /dev/null +++ b/src/app/data-display/badge/badge-shape/badge-shape.component.scss @@ -0,0 +1,26 @@ +.badge-shape { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 40px; + min-height: 8.5rem; +} + +.badge-shape-row { + display: grid; + grid-template-columns: 80px 40px 40px 40px; + align-items: center; + justify-items: center; + gap: 8px; +} + +.row-label { + justify-self: end; + color: var(--ig-gray-700); + font-size: 14px; +} + +.badge-small { + --ig-size: var(--ig-size-small); +} diff --git a/src/app/data-display/badge/badge-shape/badge-shape.component.ts b/src/app/data-display/badge/badge-shape/badge-shape.component.ts new file mode 100644 index 0000000000..cd0b71b0e9 --- /dev/null +++ b/src/app/data-display/badge/badge-shape/badge-shape.component.ts @@ -0,0 +1,10 @@ +import { Component } from '@angular/core'; +import { IgxBadgeComponent } from 'igniteui-angular/badge'; + +@Component({ + selector: 'app-badge-shape', + templateUrl: './badge-shape.component.html', + styleUrls: ['./badge-shape.component.scss'], + imports: [IgxBadgeComponent] +}) +export class BadgeShapeComponent { } diff --git a/src/app/data-display/badge/badge-size/badge-size.component.html b/src/app/data-display/badge/badge-size/badge-size.component.html new file mode 100644 index 0000000000..f18e860e64 --- /dev/null +++ b/src/app/data-display/badge/badge-size/badge-size.component.html @@ -0,0 +1,20 @@ +
+
+ Small + + + +
+
+ Medium + + + +
+
+ Large + + + +
+
diff --git a/src/app/data-display/badge/badge-size/badge-size.component.scss b/src/app/data-display/badge/badge-size/badge-size.component.scss new file mode 100644 index 0000000000..59184f81f1 --- /dev/null +++ b/src/app/data-display/badge/badge-size/badge-size.component.scss @@ -0,0 +1,26 @@ +.badge-size { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 40px; + padding: 32px; +} + +.badge-size-row { + display: grid; + grid-template-columns: 80px 32px 40px 40px; + align-items: center; + justify-items: center; + gap: 8px; +} + +.row-label { + justify-self: end; + color: var(--ig-gray-700); + font-size: 14px; +} + +.badge-large { --ig-size: var(--ig-size-large); } +.badge-medium { --ig-size: var(--ig-size-medium); } +.badge-small { --ig-size: var(--ig-size-small); } diff --git a/src/app/data-display/badge/badge-size/badge-size.component.ts b/src/app/data-display/badge/badge-size/badge-size.component.ts new file mode 100644 index 0000000000..47e1c14c93 --- /dev/null +++ b/src/app/data-display/badge/badge-size/badge-size.component.ts @@ -0,0 +1,10 @@ +import { Component } from '@angular/core'; +import { IgxBadgeComponent } from 'igniteui-angular/badge'; + +@Component({ + selector: 'app-badge-size', + templateUrl: './badge-size.component.html', + styleUrls: ['./badge-size.component.scss'], + imports: [IgxBadgeComponent] +}) +export class BadgeSizeComponent { } diff --git a/src/app/data-display/badge/badge-styling-sample/badge-styling-sample.component.html b/src/app/data-display/badge/badge-styling-sample/badge-styling-sample.component.html deleted file mode 100644 index 18cf6c5468..0000000000 --- a/src/app/data-display/badge/badge-styling-sample/badge-styling-sample.component.html +++ /dev/null @@ -1,18 +0,0 @@ - - - Team Members (4) - - @for (member of members; track member) { - -
-
- - -
-
- {{ member.name }} -
-
- - } - diff --git a/src/app/data-display/badge/badge-styling-sample/badge-styling-sample.component.scss b/src/app/data-display/badge/badge-styling-sample/badge-styling-sample.component.scss deleted file mode 100644 index e0a0507010..0000000000 --- a/src/app/data-display/badge/badge-styling-sample/badge-styling-sample.component.scss +++ /dev/null @@ -1,11 +0,0 @@ -@use "layout.scss"; -@use "igniteui-angular/theming" as *; - -$custom-badge-theme: badge-theme( - $background-color: #57a5cd, - $border-radius: 4px -); - -:host { - @include tokens($custom-badge-theme); -} diff --git a/src/app/data-display/badge/badge-styling-sample/badge-styling-sample.component.ts b/src/app/data-display/badge/badge-styling-sample/badge-styling-sample.component.ts deleted file mode 100644 index 03aaac9d47..0000000000 --- a/src/app/data-display/badge/badge-styling-sample/badge-styling-sample.component.ts +++ /dev/null @@ -1,21 +0,0 @@ -import { Component } from '@angular/core'; -import { Member } from '../model/member.model'; -import { IgxListComponent, IgxListItemComponent } from 'igniteui-angular/list'; -import { IgxAvatarComponent } from 'igniteui-angular/avatar'; -import { IgxBadgeComponent } from 'igniteui-angular/badge'; - - -@Component({ - selector: 'app-badge-styling-sample', - styleUrls: ['./badge-styling-sample.component.scss'], - templateUrl: './badge-styling-sample.component.html', - imports: [IgxListComponent, IgxListItemComponent, IgxAvatarComponent, IgxBadgeComponent] -}) -export class BadgeStylingSampleComponent { - public members: Member[] = [ - new Member('Terrance Orta', 'online'), - new Member('Donna Price', 'online'), - new Member('Lisa Landers', 'away'), - new Member('Dorothy H. Spencer', 'offline') - ]; -} diff --git a/src/app/data-display/badge/badge-styling-sample/layout.scss b/src/app/data-display/badge/badge-styling-sample/layout.scss deleted file mode 100644 index cee5eb7fb1..0000000000 --- a/src/app/data-display/badge/badge-styling-sample/layout.scss +++ /dev/null @@ -1,18 +0,0 @@ -.wrapper { - display: flex; - flex-direction: row; - } - - .contact-name { - font-weight: 600; - } - - .contact-container{ - margin-left: 20px; - } - - .badge-style { - position: absolute; - bottom: 2.5px; - left: 40px; - } \ No newline at end of file diff --git a/src/app/data-display/badge/badge-styling/badge-styling.component.html b/src/app/data-display/badge/badge-styling/badge-styling.component.html new file mode 100644 index 0000000000..00bd36f856 --- /dev/null +++ b/src/app/data-display/badge/badge-styling/badge-styling.component.html @@ -0,0 +1,18 @@ +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
diff --git a/src/app/data-display/badge/badge-styling/badge-styling.component.scss b/src/app/data-display/badge/badge-styling/badge-styling.component.scss new file mode 100644 index 0000000000..d280f593d6 --- /dev/null +++ b/src/app/data-display/badge/badge-styling/badge-styling.component.scss @@ -0,0 +1,50 @@ +@use "layout.scss"; + +igx-badge { + --ig-size: var(--ig-size-small); +} + +:host ::ng-deep .badge-teal igx-icon, +:host ::ng-deep .badge-amber igx-icon, +:host ::ng-deep .styling-item.pink igx-avatar igx-icon { + color: var(--ig-gray-50); +} + +:host ::ng-deep .badge-teal igx-icon { + position: relative; +} + +:host ::ng-deep .badge-teal igx-icon::after { + content: ""; + position: absolute; + inset: 50% auto auto 50%; + width: 4px; + height: 4px; + border-radius: 50%; + background: var(--ig-success-700); + transform: translate(-50%, -50%); +} + +.styling-item.green igx-avatar { + --icon-color: var(--ig-success-700); +} + +.styling-item igx-avatar { + --size: 40px; +} + +.styling-item.green igx-avatar { + --ig-avatar-background: var(--ig-success-200); + --ig-avatar-color: var(--ig-gray-50); +} + +.styling-item.pink igx-avatar { + --ig-avatar-background: #DA64FF; + --ig-avatar-color: var(--ig-gray-50); +} + +.styling-item igx-badge { + position: absolute; + inset-block-end: -2px; + inset-inline-end: -2px; +} diff --git a/src/app/data-display/badge/badge-sample-2/badge-sample-2.component.ts b/src/app/data-display/badge/badge-styling/badge-styling.component.ts similarity index 56% rename from src/app/data-display/badge/badge-sample-2/badge-sample-2.component.ts rename to src/app/data-display/badge/badge-styling/badge-styling.component.ts index a41285282c..d3d2d150d1 100644 --- a/src/app/data-display/badge/badge-sample-2/badge-sample-2.component.ts +++ b/src/app/data-display/badge/badge-styling/badge-styling.component.ts @@ -2,10 +2,11 @@ import { Component } from '@angular/core'; import { IgxAvatarComponent } from 'igniteui-angular/avatar'; import { IgxBadgeComponent } from 'igniteui-angular/badge'; + @Component({ - selector: 'app-badge-sample-2', - styleUrls: ['./badge-sample-2.component.scss'], - templateUrl: './badge-sample-2.component.html', + selector: 'app-badge-styling', + styleUrls: ['./badge-styling.component.scss'], + templateUrl: './badge-styling.component.html', imports: [IgxAvatarComponent, IgxBadgeComponent] }) -export class BadgeSample2Component { } +export class BadgeStylingComponent { } diff --git a/src/app/data-display/badge/badge-styling/layout.scss b/src/app/data-display/badge/badge-styling/layout.scss new file mode 100644 index 0000000000..601f783236 --- /dev/null +++ b/src/app/data-display/badge/badge-styling/layout.scss @@ -0,0 +1,33 @@ +.badge-teal { + --background-color: var(--ig-success-700); + --border-radius: 50%; +} + +.badge-amber { + --background-color: #C97C00; + --border-radius: 50%; +} + +.badge-magenta { + --background-color: #9C27B0; + --ig-avatar-color: var(--ig-gray-50); + --border-radius: 50%; +} + +.badge-lime { + --background-color: var(--ig-success-700); + --border-radius: 50%; +} + +.badge-styling { + display: flex; + align-items: center; + justify-content: center; + gap: 60px; + min-height: 7rem; +} + +.styling-item { + position: relative; + display: flex; +} diff --git a/src/app/data-display/badge/badge-tailwind-styling-sample/badge-tailwind-styling-sample.component.html b/src/app/data-display/badge/badge-tailwind-styling-sample/badge-tailwind-styling-sample.component.html deleted file mode 100644 index edceb81ace..0000000000 --- a/src/app/data-display/badge/badge-tailwind-styling-sample/badge-tailwind-styling-sample.component.html +++ /dev/null @@ -1,18 +0,0 @@ - - - Team Members (4) - - @for (member of members; track member) { - -
-
- - -
-
- {{ member.name }} -
-
- - } - diff --git a/src/app/data-display/badge/badge-tailwind-styling-sample/badge-tailwind-styling-sample.component.scss b/src/app/data-display/badge/badge-tailwind-styling-sample/badge-tailwind-styling-sample.component.scss deleted file mode 100644 index a60d456faa..0000000000 --- a/src/app/data-display/badge/badge-tailwind-styling-sample/badge-tailwind-styling-sample.component.scss +++ /dev/null @@ -1 +0,0 @@ -@use "layout.scss"; diff --git a/src/app/data-display/badge/badge-tailwind-styling-sample/badge-tailwind-styling-sample.component.ts b/src/app/data-display/badge/badge-tailwind-styling-sample/badge-tailwind-styling-sample.component.ts deleted file mode 100644 index ee9e7d5c11..0000000000 --- a/src/app/data-display/badge/badge-tailwind-styling-sample/badge-tailwind-styling-sample.component.ts +++ /dev/null @@ -1,21 +0,0 @@ -import { Component } from '@angular/core'; -import { Member } from '../model/member.model'; -import { IgxListComponent, IgxListItemComponent } from 'igniteui-angular/list'; -import { IgxAvatarComponent } from 'igniteui-angular/avatar'; -import { IgxBadgeComponent } from 'igniteui-angular/badge'; - - -@Component({ - selector: 'app-badge-tailwind-styling-sample', - styleUrls: ['./badge-tailwind-styling-sample.component.scss'], - templateUrl: './badge-tailwind-styling-sample.component.html', - imports: [IgxListComponent, IgxListItemComponent, IgxAvatarComponent, IgxBadgeComponent] -}) -export class BadgeTailwindStylingSampleComponent { - public members: Member[] = [ - new Member('Terrance Orta', 'online'), - new Member('Donna Price', 'online'), - new Member('Lisa Landers', 'away'), - new Member('Dorothy H. Spencer', 'offline') - ]; -} diff --git a/src/app/data-display/badge/badge-tailwind-styling-sample/layout.scss b/src/app/data-display/badge/badge-tailwind-styling-sample/layout.scss deleted file mode 100644 index cee5eb7fb1..0000000000 --- a/src/app/data-display/badge/badge-tailwind-styling-sample/layout.scss +++ /dev/null @@ -1,18 +0,0 @@ -.wrapper { - display: flex; - flex-direction: row; - } - - .contact-name { - font-weight: 600; - } - - .contact-container{ - margin-left: 20px; - } - - .badge-style { - position: absolute; - bottom: 2.5px; - left: 40px; - } \ No newline at end of file diff --git a/src/app/data-display/badge/badge-tailwind-styling/badge-tailwind-styling.component.html b/src/app/data-display/badge/badge-tailwind-styling/badge-tailwind-styling.component.html new file mode 100644 index 0000000000..4d03b9457e --- /dev/null +++ b/src/app/data-display/badge/badge-tailwind-styling/badge-tailwind-styling.component.html @@ -0,0 +1,18 @@ +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
diff --git a/src/app/data-display/badge/badge-tailwind-styling/badge-tailwind-styling.component.scss b/src/app/data-display/badge/badge-tailwind-styling/badge-tailwind-styling.component.scss new file mode 100644 index 0000000000..50ceb5330f --- /dev/null +++ b/src/app/data-display/badge/badge-tailwind-styling/badge-tailwind-styling.component.scss @@ -0,0 +1,15 @@ +@use "layout.scss"; + +igx-badge { + --ig-size: var(--ig-size-small); +} + +igx-avatar { + --size: 40px; + --ig-avatar-background: var(--ig-gray-700); + --ig-avatar-color: var(--ig-gray-50); +} + +:host ::ng-deep igx-avatar igx-icon { + color: var(--ig-gray-50); +} diff --git a/src/app/data-display/badge/badge-tailwind-styling/badge-tailwind-styling.component.ts b/src/app/data-display/badge/badge-tailwind-styling/badge-tailwind-styling.component.ts new file mode 100644 index 0000000000..36ec4c92da --- /dev/null +++ b/src/app/data-display/badge/badge-tailwind-styling/badge-tailwind-styling.component.ts @@ -0,0 +1,12 @@ +import { Component } from '@angular/core'; +import { IgxAvatarComponent } from 'igniteui-angular/avatar'; +import { IgxBadgeComponent } from 'igniteui-angular/badge'; + + +@Component({ + selector: 'app-badge-tailwind-styling', + styleUrls: ['./badge-tailwind-styling.component.scss'], + templateUrl: './badge-tailwind-styling.component.html', + imports: [IgxAvatarComponent, IgxBadgeComponent] +}) +export class BadgeTailwindStylingComponent { } diff --git a/src/app/data-display/badge/badge-tailwind-styling/layout.scss b/src/app/data-display/badge/badge-tailwind-styling/layout.scss new file mode 100644 index 0000000000..e97d2f5aa4 --- /dev/null +++ b/src/app/data-display/badge/badge-tailwind-styling/layout.scss @@ -0,0 +1,29 @@ +.badge-close { + --background-color: var(--ig-error-500); + --border-radius: 50%; +} + +.badge-volume { + --background-color: #8B5BB1; + --border-radius: 50%; +} + +.badge-remove { + --background-color: var(--ig-gray-900); + --border-radius: 50%; +} + +.badge-check { + --background-color: var(--ig-success-600); + --border-radius: 50%; +} + +.badge-style { + position: absolute; + inset-block-end: -4px; + inset-inline-end: -4px; +} + +.badge-parent { + min-height: 7rem; +} diff --git a/src/app/data-display/badge/badge-type/badge-type.component.html b/src/app/data-display/badge/badge-type/badge-type.component.html new file mode 100644 index 0000000000..4a3b93a78c --- /dev/null +++ b/src/app/data-display/badge/badge-type/badge-type.component.html @@ -0,0 +1,23 @@ +
+
+
+ + +
+ Dot +
+
+
+ + +
+ Icon +
+
+
+ + +
+ Text +
+
diff --git a/src/app/data-display/badge/badge-type/badge-type.component.scss b/src/app/data-display/badge/badge-type/badge-type.component.scss new file mode 100644 index 0000000000..0479de835a --- /dev/null +++ b/src/app/data-display/badge/badge-type/badge-type.component.scss @@ -0,0 +1,44 @@ +igx-avatar { + --size: 40px; +} + +igx-badge { + --ig-size: var(--ig-size-small); + position: absolute; + inset-block-end: -6px; + inset-inline-end: -4px; +} + +.badge-type { + display: flex; + align-items: center; + justify-content: center; + gap: 60px; + min-height: 8.5rem; +} + +.badge-type-item { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 16px; + min-width: 56px; + min-height: 72px; +} + +.avatar-wrapper { + position: relative; + display: flex; +} + +.dot-badge { + inset-block-end: 0; + inset-inline-end: 0; +} + +.badge-type-item span { + color: var(--ig-gray-700); + font-size: 12px; + line-height: 16px; +} diff --git a/src/app/data-display/badge/badge-dot-sample/badge-dot-sample.component.ts b/src/app/data-display/badge/badge-type/badge-type.component.ts similarity index 55% rename from src/app/data-display/badge/badge-dot-sample/badge-dot-sample.component.ts rename to src/app/data-display/badge/badge-type/badge-type.component.ts index 23cbbb5389..d65ecaedbb 100644 --- a/src/app/data-display/badge/badge-dot-sample/badge-dot-sample.component.ts +++ b/src/app/data-display/badge/badge-type/badge-type.component.ts @@ -3,9 +3,9 @@ import { IgxAvatarComponent } from 'igniteui-angular/avatar'; import { IgxBadgeComponent } from 'igniteui-angular/badge'; @Component({ - selector: 'app-badge-dot-sample', - styleUrls: ['./badge-dot-sample.component.scss'], - templateUrl: './badge-dot-sample.component.html', + selector: 'app-badge-type', + templateUrl: './badge-type.component.html', + styleUrls: ['./badge-type.component.scss'], imports: [IgxAvatarComponent, IgxBadgeComponent] }) -export class BadgeDotSampleComponent { } +export class BadgeTypeComponent { } diff --git a/src/app/data-display/badge/badge-variants/badge-variants.component.html b/src/app/data-display/badge/badge-variants/badge-variants.component.html new file mode 100644 index 0000000000..6b03f179d4 --- /dev/null +++ b/src/app/data-display/badge/badge-variants/badge-variants.component.html @@ -0,0 +1,37 @@ +
+
+
+ + +
+ Primary +
+
+
+ + +
+ Info +
+
+
+ + +
+ Success +
+
+
+ + +
+ Warn +
+
+
+ + +
+ Error +
+
diff --git a/src/app/data-display/badge/badge-variants/badge-variants.component.scss b/src/app/data-display/badge/badge-variants/badge-variants.component.scss new file mode 100644 index 0000000000..a53f2b4484 --- /dev/null +++ b/src/app/data-display/badge/badge-variants/badge-variants.component.scss @@ -0,0 +1,42 @@ +igx-badge { + --ig-size: var(--ig-size-small); + position: absolute; + inset-block-end: -4px; + inset-inline-end: -4px; +} + +igx-avatar { + --ig-avatar-background: var(--ig-gray-700); + --ig-avatar-color: var(--ig-gray-50); +} + +:host ::ng-deep .variant-item:first-child igx-avatar igx-icon, +:host ::ng-deep .variant-item:nth-child(4) igx-avatar igx-icon { + color: var(--ig-gray-50); +} + +.badge-variants { + display: flex; + align-items: center; + justify-content: center; + gap: 40px; + min-height: 8.5rem; +} + +.variant-item { + display: flex; + flex-direction: column; + align-items: center; + gap: 12px; + min-width: 56px; +} + +.variant-item span { + color: var(--ig-gray-700); + font-size: 13px; +} + +.avatar-wrapper { + position: relative; + display: flex; +} diff --git a/src/app/data-display/badge/badge-variants/badge-variants.component.ts b/src/app/data-display/badge/badge-variants/badge-variants.component.ts new file mode 100644 index 0000000000..27f31de5f1 --- /dev/null +++ b/src/app/data-display/badge/badge-variants/badge-variants.component.ts @@ -0,0 +1,11 @@ +import { Component } from '@angular/core'; +import { IgxAvatarComponent } from 'igniteui-angular/avatar'; +import { IgxBadgeComponent } from 'igniteui-angular/badge'; + +@Component({ + selector: 'app-badge-variants', + styleUrls: ['./badge-variants.component.scss'], + templateUrl: './badge-variants.component.html', + imports: [IgxAvatarComponent, IgxBadgeComponent] +}) +export class BadgeVariantsComponent { } diff --git a/src/app/data-display/data-display-routes-data.ts b/src/app/data-display/data-display-routes-data.ts index 84c0e4554e..b5d24e6205 100644 --- a/src/app/data-display/data-display-routes-data.ts +++ b/src/app/data-display/data-display-routes-data.ts @@ -2,12 +2,15 @@ export const dataDisplayRoutesData = { "badge-icon": { displayName: "Badge Icon Sample", parentName: "Badge" }, - "badge-sample-2": { displayName: "Simple Badge", parentName: "Badge" }, - "badge-sample-3": { displayName: "Badge for List Items", parentName: "Badge" }, - "badge-outlined-sample": { displayName: "Badge Outlined Sample", parentName: "Badge" }, - "badge-dot-sample": { displayName: "Badge Dot Sample", parentName: "Badge" }, - "badge-styling-sample": { displayName: "Badge Styling Sample", parentName: "Badge" }, - "badge-tailwind-styling-sample": { displayName: "Badge Tailwind Styling Sample", parentName: "Badge" }, + "badge-overview": { displayName: "Overview", parentName: "Badge" }, + "badge-size": { displayName: "Badge Size", parentName: "Badge" }, + "badge-type": { displayName: "Badge Type", parentName: "Badge" }, + "badge-shape": { displayName: "Badge Shape", parentName: "Badge" }, + "badge-variants": { displayName: "Badge Variants", parentName: "Badge" }, + "badge-outlined": { displayName: "Badge Outlined", parentName: "Badge" }, + "badge-dot": { displayName: "Badge Dot", parentName: "Badge" }, + "badge-styling": { displayName: "Badge Styling", parentName: "Badge" }, + "badge-tailwind-styling": { displayName: "Badge Tailwind Styling", parentName: "Badge" }, "chip-simple": { displayName: "Chip Simple", parentName: "Chip" }, "chip-variants": { displayName: "Chip Variants", parentName: "Chip" }, "chip-area-sample": { displayName: "Chip Area Sample", parentName: "Chip" }, diff --git a/src/app/data-display/data-display.routes.ts b/src/app/data-display/data-display.routes.ts index 4db820c452..514fb69438 100644 --- a/src/app/data-display/data-display.routes.ts +++ b/src/app/data-display/data-display.routes.ts @@ -1,10 +1,13 @@ import { BadgeIconComponent } from './badge/badge-icon/badge-icon.component'; -import { BadgeSample2Component } from './badge/badge-sample-2/badge-sample-2.component'; -import { BadgeSample3Component } from './badge/badge-sample-3/badge-sample-3.component'; +import { BadgeOverviewComponent } from './badge/badge-overview/badge-overview.component'; +import { BadgeSizeComponent } from './badge/badge-size/badge-size.component'; +import { BadgeTypeComponent } from './badge/badge-type/badge-type.component'; +import { BadgeShapeComponent } from './badge/badge-shape/badge-shape.component'; +import { BadgeVariantsComponent } from './badge/badge-variants/badge-variants.component'; import { BadgeOutlinedComponent } from './badge/badge-outlined/badge-outlined.component'; -import { BadgeDotSampleComponent } from './badge/badge-dot-sample/badge-dot-sample.component'; -import { BadgeStylingSampleComponent } from './badge/badge-styling-sample/badge-styling-sample.component'; -import { BadgeTailwindStylingSampleComponent } from './badge/badge-tailwind-styling-sample/badge-tailwind-styling-sample.component'; +import { BadgeDotComponent } from './badge/badge-dot/badge-dot.component'; +import { BadgeStylingComponent } from './badge/badge-styling/badge-styling.component'; +import { BadgeTailwindStylingComponent } from './badge/badge-tailwind-styling/badge-tailwind-styling.component'; import { ChipAreaSampleComponent } from './chip/chip-area-sample/chip-area-sample.component'; import { ChipSimpleComponent } from './chip/chip-simple/chip-simple.component'; import { ChipVariantsComponent } from './chip/chip-variants/chip-variants.component'; @@ -55,34 +58,49 @@ export const DataDisplayRoutes: Routes = [ path: 'badge-icon' }, { - component: BadgeSample2Component, - data: dataDisplayRoutesData['badge-sample-2'], - path: 'badge-sample-2' + component: BadgeOverviewComponent, + data: dataDisplayRoutesData['badge-overview'], + path: 'badge-overview' }, { - component: BadgeSample3Component, - data: dataDisplayRoutesData['badge-sample-3'], - path: 'badge-sample-3' + component: BadgeSizeComponent, + data: dataDisplayRoutesData['badge-size'], + path: 'badge-size' + }, + { + component: BadgeTypeComponent, + data: dataDisplayRoutesData['badge-type'], + path: 'badge-type' + }, + { + component: BadgeShapeComponent, + data: dataDisplayRoutesData['badge-shape'], + path: 'badge-shape' + }, + { + component: BadgeVariantsComponent, + data: dataDisplayRoutesData['badge-variants'], + path: 'badge-variants' }, { component: BadgeOutlinedComponent, - data: dataDisplayRoutesData['badge-outlined-sample'], - path: 'badge-outlined-sample' + data: dataDisplayRoutesData['badge-outlined'], + path: 'badge-outlined' }, { - component: BadgeDotSampleComponent, - data: dataDisplayRoutesData['badge-dot-sample'], - path: 'badge-dot-sample' + component: BadgeDotComponent, + data: dataDisplayRoutesData['badge-dot'], + path: 'badge-dot' }, { - component: BadgeStylingSampleComponent, - data: dataDisplayRoutesData['badge-styling-sample'], - path: 'badge-styling-sample' + component: BadgeStylingComponent, + data: dataDisplayRoutesData['badge-styling'], + path: 'badge-styling' }, { - component: BadgeTailwindStylingSampleComponent, - data: dataDisplayRoutesData['badge-tailwind-styling-sample'], - path: 'badge-tailwind-styling-sample' + component: BadgeTailwindStylingComponent, + data: dataDisplayRoutesData['badge-tailwind-styling'], + path: 'badge-tailwind-styling' }, { component: ChipAreaSampleComponent, diff --git a/src/styles.scss b/src/styles.scss index 16c8722ea8..8c144ff6dd 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -19,6 +19,21 @@ body { margin: 0; } +body.custom-body:has( + app-badge-overview, + app-badge-styling, + app-badge-dot, + app-badge-type, + app-badge-icon, + app-badge-size, + app-badge-shape, + app-badge-variants, + app-badge-outlined, + app-badge-tailwind-styling +) { + background: transparent; +} + @include core(); @include typography(); @include theme(