Unverified Commit 0268fa60 authored by Marcos Iglesias's avatar Marcos Iglesias Committed by GitHub

chore: Refactors away the .h1, .h2 and .h3 text classes (#602)

Signed-off-by: 's avatarMarcos Iglesias Valle <golodhros@gmail.com>
parent 6e6472d7
...@@ -24,7 +24,7 @@ exports[`strict null compilation`] = { ...@@ -24,7 +24,7 @@ exports[`strict null compilation`] = {
"js/components/ProfilePage/index.spec.tsx:4086464143": [ "js/components/ProfilePage/index.spec.tsx:4086464143": [
[41, 6, 4, "Argument of type \'null\' is not assignable to parameter of type \'Partial<Location<{} | null | undefined>>\'.", "2087897566"] [41, 6, 4, "Argument of type \'null\' is not assignable to parameter of type \'Partial<Location<{} | null | undefined>>\'.", "2087897566"]
], ],
"js/components/ProfilePage/index.tsx:2593015022": [ "js/components/ProfilePage/index.tsx:1096157973": [
[178, 6, 7, "Type \'Element\' is not assignable to type \'never\'.", "3716929964"], [178, 6, 7, "Type \'Element\' is not assignable to type \'never\'.", "3716929964"],
[179, 6, 3, "Type \'string\' is not assignable to type \'never\'.", "193424690"], [179, 6, 3, "Type \'string\' is not assignable to type \'never\'.", "193424690"],
[180, 6, 5, "Type \'string\' is not assignable to type \'never\'.", "183222373"], [180, 6, 5, "Type \'string\' is not assignable to type \'never\'.", "183222373"],
...@@ -104,19 +104,19 @@ exports[`strict null compilation`] = { ...@@ -104,19 +104,19 @@ exports[`strict null compilation`] = {
"js/components/TableDetail/index.spec.tsx:2169788066": [ "js/components/TableDetail/index.spec.tsx:2169788066": [
[32, 4, 8, "Argument of type \'Partial<Location<{} | null | undefined>> | undefined\' is not assignable to parameter of type \'Partial<Location<{} | null | undefined>>\'.\\n Type \'undefined\' is not assignable to type \'Partial<Location<{} | null | undefined>>\'.", "2700611480"] [32, 4, 8, "Argument of type \'Partial<Location<{} | null | undefined>> | undefined\' is not assignable to parameter of type \'Partial<Location<{} | null | undefined>>\'.\\n Type \'undefined\' is not assignable to type \'Partial<Location<{} | null | undefined>>\'.", "2700611480"]
], ],
"js/components/TableDetail/index.tsx:1272928301": [ "js/components/TableDetail/index.tsx:173712209": [
[153, 10, 13, "Type \'null\' is not assignable to type \'((newValue: string, onSuccess?: (() => any) | undefined, onFailure?: (() => any) | undefined) => void) | undefined\'.", "67794331"], [152, 10, 13, "Type \'null\' is not assignable to type \'((newValue: string, onSuccess?: (() => any) | undefined, onFailure?: (() => any) | undefined) => void) | undefined\'.", "67794331"],
[164, 6, 7, "Type \'Element\' is not assignable to type \'never\'.", "3716929964"], [163, 6, 7, "Type \'Element\' is not assignable to type \'never\'.", "3716929964"],
[171, 6, 3, "Type \'string\' is not assignable to type \'never\'.", "193424690"], [170, 6, 3, "Type \'string\' is not assignable to type \'never\'.", "193424690"],
[172, 6, 5, "Type \'string\' is not assignable to type \'never\'.", "183222373"], [171, 6, 5, "Type \'string\' is not assignable to type \'never\'.", "183222373"],
[182, 8, 7, "Type \'Element\' is not assignable to type \'never\'.", "3716929964"], [181, 8, 7, "Type \'Element\' is not assignable to type \'never\'.", "3716929964"],
[183, 11, 26, "Type \'{ itemsPerPage: number; source: string; }\' is missing the following properties from type \'Readonly<Pick<TableDashboardResourceListProps, \\"source\\" | \\"dashboards\\" | \\"isLoading\\" | \\"errorText\\" | \\"itemsPerPage\\"> & OwnProps>\': dashboards, isLoading, errorText", "2224258167"], [182, 11, 26, "Type \'{ itemsPerPage: number; source: string; }\' is missing the following properties from type \'Readonly<Pick<TableDashboardResourceListProps, \\"source\\" | \\"dashboards\\" | \\"isLoading\\" | \\"errorText\\" | \\"itemsPerPage\\"> & OwnProps>\': dashboards, isLoading, errorText", "2224258167"],
[188, 8, 3, "Type \'string\' is not assignable to type \'never\'.", "193424690"], [187, 8, 3, "Type \'string\' is not assignable to type \'never\'.", "193424690"],
[189, 8, 5, "Type \'string | Element\' is not assignable to type \'never\'.\\n Type \'string\' is not assignable to type \'never\'.", "183222373"], [188, 8, 5, "Type \'string | Element\' is not assignable to type \'never\'.\\n Type \'string\' is not assignable to type \'never\'.", "183222373"],
[261, 16, 7, "Type \'string | null\' is not assignable to type \'string | undefined\'.\\n Type \'null\' is not assignable to type \'string | undefined\'.", "3817619378"], [260, 16, 7, "Type \'string | null\' is not assignable to type \'string | undefined\'.\\n Type \'null\' is not assignable to type \'string | undefined\'.", "3817619378"],
[303, 20, 35, "Argument of type \'ProgrammaticDescription[] | undefined\' is not assignable to parameter of type \'ProgrammaticDescription[]\'.\\n Type \'undefined\' is not assignable to type \'ProgrammaticDescription[]\'.", "4249007202"], [302, 20, 35, "Argument of type \'ProgrammaticDescription[] | undefined\' is not assignable to parameter of type \'ProgrammaticDescription[]\'.\\n Type \'undefined\' is not assignable to type \'ProgrammaticDescription[]\'.", "4249007202"],
[317, 20, 36, "Argument of type \'ProgrammaticDescription[] | undefined\' is not assignable to parameter of type \'ProgrammaticDescription[]\'.\\n Type \'undefined\' is not assignable to type \'ProgrammaticDescription[]\'.", "2770872537"], [316, 20, 36, "Argument of type \'ProgrammaticDescription[] | undefined\' is not assignable to parameter of type \'ProgrammaticDescription[]\'.\\n Type \'undefined\' is not assignable to type \'ProgrammaticDescription[]\'.", "2770872537"],
[322, 16, 36, "Argument of type \'ProgrammaticDescription[] | undefined\' is not assignable to parameter of type \'ProgrammaticDescription[]\'.\\n Type \'undefined\' is not assignable to type \'ProgrammaticDescription[]\'.", "2776557981"] [321, 16, 36, "Argument of type \'ProgrammaticDescription[] | undefined\' is not assignable to parameter of type \'ProgrammaticDescription[]\'.\\n Type \'undefined\' is not assignable to type \'ProgrammaticDescription[]\'.", "2776557981"]
], ],
"js/components/common/Announcements/AnnouncementsList/index.spec.tsx:1710887993": [ "js/components/common/Announcements/AnnouncementsList/index.spec.tsx:1710887993": [
[95, 23, 124, "Object is possibly \'null\'.", "4248337497"] [95, 23, 124, "Object is possibly \'null\'.", "4248337497"]
...@@ -199,13 +199,13 @@ exports[`strict null compilation`] = { ...@@ -199,13 +199,13 @@ exports[`strict null compilation`] = {
"js/components/common/SearchBar/InlineSearchResults/tests/index.spec.tsx:2567444475": [ "js/components/common/SearchBar/InlineSearchResults/tests/index.spec.tsx:2567444475": [
[51, 13, 56, "Conversion of type \'{ page_index: number; results: { display_name: string; email: string; employee_type: null; first_name: string; full_name: string; github_username: string; is_active: boolean; last_name: string; ... 7 more ...; user_id: string; }[]; total_results: number; }\' to type \'SearchResults<UserResource>\' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to \'unknown\' first.\\n Types of property \'results\' are incompatible.\\n Type \'{ display_name: string; email: string; employee_type: null; first_name: string; full_name: string; github_username: string; is_active: boolean; last_name: string; manager_email: string; manager_fullname: string; ... 5 more ...; user_id: string; }[]\' is not comparable to type \'UserResource[]\'.\\n Type \'{ display_name: string; email: string; employee_type: null; first_name: string; full_name: string; github_username: string; is_active: boolean; last_name: string; manager_email: string; manager_fullname: string; ... 5 more ...; user_id: string; }\' is not comparable to type \'UserResource\'.\\n Types of property \'employee_type\' are incompatible.\\n Type \'null\' is not comparable to type \'string\'.", "3811500358"] [51, 13, 56, "Conversion of type \'{ page_index: number; results: { display_name: string; email: string; employee_type: null; first_name: string; full_name: string; github_username: string; is_active: boolean; last_name: string; ... 7 more ...; user_id: string; }[]; total_results: number; }\' to type \'SearchResults<UserResource>\' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to \'unknown\' first.\\n Types of property \'results\' are incompatible.\\n Type \'{ display_name: string; email: string; employee_type: null; first_name: string; full_name: string; github_username: string; is_active: boolean; last_name: string; manager_email: string; manager_fullname: string; ... 5 more ...; user_id: string; }[]\' is not comparable to type \'UserResource[]\'.\\n Type \'{ display_name: string; email: string; employee_type: null; first_name: string; full_name: string; github_username: string; is_active: boolean; last_name: string; manager_email: string; manager_fullname: string; ... 5 more ...; user_id: string; }\' is not comparable to type \'UserResource\'.\\n Types of property \'employee_type\' are incompatible.\\n Type \'null\' is not comparable to type \'string\'.", "3811500358"]
], ],
"js/components/common/SearchBar/index.spec.tsx:2228201111": [ "js/components/common/SearchBar/index.spec.tsx:2504836695": [
[30, 54, 8, "Argument of type \'Partial<Location<{} | null | undefined>> | undefined\' is not assignable to parameter of type \'Partial<Location<{} | null | undefined>>\'.\\n Type \'undefined\' is not assignable to type \'Partial<Location<{} | null | undefined>>\'.", "2700611480"], [30, 54, 8, "Argument of type \'Partial<Location<{} | null | undefined>> | undefined\' is not assignable to parameter of type \'Partial<Location<{} | null | undefined>>\'.\\n Type \'undefined\' is not assignable to type \'Partial<Location<{} | null | undefined>>\'.", "2700611480"],
[403, 30, 4, "Argument of type \'null\' is not assignable to parameter of type \'Partial<SearchBarProps> | undefined\'.", "2087897566"] [403, 30, 4, "Argument of type \'null\' is not assignable to parameter of type \'Partial<SearchBarProps> | undefined\'.", "2087897566"]
], ],
"js/components/common/SearchBar/index.tsx:280133100": [ "js/components/common/SearchBar/index.tsx:4158354159": [
[253, 6, 11, "No overload matches this call.\\n The last overload gave the following error.\\n Type \'(() => SubmitSearchRequest) | null\' is not assignable to type \'ActionCreator<any>\'.\\n Type \'null\' is not assignable to type \'ActionCreator<any>\'.", "2296208050"], [255, 6, 11, "No overload matches this call.\\n The last overload gave the following error.\\n Type \'(() => SubmitSearchRequest) | null\' is not assignable to type \'ActionCreator<any>\'.\\n Type \'null\' is not assignable to type \'ActionCreator<any>\'.", "2296208050"],
[268, 4, 18, "No overload matches this call.\\n The last overload gave the following error.\\n Argument of type \'(dispatch: any, ownProps: any) => ActionCreator<unknown>\' is not assignable to parameter of type \'DispatchFromProps\'.\\n Type \'(dispatch: any, ownProps: any) => ActionCreator<unknown>\' is missing the following properties from type \'DispatchFromProps\': submitSearch, onInputChange, onSelectInlineResult", "2926224796"] [270, 4, 18, "No overload matches this call.\\n The last overload gave the following error.\\n Argument of type \'(dispatch: any, ownProps: any) => ActionCreator<unknown>\' is not assignable to parameter of type \'DispatchFromProps\'.\\n Type \'(dispatch: any, ownProps: any) => ActionCreator<unknown>\' is missing the following properties from type \'DispatchFromProps\': submitSearch, onInputChange, onSelectInlineResult", "2926224796"]
], ],
"js/components/common/Tags/TagInput/index.tsx:3754832290": [ "js/components/common/Tags/TagInput/index.tsx:3754832290": [
[63, 22, 6, "Type \'undefined\' is not assignable to type \'GetAllTagsRequest\'.", "1979467425"], [63, 22, 6, "Type \'undefined\' is not assignable to type \'GetAllTagsRequest\'.", "1979467425"],
......
...@@ -29,9 +29,6 @@ $screen-lg-container: 1440px; ...@@ -29,9 +29,6 @@ $screen-lg-container: 1440px;
.header-title-text { .header-title-text {
display: inline-block; display: inline-block;
// Better align the header-title-text
// (84px header height - 32px vertical padding - 2px border - 20px subtitle line-height) = 30px
line-height: 30px;
max-width: calc(100% - 100px); max-width: calc(100% - 100px);
} }
} }
......
...@@ -204,30 +204,24 @@ h6 { ...@@ -204,30 +204,24 @@ h6 {
h1, h1,
h2, h2,
h3, h3 {
.h1,
.h2,
.h3 {
color: $text-primary; color: $text-primary;
font-family: $font-family-header; font-family: $font-family-header;
} }
h1, h1 {
.h1 {
font-size: 36px; font-size: 36px;
font-weight: $font-weight-header-regular; font-weight: $font-weight-header-regular;
line-height: 34px; line-height: 34px;
} }
h2, h2 {
.h2 {
font-size: 26px; font-size: 26px;
font-weight: $font-weight-header-bold; font-weight: $font-weight-header-bold;
line-height: 34px; line-height: 34px;
} }
h3, h3 {
.h3 {
font-size: 20px; font-size: 20px;
font-weight: $font-weight-header-bold; font-weight: $font-weight-header-bold;
line-height: 34px; line-height: 34px;
......
...@@ -64,7 +64,7 @@ export class AnnouncementPage extends React.Component<AnnouncementPageProps> { ...@@ -64,7 +64,7 @@ export class AnnouncementPage extends React.Component<AnnouncementPageProps> {
<main className="container announcement-container"> <main className="container announcement-container">
<div className="row"> <div className="row">
<div className="col-xs-12 col-md-10 col-md-offset-1"> <div className="col-xs-12 col-md-10 col-md-offset-1">
<h1 id="announcement-header" className="h3"> <h1 id="announcement-header" className="announcement-header">
{ANNOUNCEMENTS_HEADER_TEXT} {ANNOUNCEMENTS_HEADER_TEXT}
</h1> </h1>
<hr /> <hr />
......
// Copyright Contributors to the Amundsen project. // Copyright Contributors to the Amundsen project.
// SPDX-License-Identifier: Apache-2.0 // SPDX-License-Identifier: Apache-2.0
@import 'variables'; @import 'variables';
@import 'typography';
.announcement-container hr { .announcement-container hr {
border: 2px solid $brand-color-4; border: 2px solid $brand-color-4;
} }
.announcement-header {
@extend %text-title-w1;
}
.post-container { .post-container {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
......
...@@ -184,7 +184,7 @@ export class DashboardPage extends React.Component< ...@@ -184,7 +184,7 @@ export class DashboardPage extends React.Component<
/> />
</div> </div>
<div className="header-section header-title"> <div className="header-section header-title">
<h1 className="h3 header-title-text truncated">{dashboard.name}</h1> <h1 className="header-title-text truncated">{dashboard.name}</h1>
<BookmarkIcon <BookmarkIcon
bookmarkKey={dashboard.uri} bookmarkKey={dashboard.uri}
resourceType={ResourceType.dashboard} resourceType={ResourceType.dashboard}
......
// Copyright Contributors to the Amundsen project. // Copyright Contributors to the Amundsen project.
// SPDX-License-Identifier: Apache-2.0 // SPDX-License-Identifier: Apache-2.0
@import 'variables'; @import 'variables';
@import 'typography-default'; @import 'typography';
.dashboard-page { .dashboard-page {
.header-section { .header-section {
...@@ -11,6 +10,10 @@ ...@@ -11,6 +10,10 @@
} }
} }
.header-title-text {
@extend %text-headline-w2;
}
.edit-link { .edit-link {
text-decoration: none; text-decoration: none;
} }
...@@ -19,7 +22,7 @@ ...@@ -19,7 +22,7 @@
margin-top: $spacer-1; margin-top: $spacer-1;
.status { .status {
@extend %text-body-w2; @extend %text-body-w2;
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
} }
......
...@@ -214,7 +214,7 @@ export class ProfilePage extends React.Component< ...@@ -214,7 +214,7 @@ export class ProfilePage extends React.Component<
); );
} else { } else {
userName = ( userName = (
<h1 className="h3 header-title-text truncated">{user.display_name}</h1> <h1 className="header-title-text truncated">{user.display_name}</h1>
); );
} }
......
...@@ -2,6 +2,7 @@ ...@@ -2,6 +2,7 @@
// SPDX-License-Identifier: Apache-2.0 // SPDX-License-Identifier: Apache-2.0
@import 'variables'; @import 'variables';
@import 'typography';
$shimmer-loader-circle-size: 40px; $shimmer-loader-circle-size: 40px;
$shimmering-line-height: 16px; $shimmering-line-height: 16px;
...@@ -31,6 +32,10 @@ $shimmering-link-width: 100px; ...@@ -31,6 +32,10 @@ $shimmering-link-width: 100px;
margin-bottom: $spacer-3; margin-bottom: $spacer-3;
} }
.header-title-text {
@extend %text-headline-w2;
}
.shimmering-circle { .shimmering-circle {
height: $shimmer-loader-circle-size; height: $shimmer-loader-circle-size;
width: $shimmer-loader-circle-size; width: $shimmer-loader-circle-size;
......
...@@ -10,7 +10,6 @@ import { RouteComponentProps } from 'react-router'; ...@@ -10,7 +10,6 @@ import { RouteComponentProps } from 'react-router';
import { GlobalState } from 'ducks/rootReducer'; import { GlobalState } from 'ducks/rootReducer';
import { getTableData } from 'ducks/tableMetadata/reducer'; import { getTableData } from 'ducks/tableMetadata/reducer';
import { GetTableDataRequest } from 'ducks/tableMetadata/types'; import { GetTableDataRequest } from 'ducks/tableMetadata/types';
import { BadgeStyle } from 'config/config-types';
import { import {
getMaxLength, getMaxLength,
...@@ -226,7 +225,7 @@ export class TableDetail extends React.Component< ...@@ -226,7 +225,7 @@ export class TableDetail extends React.Component<
/> />
</div> </div>
<div className="header-section header-title"> <div className="header-section header-title">
<h1 className="h3 header-title-text truncated"> <h1 className="header-title-text truncated">
{this.getDisplayName()} {this.getDisplayName()}
</h1> </h1>
<BookmarkIcon <BookmarkIcon
......
...@@ -2,6 +2,7 @@ ...@@ -2,6 +2,7 @@
// SPDX-License-Identifier: Apache-2.0 // SPDX-License-Identifier: Apache-2.0
@import 'variables'; @import 'variables';
@import 'typography';
.table-detail { .table-detail {
.column-layout-1 .left-panel { .column-layout-1 .left-panel {
...@@ -17,6 +18,10 @@ ...@@ -17,6 +18,10 @@
} }
} }
.header-title-text {
@extend %text-headline-w2;
}
.header-links { .header-links {
.avatar-label { .avatar-label {
&:focus, &:focus,
......
@import 'variables'; @import 'variables';
@import 'typography-default'; @import 'typography';
$more-link-size: 18px; $more-link-size: 18px;
$more-link-line-height: 21px; $more-link-line-height: 21px;
......
@import 'variables'; @import 'variables';
@import 'typography-default'; @import 'typography';
$shimmer-loader-items: 1, 2, 3, 4, 5; $shimmer-loader-items: 1, 2, 3, 4, 5;
$shimmer-loader-row-height: 16px; $shimmer-loader-row-height: 16px;
...@@ -86,10 +86,9 @@ $card-copy-max-lines: 3; ...@@ -86,10 +86,9 @@ $card-copy-max-lines: 3;
@each $line in $shimmer-loader-items { @each $line in $shimmer-loader-items {
.shimmer-row-line--#{$line} { .shimmer-row-line--#{$line} {
width: width: (
(
random($shimmer-loader-row-max-width - $shimmer-loader-row-min-width) + random($shimmer-loader-row-max-width - $shimmer-loader-row-min-width) +
$shimmer-loader-row-min-width $shimmer-loader-row-min-width
) + ) +
px; px;
} }
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
// SPDX-License-Identifier: Apache-2.0 // SPDX-License-Identifier: Apache-2.0
@import 'variables'; @import 'variables';
@import 'typography-default'; @import 'typography';
$icon-status-color: #f2f2f2; $icon-status-color: #f2f2f2;
$icon-status-missed: $sunset60; $icon-status-missed: $sunset60;
......
...@@ -327,7 +327,7 @@ describe('SearchBar', () => { ...@@ -327,7 +327,7 @@ describe('SearchBar', () => {
it('renders input with correct default props', () => { it('renders input with correct default props', () => {
expect(wrapper.find('form').find('input').props()).toMatchObject({ expect(wrapper.find('form').find('input').props()).toMatchObject({
autoFocus: true, autoFocus: true,
className: 'h2 large search-bar-input form-control', className: 'text-headline-w2 large search-bar-input form-control',
id: 'search-input', id: 'search-input',
onChange: wrapper.instance().handleValueChange, onChange: wrapper.instance().handleValueChange,
placeholder: SearchBar.defaultProps.placeholder, placeholder: SearchBar.defaultProps.placeholder,
...@@ -343,7 +343,7 @@ describe('SearchBar', () => { ...@@ -343,7 +343,7 @@ describe('SearchBar', () => {
}); });
expect(wrapper.find('form').find('input').props()).toMatchObject({ expect(wrapper.find('form').find('input').props()).toMatchObject({
autoFocus: true, autoFocus: true,
className: 'h2 large search-bar-input form-control', className: 'text-headline-w2 large search-bar-input form-control',
id: 'search-input', id: 'search-input',
onChange: wrapper.instance().handleValueChange, onChange: wrapper.instance().handleValueChange,
placeholder: props.placeholder, placeholder: props.placeholder,
......
...@@ -185,7 +185,9 @@ export class SearchBar extends React.Component<SearchBarProps, SearchBarState> { ...@@ -185,7 +185,9 @@ export class SearchBar extends React.Component<SearchBarProps, SearchBarState> {
render() { render() {
const inputClass = `${ const inputClass = `${
this.props.size === Constants.SIZE_SMALL ? 'title-2 small' : 'h2 large' this.props.size === Constants.SIZE_SMALL
? 'text-title-w2 small'
: 'text-headline-w2 large'
} search-bar-input form-control`; } search-bar-input form-control`;
const searchButtonClass = `btn btn-flat-icon search-button ${ const searchButtonClass = `btn btn-flat-icon search-button ${
this.props.size === Constants.SIZE_SMALL ? 'small' : 'large' this.props.size === Constants.SIZE_SMALL ? 'small' : 'large'
......
...@@ -63,7 +63,7 @@ ...@@ -63,7 +63,7 @@
top: 18px; top: 18px;
} }
.h2.search-bar-input { .text-headline-w2.search-bar-input {
font-size: 24px; font-size: 24px;
height: 60px; height: 60px;
padding: 16px 16px 16px 48px; padding: 16px 16px 16px 48px;
......
...@@ -16,13 +16,6 @@ export const Typography = () => { ...@@ -16,13 +16,6 @@ export const Typography = () => {
<h5>Raw h5</h5> <h5>Raw h5</h5>
<h6>Raw h6</h6> <h6>Raw h6</h6>
<hr /> <hr />
<h1 className="h1">Heading with .h1</h1>
<h2 className="h2">Heading with .h2</h2>
<h3 className="h3">Heading with .h3</h3>
<h4 className="h4">Heading with .h4</h4>
<h5 className="h5">Heading with .h5</h5>
<h6 className="h6">Heading with .h6</h6>
<hr />
<h1 className="title-1">Heading with .title-1</h1> <h1 className="title-1">Heading with .title-1</h1>
<h1 className="title-2">Heading with .title-2</h1> <h1 className="title-2">Heading with .title-2</h1>
<h1 className="title-3">Heading with .title-3</h1> <h1 className="title-3">Heading with .title-3</h1>
......
...@@ -13397,7 +13397,7 @@ ...@@ -13397,7 +13397,7 @@
}, },
"css-select": { "css-select": {
"version": "1.2.0", "version": "1.2.0",
"resolved": "http://registry.npmjs.org/css-select/-/css-select-1.2.0.tgz", "resolved": "https://registry.npmjs.org/css-select/-/css-select-1.2.0.tgz",
"integrity": "sha1-KzoRBTnFNV8c2NMUYj6HCxIeyFg=", "integrity": "sha1-KzoRBTnFNV8c2NMUYj6HCxIeyFg=",
"dev": true, "dev": true,
"requires": { "requires": {
...@@ -13926,7 +13926,7 @@ ...@@ -13926,7 +13926,7 @@
"dependencies": { "dependencies": {
"domelementtype": { "domelementtype": {
"version": "1.1.3", "version": "1.1.3",
"resolved": "http://registry.npmjs.org/domelementtype/-/domelementtype-1.1.3.tgz", "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-1.1.3.tgz",
"integrity": "sha1-vSh3PiZCiBrsUVRJJCmcXNgiGFs=", "integrity": "sha1-vSh3PiZCiBrsUVRJJCmcXNgiGFs=",
"dev": true "dev": true
} }
...@@ -33318,7 +33318,7 @@ ...@@ -33318,7 +33318,7 @@
"dependencies": { "dependencies": {
"json5": { "json5": {
"version": "1.0.1", "version": "1.0.1",
"resolved": "http://registry.npmjs.org/json5/-/json5-1.0.1.tgz", "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
"integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==", "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
"dev": true, "dev": true,
"requires": { "requires": {
...@@ -90,6 +90,25 @@ We strive to keep our application accessible. For that, we use the 'airbnb-types ...@@ -90,6 +90,25 @@ We strive to keep our application accessible. For that, we use the 'airbnb-types
We also try to model our application's markup on best practices regarding semantic markup. If you are making large markup changes on one of your PRs, make sure your changes comply with this [HTML semantics checklist][semanticchecklist]. We also try to model our application's markup on best practices regarding semantic markup. If you are making large markup changes on one of your PRs, make sure your changes comply with this [HTML semantics checklist][semanticchecklist].
### Typography
In the past, we have used several classes to set the styling of our heading and body text. Nowadays, we recommend to use classes in our stylesheets for each component, and extend those classes with the proper text styling by using an `@extend` to a placehoder selector:
```scss
@import "variables";
@import "typography";
.header-title-text {
@extend %text-headline-w2;
}
.header-subtitle-text {
@extend %text-subtitle-w3;
}
```
You can find the complete list of placeholder selectors for text in [this file](https://github.com/amundsen-io/amundsenfrontendlibrary/blob/master/amundsen_application/static/css/_typography-default.scss#L12). In the cases were a text class works best, you can use their equivalent classes.
[eslint]: https://eslint.org/ [eslint]: https://eslint.org/
[eslintconfig]: https://github.com/lyft/amundsenfrontendlibrary/blob/master/amundsen_application/static/package.json#L242 [eslintconfig]: https://github.com/lyft/amundsenfrontendlibrary/blob/master/amundsen_application/static/package.json#L242
[stylelint]: https://stylelint.io/ [stylelint]: https://stylelint.io/
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment