@eeacms/volto-eea-design-system 1.0.0-beta.2 → 1.0.0-beta.4

package/CHANGELOG.md

@@ -4,10 +4,81 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+### [1.0.0-beta.4](https://github.com/eea/volto-eea-design-system/compare/1.0.0-beta.3...1.0.0-beta.4) - 28 February 2023
+
+#### :rocket: New Features
+
+- feat(footer): Add footer description #306 from eea/footer-description [ichim-david - [`bf655d1`](https://github.com/eea/volto-eea-design-system/commit/bf655d133dd75b217c34b3d4303ad450a59f2c51)]
+- feat(footer): Add footer description [kreafox - [`2ad0f71`](https://github.com/eea/volto-eea-design-system/commit/2ad0f714556c5b8c2fd95a2caea5c3a1e82c75d1)]
+
+#### :bug: Bug Fixes
+
+- fix(footer): Add class for children [kreafox - [`3c50d15`](https://github.com/eea/volto-eea-design-system/commit/3c50d15cd6ed46d78ef10d48fd851ed7c4b5ddea)]
+- fix(footer): Don't show empty row if description is not present [kreafox - [`2ca7f7d`](https://github.com/eea/volto-eea-design-system/commit/2ca7f7d3247668ae8583b8cd629856aac82eb07d)]
+- fix(search): Fix search links color #307 from eea/search-accessibility [ichim-david - [`a76f48b`](https://github.com/eea/volto-eea-design-system/commit/a76f48bab3a7d3f6b748eaa85b33266401372e40)]
+- fix(search): Fix search links color [kreafox - [`69c42ef`](https://github.com/eea/volto-eea-design-system/commit/69c42effc5bdc3d31f18de74d77a3b7cc0018dc5)]
+
+#### :nail_care: Enhancements
+
+- change(carousel): tweak card width and padding for better arrow alignment [David Ichim - [`e184f70`](https://github.com/eea/volto-eea-design-system/commit/e184f70062d622e1ec53e8e1e2b012c080e62d77)]
+- change(storybook): include footer description in storybook [kreafox - [`e904aa0`](https://github.com/eea/volto-eea-design-system/commit/e904aa0850e101d736e8d045e822d9a58b75ff6a)]
+
+#### :hammer_and_wrench: Others
+
+- Release 1.0.0-beta.4 [Alin Voinea - [`8c335c5`](https://github.com/eea/volto-eea-design-system/commit/8c335c56c5a2a76ea87f9da318055770f904e649)]
+- Back to dev [Alin Voinea - [`38b0333`](https://github.com/eea/volto-eea-design-system/commit/38b03333066416915b056f8ac45da4de87ed7184)]
+### [1.0.0-beta.3](https://github.com/eea/volto-eea-design-system/compare/1.0.0-beta.2...1.0.0-beta.3) - 21 February 2023
+
+#### :rocket: New Features
+
+- feat(accordion): storybook accessibility by using buttons for titles #297 from eea/accessibility-accordion [ichim-david - [`809d52b`](https://github.com/eea/volto-eea-design-system/commit/809d52b203ef40fab735006b3b8358d68682f7cf)]
+
+#### :bug: Bug Fixes
+
+- fix(dropdown): remove close on blur so that we can navigate links using keyboard [David Ichim - [`5442715`](https://github.com/eea/volto-eea-design-system/commit/5442715e022b3eb2eeb709ff597f815947ac45bd)]
+
+#### :nail_care: Enhancements
+
+- change(language): restore dropdown duplication in order to properly show and hide language dropdown [David Ichim - [`cb28888`](https://github.com/eea/volto-eea-design-system/commit/cb28888ff19bd9894b58403e674f69de42ad8d09)]
+- change(language): hide language dropdown by default [David Ichim - [`cc6064f`](https://github.com/eea/volto-eea-design-system/commit/cc6064f72dcb4dbf96e9b05205cc796775d75205)]
+- change(header): top dropdown menu keyboard navigation #293 from eea/accessibility-megamenu-searchbox [ichim-david - [`1e6fa65`](https://github.com/eea/volto-eea-design-system/commit/1e6fa658e52b9d5e6cc38f065b5707b592005241)]
+- change(language): dropdown to use links for proper keyboard navigation [David Ichim - [`6a7de30`](https://github.com/eea/volto-eea-design-system/commit/6a7de30d9d229443d6d2070d9649129e6d35badf)]
+- change(search): to reflect changes from eea-website-theme [David Ichim - [`2cc35e0`](https://github.com/eea/volto-eea-design-system/commit/2cc35e0da6e6eac1473724293fcf6cd6b0a914b5)]
+- change(button): set focus styling for buttons [ichim-david - [`33ebfca`](https://github.com/eea/volto-eea-design-system/commit/33ebfcacb014fca365ae58079bfa5429d9007e54)]
+- change(footer): Avoid devtools warning in FooterActions #304 from eea/avoid_warning [ichim-david - [`d774824`](https://github.com/eea/volto-eea-design-system/commit/d774824c5d3d0998b3440ac83152428cfa821087)]
+- change(accessibility): style outline instead of box-shadow [David Ichim - [`53209f3`](https://github.com/eea/volto-eea-design-system/commit/53209f3b28c9a1dd54a8a86ab418b8bc2a8e01b3)]
+- change(header): set the logo class directly on the link [David Ichim - [`f8fba50`](https://github.com/eea/volto-eea-design-system/commit/f8fba508f925d9e6b86720fcb2c7dcfffee4ab5e)]
+- change(footer): Accessibility update p with h3 heading tag for theme sites title #302 from eea/footer-accessibility [ichim-david - [`5bf70de`](https://github.com/eea/volto-eea-design-system/commit/5bf70de97aee216a0b88f5843a290c6bcb5da6f2)]
+- change(documentation): Rename all image files to follow the agreed convention #301 from eea/refactor-image-filenames [ichim-david - [`cfe44ef`](https://github.com/eea/volto-eea-design-system/commit/cfe44ef79943af9b9179df1b8ec5f8c743e8bb39)]
+- refactor(Footer): update mobile header size [Antonis Tarantilis - [`01ab7f0`](https://github.com/eea/volto-eea-design-system/commit/01ab7f0d9abe688b3d96aaec018838e1abefec73)]
+- refactor(footer): update p with h3 heading tag for header [Antonis Tarantilis - [`ca1477b`](https://github.com/eea/volto-eea-design-system/commit/ca1477b554f56423d40a33d8ee788c3f3bd3e341)]
+- refactor(docusaurus): cleanup decorative images [Giorgos Stamatis - [`fedc4d4`](https://github.com/eea/volto-eea-design-system/commit/fedc4d4dc156f9c1394fcedcebece4fb87dc70b6)]
+- refactor(images): remove unused docusaurus svgs [Giorgos Stamatis - [`c5ef14c`](https://github.com/eea/volto-eea-design-system/commit/c5ef14cdb1923d803feb673559d41b3064211653)]
+- refactor(Accessibility): add box-shadow on focus-visible components [Antonis Tarantilis - [`b1adcc3`](https://github.com/eea/volto-eea-design-system/commit/b1adcc315a89c7d3431e542e8d1b6ec479a346e2)]
+- refactor(images): clear docusaurus unused pngs [Giorgos Stamatis - [`db5c611`](https://github.com/eea/volto-eea-design-system/commit/db5c61124182e3030f753f6baa294fbdecaa3798)]
+- refactor(Accordion): div titles to buttons, test in mobile mega menu accordions [Antonis Tarantilis - [`eaad4b4`](https://github.com/eea/volto-eea-design-system/commit/eaad4b479e37ebf5ac004cfc5759e0be603000a7)]
+- refactor(header): add escape key functionality, actions from div to button to have proper focus state [Antonis Tarantilis - [`8081aa4`](https://github.com/eea/volto-eea-design-system/commit/8081aa4e3b77f8a3dc89aa358408d75e3dca5579)]
+- refactor(images): cleared unused/renamed images assets [Giorgos Stamatis - [`821f5c1`](https://github.com/eea/volto-eea-design-system/commit/821f5c1da5c1e2350818cd9b8b82bc0b1893370d)]
+- refactor(header-images): removed unused [Giorgos Stamatis - [`8250d94`](https://github.com/eea/volto-eea-design-system/commit/8250d94421d9d1ee13144e71bc0938af2b7309f5)]
+- refactor(footer images): removed unused/renamed [Giorgos Stamatis - [`186de6b`](https://github.com/eea/volto-eea-design-system/commit/186de6b23906e05ec700c3db5180a4d7f7e5ed68)]
+
+#### :house: Internal changes
+
+- style(header): react syntax fix [Antonis Tarantilis - [`3add127`](https://github.com/eea/volto-eea-design-system/commit/3add1271c785a92bea0ef925d7bc562cef1e0d92)]
+
+#### :house: Documentation changes
+
+- docs(guidelines): add image name convention [Giorgos Stamatis - [`290747c`](https://github.com/eea/volto-eea-design-system/commit/290747c8df6919199577bc7fce6a0e337cb57853)]
+
+#### :hammer_and_wrench: Others
+
+- Release 1.0.0-beta.3 [Alin Voinea - [`386c903`](https://github.com/eea/volto-eea-design-system/commit/386c9032d39317b0bb95191bd59e3b7a99bded69)]
+- Avoid warning in FooterActions [Tiberiu Ichim - [`0fe73d7`](https://github.com/eea/volto-eea-design-system/commit/0fe73d70e44e32be73049f3b5cf826de42115942)]
 ### [1.0.0-beta.2](https://github.com/eea/volto-eea-design-system/compare/1.0.0-beta.1...1.0.0-beta.2) - 13 February 2023
 
 #### :bug: Bug Fixes
 
+- fix(footer): action and copyright #300 from eea/develop [ichim-david - [`579f3e4`](https://github.com/eea/volto-eea-design-system/commit/579f3e436e9608b38a2407a16c070345462bfccc)]
 - fix(accessibility): added navigation and footer id's for skip link [David Ichim - [`48354b9`](https://github.com/eea/volto-eea-design-system/commit/48354b908e7d1a87b4e1a965d225e8f1b3e0ac59)]
 - fix(footer): action or copyright links are simple a tags for external link [David Ichim - [`9af5070`](https://github.com/eea/volto-eea-design-system/commit/9af5070187ec975e58387f133afedcf1bbc47a50)]
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-eea-design-system",
-  "version": "1.0.0-beta.2",
+  "version": "1.0.0-beta.4",
   "description": "@eeacms/volto-eea-design-system: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

package/src/ui/Accordion/Accordion.stories.js

@@ -107,6 +107,7 @@ function AccordionContainer({ ...args }) {
           active={activeIndex === 0}
           index={0}
           onClick={toggleOpenAccordion}
+          as="button"
         >
           {args.toggle1}
           <Icon className="ri-arrow-down-s-line" />
@@ -114,12 +115,14 @@ function AccordionContainer({ ...args }) {
         <Accordion.Content active={activeIndex === 0}>
           {args.content1.length > 0 &&
             args.content1.map((item, index) => <p key={index}>{item}</p>)}
+          <a href="/#">Read more</a>
         </Accordion.Content>
 
         <Accordion.Title
           active={activeIndex === 1}
           index={1}
           onClick={toggleOpenAccordion}
+          as="button"
         >
           {args.toggle2}
           <Icon className="ri-arrow-down-s-line" />
@@ -133,6 +136,7 @@ function AccordionContainer({ ...args }) {
           active={activeIndex === 2}
           index={2}
           onClick={toggleOpenAccordion}
+          as="button"
         >
           {args.toggle3}
           <Icon className="ri-arrow-down-s-line" />

package/src/ui/Footer/Description.jsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Grid } from 'semantic-ui-react';
+
+const Description = (props) => {
+  if (props.children) {
+    return <div className="footer-description">{props.children}</div>;
+  }
+
+  return props.description ? (
+    <Grid.Row>
+      <div className="footer-description">
+        <p>{props.description}</p>
+      </div>
+    </Grid.Row>
+  ) : null;
+};
+
+Description.propTypes = {
+  description: PropTypes.string,
+};
+
+export default Description;

package/src/ui/Footer/Footer.jsx

@@ -12,6 +12,7 @@ import FooterHeader from '@eeacms/volto-eea-design-system/ui/Footer/FooterHeader
 import SubFooter from '@eeacms/volto-eea-design-system/ui/Footer/SubFooter';
 import Social from '@eeacms/volto-eea-design-system/ui/Footer/Social';
 import Contact from '@eeacms/volto-eea-design-system/ui/Footer/Contact';
+import Description from '@eeacms/volto-eea-design-system/ui/Footer/Description';
 
 /**
  * Component to display the footer.
@@ -37,6 +38,7 @@ Footer.Header = FooterHeader;
 Footer.Sites = FooterSites;
 Footer.Social = Social;
 Footer.SubFooter = SubFooter;
+Footer.Description = Description;
 
 /**
  * Property types.

package/src/ui/Footer/Footer.stories.js

@@ -31,6 +31,7 @@ const Template = (args) => (
 export const Default = Template.bind({});
 Default.args = {
   header: 'Thematic information platforms',
+  description: '',
   actions: [
     { link: '/#', title: 'Privacy' },
     { link: '/#', title: 'Sitemap' },

package/src/ui/Footer/FooterActions.jsx

@@ -29,7 +29,7 @@ const FooterActions = (props) => {
           <div className="copyright">
             {props.copyright &&
               props.copyright.map((copyright, index) => (
-                <>
+                <React.Fragment key={index}>
                   <a
                     href={copyright.link}
                     key={index}
@@ -38,7 +38,7 @@ const FooterActions = (props) => {
                   >
                     {copyright.title}
                   </a>
-                </>
+                </React.Fragment>
               ))}
           </div>
         </Grid.Column>

package/src/ui/Footer/FooterHeader.jsx

@@ -3,7 +3,7 @@ import React from 'react';
 const FooterHeader = (props) => {
   return (
     <div className="theme-sites">
-      <p className="header text-center">{props.children}</p>
+      <h3 className="header text-center">{props.children}</h3>
     </div>
   );
 };

package/src/ui/Footer/SubFooter.jsx

@@ -37,6 +37,8 @@ const SubFooter = (props) => {
         </Grid.Column>
       </Grid>
 
+      <Footer.Description description={props.description} />
+
       <Grid.Row>
         <Footer.Social social={props.social} />
       </Grid.Row>

package/src/ui/Header/Header.jsx

@@ -41,7 +41,7 @@ const TopDropdownMenu = ({
   children,
   className,
   icon,
-  hasLanguageDropdown = true,
+  hasLanguageDropdown = false,
   id,
   tabletText,
   mobileText,
@@ -62,8 +62,9 @@ const TopDropdownMenu = ({
               text={mobileText || text}
               icon={icon || 'chevron down'}
               aria-label="dropdown"
-              closeOnChange={false}
-              closeOnBlur={true}
+              closeOnChange={true}
+              closeOnBlur={false}
+              closeOnEscape={true}
             >
               <Dropdown.Menu role="group">{children}</Dropdown.Menu>
             </Dropdown>
@@ -75,8 +76,9 @@ const TopDropdownMenu = ({
             text={mobileText || text}
             icon={icon || 'chevron down'}
             aria-label="dropdown"
-            closeOnChange={false}
-            closeOnBlur={true}
+            closeOnChange={true}
+            closeOnBlur={false}
+            closeOnEscape={true}
           >
             <Dropdown.Menu role="group">{children}</Dropdown.Menu>
           </Dropdown>
@@ -200,6 +202,32 @@ const Main = ({
     }
   };
 
+  // Listens for escape keydown event
+  React.useEffect(() => {
+    const escKeyPressed = (e) => {
+      if (e.key === 'Escape') {
+        // menuOnClickOutside();
+        // restore active element if nothing was selected from the menu dropdown
+        if (pathname !== activeItem) {
+          setActiveItem(pathname);
+        }
+        // close mobile navigation when clicking outside if we have value for nav
+        if (burger) {
+          setBurger('');
+        }
+        // always close the  menu & search
+        setMenuIsActive(false);
+        setSearchIsActive(false);
+      }
+    };
+
+    document.addEventListener('keydown', escKeyPressed);
+
+    return () => {
+      document.removeEventListener('keydown', escKeyPressed);
+    };
+  }, [activeItem, burger, pathname]);
+
   // React.useEffect(() => {
   //   if (searchIsActive || burger === 'open' || menuIsActive) {
   //     document.body.style.overflow = 'hidden';
@@ -255,10 +283,12 @@ const Main = ({
                 </div>
               )}
               {!hideSearch && (
-                <div
+                <button
                   className="search-action"
                   onClick={searchOnClick}
-                  role="none"
+                  tabIndex="0"
+                  aria-pressed="false"
+                  aria-haspopup="true"
                   ref={searchButtonRef}
                 >
                   {/* <Icon name={!state.activeSearch ? 'search' : 'close'} /> */}
@@ -266,7 +296,7 @@ const Main = ({
                     src={!searchIsActive ? `${searchIcon}` : `${closeIcon}`}
                     alt="search button open/close"
                   />
-                </div>
+                </button>
               )}
               <Header.BurgerAction
                 className={`mobile ${burger}`}
@@ -303,14 +333,16 @@ const Main = ({
 };
 
 const BurgerAction = React.forwardRef((props, ref) => (
-  <div
+  <button
     ref={ref}
     className={`burger-action ${props.className}`}
-    role="none"
+    tabIndex="0"
+    aria-pressed="false"
+    aria-haspopup="true"
     onClick={props.onClick}
   >
     {props.children}
-  </div>
+  </button>
 ));
 
 Header.BurgerAction = BurgerAction;

package/src/ui/Header/Header.stories.js

@@ -1371,14 +1371,18 @@ const Template = (args) => {
                   as="li"
                   key={index}
                   text={
-                    <span>
+                    <a
+                      href={'/' + item.code}
+                      onClick={() => setLanguage(item.code)}
+                      tabIndex={0}
+                      className={'language-link'}
+                    >
                       {item.name}
                       <span className="country-code">
                         {item.code.toUpperCase()}
                       </span>
-                    </span>
+                    </a>
                   }
-                  onClick={() => setLanguage(item.code)}
                 ></Dropdown.Item>
               ))}
             </ul>

package/src/ui/Header/HeaderMenuPopUp.js

@@ -176,7 +176,7 @@ const FirstLevelContent = ({ element, renderMenuItem, pathName }) => {
               defaultIndex = index;
             }
             x.title = (
-              <Accordion.Title key={`title=${index}`}>
+              <Accordion.Title key={`title=${index}`} as="button">
                 {item.title}
                 <Icon className="ri-arrow-down-s-line" size="small" />
               </Accordion.Title>
@@ -279,7 +279,7 @@ const NestedAccordion = ({ menuItems, renderMenuItem, pathName }) => {
       defaultIndex = index;
     }
     x.title = (
-      <Accordion.Title key={`title-${index}`} index={index}>
+      <Accordion.Title key={`title-${index}`} index={index} as="button">
         {element.title}
         <Icon className="ri-arrow-down-s-line" size="small" />
       </Accordion.Title>

package/src/ui/Header/HeaderSearchPopUp.js

@@ -10,9 +10,9 @@ function HeaderSearchPopUp({ onClose, searchInputRef, triggerRefs = [] }) {
 
   return (
     <div id="search-box" ref={nodeRef}>
-      <form>
+      <div className="wrapper">
         <Container>
-          <div className="wrapper">
+          <form>
             <Input
               ref={searchInputRef}
               className="search"
@@ -20,30 +20,21 @@ function HeaderSearchPopUp({ onClose, searchInputRef, triggerRefs = [] }) {
               placeholder="Search..."
               fluid
             />
-            {/* <div className="action">
-            <Button icon labelPosition="left" className="search">
-              <Icon name="search" />
-              Advanced Search
-            </Button>
-          </div> */}
-          </div>
+          </form>
         </Container>
-      </form>
 
-      <div className="advanced-search">
-        <Container>
-          <p>
-            Looking for more information? Try searching the full EEA website
-            content
-          </p>
-          <a
-            href="/"
-            className="ui button white inverted"
-            title="Advanced search"
-          >
-            Go to full site search
-          </a>
-        </Container>
+        <div className="advanced-search">
+          <Container>
+            <div>For more search options</div>
+            <a
+              href="/"
+              className="ui button white inverted"
+              title="Advanced search"
+            >
+              Go to advanced search
+            </a>
+          </Container>
+        </div>
       </div>
     </div>
   );

package/src/ui/Logo/Logo.jsx

@@ -15,7 +15,7 @@ import { Image } from 'semantic-ui-react';
  */
 const Logo = ({ src, invertedSrc, id, url, alt, title, inverted }) => {
   return (
-    <Link to={url} title={title}>
+    <Link to={url} title={title} className={'logo'}>
       <Image
         src={inverted ? invertedSrc : src}
         alt={alt}

package/theme/theme.config

@@ -135,4 +135,5 @@
   @import (optional) "@{siteFolder}/@{addon}/@{addontype}s/@{addonelement}.overrides";
 }
 
+
 /* End Config */

package/theme/themes/eea/elements/loader.overrides

@@ -20,7 +20,7 @@
       rgba(255, 255, 255, 0),
       rgba(255, 255, 255, 0)
     ),
-    url('../assets/images/loaderImage.png');
+    url('../assets/images/loader-image.png');
   background-position: @eeaLoaderBackgroundPosition;
   background-repeat: no-repeat;
   border-radius: @eeaLoaderBorderRadius;
@@ -35,7 +35,7 @@
         rgba(255, 255, 255, 0),
         rgba(255, 255, 255, 0)
       ),
-      url('../assets/images/loaderImage.png');
+      url('../assets/images/loader-image.png');
   }
 
   5% {
@@ -43,7 +43,7 @@
         rgba(255, 255, 255, 0),
         rgba(255, 255, 255, 0)
       ),
-      url('../assets/images/loaderImage.png');
+      url('../assets/images/loader-image.png');
   }
 
   10% {
@@ -51,7 +51,7 @@
         rgba(255, 255, 255, 0),
         rgba(255, 255, 255, 0)
       ),
-      url('../assets/images/loaderImage.png');
+      url('../assets/images/loader-image.png');
   }
 
   15% {
@@ -59,7 +59,7 @@
         rgba(255, 255, 255, 0.1),
         rgba(255, 255, 255, 0.1)
       ),
-      url('../assets/images/loaderImage.png');
+      url('../assets/images/loader-image.png');
   }
 
   20% {
@@ -67,7 +67,7 @@
         rgba(255, 255, 255, 0.2),
         rgba(255, 255, 255, 0.2)
       ),
-      url('../assets/images/loaderImage.png');
+      url('../assets/images/loader-image.png');
   }
 
   25% {
@@ -75,7 +75,7 @@
         rgba(255, 255, 255, 0.3),
         rgba(255, 255, 255, 0.3)
       ),
-      url('../assets/images/loaderImage.png');
+      url('../assets/images/loader-image.png');
   }
 
   30% {
@@ -83,7 +83,7 @@
         rgba(255, 255, 255, 0.4),
         rgba(255, 255, 255, 0.4)
       ),
-      url('../assets/images/loaderImage.png');
+      url('../assets/images/loader-image.png');
   }
 
   35% {
@@ -91,7 +91,7 @@
         rgba(255, 255, 255, 0.5),
         rgba(255, 255, 255, 0.5)
       ),
-      url('../assets/images/loaderImage.png');
+      url('../assets/images/loader-image.png');
   }
 
   40% {
@@ -99,7 +99,7 @@
         rgba(255, 255, 255, 0.6),
         rgba(255, 255, 255, 0.6)
       ),
-      url('../assets/images/loaderImage.png');
+      url('../assets/images/loader-image.png');
   }
 
   45% {
@@ -107,7 +107,7 @@
         rgba(255, 255, 255, 0.7),
         rgba(255, 255, 255, 0.7)
       ),
-      url('../assets/images/loaderImage.png');
+      url('../assets/images/loader-image.png');
   }
 
   50% {
@@ -115,7 +115,7 @@
         rgba(255, 255, 255, 0.75),
         rgba(255, 255, 255, 0.8)
       ),
-      url('../assets/images/loaderImage.png');
+      url('../assets/images/loader-image.png');
   }
 
   55% {
@@ -123,7 +123,7 @@
         rgba(255, 255, 255, 0.7),
         rgba(255, 255, 255, 0.7)
       ),
-      url('../assets/images/loaderImage.png');
+      url('../assets/images/loader-image.png');
   }
 
   60% {
@@ -131,7 +131,7 @@
         rgba(255, 255, 255, 0.6),
         rgba(255, 255, 255, 0.6)
       ),
-      url('../assets/images/loaderImage.png');
+      url('../assets/images/loader-image.png');
   }
 
   65% {
@@ -139,7 +139,7 @@
         rgba(255, 255, 255, 0.5),
         rgba(255, 255, 255, 0.5)
       ),
-      url('../assets/images/loaderImage.png');
+      url('../assets/images/loader-image.png');
   }
 
   70% {
@@ -147,7 +147,7 @@
         rgba(255, 255, 255, 0.4),
         rgba(255, 255, 255, 0.4)
       ),
-      url('../assets/images/loaderImage.png');
+      url('../assets/images/loader-image.png');
   }
 
   75% {
@@ -155,7 +155,7 @@
         rgba(255, 255, 255, 0.3),
         rgba(255, 255, 255, 0.3)
       ),
-      url('../assets/images/loaderImage.png');
+      url('../assets/images/loader-image.png');
   }
 
   80% {
@@ -163,7 +163,7 @@
         rgba(255, 255, 255, 0.2),
         rgba(255, 255, 255, 0.2)
       ),
-      url('../assets/images/loaderImage.png');
+      url('../assets/images/loader-image.png');
   }
 
   85% {
@@ -171,7 +171,7 @@
         rgba(255, 255, 255, 0.1),
         rgba(255, 255, 255, 0.1)
       ),
-      url('../assets/images/loaderImage.png');
+      url('../assets/images/loader-image.png');
   }
 
   90% {
@@ -179,7 +179,7 @@
         rgba(255, 255, 255, 0),
         rgba(255, 255, 255, 0)
       ),
-      url('../assets/images/loaderImage.png');
+      url('../assets/images/loader-image.png');
   }
 
   95% {
@@ -187,7 +187,7 @@
         rgba(255, 255, 255, 0),
         rgba(255, 255, 255, 0)
       ),
-      url('../assets/images/loaderImage.png');
+      url('../assets/images/loader-image.png');
   }
 
   100% {
@@ -195,6 +195,6 @@
         rgba(255, 255, 255, 0),
         rgba(255, 255, 255, 0)
       ),
-      url('../assets/images/loaderImage.png');
+      url('../assets/images/loader-image.png');
   }
 }