From 2fb974b7ded780f0959d11cac352335a3d0ae313 Mon Sep 17 00:00:00 2001
From: Tyler Wendlandt
Date: Fri, 23 Jun 2023 13:19:41 -0600
Subject: [PATCH] CC-5544: rename label to section (#32)
* fix: set cursor to pointer on copy-block
* chore: add changeset
* chore: rename list-item label to section
* chore: add changeset
---
.changeset/flat-plants-mate.md | 5 +
.changeset/hungry-lemons-push.md | 5 +
.../app/components/list-item/index.hbs | 102 ++---
.../components/list-item-template.hbs | 412 +++++++++---------
.../integration/components/list-item-test.js | 30 +-
toolkit/package.json | 6 +-
.../components/cut/list-item/label/index.hbs | 11 -
.../cut/list-item/label/metadata.hbs | 5 -
.../components/cut/list-item/label/title.hbs | 5 -
.../cut/list-item/section/index.hbs | 11 +
.../cut/list-item/section/metadata.hbs | 8 +
.../cut/list-item/section/title.hbs | 8 +
.../cut/list-item/service-instance/index.hbs | 43 +-
.../cut/list-item/service/index.hbs | 57 ++-
.../cut/list-item/template/index.hbs | 15 +-
toolkit/src/styles/components/copy-block.scss | 4 +-
toolkit/src/styles/components/list-item.scss | 6 +-
17 files changed, 398 insertions(+), 335 deletions(-)
create mode 100644 .changeset/flat-plants-mate.md
create mode 100644 .changeset/hungry-lemons-push.md
delete mode 100644 toolkit/src/components/cut/list-item/label/index.hbs
delete mode 100644 toolkit/src/components/cut/list-item/label/metadata.hbs
delete mode 100644 toolkit/src/components/cut/list-item/label/title.hbs
create mode 100644 toolkit/src/components/cut/list-item/section/index.hbs
create mode 100644 toolkit/src/components/cut/list-item/section/metadata.hbs
create mode 100644 toolkit/src/components/cut/list-item/section/title.hbs
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.
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;