diff --git a/src/components.d.ts b/src/components.d.ts
index f883a020bd09bfdcd6a6beb8bd1ec98dc7b0071f..fb06caaf1c0cd8db5b11cc7daaa4a7fd16cc7db4 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -30,6 +30,8 @@ import {
SiteLogoSize,
} from './utils/utils';
import {DesktopLinks} from './components/site-header/hy-desktop-menu-links/hy-desktop-menu-links';
+import {IDropdownItem} from './components/hy-dropdown/hy-dropdown';
+import {IFilterGroupFilter} from './components/hy-filter-group/hy-filter-group';
import {FooterBaseLinks, FooterBaseSome} from './components/footer/hy-footer-base/hy-footer-base';
import {FooterInfoLinks} from './components/footer/hy-footer-info/hy-footer-info';
import {KeyFigureValue} from './components/hy-key-figure-group/hy-key-figure-group';
@@ -186,6 +188,11 @@ export namespace Components {
*/
variant: ButtonVariants;
}
+ interface HyCheckbox {
+ checkboxId: string | number;
+ checkboxLabel: string;
+ checkboxValue: string | number;
+ }
interface HyCtaButton {
headerstyle: string;
isExternal: boolean;
@@ -205,6 +212,32 @@ export namespace Components {
dataDesktopLinks: DesktopLinks[] | string;
}
interface HyDocsContainer {}
+ interface HyDropdown {
+ dropdownLabel: string;
+ dropdownOptions: IDropdownItem[] | string;
+ }
+ interface HyDropdownPanel {
+ isHidden: boolean;
+ }
+ interface HyDropdownPanelItem {
+ dropdownItemId: string | number;
+ dropdownItemLabel: string;
+ dropdownItemValue: string | number;
+ isLast?: boolean;
+ }
+ interface HyFilterGroup {
+ filterGroupFilters: IFilterGroupFilter[] | string;
+ filterGroupLabel: string;
+ }
+ interface HyFilterGroupItem {
+ filterGroupItemId: string | number;
+ filterGroupItemLabel: string;
+ }
+ interface HyFilterVisibilityTool {
+ filterVisibilityToolType: 'toggle' | 'reset';
+ }
+ interface HyFilterVisibilityToolReset {}
+ interface HyFilterVisibilityToolToggle {}
interface HyFooter {}
interface HyFooterAction {
/**
@@ -490,6 +523,11 @@ export namespace Components {
*/
margin: number;
}
+ interface HySearchField {
+ inputId: string;
+ isLabelHidden?: boolean;
+ label: string;
+ }
interface HySectionContainer {}
interface HyShortcuts {
dataItems: ShortcutLinkValue[] | string;
@@ -655,6 +693,11 @@ declare global {
prototype: HTMLHyButtonElement;
new (): HTMLHyButtonElement;
};
+ interface HTMLHyCheckboxElement extends Components.HyCheckbox, HTMLStencilElement {}
+ var HTMLHyCheckboxElement: {
+ prototype: HTMLHyCheckboxElement;
+ new (): HTMLHyCheckboxElement;
+ };
interface HTMLHyCtaButtonElement extends Components.HyCtaButton, HTMLStencilElement {}
var HTMLHyCtaButtonElement: {
prototype: HTMLHyCtaButtonElement;
@@ -675,6 +718,48 @@ declare global {
prototype: HTMLHyDocsContainerElement;
new (): HTMLHyDocsContainerElement;
};
+ interface HTMLHyDropdownElement extends Components.HyDropdown, HTMLStencilElement {}
+ var HTMLHyDropdownElement: {
+ prototype: HTMLHyDropdownElement;
+ new (): HTMLHyDropdownElement;
+ };
+ interface HTMLHyDropdownPanelElement extends Components.HyDropdownPanel, HTMLStencilElement {}
+ var HTMLHyDropdownPanelElement: {
+ prototype: HTMLHyDropdownPanelElement;
+ new (): HTMLHyDropdownPanelElement;
+ };
+ interface HTMLHyDropdownPanelItemElement extends Components.HyDropdownPanelItem, HTMLStencilElement {}
+ var HTMLHyDropdownPanelItemElement: {
+ prototype: HTMLHyDropdownPanelItemElement;
+ new (): HTMLHyDropdownPanelItemElement;
+ };
+ interface HTMLHyFilterGroupElement extends Components.HyFilterGroup, HTMLStencilElement {}
+ var HTMLHyFilterGroupElement: {
+ prototype: HTMLHyFilterGroupElement;
+ new (): HTMLHyFilterGroupElement;
+ };
+ interface HTMLHyFilterGroupItemElement extends Components.HyFilterGroupItem, HTMLStencilElement {}
+ var HTMLHyFilterGroupItemElement: {
+ prototype: HTMLHyFilterGroupItemElement;
+ new (): HTMLHyFilterGroupItemElement;
+ };
+ interface HTMLHyFilterVisibilityToolElement extends Components.HyFilterVisibilityTool, HTMLStencilElement {}
+ var HTMLHyFilterVisibilityToolElement: {
+ prototype: HTMLHyFilterVisibilityToolElement;
+ new (): HTMLHyFilterVisibilityToolElement;
+ };
+ interface HTMLHyFilterVisibilityToolResetElement extends Components.HyFilterVisibilityToolReset, HTMLStencilElement {}
+ var HTMLHyFilterVisibilityToolResetElement: {
+ prototype: HTMLHyFilterVisibilityToolResetElement;
+ new (): HTMLHyFilterVisibilityToolResetElement;
+ };
+ interface HTMLHyFilterVisibilityToolToggleElement
+ extends Components.HyFilterVisibilityToolToggle,
+ HTMLStencilElement {}
+ var HTMLHyFilterVisibilityToolToggleElement: {
+ prototype: HTMLHyFilterVisibilityToolToggleElement;
+ new (): HTMLHyFilterVisibilityToolToggleElement;
+ };
interface HTMLHyFooterElement extends Components.HyFooter, HTMLStencilElement {}
var HTMLHyFooterElement: {
prototype: HTMLHyFooterElement;
@@ -865,6 +950,11 @@ declare global {
prototype: HTMLHyRowElement;
new (): HTMLHyRowElement;
};
+ interface HTMLHySearchFieldElement extends Components.HySearchField, HTMLStencilElement {}
+ var HTMLHySearchFieldElement: {
+ prototype: HTMLHySearchFieldElement;
+ new (): HTMLHySearchFieldElement;
+ };
interface HTMLHySectionContainerElement extends Components.HySectionContainer, HTMLStencilElement {}
var HTMLHySectionContainerElement: {
prototype: HTMLHySectionContainerElement;
@@ -932,10 +1022,19 @@ declare global {
'hy-box-container': HTMLHyBoxContainerElement;
'hy-breadcrumbs': HTMLHyBreadcrumbsElement;
'hy-button': HTMLHyButtonElement;
+ 'hy-checkbox': HTMLHyCheckboxElement;
'hy-cta-button': HTMLHyCtaButtonElement;
'hy-cta-link': HTMLHyCtaLinkElement;
'hy-desktop-menu-links': HTMLHyDesktopMenuLinksElement;
'hy-docs-container': HTMLHyDocsContainerElement;
+ 'hy-dropdown': HTMLHyDropdownElement;
+ 'hy-dropdown-panel': HTMLHyDropdownPanelElement;
+ 'hy-dropdown-panel-item': HTMLHyDropdownPanelItemElement;
+ 'hy-filter-group': HTMLHyFilterGroupElement;
+ 'hy-filter-group-item': HTMLHyFilterGroupItemElement;
+ 'hy-filter-visibility-tool': HTMLHyFilterVisibilityToolElement;
+ 'hy-filter-visibility-tool-reset': HTMLHyFilterVisibilityToolResetElement;
+ 'hy-filter-visibility-tool-toggle': HTMLHyFilterVisibilityToolToggleElement;
'hy-footer': HTMLHyFooterElement;
'hy-footer-action': HTMLHyFooterActionElement;
'hy-footer-base': HTMLHyFooterBaseElement;
@@ -974,6 +1073,7 @@ declare global {
'hy-prominent-image': HTMLHyProminentImageElement;
'hy-quote': HTMLHyQuoteElement;
'hy-row': HTMLHyRowElement;
+ 'hy-search-field': HTMLHySearchFieldElement;
'hy-section-container': HTMLHySectionContainerElement;
'hy-shortcuts': HTMLHyShortcutsElement;
'hy-site-header': HTMLHySiteHeaderElement;
@@ -1130,6 +1230,11 @@ declare namespace LocalJSX {
*/
variant?: ButtonVariants;
}
+ interface HyCheckbox {
+ checkboxId?: string | number;
+ checkboxLabel?: string;
+ checkboxValue?: string | number;
+ }
interface HyCtaButton {
headerstyle?: string;
isExternal?: boolean;
@@ -1149,6 +1254,32 @@ declare namespace LocalJSX {
dataDesktopLinks?: DesktopLinks[] | string;
}
interface HyDocsContainer {}
+ interface HyDropdown {
+ dropdownLabel?: string;
+ dropdownOptions?: IDropdownItem[] | string;
+ }
+ interface HyDropdownPanel {
+ isHidden?: boolean;
+ }
+ interface HyDropdownPanelItem {
+ dropdownItemId?: string | number;
+ dropdownItemLabel?: string;
+ dropdownItemValue?: string | number;
+ isLast?: boolean;
+ }
+ interface HyFilterGroup {
+ filterGroupFilters?: IFilterGroupFilter[] | string;
+ filterGroupLabel?: string;
+ }
+ interface HyFilterGroupItem {
+ filterGroupItemId?: string | number;
+ filterGroupItemLabel?: string;
+ }
+ interface HyFilterVisibilityTool {
+ filterVisibilityToolType?: 'toggle' | 'reset';
+ }
+ interface HyFilterVisibilityToolReset {}
+ interface HyFilterVisibilityToolToggle {}
interface HyFooter {}
interface HyFooterAction {
/**
@@ -1440,6 +1571,11 @@ declare namespace LocalJSX {
*/
margin?: number;
}
+ interface HySearchField {
+ inputId?: string;
+ isLabelHidden?: boolean;
+ label?: string;
+ }
interface HySectionContainer {}
interface HyShortcuts {
dataItems?: ShortcutLinkValue[] | string;
@@ -1560,10 +1696,19 @@ declare namespace LocalJSX {
'hy-box-container': HyBoxContainer;
'hy-breadcrumbs': HyBreadcrumbs;
'hy-button': HyButton;
+ 'hy-checkbox': HyCheckbox;
'hy-cta-button': HyCtaButton;
'hy-cta-link': HyCtaLink;
'hy-desktop-menu-links': HyDesktopMenuLinks;
'hy-docs-container': HyDocsContainer;
+ 'hy-dropdown': HyDropdown;
+ 'hy-dropdown-panel': HyDropdownPanel;
+ 'hy-dropdown-panel-item': HyDropdownPanelItem;
+ 'hy-filter-group': HyFilterGroup;
+ 'hy-filter-group-item': HyFilterGroupItem;
+ 'hy-filter-visibility-tool': HyFilterVisibilityTool;
+ 'hy-filter-visibility-tool-reset': HyFilterVisibilityToolReset;
+ 'hy-filter-visibility-tool-toggle': HyFilterVisibilityToolToggle;
'hy-footer': HyFooter;
'hy-footer-action': HyFooterAction;
'hy-footer-base': HyFooterBase;
@@ -1602,6 +1747,7 @@ declare namespace LocalJSX {
'hy-prominent-image': HyProminentImage;
'hy-quote': HyQuote;
'hy-row': HyRow;
+ 'hy-search-field': HySearchField;
'hy-section-container': HySectionContainer;
'hy-shortcuts': HyShortcuts;
'hy-site-header': HySiteHeader;
@@ -1630,10 +1776,22 @@ declare module '@stencil/core' {
'hy-box-container': LocalJSX.HyBoxContainer & JSXBase.HTMLAttributes<HTMLHyBoxContainerElement>;
'hy-breadcrumbs': LocalJSX.HyBreadcrumbs & JSXBase.HTMLAttributes<HTMLHyBreadcrumbsElement>;
'hy-button': LocalJSX.HyButton & JSXBase.HTMLAttributes<HTMLHyButtonElement>;
+ 'hy-checkbox': LocalJSX.HyCheckbox & JSXBase.HTMLAttributes<HTMLHyCheckboxElement>;
'hy-cta-button': LocalJSX.HyCtaButton & JSXBase.HTMLAttributes<HTMLHyCtaButtonElement>;
'hy-cta-link': LocalJSX.HyCtaLink & JSXBase.HTMLAttributes<HTMLHyCtaLinkElement>;
'hy-desktop-menu-links': LocalJSX.HyDesktopMenuLinks & JSXBase.HTMLAttributes<HTMLHyDesktopMenuLinksElement>;
'hy-docs-container': LocalJSX.HyDocsContainer & JSXBase.HTMLAttributes<HTMLHyDocsContainerElement>;
+ 'hy-dropdown': LocalJSX.HyDropdown & JSXBase.HTMLAttributes<HTMLHyDropdownElement>;
+ 'hy-dropdown-panel': LocalJSX.HyDropdownPanel & JSXBase.HTMLAttributes<HTMLHyDropdownPanelElement>;
+ 'hy-dropdown-panel-item': LocalJSX.HyDropdownPanelItem & JSXBase.HTMLAttributes<HTMLHyDropdownPanelItemElement>;
+ 'hy-filter-group': LocalJSX.HyFilterGroup & JSXBase.HTMLAttributes<HTMLHyFilterGroupElement>;
+ 'hy-filter-group-item': LocalJSX.HyFilterGroupItem & JSXBase.HTMLAttributes<HTMLHyFilterGroupItemElement>;
+ 'hy-filter-visibility-tool': LocalJSX.HyFilterVisibilityTool &
+ JSXBase.HTMLAttributes<HTMLHyFilterVisibilityToolElement>;
+ 'hy-filter-visibility-tool-reset': LocalJSX.HyFilterVisibilityToolReset &
+ JSXBase.HTMLAttributes<HTMLHyFilterVisibilityToolResetElement>;
+ 'hy-filter-visibility-tool-toggle': LocalJSX.HyFilterVisibilityToolToggle &
+ JSXBase.HTMLAttributes<HTMLHyFilterVisibilityToolToggleElement>;
'hy-footer': LocalJSX.HyFooter & JSXBase.HTMLAttributes<HTMLHyFooterElement>;
'hy-footer-action': LocalJSX.HyFooterAction & JSXBase.HTMLAttributes<HTMLHyFooterActionElement>;
'hy-footer-base': LocalJSX.HyFooterBase & JSXBase.HTMLAttributes<HTMLHyFooterBaseElement>;
@@ -1676,6 +1834,7 @@ declare module '@stencil/core' {
'hy-prominent-image': LocalJSX.HyProminentImage & JSXBase.HTMLAttributes<HTMLHyProminentImageElement>;
'hy-quote': LocalJSX.HyQuote & JSXBase.HTMLAttributes<HTMLHyQuoteElement>;
'hy-row': LocalJSX.HyRow & JSXBase.HTMLAttributes<HTMLHyRowElement>;
+ 'hy-search-field': LocalJSX.HySearchField & JSXBase.HTMLAttributes<HTMLHySearchFieldElement>;
'hy-section-container': LocalJSX.HySectionContainer & JSXBase.HTMLAttributes<HTMLHySectionContainerElement>;
'hy-shortcuts': LocalJSX.HyShortcuts & JSXBase.HTMLAttributes<HTMLHyShortcutsElement>;
'hy-site-header': LocalJSX.HySiteHeader & JSXBase.HTMLAttributes<HTMLHySiteHeaderElement>;
diff --git a/src/components/hy-checkbox/hy-checkbox.scss b/src/components/hy-checkbox/hy-checkbox.scss
new file mode 100644
index 0000000000000000000000000000000000000000..cabfbb02db66500802395cb066f5b468e805a0a5
--- /dev/null
+++ b/src/components/hy-checkbox/hy-checkbox.scss
@@ -0,0 +1,82 @@
+.hy-checkbox {
+ display: inline-block;
+ position: relative;
+}
+
+.hy-checkbox__checkmark {
+ border-color: var(--link-blue);
+ border-style: solid inset solid solid;
+ border-width: 2px;
+ height: 20px;
+ margin-right: 6px;
+ position: relative;
+ width: 20px;
+
+ svg {
+ bottom: 0;
+ left: 0;
+ position: absolute;
+ visibility: hidden;
+ }
+
+ &::before {
+ background-color: var(--grayscale-white);
+ content: '';
+ height: 10px;
+ position: absolute;
+ right: 0;
+ transform: rotate(40deg) translate(6%, -55%);
+ visibility: hidden;
+ width: 8px;
+ }
+}
+
+.hy-checkbox__label {
+ @include font-size(14px, 20px);
+ align-items: center;
+ color: var(--grayscale-black);
+ display: inline-flex;
+ font-family: var(--main-font-family);
+ letter-spacing: -0.4px;
+
+ @include breakpoint($narrow) {
+ @include font-size(16px, 24px);
+ }
+}
+
+.hy-checkbox__checkbox {
+ height: 100%;
+ margin: 0;
+ opacity: 0;
+ position: absolute;
+ width: 100%;
+ z-index: 10;
+
+ &:checked {
+ & + label {
+ color: var(--grayscale-black);
+
+ .hy-checkbox__checkmark {
+ svg,
+ &::before {
+ visibility: visible;
+ }
+ }
+ }
+ }
+
+ &:hover {
+ cursor: pointer;
+
+ & + label {
+ color: var(--brand-main);
+ }
+ }
+
+ &:focus {
+ & + label {
+ outline-offset: 1px;
+ outline: 2px solid var(--link-blue);
+ }
+ }
+}
diff --git a/src/components/hy-checkbox/hy-checkbox.tsx b/src/components/hy-checkbox/hy-checkbox.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..67999a9a0dbcdc874335f18ac5941598bc4ff3f0
--- /dev/null
+++ b/src/components/hy-checkbox/hy-checkbox.tsx
@@ -0,0 +1,30 @@
+import {Component, Host, h, Prop} from '@stencil/core';
+
+@Component({
+ tag: 'hy-checkbox',
+ styleUrl: 'hy-checkbox.scss',
+ shadow: false,
+})
+export class HyCheckbox {
+ @Prop() checkboxId: string | number;
+ @Prop() checkboxValue: string | number;
+ @Prop() checkboxLabel: string;
+ render() {
+ return (
+ <Host class="hy-checkbox">
+ <input
+ type="checkbox"
+ class="hy-checkbox__checkbox"
+ id={`${this.checkboxId}`}
+ value={`${this.checkboxValue}`}
+ />
+ <label class="hy-checkbox__label" htmlFor={`${this.checkboxId}`}>
+ <span class="hy-checkbox__checkmark">
+ <hy-icon class="hy-checkbox__label-icon" icon={'hy-icon-done'} size={23} aria-hidden="true" />
+ </span>
+ {this.checkboxLabel}
+ </label>
+ </Host>
+ );
+ }
+}
diff --git a/src/components/hy-checkbox/readme.md b/src/components/hy-checkbox/readme.md
new file mode 100644
index 0000000000000000000000000000000000000000..d9e3e32efc2f21053c130c6aa079d3d5ecf6e51e
--- /dev/null
+++ b/src/components/hy-checkbox/readme.md
@@ -0,0 +1,29 @@
+# hy-checkbox
+
+<!-- Auto Generated Below -->
+
+## Properties
+
+| Property | Attribute | Description | Type | Default |
+| --------------- | ---------------- | ----------- | ------------------ | ----------- |
+| `checkboxId` | `checkbox-id` | | `number \| string` | `undefined` |
+| `checkboxLabel` | `checkbox-label` | | `string` | `undefined` |
+| `checkboxValue` | `checkbox-value` | | `number \| string` | `undefined` |
+
+## Dependencies
+
+### Depends on
+
+- [hy-icon](../icon)
+
+### Graph
+
+```mermaid
+graph TD;
+ hy-checkbox --> hy-icon
+ style hy-checkbox fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+---
+
+Helsinki University Design System
diff --git a/src/components/hy-dropdown/hy-dropdown.panel.item.tsx b/src/components/hy-dropdown/hy-dropdown.panel.item.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..f74845362abb670333217da6787773b3fc23a262
--- /dev/null
+++ b/src/components/hy-dropdown/hy-dropdown.panel.item.tsx
@@ -0,0 +1,29 @@
+import {Component, h, Prop} from '@stencil/core';
+
+@Component({
+ tag: 'hy-dropdown-panel-item',
+ shadow: false,
+})
+export class HyDropdownPanelItem {
+ @Prop() isLast?: boolean = false;
+ @Prop() dropdownItemId: string | number;
+ @Prop() dropdownItemValue: string | number;
+ @Prop() dropdownItemLabel: string;
+
+ render() {
+ return (
+ <li class={`hy-dropdown__panel-item ${this.isLast ? 'is-last' : ''}`}>
+ <input
+ type="checkbox"
+ class="hy-dropdown__checkbox"
+ id={`${this.dropdownItemId}`}
+ value={`${this.dropdownItemValue}`}
+ />
+ <label class="hy-dropdown__label" htmlFor={`${this.dropdownItemId}`}>
+ {this.dropdownItemLabel}
+ <hy-icon class="hy-dropdown__label-icon" icon={'hy-icon-done'} size={14} aria-hidden="true" />
+ </label>
+ </li>
+ );
+ }
+}
diff --git a/src/components/hy-dropdown/hy-dropdown.panel.tsx b/src/components/hy-dropdown/hy-dropdown.panel.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..6381a2eb78511585c595bf9bf88545b9f76c5cb9
--- /dev/null
+++ b/src/components/hy-dropdown/hy-dropdown.panel.tsx
@@ -0,0 +1,23 @@
+import {Component, h, Prop} from '@stencil/core';
+
+@Component({
+ tag: 'hy-dropdown-panel',
+ shadow: false,
+})
+export class HyDropdownPanel {
+ @Prop() isHidden: boolean;
+
+ render() {
+ return (
+ <ul
+ id="dropdownPanel"
+ class={`hy-dropdown__panel ${this.isHidden ? 'is-hidden' : ''}`}
+ aria-hidden={`${this.isHidden || false}`}
+ role="region"
+ aria-labelledby="dropdownToggle"
+ >
+ <slot />
+ </ul>
+ );
+ }
+}
diff --git a/src/components/hy-dropdown/hy-dropdown.scss b/src/components/hy-dropdown/hy-dropdown.scss
new file mode 100644
index 0000000000000000000000000000000000000000..ae81ea03f7b1be3cd58c42b83fc126b56cba190f
--- /dev/null
+++ b/src/components/hy-dropdown/hy-dropdown.scss
@@ -0,0 +1,212 @@
+.hy-dropdown {
+ display: inline-block;
+ min-width: 100%;
+ position: relative;
+
+ @include breakpoint($narrow) {
+ min-width: 48.3%;
+ }
+
+ @include breakpoint($extrawide) {
+ min-width: 23.03%;
+ }
+}
+
+.hy-dropdown__toggle {
+ @include font-size(14px, 24px);
+ align-items: center;
+ background-color: var(--grayscale-white);
+ border-radius: 0;
+ border: 1px solid var(--grayscale-medium-dark);
+ color: var(--link-blue);
+ display: inline-flex;
+ font-family: var(--main-font-family);
+ font-weight: $semibold;
+ height: 40px;
+ justify-content: space-between;
+ letter-spacing: normal;
+ padding: 0 0 0 16px;
+ text-align: left;
+ width: 100%;
+
+ @include breakpoint($narrow) {
+ @include font-size(16px, 24px);
+ height: 44px;
+ }
+
+ @include breakpoint($extrawide) {
+ height: 48px;
+ }
+
+ &:hover {
+ border-color: var(--brand-main-light);
+ cursor: pointer;
+ }
+
+ &:focus {
+ border-color: var(--brand-main-light);
+ border-style: solid inset solid solid;
+ border-width: 2px;
+ outline: 0;
+ text-indent: -1px; // Text stays in place.
+ }
+
+ svg {
+ pointer-events: none;
+ }
+
+ &.is-open {
+ .hy-dropdown__icon {
+ background-color: var(--brand-main-light);
+ transform: rotate(180deg);
+
+ &::before {
+ display: none;
+ }
+
+ svg {
+ fill: var(--grayscale-white);
+ }
+ }
+ }
+}
+
+.hy-dropdown__icon {
+ align-items: center;
+ display: inline-flex;
+ flex-shrink: 0;
+ height: 40px;
+ justify-content: center;
+ position: relative;
+ width: 40px;
+
+ &::before {
+ border-left: 1px dashed var(--grayscale-medium-dark);
+ content: '';
+ display: inline-block;
+ height: 65%;
+ left: 0;
+ position: absolute;
+ top: 50%;
+ transform: translateY(-50%);
+ }
+
+ @include breakpoint($narrow) {
+ height: 44px;
+ width: 44px;
+ }
+
+ @include breakpoint($extrawide) {
+ height: 48px;
+ width: 48px;
+ }
+
+ svg {
+ fill: var(--link-blue);
+
+ @include breakpoint($narrow) {
+ height: 16px;
+ width: 16px;
+ }
+ }
+}
+
+.hy-dropdown__panel {
+ background-color: var(--grayscale-white);
+ box-shadow: 0 10px 20px 0 rgba(0, 49, 70, 0.2);
+ list-style: none;
+ margin: 0;
+ padding: 6px;
+ position: absolute;
+ width: 100%;
+ z-index: 10;
+
+ &.is-hidden {
+ display: none;
+ visibility: hidden;
+ }
+}
+
+.hy-dropdown__panel-item {
+ position: relative;
+
+ &:not(.is-last) {
+ margin-bottom: 6px;
+ }
+}
+
+.hy-dropdown__label {
+ @include font-size(14px, 24px);
+ align-items: center;
+ background-color: var(--grayscale-white);
+ border-radius: 0;
+ border: 1px solid var(--grayscale-medium-dark);
+ color: var(--link-blue);
+ display: inline-flex;
+ font-family: var(--main-font-family);
+ font-weight: $semibold;
+ height: 40px;
+ justify-content: space-between;
+ letter-spacing: normal;
+ padding: 0 0 0 16px;
+ text-align: left;
+ width: 100%;
+
+ @include breakpoint($narrow) {
+ @include font-size(16px, 24px);
+ }
+}
+
+.hy-dropdown__label-icon {
+ align-items: center;
+ display: none !important;
+ flex-shrink: 0;
+ height: 40px;
+ justify-content: center;
+ position: relative;
+ visibility: hidden;
+ width: 40px;
+}
+
+.hy-dropdown__checkbox {
+ height: 100%;
+ margin: 0;
+ opacity: 0;
+ position: absolute;
+ width: 100%;
+ z-index: 10;
+
+ &:checked {
+ & + label {
+ border-color: var(--grayscale-black);
+ border-style: solid inset solid solid;
+ border-width: 2px;
+ color: var(--grayscale-black);
+ outline: 0;
+ text-indent: -1px; // Text stays in place.
+
+ .hy-dropdown__label-icon {
+ display: inline-flex !important;
+ visibility: visible;
+ }
+ }
+ }
+
+ &:hover {
+ cursor: pointer;
+
+ & + label {
+ border-color: var(--brand-main-light);
+ }
+ }
+
+ &:focus {
+ & + label {
+ border-color: var(--brand-main-light);
+ border-style: solid inset solid solid;
+ border-width: 2px;
+ outline: 0;
+ text-indent: -1px; // Text stays in place.
+ }
+ }
+}
diff --git a/src/components/hy-dropdown/hy-dropdown.tsx b/src/components/hy-dropdown/hy-dropdown.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..5f69e8ace80316236715719bb8e80945dffb77dd
--- /dev/null
+++ b/src/components/hy-dropdown/hy-dropdown.tsx
@@ -0,0 +1,85 @@
+import {Component, Element, Host, h, State, Listen, Prop, Watch} from '@stencil/core';
+
+export interface IDropdownItem {
+ id: string | number;
+ label: string;
+ value: string | number;
+}
+@Component({
+ tag: 'hy-dropdown',
+ styleUrl: 'hy-dropdown.scss',
+ shadow: false,
+})
+export class HyDropdown {
+ private _dropdownOptions: IDropdownItem[];
+ @Element() el: HTMLElement;
+ @Prop() dropdownLabel: string;
+ @Prop() dropdownOptions: IDropdownItem[] | string;
+ @State() isPanelOpen: boolean = false;
+
+ @Watch('dropdownOptions')
+ arrayDataWatcher(newValue: IDropdownItem[] | string) {
+ if (typeof newValue === 'string') {
+ this._dropdownOptions = JSON.parse(newValue);
+ } else {
+ this._dropdownOptions = newValue;
+ }
+ }
+
+ componentWillLoad() {
+ this.arrayDataWatcher(this.dropdownOptions);
+ }
+
+ handlePanelToggle() {
+ this.isPanelOpen = !this.isPanelOpen;
+ }
+
+ @Listen('click', {target: 'window'})
+ handleClick(event) {
+ const dropdownToggleButtonElement = this.el.querySelector('#dropdownToggle') as HTMLButtonElement;
+ const dropdownPanelElement = this.el.querySelector('.hy-dropdown__panel') as HTMLElement;
+ const dropdownPanelCheckboxElements = this.el.querySelectorAll('.hy-dropdown__checkbox');
+ const dropdownToggleButtonIconElement = this.el.querySelector('.hy-dropdown__icon') as HTMLElement;
+ const {target} = event;
+
+ const allowedElements = [
+ dropdownToggleButtonElement,
+ dropdownPanelElement,
+ dropdownToggleButtonIconElement,
+ ...dropdownPanelCheckboxElements, // Spread ("copy") items to allowedElement array.
+ ];
+
+ if (this.isPanelOpen && !allowedElements.includes(target)) {
+ this.isPanelOpen = false;
+ }
+ }
+
+ render() {
+ return (
+ <Host class="hy-dropdown">
+ <button
+ id="dropdownToggle"
+ class={`hy-dropdown__toggle ${this.isPanelOpen ? 'is-open' : ''}`}
+ aria-expanded={`${this.isPanelOpen || false}`}
+ aria-haspopup="true"
+ aria-controls="dropdownPanel"
+ onClick={() => this.handlePanelToggle()}
+ aria-label={`${!this.isPanelOpen ? 'Open' : 'Close'} dropdown`}
+ >
+ {this.dropdownLabel}
+ <hy-icon class="hy-dropdown__icon" icon={'hy-icon-caret-down'} size={14} aria-hidden="true" />
+ </button>
+ <hy-dropdown-panel is-hidden={!this.isPanelOpen}>
+ {this._dropdownOptions.map(({id, label, value}, index) => (
+ <hy-dropdown-panel-item
+ dropdown-item-id={id}
+ dropdown-item-label={label}
+ dropdown-item-value={value}
+ is-last={this._dropdownOptions.length - 1 === index}
+ />
+ ))}
+ </hy-dropdown-panel>
+ </Host>
+ );
+ }
+}
diff --git a/src/components/hy-dropdown/readme.md b/src/components/hy-dropdown/readme.md
new file mode 100644
index 0000000000000000000000000000000000000000..54927e0155d0990bbd3666abe8feb60ef3996fe8
--- /dev/null
+++ b/src/components/hy-dropdown/readme.md
@@ -0,0 +1,35 @@
+# hy-dropdown
+
+<!-- Auto Generated Below -->
+
+## Properties
+
+| Property | Attribute | Description | Type | Default |
+| ------------------- | --------------------- | ----------- | ------------------ | ----------- |
+| `dropdownItemId` | `dropdown-item-id` | | `number \| string` | `undefined` |
+| `dropdownItemLabel` | `dropdown-item-label` | | `string` | `undefined` |
+| `dropdownItemValue` | `dropdown-item-value` | | `number \| string` | `undefined` |
+| `isLast` | `is-last` | | `boolean` | `false` |
+
+## Dependencies
+
+### Used by
+
+- [hy-dropdown](.)
+
+### Depends on
+
+- [hy-icon](../icon)
+
+### Graph
+
+```mermaid
+graph TD;
+ hy-dropdown-panel-item --> hy-icon
+ hy-dropdown --> hy-dropdown-panel-item
+ style hy-dropdown-panel-item fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+---
+
+Helsinki University Design System
diff --git a/src/components/hy-filter-group/hy-filter-group.item.tsx b/src/components/hy-filter-group/hy-filter-group.item.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..3df05d9c77339fe82ff1a4e44c7062f3023637d9
--- /dev/null
+++ b/src/components/hy-filter-group/hy-filter-group.item.tsx
@@ -0,0 +1,29 @@
+import {Component, h, Prop} from '@stencil/core';
+import {ColorVariant} from '../../utils/utils';
+
+@Component({
+ tag: 'hy-filter-group-item',
+ shadow: false,
+})
+export class HyFilterGroupItem {
+ @Prop() filterGroupItemId: string | number;
+ @Prop() filterGroupItemLabel: string;
+
+ render() {
+ return (
+ <li class="hy-filter-group__filter">
+ <button type="button" class="hy-filter-group__button" aria-label={`Deselect ${this.filterGroupItemLabel}`}>
+ {this.filterGroupItemLabel}
+ <hy-icon
+ class="hy-filter-group__button-icon"
+ icon={'hy-icon-remove'}
+ size={10}
+ aria-hidden="true"
+ fill={ColorVariant.white}
+ />
+ </button>
+ <slot />
+ </li>
+ );
+ }
+}
diff --git a/src/components/hy-filter-group/hy-filter-group.scss b/src/components/hy-filter-group/hy-filter-group.scss
new file mode 100644
index 0000000000000000000000000000000000000000..2d2d9899643a7403fde80b7e7b78e5e71a8f7f80
--- /dev/null
+++ b/src/components/hy-filter-group/hy-filter-group.scss
@@ -0,0 +1,87 @@
+.hy-filter-group {
+ align-items: center;
+ display: inline-flex;
+ flex-wrap: wrap;
+ margin-right: 12px;
+}
+
+.hy-filter-group__listing {
+ align-items: center;
+ display: flex;
+ flex-wrap: wrap;
+ list-style: none;
+ margin: 0;
+ padding: 0;
+}
+
+.hy-filter-group__label {
+ @include font-size(12px, 16px);
+ background-color: var(--grayscale-background-box);
+ border-radius: 2px;
+ color: var(--grayscale-dark);
+ font-family: var(--main-font-family);
+ font-weight: normal;
+ letter-spacing: -0.2px;
+ margin: 8px 4px 8px 0;
+ padding: 4px 6px;
+
+ @include breakpoint($narrow) {
+ @include font-size(14px, 16px);
+ letter-spacing: -0.3px;
+ padding: 6px 8px;
+ }
+}
+
+.hy-filter-group__button {
+ @include font-size(12px, 16px);
+ align-items: center;
+ background-color: var(--brand-main-light);
+ border-radius: 2px;
+ border: 0;
+ color: var(--grayscale-white);
+ display: inline-flex;
+ font-family: var(--main-font-family);
+ font-weight: normal;
+ letter-spacing: -0.2px;
+ margin: 8px 0;
+ padding: 4px 6px;
+
+ @include breakpoint($narrow) {
+ @include font-size(14px, 16px);
+ letter-spacing: -0.3px;
+ padding: 6px 8px;
+ }
+
+ &:hover {
+ cursor: pointer;
+ }
+}
+
+.hy-filter-group__button-icon {
+ margin-left: 6px;
+
+ @include breakpoint($narrow) {
+ margin-left: 8px;
+ }
+
+ svg {
+ pointer-events: none;
+
+ @include breakpoint($narrow) {
+ height: 12px;
+ width: 12px;
+ }
+ }
+}
+
+.hy-filter-group__divider {
+ @include font-size(12px, 16px);
+ color: var(--grayscale-dark);
+ font-family: var(--main-font-family);
+ margin: 4px 6px;
+
+ @include breakpoint($narrow) {
+ @include font-size(14px, 16px);
+ letter-spacing: -0.3px;
+ }
+}
diff --git a/src/components/hy-filter-group/hy-filter-group.tsx b/src/components/hy-filter-group/hy-filter-group.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..b64dcd24b95755aa9c0300a67a191518cf028cae
--- /dev/null
+++ b/src/components/hy-filter-group/hy-filter-group.tsx
@@ -0,0 +1,58 @@
+import {Component, Host, h, Prop, Watch} from '@stencil/core';
+
+export interface IFilterGroupFilter {
+ id: string | number;
+ label: string;
+}
+
+@Component({
+ tag: 'hy-filter-group',
+ styleUrl: 'hy-filter-group.scss',
+ shadow: false,
+})
+export class HyFilterGroup {
+ private _filterGroupFilters: IFilterGroupFilter[];
+ @Prop() filterGroupLabel: string;
+ @Prop() filterGroupFilters: IFilterGroupFilter[] | string;
+
+ @Watch('filterGroupFilters')
+ arrayDataWatcher(newValue: IFilterGroupFilter[] | string) {
+ if (typeof newValue === 'string') {
+ this._filterGroupFilters = JSON.parse(newValue);
+ } else {
+ this._filterGroupFilters = newValue;
+ }
+ }
+
+ componentWillLoad() {
+ this.arrayDataWatcher(this.filterGroupFilters);
+ }
+
+ // TODO: Finish handleFilterDeselect functionality with real data.
+ handleFilterDeselect(id) {
+ console.log(id);
+ }
+
+ render() {
+ return (
+ <Host class="hy-filter-group">
+ <ul class="hy-filter-group__listing">
+ <li>
+ <h3 class="hy-filter-group__label">{this.filterGroupLabel}</h3>
+ </li>
+ {this._filterGroupFilters.map(({id, label}, index) => (
+ <hy-filter-group-item
+ filter-group-item-id={id}
+ filter-group-item-label={label}
+ onClick={() => this.handleFilterDeselect(id)}
+ >
+ {this._filterGroupFilters.length > 1 && this._filterGroupFilters.length - 1 !== index && (
+ <span class="hy-filter-group__divider">or</span>
+ )}
+ </hy-filter-group-item>
+ ))}
+ </ul>
+ </Host>
+ );
+ }
+}
diff --git a/src/components/hy-filter-group/readme.md b/src/components/hy-filter-group/readme.md
new file mode 100644
index 0000000000000000000000000000000000000000..87e14407f589fb43c1eb4d68f20789804942e8e8
--- /dev/null
+++ b/src/components/hy-filter-group/readme.md
@@ -0,0 +1,33 @@
+# hy-filter-group-item
+
+<!-- Auto Generated Below -->
+
+## Properties
+
+| Property | Attribute | Description | Type | Default |
+| ---------------------- | ------------------------- | ----------- | ------------------ | ----------- |
+| `filterGroupItemId` | `filter-group-item-id` | | `number \| string` | `undefined` |
+| `filterGroupItemLabel` | `filter-group-item-label` | | `string` | `undefined` |
+
+## Dependencies
+
+### Used by
+
+- [hy-filter-group](.)
+
+### Depends on
+
+- [hy-icon](../icon)
+
+### Graph
+
+```mermaid
+graph TD;
+ hy-filter-group-item --> hy-icon
+ hy-filter-group --> hy-filter-group-item
+ style hy-filter-group-item fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+---
+
+Helsinki University Design System
diff --git a/src/components/hy-filter-visibility-tool/hy-filter-visibility-tool.reset.toggle.tsx b/src/components/hy-filter-visibility-tool/hy-filter-visibility-tool.reset.toggle.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..805fc53e00f77c514d52a1c2b0fc214d3843cf09
--- /dev/null
+++ b/src/components/hy-filter-visibility-tool/hy-filter-visibility-tool.reset.toggle.tsx
@@ -0,0 +1,22 @@
+import {Component, h, Host} from '@stencil/core';
+
+@Component({
+ tag: 'hy-filter-visibility-tool-toggle',
+ shadow: false,
+})
+export class HyFilterVisibilityToolToggle {
+ render() {
+ return (
+ <Host>
+ <button class="hy-filter-visibility-tool hy-filter-visibility-tool--show-more" type="button">
+ <hy-icon class="hy-filter-visibility-tool__icon" icon={'hy-icon-plus'} size={12} aria-hidden="true" />
+ Show more filters
+ </button>
+ <button class="hy-filter-visibility-tool hy-filter-visibility-tool--show-less" type="button">
+ <hy-icon class="hy-filter-visibility-tool__icon" icon={'hy-icon-minus'} size={12} aria-hidden="true" />
+ Show less filters
+ </button>
+ </Host>
+ );
+ }
+}
diff --git a/src/components/hy-filter-visibility-tool/hy-filter-visibility-tool.reset.tsx b/src/components/hy-filter-visibility-tool/hy-filter-visibility-tool.reset.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..47e3bf777998b1038e0fc9f25320a41eb5c5b195
--- /dev/null
+++ b/src/components/hy-filter-visibility-tool/hy-filter-visibility-tool.reset.tsx
@@ -0,0 +1,16 @@
+import {Component, h} from '@stencil/core';
+
+@Component({
+ tag: 'hy-filter-visibility-tool-reset',
+ shadow: false,
+})
+export class HyFilterVisibilityToolReset {
+ render() {
+ return (
+ <button class="hy-filter-visibility-tool hy-filter-visibility-tool--reset" type="button">
+ <hy-icon class="hy-filter-visibility-tool__icon" icon={'hy-icon-remove'} size={14} aria-hidden="true" />
+ Reset filters
+ </button>
+ );
+ }
+}
diff --git a/src/components/hy-filter-visibility-tool/hy-filter-visibility-tool.scss b/src/components/hy-filter-visibility-tool/hy-filter-visibility-tool.scss
new file mode 100644
index 0000000000000000000000000000000000000000..cf1b65c77de72067960b0cbcf9dff7f4b2fc1c0b
--- /dev/null
+++ b/src/components/hy-filter-visibility-tool/hy-filter-visibility-tool.scss
@@ -0,0 +1,50 @@
+.hy-filter-visibility-tool {
+ @include font-size(14px, 20px);
+ align-items: center;
+ background-color: transparent;
+ border: 0;
+ color: var(--link-blue);
+ display: inline-flex;
+ font-family: var(--main-font-family);
+ font-weight: $semibold;
+ letter-spacing: -0.35px;
+ padding: 0;
+
+ @include breakpoint($narrow) {
+ @include font-size(16px, 20px);
+ letter-spacing: -0.5px;
+ }
+
+ &:hover {
+ color: var(--brand-main);
+ cursor: pointer;
+
+ svg {
+ fill: var(--brand-main);
+ }
+ }
+
+ &:focus {
+ color: var(--brand-main);
+ outline-offset: 1px;
+ outline: 2px solid var(--brand-main);
+
+ svg {
+ fill: var(--brand-main);
+ }
+ }
+}
+
+.hy-filter-visibility-tool__icon {
+ flex-shrink: 0;
+ margin-right: 6px;
+
+ svg {
+ fill: var(--link-blue);
+
+ @include breakpoint($narrow) {
+ height: 16px;
+ width: 16px;
+ }
+ }
+}
diff --git a/src/components/hy-filter-visibility-tool/hy-filter-visibility-tool.tsx b/src/components/hy-filter-visibility-tool/hy-filter-visibility-tool.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..1102e2f3402bdacc005926b3d89770c25abaae4e
--- /dev/null
+++ b/src/components/hy-filter-visibility-tool/hy-filter-visibility-tool.tsx
@@ -0,0 +1,28 @@
+import {Component, Host, h, Prop} from '@stencil/core';
+
+@Component({
+ tag: 'hy-filter-visibility-tool',
+ styleUrl: 'hy-filter-visibility-tool.scss',
+ shadow: false,
+})
+export class HyFilterVisibilityTool {
+ @Prop() filterVisibilityToolType: 'toggle' | 'reset';
+
+ render() {
+ switch (this.filterVisibilityToolType) {
+ case 'toggle':
+ return (
+ <Host>
+ <hy-filter-visibility-tool-toggle />
+ </Host>
+ );
+
+ case 'reset':
+ return (
+ <Host>
+ <hy-filter-visibility-tool-reset />
+ </Host>
+ );
+ }
+ }
+}
diff --git a/src/components/hy-filter-visibility-tool/readme.md b/src/components/hy-filter-visibility-tool/readme.md
new file mode 100644
index 0000000000000000000000000000000000000000..54caf6e035411231d7aa8fc702425ee59910804d
--- /dev/null
+++ b/src/components/hy-filter-visibility-tool/readme.md
@@ -0,0 +1,26 @@
+# hy-filter-visibility-tool
+
+<!-- Auto Generated Below -->
+
+## Dependencies
+
+### Used by
+
+- [hy-filter-visibility-tool](.)
+
+### Depends on
+
+- [hy-icon](../icon)
+
+### Graph
+
+```mermaid
+graph TD;
+ hy-filter-visibility-tool-toggle --> hy-icon
+ hy-filter-visibility-tool --> hy-filter-visibility-tool-toggle
+ style hy-filter-visibility-tool-toggle fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+---
+
+Helsinki University Design System
diff --git a/src/components/hy-search-field/hy-search-field.scss b/src/components/hy-search-field/hy-search-field.scss
new file mode 100644
index 0000000000000000000000000000000000000000..cc06495d6277c5b0421f417c99bc3ab2c8d2b272
--- /dev/null
+++ b/src/components/hy-search-field/hy-search-field.scss
@@ -0,0 +1,164 @@
+:host {
+ display: block;
+}
+
+.search-field {
+ display: inline-block;
+ width: 100%;
+
+ @include breakpoint($narrow) {
+ min-width: 48.3%;
+ }
+
+ @include breakpoint($extrawide) {
+ min-width: 23.03%;
+ }
+}
+
+.search-field__label {
+ @include font-size(14px, 20px);
+ display: block;
+ font-family: var(--main-font-family);
+ letter-spacing: -0.44px;
+ margin-bottom: 8px;
+ position: relative;
+ text-decoration: none;
+ width: 100%;
+
+ @include breakpoint($narrow) {
+ @include font-size(16px, 20px);
+ }
+}
+
+.search-field__actions {
+ align-items: stretch;
+ display: flex;
+}
+
+.search-field__wrapper {
+ flex-grow: 1;
+ position: relative;
+}
+
+.search-field__input {
+ @include font-size(14px, 24px);
+ border-radius: 0;
+ border: 1px solid var(--grayscale-medium-dark);
+ font-weight: bold;
+ height: 40px;
+ letter-spacing: normal;
+ padding: 8px 12px;
+ width: 100%;
+
+ @include breakpoint($narrow) {
+ @include font-size(16px, 24px);
+ height: 44px;
+ }
+
+ @include breakpoint($extrawide) {
+ height: 48px;
+ }
+
+ &::placeholder {
+ @include font-size(14px, 24px);
+ color: var(--grayscale-dark);
+ font-weight: normal;
+
+ @include breakpoint($narrow) {
+ @include font-size(16px, 24px);
+ }
+ }
+
+ &:hover {
+ border-color: var(--brand-main-light);
+ }
+
+ &:focus {
+ border-color: var(--brand-main-light);
+ border-style: solid inset solid solid;
+ border-width: 2px;
+ outline: 0;
+ text-indent: -1px; // Text stays in place.
+ }
+}
+
+.search-field__reset {
+ align-items: center;
+ background-color: transparent;
+ border: 0;
+ display: inline-flex;
+ height: 40px;
+ justify-content: center;
+ position: absolute;
+ right: 0;
+ top: 50%;
+ transform: translateY(-50%);
+ width: 40px;
+
+ @include breakpoint($narrow) {
+ height: 44px;
+ width: 44px;
+ }
+
+ @include breakpoint($extrawide) {
+ height: 48px;
+ width: 48px;
+ }
+
+ svg {
+ fill: var(--grayscale-dark);
+
+ @include breakpoint($extrawide) {
+ height: 16px;
+ width: 16px;
+ }
+ }
+
+ &:hover {
+ cursor: pointer;
+ }
+
+ &:focus {
+ outline-color: var(--brand-main-light);
+ }
+}
+
+.search-field__submit {
+ align-items: center;
+ background-color: var(--brand-main-light);
+ border: 0;
+ display: inline-flex;
+ flex-shrink: 0;
+ height: 40px;
+ justify-content: center;
+ width: 40px;
+
+ @include breakpoint($narrow) {
+ height: 44px;
+ width: 44px;
+ }
+
+ @include breakpoint($extrawide) {
+ height: 48px;
+ width: 48px;
+ }
+
+ svg {
+ @include breakpoint($narrow) {
+ height: 20px;
+ width: 20px;
+ }
+
+ @include breakpoint($extrawide) {
+ height: 22px;
+ width: 22px;
+ }
+ }
+
+ &:hover {
+ cursor: pointer;
+ }
+ s &:focus {
+ outline-color: var(--brand-main-light);
+ }
+}
diff --git a/src/components/hy-search-field/hy-search-field.tsx b/src/components/hy-search-field/hy-search-field.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..3dbe02a2f266db5a1c9370ca9ec29f50238a2aff
--- /dev/null
+++ b/src/components/hy-search-field/hy-search-field.tsx
@@ -0,0 +1,60 @@
+import {Component, Prop, h, State, Element, Host} from '@stencil/core';
+import {ColorVariant} from '../../utils/utils';
+
+@Component({
+ tag: 'hy-search-field',
+ styleUrl: 'hy-search-field.scss',
+ shadow: false,
+})
+export class HySearchField {
+ @Element() el: HTMLElement;
+ @Prop() label: string;
+ @Prop() isLabelHidden?: boolean = false;
+ @Prop() inputId: string;
+ @State() isInputValueEmpty: boolean = true;
+
+ componentDidLoad() {
+ const searchInput = this.el.querySelector('.search-field__input');
+
+ searchInput.addEventListener('keyup', (event) => {
+ const {value} = event.target as HTMLInputElement;
+
+ this.isInputValueEmpty = value.length > 0 ? false : true;
+ });
+ }
+
+ handleInputReset() {
+ this.isInputValueEmpty = true;
+ const searchInput = this.el.querySelector('.search-field__input') as HTMLInputElement;
+ searchInput.value = '';
+ searchInput.focus();
+ }
+
+ render() {
+ return (
+ <Host class="search-field">
+ <label htmlFor={this.inputId} class={`search-field__label ${this.isLabelHidden ? 'visually-hidden' : ''}`}>
+ {this.label}
+ </label>
+ <div class="search-field__actions">
+ <div class="search-field__wrapper">
+ <input id={this.inputId} type="text" placeholder="Type here..." class="search-field__input" />
+ {!this.isInputValueEmpty && (
+ <button
+ type="button"
+ class="search-field__reset"
+ aria-label="Reset"
+ onClick={() => this.handleInputReset()}
+ >
+ <hy-icon icon={'hy-icon-remove'} size={14} aria-hidden="true" />
+ </button>
+ )}
+ </div>
+ <button type="submit" class="search-field__submit" aria-label="Search">
+ <hy-icon icon={'hy-icon-search'} size={18} fill={ColorVariant.white} aria-hidden="true" />
+ </button>
+ </div>
+ </Host>
+ );
+ }
+}
diff --git a/src/components/hy-search-field/readme.md b/src/components/hy-search-field/readme.md
new file mode 100644
index 0000000000000000000000000000000000000000..1d190e11b37f1ce7ce789e0873c7c6eedf286a2c
--- /dev/null
+++ b/src/components/hy-search-field/readme.md
@@ -0,0 +1,29 @@
+# hy-search-field
+
+<!-- Auto Generated Below -->
+
+## Properties
+
+| Property | Attribute | Description | Type | Default |
+| --------------- | ----------------- | ----------- | --------- | ----------- |
+| `inputId` | `input-id` | | `string` | `undefined` |
+| `isLabelHidden` | `is-label-hidden` | | `boolean` | `false` |
+| `label` | `label` | | `string` | `undefined` |
+
+## Dependencies
+
+### Depends on
+
+- [hy-icon](../icon)
+
+### Graph
+
+```mermaid
+graph TD;
+ hy-search-field --> hy-icon
+ style hy-search-field fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+---
+
+Helsinki University Design System
diff --git a/src/components/icon/icon.tsx b/src/components/icon/icon.tsx
index 015304d4aaa5aabe151ea8f8fd5f603065aabbc3..ca55788897d5e2fad633166ad4d2f395690571b4 100644
--- a/src/components/icon/icon.tsx
+++ b/src/components/icon/icon.tsx
@@ -4,15 +4,16 @@ import {IconName} from '../../utils/utils';
// TODO: add all icons
const iconNames: IconName = {
+ 'hy-icon-arrow-down': (p) => <icons.ArrowDown {...p} />,
'hy-icon-arrow-left': (p) => <icons.IconArrowLeft {...p} />,
'hy-icon-arrow-right': (p) => <icons.IconArrowRight {...p} />,
'hy-icon-arrow-to-right': (p) => <icons.IconArrowToRight {...p} />,
- 'hy-icon-arrow-down': (p) => <icons.ArrowDown {...p} />,
'hy-icon-arrow-up': (p) => <icons.ArrowUp {...p} />,
'hy-icon-camera': (p) => <icons.Camera {...p} />,
'hy-icon-caret-down': (p) => <icons.CaretDown {...p} />,
'hy-icon-caret-left': (p) => <icons.CaretLeft {...p} />,
'hy-icon-caret-right': (p) => <icons.CaretRight {...p} />,
+ 'hy-icon-done': (p) => <icons.Done {...p} />,
'hy-icon-euro': (p) => <icons.Euro {...p} />,
'hy-icon-globe': (p) => <icons.Globe {...p} />,
'hy-icon-hamburger': (p) => <icons.Hamburger {...p} />,
@@ -20,16 +21,18 @@ const iconNames: IconName = {
'hy-icon-hy-logo': (p) => <icons.HyLogo {...p} />,
'hy-icon-image-gallery': (p) => <icons.ImageGallery {...p} />,
'hy-icon-link-arrow-down': (p) => <icons.LinkArrowDown {...p} />,
+ 'hy-icon-minus': (p) => <icons.Minus {...p} />,
+ 'hy-icon-play': (p) => <icons.Play {...p} />,
+ 'hy-icon-plus': (p) => <icons.Plus {...p} />,
'hy-icon-quote': (p) => <icons.IconQuote {...p} />,
'hy-icon-remove': (p) => <icons.Remove {...p} />,
'hy-icon-search': (p) => <icons.Search {...p} />,
- 'hy-icon-play': (p) => <icons.Play {...p} />,
- 'hy-icon-video': (p) => <icons.Video {...p} />,
'hy-icon-some-facebook': (p) => <icons.SomeFacebook {...p} />,
'hy-icon-some-instagram': (p) => <icons.SomeInstagram {...p} />,
- 'hy-icon-some-youtube': (p) => <icons.SomeYoutube {...p} />,
- 'hy-icon-some-twitter': (p) => <icons.SomeTwitter {...p} />,
'hy-icon-some-linkedin': (p) => <icons.SomeLinkedin {...p} />,
+ 'hy-icon-some-twitter': (p) => <icons.SomeTwitter {...p} />,
+ 'hy-icon-some-youtube': (p) => <icons.SomeYoutube {...p} />,
+ 'hy-icon-video': (p) => <icons.Video {...p} />,
};
@Component({
diff --git a/src/components/icon/readme.md b/src/components/icon/readme.md
index 80ed4364e557a455cd5e535b6d1399f71732c5c2..02f2abc5a5b81b3da108e9aa8d7fa0a3b115af17 100644
--- a/src/components/icon/readme.md
+++ b/src/components/icon/readme.md
@@ -17,9 +17,15 @@
- [hy-accordion-item](../accordion-item)
- [hy-breadcrumbs](../hy-breadcrumbs)
- [hy-button](../button)
+- [hy-checkbox](../hy-checkbox)
- [hy-cta-button](../cta-button)
- [hy-cta-link](../cta-link)
- [hy-desktop-menu-links](../site-header/hy-desktop-menu-links)
+- [hy-dropdown](../hy-dropdown)
+- [hy-dropdown-panel-item](../hy-dropdown)
+- [hy-filter-group-item](../hy-filter-group)
+- [hy-filter-visibility-tool-reset](../hy-filter-visibility-tool)
+- [hy-filter-visibility-tool-toggle](../hy-filter-visibility-tool)
- [hy-footer-action](../footer/hy-footer-action)
- [hy-footer-base](../footer/hy-footer-base)
- [hy-footer-link-item](../footer/hy-footer-link-item)
@@ -29,6 +35,7 @@
- [hy-menu-language](../navigation/menu-language)
- [hy-menu-mobile-breadcrumb](../navigation/menu-mobile-breadcrumb)
- [hy-quote](../hy-quote)
+- [hy-search-field](../hy-search-field)
- [hy-shortcuts](../hy-shortcuts)
- [hy-site-header](../site-header)
- [hy-site-logo](../site-header/site-logo)
@@ -43,9 +50,15 @@ graph TD;
hy-accordion-item --> hy-icon
hy-breadcrumbs --> hy-icon
hy-button --> hy-icon
+ hy-checkbox --> hy-icon
hy-cta-button --> hy-icon
hy-cta-link --> hy-icon
hy-desktop-menu-links --> hy-icon
+ hy-dropdown --> hy-icon
+ hy-dropdown-panel-item --> hy-icon
+ hy-filter-group-item --> hy-icon
+ hy-filter-visibility-tool-reset --> hy-icon
+ hy-filter-visibility-tool-toggle --> hy-icon
hy-footer-action --> hy-icon
hy-footer-base --> hy-icon
hy-footer-link-item --> hy-icon
@@ -55,6 +68,7 @@ graph TD;
hy-menu-language --> hy-icon
hy-menu-mobile-breadcrumb --> hy-icon
hy-quote --> hy-icon
+ hy-search-field --> hy-icon
hy-shortcuts --> hy-icon
hy-site-header --> hy-icon
hy-site-logo --> hy-icon
diff --git a/src/index.html b/src/index.html
index 3cf677fd2439c164497112bbf33cd6acd2768f54..5535bd4261143825dfa261e813f23e1ba1553a32 100644
--- a/src/index.html
+++ b/src/index.html
@@ -237,6 +237,9 @@
THIS IS SIDEBAR
</aside>
</hy-main>
+ <div style="max-width: 1216px; margin: 0 auto;">
+ <hy-search-field inputId="search" label="Search degree programmes" />
+ </div>
<hy-footer>
<hy-footer-action updated-text="Updated on 14.10.2020" up-button-label="Up"></hy-footer-action>
<hy-footer-info