Skip to content
Snippets Groups Projects
Commit 3d75decd authored by Ekaterina Kondareva's avatar Ekaterina Kondareva Committed by Tuukka Turu
Browse files

Nxstage x sprint32 fixes

parent 0d2ec600
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 164 additions and 46 deletions
src/components/accordion-item/accordion-item.scss
+ 8
− 1
View file @ 3d75decd
......@@ -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 {
......
src/components/accordion-item/accordion-item.tsx
+ 2
− 2
View file @ 3d75decd
......@@ -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>
......
src/components/hy-checkbox/hy-checkbox.scss
+ 4
− 1
View file @ 3d75decd
......@@ -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);
}
}
......
src/components/hy-person-card/hy-person-card.scss
+ 4
− 0
View file @ 3d75decd
......@@ -145,6 +145,10 @@
letter-spacing: -0.56px;
margin-bottom: 8px;
}
&__search-panel {
@include font-weight($regular);
}
}
&__department {
......
src/components/hy-person-card/hy-person-card.tsx
+ 5
− 3
View file @ 3d75decd
......@@ -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>
)}
......
src/components/pagination/hy-pager-item/hy-pager-item.scss
+ 14
− 5
View file @ 3d75decd
......@@ -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 {
......
src/components/pagination/hy-pager/hy-pager.scss
+ 1
− 0
View file @ 3d75decd
......@@ -10,4 +10,5 @@
flex-wrap: wrap;
font-family: var(--main-font-family);
list-style: none;
padding: 0;
}
src/index.html
+ 126
− 34
View file @ 3d75decd
......@@ -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"
......
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