Skip to content

Commit 18d20d7

Browse files
jlukicjlukic
committed
Docs: Add specs to menu
1 parent 50d5901 commit 18d20d7

File tree

17 files changed

+397
-0
lines changed

17 files changed

+397
-0
lines changed

‎docs/src/examples/framework/specs/component-specs/button.spec.js‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
// Source spec - you author this
2+
export default {
3+
uiType: 'element',
4+
name: 'Widget',
5+
tagName: 'ui-widget',
6+
exportName: 'UIWidget',
7+
8+
types: [],
9+
states: [],
10+
11+
variations: [
12+
{
13+
name: 'Size',
14+
attribute: 'size',
15+
options: [
16+
{ name: 'Small', value: 'small' },
17+
{ name: 'Large', value: 'large' },
18+
],
19+
},
20+
{
21+
name: 'Emphasis',
22+
attribute: 'emphasis',
23+
includeAttributeClass: true,
24+
options: [
25+
{
26+
name: 'Primary',
27+
value: 'primary',
28+
description: 'be emphasized with primary color',
29+
},
30+
{
31+
name: 'Secondary',
32+
value: 'secondary',
33+
description: 'be emphasized with secondary color',
34+
},
35+
],
36+
},
37+
],
38+
39+
settings: [],
40+
events: [],
41+
};

‎docs/src/examples/framework/specs/component-specs/component.css‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
.widget {
2+
display: inline-block;
3+
padding: var(--4px) var(--8px);
4+
border-radius: var(--border-radius);
5+
background: var(--standard-5);
6+
font-weight: var(--bold);
7+
8+
&.small {
9+
font-size: var(--small);
10+
}
11+
12+
&.large {
13+
font-size: var(--large);
14+
}
15+
16+
&.primary {
17+
background: var(--primary-5);
18+
color: var(--primary-text-color);
19+
}
20+
}

‎docs/src/examples/framework/specs/component-specs/component.html‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<span class="{ui}widget">
2+
<slot></slot>
3+
</span>

‎docs/src/examples/framework/specs/component-specs/component.js‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { defineComponent, getText } from '@semantic-ui/component';
2+
import { SpecReader } from '@semantic-ui/specs';
3+
import widgetSpec from './button.spec.js';
4+
5+
const css = await getText('./component.css');
6+
const template = await getText('./component.html');
7+
8+
const reader = new SpecReader(widgetSpec);
9+
const componentSpec = reader.getWebComponentSpec();
10+
11+
defineComponent({
12+
tagName: 'ui-widget',
13+
componentSpec,
14+
template,
15+
css,
16+
});

‎docs/src/examples/framework/specs/component-specs/page.html‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<div class="demo">
2+
<h3>Three Equivalent Syntaxes</h3>
3+
<ui-widget large primary>Large Primary</ui-widget>
4+
<ui-widget size="large" emphasis="primary">Large Primary</ui-widget>
5+
<ui-widget class="large primary">Large Primary</ui-widget>
6+
</div>

‎docs/src/examples/framework/specs/spec-data-context/badge.spec.js‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
export default {
2+
uiType: 'element',
3+
name: 'Badge',
4+
tagName: 'ui-badge',
5+
exportName: 'UIBadge',
6+
7+
types: [
8+
{
9+
name: 'Status',
10+
attribute: 'status',
11+
options: [
12+
{ name: 'Success', value: 'success' },
13+
{ name: 'Warning', value: 'warning' },
14+
{ name: 'Error', value: 'error' },
15+
],
16+
},
17+
],
18+
19+
states: [],
20+
21+
variations: [
22+
{
23+
name: 'Size',
24+
attribute: 'size',
25+
options: [
26+
{ name: 'Small', value: 'small' },
27+
{ name: 'Large', value: 'large' },
28+
],
29+
},
30+
],
31+
32+
settings: [],
33+
events: [],
34+
};

‎docs/src/examples/framework/specs/spec-data-context/component.css‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
.badge {
2+
display: inline-block;
3+
padding: var(--4px) var(--8px);
4+
border-radius: var(--border-radius);
5+
background: var(--standard-5);
6+
font-weight: var(--bold);
7+
8+
&.small {
9+
font-size: var(--small);
10+
}
11+
12+
&.large {
13+
font-size: var(--large);
14+
}
15+
16+
&.success {
17+
background: var(--positive-5);
18+
color: var(--positive-text-color);
19+
}
20+
21+
&.warning {
22+
background: var(--warning-5);
23+
color: var(--warning-text-color);
24+
}
25+
26+
&.error {
27+
background: var(--negative-5);
28+
color: var(--negative-text-color);
29+
}
30+
}

‎docs/src/examples/framework/specs/spec-data-context/component.html‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<span class="{ui}badge">
2+
{label}
3+
</span>

‎docs/src/examples/framework/specs/spec-data-context/component.js‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import { defineComponent, getText } from '@semantic-ui/component';
2+
import { SpecReader } from '@semantic-ui/specs';
3+
import badgeSpec from './badge.spec.js';
4+
5+
const css = await getText('./component.css');
6+
const template = await getText('./component.html');
7+
8+
const reader = new SpecReader(badgeSpec);
9+
const componentSpec = reader.getWebComponentSpec();
10+
11+
defineComponent({
12+
tagName: 'ui-badge',
13+
componentSpec,
14+
template,
15+
css,
16+
17+
defaultSettings: {
18+
label: 'Status',
19+
},
20+
21+
createComponent: ({ settings }) => ({
22+
setStatus(newStatus) {
23+
settings.status = newStatus;
24+
},
25+
26+
setSize(newSize) {
27+
settings.size = newSize;
28+
},
29+
30+
setLabel(newLabel) {
31+
settings.label = newLabel;
32+
},
33+
}),
34+
});

‎docs/src/examples/framework/specs/spec-data-context/page.html‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<div class="demo">
2+
<h3>Badge Component</h3>
3+
<ui-badge status="success" size="large" label="Success"></ui-badge>
4+
5+
<h3>Controls</h3>
6+
<ui-button class="update-badge">Update Badge</ui-button>
7+
<ui-button class="reset-badge">Reset Badge</ui-button>
8+
<ui-button class="show-settings">Show Settings</ui-button>
9+
10+
<h3>Current Settings</h3>
11+
<table class="settings-table">
12+
<thead>
13+
<tr>
14+
<th>Property</th>
15+
<th>Value</th>
16+
</tr>
17+
</thead>
18+
<tbody class="settings-output">
19+
<tr>
20+
<td colspan="2">Click "Show Settings" to display</td>
21+
</tr>
22+
</tbody>
23+
</table>
24+
</div>

0 commit comments

Comments
 (0)