From 83da58b2844906b605034e5c192910915ddc318f Mon Sep 17 00:00:00 2001
From: Ekaterina Kondareva <>
Date: Tue, 3 Nov 2020 21:03:11 +0200
Subject: [PATCH] manual link box
---
src/components.d.ts | 2 +
.../hy-large-process-flow.scss | 2 +
src/components/link-box/link-box.tsx | 48 ++++++++++++++-----
src/components/link-box/readme.md | 1 +
4 files changed, 42 insertions(+), 11 deletions(-)
diff --git a/src/components.d.ts b/src/components.d.ts
index 64d26f19..6def33e9 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -357,6 +357,7 @@ export namespace Components {
variant: LinkVariants;
}
interface HyLinkBox {
+ headerstyle: string;
imageAlt: string;
imageUrl: string;
isExternal: boolean;
@@ -1215,6 +1216,7 @@ declare namespace LocalJSX {
variant?: LinkVariants;
}
interface HyLinkBox {
+ headerstyle?: string;
imageAlt?: string;
imageUrl?: string;
isExternal?: boolean;
diff --git a/src/components/hy-large-process-flow/hy-large-process-flow.scss b/src/components/hy-large-process-flow/hy-large-process-flow.scss
index 9c7049e8..f1e62be8 100644
--- a/src/components/hy-large-process-flow/hy-large-process-flow.scss
+++ b/src/components/hy-large-process-flow/hy-large-process-flow.scss
@@ -5,10 +5,12 @@
.hy-large-process-flow {
max-width: 100%;
padding-top: 8px;
+ margin-bottom: 24px;
width: 100%;
@include breakpoint($narrow) {
//tablet up till 768 (including 768px)
+ margin-bottom: 32px;
max-width: calc(100% / 8 * 7 + var(--gutter-narrow)); // 7 columns out of 8
padding-top: 0;
}
diff --git a/src/components/link-box/link-box.tsx b/src/components/link-box/link-box.tsx
index da8a39ba..55f7dc91 100644
--- a/src/components/link-box/link-box.tsx
+++ b/src/components/link-box/link-box.tsx
@@ -1,10 +1,10 @@
-import {Component, ComponentInterface, Prop, h} from '@stencil/core';
+import {Component, ComponentInterface, Element, Prop, h} from '@stencil/core';
import {LinkBoxVariants} from '../../utils/utils';
@Component({
tag: 'hy-link-box',
styleUrl: 'link-box.scss',
- shadow: true
+ shadow: true,
})
export class LinkBox implements ComponentInterface {
@Prop() variant: LinkBoxVariants = LinkBoxVariants.default;
@@ -14,37 +14,63 @@ export class LinkBox implements ComponentInterface {
@Prop() textDescription: string = null;
@Prop() url?: string;
@Prop() isExternal: boolean = false;
+ @Prop() headerstyle: string = 'common';
+ @Element() el: HTMLElement;
+
+ componentDidLoad() {
+ let hyMainDiv = this.el.closest('.hy-main');
+ if (hyMainDiv) {
+ if (!hyMainDiv.classList.contains('with-sidebar')) {
+ this.headerstyle = 'large';
+ }
+ }
+ }
render() {
- const classAttributes = ['hy-link-box', this.variant, this.imageUrl ? 'hy-link-box--with-image' : null].join(' ');
+ const classAttributes = [
+ 'hy-link-box',
+ this.variant,
+ this.headerstyle,
+ this.imageUrl ? 'hy-link-box--with-image' : null,
+ ].join(' ');
+
+ const classLinkAttributes = ['hy-link-box__link', this.headerstyle].join(' ');
const classTextContainer = ['hy-link-box__text-container', this.imageUrl ? 'hy-link-box--with-image' : null].join(
' '
);
const target = this.isExternal ? '_blank' : '_self';
- const aspectRatioWidth = 3;
- const aspectRatioHeight = 2;
+ const aspectRatioWidth = 16;
+ const aspectRatioHeight = 10;
const aspect = (aspectRatioHeight / aspectRatioWidth) * 100;
const aspectRatio = {
- '--aspectRatio': `${aspect}%` as 'aspectRatio'
+ '--aspectRatio': `${aspect}%` as 'aspectRatio',
};
return [
<article>
<a class={classAttributes} href={this.url} target={target}>
- <div class="hy-link-box__image-container" style={aspectRatio}>
- {this.imageUrl && <img aria-hidden="true" src={this.imageUrl} alt={this.imageAlt} />}
- </div>
+ {this.imageUrl && (
+ <div class="hy-link-box__image-container" style={aspectRatio}>
+ <img aria-hidden="true" src={this.imageUrl} alt={this.imageAlt} />
+ </div>
+ )}
<div class={classTextContainer}>
<h3 class="hy-link-box__text-container__title">{this.textTitle}</h3>
{this.textDescription && <div class="hy-link-box__text-container__description">{this.textDescription}</div>}
</div>
</a>
</article>,
- <div class="hy-link-box__link" aria-hidden="true">
+ <div class={classLinkAttributes} aria-hidden="true">
<hy-icon icon={'hy-icon-arrow-right'} size={48} />
- </div>
+ </div>,
];
}
}
+
+/*
+<div class="hy-link-box__image-container" style={aspectRatio}>
+ {this.imageUrl && <img aria-hidden="true" src={this.imageUrl} alt={this.imageAlt} />}
+ </div>
+* */
diff --git a/src/components/link-box/readme.md b/src/components/link-box/readme.md
index dc6c651d..031c1e8b 100644
--- a/src/components/link-box/readme.md
+++ b/src/components/link-box/readme.md
@@ -6,6 +6,7 @@
| Property | Attribute | Description | Type | Default |
| ----------------- | ------------------ | ----------- | -------------------------------------------------------- | ------------------------- |
+| `headerstyle` | `headerstyle` | | `string` | `'common'` |
| `imageAlt` | `image-alt` | | `string` | `null` |
| `imageUrl` | `image-url` | | `string` | `null` |
| `isExternal` | `is-external` | | `boolean` | `false` |
--
GitLab