diff --git a/core/scripts/testing/createPlayground.js b/core/scripts/testing/createPlayground.js new file mode 100644 index 0000000000..d0ea3ca96d --- /dev/null +++ b/core/scripts/testing/createPlayground.js @@ -0,0 +1,74 @@ +export async function createPlayground(componentTag, propDefinitions, innerContent = '') { + const playground = document.createElement('div'); + const form = document.createElement('form'); + const preview = document.createElement('div'); + preview.classList.add('preview'); + + function renderComponent(props) { + const component = document.createElement(componentTag); + Object.keys(props).forEach(propName => { + if (props[propName] !== undefined && props[propName] !== '') { + component.setAttribute(propName, props[propName]); + } + }); + + // Set inner HTML content if provided + if (innerContent) { + component.innerHTML = innerContent; + } + + preview.innerHTML = ''; + preview.appendChild(component); + } + + propDefinitions.forEach(prop => { + const label = document.createElement('label'); + const labelText = document.createElement('span'); + labelText.textContent = `${prop.name}: `; + + const input = document.createElement('input'); + input.type = prop.type === 'boolean' ? 'checkbox' : 'text'; + input.name = prop.name; + input.value = prop.defaultValue || ''; + + if (prop.type === 'boolean') { + input.checked = prop.defaultValue === 'true'; + } + + input.addEventListener('input', () => { + const formData = new FormData(form); + const props = {}; + + formData.forEach((value, key) => { + const field = form.elements[key]; + + if (field.type === 'checkbox') { + props[key] = field.checked; + } else { + props[key] = value; + } + }); + + renderComponent(props); + }); + + label.appendChild(labelText); + label.appendChild(input); + form.appendChild(label); + form.appendChild(document.createElement('br')); + }); + + playground.appendChild(preview); + // add a divider + playground.appendChild(document.createElement('hr')); + playground.appendChild(form); + + // Initial render with default props + const defaultProps = Object.fromEntries( + propDefinitions.map(prop => [prop.name, prop.defaultValue || '']) + ); + + renderComponent(defaultProps); + + return playground; +} diff --git a/core/src/components/chip/test/basic/index.html b/core/src/components/chip/test/basic/index.html index 4b79e66177..e1a45532e9 100644 --- a/core/src/components/chip/test/basic/index.html +++ b/core/src/components/chip/test/basic/index.html @@ -12,6 +12,21 @@ + @@ -21,86 +36,34 @@ Chip - Basic - -

Basic Chips

- - Default - - - Border Radius - - - - With Icon - - - - - - With Avatar - - - - - - With Icon and Avatar - - - -

Color Chips

- - Primary - - - Danger - - - - Tertiary with Icon - - - - - - Primary with Avatar - - - Success with Icon - - - -

Outline Chips

- - Outline - - - Danger Outline - - - - Secondary Outline with Icon - - - Primary Outline with Avatar - - - - - - - Outline with Icon and Avatar - - +
+