Merge pull request #391 from web-illinois/jonker/issuesfor2-13

Jonker/issuesfor2 13

src/css/components/_card.scss

@@ -27,6 +27,10 @@ il-card, .il-card, .il-formatted il-card, .il-formatted .il-card {
       color: var(--il-card-link-focus-color, var(--il-card-link-color));
       outline: var(--il-card-link-focus-outline);
     }
+
+    &.il-button:focus, &.il-button:hover {
+      color: var(--il-focused-button-foreground-color);
+    }
   }
 
   h2, h3, h4, h5, h6 {

src/css/components/_image-feature.scss

@@ -71,7 +71,8 @@
 
 .il-align-right il-image-feature, il-image-feature.il-align-right, 
 .il-float-left il-image-feature, il-image-feature.il-float-left, 
-.il-align-right il-video-feature, il-video-feature.il-align-right {
+.il-align-right il-video-feature, il-video-feature.il-align-right,
+.il-float-left il-video-feature, il-video-feature.il-float-left {
   --il-image-feature-flex-direction: row-reverse;
 }
 

src/js/components/header/header.css.js

@@ -18,6 +18,7 @@ export default css`
 
 .campus svg {
   fill: var(--il-blue);
+  transition: fill .3s;
 }
 
 .campus a:focus svg, .campus a:hover svg {

tests/components/video-feature/float.njk

@@ -0,0 +1,40 @@
+---
+title: Video Feature (float option)
+group: "Components: Video Feature"
+layout: layouts/page.njk
+---
+<div class="il-formatted">
+<h2>No option</h2>
+<p><em>Pulled out video for visual testing -- can use https://mediaspace.illinois.edu/media/t/1_0o2ypqvp</em></p>
+<il-video-feature src="">
+<h3>Student Life</h3>
+<p>Animal sciences students extend their learning and career networks beyond
+the classroom through internships, judging teams, student organizations, undergraduate research
+projects with our faculty, as well as short- and long-term study abroad opportunities all over the world. </p>
+<a href="#" class="il-button">Subscribe</a>
+<a href="#" class="il-button">Find a departmental advisor</a>
+</il-video-feature>
+
+<h2>Float Left</h2>
+<p><em>Pulled out video for visual testing -- can use https://mediaspace.illinois.edu/media/t/1_0o2ypqvp</em></p>
+<il-video-feature class="il-float-left" src="">
+<h3>Student Life</h3>
+<p>Animal sciences students extend their learning and career networks beyond
+the classroom through internships, judging teams, student organizations, undergraduate research
+projects with our faculty, as well as short- and long-term study abroad opportunities all over the world. </p>
+<a href="#" class="il-button">Subscribe</a>
+<a href="#" class="il-button">Find a departmental advisor</a>
+</il-video-feature>
+
+<h2>Float Right</h2>
+<p><em>Pulled out video for visual testing -- can use https://mediaspace.illinois.edu/media/t/1_0o2ypqvp</em></p>
+<il-video-feature class="il-float-right" src="">
+<h3>Student Life</h3>
+<p>Animal sciences students extend their learning and career networks beyond
+the classroom through internships, judging teams, student organizations, undergraduate research
+projects with our faculty, as well as short- and long-term study abroad opportunities all over the world. </p>
+<a href="#" class="il-button">Subscribe</a>
+<a href="#" class="il-button">Find a departmental advisor</a>
+</il-video-feature>
+
+</div>

tests/components/video-feature/float.vis.js

@@ -0,0 +1,12 @@
+const util = require('../../tests.util');
+
+const url = util.testUrl(__filename);
+
+module.exports = (viewports) => {
+  return [
+    {
+      url, label: "videofeature-float",
+      viewports: [viewports.desktop, viewports.iphone, viewports.hdtv]
+    }
+  ]
+}