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

Merge branch 'NXSTAGE-147-Link_box_component' into 'development' 

Nxstage 147 link box component

See merge request julkiset-sivut/design-system-lib!18
parents 08da4387 0f5fca1f
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 47 additions and 1067 deletions
dist/cjs/hy-baseline.cjs.entry.js deleted 100644 → 0
+ 0
− 19
View file @ 08da4387
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
const index = require('./index-552c6bcd.js');
const baselineCss = "div.hy-baseline{display:block;margin-bottom:1rem}div.hy-baseline>*+*{margin-top:1rem}";
const Baseline = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
}
render() {
return (index.h("div", { class: "hy-baseline" }, index.h("slot", null)));
}
};
Baseline.style = baselineCss;
exports.hy_baseline = Baseline;
dist/cjs/loader.cjs.js deleted 100644 → 0
+ 0
− 11
View file @ 08da4387
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
const index = require('./index-552c6bcd.js');
const defineCustomElements = (win, options) => index.patchEsm().then(() => {
return index.bootstrapLazy([["hy-baseline.cjs",[[4,"hy-baseline"]]],["hy-accordion-container_15.cjs",[[4,"hy-accordion-item",{"accordiontitle":[1],"ready":[32]}],[4,"hy-button",{"variant":[1],"state":[1],"icon":[1],"iconRight":[1,"icon-right"]}],[4,"hy-accordion-container",{"accordionid":[1]}],[4,"hy-docs-container"],[4,"hy-grid-container"],[4,"hy-grid-item",{"columns":[1],"columnssm":[1],"columnslg":[1],"contentalign":[1]}],[4,"hy-grid-row"],[1,"hy-heading",{"heading":[1],"section":[1]}],[1,"hy-ingress"],[1,"hy-link",{"variant":[1],"linkContent":[1,"link-content"],"url":[1],"ariaLabel":[1,"aria-label"],"isExternal":[4,"is-external"]}],[1,"hy-paragraph-text"],[4,"hy-row",{"justify":[1],"align":[1]}],[4,"hy-section-container"],[1,"hy-tiny-text"],[0,"hy-icon",{"icon":[1],"fill":[1],"size":[2]}]]]], options);
});
exports.defineCustomElements = defineCustomElements;
dist/collection/collection-manifest.json deleted 100644 → 0
+ 0
− 27
View file @ 08da4387
{
"entries": [
"./components/accordion-container/accordion-container.js",
"./components/accordion-item/accordion-item.js",
"./components/baseline/baseline.js",
"./components/button/button.js",
"./components/docs-container/docs-container.js",
"./components/grid-container/grid-container.js",
"./components/grid-item/grid-item.js",
"./components/grid-row/grid-row.js",
"./components/heading/heading.js",
"./components/icon/icon.js",
"./components/ingress/ingress.js",
"./components/link/link.js",
"./components/paragraph-text/paragraph-text.js",
"./components/row/row.js",
"./components/section-container/section-container.js",
"./components/tiny-text/tiny-text.js"
],
"compiler": {
"name": "@stencil/core",
"version": "1.11.2",
"typescriptVersion": "3.8.3"
},
"collections": [],
"bundles": []
}
\ No newline at end of file
dist/collection/components/accordion-container/accordion-container.css deleted 100644 → 0
+ 0
− 43
View file @ 08da4387
:root {
--brand-main: #0e688b;
--brand-main-light: #107eab;
--brand-main-active: #005379;
--brand-main-dark: #003146;
--brand-main-nearly-black: #000222;
--grayscale-white: #fff;
--grayscale-light: #f8f8f8;
--grayscale-medium: #d2d2d2;
--grayscale-medium-dark: #979797;
--grayscale-dark: #555555;
--grayscale-black: #000000;
--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-green-dark: #006400;
}
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
:root {
--breakpoint-narrow: 30rem;
--breakpoint-medium: 768px;
--breakpoint-wide: 60rem;
--breakpoint-extrawide: 75rem;
--breakpoint-max-width: 75rem;
--breakpoint-overwide: 80rem;
}
:host {
display: block;
}
.hy-accordion-container {
width: 100%;
}
\ No newline at end of file
dist/collection/components/accordion-container/accordion-container.js deleted 100644 → 0
+ 0
− 35
View file @ 08da4387
import { Component, Prop, h } from '@stencil/core';
export class AccordionContainer {
render() {
const classAttributes = ["hy-accordion-container", "js-hy-accordion"];
const id = this.accordionid.toLowerCase().replace(/\W/g, '-');
return (h("div", { id: id, class: classAttributes.join(" "), "data-allow-multiple": "true", "data-allow-toggle": "true" },
h("slot", null)));
}
static get is() { return "hy-accordion-container"; }
static get originalStyleUrls() { return {
"$": ["accordion-container.scss"]
}; }
static get styleUrls() { return {
"$": ["accordion-container.css"]
}; }
static get properties() { return {
"accordionid": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": ""
},
"attribute": "accordionid",
"reflect": false
}
}; }
}
dist/collection/components/accordion-item/accordion-item.css deleted 100644 → 0
+ 0
− 162
View file @ 08da4387
:root {
--brand-main: #0e688b;
--brand-main-light: #107eab;
--brand-main-active: #005379;
--brand-main-dark: #003146;
--brand-main-nearly-black: #000222;
--grayscale-white: #fff;
--grayscale-light: #f8f8f8;
--grayscale-medium: #d2d2d2;
--grayscale-medium-dark: #979797;
--grayscale-dark: #555555;
--grayscale-black: #000000;
--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-green-dark: #006400;
}
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
:root {
--breakpoint-narrow: 30rem;
--breakpoint-medium: 768px;
--breakpoint-wide: 60rem;
--breakpoint-extrawide: 75rem;
--breakpoint-max-width: 75rem;
--breakpoint-overwide: 80rem;
}
:host {
display: block;
}
.hy-accordion__item {
margin-bottom: 1rem;
-webkit-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
}
.hy-accordion__item__is-open {
background: linear-gradient(to bottom, var(--grayscale-dark) 2px, transparent 2px, transparent calc(100% - 2px), var(--grayscale-dark) calc(100% - 2px)) no-repeat, linear-gradient(to left, var(--grayscale-dark) 2px, transparent 2px, transparent calc(100% - 2px), var(--grayscale-dark) calc(100% - 2px)) no-repeat;
background-position: center;
background-size: calc(100% - .5rem) 100%, 100% calc(100% - .5rem);
margin-left: -1rem;
margin-right: -1rem;
-webkit-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
}
@media (min-width: 48em) {
.hy-accordion__item__is-open {
margin-left: -2rem;
margin-right: -2rem;
}
}
.hy-accordion__item__is-open .hy-accordion--heading {
margin: 0 auto;
width: calc(100% - 2.25rem);
-webkit-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
}
@media (min-width: 48em) {
.hy-accordion__item__is-open .hy-accordion--heading {
width: calc(100% - 4.25rem);
}
}
.hy-accordion__item__is-open .hy-accordion--heading .hy-accordion--heading__icon {
-webkit-transform: rotateX(180deg);
transform: rotateX(180deg);
}
.hy-accordion--heading {
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
letter-spacing: -0.69px;
line-height: 28px;
margin: 0 auto;
-webkit-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
width: 100%;
}
.hy-accordion--heading .hy-accordion__button {
background: linear-gradient(to bottom, var(--grayscale-dark) 1px, transparent 1px, transparent calc(100% - 1px), var(--grayscale-dark) calc(100% - 1px)) no-repeat, linear-gradient(to left, var(--grayscale-dark) 1px, transparent 1px, transparent calc(100% - 1px), var(--grayscale-dark) calc(100% - 1px)) no-repeat;
background-position: center;
background-size: calc(100% - .5rem) 100%, 100% calc(100% - .5rem);
color: var(--brand-main-nearly-black);
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
font-family: var(--main-font-family);
font-size: 22px;
font-weight: 600;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
border: none;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
height: 100%;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
padding: 0.75rem 1.75rem 0.75rem 1.25rem;
width: 100%;
-webkit-transition: all 0.35s ease-in;
transition: all 0.35s ease-in;
}
@media (min-width: 48em) {
.hy-accordion--heading .hy-accordion__button {
font-size: 26px;
letter-spacing: -0.82px;
line-height: 32px;
}
}
.hy-accordion--heading .hy-accordion__button[aria-expanded=true] {
background: none;
border-top: 0;
border-left: 0;
border-right: 0;
border-bottom: 1px solid var(--grayscale-medium-dark);
padding: 0.85rem 1rem 1rem 1rem;
-webkit-transition: all 0.35s ease-in;
transition: all 0.35s ease-in;
}
.hy-accordion--heading .hy-accordion--heading__icon {
margin-right: 0.95rem;
}
.hy-accordion--heading .hy-accordion--heading__icon svg {
fill: var(--brand-main);
}
.hy-accordion__content {
display: block;
height: 0;
padding: 0;
overflow: hidden;
-webkit-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
}
.hy-accordion__content--inner-wrapper {
display: block;
padding: 1rem 5% 1.25rem !important;
}
\ No newline at end of file
dist/collection/components/accordion-item/accordion-item.js deleted 100644 → 0
+ 0
− 149
View file @ 08da4387
import { Component, Prop, State, Element, h } from '@stencil/core';
export class AccordionItem {
constructor() {
this.ready = false;
}
componentDidLoad() {
this.ready = true;
}
render() {
const containerId = this.el.parentElement.id;
function collapseSection(element) {
element.style.height = 0 + 'px';
element.setAttribute('data-collapsed', 'true');
}
function expandSection(element) {
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 triggers = Array.prototype.slice.call(accordion.querySelectorAll('.hy-accordion__button'));
accordion.addEventListener('click', function (event) {
let target = event.target;
if (target && target.classList.contains('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';
const active = accordion.querySelector('[aria-expanded="true"]');
if (!allowMultiple && active && active !== target) {
active.setAttribute('aria-expanded', 'false');
collapseSection(targetContent);
if (targetParent.classList.contains('hy-accordion__item__is-open')) {
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) {
target.setAttribute('aria-expanded', 'false');
collapseSection(targetContent);
if (targetParent.classList.contains('hy-accordion__item__is-open')) {
targetParent.classList.remove('hy-accordion__item__is-open');
}
accordion.querySelector(`#${target.getAttribute('aria-controls')}`).setAttribute('aria-hidden', 'true');
}
event.preventDefault();
event.stopImmediatePropagation();
}
});
if (accordion) {
accordion.addEventListener('keydown', function (event) {
const target = event.target;
const key = event.which.toString();
// 33 = Page Up, 34 = Page Down
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 length = triggers.length;
const newIndex = (index + length + direction) % length;
triggers[newIndex].focus();
event.preventDefault();
}
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
case '35':
triggers[triggers.length - 1].focus();
break;
}
event.preventDefault();
}
}
});
accordion.querySelectorAll('.hy-accordion__button').forEach(function (trigger) {
trigger.addEventListener('focus', function () {
trigger.classList.add('focus');
});
trigger.addEventListener('blur', function () {
trigger.classList.remove('focus');
});
});
}
});
}
const classAttributes = ["hy-accordion__item"];
const titleAsId = this.accordiontitle.toLowerCase().replace(/\W/g, '-');
return (h("div", { class: classAttributes.join(" ") },
h("div", { class: "hy-accordion--heading" },
h("button", { "aria-expanded": "false", "aria-controls": `${titleAsId}--content`, class: "hy-accordion__button", id: `${titleAsId}--title` },
h("span", { class: "hy-accordion--heading__icon" },
h("hy-icon", { icon: 'hy-icon-caret-down', size: 16 })),
this.accordiontitle)),
h("div", { "aria-labelledBy": `${titleAsId}--title`, class: "hy-accordion__content", id: `${titleAsId}--content`, role: "region" },
h("div", { class: "hy-accordion__content--inner-wrapper" },
h("slot", null)))));
}
static get is() { return "hy-accordion-item"; }
static get originalStyleUrls() { return {
"$": ["accordion-item.scss"]
}; }
static get styleUrls() { return {
"$": ["accordion-item.css"]
}; }
static get properties() { return {
"accordiontitle": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": ""
},
"attribute": "accordiontitle",
"reflect": false
}
}; }
static get states() { return {
"ready": {}
}; }
static get elementRef() { return "el"; }
}
dist/collection/components/heading/heading.css deleted 100644 → 0
+ 0
− 194
View file @ 08da4387
:root {
--brand-main: #0e688b;
--brand-main-light: #107eab;
--brand-main-active: #005379;
--brand-main-dark: #003146;
--brand-main-nearly-black: #000222;
--grayscale-white: #fff;
--grayscale-light: #f8f8f8;
--grayscale-medium: #d2d2d2;
--grayscale-medium-dark: #979797;
--grayscale-dark: #555555;
--grayscale-black: #000000;
--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-green-dark: #006400;
}
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
:root {
--breakpoint-narrow: 30rem;
--breakpoint-medium: 768px;
--breakpoint-wide: 60rem;
--breakpoint-extrawide: 75rem;
--breakpoint-max-width: 75rem;
--breakpoint-overwide: 80rem;
}
:host {
display: block;
}
.hy-heading__container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
width: 100%;
}
@media (min-width: 48em) {
.hy-heading__container {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
}
}
.hy-heading {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
-ms-flex-negative: 0;
flex-shrink: 0;
max-width: 100%;
width: auto;
}
.hy-heading__subsection {
-ms-flex-negative: 2;
flex-shrink: 2;
overflow: hidden;
width: 100%;
}
.hy-heading__subsection:after {
background-color: var(--brand-main-nearly-black);
content: " ";
display: -webkit-box;
display: -ms-flexbox;
display: flex;
height: 2px;
width: 100%;
margin-left: 0;
margin-bottom: 1rem;
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
@media (min-width: 48em) {
.hy-heading__subsection:after {
margin-left: 2rem;
}
}
h1, h2, h3, h4, h5, h6 {
color: var(--brand-main-nearly-black);
font-family: var(--main-font-family);
font-weight: 600;
padding: 0;
margin: 0;
width: 100%;
}
h1 {
font-size: 32px;
letter-spacing: -1px;
line-height: 40px;
}
@media (min-width: 48em) {
h1 {
font-size: 48px;
letter-spacing: -1.5px;
line-height: 64px;
}
}
h2 {
font-size: 26px;
letter-spacing: -0.82px;
line-height: 32px;
}
@media (min-width: 48em) {
h2 {
font-size: 32px;
letter-spacing: -1px;
line-height: 40px;
}
}
h3 {
font-size: 22px;
letter-spacing: -0.69px;
line-height: 28px;
}
@media (min-width: 48em) {
h3 {
font-size: 26px;
letter-spacing: -0.82px;
line-height: 32px;
}
}
h4 {
font-size: 18px;
letter-spacing: -0.56px;
line-height: 24px;
}
@media (min-width: 48em) {
h4 {
font-size: 22px;
letter-spacing: -0.69px;
line-height: 28px;
}
}
h5 {
font-size: 16px;
letter-spacing: -0.5px;
line-height: 20px;
}
@media (min-width: 48em) {
h5 {
font-size: 18px;
letter-spacing: -0.56px;
line-height: 24px;
}
}
h6 {
font-size: 14px;
letter-spacing: -0.44px;
line-height: 16px;
}
@media (min-width: 48em) {
h6 {
font-size: 16px;
letter-spacing: -0.5px;
line-height: 20px;
}
}
\ No newline at end of file
dist/collection/components/icon/icon.js deleted 100644 → 0
+ 0
− 88
View file @ 08da4387
import { Component, h, Prop, Host } from "@stencil/core";
import * as icons from "./icons";
// TODO: add all icons
const iconNames = {
"hy-icon-arrow-left": p => h(icons.IconArrowLeft, Object.assign({}, p)),
"hy-icon-arrow-right": p => h(icons.IconArrowRight, Object.assign({}, p)),
"hy-icon-arrow-down": p => h(icons.ArrowDown, Object.assign({}, p)),
"hy-icon-caret-down": p => h(icons.CaretDown, Object.assign({}, p)),
"hy-icon-link-arrow-down": p => h(icons.LinkArrowDown, Object.assign({}, p)),
"hy-icon-hy-logo": p => h(icons.HyLogo, Object.assign({}, p)),
"hy-icon-camera": p => h(icons.Camera, Object.assign({}, p)),
"hy-icon-image-gallery": p => h(icons.ImageGallery, Object.assign({}, p))
};
export class Icon {
constructor() {
this.fill = "black";
this.size = 20;
}
render() {
return (h(Host, { "aria-hidden": "true", style: { display: "flex" } }, iconNames[this.icon]({
height: this.size,
width: this.size,
fill: this.fill
})));
}
static get is() { return "hy-icon"; }
static get originalStyleUrls() { return {
"$": ["icon.css"]
}; }
static get styleUrls() { return {
"$": ["icon.css"]
}; }
static get properties() { return {
"icon": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "icon",
"reflect": false
},
"fill": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "fill",
"reflect": false,
"defaultValue": "\"black\""
},
"size": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "size",
"reflect": false,
"defaultValue": "20"
}
}; }
}
dist/esm-es5/hy-baseline.entry.js deleted 100644 → 0
+ 0
− 15
View file @ 08da4387
import { r as registerInstance, h } from './index-d8f759a7.js';
const baselineCss = "div.hy-baseline{display:block;margin-bottom:1rem}div.hy-baseline>*+*{margin-top:1rem}";
const Baseline = class {
constructor(hostRef) {
registerInstance(this, hostRef);
}
render() {
return (h("div", { class: "hy-baseline" }, h("slot", null)));
}
};
Baseline.style = baselineCss;
export { Baseline as hy_baseline };
dist/esm-es5/loader.mjs deleted 100644 → 0
+ 0
− 7
View file @ 08da4387
import { a as patchEsm, b as bootstrapLazy } from './index-d8f759a7.js';
const defineCustomElements = (win, options) => patchEsm().then(() => {
return bootstrapLazy([["hy-baseline",[[4,"hy-baseline"]]],["hy-accordion-container_15",[[4,"hy-accordion-item",{"accordiontitle":[1],"ready":[32]}],[4,"hy-button",{"variant":[1],"state":[1],"icon":[1],"iconRight":[1,"icon-right"]}],[4,"hy-accordion-container",{"accordionid":[1]}],[4,"hy-docs-container"],[4,"hy-grid-container"],[4,"hy-grid-item",{"columns":[1],"columnssm":[1],"columnslg":[1],"contentalign":[1]}],[4,"hy-grid-row"],[1,"hy-heading",{"heading":[1],"section":[1]}],[1,"hy-ingress"],[1,"hy-link",{"variant":[1],"linkContent":[1,"link-content"],"url":[1],"ariaLabel":[1,"aria-label"],"isExternal":[4,"is-external"]}],[1,"hy-paragraph-text"],[4,"hy-row",{"justify":[1],"align":[1]}],[4,"hy-section-container"],[1,"hy-tiny-text"],[0,"hy-icon",{"icon":[1],"fill":[1],"size":[2]}]]]], options);
});
export { defineCustomElements };
dist/esm/hy-baseline.entry.js deleted 100644 → 0
+ 0
− 15
View file @ 08da4387
import { r as registerInstance, h } from './index-d8f759a7.js';
const baselineCss = "div.hy-baseline{display:block;margin-bottom:1rem}div.hy-baseline>*+*{margin-top:1rem}";
const Baseline = class {
constructor(hostRef) {
registerInstance(this, hostRef);
}
render() {
return (h("div", { class: "hy-baseline" }, h("slot", null)));
}
};
Baseline.style = baselineCss;
export { Baseline as hy_baseline };
dist/esm/loader.mjs deleted 100644 → 0
+ 0
− 7
View file @ 08da4387
import { a as patchEsm, b as bootstrapLazy } from './index-d8f759a7.js';
const defineCustomElements = (win, options) => patchEsm().then(() => {
return bootstrapLazy([["hy-baseline",[[4,"hy-baseline"]]],["hy-accordion-container_15",[[4,"hy-accordion-item",{"accordiontitle":[1],"ready":[32]}],[4,"hy-button",{"variant":[1],"state":[1],"icon":[1],"iconRight":[1,"icon-right"]}],[4,"hy-accordion-container",{"accordionid":[1]}],[4,"hy-docs-container"],[4,"hy-grid-container"],[4,"hy-grid-item",{"columns":[1],"columnssm":[1],"columnslg":[1],"contentalign":[1]}],[4,"hy-grid-row"],[1,"hy-heading",{"heading":[1],"section":[1]}],[1,"hy-ingress"],[1,"hy-link",{"variant":[1],"linkContent":[1,"link-content"],"url":[1],"ariaLabel":[1,"aria-label"],"isExternal":[4,"is-external"]}],[1,"hy-paragraph-text"],[4,"hy-row",{"justify":[1],"align":[1]}],[4,"hy-section-container"],[1,"hy-tiny-text"],[0,"hy-icon",{"icon":[1],"fill":[1],"size":[2]}]]]], options);
});
export { defineCustomElements };
dist/types/components.d.ts deleted 100644 → 0
+ 0
− 277
View file @ 08da4387
/* eslint-disable */
/* tslint:disable */
/**
* This is an autogenerated file created by the Stencil compiler.
* It contains typing information for all components that exist in this project.
*/
import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
import { ButtonStates, ButtonVariants, GridAlignVariants, GridColumns, GridColumnsLg, GridColumnsSm, HeadingSectionVariants, HeadingVarians, LinkVariants, } from "./utils/utils";
export namespace Components {
interface HyAccordionContainer {
"accordionid"?: string;
}
interface HyAccordionItem {
"accordiontitle"?: string;
}
interface HyBaseline {
}
interface HyButton {
"icon"?: string;
"iconRight"?: string;
"state": ButtonStates;
"variant": ButtonVariants;
}
interface HyDocsContainer {
}
interface HyGridContainer {
}
interface HyGridItem {
"columns": GridColumns;
"columnslg": GridColumnsLg;
"columnssm": GridColumnsSm;
"contentalign": GridAlignVariants;
}
interface HyGridRow {
}
interface HyHeading {
"heading": HeadingVarians;
"section": HeadingSectionVariants;
}
interface HyIcon {
"fill": string;
"icon": string;
"size": number;
}
interface HyIngress {
}
interface HyLink {
"ariaLabel"?: string;
"isExternal": boolean;
"linkContent": string;
"url"?: string;
"variant": LinkVariants;
}
interface HyParagraphText {
}
interface HyRow {
"align": string;
"justify": string;
}
interface HySectionContainer {
}
interface HyTinyText {
}
}
declare global {
interface HTMLHyAccordionContainerElement extends Components.HyAccordionContainer, HTMLStencilElement {
}
var HTMLHyAccordionContainerElement: {
prototype: HTMLHyAccordionContainerElement;
new (): HTMLHyAccordionContainerElement;
};
interface HTMLHyAccordionItemElement extends Components.HyAccordionItem, HTMLStencilElement {
}
var HTMLHyAccordionItemElement: {
prototype: HTMLHyAccordionItemElement;
new (): HTMLHyAccordionItemElement;
};
interface HTMLHyBaselineElement extends Components.HyBaseline, HTMLStencilElement {
}
var HTMLHyBaselineElement: {
prototype: HTMLHyBaselineElement;
new (): HTMLHyBaselineElement;
};
interface HTMLHyButtonElement extends Components.HyButton, HTMLStencilElement {
}
var HTMLHyButtonElement: {
prototype: HTMLHyButtonElement;
new (): HTMLHyButtonElement;
};
interface HTMLHyDocsContainerElement extends Components.HyDocsContainer, HTMLStencilElement {
}
var HTMLHyDocsContainerElement: {
prototype: HTMLHyDocsContainerElement;
new (): HTMLHyDocsContainerElement;
};
interface HTMLHyGridContainerElement extends Components.HyGridContainer, HTMLStencilElement {
}
var HTMLHyGridContainerElement: {
prototype: HTMLHyGridContainerElement;
new (): HTMLHyGridContainerElement;
};
interface HTMLHyGridItemElement extends Components.HyGridItem, HTMLStencilElement {
}
var HTMLHyGridItemElement: {
prototype: HTMLHyGridItemElement;
new (): HTMLHyGridItemElement;
};
interface HTMLHyGridRowElement extends Components.HyGridRow, HTMLStencilElement {
}
var HTMLHyGridRowElement: {
prototype: HTMLHyGridRowElement;
new (): HTMLHyGridRowElement;
};
interface HTMLHyHeadingElement extends Components.HyHeading, HTMLStencilElement {
}
var HTMLHyHeadingElement: {
prototype: HTMLHyHeadingElement;
new (): HTMLHyHeadingElement;
};
interface HTMLHyIconElement extends Components.HyIcon, HTMLStencilElement {
}
var HTMLHyIconElement: {
prototype: HTMLHyIconElement;
new (): HTMLHyIconElement;
};
interface HTMLHyIngressElement extends Components.HyIngress, HTMLStencilElement {
}
var HTMLHyIngressElement: {
prototype: HTMLHyIngressElement;
new (): HTMLHyIngressElement;
};
interface HTMLHyLinkElement extends Components.HyLink, HTMLStencilElement {
}
var HTMLHyLinkElement: {
prototype: HTMLHyLinkElement;
new (): HTMLHyLinkElement;
};
interface HTMLHyParagraphTextElement extends Components.HyParagraphText, HTMLStencilElement {
}
var HTMLHyParagraphTextElement: {
prototype: HTMLHyParagraphTextElement;
new (): HTMLHyParagraphTextElement;
};
interface HTMLHyRowElement extends Components.HyRow, HTMLStencilElement {
}
var HTMLHyRowElement: {
prototype: HTMLHyRowElement;
new (): HTMLHyRowElement;
};
interface HTMLHySectionContainerElement extends Components.HySectionContainer, HTMLStencilElement {
}
var HTMLHySectionContainerElement: {
prototype: HTMLHySectionContainerElement;
new (): HTMLHySectionContainerElement;
};
interface HTMLHyTinyTextElement extends Components.HyTinyText, HTMLStencilElement {
}
var HTMLHyTinyTextElement: {
prototype: HTMLHyTinyTextElement;
new (): HTMLHyTinyTextElement;
};
interface HTMLElementTagNameMap {
"hy-accordion-container": HTMLHyAccordionContainerElement;
"hy-accordion-item": HTMLHyAccordionItemElement;
"hy-baseline": HTMLHyBaselineElement;
"hy-button": HTMLHyButtonElement;
"hy-docs-container": HTMLHyDocsContainerElement;
"hy-grid-container": HTMLHyGridContainerElement;
"hy-grid-item": HTMLHyGridItemElement;
"hy-grid-row": HTMLHyGridRowElement;
"hy-heading": HTMLHyHeadingElement;
"hy-icon": HTMLHyIconElement;
"hy-ingress": HTMLHyIngressElement;
"hy-link": HTMLHyLinkElement;
"hy-paragraph-text": HTMLHyParagraphTextElement;
"hy-row": HTMLHyRowElement;
"hy-section-container": HTMLHySectionContainerElement;
"hy-tiny-text": HTMLHyTinyTextElement;
}
}
declare namespace LocalJSX {
interface HyAccordionContainer {
"accordionid"?: string;
}
interface HyAccordionItem {
"accordiontitle"?: string;
}
interface HyBaseline {
}
interface HyButton {
"icon"?: string;
"iconRight"?: string;
"state"?: ButtonStates;
"variant"?: ButtonVariants;
}
interface HyDocsContainer {
}
interface HyGridContainer {
}
interface HyGridItem {
"columns"?: GridColumns;
"columnslg"?: GridColumnsLg;
"columnssm"?: GridColumnsSm;
"contentalign"?: GridAlignVariants;
}
interface HyGridRow {
}
interface HyHeading {
"heading"?: HeadingVarians;
"section"?: HeadingSectionVariants;
}
interface HyIcon {
"fill"?: string;
"icon"?: string;
"size"?: number;
}
interface HyIngress {
}
interface HyLink {
"ariaLabel"?: string;
"isExternal"?: boolean;
"linkContent"?: string;
"url"?: string;
"variant"?: LinkVariants;
}
interface HyParagraphText {
}
interface HyRow {
"align"?: string;
"justify"?: string;
}
interface HySectionContainer {
}
interface HyTinyText {
}
interface IntrinsicElements {
"hy-accordion-container": HyAccordionContainer;
"hy-accordion-item": HyAccordionItem;
"hy-baseline": HyBaseline;
"hy-button": HyButton;
"hy-docs-container": HyDocsContainer;
"hy-grid-container": HyGridContainer;
"hy-grid-item": HyGridItem;
"hy-grid-row": HyGridRow;
"hy-heading": HyHeading;
"hy-icon": HyIcon;
"hy-ingress": HyIngress;
"hy-link": HyLink;
"hy-paragraph-text": HyParagraphText;
"hy-row": HyRow;
"hy-section-container": HySectionContainer;
"hy-tiny-text": HyTinyText;
}
}
export { LocalJSX as JSX };
declare module "@stencil/core" {
export namespace JSX {
interface IntrinsicElements {
"hy-accordion-container": LocalJSX.HyAccordionContainer & JSXBase.HTMLAttributes<HTMLHyAccordionContainerElement>;
"hy-accordion-item": LocalJSX.HyAccordionItem & JSXBase.HTMLAttributes<HTMLHyAccordionItemElement>;
"hy-baseline": LocalJSX.HyBaseline & JSXBase.HTMLAttributes<HTMLHyBaselineElement>;
"hy-button": LocalJSX.HyButton & JSXBase.HTMLAttributes<HTMLHyButtonElement>;
"hy-docs-container": LocalJSX.HyDocsContainer & JSXBase.HTMLAttributes<HTMLHyDocsContainerElement>;
"hy-grid-container": LocalJSX.HyGridContainer & JSXBase.HTMLAttributes<HTMLHyGridContainerElement>;
"hy-grid-item": LocalJSX.HyGridItem & JSXBase.HTMLAttributes<HTMLHyGridItemElement>;
"hy-grid-row": LocalJSX.HyGridRow & JSXBase.HTMLAttributes<HTMLHyGridRowElement>;
"hy-heading": LocalJSX.HyHeading & JSXBase.HTMLAttributes<HTMLHyHeadingElement>;
"hy-icon": LocalJSX.HyIcon & JSXBase.HTMLAttributes<HTMLHyIconElement>;
"hy-ingress": LocalJSX.HyIngress & JSXBase.HTMLAttributes<HTMLHyIngressElement>;
"hy-link": LocalJSX.HyLink & JSXBase.HTMLAttributes<HTMLHyLinkElement>;
"hy-paragraph-text": LocalJSX.HyParagraphText & JSXBase.HTMLAttributes<HTMLHyParagraphTextElement>;
"hy-row": LocalJSX.HyRow & JSXBase.HTMLAttributes<HTMLHyRowElement>;
"hy-section-container": LocalJSX.HySectionContainer & JSXBase.HTMLAttributes<HTMLHySectionContainerElement>;
"hy-tiny-text": LocalJSX.HyTinyText & JSXBase.HTMLAttributes<HTMLHyTinyTextElement>;
}
}
}
dist/types/components/accordion-container/accordion-container.d.ts deleted 100644 → 0
+ 0
− 4
View file @ 08da4387
export declare class AccordionContainer {
accordionid?: string;
render(): any;
}
dist/types/components/accordion-item/accordion-item.d.ts deleted 100644 → 0
+ 0
− 7
View file @ 08da4387
export declare class AccordionItem {
el: HTMLElement;
accordiontitle?: string;
ready: boolean;
componentDidLoad(): void;
render(): any;
}
readme.md
+ 12
− 0
View file @ 4bba8296
...@@ -52,3 +52,15 @@ If you don't want or cannot install node and other dependencies, you can run the ...@@ -52,3 +52,15 @@ If you don't want or cannot install node and other dependencies, you can run the
`docker-compose up` `docker-compose up`
Image can be rebuilt with `docker-compose build` if needed for example after a node package was added. Image can be rebuilt with `docker-compose build` if needed for example after a node package was added.
## Making a release
After review is passed for both the library and documentation, changes can be merged to development branch. Both the library and the VuePress documentation follows similar process.
NOTE: remeber to check that the documentation project has a correct library dependency (version number) before making the merge.
The release process:
1. Merge the development branch into master
2. Run `yarn version` and bump the version number. This automatically creates a git tag with the new version
3. Push your changes. Then remeber also to update the tags in the remote like this: `git push origin --tags`
src/components.d.ts
+ 27
− 0
View file @ 4bba8296
...@@ -51,6 +51,15 @@ export namespace Components { ...@@ -51,6 +51,15 @@ export namespace Components {
"url"?: string; "url"?: string;
"variant": LinkVariants; "variant": LinkVariants;
} }
interface HyLinkBox {
"ariaLabel"?: string;
"imageAlt": string;
"imageUrl": string;
"isExternal": boolean;
"textDescription": string;
"textTitle"?: string;
"url"?: string;
}
interface HyParagraphText { interface HyParagraphText {
} }
interface HyRow { interface HyRow {
...@@ -135,6 +144,12 @@ declare global { ...@@ -135,6 +144,12 @@ declare global {
prototype: HTMLHyLinkElement; prototype: HTMLHyLinkElement;
new (): HTMLHyLinkElement; new (): HTMLHyLinkElement;
}; };
interface HTMLHyLinkBoxElement extends Components.HyLinkBox, HTMLStencilElement {
}
var HTMLHyLinkBoxElement: {
prototype: HTMLHyLinkBoxElement;
new (): HTMLHyLinkBoxElement;
};
interface HTMLHyParagraphTextElement extends Components.HyParagraphText, HTMLStencilElement { interface HTMLHyParagraphTextElement extends Components.HyParagraphText, HTMLStencilElement {
} }
var HTMLHyParagraphTextElement: { var HTMLHyParagraphTextElement: {
...@@ -172,6 +187,7 @@ declare global { ...@@ -172,6 +187,7 @@ declare global {
"hy-icon": HTMLHyIconElement; "hy-icon": HTMLHyIconElement;
"hy-ingress": HTMLHyIngressElement; "hy-ingress": HTMLHyIngressElement;
"hy-link": HTMLHyLinkElement; "hy-link": HTMLHyLinkElement;
"hy-link-box": HTMLHyLinkBoxElement;
"hy-paragraph-text": HTMLHyParagraphTextElement; "hy-paragraph-text": HTMLHyParagraphTextElement;
"hy-row": HTMLHyRowElement; "hy-row": HTMLHyRowElement;
"hy-section-container": HTMLHySectionContainerElement; "hy-section-container": HTMLHySectionContainerElement;
...@@ -223,6 +239,15 @@ declare namespace LocalJSX { ...@@ -223,6 +239,15 @@ declare namespace LocalJSX {
"url"?: string; "url"?: string;
"variant"?: LinkVariants; "variant"?: LinkVariants;
} }
interface HyLinkBox {
"ariaLabel"?: string;
"imageAlt"?: string;
"imageUrl"?: string;
"isExternal"?: boolean;
"textDescription"?: string;
"textTitle"?: string;
"url"?: string;
}
interface HyParagraphText { interface HyParagraphText {
} }
interface HyRow { interface HyRow {
...@@ -246,6 +271,7 @@ declare namespace LocalJSX { ...@@ -246,6 +271,7 @@ declare namespace LocalJSX {
"hy-icon": HyIcon; "hy-icon": HyIcon;
"hy-ingress": HyIngress; "hy-ingress": HyIngress;
"hy-link": HyLink; "hy-link": HyLink;
"hy-link-box": HyLinkBox;
"hy-paragraph-text": HyParagraphText; "hy-paragraph-text": HyParagraphText;
"hy-row": HyRow; "hy-row": HyRow;
"hy-section-container": HySectionContainer; "hy-section-container": HySectionContainer;
...@@ -268,6 +294,7 @@ declare module "@stencil/core" { ...@@ -268,6 +294,7 @@ declare module "@stencil/core" {
"hy-icon": LocalJSX.HyIcon & JSXBase.HTMLAttributes<HTMLHyIconElement>; "hy-icon": LocalJSX.HyIcon & JSXBase.HTMLAttributes<HTMLHyIconElement>;
"hy-ingress": LocalJSX.HyIngress & JSXBase.HTMLAttributes<HTMLHyIngressElement>; "hy-ingress": LocalJSX.HyIngress & JSXBase.HTMLAttributes<HTMLHyIngressElement>;
"hy-link": LocalJSX.HyLink & JSXBase.HTMLAttributes<HTMLHyLinkElement>; "hy-link": LocalJSX.HyLink & JSXBase.HTMLAttributes<HTMLHyLinkElement>;
"hy-link-box": LocalJSX.HyLinkBox & JSXBase.HTMLAttributes<HTMLHyLinkBoxElement>;
"hy-paragraph-text": LocalJSX.HyParagraphText & JSXBase.HTMLAttributes<HTMLHyParagraphTextElement>; "hy-paragraph-text": LocalJSX.HyParagraphText & JSXBase.HTMLAttributes<HTMLHyParagraphTextElement>;
"hy-row": LocalJSX.HyRow & JSXBase.HTMLAttributes<HTMLHyRowElement>; "hy-row": LocalJSX.HyRow & JSXBase.HTMLAttributes<HTMLHyRowElement>;
"hy-section-container": LocalJSX.HySectionContainer & JSXBase.HTMLAttributes<HTMLHySectionContainerElement>; "hy-section-container": LocalJSX.HySectionContainer & JSXBase.HTMLAttributes<HTMLHySectionContainerElement>;
......
src/components/accordion-item/accordion-item.scss
+ 7
− 7
View file @ 4bba8296
...@@ -47,19 +47,19 @@ ...@@ -47,19 +47,19 @@
$border-color: var(--grayscale-dark); $border-color: var(--grayscale-dark);
@include border-without-corners($border-color, 1px); @include border-without-corners($border-color, 1px);
align-items: center;
border: none;
color: var(--brand-main-nearly-black); color: var(--brand-main-nearly-black);
display: flex;
flex-direction: row; flex-direction: row;
font-family: var(--main-font-family); font-family: var(--main-font-family);
font-size: 22px; font-size: 22px;
font-weight: 600; font-weight: 600;
align-items: center;
border: none;
display: flex;
height: 100%; height: 100%;
justify-content: flex-start; justify-content: flex-start;
padding: .75rem 1.75rem .75rem 1.25rem; padding: .75rem 1.75rem .75rem 1.25rem;
width: 100%;
transition: all .35s ease-in; transition: all .35s ease-in;
width: 100%;
@include breakpoint($medium) { @include breakpoint($medium) {
font-size: 26px; font-size: 26px;
...@@ -69,10 +69,10 @@ ...@@ -69,10 +69,10 @@
&[aria-expanded=true] { &[aria-expanded=true] {
background: none; background: none;
border-top: 0; border-bottom: 1px solid var(--grayscale-medium-dark);
border-left: 0; border-left: 0;
border-right: 0; border-right: 0;
border-bottom: 1px solid var(--grayscale-medium-dark); border-top: 0;
padding: .85rem 1rem 1rem 1rem; padding: .85rem 1rem 1rem 1rem;
transition: all .35s ease-in; transition: all .35s ease-in;
} }
...@@ -90,8 +90,8 @@ ...@@ -90,8 +90,8 @@
.hy-accordion__content { .hy-accordion__content {
display: block; display: block;
height: 0; height: 0;
padding: 0;
overflow: hidden; overflow: hidden;
padding: 0;
transition: all .25s ease-in-out; transition: all .25s ease-in-out;
&--inner-wrapper { &--inner-wrapper {
......
src/components/accordion-item/accordion-item.tsx
+ 1
− 0
View file @ 4bba8296
...@@ -5,6 +5,7 @@ import { Component, Prop, State, Element, h } from '@stencil/core'; ...@@ -5,6 +5,7 @@ import { Component, Prop, State, Element, h } from '@stencil/core';
styleUrl: 'accordion-item.scss', styleUrl: 'accordion-item.scss',
shadow: false shadow: false
}) })
export class AccordionItem { export class AccordionItem {
@Element() el: HTMLElement; @Element() el: HTMLElement;
@Prop() accordiontitle?: string; @Prop() accordiontitle?: string;
......
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