Merge branch 'small-improvements-and-fixes' into 'development'

Small improvements and fixes

See merge request julkiset-sivut/design-system-lib!76

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
      */

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;

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);

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} />

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
 

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>

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>
     -->