Skip to content

Commit

Permalink
Add new doc to Timeline Component.
Browse files Browse the repository at this point in the history
  • Loading branch information
Ulaş Turan authored and Ulaş Turan committed Nov 30, 2022
1 parent 611eabd commit f8d120d
Show file tree
Hide file tree
Showing 9 changed files with 604 additions and 776 deletions.
71 changes: 0 additions & 71 deletions components/doc/gmap/basicdoc.js
View file

This file was deleted.

94 changes: 94 additions & 0 deletions components/doc/timeline/aligndoc.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,94 @@
import { Timeline } from '../../lib/timeline/Timeline';
import { DocSectionCode } from '../common/docsectioncode';
import { DocSectionText } from '../common/docsectiontext';

export function AlignmentDoc(props) {
const events = [
{ status: 'Ordered', date: '15/10/2020 10:30', icon: 'pi pi-shopping-cart', color: '#9C27B0', image: 'game-controller.jpg' },
{ status: 'Processing', date: '15/10/2020 14:00', icon: 'pi pi-cog', color: '#673AB7' },
{ status: 'Shipped', date: '15/10/2020 16:15', icon: 'pi pi-shopping-cart', color: '#FF9800' },
{ status: 'Delivered', date: '16/10/2020 10:00', icon: 'pi pi-check', color: '#607D8B' }
];

const code = {
basic: `
<h5>Left Align</h5>
<Timeline value={events} content={(item) => item.status} />
<h5>Right Align</h5>
<Timeline value={events} align="right" content={(item) => item.status} />
<h5>Alternate Align</h5>
<Timeline value={events} align="alternate" content={(item) => item.status} />
`,
javascript: `
import { Timeline } from 'primereact/timeline';
export default function AlignmentDoc() {
const events = [
{ status: 'Ordered', date: '15/10/2020 10:30', icon: 'pi pi-shopping-cart', color: '#9C27B0', image: 'game-controller.jpg' },
{ status: 'Processing', date: '15/10/2020 14:00', icon: 'pi pi-cog', color: '#673AB7' },
{ status: 'Shipped', date: '15/10/2020 16:15', icon: 'pi pi-shopping-cart', color: '#FF9800' },
{ status: 'Delivered', date: '16/10/2020 10:00', icon: 'pi pi-check', color: '#607D8B' }
];
return (
<div className="card">
<h5>Left Align</h5>
<Timeline value={events} content={(item) => item.status} />
<h5>Right Align</h5>
<Timeline value={events} align="right" content={(item) => item.status} />
<h5>Alternate Align</h5>
<Timeline value={events} align="alternate" content={(item) => item.status} />
</div>
)
}
`,
typescript: `
import { Timeline } from 'primereact/timeline';
export default function AlignmentDoc() {
const events = [
{ status: 'Ordered', date: '15/10/2020 10:30', icon: 'pi pi-shopping-cart', color: '#9C27B0', image: 'game-controller.jpg' },
{ status: 'Processing', date: '15/10/2020 14:00', icon: 'pi pi-cog', color: '#673AB7' },
{ status: 'Shipped', date: '15/10/2020 16:15', icon: 'pi pi-shopping-cart', color: '#FF9800' },
{ status: 'Delivered', date: '16/10/2020 10:00', icon: 'pi pi-check', color: '#607D8B' }
];
return (
<div className="card">
<h5>Left Align</h5>
<Timeline value={events} content={(item) => item.status} />
<h5>Right Align</h5>
<Timeline value={events} align="right" content={(item) => item.status} />
<h5>Alternate Align</h5>
<Timeline value={events} align="alternate" content={(item) => item.status} />
</div>
)
}
`
};

return (
<>
<DocSectionText {...props}>
<p>Alignment content.</p>
</DocSectionText>
<div className="card">
<h5>Left Align</h5>
<Timeline value={events} content={(item) => item.status} />

<h5>Right Align</h5>
<Timeline value={events} align="right" content={(item) => item.status} />

<h5>Alternate Align</h5>
<Timeline value={events} align="alternate" content={(item) => item.status} />
</div>
<DocSectionCode code={code} />
</>
);
}
154 changes: 154 additions & 0 deletions components/doc/timeline/apidoc.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,154 @@
import { CodeHighlight } from '../common/codehighlight';
import { DevelopmentSection } from '../common/developmentsection';
import { DocSectionText } from '../common/docsectiontext';
import { DocSubSection } from '../common/docsubsection';
import Link from 'next/link';

export function ApiDoc(props) {
return (
<>
<DocSectionText {...props}></DocSectionText>

<DocSubSection id="properties" label="Properties">
<div className="doc-tablewrapper">
<table className="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>id</td>
<td>string</td>
<td>null</td>
<td>Unique identifier of the element.</td>
</tr>
<tr>
<td>value</td>
<td>array</td>
<td>null</td>
<td>An array of events to display.</td>
</tr>
<tr>
<td>align</td>
<td>string</td>
<td>left</td>
<td>Position of the timeline bar relative to the content. Valid values are "left", "right for vertical layout and "top", "bottom" for horizontal layout.</td>
</tr>
<tr>
<td>layout</td>
<td>string</td>
<td>vertical</td>
<td>Orientation of the timeline, valid values are "vertical" and "horizontal".</td>
</tr>
<tr>
<td>dataKey</td>
<td>string</td>
<td>null</td>
<td>Name of the field that uniquely identifies the a record in the data.</td>
</tr>
<tr>
<td>style</td>
<td>string</td>
<td>null</td>
<td>Inline style of the component.</td>
</tr>
<tr>
<td>className</td>
<td>string</td>
<td>null</td>
<td>Style class of the component.</td>
</tr>
</tbody>
</table>
</div>
</DocSubSection>
<DocSubSection id="styling" label="Styling">
<p>
Following is the list of structural style classes, for theming classes visit <Link href="/theming"> theming</Link> page.
</p>
<div className="doc-tablewrapper">
<table className="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-timeline</td>
<td>Container element.</td>
</tr>
<tr>
<td>p-timeline-left</td>
<td>Container element when alignment is left.</td>
</tr>
<tr>
<td>p-timeline-right</td>
<td>Container element when alignment is right.</td>
</tr>
<tr>
<td>p-timeline-top</td>
<td>Container element when alignment is top.</td>
</tr>
<tr>
<td>p-timeline-bottom</td>
<td>Container element when alignment is bottom.</td>
</tr>
<tr>
<td>p-timeline-alternate</td>
<td>Container element when alignment is alternating.</td>
</tr>
<tr>
<td>p-timeline-vertical</td>
<td>Container element of a vertical timeline.</td>
</tr>
<tr>
<td>p-timeline-horizontal</td>
<td>Container element of a horizontal timeline.</td>
</tr>
<tr>
<td>p-timeline-event</td>
<td>Event element.</td>
</tr>
<tr>
<td>p-timeline-event-opposite</td>
<td>Opposite of an event content.</td>
</tr>
<tr>
<td>p-timeline-event-content</td>
<td>Event content.</td>
</tr>
<tr>
<td>p-timeline-event-separator</td>
<td>Separator element of an event.</td>
</tr>
<tr>
<td>p-timeline-event-marker</td>
<td>Marker element of an event.</td>
</tr>
<tr>
<td>p-timeline-event-connector</td>
<td>Connector element of an event.</td>
</tr>
</tbody>
</table>
</div>
</DocSubSection>
<DocSubSection id="accessibility" label="Accessibility">
<DevelopmentSection>
<h6>Screen Reader</h6>
<p>Timeline uses a semantic ordered list element to list the events. No specific role is enforced, still you may use any aria role and attributes as any valid attribute is passed to the list element.</p>

<h5>Keyboard Support</h5>
<p>Component does not include any interactive elements.</p>
</DevelopmentSection>
</DocSubSection>
</>
);
}
Loading

0 comments on commit f8d120d

Please sign in to comment.