Alert component 2 0

starter-kits/tailwind/package.json

@@ -96,7 +96,7 @@
     "@tailwindcss/typography": "^0.5.0",
     "alpinejs": "^3.0.9",
     "svg4everybody": "^2.1.9",
-    "tailwindcss": "^3.0.7"
+    "tailwindcss": "^3.2.7"
   },
   "gitHead": "bfeff58b8f6e6ace1c28f31ad67d75d6f18ee5a4"
 }

starter-kits/tailwind/source/default/patterns/01-atoms/alert/alert.stories.wingsuit.jsx

@@ -0,0 +1,7 @@
+import './index';
+
+const patternDefinition = require('./alert.wingsuit.yml');
+
+export const wingsuit = {
+  patternDefinition,
+};

starter-kits/tailwind/source/default/patterns/01-atoms/alert/alert.twig

@@ -0,0 +1,61 @@
+{#
+  Template
+#}
+
+{% set padding_classes = pattern_configuration('alert', '', 'paddings') %}
+
+{# -- Message list -- #}
+<div>
+  {% for type, messages in message_list %}
+    {% set classes = [
+      pattern_configuration('alert', '', 'bg_color')[type],
+      pattern_configuration('alert', '', 'status_heading_styles')[type],
+      pattern_configuration('alert', '', 'status_heading_color')[type],
+      pattern_configuration('alert', '', 'message_color')[type],
+      padding_classes
+    ] %}
+    {% set is_message_with_title = status_headings[type] %}
+    {% set is_message_with_icon = type in ['error', 'status', 'warning'] %}
+
+    {% set attributes = attributes|default(create_attribute()) %}
+
+    <div role="contentinfo" aria-labelledby="{{ title_ids[type] }}"{{ attributes.addClass(classes)|without('role', 'aria-label') }}>
+      {% if type == 'error' %}
+        <div role="alert">
+      {% endif %}
+      {# -- Message header -- #}
+      {% if is_message_with_title or is_message_with_icon %}
+        <div class="relative">
+          {% if is_message_with_title %}
+            <h2 id="{{ title_ids[type] }}">
+              {{ status_headings[type] }}
+            </h2>
+            {% if is_message_with_icon %}
+              <div class="absolute -left-8 top-1/2 -translate-y-1/2">
+                {{ pattern('icon', {icon: type }, 'spritemap' ) }}
+              </div>
+            {% endif %}
+          {% endif %}
+        </div>
+      {% endif %}
+      {# -- Message content -- #}
+      <div>
+        {# -- Message list -- #}
+        {% if messages|length > 1 %}
+          <ul role="list">
+            {% for message in messages %}
+              <li>{{ message }}</li>
+            {% endfor %}
+          </ul>
+        {# -- Single message -- #}
+        {% else %}
+          {{ messages|first }}
+        {% endif %}
+      </div>
+      {% if type == 'error' %}
+        </div>
+      {% endif %}
+    </div>
+  {% endfor %}
+</div>
+

starter-kits/tailwind/source/default/patterns/01-atoms/alert/alert.wingsuit.yml

@@ -0,0 +1,48 @@
+alert:
+  use: "@atoms/alert/alert.twig"
+  label: Alert
+  description: Alert component which plays nicely with the drupal message system.
+  fields:
+    title_ids:
+      type: object
+      label: Title Ids
+      description: A list of unique ids keyed by message type.
+      preview:
+        status: 'status'
+        error: 'error'
+        success: 'success'
+        info: 'info'
+    status_headings:
+      type: object
+      label: Status Heading
+      description: List of all status types.
+      preview:
+        status: 'Status'
+        success: 'Success'
+        info: 'Info'
+        error: 'Error'
+    message_list:
+      type: object
+      label: Messages
+      description: List of messages to be displayed, grouped by type.
+      preview:
+        error:
+          - 'Id exercitation elit commodo. Nisi et labore dolore do ullamco veniam labore veniam est nostrud velit aliquip sunt.'
+          - 'Nisi et labore dolore do ullamco veniam labore veniam est nostrud velit aliquip sunt.'
+  configuration:
+    bg_color:
+      status: 'bg-green-50'
+      error: 'bg-red-50'
+      success: 'bg-yellow-50'
+      info: 'bg-blue-50'
+    status_headings_color:
+      status: 'text-green-700'
+      error: 'text-red-700'
+      success: 'text-yellow-700'
+      info: 'text-blue-700'
+    message_color:
+      status: 'text-green-600'
+      error: 'text-red-600'
+      success: 'text-yellow-600'
+      info: 'text-blue-600'
+    paddings: 'pt-4 px-4 pb-6 pl-12'

starter-kits/tailwind/source/default/patterns/01-atoms/alert/index.js

@@ -0,0 +1,8 @@
+/**
+ * alert
+ */
+// Module dependencies
+import 'tokens';
+
+// Module template
+import './alert.twig';

starter-kits/tailwind/tailwind.config.js

@@ -18,6 +18,7 @@ const round = (num) =>
 const em = (px, base) => `${round(px / base)}em`;
 const rem = (px) => `${px / 16}rem`.replace(' ', '');
 
+/** @type {import('tailwindcss').Config} */
 module.exports = {
   important: false,
   darkMode: 'class',

yarn.lock

@@ -28823,6 +28823,35 @@ tailwindcss@^3.0.7, tailwindcss@^3.1.4:
     quick-lru "^5.1.1"
     resolve "^1.22.1"
 
+tailwindcss@^3.2.7:
+  version "3.2.7"
+  resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.2.7.tgz#5936dd08c250b05180f0944500c01dce19188c07"
+  integrity sha512-B6DLqJzc21x7wntlH/GsZwEXTBttVSl1FtCzC8WP4oBc/NKef7kaax5jeihkkCEWc831/5NDJ9gRNDK6NEioQQ==
+  dependencies:
+    arg "^5.0.2"
+    chokidar "^3.5.3"
+    color-name "^1.1.4"
+    detective "^5.2.1"
+    didyoumean "^1.2.2"
+    dlv "^1.1.3"
+    fast-glob "^3.2.12"
+    glob-parent "^6.0.2"
+    is-glob "^4.0.3"
+    lilconfig "^2.0.6"
+    micromatch "^4.0.5"
+    normalize-path "^3.0.0"
+    object-hash "^3.0.0"
+    picocolors "^1.0.0"
+    postcss "^8.0.9"
+    postcss-import "^14.1.0"
+    postcss-js "^4.0.0"
+    postcss-load-config "^3.1.4"
+    postcss-nested "6.0.0"
+    postcss-selector-parser "^6.0.11"
+    postcss-value-parser "^4.2.0"
+    quick-lru "^5.1.1"
+    resolve "^1.22.1"
+
 taketalk@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/taketalk/-/taketalk-1.0.0.tgz#b4d4f0deed206ae7df775b129ea2ca6de52f26dd"