[MC,AK] Add a SN branded segmented controls comp

toolkits/springernature/packages/springernature-segmented-controls/HISTORY.md

@@ -0,0 +1,4 @@
+# History
+
+## 0.1.0 (2023-05-17)
+    * Adds segmented control component along with README

toolkits/springernature/packages/springernature-segmented-controls/README.md

@@ -0,0 +1,45 @@
+# Springer Nature Segmented Controls
+
+[![NPM version][badge-npm]][info-npm]
+
+TBD
+
+## When to use this component
+
+TBD
+
+## Installation
+
+To use the Segmented Controls component, enter the following command in your Terminal:
+
+```
+npm install @springernature/springernature-segmented-controls
+```
+
+Import the installed component code in your enhanced `scss` file:
+
+```scss
+// Include this with your other settings
+@import '@springernature/brand-context/springernature/scss/10-settings/colors/default.scss';
+
+// Include this with your other components
+@import '@springernature/springernature-segmented-controls/scss/50-components/enhanced;
+```
+
+## How it works
+
+TBD
+
+## Template
+
+Find a configurable template in the [`view` folder](https://github.com/springernature/frontend-toolkits/tree/main/toolkits/springernature/packages/springernature-segmented-controls/view). 
+
+You can see an example in the [`demo` folder](https://github.com/springernature/frontend-toolkits/tree/main/toolkits/springernature/packages/springernature-segmented-controls/demo).
+
+## Help improve this page
+
+If you’ve got a question, idea or suggestion about how to improve this component
+or guidance, post in the [#design-systems Slack channel](https://springernature.slack.com/archives/C75DHBTBP).
+
+[info-npm]: https://www.npmjs.com/package/@springernature/springernature-segmented-controls
+[badge-npm]: https://img.shields.io/npm/v/@springernature/springernature-segmented-controls.svg

toolkits/springernature/packages/springernature-segmented-controls/demo/context.json

@@ -0,0 +1,91 @@
+{
+	"defaultWith2Options": {
+		"legend":"Mode",
+		"name":"mode",
+		"options":[
+			{
+				"value":"light",
+				"id":"mode-light",
+				"label":"Light",
+				"checked":true
+			},
+			{
+				"value":"dark",
+				"id":"mode-dark",
+				"label":"Dark",
+				"checked":false
+			}
+		]
+	},
+	"defaultWith3Options": {
+		"legend":"Size",
+		"name":"size",
+		"options":[
+			{
+				"value":"small",
+				"id":"size-small",
+				"label":"Small",
+				"checked":true
+			},
+			{
+				"value":"medium",
+				"id":"size-medium",
+				"label":"Medium",
+				"checked":false
+			},
+			{
+				"value":"large",
+				"id":"size-large",
+				"label":"Large",
+				"checked":false
+			}
+		]
+	},
+	"secondaryWith3Options": {
+		"legend":"Show only",
+		"modifierClass":"c-segmented-controls--secondary",
+		"name":"show",
+		"options":[
+			{
+				"value":"todo",
+				"id":"show-todo",
+				"label":"To do",
+				"checked":true
+			},
+			{
+				"value":"progress",
+				"id":"show-progress",
+				"label":"In progress",
+				"checked":false
+			},
+			{
+				"value":"done",
+				"id":"show-done",
+				"label":"Done",
+				"checked":false
+			}
+		]
+	},
+	"secondaryWith2OptionsAndJavascript": {
+		"legend":"Frequency",
+		"modifierClass":"c-segmented-controls--secondary",
+		"name":"frequency",
+		"options":[
+			{
+				"value":"weekly",
+				"id":"frequency-weekly",
+				"label":"Weekly",
+				"checked":true
+			},
+			{
+				"value":"monthly",
+				"id":"frequency-monthly",
+				"label":"Monthly",
+				"checked":false
+			}
+		]
+	},
+	"dynamicPartials": {
+		"segmentedControls": "./toolkits/springernature/packages/springernature-segmented-controls/view/segmentedControls.hbs"
+	}
+}