@progressive-development/pd-content 0.1.72 → 0.1.73

package/.storybook/main.js

@@ -1,3 +1,17 @@
-module.exports = {
-  stories: ['../stories/**/*.stories.{js,md,mdx}'],
+/** @type { import('@storybook/web-components-vite').StorybookConfig } */
+const config = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@chromatic-com/storybook',
+  ],
+  framework: {
+    name: '@storybook/web-components-vite',
+    options: {},
+  },
+  docs: {
+    autodocs: 'tag',
+  },
 };
+export default config;

package/.storybook/preview.js

@@ -0,0 +1,13 @@
+/** @type { import('@storybook/web-components').Preview } */
+const preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

package/lit-localize.json

@@ -0,0 +1,18 @@
+{
+    "$schema": "https://raw.githubusercontent.com/lit/lit/main/packages/localize-tools/config.schema.json",
+    "sourceLocale": "dev",
+    "targetLocales": ["de", "en", "be"],
+    "inputFiles": [
+      "src/**/*.js"
+    ],
+    "output": {
+        "mode": "runtime",
+        "localeCodesModule": "src/generated/locale-codes.js",
+        "outputDir": "src/generated/locale"
+        
+    },
+    "interchange": {
+      "format": "xliff",
+      "xliffDir": "./xliff/"
+    }
+  }

package/package.json

@@ -3,7 +3,7 @@
   "description": "Progressive Development content components. ",
   "license": "SEE LICENSE IN LICENSE",
   "author": "PD Progressive Development UG",
-  "version": "0.1.72",
+  "version": "0.1.73",
   "main": "index.js",
   "module": "index.js",
   "scripts": {
@@ -13,34 +13,47 @@
     "format": "eslint --ext .js,.html . --fix --ignore-path .gitignore && prettier \"**/*.js\" --write --ignore-path .gitignore",
     "test": "web-test-runner --coverage",
     "test:watch": "web-test-runner --watch",
-    "storybook": "npm run analyze -- --exclude dist && web-dev-server -c .storybook/server.mjs",
-    "storybook:build": "npm run analyze -- --exclude dist && build-storybook"
+    "storybook": "storybook dev -p 6006",
+    "storybook:build": "npm run analyze -- --exclude dist && build-storybook",
+    "localizeExtract": "lit-localize extract",
+    "localizeBuild": "lit-localize build"
   },
   "dependencies": {
+    "@lit/localize": "^0.12.1",
     "@progressive-development/pd-dialog": "^0.1.74",
     "@progressive-development/pd-icon": "^0.1.20",
     "@progressive-development/pd-shared-styles": "^0.1.1",
-    "lit": "^2.2.0",
-    "pwa-helpers": "^0.9.0"
+    "lit": "^2.8.0",
+    "pwa-helpers": "^0.9.1"
   },
   "devDependencies": {
+    "@chromatic-com/storybook": "^1.3.4",
     "@custom-elements-manifest/analyzer": "^0.4.17",
+    "@lit/localize-tools": "^0.7.2",
     "@open-wc/eslint-config": "^4.3.0",
-    "@open-wc/testing": "next",
-    "@web/dev-server": "^0.1.30",
-    "@web/dev-server-storybook": "next",
-    "@web/test-runner": "^0.13.27",
+    "@open-wc/testing": "^3.2.2",
+    "@storybook/addon-essentials": "^8.0.10",
+    "@storybook/addon-links": "^8.0.10",
+    "@storybook/blocks": "^8.0.10",
+    "@storybook/test": "^8.0.10",
+    "@storybook/web-components": "^8.0.10",
+    "@storybook/web-components-vite": "^8.0.10",
+    "@web/dev-server": "^0.1.38",
+    "@web/test-runner": "^0.13.31",
     "eslint": "^7.32.0",
-    "eslint-config-prettier": "^8.4.0",
+    "eslint-config-prettier": "^8.10.0",
+    "eslint-plugin-storybook": "^0.8.0",
     "husky": "^4.3.8",
     "lint-staged": "^10.5.4",
-    "prettier": "^2.5.1"
+    "prettier": "^2.8.8",
+    "storybook": "^8.0.10"
   },
   "customElements": "custom-elements.json",
   "eslintConfig": {
     "extends": [
       "@open-wc",
-      "prettier"
+      "prettier",
+      "plugin:storybook/recommended"
     ]
   },
   "prettier": {

package/src/PdMoreInfo.js

@@ -6,6 +6,8 @@
  */
 
 import { LitElement, html, css } from 'lit';
+import { msg, updateWhenLocaleChanges } from '@lit/localize';
+
 import { PDFontStyles } from '@progressive-development/pd-shared-styles';
 
 /**
@@ -51,6 +53,7 @@ export class PdMoreInfo extends LitElement {
   constructor() {
     super();
     this._lessInfo = true;
+    updateWhenLocaleChanges(this);
   }
 
   render() {
@@ -58,14 +61,14 @@ export class PdMoreInfo extends LitElement {
       return html`
         <p>
           <slot name="small-view"></slot>
-          <a @click="${this._showMoreInfo}">Meer informatie</a>
+          <a @click="${this._showMoreInfo}">${msg("More information", {id: "pd.moreInfo.more"})}</a>
         </p>
       `;
     }
     return html`
       <p>
         <slot name="large-view"></slot>
-        <a @click="${this._showLessInfo}">Minder informatie</a>
+        <a @click="${this._showLessInfo}">${msg("Less information", {id: "pd.moreInfo.less"})}</a>
       </p>
     `;
   }

package/src/generated/locale/be.js

@@ -0,0 +1,15 @@
+
+    // Do not modify this file by hand!
+    // Re-generate this file by running lit-localize
+
+    
+    
+
+    /* eslint-disable no-irregular-whitespace */
+    /* eslint-disable @typescript-eslint/no-explicit-any */
+
+    export const templates = {
+      'pd.moreInfo.less': `Minder informatie`,
+'pd.moreInfo.more': `Meer informatie`,
+    };
+  

package/src/generated/locale/de.js

@@ -0,0 +1,15 @@
+
+    // Do not modify this file by hand!
+    // Re-generate this file by running lit-localize
+
+    
+    
+
+    /* eslint-disable no-irregular-whitespace */
+    /* eslint-disable @typescript-eslint/no-explicit-any */
+
+    export const templates = {
+      'pd.moreInfo.less': `Text ausblenden`,
+'pd.moreInfo.more': `Mehr Informationen`,
+    };
+  

package/src/generated/locale/en.js

@@ -0,0 +1,15 @@
+
+    // Do not modify this file by hand!
+    // Re-generate this file by running lit-localize
+
+    
+    
+
+    /* eslint-disable no-irregular-whitespace */
+    /* eslint-disable @typescript-eslint/no-explicit-any */
+
+    export const templates = {
+      'pd.moreInfo.more': `More information`,
+'pd.moreInfo.less': `Less information`,
+    };
+  

package/src/generated/locale-codes.js

@@ -0,0 +1,27 @@
+// Do not modify this file by hand!
+// Re-generate this file by running lit-localize.
+
+/**
+ * The locale code that templates in this source code are written in.
+ */
+export const sourceLocale = `dev`;
+
+/**
+ * The other locale codes that this application is localized into. Sorted
+ * lexicographically.
+ */
+export const targetLocales = [
+  `be`,
+  `de`,
+  `en`,
+];
+
+/**
+ * All valid project locale codes. Sorted lexicographically.
+ */
+export const allLocales = [
+  `be`,
+  `de`,
+  `dev`,
+  `en`,
+];

package/{stories → src/stories}/box-view.stories.js

@@ -1,9 +1,13 @@
 import { html } from 'lit';
-import '../pd-box-view.js';
+import '../../pd-box-view.js';
+
 
 export default {
   title: 'PdContent/Box View',
   component: 'pd-box-view',
+  parameters: {
+    actions: { argTypesRegex: '^on.*' },
+  },
   argTypes: {
     
   },

package/{stories → src/stories}/collapse.stories.js

@@ -1,5 +1,5 @@
 import { html } from 'lit';
-import '../pd-collapse.js';
+import '../../pd-collapse.js';
 
 export default {
   title: 'PdContent/Collapse',

package/{stories → src/stories}/edit-content.stories.js

@@ -1,5 +1,5 @@
 import { html } from 'lit';
-import '../pd-edit-content.js';
+import '../../pd-edit-content.js';
 
 export default {
   title: 'PdContent/Edit Content',

package/{stories → src/stories}/more-info.stories.js

@@ -1,5 +1,5 @@
 import { html } from 'lit';
-import '../pd-more-info.js';
+import '../../pd-more-info.js';
 
 export default {
   title: 'PdContent/More Info',

package/{stories → src/stories}/resize-content.stories.js

@@ -1,6 +1,6 @@
 /* eslint-disable lit-a11y/alt-text */
 import { html } from 'lit';
-import '../pd-resize-content.js';
+import '../../pd-resize-content.js';
 
 export default {
   title: 'PdContent/Resize Content',

package/xliff/be.xlf

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
+<file target-language="be" source-language="dev" original="lit-localize-inputs" datatype="plaintext">
+<body>
+<trans-unit id="pd.moreInfo.more">
+  <source>More information</source>
+  <target>Meer informatie</target>
+</trans-unit>
+<trans-unit id="pd.moreInfo.less">
+  <source>Less information</source>
+  <target>Minder informatie</target>
+</trans-unit>
+</body>
+</file>
+</xliff>

package/xliff/de.xlf

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
+<file target-language="de" source-language="dev" original="lit-localize-inputs" datatype="plaintext">
+<body>
+<trans-unit id="pd.moreInfo.more">
+  <source>More information</source>
+  <target>Mehr Informationen</target>
+</trans-unit>
+<trans-unit id="pd.moreInfo.less">
+  <source>Less information</source>
+  <target>Text ausblenden</target>
+</trans-unit>
+</body>
+</file>
+</xliff>

package/xliff/en.xlf

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
+<file target-language="en" source-language="dev" original="lit-localize-inputs" datatype="plaintext">
+<body>
+<trans-unit id="pd.moreInfo.more">
+  <source>More information</source>
+</trans-unit>
+<trans-unit id="pd.moreInfo.less">
+  <source>Less information</source>
+</trans-unit>
+</body>
+</file>
+</xliff>

package/.storybook/preview-head.html

@@ -1,2 +0,0 @@
-<link rel="preconnect" href="https://fonts.gstatic.com">
-<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400&family=Oswald:wght@700&display=swap" rel="stylesheet">

package/.storybook/server.mjs

@@ -1,8 +0,0 @@
-import { storybookPlugin } from '@web/dev-server-storybook';
-import baseConfig from '../web-dev-server.config.mjs';
-
-export default /** @type {import('@web/dev-server').DevServerConfig} */ ({
-  ...baseConfig,
-  open: '/',
-  plugins: [storybookPlugin({ type: 'web-components' }), ...baseConfig.plugins],
-});