Merge pull request #199 from sofarsounds/develop

🔥v5.0.0

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": {
@@ -29,19 +29,16 @@
     "@storybook/addon-actions": "^5.1.3",
     "@storybook/addon-knobs": "^5.1.3",
     "@storybook/addon-links": "^5.1.3",
-    "@storybook/addon-storysource": "^5.1.3",
     "@storybook/addon-viewport": "^5.1.3",
     "@storybook/addons": "^5.1.3",
     "@storybook/react": "^5.1.3",
-    "@svgr/webpack": "^4.3.0",
     "@types/color": "^3.0.0",
     "@types/enzyme": "^3.9.3",
     "@types/enzyme-adapter-react-16": "^1.0.5",
     "@types/jest": "^24.0.14",
     "@types/react": "^16.8.19",
     "@types/react-dom": "^16.8.4",
     "@types/react-router-dom": "^4.3.4",
-    "@types/storybook__addon-knobs": "^5.0.0",
     "@types/storybook__react": "^4.0.1",
     "@types/styled-components": "^4",
     "@typescript-eslint/eslint-plugin": "^1.10.2",
@@ -58,31 +55,26 @@
     "eslint-plugin-prettier": "^3.1.0",
     "eslint-plugin-react-hooks": "^1.6.1",
     "fs-extra": "^8.0.1",
+    "gh-pages": "^2.1.1",
     "glob": "^7.1.4",
     "husky": "^3.0.1",
     "image-webpack-loader": "^5.0.0",
     "jest-styled-components": "^6.3.1",
     "react": "^16",
-    "storybook-addon-styled-component-theme": "^1.2.3",
-    "svg-inline-loader": "^0.8.0",
-    "terser": "^4.0.0",
     "ts-jest": "^24.0.2",
     "typescript": "^3.5.1",
     "url-loader": "^2.0.1",
     "webpack": "^4.35.0",
-    "webpack-bundle-analyzer": "^3.3.2",
+    "webpack-bundle-analyzer": "^3.6.0",
     "webpack-cli": "^3.3.5",
     "webpack-node-externals": "^1.7.2"
   },
   "dependencies": {
-    "@emotion/unitless": "^0.7.4",
     "enzyme": "^3.10.0",
     "enzyme-to-json": "^3.3.5",
     "eslint": "^5.16.0",
     "eslint-plugin-react": "^7.13.0",
-    "gh-pages": "^2.0.1",
     "jest": "^24.8.0",
-    "path": "^0.12.7",
     "prettier": "^1.18.2",
     "react-dom": "^16",
     "react-router-dom": "^4",

src/molecules/Dropdown/__snapshots__/Dropdown.test.tsx.snap

@@ -179,7 +179,7 @@ exports[`<Dropdown /> renders correctly 1`] = `
             "attrs": Array [],
             "componentStyle": ComponentStyle {
               "componentId": "sc-htpNat",
-              "isStatic": true,
+              "isStatic": false,
               "lastClassName": "c0",
               "rules": Array [
                 "

src/molecules/Footer/index.tsx

@@ -24,7 +24,7 @@ interface Composition {
   LogoWithSlogan: React.SFC<LogoWithSloganProps>;
   LinkSection: React.SFC;
   SectionHeader: React.SFC;
-  SectionLink: React.SFC<{ href: string }>;
+  SectionLink: React.SFC<any>;
   SocialIcons: React.SFC;
   Icon: React.SFC<{ name: string }>;
   CopyrightMsg: React.SFC;

src/molecules/FormGroup/__snapshots__/FormGroup.test.tsx.snap

@@ -225,7 +225,7 @@ exports[`<FormGroup /> applies a hasError prop to the input 1`] = `
             "attrs": Array [],
             "componentStyle": ComponentStyle {
               "componentId": "sc-fjdhpX",
-              "isStatic": true,
+              "isStatic": false,
               "lastClassName": "nsimD",
               "rules": Array [],
             },
@@ -623,7 +623,7 @@ exports[`<FormGroup /> renders a error message 1`] = `
             "attrs": Array [],
             "componentStyle": ComponentStyle {
               "componentId": "sc-fjdhpX",
-              "isStatic": true,
+              "isStatic": false,
               "lastClassName": "nsimD",
               "rules": Array [],
             },
@@ -995,7 +995,7 @@ exports[`<FormGroup /> renders a required indicator 1`] = `
             "attrs": Array [],
             "componentStyle": ComponentStyle {
               "componentId": "sc-fjdhpX",
-              "isStatic": true,
+              "isStatic": false,
               "lastClassName": "nsimD",
               "rules": Array [],
             },
@@ -1525,7 +1525,7 @@ exports[`<FormGroup /> renders a with an Icon 1`] = `
             "attrs": Array [],
             "componentStyle": ComponentStyle {
               "componentId": "sc-fjdhpX",
-              "isStatic": true,
+              "isStatic": false,
               "lastClassName": "nsimD",
               "rules": Array [],
             },
@@ -1833,7 +1833,7 @@ exports[`<FormGroup /> renders a with an Icon 1`] = `
                       forwardedRef={null}
                     >
                       <i
-                        className="icon-helpCircleOutline  c1"
+                        className="c1 icon-helpCircleOutline "
                       />
                     </StyledComponent>
                   </styled.i>
@@ -2087,7 +2087,7 @@ exports[`<FormGroup /> renders correctly 1`] = `
             "attrs": Array [],
             "componentStyle": ComponentStyle {
               "componentId": "sc-fjdhpX",
-              "isStatic": true,
+              "isStatic": false,
               "lastClassName": "nsimD",
               "rules": Array [],
             },

src/molecules/Navbar/__snapshots__/Brand.test.tsx.snap

@@ -158,7 +158,7 @@ exports[`Navbar <Brand /> renders correctly 1`] = `
           "attrs": Array [],
           "componentStyle": ComponentStyle {
             "componentId": "sc-bdVaJa",
-            "isStatic": true,
+            "isStatic": false,
             "lastClassName": "c0",
             "rules": Array [
               "

src/molecules/Navbar/__snapshots__/CollapseIcon.test.tsx.snap

@@ -257,7 +257,7 @@ exports[`Navbar <CollapseIcon /> renders correctly in closed state 1`] = `
                   "attrs": Array [],
                   "componentStyle": ComponentStyle {
                     "componentId": "c1",
-                    "isStatic": true,
+                    "isStatic": false,
                     "lastClassName": "c2",
                     "rules": Array [
                       "
@@ -302,7 +302,7 @@ exports[`Navbar <CollapseIcon /> renders correctly in closed state 1`] = `
                   "attrs": Array [],
                   "componentStyle": ComponentStyle {
                     "componentId": "c1",
-                    "isStatic": true,
+                    "isStatic": false,
                     "lastClassName": "c2",
                     "rules": Array [
                       "
@@ -633,7 +633,7 @@ exports[`Navbar <CollapseIcon /> renders correctly when in open state 1`] = `
                   "attrs": Array [],
                   "componentStyle": ComponentStyle {
                     "componentId": "c1",
-                    "isStatic": true,
+                    "isStatic": false,
                     "lastClassName": "c2",
                     "rules": Array [
                       "
@@ -678,7 +678,7 @@ exports[`Navbar <CollapseIcon /> renders correctly when in open state 1`] = `
                   "attrs": Array [],
                   "componentStyle": ComponentStyle {
                     "componentId": "c1",
-                    "isStatic": true,
+                    "isStatic": false,
                     "lastClassName": "c2",
                     "rules": Array [
                       "

src/molecules/Pagination/__snapshots__/Arrow.test.tsx.snap

@@ -673,7 +673,7 @@ exports[`Pagination Arrow <ArrowLeft /> renders correctly 1`] = `
                 forwardedRef={null}
               >
                 <i
-                  className="icon-chevronLeft  c1"
+                  className="c1 icon-chevronLeft "
                 />
               </StyledComponent>
             </styled.i>
@@ -1371,7 +1371,7 @@ exports[`Pagination Arrow <ArrowLeft /> renders correctly when disabled 1`] = `
                 forwardedRef={null}
               >
                 <i
-                  className="icon-chevronLeft  c1"
+                  className="c1 icon-chevronLeft "
                   color="blueSmoke"
                 />
               </StyledComponent>
@@ -2057,7 +2057,7 @@ exports[`Pagination Arrow <ArrowRight /> renders correctly 1`] = `
                 forwardedRef={null}
               >
                 <i
-                  className="icon-chevronRight  c1"
+                  className="c1 icon-chevronRight "
                 />
               </StyledComponent>
             </styled.i>
@@ -2755,7 +2755,7 @@ exports[`Pagination Arrow <ArrowRight /> renders correctly when disabled 1`] = `
                 forwardedRef={null}
               >
                 <i
-                  className="icon-chevronRight  c1"
+                  className="c1 icon-chevronRight "
                   color="blueSmoke"
                 />
               </StyledComponent>

src/molecules/Pagination/__snapshots__/Compact.test.tsx.snap

@@ -787,7 +787,7 @@ exports[`Pagination <Compact /> it renders correctly when a middle page is activ
                   forwardedRef={null}
                 >
                   <i
-                    className="icon-ellipsisHorizontal  c2"
+                    className="c2 icon-ellipsisHorizontal "
                   />
                 </StyledComponent>
               </styled.i>
@@ -1257,7 +1257,7 @@ exports[`Pagination <Compact /> it renders correctly when a middle page is activ
                   forwardedRef={null}
                 >
                   <i
-                    className="icon-ellipsisHorizontal  c2"
+                    className="c2 icon-ellipsisHorizontal "
                   />
                 </StyledComponent>
               </styled.i>
@@ -2372,7 +2372,7 @@ exports[`Pagination <Compact /> it renders correctly when the first page is acti
                   forwardedRef={null}
                 >
                   <i
-                    className="icon-ellipsisHorizontal  c3"
+                    className="c3 icon-ellipsisHorizontal "
                   />
                 </StyledComponent>
               </styled.i>
@@ -3234,7 +3234,7 @@ exports[`Pagination <Compact /> it renders correctly when the last page is activ
                   forwardedRef={null}
                 >
                   <i
-                    className="icon-ellipsisHorizontal  c2"
+                    className="c2 icon-ellipsisHorizontal "
                   />
                 </StyledComponent>
               </styled.i>

src/molecules/Pagination/__snapshots__/Ellipsis.test.tsx.snap

@@ -652,7 +652,7 @@ exports[`Pagination <Ellipsis /> renders correctly 1`] = `
                 forwardedRef={null}
               >
                 <i
-                  className="icon-ellipsisHorizontal  c1"
+                  className="c1 icon-ellipsisHorizontal "
                 />
               </StyledComponent>
             </styled.i>

src/molecules/Pagination/__snapshots__/Pagination.test.tsx.snap

@@ -506,7 +506,7 @@ exports[`<Pagination /> renders correctly 1`] = `
             "attrs": Array [],
             "componentStyle": ComponentStyle {
               "componentId": "sc-bxivhb",
-              "isStatic": true,
+              "isStatic": false,
               "lastClassName": "c0",
               "rules": Array [
                 "
@@ -819,7 +819,7 @@ exports[`<Pagination /> renders correctly 1`] = `
                         forwardedRef={null}
                       >
                         <i
-                          className="icon-chevronLeft  c2"
+                          className="c2 icon-chevronLeft "
                         />
                       </StyledComponent>
                     </styled.i>
@@ -1420,7 +1420,7 @@ exports[`<Pagination /> renders correctly 1`] = `
                           forwardedRef={null}
                         >
                           <i
-                            className="icon-ellipsisHorizontal  c2"
+                            className="c2 icon-ellipsisHorizontal "
                           />
                         </StyledComponent>
                       </styled.i>
@@ -1781,7 +1781,7 @@ exports[`<Pagination /> renders correctly 1`] = `
                         forwardedRef={null}
                       >
                         <i
-                          className="icon-chevronRight  c2"
+                          className="c2 icon-chevronRight "
                         />
                       </StyledComponent>
                     </styled.i>

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,8 @@ interface Props {
   value?: any;
   disabled?: boolean;
   error?: boolean;
-  onClick: (value: any) => void;
+  onClick: (value: any, title: any) => void;
+  'data-qaid'?: string;
 }
 
 const OptionStyled = styled.li<Props>`
@@ -30,9 +31,18 @@ const OptionStyled = styled.li<Props>`
   `}
 `;
 
-const Option: React.SFC<Props> = ({ value, onClick, children }) => {
-  const onChange = () => onClick(value);
-  return <OptionStyled onClick={onChange}>{children}</OptionStyled>;
+const Option: React.SFC<Props> = ({
+  value,
+  onClick,
+  children,
+  'data-qaid': qaId
+}) => {
+  const onChange = () => onClick(value, children);
+  return (
+    <OptionStyled onClick={onChange} data-qaid={qaId}>
+      {children}
+    </OptionStyled>
+  );
 };
 
 export default Option;

src/molecules/Select/README.md

@@ -32,15 +32,17 @@ Table below contains all types of props available in the Select component
 | positionFixed         | `Boolean`  | `false`         | Set to true when the Select is positioned fixed on the screen. Otherwise the Menu will scroll away
 | disableScrollWhenOpen | `Boolean`  |                 | Disables body scroll when select is open
 | id                    | `string`   |                 | Default HTML id prop to identify the element
+| data-qaid             | `string`   |                 | Optional prop for testing purposes
 
 ## Option Props
 
 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
 | onClick       | `Function`   |                 | The function that's executed when clicking this option
+| data-qaid             | `string`   |                 | Optional prop for testing purposes

src/molecules/Select/__snapshots__/Input.test.tsx.snap

@@ -807,7 +807,7 @@ exports[`Select <Input /> it renders correctly 1`] = `
                       forwardedRef={null}
                     >
                       <i
-                        className="icon-caretDown  c3"
+                        className="c3 icon-caretDown "
                       />
                     </StyledComponent>
                   </styled.i>

src/molecules/Select/__snapshots__/Select.test.tsx.snap

@@ -769,7 +769,7 @@ exports[`Select renders correctly 1`] = `
               class="c2"
             >
               <i
-                class="icon-caretDown  c3"
+                class="c3 icon-caretDown "
               />
             </button>
           </div>,
@@ -825,7 +825,7 @@ exports[`Select renders correctly 1`] = `
                   class="c2"
                 >
                   <i
-                    class="icon-caretDown  c3"
+                    class="c3 icon-caretDown "
                   />
                 </button>
               </div>,
@@ -1156,7 +1156,7 @@ exports[`Select renders correctly 1`] = `
                         forwardedRef={null}
                       >
                         <i
-                          className="icon-caretDown  c3"
+                          className="c3 icon-caretDown "
                         />
                       </StyledComponent>
                     </styled.i>