From cdc97a600fa79c8217938bfcbd8db4394d6e80e5 Mon Sep 17 00:00:00 2001 From: Scott Dickerson <6663002+scottdickerson@users.noreply.github.com> Date: Wed, 8 May 2024 11:54:37 -0500 Subject: [PATCH 1/3] fix(linklist): fix incorrect responsive layout --- src/components/Link/Link.tsx | 14 ++++----- src/components/LinkList/_linkList.scss | 7 +++-- src/scss/_utils.scss | 39 +++++++++++++++++++++----- 3 files changed, 43 insertions(+), 17 deletions(-) diff --git a/src/components/Link/Link.tsx b/src/components/Link/Link.tsx index f2812d36..090a935a 100644 --- a/src/components/Link/Link.tsx +++ b/src/components/Link/Link.tsx @@ -4,16 +4,16 @@ import { px } from '../../utils'; import React, { HTMLAttributes } from 'react'; import { getLinkVariantClassName, isLinkExternal } from './utils'; -export const LinkVariants = { +export enum LinkVariants { /** Default variant, used */ - standalone: 'standalone', + standalone = 'standalone', /** link rendering emailto: */ - email: 'email', + email = 'email', /** these links are being rendered in a list */ - list: 'list', + list = 'list', /** link is being rendered within body copy */ - inline: 'inline', -} as const; + inline = 'inline', +} export interface LinkProps extends HTMLAttributes { /** @@ -22,7 +22,7 @@ export interface LinkProps extends HTMLAttributes { * @default standalone * @see LinkVariants */ - variant?: keyof typeof LinkVariants; + variant?: LinkVariants; /** * The text of the link */ diff --git a/src/components/LinkList/_linkList.scss b/src/components/LinkList/_linkList.scss index 6950082d..52bc9d0e 100644 --- a/src/components/LinkList/_linkList.scss +++ b/src/components/LinkList/_linkList.scss @@ -2,10 +2,11 @@ .#{$px}-link-list { &--item { - grid-column: span 4; + // mobile first + grid-column: span 2; - @include media($breakpoint-lg) { - grid-column: span 2; + @include media($breakpoint-sm) { + grid-column: span 4; } } } diff --git a/src/scss/_utils.scss b/src/scss/_utils.scss index 26e6e5e4..d3585812 100644 --- a/src/scss/_utils.scss +++ b/src/scss/_utils.scss @@ -79,25 +79,50 @@ } } -@mixin media($breakpoint) { +@mixin media($breakpoint, $type: 'min') { @if $breakpoint == $breakpoint-sm { // $breakpoint2: 961px; - @media (min-width: $breakpoint2) { - @content; + @if $type == 'min' { + @media (min-width: $breakpoint2) { + @content; + } + } + + @if $type == 'max' { + @media (max-width: $breakpoint2) { + @content; + } } } @if $breakpoint == $breakpoint-md { // $breakpoint3: 1401px; - @media (min-width: $breakpoint3) { - @content; + + @if $type == 'min' { + @media (min-width: $breakpoint3) { + @content; + } + } + + @if type == 'max' { + @media (max-width: $breakpoint3) { + @content; + } } } @if $breakpoint == $breakpoint-lg { // $breakpoint4: 1801px; - @media (min-width: $breakpoint4) { - @content; + @if type == 'min' { + @media (min-width: $breakpoint4) { + @content; + } + } + + @if type == 'max' { + @media (max-width: $breakpoint4) { + @content; + } } } } From 17e20f147f59edaf49cd29e9fadaf941e76de3ae Mon Sep 17 00:00:00 2001 From: Scott Dickerson <6663002+scottdickerson@users.noreply.github.com> Date: Wed, 8 May 2024 12:54:34 -0500 Subject: [PATCH 2/3] chore(lint): fix lint issue with exported enum --- .eslintrc.cjs | 2 +- src/components/Link/Link.stories.tsx | 3 ++- src/components/Link/Link.test.tsx | 3 ++- src/components/Link/Link.tsx | 12 +----------- src/components/Link/utils.test.ts | 2 +- src/components/Link/utils.ts | 11 ++++++++++- src/components/LinkBlock/LinkBlock.test.tsx | 3 ++- src/components/LinkBlock/LinkBlock.tsx | 3 ++- src/index.ts | 1 + tsconfig.json | 3 ++- 10 files changed, 24 insertions(+), 19 deletions(-) diff --git a/.eslintrc.cjs b/.eslintrc.cjs index 8437ecb9..1bfc7f12 100644 --- a/.eslintrc.cjs +++ b/.eslintrc.cjs @@ -17,6 +17,6 @@ module.exports = { }, plugins: ['react-refresh'], rules: { - 'react-refresh/only-export-components': 'warn', + 'react-refresh/only-export-components': 'error', }, }; diff --git a/src/components/Link/Link.stories.tsx b/src/components/Link/Link.stories.tsx index 858cc498..1c6a5982 100644 --- a/src/components/Link/Link.stories.tsx +++ b/src/components/Link/Link.stories.tsx @@ -1,6 +1,7 @@ import type { Meta } from '@storybook/react'; -import Link, { LinkProps, LinkVariants } from './Link'; +import Link, { LinkProps } from './Link'; +import { LinkVariants } from './utils'; // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction const meta = { title: 'Components/Links/Link', diff --git a/src/components/Link/Link.test.tsx b/src/components/Link/Link.test.tsx index f1f0f1c8..b48a6bf5 100644 --- a/src/components/Link/Link.test.tsx +++ b/src/components/Link/Link.test.tsx @@ -1,5 +1,6 @@ import { render, screen } from '@testing-library/react'; -import Link, { LinkVariants } from './Link'; +import Link from './Link'; +import { LinkVariants } from './utils'; import { getLinkVariantClassName } from './utils'; const getLinkElement = (text: string) => screen.getByRole('link', { name: text }); diff --git a/src/components/Link/Link.tsx b/src/components/Link/Link.tsx index 090a935a..c280235b 100644 --- a/src/components/Link/Link.tsx +++ b/src/components/Link/Link.tsx @@ -3,17 +3,7 @@ import classnames from 'classnames'; import { px } from '../../utils'; import React, { HTMLAttributes } from 'react'; import { getLinkVariantClassName, isLinkExternal } from './utils'; - -export enum LinkVariants { - /** Default variant, used */ - standalone = 'standalone', - /** link rendering emailto: */ - email = 'email', - /** these links are being rendered in a list */ - list = 'list', - /** link is being rendered within body copy */ - inline = 'inline', -} +import { LinkVariants } from './utils'; export interface LinkProps extends HTMLAttributes { /** diff --git a/src/components/Link/utils.test.ts b/src/components/Link/utils.test.ts index 8150daec..68a3804d 100644 --- a/src/components/Link/utils.test.ts +++ b/src/components/Link/utils.test.ts @@ -1,5 +1,5 @@ import { getLinkVariantClassName, isLinkExternal } from './utils'; -import { LinkVariants } from './Link'; +import { LinkVariants } from './utils'; describe('getLinkVariantClassName', () => { it('should return the correct variant class name', () => { diff --git a/src/components/Link/utils.ts b/src/components/Link/utils.ts index 79a30c54..ac137d58 100644 --- a/src/components/Link/utils.ts +++ b/src/components/Link/utils.ts @@ -1,5 +1,4 @@ import { px } from '../../utils'; -import { LinkVariants } from './Link'; export const getLinkVariantClassName = (variant: keyof typeof LinkVariants) => `${px}-link--${variant}`; @@ -7,3 +6,13 @@ export const isLinkExternal = (href: string) => !!href.match( /(http[s]?:\/\/)(?!.*phillips\.com)([a-zA-Z0-9\-.]+)(:[0-9]{1,4})?([a-zA-Z0-9/\-._~:?#[\]@!$&'()*+,;=]*)/g, ); +export enum LinkVariants { + /** Default variant, used */ + standalone = 'standalone', + /** link rendering emailto: */ + email = 'email', + /** these links are being rendered in a list */ + list = 'list', + /** link is being rendered within body copy */ + inline = 'inline', +} diff --git a/src/components/LinkBlock/LinkBlock.test.tsx b/src/components/LinkBlock/LinkBlock.test.tsx index 6018c60b..a3305cf6 100644 --- a/src/components/LinkBlock/LinkBlock.test.tsx +++ b/src/components/LinkBlock/LinkBlock.test.tsx @@ -1,6 +1,7 @@ import { render, screen } from '@testing-library/react'; import LinkBlock from './LinkBlock'; -import Link, { LinkProps, LinkVariants } from '../Link/Link'; +import Link, { LinkProps } from '../Link/Link'; +import { LinkVariants } from '../Link/utils'; import { getLinkVariantClassName } from '../Link/utils'; describe('LinkBlock', () => { diff --git a/src/components/LinkBlock/LinkBlock.tsx b/src/components/LinkBlock/LinkBlock.tsx index 388a7a84..d6dd3e44 100644 --- a/src/components/LinkBlock/LinkBlock.tsx +++ b/src/components/LinkBlock/LinkBlock.tsx @@ -1,6 +1,7 @@ import classnames from 'classnames'; import { px } from '../../utils'; -import Link, { LinkProps, LinkVariants } from '../Link/Link'; +import Link, { LinkProps } from '../Link/Link'; +import { LinkVariants } from '../Link/utils'; export interface LinkBlockProps extends React.HTMLAttributes { /** Props for the Link component */ diff --git a/src/index.ts b/src/index.ts index 364aa1fc..777bc8a8 100644 --- a/src/index.ts +++ b/src/index.ts @@ -8,6 +8,7 @@ export { default as Header, type HeaderProps } from './components/Header/Header' export { default as HeroBanner, type HeroBannerProps } from './components/HeroBanner/HeroBanner'; export { default as Input, type InputProps } from './components/Input/Input'; export { default as Link, type LinkProps } from './components/Link/Link'; +export { LinkVariants } from './components/Link/utils'; export { default as LinkBlock, type LinkBlockProps } from './components/LinkBlock/LinkBlock'; export { default as LinkList, type LinkListProps } from './components/LinkList/LinkList'; diff --git a/tsconfig.json b/tsconfig.json index 7c76b888..e4b321ae 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -26,6 +26,7 @@ "noUnusedParameters": true, "noFallthroughCasesInSwitch": true }, - "include": ["src", "custom.d.ts"], + // https://github.com/microsoft/TypeScript/issues/56749 Have to exclude *.mdx files + "include": ["custom.d.ts", "src/**/*.ts", "src/**/*.tsx"], "references": [{ "path": "./tsconfig.node.json" }] } From cead867eb506f3bae972657d91b2db02d77f4d18 Mon Sep 17 00:00:00 2001 From: Scott Dickerson <6663002+scottdickerson@users.noreply.github.com> Date: Wed, 8 May 2024 13:51:41 -0500 Subject: [PATCH 3/3] chore(lint): reset the severity of the export components rule --- .eslintrc.cjs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.eslintrc.cjs b/.eslintrc.cjs index 1bfc7f12..8437ecb9 100644 --- a/.eslintrc.cjs +++ b/.eslintrc.cjs @@ -17,6 +17,6 @@ module.exports = { }, plugins: ['react-refresh'], rules: { - 'react-refresh/only-export-components': 'error', + 'react-refresh/only-export-components': 'warn', }, };