Padding grids and stuff

package.json

 {
   "name": "@itcenteratunihelsinki/huds-lib",
-  "version": "0.0.11",
+  "version": "0.0.14",
   "description": "Helsinki University Design System library",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -24,20 +24,20 @@
     "build.watch": "stencil build --docs --watch --serve"
   },
   "devDependencies": {
-    "@stencil/core": "^1.13.0",
+    "@stencil/core": "^1.14.0",
     "@stencil/react-output-target": "^0.0.6",
     "@stencil/sass": "^1.3.1",
     "@types/jest": "25.2.3",
     "@types/jest-axe": "^3.2.2",
     "@types/puppeteer": "3.0.0",
+    "husky": "4.2.5",
     "jest": "26.0.1",
     "jest-axe": "^3.4.0",
     "jest-cli": "26.0.1",
-    "puppeteer": "3.1.0",
-    "stylelint-config-recommended": "^3.0.0",
-    "husky": "4.2.5",
     "prettier": "2.0.5",
-    "pretty-quick": "2.0.1"
+    "pretty-quick": "2.0.1",
+    "puppeteer": "3.1.0",
+    "stylelint-config-recommended": "^3.0.0"
   },
   "license": "MIT",
   "dependencies": {
@@ -46,6 +46,7 @@
     "autoprefixer": "^9.8.0",
     "breakpoint-sass": "^2.7.1",
     "concurrently": "^5.2.0",
+    "emotion": "^10.0.27",
     "minimist": "^1.2.0",
     "node-sass": "^4.14.1",
     "postcss-import": "^12.0.1",

src/components.d.ts

@@ -29,7 +29,61 @@ export namespace Components {
   interface HyBadge {
     variant: 'primary' | 'warn' | 'success' | 'disabled';
   }
-  interface HyBaseline {}
+  interface HyBaseline {
+    margin: number;
+  }
+  interface HyBox {
+    /**
+     * value for vertical alignment (align-items)
+     */
+    align: string;
+    /**
+     * background color. Must use one of css variable names from color tokens
+     */
+    bg?: string;
+    /**
+     * fixed height for the container, useful for extra spacing containers
+     */
+    h?: number;
+    /**
+     * Value for horisontal alignment (justify-content)
+     */
+    justify: string;
+    /**
+     * All sides padding value in rems. Responsive when given Comma separated values.
+     */
+    p?: string;
+    /**
+     * Bottom padding in rems. Responsive when given Comma separated values.
+     */
+    pb?: string;
+    /**
+     * Left padding in rems. Responsive when given Comma separated values.
+     */
+    pl?: string;
+    /**
+     * Right padding in rems. Responsive when given Comma separated values.
+     */
+    pr?: string;
+    /**
+     * Top padding in rems. Responsive when given Comma separated values.
+     */
+    pt?: string;
+    /**
+     * Responsive width. Must be a comma separated string of percentage values for breakpoints. First item is the default value.
+     */
+    width: string;
+  }
+  interface HyBoxContainer {
+    /**
+     * Should the container have a max width of 90rems
+     */
+    maxWidth: boolean;
+    /**
+     * Should the items wrap to new rows.
+     */
+    wrap: boolean;
+  }
   interface HyButton {
     /**
      * Aria label for the element
@@ -107,6 +161,7 @@ export namespace Components {
   interface HyGridRow {}
   interface HyHeading {
     heading: HeadingVarians;
+    negative: boolean;
     section: HeadingSectionVariants;
   }
   interface HyIcon {
@@ -155,6 +210,7 @@ export namespace Components {
   interface HyRow {
     align: string;
     justify: string;
+    margin: number;
   }
   interface HySectionContainer {}
   interface HyStandaloneLink {
@@ -192,6 +248,16 @@ declare global {
     prototype: HTMLHyBaselineElement;
     new (): HTMLHyBaselineElement;
   };
+  interface HTMLHyBoxElement extends Components.HyBox, HTMLStencilElement {}
+  var HTMLHyBoxElement: {
+    prototype: HTMLHyBoxElement;
+    new (): HTMLHyBoxElement;
+  };
+  interface HTMLHyBoxContainerElement extends Components.HyBoxContainer, HTMLStencilElement {}
+  var HTMLHyBoxContainerElement: {
+    prototype: HTMLHyBoxContainerElement;
+    new (): HTMLHyBoxContainerElement;
+  };
   interface HTMLHyButtonElement extends Components.HyButton, HTMLStencilElement {}
   var HTMLHyButtonElement: {
     prototype: HTMLHyButtonElement;
@@ -298,6 +364,8 @@ declare global {
     'hy-accordion-item': HTMLHyAccordionItemElement;
     'hy-badge': HTMLHyBadgeElement;
     'hy-baseline': HTMLHyBaselineElement;
+    'hy-box': HTMLHyBoxElement;
+    'hy-box-container': HTMLHyBoxContainerElement;
     'hy-button': HTMLHyButtonElement;
     'hy-cta-liftup-image-text': HTMLHyCtaLiftupImageTextElement;
     'hy-cta-link-button': HTMLHyCtaLinkButtonElement;
@@ -331,7 +399,61 @@ declare namespace LocalJSX {
   interface HyBadge {
     variant?: 'primary' | 'warn' | 'success' | 'disabled';
   }
-  interface HyBaseline {}
+  interface HyBaseline {
+    margin?: number;
+  }
+  interface HyBox {
+    /**
+     * value for vertical alignment (align-items)
+     */
+    align?: string;
+    /**
+     * background color. Must use one of css variable names from color tokens
+     */
+    bg?: string;
+    /**
+     * fixed height for the container, useful for extra spacing containers
+     */
+    h?: number;
+    /**
+     * Value for horisontal alignment (justify-content)
+     */
+    justify?: string;
+    /**
+     * All sides padding value in rems. Responsive when given Comma separated values.
+     */
+    p?: string;
+    /**
+     * Bottom padding in rems. Responsive when given Comma separated values.
+     */
+    pb?: string;
+    /**
+     * Left padding in rems. Responsive when given Comma separated values.
+     */
+    pl?: string;
+    /**
+     * Right padding in rems. Responsive when given Comma separated values.
+     */
+    pr?: string;
+    /**
+     * Top padding in rems. Responsive when given Comma separated values.
+     */
+    pt?: string;
+    /**
+     * Responsive width. Must be a comma separated string of percentage values for breakpoints. First item is the default value.
+     */
+    width?: string;
+  }
+  interface HyBoxContainer {
+    /**
+     * Should the container have a max width of 90rems
+     */
+    maxWidth?: boolean;
+    /**
+     * Should the items wrap to new rows.
+     */
+    wrap?: boolean;
+  }
   interface HyButton {
     /**
      * Aria label for the element
@@ -409,6 +531,7 @@ declare namespace LocalJSX {
   interface HyGridRow {}
   interface HyHeading {
     heading?: HeadingVarians;
+    negative?: boolean;
     section?: HeadingSectionVariants;
   }
   interface HyIcon {
@@ -457,6 +580,7 @@ declare namespace LocalJSX {
   interface HyRow {
     align?: string;
     justify?: string;
+    margin?: number;
   }
   interface HySectionContainer {}
   interface HyStandaloneLink {
@@ -473,6 +597,8 @@ declare namespace LocalJSX {
     'hy-accordion-item': HyAccordionItem;
     'hy-badge': HyBadge;
     'hy-baseline': HyBaseline;
+    'hy-box': HyBox;
+    'hy-box-container': HyBoxContainer;
     'hy-button': HyButton;
     'hy-cta-liftup-image-text': HyCtaLiftupImageText;
     'hy-cta-link-button': HyCtaLinkButton;
@@ -504,6 +630,8 @@ declare module '@stencil/core' {
       'hy-accordion-item': LocalJSX.HyAccordionItem & JSXBase.HTMLAttributes<HTMLHyAccordionItemElement>;
       'hy-badge': LocalJSX.HyBadge & JSXBase.HTMLAttributes<HTMLHyBadgeElement>;
       'hy-baseline': LocalJSX.HyBaseline & JSXBase.HTMLAttributes<HTMLHyBaselineElement>;
+      'hy-box': LocalJSX.HyBox & JSXBase.HTMLAttributes<HTMLHyBoxElement>;
+      'hy-box-container': LocalJSX.HyBoxContainer & JSXBase.HTMLAttributes<HTMLHyBoxContainerElement>;
       'hy-button': LocalJSX.HyButton & JSXBase.HTMLAttributes<HTMLHyButtonElement>;
       'hy-cta-liftup-image-text': LocalJSX.HyCtaLiftupImageText &
         JSXBase.HTMLAttributes<HTMLHyCtaLiftupImageTextElement>;

src/components/baseline/baseline.css

 div.hy-baseline {
   display: block;
-  margin-bottom: 1rem;
-}
-
-div.hy-baseline > * + * {
-  margin-top: 1rem;
-  display: block;
 }

src/components/baseline/baseline.tsx

-import { Component, h } from "@stencil/core";
+import {Component, h, Prop} from '@stencil/core';
+import {css} from 'emotion';
+
+const createCss = (value: number) => {
+  return css`
+    > * + * {
+      margin-top: ${value}rem;
+      display: block;
+    }
+  `;
+};
 
 @Component({
-  tag: "hy-baseline",
-  styleUrl: "baseline.css",
+  tag: 'hy-baseline',
+  styleUrl: 'baseline.css',
   shadow: false
 })
 export class Baseline {
+  @Prop() margin: number = 1;
   render() {
     return (
-      <div class="hy-baseline">
+      <div class={createCss(this.margin)}>
         <slot></slot>
       </div>
     );

src/components/baseline/readme.md

 # hy-baseline
 
-
-
 <!-- Auto Generated Below -->
 
+## Properties
+
+| Property | Attribute | Description | Type     | Default |
+| -------- | --------- | ----------- | -------- | ------- |
+| `margin` | `margin`  |             | `number` | `1`     |
 
-----------------------------------------------
+---
 
 Helsinki University Design System

src/components/button/button.scss

@@ -100,7 +100,7 @@
     display: block;
     border-bottom: 2px solid var(--additional-skyblue);
     position: absolute;
-    bottom: -4.5px;
+    bottom: -3.5px;
     left: 3px;
     right: 3px;
     z-index: 0;

src/components/cta-liftup-image-text/readme.md

@@ -6,7 +6,7 @@
 
 | Property                   | Attribute                      | Description | Type      | Default     |
 | -------------------------- | ------------------------------ | ----------- | --------- | ----------- |
-| `imageAlt`                 | `image-alt`                    |             | `string`  | `""`        |
+| `imageAlt`                 | `image-alt`                    |             | `string`  | `''`        |
 | `imageRight`               | `image-right`                  |             | `boolean` | `false`     |
 | `imageUrl`                 | `image-url`                    |             | `string`  | `null`      |
 | `mainUrl`                  | `main-url`                     |             | `string`  | `undefined` |

src/components/grid-item/grid-item.tsx

-import { Component, Host, Prop, h } from '@stencil/core';
-import {
-  GridColumns,
-  GridColumnsSm,
-  GridColumnsLg,
-  GridAlignVariants
-} from '../../utils/utils';
+import {Component, Host, Prop, h} from '@stencil/core';
+import {GridColumns, GridColumnsSm, GridColumnsLg, GridAlignVariants} from '../../utils/utils';
 
 @Component({
   tag: 'hy-grid-item',
   styleUrl: 'grid-item.scss',
   shadow: false
 })
-
 export class GridItem {
   @Prop() columns: GridColumns = GridColumns.default;
   @Prop() columnssm: GridColumnsSm = GridColumnsSm.default;
@@ -20,20 +14,17 @@ export class GridItem {
 
   render() {
     const classAttributes = [
-      "hy-grid-item",
+      'hy-grid-item',
       `hy-grid__col-${this.columnssm}-sm`,
       `hy-grid__col-${this.columns}`,
       `hy-grid__col-${this.columnslg}-lg`,
-      `hy-grid-align__${this.contentalign}`,
+      `hy-grid-align__${this.contentalign}`
     ];
 
     return (
-      <Host
-        class={classAttributes.join(" ")}
-      >
+      <Host class={classAttributes.join(' ')}>
         <slot />
       </Host>
     );
   }
-
 }

src/components/grid-row/grid-row.tsx

-import { Component, Host, h } from '@stencil/core';
+import {Component, Host, h} from '@stencil/core';
 
 @Component({
   tag: 'hy-grid-row',
   styleUrl: 'grid-row.scss',
   shadow: false
 })
-
 export class GridRow {
   render() {
-    const classAttributes = ["hy-grid__row"];
-
+    const classAttributes = ['hy-grid__row'];
     return (
-      <Host class={classAttributes.join(" ")}>
+      <Host class={classAttributes.join(' ')}>
         <slot />
       </Host>
     );

src/components/heading/heading.scss

-
 :host {
   display: block;
 }
@@ -7,7 +6,7 @@
   display: flex;
   flex-direction: column-reverse;
   width: 100%;
-  
+
   @include breakpoint($medium) {
     flex-direction: row;
   }
@@ -44,15 +43,22 @@
   }
 }
 
-h1, h2, h3, h4, h5, h6 {
+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%;
+  &.negative {
+    color: white;
+  }
 }
-
 h1 {
   font-size: 32px;
   letter-spacing: -1px;
@@ -117,7 +123,7 @@ h6 {
   font-size: 14px;
   letter-spacing: -0.44px;
   line-height: 16px;
-  
+
   @include breakpoint($medium) {
     font-size: 16px;
     letter-spacing: -0.5px;

src/components/heading/heading.tsx

-import { Component, Prop, Host, h } from '@stencil/core';
-import { HeadingVarians, HeadingSectionVariants } from "../../utils/utils";
-
+import {Component, Prop, Host, h} from '@stencil/core';
+import {HeadingVarians, HeadingSectionVariants} from '../../utils/utils';
 
 @Component({
   tag: 'hy-heading',
   styleUrl: 'heading.scss',
-  shadow: true
+  scoped: true
 })
 export class Heading {
   @Prop() heading: HeadingVarians = HeadingVarians.default;
   @Prop() section: HeadingSectionVariants = HeadingSectionVariants.default;
-
-  
+  @Prop() negative: boolean = false;
   render() {
     const headingInVariants = this.heading in HeadingVarians;
-    const classAttributes = ["hy-heading"];
-    const sectionClassAttributes = [`hy-heading__${this.section}`].join(" ");
+    const classAttributes = ['hy-heading', this.negative ? 'negative' : ''];
+    const sectionClassAttributes = [`hy-heading__${this.section}`].join(' ');
     return (
-        <Host>
-          { headingInVariants
-            ? <div class="hy-heading__container"><this.heading class={classAttributes.join(" ")}><slot /></this.heading><span class={sectionClassAttributes}></span></div>
-            : <div class="hy-heading__container"><HeadingVarians.default class={classAttributes.join(" ")}><slot /></HeadingVarians.default><span class={sectionClassAttributes}></span></div>
-          }
-        </Host>
+      <Host>
+        {headingInVariants ? (
+          <div class="hy-heading__container">
+            <this.heading class={classAttributes.join(' ')}>
+              <slot />
+            </this.heading>
+
+            <span class={sectionClassAttributes}></span>
+          </div>
+        ) : (
+          <div class="hy-heading__container">
+            <HeadingVarians.default class={classAttributes.join(' ')}>
+              <slot />
+            </HeadingVarians.default>
 
+            <span class={sectionClassAttributes}></span>
+          </div>
+        )}
+      </Host>
     );
   }
 }

src/components/heading/readme.md

@@ -10,6 +10,7 @@ Heading element is used for different heading sizes. Heading type can be defined
 ## Usage
 
 ### Basic usage
+
 Provide heading attribute for the component to choose what type of heading to use.
 
 <hy-docs-container>
@@ -82,18 +83,16 @@ Provide heading attribute for the component to choose what type of heading to us
 </hy-docs-container>
 ```
 
-
 <!-- Auto Generated Below -->
 
-
 ## Properties
 
-| Property  | Attribute | Description | Type                                                                                                                              | Default                          |
-| --------- | --------- | ----------- | --------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- |
-| `heading` | `heading` |             | `HeadingVarians.default \| HeadingVarians.h2 \| HeadingVarians.h3 \| HeadingVarians.h4 \| HeadingVarians.h5 \| HeadingVarians.h6` | `HeadingVarians.default`         |
-| `section` | `section` |             | `HeadingSectionVariants.default \| HeadingSectionVariants.subSection`                                                             | `HeadingSectionVariants.default` |
+| Property   | Attribute  | Description | Type                                                                                                                              | Default                          |
+| ---------- | ---------- | ----------- | --------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- |
+| `heading`  | `heading`  |             | `HeadingVarians.default \| HeadingVarians.h2 \| HeadingVarians.h3 \| HeadingVarians.h4 \| HeadingVarians.h5 \| HeadingVarians.h6` | `HeadingVarians.default`         |
+| `negative` | `negative` |             | `boolean`                                                                                                                         | `false`                          |
+| `section`  | `section`  |             | `HeadingSectionVariants.default \| HeadingSectionVariants.subSection`                                                             | `HeadingSectionVariants.default` |
 
-
-----------------------------------------------
+---
 
 Helsinki University Design System

src/components/hy-box-container/hy-box-container.css

+:host {
+  display: block;
+}

src/components/hy-box-container/hy-box-container.tsx

+import {Component, Host, h, Prop} from '@stencil/core';
+import {css} from 'emotion';
+
+@Component({
+  tag: 'hy-box-container',
+  styleUrl: 'hy-box-container.css',
+  shadow: false
+})
+export class HyBoxContainer {
+  /**
+   * Should the items wrap to new rows.
+   */
+  @Prop() wrap: boolean = true;
+  /**
+   * Should the container have a max width of 90rems
+   */
+  @Prop() maxWidth: boolean = true;
+  render() {
+    return (
+      <Host style={{width: '100%', display: 'flex', flex: '1', justifyContent: 'center'}}>
+        <div
+          class={css`
+            display: flex;
+            width: 100%;
+            flex-wrap: ${this.wrap ? 'wrap' : 'no-wrap'};
+            max-width: ${this.maxWidth ? '90rem' : '100%'};
+          `}
+        >
+          <slot></slot>
+        </div>
+      </Host>
+    );
+  }
+}

src/components/hy-box-container/readme.md

+# hy-box-container
+
+<!-- Auto Generated Below -->
+
+## Properties
+
+| Property   | Attribute   | Description                                     | Type      | Default |
+| ---------- | ----------- | ----------------------------------------------- | --------- | ------- |
+| `maxWidth` | `max-width` | Should the container have a max width of 90rems | `boolean` | `true`  |
+| `wrap`     | `wrap`      | Should the items wrap to new rows.              | `boolean` | `true`  |
+
+---
+
+Helsinki University Design System

src/components/hy-box-container/test/hy-box-container.e2e.ts

+import {newE2EPage} from '@stencil/core/testing';
+
+describe('hy-box-container', () => {
+  it('renders', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<hy-box-container></hy-box-container>');
+
+    const element = await page.find('hy-box-container');
+    expect(element).toHaveClass('hydrated');
+  });
+});

src/components/hy-box-container/test/hy-box-container.spec.tsx

+import {newSpecPage} from '@stencil/core/testing';
+import {HyBoxContainer} from '../hy-box-container';
+
+describe('hy-box-container', () => {
+  it('renders', async () => {
+    const page = await newSpecPage({
+      components: [HyBoxContainer],
+      html: `<hy-box-container></hy-box-container>`
+    });
+    expect(page.root).toEqualHtml(`
+    <hy-box-container style="width: 100%; display: flex; flex: 1; justify-content: center;">
+      <div class="css-gkqfo7"></div>
+    </hy-box-container>
+    `);
+  });
+});

src/components/hy-box/hy-box.scss

+:host {
+  display: block;
+}

src/components/hy-box/hy-box.tsx

+import {Component, h, Prop, Host} from '@stencil/core';
+import {css} from 'emotion';
+
+const toRemValue = (val?: number) => {
+  return typeof val === 'number' ? `${val}rem` : undefined;
+};
+
+interface P {
+  p?: number[];
+  pt?: number[];
+  pl?: number[];
+  pb?: number[];
+  pr?: number[];
+  h?: number;
+  bg?: string;
+  width: string[];
+  justify: string;
+  align: string;
+}
+
+const breakpoints = ['30rem', '48rem', '60rem', '76rem', '80rem'];
+
+const mq = breakpoints.map((b) => `@media (min-width: ${b})`);
+const createCssClass = ({pt, pb, pl, pr, h, bg, width, justify, align}: P) => {
+  const last = width[width.length - 1];
+
+  return css`
+    padding-top: ${toRemValue(pt[0])};
+    padding-right: ${toRemValue(pr[0])};
+    padding-bottom: ${toRemValue(pb[0])};
+    padding-left: ${toRemValue(pl[0])};
+    height: ${toRemValue(h)};
+    background-color: ${!!bg ? `var(--${bg})` : 'transparent'};
+    width: ${width[0]};
+    display: flex;
+    justify-content: ${justify || 'flex-start'};
+    align-items: ${align || 'flex-start'};
+
+    ${mq[0]} {
+      width: ${width[1]};
+
+      padding-top: ${toRemValue(pt[1])};
+      padding-right: ${toRemValue(pr[1])};
+      padding-bottom: ${toRemValue(pb[1])};
+      padding-left: ${toRemValue(pl[1])};
+    }
+    ${mq[1]} {
+      width: ${width[2] || last};
+
+      padding-top: ${toRemValue(pt[2])};
+      padding-right: ${toRemValue(pr[2])};
+      padding-bottom: ${toRemValue(pb[2])};
+      padding-left: ${toRemValue(pl[2])};
+    }
+    ${mq[2]} {
+      width: ${width[3] || last};
+
+      padding-top: ${toRemValue(pt[3])};
+      padding-right: ${toRemValue(pr[3])};
+      padding-bottom: ${toRemValue(pb[3])};
+      padding-left: ${toRemValue(pl[3])};
+    }
+    ${mq[3]} {
+      width: ${width[4] || last};
+
+      padding-top: ${toRemValue(pt[4])};
+      padding-right: ${toRemValue(pr[4])};
+      padding-bottom: ${toRemValue(pb[4])};
+      padding-left: ${toRemValue(pl[4])};
+    }
+    ${mq[4]} {
+      width: ${width[5] || last};
+      padding-top: ${toRemValue(pt[5])};
+      padding-right: ${toRemValue(pr[5])};
+      padding-bottom: ${toRemValue(pb[5])};
+      padding-left: ${toRemValue(pl[5])};
+    }
+  `;
+};
+
+const toNumArray = (value?: string) =>
+  value
+    ?.split(',')
+    .map((v) => `${v.trim()}`)
+    .map((v) => parseFloat(v));
+
+@Component({
+  tag: 'hy-box',
+  styleUrl: 'hy-box.scss',
+  shadow: false
+})
+export class HyBox {
+  /**
+   * All sides padding value in rems. Responsive when given Comma separated values.
+   */
+  @Prop() p?: string;
+
+  /**
+   * Left padding in rems. Responsive when given Comma separated values.
+   */
+  @Prop() pl?: string;
+  /**
+   * Right padding in rems. Responsive when given Comma separated values.
+   */
+  @Prop() pr?: string;
+  /**
+   * Bottom padding in rems. Responsive when given Comma separated values.
+   */
+  @Prop() pb?: string;
+  /**
+   * Top padding in rems. Responsive when given Comma separated values.
+   */
+  @Prop() pt?: string;
+  /**
+   * Value for horisontal alignment (justify-content)
+   */
+  @Prop() justify: string = 'flex-start';
+  /**
+   * value for vertical alignment (align-items)
+   */
+  @Prop() align: string = 'baseline';
+
+  /**
+   * fixed height for the container, useful for extra spacing containers
+   */
+  @Prop() h?: number;
+  /**
+   * background color. Must use one of css variable names from color tokens
+   */
+  @Prop() bg?: string;
+  /**
+   * Responsive width. Must be a comma separated string of percentage values for breakpoints. First item is the default value.
+   */
+  @Prop() width: string = '100';
+
+  render() {
+    const pt = toNumArray(this.pt) ?? toNumArray(this.p) ?? [0];
+    const pb = toNumArray(this.pb) ?? toNumArray(this.p) ?? [0];
+    const pr = toNumArray(this.pr) ?? toNumArray(this.p) ?? [0];
+    const pl = toNumArray(this.pl) ?? toNumArray(this.p) ?? [0];
+
+    return (
+      <Host
+        class={createCssClass({
+          pt,
+          pl,
+          pr,
+          pb,
+          h: this.h,
+          bg: this.bg,
+          width: this.width.split(',').map((v) => `${v.trim()}%`),
+          justify: this.justify,
+          align: this.align
+        })}
+      >
+        <slot></slot>
+      </Host>
+    );
+  }
+}

src/components/hy-box/readme.md

+# hy-box
+
+<!-- Auto Generated Below -->
+
+## Properties
+
+| Property  | Attribute | Description                                                                                                               | Type     | Default        |
+| --------- | --------- | ------------------------------------------------------------------------------------------------------------------------- | -------- | -------------- |
+| `align`   | `align`   | value for vertical alignment (align-items)                                                                                | `string` | `'baseline'`   |
+| `bg`      | `bg`      | background color. Must use one of css variable names from color tokens                                                    | `string` | `undefined`    |
+| `h`       | `h`       | fixed height for the container, useful for extra spacing containers                                                       | `number` | `undefined`    |
+| `justify` | `justify` | Value for horisontal alignment (justify-content)                                                                          | `string` | `'flex-start'` |
+| `p`       | `p`       | All sides padding value in rems. Responsive when given Comma separated values.                                            | `string` | `undefined`    |
+| `pb`      | `pb`      | Bottom padding in rems. Responsive when given Comma separated values.                                                     | `string` | `undefined`    |
+| `pl`      | `pl`      | Left padding in rems. Responsive when given Comma separated values.                                                       | `string` | `undefined`    |
+| `pr`      | `pr`      | Right padding in rems. Responsive when given Comma separated values.                                                      | `string` | `undefined`    |
+| `pt`      | `pt`      | Top padding in rems. Responsive when given Comma separated values.                                                        | `string` | `undefined`    |
+| `width`   | `width`   | Responsive width. Must be a comma separated string of percentage values for breakpoints. First item is the default value. | `string` | `'100'`        |
+
+---
+
+Helsinki University Design System