Design System Brainstorm

AriaAttributes.ss

<!-- See https://github.com/silverstripe/cwp-starter-theme/blob/master/templates/Includes/AriaAttributes.ss -->
<% if $Message || $Description %>
    aria-describedby="<% if $Message %>message-$ID<% end_if %><% if $Description %><% if $Message %> <% end_if %>describes-$ID<% end_if %>"
<% end_if %>
<% if $Title || $RightTitle %>
    aria-labelledby="<% if $Title %>title-$ID<% end_if %><% if $RightTitle %><% if $Title %> <% end_if %>extra-label-$ID<% end_if %>"
<% end_if %>

BlockHolder.ss

<% component GridRow %>
	$Block
</% end_component %>

GridComponent.ss

<div class="design-system-flexbox" cols="$cols">
  <!-- See https://github.com/symbiote/silverstripe-components --!>
  $children
</div>

NewsletterSignupBlock.php

<?php
class NewsletterSignupBlock extends BaseElement {
	public function Form()
	{
		// Should live in controller, for demo purposes only
		$fields = new FieldList([
			new TextField('MyTextField')
		]);
		$actions = new FieldList([
			new FormAction('submit')
		])
		return new Form(Controller::curr(), 'Form', $fields, $actions);
	}
}

NewsletterSignupBlock.ss

<% with Form %>
	<!-- See https://docs.silverstripe.org/en/4/developer_guides/forms/how_tos/lightweight_form/ -->
	<form $FormAttributes>
		<% component GridCol cols=6 %>
			<!-- theoretical-bind-to doesn't exist -->
			<% component TextField theoretical-bind-to="MyTextField" class="my-extra-class" my-design-system-attribute=true /%>
			<!-- alternative way, which exists, renders TextField.ss, but doesn't allow custom arguments -->
			$FieldMap.MyTextField
		<% end_component %>
		<% component GridCol cols=6 %>
		      <% component FormAction theoretical-bind-to="submit" class="my-extra-class" my-design-system-attribute=true /%>
		<% end_component %>
	</form>
<% end_with>

Page.ss

<% component Grid cols=12 %>
	<% loop $Blocks %>
		$BlockHolder
	<% end_loop %>
<% end_component %>

TextField.ss

<!-- Default template from starter theme, with additional classes. -->
<!-- See https://github.com/silverstripe/cwp-starter-theme/blob/master/templates/SilverStripe/Forms/TextField.ss  -->
<!-- See https://github.com/silverstripe/silverstripe-framework/blob/4/src/Forms/FormField.php#L713 for getAttributesHTML implementation -->
<input $getAttributesHTML('class') class="$ExtraClass.ATT form-control" <% include AriaAttributes %> />