@everchron/ec-shards 0.6.71 → 0.6.72
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/ec-shards.common.js +90 -85
- package/dist/ec-shards.common.js.map +1 -1
- package/dist/ec-shards.css +1 -1
- package/dist/ec-shards.umd.js +90 -85
- package/dist/ec-shards.umd.js.map +1 -1
- package/dist/ec-shards.umd.min.js +2 -2
- package/dist/ec-shards.umd.min.js.map +1 -1
- package/package.json +1 -1
- package/src/components/quicklink/quicklink.vue +1 -1
- package/src/components/rating-favorability/rating-favorability.vue +7 -8
- package/src/components/section/section.vue +20 -7
- package/src/stories/section/section.stories.js +5 -0
- package/src/stories/section/section.stories.mdx +13 -1
package/package.json
CHANGED
|
@@ -88,14 +88,13 @@
|
|
|
88
88
|
height: 20px;
|
|
89
89
|
border-radius: 3px;
|
|
90
90
|
border: 1px solid;
|
|
91
|
+
position: relative;
|
|
91
92
|
}
|
|
92
93
|
|
|
93
94
|
.icon{
|
|
94
95
|
position: absolute;
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
top: -5px;
|
|
98
|
-
left: -5px;
|
|
96
|
+
left: -6px;
|
|
97
|
+
top: -6px;
|
|
99
98
|
}
|
|
100
99
|
|
|
101
100
|
.label{
|
|
@@ -159,22 +158,22 @@
|
|
|
159
158
|
}
|
|
160
159
|
|
|
161
160
|
.good{
|
|
162
|
-
border:
|
|
161
|
+
border: 1px solid transparent;
|
|
163
162
|
background: $green-8;
|
|
164
163
|
}
|
|
165
164
|
|
|
166
165
|
.mixed{
|
|
167
|
-
border:
|
|
166
|
+
border: 1px solid transparent;
|
|
168
167
|
background: $yellow-8;
|
|
169
168
|
}
|
|
170
169
|
|
|
171
170
|
.bad{
|
|
172
|
-
border:
|
|
171
|
+
border: 1px solid transparent;
|
|
173
172
|
background: $red-8;
|
|
174
173
|
}
|
|
175
174
|
|
|
176
175
|
.unrated{
|
|
177
|
-
border:
|
|
176
|
+
border: 1px solid transparent;
|
|
178
177
|
background: $gray-4;
|
|
179
178
|
}
|
|
180
179
|
}
|
|
@@ -1,12 +1,18 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div class="ecs-section"
|
|
3
|
-
:class="[borderTop ?
|
|
4
|
-
borderBottom ?
|
|
3
|
+
:class="[borderTop ? 'ecs-section-border-top' : '',
|
|
4
|
+
borderBottom ? 'ecs-section-border-bottom' : '',
|
|
5
5
|
indentation,
|
|
6
6
|
headlineIndentation]">
|
|
7
7
|
|
|
8
|
-
<h3 class="ecs-section-headline" :class="[headlineBold ?
|
|
9
|
-
|
|
8
|
+
<h3 v-if="title" class="ecs-section-headline" :class="[headlineBold ? 'ecs-headline-section-bold' : 'ecs-headline-section', hasControls]">
|
|
9
|
+
{{title}}
|
|
10
|
+
<div v-if="$slots.controls">
|
|
11
|
+
<slot name="controls"></slot>
|
|
12
|
+
</div>
|
|
13
|
+
</h3>
|
|
14
|
+
|
|
15
|
+
<div class="ecs-section-content" :class="title ? '' : 'ecs-section-content-equal'">
|
|
10
16
|
<slot></slot>
|
|
11
17
|
</div>
|
|
12
18
|
</div>
|
|
@@ -16,8 +22,7 @@
|
|
|
16
22
|
export default {
|
|
17
23
|
props: {
|
|
18
24
|
title: {
|
|
19
|
-
type: String
|
|
20
|
-
required: true
|
|
25
|
+
type: String
|
|
21
26
|
},
|
|
22
27
|
indent: {
|
|
23
28
|
type: String,
|
|
@@ -106,6 +111,10 @@
|
|
|
106
111
|
&-content{
|
|
107
112
|
padding-top: 15px;
|
|
108
113
|
padding-bottom: 25px;
|
|
114
|
+
|
|
115
|
+
&-equal{
|
|
116
|
+
padding-top: 25px;
|
|
117
|
+
}
|
|
109
118
|
}
|
|
110
119
|
|
|
111
120
|
&-indent-md,
|
|
@@ -148,7 +157,11 @@
|
|
|
148
157
|
padding-left: 15px;
|
|
149
158
|
padding-right: 15px;
|
|
150
159
|
padding-top: 10px;
|
|
151
|
-
padding-bottom: 20px
|
|
160
|
+
padding-bottom: 20px;
|
|
161
|
+
|
|
162
|
+
&-equal{
|
|
163
|
+
padding-top: 20px;
|
|
164
|
+
}
|
|
152
165
|
}
|
|
153
166
|
}
|
|
154
167
|
|
|
@@ -16,6 +16,11 @@ export const borderless = () => ({
|
|
|
16
16
|
template: `<ecs-section title="Headline">Content</ecs-section>`,
|
|
17
17
|
});
|
|
18
18
|
|
|
19
|
+
export const noHeadline = () => ({
|
|
20
|
+
components: { EcsSection },
|
|
21
|
+
template: `<ecs-section>Content</ecs-section>`,
|
|
22
|
+
});
|
|
23
|
+
|
|
19
24
|
export const indentation = () => ({
|
|
20
25
|
components: { EcsSection },
|
|
21
26
|
template: `<div>
|
|
@@ -24,6 +24,18 @@ Sections are simple content blocks used for grouping related content or forms.
|
|
|
24
24
|
|
|
25
25
|
A headline can be set (only text) with the `title` attribute. By setting the `headline-bold` attribute, the headline will appear as a bolder, more emphasized version.
|
|
26
26
|
|
|
27
|
+
By not passing any headline, the section component will render without a headline.
|
|
28
|
+
|
|
29
|
+
<Canvas withSource="none" withToolbar={true}>
|
|
30
|
+
<Story name="noHeadline" height="200px">
|
|
31
|
+
{stories.noHeadline()}
|
|
32
|
+
</Story>
|
|
33
|
+
</Canvas>
|
|
34
|
+
|
|
35
|
+
```js
|
|
36
|
+
<ecs-section>Content</ecs-collapse>
|
|
37
|
+
```
|
|
38
|
+
|
|
27
39
|
## Borders
|
|
28
40
|
|
|
29
41
|
The top and bottom borders can be turned on by adding the `border-top` and `border-bottom` attributes. When these attributes are missing, the section is rendered without any borders.
|
|
@@ -82,4 +94,4 @@ To show additional controls on the right side of the headline, you can use the `
|
|
|
82
94
|
|
|
83
95
|
## Props and Slots
|
|
84
96
|
|
|
85
|
-
<ArgsTable of={EcsSection} />
|
|
97
|
+
<ArgsTable of={EcsSection} />
|