Merge pull request #198 from sofarsounds/select-value-exposure

Set the label text to be the children passed into the option component.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sofarsounds/maestro",
-  "version": "4.1.0",
+  "version": "5.0.0",
   "description": "The official sofar sounds react uikit library",
   "main": "dist/index.js",
   "scripts": {

src/molecules/Select/Option.test.tsx

@@ -26,7 +26,7 @@ describe('Select <Menu />', () => {
     expect(mockClick).toHaveBeenCalled();
   });
 
-  it('matches style properties for inactiv', () => {
+  it('matches style properties for inactive', () => {
     let wrapper = setup();
     expect(wrapper).toHaveStyleRule('letter-spacing', '0.1px');
     expect(wrapper).toHaveStyleRule('margin-top', '0px');

src/molecules/Select/Option.tsx

@@ -6,7 +6,7 @@ interface Props {
   value?: any;
   disabled?: boolean;
   error?: boolean;
-  onClick: (value: any) => void;
+  onClick: (value: any, title: any) => void;
   'data-qaid'?: string;
 }
 
@@ -37,7 +37,7 @@ const Option: React.SFC<Props> = ({
   children,
   'data-qaid': qaId
 }) => {
-  const onChange = () => onClick(value);
+  const onChange = () => onClick(value, children);
   return (
     <OptionStyled onClick={onChange} data-qaid={qaId}>
       {children}

src/molecules/Select/README.md

@@ -40,7 +40,7 @@ Table below contains all types of props available in the Option component
 
 | Name          | Type         | Default         | Description                      |
 | :------------ | :-----       | :-------------- | :------------------------------- |
-| **children**  | `React.Node` |                 | The content to render in the option
+| **children**  | `React.Node` |                 | The content to render in the option and the text that get's shown as the label text
 | value         | `string`     |                 | The value for the given option that will be returned when selecting the option
 | disabled      | `Boolean`    | false           | Whether the option is enabled or not
 | error         | `Boolean`    | false           | Whether the option is highlighted with an error state

src/molecules/Select/index.tsx

@@ -31,7 +31,7 @@ const Select: React.SFC<SelectProps> = ({
 }) => {
   const [isOpen, setIsOpen] = useState(false);
   const ref = useRef<any>();
-  const [value, setValue] = useState<string>('');
+  const [labelText, setLabelText] = useState<string>('');
 
   useDisableScroll(isOpen, disableScrollWhenOpen);
 
@@ -43,8 +43,8 @@ const Select: React.SFC<SelectProps> = ({
     setIsOpen(false);
   });
 
-  const optionClick = (value: any) => {
-    setValue(value);
+  const optionClick = (value: any, labelText: any) => {
+    setLabelText(labelText);
     setIsOpen(false);
     handleOptionClick ? handleOptionClick(value) : null;
   };
@@ -56,7 +56,7 @@ const Select: React.SFC<SelectProps> = ({
         readonly={readonly}
         innerRef={ref}
         isOpen={isOpen}
-        value={value}
+        value={labelText}
         placeholder={placeholder}
         toggleSelect={() => setIsOpen(!isOpen)}
         hasError={hasError}