Skip to content

Commit

Permalink
feat: adding closeButtonLabel and -Title to notifications (#1694)
Browse files Browse the repository at this point in the history 
* feat: adding closeButtonLabel and -Title to notifications

* feat: adding closeButtonLabel and -Title to storybook stories
  • Loading branch information
@marvinLaubenstein
marvinLaubenstein authored Apr 4, 2023
1 parent e9c2278 commit 021c9c9
Show file tree
Hide file tree
Showing 13 changed files with 56 additions and 23 deletions.
7 changes: 6 additions & 1 deletion packages/components/src/components/notification-banner/notification-banner.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,10 @@ export class NotificationBanner {
@Prop() autoHide?: boolean = false;
@Prop() autoHideDuration?: number = 3000;
@Prop() href: string;
/** (optional) Label for close button */
@Prop() closeButtonLabel?: string = 'close';
/** (optional) Title for close button */
@Prop() closeButtonTitle?: string = 'close';
/** Fires when the notification banner has been dismissed */
@Event({ eventName: 'scale-close' }) scaleClose: EventEmitter<void>;

Expand Down Expand Up @@ -137,7 +141,8 @@ export class NotificationBanner {
class="notification-banner__button-close"
onClick={() => this.close()}
tabindex={0}
aria-label="close"
aria-label={this.closeButtonLabel}
title={this.closeButtonTitle}
onKeyDown={(e) => {
if (e.key === 'Enter') {
this.close();
Expand Down
18 changes: 10 additions & 8 deletions packages/components/src/components/notification-banner/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,16 @@

## Properties

| Property | Attribute | Description | Type | Default |
| ------------------ | -------------------- | ----------- | ------------------------------------------------------ | ----------------- |
| `autoHide` | `auto-hide` | | `boolean` | `false` |
| `autoHideDuration` | `auto-hide-duration` | | `number` | `3000` |
| `dismissible` | `dismissible` | | `boolean` | `false` |
| `href` | `href` | | `string` | `undefined` |
| `opened` | `opened` | | `boolean` | `undefined` |
| `variant` | `variant` | | `"error" \| "informational" \| "success" \| "warning"` | `'informational'` |
| Property | Attribute | Description | Type | Default |
| ------------------ | -------------------- | --------------------------------- | ------------------------------------------------------ | ----------------- |
| `autoHide` | `auto-hide` | | `boolean` | `false` |
| `autoHideDuration` | `auto-hide-duration` | | `number` | `3000` |
| `closeButtonLabel` | `close-button-label` | (optional) Label for close button | `string` | `'close'` |
| `closeButtonTitle` | `close-button-title` | (optional) Title for close button | `string` | `'close'` |
| `dismissible` | `dismissible` | | `boolean` | `false` |
| `href` | `href` | | `string` | `undefined` |
| `opened` | `opened` | | `boolean` | `undefined` |
| `variant` | `variant` | | `"error" \| "informational" \| "success" \| "warning"` | `'informational'` |


## Events
Expand Down
7 changes: 6 additions & 1 deletion packages/components/src/components/notification-message/notification-message.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,10 @@ export class NotificationMessage {
@Prop({ reflect: true }) opened: boolean;
@Prop() autoHide?: boolean = false;
@Prop() autoHideDuration?: number = 3000;
/** (optional) Label for close button */
@Prop() closeButtonLabel?: string = 'close';
/** (optional) Title for close button */
@Prop() closeButtonTitle?: string = 'close';
/** Fires when the notification message has been dismissed */
@Event({ eventName: 'scale-close' }) scaleClose: EventEmitter<void>;

Expand Down Expand Up @@ -134,7 +138,8 @@ export class NotificationMessage {
class="notification-message__icon-close"
onClick={() => this.close()}
tabindex={0}
aria-label="close"
aria-label={this.closeButtonLabel}
title={this.closeButtonTitle}
onKeyDown={(e) => {
if (e.key === 'Enter') {
this.close();
Expand Down
16 changes: 9 additions & 7 deletions packages/components/src/components/notification-message/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,15 @@

## Properties

| Property | Attribute | Description | Type | Default |
| ------------------ | -------------------- | ----------- | ------------------------------------------------------ | ----------------- |
| `autoHide` | `auto-hide` | | `boolean` | `false` |
| `autoHideDuration` | `auto-hide-duration` | | `number` | `3000` |
| `dismissible` | `dismissible` | | `boolean` | `false` |
| `opened` | `opened` | | `boolean` | `undefined` |
| `variant` | `variant` | | `"error" \| "informational" \| "success" \| "warning"` | `'informational'` |
| Property | Attribute | Description | Type | Default |
| ------------------ | -------------------- | --------------------------------- | ------------------------------------------------------ | ----------------- |
| `autoHide` | `auto-hide` | | `boolean` | `false` |
| `autoHideDuration` | `auto-hide-duration` | | `number` | `3000` |
| `closeButtonLabel` | `close-button-label` | (optional) Label for close button | `string` | `'close'` |
| `closeButtonTitle` | `close-button-title` | (optional) Title for close button | `string` | `'close'` |
| `dismissible` | `dismissible` | | `boolean` | `false` |
| `opened` | `opened` | | `boolean` | `undefined` |
| `variant` | `variant` | | `"error" \| "informational" \| "success" \| "warning"` | `'informational'` |


## Events
Expand Down
10 changes: 5 additions & 5 deletions ...s/components/src/components/notification-toast/__snapshots__/notificat-toast.spec.ts.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ exports[`NotificationToast handle variant prop 1`] = `
<slot name="link"></slot>
</scale-link>
</div>
<button aria-label="close" class="notification-toast__button-close" part="button-dismissable" tabindex="0" type="button">
<button aria-label="close" class="notification-toast__button-close" part="button-dismissable" tabindex="0" title="close" type="button">
<scale-icon-action-circle-close></scale-icon-action-circle-close>
</button>
</div>
Expand Down Expand Up @@ -111,7 +111,7 @@ exports[`NotificationToast handle variant prop 2`] = `
<slot name="link"></slot>
</scale-link>
</div>
<button aria-label="close" class="notification-toast__button-close" part="button-dismissable" tabindex="0" type="button">
<button aria-label="close" class="notification-toast__button-close" part="button-dismissable" tabindex="0" title="close" type="button">
<scale-icon-action-circle-close></scale-icon-action-circle-close>
</button>
</div>
Expand Down Expand Up @@ -171,7 +171,7 @@ exports[`NotificationToast handle variant prop 3`] = `
<slot name="link"></slot>
</scale-link>
</div>
<button aria-label="close" class="notification-toast__button-close" part="button-dismissable" tabindex="0" type="button">
<button aria-label="close" class="notification-toast__button-close" part="button-dismissable" tabindex="0" title="close" type="button">
<scale-icon-action-circle-close></scale-icon-action-circle-close>
</button>
</div>
Expand Down Expand Up @@ -231,7 +231,7 @@ exports[`NotificationToast handle variant prop 4`] = `
<slot name="link"></slot>
</scale-link>
</div>
<button aria-label="close" class="notification-toast__button-close" part="button-dismissable" tabindex="0" type="button">
<button aria-label="close" class="notification-toast__button-close" part="button-dismissable" tabindex="0" title="close" type="button">
<scale-icon-action-circle-close></scale-icon-action-circle-close>
</button>
</div>
Expand Down Expand Up @@ -291,7 +291,7 @@ exports[`NotificationToast should match snapshot 1`] = `
<slot name="link"></slot>
</scale-link>
</div>
<button aria-label="close" class="notification-toast__button-close" part="button-dismissable" tabindex="0" type="button">
<button aria-label="close" class="notification-toast__button-close" part="button-dismissable" tabindex="0" title="close" type="button">
<scale-icon-action-circle-close></scale-icon-action-circle-close>
</button>
</div>
Expand Down
7 changes: 6 additions & 1 deletion packages/components/src/components/notification-toast/notification-toast.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,10 @@ export class NotificationToast {
@Prop() fadeDuration?: number = 500;
/** (optional) Injected CSS styles */
@Prop({ reflect: true }) styles?: string;
/** (optional) Label for close button */
@Prop() closeButtonLabel?: string = 'close';
/** (optional) Title for close button */
@Prop() closeButtonTitle?: string = 'close';
/** (do not use) it is a helper prop for storybook */
@Prop() story?: boolean;
/** (optional) Toast state height with offset */
Expand Down Expand Up @@ -178,7 +182,8 @@ export class NotificationToast {
class="notification-toast__button-close"
onClick={() => this.close()}
tabindex={0}
aria-label="close"
aria-label={this.closeButtonLabel}
title={this.closeButtonTitle}
onKeyDown={(e) => {
if (e.key === 'Enter') {
this.close();
Expand Down
2 changes: 2 additions & 0 deletions packages/components/src/components/notification-toast/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,8 @@
| `animated` | `animated` | (optional) Animated toast | `boolean` | `true` |
| `autoHide` | `auto-hide` | (optional) Toast auto hide | `boolean` | `false` |
| `autoHideDuration` | `auto-hide-duration` | (optional) Toast auto hide duration | `number` | `3000` |
| `closeButtonLabel` | `close-button-label` | (optional) Label for close button | `string` | `'close'` |
| `closeButtonTitle` | `close-button-title` | (optional) Title for close button | `string` | `'close'` |
| `fadeDuration` | `fade-duration` | (optional) Toast fade duration | `number` | `500` |
| `href` | `href` | | `string` | `undefined` |
| `opened` | `opened` | (optional) Toast opened | `boolean` | `undefined` |
Expand Down
2 changes: 2 additions & 0 deletions ...ybook-vue/stories/components/notification-banner/NotificationBanner.stories.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,8 @@ export const Template = (args, { argTypes }) => ({
:auto-hide-duration="autoHideDuration"
:auto-hide="autoHide"
:opened="opened"
:close-button-label="closeButtonLabel"
:close-button-title="closeButtonTitle"
>
{{ heading }}
<p v-if="text">{{ text }}</p>
Expand Down
2 changes: 2 additions & 0 deletions packages/storybook-vue/stories/components/notification-banner/ScaleNotificationBanner.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,8 @@ export default {
opened: { type: Boolean },
autoHide: { type: Boolean, default: false },
autoHideDuration: { type: Number, default: 3000 },
closeButtonLabel: { type: String, default: 'close' },
closeButtonTitle: { type: String, default: 'close' },
},
};
</script>
2 changes: 2 additions & 0 deletions ...ook-vue/stories/components/notification-message/NotificationMessage.stories.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,8 @@ export const Template = (args, { argTypes }) => ({
:auto-hide-duration="autoHideDuration"
:auto-hide="autoHide"
:opened="opened"
:close-button-label="closeButtonLabel"
:close-button-title="closeButtonTitle"
>
{{ heading }}
<p v-if="text">{{ text }}</p>
Expand Down
2 changes: 2 additions & 0 deletions packages/storybook-vue/stories/components/notification-message/ScaleNotificationMessage.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,8 @@ export default {
opened: { type: Boolean },
autoHideDuration: { type: Number, default: 3000 },
autoHide: { type: Boolean, default: false },
closeButtonLabel: { type: String, default: 'close' },
closeButtonTitle: { type: String, default: 'close' },
},
};
</script>
2 changes: 2 additions & 0 deletions ...orybook-vue/stories/components/notification-toast/NotificationToast.stories.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,8 @@ export const Template = (args, { argTypes }) => ({
:opened="opened"
:auto-hide-duration="autoHideDuration"
:auto-hide="autoHide"
:close-button-label="closeButtonLabel"
:close-button-title="closeButtonTitle"
><p slot="header">Informational toast headline</p>
</scale-notification-toast>
</div>
Expand Down
2 changes: 2 additions & 0 deletions packages/storybook-vue/stories/components/notification-toast/ScaleNotificationToast.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,8 @@ export default {
autoHideDuration: { type: Number, default: 3000 },
autoHide: { type: Boolean, default: false },
styles: { type: String },
closeButtonLabel: { type: String, default: 'close' },
closeButtonTitle: { type: String, default: 'close' },
},
};
</script>

0 comments on commit 021c9c9

Please sign in to comment.