@spectrum-css/alertdialog - npm Package Compare versions

Comparing version 1.2.5-next.1 to 1.2.5-next.2

package.json

 {
   "name": "@spectrum-css/alertdialog",
-  "version": "1.2.5-next.1",
+  "version": "1.2.5-next.2",
   "description": "The Spectrum CSS alertdialog component",
@@ -16,3 +16,3 @@ "license": "Apache-2.0",
   },
-  "main": "dist/index-vars.css",
+  "main": "dist/index.css",
   "peerDependencies": {
@@ -23,3 +23,3 @@ "@spectrum-css/buttongroup": ">=6",
     "@spectrum-css/modal": ">=4",
-    "@spectrum-css/tokens": ">=13",
+    "@spectrum-css/tokens": "^14.0.0-next.3",
     "@spectrum-css/underlay": ">=3"
@@ -35,9 +35,6 @@ },
   },
-  "devDependencies": {
-    "@spectrum-css/component-builder-simple": "^5.0.6-next.1"
-  },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "2216cf58a18fb79d0cb987c485f7c4c177b7925f"
+  "gitHead": "35c5f608be3785b57e7cdfd982378fff080accc2"
 }

project.json

@@ -9,9 +9,9 @@ {
 		"compare": {},
+		"format": {},
 		"lint": {},
-		"validate": {},
-
 		"test": {
 			"defaultConfiguration": "scope"
-		}
+		},
+		"validate": {}
 	}
 }

stories/alertdialog.stories.js

 import { Template } from "./template";
 
 export default {
-  title: "Components/Alert dialog",
-  description:
+	title: "Components/Alert dialog",
+	description:
     "Alert dialogs display important information that users need to acknowledge. They appear over the interface and block further interactions until an action is selected.",
-  component: "AlertDialog",
-  argTypes: {
-    heading: {
-      name: "Heading",
-      type: { name: "string" },
-      table: {
-        type: { summary: "string" },
-        category: "Component",
-      },
-      control: { type: "text" },
-    },
-    content: {
-      name: "Content",
-      type: { name: "string" },
-      table: {
-        type: { summary: "string" },
-        category: "Component",
-      },
-      control: { type: "text" },
-    },
-    isOpen: {
-      name: "Open",
-      type: { name: "boolean" },
-      table: {
-        type: { summary: "boolean" },
-        category: "State",
-      },
-      control: "boolean",
-    },
-    variant: { table: { disable: true } },
-  },
-  args: {
-    rootClass: "spectrum-AlertDialog",
-    isOpen: true,
-  },
-  parameters: {
-    actions: {
-      handles: ["click .spectrum-AlertDialog button"],
-    },
-    status: {
-      type: process.env.MIGRATED_PACKAGES.includes("alertdialog")
-        ? "migrated"
-        : undefined,
-    },
-  },
+	component: "AlertDialog",
+	argTypes: {
+		heading: {
+			name: "Heading",
+			type: { name: "string" },
+			table: {
+				type: { summary: "string" },
+				category: "Component",
+			},
+			control: { type: "text" },
+		},
+		content: {
+			name: "Content",
+			type: { name: "string" },
+			table: {
+				type: { summary: "string" },
+				category: "Component",
+			},
+			control: { type: "text" },
+		},
+		isOpen: {
+			name: "Open",
+			type: { name: "boolean" },
+			table: {
+				type: { summary: "boolean" },
+				category: "State",
+			},
+			control: "boolean",
+		},
+		variant: { table: { disable: true } },
+	},
+	args: {
+		rootClass: "spectrum-AlertDialog",
+		isOpen: true,
+	},
+	parameters: {
+		actions: {
+			handles: ["click .spectrum-AlertDialog button"],
+		},
+		status: {
+			type: "migrated",
+		},
+	},
 };
@@ -56,15 +54,14 @@
 Default.args = {
-  variant: 'confirmation',
-  heading: "Enable Smart Filters?",
-  buttons: [{
-    variant: "secondary",
-    treatment: "outline",
-    label: "Remind me later"
-  }, {
-    variant: "primary",
-    treatment: "fill",
-    label: "Enable",
-    variant: "accent"
-  }],
-  content: 'Smart filters are nondestructive and will preserve your original images.',
+	variant: "confirmation",
+	heading: "Enable Smart Filters?",
+	buttons: [{
+		variant: "secondary",
+		treatment: "outline",
+		label: "Remind me later"
+	}, {
+		treatment: "fill",
+		label: "Enable",
+		variant: "accent"
+	}],
+	content: "Smart filters are nondestructive and will preserve your original images.",
 };
@@ -74,18 +71,18 @@
 Information.args = {
-  variant: 'information',
-  heading: "Informative Dialog with a wrapping title text because the text is longer than the width of the alert dialog",
-  buttons: [{
-    variant: "secondary",
-    treatment: "outline",
-    label: "No, thanks"
-  },{
-    variant: "secondary",
-    treatment: "outline",
-    label: "Remind me later"
-  }, {
-    variant: "primary",
-    treatment: "outline",
-    label: "Rate now",
-  }],
-  content: 'If you enjoy our app, would you mind taking a moment to rate it?',
+	variant: "information",
+	heading: "Informative Dialog with a wrapping title text because the text is longer than the width of the alert dialog",
+	buttons: [{
+		variant: "secondary",
+		treatment: "outline",
+		label: "No, thanks"
+	},{
+		variant: "secondary",
+		treatment: "outline",
+		label: "Remind me later"
+	}, {
+		variant: "primary",
+		treatment: "outline",
+		label: "Rate now",
+	}],
+	content: "If you enjoy our app, would you mind taking a moment to rate it?",
 };
@@ -95,16 +92,15 @@
 Warning.args = {
-  variant: 'warning',
-  heading: "Unverified format",
-  icon: true,
-  buttons: [{
-    variant: "secondary",
-    treatment: "outline",
-    label: "Cancel"
-  }, {
-    variant: "primary",
-    treatment: "outline",
-    label: "Continue",
-    variant: "primary"
-  }],
-  content: 'This format has not been verified and may not be viewable for some users. Do you want to continue publishing?',
+	variant: "warning",
+	heading: "Unverified format",
+	icon: true,
+	buttons: [{
+		variant: "secondary",
+		treatment: "outline",
+		label: "Cancel"
+	}, {
+		treatment: "outline",
+		label: "Continue",
+		variant: "primary"
+	}],
+	content: "This format has not been verified and may not be viewable for some users. Do you want to continue publishing?",
 };
@@ -114,16 +110,15 @@
 Error.args = {
-  variant: 'error',
-  heading: "Unable to share",
-  icon: true,
-  buttons: [{
-    variant: "secondary",
-    treatment: "outline",
-    label: "Cancel"
-  }, {
-    variant: "primary",
-    treatment: "outline",
-    label: "Continue",
-    variant: "primary"
-  }],
-  content: 'An error occured while sharing your project. Please verify the email address and try again.',
+	variant: "error",
+	heading: "Unable to share",
+	icon: true,
+	buttons: [{
+		variant: "secondary",
+		treatment: "outline",
+		label: "Cancel"
+	}, {
+		treatment: "outline",
+		label: "Continue",
+		variant: "primary"
+	}],
+	content: "An error occured while sharing your project. Please verify the email address and try again.",
 
@@ -134,15 +129,14 @@ };
 Destructive.args = {
-  variant: 'destructive',
-  heading: "Delete 3 documents?",
-  buttons: [{
-    variant: "secondary",
-    treatment: "outline",
-    label: "Cancel"
-  }, {
-    variant: "primary",
-    treatment: "fill",
-    label: "Delete",
-    variant: "negative"
-  }],
-  content: 'Are you sure you want to delete the 3 selected documents?',
+	variant: "destructive",
+	heading: "Delete 3 documents?",
+	buttons: [{
+		variant: "secondary",
+		treatment: "outline",
+		label: "Cancel"
+	}, {
+		treatment: "fill",
+		label: "Delete",
+		variant: "negative"
+	}],
+	content: "Are you sure you want to delete the 3 selected documents?",
 };

stories/template.js

@@ -1,33 +0,31 @@
-import { useArgs } from "@storybook/client-api";
+import { useArgs } from "@storybook/preview-api";
 import { html } from "lit";
 import { classMap } from "lit/directives/class-map.js";
 import { ifDefined } from "lit/directives/if-defined.js";
-import { when } from 'lit/directives/when.js';
+import { when } from "lit/directives/when.js";
 
-import { Template as Button } from '@spectrum-css/button/stories/template.js';
+import { Template as Button } from "@spectrum-css/button/stories/template.js";
 import { Template as ButtonGroup } from "@spectrum-css/buttongroup/stories/template.js";
 import { Template as Divider } from "@spectrum-css/divider/stories/template.js";
 import { Template as Icon } from "@spectrum-css/icon/stories/template.js";
-import { Template as Modal } from '@spectrum-css/modal/stories/template.js';
-import { Template as Underlay } from '@spectrum-css/underlay/stories/template.js';
+import { Template as Modal } from "@spectrum-css/modal/stories/template.js";
+import { Template as Underlay } from "@spectrum-css/underlay/stories/template.js";
 
-import '../index.css';
+import "../index.css";
 
 export const Template = ({
-  rootClass = "spectrum-AlertDialog",
-  isOpen = true,
-  showModal = false,
-  heading = true,
-  content = true,
-  customClasses = [],
-  buttons,
-  variant,
-  onclick,
-  icon = false,
-  id,
-  ...globals
+	rootClass = "spectrum-AlertDialog",
+	isOpen = true,
+	heading = true,
+	content = true,
+	customClasses = [],
+	buttons,
+	variant,
+	icon = false,
+	id,
+	...globals
 }) => {
-  const [_, updateArgs] = useArgs();
+	const [, updateArgs] = useArgs();
 
-  const Dialog = html`
+	const Dialog = html`
     <div
@@ -49,3 +47,3 @@ class=${classMap({
         ${when(icon, () => Icon({
-          size: 'm',
+          size: "m",
           iconName: "Alert",
@@ -73,3 +71,3 @@ customClasses: [`${rootClass}-icon`],
 
-  return  html`
+	return  html`
     ${Underlay({
@@ -101,3 +99,3 @@ ...globals,
     })}
-      `
-  }
+      `;
+};

New alerts

Unidentified License

License

(Experimental) Something that seems like a license was found, but its contents could not be matched with a known license.

Found 1 instance in 1 package

Fixed alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

80731

increased by22.6%

Dev dependency count

0

decreased by-100%

Number of package files

16

increased by6.67%

Lines of code

692

increased by7.12%

Number of low supply chain risk alerts

0

decreased by-100%

Worsened metrics

Number of low license alerts

1

increased byInfinity%

License quality

80

decreased by-20%

No dependency changes