From 3bad5d677b54001896474098f60d99d428ac61f6 Mon Sep 17 00:00:00 2001
From: Tuukka Turu <tuukka.turu@druid.fi>
Date: Mon, 12 Oct 2020 18:22:48 +0300
Subject: [PATCH] Small improvements and fixes
---
src/components.d.ts | 16 +++++++++++++
.../accordion-item/accordion-item.scss | 1 +
src/components/button/button.spec.ts | 12 +++++-----
src/components/button/button.tsx | 19 +++++++++++----
src/components/button/readme.md | 24 ++++++++++---------
src/components/hy-tabs/hy-tabs.tsx | 4 ++--
src/index.html | 14 ++++++++++-
7 files changed, 66 insertions(+), 24 deletions(-)
diff --git a/src/components.d.ts b/src/components.d.ts
index d332d925..3243c042 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -131,6 +131,14 @@ export namespace Components {
* Aria label for the element
*/
ariaLabel?: string;
+ /**
+ * Custom classes added to button element.
+ */
+ buttonClasses: string;
+ /**
+ * Button type. Defaults to submit.
+ */
+ buttonType: string;
/**
* Use this to programmatically disable the button, matches the native button functionality
*/
@@ -856,6 +864,14 @@ declare namespace LocalJSX {
* Aria label for the element
*/
ariaLabel?: string;
+ /**
+ * Custom classes added to button element.
+ */
+ buttonClasses?: string;
+ /**
+ * Button type. Defaults to submit.
+ */
+ buttonType?: string;
/**
* Use this to programmatically disable the button, matches the native button functionality
*/
diff --git a/src/components/accordion-item/accordion-item.scss b/src/components/accordion-item/accordion-item.scss
index 46be4764..615791f3 100644
--- a/src/components/accordion-item/accordion-item.scss
+++ b/src/components/accordion-item/accordion-item.scss
@@ -39,6 +39,7 @@
.hy-accordion__button {
align-items: center;
border: none;
+ background-color: var(--grayscale-background-box);
color: var(--brand-main-nearly-black);
display: flex;
flex-direction: row;
diff --git a/src/components/button/button.spec.ts b/src/components/button/button.spec.ts
index 52f67ce8..442b8f00 100644
--- a/src/components/button/button.spec.ts
+++ b/src/components/button/button.spec.ts
@@ -4,11 +4,11 @@ import {newSpecPage} from '@stencil/core/testing';
it('should render correctly without attributes', async () => {
const page = await newSpecPage({
components: [Button],
- html: `<hy-button>Hello tests!</hy-button>`
+ html: `<hy-button>Hello tests!</hy-button>`,
});
expect(page.root).toEqualHtml(`
<hy-button>
- <button class="hy-button primary enabled size-normal">
+ <button type="submit" class="hy-button primary enabled size-normal">
<span class="hy-button__text">
Hello tests!
</span>
@@ -20,7 +20,7 @@ it('should render correctly without attributes', async () => {
it('should have classname matching the variant', async () => {
const page = await newSpecPage({
components: [Button],
- html: `<hy-button variant="secondary">Hello icons!<hy-button>`
+ html: `<hy-button variant="secondary">Hello icons!<hy-button>`,
});
const button = page.doc.querySelector('button.secondary');
expect(button).toBeTruthy();
@@ -29,7 +29,7 @@ it('should have classname matching the variant', async () => {
it('should have classname matching the state', async () => {
const page = await newSpecPage({
components: [Button],
- html: `<hy-button disabled>I am disabled!<hy-button>`
+ html: `<hy-button disabled>I am disabled!<hy-button>`,
});
const button = page.doc.querySelector('button');
expect(button).toHaveAttribute('disabled');
@@ -40,7 +40,7 @@ it('should display an arrow element', async () => {
components: [Button],
html: `<hy-button
icon="hy-icon-arrow-left"
- >Hello icons!<hy-button>`
+ >Hello icons!<hy-button>`,
});
const icon = page.doc.querySelector('span.hy-button__icon');
expect(icon).toHaveClass('hy-button__icon');
@@ -52,7 +52,7 @@ it('supports icons on both sides', async () => {
html: `<hy-button
variant="secondary"
icon="hy-icon-arrow-left"
- icon-right="hy-icon-arrow-right">Hello icons!<hy-button>`
+ icon-right="hy-icon-arrow-right">Hello icons!<hy-button>`,
});
const icons = page.doc.querySelectorAll('span.hy-button__icon');
expect(icons.length).toBe(2);
diff --git a/src/components/button/button.tsx b/src/components/button/button.tsx
index 4f60a5c7..a0efe50c 100644
--- a/src/components/button/button.tsx
+++ b/src/components/button/button.tsx
@@ -4,15 +4,25 @@ import colors from '../../global/colors';
const fillcolors = {
primary: colors.brandMain,
- secondary: 'white'
+ secondary: 'white',
};
@Component({
tag: 'hy-button',
styleUrl: 'button.scss',
- shadow: false
+ shadow: false,
})
export class Button {
+ /**
+ * Button type. Defaults to submit.
+ */
+ @Prop() buttonType: string = 'submit';
+
+ /**
+ * Custom classes added to button element.
+ */
+ @Prop() buttonClasses: string = '';
+
/**
* The element variant. Defaults to primary
*/
@@ -49,8 +59,9 @@ export class Button {
* Icon to use on the right side
*/
@Prop() iconRight?: string;
+
render() {
- const classAttributes = ['hy-button', this.variant, this.state, 'size-' + this.size];
+ const classAttributes = ['hy-button', this.variant, this.state, 'size-' + this.size, this.buttonClasses];
const iconFillColor = fillcolors[this.variant];
const target = this.isExternal ? '_blank' : '_self';
@@ -69,7 +80,7 @@ export class Button {
</Host>
) : (
<Host aria-label={this.ariaLabel}>
- <button class={classAttributes.join(' ')} disabled={this.disabled}>
+ <button type={this.buttonType} class={classAttributes.join(' ')} disabled={this.disabled}>
{!!this.icon && (
<span class="hy-button__icon hy-button__icon--left">
<hy-icon icon={this.icon} fill={iconFillColor} size={13} />
diff --git a/src/components/button/readme.md b/src/components/button/readme.md
index 5242f40f..7928b9ce 100644
--- a/src/components/button/readme.md
+++ b/src/components/button/readme.md
@@ -123,17 +123,19 @@ Well, it's a button.
## Properties
-| Property | Attribute | Description | Type | Default |
-| ------------ | ------------- | ---------------------------------------------------------------------------------------- | -------------------------- | ----------- |
-| `ariaLabel` | `aria-label` | Aria label for the element | `string` | `undefined` |
-| `disabled` | `disabled` | Use this to programmatically disable the button, matches the native button functionality | `boolean` | `false` |
-| `icon` | `icon` | Icon to use on the left side | `string` | `undefined` |
-| `iconRight` | `icon-right` | Icon to use on the right side | `string` | `undefined` |
-| `isExternal` | `is-external` | Use only with url property. Sets the | `boolean` | `false` |
-| `size` | `size` | Size (height) of the button. Normal: 44px, large: 48px | `"large" \| "normal"` | `'normal'` |
-| `state` | `state` | deprecated, use disabled boolean value | `"disabled" \| "enabled"` | `'enabled'` |
-| `url` | `url` | Set this on if an anchor tag is required instead of a button. | `string` | `''` |
-| `variant` | `variant` | The element variant. Defaults to primary | `"primary" \| "secondary"` | `'primary'` |
+| Property | Attribute | Description | Type | Default |
+| --------------- | ---------------- | ---------------------------------------------------------------------------------------- | -------------------------- | ----------- |
+| `ariaLabel` | `aria-label` | Aria label for the element | `string` | `undefined` |
+| `buttonClasses` | `button-classes` | Custom classes added to button element. | `string` | `''` |
+| `buttonType` | `button-type` | Button type. Defaults to submit. | `string` | `'submit'` |
+| `disabled` | `disabled` | Use this to programmatically disable the button, matches the native button functionality | `boolean` | `false` |
+| `icon` | `icon` | Icon to use on the left side | `string` | `undefined` |
+| `iconRight` | `icon-right` | Icon to use on the right side | `string` | `undefined` |
+| `isExternal` | `is-external` | Use only with url property. Sets the | `boolean` | `false` |
+| `size` | `size` | Size (height) of the button. Normal: 44px, large: 48px | `"large" \| "normal"` | `'normal'` |
+| `state` | `state` | deprecated, use disabled boolean value | `"disabled" \| "enabled"` | `'enabled'` |
+| `url` | `url` | Set this on if an anchor tag is required instead of a button. | `string` | `''` |
+| `variant` | `variant` | The element variant. Defaults to primary | `"primary" \| "secondary"` | `'primary'` |
## Dependencies
diff --git a/src/components/hy-tabs/hy-tabs.tsx b/src/components/hy-tabs/hy-tabs.tsx
index 150b3c67..bc8ff9a8 100644
--- a/src/components/hy-tabs/hy-tabs.tsx
+++ b/src/components/hy-tabs/hy-tabs.tsx
@@ -310,7 +310,7 @@ export class HyTabs implements ComponentInterface {
return (
<div id={id} class={classComponentAttributes}>
<div class="hy-tablist-container">
- <button class="hy-tab-scroll hy-tab-scroll__left is-hidden" aria-hidden="true">
+ <button tabindex="-1" class="hy-tab-scroll hy-tab-scroll__left is-hidden" aria-hidden="true">
<hy-icon icon={'hy-icon-caret-left'} size={16} />
</button>
<div role="tablist" aria-label={this.tabListLabel}>
@@ -325,7 +325,7 @@ export class HyTabs implements ComponentInterface {
);
})}
</div>
- <button class="hy-tab-scroll hy-tab-scroll__right" aria-hidden="true">
+ <button tabindex="-1" class="hy-tab-scroll hy-tab-scroll__right" aria-hidden="true">
<hy-icon icon={'hy-icon-caret-right'} size={16} />
</button>
</div>
diff --git a/src/index.html b/src/index.html
index b02ad2a9..0b9bbc01 100644
--- a/src/index.html
+++ b/src/index.html
@@ -439,9 +439,21 @@
<hy-baseline>
<hy-heading heading="h2" section="subsection">H2 With divider</hy-heading>
+ <hy-button button-classes="button-additional-class another-class" button-type="button">Primary</hy-button>
+ <hy-button>Primary</hy-button>
</hy-baseline>
- <a id="facebook_ads_example">This is the Facebook ad example I want to link to.</a>
+ <hy-accordion-container accordionId="example-accordion">
+ <hy-accordion-item accordiontitle="This is a accordion item 1">
+ <hy-paragraph-text>Accordion content</hy-paragraph-text>
+ </hy-accordion-item>
+ <hy-accordion-item accordiontitle="This is a accordion item 2">
+ <hy-paragraph-text>Accordion content</hy-paragraph-text>
+ </hy-accordion-item>
+ <hy-accordion-item accordiontitle="This is a accordion item 3">
+ <hy-paragraph-text>Accordion content</hy-paragraph-text>
+ </hy-accordion-item>
+ </hy-accordion-container>
</div>
</hy-main>
-->
--
GitLab