Skip to content
Snippets Groups Projects
Commit 1d4d12c2 authored by Ekaterina Kondareva's avatar Ekaterina Kondareva
Browse files

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

Small improvements and fixes

See merge request julkiset-sivut/design-system-lib!76
parents 4dda96b6 3bad5d67
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/components.d.ts
+ 16
− 0
View file @ 1d4d12c2
......@@ -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
+ 1
− 0
View file @ 1d4d12c2
......@@ -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
+ 6
− 6
View file @ 1d4d12c2
......@@ -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
+ 15
− 4
View file @ 1d4d12c2
......@@ -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
+ 13
− 11
View file @ 1d4d12c2
......@@ -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
+ 2
− 2
View file @ 1d4d12c2
......@@ -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
+ 13
− 1
View file @ 1d4d12c2
......@@ -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>
-->
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment