Merge pull request #429 from appuniversum/feat/deprecate-au-input-fea…

…tures Deprecate some `AuInput` features
appuniversum · Sep 14, 2023 · 95705af · 95705af
2 parents 226d253 + 6617864
commit 95705af
Show file tree

Hide file tree

Showing 6 changed files with 268 additions and 116 deletions.
diff --git a/addon/components/au-input.hbs b/addon/components/au-input.hbs
@@ -11,13 +11,23 @@
         {{this.inputmaskModifier options=this.inputmaskOptions}}
       />
     {{else}}
-      <Input
-        @value={{@value}}
-        @type={{this.type}}
-        class={{this.classes}}
-        disabled={{@disabled}}
-        ...attributes
-      />
+      {{#if this.useDeprecatedInput}}
+        <Input
+          @value={{@value}}
+          @type={{this.type}}
+          class={{this.classes}}
+          disabled={{@disabled}}
+          ...attributes
+        />
+      {{else}}
+        <input
+          type={{this.type}}
+          value={{@value}}
+          class={{this.classes}}
+          disabled={{@disabled}}
+          ...attributes
+        />
+      {{/if}}
     {{/if}}
     {{#if (eq @iconAlignment "right")}}
       <AuIcon @icon={{@icon}} @alignment="right" />
@@ -37,12 +47,22 @@
       {{this.inputmaskModifier options=this.inputmaskOptions}}
     />
   {{else}}
-    <Input
-      @value={{@value}}
-      @type={{this.type}}
-      class={{this.classes}}
-      disabled={{@disabled}}
-      ...attributes
-    />
+    {{#if this.useDeprecatedInput}}
+      <Input
+        @value={{@value}}
+        @type={{this.type}}
+        class={{this.classes}}
+        disabled={{@disabled}}
+        ...attributes
+      />
+    {{else}}
+      <input
+        type={{this.type}}
+        value={{@value}}
+        class={{this.classes}}
+        disabled={{@disabled}}
+        ...attributes
+      />
+    {{/if}}
   {{/if}}
 {{/if}}
diff --git a/addon/components/au-input.js b/addon/components/au-input.js
@@ -1,6 +1,6 @@
 import { action } from '@ember/object';
 import Component from '@glimmer/component';
-import { assert } from '@ember/debug';
+import { assert, deprecate } from '@ember/debug';
 import auInputmask from '@appuniversum/ember-appuniversum/modifiers/au-inputmask';
 
 export default class AuInput extends Component {
@@ -12,6 +12,23 @@ export default class AuInput extends Component {
       !this.args.onChange ||
         (typeof this.args.onChange === 'function' && this.isMasked),
     );
+
+    deprecate(
+      '[AuInput] The `@value` argument is deprecated. Use the `value` attribute and the `{{on}}` modifier instead.',
+      !('value' in this.args),
+      {
+        id: '@appuniversum/ember-appuniversum.au-input',
+        until: '3.0.0',
+        for: '@appuniversum/ember-appuniversum',
+        since: {
+          enabled: '2.13.0',
+        },
+      },
+    );
+  }
+
+  get useDeprecatedInput() {
+    return 'value' in this.args || 'type' in this.args;
   }
 
   get width() {
@@ -41,6 +58,18 @@ export default class AuInput extends Component {
   }
 
   get type() {
+    deprecate(
+      '[AuInput] The `@type` argument is deprecated. Use the `type` attribute instead.',
+      !('type' in this.args),
+      {
+        id: '@appuniversum/ember-appuniversum.au-input',
+        until: '3.0.0',
+        for: '@appuniversum/ember-appuniversum',
+        since: {
+          enabled: '2.13.0',
+        },
+      },
+    );
     return this.args.type || 'text';
   }
 
@@ -70,6 +99,19 @@ export default class AuInput extends Component {
       return {};
     }
 
+    deprecate(
+      '[AuInput] The masking feature is deprecated. Use the `{{au-inputmask}}` modifier instead.',
+      false,
+      {
+        id: '@appuniversum/ember-appuniversum.au-input',
+        until: '3.0.0',
+        for: '@appuniversum/ember-appuniversum',
+        since: {
+          enabled: '2.13.0',
+        },
+      },
+    );
+
     let { mask, maskPlaceholder, maskOptions = {} } = this.args;
 
     let options = {

diff --git a/stories/5-components/Forms/AuInput.stories.js b/stories/5-components/Forms/AuInput.stories.js
diff --git a/stories/5-components/Forms/Input/AuInput.stories.js b/stories/5-components/Forms/Input/AuInput.stories.js
@@ -0,0 +1,62 @@
+import { hbs } from 'ember-cli-htmlbars';
+import { icons } from '../../../assets/icons';
+
+export default {
+  title: 'Components/Forms/Input/AuInput',
+  argTypes: {
+    error: { control: 'boolean', description: 'Add an error state' },
+    warning: { control: 'boolean', description: 'Add an warning state' },
+    disabled: {
+      control: 'boolean',
+      description: 'Adds a disabled state to the input',
+    },
+    width: {
+      control: 'select',
+      options: ['default', 'block'],
+      description: 'Display the input as a block element',
+    },
+    icon: {
+      control: 'select',
+      options: icons,
+      description:
+        'Adds an icon (using an icon implies the use @width="block")',
+    },
+    iconAlignment: {
+      control: 'select',
+      options: ['left', 'right'],
+      description: 'Choose the position of the icon',
+    },
+    value: {
+      control: 'text',
+    },
+  },
+  parameters: {
+    layout: 'padded',
+  },
+};
+
+const Template = (args) => ({
+  template: hbs`
+    <AuLabel for="input">Input</AuLabel>
+    <AuInput
+      @error={{this.error}}
+      @warning={{this.warning}}
+      @disabled={{this.disabled}}
+      @width={{this.width}}
+      @icon={{this.icon}}
+      @iconAlignment={{this.iconAlignment}}
+      value={{this.value}}
+      id="input"
+    />`,
+  context: args,
+});
+
+export const Component = Template.bind({});
+Component.args = {
+  error: false,
+  warning: false,
+  disabled: false,
+  width: '',
+  icon: '',
+  iconAlignment: 'left',
+};
diff --git a/stories/5-components/Forms/Input/Inputmask.stories.js b/stories/5-components/Forms/Input/Inputmask.stories.js
@@ -0,0 +1,45 @@
+import { hbs } from 'ember-cli-htmlbars';
+
+export default {
+  title: 'Components/Forms/Input/Inputmasking',
+  argTypes: {
+    value: {
+      control: 'text',
+    },
+    mask: {
+      control: 'text',
+    },
+    placeholder: {
+      control: 'text',
+    },
+  },
+  parameters: {
+    layout: 'padded',
+  },
+};
+
+const Template = (args) => ({
+  template: hbs`
+    <AuContent class="au-u-max-width-small">
+      <p>
+        You can add input masking to the AuInput by applying the <AuPill>{{"{{au-inputmask}}"}}</AuPill> modifier. It is a simple wrapper around the inputmask library. Usage instructions can be found in the <AuLinkExternal href="https://github.com/RobinHerbots/Inputmask">inputmask repo</AuLinkExternal>.
+      </p>
+    </AuContent>
+    <br>
+    <AuLabel for="masked-input">Masked input</AuLabel>
+    <AuInput
+      id="masked-input"
+      value={{this.value}}
+      {{au-inputmask options=(hash
+        mask=this.mask
+        placeholder=this.placeholder
+      )}}
+    />`,
+  context: args,
+});
+
+export const Component = Template.bind({});
+Component.args = {
+  mask: '99.99.99-999.99',
+  placeholder: '_',
+};