Skip to content

Commit 82bfa3b

Browse files
LucyChyzhovaKiarokh
LucyChyzhova
authored and
Kiarokh
committed
docs(examples): improve code quality
1 parent dbbcdfd commit 82bfa3b

File tree

6 files changed

+149
-139
lines changed

6 files changed

+149
-139
lines changed

‎src/components/button/examples/button-composite.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -93,31 +93,31 @@ export class ButtonCompositeExample {
9393
);
9494
}
9595

96-
private setDisabled = (event: CustomEvent<boolean>) => {
96+
private readonly setDisabled = (event: CustomEvent<boolean>) => {
9797
event.stopPropagation();
9898
this.props = {
9999
...this.props,
100100
disabled: event.detail,
101101
};
102102
};
103103

104-
private setPrimary = (event: CustomEvent<boolean>) => {
104+
private readonly setPrimary = (event: CustomEvent<boolean>) => {
105105
event.stopPropagation();
106106
this.props = {
107107
...this.props,
108108
primary: event.detail,
109109
};
110110
};
111111

112-
private setOutlined = (event: CustomEvent<boolean>) => {
112+
private readonly setOutlined = (event: CustomEvent<boolean>) => {
113113
event.stopPropagation();
114114
this.props = {
115115
...this.props,
116116
outlined: event.detail,
117117
};
118118
};
119119

120-
private setLoading = (event: CustomEvent<boolean>) => {
120+
private readonly setLoading = (event: CustomEvent<boolean>) => {
121121
event.stopPropagation();
122122
this.props = {
123123
...this.props,

‎src/components/chip-set/examples/chip-set.tsx‎

Lines changed: 30 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Component, h, State } from '@stencil/core';
1+
import { Component, h, Host, State } from '@stencil/core';
22

33
/**
44
* Basic example with no `type` set
@@ -19,34 +19,36 @@ export class ChipSetExample {
1919
private disabled: boolean = false;
2020

2121
public render() {
22-
return [
23-
<limel-chip-set
24-
label="Tags"
25-
disabled={this.disabled}
26-
onInteract={this.handleInteraction}
27-
value={[
28-
{
29-
id: 1,
30-
text: 'Fruit',
31-
},
32-
{
33-
id: 2,
34-
text: 'Green',
35-
},
36-
{
37-
id: 3,
38-
text: 'Sour',
39-
},
40-
]}
41-
/>,
42-
<limel-example-controls>
43-
<limel-switch
44-
label="Disabled"
45-
onChange={this.toggleEnabled}
46-
value={this.disabled}
22+
return (
23+
<Host>
24+
<limel-chip-set
25+
label="Tags"
26+
disabled={this.disabled}
27+
onInteract={this.handleInteraction}
28+
value={[
29+
{
30+
id: 1,
31+
text: 'Fruit',
32+
},
33+
{
34+
id: 2,
35+
text: 'Green',
36+
},
37+
{
38+
id: 3,
39+
text: 'Sour',
40+
},
41+
]}
4742
/>
48-
</limel-example-controls>,
49-
];
43+
<limel-example-controls>
44+
<limel-switch
45+
label="Disabled"
46+
onChange={this.toggleEnabled}
47+
value={this.disabled}
48+
/>
49+
</limel-example-controls>
50+
</Host>
51+
);
5052
}
5153

5254
private handleInteraction = (event) => {

‎src/components/input-field/examples/input-field-number.tsx‎

Lines changed: 38 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Component, h, State, Watch } from '@stencil/core';
1+
import { Component, h, Host, State, Watch } from '@stencil/core';
22

33
/**
44
* Input Field of Type Number
@@ -27,42 +27,44 @@ export class InputFieldNumberExample {
2727
private value = '';
2828

2929
public render() {
30-
return [
31-
<limel-input-field
32-
label="Number Field Label"
33-
value={this.value}
34-
type="number"
35-
formatNumber={this.formatNumber}
36-
disabled={this.disabled}
37-
readonly={this.readonly}
38-
invalid={this.invalid}
39-
required={this.required}
40-
onChange={this.handleChange}
41-
/>,
42-
<limel-example-controls>
43-
<limel-switch
44-
value={this.formatNumber}
45-
label="Format value"
46-
onChange={this.setFormatNumber}
30+
return (
31+
<Host>
32+
<limel-input-field
33+
label="Number Field Label"
34+
value={this.value}
35+
type="number"
36+
formatNumber={this.formatNumber}
37+
disabled={this.disabled}
38+
readonly={this.readonly}
39+
invalid={this.invalid}
40+
required={this.required}
41+
onChange={this.handleChange}
4742
/>
48-
<limel-switch
49-
value={this.disabled}
50-
label="Disabled"
51-
onChange={this.setDisabled}
52-
/>
53-
<limel-switch
54-
value={this.readonly}
55-
label="Readonly"
56-
onChange={this.setReadonly}
57-
/>
58-
<limel-switch
59-
value={this.required}
60-
label="Required"
61-
onChange={this.setRequired}
62-
/>
63-
</limel-example-controls>,
64-
<limel-example-value value={this.value} />,
65-
];
43+
<limel-example-controls>
44+
<limel-switch
45+
value={this.formatNumber}
46+
label="Format value"
47+
onChange={this.setFormatNumber}
48+
/>
49+
<limel-switch
50+
value={this.disabled}
51+
label="Disabled"
52+
onChange={this.setDisabled}
53+
/>
54+
<limel-switch
55+
value={this.readonly}
56+
label="Readonly"
57+
onChange={this.setReadonly}
58+
/>
59+
<limel-switch
60+
value={this.required}
61+
label="Required"
62+
onChange={this.setRequired}
63+
/>
64+
</limel-example-controls>
65+
<limel-example-value value={this.value} />
66+
</Host>
67+
);
6668
}
6769

6870
@Watch('required')

‎src/components/list/examples/list-checkbox-icons.tsx‎

Lines changed: 17 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { LimelListCustomEvent, ListItem } from '@limetech/lime-elements';
2-
import { Component, h, State } from '@stencil/core';
2+
import { Component, h, Host, State } from '@stencil/core';
33

44
/**
55
* List with checkboxes and icons
@@ -93,21 +93,23 @@ export class ListCheckboxIconsExample {
9393
}
9494

9595
public render() {
96-
return [
97-
<limel-list
98-
onChange={this.handleChange}
99-
items={this.items}
100-
type="checkbox"
101-
/>,
102-
<limel-example-value value={this.selectedItems} />,
103-
<limel-example-controls>
104-
<limel-switch
105-
value={this.showIcons}
106-
label="icon"
107-
onChange={this.setIcon}
96+
return (
97+
<Host>
98+
<limel-list
99+
onChange={this.handleChange}
100+
items={this.items}
101+
type="checkbox"
108102
/>
109-
</limel-example-controls>,
110-
];
103+
<limel-example-value value={this.selectedItems} />
104+
<limel-example-controls>
105+
<limel-switch
106+
value={this.showIcons}
107+
label="icon"
108+
onChange={this.setIcon}
109+
/>
110+
</limel-example-controls>
111+
</Host>
112+
);
111113
}
112114

113115
private handleChange = (event: LimelListCustomEvent<ListItem[]>) => {

‎src/components/list/examples/list-pictures.tsx‎

Lines changed: 22 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { ListItem } from '@limetech/lime-elements';
2-
import { Component, h, State } from '@stencil/core';
2+
import { Component, h, Host, State } from '@stencil/core';
33

44
/**
55
* List with Pictures and Icons
@@ -75,26 +75,28 @@ export class PictureListExample {
7575
private hasStripedRows: boolean = true;
7676

7777
public render() {
78-
return [
79-
<limel-list
80-
items={this.items}
81-
type="selectable"
82-
badgeIcons={this.badgeIcons}
83-
class={this.hasStripedRows ? 'has-striped-rows' : ''}
84-
/>,
85-
<limel-example-controls>
86-
<limel-switch
87-
value={this.badgeIcons}
88-
label="badge icons"
89-
onChange={this.setBadgeIcons}
78+
return (
79+
<Host>
80+
<limel-list
81+
items={this.items}
82+
type="selectable"
83+
badgeIcons={this.badgeIcons}
84+
class={this.hasStripedRows ? 'has-striped-rows' : ''}
9085
/>
91-
<limel-switch
92-
value={this.hasStripedRows}
93-
label="striped rows"
94-
onChange={this.setHasStripedRows}
95-
/>
96-
</limel-example-controls>,
97-
];
86+
<limel-example-controls>
87+
<limel-switch
88+
value={this.badgeIcons}
89+
label="badge icons"
90+
onChange={this.setBadgeIcons}
91+
/>
92+
<limel-switch
93+
value={this.hasStripedRows}
94+
label="striped rows"
95+
onChange={this.setHasStripedRows}
96+
/>
97+
</limel-example-controls>
98+
</Host>
99+
);
98100
}
99101

100102
private setBadgeIcons = (event: CustomEvent<boolean>) => {

‎src/components/select/examples/select.tsx‎

Lines changed: 38 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { Option } from '@limetech/lime-elements';
2-
import { Component, h, State } from '@stencil/core';
2+
import { Component, h, Host, State } from '@stencil/core';
33

44
@Component({
55
shadow: true,
@@ -28,42 +28,44 @@ export class SelectExample {
2828
];
2929

3030
public render() {
31-
return [
32-
<limel-select
33-
label="Favorite hero"
34-
helperText="May the force be with him or her"
35-
value={this.value}
36-
options={this.options}
37-
disabled={this.disabled}
38-
readonly={this.readonly}
39-
required={this.required}
40-
invalid={this.invalid}
41-
onChange={this.changeHandler}
42-
/>,
43-
<limel-example-controls>
44-
<limel-switch
45-
value={this.disabled}
46-
label="Disabled"
47-
onChange={this.setDisabled}
31+
return (
32+
<Host>
33+
<limel-select
34+
label="Favorite hero"
35+
helperText="May the force be with him or her"
36+
value={this.value}
37+
options={this.options}
38+
disabled={this.disabled}
39+
readonly={this.readonly}
40+
required={this.required}
41+
invalid={this.invalid}
42+
onChange={this.changeHandler}
4843
/>
49-
<limel-switch
50-
value={this.readonly}
51-
label="Readonly"
52-
onChange={this.setReadonly}
53-
/>
54-
<limel-switch
55-
value={this.required}
56-
label="Required"
57-
onChange={this.setRequired}
58-
/>
59-
<limel-switch
60-
value={this.invalid}
61-
label="Invalid"
62-
onChange={this.setInvalid}
63-
/>
64-
</limel-example-controls>,
65-
<limel-example-value value={this.value} />,
66-
];
44+
<limel-example-controls>
45+
<limel-switch
46+
value={this.disabled}
47+
label="Disabled"
48+
onChange={this.setDisabled}
49+
/>
50+
<limel-switch
51+
value={this.readonly}
52+
label="Readonly"
53+
onChange={this.setReadonly}
54+
/>
55+
<limel-switch
56+
value={this.required}
57+
label="Required"
58+
onChange={this.setRequired}
59+
/>
60+
<limel-switch
61+
value={this.invalid}
62+
label="Invalid"
63+
onChange={this.setInvalid}
64+
/>
65+
</limel-example-controls>
66+
<limel-example-value value={this.value} />
67+
</Host>
68+
);
6769
}
6870

6971
private changeHandler = (event) => {

0 commit comments

Comments
 (0)