From 3cc571ee324629598c53e76170b80ccc8ee35b98 Mon Sep 17 00:00:00 2001 From: Denys Vuika Date: Fri, 28 Jun 2024 10:06:37 -0400 Subject: [PATCH] ACS-8109: generic button component (#9854) --- lib/core/src/lib/button/button.component.html | 120 ++++++++++++++++++ lib/core/src/lib/button/button.component.md | 82 ++++++++++++ lib/core/src/lib/button/button.component.scss | 3 + lib/core/src/lib/button/button.component.ts | 46 +++++++ lib/core/src/public-api.ts | 1 + 5 files changed, 252 insertions(+) create mode 100644 lib/core/src/lib/button/button.component.html create mode 100644 lib/core/src/lib/button/button.component.md create mode 100644 lib/core/src/lib/button/button.component.scss create mode 100644 lib/core/src/lib/button/button.component.ts diff --git a/lib/core/src/lib/button/button.component.html b/lib/core/src/lib/button/button.component.html new file mode 100644 index 0000000000..4c1f8c3a8b --- /dev/null +++ b/lib/core/src/lib/button/button.component.html @@ -0,0 +1,120 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/lib/core/src/lib/button/button.component.md b/lib/core/src/lib/button/button.component.md new file mode 100644 index 0000000000..4e97a8dda5 --- /dev/null +++ b/lib/core/src/lib/button/button.component.md @@ -0,0 +1,82 @@ +# Button Component + +`standalone`, `component` + +The Button component is a simple button that can be used to trigger actions. + +## Usage + +```html +Click me! +``` + +### Variant + +The button supports the following variants: + +- basic +- raised +- stroked +- flat +- icon +- fab +- mini-fab + +```html +Basic +Raised +Stroked +Flat +Icon +more_vert +Fab +Mini Fab +``` + +### Color + +The button supports the following colors: + +- primary +- accent +- warn + +```html +Primary +Accent +Warn +``` + +## API + +Import the following standalone components: + +```typescript +import { ButtonComponent } from '@alfresco/adf-core'; +``` + +## Properties + +| Name | Type | Default | Description | +|-----------------|---------|---------|----------------------------------------------------------------------------------------------------------| +| `uid` | string | | The button id. | +| `variant` | string | `basic` | The button variant. Possible values are `basic`, `raised`, `stroked`, `flat`, `icon`, `fab`, `mini-fab`. | +| `tooltip` | string | | The button tooltip. | +| `color` | string | | The button color. Possible values are `primary`, `accent`, `warn`. | +| `icon` | string | | The button icon. | +| `disableRipple` | boolean | `false` | Whether the ripple effect should be disabled. | +| `disabled` | boolean | `false` | Whether the button should be disabled. | +| `testId` | string | | The button test id (uses `data-automation-id` attribute). | + +### Accessibility + +The button component has been designed to be accessible. The following attributes are available: + +- `ariaLabel`: The button aria label. +- `ariaHidden`: Whether the button should be hidden from the accessibility tree. + +## Events + +| Name | Description | +|---------|-------------------------------------| +| `click` | Emitted when the button is clicked. | diff --git a/lib/core/src/lib/button/button.component.scss b/lib/core/src/lib/button/button.component.scss new file mode 100644 index 0000000000..58f5df3175 --- /dev/null +++ b/lib/core/src/lib/button/button.component.scss @@ -0,0 +1,3 @@ +adf-button { + // custom styles +} diff --git a/lib/core/src/lib/button/button.component.ts b/lib/core/src/lib/button/button.component.ts new file mode 100644 index 0000000000..065fcf94f0 --- /dev/null +++ b/lib/core/src/lib/button/button.component.ts @@ -0,0 +1,46 @@ +/*! + * @license + * Copyright © 2005-2024 Hyland Software, Inc. and its affiliates. All rights reserved. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { Component, Input, ViewEncapsulation } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { MatButtonModule } from '@angular/material/button'; +import { ThemePalette } from '@angular/material/core'; +import { MatIconModule } from '@angular/material/icon'; + +export type ButtonVariant = 'basic' | 'raised' | 'stroked' | 'flat' | 'icon' | 'fab' | 'mini-fab' | undefined; +export type ButtonColor = ThemePalette; + +@Component({ + selector: 'adf-button', + standalone: true, + imports: [CommonModule, MatButtonModule, MatIconModule], + templateUrl: './button.component.html', + styleUrls: ['./button.component.scss'], + encapsulation: ViewEncapsulation.None +}) +export class ButtonComponent { + @Input() uid?: string; + @Input() variant: ButtonVariant; + @Input() color?: ButtonColor; + @Input() tooltip?: string; + @Input() icon?: string; + @Input() disableRipple: boolean; + @Input() disabled: boolean; + @Input() ariaLabel?: string; + @Input() ariaHidden?: boolean; + @Input() testId?: string; +} diff --git a/lib/core/src/public-api.ts b/lib/core/src/public-api.ts index 474ba0fc1b..45e2eee6a5 100644 --- a/lib/core/src/public-api.ts +++ b/lib/core/src/public-api.ts @@ -16,6 +16,7 @@ */ export * from './lib/about/index'; +export * from './lib/button/button.component'; export * from './lib/viewer/index'; export * from './lib/toolbar/index'; export * from './lib/pagination/index';