Skip to content

Commit b80e73f

Browse files
madsrasmussenmadsrasmussen
authored
Merge pull request #77 from umbraco/feature/scroll-container
scroll container
2 parents 8bee392 + b18c1cf commit b80e73f

File tree

16 files changed

+4094
-6918
lines changed

16 files changed

+4094
-6918
lines changed

‎package-lock.json

Lines changed: 3691 additions & 6848 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/uui-scroll-container/README.md

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
# uui-scroll-container
2+
3+
![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-scroll-container?logoColor=%231B264F)
4+
5+
Umbraco style scroll-container component.
6+
7+
## Installation
8+
9+
### ES imports
10+
11+
```zsh
12+
npm i @umbraco-ui/uui-scroll-container
13+
```
14+
15+
Import the registration of `<uui-scroll-container>` via:
16+
17+
```javascript
18+
import '@umbraco-ui/uui-scroll-container/lib';
19+
```
20+
21+
When looking to leverage the `UUIScrollContainerElement` base class as a type and/or for extension purposes, do so via:
22+
23+
```javascript
24+
import { UUIScrollContainerElement } from '@umbraco-ui/uui-scroll-container/lib/uui-scroll-container.element';
25+
```
26+
27+
### CDN
28+
29+
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.
30+
31+
```html
32+
<!-- Latest Version -->
33+
<script src="https://cdn.jsdelivr.net/npm/@umbraco-ui/uui-scroll-container@latest/dist/uui-scroll-container.min.js"></script>
34+
35+
<!-- Specific version -->
36+
<script src="https://cdn.jsdelivr.net/npm/@umbraco-ui/[email protected]/dist/uui-scroll-container.min.js"></script>
37+
```
38+
39+
## Usage
40+
41+
```html
42+
<uui-scroll-container></uui-scroll-container>
43+
```

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import { UUIScrollContainerElement } from './uui-scroll-container.element';
2+
import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
3+
4+
defineElement('uui-scroll-container', UUIScrollContainerElement as any);

‎src/components/uui-overflow-container/uui-overflow-container.element.ts renamed to ‎packages/uui-scroll-container/lib/uui-scroll-container.element.ts

Lines changed: 18 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,48 @@
11
import { LitElement, html, css } from 'lit';
22

33
/**
4-
* @element uui-overflow-container
4+
* @element uui-scroll-container
55
* @slot - for content
6+
* @description - Component for displaying a larger amount of .
67
*/
7-
export class UUIOverflowContainer extends LitElement {
8+
export class UUIScrollContainerElement extends LitElement {
89
static styles = [
910
css`
10-
:host {
11-
--uui-overflow-container-height: 180px;
12-
}
13-
1411
:host {
1512
display: block;
1613
scrollbar-width: thin;
1714
scrollbar-color: var(--uui-interface-contrast-disabled)
1815
var(--uui-interface-background-alt);
1916
overflow-y: scroll;
20-
max-height: var(--uui-overflow-container-height);
2117
}
2218
19+
/*
20+
:host(:focus) {
21+
outline-width: thin;
22+
outline-color: var(--uui-interface-border);
23+
}
24+
*/
25+
2326
:host::-webkit-scrollbar {
24-
width: 5px;
27+
width: 6px;
28+
height: 6px; /* needed for horizontal scrollbar */
2529
}
2630
2731
:host::-webkit-scrollbar-track {
2832
background: var(--uui-interface-background-alt);
29-
border-radius: 12px;
33+
border-radius: 3px;
3034
}
3135
:host::-webkit-scrollbar-thumb {
3236
background-color: var(--uui-interface-contrast-disabled);
33-
border-radius: 12px;
37+
border-radius: 3px;
3438
}
3539
`,
3640
];
3741

42+
connectedCallback() {
43+
super.connectedCallback();
44+
this.setAttribute('tabindex', '0');
45+
}
3846
render() {
3947
return html`<slot></slot>`;
4048
}

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

Lines changed: 136 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
1+
import { Story } from '@storybook/web-components';
2+
import { html } from 'lit-html';
3+
import '@umbraco-ui/uui-scroll-container/lib/index';
4+
5+
export default {
6+
id: 'uui-scroll-container',
7+
title: 'Displays/Scroll Container',
8+
component: 'uui-scroll-container',
9+
};
10+
11+
export const Overview: Story = () =>
12+
html`
13+
<uui-scroll-container style="width:400px; height:400px;">
14+
<h3>You should try to be up here</h3>
15+
<p>
16+
clumsy, ok thank you for waiting<br />
17+
Let's see if we can get this up and running<br />
18+
umm we gotta a lot to cover over the next one and a half hour<br />
19+
so errr, Say cheese, ahh awesome, what a wonderful day
20+
</p>
21+
<p>
22+
Thank you very much for coming errr <br />
23+
welcome to the biggest Codegarden ever<br />
24+
without a doubt our biggest ever<br />
25+
the biggest err ever Codegarden<br />
26+
we are more than 380 people err today, <br />which is err about a little
27+
more than twenty times the people at the first Codegarden<br />
28+
err this year there is more than 700 people, <br />which makes it more
29+
than 30 times bigger than the very first one<br />
30+
err so awesome to be back at the err the err Umbraco festival
31+
</p>
32+
<p>
33+
Hey, before we start I just want to be the first one to use the 'hi-five
34+
I suck' tag<br />
35+
the only thing that makes this very different from my normal Christmas
36+
Eve<br />
37+
is that I don't get sweaters like these from my inlaws which makes it
38+
even better...<br />
39+
so the book will be a little delayed, and that's my fault
40+
</p>
41+
<p>
42+
ahhh it's amazing to be back <br />
43+
umm I've really been looking forward to this<br />
44+
I love Codegarden is because we're all together<br />
45+
all the people you talk to on the forums, maillist people suddenly you
46+
see them in real life<br />
47+
this is fantastic<br />
48+
but we just have so much to share
49+
</p>
50+
<p>
51+
You should try to be up here<br />
52+
it's scary and awesome at the same time
53+
</p>
54+
<p>
55+
so let's err let's start<br />
56+
perhaps always people say<br />
57+
Doug has this weird thing on my machine, I can't see anything<br />
58+
aha he has notes, he's been preparing<br />
59+
which I have of course...
60+
</p>
61+
<p>
62+
You should try to be up here<br />
63+
I was here I think as the slide says quite a number of years ago<br />
64+
We have slides and we have demos and there is so much that can go
65+
wrong<br />
66+
err which is awesome
67+
</p>
68+
<p>
69+
So back in the day Per and I did demos and they failed<br />
70+
and then we were told you can't fail in a keynote<br />
71+
so then we made boring slideshow demos<br />
72+
and pre-recorded videos<br />
73+
and almost no dangerous demos <br />
74+
and we are so bored<br />
75+
we need stress<br />
76+
we need panic<br />
77+
we need to smell bad afterwards<br />
78+
and then Pete Duncanson isn't here<br />
79+
so we are going to have a buffet of Yellow Screens of Death
80+
</p>
81+
<p>You should try to be up here</p>
82+
<p>
83+
umm<br />
84+
those hats are still in use, err at the HQ you have to wear the hat
85+
<br />
86+
if you forgot to log out of the computer <br />
87+
and someone gets to post in Slack that you are giving out free beer,
88+
<br />
89+
you have to wear the hat.
90+
</p>
91+
<p>
92+
I am really excited that so many people have come here<br />
93+
it's pretty wild to just stand up here<br />
94+
one of the reasons I love Codegarden is because we're all together<br />
95+
all the people you talk to on the forums, maillist people<br />
96+
suddenly you see them in real life and for me, that's kinda like
97+
Christmas Eve
98+
</p>
99+
<p>
100+
just think about it for a second <br />
101+
people gathered here<br />
102+
all passionate about Umbraco<br />
103+
travelled across the world to share our ideas, our thoughts and maybe
104+
even umm... some code<br />
105+
I really think it's crazy
106+
</p>
107+
<p>
108+
you should try to be up here <br />
109+
it's the most awesome sight ever
110+
</p>
111+
<p>Are you ready?</p>
112+
<p>I don't know if you can see the slides now?</p>
113+
<p>
114+
Community and Infinity<br />
115+
Are you ready?<br />
116+
don't worry it's not as abstract as it sounds
117+
</p>
118+
<p>there is a long break after this one so err</p>
119+
<p>and now I have transitions</p>
120+
</uui-scroll-container>
121+
`;
122+
123+
export const NotEnoughContent: Story = () =>
124+
html`
125+
<uui-scroll-container style="width:400px; height:400px;">
126+
Very little text, no Scrollbar appearing
127+
</uui-scroll-container>
128+
`;
129+
130+
export const VeryWideContent: Story = () =>
131+
html`
132+
<uui-scroll-container style="width:400px; height:400px;">
133+
line is way toooo long
134+
WWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYY<br />
135+
</uui-scroll-container>
136+
`;

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

Lines changed: 117 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
import { html, fixture, expect } from '@open-wc/testing';
2+
import { UUIScrollContainerElement } from './uui-scroll-container.element';
3+
import '.';
4+
5+
describe('UUIScrollContainerElement', () => {
6+
let element: UUIScrollContainerElement;
7+
8+
beforeEach(async () => {
9+
element = await fixture(
10+
html`<uui-scroll-container style="width:200px; height:200px;">
11+
1 line<br />
12+
2 line<br />
13+
3 line<br />
14+
4 line<br />
15+
5 line<br />
16+
6 line<br />
17+
7 line<br />
18+
8 line<br />
19+
9 line<br />
20+
10 line<br />
21+
11 line<br />
22+
12 line<br />
23+
13 line<br />
24+
14 line<br />
25+
15 line<br />
26+
16 line<br />
27+
17 line<br />
28+
18 line<br />
29+
19 line<br />
30+
20 line
31+
</uui-scroll-container>`
32+
);
33+
});
34+
35+
it('passes the a11y audit', async () => {
36+
await expect(element).shadowDom.to.be.accessible();
37+
});
38+
39+
it('can scroll', async () => {
40+
element.scrollTop = 42;
41+
await expect(element.scrollTop).to.be.equal(42);
42+
});
43+
});
44+
45+
describe('UUIScrollContainerElement with a lot of content', () => {
46+
let element: UUIScrollContainerElement;
47+
48+
beforeEach(async () => {
49+
element = await fixture(
50+
html`<uui-scroll-container style="width:200px; height:200px;">
51+
initial line is way toooo long
52+
WWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYY<br />
53+
1 line<br />
54+
2 line<br />
55+
3 line<br />
56+
4 line<br />
57+
5 line<br />
58+
6 line<br />
59+
7 line<br />
60+
8 line<br />
61+
9 line<br />
62+
10 line<br />
63+
11 line<br />
64+
12 line<br />
65+
13 line<br />
66+
14 line<br />
67+
15 line<br />
68+
16 line<br />
69+
17 line<br />
70+
18 line<br />
71+
19 line<br />
72+
20 line
73+
</uui-scroll-container>`
74+
);
75+
});
76+
77+
it('can scroll', async () => {
78+
element.scrollTop = 42;
79+
await expect(element.scrollTop).to.be.equal(42);
80+
});
81+
82+
it('cant scroll to far', async () => {
83+
element.scrollTop = 9999;
84+
await expect(element.scrollTop).not.to.be.equal(9999);
85+
});
86+
87+
it('cant scroll to less than zero', async () => {
88+
element.scrollTop = -100;
89+
await expect(element.scrollTop).to.be.equal(0);
90+
});
91+
92+
it('can scroll sideways if content enforces it', async () => {
93+
element.scrollLeft = 42;
94+
await expect(element.scrollLeft).to.be.equal(42);
95+
});
96+
});
97+
98+
describe('UUIScrollContainerElement with very little content', () => {
99+
let element: UUIScrollContainerElement;
100+
101+
beforeEach(async () => {
102+
element = await fixture(
103+
html`<uui-scroll-container style="width:200px; height:200px;">
104+
very little content.
105+
</uui-scroll-container>`
106+
);
107+
});
108+
it('cannot scroll', async () => {
109+
element.scrollTop = 10;
110+
await expect(element.scrollTop).to.be.equal(0);
111+
});
112+
113+
it('cannot scroll sideways', async () => {
114+
element.scrollLeft = 42;
115+
await expect(element.scrollLeft).to.be.equal(0);
116+
});
117+
});

0 commit comments

Comments
 (0)