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/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..77a4fc1 100644 --- a/apps/web/src/routes/company.$id.$slug.tsx +++ b/apps/web/src/routes/company.$id.$slug.tsx @@ -13,10 +13,13 @@ 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'; import { NameHistory } from '../components/NameHistory'; +import { SeeMoreLink } from '../components/SeeMoreLink'; import { StatusBadge } from '../components/StatusBadge'; import { companySearchName, @@ -428,44 +431,42 @@ 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 && ( - - {flagState.govukBranded ? ( - - ) : ( - 'GOV.UK' - )} - + logo={ + flagState.govukBranded ? ( + + ) : undefined + } + label={flagState.govukBranded ? undefined : 'GOV.UK'} + /> )} - - - Google - - } + label="Google" + ariaLabel={`Search Google for ${displayName}`} + /> + } + label="Bing" + ariaLabel={`Search Bing for ${displayName}`} + /> + } + label="DuckDuckGo" + ariaLabel={`Search DuckDuckGo for ${displayName}`} + /> + - - LinkedIn - + logo={} + label="LinkedIn" + ariaLabel={`Search LinkedIn for ${displayName}`} + />