Skip to content
Snippets Groups Projects
Commit 5a0f26f4 authored by Gareth Poole's avatar Gareth Poole
Browse files

Issue #3404788 "Improve notice blocks"

parent a0340288
No related branches found
No related tags found
1 merge request!85Issue #3404788 "Improve notice blocks"
Showing
with 365 additions and 69 deletions
uuid: fe342073-4872-4e90-9eb4-9c455c714711
uuid: 91f9c7d9-b2f9-429d-bab2-0d6321ea52c5
langcode: en
status: true
dependencies:
module:
- block_content
- taxonomy
id: block_content.field_theme
field_name: field_theme
id: block_content.field_expires
field_name: field_expires
entity_type: block_content
type: entity_reference
type: integer
settings:
target_type: taxonomy_term
unsigned: false
size: normal
module: core
locked: false
cardinality: 1
translatable: true
indexes: { }
persist_with_no_fields: false
custom_storage: false
custom_storage: false
\ No newline at end of file
{{ include('sector_notice:icon' )}}
\ No newline at end of file
'$schema': 'https://git.drupalcode.org/project/drupal/-/raw/10.1.x/core/modules/sdc/src/metadata.schema.json'
name: Notice Icon
status: stable
props:
type: object
properties:
label_display:
type: string
title: Show label
utility_classes:
type: array
title: Utility classes
title_attributes:
type: Drupal\Core\Template\Attribute
attributes:
type: Drupal\Core\Template\Attribute
container:
type: string
{{ include('sector_theme:field', {
utility_classes: [ 'notice__icon' ]
})}}
\ No newline at end of file
{{ include('sector_notice:notice', {
utility_classes: [ 'notice' ],
utility_classes: [ 'notice' ]
}) }}
\ No newline at end of file
/*! js-cookie v3.0.5 | MIT */
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self,function(){var n=e.Cookies,o=e.Cookies=t();o.noConflict=function(){return e.Cookies=n,o}}())}(this,(function(){"use strict";function e(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)e[o]=n[o]}return e}var t=function t(n,o){function r(t,r,i){if("undefined"!=typeof document){"number"==typeof(i=e({},o,i)).expires&&(i.expires=new Date(Date.now()+864e5*i.expires)),i.expires&&(i.expires=i.expires.toUTCString()),t=encodeURIComponent(t).replace(/%(2[346B]|5E|60|7C)/g,decodeURIComponent).replace(/[()]/g,escape);var c="";for(var u in i)i[u]&&(c+="; "+u,!0!==i[u]&&(c+="="+i[u].split(";")[0]));return document.cookie=t+"="+n.write(r,t)+c}}return Object.create({set:r,get:function(e){if("undefined"!=typeof document&&(!arguments.length||e)){for(var t=document.cookie?document.cookie.split("; "):[],o={},r=0;r<t.length;r++){var i=t[r].split("="),c=i.slice(1).join("=");try{var u=decodeURIComponent(i[0]);if(o[u]=n.read(c,u),e===u)break}catch(e){}}return e?o[e]:o}},remove:function(t,n){r(t,"",e({},n,{expires:-1}))},withAttributes:function(n){return t(this.converter,e({},this.attributes,n))},withConverter:function(n){return t(e({},this.converter,n),this.attributes)}},{attributes:{value:Object.freeze(o)},converter:{value:Object.freeze(n)}})}({read:function(e){return'"'===e[0]&&(e=e.slice(1,-1)),e.replace(/(%[\dA-F]{2})+/gi,decodeURIComponent)},write:function(e){return encodeURIComponent(e).replace(/%(2[346BF]|3[AC-F]|40|5[BDE]|60|7[BCD])/g,decodeURIComponent)}},{path:"/"});return t}));
\ No newline at end of file
......@@ -2,7 +2,12 @@
name: Notice
status: stable
libraryDependencies:
- core/once
- core/drupalSettings
libraryOverrides:
js:
js.cookie.min.js: { attributes: { defer: true } }
notice.js: { attributes: { defer: true } }
props:
type: object
......@@ -17,6 +22,10 @@ props:
type: Drupal\Core\Template\Attribute
attributes:
type: Drupal\Core\Template\Attribute
content_attributes:
type: Drupal\Core\Template\Attribute
notice_level:
type: string
slots:
content:
......
.notice {
background-color: var(--notice-bg, black);
color: var(--notice-color, #ffffff);
}
.notice:is([data-notice-level="base"]) {
--notice-bg: var(--notice-base, navy);
}
.notice:is([data-notice-level="moderate"]) {
--notice-bg: var(--notice-moderate, blue);
}
.notice:is([data-notice-level="critical"]) {
--notice-bg: var(--notice-critical, orange);
}
.notice:is([data-notice-level="highly-critical"]) {
--notice-bg: var(--notice-highly-critical, red);
}
.notice:is([aria-hidden]) {
display: none;
}
.notice .block__content {
--icon-size: 36px;
display: var(--notice-content-display, flex);
gap: var(--notice-content-gap, 1rem);
align-items: center;
}
.notice__dismiss {
margin-inline-start: auto;
align-self: flex-start;
}
\ No newline at end of file
(function(settings) {
if(!settings.sector_notice) {
return;
}
const { sector_notice: notices } = settings;
Object.keys(notices).forEach(notice => {
const dismissed = Cookies.get(`sector_notice.${notice}`);
const elem = document.getElementById(notice);
if (dismissed === undefined) {
elem.removeAttribute('aria-hidden');
}
const { expiry } = notices[notice];
const dismiss_btn = document.createElement('button');
dismiss_btn.setAttribute('type', 'button')
dismiss_btn.classList.add('notice__dismiss')
dismiss_btn.innerHTML = `<span class="sr-only">Dismiss notice</span><span aria-hidden="true" class="material-icons-sharp material-symbols-sharp">close</span>`
dismiss_btn.addEventListener('click', () => {
Cookies.set(`sector_notice.${notice}`, true, { expires: parseInt(expiry) / 24 });
elem.setAttribute('aria-hidden', true);
});
elem.querySelector('.block__content').appendChild(dismiss_btn)
})
})(drupalSettings);
\ No newline at end of file
{% extends 'sector_theme:block-content' %}
\ No newline at end of file
{#
/**
* @file
* Template for a Block component.
*
* Available config:
* - html_tag: The HTML tag for the block.
* - utility_classes: An array of utility classes.
*/
#}
{% set classes = [
bundle ? 'block--' ~ bundle|clean_class,
id ? 'block--' ~ id|replace({"_": "-"})|clean_class,
]|merge(utility_classes ? utility_classes : []) %}
{%
set content_classes = [
'block__content'
]|merge(content_classes ? content_classes : [])
%}
<{{ html_tag|default('div') }}{{ attributes.addClass(classes) }}>
{{ title_prefix }}
{% if label %}
{% block label %}
{{ include('sector:block-title', {
attributes: title_attributes,
classes: ['block__title']|merge(title_classes ? title_classes : []),
title_tag: title_tag|default('h2'),
label: label
}) }}
{% endblock %}
{% endif %}
{{ title_suffix }}
{% block content %}
<div{{ content_attributes.addClass(content_classes) }}>
{{ content }}
</div>
{% endblock %}
</{{ html_tag|default('div') }}>
{% if libraries %}
{% for library in libraries %}
{{ attach_library(library) }}
{% endfor %}
{% endif %}
......@@ -3,6 +3,6 @@ langcode: en
status: true
dependencies: { }
id: sector_notice
label: Notice
label: 'Sector notice'
revision: 0
description: 'Dismissible notice banner with optional icon, colour, and dismiss expiry.'
description: 'Use <em>Notice</em> to place a notice banner with optional icon and colours (includes dismissal and dismiss expiry).'
\ No newline at end of file
uuid: 3099198d-e4cf-47e3-8642-b7347313ed6a
uuid: 8f39cce0-806f-44e4-8576-82a49be7edc5
langcode: en
status: true
dependencies:
config:
- block_content.type.sector_notice
- field.storage.block_content.field_theme
- taxonomy.vocabulary.themes
id: block_content.sector_notice.field_theme
field_name: field_theme
- field.storage.block_content.field_expires
id: block_content.sector_notice.field_expires
field_name: field_expires
entity_type: block_content
bundle: sector_notice
label: Theme
description: ''
label: 'Dismissal Expiry'
description: 'Sets the amount of time (hours) that passes before a dismissed notice will show up again.'
required: false
translatable: false
default_value: { }
default_value:
-
value: 24
default_value_callback: ''
settings:
handler: 'default:taxonomy_term'
handler_settings:
target_bundles:
themes: themes
sort:
field: name
direction: asc
auto_create: false
auto_create_bundle: ''
field_type: entity_reference
min: null
max: null
prefix: ''
suffix: hours
field_type: integer
\ No newline at end of file
uuid: 9c02e082-9bac-4ab7-b3ab-3ee937dc5ff5
langcode: en
status: true
dependencies:
config:
- block_content.type.sector_notice
- field.storage.block_content.field_icon
module:
- material_icons
id: block_content.sector_notice.field_icon
field_name: field_icon
entity_type: block_content
bundle: sector_notice
label: Icon
description: 'Add an icon via Material Icons by Google. '
required: false
translatable: false
default_value:
-
icon: campaign
family: sharp
default_value_callback: ''
settings: { }
field_type: material_icons
\ No newline at end of file
uuid: c3f3aa5e-a354-4227-acb2-7374d963a42c
langcode: en
status: true
dependencies:
config:
- block_content.type.sector_notice
- field.storage.block_content.field_notice_level
module:
- options
id: block_content.sector_notice.field_notice_level
field_name: field_notice_level
entity_type: block_content
bundle: sector_notice
label: 'Notice level'
description: ''
required: true
translatable: false
default_value:
-
value: base
default_value_callback: ''
settings: { }
field_type: list_string
\ No newline at end of file
uuid: 36ee7094-57f9-4f10-91ac-84b8fb3152fa
langcode: en
status: true
dependencies:
module:
- block_content
- options
id: block_content.field_notice_level
field_name: field_notice_level
entity_type: block_content
type: list_string
settings:
allowed_values:
-
value: base
label: Base
-
value: moderate
label: Moderate
-
value: critical
label: Critical
-
value: highly-critical
label: 'Highly critical'
allowed_values_function: ''
module: options
locked: false
cardinality: 1
translatable: true
indexes: { }
persist_with_no_fields: false
custom_storage: false
\ No newline at end of file
uuid: 5a1a77a4-f2ea-4441-94bb-3a25b2bf3440
langcode: en
status: true
dependencies: { }
name: Themes
vid: themes
description: 'Used to theme various components - notices, notes. <em>Terms are rabbit-holed to 404.</em>'
weight: 0
......@@ -5,11 +5,32 @@ dependencies:
config:
- block_content.type.sector_notice
- field.field.block_content.sector_notice.body
- field.field.block_content.sector_notice.field_theme
- field.field.block_content.sector_notice.field_expires
- field.field.block_content.sector_notice.field_icon
- field.field.block_content.sector_notice.field_notice_level
module:
- field_group
- material_icons
- text
_core:
default_config_hash: 9SkQxbSklbqbrL60Nn2kk_GpIiFBszdr6g2_bI25SXE
third_party_settings:
field_group:
group_display_options:
children:
- field_icon
- field_notice_level
- field_expires
label: 'Display options'
region: content
parent_name: ''
weight: 1
format_type: details
format_settings:
classes: ''
show_empty_fields: false
id: ''
open: false
description: ''
required_fields: true
id: block_content.sector_notice.default
targetEntityType: block_content
bundle: sector_notice
......@@ -17,7 +38,7 @@ mode: default
content:
body:
type: text_textarea_with_summary
weight: 1
weight: 2
region: content
settings:
rows: 9
......@@ -25,9 +46,25 @@ content:
placeholder: ''
show_summary: false
third_party_settings: { }
field_theme:
field_expires:
type: number
weight: 29
region: content
settings:
placeholder: ''
third_party_settings: { }
field_icon:
type: material_icons
weight: 27
region: content
settings:
allow_style: false
default_style: sharp
allow_classes: false
third_party_settings: { }
field_notice_level:
type: options_select
weight: 2
weight: 28
region: content
settings: { }
third_party_settings: { }
......@@ -39,4 +76,4 @@ content:
size: 60
placeholder: ''
third_party_settings: { }
hidden: { }
hidden: { }
\ No newline at end of file
uuid: d7ed9791-c081-4e2f-88e9-d4b929f6eb03
langcode: en
status: true
dependencies:
config:
- field.field.taxonomy_term.themes.field_colour
- taxonomy.vocabulary.themes
module:
- color_field
_core:
default_config_hash: WdU1n0NzWqzxeJplJmz7QHFnhDIMIjV9lFopRRhnoeU
id: taxonomy_term.themes.default
targetEntityType: taxonomy_term
bundle: themes
mode: default
content:
field_colour:
type: color_field_widget_box
weight: 1
region: content
settings:
default_colors: '#22c55e,#facc15,#ef4444'
third_party_settings: { }
name:
type: string_textfield
weight: 0
region: content
settings:
size: 60
placeholder: ''
third_party_settings: { }
status:
type: boolean_checkbox
weight: 2
region: content
settings:
display_label: true
third_party_settings: { }
hidden:
description: true
path: true
uuid: 8c1d12ea-5614-45fa-878c-e41f752f9d42
langcode: en
status: true
dependencies:
config:
- block_content.type.sector_notice
- core.entity_view_mode.block_content.card_lg
- field.field.block_content.sector_notice.body
- field.field.block_content.sector_notice.field_expires
- field.field.block_content.sector_notice.field_icon
- field.field.block_content.sector_notice.field_notice_level
module:
- material_icons
id: block_content.sector_notice.card_lg
targetEntityType: block_content
bundle: sector_notice
mode: card_lg
content:
field_icon:
type: material_icons
label: hidden
settings: { }
third_party_settings: { }
weight: 0
region: content
hidden:
body: true
field_expires: true
field_notice_level: true
search_api_excerpt: true
\ No newline at end of file
......@@ -5,7 +5,12 @@ dependencies:
config:
- block_content.type.sector_notice
- field.field.block_content.sector_notice.body
- field.field.block_content.sector_notice.field_expires
- field.field.block_content.sector_notice.field_icon
- field.field.block_content.sector_notice.field_notice_level
module:
- material_icons
- options
- text
id: block_content.sector_notice.default
targetEntityType: block_content
......@@ -19,5 +24,28 @@ content:
third_party_settings: { }
weight: 0
region: content
field_expires:
type: number_integer
label: above
settings:
thousand_separator: ''
prefix_suffix: true
third_party_settings: { }
weight: 3
region: content
field_icon:
type: material_icons
label: hidden
settings: { }
third_party_settings: { }
weight: 1
region: content
field_notice_level:
type: list_default
label: above
settings: { }
third_party_settings: { }
weight: 2
region: content
hidden:
search_api_excerpt: true
search_api_excerpt: true
\ No newline at end of file
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment