-
Notifications
You must be signed in to change notification settings - Fork 1.9k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'master' into 2042_search-button-styles
- Loading branch information
Showing
18 changed files
with
975 additions
and
429 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
121 changes: 121 additions & 0 deletions
121
packages/react/src/components/Accordion/AccordionItem.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,121 @@ | ||
| /** | ||
| * Copyright IBM Corp. 2016, 2018 | ||
| * | ||
| * This source code is licensed under the Apache-2.0 license found in the | ||
| * LICENSE file in the root directory of this source tree. | ||
| */ | ||
|
|
||
| import { ChevronRight16 } from '@carbon/icons-react'; | ||
| import { settings } from 'carbon-components'; | ||
| import cx from 'classnames'; | ||
| import PropTypes from 'prop-types'; | ||
| import React, { useEffect, useState } from 'react'; | ||
| import { match, keys } from '../../internal/keyboard'; | ||
|
|
||
| const { prefix } = settings; | ||
| const defaultRenderExpando = props => <button {...props} />; | ||
|
|
||
| function AccordionItem({ | ||
| children, | ||
| className: customClassName, | ||
| iconDescription = 'Expand/Collapse', | ||
| open = false, | ||
| onHeadingClick, | ||
| renderExpando: Expando = defaultRenderExpando, | ||
| title = 'title', | ||
| ...rest | ||
| }) { | ||
| const [isOpen, setIsOpen] = useState(open); | ||
| const className = cx({ | ||
| [`${prefix}--accordion__item`]: true, | ||
| [`${prefix}--accordion__item--active`]: isOpen, | ||
| [customClassName]: !!customClassName, | ||
| }); | ||
|
|
||
| useEffect(() => { | ||
| setIsOpen(open); | ||
| }, [open]); | ||
|
|
||
| // When the AccordionItem heading is clicked, toggle the open state of the | ||
| // panel | ||
| function onClick(event) { | ||
| const nextValue = !isOpen; | ||
| setIsOpen(nextValue); | ||
| if (onHeadingClick) { | ||
| // TODO: normalize signature, potentially: | ||
| // onHeadingClick :: (event: Event, state: { isOpen: Boolean }) => any | ||
| onHeadingClick({ isOpen: nextValue, event }); | ||
| } | ||
| } | ||
|
|
||
| // If the AccordionItem is open, and the user hits the ESC key, then close it | ||
| function onKeyDown(event) { | ||
| if (isOpen && match(event, keys.Escape)) { | ||
| setIsOpen(false); | ||
| } | ||
| } | ||
|
|
||
| return ( | ||
| <li className={className} {...rest}> | ||
| <Expando | ||
| aria-expanded={isOpen} | ||
| className={`${prefix}--accordion__heading`} | ||
| onClick={onClick} | ||
| onKeyDown={onKeyDown} | ||
| title={iconDescription} | ||
| type="button"> | ||
| <ChevronRight16 | ||
| aria-label={iconDescription} | ||
| className={`${prefix}--accordion__arrow`} | ||
| /> | ||
| <div className={`${prefix}--accordion__title`}>{title}</div> | ||
| </Expando> | ||
| <div className={`${prefix}--accordion__content`}>{children}</div> | ||
| </li> | ||
| ); | ||
| } | ||
|
|
||
| AccordionItem.propTypes = { | ||
| /** | ||
| * Provide the contents of your AccordionItem | ||
| */ | ||
| children: PropTypes.node, | ||
|
|
||
| /** | ||
| * Specify an optional className to be applied to the container node | ||
| */ | ||
| className: PropTypes.string, | ||
|
|
||
| /** | ||
| * The accordion title. | ||
| */ | ||
| title: PropTypes.node, | ||
|
|
||
| /** | ||
| * The callback function to render the expando button. | ||
| * Can be a React component class. | ||
| */ | ||
| renderExpando: PropTypes.func, | ||
|
|
||
| /** | ||
| * The description of the expando icon. | ||
| */ | ||
| iconDescription: PropTypes.string, | ||
|
|
||
| /** | ||
| * `true` to open the expando. | ||
| */ | ||
| open: PropTypes.bool, | ||
|
|
||
| /** | ||
| * The handler of the massaged `click` event. | ||
| */ | ||
| onClick: PropTypes.func, | ||
|
|
||
| /** | ||
| * The handler of the massaged `click` event on the heading. | ||
| */ | ||
| onHeadingClick: PropTypes.func, | ||
| }; | ||
|
|
||
| export default AccordionItem; |
30 changes: 30 additions & 0 deletions
30
packages/react/src/components/Accordion/__tests__/Accordion-test.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| /** | ||
| * Copyright IBM Corp. 2016, 2018 | ||
| * | ||
| * This source code is licensed under the Apache-2.0 license found in the | ||
| * LICENSE file in the root directory of this source tree. | ||
| */ | ||
|
|
||
| import { mount } from 'enzyme'; | ||
| import React from 'react'; | ||
| import { default as Accordion, AccordionItem } from '../'; | ||
|
|
||
| describe('Accordion', () => { | ||
| it('should render', () => { | ||
| const wrapper = mount( | ||
| <Accordion className="extra-class"> | ||
| <AccordionItem className="child" title="Heading A"> | ||
| Panel A | ||
| </AccordionItem> | ||
| <AccordionItem className="child" title="Heading B"> | ||
| Panel B{' '} | ||
| </AccordionItem> | ||
| <AccordionItem className="child" title="Heading C"> | ||
| Panel C | ||
| </AccordionItem> | ||
| </Accordion> | ||
| ); | ||
|
|
||
| expect(wrapper).toMatchSnapshot(); | ||
| }); | ||
| }); |
Oops, something went wrong.