diff --git a/.storybook/preview.js b/.storybook/preview.js index c4b605e4..b75cc69a 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -4,11 +4,9 @@ import { addParameters } from '@storybook/react'; import { ThemeProvider } from 'styled-components'; import theme from '../src/theme'; -import GlobalStyles from '../src/global'; addDecorator((storyFn) => ( <> - {storyFn()} )); diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js index fdfb9dbf..0b5831dd 100644 --- a/.storybook/webpack.config.js +++ b/.storybook/webpack.config.js @@ -21,18 +21,6 @@ module.exports = ({ config }) => { return rule }) - config.module.rules.push({ - test: /\.(woff|woff2|eot|ttf)$/, - use: [ - { - loader: 'file-loader', - query: { - name: '[name].[ext]' - } - } - ] - }); - config.module.rules.push({ test: /\.(svg|png|jpg)$/i, use: [ diff --git a/README.md b/README.md index 96b2b231..8b577ade 100644 --- a/README.md +++ b/README.md @@ -44,46 +44,6 @@ export default () => ( ); ``` -### Using the same fonts as Gnosis Safe - -If you want your Safe App to have the same fonts as the one used by Gnosis Safe you need to do the following. - -```js -import { createGlobalStyle } from 'styled-components'; -import avertaFont from '@gnosis.pm/safe-react-components/dist/fonts/averta-normal.woff2'; -import avertaBoldFont from '@gnosis.pm/safe-react-components/dist/fonts/averta-bold.woff2'; - -const GlobalStyle = createGlobalStyle` - @font-face { - font-family: 'Averta'; - font-display: swap; - src: local('Averta'), local('Averta Bold'), - url(${avertaFont}) format('woff2'), - url(${avertaBoldFont}) format('woff'); - } -`; - -export default GlobalStyle; -``` - -And then include it in the root of your Safe App. - -```js -import React from 'react'; -import ReactDOM from 'react-dom'; -import GlobalStyles from './global'; - -import App from './App'; - -ReactDOM.render( - <> - - - , - document.getElementById('root') -); -``` - ## Using the components You can import every component exported from `@gnosis.pm/safe-react-components` in the same way. diff --git a/package.json b/package.json index 9679f58c..3d7956da 100644 --- a/package.json +++ b/package.json @@ -29,20 +29,20 @@ "web3-utils": "^1.6.0" }, "devDependencies": { - "@babel/core": "^7.16.0", - "@babel/preset-env": "^7.16.0", - "@babel/preset-react": "^7.16.0", - "@babel/preset-typescript": "^7.16.0", - "@material-ui/core": "^4.12.3", - "@material-ui/icons": "^4.11.0", + "@babel/core": "^7.18.0", + "@babel/preset-env": "^7.18.0", + "@babel/preset-react": "^7.18.0", + "@babel/preset-typescript": "^7.18.0", + "@material-ui/core": "^4.12.4", + "@material-ui/icons": "^4.11.3", "@mui/x-data-grid": "4.0.2", - "@storybook/addon-actions": "^6.4.22", - "@storybook/addon-controls": "^6.4.22", - "@storybook/addon-docs": "^6.4.22", - "@storybook/addon-links": "^6.4.22", - "@storybook/addon-storyshots": "^6.4.22", - "@storybook/addons": "^6.4.22", - "@storybook/react": "^6.4.22", + "@storybook/addon-actions": "^6.5.10", + "@storybook/addon-controls": "^6.5.10", + "@storybook/addon-docs": "^6.5.10", + "@storybook/addon-links": "^6.5.10", + "@storybook/addon-storyshots": "^6.5.10", + "@storybook/addons": "^6.5.10", + "@storybook/react": "^6.5.10", "@testing-library/jest-dom": "^5.11.5", "@testing-library/react": "^11.2.7", "@testing-library/user-event": "^12.2.0", @@ -51,17 +51,15 @@ "@types/node": "^16.11.9", "@types/react": "^16.9.55", "@types/react-dom": "^16.9.0", - "@types/styled-components": "^5.1.15", + "@types/styled-components": "^5.1.26", "@typescript-eslint/eslint-plugin": "^4.31.0", "@typescript-eslint/parser": "^4.31.0", - "copy-webpack-plugin": "^6.3.0", "eslint": "^7.32.0", "eslint-config-prettier": "^8.3.0", "eslint-plugin-prettier": "^4.0.0", "eslint-plugin-react": "^7.27.1", "eslint-plugin-react-hooks": "^4.3.0", "ethereum-blockies-base64": "^1.0.2", - "file-loader": "^6.2.0", "identity-obj-proxy": "^3.0.0", "jest": "^26.6.3", "jest-styled-components": "^7.0.6", @@ -71,7 +69,7 @@ "react-qr-reader": "2.2.1", "rimraf": "^3.0.2", "storybook-addon-react-docgen": "^1.2.42", - "styled-components": "^5.3.3", + "styled-components": "^5.3.5", "ts-loader": "^8.2.0", "typescript": "^4.5.0", "url-loader": "^4.1.1", diff --git a/src/fonts/averta-bold.woff2 b/src/fonts/averta-bold.woff2 deleted file mode 100644 index ea25589e..00000000 Binary files a/src/fonts/averta-bold.woff2 and /dev/null differ diff --git a/src/fonts/averta-normal.woff2 b/src/fonts/averta-normal.woff2 deleted file mode 100644 index 1cca5bcc..00000000 Binary files a/src/fonts/averta-normal.woff2 and /dev/null differ diff --git a/src/global.ts b/src/global.ts deleted file mode 100644 index e5492ded..00000000 --- a/src/global.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { createGlobalStyle } from 'styled-components'; -import averta from './fonts/averta-normal.woff2'; -import avertaBold from './fonts/averta-bold.woff2'; - -const GlobalStyle = createGlobalStyle` - @font-face { - font-family: 'Averta'; - src: local('Averta'), local('Averta Bold'), - url(${averta}) format('woff2'), - url(${avertaBold}) format('woff'); - } -`; - -export default GlobalStyle; diff --git a/tests/src/__snapshots__/colors.stories.storyshot b/tests/src/__snapshots__/colors.stories.storyshot index 8853603a..1db4617e 100644 --- a/tests/src/__snapshots__/colors.stories.storyshot +++ b/tests/src/__snapshots__/colors.stories.storyshot @@ -2,503 +2,503 @@ exports[`Storyshots Utils/Colors Colors Sample 1`] = `

secondary

#001428

text

#001428

inputText

#162D45

primaryHover

#005546

errorHover

#C31717

inputFilled

#566976

secondaryHover

#5D6D74

placeHolder

#5D6D74

primary

#008C73

error

#F02525

pending

#E8663D

rinkeby

#E8673C

secondaryLight

#B2B5B2

icon

#B2B5B2

inputDefault

#B2BBC0

primaryLight

#A1D2CA

warning

#FFC05F

tag

#D4D5D3

inputDisabled

#DADADA

separator

#E8E7E6

pendingTagHover

#FBE5C5

errorTooltip

#FFE6EA

inputField

#F0EFEE

background

#F6F7F8

white

#FFFFFF diff --git a/tests/src/dataDisplay/Accordion/__snapshots__/accordion.stories.storyshot b/tests/src/dataDisplay/Accordion/__snapshots__/accordion.stories.storyshot index 29e2679f..5ad16e09 100644 --- a/tests/src/dataDisplay/Accordion/__snapshots__/accordion.stories.storyshot +++ b/tests/src/dataDisplay/Accordion/__snapshots__/accordion.stories.storyshot @@ -13,12 +13,12 @@ exports[`Storyshots Data Display/Accordion Compact Accordion 1`] = ` } >

Transaction 1 @@ -131,7 +131,7 @@ exports[`Storyshots Data Display/Accordion Compact Accordion 1`] = ` className="MuiAccordionDetails-root" >

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget. @@ -143,12 +143,12 @@ exports[`Storyshots Data Display/Accordion Compact Accordion 1`] = `

Transaction 2 @@ -261,7 +261,7 @@ exports[`Storyshots Data Display/Accordion Compact Accordion 1`] = ` className="MuiAccordionDetails-root" >

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget. @@ -273,12 +273,12 @@ exports[`Storyshots Data Display/Accordion Compact Accordion 1`] = `

Transaction 3 @@ -391,7 +391,7 @@ exports[`Storyshots Data Display/Accordion Compact Accordion 1`] = ` className="MuiAccordionDetails-root" >

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget. @@ -407,15 +407,15 @@ exports[`Storyshots Data Display/Accordion Compact Accordion 1`] = ` exports[`Storyshots Data Display/Accordion Simple Accordion 1`] = `

Transaction 1 @@ -528,7 +528,7 @@ exports[`Storyshots Data Display/Accordion Simple Accordion 1`] = ` className="MuiAccordionDetails-root" >

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget. @@ -540,12 +540,12 @@ exports[`Storyshots Data Display/Accordion Simple Accordion 1`] = `

Transaction 2 @@ -658,7 +658,7 @@ exports[`Storyshots Data Display/Accordion Simple Accordion 1`] = ` className="MuiAccordionDetails-root" >

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget. @@ -670,12 +670,12 @@ exports[`Storyshots Data Display/Accordion Simple Accordion 1`] = `

Transaction 3 @@ -788,7 +788,7 @@ exports[`Storyshots Data Display/Accordion Simple Accordion 1`] = ` className="MuiAccordionDetails-root" >

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget. diff --git a/tests/src/dataDisplay/Card/__snapshots__/card.stories.storyshot b/tests/src/dataDisplay/Card/__snapshots__/card.stories.storyshot index 9892610d..188b3d14 100644 --- a/tests/src/dataDisplay/Card/__snapshots__/card.stories.storyshot +++ b/tests/src/dataDisplay/Card/__snapshots__/card.stories.storyshot @@ -2,17 +2,17 @@ exports[`Storyshots Data Display/Card Card Disabled 1`] = `

@@ -20,12 +20,12 @@ exports[`Storyshots Data Display/Card Card Disabled 1`] = `

Some text
,
,
Some content2 @@ -29,7 +29,7 @@ exports[`Storyshots Data Display/Divider Vertical 1`] = ` Some content
Some content2 diff --git a/tests/src/dataDisplay/Dot/__snapshots__/dot.stories.storyshot b/tests/src/dataDisplay/Dot/__snapshots__/dot.stories.storyshot index 047b1bd5..6b4b6558 100644 --- a/tests/src/dataDisplay/Dot/__snapshots__/dot.stories.storyshot +++ b/tests/src/dataDisplay/Dot/__snapshots__/dot.stories.storyshot @@ -2,11 +2,11 @@ exports[`Storyshots Data Display/Dot Dot With Icon 1`] = `

diff --git a/tests/src/dataDisplay/FixedDialog/__snapshots__/FixedDialog.stories.storyshot b/tests/src/dataDisplay/FixedDialog/__snapshots__/FixedDialog.stories.storyshot index 567a2e80..7e3da2db 100644 --- a/tests/src/dataDisplay/FixedDialog/__snapshots__/FixedDialog.stories.storyshot +++ b/tests/src/dataDisplay/FixedDialog/__snapshots__/FixedDialog.stories.storyshot @@ -2,35 +2,35 @@ exports[`Storyshots Data Display/FixedDialog Simple Fixed Dialog 1`] = `

Legal Disclaimer
Some Body
  • Owner 1

    @@ -677,16 +677,16 @@ exports[`Storyshots Ethereum/Eth hash Info With Name 1`] = ` exports[`Storyshots Ethereum/Eth hash Info With Short Address 1`] = `

    @@ -699,37 +699,37 @@ exports[`Storyshots Ethereum/Eth hash Info With Short Address 1`] = ` exports[`Storyshots Ethereum/Eth hash Info With Show And Copy Short Name 1`] = `

    Owner 1

    ,
    ,
    ,
    ,
    ,
    , diff --git a/tests/src/inputs/AddressInput/__snapshots__/AddressInput.stories.storyshot b/tests/src/inputs/AddressInput/__snapshots__/AddressInput.stories.storyshot index cc70b898..221d8033 100644 --- a/tests/src/inputs/AddressInput/__snapshots__/AddressInput.stories.storyshot +++ b/tests/src/inputs/AddressInput/__snapshots__/AddressInput.stories.storyshot @@ -7,7 +7,7 @@ exports[`Storyshots Inputs/AddressInput Address Input Disabled 1`] = ` onSubmit={[Function]} >

    Network Settings:

    @@ -757,7 +757,7 @@ exports[`Storyshots Inputs/AddressInput Simple Address Input 1`] = ` } >

    ,