@spectrum-web-components/help-text - npm Package Compare versions

Comparing version 0.2.0-devmode.0 to 0.2.0

package.json

 {
     "name": "@spectrum-web-components/help-text",
-    "version": "0.2.0-devmode.0+7b0ea531e",
+    "version": "0.2.0",
     "publishConfig": {
@@ -80,4 +80,4 @@ "access": "public"
     "dependencies": {
-        "@spectrum-web-components/base": "^0.6.0",
-        "@spectrum-web-components/icons-workflow": "^0.9.0-devmode.0+7b0ea531e",
+        "@spectrum-web-components/base": "^0.7.0",
+        "@spectrum-web-components/icons-workflow": "^0.9.0",
         "tslib": "^2.0.0"
@@ -94,3 +94,3 @@ },
     ],
-    "gitHead": "7b0ea531e9c7225c8964c5429bc5fd005618b80e"
+    "gitHead": "05c81318844160db3f8156144106e643507fef97"
 }

sp-help-text.js

@@ -1,3 +0,2 @@
-import { HelpText } from "./src/HelpText.js";
-customElements.define("sp-help-text", HelpText);
+import{HelpText as e}from"./src/HelpText.js";customElements.define("sp-help-text",e);
 //# sourceMappingURL=sp-help-text.js.map

src/help-text.css.js

@@ -1,3 +0,2 @@
-import { css } from "@spectrum-web-components/base";
-const styles = css`
+import{css as t}from"@spectrum-web-components/base";const e=t`
 :host{--spectrum-helptext-line-height:var(
@@ -104,4 +103,3 @@ --spectrum-line-height-100
 )}
-`;
-export default styles;
+`;export default e;
 //# sourceMappingURL=help-text.css.js.map

src/HelpText.js

@@ -1,45 +0,7 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result)
-    __defProp(target, key, result);
-  return result;
-};
-import {
-  html,
-  nothing,
-  SizedMixin,
-  SpectrumElement
-} from "@spectrum-web-components/base";
-import { property } from "@spectrum-web-components/base/src/decorators.js";
-import "@spectrum-web-components/icons-workflow/icons/sp-icon-alert.js";
-import styles from "./help-text.css.js";
-export class HelpText extends SizedMixin(SpectrumElement) {
-  constructor() {
-    super(...arguments);
-    this.icon = false;
-    this.variant = "neutral";
-  }
-  static get styles() {
-    return [styles];
-  }
-  render() {
-    return html`
-            ${this.variant === "negative" && this.icon ? html`
+var c=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var n=(i,t,l,r)=>{for(var e=r>1?void 0:r?u(t,l):t,s=i.length-1,a;s>=0;s--)(a=i[s])&&(e=(r?a(t,l,e):a(e))||e);return r&&e&&c(t,l,e),e};import{html as o,nothing as m,SizedMixin as d,SpectrumElement as v}from"@spectrum-web-components/base";import{property as p}from"@spectrum-web-components/base/src/decorators.js";import"@spectrum-web-components/icons-workflow/icons/sp-icon-alert.js";import y from"./help-text.css.js";export class HelpText extends d(v){constructor(){super(...arguments);this.icon=!1;this.variant="neutral"}static get styles(){return[y]}render(){return o`
+            ${this.variant==="negative"&&this.icon?o`
                       <sp-icon-alert class="icon"></sp-icon-alert>
-                  ` : nothing}
+                  `:m}
             <div class="text"><slot></slot></div>
-        `;
-  }
-}
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], HelpText.prototype, "icon", 2);
-__decorateClass([
-  property({ reflect: true })
-], HelpText.prototype, "variant", 2);
+        `}}n([p({type:Boolean,reflect:!0})],HelpText.prototype,"icon",2),n([p({reflect:!0})],HelpText.prototype,"variant",2);
 //# sourceMappingURL=HelpText.js.map

src/HelpTextManagedElement.js

@@ -1,5 +0,2 @@
-import { SpectrumElement } from "@spectrum-web-components/base";
-import { ManageHelpText } from "./manage-help-text.js";
-export class HelpTextManagedElement extends ManageHelpText(SpectrumElement) {
-}
+import{SpectrumElement as e}from"@spectrum-web-components/base";import{ManageHelpText as t}from"./manage-help-text.js";export class HelpTextManagedElement extends t(e){}
 //# sourceMappingURL=HelpTextManagedElement.js.map

src/HelpTextManager.js

@@ -1,26 +0,5 @@
-import { html } from "@spectrum-web-components/base";
-import { ifDefined } from "@spectrum-web-components/base/src/directives.js";
-import { conditionAttributeWithId } from "@spectrum-web-components/base/src/condition-attribute-with-id.js";
-const _HelpTextManager = class {
-  constructor(host, { mode } = { mode: "internal" }) {
-    this.mode = "internal";
-    this.handleSlotchange = ({
-      target
-    }) => {
-      this.handleHelpText(target);
-      this.handleNegativeHelpText(target);
-    };
-    this.host = host;
-    this.instanceCount = _HelpTextManager.instanceCount++;
-    this.id = `sp-help-text-${this.instanceCount}`;
-    this.mode = mode;
-  }
-  get isInternal() {
-    return this.mode === "internal";
-  }
-  render(negative) {
-    return html`
-            <div id=${ifDefined(this.isInternal ? this.id : void 0)}>
+import{html as s}from"@spectrum-web-components/base";import{ifDefined as l}from"@spectrum-web-components/base/src/directives.js";import{conditionAttributeWithId as o}from"@spectrum-web-components/base/src/condition-attribute-with-id.js";const n=class{constructor(e,{mode:i}={mode:"internal"}){this.mode="internal";this.handleSlotchange=({target:e})=>{this.handleHelpText(e),this.handleNegativeHelpText(e)};this.host=e,this.instanceCount=n.instanceCount++,this.id=`sp-help-text-${this.instanceCount}`,this.mode=i}get isInternal(){return this.mode==="internal"}render(e){return s`
+            <div id=${l(this.isInternal?this.id:void 0)}>
                 <slot
-                    name=${negative ? "negative-help-text" : `pass-through-help-text-${this.instanceCount}`}
+                    name=${e?"negative-help-text":`pass-through-help-text-${this.instanceCount}`}
                     @slotchange=${this.handleSlotchange}
@@ -31,51 +10,3 @@ >
             </div>
-        `;
-  }
-  addId() {
-    const id = this.helpTextElement ? this.helpTextElement.id : this.id;
-    this.conditionId = conditionAttributeWithId(this.host, "aria-describedby", id);
-    if (this.host.hasAttribute("tabindex")) {
-      this.previousTabindex = parseFloat(this.host.getAttribute("tabindex"));
-    }
-    this.host.tabIndex = 0;
-  }
-  removeId() {
-    if (this.conditionId) {
-      this.conditionId();
-      delete this.conditionId;
-    }
-    if (this.helpTextElement)
-      return;
-    if (this.previousTabindex) {
-      this.host.tabIndex = this.previousTabindex;
-    } else {
-      this.host.removeAttribute("tabindex");
-    }
-  }
-  handleHelpText(target) {
-    if (this.isInternal)
-      return;
-    if (this.helpTextElement && this.helpTextElement.id === this.id) {
-      this.helpTextElement.removeAttribute("id");
-    }
-    this.removeId();
-    const assignedElements = target.assignedElements();
-    const nextHelpTextElement = assignedElements[0];
-    this.helpTextElement = nextHelpTextElement;
-    if (nextHelpTextElement) {
-      if (!nextHelpTextElement.id) {
-        nextHelpTextElement.id = this.id;
-      }
-      this.addId();
-    }
-  }
-  handleNegativeHelpText(target) {
-    if (target.name !== "negative-help-text")
-      return;
-    const assignedElements = target.assignedElements();
-    assignedElements.forEach((el) => el.variant = "negative");
-  }
-};
-export let HelpTextManager = _HelpTextManager;
-HelpTextManager.instanceCount = 0;
+        `}addId(){const e=this.helpTextElement?this.helpTextElement.id:this.id;this.conditionId=o(this.host,"aria-describedby",e),this.host.hasAttribute("tabindex")&&(this.previousTabindex=parseFloat(this.host.getAttribute("tabindex"))),this.host.tabIndex=0}removeId(){this.conditionId&&(this.conditionId(),delete this.conditionId),!this.helpTextElement&&(this.previousTabindex?this.host.tabIndex=this.previousTabindex:this.host.removeAttribute("tabindex"))}handleHelpText(e){if(this.isInternal)return;this.helpTextElement&&this.helpTextElement.id===this.id&&this.helpTextElement.removeAttribute("id"),this.removeId();const t=e.assignedElements()[0];this.helpTextElement=t,t&&(t.id||(t.id=this.id),this.addId())}handleNegativeHelpText(e){if(e.name!=="negative-help-text")return;e.assignedElements().forEach(t=>t.variant="negative")}};export let HelpTextManager=n;HelpTextManager.instanceCount=0;
 //# sourceMappingURL=HelpTextManager.js.map

src/index.js

@@ -1,2 +0,2 @@
-export * from "./HelpText.js";
+export*from"./HelpText.js";
 //# sourceMappingURL=index.js.map

src/manage-help-text.js

@@ -1,17 +0,2 @@
-import { HelpTextManager } from "./HelpTextManager.js";
-export function ManageHelpText(constructor, { mode } = { mode: "internal" }) {
-  class HelpTextElement extends constructor {
-    constructor() {
-      super(...arguments);
-      this.helpTextManager = new HelpTextManager(this, { mode });
-    }
-    get helpTextId() {
-      return this.helpTextManager.id;
-    }
-    renderHelpText(negative) {
-      return this.helpTextManager.render(negative);
-    }
-  }
-  return HelpTextElement;
-}
+import{HelpTextManager as l}from"./HelpTextManager.js";export function ManageHelpText(e,{mode:t}={mode:"internal"}){class n extends e{constructor(){super(...arguments);this.helpTextManager=new l(this,{mode:t})}get helpTextId(){return this.helpTextManager.id}renderHelpText(r){return this.helpTextManager.render(r)}}return n}
 //# sourceMappingURL=manage-help-text.js.map

src/spectrum-help-text.css.js

@@ -1,3 +0,2 @@
-import { css } from "@spectrum-web-components/base";
-const styles = css`
+import{css as t}from"@spectrum-web-components/base";const e=t`
 :host{--spectrum-helptext-line-height:var(
@@ -104,4 +103,3 @@ --spectrum-line-height-100
 )}
-`;
-export default styles;
+`;export default e;
 //# sourceMappingURL=spectrum-help-text.css.js.map

stories/help-text-sizes.stories.js

@@ -1,30 +0,14 @@
-import { html } from "@spectrum-web-components/base";
-import "@spectrum-web-components/help-text/sp-help-text.js";
-export default {
-  title: "Help Text/Sizes",
-  component: "sp-help-text"
-};
-export const s = () => {
-  return html`
+import{html as t}from"@spectrum-web-components/base";import"@spectrum-web-components/help-text/sp-help-text.js";export default{title:"Help Text/Sizes",component:"sp-help-text"};export const s=()=>t`
         <sp-help-text size="s">
             Passwords must be at least 8 characters.
         </sp-help-text>
-    `;
-};
-export const m = () => {
-  return html`
+    `,m=()=>t`
         <sp-help-text size="m">
             Passwords must be at least 8 characters.
         </sp-help-text>
-    `;
-};
-export const l = () => {
-  return html`
+    `,l=()=>t`
         <sp-help-text size="l">
             Passwords must be at least 8 characters.
         </sp-help-text>
-    `;
-};
-export const XL = () => {
-  return html`
+    `,XL=()=>t`
         <sp-help-text size="xl">
@@ -34,3 +18,2 @@ Passwords must be at least 8 characters.
     `;
-};
 //# sourceMappingURL=help-text-sizes.stories.js.map

stories/help-text.stories.js

@@ -1,102 +0,11 @@
-import { html } from "@spectrum-web-components/base";
-import "@spectrum-web-components/help-text/sp-help-text.js";
-export default {
-  title: "Help Text",
-  component: "sp-help-text",
-  argTypes: {
-    icon: {
-      name: "icon",
-      type: { name: "boolean", required: false },
-      discription: "Whether the Help Text is delivered with an icon.",
-      table: {
-        type: { summary: "boolean" },
-        defaultValue: { summary: false }
-      },
-      control: {
-        type: "boolean"
-      }
-    },
-    disabled: {
-      name: "disabled",
-      type: { name: "boolean", required: false },
-      description: "Help Text for disabled form elements.",
-      table: {
-        type: { summary: "boolean" },
-        defaultValue: { summary: false }
-      },
-      control: {
-        type: "boolean"
-      }
-    },
-    variant: {
-      name: "variant",
-      type: { name: "string", required: false },
-      description: "The visual variant to apply to the Help Text.",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: "cta" }
-      },
-      control: {
-        type: "inline-radio",
-        options: ["neutral", "negative"]
-      }
-    },
-    size: {
-      name: "size",
-      type: { name: "string", required: false },
-      description: "The visual variant to apply to the Help Text.",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: "cta" }
-      },
-      control: {
-        type: "inline-radio",
-        options: ["s", "m", "l", "xl"]
-      }
-    }
-  },
-  args: {
-    size: "m"
-  }
-};
-const Template = (args) => html`
+import{html as a}from"@spectrum-web-components/base";import"@spectrum-web-components/help-text/sp-help-text.js";export default{title:"Help Text",component:"sp-help-text",argTypes:{icon:{name:"icon",type:{name:"boolean",required:!1},discription:"Whether the Help Text is delivered with an icon.",table:{type:{summary:"boolean"},defaultValue:{summary:!1}},control:{type:"boolean"}},disabled:{name:"disabled",type:{name:"boolean",required:!1},description:"Help Text for disabled form elements.",table:{type:{summary:"boolean"},defaultValue:{summary:!1}},control:{type:"boolean"}},variant:{name:"variant",type:{name:"string",required:!1},description:"The visual variant to apply to the Help Text.",table:{type:{summary:"string"},defaultValue:{summary:"cta"}},control:{type:"inline-radio",options:["neutral","negative"]}},size:{name:"size",type:{name:"string",required:!1},description:"The visual variant to apply to the Help Text.",table:{type:{summary:"string"},defaultValue:{summary:"cta"}},control:{type:"inline-radio",options:["s","m","l","xl"]}}},args:{size:"m"}};const t=e=>a`
     <sp-help-text
-        ?disabled=${args.disabled}
-        ?icon=${args.icon}
-        variant=${args.variant}
-        size=${args.size}
+        ?disabled=${e.disabled}
+        ?icon=${e.icon}
+        variant=${e.variant}
+        size=${e.size}
     >
-        ${args.content}
+        ${e.content}
     </sp-help-text>
-`;
-export const neutral = (args = {}) => Template({
-  ...args,
-  content: "Passwords must be at least 8 characters."
-});
-neutral.args = {
-  variant: "neutral"
-};
-export const negative = (args = {}) => Template({
-  ...args,
-  content: "Create a password with at least 8 characters."
-});
-negative.args = {
-  variant: "negative"
-};
-export const negativeIcon = (args = {}) => Template({
-  ...args,
-  content: "Create a password with at least 8 characters."
-});
-negativeIcon.args = {
-  icon: true,
-  variant: "negative"
-};
-export const disabled = (args = {}) => Template({
-  ...args,
-  content: "Passwords must be at least 8 characters."
-});
-disabled.args = {
-  disabled: true,
-  variant: "neutral"
-};
+`;export const neutral=(e={})=>t({...e,content:"Passwords must be at least 8 characters."});neutral.args={variant:"neutral"};export const negative=(e={})=>t({...e,content:"Create a password with at least 8 characters."});negative.args={variant:"negative"};export const negativeIcon=(e={})=>t({...e,content:"Create a password with at least 8 characters."});negativeIcon.args={icon:!0,variant:"negative"};export const disabled=(e={})=>t({...e,content:"Passwords must be at least 8 characters."});disabled.args={disabled:!0,variant:"neutral"};
 //# sourceMappingURL=help-text.stories.js.map

test/benchmark/basic-test.js

@@ -1,7 +0,4 @@
-import "@spectrum-web-components/help-text/sp-help-text.js";
-import { html } from "lit";
-import { measureFixtureCreation } from "../../../../test/benchmark/helpers.js";
-measureFixtureCreation(html`
+import"@spectrum-web-components/help-text/sp-help-text.js";import{html as t}from"lit";import{measureFixtureCreation as e}from"../../../../test/benchmark/helpers.js";e(t`
     <sp-help-text></sp-help-text>
 `);
 //# sourceMappingURL=basic-test.js.map

test/help-text-sizes.test-vrt.js

@@ -1,4 +0,2 @@
-import * as stories from "../stories/help-text-sizes.stories.js";
-import { regressVisuals } from "../../../test/visual/test.js";
-regressVisuals("HelpTextSizesStories", stories);
+import*as s from"../stories/help-text-sizes.stories.js";import{regressVisuals as r}from"../../../test/visual/test.js";r("HelpTextSizesStories",s);
 //# sourceMappingURL=help-text-sizes.test-vrt.js.map

test/help-text.test-vrt.js

@@ -1,4 +0,2 @@
-import * as stories from "../stories/help-text.stories.js";
-import { regressVisuals } from "../../../test/visual/test.js";
-regressVisuals("HelpTextStories", stories);
+import*as r from"../stories/help-text.stories.js";import{regressVisuals as s}from"../../../test/visual/test.js";s("HelpTextStories",r);
 //# sourceMappingURL=help-text.test-vrt.js.map

test/help-text.test.js

@@ -1,25 +0,10 @@
-import { elementUpdated, expect, fixture, html } from "@open-wc/testing";
-import "@spectrum-web-components/help-text/sp-help-text.js";
-import { testForLitDevWarnings } from "../../../test/testing-helpers.js";
-describe("HelpText", () => {
-  testForLitDevWarnings(async () => await fixture(html`
+import{elementUpdated as a,expect as s,fixture as t,html as i}from"@open-wc/testing";import"@spectrum-web-components/help-text/sp-help-text.js";import{testForLitDevWarnings as p}from"../../../test/testing-helpers.js";describe("HelpText",()=>{p(async()=>await t(i`
                     <sp-help-text>This is help text.</sp-help-text>
-                `));
-  it("loads default help-text accessibly", async () => {
-    const el = await fixture(html`
+                `)),it("loads default help-text accessibly",async()=>{const e=await t(i`
                 <sp-help-text>This is help text.</sp-help-text>
-            `);
-    await elementUpdated(el);
-    await expect(el).to.be.accessible();
-  });
-  it("loads negative/icon help-text accessibly", async () => {
-    const el = await fixture(html`
+            `);await a(e),await s(e).to.be.accessible()}),it("loads negative/icon help-text accessibly",async()=>{const e=await t(i`
                 <sp-help-text variant="negative" icon>
                     This is negative help text.
                 </sp-help-text>
-            `);
-    await elementUpdated(el);
-    await expect(el).to.be.accessible();
-  });
-});
+            `);await a(e),await s(e).to.be.accessible()})});
 //# sourceMappingURL=help-text.test.js.map

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

Improved metrics

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

136680

decreased by-2.45%

Lines of code

1103

decreased by-18.3%

Dependency changes

• - Removed@spectrum-web-components/base@0.6.0(transitive)

• Updated@spectrum-web-components/base@^0.7.0

• Updated@spectrum-web-components/icons-workflow@^0.9.0