patternfly templates for patternfly org
This document provides guidelines on how to write templates on patternfly test pages that can be immediately consumed by patternfly-org.
The patternfly-org repo is the source for the patternfly.org website. Every time a component is presented as a "live example" in the website, patternfly-org is consuming a template from the patternfly repo, and the component can be seen in patternfly test pages. The code consumed by patternfly-org can be a full page template, or a component template.
A full page layout is displayed as live example in the pattern page. Example: Login Page.
Patternfly-org uses an include to call for the login.html template, which is a full page layout that can be seen on patternfly test pages.
The template file is located in the patternfly repo: patternfly/tests/pages/_includes/widgets/framework/
A component is displayed as live example in the pattern page. Example: Left Description and Right Label component in the Utilization Bar Card page.
Patternfly-org uses an include to call for the utilization-bar-side-labels.html template, which is a component available inside the cards page in patternfly test pages.
The template file is located in the patternfly repo: patternfly/tests/pages/_includes/widgets/cards/
Whenever you write a new test page in patternfly, keep in mind that pieces of the code might be needed by patternfly-org. If that is the case, follow these steps:
The components that will also be displayed in patternfly.org need to be writen as templates to be consumed as includes. This way we avoid replicated code, and the same template is called both by the test page in patternfly and by the pattern page in patternfly-org via include.
The template is a html file stored inside the widgets folder in the patternfly repo.
For example, the Inline Notifications page presents 6 different components (alerts) as live examples.
They were written as templates. In patternfly-org, they are consumed via includes:
The same templates are consumed in the patternfly Alerts test page via includes.
Note that some elements that are exclusively presented in this test page are coded in the page itself. Unless they are use somewhere else, they don't need to be written in a separate file as a template and called via include.