feat(stories): add esa logo to stories (#891)

ubilabs · Apr 14, 2021 · a00b8bd · a00b8bd
1 parent 6c20a40
commit a00b8bd
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 0 deletions.
diff --git a/src/scripts/components/main/icons/esa-logo-short.tsx b/src/scripts/components/main/icons/esa-logo-short.tsx
@@ -0,0 +1,36 @@
+import React, {FunctionComponent} from 'react';
+
+export const EsaLogoShort: FunctionComponent = () => (
+  <svg
+    width="79"
+    height="29"
+    viewBox="0 0 79 29"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg">
+    <g opacity="0.4" clipPath="url(#clip0)">
+      <path
+        className="hideText"
+        d="M44.7394 9.22713C43.1537 7.4905 40.7073 6.7329 38.2163 7.08908C35.9515 7.44563 34.3211 8.69218 33.1884 10.4727C32.5991 11.4967 32.1921 12.6543 32.0102 13.7672C31.6477 16.4835 32.418 21.0232 37.2658 22.804C39.5296 23.6506 42.3843 23.3386 44.5581 21.7804C45.781 20.8899 47.0055 18.8865 47.0948 17.6402H43.0638C42.9272 18.1749 42.6108 18.8865 41.8857 19.4211C40.2543 20.578 38.3972 19.8225 37.5818 19.2423C36.3593 18.3519 35.9515 16.8831 35.9062 14.7909C35.9062 13.6786 36.2231 11.8981 37.1748 11.0514C38.2163 10.2053 39.4848 9.98368 40.7073 10.3392C42.0223 10.7402 43.0183 12.1645 42.9272 13.455H37.2201V16.2607H47.0948C47.1858 15.2361 47.0055 14.2574 46.8237 13.322C46.5068 11.9426 45.6461 10.2501 44.7394 9.22713Z"
+        fill="white"
+      />
+      <path
+        className="hideText"
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M71.2319 7.04284C70.0988 7.08663 68.941 7.26998 67.99 7.62617C65.9969 8.42758 64.9992 10.3339 64.9992 12.3377H68.6064C68.5154 11.3141 69.2977 10.3836 70.0218 10.1166C70.3401 9.984 70.7781 9.89219 71.2319 9.89219C72.1372 9.84831 73.0632 10.0759 73.6975 10.655C74.1058 11.055 74.2213 11.5794 74.0856 12.1582C73.858 13.0932 72.8175 13.4153 71.2319 13.639C70.915 13.6904 70.5696 13.728 70.2026 13.768C69.9396 13.7965 69.6655 13.8263 69.3826 13.8634C67.4806 14.086 64.7648 15.0079 64.1317 17.7223C63.9052 18.7915 64.0779 20.7624 65.7527 22.0524C66.8853 22.899 68.4799 23.2872 69.7022 23.2416C70.2463 23.2416 70.8011 23.1963 71.2547 23.107C72.5212 22.8405 73.5013 22.2695 74.4509 21.514C74.4965 21.7366 74.7267 22.5702 74.9075 22.7929H78.7201C78.1945 21.7577 78.2073 20.3053 78.2159 19.3418L78.2162 19.3213C78.2171 19.2156 78.2179 19.116 78.2179 19.0236V14.2223C78.2139 14.1131 78.2103 14.0039 78.207 13.8947L78.2016 13.7263V13.7245C78.1677 12.6442 78.1338 11.5688 77.8982 10.5653C77.6252 9.4074 76.594 7.48912 73.2409 7.08771C72.6074 7.04391 71.9107 7.04284 71.2319 7.04284ZM74.3146 15.1911L74.3149 15.2143C74.3199 15.8831 74.3357 17.9972 74.1313 18.4403C73.7229 19.5077 72.5899 20.1261 71.2319 20.2576C70.9615 20.3014 70.6561 20.3462 70.3415 20.3024C69.4354 20.3024 68.6726 19.8709 68.3553 19.2031C67.9925 18.5352 68.219 17.8545 68.4466 17.4531C68.9747 16.5451 69.886 16.361 71.1446 16.1067L71.2547 16.0845C71.6607 16.0407 72.1047 15.9485 72.6017 15.8153C73.5445 15.6048 73.7897 15.4288 74.235 15.109L74.3139 15.0524C74.3139 15.0832 74.3143 15.1303 74.3146 15.1911Z"
+        fill="white"
+      />
+      <path
+        className="hideText"
+        d="M55.7058 13.2514C55.9488 13.2878 56.1915 13.324 56.4272 13.3669L56.5526 13.3883C58.6014 13.7379 60.7968 14.1124 61.7727 15.7701C62.906 17.7279 62.2713 19.9557 61.5468 20.8461C61.0485 21.4702 60.4589 22.0468 59.6895 22.4938C58.3749 23.2055 56.1551 23.4736 53.9812 23.116C51.988 22.8041 50.6288 21.826 49.8593 20.6236C49.2697 19.6892 48.9076 18.8865 48.9076 17.7279H52.4409C52.6674 18.9759 53.1661 19.9119 54.344 20.266C55.7476 20.6674 57.5141 20.578 58.3749 19.4667C58.6925 19.0653 58.7381 18.4869 58.6014 17.9961C58.3749 17.2407 57.696 17.0618 56.3371 16.7954C56.1034 16.7422 55.802 16.6874 55.4569 16.6245C54.0622 16.3707 51.954 15.9871 50.7187 15.058C49.4956 14.1228 48.8612 12.343 49.4954 10.3833C50.2214 8.2922 52.3952 7.35626 54.0276 7.13432C57.0611 6.68911 59.5075 7.80211 60.5498 8.86997C61.3649 9.71617 61.9082 11.0515 61.8626 12.343H58.5112C58.4669 11.9426 58.4213 11.5419 58.2394 11.1854C57.832 10.295 56.8802 9.76005 55.8387 9.76005C54.6614 9.67164 53.4379 9.98369 52.9393 10.9628C52.7583 11.3194 52.7583 11.9426 53.0758 12.2992C53.6604 12.9453 54.6877 13.099 55.7058 13.2514Z"
+        fill="white"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M0.440484 11.2928C2.01058 5.20851 7.41673 1.08714 13.4764 0.770389C14.8749 0.697297 16.317 0.818175 17.7456 1.17424C24.6119 2.88743 29.0158 9.24132 28.4073 15.9595C28.4258 14.8146 28.2441 10.662 24.9371 8.33125C21.0788 5.6099 15.5205 7.50224 13.933 11.562C12.3436 15.6216 13.5125 21.423 19.8916 23.5877C21.7966 24.2327 23.5516 24.2093 25.0512 23.8569C21.6407 27.7534 16.1507 29.6489 10.7368 28.2993C3.11695 26.3991 -1.49258 18.7819 0.440484 11.2928ZM8.36251 14.905C8.36251 13.9114 7.54779 13.1101 6.5361 13.1101C5.52516 13.1101 4.68687 13.9114 4.68687 14.905C4.68687 15.8991 5.52516 16.6999 6.5361 16.6999C7.54779 16.6999 8.36251 15.8991 8.36251 14.905ZM24.2383 13.481H18.4958V16.2684H28.3904C28.3241 16.859 28.2189 17.4532 28.0715 18.0475C27.6132 18.7819 26.6608 19.9528 25.0087 20.4838C22.5127 21.2866 18.4958 20.575 17.4502 17.1167C16.612 13.6591 18.0409 11.2497 19.1536 10.6699C19.1536 10.6699 21.4227 9.30938 23.4428 11.3608C24.4655 12.6326 24.2383 13.481 24.2383 13.481Z"
+        fill="white"
+      />
+    </g>
+  </svg>
+);
diff --git a/src/scripts/components/stories/header/header.styl b/src/scripts/components/stories/header/header.styl
@@ -5,10 +5,14 @@
   flex-shrink: 0
   justify-content: space-between
   align-items: center
+  padding-left: emCalc(20px)
   height: $headerHeight
   background-color: $darkGrey1
   font-family: NotesEsa
 
+.logo
+  width: fit-content
+
 .backButton
   flex-grow: 1
   padding-left: emCalc(20px)
@@ -41,3 +45,7 @@
 
   svg
     padding-left: emCalc(15px)
+
+@media screen and (max-width: 480px)
+  .logo
+    width: emCalc(12px)
diff --git a/src/scripts/components/stories/header/header.tsx b/src/scripts/components/stories/header/header.tsx
@@ -2,6 +2,7 @@ import React, {FunctionComponent} from 'react';
 
 import Button from '../../main/button/button';
 import {ArrowBackIcon} from '../../main/icons/arrow-back-icon';
+import {EsaLogoShort} from '../../main/icons/esa-logo-short';
 
 import styles from './header.styl';
 
@@ -18,6 +19,9 @@ const Header: FunctionComponent<Props> = ({
   children
 }) => (
   <div className={styles.header}>
+    <div className={styles.logo}>
+      <EsaLogoShort />
+    </div>
     <Button
       className={styles.backButton}
       icon={ArrowBackIcon}