diff --git a/src/components.d.ts b/src/components.d.ts
index a759db312e464abb61f7500856cc08f8f0435fcd..4927e728702d47c55fa218f427eaeb78a5f17888 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -26,6 +26,7 @@ import {
LinkBoxVariants,
LinkVariants,
MenuType,
+ PaginationItemVariants,
PersonCardVariants,
ProcessFlowBoxStepStates,
ProcessFlowBoxVariants,
@@ -589,6 +590,13 @@ export namespace Components {
*/
size: SiteLogoSize;
}
+ interface HyPager {}
+ interface HyPagerItem {
+ itemLabel?: string;
+ itemUrl?: string;
+ scAriaLabel?: string;
+ variant: PaginationItemVariants;
+ }
interface HyParagraphText {
headerstyle: string;
placement: string;
@@ -1068,6 +1076,16 @@ declare global {
prototype: HTMLHyMenuSidebarElement;
new (): HTMLHyMenuSidebarElement;
};
+ interface HTMLHyPagerElement extends Components.HyPager, HTMLStencilElement {}
+ var HTMLHyPagerElement: {
+ prototype: HTMLHyPagerElement;
+ new (): HTMLHyPagerElement;
+ };
+ interface HTMLHyPagerItemElement extends Components.HyPagerItem, HTMLStencilElement {}
+ var HTMLHyPagerItemElement: {
+ prototype: HTMLHyPagerItemElement;
+ new (): HTMLHyPagerItemElement;
+ };
interface HTMLHyParagraphTextElement extends Components.HyParagraphText, HTMLStencilElement {}
var HTMLHyParagraphTextElement: {
prototype: HTMLHyParagraphTextElement;
@@ -1230,6 +1248,8 @@ declare global {
'hy-menu-level-container': HTMLHyMenuLevelContainerElement;
'hy-menu-mobile-breadcrumb': HTMLHyMenuMobileBreadcrumbElement;
'hy-menu-sidebar': HTMLHyMenuSidebarElement;
+ 'hy-pager': HTMLHyPagerElement;
+ 'hy-pager-item': HTMLHyPagerItemElement;
'hy-paragraph-text': HTMLHyParagraphTextElement;
'hy-person-card': HTMLHyPersonCardElement;
'hy-process': HTMLHyProcessElement;
@@ -1803,6 +1823,13 @@ declare namespace LocalJSX {
*/
size?: SiteLogoSize;
}
+ interface HyPager {}
+ interface HyPagerItem {
+ itemLabel?: string;
+ itemUrl?: string;
+ scAriaLabel?: string;
+ variant?: PaginationItemVariants;
+ }
interface HyParagraphText {
headerstyle?: string;
placement?: string;
@@ -2035,6 +2062,8 @@ declare namespace LocalJSX {
'hy-menu-level-container': HyMenuLevelContainer;
'hy-menu-mobile-breadcrumb': HyMenuMobileBreadcrumb;
'hy-menu-sidebar': HyMenuSidebar;
+ 'hy-pager': HyPager;
+ 'hy-pager-item': HyPagerItem;
'hy-paragraph-text': HyParagraphText;
'hy-person-card': HyPersonCard;
'hy-process': HyProcess;
@@ -2129,6 +2158,8 @@ declare module '@stencil/core' {
'hy-menu-mobile-breadcrumb': LocalJSX.HyMenuMobileBreadcrumb &
JSXBase.HTMLAttributes<HTMLHyMenuMobileBreadcrumbElement>;
'hy-menu-sidebar': LocalJSX.HyMenuSidebar & JSXBase.HTMLAttributes<HTMLHyMenuSidebarElement>;
+ 'hy-pager': LocalJSX.HyPager & JSXBase.HTMLAttributes<HTMLHyPagerElement>;
+ 'hy-pager-item': LocalJSX.HyPagerItem & JSXBase.HTMLAttributes<HTMLHyPagerItemElement>;
'hy-paragraph-text': LocalJSX.HyParagraphText & JSXBase.HTMLAttributes<HTMLHyParagraphTextElement>;
'hy-person-card': LocalJSX.HyPersonCard & JSXBase.HTMLAttributes<HTMLHyPersonCardElement>;
'hy-process': LocalJSX.HyProcess & JSXBase.HTMLAttributes<HTMLHyProcessElement>;
diff --git a/src/components/icon/readme.md b/src/components/icon/readme.md
index 1d53339d18b28b6f14c91c99d21b6882028978f9..ccd10150fd514cf1f8657e311293101c7c0f7513 100644
--- a/src/components/icon/readme.md
+++ b/src/components/icon/readme.md
@@ -39,6 +39,7 @@
- [hy-menu-level-container](../navigation/menu-level-container)
- [hy-menu-mobile-breadcrumb](../navigation/menu-mobile-breadcrumb)
- [hy-menu-sidebar](../navigation/menu-sidebar)
+- [hy-pager-item](../pagination/hy-pager-item)
- [hy-person-card](../hy-person-card)
- [hy-quote](../hy-quote)
- [hy-search-field](../hy-search-field)
@@ -78,6 +79,7 @@ graph TD;
hy-menu-level-container --> hy-icon
hy-menu-mobile-breadcrumb --> hy-icon
hy-menu-sidebar --> hy-icon
+ hy-pager-item --> hy-icon
hy-person-card --> hy-icon
hy-quote --> hy-icon
hy-search-field --> hy-icon
diff --git a/src/components/pagination/hy-pager-item/hy-pager-item.scss b/src/components/pagination/hy-pager-item/hy-pager-item.scss
new file mode 100644
index 0000000000000000000000000000000000000000..cbc959212dba05da94e938d5c4ca6518b0c12b8c
--- /dev/null
+++ b/src/components/pagination/hy-pager-item/hy-pager-item.scss
@@ -0,0 +1,84 @@
+:host {
+ display: block;
+}
+
+.hy-pager__item {
+ @include font-size(14px, 24px);
+ @include font-weight($bold);
+ align-items: center;
+ background-color: var(--brand-main-light);
+ color: var(--grayscale-white);
+ display: flex;
+ flex-direction: row;
+ font-family: var(--main-font-family);
+ justify-content: center;
+ letter-spacing: -0.4px;
+ margin-bottom: 4px;
+ margin-right: 8px;
+ min-height: 36px;
+ min-width: 36px;
+ text-align: center;
+
+ @include breakpoint($wide) {
+ margin-right: 6px;
+ min-height: 40px;
+ min-width: 40px;
+ }
+
+ a {
+ @include font-size(14px, 24px);
+ @include font-weight($bold);
+ align-items: center;
+ color: var(--grayscale-white);
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ letter-spacing: -0.4px;
+ min-height: 36px;
+ min-width: 36px;
+ text-decoration: none;
+
+ @include breakpoint($wide) {
+ @include font-size(16px, 24px);
+ letter-spacing: -0.5px;
+ min-height: 40px;
+ min-width: 40px;
+ }
+ }
+
+ &__current {
+ background-color: var(--grayscale-white);
+ box-sizing: border-box;
+ border: 2px solid var(--grayscale-black);
+ a {
+ color: var(--brand-main-nearly-black);
+
+ @include breakpoint($wide) {
+ @include font-size(18px, 24px);
+ letter-spacing: -0.56px;
+ }
+ }
+ }
+
+ &__next,
+ &__previous {
+ a {
+ padding: 7px 12px 5px 12px;
+
+ @include breakpoint($wide) {
+ padding: 8px 12px;
+ }
+ }
+
+ .hy-icon-wrapper {
+ margin: 0 4px;
+ @include breakpoint($wide) {
+ margin: 0 6px;
+ }
+
+ svg {
+ fill: var(--grayscale-white);
+ }
+ }
+ }
+}
diff --git a/src/components/pagination/hy-pager-item/hy-pager-item.tsx b/src/components/pagination/hy-pager-item/hy-pager-item.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..332ce92590c7fe4ad039fe85063e6f27eb13db01
--- /dev/null
+++ b/src/components/pagination/hy-pager-item/hy-pager-item.tsx
@@ -0,0 +1,76 @@
+import {Component, h, Prop} from '@stencil/core';
+import {PaginationItemVariants} from '../../../utils/utils';
+
+@Component({
+ tag: 'hy-pager-item',
+ styleUrl: 'hy-pager-item.scss',
+ shadow: true,
+})
+export class HyPagerItem {
+ @Prop() variant: PaginationItemVariants = PaginationItemVariants.default;
+ @Prop() itemLabel?: string;
+ @Prop() itemUrl?: string;
+ @Prop() scAriaLabel?: string;
+
+ render() {
+ let classAttributes = ['hy-pager__item'].join(' ');
+ switch (this.variant) {
+ case PaginationItemVariants.current: {
+ classAttributes = ['hy-pager__item', 'hy-pager__item__current'].join(' ');
+ return (
+ <li class={classAttributes}>
+ <a href={this.itemUrl} aria-current="true">
+ {this.itemLabel}
+ </a>
+ </li>
+ );
+ }
+ case PaginationItemVariants.next: {
+ classAttributes = ['hy-pager__item', 'hy-pager__item__next'].join(' ');
+ const iconClassAttributes = ['link-icon'].join(' ');
+ return (
+ <li class={classAttributes}>
+ <a href={this.itemUrl} aria-label={this.scAriaLabel}>
+ {this.itemLabel}
+ <span class={'hy-icon-wrapper'}>
+ <div class={iconClassAttributes}>
+ <hy-icon icon={'hy-icon-arrow-to-right'} size={12} />
+ </div>
+ </span>
+ </a>
+ </li>
+ );
+ }
+ case PaginationItemVariants.previous: {
+ classAttributes = ['hy-pager__item', 'hy-pager__item__previous'].join(' ');
+ const iconClassAttributes = ['link-icon'].join(' ');
+ return (
+ <li class={classAttributes}>
+ <a href={this.itemUrl} aria-label={this.scAriaLabel}>
+ <span class={'hy-icon-wrapper'}>
+ <div class={iconClassAttributes}>
+ <hy-icon icon={'hy-icon-arrow-left'} size={12} />
+ </div>
+ </span>
+ {this.itemLabel}
+ </a>
+ </li>
+ );
+ }
+ case PaginationItemVariants.ellipsis: {
+ classAttributes = ['hy-pager__item', 'hy-pager__item__ellipsis'].join(' ');
+ return <li class={classAttributes}>...</li>;
+ }
+ default: {
+ classAttributes = ['hy-pager__item'].join(' ');
+ return (
+ <li class={classAttributes}>
+ <a href={this.itemUrl} aria-label={this.scAriaLabel}>
+ {this.itemLabel}
+ </a>
+ </li>
+ );
+ }
+ }
+ }
+}
diff --git a/src/components/pagination/hy-pager-item/readme.md b/src/components/pagination/hy-pager-item/readme.md
new file mode 100644
index 0000000000000000000000000000000000000000..ad8db57d5ebb0d5631a48ae39afd6678badef1ef
--- /dev/null
+++ b/src/components/pagination/hy-pager-item/readme.md
@@ -0,0 +1,30 @@
+# hy-pager-item
+
+<!-- Auto Generated Below -->
+
+## Properties
+
+| Property | Attribute | Description | Type | Default |
+| ------------- | --------------- | ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- |
+| `itemLabel` | `item-label` | | `string` | `undefined` |
+| `itemUrl` | `item-url` | | `string` | `undefined` |
+| `scAriaLabel` | `sc-aria-label` | | `string` | `undefined` |
+| `variant` | `variant` | | `PaginationItemVariants.current \| PaginationItemVariants.default \| PaginationItemVariants.ellipsis \| PaginationItemVariants.next \| PaginationItemVariants.previous` | `PaginationItemVariants.default` |
+
+## Dependencies
+
+### Depends on
+
+- [hy-icon](../../icon)
+
+### Graph
+
+```mermaid
+graph TD;
+ hy-pager-item --> hy-icon
+ style hy-pager-item fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+---
+
+Helsinki University Design System
diff --git a/src/components/pagination/hy-pager/hy-pager.scss b/src/components/pagination/hy-pager/hy-pager.scss
new file mode 100644
index 0000000000000000000000000000000000000000..93bd7b5de625820d777e36818ebc157df8c1aae5
--- /dev/null
+++ b/src/components/pagination/hy-pager/hy-pager.scss
@@ -0,0 +1,13 @@
+:host {
+ display: block;
+}
+
+.hy-pager {
+ align-items: center;
+ display: flex;
+ justify-content: center;
+ flex-direction: row;
+ flex-wrap: wrap;
+ font-family: var(--main-font-family);
+ list-style: none;
+}
diff --git a/src/components/pagination/hy-pager/hy-pager.tsx b/src/components/pagination/hy-pager/hy-pager.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..0b3c6338d9d500e84a4fcf4ed9695b8c464aead9
--- /dev/null
+++ b/src/components/pagination/hy-pager/hy-pager.tsx
@@ -0,0 +1,18 @@
+import {Component, h} from '@stencil/core';
+
+@Component({
+ tag: 'hy-pager',
+ styleUrl: 'hy-pager.scss',
+ shadow: true,
+})
+export class HyPager {
+ render() {
+ const classAttributes = ['hy-pager'].join(' ');
+
+ return (
+ <ul class={classAttributes}>
+ <slot></slot>
+ </ul>
+ );
+ }
+}
diff --git a/src/components/pagination/hy-pager/readme.md b/src/components/pagination/hy-pager/readme.md
new file mode 100644
index 0000000000000000000000000000000000000000..d10ef690e45de55cf2ef493e851fc1d760248fab
--- /dev/null
+++ b/src/components/pagination/hy-pager/readme.md
@@ -0,0 +1,7 @@
+# hy-pager
+
+<!-- Auto Generated Below -->
+
+---
+
+Helsinki University Design System
diff --git a/src/index.html b/src/index.html
index 44e1764eb292bb0ba47239284f9bc6d6a5ba7fc4..1b9283f08d92b5216fa4824fe999af239ed92e05 100644
--- a/src/index.html
+++ b/src/index.html
@@ -178,6 +178,41 @@
sc-label="Aria label"
></hy-hero>
+ <hy-paragraph-text>
+ THIS IS Pagination
+ </hy-paragraph-text>
+ <hy-pager>
+ <hy-pager-item
+ variant="previous"
+ item-label="Previous"
+ item-url="https://helsinki.fi/sv/utbildning/program?page=1"
+ >
+ </hy-pager-item>
+ <hy-pager-item variant="current" item-label="1" item-url="https://helsinki.fi/sv/utbildning/program">
+ </hy-pager-item>
+ <hy-pager-item
+ item-label="2"
+ item-url="https://helsinki.fi/sv/utbildning/program?page=1"
+ sc-aria-label="Go to page 2"
+ >
+ </hy-pager-item>
+ <hy-pager-item
+ item-label="3"
+ item-url="https://helsinki.fi/sv/utbildning/program?page=2"
+ sc-aria-label="Go to page 3"
+ >
+ </hy-pager-item>
+ <hy-pager-item
+ item-label="4"
+ item-url="https://helsinki.fi/sv/utbildning/program?page=3"
+ sc-aria-label="Go to page 4"
+ >
+ </hy-pager-item>
+ <hy-pager-item variant="ellipsis" item-label="..."> </hy-pager-item>
+ <hy-pager-item variant="next" item-label="Next" item-url="https://helsinki.fi/sv/utbildning/program?page=1">
+ </hy-pager-item>
+ </hy-pager>
+
<hy-paragraph-text>
THIS IS MAIN CONTENT
</hy-paragraph-text>
diff --git a/src/utils/utils.ts b/src/utils/utils.ts
index f4ee84acf452a67a94bcbc7c9ba75be93ffaf0d3..61c8938c0d59c9fba9482f7b86b4a63f83903582 100644
--- a/src/utils/utils.ts
+++ b/src/utils/utils.ts
@@ -78,6 +78,14 @@ export enum PersonCardVariants {
searchPanel = 'search-panel',
}
+export enum PaginationItemVariants {
+ default = 'default',
+ current = 'current',
+ previous = 'previous',
+ next = 'next',
+ ellipsis = 'ellipsis',
+}
+
export enum GridColumnsSm {
columnsSm1 = '1',
columnsSm2 = '2',