@nestbotics/nct_frontend_common_components/dist/components/examples/StyleExample.js

A collection of reusable React components with theme management and styling utilities

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _StyleProvider = require("../common/StyleProvider");
var _jsxRuntime = require("react/jsx-runtime");
// Example component showing how to use the styles in different ways
var StyleExample = function StyleExample() {
  // Example of using inline styles directly
  var titleStyle = (0, _StyleProvider.getTypographyStyle)('titleL', {
    color: '#333'
  });
  var bodyStyle = (0, _StyleProvider.getTypographyStyle)('bodyM');

  // Example of combining dataGrid styles
  var tableStyle = (0, _StyleProvider.getDataGridStyles)(['base', 'scrollable'], {
    marginTop: '20px',
    marginBottom: '20px'
  });
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
    style: {
      padding: '20px'
    },
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h2", {
      children: "Typography Examples"
    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
      style: {
        marginBottom: '30px'
      },
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h3", {
        children: "Using Typography Component"
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_StyleProvider.Typography, {
        variant: "titleL",
        children: "Title Large"
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_StyleProvider.Typography, {
        variant: "titleM",
        children: "Title Medium"
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_StyleProvider.Typography, {
        variant: "titleS",
        children: "Title Small"
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_StyleProvider.Typography, {
        variant: "bodyL",
        children: "Body Large text example"
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_StyleProvider.Typography, {
        variant: "bodyM",
        children: "Body Medium text example"
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_StyleProvider.Typography, {
        variant: "bodyS",
        children: "Body Small text example"
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_StyleProvider.Typography, {
        variant: "labelL",
        children: "Label Large"
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_StyleProvider.Typography, {
        variant: "emphasisM",
        component: "span",
        children: "Emphasized Medium text"
      })]
    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
      style: {
        marginBottom: '30px'
      },
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h3", {
        children: "Using Typography Styles Directly"
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("h1", {
        style: titleStyle,
        children: "This is a heading with titleL styles"
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
        style: bodyStyle,
        children: "This paragraph uses bodyM styles directly applied as inline styles."
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        style: (0, _StyleProvider.getTypographyStyle)('emphasisL', {
          color: 'darkblue'
        }),
        children: "This div has emphasisL styles with a custom color."
      })]
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("h2", {
      children: "Data Grid Examples"
    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
      style: {
        marginBottom: '30px'
      },
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h3", {
        children: "Generic Table with Data Grid Styles"
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        style: tableStyle,
        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("table", {
          style: {
            width: '100%',
            borderCollapse: 'collapse'
          },
          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("thead", {
            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("tr", {
              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("th", {
                className: "data-grid-header-cell",
                children: "ID"
              }), /*#__PURE__*/(0, _jsxRuntime.jsx)("th", {
                className: "data-grid-header-cell",
                children: "Name"
              }), /*#__PURE__*/(0, _jsxRuntime.jsx)("th", {
                className: "data-grid-header-cell",
                children: "Position"
              })]
            })
          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("tbody", {
            children: [1, 2, 3].map(function (i) {
              return /*#__PURE__*/(0, _jsxRuntime.jsxs)("tr", {
                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("td", {
                  className: "data-grid-cell",
                  children: i
                }), /*#__PURE__*/(0, _jsxRuntime.jsx)("td", {
                  className: "data-grid-cell",
                  children: "User ".concat(i)
                }), /*#__PURE__*/(0, _jsxRuntime.jsx)("td", {
                  className: "data-grid-cell",
                  children: "Position ".concat(i)
                })]
              }, i);
            })
          })]
        })
      })]
    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h3", {
        children: "HTML Structure with Classes (would be styled via CSS)"
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("pre", {
        style: (0, _StyleProvider.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>"
      })]
    })]
  });
};
var _default = exports.default = StyleExample;