From cc39230126a40961658a4802bcff3b914e6ce3b8 Mon Sep 17 00:00:00 2001 From: Houston Blyden Date: Thu, 2 Dec 2021 08:59:36 +0000 Subject: [PATCH] feat: add number input component (#898) * add number input component * remove search radius text --- .../form-elements/_form-elements.scss | 1 + .../form-elements/number-input/_example.njk | 27 +++++ .../number-input/_number-input.njk | 109 ++++++++++++++++++ .../number-input/_number-input.scss | 45 ++++++++ .../number-input/_properties.njk.json | 105 +++++++++++++++++ src/www/data.njk.json | 3 + .../components/number-input/index.njk.md | 51 ++++++++ 7 files changed, 341 insertions(+) create mode 100644 src/wmnds/components/form-elements/number-input/_example.njk create mode 100644 src/wmnds/components/form-elements/number-input/_number-input.njk create mode 100644 src/wmnds/components/form-elements/number-input/_number-input.scss create mode 100644 src/wmnds/components/form-elements/number-input/_properties.njk.json create mode 100644 src/www/pages/components/number-input/index.njk.md diff --git a/src/wmnds/components/form-elements/_form-elements.scss b/src/wmnds/components/form-elements/_form-elements.scss index 766458cc..53fa5835 100644 --- a/src/wmnds/components/form-elements/_form-elements.scss +++ b/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"; diff --git a/src/wmnds/components/form-elements/number-input/_example.njk b/src/wmnds/components/form-elements/number-input/_example.njk new file mode 100644 index 00000000..dc5ad40d --- /dev/null +++ b/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 %} diff --git a/src/wmnds/components/form-elements/number-input/_number-input.njk b/src/wmnds/components/form-elements/number-input/_number-input.njk new file mode 100644 index 00000000..c93954af --- /dev/null +++ b/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 %} + +
+
+ {{ + 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 %} +
+
+ +
+
+ +
+
+ +
+
+
+
+ +{% endmacro %} diff --git a/src/wmnds/components/form-elements/number-input/_number-input.scss b/src/wmnds/components/form-elements/number-input/_number-input.scss new file mode 100644 index 00000000..869d4394 --- /dev/null +++ b/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; + } + } +} diff --git a/src/wmnds/components/form-elements/number-input/_properties.njk.json b/src/wmnds/components/form-elements/number-input/_properties.njk.json new file mode 100644 index 00000000..06fd23a2 --- /dev/null +++ b/src/wmnds/components/form-elements/number-input/_properties.njk.json @@ -0,0 +1,105 @@ +{ + "wmndsNumberInputProps": [ + { + "name": "id", + "type": "string", + "description": "Required. Must be unique. The id of the input." + }, + { + "name": "name", + "type": "string", + "description": "Required. 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 false." + }, + { + "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 false." + }, + { + "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": "Required. Text to use within the error message. If contentHTML is supplied, this is ignored." + }, + { + "name": "contentHTML", + "type": "string", + "description": "Required. HTML to use within the error message. If contentHTML is provided, the contentText 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 false." + }, + { + "name": "placeholder", + "type": "string", + "description": "Placeholder is a short hint that describes the expected value of a input. It's an optional field." + }, + { + "name": "value", + "type": "string", + "description": "Optional initial value of the input." + }, + { + "name": "label", + "type": "object", + "description": "Required. Options for the label component. See label.", + "arrayOptions": [ + { + "name": "contentText", + "type": "string", + "description": "Required. If contentHTML is set, this is not required. Text to use within the label. If contentHTML is provided, the contentText argument will be ignored." + }, + { + "name": "contentHTML", + "type": "string", + "description": "Required. If contentText is set, this is not required. HTML to use within the label. If contentHTML is provided, the contentText 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)" + } + ] + } + ] +} diff --git a/src/www/data.njk.json b/src/www/data.njk.json index e2a4fcbf..dbe8f73e 100644 --- a/src/www/data.njk.json +++ b/src/www/data.njk.json @@ -187,6 +187,9 @@ { "name": "Form label" }, + { + "name": "Number input" + }, { "name": "Progress indicator" }, diff --git a/src/www/pages/components/number-input/index.njk.md b/src/www/pages/components/number-input/index.njk.md new file mode 100644 index 00000000..f95955f3 --- /dev/null +++ b/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 %}