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

Documentation components of Canvas Kit components

import React from 'react';
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 (React.createElement(Table, null,
        React.createElement(Table.Head, null,
            React.createElement(Table.Row, null,
                React.createElement(Table.Header, null, "Prop"),
                React.createElement(Table.Header, null, "CSS Properties"),
                React.createElement(Table.Header, null, "System"))),
        React.createElement(Table.Body, null, sortedStyleProps.map((styleProp, index) => (React.createElement(Table.Row, { key: index },
            React.createElement(Table.Data, { fontFamily: "monospace" }, styleProp.name),
            React.createElement(Table.Data, null, styleProp.properties.map((property, i) => {
                const formattedName = camelToKebabCase(property);
                const mdnUrl = `https://developer.mozilla.org/en-US/docs/Web/CSS/${formattedName}`;
                return (React.createElement(Box, { display: "inline-block", marginInlineEnd: "xxxs" },
                    React.createElement(ExternalHyperlink, { href: mdnUrl, key: i }, formattedName)));
            })),
            React.createElement(Table.Data, { fontFamily: "monospace" }, styleProp.system === 'none' ? '---' : styleProp.system)))))));
};