The List Item Template Label is the primary part of the template. It
- consists of a title, and an optional icon for the title, as well as an
- area to place metadata like badges, labels, etc. There are two
- available Labels in the List Item Template. The first is required and
- is available via the
-
- contextual component. The second Label is optional and can be used via
- the
-
+
The List Item Template Section is the primary part of the template.
+ It consists of a title, and an optional icon for the title, as well as
+ an area to place metadata like badges, labels, etc. There are two
+ available Sections in the List Item Template. The first is required
+ and is available via the
+
+ contextual component. The second Section is optional and can be used
+ via the
+
contextual component.
How to use this component
The List Item Template is composed of several contextual components.
- Primarily the Label, followed by an optional Badge or Icon and a
- second Label. The List Item Template will most commonly be used within
- a
+ Primarily the Section, followed by an optional Badge or Icon and a
+ second Section. The List Item Template will most commonly be used
+ within a
List Item (container).
It can also be nested within other components as a template.
@@ -300,21 +300,21 @@
-
-
- A List Item Template using only the title and
- icon
-
+
+
+ A List Item Template using only the title
+ and icon
+
-
-
- Example in a List Item
-
+
+
+ Example in a List Item
+
-
-
+
+
@@ -336,10 +336,10 @@
-
-
- Example in a regular div
-
+
+
+ Example in a regular div
+
-
-
+
+
@@ -363,21 +363,21 @@
-
-
- A List Item Template using only the title and
- icon
-
+
+
+ A List Item Template using only the title and
+ icon
+
-
-
- Example in a List Item
-
+
+
+ Example in a List Item
+
-
-
+
+
-
-
- Example in a regular div
-
+
+
+ Example in a regular div
+
-
-
+
+
'}}}
/>
-
Multiple labels
+
Multiple sections
You can apply a second label by using the
-
+
contextual component and either a
or a
@@ -436,48 +436,48 @@
-
-
- Label 1
-
+
+
+ Section 1
+
-
-
+
+
-
-
- Label 2
-
+
+
+ Section 2
+
-
-
+
+
-
-
- Label 1
-
+
+
+ Section 1
+
-
-
+
+
-
-
- Label 2
-
+
+
+ Section 2
+
-
-
+
+
@@ -489,48 +489,48 @@
-
-
- Label 1
-
+
+
+ Section 1
+
-
-
+
+
-
-
- Label 2
-
+
+
+ Section 2
+
-
-
+
+
-
-
- Label 1
-
+
+
+ Section 1
+
-
-
+
+
-
-
- Label 2
-
+
+
+ Section 2
+
-
-
+
+
@@ -557,56 +557,56 @@
}}
>
-
-
- Title
-
+
+
+ Title
+
-
-
+
+
-
-
- Label 2
-
+
+
+ Section 2
+
-
-
+
+
-
-
-
+
+ Title
-
+ >Title
+
-
-
+
+
-
-
- Label 2
-
+
+
+ Section 2
+
-
-
+
+
@@ -622,56 +622,56 @@
}}
>
-
-
- Title
-
+
+
+ Title
+
-
-
+
+
-
-
- Label 2
-
+
+
+ Section 2
+
-
-
+
+
-
-
-
+
+ Title
-
+ >Title
+
-
-
+
+
-
-
- Label 2
-
+
+
+ Section 2
+
-
-
+
+
@@ -691,12 +691,12 @@
-
-
-
+
+ service-name
-
+ >service-name
+
-
-
+
+
@@ -724,12 +724,12 @@
-
-
-
+
+ service-name
-
+ >service-name
+
-
-
+
+
@@ -758,12 +758,12 @@
Component API
The List Item Template yields a few different contextual components.
Primarily it provides a
-
+
component to present the main content and an optional second
-
+
in the form of
- . It also offers optional seperators in
- via the
+ . It also offers optional
+ seperators in via the
and
@@ -775,13 +775,13 @@
-
Label
-
The List Item Template Label is the primary part of the template. It
- consists of a title, as well as an option icon for the title and a
+
Section
+
The List Item Template Section is the primary part of the template.
+ It consists of a title, as well as an option icon for the title and a
section to place metadata like badges, labels, etc. There are two
- available Labels in the List Item Template. The first is required and
- is available via the Label contextual component. The optional second
- section can be used via the Label2 contextual component.
+ available Sections in the List Item Template. The first is required
+ and is available via the Label contextual component. The optional
+ second section can be used via the SecondSection contextual component.
The
@@ -799,7 +799,7 @@
The
is a contextual component that yields a slot for the title portion of
- the List Item Label. You may place any content you wish into this
+ the List Item Section. You may place any content you wish into this
block. The most common usage is text for the title.
@@ -807,25 +807,25 @@
The
contextual component yields a slot for any metadata for the List Item
- Template's Label. While this component doesn't prescribe what that
+ Template's Section. While this component doesn't prescribe what that
content should be, it is often used for
" />,
" />,
" />, etc.
-
Label2
-
+
SecondSection
+
is the second option
-
+
that is yielded by the List Item Template. It is an optional component
and shares the exact same API as the
- .
+
.
Badge
The
contextual component is used as an optional separator between the two
- . It renders a
+ . It renders a
" />
from HDS. Therefore, it shares the same API. Reference the
The
contextual component is used as an optional separator between the two
- . It renders a
+ . It renders a
" />
from HDS. Therefore it shares the same API. Reference the
How to use
- Multiple labels
+ Multiple sections
Tooltips
Interactivity
Component API
- Label
- Label2
+ Section
+ SecondSection
Badge
Icon
diff --git a/documentation/tests/integration/components/list-item-test.js b/documentation/tests/integration/components/list-item-test.js
index d65dc0a..7107c43 100644
--- a/documentation/tests/integration/components/list-item-test.js
+++ b/documentation/tests/integration/components/list-item-test.js
@@ -122,7 +122,7 @@ module('Integration | Component | cut/list-item', function (hooks) {
await render(
hbs`
-
+
`
);
assert
@@ -155,29 +155,33 @@ module('Integration | Component | cut/list-item', function (hooks) {
.hasText('test');
});
- test('it should have Cut::ListItem::Label with yielded Title component', async function (assert) {
+ test('it should have Cut::ListItem::Section with yielded Title component', async function (assert) {
await render(
hbs`
-
- test
- `
+
+ test
+ `
);
- assert.dom('#test-list-item-label #test-list-item-label-title').exists();
assert
- .dom('#test-list-item-label #test-list-item-label-title')
+ .dom('#test-list-item-section #test-list-item-section-title')
+ .exists();
+ assert
+ .dom('#test-list-item-section #test-list-item-section-title')
.hasText('test');
});
- test('it should have Cut::ListItem::Label with yielded Metadata component', async function (assert) {
+ test('it should have Cut::ListItem::Section with yielded Metadata component', async function (assert) {
await render(
hbs`
-
- test
- `
+
+ test
+ `
);
- assert.dom('#test-list-item-label #test-list-item-label-metadata').exists();
assert
- .dom('#test-list-item-label #test-list-item-label-metadata')
+ .dom('#test-list-item-section #test-list-item-section-metadata')
+ .exists();
+ assert
+ .dom('#test-list-item-section #test-list-item-section-metadata')
.hasText('test');
});
});
diff --git a/toolkit/package.json b/toolkit/package.json
index cac2161..b7f2f0b 100644
--- a/toolkit/package.json
+++ b/toolkit/package.json
@@ -83,9 +83,9 @@
"./components/cut/list-item/action-generic.js": "./dist/_app_/components/cut/list-item/action-generic.js",
"./components/cut/list-item/content.js": "./dist/_app_/components/cut/list-item/content.js",
"./components/cut/list-item/index.js": "./dist/_app_/components/cut/list-item/index.js",
- "./components/cut/list-item/label/index.js": "./dist/_app_/components/cut/list-item/label/index.js",
- "./components/cut/list-item/label/metadata.js": "./dist/_app_/components/cut/list-item/label/metadata.js",
- "./components/cut/list-item/label/title.js": "./dist/_app_/components/cut/list-item/label/title.js",
+ "./components/cut/list-item/section/index.js": "./dist/_app_/components/cut/list-item/section/index.js",
+ "./components/cut/list-item/section/metadata.js": "./dist/_app_/components/cut/list-item/section/metadata.js",
+ "./components/cut/list-item/section/title.js": "./dist/_app_/components/cut/list-item/section/title.js",
"./components/cut/list-item/service-instance/index.js": "./dist/_app_/components/cut/list-item/service-instance/index.js",
"./components/cut/list-item/service/index.js": "./dist/_app_/components/cut/list-item/service/index.js",
"./components/cut/list-item/template/index.js": "./dist/_app_/components/cut/list-item/template/index.js",
diff --git a/toolkit/src/components/cut/list-item/label/index.hbs b/toolkit/src/components/cut/list-item/label/index.hbs
deleted file mode 100644
index 5031e8c..0000000
--- a/toolkit/src/components/cut/list-item/label/index.hbs
+++ /dev/null
@@ -1,11 +0,0 @@
-{{!
- Copyright (c) HashiCorp, Inc.
-}}
-
-
-
- {{yield (hash Icon=(component 'flight-icon' size="16"))}}
- {{yield (hash Title=(component 'cut/list-item/label/title'))}}
-
- {{yield (hash Metadata=(component 'cut/list-item/label/metadata'))}}
-
\ No newline at end of file
diff --git a/toolkit/src/components/cut/list-item/label/metadata.hbs b/toolkit/src/components/cut/list-item/label/metadata.hbs
deleted file mode 100644
index 6c0f25f..0000000
--- a/toolkit/src/components/cut/list-item/label/metadata.hbs
+++ /dev/null
@@ -1,5 +0,0 @@
-{{!
- Copyright (c) HashiCorp, Inc.
-}}
-
-{{yield}}
diff --git a/toolkit/src/components/cut/list-item/label/title.hbs b/toolkit/src/components/cut/list-item/label/title.hbs
deleted file mode 100644
index 3e1915a..0000000
--- a/toolkit/src/components/cut/list-item/label/title.hbs
+++ /dev/null
@@ -1,5 +0,0 @@
-{{!
- Copyright (c) HashiCorp, Inc.
-}}
-
-{{yield}}
diff --git a/toolkit/src/components/cut/list-item/section/index.hbs b/toolkit/src/components/cut/list-item/section/index.hbs
new file mode 100644
index 0000000..d990f21
--- /dev/null
+++ b/toolkit/src/components/cut/list-item/section/index.hbs
@@ -0,0 +1,11 @@
+{{!
+ Copyright (c) HashiCorp, Inc.
+}}
+
+
+
+ {{yield (hash Icon=(component 'flight-icon' size='16'))}}
+ {{yield (hash Title=(component 'cut/list-item/section/title'))}}
+
+ {{yield (hash Metadata=(component 'cut/list-item/section/metadata'))}}
+
\ No newline at end of file
diff --git a/toolkit/src/components/cut/list-item/section/metadata.hbs b/toolkit/src/components/cut/list-item/section/metadata.hbs
new file mode 100644
index 0000000..b7b4984
--- /dev/null
+++ b/toolkit/src/components/cut/list-item/section/metadata.hbs
@@ -0,0 +1,8 @@
+{{!
+ Copyright (c) HashiCorp, Inc.
+}}
+
+{{yield}}
\ No newline at end of file
diff --git a/toolkit/src/components/cut/list-item/section/title.hbs b/toolkit/src/components/cut/list-item/section/title.hbs
new file mode 100644
index 0000000..13bb149
--- /dev/null
+++ b/toolkit/src/components/cut/list-item/section/title.hbs
@@ -0,0 +1,8 @@
+{{!
+ Copyright (c) HashiCorp, Inc.
+}}
+
+{{yield}}
\ No newline at end of file
diff --git a/toolkit/src/components/cut/list-item/service-instance/index.hbs b/toolkit/src/components/cut/list-item/service-instance/index.hbs
index 9b96eee..20d04cc 100644
--- a/toolkit/src/components/cut/list-item/service-instance/index.hbs
+++ b/toolkit/src/components/cut/list-item/service-instance/index.hbs
@@ -11,18 +11,19 @@
@replace={{@replace}}
@onClick={{@onClick}}
data-test-service-instance-list-item
- as |L|>
+ as |L|
+>
-
- {{@service.name}}
-
+
+ {{@service.name}}
+
{{#if this.isAllHealthy}}
{{else}}
@@ -32,7 +33,7 @@
@successCount={{@service.metadata.healthCheck.service.success}}
@warningCount={{@service.metadata.healthCheck.service.warning}}
@criticalCount={{@service.metadata.healthCheck.service.critical}}
- @type="service"
+ @type='service'
/>
{{/if}}
@@ -41,7 +42,7 @@
@successCount={{@service.metadata.healthCheck.node.success}}
@warningCount={{@service.metadata.healthCheck.node.warning}}
@criticalCount={{@service.metadata.healthCheck.node.critical}}
- @type="node"
+ @type='node'
/>
{{/if}}
{{/if}}
@@ -51,25 +52,39 @@
/>
{{#if @service.metadata.externalSource}}
-
+
{{/if}}
{{#if @service.metadata.node}}
-
+
{{/if}}
{{#if @service.metadata.servicePortAddress}}
-
+
{{else if @service.metadata.serviceSocketPath}}
-
+
{{/if}}
{{#if @service.metadata.tags.length}}
-
+
{{/if}}
-
-
+
+
\ No newline at end of file
diff --git a/toolkit/src/components/cut/list-item/service/index.hbs b/toolkit/src/components/cut/list-item/service/index.hbs
index 12413c0..16b418f 100644
--- a/toolkit/src/components/cut/list-item/service/index.hbs
+++ b/toolkit/src/components/cut/list-item/service/index.hbs
@@ -11,18 +11,19 @@
@replace={{@replace}}
@onClick={{@onClick}}
data-test-service-list-item
- as |L|>
+ as |L|
+>
-
- {{@service.name}}
-
+
+ {{@service.name}}
+
{{#if this.isAllHealthy}}
{{else}}
@@ -32,54 +33,76 @@
@successCount={{@service.metadata.healthCheck.instance.success}}
@warningCount={{@service.metadata.healthCheck.instance.warning}}
@criticalCount={{@service.metadata.healthCheck.instance.critical}}
- @type="instance"
+ @type='instance'
/>
{{/if}}
{{/if}}
{{#if @service.metadata.kind}}
-
{{/if}}
{{#if this.isIngressGateway}}
{{#if (not-eq @service.metadata.upstreamCount undefined)}}
- {{@service.metadata.upstreamCount}} upstreams
+ {{@service.metadata.upstreamCount}} upstreams
{{/if}}
{{else if this.isTerminatingGateway}}
{{#if (not-eq @service.metadata.linkedServiceCount undefined)}}
- {{@service.metadata.linkedServiceCount}} linked services
+ {{@service.metadata.linkedServiceCount}} linked services
{{/if}}
{{else}}
{{#if (not-eq @service.metadata.instanceCount undefined)}}
- {{@service.metadata.instanceCount}} instances
+ {{@service.metadata.instanceCount}} instances
{{/if}}
{{/if}}
{{#if @service.metadata.isPermissiveMTls}}
-
+
{{/if}}
{{#if @service.metadata.samenessGroup}}
-
+
{{/if}}
{{#if @service.metadata.isImported}}
-
+
{{/if}}
{{#if @service.metadata.externalSource}}
-
+
{{/if}}
{{#if @service.metadata.tags.length}}
-
+
{{/if}}
-
-
+
+
\ No newline at end of file
diff --git a/toolkit/src/components/cut/list-item/template/index.hbs b/toolkit/src/components/cut/list-item/template/index.hbs
index 0e93bc0..5273e67 100644
--- a/toolkit/src/components/cut/list-item/template/index.hbs
+++ b/toolkit/src/components/cut/list-item/template/index.hbs
@@ -2,14 +2,15 @@
Copyright (c) HashiCorp, Inc.
}}
-
- {{yield (hash Label=(component 'cut/list-item/label'))}}
+
+ {{yield (hash Section=(component 'cut/list-item/section'))}}
- {{yield (hash
- Badge=(component 'hds/badge' size='small')
- Icon=(component "flight-icon" size=16)
- )
+ {{yield
+ (hash
+ Badge=(component 'hds/badge' size='small')
+ Icon=(component 'flight-icon' size=16)
+ )
}}
- {{yield (hash Label2=(component 'cut/list-item/label'))}}
+ {{yield (hash SecondSection=(component 'cut/list-item/section'))}}
\ No newline at end of file
diff --git a/toolkit/src/styles/components/copy-block.scss b/toolkit/src/styles/components/copy-block.scss
index b3d5616..1c46c43 100644
--- a/toolkit/src/styles/components/copy-block.scss
+++ b/toolkit/src/styles/components/copy-block.scss
@@ -9,12 +9,14 @@
gap: 2px;
padding-left: 4px;
margin-left: -4px;
+ cursor: pointer;
.cut-copy-block__copy-button {
opacity: 0;
& > .copy-btn {
display: flex;
align-items: center;
+ cursor: pointer;
}
}
@@ -43,4 +45,4 @@
}
}
}
-}
\ No newline at end of file
+}
diff --git a/toolkit/src/styles/components/list-item.scss b/toolkit/src/styles/components/list-item.scss
index 9b6f950..6c43684 100644
--- a/toolkit/src/styles/components/list-item.scss
+++ b/toolkit/src/styles/components/list-item.scss
@@ -70,7 +70,7 @@ button.cut-list-item__content-container {
gap: 16px;
}
-.cut-list-item-label {
+.cut-list-item-section {
display: flex;
flex-direction: column;
gap: 10px;
@@ -83,14 +83,14 @@ button.cut-list-item__content-container {
}
}
-.cut-list-item-label__title {
+.cut-list-item-section__title {
display: flex;
gap: 8px;
align-items: center;
flex-wrap: wrap;
}
-.cut-list-item-label__metadata {
+.cut-list-item-section__metadata {
display: flex;
flex-direction: row;
flex-wrap: wrap;