diff --git a/.changeset/fluffy-peaches-study.md b/.changeset/fluffy-peaches-study.md new file mode 100644 index 00000000000..f909526645f --- /dev/null +++ b/.changeset/fluffy-peaches-study.md @@ -0,0 +1,5 @@ +--- +"@primer/components": patch +--- + +Migrate `Heading` to TypeScript diff --git a/.github/ISSUE_TEMPLATE/new_component_proposal_template.md b/.github/ISSUE_TEMPLATE/new_component_proposal_template.md index 3b3773284c8..7d088e2e8a2 100644 --- a/.github/ISSUE_TEMPLATE/new_component_proposal_template.md +++ b/.github/ISSUE_TEMPLATE/new_component_proposal_template.md @@ -1,3 +1,9 @@ +--- +name: Component Proposal +about: Propose a new component + +--- + ## Description Please describe the proposed component as thoroughly as possible - including Figma links for design, screenshots, historical context, any required functionality, optional/nice to have functionality, proposed component API design, etc. The more detail the better! diff --git a/package.json b/package.json index 7312f88f7a3..e51efd517e5 100644 --- a/package.json +++ b/package.json @@ -47,7 +47,7 @@ "@styled-system/props": "5.1.4", "@styled-system/theme-get": "5.1.2", "@types/styled-components": "^4.4.0", - "@types/styled-system": "5.1.2", + "@types/styled-system": "5.1.10", "@types/styled-system__css": "5.0.14", "@types/styled-system__theme-get": "5.0.1", "classnames": "^2.2.5", diff --git a/src/Heading.js b/src/Heading.tsx similarity index 60% rename from src/Heading.js rename to src/Heading.tsx index 01a93cb7f0e..30cc12f5da9 100644 --- a/src/Heading.js +++ b/src/Heading.tsx @@ -1,10 +1,10 @@ import styled from 'styled-components' -import sx from './sx' +import sx, {SxProp} from './sx' import PropTypes from 'prop-types' -import {TYPOGRAPHY, COMMON, get} from './constants' +import {TYPOGRAPHY, COMMON, get, SystemTypographyProps, SystemCommonProps} from './constants' import theme from './theme' -const Heading = styled.h2` +const Heading = styled.h2` font-weight: ${get('fontWeights.bold')}; font-size: ${get('fontSizes.5')}; margin: 0; @@ -24,4 +24,5 @@ Heading.propTypes = { ...TYPOGRAPHY.propTypes } +export type HeadingProps = React.ComponentProps export default Heading diff --git a/src/__tests__/Heading.js b/src/__tests__/Heading.tsx similarity index 66% rename from src/__tests__/Heading.js rename to src/__tests__/Heading.tsx index 57f3ffe3fe3..2837621e1a6 100644 --- a/src/__tests__/Heading.js +++ b/src/__tests__/Heading.tsx @@ -80,10 +80,6 @@ describe('Heading', () => { expect(render()).toHaveStyleRule('font-family', theme.fonts.mono) }) - it.skip('respects nowrap', () => { - expect(render()).toEqual(render()) - }) - it('renders fontSize', () => { for (const fontSize of theme.fontSizes) { expect(render()).toHaveStyleRule('font-size', `${fontSize}`) @@ -93,25 +89,4 @@ describe('Heading', () => { it('respects the "fontStyle" prop', () => { expect(render()).toHaveStyleRule('font-style', 'italic') }) - - it.skip('renders fontSize with f* classes using inverse scale', () => { - expect(render()).toEqual(render()) - expect(render()).toEqual(render()) - expect(render()).toEqual(render()) - expect(render()).toEqual(render()) - expect(render()).toEqual(render()) - expect(render()).toEqual(render()) - expect(render()).toEqual(render()) - }) - - it.skip('does not pass on arbitrary attributes', () => { - const defaultOutput = render() - expect(render()).toEqual(defaultOutput) - expect(render(