-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #697 from hubmapconsortium/develop
Develop
- Loading branch information
Showing
19 changed files
with
315 additions
and
356 deletions.
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| { | ||
| "lib": { | ||
| "entryFile": "src/index.ts" | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| export * from './lib/breadcrumbs-size/breadcrumbs-size.directive'; |
52 changes: 52 additions & 0 deletions
52
libs/design-system/breadcrumbs/src/lib/breadcrumbs-size/breadcrumbs-size.directive.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,52 @@ | ||
| import { computed, Directive, input } from '@angular/core'; | ||
|
|
||
| /** Input options for breadcrumb size */ | ||
| export type BreadcrumbSize = 'small' | 'medium' | 'large'; | ||
|
|
||
| /** | ||
| * Breadcrumb size config interface | ||
| */ | ||
| interface BreadcrumbConfig { | ||
| /** Height of component */ | ||
| height: number; | ||
| /** Font variable for the component */ | ||
| font: string; | ||
| } | ||
|
|
||
| /** Breadcrumb size config (numbers in rem) */ | ||
| const BREADCRUMB_CONFIG: Record<BreadcrumbSize, BreadcrumbConfig> = { | ||
| small: { | ||
| height: 1.5, | ||
| font: '--sys-label-small', | ||
| }, | ||
| medium: { | ||
| height: 1.5, | ||
| font: '--sys-label-medium', | ||
| }, | ||
| large: { | ||
| height: 1.75, | ||
| font: '--sys-label-large', | ||
| }, | ||
| }; | ||
|
|
||
| /** | ||
| * Directive for breadcrumb sizes | ||
| */ | ||
| @Directive({ | ||
| selector: '[hraBreadcrumbSize]', | ||
| standalone: true, | ||
| host: { | ||
| '[style.font]': 'fontVar()', | ||
| '[style.--mdc-text-button-container-height.rem]': 'buttonHeight()', | ||
| }, | ||
| }) | ||
| export class BreadcrumbsSizeDirective { | ||
| /** Size of breadcrumbs component */ | ||
| readonly size = input.required<BreadcrumbSize>({ alias: 'hraBreadcrumbSize' }); | ||
|
|
||
| /** Gets the font variable for the current breadcrumbs size */ | ||
| protected readonly fontVar = computed(() => `var(${BREADCRUMB_CONFIG[this.size()].font})`); | ||
|
|
||
| /** Gets the button height for the current breadcrumbs size */ | ||
| protected readonly buttonHeight = computed(() => BREADCRUMB_CONFIG[this.size()].height); | ||
| } |
10 changes: 10 additions & 0 deletions
10
libs/design-system/breadcrumbs/src/lib/breadcrumbs/breadcrumbs.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| @for (crumb of crumbs(); track crumb; let last = $last) { | ||
| @if (!last) { | ||
| <a [routerLink]="crumb.route"> | ||
| <button mat-button disableRipple [hraBreadcrumbSize]="size()">{{ crumb.name }}</button> | ||
| </a> | ||
| <mat-icon>chevron_right</mat-icon> | ||
| } @else { | ||
| <span [hraBreadcrumbSize]="size()">{{ crumb.name }}</span> | ||
| } | ||
| } |
10 changes: 10 additions & 0 deletions
10
libs/design-system/breadcrumbs/src/lib/breadcrumbs/breadcrumbs.component.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| :host { | ||
| display: flex; | ||
| align-items: center; | ||
| color: var(--sys-on-primary-fixed); | ||
|
|
||
| span, | ||
| button { | ||
| --mat-text-button-horizontal-padding: 0.25rem; | ||
| } | ||
| } |
46 changes: 46 additions & 0 deletions
46
libs/design-system/breadcrumbs/src/lib/breadcrumbs/breadcrumbs.component.stories.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,46 @@ | ||
| import { provideDesignSystem } from '@hra-ui/design-system'; | ||
| import { applicationConfig, type Meta, type StoryObj } from '@storybook/angular'; | ||
|
|
||
| import { BreadcrumbsComponent } from './breadcrumbs.component'; | ||
| import { provideRouter } from '@angular/router'; | ||
|
|
||
| const sampleItem = { name: 'Button', route: 'A/B/C' }; | ||
|
|
||
| const meta: Meta<BreadcrumbsComponent> = { | ||
| component: BreadcrumbsComponent, | ||
| title: 'Breadcrumbs', | ||
| parameters: { | ||
| design: { | ||
| type: 'figma', | ||
| url: 'https://www.figma.com/design/BCEJn9KCIbBJ5MzqnojKQp/Design-System-Components?node-id=892-4', | ||
| }, | ||
| }, | ||
| decorators: [ | ||
| applicationConfig({ | ||
| providers: [provideDesignSystem(), provideRouter([])], | ||
| }), | ||
| ], | ||
| args: { | ||
| size: 'large', | ||
| }, | ||
| argTypes: { | ||
| size: { | ||
| control: 'select', | ||
| options: ['small', 'medium', 'large'], | ||
| }, | ||
| }, | ||
| }; | ||
| export default meta; | ||
| type Story = StoryObj<BreadcrumbsComponent>; | ||
|
|
||
| export const Short: Story = { | ||
| args: { | ||
| crumbs: [sampleItem, { name: 'Current Page' }], | ||
| }, | ||
| }; | ||
|
|
||
| export const Long: Story = { | ||
| args: { | ||
| crumbs: [sampleItem, sampleItem, sampleItem, { name: 'Current Page' }], | ||
| }, | ||
| }; |
34 changes: 34 additions & 0 deletions
34
libs/design-system/breadcrumbs/src/lib/breadcrumbs/breadcrumbs.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,34 @@ | ||
| import { CommonModule } from '@angular/common'; | ||
| import { ChangeDetectionStrategy, Component, input } from '@angular/core'; | ||
| import { MatIconModule } from '@angular/material/icon'; | ||
| import { RouterModule } from '@angular/router'; | ||
| import { ButtonModule } from '@hra-ui/design-system/button'; | ||
|
|
||
| import { BreadcrumbSize, BreadcrumbsSizeDirective } from '../breadcrumbs-size/breadcrumbs-size.directive'; | ||
|
|
||
| /** Breadcrumb item */ | ||
| interface BreadcrumbItem { | ||
| /** Name of item */ | ||
| name: string; | ||
| /** Route to page */ | ||
| route?: string; | ||
| } | ||
|
|
||
| /** | ||
| * Component used to help the user understand their location within websites | ||
| */ | ||
| @Component({ | ||
| selector: 'hra-breadcrumbs', | ||
| standalone: true, | ||
| imports: [CommonModule, MatIconModule, ButtonModule, RouterModule, BreadcrumbsSizeDirective], | ||
| templateUrl: './breadcrumbs.component.html', | ||
| styleUrl: './breadcrumbs.component.scss', | ||
| changeDetection: ChangeDetectionStrategy.OnPush, | ||
| }) | ||
| export class BreadcrumbsComponent { | ||
| /** Size of breadcrumbs component */ | ||
| readonly size = input.required<BreadcrumbSize>(); | ||
|
|
||
| /** Crumbs to display */ | ||
| readonly crumbs = input<BreadcrumbItem[]>([]); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,2 +1,10 @@ | ||
| export * from './lib/button-styles/button-styles.component'; | ||
| export * from './lib/providers'; | ||
| export * from './lib/button.module'; | ||
|
|
||
| export * from './lib/button-size/button-size.directive'; | ||
| export * from './lib/directives/call-to-action-button.directive'; | ||
| export * from './lib/directives/nav-item-button.directive'; | ||
| export * from './lib/directives/navigation-category-button.directive'; | ||
| export * from './lib/directives/primary-button.directive'; | ||
| export * from './lib/directives/secondary-button.directive'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.