Skip to content

Commit 32525bb

Browse files
madsrasmussenmadsrasmussen
committed
Merge branch 'dev' into v0/feature-uui-pagination
2 parents c9c1819 + 4b951bc commit 32525bb

File tree

64 files changed

+1880
-3513
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

64 files changed

+1880
-3513
lines changed

‎package-lock.json

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

‎packages/uui-base/lib/mixins/SelectableComponentMixin.ts renamed to ‎packages/uui-base/lib/mixins/SelectableMixin.ts

File renamed without changes.

‎packages/uui-base/lib/mixins/index.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
export * from './ActiveMixin';
22
export * from './LabelMixin';
3-
export * from './SelectableComponentMixin';
3+
export * from './SelectableMixin';

‎packages/uui-card-content-node/README.md

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

‎packages/uui-card-content-node/lib/index.ts

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

‎packages/uui-card-content-node/lib/uui-card-content-node.element.ts

Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
import { css, html } from 'lit';
2+
import { property, state } from 'lit/decorators.js';
3+
import { UUICardElement } from '@umbraco-ui/uui-card/lib/uui-card.element';
4+
5+
/**
6+
* @element uui-card-content-node
7+
* @fires {UUICardEvent} open - fires when the card title is clicked
8+
* @fires {UUICardEvent} selected - fires when the card is selected
9+
* @description - Card component for displaying a content-node.
10+
*/
11+
12+
export class UUICardContentNodeElement extends UUICardElement {
13+
static styles = [
14+
...UUICardElement.styles,
15+
css`
16+
:host {
17+
min-width: 250px;
18+
flex-direction: column;
19+
justify-content: space-between;
20+
padding: var(--uui-size-3) var(--uui-size-4);
21+
}
22+
23+
slot[name='tag'] {
24+
position: absolute;
25+
top: var(--uui-size-4);
26+
right: var(--uui-size-4);
27+
display: flex;
28+
justify-content: right;
29+
}
30+
31+
slot[name='actions'] {
32+
position: absolute;
33+
top: var(--uui-size-4);
34+
right: var(--uui-size-4);
35+
display: flex;
36+
justify-content: right;
37+
38+
opacity: 0;
39+
transition: opacity 120ms;
40+
}
41+
:host(:focus) slot[name='actions'],
42+
:host(:focus-within) slot[name='actions'],
43+
:host(:hover) slot[name='actions'] {
44+
opacity: 1;
45+
}
46+
47+
slot:not([name]) {
48+
display: block;
49+
margin: var(--uui-size-1);
50+
margin-top: var(--uui-size-3);
51+
}
52+
53+
slot:not([name])::slotted(*) {
54+
font-size: var(--uui-type-small-size);
55+
line-height: calc(2 * var(--uui-size-3));
56+
}
57+
58+
#icon {
59+
font-size: 1.2em;
60+
margin-right: var(--uui-size-1);
61+
}
62+
63+
#open-part {
64+
display: flex;
65+
position: relative;
66+
font-weight: 700;
67+
align-items: center;
68+
cursor: pointer;
69+
}
70+
71+
:host([disabled]) #open-part {
72+
pointer-events: none;
73+
}
74+
75+
#open-part:hover {
76+
text-decoration: underline;
77+
color: var(--uui-interface-contrast-hover);
78+
}
79+
80+
#name {
81+
margin-top: 4px;
82+
}
83+
`,
84+
];
85+
86+
/**
87+
* Node name
88+
* @type {boolean}
89+
* @attr name
90+
* @default ''
91+
*/
92+
@property({ type: String })
93+
name = '';
94+
95+
@state()
96+
private _iconSlotHasContent = false;
97+
98+
protected fallbackIcon =
99+
'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M396.441 138.878l-83.997-83.993-7.331-7.333H105.702v416.701h298.071V146.214l-7.332-7.336zM130.74 439.217V72.591h141.613c37.201 0 19.274 88.18 19.274 88.18s86-20.901 87.104 18.534v259.912H130.74z"></path></svg>';
100+
101+
private _onSlotIconChange(event: Event) {
102+
this._iconSlotHasContent =
103+
(event.target as HTMLSlotElement).assignedNodes({ flatten: true })
104+
.length > 0;
105+
}
106+
107+
private _renderFallbackIcon() {
108+
return html`<uui-icon .svg="${this.fallbackIcon}"></uui-icon>`;
109+
}
110+
111+
public render() {
112+
return html`
113+
<slot name="tag"></slot>
114+
<slot name="actions"></slot>
115+
<div
116+
id="open-part"
117+
tabindex="0"
118+
@click=${this.handleOpenClick}
119+
@keydown=${this.handleOpenKeydown}>
120+
<span id="icon">
121+
<slot name="icon" @slotchange=${this._onSlotIconChange}></slot>
122+
${this._iconSlotHasContent === false
123+
? this._renderFallbackIcon()
124+
: ''}
125+
</span>
126+
<span id="name"> ${this.name} </span>
127+
</div>
128+
<!-- Select border must be right after #open-part -->
129+
<div id="select-border"></div>
130+
131+
<slot></slot>
132+
`;
133+
}
134+
}

‎packages/uui-card-content-node/lib/uui-card-content-node.story.ts

Lines changed: 169 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,169 @@
1+
import { html } from 'lit-html';
2+
import '@umbraco-ui/uui-card-content-node/lib/index';
3+
import { Story } from '@storybook/web-components';
4+
5+
export default {
6+
title: 'Displays/Cards/Content Node',
7+
component: 'uui-card-content-node',
8+
id: 'uui-card-content-node',
9+
args: {
10+
name: 'The card',
11+
selectable: false,
12+
selected: false,
13+
error: false,
14+
disabled: false,
15+
},
16+
};
17+
18+
export const AAAOverview: Story = props =>
19+
html`
20+
<div style="width: 300px">
21+
<uui-card-content-node
22+
name=${props.name}
23+
?selectable=${props.selectable}
24+
?selected=${props.selected}
25+
?error=${props.error}
26+
?disabled=${props.disabled}>
27+
<uui-tag size="s" slot="tag" look="positive">Published</uui-tag>
28+
<!-- TODO: we should make some kind of component for this data layout: -->
29+
<ul style="list-style: none; padding-inline-start: 0px; margin: 0;">
30+
<li><span style="font-weight: 700">Created:</span> Yesterday</li>
31+
<li>
32+
<span style="font-weight: 700">Last Edited: </span> 2021-03-15 09:29
33+
</li>
34+
<li>
35+
<span style="font-weight: 700">Some property:</span> Some value
36+
</li>
37+
<li>
38+
<span style="font-weight: 700">Another property:</span> Another
39+
value
40+
</li>
41+
</ul>
42+
</uui-card-content-node>
43+
</div>
44+
`;
45+
AAAOverview.storyName = 'Overview';
46+
AAAOverview.parameters = {
47+
docs: {
48+
source: {
49+
code: `<uui-card-content-node name="The card">
50+
<!-- Missing proper layout component for the details -->
51+
</uui-card-content-node>`,
52+
},
53+
},
54+
};
55+
56+
export const CustomIcon: Story = props => html`
57+
<div style="width: 300px">
58+
<uui-card-content-node
59+
name=${props.name}
60+
?selectable=${props.selectable}
61+
?selected=${props.selected}
62+
?error=${props.error}
63+
?disabled=${props.disabled}>
64+
<uui-icon slot="icon" name="bug"></uui-icon>
65+
<uui-tag size="s" slot="tag" look="positive">Published</uui-tag>
66+
<!-- TODO: we should make some kind of component for this data layout: -->
67+
<ul style="list-style: none; padding-inline-start: 0px; margin: 0;">
68+
<li><span style="font-weight: 700">Created:</span> Yesterday</li>
69+
<li>
70+
<span style="font-weight: 700">Last Edited: </span> 2021-03-15 09:29
71+
</li>
72+
<li><span style="font-weight: 700">Some property:</span> Some value</li>
73+
<li>
74+
<span style="font-weight: 700">Another property:</span> Another value
75+
</li>
76+
</ul>
77+
</uui-card-content-node>
78+
</div>
79+
`;
80+
81+
CustomIcon.parameters = {
82+
docs: {
83+
source: {
84+
code: `
85+
<uui-card-content-node selectable name="The card">
86+
<uui-icon slot="icon" name="bug"></uui-icon>
87+
</uui-card-content-node>
88+
`,
89+
},
90+
},
91+
};
92+
93+
export const Actions: Story = props => html`
94+
<div style="width: 300px">
95+
<uui-card-content-node
96+
name=${props.name}
97+
?selectable=${props.selectable}
98+
?selected=${props.selected}
99+
?error=${props.error}
100+
?disabled=${props.disabled}>
101+
<uui-action-bar slot="actions">
102+
<uui-button label="Remove">Remove</uui-button>
103+
</uui-action-bar>
104+
<!-- TODO: we should make some kind of component for this data layout: -->
105+
<ul style="list-style: none; padding-inline-start: 0px; margin: 0;">
106+
<li><span style="font-weight: 700">Created:</span> Yesterday</li>
107+
<li>
108+
<span style="font-weight: 700">Last Edited: </span> 2021-03-15 09:29
109+
</li>
110+
<li><span style="font-weight: 700">Some property:</span> Some value</li>
111+
<li>
112+
<span style="font-weight: 700">Another property:</span> Another value
113+
</li>
114+
</ul>
115+
</uui-card-content-node>
116+
</div>
117+
`;
118+
119+
Actions.parameters = {
120+
docs: {
121+
source: {
122+
code: `
123+
<uui-card-content-node selectable name="The card">
124+
<uui-action-bar slot="actions">
125+
<uui-button label="Remove">Remove</uui-button>
126+
</uui-action-bar>
127+
</uui-card-content-node>
128+
`,
129+
},
130+
},
131+
};
132+
133+
export const Disabled: Story = props => html`
134+
<div style="width: 300px">
135+
<uui-card-content-node
136+
name=${props.name}
137+
?selectable=${props.selectable}
138+
?selected=${props.selected}
139+
?error=${props.error}
140+
?disabled=${props.disabled}>
141+
<uui-tag size="s" slot="tag" look="positive">Published</uui-tag>
142+
<!-- TODO: we should make some kind of component for this data layout: -->
143+
<ul style="list-style: none; padding-inline-start: 0px; margin: 0;">
144+
<li><span style="font-weight: 700">Created:</span> Yesterday</li>
145+
<li>
146+
<span style="font-weight: 700">Last Edited: </span> 2021-03-15 09:29
147+
</li>
148+
<li><span style="font-weight: 700">Some property:</span> Some value</li>
149+
<li>
150+
<span style="font-weight: 700">Another property:</span> Another value
151+
</li>
152+
</ul>
153+
</uui-card-content-node>
154+
</div>
155+
`;
156+
157+
Disabled.args = {
158+
disabled: true,
159+
};
160+
Disabled.parameters = {
161+
docs: {
162+
source: {
163+
code: `
164+
<uui-card-content-node disabled name="The card">
165+
</uui-card-content-node>
166+
`,
167+
},
168+
},
169+
};

0 commit comments

Comments
 (0)