From da60f2fb08050e591aaa6238c8533c7b4039c453 Mon Sep 17 00:00:00 2001 From: Dave Janelle Date: Mon, 7 Oct 2024 15:30:23 -0400 Subject: [PATCH 1/4] ** Why are these changes being introduced: Our current Alerts in Wordpress don't follow our style guide, and aren't consistent inside of Wordpress. The particular example in PW-108 is handcoded and uses inline style. We also now have a new Alert pattern styling as part of our new design system efforts. * ** Relevant ticket(s): PW-108 - https://mitlibraries.atlassian.net/browse/PW-108 * https://mitlibraries.atlassian.net/browse/ ** How does this address that need: This work implements the new alert styling inside of our Wordpress parent theme. The new class is prefixed with "mitlib-" to avoid conflict with styles from other plugins or themes. This particular instance uses the default informational style, but classes have been added to upgrade this to danger, warning, or success in future use cases. * ** Document any side effects to this change: This work uses icons that already existed in FontAwesome. We'll need to upgrade to a new version to use the ideal icons. The icon choices are semantically close and will be fine until we're able to upgrade. * --- .../css/scss/partials/_alerts.scss | 75 +++++++++++++++++++ 1 file changed, 75 insertions(+) diff --git a/web/app/themes/mitlib-parent/css/scss/partials/_alerts.scss b/web/app/themes/mitlib-parent/css/scss/partials/_alerts.scss index ed755607..079c09d7 100644 --- a/web/app/themes/mitlib-parent/css/scss/partials/_alerts.scss +++ b/web/app/themes/mitlib-parent/css/scss/partials/_alerts.scss @@ -97,3 +97,78 @@ padding: 1% 5%; } } + +.mitlib-alert { + border: 4px solid #007499; + margin-bottom: 20px; + padding: 16px; + display: flex; + + i { + margin-right: 12px; + + &:before{ + color: #007499; + content: "\f05a"; + + font-family: FontAwesome; + font-weight: normal; + font-size: 24px; + font-style: normal; + display: inline-block; + text-decoration: inherit; + } + } + + div > h3 { + font-weight: 700; + margin-top: 2px; + } + + p { + margin-bottom: 16px; + + &:last-of-type {margin-bottom: 0 !important;} + } + + .btn { + border: 1px solid #000; + border-radius: 0; + padding: 6px 12px; + text-decoration: none; + font-size: 16px; + font-weight: 600; + + &:hover { + color: #fff; + background-color: #000; + } + } + + &.warning { + border-color: #FFD300; + + i:before { + color: #000; + content: "\f06a"; + } + } + + &.danger { + border-color: #FF0000; + + i:before { + color: #FF0000; + content: "\f05e"; + } + } + + &.success { + border-color: #009900; + + i:before { + color: #009900; + content: "\f046"; + } + } +} \ No newline at end of file From c4d34382482e5733679f3c2d1e795ae0e2f0c8a1 Mon Sep 17 00:00:00 2001 From: djanelle-mit Date: Fri, 11 Oct 2024 13:54:13 -0400 Subject: [PATCH 2/4] Added alert color variables and new swatches --- : | 43 +++++++++++++++++++ .../css/scss/modules/_colors.scss | 17 ++++++++ .../css/scss/partials/_alerts.scss | 16 +++---- 3 files changed, 68 insertions(+), 8 deletions(-) create mode 100644 : diff --git a/: b/: new file mode 100644 index 00000000..7c22667d --- /dev/null +++ b/: @@ -0,0 +1,43 @@ +# 345678901234567890123456789012345678901234567890 +# 50-character clear, concise, subject line + +# 3456789012345678901234567890123456789012345678901234567890123456789012 +# This question tells reviewers of your pull request what to expect in +# the commit, allowing them to more easily identify and point out +# unrelated changes. + +** Why are these changes being introduced: +Our current Alert styling in Wordpress is inconsistent and isn't a cohesive system. The particular example in PW-108 is a custom alert that isn't close to the styling of other alerts in Wordpress or the styling in our style guide. + +We now have a new visual pattern for Alerts that we should begin to implement across all of our properties. + +* + +# 3456789012345678901234567890123456789012345678901234567890123456789012 +# full URLs not ticket numbers for longer term usefulness + +** Relevant ticket(s): +PW-108 (https://mitlibraries.atlassian.net/browse/PW-108) + +# 3456789012345678901234567890123456789012345678901234567890123456789012 +# Describe, at a high level, what was done to affect change +# If your change is obvious, you may be able to omit +# addressing this question (delete it!). + +** How does this address that need: +This work adds styling to our Wordpress Parent Theme that supports the new alert style. A new default alert style is prefixed with "mitlib-" to avoid conflict with styles from other plugins, especially because "alert" is a pretty common term. + +The informational styling is applied as the default since thats the lowest level of importance. Classes have been added to support upgrading the alert from informational to warning, danger, or success. + +* + +# 3456789012345678901234567890123456789012345678901234567890123456789012 +# This is the most important question to answer, as it can point out +# problems where you are making too many changes in one commit or +# branch. One or two bullet points for related changes may be okay, but +# five or six are likely indicators of a commit that is doing too many +# things. + +** Document any side effects to this change: +This new Alert style uses existing FontAwesome icons that best fit the semantics of each alert, but aren't ideal. This work probably needs to be followed by an upgrade of FontAwesome to version 6. +* diff --git a/web/app/themes/mitlib-parent/css/scss/modules/_colors.scss b/web/app/themes/mitlib-parent/css/scss/modules/_colors.scss index e735ce96..ab1cff79 100644 --- a/web/app/themes/mitlib-parent/css/scss/modules/_colors.scss +++ b/web/app/themes/mitlib-parent/css/scss/modules/_colors.scss @@ -144,3 +144,20 @@ $color-guides-experts: $magenta-dark; background: linear-gradient(45deg, #5889c2 0%,#3fa0c9 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5889c2', endColorstr='#3fa0c9',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ } + +// Alert Semantic Variables +// Adding new color values until we can adjust the global variables above +$info-blue: #007499; +$success-green: #009900; + +$info-border-color: $info-blue; +$info-icon-color: $info-blue; + +$warning-border-color: $yellow; +$warning-icon-color: $black; + +$danger-border-color: $red; +$danger-icon-color: $red; + +$success-border-color: $success-green; +$success-icon-color: $success-green; \ No newline at end of file diff --git a/web/app/themes/mitlib-parent/css/scss/partials/_alerts.scss b/web/app/themes/mitlib-parent/css/scss/partials/_alerts.scss index 079c09d7..8d7f2e4e 100644 --- a/web/app/themes/mitlib-parent/css/scss/partials/_alerts.scss +++ b/web/app/themes/mitlib-parent/css/scss/partials/_alerts.scss @@ -99,7 +99,7 @@ } .mitlib-alert { - border: 4px solid #007499; + border: 4px solid $info-border-color; margin-bottom: 20px; padding: 16px; display: flex; @@ -108,7 +108,7 @@ margin-right: 12px; &:before{ - color: #007499; + color: $info-icon-color; content: "\f05a"; font-family: FontAwesome; @@ -146,28 +146,28 @@ } &.warning { - border-color: #FFD300; + border-color: $warning-border-color; i:before { - color: #000; + color: $warning-icon-color; content: "\f06a"; } } &.danger { - border-color: #FF0000; + border-color: $danger-border-color; i:before { - color: #FF0000; + color: $danger-icon-color; content: "\f05e"; } } &.success { - border-color: #009900; + border-color: $success-border-color; i:before { - color: #009900; + color: $success-icon-color; content: "\f046"; } } From b477ea3d97bc8d3fa6ada16a162ddddd8fe77468 Mon Sep 17 00:00:00 2001 From: djanelle-mit Date: Fri, 11 Oct 2024 13:57:10 -0400 Subject: [PATCH 3/4] Using existing color variables for the button style --- web/app/themes/mitlib-parent/css/scss/partials/_alerts.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/web/app/themes/mitlib-parent/css/scss/partials/_alerts.scss b/web/app/themes/mitlib-parent/css/scss/partials/_alerts.scss index 8d7f2e4e..db12440c 100644 --- a/web/app/themes/mitlib-parent/css/scss/partials/_alerts.scss +++ b/web/app/themes/mitlib-parent/css/scss/partials/_alerts.scss @@ -132,7 +132,7 @@ } .btn { - border: 1px solid #000; + border: 1px solid $black; border-radius: 0; padding: 6px 12px; text-decoration: none; @@ -140,8 +140,8 @@ font-weight: 600; &:hover { - color: #fff; - background-color: #000; + color: $white; + background-color: $black; } } From 7bc81e1abcf2d7db35e75db5c3c42fcf2fcc2c2c Mon Sep 17 00:00:00 2001 From: djanelle-mit Date: Fri, 11 Oct 2024 16:49:05 -0400 Subject: [PATCH 4/4] Removed : commit message file --- : | 43 ------------------------------------------- 1 file changed, 43 deletions(-) delete mode 100644 : diff --git a/: b/: deleted file mode 100644 index 7c22667d..00000000 --- a/: +++ /dev/null @@ -1,43 +0,0 @@ -# 345678901234567890123456789012345678901234567890 -# 50-character clear, concise, subject line - -# 3456789012345678901234567890123456789012345678901234567890123456789012 -# This question tells reviewers of your pull request what to expect in -# the commit, allowing them to more easily identify and point out -# unrelated changes. - -** Why are these changes being introduced: -Our current Alert styling in Wordpress is inconsistent and isn't a cohesive system. The particular example in PW-108 is a custom alert that isn't close to the styling of other alerts in Wordpress or the styling in our style guide. - -We now have a new visual pattern for Alerts that we should begin to implement across all of our properties. - -* - -# 3456789012345678901234567890123456789012345678901234567890123456789012 -# full URLs not ticket numbers for longer term usefulness - -** Relevant ticket(s): -PW-108 (https://mitlibraries.atlassian.net/browse/PW-108) - -# 3456789012345678901234567890123456789012345678901234567890123456789012 -# Describe, at a high level, what was done to affect change -# If your change is obvious, you may be able to omit -# addressing this question (delete it!). - -** How does this address that need: -This work adds styling to our Wordpress Parent Theme that supports the new alert style. A new default alert style is prefixed with "mitlib-" to avoid conflict with styles from other plugins, especially because "alert" is a pretty common term. - -The informational styling is applied as the default since thats the lowest level of importance. Classes have been added to support upgrading the alert from informational to warning, danger, or success. - -* - -# 3456789012345678901234567890123456789012345678901234567890123456789012 -# This is the most important question to answer, as it can point out -# problems where you are making too many changes in one commit or -# branch. One or two bullet points for related changes may be okay, but -# five or six are likely indicators of a commit that is doing too many -# things. - -** Document any side effects to this change: -This new Alert style uses existing FontAwesome icons that best fit the semantics of each alert, but aren't ideal. This work probably needs to be followed by an upgrade of FontAwesome to version 6. -*