From 3f2dd849cdfb9ab0a54273a6812fc4552e66a4e6 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Tue, 27 Feb 2024 12:43:28 -0800 Subject: [PATCH] Merge release/2.6.0 into main branch (#1161) * Allow prop type node for Card title (#1150) * Fix DropdownToggle focus color (#1154) * IconButton: expose loading props (#1152) * Bump ip from 2.0.0 to 2.0.1 (#1155) * remove warning and danger Button variants from docs (#1158) * Disable drawer background scrolling if drawer has background overlay (#1156) --- .github/workflows/chromatic.yml | 7 +- .github/workflows/create-new-release.yml | 7 +- .github/workflows/lint.yml | 7 +- .github/workflows/test.yml | 7 +- package.json | 2 +- spec/__snapshots__/Storyshots.test.js.snap | 48 +++- src/Button/Button.mdx | 16 +- src/Button/Button.stories.tsx | 4 +- src/Card/Card.jsx | 2 +- src/Drawer/Drawer.jsx | 25 +- src/Drawer/Drawer.scss | 4 + src/Drawer/Drawer.test.jsx | 271 ++++++++++++++++++ src/Dropdown/DropdownToggle.scss | 48 +++- src/IconButton/IconButton.jsx | 6 +- src/IconButton/IconButton.mdx | 7 +- src/IconButton/IconButton.stories.jsx | 2 + .../RichTextEditor.test.tsx.snap | 5 + yarn.lock | 6 +- 18 files changed, 430 insertions(+), 44 deletions(-) create mode 100644 src/Drawer/Drawer.test.jsx diff --git a/.github/workflows/chromatic.yml b/.github/workflows/chromatic.yml index e7fffe10..98aa909a 100644 --- a/.github/workflows/chromatic.yml +++ b/.github/workflows/chromatic.yml @@ -13,8 +13,6 @@ on: jobs: chromatic-deployment: runs-on: ubuntu-latest - env: - FONTAWESOME_NPM_AUTH_TOKEN: ${{ secrets.FONTAWESOME_NPM_AUTH_TOKEN }} steps: - uses: actions/checkout@v2 with: @@ -22,8 +20,9 @@ jobs: - uses: actions/setup-node@v3 with: node-version-file: '.node-version' - - run: npm config set "@fortawesome:registry" https://npm.fontawesome.com/ && - npm config set "//npm.fontawesome.com/:_authToken" $FONTAWESOME_NPM_AUTH_TOKEN + - run: | + npm config set "@fortawesome:registry" https://npm.fontawesome.com/ + npm config set "//npm.fontawesome.com/:_authToken" ${{ secrets.FONTAWESOME_NPM_AUTH_TOKEN }} - run: yarn - name: Publish to Chromatic uses: chromaui/action@v1 diff --git a/.github/workflows/create-new-release.yml b/.github/workflows/create-new-release.yml index e267760d..89a75991 100644 --- a/.github/workflows/create-new-release.yml +++ b/.github/workflows/create-new-release.yml @@ -6,15 +6,14 @@ jobs: create-new-release: name: Create new release runs-on: ubuntu-latest - env: - FONTAWESOME_NPM_AUTH_TOKEN: ${{ secrets.FONTAWESOME_NPM_AUTH_TOKEN }} steps: - uses: actions/checkout@v2 - uses: actions/setup-node@v3 with: node-version-file: '.node-version' - - run: npm config set "@fortawesome:registry" https://npm.fontawesome.com/ && - npm config set "//npm.fontawesome.com/:_authToken" $FONTAWESOME_NPM_AUTH_TOKEN + - run: | + npm config set "@fortawesome:registry" https://npm.fontawesome.com/ + npm config set "//npm.fontawesome.com/:_authToken" ${{ secrets.FONTAWESOME_NPM_AUTH_TOKEN }} - run: yarn install - name: Initialize mandatory git config diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml index a321e4cf..69bea941 100644 --- a/.github/workflows/lint.yml +++ b/.github/workflows/lint.yml @@ -5,14 +5,13 @@ on: push jobs: js-lint: runs-on: ubuntu-latest - env: - FONTAWESOME_NPM_AUTH_TOKEN: ${{ secrets.FONTAWESOME_NPM_AUTH_TOKEN }} steps: - uses: actions/checkout@v2 - uses: actions/setup-node@v3 with: node-version-file: '.node-version' - - run: npm config set "@fortawesome:registry" https://npm.fontawesome.com/ && - npm config set "//npm.fontawesome.com/:_authToken" $FONTAWESOME_NPM_AUTH_TOKEN + - run: | + npm config set "@fortawesome:registry" https://npm.fontawesome.com/ + npm config set "//npm.fontawesome.com/:_authToken" ${{ secrets.FONTAWESOME_NPM_AUTH_TOKEN }} - run: yarn - run: yarn lint diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml index f1d090fa..366a0013 100644 --- a/.github/workflows/test.yml +++ b/.github/workflows/test.yml @@ -5,14 +5,13 @@ on: push jobs: js-test: runs-on: ubuntu-latest - env: - FONTAWESOME_NPM_AUTH_TOKEN: ${{ secrets.FONTAWESOME_NPM_AUTH_TOKEN }} steps: - uses: actions/checkout@v2 - uses: actions/setup-node@v3 with: node-version-file: '.node-version' - - run: npm config set "@fortawesome:registry" https://npm.fontawesome.com/ && - npm config set "//npm.fontawesome.com/:_authToken" $FONTAWESOME_NPM_AUTH_TOKEN + - run: | + npm config set "@fortawesome:registry" https://npm.fontawesome.com/ + npm config set "//npm.fontawesome.com/:_authToken" ${{ secrets.FONTAWESOME_NPM_AUTH_TOKEN }} - run: yarn - run: yarn test diff --git a/package.json b/package.json index ff1c44c8..9c1d86ad 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@user-interviews/ui-design-system", - "version": "2.5.2a", + "version": "2.6.0", "dependencies": { "@tiptap/core": "^2.0.3", "@tiptap/extension-bold": "^2.0.3", diff --git a/spec/__snapshots__/Storyshots.test.js.snap b/spec/__snapshots__/Storyshots.test.js.snap index add35829..7ee97d5a 100644 --- a/spec/__snapshots__/Storyshots.test.js.snap +++ b/spec/__snapshots__/Storyshots.test.js.snap @@ -3586,7 +3586,7 @@ Array [ ] `; -exports[`Storyshots Components/Button Danger 1`] = ` +exports[`Storyshots Components/Button Danger DEPRECATED 1`] = ` Array [ , , , , , , , , , , , +`; + exports[`Storyshots Components/IconButton Sizes 1`] = ` Array [ , , + + + + + + setIsDrawerOneVisible(false)} + > +
childrenDrawerOne
+ + setIsDrawerTwoVisible(false)} + > +
childrenDrawerTwo
+ + setIsDrawerThreeVisible(false)} + > +
childrenDrawerThree
+ + + ); +} + +SetupMultipleDrawers.propTypes = { + drawerOneVisibleDefault: propTypes.bool, + drawerThreeVisibleDefault: propTypes.bool, + drawerTwoVisibleDefault: propTypes.bool, +}; + +SetupMultipleDrawers.defaultProps = { + drawerOneVisibleDefault: false, + drawerTwoVisibleDefault: false, + drawerThreeVisibleDefault: false, +}; + +describe('Drawer', () => { + beforeEach(() => { + // Need to manually clean classList on body since jsdom instance can stay + // the same across specs https://github.com/jestjs/jest/issues/1224 + window.document.body.classList.remove(...window.document.body.classList); + }); + + describe('When component renders single drawer', () => { + describe('when visible is false', () => { + it('renders its children', () => { + render(); + + expect(elements.drawerChildren.get()).toBeInTheDocument(); + }); + + it('has drawer overlay', () => { + render(); + + expect(elements.drawerOverlay.get()).toBeInTheDocument(); + }); + + it('does not have visible drawer overlay', () => { + render(); + + expect(elements.drawerOverlay.get()).toBeInTheDocument(); + expect(elements.drawerOverlay.get().classList).not.toContain('DrawerBackgroundOverlay--active'); + }); + + it('does not call onRequestClose when pressing ESC key', () => { + const onRequestClose = jest.fn(); + + render(); + + userEvent.keyboard('{Escape}'); + + expect(onRequestClose).not.toHaveBeenCalled(); + }); + + it('body tag does not have Drawer--open', () => { + const { container } = render(); + const body = container.closest('body'); + + expect(body.classList).not.toContain('Drawer--open'); + }); + + describe('when hasBackgroundOverlay is false', () => { + it('does not have drawer overlay', () => { + render(); + + expect(elements.drawerOverlay.query()).not.toBeInTheDocument(); + }); + + it('body tag does not have Drawer--open', () => { + // eslint-disable-next-line max-len + const { container } = render(); + const body = container.closest('body'); + + expect(body.classList).not.toContain('Drawer--open'); + }); + }); + }); + + describe('when visible is true', () => { + it('renders its children', () => { + render(); + + expect(elements.drawerChildren.get()).toBeInTheDocument(); + }); + + it('has drawer overlay', () => { + render(); + + expect(elements.drawerOverlay.get()).toBeInTheDocument(); + }); + + it('has visible drawer overlay', () => { + render(); + + expect(elements.drawerOverlay.get()).toBeInTheDocument(); + expect(elements.drawerOverlay.get().classList).toContain('DrawerBackgroundOverlay--active'); + }); + + it('calls onRequestClose when pressing ESC key', () => { + const onRequestClose = jest.fn(); + + render(); + + userEvent.keyboard('{Escape}'); + + expect(onRequestClose).toHaveBeenCalled(); + }); + + it('body tag has Drawer--open', () => { + const { container } = render(); + const body = container.closest('body'); + + expect(body.classList).toContain('Drawer--open'); + }); + + describe('when hasBackgroundOverlay is false', () => { + it('does not have drawer overlay', () => { + render(); + + expect(elements.drawerOverlay.query()).not.toBeInTheDocument(); + }); + + it('body tag does not have Drawer--open', () => { + // eslint-disable-next-line max-len + const { container } = render(); + const body = container.closest('body'); + + expect(body.classList).not.toContain('Drawer--open'); + }); + }); + }); + }); + + describe('When component renders multiple Drawers', () => { + describe('with drawerOne visible by default', () => { + it('body tag has Drawer--open', () => { + const { container } = render(); + const body = container.closest('body'); + + expect(body.classList).toContain('Drawer--open'); + }); + + describe('when user clicks on drawerOne toggle visibility button', () => { + it('body tag does not have Drawer--open after click', () => { + const { container } = render(); + const body = container.closest('body'); + + expect(body.classList).toContain('Drawer--open'); + + userEvent.click(elements.drawerOneToggleVisibilityButton.get()); + + expect(body.classList).not.toContain('Drawer--open'); + }); + }); + }); + + describe('with no drawers visible by default', () => { + it('body tag does not have Drawer--open', () => { + const { container } = render(); + const body = container.closest('body'); + + expect(body.classList).not.toContain('Drawer--open'); + }); + + describe('when user clicks on drawerOne toggle visibility button', () => { + it('body tag has Drawer--open after click', () => { + const { container } = render(); + const body = container.closest('body'); + + expect(body.classList).not.toContain('Drawer--open'); + + userEvent.click(elements.drawerOneToggleVisibilityButton.get()); + + expect(body.classList).toContain('Drawer--open'); + }); + }); + }); + }); +}); diff --git a/src/Dropdown/DropdownToggle.scss b/src/Dropdown/DropdownToggle.scss index 9e11f4c2..a8f64258 100644 --- a/src/Dropdown/DropdownToggle.scss +++ b/src/Dropdown/DropdownToggle.scss @@ -23,10 +23,6 @@ $warning: $ux-yellow-400; all: unset; } - &--unstyled { - all: unset; - } - i, svg { &.icon-left { margin-right: $synth-spacing-2; @@ -39,6 +35,14 @@ $warning: $ux-yellow-400; &.btn-primary { @include btn-primary; + + &:focus { + background: $ux-emerald-600; + } + + &.show:focus { + background: $ux-emerald-700; + } } &.btn-outline-primary { @@ -47,6 +51,14 @@ $warning: $ux-yellow-400; &.btn-danger { @include btn-danger; + + &:focus { + background: $ux-red-500; + } + + &.show:focus { + background: $ux-red-700; + } } &.btn-outline-danger { @@ -55,6 +67,14 @@ $warning: $ux-yellow-400; &.btn-warning { @include btn-warning; + + &:focus { + background: $ux-yellow-400; + } + + &.show:focus { + background: $ux-yellow-600; + } } &.btn-outline-warning { @@ -63,9 +83,29 @@ $warning: $ux-yellow-400; &.btn-transparent { @include btn-transparent; + + &:focus { + background: transparent; + } + + &.show:focus { + background: $ux-gray-400; + } } &.btn-outline-transparent { @include btn-outline-transparent; } } + +.Synthesized { + .DropdownToggle { + &.btn-primary { + @include synthesis-btn-primary; + } + + &.btn-outline-primary { + @include synthesis-btn-outline-primary; + } + } +} diff --git a/src/IconButton/IconButton.jsx b/src/IconButton/IconButton.jsx index 535dfb33..7096750b 100644 --- a/src/IconButton/IconButton.jsx +++ b/src/IconButton/IconButton.jsx @@ -57,7 +57,7 @@ export const IconButtonActions = { }; const IconButton = ({ - action, ariaLabel, className, icon, size, variant, ...props + action, ariaLabel, className, icon, isLoading, size, variant, ...props }) => { const getAriaLabel = () => { if (action) { @@ -70,6 +70,8 @@ const IconButton = ({