Skip to content

Commit f47e5ae

Browse files
maicongodinhomaicongodinho
committed
refactor: add cds contained list selector
Signed-off-by: Maicon Godinho <maicongodinho1@gmail.com>
1 parent a05a498 commit f47e5ae

File tree

4 files changed

+106
-106
lines changed

4 files changed

+106
-106
lines changed

‎src/contained-list/contained-list-item.component.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import {
99
} from "@angular/core";
1010

1111
@Component({
12-
selector: "ibm-contained-list-item",
12+
selector: "cds-contained-list-item, ibm-contained-list-item",
1313
template: `
1414
<ng-container *ngIf="clickable">
1515
<button

‎src/contained-list/contained-list.component.spec.ts

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -28,14 +28,14 @@ import { ContainedListKind, ContainedListSize } from "./contained-list.enums";
2828
<svg ibmIcon="add" size="16"></svg>
2929
</ng-template>
3030
31-
<ibm-contained-list [label]="label" [action]="action">
32-
<ibm-contained-list-item>List item</ibm-contained-list-item>
33-
<ibm-contained-list-item [icon]="icon">List item with icon</ibm-contained-list-item>
34-
<ibm-contained-list-item [action]="action">List item with action</ibm-contained-list-item>
35-
<ibm-contained-list-item #clickableListItem [clickable]="true">
31+
<cds-contained-list [label]="label" [action]="action">
32+
<cds-contained-list-item>List item</cds-contained-list-item>
33+
<cds-contained-list-item [icon]="icon">List item with icon</cds-contained-list-item>
34+
<cds-contained-list-item [action]="action">List item with action</cds-contained-list-item>
35+
<cds-contained-list-item #clickableListItem [clickable]="true">
3636
<ng-container ibmContainedListItemButton>Clickable list item</ng-container>
37-
</ibm-contained-list-item>
38-
</ibm-contained-list>
37+
</cds-contained-list-item>
38+
</cds-contained-list>
3939
`
4040
})
4141
class WrapperComponent {}

‎src/contained-list/contained-list.component.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import {
88
import { ContainedListKind, ContainedListSize } from "./contained-list.enums";
99

1010
@Component({
11-
selector: "ibm-contained-list",
11+
selector: "cds-contained-list, ibm-contained-list",
1212
template: `
1313
<div
1414
class="cds--contained-list"

‎src/contained-list/contained-list.stories.ts

Lines changed: 97 additions & 97 deletions
Original file line numberDiff line numberDiff line change
@@ -52,18 +52,18 @@ export default {
5252

5353
const basicTemplate: Story<ContainedList> = () => ({
5454
template: `
55-
<ibm-contained-list label="List title">
56-
<ibm-contained-list-item>List item</ibm-contained-list-item>
57-
<ibm-contained-list-item>List item</ibm-contained-list-item>
58-
<ibm-contained-list-item>List item</ibm-contained-list-item>
59-
<ibm-contained-list-item>List item</ibm-contained-list-item>
60-
</ibm-contained-list>
61-
<ibm-contained-list label="List title">
62-
<ibm-contained-list-item>List item</ibm-contained-list-item>
63-
<ibm-contained-list-item>List item</ibm-contained-list-item>
64-
<ibm-contained-list-item>List item</ibm-contained-list-item>
65-
<ibm-contained-list-item>List item</ibm-contained-list-item>
66-
</ibm-contained-list>
55+
<cds-contained-list label="List title">
56+
<cds-contained-list-item>List item</cds-contained-list-item>
57+
<cds-contained-list-item>List item</cds-contained-list-item>
58+
<cds-contained-list-item>List item</cds-contained-list-item>
59+
<cds-contained-list-item>List item</cds-contained-list-item>
60+
</cds-contained-list>
61+
<cds-contained-list label="List title">
62+
<cds-contained-list-item>List item</cds-contained-list-item>
63+
<cds-contained-list-item>List item</cds-contained-list-item>
64+
<cds-contained-list-item>List item</cds-contained-list-item>
65+
<cds-contained-list-item>List item</cds-contained-list-item>
66+
</cds-contained-list>
6767
`
6868
});
6969
export const basic = basicTemplate.bind({});
@@ -88,11 +88,11 @@ const usageExamplesTemplate: Story<ContainedList> = () => ({
8888
</ibm-overflow-menu>
8989
</ibm-tooltip>
9090
</ng-template>
91-
<ibm-contained-list label="List title" [action]="add">
92-
<ibm-contained-list-item [action]="overflowMenu">List item</ibm-contained-list-item>
93-
<ibm-contained-list-item [action]="overflowMenu">List item</ibm-contained-list-item>
94-
<ibm-contained-list-item [action]="overflowMenu">List item</ibm-contained-list-item>
95-
</ibm-contained-list>
91+
<cds-contained-list label="List title" [action]="add">
92+
<cds-contained-list-item [action]="overflowMenu">List item</cds-contained-list-item>
93+
<cds-contained-list-item [action]="overflowMenu">List item</cds-contained-list-item>
94+
<cds-contained-list-item [action]="overflowMenu">List item</cds-contained-list-item>
95+
</cds-contained-list>
9696
9797
<ng-template #addGhost let-item>
9898
<ibm-icon-button
@@ -103,71 +103,71 @@ const usageExamplesTemplate: Story<ContainedList> = () => ({
103103
<svg class="cds--btn__icon" ibmIcon="add" size="16"></svg>
104104
</ibm-icon-button>
105105
</ng-template>
106-
<ibm-contained-list label="List title" [action]="addGhost">
107-
<ibm-contained-list-item>
106+
<cds-contained-list label="List title" [action]="addGhost">
107+
<cds-contained-list-item>
108108
List item
109109
<br />
110110
<span class="cds--label cds--label--no-margin">
111111
Description text
112112
</span>
113-
</ibm-contained-list-item>
114-
<ibm-contained-list-item>
113+
</cds-contained-list-item>
114+
<cds-contained-list-item>
115115
List item
116116
<br />
117117
<span class="cds--label cds--label--no-margin">
118118
Description text
119119
</span>
120-
</ibm-contained-list-item>
121-
<ibm-contained-list-item>
120+
</cds-contained-list-item>
121+
<cds-contained-list-item>
122122
List item
123123
<br />
124124
<span class="cds--label cds--label--no-margin">
125125
Description text
126126
</span>
127-
</ibm-contained-list-item>
128-
</ibm-contained-list>
127+
</cds-contained-list-item>
128+
</cds-contained-list>
129129
130-
<ibm-contained-list label="List title">
131-
<ibm-contained-list-item>
130+
<cds-contained-list label="List title">
131+
<cds-contained-list-item>
132132
<div style="display: 'grid'; gridTemplateColumns: repeat(3, 1fr); columnGap: 1rem">
133133
<span>List item</span>
134134
<span>List item details</span>
135135
<span>List item details</span>
136136
</div>
137-
</ibm-contained-list-item>
138-
<ibm-contained-list-item>
137+
</cds-contained-list-item>
138+
<cds-contained-list-item>
139139
<div style="display: 'grid'; gridTemplateColumns: repeat(3, 1fr); columnGap: 1rem">
140140
<span>List item</span>
141141
<span>List item details</span>
142142
<span>List item details</span>
143143
</div>
144-
</ibm-contained-list-item>
145-
<ibm-contained-list-item>
144+
</cds-contained-list-item>
145+
<cds-contained-list-item>
146146
<div style="display: 'grid'; gridTemplateColumns: repeat(3, 1fr); columnGap: 1rem">
147147
<span>List item</span>
148148
<span>List item details</span>
149149
<span>List item details</span>
150150
</div>
151-
</ibm-contained-list-item>
152-
</ibm-contained-list>
151+
</cds-contained-list-item>
152+
</cds-contained-list>
153153
`
154154
});
155155
export const usageExamples = usageExamplesTemplate.bind({});
156156

157157
const disclosedTemplate: Story<ContainedList> = () => ({
158158
template: `
159-
<ibm-contained-list label="List title" kind="disclosed">
160-
<ibm-contained-list-item>List item</ibm-contained-list-item>
161-
<ibm-contained-list-item>List item</ibm-contained-list-item>
162-
<ibm-contained-list-item>List item</ibm-contained-list-item>
163-
<ibm-contained-list-item>List item</ibm-contained-list-item>
164-
</ibm-contained-list>
165-
<ibm-contained-list label="List title" kind="disclosed">
166-
<ibm-contained-list-item>List item</ibm-contained-list-item>
167-
<ibm-contained-list-item>List item</ibm-contained-list-item>
168-
<ibm-contained-list-item>List item</ibm-contained-list-item>
169-
<ibm-contained-list-item>List item</ibm-contained-list-item>
170-
</ibm-contained-list>
159+
<cds-contained-list label="List title" kind="disclosed">
160+
<cds-contained-list-item>List item</cds-contained-list-item>
161+
<cds-contained-list-item>List item</cds-contained-list-item>
162+
<cds-contained-list-item>List item</cds-contained-list-item>
163+
<cds-contained-list-item>List item</cds-contained-list-item>
164+
</cds-contained-list>
165+
<cds-contained-list label="List title" kind="disclosed">
166+
<cds-contained-list-item>List item</cds-contained-list-item>
167+
<cds-contained-list-item>List item</cds-contained-list-item>
168+
<cds-contained-list-item>List item</cds-contained-list-item>
169+
<cds-contained-list-item>List item</cds-contained-list-item>
170+
</cds-contained-list>
171171
`
172172
});
173173
export const disclosed = disclosedTemplate.bind({});
@@ -182,12 +182,12 @@ const withActionsTemplate: Story<ContainedList> = () => ({
182182
<svg ibmIcon="subtract--alt" size="16" class="cds--btn__icon"></svg>
183183
</button>
184184
</ng-template>
185-
<ibm-contained-list label="List title">
186-
<ibm-contained-list-item [action]="action">List item</ibm-contained-list-item>
187-
<ibm-contained-list-item [action]="action">List item</ibm-contained-list-item>
188-
<ibm-contained-list-item [action]="action">List item</ibm-contained-list-item>
189-
<ibm-contained-list-item [action]="action">List item</ibm-contained-list-item>
190-
</ibm-contained-list>
185+
<cds-contained-list label="List title">
186+
<cds-contained-list-item [action]="action">List item</cds-contained-list-item>
187+
<cds-contained-list-item [action]="action">List item</cds-contained-list-item>
188+
<cds-contained-list-item [action]="action">List item</cds-contained-list-item>
189+
<cds-contained-list-item [action]="action">List item</cds-contained-list-item>
190+
</cds-contained-list>
191191
`
192192
});
193193
export const withActions = withActionsTemplate.bind({});
@@ -210,32 +210,32 @@ const withIconsTemplate: Story<ContainedList> = () => ({
210210
<svg ibmIcon="fish" size="16"></svg>
211211
</ng-template>
212212
213-
<ibm-contained-list label="List title">
214-
<ibm-contained-list-item [icon]="apple">List item</ibm-contained-list-item>
215-
<ibm-contained-list-item [icon]="wheat">List item</ibm-contained-list-item>
216-
<ibm-contained-list-item [icon]="strawberry">List item</ibm-contained-list-item>
217-
<ibm-contained-list-item [icon]="fish">List item</ibm-contained-list-item>
218-
</ibm-contained-list>
213+
<cds-contained-list label="List title">
214+
<cds-contained-list-item [icon]="apple">List item</cds-contained-list-item>
215+
<cds-contained-list-item [icon]="wheat">List item</cds-contained-list-item>
216+
<cds-contained-list-item [icon]="strawberry">List item</cds-contained-list-item>
217+
<cds-contained-list-item [icon]="fish">List item</cds-contained-list-item>
218+
</cds-contained-list>
219219
`
220220
});
221221
export const withIcons = withIconsTemplate.bind({});
222222

223223
const withInteractiveItemsTemplate: Story<ContainedList> = () => ({
224224
template: `
225-
<ibm-contained-list label="List title">
226-
<ibm-contained-list-item [clickable]="true">
225+
<cds-contained-list label="List title">
226+
<cds-contained-list-item [clickable]="true">
227227
<ng-container ibmContainedListItemButton>List item</ng-container>
228-
</ibm-contained-list-item>
229-
<ibm-contained-list-item [clickable]="true" [disabled]="true">
228+
</cds-contained-list-item>
229+
<cds-contained-list-item [clickable]="true" [disabled]="true">
230230
<ng-container ibmContainedListItemButton>List item</ng-container>
231-
</ibm-contained-list-item>
232-
<ibm-contained-list-item [clickable]="true">
231+
</cds-contained-list-item>
232+
<cds-contained-list-item [clickable]="true">
233233
<ng-container ibmContainedListItemButton>List item</ng-container>
234-
</ibm-contained-list-item>
235-
<ibm-contained-list-item [clickable]="true">
234+
</cds-contained-list-item>
235+
<cds-contained-list-item [clickable]="true">
236236
<ng-container ibmContainedListItemButton>List item</ng-container>
237-
</ibm-contained-list-item>
238-
</ibm-contained-list>
237+
</cds-contained-list-item>
238+
</cds-contained-list>
239239
`
240240
});
241241
export const withInteractiveItems = withInteractiveItemsTemplate.bind({});
@@ -250,44 +250,44 @@ const withInteractiveItemsAndActionsTemplate: Story<ContainedList> = () => ({
250250
<svg ibmIcon="subtract--alt" size="16" class="cds--btn__icon"></svg>
251251
</button>
252252
</ng-template>
253-
<ibm-contained-list label="List title">
254-
<ibm-contained-list-item [clickable]="true" [action]="action">
253+
<cds-contained-list label="List title">
254+
<cds-contained-list-item [clickable]="true" [action]="action">
255255
<ng-container ibmContainedListItemButton>List item</ng-container>
256-
</ibm-contained-list-item>
257-
<ibm-contained-list-item [clickable]="true" [action]="action">
256+
</cds-contained-list-item>
257+
<cds-contained-list-item [clickable]="true" [action]="action">
258258
<ng-container ibmContainedListItemButton>List item</ng-container>
259-
</ibm-contained-list-item>
260-
<ibm-contained-list-item [clickable]="true" [action]="action">
259+
</cds-contained-list-item>
260+
<cds-contained-list-item [clickable]="true" [action]="action">
261261
<ng-container ibmContainedListItemButton>List item</ng-container>
262-
</ibm-contained-list-item>
263-
<ibm-contained-list-item [clickable]="true" [action]="action">
262+
</cds-contained-list-item>
263+
<cds-contained-list-item [clickable]="true" [action]="action">
264264
<ng-container ibmContainedListItemButton>List item</ng-container>
265-
</ibm-contained-list-item>
266-
</ibm-contained-list>
265+
</cds-contained-list-item>
266+
</cds-contained-list>
267267
`
268268
});
269269
export const withInteractiveItemsAndActions = withInteractiveItemsAndActionsTemplate.bind({});
270270

271271
const withLayerTemplate: Story<ContainedList> = () => ({
272272
template: `
273273
<div ibmStack="vertical" [gap]="5">
274-
<ibm-contained-list label="List title">
275-
<ibm-contained-list-item>List item</ibm-contained-list-item>
276-
<ibm-contained-list-item>List item</ibm-contained-list-item>
277-
<ibm-contained-list-item>List item</ibm-contained-list-item>
278-
<ibm-contained-list-item>List item</ibm-contained-list-item>
279-
</ibm-contained-list>
274+
<cds-contained-list label="List title">
275+
<cds-contained-list-item>List item</cds-contained-list-item>
276+
<cds-contained-list-item>List item</cds-contained-list-item>
277+
<cds-contained-list-item>List item</cds-contained-list-item>
278+
<cds-contained-list-item>List item</cds-contained-list-item>
279+
</cds-contained-list>
280280
<div [ibmLayer]="1">
281281
<div ibmStack="vertical" [gap]="5">
282-
<ibm-contained-list label="List title">
283-
<ibm-contained-list-item>List item</ibm-contained-list-item>
284-
<ibm-contained-list-item>List item</ibm-contained-list-item>
285-
</ibm-contained-list>
282+
<cds-contained-list label="List title">
283+
<cds-contained-list-item>List item</cds-contained-list-item>
284+
<cds-contained-list-item>List item</cds-contained-list-item>
285+
</cds-contained-list>
286286
<div [ibmLayer]="2">
287-
<ibm-contained-list label="List title">
288-
<ibm-contained-list-item>List item</ibm-contained-list-item>
289-
<ibm-contained-list-item>List item</ibm-contained-list-item>
290-
</ibm-contained-list>
287+
<cds-contained-list label="List title">
288+
<cds-contained-list-item>List item</cds-contained-list-item>
289+
<cds-contained-list-item>List item</cds-contained-list-item>
290+
</cds-contained-list>
291291
</div>
292292
</div>
293293
</div>
@@ -304,12 +304,12 @@ const withListTitleDecoratorsTemplate: Story<ContainedList> = () => ({
304304
<ibm-tag size="sm">4</ibm-tag>
305305
</div>
306306
</ng-template>
307-
<ibm-contained-list [label]="label">
308-
<ibm-contained-list-item>List item</ibm-contained-list-item>
309-
<ibm-contained-list-item>List item</ibm-contained-list-item>
310-
<ibm-contained-list-item>List item</ibm-contained-list-item>
311-
<ibm-contained-list-item>List item</ibm-contained-list-item>
312-
</ibm-contained-list>
307+
<cds-contained-list [label]="label">
308+
<cds-contained-list-item>List item</cds-contained-list-item>
309+
<cds-contained-list-item>List item</cds-contained-list-item>
310+
<cds-contained-list-item>List item</cds-contained-list-item>
311+
<cds-contained-list-item>List item</cds-contained-list-item>
312+
</cds-contained-list>
313313
`
314314
});
315315
export const withListTitleDecorators = withListTitleDecoratorsTemplate.bind({});

0 commit comments

Comments
 (0)