diff --git a/.changeset/dull-cheetahs-applaud.md b/.changeset/dull-cheetahs-applaud.md new file mode 100644 index 00000000000..5a799c59928 --- /dev/null +++ b/.changeset/dull-cheetahs-applaud.md @@ -0,0 +1,5 @@ +--- +"@primer/components": patch +--- + +Migrate `Flash` to TypeScript diff --git a/src/Flash.js b/src/Flash.tsx similarity index 67% rename from src/Flash.js rename to src/Flash.tsx index fe741443ab7..da4c15d7428 100644 --- a/src/Flash.js +++ b/src/Flash.tsx @@ -1,24 +1,21 @@ import PropTypes from 'prop-types' import styled from 'styled-components' import {variant} from 'styled-system' -import {COMMON, get} from './constants' +import {COMMON, get, SystemCommonProps} from './constants' import theme from './theme' -import sx from './sx' - -const schemeMap = { - red: 'danger', - blue: 'default', - yellow: 'warning', - green: 'success' -} +import sx, {SxProp} from './sx' const variants = variant({ scale: 'flash' }) -const getIconColor = (variant, theme) => get(`flashIcon.${variant}`)(theme) - -const Flash = styled.div` +const Flash = styled.div< + { + variant?: 'default' | 'warning' | 'success' | 'danger' + full?: boolean + } & SystemCommonProps & + SxProp +>` position: relative; color: ${get('colors.text.grayDark')}; padding: ${get('space.3')}; @@ -32,12 +29,12 @@ const Flash = styled.div` } svg { - color: ${props => getIconColor(props.variant, props.theme)}; + color: ${props => get(`flashIcon.${props.variant}`)(props.theme)}; margin-right: ${get('space.2')}; } ${COMMON}; - ${variants} + ${variants}; ${sx}; ` @@ -49,7 +46,6 @@ Flash.defaultProps = { Flash.propTypes = { children: PropTypes.node, full: PropTypes.bool, - scheme: PropTypes.oneOf(Object.keys(schemeMap)), // deprecate 20.0.0 variant: PropTypes.oneOf(['default', 'warning', 'success', 'danger']), ...COMMON.propTypes, ...sx.propTypes diff --git a/src/__tests__/Flash.js b/src/__tests__/Flash.tsx similarity index 100% rename from src/__tests__/Flash.js rename to src/__tests__/Flash.tsx diff --git a/src/__tests__/__snapshots__/Flash.js.snap b/src/__tests__/__snapshots__/Flash.tsx.snap similarity index 100% rename from src/__tests__/__snapshots__/Flash.js.snap rename to src/__tests__/__snapshots__/Flash.tsx.snap