[Themes] How to add new Patternfly component and required scripts?

Extending the server
1

Hi!
I know this might be a trivial question but I’m just getting started with themes ecosystem.
I have created custom Login theme that in terms of styling works just fine.

Now I need to add expandable panel to login section and would like to use Patternfly components.
I know that there are two versions of Patternfly in use (v3 and v4). I believe the login theme can use v3 or can they be mixed?

I have added a new section in login.ftl, a simple “expandable” with syntax as for Patternfly v3: (pf-c-expandable is replaced by pf-c-expandable-section in pf-4)

 <div class="pf-c-expandable">
              <button type="button" class="pf-c-expandable__toggle" aria-expanded="false">
                  <i class="fas fa-angle-right pf-c-expandable__toggle-icon" aria-hidden="true"></i>
                  <span>Show more</span>
              </button>
              <div class="pf-c-expandable__content" hidden>
       </div>
        </div>

It gets rendered on the login page but it’s “inactive”. So I guess it should have some scripts included e.g.

node_modules/patternfly/dist/js/patternfly.min.js
web_modules/@patternfly/react-core.js

What is the correct way of importing all required modules here so they are loaded as scripts in the resulting page? As I can see only CSS is imported via this

stylesCommon=web_modules/@patternfly/react-core/dist/styles/base.css web_modules/@patternfly/react-core/dist/styles/app.css node_modules/patternfly/dist/css/patternfly.min.css node_modules/patternfly/dist/css/patternfly-additions.min.css lib/pficon/pficon.css

Thanks a lot!
Mike

1 Like