refactor: Removing deprecated title-1 class from Amundsen (#730)

Signed-off-by: Marcos Iglesias Valle <golodhros@gmail.com>

amundsen_application/static/.betterer.results

@@ -19,10 +19,7 @@ exports[`strict null compilation`] = {
       [88, 4, 11, "Type \'Element\' is not assignable to type \'null\'.", "3768376622"],
       [91, 4, 11, "Type \'Element[]\' is not assignable to type \'null\'.", "3768376622"]
     ],
-    "js/components/common/BadgeList/index.spec.tsx:3492368698": [
-      [48, 55, 16, "Argument of type \'string | undefined\' is not assignable to parameter of type \'string\'.\\n  Type \'undefined\' is not assignable to type \'string\'.", "340987603"]
-    ],
-    "js/components/common/Bookmark/MyBookmarks/index.tsx:1185364658": [
+    "js/components/common/Bookmark/MyBookmarks/index.tsx:3008297487": [
       [66, 6, 7, "Type \'Element | null\' is not assignable to type \'never\'.\\n  Type \'null\' is not assignable to type \'never\'.", "3716929964"],
       [67, 6, 3, "Type \'string\' is not assignable to type \'never\'.", "193424690"],
       [68, 6, 5, "Type \'string\' is not assignable to type \'never\'.", "183222373"],
@@ -49,11 +46,11 @@ exports[`strict null compilation`] = {
       [96, 4, 22, "Cannot invoke an object which is possibly \'undefined\'.", "2225424112"],
       [111, 6, 22, "Cannot invoke an object which is possibly \'undefined\'.", "2225424112"]
     ],
-    "js/components/common/EntityCard/EntityCardSection/index.tsx:1592385405": [
+    "js/components/common/EntityCard/EntityCardSection/index.tsx:1870704847": [
       [40, 4, 23, "Object is possibly \'null\'.", "1725552512"]
     ],
-    "js/components/common/Flag/index.tsx:2997458704": [
-      [44, 27, 8, "Argument of type \'string | null\' is not assignable to parameter of type \'string\'.\\n  Type \'null\' is not assignable to type \'string\'.", "4036080041"]
+    "js/components/common/Flag/index.tsx:814006609": [
+      [26, 27, 8, "Argument of type \'CaseType | null\' is not assignable to parameter of type \'CaseType\'.\\n  Type \'null\' is not assignable to type \'CaseType\'.", "4036080041"]
     ],
     "js/components/common/OwnerEditor/index.spec.tsx:3994734501": [
       [21, 6, 9, "Type \'null\' is not assignable to type \'boolean | undefined\'.", "1517648899"],
@@ -108,11 +105,11 @@ exports[`strict null compilation`] = {
       [102, 31, 10, "Type \'UpdateMethod.PUT\' is not assignable to type \'never\'.", "3392756765"],
       [102, 61, 7, "Type \'string\' is not assignable to type \'never\'.", "1671693616"]
     ],
-    "js/components/common/Tags/TagsList/index.tsx:3330150315": [
-      [101, 23, 9, "Object is possibly \'undefined\'.", "3803340896"],
+    "js/components/common/Tags/TagsList/index.tsx:4084208491": [
+      [99, 23, 9, "Object is possibly \'undefined\'.", "3803340896"],
       [115, 38, 4, "Type \'Tag[] | undefined\' is not assignable to type \'Tag[]\'.\\n  Type \'undefined\' is not assignable to type \'Tag[]\'.", "2087952548"]
     ],
-    "js/components/common/Tags/index.tsx:575750387": [
+    "js/components/common/Tags/index.tsx:171117907": [
       [67, 49, 13, "Object is possibly \'undefined\'.", "4085240695"],
       [77, 4, 11, "Type \'Tag[]\' is not assignable to type \'never[]\'.\\n  Type \'Tag\' is not assignable to type \'never\'.", "4011456884"],
       [80, 4, 9, "Type \'Tag[]\' is not assignable to type \'never[]\'.", "3803340896"],
@@ -121,10 +118,10 @@ exports[`strict null compilation`] = {
       [93, 4, 11, "Type \'Tag[]\' is not assignable to type \'never[]\'.", "255414113"],
       [98, 4, 9, "Type \'Tag[]\' is not assignable to type \'never[]\'.", "3803340896"]
     ],
-    "js/config/config-utils.ts:1798174672": [
-      [86, 4, 25, "\'style\' is specified more than once, so this usage will be overwritten.", "1214862559"]
+    "js/config/config-utils.ts:3097983516": [
+      [87, 4, 25, "\'style\' is specified more than once, so this usage will be overwritten.", "1214862559"]
     ],
-    "js/config/index.spec.ts:3155903042": [
+    "js/config/index.spec.ts:3696338512": [
       [17, 6, 61, "Object is possibly \'undefined\'.", "1496333578"],
       [51, 6, 61, "Object is possibly \'undefined\'.", "1496333578"]
     ],
@@ -290,7 +287,7 @@ exports[`strict null compilation`] = {
       [72, 13, 7, "Object is possibly \'undefined\'.", "3716929964"],
       [73, 13, 7, "Object is possibly \'undefined\'.", "3716929964"]
     ],
-    "js/pages/SearchPage/SearchFilter/FilterSection/index.tsx:2956683404": [
+    "js/pages/SearchPage/SearchFilter/FilterSection/index.tsx:2128122504": [
       [51, 48, 18, "Type \'CheckboxFilterProperties[] | undefined\' is not assignable to type \'CheckboxFilterProperties[]\'.\\n  Type \'undefined\' is not assignable to type \'CheckboxFilterProperties[]\'.", "12656471"]
     ],
     "js/pages/SearchPage/SearchFilter/index.spec.tsx:3772392704": [

amundsen_application/static/css/_typography-default.scss

@@ -274,7 +274,6 @@ body {
   font-weight: $font-weight-body-regular;
 }
 
-.title-1,
 .title-2,
 .title-3,
 .subtitle-1,
@@ -290,12 +289,6 @@ body {
   font-family: $font-family-body;
 }
 
-.title-1 {
-  font-size: 20px;
-  font-weight: $font-weight-body-bold;
-  line-height: 28px;
-}
-
 .title-2 {
   font-size: 16px;
   font-weight: $font-weight-body-bold;

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

@@ -259,7 +259,11 @@ describe('MyBookmarks', () => {
     });
 
     it('renders the correct title', () => {
-      expect(wrapper.find('.title-1').text()).toEqual(BOOKMARK_TITLE);
+      const { wrapper } = setup();
+      const expected = BOOKMARK_TITLE;
+      const actual = wrapper.find('.bookmark-list-header').text();
+
+      expect(actual).toEqual(expected);
     });
 
     it('renders a TabsComponent with correct props', () => {

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

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

amundsen_application/static/js/components/common/Bookmark/MyBookmarks/styles.scss

@@ -2,10 +2,17 @@
 // SPDX-License-Identifier: Apache-2.0
 
 @import 'variables';
+@import 'typography';
 
 .bookmark-list {
   margin: 32px 0;
 
+  .bookmark-list-header {
+    @extend %text-title-w1;
+
+    margin-bottom: $spacer-1;
+  }
+
   .tabs-component {
     .nav.nav-tabs {
       margin: 0;

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

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

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

@@ -56,13 +56,13 @@ export class PopularTables extends React.Component<PopularTablesProps> {
     }
 
     return (
-      <>
+      <article className="popular-table-list">
         <div className="popular-tables-header">
-          <h2 className="title-1">{POPULAR_TABLES_LABEL}</h2>
+          <h2 className="popular-tables-header-text">{POPULAR_TABLES_LABEL}</h2>
           <InfoButton infoText={POPULAR_TABLES_INFO_TEXT} />
         </div>
         {content}
-      </>
+      </article>
     );
   }
 }

amundsen_application/static/js/components/common/PopularTables/styles.scss

@@ -2,8 +2,20 @@
 // SPDX-License-Identifier: Apache-2.0
 
 @import 'variables';
+@import 'typography';
 
-.popular-tables-header {
-  display: flex;
-  flex-direction: row;
+.popular-table-list {
+  .popular-tables-header {
+    display: flex;
+    flex-direction: row;
+    margin-bottom: $spacer-2;
+  }
+
+  .popular-tables-header-text {
+    @extend %text-title-w1;
+  }
+
+  .list-group {
+    margin-top: 0;
+  }
 }

amundsen_application/static/js/components/common/Tags/TagsList/index.spec.tsx

@@ -72,7 +72,8 @@ describe('TagsList', () => {
     it('should render TagsListTitle', () => {
       wrapper.children();
       const expected = 1;
-      const actual = wrapper.childAt(0).shallow().find('.section-title').length;
+      const actual = wrapper.childAt(0).shallow().find('.tag-list-title')
+        .length;
 
       expect(actual).toEqual(expected);
     });

amundsen_application/static/js/components/common/Tags/TagsList/index.tsx

@@ -41,14 +41,6 @@ interface TagsListBlockProps {
   tags: Tag[];
 }
 
-const TagsListTitle: React.FC<TagsListTitleProps> = ({
-  titleText,
-}: TagsListTitleProps) => (
-  <h1 className="title-1 section-title" id="browse-header">
-    {titleText}
-  </h1>
-);
-
 const TagsListLabel: React.FC<TagsListTitleProps> = ({
   titleText,
 }: TagsListTitleProps) => (
@@ -78,9 +70,15 @@ const ShortTagsList: React.FC<TagsListProps> = ({
   return (
     <div className="short-tag-list">
       {!hasCuratedTags && hasPopularTags && (
-        <TagsListTitle titleText={POPULAR_TAGS_TITLE} />
+        <h2 className="tag-list-title" id="browse-header">
+          {POPULAR_TAGS_TITLE}
+        </h2>
+      )}
+      {hasCuratedTags && (
+        <h2 className="tag-list-title" id="browse-header">
+          {CURATED_TAGS_TITLE}
+        </h2>
       )}
-      {hasCuratedTags && <TagsListTitle titleText={CURATED_TAGS_TITLE} />}
       {!hasCuratedTags && hasPopularTags && (
         <TagsListBlock tags={popularTags} />
       )}
@@ -102,7 +100,9 @@ const LongTagsList: React.FC<TagsListProps> = ({
   const hasOtherTags = otherTags.length > 0;
   return (
     <div className="full-tag-list">
-      <TagsListTitle titleText={BROWSE_TAGS_TITLE} />
+      <h1 className="tag-list-title" id="browse-header">
+        {BROWSE_TAGS_TITLE}
+      </h1>
       <hr className="header-hr" />
       {!hasCuratedTags && hasPopularTags && (
         <TagsListLabel titleText={POPULAR_TAGS_TITLE} />

amundsen_application/static/js/components/common/Tags/TagsList/styles.scss

@@ -2,6 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 @import 'variables';
+@import 'typography';
 
 $browse-tags-link-font-size: 16px;
 
@@ -9,7 +10,9 @@ $browse-tags-link-font-size: 16px;
   border: 2px solid $brand-color-4;
 }
 
-.section-title {
+.tag-list-title {
+  @extend %text-title-w1;
+
   margin-bottom: $spacer-2;
 }
 

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

@@ -48,7 +48,7 @@ export class TagsListContainer extends React.Component<TagsListContainerProps> {
       shortTagsList,
     } = this.props;
     return (
-      <span className="tag-list">
+      <article className="tag-list">
         <TagsList
           curatedTags={curatedTags}
           popularTags={popularTags}
@@ -56,7 +56,7 @@ export class TagsListContainer extends React.Component<TagsListContainerProps> {
           isLoading={isLoading}
           shortTagsList={shortTagsList}
         />
-      </span>
+      </article>
     );
   }
 }

amundsen_application/static/js/stories/typography.story.tsx

@@ -69,7 +69,6 @@ export const Typography = () => {
           <h5>Raw h5</h5>
           <h6>Raw h6</h6>
           <hr />
-          <h1 className="title-1">Heading with .title-1</h1>
           <h1 className="title-2">Heading with .title-2</h1>
           <h1 className="title-3">Heading with .title-3</h1>
           <h1 className="subtitle-1">Heading with .subtitle-1</h1>