refactor: wp-280 proper message mixin

dist/tools/x-message.css

@@ -0,0 +1 @@
+/*! @tacc/core-styles 2.26.0+ | MIT | github.com/TACC/Core-Styles */

src/lib/_imports/_preview.hbs

@@ -95,7 +95,7 @@
 
 {{!-- Markup (for current pattern) --}}
 {{#unless _target.context.shouldOmitMainTag}}
-<main>
+<main id="demo">
 {{/unless}}
 {{{yield}}}
 {{#unless _target.context.shouldOmitMainTag}}

src/lib/_imports/tools/x-message.css

@@ -0,0 +1,38 @@
+/* Elements */
+
+@define-mixin message {
+  /* To prevent excess space at top and bottom of message */
+  & > *:first-child { margin-top: 0; }
+  & > *:last-child { margin-bottom: 0; }
+}
+
+
+
+/* Modifiers */
+
+@define-mixin message--type-info---message--scope-section {
+  background-color: var(--global-color-info--x-light);
+  border-color: var(--global-color-info--normal);
+}
+@define-mixin message--type-success---message--scope-section {
+  background-color: var(--global-color-success--x-light);
+  border-color: var(--global-color-success--normal);
+}
+@define-mixin message--type-warning---message--scope-section {
+  background-color: var(--global-color-warning--x-light);
+  border-color: var(--global-color-warning--normal);
+}
+@define-mixin message--type-error---message--scope-section {
+  background-color: var(--global-color-danger--x-light);
+  border-color: var(--global-color-danger--normal);
+}
+@define-mixin message--type-tip---message--scope-section {
+  background-color: var(--global-color-extra--x-light);
+  border-color: var(--global-color-extra--normal);
+}
+
+@define-mixin message--scope-global {
+  color: var(--global-color-primary--xx-light);
+  background-color: var(--global-color-accent--secondary);
+  border-color: var(--global-color-primary--dark);
+}

src/lib/_imports/tools/x-message.demo.css

@@ -0,0 +1,29 @@
+@import url("./x-message.css");
+
+/* FAQ: Wrapped to deter clients from using `.x-message` */
+/* HACK: Not in `x-message/demo.css` because it is not processed */
+#demo {
+  .x-message {
+    @mixin message;
+  }
+
+  .x-message--scope-section.x-message--type-info {
+    @mixin message--type-info---message--scope-section;
+  }
+  .x-message--scope-section.x-message--type-success {
+    @mixin message--type-success---message--scope-section;
+  }
+  .x-message--scope-section.x-message--type-warning {
+    @mixin message--type-warning---message--scope-section;
+  }
+  .x-message--scope-section.x-message--type-error {
+    @mixin message--type-error---message--scope-section;
+  }
+  .x-message--scope-section.x-message--type-tip {
+    @mixin message--type-tip---message--scope-section;
+  }
+
+  .x-message--scope-global {
+    @mixin message--scope-global;
+  }
+}

src/lib/_imports/tools/x-message/_x-message--classes.hbs

@@ -0,0 +1,5 @@
+| Mixin                 | Usage
+| - | - |
+| `message`             | base class required only for `message--` modifiers
+| `message--type-...`   | express reason for message
+| `message--scope-...`  | define context of message

src/lib/_imports/tools/x-message/_x-message--intro.hbs

@@ -0,0 +1 @@
+To notify users for different reasons (type) and at different contexts (scope).

src/lib/_imports/tools/x-message/_x-message--single.hbs

@@ -0,0 +1,8 @@
+{{> @message
+    ns="x-"
+    type=this.type
+    scope=this.scope
+    title=this.title
+    content=this.content
+    extra_content='<a href="#">Sample link.</a> And a <button class="c-button c-button--as-link">sample button as link</button>.'
+}}

src/lib/_imports/tools/x-message/config.yml

@@ -0,0 +1,55 @@
+status: wip
+context:
+  supportStyles:
+    - ../../assets/tools/x-message.demo.css
+  types:
+    - name: success
+      content: Notify user of a successful event.
+    - name: info
+      content: Notify user of any details that are <strong>not</strong> a problem.
+    - name: warning
+      content: Notify user of an <strong>un</strong>successful event that <em>could prevent</em> functionality.
+    - name: error
+      content: Notify user of an <strong>un</strong>successful event that <em>does prevent</em> functionality.
+  scopes:
+    - name: inline
+      content: 	An inline message.
+    - name: section
+      content: A wide block message.
+    # - name: app
+    #   content: A floating block message.
+    - name: global
+      content: A site-wide banner message.
+variants:
+  - name: default
+    hidden: true
+  - name: type
+    label: by Type
+    status: prototype
+  - name: type-portal
+    label: by Type (Portal)
+    status: ready
+    view: 'x-message--type.hbs'
+    context:
+      shouldLoadPortal: true
+  - name: type-cms
+    label: by Type (CMS)
+    status: ready
+    view: 'x-message--type.hbs'
+    context:
+      shouldLoadCMS: true
+  - name: scope
+    label: by Scope
+    status: prototype
+  - name: scope-portal
+    label: by Scope (Portal)
+    status: ready
+    view: 'x-message--scope.hbs'
+    context:
+      shouldLoadPortal: true
+  - name: scope-cms
+    label: by Scope (CMS)
+    status: ready
+    view: 'x-message--scope.hbs'
+    context:
+      shouldLoadCMS: true

src/lib/_imports/tools/x-message/demo.css

@@ -0,0 +1,12 @@
+/* This CSS is ONLY for the pattern library. It is NOT part of the pattern. */
+
+.x-message {
+  margin-top: 1em;
+}
+
+dt {
+  text-transform: capitalize;
+}
+dd {
+  margin-block: 2em;
+}

src/lib/_imports/tools/x-message/readme.md

@@ -0,0 +1 @@
+To notify users for different reasons (type) and at different contexts (scope).

src/lib/_imports/tools/x-message/x-message--scope.hbs

@@ -0,0 +1,15 @@
+<dl>
+  {{#each scopes}}
+  <dt>Scope <strong>{{ this.name }}</strong></dt>
+  <dd>
+    {{> @x-message--single scope=this.name
+        type="success" title="Success" content=this.content}}
+    {{> @x-message--single scope=this.name
+        type="info" title="Info" content=this.content}}
+    {{> @x-message--single scope=this.name
+        type="warning" title="Warning" content=this.content}}
+    {{> @x-message--single scope=this.name
+        type="error" title="Error" content=this.content}}
+  </dd>
+  {{/each}}
+</dl>

src/lib/_imports/tools/x-message/x-message--scope.readme.md

@@ -0,0 +1,14 @@
+{{render '@x-message--intro'}}
+
+| Mixin                    | Context
+| - | - |
+| `message--scope-inline`  | inline text
+| `message--scope-section` | wide block
+| `message--scope-app`*    | floating block*
+| `message--scope-section` | site-wide banner
+
+<small>* Not implemented officially yet. Exists in Core Portal as a "toast notification".</small>
+
+---
+
+{{render '@x-message--classes'}}

src/lib/_imports/tools/x-message/x-message--type.hbs

@@ -0,0 +1,15 @@
+<dl>
+  {{#each types }}
+  <dt>Type <strong>{{ this.name }}</strong></dt>
+  <dd>
+    {{> @x-message--single type=this.name
+        scope="inline" title="Inline" content=this.content}}
+    {{> @x-message--single type=this.name
+        scope="section" title="Section" content=this.content}}
+    <!--{{> @x-message--single type=this.name
+        scope="app" title="App" content=this.content}}-->
+    {{> @x-message--single type=this.name
+        scope="global" title="Global" content=this.content}}
+  </dd>
+  {{/each}}
+</dl>

src/lib/_imports/tools/x-message/x-message--type.readme.md

@@ -0,0 +1,12 @@
+{{render '@x-message--intro'}}
+
+| Mixin                    | Reason
+| - | - |
+| `message--type-success` | action completed
+| `message--type-info`    | just info, no problem
+| `message--type-warning` | event could prevent function
+| `message--type-error`   | event does prevent function
+
+---
+
+{{render '@x-message--classes'}}

src/lib/_imports/tools/x-message/x-message.hbs

@@ -0,0 +1 @@
+<!-- SEE: message--type, message--scope -->