Skip to content

Commit

Permalink
Merge main into dev (#690)
Browse files Browse the repository at this point in the history
* fix: pagination: Issues with VisiblePagerCountSize (#610)

* chore: systemuibutton: pass transparent down via props (#611)

* chore(release): 2.36.0

* fix: select: ensure aria attributes target the intended element (#612)

* fix: select: ensure aria attributes target the intended element

* chore: dropdown: add ariaref ut and refine role null check

* chore: dropdown: update role null check to handle all elements

* chore(release): 2.36.1

* fix: stepper: handle scrollIntoView for both layouts on mount (#613)

* chore(release): 2.36.2

* fix: button: pass disruptive down from props to button from defaultbutton (#614)

* fix: dropdown: tweak css slideupin animation (#618)

* fix: dropdown: tweak css slideupin animation

* chore: dropdown: tweak animation curve and revert previous adjustment

* fix: locale: add support for hi locale (#602)

* fix: dropdown: fix visible prop (#616)

* fix: dropdown: fix visible prop

* chore: dropdown: update ut to open dropdown again

* feat: empty: enable themes and adds two additional modes (#619)

* chore: css: organize and annotate global variables (#621)

* chore: css: organize and annotate global variables

* chore: css: remove unused base color sass variables

* chore(release): 2.37.0

* feat: messagebar: add message bar component (#622)

* feat: messagebar: add message bar component

* chore: messagebar: update icons per spec

* chore: messagebar: export component

* chore: messagebar: address pr feedback by adding a mapping

* fix: css: global css variable name alignment with design specification (#625)

* feat: rename background-color to background (#628)

* feat: rename background-color to background

* Use background for button css so that we can have more flexible customizations

* fix: remove changes

* remove changes

* fix: table: fix loading compare and updates default spinner size and position (#627)

* fix: table: fix loading compare and updates default spinner size and position

* chore: table�: inherit spinner div height

* fix: pill: ensure pill heights match latest design specification (#626)

* fix: pill: ensure pill heights match latest design specification

* chore: pill: address pr feedback and move pill border radius to global css var

* feat: table: adds column border and disable row bg hover color props (#624)

* fix: select: ensure medium and large pills fit inside inputs of same size (#630)

* chore(release): 2.38.0

* feat: icon: add icons to support kanban view (#632)

* feat: icon: add icons to support integration system simplification (#634)

* fix: slider: increase vertical hit target and handle segmented gap clicks (#635)

* fix: slider: increase vertical hit target and handle segmented gap clicks

* fix: slider: ensure default behavior of tooltip does not hide on reference click

* fix: select: Update selected option based on defaultValue when isLoading changes. (#631)

Co-authored-by: Dylan <99700808+dkilgore-eightfold@users.noreply.github.com>

* feat: icon: add collapse icon for kanban (#637)

* chore: v2.38.2 hotfix fi to main (#638)

* fix: dropdown: revert useonclickoutside to only toggle in specific conditions

* chore(release): 2.38.1

* feat: custom fonts support via configProvider

* fix: remove unnecessary import

* chore(release): 2.38.2

* chore: semver: revert hotfix versioning ahead of fi

---------

Co-authored-by: Jeff Howard <106610186+jhoward-eightfold@users.noreply.github.com>

* fix: button: ensure loading dots use text color and enable two state loader (#636)

* fix: button: ensure loading dots use text color and enable two state loader

* chore: loader: address pr feedback by removing unneeded rtl code

* chore(release): 2.39.0

* fix: select: revert update selected option based on defaultValue when isLoading (#643)

* chore(release): 2.39.1

* fix: linkbutton: ensure default width matches min and max width (#640)

* fix: matchscore: color contrast and vertical alignment fix up (#641)

* fix: tabs: pill variant color contrast fix up (#642)

* fix: table: various accessibility improvements (#644)

* chore(release): 2.40.0

* fix: select: Update selected option based on defaultValue when isLoading changes (#646)

* fix: picker: color contrast ratio fixes (#647)

* fix: picker: color contrast ratio fixes

* chore: picker: address pr feedback remove unused css vars and selectors

* chore: storybook: update named export order to be more consistent using babel (#649)

* chore: storybook: update named export order to be more consistent using babel

* chore: storybook: removes redundant prop

* chore(deps-dev): bump webpack from 5.64.4 to 5.76.0 (#564)

Bumps [webpack](https://github.com/webpack/webpack) from 5.64.4 to 5.76.0.
- [Release notes](https://github.com/webpack/webpack/releases)
- [Commits](webpack/webpack@v5.64.4...v5.76.0)

---
updated-dependencies:
- dependency-name: webpack
  dependency-type: direct:development
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Dylan <99700808+dkilgore-eightfold@users.noreply.github.com>

* chore(deps-dev): bump semver from 7.3.5 to 7.5.2 (#650)

Bumps [semver](https://github.com/npm/node-semver) from 7.3.5 to 7.5.2.
- [Release notes](https://github.com/npm/node-semver/releases)
- [Changelog](https://github.com/npm/node-semver/blob/main/CHANGELOG.md)
- [Commits](npm/node-semver@v7.3.5...v7.5.2)

---
updated-dependencies:
- dependency-name: semver
  dependency-type: direct:development
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* fix: slider: ensure tooltip is visually hidden when slider is disabled (#651)

* fix: menu: add htmltype prop to menu item button (#654)

* fix: menu: add htmltype prop to menu item button

* chore: menu: update snaps to account for new default property

* feat: breadcrumb: add breadcrumb component (#629)

* fix: slider: fixes hidetrack and hiderail props typos and ommissions (#656)

* fix: slider: fixes hidetrack and hiderail props typos and ommissions

* chore: slider: adds hidetrack and hiderail unit tests

* chore: slider: swaps hidetrack and hiderail references of segments

* fix: table: updates scrollable div by removing deprecated css property (#655)

* fix: table: updates scrollable div by removing deprecated css property

* chore: table: update snaps

* chore: table: update border to hide in mozilla browsers

* chore: table: updates snaps and sticky unit test

* chore(release): 2.41.0

* feat: selectors: add var theme support to check box radio and toggle (#659)

* feat: selectors: add var theme support to check box radio and toggle

* chore: selectors: reverts transition change to limit scope

* chore: selectors: address pr feedback

* chore: dropdown: adds advanced visibility story and unit tests (#661)

* chore: css: remove redundant font stack sass and use semantic variable (#660)

* feat: persistentbar: support small screens and themes plus custom render (#667)

* feat: persistentbar: support small screens and themes plus custom render

* chore: persistentbar: address peer feedback and add css vars with border opt

* chore: coverage: adds unit tests to components that need them (#670)

* chore: coverage: adds unit tests to components that need them

* chore: coverage: test for skeleton variant

* fix: select: adds fall back and optional chaining to avoid null reference errors at runtime (#669)

* fix: select: adds optional chaining to avoid null reference errors at runtime

* chore: select: fall back to empty array rather than use optional chain

* feat: slider and progress: add ability to visually hide borders (#673)

* feat: slider: add ability to visually hide rail and track borders

* feat: progress: enable discreet theming and border manipulation via props and css

* chore(release): 2.42.0

* feat: infobar: adds bordered prop (#676)

* feat: infobar: adds bordered prop

* chore: infobar: align naming convention of css variables

* chore(deps): bump tough-cookie from 4.0.0 to 4.1.3 (#664)

Bumps [tough-cookie](https://github.com/salesforce/tough-cookie) from 4.0.0 to 4.1.3.
- [Release notes](https://github.com/salesforce/tough-cookie/releases)
- [Changelog](https://github.com/salesforce/tough-cookie/blob/master/CHANGELOG.md)
- [Commits](salesforce/tough-cookie@v4.0.0...v4.1.3)

---
updated-dependencies:
- dependency-name: tough-cookie
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Dylan <99700808+dkilgore-eightfold@users.noreply.github.com>

* chore(deps): bump word-wrap from 1.2.3 to 1.2.4 (#671)

Bumps [word-wrap](https://github.com/jonschlinkert/word-wrap) from 1.2.3 to 1.2.4.
- [Release notes](https://github.com/jonschlinkert/word-wrap/releases)
- [Commits](jonschlinkert/word-wrap@1.2.3...1.2.4)

---
updated-dependencies:
- dependency-name: word-wrap
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Dylan <99700808+dkilgore-eightfold@users.noreply.github.com>

* chore: documentation: updates readme and contributing markdown files (#677)

* fix: table: adds default overflow back to latest scroll bars mixin (#678)

* chore: codescan: create sonarqube yml

* chore: codescan: update sonarqube yml

* chore: codescan: update sonarqube yml secret

* chore: codescan: update sonarqube yml args

* chore: codescan: update sonarqube yml syntax

* chore: codescan: create sonar project properties file

* chore: codescan: update sonarqube yml defer to properties file

* chore: codescan: move sonar properties file to root (#679)

* chore: codescan: update sonarqube yml to use input rather than env vars

* chore: codescan: revert sonarqube yml change and exclude github secret

* chore: codescan: update sonarqube yml to use pull request target

* chore: codescan: update sonarqube yml pull request type

* chore: publish: update npm publish yml repo email alias

* fix: accordion: fixes scroll bar animation flicker (#680)

* feat: card: update card size prop and remove bunko story (#682)

* chore(release): 2.43.0

* fix: popup: fixes style inheritance of reference element (#675)

* fix: popup: fixes style inheritance of reference element

* chore: popup: handle invalid react element

* feat: badge: add badge size and update button and tab custom css (#672)

* feat: badge: add badge size and update button and tab custom css

* chore: coverage: adds more badge tests

* chore: i18n: exports octuple locales and locale type (#684)

* chore: i18n: exports octuple locales and locale type

* chore: i18n: moves locale to separate entry

* chore: i18n: apply structure

* chore: governance: add security policy (#689)

* fix: tooltip: fixes tooltip toggle on mobile devices (#668)

* fix: tooltip: fixes tooltip toggle on mobile devices

* chore: tooltip: adds click toggle unit test

* chore: coverage: adds tooltip and mobile detector tests

* chore: popup: adds istouching method to test for hybrid devices

* chore: popup: update function name and ensure cloned element props are preserved

---------

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: Ranjith Nori <106535945+rnori-eightfold@users.noreply.github.com>
Co-authored-by: Yash raj chhabra <95337653+ychhabra-eightfold@users.noreply.github.com>
Co-authored-by: Yash Raj Chhabra <ychhabra@eightfold.ai>
Co-authored-by: dcoblentz-eightfold <119535119+dcoblentz-eightfold@users.noreply.github.com>
Co-authored-by: Utsav Singhal <84313406+usinghal-eightfold@users.noreply.github.com>
Co-authored-by: Aryan Mediratta <64970674+aryan-eightfold@users.noreply.github.com>
Co-authored-by: Purushottam Tiwari <133845170+ptiwari-eightfold@users.noreply.github.com>
Co-authored-by: Jeff Howard <106610186+jhoward-eightfold@users.noreply.github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
  • Loading branch information
10 people authored Aug 17, 2023
1 parent 80938a5 commit ab4e7d2
Show file tree
Hide file tree
Showing 214 changed files with 6,903 additions and 1,696 deletions.
2 changes: 1 addition & 1 deletion .github/workflows/npm-publish.yml
Original file line number Diff line number Diff line change
Expand Up @@ -75,6 +75,6 @@ jobs:
source-directory: 'storybook-static'
destination-github-username: 'EightfoldAI'
destination-repository-name: 'octuple.github.io'
user-email: ychhabra@eightfold.ai
user-email: eightfold@users.noreply.github.com
target-branch: main

22 changes: 22 additions & 0 deletions .github/workflows/sonarqube.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
on:
push:
branches:
- main
pull_request_target:
branches:
- main
types: [opened, synchronize, reopened]
name: SonarQube analysis
jobs:
Analysis:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
with:
fetch-depth: 0
- name: Analyze with SonarQube
uses: SonarSource/sonarqube-scan-action@master
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }}
SONAR_HOST_URL: ${{ secrets.SONAR_HOST_URL }}
39 changes: 39 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,45 @@

All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.

## [2.43.0](https://github.com/EightfoldAI/octuple/compare/v2.42.0...v2.43.0) (2023-08-08)

### Features

- card: update card size prop and remove bunko story ([#682](https://github.com/EightfoldAI/octuple/issues/682)) ([772f328](https://github.com/EightfoldAI/octuple/commits/772f32874938c33662dca4956c0387613df328c9))
- infobar: adds bordered prop ([#676](https://github.com/EightfoldAI/octuple/issues/676)) ([b2b75ef](https://github.com/EightfoldAI/octuple/commits/b2b75efeaa1f8410e1fe4761a905d6e9fd43fa5b))

### Bug Fixes

- accordion: fixes scroll bar animation flicker ([#680](https://github.com/EightfoldAI/octuple/issues/680)) ([2bf20ef](https://github.com/EightfoldAI/octuple/commits/2bf20eff5b05ceb1c2d9a6b5b13ae6116d9b595b))
- table: adds default overflow back to latest scroll bars mixin ([#678](https://github.com/EightfoldAI/octuple/issues/678)) ([560cebf](https://github.com/EightfoldAI/octuple/commits/560cebf8b42c719431316d3513b1d7c3b8d80cad))

## [2.42.0](https://github.com/EightfoldAI/octuple/compare/v2.41.0...v2.42.0) (2023-07-21)

### Features

- persistentbar: support small screens and themes plus custom render ([#667](https://github.com/EightfoldAI/octuple/issues/667)) ([447d2a1](https://github.com/EightfoldAI/octuple/commits/447d2a171bb7ee7c78063e5ac55a8ad8a7b0d57e))
- selectors: add var theme support to check box radio and toggle ([#659](https://github.com/EightfoldAI/octuple/issues/659)) ([8525e42](https://github.com/EightfoldAI/octuple/commits/8525e42344d31abcd4f64be621393f48537a8400))
- slider and progress: add ability to visually hide borders ([#673](https://github.com/EightfoldAI/octuple/issues/673)) ([414bc32](https://github.com/EightfoldAI/octuple/commits/414bc3211afd5127b86d6f51732583ae5e56f9df))

### Bug Fixes

- select: adds fall back and optional chaining to avoid null reference errors at runtime ([#669](https://github.com/EightfoldAI/octuple/issues/669)) ([13c73e7](https://github.com/EightfoldAI/octuple/commits/13c73e70c0c1c9b017a5b81879af2f9fc6a88ef3))

## [2.41.0](https://github.com/EightfoldAI/octuple/compare/v2.40.0...v2.41.0) (2023-06-27)

### Features

- breadcrumb: add breadcrumb component ([#629](https://github.com/EightfoldAI/octuple/issues/629)) ([6748a1e](https://github.com/EightfoldAI/octuple/commits/6748a1e2ba6ae9c9f5e672d9a9f5a172f19ae20f))

### Bug Fixes

- menu: add htmltype prop to menu item button ([#654](https://github.com/EightfoldAI/octuple/issues/654)) ([9a6141a](https://github.com/EightfoldAI/octuple/commits/9a6141aef77fd647f7ad6856d0bbc0c21667f188))
- picker: color contrast ratio fixes ([#647](https://github.com/EightfoldAI/octuple/issues/647)) ([fea047d](https://github.com/EightfoldAI/octuple/commits/fea047dd58738af1f34a7f8cca48f42eee69dc80))
- select: Update selected option based on defaultValue when isLoading changes ([#646](https://github.com/EightfoldAI/octuple/issues/646)) ([844a3a3](https://github.com/EightfoldAI/octuple/commits/844a3a3631425a67e899225a442b699a64db961d))
- slider: ensure tooltip is visually hidden when slider is disabled ([#651](https://github.com/EightfoldAI/octuple/issues/651)) ([b810ba8](https://github.com/EightfoldAI/octuple/commits/b810ba8610640e89fdd486dc2559cde078a968ad))
- slider: fixes hidetrack and hiderail props typos and ommissions ([#656](https://github.com/EightfoldAI/octuple/issues/656)) ([0c00967](https://github.com/EightfoldAI/octuple/commits/0c00967028e25da78fd0a13ce09a926110f29b21))
- table: updates scrollable div by removing deprecated css property ([#655](https://github.com/EightfoldAI/octuple/issues/655)) ([ee4c5d6](https://github.com/EightfoldAI/octuple/commits/ee4c5d6f1491fc724c7b8f61dc2f72377d666351))

## [2.40.0](https://github.com/EightfoldAI/octuple/compare/v2.39.1...v2.40.0) (2023-06-20)

### Bug Fixes
Expand Down
14 changes: 7 additions & 7 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@

<div align="center">

[![npm version](https://badge.fury.io/js/@eightfold.ai%2Foctuple.svg)](https://badge.fury.io/js/@eightfold.ai%2Foctuple) ![node](https://img.shields.io/badge/node-16.14.2-brightgreen.svg) [![codecov](https://codecov.io/gh/ychhabra-eightfold/octuple/branch/main/graph/badge.svg?token=K2BV6M1JS5)](https://codecov.io/gh/ychhabra-eightfold/octuple) ![Build](https://github.com/EightfoldAI/octuple/actions/workflows/build.yml/badge.svg) [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
[![npm version](https://badge.fury.io/js/@eightfold.ai%2Foctuple.svg)](https://badge.fury.io/js/@eightfold.ai%2Foctuple) ![node](https://img.shields.io/badge/node-16.14.2-brightgreen.svg) [![codecov](https://codecov.io/gh/EightfoldAI/octuple/branch/main/graph/badge.svg?token=XSAVLS0SVP)](https://codecov.io/gh/EightfoldAI/octuple) ![Build](https://github.com/EightfoldAI/octuple/actions/workflows/build.yml/badge.svg) [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

![bundlesize-js-image](https://img.badgesize.io/https:/unpkg.com/browse/@eightfold.ai/octuple/lib/octuple.js?label=octuple.js&compression=gzip)
![bundlesize-css-image](https://img.badgesize.io/https:/unpkg.com/browse/@eightfold.ai/octuple/lib/octuple.css?label=octuple.css&compression=gzip)
Expand All @@ -18,11 +18,11 @@
Octuple creates a shared language and visual consistency across different pages and channels.
It represents a collection of assets, utilities, and React components for building web applications.

- Design (and development) work can be created and replicated quickly and at scale.
- Design and development work may be created and replicated quickly at scale.
- Alleviates strain on design resources to focus on larger, more complex problems.
- Creates a unified language within and between crossfunctional teams.
- Creates visual consistency across products, channels, and (potentially siloed) departments.
- Serves as an educational tool and reference for junior-level designers and content contributors.
- Creates a unified language within and between cross-functional teams.
- Creates visual consistency across products, channels, and potentially siloed departments.
- Serves as an educational tool and reference for designers and content contributors.

Visit the Octuple [Storybook site](https://eightfoldai.github.io/octuple.github.io/).

Expand Down Expand Up @@ -53,7 +53,7 @@ import { PrimaryButton } from '@eightfold.ai/octuple';

export const App = () => (
<>
<PrimaryButton text={'Button'} />
<Button text={'Button'} />
</>
);
```
Expand Down Expand Up @@ -84,4 +84,4 @@ Review the guidance for pull requests and the contribution workflow in our [cont

## License

MIT (c) 2022 Eightfold
MIT (c) 2023 Eightfold
33 changes: 33 additions & 0 deletions SECURITY.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
<!-- BEGIN EIGHTFOLD OCTUPLE SECURITY.MD V0.0.1 BLOCK -->

## Security

If you believe you have found a security vulnerability in the [Octuple GitHub repository](https://github.com/EightfoldAI/octuple), please report it to us as described below.

## Reporting Security Issues

**Please do not report security vulnerabilities through public GitHub issues.**

Instead, send an email to [security@eightfold.ai](mailto:security@eightfold.ai). You should receive a response within 7 days. If for some reason you do not, please follow up via email to ensure we received your original message.

Please include the requested information listed below (as much as you can provide) to help us better understand the nature and scope of the possible issue:

- Type of issue (e.g. buffer overflow, SQL injection, cross-site scripting, etc.)
- Full paths of source file(s) related to the manifestation of the issue
- The location of the affected source code (tag/branch/commit or direct URL)
- Any special configuration required to reproduce the issue
- Step-by-step instructions to reproduce the issue
- Proof-of-concept or exploit code (if possible)
- Impact of the issue, including how an attacker might exploit the issue

This information will help us triage your report more quickly.

## Preferred Languages

We prefer all communications to be in English.

## Policy

Click on the Security tab to learn more at [https://eightfold.ai/solutions/governance/](https://eightfold.ai/solutions/governance/).

<!-- END EIGHTFOLD OCTUPLE SECURITY.MD BLOCK -->
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@eightfold.ai/octuple",
"version": "2.40.0",
"version": "2.43.0",
"license": "MIT",
"main": "lib/octuple.js",
"types": "lib/octuple.d.ts",
Expand Down
2 changes: 2 additions & 0 deletions sonar-project.properties
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
sonar.projectKey=Octuple
sonar.sources=.
12 changes: 6 additions & 6 deletions src/CONTRIBUTING.md
Original file line number Diff line number Diff line change
Expand Up @@ -23,16 +23,16 @@ You will also see any lint errors in the console.

### `yarn build-storybook`

Builds the Octuple Design System Storybook project to the `dist` folder for deployment.
Builds the Octuple Design System Storybook project to the `storybook-static` folder for deployment.

### `yarn test`

Runs the UTs.
Runs the unit tests.

### `yarn`

Builds the Octuple Design System Component Library for prod publishing to NPM in to the `lib` folder.
Should also run the UTs as part of the process.
Builds the Octuple Design System Component Library for production publishing to NPM in to the `lib` folder.
Should also run the unit tests as part of the process.
Your package is ready to be published!

## Contributing
Expand Down Expand Up @@ -145,7 +145,7 @@ When committing changes the Octuple project lints commit messages using the [Con
An example of such a message:

```
fix: ABC-123: button not keyboard accessible
fix: ABC123: button not keyboard accessible
The button component had a tabIndex of -1 by default
and therefore it was not keyboard accessible
Expand All @@ -163,4 +163,4 @@ To learn more please read:

## License

MIT (c) 2022 Eightfold
MIT (c) 2023 Eightfold
28 changes: 7 additions & 21 deletions src/components/Accordion/Accordion.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -49,13 +49,8 @@ const listItems: AccordionProps[] = [
children: 2,
},
summary: 'Notification testing',
children: `Body 2 text used here. Bottom bars are sticky sections that
can be used to highlight a few actions that are out of the
view to be displayed inside the view. For example, if
there's a very long form with Save and Cancel buttons at the
bottom, we can use the bottom bar to show those two buttons
in the view. We are making these bars to be flexible in
height and also allowing any component to be`,
children:
'Icons are optional for accordions. The body area in the expanded view is like a modal or a slide-in panel. You can put any smaller components inside to build a layout.',
id: '1',
},
{
Expand All @@ -67,13 +62,8 @@ const listItems: AccordionProps[] = [
children: 12,
},
summary: 'Notification testing',
children: `Body 2 text used here. Bottom bars are sticky sections that
can be used to highlight a few actions that are out of the
view to be displayed inside the view. For example, if
there's a very long form with Save and Cancel buttons at the
bottom, we can use the bottom bar to show those two buttons
in the view. We are making these bars to be flexible in
height and also allowing any component to be`,
children:
'Icons are optional for accordions. The body area in the expanded view is like a modal or a slide-in panel. You can put any smaller components inside to build a layout.',
id: '2',
},
];
Expand Down Expand Up @@ -101,13 +91,9 @@ Single.args = {
children: (
<>
<div style={{ height: 'auto' }}>
Body 2 text used here. Bottom bars are sticky sections that can be used
to highlight a few actions that are out of the view to be displayed
inside the view. For example, if there's a very long form with Save and
Cancel buttons at the bottom, we can use the bottom bar to show those
two buttons in the view. We are making these bars to be flexible in
height and also allowing any component to be added inside for now, to
understand use cases from the team.
Icons are optional for accordions. The body area in the expanded view is
like a modal or a slide-in panel. You can put any smaller components
inside to build a layout.
</div>
</>
),
Expand Down
138 changes: 138 additions & 0 deletions src/components/Accordion/Accordion.test.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,138 @@
import React from 'react';
import Enzyme from 'enzyme';
import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
import MatchMediaMock from 'jest-matchmedia-mock';
import { Accordion, AccordionProps, AccordionShape, AccordionSize } from './';
import { IconName } from '../Icon';
import { fireEvent, render, waitFor } from '@testing-library/react';

Enzyme.configure({ adapter: new Adapter() });

let matchMedia: any;

class ResizeObserver {
observe() {
// do nothing
}
unobserve() {
// do nothing
}
disconnect() {
// do nothing
}
}

window.ResizeObserver = ResizeObserver;

const accordionProps: AccordionProps = {
children: (
<>
<div style={{ height: 'auto' }}>
Icons are optional for accordions. The body area in the expanded view is
like a modal or a slide-in panel. You can put any smaller components
inside to build a layout.
</div>
</>
),
id: 'myAccordionId',
expandIconProps: {
path: IconName.mdiChevronDown,
},
summary: 'Accordion Header',
iconProps: {
color: 'green',
path: IconName.mdiCheckCircleOutline,
},
badgeProps: {
children: 2,
},
bordered: true,
shape: AccordionShape.Pill,
size: AccordionSize.Large,
expanded: false,
disabled: false,
'data-testid': 'test-accordion',
};

describe('Accordion', () => {
beforeAll(() => {
matchMedia = new MatchMediaMock();
});

afterEach(() => {
matchMedia.clear();
});

test('Renders without crashing', () => {
const { container, getByTestId } = render(
<Accordion {...accordionProps} />
);
const accordion = getByTestId('test-accordion');
expect(() => container).not.toThrowError();
expect(accordion).toBeTruthy();
expect(container).toMatchSnapshot();
});

test('Accordion toggle', async () => {
const { container } = render(
<Accordion {...accordionProps} size={AccordionSize.Large} />
);
const summary = container.querySelector('.accordion-summary');
fireEvent.click(summary);
await waitFor(() =>
expect(
container.getElementsByClassName('accordion-summary-expanded')
).toHaveLength(1)
);
expect(container.querySelector('.show')).toBeTruthy();
fireEvent.click(summary);
await waitFor(() =>
expect(
container.getElementsByClassName('accordion-summary-expanded')
).toHaveLength(0)
);
expect(container.querySelector('.show')).toBeFalsy();
});

test('Accordion is not bordered', () => {
const { container } = render(
<Accordion
{...accordionProps}
size={AccordionSize.Large}
bordered={false}
/>
);
expect(container.querySelector('.accordion-border')).toBeFalsy();
expect(container).toMatchSnapshot();
});

test('Accordion is large', () => {
const { container } = render(
<Accordion {...accordionProps} size={AccordionSize.Large} />
);
expect(container.querySelector('.large')).toBeTruthy();
expect(container).toMatchSnapshot();
});

test('Accordion is medium', () => {
const { container } = render(
<Accordion {...accordionProps} size={AccordionSize.Medium} />
);
expect(container.querySelector('.medium')).toBeTruthy();
expect(container).toMatchSnapshot();
});

test('Accordion is pill shaped', () => {
const { container } = render(<Accordion {...accordionProps} />);
expect(container.querySelector('.pill')).toBeTruthy();
expect(container).toMatchSnapshot();
});

test('Accordion is rectangle shaped', () => {
const { container } = render(
<Accordion {...accordionProps} shape={AccordionShape.Rectangle} />
);
expect(container.querySelector('.rectangle')).toBeTruthy();
expect(container).toMatchSnapshot();
});
});
1 change: 1 addition & 0 deletions src/components/Accordion/Accordion.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -89,6 +89,7 @@ export const AccordionBody: FC<AccordionBodyProps> = ({
const accordionBodyStyles: string = mergeClasses(
styles.accordionBody,
{
[styles.show]: expanded,
[styles.borderTop]: bordered,
[styles.medium]: size === AccordionSize.Medium,
[styles.large]: size === AccordionSize.Large,
Expand Down
Loading

0 comments on commit ab4e7d2

Please sign in to comment.