@workday/canvas-kit-docs
Version:
Documentation components of Canvas Kit components
116 lines (115 loc) • 5.71 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import React from 'react';
import { StatusIndicator } from '@workday/canvas-kit-preview-react/status-indicator';
import { Table } from '@workday/canvas-kit-react/table';
import { TertiaryButton } from '@workday/canvas-kit-react/button';
import { generateUniqueId } from '@workday/canvas-kit-react/common';
import { Heading, Subtext } from '@workday/canvas-kit-react/text';
import { Tooltip } from '@workday/canvas-kit-react/tooltip';
import { createStyles } from '@workday/canvas-kit-styling';
import { chevronDownSmallIcon, chevronRightSmallIcon } from '@workday/canvas-system-icons-web';
import { system } from '@workday/canvas-tokens-web';
const headingID = generateUniqueId();
const autoData = [
{
id: generateUniqueId(),
brand: 'Porsche',
model: '992 911 GT3',
year: '2022',
price: 'Starts at $160,000',
engine: '4.0L Flat 6',
transmission: 'PDK or 7-Speed Manual',
horsepower: '502hp',
torque: '346 lb-ft',
curbWeight: '3,164 lbs',
orderStatus: 'Order Placed',
},
{
id: generateUniqueId(),
brand: 'BMW',
model: 'M5 Competition',
year: '2018',
price: 'Starts at $105,000',
engine: 'Twin-Turbo 4.4L V8',
transmission: 'Automatic',
horsepower: '627hp',
torque: '553 lb-ft',
curbWeight: '4,345 lbs',
orderStatus: 'Order Fulfilled',
},
{
id: generateUniqueId(),
brand: 'Audi',
model: 'R8',
year: '2022',
price: 'Starts at $148,000',
engine: '5.2L V10',
transmission: 'Automatic',
horsepower: '562hp',
torque: '408 lb-ft',
curbWeight: '3,594 lbs',
orderStatus: 'Order Fulfilled',
},
{
id: generateUniqueId(),
brand: 'Lotus',
model: 'Emira',
year: '2023',
price: 'Starts at $78,000',
engine: 'Supercharged 3.5L V6',
transmission: 'Automatic or 6-Speed Manual',
horsepower: '400hp',
torque: '317 lb-ft',
curbWeight: '3520 lbs',
orderStatus: 'Shipped: In Transit',
},
{
id: generateUniqueId(),
brand: 'Toyota',
model: 'Supra',
year: '1998',
price: '$40,000 - $80,000',
engine: '3.0L Inline 6',
transmission: 'Automatic or 6-Speed Manual',
horsepower: '320hp',
torque: '315 lb-ft',
curbWeight: '3,599 lbs',
orderStatus: 'Delivered',
},
{
id: generateUniqueId(),
brand: 'Nissan',
model: 'Skyline GT-R',
year: '1994',
price: '$45,000 - $90,000',
engine: '2.6L Twin-Turbo Inline 6',
transmission: '5-Speed Manual',
horsepower: '276hp',
torque: '260 lb-ft',
curbWeight: '3,153 lbs',
orderStatus: 'Delivered',
},
];
const expandableSectionStyles = createStyles({
alignItems: 'flex-start',
display: 'flex',
gap: system.space.x4,
padding: system.space.x8,
});
const expandableHeadingStyles = createStyles({
margin: 0,
fontWeight: system.fontWeight.bold,
});
const expandableListStyles = createStyles({
listStyle: 'none',
margin: 0,
padding: 0,
gap: system.space.x2,
});
function ExpandableRow({ data }) {
const [rowExpanded, setRowExpanded] = React.useState(false);
return (_jsxs(_Fragment, { children: [_jsxs(Table.Row, { gridTemplateColumns: "4rem repeat(4, 1fr)", children: [_jsx(Table.Cell, { children: _jsx(Tooltip, { title: `${data.brand} ${data.model}`, children: _jsx(TertiaryButton, { size: "small", icon: rowExpanded ? chevronDownSmallIcon : chevronRightSmallIcon, "aria-expanded": rowExpanded, onClick: () => setRowExpanded(!rowExpanded) }) }) }), _jsx(Table.Header, { scope: "row", children: data.brand }), _jsx(Table.Cell, { children: data.model }), _jsx(Table.Cell, { children: data.year }), _jsx(Table.Cell, { children: data.price })] }), rowExpanded && (_jsx(Table.Row, { children: _jsxs(Table.Cell, { colSpan: 5, cs: expandableSectionStyles, children: [_jsxs("div", { children: [_jsx(Subtext, { as: "h4", size: "large", cs: expandableHeadingStyles, children: "Status" }), _jsx(StatusIndicator, { variant: "blue", children: data.orderStatus })] }), _jsxs("div", { children: [_jsx(Subtext, { as: "h4", size: "large", cs: expandableHeadingStyles, children: "Specifications" }), _jsxs("ul", { className: expandableListStyles, children: [_jsxs(Subtext, { as: "li", size: "large", children: ["Engine: ", data.engine] }), _jsxs(Subtext, { as: "li", size: "large", children: ["Transmission: ", data.transmission] }), _jsxs(Subtext, { as: "li", size: "large", children: ["Horsepower: ", data.horsepower] }), _jsxs(Subtext, { as: "li", size: "large", children: ["Torque: ", data.torque] }), _jsxs(Subtext, { as: "li", size: "large", children: ["Curb Weight: ", data.curbWeight] })] })] })] }) }))] }));
}
export const ExpandableRows = () => {
return (_jsxs(_Fragment, { children: [_jsx(Heading, { as: "h3", id: headingID, size: "small", children: "Showroom Inventory" }), _jsxs(Table, { "aria-labelledby": headingID, children: [_jsx(Table.Head, { children: _jsxs(Table.Row, { gridTemplateColumns: "4rem repeat(4, 1fr)", children: [_jsx(Table.Cell, {}), _jsx(Table.Header, { scope: "col", children: "Make" }), _jsx(Table.Header, { scope: "col", children: "Model" }), _jsx(Table.Header, { scope: "col", children: "Year" }), _jsx(Table.Header, { scope: "col", children: "Price" })] }) }), _jsx(Table.Body, { children: autoData.map(item => (_jsx(ExpandableRow, { data: item }, item.id))) })] })] }));
};