GovTechSG · saiutkarsh33 · Sep 3, 2024 · Sep 3, 2024 · Sep 3, 2024 · Sep 9, 2024
diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
@@ -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;

diff --git a/.storybook/preview.ts b/.storybook/preview.ts
@@ -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 }

diff --git a/copy.html b/copy.html
@@ -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>
+
diff --git a/index.html b/index.html
@@ -73,6 +73,9 @@
             padding: 1rem;
             grid-area: main;
         }
+        sgds-button {
+            --btn-border-radius: 0;
+        }
 
     </style>
     <script type="module">
@@ -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>