From 8238a05060442458ed04ff12b36f754092a7ebc4 Mon Sep 17 00:00:00 2001 From: Pascal <33871309+iuscare@users.noreply.github.com> Date: Wed, 8 Mar 2023 10:05:51 +0100 Subject: [PATCH] Alert component 2 0 (#237) * chore(deps): update tailwind to 3.2.7 * refactor(tailwind): insert type annotations * feat(atoms): add an alert component --------- Co-authored-by: Pascal Glass --- starter-kits/tailwind/package.json | 2 +- .../01-atoms/alert/alert.stories.wingsuit.jsx | 7 +++ .../patterns/01-atoms/alert/alert.twig | 61 +++++++++++++++++++ .../01-atoms/alert/alert.wingsuit.yml | 48 +++++++++++++++ .../patterns/01-atoms/alert/icons/error.svg | 3 + .../patterns/01-atoms/alert/icons/info.svg | 3 + .../patterns/01-atoms/alert/icons/status.svg | 3 + .../patterns/01-atoms/alert/icons/warning.svg | 3 + .../default/patterns/01-atoms/alert/index.js | 8 +++ starter-kits/tailwind/tailwind.config.js | 1 + yarn.lock | 29 +++++++++ 11 files changed, 167 insertions(+), 1 deletion(-) create mode 100644 starter-kits/tailwind/source/default/patterns/01-atoms/alert/alert.stories.wingsuit.jsx create mode 100644 starter-kits/tailwind/source/default/patterns/01-atoms/alert/alert.twig create mode 100644 starter-kits/tailwind/source/default/patterns/01-atoms/alert/alert.wingsuit.yml create mode 100644 starter-kits/tailwind/source/default/patterns/01-atoms/alert/icons/error.svg create mode 100644 starter-kits/tailwind/source/default/patterns/01-atoms/alert/icons/info.svg create mode 100644 starter-kits/tailwind/source/default/patterns/01-atoms/alert/icons/status.svg create mode 100644 starter-kits/tailwind/source/default/patterns/01-atoms/alert/icons/warning.svg create mode 100644 starter-kits/tailwind/source/default/patterns/01-atoms/alert/index.js diff --git a/starter-kits/tailwind/package.json b/starter-kits/tailwind/package.json index ae049f20c..8c43c3269 100644 --- a/starter-kits/tailwind/package.json +++ b/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" } diff --git a/starter-kits/tailwind/source/default/patterns/01-atoms/alert/alert.stories.wingsuit.jsx b/starter-kits/tailwind/source/default/patterns/01-atoms/alert/alert.stories.wingsuit.jsx new file mode 100644 index 000000000..16bb6781b --- /dev/null +++ b/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, +}; diff --git a/starter-kits/tailwind/source/default/patterns/01-atoms/alert/alert.twig b/starter-kits/tailwind/source/default/patterns/01-atoms/alert/alert.twig new file mode 100644 index 000000000..af102fff8 --- /dev/null +++ b/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 -- #} +
+ {% 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()) %} + +
+ {% if type == 'error' %} +
+ {% endif %} + {# -- Message header -- #} + {% if is_message_with_title or is_message_with_icon %} +
+ {% if is_message_with_title %} +

+ {{ status_headings[type] }} +

+ {% if is_message_with_icon %} +
+ {{ pattern('icon', {icon: type }, 'spritemap' ) }} +
+ {% endif %} + {% endif %} +
+ {% endif %} + {# -- Message content -- #} +
+ {# -- Message list -- #} + {% if messages|length > 1 %} +
    + {% for message in messages %} +
  • {{ message }}
    • + {% endfor %} +
+ {# -- Single message -- #} + {% else %} + {{ messages|first }} + {% endif %} +
+ {% if type == 'error' %} +
+ {% endif %} +
+ {% endfor %} +
+ diff --git a/starter-kits/tailwind/source/default/patterns/01-atoms/alert/alert.wingsuit.yml b/starter-kits/tailwind/source/default/patterns/01-atoms/alert/alert.wingsuit.yml new file mode 100644 index 000000000..20491f8e2 --- /dev/null +++ b/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' diff --git a/starter-kits/tailwind/source/default/patterns/01-atoms/alert/icons/error.svg b/starter-kits/tailwind/source/default/patterns/01-atoms/alert/icons/error.svg new file mode 100644 index 000000000..467fc52c5 --- /dev/null +++ b/starter-kits/tailwind/source/default/patterns/01-atoms/alert/icons/error.svg @@ -0,0 +1,3 @@ + + + diff --git a/starter-kits/tailwind/source/default/patterns/01-atoms/alert/icons/info.svg b/starter-kits/tailwind/source/default/patterns/01-atoms/alert/icons/info.svg new file mode 100644 index 000000000..c334bc83e --- /dev/null +++ b/starter-kits/tailwind/source/default/patterns/01-atoms/alert/icons/info.svg @@ -0,0 +1,3 @@ + + + diff --git a/starter-kits/tailwind/source/default/patterns/01-atoms/alert/icons/status.svg b/starter-kits/tailwind/source/default/patterns/01-atoms/alert/icons/status.svg new file mode 100644 index 000000000..3875968d0 --- /dev/null +++ b/starter-kits/tailwind/source/default/patterns/01-atoms/alert/icons/status.svg @@ -0,0 +1,3 @@ + + + diff --git a/starter-kits/tailwind/source/default/patterns/01-atoms/alert/icons/warning.svg b/starter-kits/tailwind/source/default/patterns/01-atoms/alert/icons/warning.svg new file mode 100644 index 000000000..30628ac91 --- /dev/null +++ b/starter-kits/tailwind/source/default/patterns/01-atoms/alert/icons/warning.svg @@ -0,0 +1,3 @@ + + + diff --git a/starter-kits/tailwind/source/default/patterns/01-atoms/alert/index.js b/starter-kits/tailwind/source/default/patterns/01-atoms/alert/index.js new file mode 100644 index 000000000..63353eced --- /dev/null +++ b/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'; diff --git a/starter-kits/tailwind/tailwind.config.js b/starter-kits/tailwind/tailwind.config.js index 34246edb7..de5ab474c 100644 --- a/starter-kits/tailwind/tailwind.config.js +++ b/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', diff --git a/yarn.lock b/yarn.lock index 0cdfe2025..59896e306 100644 --- a/yarn.lock +++ b/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"