Ftr/10654 new section header component

.eslintrc

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

.storybook/stories/section-title.stories.mdx

@@ -1,21 +1,21 @@
 import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
 
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import SectionTitle from '../../components/SectionTitle';
+import SectionWrapper from '../../components/SectionWrapper';
 import ComingSoon from '../../components/messages/ComingSoon';
 import { ExampleTooltip } from '../misc';
 
 <Meta
     title="Section Title"
-    component={SectionTitle} />
+    component={SectionWrapper} />
 
 ## Props
-<ArgsTable of={SectionTitle} />
+<ArgsTable of={SectionWrapper} />
 
 ## Collapsible Section
 <Canvas>
     <Story name='Collapsible Section'>
-        <SectionTitle
+        <SectionWrapper
             title="Award"
             isCollapsible
             overLine="Award Spending"
@@ -30,14 +30,14 @@ import { ExampleTooltip } from '../misc';
             }}
             description={<span className="usda-section-title__desc">This section covers <strong>Award Spending</strong></span>}>
             <ComingSoon />
-        </SectionTitle>
+        </SectionWrapper>
     </Story>
 </Canvas>
 
 ## Always Expanded
 <Canvas>
     <Story name='Always Expanded'>
-        <SectionTitle
+        <SectionWrapper
             title="Award"
             overLine="Award Spending"
             icon ={<FontAwesomeIcon icon="map-marker" size="3x" />}
@@ -51,7 +51,7 @@ import { ExampleTooltip } from '../misc';
             }}
             description={<span className="usda-section-title__desc">This section covers <strong>Award Spending</strong></span>}>
             <ComingSoon />
-        </SectionTitle>
+        </SectionWrapper>
     </Story>
 </Canvas>
 

README.md

@@ -16,11 +16,11 @@ Import our components like this:
     import { Table } from 'data-transparency-ui';
 ```
 
-To see our exported components, [see our type definition file.](https://github.com/fedspendingtransparency/data-transparency-ui/blob/master/index.d.ts).
+To see our exported components, [see our type definition file](https://github.com/fedspendingtransparency/data-transparency-ui/blob/master/index.d.ts).
 
 The purpose of this project is to give visibility into the patterns built into the 
 [Broker](https://broker.usaspending.gov/) and [USASpending](https://usaspending.gov/) UI and their corresponding technical implementations.
-These implementations, referred to as UI Components, exist outside of the USASpending
+These implementations, referred to as UI Components, exist outside the USASpending
 and Broker codebase.
 
 With this visibility & independence, the following benefits arise:
@@ -35,7 +35,7 @@ in a single place and then see those changes propagated throughout the website i
 - It is advised that consumers of this project add `"preinstall": "npx [email protected]"` to the package.json of the project that uses this library. Users must also add the appropriate `"resolutions"` section to their package.json as well. Doing the aforementioned steps will help resolve any security vulnerabilities from `npm audit`
 ## UI/UX & Development Collaboration Process
 
-The below info-graphic displays how the UI/UX and Development Teams will iteratively work together to identify new components for this library.
+The below infographic displays how the UI/UX and Development Teams will iteratively work together to identify new components for this library.
 
 <img src={infoGraphic} alt="Data Transparency USASpending.gov logo" />
 
@@ -73,8 +73,14 @@ To test components locally in the context it will be used either use `npm link`:
 2. Change "main": "dist/index.js" in the package.json file to "main": "index.js"
 3. Run npm link
 4. Run npm link path/to/your/<consumer-context>/node_modules/react (example npm link ../<consumer-context>/node_modules/react; to integrate with usaspending.gov use `npm link ../usaspending-website/node_modules/react`)
-5. Navigate to the consumer context directory (ie. for usaspending.gov the consumer context directory is "usaspending-website")
-6. Run npm link data-transparency-ui
+5. Navigate to the consumer context directory (i.e. for usaspending.gov the consumer context directory is "usaspending-website")
+6. Run `npm link data-transparency-ui`
+7. NOTE: After work is finished with the linked consumer context, it will be necessary to then unlink this library by doing the following:
+   1. Navigate to the consumer context directory again.
+   2. Run `npm unlink --no-save data-transparency-ui`
+   3. Navigate to the `data-transparency-ui/` root.
+   4. Run npm unlink path/to/your/<consumer-context/node-modules/react (example npm unlink ../<consumer-context>/node_modules/react; to integrate with usaspending.gov use `npm unlink ../usaspending-website/node_modules/react`).
+   5. As an additional precaution, delete & reinstall the node modules in the consumer context and clear the cache to ensure a clean consumer context.
 
 OR use `npm pack`:
 

components/SectionHeader.jsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import TooltipWrapper from './infoTooltip/TooltipWrapper';
+
+function SectionHeader({
+    icon, title, overLine, description, titleTooltip, descTooltip
+}) {
+    return (
+        <div className="usda-section-title__sectionHeader">
+            {icon && React.cloneElement(icon, { className: 'usda-section-title__title-icon' })}
+            <div className="usda-section-title__header">
+                {overLine && <strong className="usda-section-title__overline">{overLine}</strong>}
+                <div className="usda-section-title__title">
+                    <h3>
+                        {title}
+                    </h3>
+                    {titleTooltip.component && (
+                        <TooltipWrapper
+                            tooltipComponent={titleTooltip.component}
+                            icon="info"
+                            className={`${overLine ? 'has-overline' : ''}`}
+                            {...titleTooltip.props} />
+                    )}
+                </div>
+            </div>
+            {description && React.cloneElement(description, { className: 'usda-section-title__desc has-overline' })}
+            {descTooltip.component && (
+                <TooltipWrapper
+                    tooltipComponent={descTooltip.component}
+                    icon="info"
+                    tooltipPosition="left"
+                    {...descTooltip.props} />
+            )}
+        </div>
+    );
+}
+
+SectionHeader.propTypes = {
+    icon: PropTypes.element.isRequired,
+    title: PropTypes.string.isRequired,
+    overLine: PropTypes.string,
+    description: PropTypes.element,
+    titleTooltip: PropTypes.shape({
+        component: PropTypes.element,
+        props: PropTypes.object
+    }),
+    descTooltip: PropTypes.shape({
+        component: PropTypes.element,
+        props: PropTypes.object
+    })
+};
+
+export default SectionHeader;

components/SectionTitle.jsx → components/SectionWrapper.jsx

@@ -1,19 +1,19 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import TooltipWrapper from './infoTooltip/TooltipWrapper';
+import SectionHeader from './SectionHeader';
 import ComingSoon from './messages/ComingSoon';
 import { createOnKeyDownHandler } from '../helpers/keyboardEventsHelper';
 
-require('../styles/components/_sectionTitle.scss');
+require('../styles/components/_sectionWrapper.scss');
 
 const defaultControlledProps = {
     isControlled: false,
     toggleExpand: () => { },
     isExpanded: false
 };
 
-function SectionTitle({
+function SectionWrapper({
     title,
     icon,
     children,
@@ -48,30 +48,13 @@ function SectionTitle({
     return (
         <section id={id} className={`usda-section__container${classNames ? ` ${classNames}` : ''}`}>
             <div className="usda-section-title__container">
-                {icon && React.cloneElement(icon, { className: 'usda-section-title__title-icon' })}
-                <div className="usda-section-title__header">
-                    {overLine && <strong className="usda-section-title__overline">{overLine}</strong>}
-                    <div className="usda-section-title__title">
-                        <h3>
-                            {title}
-                        </h3>
-                        {titleTooltip.component && (
-                            <TooltipWrapper
-                                tooltipComponent={titleTooltip.component}
-                                icon="info"
-                                className={`${overLine ? 'has-overline' : ''}`}
-                                {...titleTooltip.props} />
-                        )}
-                    </div>
-                </div>
-                {description && React.cloneElement(description, { className: 'usda-section-title__desc has-overline' })}
-                {descTooltip.component && (
-                    <TooltipWrapper
-                        tooltipComponent={descTooltip.component}
-                        icon="info"
-                        tooltipPosition="left"
-                        {...descTooltip.props} />
-                )}
+                <SectionHeader
+                    icon={icon}
+                    title={title}
+                    overLine={overLine}
+                    description={description}
+                    titleTooltip={titleTooltip}
+                    descTooltip={descTooltip} />
                 {isCollapsible && (
                     <FontAwesomeIcon
                         tabIndex={0}
@@ -89,7 +72,7 @@ function SectionTitle({
     );
 }
 
-SectionTitle.propTypes = {
+SectionWrapper.propTypes = {
     icon: PropTypes.element.isRequired,
     children: PropTypes.element.isRequired,
     title: PropTypes.string.isRequired,
@@ -115,4 +98,4 @@ SectionTitle.propTypes = {
     id: PropTypes.string
 };
 
-export default SectionTitle;
+export default SectionWrapper;

docs/iframe.html

@@ -338,7 +338,7 @@
         /* eslint-enable object-shorthand */
       })
     );
-  };</script><link href="main.15801be7c412174d31bb.css" rel="stylesheet"><style>#root[hidden],
+  };</script><link href="main.1b7e424f4bed03d05b5d.css" rel="stylesheet"><style>#root[hidden],
       #docs-root[hidden] {
         display: none !important;
       }</style></head><body><div class="sb-preparing-story sb-wrapper"><div class="sb-loader"></div></div><div class="sb-preparing-docs sb-wrapper"><div class="sb-previewBlock"><div class="sb-previewBlock_header"><div class="sb-previewBlock_icon"></div><div class="sb-previewBlock_icon"></div><div class="sb-previewBlock_icon"></div><div class="sb-previewBlock_icon"></div></div><div class="sb-previewBlock_body"><div class="sb-loader"></div></div></div><table aria-hidden="true" class="sb-argstableBlock"><thead class="sb-argstableBlock-head"><tr><th><span>Name</span></th><th><span>Description</span></th><th><span>Default</span></th><th><span>Control</span></th></tr></thead><tbody class="sb-argstableBlock-body"><tr><td><span>propertyName</span><span title="Required">*</span></td><td><div><span>This is a short description</span></div><div class="sb-argstableBlock-summary"><div><span class="sb-argstableBlock-code">summary</span></div></div></td><td><div><span class="sb-argstableBlock-code">defaultValue</span></div></td><td><button>Set string</button></td></tr><tr><td><span>propertyName</span><span>*</span></td><td><div><span>This is a short description</span></div><div class="sb-argstableBlock-summary"><div><span class="sb-argstableBlock-code">summary</span></div></div></td><td><div><span class="sb-argstableBlock-code">defaultValue</span></div></td><td><button>Set string</button></td></tr><tr><td><span>propertyName</span><span>*</span></td><td><div><span>This is a short description</span></div><div class="sb-argstableBlock-summary"><div><span class="sb-argstableBlock-code">summary</span></div></div></td><td><div><span class="sb-argstableBlock-code">defaultValue</span></div></td><td><button>Set string</button></td></tr></tbody></table></div><div class="sb-nopreview sb-wrapper"><div class="sb-nopreview_main"><h1 class="sb-nopreview_heading sb-heading">No Preview</h1><p>Sorry, but you either have no stories or none are selected somehow.</p><ul><li>Please check the Storybook config.</li><li>Try reloading the page.</li></ul><p>If the problem persists, check the browser console, or the terminal you've run Storybook from.</p></div></div><div class="sb-errordisplay sb-wrapper"><pre id="error-message" class="sb-heading"></pre><pre class="sb-errordisplay_code"><code id="error-stack"></code></pre></div><div id="root"></div><div id="docs-root"></div><script>window['CONFIG_TYPE'] = "PRODUCTION";
@@ -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="211.2c897004.iframe.bundle.js"></script><script src="main.cca7be92.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.868a37cc.iframe.bundle.js"></script><script src="211.e142e303.iframe.bundle.js"></script><script src="main.f60891ca.iframe.bundle.js"></script></body></html>