refactor(docs): localise presentational components (Badge/Button/LinkButton/FeaturedLink/Status) (DX-1128)

Vendor Badge, Button, LinkButton, FeaturedLink and Status locally, off
@ably/ui/core. Their icon props (leftIcon/rightIcon, iconBefore/iconAfter) now
take a ReactNode rather than an icon name string: callers pass a Heroicon
component or an Ably glyph <Icon> directly, and the component sizes it via a
slot. This drops the name->component indirection so Heroicons tree-shake, and
matches the glyphs-only local Icon. Also fixes a 'noopenner' rel typo in
FeaturedLink and points Footer's (feature-flagged) feedback icons at Heroicons.

Author: jamiehenson

package.json

@@ -98,6 +98,7 @@
     "react-medium-image-zoom": "^5.4.1",
     "react-select": "^5.7.0",
     "remark-gfm": "^1.0.0",
+    "swr": "^2.4.0",
     "tailwind-merge": "^2.5.5",
     "typescript": "^4.6.3",
     "use-keyboard-shortcut": "^1.1.6",

src/components/Examples/ExamplesFilter.tsx

@@ -2,15 +2,15 @@ import React, { ChangeEvent, Dispatch, SetStateAction, useCallback, useEffect, u
 import ReactDOM from 'react-dom';
 import { Input } from 'src/components/ui/Input';
 import { products } from '../../data/examples';
-import Button from '@ably/ui/core/Button';
+import Button from 'src/components/ui/Button';
 import cn from 'src/utilities/cn';
-import Badge from '@ably/ui/core/Badge';
+import Badge from 'src/components/ui/Badge';
 import ExamplesCheckbox from './ExamplesCheckbox';
 import { SelectedFilters } from './ExamplesContent';
 import { useOnClickOutside } from 'src/hooks/use-on-click-outside';
 import { navigate } from 'gatsby';
 import { ProductName } from '@ably/ui/core/ProductTile/data';
-import { MagnifyingGlassIcon, XMarkIcon } from '@heroicons/react/24/outline';
+import { AdjustmentsHorizontalIcon, MagnifyingGlassIcon, XMarkIcon } from '@heroicons/react/24/outline';
 
 const ExamplesFilter = ({
   selected,
@@ -130,7 +130,7 @@ const ExamplesFilter = ({
       <Button
         className="flex sm:hidden mt-4 w-full"
         variant="secondary"
-        leftIcon="icon-gui-adjustments-horizontal-outline"
+        leftIcon={<AdjustmentsHorizontalIcon aria-hidden />}
         onClick={() => setExpandFilterMenu(true)}
       >
         Filter

src/components/Examples/ExamplesGrid.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback } from 'react';
-import Badge from '@ably/ui/core/Badge';
+import Badge from 'src/components/ui/Badge';
 import Icon from 'src/components/Icon';
 import { IconName } from 'src/components/Icon/types';
 import { ProductName, products as dataProducts } from '@ably/ui/core/ProductTile/data';

src/components/Examples/ExamplesNoResults.tsx

@@ -1,4 +1,4 @@
-import Badge from '@ably/ui/core/Badge';
+import Badge from 'src/components/ui/Badge';
 import { Link } from 'gatsby';
 
 const ExamplesNoResults = () => {

src/components/Homepage/Changelog.tsx

@@ -1,8 +1,8 @@
 import { useStaticQuery } from 'gatsby';
 import { graphql } from 'gatsby';
 import { Key } from 'react';
-import Badge from '@ably/ui/core/Badge';
-import FeaturedLink from '@ably/ui/core/FeaturedLink';
+import Badge from 'src/components/ui/Badge';
+import FeaturedLink from 'src/components/ui/FeaturedLink';
 import Link from '../Link';
 
 interface ChangelogFeedItemNode {

src/components/Homepage/ExamplesSection.tsx

@@ -1,7 +1,7 @@
 import type { ExamplesSectionData } from 'src/data/content/types';
 import { getImageFromList, ImageProps } from 'src/components/Image';
 import { Image } from 'src/components/Image';
-import FeaturedLink from '@ably/ui/core/FeaturedLink';
+import FeaturedLink from 'src/components/ui/FeaturedLink';
 
 export const ExamplesSection = ({ section, images }: { section: ExamplesSectionData; images: ImageProps[] }) => {
   const imageUrl = getImageFromList(images, section.image);

src/components/Icon/types.ts

@@ -1,3 +1,5 @@
 // Permissive on purpose: covers the static glyph names and the dynamic
 // `icon-tech-${language}` usages without enumerating every glyph.
 export type IconName = `icon-${string}`;
+
+export type IconSize = `${number}px` | `${number}em` | `${number}rem` | `calc(${string})`;

src/components/Layout/Footer.tsx

@@ -1,21 +1,27 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { ComponentType, SVGProps, useEffect, useMemo, useState } from 'react';
 import { useLocation } from '@reach/router';
 import Icon from 'src/components/Icon';
 import { IconName } from 'src/components/Icon/types';
-import Status, { StatusUrl } from '@ably/ui/core/Status';
+import Status, { StatusUrl } from 'src/components/ui/Status';
 import cn from 'src/utilities/cn';
 import type { PageContextType } from './Layout';
 import { useLayoutContext } from 'src/contexts/layout-context';
-import Button from '@ably/ui/core/Button';
+import Button from 'src/components/ui/Button';
+import { HandRaisedIcon, HandThumbDownIcon, HandThumbUpIcon } from '@heroicons/react/24/outline';
+import {
+  HandRaisedIcon as HandRaisedSolidIcon,
+  HandThumbDownIcon as HandThumbDownSolidIcon,
+  HandThumbUpIcon as HandThumbUpSolidIcon,
+} from '@heroicons/react/24/solid';
 
 const ENABLE_FEEDBACK = false;
 
 type FeedbackMode = 'yes' | 'no' | 'feedback';
 
 type FeedbackButton = {
   label: string;
-  monoIcon: IconName;
-  colorIcon: IconName;
+  monoIcon: ComponentType<SVGProps<SVGSVGElement>>;
+  colorIcon: ComponentType<SVGProps<SVGSVGElement>>;
   placeholder: string;
   description?: string;
 };
@@ -65,22 +71,22 @@ const socialLinks: { key: string; icon: IconName; link: string }[] = [
 const feedbackButtons: Record<FeedbackMode, FeedbackButton> = {
   yes: {
     label: 'Yes',
-    monoIcon: 'icon-gui-hand-thumb-up-outline',
-    colorIcon: 'icon-gui-hand-thumb-up-solid',
+    monoIcon: HandThumbUpIcon,
+    colorIcon: HandThumbUpSolidIcon,
     description: 'Great! Thanks for letting us know, what are we doing well?',
     placeholder: 'Optional feedback.',
   },
   no: {
     label: 'No',
-    monoIcon: 'icon-gui-hand-thumb-down-outline',
-    colorIcon: 'icon-gui-hand-thumb-down-solid',
+    monoIcon: HandThumbDownIcon,
+    colorIcon: HandThumbDownSolidIcon,
     description: 'Yikes! Thanks for letting us know, what can we do better?',
     placeholder: 'Optional feedback.',
   },
   feedback: {
     label: 'I have feedback',
-    monoIcon: 'icon-gui-hand-raised-outline',
-    colorIcon: 'icon-gui-hand-raised-solid',
+    monoIcon: HandRaisedIcon,
+    colorIcon: HandRaisedSolidIcon,
     placeholder: 'What would you like to say?',
   },
 };
@@ -189,6 +195,8 @@ const Footer: React.FC<{ pageContext: PageContextType }> = ({ pageContext }) =>
             <div className="flex items-center gap-6">
               {Object.entries(feedbackButtons).map(([key, button]) => {
                 const isActive = feedbackMode === key;
+                const ColorIcon = button.colorIcon;
+                const MonoIcon = button.monoIcon;
 
                 return (
                   <button
@@ -198,22 +206,19 @@ const Footer: React.FC<{ pageContext: PageContextType }> = ({ pageContext }) =>
                       setFeedbackMode(key as FeedbackMode);
                     }}
                   >
-                    <Icon
-                      name={button.colorIcon}
-                      size="20px"
-                      additionalCSS="transition-colors"
-                      color={
+                    <ColorIcon
+                      aria-hidden
+                      className={cn(
+                        'size-5 transition-colors',
                         isActive
                           ? 'text-orange-600'
-                          : 'hidden group-hover/feedback-button:block text-neutral-1300 dark:text-neutral-000'
-                      }
+                          : 'hidden group-hover/feedback-button:block text-neutral-1300 dark:text-neutral-000',
+                      )}
                     />
                     {!isActive && (
-                      <Icon
-                        name={button.monoIcon}
-                        size="20px"
-                        additionalCSS="transition-colors"
-                        color="text-neutral-900 dark:text-neutral-400 group-hover/feedback-button:hidden"
+                      <MonoIcon
+                        aria-hidden
+                        className="size-5 transition-colors text-neutral-900 dark:text-neutral-400 group-hover/feedback-button:hidden"
                       />
                     )}
                     <span

src/components/Layout/Header.test.tsx

@@ -23,7 +23,7 @@ jest.mock('src/components/Icon', () => {
   return MockIcon;
 });
 
-jest.mock('@ably/ui/core/LinkButton', () => {
+jest.mock('src/components/ui/LinkButton', () => {
   const MockButton: React.FC<{ children: React.ReactNode }> = ({ children }) => <button>{children}</button>;
   MockButton.displayName = 'MockButton';
   return MockButton;

src/components/Layout/Header.tsx

@@ -7,7 +7,7 @@ import { throttle } from 'es-toolkit/compat';
 import cn from 'src/utilities/cn';
 import Icon from 'src/components/Icon';
 import TabMenu from '@ably/ui/core/TabMenu';
-import Logo from '@ably/ui/core/images/logo/ably-logo.svg';
+import Logo from 'src/images/ably-logo.svg';
 import { track } from '@ably/ui/core/insights';
 import { componentMaxHeight, HEADER_BOTTOM_MARGIN, HEADER_HEIGHT } from 'src/utilities/heights';
 import LeftSidebar from './LeftSidebar';