feat(branding): update daffodil logo to the new version (#2597)

libs/branding/src/lib/logo/logo-theme.scss

@@ -1,12 +1,12 @@
 @use '../../scss/branding-theme';
+@use 'theme' as daff-theme;
 
 @mixin daff-logo-theme($theme) {
+	$gray: daff-theme.daff-map-deep-get($theme, 'core.gray');
 	$base: branding-theme.daff-map-deep-get($theme, 'core.base');
 	$base-contrast: branding-theme.daff-map-deep-get($theme, 'core.base-contrast');
 
-	.daff-logo {
-		&--full {
-			fill: currentColor;
-		}
+	.daff-branding-logo {
+		fill: daff-theme.daff-illuminate($base-contrast, $gray, 1);
 	}
 }

libs/branding/src/lib/logo/logo.component.html

@@ -1,9 +1,27 @@
-<div class="daff-logo daff-logo--full" *ngIf="isFull()">
-    <svg class="daff" viewBox="0 0 239.55 50.61"><path d="M44.08,24.64A29.4,29.4,0,0,1,41.22,38a20.69,20.69,0,0,1-8.14,8.77,24.19,24.19,0,0,1-12.4,3.08H0V0H20.83A24.3,24.3,0,0,1,33.56,3.15a20,20,0,0,1,7.88,8.7A29.37,29.37,0,0,1,44.08,24.64Zm-11.88,0q0-7.11-2.93-11.22t-8.59-4.1H11.44V40.63h8.73a10.74,10.74,0,0,0,8.8-4Q32.2,32.71,32.2,24.64Z"/><path d="M69.17,49.88,88.24,0H99l18.92,49.29-11.29,1.32-4-11.52H84.49L80.61,49.88ZM87.72,30H99.24L93.37,14.52Z"/><path d="M158.13,20.9h15.48l1.32,9h-16.8v20H146.69V.07h30.37l1.32,9H158.13Z"/><path d="M219.31,20.9h15.47l1.32,9H219.31v20H207.86V.07h30.37l1.32,9H219.31Z"/></svg>
-    <div class="spacer"></div>
-    <img class="flower" [src]="flowerPath" alt="Daffodil Logo"/>
-    <div class="spacer"></div>
-    <svg class="dil" viewBox="0 0 154.39 50.61"><path d="M44.08,25A29.4,29.4,0,0,1,41.22,38.4a20.61,20.61,0,0,1-8.14,8.76,24.09,24.09,0,0,1-12.4,3.08H0V.37H20.83A24.3,24.3,0,0,1,33.56,3.52a20,20,0,0,1,7.88,8.69A29.42,29.42,0,0,1,44.08,25ZM32.2,25q0-7.11-2.94-11.22a9.86,9.86,0,0,0-8.58-4.11H11.44V41h8.73A10.74,10.74,0,0,0,29,37Q32.2,33.08,32.2,25Z"/><path d="M85.89.37V50.24H74.45V.37Z"/><path d="M131.44,41.29h21.63l1.32,9H120V.37h11.45Z"/></svg>
-</div>
+<svg class="daff-branding-logo--full" *ngIf="isFull()" viewBox="0 0 800 181" width="100%">
+	<path d="M172.957 88.2909V149.783L119.711 180.531L66.4583 149.776V88.2909L119.711 57.5645L172.957 88.2909Z" fill="#FFCC67"/>
+	<path d="M139.766 30.7537V92.246L86.5195 122.994L33.2666 92.2392V30.7537L86.5195 0.0272217L139.766 30.7537Z" fill="#FFCC67"/>
+	<path d="M106.524 88.2909V149.783L53.2774 180.531L0.0245361 149.776V88.2909L53.2774 57.5645L106.524 88.2909Z" fill="#FFCC67"/>
+	<path d="M53.2978 57.5645L86.5154 76.7331L66.4583 88.3072V111.466L33.2407 92.2814V69.1386L53.2978 57.5645Z" fill="#FBAC32"/>
+	<path d="M139.789 69.1386V92.2814L106.57 111.464V88.3072L86.5154 76.7331L119.732 57.5645L139.789 69.1386Z" fill="#FBAC32"/>
+	<path d="M86.5126 123.047L106.57 111.464V149.819L86.5153 161.402L66.4583 149.819V111.466L86.5126 123.047Z" fill="#FBAC32"/>
+	<path d="M106.57 88.3072V111.468L86.5153 123.049L66.4583 111.465V88.3072L86.5153 76.7345L106.57 88.3072Z" fill="#F79426"/>
+	<path d="M285.429 94.4414C285.429 100.967 284.577 106.548 282.872 111.185C281.168 115.821 278.719 119.61 275.53 122.542C272.342 125.473 268.465 127.63 263.901 129.001C259.336 130.377 253.899 131.065 247.594 131.065H230.605C229.393 131.065 228.376 130.705 227.555 129.992C226.728 129.278 226.317 128.113 226.317 126.5V64.4722C226.317 62.86 226.728 61.6945 227.555 60.9808C228.381 60.2671 229.398 59.9077 230.605 59.9077H248.862C255.203 59.9077 260.584 60.6522 265 62.136C269.415 63.6199 273.138 65.8225 276.162 68.7337C279.186 71.65 281.486 75.2492 283.062 79.5415C284.639 83.8287 285.429 88.7988 285.429 94.4466V94.4414ZM270.473 94.9343C270.473 91.561 270.078 88.4291 269.292 85.5333C268.501 82.6375 267.238 80.1268 265.498 78.0012C263.757 75.8756 261.519 74.2172 258.787 73.026C256.056 71.8348 252.472 71.2392 248.036 71.2392H240.724V119.631H248.256C252.215 119.631 255.552 119.117 258.263 118.09C260.974 117.063 263.239 115.518 265.056 113.444C266.874 111.375 268.229 108.797 269.128 105.716C270.026 102.636 270.473 99.0469 270.473 94.9395V94.9343Z" />
+	<path d="M369.849 125.674C370.29 126.993 370.562 128.041 370.675 128.806C370.783 129.576 370.639 130.151 370.234 130.536C369.828 130.921 369.114 131.157 368.087 131.25C367.061 131.342 365.649 131.388 363.852 131.388C362.055 131.388 360.525 131.363 359.482 131.306C358.44 131.25 357.639 131.142 357.09 130.978C356.54 130.813 356.155 130.582 355.934 130.29C355.714 129.997 355.529 129.612 355.385 129.134L350.6 114.835H323.875L319.368 128.749C319.219 129.263 319.029 129.694 318.792 130.043C318.551 130.392 318.171 130.669 317.637 130.87C317.103 131.07 316.354 131.209 315.383 131.28C314.413 131.352 313.14 131.388 311.563 131.388C309.879 131.388 308.56 131.332 307.605 131.224C306.65 131.116 305.992 130.849 305.623 130.428C305.253 130.007 305.13 129.412 305.238 128.641C305.346 127.871 305.623 126.844 306.064 125.561L328.004 62.4287C328.224 61.8074 328.481 61.2991 328.774 60.9141C329.066 60.529 329.534 60.2363 330.175 60.0361C330.817 59.8358 331.705 59.7075 332.845 59.651C333.98 59.5945 335.484 59.5688 337.353 59.5688C339.515 59.5688 341.24 59.5945 342.523 59.651C343.807 59.7075 344.803 59.8358 345.522 60.0361C346.236 60.2363 346.749 60.5392 347.062 60.9449C347.375 61.3505 347.637 61.8999 347.858 62.593L369.854 125.669L369.849 125.674ZM337.184 73.4881H337.127L327.064 103.735H347.247L337.184 73.4881Z" />
+	<path d="M436.621 65.843C436.621 66.9418 436.575 67.8711 436.482 68.6207C436.39 69.3755 436.241 69.9659 436.041 70.4075C435.84 70.849 435.609 71.1776 435.353 71.3984C435.096 71.6192 434.803 71.727 434.475 71.727H411.211V90.8628H433.042C433.371 90.8628 433.663 90.9552 433.92 91.14C434.177 91.3249 434.408 91.6329 434.608 92.0745C434.808 92.516 434.957 93.1013 435.05 93.8356C435.142 94.5698 435.188 95.4837 435.188 96.5876C435.188 97.6915 435.142 98.6054 435.05 99.3396C434.957 100.074 434.808 100.68 434.608 101.152C434.408 101.63 434.177 101.968 433.92 102.169C433.663 102.369 433.371 102.472 433.042 102.472H411.211V128.98C411.211 129.386 411.103 129.73 410.882 130.023C410.662 130.315 410.266 130.562 409.701 130.767C409.131 130.967 408.392 131.126 407.473 131.234C406.554 131.342 405.383 131.399 403.956 131.399C402.529 131.399 401.399 131.342 400.465 131.234C399.53 131.126 398.786 130.967 398.236 130.767C397.687 130.567 397.292 130.32 397.055 130.023C396.814 129.73 396.696 129.381 396.696 128.98V64.4773C396.696 62.8651 397.107 61.6996 397.933 60.9859C398.76 60.2722 399.777 59.9128 400.983 59.9128H434.475C434.803 59.9128 435.096 60.0155 435.353 60.2158C435.609 60.416 435.835 60.7497 436.041 61.2067C436.241 61.6637 436.39 62.2798 436.482 63.0499C436.575 63.8201 436.621 64.7545 436.621 65.8533V65.843Z" />
+	<path d="M505.206 65.843C505.206 66.9418 505.159 67.8711 505.067 68.6207C504.974 69.3755 504.831 69.9659 504.625 70.4075C504.42 70.849 504.194 71.1776 503.937 71.3984C503.681 71.6192 503.388 71.727 503.059 71.727H479.796V90.8628H501.627C501.955 90.8628 502.248 90.9552 502.505 91.14C502.762 91.3249 502.987 91.6329 503.193 92.0745C503.393 92.516 503.542 93.1013 503.634 93.8356C503.727 94.5698 503.773 95.4837 503.773 96.5876C503.773 97.6915 503.727 98.6054 503.634 99.3396C503.542 100.074 503.393 100.68 503.193 101.152C502.993 101.63 502.762 101.968 502.505 102.169C502.248 102.369 501.955 102.472 501.627 102.472H479.796V128.98C479.796 129.386 479.688 129.73 479.467 130.023C479.246 130.315 478.851 130.562 478.286 130.767C477.716 130.967 476.977 131.126 476.058 131.234C475.139 131.342 473.968 131.399 472.541 131.399C471.113 131.399 469.984 131.342 469.049 131.234C468.115 131.126 467.37 130.967 466.821 130.767C466.272 130.567 465.876 130.32 465.64 130.023C465.399 129.73 465.281 129.381 465.281 128.98V64.4773C465.281 62.8651 465.691 61.6996 466.518 60.9859C467.345 60.2722 468.361 59.9128 469.568 59.9128H503.059C503.388 59.9128 503.681 60.0155 503.937 60.2158C504.194 60.416 504.425 60.7497 504.625 61.2067C504.826 61.6637 504.974 62.2798 505.067 63.0499C505.159 63.8201 505.206 64.7545 505.206 65.8533V65.843Z" />
+	<path d="M597.049 94.6622C597.049 100.567 596.315 105.845 594.852 110.502C593.383 115.159 591.201 119.107 588.31 122.352C585.415 125.597 581.831 128.071 577.559 129.776C573.287 131.481 568.348 132.333 562.741 132.333C557.135 132.333 552.375 131.609 548.252 130.161C544.129 128.713 540.689 126.505 537.942 123.533C535.19 120.565 533.131 116.786 531.755 112.206C530.379 107.626 529.691 102.199 529.691 95.9304C529.691 90.1748 530.426 84.9942 531.889 80.3938C533.357 75.7934 535.534 71.881 538.43 68.6515C541.326 65.4271 544.91 62.9524 549.181 61.2272C553.453 59.5021 558.408 58.6447 564.056 58.6447C569.703 58.6447 574.201 59.3583 578.324 60.7908C582.447 62.2182 585.892 64.4208 588.665 67.3885C591.432 70.3561 593.522 74.1042 594.934 78.6327C596.346 83.1612 597.049 88.501 597.049 94.6622ZM581.872 95.4323C581.872 91.6945 581.579 88.2904 580.994 85.2304C580.409 82.1703 579.407 79.5466 577.995 77.3645C576.583 75.1824 574.704 73.4984 572.358 72.3072C570.012 71.116 567.08 70.5204 563.558 70.5204C560.035 70.5204 557.032 71.1879 554.65 72.528C552.267 73.868 550.342 75.6548 548.873 77.8882C547.405 80.1268 546.373 82.7351 545.767 85.7233C545.161 88.7115 544.858 91.8742 544.858 95.2116C544.858 99.0983 545.151 102.59 545.736 105.686C546.322 108.782 547.312 111.431 548.704 113.634C550.095 115.831 551.964 117.51 554.311 118.665C556.657 119.821 559.609 120.396 563.162 120.396C566.715 120.396 569.688 119.738 572.07 118.414C574.453 117.094 576.378 115.297 577.847 113.023C579.315 110.748 580.347 108.099 580.953 105.075C581.559 102.051 581.862 98.8313 581.862 95.4221L581.872 95.4323Z" />
+	<path d="M685.211 94.4414C685.211 100.967 684.359 106.548 682.654 111.185C680.95 115.821 678.501 119.61 675.312 122.542C672.124 125.473 668.247 127.63 663.683 129.001C659.118 130.377 653.681 131.065 647.376 131.065H630.386C629.175 131.065 628.158 130.705 627.337 129.992C626.51 129.278 626.099 128.113 626.099 126.5V64.4722C626.099 62.86 626.51 61.6945 627.337 60.9808C628.163 60.2671 629.18 59.9077 630.386 59.9077H648.644C654.985 59.9077 660.366 60.6522 664.781 62.136C669.197 63.6199 672.919 65.8225 675.944 68.7337C678.968 71.65 681.268 75.2492 682.844 79.5415C684.42 83.8287 685.211 88.7988 685.211 94.4466V94.4414ZM670.255 94.9343C670.255 91.561 669.859 88.4291 669.074 85.5333C668.283 82.6375 667.02 80.1268 665.28 78.0012C663.539 75.8756 661.3 74.2172 658.569 73.026C655.837 71.8348 652.254 71.2392 647.818 71.2392H640.501V119.631H648.033C651.992 119.631 655.329 119.117 658.04 118.09C660.751 117.063 663.015 115.518 664.833 113.444C666.645 111.375 668.001 108.797 668.904 105.716C669.803 102.636 670.25 99.0469 670.25 94.9395L670.255 94.9343Z" />
+	<path d="M728.499 129.083C728.499 129.453 728.381 129.781 728.14 130.074C727.898 130.367 727.508 130.608 726.959 130.788C726.409 130.972 725.675 131.116 724.761 131.229C723.842 131.337 722.671 131.393 721.244 131.393C719.817 131.393 718.687 131.337 717.753 131.229C716.818 131.121 716.074 130.972 715.524 130.788C714.975 130.603 714.58 130.367 714.344 130.074C714.102 129.781 713.984 129.453 713.984 129.083V61.8844C713.984 61.5199 714.102 61.1913 714.344 60.8935C714.58 60.6008 714.985 60.3647 715.555 60.1798C716.125 59.995 716.865 59.8512 717.784 59.7383C718.697 59.6305 719.853 59.574 721.249 59.574C722.646 59.574 723.852 59.6305 724.766 59.7383C725.68 59.8461 726.414 59.995 726.964 60.1798C727.513 60.3647 727.909 60.6008 728.145 60.8935C728.381 61.1862 728.504 61.5199 728.504 61.8844V129.083H728.499Z" />
+	<path d="M800 125.017C800 126.115 799.954 127.045 799.861 127.794C799.769 128.544 799.63 129.17 799.451 129.663C799.266 130.156 799.04 130.515 798.763 130.736C798.485 130.957 798.167 131.065 797.802 131.065H765.194C763.982 131.065 762.966 130.705 762.144 129.992C761.318 129.278 760.907 128.113 760.907 126.5V61.8844C760.907 61.5199 761.025 61.1913 761.266 60.8935C761.503 60.6008 761.898 60.3647 762.447 60.1798C762.997 59.995 763.741 59.8512 764.676 59.7383C765.61 59.6305 766.776 59.574 768.167 59.574C769.558 59.574 770.77 59.6305 771.684 59.7383C772.598 59.8461 773.332 59.995 773.882 60.1798C774.431 60.3647 774.826 60.6008 775.062 60.8935C775.299 61.1862 775.422 61.5199 775.422 61.8844V119.133H797.802C798.167 119.133 798.49 119.235 798.763 119.435C799.04 119.636 799.266 119.969 799.451 120.426C799.635 120.883 799.769 121.489 799.861 122.239C799.954 122.988 800 123.918 800 125.017Z" />
+</svg>			
 
-<img [src]="flowerPath" alt="Daffodil Logo" *ngIf="!isFull()"/>  
+<svg class="daff-branding-logo--icon" *ngIf="!isFull()" viewBox="0 0 200 208" width="100%">
+	<path d="M199.972 102.081V173.178L138.409 208.729L76.8384 173.17V102.081L138.409 66.5555L199.972 102.081Z" fill="#FFCC67"/>
+	<path d="M161.596 35.5571V106.654L100.033 142.205L38.4624 106.646V35.5571L100.033 0.0314941L161.596 35.5571Z" fill="#FFCC67"/>
+	<path d="M123.162 102.081V173.178L61.5988 208.729L0.0283203 173.17V102.081L61.5988 66.5555L123.162 102.081Z" fill="#FFCC67"/>
+	<path d="M61.6224 66.5555L100.028 88.7182L76.8385 102.1V128.876L38.4326 106.695V79.9374L61.6224 66.5555Z" fill="#FBAC32"/>
+	<path d="M161.622 79.9374V106.695L123.215 128.873V102.1L100.028 88.7182L138.433 66.5555L161.622 79.9374Z" fill="#FBAC32"/>
+	<path d="M100.025 142.266L123.215 128.873V173.219L100.028 186.612L76.8384 173.219V128.876L100.025 142.266Z" fill="#FBAC32"/>
+	<path d="M123.215 102.1V128.878L100.028 142.268L76.8384 128.875V102.1L100.028 88.7197L123.215 102.1Z" fill="#F79426"/>
+</svg>

libs/branding/src/lib/logo/logo.component.scss

@@ -1,42 +1,4 @@
-// Forumala: $daff + $flower + $dil + 2*$spacer = 100%;
-
-$logo-daff-width: 47%;
-$logo-flower-width: 16%;
-$logo-dil-width: 30%;
-$logo-spacer-width: 3.5%;
-
 :host {
 	display: block;
 	width: 100%;
 }
-
-.daff-logo {
-	&--full {
-		display: flex;
-		align-items: center;
-
-		.spacer {
-			flex: 1 0 $logo-spacer-width;
-		}
-
-		.daff {
-			flex: 1 0 $logo-daff-width;
-		}
-
-		.flower {
-			display: block;
-			max-width: 100%;
-			min-width: 0;
-			flex: 1 0 $logo-flower-width;
-		}
-
-		.dil {
-			flex: 1 0 $logo-dil-width;
-		}
-
-		.daff,
-		.dil {
-			width: 100%;
-		}
-	}
-}

libs/branding/src/lib/logo/logo.component.spec.ts

@@ -1,29 +1,52 @@
+import {
+  Component,
+  DebugElement,
+} from '@angular/core';
 import {
   waitForAsync,
   ComponentFixture,
   TestBed,
 } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
 
 import { DaffLogoComponent } from './logo.component';
 
+@Component({
+  template: `<daff-branding-logo></daff-branding-logo>`,
+})
+class WrapperComponent {}
+
 describe('DaffLogoComponent', () => {
+  let wrapper: WrapperComponent;
   let component: DaffLogoComponent;
-  let fixture: ComponentFixture<DaffLogoComponent>;
+  let de: DebugElement;
+  let fixture: ComponentFixture<WrapperComponent>;
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [ DaffLogoComponent ],
+      declarations: [
+        WrapperComponent,
+        DaffLogoComponent,
+      ],
     })
       .compileComponents();
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(DaffLogoComponent);
-    component = fixture.componentInstance;
+    fixture = TestBed.createComponent(WrapperComponent);
+    wrapper = fixture.debugElement.componentInstance;
+    de = fixture.debugElement.query(By.css('daff-branding-logo'));
+    component = de.componentInstance;
     fixture.detectChanges();
   });
 
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should add a class of "daff-branding-logo" to the host element', () => {
+    expect(de.classes).toEqual(jasmine.objectContaining({
+      'daff-branding-logo': true,
+    }));
+  });
 });