From 761901a014ea9646cd85f672749d5734349d4ff6 Mon Sep 17 00:00:00 2001 From: Wenche Tollevsen Date: Wed, 26 Aug 2020 14:58:47 +0200 Subject: [PATCH 01/11] First try for typescript support for Divider --- libraries/core-react/jest.config.js | 9 ++ libraries/core-react/package.json | 10 +- libraries/core-react/pnpm-lock.yaml | 150 +++++++++++++++++- .../core-react/{rtl.setup.js => rtl.setup.ts} | 0 libraries/core-react/src/Divider/Divider.jsx | 46 ------ .../{Divider.test.jsx => Divider.test.tsx} | 0 .../{Divider.tokens.js => Divider.tokens.ts} | 1 - libraries/core-react/src/Divider/Divider.tsx | 47 ++++++ .../src/Divider/{index.js => index.ts} | 1 - libraries/core-react/tsconfig.json | 2 +- 10 files changed, 208 insertions(+), 58 deletions(-) create mode 100644 libraries/core-react/jest.config.js rename libraries/core-react/{rtl.setup.js => rtl.setup.ts} (100%) delete mode 100644 libraries/core-react/src/Divider/Divider.jsx rename libraries/core-react/src/Divider/{Divider.test.jsx => Divider.test.tsx} (100%) rename libraries/core-react/src/Divider/{Divider.tokens.js => Divider.tokens.ts} (98%) create mode 100644 libraries/core-react/src/Divider/Divider.tsx rename libraries/core-react/src/Divider/{index.js => index.ts} (70%) diff --git a/libraries/core-react/jest.config.js b/libraries/core-react/jest.config.js new file mode 100644 index 0000000000..21c971166b --- /dev/null +++ b/libraries/core-react/jest.config.js @@ -0,0 +1,9 @@ +module.exports = { + verbose: true, + setupFilesAfterEnv: ['./rtl.setup.ts'], + transform: { + '.(ts|tsx)': 'ts-jest', + }, + testRegex: '(/__tests__/.*|\\.(test|spec))\\.(ts|tsx|js)$', + moduleFileExtensions: ['ts', 'tsx', 'js'], +} diff --git a/libraries/core-react/package.json b/libraries/core-react/package.json index 57f3723403..abacf3aefe 100644 --- a/libraries/core-react/package.json +++ b/libraries/core-react/package.json @@ -48,8 +48,11 @@ "@testing-library/jest-dom": "^5.9.0", "@testing-library/react": "^10.2.1", "@testing-library/user-event": "^10.3.2", + "@types/jest": "^26.0.10", "@types/react": "^16.9.47", "@types/react-dom": "^16.9.8", + "@types/styled-components": "^5.1.2", + "@types/testing-library__jest-dom": "^5.9.2", "babel-plugin-react-docgen": "^4.1.0", "babel-plugin-styled-components": "^1.10.7", "jest": "^26.0.1", @@ -62,6 +65,7 @@ "rollup-plugin-polyfill": "^3.0.0", "rollup-plugin-typescript2": "^0.27.2", "styled-components": "4.4.1", + "ts-jest": "^26.3.0", "tslib": "^2.0.1", "typescript": "^4.0.2" }, @@ -71,12 +75,6 @@ "react-dom": "^16.8.6", "styled-components": "^4.2.0" }, - "jest": { - "verbose": true, - "setupFilesAfterEnv": [ - "./rtl.setup.js" - ] - }, "dependencies": { "@equinor/eds-icons": "workspace:*", "@equinor/eds-tokens": "workspace:*", diff --git a/libraries/core-react/pnpm-lock.yaml b/libraries/core-react/pnpm-lock.yaml index a500ceb7bb..55a18b948a 100644 --- a/libraries/core-react/pnpm-lock.yaml +++ b/libraries/core-react/pnpm-lock.yaml @@ -16,8 +16,11 @@ devDependencies: '@testing-library/jest-dom': 5.9.0 '@testing-library/react': 10.2.1_react-dom@16.13.1+react@16.13.1 '@testing-library/user-event': 10.4.1 + '@types/jest': 26.0.10 '@types/react': 16.9.47 '@types/react-dom': 16.9.8 + '@types/styled-components': 5.1.2 + '@types/testing-library__jest-dom': 5.9.2 babel-plugin-react-docgen: 4.1.0 babel-plugin-styled-components: 1.10.7_styled-components@4.4.1 jest: 26.0.1 @@ -30,6 +33,7 @@ devDependencies: rollup-plugin-polyfill: 3.0.0 rollup-plugin-typescript2: 0.27.2_rollup@2.15.0+typescript@4.0.2 styled-components: 4.4.1_4f54128445bc6f13bd713dcb3d91e98e + ts-jest: 26.3.0_jest@26.0.1+typescript@4.0.2 tslib: 2.0.1 typescript: 4.0.2 lockfileVersion: 5.1 @@ -1272,7 +1276,7 @@ packages: integrity: sha512-pPRkVkAQ91drKGbzCfDOoHN838+FSbYaEAvBXvKuWeeRRUD8FjwXkqfUNUZL6Ke48aA/1cqq/Ni7kVMCoqagWA== /@jest/types/25.5.0: dependencies: - '@types/istanbul-lib-coverage': 2.0.2 + '@types/istanbul-lib-coverage': 2.0.3 '@types/istanbul-reports': 1.1.2 '@types/yargs': 15.0.5 chalk: 3.0.0 @@ -1292,6 +1296,18 @@ packages: node: '>= 10.14.2' resolution: integrity: sha512-IbtjvqI9+eS1qFnOIEL7ggWmT+iK/U+Vde9cGWtYb/b6XgKb3X44ZAe/z9YZzoAAZ/E92m0DqrilF934IGNnQA== + /@jest/types/26.3.0: + dependencies: + '@types/istanbul-lib-coverage': 2.0.3 + '@types/istanbul-reports': 3.0.0 + '@types/node': 14.6.0 + '@types/yargs': 15.0.5 + chalk: 4.1.0 + dev: true + engines: + node: '>= 10.14.2' + resolution: + integrity: sha512-BDPG23U0qDeAvU4f99haztXwdAg3hz4El95LkAM+tHAqqhiVzRpEGHHU8EDxT/AnxOrA65YjLBwDahdJ9pTLJQ== /@rollup/plugin-babel/5.0.3_@babel+core@7.10.2+rollup@2.15.0: dependencies: '@babel/core': 7.10.2 @@ -1486,23 +1502,40 @@ packages: dev: true resolution: integrity: sha512-AiHRaEB50LQg0pZmm659vNBb9f4SJ0qrAnteuzhSeAUcJKxoYgEnprg/83kppCnc2zvtCKbdZry1a5pVY3lOTQ== + /@types/hoist-non-react-statics/3.3.1: + dependencies: + '@types/react': 16.9.47 + hoist-non-react-statics: 3.3.2 + dev: true + resolution: + integrity: sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA== /@types/istanbul-lib-coverage/2.0.2: dev: true resolution: integrity: sha512-rsZg7eL+Xcxsxk2XlBt9KcG8nOp9iYdKCOikY9x2RFJCyOdNj4MKPQty0e8oZr29vVAzKXr1BmR+kZauti3o1w== + /@types/istanbul-lib-coverage/2.0.3: + dev: true + resolution: + integrity: sha512-sz7iLqvVUg1gIedBOvlkxPlc8/uVzyS5OwGz1cKjXzkl3FpL3al0crU8YGU1WoHkxn0Wxbw5tyi6hvzJKNzFsw== /@types/istanbul-lib-report/3.0.0: dependencies: - '@types/istanbul-lib-coverage': 2.0.2 + '@types/istanbul-lib-coverage': 2.0.3 dev: true resolution: integrity: sha512-plGgXAPfVKFoYfa9NpYDAkseG+g6Jr294RqeqcqDixSbU34MZVJRi/P+7Y8GDpzkEwLaGZZOpKIEmeVZNtKsrg== /@types/istanbul-reports/1.1.2: dependencies: - '@types/istanbul-lib-coverage': 2.0.2 + '@types/istanbul-lib-coverage': 2.0.3 '@types/istanbul-lib-report': 3.0.0 dev: true resolution: integrity: sha512-P/W9yOX/3oPZSpaYOCQzGqgCQRXn0FFO/V8bWrCQs+wLmvVVxk6CRBXALEvNs9OHIatlnlFokfhuDo2ug01ciw== + /@types/istanbul-reports/3.0.0: + dependencies: + '@types/istanbul-lib-report': 3.0.0 + dev: true + resolution: + integrity: sha512-nwKNbvnwJ2/mndE9ItP/zc2TCzw6uuodnF4EHYWD+gCQDVBuRQL5UzbZD0/ezy1iKsFU2ZQiDqg4M9dN4+wZgA== /@types/jest/25.2.3: dependencies: jest-diff: 25.5.0 @@ -1510,10 +1543,21 @@ packages: dev: true resolution: integrity: sha512-JXc1nK/tXHiDhV55dvfzqtmP4S3sy3T3ouV2tkViZgxY/zeUkcpQcQPGRlgF4KmWzWW5oiWYSZwtCB+2RsE4Fw== + /@types/jest/26.0.10: + dependencies: + jest-diff: 25.5.0 + pretty-format: 25.5.0 + dev: true + resolution: + integrity: sha512-i2m0oyh8w/Lum7wWK/YOZJakYF8Mx08UaKA1CtbmFeDquVhAEdA7znacsVSf2hJ1OQ/OfVMGN90pw/AtzF8s/Q== /@types/node/14.0.11: dev: true resolution: integrity: sha512-lCvvI24L21ZVeIiyIUHZ5Oflv1hhHQ5E1S25IRlKIXaRkVgmXpJMI3wUJkmym2bTbCe+WoIibQnMVAU3FguaOg== + /@types/node/14.6.0: + dev: true + resolution: + integrity: sha512-mikldZQitV94akrc4sCcSjtJfsTKt4p+e/s0AGscVA6XArQ9kFclP+ZiYUMnq987rc6QlYxXv/EivqlfSLxpKA== /@types/normalize-package-data/2.4.0: dev: true resolution: @@ -1531,6 +1575,12 @@ packages: dev: true resolution: integrity: sha512-ykkPQ+5nFknnlU6lDd947WbQ6TE3NNzbQAkInC2EKY1qeYdTKp7onFusmYZb+ityzx2YviqT6BXSu+LyWWJwcA== + /@types/react-native/0.63.10: + dependencies: + '@types/react': 16.9.47 + dev: true + resolution: + integrity: sha512-9ZbfoWJFbxv7FVPTK7/Y8yRRViJ0bu62p3yKgeK3KqQmBKqQR14nvbIqBHkbBS1mtSWfGgBkPtxI2pmJni4VWQ== /@types/react-test-renderer/16.9.2: dependencies: '@types/react': 16.9.35 @@ -1561,12 +1611,27 @@ packages: dev: true resolution: integrity: sha512-l42BggppR6zLmpfU6fq9HEa2oGPEI8yrSPL3GITjfRInppYFahObbIQOQK3UGxEnyQpltZLaPe75046NOZQikw== + /@types/styled-components/5.1.2: + dependencies: + '@types/hoist-non-react-statics': 3.3.1 + '@types/react': 16.9.47 + '@types/react-native': 0.63.10 + csstype: 3.0.3 + dev: true + resolution: + integrity: sha512-HNocYLfrsnNNm8NTS/W53OERSjRA8dx5Bn6wBd2rXXwt4Z3s+oqvY6/PbVt3e6sgtzI63GX//WiWiRhWur08qQ== /@types/testing-library__jest-dom/5.9.1: dependencies: '@types/jest': 25.2.3 dev: true resolution: integrity: sha512-yYn5EKHO3MPEMSOrcAb1dLWY+68CG29LiXKsWmmpVHqoP5+ZRiAVLyUHvPNrO2dABDdUGZvavMsaGpWNjM6N2g== + /@types/testing-library__jest-dom/5.9.2: + dependencies: + '@types/jest': 26.0.10 + dev: true + resolution: + integrity: sha512-K7nUSpH/5i8i0NagTJ+uFUDRueDlnMNhJtMjMwTGPPSqyImbWC/hgKPDCKt6Phu2iMJg2kWqlax+Ucj2DKMwpA== /@types/testing-library__react-hooks/3.2.0: dependencies: '@types/react': 16.9.35 @@ -1941,6 +2006,14 @@ packages: hasBin: true resolution: integrity: sha512-UH2GkcEDSI0k/lRkuDSzFl9ZZ87skSy9w2XAn1MsZnL+4c4rqbBd3e82UWHbYDpztABrPBhZsTEeuxVfHppqDg== + /bs-logger/0.2.6: + dependencies: + fast-json-stable-stringify: 2.1.0 + dev: true + engines: + node: '>= 6' + resolution: + integrity: sha512-pd8DCoxmbgc7hyPKOvxtqNcjYoOsABPQdcCUjGp3d42VR2CX1ORhk2A87oqqu5R1kk+76nsxZupkmyd+MVtCog== /bser/2.1.1: dependencies: node-int64: 0.4.0 @@ -2039,6 +2112,15 @@ packages: node: '>=10' resolution: integrity: sha512-N9oWFcegS0sFr9oh1oz2d7Npos6vNoWW9HvtCg5N1KRFpUhaAhvTv5Y58g880fZaEYSNm3qDz8SU1UrGvp+n7A== + /chalk/4.1.0: + dependencies: + ansi-styles: 4.2.1 + supports-color: 7.1.0 + dev: true + engines: + node: '>=10' + resolution: + integrity: sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A== /char-regex/1.0.2: dev: true engines: @@ -2877,6 +2959,12 @@ packages: node: '>=0.10.0' resolution: integrity: sha1-lbC2P+whRmGab+V/51Yo1aOe/k8= + /hoist-non-react-statics/3.3.2: + dependencies: + react-is: 16.13.1 + dev: true + resolution: + integrity: sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw== /hosted-git-info/2.8.8: dev: true resolution: @@ -3631,6 +3719,19 @@ packages: node: '>= 10.14.2' resolution: integrity: sha512-byQ3n7ad1BO/WyFkYvlWQHTsomB6GIewBh8tlGtusiylAlaxQ1UpS0XYH0ngOyhZuHVLN79Qvl6/pMiDMSSG1g== + /jest-util/26.3.0: + dependencies: + '@jest/types': 26.3.0 + '@types/node': 14.6.0 + chalk: 4.1.0 + graceful-fs: 4.2.4 + is-ci: 2.0.0 + micromatch: 4.0.2 + dev: true + engines: + node: '>= 10.14.2' + resolution: + integrity: sha512-4zpn6bwV0+AMFN0IYhH/wnzIQzRaYVrz1A8sYnRnj4UXDXbOVtWmlaZkO9mipFqZ13okIfN87aDoJWB7VH6hcw== /jest-validate/26.0.1: dependencies: '@jest/types': 26.0.1 @@ -3863,6 +3964,10 @@ packages: node: '>=8' resolution: integrity: sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g== + /lodash.memoize/4.1.2: + dev: true + resolution: + integrity: sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4= /lodash.sortby/4.7.0: dev: true resolution: @@ -3905,6 +4010,10 @@ packages: node: '>=8' resolution: integrity: sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw== + /make-error/1.3.6: + dev: true + resolution: + integrity: sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw== /makeerror/1.0.11: dependencies: tmpl: 1.0.4 @@ -4013,6 +4122,13 @@ packages: node: '>=0.10.0' resolution: integrity: sha512-WRoDn//mXBiJ1H40rqa3vH0toePwSsGb45iInWlTySa+Uu4k3tYUSxa2v1KqAiLtvlrSzaExqS1gtk96A9zvEA== + /mkdirp/1.0.4: + dev: true + engines: + node: '>=10' + hasBin: true + resolution: + integrity: sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw== /ms/2.0.0: dev: true resolution: @@ -5291,6 +5407,30 @@ packages: node: '>=8' resolution: integrity: sha512-3n1qG+/5kg+jrbTzwAykB5yRYtQCTqOGKq5U5PE3b0a1/mzo6snDhjGS0zJVJunO0NrT3Dg1MLy5TjWP/UJppg== + /ts-jest/26.3.0_jest@26.0.1+typescript@4.0.2: + dependencies: + '@types/jest': 26.0.10 + bs-logger: 0.2.6 + buffer-from: 1.1.1 + fast-json-stable-stringify: 2.1.0 + jest: 26.0.1 + jest-util: 26.3.0 + json5: 2.1.3 + lodash.memoize: 4.1.2 + make-error: 1.3.6 + mkdirp: 1.0.4 + semver: 7.3.2 + typescript: 4.0.2 + yargs-parser: 18.1.3 + dev: true + engines: + node: '>= 10' + hasBin: true + peerDependencies: + jest: '>=26 <27' + typescript: '>=3.8 <5.0' + resolution: + integrity: sha512-Jq2uKfx6bPd9+JDpZNMBJMdMQUC3sJ08acISj8NXlVgR2d5OqslEHOR2KHMgwymu8h50+lKIm0m0xj/ioYdW2Q== /tslib/2.0.1: dev: true resolution: @@ -5639,8 +5779,11 @@ specifiers: '@testing-library/react': ^10.2.1 '@testing-library/react-hooks': ^3.3.0 '@testing-library/user-event': ^10.3.2 + '@types/jest': ^26.0.10 '@types/react': ^16.9.47 '@types/react-dom': ^16.9.8 + '@types/styled-components': ^5.1.2 + '@types/testing-library__jest-dom': ^5.9.2 babel-plugin-react-docgen: ^4.1.0 babel-plugin-styled-components: ^1.10.7 focus-visible: ^5.1.0 @@ -5655,5 +5798,6 @@ specifiers: rollup-plugin-polyfill: ^3.0.0 rollup-plugin-typescript2: ^0.27.2 styled-components: 4.4.1 + ts-jest: ^26.3.0 tslib: ^2.0.1 typescript: ^4.0.2 diff --git a/libraries/core-react/rtl.setup.js b/libraries/core-react/rtl.setup.ts similarity index 100% rename from libraries/core-react/rtl.setup.js rename to libraries/core-react/rtl.setup.ts diff --git a/libraries/core-react/src/Divider/Divider.jsx b/libraries/core-react/src/Divider/Divider.jsx deleted file mode 100644 index 6b6139e9af..0000000000 --- a/libraries/core-react/src/Divider/Divider.jsx +++ /dev/null @@ -1,46 +0,0 @@ -// @ts-nocheck -import React, { forwardRef } from 'react' -import PropTypes from 'prop-types' -import styled from 'styled-components' -import { divider as tokens } from './Divider.tokens' - -const StyledDivider = styled.hr( - ({ backgroundColor, marginTop, marginBottom, dividerHeight: height }) => ({ - backgroundColor, - marginTop, - marginBottom, - height, - border: 'none', - }), -) - -export const Divider = forwardRef(function Divider( - { color, variant, className }, - ref, -) { - const props = { - backgroundColor: tokens.color[color], - marginTop: tokens[variant].spacings.top, - marginBottom: tokens[variant].spacings.bottom, - dividerHeight: tokens.height, - } - - return -}) - -Divider.displayName = 'eds-divider' - -Divider.propTypes = { - // Valid colors - color: PropTypes.oneOf(['lighter', 'light', 'medium']), - // Vertical spacing - variant: PropTypes.oneOf(['small', 'medium']), - /** @ignore */ - className: PropTypes.string, -} - -Divider.defaultProps = { - color: 'medium', - variant: 'medium', - className: '', -} diff --git a/libraries/core-react/src/Divider/Divider.test.jsx b/libraries/core-react/src/Divider/Divider.test.tsx similarity index 100% rename from libraries/core-react/src/Divider/Divider.test.jsx rename to libraries/core-react/src/Divider/Divider.test.tsx diff --git a/libraries/core-react/src/Divider/Divider.tokens.js b/libraries/core-react/src/Divider/Divider.tokens.ts similarity index 98% rename from libraries/core-react/src/Divider/Divider.tokens.js rename to libraries/core-react/src/Divider/Divider.tokens.ts index 23e2649f85..4fbcfd5c25 100644 --- a/libraries/core-react/src/Divider/Divider.tokens.js +++ b/libraries/core-react/src/Divider/Divider.tokens.ts @@ -1,4 +1,3 @@ -// @ts-nocheck import { tokens } from '@equinor/eds-tokens' const { diff --git a/libraries/core-react/src/Divider/Divider.tsx b/libraries/core-react/src/Divider/Divider.tsx new file mode 100644 index 0000000000..05bf1f013d --- /dev/null +++ b/libraries/core-react/src/Divider/Divider.tsx @@ -0,0 +1,47 @@ +import React, { forwardRef } from 'react' +import PropTypes from 'prop-types' +import styled from 'styled-components' +import { divider as tokens } from './Divider.tokens' + +type StyleProps = { + backgroundColor: string + marginTop: string + marginBottom: string + dividerHeight: string +} + +const StyledDivider = styled.hr` + border: 'none'; + background-color: ${(props) => props.backgroundColor}; + margin-top: ${(props) => props.marginTop}; + margin-bottom: ${(props) => props.marginBottom}; + height: ${(props) => props.dividerHeight}; +` + +type Props = { + color?: 'lighter' | 'light' | 'medium' + variant?: 'small' | 'medium' + className?: string +} + +export const Divider = forwardRef((props, ref) => { + const { color = 'medium', variant = 'medium', className } = props + const styleProps = { + backgroundColor: tokens.color[color], + marginTop: tokens[variant].spacings.top, + marginBottom: tokens[variant].spacings.bottom, + dividerHeight: tokens.height, + } + return +}) + +Divider.displayName = 'eds-divider' + +Divider.propTypes = { + // Valid colors + color: PropTypes.oneOf(['lighter', 'light', 'medium']), + // Vertical spacing + variant: PropTypes.oneOf(['small', 'medium']), + /** @ignore */ + className: PropTypes.string, +} diff --git a/libraries/core-react/src/Divider/index.js b/libraries/core-react/src/Divider/index.ts similarity index 70% rename from libraries/core-react/src/Divider/index.js rename to libraries/core-react/src/Divider/index.ts index 271b490a2a..465ccc7fdb 100644 --- a/libraries/core-react/src/Divider/index.js +++ b/libraries/core-react/src/Divider/index.ts @@ -1,2 +1 @@ -// @ts-nocheck export { Divider } from './Divider' diff --git a/libraries/core-react/tsconfig.json b/libraries/core-react/tsconfig.json index dc84a49336..39e94e6bb1 100644 --- a/libraries/core-react/tsconfig.json +++ b/libraries/core-react/tsconfig.json @@ -14,5 +14,5 @@ "jsx": "react" }, "include": ["src"], - "exclude": ["node_modules", "**/*.test.jsx"] + "exclude": ["node_modules"] } From 37ea8b8de94525ae5f7baecf38a84e2a0e5bae0b Mon Sep 17 00:00:00 2001 From: Wenche Tollevsen Date: Thu, 27 Aug 2020 11:24:09 +0200 Subject: [PATCH 02/11] In the middle of using proptables from ts components in the storybook --- apps/storybook-react/.storybook/main.js | 10 ++++++++++ .../stories/Avatar.stories.jsx | 2 +- .../stories/Divider/Divider.stories.jsx | 4 ++-- libraries/core-react/package.json | 1 + libraries/core-react/pnpm-lock.yaml | 20 +++++++++++++++++++ libraries/core-react/rollup.config.js | 4 +++- libraries/core-react/src/Divider/Divider.tsx | 14 ++++--------- 7 files changed, 41 insertions(+), 14 deletions(-) diff --git a/apps/storybook-react/.storybook/main.js b/apps/storybook-react/.storybook/main.js index 63697222ea..6319bb4072 100644 --- a/apps/storybook-react/.storybook/main.js +++ b/apps/storybook-react/.storybook/main.js @@ -13,4 +13,14 @@ module.exports = { }, }, ], + /* typescript: { + check: false, + checkOptions: {}, + reactDocgen: 'react-docgen-typescript', + reactDocgenTypescriptOptions: { + shouldExtractLiteralValuesFromEnum: true, + propFilter: (prop) => + prop.parent ? !/node_modules/.test(prop.parent.fileName) : true, + }, + }, */ } diff --git a/apps/storybook-react/stories/Avatar.stories.jsx b/apps/storybook-react/stories/Avatar.stories.jsx index 24530f0f18..d4ec012e2d 100644 --- a/apps/storybook-react/stories/Avatar.stories.jsx +++ b/apps/storybook-react/stories/Avatar.stories.jsx @@ -1,7 +1,7 @@ import React from 'react' import { withKnobs, select, text, boolean } from '@storybook/addon-knobs' import styled from 'styled-components' -import { Avatar, Typography } from '@equinor/eds-core-react' +import { Avatar, Typography, Divider } from '@equinor/eds-core-react' import catImg from '../images/cat.jpg' const image = catImg diff --git a/apps/storybook-react/stories/Divider/Divider.stories.jsx b/apps/storybook-react/stories/Divider/Divider.stories.jsx index b2d2dd8192..ba71dad457 100644 --- a/apps/storybook-react/stories/Divider/Divider.stories.jsx +++ b/apps/storybook-react/stories/Divider/Divider.stories.jsx @@ -6,11 +6,11 @@ import mdx from './Divider.docs.mdx' export default { title: 'Components/Divider', - parameters: { + /* parameters: { docs: { page: mdx, }, - }, + }, */ component: Divider, } diff --git a/libraries/core-react/package.json b/libraries/core-react/package.json index abacf3aefe..c06c04d299 100644 --- a/libraries/core-react/package.json +++ b/libraries/core-react/package.json @@ -54,6 +54,7 @@ "@types/styled-components": "^5.1.2", "@types/testing-library__jest-dom": "^5.9.2", "babel-plugin-react-docgen": "^4.1.0", + "babel-plugin-react-docgen-typescript": "^1.4.2", "babel-plugin-styled-components": "^1.10.7", "jest": "^26.0.1", "jest-styled-components": "^6.3.4", diff --git a/libraries/core-react/pnpm-lock.yaml b/libraries/core-react/pnpm-lock.yaml index 55a18b948a..9749223745 100644 --- a/libraries/core-react/pnpm-lock.yaml +++ b/libraries/core-react/pnpm-lock.yaml @@ -22,6 +22,7 @@ devDependencies: '@types/styled-components': 5.1.2 '@types/testing-library__jest-dom': 5.9.2 babel-plugin-react-docgen: 4.1.0 + babel-plugin-react-docgen-typescript: 1.4.2_6e5b3a67faae6c4866d9a003ec605c7e babel-plugin-styled-components: 1.10.7_styled-components@4.4.1 jest: 26.0.1 jest-styled-components: 6.3.4_styled-components@4.4.1 @@ -1868,6 +1869,16 @@ packages: node: '>= 10.14.2' resolution: integrity: sha512-+AuoehOrjt9irZL7DOt2+4ZaTM6dlu1s5TTS46JBa0/qem4dy7VNW3tMb96qeEqcIh20LD73TVNtmVEeymTG7w== + /babel-plugin-react-docgen-typescript/1.4.2_6e5b3a67faae6c4866d9a003ec605c7e: + dependencies: + '@babel/core': 7.10.2 + react-docgen-typescript: 1.20.3_typescript@4.0.2 + dev: true + peerDependencies: + '@babel/core': ^7.0.0-0 + typescript: '*' + resolution: + integrity: sha512-PwXKu84cCMF9k1X4AlfU47V/1JR1wWJ5MDuaCb0gixnJwBWUM+wBYXWHy84Qjcn2FilR4WRy58srOKU2oiwmMw== /babel-plugin-react-docgen/4.1.0: dependencies: lodash: 4.17.15 @@ -4581,6 +4592,14 @@ packages: node: '>=0.6' resolution: integrity: sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA== + /react-docgen-typescript/1.20.3_typescript@4.0.2: + dependencies: + typescript: 4.0.2 + dev: true + peerDependencies: + typescript: '>= 3.x' + resolution: + integrity: sha512-ISdbO2O5BbD62trroxGmcQXlkFzARRL8ylK0tdnzllGuxcMu3IbnPOFOY/dOfRl8K4LVG9U8yulEVwpyGxGNYA== /react-docgen/5.3.0: dependencies: '@babel/core': 7.10.2 @@ -5785,6 +5804,7 @@ specifiers: '@types/styled-components': ^5.1.2 '@types/testing-library__jest-dom': ^5.9.2 babel-plugin-react-docgen: ^4.1.0 + babel-plugin-react-docgen-typescript: ^1.4.2 babel-plugin-styled-components: ^1.10.7 focus-visible: ^5.1.0 jest: ^26.0.1 diff --git a/libraries/core-react/rollup.config.js b/libraries/core-react/rollup.config.js index 97aa80e3b2..b040cabe00 100644 --- a/libraries/core-react/rollup.config.js +++ b/libraries/core-react/rollup.config.js @@ -40,7 +40,9 @@ export default [ presets: ['@babel/env', '@babel/preset-react'], plugins: [ 'babel-plugin-styled-components', - ...(buildForStorybook ? ['babel-plugin-react-docgen'] : []), + ...(buildForStorybook + ? ['babel-plugin-react-docgen-typescript'] + : []), ], }), commonjs(), diff --git a/libraries/core-react/src/Divider/Divider.tsx b/libraries/core-react/src/Divider/Divider.tsx index 05bf1f013d..5153b17b44 100644 --- a/libraries/core-react/src/Divider/Divider.tsx +++ b/libraries/core-react/src/Divider/Divider.tsx @@ -11,7 +11,7 @@ type StyleProps = { } const StyledDivider = styled.hr` - border: 'none'; + border: none; background-color: ${(props) => props.backgroundColor}; margin-top: ${(props) => props.marginTop}; margin-bottom: ${(props) => props.marginBottom}; @@ -19,8 +19,11 @@ const StyledDivider = styled.hr` ` type Props = { + /** Valid colors */ color?: 'lighter' | 'light' | 'medium' + /** Vertical spacing */ variant?: 'small' | 'medium' + /** @ignore */ className?: string } @@ -36,12 +39,3 @@ export const Divider = forwardRef((props, ref) => { }) Divider.displayName = 'eds-divider' - -Divider.propTypes = { - // Valid colors - color: PropTypes.oneOf(['lighter', 'light', 'medium']), - // Vertical spacing - variant: PropTypes.oneOf(['small', 'medium']), - /** @ignore */ - className: PropTypes.string, -} From e84993f76921a82ffffa5b05faa02d199ea41e7f Mon Sep 17 00:00:00 2001 From: Wenche Tollevsen Date: Thu, 27 Aug 2020 20:18:12 +0200 Subject: [PATCH 03/11] Lot's of lot's of tweeks to make prop tables in storybook working. This commit is kind of a proof of concept --- apps/storybook-react/package.json | 2 +- .../stories/Divider/Divider.stories.jsx | 1 + libraries/core-react/package.json | 2 + libraries/core-react/pnpm-lock.yaml | 173 +++++++++++++++++- libraries/core-react/rollup.config.js | 38 +++- .../core-react/src/Divider/Divider.test.tsx | 8 +- libraries/core-react/src/Divider/Divider.tsx | 10 +- libraries/core-react/tsconfig.json | 4 +- package.yaml | 2 +- 9 files changed, 219 insertions(+), 21 deletions(-) diff --git a/apps/storybook-react/package.json b/apps/storybook-react/package.json index 2318746bb2..889c983e74 100644 --- a/apps/storybook-react/package.json +++ b/apps/storybook-react/package.json @@ -7,7 +7,7 @@ }, "scripts": { "start": "start-storybook -p 9000 --ci", - "dev": "start-storybook -p 9000 --ci", + "dev": "DEBUG=docgen:* start-storybook -p 9000 --ci", "build": "build-storybook -c .storybook -o dist", "lint": "eslint stories/**/*.jsx" }, diff --git a/apps/storybook-react/stories/Divider/Divider.stories.jsx b/apps/storybook-react/stories/Divider/Divider.stories.jsx index ba71dad457..69e94a2020 100644 --- a/apps/storybook-react/stories/Divider/Divider.stories.jsx +++ b/apps/storybook-react/stories/Divider/Divider.stories.jsx @@ -4,6 +4,7 @@ import { withKnobs, select } from '@storybook/addon-knobs' import { Divider } from '@equinor/eds-core-react' import mdx from './Divider.docs.mdx' +console.debug('******** Divider *********', Divider) export default { title: 'Components/Divider', /* parameters: { diff --git a/libraries/core-react/package.json b/libraries/core-react/package.json index c06c04d299..4163dfb1e2 100644 --- a/libraries/core-react/package.json +++ b/libraries/core-react/package.json @@ -41,10 +41,12 @@ "@babel/core": "^7.10.2", "@babel/preset-env": "^7.10.2", "@babel/preset-react": "^7.10.1", + "@babel/preset-typescript": "^7.10.4", "@rollup/plugin-babel": "^5.0.3", "@rollup/plugin-commonjs": "^13.0.0", "@rollup/plugin-json": "^4.1.0", "@rollup/plugin-node-resolve": "^8.0.1", + "@rollup/plugin-typescript": "^5.0.2", "@testing-library/jest-dom": "^5.9.0", "@testing-library/react": "^10.2.1", "@testing-library/user-event": "^10.3.2", diff --git a/libraries/core-react/pnpm-lock.yaml b/libraries/core-react/pnpm-lock.yaml index 9749223745..88f1c1170c 100644 --- a/libraries/core-react/pnpm-lock.yaml +++ b/libraries/core-react/pnpm-lock.yaml @@ -9,10 +9,12 @@ devDependencies: '@babel/core': 7.10.2 '@babel/preset-env': 7.10.2_@babel+core@7.10.2 '@babel/preset-react': 7.10.1_@babel+core@7.10.2 + '@babel/preset-typescript': 7.10.4_@babel+core@7.10.2 '@rollup/plugin-babel': 5.0.3_@babel+core@7.10.2+rollup@2.15.0 '@rollup/plugin-commonjs': 13.0.0_rollup@2.15.0 '@rollup/plugin-json': 4.1.0_rollup@2.15.0 '@rollup/plugin-node-resolve': 8.0.1_rollup@2.15.0 + '@rollup/plugin-typescript': 5.0.2_0a1a0f524a9d27ad422e76168b31793b '@testing-library/jest-dom': 5.9.0 '@testing-library/react': 10.2.1_react-dom@16.13.1+react@16.13.1 '@testing-library/user-event': 10.4.1 @@ -64,6 +66,12 @@ packages: dev: true resolution: integrity: sha512-IGhtTmpjGbYzcEDOw7DcQtbQSXcG9ftmAXtWTu9V936vDye4xjjekktFAtgZsWpzTj/X01jocB46mTywm/4SZw== + /@babel/code-frame/7.10.4: + dependencies: + '@babel/highlight': 7.10.4 + dev: true + resolution: + integrity: sha512-vG6SvB6oYEhvgisZNFRmRCUkLz11c7rp+tbNTynGqc6mS1d5ATd/sGyV6W0KZZnXRKMTzZDRgQT3Ou9jhpAfUg== /@babel/compat-data/7.10.1: dependencies: browserslist: 4.12.0 @@ -104,6 +112,14 @@ packages: dev: true resolution: integrity: sha512-AxfBNHNu99DTMvlUPlt1h2+Hn7knPpH5ayJ8OqDWSeLld+Fi2AYBTC/IejWDM9Edcii4UzZRCsbUt0WlSDsDsA== + /@babel/generator/7.11.4: + dependencies: + '@babel/types': 7.11.0 + jsesc: 2.5.2 + source-map: 0.5.7 + dev: true + resolution: + integrity: sha512-Rn26vueFx0eOoz7iifCN2UHT6rGtnkSGWSoDRIy8jZN3B91PzeSULbswfLoOWuTuAcNwpG/mxy+uCTDnZ9Mp1g== /@babel/helper-annotate-as-pure/7.10.1: dependencies: '@babel/types': 7.10.2 @@ -159,6 +175,20 @@ packages: '@babel/core': ^7.0.0 resolution: integrity: sha512-5C/QhkGFh1vqcziq1vAL6SI9ymzUp8BCYjFpvYVhWP4DlATIb3u5q3iUd35mvlyGs8fO7hckkW7i0tmH+5+bvQ== + /@babel/helper-create-class-features-plugin/7.10.5_@babel+core@7.10.2: + dependencies: + '@babel/core': 7.10.2 + '@babel/helper-function-name': 7.10.4 + '@babel/helper-member-expression-to-functions': 7.11.0 + '@babel/helper-optimise-call-expression': 7.10.4 + '@babel/helper-plugin-utils': 7.10.4 + '@babel/helper-replace-supers': 7.10.4 + '@babel/helper-split-export-declaration': 7.11.0 + dev: true + peerDependencies: + '@babel/core': ^7.0.0 + resolution: + integrity: sha512-0nkdeijB7VlZoLT3r/mY3bUkw3T8WG/hNw+FATs/6+pG2039IJWjTYL0VTISqsNHMUTEnwbVnc89WIJX9Qed0A== /@babel/helper-create-regexp-features-plugin/7.10.1_@babel+core@7.10.2: dependencies: '@babel/core': 7.10.2 @@ -193,12 +223,26 @@ packages: dev: true resolution: integrity: sha512-fcpumwhs3YyZ/ttd5Rz0xn0TpIwVkN7X0V38B9TWNfVF42KEkhkAAuPCQ3oXmtTRtiPJrmZ0TrfS0GKF0eMaRQ== + /@babel/helper-function-name/7.10.4: + dependencies: + '@babel/helper-get-function-arity': 7.10.4 + '@babel/template': 7.10.4 + '@babel/types': 7.11.0 + dev: true + resolution: + integrity: sha512-YdaSyz1n8gY44EmN7x44zBn9zQ1Ry2Y+3GTA+3vH6Mizke1Vw0aWDM66FOYEPw8//qKkmqOckrGgTYa+6sceqQ== /@babel/helper-get-function-arity/7.10.1: dependencies: '@babel/types': 7.10.2 dev: true resolution: integrity: sha512-F5qdXkYGOQUb0hpRaPoetF9AnsXknKjWMZ+wmsIRsp5ge5sFh4c3h1eH2pRTTuy9KKAA2+TTYomGXAtEL2fQEw== + /@babel/helper-get-function-arity/7.10.4: + dependencies: + '@babel/types': 7.11.0 + dev: true + resolution: + integrity: sha512-EkN3YDB+SRDgiIUnNgcmiD361ti+AVbL3f3Henf6dqqUyr5dMsorno0lJWJuLhDhkI5sYEpgj6y9kB8AOU1I2A== /@babel/helper-hoist-variables/7.10.1: dependencies: '@babel/types': 7.10.2 @@ -211,6 +255,12 @@ packages: dev: true resolution: integrity: sha512-u7XLXeM2n50gb6PWJ9hoO5oO7JFPaZtrh35t8RqKLT1jFKj9IWeD1zrcrYp1q1qiZTdEarfDWfTIP8nGsu0h5g== + /@babel/helper-member-expression-to-functions/7.11.0: + dependencies: + '@babel/types': 7.11.0 + dev: true + resolution: + integrity: sha512-JbFlKHFntRV5qKw3YC0CvQnDZ4XMwgzzBbld7Ly4Mj4cbFy3KywcR8NtNctRToMWJOVvLINJv525Gd6wwVEx/Q== /@babel/helper-module-imports/7.10.1: dependencies: '@babel/types': 7.10.2 @@ -235,10 +285,20 @@ packages: dev: true resolution: integrity: sha512-a0DjNS1prnBsoKx83dP2falChcs7p3i8VMzdrSbfLhuQra/2ENC4sbri34dz/rWmDADsmF1q5GbfaXydh0Jbjg== + /@babel/helper-optimise-call-expression/7.10.4: + dependencies: + '@babel/types': 7.11.0 + dev: true + resolution: + integrity: sha512-n3UGKY4VXwXThEiKrgRAoVPBMqeoPgHVqiHZOanAJCG9nQUL2pLRQirUzl0ioKclHGpGqRgIOkgcIJaIWLpygg== /@babel/helper-plugin-utils/7.10.1: dev: true resolution: integrity: sha512-fvoGeXt0bJc7VMWZGCAEBEMo/HAjW2mP8apF5eXK0wSqwLAVHAISCWRoLMBMUs2kqeaG77jltVqu4Hn8Egl3nA== + /@babel/helper-plugin-utils/7.10.4: + dev: true + resolution: + integrity: sha512-O4KCvQA6lLiMU9l2eawBPMf1xPP8xPfB3iEQw150hOVTqj/rfXz0ThTb4HEzqQfs2Bmo5Ay8BzxfzVtBrr9dVg== /@babel/helper-regex/7.10.1: dependencies: lodash: 4.17.15 @@ -264,6 +324,15 @@ packages: dev: true resolution: integrity: sha512-SOwJzEfpuQwInzzQJGjGaiG578UYmyi2Xw668klPWV5n07B73S0a9btjLk/52Mlcxa+5AdIYqws1KyXRfMoB7A== + /@babel/helper-replace-supers/7.10.4: + dependencies: + '@babel/helper-member-expression-to-functions': 7.11.0 + '@babel/helper-optimise-call-expression': 7.10.4 + '@babel/traverse': 7.11.0 + '@babel/types': 7.11.0 + dev: true + resolution: + integrity: sha512-sPxZfFXocEymYTdVK1UNmFPBN+Hv5mJkLPsYWwGBxZAxaWfFu+xqp7b6qWD0yjNuNL2VKc6L5M18tOXUP7NU0A== /@babel/helper-simple-access/7.10.1: dependencies: '@babel/template': 7.10.1 @@ -277,10 +346,20 @@ packages: dev: true resolution: integrity: sha512-UQ1LVBPrYdbchNhLwj6fetj46BcFwfS4NllJo/1aJsT+1dLTEnXJL0qHqtY7gPzF8S2fXBJamf1biAXV3X077g== + /@babel/helper-split-export-declaration/7.11.0: + dependencies: + '@babel/types': 7.11.0 + dev: true + resolution: + integrity: sha512-74Vejvp6mHkGE+m+k5vHY93FX2cAtrw1zXrZXRlG4l410Nm9PxfEiVTn1PjDPV5SnmieiueY4AFg2xqhNFuuZg== /@babel/helper-validator-identifier/7.10.1: dev: true resolution: integrity: sha512-5vW/JXLALhczRCWP0PnFDMCJAchlBvM7f4uk/jXritBnIa6E1KmqmtrS3yn1LAnxFBypQ3eneLuXjsnfQsgILw== + /@babel/helper-validator-identifier/7.10.4: + dev: true + resolution: + integrity: sha512-3U9y+43hz7ZM+rzG24Qe2mufW5KhvFg/NhnNph+i9mgCtdTCtMJuI1TMkrIUiK7Ix4PYlRF9I5dhqaLYA/ADXw== /@babel/helper-wrap-function/7.10.1: dependencies: '@babel/helper-function-name': 7.10.1 @@ -306,6 +385,14 @@ packages: dev: true resolution: integrity: sha512-8rMof+gVP8mxYZApLF/JgNDAkdKa+aJt3ZYxF8z6+j/hpeXL7iMsKCPHa2jNMHu/qqBwzQF4OHNoYi8dMA/rYg== + /@babel/highlight/7.10.4: + dependencies: + '@babel/helper-validator-identifier': 7.10.4 + chalk: 2.4.2 + js-tokens: 4.0.0 + dev: true + resolution: + integrity: sha512-i6rgnR/YgPEQzZZnbTHHuZdlE8qyoBNalD6F+q4vAFlcMEcqmkoG+mPqJYJCo63qPf74+Y1UZsl3l6f7/RIkmA== /@babel/parser/7.10.2: dev: true engines: @@ -313,6 +400,13 @@ packages: hasBin: true resolution: integrity: sha512-PApSXlNMJyB4JiGVhCOlzKIif+TKFTvu0aQAhnTvfP/z3vVSN6ZypH5bfUNwFXXjRQtUEBNFd2PtmCmG2Py3qQ== + /@babel/parser/7.11.4: + dev: true + engines: + node: '>=6.0.0' + hasBin: true + resolution: + integrity: sha512-MggwidiH+E9j5Sh8pbrX5sJvMcsqS5o+7iB42M9/k0CD63MjYbdP4nhSh7uB5wnv2/RVzTZFTxzF/kIa5mrCqA== /@babel/plugin-proposal-async-generator-functions/7.10.1_@babel+core@7.10.2: dependencies: '@babel/core': 7.10.2 @@ -544,6 +638,15 @@ packages: '@babel/core': ^7.0.0-0 resolution: integrity: sha512-hgA5RYkmZm8FTFT3yu2N9Bx7yVVOKYT6yEdXXo6j2JTm0wNxgqaGeQVaSHRjhfnQbX91DtjFB6McRFSlcJH3xQ== + /@babel/plugin-syntax-typescript/7.10.4_@babel+core@7.10.2: + dependencies: + '@babel/core': 7.10.2 + '@babel/helper-plugin-utils': 7.10.4 + dev: true + peerDependencies: + '@babel/core': ^7.0.0-0 + resolution: + integrity: sha512-oSAEz1YkBCAKr5Yiq8/BNtvSAPwkp/IyUnwZogd8p+F0RuYQQrLeRUzIQhueQTTBy/F+a40uS7OFKxnkRvmvFQ== /@babel/plugin-transform-arrow-functions/7.10.1_@babel+core@7.10.2: dependencies: '@babel/core': 7.10.2 @@ -902,6 +1005,17 @@ packages: '@babel/core': ^7.0.0-0 resolution: integrity: sha512-qX8KZcmbvA23zDi+lk9s6hC1FM7jgLHYIjuLgULgc8QtYnmB3tAVIYkNoKRQ75qWBeyzcoMoK8ZQmogGtC/w0g== + /@babel/plugin-transform-typescript/7.11.0_@babel+core@7.10.2: + dependencies: + '@babel/core': 7.10.2 + '@babel/helper-create-class-features-plugin': 7.10.5_@babel+core@7.10.2 + '@babel/helper-plugin-utils': 7.10.4 + '@babel/plugin-syntax-typescript': 7.10.4_@babel+core@7.10.2 + dev: true + peerDependencies: + '@babel/core': ^7.0.0-0 + resolution: + integrity: sha512-edJsNzTtvb3MaXQwj8403B7mZoGu9ElDJQZOKjGUnvilquxBA3IQoEIOvkX/1O8xfAsnHS/oQhe2w/IXrr+w0w== /@babel/plugin-transform-unicode-escapes/7.10.1_@babel+core@7.10.2: dependencies: '@babel/core': 7.10.2 @@ -1021,6 +1135,16 @@ packages: '@babel/core': ^7.0.0-0 resolution: integrity: sha512-Rw0SxQ7VKhObmFjD/cUcKhPTtzpeviEFX1E6PgP+cYOhQ98icNqtINNFANlsdbQHrmeWnqdxA4Tmnl1jy5tp3Q== + /@babel/preset-typescript/7.10.4_@babel+core@7.10.2: + dependencies: + '@babel/core': 7.10.2 + '@babel/helper-plugin-utils': 7.10.4 + '@babel/plugin-transform-typescript': 7.11.0_@babel+core@7.10.2 + dev: true + peerDependencies: + '@babel/core': ^7.0.0-0 + resolution: + integrity: sha512-SdYnvGPv+bLlwkF2VkJnaX/ni1sMNetcGI1+nThF1gyv6Ph8Qucc4ZZAjM5yZcE/AKRXIOTZz7eSRDWOEjPyRQ== /@babel/runtime-corejs3/7.10.2: dependencies: core-js-pure: 3.6.5 @@ -1041,6 +1165,14 @@ packages: dev: true resolution: integrity: sha512-OQDg6SqvFSsc9A0ej6SKINWrpJiNonRIniYondK2ViKhB06i3c0s+76XUft71iqBEe9S1OKsHwPAjfHnuvnCig== + /@babel/template/7.10.4: + dependencies: + '@babel/code-frame': 7.10.4 + '@babel/parser': 7.11.4 + '@babel/types': 7.11.0 + dev: true + resolution: + integrity: sha512-ZCjD27cGJFUB6nmCB1Enki3r+L5kJveX9pq1SvAUKoICy6CZ9yD8xO086YXdYhvNjBdnekm4ZnaP5yC8Cs/1tA== /@babel/traverse/7.10.1: dependencies: '@babel/code-frame': 7.10.1 @@ -1055,6 +1187,20 @@ packages: dev: true resolution: integrity: sha512-C/cTuXeKt85K+p08jN6vMDz8vSV0vZcI0wmQ36o6mjbuo++kPMdpOYw23W2XH04dbRt9/nMEfA4W3eR21CD+TQ== + /@babel/traverse/7.11.0: + dependencies: + '@babel/code-frame': 7.10.4 + '@babel/generator': 7.11.4 + '@babel/helper-function-name': 7.10.4 + '@babel/helper-split-export-declaration': 7.11.0 + '@babel/parser': 7.11.4 + '@babel/types': 7.11.0 + debug: 4.1.1 + globals: 11.12.0 + lodash: 4.17.19 + dev: true + resolution: + integrity: sha512-ZB2V+LskoWKNpMq6E5UUCrjtDUh5IOTAyIl0dTjIEoXum/iKWkoIEKIRDnUucO6f+2FzNkE0oD4RLKoPIufDtg== /@babel/types/7.10.2: dependencies: '@babel/helper-validator-identifier': 7.10.1 @@ -1063,6 +1209,14 @@ packages: dev: true resolution: integrity: sha512-AD3AwWBSz0AWF0AkCN9VPiWrvldXq+/e3cHa4J89vo4ymjz1XwrBFFVZmkJTsQIPNk+ZVomPSXUJqq8yyjZsng== + /@babel/types/7.11.0: + dependencies: + '@babel/helper-validator-identifier': 7.10.4 + lodash: 4.17.19 + to-fast-properties: 2.0.0 + dev: true + resolution: + integrity: sha512-O53yME4ZZI0jO1EVGtF1ePGl0LHirG4P1ibcD80XyzZcKhcMFeCXmh4Xb1ifGBIV233Qg12x4rBfQgA+tmOukA== /@bcoe/v8-coverage/0.2.3: dev: true resolution: @@ -1366,6 +1520,22 @@ packages: rollup: ^1.20.0||^2.0.0 resolution: integrity: sha512-KIeAmueDDaYMqMBnUngLVVZhURwxA12nq/YB6nGm5/JpVyOMwI1fCVU3oL/dAnnLBG7oiPXntO5LHOiMrfNXCA== + /@rollup/plugin-typescript/5.0.2_0a1a0f524a9d27ad422e76168b31793b: + dependencies: + '@rollup/pluginutils': 3.1.0_rollup@2.15.0 + resolve: 1.17.0 + rollup: 2.15.0 + tslib: 2.0.1 + typescript: 4.0.2 + dev: true + engines: + node: '>=8.0.0' + peerDependencies: + rollup: ^2.14.0 + tslib: '*' + typescript: '>=3.4.0' + resolution: + integrity: sha512-CkS028Itwjqm1uLbFVfpJgtVtnNvZ+og/m6UlNRR5wOOnNTWPcVQzOu5xGdEX+WWJxdvWIqUq2uR/RBt2ZipWg== /@rollup/pluginutils/3.1.0_rollup@2.15.0: dependencies: '@types/estree': 0.0.39 @@ -3988,7 +4158,6 @@ packages: resolution: integrity: sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A== /lodash/4.17.19: - dev: false resolution: integrity: sha512-JNvd8XER9GQX0v2qJgsaN/mzFCNA5BRe/j8JN9d+tWyGLSodKQHKFicdwNYzWwI3wjRnaKPsGj1XkBjx/F96DQ== /loose-envify/1.4.0: @@ -5788,12 +5957,14 @@ specifiers: '@babel/core': ^7.10.2 '@babel/preset-env': ^7.10.2 '@babel/preset-react': ^7.10.1 + '@babel/preset-typescript': ^7.10.4 '@equinor/eds-icons': 'workspace:*' '@equinor/eds-tokens': 'workspace:*' '@rollup/plugin-babel': ^5.0.3 '@rollup/plugin-commonjs': ^13.0.0 '@rollup/plugin-json': ^4.1.0 '@rollup/plugin-node-resolve': ^8.0.1 + '@rollup/plugin-typescript': ^5.0.2 '@testing-library/jest-dom': ^5.9.0 '@testing-library/react': ^10.2.1 '@testing-library/react-hooks': ^3.3.0 diff --git a/libraries/core-react/rollup.config.js b/libraries/core-react/rollup.config.js index b040cabe00..5b9d4089d7 100644 --- a/libraries/core-react/rollup.config.js +++ b/libraries/core-react/rollup.config.js @@ -4,7 +4,9 @@ import commonjs from '@rollup/plugin-commonjs' import json from '@rollup/plugin-json' import babel from '@rollup/plugin-babel' import polyfill from 'rollup-plugin-polyfill' -import typescript from 'rollup-plugin-typescript2' +//import typescript from 'rollup-plugin-typescript2' +import typescript from '@rollup/plugin-typescript' + import pkg from './package.json' const peerDeps = Object.keys(pkg.peerDependencies || {}) @@ -20,24 +22,40 @@ const buildForStorybook = process.env.STORYBOOK export default [ { - input: 'src/index.js', + input: './src/index.js', external: peerDeps, watch: { clearScreen: true, include: ['./src/**', './../tokens/**'], }, - plugins: [ + /* plugins: [ json(), - resolve({ extensions: ['.jsx', '.js'] }), - typescript({ - tsconfig: 'tsconfig.json', - typescript: require('typescript'), - include: ['*.ts+(|x)', '**/*.ts+(|x)', '*.js+(|x)', '**/*.js+(|x)'], - exclude: ['node_modules/**'], - }), + resolve({ extensions: ['.jsx', '.js', '.tsx'] }), + typescript(), babel({ exclude: 'node_modules/**', presets: ['@babel/env', '@babel/preset-react'], + plugins: [ + 'babel-plugin-styled-components', + ['babel-plugin-react-docgen-typescript'], + ], + }), + commonjs(), + polyfill(['focus-visible']), + ], */ + plugins: [ + json(), + resolve({ extensions: ['.jsx', '.js', '.tsx', '.ts'] }), + typescript(), + babel({ + exclude: 'node_modules/**', + babelHelpers: 'bundled', + presets: [ + '@babel/preset-env', + '@babel/preset-react', + // '@babel/preset-typescript', + ], + extensions: ['.js', '.jsx', '.ts', '.tsx'], plugins: [ 'babel-plugin-styled-components', ...(buildForStorybook diff --git a/libraries/core-react/src/Divider/Divider.test.tsx b/libraries/core-react/src/Divider/Divider.test.tsx index abf5f6ebfa..c5b562b9c8 100644 --- a/libraries/core-react/src/Divider/Divider.test.tsx +++ b/libraries/core-react/src/Divider/Divider.test.tsx @@ -24,7 +24,7 @@ afterEach(cleanup) describe('Divider', () => { it('Has medium colour and medium spacing as default', () => { - const { container } = render() + const { container } = render() expect(container.firstChild).toHaveStyleRule('background-color', medium) expect(container.firstChild).toHaveStyleRule('margin-top', spacingMedium) }) @@ -37,11 +37,13 @@ describe('Divider', () => { expect(container.firstChild).toHaveStyleRule('background-color', lighter) }) it('Sets topMargin to small according to variant prop', () => { - const { container } = render() + const { container } = render() expect(container.firstChild).toHaveStyleRule('margin-top', spacingSmall) }) it('Can extend the css for the component', () => { - const { container } = render() + const { container } = render( + , + ) expect(container.firstChild).toHaveStyleRule('position', 'relative') expect(container.firstChild).toHaveStyleRule('margin-top', spacingSmall) }) diff --git a/libraries/core-react/src/Divider/Divider.tsx b/libraries/core-react/src/Divider/Divider.tsx index 5153b17b44..967b406e8f 100644 --- a/libraries/core-react/src/Divider/Divider.tsx +++ b/libraries/core-react/src/Divider/Divider.tsx @@ -19,11 +19,13 @@ const StyledDivider = styled.hr` ` type Props = { - /** Valid colors */ + /** All the beautiful colors */ + /** @default medium */ color?: 'lighter' | 'light' | 'medium' - /** Vertical spacing */ + /** Vertical spacings */ + /** @default medium */ variant?: 'small' | 'medium' - /** @ignore */ + /** OMG, I would like some champagne */ className?: string } @@ -38,4 +40,4 @@ export const Divider = forwardRef((props, ref) => { return }) -Divider.displayName = 'eds-divider' +Divider.displayName = 'Divider' diff --git a/libraries/core-react/tsconfig.json b/libraries/core-react/tsconfig.json index 39e94e6bb1..8ab5932e5d 100644 --- a/libraries/core-react/tsconfig.json +++ b/libraries/core-react/tsconfig.json @@ -12,7 +12,9 @@ "checkJs": true, "noEmit": true, "jsx": "react" + + //"declaration": true, }, - "include": ["src"], + "include": ["./src"], "exclude": ["node_modules"] } diff --git a/package.yaml b/package.yaml index 50d380c499..5d424b9302 100644 --- a/package.yaml +++ b/package.yaml @@ -18,7 +18,7 @@ scripts: @equinor/eds-core-react run build && pnpm --filter @equinor/eds-storybook-react install && pnpm --filter @equinor/eds-storybook-react run build - storybook-run: pnpm --filter @equinor/eds-storybook-react run dev + storybook-run: pnpm --filter @equinor/eds-storybook-react run dev storefront-run: pnpm --filter @equinor/eds-storefront run dev dockerize-storybook: docker build -t eds/storybook-react -f apps/storybook-react/Dockerfile.dev . storybook-docker-run: 'docker run -p 8080:80 eds/storybook-react' From 9a819c7fe5d6069c5e441ca5c2777efefd7efd14 Mon Sep 17 00:00:00 2001 From: Wenche Tollevsen Date: Fri, 28 Aug 2020 09:19:36 +0200 Subject: [PATCH 04/11] Remove classname, key and ref from props table --- .../stories/Divider/Divider.stories.jsx | 3 +- libraries/core-react/rollup.config.js | 30 +++++++------------ libraries/core-react/src/Divider/Divider.tsx | 9 +++--- 3 files changed, 16 insertions(+), 26 deletions(-) diff --git a/apps/storybook-react/stories/Divider/Divider.stories.jsx b/apps/storybook-react/stories/Divider/Divider.stories.jsx index 69e94a2020..9107b59036 100644 --- a/apps/storybook-react/stories/Divider/Divider.stories.jsx +++ b/apps/storybook-react/stories/Divider/Divider.stories.jsx @@ -2,9 +2,8 @@ import React from 'react' import styled from 'styled-components' import { withKnobs, select } from '@storybook/addon-knobs' import { Divider } from '@equinor/eds-core-react' -import mdx from './Divider.docs.mdx' +// import mdx from './Divider.docs.mdx' -console.debug('******** Divider *********', Divider) export default { title: 'Components/Divider', /* parameters: { diff --git a/libraries/core-react/rollup.config.js b/libraries/core-react/rollup.config.js index 5b9d4089d7..4b3aef02f7 100644 --- a/libraries/core-react/rollup.config.js +++ b/libraries/core-react/rollup.config.js @@ -19,7 +19,7 @@ const globals = { } const buildForStorybook = process.env.STORYBOOK - +const extensions = ['.jsx', '.js', '.tsx', '.ts'] export default [ { input: './src/index.js', @@ -28,24 +28,9 @@ export default [ clearScreen: true, include: ['./src/**', './../tokens/**'], }, - /* plugins: [ - json(), - resolve({ extensions: ['.jsx', '.js', '.tsx'] }), - typescript(), - babel({ - exclude: 'node_modules/**', - presets: ['@babel/env', '@babel/preset-react'], - plugins: [ - 'babel-plugin-styled-components', - ['babel-plugin-react-docgen-typescript'], - ], - }), - commonjs(), - polyfill(['focus-visible']), - ], */ plugins: [ json(), - resolve({ extensions: ['.jsx', '.js', '.tsx', '.ts'] }), + resolve({ extensions }), typescript(), babel({ exclude: 'node_modules/**', @@ -55,11 +40,18 @@ export default [ '@babel/preset-react', // '@babel/preset-typescript', ], - extensions: ['.js', '.jsx', '.ts', '.tsx'], + extensions, plugins: [ 'babel-plugin-styled-components', ...(buildForStorybook - ? ['babel-plugin-react-docgen-typescript'] + ? [ + [ + 'babel-plugin-react-docgen-typescript', + { + skipPropsWithName: ['ref', 'key', 'className'], + }, + ], + ] : []), ], }), diff --git a/libraries/core-react/src/Divider/Divider.tsx b/libraries/core-react/src/Divider/Divider.tsx index 967b406e8f..0783817dc7 100644 --- a/libraries/core-react/src/Divider/Divider.tsx +++ b/libraries/core-react/src/Divider/Divider.tsx @@ -19,13 +19,12 @@ const StyledDivider = styled.hr` ` type Props = { - /** All the beautiful colors */ - /** @default medium */ + /** Color variants + @default medium */ color?: 'lighter' | 'light' | 'medium' - /** Vertical spacings */ - /** @default medium */ + /** Vertical spacings + @default medium */ variant?: 'small' | 'medium' - /** OMG, I would like some champagne */ className?: string } From 166e24db5d68ff07afcf7c095a2d4d7c82dfe8d6 Mon Sep 17 00:00:00 2001 From: Wenche Tollevsen Date: Fri, 28 Aug 2020 09:31:12 +0200 Subject: [PATCH 05/11] Removed debug env --- apps/storybook-react/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/storybook-react/package.json b/apps/storybook-react/package.json index 889c983e74..2318746bb2 100644 --- a/apps/storybook-react/package.json +++ b/apps/storybook-react/package.json @@ -7,7 +7,7 @@ }, "scripts": { "start": "start-storybook -p 9000 --ci", - "dev": "DEBUG=docgen:* start-storybook -p 9000 --ci", + "dev": "start-storybook -p 9000 --ci", "build": "build-storybook -c .storybook -o dist", "lint": "eslint stories/**/*.jsx" }, From ca7a68288457f8b20fdb86764f8179e693be2845 Mon Sep 17 00:00:00 2001 From: Wenche Tollevsen Date: Fri, 28 Aug 2020 09:43:50 +0200 Subject: [PATCH 06/11] Removed configuration of typescript in storybook main --- apps/storybook-react/.storybook/main.js | 10 ---------- 1 file changed, 10 deletions(-) diff --git a/apps/storybook-react/.storybook/main.js b/apps/storybook-react/.storybook/main.js index 6319bb4072..63697222ea 100644 --- a/apps/storybook-react/.storybook/main.js +++ b/apps/storybook-react/.storybook/main.js @@ -13,14 +13,4 @@ module.exports = { }, }, ], - /* typescript: { - check: false, - checkOptions: {}, - reactDocgen: 'react-docgen-typescript', - reactDocgenTypescriptOptions: { - shouldExtractLiteralValuesFromEnum: true, - propFilter: (prop) => - prop.parent ? !/node_modules/.test(prop.parent.fileName) : true, - }, - }, */ } From 97a8092f3e2463ac74dfa6f15b8046e82ac92bb4 Mon Sep 17 00:00:00 2001 From: Wenche Tollevsen Date: Fri, 28 Aug 2020 09:44:38 +0200 Subject: [PATCH 07/11] Remove old testing stuffs --- apps/storybook-react/stories/Avatar.stories.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/storybook-react/stories/Avatar.stories.jsx b/apps/storybook-react/stories/Avatar.stories.jsx index d4ec012e2d..24530f0f18 100644 --- a/apps/storybook-react/stories/Avatar.stories.jsx +++ b/apps/storybook-react/stories/Avatar.stories.jsx @@ -1,7 +1,7 @@ import React from 'react' import { withKnobs, select, text, boolean } from '@storybook/addon-knobs' import styled from 'styled-components' -import { Avatar, Typography, Divider } from '@equinor/eds-core-react' +import { Avatar, Typography } from '@equinor/eds-core-react' import catImg from '../images/cat.jpg' const image = catImg From c1709160e3b15cf9fb09cd2d4c09dfc212441de0 Mon Sep 17 00:00:00 2001 From: Wenche Tollevsen Date: Fri, 28 Aug 2020 09:45:51 +0200 Subject: [PATCH 08/11] Remove old rollup typescript plugin --- libraries/core-react/package.json | 1 - libraries/core-react/pnpm-lock.yaml | 49 --------------------------- libraries/core-react/rollup.config.js | 1 - 3 files changed, 51 deletions(-) diff --git a/libraries/core-react/package.json b/libraries/core-react/package.json index 4163dfb1e2..110668144b 100644 --- a/libraries/core-react/package.json +++ b/libraries/core-react/package.json @@ -66,7 +66,6 @@ "react-dom": "^16.13.1", "rollup": "^2.15.0", "rollup-plugin-polyfill": "^3.0.0", - "rollup-plugin-typescript2": "^0.27.2", "styled-components": "4.4.1", "ts-jest": "^26.3.0", "tslib": "^2.0.1", diff --git a/libraries/core-react/pnpm-lock.yaml b/libraries/core-react/pnpm-lock.yaml index 88f1c1170c..00486fe5f8 100644 --- a/libraries/core-react/pnpm-lock.yaml +++ b/libraries/core-react/pnpm-lock.yaml @@ -34,7 +34,6 @@ devDependencies: react-dom: 16.13.1_react@16.13.1 rollup: 2.15.0 rollup-plugin-polyfill: 3.0.0 - rollup-plugin-typescript2: 0.27.2_rollup@2.15.0+typescript@4.0.2 styled-components: 4.4.1_4f54128445bc6f13bd713dcb3d91e98e ts-jest: 26.3.0_jest@26.0.1+typescript@4.0.2 tslib: 2.0.1 @@ -2888,16 +2887,6 @@ packages: node: '>=8' resolution: integrity: sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ== - /find-cache-dir/3.3.1: - dependencies: - commondir: 1.0.1 - make-dir: 3.1.0 - pkg-dir: 4.2.0 - dev: true - engines: - node: '>=8' - resolution: - integrity: sha512-t2GDMt3oGC/v+BMwzmllWDuJF/xcDtE5j/fCGbqDD7OLuJkj0cfh1YSA5VKPvwMeLFLNDBkwOKZ2X85jGLVftQ== /find-up/2.1.0: dependencies: locate-path: 2.0.0 @@ -2947,16 +2936,6 @@ packages: node: '>=0.10.0' resolution: integrity: sha1-QpD60n8T6Jvn8zeZxrxaCr//DRk= - /fs-extra/8.1.0: - dependencies: - graceful-fs: 4.2.4 - jsonfile: 4.0.0 - universalify: 0.1.2 - dev: true - engines: - node: '>=6 <7 || >=8' - resolution: - integrity: sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g== /fs-readdir-recursive/1.1.0: dev: true resolution: @@ -4050,12 +4029,6 @@ packages: hasBin: true resolution: integrity: sha512-KXPvOm8K9IJKFM0bmdn8QXh7udDh1g/giieX0NLCaMnb4hEiVFqnop2ImTXCc5e0/oHz3LTqmHGtExn5hfMkOA== - /jsonfile/4.0.0: - dev: true - optionalDependencies: - graceful-fs: 4.2.4 - resolution: - integrity: sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss= /jsprim/1.4.1: dependencies: assert-plus: 1.0.0 @@ -5053,21 +5026,6 @@ packages: dev: true resolution: integrity: sha512-LfJ1OR/wJrJdNDVNrdhVm7CgENfaNoQlFYMaQ0vlQH3zO+BMVrBMWDX9k6HVcr9gHsKbthrkiBzWRfFU9fr0hQ== - /rollup-plugin-typescript2/0.27.2_rollup@2.15.0+typescript@4.0.2: - dependencies: - '@rollup/pluginutils': 3.1.0_rollup@2.15.0 - find-cache-dir: 3.3.1 - fs-extra: 8.1.0 - resolve: 1.17.0 - rollup: 2.15.0 - tslib: 2.0.1 - typescript: 4.0.2 - dev: true - peerDependencies: - rollup: '>=1.26.3' - typescript: '>=2.4.0' - resolution: - integrity: sha512-zarMH2F8oT/NO6p20gl/jkts+WxyzOlhOIUwUU/EDx5e6ewdDPS/flwLj5XFuijUCr64bZwqKuRVwCPdXXYefQ== /rollup/2.15.0: dev: true engines: @@ -5716,12 +5674,6 @@ packages: node: '>=0.10.0' resolution: integrity: sha512-tJfXmxMeWYnczCVs7XAEvIV7ieppALdyepWMkHkwciRpZraG/xwT+s2JN8+pr1+8jCRf80FFzvr+MpQeeoF4Xg== - /universalify/0.1.2: - dev: true - engines: - node: '>= 4.0.0' - resolution: - integrity: sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg== /unset-value/1.0.0: dependencies: has-value: 0.3.1 @@ -5987,7 +5939,6 @@ specifiers: react-dom: ^16.13.1 rollup: ^2.15.0 rollup-plugin-polyfill: ^3.0.0 - rollup-plugin-typescript2: ^0.27.2 styled-components: 4.4.1 ts-jest: ^26.3.0 tslib: ^2.0.1 diff --git a/libraries/core-react/rollup.config.js b/libraries/core-react/rollup.config.js index 4b3aef02f7..eab2e5ddfe 100644 --- a/libraries/core-react/rollup.config.js +++ b/libraries/core-react/rollup.config.js @@ -4,7 +4,6 @@ import commonjs from '@rollup/plugin-commonjs' import json from '@rollup/plugin-json' import babel from '@rollup/plugin-babel' import polyfill from 'rollup-plugin-polyfill' -//import typescript from 'rollup-plugin-typescript2' import typescript from '@rollup/plugin-typescript' import pkg from './package.json' From 737500b705e4fc68340f6188aa929f6aa856ba13 Mon Sep 17 00:00:00 2001 From: Wenche Tollevsen Date: Fri, 28 Aug 2020 09:47:02 +0200 Subject: [PATCH 09/11] Delete copy'n pasted babel typescript transpiler, we use rollup plugin instead --- libraries/core-react/rollup.config.js | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/libraries/core-react/rollup.config.js b/libraries/core-react/rollup.config.js index eab2e5ddfe..560dfa8c49 100644 --- a/libraries/core-react/rollup.config.js +++ b/libraries/core-react/rollup.config.js @@ -34,11 +34,7 @@ export default [ babel({ exclude: 'node_modules/**', babelHelpers: 'bundled', - presets: [ - '@babel/preset-env', - '@babel/preset-react', - // '@babel/preset-typescript', - ], + presets: ['@babel/preset-env', '@babel/preset-react'], extensions, plugins: [ 'babel-plugin-styled-components', From a1fadc6e51b80cc0e129f86ed935f5058f7e4136 Mon Sep 17 00:00:00 2001 From: Wenche Tollevsen Date: Fri, 28 Aug 2020 09:48:22 +0200 Subject: [PATCH 10/11] Remove testing stuffs --- libraries/core-react/src/Divider/Divider.test.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/libraries/core-react/src/Divider/Divider.test.tsx b/libraries/core-react/src/Divider/Divider.test.tsx index c5b562b9c8..bb319d09aa 100644 --- a/libraries/core-react/src/Divider/Divider.test.tsx +++ b/libraries/core-react/src/Divider/Divider.test.tsx @@ -24,12 +24,12 @@ afterEach(cleanup) describe('Divider', () => { it('Has medium colour and medium spacing as default', () => { - const { container } = render() + const { container } = render() expect(container.firstChild).toHaveStyleRule('background-color', medium) expect(container.firstChild).toHaveStyleRule('margin-top', spacingMedium) }) it('Sets backgroundColor to light according to color prop', () => { - const { container } = render() + const { container } = render() expect(container.firstChild).toHaveStyleRule('background-color', light) }) it('Sets backgroundColor to lighter according to color prop', () => { @@ -37,7 +37,7 @@ describe('Divider', () => { expect(container.firstChild).toHaveStyleRule('background-color', lighter) }) it('Sets topMargin to small according to variant prop', () => { - const { container } = render() + const { container } = render() expect(container.firstChild).toHaveStyleRule('margin-top', spacingSmall) }) it('Can extend the css for the component', () => { From beeeaf40bc4e55d70a97626a2d850287c587e1ad Mon Sep 17 00:00:00 2001 From: Wenche Tollevsen Date: Fri, 28 Aug 2020 10:02:30 +0200 Subject: [PATCH 11/11] Fix test --- libraries/core-react/src/Divider/Divider.test.tsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/libraries/core-react/src/Divider/Divider.test.tsx b/libraries/core-react/src/Divider/Divider.test.tsx index bb319d09aa..abf5f6ebfa 100644 --- a/libraries/core-react/src/Divider/Divider.test.tsx +++ b/libraries/core-react/src/Divider/Divider.test.tsx @@ -29,7 +29,7 @@ describe('Divider', () => { expect(container.firstChild).toHaveStyleRule('margin-top', spacingMedium) }) it('Sets backgroundColor to light according to color prop', () => { - const { container } = render() + const { container } = render() expect(container.firstChild).toHaveStyleRule('background-color', light) }) it('Sets backgroundColor to lighter according to color prop', () => { @@ -41,9 +41,7 @@ describe('Divider', () => { expect(container.firstChild).toHaveStyleRule('margin-top', spacingSmall) }) it('Can extend the css for the component', () => { - const { container } = render( - , - ) + const { container } = render() expect(container.firstChild).toHaveStyleRule('position', 'relative') expect(container.firstChild).toHaveStyleRule('margin-top', spacingSmall) })