feat: add autocomplete selected state (#875)

* added selected autocomplete state

* add pattern examples & props

* rename classes

Co-authored-by: Gil <43111519+gldgrnt@users.noreply.github.com>

src/wmnds/patterns/autocomplete/_autocomplete.njk

@@ -13,6 +13,8 @@
 {% set label = params.label.contentText if params.label.contentText else "Autocomplete label" %}
 {% set name = params.name if params.name else id %}
 {% set isRequired = params.isRequired if params.isRequired else false %}
+{% set selected = params.selected if params.selected else false %}
+{% set selectedItem = params.selectedItem if params.selectedItem else 'Selected item' %}
 
 {# Label #}
 {{
@@ -23,6 +25,21 @@
   })
 }}
 
+{% if params.selected %}
+<div
+    class="wmnds-autocomplete__selected-item wmnds-grid wmnds-grid--justify-between wmnds-m-t-xs wmnds-m-b-md"
+  >
+    <strong class="wmnds-col-auto wmnds-autocomplete__selected-item-summary">{{selectedItem}}</strong>
+    <button type="button" class="wmnds-autocomplete__selected-item-close">
+      {{
+        wmndsIcon({
+          icon: 'general-cross',
+          class: 'wmnds-autocomplete__selected-item-close-icon'
+        })
+      }}
+    </button>
+  </div>
+{% else %}
 <div class="wmnds-autocomplete wmnds-grid{{isLoading}}">
   {% from "wmnds/components/loader/_loader.njk" import wmndsLoader %}
   {#- Get SVG icon and pass class -#}
@@ -31,16 +48,17 @@
     wmndsIcon({
       icon: 'general-search',
       class: 'wmnds-autocomplete__icon'
-    }) | indent(2) | trim
-  -}}
+    })
+  }}
 
   {# Loading spinner #}
   {{
-    wmndsLoader() | indent(2) | trim
+    wmndsLoader()
   }}
   <!-- Autocomplete input box -->
   <input class="wmnds-fe-input wmnds-autocomplete__input wmnds-col-1" value="{{ query }}" placeholder="{{ placeholder }}" name="{{ name }}" aria-label="{{ placeholder }}"  type="text" id="{{id}}" required="{{isRequired}}" autocomplete="off">
 </div>
+{% endif %}
 
 {#- If showSuggestions is true #}
 {% if params.showSuggestions %}
@@ -62,7 +80,7 @@
         wmndsDisruptionIndicatorMedium({
           classModifiers: 'wmnds-disruption-indicator-medium',
           text: query
-        }) | indent(8) | trim
+        })
       }}
     </div>
     <div class="wmnds-col-1-2 wmnds-col-sm-2-3">

src/wmnds/patterns/autocomplete/_autocomplete.scss

@@ -78,3 +78,39 @@
     }
   }
 }
+
+// Selected autocomplete styling
+.wmnds-autocomplete__selected-item {
+  width: 100%;
+  height: 50px;
+  padding-right: 0;
+  padding-left: $size-sm;
+  border: 1px solid get-color(primary);
+  align-content: center;
+}
+
+.wmnds-autocomplete__selected-item-summary {
+  display: block;
+  width: 100%;
+  align-self: center;
+
+  @media (min-width: 360px) {
+    max-width: calc(100% - (115px));
+    margin-top: 0;
+    margin-right: $size-md;
+  }
+}
+
+.wmnds-autocomplete__selected-item-close {
+  padding: $size-sm;
+  border: 0;
+  background: none;
+  cursor: pointer;
+}
+
+.wmnds-autocomplete__selected-item-close-icon {
+  display: block;
+  width: 22px;
+  height: 22px;
+  fill: get-color(secondary);
+}

src/wmnds/patterns/autocomplete/_example.njk

@@ -0,0 +1,13 @@
+{% raw %}
+{% from "wmnds/patterns/autocomplete/_autocomplete.njk" import wmndsAutocomplete %}
+
+{{
+  compExample([
+    wmndsAutocomplete({
+      id: 'selectedState',
+      selected: false,
+      selectedItem: '',
+    })
+  ])
+}}
+{% endraw %}

src/wmnds/patterns/autocomplete/_properties.njk.json

@@ -0,0 +1,39 @@
+{
+  "wmndsAutocompleteProps": [
+    {
+      "name": "id",
+      "type": "string",
+      "description": "<strong>Required.</strong> String of text used for the search in the autocomplete."
+    },
+    {
+      "name": "query",
+      "type": "string",
+      "description": "String of text used for the search in the autocomplete."
+    },
+    {
+      "name": "placeholder",
+      "type": "string",
+      "description": "Text used for the placeholder in the autocomplete input."
+    },
+    {
+      "name": "loading",
+      "type": "boolean",
+      "description": "If true, loading spinner will be visible in the autocomplete."
+    },
+    {
+      "name": "isRequired",
+      "type": "boolean",
+      "description": "Indictes whether an autocomplete response is required"
+    },
+    {
+      "name": "selected",
+      "type": "boolean",
+      "description": "If true, the autocomplete will display in the selected state"
+    },
+    {
+      "name": "selectedItem",
+      "type": "string",
+      "description": "Text to show in the selected state if <code class='wmnds-website-inline-code'>selected</code> is <code class='wmnds-website-inline-code'>true</code>"
+    }
+  ]
+}