Refactors Nature Sort By to use simpler radio button fieldset

toolkits/nature/packages/nature-sort-by/HISTORY.md

@@ -1,5 +1,8 @@
 # History
 
+## 3.0.0 (2022-02-14)
+    * BREAKING: Performs a complete rewrite of the component. Component no longer is a dropdown, now simpler implementation with radio buttons in a form.
+
 ## 2.1.0 (2022-02-02)
     * FEATURE: add view template and demo
 
@@ -8,6 +11,5 @@
 ## 1.1.0 (2021-06-30)
     * Ensures radio is checked before page reloads
 
-
 ## 1.0.0 (2021-05-19)
     * Initial commit

toolkits/nature/packages/nature-sort-by/README.md

@@ -2,7 +2,7 @@
 
 [![NPM version][badge-npm]][info-npm]
 
-A sort by dropdown for use on Nature product pages that contain a sortable list of content such as search results pages.
+The Nature Sort by component lets users change the order of a list of content items. For example, to sort search results by date or relevance.
 
 ## Installation
 
@@ -25,34 +25,17 @@ sortBy();
 ```scss
 @import '@springernature/nature-sort-by/scss/10-settings/sort-by';
 @import '@springernature/nature-sort-by/scss/50-components/sort-by';
-
-@import '@springernature/brand-context/default/scss/60-utilities/flex.scss';
-@import '@springernature/brand-context/default/scss/60-utilities/hiding.scss';
-@import '@springernature/brand-context/default/scss/60-utilities/spacing.scss';
-
 ```
 
-> **NOTE** The component require the use of the utility classes shown above
+Insert the component's HTML inside an HTML form in your application. See an example [template](#template) below.
 
 ## Configuration
 
-To configure the component the following html attributes will need to be set:
-
-| Name                    | Description                                                                                 | 
-|------------------------|---------------------------------------------------------------------------------------------|
-| data-sort-by-trigger   | This should be set on the html element that is clicked in order to open the dropdown menu   |
-| data-sort-by-target    | This should be set on the containing html element of the sort by dropdown menu              |
-| data-sort-by-radio     | This should be set on each list item within the sort by dropdown menu                       |
-| <input value=""        | The value attribute for each radio input should be set with the corresponding url parameter value for page content sorting. For example `value="date_desc"` generates the following url parameter upon page reload: `?ORDER=date_desc`  |
-
-This component uses Global Expander. This means you should be aware of the following:
-1. Global Expander will replace the href of the trigger with `javascript:;`. This allows you to put a hash link in for progressive enhancements purposes.
-2. You can add the classname `u-js-hide` to the target on page render. Global Expander will remove this when the menu is opened. 
-3. Global Expander will add the classname `is-open` to the trigger and `has-tethered` to the target when the menu has been opened. The component's styling utilises these.
+The Sort By component passes data to a backend to tell it how a list of content should be sorted. This is done using a standard form submission and requires you to have a backend to receive and that process the form data. Edit the values of the `name` and `value` html attributes on the radio inputs to define data appropriate for your backend logic.
 
 ## Template
 
-Find a configurable template in the [`view` folder](./view/sort-by.hbs). You can see an example usage in the `demo` folder.
+Find a configurable template in the [`view` folder](https://github.com/springernature/frontend-toolkits/blob/master/toolkits/nature/packages/nature-sort-by/view/sort-by.hbs). You can see an example usage in the [`demo` folder](https://github.com/springernature/frontend-toolkits/blob/master/toolkits/nature/packages/nature-sort-by/demo/dist/index.html). 
 
 [info-npm]: https://www.npmjs.com/package/@springernature/nature-sort-by
-[badge-npm]: https://img.shields.io/npm/v/@springernature/nature-sort-by.svg
+[badge-npm]: https://img.shields.io/npm/v/@springernature/nature-sort-by.svg

toolkits/nature/packages/nature-sort-by/__tests__/sort-by.js

@@ -0,0 +1,33 @@
+import {sortBy} from '../js/sort-by';
+
+describe('Sort By', () => {
+	beforeEach(() => {
+		document.body.innerHTML = `
+			<form action="/" method="post">
+				<div class="c-sort-by" data-sort-by="">
+					<span class="c-sort-by__heading">Sort by:</span>
+					<input class="c-sort-by__input" data-sort-by-input="" name="order" value="relevance" id="sort-by-relevance" type="radio">
+					<label class="c-sort-by__label" for="sort-by-relevance">Relevance</label>
+					<input class="c-sort-by__input" data-sort-by-input="" name="order" value="desc" id="sort-by-desc" type="radio" checked="">
+					<label class="c-sort-by__label" for="sort-by-desc">Most recent</label>
+					<input class="c-sort-by__input" data-sort-by-input="" name="order" value="asc" id="sort-by-asc" type="radio">
+					<label class="c-sort-by__label" for="sort-by-asc">Oldest first</label>
+					<button class="c-sort-by__button" data-sort-by-button="" type="submit">Submit</button>
+				</div>
+			</form>
+		`;
+	});
+
+	test('Should submit form if radio input checked', () => {
+		const form = document.querySelector('form');
+		const spy  = jest.fn();
+		form.addEventListener('submit', event => {
+			event.preventDefault();
+			spy();
+		});
+		sortBy();
+		const input = document.querySelector('input');
+		input.dispatchEvent(new Event('change'));
+		expect(spy).toHaveBeenCalled();
+	});
+});

toolkits/nature/packages/nature-sort-by/demo/context.json

@@ -3,15 +3,20 @@
     {
       "value": "relevance",
       "label": "Relevance",
-      "checked": true
+	  "name": "order",
+	  "checked": false
     },
     {
       "value": "desc",
-      "label": "Most recent"
-    },
+      "label": "Date published (new to old)",
+	  "name": "order",
+      "checked": true
+	},
     {
       "value": "asc",
-      "label": "Oldest first"
+      "label": "Date published (old to new)",
+	  "name": "order",
+	  "checked": false
     }
   ],
   "dynamicPartials": {