Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

DS-1656 Add additional alert styles #149

Merged
merged 1 commit into from
Dec 9, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
87 changes: 83 additions & 4 deletions assets/css/openy_node_alert.css

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion assets/css/openy_node_alert.css.map

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

57 changes: 54 additions & 3 deletions assets/scss/openy_node_alert.scss
Original file line number Diff line number Diff line change
Expand Up @@ -55,13 +55,22 @@
background: var(--ylb-color-white, white);
}

&.ws-alert-critical,
&.ws-alert-warning,
&.ws-alert-info,
&.ws-alert-dark {
.site-alert__dismiss {
color: currentColor;
}
}

&.ws-alert-critical {
background-color: var(--ylb-color-red, red);
background-color: var(--ylb-color-red, #ed1c24);
color: var(--ylb-color-white, white);
}

&.ws-alert-warning {
background-color: var(--ylb-color-orange-light, orange);
background-color: var(--ylb-color-orange-light, #fcaf17);
color: var(--ylb-color-dark-grey-2, #231f20);

.alert-icon {
Expand All @@ -70,7 +79,7 @@
}

&.ws-alert-info {
background-color: var(--ylb-color-blue-light, blue);
background-color: var(--ylb-color-blue-light, #00aeef);
color: var(--ylb-color-dark-grey-2, #231f20);

.alert-icon {
Expand All @@ -91,6 +100,48 @@
}
}

&.ws-alert-blue,
&.ws-alert-green,
&.ws-alert-purple,
&.ws-alert-red {
background-color: var(--ylb-color-light-grey-1, #f2f2f2);
border-top: 1px solid currentColor;
border-bottom: 1px solid currentColor;

.site-alert__cta {
.field-alert-link a {
// These have to be important to override styles in Carnation
// openy_carnation/src/scss/modules/site-alerts.scss.
background-color: white;
color: currentColor !important;
border-color: currentColor !important;

&:hover {
border-color: transparent !important;
}
}
}
.site-alert__dismiss {
color: currentColor;
}
}

&.ws-alert-blue {
color: var(--ylb-color-blue-dark, #0060af);
}

&.ws-alert-green {
color: var(--ylb-color-green-dark, #006b6b);
}

&.ws-alert-purple {
color: var(--ylb-color-purple-dark, #5c2e91);
}

&.ws-alert-red {
color: var(--ylb-color-red-dark, #a92b31);
}

.site-alert__wrapper {
.site-alert__icon {
width: fit-content;
Expand Down
20 changes: 16 additions & 4 deletions config/install/field.storage.node.field_alert_style.yml
Original file line number Diff line number Diff line change
Expand Up @@ -15,16 +15,28 @@ settings:
label: 'Classic'
-
value: ws-alert-critical
label: 'Urgent - Red'
label: 'Urgent - Danger (Red)'
-
value: ws-alert-warning
label: 'Urgent - Yellow'
label: 'Urgent - Warning (Yellow)'
-
value: ws-alert-info
label: 'Urgent - Blue'
label: 'Urgent - Info (Blue)'
-
value: ws-alert-dark
label: 'Urgent - Black'
label: 'Urgent - Dark (Black)'
-
value: ws-alert-blue
label: 'Info - Blue'
-
value: ws-alert-green
label: 'Info - Green'
-
value: ws-alert-purple
label: 'Info - Purple'
-
value: ws-alert-red
label: 'Info - Red'
allowed_values_function: ''
module: options
locked: false
Expand Down
14 changes: 14 additions & 0 deletions openy_node_alert.install
Original file line number Diff line number Diff line change
Expand Up @@ -410,6 +410,20 @@ function openy_node_alert_update_91001(&$sandbox): void {
_openy_node_alert_update_existing_alerts($sandbox);
}

/**
* Add additional Alert Style options.
*/
function openy_node_alert_update_91002(): void
{
$config_dir = \Drupal::service('extension.list.module')->getPath('openy_node_alert') . '/config/install/';
$configs = [
'field.storage.node.field_alert_style',
];
$config_importer = \Drupal::service('openy_upgrade_tool.importer');
$config_importer->setDirectory($config_dir);
$config_importer->importConfigs($configs);
}

/**
* Mark the bg-color, text-color, and icon-color fields not required.
*/
Expand Down
Loading