ISTWCMS-5721: rebase continue for mailman

src/patterns/04-components/_index.scss

@@ -19,6 +19,7 @@
 @forward 'facebook/facebook';
 @forward 'facts-and-figures/facts-and-figures';
 @forward 'filters/filters';
+@forward 'form-item/form-item';
 @forward 'google_maps/google_maps';
 @forward 'instagram/instagram';
 @forward 'icon/icon';
@@ -26,6 +27,7 @@
 @forward 'image/image';
 @forward 'image-gallery/image-gallery';
 @forward 'mailchimp/mailchimp';
+@forward 'mailman-subscription/mailman-subscription';
 @forward 'menu/menu';
 @forward 'message/message';
 @forward 'menu/menu--header/menu--header';

src/patterns/04-components/form-item/form-item.scss → src/patterns/04-components/form-item/_form-item.scss

@@ -43,21 +43,21 @@
   content: '*';
 }
 
-.form-item__box,
-.form-item__color,
+.form-item--box,
+.form-item--color,
 .form-item__date,
-.form-item__email,
-.form-item__month,
-.form-item__number,
-.form-item__password,
-.form-item__search,
-.form-item__select,
-.form-item__tel,
-.form-item__text,
-.form-item__textarea,
-.form-item__time,
-.form-item__url,
-.form-item__week {
+.form-item--email,
+.form-item--month,
+.form-item--number,
+.form-item--password,
+.form-item--search,
+.form-item--select,
+.form-item--tel,
+.form-item--text,
+.form-item--textarea,
+.form-item--time,
+.form-item--url,
+.form-item--week {
   //appearance: none;
   //border-color: var(--gray-3);
   //border-style: solid;

src/patterns/04-components/form-item/form-item.twig

-{{ attach_library('ohana/form-item') }}
-
 {% set classes = [
   'form-item',
   type ? 'form-item--' ~ type|clean_class,
@@ -41,7 +39,7 @@
     </div>
   {% endif %}
 
-  {{ children }}
+  {{ children | raw }}
 
   {% if suffix %}
     <span class="form-item__suffix">{{ suffix }}</span>

src/patterns/04-components/form-item/form-item~submit.yml

+---
+type: 'submit'
+name: 'submit'
+errors: ''
+is_disabled: false
+is_required: false
+is_full_width: false
+label_display: 'before'
+label: '<label class="form-item__label" for="edit-submit">Submit</label>'
+description_display: 'after'
+description:
+  content: 'The description for this form field'
+prefix: ''
+suffix: ''
+children: '<input type="submit" value="Submit" class="uw-input uw-input--submit button--medium">'

src/patterns/04-components/mailman-subscription/_mailman-subscription.scss

+@use '../../01-core' as *;
+
+.uw-mailman {
+  form {
+    @include uw-contained-width-reset();
+    width: 100%;
+  }
+
+  &__label {
+    display: block;
+    margin-bottom: var(--size-xs);
+  }
+
+  &__email {
+    display: grid;
+    gap: var(--size-xs);
+    grid-template-columns: auto var(--size-12);
+
+    @media(min-width: $screen-md) {
+      grid-template-columns: auto var(--size-18);
+    }
+
+    .uw-input {
+      width: 100%;
+    }
+  }
+
+  &__servername {
+    text-align: center;
+  }
+}

src/patterns/04-components/mailman-subscription/mailman-subscription.md

+---
+el: .uw-mailman
+title: Mailman
+---
+
+__Variables:__
+* mailman: [array] Variables for mailman.
+    * server: [string] Mailman server url.
+    * servername: [string] Mailman server name.
+    * uniqueid: [string] Unique id of the mailman component.

src/patterns/04-components/mailman-subscription/mailman-subscription.twig

+{% set children = '<input type="email" id="uw-mailman__input-' ~ mailman.uniqueid ~ '" name="email" class="uw-input">' %}
+
+<div id="uw-mailman-{{ mailman.uniqueid }}" class="uw-mailman">
+  <form action="//{{ mailman.server }}/mailman/subscribe/{{ mailman.servername }}">
+    <div class="uw-mailman__label">
+      <label for="uw-mailman__input-{{ mailman.uniqueid }}" class="uw-mailman__label--email">Email address:</label>
+    </div>
+    <div class="uw-mailman__email">
+      {% include '@components/form-item/form-item.twig' with {
+        type: 'email',
+        name: 'email',
+        errors: '',
+        is_disabled: false,
+        is_required: true,
+        is_full_width: true,
+        label_display: 'before',
+        prefix: '',
+        suffix: '',
+        children: children
+      } %}
+      {% include '@components/form-item/form-item.twig' with {
+        type: 'submit',
+        name: 'submit',
+        errors: '',
+        is_disabled: false,
+        is_required: false,
+        is_full_width: true,
+        label_display: 'before',
+        prefix: '',
+        suffix: '',
+        children: '<input type="submit" value="Subscribe" class="uw-input uw-input--submit button--medium">'
+      } %}
+    </div>
+  </form>
+</div>

src/patterns/04-components/mailman-subscription/mailman-subscription.yml

+mailman:
+  server: 'lists.uwaterloo.ca (a.k.a. mailman.uwaterloo.ca)'
+  servername: 'uwweb'
+  uniqueid: '1111111'
+  classes: 'uw-input--submit button--medium'