@advantest/ui-components is a set of React components developed by Advantest.
Content
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"
/>