diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 0000000000..f48045523d --- /dev/null +++ b/.prettierignore @@ -0,0 +1 @@ +__testfixtures__ diff --git a/.storybook/blocks/example/LiveExample.tsx b/.storybook/blocks/example/LiveExample.tsx index 31291799e6..5167f017df 100644 --- a/.storybook/blocks/example/LiveExample.tsx +++ b/.storybook/blocks/example/LiveExample.tsx @@ -2,7 +2,6 @@ import React, { FC, useState } from 'react'; import { LiveProvider, LiveEditor, LivePreview } from 'react-live'; import { ActionBar } from '@storybook/components'; import { PrismTheme } from 'prism-react-renderer'; - import { ErrorSection } from './ErrorSection'; import globalScope from './utils/scope'; @@ -45,10 +44,16 @@ export const LiveExample: FC = ({ }, ]; + const code2 = code + .split('\n') + .filter(line => line.startsWith('//') === false) + .join('\n') + .trim(); + return ( ['function', 'object'].some(t => typeof component === t) && ['displayName', '$$typeof'].some(p => p in component); +const isComponentsMap = (component: any) => + component && Object.values(component).some(isComponent) + const components = req.keys().reduce((acc: Record>, key) => { Object.entries(req(key)).forEach(([componentName, component]: [string, any]) => { - if (isComponent(component)) { + // if (isComponent(component) || isComponentsMap(component)) { acc[componentName] = component; - } + // } }); return acc; @@ -26,4 +31,6 @@ export default { ...components, ...grid, ...glyph, + ...dateUtils, + ...knobs, }; diff --git a/.storybook/main.js b/.storybook/main.js index 1f6f0003ab..4e478d5336 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -19,7 +19,7 @@ const addPackagesDir = config => { }; module.exports = { - stories: ['../packages/**/*.stories.@(ts|md)x'], + stories: ['../packages/**/*.stories.@(ts|md)x', '../docs/**/*.stories.@(ts|md)x'], addons: [ '@storybook/addon-knobs', '@storybook/addon-docs', diff --git a/CHANGELOG.md b/CHANGELOG.md index 735924f888..9c9be1eb1b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,94 @@ +## [18.2.1](https://github.com/alfa-laboratory/core-components/compare/v18.2.0...v18.2.1) (2021-07-02) + + +### Bug Fixes + +* **base-modal:** resubscribe observer when content node changed ([2fef06e](https://github.com/alfa-laboratory/core-components/commit/2fef06eea01354f58663a5f4470606123d31f9d4)) + +# [18.2.0](https://github.com/alfa-laboratory/core-components/compare/v18.1.0...v18.2.0) (2021-06-30) + + +### Bug Fixes + +* **dark-theme-styles-injector:** fix rendering passed styles ([#723](https://github.com/alfa-laboratory/core-components/issues/723)) ([882841c](https://github.com/alfa-laboratory/core-components/commit/882841c1c43d5570652ab3fcc199958060b92c57)) + + +### Features + +* **calendar-range:** pass props to render calendar in popper ([#702](https://github.com/alfa-laboratory/core-components/issues/702)) ([4369e46](https://github.com/alfa-laboratory/core-components/commit/4369e462116dc1d240f95f811be67639b10dedb6)) + +# [18.1.0](https://github.com/alfa-laboratory/core-components/compare/v18.0.0...v18.1.0) (2021-06-29) + + +### Features + +* **password-input:** add password input (PDS-233) ([#691](https://github.com/alfa-laboratory/core-components/issues/691)) ([d872e4d](https://github.com/alfa-laboratory/core-components/commit/d872e4dd18fd5db472864fbc2676749b812da00f)) + +# [18.0.0](https://github.com/alfa-laboratory/core-components/compare/v17.6.0...v18.0.0) (2021-06-28) + + +### Bug Fixes + +* **base-modal:** fix has scroll bug ([#712](https://github.com/alfa-laboratory/core-components/issues/712)) ([a6749a1](https://github.com/alfa-laboratory/core-components/commit/a6749a149d511b28cc59aaec188d59c380c64243)) +* **space:** remove last element margin ([#713](https://github.com/alfa-laboratory/core-components/issues/713)) ([bc36cf7](https://github.com/alfa-laboratory/core-components/commit/bc36cf7db35cbd7c5d36c178a50bbd27d2f11b0c)) +* **typography:** add missing weight styles ([#719](https://github.com/alfa-laboratory/core-components/issues/719)) ([6b855aa](https://github.com/alfa-laboratory/core-components/commit/6b855aa97eff918e0e16f957c4c05bb7f2d8f4fe)) + + +### Features + +* **bottom-sheet:** new component (PDS-228) ([#645](https://github.com/alfa-laboratory/core-components/issues/645)) ([1f7391d](https://github.com/alfa-laboratory/core-components/commit/1f7391df16a270d8a3a28b8ebaf98d0ed0928bc8)), closes [#642](https://github.com/alfa-laboratory/core-components/issues/642) [#642](https://github.com/alfa-laboratory/core-components/issues/642) [#646](https://github.com/alfa-laboratory/core-components/issues/646) [#646](https://github.com/alfa-laboratory/core-components/issues/646) [#634](https://github.com/alfa-laboratory/core-components/issues/634) [#635](https://github.com/alfa-laboratory/core-components/issues/635) [#634](https://github.com/alfa-laboratory/core-components/issues/634) [#635](https://github.com/alfa-laboratory/core-components/issues/635) [#648](https://github.com/alfa-laboratory/core-components/issues/648) [#647](https://github.com/alfa-laboratory/core-components/issues/647) [#630](https://github.com/alfa-laboratory/core-components/issues/630) [#648](https://github.com/alfa-laboratory/core-components/issues/648) [#630](https://github.com/alfa-laboratory/core-components/issues/630) [#669](https://github.com/alfa-laboratory/core-components/issues/669) +* **confirmation:** add property for change retry button text ([#720](https://github.com/alfa-laboratory/core-components/issues/720)) ([c0f7688](https://github.com/alfa-laboratory/core-components/commit/c0f76888cffff8ad4169769bc4615429663352a5)) +* **skeleton:** add display var, change default to block ([#718](https://github.com/alfa-laboratory/core-components/issues/718)) ([27aaa60](https://github.com/alfa-laboratory/core-components/commit/27aaa605a958d932a52904556ac2fe1dd59356af)) + + +### BREAKING CHANGES + +* **skeleton:** inline-block changes to block +* **confirmation:** buttonRetryText renamed to buttonReturnText + +Co-authored-by: Alexander Soldatov + +# [17.6.0](https://github.com/alfa-laboratory/core-components/compare/v17.5.1...v17.6.0) (2021-06-22) + + +### Bug Fixes + +* **intl-phone-input:** format input value ([#703](https://github.com/alfa-laboratory/core-components/issues/703)) ([b5e91ed](https://github.com/alfa-laboratory/core-components/commit/b5e91edf03867f5dc93fab78425f7c1a128afd9b)) + + +### Features + +* **dark-theme-styles-injector:** add prop for selector ([#709](https://github.com/alfa-laboratory/core-components/issues/709)) ([f74cdc7](https://github.com/alfa-laboratory/core-components/commit/f74cdc7b312321fcb111f1c64f21714ee403e513)) +* **slider-input:** design updates ([#673](https://github.com/alfa-laboratory/core-components/issues/673)) ([794e3cc](https://github.com/alfa-laboratory/core-components/commit/794e3cc99a3b61ec4faa630469dae7e49a56ee0a)) +* **textarea:** add value counter ([#695](https://github.com/alfa-laboratory/core-components/issues/695)) ([cbc6bd3](https://github.com/alfa-laboratory/core-components/commit/cbc6bd3eaa48e3df2791d23e156c7c664d67ff49)) + +## [17.5.1](https://github.com/alfa-laboratory/core-components/compare/v17.5.0...v17.5.1) (2021-06-21) + + +### Bug Fixes + +* **calendar-with-skeleton:** ref & six weeks height issues ([#705](https://github.com/alfa-laboratory/core-components/issues/705)) ([907ebe1](https://github.com/alfa-laboratory/core-components/commit/907ebe18641ee2e7e91fc4622527404c20867a54)) + +# [17.5.0](https://github.com/alfa-laboratory/core-components/compare/v17.4.2...v17.5.0) (2021-06-17) + + +### Bug Fixes + +* **select:** fix checkmark position on click theme ([#699](https://github.com/alfa-laboratory/core-components/issues/699)) ([0a3bab5](https://github.com/alfa-laboratory/core-components/commit/0a3bab52278b4db8f327a8bf5da97cfb5acecc6a)) + + +### Features + +* **notification:** add null autoCloseDelay ([#698](https://github.com/alfa-laboratory/core-components/issues/698)) ([6c2f0e0](https://github.com/alfa-laboratory/core-components/commit/6c2f0e083ec94797e8193b19d8bbafd042a5c2a5)) +* **select:** add useSelectWithLoading preset ([#693](https://github.com/alfa-laboratory/core-components/issues/693)) ([12d542f](https://github.com/alfa-laboratory/core-components/commit/12d542f11dddcd022c1ba895e4105115be0b98b2)) + +## [17.4.2](https://github.com/alfa-laboratory/core-components/compare/v17.4.1...v17.4.2) (2021-06-09) + + +### Bug Fixes + +* **skeleton:** remove vars that purge kills ([886d1b2](https://github.com/alfa-laboratory/core-components/commit/886d1b24b144d9d277821d3264f71a93c7a1b146)) + ## [17.4.1](https://github.com/alfa-laboratory/core-components/compare/v17.4.0...v17.4.1) (2021-06-08) diff --git a/bin/build-themes.js b/bin/build-themes.js index 3b7f39bb2d..418ac84112 100755 --- a/bin/build-themes.js +++ b/bin/build-themes.js @@ -91,7 +91,7 @@ const processPostCss = async (content, cssFile) => fs.writeFileSync(`../css/colors/${path.basename(file)}`, css); fs.writeFileSync( `../css/colors/${path.basename(file).replace(/\.css$/, '.js')}`, - `module.exports = \`${css}\``, + `module.exports = \`${vars}\``, ); }); diff --git a/bin/build.sh b/bin/build.sh index cb0386b471..d2501f6d35 100755 --- a/bin/build.sh +++ b/bin/build.sh @@ -14,6 +14,7 @@ echo "start build on $CONCURRENCY parallel process" lerna exec --concurrency $CONCURRENCY \ --ignore @alfalab/core-components-vars \ --ignore @alfalab/core-components-themes \ + --ignore @alfalab/core-components-codemod \ -- $(pwd)/bin/rollup.sh # собираю css пакеты diff --git a/docs/12.migrations.stories.mdx b/docs/12.migrations.stories.mdx new file mode 100644 index 0000000000..9cb90ee0c6 --- /dev/null +++ b/docs/12.migrations.stories.mdx @@ -0,0 +1,6 @@ +import { Description } from '@storybook/addon-docs/blocks'; +import migrationsReadme from '../packages/codemod/README.md'; + + + +{migrationsReadme} diff --git a/jest.codemod.config.js b/jest.codemod.config.js new file mode 100644 index 0000000000..f053ebf797 --- /dev/null +++ b/jest.codemod.config.js @@ -0,0 +1 @@ +module.exports = {}; diff --git a/jest.config.js b/jest.config.js index 79e5620fa1..171940c869 100644 --- a/jest.config.js +++ b/jest.config.js @@ -19,6 +19,7 @@ module.exports = { '\\.css$': 'identity-obj-proxy', }, testMatch: ['**/*.test.ts?(x)', '!**/*.screenshots.test.ts?(x)'], + testPathIgnorePatterns: ['codemod'], coverageReporters: ['lcov', 'text', 'text-summary', 'clover'], coveragePathIgnorePatterns: ['index.ts'], }; diff --git a/lerna.json b/lerna.json index 053b4864d2..a7963b6c68 100644 --- a/lerna.json +++ b/lerna.json @@ -9,7 +9,8 @@ "ignoreChanges": [ "*.stories.*", "**/__snapshots__/**", - "*.test.*" + "*.test.*", + "**/codemod/**" ] } diff --git a/package.json b/package.json index 956c10e65b..bf19657b0f 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@alfalab/core-components", - "version": "17.4.1", + "version": "18.2.1", "private": true, "workspaces": [ "packages/*" @@ -27,6 +27,7 @@ "lint:js": "eslint ./packages --ext .ts,.tsx,.js,.jsx", "test": "jest --watchAll=false --env=jsdom-sixteen", "test:screenshots": "jest --config=jest.screenshots.config.js", + "test:codemod": "jest --config=jest.codemod.config.js packages/codemod/", "format": "prettier --write \"./{packages,bin}/**/*.{ts,tsx,js,jsx,css,json}\"", "clean": "rimraf packages/*/{tsconfig.tsbuildinfo,dist} && rimraf {dist,build}", "cm": "git-cz", @@ -170,7 +171,7 @@ "raw-loader": "^4.0.1", "react-docgen-typescript-loader": "^3.6.0", "react-github-btn": "^1.2.0", - "react-live": "^2.2.3", + "react-live": "^2.3.0", "react-scripts": "^3.3.1", "replace-in-file": "^5.0.2", "rimraf": "^3.0.2", diff --git a/packages/alert/src/docs/Component.stories.mdx b/packages/alert/src/docs/Component.stories.mdx index 2213790e77..23489031a2 100644 --- a/packages/alert/src/docs/Component.stories.mdx +++ b/packages/alert/src/docs/Component.stories.mdx @@ -4,11 +4,11 @@ import { Container, Row, Col } from 'storybook/blocks/grid'; import { Tabs } from 'storybook/blocks/tabs'; import { ComponentHeader } from 'storybook/blocks/component-header'; -import { Alert } from '../Component'; import { Button } from '../../../button/src'; -import Description from './description.mdx' +import { Alert } from '../Component'; import { name, version } from '../../package.json'; +import Description from './description.mdx' } props={} /> diff --git a/packages/alert/src/docs/description.mdx b/packages/alert/src/docs/description.mdx index 4de83886be..56767bce04 100644 --- a/packages/alert/src/docs/description.mdx +++ b/packages/alert/src/docs/description.mdx @@ -1,7 +1,5 @@ Информирует пользователя о чем-либо. Может использоваться как сообщение, комментарий или предупреждение от системы. ```tsx live - - Вам одобрено. Согласитесь на предложение - +Вам одобрено. Согласитесь на предложение ``` diff --git a/packages/amount-input/CHANGELOG.md b/packages/amount-input/CHANGELOG.md index 568ad70665..3a2a77054d 100644 --- a/packages/amount-input/CHANGELOG.md +++ b/packages/amount-input/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [4.0.20](https://github.com/alfa-laboratory/core-components/compare/@alfalab/core-components-amount-input@4.0.19...@alfalab/core-components-amount-input@4.0.20) (2021-06-22) + +**Note:** Version bump only for package @alfalab/core-components-amount-input + + + + + ## [4.0.19](https://github.com/alfa-laboratory/core-components/compare/@alfalab/core-components-amount-input@4.0.18...@alfalab/core-components-amount-input@4.0.19) (2021-05-31) **Note:** Version bump only for package @alfalab/core-components-amount-input diff --git a/packages/amount-input/package.json b/packages/amount-input/package.json index 8541038086..19de3cbe5b 100644 --- a/packages/amount-input/package.json +++ b/packages/amount-input/package.json @@ -1,6 +1,6 @@ { "name": "@alfalab/core-components-amount-input", - "version": "4.0.19", + "version": "4.0.20", "description": "", "keywords": [], "license": "MIT", @@ -19,8 +19,8 @@ "react": "^16.9.0 || ^17.0.1" }, "dependencies": { - "@alfalab/core-components-input": "^6.1.3", - "@alfalab/core-components-with-suffix": "^2.4.18", + "@alfalab/core-components-input": "^6.2.0", + "@alfalab/core-components-with-suffix": "^2.4.19", "@alfalab/data": "^0.4.0", "@alfalab/utils": "^1.1.1", "classnames": "^2.2.6" diff --git a/packages/amount-input/src/docs/Component.stories.mdx b/packages/amount-input/src/docs/Component.stories.mdx index 5a78278298..c83d43ec0f 100644 --- a/packages/amount-input/src/docs/Component.stories.mdx +++ b/packages/amount-input/src/docs/Component.stories.mdx @@ -1,17 +1,15 @@ -import Icon from '@alfalab/icons-glyph/StarMIcon'; -import { Meta, Story, Preview, Props } from '@storybook/addon-docs/blocks'; +import { Meta, Story, Props } from '@storybook/addon-docs/blocks'; import { text, select, boolean, number } from '@storybook/addon-knobs'; import { action } from '@storybook/addon-actions'; -import { Container, Row, Col } from 'storybook/blocks/grid'; +import Icon from '@alfalab/icons-glyph/StarMIcon'; import { ComponentHeader } from 'storybook/blocks/component-header'; import { CssVars } from 'storybook/blocks/css-vars'; import { Tabs } from 'storybook/blocks/tabs'; -import Description from './description.mdx'; -import styles from '!!raw-loader!../index.module.css'; - import { AmountInput } from '../Component'; import { name, version } from '../../package.json'; +import Description from './description.mdx'; +import styles from '!!raw-loader!../index.module.css'; - +``` ### Uncontrolled-way Можно ничего не передавать в компонент и реагировать на 'onChange' - - - +```tsx live + +``` ### Controlled-way Компонент может быть использован как controlled с помощью `onChange` и `selected`: - - {React.createElement(() => { - const [value, setValue] = React.useState(10000); - const [suggests] = React.useState([ - { currency: 'RUR', minorUnits: 100, value: 15600 }, - { currency: 'RUR', minorUnits: 100, value: 500 }, - { currency: 'RUR', minorUnits: 100, value: null }, - { currency: 'RUR', minorUnits: 100, value: 0 }, - ]); - const handleChange = (event, payload) => { - setValue(payload.value); - }; - return ( - - - - - - - { String(value) } - - {suggests.map((s) => ( - - ))} - - - ); - })} - +```tsx live +render(() => { + const [value, setValue] = React.useState(10000); + + const [suggests] = React.useState([ + { currency: 'RUR', minorUnits: 100, value: 15600 }, + { currency: 'RUR', minorUnits: 100, value: 500 }, + { currency: 'RUR', minorUnits: 100, value: null }, + { currency: 'RUR', minorUnits: 100, value: 0 }, + ]); + + const handleChange = (event, payload) => { + setValue(payload.value); + }; + + return ( + + + + + {suggests.map(s => ( + + ))} + + + ); +}); +``` diff --git a/packages/amount/src/docs/component.stories.mdx b/packages/amount/src/docs/component.stories.mdx index ad9600ca8c..d4fbab5ec2 100644 --- a/packages/amount/src/docs/component.stories.mdx +++ b/packages/amount/src/docs/component.stories.mdx @@ -1,12 +1,12 @@ import { Meta, Story, Preview, Props } from '@storybook/addon-docs/blocks'; import { text, select, boolean, number } from '@storybook/addon-knobs'; +import { getAllCurrencyCodes } from '@alfalab/utils'; import { Container, Row, Col } from 'storybook/blocks/grid'; import { ComponentHeader } from 'storybook/blocks/component-header'; import { Tabs } from 'storybook/blocks/tabs'; import { CssVars } from 'storybook/blocks/css-vars'; -import { Amount } from '../.'; -import { getAllCurrencyCodes } from '@alfalab/utils'; +import { Amount } from '../component'; import { name, version } from '../../package.json'; import Description from './description.mdx' import styles from '!!raw-loader!../index.module.css'; @@ -77,8 +77,8 @@ import styles from '!!raw-loader!../index.module.css'; import { Amount } from '@alfalab/core-components-amount'; ``` -} props={} cssVars={} -/> \ No newline at end of file +/> diff --git a/packages/amount/src/docs/description.mdx b/packages/amount/src/docs/description.mdx index 79931f066f..ae011dc752 100644 --- a/packages/amount/src/docs/description.mdx +++ b/packages/amount/src/docs/description.mdx @@ -1,17 +1,13 @@ -import { Container, Row, Col } from 'storybook/blocks/grid'; - -import { Preview } from '@storybook/addon-docs/blocks'; - -import { Typography } from '../../../typography/src'; -import { Amount } from '../.'; - Компонент для отображения суммы, согласно гайдлайну: https://design.alfabank.ru/patterns/amount +```tsx live +// import { Typography } from '@alfalab/core-components-typography'; + - +``` ## Контекст использования @@ -19,82 +15,62 @@ https://design.alfabank.ru/patterns/amount - `view="withZeroMinorPart"`: показывает минорную часть, даже если её значение равно 0 - - - - - - Значение - - - 1234500 - - - 1234567 - - - - - view="default" - - - - - - - - - - - view="withZeroMinorPart" - - - - - - - - - - - +```tsx live + + + + Значение + 1234500 + 1234567 + + + view="default" + + + + + + + + + view="withZeroMinorPart" + + + + + + + + + +``` - Внутри заголовка - - -

- -

- - +```tsx live +

+ +

+``` - Внутри параграфа - - -

- -

- - +```tsx live +

+ +

+``` - Внутри красного текста - - - - - - - +```tsx live + + + +``` - Без стилей - - - - - - - +```tsx live + +``` diff --git a/packages/attach/CHANGELOG.md b/packages/attach/CHANGELOG.md index 137e73b962..d70dc3aeb0 100644 --- a/packages/attach/CHANGELOG.md +++ b/packages/attach/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [2.0.2](https://github.com/alfa-laboratory/core-components/compare/@alfalab/core-components-attach@2.0.1...@alfalab/core-components-attach@2.0.2) (2021-06-22) + +**Note:** Version bump only for package @alfalab/core-components-attach + + + + + ## [2.0.1](https://github.com/alfa-laboratory/core-components/compare/@alfalab/core-components-attach@2.0.0...@alfalab/core-components-attach@2.0.1) (2021-05-31) **Note:** Version bump only for package @alfalab/core-components-attach diff --git a/packages/attach/package.json b/packages/attach/package.json index 6c2a229f0c..a386a920a1 100644 --- a/packages/attach/package.json +++ b/packages/attach/package.json @@ -1,6 +1,6 @@ { "name": "@alfalab/core-components-attach", - "version": "2.0.1", + "version": "2.0.2", "description": "", "keywords": [], "license": "MIT", @@ -20,7 +20,7 @@ }, "dependencies": { "@alfalab/core-components-button": "^3.0.1", - "@alfalab/core-components-keyboard-focusable": "^1.2.11", + "@alfalab/core-components-keyboard-focusable": "^1.3.0", "@alfalab/core-components-progress-bar": "^1.1.6", "@alfalab/icons-classic": "^1.7.0", "@alfalab/utils": "^1.1.1", diff --git a/packages/attach/src/docs/Component.stories.mdx b/packages/attach/src/docs/Component.stories.mdx index 66ca04c91a..5c09670cf6 100644 --- a/packages/attach/src/docs/Component.stories.mdx +++ b/packages/attach/src/docs/Component.stories.mdx @@ -3,10 +3,9 @@ import { text, select, boolean, number } from '@storybook/addon-knobs'; import { ComponentHeader } from 'storybook/blocks/component-header'; import { Tabs } from 'storybook/blocks/tabs'; -import Description from './description.mdx'; import { Attach } from '../Component'; import { name, version } from '../../package.json'; - +import Description from './description.mdx'; - @@ -29,7 +27,6 @@ import { name, version } from '../../package.json'; /> - } props={} /> - diff --git a/packages/attach/src/docs/description.mdx b/packages/attach/src/docs/description.mdx index 40c355421d..9f12e3b1e8 100644 --- a/packages/attach/src/docs/description.mdx +++ b/packages/attach/src/docs/description.mdx @@ -1,5 +1,5 @@ -import { Attach } from '../Component' - Компонент прикрепления файлов. - \ No newline at end of file +```tsx live + +``` diff --git a/packages/backdrop/src/docs/Component.stories.mdx b/packages/backdrop/src/docs/Component.stories.mdx index 6b49980ae2..8b0c073616 100644 --- a/packages/backdrop/src/docs/Component.stories.mdx +++ b/packages/backdrop/src/docs/Component.stories.mdx @@ -1,13 +1,13 @@ import { Meta, Props, Preview, Story } from '@storybook/addon-docs/blocks'; import {boolean, select, text} from '@storybook/addon-knobs'; -import { Container, Row, Col } from 'storybook/blocks/grid'; import { ComponentHeader } from 'storybook/blocks/component-header'; import { Tabs } from 'storybook/blocks/tabs' import { CssVars } from 'storybook/blocks/css-vars'; -import vars from '!!raw-loader!../vars.css'; + import { Backdrop } from '../Component'; import { version } from '../../package.json'; import Description from './description.mdx'; +import vars from '!!raw-loader!../vars.css'; } props={} - cssProps={} + cssVars={} /> diff --git a/packages/backdrop/src/docs/description.mdx b/packages/backdrop/src/docs/description.mdx index eaae1c7d48..4e84a9ca56 100644 --- a/packages/backdrop/src/docs/description.mdx +++ b/packages/backdrop/src/docs/description.mdx @@ -1,6 +1,17 @@ -import { Container, Row, Col } from 'storybook/blocks/grid'; +Компонент для затемнения фона. +Поддерживает все параметры из [CSSTransition](http://reactcommunity.org/react-transition-group/css-transition). -import { Backdrop } from '../Component' +```tsx live +render(() => { + const [open, setOpen] = React.useState(false); -Компонент для затемнения фона. -Поддерживает все параметры из [CSSTransition](http://reactcommunity.org/react-transition-group/css-transition). \ No newline at end of file + return ( +
+ + setOpen(false)} /> +
+ ); +}); +``` diff --git a/packages/badge/src/docs/Component.stories.mdx b/packages/badge/src/docs/Component.stories.mdx index 01e2709fcd..1539a688e8 100644 --- a/packages/badge/src/docs/Component.stories.mdx +++ b/packages/badge/src/docs/Component.stories.mdx @@ -1,6 +1,5 @@ import { Meta, Story, Props } from '@storybook/addon-docs/blocks'; import { select, number, boolean } from '@storybook/addon-knobs'; -import { Container, Row, Col } from 'storybook/blocks/grid'; import { ComponentHeader } from 'storybook/blocks/component-header'; import { Tabs } from 'storybook/blocks/tabs'; import { CssVars } from 'storybook/blocks/css-vars'; @@ -12,10 +11,10 @@ import { StopCircleMIcon } from '@alfalab/icons-glyph'; import { InformationCircleMIcon } from '@alfalab/icons-glyph'; import { ClockMIcon } from '@alfalab/icons-glyph'; -import Description from './description.mdx'; -import styles from '!!raw-loader!../index.module.css'; import { Badge } from '../Component'; import { name, version } from '../../package.json'; +import Description from './description.mdx'; +import styles from '!!raw-loader!../index.module.css'; } props={} cssVars={} -/> \ No newline at end of file +/> diff --git a/packages/badge/src/docs/description.mdx b/packages/badge/src/docs/description.mdx index d5f5d0ed6e..009d314271 100644 --- a/packages/badge/src/docs/description.mdx +++ b/packages/badge/src/docs/description.mdx @@ -1,16 +1,8 @@ -import { Preview } from '@storybook/addon-docs/blocks'; -import { Container, Row, Col } from 'storybook/blocks/grid'; +```tsx live + +``` -import { CheckmarkOnCircleMIcon } from '@alfalab/icons-glyph'; -import { AlertCircleMIcon } from '@alfalab/icons-glyph'; -import { CrossCircleMIcon } from '@alfalab/icons-glyph'; -import { StopCircleMIcon } from '@alfalab/icons-glyph'; -import { InformationCircleMIcon } from '@alfalab/icons-glyph'; -import { ClockMIcon } from '@alfalab/icons-glyph'; - -import { Badge } from '../Component' - -Бывает двух видов: бейдж и стикер. +## Виды бейджей ### Бейдж @@ -19,109 +11,151 @@ import { Badge } from '../Component' Счётчик действий, уведомлений или сообщений. Если `content` не передан, то отображается точка. Если `content` больше 99, то отображается 99+. - - - - - - - - - - - - - - - +```tsx live + + + + + + + + + + + + + +``` ### Стикер + `view="icon"` Отражает иконку статуса. Внутри стикера используется любая круглая одноцветная иконка. Для управления цветом иконки используется проп `iconColor`, для управления цветом подложки используется css-переменная `--badge-icon-bg-color` (по дефолту белый). - - - - - } /> - - - } /> - - - } /> - - - } /> - - - } /> - - - } /> - - - } /> - - - } /> - - - - - } /> - - - } /> - - - } /> - - - } /> - - - } /> - - - } /> - - - } /> - - - } /> - - - - - } /> - - - } /> - - - } /> - - - } /> - - - } /> - - - } /> - - - } /> - - - } /> - - - - +```tsx live +// import { CheckmarkOnCircleMIcon } from '@alfalab/icons-glyph/CheckmarkOnCircleMIcon'; + + + + } /> + + + } /> + + + } /> + + + } /> + + + } /> + + + } /> + + + } /> + + + } /> + + + + + } /> + + + } /> + + + } /> + + + } /> + + + } /> + + + } /> + + + } /> + + + } /> + + + + + } + /> + + + } + /> + + + } + /> + + + } + /> + + + } + /> + + + } + /> + + + } + /> + + + } + /> + + + +``` diff --git a/packages/bank-card/CHANGELOG.md b/packages/bank-card/CHANGELOG.md index b1c75b8b02..7e166a6335 100644 --- a/packages/bank-card/CHANGELOG.md +++ b/packages/bank-card/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [3.4.8](https://github.com/alfa-laboratory/core-components/compare/@alfalab/core-components-bank-card@3.4.7...@alfalab/core-components-bank-card@3.4.8) (2021-06-22) + +**Note:** Version bump only for package @alfalab/core-components-bank-card + + + + + ## [3.4.7](https://github.com/alfa-laboratory/core-components/compare/@alfalab/core-components-bank-card@3.4.6...@alfalab/core-components-bank-card@3.4.7) (2021-06-08) **Note:** Version bump only for package @alfalab/core-components-bank-card diff --git a/packages/bank-card/package.json b/packages/bank-card/package.json index f3c4f6418c..68befabddd 100644 --- a/packages/bank-card/package.json +++ b/packages/bank-card/package.json @@ -1,6 +1,6 @@ { "name": "@alfalab/core-components-bank-card", - "version": "3.4.7", + "version": "3.4.8", "description": "Bank card component", "keywords": [], "license": "MIT", @@ -20,7 +20,7 @@ "react-dom": "^16.9.0 || ^17.0.1" }, "dependencies": { - "@alfalab/core-components-masked-input": "^3.2.26", + "@alfalab/core-components-masked-input": "^3.2.27", "@alfalab/icons-classic": "^1.7.0", "@alfalab/icons-glyph": "^1.26.0", "@alfalab/icons-logotype": "^1.4.0", diff --git a/packages/bank-card/src/docs/Component.stories.mdx b/packages/bank-card/src/docs/Component.stories.mdx index f7cd0566f2..fc534372d8 100644 --- a/packages/bank-card/src/docs/Component.stories.mdx +++ b/packages/bank-card/src/docs/Component.stories.mdx @@ -3,9 +3,9 @@ import { text, select } from '@storybook/addon-knobs'; import { ComponentHeader } from 'storybook/blocks/component-header'; import { Tabs } from 'storybook/blocks/tabs'; -import Description from './description.mdx'; import { BankCard } from '../Component'; import { name, version } from '../../package.json'; +import Description from './description.mdx'; - -### Controlled-way +```tsx live +render(() => { + const [value, setValue] = React.useState(''); -Компонент может быть использован как controlled с помощью `onChange` и `value`: + const handleChange = (event, payload) => setValue(payload.value); - - {React.createElement(() => { - const [value, setValue] = React.useState(''); - const handleChange = (event, payload) => setValue(payload.value); - return ( -
- - - -
- ); - })} - + return ( + <> + + + + + ); +}); +``` diff --git a/packages/base-modal/CHANGELOG.md b/packages/base-modal/CHANGELOG.md index da47cba9c3..fd4a3d4764 100644 --- a/packages/base-modal/CHANGELOG.md +++ b/packages/base-modal/CHANGELOG.md @@ -3,6 +3,33 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [2.1.1](https://github.com/alfa-laboratory/core-components/compare/@alfalab/core-components-base-modal@2.1.0...@alfalab/core-components-base-modal@2.1.1) (2021-07-02) + + +### Bug Fixes + +* **base-modal:** resubscribe observer when content node changed ([2fef06e](https://github.com/alfa-laboratory/core-components/commit/2fef06eea01354f58663a5f4470606123d31f9d4)) + + + + + +# [2.1.0](https://github.com/alfa-laboratory/core-components/compare/@alfalab/core-components-base-modal@2.0.2...@alfalab/core-components-base-modal@2.1.0) (2021-06-28) + + +### Bug Fixes + +* **base-modal:** fix has scroll bug ([#712](https://github.com/alfa-laboratory/core-components/issues/712)) ([a6749a1](https://github.com/alfa-laboratory/core-components/commit/a6749a149d511b28cc59aaec188d59c380c64243)) + + +### Features + +* **bottom-sheet:** new component (PDS-228) ([#645](https://github.com/alfa-laboratory/core-components/issues/645)) ([1f7391d](https://github.com/alfa-laboratory/core-components/commit/1f7391df16a270d8a3a28b8ebaf98d0ed0928bc8)), closes [#642](https://github.com/alfa-laboratory/core-components/issues/642) [#642](https://github.com/alfa-laboratory/core-components/issues/642) [#646](https://github.com/alfa-laboratory/core-components/issues/646) [#646](https://github.com/alfa-laboratory/core-components/issues/646) [#634](https://github.com/alfa-laboratory/core-components/issues/634) [#635](https://github.com/alfa-laboratory/core-components/issues/635) [#634](https://github.com/alfa-laboratory/core-components/issues/634) [#635](https://github.com/alfa-laboratory/core-components/issues/635) [#648](https://github.com/alfa-laboratory/core-components/issues/648) [#647](https://github.com/alfa-laboratory/core-components/issues/647) [#630](https://github.com/alfa-laboratory/core-components/issues/630) [#648](https://github.com/alfa-laboratory/core-components/issues/648) [#630](https://github.com/alfa-laboratory/core-components/issues/630) [#669](https://github.com/alfa-laboratory/core-components/issues/669) + + + + + ## [2.0.2](https://github.com/alfa-laboratory/core-components/compare/@alfalab/core-components-base-modal@2.0.1...@alfalab/core-components-base-modal@2.0.2) (2021-05-28) diff --git a/packages/base-modal/package.json b/packages/base-modal/package.json index 3d42131767..362ff76d60 100644 --- a/packages/base-modal/package.json +++ b/packages/base-modal/package.json @@ -1,6 +1,6 @@ { "name": "@alfalab/core-components-base-modal", - "version": "2.0.2", + "version": "2.1.1", "description": "BaseModal component", "keywords": [], "license": "MIT", diff --git a/packages/base-modal/src/Component.tsx b/packages/base-modal/src/Component.tsx index 8cfcefadba..060ed580df 100644 --- a/packages/base-modal/src/Component.tsx +++ b/packages/base-modal/src/Component.tsx @@ -10,6 +10,8 @@ import React, { useEffect, useMemo, Ref, + FC, + MutableRefObject, } from 'react'; import cn from 'classnames'; import mergeRefs from 'react-merge-refs'; @@ -19,7 +21,7 @@ import { TransitionProps } from 'react-transition-group/Transition'; import FocusLock from 'react-focus-lock'; import { Portal, PortalProps } from '@alfalab/core-components-portal'; -import { Backdrop, BackdropProps } from '@alfalab/core-components-backdrop'; +import { Backdrop as DefaultBackdrop, BackdropProps } from '@alfalab/core-components-backdrop'; import { Stack, stackingOrder } from '@alfalab/core-components-stack'; import { handleContainer, hasScrollbar, isScrolledToBottom, isScrolledToTop } from './utils'; @@ -32,6 +34,11 @@ export type BaseModalProps = { */ children?: ReactNode; + /** + * Компонент бэкдропа + */ + Backdrop?: FC; + /** * Свойства для Бэкдропа */ @@ -100,7 +107,10 @@ export type BaseModalProps = { */ wrapperClassName?: string; - scrollHandler?: 'wrapper' | 'content'; + /** + * Обработчик скролла контента + */ + scrollHandler?: 'wrapper' | 'content' | MutableRefObject; /** * Пропсы для анимации (CSSTransition) @@ -179,6 +189,7 @@ export const BaseModal = forwardRef( container, children, scrollHandler = 'wrapper', + Backdrop = DefaultBackdrop, backdropProps = {}, transitionProps = {}, disableBackdropClick, @@ -208,52 +219,58 @@ export const BaseModal = forwardRef( const [footerHighlighted, setFooterHighlighted] = useState(false); const componentRef = useRef(null); - const contentRef = useRef(null); const wrapperRef = useRef(null); const scrollableNodeRef = useRef(null); + const contentNodeRef = useRef(null); const restoreContainerStyles = useRef(null); + const checkToHasScrollBar = () => { + if (scrollableNodeRef.current) { + const scrollExists = hasScrollbar(scrollableNodeRef.current); + setFooterHighlighted(scrollExists); + setHasScroll(scrollExists); + } + }; + const shouldRender = keepMounted || open || !exited; - const resizeObserver = useMemo(() => { - return new ResizeObserver(() => { - if (scrollableNodeRef.current) { - const scrollExists = hasScrollbar(scrollableNodeRef.current); - setFooterHighlighted(scrollExists); - setHasScroll(scrollExists); - } - }); - }, []); + const resizeObserver = useMemo(() => new ResizeObserver(checkToHasScrollBar), []); const addResizeHandle = useCallback(() => { - if (scrollableNodeRef.current && contentRef.current) { - resizeObserver.observe(scrollableNodeRef.current); - resizeObserver.observe(contentRef.current); - } + if (scrollableNodeRef.current) resizeObserver.observe(scrollableNodeRef.current); + if (contentNodeRef.current) resizeObserver.observe(contentNodeRef.current); }, [resizeObserver]); const removeResizeHandle = useCallback(() => { resizeObserver.disconnect(); }, [resizeObserver]); - const handleScroll = useCallback(() => { - if (!scrollableNodeRef.current) return; - - if (componentRef.current) { - if (hasHeader) { - setHeaderHighlighted( - isScrolledToTop(scrollableNodeRef.current) === false && - componentRef.current.getBoundingClientRect().top <= 0, - ); + const contentRef = useCallback( + (node: HTMLDivElement) => { + if (node !== null) { + contentNodeRef.current = node; + resizeObserver.observe(node); + checkToHasScrollBar(); } + }, + [resizeObserver], + ); - if (hasFooter) { - setFooterHighlighted( - isScrolledToBottom(scrollableNodeRef.current) === false && - componentRef.current.getBoundingClientRect().bottom >= - window.innerHeight, - ); - } + const handleScroll = useCallback(() => { + if (!scrollableNodeRef.current || !componentRef.current) return; + + if (hasHeader) { + setHeaderHighlighted( + !isScrolledToTop(scrollableNodeRef.current) && + componentRef.current.getBoundingClientRect().top <= 0, + ); + } + + if (hasFooter) { + setFooterHighlighted( + !isScrolledToBottom(scrollableNodeRef.current) && + componentRef.current.getBoundingClientRect().bottom >= window.innerHeight, + ); } }, [hasFooter, hasHeader]); @@ -302,10 +319,15 @@ export const BaseModal = forwardRef( [disableEscapeKeyDown, handleClose], ); + const getScrollHandler = useCallback(() => { + if (scrollHandler === 'wrapper') return wrapperRef.current; + if (scrollHandler === 'content') return componentRef.current; + return scrollHandler.current || wrapperRef.current; + }, [scrollHandler]); + const handleEntered: Required['onEntered'] = useCallback( (node, isAppearing) => { - scrollableNodeRef.current = - scrollHandler === 'content' ? componentRef.current : wrapperRef.current; + scrollableNodeRef.current = getScrollHandler(); addResizeHandle(); @@ -320,7 +342,7 @@ export const BaseModal = forwardRef( if (onMount) onMount(); }, - [addResizeHandle, handleScroll, onMount, scrollHandler, transitionProps], + [addResizeHandle, getScrollHandler, handleScroll, onMount, transitionProps], ); const handleExited: Required['onExited'] = useCallback( @@ -383,7 +405,15 @@ export const BaseModal = forwardRef( setHasFooter, onClose: handleClose, }), - [hasHeader, hasFooter, hasScroll, headerHighlighted, footerHighlighted, handleClose], + [ + contentRef, + hasHeader, + hasFooter, + hasScroll, + headerHighlighted, + footerHighlighted, + handleClose, + ], ); if (!shouldRender) return null; diff --git a/packages/base-modal/src/docs/Component.stories.mdx b/packages/base-modal/src/docs/Component.stories.mdx index 165b670e1f..719d8fadde 100644 --- a/packages/base-modal/src/docs/Component.stories.mdx +++ b/packages/base-modal/src/docs/Component.stories.mdx @@ -1,14 +1,15 @@ import { Meta, Props, Preview, Story } from '@storybook/addon-docs/blocks'; import { ComponentHeader } from 'storybook/blocks/component-header'; - +import { Tabs } from 'storybook/blocks/tabs'; import { Button } from '../../../button/src'; import { BaseModal } from '../Component'; import { version } from '../../package.json'; +import Description from './description.mdx'; @@ -20,7 +21,7 @@ import { version } from '../../package.json'; return ( - -## Использование контекста -```tsx -export type ModalContext = { - // Указаывает, используется ли футер - hasFooter?: boolean; - // Указаывает, используется ли шапка (например, позволяет гибко настраивать отступы) - hasHeader?: boolean; - // Указаывает наличие скролла - hasScroll?: boolean; - // Указаывает, что контент прокручен - headerHighlighted?: boolean; - // Указаывает, что контент прокручен не до конца - footerHighlighted?: boolean; - // Коллбэк, который должна вызвать кастомная шапка - setHasHeader: (exists: boolean) => void; - // Коллбэк, который должна вызвать кастомный футер - setHasFooter: (exists: boolean) => void; - // Позволяет закрыть модальное окно - onClose: (event: MouseEvent) => void; - // Реф, который должен быть установлен контентой области - contentRef: Ref; -}; -``` +} + props={} +/> diff --git a/packages/base-modal/src/docs/description.mdx b/packages/base-modal/src/docs/description.mdx index e69de29bb2..560d538782 100644 --- a/packages/base-modal/src/docs/description.mdx +++ b/packages/base-modal/src/docs/description.mdx @@ -0,0 +1,46 @@ +Базовый компонент для построения модальных окон, сайд-панелей и пр. + +```tsx live +render(() => { + const [open, setOpen] = React.useState(false); + + const handleModalOpen = () => setOpen(!open); + + return ( + <> + + + +
BaseModal
+ + + ); +}); +``` + +## Использование контекста + +```tsx +export type ModalContext = { + // Указаывает, используется ли футер + hasFooter?: boolean; + // Указаывает, используется ли шапка (например, позволяет гибко настраивать отступы) + hasHeader?: boolean; + // Указаывает наличие скролла + hasScroll?: boolean; + // Указаывает, что контент прокручен + headerHighlighted?: boolean; + // Указаывает, что контент прокручен не до конца + footerHighlighted?: boolean; + // Коллбэк, который должна вызвать кастомная шапка + setHasHeader: (exists: boolean) => void; + // Коллбэк, который должна вызвать кастомный футер + setHasFooter: (exists: boolean) => void; + // Позволяет закрыть модальное окно + onClose: (event: MouseEvent) => void; + // Реф, который должен быть установлен контентой области + contentRef: Ref; +}; +``` diff --git a/packages/base-modal/src/index.ts b/packages/base-modal/src/index.ts index e51a5d2440..78e3c77916 100644 --- a/packages/base-modal/src/index.ts +++ b/packages/base-modal/src/index.ts @@ -1 +1,2 @@ export * from './Component'; +export * from './utils'; diff --git a/packages/base-modal/src/utils.ts b/packages/base-modal/src/utils.ts index 9f4f7dc2aa..23e3aac291 100644 --- a/packages/base-modal/src/utils.ts +++ b/packages/base-modal/src/utils.ts @@ -1,9 +1,9 @@ export function isScrolledToTop(target: HTMLElement) { - return target.scrollTop === 0; + return target.scrollTop <= 0; } export function isScrolledToBottom(target: HTMLElement) { - return target.scrollHeight - target.offsetHeight === target.scrollTop; + return target.scrollHeight - target.offsetHeight <= target.scrollTop; } export function hasScrollbar(target: HTMLElement) { diff --git a/packages/bottom-sheet/CHANGELOG.md b/packages/bottom-sheet/CHANGELOG.md new file mode 100644 index 0000000000..e6d3c111a3 --- /dev/null +++ b/packages/bottom-sheet/CHANGELOG.md @@ -0,0 +1,19 @@ +# Change Log + +All notable changes to this project will be documented in this file. +See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. + +## [1.1.1](https://github.com/alfa-laboratory/core-components/compare/@alfalab/core-components-bottom-sheet@1.1.0...@alfalab/core-components-bottom-sheet@1.1.1) (2021-07-02) + +**Note:** Version bump only for package @alfalab/core-components-bottom-sheet + + + + + +# 1.1.0 (2021-06-28) + + +### Features + +* **bottom-sheet:** new component (PDS-228) ([#645](https://github.com/alfa-laboratory/core-components/issues/645)) ([1f7391d](https://github.com/alfa-laboratory/core-components/commit/1f7391df16a270d8a3a28b8ebaf98d0ed0928bc8)), closes [#642](https://github.com/alfa-laboratory/core-components/issues/642) [#642](https://github.com/alfa-laboratory/core-components/issues/642) [#646](https://github.com/alfa-laboratory/core-components/issues/646) [#646](https://github.com/alfa-laboratory/core-components/issues/646) [#634](https://github.com/alfa-laboratory/core-components/issues/634) [#635](https://github.com/alfa-laboratory/core-components/issues/635) [#634](https://github.com/alfa-laboratory/core-components/issues/634) [#635](https://github.com/alfa-laboratory/core-components/issues/635) [#648](https://github.com/alfa-laboratory/core-components/issues/648) [#647](https://github.com/alfa-laboratory/core-components/issues/647) [#630](https://github.com/alfa-laboratory/core-components/issues/630) [#648](https://github.com/alfa-laboratory/core-components/issues/648) [#630](https://github.com/alfa-laboratory/core-components/issues/630) [#669](https://github.com/alfa-laboratory/core-components/issues/669) diff --git a/packages/bottom-sheet/package.json b/packages/bottom-sheet/package.json new file mode 100644 index 0000000000..a423d22026 --- /dev/null +++ b/packages/bottom-sheet/package.json @@ -0,0 +1,30 @@ +{ + "name": "@alfalab/core-components-bottom-sheet", + "version": "1.1.1", + "description": "Bottom sheet mobile component", + "keywords": [], + "license": "MIT", + "main": "dist/index.js", + "module": "./dist/esm/index.js", + "files": [ + "dist" + ], + "scripts": { + "postinstall": "node ./dist/send-stats.js > /dev/null 2>&1 || exit 0" + }, + "publishConfig": { + "access": "public" + }, + "peerDependencies": { + "react": "^16.9.0 || ^17.0.1", + "react-dom": "^16.9.0 || ^17.0.1" + }, + "dependencies": { + "@alfalab/core-components-backdrop": "^1.1.2", + "@alfalab/core-components-base-modal": "^2.1.1", + "@alfalab/core-components-typography": "^1.5.1", + "classnames": "^2.2.6", + "react-swipeable": "^5.5.0", + "react-transition-group": "^4.3.0" + } +} diff --git a/packages/bottom-sheet/src/__image_snapshots__/bottom-sheet-interactions-tests-open-sheet-2-snap.png b/packages/bottom-sheet/src/__image_snapshots__/bottom-sheet-interactions-tests-open-sheet-2-snap.png new file mode 100644 index 0000000000..6a566bda1b --- /dev/null +++ b/packages/bottom-sheet/src/__image_snapshots__/bottom-sheet-interactions-tests-open-sheet-2-snap.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:89e4f135f6208c3c9106de6fcdefb886e14cf94599cdc443f712e4cfa6c43ab0 +size 88989 diff --git a/packages/bottom-sheet/src/__image_snapshots__/bottom-sheet-interactions-tests-open-sheet-snap.png b/packages/bottom-sheet/src/__image_snapshots__/bottom-sheet-interactions-tests-open-sheet-snap.png new file mode 100644 index 0000000000..82abbc36c9 --- /dev/null +++ b/packages/bottom-sheet/src/__image_snapshots__/bottom-sheet-interactions-tests-open-sheet-snap.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:b7f9fe4a972c8f40bb3bb7694fb30abd932c6f73559c23f567b04b4c9bb4c921 +size 24043 diff --git a/packages/bottom-sheet/src/__image_snapshots__/bottom-sheet-sprite-snap.png b/packages/bottom-sheet/src/__image_snapshots__/bottom-sheet-sprite-snap.png new file mode 100644 index 0000000000..48b5fad07b --- /dev/null +++ b/packages/bottom-sheet/src/__image_snapshots__/bottom-sheet-sprite-snap.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:50a3bd372bd5a57a3ba755ea7b6798292211db761f610744c6ba117018d50f5f +size 10143 diff --git a/packages/bottom-sheet/src/__snapshots__/component.test.tsx.snap b/packages/bottom-sheet/src/__snapshots__/component.test.tsx.snap new file mode 100644 index 0000000000..e1137cdde3 --- /dev/null +++ b/packages/bottom-sheet/src/__snapshots__/component.test.tsx.snap @@ -0,0 +1,160 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Bottom sheet Snapshots tests should match snapshot 1`] = ` + +
+
+
+
+
+