Apply Photon Style to News Feed Item (mozilla#3021)

- Moved assets under UpdateList component directory

- New chevron for news link

- New styles from spec

- Updated stories

Fixes mozilla#2959

frontend/src/app/components/UpdateList/index.js

@@ -8,6 +8,8 @@ import React from 'react';
 import LayoutWrapper from '../LayoutWrapper';
 import { newsUpdateL10nId } from '../../lib/utils';
 
+import './index.scss';
+
 export function prettyDate(date: string) {
   return moment(date).format('MMMM Do, YYYY');
 }
@@ -35,7 +37,7 @@ export class Update extends React.Component {
       <a className={classnames('update', { 'has-link': !!link })}
           href={link}
           onClick={() => this.handleLinkClick()}>
-        <div className={classnames(iconClassName, 'experiment-icon')} />
+        <div className={classnames(iconClassName, 'update-experiment-icon')} />
         <div className="update-content">
           <header>
             {experiment
@@ -135,7 +137,7 @@ export default class UpdateList extends React.Component {
     return (
       <div className="update-list">
         <Localized id="latestUpdatesTitle">
-          <h1 className="emphasis update-list-heading">Latest Updates</h1>
+          <h1 className="update-list-heading">Latest Updates</h1>
         </Localized>
         <LayoutWrapper flexModifier="column-center">
           {shownNewsUpdates.map((update, index) =>

frontend/src/app/components/UpdateList/index.scss

@@ -0,0 +1,124 @@
+@import '~photon-colors/colors.scss';
+@import '../../../styles/_utils';
+
+.update-list {
+  @include respond-to('small') {
+    margin: 0 0 30px;
+  }
+
+  margin: -40px 0 40px;
+  width: 100%;
+
+  .more-news {
+    margin-top: 10px;
+  }
+}
+
+.update-list-heading {
+  font-size: 22px;
+  font-weight: 300;
+  letter-spacing: 0;
+  line-height: 56px;
+}
+
+.update {
+  align-items: center;
+  border-radius: 4px;
+  border: 1px rgba(255, 255, 255, 0.2) solid;
+  box-shadow: 0 -2px 0 $transparent-black-05 inset;
+  cursor: default;
+  display: flex;
+  margin-bottom: 8px;
+  opacity: .9;
+  padding: 36px;
+  width: 100%;
+
+  .update-content {
+    flex-grow: 1;
+
+    header {
+      @include flex-container(row, flex-start, center);
+      margin-bottom: 1px;
+    }
+  }
+
+  .news-update-test-pilot-icon {
+    background-image: url('./img/test-pilot-news-icon.png');
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: 60px auto;
+  }
+
+  .update-experiment-icon {
+    height: 48px;
+    width: 106px;
+    margin: 0;
+    @include respond-to('small') {
+      display: none;
+    }
+    background-position: left center;
+    background-size: 60px auto;
+    background-repeat: no-repeat;
+  }
+
+  h2,
+  h2.update-title {
+    margin: 0;
+    font-size: 17px;
+    font-weight: 500;
+    letter-spacing: 0;
+    margin: 0 0 1px 0;
+  }
+
+  .summary {
+    font-size: 16px;
+  }
+
+  h4.update-title {
+    font-weight: normal;
+    font-size: 17px;
+    margin: 0 0 6px 0;
+  }
+
+  .summary {
+    font-size: 15px;
+    letter-spacing: 0;
+    line-height: 22px;
+    margin: 10px 0 0 0;
+  }
+
+  .link-chevron {
+    .chevron {
+      background: transparent;
+      display: block;
+      width: 12px;
+      height: 21px;
+    }
+  }
+
+  &.has-link {
+    cursor: pointer;
+    transition: background 50ms;
+
+    &:hover {
+      border-color: rgba(255, 255, 255, 0.8);
+      background: rgba(255, 255, 255, 0.1);
+    }
+
+    .link-chevron {
+      .chevron {
+        background-image: url('./img/news-link-chevron.svg');
+        background-repeat: no-repeat;
+        background-size: 12px 21px;
+      }
+    }
+  }
+}
+
+.up-date {
+  opacity: 0.7;
+  font-size: 13px;
+  font-weight: 600;
+  letter-spacing: 0;
+  margin: 0 0 0 20px;
+}

frontend/src/app/components/UpdateList/stories.js

@@ -4,6 +4,7 @@ import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import { withKnobs } from '@storybook/addon-knobs';
 
+import PhotonColors from 'photon-colors';
 import UpdateList from './index';
 import LayoutWrapper from '../LayoutWrapper';
 
@@ -74,8 +75,11 @@ const basePropsWithStaleNews = Object.assign({}, baseProps, {
 storiesOf('UpdateList', module)
   .addDecorator(withKnobs)
   .addDecorator(story =>
-    <div className="blue" style={{ padding: 10 }} onClick={action('click')}>
-      <div className="stars" />
+    <div className="blue" style={{
+      padding: 10,
+      // TODO: Replace this with a proper background class that's been photonized
+      background: `linear-gradient(-180deg, ${PhotonColors.BLUE_90} 0%, ${PhotonColors.PURPLE_90} 100%, ${PhotonColors.BLUE_90} 100%)`
+    }} onClick={action('click')}>
       <LayoutWrapper flexModifier="card-list">
         {story()}
       </LayoutWrapper>

frontend/src/app/components/UpdateList/tests.js

@@ -124,7 +124,7 @@ describe('app/components/UpdateList', () => {
         update={{ title: 'foo' }}
         experiment={{ slug: 'foobar' }}
       />);
-      const icon = subject.find('.experiment-icon');
+      const icon = subject.find('.update-experiment-icon');
       expect(icon.hasClass('experiment-icon-foobar')).to.be.true;
     });
 

frontend/src/styles/_modules.scss

@@ -1,7 +1,6 @@
 @import 'modules/avatar';
 @import 'modules/buttons';
 @import 'modules/card-list';
-@import 'modules/update-list';
 @import 'modules/experiment-details';
 @import 'modules/experiment-list';
 @import 'modules/footer';