Merge branch 'dev' into feature/loader-bar-looks

Author: nielslyngsoe

package-lock.json

@@ -29,8 +29,5 @@ import { UUIBoxElement } from '@umbraco-ui/uui-box';
 ## Usage
 
 ```html
-<uui-box>
-  <div slot="header">Header</div>
-  <div slot="main">Main</main>
-</uui-box>
+<uui-box headline="Headline"> Content </uui-box>
 ```

packages/uui-box/README.md

@@ -1,40 +1,96 @@
+import { LitElement, html, css } from 'lit';
 import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
-import { css, html, LitElement } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 
 /**
  *  A box for grouping elements
  *  @element uui-box
- *  @slot header - header area for title
- *  @slot main - main content area
- *  @slot - area with no padding
+ *  @slot headline - headline area
+ *  @slot header - headline area
+ *  @slot default - area for the content of the box
+ *  @cssprop --uui-box-default-padding - overwrite the box padding
  *
  */
 @defineElement('uui-box')
 export class UUIBoxElement extends LitElement {
   static styles = [
+    UUITextStyles,
     css`
       :host {
         display: block;
         box-shadow: var(--uui-shadow-depth-1);
         border-radius: var(--uui-border-radius);
         background-color: var(--uui-interface-surface);
+        --uui-box-default-padding: var(--uui-size-space-5);
       }
 
-      ::slotted([slot='header']) {
+      #header {
+        display: block;
         border-bottom: 1px solid var(--uui-interface-border);
-        padding: var(--uui-size-4) var(--uui-size-5);
+        padding: var(--uui-size-space-4) var(--uui-size-space-5);
       }
 
-      ::slotted([slot='main']) {
-        padding: var(--uui-size-5);
+      slot:not([name]) {
+        display: block;
+        padding: var(--uui-box-default-padding, var(--uui-size-space-5));
       }
     `,
   ];
 
+  /**
+   * Headline for this box, can also be set via the 'box' slot.
+   * @type string
+   * @attr
+   * @default null
+   */
+  @property({ type: String })
+  headline: string | null = null;
+
+  @state()
+  private _headlineSlotHasContent = false;
+  private _headlineSlotChanged = (e: Event) => {
+    this._headlineSlotHasContent =
+      (e.target as HTMLSlotElement).assignedNodes({ flatten: true }).length > 0;
+  };
+
+  @state()
+  private _headerSlotHasContent = false;
+  private _headerSlotChanged = (e: Event) => {
+    this._headerSlotHasContent =
+      (e.target as HTMLSlotElement).assignedNodes({ flatten: true }).length > 0;
+  };
+
+  /**
+   * Renders a header with the header-slot, headline and headline-slot within
+   * @returns {TemplateResult}
+   * @protected
+   * @method
+   */
+  protected renderHeader() {
+    return html`<div
+      id="header"
+      class="uui-text"
+      style=${this._headerSlotHasContent ||
+      this._headlineSlotHasContent ||
+      this.headline !== null
+        ? ''
+        : 'display: none'}>
+      <h5
+        id="headline"
+        style=${this._headlineSlotHasContent || this.headline !== null
+          ? ''
+          : 'display: none'}>
+        ${this.headline}
+        <slot name="headline" @slotchange=${this._headlineSlotChanged}></slot>
+      </h5>
+      <slot name="header" @slotchange=${this._headerSlotChanged}></slot>
+    </div>`;
+  }
+
   render() {
     return html`
-      <slot name="header"></slot>
-      <slot name="main"></slot>
+      ${this.renderHeader()}
       <slot></slot>
     `;
   }

packages/uui-box/lib/uui-box.element.ts

@@ -10,23 +10,20 @@ export default {
 };
 
 const Template: Story = () => html`
-  <uui-box>
-    <div slot="header">Header</div>
-    <div slot="main">Main</div>
+  <uui-box headline="Headline">
+    Some content of this box, appended in the default slot.
   </uui-box>
 `;
 
 export const AAAOverview = Template.bind({});
 AAAOverview.storyName = 'Overview';
-AAAOverview.parameters = {
-  docs: {
-    source: {
-      code: `
-<uui-box>
-  <div slot="header">Header</div>
-  <div slot="main">Main</div>
-</uui-box>
-      `,
-    },
-  },
-};
+
+export const Slots: Story = () => html`
+  <uui-box>
+    <uui-button slot="headline" look="placeholder" style="font-weight:inherit;"
+      >Headline slot</uui-button
+    >
+    <uui-button slot="header" look="placeholder">Header slot</uui-button>
+    <uui-button look="placeholder">Default slot</uui-button>
+  </uui-box>
+`;

packages/uui-box/lib/uui-box.story.ts

@@ -5,9 +5,8 @@ import { UUIBoxElement } from './uui-box.element';
 describe('UUIBox', () => {
   let element: UUIBoxElement;
   beforeEach(async () => {
-    element = await fixture(html` <uui-box>
-      <div slot="header">Header</div>
-      <div slot="main">Main</div>
+    element = await fixture(html` <uui-box headline="headline">
+      Main
     </uui-box>`);
   });
 
@@ -18,4 +17,41 @@ describe('UUIBox', () => {
   it('passes the a11y audit', async () => {
     await expect(element).shadowDom.to.be.accessible();
   });
+
+  describe('properties', () => {
+    it('has a headline property', () => {
+      expect(element).to.have.property('headline');
+    });
+  });
+
+  describe('template', () => {
+    it('renders a default slot', () => {
+      const slot = element.shadowRoot!.querySelector('slot')!;
+      expect(slot).to.exist;
+    });
+
+    it('renders an headline slot', () => {
+      const slot = element.shadowRoot!.querySelector('slot[name=headline]')!;
+      expect(slot).to.exist;
+    });
+
+    it('renders a header slot', () => {
+      const slot = element.shadowRoot!.querySelector('slot[name=header]')!;
+      expect(slot).to.exist;
+    });
+  });
+
+  describe('UUIBox', () => {
+    let element: UUIBoxElement;
+    beforeEach(async () => {
+      element = await fixture(html` <uui-box>
+        <div slot="header">Something in the header</div>
+        Main
+      </uui-box>`);
+    });
+
+    it('passes the a11y audit', async () => {
+      await expect(element).shadowDom.to.be.accessible();
+    });
+  });
 });

packages/uui-box/lib/uui-box.test.ts

@@ -29,7 +29,8 @@
     "custom-elements.json"
   ],
   "dependencies": {
-    "@umbraco-ui/uui-base": "0.0.17"
+    "@umbraco-ui/uui-base": "0.0.17",
+    "@umbraco-ui/uui-css": "0.0.4"
   },
   "scripts": {
     "build": "npm run analyze && tsc --build --force && rollup -c rollup.config.js",

packages/uui-box/package.json

@@ -12,6 +12,9 @@
   "references": [
     {
       "path": "../uui-base"
+    },
+    {
+      "path": "../uui-css"
     }
   ]
 }