Merge pull request #166 from vrk-kpa/develop

Release 0.2.5

.styleguidist/spacing.md

@@ -1,5 +1,5 @@
 ```js noeditor
-import styled from '@emotion/styled';
+import { default as styled } from 'styled-components';
 import { colors } from '../src/core/theme/colors';
 import { element, fonts } from '../src/core/theme/reset';
 import { spacing, spacingTokens } from '../src/core/theme/spacing';

.styleguidist/typography.md

@@ -1,7 +1,7 @@
 Suomifi-styleguide typography
 
 ```js noeditor
-import styled from '@emotion/styled';
+import { default as styled } from 'styled-components';
 import { Text } from '../src/core/Text/Text';
 import { Heading } from '../src/core/Heading/Heading';
 import { typography, fontFamily } from '../src/core/theme/typography';

jest.config.js

@@ -38,7 +38,6 @@ module.exports = {
 
   setupFilesAfterEnv: [require.resolve('./jest.setup.js')],
 
-  snapshotSerializers: ['jest-emotion'],
   moduleNameMapper: {
     '\\.css$': '<rootDir>/jest.styleMock.js',
   },

jest.setup.js

@@ -6,3 +6,5 @@ require('jest-dom/extend-expect');
 
 // this is basically: afterEach(cleanup)
 require('react-testing-library/cleanup-after-each');
+
+require('jest-styled-components');

package.json

@@ -1,6 +1,6 @@
 {
   "name": "suomifi-ui-components",
-  "version": "0.2.4",
+  "version": "0.2.5",
   "description": "Suomi.fi UI component library",
   "main": "dist/umd/index.js",
   "module": "dist/esm/index.js",
@@ -34,8 +34,8 @@
     "test:tslint": "tslint --project tsconfig.json 'src/**/*.tsx'",
     "test:eslint": "eslint --config .eslintrc src/**/*.tsx",
     "test:stylelint": "stylelint ./src/**/*.{ts,tsx}",
-    "prettier": "prettier --write 'src/**/*.{js,jsx,ts,tsx,json,css,scss,md}'",
-    "prettier:check": "prettier-check 'src/**/*.{js,jsx,ts,tsx,json,css,scss,md}'",
+    "prettier": "prettier --write \"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}\"",
+    "prettier:check": "prettier-check \"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}\"",
     "validate": "npm-run-all test test:lint prettier:check",
     "prebuild": "rimraf dist",
     "build": "npm-run-all build:umd build:es2015 build:esm copyassets",
@@ -55,8 +55,9 @@
     "@types/classnames": "2.2.6",
     "@types/jest": "23.3.9",
     "@types/jest-axe": "2.2.3",
-    "@types/react": "16.8.15",
-    "@types/react-dom": "16.0.9",
+    "@types/react": "16.9.1",
+    "@types/react-dom": "16.8.5",
+    "@types/styled-components": "4.1.18",
     "@types/uuid": "3.4.5",
     "awesome-typescript-loader": "5.2.1",
     "clipboard-copy": "3.0.0",
@@ -72,7 +73,7 @@
     "jest": "24.8.0",
     "jest-axe": "3.1.1",
     "jest-dom": "2.1.1",
-    "jest-emotion": "10.0.7",
+    "jest-styled-components": "6.3.3",
     "lint-staged": "8.0.5",
     "npm-run-all": "4.1.5",
     "prettier": "1.15.2",
@@ -113,7 +114,8 @@
     "normalize.cssinjs": "1.0.5",
     "polished": "3.4.0",
     "react-svg": "7.2.2",
-    "suomifi-icons": "0.0.7",
+    "styled-components": "4.3.2",
+    "suomifi-icons": "0.0.8",
     "uuid": "3.3.2"
   },
   "peerDependencies": {

src/components/Button/__snapshots__/Button.test.tsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`calling render with the same component on the same container does not remount 1`] = `
-.emotion-0 {
+.c0 {
   line-height: 1.15;
   -ms-text-size-adjust: 100%;
   -webkit-text-size-adjust: 100%;
@@ -24,31 +24,31 @@ exports[`calling render with the same component on the same container does not r
   cursor: pointer;
 }
 
-.emotion-0:-moz-focusring {
+.c0:-moz-focusring {
   outline: 1px dotted ButtonText;
 }
 
-.emotion-0::-moz-focus-inner {
+.c0::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.emotion-0::-webkit-file-upload-button {
+.c0::-webkit-file-upload-button {
   -webkit-appearance: button;
   font: inherit;
 }
 
-.emotion-0::-webkit-inner-spin-button {
+.c0::-webkit-inner-spin-button {
   height: auto;
 }
 
-.emotion-0::-webkit-outer-spin-button {
+.c0::-webkit-outer-spin-button {
   height: auto;
 }
 
 <button
   aria-disabled="false"
-  class="fi-button emotion-0"
+  class="fi-button c0"
   data-testid="button"
   tabindex="0"
   type="button"

src/components/Dropdown/Dropdown.tsx

@@ -52,6 +52,7 @@ export interface DropdownProps {
   dropdownButtonProps?: OptionalMenuButtonProps;
   /** Properties given to dropdown's list-component, className etc. */
   dropdownListProps?: OptionalMenuListProps;
+  menuListComponent?: React.ComponentType<OptionalMenuListProps>;
   /** Properties given to dropdown's item-component, className etc. */
   dropdownItemProps?: OptionalMenuItemProps;
   /** DropdownItems */
@@ -97,6 +98,7 @@ export class Dropdown extends Component<DropdownProps> {
       className,
       dropdownButtonProps = {},
       dropdownListProps = {},
+      menuListComponent: MenuListComponentReplace,
       dropdownItemProps = {},
       changeNameToSelection = true,
       ...passProps
@@ -127,9 +129,23 @@ export class Dropdown extends Component<DropdownProps> {
           <MenuButton {...passDropdownButtonProps}>
             {!!selectedName ? selectedName : name}
           </MenuButton>
-          <MenuList {...passDropdownListProps}>
-            {this.list(children, changeNameToSelection, passDropdownItemProps)}
-          </MenuList>
+          {!!MenuListComponentReplace ? (
+            <MenuListComponentReplace {...passDropdownListProps}>
+              {this.list(
+                children,
+                changeNameToSelection,
+                passDropdownItemProps,
+              )}
+            </MenuListComponentReplace>
+          ) : (
+            <MenuList {...passDropdownListProps}>
+              {this.list(
+                children,
+                changeNameToSelection,
+                passDropdownItemProps,
+              )}
+            </MenuList>
+          )}
         </Menu>
       </HtmlSpan>
     );

src/components/Icon/Icon.tsx

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import styled from '@emotion/styled';
+import { default as styled } from 'styled-components';
 import { Svg, SvgProps } from '../Svg/Svg';
 import classnames from 'classnames';
 

src/components/Menu/Menu.tsx

@@ -13,7 +13,7 @@ import { logger } from '../../utils/logger';
 import '@reach/menu-button/styles.css';
 import { Omit } from '../../utils/typescript';
 
-export { MenuItem, MenuLink };
+export { MenuList, MenuListProps, MenuItem, MenuLink };
 
 const baseClassName = 'fi-menu';
 export interface MenuItemProps {
@@ -49,6 +49,7 @@ export interface MenuProps {
   menuButtonClassName?: string;
   /** Properties given to Menu's List-component, className etc. */
   menuListProps?: OptionalMenuListProps;
+  menuListComponent?: React.ComponentType<OptionalMenuListProps>;
   /** Menu items: MenuItem or MenuLink */
   children?: Array<React.ReactElement<MenuListItemsProps>>;
 }
@@ -60,7 +61,8 @@ export class Menu extends Component<MenuProps> {
       name,
       className,
       menuButtonClassName,
-      menuListProps,
+      menuListProps = {},
+      menuListComponent: MenuListComponentReplace,
       ...passProps
     } = this.props;
 
@@ -75,7 +77,13 @@ export class Menu extends Component<MenuProps> {
           <MenuButton {...passProps} className={menuButtonClassName}>
             {name}
           </MenuButton>
-          <MenuList {...menuListProps}>{children}</MenuList>
+          {!!MenuListComponentReplace ? (
+            <MenuListComponentReplace {...menuListProps}>
+              {children}
+            </MenuListComponentReplace>
+          ) : (
+            <MenuList {...menuListProps}>{children}</MenuList>
+          )}
         </ReachMenu>
       </HtmlSpan>
     );

src/components/Panel/Panel.tsx

@@ -1,5 +1,5 @@
 import React, { Component, ReactNode } from 'react';
-import styled from '@emotion/styled';
+import { default as styled } from 'styled-components';
 import { HtmlDiv, HtmlDivProps } from '../../reset';
 import classnames from 'classnames';
 

src/components/Panel/PanelExpansion.tsx

@@ -1,5 +1,5 @@
 import React, { Component, ReactNode, Fragment } from 'react';
-import styled from '@emotion/styled';
+import { default as styled } from 'styled-components';
 import { Panel, PanelProps, baseClassName, StyledPanel } from './Panel';
 import { Button, ButtonProps } from '../Button/Button';
 import { allStates } from '../../utils/css/pseudo';

src/components/Panel/PanelExpansionGroup.tsx

@@ -1,5 +1,5 @@
 import React, { Component, ReactElement } from 'react';
-import styled from '@emotion/styled';
+import { default as styled } from 'styled-components';
 import { HtmlDiv, HtmlDivProps } from '../../reset';
 import classnames from 'classnames';
 import { PanelExpansionProps } from './PanelExpansion';

src/components/Svg/Svg.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import styled from '@emotion/styled';
+import { default as styled } from 'styled-components';
 import ReactSVG from 'react-svg';
 import { ariaLabelOrHidden } from '../utils/aria';
 

src/components/Svg/__snapshots__/Svg.test.tsx.snap

@@ -1,13 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`calling render with the same component on the same container does not remount 1`] = `
-.emotion-0 {
+.c0 {
   max-width: 100%;
 }
 
 <div
   aria-hidden="true"
-  class="emotion-0"
+  class="c0"
   data-testid="svg"
   role="img"
 >

src/components/Visually-hidden/Visually-hidden.tsx

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import styled from '@emotion/styled';
+import { default as styled } from 'styled-components';
 import classnames from 'classnames';
 import { HtmlSpan, HtmlSpanProps } from '../../reset/HtmlSpan/HtmlSpan';
 

src/components/utils/aria.ts

@@ -2,7 +2,7 @@ const ifAriaNoLabel = (ariaLabel?: string) => !!ariaLabel || ariaLabel === '';
 
 export const ariaLabelOrHidden = (ariaLabel?: string) => {
   return ifAriaNoLabel(ariaLabel)
-    ? { 'aria-label': ariaLabel }
+    ? { 'aria-label': ariaLabel, role: 'img' }
     : { 'aria-hidden': true };
 };
 

src/core/Block/Block.baseStyles.ts

@@ -1,4 +1,4 @@
-import { css } from '@emotion/core';
+import { css } from 'styled-components';
 import { suomifiTheme } from '../theme';
 import { BlockProps } from './Block';
 import { element, fonts } from '../theme/reset';

src/core/Block/Block.tsx

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import styled from '@emotion/styled';
+import { default as styled } from 'styled-components';
 import { withDefaultTheme } from '../theme/utils';
 import { ThemeComponent } from '../theme';
 import {