Skip to content

Commit a6aa461

Browse files
nielslyngsoenielslyngsoe
committedDec 20, 2021
scroll container initialized
1 parent 4b951bc commit a6aa461

File tree

10 files changed

+332
-31
lines changed

10 files changed

+332
-31
lines changed
 

‎package-lock.json

+25
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

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

+43
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/uui-scroll-container@X.X.X/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

+4
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);

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

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import { LitElement, html, css } from 'lit';
2+
3+
/**
4+
* @element uui-overflow-container
5+
* @slot - for content
6+
* @description - Component for displaying a larger amount of .
7+
*/
8+
export class UUIScrollContainerElement extends LitElement {
9+
static styles = [
10+
css`
11+
:host {
12+
--uui-overflow-container-height: 180px;
13+
}
14+
15+
:host {
16+
display: block;
17+
scrollbar-width: thin;
18+
scrollbar-color: var(--uui-interface-contrast-disabled)
19+
var(--uui-interface-background-alt);
20+
overflow-y: scroll;
21+
max-height: var(--uui-overflow-container-height);
22+
}
23+
24+
:host::-webkit-scrollbar {
25+
width: 5px;
26+
}
27+
28+
:host::-webkit-scrollbar-track {
29+
background: var(--uui-interface-background-alt);
30+
border-radius: 12px;
31+
}
32+
:host::-webkit-scrollbar-thumb {
33+
background-color: var(--uui-interface-contrast-disabled);
34+
border-radius: 12px;
35+
}
36+
`,
37+
];
38+
39+
render() {
40+
return html`<slot></slot>`;
41+
}
42+
}

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

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

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

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
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></uui-scroll-container> `
11+
);
12+
});
13+
14+
it('passes the a11y audit', async () => {
15+
await expect(element).shadowDom.to.be.accessible();
16+
});
17+
});

‎packages/uui-scroll-container/package.json

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
{
2+
"name": "@umbraco-ui/uui-scroll-container",
3+
"version": "0.0.0",
4+
"license": "MIT",
5+
"keywords": [
6+
"Umbraco",
7+
"Custom elements",
8+
"Web components",
9+
"UI",
10+
"Lit",
11+
"Scroll Container"
12+
],
13+
"description": "Umbraco UI scroll-container component",
14+
"repository": {
15+
"type": "git",
16+
"url": "https://github.com/umbraco/Umbraco.UI.git",
17+
"directory": "packages/uui-scroll-container"
18+
},
19+
"bugs": {
20+
"url": "https://github.com/umbraco/Umbraco.UI/issues"
21+
},
22+
"main": "./dist/uui-scroll-container.min.js",
23+
"module": "./lib/index.js",
24+
"customElements": "custom-elements.json",
25+
"files": [
26+
"dist",
27+
"lib/**/*.d.ts",
28+
"lib/**/*.js",
29+
"custom-elements.json"
30+
],
31+
"dependencies": {
32+
"@umbraco-ui/uui-base": "0.0.13"
33+
},
34+
"scripts": {
35+
"build": "npm run analyze && tsc --build --force && rollup -c rollup.config.js",
36+
"clean": "tsc --build --clean && rimraf dist lib/*.js lib/**/*.js custom-elements.json",
37+
"analyze": "web-component-analyzer **/*.element.ts --outFile custom-elements.json"
38+
},
39+
"publishConfig": {
40+
"access": "public"
41+
},
42+
"homepage": "https://uui.umbraco.com/?path=/story/uui-scroll-container"
43+
}

‎packages/uui-scroll-container/rollup.config.js

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import { UUIProdConfig } from '../rollup-package.config';
2+
3+
export default UUIProdConfig({
4+
entryPoints: ['index', 'uui-scroll-container.element'],
5+
bundle: 'index',
6+
});

‎packages/uui-scroll-container/tsconfig.json

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
// Don't edit this file directly. It is generated by /scripts/generate-ts-config.js
2+
3+
{
4+
"extends": "../../tsconfig.json",
5+
"compilerOptions": {
6+
"outDir": "./lib",
7+
"rootDir": "./lib",
8+
"composite": true
9+
},
10+
"include": ["./**/*.ts"],
11+
"exclude": ["./**/*.test.ts", "./**/*.story.ts"],
12+
"references": [
13+
{
14+
"path": "../uui-base"
15+
}
16+
]
17+
}

0 commit comments

Comments
 (0)