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

Merge branch 'development' of version.helsinki.fi:julkiset-sivut/design-system-lib into development

parents b1e9a742 c1c773bc
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 180 additions and 109 deletions
.gitignore
+ 1
− 0
View file @ eac22560
dist/
www/
src/index.html
*~
*.sw[mnpcod]
......
package.json
+ 1
− 1
View file @ eac22560
{
"name": "@itcenteratunihelsinki/huds-lib",
"version": "0.0.16",
"version": "0.0.17",
"description": "Helsinki University Design System library",
"main": "dist/index.js",
"module": "dist/index.mjs",
......
src/components/accordion-item/accordion-item.scss
+ 9
− 30
View file @ eac22560
......@@ -4,29 +4,16 @@
.hy-accordion__item {
margin-bottom: 1rem;
transition: all 0.25s ease-in-out;
&__is-open {
$border-color: var(--grayscale-dark);
@include border-without-corners($border-color, 2px);
margin-left: -1rem;
margin-right: -1rem;
transition: all 0.25s ease-in-out;
@include breakpoint($medium) {
margin-left: -2rem;
margin-right: -2rem;
}
border-bottom: 2px solid var(--grayscale-medium);
border-left: 1px solid var(--grayscale-medium);
border-right: 1px solid var(--grayscale-medium);
border-top: 2px solid var(--grayscale-medium);
box-shadow: 0px 2px 12px 1px rgba(#000000, 10%);
.hy-accordion--heading {
margin: 0 auto;
width: calc(100% - 2.25rem);
transition: all 0.25s ease-in-out;
@include breakpoint($medium) {
width: calc(100% - 4.25rem);
}
.hy-accordion--heading__icon {
transform: rotateX(180deg);
......@@ -44,16 +31,15 @@
width: 100%;
.hy-accordion__button {
$border-color: var(--grayscale-dark);
@include border-without-corners($border-color, 1px);
align-items: center;
border: none;
color: var(--brand-main-nearly-black);
display: flex;
flex-direction: row;
font-family: var(--main-font-family);
font-size: 22px;
font-size: 26px;
line-height: 32px;
letter-spacing: -0.82px;
font-weight: 600;
height: 100%;
justify-content: flex-start;
......@@ -73,18 +59,12 @@
&[aria-expanded='true'] {
background: none;
border-bottom: 1px solid var(--grayscale-medium-dark);
border-left: 0;
border-right: 0;
border-top: 0;
padding: 0.85rem 1rem 1rem 1rem;
transition: all 0.35s ease-in;
}
}
.hy-accordion--heading__icon {
margin-right: 0.95rem;
z-index: -1;
z-index: 0;
svg {
fill: var(--brand-main);
......@@ -101,6 +81,5 @@
&--inner-wrapper {
display: block;
padding: 1rem 5% 1.25rem !important;
}
}
src/components/accordion-item/accordion-item.tsx
+ 40
− 31
View file @ eac22560
import { Component, Prop, State, Element, h } from '@stencil/core';
import {Component, Prop, State, Element, h} from '@stencil/core';
@Component({
tag: 'hy-accordion-item',
styleUrl: 'accordion-item.scss',
shadow: false
})
export class AccordionItem {
@Element() el: HTMLElement;
@Prop() accordiontitle?: string;
......@@ -20,24 +19,33 @@ export class AccordionItem {
function collapseSection(element) {
element.style.height = 0 + 'px';
element.setAttribute('data-collapsed', 'true');
setTimeout(() => {
element.style.display = 'none';
}, 250);
}
function expandSection(element) {
element.style.height = element.scrollHeight + 'px';
element.style.display = 'block';
element.style.height = element.scrollHeight + 'px';
element.setAttribute('data-collapsed', 'false');
}
if (this.ready && containerId.length > 0) {
document.querySelectorAll(`#${containerId}`).forEach(function (accordion) {
const allowMultiple = accordion.hasAttribute('data-allow-multiple');
const allowToggle = (allowMultiple) ? allowMultiple : accordion.hasAttribute('data-allow-toggle');
const allowToggle = allowMultiple ? allowMultiple : accordion.hasAttribute('data-allow-toggle');
const triggers = Array.prototype.slice.call(accordion.querySelectorAll('.hy-accordion__button'));
accordion.addEventListener('click', function (event) {
let target = event.target as HTMLTextAreaElement;
const targetElement = target.tagName.toLowerCase();
const possibleTags = [targetElement].some((r) => ['svg', 'path', 'button'].indexOf(r) >= 0);
if (target && target.classList.contains('hy-accordion__button')) {
if (target && possibleTags) {
if (targetElement !== 'button') {
target = target.closest('.hy-accordion__button');
}
let targetParent = target.closest('.hy-accordion__item');
let targetContent = targetParent.querySelectorAll('.hy-accordion__content')[0];
const isExpanded = target.getAttribute('aria-expanded') == 'true';
......@@ -50,24 +58,23 @@ export class AccordionItem {
targetParent.classList.remove('hy-accordion__item__is-open');
}
accordion.querySelector(`#${active.getAttribute('aria-controls')}`).setAttribute('aria-hidden', 'true');
if (!allowToggle) {
active.removeAttribute('aria-disabled');
}
}
if (!isExpanded) {
expandSection(targetContent);
target.setAttribute('aria-expanded', 'true');
targetParent.classList.add('hy-accordion__item__is-open');
accordion.querySelector(`#${target.getAttribute('aria-controls')}`).setAttribute('aria-hidden', 'false');
if (!allowToggle) {
target.setAttribute('aria-disabled', 'true');
}
}
else if (allowToggle && isExpanded) {
} else if (allowToggle && isExpanded) {
target.setAttribute('aria-expanded', 'false');
collapseSection(targetContent);
if (targetParent.classList.contains('hy-accordion__item__is-open')) {
......@@ -75,40 +82,39 @@ export class AccordionItem {
}
accordion.querySelector(`#${target.getAttribute('aria-controls')}`).setAttribute('aria-hidden', 'true');
}
event.preventDefault();
event.stopImmediatePropagation();
}
});
if (accordion) {
accordion.addEventListener('keydown', function (event: KeyboardEvent) {
const target = event.target as HTMLButtonElement;
const key = event.which.toString();
// 33 = Page Up, 34 = Page Down
const ctrlModifier = (event.ctrlKey && key.match(/33|34/));
const ctrlModifier = event.ctrlKey && key.match(/33|34/);
if (target.classList.contains('hy-accordion__button')) {
// Up/ Down arrow and Control + Page Up/ Page Down keyboard operations
// 38 = Up, 40 = Down
if (key.match(/38|40/) || ctrlModifier) {
const index = triggers.indexOf(target);
const direction = (key.match(/34|40/)) ? 1 : -1;
const direction = key.match(/34|40/) ? 1 : -1;
const length = triggers.length;
const newIndex = (index + length + direction) % length;
triggers[newIndex].focus();
event.preventDefault();
}
else if (key.match(/35|36/)) {
} else if (key.match(/35|36/)) {
// 35 = End, 36 = Home keyboard operations
switch (key) {
// Go to first accordion
case '36':
triggers[0].focus();
break;
// Go to last accordion
// Go to last accordion
case '35':
triggers[triggers.length - 1].focus();
break;
......@@ -117,7 +123,7 @@ export class AccordionItem {
}
}
});
accordion.querySelectorAll('.hy-accordion__button').forEach(function (trigger) {
trigger.addEventListener('focus', function () {
trigger.classList.add('focus');
......@@ -130,10 +136,10 @@ export class AccordionItem {
});
}
const classAttributes = ["hy-accordion__item"];
const titleAsId = this.accordiontitle.toLowerCase().replace(/\W/g,'-');
const classAttributes = ['hy-accordion__item'];
const titleAsId = this.accordiontitle.toLowerCase().replace(/\W/g, '-');
return (
<div class={classAttributes.join(" ")}>
<div class={classAttributes.join(' ')}>
<div class="hy-accordion--heading">
<button
aria-expanded="false"
......@@ -142,9 +148,9 @@ export class AccordionItem {
id={`${titleAsId}--title`}
>
<span class="hy-accordion--heading__icon">
<hy-icon icon={'hy-icon-caret-down'} size={16} />
<hy-icon icon={'hy-icon-caret-down'} size={20} />
</span>
{ this.accordiontitle }
{this.accordiontitle}
</button>
</div>
<div
......@@ -152,13 +158,16 @@ export class AccordionItem {
class="hy-accordion__content"
id={`${titleAsId}--content`}
role="region"
aria-hidden="true"
style={{display: 'none'}}
>
<div class="hy-accordion__content--inner-wrapper">
<slot></slot>
</div>
<hy-box pt="1.5" pb="3" pl="2" pr="2">
<div class="hy-accordion__content--inner-wrapper">
<slot></slot>
</div>
</hy-box>
</div>
</div>
);
}
}
src/components/accordion-item/readme.md
+ 4
− 4
View file @ eac22560
......@@ -35,30 +35,30 @@ Accordion component
</hy-accordion-container>
```
<!-- Auto Generated Below -->
## Properties
| Property | Attribute | Description | Type | Default |
| ---------------- | ---------------- | ----------- | -------- | ----------- |
| `accordiontitle` | `accordiontitle` | | `string` | `undefined` |
## Dependencies
### Depends on
- [hy-icon](../icon)
- [hy-box](../hy-box)
### Graph
```mermaid
graph TD;
hy-accordion-item --> hy-icon
hy-accordion-item --> hy-box
style hy-accordion-item fill:#f9f,stroke:#333,stroke-width:4px
```
----------------------------------------------
---
Helsinki University Design System
src/components/grid-container/grid-container.scss
+ 5
− 1
View file @ eac22560
......@@ -21,5 +21,9 @@
width: 100%;
max-width: 75rem;
}
}
@media only screen and (min-width: $overwide) {
width: 100%;
max-width: 90rem;
}
}
src/components/grid-item/grid-item.scss
+ 112
− 36
View file @ eac22560
......@@ -28,6 +28,10 @@
$width: 98%;
$gutter: 2%;
@media only screen and (min-width: $overwide) {
$gutter: 3.5%;
}
$narrow: 30em; // 480px
$medium: 48em; // 768px
$wide: 60em; // 960px
......@@ -47,32 +51,80 @@ $wide: 60em; // 960px
width: $width;
}
.hy-grid__col-1-sm { width:($width / 12) - ($gutter * 11 / 12); }
.hy-grid__col-2-sm { width: ($width / 6) - ($gutter * 10 / 12); }
.hy-grid__col-3-sm { width: ($width / 4) - ($gutter * 9 / 12); }
.hy-grid__col-4-sm { width: ($width / 3) - ($gutter * 8 / 12); }
.hy-grid__col-5-sm { width: ($width / (12 / 5)) - ($gutter * 7 / 12); }
.hy-grid__col-6-sm { width: ($width / 2) - ($gutter * 6 / 12); }
.hy-grid__col-7-sm { width: ($width / (12 / 7)) - ($gutter * 5 / 12); }
.hy-grid__col-8-sm { width: ($width / (12 / 8)) - ($gutter * 4 / 12); }
.hy-grid__col-9-sm { width: ($width / (12 / 9)) - ($gutter * 3 / 12); }
.hy-grid__col-10-sm { width: ($width / (12 / 10)) - ($gutter * 2 / 12); }
.hy-grid__col-11-sm { width: ($width / (12 / 11)) - ($gutter * 1 / 12); }
.hy-grid__col-12-sm { width: $width; }
.hy-grid__col-1-sm {
width: ($width / 12) - ($gutter * 11 / 12);
}
.hy-grid__col-2-sm {
width: ($width / 6) - ($gutter * 10 / 12);
}
.hy-grid__col-3-sm {
width: ($width / 4) - ($gutter * 9 / 12);
}
.hy-grid__col-4-sm {
width: ($width / 3) - ($gutter * 8 / 12);
}
.hy-grid__col-5-sm {
width: ($width / (12 / 5)) - ($gutter * 7 / 12);
}
.hy-grid__col-6-sm {
width: ($width / 2) - ($gutter * 6 / 12);
}
.hy-grid__col-7-sm {
width: ($width / (12 / 7)) - ($gutter * 5 / 12);
}
.hy-grid__col-8-sm {
width: ($width / (12 / 8)) - ($gutter * 4 / 12);
}
.hy-grid__col-9-sm {
width: ($width / (12 / 9)) - ($gutter * 3 / 12);
}
.hy-grid__col-10-sm {
width: ($width / (12 / 10)) - ($gutter * 2 / 12);
}
.hy-grid__col-11-sm {
width: ($width / (12 / 11)) - ($gutter * 1 / 12);
}
.hy-grid__col-12-sm {
width: $width;
}
@media only screen and (min-width: $medium) {
.hy-grid__col-1 { width:($width / 12) - ($gutter * 11 / 12); }
.hy-grid__col-2 { width: ($width / 6) - ($gutter * 10 / 12); }
.hy-grid__col-3 { width: ($width / 4) - ($gutter * 9 / 12); }
.hy-grid__col-4 { width: ($width / 3) - ($gutter * 8 / 12); }
.hy-grid__col-5 { width: ($width / (12 / 5)) - ($gutter * 7 / 12); }
.hy-grid__col-6 { width: ($width / 2) - ($gutter * 6 / 12); }
.hy-grid__col-7 { width: ($width / (12 / 7)) - ($gutter * 5 / 12); }
.hy-grid__col-8 { width: ($width / (12 / 8)) - ($gutter * 4 / 12); }
.hy-grid__col-9 { width: ($width / (12 / 9)) - ($gutter * 3 / 12); }
.hy-grid__col-10 { width: ($width / (12 / 10)) - ($gutter * 2 / 12); }
.hy-grid__col-11 { width: ($width / (12 / 11)) - ($gutter * 1 / 12); }
.hy-grid__col-12 { width: $width; }
.hy-grid__col-1 {
width: ($width / 12) - ($gutter * 11 / 12);
}
.hy-grid__col-2 {
width: ($width / 6) - ($gutter * 10 / 12);
}
.hy-grid__col-3 {
width: ($width / 4) - ($gutter * 9 / 12);
}
.hy-grid__col-4 {
width: ($width / 3) - ($gutter * 8 / 12);
}
.hy-grid__col-5 {
width: ($width / (12 / 5)) - ($gutter * 7 / 12);
}
.hy-grid__col-6 {
width: ($width / 2) - ($gutter * 6 / 12);
}
.hy-grid__col-7 {
width: ($width / (12 / 7)) - ($gutter * 5 / 12);
}
.hy-grid__col-8 {
width: ($width / (12 / 8)) - ($gutter * 4 / 12);
}
.hy-grid__col-9 {
width: ($width / (12 / 9)) - ($gutter * 3 / 12);
}
.hy-grid__col-10 {
width: ($width / (12 / 10)) - ($gutter * 2 / 12);
}
.hy-grid__col-11 {
width: ($width / (12 / 11)) - ($gutter * 1 / 12);
}
.hy-grid__col-12 {
width: $width;
}
.hidden-sm {
display: block;
......@@ -80,16 +132,40 @@ $wide: 60em; // 960px
}
@media only screen and (min-width: $wide) {
.hy-grid__col-1-lg { width:($width / 12) - ($gutter * 11 / 12); }
.hy-grid__col-2-lg { width: ($width / 6) - ($gutter * 10 / 12); }
.hy-grid__col-3-lg { width: ($width / 4) - ($gutter * 9 / 12); }
.hy-grid__col-4-lg { width: ($width / 3) - ($gutter * 8 / 12); }
.hy-grid__col-5-lg { width: ($width / (12 / 5)) - ($gutter * 7 / 12); }
.hy-grid__col-6-lg { width: ($width / 2) - ($gutter * 6 / 12); }
.hy-grid__col-7-lg { width: ($width / (12 / 7)) - ($gutter * 5 / 12); }
.hy-grid__col-8-lg { width: ($width / (12 / 8)) - ($gutter * 4 / 12); }
.hy-grid__col-9-lg { width: ($width / (12 / 9)) - ($gutter * 3 / 12); }
.hy-grid__col-10-lg { width: ($width / (12 / 10)) - ($gutter * 2 / 12); }
.hy-grid__col-11-lg { width: ($width / (12 / 11)) - ($gutter * 1 / 12); }
.hy-grid__col-12-lg { width: $width; }
.hy-grid__col-1-lg {
width: ($width / 12) - ($gutter * 11 / 12);
}
.hy-grid__col-2-lg {
width: ($width / 6) - ($gutter * 10 / 12);
}
.hy-grid__col-3-lg {
width: ($width / 4) - ($gutter * 9 / 12);
}
.hy-grid__col-4-lg {
width: ($width / 3) - ($gutter * 8 / 12);
}
.hy-grid__col-5-lg {
width: ($width / (12 / 5)) - ($gutter * 7 / 12);
}
.hy-grid__col-6-lg {
width: ($width / 2) - ($gutter * 6 / 12);
}
.hy-grid__col-7-lg {
width: ($width / (12 / 7)) - ($gutter * 5 / 12);
}
.hy-grid__col-8-lg {
width: ($width / (12 / 8)) - ($gutter * 4 / 12);
}
.hy-grid__col-9-lg {
width: ($width / (12 / 9)) - ($gutter * 3 / 12);
}
.hy-grid__col-10-lg {
width: ($width / (12 / 10)) - ($gutter * 2 / 12);
}
.hy-grid__col-11-lg {
width: ($width / (12 / 11)) - ($gutter * 1 / 12);
}
.hy-grid__col-12-lg {
width: $width;
}
}
src/components/hy-box/readme.md
+ 2
− 0
View file @ eac22560
......@@ -21,12 +21,14 @@
### Used by
- [hy-accordion-item](../accordion-item)
- [hy-banner](../hy-banner)
### Graph
```mermaid
graph TD;
hy-accordion-item --> hy-box
hy-banner --> hy-box
style hy-box fill:#f9f,stroke:#333,stroke-width:4px
```
......
src/global/_breakpoints.scss
+ 6
− 6
View file @ eac22560
......@@ -2,14 +2,14 @@
--breakpoint-narrow: 30rem; // 480px
--breakpoint-medium: 768px; // 768px
--breakpoint-wide: 60rem; // 960px
--breakpoint-extrawide: 75rem; // 1200px
--breakpoint-max-width: 75rem;
--breakpoint-overwide: 80rem;
--breakpoint-extrawide: 80rem; // 1280px
--breakpoint-max-width: 80rem;
--breakpoint-overwide: 90rem; // 1440px
}
$narrow: 30em; // 480px
$medium: 48em; // 768px
$wide: 60em; // 960px
$extrawide: 76em; // 1216px
$max-width: $extrawide;
$overwide: 80em;
$extrawide: 80em; // 1280px
$overwide: 90em; // 1440px
$max-width: $overwide;
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