Mustache / Handlebars // Developer note: ensure your ".mustache" files are imported as plain text. In Webpack you might use https://github.com/webpack-contrib/raw-loader
import Mustache from "mustache";
import FieldsetBlock from "@govtnz/ds/build/mustache/FieldsetBlock.mustache";
import H1 from "@govtnz/ds/build/mustache/H1.mustache";
import InputBlock from "@govtnz/ds/build/mustache/InputBlock.mustache";
// The variables FieldsetBlock, H1, InputBlock are all strings that are mustache templates.
export default `${Mustache.render(FieldsetBlock, {
id: `addressId`,
legend: `${Mustache.render(H1, {
"styleSize=large": true,
styleSize: true,
children: `What is your address?`
})}`,
children: `${Mustache.render(InputBlock, {
type: `text`,
label: `Street address`,
name: `streetAddress`,
id: `streetAddressId`,
autoComplete: `street-address`
})}${Mustache.render(InputBlock, {
type: `text`,
label: `Town or city`,
name: `town`,
id: `townId`,
autoComplete: `address-level2`
})}${Mustache.render(InputBlock, {
type: `text`,
label: `Postcode`,
name: `postcode`,
id: `postcodeId`,
width: `5`,
autoComplete: `postal-code`
})}`
})}`;
React (JavaScript) import React from "react";
import FieldsetBlock from "@govtnz/ds/build/react-js/FieldsetBlock";
import "@govtnz/ds/build/css/FieldsetBlock.css"; // or @govtnz/ds/build/scss/FieldsetBlock.scss
import H1 from "@govtnz/ds/build/react-js/H1";
import "@govtnz/ds/build/css/H1.css"; // or @govtnz/ds/build/scss/H1.scss
import InputBlock from "@govtnz/ds/build/react-js/InputBlock";
import "@govtnz/ds/build/css/InputBlock.css"; // or @govtnz/ds/build/scss/InputBlock.scss
export default () => (
<FieldsetBlock
id="addressId"
legend={<H1 styleSize="large">What is your address?</H1>}
>
<InputBlock
type="text"
label="Street address"
name="streetAddress"
id="streetAddressId"
autoComplete="street-address"
/>
<InputBlock
type="text"
label="Town or city"
name="town"
id="townId"
autoComplete="address-level2"
/>
<InputBlock
type="text"
label="Postcode"
name="postcode"
id="postcodeId"
width="5"
autoComplete="postal-code"
/>
</FieldsetBlock>
);
React (TypeScript) import React from "react";
import FieldsetBlock from "@govtnz/ds/build/react-ts/FieldsetBlock";
import "@govtnz/ds/build/css/FieldsetBlock.css"; // or @govtnz/ds/build/scss/FieldsetBlock.scss
import H1 from "@govtnz/ds/build/react-ts/H1";
import "@govtnz/ds/build/css/H1.css"; // or @govtnz/ds/build/scss/H1.scss
import InputBlock from "@govtnz/ds/build/react-ts/InputBlock";
import "@govtnz/ds/build/css/InputBlock.css"; // or @govtnz/ds/build/scss/InputBlock.scss
export default () => (
<FieldsetBlock
id="addressId"
legend={<H1 styleSize="large">What is your address?</H1>}
>
<InputBlock
type="text"
label="Street address"
name="streetAddress"
id="streetAddressId"
autoComplete="street-address"
/>
<InputBlock
type="text"
label="Town or city"
name="town"
id="townId"
autoComplete="address-level2"
/>
<InputBlock
type="text"
label="Postcode"
name="postcode"
id="postcodeId"
width="5"
autoComplete="postal-code"
/>
</FieldsetBlock>
);
React with Styled Components (JavaScript) import React from "react";
import FieldsetBlock from "@govtnz/ds/build/react-js-styled-components/FieldsetBlock";
import H1 from "@govtnz/ds/build/react-js-styled-components/H1";
import InputBlock from "@govtnz/ds/build/react-js-styled-components/InputBlock";
export default () => (
<FieldsetBlock
id="addressId"
legend={<H1 styleSize="large">What is your address?</H1>}
>
<InputBlock
type="text"
label="Street address"
name="streetAddress"
id="streetAddressId"
autoComplete="street-address"
/>
<InputBlock
type="text"
label="Town or city"
name="town"
id="townId"
autoComplete="address-level2"
/>
<InputBlock
type="text"
label="Postcode"
name="postcode"
id="postcodeId"
width="5"
autoComplete="postal-code"
/>
</FieldsetBlock>
);
React with Styled Components (TypeScript) import React from "react";
import FieldsetBlock from "@govtnz/ds/build/react-ts-styled-components/FieldsetBlock";
import H1 from "@govtnz/ds/build/react-ts-styled-components/H1";
import InputBlock from "@govtnz/ds/build/react-ts-styled-components/InputBlock";
export default () => (
<FieldsetBlock
id="addressId"
legend={<H1 styleSize="large">What is your address?</H1>}
>
<InputBlock
type="text"
label="Street address"
name="streetAddress"
id="streetAddressId"
autoComplete="street-address"
/>
<InputBlock
type="text"
label="Town or city"
name="town"
id="townId"
autoComplete="address-level2"
/>
<InputBlock
type="text"
label="Postcode"
name="postcode"
id="postcodeId"
width="5"
autoComplete="postal-code"
/>
</FieldsetBlock>
);
Vue (JavaScript) <template>
<fieldset-block id="addressId" legend="What is your address?">
<input-block
type="text"
label="Street address"
name="streetAddress"
id="streetAddressId"
autoComplete="street-address"
/>
<input-block
type="text"
label="Town or city"
name="town"
id="townId"
autoComplete="address-level2"
/>
<input-block
type="text"
label="Postcode"
name="postcode"
id="postcodeId"
width="5"
autoComplete="postal-code"
/>
</fieldset-block>
</template>
<script>
import Vue from "vue";
import FieldsetBlock from "@govtnz/ds/build/vue-js/FieldsetBlock.vue";
import H1 from "@govtnz/ds/build/vue-js/H1.vue";
import InputBlock from "@govtnz/ds/build/vue-js/InputBlock.vue";
export default {
components: {
"fieldset-block": FieldsetBlock,
"c-h1": H1,
"input-block": InputBlock
}
};
</script>
Vue (TypeScript) <template>
<fieldset-block id="addressId" legend="What is your address?">
<input-block
type="text"
label="Street address"
name="streetAddress"
id="streetAddressId"
autoComplete="street-address"
/>
<input-block
type="text"
label="Town or city"
name="town"
id="townId"
autoComplete="address-level2"
/>
<input-block
type="text"
label="Postcode"
name="postcode"
id="postcodeId"
width="5"
autoComplete="postal-code"
/>
</fieldset-block>
</template>
<script lang="ts">
import Vue from "vue";
import FieldsetBlock from "@govtnz/ds/build/vue-ts/FieldsetBlock.vue";
import H1 from "@govtnz/ds/build/vue-ts/H1.vue";
import InputBlock from "@govtnz/ds/build/vue-ts/InputBlock.vue";
export default {
components: {
"fieldset-block": FieldsetBlock,
"c-h1": H1,
"input-block": InputBlock
}
};
</script>
HTML <!--
Remember to add these styles:
in CSS: FieldsetBlock.css, H1.css, InputBlock.css
OR in Sass (SCSS): FieldsetBlock.scss, H1.scss, InputBlock.scss
-->
<div class="g-fieldsetBlock-form-group">
<fieldset class="g-fieldsetBlock-fieldset">
<legend class="g-fieldsetBlock-fieldset__legend">
<h1 class="g-heading g-heading-l">What is your address?</h1>
</legend>
<div>
<div class="g-inputBlock-form-group">
<label class="g-inputBlock-label" for="streetAddressId">
Street address
</label>
<input
class="g-inputBlock-input"
id="streetAddressId"
name="streetAddress"
type="text"
autocomplete="street-address"
/>
</div>
<div class="g-inputBlock-form-group">
<label class="g-inputBlock-label" for="townId"> Town or city </label>
<input
class="g-inputBlock-input"
id="townId"
name="town"
type="text"
autocomplete="address-level2"
/>
</div>
<div class="g-inputBlock-form-group">
<label class="g-inputBlock-label" for="postcodeId"> Postcode </label>
<input
class="g-inputBlock-input g-inputBlock-input--width-5"
id="postcodeId"
name="postcode"
type="text"
autocomplete="postal-code"
/>
</div>
</div>
</fieldset>
</div>
twig-embed {% embed "FieldsetBlock.html.twig" with {'id':'addressId'} only %}{% block legend %}{% embed "H1.html.twig" with {'styleSize':'large', 'children':'What is your address?'} only %}{% endembed %}{% endblock %}{% block children %}{% embed "InputBlock.html.twig" with {'type':'text', 'label':'Street address', 'name':'streetAddress', 'id':'streetAddressId', 'autoComplete':'street-address'} only %}{% endembed %}
{% embed "InputBlock.html.twig" with {'type':'text', 'label':'Town or city', 'name':'town', 'id':'townId', 'autoComplete':'address-level2'} only %}{% endembed %}
{% embed "InputBlock.html.twig" with {'type':'text', 'label':'Postcode', 'name':'postcode', 'id':'postcodeId', 'width':'5', 'autoComplete':'postal-code'} only %}{% endembed %}{% endblock %}{% endembed %}