From 8b176c0368c38046f2f8ab7c4825180eda5cfdc1 Mon Sep 17 00:00:00 2001 From: Catia Costa Date: Tue, 12 Jan 2021 12:40:42 +0000 Subject: [PATCH 1/4] Add date input component. --- .../form-elements/date-input/_date-input.njk | 74 +++++++++++++++++++ .../form-elements/date-input/_date-input.scss | 11 +++ .../form-elements/date-input/_example.njk | 9 +++ .../date-input/_properties.njk.json | 58 +++++++++++++++ src/www/data.njk.json | 3 + .../pages/components/date-input/index.njk.md | 57 ++++++++++++++ 6 files changed, 212 insertions(+) create mode 100644 src/wmnds/components/form-elements/date-input/_date-input.njk create mode 100644 src/wmnds/components/form-elements/date-input/_date-input.scss create mode 100644 src/wmnds/components/form-elements/date-input/_example.njk create mode 100644 src/wmnds/components/form-elements/date-input/_properties.njk.json create mode 100644 src/www/pages/components/date-input/index.njk.md diff --git a/src/wmnds/components/form-elements/date-input/_date-input.njk b/src/wmnds/components/form-elements/date-input/_date-input.njk new file mode 100644 index 000000000..37dfcf91c --- /dev/null +++ b/src/wmnds/components/form-elements/date-input/_date-input.njk @@ -0,0 +1,74 @@ +{% macro wmndsDateInput(params) %} + +{# Imports #} +{% from "wmnds/components/form-elements/label/_label.njk" import wmndsLabel %} +{% from "wmnds/components/form-elements/error-message/_error-message.njk" import wmndsFeErrorMessage %} + +{# Params #} +{% set id = params.id if params.id else "date-input" %} +{% set name = params.name if params.name else id %} +{% 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 null %} +{% 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 %} +{# Params of formGroup #} +{% set formGroupClasses = " " + params.formGroup.classes if params.formGroup.classes else null %} +{# Params of Attributes #} +{% set disabled = params.attributes.disabled if params.attributes.disabled else null %} +{% set maxLength = params.attributes.maxLength if params.attributes.maxLength else null %} +{% set placeholder = params.attributes.placeholder if params.attributes.placeholder else null %} +{% set value = params.attributes.value if params.attributes.value else null %} + +
+ + {% if params.error -%} + {{ + wmndsFeErrorMessage( + { + contentText: errorContentText, + contentHTML: errorContentHTML, + classes: errorClasses, + id: errorId + } + ) + }} + {% endif -%} + +
+ {{ + wmndsLabel({ + contentText: "Day", + for: "LastUsedDateDay" + }) + }} + +
+ +
+ {{ + wmndsLabel({ + contentText: "Month", + for: "LastUsedDateMonth" + }) + }} + +
+ +
+ {{ + wmndsLabel({ + contentText: "Year", + for: "LastUsedDateYear" + }) + }} + +
+ +
+ +{% endmacro %} diff --git a/src/wmnds/components/form-elements/date-input/_date-input.scss b/src/wmnds/components/form-elements/date-input/_date-input.scss new file mode 100644 index 000000000..4402b3705 --- /dev/null +++ b/src/wmnds/components/form-elements/date-input/_date-input.scss @@ -0,0 +1,11 @@ +.wmnds-fe-input { + @include type-setting(0); + width: 100%; + padding: $size-sm; + border: 1px solid get-color(primary); + color: get-color(text); + + &--error { + border: 2px solid get-color(error); + } +} diff --git a/src/wmnds/components/form-elements/date-input/_example.njk b/src/wmnds/components/form-elements/date-input/_example.njk new file mode 100644 index 000000000..01f0a9a23 --- /dev/null +++ b/src/wmnds/components/form-elements/date-input/_example.njk @@ -0,0 +1,9 @@ +{% raw %} +{% from "wmnds/components/form-elements/date-input/_date-input.njk" import wmndsDateInput %} + +{{ + wmndsDateInput({ + id: "date-input" + }) +}} +{% endraw %} diff --git a/src/wmnds/components/form-elements/date-input/_properties.njk.json b/src/wmnds/components/form-elements/date-input/_properties.njk.json new file mode 100644 index 000000000..5f4012c30 --- /dev/null +++ b/src/wmnds/components/form-elements/date-input/_properties.njk.json @@ -0,0 +1,58 @@ +{ + "wmndsDateInputProps": [ + { + "name": "id", + "type": "string", + "description": "Required. Must be unique. The id of the group of inputs." + }, + { + "name": "required", + "type": "boolean", + "description": "If true, input is required/must be filled out. Defaults to false." + }, + { + "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" + }, + { + "name": "classes", + "type": "string", + "description": "Classes to add to the error message span tag." + } + ] + }, + { + "name": "formGroup", + "type": "Object", + "description": "Options for the form-group wrapper. See formGroup 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 a71e6e84b..6ead99de3 100644 --- a/src/www/data.njk.json +++ b/src/www/data.njk.json @@ -47,6 +47,9 @@ { "name": "Content tiles" }, + { + "name": "Date Input" + }, { "name": "Details" }, diff --git a/src/www/pages/components/date-input/index.njk.md b/src/www/pages/components/date-input/index.njk.md new file mode 100644 index 000000000..d80b5aae1 --- /dev/null +++ b/src/www/pages/components/date-input/index.njk.md @@ -0,0 +1,57 @@ +{% extends "www/_layouts/layout-left-pane.njk" %} +{% set pageTitle = "Date Input" %} +{% from "www/_partials/component-example/component-example.njk" import compExample %} +{% from "wmnds/components/form-elements/date-input/_date-input.njk" import wmndsDateInput %} + +{% block content %} +{% markdown %} + +## About + +### What does it do? + +- Help users enter a memorable date or one they can easily look up. + +### When to use it? + +- Use the date input component when you’re asking users for a date they’ll already know, or can look up without using a calendar. + +### When not to use it? + +- Do not use the date input component if users are unlikely to know the exact date of the event you’re asking about. + +{% endmarkdown %} + +{{ + compExample([wmndsDateInput()], { + componentPath: "wmnds/components/form-elements/date-input/", + njk: true, + njkProps: wmndsDateInputProps, + js: false, + iframe: false + }) +}} +{# End Input #} + +{% markdown %} + +## Showing error + +{% endmarkdown %} + +{{ + compExample([wmndsDateInput({ + error: true, + errorMessage: { + contentText: "Date input custom error message" + } + })], { + componentPath: "wmnds/components/form-elements/date-input/", + njk: true, + njkProps: wmndsDateInputProps, + js: false, + iframe: false + }) +}} + +{% endblock %} From c307c3ab82f5333ff4f66aeba3308fdb13732bd5 Mon Sep 17 00:00:00 2001 From: Catia Costa Date: Tue, 12 Jan 2021 12:44:07 +0000 Subject: [PATCH 2/4] Update example.njk --- .../form-elements/date-input/_example.njk | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/src/wmnds/components/form-elements/date-input/_example.njk b/src/wmnds/components/form-elements/date-input/_example.njk index 01f0a9a23..5daae6ae7 100644 --- a/src/wmnds/components/form-elements/date-input/_example.njk +++ b/src/wmnds/components/form-elements/date-input/_example.njk @@ -3,7 +3,18 @@ {{ wmndsDateInput({ - id: "date-input" + id: "passport-date", + required: true, + error: false, + errorMessage: { + id: null, + contextText: "The date your passport was issued must be in the past", + contextHTML: null, + classes: null + }, + formGroup: { + classes: "wmnds-m-t-20" + } }) }} {% endraw %} From 299d269836e53f394372a2d73709063b341ff6de Mon Sep 17 00:00:00 2001 From: Catia Costa <34938764+catiarodriguescosta@users.noreply.github.com> Date: Tue, 12 Jan 2021 16:23:00 +0000 Subject: [PATCH 3/4] Property's text amend. Co-authored-by: Houston Blyden --- .../components/form-elements/date-input/_properties.njk.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/wmnds/components/form-elements/date-input/_properties.njk.json b/src/wmnds/components/form-elements/date-input/_properties.njk.json index 5f4012c30..86f2dc82c 100644 --- a/src/wmnds/components/form-elements/date-input/_properties.njk.json +++ b/src/wmnds/components/form-elements/date-input/_properties.njk.json @@ -44,7 +44,7 @@ }, { "name": "formGroup", - "type": "Object", + "type": "object", "description": "Options for the form-group wrapper. See formGroup below.", "arrayOptions": [ { From b42c6e5c10532a5764a3a40f48318beeca96fad6 Mon Sep 17 00:00:00 2001 From: Catia Costa <34938764+catiarodriguescosta@users.noreply.github.com> Date: Tue, 12 Jan 2021 16:24:13 +0000 Subject: [PATCH 4/4] Define default errorMessage for date input component. Co-authored-by: Houston Blyden --- src/wmnds/components/form-elements/date-input/_date-input.njk | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/wmnds/components/form-elements/date-input/_date-input.njk b/src/wmnds/components/form-elements/date-input/_date-input.njk index 37dfcf91c..a32cdcd56 100644 --- a/src/wmnds/components/form-elements/date-input/_date-input.njk +++ b/src/wmnds/components/form-elements/date-input/_date-input.njk @@ -12,7 +12,7 @@ {# 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 null %} +{% set errorContentText = params.errorMessage.contentText if params.errorMessage.contentText else "Please enter a valid date" %} {% 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 %}