Merge pull request #220 from fedspendingtransparency/fix/11712-dtui

DEV-11712 remove right fade, fix read more

.eslintrc

@@ -6,8 +6,8 @@
     "extends": "airbnb",
     "parser": "@babel/eslint-parser",
     "parserOptions": {
-        "ecmaVersion": 2021,
-        "presets": ["@babel/preset-react"]
+      "ecmaVersion": 2022,
+      "presets": ["@babel/preset-react"]
     },
     "globals": {
         "window": true,

components/table/Table.jsx

@@ -3,7 +3,7 @@
  * Created by Lizzie Salita 11/17/20
  */
 
-import React, { useState } from 'react';
+import React from 'react';
 import PropTypes, { shape, oneOf, oneOfType } from 'prop-types';
 import { uniqueId, union } from 'lodash';
 import ErrorMessage from '../messages/ErrorMessage';
@@ -36,9 +36,7 @@ const propTypes = {
     onClickHandler: PropTypes.func,
     isMobile: PropTypes.bool,
     stickyFirstColumn: PropTypes.bool,
-    subAward: PropTypes.bool,
-    checkToAddRightFade: PropTypes.func
-};
+    subAward: PropTypes.bool};
 
 const defaultProps = {
     classNames: '',
@@ -47,10 +45,6 @@ const defaultProps = {
 };
 
 const Table = (props) => {
-    const [isScrolledRight, setIsScrolledRight] = useState(false);
-    const [isScrolledLeft, setIsScrolledLeft] = useState(true);
-    const [isScrolling, setIsScrolling] = useState(false);
-
     const stackedClass = props.isStacked ? `usa-dt-table__stacked` : '';
 
     const getTablePickerOptionsAsc = props.columns.map((col) => ({
@@ -69,30 +63,6 @@ const Table = (props) => {
         }
     }));
 
-    const element = document.querySelector(".advanced-search__table-wrapper");
-    if (element) {
-        element.addEventListener("scroll", (e) => {
-            setIsScrolling(true);
-            if ((e.target.scrollWidth - e.target.clientWidth - e.target.scrollLeft) < 20) {
-                setIsScrolledRight(true);
-            }
-            else {
-                setIsScrolledRight(false);
-            }
-
-            if (e.target.scrollLeft === 0) {
-                setIsScrolledLeft(true);
-            }
-            else {
-                setIsScrolledLeft(false);
-            }
-
-            setTimeout(() => {
-                setIsScrolling(false);
-            }, 100);
-        });
-    }
-
     let body;
 
     if (props.loading) {
@@ -123,11 +93,7 @@ const Table = (props) => {
         );
     }
     else {
-        body = (<TableData {...props} isScrolledLeft={isScrolledLeft} />);
-    }
-
-    if (isScrolling && props.checkToAddRightFade) {
-        props.checkToAddRightFade(isScrolledLeft, isScrolledRight);
+        body = (<TableData {...props} />);
     }
 
     return (
@@ -161,7 +127,6 @@ const Table = (props) => {
                                 currentSort={props.currentSort}
                                 updateSort={props.updateSort}
                                 stickyFirstColumn={props.stickyFirstColumn}
-                                isScrolledLeft={isScrolledLeft}
                                 subAward={props.subAward}
                                 index={index}
                                 {...col} />

components/table/TableData.jsx

@@ -22,7 +22,6 @@ const propTypes = {
     atMaxLevel: PropTypes.bool,
     stickyFirstColumn: PropTypes.bool,
     subAward: PropTypes.bool,
-    isScrolledLeft: PropTypes.bool,
     isStacked: PropTypes.bool
 };
 
@@ -37,7 +36,6 @@ const TableData = ({
     atMaxLevel,
     stickyFirstColumn = false,
     subAward,
-    isScrolledLeft,
     isStacked
 }) => {
     const [firstClick, setFirstClick] = useState(false);
@@ -108,7 +106,7 @@ const TableData = ({
                                     <td
                                         key={uniqueId()}
                                         className={`usda-table__cell${columns[j]?.right ? ' usda-table__cell_right' : ''}
-                                ${(j === 0 && stickyFirstColumn) ? ' stickyColumn' : ''} ${!isScrolledLeft ? ' add-box-shadow' : ''} `}>
+                                ${(j === 0 && stickyFirstColumn) ? ' stickyColumn' : ''} `}>
                                         {columns[j]
                                         && (
                                             <div className="usda-table__cell-heading-container">

components/table/TableHeader.jsx

@@ -70,8 +70,7 @@ const propTypes = {
     stickyFirstColumn: PropTypes.bool,
     columnWidth: PropTypes.number,
     subAward: PropTypes.bool,
-    index: PropTypes.number,
-    isScrolledLeft: PropTypes.bool
+    index: PropTypes.number
 };
 
 const TableHeaderCell = ({
@@ -89,8 +88,7 @@ const TableHeaderCell = ({
     stickyFirstColumn = false,
     columnWidth,
     subAward,
-    index,
-    isScrolledLeft
+    index
 }) => {
     const handleClickedSort = (e, sortOn = title) => {
         updateSort(sortOn, e.target.value);
@@ -104,8 +102,7 @@ const TableHeaderCell = ({
     return (
         <th
             className={`${className} table-header${bodyHeader ? ' table-header_body-header' : ''} 
-            ${stickyFirstColumn && index === 0 ? ' stickyColumn' : ''} ${subAward ? 'table-header__subaward-color' : ''}
-             ${!isScrolledLeft ? ' add-box-shadow' : ''}`}
+            ${stickyFirstColumn && index === 0 ? ' stickyColumn' : ''} ${subAward ? 'table-header__subaward-color' : ''}`}
             style={{ minWidth: columnWidth }}
             colSpan={columnWidth ? '' : columnSpan}
             rowSpan={rowsSpan()}

docs/485.76410a82.iframe.bundle.js.LICENSE.txt → docs/211.0cee781e.iframe.bundle.js.LICENSE.txt

@@ -87,29 +87,19 @@ PERFORMANCE OF THIS SOFTWARE.
 
 /**
  * @license React
- * react-dom.production.min.js
+ * react-dom.production.js
  *
- * Copyright (c) Facebook, Inc. and its affiliates.
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
 /**
  * @license React
- * react.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
+ * react.production.js
  *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/**
- * @license React
- * scheduler.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

docs/9.eef9e4cabd109ad744df.manager.bundle.js.LICENSE.txt → docs/9.48e29af96ed2f7e02202.manager.bundle.js.LICENSE.txt

@@ -46,29 +46,19 @@ PERFORMANCE OF THIS SOFTWARE.
 
 /**
  * @license React
- * react-dom.production.min.js
+ * react-dom.production.js
  *
- * Copyright (c) Facebook, Inc. and its affiliates.
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
 /**
  * @license React
- * react.production.min.js
+ * react.production.js
  *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/**
- * @license React
- * scheduler.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

docs/iframe.html

@@ -361,4 +361,4 @@
 
 
 
-            window['STORIES'] = [{"titlePrefix":"","directory":"./.storybook","files":"**/stories/*.stories.@(mdx|js)","importPathMatcher":"^\\.[\\\\/](?:\\.storybook(?:[\\\\/](?!\\.)(?:(?:(?!(?:^|[\\\\/])\\.).)*?)[\\\\/]|[\\\\/]|$)stories[\\\\/](?!\\.)(?=.)[^\\\\/]*?\\.stories\\.(mdx|js))$"}];</script><script src="runtime~main.868a37cc.iframe.bundle.js"></script><script src="485.76410a82.iframe.bundle.js"></script><script src="main.246fb9f1.iframe.bundle.js"></script></body></html>
+            window['STORIES'] = [{"titlePrefix":"","directory":"./.storybook","files":"**/stories/*.stories.@(mdx|js)","importPathMatcher":"^\\.[\\\\/](?:\\.storybook(?:[\\\\/](?!\\.)(?:(?:(?!(?:^|[\\\\/])\\.).)*?)[\\\\/]|[\\\\/]|$)stories[\\\\/](?!\\.)(?=.)[^\\\\/]*?\\.stories\\.(mdx|js))$"}];</script><script src="runtime~main.0cb46b86.iframe.bundle.js"></script><script src="211.0cee781e.iframe.bundle.js"></script><script src="main.f22f1211.iframe.bundle.js"></script></body></html>

docs/index.html

@@ -153,4 +153,4 @@
 
 
 
-            window['DOCS_MODE'] = false;</script><script src="runtime~main.8ac9679e5b3555cd15a8.manager.bundle.js"></script><script src="9.eef9e4cabd109ad744df.manager.bundle.js"></script><script src="main.291306767fc68e9e39cb.manager.bundle.js"></script></body></html>
+            window['DOCS_MODE'] = false;</script><script src="runtime~main.8ac9679e5b3555cd15a8.manager.bundle.js"></script><script src="9.48e29af96ed2f7e02202.manager.bundle.js"></script><script src="main.291306767fc68e9e39cb.manager.bundle.js"></script></body></html>

docs/project.json

@@ -1 +1 @@
-{"generatedAt":1730741930931,"builder":{"name":"webpack5"},"hasCustomBabel":false,"hasCustomWebpack":false,"hasStaticDirs":false,"hasStorybookEslint":false,"refCount":0,"packageManager":{"type":"npm","version":"10.8.3"},"storybookVersion":"6.5.16","language":"typescript","storybookPackages":{"@storybook/builder-webpack5":{"version":"6.5.16"},"@storybook/manager-webpack5":{"version":"6.5.16"},"@storybook/addon-console":{"version":"1.2.3"},"@storybook/react":{"version":"6.5.16"},"@storybook/source-loader":{"version":"6.5.16"},"@storybook/theming":{"version":"6.5.16"},"storybook":{"version":"5.3.22"}},"framework":{"name":"react"},"addons":{"@storybook/addon-knobs":{"version":"6.4.0"},"@storybook/addon-docs":{"version":"6.5.16"},"@storybook/addon-a11y":{"version":"6.5.16"},"@storybook/addon-viewport":{"version":"6.5.16"},"@storybook/addon-actions":{"version":"6.5.16"},"@storybook/addon-essentials":{"version":"6.5.16"},"@storybook/addon-controls":{"version":"6.5.16"}}}
+{"generatedAt":1734543826751,"builder":{"name":"webpack5"},"hasCustomBabel":false,"hasCustomWebpack":false,"hasStaticDirs":false,"hasStorybookEslint":false,"refCount":0,"packageManager":{"type":"npm","version":"10.8.3"},"storybookVersion":"6.5.16","language":"typescript","storybookPackages":{"@storybook/builder-webpack5":{"version":"6.5.16"},"@storybook/manager-webpack5":{"version":"6.5.16"},"@storybook/addon-console":{"version":"1.2.3"},"@storybook/react":{"version":"6.5.16"},"@storybook/source-loader":{"version":"6.5.16"},"@storybook/theming":{"version":"6.5.16"},"storybook":{"version":"5.3.22"}},"framework":{"name":"react"},"addons":{"@storybook/addon-knobs":{"version":"6.4.0"},"@storybook/addon-docs":{"version":"6.5.16"},"@storybook/addon-a11y":{"version":"6.5.16"},"@storybook/addon-viewport":{"version":"6.5.16"},"@storybook/addon-actions":{"version":"6.5.16"},"@storybook/addon-essentials":{"version":"6.5.16"},"@storybook/addon-controls":{"version":"6.5.16"}}}