@sikt/sds-notification 1.0.0 → 1.1.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/CHANGELOG.md +6 -0
- package/dist/index.css +24 -2
- package/dist/index.css.map +1 -1
- package/dist/index.d.mts +2 -1
- package/dist/index.d.ts +2 -1
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +1 -1
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,12 @@
|
|
|
2
2
|
|
|
3
3
|
All notable changes to this project will be documented in this file. See [commit-and-tag-version](https://github.com/absolute-version/commit-and-tag-version) for commit guidelines.
|
|
4
4
|
|
|
5
|
+
## [1.1.0](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/compare/@sikt/sds-notification@1.0.0...@sikt/sds-notification@1.1.0) (2026-03-03)
|
|
6
|
+
|
|
7
|
+
### Features
|
|
8
|
+
|
|
9
|
+
- **notification:** add variant prop ([41c29e8](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/41c29e801f7f0c1ccb87980a5a534792fb1a29cf))
|
|
10
|
+
|
|
5
11
|
## 1.0.0 (2026-01-28)
|
|
6
12
|
|
|
7
13
|
### Features
|
package/dist/index.css
CHANGED
|
@@ -1,9 +1,11 @@
|
|
|
1
1
|
/* src/notification.pcss */
|
|
2
2
|
.sds-notification {
|
|
3
|
+
--notification-background-color: var(--sds-color-support-info-strong);
|
|
4
|
+
--notification-color: var(--sds-color-text-on-strong);
|
|
3
5
|
align-items: center;
|
|
4
|
-
background-color: var(--
|
|
6
|
+
background-color: var(--notification-background-color);
|
|
5
7
|
border-radius: var(--sds-space-border-radius-full);
|
|
6
|
-
color: var(--
|
|
8
|
+
color: var(--notification-color);
|
|
7
9
|
display: inline-flex;
|
|
8
10
|
font-size: var(--sds-typography-fontsize-300);
|
|
9
11
|
justify-content: center;
|
|
@@ -11,6 +13,26 @@
|
|
|
11
13
|
min-width: 1em;
|
|
12
14
|
min-height: 1em;
|
|
13
15
|
}
|
|
16
|
+
.sds-notification--brand {
|
|
17
|
+
--notification-background-color: var(--sds-color-brand-primary-strong);
|
|
18
|
+
}
|
|
19
|
+
.sds-notification--neutral {
|
|
20
|
+
--notification-background-color: var( --sds-color-interaction-neutral-strong-default );
|
|
21
|
+
}
|
|
22
|
+
.sds-notification--success {
|
|
23
|
+
--notification-background-color: var(--sds-color-support-success-strong);
|
|
24
|
+
}
|
|
25
|
+
.sds-notification--info {
|
|
26
|
+
--notification-background-color: var(--sds-color-support-info-strong);
|
|
27
|
+
}
|
|
28
|
+
.sds-notification--warning {
|
|
29
|
+
--notification-background-color: var(--sds-color-support-warning-strong);
|
|
30
|
+
--notification-color: var(--sds-color-text-primary);
|
|
31
|
+
color-scheme: only light;
|
|
32
|
+
}
|
|
33
|
+
.sds-notification--critical {
|
|
34
|
+
--notification-background-color: var(--sds-color-support-critical-strong);
|
|
35
|
+
}
|
|
14
36
|
.sds-notification__count {
|
|
15
37
|
align-items: center;
|
|
16
38
|
display: inline-flex;
|
package/dist/index.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/notification.pcss"],"sourcesContent":[".sds-notification {\n
|
|
1
|
+
{"version":3,"sources":["../src/notification.pcss"],"sourcesContent":[".sds-notification {\n --notification-background-color: var(--sds-color-support-info-strong);\n --notification-color: var(--sds-color-text-on-strong);\n\n align-items: center;\n background-color: var(--notification-background-color);\n border-radius: var(--sds-space-border-radius-full);\n color: var(--notification-color);\n display: inline-flex;\n font-size: var(--sds-typography-fontsize-300);\n justify-content: center;\n padding: 0 var(--sds-space-padding-infinitesimal);\n min-width: 1em;\n min-height: 1em;\n}\n\n .sds-notification--brand {\n --notification-background-color: var(--sds-color-brand-primary-strong);\n }\n\n .sds-notification--neutral {\n --notification-background-color: var(\n --sds-color-interaction-neutral-strong-default\n );\n }\n\n .sds-notification--success {\n --notification-background-color: var(--sds-color-support-success-strong);\n }\n\n .sds-notification--info {\n --notification-background-color: var(--sds-color-support-info-strong);\n }\n\n .sds-notification--warning {\n --notification-background-color: var(--sds-color-support-warning-strong);\n --notification-color: var(--sds-color-text-primary);\n\n color-scheme: only light;\n }\n\n .sds-notification--critical {\n --notification-background-color: var(--sds-color-support-critical-strong);\n }\n\n .sds-notification__count {\n align-items: center;\n display: inline-flex;\n font-size: var(--sds-typography-body-default-fontsize);\n font-weight: var(--sds-typography-fontweight-semibold);\n justify-content: center;\n line-height: var(--sds-typography-body-default-lineheight);\n padding: 0 var(--sds-space-padding-minimal);\n min-width: 1.25em;\n }\n"],"mappings":";AAAA,CAAC;AACC,mCAAiC,IAAI;AACrC,wBAAsB,IAAI;AAE1B,eAAa;AACb,oBAAkB,IAAI;AACtB,iBAAe,IAAI;AACnB,SAAO,IAAI;AACX,WAAS;AACT,aAAW,IAAI;AACf,mBAAiB;AACjB,WAAS,EAAE,IAAI;AACf,aAAW;AACX,cAAY;AACd;AAEE,CAAC;AACC,mCAAiC,IAAI;AACvC;AAEA,CAAC;AACC,mCAAiC,KAC/B;AAEJ;AAEA,CAAC;AACC,mCAAiC,IAAI;AACvC;AAEA,CAAC;AACC,mCAAiC,IAAI;AACvC;AAEA,CAAC;AACC,mCAAiC,IAAI;AACrC,wBAAsB,IAAI;AAE1B,gBAAc,KAAK;AACrB;AAEA,CAAC;AACC,mCAAiC,IAAI;AACvC;AAEA,CAAC;AACC,eAAa;AACb,WAAS;AACT,aAAW,IAAI;AACf,eAAa,IAAI;AACjB,mBAAiB;AACjB,eAAa,IAAI;AACjB,WAAS,EAAE,IAAI;AACf,aAAW;AACb;","names":[]}
|
package/dist/index.d.mts
CHANGED
|
@@ -2,12 +2,13 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
|
2
2
|
import { HTMLAttributes } from 'react';
|
|
3
3
|
|
|
4
4
|
interface NotificationProps extends HTMLAttributes<HTMLSpanElement> {
|
|
5
|
+
variant?: "brand" | "neutral" | "success" | "info" | "warning" | "critical";
|
|
5
6
|
className?: string;
|
|
6
7
|
count?: number;
|
|
7
8
|
maxCount?: number;
|
|
8
9
|
}
|
|
9
10
|
declare const Notification: {
|
|
10
|
-
({ className, count, maxCount, ...rest }: NotificationProps): react_jsx_runtime.JSX.Element;
|
|
11
|
+
({ variant, className, count, maxCount, ...rest }: NotificationProps): react_jsx_runtime.JSX.Element;
|
|
11
12
|
displayName: string;
|
|
12
13
|
};
|
|
13
14
|
|
package/dist/index.d.ts
CHANGED
|
@@ -2,12 +2,13 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
|
2
2
|
import { HTMLAttributes } from 'react';
|
|
3
3
|
|
|
4
4
|
interface NotificationProps extends HTMLAttributes<HTMLSpanElement> {
|
|
5
|
+
variant?: "brand" | "neutral" | "success" | "info" | "warning" | "critical";
|
|
5
6
|
className?: string;
|
|
6
7
|
count?: number;
|
|
7
8
|
maxCount?: number;
|
|
8
9
|
}
|
|
9
10
|
declare const Notification: {
|
|
10
|
-
({ className, count, maxCount, ...rest }: NotificationProps): react_jsx_runtime.JSX.Element;
|
|
11
|
+
({ variant, className, count, maxCount, ...rest }: NotificationProps): react_jsx_runtime.JSX.Element;
|
|
11
12
|
displayName: string;
|
|
12
13
|
};
|
|
13
14
|
|
package/dist/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var e=require("clsx/lite"),r=require("react/jsx-runtime"),t=Object.defineProperty,a=Object.defineProperties,n=Object.getOwnPropertyDescriptors,
|
|
1
|
+
"use strict";var e=require("clsx/lite"),r=require("react/jsx-runtime"),t=Object.defineProperty,a=Object.defineProperties,n=Object.getOwnPropertyDescriptors,i=Object.getOwnPropertySymbols,o=Object.prototype.hasOwnProperty,c=Object.prototype.propertyIsEnumerable,s=(e,r,a)=>r in e?t(e,r,{enumerable:!0,configurable:!0,writable:!0,value:a}):e[r]=a,l=t=>{var l,f,u=t,{variant:p="info",className:b,count:m,maxCount:O=1/0}=u,d=((e,r)=>{var t={};for(var a in e)o.call(e,a)&&r.indexOf(a)<0&&(t[a]=e[a]);if(null!=e&&i)for(var a of i(e))r.indexOf(a)<0&&c.call(e,a)&&(t[a]=e[a]);return t})(u,["variant","className","count","maxCount"]);return r.jsx("span",(l=((e,r)=>{for(var t in r||(r={}))o.call(r,t)&&s(e,t,r[t]);if(i)for(var t of i(r))c.call(r,t)&&s(e,t,r[t]);return e})({className:e.clsx("sds-notification","sds-notification--".concat(p),b)},d),f={children:m&&r.jsx("span",{className:"sds-notification__count",children:O<m?"".concat(O,"+"):m})},a(l,n(f))))};l.displayName="Notification",exports.Notification=l;//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/Notification.tsx"],"names":["jsx","clsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"sources":["../src/Notification.tsx"],"names":["jsx","clsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAWO,IAAM,YAAA,GAAe,CAAC,EAAA,KAMJ;AANI,EAAA,IAAA,EAAA,GAAA,EAAA,EAC3B;AAAA,IAAA,OAAA,GAAU,MAAA;AAAA,IACV,SAAA;AAAA,IACA,KAAA;AAAA,IACA,QAAA,GAAW;AAAA,GAfb,GAW6B,EAAA,EAKxB,IAAA,GAAA,SAAA,CALwB,EAAA,EAKxB;AAAA,IAJH,SAAA;AAAA,IACA,WAAA;AAAA,IACA,OAAA;AAAA,IACA;AAAA,GAAA,CAAA;AAGA,EAAA,uBACEA,cAAA;AAAA,IAAC,MAAA;AAAA,IAAA,aAAA,CAAA,cAAA,CAAA;AAAA,MACC,SAAA,EAAWC,SAAA;AAAA,QACT,kBAAA;AAAA,QACA,oBAAA,CAAqB,MAAA,CAAA,OAAA,CAAA;AAAA,QACrB;AAAA;AACF,KAAA,EACI,IAAA,CAAA,EANL;AAAA,MAQE,QAAA,EAAA,KAAA,oBACCD,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,yBAAA,EACb,qBAAW,KAAA,GAAQ,EAAA,CAAG,MAAA,CAAA,QAAA,EAAQ,GAAA,CAAA,GAAM,KAAA,EACvC;AAAA,KAAA;AAAA,GAEJ;AAEJ;AAEA,YAAA,CAAa,WAAA,GAAc,cAAA","file":"index.js","sourcesContent":["import { clsx } from \"clsx/lite\";\nimport { HTMLAttributes } from \"react\";\nimport \"./notification.pcss\";\n\nexport interface NotificationProps extends HTMLAttributes<HTMLSpanElement> {\n variant?: \"brand\" | \"neutral\" | \"success\" | \"info\" | \"warning\" | \"critical\";\n className?: string;\n count?: number;\n maxCount?: number;\n}\n\nexport const Notification = ({\n variant = \"info\",\n className,\n count,\n maxCount = Infinity,\n ...rest\n}: NotificationProps) => {\n return (\n <span\n className={clsx(\n \"sds-notification\",\n `sds-notification--${variant}`,\n className,\n )}\n {...rest}\n >\n {count && (\n <span className=\"sds-notification__count\">\n {maxCount < count ? `${maxCount}+` : count}\n </span>\n )}\n </span>\n );\n};\n\nNotification.displayName = \"Notification\";\n"]}
|
package/dist/index.mjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{clsx as
|
|
1
|
+
import{clsx as r}from"clsx/lite";import{jsx as e}from"react/jsx-runtime";var t=Object.defineProperty,a=Object.defineProperties,o=Object.getOwnPropertyDescriptors,n=Object.getOwnPropertySymbols,i=Object.prototype.hasOwnProperty,c=Object.prototype.propertyIsEnumerable,l=(r,e,a)=>e in r?t(r,e,{enumerable:!0,configurable:!0,writable:!0,value:a}):r[e]=a,s=t=>{var s,f,p=t,{variant:m="info",className:u,count:b,maxCount:O=1/0}=p,d=((r,e)=>{var t={};for(var a in r)i.call(r,a)&&e.indexOf(a)<0&&(t[a]=r[a]);if(null!=r&&n)for(var a of n(r))e.indexOf(a)<0&&c.call(r,a)&&(t[a]=r[a]);return t})(p,["variant","className","count","maxCount"]);return e("span",(s=((r,e)=>{for(var t in e||(e={}))i.call(e,t)&&l(r,t,e[t]);if(n)for(var t of n(e))c.call(e,t)&&l(r,t,e[t]);return r})({className:r("sds-notification","sds-notification--".concat(m),u)},d),f={children:b&&e("span",{className:"sds-notification__count",children:O<b?"".concat(O,"+"):b})},a(s,o(f))))};s.displayName="Notification";export{s as Notification};//# sourceMappingURL=index.mjs.map
|
package/dist/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/Notification.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"sources":["../src/Notification.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAWO,IAAM,YAAA,GAAe,CAAC,EAAA,KAMJ;AANI,EAAA,IAAA,EAAA,GAAA,EAAA,EAC3B;AAAA,IAAA,OAAA,GAAU,MAAA;AAAA,IACV,SAAA;AAAA,IACA,KAAA;AAAA,IACA,QAAA,GAAW;AAAA,GAfb,GAW6B,EAAA,EAKxB,IAAA,GAAA,SAAA,CALwB,EAAA,EAKxB;AAAA,IAJH,SAAA;AAAA,IACA,WAAA;AAAA,IACA,OAAA;AAAA,IACA;AAAA,GAAA,CAAA;AAGA,EAAA,uBACE,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA,aAAA,CAAA,cAAA,CAAA;AAAA,MACC,SAAA,EAAW,IAAA;AAAA,QACT,kBAAA;AAAA,QACA,oBAAA,CAAqB,MAAA,CAAA,OAAA,CAAA;AAAA,QACrB;AAAA;AACF,KAAA,EACI,IAAA,CAAA,EANL;AAAA,MAQE,QAAA,EAAA,KAAA,oBACC,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,yBAAA,EACb,qBAAW,KAAA,GAAQ,EAAA,CAAG,MAAA,CAAA,QAAA,EAAQ,GAAA,CAAA,GAAM,KAAA,EACvC;AAAA,KAAA;AAAA,GAEJ;AAEJ;AAEA,YAAA,CAAa,WAAA,GAAc,cAAA","file":"index.mjs","sourcesContent":["import { clsx } from \"clsx/lite\";\nimport { HTMLAttributes } from \"react\";\nimport \"./notification.pcss\";\n\nexport interface NotificationProps extends HTMLAttributes<HTMLSpanElement> {\n variant?: \"brand\" | \"neutral\" | \"success\" | \"info\" | \"warning\" | \"critical\";\n className?: string;\n count?: number;\n maxCount?: number;\n}\n\nexport const Notification = ({\n variant = \"info\",\n className,\n count,\n maxCount = Infinity,\n ...rest\n}: NotificationProps) => {\n return (\n <span\n className={clsx(\n \"sds-notification\",\n `sds-notification--${variant}`,\n className,\n )}\n {...rest}\n >\n {count && (\n <span className=\"sds-notification__count\">\n {maxCount < count ? `${maxCount}+` : count}\n </span>\n )}\n </span>\n );\n};\n\nNotification.displayName = \"Notification\";\n"]}
|