feat: modified gds-navigation to be SEO friendly

This component has been designed to be rendered directly the webpages. For example WP.
generoi · Jul 3, 2020 · 6b23547 · 6b23547
1 parent 1bc811d
commit 6b23547
Show file tree

Hide file tree

Showing 20 changed files with 160 additions and 168 deletions.
diff --git a/.storybook/gdsTheme.js b/.storybook/gdsTheme.js
@@ -11,5 +11,5 @@ export default create({
 
   brandTitle: 'Genero Design System',
   brandUrl: '/',
-  brandImage: 'https://genero.fi/app/themes/genero/dist/images/logo_2cdda69a.svg',
+  brandImage: '/images/genero-logo.svg',
 })
diff --git a/public/images/genero-logo.png b/public/images/genero-logo.png
diff --git a/src/components.d.ts b/src/components.d.ts
@@ -108,30 +108,14 @@ export namespace Components {
           * Direction: "horizontal" or "vertial". Defaults to "vertical".
          */
         "direction": string;
-        /**
-          * Site url.
-         */
-        "homeUrl": string;
     }
     interface GdsMenuItem {
         /**
-          * Can be used to divide menu items. TODO: Implement desktop styles.
-         */
-        "divider": boolean;
-        /**
-          * Link url.
+          * Is menu item appear active.
          */
-        "href": string;
+        "active": boolean;
     }
     interface GdsNavigation {
-        /**
-          * Site url.
-         */
-        "homeUrl": string;
-        /**
-          * Site logo image url.
-         */
-        "logoUrl": string;
     }
     interface GdsParagraph {
         /**
@@ -360,30 +344,14 @@ declare namespace LocalJSX {
           * Direction: "horizontal" or "vertial". Defaults to "vertical".
          */
         "direction"?: string;
-        /**
-          * Site url.
-         */
-        "homeUrl"?: string;
     }
     interface GdsMenuItem {
         /**
-          * Can be used to divide menu items. TODO: Implement desktop styles.
-         */
-        "divider"?: boolean;
-        /**
-          * Link url.
+          * Is menu item appear active.
          */
-        "href"?: string;
+        "active"?: boolean;
     }
     interface GdsNavigation {
-        /**
-          * Site url.
-         */
-        "homeUrl"?: string;
-        /**
-          * Site logo image url.
-         */
-        "logoUrl"?: string;
     }
     interface GdsParagraph {
         /**

diff --git a/src/components/gds-link/readme.md b/src/components/gds-link/readme.md
@@ -18,17 +18,13 @@
 
  - [gds-logo-grid-item](../gds-logo-grid-item)
  - [gds-media-card](../gds-media-card)
- - [gds-menu-item](../gds-menu-item)
- - [gds-navigation](../gds-navigation)
  - [gds-tag](../gds-tag)
 
 ### Graph
 ```mermaid
 graph TD;
   gds-logo-grid-item --> gds-link
   gds-media-card --> gds-link
-  gds-menu-item --> gds-link
-  gds-navigation --> gds-link
   gds-tag --> gds-link
   style gds-link fill:#f9f,stroke:#333,stroke-width:4px
 ```

diff --git a/src/components/gds-logo-grid/gds-logo-grid.stories.js b/src/components/gds-logo-grid/gds-logo-grid.stories.js
@@ -17,7 +17,7 @@ export const LogoGrid = () => html`
   <gds-logo-grid>
     <gds-logo-grid-item
       href="https://www.genero.fi"
-      image-url="https://genero.fi/app/themes/genero/dist/images/logo_2cdda69a.svg"
+      image-url="/images/genero-logo.svg"
     ></gds-logo-grid-item>
     ${item}${item}${item}${item}${item}${item}${item}${item}${item}${item}
   </gds-logo-grid>

diff --git a/src/components/gds-menu-item/_index.scss b/src/components/gds-menu-item/_index.scss
diff --git a/src/components/gds-menu-item/gds-menu-item.scss b/src/components/gds-menu-item/gds-menu-item.scss
@@ -1,17 +1,21 @@
-// TODO: Move styles to _index.scss if needed for WP?
-@use "index" as *;
 @use "../../styles/breakpoints" as *;
 
 li {
-  @include base;
   box-sizing: border-box;
   list-style: none;
 }
 
-.label {
+.active {
+  @include mobileOnly {
+    background-color: var(--background-color-primary);
+  }
+}
+
+.content {
   height: var(--spacing-xxl);
   display: flex;
-  align-items: center;
+  flex-direction: column;
+  justify-content: center;
 
   // Mobile as default.
   padding: 0 var(--spacing-m);
@@ -24,19 +28,37 @@ li {
 
 // Vertical direction explicitly defined.
 :host-context(.vertical) {
-  & .label {
+  & .content {
     padding: 0 var(--spacing-m);
   }
 }
 
 // Horizontal direction explicitly defined.
 :host-context(.horizontal) {
-  & .label {
+  & .content {
     padding: 0 var(--spacing-s);
   }
 }
 
+.underline-container {
+  position: relative;
+  width: 100%;
+  height: 0;
+
+  // Hide underline on mobile.
+  @include mobileAndTablet {
+    display: none;
+  }
+}
+
+.underline {
+  position: absolute;
+  width: 100%;
+  top: 4px;
+  border-bottom: 3px solid var(--text-color-primary);
+}
+
 .divider {
   margin: var(--spacing-m) 0;
-  border-top: 2px solid var(--body-background-color);
+  border-top: 2px solid var(--background-color-primary);
 }
diff --git a/src/components/gds-menu-item/gds-menu-item.tsx b/src/components/gds-menu-item/gds-menu-item.tsx
@@ -7,30 +7,28 @@ import { Component, h, Prop } from '@stencil/core'
 })
 export class GdsMenuItem {
   /**
-   * Link url.
+   * Is menu item appear active.
    */
-  @Prop() href: string
-  /**
-   * Can be used to divide menu items.
-   * TODO: Implement desktop styles.
-   */
-  @Prop() divider: boolean
+  @Prop({ reflect: true }) active: boolean
 
   render() {
-    if (this.divider) {
-      return <div class="divider"></div>
-    } else {
-      return (
-        <li class="item">
-          <gds-link href={this.href}>
-            <div class="label">
-              <gds-label size="l">
-                <slot></slot>
-              </gds-label>
+    return (
+      <li
+        class={{
+          item: true,
+          active: this.active,
+        }}>
+        <div class="content">
+          <gds-label size="l">
+            <slot></slot>
+          </gds-label>
+          {this.active && (
+            <div class="underline-container">
+              <div class="underline"></div>
             </div>
-          </gds-link>
-        </li>
-      )
-    }
+          )}
+        </div>
+      </li>
+    )
   }
 }
diff --git a/src/components/gds-menu-item/readme.md b/src/components/gds-menu-item/readme.md
@@ -5,23 +5,20 @@
 
 ## Properties
 
-| Property  | Attribute | Description                                                       | Type      | Default     |
-| --------- | --------- | ----------------------------------------------------------------- | --------- | ----------- |
-| `divider` | `divider` | Can be used to divide menu items. TODO: Implement desktop styles. | `boolean` | `undefined` |
-| `href`    | `href`    | Link url.                                                         | `string`  | `undefined` |
+| Property | Attribute | Description                 | Type      | Default     |
+| -------- | --------- | --------------------------- | --------- | ----------- |
+| `active` | `active`  | Is menu item appear active. | `boolean` | `undefined` |
 
 
 ## Dependencies
 
 ### Depends on
 
-- [gds-link](../gds-link)
 - [gds-label](../gds-label)
 
 ### Graph
 ```mermaid
 graph TD;
-  gds-menu-item --> gds-link
   gds-menu-item --> gds-label
   style gds-menu-item fill:#f9f,stroke:#333,stroke-width:4px
 ```

diff --git a/src/components/gds-menu/_index.scss b/src/components/gds-menu/_index.scss
diff --git a/src/components/gds-menu/gds-menu.scss b/src/components/gds-menu/gds-menu.scss
@@ -1,11 +1,5 @@
-// TODO: Move styles to _index.scss if needed for WP?
-@use "index" as *;
 @use "../../styles/breakpoints" as *;
 
-:host {
-  @include base;
-}
-
 ul {
   padding: 0;
   margin: 0;
@@ -27,3 +21,8 @@ ul {
 .horizontal {
   flex-direction: row;
 }
+
+::slotted(a) {
+  color: unset;
+  text-decoration: none;
+}
diff --git a/src/components/gds-menu/gds-menu.stories.js b/src/components/gds-menu/gds-menu.stories.js
@@ -7,11 +7,18 @@ export default {
 
 const getMenu = direction => html`
   <gds-menu direction="${direction}">
-    <gds-menu-item slot="item" href="https://www.genero.fi">First item</gds-menu-item>
-    <gds-menu-item slot="item" href="https://www.genero.fi">Second item</gds-menu-item>
-    <gds-menu-item slot="item" href="https://www.genero.fi">Third item</gds-menu-item>
-    <gds-menu-item slot="item" href="https://www.genero.fi">Short</gds-menu-item>
-    <gds-menu-item slot="item" href="https://www.genero.fi">And with ÖÄÅ</gds-menu-item>
+    <a slot="item" href="#first">
+      <gds-menu-item>First item</gds-menu-item>
+    </a>
+    <a slot="item" href="#2">
+      <gds-menu-item active>Second item</gds-menu-item>
+    </a>
+    <a slot="item" href="#short">
+      <gds-menu-item>Short</gds-menu-item>
+    </a>
+    <a slot="item" href="#4">
+      <gds-menu-item>And with ÖÄÅ</gds-menu-item>
+    </a>
   </gds-menu>
 `
 

diff --git a/src/components/gds-menu/gds-menu.tsx b/src/components/gds-menu/gds-menu.tsx
@@ -1,15 +1,14 @@
 import { Component, h, Prop } from '@stencil/core'
 
+/**
+ * This component can be used in on a webpage direct with good SEO since anchors are rendered outside of the component.
+ */
 @Component({
   tag: 'gds-menu',
   styleUrl: 'gds-menu.scss',
   shadow: true,
 })
 export class GdsMenu {
-  /**
-   * Site url.
-   */
-  @Prop() homeUrl: string
   /**
    * Direction: "horizontal" or "vertial".
    * Defaults to "vertical".

diff --git a/src/components/gds-menu/readme.md b/src/components/gds-menu/readme.md
@@ -8,7 +8,6 @@
 | Property    | Attribute   | Description                                                   | Type     | Default     |
 | ----------- | ----------- | ------------------------------------------------------------- | -------- | ----------- |
 | `direction` | `direction` | Direction: "horizontal" or "vertial". Defaults to "vertical". | `string` | `undefined` |
-| `homeUrl`   | `home-url`  | Site url.                                                     | `string` | `undefined` |
 
 
 ----------------------------------------------

diff --git a/src/components/gds-navigation/_index.scss b/src/components/gds-navigation/_index.scss
diff --git a/src/components/gds-navigation/gds-navigation.scss b/src/components/gds-navigation/gds-navigation.scss
@@ -1,5 +1,3 @@
-// TODO: Move styles to _index.scss if needed for WP?
-@use "index" as *;
 @use "../../styles/breakpoints" as *;
 
 $grid-item-desktop-size: 263px;
@@ -40,15 +38,19 @@ header {
   }
 }
 
-.extensions {
-  @include mobileAndTablet {
+.mobile-extensions {
+  display: block;
+  border-top: 2px solid var(--body-background-color);
+  padding: var(--spacing-l) 0;
+
+  @include desktopOnly {
     display: none;
   }
 }
-.content > .extensions {
-  display: block;
-  border-top: 2px solid var(--body-background-color);
-  padding-top: var(--spacing-l);
+.desktop-extensions {
+  @include mobileAndTablet {
+    display: none;
+  }
 }
 
 nav {
@@ -69,11 +71,16 @@ nav {
 .logo {
   display: flex;
   align-items: center;
-  height: var(--navigation-mobile-height);
   padding-left: var(--spacing-l);
 
-  // Desktop from viewport width.
+  height: var(--navigation-mobile-height);
+  & img {
+    height: 32px;
+  }
   @include desktopOnly {
     height: var(--navigation-desktop-height);
+    & img {
+      height: 48px;
+    }
   }
 }