Skip to content

Commit db2a644

Browse files
MrEssexMrEssex
committed
Updates
1 parent 7be57a5 commit db2a644

File tree

13 files changed

+161
-46
lines changed

13 files changed

+161
-46
lines changed

‎docs/_includes/sidebar.njk‎

Lines changed: 5 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,11 @@
22
<li>
33
<h2>Tutorials</h2>
44
<ul>
5-
<li>
6-
<a href="/getting-started/form-controls">Form Controls</a>
7-
</li>
8-
<li>
9-
<a href="/getting-started/form-examples">Form Examples</a>
10-
</li>
11-
<li>
12-
<a href="/getting-started/table-examples">Table Examples</a>
13-
</li>
14-
<li>
15-
<a href="/getting-started/example-layout">Example Layout</a>
16-
</li>
5+
<li><a href="/getting-started/form-controls">Form Controls</a></li>
6+
<li><a href="/getting-started/form-examples">Form Examples</a></li>
7+
<li><a href="/getting-started/table-examples">Table Examples</a></li>
8+
<li><a href="/getting-started/example-layout">Example Layout</a></li>
9+
<li><a href="/getting-started/example-page">Example Page</a></li>
1710
</ul>
1811
</li>
1912
<li>

‎docs/assets/styles/docs.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -835,7 +835,7 @@ main {
835835
}
836836

837837
.content--full-width {
838-
--docs-content-max-width: 100%;
838+
--docs-content-max-width: min(100%, var(--zn-container-hd));
839839
}
840840

841841
.content__body {

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

Lines changed: 24 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -7,16 +7,16 @@ layout: component
77

88
```html:preview
99
<zn-sp divide no-gap>
10-
<zn-description-item label="Full name">
10+
<zn-description-item caption="Full name">
1111
<zn-inline-edit name="name" value="Margot Foster"></zn-inline-edit>
1212
</zn-description-item>
13-
<zn-description-item label="Full name">
13+
<zn-description-item caption="Full name">
1414
Margot Foster
1515
</zn-description-item>
16-
<zn-description-item label="Full name">
16+
<zn-description-item caption="Full name">
1717
margot.foster@example.com
1818
</zn-description-item>
19-
<zn-description-item label="Full name">
19+
<zn-description-item caption="Full name">
2020
lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna
2121
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
2222
</zn-description-item>
@@ -28,14 +28,31 @@ layout: component
2828
### Lots of Content
2929

3030
```html:preview
31-
<zn-description-item label="Full name">
31+
<zn-description-item caption="Full name">
3232
lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna
3333
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
3434
</zn-description-item>
3535
```
3636

37-
### Second Example
37+
### Multiple Actions
3838

39-
TODO
39+
Example of multiple actions in a description item.
4040

41+
```html:preview
42+
43+
<zn-description-item caption="Address">
44+
<p><strong>Company</strong> Example here </p>
45+
<p><strong>Line 1</strong> Example here </p>
46+
<p><strong>Line 2</strong> Example here </p>
47+
<p><strong>Line 3</strong> Example here </p>
48+
<p><strong>Town</strong> Example here </p>
49+
<p><strong>County</strong> Example here </p>
50+
<p><strong>Postal Code</strong> Example here </p>
51+
<p><strong>Country</strong> Example here </p>
52+
53+
<zn-button id="address-modal" slot="actions" size="x-small" color="secondary" modal>Edit</zn-button>
54+
<zn-button id="address-modal" slot="actions" size="x-small" color="secondary" modal>Edit</zn-button>
55+
56+
</zn-description-item>
57+
```
4158

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

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
---
2+
meta:
3+
title: Example Page
4+
description: An example of a full page in zinc with use of multiple nested tabs, in case you need to show multiple views of data.
5+
fullWidth: true
6+
---
7+
8+
# Example Page
9+
10+
An example of a full page in zinc with use of multiple nested tabs, in case you need to show multiple views of data.
11+
12+
We have a primary set of tabs which uses just the `zn-navbar` component to show the navigation, and then a secondary
13+
set of tabs which uses the `zn-header` component to show the navigation in a more detailed way.
14+
15+
:::tip
16+
**Note:** This is subject to change as defining the navigation and dropdown as attributes is not ideal, especially
17+
for SEO purposes. We should be slotting everything in as children of the components.
18+
:::
19+
20+
```html:preview
21+
22+
<style>
23+
.code-preview__preview {
24+
background-color: rgb(var(--zn-body)) !important;
25+
padding: 0 25px 0 0;
26+
}
27+
</style>
28+
29+
<zn-tabs flush primary-caption="Navigation" secondary-caption="content">
30+
31+
<!-- This is the navigation for the first set of tabs -->
32+
<zn-navbar slot="top"
33+
highlight
34+
navigation="[{&quot;title&quot;:&quot;John Doe&quot;,&quot;active&quot;:false,&quot;hintText&quot;:&quot;Overview&quot;,&quot;launchMode&quot;:&quot;page&quot;}]"
35+
dropdown="[{&quot;tab&quot;:&quot;2&quot;,&quot;title&quot;:&quot;Some Actions&quot;,&quot;type&quot;:&quot;dropdown&quot;}]">
36+
</zn-navbar>
37+
38+
<!-- This is the content of the first tab / default -->
39+
<zn-tabs flush primary-caption="Navigation" secondary-caption="Content">
40+
41+
<!-- This is the Navigation/Header for the Inner set of tabs -->
42+
<zn-header slot="top" caption="Customer" description="My Awesome Customer"
43+
navigation="[{&quot;title&quot;:&quot;Overview&quot;}, {&quot;title&quot;:&quot;Details&quot;, &quot;tab&quot;:&quot;details&quot;}]">
44+
</zn-header>
45+
46+
<!--This is the content of the first tab / default inside the first tab -->
47+
<div>
48+
<!-- This is where your page content would be defined -->
49+
<zn-sp>
50+
<zn-panel caption="Something">Data Points</zn-panel>
51+
<zn-panel caption="Another Thing">Other Points</zn-panel>
52+
</zn-sp>
53+
</div>
54+
55+
<!--This is the content of the second tab inside the first tab -->
56+
<div id="details">
57+
<!-- This is where your page content would be defined -->
58+
<zn-sp>
59+
<zn-panel caption="Awesome">this is an example of the details tab</zn-panel>
60+
</zn-sp>
61+
</div>
62+
</zn-tabs>
63+
64+
<!-- This is the content of the second tab -->
65+
<div id="2">
66+
<zn-pane>
67+
<!-- This is where your page content would be defined -->
68+
<zn-sp> <!-- Maybe zn-sp should be defaulted into the content? -->
69+
<zn-panel caption="Number 2">Something Something Darkside</zn-panel>
70+
</zn-sp>
71+
</zn-pane>
72+
</div>
73+
74+
</zn-tabs>
75+
76+
```

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

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ export default class ZnDescriptionItem extends ZincElement {
2929
// @ts-expect-error unused property
3030
private readonly localize = new LocalizeController(this);
3131

32-
@property() label: string;
32+
@property() caption: string;
3333

3434
connectedCallback() {
3535
super.connectedCallback();
@@ -41,10 +41,14 @@ export default class ZnDescriptionItem extends ZincElement {
4141
<div class=${classMap({
4242
'description-item': true,
4343
})}>
44-
<div class="description-item__label">${this.label}</div>
44+
<div class="description-item__caption">${this.caption}</div>
4545
<div class="description-item__content">
46-
<slot></slot>
47-
<slot name="actions" class="description-item__actions"></slot>
46+
<div class="description-item__content-inner">
47+
<slot></slot>
48+
</div>
49+
<div class="description-item__action-wrapper">
50+
<slot name="actions" class="description-item__actions"></slot>
51+
</div>
4852
</div>
4953
</div>
5054
`;

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

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@
1111
display: flex;
1212
flex-direction: row;
1313
padding: var(--zn-spacing-large);
14-
align-items: center;
1514

1615
@include wc.container-query(null, md) {
1716
--zn-description-item-label-max-width: 200px;
@@ -27,28 +26,36 @@
2726
gap: var(--zn-spacing-small);
2827
}
2928

29+
3030
&__content {
3131
width: 100%;
3232
display: flex;
33-
align-items: center;
3433
justify-content: space-between;
3534
min-width: 220px;
3635
line-height: 30px;
3736
}
3837

39-
&__label {
38+
&__content-inner {
39+
width: 100%;
40+
}
41+
42+
&__caption {
4043
font-weight: 500;
4144
color: rgb(var(--zn-text-heading));
45+
line-height: 33px;
4246
max-width: var(--zn-description-item-label-max-width);
4347
width: 100%;
4448
flex-shrink: 0;
4549
}
4650

51+
&__action-wrapper {
52+
display: inline-block;
53+
}
54+
4755
&__actions {
4856
margin-left: auto;
4957
display: flex;
5058
gap: 10px;
51-
flex-wrap: wrap;
5259
flex-direction: row;
5360
}
5461
}

‎src/components/header/header.component.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,6 @@ export default class ZnHeader extends ZincElement {
8989
this.navbar = document.createElement('zn-navbar');
9090
const nc = this.shadowRoot?.querySelector('#nav-container');
9191
if (nc) {
92-
nc.classList.remove('navless');
9392
nc.appendChild(this.navbar);
9493
}
9594
}
@@ -185,7 +184,7 @@ export default class ZnHeader extends ZincElement {
185184
</div>
186185
187186
${hasNavigation ? html`
188-
<div class="width-container navless" id="nav-container">
187+
<div class="width-container" id="nav-container">
189188
<slot name="nav"></slot>
190189
</div>` : null}
191190

‎src/components/inline-edit/inline-edit.component.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -199,11 +199,11 @@ export default class ZnInlineEdit extends ZincElement implements ZincFormControl
199199
color="secondary"></zn-button>`}
200200
</div>
201201
</div>`;
202-
202+
203203

204204
if (this.caption) {
205205
return html`
206-
<zn-description-item label="${this.caption}">
206+
<zn-description-item caption="${this.caption}">
207207
${inlineEdit}
208208
</zn-description-item>`;
209209
}

‎src/components/list-tile/list-tile.component.ts‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -33,12 +33,14 @@ export default class ZnListTile extends ZincElement {
3333
@property({attribute: 'caption', reflect: true}) caption: string;
3434
@property({attribute: 'description', reflect: true}) description: string;
3535
@property({attribute: 'href', reflect: true}) href: string;
36+
@property({attribute: 'data-target', reflect: true}) dataTarget: string;
3637

3738
render() {
3839
const tag = this.href ? literal`a` : literal`div`;
3940
return html`
4041
<${tag}
4142
href="${ifDefined(this.href)}"
43+
data-target="${ifDefined(this.dataTarget)}"
4244
class="${classMap({
4345
tile: true,
4446
'tile--has-image': this.hasSlotController.test('image')
@@ -53,9 +55,6 @@ export default class ZnListTile extends ZincElement {
5355
<div class="tile__right">
5456
<slot name="properties" part="properties" class="tile__properties"></slot>
5557
<slot name="actions" part="actions" class="tile__actions"></slot>
56-
${this.href ? html`<a href="${this.href}" class="tile__link">
57-
<zn-icon src="keyboard_arrow_right"></zn-icon>
58-
</a>` : ''}
5958
</div>
6059
</${tag}>`;
6160
}

‎src/components/navbar/navbar.component.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import {classMap} from "lit/directives/class-map.js";
2-
import type { PropertyValues} from 'lit';
2+
import type {PropertyValues} from 'lit';
33
import {type CSSResultGroup, html, unsafeCSS} from 'lit';
44
import {property} from 'lit/decorators.js';
55
import ZincElement from '../../internal/zinc-element';
@@ -100,7 +100,7 @@ export default class ZnNavbar extends ZincElement {
100100
<li class="${classMap({'active': item.active})}" tab-uri="${item.path}">${content}</li>`;
101101
}
102102
return html`
103-
<li class="${classMap({'active': item.active})}" tab="">${content}</li>`;
103+
<li class="${classMap({'active': item.active})}" tab="${item.tab}">${content}</li>`;
104104
})}
105105
${this.dropdown && this.dropdown.length > 0 ? html`
106106
<li id="dropdown-item">

0 commit comments

Comments
 (0)