diff --git a/helpers/frontend/views/frontend-components.njk b/helpers/frontend/views/frontend-components.njk index 4ff04bca1..e26fd3aab 100644 --- a/helpers/frontend/views/frontend-components.njk +++ b/helpers/frontend/views/frontend-components.njk @@ -29,6 +29,39 @@ }] }) }} +

action-table

+ +{{ actionTable({ + caption: "Dates and amounts", + firstCellIsHeader: true, + head: [ + { + text: "Name" + }, + { + text: "Age" + } + ], + rows: [ + [ + { + text: "Peter" + }, + { + text: "10" + } + ], + [ + { + text: "Paul" + }, + { + text: "12" + } + ] + ] +}) }} +

authorize

{{ authorize({ diff --git a/package-lock.json b/package-lock.json index 366ba6bb4..45ea900f2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -70,33 +70,43 @@ } }, "helpers/access-token": { + "name": "@indiekit-test/token", "license": "MIT" }, "helpers/config": { + "name": "@indiekit-test/config", "license": "MIT" }, "helpers/database": { + "name": "@indiekit-test/database", "license": "MIT" }, "helpers/fixtures": { + "name": "@indiekit-test/fixtures", "license": "MIT" }, "helpers/frontend": { + "name": "@indiekit-test/frontend", "license": "MIT" }, "helpers/media-data": { + "name": "@indiekit-test/media-data", "license": "MIT" }, "helpers/mock-agent": { + "name": "@indiekit-test/mock-agent", "license": "MIT" }, "helpers/post-data": { + "name": "@indiekit-test/post-data", "license": "MIT" }, "helpers/publication": { + "name": "@indiekit-test/publication", "license": "MIT" }, "helpers/server": { + "name": "@indiekit-test/server", "license": "MIT", "dependencies": { "get-port": "^7.0.0" @@ -114,9 +124,11 @@ } }, "helpers/session": { + "name": "@indiekit-test/session", "license": "MIT" }, "helpers/store": { + "name": "@indiekit-test/store", "license": "MIT" }, "node_modules/@aashutoshrathi/word-wrap": { @@ -1297,6 +1309,11 @@ "node": ">=6.0.0" } }, + "node_modules/@colinaut/action-table": { + "version": "2.4.14", + "resolved": "https://registry.npmjs.org/@colinaut/action-table/-/action-table-2.4.14.tgz", + "integrity": "sha512-7F1j89aSy3j1y5bfcmZOfZDjhHsYL3Z1pjupVMVTMqVBkf/UaxpPRLkmk7DG3EbvfmQqdGjyEntt52+JD8DjEA==" + }, "node_modules/@commitlint/cli": { "version": "19.2.1", "resolved": "https://registry.npmjs.org/@commitlint/cli/-/cli-19.2.1.tgz", @@ -20964,6 +20981,7 @@ } }, "packages/endpoint-auth": { + "name": "@indiekit/endpoint-auth", "version": "1.0.0-beta.12", "license": "MIT", "dependencies": { @@ -20980,6 +20998,7 @@ } }, "packages/endpoint-files": { + "name": "@indiekit/endpoint-files", "version": "1.0.0-beta.12", "license": "MIT", "dependencies": { @@ -20992,6 +21011,7 @@ } }, "packages/endpoint-image": { + "name": "@indiekit/endpoint-image", "version": "1.0.0-beta.10", "license": "MIT", "dependencies": { @@ -21003,6 +21023,7 @@ } }, "packages/endpoint-json-feed": { + "name": "@indiekit/endpoint-json-feed", "version": "1.0.0-beta.10", "license": "MIT", "dependencies": { @@ -21014,6 +21035,7 @@ } }, "packages/endpoint-media": { + "name": "@indiekit/endpoint-media", "version": "1.0.0-beta.12", "license": "MIT", "dependencies": { @@ -21030,6 +21052,7 @@ } }, "packages/endpoint-micropub": { + "name": "@indiekit/endpoint-micropub", "version": "1.0.0-beta.12", "license": "MIT", "dependencies": { @@ -21047,6 +21070,7 @@ } }, "packages/endpoint-posts": { + "name": "@indiekit/endpoint-posts", "version": "1.0.0-beta.13", "license": "MIT", "dependencies": { @@ -21064,6 +21088,7 @@ } }, "packages/endpoint-share": { + "name": "@indiekit/endpoint-share", "version": "1.0.0-beta.12", "license": "MIT", "dependencies": { @@ -21076,6 +21101,7 @@ } }, "packages/endpoint-syndicate": { + "name": "@indiekit/endpoint-syndicate", "version": "1.0.0-beta.12", "license": "MIT", "dependencies": { @@ -21088,6 +21114,7 @@ } }, "packages/error": { + "name": "@indiekit/error", "version": "1.0.0-beta.12", "license": "MIT", "engines": { @@ -21095,10 +21122,12 @@ } }, "packages/frontend": { + "name": "@indiekit/frontend", "version": "1.0.0-beta.13", "license": "MIT", "dependencies": { "@accessible-components/tag-input": "^0.2.0", + "@colinaut/action-table": "^2.4.14", "@indiekit/error": "^1.0.0-beta.12", "@indiekit/util": "^1.0.0-beta.10", "@rollup/plugin-commonjs": "^25.0.3", @@ -21124,6 +21153,7 @@ } }, "packages/indiekit": { + "name": "@indiekit/indiekit", "version": "1.0.0-beta.13", "license": "MIT", "dependencies": { @@ -21190,6 +21220,7 @@ "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==" }, "packages/post-type-article": { + "name": "@indiekit/post-type-article", "version": "1.0.0-beta.10", "license": "MIT", "engines": { @@ -21197,6 +21228,7 @@ } }, "packages/post-type-audio": { + "name": "@indiekit/post-type-audio", "version": "1.0.0-beta.13", "license": "MIT", "dependencies": { @@ -21207,6 +21239,7 @@ } }, "packages/post-type-bookmark": { + "name": "@indiekit/post-type-bookmark", "version": "1.0.0-beta.10", "license": "MIT", "dependencies": { @@ -21217,6 +21250,7 @@ } }, "packages/post-type-event": { + "name": "@indiekit/post-type-event", "version": "1.0.0-beta.10", "license": "MIT", "dependencies": { @@ -21227,6 +21261,7 @@ } }, "packages/post-type-jam": { + "name": "@indiekit/post-type-jam", "version": "1.0.0-beta.10", "license": "MIT", "dependencies": { @@ -21237,6 +21272,7 @@ } }, "packages/post-type-like": { + "name": "@indiekit/post-type-like", "version": "1.0.0-beta.10", "license": "MIT", "dependencies": { @@ -21247,6 +21283,7 @@ } }, "packages/post-type-note": { + "name": "@indiekit/post-type-note", "version": "1.0.0-beta.8", "license": "MIT", "engines": { @@ -21254,6 +21291,7 @@ } }, "packages/post-type-photo": { + "name": "@indiekit/post-type-photo", "version": "1.0.0-beta.13", "license": "MIT", "engines": { @@ -21261,6 +21299,7 @@ } }, "packages/post-type-reply": { + "name": "@indiekit/post-type-reply", "version": "1.0.0-beta.10", "license": "MIT", "dependencies": { @@ -21271,6 +21310,7 @@ } }, "packages/post-type-repost": { + "name": "@indiekit/post-type-repost", "version": "1.0.0-beta.10", "license": "MIT", "dependencies": { @@ -21281,6 +21321,7 @@ } }, "packages/post-type-rsvp": { + "name": "@indiekit/post-type-rsvp", "version": "1.0.0-beta.10", "license": "MIT", "dependencies": { @@ -21291,6 +21332,7 @@ } }, "packages/post-type-video": { + "name": "@indiekit/post-type-video", "version": "1.0.0-beta.13", "license": "MIT", "dependencies": { @@ -21301,6 +21343,7 @@ } }, "packages/preset-eleventy": { + "name": "@indiekit/preset-eleventy", "version": "1.0.0-beta.10", "license": "MIT", "dependencies": { @@ -21324,6 +21367,7 @@ } }, "packages/preset-hugo": { + "name": "@indiekit/preset-hugo", "version": "1.0.0-beta.10", "license": "MIT", "dependencies": { @@ -21348,6 +21392,7 @@ } }, "packages/preset-jekyll": { + "name": "@indiekit/preset-jekyll", "version": "1.0.0-beta.12", "license": "MIT", "dependencies": { @@ -21371,6 +21416,7 @@ } }, "packages/store-bitbucket": { + "name": "@indiekit/store-bitbucket", "version": "1.0.0-beta.12", "license": "MIT", "dependencies": { @@ -21382,6 +21428,7 @@ } }, "packages/store-file-system": { + "name": "@indiekit/store-file-system", "version": "1.0.0-beta.12", "license": "MIT", "dependencies": { @@ -21392,6 +21439,7 @@ } }, "packages/store-ftp": { + "name": "@indiekit/store-ftp", "version": "1.0.0-beta.12", "license": "MIT", "dependencies": { @@ -21403,6 +21451,7 @@ } }, "packages/store-gitea": { + "name": "@indiekit/store-gitea", "version": "1.0.0-beta.12", "license": "MIT", "dependencies": { @@ -21413,6 +21462,7 @@ } }, "packages/store-github": { + "name": "@indiekit/store-github", "version": "1.0.0-beta.12", "license": "MIT", "dependencies": { @@ -21423,6 +21473,7 @@ } }, "packages/store-gitlab": { + "name": "@indiekit/store-gitlab", "version": "1.0.0-beta.12", "license": "MIT", "dependencies": { @@ -21434,6 +21485,7 @@ } }, "packages/store-s3": { + "name": "@indiekit/store-s3", "version": "1.0.0-beta.12", "license": "MIT", "dependencies": { @@ -21445,6 +21497,7 @@ } }, "packages/syndicator-internet-archive": { + "name": "@indiekit/syndicator-internet-archive", "version": "1.0.0-beta.12", "license": "MIT", "dependencies": { @@ -21455,6 +21508,7 @@ } }, "packages/syndicator-mastodon": { + "name": "@indiekit/syndicator-mastodon", "version": "1.0.0-beta.12", "license": "MIT", "dependencies": { @@ -21469,6 +21523,7 @@ } }, "packages/util": { + "name": "@indiekit/util", "version": "1.0.0-beta.10", "license": "MIT", "dependencies": { diff --git a/packages/frontend/components/action-table/macro.njk b/packages/frontend/components/action-table/macro.njk new file mode 100644 index 000000000..3f48318ed --- /dev/null +++ b/packages/frontend/components/action-table/macro.njk @@ -0,0 +1,3 @@ +{% macro actionTable(opts) %} + {%- include "./template.njk" -%} +{% endmacro %} \ No newline at end of file diff --git a/packages/frontend/components/action-table/styles.css b/packages/frontend/components/action-table/styles.css new file mode 100644 index 000000000..64ef8170b --- /dev/null +++ b/packages/frontend/components/action-table/styles.css @@ -0,0 +1,58 @@ +action-table, +action-table-filters, +action-table-no-results { + display: block; +} + +action-table { + table { + inline-size: 100%; + } + + & tbody tr { + &:hover { + background-color: var(--color-offset); + } + } + + td, + th { + border-block-end: var(--border-width-thin) solid var(--color-outline); + padding-block: var(--space-m); + padding-inline-end: var(--space-l); + padding-inline-start: var(--space-xs); + } + + & button { + background: none; + } + + & th button { + display: flex; + gap: var(--space-2xs); + place-items: center; + + &::after { + background-image: url('data:image/svg+xml,'); + background-repeat: no-repeat; + block-size: 1em; + content: ""; + display: block; + inline-size: 1em; + opacity: 0.25; + } + } + + & th[aria-sort$="ing"] button::after { + opacity: 1; + } + + & th[aria-sort="descending"] button::after { + opacity: 1; + transform: rotate(180deg); + } + + .s-flow { + --font-heading: var(--font-subhead); + } +} diff --git a/packages/frontend/components/action-table/template.njk b/packages/frontend/components/action-table/template.njk new file mode 100644 index 000000000..d389dfc81 --- /dev/null +++ b/packages/frontend/components/action-table/template.njk @@ -0,0 +1,42 @@ + + +{% if opts.caption %} + +{% endif %} +{% if opts.head %} + + + {% for item in opts.head %} + + {% endfor %} + + +{% endif %} + +{% for row in opts.rows %} + {% if row %} + + {% for cell in row %} + {% if loop.first and opts.firstCellIsHeader %} + + {% else %} + + {% endif %} + {% endfor %} + + {% endif %} +{% endfor %} + +
{{- opts.caption -}}
+ {{- item.text | safe -}} +
+ {{- cell.text | safe -}} + + {{- cell.text | safe -}} +
+{% if caller %}{{ caller() }}{%- endif %} + diff --git a/packages/frontend/layouts/default.njk b/packages/frontend/layouts/default.njk index 3118619b4..f32b5bbfb 100644 --- a/packages/frontend/layouts/default.njk +++ b/packages/frontend/layouts/default.njk @@ -1,3 +1,4 @@ +{% from "action-table/macro.njk" import actionTable with context %} {% from "add-another/macro.njk" import addAnother with context %} {% from "back-link/macro.njk" import backLink with context %} {% from "badge/macro.njk" import badge with context %} diff --git a/packages/frontend/package.json b/packages/frontend/package.json index a88fa3037..203e0fce1 100644 --- a/packages/frontend/package.json +++ b/packages/frontend/package.json @@ -37,6 +37,7 @@ }, "dependencies": { "@accessible-components/tag-input": "^0.2.0", + "@colinaut/action-table": "^2.4.14", "@indiekit/error": "^1.0.0-beta.12", "@indiekit/util": "^1.0.0-beta.10", "@rollup/plugin-commonjs": "^25.0.3", diff --git a/packages/frontend/scripts/app.js b/packages/frontend/scripts/app.js index 5d4fd551e..6538028af 100644 --- a/packages/frontend/scripts/app.js +++ b/packages/frontend/scripts/app.js @@ -1,3 +1,5 @@ +import "@colinaut/action-table"; + import { AddAnotherComponent } from "../components/add-another/index.js"; import { CheckboxesFieldComponent } from "../components/checkboxes/index.js"; import { ErrorSummaryComponent } from "../components/error-summary/index.js"; diff --git a/packages/frontend/styles/app.css b/packages/frontend/styles/app.css index 5d00f4fd9..5b264740c 100644 --- a/packages/frontend/styles/app.css +++ b/packages/frontend/styles/app.css @@ -14,6 +14,7 @@ @import url("./scopes/flow.css"); /* Components */ +@import url("../components/action-table/styles.css"); @import url("../components/actions/styles.css"); @import url("../components/add-another/styles.css"); @import url("../components/app/styles.css");