Merge pull request #103 from PhillipsAuctionHouse/L3-1468-cta-component

fix(linklist): fix incorrect responsive layout

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',

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 });

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 const 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',
-} as const;
+import { LinkVariants } from './utils';
 
 export interface LinkProps extends HTMLAttributes<HTMLAnchorElement> {
   /**
@@ -22,7 +12,7 @@ export interface LinkProps extends HTMLAttributes<HTMLAnchorElement> {
    * @default standalone
    * @see LinkVariants
    */
-  variant?: keyof typeof LinkVariants;
+  variant?: LinkVariants;
   /**
    * The text of the link
    */

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', () => {

src/components/Link/utils.ts

@@ -1,9 +1,18 @@
 import { px } from '../../utils';
-import { LinkVariants } from './Link';
 
 export const getLinkVariantClassName = (variant: keyof typeof LinkVariants) => `${px}-link--${variant}`;
 
 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',
+}

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', () => {

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<HTMLDivElement> {
   /** Props for the Link component */

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;
     }
   }
 }

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';
 

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;
+      }
     }
   }
 }

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" }]
 }