@voraus/react

The voraus look as React components, for an application that does not run Material UI, such as a Docusaurus site. Each one renders the class names of @voraus/css.

import { VorausAppBar, VorausButton, VorausHero, VorausLogo } from '@voraus/react'

A Material UI application takes this package only for what Material UI does not have: the hero, the head of a section, the app bar, the logo, the marquee and the eyebrow. For a button, a tag, tabs, steps, an accordion or the rule it takes Material UI's own component, which @voraus/mui-theme draws the same way. The rule there is <Divider variant="gradient">.

The stylesheets are the consumer's to load

These components render class names and nothing else, so an application imports the stylesheets behind them once, at its entry point. Without them a hero is unstyled text.

import '@voraus/assets/fonts/roboto.css'
import '@voraus/tokens/voraus.css'
import '@voraus/tokens/voraus-dark.css' // only if the application offers a dark theme
import '@voraus/css/voraus.css'

This package does not import them for you, because two of them are the application's decisions: whether it offers a dark theme, and whether it takes the small reset @voraus/css carries. A library should not put a reset into an application unasked.

The components are markup

Every rule behind them lives in @voraus/css. VorausHero renders the elements and the class names and nothing else, and a test fails on an inline style. That is what lets a Sphinx page build the same hero from the same classes, and it means a change to the look ships with the stylesheet rather than with a release of this package.

Links

VorausButton, VorausTag and VorausStatus turn into a link when they are given href. That link is a plain <a> until the application hands over the link of its router, once at its root:

<VorausLinkProvider component={RouterLink}>
  <App />
</VorausLinkProvider>

The component is given href as an <a> is. Docusaurus' Link takes it as it is, which is how the Docusaurus theme resolves a route against the baseUrl of a site.

VorausButton, VorausTag and VorausStatus

The button, the tag and the status label of @voraus/css. variant and color are the modifiers of the class names, and the brand platform says what each one is for.

VorausSteps

Steps on a rail in the brand gradient, as the team page of vorausrobotik.com draws its history. Each point takes the color the gradient has where it stands, which the stylesheet works out from the position of the step, so the list carries no numbers of its own. label is the small word in front of the title and the step's number when it is left out. orientation="horizontal" sets a few short steps side by side, and ongoing runs the rail on past the last step, for a history that goes on.

The steps have no state. A flow the user works through takes Material UI's Stepper.

VorausTabs and VorausAccordion

VorausTabs is the tab pattern of the WAI-ARIA practices: the arrow keys, Home and End move between the tabs, and every panel is rendered so a page rendered on the server carries all of them. VorausTab names a tab and holds its panel.

VorausAccordion is a native <details>. Several with the same name close each other, which the browser does without a script.

VorausHero

A wide band with two columns that stack on a narrow window.

The band takes the page's own surface and follows the theme, because a hero is layout. tone="accent" adds the drifting glow of the draft and is otherwise the same band. The glow is the whole of the tone: a band with a surface of its own would be a decision a consumer with another theme could not undo.

How strong the glow is belongs to the theme rather than to the stylesheet, because a wash that reads as a light source on the ink is invisible on a white page. --voraus-color-action-glow carries both the color and that strength.

<VorausHero
  eyebrow="Documentation"
  title="Software documentation."
  lead="Develop, simulate and run robots, drives and peripherals."
  tone="accent"
  actions={<Button variant="gradient">Start</Button>}
  aside={<LatestPublished />}
/>

title is the page's level one heading. A page that renders its own h1, such as a documentation page, sets titleAs="p", so the page keeps one. Every other slot is left out entirely when it is not given, rather than rendering an empty element.

VorausSectionHead and VorausRule

VorausSectionHead opens a section under the hero, as the website does: the eyebrow, a title at the size of a section heading, the rule and the lead. The title is an h2, and titleAs sets an h3 or a p where the outline of the page asks for one.

<VorausSectionHead
  eyebrow="What we do"
  title="We bring automation into the IT age."
  lead="voraus pairs the reliability of a classic controller with the flexibility of modern IT."
/>

VorausRule is the short bar in the brand gradient on its own, for a heading the head of a section does not fit. It is decoration and hidden from a screen reader.

VorausAppBar

The header of a page: the mark, a row of links, whatever stands on the right, and a menu behind a burger. Every part but the mark is optional, and each slot takes elements, so a router's own link works and a Material UI Button or IconButton can stand on the right.

<VorausAppBar
  links={
    <>
      <NavLink to="/platform/">Platform</NavLink>
      <NavLink to="/research/">Research</NavLink>
    </>
  }
  actions={<Button variant="gradient">Talk to an engineer</Button>}
  menu={<a href="/contact/">Contact</a>}
/>

The links move into the menu when they no longer fit on one line, rather than below a fixed width, so longer labels, a larger font or zoom collapse it as they should. The measuring is @voraus/css/header.js, which the component calls, so a page without React gets the same behavior from the same file. The menu is a native popover, which closes on Escape and on a click outside without any code here. Without menu, the burger shows only while the links are in it.

The default mark is the wordmark while the bar has room for it beside the actions. Once the actions leave less, it is the symbol on the gradient plate. This follows the room in the bar, not the width of the window, so a bar with one call to action keeps the wordmark on a narrower screen than one with a select and two more controls. @voraus/css decides it before the first paint, so the wordmark never turns into the symbol on a phone. The link is named voraus robotik in both states. A mark passed as brand stands as it is at every width.

Material UI has an AppBar, but not this header: the collapsing links and the menu are what this component adds, and it takes Material UI components in its slots.

VorausLogo

Following the theme

variant="wordmark", the default, renders the pair of files for a light and a dark surface: the gradient file and the negative one. A rule in @voraus/css hides the one that data-theme does not want, so the mark follows the theme without this component knowing which one is set. variant="symbol" is the symbol on its white plate, which stands on either surface. Any file name from @voraus/assets as the variant draws that one file.

The components are generated from the files in @voraus/assets by svgr at build time, so there is one copy of each drawing in the repository. svgr.config.js gives every rendered mark gradient ids of its own, from useId(). With an id per file only, two wordmarks on one page would share one, and the second would paint with the gradient of the first, which sits in the file the theme hides.

The files carry no width or height. Set height and the width follows the drawing.