feat: add file web component

.changeset/brave-bikes-behave.md

@@ -0,0 +1,7 @@
+---
+"@gemeente-denhaag/file-element": major
+"@gemeente-denhaag/file": minor
+---
+
+- Add stylesheet exports to @gemeente-denhaag/file package.json
+- Add file web component

components/File/package.json

@@ -11,7 +11,17 @@
       "import": "./dist/mjs/index.js",
       "default": "./dist/cjs/index.js"
     },
-    "./index.css": "./dist/index.css"
+    "./index.css": "./dist/index.css",
+    "./dist/css.mjs": {
+      "types": "./dist/mjs/css.d.mts",
+      "import": "./dist/mjs/css.mjs",
+      "default": "./dist/mjs/css.mjs"
+    },
+    "./dist/stylesheet.mjs": {
+      "types": "./dist/mjs/stylesheet.d.mts",
+      "import": "./dist/mjs/stylesheet.mjs",
+      "default": "./dist/mjs/stylesheet.mjs"
+    }
   },
   "main": "dist/cjs/index.js",
   "module": "dist/mjs/index.js",

packages/web-components/case-card/src/index.html

@@ -5,7 +5,7 @@
     content="
   default-src 'none';
   script-src 'self' https://unpkg.com;
-  style-src 'self' https://unpkg.com;
+  style-src 'self' 'unsafe-inline' https://unpkg.com;
   img-src 'self' data:;
   font-src 'self';
   connect-src 'self';
@@ -23,16 +23,16 @@
 <link rel="stylesheet" href="https://unpkg.com/@gemeente-denhaag/design-tokens-components@3.0.1/dist/index.css" />
 <link rel="stylesheet" href="https://unpkg.com/@gemeente-denhaag/icons@3.0.0/dist/index.css" />
 <link rel="stylesheet" href="https://unpkg.com/@utrecht/document-css@1.5.0/dist/index.css" />
-<link rel="stylesheet" href="https://unpkg.com/@utrecht/paragraph-css@2.3.0/dist/index.css" />
+<link rel="stylesheet" href="https://unpkg.com/@nl-design-system-candidate/paragraph-css@2.1.0/dist/paragraph.css" />
 <link rel="stylesheet" href="https://unpkg.com/@utrecht/document-css@1.5.0/dist/index.css" />
 
 <div class="utrecht-document utrecht-document--surface">
   <h2>My cases</h2>
-  <div class="grid">
+  <div class="grid" style="max-width: 360px">
     <h3>All attributes</h3>
     <denhaag-case-card dateTime="2025-04-09T09:39:22.006Z" href="https://example.com/">
-      <p slot="heading" class="utrecht-paragraph">Shrimp and Chorizo Paella</p>
-      <span slot="subtitle" class="utrecht-paragraph">
+      <span slot="heading" class="nl-paragraph">Shrimp and Chorizo Paella</span>
+      <span slot="subtitle" class="nl-paragraph">
         This impressive paella is a perfect party dish and a fun meal to cook.</span
       >
       <span slot="icon">
@@ -57,35 +57,9 @@ <h3>All attributes</h3>
 
     <h3>No datetime</h3>
     <denhaag-case-card href="https://example.com/" appearance="archived">
-      <p slot="heading" class="utrecht-paragraph">Shrimp and Chorizo Paella</p>
-      <p slot="subtitle" class="utrecht-paragraph">
+      <span slot="heading" class="nl-paragraph">Shrimp and Chorizo Paella</span>
+      <span slot="subtitle" class="nl-paragraph">
         This impressive paella is a perfect party dish and a fun meal to cook.
-      </p>
-    </denhaag-case-card>
-
-    <h3>No subtitle</h3>
-    <denhaag-case-card dateTime="2025-04-09T09:39:22.006Z" href="https://example.com/" appearance="list">
-      <p slot="heading" class="utrecht-paragraph">Shrimp and Chorizo Paella</p>
-      <p slot="subtitle" class="utrecht-paragraph">
-        This impressive paella is a perfect party dish and a fun meal to cook.
-      </p>
-      <span slot="icon">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="1em"
-          height="1em"
-          fill="none"
-          viewBox="0 0 24 24"
-          class="denhaag-icon denhaag-card__arrow-icon"
-          focusable="false"
-          aria-hidden="true"
-          shape-rendering="auto"
-        >
-          <path
-            fill="currentColor"
-            d="M12.293 5.293a1 1 0 0 1 1.414 0l6 6a1 1 0 0 1 0 1.414l-6 6a1 1 0 0 1-1.414-1.414L16.586 13H5a1 1 0 1 1 0-2h11.586l-4.293-4.293a1 1 0 0 1 0-1.414"
-          ></path>
-        </svg>
       </span>
     </denhaag-case-card>
   </div>

packages/web-components/file/README.md

@@ -0,0 +1,16 @@
+# `file` Web Component
+
+Use this web component in your page as follows:
+
+Include this anywhere in your page. The higher up in the source code, the sooner your web component will load.
+
+```html
+<script type="module" src="file/dist/index.mjs"></script>
+```
+
+Then put the custom element where your want this component in your page:
+
+```html
+<h2>My documents</h2>
+<div class="grid"></div>
+```

packages/web-components/file/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@gemeente-denhaag/file-element",
+  "version": "0.1.0",
+  "description": "A file displays a link to download an attachment and metadata about the file.",
+  "bugs": "https://github.com/nl-design-system/denhaag/issues",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/nl-design-system/denhaag.git",
+    "directory": "packages/web-components/file"
+  },
+  "license": "EUPL-1.2",
+  "author": "Municipality of The Hague",
+  "exports": {
+    "./dist/element.mjs": {
+      "types": "./dist/element.d.ts",
+      "import": "./dist/element.js",
+      "default": "./dist/element.js"
+    },
+    "./dist/index.mjs": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    }
+  },
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "rollup -c ./rollup.config.mjs",
+    "clean": "rimraf dist tsconfig.tsbuildinfo",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@gemeente-denhaag/file": "workspace:*",
+    "@gemeente-denhaag/icons": "workspace:*",
+    "@utrecht/paragraph-css": "2.3.0"
+  },
+  "devDependencies": {
+    "@nl-design-system/tsconfig": "1.0.3",
+    "@rollup/plugin-typescript": "12.1.2"
+  }
+}

packages/web-components/file/rollup.config.mjs

@@ -0,0 +1,30 @@
+import nodeResolve from '@rollup/plugin-node-resolve';
+import typescript from '@rollup/plugin-typescript';
+
+const configs = [
+  {
+    input: 'src/element.ts',
+    output: {
+      dir: './dist',
+      entryFileNames: 'element.js',
+      sourcemap: false,
+      format: 'esm',
+      compact: true,
+    },
+    plugins: [nodeResolve(), typescript({ tsconfig: './tsconfig.build.json' })],
+  },
+  {
+    input: 'src/index.ts',
+    output: {
+      dir: './dist',
+      entryFileNames: 'index.js',
+      sourcemap: false,
+      format: 'esm',
+      compact: true,
+    },
+    plugins: [nodeResolve(), typescript({ tsconfig: './tsconfig.build.json' })],
+    external: ['./element.js'],
+  },
+];
+
+export default configs;