@spectrum-web-components/number-field 0.3.13 → 0.4.1-devmode.7

package/stories/number-field.stories.js

@@ -1,200 +1,188 @@
-/*
-Copyright 2020 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License.
-*/
-import { html } from '@spectrum-web-components/base';
-import '../sp-number-field.js';
-import '@spectrum-web-components/field-label/sp-field-label.js';
-import { spreadProps } from '../../../test/lit-helpers.js';
+import { html } from "@spectrum-web-components/base";
+import { ifDefined } from "@spectrum-web-components/base/src/directives.js";
+import "@spectrum-web-components/number-field/sp-number-field.js";
+import "@spectrum-web-components/field-label/sp-field-label.js";
+import { spreadProps } from "../../../test/lit-helpers.js";
 export default {
-    title: 'Number Field',
-    component: 'sp-number-field',
-    args: {
-        disabled: false,
-        readonly: false,
-        quiet: false,
-        value: undefined,
-        placeholder: '',
-        min: undefined,
-        max: undefined,
-        step: undefined,
+  title: "Number Field",
+  component: "sp-number-field",
+  args: {
+    disabled: false,
+    readonly: false,
+    quiet: false,
+    value: void 0,
+    placeholder: "",
+    min: void 0,
+    max: void 0,
+    step: void 0
+  },
+  argTypes: {
+    disabled: {
+      name: "disabled",
+      type: { name: "boolean", required: false },
+      description: "Disable this control. It will not receive focus or events.",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false }
+      },
+      control: {
+        type: "boolean"
+      }
+    },
+    indeterminate: {
+      name: "indeterminate",
+      type: { name: "boolean", required: false },
+      description: "Whether the value of the Number Field can be determined for display.",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false }
+      },
+      control: {
+        type: "boolean"
+      }
+    },
+    readonly: {
+      name: "readonly",
+      type: { name: "boolean", required: false },
+      description: "When this control is read only, you will not be able to input an updated value.",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false }
+      },
+      control: {
+        type: "boolean"
+      }
+    },
+    quiet: {
+      name: "quiet",
+      type: { name: "boolean", required: false },
+      description: "An altered delivery with no background and only a bottom border.",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false }
+      },
+      control: {
+        type: "boolean"
+      }
+    },
+    hideStepper: {
+      name: "hide stepper",
+      type: { name: "boolean", required: false },
+      description: "Whether to remove the stepper UI from the control.",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false }
+      },
+      control: {
+        type: "boolean"
+      }
+    },
+    value: {
+      name: "value",
+      type: { name: "number", required: false },
+      description: "Value to apply to the control.",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: void 0 }
+      },
+      control: {
+        type: "number"
+      }
+    },
+    step: {
+      name: "step",
+      type: { name: "number", required: false },
+      description: "Amount to change the value by when using the stepper or arrow key interactions.",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: void 0 }
+      },
+      control: {
+        type: "number"
+      }
+    },
+    stepModifier: {
+      name: "step modifier",
+      type: { name: "number", required: false },
+      description: "Amount to scale the step increment/decrement when holding the shift key",
+      table: {
+        type: { summary: "number" },
+        defaultValue: { summary: 10 }
+      },
+      control: {
+        type: "number"
+      }
+    },
+    placeholder: {
+      name: "placeholder",
+      type: { name: "string", required: false },
+      description: "Placeholder to apply to the control.",
+      table: {
+        type: { summary: "string" }
+      },
+      control: {
+        type: "text"
+      }
     },
-    argTypes: {
-        disabled: {
-            name: 'disabled',
-            type: { name: 'boolean', required: false },
-            description: 'Disable this control. It will not receive focus or events.',
-            table: {
-                type: { summary: 'boolean' },
-                defaultValue: { summary: false },
-            },
-            control: {
-                type: 'boolean',
-            },
-        },
-        indeterminate: {
-            name: 'indeterminate',
-            type: { name: 'boolean', required: false },
-            description: 'Whether the value of the Number Field can be determined for display.',
-            table: {
-                type: { summary: 'boolean' },
-                defaultValue: { summary: false },
-            },
-            control: {
-                type: 'boolean',
-            },
-        },
-        readonly: {
-            name: 'readonly',
-            type: { name: 'boolean', required: false },
-            description: 'When this control is read only, you will not be able to input an updated value.',
-            table: {
-                type: { summary: 'boolean' },
-                defaultValue: { summary: false },
-            },
-            control: {
-                type: 'boolean',
-            },
-        },
-        quiet: {
-            name: 'quiet',
-            type: { name: 'boolean', required: false },
-            description: 'An altered delivery with no background and only a bottom border.',
-            table: {
-                type: { summary: 'boolean' },
-                defaultValue: { summary: false },
-            },
-            control: {
-                type: 'boolean',
-            },
-        },
-        hideStepper: {
-            name: 'hide stepper',
-            type: { name: 'boolean', required: false },
-            description: 'Whether to remove the stepper UI from the control.',
-            table: {
-                type: { summary: 'boolean' },
-                defaultValue: { summary: false },
-            },
-            control: {
-                type: 'boolean',
-            },
-        },
-        value: {
-            name: 'value',
-            type: { name: 'number', required: false },
-            description: 'Value to apply to the control.',
-            table: {
-                type: { summary: 'string' },
-                defaultValue: { summary: undefined },
-            },
-            control: {
-                type: 'number',
-            },
-        },
-        step: {
-            name: 'step',
-            type: { name: 'number', required: false },
-            description: 'Amount to change the value by when using the stepper or arrow key interactions.',
-            table: {
-                type: { summary: 'string' },
-                defaultValue: { summary: undefined },
-            },
-            control: {
-                type: 'number',
-            },
-        },
-        stepModifier: {
-            name: 'step modifier',
-            type: { name: 'number', required: false },
-            description: 'Amount to scale the step increment/decrement when holding the shift key',
-            table: {
-                type: { summary: 'number' },
-                defaultValue: { summary: 10 },
-            },
-            control: {
-                type: 'number',
-            },
-        },
-        placeholder: {
-            name: 'placeholder',
-            type: { name: 'string', required: false },
-            description: 'Placeholder to apply to the control.',
-            table: {
-                type: { summary: 'string' },
-            },
-            control: {
-                type: 'text',
-            },
-        },
-        min: {
-            name: 'min',
-            type: { name: 'number', required: false },
-            description: 'The minimum value the control can be set to.',
-            table: {
-                type: { summary: 'number' },
-                defaultValue: { summary: undefined },
-            },
-            control: {
-                type: 'number',
-            },
-        },
-        max: {
-            name: 'max',
-            type: { name: 'numer', required: false },
-            description: 'The maximum value the control can be set to.',
-            table: {
-                type: { summary: 'number' },
-                defaultValue: { summary: undefined },
-            },
-            control: {
-                type: 'number',
-            },
-        },
+    min: {
+      name: "min",
+      type: { name: "number", required: false },
+      description: "The minimum value the control can be set to.",
+      table: {
+        type: { summary: "number" },
+        defaultValue: { summary: void 0 }
+      },
+      control: {
+        type: "number"
+      }
     },
+    max: {
+      name: "max",
+      type: { name: "numer", required: false },
+      description: "The maximum value the control can be set to.",
+      table: {
+        type: { summary: "number" },
+        defaultValue: { summary: void 0 }
+      },
+      control: {
+        type: "number"
+      }
+    }
+  }
 };
 export const Default = (args = {}) => {
-    const onChange = args.onChange ||
-        (() => {
-            return;
-        });
-    const onInput = args.onInput ||
-        (() => {
-            return;
-        });
-    return html `
+  const onChange = args.onChange || (() => {
+    return;
+  });
+  const onInput = args.onInput || (() => {
+    return;
+  });
+  return html`
         <sp-field-label for="default">Enter a number</sp-field-label>
         <sp-number-field
             id="default"
             ...=${spreadProps(args)}
             @input=${(event) => onInput(event.target.value)}
             @change=${(event) => onChange(event.target.value)}
-            style="width: 150px"
+            style=${ifDefined(args.quiet ? void 0 : "width: 150px")}
         ></sp-number-field>
     `;
 };
 Default.args = {
-    value: 100,
+  value: 100
 };
 export const quiet = (args = {}) => Default(args);
 quiet.args = {
-    quiet: true,
-    value: 100,
+  quiet: true,
+  value: 100
 };
 export const indeterminate = (args = {}) => Default(args);
 indeterminate.args = {
-    value: 100,
-    indeterminate: true,
+  value: 100,
+  indeterminate: true
 };
 export const decimals = (args) => {
-    return html `
+  return html`
         <sp-field-label for="decimals">
             Enter a number with visible decimals
         </sp-field-label>
@@ -204,18 +192,18 @@ export const decimals = (args) => {
             ...=${spreadProps(args)}
             @change=${args.onChange}
             .formatOptions=${{
-        signDisplay: 'exceptZero',
-        minimumFractionDigits: 1,
-        maximumFractionDigits: 2,
-    }}
+    signDisplay: "exceptZero",
+    minimumFractionDigits: 1,
+    maximumFractionDigits: 2
+  }}
         ></sp-number-field>
     `;
 };
 decimals.args = {
-    value: 19.274,
+  value: 19.274
 };
 export const percents = (args = {}) => {
-    return html `
+  return html`
         <sp-field-label for="percents">Enter a percentage</sp-field-label>
         <sp-number-field
             id="percents"
@@ -223,36 +211,36 @@ export const percents = (args = {}) => {
             ...=${spreadProps(args)}
             @change=${args.onChange}
             .formatOptions=${{
-        style: 'percent',
-        unitDisplay: 'narrow',
-    }}
+    style: "percent",
+    unitDisplay: "narrow"
+  }}
         ></sp-number-field>
     `;
 };
 percents.args = {
-    value: 0.372,
+  value: 0.372
 };
 export const currency = (args = {}) => {
-    return html `
+  return html`
         <sp-field-label for="currency">Enter a value in Euros</sp-field-label>
         <sp-number-field
             style="width: 200px"
             ...=${spreadProps(args)}
             @change=${args.onChange}
             .formatOptions=${{
-        style: 'currency',
-        currency: 'EUR',
-        currencyDisplay: 'code',
-        currencySign: 'accounting',
-    }}
+    style: "currency",
+    currency: "EUR",
+    currencyDisplay: "code",
+    currencySign: "accounting"
+  }}
         ></sp-number-field>
     `;
 };
 currency.args = {
-    value: 23.19,
+  value: 23.19
 };
 export const units = (args) => {
-    return html `
+  return html`
         <sp-field-label for="units">Enter a lengths in inches</sp-field-label>
         <sp-number-field
             id="units"
@@ -260,35 +248,35 @@ export const units = (args) => {
             ...=${spreadProps(args)}
             @change=${args.onChange}
             .formatOptions=${{
-        style: 'unit',
-        unit: 'inch',
-        unitDisplay: 'long',
-    }}
+    style: "unit",
+    unit: "inch",
+    unitDisplay: "long"
+  }}
         ></sp-number-field>
     `;
 };
 units.args = {
-    value: 24,
+  value: 24
 };
 export const pixels = (args) => {
-    return html `
+  return html`
         <sp-field-label for="units">Enter a lengths in pixels</sp-field-label>
         <sp-number-field
             id="units"
             style="width: 200px"
             .formatOptions=${{
-        style: 'unit',
-        unit: 'px',
-    }}
+    style: "unit",
+    unit: "px"
+  }}
             ...=${spreadProps(args)}
             @change=${args.onChange}
         ></sp-number-field>
     `;
 };
 pixels.args = {
-    value: 800,
+  value: 800
 };
-export const minMax = (args) => html `
+export const minMax = (args) => html`
     <sp-field-label for="min-max">
         Enter a value between 0 and 255
     </sp-field-label>
@@ -300,12 +288,12 @@ export const minMax = (args) => html `
     ></sp-number-field>
 `;
 minMax.args = {
-    value: 4,
-    min: 0,
-    max: 255,
+  value: 4,
+  min: 0,
+  max: 255
 };
 export const hideStepper = (args) => {
-    return html `
+  return html`
         <sp-field-label for="hideStepper">
             Enter a number without the stepper UI
         </sp-field-label>
@@ -317,11 +305,11 @@ export const hideStepper = (args) => {
     `;
 };
 hideStepper.args = {
-    hideStepper: true,
-    value: 67,
+  hideStepper: true,
+  value: 67
 };
 export const hideStepperQuiet = (args) => {
-    return html `
+  return html`
         <sp-field-label for="hideStepper">
             Enter a number without the stepper UI
         </sp-field-label>
@@ -333,12 +321,12 @@ export const hideStepperQuiet = (args) => {
     `;
 };
 hideStepperQuiet.args = {
-    hideStepper: true,
-    value: 67,
-    quiet: true,
+  hideStepper: true,
+  value: 67,
+  quiet: true
 };
 export const disabled = (args) => {
-    return html `
+  return html`
         <sp-field-label for="disabled">
             This Number Field is disabled
         </sp-field-label>
@@ -350,11 +338,11 @@ export const disabled = (args) => {
     `;
 };
 disabled.args = {
-    disabled: true,
-    value: 892,
+  disabled: true,
+  value: 892
 };
 export const readOnly = (args) => {
-    return html `
+  return html`
         <sp-field-label for="readonly">
             You can only read the following value
         </sp-field-label>
@@ -366,19 +354,17 @@ export const readOnly = (args) => {
     `;
 };
 readOnly.args = {
-    readonly: true,
-    value: '15',
+  readonly: true,
+  value: "15"
 };
 export const ScrollingContainer = (args = {}) => {
-    const onChange = args.onChange ||
-        (() => {
-            return;
-        });
-    const onInput = args.onInput ||
-        (() => {
-            return;
-        });
-    return html `
+  const onChange = args.onChange || (() => {
+    return;
+  });
+  const onInput = args.onInput || (() => {
+    return;
+  });
+  return html`
         <style>
             .scroller {
                 height: 140px;
@@ -411,4 +397,4 @@ export const ScrollingContainer = (args = {}) => {
         </div>
     `;
 };
-//# sourceMappingURL=number-field.stories.js.map
+//# sourceMappingURL=number-field.stories.js.map