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

style changes in process-flow desktop

parent 78509809
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 155 additions and 140 deletions
src/components.d.ts
+ 2
− 10
View file @ 717a7ad0
......@@ -196,10 +196,10 @@ export namespace Components {
textTitle?: string;
url?: string;
}
interface HyModeToggler {}
interface HyParagraphText {}
interface HyProcess {
dataItems: ProcessFlowBoxValue[] | string;
numberTerm: string;
variant: ProcessFlowBoxVariants;
}
interface HyProcessFlowBox {
......@@ -336,11 +336,6 @@ declare global {
prototype: HTMLHyLinkBoxElement;
new (): HTMLHyLinkBoxElement;
};
interface HTMLHyModeTogglerElement extends Components.HyModeToggler, HTMLStencilElement {}
var HTMLHyModeTogglerElement: {
prototype: HTMLHyModeTogglerElement;
new (): HTMLHyModeTogglerElement;
};
interface HTMLHyParagraphTextElement extends Components.HyParagraphText, HTMLStencilElement {}
var HTMLHyParagraphTextElement: {
prototype: HTMLHyParagraphTextElement;
......@@ -397,7 +392,6 @@ declare global {
'hy-ingress': HTMLHyIngressElement;
'hy-link': HTMLHyLinkElement;
'hy-link-box': HTMLHyLinkBoxElement;
'hy-mode-toggler': HTMLHyModeTogglerElement;
'hy-paragraph-text': HTMLHyParagraphTextElement;
'hy-process': HTMLHyProcessElement;
'hy-process-flow-box': HTMLHyProcessFlowBoxElement;
......@@ -585,10 +579,10 @@ declare namespace LocalJSX {
textTitle?: string;
url?: string;
}
interface HyModeToggler {}
interface HyParagraphText {}
interface HyProcess {
dataItems?: ProcessFlowBoxValue[] | string;
numberTerm?: string;
variant?: ProcessFlowBoxVariants;
}
interface HyProcessFlowBox {
......@@ -644,7 +638,6 @@ declare namespace LocalJSX {
'hy-ingress': HyIngress;
'hy-link': HyLink;
'hy-link-box': HyLinkBox;
'hy-mode-toggler': HyModeToggler;
'hy-paragraph-text': HyParagraphText;
'hy-process': HyProcess;
'hy-process-flow-box': HyProcessFlowBox;
......@@ -679,7 +672,6 @@ declare module '@stencil/core' {
'hy-ingress': LocalJSX.HyIngress & JSXBase.HTMLAttributes<HTMLHyIngressElement>;
'hy-link': LocalJSX.HyLink & JSXBase.HTMLAttributes<HTMLHyLinkElement>;
'hy-link-box': LocalJSX.HyLinkBox & JSXBase.HTMLAttributes<HTMLHyLinkBoxElement>;
'hy-mode-toggler': LocalJSX.HyModeToggler & JSXBase.HTMLAttributes<HTMLHyModeTogglerElement>;
'hy-paragraph-text': LocalJSX.HyParagraphText & JSXBase.HTMLAttributes<HTMLHyParagraphTextElement>;
'hy-process': LocalJSX.HyProcess & JSXBase.HTMLAttributes<HTMLHyProcessElement>;
'hy-process-flow-box': LocalJSX.HyProcessFlowBox & JSXBase.HTMLAttributes<HTMLHyProcessFlowBoxElement>;
......
src/components/process-flow-box/process-flow-box.scss
+ 67
− 67
View file @ 717a7ad0
......@@ -6,99 +6,80 @@
height: calc(100% - 32px);
position: relative;
.step {
top: -35px;
&__step__container {
bottom: unset;
display: grid;
height: 82px;
place-items: center;
position: absolute;
top: -35px;
width: 138px;
z-index: 1;
@include breakpoint($medium) {
top: unset;
bottom: -68px;
bottom: -62px;
display: grid;
height: 72px;
width: 200px;
height: 60px;
top: unset;
width: 210px;
}
svg polygon {
fill: white;
stroke: var(--brand-main);
stroke-width: 1;
fill: var(--grayscale-background-arrow);
}
svg.mobile {
display: block;
@include breakpoint($medium) {
display: none;
}
}
svg.desktop {
display: none;
@include breakpoint($medium) {
display: block;
}
}
}
/*
.first.step {
.first.even.hy-process-flow-box__step__container {
left: calc(50% - 69px + 16px);
@include breakpoint($medium) {
left: unset;
}
@include breakpoint($wide) {
left: 0;
}
}
:not(.first).step {
left: calc(50% - 69px + 16px);
@include breakpoint($medium) {
left: unset;
}
@include breakpoint($wide) {
left: -90px;
}
}
*/
.first.even.step {
left: calc(50% - 69px + 16px);
@include breakpoint($medium) {
left: -90px;
}
@include breakpoint($wide) {
left: 0;
}
}
.first.odd.step {
.first.odd.hy-process-flow-box__step__container {
left: calc(50% - 69px + 16px);
@include breakpoint($medium) {
left: 0;
}
@include breakpoint($wide) {
left: 0;
}
}
:not(.first).even.step {
:not(.first).even.hy-process-flow-box__step__container {
left: calc(50% - 69px + 16px);
@include breakpoint($medium) {
left: -90px;
}
@include breakpoint($wide) {
left: -90px;
}
}
:not(.first).odd.step {
:not(.first).odd.hy-process-flow-box__step__container {
left: calc(50% - 69px + 16px);
@include breakpoint($medium) {
left: 0;
}
@include breakpoint($wide) {
left: -90px;
}
......@@ -107,7 +88,7 @@
&__step {
background-color: transparent;
color: var(--grayscale-black);
font-family: "Open Sans";
font-family: var(--main-font-family);
font-size: 16px;
font-weight: 600;
letter-spacing: 0;
......@@ -116,13 +97,15 @@
position: absolute;
text-align: center;
z-index: 11;
@include breakpoint($medium) {
padding: 13px 40px 13px 23px;
text-align: left;
left: 0;
max-width: 175px;
padding: 8px 23px 8px 14px;
}
}
.number {
&__number__container {
display: grid;
height: 64px;
place-items: center;
......@@ -130,68 +113,85 @@
width: 64px;
z-index: 2;
}
&__number {
margin: 0;
padding: 0;
background-color: white;
border: 3px solid var(--brand-main);
border-radius: 50%;
color: var(--brand-main);
background-color: var(--brand-main-light);
color: var(--grayscale-white);
display: grid;
height: 54px;
font-family: "Open Sans";
font-family: var(--main-font-family);
font-size: 36px;
font-weight: 600;
height: 48px;
letter-spacing: 0;
line-height: 49px;
margin: 0;
padding: 0;
place-items: center;
position: relative;
width: 54px;
width: 48px;
&::after {
border-radius: 50%;
border: 3px solid white;
content: "";
height: 54px;
content: '';
height: 48px;
left: -6px;
position: absolute;
width: 54px;
width: 48px;
}
}
.content.small {
&__content.small {
padding: 16px 32px;
padding-bottom: 64px;
@include breakpoint($wide) {
padding: 16px;
padding: 20px;
padding-bottom: 64px;
}
}
.content.big {
padding: 16px 32px;
&__content.big {
padding: 24px 32px;
padding-bottom: 64px;
}
.content {
$border-color: var(--brand-main);
@include border-without-corners($border-color, 1px);
&__content {
background-color: var(--grayscale-background-box);
height: 100%;
margin-left: 32px;
margin-top: -32px;
position: relative;
}
&__title {
color: var(--brand-main-nearly-black);
font-family: "Open Sans";
font-family: var(--main-font-family);
font-size: 26px;
font-weight: 600;
letter-spacing: -0.82px;
line-height: 32px;
margin-bottom: 16px;
margin-top: 0;
}
&__description {
color: var(--grayscale-dark);
font-family: "Open Sans";
font-family: var(--main-font-family);
font-size: 16px;
letter-spacing: 0;
line-height: 24px;
}
}
.small.hy-process-flow-box {
.small.hy-process-flow-box__number__container {
height: 56px;
width: 56px;
.hy-process-flow-box__number {
font-size: 28px;
height: 40px;
line-height: 40px;
width: 40px;
}
}
}
src/components/process-flow-box/process-flow-box.tsx
+ 22
− 26
View file @ 717a7ad0
import { Component, ComponentInterface, Prop, h } from "@stencil/core";
import { ProcessFlowBoxVariants } from "../../utils/utils";
import { ProcessFlowBoxStepStates } from "../../utils/utils";
import {Component, ComponentInterface, Prop, h} from '@stencil/core';
import {ProcessFlowBoxVariants} from '../../utils/utils';
import {ProcessFlowBoxStepStates} from '../../utils/utils';
@Component({
tag: "hy-process-flow-box",
styleUrl: "process-flow-box.scss",
shadow: true,
tag: 'hy-process-flow-box',
styleUrl: 'process-flow-box.scss',
shadow: true
})
export class ProcessFlowBox implements ComponentInterface {
@Prop() variant: ProcessFlowBoxVariants = ProcessFlowBoxVariants.default;
@Prop() boxNumber: string;
@Prop() boxTitle: string;
@Prop() boxDescription: string;
@Prop() intermediateStepTitle: string = "";
@Prop() stepState: ProcessFlowBoxStepStates = "default";
@Prop() numberTerm: string = "Vaihe";
@Prop() intermediateStepTitle: string = '';
@Prop() stepState: ProcessFlowBoxStepStates = 'default';
@Prop() numberTerm: string;
render() {
const classVariant = [this.variant, "hy-process-flow-box"].join(" ");
const classContentVariant = [this.variant, "content"].join(" ");
const classVariant = [this.variant, 'hy-process-flow-box'].join(' ');
const classContentVariant = [this.variant, 'hy-process-flow-box__content'].join(' ');
const classIsEven = (parseInt(this.boxNumber) % 2 == 0) ? "even" : "odd";
const classIsEven = parseInt(this.boxNumber) % 2 == 0 ? 'even' : 'odd';
const classNumberVariant = [this.variant, "number"].join(" ");
const classStepVariant = [this.variant, this.stepState, classIsEven, "step"].join(" ");
// let myHeaderSize: HeadingVarians = HeadingVarians.h2;
const classNumberVariant = [this.variant, 'hy-process-flow-box__number__container'].join(' ');
const classStepVariant = [this.variant, this.stepState, classIsEven, 'hy-process-flow-box__step__container'].join(
' '
);
return (
<div class={classVariant}>
{this.intermediateStepTitle && (
<div class={classStepVariant}>
<svg class="desktop" width="200" height="72">
<polygon points="0 0, 15 36, 0 72, 168 72, 200 36, 168 0, 0 0" />
<svg class="desktop" width="210" height="60">
<polygon points="0 0, 0 60, 190 60, 210 30, 190 0, 0 0" />
</svg>
<svg class="mobile" width="138" height="82">
<polygon points="0 0, 69 15, 138 0, 138 50, 69 82, 0 50" />
</svg>
<h2 class="hy-process-flow-box__step">
{this.intermediateStepTitle}
</h2>
<h2 class="hy-process-flow-box__step">{this.intermediateStepTitle}</h2>
</div>
)}
<div class={classNumberVariant}>
<h2
class="hy-process-flow-box__number"
aria-label={`${this.numberTerm} ${this.boxNumber}`}
aria-label={`${this.numberTerm && this.numberTerm} ${this.boxNumber}`}
>
{this.boxNumber}
<div class="hy-process-flow-box__number-title">{this.boxNumber}</div>
</h2>
</div>
<div class={classContentVariant}>
<h3 class="hy-process-flow-box__title">{this.boxTitle}</h3>
<div class="hy-process-flow-box__description">
{this.boxDescription}
</div>
<div class="hy-process-flow-box__description">{this.boxDescription}</div>
</div>
</div>
);
......
src/components/process-flow-box/readme.md
+ 7
− 7
View file @ 717a7ad0
......@@ -9,6 +9,7 @@ sidebarDepth: 2
Process flow step
## Usage
<hy-process-flow-box class="box"
variant="small"
box-number="1"
......@@ -31,7 +32,6 @@ Process flow step
<!-- Auto Generated Below -->
## Properties
| Property | Attribute | Description | Type | Default |
......@@ -39,25 +39,25 @@ Process flow step
| `boxDescription` | `box-description` | | `string` | `undefined` |
| `boxNumber` | `box-number` | | `string` | `undefined` |
| `boxTitle` | `box-title` | | `string` | `undefined` |
| `intermediateStepTitle` | `intermediate-step-title` | | `string` | `""` |
| `numberTerm` | `number-term` | | `string` | `"Vaihe"` |
| `stepState` | `step-state` | | `"default" \| "first"` | `"default"` |
| `intermediateStepTitle` | `intermediate-step-title` | | `string` | `''` |
| `numberTerm` | `number-term` | | `string` | `undefined` |
| `stepState` | `step-state` | | `"default" \| "first"` | `'default'` |
| `variant` | `variant` | | `ProcessFlowBoxVariants.default \| ProcessFlowBoxVariants.small` | `ProcessFlowBoxVariants.default` |
## Dependencies
### Used by
- [hy-process](../process)
- [hy-process](../process)
### Graph
```mermaid
graph TD;
hy-process --> hy-process-flow-box
style hy-process-flow-box fill:#f9f,stroke:#333,stroke-width:4px
```
----------------------------------------------
---
Helsinki University Design System
src/components/process/process.tsx
+ 16
− 15
View file @ 717a7ad0
......@@ -4,16 +4,17 @@ export interface ProcessFlowBoxValue {
step: string;
}
import { Component, ComponentInterface, Watch, Prop, h } from '@stencil/core';
import { ProcessFlowBoxVariants } from "../../utils/utils";
import {Component, ComponentInterface, Watch, Prop, h} from '@stencil/core';
import {ProcessFlowBoxVariants} from '../../utils/utils';
@Component({
tag: 'hy-process',
styleUrl: 'process.scss',
shadow: true,
shadow: true
})
export class Process implements ComponentInterface {
@Prop() variant: ProcessFlowBoxVariants = ProcessFlowBoxVariants.default;
@Prop() numberTerm: string;
private _dataItems: ProcessFlowBoxValue[];
@Prop() dataItems: ProcessFlowBoxValue[] | string;
......@@ -22,8 +23,7 @@ export class Process implements ComponentInterface {
arrayDataWatcher(newValue: ProcessFlowBoxValue[] | string) {
if (typeof newValue === 'string') {
this._dataItems = JSON.parse(newValue);
}
else {
} else {
this._dataItems = newValue;
}
}
......@@ -32,27 +32,28 @@ export class Process implements ComponentInterface {
}
render() {
const itemsPerRow = (this.variant == "small") ? 4 : 3;
const classAttributes = [this.variant, "hy-process"].join(" ");
const classItem = "box";
const itemsPerRow = this.variant == 'small' ? 4 : 3;
const classAttributes = [this.variant, 'hy-process'].join(' ');
const classItem = 'box';
var stepState;
return (
<div class={classAttributes}>
{this._dataItems.map((x, index) =>
{
(index % itemsPerRow == 0) ? stepState="first" :
stepState="default";
return <hy-process-flow-box class={classItem}
{this._dataItems.map((x, index) => {
index % itemsPerRow == 0 ? (stepState = 'first') : (stepState = 'default');
return (
<hy-process-flow-box
class={classItem}
variant={this.variant}
box-number={index + 1}
box-title={x.heading}
box-description={x.description}
intermediate-step-title={x.step}
step-state={stepState}
number-term={this.numberTerm}
/>
}
)}
);
})}
</div>
);
}
......
src/components/process/readme.md
+ 10
− 9
View file @ 717a7ad0
......@@ -2,17 +2,20 @@
title: Process flow
sidebar: true
---
# Process flow
Process flow
Design system contains two separate ways of displaying a process. When the descriptive content is short, it’s best to use this simple version.
This process consists of boxes that have
1. A number showing the order. This is generated automatically and is not optional
2. Title and description
3. Optional arrow element to emphasize visual flow and to add more information when needed.
## Usage
<hy-process variant="small"
class="hy-process-container"
data-items='[{"heading":"Step title","description":"Step description text", "step":"Intermediate step"},
......@@ -30,19 +33,16 @@ This process consists of boxes that have
{"heading":"Step title","description":"Step description text", "step":"Intermediate step"}]'>
</hy-process>
```
<!-- Auto Generated Below -->
## Properties
| Property | Attribute | Description | Type | Default |
| ----------- | ------------ | ----------- | ---------------------------------------------------------------- | -------------------------------- |
| `dataItems` | `data-items` | | `ProcessFlowBoxValue[] \| string` | `undefined` |
| `variant` | `variant` | | `ProcessFlowBoxVariants.default \| ProcessFlowBoxVariants.small` | `ProcessFlowBoxVariants.default` |
| Property | Attribute | Description | Type | Default |
| ------------ | ------------- | ----------- | ---------------------------------------------------------------- | -------------------------------- |
| `dataItems` | `data-items` | | `ProcessFlowBoxValue[] \| string` | `undefined` |
| `numberTerm` | `number-term` | | `string` | `undefined` |
| `variant` | `variant` | | `ProcessFlowBoxVariants.default \| ProcessFlowBoxVariants.small` | `ProcessFlowBoxVariants.default` |
## Dependencies
......@@ -51,12 +51,13 @@ This process consists of boxes that have
- [hy-process-flow-box](../process-flow-box)
### Graph
```mermaid
graph TD;
hy-process --> hy-process-flow-box
style hy-process fill:#f9f,stroke:#333,stroke-width:4px
```
----------------------------------------------
---
Helsinki University Design System
src/global/_colors.scss
+ 8
− 6
View file @ 717a7ad0
......@@ -7,16 +7,18 @@
--grayscale-white: #fff;
--grayscale-light: #f8f8f8;
--grayscale-medium: #d2d2d2;
--grayscale-background-box: #f5f5f5;
--grayscale-background-arrow: #dfdfdf;
--grayscale-medium-dark: #979797;
--grayscale-dark: #555555;
--grayscale-black: #000000;
--additional-red-light: #E5053A;
--additional-red-dark: #A31621;
--additional-red-light: #e5053a;
--additional-red-dark: #a31621;
--additional-purple-light: #420039;
--additional-yellow: #F9A21A;
--additional-skyblue: #48C5F8;
--additional-orange: #D14600;
--additional-green-light: #96BA3C;
--additional-yellow: #f9a21a;
--additional-skyblue: #48c5f8;
--additional-orange: #d14600;
--additional-green-light: #96ba3c;
--additional-green-dark: #006400;
}
......
src/global/colors.ts
+ 2
− 0
View file @ 717a7ad0
......@@ -7,6 +7,8 @@ export default {
grayscaleWhite: '#fff',
grayscaleLight: '#f8f8f8',
grayscaleMedium: '#d2d2d2',
grayscaleBackgroundBox: '#f5f5f5',
grayscaleBackgroundArrow: '#dfdfdf',
grayscaleMediumDark: '#979797',
grayscaleDark: '#555555',
grayscaleBlack: '#000000',
......
src/index.html
+ 21
− 0
View file @ 717a7ad0
......@@ -14,5 +14,26 @@
<body class="full-width">
<hy-heading heading="h1" mode="default">Heading 1 overridden to default</hy-heading>
<hy-heading heading="h1">Heading 1, but take full-width style</hy-heading>
<hy-process
variant="small"
class="hy-process-container"
number-term="Step"
data-items='[{"heading":"Step title","description":"Step description text"},
{"heading":"Step title","description":"Step description text", "step":"Intermediate step"},
{"heading":"Step title","description":"Step description text", "step":"Intermediate step"},
{"heading":"Step title","description":"Step description text", "step":"Intermediate step"}]'
>
</hy-process>
<hy-process
variant="big"
class="hy-process-container"
number-term="Phase"
data-items='[{"heading":"Step title","description":"Step description text"},
{"heading":"Step title","description":"Step description text", "step":"Intermediate step"},
{"heading":"Step title","description":"Step description text", "step":"Intermediate step"}]'
>
</hy-process>
</body>
</html>
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