feat: Announcements in Homepage (amundsen-io#591)

* feat: AnnouncementsList component (amundsen-io#540) * Adds fake endpoint return for development * Basic Announcements list * Basic unstyled Announcements list * Restoring proper announcements endpoint code * Linting issues Signed-off-by: Marcos Iglesias <[email protected]> * feat: Announcements container and saga, api and reducer modifications (amundsen-io#541) * Basic container * Adding status code to announcement response * Updating Announcements reducer, sagas and api to support loading and error states * Linting details * Completing the global state fixture * Basic tests for connection Signed-off-by: Marcos Iglesias <[email protected]> * Basic card with loading shimmer (amundsen-io#546) Signed-off-by: Marcos Iglesias <[email protected]> * feat: Card Styling for announcements (amundsen-io#550) * Shimmering card styles * Basic card typography styling * Add links and link styles to cards * Adjusting card copy per Knowl specs Signed-off-by: Marcos Iglesias <[email protected]> * feat: Wiring announcements block on Homepage (amundsen-io#551) * Adds announcemetns to homepage, integrates basic card * Spacing and details * Adjusting loading state * Adds card and see more links logging * Updates layout size; focus detail * Variables on List component styles * Cleaning fake response Signed-off-by: Marcos Iglesias <[email protected]> * feat: Adds config for announcements (amundsen-io#562) * Moves config tests, adds config for announcements and test Signed-off-by: Marcos Iglesias <[email protected]> * Wiring announcements feature to the config option Signed-off-by: Marcos Iglesias <[email protected]> * Updating configuration docs Signed-off-by: Marcos Iglesias <[email protected]> * Extracting navLinks logic into the config utils Signed-off-by: Marcos Iglesias <[email protected]> * Adds LPL typography to announcements; some layout fine-tuning (amundsen-io#581) Signed-off-by: Marcos Iglesias Valle <[email protected]> Signed-off-by: Marcos Iglesias <[email protected]> * Fixing merge conflicts Signed-off-by: Marcos Iglesias <[email protected]>
dorianj · Aug 18, 2020 · 9e35c7e · 9e35c7e
1 parent a426f3b
commit 9e35c7e
Show file tree

Hide file tree

Showing 46 changed files with 2,027 additions and 320 deletions.
diff --git a/frontend/amundsen_application/static/css/_animations.scss b/frontend/amundsen_application/static/css/_animations.scss
@@ -18,14 +18,15 @@ $loading-curve: cubic-bezier(0.45, 0, 0.15, 1);
 
 .is-shimmer-animated {
   animation: $loading-duration shimmer $loading-curve infinite;
-  background-image: linear-gradient(
-    to right,
-    $gray10 0%,
-    $gray10 33%,
-    $gray5 50%,
-    $gray10 67%,
-    $gray10 100%
-  );
+  background-image:
+    linear-gradient(
+      to right,
+      $gray10 0%,
+      $gray10 33%,
+      $gray5 50%,
+      $gray10 67%,
+      $gray10 100%
+    );
   background-repeat: no-repeat;
   background-size: 300% 100%;
 }
diff --git a/frontend/amundsen_application/static/css/_layouts.scss b/frontend/amundsen_application/static/css/_layouts.scss
@@ -5,6 +5,8 @@
 
 $resource-header-height: 84px;
 $aside-separation-space: 40px;
+$screen-lg-max: 1490px;
+$screen-lg-container: 1440px;
 
 .resource-detail-layout {
   height: calc(100vh - #{$nav-bar-height} - #{$footer-height});
@@ -198,6 +200,12 @@ $aside-separation-space: 40px;
   min-width: $body-min-width;
 }
 
+@media (min-width: $screen-lg-max) {
+  #main > .container {
+    width: $screen-lg-container;
+  }
+}
+
 #main > .container {
   margin: 96px auto 48px;
 }

diff --git a/frontend/amundsen_application/static/css/_typography-default.scss b/frontend/amundsen_application/static/css/_typography-default.scss
@@ -3,6 +3,150 @@
 
 @import 'variables';
 
+// New Typography styles based on LPL
+// Use these styles going forward
+
+// Placeholder selectors
+// Ref: http://thesassway.com/intermediate/understanding-placeholder-selectors
+
+%text-headline-w1 {
+  font-family: $text-heading-font-family;
+  font-size: $w1-headline-font-size;
+  line-height: $w1-headline-line-height;
+  font-weight: $title-font-weight;
+}
+
+%text-headline-w2 {
+  font-family: $text-heading-font-family;
+  font-size: $w2-headline-font-size;
+  line-height: $w2-headline-line-height;
+  font-weight: $title-font-weight;
+}
+
+%text-headline-w3 {
+  font-family: $text-heading-font-family;
+  font-size: $w3-headline-font-size;
+  line-height: $w3-headline-line-height;
+  font-weight: $title-font-weight;
+}
+
+%text-title-w1 {
+  font-family: $text-body-font-family;
+  font-size: $w1-font-size;
+  line-height: $w1-line-height;
+  font-weight: $title-font-weight;
+}
+
+%text-title-w2 {
+  font-family: $text-body-font-family;
+  font-size: $w2-font-size;
+  line-height: $w2-line-height;
+  font-weight: $title-font-weight;
+}
+
+%text-title-w3 {
+  font-family: $text-body-font-family;
+  font-size: $w3-font-size;
+  line-height: $w3-line-height;
+  font-weight: $title-font-weight;
+}
+
+%text-subtitle-w1 {
+  font-family: $text-body-font-family;
+  font-size: $w1-font-size;
+  line-height: $w1-line-height;
+  font-weight: $subtitle-font-weight;
+}
+
+%text-subtitle-w2 {
+  font-family: $text-body-font-family;
+  font-size: $w2-font-size;
+  line-height: $w2-line-height;
+  font-weight: $subtitle-font-weight;
+}
+
+%text-subtitle-w3 {
+  font-family: $text-body-font-family;
+  font-size: $w3-font-size;
+  line-height: $w3-line-height;
+  font-weight: $subtitle-font-weight;
+}
+
+%text-body-w1 {
+  font-family: $text-body-font-family;
+  font-size: $w1-font-size;
+  line-height: $w1-line-height;
+  font-weight: $body-font-weight;
+}
+
+%text-body-w2 {
+  font-family: $text-body-font-family;
+  font-size: $w2-font-size;
+  line-height: $w2-line-height;
+  font-weight: $body-font-weight;
+}
+
+%text-body-w3 {
+  font-family: $text-body-font-family;
+  font-size: $w3-font-size;
+  line-height: $w3-line-height;
+  font-weight: $body-font-weight;
+}
+
+// Typography classes
+// Headlines
+.text-headline-w1 {
+  @extend %text-headline-w1;
+}
+
+.text-headline-w2 {
+  @extend %text-headline-w2;
+}
+
+.text-headline-w3 {
+  @extend %text-headline-w3;
+}
+
+// Titles
+.text-title-w1 {
+  @extend %text-title-w1;
+}
+
+.text-title-w2 {
+  @extend %text-title-w2;
+}
+
+.text-title-w3 {
+  @extend %text-title-w3;
+}
+
+// Subtitles
+.text-subtitle-w1 {
+  @extend %text-subtitle-w1;
+}
+
+.text-subtitle-w2 {
+  @extend %text-subtitle-w2;
+}
+
+.text-subtitle-w3 {
+  @extend %text-subtitle-w3;
+}
+
+// Body
+.text-body-w1 {
+  @extend %text-body-w1;
+}
+
+.text-body-w2 {
+  @extend %text-body-w2;
+}
+
+.text-body-w3 {
+  @extend %text-body-w3;
+}
+
+// Typography Helpers
 .text-center {
   text-align: center;
 }
@@ -15,6 +159,40 @@
   text-align: right;
 }
 
+.truncated {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+// Text for Screen Readers only
+// Reference: Bootstrap 4 codebase
+.sr-only {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border: 0 !important;
+}
+
+// From https://gist.github.com/igorescobar/d74a76629bab47d601d71c3a6e010ff2
+@mixin truncate($font-size, $line-height, $lines-to-show) {
+  display: block; // Fallback for non-webkit
+  display: -webkit-box;
+  font-size: $font-size;
+  line-height: $line-height;
+  -webkit-line-clamp: $lines-to-show;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+// Old typography styles
+// DEPRECATED - Don't use!
 h1,
 h2,
 h3,
@@ -184,23 +362,3 @@ body {
 .text-primary {
   color: $text-primary;
 }
-
-.truncated {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-// Text for Screen Readers only
-// Reference: Bootstrap 4 codebase
-.sr-only {
-  position: absolute !important;
-  width: 1px !important;
-  height: 1px !important;
-  padding: 0 !important;
-  margin: -1px !important;
-  overflow: hidden !important;
-  clip: rect(0, 0, 0, 0) !important;
-  white-space: nowrap !important;
-  border: 0 !important;
-}
diff --git a/frontend/amundsen_application/static/css/_variables-default.scss b/frontend/amundsen_application/static/css/_variables-default.scss
@@ -27,7 +27,6 @@ $stroke-underline: $gray40 !default;
 // Typography
 $text-primary: $gray100 !default;
 $text-secondary: $gray60 !default;
-$text-secondary: $gray60 !default;
 $text-tertiary: $gray40 !default;
 $text-placeholder: $gray40 !default;
 $text-inverse: $white !default;
@@ -130,3 +129,39 @@ $spacer-1: $spacer-size;
 $spacer-2: $spacer-size * 2;
 $spacer-3: $spacer-size * 3;
 $spacer-4: $spacer-size * 4;
+
+// Elevations (from LPL)
+$elevation-level1: 0 0 1px 0 rgba(0, 0, 0, 0.12),
+  0 1px 1px 1px rgba(0, 0, 0, 0.08);
+$elevation-level2: 0 0 1px 0 rgba(0, 0, 0, 0.12),
+  0 2px 3px 0 rgba(0, 0, 0, 0.16);
+$elevation-level3: 0 0 1px 0 rgba(0, 0, 0, 0.12),
+  0 2px 4px 0 rgba(0, 0, 0, 0.16);
+$elevation-level4: 0 0 1px 0 rgba(0, 0, 0, 0.12),
+  0 3px 6px 0 rgba(0, 0, 0, 0.16);
+
+// New Typography variables based on LPL
+$text-heading-font-family: $font-family-header;
+$text-body-font-family: $font-family-body;
+
+$w1-font-size: 20px;
+$w1-line-height: 24px;
+
+$w2-font-size: 16px;
+$w2-line-height: 20px;
+
+$w3-font-size: 14px;
+$w3-line-height: 18px;
+
+$w1-headline-font-size: 36px;
+$w1-headline-line-height: 40px;
+
+$w2-headline-font-size: 26px;
+$w2-headline-line-height: 28px;
+
+$w3-headline-font-size: 22px;
+$w3-headline-line-height: 24px;
+
+$title-font-weight: $font-weight-body-bold;
+$subtitle-font-weight: $font-weight-body-semi-bold;
+$body-font-weight: $font-weight-body-regular;
diff --git a/...nts/AnnouncementPage/tests/index.spec.tsx → ...omponents/AnnouncementPage/index.spec.tsx b/...nts/AnnouncementPage/tests/index.spec.tsx → ...omponents/AnnouncementPage/index.spec.tsx
@@ -13,7 +13,7 @@ import {
   AnnouncementPageProps,
   mapDispatchToProps,
   mapStateToProps,
-} from '..';
+} from '.';
 
 describe('AnnouncementPage', () => {
   let props: AnnouncementPageProps;

diff --git a/frontend/amundsen_application/static/js/components/AnnouncementPage/index.tsx b/frontend/amundsen_application/static/js/components/AnnouncementPage/index.tsx
@@ -14,9 +14,11 @@ import './styles.scss';
 
 import { GlobalState } from 'ducks/rootReducer';
 import { GetAnnouncementsRequest } from 'ducks/announcements/types';
-import { getAnnouncements } from 'ducks/announcements/reducer';
+import { getAnnouncements } from 'ducks/announcements';
 import { AnnouncementPost } from 'interfaces';
 
+const ANNOUNCEMENTS_HEADER_TEXT = 'Announcements';
+
 export interface StateFromProps {
   posts: AnnouncementPost[];
 }
@@ -29,7 +31,9 @@ export type AnnouncementPageProps = StateFromProps & DispatchFromProps;
 
 export class AnnouncementPage extends React.Component<AnnouncementPageProps> {
   componentDidMount() {
-    this.props.announcementsGet();
+    const { announcementsGet } = this.props;
+
+    announcementsGet();
   }
 
   createPost(post: AnnouncementPost, postIndex: number) {
@@ -47,7 +51,9 @@ export class AnnouncementPage extends React.Component<AnnouncementPageProps> {
   }
 
   createPosts() {
-    return this.props.posts.map((post, index) => {
+    const { posts } = this.props;
+
+    return posts.map((post, index) => {
       return this.createPost(post, index);
     });
   }
@@ -57,9 +63,9 @@ export class AnnouncementPage extends React.Component<AnnouncementPageProps> {
       <DocumentTitle title="Announcements - Amundsen">
         <main className="container announcement-container">
           <div className="row">
-            <div className="col-xs-12">
+            <div className="col-xs-12 col-md-10 col-md-offset-1">
               <h1 id="announcement-header" className="h3">
-                Announcements
+                {ANNOUNCEMENTS_HEADER_TEXT}
               </h1>
               <hr />
               <div id="announcement-content" className="announcement-content">

diff --git a/...omponents/BrowsePage/tests/index.spec.tsx → ...c/js/components/BrowsePage/index.spec.tsx b/...omponents/BrowsePage/tests/index.spec.tsx → ...c/js/components/BrowsePage/index.spec.tsx
@@ -7,7 +7,7 @@ import * as DocumentTitle from 'react-document-title';
 import { shallow } from 'enzyme';
 
 import TagsListContainer from 'components/common/Tags';
-import { BrowsePage } from '..';
+import { BrowsePage } from '.';
 
 describe('BrowsePage', () => {
   const setup = () => {

diff --git a/frontend/amundsen_application/static/js/components/BrowsePage/index.tsx b/frontend/amundsen_application/static/js/components/BrowsePage/index.tsx
@@ -17,7 +17,7 @@ export class BrowsePage extends React.Component {
       <DocumentTitle title={BROWSE_PAGE_DOCUMENT_TITLE}>
         <main className="container">
           <div className="row">
-            <div className="col-xs-12">
+            <div className="col-xs-12 col-md-10 col-md-offset-1">
               <TagsListContainer shortTagsList={false} />
             </div>
           </div>