Skip to content
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
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
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from 'react';
import { AboutModal, Button, TextContent, TextList, TextListItem } from '@patternfly/react-core';
import { AboutModal, Button, Content } from '@patternfly/react-core';
import brandImg from '../../assets/PF-IconLogo.svg';

export const AboutModalBasic: React.FunctionComponent = () => {
Expand All @@ -23,24 +23,24 @@ export const AboutModalBasic: React.FunctionComponent = () => {
backgroundImageSrc="/assets/images/pf-background.svg"
productName="name"
>
<TextContent>
<TextList component="dl">
<TextListItem component="dt">CFME version</TextListItem>
<TextListItem component="dd">5.5.3.4.20102789036450</TextListItem>
<TextListItem component="dt">Cloudforms Version</TextListItem>
<TextListItem component="dd">4.1</TextListItem>
<TextListItem component="dt">Server name</TextListItem>
<TextListItem component="dd">40DemoMaster</TextListItem>
<TextListItem component="dt">User name</TextListItem>
<TextListItem component="dd">Administrator</TextListItem>
<TextListItem component="dt">User role</TextListItem>
<TextListItem component="dd">EvmRole-super_administrator</TextListItem>
<TextListItem component="dt">Browser version</TextListItem>
<TextListItem component="dd">601.2</TextListItem>
<TextListItem component="dt">Browser OS</TextListItem>
<TextListItem component="dd">Mac</TextListItem>
</TextList>
</TextContent>
<Content>
<dl>
<dt>CFME version</dt>
<dd>5.5.3.4.20102789036450</dd>
<dt>Cloudforms Version</dt>
<dd>4.1</dd>
<dt>Server name</dt>
<dd>40DemoMaster</dd>
<dt>User name</dt>
<dd>Administrator</dd>
<dt>User role</dt>
<dd>EvmRole-super_administrator</dd>
<dt>Browser version</dt>
<dd>601.2</dd>
<dt>Browser OS</dt>
<dd>Mac</dd>
</dl>
</Content>
</AboutModal>
</React.Fragment>
);
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from 'react';
import { AboutModal, Alert, Button, TextContent, TextList, TextListItem } from '@patternfly/react-core';
import { AboutModal, Alert, Button, Content } from '@patternfly/react-core';
import brandImg from '../../assets/PF-IconLogo.svg';
import spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing';

Expand All @@ -25,29 +25,29 @@ export const AboutModalComplexUserPositionedContent: React.FunctionComponent = (
hasNoContentContainer={true}
productName="Product name"
>
<TextContent id="test1" className={spacing.pyXl}>
<Content id="test1" className={spacing.pyXl}>
<h4>About</h4>
<p>Content here</p>
</TextContent>
</Content>
<Alert variant="info" title="Updates available" />
<TextContent id="test2" className={spacing.pyXl}>
<TextList component="dl">
<TextListItem component="dt">CFME version</TextListItem>
<TextListItem component="dd">5.5.3.4.20102789036450</TextListItem>
<TextListItem component="dt">Cloudforms version</TextListItem>
<TextListItem component="dd">4.1</TextListItem>
<TextListItem component="dt">Server name</TextListItem>
<TextListItem component="dd">40DemoMaster</TextListItem>
<TextListItem component="dt">User name</TextListItem>
<TextListItem component="dd">Administrator</TextListItem>
<TextListItem component="dt">User role</TextListItem>
<TextListItem component="dd">EvmRole-super_administrator</TextListItem>
<TextListItem component="dt">Browser version</TextListItem>
<TextListItem component="dd">601.2</TextListItem>
<TextListItem component="dt">Browser OS</TextListItem>
<TextListItem component="dd">Mac</TextListItem>
</TextList>
</TextContent>
<Content id="test2" className={spacing.pyXl}>
<dl>
<dt>CFME version</dt>
<dd>5.5.3.4.20102789036450</dd>
<dt>Cloudforms version</dt>
<dd>4.1</dd>
<dt>Server name</dt>
<dd>40DemoMaster</dd>
<dt>User name</dt>
<dd>Administrator</dd>
<dt>User role</dt>
<dd>EvmRole-super_administrator</dd>
<dt>Browser version</dt>
<dd>601.2</dd>
<dt>Browser OS</dt>
<dd>Mac</dd>
</dl>
</Content>
</AboutModal>
</React.Fragment>
);
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from 'react';
import { AboutModal, Button, TextContent, TextList, TextListItem } from '@patternfly/react-core';
import { AboutModal, Button, Content } from '@patternfly/react-core';
import brandImg from '../../assets/PF-IconLogo.svg';

export const AboutModalWithoutProductName: React.FunctionComponent = () => {
Expand All @@ -23,24 +23,24 @@ export const AboutModalWithoutProductName: React.FunctionComponent = () => {
backgroundImageSrc="/assets/images/pf-background.svg"
aria-label="No product name about modal"
>
<TextContent>
<TextList component="dl">
<TextListItem component="dt">CFME version</TextListItem>
<TextListItem component="dd">5.5.3.4.20102789036450</TextListItem>
<TextListItem component="dt">Cloudforms version</TextListItem>
<TextListItem component="dd">4.1</TextListItem>
<TextListItem component="dt">Server name</TextListItem>
<TextListItem component="dd">40DemoMaster</TextListItem>
<TextListItem component="dt">User name</TextListItem>
<TextListItem component="dd">Administrator</TextListItem>
<TextListItem component="dt">User role</TextListItem>
<TextListItem component="dd">EvmRole-super_administrator</TextListItem>
<TextListItem component="dt">Browser version</TextListItem>
<TextListItem component="dd">601.2</TextListItem>
<TextListItem component="dt">Browser OS</TextListItem>
<TextListItem component="dd">Mac</TextListItem>
</TextList>
</TextContent>
<Content>
<dl>
<dt>CFME version</dt>
<dd>5.5.3.4.20102789036450</dd>
<dt>Cloudforms version</dt>
<dd>4.1</dd>
<dt>Server name</dt>
<dd>40DemoMaster</dd>
<dt>User name</dt>
<dd>Administrator</dd>
<dt>User role</dt>
<dd>EvmRole-super_administrator</dd>
<dt>Browser version</dt>
<dd>601.2</dd>
<dt>Browser OS</dt>
<dd>Mac</dd>
</dl>
</Content>
</AboutModal>
</React.Fragment>
);
Expand Down
116 changes: 116 additions & 0 deletions packages/react-core/src/components/Content/Content.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,116 @@
import * as React from 'react';
import { css } from '@patternfly/react-styles';
import styles from '@patternfly/react-styles/css/components/Content/content';
import { useOUIAProps, OUIAProps } from '../../helpers';

export enum ContentVariants {
h1 = 'h1',
h2 = 'h2',
h3 = 'h3',
h4 = 'h4',
h5 = 'h5',
h6 = 'h6',
p = 'p',
a = 'a',
small = 'small',
blockquote = 'blockquote',
pre = 'pre',
hr = 'hr',
ul = 'ul',
ol = 'ol',
dl = 'dl',
li = 'li',
dt = 'dt',
dd = 'dd'
}

export interface ContentProps extends React.HTMLProps<HTMLElement>, OUIAProps {
/** The content component. If none provided, it will be a 'div' and styling will be applied to all its child components. */
component?:
| 'h1'
| 'h2'
| 'h3'
| 'h4'
| 'h5'
| 'h6'
| 'p'
| 'a'
| 'small'
| 'blockquote'
| 'pre'
| 'hr'
| 'ul'
| 'ol'
| 'dl'
| 'li'
| 'dt'
| 'dd';
/** Children rendered within the Content. */
children?: React.ReactNode;
/** Additional classes added to the Content. */
className?: string;
/** Modifies the list (ul, ol and dl components) to have plain styling. */
isPlainList?: boolean;
/** Flag to indicate the link (or all links within the content) has visited styles applied if the browser determines the link has been visited. */
isVisitedLink?: boolean;
/** Value to overwrite the randomly generated data-ouia-component-id. */
ouiaId?: number | string;
/** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
ouiaSafe?: boolean;
}

const componentStyles = {
div: styles.content,
h1: styles.contentH1,
h2: styles.contentH2,
h3: styles.contentH3,
h4: styles.contentH4,
h5: styles.contentH5,
h6: styles.contentH6,
p: styles.contentP,
a: styles.contentA,
small: styles.contentSmall,
blockquote: styles.contentBlockquote,
pre: styles.contentPre,
hr: styles.contentHr,
ul: styles.contentUl,
ol: styles.contentOl,
dl: styles.contentDl,
li: styles.contentLi,
dt: styles.contentDt,
dd: styles.contentDd
};

export const Content: React.FunctionComponent<ContentProps> = ({
children,
className = '',
component,
isPlainList = false,
isVisitedLink = false,
ouiaId,
ouiaSafe = true,
...props
}: ContentProps) => {
const wrappingComponent = component ?? 'div';
const Component: any = wrappingComponent;
const ouiaProps = useOUIAProps(Content.displayName, ouiaId, ouiaSafe);

const isList = ['ul', 'ol', 'dl'].includes(wrappingComponent);

return (
<Component
{...ouiaProps}
{...props}
data-pf-content
className={css(
componentStyles[wrappingComponent],
isList && isPlainList && styles.modifiers.plain,
isVisitedLink && styles.modifiers.visited,
className
)}
>
{children}
</Component>
);
};
Content.displayName = 'Content';
Loading