Skip to content

Commit 6ca7492

Browse files
scriptcodedscriptcoded
committed
feat: add checkbox and radio button types to list view item
1 parent 48d3fe8 commit 6ca7492

File tree

6 files changed

+143
-24
lines changed

6 files changed

+143
-24
lines changed

‎packages/storybook/src/stories/list-view.stories.tsx‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -67,3 +67,43 @@ export const WithSections = meta.story({
6767
</div>
6868
),
6969
});
70+
71+
export const WithRadioButtons = meta.story({
72+
args: {},
73+
render: (args) => (
74+
<div style={{ maxWidth: "20rem", width: "100vw" }}>
75+
<ScoutListView {...args}>
76+
<ScoutListViewItem
77+
type="radio"
78+
primary="First item"
79+
value="first"
80+
name="list-view-radio-group"
81+
/>
82+
<ScoutListViewItem
83+
type="radio"
84+
primary="Second item"
85+
value="second"
86+
name="list-view-radio-group"
87+
/>
88+
<ScoutListViewItem
89+
type="radio"
90+
primary="Third item"
91+
value="third"
92+
name="list-view-radio-group"
93+
/>
94+
</ScoutListView>
95+
</div>
96+
),
97+
});
98+
99+
export const WithCheckboxes = meta.story({
100+
render: (args) => (
101+
<div style={{ maxWidth: "20rem", width: "100vw" }}>
102+
<ScoutListView {...args}>
103+
<ScoutListViewItem type="checkbox" primary="First item" />
104+
<ScoutListViewItem type="checkbox" primary="Second item" />
105+
<ScoutListViewItem type="checkbox" primary="Third item" />
106+
</ScoutListView>
107+
</div>
108+
),
109+
});

‎packages/ui-webc/src/components/checkbox/readme.md‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,19 @@
2323
| `scoutChecked` | | `CustomEvent<{ checked: boolean; element: HTMLInputElement; }>` |
2424

2525

26+
## Dependencies
27+
28+
### Used by
29+
30+
- [scout-list-view-item](../list-view-item)
31+
32+
### Graph
33+
```mermaid
34+
graph TD;
35+
scout-list-view-item --> scout-checkbox
36+
style scout-checkbox fill:#f9f,stroke:#333,stroke-width:4px
37+
```
38+
2639
----------------------------------------------
2740

2841
*Built with [StencilJS](https://stenciljs.com/)*

‎packages/ui-webc/src/components/list-view-item/list-view-item.tsx‎

Lines changed: 17 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import {
77
Prop,
88
} from "@stencil/core";
99

10-
export type ItemType = "button" | "link";
10+
export type ItemType = "button" | "link" | "radio" | "checkbox";
1111

1212
@Component({
1313
tag: "scout-list-view-item",
@@ -26,10 +26,18 @@ export class ScoutListViewItem {
2626
@Prop() target?: string;
2727
@Prop() rel?: string;
2828

29+
@Prop() name?: string;
30+
@Prop() value?: string;
31+
2932
@Event() scoutClick: EventEmitter<void>;
3033

3134
render() {
32-
const Tag = this.type === "link" ? "a" : "button";
35+
const Tag =
36+
this.type === "link"
37+
? "a"
38+
: this.type === "radio" || this.type === "checkbox"
39+
? "label"
40+
: "button";
3341

3442
const linkProps =
3543
this.type === "link"
@@ -76,18 +84,13 @@ export class ScoutListViewItem {
7684
}
7785

7886
private getSuffix() {
79-
// if (this.type === "link") {
80-
// return (
81-
// <div class="suffix-icon">
82-
// <span
83-
// class="icon"
84-
// style={{
85-
// "--icon": `url(${ChevronRightIcon})`,
86-
// }}
87-
// />
88-
// </div>
89-
// );
90-
// }
87+
if (this.type === "radio") {
88+
return <scout-radio-button name={this.name} value={this.value} />;
89+
}
90+
91+
if (this.type === "checkbox") {
92+
return <scout-checkbox name={this.name} value={this.value} />;
93+
}
9194

9295
return null;
9396
}

‎packages/ui-webc/src/components/list-view-item/readme.md‎

Lines changed: 26 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -5,15 +5,17 @@
55

66
## Properties
77

8-
| Property | Attribute | Description | Type | Default |
9-
| ----------- | ----------- | ----------- | -------------------- | ----------- |
10-
| `href` | `href` | | `string` | `undefined` |
11-
| `icon` | `icon` | | `string` | `undefined` |
12-
| `primary` | `primary` | | `string` | `undefined` |
13-
| `rel` | `rel` | | `string` | `undefined` |
14-
| `secondary` | `secondary` | | `string` | `undefined` |
15-
| `target` | `target` | | `string` | `undefined` |
16-
| `type` | `type` | | `"button" \| "link"` | `"button"` |
8+
| Property | Attribute | Description | Type | Default |
9+
| ----------- | ----------- | ----------- | --------------------------------------------- | ----------- |
10+
| `href` | `href` | | `string` | `undefined` |
11+
| `icon` | `icon` | | `string` | `undefined` |
12+
| `name` | `name` | | `string` | `undefined` |
13+
| `primary` | `primary` | | `string` | `undefined` |
14+
| `rel` | `rel` | | `string` | `undefined` |
15+
| `secondary` | `secondary` | | `string` | `undefined` |
16+
| `target` | `target` | | `string` | `undefined` |
17+
| `type` | `type` | | `"button" \| "checkbox" \| "link" \| "radio"` | `"button"` |
18+
| `value` | `value` | | `string` | `undefined` |
1719

1820

1921
## Events
@@ -23,6 +25,21 @@
2325
| `scoutClick` | | `CustomEvent<void>` |
2426

2527

28+
## Dependencies
29+
30+
### Depends on
31+
32+
- [scout-radio-button](../radio-button)
33+
- [scout-checkbox](../checkbox)
34+
35+
### Graph
36+
```mermaid
37+
graph TD;
38+
scout-list-view-item --> scout-radio-button
39+
scout-list-view-item --> scout-checkbox
40+
style scout-list-view-item fill:#f9f,stroke:#333,stroke-width:4px
41+
```
42+
2643
----------------------------------------------
2744

2845
*Built with [StencilJS](https://stenciljs.com/)*

‎packages/ui-webc/src/components/list-view/list-view.tsx‎

Lines changed: 34 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Component, Host, h } from "@stencil/core";
1+
import { Component, Element, Host, h, Listen } from "@stencil/core";
22

33
@Component({
44
tag: "scout-list-view",
@@ -8,6 +8,39 @@ import { Component, Host, h } from "@stencil/core";
88
},
99
})
1010
export class ScoutListView {
11+
@Element() el: HTMLElement;
12+
13+
@Listen("scoutChecked")
14+
onScoutChecked(
15+
event: CustomEvent<{ checked: boolean; element: HTMLInputElement }>,
16+
) {
17+
const { checked, element } = event.detail;
18+
19+
if (element.type !== "radio" || !element.name || !checked) {
20+
return;
21+
}
22+
23+
const listItems = this.el.querySelectorAll("scout-list-view-item");
24+
25+
const otherRadios: HTMLInputElement[] = [];
26+
27+
listItems.forEach((item) => {
28+
const radios = item.shadowRoot.querySelectorAll<HTMLInputElement>(
29+
`input[type="radio"][name="${element.name}"]`,
30+
);
31+
32+
radios.forEach((r) => {
33+
if (r !== element) {
34+
otherRadios.push(r);
35+
}
36+
});
37+
});
38+
39+
for (const radio of otherRadios) {
40+
radio.checked = false;
41+
}
42+
}
43+
1144
render() {
1245
return (
1346
<Host role="list">

‎packages/ui-webc/src/components/radio-button/readme.md‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,19 @@
2323
| `scoutChecked` | | `CustomEvent<{ checked: boolean; element: HTMLInputElement; }>` |
2424

2525

26+
## Dependencies
27+
28+
### Used by
29+
30+
- [scout-list-view-item](../list-view-item)
31+
32+
### Graph
33+
```mermaid
34+
graph TD;
35+
scout-list-view-item --> scout-radio-button
36+
style scout-radio-button fill:#f9f,stroke:#333,stroke-width:4px
37+
```
38+
2639
----------------------------------------------
2740

2841
*Built with [StencilJS](https://stenciljs.com/)*

0 commit comments

Comments
 (0)