-
Notifications
You must be signed in to change notification settings - Fork 50
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Create v6 HelpBox with Styled System (#414).
* Copy v5 Helpbox to "legacy" export * Rebuild HelpBox for v6 with Styled System Using Styled System's theme and variant APIs. * Add documentation for v6 HelpBox * Add a word to a warning * Use existing getVariation utility function Removes the custom 'validateVariantSelection' function. * Document HelpBox changes in upgrade guide
- Loading branch information
Showing
13 changed files
with
486 additions
and
106 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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
For the next major version of Styled UI, the HelpBox component has been rebuilt to use Styled System's theme and variant APIs. | ||
|
||
You can opt in to the new API now by importing `{ HelpBox } from '@faithlife/styled-ui/v6'`. When v6 is released, the `/v6` entrypoint will continue to be supported with a deprecation warning until v7 is released. | ||
|
||
This documentation is automatically generated from jsdoc comments. | ||
|
||
```react | ||
noSource: true | ||
--- | ||
<DocgenTable component={HelpBox} /> | ||
``` |
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,63 @@ | ||
For the next major version of Styled UI, the HelpBox component has been rebuilt to use Styled System's theme and variant APIs. | ||
|
||
You can opt in to the new API now by importing `{ HelpBox } from '@faithlife/styled-ui/v6'`. When v6 is released, the `/v6` entrypoint will continue to be supported with a deprecation warning until v7 is released. | ||
|
||
## Colors and Their Meaning | ||
|
||
```react | ||
showSource: true | ||
--- | ||
<Stack spacing={3}> | ||
<HelpBox variant="primary" handleClose={() => true}> | ||
<HelpBox.Body>This is a helpful alert.</HelpBox.Body> | ||
<HelpBox.Footer><Button variant="primary" size="small">CTA</Button></HelpBox.Footer> | ||
</HelpBox> | ||
<HelpBox variant="danger" handleClose={() => true}> | ||
<HelpBox.Body>This is an error alert.</HelpBox.Body> | ||
<HelpBox.Footer><Button variant="primary" size="small">CTA</Button></HelpBox.Footer> | ||
</HelpBox> | ||
<HelpBox variant="success" handleClose={() => true}> | ||
<HelpBox.Body>This is a successful alert.</HelpBox.Body> | ||
<HelpBox.Footer><Button variant="primary" size="small">CTA</Button></HelpBox.Footer> | ||
</HelpBox> | ||
<HelpBox variant="warning" handleClose={() => true}> | ||
<HelpBox.Body>This is a cautious alert.</HelpBox.Body> | ||
<HelpBox.Footer><Button variant="primary" size="small">CTA</Button></HelpBox.Footer> | ||
</HelpBox> | ||
<HelpBox variant="minor" handleClose={() => true}> | ||
<HelpBox.Body>This is a minor alert.</HelpBox.Body> | ||
<HelpBox.Footer><Button variant="primary" size="small">CTA</Button></HelpBox.Footer> | ||
</HelpBox> | ||
</Stack> | ||
``` | ||
|
||
## Variations | ||
|
||
```react | ||
showSource: true | ||
--- | ||
<Stack spacing={3}> | ||
<HelpBox showLightBulb handleClose={() => true}>This is an alert with a light bulb.</HelpBox> | ||
<HelpBox hideIcon handleClose={() => true}>This alert has its icon hidden.</HelpBox> | ||
<HelpBox showRightIcon>This alert is showing its icon on both sides.</HelpBox> | ||
<HelpBox stacked handleClose={() => true}> | ||
<HelpBox.Body>This alert's contents are stacked.</HelpBox.Body> | ||
<HelpBox.Footer><Button variant="primary" size="small">CTA</Button></HelpBox.Footer> | ||
</HelpBox> | ||
<HelpBox> | ||
<HelpBox.Body>This alert doesn't handle closing.</HelpBox.Body> | ||
<HelpBox.Footer><Button variant="primary" size="small">CTA</Button></HelpBox.Footer> | ||
</HelpBox> | ||
</Stack> | ||
``` | ||
|
||
## Large Alerts | ||
|
||
```react | ||
showSource: true | ||
--- | ||
<Stack spacing={3}> | ||
<HelpBox large handleClose={() => true}>This is a large alert.</HelpBox> | ||
<HelpBox showLightBulb large handleClose={() => true}>This is a large alert with a light bulb.</HelpBox> | ||
</Stack> | ||
``` |
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1 +1,2 @@ | ||
export { HelpBox as LegacyHelpBox } from './legacy-component'; | ||
export { HelpBox } from './component'; |
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,110 @@ | ||
import React from 'react'; | ||
import PropTypes from 'prop-types'; | ||
import { | ||
X as Close, | ||
ErrorCircle as Exclamation, | ||
CorrectCircle as CircleCheck, | ||
WarningCircle as Info, | ||
} from '../icons/12px'; | ||
import { applyVariations } from '../utils'; | ||
import * as Styled from './legacy-styled'; | ||
|
||
/** Rectangular box containing tips on how to use our products */ | ||
export function HelpBox({ | ||
children, | ||
showLightBulb, | ||
hideIcon, | ||
showRightIcon, | ||
stacked, | ||
className, | ||
theme, | ||
handleClose, | ||
...helpBoxProps | ||
}) { | ||
const { component: HelpBoxVariation, filteredProps } = applyVariations( | ||
Styled.HelpBox, | ||
Styled.variationMap, | ||
helpBoxProps, | ||
); | ||
|
||
return ( | ||
<HelpBoxVariation | ||
className={className} | ||
theme={theme} | ||
success={helpBoxProps.success} | ||
danger={helpBoxProps.danger} | ||
warning={helpBoxProps.warning} | ||
minor={helpBoxProps.minor} | ||
stacked={stacked} | ||
hasIcon={(!hideIcon && !helpBoxProps.minor) || showLightBulb} | ||
{...filteredProps} | ||
> | ||
{(showLightBulb && <Styled.BulbIcon />) || | ||
(!hideIcon && ( | ||
<Styled.IconDiv> | ||
{helpBoxProps.danger ? ( | ||
<Exclamation /> | ||
) : helpBoxProps.success ? ( | ||
<CircleCheck /> | ||
) : helpBoxProps.minor ? null : ( | ||
<Info /> | ||
)} | ||
</Styled.IconDiv> | ||
))} | ||
<Styled.HelpBoxContent>{children}</Styled.HelpBoxContent> | ||
{(handleClose && ( | ||
<Styled.CloseButton onClick={handleClose}> | ||
<Close /> | ||
</Styled.CloseButton> | ||
)) || | ||
(showRightIcon && ( | ||
<Styled.RightIconDiv> | ||
{helpBoxProps.danger ? ( | ||
<Exclamation /> | ||
) : helpBoxProps.success ? ( | ||
<CircleCheck /> | ||
) : helpBoxProps.minor ? null : ( | ||
<Info /> | ||
)} | ||
</Styled.RightIconDiv> | ||
))} | ||
</HelpBoxVariation> | ||
); | ||
} | ||
|
||
HelpBox.propTypes = { | ||
/** See the docs for how to override styles properly. */ | ||
className: PropTypes.string, | ||
children: PropTypes.node.isRequired, | ||
/** The light bulb will override the other icon. */ | ||
showLightBulb: PropTypes.bool, | ||
/** Hides the left icon. */ | ||
hideIcon: PropTypes.bool, | ||
/** This icon will not show if closing is handled. */ | ||
showRightIcon: PropTypes.bool, | ||
/** Stacking will happen automatically on small viewports. */ | ||
stacked: PropTypes.bool, | ||
/** Blue theme is the default. | ||
* The icons are colored by foregroundColor. */ | ||
theme: PropTypes.shape({ | ||
foregroundColor: PropTypes.string, | ||
backgroundColor: PropTypes.string, | ||
closeIconColor: PropTypes.string, | ||
}), | ||
/** Green theme */ | ||
success: PropTypes.bool, | ||
/** Red theme */ | ||
danger: PropTypes.bool, | ||
/** Yellow theme */ | ||
warning: PropTypes.bool, | ||
/** Gray theme */ | ||
minor: PropTypes.bool, | ||
/** Height will be 230px */ | ||
large: PropTypes.bool, | ||
/** If not handled, there will be no close icon. */ | ||
handleClose: PropTypes.func, | ||
}; | ||
|
||
HelpBox.Body = Styled.HelpBoxBody; | ||
|
||
HelpBox.Footer = Styled.HelpBoxFooter; |
Oops, something went wrong.