diff --git a/common/styles/styleExports.js b/common/styles/styleExports.js deleted file mode 100644 index 8107e12bd..000000000 --- a/common/styles/styleExports.js +++ /dev/null @@ -1,31 +0,0 @@ -import { isHexColor } from 'common/utils/style-utils'; -import * as themeMap from './themeMap'; - -const themeMapValues = Object.entries(themeMap); - -export const breakpointsObject = themeMapValues.reduce((object, [key, value]) => { - const isBreakpoint = key.includes('ViewportWidth'); - - if (isBreakpoint) { - object[key] = value; // eslint-disable-line no-param-reassign - } - - return object; -}, {}); - -export const brandColorsObject = themeMapValues.reduce((object, [key, value]) => { - if (isHexColor(value)) { - object[key] = value; // eslint-disable-line no-param-reassign - } - - return object; -}, {}); - -export const fontsObject = themeMapValues.reduce((object, [key, value]) => { - if (key.includes('Font')) { - // Remove extra quotes from font name - object[key] = value.replace(/^"(.*)"$/, '$1'); // eslint-disable-line no-param-reassign - } - - return object; -}, {}); diff --git a/common/styles/styleExports.ts b/common/styles/styleExports.ts new file mode 100644 index 000000000..a87861c46 --- /dev/null +++ b/common/styles/styleExports.ts @@ -0,0 +1,38 @@ +import { isHexColor } from 'common/utils/style-utils'; +import * as themeMap from './themeMap'; + +const themeMapValues = Object.entries(themeMap); + +type StyleObjectType = { + [key: string]: string; +}; + +export const breakpointsObject: StyleObjectType = themeMapValues.reduce((object, [key, value]) => { + const isBreakpoint = key.includes('ViewportWidth'); + + if (isBreakpoint) { + object[key] = value; // eslint-disable-line no-param-reassign + } + + return object; +}, {} as StyleObjectType); + +export const brandColorsObject: StyleObjectType = themeMapValues.reduce( + (object, [key, value]) => { + if (isHexColor(value)) { + object[key] = value; // eslint-disable-line no-param-reassign + } + + return object; + }, + {} as StyleObjectType, +); + +export const fontsObject: StyleObjectType = themeMapValues.reduce((object, [key, value]) => { + if (key.includes('Font')) { + // Remove extra quotes from font name + object[key] = value.replace(/^"(.*)"$/, '$1'); // eslint-disable-line no-param-reassign + } + + return object; +}, {} as StyleObjectType); diff --git a/components/Badge/Badge.js b/components/Badge/Badge.tsx similarity index 57% rename from components/Badge/Badge.js rename to components/Badge/Badge.tsx index 95bb7b59a..6a377dc96 100644 --- a/components/Badge/Badge.js +++ b/components/Badge/Badge.tsx @@ -1,19 +1,26 @@ -import { bool, element, oneOfType, string } from 'prop-types'; import classNames from 'classnames'; -Badge.propTypes = { - className: string, - icon: element.isRequired, // TODO: Create custom proptype accepting only `` or `` - label: oneOfType([string, element]).isRequired, - isImageFirst: bool, +export type BadgePropsType = { + /** + * SVG icon to be used as the badge. + */ + icon: React.ReactElement; + /** + * Optional label that is rendered with the badge. + */ + label: string | React.ReactElement; + /** + * Applies classnames to the base `figure` element for styling. + */ + className?: string; + /** + * Sets whether the label is rendered above, or below, the badge.. + * @default - true + */ + isImageFirst?: boolean; }; -Badge.defaultProps = { - className: undefined, - isImageFirst: true, -}; - -function Badge({ className, icon, isImageFirst, label }) { +function Badge({ className = undefined, icon, isImageFirst = true, label }: BadgePropsType) { return (
, - twitter: , - pinterest: , -}; - -const Template = arguments_ => ; - -export const GitHubBadge = Template.bind({}); -GitHubBadge.args = { - icon: icons.github, - label: 'GitHub Badge', -}; - -export const TwitterBadge = Template.bind({}); -TwitterBadge.args = { - icon: icons.twitter, - label: 'Twitter Badge', -}; - -export const PinterestBadge = Template.bind({}); -PinterestBadge.args = { - icon: icons.pinterest, - label: 'Pinterest Badge', -}; diff --git a/components/Badge/__stories__/Badge.stories.tsx b/components/Badge/__stories__/Badge.stories.tsx new file mode 100644 index 000000000..7cec89c36 --- /dev/null +++ b/components/Badge/__stories__/Badge.stories.tsx @@ -0,0 +1,44 @@ +import { Meta, StoryObj } from '@storybook/react' +import GithubIcon from 'public/static/images/icons/github_logo.svg'; +import TwitterIcon from 'public/static/images/icons/twitter_logo.svg'; +import PinterestIcon from 'public/static/images/icons/pinterest_logo.svg'; +import Badge from '../Badge'; + +const icons = { + github: , + twitter: , + pinterest: , +}; + +type BadgeStoryType = StoryObj + +export const GitHubBadge: BadgeStoryType = { + render: args => , + args: { + icon: icons.github, + label: 'GitHub Badge' + } +} + +export const TwitterBadge: BadgeStoryType = { + render: args => , + args: { + icon: icons.twitter, + label: 'Twitter Badge' + } +} + +export const PinterestBadge: BadgeStoryType = { + render: args => , + args: { + icon: icons.pinterest, + label: 'Pinterest Badge' + } +} + +const meta: Meta ={ + title: 'Badge', + component: Badge +} + +export default meta diff --git a/components/Badge/__tests__/Badge.test.js b/components/Badge/__tests__/Badge.test.tsx similarity index 96% rename from components/Badge/__tests__/Badge.test.js rename to components/Badge/__tests__/Badge.test.tsx index 9f1a0e2dd..da8372c1c 100644 --- a/components/Badge/__tests__/Badge.test.js +++ b/components/Badge/__tests__/Badge.test.tsx @@ -17,7 +17,7 @@ describe('Badge', () => { it('should render the image after the label when `isImageFirst` is true', () => { const { container } = render(); - + // @ts-expect-error const { childNodes } = container.firstChild; const [firstItem, secondItem] = childNodes; @@ -30,7 +30,7 @@ describe('Badge', () => { const { container } = render( , ); - + // @ts-expect-error const { childNodes } = container.firstChild; const [firstItem, secondItem] = childNodes; diff --git a/components/Badge/__tests__/__snapshots__/Badge.test.js.snap b/components/Badge/__tests__/__snapshots__/Badge.test.tsx.snap similarity index 100% rename from components/Badge/__tests__/__snapshots__/Badge.test.js.snap rename to components/Badge/__tests__/__snapshots__/Badge.test.tsx.snap diff --git a/components/Branding/ColorSection/ColorSection.js b/components/Branding/ColorSection/ColorSection.tsx similarity index 100% rename from components/Branding/ColorSection/ColorSection.js rename to components/Branding/ColorSection/ColorSection.tsx diff --git a/components/Branding/ColorSection/__tests__/ColorSection.test.js b/components/Branding/ColorSection/__tests__/ColorSection.test.tsx similarity index 100% rename from components/Branding/ColorSection/__tests__/ColorSection.test.js rename to components/Branding/ColorSection/__tests__/ColorSection.test.tsx diff --git a/components/Branding/ColorSection/__tests__/__snapshots__/ColorSection.test.js.snap b/components/Branding/ColorSection/__tests__/__snapshots__/ColorSection.test.tsx.snap similarity index 100% rename from components/Branding/ColorSection/__tests__/__snapshots__/ColorSection.test.js.snap rename to components/Branding/ColorSection/__tests__/__snapshots__/ColorSection.test.tsx.snap diff --git a/components/Branding/FontSection/FontSection.js b/components/Branding/FontSection/FontSection.tsx similarity index 100% rename from components/Branding/FontSection/FontSection.js rename to components/Branding/FontSection/FontSection.tsx diff --git a/components/Branding/FontSection/__tests__/FontSection.test.js b/components/Branding/FontSection/__tests__/FontSection.test.tsx similarity index 100% rename from components/Branding/FontSection/__tests__/FontSection.test.js rename to components/Branding/FontSection/__tests__/FontSection.test.tsx diff --git a/components/Branding/FontSection/__tests__/__snapshots__/FontSection.test.js.snap b/components/Branding/FontSection/__tests__/__snapshots__/FontSection.test.tsx.snap similarity index 100% rename from components/Branding/FontSection/__tests__/__snapshots__/FontSection.test.js.snap rename to components/Branding/FontSection/__tests__/__snapshots__/FontSection.test.tsx.snap diff --git a/components/Branding/LogoSection/LogoSection.js b/components/Branding/LogoSection/LogoSection.tsx similarity index 100% rename from components/Branding/LogoSection/LogoSection.js rename to components/Branding/LogoSection/LogoSection.tsx diff --git a/components/Branding/LogoSection/__tests__/LogoSection.test.js b/components/Branding/LogoSection/__tests__/LogoSection.test.tsx similarity index 100% rename from components/Branding/LogoSection/__tests__/LogoSection.test.js rename to components/Branding/LogoSection/__tests__/LogoSection.test.tsx diff --git a/components/Branding/LogoSection/__tests__/__snapshots__/LogoSection.test.js.snap b/components/Branding/LogoSection/__tests__/__snapshots__/LogoSection.test.tsx.snap similarity index 100% rename from components/Branding/LogoSection/__tests__/__snapshots__/LogoSection.test.js.snap rename to components/Branding/LogoSection/__tests__/__snapshots__/LogoSection.test.tsx.snap diff --git a/components/Branding/Swatch/Swatch.js b/components/Branding/Swatch/Swatch.tsx similarity index 83% rename from components/Branding/Swatch/Swatch.js rename to components/Branding/Swatch/Swatch.tsx index 78c7be2c3..5de1a2a70 100644 --- a/components/Branding/Swatch/Swatch.js +++ b/components/Branding/Swatch/Swatch.tsx @@ -6,7 +6,12 @@ Swatch.propTypes = { hexCode: string.isRequired, }; -function Swatch({ colorName, hexCode }) { +export type Swatch = { + colorName: string; + hexCode: string; +}; + +function Swatch({ colorName, hexCode }: Swatch) { return (
{`A block of the color ${colorName}`} diff --git a/components/Branding/Swatch/__tests__/Swatch.test.js b/components/Branding/Swatch/__tests__/Swatch.test.tsx similarity index 100% rename from components/Branding/Swatch/__tests__/Swatch.test.js rename to components/Branding/Swatch/__tests__/Swatch.test.tsx diff --git a/components/Branding/Swatch/__tests__/__snapshots__/Swatch.test.js.snap b/components/Branding/Swatch/__tests__/__snapshots__/Swatch.test.tsx.snap similarity index 100% rename from components/Branding/Swatch/__tests__/__snapshots__/Swatch.test.js.snap rename to components/Branding/Swatch/__tests__/__snapshots__/Swatch.test.tsx.snap