Update Link component story, update unit tests, refactor Link constructor

src/components/Alert/Alert.test.tsx

@@ -79,9 +79,9 @@ describe('<Alert />', () => {
     expect(linkTwo).toHaveAttribute('href', '/2');
 
     // Icon is displayed: External link
-    const externalIcon = await within(linkTwo).findByRole('img', {
-      hidden: true
-    });
+    const externalIcon = await within(linkTwo).findByTestId(
+      'link-icon-right'
+    );
     expect(externalIcon).toBeInTheDocument();
     expect(externalIcon).toHaveClass('cf-icon-svg--external-link');
   });

src/components/Alert/AlertLink.tsx

@@ -1,5 +1,4 @@
-import { Icon } from '../Icon/Icon';
-import { LinkText, ListLink } from '../Link/Link';
+import { ListLink } from '../Link/Link';
 
 export interface AlertLinkProperties {
   href: string;
@@ -12,10 +11,9 @@ export const AlertLink = ({
   label,
   isExternal
 }: AlertLinkProperties): JSX.Element => (
-  <ListLink href={href}>
-    <LinkText>{label}</LinkText>
-    {isExternal ? (
-      <Icon ariaLabel='external link' name='external-link' />
-    ) : null}
-  </ListLink>
+  <ListLink
+    href={href}
+    label={label}
+    iconRight={isExternal ? 'external-link' : undefined}
+  />
 );

src/components/Breadcrumb/Breadcrumb.test.tsx

@@ -0,0 +1,62 @@
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import { Breadcrumb } from './Breadcrumb';
+
+describe('<Breadcrumb />', () => {
+  it('renders nothing when no crumbs are provided', () => {
+    const { container } = render(<Breadcrumb crumbs={[]} />);
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  it('renders a single crumb', () => {
+    render(
+      <Breadcrumb
+        crumbs={[
+          {
+            href: '/home',
+            label: 'Home'
+          }
+        ]}
+      />
+    );
+
+    const nav = screen.getByRole('navigation', { name: 'Breadcrumbs' });
+    const link = screen.getByRole('link', { name: /Home/ });
+
+    expect(nav).toBeInTheDocument();
+    expect(link).toHaveAttribute('href', '/home');
+    expect(link).toHaveClass('m-breadcrumbs__crumb');
+  });
+
+  it('renders multiple crumbs', () => {
+    render(
+      <Breadcrumb
+        crumbs={[
+          { href: '/home', label: 'Home' },
+          { href: '/section', label: 'Section' }
+        ]}
+      />
+    );
+
+    const nav = screen.getByRole('navigation');
+    const links = screen.getAllByRole('link');
+
+    expect(links).toHaveLength(2);
+    expect(nav).toHaveTextContent(/\/\s*Home\s*\/\s*Section/);
+  });
+
+  it('uses aria-current when isCurrent is true', () => {
+    render(
+      <Breadcrumb
+        crumbs={[
+          { href: '/home', label: 'Home' },
+          { href: '/current', label: 'Current', isCurrent: true }
+        ]}
+      />
+    );
+
+    const currentCrumb = screen.getByText(/Current/);
+    expect(currentCrumb).toHaveAttribute('aria-current', 'page');
+    expect(screen.queryByRole('link', { name: /Current/ })).toBeNull();
+  });
+});

src/components/Buttons/Button.tsx

@@ -60,7 +60,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProperties>(
       iconRight,
       ...properties
     },
-    ref, // Receive the ref as the second argument
+    reference, // Receive the ref as the second argument
   ): JSX.Element => {
     const styles = [
       ...baseStyles,
@@ -73,7 +73,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProperties>(
 
     return (
       <button
-        ref={ref} // Attach the forwarded ref here
+        ref={reference} // Attach the forwarded ref here
         type="button"
         className={[...styles].join(' ')}
         {...properties}

src/components/Buttons/Buttons.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { Button, Icon, Link, LinkText } from '~/src/index';
+import { Button, Link } from '~/src/index';
 import { ButtonGroup } from './ButtonGroup';
 
 /**
@@ -125,10 +125,12 @@ export const ButtonLink: Story = {
   name: 'Button link',
   render: arguments_ => (
     <ButtonGroup>
-      <Link className='a-btn' href='/'>
-        <LinkText>Link styled as a button</LinkText>
-        <Icon name='download' />
-      </Link>
+      <Link
+        className='a-btn'
+        href='/'
+        label='Link styled as a button'
+        iconRight='download'
+      />
       <Button
         asLink
         key='1'

src/components/Checkbox/CheckboxOverview.mdx

@@ -1,6 +1,6 @@
 {/* NOTE: Do NOT use auto-formatting on this MDX's. Otherwise MDX creates extra <p> elements per line */}
 import { Meta } from '@storybook/addon-docs';
-import { List, Link, ListItem, Heading, Paragraph } from '~/src/index';
+import { List, Link, ListLink, Heading, Paragraph } from '~/src/index';
 
 <Meta title='Components (Verified)/Checkboxes/Overview' />
 
@@ -16,9 +16,9 @@ import { List, Link, ListItem, Heading, Paragraph } from '~/src/index';
 
 <div className="sb-unstyled">
 <Heading type='4'>Types</Heading>
-  <List>
-    <ListItem><Link target="_top" href='./?path=/docs/components-verified-checkboxes-checkbox--overview'>Checkbox</Link></ListItem>
-    <ListItem><Link target="_top" href='./?path=/docs/components-verified-checkboxes-large-target-area--overview'>Large target area</Link></ListItem>
+  <List isLink>
+    <ListLink target="_top" href='./?path=/docs/components-verified-checkboxes-checkbox--overview' label='Checkbox'/>
+    <ListLink target="_top" href='./?path=/docs/components-verified-checkboxes-large-target-area--overview' label='Large target area' />
   </List>
 
 

src/components/Divider/Divider.tsx

@@ -4,9 +4,9 @@ import type React from 'react';
 export const Divider = ({
   className = '',
   ...properties
-}: React.HTMLProps<HTMLDivElement>): ReactElement => {
-  return <div className={`content__line ${className}`} {...properties} />;
-};
+}: React.HTMLProps<HTMLDivElement>): ReactElement => (
+  <div className={`content__line ${className}`} {...properties} />
+);
 
 
 export default Divider;

src/components/Expandable/Expandable.tsx

@@ -37,8 +37,7 @@ export const Expandable: React.FC<ExpandableProperties> = ({
 
   // If it's NOT in a group/accordion, apply the default standalone styles
   if (!inAccordion) {
-    expandableClasses.push('o-expandable--background');
-    expandableClasses.push('o-expandable--border');
+    expandableClasses.push('o-expandable--background', 'o-expandable--border');
   }
 
   if (isPadded) expandableClasses.push('o-expandable--padded');

src/components/Expandable/ExpandableGroup.tsx

@@ -32,7 +32,7 @@ export const ExpandableGroup: React.FC<ExpandableGroupProperties> = ({
         // We set inAccordion to true if the item is in a group
         // to ensure it sheds its standalone borders/background
         inAccordion: true,
-        openOnLoad: child.props.openOnLoad || false
+        openOnLoad: child.props.openOnLoad ?? false
       } as Partial<ExpandableProperties>);
     }
     return child;

src/components/Icon/Icon.tsx

@@ -101,7 +101,7 @@ export const Icon = ({
       className={classes}
       style={{ fontSize }}
       role={isPresentational ? undefined : 'img'}
-      aria-label={ariaLabel || (!isPresentational ? alt ?? name : undefined)}
+      aria-label={ariaLabel || (isPresentational ? undefined : alt ?? name)}
       aria-labelledby={ariaLabelledby || undefined}
       aria-describedby={ariaDescribedby || undefined}
       aria-hidden={isPresentational ? 'true' : undefined}

src/components/Link/Link.scss

@@ -1,6 +1,9 @@
-.a-link--jump {
-  .a-link__text + svg,
+.a-link {
+  .a-link__text + svg {
+    margin-left: 0.25em;
+  }
+
   svg + .a-link__text {
-    padding-left: 0.25em;
+    margin-left: 0.25em;
   }
 }