💄(frontend) add a chevron icon to the language picker

Our language picker looks just like a link or a regular blob of text, in bold. We need to give users a hint that they can click it to open a menu. This is why we're adding a chevron icon to our html sprite and placing it next to the text of the language picker button.
openfun · Aug 28, 2020 · 94bf79e · 94bf79e
1 parent 0829955
commit 94bf79e
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 0 deletions.
diff --git a/src/frontend/js/components/LanguageSelector/_styles.scss b/src/frontend/js/components/LanguageSelector/_styles.scss
@@ -8,6 +8,12 @@
     font-size: 1rem;
     font-weight: 700;
     color: inherit;
+
+    &__icon {
+      width: 1rem;
+      height: 1rem;
+      margin-left: 0.5rem;
+    }
   }
 
   &__list {

diff --git a/src/frontend/js/components/LanguageSelector/index.tsx b/src/frontend/js/components/LanguageSelector/index.tsx
@@ -67,6 +67,13 @@ export const LanguageSelector: React.FC<LanguageSelectorProps> = ({
       </label>
       <button {...getToggleButtonProps()} className="language-selector__button">
         {selectedItem?.name || intl.formatMessage(messages.languages)}
+        <svg
+          role="img"
+          className="language-selector__button__icon"
+          aria-hidden="true"
+        >
+          <use xlinkHref="#icon-chevron-down" />
+        </svg>
       </button>
       <ul
         {...getMenuProps()}

diff --git a/src/frontend/scss/components/_footer.scss b/src/frontend/scss/components/_footer.scss
@@ -191,6 +191,10 @@
 
       &__button {
         padding-left: 0;
+
+        &__icon {
+          fill: white;
+        }
       }
 
       &__list {

diff --git a/src/richie/apps/core/templates/richie/icons.html b/src/richie/apps/core/templates/richie/icons.html
@@ -11,6 +11,10 @@
       <path d="M29.973 31.973c1.33.056 2.204-1.317 1.997-2.542-.011-8.239.022-16.48-.017-24.718-.115-1.287-1.465-1.888-2.612-1.724h-7.353c-.07-.845.164-1.754-.167-2.547-.534-.915-2.031-.28-1.83.728v1.818h-7.986c-.07-.844.165-1.753-.166-2.545-.534-.916-2.031-.282-1.83.727v1.818c-2.796.023-5.598-.047-8.39.036C.4 3.214-.131 4.512.027 5.62c.011 8.205-.022 16.412.016 24.616.123 1.338 1.525 1.898 2.703 1.737h27.227zm0-1.999H2.023V4.987h7.986c-.008.728-.146 1.786.802 1.981 1.122.195 1.3-1.065 1.194-1.886.313-.231 1.063-.025 1.536-.095h6.45c-.007.728-.146 1.786.803 1.981 1.121.195 1.3-1.066 1.194-1.886.312-.231 1.062-.025 1.535-.095h6.45v24.987zm-4.991-13.992c1.077-.016 1.043-1.214.998-1.995.019-.72.126-1.789-.791-1.983-.856-.01-1.738-.092-2.581.054-.962.452-.521 1.634-.62 2.463-.195.882.554 1.667 1.45 1.46h1.544zm-7.986 0c1.077-.016 1.043-1.214.999-1.995.016-.72.13-1.782-.785-1.982-.858-.01-1.743-.093-2.588.053-.962.452-.52 1.634-.62 2.463-.195.882.554 1.667 1.45 1.46h1.544zm-7.985 0c1.077-.016 1.043-1.214.998-1.995.017-.72.131-1.782-.785-1.982-.858-.01-1.743-.093-2.588.053-.961.452-.52 1.634-.62 2.463-.194.882.554 1.667 1.45 1.46H9.01zm15.97 7.995c1.078-.016 1.044-1.214 1-1.994.018-.722.124-1.79-.792-1.983-.856-.01-1.738-.092-2.581.054-.962.452-.521 1.634-.62 2.463-.195.882.554 1.667 1.45 1.46h1.544zm-7.985 0c1.078-.016 1.043-1.214.999-1.994-.007-.7.174-1.77-.733-1.972-.874-.033-1.778-.097-2.64.043-.962.452-.52 1.634-.62 2.463-.23 1.059.776 1.654 1.721 1.46h1.273zm-7.985 0c1.077-.016 1.043-1.214.998-1.994-.007-.7.174-1.77-.733-1.972-.873-.033-1.778-.097-2.64.043-.961.452-.52 1.634-.62 2.463-.194.882.555 1.667 1.45 1.46H9.01z"></path>
     </symbol>
 
+    <symbol id="icon-chevron-down" viewBox="0 0 24 24" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
+      <polyline points="6 9 12 15 18 9"></polyline>
+    </symbol>
+
     <symbol id="icon-clock" viewBox="0 0 32 32">
       <path d="M20.586 23.414l-6.586-6.586v-8.828h4v7.172l5.414 5.414zM16 0c-8.837 0-16 7.163-16 16s7.163 16 16 16 16-7.163 16-16-7.163-16-16-16zM16 28c-6.627 0-12-5.373-12-12s5.373-12 12-12c6.627 0 12 5.373 12 12s-5.373 12-12 12z"></path>
     </symbol>