@advantest/ui-components is a set of React components developed by Advantest.

Content

• Content
• Installation
• Examples

Installation

ui-components is available on npm: @advantest/ui-components.

npm install @advantest/ui-components

Make sure to have the following dependencies in your project (see peerDependencies):

• "@mui/material": "^5.2.1"
• "react": "^18.2.0"
• "react-dom": "^18.2.0"

Examples

import React from "react";
import { Header, Icon, headerIconButtonHover } from "@advantest/ui-components";
import { IconButton, Link } from "@mui/material";



// create the theme in a separate file once
export const Theme = ({ children }: { children: React.ReactNode }) => (
  <ThemeProvider theme={theme}>{children}</ThemeProvider>
);

// wrap your application with the created theme at a high level
<Theme>
  <MyApp/>
</Theme>

// use the Header and Footer as below
<Header
  logo={
    <img
      src="image url"
      alt="alt text"
      style={{ width: "200px", height: "58px" }}
    />
  }
  menuItems={[
    <Link
      sx={{
        typography: "body2",
        textDecoration: "none",
        textTransform: "uppercase",
        marginLeft: 4,
        "&:hover": {
          fontWeight: 400,
        },
      }}
    >
      Menu item 1
    </Link>,
    <Link
      sx={{
        typography: "body2",
        textDecoration: "none",
        textTransform: "uppercase",
        marginLeft: 4,
        "&:hover": {
          fontWeight: 400,
        },
      }}
    >
      Menu item 2
    </Link>
  ]}
  servicesMenu={{ services: [
    {
      icon: <Icon category="Action" label="Calendar" viewBox="-2 -2 16 16" />,
      service: {
        id: "1",
        title: "service 1",
        sequence: 1,
        href: "/",
        category: {
          sequence: 1,
          title: "category 1",
        },
      },
    },
    {
      logo: (
        <img
          src="service logo url"
          alt="alt"
          style={{ height: 24 }}
        />
      ),
      service: {
        id: "2",
        title: "service 2",
        sequence: 2,
        href: "/",
        category: {
          sequence: 2,
          title: "category 2",
        },
      },
    },
  ], noSearch: true }}
  actionComponents={[
    <IconButton
      key="1"
      sx={{
        "&:focus-visible": {
          border: "1px solid black",
        },
      }}
      disableRipple
      onClick={() => {}}
    >
      <Icon category="Menu" label="Profile" />
    </IconButton>
  ]}
  headerSecondRow={{
    applicationTitle: "Application Title",
    breadcrumbItems: [
      <Link href="/" sx={{ marginLeft: "-8px" }} key={1}>
        <IconButton>
          <Icon category="SI" label="Home" />
        </IconButton>
      </Link>,
      <Link href="/" sx={{ textDecoration: "none" }} key={2}>
        path 1
      </Link>,
      <Link
        href="/"
        sx={{ textDecoration: "none", background: "lightgrey" }}
        key={3}
      >
        path 2
      </Link>,
    ],
  }}
  />
<Footer
  legalLinks={
    <Box
      sx={{
        width: "300px",
        display: "flex",
        flexDirection: "row",
        justifyContent: "space-around",
        alignItems: "center",
      }}
    >
      <Link href="/" target="_blank" sx={{ textDecoration: "none" }}>
        <Typography variant="subtitle2">Contact</Typography>
      </Link>
      <Link href="/" target="_blank" sx={{ textDecoration: "none" }}>
        <Typography variant="subtitle2">Terms of Use</Typography>
      </Link>
      <Link href="/" target="_blank" sx={{ textDecoration: "none" }}>
        <Typography variant="subtitle2">Privacy Policy</Typography>
      </Link>
    </Box>
  }
  socialMediaLinks={
    <Box
      sx={{
        width: "120px",
        display: "flex",
        flexDirection: "row",
        justifyContent: "space-around",
        alignItems: "center",
      }}
    >
      <Link href="/" target="_blank">
        <Icon category="Action" label="Facebook" viewBox="0 0 26 26" />
      </Link>
      <Link href="/" target="_blank">
        <Icon category="Action" label="Twitter" viewBox="0 0 26 26" />
      </Link>
    </Box>
  }
/>

Note: One way to use Rubik font is to load it from Google Fonts:

<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
  href="https://fonts.googleapis.com/css2?family=Rubik:wght@300;400&display=swap"
  rel="stylesheet"
/>