Merge pull request #2465 from fedspendingtransparency/staging

Sprint 128 Production Deploy
fedspendingtransparency · Mar 23, 2021 · b6c4a54 · b6c4a54
2 parents e28a256 + cfc2ee4
commit b6c4a54
Show file tree

Hide file tree

Showing 62 changed files with 2,158 additions and 1,829 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -93,7 +93,7 @@
         "d3-sankey0.12.3": "npm:d3-sankey@0.12.3",
         "d3-scale": "^1.0.4",
         "d3-time": "^1.0.11",
-        "data-transparency-ui": "github:fedspendingtransparency/data-transparency-ui#v1.3.7",
+        "data-transparency-ui": "github:fedspendingtransparency/data-transparency-ui#v2.0.0",
         "date-fns": "^2.16.1",
         "file-loader": "^3.0.1",
         "fixed-data-table": "0.6.3",

diff --git a/src/_scss/pages/about/_section.scss b/src/_scss/pages/about/_section.scss
@@ -70,9 +70,10 @@
             margin: rem(19) 0 rem(38);
             padding: rem(16) rem(32);
             text-decoration: none;
-            &.usa-button-link {
+            &.usa-button-link, &.usda-external-link {
                 @include button-link;
                 font-size: rem(18);
+                line-height: normal;
             }
         }
         .center {

diff --git a/src/_scss/pages/aboutTheData/_tableControls.scss b/src/_scss/pages/aboutTheData/_tableControls.scss
@@ -1,12 +1,14 @@
 .table-controls {
     max-width: 100%;
-    .usa-dt-tabs-mobile .usa-dt-picker__list,
-    .tooltip-spacer {
-        z-index: 12;
-    }
-    .usa-dt-tab-toggle:focus {
+    .usa-dt-tab:focus {
         outline: none;
     }
+    @media (min-width: $tablet-screen) {
+      .usa-dt-tab-list {
+        overflow-x: visible;
+        overflow-y: visible;
+      }
+    }
     .table-controls__time-and-search {
         padding-left: 0;
         @media (min-width: $medium-screen) {
@@ -197,11 +199,13 @@
     }
     .table-tab-label {
         @include display(flex);
+
     }
     .tooltip-wrapper {
         display: none;
         @media (min-width: $tablet-screen) {
             @include display(flex);
+            white-space: normal;
         }
     }
     .usa-dt-picker__list {

diff --git a/src/_scss/pages/aboutTheData/aboutTheData.scss b/src/_scss/pages/aboutTheData/aboutTheData.scss
@@ -42,6 +42,7 @@
         @media (min-width: $tablet-screen) {
             margin-bottom: rem(30);
         }
+        @import 'components/externalLink';
     }
     .table-container {
         max-width: 100%;

diff --git a/src/_scss/pages/agencyV2/_sidebar.scss b/src/_scss/pages/agencyV2/_sidebar.scss
@@ -0,0 +1,63 @@
+.sidebar {
+    display: none;
+    position: relative;
+    @media(min-width: $medium-screen) {
+        @include display(flex);
+        @include flex-direction(column);
+        width: 22%;
+        margin: rem(20);
+    }
+
+    .agency-v2-sidebar-reference {
+        display: none;
+        &.float-sidebar {
+            display: block;
+        }
+    }
+
+    .agency-v2-sidebar-content {
+        background-color: $color-white;
+        box-shadow: $container-shadow;
+        border-top: 1px solid $color-gray-border;
+        border-right: 1px solid $color-gray-border;
+        border-bottom: 1px solid $color-gray-border;
+        border-radius: rem(5);
+        padding: rem(30);
+        &.float-sidebar {
+            position: fixed;
+            top: rem(96);
+        }
+        ul {
+            @include unstyled-list;
+            li {
+                border-bottom: solid rem(1) $color-gray-lighter;
+                a.sidebar-link {
+                    display: block;
+                    padding: rem(10);
+                    border-left: solid rem(5) transparent;
+                    @include transition(all 0.15s ease-in-out);
+                    color: $color-base;
+                    font-size: rem(19);
+                    line-height: rem(20);
+                    text-decoration: none;
+                    font-weight: $font-semibold;
+                    &:hover {
+                        background-color: $color-gray-lightest;
+                        text-decoration: none;
+                    }
+
+                    &.active {
+                        border-left: 5px solid $color-primary;
+                    }
+                    .sidebar-link__overline {
+                        font-weight: normal;
+                        text-transform: uppercase;
+                        font-size: rem(12);
+                        letter-spacing: 0.3px;
+                    }
+                }
+
+            }
+        }
+    }
+}
diff --git a/src/_scss/pages/agency/v2/_tables.scss → src/_scss/pages/agencyV2/_tables.scss b/src/_scss/pages/agency/v2/_tables.scss → src/_scss/pages/agencyV2/_tables.scss
@@ -21,7 +21,7 @@
     }
 }
 
-@import "../../search/results/table/tableMessages";
+@import 'pages/search/results/table/tableMessages';
 
 .results-table-message-container {
     position: relative;
@@ -52,7 +52,7 @@
     }
 
     .loading-animation {
-        @import "../../search/results/screens/loading";
+        @import 'pages/search/results/screens/loading';
     }
 
     .results-table-error {

diff --git a/src/_scss/pages/agency/v2/_tabs.scss → src/_scss/pages/agencyV2/_tabs.scss b/src/_scss/pages/agency/v2/_tabs.scss → src/_scss/pages/agencyV2/_tabs.scss
diff --git a/src/_scss/pages/agency/v2/index.scss → src/_scss/pages/agencyV2/index.scss b/src/_scss/pages/agency/v2/index.scss → src/_scss/pages/agencyV2/index.scss
@@ -19,12 +19,10 @@
         width: 100%;
     }
 
-    @import "../../explorer/detail/sidebar/fyPicker";
+    @import "pages/explorer/detail/sidebar/fyPicker";
 
     .sticky-header .sticky-header__container .sticky-header__header {
-        @include display(flex);
         @include justify-content(flex-start);
-        @include align-items(center);
         @include flex-wrap(nowrap);
         .sticky-header__toolbar {
             @include display(flex);
@@ -48,8 +46,8 @@
                             height: 100%;
                         }
                         .active {
-                            background-color: #f1f1f1;
-                            color: #0071bc;
+                            background-color: $color-gray-lightest;
+                            color: $color-primary;
                         }
                     }
                     .usa-dt-picker__dropdown-container {
@@ -58,7 +56,7 @@
                     }
                     .usa-dt-picker__button-text,
                     .usa-dt-picker__button-icon svg {
-                        color: white;
+                        color: $color-white;
                     }
                     .usa-dt-picker__icon svg {
                         width: rem(14);
@@ -120,79 +118,24 @@
                 list-style: none;
             }
         }
-        .sidebar {
-            display: none;
-            @media(min-width: $medium-screen) {
-                @include display(flex);
-                @include flex-direction(column);
-                width: 22%;
-                margin: rem(20);
-            }
-            .agency-v2-sidebar-reference {
-                display: none;
-                &.float-sidebar {
-                    display: block;
-                }
-            }
-
-            .agency-v2-sidebar-content {
-                background-color: $color-white;
-                box-shadow: $container-shadow;
-                color: $color-base;
-                border-top: 1px solid $color-gray-border;
-                border-right: 1px solid $color-gray-border;
-                border-bottom: 1px solid $color-gray-border;
-                border-radius: rem(5);
-                &.float-sidebar {
-                    position: fixed;
-                    top: rem(96);
-                }
-                ul {
-                    @include unstyled-list;
-                    padding: rem(30);
-
-                    li {
-                        margin-bottom: rem(24);
-
-                        &:last-child {
-                            margin-bottom: rem(0);
-                        }
-                    }
-
-                    a.sidebar-link {
-                        color: $color-base;
-                        font-size: rem(19);
-                        line-height: rem(20);
-                        padding-bottom: rem(5);
-
-                        text-decoration: none;
-                        border-bottom: 5px solid transparent;
-                        @include transition(all 0.15s ease-in-out);
-
-                        &:hover {
-                            border-bottom: 5px solid $color-primary;
-                        }
-
-                        &.active {
-                            font-weight: $font-bold;
-                            border-bottom: 5px solid $color-primary;
-                        }
-                    }
-                }
-            }
-        }
+        @import './sidebar';
         .body {
             @include display(flex);
             width: 100%;
             @include flex-direction(column);
             padding: 2.5% 2.5% 0 2.5%;
             margin: rem(20) rem(20) rem(20) 0;
-            background: white;
+            background: $color-white;
             @media(min-width: $tablet-screen) {
                 width: 70%;
             }
+            .usda-message {
+                &.usda-message_error {
+                    background-color: $color-white;
+                }
+            }
             .body__content {
-                @import '../../search/results/table/resultsTableMessageContainer';
+                @import 'pages/search/results/table/resultsTableMessageContainer';
                 @import './tables';
             }
             .body__section {
@@ -220,19 +163,11 @@
                 hr {
                     width: 100%;
                     height: 2px;
-                    background: #555555;
+                    background: $color-base;
                     border: none;
                     margin-bottom: rem(35);
                     margin-top: 0;
                 }
-                .coming-soon-section {
-                    width: 100%;
-                    @include display(flex);
-                    @include flex-direction(column);
-                    @extend %coming-soon-idv;
-                    padding-bottom: 0;
-                    height: 730px;
-                }
             }
         }
     }

diff --git a/src/_scss/pages/covid19/_overviewData.scss b/src/_scss/pages/covid19/_overviewData.scss
@@ -15,7 +15,7 @@
             border-bottom: 0;
         }
         padding: rem(16);
-        margin: rem(11) 0;
+        margin: rem(10) 0;
         @media(min-width: $tablet-screen) {
             border-bottom: 0;
             border-right: solid rem(1) $color-gray-lighter;

diff --git a/src/_scss/pages/covid19/index.scss b/src/_scss/pages/covid19/index.scss
@@ -49,7 +49,7 @@
                 width: 70%;
             }
             .body__section {
-                @import '../agency/v2/tabs';
+                @import '../agencyV2/tabs';
                 @import 'components/moreOptionsTabs';
                 @import 'components/glossaryLink';
                 @import 'components/externalLink';