Skip to content
Snippets Groups Projects
Commit febbeb7e authored by Tuukka Turu's avatar Tuukka Turu
Browse files

Merge branch 'NXSTAGE-1912-news' into 'development' 

Nxstage 1912 news

See merge request julkiset-sivut/design-system-lib!193
parents cb9d6317 bb0f9bb2
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 138 additions and 38 deletions
src/components.d.ts
+ 6
− 0
View file @ febbeb7e
......@@ -438,12 +438,15 @@ export namespace Components {
interface HyGeneralList {
blank: boolean;
dataItems: ListItemValue[] | string;
truncateDescription: boolean;
truncateLimit: number;
type: GeneralListTypes;
}
interface HyGeneralListItem {
date: string;
description?: string;
disableLazy: boolean;
hasSidebar: boolean;
imageAlt: string;
imageUrl: string;
itemTitle?: string;
......@@ -1891,12 +1894,15 @@ declare namespace LocalJSX {
interface HyGeneralList {
blank?: boolean;
dataItems?: ListItemValue[] | string;
truncateDescription?: boolean;
truncateLimit?: number;
type?: GeneralListTypes;
}
interface HyGeneralListItem {
date?: string;
description?: string;
disableLazy?: boolean;
hasSidebar?: boolean;
imageAlt?: string;
imageUrl?: string;
itemTitle?: string;
......
src/components/hy-box/readme.md
+ 2
− 0
View file @ febbeb7e
......@@ -30,6 +30,7 @@
- [hy-accordion-container](../accordion-container)
- [hy-adjacent-image-text](../adjacent-image-text)
- [hy-banner](../hy-banner)
- [hy-general-list](../hy-general-list)
- [hy-hero](../hy-hero)
- [hy-image](../image)
- [hy-introduction](../hy-introduction)
......@@ -49,6 +50,7 @@ graph TD;
hy-accordion-container --> hy-box
hy-adjacent-image-text --> hy-box
hy-banner --> hy-box
hy-general-list --> hy-box
hy-hero --> hy-box
hy-image --> hy-box
hy-introduction --> hy-box
......
src/components/hy-general-list-item/hy-general-list-item.scss
+ 32
− 2
View file @ febbeb7e
:host {
display: block;
height: 100%;
}
.hy-general-list-item {
font-family: var(--main-font-family);
margin-bottom: 1rem;
height: 100%;
&--style-grid {
.hy-general-list-item__link {
height: 100%;
@include breakpoint($narrow) {
flex-direction: column;
}
......@@ -98,9 +102,20 @@
max-width: 23.03%;
}
&:before {
content: '';
display: block;
padding-top: var(--aspectRatio);
}
img {
bottom: 0;
height: 100%;
left: 0;
object-fit: cover;
position: absolute;
right: 0;
top: 0;
width: 100%;
}
}
......@@ -175,24 +190,39 @@
margin-bottom: 8px;
margin-top: 0;
@include breakpoint($extrawide) {
@include breakpoint($xlarge) {
@include font-size(20px, 24px);
letter-spacing: -0.5px;
}
&__large {
@include breakpoint($extrawide) {
@include font-size(20px, 24px);
letter-spacing: -0.5px;
}
}
}
.hy-general-list-item__description {
@include font-size(15px, 20px);
color: var(--grayscale-dark);
display: none;
letter-spacing: -0.09px;
margin: 0;
@include breakpoint($narrow) {
@include font-size(14px, 18px);
display: block;
letter-spacing: -0.08px;
}
@include breakpoint($extrawide) {
@include breakpoint($xlarge) {
@include font-size(14px, 20px);
}
&__large {
@include breakpoint($extrawide) {
@include font-size(14px, 20px);
}
}
}
src/components/hy-general-list-item/hy-general-list-item.tsx
+ 13
− 3
View file @ febbeb7e
......@@ -6,6 +6,7 @@ import {Component, Element, h, Prop} from '@stencil/core';
shadow: true,
})
export class HyGeneralListItem {
@Prop() hasSidebar: boolean = true;
@Prop() description?: string;
@Prop() imageAlt: string = '';
@Prop() imageUrl: string = null;
......@@ -27,6 +28,15 @@ export class HyGeneralListItem {
const contentClassAttributes = ['hy-general-list-item__text-container'].join(' ');
const imageClassAttributes = ['hy-general-list-item__image-container'].join(' ');
const sidebarClass = this.hasSidebar ? 'common' : 'large';
const titleClassAttributes = ['hy-general-list-item__title', `hy-general-list-item__title__${sidebarClass}`].join(
' '
);
const descriptionClassAttributes = [
'hy-general-list-item__description',
`hy-general-list-item__description__${sidebarClass}`,
].join(' ');
const aspectRatioWidth = 16;
const aspectRatioHeight = 10;
const aspect = (aspectRatioHeight / aspectRatioWidth) * 100;
......@@ -39,7 +49,7 @@ export class HyGeneralListItem {
<a class="hy-general-list-item__link" href={this.url} target={this.target ? '_blank' : '_self'}>
{this.type && (
<div class="hy-general-list-item__type">
<span class="hy-general-list-item__type__major">{this.type}</span>
<span class="hy-general-list-item__type__major">{this.label}</span>
<span class="hy-general-list-item__type__sub">{this.subLabel}</span>
</div>
)}
......@@ -58,8 +68,8 @@ export class HyGeneralListItem {
<span class="hy-genenral-list-item__meta__date">| {this.date}</span>
</span>
)}
<h3 class="hy-general-list-item__title">{this.itemTitle}</h3>
<p class="hy-general-list-item__description">{this.description}</p>
<h3 class={titleClassAttributes}>{this.itemTitle}</h3>
<p class={descriptionClassAttributes}>{this.description}</p>
</div>
</a>
</article>
......
src/components/hy-general-list-item/readme.md
+ 1
− 0
View file @ febbeb7e
......@@ -9,6 +9,7 @@
| `date` | `date` | | `string` | `''` |
| `description` | `description` | | `string` | `undefined` |
| `disableLazy` | `disable-lazy` | | `boolean` | `false` |
| `hasSidebar` | `has-sidebar` | | `boolean` | `true` |
| `imageAlt` | `image-alt` | | `string` | `''` |
| `imageUrl` | `image-url` | | `string` | `null` |
| `itemTitle` | `item-title` | | `string` | `undefined` |
......
src/components/hy-general-list/hy-general-list.scss
+ 24
− 3
View file @ febbeb7e
......@@ -11,7 +11,7 @@
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: space-between;
justify-content: flex-start;
gap: 22px;
@include breakpoint($narrow) {
......@@ -23,10 +23,11 @@
}
li {
background-color: var(--grayscale-background-box);
width: 100%;
height: 100%;
height: auto;
@include breakpoint($medium) {
@include breakpoint($narrow) {
width: calc(100% / 2 - 22px);
}
......@@ -35,4 +36,24 @@
}
}
}
&--with-sidebar {
&.hy-general-list--style-grid {
gap: 22px;
@include breakpoint($narrow) {
gap: 24px;
}
li {
@include breakpoint($narrow) {
width: calc(100% / 2 - 24px);
}
@include breakpoint($wide) {
width: calc(100% / 3 - 24px);
}
}
}
}
}
src/components/hy-general-list/hy-general-list.tsx
+ 50
− 25
View file @ febbeb7e
......@@ -13,7 +13,7 @@ export interface ListItemValue {
target: boolean;
}
import {Component, Element, h, Prop, Watch} from '@stencil/core';
import {Component, Element, h, Prop, State, Watch, Host} from '@stencil/core';
import {GeneralListTypes} from '../../utils/utils';
@Component({
......@@ -25,8 +25,11 @@ export class HyGeneralList {
@Prop() type: GeneralListTypes = GeneralListTypes.list;
@Prop() blank: boolean = true;
@Prop() dataItems: ListItemValue[] | string;
@Prop() truncateDescription: boolean = true;
@Prop() truncateLimit: number = 140;
private _dataItems: ListItemValue[];
@Element() el: HTMLElement;
@State() hasSidebar: boolean = false;
@Watch('dataItems')
arrayDataWatcher(newValue: ListItemValue[] | string) {
......@@ -39,39 +42,61 @@ export class HyGeneralList {
componentWillLoad() {
this.arrayDataWatcher(this.dataItems);
const hyMainDiv = this.el.closest('.hy-main');
if (hyMainDiv) {
if (hyMainDiv.classList.contains('with-sidebar')) {
this.hasSidebar = true;
}
}
}
render() {
const classAttributes = ['hy-general-list', `hy-general-list--style-${this.type}`].join(' ');
const classAttributes = [
'hy-general-list',
this.hasSidebar ? 'hy-general-list--with-sidebar' : '',
`hy-general-list--style-${this.type}`,
].join(' ');
let listData = this._dataItems;
if (typeof this._dataItems === 'object') {
listData = Object.values(this._dataItems);
}
function truncate(str, n) {
return str.length > n ? str.substr(0, n - 1) + '...' : str;
}
return (
<ul class={classAttributes}>
{listData &&
listData.map((item) => (
<li>
<hy-general-list-item
target={this.blank}
data-location={item.url}
description={item.description}
id={item.id}
imageAlt={item.imageAlt}
imageUrl={item.imageUrl}
item-title={item.title}
label={item.label}
sub-label={item.subLabel}
tag={item.tag}
date={item.date}
type={item.type}
url={item.url}
list-style={this.type}
></hy-general-list-item>
</li>
))}
</ul>
<Host>
<ul class={classAttributes}>
{listData &&
listData.map((item) => (
<li>
<hy-general-list-item
has-sidebar={this.hasSidebar}
target={this.blank}
data-location={item.url}
description={
this.truncateDescription ? truncate(item.description, this.truncateLimit) : item.description
}
id={item.id}
imageAlt={item.imageAlt}
imageUrl={item.imageUrl}
item-title={item.title}
label={item.label}
sub-label={item.subLabel}
tag={item.tag}
date={item.date}
type={item.type}
url={item.url}
list-style={this.type}
></hy-general-list-item>
</li>
))}
</ul>
<hy-box mb="1.75, 1.75, 2, 2.5" />
</Host>
);
}
}
src/components/hy-general-list/readme.md
+ 9
− 5
View file @ febbeb7e
......@@ -4,23 +4,27 @@
## Properties
| Property | Attribute | Description | Type | Default |
| ----------- | ------------ | ----------- | ------------------------------------------------ | ----------------------- |
| `blank` | `blank` | | `boolean` | `true` |
| `dataItems` | `data-items` | | `ListItemValue[] \| string` | `undefined` |
| `type` | `type` | | `GeneralListTypes.grid \| GeneralListTypes.list` | `GeneralListTypes.list` |
| Property | Attribute | Description | Type | Default |
| --------------------- | ---------------------- | ----------- | ------------------------------------------------ | ----------------------- |
| `blank` | `blank` | | `boolean` | `true` |
| `dataItems` | `data-items` | | `ListItemValue[] \| string` | `undefined` |
| `truncateDescription` | `truncate-description` | | `boolean` | `true` |
| `truncateLimit` | `truncate-limit` | | `number` | `140` |
| `type` | `type` | | `GeneralListTypes.grid \| GeneralListTypes.list` | `GeneralListTypes.list` |
## Dependencies
### Depends on
- [hy-general-list-item](../hy-general-list-item)
- [hy-box](../hy-box)
### Graph
```mermaid
graph TD;
hy-general-list --> hy-general-list-item
hy-general-list --> hy-box
style hy-general-list fill:#f9f,stroke:#333,stroke-width:4px
```
......
stencil.config.ts
+ 1
− 0
View file @ febbeb7e
......@@ -27,6 +27,7 @@ export const config: Config = {
reactOutputTarget({
componentCorePackage: '@itcenteratunihelsinki/huds-lib',
proxiesFile: '../react-huds-wrapper/src/components.ts',
includeDefineCustomElements: true,
}),
{
type: 'dist',
......
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