hy-main styles

src/components.d.ts

@@ -233,6 +233,9 @@ export namespace Components {
     dataItems: LinkBox[] | string;
     variant: LinkBoxVariants;
   }
+  interface HyMain {
+    hasSidebar: boolean;
+  }
   interface HyMenu {
     dataMenuDonate: string;
     dataMenuLanguage: string;
@@ -477,6 +480,11 @@ declare global {
     prototype: HTMLHyLinkBoxListElement;
     new (): HTMLHyLinkBoxListElement;
   };
+  interface HTMLHyMainElement extends Components.HyMain, HTMLStencilElement {}
+  var HTMLHyMainElement: {
+    prototype: HTMLHyMainElement;
+    new (): HTMLHyMainElement;
+  };
   interface HTMLHyMenuElement extends Components.HyMenu, HTMLStencilElement {}
   var HTMLHyMenuElement: {
     prototype: HTMLHyMenuElement;
@@ -580,6 +588,7 @@ declare global {
     'hy-link': HTMLHyLinkElement;
     'hy-link-box': HTMLHyLinkBoxElement;
     'hy-link-box-list': HTMLHyLinkBoxListElement;
+    'hy-main': HTMLHyMainElement;
     'hy-menu': HTMLHyMenuElement;
     'hy-menu-item': HTMLHyMenuItemElement;
     'hy-menu-language': HTMLHyMenuLanguageElement;
@@ -802,6 +811,9 @@ declare namespace LocalJSX {
     dataItems?: LinkBox[] | string;
     variant?: LinkBoxVariants;
   }
+  interface HyMain {
+    hasSidebar?: boolean;
+  }
   interface HyMenu {
     dataMenuDonate?: string;
     dataMenuLanguage?: string;
@@ -943,6 +955,7 @@ declare namespace LocalJSX {
     'hy-link': HyLink;
     'hy-link-box': HyLinkBox;
     'hy-link-box-list': HyLinkBoxList;
+    'hy-main': HyMain;
     'hy-menu': HyMenu;
     'hy-menu-item': HyMenuItem;
     'hy-menu-language': HyMenuLanguage;
@@ -991,6 +1004,7 @@ declare module '@stencil/core' {
       'hy-link': LocalJSX.HyLink & JSXBase.HTMLAttributes<HTMLHyLinkElement>;
       'hy-link-box': LocalJSX.HyLinkBox & JSXBase.HTMLAttributes<HTMLHyLinkBoxElement>;
       'hy-link-box-list': LocalJSX.HyLinkBoxList & JSXBase.HTMLAttributes<HTMLHyLinkBoxListElement>;
+      'hy-main': LocalJSX.HyMain & JSXBase.HTMLAttributes<HTMLHyMainElement>;
       'hy-menu': LocalJSX.HyMenu & JSXBase.HTMLAttributes<HTMLHyMenuElement>;
       'hy-menu-item': LocalJSX.HyMenuItem & JSXBase.HTMLAttributes<HTMLHyMenuItemElement>;
       'hy-menu-language': LocalJSX.HyMenuLanguage & JSXBase.HTMLAttributes<HTMLHyMenuLanguageElement>;

src/components/hy-main/hy-main.scss

 :host {
-  display: block;
+  display: flex;
 }
 
-.hy-main {
+.hy-main.with-sidebar {
+  display: flex;
+
+  .layout-content {
+    order: 2;
+  }
+  .layout-sidebar-first {
+    order: 1;
+  }
 }

src/components/hy-main/hy-main.tsx

@@ -3,19 +3,16 @@ import {Component, Prop, h} from '@stencil/core';
 @Component({
   tag: 'hy-main',
   styleUrl: 'hy-main.scss',
-  shadow: true
+  shadow: false,
 })
 export class HyMain {
   @Prop() hasSidebar: boolean = false;
 
   render() {
+    const classAttributes = ['hy-main', this.hasSidebar ? 'with-sidebar' : ''].join(' ');
+
     return (
-      <div
-        class={{
-          'hy-main': true,
-          'has-sidebar': this.hasSidebar
-        }}
-      >
+      <div class={classAttributes}>
         <slot />
       </div>
     );

src/components/hy-main/readme.md

+# hy-main
+
+<!-- Auto Generated Below -->
+
+## Properties
+
+| Property     | Attribute     | Description | Type      | Default |
+| ------------ | ------------- | ----------- | --------- | ------- |
+| `hasSidebar` | `has-sidebar` |             | `boolean` | `false` |
+
+---
+
+Helsinki University Design System

src/components/navigation/menu-item/readme.md

@@ -15,14 +15,14 @@
 | `isDemo`                  | `is-demo`                    |             | `boolean` | `false` |
 | `isHeading`               | `is-heading`                 |             | `boolean` | `false` |
 | `isParent`                | `is-parent`                  |             | `boolean` | `false` |
-| `label`                   | `label`                      |             | `string`  | `""`    |
-| `menuButtonSubmenuExpand` | `menu-button-submenu-expand` |             | `string`  | `""`    |
+| `label`                   | `label`                      |             | `string`  | `''`    |
+| `menuButtonSubmenuExpand` | `menu-button-submenu-expand` |             | `string`  | `''`    |
 | `menuItemAlternative`     | `menu-item-alternative`      |             | `boolean` | `false` |
-| `menuLinkId`              | `menu-link-id`               |             | `string`  | `""`    |
-| `menuType`                | `menu-type`                  |             | `string`  | `""`    |
-| `parentAsHeading`         | `parent-as-heading`          |             | `string`  | `""`    |
+| `menuLinkId`              | `menu-link-id`               |             | `string`  | `''`    |
+| `menuType`                | `menu-type`                  |             | `string`  | `''`    |
+| `parentAsHeading`         | `parent-as-heading`          |             | `string`  | `''`    |
 | `parentExpanded`          | `parent-expanded`            |             | `boolean` | `false` |
-| `url`                     | `url`                        |             | `string`  | `""`    |
+| `url`                     | `url`                        |             | `string`  | `''`    |
 
 ## Events
 

src/components/navigation/menu-level-container/readme.md

@@ -11,7 +11,7 @@
 | `headingItem`             | `heading-item`               |             | `any`     | `undefined` |
 | `menuButtonSubmenuExpand` | `menu-button-submenu-expand` |             | `string`  | `undefined` |
 | `menuLevel`               | `menu-level`                 |             | `number`  | `undefined` |
-| `menuType`                | `menu-type`                  |             | `string`  | `"mobile"`  |
+| `menuType`                | `menu-type`                  |             | `string`  | `'mobile'`  |
 | `triggerItem`             | `trigger-item`               |             | `string`  | `undefined` |
 
 ## Dependencies

src/components/navigation/menu/readme.md

@@ -12,7 +12,7 @@
 | `logoLabel`               | `logo-label`                 |             | `string`  | `undefined` |
 | `logoUrl`                 | `logo-url`                   |             | `string`  | `undefined` |
 | `menuButtonSubmenuExpand` | `menu-button-submenu-expand` |             | `string`  | `undefined` |
-| `menuType`                | `menu-type`                  |             | `string`  | `"desktop"` |
+| `menuType`                | `menu-type`                  |             | `string`  | `'desktop'` |
 | `open`                    | `open`                       |             | `boolean` | `true`      |
 
 ## Events