@forter/forter-checkbox - npm Package Compare versions

Comparing version 0.3.0 to 0.3.1

CHANGELOG.md

@@ -6,2 +6,6 @@ # Change Log
 
+## [0.3.1](https://github.com/forter/design-system/compare/@forter/forter-checkbox@0.3.0...@forter/forter-checkbox@0.3.1) (2023-07-20)
+
+**Note:** Version bump only for package @forter/forter-checkbox
+
 # [0.3.0](https://github.com/forter/design-system/compare/@forter/forter-checkbox@0.2.1...@forter/forter-checkbox@0.3.0) (2023-07-18)
@@ -8,0 +12,0 @@

dist/bundle.js

@@ -103,3 +103,3 @@ import { css, html } from 'lit';
             checked: CHECKED_DEFAULT_VALUE,
-            indeterminate: INDETERMINATE_DEFAULT_VALUE
+            indeterminate: INDETERMINATE_DEFAULT_VALUE,
         };
@@ -141,16 +141,34 @@ }
     renderCheckbox() {
-        return html `
-      <div class="ring-padding">
-        <div class="ring">
-          <div part="checkbox">
-            <svg id="checked" width="10" height="7" viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <path fill-rule="evenodd" clip-rule="evenodd" d="M0.279338 2.85355C0.651788 2.49653 1.25565 2.49653 1.6281 2.85355L3.65056 4.79225L8.3719 0.267767C8.74435 -0.0892556 9.34821 -0.0892556 9.72066 0.267767C10.0931 0.62479 10.0931 1.20364 9.72066 1.56066L4.32562 6.73223V6.73223C3.95317 7.08926 3.34931 7.08926 2.97686 6.73223L0.279338 4.14645C-0.0931125 3.78942 -0.0931125 3.21058 0.279338 2.85355Z" fill="white"/>
-            </svg>
+        return html ` <div class="ring-padding">
+      <div class="ring">
+        <div part="checkbox">
+          <svg
+            id="checked"
+            width="10"
+            height="7"
+            viewBox="0 0 10 7"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              fill-rule="evenodd"
+              clip-rule="evenodd"
+              d="M0.279338 2.85355C0.651788 2.49653 1.25565 2.49653 1.6281 2.85355L3.65056 4.79225L8.3719 0.267767C8.74435 -0.0892556 9.34821 -0.0892556 9.72066 0.267767C10.0931 0.62479 10.0931 1.20364 9.72066 1.56066L4.32562 6.73223V6.73223C3.95317 7.08926 3.34931 7.08926 2.97686 6.73223L0.279338 4.14645C-0.0931125 3.78942 -0.0931125 3.21058 0.279338 2.85355Z"
+              fill="white"
+            />
+          </svg>
 
-            <svg id="indeterminate" width="10" height="2" viewBox="0 0 10 2" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <rect width="10" height="2" rx="1" fill="white"/>
-            </svg>
-          </div>
+          <svg
+            id="indeterminate"
+            width="10"
+            height="2"
+            viewBox="0 0 10 2"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <rect width="10" height="2" rx="1" fill="white" />
+          </svg>
         </div>
-      </div>`;
+      </div>
+    </div>`;
     }
@@ -167,8 +185,4 @@ renderLabel() {
     render() {
-        return html `
-      ${this.renderInput()}
-      ${this.renderCheckbox()}
-      ${this.renderLabel()}
-      ${this.renderError()}
-      ${this.renderNote()}`;
+        return html ` ${this.renderInput()} ${this.renderCheckbox()}
+    ${this.renderLabel()} ${this.renderError()} ${this.renderNote()}`;
     }
@@ -175,0 +189,0 @@ };

package.json

 {
   "name": "@forter/forter-checkbox",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "checkbox from Forter Components",
@@ -23,6 +23,6 @@ "author": "Forter Developers",
   "dependencies": {
-    "@forter/component-base": "^9.0.0",
+    "@forter/component-base": "^9.0.1",
     "lit": "^2.7.2"
   },
-  "gitHead": "62f33a3e7a422de9208866be5667fa9a5f60294e"
+  "gitHead": "61419bc89201af5bc5fbac3b71a9e4f8de3a7fa3"
 }

src/Checkbox.ts

 /* eslint-disable */
-import {TemplateResult} from 'lit-html';
+import { TemplateResult } from 'lit-html';
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
-import { GeneralFormElement, customElement, SLOT_NAMES, constructStyles } from '@forter/component-base';
+import {
+  GeneralFormElement,
+  customElement,
+  SLOT_NAMES,
+  constructStyles,
+} from '@forter/component-base';
 // @ts-ignore
@@ -17,7 +22,9 @@ import checkboxStyle from './checkbox.css';
 
-  @property({ type: Boolean, reflect: true }) checked: Boolean = CHECKED_DEFAULT_VALUE;
-  @property({ type: Boolean, reflect: true }) indeterminate: Boolean = INDETERMINATE_DEFAULT_VALUE;
+  @property({ type: Boolean, reflect: true }) checked: Boolean =
+    CHECKED_DEFAULT_VALUE;
+  @property({ type: Boolean, reflect: true }) indeterminate: Boolean =
+    INDETERMINATE_DEFAULT_VALUE;
   @property({ type: Object, reflect: true }) value = {
     checked: CHECKED_DEFAULT_VALUE,
-    indeterminate: INDETERMINATE_DEFAULT_VALUE
+    indeterminate: INDETERMINATE_DEFAULT_VALUE,
   };
@@ -28,3 +35,3 @@
     this.setAttribute('tabIndex', String(this.tabIndex));
-    this.adoptStyles(styles)
+    this.adoptStyles(styles);
   }
@@ -42,3 +49,3 @@
 
-      this.changeToValue({checked, indeterminate});
+      this.changeToValue({ checked, indeterminate });
     }
@@ -56,3 +63,3 @@ }
 
-  private renderInput() : TemplateResult {
+  private renderInput(): TemplateResult {
     return html`<div part="input">
@@ -69,17 +76,35 @@ <input
 
-  private renderCheckbox() : TemplateResult {
-    return html`
-      <div class="ring-padding">
-        <div class="ring">
-          <div part="checkbox">
-            <svg id="checked" width="10" height="7" viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <path fill-rule="evenodd" clip-rule="evenodd" d="M0.279338 2.85355C0.651788 2.49653 1.25565 2.49653 1.6281 2.85355L3.65056 4.79225L8.3719 0.267767C8.74435 -0.0892556 9.34821 -0.0892556 9.72066 0.267767C10.0931 0.62479 10.0931 1.20364 9.72066 1.56066L4.32562 6.73223V6.73223C3.95317 7.08926 3.34931 7.08926 2.97686 6.73223L0.279338 4.14645C-0.0931125 3.78942 -0.0931125 3.21058 0.279338 2.85355Z" fill="white"/>
-            </svg>
+  private renderCheckbox(): TemplateResult {
+    return html` <div class="ring-padding">
+      <div class="ring">
+        <div part="checkbox">
+          <svg
+            id="checked"
+            width="10"
+            height="7"
+            viewBox="0 0 10 7"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              fill-rule="evenodd"
+              clip-rule="evenodd"
+              d="M0.279338 2.85355C0.651788 2.49653 1.25565 2.49653 1.6281 2.85355L3.65056 4.79225L8.3719 0.267767C8.74435 -0.0892556 9.34821 -0.0892556 9.72066 0.267767C10.0931 0.62479 10.0931 1.20364 9.72066 1.56066L4.32562 6.73223V6.73223C3.95317 7.08926 3.34931 7.08926 2.97686 6.73223L0.279338 4.14645C-0.0931125 3.78942 -0.0931125 3.21058 0.279338 2.85355Z"
+              fill="white"
+            />
+          </svg>
 
-            <svg id="indeterminate" width="10" height="2" viewBox="0 0 10 2" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <rect width="10" height="2" rx="1" fill="white"/>
-            </svg>
-          </div>
+          <svg
+            id="indeterminate"
+            width="10"
+            height="2"
+            viewBox="0 0 10 2"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <rect width="10" height="2" rx="1" fill="white" />
+          </svg>
         </div>
-      </div>`;
+      </div>
+    </div>`;
   }
@@ -89,3 +114,5 @@
     return html`
-      <label tabindex="-1" part="label" ?hidden="${!this.hasSlot('label')}" for="${this.id}">
+      <label tabindex="-1" part="label" ?hidden="${!this.hasSlot(
+        'label'
+      )}" for="${this.id}">
         <slot name="${SLOT_NAMES.LABEL}"><slot>
@@ -99,9 +126,5 @@
   override render() {
-    return html`
-      ${this.renderInput()}
-      ${this.renderCheckbox()}
-      ${this.renderLabel()}
-      ${this.renderError()}
-      ${this.renderNote()}`;
+    return html` ${this.renderInput()} ${this.renderCheckbox()}
+    ${this.renderLabel()} ${this.renderError()} ${this.renderNote()}`;
   }
 }

stories/checkbox.stories.js

@@ -1,99 +0,98 @@
-import '../src/index'
-import {html} from "lit";
-import {withActions} from "@storybook/addon-actions/decorator";
+import '../src/index';
+import { html } from 'lit';
+import { withActions } from '@storybook/addon-actions/decorator';
 
-export default  {
-    title: 'Design System/Checkbox',
-    component: 'forter-checkbox',
-    argTypes: {
-        checked: {
-            control: 'boolean',
-            description: 'Whether the switch is toggled on or off \n `boolean`',
-            defaultValue: {
-                summary: false
-            }
-        },
-        disabled: {
-            control: 'boolean',
-            description: 'Use this to indicate the element is N/A in the view \n `boolean`',
-            defaultValue: {
-                summary: false
-            }
-        },
-        readOnly: {
-            control: 'boolean',
-            description: 'Use this to indicate value shown is read-only and cannot be changed \n `boolean`',
-            defaultValue: {
-                summary: false
-            }
-        },
-        label: {
-            control: 'text',
-            description: 'The label positioned beside the switch `string`',
-            defaultValue: {
-                summary: ''
-            }
-        },
-        change: {
-            control: null,
-            description: 'Emitted when the user selects a new value `event`'
-        }
+export default {
+  title: 'Design System/Checkbox',
+  component: 'forter-checkbox',
+  argTypes: {
+    checked: {
+      control: 'boolean',
+      description: 'Whether the switch is toggled on or off \n `boolean`',
+      defaultValue: {
+        summary: false,
+      },
     },
-    args: {
-        disabled: false,
-        readOnly: false,
-        checked: false,
-        label: null
+    disabled: {
+      control: 'boolean',
+      description:
+        'Use this to indicate the element is N/A in the view \n `boolean`',
+      defaultValue: {
+        summary: false,
+      },
     },
-    parameters: {
-        actions: {
-            handles: ['change'],
-        },
+    readOnly: {
+      control: 'boolean',
+      description:
+        'Use this to indicate value shown is read-only and cannot be changed \n `boolean`',
+      defaultValue: {
+        summary: false,
+      },
     },
-    decorators: [withActions],
+    label: {
+      control: 'text',
+      description: 'The label positioned beside the switch `string`',
+      defaultValue: {
+        summary: '',
+      },
+    },
+    change: {
+      control: null,
+      description: 'Emitted when the user selects a new value `event`',
+    },
+  },
+  args: {
+    disabled: false,
+    readOnly: false,
+    checked: false,
+    label: null,
+  },
+  parameters: {
+    actions: {
+      handles: ['change'],
+    },
+  },
+  decorators: [withActions],
 };
 
-
 export const Label = {
-    args: {
-        label: 'My Checkbox',
-    }
+  args: {
+    label: 'My Checkbox',
+  },
 };
 
-export const Unchecked = {
-};
+export const Unchecked = {};
 
 export const Checked = {
-    args: {
-        checked: true,
-    }
+  args: {
+    checked: true,
+  },
 };
 
 export const Disabled = {
-    args: {
-        disabled: true
-    }
+  args: {
+    disabled: true,
+  },
 };
 
 export const ReadOnly = {
-    args: {
-        readOnly: true
-    }
+  args: {
+    readOnly: true,
+  },
 };
 
 export const SlottedLabel = {
-    render: () => html`
-<forter-checkbox>
+  render: () => html` <forter-checkbox>
     <div slot="label" style="display: flex; flex-direction: column">
-        <span style="color: blue;">Title</span>
-        <span style="color: red;">Subtitle</span>
+      <span style="color: blue;">Title</span>
+      <span style="color: red;">Subtitle</span>
     </div>
-</forter-checkbox>`,
-    argTypes: {
-        label: {
-            table: {
-                disable: true
-            }
-        }
-    }
+  </forter-checkbox>`,
+  argTypes: {
+    label: {
+      table: {
+        disable: true,
+      },
+    },
+  },
 };

tests/checkbox.test.js

@@ -6,37 +6,37 @@ import '../src/index';
 import { TestUtils } from '../../../utils/test-utils';
+
 const { render } = TestUtils;
 
 afterEach(() => {
-    // The jsdom instance is shared across test cases in a single file so reset the DOM
-    while (document.body.firstChild) {
-        document.body.removeChild(document.body.firstChild);
-    }
+  // The jsdom instance is shared across test cases in a single file so reset the DOM
+  while (document.body.firstChild) {
+    document.body.removeChild(document.body.firstChild);
+  }
 });
 
 describe('<fc-switch />', () => {
+  it('should render checkbox', async () => {
+    const mySwitch = await render(html`<forter-checkbox />`);
+    expect(mySwitch).not.toBeNull();
+  });
 
-    it('should render checkbox', async () => {
-        const mySwitch = await render(html`<forter-checkbox/>`);
-        expect(mySwitch).not.toBeNull();
-    });
+  it('should render a correct label when passed', async () => {
+    const labelText = 'lala';
+    const mySwitch = await render(html`<forter-checkbox label=${labelText} />`);
+    const labelElement = mySwitch.querySelector('div[slot="label"]');
+    expect(labelElement?.innerHTML).toMatch(labelText);
+  });
 
-    it('should render a correct label when passed', async () => {
-        const labelText = 'lala';
-        const mySwitch = await render(html`<forter-checkbox label=${labelText}/>`);
-        const labelElement = mySwitch.querySelector('div[slot="label"]')
-        expect(labelElement?.innerHTML).toMatch(labelText);
-    });
+  it('should not render label with incorrect text', async () => {
+    const labelText = 'lala';
+    const mySwitch = await render(html`<forter-checkbox label=${labelText} />`);
+    const labelElement = mySwitch.querySelector('div[slot="label"]');
+    expect(labelElement?.innerHTML).not.toMatch(`${labelText}abc`);
+  });
 
-    it('should not render label with incorrect text', async () => {
-        const labelText = 'lala';
-        const mySwitch = await render(html`<forter-checkbox label=${labelText}/>`);
-        const labelElement = mySwitch.querySelector('div[slot="label"]')
-        expect(labelElement?.innerHTML).not.toMatch(`${labelText}abc`);
-    });
-
-    it('should not render label when not passed', async () => {
-        const mySwitch = await render(html`<forter-checkbox/>`);
-        const labelElement = mySwitch.querySelector('div[slot="label"]')
-        expect(labelElement).toBeNull();
-    });
+  it('should not render label when not passed', async () => {
+    const mySwitch = await render(html`<forter-checkbox />`);
+    const labelElement = mySwitch.querySelector('div[slot="label"]');
+    expect(labelElement).toBeNull();
+  });
 });

tsconfig.json

 {
   "extends": "../../tsconfig.json",
-  "include": [
-    "src/**/*.ts"
-  ],
-  "exclude": [
-    "node_modules",
-    "**/*.d.ts"
-  ]
+  "include": ["src/**/*.ts"],
+  "exclude": ["node_modules", "**/*.d.ts"]
 }

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

61256

increased by0.91%

Lines of code

500

increased by6.84%

Number of medium supply chain risk alerts

0

decreased by-100%

Dependency changes

• Updated@forter/component-base@^9.0.1