From d9389d9ed6d81ef86a249c72dd40b5d3e83c9a7e Mon Sep 17 00:00:00 2001
From: Tuukka Turu <tuukka.turu@druid.fi>
Date: Wed, 16 Dec 2020 11:33:17 +0200
Subject: [PATCH] Checkbox variant and few menu fixes
---
src/components.d.ts | 27 +++++
src/components/hy-checkbox/hy-checkbox.scss | 110 ++++++++++++++++++
src/components/hy-checkbox/hy-checkbox.tsx | 68 ++++++++---
src/components/hy-checkbox/readme.md | 11 +-
.../menu-level-container.scss | 2 +-
.../navigation/menu-sidebar/menu-sidebar.scss | 1 +
src/index.html | 25 ++++
src/utils/utils.ts | 5 +
8 files changed, 227 insertions(+), 22 deletions(-)
diff --git a/src/components.d.ts b/src/components.d.ts
index 66dee2dd..208b8836 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -9,6 +9,7 @@ import {
AccordionVariants,
BreadcrumbVariants,
ButtonVariants,
+ CheckboxVariants,
ColorVariant,
CourseVariants,
CtaLinkButtonVariants,
@@ -195,9 +196,22 @@ export namespace Components {
variant: ButtonVariants;
}
interface HyCheckbox {
+ /**
+ * Unique id for checkbox element
+ */
checkboxId: string | number;
+ /**
+ * Label for input to describe
+ */
checkboxLabel: string;
+ /**
+ * Value for input element
+ */
checkboxValue: string | number;
+ /**
+ * Variant to deifne what style of checkbox to use
+ */
+ variant: CheckboxVariants;
}
interface HyContentList {
dataItems: string;
@@ -1419,9 +1433,22 @@ declare namespace LocalJSX {
variant?: ButtonVariants;
}
interface HyCheckbox {
+ /**
+ * Unique id for checkbox element
+ */
checkboxId?: string | number;
+ /**
+ * Label for input to describe
+ */
checkboxLabel?: string;
+ /**
+ * Value for input element
+ */
checkboxValue?: string | number;
+ /**
+ * Variant to deifne what style of checkbox to use
+ */
+ variant?: CheckboxVariants;
}
interface HyContentList {
dataItems?: string;
diff --git a/src/components/hy-checkbox/hy-checkbox.scss b/src/components/hy-checkbox/hy-checkbox.scss
index 1a5ddc41..5af23e8a 100644
--- a/src/components/hy-checkbox/hy-checkbox.scss
+++ b/src/components/hy-checkbox/hy-checkbox.scss
@@ -81,3 +81,113 @@
}
}
}
+
+.hy-checkbox--button {
+ display: inline-block;
+ margin-right: 4px;
+ position: relative;
+
+ &__label {
+ @include font-size(12px, 14px);
+
+ align-items: center;
+ border: 0.5px solid var(--grayscale-medium-dark);
+ color: var(--link-blue);
+ display: inline-flex;
+ font-family: var(--main-font-family);
+ font-weight: 600;
+ letter-spacing: -0.3px;
+ padding: 12px 15px 12px 13px;
+ z-index: 1;
+
+ @include breakpoint($wide) {
+ @include font-size(14px, 18px);
+
+ letter-spacing: -0.4px;
+ padding: 9px 8px 9px 8px;
+ }
+ }
+
+ &__checkmark {
+ position: absolute;
+ right: 12px;
+ top: 0;
+ bottom: 0;
+
+ @include breakpoint($wide) {
+ right: 10px;
+ bottom: calc(50% + 10px);
+ }
+
+ svg {
+ bottom: 0;
+ left: 0;
+ position: absolute;
+ visibility: hidden;
+ }
+ }
+
+ &__label-icon {
+ height: 13px;
+ position: absolute;
+ width: 12px;
+
+ @include breakpoint($wide) {
+ padding: 10px;
+ right: -6px;
+ top: calc(50% + 5px);
+ }
+
+ svg {
+ background: var(--grayscale-white);
+ height: 12px;
+ left: 50%;
+ top: 50%;
+ transform: translate(-50%, -50%);
+ width: 12px;
+ }
+ }
+
+ &__checkbox {
+ height: 100%;
+ margin: 0;
+ opacity: 0;
+ position: absolute;
+ width: 100%;
+ z-index: 10;
+
+ &:checked {
+ & + label {
+ border: 1px solid var(--grayscale-black);
+ color: var(--grayscale-black);
+ padding: 12px 15px 12px 13px;
+
+ @include breakpoint($wide) {
+ border: 2px solid var(--grayscale-black);
+ padding: 8px 26px 8px 7px;
+ }
+
+ .hy-checkbox--button__checkmark {
+ .hy-checkbox--button__label-icon {
+ background: var(--grayscale-white);
+ }
+
+ svg {
+ visibility: visible;
+ }
+ }
+ }
+ }
+
+ &:hover {
+ cursor: pointer;
+ }
+
+ &:focus {
+ & + label {
+ outline-offset: 1px;
+ outline: 1px solid var(--link-blue);
+ }
+ }
+ }
+}
diff --git a/src/components/hy-checkbox/hy-checkbox.tsx b/src/components/hy-checkbox/hy-checkbox.tsx
index 67999a9a..53ab8374 100644
--- a/src/components/hy-checkbox/hy-checkbox.tsx
+++ b/src/components/hy-checkbox/hy-checkbox.tsx
@@ -1,4 +1,5 @@
import {Component, Host, h, Prop} from '@stencil/core';
+import {CheckboxVariants} from '../../utils/utils';
@Component({
tag: 'hy-checkbox',
@@ -6,25 +7,60 @@ import {Component, Host, h, Prop} from '@stencil/core';
shadow: false,
})
export class HyCheckbox {
+ /**
+ * Unique id for checkbox element
+ */
@Prop() checkboxId: string | number;
+ /**
+ * Value for input element
+ */
@Prop() checkboxValue: string | number;
+ /**
+ * Label for input to describe
+ */
@Prop() checkboxLabel: string;
+ /**
+ * Variant to deifne what style of checkbox to use
+ */
+ @Prop() variant: CheckboxVariants = CheckboxVariants.default;
+
render() {
- return (
- <Host class="hy-checkbox">
- <input
- type="checkbox"
- class="hy-checkbox__checkbox"
- id={`${this.checkboxId}`}
- value={`${this.checkboxValue}`}
- />
- <label class="hy-checkbox__label" htmlFor={`${this.checkboxId}`}>
- <span class="hy-checkbox__checkmark">
- <hy-icon class="hy-checkbox__label-icon" icon={'hy-icon-done'} size={23} aria-hidden="true" />
- </span>
- {this.checkboxLabel}
- </label>
- </Host>
- );
+ switch (this.variant) {
+ case 'button':
+ return (
+ <Host class="hy-checkbox--button">
+ <input
+ type="checkbox"
+ class="hy-checkbox--button__checkbox"
+ id={`${this.checkboxId}`}
+ value={`${this.checkboxValue}`}
+ />
+ <label class="hy-checkbox--button__label" htmlFor={`${this.checkboxId}`}>
+ {this.checkboxLabel}
+ <span class="hy-checkbox--button__checkmark">
+ <hy-icon class="hy-checkbox--button__label-icon" icon={'hy-icon-done'} size={14} aria-hidden="true" />
+ </span>
+ </label>
+ </Host>
+ );
+
+ default:
+ return (
+ <Host class="hy-checkbox">
+ <input
+ type="checkbox"
+ class="hy-checkbox__checkbox"
+ id={`${this.checkboxId}`}
+ value={`${this.checkboxValue}`}
+ />
+ <label class="hy-checkbox__label" htmlFor={`${this.checkboxId}`}>
+ <span class="hy-checkbox__checkmark">
+ <hy-icon class="hy-checkbox__label-icon" icon={'hy-icon-done'} size={23} aria-hidden="true" />
+ </span>
+ {this.checkboxLabel}
+ </label>
+ </Host>
+ );
+ }
}
}
diff --git a/src/components/hy-checkbox/readme.md b/src/components/hy-checkbox/readme.md
index d9e3e32e..68265a21 100644
--- a/src/components/hy-checkbox/readme.md
+++ b/src/components/hy-checkbox/readme.md
@@ -4,11 +4,12 @@
## Properties
-| Property | Attribute | Description | Type | Default |
-| --------------- | ---------------- | ----------- | ------------------ | ----------- |
-| `checkboxId` | `checkbox-id` | | `number \| string` | `undefined` |
-| `checkboxLabel` | `checkbox-label` | | `string` | `undefined` |
-| `checkboxValue` | `checkbox-value` | | `number \| string` | `undefined` |
+| Property | Attribute | Description | Type | Default |
+| --------------- | ---------------- | ----------------------------------------------- | ----------------------------------------------------- | -------------------------- |
+| `checkboxId` | `checkbox-id` | Unique id for checkbox element | `number \| string` | `undefined` |
+| `checkboxLabel` | `checkbox-label` | Label for input to describe | `string` | `undefined` |
+| `checkboxValue` | `checkbox-value` | Value for input element | `number \| string` | `undefined` |
+| `variant` | `variant` | Variant to deifne what style of checkbox to use | `CheckboxVariants.button \| CheckboxVariants.default` | `CheckboxVariants.default` |
## Dependencies
diff --git a/src/components/navigation/menu-level-container/menu-level-container.scss b/src/components/navigation/menu-level-container/menu-level-container.scss
index 0160314c..fa01163b 100644
--- a/src/components/navigation/menu-level-container/menu-level-container.scss
+++ b/src/components/navigation/menu-level-container/menu-level-container.scss
@@ -67,7 +67,7 @@
}
&.is-open,
&.active-trail-panel {
- height: fit-content;
+ height: 100vh;
min-height: var(--minHeight);
}
}
diff --git a/src/components/navigation/menu-sidebar/menu-sidebar.scss b/src/components/navigation/menu-sidebar/menu-sidebar.scss
index 907d4d23..6d953a3c 100644
--- a/src/components/navigation/menu-sidebar/menu-sidebar.scss
+++ b/src/components/navigation/menu-sidebar/menu-sidebar.scss
@@ -72,6 +72,7 @@
animation-name: sidepanel-movein;
display: flex;
height: auto;
+ min-height: 100vh;
width: 100%;
// Open sidenav panels. Set background color to non-active items
diff --git a/src/index.html b/src/index.html
index 34c4f285..c422381d 100644
--- a/src/index.html
+++ b/src/index.html
@@ -217,6 +217,31 @@
THIS IS MAIN CONTENT
</hy-paragraph-text>
+ <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-box>
+ <hy-row>
+ <hy-checkbox
+ variant="button"
+ checkbox-id="3"
+ checkbox-value="checkbox_3"
+ checkbox-label="Web pages (204)"
+ ></hy-checkbox>
+ <hy-checkbox
+ variant="button"
+ checkbox-id="4"
+ checkbox-value="checkbox_4"
+ checkbox-label="People (89)"
+ ></hy-checkbox>
+ <hy-checkbox
+ variant="button"
+ checkbox-id="5"
+ checkbox-value="checkbox_5"
+ checkbox-label="Filter with long label goes here (859)"
+ ></hy-checkbox>
+ </hy-row>
+
<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"
diff --git a/src/utils/utils.ts b/src/utils/utils.ts
index c2224f9b..5b18b9cc 100644
--- a/src/utils/utils.ts
+++ b/src/utils/utils.ts
@@ -177,3 +177,8 @@ export enum FooterLinkItemColor {
black = 'black',
white = 'white',
}
+
+export enum CheckboxVariants {
+ default = 'default',
+ button = 'button',
+}
--
GitLab