Skip to content

Commit bd77b25

Browse files
author
Aga Serowiec
authored
Merge pull request #167 from Wikia/XW-3171
XW-3171 | banner notifications
2 parents 22db8d6 + 2012d48 commit bd77b25

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

41 files changed

+327
-55
lines changed

‎app/controllers/application.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -89,6 +89,10 @@ export default Controller.extend({
8989
{
9090
name: 'Tabs',
9191
location: 'route-components.tabs'
92+
},
93+
{
94+
name: 'Banner notifications',
95+
location: 'route-components.banner-notifications'
9296
}
9397
]
9498
},

‎app/router.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@ Router.map(function () {
3939
this.route('lists');
4040
this.route('progress-indicators');
4141
this.route('tabs');
42+
this.route('banner-notifications');
4243
});
4344

4445
this.route('identity', function () {

‎app/templates/route-components/assets.hbs‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,7 @@
5050
{{icon-box name='document'}}
5151
{{icon-box name='dropdown'}}
5252
{{icon-box name='embed'}}
53+
{{icon-box name='error'}}
5354
{{icon-box name='eye'}}
5455
{{icon-box name='eye-crossed'}}
5556
{{icon-box name='flag'}}
@@ -122,13 +123,16 @@
122123
{{icon-box name='bold' size='small'}}
123124
{{icon-box name='bookmark' size='small'}}
124125
{{icon-box name='bullet-list' size='small'}}
126+
{{icon-box name='checkmark-circle' size='small'}}
125127
{{icon-box name='checkmark' size='small'}}
126128
{{icon-box name='clipboard' size='small'}}
127129
{{icon-box name='community' size='small'}}
128130
{{icon-box name='dashboard' size='small'}}
131+
{{icon-box name='error' size='small'}}
129132
{{icon-box name='eye' size='small'}}
130133
{{icon-box name='eye-crossed' size='small'}}
131134
{{icon-box name='fandom-heart' size='small'}}
135+
{{icon-box name='flag' size='small'}}
132136
{{icon-box name='fullscreen' size='small'}}
133137
{{icon-box name='fullscreen-off' size='small'}}
134138
{{icon-box name='gear' size='small'}}
@@ -167,6 +171,7 @@
167171

168172
<div class="assets-wrapper">
169173
{{icon-box name='clock' size='tiny'}}
174+
{{icon-box name='cross' size='tiny'}}
170175
{{icon-box name='dropdown' size='tiny'}}
171176
{{icon-box name='explore' size='tiny'}}
172177
{{icon-box name='menu-control' size='tiny'}}

‎app/templates/route-components/banner-notifications.hbs‎

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
<h1>Banner notifications</h1>
2+
<section>
3+
<h2>Alert</h2>
4+
<p>
5+
Add <code class="format-code">.wds-alert</code> class to <code class="format-code">
6+
.wds-banner-notification</code> element and use icon <code
7+
class="format-code">wds-icons-error-small</code>
8+
</p>
9+
10+
{{#component-demo}}
11+
<div class="wds-banner-notification__container">
12+
{{#wds-banner-notification type='alert'}}
13+
This is an error message.
14+
{{/wds-banner-notification}}
15+
</div>
16+
{{/component-demo}}
17+
</section>
18+
19+
<section>
20+
<h2>Warning</h2>
21+
<p>
22+
Add <code class="format-code">.wds-warning</code> class to <code class="format-code">
23+
.wds-banner-notification</code> element and use icon <code
24+
class="format-code">wds-icons-alert-small</code>
25+
</p>
26+
27+
{{#component-demo}}
28+
<div class="wds-banner-notification__container">
29+
{{#wds-banner-notification type='warning'}}
30+
This is a warning message.
31+
{{/wds-banner-notification}}
32+
</div>
33+
{{/component-demo}}
34+
</section>
35+
36+
<section>
37+
<h2>Success</h2>
38+
<p>
39+
Add <code class="format-code">.wds-success</code> class to <code class="format-code">
40+
.wds-banner-notification</code> element and use icon <code
41+
class="format-code">wds-icons-checkmark-circle-small</code>
42+
</p>
43+
44+
45+
{{#component-demo}}
46+
<div class="wds-banner-notification__container">
47+
{{#wds-banner-notification type='success'}}
48+
This is a confirmation message.
49+
{{/wds-banner-notification}}
50+
</div>
51+
{{/component-demo}}
52+
</section>
53+
54+
<section>
55+
<h2>Message</h2>
56+
<p>
57+
Add <code class="format-code">.wds-message</code> class to <code class="format-code">
58+
.wds-banner-notification</code> element and use icon <code
59+
class="format-code">wds-icons-flag-small</code>
60+
</p>
61+
62+
{{#component-demo}}
63+
<div class="wds-banner-notification__container">
64+
{{#wds-banner-notification type='message'}}
65+
This is a general notification message.
66+
{{/wds-banner-notification}}
67+
</div>
68+
{{/component-demo}}
69+
</section>
70+
71+
72+
<section>
73+
<h2>Stacked</h2>
74+
75+
{{#component-demo}}
76+
<div class="wds-banner-notification__container">
77+
{{#wds-banner-notification type='message'}}
78+
Stacked notification 1.
79+
{{/wds-banner-notification}}
80+
{{#wds-banner-notification type='success'}}
81+
Stacked notification 2 with very long content. Lorem ipsum dolor sit amet,
82+
consectetur adipiscing elit. Vestibulum scelerisque ullamcorper sodales. Interdum et
83+
malesuada fames ac ante ipsum primis in faucibus.
84+
{{/wds-banner-notification}}
85+
{{#wds-banner-notification type='warning'}}
86+
Stacked notification 3.
87+
{{/wds-banner-notification}}
88+
</div>
89+
{{/component-demo}}
90+
</section>

‎dist/css/styles.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/scss/wds-components/_banner-notification.scss‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
.wds-banner-notification {
2+
background-color: $wds-color-white;
3+
color: $wds-color-light-gray;
4+
display: flex;
5+
6+
&__container {
7+
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2);
8+
}
9+
10+
&__icon {
11+
align-items: center;
12+
color: $wds-color-white;
13+
display: flex;
14+
justify-content: center;
15+
width: 48px;
16+
17+
.wds-alert & {
18+
background-color: $wds-color-alert;
19+
}
20+
21+
.wds-warning & {
22+
background-color: $wds-color-warning;
23+
}
24+
25+
.wds-success & {
26+
background-color: $wds-color-success;
27+
}
28+
29+
.wds-message & {
30+
background-color: $wds-color-message;
31+
}
32+
}
33+
34+
&__text {
35+
color: $wds-color-medium-gray;
36+
flex: 1;
37+
font-size: $wds-typescale-size-minus-1;
38+
line-height: 1.29;
39+
padding: 13px 12px;
40+
}
41+
42+
&__close {
43+
cursor: pointer;
44+
padding: 18px;
45+
}
46+
47+
& + & &__close,
48+
& + & &__text {
49+
border-top: 1px solid #ccc;
50+
}
51+
}

‎dist/scss/wds-components/index.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
@import 'avatar';
22
@import 'avatar-stack';
3+
@import 'banner-notification';
34
@import 'buttons';
45
@import 'button-groups';
56
@import 'dropdowns';

‎dist/svg/sprite.svg‎

Lines changed: 1 addition & 1 deletion
Loading

‎dist/svg/wds-icons-alert-small.svg‎

Lines changed: 1 addition & 1 deletion
Loading

‎dist/svg/wds-icons-alert.svg‎

Lines changed: 1 addition & 1 deletion
Loading

0 commit comments

Comments
 (0)