feat: add number input component (#898)

* add number input component

* remove search radius text

src/wmnds/components/form-elements/_form-elements.scss

@@ -33,6 +33,7 @@
 @import "dropdown/dropdown";
 @import "error-message/error-message";
 @import "file-upload/file-upload";
+@import "number-input/number-input";
 @import "text-input/text-input";
 @import "question/question";
 @import "radios/radios";

src/wmnds/components/form-elements/number-input/_example.njk

@@ -0,0 +1,27 @@
+{% raw %}
+{% from "wmnds/components/form-elements/number-input/_number-input.njk" import wmndsNumberInput %}
+
+{{
+   wmndsNumberInput({
+      id: "example-number-input",
+      name: "example-number-input",
+      required: true,
+      classes: null,
+      error: false,
+      errorMessage: {
+         id: null,
+         contentText: "Custom error message for this example input",
+         contentHTML: null, 
+         classes: null
+      },
+      disabled: false,
+      placeholder: "1",
+      value: "",
+      label: {
+         contentText: 'Search radius',
+         classes: 'wmnds-h4'
+      }
+   })
+}}
+
+{% endraw %}

src/wmnds/components/form-elements/number-input/_number-input.njk

@@ -0,0 +1,109 @@
+{% macro wmndsNumberInput(params) %}
+
+{# Imports #}
+{% from "wmnds/components/icon/_icon.njk" import wmndsIcon %}
+{% from "wmnds/components/form-elements/form-label/_form-label.njk" import wmndsFormLabel %}
+{% from "wmnds/components/form-elements/error-message/_error-message.njk" import wmndsFeErrorMessage %}
+
+{# Params #}
+{% set id = params.id if params.id else "input" %}
+{% set name = params.name if params.name else id %}
+{% set type = params.type if params.type else "text" %}
+{% set required = params.required if params.required else false %}
+{% set classes = " " + params.classes if params.classes %} {# set paramClass to params.classNames if any #}
+{# Error Message Params #}
+{% set groupErrorClass = " wmnds-fe-group--error" if params.error %}
+{% set inputErrorClass = " wmnds-fe-input--error" if params.error %}
+{% set errorContentText = params.errorMessage.contentText if params.errorMessage.contentText else "Please enter a value" %}
+{% set errorContentHTML = params.errorMessage.contentHTML if params.errorMessage.contentHTML else null %}
+{% set errorClasses = " " + params.errorMessage.classes if params.errorMessage.classes else null %}
+{% set errorId = params.errorMessage.id if params.errorMessage.id else null %}
+{% set disabled = params.disabled if params.disabled else null %}
+{% set maxLength = params.maxLength if params.maxLength else null %}
+{% set placeholder = params.placeholder if params.placeholder else null %}
+{% set value = params.value if params.value else "" %}
+{# Params of label #}
+{% set labelContentText = params.label.contentText if params.label.contentText else "Form label" %}
+{% set labelContentHTML = params.label.contentHTML if params.label.contentHTML else null %}
+{% set labelClasses = params.label.classes if params.label.classes else null %}
+{# Params of formGroup #}
+{% set formGroupClasses = " " + params.formGroup.classes if params.formGroup.classes else null %}
+
+<div class="wmnds-fe-group{{groupErrorClass}}{{formGroupClasses}}">
+  <div class="wmnds-fe-number-input">
+    {{
+      wmndsFormLabel({
+        contentText: labelContentText,
+        contentHTML: labelContentHTML,
+        classes: labelClasses,
+        for: id
+      }) 
+    }}
+    {% if params.error %}
+      {{
+        wmndsFeErrorMessage(
+          {
+            contentText: errorContentText,
+            contentHTML: errorContentHTML,
+            classes: errorClasses,
+            id: errorId
+          }
+        )
+      }}
+    {% endif %}
+    {% if params.error %}
+      {{
+        wmndsFeErrorMessage(
+          {
+            contentText: errorContentText,
+            contentHTML: errorContentHTML,
+            classes: errorClasses,
+            id: errorId
+          }
+        )
+      }}
+    {% endif %}
+    <div class="wmnds-fe-number-input__container wmnds-grid wmnds-grid--spacing-3-lg">
+      <div class="wmmds-col-auto">
+        <button
+          type="button"
+          class="wmnds-fe-number-input__control"
+          title="Decrease"
+        >
+          {{ 
+            wmndsIcon({
+              icon: 'general-minimise',
+              class: 'wmnds-accordion__icon'
+            })
+          }}
+        </button>
+      </div>
+      <div class="wmnds-col-auto">
+        <input
+          class="wmnds-fe-number-input__input{{inputErrorClass}}{{classes}}"
+          type="number"
+          name="{{name}}" 
+          value="{{value}}"
+          {% if placeholder %} placeholder="{{placeholder}}" {% endif %}
+          {% if required %} required="true" {% endif %} 
+        />
+      </div>
+      <div class="wmmds-col-auto">
+        <button
+          type="button"
+          class="wmnds-fe-number-input__control"
+          title="Increase"
+        >
+          {{ 
+            wmndsIcon({
+              icon: 'general-expand',
+              class: 'wmnds-accordion__icon'
+            })
+          }}
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+
+{% endmacro %}

src/wmnds/components/form-elements/number-input/_number-input.scss

@@ -0,0 +1,45 @@
+&.wmnds-fe-number-input {
+  &__container {
+    flex-wrap: nowrap;
+  }
+
+  &__input {
+    @include type-setting(0);
+    width: 100%;
+    padding: $size-sm;
+    border: 1px solid get-color(primary);
+    color: get-color(text);
+    text-align: center;
+
+    &--error {
+      border: 2px solid get-color(error);
+    }
+  }
+
+  &__control {
+    width: 50px;
+    height: 50px;
+    padding: $size-sm;
+    border: 0;
+    border-radius: 6px;
+    background-color: get-color("secondary");
+
+    &:not([disabled]) {
+      cursor: pointer;
+
+      &:hover {
+        background-color: get-color("secondary", 20, dark);
+      }
+    }
+
+    svg {
+      width: 100%;
+      height: 100%;
+      fill: $white;
+    }
+
+    &[disabled] {
+      opacity: 0.5;
+    }
+  }
+}

src/wmnds/components/form-elements/number-input/_properties.njk.json

@@ -0,0 +1,105 @@
+{
+  "wmndsNumberInputProps": [
+    {
+      "name": "id",
+      "type": "string",
+      "description": "<strong>Required.</strong> Must be unique. The id of the input."
+    },
+    {
+      "name": "name",
+      "type": "string",
+      "description": "<strong>Required.</strong> The name of the input, which is submitted with the form data."
+    },
+    {
+      "name": "required",
+      "type": "boolean",
+      "description": "If true, input is required/must be filled out. Defaults to <code class='wmnds-website-inline-code'>false</code>."
+    },
+    {
+      "name": "classes",
+      "type": "string",
+      "description": "Classes to add to the input component."
+    },
+    {
+      "name": "error",
+      "type": "boolean",
+      "description": "If true, error will be displayed. Defaults to <code class='wmnds-website-inline-code'>false</code>."
+    },
+    {
+      "name": "errorMessage",
+      "type": "object",
+      "description": "Options for the error message component. See errorMessage.",
+      "arrayOptions": [
+        {
+          "name": "id",
+          "type": "string",
+          "description": "Id attribute to add to the error message span tag."
+        },
+        {
+          "name": "contentText",
+          "type": "string",
+          "description": "<strong>Required.</strong> Text to use within the error message. If <code class='wmnds-website-inline-code'>contentHTML</code> is supplied, this is ignored."
+        },
+        {
+          "name": "contentHTML",
+          "type": "string",
+          "description": "<strong>Required.</strong> HTML to use within the error message. If <code class='wmnds-website-inline-code'>contentHTML</code> is provided, the <code class='wmnds-website-inline-code'>contentText</code> argument will be ignored."
+        },
+        {
+          "name": "classes",
+          "type": "string",
+          "description": "Classes to add to the error message span tag."
+        }
+      ]
+    },
+    {
+      "name": "disabled",
+      "type": "boolean",
+      "description": "If true, input should be disabled. Defaults to <code class='wmnds-website-inline-code'>false</code>."
+    },
+    {
+      "name": "placeholder",
+      "type": "string",
+      "description": "Placeholder is a short hint that describes the expected value of a input. It's an <code class='wmnds-website-inline-code'>optional</code> field."
+    },
+    {
+      "name": "value",
+      "type": "string",
+      "description": "Optional initial value of the input."
+    },
+    {
+      "name": "label",
+      "type": "object",
+      "description": "<strong>Required.</strong> Options for the label component. See label.",
+      "arrayOptions": [
+        {
+          "name": "contentText",
+          "type": "string",
+          "description": "<strong>Required.</strong> If <code class='wmnds-website-inline-code'>contentHTML</code> is set, this is not required. Text to use within the label. If <code class='wmnds-website-inline-code'>contentHTML</code> is provided, the <code class='wmnds-website-inline-code'>contentText</code>  argument will be ignored."
+        },
+        {
+          "name": "contentHTML",
+          "type": "string",
+          "description": "<strong>Required.</strong> If <code class='wmnds-website-inline-code'>contentText</code>  is set, this is not required. HTML to use within the label. If <code class='wmnds-website-inline-code'>contentHTML</code> is provided, the <code class='wmnds-website-inline-code'>contentText</code>  argument will be ignored."
+        },
+        {
+          "name": "classes",
+          "type": "string",
+          "description": "Classes to add to the label tag."
+        }
+      ]
+    },
+    {
+      "name": "formGroup",
+      "type": "object",
+      "description": "Options for the form-group wrapper. See formGroup options below.",
+      "arrayOptions": [
+        {
+          "name": "classes",
+          "type": "string",
+          "description": "Classes to add to the form group (e.g. to show error state for the whole group)"
+        }
+      ]
+    }
+  ]
+}

src/www/data.njk.json

@@ -187,6 +187,9 @@
             {
               "name": "Form label"
             },
+            {
+              "name": "Number input"
+            },
             {
               "name": "Progress indicator"
             },

src/www/pages/components/number-input/index.njk.md

@@ -0,0 +1,51 @@
+{% extends "www/_layouts/layout-left-pane.njk" %}
+{% set pageTitle = "Number Input" %}
+{% from "www/_partials/component-example/component-example.njk" import compExample %}
+{% from "wmnds/components/form-elements/number-input/_number-input.njk" import wmndsNumberInput %}
+
+{% block content %}
+{% markdown %}
+
+## About
+
+### What does it do?
+
+- Allows users to select a number by increasing or reducing it incrementally
+
+### When to use it?
+
+- When user needs to select and adjust a number incrementally
+
+### When not to use it?
+
+- When user needs to enter information other than a number, for example location, postcode or place of interest
+- Use fixed width inputs for content that has known length, e.g. postcode.
+
+### How it works?
+
+- When user clicks minus button, number reduces by 1, when user clicks plus button, number increases by 1
+
+{% endmarkdown %}
+
+{{
+    compExample([
+      wmndsNumberInput(
+        {
+          placeholder: '1',
+          label: {
+            contentText: 'Search radius',
+            classes: 'wmnds-h4'
+          }
+        }
+      )
+    ], {
+      componentPath: "wmnds/components/form-elements/number-input/",
+      njk: true,
+      njkProps: wmndsNumberInputProps,
+      js: false,
+      iframe: false
+    })
+}}
+{# End Number Input #}
+
+{% endblock %}