Skip to content

feat(Accordion): Add a prop to allow the box shadow to be removed #3309

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
dlabaj merged 1 commit into from
Nov 20, 2019
Merged

feat(Accordion): Add a prop to allow the box shadow to be removed #3309

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 8 additions & 1 deletion packages/patternfly-4/react-core/src/components/Accordion/Accordion.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,8 @@ export interface AccordionProps extends React.HTMLProps<HTMLDListElement> {
headingLevel?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
/** Flag to indicate whether use definition list or div */
asDefinitionList?: boolean;
/** Flag to indicate if the box shadow should be removed */
noBoxShadow?: boolean;
}

export const Accordion: React.FunctionComponent<AccordionProps> = ({
Expand All @@ -22,11 +24,16 @@ export const Accordion: React.FunctionComponent<AccordionProps> = ({
'aria-label': ariaLabel = '',
headingLevel = 'h3',
asDefinitionList = true,
noBoxShadow = false,
...props
}: AccordionProps) => {
const AccordionList: any = asDefinitionList ? 'dl' : 'div';
return (
<AccordionList className={css(styles.accordion, className)} aria-label={ariaLabel} {...props}>
<AccordionList
className={css(styles.accordion, noBoxShadow && styles.modifiers.noBoxShadow, className)}
aria-label={ariaLabel}
{...props}
>
<AccordionContext.Provider
value={{
ContentContainer: asDefinitionList ? 'dd' : 'div',
Expand Down
122 changes: 122 additions & 0 deletions packages/patternfly-4/react-core/src/components/Accordion/examples/Accordion.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -376,3 +376,125 @@ class FixedAccordion extends React.Component {
}
```

```js title=No-box-shadow
import React from 'react';
import { Accordion, AccordionItem, AccordionContent, AccordionToggle } from '@patternfly/react-core';

class FixedAccordion extends React.Component {
constructor(props) {
super(props);
this.state = {
expanded: ['ex2-toggle4']
};
}

render() {
const toggle = id => {
const expanded = this.state.expanded;
const index = expanded.indexOf(id);
const newExpanded =
index >= 0 ? [...expanded.slice(0, index), ...expanded.slice(index + 1, expanded.length)] : [...expanded, id];
this.setState(() => ({ expanded: newExpanded }));
};

return (
<Accordion asDefinitionList={false} noBoxShadow>
<AccordionItem>
<AccordionToggle
onClick={() => toggle('ex2-toggle1')}
isExpanded={this.state.expanded.includes('ex2-toggle1')}
id="ex2-toggle1"
>
Item One
</AccordionToggle>
<AccordionContent
id="ex2-expand1"
isHidden={!this.state.expanded.includes('ex2-toggle1')}
isFixed
>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua.
</p>
</AccordionContent>
</AccordionItem>
<AccordionItem>
<AccordionToggle
onClick={() => toggle('ex2-toggle2')}
isExpanded={this.state.expanded.includes('ex2-toggle2')}
id="ex2-toggle2"
>
Item Two
</AccordionToggle>
<AccordionContent
id="ex2-expand2"
isHidden={!this.state.expanded.includes('ex2-toggle2')}
isFixed
>
<p>
Vivamus et tortor sed arcu congue vehicula eget et diam. Praesent nec dictum lorem. Aliquam id diam
ultrices, faucibus erat id, maximus nunc.
</p>
</AccordionContent>
</AccordionItem>
<AccordionItem>
<AccordionToggle
onClick={() => toggle('ex2-toggle3')}
isExpanded={this.state.expanded.includes('ex2-toggle3')}
id="ex2-toggle3"
>
Item Three
</AccordionToggle>
<AccordionContent
id="ex2-expand3"
isHidden={!this.state.expanded.includes('ex2-toggle3')}
isFixed
>
<p>Morbi vitae urna quis nunc convallis hendrerit. Aliquam congue orci quis ultricies tempus.</p>
</AccordionContent>
</AccordionItem>
<AccordionItem>
<AccordionToggle
onClick={() => toggle('ex2-toggle4')}
isExpanded={this.state.expanded.includes('ex2-toggle4')}
id="ex2-toggle4"
>
Item Four
</AccordionToggle>
<AccordionContent
id="ex2-expand4"
isHidden={!this.state.expanded.includes('ex2-toggle4')}
isFixed
>
<p>
Donec vel posuere orci. Phasellus quis tortor a ex hendrerit efficitur. Aliquam lacinia ligula pharetra,
sagittis ex ut, pellentesque diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
posuere cubilia Curae; Vestibulum ultricies nulla nibh. Etiam vel dui fermentum ligula ullamcorper
eleifend non quis tortor. Morbi tempus ornare tempus. Orci varius natoque penatibus et magnis dis
parturient montes, nascetur ridiculus mus. Mauris et velit neque. Donec ultricies condimentum mauris,
pellentesque imperdiet libero convallis convallis. Aliquam erat volutpat. Donec rutrum semper tempus.
Proin dictum imperdiet nibh, quis dapibus nulla. Integer sed tincidunt lectus, sit amet auctor eros.
</p>
</AccordionContent>
</AccordionItem>
<AccordionItem>
<AccordionToggle
onClick={() => toggle('ex2-toggle5')}
isExpanded={this.state.expanded.includes('ex2-toggle5')}
id="ex2-toggle5"
>
Item Five
</AccordionToggle>
<AccordionContent
id="ex2-expand5"
isHidden={!this.state.expanded.includes('ex2-toggle5')}
isFixed
>
<p>Vivamus finibus dictum ex id ultrices. Mauris dictum neque a iaculis blandit.</p>
</AccordionContent>
</AccordionItem>
</Accordion>
);
}
}
```
5 changes: 5 additions & 0 deletions packages/patternfly-4/react-integration/cypress/integration/accordion.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ describe('Accordion Demo Test', () => {
toggles.should('have.length', 3);
toggles.should('have.attr', 'aria-expanded', 'false');
cy.get('#accordion-example .pf-m-expanded').should('not.exist');
cy.get('#accordion-example').should('not.have.class', 'pf-m-no-box-shadow');
});

it('Verify toggle open behavior', () => {
Expand Down Expand Up @@ -40,4 +41,8 @@ describe('Accordion Demo Test', () => {
const expandedContent = cy.get('#accordion-example .pf-c-accordion__expanded-content.pf-m-expanded');
expandedContent.should('not.exist');
});

it('Verify the pf-m-no-box-shadow modifier is applied to the noBoxShadow accordion', () => {
cy.get('#accordion-example-no-box-shadow').should('have.class', 'pf-m-no-box-shadow');
});
});
107 changes: 72 additions & 35 deletions ...nfly-4/react-integration/demo-app-ts/src/components/demos/AccordionDemo/AccordionDemo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,41 +22,78 @@ export class AccordionDemo extends React.Component<null, AccordionDemoState> {
render() {
const { expanded } = this.state;
return (
<Accordion id="accordion-example">
<AccordionItem>
<AccordionToggle onClick={() => this.onToggle('item-1')} isExpanded={expanded === 'item-1'} id="item-1">
Item One
</AccordionToggle>
<AccordionContent isHidden={expanded !== 'item-1'} id="item-1-content">
<p>
Item One Content: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.
</p>
</AccordionContent>
</AccordionItem>
<AccordionItem>
<AccordionToggle onClick={() => this.onToggle('item-2')} isExpanded={expanded === 'item-2'} id="item-2">
Item Two
</AccordionToggle>
<AccordionContent isHidden={expanded !== 'item-2'} id="item-2-content">
<p>
Item Two Content: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.
</p>
</AccordionContent>
</AccordionItem>
<AccordionItem>
<AccordionToggle onClick={() => this.onToggle('item-3')} isExpanded={expanded === 'item-3'} id="item-3">
Item Three
</AccordionToggle>
<AccordionContent isHidden={expanded !== 'item-3'} id="item-3-content">
<p>
Item Three Content: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.
</p>
</AccordionContent>
</AccordionItem>
</Accordion>
<React.Fragment>
<Accordion id="accordion-example">
<AccordionItem>
<AccordionToggle onClick={() => this.onToggle('item-1')} isExpanded={expanded === 'item-1'} id="item-1">
Item One
</AccordionToggle>
<AccordionContent isHidden={expanded !== 'item-1'} id="item-1-content">
<p>
Item One Content: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.
</p>
</AccordionContent>
</AccordionItem>
<AccordionItem>
<AccordionToggle onClick={() => this.onToggle('item-2')} isExpanded={expanded === 'item-2'} id="item-2">
Item Two
</AccordionToggle>
<AccordionContent isHidden={expanded !== 'item-2'} id="item-2-content">
<p>
Item Two Content: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.
</p>
</AccordionContent>
</AccordionItem>
<AccordionItem>
<AccordionToggle onClick={() => this.onToggle('item-3')} isExpanded={expanded === 'item-3'} id="item-3">
Item Three
</AccordionToggle>
<AccordionContent isHidden={expanded !== 'item-3'} id="item-3-content">
<p>
Item Three Content: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.
</p>
</AccordionContent>
</AccordionItem>
</Accordion>
<Accordion noBoxShadow id="accordion-example-no-box-shadow">
<AccordionItem>
<AccordionToggle onClick={() => this.onToggle('item-1')} isExpanded={expanded === 'item-1'} id="item-1">
Item One
</AccordionToggle>
<AccordionContent isHidden={expanded !== 'item-1'} id="item-1-content">
<p>
Item One Content: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.
</p>
</AccordionContent>
</AccordionItem>
<AccordionItem>
<AccordionToggle onClick={() => this.onToggle('item-2')} isExpanded={expanded === 'item-2'} id="item-2">
Item Two
</AccordionToggle>
<AccordionContent isHidden={expanded !== 'item-2'} id="item-2-content">
<p>
Item Two Content: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.
</p>
</AccordionContent>
</AccordionItem>
<AccordionItem>
<AccordionToggle onClick={() => this.onToggle('item-3')} isExpanded={expanded === 'item-3'} id="item-3">
Item Three
</AccordionToggle>
<AccordionContent isHidden={expanded !== 'item-3'} id="item-3-content">
<p>
Item Three Content: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.
</p>
</AccordionContent>
</AccordionItem>
</Accordion>
</React.Fragment>
);
}
}