Initial NJWDS commit with Button and Icon components

newjersey · Dec 17, 2024 · ed12c05 · ed12c05
1 parent 1ee8ef4
commit ed12c05
Show file tree

Hide file tree

Showing 11 changed files with 4,002 additions and 276 deletions.
diff --git a/docs/README-es.md b/docs/README-es.md
diff --git a/index.html b/index.html
@@ -1,13 +1,122 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Lit Element Simple Starter Kit</title>
-</head>
-<body>
-    <my-element></my-element>
-    <script type="module" src="/src/my-element.ts"></script>
-</body>
-</html>
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>New Jersey Web Design System</title>
+    <!-- <link href="./dist/assets/button.css" rel="stylesheet" /> -->
+    <style>
+      *,
+      ::after,
+      ::before {
+        box-sizing: border-box;
+      }
+    </style>
+  </head>
+  <body style="padding: 12px; font-family: sans-serif">
+    <h1>NJWDS Lit Components</h1>
+    <h2>Button</h2>
+    <div style="margin-bottom: 12px; display: flex; align-items: center">
+      <nj-button variant="primary">Primary Light</nj-button>
+      <nj-button variant="secondary">Secondary Light</nj-button>
+      <nj-button variant="link">Link Light</nj-button>
+    </div>
+    <div style="margin-bottom: 12px; display: flex; align-items: center">
+      <nj-button variant="primary" icon-name="add" icon-position="leading"
+        >Primary Light</nj-button
+      >
+      <nj-button variant="primary" icon-name="add" icon-position="trailing"
+        >Primary Light</nj-button
+      >
+      <nj-button
+        variant="primary"
+        icon-name="add"
+        icon-position="icon-only"
+        icon-title="Add"
+      ></nj-button>
+      <nj-button variant="link" icon-name="add" icon-position="trailing"
+        >Link Light</nj-button
+      >
+      <nj-button variant="link" icon-name="add" icon-position="leading"
+        >Link Light</nj-button
+      >
+    </div>
+    <div style="margin-bottom: 12px; display: flex; align-items: center">
+      <nj-button variant="secondary" icon-name="add" icon-position="leading"
+        >Secondary Light</nj-button
+      >
+      <nj-button variant="secondary" icon-name="add" icon-position="trailing"
+        >Secondary Light</nj-button
+      >
+      <nj-button
+        variant="secondary"
+        icon-name="add"
+        icon-position="icon-only"
+        icon-title="Add"
+      ></nj-button>
+    </div>
+    <div
+      style="
+        margin-bottom: 12px;
+        background-color: black;
+        padding: 12px;
+        display: flex;
+        align-items: center;
+      "
+    >
+      <nj-button variant="primary" mode="dark">Primary Dark</nj-button>
+      <nj-button variant="secondary" mode="dark">Secondary Dark</nj-button>
+      <nj-button variant="link" mode="dark">Link Dark</nj-button>
+    </div>
+    <div
+      style="
+        margin-bottom: 12px;
+        background-color: black;
+        padding: 12px;
+        display: flex;
+        align-items: center;
+      "
+    >
+      <nj-button
+        variant="primary"
+        mode="dark"
+        icon-name="add"
+        icon-position="leading"
+        >Primary Dark</nj-button
+      >
+      <nj-button
+        variant="secondary"
+        mode="dark"
+        icon-name="add"
+        icon-position="trailing"
+        >Secondary Dark</nj-button
+      >
+      <nj-button
+        variant="secondary"
+        icon-name="add"
+        icon-position="icon-only"
+        icon-title="Add"
+      ></nj-button>
+    </div>
+    <div style="margin-bottom: 12px; display: flex; align-items: center">
+      <nj-button variant="primary" mode="danger">Primary Danger</nj-button>
+      <nj-button variant="secondary" mode="danger">Secondary Danger</nj-button>
+      <nj-button variant="link" mode="danger">Link Danger</nj-button>
+    </div>
+
+    <h2>Icon</h2>
+    <div style="margin-bottom: 12px">
+      <nj-icon icon-name="info" size="scale" decorative="true"></nj-icon>
+      <nj-icon icon-name="info" size="3" decorative="true"></nj-icon>
+      <nj-icon icon-name="info" size="4" decorative="true"></nj-icon>
+      <nj-icon icon-name="info" size="5" decorative="true"></nj-icon>
+    </div>
+
+    <script
+      type="module"
+      src="./dist/components/nj-button/nj-button.mjs"
+    ></script>
+    <script type="module" src="./dist/components/nj-icon/nj-icon.mjs"></script>
+  </body>
+</html>
diff --git a/package.json b/package.json
@@ -4,13 +4,27 @@
   "main": "index.js",
   "license": "MIT",
   "scripts": {
-    "dev": "vite"
+    "install": "yarn install",
+    "build": "vite build",
+    "prod": "vite preview",
+    "dev": "vite",
+    "test": "web-test-runner **/*.test.js --node-resolve"
   },
   "dependencies": {
-    "lit": "^2.0.0-rc.2"
+    "@newjersey/njwds": "^2.0.1",
+    "@open-wc/testing": "^4.0.0",
+    "chai": "^5.1.2",
+    "lit": "^3.2.0",
+    "mocha": "^10.8.2"
   },
   "devDependencies": {
-    "@types/node": "^15.12.1",
-    "vite": "^2.3.6"
-  }
+    "@types/node": "^22.7.4",
+    "@web/test-runner": "^0.19.0",
+    "jsdom": "^25.0.1",
+    "typescript": "^5.6.2",
+    "vite": "^5.4.8",
+    "vitest": "^2.1.4"
+  },
+  "repository": "https://github.com/litelement-dev/lit-simple-starter-kit.git",
+  "author": "Naman Agrawal <naman@innovation.nj.gov>"
 }
diff --git a/public/assets/sprite.svg b/public/assets/sprite.svg
diff --git a/src/global.d.ts b/src/global.d.ts
@@ -0,0 +1 @@
+declare module "*.css?inline";
diff --git a/src/my-element.ts b/src/my-element.ts