Skip to content

Commit 5334cac

Browse files
Mash707Mash707
authored
chore(miscellaneous): update demo flags from js to ts (#12197)
* chore(miscellaneous): update demo flags from js to ts * chore(miscellaneous): update demo flags from js to ts * added types * added spacing
1 parent bc46a52 commit 5334cac

File tree

13 files changed

+501
-492
lines changed

13 files changed

+501
-492
lines changed

‎packages/react-core/src/demos/Banner.md‎

Lines changed: 2 additions & 139 deletions
Original file line numberDiff line numberDiff line change
@@ -11,148 +11,11 @@ import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/Dashboard
1111

1212
### Basic sticky banner
1313

14-
```js isFullscreen
15-
import { Fragment } from 'react';
16-
import { Banner, Card, CardBody, Flex, Gallery, GalleryItem, PageSection, Content } from '@patternfly/react-core';
17-
18-
import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
19-
import { css } from '@patternfly/react-styles';
20-
import display from '@patternfly/react-styles/css/utilities/Display/display';
21-
22-
class BannerDemo extends React.Component {
23-
render() {
24-
const banner = (
25-
<Banner isSticky>
26-
<Flex
27-
justifyContent={{ default: 'justifyContentCenter', lg: 'justifyContentSpaceBetween' }}
28-
flexWrap={{ default: 'nowrap' }}
29-
>
30-
<div className={css(display.displayNone, display.displayBlockOnLg)}>Localhost</div>
31-
<div className={css(display.displayNone, display.displayBlockOnLg)}>
32-
This message is sticky to the top of the page.
33-
</div>
34-
<div className={css(display.displayNoneOnLg)}>Drop some text on mobile, truncate if needed.</div>
35-
<div className={css(display.displayNone, display.displayBlockOnLg)}>Ned Username</div>
36-
</Flex>
37-
</Banner>
38-
);
39-
return (
40-
<Fragment>
41-
<DashboardWrapper banner={banner} breadcrumb={null}>
42-
<PageSection aria-labelledby="main-title">
43-
<Content>
44-
<h1 id="main-title">Main title</h1>
45-
<p>
46-
Body text should be Red Hat Text at 1rem(16px). It should have leading of 1.5rem(24px) because <br />
47-
of it’s relative line height of 1.5.
48-
</p>
49-
</Content>
50-
</PageSection>
51-
<PageSection aria-label='Cards gallery'>
52-
<Gallery hasGutter>
53-
{Array.from({ length: 30 }).map((_value, index) => (
54-
<GalleryItem key={index}>
55-
<Card key={index}>
56-
<CardBody>This is a card</CardBody>
57-
</Card>
58-
</GalleryItem>
59-
))}
60-
</Gallery>
61-
</PageSection>
62-
</DashboardWrapper>
63-
</Fragment>
64-
);
65-
}
66-
}
14+
```ts file="examples/Banner/BannerBasicSticky.tsx" isFullscreen
6715
```
6816

6917
### Top and bottom banner
7018

71-
```js isFullscreen
72-
import { Fragment } from 'react';
73-
import {
74-
Banner,
75-
Card,
76-
CardBody,
77-
Flex,
78-
FlexItem,
79-
Gallery,
80-
GalleryItem,
81-
PageSection,
82-
Content
83-
} from '@patternfly/react-core';
84-
import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
85-
import { css } from '@patternfly/react-styles';
86-
import display from '@patternfly/react-styles/css/utilities/Display/display';
19+
```ts file="examples/Banner/BannerTopBottom.tsx" isFullscreen
8720

88-
class BannerDemo extends React.Component {
89-
render() {
90-
return (
91-
<Fragment>
92-
<Flex
93-
direction={{ default: 'column' }}
94-
flexWrap={{ default: 'nowrap' }}
95-
spaceItems={{ default: 'spaceItemsNone' }}
96-
style={{ height: '100%' }}
97-
>
98-
<FlexItem>
99-
<Banner isSticky>
100-
<Flex
101-
justifyContent={{ default: 'justifyContentCenter', lg: 'justifyContentSpaceBetween' }}
102-
flexWrap={{ default: 'nowrap' }}
103-
>
104-
<div className={css(display.displayNone, display.displayBlockOnLg)}>Localhost</div>
105-
<div className={css(display.displayNone, display.displayBlockOnLg)}>
106-
This message is sticky to the top of the page.
107-
</div>
108-
<div className={css(display.displayNoneOnLg)}>Drop some text on mobile, truncate if needed.</div>
109-
<div className={css(display.displayNone, display.displayBlockOnLg)}>Ned Username</div>
110-
</Flex>
111-
</Banner>
112-
</FlexItem>
113-
<FlexItem grow={{ default: 'grow' }} style={{ minHeight: 0 }}>
114-
<DashboardWrapper breadcrumb={null}>
115-
<PageSection aria-labelledby="main-title">
116-
<Content>
117-
<h1 id='main-title'>Main title</h1>
118-
<p>
119-
Body text should be Red Hat Text at 1rem(16px). It should have leading of 1.5rem(24px) because{' '}
120-
<br />
121-
of it’s relative line height of 1.5.
122-
</p>
123-
</Content>
124-
</PageSection>
125-
<PageSection aria-label='Cards gallery'>
126-
<Gallery hasGutter>
127-
{Array.from({ length: 30 }).map((_value, index) => (
128-
<GalleryItem key={index}>
129-
<Card key={index}>
130-
<CardBody>This is a card</CardBody>
131-
</Card>
132-
</GalleryItem>
133-
))}
134-
</Gallery>
135-
</PageSection>
136-
</DashboardWrapper>
137-
</FlexItem>
138-
<FlexItem>
139-
<Banner isSticky>
140-
<Flex
141-
justifyContent={{ default: 'justifyContentCenter', lg: 'justifyContentSpaceBetween' }}
142-
flexWrap={{ default: 'nowrap' }}
143-
>
144-
<div className={css(display.displayNone, display.displayBlockOnLg)}>Localhost</div>
145-
<div className={css(display.displayNone, display.displayBlockOnLg)}>
146-
This message is sticky to the bottom of the page.
147-
</div>
148-
<div className={css(display.displayNoneOnLg)}>Drop some text on mobile, truncate if needed.</div>
149-
<div className={css(display.displayNone, display.displayBlockOnLg)}>Ned Username</div>
150-
</Flex>
151-
</Banner>
152-
</FlexItem>
153-
</Flex>
154-
</Fragment>
155-
);
156-
}
157-
}
15821
```

‎packages/react-core/src/demos/DateTimePicker.md‎

Lines changed: 2 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -14,96 +14,12 @@ In this demo, learn how to use a [CalendarMonth](/components/date-and-time/calen
1414

1515
### Date and time picker
1616

17-
```ts file="./examples/DateTimePicker/DateTimePicker.tsx"
17+
```ts file="examples/DateTimePicker/DateTimePicker.tsx"
1818

1919
```
2020

2121
### Date and time range picker
2222

23-
```js
24-
import { useState } from 'react';
25-
import { Flex, FlexItem, InputGroup, InputGroupItem, DatePicker, isValidDate, TimePicker, yyyyMMddFormat, updateDateTime } from '@patternfly/react-core';
26-
27-
DateTimeRangePicker = () => {
28-
const [from, setFrom] = useState();
29-
const [to, setTo] = useState();
30-
31-
const toValidator = (date) => {
32-
return isValidDate(from) && yyyyMMddFormat(date) >= yyyyMMddFormat(from)
33-
? ''
34-
: 'The "to" date must be after the "from" date';
35-
};
36-
37-
const onFromDateChange = (_event, inputDate, newFromDate) => {
38-
if (isValidDate(from) && isValidDate(newFromDate) && inputDate === yyyyMMddFormat(newFromDate)) {
39-
newFromDate.setHours(from.getHours());
40-
newFromDate.setMinutes(from.getMinutes());
41-
}
42-
if (isValidDate(newFromDate) && inputDate === yyyyMMddFormat(newFromDate)) {
43-
setFrom(new Date(newFromDate));
44-
}
45-
};
46-
47-
const onFromTimeChange = (_event, time, hour, minute) => {
48-
if (isValidDate(from)) {
49-
const updatedFromDate = new Date(from);
50-
updatedFromDate.setHours(hour);
51-
updatedFromDate.setMinutes(minute);
52-
setFrom(updatedFromDate);
53-
}
54-
};
55-
56-
const onToDateChange = (_event, inputDate, newToDate) => {
57-
if (isValidDate(to) && isValidDate(newToDate) && inputDate === yyyyMMddFormat(newToDate)) {
58-
newToDate.setHours(to.getHours());
59-
newToDate.setMinutes(to.getMinutes());
60-
}
61-
if (isValidDate(newToDate) && inputDate === yyyyMMddFormat(newToDate)) {
62-
setTo(newToDate);
63-
}
64-
};
65-
66-
const onToTimeChange = (_event, time, hour, minute) => {
67-
if (isValidDate(to)) {
68-
const updatedToDate = new Date(to);
69-
updatedToDate.setHours(hour);
70-
updatedToDate.setMinutes(minute);
71-
setTo(updatedToDate);
72-
}
73-
};
23+
```ts file="examples/DateTimePicker/DateTimeRangePicker.tsx"
7424

75-
return (
76-
<Flex direction={{ default: 'column', lg: 'row' }}>
77-
<FlexItem>
78-
<InputGroup>
79-
<InputGroupItem>
80-
<DatePicker onChange={onFromDateChange} aria-label="Start date" placeholder="YYYY-MM-DD" />
81-
</InputGroupItem>
82-
<InputGroupItem>
83-
<TimePicker aria-label="Start time" style={{ width: '150px' }} onChange={onFromTimeChange} />
84-
</InputGroupItem>
85-
</InputGroup>
86-
</FlexItem>
87-
<FlexItem>to</FlexItem>
88-
<FlexItem>
89-
<InputGroup>
90-
<InputGroupItem>
91-
<DatePicker
92-
value={isValidDate(to) ? yyyyMMddFormat(to) : to}
93-
onChange={onToDateChange}
94-
isDisabled={!isValidDate(from)}
95-
rangeStart={from}
96-
validators={[toValidator]}
97-
aria-label="End date"
98-
placeholder="YYYY-MM-DD"
99-
/>
100-
</InputGroupItem>
101-
<InputGroupItem>
102-
<TimePicker style={{ width: '150px' }} onChange={onToTimeChange} isDisabled={!isValidDate(from)} />
103-
</InputGroupItem>
104-
</InputGroup>
105-
</FlexItem>
106-
</Flex>
107-
);
108-
}
10925
```

‎packages/react-core/src/demos/JumpLinks.md‎

Lines changed: 2 additions & 129 deletions
Original file line numberDiff line numberDiff line change
@@ -21,134 +21,7 @@ JumpLinks has a scrollspy built-in to make your implementation easier. When impl
2121

2222
This demo expands on the previous to show the JumpLinks in a vertical layout with subsections. It scrolls the [Page](/components/page)'s `mainContainerId` with an `offset` calculated based on the height of the masthead and the nav list when it appears above the content. The headings are given a tab index to allow the jump links to focus on them.
2323

24-
```js isFullscreen
25-
import { useEffect, useState } from 'react';
26-
import {
27-
PageSection,
28-
JumpLinks,
29-
JumpLinksItem,
30-
JumpLinksList,
31-
PageGroup,
32-
Sidebar,
33-
SidebarContent,
34-
SidebarPanel,
35-
Switch,
36-
Title,
37-
Content,
38-
getResizeObserver
39-
} from '@patternfly/react-core';
40-
import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
41-
import mastheadStyles from '@patternfly/react-styles/css/components/Masthead/masthead';
42-
43-
ScrollspyH2 = () => {
44-
const headings = [1, 2, 3, 4, 5];
45-
46-
const [isVertical, setIsVertical] = useState(true);
47-
const [offsetHeight, setOffsetHeight] = useState(10);
48-
const offsetForPadding = 10;
49-
let masthead;
50-
51-
// Update offset based on the masthead and jump links nav heights.
52-
useEffect(() => {
53-
masthead = document.getElementsByClassName(mastheadStyles.masthead)[0];
54-
55-
if (isVertical) {
56-
setOffsetHeight(masthead.offsetHeight + offsetForPadding);
57-
} else {
58-
// Append jump links nav height to the masthead height when value exists.
59-
const jumpLinksHeaderHeight = document.getElementsByClassName('pf-m-sticky')[0].offsetHeight;
60-
jumpLinksHeaderHeight && setOffsetHeight(masthead.offsetHeight + jumpLinksHeaderHeight + offsetForPadding);
61-
}
62-
63-
64-
}, [isVertical]);
65-
66-
getResizeObserver(
67-
document.getElementsByClassName(mastheadStyles.masthead)[0],
68-
() => {
69-
if (isVertical) {
70-
setOffsetHeight(masthead.offsetHeight + offsetForPadding);
71-
} else {
72-
// Append jump links nav height to the masthead height when value exists.
73-
const jumpLinksHeaderHeight = document.getElementsByClassName('pf-m-sticky')[0].offsetHeight;
74-
jumpLinksHeaderHeight && setOffsetHeight(masthead.offsetHeight + jumpLinksHeaderHeight + offsetForPadding);
75-
}
76-
},
77-
true
78-
);
79-
80-
return (
81-
<DashboardWrapper breadcrumb={null} mainContainerId="scrollable-element">
82-
<PageSection aria-labelledby='main-title'>
83-
<Title headingLevel="h1" size="2xl" id='main-title'>
84-
Main title
85-
</Title>
86-
<Switch
87-
id="is-vertical"
88-
label="Vertical jump links"
89-
isChecked={isVertical}
90-
onChange={(_event, check) => setIsVertical(check)}
91-
/>
92-
</PageSection>
93-
<PageSection padding={{ default: 'noPadding' }} >
94-
<Sidebar hasGutter orientation={!isVertical && 'stack'}>
95-
<SidebarPanel variant="sticky">
96-
<PageSection aria-label='Jump links navigation'>
97-
<JumpLinks
98-
isVertical={isVertical}
99-
isCentered={!isVertical}
100-
label="Jump to section"
101-
scrollableSelector=".pf-v6-c-page__main-container"
102-
offset={offsetHeight}
103-
expandable={{ default: isVertical ? 'expandable' : 'nonExpandable', md: 'nonExpandable' }}
104-
isExpanded
105-
>
106-
{headings.map(i => (
107-
<JumpLinksItem key={i} href={`#heading-${i}`}>
108-
{`Heading ${i}`}
109-
<JumpLinksList></JumpLinksList>
110-
</JumpLinksItem>
111-
))}
112-
</JumpLinks>
113-
</PageSection>
114-
</SidebarPanel>
115-
<SidebarContent hasNoBackground>
116-
<PageSection aria-label='Main content'>
117-
<Content>
118-
{headings.map(i => (
119-
<div key={i} style={{ maxWidth: '800px', marginBottom: '32px' }}>
120-
<h2 id={`heading-${i}`} tabIndex={-1}>
121-
{`Heading ${i}`}
122-
</h2>
123-
<p>
124-
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
125-
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
126-
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
127-
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
128-
in culpa qui officia deserunt mollit anim id est laborum.
129-
</p>
130-
<br />
131-
<p>
132-
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum
133-
deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non
134-
provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum
135-
fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta
136-
nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus,
137-
omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis
138-
debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non
139-
recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus
140-
maiores alias consequatur aut perferendis doloribus asperiores repellat.
141-
</p>
142-
</div>
143-
))}
144-
</Content>
145-
</PageSection>
146-
</SidebarContent>
147-
</Sidebar>
148-
</PageSection>
149-
</DashboardWrapper>
150-
);
151-
};
24+
```ts file="examples/JumpLinks/JumpLinksScrollspy.tsx" isFullscreen
15225
```
15326

15427
### With drawer
@@ -157,5 +30,5 @@ This demo shows how jump links can be used in combination with a drawer.
15730

15831
This demo uses a `scrollableRef` prop on the JumpLinks component, which is a React ref to the `DrawerContent` component.
15932

160-
```js isFullscreen file="./examples/JumpLinks/JumpLinksWithDrawer.js"
33+
```ts file="examples/JumpLinks/JumpLinksWithDrawer.tsx" isFullscreen
16134
```

0 commit comments

Comments
 (0)