fix: Updates the markup of some titles (#490)

* Homepage headings

* Headings on announcements page

* Updating search result group title

* Some extra headings

amundsen_application/static/css/_typography-default.scss

@@ -84,12 +84,14 @@ body {
 .title-2 {
   font-size: 16px;
   font-weight: $font-weight-body-bold;
+  line-height: 1.42857;
 }
 
 .title-3 {
   color: $text-secondary;
   font-size: 14px;
   font-weight: $font-weight-body-bold;
+  line-height: 1.42857;
 }
 
 .subtitle-1 {

amundsen_application/static/js/components/AnnouncementPage/index.tsx

@@ -33,7 +33,7 @@ export class AnnouncementPage extends React.Component<AnnouncementPageProps> {
     return (
       <div key={`post:${postIndex}`} className="post-container">
         <div className="post-header">
-          <div className="post-title title-2">{post.title}</div>
+          <h2 className="post-title title-2">{post.title}</h2>
           <div className="body-secondary-3">{post.date}</div>
         </div>
         <div className="post-content">

amundsen_application/static/js/components/HomePage/index.tsx

@@ -45,12 +45,12 @@ export class HomePage extends React.Component<HomePageProps> {
               />
             </div>
             <div className="home-element-container">
-              <div
+              <h2
                 id="browse-tags-header"
                 className="title-1 browse-tags-header"
               >
                 {TAGS_TITLE}
-              </div>
+              </h2>
               <TagsList />
             </div>
             <div className="home-element-container">

amundsen_application/static/js/components/SearchPage/ResourceSelector/tests/index.spec.tsx → amundsen_application/static/js/components/SearchPage/ResourceSelector/index.spec.tsx

@@ -14,7 +14,7 @@ import {
   mapStateToProps,
   ResourceSelector,
   ResourceSelectorProps,
-} from '..';
+} from '.';
 
 jest.mock('config/config-utils', () => ({
   getDisplayNameByResource: jest.fn(() => 'Resource'),

amundsen_application/static/js/components/SearchPage/ResourceSelector/index.tsx

@@ -19,6 +19,8 @@ import {
 } from 'ducks/search/types';
 import { ResourceType } from 'interfaces/Resources';
 
+const RESOURCE_SELECTOR_TITLE = 'Resource';
+
 export interface StateFromProps {
   resource: ResourceType;
   tables: TableSearchResults;
@@ -91,7 +93,7 @@ export class ResourceSelector extends React.Component<ResourceSelectorProps> {
 
     return (
       <>
-        <div className="title-2">Resource</div>
+        <h2 className="title-2">{RESOURCE_SELECTOR_TITLE}</h2>
         {resourceOptions.map((option, index) =>
           this.renderRadioOption(option, index)
         )}

amundsen_application/static/js/components/SearchPage/SearchPanel/styles.scss

@@ -5,7 +5,7 @@
   display: flex;
   flex: 0 0 $search-panel-width;
   flex-direction: column;
-  overflow-y: scroll;
+  overflow-y: auto;
 
   .section {
     padding: 32px 24px 32px 32px;

amundsen_application/static/js/components/SearchPage/constants.ts

@@ -19,6 +19,7 @@ export const SEARCH_SOURCE_NAME = 'search_results';
 export const SEARCH_ERROR_MESSAGE_PREFIX = 'Your search did not match any ';
 export const SEARCH_ERROR_MESSAGE_SUFFIX = ' results';
 
+export const RESOURCE_SELECTOR_TITLE = 'Resource';
 export const DASHBOARD_RESOURCE_TITLE = getDisplayNameByResource(
   ResourceType.dashboard
 );

amundsen_application/static/js/components/common/Bookmark/MyBookmarks/index.tsx

@@ -91,7 +91,7 @@ export class MyBookmarks extends React.Component<MyBookmarksProps> {
 
     return (
       <div className="bookmark-list">
-        <div className="title-1">{BOOKMARK_TITLE}</div>
+        <h2 className="title-1">{BOOKMARK_TITLE}</h2>
         {content}
       </div>
     );

amundsen_application/static/js/components/common/PopularTables/index.spec.tsx

@@ -75,7 +75,7 @@ describe('PopularTables', () => {
     });
 
     it('renders correct label for content', () => {
-      const actual = wrapper.children().find('label').text();
+      const actual = wrapper.children().find('.title-1').text();
       const expected = POPULAR_TABLES_LABEL;
 
       expect(actual).toEqual(expected);

amundsen_application/static/js/components/common/PopularTables/index.tsx

@@ -55,7 +55,7 @@ export class PopularTables extends React.Component<PopularTablesProps> {
     return (
       <>
         <div className="popular-tables-header">
-          <label className="title-1">{POPULAR_TABLES_LABEL}</label>
+          <h2 className="title-1">{POPULAR_TABLES_LABEL}</h2>
           <InfoButton infoText={POPULAR_TABLES_INFO_TEXT} />
         </div>
         {content}

amundsen_application/static/js/components/common/SearchBar/InlineSearchResults/ResultItemList/index.tsx

@@ -40,6 +40,7 @@ class ResultItemList extends React.Component<ResultItemListProps, {}> {
     return results.map((item, index) => {
       const { href, iconClass, subtitle, titleNode, type } = item;
       const id = `inline-resultitem-${this.props.resourceType}:${index}`;
+
       return (
         <ResultItem
           key={id}
@@ -59,12 +60,12 @@ class ResultItemList extends React.Component<ResultItemListProps, {}> {
     const { resourceType, suggestedResults, title } = this.props;
     return (
       <>
-        <div className="section-title title-3">
+        <h3 className="section-title title-3">
           {title}
           {resourceType === ResourceType.dashboard && (
             <Flag text="beta" labelStyle="default" />
           )}
-        </div>
+        </h3>
         <ul className="list-group">
           {this.renderResultItems(suggestedResults)}
         </ul>

amundsen_application/static/js/components/common/SearchBar/constants.ts

 // TODO: Hard-coded text strings should be translatable/customizable
-export const PLACEHOLDER_DEFAULT = 'search for data resources...';
+export const PLACEHOLDER_DEFAULT = 'Search for data resources...';
 export const SEARCH_BUTTON_TEXT = 'Search';
 export const BUTTON_CLOSE_TEXT = 'Close';