@sats-group/ui-lib 83.0.0 → 85.0.0
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.
package/package.json
CHANGED
|
@@ -1,65 +1,15 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sats-group/ui-lib",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "85.0.0",
|
|
4
4
|
"description": "SATS web user interface library",
|
|
5
|
-
"engines": {
|
|
6
|
-
"node": "^18 || ^20",
|
|
7
|
-
"npm": "^8 || ^9 || ^10"
|
|
8
|
-
},
|
|
9
|
-
"scripts": {
|
|
10
|
-
"build": "run-s clean logos typecheck colour components style-imports build:types build:dist",
|
|
11
|
-
"build:dist": "node build/build.mjs",
|
|
12
|
-
"build:types": "tsc --project tsconfig.types.json",
|
|
13
|
-
"clean": "node rimraf.mjs",
|
|
14
|
-
"colour": "node codegen/colours.mjs",
|
|
15
|
-
"components": "node codegen/components.mjs",
|
|
16
|
-
"style-imports": "node codegen/style-imports.mjs",
|
|
17
|
-
"dev": "npm run dev --workspace=site",
|
|
18
|
-
"lint": "eslint",
|
|
19
|
-
"lint:ci": "eslint --max-warnings 0",
|
|
20
|
-
"logos": "svgr --expand-props none --typescript --out-dir react/logos --filename-case kebab logos && rimraf react/logos/**/index.*",
|
|
21
|
-
"typecheck": "tsc --noEmit"
|
|
22
|
-
},
|
|
23
|
-
"repository": {
|
|
24
|
-
"type": "git",
|
|
25
|
-
"url": "git@ssh.dev.azure.com:v3/sats-group/SATS%20Web/ui-lib"
|
|
26
|
-
},
|
|
27
5
|
"author": "developer@sats.no",
|
|
28
6
|
"license": "UNLICENSED",
|
|
29
7
|
"peerDependencies": {
|
|
30
8
|
"classnames": "^2.5.1",
|
|
31
|
-
"react": "^18.0.0 || ^19.0.0",
|
|
32
|
-
"react-dom": "^18.0.0 || ^19.0.0"
|
|
33
|
-
},
|
|
34
|
-
"devDependencies": {
|
|
35
|
-
"@storybook/react": "^8.6.0",
|
|
36
|
-
"@storybook/test": "^8.6.0",
|
|
37
|
-
"@svgr/cli": "^8.1.0",
|
|
38
|
-
"@types/fuzzy-search": "^2.1.5",
|
|
39
|
-
"@types/node": "^18.16.19",
|
|
40
|
-
"@types/react": "^19.0.0",
|
|
41
|
-
"@types/react-dom": "^19.0.0",
|
|
42
|
-
"@typescript-eslint/eslint-plugin": "^8.12.2",
|
|
43
|
-
"@typescript-eslint/parser": "^8.12.2",
|
|
44
|
-
"esbuild": "^0.25.5",
|
|
45
|
-
"esbuild-plugin-copy": "^2.1.1",
|
|
46
|
-
"eslint": "^9.13.0",
|
|
47
|
-
"eslint-config-prettier": "^9.1.0",
|
|
48
|
-
"eslint-plugin-prettier": "^5.2.1",
|
|
49
|
-
"eslint-plugin-react": "^7.37.2",
|
|
50
|
-
"globby": "^14.0.2",
|
|
51
|
-
"npm-run-all": "^4.1.5",
|
|
52
|
-
"pascal-case": "^4.0.0",
|
|
53
|
-
"prettier": "^3.3.3",
|
|
54
9
|
"react": "^19.0.0",
|
|
55
|
-
"react-dom": "^19.0.0"
|
|
56
|
-
"rimraf": "^6.0.1",
|
|
57
|
-
"typescript": "^5.6.3"
|
|
10
|
+
"react-dom": "^19.0.0"
|
|
58
11
|
},
|
|
59
12
|
"dependencies": {
|
|
60
13
|
"fuzzy-search": "^3.2.1"
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
"site"
|
|
64
|
-
]
|
|
65
|
-
}
|
|
14
|
+
}
|
|
15
|
+
}
|
package/react/modal/modal.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";var
|
|
1
|
+
"use client";var T=Object.defineProperty,b=Object.defineProperties;var k=Object.getOwnPropertyDescriptors;var _=Object.getOwnPropertySymbols;var B=Object.prototype.hasOwnProperty,C=Object.prototype.propertyIsEnumerable;var u=(l,a,s)=>a in l?T(l,a,{enumerable:!0,configurable:!0,writable:!0,value:s}):l[a]=s,t=(l,a)=>{for(var s in a||(a={}))B.call(a,s)&&u(l,s,a[s]);if(_)for(var s of _(a))C.call(a,s)&&u(l,s,a[s]);return l},y=(l,a)=>b(l,k(a));import p from"classnames";import*as o from"react";import*as P from"react-dom";import i from"../button";import c from"../icons/18/close";import e from"../text";import{ActionTypes as f,backgrounds as h}from"./modal.types";import I from"../link-button";const N=({actions:l,ariaLabel:a,background:s=h.primary,children:g,closeLabel:v,explanation:d,id:r,onClick:x=()=>{},title:n})=>P.createPortal(o.createElement("dialog",{"aria-label":a,className:p("modal",{[`modal--${s}`]:s}),id:r,popover:"auto"},o.createElement("div",{className:p("modal__close-action",{"modal__close-action--always-shown":l&&l.length})},o.createElement(i,{leadingIcon:o.createElement(c,null),popoverTarget:r,size:i.sizes.small,text:v,variant:i.variants.secondary,iconOnly:!0})),n||d?o.createElement("div",{className:"modal__nav"},o.createElement("div",{className:"modal__texts"},n?o.createElement(e,{className:"modal__title",size:e.sizes.headline2,theme:e.themes.emphasis},n):null,d?o.createElement("div",{className:p("modal__explanation",{[`modal__explanation--${s}`]:s})},o.createElement(e,{size:e.sizes.small},d)):null)):null,o.createElement("div",{className:"modal__children"},o.createElement("div",null,g)),l&&l.length?o.createElement("div",{className:"modal__actions"},l.map(m=>m.type===f.LinkButton?o.createElement(I,t({},m.action)):m.type===f.Button?o.createElement(i,y(t({},m.action),{onClick:z=>x(m.buttonId,z)})):null)):o.createElement("div",{className:"modal__close-action-mobile"},o.createElement(i,{leadingIcon:o.createElement(c,null),popoverTarget:r,text:v,variant:i.variants.secondary}))),document.body);N.backgrounds=h;var L=N;export{L as default};
|
|
2
2
|
//# sourceMappingURL=modal.js.map
|
package/react/modal/modal.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../react/modal/modal.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client';\n\nimport classNames from 'classnames';\nimport * as React from 'react';\nimport * as ReactDOM from 'react-dom';\n\nimport Button from '../button';\nimport
|
|
5
|
-
"mappings": "0bAEA,OAAOA,MAAgB,aACvB,UAAYC,MAAW,QACvB,UAAYC,MAAc,YAE1B,OAAOC,MAAY,YACnB,OAAOC,
|
|
6
|
-
"names": ["classNames", "React", "ReactDOM", "Button", "
|
|
4
|
+
"sourcesContent": ["'use client';\n\nimport classNames from 'classnames';\nimport * as React from 'react';\nimport * as ReactDOM from 'react-dom';\n\nimport Button from '../button';\nimport Close from '../icons/18/close';\nimport Text from '../text';\n\nimport { ActionTypes, type Modal as Props, backgrounds } from './modal.types';\nimport LinkButton from '../link-button';\n\nconst Modal: React.FC<React.PropsWithChildren<Props>> & {\n backgrounds: typeof backgrounds;\n} = ({\n actions,\n ariaLabel,\n background = backgrounds.primary,\n children,\n closeLabel,\n explanation,\n id,\n onClick = () => {},\n title,\n}) => {\n return ReactDOM.createPortal(\n <dialog\n aria-label={ariaLabel}\n className={classNames('modal', {\n [`modal--${background}`]: background,\n })}\n id={id}\n popover=\"auto\"\n >\n <div\n className={classNames('modal__close-action', {\n 'modal__close-action--always-shown': actions && actions.length,\n })}\n >\n <Button\n leadingIcon={<Close />}\n popoverTarget={id}\n size={Button.sizes.small}\n text={closeLabel}\n variant={Button.variants.secondary}\n iconOnly\n />\n </div>\n {title || explanation ? (\n <div className=\"modal__nav\">\n <div className=\"modal__texts\">\n {title ? (\n <Text\n className=\"modal__title\"\n size={Text.sizes.headline2}\n theme={Text.themes.emphasis}\n >\n {title}\n </Text>\n ) : null}\n {explanation ? (\n <div\n className={classNames('modal__explanation', {\n [`modal__explanation--${background}`]: background,\n })}\n >\n <Text size={Text.sizes.small}>{explanation}</Text>\n </div>\n ) : null}\n </div>\n </div>\n ) : null}\n <div className=\"modal__children\">\n <div>{children}</div>\n </div>\n {actions && actions.length ? (\n <div className=\"modal__actions\">\n {actions.map(action =>\n action.type === ActionTypes.LinkButton ? (\n <LinkButton {...action.action} />\n ) : action.type === ActionTypes.Button ? (\n <Button\n {...action.action}\n onClick={e => onClick(action.buttonId, e)}\n />\n ) : null,\n )}\n </div>\n ) : (\n <div className=\"modal__close-action-mobile\">\n <Button\n leadingIcon={<Close />}\n popoverTarget={id}\n text={closeLabel}\n variant={Button.variants.secondary}\n />\n </div>\n )}\n </dialog>,\n document.body,\n );\n};\n\nModal.backgrounds = backgrounds;\n\nexport default Modal;\n"],
|
|
5
|
+
"mappings": "0bAEA,OAAOA,MAAgB,aACvB,UAAYC,MAAW,QACvB,UAAYC,MAAc,YAE1B,OAAOC,MAAY,YACnB,OAAOC,MAAW,oBAClB,OAAOC,MAAU,UAEjB,OAAS,eAAAC,EAAkC,eAAAC,MAAmB,gBAC9D,OAAOC,MAAgB,iBAEvB,MAAMC,EAEF,CAAC,CACH,QAAAC,EACA,UAAAC,EACA,WAAAC,EAAaL,EAAY,QACzB,SAAAM,EACA,WAAAC,EACA,YAAAC,EACA,GAAAC,EACA,QAAAC,EAAU,IAAM,CAAC,EACjB,MAAAC,CACF,IACShB,EAAS,aACdD,EAAA,cAAC,UACC,aAAYU,EACZ,UAAWX,EAAW,QAAS,CAC7B,CAAC,UAAUY,CAAU,EAAE,EAAGA,CAC5B,CAAC,EACD,GAAII,EACJ,QAAQ,QAERf,EAAA,cAAC,OACC,UAAWD,EAAW,sBAAuB,CAC3C,oCAAqCU,GAAWA,EAAQ,MAC1D,CAAC,GAEDT,EAAA,cAACE,EAAA,CACC,YAAaF,EAAA,cAACG,EAAA,IAAM,EACpB,cAAeY,EACf,KAAMb,EAAO,MAAM,MACnB,KAAMW,EACN,QAASX,EAAO,SAAS,UACzB,SAAQ,GACV,CACF,EACCe,GAASH,EACRd,EAAA,cAAC,OAAI,UAAU,cACbA,EAAA,cAAC,OAAI,UAAU,gBACZiB,EACCjB,EAAA,cAACI,EAAA,CACC,UAAU,eACV,KAAMA,EAAK,MAAM,UACjB,MAAOA,EAAK,OAAO,UAElBa,CACH,EACE,KACHH,EACCd,EAAA,cAAC,OACC,UAAWD,EAAW,qBAAsB,CAC1C,CAAC,uBAAuBY,CAAU,EAAE,EAAGA,CACzC,CAAC,GAEDX,EAAA,cAACI,EAAA,CAAK,KAAMA,EAAK,MAAM,OAAQU,CAAY,CAC7C,EACE,IACN,CACF,EACE,KACJd,EAAA,cAAC,OAAI,UAAU,mBACbA,EAAA,cAAC,WAAKY,CAAS,CACjB,EACCH,GAAWA,EAAQ,OAClBT,EAAA,cAAC,OAAI,UAAU,kBACZS,EAAQ,IAAIS,GACXA,EAAO,OAASb,EAAY,WAC1BL,EAAA,cAACO,EAAAY,EAAA,GAAeD,EAAO,OAAQ,EAC7BA,EAAO,OAASb,EAAY,OAC9BL,EAAA,cAACE,EAAAkB,EAAAD,EAAA,GACKD,EAAO,QADZ,CAEC,QAASG,GAAKL,EAAQE,EAAO,SAAUG,CAAC,GAC1C,EACE,IACN,CACF,EAEArB,EAAA,cAAC,OAAI,UAAU,8BACbA,EAAA,cAACE,EAAA,CACC,YAAaF,EAAA,cAACG,EAAA,IAAM,EACpB,cAAeY,EACf,KAAMF,EACN,QAASX,EAAO,SAAS,UAC3B,CACF,CAEJ,EACA,SAAS,IACX,EAGFM,EAAM,YAAcF,EAEpB,IAAOgB,EAAQd",
|
|
6
|
+
"names": ["classNames", "React", "ReactDOM", "Button", "Close", "Text", "ActionTypes", "backgrounds", "LinkButton", "Modal", "actions", "ariaLabel", "background", "children", "closeLabel", "explanation", "id", "onClick", "title", "action", "__spreadValues", "__spreadProps", "e", "modal_default"]
|
|
7
7
|
}
|
package/react/modal/modal.scss
CHANGED
|
@@ -4,35 +4,50 @@
|
|
|
4
4
|
@use '../../tokens/spacing';
|
|
5
5
|
|
|
6
6
|
.modal {
|
|
7
|
-
background: color-mix(
|
|
8
|
-
in srgb,
|
|
9
|
-
var(--fixed-background-primary-default)
|
|
10
|
-
70%, transparent
|
|
11
|
-
);
|
|
12
|
-
box-sizing: border-box;
|
|
13
|
-
display: grid;
|
|
14
|
-
height: 100vh;
|
|
15
|
-
height: 100dvh;
|
|
16
|
-
left: 0;
|
|
17
|
-
overflow: hidden;
|
|
18
|
-
overscroll-behavior: contain;
|
|
19
|
-
place-items: center;
|
|
20
|
-
position: fixed;
|
|
21
|
-
top: 0;
|
|
22
|
-
width: 100vw;
|
|
23
|
-
width: 100dvw;
|
|
24
|
-
z-index: 900;
|
|
25
|
-
|
|
26
7
|
@mixin break {
|
|
27
8
|
@media (min-width: 500px) {
|
|
28
9
|
@content;
|
|
29
10
|
}
|
|
30
11
|
}
|
|
31
12
|
|
|
32
|
-
|
|
13
|
+
border: none;
|
|
14
|
+
display: none;
|
|
15
|
+
height: 100vh;
|
|
16
|
+
height: 100svh;
|
|
17
|
+
overflow: hidden;
|
|
18
|
+
padding: 0;
|
|
19
|
+
width: 100vw;
|
|
20
|
+
padding: 0 spacing.$m;
|
|
21
|
+
|
|
22
|
+
&::backdrop {
|
|
23
|
+
background: color-mix(
|
|
24
|
+
in srgb,
|
|
25
|
+
var(--fixed-background-primary-default) 70%,
|
|
26
|
+
transparent
|
|
27
|
+
);
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
&:popover-open {
|
|
31
|
+
display: flex;
|
|
32
|
+
flex-direction: column;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
&--primary {
|
|
36
|
+
background: var(--surface-primary-default);
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
&--secondary {
|
|
40
|
+
background: var(--surface-secondary-default);
|
|
41
|
+
}
|
|
33
42
|
|
|
34
43
|
@include break {
|
|
35
|
-
|
|
44
|
+
@include elevation.level(24);
|
|
45
|
+
padding: 0 spacing.$l;
|
|
46
|
+
border-radius: corner-radius.$s;
|
|
47
|
+
max-width: 640px;
|
|
48
|
+
height: min-content;
|
|
49
|
+
max-height: 95vh;
|
|
50
|
+
max-height: 95svh;
|
|
36
51
|
}
|
|
37
52
|
|
|
38
53
|
&__texts {
|
|
@@ -57,56 +72,16 @@
|
|
|
57
72
|
}
|
|
58
73
|
}
|
|
59
74
|
|
|
60
|
-
&__content {
|
|
61
|
-
position: relative;
|
|
62
|
-
height: 100vh;
|
|
63
|
-
height: 100dvh;
|
|
64
|
-
max-height: 100vh;
|
|
65
|
-
max-height: 100dvh;
|
|
66
|
-
max-width: 100vw;
|
|
67
|
-
max-width: 100dvw;
|
|
68
|
-
width: 100vw;
|
|
69
|
-
width: 100dvw;
|
|
70
|
-
overflow: auto;
|
|
71
|
-
|
|
72
|
-
&--primary {
|
|
73
|
-
background: var(--surface-primary-default);
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
&--secondary {
|
|
77
|
-
background: var(--surface-secondary-default);
|
|
78
|
-
}
|
|
79
|
-
|
|
80
|
-
@include break {
|
|
81
|
-
@include elevation.level(24);
|
|
82
|
-
border-radius: corner-radius.$s;
|
|
83
|
-
height: max-content;
|
|
84
|
-
max-height: calc(100vh - (spacing.$m * 2));
|
|
85
|
-
max-height: calc(100dvh - (spacing.$m * 2));
|
|
86
|
-
max-width: 640px;
|
|
87
|
-
width: 100%;
|
|
88
|
-
}
|
|
89
|
-
}
|
|
90
|
-
|
|
91
|
-
&__content-inner {
|
|
92
|
-
display: flex;
|
|
93
|
-
flex-direction: column;
|
|
94
|
-
height: 100%;
|
|
95
|
-
|
|
96
|
-
@include break {
|
|
97
|
-
max-height: calc(100vh - (spacing.$m * 2));
|
|
98
|
-
max-height: calc(100dvh - (spacing.$m * 2));
|
|
99
|
-
}
|
|
100
|
-
}
|
|
101
|
-
|
|
102
75
|
&__actions,
|
|
103
76
|
&__close-action-mobile {
|
|
104
|
-
|
|
77
|
+
align-items: center;
|
|
78
|
+
background: transparent;
|
|
105
79
|
border-top: 1px solid var(--ge-border-default);
|
|
106
80
|
display: flex;
|
|
107
|
-
justify-content: center;
|
|
108
81
|
gap: spacing.$s;
|
|
109
|
-
|
|
82
|
+
justify-content: center;
|
|
83
|
+
margin-top: auto;
|
|
84
|
+
padding: spacing.$s 0;
|
|
110
85
|
|
|
111
86
|
@include break {
|
|
112
87
|
border-radius: 0 0 corner-radius.$s corner-radius.$s;
|
|
@@ -139,11 +114,11 @@
|
|
|
139
114
|
display: flex;
|
|
140
115
|
gap: spacing.$m;
|
|
141
116
|
justify-content: space-between;
|
|
142
|
-
padding: spacing.$l
|
|
117
|
+
padding-top: spacing.$l;
|
|
118
|
+
height: min-content;
|
|
143
119
|
|
|
144
120
|
@include break {
|
|
145
121
|
margin-bottom: 0;
|
|
146
|
-
padding: spacing.$l spacing.$l 0 spacing.$l;
|
|
147
122
|
}
|
|
148
123
|
}
|
|
149
124
|
|
|
@@ -152,11 +127,7 @@
|
|
|
152
127
|
overflow-x: hidden;
|
|
153
128
|
overflow-y: auto;
|
|
154
129
|
overscroll-behavior: contain;
|
|
155
|
-
padding: spacing.$l
|
|
156
|
-
|
|
157
|
-
@include break {
|
|
158
|
-
margin-bottom: 0;
|
|
159
|
-
padding: spacing.$l;
|
|
160
|
-
}
|
|
130
|
+
padding: spacing.$l 0;
|
|
131
|
+
margin-bottom: auto;
|
|
161
132
|
}
|
|
162
133
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
const
|
|
1
|
+
const c={primary:"primary",secondary:"secondary"};var n=(t=>(t.LinkButton="LinkButton",t.Button="Button",t))(n||{});export{n as ActionTypes,c as backgrounds};
|
|
2
2
|
//# sourceMappingURL=modal.types.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../react/modal/modal.types.ts"],
|
|
4
|
-
"sourcesContent": ["import { Button } from '../button/button.types';\nimport { LinkButton } from '../link-button/link-button.types';\nimport { ObjectValues } from '../types';\n\nexport const backgrounds = {\n primary: 'primary',\n secondary: 'secondary',\n} as const;\n\nexport enum ActionTypes {\n LinkButton = 'LinkButton',\n Button = 'Button',\n}\n\ntype LinkAction = {\n type: ActionTypes.LinkButton;\n action: LinkButton;\n};\n\ntype ButtonAction = {\n type: ActionTypes.Button;\n action: Button;\n buttonId: string;\n};\n\nexport type Modal = {\n ariaLabel: string;\n background?: ObjectValues<typeof backgrounds>;\n closeLabel: string;\n explanation?: string;\n id: string;\n
|
|
4
|
+
"sourcesContent": ["import { Button } from '../button/button.types';\nimport { LinkButton } from '../link-button/link-button.types';\nimport { ObjectValues } from '../types';\n\nexport const backgrounds = {\n primary: 'primary',\n secondary: 'secondary',\n} as const;\n\nexport enum ActionTypes {\n LinkButton = 'LinkButton',\n Button = 'Button',\n}\n\ntype LinkAction = {\n type: ActionTypes.LinkButton;\n action: LinkButton;\n};\n\ntype ButtonAction = {\n type: ActionTypes.Button;\n action: Button;\n buttonId: string;\n};\n\nexport type Modal = {\n ariaLabel: string;\n background?: ObjectValues<typeof backgrounds>;\n closeLabel: string;\n explanation?: string;\n id: string;\n title?: string;\n actions?: (LinkAction | ButtonAction)[];\n onClick?: (id: string, arg?: unknown) => void;\n};\n"],
|
|
5
5
|
"mappings": "AAIO,MAAMA,EAAc,CACzB,QAAS,UACT,UAAW,WACb,EAEO,IAAKC,OACVA,EAAA,WAAa,aACbA,EAAA,OAAS,SAFCA,OAAA",
|
|
6
6
|
"names": ["backgrounds", "ActionTypes"]
|
|
7
7
|
}
|