Skip to content

Commit

Permalink
docs(Content): update examples and description
Browse files Browse the repository at this point in the history
  • Loading branch information
@adamviktora
adamviktora committed Jun 13, 2024
1 parent 3f72ce2 commit 534b5d3
Show file tree
Hide file tree
Showing 6 changed files with 56 additions and 50 deletions.
2 changes: 2 additions & 0 deletions packages/react-core/src/components/Content/examples/Content.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@ propComponents: ['Content']

The `<Content>` component provides simple, built-in styling for putting common blocks of HTML elements together. It establishes the block of content and styling within it for the elements listed in the `component` property - `h1` through `h6`, `p`, `a`, `small`, `blockquote`, `pre`, `hr`, list components (`ul`, `ol`, `dl`) and list items (`li`, `dt`, `dd`).

If you use <Content> without a component property, it will style all its child elements. If you want to style only a single element, e.g. `h1`, use `<Content component="h1">`.

To prevent styling issues, you should use `<Content>` component's properties instead of using seperate components. For example, rather than nesting the `<List>` and `<Title>` components within `<Content>`, you should use `<Content component="ul">` and `<Content component="h1">` or nest html elements within `<Content>`. Similarly, when you need to add a divider, rather than passing in a separate `<Divider>` component, you should use `<Content component="hr">`, which will be styled as a divider.

## Examples
Expand Down
12 changes: 6 additions & 6 deletions packages/react-core/src/components/Content/examples/ContentDescriptionList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,11 @@ import { Content } from '@patternfly/react-core';

export const ContentDescriptionList: React.FunctionComponent = () => (
<Content component="dl">
<dt>Web</dt>
<dd>The part of the Internet that contains websites and web pages</dd>
<dt>HTML</dt>
<dd>A markup language for creating web pages</dd>
<dt>CSS</dt>
<dd>A technology to make HTML look better</dd>
<Content component="dt">Web</Content>
<Content component="dd">The part of the Internet that contains websites and web pages</Content>
<Content component="dt">HTML</Content>
<Content component="dd">A markup language for creating web pages</Content>
<Content component="dt">CSS</Content>
<Content component="dd">A technology to make HTML look better</Content>
</Content>
);
14 changes: 7 additions & 7 deletions packages/react-core/src/components/Content/examples/ContentOrderedList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,12 @@ import { Content } from '@patternfly/react-core';

export const ContentOrderedList: React.FunctionComponent = () => (
<Content component="ol">
<li>Donec blandit a lorem id convallis.</li>
<li>Cras gravida arcu at diam gravida gravida.</li>
<li>Integer in volutpat libero.</li>
<li>Donec a diam tellus.</li>
<li>Aenean nec tortor orci.</li>
<li>Quisque aliquam cursus urna, non bibendum massa viverra eget.</li>
<li>Vivamus maximus ultricies pulvinar.</li>
<Content component="li">Donec blandit a lorem id convallis.</Content>
<Content component="li">Cras gravida arcu at diam gravida gravida.</Content>
<Content component="li">Integer in volutpat libero.</Content>
<Content component="li">Donec a diam tellus.</Content>
<Content component="li">Aenean nec tortor orci.</Content>
<Content component="li">Quisque aliquam cursus urna, non bibendum massa viverra eget.</Content>
<Content component="li">Vivamus maximus ultricies pulvinar.</Content>
</Content>
);
22 changes: 11 additions & 11 deletions packages/react-core/src/components/Content/examples/ContentPlainList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,20 +5,20 @@ export const ContentPlainList: React.FunctionComponent = () => (
<>
<Content component="h3">Plain unordered list</Content>
<Content component="ul" isPlainList>
<li>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</li>
<li>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</li>
<li>Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.</li>
<li>Ut non enim metus.</li>
<Content component="li">In fermentum leo eu lectus mollis, quis dictum mi aliquet.</Content>
<Content component="li">Morbi eu nulla lobortis, lobortis est in, fringilla felis.</Content>
<Content component="li">Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.</Content>
<Content component="li">Ut non enim metus.</Content>
</Content>
<Content component="h3">Plain ordered list</Content>
<Content component="ol" isPlainList>
<li>Donec blandit a lorem id convallis.</li>
<li>Cras gravida arcu at diam gravida gravida.</li>
<li>Integer in volutpat libero.</li>
<li>Donec a diam tellus.</li>
<li>Aenean nec tortor orci.</li>
<li>Quisque aliquam cursus urna, non bibendum massa viverra eget.</li>
<li>Vivamus maximus ultricies pulvinar.</li>
<Content component="li">Donec blandit a lorem id convallis.</Content>
<Content component="li">Cras gravida arcu at diam gravida gravida.</Content>
<Content component="li">Integer in volutpat libero.</Content>
<Content component="li">Donec a diam tellus.</Content>
<Content component="li">Aenean nec tortor orci.</Content>
<Content component="li">Quisque aliquam cursus urna, non bibendum massa viverra eget.</Content>
<Content component="li">Vivamus maximus ultricies pulvinar.</Content>
</Content>
</>
);
18 changes: 9 additions & 9 deletions packages/react-core/src/components/Content/examples/ContentUnorderedList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,15 @@ import { Content } from '@patternfly/react-core';

export const ContentUnorderedList: React.FunctionComponent = () => (
<Content component="ul">
<li>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</li>
<li>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</li>
<li>
<Content component="li">In fermentum leo eu lectus mollis, quis dictum mi aliquet.</Content>
<Content component="li">Morbi eu nulla lobortis, lobortis est in, fringilla felis.</Content>
<Content component="li">
Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.
<ul>
<li>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</li>
<li>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</li>
</ul>
</li>
<li>Ut non enim metus.</li>
<Content component="ul">
<Content component="li">In fermentum leo eu lectus mollis, quis dictum mi aliquet.</Content>
<Content component="li">Morbi eu nulla lobortis, lobortis est in, fringilla felis.</Content>
</Content>
</Content>
<Content component="li">Ut non enim metus.</Content>
</Content>
);
38 changes: 21 additions & 17 deletions packages/react-core/src/components/Content/examples/ContentVisited.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,24 +3,28 @@ import { Content } from '@patternfly/react-core';

export const ContentVisited: React.FunctionComponent = () => (
<>
<Content component="h5">Link with isVisitedLink prop</Content>
<p>
<Content component="a" isVisitedLink href="#">
Click to visit link
</Content>
</p>
<Content>
<h5>Link with isVisitedLink prop</h5>
<p>
<Content component="a" isVisitedLink href="#">
Click to visit link
</Content>
</p>
</Content>
<br />
<Content component="h5">Links wrapped in Content with isVisitedLink prop</Content>
<Content component="ul" isVisitedLink>
<li>
<a href="#1">Content link 1</a>
</li>
<li>
<a href="#2">Content link 2</a>
</li>
<li>
<a href="#3">Content link 3</a>
</li>
<Content isVisitedLink>
<h5>Links wrapped in Content with isVisitedLink prop</h5>
<ul>
<li>
<a href="#1">Content link 1</a>
</li>
<li>
<a href="#2">Content link 2</a>
</li>
<li>
<a href="#3">Content link 3</a>
</li>
</ul>
</Content>
</>
);

0 comments on commit 534b5d3

Please sign in to comment.