-
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.
update button toggle story + merge develop
- Loading branch information
Showing
12 changed files
with
311 additions
and
5 deletions.
There are no files selected for viewing
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
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/providers'; |
41 changes: 41 additions & 0 deletions
41
libs/design-system/menu/src/lib/menu-demo/menu-demo.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,41 @@ | ||
<button | ||
mat-icon-button | ||
[matMenuTriggerFor]="options" | ||
[hraIconButtonSize]="size()" | ||
aria-label="Icon to open nested menu" | ||
> | ||
<mat-icon>more_vert</mat-icon> | ||
</button> | ||
|
||
<mat-menu #options="matMenu" [class]="'hra-nested-menu ' + size()"> | ||
@for (option of menuOptions(); track option) { | ||
@if (option.expandedOptions) { | ||
<button | ||
class="expanded" | ||
mat-menu-item | ||
matRipple | ||
matRippleColor="#201E3D14" | ||
[matMenuTriggerFor]="submenu" | ||
(mouseover)="suboptions = option.expandedOptions" | ||
> | ||
<mat-icon>{{ option.icon }}</mat-icon> | ||
{{ option.name }} | ||
<mat-icon class="expand-arrow">arrow_right</mat-icon> | ||
</button> | ||
} @else { | ||
<button mat-menu-item> | ||
<mat-icon>{{ option.icon }}</mat-icon> | ||
{{ option.name }} | ||
</button> | ||
} | ||
} | ||
</mat-menu> | ||
|
||
<mat-menu #submenu="matMenu" [class]="'hra-nested-menu ' + size()"> | ||
@for (suboption of suboptions; track suboption) { | ||
<button mat-menu-item> | ||
<mat-icon>{{ suboption.icon }}</mat-icon> | ||
<span>{{ suboption.name }}</span> | ||
</button> | ||
} | ||
</mat-menu> |
81 changes: 81 additions & 0 deletions
81
libs/design-system/menu/src/lib/menu-demo/menu-demo.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,81 @@ | ||
import { provideAnimations } from '@angular/platform-browser/animations'; | ||
import { provideDesignSystem } from '@hra-ui/design-system'; | ||
import { applicationConfig, Meta, StoryObj } from '@storybook/angular'; | ||
|
||
import { MenuDemoComponent, MenuDemoOption } from './menu-demo.component'; | ||
|
||
const exampleOptions: MenuDemoOption[] = [ | ||
{ | ||
name: 'Downloads', | ||
icon: 'download', | ||
expandedOptions: [ | ||
{ | ||
name: 'Cells CSV', | ||
icon: 'download', | ||
}, | ||
{ | ||
name: 'Cell Links CSV', | ||
icon: 'download', | ||
}, | ||
{ | ||
name: 'Cells & Cell Links ZIP', | ||
icon: 'download', | ||
}, | ||
{ | ||
name: 'Color Map CSV', | ||
icon: 'download', | ||
}, | ||
{ | ||
name: 'Help', | ||
icon: 'info', | ||
}, | ||
], | ||
}, | ||
{ | ||
name: 'Full Screen', | ||
icon: 'fullscreen', | ||
}, | ||
{ | ||
name: 'Hide Cell Links', | ||
icon: 'visibility_off', | ||
}, | ||
{ | ||
name: 'Embed App', | ||
icon: 'code', | ||
}, | ||
{ | ||
name: 'Help', | ||
icon: 'info', | ||
}, | ||
]; | ||
|
||
const meta: Meta<MenuDemoComponent> = { | ||
component: MenuDemoComponent, | ||
title: 'Menu', | ||
parameters: { | ||
design: { | ||
type: 'figma', | ||
url: 'https://www.figma.com/design/BCEJn9KCIbBJ5MzqnojKQp/Design-System-Components?node-id=619-1552', | ||
}, | ||
}, | ||
decorators: [ | ||
applicationConfig({ | ||
providers: [provideAnimations(), provideDesignSystem()], | ||
}), | ||
], | ||
argTypes: { | ||
size: { | ||
control: 'select', | ||
options: ['small', 'medium', 'large'], | ||
}, | ||
}, | ||
args: { | ||
size: 'medium', | ||
menuOptions: exampleOptions, | ||
}, | ||
}; | ||
|
||
export default meta; | ||
type Story = StoryObj<MenuDemoComponent>; | ||
|
||
export const Primary: Story = {}; |
38 changes: 38 additions & 0 deletions
38
libs/design-system/menu/src/lib/menu-demo/menu-demo.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,38 @@ | ||
import { ChangeDetectionStrategy, Component, input, ViewEncapsulation } from '@angular/core'; | ||
import { MatButtonModule } from '@angular/material/button'; | ||
import { MatRippleModule } from '@angular/material/core'; | ||
import { MatIconModule } from '@angular/material/icon'; | ||
import { MatMenuModule } from '@angular/material/menu'; | ||
import { IconButtonSize, IconButtonSizeDirective } from '@hra-ui/design-system/icon-button'; | ||
|
||
/** Menu option interface */ | ||
export interface MenuDemoOption { | ||
/** Name of option */ | ||
name: string; | ||
/** Material icon name */ | ||
icon: string; | ||
/** Options to open in a second menu */ | ||
expandedOptions?: MenuDemoOption[]; | ||
} | ||
|
||
/** | ||
* Nested Angular Material menu component | ||
*/ | ||
@Component({ | ||
selector: 'hra-menu', | ||
standalone: true, | ||
imports: [MatButtonModule, MatMenuModule, MatIconModule, MatRippleModule, IconButtonSizeDirective], | ||
templateUrl: './menu-demo.component.html', | ||
encapsulation: ViewEncapsulation.None, | ||
changeDetection: ChangeDetectionStrategy.OnPush, | ||
}) | ||
export class MenuDemoComponent { | ||
/** Menu size */ | ||
readonly size = input<IconButtonSize>('medium'); | ||
|
||
/** List of menu options */ | ||
readonly menuOptions = input<MenuDemoOption[]>([]); | ||
|
||
/** List of suboptions to display in the second menu */ | ||
suboptions: MenuDemoOption[] = []; | ||
} |
94 changes: 94 additions & 0 deletions
94
libs/design-system/menu/src/lib/menu-styles/menu-styles.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,94 @@ | ||
.hra-nested-menu { | ||
--mat-menu-container-color: white; | ||
--mat-menu-container-shape: 0.5rem; | ||
--mat-app-elevation-shadow-level-2: 0rem 0.3125rem 1rem 0rem rgb(from var(--sys-secondary) r g b / 0.16); | ||
--mat-menu-item-with-icon-leading-spacing: 1rem; | ||
--mat-menu-item-with-icon-trailing-spacing: 1rem; | ||
--mat-menu-item-label-text-color: #464954; | ||
--mat-menu-item-icon-color: #464954; | ||
--mat-menu-item-hover-state-layer-color: rgb(from var(--sys-secondary) r g b / 0.04); | ||
--mat-menu-item-focus-state-layer-color: rgb(from var(--sys-secondary) r g b / 0.04); | ||
|
||
button { | ||
min-width: 12rem; | ||
} | ||
|
||
.expand-arrow { | ||
--mat-menu-item-spacing: 1rem; | ||
position: absolute; | ||
right: 0; | ||
} | ||
|
||
.mat-mdc-menu-submenu-icon { | ||
display: none; | ||
} | ||
|
||
.mat-mdc-menu-item-highlighted { | ||
border: 1px solid rgb(from var(--sys-secondary) r g b / 0.32); | ||
border-left: none; | ||
border-right: none; | ||
} | ||
|
||
&.small { | ||
--mat-menu-item-icon-size: 1.25rem; | ||
--mat-menu-item-spacing: 0.5rem; | ||
--mat-menu-item-label-text-tracking: var(--sys-label-small-tracking); | ||
--mat-menu-item-label-text-weight: var(--sys-label-small-weight); | ||
--mat-menu-item-label-text-size: var(--sys-label-small-size); | ||
--mat-menu-item-label-text-line-height: var(--mat-menu-item-icon-size); | ||
|
||
mat-icon { | ||
font-size: var(--mat-menu-item-icon-size); | ||
} | ||
|
||
.mat-mdc-menu-content { | ||
padding: 0.25rem 0; | ||
} | ||
|
||
button { | ||
min-height: 2.5rem; | ||
|
||
&.expanded { | ||
min-width: 10.5rem; | ||
} | ||
} | ||
} | ||
|
||
&.medium { | ||
--mat-menu-item-label-text-tracking: var(--sys-label-medium-tracking); | ||
--mat-menu-item-label-text-weight: var(--sys-label-medium-weight); | ||
--mat-menu-item-label-text-size: var(--sys-label-medium-size); | ||
--mat-menu-item-label-text-line-height: var(--sys-label-medium-line-height); | ||
|
||
.mat-mdc-menu-content { | ||
padding: 0.5rem 0; | ||
} | ||
|
||
button { | ||
min-height: 3rem; | ||
|
||
&.expanded { | ||
min-width: 12.25rem; | ||
} | ||
} | ||
} | ||
|
||
&.large { | ||
--mat-menu-item-label-text-tracking: var(--sys-label-large-tracking); | ||
--mat-menu-item-label-text-weight: var(--sys-label-large-weight); | ||
--mat-menu-item-label-text-size: var(--sys-label-large-size); | ||
--mat-menu-item-label-text-line-height: var(--sys-label-large-line-height); | ||
|
||
.mat-mdc-menu-content { | ||
padding: 0.75rem 0; | ||
} | ||
|
||
button { | ||
min-height: 3.5rem; | ||
|
||
&.expanded { | ||
min-width: 12.75rem; | ||
} | ||
} | ||
} | ||
} |
14 changes: 14 additions & 0 deletions
14
libs/design-system/menu/src/lib/menu-styles/menu-styles.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,14 @@ | ||
import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core'; | ||
|
||
/** | ||
* Applies menu styles globally | ||
*/ | ||
@Component({ | ||
selector: 'hra-menu-styles', | ||
standalone: true, | ||
template: '', | ||
styleUrls: ['./menu-styles.component.scss'], | ||
encapsulation: ViewEncapsulation.None, | ||
changeDetection: ChangeDetectionStrategy.OnPush, | ||
}) | ||
export class MenuStylesComponent {} |
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,11 @@ | ||
import { EnvironmentProviders, makeEnvironmentProviders } from '@angular/core'; | ||
import { provideStyleComponents } from '@hra-ui/cdk/styling'; | ||
|
||
import { MenuStylesComponent } from './menu-styles/menu-styles.component'; | ||
|
||
/** | ||
* Returns providers for menu | ||
*/ | ||
export function provideMenu(): EnvironmentProviders { | ||
return makeEnvironmentProviders([provideStyleComponents(MenuStylesComponent)]); | ||
} |
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
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
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