From 23e1fedb6338ae9552c0fe94ff94fffbadd906b8 Mon Sep 17 00:00:00 2001 From: Nikil Kuruvilla Date: Tue, 9 Jun 2026 11:43:38 +0100 Subject: [PATCH 1/2] feat: refactor see more links - creating a unified component so we don't have to replicate styling --- apps/web/src/components/SeeMoreLink.tsx | 34 +++++++++++++++ apps/web/src/routes/company.$id.$slug.tsx | 51 +++++++++-------------- 2 files changed, 53 insertions(+), 32 deletions(-) create mode 100644 apps/web/src/components/SeeMoreLink.tsx diff --git a/apps/web/src/components/SeeMoreLink.tsx b/apps/web/src/components/SeeMoreLink.tsx new file mode 100644 index 0000000..ec26ae8 --- /dev/null +++ b/apps/web/src/components/SeeMoreLink.tsx @@ -0,0 +1,34 @@ +import { ExternalLink } from 'lucide-react'; +import type { ReactNode } from 'react'; + +/** + * Outbound pill link for the "See more on" section: a glass pill with an + * optional brand logo, optional text label, and a trailing external-link icon, + * opening in a new tab. `brand-link` is inert unless the logo carries + * `brand-mark`, so it's safe to share across tinted and brand-coloured logos. + */ +export function SeeMoreLink({ + href, + logo, + label, + ariaLabel, +}: { + href: string; + logo?: ReactNode; + label?: string; + ariaLabel?: string; +}) { + return ( + + {logo} + {label && {label}} + + ); +} diff --git a/apps/web/src/routes/company.$id.$slug.tsx b/apps/web/src/routes/company.$id.$slug.tsx index 229d042..7fac21a 100644 --- a/apps/web/src/routes/company.$id.$slug.tsx +++ b/apps/web/src/routes/company.$id.$slug.tsx @@ -17,6 +17,7 @@ import GoogleLogo from '../components/GoogleLogo'; import GovUkLogo from '../components/GovUkLogo'; import LinkedInLogo from '../components/LinkedInLogo'; import { NameHistory } from '../components/NameHistory'; +import { SeeMoreLink } from '../components/SeeMoreLink'; import { StatusBadge } from '../components/StatusBadge'; import { companySearchName, @@ -430,42 +431,28 @@ function CompanyDetail() {
{/* GOV.UK needs the Companies House record; Google/LinkedIn search by name. */} {profile?.company_number && ( - - {flagState.govukBranded ? ( - - ) : ( - 'GOV.UK' - )} - + logo={ + flagState.govukBranded ? ( + + ) : undefined + } + label={flagState.govukBranded ? undefined : 'GOV.UK'} + /> )} - - - Google - - } + label="Google" + ariaLabel={`Search Google for ${displayName}`} + /> + - - LinkedIn - + logo={} + label="LinkedIn" + ariaLabel={`Search LinkedIn for ${displayName}`} + />
From bfbfb6e830854e6edd5c7d79ce3408b44624e133 Mon Sep 17 00:00:00 2001 From: Nikil Kuruvilla Date: Tue, 9 Jun 2026 11:59:54 +0100 Subject: [PATCH 2/2] feat: add bing and duckduck go to the list - Yes privacy related search gives users options --- apps/web/src/components/BingLogo.tsx | 69 +++++++++++++ apps/web/src/components/DuckDuckGoLogo.tsx | 108 +++++++++++++++++++++ apps/web/src/routes/company.$id.$slug.tsx | 16 ++- 3 files changed, 192 insertions(+), 1 deletion(-) create mode 100644 apps/web/src/components/BingLogo.tsx create mode 100644 apps/web/src/components/DuckDuckGoLogo.tsx diff --git a/apps/web/src/components/BingLogo.tsx b/apps/web/src/components/BingLogo.tsx new file mode 100644 index 0000000..817b621 --- /dev/null +++ b/apps/web/src/components/BingLogo.tsx @@ -0,0 +1,69 @@ +/** + * Microsoft Bing "Fluent" mark used as the visual label for outbound links to + * Bing search. Brand teal-to-blue gradients (IDs namespaced to avoid clashing + * with other inlined SVGs); sized via `className`. + */ +export default function BingLogo({ className }: { className?: string }) { + return ( + + Bing + + + + + + + + + + + + + + + + + + + ); +} diff --git a/apps/web/src/components/DuckDuckGoLogo.tsx b/apps/web/src/components/DuckDuckGoLogo.tsx new file mode 100644 index 0000000..ad0a9ec --- /dev/null +++ b/apps/web/src/components/DuckDuckGoLogo.tsx @@ -0,0 +1,108 @@ +/** + * DuckDuckGo "Dax" mascot badge used as the visual label for outbound links to + * DuckDuckGo search. Full brand colour (orange disc, white duck, green bow tie); + * clip/gradient IDs namespaced to avoid clashing with other inlined SVGs. Sized + * via `className`. + */ +export default function DuckDuckGoLogo({ className }: { className?: string }) { + return ( + + DuckDuckGo + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} diff --git a/apps/web/src/routes/company.$id.$slug.tsx b/apps/web/src/routes/company.$id.$slug.tsx index 7fac21a..77a4fc1 100644 --- a/apps/web/src/routes/company.$id.$slug.tsx +++ b/apps/web/src/routes/company.$id.$slug.tsx @@ -13,6 +13,8 @@ import { companyProfileQueryOptions } from '../api/companiesHouse'; import { flagStateQueryOptions } from '../api/flags'; import { getHmrcBySlug, hmrcBySlugIdQueryOptions } from '../api/hmrc'; import { AddressMap } from '../components/AddressMap'; +import BingLogo from '../components/BingLogo'; +import DuckDuckGoLogo from '../components/DuckDuckGoLogo'; import GoogleLogo from '../components/GoogleLogo'; import GovUkLogo from '../components/GovUkLogo'; import LinkedInLogo from '../components/LinkedInLogo'; @@ -429,7 +431,7 @@ function CompanyDetail() { See more on
- {/* GOV.UK needs the Companies House record; Google/LinkedIn search by name. */} + {/* GOV.UK needs the Companies House record; the search engines query by name. */} {profile?.company_number && ( + } + label="Bing" + ariaLabel={`Search Bing for ${displayName}`} + /> + } + label="DuckDuckGo" + ariaLabel={`Search DuckDuckGo for ${displayName}`} + /> }