Skip to content

Commit

Permalink
updated examples
Browse files Browse the repository at this point in the history
  • Loading branch information
@willcAND
willcAND committed Jun 29, 2023
1 parent ab35458 commit 503357a
Show file tree
Hide file tree
Showing 4 changed files with 29 additions and 61 deletions.
45 changes: 17 additions & 28 deletions src/components/autosuggest/_macro-options.md
View file
Original file line number Diff line number Diff line change
@@ -1,28 +1,17 @@
| Name | Type | Required | Description |
| --------------------- | --------------------------------------------------------------- | -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| autosuggestData | string | false | URL of the JSON file with the autosuggest data that needs to be searched. Required if not using the address index api |
| allowMultiple | boolean | false | Allows the component to accept multiple selections |
| instructions | string | true | Instructions on how to use the autosuggest that will be read out by screen readers |
| ariaYouHaveSelected | string | true | Aria message to tell the user that they have selected an answer |
| ariaMinChars | string | true | Aria message to tell the user how many characters they need to enter before autosuggest will start |
| minChars | integer | false | Minimum number of characters to run a query. Default is 3 |
| ariaOneResult | string | true | Aria message to tell the user there is only one suggestion left |
| ariaNResults | string | true | Aria message to tell the user how many suggestions are left |
| moreResults | string | true | Aria message to tell the user to continue to type to refine suggestions |
| noResults | string | true | message to tell the user there are no results |
| tooManyResults | string | false | message to tell the user there are too many results to display and the user should refine the search. This is only required when using the address index api |
| typeMore | string | true | message to encourage the user to enter more characters to get suggestions |
| resultsTitle | string | true | Title of results to be displayed on screen at the top of the results |
| resultsTitleId | string | true | ID for the results title. The ID is used in the results `aria-labelledby` to provide context for the results |
| input | `Input` [_(ref)_](/components/input) - | true | Settings for the input |
| mutuallyExclusive | `MutuallyExclusive` [_(ref)_](/components/mutually-exclusive) - | false | Configuration object if this is a mutually exclusive input |
| label | `Label` [_(ref)_](/components/label) - | false | Settings for the input label. `for` will automatically be set to match the input id |
| classes | string - | false | Classes to add to the input. |
| legend | string - | Only if mutuallyExclusive is set | Text content for the legend |
| legendClasses | string - | false | Classes for the legend |
| error | `Error` [_(ref)_](/components/error) - | false | Configuration for validation errors |
| name | string - | false | The name of the input |
| value | string | number - | false | The value to set the input to |
| attributes | object - | false | HTML attributes (for example, data attributes) to add to the input |
| autocomplete | string - | true | Autocomplete attribute used to override the browsers native autocomplete |
| accessiblePlaceholder | boolean - | false | Will add the provided label as an accessible placeholder |
| Name | Type | Required | Description |
| ------------------- | ------------------------------------ | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| autosuggestData | string | false | URL of the JSON file with the autosuggest data that needs to be searched. Required if not using the address index api |
| allowMultiple | boolean | false | Allows the component to accept multiple selections |
| instructions | string | true | Instructions on how to use the autosuggest that will be read out by screen readers |
| ariaYouHaveSelected | string | true | Aria message to tell the user that they have selected an answer |
| ariaMinChars | string | true | Aria message to tell the user how many characters they need to enter before autosuggest will start |
| minChars | integer | false | Minimum number of characters to run a query. Default is 3 |
| ariaOneResult | string | true | Aria message to tell the user there is only one suggestion left |
| ariaNResults | string | true | Aria message to tell the user how many suggestions are left |
| moreResults | string | true | Aria message to tell the user to continue to type to refine suggestions |
| noResults | string | true | message to tell the user there are no results |
| tooManyResults | string | false | message to tell the user there are too many results to display and the user should refine the search. This is only required when using the address index api |
| typeMore | string | true | message to encourage the user to enter more characters to get suggestions |
| resultsTitle | string | true | Title of results to be displayed on screen at the top of the results |
| resultsTitleId | string | true | ID for the results title. The ID is used in the results `aria-labelledby` to provide context for the results |
| input | `Input` [_(ref)_](/components/input) | true | Configuration object for the input |
30 changes: 4 additions & 26 deletions src/components/autosuggest/_macro.njk
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,30 +44,7 @@
<div class="ons-autosuggest-input__status ons-u-vh ons-js-autosuggest-aria-status" aria-live="assertive" aria-atomic="true" role="status" tabindex="-1"></div>
{% endset %}

{# {{ onsInput({
"id": params.id,
"classes": "ons-js-autosuggest-input " + (params.classes if params.classes else ''),
"width": params.width,
"label": { - already available
"text": params.input.label.text,
"description": params.input.label.description,
"id": params.input.label.id,
"classes": params.input.label.classes
},
"autocomplete": params.input.autocomplete,
"legend": params.legend,
"legendClasses": params.legendClasses,
"value": params.value, -already available
"attributes": params.attributes,
"error": params.error,
"mutuallyExclusive": params.mutuallyExclusive, - already available
"accessiblePlaceholder": params.accessiblePlaceholder,
"name": params.name,
"autosuggestResults": autosuggestResults
}) }} #}

{# WITH ALL PARAMS (END GOAL) #}
{{ onsInput({
{{ onsInput({
"id": params.id,
"type": params.input.type,
"classes": "ons-js-autosuggest-input " + (params.input.classes if params.input.classes else ''),
Expand Down Expand Up @@ -100,8 +77,9 @@
"listeners": params.input.listeners
}) }}

{% if not params.mutuallyExclusive %}
{% if not params.mutuallyExclusive %}
{{ autosuggestResults | safe }}
{% endif %}
{% endif %}

</div>
{% endmacro %}
12 changes: 7 additions & 5 deletions src/components/autosuggest/example-autosuggest-country-multiple.njk
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,14 @@

{{ onsAutosuggest({
"id": "country-of-birth",
"label": {
"text": "Passport",
"id": "country-of-birth-label",
"description": "Enter your own answer or select from suggestions. You can enter multiple countries if you have a passport for more than one."
"input": {
"label": {
"text": "Passport",
"id": "country-of-birth-label",
"description": "Enter your own answer or select from suggestions. You can enter multiple countries if you have a passport for more than one."
},
"autocomplete": "off"
},
"autocomplete": "off",
"instructions": "Use up and down keys to navigate suggestions once you\'ve typed more than two characters. Use the enter key to select a suggestion. Touch device users, explore by touch or with swipe gestures.",
"ariaYouHaveSelected": "You have selected",
"ariaMinChars": "Enter 3 or more characters for suggestions.",
Expand Down
3 changes: 1 addition & 2 deletions src/components/autosuggest/example-autosuggest-country.njk
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,7 @@
"description": "Enter your own answer or select from suggestions",
"id": "country-of-birth-label"
},
"autocomplete": "off",
"width": "20"
"autocomplete": "off"
},
"instructions": "Use up and down keys to navigate suggestions once you\'ve typed more than two characters. Use the enter key to select a suggestion. Touch device users, explore by touch or with swipe gestures.",
"ariaYouHaveSelected": "You have selected",
Expand Down

0 comments on commit 503357a

Please sign in to comment.