Release v7.1.0 (#239)

* Add search icon (#226) * add an error & loading state to the Select (#235) * Auto-Scale select on open (#236) * add initialWidth prop to select for auto-scaling * re-order navbar items in mobile view (#237) Co-authored-by: Jamie <[email protected]> Co-authored-by: Daniel <[email protected]>
sofarsounds · Feb 14, 2020 · 10c871d · 10c871d
1 parent f77ee8e
commit 10c871d
Show file tree

Hide file tree

Showing 18 changed files with 447 additions and 163 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -48,4 +48,3 @@ workflows:
             branches:
               only:
                 - master
-
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@sofarsounds/maestro",
-  "version": "7.0.0",
+  "version": "7.1.0",
   "description": "The official sofar sounds react uikit library",
   "main": "dist/index.js",
   "scripts": {

diff --git a/src/atoms/Icon/index.tsx b/src/atoms/Icon/index.tsx
@@ -58,13 +58,15 @@ interface IconProps {
   size?: string;
   color?: Colors;
   className?: string;
+  title?: string;
   'data-qaid'?: string;
   id?: string;
 }
 const Icon: React.SFC<IconProps> = ({
   name,
   size,
   color,
+  title,
   className = '',
   'data-qaid': qaId,
   id
@@ -74,6 +76,7 @@ const Icon: React.SFC<IconProps> = ({
     className={`icon-${name} ${className}`}
     size={size}
     color={color}
+    title={title}
     data-qaid={qaId}
   />
 );

diff --git a/src/atoms/Spinner/README.md b/src/atoms/Spinner/README.md
@@ -0,0 +1,20 @@
+# Spinner
+
+To implement `Spinner` into your project you'll need to add this import
+```js
+import { Spinner } from '@sofarsounds/maestro'
+```
+
+After adding the import you can use it simply like this
+```html
+<Spinner />
+```
+
+## Props
+Table below contains all types of props available in the Spinner component
+
+| Name          | Type      | Default         | Description                      |
+| :------------ | :-----    | :-------------- | :------------------------------- |
+| size          | `string`  | `25px`          | The size of the spinner in pixels
+| invert        | `Boolean` | `false`         | Whether the invert the color of the spinner
+| data-qaid     | `string`  |                 | Optional prop for testing purposes
diff --git a/src/atoms/Spinner/index.tsx b/src/atoms/Spinner/index.tsx
@@ -0,0 +1,36 @@
+import styled, { css, keyframes } from '../../lib/styledComponents';
+
+const load8 = keyframes`
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+`;
+
+interface Props {
+  size?: string;
+  invert?: boolean;
+  'data-qaid'?: string;
+}
+
+export default styled.div<Props>`
+  ${({ theme, size = '25px', invert }) => css`
+    &:after {
+      border-radius: 50%;
+      width: 10em;
+      height: 10em;
+    }
+    position: relative;
+    border-top: 2px solid transparent;
+    border-right: 2px solid transparent;
+    border-bottom: 2px solid transparent;
+    border-left: 2px solid ${theme.colors[invert ? 'whiteDenim' : 'macyGrey']};
+    transform: translateZ(0);
+    animation: ${load8} 0.5s infinite linear;
+    border-radius: 50%;
+    width: ${size};
+    height: ${size};
+  `};
+`;
diff --git a/src/index.tsx b/src/index.tsx
@@ -21,6 +21,7 @@ export { default as Icons } from './atoms/Icon/registry';
 export { default as Textfield } from './atoms/Textfield';
 export { default as Textarea } from './atoms/Textarea';
 export { default as Spacer } from './atoms/Spacer';
+export { default as Spinner } from './atoms/Spinner';
 export { default as Radio } from './atoms/Radio';
 export { default as Checkbox } from './atoms/Checkbox';
 export { default as Responsive } from './atoms/Responsive';

diff --git a/src/molecules/Navbar/Collapsible.tsx b/src/molecules/Navbar/Collapsible.tsx
@@ -11,16 +11,16 @@ export default styled.div<WrapperProps>`
     ${open &&
       css`
         display: flex;
-        flex-direction: column-reverse;
-        justify-content: flex-end;
+        flex-direction: column;
+        justify-content: flex-start;
         position: fixed;
         top: ${theme.dimensions.navbarHeight.xs};
         left: 0;
         right: 0;
         bottom: 0;
         background: #000;
         border-top: 1px solid ${theme.colors.paintItBlack};
-        padding: 0 15px;
+        padding: ${theme.ruler[4]}px;
       `}
 
     ${theme.media.md`

diff --git a/src/molecules/Navbar/NavbarContainer.tsx b/src/molecules/Navbar/NavbarContainer.tsx
@@ -17,24 +17,25 @@ export default styled.div<NavbarContainerProps>`
     align-items: center;
     justify-content: center;
     z-index: ${theme.zIndex.navbar};
-      ${position === 'absolute' &&
-        css`
-          position: absolute;
-        `}
-      ${position === 'fixed' &&
-        css`
-          position: fixed;
-          top: 0;
-          left: 0;
-          right: 0;
-        `}
-      ${transparent &&
-        theme.media.md`
+    ${position === 'absolute' &&
+      css`
+        position: absolute;
+      `};
+    ${position === 'fixed' &&
+      css`
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+      `};
+    ${transparent &&
+      theme.media.md`
         background: transparent;
-      `}
-      ${theme.media.md`
+      `};
+    ${theme.media.md`
       height: ${theme.dimensions.navbarHeight.md};
-    `} ${theme.media.lg`
+    `};
+    ${theme.media.lg`
       height: ${theme.dimensions.navbarHeight.lg};
     `};
   `}

diff --git a/src/molecules/Select/Input.test.tsx b/src/molecules/Select/Input.test.tsx
@@ -5,7 +5,7 @@ import Icon from '../../atoms/Icon';
 import Input from './Input';
 
 const setup = (props: any) =>
-  renderWithTheme(<Input data-qaid="test" {...props} />);
+  renderWithTheme(<Input data-qaid="test" state="ready" {...props} />);
 
 describe('<Select />', () => {
   describe('<Input />', () => {
@@ -82,6 +82,38 @@ describe('<Select />', () => {
       expect(queryByTestId('test-clear')).not.toBeInTheDocument();
     });
 
+    it('renders a loading spinner and no clear button when select state is loading', () => {
+      const mockClear = jest.fn();
+      const { queryByTestId } = setup({
+        state: 'loading',
+        inputProps: {
+          readOnly: false,
+          onChange: () => {},
+          onClear: mockClear,
+          value: ''
+        }
+      });
+
+      expect(queryByTestId('test-spinner')).toBeInTheDocument();
+      expect(queryByTestId('test-clear')).not.toBeInTheDocument();
+    });
+
+    it('renders an error icon and no clear button when select state is error', () => {
+      const mockClear = jest.fn();
+      const { queryByTestId } = setup({
+        state: 'error',
+        inputProps: {
+          readOnly: false,
+          onChange: () => {},
+          onClear: mockClear,
+          value: ''
+        }
+      });
+
+      expect(queryByTestId('test-error-icon')).toBeInTheDocument();
+      expect(queryByTestId('test-clear')).not.toBeInTheDocument();
+    });
+
     it('renders a clear button when onClear is given and input has a value', () => {
       const mockClear = jest.fn();
       const { queryByTestId } = setup({
@@ -110,6 +142,40 @@ describe('<Select />', () => {
         });
       });
 
+      it('has the correct style attributes when initialWidth is provided', () => {
+        const { container } = setup({ initialWidth: '200px' });
+        const wrapper = container.firstChild;
+
+        checkStyleRules(wrapper, {
+          width: '100%',
+          'max-width': '200px'
+        });
+
+        checkStyleRules(
+          wrapper,
+          {
+            'max-width': '100%'
+          },
+          { modifier: ':hover' }
+        );
+
+        checkStyleRules(
+          wrapper,
+          {
+            'max-width': '100%'
+          },
+          { modifier: ':focus' }
+        );
+
+        checkStyleRules(
+          wrapper,
+          {
+            'max-width': '100%'
+          },
+          { modifier: ':active' }
+        );
+      });
+
       it('has a pointer cursor when readOnly is true', () => {
         const { container } = setup({
           inputProps: { readOnly: true }