File tree Expand file tree Collapse file tree 6 files changed +86
-0
lines changed
tests/integration/components Expand file tree Collapse file tree 6 files changed +86
-0
lines changed Original file line number Diff line number Diff line change
1
+ <div
2
+ class =" es-banner"
3
+ data-test-es-banner
4
+ >
5
+ {{ yield }}
6
+ </div >
Original file line number Diff line number Diff line change 19
19
@import 'helpers/index.css' ;
20
20
21
21
/* Components */
22
+ @import 'components/es-banner.css' ;
22
23
@import 'components/es-button.css' ;
23
24
@import 'components/es-card.css' ;
24
25
@import 'components/es-footer.css' ;
Original file line number Diff line number Diff line change
1
+ .es-banner {
2
+ position : relative;
3
+ display : flex;
4
+ justify-content : center;
5
+ align-items : center;
6
+ background-color : var (--color-brand-hc-dark );
7
+ padding : 8px 8px 10px ;
8
+ color : var (--color-white );
9
+ }
10
+
11
+ .es-banner a , .es-banner a : link , .es-banner a : visited {
12
+ color : var (--color-white );
13
+ text-decoration : none;
14
+ border-bottom : 1px solid var (--color-white-40 );
15
+ background : none;
16
+ font-size : 16px ;
17
+ line-height : 15px ;
18
+ }
19
+
20
+ .es-banner a : hover , .es-banner a : focus {
21
+ border-bottom : 1px solid var (--color-white );
22
+ }
23
+
24
+ .es-banner a + a {
25
+ margin-left : 20px ;
26
+ position : relative;
27
+ }
28
+
29
+ .es-banner a + a ::before {
30
+ content : '' ;
31
+ width : 3px ;
32
+ height : 3px ;
33
+ background : var (--color-white );
34
+ border-radius : 50% ;
35
+ top : 50% ;
36
+ transform : translateY (-50% ) translateX (-50% );
37
+ display : block;
38
+ left : -10px ;
39
+ pointer-events : none;
40
+ position : absolute;
41
+ }
Original file line number Diff line number Diff line change
1
+ export { default } from 'ember-styleguide/components/es-banner' ;
Original file line number Diff line number Diff line change
1
+ # Banner
2
+
3
+ ## Usage
4
+
5
+ A banner will be shown at the top of the page. That can be filled with text.
6
+ ``` handlebars
7
+ <EsBanner>Some content goes here</EsBanner>
8
+ ```
9
+ The banner can also contain a link.
10
+ ``` handlebars
11
+ <EsBanner><a href="#">Visit Website</a></EsBanner>
12
+ ```
13
+
14
+ When you pass multiple links into the component they will be separated by a tiny dot.
15
+ ``` handlebars
16
+ <EsBanner><a href="#">Visit Website</a><a href="#">Visit Something else</a></EsBanner>
17
+ ```
Original file line number Diff line number Diff line change
1
+ import { module , test } from 'qunit' ;
2
+ import { setupRenderingTest } from 'ember-qunit' ;
3
+ import { render } from '@ember/test-helpers' ;
4
+ import { hbs } from 'ember-cli-htmlbars' ;
5
+
6
+ module ( 'Integration | Component | es-banner' , function ( hooks ) {
7
+ setupRenderingTest ( hooks ) ;
8
+
9
+ test ( 'it renders' , async function ( assert ) {
10
+ await render ( hbs `
11
+ <EsBanner>
12
+ I have an announcement to make
13
+ </EsBanner>
14
+ ` ) ;
15
+
16
+ assert
17
+ . dom ( '[data-test-es-banner]' )
18
+ . hasText ( 'I have an announcement to make' , 'We see the correct message' ) ;
19
+ } ) ;
20
+ } ) ;
You can’t perform that action at this time.
0 commit comments