Add brand component and customizer controls (#635)

* feat: add brand component and customizer controls * fix: header brand dimensions * feat: exclude brand text from design export/import * refactor: replace literal with constant
helsingborg-stad · Aug 15, 2023 · a618821 · a618821
1 parent 97cd1e7
commit a618821
Show file tree

Hide file tree

Showing 7 changed files with 191 additions and 17 deletions.
diff --git a/assets/source/3.0/sass/navigation/_header.scss b/assets/source/3.0/sass/navigation/_header.scss
@@ -1,3 +1,5 @@
+$brand-height: var(--c-brand-height, 48);
+
 //Spacing
 .c-header .c-header__flex-content {
     display: flex;
@@ -13,14 +15,40 @@
 }
 
 // Logo
-.c-header.c-header--business .c-logotype,
-.c-header.c-header--casual .c-logotype {
+.c-header.c-header--business .c-logotype:not(.c-brand .c-logotype),
+.c-header.c-header--casual .c-logotype:not(.c-brand .c-logotype) {
     display: block;
     width: auto;
     margin: auto;
     max-width: 50vw;
 }
 
+// Brand
+.c-header .c-brand {
+    line-height: 0; // Prevents space below svg.
+
+    &__viewbox {
+        height: $brand-height;
+
+        @include mq('xs') {
+            height: clamp(calc(#{$base} * 3), calc($brand-height * 0.65), $brand-height);
+        }
+
+        @include mq('md') {
+            height: clamp(calc(#{$base} * 3), calc($brand-height * 0.75), $brand-height);
+        } 
+
+        @include mq('lg') {
+            height: $brand-height;
+        }
+    }
+
+    .c-brand__container,
+    .c-brand__logotype {
+        height: 100%;
+    }
+}
+
 .hamburger-menu-trigger__close {
     display: none;
 }

diff --git a/library/Controller/BaseController.php b/library/Controller/BaseController.php
@@ -74,6 +74,7 @@ public function __construct()
         $this->data['subfooterLogotype']    = $this->getSubfooterLogotype($this->data['customizer']->footerSubfooterLogotype ?? false);
         $this->data['emblem']               = $this->getEmblem();
         $this->data['showEmblemInHero']     = $this->data['customizer']->showEmblemInHero ?? true;
+        $this->data['brandText']            = $this->getMultilineTextAsArray(get_option('brand_text', ''));
 
         // Footer
         [$footerStyle, $footerColumns, $footerAreas] = $this->getFooterSettings();
@@ -768,6 +769,17 @@ public function getLogotype($variant = "standard"): string
         return $logotypeUrl;
     }
 
+    public function getMultilineTextAsArray(string $text)
+    {
+        $trimmed = trim($text);
+
+        if( empty($trimmed) ) {
+            return null;
+        }
+
+        return explode("\n", $trimmed);
+    }
+
     /**
      * Get the subfooter logotype
      *

diff --git a/library/Customizer/PanelsRegistry.php b/library/Customizer/PanelsRegistry.php
@@ -250,6 +250,12 @@ public static function registerComponentAppearancePanel()
                     ->setTitle(esc_html__('Header', 'municipio'))
                     ->setFieldsCallback(fn() => new \Municipio\Customizer\Sections\Header('municipio_customizer_section_header'))
             )
+            ->addSection(
+                KirkiPanelSection::create()
+                    ->setID('municipio_customizer_section_brand')
+                    ->setTitle(esc_html__('Brand', 'municipio'))
+                    ->setFieldsCallback(fn() => new \Municipio\Customizer\Sections\Brand('municipio_customizer_section_brand'))
+            )
             ->addSection(
                 KirkiPanelSection::create()
                     ->setID('municipio_customizer_section_siteselector')

diff --git a/library/Customizer/Sections/Brand.php b/library/Customizer/Sections/Brand.php
@@ -0,0 +1,83 @@
+<?php
+
+namespace Municipio\Customizer\Sections;
+
+use Kirki\Compatibility\Kirki;
+
+class Brand
+{
+    const BRAND_TEXT_SELECTOR = '.c-brand .c-brand__text';
+
+    public function __construct(string $sectionID)
+    {
+        Kirki::add_field(\Municipio\Customizer::KIRKI_CONFIG, [
+            'type'        => 'number',
+            'settings'    => 'brand_height',
+            'label'       => esc_html__('Height', 'municipio'),
+            'description' => esc_html__('Component height in px.', 'municipio'),
+            'section'     => $sectionID,
+            'default'     => 100,
+            'priority'    => 10,
+            'output' => [
+                [
+                    'element'   => ':root',
+                    'property'  => '--c-brand-height',
+                    'units'     => 'px'
+                ]
+            ],
+        ]);
+
+        Kirki::add_field(\Municipio\Customizer::KIRKI_CONFIG, [
+            'type'      => 'typography',
+            'settings'  => 'brand_font_family',
+            'label'     => __('Font Family', 'municipio'),
+            'section'   => $sectionID,
+            'priority'  => 10,
+            'choices'   => [
+                'fonts' => [
+                    'google' => ['popularity', 200],
+                ],
+            ],
+            'default' => [
+                'font-size'      => '2.25rem',
+                'font-family'    => 'Roboto',
+                'variant'           => '400',
+                'line-height'    => '1.625',
+                'letter-spacing' => '0',
+                'text-transform' => 'none',
+            ],
+            'output' => [
+                [
+                    'choice'    => 'font-size',
+                    'element'   => ':root',
+                    'property'  => '--c-brand-font-size',
+                ],
+                [
+                    'choice'    => 'font-family',
+                    'element'   => self::BRAND_TEXT_SELECTOR,
+                    'property'  => 'font-family',
+                ],
+                [
+                    'choice'    => 'variant',
+                    'element'   => self::BRAND_TEXT_SELECTOR,
+                    'property'  => 'font-variant',
+                ],
+                [
+                    'choice'    => 'line-height',
+                    'element'   => self::BRAND_TEXT_SELECTOR,
+                    'property'  => 'line-height',
+                ],
+                [
+                    'choice'    => 'letter-spacing',
+                    'element'   => self::BRAND_TEXT_SELECTOR,
+                    'property'  => 'letter-spacing',
+                ],
+                [
+                    'choice'    => 'text-transform',
+                    'element'   => self::BRAND_TEXT_SELECTOR,
+                    'property'  => 'text-transform',
+                ],
+            ]
+        ]);
+    }
+}
diff --git a/library/Customizer/Sections/Logo.php b/library/Customizer/Sections/Logo.php
@@ -4,6 +4,7 @@
 
 use Kirki\Compatibility\Kirki;
 use Kirki\Field\Upload as UploadField;
+use Kirki\Field\TextArea as TextareaField;
 
 class Logo
 {
@@ -28,6 +29,13 @@ public function __construct(string $sectionID)
             $primaryDescription
         );
 
+        $brandTextField = $this->getTextAreaField([
+            'settings' => 'brand_text',
+            'section' => $sectionID,
+            'label' => esc_html__('Brand Text', 'municipio'),
+            'option_type' => 'option'
+        ]);
+
         $secondaryLogoField = $this->getImageField(
             $sectionID,
             'logotype_negative',
@@ -43,8 +51,8 @@ public function __construct(string $sectionID)
         );
 
         Kirki::add_field($primaryLogoField);
+        Kirki::add_field($brandTextField);
         Kirki::add_field($secondaryLogoField);
-
         Kirki::add_field($emblemField);
     }
 
@@ -63,4 +71,19 @@ private function getImageField(string $sectionID, string $setting, string $label
             ]
         ]]);
     }
+
+    private function getTextAreaField(array $args): TextareaField
+    {
+        $mergedArgs = array_merge([
+            'default'           => '',
+            'output'            => [
+                [
+                    'type' => 'controller',
+                    'as_object' => false,
+                ]
+            ]
+        ], $args);
+
+        return new TextareaField($mergedArgs);
+    }
 }
diff --git a/views/v3/partials/header/business.blade.php b/views/v3/partials/header/business.blade.php
@@ -6,13 +6,24 @@
 
             {{-- Header logo --}}
             @link(['href' => $homeUrl, 'classList' => ['u-margin__right--auto', 'u-display--flex']])
-                @logotype([
-                    'src'=> $logotype,
-                    'alt' => $lang->goToHomepage,
-                    'classList' => ['c-nav__logo', 'c-header__logotype'],
-                    'context' => ['site.header.logo', 'site.header.business.logo']
-                ])
-                @endlogotype
+                @if($brandText)
+                    @brand([
+                        'logotype' => [
+                            'src'=> $logotype,
+                            'alt' => $lang->goToHomepage
+                        ],
+                        'text' => $brandText,
+                    ])
+                    @endbrand
+                @else
+                    @logotype([
+                        'src'=> $logotype,
+                        'alt' => $lang->goToHomepage,
+                        'classList' => ['c-nav__logo', 'c-header__logotype'],
+                        'context' => ['site.header.logo', 'site.header.business.logo']
+                    ])
+                    @endlogotype
+                @endif
             @endlink
 
             {{-- Tab menu items --}}

diff --git a/views/v3/partials/header/casual.blade.php b/views/v3/partials/header/casual.blade.php
@@ -8,13 +8,24 @@
 
             {{-- Header logo --}}
             @link(['href' => $homeUrl, 'classList' => ['u-margin__right--auto', 'u-display--flex']])
-                @logotype([
-                    'src'=> $logotype,
-                    'alt' => $lang->goToHomepage,
-                    'classList' => ['c-nav__logo', 'c-header__logotype'],
-                    'context' => ['site.header.logo', 'site.header.casual.logo']
-                ])
-                @endlogotype
+                @if($brandText)
+                    @brand([
+                        'logotype' => [
+                            'src'=> $logotype,
+                            'alt' => $lang->goToHomepage
+                        ],
+                        'text' => $brandText,
+                    ])
+                    @endbrand
+                @else
+                    @logotype([
+                        'src'=> $logotype,
+                        'alt' => $lang->goToHomepage,
+                        'classList' => ['c-nav__logo', 'c-header__logotype'],
+                        'context' => ['site.header.logo', 'site.header.casual.logo']
+                    ])
+                    @endlogotype
+                @endif
             @endlink
 
             {{-- Primary menu --}}