@outdoorsyco/brand-bar

The Ride Platform cross-brand bar: the thin strip above the site header on outdoorsy.com, ride.auto, roamly.com, and wheelbasepro.com. It shows the platform logo and links to the four brands, with the current one marked.

One package, four consumers. To change a label, the order, or a hostname, edit src/brands.ts, release a new version, and bump it in each site.

Install

npm install @outdoorsyco/brand-bar   # or yarn add / pnpm add

Peer dependency: react ^18.2 || ^19. No other runtime dependencies. Works in the Next.js app router (as a server component) and the pages router.

Use

import { BrandBar } from "@outdoorsyco/brand-bar";

<BrandBar current="outdoorsy" env={isProd ? "production" : "staging"} />

Render it directly above the site header, outside any sticky wrapper, so it scrolls away and the header still pins to the top.

Props

| Prop | Type | Default | Notes | | --- | --- | --- | --- | | current | 'outdoorsy' \| 'ride' \| 'roamly' \| 'wheelbase' | required | The site rendering the bar. Marked with aria-current="page"; its link carries no UTM. | | env | 'production' \| 'staging' | 'production' | Hosts the cross links point at. Brands without a staging host fall back to production. | | logoHref | string \| null | https://therideplatform.com | Where the logo links. null renders it as a plain mark. | | utm | boolean | true | Append utm_source=<current>&utm_medium=brand_bar to cross links and the logo link. | | label | string | The Ride Platform brands | Accessible name for the <nav>. Pass a translated string in localized apps. | | className | string | | Extra classes on the outer <nav> (for example a host's responsive visibility utilities). | | maxWidth | number \| string | 1280 | Max width of the bar's content so it does not stretch edge to edge. Pass the site's container width; a number is px. | | paddingX | number \| string | 16 | Horizontal padding at 1024px and wider. Pass the site's desktop container padding so the logo lines up with the header. | | paddingXNarrow | number \| string | 16 | Horizontal padding below 1024px. | | background | string | #000000 | Bar background. Each brand can pass a dark tint from its palette; the white type stays. |

Hosts

| Brand | production | staging | | --- | --- | --- | | Outdoorsy | www.outdoorsy.com | www.staging.outdoorsy.com | | Ride | www.ride.auto | dev.ride.auto | | Roamly | www.roamly.com | (production) | | Wheelbase | www.wheelbasepro.com | (production) |

Styling

The component renders its own <style> element. React 19 hoists it to <head> and dedupes it; React 18 leaves it in place, and the bar renders once per page either way. The CSS uses px units only, class-qualified selectors only, and inherits nothing but font-family, so Tailwind preflight in either direction cannot change it.

Default look: black bar, white logo and labels, the current brand bold with a white 2px indicator; logo on the left, links on the right. Retheme through custom properties on any ancestor:

.my-site { --rp-brand-bar-bg: #f4f4f5; --rp-brand-bar-fg: #52525b; --rp-brand-bar-fg-current: #111; --rp-brand-bar-accent: #111; --rp-brand-bar-logo: #111; --rp-brand-bar-border: 1px solid #e4e4e7; }

Available: --rp-brand-bar-bg, -fg, -fg-current, -accent, -logo, -border, -font, -font-size, -height, -gap, -logo-height, plus -narrow variants of the size ones for viewports under 768px. The maxWidth, paddingX, paddingXNarrow, and background props set --rp-brand-bar-max-width, --rp-brand-bar-padding-x, --rp-brand-bar-padding-x-narrow, and --rp-brand-bar-bg for you.

If a site adds a style-src Content-Security-Policy that forbids inline styles, import @outdoorsyco/brand-bar/brand-bar.css once instead and ignore the inline element. It is generated from the same string, so the two cannot drift.

Analytics

Every link has data-brand-bar-link="<brand>" (or "platform" for the logo) so RUM or autocapture can name clicks. The UTM pair gives destination-side attribution without any code in the consumer.

Develop

npm install
npm run dev        # preview page with every brand/env combination
npm test
npm run check      # typecheck, lint, test, build

npm run build emits CommonJS, ESM, types, and dist/brand-bar.css, then fails if the output contains a "use client" directive or imports react-dom or next.

Release

npm version patch   # or minor / major
git push --follow-tags

The v* tag triggers .github/workflows/publish.yml, which publishes with npm Trusted Publishing (no token stored in this repo). The trusted publisher (this repo + publish.yml) is configured on npmjs.com under the package settings. The very first publish of a new package has to be manual: npm publish --access public from a machine logged in to an account with publish rights on the @outdoorsyco org.

Consumers pick the new version up through their dependency bots or a one-line bump.