Skip to content

Commit dd5c326

Browse files
claviskaclaviska
authored
remove redundant examples; closes #1041 (#1064)
1 parent 81996cb commit dd5c326

File tree

10 files changed

+10
-265
lines changed

10 files changed

+10
-265
lines changed

‎packages/webawesome/docs/docs/components/breadcrumb-item.md

Lines changed: 1 addition & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -5,17 +5,4 @@ tags: component
55
parent: breadcrumb
66
---
77

8-
```html {.example}
9-
<wa-breadcrumb>
10-
<wa-breadcrumb-item>
11-
<wa-icon slot="start" name="house" variant="solid"></wa-icon>
12-
Home
13-
</wa-breadcrumb-item>
14-
<wa-breadcrumb-item>Clothing</wa-breadcrumb-item>
15-
<wa-breadcrumb-item>Shirts</wa-breadcrumb-item>
16-
</wa-breadcrumb>
17-
```
18-
19-
:::info
20-
Additional demonstrations can be found in the [breadcrumb examples](/docs/components/breadcrumb).
21-
:::
8+
This component must be used as a child of `<wa-breadcrumb>`. Please see the [Breadcrumb docs](/docs/components/breadcrumb) to see examples of this component in action.

‎packages/webawesome/docs/docs/components/carousel-item.md

Lines changed: 1 addition & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -6,41 +6,4 @@ parent: carousel
66
icon: carousel-item
77
---
88

9-
```html {.example}
10-
<wa-carousel pagination>
11-
<wa-carousel-item>
12-
<img
13-
alt="The sun shines on the mountains and trees - Photo by Adam Kool on Unsplash"
14-
src="/assets/examples/carousel/mountains.jpg"
15-
/>
16-
</wa-carousel-item>
17-
<wa-carousel-item>
18-
<img
19-
alt="A waterfall in the middle of a forest - Photo by Thomas Kelly on Unsplash"
20-
src="/assets/examples/carousel/waterfall.jpg"
21-
/>
22-
</wa-carousel-item>
23-
<wa-carousel-item>
24-
<img
25-
alt="The sun is setting over a lavender field - Photo by Leonard Cotte on Unsplash"
26-
src="/assets/examples/carousel/sunset.jpg"
27-
/>
28-
</wa-carousel-item>
29-
<wa-carousel-item>
30-
<img
31-
alt="A field of grass with the sun setting in the background - Photo by Sapan Patel on Unsplash"
32-
src="/assets/examples/carousel/field.jpg"
33-
/>
34-
</wa-carousel-item>
35-
<wa-carousel-item>
36-
<img
37-
alt="A scenic view of a mountain with clouds rolling in - Photo by V2osk on Unsplash"
38-
src="/assets/examples/carousel/valley.jpg"
39-
/>
40-
</wa-carousel-item>
41-
</wa-carousel>
42-
```
43-
44-
:::info
45-
Additional demonstrations can be found in the [carousel examples](/docs/components/carousel).
46-
:::
9+
This component must be used as a child of `<wa-carousel>`. Please see the [Carousel docs](/docs/components/carousel) to see examples of this component in action.

‎packages/webawesome/docs/docs/components/option.md

Lines changed: 1 addition & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -6,50 +6,4 @@ parent: select
66
icon: option
77
---
88

9-
```html {.example}
10-
<wa-select label="Select one">
11-
<wa-option value="option-1">Option 1</wa-option>
12-
<wa-option value="option-2">Option 2</wa-option>
13-
<wa-option value="option-3">Option 3</wa-option>
14-
</wa-select>
15-
```
16-
17-
## Examples
18-
19-
### Disabled
20-
21-
Use the `disabled` attribute to disable an option and prevent it from being selected.
22-
23-
```html {.example}
24-
<wa-select label="Select one">
25-
<wa-option value="option-1">Option 1</wa-option>
26-
<wa-option value="option-2" disabled>Option 2</wa-option>
27-
<wa-option value="option-3">Option 3</wa-option>
28-
</wa-select>
29-
```
30-
31-
### Start & End Decorations
32-
33-
Use the `start` and `end` slots to add presentational elements like `<wa-icon>` next to the option label.
34-
35-
```html {.example}
36-
<wa-select label="Select one">
37-
<wa-option value="option-1">
38-
<wa-icon slot="start" name="envelope"></wa-icon>
39-
Email
40-
<wa-icon slot="end" name="circle-check"></wa-icon>
41-
</wa-option>
42-
43-
<wa-option value="option-2">
44-
<wa-icon slot="start" name="phone"></wa-icon>
45-
Phone
46-
<wa-icon slot="end" name="circle-check"></wa-icon>
47-
</wa-option>
48-
49-
<wa-option value="option-3">
50-
<wa-icon slot="start" name="comment"></wa-icon>
51-
Chat
52-
<wa-icon slot="end" name="circle-check"></wa-icon>
53-
</wa-option>
54-
</wa-select>
55-
```
9+
This component must be used as a child of `<wa-select>`. Please see the [Select docs](/docs/components/select) to see examples of this component in action.

‎packages/webawesome/docs/docs/components/radio.md

Lines changed: 1 addition & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -7,71 +7,4 @@ native: radio
77
icon: radio-group
88
---
99

10-
Radios are designed to be used with [radio groups](/docs/components/radio-group).
11-
12-
```html {.example}
13-
<wa-radio-group label="Select an option" name="a" value="1">
14-
<wa-radio value="1">Option 1</wa-radio>
15-
<wa-radio value="2">Option 2</wa-radio>
16-
<wa-radio value="3">Option 3</wa-radio>
17-
</wa-radio-group>
18-
```
19-
20-
:::info
21-
This component works with standard `<form>` elements. Please refer to the section on [form controls](/docs/form-controls) to learn more about form submission and client-side validation.
22-
:::
23-
24-
## Examples
25-
26-
### Initial Value
27-
28-
To set the initial value and checked state, use the `value` attribute on the containing radio group.
29-
30-
```html {.example}
31-
<wa-radio-group label="Select an option" name="a" value="3">
32-
<wa-radio value="1">Option 1</wa-radio>
33-
<wa-radio value="2">Option 2</wa-radio>
34-
<wa-radio value="3">Option 3</wa-radio>
35-
</wa-radio-group>
36-
```
37-
38-
### Disabled
39-
40-
Use the `disabled` attribute to disable a radio.
41-
42-
```html {.example}
43-
<wa-radio-group label="Select an option" name="a" value="1">
44-
<wa-radio value="1">Option 1</wa-radio>
45-
<wa-radio value="2" disabled>Option 2</wa-radio>
46-
<wa-radio value="3">Option 3</wa-radio>
47-
</wa-radio-group>
48-
```
49-
50-
### Sizes
51-
52-
Add the `size` attribute to the [Radio Group](/docs/components/radio-group) to change the radios' size.
53-
54-
```html {.example}
55-
<wa-radio-group size="small" value="1">
56-
<wa-radio value="1">Small 1</wa-radio>
57-
<wa-radio value="2">Small 2</wa-radio>
58-
<wa-radio value="3">Small 3</wa-radio>
59-
</wa-radio-group>
60-
61-
<br />
62-
63-
<wa-radio-group size="medium" value="1">
64-
<wa-radio value="1">Medium 1</wa-radio>
65-
<wa-radio value="2">Medium 2</wa-radio>
66-
<wa-radio value="3">Medium 3</wa-radio>
67-
</wa-radio-group>
68-
69-
<br />
70-
71-
<wa-radio-group size="large" value="1">
72-
<wa-radio value="1">Large 1</wa-radio>
73-
<wa-radio value="2">Large 2</wa-radio>
74-
<wa-radio value="3">Large 3</wa-radio>
75-
</wa-radio-group>
76-
```
77-
10+
This component must be used as a child of `<wa-radio-group>`. Please see the [Radio Group docs](/docs/components/radio-group) to see examples of this component in action.

‎packages/webawesome/docs/docs/components/tab-panel.md

Lines changed: 1 addition & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -6,20 +6,4 @@ parent: tab-group
66
icon: tab-panel
77
---
88

9-
```html {.example}
10-
<wa-tab-group>
11-
<wa-tab panel="general">General</wa-tab>
12-
<wa-tab panel="custom">Custom</wa-tab>
13-
<wa-tab panel="advanced">Advanced</wa-tab>
14-
<wa-tab panel="disabled" disabled>Disabled</wa-tab>
15-
16-
<wa-tab-panel name="general">This is the general tab panel.</wa-tab-panel>
17-
<wa-tab-panel name="custom">This is the custom tab panel.</wa-tab-panel>
18-
<wa-tab-panel name="advanced">This is the advanced tab panel.</wa-tab-panel>
19-
<wa-tab-panel name="disabled">This is a disabled tab panel.</wa-tab-panel>
20-
</wa-tab-group>
21-
```
22-
23-
:::info
24-
Additional demonstrations can be found in the [tab group examples](/docs/components/tab-group).
25-
:::
9+
This component must be used as a child of `<wa-tab-group>`. Please see the [Tab Group docs](/docs/components/tab-group) to see examples of this component in action.

‎packages/webawesome/docs/docs/components/tab.md

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,4 @@ parent: tab-group
66
icon: tab
77
---
88

9-
:::info
10-
Additional demonstrations can be found in the [tab group examples](/docs/components/tab-group).
11-
:::
9+
This component must be used as a child of `<wa-tab-group>`. Please see the [Tab Group docs](/docs/components/tab-group) to see examples of this component in action.

‎packages/webawesome/docs/docs/components/tree-item.md

Lines changed: 1 addition & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -5,78 +5,4 @@ tags: [navigation, disclosure, apps]
55
icon: tree
66
---
77

8-
```html {.example}
9-
<wa-tree>
10-
<wa-tree-item>
11-
Item 1
12-
<wa-tree-item>Item A</wa-tree-item>
13-
<wa-tree-item>Item B</wa-tree-item>
14-
<wa-tree-item>Item C</wa-tree-item>
15-
</wa-tree-item>
16-
<wa-tree-item>Item 2</wa-tree-item>
17-
<wa-tree-item>Item 3</wa-tree-item>
18-
</wa-tree>
19-
```
20-
21-
## Examples
22-
23-
### Nested tree items
24-
25-
A tree item can contain other tree items. This allows the node to be expanded or collapsed by the user.
26-
27-
```html {.example}
28-
<wa-tree>
29-
<wa-tree-item>
30-
Item 1
31-
<wa-tree-item>
32-
Item A
33-
<wa-tree-item>Item Z</wa-tree-item>
34-
<wa-tree-item>Item Y</wa-tree-item>
35-
<wa-tree-item>Item X</wa-tree-item>
36-
</wa-tree-item>
37-
<wa-tree-item>Item B</wa-tree-item>
38-
<wa-tree-item>Item C</wa-tree-item>
39-
</wa-tree-item>
40-
<wa-tree-item>Item 2</wa-tree-item>
41-
<wa-tree-item>Item 3</wa-tree-item>
42-
</wa-tree>
43-
```
44-
45-
### Selected
46-
47-
Use the `selected` attribute to select a tree item initially.
48-
49-
```html {.example}
50-
<wa-tree>
51-
<wa-tree-item selected>
52-
Item 1
53-
<wa-tree-item>Item A</wa-tree-item>
54-
<wa-tree-item>Item B</wa-tree-item>
55-
<wa-tree-item>Item C</wa-tree-item>
56-
</wa-tree-item>
57-
<wa-tree-item>Item 2</wa-tree-item>
58-
<wa-tree-item>Item 3</wa-tree-item>
59-
</wa-tree>
60-
```
61-
62-
### Expanded
63-
64-
Use the `expanded` attribute to expand a tree item initially.
65-
66-
```html {.example}
67-
<wa-tree>
68-
<wa-tree-item expanded>
69-
Item 1
70-
<wa-tree-item expanded>
71-
Item A
72-
<wa-tree-item>Item Z</wa-tree-item>
73-
<wa-tree-item>Item Y</wa-tree-item>
74-
<wa-tree-item>Item X</wa-tree-item>
75-
</wa-tree-item>
76-
<wa-tree-item>Item B</wa-tree-item>
77-
<wa-tree-item>Item C</wa-tree-item>
78-
</wa-tree-item>
79-
<wa-tree-item>Item 2</wa-tree-item>
80-
<wa-tree-item>Item 3</wa-tree-item>
81-
</wa-tree>
82-
```
8+
This component must be used as a child of `<wa-tree>`. Please see the [Tree docs](/docs/components/tree) to see examples of this component in action.

‎packages/webawesome/src/components/breadcrumb-item/breadcrumb-item.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import WebAwesomeElement from '../../internal/webawesome-element.js';
66
import styles from './breadcrumb-item.css';
77

88
/**
9-
* @summary Breadcrumb Items are used inside [breadcrumbs](/docs/components/breadcrumb) to represent different links.
9+
* @summary Breadcrumb Items are used inside breadcrumbs to represent different links.
1010
* @documentation https://backers.webawesome.com/docs/components/breadcrumb-item
1111
* @status stable
1212
* @since 2.0

‎packages/webawesome/src/components/carousel-item/carousel-item.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import WebAwesomeElement from '../../internal/webawesome-element.js';
44
import styles from './carousel-item.css';
55

66
/**
7-
* @summary A carousel item represent a slide within a [carousel](/docs/components/carousel).
7+
* @summary A carousel item represent a slide within a carousel.
88
*
99
* @since 2.0
1010
* @status experimental

‎packages/webawesome/src/components/option/option.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import '../icon/icon.js';
88
import styles from './option.css';
99

1010
/**
11-
* @summary Options define the selectable items within various form controls such as [select](/docs/components/select).
11+
* @summary Options define the selectable items within a select component.
1212
* @documentation https://backers.webawesome.com/docs/components/option
1313
* @status stable
1414
* @since 2.0

0 commit comments

Comments
 (0)