scroll container

packages/uui-scroll-container/README.md

@@ -0,0 +1,43 @@
+# uui-scroll-container
+
+![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-scroll-container?logoColor=%231B264F)
+
+Umbraco style scroll-container component.
+
+## Installation
+
+### ES imports
+
+```zsh
+npm i @umbraco-ui/uui-scroll-container
+```
+
+Import the registration of `<uui-scroll-container>` via:
+
+```javascript
+import '@umbraco-ui/uui-scroll-container/lib';
+```
+
+When looking to leverage the `UUIScrollContainerElement` base class as a type and/or for extension purposes, do so via:
+
+```javascript
+import { UUIScrollContainerElement } from '@umbraco-ui/uui-scroll-container/lib/uui-scroll-container.element';
+```
+
+### CDN
+
+The component is available via CDN. This means it can be added to your application without the need of any bundler configuration. Here is how to use it with jsDelivr.
+
+```html
+<!-- Latest Version -->
+<script src="https://cdn.jsdelivr.net/npm/@umbraco-ui/uui-scroll-container@latest/dist/uui-scroll-container.min.js"></script>
+
+<!-- Specific version -->
+<script src="https://cdn.jsdelivr.net/npm/@umbraco-ui/[email protected]/dist/uui-scroll-container.min.js"></script>
+```
+
+## Usage
+
+```html
+<uui-scroll-container></uui-scroll-container>
+```

packages/uui-scroll-container/lib/index.ts

@@ -0,0 +1,4 @@
+import { UUIScrollContainerElement } from './uui-scroll-container.element';
+import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
+
+defineElement('uui-scroll-container', UUIScrollContainerElement as any);

src/components/uui-overflow-container/uui-overflow-container.element.ts → packages/uui-scroll-container/lib/uui-scroll-container.element.ts

@@ -1,40 +1,48 @@
 import { LitElement, html, css } from 'lit';
 
 /**
- *  @element uui-overflow-container
+ *  @element uui-scroll-container
  *  @slot - for content
+ *  @description - Component for displaying a larger amount of .
  */
-export class UUIOverflowContainer extends LitElement {
+export class UUIScrollContainerElement extends LitElement {
   static styles = [
     css`
-      :host {
-        --uui-overflow-container-height: 180px;
-      }
-
       :host {
         display: block;
         scrollbar-width: thin;
         scrollbar-color: var(--uui-interface-contrast-disabled)
           var(--uui-interface-background-alt);
         overflow-y: scroll;
-        max-height: var(--uui-overflow-container-height);
       }
 
+      /*
+      :host(:focus) {
+        outline-width: thin;
+        outline-color: var(--uui-interface-border);
+      }
+      */
+
       :host::-webkit-scrollbar {
-        width: 5px;
+        width: 6px;
+        height: 6px; /* needed for horizontal scrollbar */
       }
 
       :host::-webkit-scrollbar-track {
         background: var(--uui-interface-background-alt);
-        border-radius: 12px;
+        border-radius: 3px;
       }
       :host::-webkit-scrollbar-thumb {
         background-color: var(--uui-interface-contrast-disabled);
-        border-radius: 12px;
+        border-radius: 3px;
       }
     `,
   ];
 
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute('tabindex', '0');
+  }
   render() {
     return html`<slot></slot>`;
   }

packages/uui-scroll-container/lib/uui-scroll-container.story.ts

@@ -0,0 +1,136 @@
+import { Story } from '@storybook/web-components';
+import { html } from 'lit-html';
+import '@umbraco-ui/uui-scroll-container/lib/index';
+
+export default {
+  id: 'uui-scroll-container',
+  title: 'Displays/Scroll Container',
+  component: 'uui-scroll-container',
+};
+
+export const Overview: Story = () =>
+  html`
+    <uui-scroll-container style="width:400px; height:400px;">
+      <h3>You should try to be up here</h3>
+      <p>
+        clumsy, ok thank you for waiting<br />
+        Let's see if we can get this up and running<br />
+        umm we gotta a lot to cover over the next one and a half hour<br />
+        so errr, Say cheese, ahh awesome, what a wonderful day
+      </p>
+      <p>
+        Thank you very much for coming errr <br />
+        welcome to the biggest Codegarden ever<br />
+        without a doubt our biggest ever<br />
+        the biggest err ever Codegarden<br />
+        we are more than 380 people err today, <br />which is err about a little
+        more than twenty times the people at the first Codegarden<br />
+        err this year there is more than 700 people, <br />which makes it more
+        than 30 times bigger than the very first one<br />
+        err so awesome to be back at the err the err Umbraco festival
+      </p>
+      <p>
+        Hey, before we start I just want to be the first one to use the 'hi-five
+        I suck' tag<br />
+        the only thing that makes this very different from my normal Christmas
+        Eve<br />
+        is that I don't get sweaters like these from my inlaws which makes it
+        even better...<br />
+        so the book will be a little delayed, and that's my fault
+      </p>
+      <p>
+        ahhh it's amazing to be back <br />
+        umm I've really been looking forward to this<br />
+        I love Codegarden is because we're all together<br />
+        all the people you talk to on the forums, maillist people suddenly you
+        see them in real life<br />
+        this is fantastic<br />
+        but we just have so much to share
+      </p>
+      <p>
+        You should try to be up here<br />
+        it's scary and awesome at the same time
+      </p>
+      <p>
+        so let's err let's start<br />
+        perhaps always people say<br />
+        Doug has this weird thing on my machine, I can't see anything<br />
+        aha he has notes, he's been preparing<br />
+        which I have of course...
+      </p>
+      <p>
+        You should try to be up here<br />
+        I was here I think as the slide says quite a number of years ago<br />
+        We have slides and we have demos and there is so much that can go
+        wrong<br />
+        err which is awesome
+      </p>
+      <p>
+        So back in the day Per and I did demos and they failed<br />
+        and then we were told you can't fail in a keynote<br />
+        so then we made boring slideshow demos<br />
+        and pre-recorded videos<br />
+        and almost no dangerous demos <br />
+        and we are so bored<br />
+        we need stress<br />
+        we need panic<br />
+        we need to smell bad afterwards<br />
+        and then Pete Duncanson isn't here<br />
+        so we are going to have a buffet of Yellow Screens of Death
+      </p>
+      <p>You should try to be up here</p>
+      <p>
+        umm<br />
+        those hats are still in use, err at the HQ you have to wear the hat
+        <br />
+        if you forgot to log out of the computer <br />
+        and someone gets to post in Slack that you are giving out free beer,
+        <br />
+        you have to wear the hat.
+      </p>
+      <p>
+        I am really excited that so many people have come here<br />
+        it's pretty wild to just stand up here<br />
+        one of the reasons I love Codegarden is because we're all together<br />
+        all the people you talk to on the forums, maillist people<br />
+        suddenly you see them in real life and for me, that's kinda like
+        Christmas Eve
+      </p>
+      <p>
+        just think about it for a second <br />
+        people gathered here<br />
+        all passionate about Umbraco<br />
+        travelled across the world to share our ideas, our thoughts and maybe
+        even umm... some code<br />
+        I really think it's crazy
+      </p>
+      <p>
+        you should try to be up here <br />
+        it's the most awesome sight ever
+      </p>
+      <p>Are you ready?</p>
+      <p>I don't know if you can see the slides now?</p>
+      <p>
+        Community and Infinity<br />
+        Are you ready?<br />
+        don't worry it's not as abstract as it sounds
+      </p>
+      <p>there is a long break after this one so err</p>
+      <p>and now I have transitions</p>
+    </uui-scroll-container>
+  `;
+
+export const NotEnoughContent: Story = () =>
+  html`
+    <uui-scroll-container style="width:400px; height:400px;">
+      Very little text, no Scrollbar appearing
+    </uui-scroll-container>
+  `;
+
+export const VeryWideContent: Story = () =>
+  html`
+    <uui-scroll-container style="width:400px; height:400px;">
+      line is way toooo long
+      WWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYY<br />
+    </uui-scroll-container>
+  `;

packages/uui-scroll-container/lib/uui-scroll-container.test.ts

@@ -0,0 +1,117 @@
+import { html, fixture, expect } from '@open-wc/testing';
+import { UUIScrollContainerElement } from './uui-scroll-container.element';
+import '.';
+
+describe('UUIScrollContainerElement', () => {
+  let element: UUIScrollContainerElement;
+
+  beforeEach(async () => {
+    element = await fixture(
+      html`<uui-scroll-container style="width:200px; height:200px;">
+        1 line<br />
+        2 line<br />
+        3 line<br />
+        4 line<br />
+        5 line<br />
+        6 line<br />
+        7 line<br />
+        8 line<br />
+        9 line<br />
+        10 line<br />
+        11 line<br />
+        12 line<br />
+        13 line<br />
+        14 line<br />
+        15 line<br />
+        16 line<br />
+        17 line<br />
+        18 line<br />
+        19 line<br />
+        20 line
+      </uui-scroll-container>`
+    );
+  });
+
+  it('passes the a11y audit', async () => {
+    await expect(element).shadowDom.to.be.accessible();
+  });
+
+  it('can scroll', async () => {
+    element.scrollTop = 42;
+    await expect(element.scrollTop).to.be.equal(42);
+  });
+});
+
+describe('UUIScrollContainerElement with a lot of content', () => {
+  let element: UUIScrollContainerElement;
+
+  beforeEach(async () => {
+    element = await fixture(
+      html`<uui-scroll-container style="width:200px; height:200px;">
+        initial line is way toooo long
+        WWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYY<br />
+        1 line<br />
+        2 line<br />
+        3 line<br />
+        4 line<br />
+        5 line<br />
+        6 line<br />
+        7 line<br />
+        8 line<br />
+        9 line<br />
+        10 line<br />
+        11 line<br />
+        12 line<br />
+        13 line<br />
+        14 line<br />
+        15 line<br />
+        16 line<br />
+        17 line<br />
+        18 line<br />
+        19 line<br />
+        20 line
+      </uui-scroll-container>`
+    );
+  });
+
+  it('can scroll', async () => {
+    element.scrollTop = 42;
+    await expect(element.scrollTop).to.be.equal(42);
+  });
+
+  it('cant scroll to far', async () => {
+    element.scrollTop = 9999;
+    await expect(element.scrollTop).not.to.be.equal(9999);
+  });
+
+  it('cant scroll to less than zero', async () => {
+    element.scrollTop = -100;
+    await expect(element.scrollTop).to.be.equal(0);
+  });
+
+  it('can scroll sideways if content enforces it', async () => {
+    element.scrollLeft = 42;
+    await expect(element.scrollLeft).to.be.equal(42);
+  });
+});
+
+describe('UUIScrollContainerElement with very little content', () => {
+  let element: UUIScrollContainerElement;
+
+  beforeEach(async () => {
+    element = await fixture(
+      html`<uui-scroll-container style="width:200px; height:200px;">
+        very little content.
+      </uui-scroll-container>`
+    );
+  });
+  it('cannot scroll', async () => {
+    element.scrollTop = 10;
+    await expect(element.scrollTop).to.be.equal(0);
+  });
+
+  it('cannot scroll sideways', async () => {
+    element.scrollLeft = 42;
+    await expect(element.scrollLeft).to.be.equal(0);
+  });
+});