From 2bb6dff2e3b93075d647eb28714ef01ba7485c72 Mon Sep 17 00:00:00 2001 From: Van Anderson Date: Fri, 5 Feb 2021 09:59:44 -0600 Subject: [PATCH 01/11] Migrate Header component to TS --- src/{Header.js => Header.tsx} | 72 ++++++++++++++++++----------------- 1 file changed, 37 insertions(+), 35 deletions(-) rename src/{Header.js => Header.tsx} (63%) diff --git a/src/Header.js b/src/Header.tsx similarity index 63% rename from src/Header.js rename to src/Header.tsx index e345a58ff03..516fbf9f152 100644 --- a/src/Header.js +++ b/src/Header.tsx @@ -1,10 +1,14 @@ import styled, {css} from 'styled-components' import PropTypes from 'prop-types' import theme from './theme' -import {get, COMMON, TYPOGRAPHY, BORDER} from './constants' -import sx from './sx' +import {BORDER, COMMON, get, SystemCommonProps, SystemTypographyProps, SystemBorderProps, TYPOGRAPHY} from './constants' +import sx, {SxProp} from './sx' -const Header = styled.div` +type StyledHeaderItemProps = SystemCommonProps & SxProp & {full?: boolean} +type StyledHeaderProps = SystemCommonProps & SxProp +type StyledHeaderLinkProps = SystemCommonProps & SxProp & SystemTypographyProps & SystemBorderProps & {to?: boolean} + +const Header = styled.div` z-index: 32; display: flex; padding: ${get('space.3')}; @@ -19,16 +23,15 @@ const Header = styled.div` ${BORDER} ${sx}; ` - -Header.Item = styled.div` +const HeaderItem = styled.div` display: flex; margin-right: ${get('space.3')}; align-self: stretch; align-items: center; flex-wrap: nowrap; - ${props => - props.full && + ${({full}) => + full && css` flex: auto; `}; @@ -37,10 +40,21 @@ Header.Item = styled.div` ${BORDER}; ${sx}; ` -Header.Item.displayName = 'Header.Item' +HeaderItem.displayName = 'Header.Item' + +HeaderItem.defaultProps = { + theme +} -Header.Link = styled.a.attrs(props => { - const isReactRouter = typeof props.to === 'string' +HeaderItem.propTypes = { + full: PropTypes.bool, + ...COMMON.propTypes, + ...BORDER.propTypes, + ...sx.propTypes +} + +const HeaderLink = styled.a.attrs(({to}: StyledHeaderLinkProps) => { + const isReactRouter = typeof to === 'string' if (isReactRouter) { // according to their docs, NavLink supports aria-current: // https://reacttraining.com/react-router/web/api/NavLink/aria-current-string @@ -67,41 +81,29 @@ Header.Link = styled.a.attrs(props => { ${TYPOGRAPHY}; ${sx}; ` -Header.Link.displayName = 'Header.Link' - -Header.propTypes = { - ...sx.propTypes, - ...COMMON.propTypes, - ...BORDER.propTypes -} - -Header.defaultProps = { - theme -} +HeaderLink.displayName = 'Header.Link' -Header.Item.defaultProps = { +HeaderLink.defaultProps = { theme } -Header.Item.propTypes = { - full: PropTypes.bool, +HeaderLink.propTypes = { + href: PropTypes.string, + theme: PropTypes.object, ...COMMON.propTypes, ...BORDER.propTypes, + ...TYPOGRAPHY.propTypes, ...sx.propTypes } -Header.Link.defaultProps = { - theme +Header.propTypes = { + ...sx.propTypes, + ...COMMON.propTypes, + ...BORDER.propTypes } -Header.Link.propTypes = { - as: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]), - href: PropTypes.string, - theme: PropTypes.object, - ...COMMON.propTypes, - ...BORDER.propTypes, - ...TYPOGRAPHY.propTypes, - ...sx.propTypes +Header.defaultProps = { + theme } -export default Header +export default Object.assign(Header, {Link: HeaderLink, Item: HeaderItem}) From 113408140bef3d47a023925aa975273e264959ac Mon Sep 17 00:00:00 2001 From: Van Anderson Date: Fri, 5 Feb 2021 10:31:01 -0600 Subject: [PATCH 02/11] Add change set for Header TSX migration --- .changeset/yellow-suits-smell.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/yellow-suits-smell.md diff --git a/.changeset/yellow-suits-smell.md b/.changeset/yellow-suits-smell.md new file mode 100644 index 00000000000..34ec038d2fb --- /dev/null +++ b/.changeset/yellow-suits-smell.md @@ -0,0 +1,5 @@ +--- +"@primer/components": patch +--- + +Migrate `Header` component to TypeScript From e3732f65bf953e444f59f3b2ff5c47c0590f5db8 Mon Sep 17 00:00:00 2001 From: Van Anderson Date: Fri, 5 Feb 2021 10:35:43 -0600 Subject: [PATCH 03/11] Reorganize Header component file --- src/Header.tsx | 40 +++++++++++++++++++++------------------- 1 file changed, 21 insertions(+), 19 deletions(-) diff --git a/src/Header.tsx b/src/Header.tsx index 516fbf9f152..ab8e359cc58 100644 --- a/src/Header.tsx +++ b/src/Header.tsx @@ -40,18 +40,8 @@ const HeaderItem = styled.div` ${BORDER}; ${sx}; ` -HeaderItem.displayName = 'Header.Item' - -HeaderItem.defaultProps = { - theme -} -HeaderItem.propTypes = { - full: PropTypes.bool, - ...COMMON.propTypes, - ...BORDER.propTypes, - ...sx.propTypes -} +HeaderItem.displayName = 'Header.Item' const HeaderLink = styled.a.attrs(({to}: StyledHeaderLinkProps) => { const isReactRouter = typeof to === 'string' @@ -81,9 +71,27 @@ const HeaderLink = styled.a.attrs(({to}: StyledHeaderLinkProps) => { ${TYPOGRAPHY}; ${sx}; ` + HeaderLink.displayName = 'Header.Link' -HeaderLink.defaultProps = { +Header.propTypes = { + ...sx.propTypes, + ...COMMON.propTypes, + ...BORDER.propTypes +} + +Header.defaultProps = { + theme +} + +HeaderItem.propTypes = { + full: PropTypes.bool, + ...COMMON.propTypes, + ...BORDER.propTypes, + ...sx.propTypes +} + +HeaderItem.defaultProps = { theme } @@ -96,13 +104,7 @@ HeaderLink.propTypes = { ...sx.propTypes } -Header.propTypes = { - ...sx.propTypes, - ...COMMON.propTypes, - ...BORDER.propTypes -} - -Header.defaultProps = { +HeaderLink.defaultProps = { theme } From 5a620b0acff1e46d03996df460f7e0f772eb33ba Mon Sep 17 00:00:00 2001 From: Van Anderson Date: Fri, 5 Feb 2021 10:57:43 -0600 Subject: [PATCH 04/11] Migrate Header tests to TSX --- src/__tests__/{Header.js => Header.tsx} | 0 src/__tests__/__snapshots__/Header.tsx.snap | 79 +++++++++++++++++++++ 2 files changed, 79 insertions(+) rename src/__tests__/{Header.js => Header.tsx} (100%) create mode 100644 src/__tests__/__snapshots__/Header.tsx.snap diff --git a/src/__tests__/Header.js b/src/__tests__/Header.tsx similarity index 100% rename from src/__tests__/Header.js rename to src/__tests__/Header.tsx diff --git a/src/__tests__/__snapshots__/Header.tsx.snap b/src/__tests__/__snapshots__/Header.tsx.snap new file mode 100644 index 00000000000..058a7de6a41 --- /dev/null +++ b/src/__tests__/__snapshots__/Header.tsx.snap @@ -0,0 +1,79 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Header Header.Item renders consistently 1`] = ` +.c0 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + margin-right: 16px; + -webkit-align-self: stretch; + -ms-flex-item-align: stretch; + align-self: stretch; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-flex-wrap: nowrap; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; +} + +
+`; + +exports[`Header Header.Link renders consistently 1`] = ` +.c0 { + font-weight: 600; + color: #fff; + white-space: nowrap; + cursor: pointer; + -webkit-text-decoration: none; + text-decoration: none; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.c0:hover, +.c0:focus { + color: rgba(255,255,255,0.70); +} + + +`; + +exports[`Header renders consistently 1`] = ` +.c0 { + z-index: 32; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + padding: 16px; + font-size: 14px; + line-height: 1.5; + color: rgba(255,255,255,0.70); + background-color: #24292e; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-flex-wrap: nowrap; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; +} + +
+`; From aef87f0eba0673f9fc2d6edba52efd8ed767c138 Mon Sep 17 00:00:00 2001 From: Van Anderson Date: Fri, 5 Feb 2021 11:02:21 -0600 Subject: [PATCH 05/11] Remove Header.js.snap --- src/__tests__/__snapshots__/Header.js.snap | 79 ---------------------- 1 file changed, 79 deletions(-) delete mode 100644 src/__tests__/__snapshots__/Header.js.snap diff --git a/src/__tests__/__snapshots__/Header.js.snap b/src/__tests__/__snapshots__/Header.js.snap deleted file mode 100644 index 058a7de6a41..00000000000 --- a/src/__tests__/__snapshots__/Header.js.snap +++ /dev/null @@ -1,79 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Header Header.Item renders consistently 1`] = ` -.c0 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - margin-right: 16px; - -webkit-align-self: stretch; - -ms-flex-item-align: stretch; - align-self: stretch; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-flex-wrap: nowrap; - -ms-flex-wrap: nowrap; - flex-wrap: nowrap; -} - -
-`; - -exports[`Header Header.Link renders consistently 1`] = ` -.c0 { - font-weight: 600; - color: #fff; - white-space: nowrap; - cursor: pointer; - -webkit-text-decoration: none; - text-decoration: none; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; -} - -.c0:hover, -.c0:focus { - color: rgba(255,255,255,0.70); -} - - -`; - -exports[`Header renders consistently 1`] = ` -.c0 { - z-index: 32; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - padding: 16px; - font-size: 14px; - line-height: 1.5; - color: rgba(255,255,255,0.70); - background-color: #24292e; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-flex-wrap: nowrap; - -ms-flex-wrap: nowrap; - flex-wrap: nowrap; -} - -
-`; From 14b0f2aa46b35633b464925215f8333f9af1b843 Mon Sep 17 00:00:00 2001 From: Van Anderson Date: Fri, 5 Feb 2021 11:21:54 -0600 Subject: [PATCH 06/11] Export HeaderProps in Header.tsx --- src/Header.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/Header.tsx b/src/Header.tsx index ab8e359cc58..e845d890ee6 100644 --- a/src/Header.tsx +++ b/src/Header.tsx @@ -2,6 +2,7 @@ import styled, {css} from 'styled-components' import PropTypes from 'prop-types' import theme from './theme' import {BORDER, COMMON, get, SystemCommonProps, SystemTypographyProps, SystemBorderProps, TYPOGRAPHY} from './constants' +import {ComponentProps} from './utils/types' import sx, {SxProp} from './sx' type StyledHeaderItemProps = SystemCommonProps & SxProp & {full?: boolean} @@ -108,4 +109,5 @@ HeaderLink.defaultProps = { theme } +export type HeaderProps = ComponentProps export default Object.assign(Header, {Link: HeaderLink, Item: HeaderItem}) From ec4f2f2ea9958edbecb4e430a4408a5d243721fa Mon Sep 17 00:00:00 2001 From: Van Anderson Date: Mon, 8 Feb 2021 09:24:57 -0600 Subject: [PATCH 07/11] Also export sub components for header Co-authored-by: Cole Bemis --- src/Header.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/Header.tsx b/src/Header.tsx index e845d890ee6..068adf1e17e 100644 --- a/src/Header.tsx +++ b/src/Header.tsx @@ -110,4 +110,6 @@ HeaderLink.defaultProps = { } export type HeaderProps = ComponentProps +export type HeaderLinkProps = ComponentProps +export type HeaderItemProps = ComponentProps export default Object.assign(Header, {Link: HeaderLink, Item: HeaderItem}) From 233703bd86c052db3a3d30d6464eededc53ec16e Mon Sep 17 00:00:00 2001 From: Van Anderson Date: Mon, 8 Feb 2021 09:25:24 -0600 Subject: [PATCH 08/11] Custom props go at the begining for Header Co-authored-by: Cole Bemis --- src/Header.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Header.tsx b/src/Header.tsx index 068adf1e17e..e00229944a7 100644 --- a/src/Header.tsx +++ b/src/Header.tsx @@ -5,7 +5,7 @@ import {BORDER, COMMON, get, SystemCommonProps, SystemTypographyProps, SystemBor import {ComponentProps} from './utils/types' import sx, {SxProp} from './sx' -type StyledHeaderItemProps = SystemCommonProps & SxProp & {full?: boolean} +type StyledHeaderItemProps = {full?: boolean} & SystemCommonProps & SxProp type StyledHeaderProps = SystemCommonProps & SxProp type StyledHeaderLinkProps = SystemCommonProps & SxProp & SystemTypographyProps & SystemBorderProps & {to?: boolean} From 8453eb23425184cb2f04dbfc0d6b2dc0bc2c0929 Mon Sep 17 00:00:00 2001 From: Van Anderson Date: Mon, 8 Feb 2021 09:26:08 -0600 Subject: [PATCH 09/11] Update .changeset/yellow-suits-smell.md Make sure changeset is uniform for Header component Co-authored-by: Cole Bemis --- .changeset/yellow-suits-smell.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/yellow-suits-smell.md b/.changeset/yellow-suits-smell.md index 34ec038d2fb..da805039978 100644 --- a/.changeset/yellow-suits-smell.md +++ b/.changeset/yellow-suits-smell.md @@ -2,4 +2,4 @@ "@primer/components": patch --- -Migrate `Header` component to TypeScript +Migrate `Header` to TypeScript From 6f720d3e92dd7026d49b53ae6d9dcce21fc77c70 Mon Sep 17 00:00:00 2001 From: Van Anderson Date: Mon, 8 Feb 2021 09:26:52 -0600 Subject: [PATCH 10/11] StyledHeaderProps accepts SystemBorderProps Co-authored-by: Cole Bemis --- src/Header.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Header.tsx b/src/Header.tsx index e00229944a7..e01d76c0513 100644 --- a/src/Header.tsx +++ b/src/Header.tsx @@ -6,7 +6,7 @@ import {ComponentProps} from './utils/types' import sx, {SxProp} from './sx' type StyledHeaderItemProps = {full?: boolean} & SystemCommonProps & SxProp -type StyledHeaderProps = SystemCommonProps & SxProp +type StyledHeaderProps = SystemBorderProps & SystemCommonProps & SxProp type StyledHeaderLinkProps = SystemCommonProps & SxProp & SystemTypographyProps & SystemBorderProps & {to?: boolean} const Header = styled.div` From 35246415ed552a72ff391259a89cd6cb3d919929 Mon Sep 17 00:00:00 2001 From: Van Anderson Date: Mon, 8 Feb 2021 09:35:11 -0600 Subject: [PATCH 11/11] Correct props and typecasting for Header component --- src/Header.tsx | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/src/Header.tsx b/src/Header.tsx index e01d76c0513..669eb2cbc36 100644 --- a/src/Header.tsx +++ b/src/Header.tsx @@ -4,10 +4,14 @@ import theme from './theme' import {BORDER, COMMON, get, SystemCommonProps, SystemTypographyProps, SystemBorderProps, TYPOGRAPHY} from './constants' import {ComponentProps} from './utils/types' import sx, {SxProp} from './sx' +import * as History from 'history' -type StyledHeaderItemProps = {full?: boolean} & SystemCommonProps & SxProp +type StyledHeaderItemProps = {full?: boolean} & SystemCommonProps & SxProp type StyledHeaderProps = SystemBorderProps & SystemCommonProps & SxProp -type StyledHeaderLinkProps = SystemCommonProps & SxProp & SystemTypographyProps & SystemBorderProps & {to?: boolean} +type StyledHeaderLinkProps = {to?: History.LocationDescriptor} & SystemCommonProps & + SxProp & + SystemTypographyProps & + SystemBorderProps const Header = styled.div` z-index: 32; @@ -44,7 +48,7 @@ const HeaderItem = styled.div` HeaderItem.displayName = 'Header.Item' -const HeaderLink = styled.a.attrs(({to}: StyledHeaderLinkProps) => { +const HeaderLink = styled.a.attrs(({to}) => { const isReactRouter = typeof to === 'string' if (isReactRouter) { // according to their docs, NavLink supports aria-current: @@ -53,7 +57,7 @@ const HeaderLink = styled.a.attrs(({to}: StyledHeaderLinkProps) => { } else { return {} } -})` +})` font-weight: ${get('fontWeights.bold')}; color: ${get('colors.text.white')}; white-space: nowrap;