Skip to content

Commit e9e1a63

Browse files
nielslyngsoenielslyngsoe
committed
Merge branch 'dev' of https://github.com/umbraco/Umbraco.UI into dev
2 parents 4c25589 + 688e80e commit e9e1a63

13 files changed

+8768
-4601
lines changed

‎.eslintignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
node_modules/

‎package-lock.json

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

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -106,6 +106,7 @@
106106
],
107107
"lint-staged": {
108108
"**/*.ts": "tsc-files --project tsconfig-lint-staged.json",
109+
"**/*.{mjs}": "eslint --cache --fix -c .eslintrc.js",
109110
"*": "prettier --ignore-unknown --write"
110111
}
111112
}

‎packages/uui-action-bar/README.md

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

‎packages/uui-action-bar/lib/index.ts

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

‎packages/uui-action-bar/lib/uui-action-bar.element.ts

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import { css } from 'lit';
2+
import { UUIButtonGroupElement } from '@umbraco-ui/uui-button-group/lib/uui-button-group.element';
3+
4+
/**
5+
* @element uui-action-bar
6+
* @description - Extends button group to hold buttons with icons that represent actions.
7+
*/
8+
export class UUIActionBarElement extends UUIButtonGroupElement {
9+
static styles = [
10+
...UUIButtonGroupElement.styles,
11+
css`
12+
::slotted(*) {
13+
--uui-button-slot-padding-r-factor: 0.5;
14+
--uui-button-slot-padding-l-factor: 0.5;
15+
}
16+
17+
::slotted(uui-button:first-child) {
18+
--uui-button-border-radius: 50px 0 0 50px;
19+
--uui-button-slot-padding-l-factor: 1.5;
20+
}
21+
::slotted(uui-button:last-child) {
22+
--uui-button-border-radius: 0 50px 50px 0;
23+
--uui-button-slot-padding-r-factor: 1.5;
24+
}
25+
::slotted(uui-button:first-child:last-child) {
26+
--uui-button-border-radius: 50px 50px 50px 50px;
27+
--uui-button-slot-padding-l-factor: 1;
28+
--uui-button-slot-padding-r-factor: 1;
29+
}
30+
31+
::slotted([look='outline']),
32+
::slotted([look='placeholder']) {
33+
--uui-button-slot-padding-r-factor: 1;
34+
--uui-button-slot-padding-l-factor: 1;
35+
}
36+
37+
::slotted(uui-button[look='outline']:first-child),
38+
::slotted(uui-button[look='placeholder']:first-child) {
39+
--uui-button-border-radius: 50px 0 0 50px;
40+
--uui-button-slot-padding-l-factor: 1.5;
41+
}
42+
::slotted(uui-button[look='outline']:last-child),
43+
::slotted(uui-button[look='placeholder']:last-child) {
44+
--uui-button-border-radius: 0 50px 50px 0;
45+
--uui-button-slot-padding-r-factor: 1.5;
46+
}
47+
::slotted(uui-button[look='outline']:first-child:last-child),
48+
::slotted(uui-button[look='placeholder']:first-child:last-child) {
49+
--uui-button-border-radius: 50px 50px 50px 50px;
50+
--uui-button-slot-padding-l-factor: 1.5;
51+
--uui-button-slot-padding-r-factor: 1.5;
52+
}
53+
`,
54+
];
55+
}

‎packages/uui-action-bar/lib/uui-action-bar.story.ts

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
import { html } from 'lit-html';
2+
import '@umbraco-ui/uui-action-bar/lib/index';
3+
import '@umbraco-ui/uui-button/lib/index';
4+
import '@umbraco-ui/uui-icon/lib/index';
5+
import {
6+
InterfaceLookNames,
7+
InterfaceLookType,
8+
} from '@umbraco-ui/uui-base/lib/types';
9+
10+
export default {
11+
id: 'uui-action-bar',
12+
title: 'Buttons/Action Bar',
13+
component: 'uui-action-bar',
14+
parameters: {
15+
docs: {
16+
source: {
17+
code: `<uui-action-bar>...</uui-action-bar>`,
18+
},
19+
},
20+
},
21+
};
22+
23+
const buttons = ['bug', 'info', 'delete'];
24+
25+
export const Basic = () =>
26+
html`<uui-action-bar
27+
>${buttons.map(
28+
el => html`<uui-button><uui-icon name="${el}"></uui-icon></uui-button>`
29+
)}</uui-action-bar
30+
>`;
31+
32+
export const Single = () =>
33+
html`<uui-action-bar
34+
><uui-button look="outline"><uui-icon name="delete"></uui-icon></uui-button>
35+
</uui-action-bar>`;
36+
37+
export const AllStyles = () => html`
38+
${InterfaceLookNames.map(
39+
(lookName: InterfaceLookType) =>
40+
html` <uui-action-bar>
41+
${buttons.map(
42+
button => html`<uui-button .look=${lookName}>
43+
<uui-icon name="${button}"></uui-icon>
44+
</uui-button>`
45+
)} </uui-action-bar
46+
><br /><br /><br />`
47+
)}
48+
`;

‎packages/uui-action-bar/lib/uui-action-bar.test.ts

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { html, fixture, expect } from '@open-wc/testing';
2+
import { UUIActionBarElement } from './uui-action-bar.element';
3+
import '.';
4+
5+
describe('UUIActionBarElement', () => {
6+
let element: UUIActionBarElement;
7+
8+
beforeEach(async () => {
9+
element = await fixture(html` <uui-action-bar></uui-action-bar> `);
10+
});
11+
12+
it('passes the a11y audit', async () => {
13+
await expect(element).shadowDom.to.be.accessible();
14+
});
15+
});

‎packages/uui-action-bar/package.json

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
{
2+
"name": "@umbraco-ui/uui-action-bar",
3+
"version": "0.0.0",
4+
"license": "MIT",
5+
"keywords": [
6+
"Umbraco",
7+
"Custom elements",
8+
"Web components",
9+
"UI",
10+
"Lit",
11+
"Action Bar"
12+
],
13+
"description": "Umbraco UI action-bar component",
14+
"repository": {
15+
"type": "git",
16+
"url": "https://github.com/umbraco/Umbraco.UI.git",
17+
"directory": "packages/uui-action-bar"
18+
},
19+
"bugs": {
20+
"url": "https://github.com/umbraco/Umbraco.UI/issues"
21+
},
22+
"main": "./dist/uui-action-bar.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.12",
33+
"@umbraco-ui/uui-button-group": "0.0.7"
34+
},
35+
"scripts": {
36+
"build": "npm run analyze && tsc --build --force && rollup -c rollup.config.js",
37+
"clean": "tsc --build --clean && rimraf dist lib/*.js lib/**/*.js custom-elements.json",
38+
"analyze": "web-component-analyzer **/*.element.ts --outFile custom-elements.json"
39+
},
40+
"publishConfig": {
41+
"access": "public"
42+
},
43+
"homepage": "https://uui.umbraco.com/?path=/story/uui-action-bar"
44+
}

‎packages/uui-action-bar/rollup.config.js

Lines changed: 6 additions & 0 deletions
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-action-bar.element'],
5+
bundle: 'index',
6+
});

0 commit comments

Comments
 (0)