Release v0.5.0

.github/workflows/lint.yml

@@ -1,9 +1,9 @@
-name: 'my-workflow'
+name: 'Lint check'
 on: [pull_request]
 
 jobs:
   eslint:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
-      - uses: bradennapier/eslint-plus-action@v3.4.0
+      - uses: gnosis/safe-react-eslint-plus-action@main

.storybook/gnosisTheme.js

@@ -10,11 +10,7 @@ export default create({
   appBg: 'white',
   appContentBg: 'white',
   appBorderColor: 'grey',
-  appBorderRadius: 4,
-
-  // Typography
-  fontBase: '"Roboto", sans-serif',
-  fontCode: 'monospace',
+  appBorderRadius: 4,  
 
   // Text colors
   textColor: '#333333',

.storybook/main.js

@@ -1,7 +1,6 @@
 module.exports = {
   stories: ["../src/**/*.stories.tsx"],
   addons: [
-    "@storybook/preset-create-react-app",
     "@storybook/addon-actions",
     "@storybook/addon-links",
     "@storybook/addon-docs",

.storybook/preview.js

@@ -6,15 +6,15 @@ import { ThemeProvider } from 'styled-components';
 import theme from '../src/theme';
 import GlobalStyles from '../src/global';
 
-addDecorator(storyFn => (
-  <ThemeProvider theme={theme}>
+addDecorator((storyFn) => (
+  <>
     <GlobalStyles />
-    {storyFn()}
-  </ThemeProvider>
+    <ThemeProvider theme={theme}>{storyFn()}</ThemeProvider>
+  </>
 ));
 
 addParameters({
   options: {
-    showRoots: false
-  }
+    showRoots: false,
+  },
 });

.storybook/webpack.config.js

@@ -11,6 +11,18 @@ module.exports = ({ config }) => {
     ]
   });
 
+  // There was a problem with the fonts not being loaded
+  // I took the fix from here: https://github.com/storybookjs/storybook/issues/5936#issuecomment-532902187
+  config.module.rules = config.module.rules.map(rule => {
+    if (rule.test && rule.test.toString().includes('woff')) {
+      return {
+        ...rule,
+        test: /\.(svg|ico|jpg|jpeg|png|gif|webp|cur|ani|pdf)(\?.*)?$/
+      }
+    }
+    return rule
+  })
+
   config.module.rules.push({
     test: /\.(woff|woff2|eot|ttf)$/,
     use: [

.travis.yml

@@ -1,12 +1,14 @@
 if: (branch = master) OR (branch = development) OR (type = pull_request) OR (tag IS present)
+os: linux
+dist: bionic
 language: node_js
 node_js: '12'
+cache:
+  yarn: true
+
 before_install:
-  - yarn install
   # Needed to deploy pull request and releases
   - pip install awscli --upgrade --user
-cache:
-  yarn: true
 script: |
   echo "Skip tests" # no test cases for the project
 
@@ -49,7 +51,7 @@ deploy:
     secret_access_key: $AWS_SECRET_ACCESS_KEY
     skip_cleanup: true
     local_dir: storybook-static
-    upload-dir: current
+    upload_dir: current
     region: eu-central-1
     on:
       branch: master
@@ -61,7 +63,7 @@ deploy:
     secret_access_key: $AWS_SECRET_ACCESS_KEY
     skip_cleanup: true
     local_dir: storybook-static
-    upload-dir: releases/$TRAVIS_TAG/website
+    upload_dir: releases/$TRAVIS_TAG/website
     region: eu-central-1
     on:
       tags: true
@@ -73,7 +75,7 @@ deploy:
     secret_access_key: $AWS_SECRET_ACCESS_KEY
     skip_cleanup: true
     local_dir: dist
-    upload-dir: releases/$TRAVIS_TAG/npmlib
+    upload_dir: releases/$TRAVIS_TAG/npmlib
     region: eu-central-1
     on:
       tags: true

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gnosis.pm/safe-react-components",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "Gnosis UI components",
   "main": "dist/index.min.js",
   "typings": "dist/index.d.ts",
@@ -14,67 +14,66 @@
     "types": "yarn tsc",
     "start": "rimraf dist && webpack --mode production --watch",
     "build": "rimraf dist && webpack --mode production",
-    "build-storybook": "build-storybook -s public --docs",
-    "storybook": "start-storybook -p 9009 -s public --docs",
+    "build-storybook": "build-storybook --docs",
+    "storybook": "start-storybook -p 9009 --docs",
     "lint:check": "eslint './src/**/*.{js,jsx,ts,tsx}'",
     "prepare": "yarn build"
   },
   "author": "Gnosis (https://gnosis.pm)",
   "license": "MIT",
   "dependencies": {
     "classnames": "^2.2.6",
-    "polished": "3.6.5",
-    "react-docgen-typescript-loader": "^3.7.2",
-    "react-media": "^1.10.0",
-    "url-loader": "^4.1.0"
+    "react-media": "^1.10.0"
   },
   "devDependencies": {
-    "@material-ui/core": "4.10.2",
-    "@storybook/addon-actions": "5.3.19",
-    "@storybook/addon-docs": "5.3.19",
-    "@storybook/addon-links": "5.3.19",
-    "@storybook/addons": "5.3.19",
-    "@storybook/preset-create-react-app": "2.1.2",
-    "@storybook/react": "5.3.19",
-    "@testing-library/jest-dom": "5.11.2",
-    "@testing-library/react": "10.4.7",
-    "@testing-library/user-event": "12.0.17",
-    "@types/big.js": "^4.0.5",
-    "@types/classnames": "^2.2.10",
-    "@types/jest": "26.0.7",
-    "@types/material-ui": "^0.21.7",
-    "@types/node": "14.0.27",
-    "@types/react": "16.9.43",
-    "@types/react-dom": "16.9.8",
-    "@types/styled-components": "5.1.1",
-    "@types/yup": "0.29.3",
-    "@typescript-eslint/eslint-plugin": "^3.7.1",
-    "@typescript-eslint/parser": "^3.7.1",
+    "@material-ui/core": "^4.11.2",
+    "@storybook/addon-actions": "^6.1.0",
+    "@storybook/addon-docs": "^6.1.0",
+    "@storybook/addon-links": "^6.1.0",
+    "@storybook/addons": "^6.1.0",
+    "@storybook/react": "^6.1.0",
+    "@testing-library/jest-dom": "^5.11.5",
+    "@testing-library/react": "^11.1.0",
+    "@testing-library/user-event": "^12.2.0",
+    "@types/classnames": "^2.2.11",
+    "@types/jest": "^26.0.0",
+    "@types/material-ui": "^0.21.8",
+    "@types/node": "^14.14.0",
+    "@types/react": "^16.9.55",
+    "@types/react-dom": "^16.9.0",
+    "@types/styled-components": "^5.1.0",
+    "@typescript-eslint/eslint-plugin": "^4.6.1",
+    "@typescript-eslint/parser": "^4.6.1",
     "awesome-typescript-loader": "^5.2.1",
     "babel-eslint": "^10.0.3",
-    "babel-loader": "8.1.0",
-    "copy-webpack-plugin": "^5.1.1",
-    "eslint": "7.5.0",
-    "eslint-config-prettier": "6.11.0",
-    "eslint-plugin-prettier": "3.1.4",
-    "eslint-plugin-react": "7.20.5",
-    "eslint-plugin-react-hooks": "4.0.8",
+    "babel-loader": "^8.1.0",
+    "copy-webpack-plugin": "^6.3.0",
+    "eslint": "^7.12.0",
+    "eslint-config-prettier": "^6.15.0",
+    "eslint-plugin-prettier": "^3.1.0",
+    "eslint-plugin-react": "^7.21.5",
+    "eslint-plugin-react-hooks": "^4.2.0",
     "ethereum-blockies-base64": "^1.0.2",
-    "file-loader": "^6.0.0",
-    "prettier": "2.0.5",
-    "react": "16.13.1",
-    "react-dom": "16.13.1",
+    "file-loader": "^6.2.0",
+    "prettier": "^2.1.0",
+    "react": "^16.13.0",
+    "react-docgen-typescript-loader": "^3.7.2",
+    "react-dom": "^16.13.0",
     "rimraf": "^3.0.2",
-    "styled-components": "5.1.1",
-    "typescript": "3.9.7",
+    "styled-components": "^5.2.1",
+    "typescript": "^4.0.5",
+    "url-loader": "^4.1.1",
     "webpack": "4.43.0",
     "webpack-cli": "^3.3.10",
-    "webpack-node-externals": "^1.7.2"
+    "webpack-node-externals": "^2.5.2"
+  },
+  "resolutions": {
+    "@babel/core": "^7.12.0"
   },
   "peerDependencies": {
     "@material-ui/core": "4.X.X",
-    "react": "16.x.x",
-    "react-dom": "16.x.x",
+    "react": "16.x.x || 17.x.x",
+    "react-dom": "16.x.x || 17.x.x",
     "styled-components": "5.x.x"
   },
   "eslintConfig": {

src/colors.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
-import { parseToHsl } from 'polished';
+import { getLuminance } from '@material-ui/core/styles/colorManipulator';
 
 import { Text, theme } from './index';
 
@@ -26,7 +26,7 @@ const ColorDisplay = styled.div<{ color: string }>`
 `;
 
 export default {
-  title: 'Colors',
+  title: 'Utils/Colors',
 };
 
 export const ColorsSample = (): React.ReactElement => {
@@ -44,7 +44,7 @@ export const ColorsSample = (): React.ReactElement => {
     }, [])
     .sort(
       ({ code: colorA }, { code: colorB }) =>
-        parseToHsl(colorA).lightness - parseToHsl(colorB).lightness
+        getLuminance(colorA) - getLuminance(colorB)
     );
 
   return (

src/dataDisplay/Accordion/accordion.stories.tsx

@@ -0,0 +1,125 @@
+import React from 'react';
+
+import { Accordion, AccordionSummary, AccordionDetails } from './index';
+import { Card, Text, IconText } from '../../index';
+
+export default {
+  title: 'Data Display/Accordion',
+  component: Accordion,
+  parameters: {
+    componentSubtitle: 'Expansion panels with Summary and Detail content.',
+  },
+};
+
+export const SimpleAccordion = (): React.ReactElement => (
+  <Card>
+    <Accordion>
+      <AccordionSummary>
+        <IconText
+          iconSize="sm"
+          textSize="xl"
+          iconType="code"
+          text="Transaction 1"
+        />
+      </AccordionSummary>
+      <AccordionDetails>
+        <Text size="lg">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
+          malesuada lacus ex, sit amet blandit leo lobortis eget.
+        </Text>
+      </AccordionDetails>
+    </Accordion>
+    <Accordion>
+      <AccordionSummary>
+        <IconText
+          iconSize="sm"
+          textSize="xl"
+          iconType="code"
+          text="Transaction 2"
+        />
+      </AccordionSummary>
+      <AccordionDetails>
+        <Text size="lg">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
+          malesuada lacus ex, sit amet blandit leo lobortis eget.
+        </Text>
+      </AccordionDetails>
+    </Accordion>
+    <Accordion>
+      <AccordionSummary>
+        <IconText
+          iconSize="sm"
+          textSize="xl"
+          iconType="code"
+          text="Transaction 3"
+        />
+      </AccordionSummary>
+      <AccordionDetails>
+        <Text size="lg">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
+          malesuada lacus ex, sit amet blandit leo lobortis eget.
+        </Text>
+      </AccordionDetails>
+    </Accordion>
+  </Card>
+);
+
+export const CompactAccordion = (): React.ReactElement => (
+  <div
+    style={{
+      display: 'flex',
+      height: '100%',
+      justifyContent: 'center',
+      alignItems: 'center',
+      flexDirection: 'column',
+    }}>
+    <Accordion compact>
+      <AccordionSummary>
+        <IconText
+          iconSize="sm"
+          textSize="xl"
+          iconType="code"
+          text="Transaction 1"
+        />
+      </AccordionSummary>
+      <AccordionDetails>
+        <Text size="lg">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
+          malesuada lacus ex, sit amet blandit leo lobortis eget.
+        </Text>
+      </AccordionDetails>
+    </Accordion>
+    <Accordion compact>
+      <AccordionSummary>
+        <IconText
+          iconSize="sm"
+          textSize="xl"
+          iconType="code"
+          text="Transaction 2"
+        />
+      </AccordionSummary>
+      <AccordionDetails>
+        <Text size="lg">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
+          malesuada lacus ex, sit amet blandit leo lobortis eget.
+        </Text>
+      </AccordionDetails>
+    </Accordion>
+    <Accordion compact>
+      <AccordionSummary>
+        <IconText
+          iconSize="sm"
+          textSize="xl"
+          iconType="code"
+          text="Transaction 3"
+        />
+      </AccordionSummary>
+      <AccordionDetails>
+        <Text size="lg">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
+          malesuada lacus ex, sit amet blandit leo lobortis eget.
+        </Text>
+      </AccordionDetails>
+    </Accordion>
+  </div>
+);