Skip to content

Commit ff994af

Browse files
jlukicjlukic
committed
Modify segment to use js spec file
1 parent 4eeff4a commit ff994af

File tree

9 files changed

+512
-12
lines changed

9 files changed

+512
-12
lines changed

‎src/primitives/segment/segment.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { defineComponent } from '@semantic-ui/component';
22

33
import css from './segment-bundle.css?raw';
44
import template from './segment.html?raw';
5-
import componentSpec from './specs/segment-component.js';
5+
import componentSpec from './specs/segment.component.js';
66

77
const createComponent = ({ $ }) => ({});
88

‎src/primitives/segment/segments.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { defineComponent } from '@semantic-ui/component';
22

33
import css from './segment-bundle.css?raw';
44
import template from './segments.html?raw';
5-
import componentSpec from './specs/segments-component.js';
5+
import componentSpec from './specs/segments.component.js';
66

77
const createComponent = ({ $ }) => ({});
88

‎src/primitives/segment/specs.js‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
import SegmentComponentSpec from './specs/segment-component.js';
2-
import SegmentSpec from './specs/segment.js';
1+
import SegmentComponentSpec from './specs/segment.component.js';
2+
import SegmentSpec from './specs/segment.spec.json';
3+
import SegmentsComponentSpec from './specs/segments.component.js';
34

4-
export { SegmentComponentSpec, SegmentSpec };
5+
export { SegmentComponentSpec, SegmentsComponentSpec, SegmentSpec };

src/primitives/segment/specs/segment-component.js renamed to src/primitives/segment/specs/segment.component.js

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
// Auto-generated from segment.json
1+
// Auto-generated from segment.spec.js
22
export default {
33
"tagName": "ui-segment",
44
"types": [
@@ -11,6 +11,7 @@ export default {
1111
"variations": [
1212
"attached",
1313
"padded",
14+
"inline",
1415
"compact",
1516
"color",
1617
"circular",
@@ -33,6 +34,7 @@ export default {
3334
"loading",
3435
"attached",
3536
"padded",
37+
"inline",
3638
"compact",
3739
"color",
3840
"circular",
@@ -50,6 +52,8 @@ export default {
5052
"bottom-attached": "attached",
5153
"padded": "padded",
5254
"very-padded": "padded",
55+
"compact": "compact",
56+
"very-compact": "compact",
5357
"red": "color",
5458
"orange": "color",
5559
"yellow": "color",
@@ -79,7 +83,8 @@ export default {
7983
"loading": "boolean",
8084
"attached": "string",
8185
"padded": "string",
82-
"compact": "boolean",
86+
"inline": "boolean",
87+
"compact": "string",
8388
"color": "string",
8489
"circular": "boolean",
8590
"clearing": "boolean",
@@ -102,6 +107,10 @@ export default {
102107
"padded",
103108
"very-padded"
104109
],
110+
"compact": [
111+
"compact",
112+
"very-compact"
113+
],
105114
"color": [
106115
"red",
107116
"orange",

‎src/primitives/segment/specs/segment.js‎

Lines changed: 20 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -113,11 +113,29 @@ export default {
113113
],
114114
"usageLevel": 2
115115
},
116+
{
117+
"name": "Inline",
118+
"attribute": "inline",
119+
"usageLevel": 3,
120+
"description": "can appear inline"
121+
},
116122
{
117123
"name": "Compact",
118124
"attribute": "compact",
119-
"description": "take up only as much space as is necessary",
120-
"usageLevel": 2
125+
"usageLevel": 3,
126+
"description": "reduce its padding",
127+
"options": [
128+
{
129+
"name": "Compact",
130+
"value": "compact",
131+
"description": "reduce its padding slightly"
132+
},
133+
{
134+
"name": "Very Compact",
135+
"value": "very-compact",
136+
"description": "reduce its padding greatly"
137+
}
138+
]
121139
},
122140
{
123141
"name": "Colored",

‎src/primitives/segment/specs/segment.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -116,7 +116,7 @@
116116
"name": "Inline",
117117
"attribute": "inline",
118118
"usageLevel": 3,
119-
"description": "can appear inline with other ",
119+
"description": "can appear inline"
120120
},
121121
{
122122
"name": "Compact",

‎src/primitives/segment/specs/segment.spec.js‎

Lines changed: 172 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,172 @@
1+
import {
2+
EMPHASIS_TYPE,
3+
DISABLED_STATE,
4+
LOADING_STATE,
5+
COMPACT_VARIATION,
6+
PADDED_VARIATION,
7+
FLOATED_VARIATION,
8+
HORIZONTAL_ALIGNED_VARIATION,
9+
} from '@semantic-ui/specs';
10+
11+
export default {
12+
uiType: 'element',
13+
name: 'Segment',
14+
description: 'A segment is used to create a grouping of related content',
15+
tagName: 'ui-segment',
16+
exportName: 'UISegment',
17+
18+
content: [],
19+
20+
types: [
21+
EMPHASIS_TYPE,
22+
{
23+
name: 'Vertical',
24+
attribute: 'vertical',
25+
description: 'format content to be aligned as part of a vertical group',
26+
usageLevel: 2,
27+
},
28+
{
29+
name: 'Raised',
30+
attribute: 'raised',
31+
description: 'be formatted to raise above the page',
32+
usageLevel: 3,
33+
},
34+
{
35+
name: 'Stacked',
36+
attribute: 'stacked',
37+
description: 'be formatted to show it contains multiple pages',
38+
usageLevel: 5,
39+
},
40+
{
41+
name: 'Piled',
42+
attribute: 'piled',
43+
description: 'be formatted to look like a pile of pages',
44+
usageLevel: 5,
45+
},
46+
],
47+
48+
states: [
49+
{
50+
name: 'Disabled',
51+
attribute: 'disabled',
52+
description: 'show its content is disabled',
53+
usageLevel: 2,
54+
},
55+
{
56+
name: 'Loading',
57+
attribute: 'loading',
58+
description: 'show its content is being loaded',
59+
usageLevel: 2,
60+
},
61+
],
62+
63+
variations: [
64+
{
65+
name: 'Attached',
66+
attribute: 'attached',
67+
description: 'be attached to other content on a page',
68+
includeAttributeClass: true,
69+
options: [
70+
{
71+
name: 'Top Attached',
72+
value: 'top-attached',
73+
description: 'be attached on top side only',
74+
},
75+
{
76+
name: 'Attached',
77+
value: 'attached',
78+
description: 'be attached on both sides',
79+
},
80+
{
81+
name: 'Bottom Attached',
82+
value: 'bottom-attached',
83+
description: 'be attached on bottom side only',
84+
},
85+
],
86+
usageLevel: 2,
87+
},
88+
PADDED_VARIATION,
89+
{
90+
name: 'Inline',
91+
attribute: 'inline',
92+
usageLevel: 3,
93+
description: 'can appear inline',
94+
},
95+
COMPACT_VARIATION,
96+
{
97+
name: 'Colored',
98+
attribute: 'color',
99+
description: 'be colored',
100+
includeAttributeClass: true,
101+
options: [
102+
{ name: 'Red', value: 'red' },
103+
{ name: 'Orange', value: 'orange' },
104+
{ name: 'Yellow', value: 'yellow' },
105+
{ name: 'Olive', value: 'olive' },
106+
{ name: 'Green', value: 'green' },
107+
{ name: 'Teal', value: 'teal' },
108+
{ name: 'Blue', value: 'blue' },
109+
{ name: 'Violet', value: 'violet' },
110+
{ name: 'Purple', value: 'purple' },
111+
{ name: 'Pink', value: 'pink' },
112+
{ name: 'Brown', value: 'brown' },
113+
{ name: 'Grey', value: 'grey' },
114+
{ name: 'Black', value: 'black' },
115+
],
116+
usageLevel: 2,
117+
},
118+
{
119+
name: 'Circular',
120+
attribute: 'circular',
121+
description: 'be circular',
122+
usageLevel: 3,
123+
},
124+
{
125+
name: 'Clearing',
126+
attribute: 'clearing',
127+
description: 'clear floated content',
128+
usageLevel: 3,
129+
},
130+
FLOATED_VARIATION,
131+
HORIZONTAL_ALIGNED_VARIATION,
132+
{
133+
name: 'Basic',
134+
attribute: 'basic',
135+
description: 'have no special formatting',
136+
usageLevel: 2,
137+
},
138+
],
139+
140+
events: [],
141+
settings: [],
142+
143+
supportsPlural: true,
144+
pluralName: 'Segments',
145+
pluralTagName: 'ui-segments',
146+
pluralExportName: 'UISegments',
147+
pluralDescription: 'Segments can be grouped together',
148+
149+
pluralContent: [],
150+
151+
pluralSharedTypes: ['raised', 'stacked', 'piled'],
152+
153+
pluralOnlyTypes: [
154+
{
155+
name: 'Horizontal',
156+
attribute: 'horizontal',
157+
description: 'be arranged horizontally',
158+
usageLevel: 3,
159+
},
160+
],
161+
162+
pluralSharedVariations: ['compact', 'basic'],
163+
164+
pluralOnlyVariations: [],
165+
166+
examples: {
167+
defaultAttributes: {},
168+
defaultPluralContent: `<ui-segment>First</ui-segment>
169+
<ui-segment>Second</ui-segment>
170+
<ui-segment>Third</ui-segment>`,
171+
},
172+
};

0 commit comments

Comments
 (0)