Skip to content

Commit 7be57a5

Browse files
MrEssexMrEssex
committed
Add back description item, if caption is defined on zn-inline wrap in description-item
1 parent becd39e commit 7be57a5

File tree

13 files changed

+239
-60
lines changed

13 files changed

+239
-60
lines changed

‎docs/pages/components/description-item.md‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
---
2+
meta:
3+
title: Description Item
4+
description:
5+
layout: component
6+
---
7+
8+
```html:preview
9+
<zn-sp divide no-gap>
10+
<zn-description-item label="Full name">
11+
<zn-inline-edit name="name" value="Margot Foster"></zn-inline-edit>
12+
</zn-description-item>
13+
<zn-description-item label="Full name">
14+
Margot Foster
15+
</zn-description-item>
16+
<zn-description-item label="Full name">
17+
margot.foster@example.com
18+
</zn-description-item>
19+
<zn-description-item label="Full name">
20+
lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna
21+
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
22+
</zn-description-item>
23+
</zn-sp>
24+
```
25+
26+
## Examples
27+
28+
### Lots of Content
29+
30+
```html:preview
31+
<zn-description-item label="Full name">
32+
lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna
33+
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
34+
</zn-description-item>
35+
```
36+
37+
### Second Example
38+
39+
TODO
40+
41+

‎docs/pages/components/empty-state.md‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,20 @@ layout: component
1616

1717
## Examples
1818

19-
### First Example
19+
### With Buttons
2020

21-
TODO
21+
```html:preview
22+
23+
<zn-empty-state
24+
caption="The Caption"
25+
description="The Description"
26+
icon="check">
27+
<zn-button-group>
28+
<zn-button>Button 1</zn-button>
29+
<zn-button>Button 2</zn-button>
30+
</zn-button-group>
31+
</zn-empty-state>
32+
```
2233

2334
### Second Example
2435

‎docs/pages/components/inline-edit.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ layout: component
99
1010
<zn-sp>
1111
<form action="#" method="get">
12-
<zn-inline-edit caption="Something" name="something" value="Awesome"></zn-inline-edit>
12+
<zn-inline-edit caption="Something" name="something" value="Awesome" edit-text="Edit"></zn-inline-edit>
1313
</form>
1414
<zn-inline-edit caption="Something" value="Awesome" action="#" method="GET"
1515
options="{&quot;1&quot;: &quot;Option 1&quot;,&quot;2&quot;: &quot;Option 2&quot;}">

‎docs/pages/getting-started/example-layout.md‎

Lines changed: 23 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -21,18 +21,31 @@ component you are using already includes padding or margin it will not be double
2121
<zn-cols layout="1,1">
2222
<zn-panel caption="Some Panel" description="Hello World">
2323
<zn-sp divide no-gap>
24-
<zn-inline-edit padded inline style="background: var(--zn-color-red-100);" caption="Label 1" value="This is awesome">
25-
</zn-inline-edit>
26-
<zn-inline-edit padded inline style="background: var(--zn-color-red-100);" caption="Label 2" value="This is awesome">
27-
</zn-inline-edit>
24+
<zn-description-item label="Full name">
25+
<zn-inline-edit name="name" value="Margot Foster"></zn-inline-edit>
26+
</zn-description-item>
27+
<zn-description-item label="Full name">
28+
Something
29+
<zn-button icon="add" color="secondary" size="x-small" slot="actions" icon-size="20"></zn-button>
30+
</zn-description-item>
31+
<zn-description-item label="Full name">
32+
Something
33+
<zn-button color="transparent" size="x-small" slot="actions">Update</zn-button>
34+
</zn-description-item>
35+
<zn-description-item label="Selet Option">
36+
<zn-inline-edit name="name" value="1"
37+
options="{&quot;1&quot;: &quot;Option 1&quot;,&quot;2&quot;: &quot;Option 2&quot;}"></zn-inline-edit>
38+
</zn-description-item>
2839
</zn-sp>
2940
</zn-panel>
3041
3142
<zn-panel caption="Some Panel">
3243
<zn-sp divide>
33-
<zn-inline-edit padded inline style="background: var(--zn-color-red-100);" caption="Label 1" value="This is awesome">
44+
<zn-inline-edit padded inline style="background: var(--zn-color-red-100);" caption="Label 1"
45+
value="This is awesome">
3446
</zn-inline-edit>
35-
<zn-inline-edit padded inline style="background: var(--zn-color-red-100);" caption="Label 2" value="This is awesome">
47+
<zn-inline-edit padded inline style="background: var(--zn-color-red-100);" caption="Label 2"
48+
value="This is awesome">
3649
</zn-inline-edit>
3750
</zn-sp>
3851
</zn-panel>
@@ -53,9 +66,11 @@ component you are using already includes padding or margin it will not be double
5366
</zn-sp>
5467
5568
<zn-sp id="something-else" divide>
56-
<zn-inline-edit padded inline style="background: var(--zn-color-red-100);" caption="Label 3" value="This is not awesome">
69+
<zn-inline-edit padded inline style="background: var(--zn-color-red-100);" caption="Label 3"
70+
value="This is not awesome">
5771
</zn-inline-edit>
58-
<zn-inline-edit padded inline style="background: var(--zn-color-red-100);" caption="Label 4" value="This is not awesome">
72+
<zn-inline-edit padded inline style="background: var(--zn-color-red-100);" caption="Label 4"
73+
value="This is not awesome">
5974
</zn-inline-edit>
6075
</zn-sp>
6176
</zn-tabs>

‎scss/shared/_button.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
display: inline-flex;
77
align-items: center;
88
justify-content: center;
9-
padding: 7px 15px;
9+
padding: 6px 15px;
1010
margin: auto;
1111
width: fit-content;
1212
background-color: rgb(var(--zn-primary));

‎src/components/description-item/description-item.component.ts‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import {property} from 'lit/decorators.js';
2+
import {type CSSResultGroup, html, unsafeCSS} from 'lit';
3+
import {LocalizeController} from '../../utilities/localize';
4+
import ZincElement from '../../internal/zinc-element';
5+
6+
import styles from './description-item.scss';
7+
import {classMap} from "lit/directives/class-map.js";
8+
9+
/**
10+
* @summary Short summary of the component's intended use.
11+
* @documentation https://zinc.style/components/description-item
12+
* @status experimental
13+
* @since 1.0
14+
*
15+
* @dependency zn-example
16+
*
17+
* @event zn-event-name - Emitted as an example.
18+
*
19+
* @slot - The default slot.
20+
* @slot example - An example slot.
21+
*
22+
* @csspart base - The component's base wrapper.
23+
*
24+
* @cssproperty --example - An example CSS custom property.
25+
*/
26+
export default class ZnDescriptionItem extends ZincElement {
27+
static styles: CSSResultGroup = unsafeCSS(styles);
28+
29+
// @ts-expect-error unused property
30+
private readonly localize = new LocalizeController(this);
31+
32+
@property() label: string;
33+
34+
connectedCallback() {
35+
super.connectedCallback();
36+
this.setAttribute('role', 'listitem');
37+
}
38+
39+
render() {
40+
return html`
41+
<div class=${classMap({
42+
'description-item': true,
43+
})}>
44+
<div class="description-item__label">${this.label}</div>
45+
<div class="description-item__content">
46+
<slot></slot>
47+
<slot name="actions" class="description-item__actions"></slot>
48+
</div>
49+
</div>
50+
`;
51+
}
52+
}

‎src/components/description-item/description-item.scss‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
@use "../../wc";
2+
3+
:host {
4+
display: block;
5+
container-type: inline-size;
6+
7+
--zn-description-item-label-max-width: 300px;
8+
}
9+
10+
.description-item {
11+
display: flex;
12+
flex-direction: row;
13+
padding: var(--zn-spacing-large);
14+
align-items: center;
15+
16+
@include wc.container-query(null, md) {
17+
--zn-description-item-label-max-width: 200px;
18+
}
19+
20+
@include wc.container-query(null, smp) {
21+
--zn-description-item-label-max-width: 150px;
22+
}
23+
24+
@include wc.container-query(null, sm) {
25+
flex-direction: column;
26+
align-items: baseline;
27+
gap: var(--zn-spacing-small);
28+
}
29+
30+
&__content {
31+
width: 100%;
32+
display: flex;
33+
align-items: center;
34+
justify-content: space-between;
35+
min-width: 220px;
36+
line-height: 30px;
37+
}
38+
39+
&__label {
40+
font-weight: 500;
41+
color: rgb(var(--zn-text-heading));
42+
max-width: var(--zn-description-item-label-max-width);
43+
width: 100%;
44+
flex-shrink: 0;
45+
}
46+
47+
&__actions {
48+
margin-left: auto;
49+
display: flex;
50+
gap: 10px;
51+
flex-wrap: wrap;
52+
flex-direction: row;
53+
}
54+
}

‎src/components/description-item/description-item.test.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import '../../../dist/zn.min.js';
2+
import { expect, fixture, html } from '@open-wc/testing';
3+
4+
describe('<zn-description-item>', () => {
5+
it('should render a component', async () => {
6+
const el = await fixture(html` <zn-description-item></zn-description-item> `);
7+
8+
expect(el).to.exist;
9+
});
10+
});

‎src/components/description-item/index.ts‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import ZnDescriptionItem from './description-item.component';
2+
3+
export * from './description-item.component';
4+
export default ZnDescriptionItem;
5+
6+
ZnDescriptionItem.define('zn-description-item');
7+
8+
declare global {
9+
interface HTMLElementTagNameMap {
10+
'zn-description-item': ZnDescriptionItem;
11+
}
12+
}

‎src/components/empty-state/empty-state.scss‎

Lines changed: 3 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -43,42 +43,30 @@
4343
:host([type="error"]) {
4444
background-color: rgba(var(--zn-color-error), .05);
4545
min-height: 100px;
46-
padding: var(--zn-spacing-x-small);
46+
border: dashed 1px rgb(var(--zn-color-error)) !important;
4747

4848
::slotted(*), .caption, .description {
4949
color: rgb(var(--zn-color-error));
5050
}
51-
52-
.error {
53-
border: dashed 1px rgb(var(--zn-color-error)) !important;
54-
}
5551
}
5652

5753

5854
:host([type="info"]) {
5955
background-color: rgba(var(--zn-color-info), .05);
6056
min-height: 100px;
61-
padding: var(--zn-spacing-x-small);
57+
border: dashed 1px rgb(var(--zn-color-info)) !important;
6258

6359
::slotted(*), .caption, .description {
6460
color: rgb(var(--zn-color-info));
6561
}
66-
67-
.info {
68-
border: dashed 1px rgb(var(--zn-color-info)) !important;
69-
}
7062
}
7163

7264
:host([type="primary"]) {
7365
background-color: rgba(var(--zn-primary), .05);
7466
min-height: 100px;
75-
padding: var(--zn-spacing-x-small);
67+
border: dashed 1px rgb(var(--zn-primary)) !important;
7668

7769
::slotted(*), .caption, .description {
7870
color: rgb(var(--zn-primary));
7971
}
80-
81-
.primary {
82-
border: dashed 1px rgb(var(--zn-primary)) !important;
83-
}
8472
}

0 commit comments

Comments
 (0)