This repository has been archived by the owner on May 24, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 166
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[terra-badge] Example Doc Update (#3952)
- Loading branch information
1 parent
568fe09
commit 49733f7
Showing
12 changed files
with
217 additions
and
83 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 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 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
14 changes: 14 additions & 0 deletions
14
packages/terra-core-docs/src/terra-dev-site/doc/badge/example/BadgeInDoc.jsx
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,14 @@ | ||
| import React from 'react'; | ||
| import PropTypes from 'prop-types'; | ||
| import Badge from 'terra-badge'; | ||
|
|
||
| const propTypes = { text: PropTypes.string, intent: PropTypes.string, visuallyHiddenText: PropTypes.string }; | ||
|
|
||
| const BadgeInDoc = ({ | ||
| ...props | ||
| }) => ( | ||
| <Badge text={props.text} intent={props.intent} visuallyHiddenText={props.visuallyHiddenText} /> | ||
| ); | ||
|
|
||
| BadgeInDoc.propTypes = propTypes; | ||
| export default BadgeInDoc; |
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
62 changes: 41 additions & 21 deletions
62
packages/terra-core-docs/src/terra-dev-site/doc/badge/example/BadgeIntent.jsx
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,34 +1,54 @@ | ||
| import React from 'react'; | ||
| import Badge from 'terra-badge'; | ||
| import Avatar from 'terra-avatar'; | ||
| import classNames from 'classnames/bind'; | ||
| import styles from './Badge.module.scss'; | ||
|
|
||
| const cx = classNames.bind(styles); | ||
|
|
||
| const BadgeIntent = () => ( | ||
| <div className={cx('badge-container')}> | ||
| <div className={cx('badge')}> | ||
| <Badge text="Patient Arrival" /> | ||
| <React.Fragment> | ||
| <p> | ||
| The Intent prop can be used to apply colors to badges. Please refer to the | ||
| <strong> VisuallyHiddenText prop examples further below </strong> | ||
| to ensure proper | ||
| <strong> context is provided for assistive technology users to understand the purpose of the badge. </strong> | ||
| </p> | ||
| <p> | ||
| Intent Badge Colors: The following Badge example only illustrates badge colors. This example is not intended to illustrate how Badges should be used. As noted above, multiple badges should not be used together. Instead, see Pills or Tag. | ||
| </p> | ||
| <div className={cx('badge-container')}> | ||
| <div className={cx('badge')}> | ||
| <Badge text="No Risk" /> | ||
| </div> | ||
| <div className={cx('badge')}> | ||
| <Badge intent="primary" text="Low" /> | ||
| </div> | ||
| <div className={cx('badge')}> | ||
| <Badge intent="secondary" text="Moderate" /> | ||
| </div> | ||
| <div className={cx('badge')}> | ||
| <Badge intent="warning" text="High" /> | ||
| </div> | ||
| <div className={cx('badge')}> | ||
| <Badge intent="negative" text="Critical" /> | ||
| </div> | ||
| </div> | ||
| <div className={cx('badge')}> | ||
| <Badge intent="primary" text="Admitted" /> | ||
| <p> | ||
| Example usage of the Intent Badge. Please note that this use case does not require the VisuallyHiddenText prop because the badge is visually and programmatically grouped in a semantic container. Other use cases will require the VisuallyHiddenText prop. To effectively communicate context to assistive technology users. | ||
| </p> | ||
| <div className={cx('profile-container')}> | ||
| <Avatar alt="Segun Adebayo" initials="SA" /> | ||
| <div className={cx('profile-name-container')}> | ||
| <span className={cx('profile-name')}>Segun Adebayo </span> | ||
| <br /> | ||
| <span>UI Engineer</span> | ||
| </div> | ||
| <div className={cx('profile-badge')}> | ||
| <Badge intent="secondary" text="NEW" visuallyHiddenText="New User" /> | ||
| </div> | ||
| </div> | ||
| <div className={cx('badge')}> | ||
| <Badge intent="secondary" text="Discharged" /> | ||
| </div> | ||
| <div className={cx('badge')}> | ||
| <Badge intent="positive" text="Recovery" /> | ||
| </div> | ||
| <div className={cx('badge')}> | ||
| <Badge intent="negative" text="Complications" /> | ||
| </div> | ||
| <div className={cx('badge')}> | ||
| <Badge intent="warning" text="Urgent" /> | ||
| </div> | ||
| <div className={cx('badge')}> | ||
| <Badge intent="info" text="Medical Notes" /> | ||
| </div> | ||
| </div> | ||
| </React.Fragment> | ||
| ); | ||
|
|
||
| export default BadgeIntent; |
Oops, something went wrong.