FDG-9759 Create New Data Table

env/qat.js

@@ -4,7 +4,7 @@ module.exports = {
   API_BASE_URL: 'https://api.fiscaldata.treasury.gov',
   DATA_DOWNLOAD_BASE_URL: 'https://fiscaldata.treasury.gov',
   WEB_SOCKET_BASE_URL: 'wss://downloads.fiscaldata.treasury.gov/main',
-  EXPERIMENTAL_WHITELIST: ['experimental-page', 'afg-overview', 'publishedReportsSection'],
+  EXPERIMENTAL_WHITELIST: ['experimental-page', 'afg-overview', 'publishedReportsSection', 'dataPreview'],
   ADDITIONAL_DATASETS: {},
   USE_MOCK_RELEASE_CALENDAR_DATA_ON_API_FAIL: true,
   ADDITIONAL_ENDPOINTS: {},

src/components/data-preview/data-preview-section-container/data-preview-section-container.module.scss

@@ -0,0 +1,151 @@
+@import '../../../variables.module.scss';
+@import '../../../zIndex.module.scss';
+
+$table-container-margin: 8rem;
+
+.titleContainer {
+  border-bottom: 1px solid $dd-border-color;
+  position: relative;
+  z-index: $table-title;
+}
+.tableContainer {
+  min-height: 44.125rem;
+}
+
+
+.sectionBorder {
+  border: solid #d6d7d9 1px;
+  border-radius: 5px;
+}
+
+.tableSection {
+  min-height: 36.5rem;
+}
+
+.detailViewButton {
+  height: 28px;
+  width: 74px;
+  background-color: $primary;
+  border: none;
+  border-radius: 3px;
+  margin-right: 1rem;
+  color: $content-section-background;
+  padding: 4px 8px 4px 8px;
+  justify-content: space-between;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+
+.detailViewBack {
+  font-size: $font-size-16;
+  font-weight: $semi-bold-weight;
+}
+
+.detailViewIcon {
+  width: 1rem;
+  height: 1rem;
+}
+
+.tableContainer {
+  min-height: calc(#{$loading-icon-size} + #{$table-container-margin}); // height of icon + top and bottom margin
+  position: relative;
+}
+
+.loadingSection {
+  z-index: $table-loading-section;
+  height: calc(100% - 5.5rem);
+  width: 100% ;
+  position: absolute;
+  background-color: rgba(255, 255, 255, 0.85);
+  transition: opacity 0.5s 0.5s, left 0.5s ease-in-out;
+  display: block;
+  animation: fadeIn 1s;
+  overflow: hidden;
+  margin-top: 5.5rem;
+}
+
+@media screen and (max-width: $breakpoint-lg) {
+  .loadingSection {
+    height: calc(100% - 5.875rem);
+    margin-top: 5.875rem;
+  }
+}
+
+.loadingIcon {
+  z-index: $table-loading-icon;
+  color: $font-title;
+  font-size: $font-size-18;
+  width: 100%;
+  top: 7rem;
+  text-align: center;
+  position: absolute;
+
+  > * {
+    vertical-align: middle;
+    margin-right: 0.5rem;
+    font-size: $loading-icon-size;
+    color: $loading-icon-color;
+  }
+}
+
+.headerWrapper {
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+  padding: 1rem 1rem 0.5rem;
+
+  & > * {
+    margin-bottom: 0.5rem;
+  }
+}
+
+.header {
+  @include headingStyle6;
+  margin-left: 0.5rem;
+  margin-right: 1rem;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  flex-grow: 1;
+}
+
+@media screen and (min-width: $breakpoint-md) {
+  .headerWrapper {
+    padding: 0.5rem 1rem 0;
+  }
+}
+
+.barContainer {
+  background-color: $body-background;
+}
+
+.noticeContainer {
+  padding: 0.5rem;
+  background-color: $body-background;
+}
+
+.barExpander {
+  max-height: 0;
+  transform: scaleY(-0);
+  transition: transform 0.2s ease, max-height 0.2s ease;
+
+  &.active {
+    transform: scaleY(1);
+    max-height: 60px;
+  }
+}
+
+@media screen and (max-width: $breakpoint-sm) {
+  .barExpander.active {
+    max-height: 92px;
+  }
+  .headerWrapper {
+    flex-wrap: wrap;
+  }
+}
+
+@media screen and (max-width: $breakpoint-md) {
+  .barExpander.active {
+    max-height: 170px;
+  }
+}