From 3d75decd8519b16a8786ba25440c95a3b36514d5 Mon Sep 17 00:00:00 2001
From: Ekaterina Kondareva <ekaterina.kondareva@helsinki.fi>
Date: Mon, 21 Dec 2020 12:00:31 +0200
Subject: [PATCH] Nxstage x sprint32 fixes
---
.../accordion-item/accordion-item.scss | 9 +-
.../accordion-item/accordion-item.tsx | 4 +-
src/components/hy-checkbox/hy-checkbox.scss | 5 +-
.../hy-person-card/hy-person-card.scss | 4 +
.../hy-person-card/hy-person-card.tsx | 8 +-
.../hy-pager-item/hy-pager-item.scss | 19 ++-
.../pagination/hy-pager/hy-pager.scss | 1 +
src/index.html | 160 ++++++++++++++----
8 files changed, 164 insertions(+), 46 deletions(-)
diff --git a/src/components/accordion-item/accordion-item.scss b/src/components/accordion-item/accordion-item.scss
index ddeb1f52..1a5a0c9b 100644
--- a/src/components/accordion-item/accordion-item.scss
+++ b/src/components/accordion-item/accordion-item.scss
@@ -69,9 +69,10 @@
text-decoration: none;
}
}
+
.hy-accordion__button {
@include font-size(22px, 28px);
- align-items: center;
+ align-items: flex-start;
border: none;
background-color: var(--grayscale-background-box);
color: var(--brand-main-nearly-black);
@@ -99,14 +100,20 @@
&[aria-expanded='true'] {
background: none;
}
+
+ span {
+ text-align: left;
+ }
}
.hy-accordion--heading__icon {
margin-right: 0.5rem;
+ margin-top: 4px;
z-index: 0;
@include breakpoint($narrow) {
margin-right: 1rem;
+ margin-top: 6px;
}
svg {
diff --git a/src/components/accordion-item/accordion-item.tsx b/src/components/accordion-item/accordion-item.tsx
index 22760115..3b3360c0 100644
--- a/src/components/accordion-item/accordion-item.tsx
+++ b/src/components/accordion-item/accordion-item.tsx
@@ -83,7 +83,7 @@ export class AccordionItem {
let target = event.target as HTMLTextAreaElement;
const targetElement = target.tagName.toLowerCase();
- const possibleTags = [targetElement].some((r) => ['svg', 'path', 'button', 'a'].indexOf(r) >= 0);
+ const possibleTags = [targetElement].some((r) => ['svg', 'span', 'path', 'button', 'a'].indexOf(r) >= 0);
let accordion = document.querySelectorAll(`#${containerId}`)[0];
const allowMultiple = accordion.hasAttribute('data-allow-multiple');
@@ -211,7 +211,7 @@ export class AccordionItem {
<span class="hy-accordion--heading__icon">
<hy-icon icon={'hy-icon-caret-down'} size={20} />
</span>
- {this.accordiontitle}
+ <span>{this.accordiontitle}</span>
</button>
</a>
</div>
diff --git a/src/components/hy-checkbox/hy-checkbox.scss b/src/components/hy-checkbox/hy-checkbox.scss
index 5af23e8a..726cb170 100644
--- a/src/components/hy-checkbox/hy-checkbox.scss
+++ b/src/components/hy-checkbox/hy-checkbox.scss
@@ -10,6 +10,8 @@
border-width: 2px;
height: 20px;
margin-right: 6px;
+ min-width: 20px;
+ min-height: 20px;
position: relative;
width: 20px;
@@ -39,9 +41,10 @@
display: inline-flex;
font-family: var(--main-font-family);
letter-spacing: -0.4px;
+ text-align: left;
@include breakpoint($narrow) {
- @include font-size(16px, 24px);
+ @include font-size(16px, 20px);
}
}
diff --git a/src/components/hy-person-card/hy-person-card.scss b/src/components/hy-person-card/hy-person-card.scss
index fabd0b77..08f7423f 100644
--- a/src/components/hy-person-card/hy-person-card.scss
+++ b/src/components/hy-person-card/hy-person-card.scss
@@ -145,6 +145,10 @@
letter-spacing: -0.56px;
margin-bottom: 8px;
}
+
+ &__search-panel {
+ @include font-weight($regular);
+ }
}
&__department {
diff --git a/src/components/hy-person-card/hy-person-card.tsx b/src/components/hy-person-card/hy-person-card.tsx
index 06c191ef..6b15636f 100644
--- a/src/components/hy-person-card/hy-person-card.tsx
+++ b/src/components/hy-person-card/hy-person-card.tsx
@@ -39,6 +39,10 @@ export class HyPersonCard {
render() {
const classLinkAttributes = ['hy-person-card-container__link', this.variant].join(' ');
const classAttributes = ['hy-person-card', this.variant].join(' ');
+ const classPositionTitle = [
+ 'hy-person-card__info-container__position-title',
+ `hy-person-card__info-container__position-title__${this.variant}`,
+ ].join(' ');
const target = this.isExternal ? '_blank' : '_self';
return (
@@ -61,9 +65,7 @@ export class HyPersonCard {
</div>
<div class="hy-person-card__info-container">
<div class="hy-person-card__info-container__full-name">{this._fullName}</div>
- {this.positionTitle && (
- <div class="hy-person-card__info-container__position-title">{this.positionTitle}</div>
- )}
+ {this.positionTitle && <div class={classPositionTitle}>{this.positionTitle}</div>}
{this.department && this.variant == PersonCardVariants.default && (
<div class="hy-person-card__info-container__department">{this.department}</div>
)}
diff --git a/src/components/pagination/hy-pager-item/hy-pager-item.scss b/src/components/pagination/hy-pager-item/hy-pager-item.scss
index cbc95921..998d5c76 100644
--- a/src/components/pagination/hy-pager-item/hy-pager-item.scss
+++ b/src/components/pagination/hy-pager-item/hy-pager-item.scss
@@ -14,7 +14,7 @@
justify-content: center;
letter-spacing: -0.4px;
margin-bottom: 4px;
- margin-right: 8px;
+ margin-right: 4px;
min-height: 36px;
min-width: 36px;
text-align: center;
@@ -44,6 +44,10 @@
min-height: 40px;
min-width: 40px;
}
+
+ &:hover {
+ background-color: var(--brand-main);
+ }
}
&__current {
@@ -52,14 +56,19 @@
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;
+ &:hover {
+ background-color: var(--grayscale-white);
}
}
}
+ &__ellipsis {
+ background-color: var(--grayscale-white);
+ color: var(--brand-main-nearly-black);
+ min-width: auto;
+ min-height: auto;
+ }
+
&__next,
&__previous {
a {
diff --git a/src/components/pagination/hy-pager/hy-pager.scss b/src/components/pagination/hy-pager/hy-pager.scss
index 93bd7b5d..0df206eb 100644
--- a/src/components/pagination/hy-pager/hy-pager.scss
+++ b/src/components/pagination/hy-pager/hy-pager.scss
@@ -10,4 +10,5 @@
flex-wrap: wrap;
font-family: var(--main-font-family);
list-style: none;
+ padding: 0;
}
diff --git a/src/index.html b/src/index.html
index c422381d..4e94bc6d 100644
--- a/src/index.html
+++ b/src/index.html
@@ -178,40 +178,99 @@
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-main-content-wrapper>
+ <hy-accordion-container accordionId="example-mini-accordion-tabs">
+ <hy-accordion-item accordiontitle="This is an H4 accordion title inside an accordion" variant="mini">
+ <hy-paragraph-text>Mini Accordion content</hy-paragraph-text>
+ </hy-accordion-item>
+ <hy-accordion-item accordiontitle="Here you can see another one" variant="mini">
+ <hy-paragraph-text>Mini Accordion content</hy-paragraph-text>
+ </hy-accordion-item>
+ <hy-accordion-item accordiontitle="One of them is opened for us to see" variant="mini">
+ <hy-paragraph-text
+ >n pulvinar eleifend convallis. Suspendisse elit erat, venenatis eget ullamcorper ut, laoreet iaculis
+ nisl. Sed porta, felis id rhoncus aliquet, quam ipsum pellentesque metus, in sodales quam nunc vitae
+ risus. Quisque in venenatis massa. Phasellus neque risus, ornare quis nisl ultricies, ullamcorper
+ consectetur orci. Suspendisse rhoncus orci odio, id faucibus ipsum tincidunt nec. Ut eget ante sit amet
+ justo volutpat convallis vitae et augue. Phasellus sagittis cursus fermentum.</hy-paragraph-text
+ >
+ </hy-accordion-item>
+ <hy-accordion-item accordiontitle="The last similar thing down under" variant="mini">
+ <hy-paragraph-text>Mini Accordion content</hy-paragraph-text>
+ </hy-accordion-item>
+ </hy-accordion-container>
+
+ <hy-accordion-container accordionId="example-accordion">
+ <hy-accordion-item accordiontitle="This is a accordion item 1 Very long title expanded on the second line">
+ <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>
+
+ <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
+ item-label="5"
+ item-url="https://helsinki.fi/sv/utbildning/program?page=3"
+ sc-aria-label="Go to page 4"
+ >
+ </hy-pager-item>
+ <hy-pager-item
+ item-label="6"
+ item-url="https://helsinki.fi/sv/utbildning/program?page=3"
+ sc-aria-label="Go to page 4"
+ >
+ </hy-pager-item>
+ <hy-pager-item
+ item-label="7"
+ item-url="https://helsinki.fi/sv/utbildning/program?page=3"
+ sc-aria-label="Go to page 4"
+ >
+ </hy-pager-item>
+ <hy-pager-item
+ item-label="8"
+ 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-main-content-wrapper>
<hy-paragraph-text>
THIS IS MAIN CONTENT
@@ -220,6 +279,22 @@
<hy-box pt="2" pb="2" align="center">
<hy-checkbox checkbox-id="1" checkbox-value="checkbox_1" checkbox-label="Introduction course"></hy-checkbox>
<hy-checkbox checkbox-id="2" checkbox-value="checkbox_2" checkbox-label="Open online course"></hy-checkbox>
+ <hy-checkbox checkbox-id="3" checkbox-value="checkbox_3" checkbox-label="Flexible start"></hy-checkbox>
+ <hy-checkbox
+ checkbox-id="4"
+ checkbox-value="checkbox_4"
+ checkbox-label="Introduction course long text"
+ ></hy-checkbox>
+ <hy-checkbox
+ checkbox-id="5"
+ checkbox-value="checkbox_5"
+ checkbox-label="Open online course very long text"
+ ></hy-checkbox>
+ <hy-checkbox
+ checkbox-id="6"
+ checkbox-value="checkbox_6"
+ checkbox-label="Flexible start long text"
+ ></hy-checkbox>
</hy-box>
<hy-row>
<hy-checkbox
@@ -242,6 +317,23 @@
></hy-checkbox>
</hy-row>
+ <hy-dropdown
+ dropdown-label="Dropdown 1"
+ dropdown-options='[
+ {"id": "1", "label": "Exam 1", "value": "exam_1"},
+ {"id": "2", "label": "Exam 2", "value": "exam_2"},
+ {"id": "3", "label": "Exam 3", "value": "exam_3"}
+ ]'
+ ></hy-dropdown>
+ <hy-dropdown
+ dropdown-label="Dropdown 2"
+ dropdown-options='[
+ {"id": "1", "label": "Exam 1", "value": "exam_1"},
+ {"id": "2", "label": "Exam 2", "value": "exam_2"},
+ {"id": "3", "label": "Exam 3", "value": "exam_3"}
+ ]'
+ ></hy-dropdown>
+
<hy-list-item
item-type="News | 20.12.2020"
item-title="Lorem ipsum dolor sit amet, consectetur adipiscing elit cras dapibus vulputate diam eu pretium"
--
GitLab