diff --git a/.gitignore b/.gitignore
index 5cdcdd61..21854aed 100644
--- a/.gitignore
+++ b/.gitignore
@@ -14,3 +14,5 @@ dist/
# os
.DS_Store
+
+.nyc_output
\ No newline at end of file
diff --git a/CHANGELOG.md b/CHANGELOG.md
index f00effc4..cd28642f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,10 @@
+## [0.1.2](https://github.com/fabric-ds/elements/compare/v0.1.1...v0.1.2) (2022-04-25)
+
+
+### Bug Fixes
+
+* decouple elements and toast api to fix SSR usage ([f7e57cb](https://github.com/fabric-ds/elements/commit/f7e57cb4139a2942c6d971ba650b30a2c825d27d))
+
## [0.1.2-next.1](https://github.com/fabric-ds/elements/compare/v0.1.1...v0.1.2-next.1) (2022-04-25)
diff --git a/package.json b/package.json
index 022bb287..19f2414f 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
{
"name": "@fabric-ds/elements",
"type": "module",
- "version": "0.1.2-next.1",
+ "version": "0.1.2",
"description": "Custom elements for Fabric",
"exports": {
".": "./dist/index.js",
@@ -30,7 +30,7 @@
"test:mock-backend:ci": "node ./tests/utils/broadcast-backend.js &",
"test:run-once": "web-test-runner tests/**/*.test.js --node-resolve --static-logging",
"test:run-watch": "web-test-runner tests/**/*.test.js --node-resolve --watch",
- "test": "npm run test:run-once",
+ "test": "npm run test:run-once && tap ./packages/**/test.js --no-check-coverage",
"watch:test": "npm run test:run-watch",
"semantic-release": "semantic-release"
},
@@ -50,15 +50,17 @@
"@web/test-runner": "^0.13.27",
"autoprefixer": "^10.2.3",
"babel-eslint": "^10.1.0",
+ "eslint": "^7.18.0",
+ "fastify": "^3.27.3",
+ "lit-element": "^2.4.0",
+ "lit-html": "^1.3.0",
+ "playwright": "^1.19.2",
"cors": "^2.8.5",
"cz-conventional-changelog": "^3.3.0",
- "element-collapse": "^0.9.1",
+ "element-collapse": "1.0.1",
"esbuild": "^0.14.0",
- "eslint": "^7.18.0",
"express": "^4.17.3",
"lerna": "^3.22.1",
- "lit-element": "^2.4.0",
- "lit-html": "^1.3.0",
"npm-run-all": "^4.1.5",
"postcss": "^8.2.4",
"postcss-cli": "^8.3.1",
@@ -70,7 +72,7 @@
"semantic-release": "^19.0.2",
"semantic-release-slack-bot": "^3.5.2",
"tailwindcss": "^2.0.2",
- "tap": "^15.1.6",
+ "tap": "^16.0.0",
"typescript": "^4.3.5",
"vite": "^2.0.0-beta.56",
"vite-plugin-html": "^2.0.0-beta.6"
diff --git a/packages/breadcrumbs/index.js b/packages/breadcrumbs/index.js
index 7e3e7a8a..8107428a 100644
--- a/packages/breadcrumbs/index.js
+++ b/packages/breadcrumbs/index.js
@@ -1,20 +1,27 @@
-import { FabricWebComponent } from '../utils';
+import { LitElement, html } from 'lit';
-class FabricBreadcrumbs extends FabricWebComponent {
- connectedCallback() {
- const children = Array.from(this.children)
- .map((child) => child.outerHTML)
- .join('/');
+const separator = html`/`;
+const interleave = (arr) =>
+ [].concat(...arr.map((el) => [el, separator])).slice(0, -1);
- this.shadowRoot.innerHTML += ``;
+class FabricBreadcrumbs extends LitElement {
+ connectedCallback() {
+ super.connectedCallback();
+ // Grab existing children at the point that the component is added to the page
+ // Interleave "/" separator with breadcrumbs
+ this._children = interleave(Array.from(this.children));
+ }
- this.innerHTML = '';
+ render() {
+ return html`
+
+
+ `;
}
}
diff --git a/packages/breadcrumbs/test.js b/packages/breadcrumbs/test.js
new file mode 100644
index 00000000..31db562f
--- /dev/null
+++ b/packages/breadcrumbs/test.js
@@ -0,0 +1,114 @@
+/* eslint-disable no-undef */
+import tap, { test, beforeEach, teardown } from 'tap';
+import { chromium } from 'playwright';
+
+tap.before(async () => {
+ const browser = await chromium.launch({ headless: true });
+ tap.context.browser = browser;
+});
+
+beforeEach(async (t) => {
+ const { browser } = t.context;
+ const context = await browser.newContext();
+ // context.setDefaultTimeout(2000);
+ t.context.page = await context.newPage();
+});
+
+teardown(async () => {
+ const { browser } = tap.context;
+ browser.close();
+});
+
+test('Breadcrumb component renders on the page', async (t) => {
+ // GIVEN: A component with 1 breadcrumb
+ const component = `
+
+ Eiendom
+
+ `;
+
+ // WHEN: the component is added to the page
+ const { page } = t.context;
+ await page.setContent(component);
+ await page.addScriptTag({ path: './dist/index.js', type: 'module' });
+
+ // THEN: the component is visible in the DOM
+ t.equal(await page.innerText('nav a'), 'Eiendom', 'An Eiendom a tag should be added to the page');
+});
+
+test('Breadcrumb component interleaves / characters between breadcrumb items', async (t) => {
+ // GIVEN: A component with 2 breadcrumbs
+ const component = `
+
+ Eiendom
+ Torget
+
+ `;
+
+ // WHEN: the component is added to the page AND spans are selected
+ const { page } = t.context;
+ await page.setContent(component);
+ await page.addScriptTag({ path: './dist/index.js', type: 'module' });
+
+ // THEN: a single divider should have been interleaved with the breadcrumbs
+ t.equal(await page.innerText('f-breadcrumbs span'), '/', 'Divider slashes should be added');
+});
+
+test('Breadcrumb component with anchor child elements', async (t) => {
+ // GIVEN: A component with 3 breadcrumbs
+ const component = `
+
+ Eiendom
+ Torget
+ Oslo
+
+ `;
+
+ // WHEN: the component is added to the page AND a elements are selected
+ const { page } = t.context;
+ await page.setContent(component);
+ await page.addScriptTag({ path: './dist/index.js', type: 'module' });
+
+ // THEN: there should be three breadcrumbs in the DOM
+ t.equal(await page.locator('f-breadcrumbs a').count(), 3, '3 a tags should be present');
+ t.equal(await page.locator('f-breadcrumbs span').count(), 2, '2 span tags should be present');
+ t.match(
+ await page.innerText(':nth-match(f-breadcrumbs a, 1)'),
+ 'Eiendom',
+ 'The first segment should be Eiendom',
+ );
+ t.match(
+ await page.innerText(':nth-match(f-breadcrumbs a, 2)'),
+ 'Torget',
+ 'The second segment should be Torget',
+ );
+ t.match(
+ await page.innerText(':nth-match(f-breadcrumbs a, 3)'),
+ 'Oslo',
+ 'The third segment should be Oslo',
+ );
+});
+
+test('Breadcrumb component with last element as a span', async (t) => {
+ // GIVEN: A component with 3 breadcrumbs
+ const component = `
+
+ Eiendom
+ Torget
+ Oslo
+
+ `;
+
+ // WHEN: the component is added to the page AND a elements are selected
+ const { page } = t.context;
+ await page.setContent(component);
+ await page.addScriptTag({ path: './dist/index.js', type: 'module' });
+
+ // THEN: there should be three breadcrumbs in the DOM
+ t.equal(await page.locator('f-breadcrumbs a').count(), 2, '2 child a tags should be present');
+ t.equal(
+ await page.locator('f-breadcrumbs span').count(),
+ 3,
+ '3 child span tags should be present',
+ );
+});
diff --git a/pages/components/breadcrumbs.html b/pages/components/breadcrumbs.html
index e75ed44d..f503990e 100644
--- a/pages/components/breadcrumbs.html
+++ b/pages/components/breadcrumbs.html
@@ -10,12 +10,14 @@ Breadcrumbs
Import
- npm install @fabric-ds/elements
+ import "@fabric-ds/elements";
Examples
+ All segments linkable
+
-
+
Eiendom
Bolig til salgs
Oslo
@@ -25,7 +27,24 @@ Examples
Eiendom
Bolig til salgs
- Oslo
+ Oslo
+
+
+
+ Disabled last link
+
+
+
+ Eiendom
+ Bolig til salgs
+ Oslo
+
+
diff --git a/postcss.config.cjs b/postcss.config.cjs
deleted file mode 100644
index 76a0aa29..00000000
--- a/postcss.config.cjs
+++ /dev/null
@@ -1,16 +0,0 @@
-/* eslint-env node */
-module.exports = (ctx) => {
- const plugins = [
- require('postcss-discard-comments')(),
- require('postcss-discard-empty')(),
- ];
-
- // Add autoprefixer in production
- if (ctx.env !== 'development') {
- plugins.push(require('autoprefixer')());
- }
-
- return {
- plugins,
- };
-};