Skip to content

Commit

Permalink
update button toggle story + merge develop
Browse files Browse the repository at this point in the history
  • Loading branch information
bhushankhope committed Aug 27, 2024
2 parents c65fe29 + 4c8bf36 commit 8c4cf84
Show file tree
Hide file tree
Showing 12 changed files with 311 additions and 5 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -35,15 +35,29 @@ export const SingleSelect: Story = {
render: (args) => ({
props: args,
template: `
<h2>Single Select</h2>
<mat-button-toggle-group name="singleSelect" aria-label="Single Select"
hraButtonToggleSize="${args['size']}">
<mat-button-toggle disableRipple value="button1" checked>Button</mat-button-toggle>
<mat-button-toggle disableRipple value="button2">Button</mat-button-toggle>
<mat-button-toggle disableRipple disabled value="button3">Button</mat-button-toggle>
</mat-button-toggle-group>
`,
}),
};

<h2>Multi Select</h2>
export const MultiSelect: Story = {
args: {
size: 'large',
},
argTypes: {
size: {
control: 'select',
options: ['medium', 'large'],
},
},
render: (args) => ({
props: args,
template: `
<mat-button-toggle-group multiple name="multiSelect" aria-label="Multi Select"
hraButtonToggleSize="${args['size']}">
<mat-button-toggle disableRipple value="button1" checked>Button</mat-button-toggle>
Expand Down
5 changes: 5 additions & 0 deletions libs/design-system/menu/ng-package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
{
"lib": {
"entryFile": "src/index.ts"
}
}
1 change: 1 addition & 0 deletions libs/design-system/menu/src/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export * from './lib/providers';
41 changes: 41 additions & 0 deletions libs/design-system/menu/src/lib/menu-demo/menu-demo.component.html
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>
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 libs/design-system/menu/src/lib/menu-demo/menu-demo.component.ts
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[] = [];
}
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;
}
}
}
}
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 {}
11 changes: 11 additions & 0 deletions libs/design-system/menu/src/lib/providers.ts
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)]);
}
4 changes: 4 additions & 0 deletions libs/design-system/src/lib/providers.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,9 @@ import { EnvironmentProviders, makeEnvironmentProviders } from '@angular/core';
import { provideIcons } from '@hra-ui/cdk/icons';
import { provideButtons } from '@hra-ui/design-system/button';
import { provideIconButtons } from '@hra-ui/design-system/icon-button';
import { provideMenu } from '@hra-ui/design-system/menu';
import { provideScrolling } from '@hra-ui/design-system/scrolling';
import { provideTable } from '@hra-ui/design-system/table';

/**
* Returns design system providers
Expand All @@ -19,5 +21,7 @@ export function provideDesignSystem(): EnvironmentProviders {
provideButtons(),
provideIconButtons(),
provideScrolling(),
provideMenu(),
provideTable(),
]);
}
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import { MatSortModule } from '@angular/material/sort';
import { provideAnimations } from '@angular/platform-browser/animations';
import { provideDesignSystem } from '@hra-ui/design-system';
import { applicationConfig, Meta, moduleMetadata, StoryObj } from '@storybook/angular';

import { provideTable } from '../providers';
import { TableDemoData, TableDemoComponent } from './table-demo.component';
import { TableDemoComponent, TableDemoData } from './table-demo.component';

/** Example data */
const exampleData: TableDemoData[] = [
Expand All @@ -23,7 +23,7 @@ const meta: Meta<TableDemoComponent> = {
},
decorators: [
applicationConfig({
providers: [provideAnimations(), provideTable()],
providers: [provideAnimations(), provideDesignSystem()],
}),
moduleMetadata({
imports: [MatSortModule, TableDemoComponent],
Expand Down
3 changes: 3 additions & 0 deletions tsconfig.base.json
Original file line number Diff line number Diff line change
Expand Up @@ -86,6 +86,9 @@
"@hra-ui/design-system/icon-button": [
"libs/design-system/icon-button/src/index.ts"
],
"@hra-ui/design-system/menu": [
"libs/design-system/menu/src/index.ts"
],
"@hra-ui/design-system/nav-header": [
"libs/design-system/nav-header/src/index.ts"
],
Expand Down

0 comments on commit 8c4cf84

Please sign in to comment.