Merge pull request #475 from digitalnsw/update/support-list-svg

Adds svg support to the Support list component

src/components/header/index.hbs

@@ -14,9 +14,9 @@ meta-index: true
 ---
 
 <h3>Masterbrand with descriptor</h3>
-{{#>_docs-example}}{{>_header header-title="digital.nsw"}}{{/_docs-example}}
+{{#>_docs-example}}{{>_header header-title="Digital NSW"}}{{/_docs-example}}
 <h3>Masterbrand with secondary descriptor</h3>
-{{#>_docs-example}}{{>_header header-title="digital.nsw" header-description="Department of Customer Service" header-id="0"}}{{/_docs-example}}
+{{#>_docs-example}}{{>_header header-title="Digital NSW" header-description="Department of Customer Service" header-id="0"}}{{/_docs-example}}
 <h3>Co-brand - mobile horizontal stacked</h3>
 {{#>_docs-example}}{{>_header model.square header-id="2" header-inline="true"}}{{/_docs-example}}
 <h3>Co-brand - mobile vertical stacked</h3>

src/components/support-list/_support-list.hbs

@@ -44,7 +44,11 @@
             {{/if}}
           {{/unless}}
           {{#each logos}}
-            <img role="img" src="{{url}}" {{#if alt}}alt="{{alt}}"{{/if}} class="nsw-support-list__logo-grid__item">
+            {{#starts-with url "<svg"}}
+              {{{url}}}
+            {{else}}
+              <img role="img" src="{{url}}" {{#if alt}}alt="{{alt}}"{{/if}} class="nsw-support-list__logo-grid__item">
+            {{/starts-with}}
           {{/each}}
         </div>
       {{/if}}

src/components/support-list/_support-list.scss

@@ -91,7 +91,8 @@
       gap: rem(40px);
     }
 
-    &__item {
+    &__item,
+    svg {
       height: rem(48px);
 
       @include breakpoint($nsw-desktop-breakpoint) {

src/components/support-list/json/support-list-1.json

@@ -24,7 +24,7 @@
   ],
   "logos": [
     {
-      "url": "/assets/images/support-list-logo.png",
+      "url": "<svg width='161' height='77' viewBox='0 0 161 77' fill='none' xmlns='http://www.w3.org/2000/svg'><rect width='160' height='76' transform='translate(0.0224609 0.34668)' fill='#CDD3D6'/> <path d='M36.7205 44.5067C36.1551 44.5067 35.6191 44.44 35.1125 44.3067C34.6058 44.168 34.1445 43.9627 33.7285 43.6907C33.3178 43.4187 32.9765 43.0827 32.7045 42.6827C32.4378 42.2773 32.2698 41.808 32.2005 41.2747H33.7525C33.8485 41.712 34.0378 42.08 34.3205 42.3787C34.6085 42.6773 34.9631 42.9013 35.3845 43.0507C35.8111 43.2 36.2778 43.2747 36.7845 43.2747C37.2751 43.2747 37.7258 43.1973 38.1365 43.0427C38.5525 42.888 38.8858 42.664 39.1365 42.3707C39.3871 42.072 39.5125 41.7147 39.5125 41.2987C39.5125 40.84 39.3631 40.472 39.0645 40.1947C38.7658 39.912 38.3045 39.6853 37.6805 39.5147L35.2965 38.8987C34.7578 38.7653 34.2805 38.5787 33.8645 38.3387C33.4538 38.0933 33.1311 37.7733 32.8965 37.3787C32.6618 36.9787 32.5445 36.4827 32.5445 35.8907C32.5445 35.2347 32.7258 34.664 33.0885 34.1787C33.4511 33.688 33.9418 33.3093 34.5605 33.0427C35.1845 32.7707 35.8885 32.6347 36.6725 32.6347C37.5791 32.6347 38.3418 32.792 38.9605 33.1067C39.5845 33.4213 40.0565 33.8347 40.3765 34.3467C40.6965 34.8587 40.8565 35.4053 40.8565 35.9867H39.3365C39.2885 35.4587 39.1338 35.0427 38.8725 34.7387C38.6111 34.4293 38.2858 34.208 37.8965 34.0747C37.5071 33.936 37.0831 33.8667 36.6245 33.8667C35.7978 33.8667 35.1711 34.056 34.7445 34.4347C34.3231 34.808 34.1125 35.2533 34.1125 35.7707C34.1125 36.2453 34.2645 36.6187 34.5685 36.8907C34.8725 37.1627 35.3205 37.3733 35.9125 37.5227L38.2325 38.1227C38.9205 38.2827 39.4671 38.5147 39.8725 38.8187C40.2831 39.1227 40.5765 39.4773 40.7525 39.8827C40.9338 40.2827 41.0245 40.7173 41.0245 41.1867C41.0245 41.8267 40.8458 42.3973 40.4885 42.8987C40.1311 43.4 39.6298 43.7947 38.9845 44.0827C38.3445 44.3653 37.5898 44.5067 36.7205 44.5067ZM46.2552 44.5067C45.8232 44.5013 45.4152 44.44 45.0312 44.3227C44.6525 44.2 44.3165 44.0213 44.0232 43.7867C43.7299 43.552 43.4979 43.2613 43.3272 42.9147C43.1619 42.5627 43.0792 42.1547 43.0792 41.6907V36.0747H44.5592V41.5387C44.5592 42.0773 44.7245 42.5147 45.0552 42.8507C45.3912 43.1867 45.8952 43.3547 46.5672 43.3547C47.1752 43.3547 47.6632 43.1973 48.0312 42.8827C48.4045 42.5627 48.5912 42.088 48.5912 41.4587V36.0747H50.0632V44.3467H48.8872L48.7352 42.7627C48.6339 43.1787 48.4605 43.5147 48.2152 43.7707C47.9752 44.0267 47.6845 44.216 47.3432 44.3387C47.0072 44.456 46.6445 44.512 46.2552 44.5067ZM52.6058 46.9227V36.0747H54.0778L54.0938 37.5147C54.1898 37.344 54.3125 37.1653 54.4618 36.9787C54.6165 36.792 54.8032 36.6187 55.0218 36.4587C55.2458 36.2987 55.5045 36.168 55.7978 36.0667C56.0965 35.9653 56.4352 35.9147 56.8138 35.9147C57.4752 35.9147 58.0565 36.0667 58.5578 36.3707C59.0645 36.6693 59.4592 37.128 59.7418 37.7467C60.0245 38.3653 60.1658 39.1493 60.1658 40.0987C60.1658 41.048 60.0272 41.8507 59.7498 42.5067C59.4778 43.1573 59.0832 43.6533 58.5658 43.9947C58.0485 44.336 57.4245 44.5067 56.6938 44.5067C56.3258 44.5067 55.9978 44.4533 55.7098 44.3467C55.4272 44.2453 55.1792 44.112 54.9658 43.9467C54.7578 43.776 54.5818 43.5947 54.4378 43.4027C54.2992 43.2107 54.1845 43.0267 54.0938 42.8507V46.9227H52.6058ZM56.4138 43.3547C57.0965 43.3547 57.6538 43.096 58.0858 42.5787C58.5178 42.056 58.7338 41.2453 58.7338 40.1467C58.7338 39.2027 58.5365 38.4533 58.1418 37.8987C57.7472 37.344 57.1712 37.0667 56.4138 37.0667C55.6458 37.0667 55.0645 37.352 54.6698 37.9227C54.2752 38.488 54.0778 39.2293 54.0778 40.1467C54.0778 40.7387 54.1658 41.2773 54.3418 41.7627C54.5178 42.248 54.7792 42.6347 55.1258 42.9227C55.4725 43.2107 55.9018 43.3547 56.4138 43.3547ZM62.1371 46.9227V36.0747H63.6091L63.6251 37.5147C63.7211 37.344 63.8438 37.1653 63.9931 36.9787C64.1478 36.792 64.3344 36.6187 64.5531 36.4587C64.7771 36.2987 65.0358 36.168 65.3291 36.0667C65.6278 35.9653 65.9664 35.9147 66.3451 35.9147C67.0064 35.9147 67.5878 36.0667 68.0891 36.3707C68.5958 36.6693 68.9904 37.128 69.2731 37.7467C69.5558 38.3653 69.6971 39.1493 69.6971 40.0987C69.6971 41.048 69.5584 41.8507 69.2811 42.5067C69.0091 43.1573 68.6144 43.6533 68.0971 43.9947C67.5798 44.336 66.9558 44.5067 66.2251 44.5067C65.8571 44.5067 65.5291 44.4533 65.2411 44.3467C64.9584 44.2453 64.7104 44.112 64.4971 43.9467C64.2891 43.776 64.1131 43.5947 63.9691 43.4027C63.8304 43.2107 63.7158 43.0267 63.6251 42.8507V46.9227H62.1371ZM65.9451 43.3547C66.6278 43.3547 67.1851 43.096 67.6171 42.5787C68.0491 42.056 68.2651 41.2453 68.2651 40.1467C68.2651 39.2027 68.0678 38.4533 67.6731 37.8987C67.2784 37.344 66.7024 37.0667 65.9451 37.0667C65.1771 37.0667 64.5958 37.352 64.2011 37.9227C63.8064 38.488 63.6091 39.2293 63.6091 40.1467C63.6091 40.7387 63.6971 41.2773 63.8731 41.7627C64.0491 42.248 64.3104 42.6347 64.6571 42.9227C65.0038 43.2107 65.4331 43.3547 65.9451 43.3547ZM74.9803 44.5067C74.2177 44.5067 73.551 44.344 72.9803 44.0187C72.415 43.688 71.975 43.2053 71.6603 42.5707C71.3457 41.936 71.1883 41.16 71.1883 40.2427C71.1883 39.3787 71.335 38.6213 71.6283 37.9707C71.9217 37.32 72.351 36.816 72.9163 36.4587C73.4817 36.096 74.1723 35.9147 74.9883 35.9147C75.751 35.9147 76.4123 36.0827 76.9723 36.4187C77.5323 36.7493 77.967 37.2373 78.2763 37.8827C78.591 38.528 78.7483 39.3147 78.7483 40.2427C78.7483 41.0853 78.6043 41.8267 78.3163 42.4667C78.0283 43.1067 77.6043 43.608 77.0443 43.9707C76.4897 44.328 75.8017 44.5067 74.9803 44.5067ZM74.9883 43.3387C75.479 43.3387 75.895 43.2133 76.2363 42.9627C76.5777 42.712 76.8363 42.352 77.0123 41.8827C77.1937 41.4133 77.2843 40.856 77.2843 40.2107C77.2843 39.6187 77.2043 39.088 77.0443 38.6187C76.8897 38.144 76.6443 37.768 76.3083 37.4907C75.9723 37.2133 75.5323 37.0747 74.9883 37.0747C74.487 37.0747 74.063 37.2 73.7163 37.4507C73.3697 37.696 73.1057 38.0533 72.9243 38.5227C72.7483 38.992 72.6603 39.5547 72.6603 40.2107C72.6603 40.792 72.7377 41.32 72.8923 41.7947C73.0523 42.2693 73.303 42.6453 73.6443 42.9227C73.991 43.2 74.439 43.3387 74.9883 43.3387ZM80.7152 44.3467V36.0747H82.1232V37.6667C82.2619 37.272 82.4565 36.9467 82.7072 36.6907C82.9579 36.4293 83.2432 36.2347 83.5632 36.1067C83.8885 35.9787 84.2245 35.9147 84.5712 35.9147C84.6939 35.9147 84.8139 35.9227 84.9312 35.9387C85.0485 35.9547 85.1392 35.9813 85.2032 36.0187V37.4507C85.1232 37.4133 85.0192 37.3893 84.8912 37.3787C84.7685 37.3627 84.6645 37.3547 84.5792 37.3547C84.2485 37.3333 83.9392 37.3547 83.6512 37.4187C83.3632 37.4773 83.1099 37.5813 82.8912 37.7307C82.6725 37.88 82.4992 38.0773 82.3712 38.3227C82.2485 38.5627 82.1872 38.856 82.1872 39.2027V44.3467H80.7152ZM89.7628 44.3867C89.1922 44.3867 88.7495 44.3093 88.4348 44.1547C88.1202 44 87.8988 43.7707 87.7708 43.4667C87.6482 43.1627 87.5868 42.7893 87.5868 42.3467V37.1547H86.2428V36.0747H87.6268L87.9868 33.6667H89.0748V36.0667H90.9388V37.1547H89.0748V42.2987C89.0748 42.592 89.1042 42.808 89.1628 42.9467C89.2268 43.08 89.3308 43.1653 89.4748 43.2027C89.6188 43.24 89.8215 43.2587 90.0828 43.2587H90.9868V44.2507C90.8855 44.288 90.7308 44.32 90.5228 44.3467C90.3202 44.3733 90.0668 44.3867 89.7628 44.3867ZM98.9282 44.4507C98.4802 44.4507 98.1175 44.3893 97.8402 44.2667C97.5682 44.144 97.3575 43.9787 97.2082 43.7707C97.0642 43.5627 96.9655 43.3253 96.9122 43.0587C96.8642 42.7867 96.8402 42.5067 96.8402 42.2187V32.4587H98.2962V42.0747C98.2962 42.4907 98.3762 42.8027 98.5362 43.0107C98.7015 43.2187 98.9309 43.3333 99.2242 43.3547L99.6722 43.3627V44.3227C99.5495 44.36 99.4215 44.3893 99.2882 44.4107C99.1549 44.4373 99.0349 44.4507 98.9282 44.4507ZM104.59 44.5067C103.827 44.5067 103.16 44.344 102.59 44.0187C102.024 43.688 101.584 43.2053 101.27 42.5707C100.955 41.936 100.798 41.16 100.798 40.2427C100.798 39.3787 100.944 38.6213 101.238 37.9707C101.531 37.32 101.96 36.816 102.526 36.4587C103.091 36.096 103.782 35.9147 104.598 35.9147C105.36 35.9147 106.022 36.0827 106.582 36.4187C107.142 36.7493 107.576 37.2373 107.886 37.8827C108.2 38.528 108.358 39.3147 108.358 40.2427C108.358 41.0853 108.214 41.8267 107.926 42.4667C107.638 43.1067 107.214 43.608 106.654 43.9707C106.099 44.328 105.411 44.5067 104.59 44.5067ZM104.598 43.3387C105.088 43.3387 105.504 43.2133 105.846 42.9627C106.187 42.712 106.446 42.352 106.622 41.8827C106.803 41.4133 106.894 40.856 106.894 40.2107C106.894 39.6187 106.814 39.088 106.654 38.6187C106.499 38.144 106.254 37.768 105.918 37.4907C105.582 37.2133 105.142 37.0747 104.598 37.0747C104.096 37.0747 103.672 37.2 103.326 37.4507C102.979 37.696 102.715 38.0533 102.534 38.5227C102.358 38.992 102.27 39.5547 102.27 40.2107C102.27 40.792 102.347 41.32 102.502 41.7947C102.662 42.2693 102.912 42.6453 103.254 42.9227C103.6 43.2 104.048 43.3387 104.598 43.3387ZM113.758 47.0827C112.462 47.0827 111.451 46.8933 110.726 46.5147C110.001 46.1413 109.638 45.6053 109.638 44.9067C109.638 44.608 109.707 44.3547 109.846 44.1467C109.985 43.9333 110.15 43.7573 110.342 43.6187C110.534 43.48 110.713 43.3707 110.878 43.2907C111.043 43.2053 111.153 43.144 111.206 43.1067C111.11 43.0533 110.995 42.9867 110.862 42.9067C110.729 42.8267 110.609 42.72 110.502 42.5867C110.401 42.4533 110.35 42.28 110.35 42.0667C110.35 41.8053 110.473 41.5653 110.718 41.3467C110.963 41.128 111.329 40.9653 111.814 40.8587C111.329 40.6133 110.95 40.288 110.678 39.8827C110.406 39.4773 110.27 39.0373 110.27 38.5627C110.27 38.0293 110.414 37.5653 110.702 37.1707C110.99 36.776 111.403 36.4747 111.942 36.2667C112.481 36.0533 113.123 35.9467 113.87 35.9467C114.409 35.9467 114.859 36.0107 115.222 36.1387C115.59 36.2613 115.931 36.4373 116.246 36.6667C116.331 36.6293 116.467 36.5733 116.654 36.4987C116.841 36.4187 117.043 36.3333 117.262 36.2427C117.486 36.152 117.694 36.0667 117.886 35.9867C118.083 35.9013 118.241 35.8373 118.358 35.7947L118.35 37.1627L116.902 37.4347C116.987 37.6053 117.054 37.792 117.102 37.9947C117.15 38.1973 117.174 38.3867 117.174 38.5627C117.174 39.048 117.046 39.488 116.79 39.8827C116.539 40.2773 116.158 40.592 115.646 40.8267C115.134 41.0613 114.494 41.1787 113.726 41.1787C113.662 41.1787 113.579 41.1787 113.478 41.1787C113.382 41.1733 113.299 41.168 113.23 41.1627C112.665 41.1787 112.275 41.2427 112.062 41.3547C111.854 41.4613 111.75 41.5813 111.75 41.7147C111.75 41.8693 111.87 41.976 112.11 42.0347C112.35 42.0933 112.755 42.144 113.326 42.1867C113.534 42.1973 113.79 42.2107 114.094 42.2267C114.403 42.2427 114.747 42.264 115.126 42.2907C115.99 42.344 116.657 42.5653 117.126 42.9547C117.595 43.344 117.83 43.8693 117.83 44.5307C117.83 45.2827 117.494 45.896 116.822 46.3707C116.155 46.8453 115.134 47.0827 113.758 47.0827ZM114.022 46.1307C114.785 46.1307 115.369 46.016 115.774 45.7867C116.185 45.5573 116.39 45.2107 116.39 44.7467C116.39 44.416 116.265 44.1467 116.014 43.9387C115.763 43.7253 115.385 43.6027 114.878 43.5707L112.558 43.4187C112.35 43.408 112.134 43.4613 111.91 43.5787C111.686 43.6907 111.497 43.848 111.342 44.0507C111.187 44.2533 111.11 44.4827 111.11 44.7387C111.11 45.176 111.347 45.5173 111.822 45.7627C112.297 46.008 113.03 46.1307 114.022 46.1307ZM113.774 40.2267C114.366 40.2267 114.843 40.088 115.206 39.8107C115.574 39.5333 115.758 39.1227 115.758 38.5787C115.758 38.0187 115.574 37.592 115.206 37.2987C114.843 37.0053 114.366 36.8587 113.774 36.8587C113.166 36.8587 112.675 37.008 112.302 37.3067C111.934 37.6 111.75 38.024 111.75 38.5787C111.75 39.1013 111.926 39.5067 112.278 39.7947C112.635 40.0827 113.134 40.2267 113.774 40.2267ZM123.262 44.5067C122.499 44.5067 121.832 44.344 121.262 44.0187C120.696 43.688 120.256 43.2053 119.942 42.5707C119.627 41.936 119.47 41.16 119.47 40.2427C119.47 39.3787 119.616 38.6213 119.91 37.9707C120.203 37.32 120.632 36.816 121.198 36.4587C121.763 36.096 122.454 35.9147 123.27 35.9147C124.032 35.9147 124.694 36.0827 125.254 36.4187C125.814 36.7493 126.248 37.2373 126.558 37.8827C126.872 38.528 127.03 39.3147 127.03 40.2427C127.03 41.0853 126.886 41.8267 126.598 42.4667C126.31 43.1067 125.886 43.608 125.326 43.9707C124.771 44.328 124.083 44.5067 123.262 44.5067ZM123.27 43.3387C123.76 43.3387 124.176 43.2133 124.518 42.9627C124.859 42.712 125.118 42.352 125.294 41.8827C125.475 41.4133 125.566 40.856 125.566 40.2107C125.566 39.6187 125.486 39.088 125.326 38.6187C125.171 38.144 124.926 37.768 124.59 37.4907C124.254 37.2133 123.814 37.0747 123.27 37.0747C122.768 37.0747 122.344 37.2 121.998 37.4507C121.651 37.696 121.387 38.0533 121.206 38.5227C121.03 38.992 120.942 39.5547 120.942 40.2107C120.942 40.792 121.019 41.32 121.174 41.7947C121.334 42.2693 121.584 42.6453 121.926 42.9227C122.272 43.2 122.72 43.3387 123.27 43.3387Z' fill='black'/></svg>",
       "alt": "Logo 1"
     },
     {