diff --git a/.changeset/flat-plants-mate.md b/.changeset/flat-plants-mate.md new file mode 100644 index 0000000..562f38a --- /dev/null +++ b/.changeset/flat-plants-mate.md @@ -0,0 +1,5 @@ +--- +'@hashicorp/consul-ui-toolkit': major +--- + +Rename list-item Label, Label2 to Section, SecondSection diff --git a/.changeset/hungry-lemons-push.md b/.changeset/hungry-lemons-push.md new file mode 100644 index 0000000..c5fd2e0 --- /dev/null +++ b/.changeset/hungry-lemons-push.md @@ -0,0 +1,5 @@ +--- +'@hashicorp/consul-ui-toolkit': patch +--- + +fix: update copy-block cursor to be pointer diff --git a/documentation/app/components/list-item/index.hbs b/documentation/app/components/list-item/index.hbs index 6384fb6..8e9163f 100644 --- a/documentation/app/components/list-item/index.hbs +++ b/documentation/app/components/list-item/index.hbs @@ -205,8 +205,8 @@ - - + + - - + +
10 shared services
-
-
+ +

       <Cut::ListItem @onClick=this.onItemClicked as |L|> <L.Content>
-      <Cut::ListItem::Template as |T|> <T.Label as |LB> <LB.Icon
-      @name="check-circle" /> <LB.Title>Service-name</LB.Title>
-      <LB.Metadata> <Hds::Badge @text="Registered via Vault"
-      @icon="vault" @size="small" /> <div>12 instances</div>
-      <Cut::TextWithIcon @text="in service mesh with proxy" @icon="mesh"
-      /> <Cut::TextWithIcon @text="kubernetes-api, dev, kube-dev-2"
-      @icon="tag" /> </LB.Metadata> </T.Label>
-      </Cut::ListItem::Template> </L.Content> </Cut::ListItem>
+      <Cut::ListItem::Template as |T|> <T.Section as |LB>
+      <SC.Icon @name="check-circle" />
+      <SC.Title>Service-name</SC.Title> <SC.Metadata>
+      <Hds::Badge @text="Registered via Vault" @icon="vault" @size="small"
+      /> <div>12 instances</div> <Cut::TextWithIcon @text="in
+      service mesh with proxy" @icon="mesh" /> <Cut::TextWithIcon
+      @text="kubernetes-api, dev, kube-dev-2" @icon="tag" />
+      </SC.Metadata> </T.Section> </Cut::ListItem::Template>
+      </L.Content> </Cut::ListItem>
     
- - - Service-name - + + + Service-name + - - + + @@ -286,43 +287,44 @@

       <Cut::ListItem as |L|> <L.Content> <Cut::ListItem::Template
-      as |T|> <T.Label as |LB|>
-      <LB.Title>consul-da-server-client-development</LB.Title>
-      <LB.Metadata> <Cut::TextWithIcon @icon="users"
+      as |T|> <T.Section as |SC|>
+      <SC.Title>consul-da-server-client-development</SC.Title>
+      <SC.Metadata> <Cut::TextWithIcon @icon="users"
       @text="billing"/> <div>/</div> <Cut::TextWithIcon
-      @icon="folder" @text="default"/> </LB.Metadata>
+      @icon="folder" @text="default"/> </SC.Metadata>
       </Cut::ListItem::Template> <T.Badge @text="Allow"
-      @color="success" @icon="arrow-right" @size="small"/> <T.Label2 as
-      |LB|>
-      <LB.Title>consul-da-server-client-development</T.Title>
-      <LB.Metadata> <Cut::TextWithIcon @icon="users"
+      @color="success" @icon="arrow-right" @size="small"/>
+      <T.SecondSection as |SC|>
+      <SC.Title>consul-da-server-client-development</T.Title>
+      <SC.Metadata> <Cut::TextWithIcon @icon="users"
       @text="billing"/> <div>/</div> <Cut::TextWithIcon
-      @icon="folder" @text="default"/> </LB.Metadata> </T.Label2>
-      </Cut::ListItem::Template> </L.Content> </Cut::ListItem>
+      @icon="folder" @text="default"/> </SC.Metadata>
+      </T.SecondSection> </Cut::ListItem::Template>
+      </L.Content> </Cut::ListItem>
     
- - consul-da-server-client-development - + + consul-da-server-client-development + - - + + - - consul-da-server-client-development - + + consul-da-server-client-development + - - + + @@ -337,16 +339,16 @@ - - Namespace-name - + + Namespace-name +
namespace description
-
-
+ +
@@ -361,17 +363,17 @@ - - Exposed-path-name - + + Exposed-path-name + - - + + diff --git a/documentation/app/templates/components/list-item-template.hbs b/documentation/app/templates/components/list-item-template.hbs index 75d0afa..b4772da 100644 --- a/documentation/app/templates/components/list-item-template.hbs +++ b/documentation/app/templates/components/list-item-template.hbs @@ -183,46 +183,46 @@

Large
(Desktop)

- - - Title - + + + Title + - - + + - - - Title - + + + Title + - - + +

Small
(Mobile)

- - - Title - + + + Title + - - + + - - - Title - + + + Title + - - + +

Component anatomy

@@ -231,15 +231,15 @@ respective APIs, view the component API section under the code tab.

Label

-

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.

Type Component anatomy - Label + Section Connection method @@ -288,9 +288,9 @@

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. -}} - - 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. +}} + + \ 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;