Skip to content

Commit be5e524

Browse files
hmillersarahhmillersarah
committed
hero component
1 parent 3c75b8f commit be5e524

4 files changed

Lines changed: 143 additions & 4 deletions

File tree

‎ims-advocacy.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -75,6 +75,9 @@
7575

7676
<!-- Hamburger menu -->
7777
<script src="wp-includes/js/navbar.js"></script>
78+
79+
<!-- Web components -->
80+
<script src="web-components/hero-section/hero-section.js" type="module"></script>
7881
</head>
7982

8083
<!-- MASTHEAD_SITENAV_BEGIN -->
@@ -315,6 +318,16 @@ <h1>Advocates and ideas</h1>
315318
</div>
316319
</section>
317320

321+
<hero-section
322+
name="Advocates and ideas"
323+
section="Engage"
324+
desc="Get an IMS advocate to represent you. Also, submit your ideas to enhance the IMS product."
325+
linktext="Request an IMS advocate"
326+
link="mailto:deepakk@us.ibm.com"
327+
linktext2="Submit ideas for enhancement"
328+
link2="#ideas"
329+
></hero-section>
330+
318331
<!-- =========================== Who are they? =========================== -->
319332
<section class="white-bg pure-g">
320333
<div class="pure-u-1 pure-u-md-1-4 section-header">

‎web-components/hero-section/hero-section.css‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
/* section {
2+
display: flex;
3+
flex-flow: row wrap;
4+
gap: 2em;
5+
padding: 4em;
6+
} */
7+
8+
section {
9+
display: grid;
10+
grid-template-columns: 4em 2fr;
11+
grid-template-rows: repeat(4, 1fr);
12+
padding: 4em;
13+
align-items: center;
14+
15+
/* Button Color */
16+
--btn-prim: #0f62fe;
17+
--btn-prim-hover: #0050e6;
18+
--btn-secnd: #6f6f6f;
19+
--btn-scnd-hover: #5e5e5e;
20+
}
21+
22+
img {
23+
grid-column: 1;
24+
grid-row: 2;
25+
}
26+
27+
.section {
28+
grid-column: 2;
29+
grid-row: 1;
30+
font-weight: bold;
31+
}
32+
33+
.name {
34+
grid-column: 2;
35+
grid-row: 2;
36+
font-size: 3em;
37+
font-weight: 300;
38+
}
39+
40+
.desc {
41+
grid-column: 2;
42+
grid-row: 3;
43+
font-size: 1.25em;
44+
}
45+
46+
.links {
47+
grid-column: 2;
48+
grid-row: 4;
49+
display: flex;
50+
flex-flow: wrap row;
51+
gap: 1em;
52+
}
53+
54+
.button {
55+
color: white;
56+
padding: 1em 1.5em;
57+
line-height: var(--plex-24);
58+
text-decoration: none;
59+
}
60+
61+
.button-primary {
62+
background-color: var(--btn-prim);
63+
margin-top: 1.25em;
64+
}
65+
66+
.button-secondary {
67+
background-color: var(--btn-secnd);
68+
margin-top: 1.25em;
69+
}
70+
71+
.button-primary:hover {
72+
background-color: var(--btn-prim-hover);
73+
}
74+
75+
.button-secondary:hover {
76+
background-color: var(--btn-scnd-hover);
77+
}
78+
79+
@media screen and (max-width: 27em) {
80+
section {
81+
display: flex;
82+
flex-flow: column wrap;
83+
align-items: flex-start;
84+
gap: 1em;
85+
padding: 3em;
86+
}
87+
}

‎web-components/hero-section/hero-section.html‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<link href="web-components/hero-section/hero-section.css" rel="stylesheet">
2+
<section class="hero">
3+
<img src="" alt="" class="image">
4+
<span class="section"></span>
5+
<span class="name"></span>
6+
<span class="desc"></span>
7+
<div class="links">
8+
<a onfocus="closeNavMenu()"
9+
rel="noopener noreferrer"
10+
class="link-primary button button-primary"
11+
>
12+
<span class="link-primary-text"></span>
13+
</a>
14+
<a rel="noopener noreferrer"
15+
class="link-secondary button button-secondary"
16+
>
17+
<span class="link-secondary-text"></span>
18+
</a>
19+
</div>
20+
</section>

‎web-components/hero-section/hero-section.js‎

Lines changed: 23 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
// Fetch HTML template
2-
// fetch("web-components/video-card/video-card.html")
3-
// .then(stream => stream.text())
4-
// .then(text => createComponent(text))
2+
fetch("web-components/hero-section/hero-section.html")
3+
.then(stream => stream.text())
4+
.then(text => createComponent(text))
55

66
// Create web component
77
function createComponent(html) {
@@ -33,7 +33,7 @@ function createComponent(html) {
3333

3434
// Return array of properties to observe
3535
static get observedAttributes() {
36-
return ['name', 'img', 'section', 'desc', 'desc2', 'link'];
36+
return ['name', 'section', 'desc', 'desc2', 'linktext', 'link', 'linktext2', 'link2'];
3737
}
3838

3939
// Called when an attribute is defined or changed
@@ -47,6 +47,25 @@ function createComponent(html) {
4747
// Create shadow root for element
4848
const shadow = this.attachShadow({mode: 'closed'});
4949
shadow.innerHTML = html;
50+
51+
setContent('.section', this.section, shadow);
52+
setContent('.name', this.name, shadow);
53+
setContent('.desc', this.desc, shadow);
54+
setLink('.link-primary', this.link, this.name, shadow);
55+
setContent('.link-primary-text', this.linktext, shadow);
56+
setLink('.link-secondary', this.link2, this.name, shadow);
57+
setContent('.link-secondary-text', this.linktext2, shadow);
58+
59+
// Check if links are external
60+
61+
switch(this.section) {
62+
case 'Engage':
63+
const selector = shadow.querySelector('.hero');
64+
selector.style.backgroundColor = 'black';
65+
selector.style.color = 'white';
66+
setImage('.image', 'wp-content/icons/icon_engage.svg', shadow);
67+
break;
68+
}
5069
}
5170
}
5271

0 commit comments

Comments
 (0)