@hyphen/hyphen-components 6.2.2 → 6.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyphen/hyphen-components",
-  "version": "6.2.2",
+  "version": "6.3.0",
   "license": "MIT",
   "author": {
     "name": "@hyphen"

package/src/components/Button/Button.module.scss

@@ -245,6 +245,38 @@
     }
   }
 
+  &.link {
+    display: inline-flex;
+    background-color: transparent;
+    border: none;
+    color: inherit;
+    padding: 0;
+    text-decoration: none;
+    font-size: inherit;
+    height: auto;
+
+    &:not(:disabled):hover {
+      text-decoration: underline;
+      text-underline-offset: var(--size-spacing-xs);
+    }
+
+    &:focus {
+      outline: 0;
+      box-shadow: var(--button-box-shadow-focus);
+    }
+
+    // Show focus styles on keyboard focus.
+    &:focus-visible {
+      outline: 0;
+      box-shadow: var(--button-box-shadow-focus);
+    }
+
+    &:focus:not(:focus-visible) {
+      outline: 0;
+      box-shadow: none;
+    }
+  }
+
   &.size-sm {
     @extend %size-sm;
   }

package/src/components/Button/Button.stories.tsx

@@ -32,13 +32,18 @@ export const AsChild = () => (
 );
 
 export const Variants = () => (
-  <Box gap="md" style={{ backgroundColor: 'var(--background-primary)' }}>
-    <Box gap="sm" direction="row" alignItems="flex-start">
-      <Button variant="primary">Primary</Button>
-      <Button variant="secondary">Secondary</Button>
-      <Button variant="tertiary">Tertiary</Button>
-      <Button variant="danger">Danger</Button>
-    </Box>
+  <Box
+    gap="md"
+    background="primary"
+    direction="row"
+    alignItems="center"
+    fontSize="sm"
+  >
+    <Button variant="primary">Primary</Button>
+    <Button variant="secondary">Secondary</Button>
+    <Button variant="tertiary">Tertiary</Button>
+    <Button variant="danger">Danger</Button>
+    <Button variant="link">Link</Button>
   </Box>
 );
 
@@ -85,15 +90,16 @@ export const Icons = () => (
 );
 
 export const IconButton = () => (
-  <>
+  <Box gap="lg" direction="row" alignItems="center">
     <Button variant="tertiary" iconPrefix="add" aria-label="add" />
     <Button variant="tertiary" iconPrefix="dots" aria-label="open menu" />
     <Button variant="danger" iconPrefix="trash" aria-label="remove" />
-  </>
+    <Button variant="link" iconPrefix="chat" aria-label="chat" />
+  </Box>
 );
 
 export const Loading = () => (
-  <Box direction="row" gap="md">
+  <Box direction="row" gap="md" fontSize="sm">
     <Button isLoading aria-label="primary loading">
       Primary Loading
     </Button>
@@ -103,11 +109,14 @@ export const Loading = () => (
     <Button variant="tertiary" isLoading aria-label="tertiary loading">
       Tertiary Loading
     </Button>
+    <Button variant="link" isLoading aria-label="link loading">
+      Link Loading
+    </Button>
   </Box>
 );
 
 export const Disabled = () => (
-  <Box direction="row" gap="md">
+  <Box direction="row" gap="md" fontSize="sm">
     <Button variant="primary" isDisabled>
       Primary Disabled
     </Button>
@@ -117,6 +126,9 @@ export const Disabled = () => (
     <Button variant="tertiary" isDisabled>
       Tertiary Disabled
     </Button>
+    <Button variant="link" isDisabled>
+      Link Disabled
+    </Button>
   </Box>
 );
 
@@ -133,3 +145,13 @@ export const Shadow = () => (
     </Button>
   </Box>
 );
+
+export const InlineLink = () => (
+  <Box display="block" as="p" fontSize="sm" color="base" width="8xl">
+    This is an example of a button used as an inline link.{' '}
+    <Button variant="link" size="md">
+      Inline Link Button
+    </Button>
+    . It will wrap with text.
+  </Box>
+);

package/src/components/Button/Button.tsx

@@ -8,7 +8,12 @@ import classNames from 'classnames';
 import { generateResponsiveClasses } from '../../lib/generateResponsiveClasses';
 import styles from './Button.module.scss';
 
-export type ButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'danger';
+export type ButtonVariant =
+  | 'primary'
+  | 'secondary'
+  | 'tertiary'
+  | 'danger'
+  | 'link';
 
 export type ButtonSize = 'sm' | 'md' | 'lg';
 
@@ -87,9 +92,12 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
   ) => {
     const disabled = isLoading || isDisabled;
 
-    const responsiveClasses = generateResponsiveClasses('size', size)
-      .map((c) => styles[c])
-      .filter(Boolean);
+    const responsiveClasses =
+      variant !== 'link'
+        ? generateResponsiveClasses('size', size)
+            .map((c) => styles[c])
+            .filter(Boolean)
+        : [];
 
     const buttonClasses = classNames(
       'hyphen-components__variables__form-control',

package/src/components/ResponsiveProvider/ResponsiveProvider.test.tsx

@@ -68,3 +68,21 @@ describe('Responsive hooks', () => {
     ).toEqual(1);
   });
 });
+
+describe('Cleanup', () => {
+  it('clears pending resize timeout on unmount', () => {
+    jest.useFakeTimers();
+    const clearSpy = jest.spyOn(window, 'clearTimeout');
+    const { unmount } = render(
+      <ResponsiveProvider throttle={100}>
+        <div />
+      </ResponsiveProvider>
+    );
+    window.dispatchEvent(new Event('resize'));
+    expect(clearSpy).toHaveBeenCalledTimes(1);
+    unmount();
+    expect(clearSpy).toHaveBeenCalledTimes(2);
+    clearSpy.mockRestore();
+    jest.useRealTimers();
+  });
+});

package/src/components/ResponsiveProvider/ResponsiveProvider.tsx

@@ -53,7 +53,10 @@ export const ResponsiveProvider: React.FC<ResponsiveProviderProps> = ({
 
       window.addEventListener('resize', throttledResize);
 
-      return () => window.removeEventListener('resize', throttledResize);
+      return () => {
+        window.removeEventListener('resize', throttledResize);
+        clearTimeout(timeoutId);
+      };
     }
   }, [throttle]);