@nestbotics/nct_frontend_common_components
Version:
A collection of reusable React components with theme management and styling utilities
133 lines (131 loc) • 4.89 kB
JavaScript
import React from 'react';
import { Typography, getTypographyStyle, dataGridStyles, getDataGridStyles } from '../common/StyleProvider';
// Example component showing how to use the styles in different ways
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
var StyleExample = function StyleExample() {
// Example of using inline styles directly
var titleStyle = getTypographyStyle('titleL', {
color: '#333'
});
var bodyStyle = getTypographyStyle('bodyM');
// Example of combining dataGrid styles
var tableStyle = getDataGridStyles(['base', 'scrollable'], {
marginTop: '20px',
marginBottom: '20px'
});
return /*#__PURE__*/_jsxs("div", {
style: {
padding: '20px'
},
children: [/*#__PURE__*/_jsx("h2", {
children: "Typography Examples"
}), /*#__PURE__*/_jsxs("div", {
style: {
marginBottom: '30px'
},
children: [/*#__PURE__*/_jsx("h3", {
children: "Using Typography Component"
}), /*#__PURE__*/_jsx(Typography, {
variant: "titleL",
children: "Title Large"
}), /*#__PURE__*/_jsx(Typography, {
variant: "titleM",
children: "Title Medium"
}), /*#__PURE__*/_jsx(Typography, {
variant: "titleS",
children: "Title Small"
}), /*#__PURE__*/_jsx(Typography, {
variant: "bodyL",
children: "Body Large text example"
}), /*#__PURE__*/_jsx(Typography, {
variant: "bodyM",
children: "Body Medium text example"
}), /*#__PURE__*/_jsx(Typography, {
variant: "bodyS",
children: "Body Small text example"
}), /*#__PURE__*/_jsx(Typography, {
variant: "labelL",
children: "Label Large"
}), /*#__PURE__*/_jsx(Typography, {
variant: "emphasisM",
component: "span",
children: "Emphasized Medium text"
})]
}), /*#__PURE__*/_jsxs("div", {
style: {
marginBottom: '30px'
},
children: [/*#__PURE__*/_jsx("h3", {
children: "Using Typography Styles Directly"
}), /*#__PURE__*/_jsx("h1", {
style: titleStyle,
children: "This is a heading with titleL styles"
}), /*#__PURE__*/_jsx("p", {
style: bodyStyle,
children: "This paragraph uses bodyM styles directly applied as inline styles."
}), /*#__PURE__*/_jsx("div", {
style: getTypographyStyle('emphasisL', {
color: 'darkblue'
}),
children: "This div has emphasisL styles with a custom color."
})]
}), /*#__PURE__*/_jsx("h2", {
children: "Data Grid Examples"
}), /*#__PURE__*/_jsxs("div", {
style: {
marginBottom: '30px'
},
children: [/*#__PURE__*/_jsx("h3", {
children: "Generic Table with Data Grid Styles"
}), /*#__PURE__*/_jsx("div", {
style: tableStyle,
children: /*#__PURE__*/_jsxs("table", {
style: {
width: '100%',
borderCollapse: 'collapse'
},
children: [/*#__PURE__*/_jsx("thead", {
children: /*#__PURE__*/_jsxs("tr", {
children: [/*#__PURE__*/_jsx("th", {
className: "data-grid-header-cell",
children: "ID"
}), /*#__PURE__*/_jsx("th", {
className: "data-grid-header-cell",
children: "Name"
}), /*#__PURE__*/_jsx("th", {
className: "data-grid-header-cell",
children: "Position"
})]
})
}), /*#__PURE__*/_jsx("tbody", {
children: [1, 2, 3].map(function (i) {
return /*#__PURE__*/_jsxs("tr", {
children: [/*#__PURE__*/_jsx("td", {
className: "data-grid-cell",
children: i
}), /*#__PURE__*/_jsx("td", {
className: "data-grid-cell",
children: "User ".concat(i)
}), /*#__PURE__*/_jsx("td", {
className: "data-grid-cell",
children: "Position ".concat(i)
})]
}, i);
})
})]
})
})]
}), /*#__PURE__*/_jsxs("div", {
children: [/*#__PURE__*/_jsx("h3", {
children: "HTML Structure with Classes (would be styled via CSS)"
}), /*#__PURE__*/_jsx("pre", {
style: getTypographyStyle('bodyS', {
background: '#f5f5f5',
padding: '15px'
}),
children: "<table class=\"data-grid\">\n <thead>\n <tr>\n <th class=\"data-grid-header-cell\">Header 1</th>\n <th class=\"data-grid-header-cell\">Header 2</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td class=\"data-grid-cell\">Cell 1</td>\n <td class=\"data-grid-cell\">Cell 2</td>\n </tr>\n </tbody>\n</table>"
})]
})]
});
};
export default StyleExample;