@warp-ds/elements 2.2.0-next.1 → 2.2.0-next.11

package/README.md

@@ -38,7 +38,7 @@ This project builds both the whole Elements package and separate component packa
 ```js
 import '@warp-ds/elements';
 ```
-or a specific component: 
+or a specific component:
 ```js
 import '@warp-ds/elements/components/toast';
 ```
@@ -48,30 +48,40 @@ import '@warp-ds/elements/components/toast';
 For information on the components available in the package and how to use them,
 see the [Warp Design System documentation](https://warp-ds.github.io/tech-docs/).
 
-## Releases
-
-This project is continuously published to [NPM](https://www.npmjs.com/package/@warp-ds/elements) and [Eik](https://assets.finn.no/pkg/@warp-ds/elements) using a `next` tag (e.g. `1.1.0-next.1`).
-Anyone needing to use the latest changes of this package can point to the `next` version while waiting for the stable release.
-
-## Changelog
+### Editor integration
 
-Detailed changes for each release can be found in the [CHANGELOG](CHANGELOG.md) file.
+#### Visual Studio Code
 
-## How to test component-classes locally
+This module includes [Custom HTML and CSS data for Visual Studio Code](https://code.visualstudio.com/blogs/2020/02/24/custom-data-format).
 
-It is possible to test changes that have been made to component-classes from the [@warp-ds/css](https://github.com/warp-ds/css) package but that has not yet been published to Eik. You simply need to link the `@warp-ds/css` package in this repository and add `@unocss-placeholder` inside the static styles of the component that you want to test:
+Add this to your `settings.json` and restart VS Code to get IntelliSense and inline documentation for Warp elements.
 
-```js
-static styles = [
-    css`
-      @unocss-placeholder
-      `,
+```json
+{
+  "html.customData": [
+    "./node_modules/@warp-ds/elements/dist/vscode.html-custom-data.json"
+  ],
+  "css.customData": [
+    "./node_modules/@warp-ds/elements/dist/vscode.css-custom-data.json"
   ]
+}
 ```
 
-Run `pnpm dev` to see the linked styles in action.
+#### JetBrains products
+
+We ship `web-types.json` which should get picked up automatically by JetBrains IDEA and similar products.
+
+You should see code completions and inline docs for Warp elements when writing HTML.
 
-Once you have tested it locally, make sure to remove the `@unocss-placeholder` from the static styles before pushing any changes to the repository.
+
+## Releases
+
+This project is continuously published to [NPM](https://www.npmjs.com/package/@warp-ds/elements) and [Eik](https://assets.finn.no/pkg/@warp-ds/elements) using a `next` tag (e.g. `1.1.0-next.1`).
+Anyone needing to use the latest changes of this package can point to the `next` version while waiting for the stable release.
+
+## Changelog
+
+Detailed changes for each release can be found in the [CHANGELOG](CHANGELOG.md) file.
 
 ## License
 

package/dist/.storybook/utilities.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Massages storybook args before being spread to HTML attributes.
+ *
+ * - Empty strings are treated as not set.
+ * - Boolean false don't get set.
+ *
+ * @example
+ * ```ts
+ * import { html } from 'lit';
+ * import { spread } from '@open-wc/lit-helpers';
+ * import { prespread } from '../../.storybook/utilities.js';
+ *
+ * type Args = {
+ *   required: boolean;
+ * };
+ *
+ * const meta: Meta<Args> = {
+ *   component: 'w-component',
+ *   render(args) {
+ *     return html`<w-component ${spread(prespread(args))}></w-component>`;
+ *   },
+ *   argTypes: {
+ *     required: { type: 'boolean' },
+ *   },
+ * };
+ * ```
+ */
+export declare function prespread(args: Record<string, unknown>): Record<string, unknown>;

package/dist/.storybook/utilities.js

@@ -0,0 +1,52 @@
+/**
+ * Massages storybook args before being spread to HTML attributes.
+ *
+ * - Empty strings are treated as not set.
+ * - Boolean false don't get set.
+ *
+ * @example
+ * ```ts
+ * import { html } from 'lit';
+ * import { spread } from '@open-wc/lit-helpers';
+ * import { prespread } from '../../.storybook/utilities.js';
+ *
+ * type Args = {
+ *   required: boolean;
+ * };
+ *
+ * const meta: Meta<Args> = {
+ *   component: 'w-component',
+ *   render(args) {
+ *     return html`<w-component ${spread(prespread(args))}></w-component>`;
+ *   },
+ *   argTypes: {
+ *     required: { type: 'boolean' },
+ *   },
+ * };
+ * ```
+ */
+export function prespread(args) {
+    const newArgs = {
+        ...args,
+    };
+    for (const field of Object.keys(newArgs)) {
+        const value = args[field];
+        // Add Lit syntax for boolean attributes
+        if (typeof value === 'boolean') {
+            newArgs[`?${field}`] = value;
+            delete newArgs[field];
+        }
+        // Add Lit syntax for complex properties
+        if (typeof value === 'object') {
+            newArgs[`.${field}`] = value;
+            delete newArgs[field];
+        }
+        // The manifest has a bunch of default empty strings (which we should probably investigate)
+        // that turn on features that should be off in Storybook canvases.
+        // Remove the empty strings.
+        if (newArgs[field] === '') {
+            delete newArgs[field];
+        }
+    }
+    return newArgs;
+}

package/dist/api.js

@@ -1,50 +1,2 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-
-// packages/utils/window-exists.js
-var windowExists = typeof window !== "undefined";
-
-// packages/toast/api.js
-function toast(message, options) {
-  if (!windowExists) return;
-  const toast2 = customElements.get("w-toast-container").init();
-  const data = __spreadValues({
-    id: Date.now().toString(36) + Math.random().toString(36).slice(2, 5),
-    text: message,
-    duration: 5e3,
-    type: "success"
-  }, options);
-  toast2.set(data);
-  return data;
-}
-function removeToast(id) {
-  if (!windowExists) return;
-  const toast2 = customElements.get("w-toast-container").init();
-  return toast2.del(id);
-}
-function updateToast(id, options) {
-  if (!windowExists) return;
-  const toast2 = customElements.get("w-toast-container").init();
-  toast2.set(__spreadValues(__spreadValues({}, toast2.get(id)), options));
-  return toast2.get(id);
-}
-export {
-  removeToast,
-  toast,
-  updateToast
-};
+var e=typeof window!="undefined";function r(){return customElements.get("w-toast-container")}function p(t,o){if(!e)return;let n=r().init(),s={id:Date.now().toString(36)+Math.random().toString(36).slice(2,5),text:t,duration:5e3,type:"success",...o};return n.set(s),s}function u(t){return e?r().init().del(t):void 0}function c(t,o){if(!e)return;let n=r().init();return n.set({...n.get(t),...o}),n.get(t)}export{u as removeToast,p as toast,c as updateToast};
 //# sourceMappingURL=api.js.map

package/dist/api.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../packages/utils/window-exists.js", "../packages/toast/api.js"],
-  "sourcesContent": ["export const windowExists = typeof window !== 'undefined';\n", "import { windowExists } from '../utils/window-exists';\n\n/**\n * Toast helper function options\n * @typedef    {Object}                         ToastOptions\n * @property   {(number|string)}                [id]        Custom identifier\n * @property   {('success'|'error'|'warning')}  [type]      Type of toast\n * @property   {String}                         [text]      The toast message. Only needed when updating text on existing toast\n * @property   {(number|string)}                [duration]  Duration of toast in milliseconds. Defaults to 5000. For accessibility reasons, toasts should never be interactive and therefore need to auto remove. If you must disable auto remove, set duration to Number.POSITIVE_INFINITY.\n * @property   {Boolean}                        [canclose]  Whether the toast can be dismissed. Defaults to false. WARNING! For accessibility reasons, toasts should not be interactive and canclose should always be false. If the toast absolutely must be dismissable, set this to true.\n */\n\n/**\n * Creates a new toast\n * @param {String}        message  Message\n * @param {ToastOptions?} options  Toast options\n * @returns {ToastOptions} Toast details\n */\nexport function toast(message, options) {\n  if (!windowExists) return;\n  const toast = customElements.get('w-toast-container').init();\n\n  const data = {\n    id: Date.now().toString(36) + Math.random().toString(36).slice(2, 5),\n    text: message,\n    duration: 5000,\n    type: 'success',\n    ...options,\n  };\n\n  toast.set(data);\n  return data;\n}\n\n/**\n * Remove an existing toast\n * @param {String|Number} id Toast identifier\n * @return {Promise<Boolean>} Resolves to true if deleted, false if not found\n */\nexport function removeToast(id) {\n  if (!windowExists) return;\n  const toast = customElements.get('w-toast-container').init();\n  return toast.del(id);\n}\n\n/**\n * Update an existing toast\n * @param {String|Number}           id      Toast identifier\n * @param {ToastOptions?}           options Toast options\n * @returns {WarpToastContainer}          Toast details\n */\nexport function updateToast(id, options) {\n  if (!windowExists) return;\n  const toast = customElements.get('w-toast-container').init();\n  toast.set({ ...toast.get(id), ...options });\n  return toast.get(id);\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAO,IAAM,eAAe,OAAO,WAAW;;;ACkBvC,SAAS,MAAM,SAAS,SAAS;AACtC,MAAI,CAAC,aAAc;AACnB,QAAMA,SAAQ,eAAe,IAAI,mBAAmB,EAAE,KAAK;AAE3D,QAAM,OAAO;AAAA,IACX,IAAI,KAAK,IAAI,EAAE,SAAS,EAAE,IAAI,KAAK,OAAO,EAAE,SAAS,EAAE,EAAE,MAAM,GAAG,CAAC;AAAA,IACnE,MAAM;AAAA,IACN,UAAU;AAAA,IACV,MAAM;AAAA,KACH;AAGL,EAAAA,OAAM,IAAI,IAAI;AACd,SAAO;AACT;AAOO,SAAS,YAAY,IAAI;AAC9B,MAAI,CAAC,aAAc;AACnB,QAAMA,SAAQ,eAAe,IAAI,mBAAmB,EAAE,KAAK;AAC3D,SAAOA,OAAM,IAAI,EAAE;AACrB;AAQO,SAAS,YAAY,IAAI,SAAS;AACvC,MAAI,CAAC,aAAc;AACnB,QAAMA,SAAQ,eAAe,IAAI,mBAAmB,EAAE,KAAK;AAC3D,EAAAA,OAAM,IAAI,kCAAKA,OAAM,IAAI,EAAE,IAAM,QAAS;AAC1C,SAAOA,OAAM,IAAI,EAAE;AACrB;",
-  "names": ["toast"]
+  "sources": ["../packages/utils/window-exists.js", "../packages/toast/api.ts"],
+  "sourcesContent": ["export const windowExists = typeof window !== 'undefined';\n", "import { windowExists } from '../utils/window-exists';\n\nimport { WarpToastContainer } from './toast-container';\nimport type { ToastOptions, ToastInternal } from './types';\n\nfunction getToastContainer() {\n  const container = customElements.get('w-toast-container');\n  return container as typeof WarpToastContainer;\n}\n\n/**\n * Creates a new toast\n */\nexport function toast(message: string, options?: ToastOptions) {\n  if (!windowExists) return;\n\n  const toast = getToastContainer().init() as WarpToastContainer;\n\n  const data: ToastOptions = {\n    id: Date.now().toString(36) + Math.random().toString(36).slice(2, 5),\n    text: message,\n    duration: 5000,\n    type: 'success',\n    ...options,\n  };\n\n  toast.set(data);\n  return data;\n}\n\n/**\n * Remove an existing toast\n */\nexport function removeToast(id: string | number): Promise<boolean> | undefined {\n  if (!windowExists) return;\n\n  const toast = getToastContainer().init() as WarpToastContainer;\n  return toast.del(id);\n}\n\n/**\n * Update an existing toast\n */\nexport function updateToast(id: string | number, options?: ToastOptions): ToastInternal | undefined {\n  if (!windowExists) return;\n\n  const toast = getToastContainer().init() as WarpToastContainer;\n  toast.set({ ...toast.get(id), ...options });\n  return toast.get(id);\n}\n"],
+  "mappings": "AAAO,IAAMA,EAAe,OAAO,QAAW,YCK9C,SAASC,GAAoB,CAE3B,OADkB,eAAe,IAAI,mBAAmB,CAE1D,CAKO,SAASC,EAAMC,EAAiBC,EAAwB,CAC7D,GAAI,CAACC,EAAc,OAEnB,IAAMH,EAAQD,EAAkB,EAAE,KAAK,EAEjCK,EAAqB,CACzB,GAAI,KAAK,IAAI,EAAE,SAAS,EAAE,EAAI,KAAK,OAAO,EAAE,SAAS,EAAE,EAAE,MAAM,EAAG,CAAC,EACnE,KAAMH,EACN,SAAU,IACV,KAAM,UACN,GAAGC,CACL,EAEA,OAAAF,EAAM,IAAII,CAAI,EACPA,CACT,CAKO,SAASC,EAAYC,EAAmD,CAC7E,OAAKH,EAESJ,EAAkB,EAAE,KAAK,EAC1B,IAAIO,CAAE,EAHA,MAIrB,CAKO,SAASC,EAAYD,EAAqBJ,EAAmD,CAClG,GAAI,CAACC,EAAc,OAEnB,IAAMH,EAAQD,EAAkB,EAAE,KAAK,EACvC,OAAAC,EAAM,IAAI,CAAE,GAAGA,EAAM,IAAIM,CAAE,EAAG,GAAGJ,CAAQ,CAAC,EACnCF,EAAM,IAAIM,CAAE,CACrB",
+  "names": ["windowExists", "getToastContainer", "toast", "message", "options", "windowExists", "data", "removeToast", "id", "updateToast"]
 }