Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Playground elements #226

Open
wants to merge 18 commits into
base: master
Choose a base branch
from
Open

Playground elements #226

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
b3131c5
chore(*): add playground elements in Button
clukhei Sep 3, 2024
03cdbd9
chore: remove and reinstall package json
saiutkarsh33 Sep 3, 2024
1f8c3bc
Merge remote-tracking branch 'origin/master' into playground-elements
saiutkarsh33 Sep 3, 2024
c5ee7db
feat: add playground ide for card and button without bugs, breadcrumb…
saiutkarsh33 Sep 9, 2024
e83da43
chore(*): resolve merge conflict
saiutkarsh33 Sep 10, 2024
587c228
chore(*): fix cjs esm build error from babel
saiutkarsh33 Sep 10, 2024
26e7b5e
chore(*): lint fixes
saiutkarsh33 Sep 10, 2024
bc1395f
chore(*): remove package lock
saiutkarsh33 Sep 10, 2024
84995a5
feat(button): create button playground with docs
saiutkarsh33 Sep 10, 2024
44ab53f
feat(action card, accordion, alert, badge, breadcrumb): playground ide
saiutkarsh33 Sep 10, 2024
6e0e910
fix: fixed bugs in playground set up
saiutkarsh33 Sep 13, 2024
978b734
feat(card, checkbox, combobox): finish playground set up
saiutkarsh33 Sep 16, 2024
487a5ba
feat: write playground generating script, with bug
saiutkarsh33 Sep 26, 2024
16582ac
docs(accordion): pull html snippet from basic to playground
clukhei Sep 26, 2024
53a5f23
feat: finish playground script and add injection point
saiutkarsh33 Sep 27, 2024
cec4e1c
docs: playground element ide set up
saiutkarsh33 Oct 3, 2024
654c776
feat: clean up playground ide
saiutkarsh33 Oct 8, 2024
25b5581
feat: clean up playground ide for all components
saiutkarsh33 Oct 15, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 9 additions & 1 deletion .storybook/preview-head.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,17 @@
<script type="module" id="dev-console-gateway"
src="https://assets.developer.tech.gov.sg/bundled-scripts/dev-console-gateway.bundle.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@200;400;600;700&display=swap">


<script
type="module"
src="/node_modules/playground-elements/playground-ide.js">
</script>

<style>
body {
font-family: Inter, sans-serif;
Expand Down
2 changes: 1 addition & 1 deletion .storybook/preview.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import customElements from "../custom-elements.json";
import { themes } from "@storybook/theming";
import "@webcomponents/scoped-custom-element-registry/scoped-custom-element-registry.min.js";
import { setCustomElementsManifest } from "@storybook/web-components";
import "./global.css";
import "../lib/themes/day.css";
import "../lib/index.js";

export const setCustomElementsManifestWithOptions = (
customElements: any,
options: { privateFields?: boolean }
Expand Down
109 changes: 109 additions & 0 deletions copy.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,109 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Interactive Playground</title>
<script type="module" src="https://unpkg.com/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
<script type="module" src="/node_modules/playground-elements/playground-ide.js"></script>
<style>
body {
font-family: Arial, sans-serif;
}

</style>
</head>
<body>
<h2>Interactive Playground Example for SGDS Button</h2>

<playground-ide editable-file-system line-numbers resizable>
<script type="sample/html" filename="index.html">
<!doctype html>
<script src="https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component">&lt;/script>
<style>
sgds-button {
--size: "sm"
}
.red-border {
border: 20px solid red;
}
</style>

<form id="form1">
<label for="input1">Form 1 Input:</label>
<input type="text" id="input1" name="input1">
</form>

<!-- Form 2 -->
<form id="form2">
<label for="input2">Form 2 Input:</label>
<input type="text" id="input2" name="input2">
</form>


</head>
<body>
<sgds-button
id="dynamic-button"
variant="primary"
type="button"
size = "lg"
active = ""
class="red-border"
href="https://www.google.com"
target = "_blank"
download="sample-download.pdf"
form="form1"
formaction="https://httpbin.org/post"
formmethod="post"
formtarget="_blank"
formnovalidate>
Submit Form 1
</sgds-button>



</body>

</script>

<script type="sample/css" filename="styles.css">

sgds-button {
--size: "sm"
}
.red-border {
border: 20px solid red;
}

</script>

<script type="sample/js" filename="button-settings.js">
document.addEventListener('DOMContentLoaded', () => {
const button = document.getElementById('dynamic-button');

if (button) {
button.addEventListener('sgds-blur', () => {
console.log('Button lost focus');
});


button.addEventListener('sgds-focus', () => {
console.log('Button gained focus');
});


console.log('Button label:', button.textContent.trim());
} else {
console.error('Button not found');
}
});
</script>



</playground-ide>
</section>
</body>
</html>

5 changes: 4 additions & 1 deletion index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,9 @@
padding: 1rem;
grid-area: main;
}
sgds-button {
--btn-border-radius: 0;
}

</style>
<script type="module">
Expand Down Expand Up @@ -125,7 +128,7 @@
<sgds-dropdown-item href="#">Item 2</sgds-dropdown-item>
<sgds-dropdown-item href="#">Item 3</sgds-dropdown-item>
</sgds-mainnav-dropdown>
<sgds-button slot="end">Login</sgds-button>
<sgds-button slot="end" size="lg">Login</sgds-button>
<dev-console-widget slot="non-collapsible" iconColor="black" iconWidth="28px" iconHeight="28px">
</dev-console-widget>
</sgds-mainnav>
Expand Down
Loading