@mattilsynet/design 0.3.5 → 0.3.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (69) hide show
  1. package/mtds/alert/alert.d.ts +6 -0
  2. package/mtds/alert/alert.stories.d.ts +4 -0
  3. package/mtds/avatar/avatar.d.ts +9 -0
  4. package/mtds/avatar/avatar.stories.d.ts +4 -0
  5. package/mtds/badge/badge.d.ts +6 -0
  6. package/mtds/badge/badge.stories.d.ts +4 -0
  7. package/mtds/breadcrumbs/breadcrumbs.d.ts +8 -0
  8. package/mtds/breadcrumbs/breadcrumbs.stories.d.ts +4 -0
  9. package/mtds/button/button.d.ts +9 -0
  10. package/mtds/button/button.stories.d.ts +3 -0
  11. package/mtds/card/card.d.ts +9 -0
  12. package/mtds/card/card.stories.d.ts +8 -0
  13. package/mtds/chip/chip.d.ts +2 -0
  14. package/mtds/chip/chip.stories.d.ts +3 -0
  15. package/mtds/details/details.d.ts +2 -0
  16. package/mtds/dialog/{dialog.js → dialog-observer.js} +1 -1
  17. package/mtds/dialog/dialog-observer.js.map +1 -0
  18. package/mtds/dialog/dialog.d.ts +6 -2
  19. package/mtds/divider/divider.d.ts +2 -0
  20. package/mtds/errorsummary/errorsummary.d.ts +2 -0
  21. package/mtds/errorsummary/errorsummary.stories.d.ts +3 -0
  22. package/mtds/field/field-observer.js +45 -0
  23. package/mtds/field/field-observer.js.map +1 -0
  24. package/mtds/field/field.stories.d.ts +4 -1
  25. package/mtds/fieldset/{fieldset.js → fieldset-observer.js} +1 -1
  26. package/mtds/fieldset/fieldset-observer.js.map +1 -0
  27. package/mtds/fieldset/fieldset.d.ts +2 -2
  28. package/mtds/heading/heading.d.ts +6 -0
  29. package/mtds/heading/heading.stories.d.ts +3 -0
  30. package/mtds/index.iife.js +1 -1
  31. package/mtds/index.iife.js.map +1 -1
  32. package/mtds/index.js +7 -7
  33. package/mtds/index.js.map +1 -1
  34. package/mtds/input/input.stories.d.ts +3 -0
  35. package/mtds/layout/layout-observer.d.ts +2 -0
  36. package/mtds/layout/{layout.js → layout-observer.js} +1 -1
  37. package/mtds/layout/layout-observer.js.map +1 -0
  38. package/mtds/layout/layout.stories.d.ts +3 -0
  39. package/mtds/link/link.d.ts +5 -0
  40. package/mtds/logo/logo.stories.d.ts +3 -0
  41. package/mtds/popover/{popover.js → popover-observer.js} +1 -1
  42. package/mtds/popover/popover-observer.js.map +1 -0
  43. package/mtds/react-types.d.ts +10 -0
  44. package/mtds/react.d.ts +13 -0
  45. package/mtds/spinner/spinner.stories.d.ts +3 -0
  46. package/mtds/styles.css +1 -1
  47. package/mtds/styles.json +31 -31
  48. package/mtds/styles.module.css.js +41 -41
  49. package/mtds/table/table-observer.d.ts +2 -0
  50. package/mtds/table/{table.js → table-observer.js} +1 -1
  51. package/mtds/table/table-observer.js.map +1 -0
  52. package/mtds/table/table.stories.d.ts +4 -0
  53. package/mtds/tag/tag.stories.d.ts +3 -0
  54. package/mtds/tooltip/{tooltip.js → tooltip-observer.js} +1 -1
  55. package/mtds/tooltip/tooltip-observer.js.map +1 -0
  56. package/package.json +5 -5
  57. package/mtds/dialog/dialog.js.map +0 -1
  58. package/mtds/field/field.js +0 -40
  59. package/mtds/field/field.js.map +0 -1
  60. package/mtds/fieldset/fieldset.js.map +0 -1
  61. package/mtds/layout/layout.js.map +0 -1
  62. package/mtds/popover/popover.js.map +0 -1
  63. package/mtds/table/table.js.map +0 -1
  64. package/mtds/tooltip/tooltip.js.map +0 -1
  65. /package/mtds/{field/field.d.ts → dialog/dialog-observer.d.ts} +0 -0
  66. /package/mtds/{layout/layout.d.ts → field/field-observer.d.ts} +0 -0
  67. /package/mtds/{table/table.d.ts → fieldset/fieldset-observer.d.ts} +0 -0
  68. /package/mtds/popover/{popover.d.ts → popover-observer.d.ts} +0 -0
  69. /package/mtds/tooltip/{tooltip.d.ts → tooltip-observer.d.ts} +0 -0
package/mtds/index.js CHANGED
@@ -1,10 +1,10 @@
1
- import { observe as r, unobserve as s } from "./dialog/dialog.js";
2
- import { observe as n, unobserve as t } from "./field/field.js";
3
- import { observe as b, unobserve as v } from "./fieldset/fieldset.js";
4
- import { observe as a, unobserve as m } from "./layout/layout.js";
5
- import { observe as i, unobserve as u } from "./popover/popover.js";
6
- import { observe as d, unobserve as f } from "./table/table.js";
7
- import "./tooltip/tooltip.js";
1
+ import { observe as r, unobserve as s } from "./dialog/dialog-observer.js";
2
+ import { observe as n, unobserve as t } from "./field/field-observer.js";
3
+ import { observe as b, unobserve as v } from "./fieldset/fieldset-observer.js";
4
+ import { observe as a, unobserve as m } from "./layout/layout-observer.js";
5
+ import { observe as i, unobserve as u } from "./popover/popover-observer.js";
6
+ import { observe as d, unobserve as f } from "./table/table-observer.js";
7
+ import "./tooltip/tooltip-observer.js";
8
8
  import { IS_BROWSER as p } from "./utils.js";
9
9
  import { pagination as D } from "./pagination/pagination.js";
10
10
  import * as R from "./styles.module.css.js";
package/mtds/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../designsystem/index.ts"],"sourcesContent":["import * as dialog from './dialog/dialog';\nimport * as field from './field/field';\nimport * as fieldset from './fieldset/fieldset';\nimport * as layout from './layout/layout';\nimport * as popover from './popover/popover';\nimport * as table from './table/table';\nimport './tooltip/tooltip'; // Load data-tooltip behaviour\nimport { IS_BROWSER } from './utils';\nexport { pagination } from './pagination/pagination';\nexport * as styles from './styles.module.css';\n\n// Automatic observe on browser\nif (IS_BROWSER) {\n const isLoading = document.readyState === \"loading\"; // Check if the page is still loading - might happen if the script is in <head>\n const onLoaded = () => observe(document.body);\n \n if (isLoading) document.addEventListener(\"DOMContentLoaded\", onLoaded);\n else onLoaded();\n}\n\nexport function observe(el: Element) {\n dialog.observe(el);\n field.observe(el);\n fieldset.observe(el);\n layout.observe(el);\n popover.observe(el);\n table.observe(el);\n}\n\nexport function unobserve(el: Element) {\n dialog.unobserve(el);\n field.unobserve(el);\n fieldset.unobserve(el);\n layout.unobserve(el);\n popover.unobserve(el);\n table.unobserve(el);\n}"],"names":["IS_BROWSER","isLoading","onLoaded","observe","el","dialog.observe","field.observe","fieldset.observe","layout.observe","popover.observe","table.observe","unobserve","dialog.unobserve","field.unobserve","fieldset.unobserve","layout.unobserve","popover.unobserve","table.unobserve"],"mappings":";;;;;;;;;;AAYA,IAAIA,GAAY;AACR,QAAAC,IAAY,SAAS,eAAe,WACpCC,IAAW,MAAMC,EAAQ,SAAS,IAAI;AAE5C,EAAIF,IAAW,SAAS,iBAAiB,oBAAoBC,CAAQ,IACvDA,EAAA;AAChB;AAEO,SAASC,EAAQC,GAAa;AACnCC,EAAAA,EAAeD,CAAE,GACjBE,EAAcF,CAAE,GAChBG,EAAiBH,CAAE,GACnBI,EAAeJ,CAAE,GACjBK,EAAgBL,CAAE,GAClBM,EAAcN,CAAE;AAClB;AAEO,SAASO,EAAUP,GAAa;AACrCQ,EAAAA,EAAiBR,CAAE,GACnBS,EAAgBT,CAAE,GAClBU,EAAmBV,CAAE,GACrBW,EAAiBX,CAAE,GACnBY,EAAkBZ,CAAE,GACpBa,EAAgBb,CAAE;AACpB;"}
1
+ {"version":3,"file":"index.js","sources":["../designsystem/index.ts"],"sourcesContent":["import * as dialog from \"./dialog/dialog-observer\";\nimport * as field from \"./field/field-observer\";\nimport * as fieldset from \"./fieldset/fieldset-observer\";\nimport * as layout from \"./layout/layout-observer\";\nimport * as popover from \"./popover/popover-observer\";\nimport * as table from \"./table/table-observer\";\nimport \"./tooltip/tooltip-observer\"; // Load data-tooltip behaviour\nimport { IS_BROWSER } from \"./utils\";\nexport { pagination } from \"./pagination/pagination\";\nexport * as styles from \"./styles.module.css\";\n\n// Automatic observe on browser\nif (IS_BROWSER) {\n const isLoading = document.readyState === \"loading\"; // Check if the page is still loading - might happen if the script is in <head>\n const onLoaded = () => observe(document.body);\n\n if (isLoading) document.addEventListener(\"DOMContentLoaded\", onLoaded);\n else onLoaded();\n}\n\nexport function observe(el: Element) {\n dialog.observe(el);\n field.observe(el);\n fieldset.observe(el);\n layout.observe(el);\n popover.observe(el);\n table.observe(el);\n}\n\nexport function unobserve(el: Element) {\n dialog.unobserve(el);\n field.unobserve(el);\n fieldset.unobserve(el);\n layout.unobserve(el);\n popover.unobserve(el);\n table.unobserve(el);\n}\n"],"names":["IS_BROWSER","isLoading","onLoaded","observe","el","dialog.observe","field.observe","fieldset.observe","layout.observe","popover.observe","table.observe","unobserve","dialog.unobserve","field.unobserve","fieldset.unobserve","layout.unobserve","popover.unobserve","table.unobserve"],"mappings":";;;;;;;;;;AAYA,IAAIA,GAAY;AACR,QAAAC,IAAY,SAAS,eAAe,WACpCC,IAAW,MAAMC,EAAQ,SAAS,IAAI;AAE5C,EAAIF,IAAW,SAAS,iBAAiB,oBAAoBC,CAAQ,IACvDA,EAAA;AAChB;AAEO,SAASC,EAAQC,GAAa;AACnCC,EAAAA,EAAeD,CAAE,GACjBE,EAAcF,CAAE,GAChBG,EAAiBH,CAAE,GACnBI,EAAeJ,CAAE,GACjBK,EAAgBL,CAAE,GAClBM,EAAcN,CAAE;AAClB;AAEO,SAASO,EAAUP,GAAa;AACrCQ,EAAAA,EAAiBR,CAAE,GACnBS,EAAgBT,CAAE,GAClBU,EAAmBV,CAAE,GACrBW,EAAiBX,CAAE,GACnBY,EAAkBZ,CAAE,GACpBa,EAAgBb,CAAE;AACpB;"}
package/mtds/input/input.stories.d.ts CHANGED
@@ -1,6 +1,9 @@
1
1
  import { StoryObj } from '@storybook/react';
2
2
  declare const meta: {
3
3
  title: string;
4
+ decorators: ((Story: import('@storybook/csf').PartialStoryFn<import('@storybook/react').ReactRenderer, {
5
+ [x: string]: any;
6
+ }>) => import("react/jsx-runtime").JSX.Element)[];
4
7
  };
5
8
  export default meta;
6
9
  type Story = StoryObj<typeof meta>;
package/mtds/layout/layout-observer.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ export declare function observe(el: Element): void;
2
+ export declare function unobserve(el: Element): void;
package/mtds/layout/{layout.js → layout-observer.js} RENAMED
@@ -19,4 +19,4 @@ export {
19
19
  u as observe,
20
20
  T as unobserve
21
21
  };
22
- //# sourceMappingURL=layout.js.map
22
+ //# sourceMappingURL=layout-observer.js.map
package/mtds/layout/layout-observer.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"layout-observer.js","sources":["../../designsystem/layout/layout-observer.ts"],"sourcesContent":["import styles from '../styles.module.css';\nimport { QUICK_EVENT, off, on } from '../utils';\n\nconst CSS_APP = styles.app.split(' ')[0];\nconst CSS_TOGGLE = `.${CSS_APP} > header + :not(main) > button:empty:first-child`;\n\nconst handleToggleClick = ({ target: el }: Event) => {\n const btn = (el as Element)?.nodeName === 'BUTTON' && (el as Element)?.closest(CSS_TOGGLE);\n\n if (!btn) return;\n\n const nav = btn.closest(`.${CSS_APP} > *`);\n const toggle = () =>\n nav?.setAttribute(\n \"data-expanded\",\n `${nav?.getAttribute(\"data-expanded\") === \"false\"}`,\n );\n\n if (!document.startViewTransition) toggle();\n else document.startViewTransition(() => toggle());\n};\n\nexport function observe(el: Element) {\n on(el, 'click', handleToggleClick, QUICK_EVENT);\n}\n\nexport function unobserve(el: Element) {\n off(el, 'click', handleToggleClick, QUICK_EVENT);\n}\n"],"names":["CSS_APP","styles","CSS_TOGGLE","handleToggleClick","el","btn","nav","toggle","observe","on","QUICK_EVENT","unobserve","off"],"mappings":";;AAGA,MAAMA,IAAUC,EAAO,IAAI,MAAM,GAAG,EAAE,CAAC,GACjCC,IAAa,IAAIF,CAAO,qDAExBG,IAAoB,CAAC,EAAE,QAAQC,QAAgB;AACnD,QAAMC,KAAOD,KAAA,gBAAAA,EAAgB,cAAa,aAAaA,KAAA,gBAAAA,EAAgB,QAAQF;AAE/E,MAAI,CAACG,EAAK;AAEV,QAAMC,IAAMD,EAAI,QAAQ,IAAIL,CAAO,MAAM,GACnCO,IAAS,MACbD,KAAA,gBAAAA,EAAK;AAAA,IACH;AAAA,IACA,IAAGA,KAAA,gBAAAA,EAAK,aAAa,sBAAqB,OAAO;AAAA;AAGjD,EAAC,SAAS,sBACA,SAAA,oBAAoB,MAAMC,GAAQ,IADNA,EAAA;AAE5C;AAEO,SAASC,EAAQJ,GAAa;AAChC,EAAAK,EAAAL,GAAI,SAASD,GAAmBO,CAAW;AAChD;AAEO,SAASC,EAAUP,GAAa;AACjC,EAAAQ,EAAAR,GAAI,SAASD,GAAmBO,CAAW;AACjD;"}
package/mtds/layout/layout.stories.d.ts CHANGED
@@ -4,6 +4,9 @@ declare const meta: {
4
4
  parameters: {
5
5
  layout: string;
6
6
  };
7
+ decorators: ((Story: import('@storybook/csf').PartialStoryFn<import('@storybook/react').ReactRenderer, {
8
+ [x: string]: any;
9
+ }>) => import("react/jsx-runtime").JSX.Element)[];
7
10
  };
8
11
  export default meta;
9
12
  type Story = StoryObj<typeof meta>;
package/mtds/link/link.d.ts ADDED
@@ -0,0 +1,5 @@
1
+ import { PolymorphicComponentPropWithRef } from '../react-types';
2
+ export type LinkProps<As extends React.ElementType = "a"> = PolymorphicComponentPropWithRef<As>;
3
+ type LinkComponent = <As extends React.ElementType = "a">(props: LinkProps<As>) => React.ReactElement | null;
4
+ export declare const Link: LinkComponent;
5
+ export {};
package/mtds/logo/logo.stories.d.ts CHANGED
@@ -1,6 +1,9 @@
1
1
  import { StoryObj } from '@storybook/react';
2
2
  declare const meta: {
3
3
  title: string;
4
+ decorators: ((Story: import('@storybook/csf').PartialStoryFn<import('@storybook/react').ReactRenderer, {
5
+ [x: string]: any;
6
+ }>) => import("react/jsx-runtime").JSX.Element)[];
4
7
  };
5
8
  export default meta;
6
9
  type Story = StoryObj<typeof meta>;
package/mtds/popover/{popover.js → popover-observer.js} RENAMED
@@ -26,4 +26,4 @@ export {
26
26
  k as observe,
27
27
  E as unobserve
28
28
  };
29
- //# sourceMappingURL=popover.js.map
29
+ //# sourceMappingURL=popover-observer.js.map
package/mtds/popover/popover-observer.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"popover-observer.js","sources":["../../designsystem/popover/popover-observer.ts"],"sourcesContent":["import styles from '../styles.module.css';\nimport { QUICK_EVENT, anchorPosition, attr, off, on } from '../utils';\n\nexport function observe(el: Node) {\n on(el, 'toggle', handleToggle, QUICK_EVENT); // Use capture since toggle does not bubble\n on(el, 'click', handleLinkClick); // Allow `<a>` to use `popovertarget` as well\n}\nexport function unobserve(el: Node) {\n off(el, 'toggle', handleToggle, QUICK_EVENT); // Use capture since toggle does not bubble\n off(el, 'click', handleLinkClick);\n}\n\nconst CSS_POPOVER = styles.popover.split(' ')[0];\n\nfunction handleToggle ({ target: el, newState }: Event & { newState?: string }){\n if (el instanceof HTMLElement && el.classList.contains(CSS_POPOVER)) {\n const anchor = (el.getRootNode() as ShadowRoot)?.querySelector<HTMLElement>(`[popovertarget=\"${el.id}\"]`);\n \n if (newState === 'closed') anchorPosition(el, false);\n else if (anchor) anchorPosition(el, anchor, el.getAttribute('data-position') || 'bottom');\n }\n}\n\n// Polyfill popovertarget for <a> (not supported by native)\n// and automatically assume popovertarget is the closest parent popover\n// but respect the popovertarget and popovertargetaction attribute\nfunction handleLinkClick ({ target }: Event){\n const link = (target as Element )?.closest?.('a');\n if (link) {\n const root = link.getRootNode() as ShadowRoot;\n const target = root.getElementById?.(attr(link, 'popovertarget') || '') || link.closest(`.${CSS_POPOVER}`);\n const action = attr(link, 'popovertargetaction') || 'toggle';\n\n target?.togglePopover(action === 'show' || (action === 'hide' ? false : undefined));\n }\n}"],"names":["observe","el","on","handleToggle","QUICK_EVENT","handleLinkClick","unobserve","off","CSS_POPOVER","styles","newState","anchor","_a","anchorPosition","target","link","root","_b","attr","action"],"mappings":";;AAGO,SAASA,EAAQC,GAAU;AAC7B,EAAAC,EAAAD,GAAI,UAAUE,GAAcC,CAAW,GACvCF,EAAAD,GAAI,SAASI,CAAe;AACjC;AACO,SAASC,EAAUL,GAAU;AAC9B,EAAAM,EAAAN,GAAI,UAAUE,GAAcC,CAAW,GACvCG,EAAAN,GAAI,SAASI,CAAe;AAClC;AAEA,MAAMG,IAAcC,EAAO,QAAQ,MAAM,GAAG,EAAE,CAAC;AAE/C,SAASN,EAAc,EAAE,QAAQF,GAAI,UAAAS,KAA0C;;AAC7E,MAAIT,aAAc,eAAeA,EAAG,UAAU,SAASO,CAAW,GAAG;AAC7D,UAAAG,KAAUC,IAAAX,EAAG,kBAAH,gBAAAW,EAAiC,cAA2B,mBAAmBX,EAAG,EAAE;AAEpG,IAAIS,MAAa,WAAyBG,EAAAZ,GAAI,EAAK,IAC1CU,OAAuBV,GAAIU,GAAQV,EAAG,aAAa,eAAe,KAAK,QAAQ;AAAA,EAAA;AAE5F;AAKA,SAASI,EAAiB,EAAE,QAAAS,KAAgB;;AACpC,QAAAC,KAAQH,IAAAE,KAAA,gBAAAA,EAAqB,YAArB,gBAAAF,EAAA,KAAAE,GAA+B;AAC7C,MAAIC,GAAM;AACF,UAAAC,IAAOD,EAAK,YAAY,GACxBD,MAASG,IAAAD,EAAK,mBAAL,gBAAAC,EAAA,KAAAD,GAAsBE,EAAKH,GAAM,eAAe,KAAK,QAAOA,EAAK,QAAQ,IAAIP,CAAW,EAAE,GACnGW,IAASD,EAAKH,GAAM,qBAAqB,KAAK;AAEpDD,IAAAA,KAAAA,QAAAA,EAAQ,cAAcK,MAAW,WAAWA,MAAW,SAAS,KAAQ;AAAA,EAAU;AAEtF;"}
package/mtds/react-types.d.ts ADDED
@@ -0,0 +1,10 @@
1
+ type AsProp<As extends React.ElementType> = {
2
+ as?: As;
3
+ };
4
+ type PropsToOmit<As extends React.ElementType, P> = keyof (AsProp<As> & P);
5
+ type PolymorphicComponentProp<As extends React.ElementType, Props = object> = React.PropsWithChildren<Props & AsProp<As>> & Omit<React.ComponentPropsWithoutRef<As>, PropsToOmit<As, Props>>;
6
+ export type PolymorphicComponentPropWithRef<As extends React.ElementType, Props = object> = PolymorphicComponentProp<As, Props> & {
7
+ ref?: PolymorphicRef<As>;
8
+ };
9
+ export type PolymorphicRef<As extends React.ElementType> = React.ComponentPropsWithRef<As>['ref'];
10
+ export {};
package/mtds/react.d.ts ADDED
@@ -0,0 +1,13 @@
1
+ export * from './alert/alert';
2
+ export * from './avatar/avatar';
3
+ export * from './badge/badge';
4
+ export * from './breadcrumbs/breadcrumbs';
5
+ export * from './button/button';
6
+ export * from './card/card';
7
+ export * from './chip/chip';
8
+ export * from './details/details';
9
+ export * from './dialog/dialog';
10
+ export * from './divider/divider';
11
+ export * from './errorsummary/errorsummary';
12
+ export * from './fieldset/fieldset';
13
+ export * from './link/link';
package/mtds/spinner/spinner.stories.d.ts CHANGED
@@ -1,6 +1,9 @@
1
1
  import { StoryObj } from '@storybook/react';
2
2
  declare const meta: {
3
3
  title: string;
4
+ decorators: ((Story: import('@storybook/csf').PartialStoryFn<import('@storybook/react').ReactRenderer, {
5
+ [x: string]: any;
6
+ }>) => import("react/jsx-runtime").JSX.Element)[];
4
7
  };
5
8
  export default meta;
6
9
  type Story = StoryObj<typeof meta>;