Merge branch 'feature/ISTWCMS-5721-ebremner-mailman' into '1.0.x'

Feature/istwcms 5721 ebremner mailman

See merge request !31

src/patterns/01-core/elements/_input.scss

+@use '../../01-core' as *;
+
 // @file
 // Input element styles.
 $uw-input-padding: 0.46667rem;
 
-:where(input) {
+:where(input),
+.uw-input{
   border: var(--size-xs) solid   var(--gray-3);
   box-shadow: inset 0 var(--size-xs) 3px var(--gray-3);
   box-sizing: border-box;
@@ -20,7 +23,17 @@ $uw-input-padding: 0.46667rem;
     outline: var(--gray-5);
   }
 }
-
+.uw-input--submit {
+  @include button();
+  font-size: var(--font-size-000);
+  max-width: var(--size-20);
+  padding: var(--size-1);
+  &:hover,
+  &:focus {
+    padding: var(--size-1);
+  }
+  font-weight:200 !important;
+}
 :where(input:not(button, button[type], input[type="button"], input[type="submit"], input[type="reset"])) {
   background-color: var(--gray-1);
   border-radius: var(--radius-1);

src/patterns/01-core/props/_sizes.scss

@@ -22,6 +22,7 @@
   --size-14: 7rem;     // 112px
   --size-15: 7.5rem;   // 120px
   --size-16: 8rem;    // 128px
+  --size-18: 9rem;    // 144px
   --size-20: 10rem;    // 160px
   --size-fluid-1: clamp(0.5rem, 1vw, 1rem);
   --size-fluid-2: clamp(1rem, 2vw, 1.5rem);

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;
@@ -71,9 +71,9 @@
 
   &:hover {
     background-color: white;
-    border-color: var(--gray-5);
-    border-style: solid;
-    border-width: var(--border-size-1);
+    //border-color: var(--gray-5);
+    //border-style: solid;
+    //border-width: var(--border-size-1);
   }
 
   &:disabled {
@@ -83,9 +83,9 @@
     &:hover,
     &:focus {
       background-color: var(--gray-1);
-      border-color: var(--gray-3);
+      //border-color: var(--gray-3);
       border-style: solid;
-      border-width: var(--border-size-1);
+      //border-width: var(--border-size-1);
     }
   }
 

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%;
+    .form-item{
+      margin: 0;
+      &:hover,
+      &:focus{
+        //border: none;
+        outline: none;
+      }
+    }
+  }
+
+  &__label {
+    display: block;
+    margin-bottom: var(--size-1);
+  }
+
+  &__email {
+    display: grid;
+    gap: var(--size-1);
+    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'

src/patterns/04-components/message/_message.scss

@@ -7,8 +7,8 @@ $message-background-color: var(--gray-1) !default;
 $message-border-color: var(--gray-4) !default;
 $message-error-background-color: var(--red-1) !default;
 $message-error-border-color: var(--red-4) !default;
-$message-status-background-color: var(--green-1) !default;
-$message-status-border-color: var(--green-4) !default;
+$message-status-background-color: var(--green-0) !default;
+$message-status-border-color: var(--green-8) !default;
 $message-warning-background-color: var(--yellow-1) !default;
 $message-warning-border-color: var(--yellow-4) !default;