This repository has been archived by the owner on May 22, 2024. It is now read-only.
-
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.
[clinical-item-view] Add default styling override
- Loading branch information
ry061521
committed
Aug 14, 2023
1 parent
d93f5d0
commit b5c6bc6
Showing
28 changed files
with
281 additions
and
20 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
15 changes: 15 additions & 0 deletions
15
...erra-clinical-item-view/src/terra-dev-site/doc/example/ItemViewOverrideDefaultStyling.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,15 @@ | ||
import React from 'react'; | ||
import IconPerson from 'terra-icon/lib/icon/IconPerson'; | ||
import ItemView from 'terra-clinical-item-view'; | ||
|
||
const display1 = <ItemView.Display icon={<IconPerson />} iconAlignment="inline" text="Asif Khan" textStyle="strong" />; | ||
const display2 = <ItemView.Display text="Care Position: Primary" textStyle="secondary" />; | ||
const display3 = <ItemView.Display text="Room 100A" textStyle="strikeThrough" />; | ||
const display4 = <ItemView.Display text="Acuity: 5" textStyle="attention" />; | ||
const display5 = <ItemView.Display text="Start Time: 08-05-2016 12:00:00" />; | ||
const display6 = <ItemView.Display text="End Time: 08-05-2016 16:00:00" />; | ||
const displays = [display1, display2, display3, display4, display5, display6]; | ||
|
||
const comment = <ItemView.Comment text="Faint red rash appeared at 08-05-2016 13:24:00" />; | ||
|
||
export default () => <ItemView displays={displays} comment={comment} overrideDefaultStyling />; |
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
32 changes: 32 additions & 0 deletions
32
...cal-item-view/src/terra-dev-site/test/clinical-item-view/StylingOverrideItemView.test.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,32 @@ | ||
import React from 'react'; | ||
import classNames from 'classnames/bind'; | ||
import IconAlert from 'terra-icon/lib/icon/IconAlert'; | ||
import ItemView from '../../../ItemView'; | ||
import styles from './ItemViewCommon.test.module.scss'; | ||
|
||
const display1 = <ItemView.Display text="display 1 (default display styling)" key="123" />; | ||
const display2 = <ItemView.Display text="display 2 (strong display styling)" textStyle="strong" key="124" />; | ||
const display3 = <ItemView.Display text="display 3 (attention display styling)" textStyle="attention" key="125" />; | ||
const display4 = <ItemView.Display text="display 4 (secondary display styling)" textStyle="secondary" key="126" />; | ||
const display5 = <ItemView.Display text="display 5 (strikethrough display styling)" textStyle="strikeThrough" key="127" />; | ||
const display6 = <ItemView.Display text="display 6 (default display styling with icon)" icon={<IconAlert />} iconAlignment="inline" key="128" />; | ||
const displays = [display1, display2, display3, display4, display5, display6]; | ||
const comment = id => <ItemView.Comment id={id} text="Some Comment" />; | ||
|
||
const cx = classNames.bind(styles); | ||
|
||
const views = () => ( | ||
<div className={cx('styling-override-itemview-wrapper')}> | ||
<h2>Override Default Styling</h2> | ||
<ItemView displays={displays} overrideDefaultStyling comment={comment(1)} id="test-displays-override" /> | ||
<br /> | ||
<h2>Override Default Styling Two Column Layout </h2> | ||
<ItemView displays={displays} layout="twoColumns" overrideDefaultStyling comment={comment(2)} id="test-displays-override-two" /> | ||
<br /> | ||
<h2>Override Default Styling with TextEmphasis set to start</h2> | ||
<p>This test is just showing that even if TextEmphasis has been explicitly set to start, it will be ignored when the override prop is set to true.</p> | ||
<ItemView displays={displays} textEmphasis="start" overrideDefaultStyling id="test-displays-override-start-emphasis" /> | ||
</div> | ||
); | ||
|
||
export default views; |
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
Oops, something went wrong.