kwikid-components-react
Version:
KwikID's Component Library in React
150 lines (146 loc) • 4.18 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.TableContent = exports.RichText = exports.Default = void 0;
var _react = _interopRequireDefault(require("react"));
var _Html = _interopRequireDefault(require("./Html"));
var _Html2 = require("./Html.defaults");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
/**
* The HTML component allows rendering of HTML strings with proper sanitization.
* It's useful for displaying rich text content from CMS systems or other HTML sources.
*
* ## Usage
*
* ```jsx
* import { KwikUIHtml } from 'react-kwikui';
*
* <KwikUIHtml
* htmlString="<p>This is <strong>formatted</strong> content with <a href='#'>links</a>.</p>"
* />
* ```
*/
var _default = exports.default = {
title: "KwikUI/Content/HTML",
component: _Html.default,
parameters: {
componentSubtitle: "Render sanitized HTML content",
docs: {
description: {
component: "The HTML component safely renders HTML strings with proper sanitization to prevent XSS attacks."
}
},
a11y: {
config: {
rules: [{
id: "color-contrast",
enabled: true
}]
}
}
},
argTypes: {
htmlString: {
control: "text",
description: "The HTML string to be rendered",
table: {
type: {
summary: "string"
},
defaultValue: {
summary: _Html2.KWIKUI_HTML__DEFAULTS.htmlString || '""'
}
}
}
}
};
/**
* Template for rendering the HTML component
*/
const Template = args => {
return /*#__PURE__*/_react.default.createElement(_Html.default, args);
};
/**
* Default implementation of the HTML component
*/
const Default = exports.Default = Template.bind({});
Default.args = {
..._Html2.KWIKUI_HTML__DEFAULTS,
htmlString: "<h2>Sample HTML Content</h2><p>This is a <strong>paragraph</strong> with <em>formatting</em>.</p>"
};
Default.parameters = {
docs: {
description: {
story: "Basic example of rendering HTML content."
}
}
};
/**
* HTML component with complex rich text content
*/
const RichText = exports.RichText = Template.bind({});
RichText.args = {
htmlString: `
<h1>Rich HTML Content</h1>
<p>This example shows a variety of HTML elements:</p>
<ul>
<li>Lists with <strong>bold text</strong></li>
<li>Formatted <em>italic content</em></li>
<li>Hyperlinks like <a href="#">this example link</a></li>
</ul>
<blockquote>This is a blockquote that might come from a CMS system.</blockquote>
<div style="padding: 10px; border: 1px solid #ccc; border-radius: 4px; margin-top: 10px;">
<p>And styled containers with custom CSS</p>
</div>
`
};
RichText.parameters = {
docs: {
description: {
story: "Example showing a more complex HTML structure with various formatting elements."
}
}
};
/**
* HTML component with table content
*/
const TableContent = exports.TableContent = Template.bind({});
TableContent.args = {
htmlString: `
<h3>Data Table Example</h3>
<table border="1" style="border-collapse: collapse; width: 100%;">
<thead>
<tr style="background-color: #f2f2f2;">
<th style="padding: 8px;">Name</th>
<th style="padding: 8px;">Age</th>
<th style="padding: 8px;">Location</th>
</tr>
</thead>
<tbody>
<tr>
<td style="padding: 8px;">John Doe</td>
<td style="padding: 8px;">30</td>
<td style="padding: 8px;">New York</td>
</tr>
<tr style="background-color: #f9f9f9;">
<td style="padding: 8px;">Jane Smith</td>
<td style="padding: 8px;">25</td>
<td style="padding: 8px;">San Francisco</td>
</tr>
<tr>
<td style="padding: 8px;">Robert Johnson</td>
<td style="padding: 8px;">42</td>
<td style="padding: 8px;">Chicago</td>
</tr>
</tbody>
</table>
`
};
TableContent.parameters = {
docs: {
description: {
story: "Example showing HTML tables that might be used for data presentation."
}
}
};