devgeniem · vhirvonen · Apr 25, 2022 · Apr 25, 2022 · Apr 25, 2022 · May 4, 2022
diff --git a/assets/styles/settings/brand/_typography.scss b/assets/styles/settings/brand/_typography.scss
@@ -137,6 +137,36 @@ h6,
     }
 }
 
+.has-text-align-left {
+    text-align: left;
+}
+
+.has-text-align-left-desktop {
+    @include from($desktop) {
+        text-align: left;
+    }
+}
+
+.has-text-align-center {
+    text-align: center;
+}
+
+.has-text-align-center-desktop {
+    @include from($desktop) {
+        text-align: center;
+    }
+}
+
+.has-text-align-right {
+    text-align: right;
+}
+
+.has-text-align-right-desktop {
+    @include from($desktop) {
+        text-align: right;
+    }
+}
+
 @each $base-size-breakpoint, $base-size-values in $base-sizes {
     $calc-base_size: map-get($base-size-values, "base_size");
     $calc-scale_value: map-get($base-size-values, "scale_value");

diff --git a/assets/styles/ui-components/_button-toggle.scss b/assets/styles/ui-components/_button-toggle.scss
@@ -1,6 +1,7 @@
 .button-toggle {
-    background-color: unset;
     border: 0;
+    background-color: unset;
+    color: $primary;
     cursor: pointer;
 
     .icon {

diff --git a/assets/styles/ui-components/_comments.scss b/assets/styles/ui-components/_comments.scss
@@ -4,7 +4,7 @@
     .comment__body {
         margin-bottom: $theme-spacing-oneandhalf;
         padding: $theme-spacing-oneandhalf;
-        border: 1px solid $secondary;
+        border: .125rem solid $color-grey;
 
         @include from($tablet) {
             padding: $theme-spacing-oneandhalf $theme-spacing-two;
@@ -24,18 +24,23 @@
         > label {
             display: block;
             margin-bottom: $theme-spacing-quarter;
+            color: $color-black;
         }
 
         input,
         textarea {
-            line-height: 1;
             width: 100%;
             padding: $theme-spacing-half;
-            border: 1px solid $secondary;
+            border: .125rem solid $secondary;
             border-radius: $theme-spacing-quarter;
+            line-height: 1;
         }
     }
 
+    .acf-fg_comment_fields_author, {
+        color: $color-black;
+    }
+
     .required {
         color: $primary;
     }
@@ -46,15 +51,9 @@
     }
 
     .comment__author-badge {
-        font-size: .705rem;
-        vertical-align: top;
-
         &::before {
-            content: "[";
-        }
-
-        &::after {
-            content: "]";
+            content: "/";
+            margin-right: $theme-spacing-quarter;
         }
     }
 }
diff --git a/assets/styles/views/_archive-blog-article.scss b/assets/styles/views/_archive-blog-article.scss
@@ -0,0 +1,6 @@
+.single-blog-article {
+    &__subtitle {
+        color: $text;
+        font-weight: 400;
+    }
+}
diff --git a/assets/styles/views/_single-blog-article.scss b/assets/styles/views/_single-blog-article.scss
@@ -3,6 +3,7 @@
     max-width: 100vw;
     margin-right: calc(50% - 50vw);
     margin-left: calc(50% - 50vw);
+    background-color: $color-light-gray;
 }
 
 .is-blog-info-grid {
@@ -12,6 +13,10 @@
     }
 }
 
+.entry__blog-subtitle {
+    color: $text !important;
+}
+
 .entry__blog-description-text {
     grid-column: 2 / 2;
 }

diff --git a/assets/styles/views/index.scss b/assets/styles/views/index.scss
@@ -5,3 +5,4 @@
 @import "search";
 @import "page-program";
 @import "page-materials";
+@import "archive-blog-article";
diff --git a/comments.php b/comments.php
@@ -6,7 +6,7 @@
 use \TMS\Theme\Tredu\Comments;
 ?>
 
-<section class="section section--comments has-border has-border-secondary has-border-top-1">
+<section class="section section--comments">
     <div class="columns">
         <div class="column is-10 is-offset-1">
             <div class="is-content-grid">

diff --git a/lib/Comments.php b/lib/Comments.php
@@ -58,7 +58,7 @@ public static function get_author_override_id( int $comment_id ) {
      * @return string
      */
     public function amend_reply_link_class( string $link ) : string {
-        return str_replace( 'comment-reply-link', 'comment-reply-link button button-primary', $link );
+        return str_replace( 'comment-reply-link', 'comment-reply-link button is-primary', $link );
     }
 
     /**
@@ -70,8 +70,8 @@ public function override_comment_form_submit() : string {
         return sprintf(
             '<button name="submit" type="submit" id="submit" class="button button--icon is-primary" >%s %s</button>',
             __( 'Send Comment', 'tms-theme-tredu' ),
-            '<svg class="icon icon--chevron-right icon--large is-primary-invert">
-                <use xlink:href="#icon-chevron-right"></use>
+            '<svg class="icon icon--chevron-right icon--medium">
+                <use xlink:href="#icon-arrow-right"></use>
             </svg>'
         );
     }
@@ -130,13 +130,13 @@ public static function comment_callback( \WP_Comment $comment, array $args, int
                         ?>
 
                         <?php if ( ! empty( self::get_author_override_id( $comment->comment_ID ) ) ) : ?>
-                            <div class="comment__author-badge is-inline-flex ml-2">
+                            <div class="comment__author-badge is-inline-flex ml-1">
                                 <?php esc_html_e( 'Blog author', 'tms-theme-tredu' ); ?>
                             </div>
                         <?php endif; ?>
                     </div>
 
-                    <p class="comment__date mt-2 mb-0">
+                    <p class="comment__date mt-2 mb-0 has-text-weight-semibold has-text-black has-text-small">
                         <time datetime="<?php get_comment_time( 'c' ); ?>">
                             <?php
                             echo esc_html(

diff --git a/models/archive-blog-article.php b/models/archive-blog-article.php
@@ -23,6 +23,8 @@ public static function hooks() : void {
             'pre_get_posts',
             [ __CLASS__, 'modify_query' ]
         );
+
+        add_filter( 'tms/theme/breadcrumbs/show_breadcrumbs_in_header', fn() => false );
     }
 
     /**

diff --git a/models/single-blog-article.php b/models/single-blog-article.php
@@ -86,9 +86,7 @@ public function blog_authors() : ?array {
      */
     public function classes() : ?array {
         return apply_filters( 'tms/theme/single_blog/classes', [
-            'info_section'         => 'has-colors-secondary',
-            'info_section_button'  => 'is-outlined',
-            'info_section_authors' => 'has-border has-border-top-1 has-border-gray',
+            'info_section_button' => 'is-primary',
         ] );
     }
 

diff --git a/models/single.php b/models/single.php
@@ -19,6 +19,13 @@ class Single extends BaseModel {
     use Traits\Sharing;
     use Traits\Components;
 
+    /**
+     * Hooks
+     */
+    public function hooks() : void {
+        add_filter( 'tms/theme/breadcrumbs/show_breadcrumbs_in_header', fn() => false );
+    }
+
     /**
      * Content
      *

diff --git a/partials/archive-blog-article.dust b/partials/archive-blog-article.dust
@@ -2,6 +2,18 @@
 
 {<content}
     <main class="main-content pb-8" id="main-content">
+        {?Header.breadcrumbs}
+            <div class="breadcrumbs-container section pt-4 pb-4 has-background-light-gray">
+                <div class="container">
+                    <div class="columns">
+                        <div class="column">
+                            {>"ui/breadcrumbs" breadcrumbs=Header.breadcrumbs bc_icon="chevron-right" icon_classes="icon--small is-secondary ml-2 mr-0" /}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        {/Header.breadcrumbs}
+
         {#ArchiveBlogArticle}
             <section class="section">
                 <div class="container">
@@ -15,13 +27,13 @@
                         <div class="column is-8 has-text-centered {^page_logo}is-offset-2{/page_logo}">
                             {?page_title}
                                 <h1 class="mt-0 mb-8">
-                                    {page_title|s}
+                                    {page_title|html}
                                 </h1>
                             {/page_title}
 
                             {?page_subtitle}
-                                <p class="h2 mb-6">
-                                    {page_subtitle|s}
+                                <p class="mb-6 archive-blog-article__subtitle">
+                                    {page_subtitle|html}
                                 </p>
                             {/page_subtitle}
 
@@ -32,15 +44,15 @@
                                             {>"ui/button-toggle" class="mb-5" text=Strings.s.blog_article.toggle_details target="js-archive-description-toggle-target" /}
 
                                             <p id="js-archive-description-toggle-target"
-                                               class="is-hidden has-text-left">{page_description|s}</p>
+                                               class="is-hidden has-text-left has-text-lead has-text-centered">{page_description|s}</p>
                                         </div>
                                     </div>
                                 </div>
                             {/page_description}
                         </div>
                     </div>
 
-                    {>"views/archive-blog-article/archive-blog-highlight" category_link_classes="has-background-primary-invert has-text-primary is-borderless" /}
+                    {>"views/archive-blog-article/archive-blog-highlight" category_link_classes="pill" /}
 
                     {>"views/home/home-filters" /}
 

diff --git a/partials/single-blog-article.dust b/partials/single-blog-article.dust
@@ -2,6 +2,18 @@
 
 {<content}
     <main class="main-content" id="main-content">
+        {?Header.breadcrumbs}
+            <div class="breadcrumbs-container section pt-4 pb-4 has-background-light-gray">
+                <div class="container">
+                    <div class="columns">
+                        <div class="column">
+                            {>"ui/breadcrumbs" breadcrumbs=Header.breadcrumbs bc_icon="chevron-right" icon_classes="icon--small is-secondary ml-2 mr-0" /}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        {/Header.breadcrumbs}
+
         <section class="section">
             <div class="container">
                 <div class="columns">
@@ -18,7 +30,7 @@
                                             {@image id=content.image.id size="single" /}
                                         </div>
 
-                                        {>"views/single/single-meta" spacing_class="pt-5 pt-4-desktop pb-5 p-5-tablet" /}
+                                        {>"views/single/single-meta" spacing_class="pt-5 pb-5 p-5-tablet pt-4-desktop pr-0-desktop pl-0-desktop" /}
 
                                         {>"views/single-blog-article/blog-info" /}
                                     {/content.image}

diff --git a/partials/single.dust b/partials/single.dust
@@ -2,6 +2,18 @@
 
 {<content}
     <main class="main-content" id="main-content">
+        {?Header.breadcrumbs}
+            <div class="breadcrumbs-container section pt-4 pb-4 has-background-light-gray">
+                <div class="container">
+                    <div class="columns">
+                        <div class="column">
+                            {>"ui/breadcrumbs" breadcrumbs=Header.breadcrumbs bc_icon="chevron-right" icon_classes="icon--small is-secondary ml-2 mr-0" /}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        {/Header.breadcrumbs}
+
         <section class="section">
             <div class="container">
                 <div class="columns">

diff --git a/partials/ui/button-toggle.dust b/partials/ui/button-toggle.dust
@@ -1,7 +1,7 @@
-<button class="button-toggle js-toggle is-unstyled {?class}{class}{/class}"
+<button class="button-toggle js-toggle has-text-decoration-underline is-unstyled {?class}{class|attr}{/class}"
         aria-expanded="false"
-        aria-controls={target}
-        {?duration}data-duration={duration}{/duration}>
-    {>"ui/icon" icon="chevron-down" class="icon--medium mr-3 has-text-accent" /}
-    {text|s}
+    aria-controls={target|attr}
+    {?duration}data-duration={duration|attr}{/duration}>
+    {>"ui/icon" icon="chevron-down" class="icon--medium mr-3 is-secondary" /}
+    {text|html}
 </button>
diff --git a/partials/views/archive-blog-article/archive-blog-highlight.dust b/partials/views/archive-blog-article/archive-blog-highlight.dust
@@ -8,24 +8,25 @@
             </div>
         </div>
 
-        <div class="column is-6-desktop is-5-widescreen has-background-secondary has-text-secondary-invert">
-            <div class="highlight-article__fields p-6">
-                {?highlight.category}
-                    <a href="{category.permalink|s}" class="pill {category_link_classes}">
-                        {highlight.category.name|s}
-                    </a>
-                {/highlight.category}
-
+        <div class="column is-6-desktop is-5-widescreen">
+            <div class="highlight-article__fields pl-6-tablet p-6-desktop">
                 {?highlight.post_title}
-                    <h2 class="mt-3 mb-5 mb-10-desktop">
+                    <h2 class="mt-3 mb-4 mb-5-desktop">
                         <a href="{highlight.permalink}" class="has-text-black">
                             {highlight.post_title|s}
                         </a>
                     </h2>
                 {/highlight.post_title}
 
-                <div class="entry__excerpt mt-5 mt-10-desktop mb-5">
-                    <span class="is-block has-text-weight-bold">{@strtodate value=highlight.post_date /}</span>
+                {?highlight.category}
+                    <a href="{category.permalink|s}" class="pill {category_link_classes}">
+                        {highlight.category.name|s}
+                    </a>
+                {/highlight.category}
+
+                <div class="entry__excerpt mt-4 mb-4 mt-5-desktop">
+                    <span
+                        class="is-block mt-2 has-text-weight-bold has-text-black">{@strtodate value=highlight.post_date /}</span>
                     {highlight.excerpt|s}
                 </div>
             </div>

diff --git a/partials/views/home/home-grid-item.dust b/partials/views/home/home-grid-item.dust
@@ -16,7 +16,8 @@
 
         <div class="entry__excerpt mt-4 mb-4">
             <p>
-                <span class="has-text-weight-semibold has-text-black is-family-secondary has-text-xsmall">{@strtodate value=post_date /}</span>
+                <span
+                    class="has-text-weight-semibold has-text-black is-family-secondary has-text-small">{@strtodate value=post_date /}</span>
                 {excerpt|html}
             </p>
         </div>

diff --git a/partials/views/home/home-list-item.dust b/partials/views/home/home-list-item.dust
@@ -18,7 +18,7 @@
             </h2>
 
             <div class="entry__excerpt mt-5 mb-5 has-text-small">
-                <span class="has-text-weight-bold">{@strtodate value=post_date /}</span>
+                <span class="has-text-weight-bold has-text-black">{@strtodate value=post_date /}</span>
                 {excerpt|s}
             </div>
-Original file line number
+Diff line change
@@ Expand Up / @@ -23,6 +23,8 @@ public static function hooks() : void { @@
                 'pre_get_posts',
                 [ __CLASS__, 'modify_query' ]
             );
+            add_filter( 'tms/theme/breadcrumbs/show_breadcrumbs_in_header', fn() => false );
         }
         /**
@@ Expand Down @@