@workday/canvas-kit-docs/dist/es6/lib/StylePropsTable.js

Documentation components of Canvas Kit components

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Box } from '@workday/canvas-kit-react/layout';
import { ExternalHyperlink } from '@workday/canvas-kit-react';
import { Table } from './Table';
const camelToKebabCase = (name) => {
    return name.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase();
};
export const StylePropsTable = ({ styleProps = [] }) => {
    const sortedStyleProps = styleProps.sort((a, b) => a.name.localeCompare(b.name));
    return (_jsxs(Table, { children: [_jsx(Table.Head, { children: _jsxs(Table.Row, { children: [_jsx(Table.Header, { children: "Prop" }), _jsx(Table.Header, { children: "CSS Properties" }), _jsx(Table.Header, { children: "System" })] }) }), _jsx(Table.Body, { children: sortedStyleProps.map((styleProp, index) => (_jsxs(Table.Row, { children: [_jsx(Table.Data, { fontFamily: "monospace", children: styleProp.name }), _jsx(Table.Data, { children: styleProp.properties.map((property, i) => {
                                const formattedName = camelToKebabCase(property);
                                const mdnUrl = `https://developer.mozilla.org/en-US/docs/Web/CSS/${formattedName}`;
                                return (_jsx(Box, { display: "inline-block", marginInlineEnd: "xxxs", children: _jsx(ExternalHyperlink, { href: mdnUrl, iconLabel: "Open link in new window", children: formattedName }, i) }));
                            }) }), _jsx(Table.Data, { fontFamily: "monospace", children: styleProp.system === 'none' ? '---' : styleProp.system })] }, index))) })] }));
};