feat: counter component initial setup #54

AlaskaAirlines · Dec 5, 2024 · df727e3 · df727e3
1 parent c84c627
commit df727e3
Show file tree

Hide file tree

Showing 29 changed files with 1,723 additions and 0 deletions.
diff --git a/components/counter/.stylelintrc.json b/components/counter/.stylelintrc.json
@@ -0,0 +1,3 @@
+{
+  "extends": "@auro-formkit/config/stylelint"
+}
diff --git a/components/counter/apiExamples/basic.html b/components/counter/apiExamples/basic.html
@@ -0,0 +1,3 @@
+<auro-counter>
+  Lorem ipsum solar
+</auro-counter>
diff --git a/components/counter/demo/api.html b/components/counter/demo/api.html
@@ -0,0 +1,52 @@
+<!--
+  Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
+  See LICENSE in the project root for license information.
+
+  HTML in this document is standardized and NOT to be edited.
+  All demo code should be added/edited in ./demo/index.md
+
+  With the exception of adding custom elements if needed for the demo.
+
+  ----------------------- DO NOT EDIT -----------------------------
+
+-->
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Auro Web Component Generator | auro-counter custom element</title>
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="https://cdn.jsdelivr.net/npm/[email protected]/themes/prism.css"
+    />
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/tokens/CSSCustomProperties.css">
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
+  </head>
+  <body class="auro-markdown">
+    <main></main>
+
+    <script type="module">
+      import 'https://cdn.jsdelivr.net/npm/marked@latest/marked.min.js';
+      import 'https://cdn.jsdelivr.net/npm/prismjs@latest/prism.js';
+      fetch('./api.md')
+        .then((response) => response.text())
+        .then((text) => {
+          const rawHtml = marked.parse(text);
+          document.querySelector('main').innerHTML = rawHtml;
+          Prism.highlightAll();
+        })
+    </script>
+    <script type="module">
+      import { initExamples } from "./api.min.js";
+
+      initExamples();
+    </script>
+    <!-- If additional elements are needed for the demo, add them here. -->
+    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-button@latest/dist/auro-button__bundled.js" type="module"></script>
+  </body>
+</html>
diff --git a/components/counter/demo/api.js b/components/counter/demo/api.js
@@ -0,0 +1,16 @@
+/* eslint-disable jsdoc/require-jsdoc, no-magic-numbers */
+import '../src/index.js';
+
+export function initExamples(initialCount = 0) {
+  try {
+    // javascript example function calls to be added here upon creation to test examples
+
+  } catch (err) {
+    if (initialCount <= 20) {
+      // setTimeout handles issue where content is sometimes loaded after the functions get called
+      setTimeout(() => {
+        initExamples(initialCount + 1);
+      }, 100);
+    }
+  }
+}