chore: init template

.gitignore

@@ -1,2 +1,24 @@
-.idea/
-/package-lock.json
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

README.md

@@ -1,55 +1,28 @@
-# Toolkit Template
+# ilw-icon
 
-Repository template for creating a new Web Component, specifically
-tailored to be part of the
-[Web at Illinois](https://github.com/web-illinois) Web Implementation
-Guidelines Group (WIGG) [Toolkit](https://github.com/web-illinois/toolkit-management).
+Links: **[ilw-icon in Builder](https://builder3.toolkit.illinois.edu/component/ilw-icon/index.html)** | 
+[Illinois Web Theme](https://webtheme.illinois.edu/) | 
+[Toolkit Development](https://github.com/web-illinois/toolkit-management)
 
-## How To Use
+## Overview
 
-> [!IMPORTANT]
-> Follow the [steps in the toolkit-management documentation](https://github.com/web-illinois/toolkit-management/blob/main/documentation/README.md)
-> to contribute a component to the toolkit.
+A 1-3 paragraph explanation of what the component does and how it presents.
 
-## How this template works
+## Code Examples
 
-The content that will be in the resulting repository is templated under
-the [`template`](./template) directory. The templating is configured
-in [`index.js`](./index.js), and uses a simple scaffolding tool called
-[CAZ](https://github.com/zce/caz).
+```html
+<ilw-icon></ilw-icon>
+```
 
-There is a [templating GitHub Workflow](./.github/workflows/templating.yml) in this
-repository that's configured to run only once when the template is used.
-That workflow executes CAZ to scaffold the repository to the proper contents
-with the naming determined by the new repository's name.
+## Accessibility Notes and Use
 
-CAZ accepts input using "prompts", which can be specified in the command
-line invocation of the tool. The workflow specifies the values to those
-prompts, and CAZ takes care of the rest.
+Consider accessibility, both for building the component and for its use:
 
-Finally, the workflow commits the changes to the new repository. This usually
-takes less than 10 seconds. Once done, the repository is ready to be worked on.
-
-## Developing this template
-
-### Adding files
-
-New files can be added to the [`template`](./template) directory, and they
-are automatically picked up.
-
-- Substitutions in file names happen with curly braces, `{variable}`
-- Inside files, [lodash](https://lodash.com/docs#template) templates are used,
-  which uses `<%= variable %>` as delimiters.
-
-> [!NOTE]
-> GitHub Workflows cannot be templated, and so must be entirely dynamic
-> and contained in the main [`.github/workflows`](./.github/workflows) directory.
-
-### Adding Variables
-
-If additional variables are needed, they must be added in two locations:
-
-1. In [`index.js`](./index.js) as prompts.
-2. In the [workflow](./.github/workflows/templating.yml), they need to be
-   given values as arguments for the `caz` command.
+- Is there sufficient color contrast?
+- Can the component be fully understood without colors?
+- Does the component need alt text or ARIA roles?
+- Can the component be navigated with a keyboard? Is the tab order correct?
+- Are focusable elements interactive, and interactive elements focusable?
+- Are form fields, figures, fieldsets and other interactive elements labelled?
 
+## External References

template/builder/{name}.json → builder/ilw-icon.json

@@ -1,9 +1,9 @@
 {
-    "title": "<%= _.startCase(name.slice(4)) %>",
-    "tag": "<%= name %>",
-    "github": "https://github.com/web-illinois/<%= name %>/",
+    "title": "Icon",
+    "tag": "ilw-icon",
+    "github": "https://github.com/web-illinois/ilw-icon/",
     "type": "web component",
-    "element-name": "<%= name %>",
+    "element-name": "ilw-icon",
     "description": "Description for builder.",
     "toolkit-version": "",
     "production-version": "",

template/builder/versions/{name}.1.0.0-alpha.json → builder/versions/ilw-icon.1.0.0-alpha.json

@@ -1,14 +1,14 @@
 {
-    "title": "<%= _.startCase(name.slice(4)) %>",
-    "tag": "<%= name %>",
-    "github": "https://github.com/web-illinois/<%= name %>/",
+    "title": "Icon",
+    "tag": "ilw-icon",
+    "github": "https://github.com/web-illinois/ilw-icon/",
     "type": "web component",
-    "element-name": "<%= name %>",
+    "element-name": "ilw-icon",
     "description": "Description for builder.",
     "version": "1.0.0-alpha",
-    "date": "<%= month %>/<%= day %>/<%= year %>",
-    "css": "https://dev.toolkit.illinois.edu/<%= name %>/1.0.0-alpha/<%= name %>.css",
-    "js": "https://dev.toolkit.illinois.edu/<%= name %>/1.0.0-alpha/<%= name %>.js",
+    "date": "09/04/2024",
+    "css": "https://dev.toolkit.illinois.edu/ilw-icon/1.0.0-alpha/ilw-icon.css",
+    "js": "https://dev.toolkit.illinois.edu/ilw-icon/1.0.0-alpha/ilw-icon.js",
     "production": false,
     "notes": "",
     "parent-style": "",

template/package.json → package.json

@@ -1,7 +1,7 @@
 {
-    "name": "@illinois-toolkit/<%= name %>",
+    "name": "@illinois-toolkit/ilw-icon",
     "description": "One paragraph description of the component.",
-    "repository": "github:<%= repository %>",
+    "repository": "github:web-illinois/ilw-icon",
     "private": false,
     "license": "MIT",
     "version": "0.0.1",
@@ -13,12 +13,12 @@
     ],
     "exports": {
         ".": {
-            "import": "./src/<%= name %>.js",
-            "require": "./dist/<%= name %>.cjs",
-            "default": "./dist/<%= name %>.js"
+            "import": "./src/ilw-icon.js",
+            "require": "./dist/ilw-icon.cjs",
+            "default": "./dist/ilw-icon.js"
         }
     },
-    "main":"./dist/<%= name %>.js",
+    "main":"./dist/ilw-icon.js",
     "scripts": {
         "dev": "vite",
         "build": "vite build --config vite.build.config.js --emptyOutDir",

template/samples/index.html → samples/index.html

@@ -4,14 +4,14 @@
 <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title><%= _.startCase(name.slice(4)) %> Component</title>
+    <title>Icon Component</title>
     <link rel="stylesheet" href="https://cdn.brand.illinois.edu/illinois.css">
     <link rel="stylesheet" href="https://dev.toolkit.illinois.edu/ilw-global/3.0.0-alpha/ilw-global.css">
-    <script type="module" src="/src/<%= name %>.js"></script>
+    <script type="module" src="/src/ilw-icon.js"></script>
 </head>
 
 <body style="margin: 0; padding: 0;">
-<<%= name %>></<%= name %>>
+<ilw-icon></ilw-icon>
 </body>
 
 </html>

template/src/{name}.js → src/ilw-icon.js

@@ -1,8 +1,8 @@
 import { LitElement, html } from 'lit';
-import styles from './<%= name %>.styles';
-import './<%= name %>.css';
+import styles from './ilw-icon.styles';
+import './ilw-icon.css';
 
-class <%= _.upperFirst(_.camelCase(name.slice(4))) %> extends LitElement {
+class Icon extends LitElement {
 
     static get properties() {
         return {
@@ -28,4 +28,4 @@ class <%= _.upperFirst(_.camelCase(name.slice(4))) %> extends LitElement {
     }
 }
 
-customElements.define('<%= name %>', <%= _.upperFirst(_.camelCase(name.slice(4))) %>);
+customElements.define('ilw-icon', Icon);

template/vite.build.config.js → vite.build.config.js

@@ -6,15 +6,15 @@ export default defineConfig({
     build: {
         outDir: "../dist",
         lib: {
-            name: "<%= name %>",
-            entry: "<%= name %>.js",
-            fileName: "<%= name %>",
+            name: "ilw-icon",
+            entry: "ilw-icon.js",
+            fileName: "ilw-icon",
             formats: ["es", "cjs", "umd"],
         },
         rollupOptions: {
             output: {
                 assetFileNames: (chunkInfo) => {
-                    if (chunkInfo.name === "style.css") return "<%= name %>.css";
+                    if (chunkInfo.name === "style.css") return "ilw-icon.css";
                 },
             },
         },