Skip to content

Commit 44ae811

Browse files
amir78729amir78729
authored
Merge pull request #116 from amir78729/docs/jsdoc/radio
docs: add JSDoc to `radio` component
2 parents f3c6b82 + d09f644 commit 44ae811

8 files changed

+161
-72
lines changed

‎src/radio-group/index.ts

+39-5
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,48 @@
1-
import { customElement } from "lit/decorators.js";
2-
import { RadioGroup } from "./radio-group";
3-
import styles from "./radio-group.style";
1+
import { customElement } from 'lit/decorators.js';
2+
import { RadioGroup } from './radio-group';
3+
import styles from './radio-group.style';
44

5-
@customElement("tap-radio-group")
5+
/**
6+
* ### Example
7+
*
8+
*
9+
* ##### Simple
10+
*
11+
* ```html
12+
* <tap-radio-group>
13+
* <tap-radio value="1"></tap-radio>
14+
* <tap-radio value="2"></tap-radio>
15+
* </tap-radio-group>
16+
* ```
17+
*
18+
* ##### With Direction
19+
*
20+
* ```html
21+
* <tap-radio-group direction="horizontal">
22+
* <tap-radio value="1"></tap-radio>
23+
* <tap-radio value="2"></tap-radio>
24+
* </tap-radio-group>
25+
* ```
26+
*
27+
* @summary A group of radio buttons.
28+
*
29+
* @prop {`'horizontal'` \| `'vertical'`} [`direction`=`'vertical'`] - The direction in which the radio buttons are laid out. Defaults to `vertical`.
30+
* @prop {`string`} [`value`=`''`] - The value of the selected radio button.
31+
*
32+
* @csspart [`radio-group`] - The main container for the radio group.
33+
*
34+
* @cssprop [`--tap-radio-group-padding`=`--tap-sys-spacing-3`] - The padding around the radio group.
35+
* @cssprop [`--tap-radio-group-gap`=`--tap-sys-spacing-3`] - The gap between radio buttons.
36+
*
37+
* @event radio-group-change - Dispatched when the selected radio button changes.
38+
*/
39+
@customElement('tap-radio-group')
640
export class TapRadioGroup extends RadioGroup {
741
static readonly styles = [styles];
842
}
943

1044
declare global {
1145
interface HTMLElementTagNameMap {
12-
"tap-radio-group": TapRadioGroup;
46+
'tap-radio-group': TapRadioGroup;
1347
}
1448
}

‎src/radio-group/radio-group.stories.ts

+12-12
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
1-
import { html, TemplateResult } from "lit";
2-
import "../radio";
3-
import "./index.js";
1+
import { html, TemplateResult } from 'lit';
2+
import '../radio';
3+
import './index.js';
44

5-
const radioGroupDirection: string[] = ['horizontal', 'vertical']
5+
const radioGroupDirection: string[] = ['horizontal', 'vertical'];
66

77
export default {
8-
title: "Radio Group",
9-
component: "tap-radio-group",
8+
title: 'Radio Group',
9+
component: 'tap-radio-group',
1010
argTypes: {
1111
direction: {
1212
options: radioGroupDirection,
13-
control: { type: "inline-radio" },
13+
control: { type: 'inline-radio' },
1414
},
1515
},
1616
};
@@ -22,12 +22,12 @@ interface Story<T> {
2222
}
2323

2424
interface ArgTypes {
25-
value?: string,
26-
direction?: 'vertical' | 'horizontal'
25+
value?: string;
26+
direction?: 'vertical' | 'horizontal';
2727
}
2828

29-
const Template: Story<ArgTypes> = ({value,direction}: ArgTypes) => html`
30-
<tap-radio-group value="${value}" direction="${direction}" >
29+
const Template: Story<ArgTypes> = ({ value, direction }: ArgTypes) => html`
30+
<tap-radio-group value="${value}" direction="${direction}">
3131
<tap-radio value="1"></tap-radio>
3232
<tap-radio value="2"></tap-radio>
3333
<tap-radio value="3"></tap-radio>
@@ -39,5 +39,5 @@ export const RadioGroup = Template.bind({});
3939

4040
RadioGroup.args = {
4141
direction: 'vertical',
42-
value: '1'
42+
value: '1',
4343
};

‎src/radio-group/radio-group.style.ts

+5-5
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { css } from "lit";
1+
import { css } from 'lit';
22

33
export default css`
44
:host {
@@ -17,15 +17,15 @@ export default css`
1717
1818
.radio-group {
1919
display: flex;
20-
padding: var(--tap-sys-spacing-3);
21-
gap: var(--tap-sys-spacing-3);
20+
padding: var(--tap-radio-group-padding, var(--tap-sys-spacing-3));
21+
gap: var(--tap-radio-group-gap, var(--tap-sys-spacing-3));
2222
}
2323
24-
:host([direction="vertical"]) .radio-group {
24+
:host([direction='vertical']) .radio-group {
2525
flex-direction: column;
2626
}
2727
28-
:host([direction="horizontal"]) .radio-group {
28+
:host([direction='horizontal']) .radio-group {
2929
flex-direction: row;
3030
}
3131
`;

‎src/radio-group/radio-group.ts

+17-16
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,34 @@
1-
import { LitElement, html, nothing } from "lit";
2-
import { property, queryAssignedElements } from "lit/decorators.js";
3-
import { Radio } from "../radio/radio";
1+
import { LitElement, html, nothing } from 'lit';
2+
import { property, queryAssignedElements } from 'lit/decorators.js';
3+
import { Radio } from '../radio/radio';
44

55
export class RadioGroup extends LitElement {
6-
@property({ reflect: true }) direction: "horizontal" | "vertical" = "vertical";
7-
@property({ reflect: true }) value = "";
6+
@property({ reflect: true }) direction: 'horizontal' | 'vertical' =
7+
'vertical';
8+
@property({ reflect: true }) value = '';
89

910
@queryAssignedElements() private radios!: Radio[];
1011

1112
connectedCallback() {
1213
super.connectedCallback();
13-
this.addEventListener(
14-
"radio-input-change",
15-
this.handleRadioChangeClick
16-
);
14+
this.addEventListener('radio-input-change', this.handleRadioChangeClick);
1715
}
1816

19-
private selectDefaultOption(){
20-
if(!this.value) return;
21-
const selectedRadio = this.radios.find(radio => radio.value == this.value);
22-
if(!selectedRadio) return
17+
private selectDefaultOption() {
18+
if (!this.value) return;
19+
const selectedRadio = this.radios.find(
20+
(radio) => radio.value == this.value,
21+
);
22+
if (!selectedRadio) return;
2323
selectedRadio.checked = true;
2424
}
2525

2626
private handleRadioChangeClick(e: Event) {
2727
const index = this.radios.indexOf(e.target as Radio);
2828
const selectedRadio = this.radios[index];
2929

30-
if (!selectedRadio || selectedRadio.checked || selectedRadio.disabled) return;
30+
if (!selectedRadio || selectedRadio.checked || selectedRadio.disabled)
31+
return;
3132

3233
selectedRadio.checked = true;
3334

@@ -38,14 +39,14 @@ export class RadioGroup extends LitElement {
3839
});
3940

4041
this.dispatchEvent(
41-
new CustomEvent("radio-group-change", {
42+
new CustomEvent('radio-group-change', {
4243
detail: {
4344
checked: selectedRadio,
4445
index,
4546
},
4647
bubbles: true,
4748
composed: true,
48-
})
49+
}),
4950
);
5051
}
5152

‎src/radio/index.ts

+41-5
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,50 @@
1-
import { customElement } from "lit/decorators.js";
2-
import { Radio } from "./radio";
3-
import styles from "./radio.style";
1+
import { customElement } from 'lit/decorators.js';
2+
import { Radio } from './radio';
3+
import styles from './radio.style';
44

5-
@customElement("tap-radio")
5+
/**
6+
* ### Example
7+
*
8+
*
9+
* ##### Simple
10+
*
11+
* ```html
12+
* <tap-radio></tap-radio>
13+
* ```
14+
*
15+
* ##### Checked
16+
*
17+
* ```html
18+
* <tap-radio checked></tap-radio>
19+
* ```
20+
*
21+
* @summary A radio button component.
22+
*
23+
* @prop {`boolean`} [`checked`=`false`] - Indicates whether the radio button is checked.
24+
* @prop {`boolean`} [`disabled`=`false`] - Indicates whether the radio button is disabled.
25+
* @prop {`string`} [`value`=`''`] - The value of the radio button.
26+
*
27+
* @csspart [`radio`] - The main container for the radio button.
28+
* @cssprop [`--tap-radio-border-radius`=`--tap-sys-radius-full`] - The border radius of the radio button.
29+
* @cssprop [`--tap-radio-height`=`--tap-sys-spacing-7`] - The height of the radio button.
30+
* @cssprop [`--tap-radio-width`=`--tap-sys-spacing-7`] - The width of the radio button.
31+
* @cssprop [`--tap-radio-background-color`=`--tap-sys-color-surface-primary`] - The background color of the radio button.
32+
* @cssprop [`--tap-radio-border`=`--tap-sys-color-border-inverse-primary`] - The border color of the radio button.
33+
* @cssprop [`--tap-radio-checked-background-color`=`--tap-sys-color-surface-inverse-primary`] - The background color of the checked radio button.
34+
* @cssprop [`--tap-radio-checked-color`=`--tap-sys-color-content-on-inverse`] - The color of the content inside the checked radio button.
35+
* @cssprop [`--tap-radio-disabled-background-color`=`--tap-sys-color-surface-disabled`] - The background color of the disabled radio button.
36+
* @cssprop [`--tap-radio-disabled-border-color`=`--tap-sys-color-surface-disabled`] - The border color of the disabled radio button.
37+
* @cssprop [`--tap-radio-disabled-color`=`--tap-sys-color-content-disabled`] - The color of the content inside the disabled radio button.
38+
* @cssprop [`--tap-radio-input-height`=`--tap-sys-spacing-7`] - The height of the radio button input.
39+
* @cssprop [`--tap-radio-input-width`=`--tap-sys-spacing-7`] - The width of the radio button input.
40+
*/
41+
@customElement('tap-radio')
642
export class TapRadio extends Radio {
743
static readonly styles = [styles];
844
}
945

1046
declare global {
1147
interface HTMLElementTagNameMap {
12-
"tap-radio": TapRadio;
48+
'tap-radio': TapRadio;
1349
}
1450
}

‎src/radio/radio.stories.ts

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
import { html, TemplateResult } from "lit";
2-
import "./index.js";
1+
import { html, TemplateResult } from 'lit';
2+
import './index.js';
33

44
export default {
5-
title: "Radio",
6-
component: "tap-radio",
5+
title: 'Radio',
6+
component: 'tap-radio',
77
argTypes: {},
88
};
99

‎src/radio/radio.style.ts

+33-14
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { css } from "lit";
1+
import { css } from 'lit';
22

33
export default css`
44
:host {
@@ -19,31 +19,50 @@ export default css`
1919
position: relative;
2020
display: inline-flex;
2121
vertical-align: top;
22-
border-radius: var(--tap-sys-radius-full);
23-
height: var(--tap-sys-spacing-7);
24-
width: var(--tap-sys-spacing-7);
25-
background-color: var(--tap-sys-color-surface-primary);
26-
border: 1px solid var(--tap-sys-color-border-inverse-primary);
22+
border-radius: var(--tap-radio-border-radius, var(--tap-sys-radius-full));
23+
height: var(--tap-radio-height, var(--tap-sys-spacing-7));
24+
width: var(--tap-radio-width, var(--tap-sys-spacing-7));
25+
background-color: var(
26+
--tap-radio-background-color,
27+
var(--tap-sys-color-surface-primary)
28+
);
29+
border: 1px solid
30+
var(--tap-radio-border, var(--tap-sys-color-border-inverse-primary));
2731
cursor: pointer;
2832
align-items: center;
2933
justify-content: center;
3034
}
3135
32-
:host([checked]){
33-
background-color: var(--tap-sys-color-surface-inverse-primary);
34-
color: var(--tap-sys-color-content-on-inverse);
36+
:host([checked]) {
37+
background-color: var(
38+
--tap-radio-checked-background-color,
39+
var(--tap-sys-color-surface-inverse-primary)
40+
);
41+
color: var(
42+
--tap-radio-checked-color,
43+
var(--tap-sys-color-content-on-inverse)
44+
);
3545
}
3646
3747
:host([disabled]) {
38-
background-color: var(--tap-sys-color-surface-disabled);
39-
border-color: var(--tap-sys-color-surface-disabled);
40-
color: var(--tap-sys-color-content-disabled);
48+
background-color: var(
49+
--tap-radio-disabled-background-color,
50+
var(--tap-sys-color-surface-disabled)
51+
);
52+
border-color: var(
53+
--tap-radio-disabled-border-color,
54+
var(--tap-sys-color-surface-disabled)
55+
);
56+
color: var(
57+
--tap-radio-disabled-color,
58+
var(--tap-sys-color-content-disabled)
59+
);
4160
}
4261
4362
.input {
4463
appearance: none;
45-
height: var(--tap-sys-spacing-7);
46-
width: var(--tap-sys-spacing-7);
64+
height: var(--tap-radio-input-height, var(--tap-sys-spacing-7));
65+
width: var(--tap-radio-input-width, var(--tap-sys-spacing-7));
4766
margin: 0;
4867
opacity: 0;
4968
outline: none;

‎src/radio/radio.ts

+10-11
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import { LitElement, PropertyValues, html, nothing } from "lit";
2-
import { property } from "lit/decorators.js";
1+
import { LitElement, PropertyValues, html, nothing } from 'lit';
2+
import { property } from 'lit/decorators.js';
33

44
export class Radio extends LitElement {
55
static override shadowRootOptions: ShadowRootInit = {
@@ -12,7 +12,7 @@ export class Radio extends LitElement {
1212
@property({ type: Boolean })
1313
disabled = false;
1414

15-
@property() value = "";
15+
@property() value = '';
1616

1717
private internals: ElementInternals;
1818

@@ -31,18 +31,18 @@ export class Radio extends LitElement {
3131

3232
private handleInput(event: Event) {
3333
this.dispatchEvent(
34-
new CustomEvent("radio-input-change", {
34+
new CustomEvent('radio-input-change', {
3535
detail: {
3636
selected: this.value,
3737
},
3838
bubbles: true,
3939
composed: true,
40-
})
40+
}),
4141
);
4242
}
4343

4444
protected updated(changed: PropertyValues) {
45-
if (changed.has("checked")) {
45+
if (changed.has('checked')) {
4646
const value = this.checked ? this.value : null;
4747
this.internals.setFormValue(value, String(this.checked));
4848
}
@@ -53,7 +53,7 @@ export class Radio extends LitElement {
5353
}
5454

5555
formStateRestoreCallback(state: string) {
56-
this.checked = state === "true";
56+
this.checked = state === 'true';
5757
}
5858

5959
render() {
@@ -62,13 +62,12 @@ export class Radio extends LitElement {
6262
id="input"
6363
type="radio"
6464
role="radio"
65+
part="radio"
6566
class="input"
66-
aria-checked=${this.checked
67-
? "true"
68-
: "false"}
67+
aria-checked=${this.checked ? 'true' : 'false'}
6968
aria-label=${nothing}
7069
aria-describedby=${nothing}
71-
tabindex=${this.disabled ? "-1" : "0"}
70+
tabindex=${this.disabled ? '-1' : '0'}
7271
?disabled=${this.disabled}
7372
.checked=${this.checked}
7473
@input=${this.handleInput}

0 commit comments

Comments
 (0)