Piano

The piano pattern allows you to switch between different panels of content within the same UI. Commonly used in integration and messages UIs.

Dependencies

You will need to import the _component.piano.scss sass partial in your main sass file.

pulsar.scss

@import '/path/to/pulsar/stylesheets/component.piano';

Code example

<div class="piano-wrapper">
  <div class="piano">
    <ul class="piano__items">
      <li class="piano__item is-selected">
        <a href="#">
          <div class="piano__item-header">
            {{
              html.media({
                'image': '/views/patterns/piano/img/address_finder.png',
                'title': 'Address Finder',
                'description': 'Address lookups via your custom-built address finder service',
                'action': html.status('active', {
                  'title': 'integration enabled'
                })
              })
            }}
          </div>
        </a>

        <section class="piano__item-content" aria-labelledby="example-piano-heading">
          <header class="piano__item-content-header">
            <h2 id="example-piano-heading" class="u-margin-bottom-none">Address Finder</h2>
          </header>

          <p>Connect to your custom-built address finder service by entering the connection details below. Note, your service must follow the specification to be compatible.</p>

          <div class="masterswitch">
            {{
                form.create()
            }}

              {{
                form.toggle_switch({
                  'class': 'masterswitch-control',
                  'label': 'Enable integration',
                  'id': 'toggletest',
                  'checked': true
                })
              }}

              <hr/>

              <div class="masterswitch-content">
                {{
                  form.text({
                    'label': 'Authentication Key',
                    'class': 'form__group--full',
                    'id': 'addressFinderAuthKey',
                    'name': 'addressFinderAuthKey',
                    'required': true,
                    'help': 'API key used by the system when making API requests'
                  })
                }}

                {{
                  form.text({
                    'label': 'Configuration file location',
                    'class': 'form__group--full',
                    'id': 'addressFinderConfigLocation',
                    'name': 'addressFinderConfigLocation',
                    'required': true,
                    'help': 'URL for the location of the configuration JSON file. Must be HTTPS'
                  })
                }}
              </div>


              {{
                form.end({
                  'actions': [
                    html.button({
                      'label': 'Save',
                      'class': 'btn--primary'
                    }),
                    html.button({
                      'label': 'Cancel',
                      'class': 'btn--naked'
                    })
                  ]
                })
              }}
          </div>
        </section>
      </li>
      <li class="piano__item">
        <a href="#">
          <div class="piano__item-header">
            {{
              html.media({
                'image': '/views/patterns/piano/img/aws_lex.png',
                'title': 'AWS Simple Email Service',
                'description': 'Send emails with the AWS Simple Email Service',
                'action': html.status('inactive', {
                  'title': 'integration disabled'
                })
              })
            }}
          </div>
        </a>
      </li>
      <li class="piano__item">
        <a href="#">
          <div class="piano__item-header">
            {{
              html.media({
                'image': '/views/patterns/piano/img/cxm.png',
                'title': 'Jadu Deployer',
                'description': 'OAuth Client',
                'action': html.status('inactive', {
                  'title': 'integration disabled'
                })
              })
            }}
          </div>
        </a>
      </li>
      <li class="piano__item">
        <a href="#">
          <div class="piano__item-header">
            {{
              html.media({
                'image': '/views/patterns/piano/img/mailgun.png',
                'title': 'Mailgun',
                'description': 'Send emails via Mailgun',
                'action': html.status('inactive', {
                  'title': 'integration disabled'
                })
              })
            }}
          </div>
        </a>
      </li>

      <li class="piano__item">
        <a href="#">
          <div class="piano__item-header">
            {{
              html.media({
                'image': '/views/patterns/piano/img/singlepoint.png',
                'title': 'SinglePoint',
                'description': 'Allow address lookup by postcode in forms',
                'action': html.status('inactive', {
                  'title': 'integration disabled'
                })
              })
            }}
          </div>
        </a>
      </li>
    </ul>
  </div>
</div>