@justeattakeaway/pie-notification 0.9.2 → 0.9.3

package/custom-elements.json

@@ -82,7 +82,7 @@
           "type": {
             "text": "DefaultProps"
           },
-          "default": "{\n    isOpen: true,\n    variant: 'neutral',\n    position: 'inline-content',\n    isDismissible: true,\n    isCompact: false,\n    headingLevel: 'h2',\n    hideIcon: false,\n    hasStackedActions: false,\n}"
+          "default": "{\n    variant: 'neutral',\n    position: 'inline-content',\n    isDismissible: true,\n    isCompact: false,\n    headingLevel: 'h2',\n    hideIcon: false,\n    isOpen: true,\n    hasStackedActions: false,\n}"
         }
       ],
       "exports": [

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { ComponentDefaultPropsGeneric } from '@justeattakeaway/pie-webc-core';
+import { ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
 import type { CSSResult } from 'lit';
 import type { LitElement } from 'lit';
 import type { nothing } from 'lit';
@@ -25,7 +25,7 @@ export declare const componentClass = "c-notification";
 
 export declare const componentSelector = "pie-notification";
 
-export declare type DefaultProps = ComponentDefaultPropsGeneric<NotificationProps, 'isOpen' | 'variant' | 'position' | 'isDismissible' | 'isCompact' | 'headingLevel' | 'hideIcon' | 'hasStackedActions'>;
+export declare type DefaultProps = ComponentDefaultProps<NotificationProps, keyof Omit<NotificationProps, 'heading' | 'aria' | 'leadingAction' | 'supportingAction'>>;
 
 export declare const defaultProps: DefaultProps;
 

package/dist/index.js

@@ -11,13 +11,13 @@ import "@justeattakeaway/pie-icons-webc/dist/IconCheckCircle.js";
 import "@justeattakeaway/pie-icons-webc/dist/IconClose.js";
 import "@justeattakeaway/pie-icons-webc/dist/IconInfoCircle.js";
 const k = ["neutral", "neutral-alternative", "info", "success", "warning", "error"], w = ["h2", "h3", "h4", "h5", "h6"], A = ["inline-content", "full-width"], t = "pie-notification", h = "c-notification", E = `${t}-close`, z = `${t}-open`, S = `${t}-leading-action-click`, T = `${t}-supporting-action-click`, l = {
-  isOpen: !0,
   variant: "neutral",
   position: "inline-content",
   isDismissible: !0,
   isCompact: !1,
   headingLevel: "h2",
   hideIcon: !1,
+  isOpen: !0,
   hasStackedActions: !1
 }, B = `*,*:after,*:before{box-sizing:inherit}.c-notification{--notification-border-radius: var(--dt-radius-rounded-c);--notification-background-color: var(--dt-color-container-subtle);--notification-direction: column;--notification-heading-font-size: calc(var(--dt-font-heading-s-size--narrow) * 1px);--notification-heading-line-height: calc(var(--dt-font-heading-s-line-height--narrow) * 1px);--notification-font-size: calc(var(--dt-font-body-l-size) * 1px);--notification-line-height: calc(var(--dt-font-body-l-line-height) * 1px);--notification-close-icon-offset: var(--dt-spacing-b);--notification-icon-fill: var(--dt-color-content-default);--notification-icon-offset: 2px;--icon-size-override: 24px;padding:var(--dt-spacing-d);border-radius:var(--notification-border-radius);background-color:var(--notification-background-color);position:relative;display:flex;flex-direction:var(--notification-direction);gap:var(--dt-spacing-d);font-size:var(--notification-font-size);line-height:var(--notification-line-height)}.c-notification[isCompact]{--notification-direction: row}.c-notification[position=full-width]{--notification-border-radius: var(--dt-radius-rounded-none)}.c-notification[variant=neutral-alternative]{--notification-background-color: var(--dt-color-container-default)}.c-notification[variant=info]{--notification-background-color: var(--dt-color-support-info-02);--notification-icon-fill: var(--dt-color-blue)}.c-notification[variant=success]{--notification-background-color: var(--dt-color-support-positive-02);--notification-icon-fill: var(--dt-color-content-positive)}.c-notification[variant=warning]{--notification-background-color: var(--dt-color-support-warning-02)}.c-notification[variant=error]{--notification-background-color: var(--dt-color-support-error-02);--notification-icon-fill: var(--dt-color-support-error)}.c-notification-heading{margin:0;margin-block-end:var(--dt-spacing-a);font-size:var(--notification-heading-font-size);line-height:var(--notification-heading-line-height)}@media (min-width: 768px){.c-notification-heading{--notification-heading-font-size: calc(var(--dt-font-heading-s-size--wide) * 1px);--notification-heading-line-height: calc(var(--dt-font-heading-s-line-height--wide) * 1px)}}.c-notification-content-section{display:flex;flex-direction:row;gap:var(--dt-spacing-c)}.c-notification-content-section[isDismissible]{max-width:calc(100% - var(--notification-close-icon-offset) - 40px)}.c-notification-icon-close{position:absolute;inset-block-start:var(--notification-close-icon-offset);inset-inline-end:var(--notification-close-icon-offset)}.c-notification-footer{display:flex;flex-direction:row;justify-content:flex-end;gap:var(--dt-spacing-d)}.c-notification-footer[isCompact]{align-self:flex-end}@media (max-width: 768px){.c-notification-footer[isStacked]{flex-direction:column-reverse}}.icon,::slotted([slot=icon]){display:inline-flex;color:var(--notification-icon-fill);margin-block-start:var(--notification-icon-offset)}@media (max-width: 768px){.icon,::slotted([slot=icon]){margin-block-start:0}}
 `;

package/dist/react.d.ts

@@ -1,4 +1,4 @@
-import { ComponentDefaultPropsGeneric } from '@justeattakeaway/pie-webc-core';
+import { ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
 import type { CSSResult } from 'lit';
 import type { LitElement } from 'lit';
 import type { nothing } from 'lit';
@@ -26,7 +26,7 @@ export declare const componentClass = "c-notification";
 
 export declare const componentSelector = "pie-notification";
 
-export declare type DefaultProps = ComponentDefaultPropsGeneric<NotificationProps, 'isOpen' | 'variant' | 'position' | 'isDismissible' | 'isCompact' | 'headingLevel' | 'hideIcon' | 'hasStackedActions'>;
+export declare type DefaultProps = ComponentDefaultProps<NotificationProps, keyof Omit<NotificationProps, 'heading' | 'aria' | 'leadingAction' | 'supportingAction'>>;
 
 export declare const defaultProps: DefaultProps;
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-notification",
   "description": "PIE Design System Notification built using Web Components",
-  "version": "0.9.2",
+  "version": "0.9.3",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -41,9 +41,9 @@
     "cem-plugin-module-file-extensions": "0.0.5"
   },
   "dependencies": {
-    "@justeattakeaway/pie-icon-button": "0.28.8",
-    "@justeattakeaway/pie-icons-webc": "0.24.1",
-    "@justeattakeaway/pie-webc-core": "0.23.0"
+    "@justeattakeaway/pie-icon-button": "0.28.9",
+    "@justeattakeaway/pie-icons-webc": "0.24.2",
+    "@justeattakeaway/pie-webc-core": "0.24.0"
   },
   "volta": {
     "extends": "../../../package.json"

package/src/defs.ts

@@ -1,4 +1,4 @@
-import { type ComponentDefaultPropsGeneric } from '@justeattakeaway/pie-webc-core';
+import { type ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
 
 export const variants = ['neutral', 'neutral-alternative', 'info', 'success', 'warning', 'error'] as const;
 export const headingLevels = ['h2', 'h3', 'h4', 'h5', 'h6'] as const;
@@ -116,15 +116,15 @@ export const ON_NOTIFICATION_LEADING_ACTION_CLICK_EVENT = `${componentSelector}-
  */
 export const ON_NOTIFICATION_SUPPORTING_ACTION_CLICK_EVENT = `${componentSelector}-supporting-action-click`;
 
-export type DefaultProps = ComponentDefaultPropsGeneric<NotificationProps, 'isOpen' | 'variant' | 'position' | 'isDismissible' | 'isCompact' | 'headingLevel' | 'hideIcon' | 'hasStackedActions'>;
+export type DefaultProps = ComponentDefaultProps<NotificationProps, keyof Omit<NotificationProps, 'heading' | 'aria' | 'leadingAction' | 'supportingAction'>>;
 
 export const defaultProps: DefaultProps = {
-    isOpen: true,
     variant: 'neutral',
     position: 'inline-content',
     isDismissible: true,
     isCompact: false,
     headingLevel: 'h2',
     hideIcon: false,
+    isOpen: true,
     hasStackedActions: false,
 };