Allow for changing dropdown label style by adding prop (#73)

* Allow for changing dropdown label style by adding prop

* attempt to fix indents

* Update package.json

Increase version

package.json

@@ -1,6 +1,6 @@
 {
   "name": "uk_gov_dash_components",
-  "version": "1.16.0",
+  "version": "1.17.0",
   "description": "Dash components for Gov UK",
   "repository": {
     "type": "git",
@@ -71,4 +71,4 @@
     "node": ">=8.11.0 <=16.16.0",
     "npm": ">=6.1.0"
   }
-}
+}

src/demo/App.js

@@ -20,6 +20,7 @@ const App = () => {
             <div>
                 <Dropdown
                     label="Hello world"
+                    labelStyle={{ "font-size": "1.5rem" , "font-weight": "bold" }}
                     style={{ minWidth: '50%' }}
                     source={[
                         { label: "Local authorities", value: "Hello LOL", disabled: true },

src/lib/components/Dropdown.react.js

@@ -10,6 +10,7 @@ import { Dropdown as RealComponent } from '../LazyLoader';
 /**
  * @param {{
  * 	label: string,
+ * 	labelStyle,
  * 	id,
  * 	autoselect,
  * 	cssNamespace,
@@ -54,6 +55,11 @@ export const dropdownPropTypes = {
 	 */
 	label: PropTypes.string,
 
+	/**
+	 * Override the css style of the dropdown label text
+	 */
+	labelStyle: PropTypes.any,
+
 	/**
 	 * Should auto select
 	 */

src/lib/fragments/Dropdown.react.js

@@ -12,6 +12,7 @@ import {
 /**
  * @param {{
  * 	label,
+ * 	labelStyle,
  * 	id,
  * 	autoselect,
  * 	cssNamespace,
@@ -40,11 +41,11 @@ import {
  * @return {*}
  */
 const Dropdown = (props = {}) => {	
-	const { label, ...autoComplete } = props;
+	const { label, labelStyle, ...autoComplete } = props;
 	const { labelProps, fieldProps } = useLabel(props);
 	return (
 		<div className="govuk-form-group" style={props.style}>
-			<label className="govuk-label" {...labelProps}>{label}</label>
+			<label className="govuk-label" style={labelStyle} {...labelProps}>{label}</label>
 			<AutoComplete
 				ariaLabelledBy={fieldProps['aria-labelledby']}
 				displayMenu="overlay"