Rua pattern library

Rua pattern library

Source: src/9-plugins/index.js, line 1

7 Plugins

@todo

Source: src/9-plugins/clipboard/index.js, line 1

7.1 Clipboard

Provides and option to copy text to clip board

For more infomation check: https://clipboardjs.com/

Example

<input type="text" id="clipboard-copy" value="https://data.govt.nz/manage-data/step-by-step-guides/releasing-open-data-on-data-govt-nz/" />
<button class="button" data-clipboard data-clipboard-target="#clipboard-copy">Copy</button>

Source: src/9-plugins/match-height/index.js, line 1

7.2 Match height

Use the data attribute data-mh="group-name" where group-name is an arbitrary string to identify which elements should be considered as a group.

Example

With match height Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
With match height Aenean lacinia bibendum nulla sed consectetur. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id ligula porta felis euismod semper. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Without match height Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Without match height Aenean lacinia bibendum nulla sed consectetur. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id ligula porta felis euismod semper. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. 
<div class="row margin-b-sm">
  <div class="col-md-6">
    <div class="bg-french-gray padding-sm" data-mh="group-name">
      <b>With match height</b> Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut
      fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac
      consectetur ac, vestibulum at eros.
    </div>
  </div>
  <div class="col-md-6">
    <div class="bg-french-gray padding-sm" data-mh="group-name">
      <b>With match height</b> Aenean lacinia bibendum nulla sed consectetur. Lorem ipsum dolor sit amet,
      consectetur adipiscing elit. Vestibulum id ligula porta felis euismod semper. Lorem ipsum dolor sit amet,
      consectetur adipiscing elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
    </div>
  </div>
</div>
<div class="row margin">
  <div class="col-md-6">
    <div class="bg-heather padding-sm">
      <b>Without match height</b> Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut
      fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac
      consectetur ac, vestibulum at eros.
    </div>
  </div>
  <div class="col-md-6">
    <div class="bg-heather padding-sm">
      <b>Without match height</b> Aenean lacinia bibendum nulla sed consectetur. Lorem ipsum dolor sit amet,
      consectetur adipiscing elit. Vestibulum id ligula porta felis euismod semper. Lorem ipsum dolor sit amet,
      consectetur adipiscing elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
    </div>
  </div>
</div>

Source: src/9-plugins/match-height/index.js, line 41

7.2.1 Inception

Below is an example of using match height within another match height.

Example

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Maecenas sed diam eget risus varius blandit sit amet non magna.
Aenean lacinia bibendum nulla sed consectetur. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id ligula porta felis euismod semper. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. 
<div class="row margin-b-sm">
  <div class="col-md-6">
    <div class="bg-french-gray padding-sm" data-mh="inception-1">
      <div class="bg-secondary padding-sm margin-b-sm" data-mh="inception-2">
        Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut
        fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac
        consectetur ac, vestibulum at eros.
      </div>
      Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut
      fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac
      consectetur ac, vestibulum at eros.
    </div>
  </div>
  <div class="col-md-6">
    <div class="bg-french-gray padding-sm" data-mh="inception-1">
      <div class="bg-secondary padding-sm margin-b-sm" data-mh="inception-2">
        Maecenas sed diam eget risus varius blandit sit amet non magna.
      </div>
      Aenean lacinia bibendum nulla sed consectetur. Lorem ipsum dolor sit amet,
      consectetur adipiscing elit. Vestibulum id ligula porta felis euismod semper. Lorem ipsum dolor sit amet,
      consectetur adipiscing elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
    </div>
  </div>
</div>

Source: src/9-plugins/toggler/index.js, line 1

7.3 Toggler

Provides options to toggle text, css classes, animations, visibilty etc between 2 states.

Example

<button class="button" data-click="text: Click, Replacement text"></button>

Source: src/9-plugins/toggler/index.js, line 10

7.3.1 Event types

Click toggles the state data-click="..."

Click-true sets the state to true data-click-true="..."

Click-false sets the state to false data-click-false="..."

Focus sets the state to true data-focus="..."

Blur sets the state to false data-blur="..."

Example

<button class="button" data-click='text: Click, "Replacement text"; trigger: #multiple-toggles'></button>
<div id="multiple-toggles" data-toggle="text: Hello World, Good bye; class: bg-primary, bg-secondary" class="bg-primary padding-sm margin-sm"></div>

Source: src/9-plugins/toggler/options/ariaLabel.js, line 1

7.3.2 Aria Label

Toggles the aria-label of the element between 2 strings

Example

Open inspector to check aria-label

<button class="button-icon" data-click="trigger: #toggle__icon, #aria-text; arialabel: 'Open', 'Close'" aria-label="Open">
 <span id="toggle__icon" class="ri ri-chevron-down" data-toggle="class: ri-chevron-down, ri-chevron-up"></span>
 </button>
 <p>Open inspector to check aria-label</p>

Source: src/9-plugins/toggler/options/cssclass.js, line 1

7.3.3 Class

Toggles the class of the element between 2 strings

Parameters: class: <css class>, <css class>

Example

<button class="button" data-click="class: secondary">Click</button>

Source: src/9-plugins/toggler/options/dirty.js, line 1

7.3.4 Dirty

Simply adds a dirty class to the element indicating this element has been interacted with. This option ignores the current state, therefore once interacted its perminant till page reload.

This is useful for people with cognitive impairments may find it hard to remember what they have read and/or form elements.

Parameters: dirty: <optional dirty class>, <optional clean class>

Example

<button class="button" data-click="dirty">Click</button>
<button class="button" data-click="dirty: secondary">Click</button>

Source: src/9-plugins/toggler/options/html.js, line 1

7.3.5 HTML

Toggles the inner html of an element between itself and the given element identified by HTML ID

Parameters: html: <html id>, <html id>

Example

<div data-click="html: #header-search-inactive, #header-search-active"></div>
<script type="text/html" id="header-search-inactive">
  <div class="button">
    <span class="ri ri-chevron-down"></span>
    <span>
      Search
    </span>
  </div>
</script>
<script type="text/html" id="header-search-active">
  <div class="button-icon">
    <span class="ri ri-chevron-up"></span>
  </div>
</script>

Source: src/9-plugins/toggler/options/slide.js, line 1

7.3.6 Slide

Animates a element in and out of appearance.

Example

<button class="button" data-click="trigger: #slide-target; ariaexpanded: true, false" aria-controls="slide-target" aria-expanded="false">Click</button>
<div id="slide-target" data-toggle="slide" style="display:none">Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</div>

Source: src/9-plugins/toggler/options/text.js, line 1

7.3.7 Text

Toggles the text of the element between 2 strings

@todo Complete

Example

<button class="button" data-click="text: Hello World, Good bye"></button>

Source: src/9-plugins/toggler/options/text.js, line 12

7.3.7.1 String comma

To prevent a comma from being considered a seperate string, wrap the string in double-quotes.

Example

<button class="button" data-click='text: "Hi world, im .." , Good bye'></button>

Source: src/9-plugins/toggler/options/trigger.js, line 1

7.3.8 Triggers

Triggers other elements to update their state and run functions defined with data-toggle.

@todo Complete

Example

Hello World
<button class="button" data-click="trigger: #trigger-target">Click</button>
<div id="trigger-target" data-toggle="text: Hello World, Good bye">Hello World</div>

Example

<button class="button" data-click="trigger: .multiple-targets, #multiple-target-ID">Click</button>
<div class="multiple-targets" data-toggle="text: These are targeted by..., class"></div>
<div class="multiple-targets" data-toggle="text: These are targeted by..., class"></div>
<div id="multiple-target-ID" data-toggle="text: This is targeted..., id"></div>

Source: src/9-plugins/tooltip/index.js, line 1

7.4 Tooltip

Provides and option to copy text to clip board

For more infomation check: https://popper.js.org/tooltip-documentation.html

Example

<button class="button" data-tooltip="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sagittis mauris augue." data-tooltip-placement="right">Hover/Focus</button>
<button class="button" data-tooltip="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sagittis mauris augue.">Hover/Focus</button>
<button class="button" data-tooltip="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sagittis mauris augue." data-tooltip-placement="bottom">Hover/Focus</button>
<button class="button" data-tooltip="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sagittis mauris augue." data-tooltip-placement="left">Hover/Focus</button>
<button class="button" data-tooltip="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sagittis mauris augue." data-tooltip-trigger="click" data-tooltip-placement="right">Click</button>
<button class="button" data-tooltip="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sagittis mauris augue." data-tooltip-trigger="click">Click</button>
<button class="button" data-tooltip="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sagittis mauris augue." data-tooltip-trigger="click" data-tooltip-placement="bottom">Click</button>
<button class="button" data-tooltip="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sagittis mauris augue." data-tooltip-trigger="click" data-tooltip-placement="left">Click</button>