QZ-763 Alt Pill component style with inverted colors (#113)

* convert Pill to TS & add icon prop

* add typographyInverted

* [WILL REVERT] use my styles branch

* add alt type styles

* rename type to pillStyle

* make class name more readable

* build

* convert PageHeader to TS; add showTopMargin prop

* Add TypeScript types

* make border and showPadding optional for PageHeader

* Add TypeScript types

* rename pillStyle options

* Add TypeScript types

* bump styles version

* Add TypeScript types

Co-authored-by: GitHub Action <action@github.com>

package.json

@@ -35,7 +35,7 @@
 		"@quartz/eslint-config-react": "^1.1.5",
 		"@quartz/js-utils": "^1.1.1",
 		"@quartz/stylelint-config": "^1.2.0",
-		"@quartz/styles": "github:Quartz/styles#0.2.0",
+		"@quartz/styles": "github:Quartz/styles#0.2.1",
 		"@storybook/addon-a11y": "^6.1.10",
 		"@storybook/addon-actions": "^6.1.10",
 		"@storybook/addon-essentials": "^6.1.10",

src/components/ColorScheme/ColorScheme.tsx

@@ -34,6 +34,7 @@ import colors from '@quartz/styles/dictionaries/colors.json';
  * 8. Navigation background: background of the navigation and tab bar. Defaults
  *    to Background 1.
  * 9. Highlight: color used to highlight text or other UI elements for emphasis.
+ * 10. Typography inverted: inverted type color used in overlaid elements.
  */
 export const schemes = {
 	LIGHT: {
@@ -42,13 +43,15 @@ export const schemes = {
 		background2: colors.color.white.value,
 		highlight: createRgba( ...hexToRGB( colors.color[ 'accent-blue' ].value ), 0.2 ),
 		typography: colors.color.black.value,
+		typographyInverted: colors.color.white.value,
 	},
 	DARK: {
 		accent: colors.color[ 'accent-blue-dark' ].value,
 		background1: colors.color[ 'dark-blue' ].value,
 		background2: colors.color[ 'mid-dark-blue' ].value,
 		highlight: createRgba( ...hexToRGB( colors.color.pink.value ), 0.25 ),
 		typography: colors.color.white.value,
+		typographyInverted: colors.color.black.value,
 	},
 	PRINT: {
 		accent: '#000',
@@ -71,6 +74,7 @@ function getCss ( {
 	highlight,
 	type,
 	typography,
+	typographyInverted,
 } ) {
 	// Print color schemes are simpler.
 	if ( 'print' === type ) {
@@ -89,6 +93,7 @@ function getCss ( {
 					--color-highlight: transparent;
 					--color-typography: ${typography};
 					--color-typography-faint: ${typography};
+					--color-typography-inverted: ${typographyInverted || background1};
 				}
 			}`;
 	}
@@ -120,6 +125,7 @@ function getCss ( {
 				--color-highlight: ${highlight || borderDecorative};
 				--color-typography: ${typography};
 				--color-typography-faint: ${typographyFaint};
+				--color-typography-inverted: ${typographyInverted || background1};
 			}
 		`;
 
@@ -171,6 +177,11 @@ export default function ColorScheme( props: {
 	 * Default type color.
 	 */
 	typography: string,
+
+	/**
+	 * Inverted type color, for use in overlaid elements. Defaults to `background1`.
+	 */
+	typographyInverted?: string,
 } ) {
 	// Reassembling ensures we don't have any hidden dependencies in our props (and
 	// pleases the linter).
@@ -182,6 +193,7 @@ export default function ColorScheme( props: {
 			highlight: props.highlight,
 			type: props.type,
 			typography: props.typography,
+			typographyInverted: props.typographyInverted,
 		} )
 	);
 

src/components/PageHeader/PageHeader.scss

@@ -5,12 +5,6 @@
 @use '~@quartz/styles/scss/tokens';
 
 .container {
-	margin-top: 20px;
-
-	@include media-queries.tablet-landscape-up {
-		margin-top: 48px;
-	}
-
 	&.border {
 		border-bottom: borders.$solid-decorative;
 	}
@@ -22,6 +16,14 @@
 			padding-bottom: 60px;
 		}
 	}
+
+	&.show-top-margin {
+		margin-top: 20px;
+
+		@include media-queries.tablet-landscape-up {
+			margin-top: 48px;
+		}
+	}
 }
 
 .children {

src/components/PageHeader/PageHeader.stories.mdx

@@ -1,5 +1,5 @@
 import { Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
-import PageHeader from './PageHeader.jsx';
+import PageHeader from './PageHeader';
 import { TabNav, TabNavItem } from '../TabNav/TabNav';
 
 <Meta title="Layout/PageHeader" component={PageHeader} />

src/components/PageHeader/PageHeader.jsx → src/components/PageHeader/PageHeader.tsx

@@ -1,72 +1,72 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import Tagline from '../Tagline/Tagline';
 import styles from './PageHeader.scss';
 
-const PageHeader = ( {
-	border,
-	children,
-	intro,
-	showPadding,
-	tagline,
-	title,
-} ) => (
-	<div className={`${styles.container} ${border ? styles.border : ''} ${showPadding ? styles.showPadding : ''}`}>
-		<div className={styles.contents}>
-			<h1 className={styles.title}>{title}</h1>
-			{
-				tagline &&
-					<div className={styles.tagline}>
-						<Tagline>{tagline}</Tagline>
-					</div>
-			}
-			{
-				intro &&
-					<p className={styles.intro}>{intro}</p>
-			}
-		</div>
-		{
-			children &&
-				<div className={styles.children}>{children}</div>
-		}
-	</div>
-);
-
-PageHeader.propTypes = {
+type PageHeaderProps = {
 	/**
 	 * Boolean to determine whether or not the component renders with a bottom border.
 	 */
-	border: PropTypes.bool.isRequired,
+	border?: boolean,
 
 	/**
 	 * Child node to be rendered as the inner HTML of the component.
 	 */
-	children: PropTypes.node,
+	children?: React.ReactNode,
 
 	/**
 	 * Smaller-print text used for the page subheader (renders in `<p>` tag).
 	 */
-	intro: PropTypes.node,
+	intro?: React.ReactNode,
 
 	/**
 	 * Boolean to determine whether to add padding to the header before the bottom border.
 	 */
-	showPadding: PropTypes.bool.isRequired,
+	showPadding?: boolean,
+
+	/**
+	 * Boolean to determine whether to add a top margin to the header.
+	 */
+	showTopMargin?: boolean,
 
 	/**
 	 * Very small-print text used directly below the title (e.g., as a dateline).
 	 */
-	tagline: PropTypes.node,
+	tagline?: React.ReactNode,
 
 	/**
 	 * Required text for the h1 tag.
 	 */
-	title: PropTypes.string.isRequired,
+	title: string,
 };
 
-PageHeader.defaultProps = {
-	border: true,
-	showPadding: true,
-};
+const PageHeader = ( {
+	border = true,
+	children,
+	intro,
+	showPadding = true,
+	showTopMargin = true,
+	tagline,
+	title,
+}: PageHeaderProps ) => (
+	<div className={`${styles.container} ${border ? styles.border : ''} ${showPadding ? styles.showPadding : ''} ${showTopMargin ? styles.showTopMargin : ''}`}>
+		<div className={styles.contents}>
+			<h1 className={styles.title}>{title}</h1>
+			{
+				tagline &&
+					<div className={styles.tagline}>
+						<Tagline>{tagline}</Tagline>
+					</div>
+			}
+			{
+				intro &&
+					<p className={styles.intro}>{intro}</p>
+			}
+		</div>
+		{
+			children &&
+				<div className={styles.children}>{children}</div>
+		}
+	</div>
+);
 
 export default PageHeader;