Feature/improve settings navigation

addon/components/o-s-s/anchor.hbs

@@ -1,5 +1,5 @@
 {{#if this.isInternalRoute}}
-  <LinkTo @route={{@link}} rel={{this.rel}} ...attributes>{{yield}}</LinkTo>
+  <LinkTo @route={{@link}} @current-when={{this.currentWhen}} rel={{this.rel}} ...attributes>{{yield}}</LinkTo>
 {{else}}
   <a href={{@link}} rel={{this.rel}} ...attributes>{{yield}}</a>
 {{/if}}

addon/components/o-s-s/anchor.stories.js

@@ -14,6 +14,26 @@ export default {
       },
       control: { type: 'text' }
     },
+    routePrefix: {
+      description: 'Optional route prefix (engine) name to use for routing',
+      table: {
+        type: {
+          summary: 'string'
+        },
+        defaultValue: { summary: '' }
+      },
+      control: { type: 'text' }
+    },
+    disableAutoActive: {
+      description: 'Disables automatic active state based on current route',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' }
+      },
+      control: {
+        type: 'boolean'
+      }
+    },
     noreferrer: {
       description: 'Enables the noreferrer rel attribute',
       table: {
@@ -56,6 +76,7 @@ const DefaultUsageTemplate = (args) => ({
 export const BasicUsage = DefaultUsageTemplate.bind({});
 BasicUsage.args = {
   link: 'https://www.upfluence.com',
+  disableAutoActive: false,
   noopener: true,
   noreferrer: true
 };

addon/components/o-s-s/anchor.ts

@@ -4,8 +4,10 @@ import RouterService from '@ember/routing/router-service';
 
 interface OSSAnchorArgs {
   link: string;
+  routePrefix?: string;
   noopener?: boolean;
   noreferrer?: boolean;
+  disableAutoActive?: boolean;
 }
 
 export default class OSSAnchor extends Component<OSSAnchorArgs> {
@@ -19,6 +21,10 @@ export default class OSSAnchor extends Component<OSSAnchorArgs> {
     return this.args.noreferrer ?? true;
   }
 
+  get currentWhen(): boolean | undefined {
+    return this.args.disableAutoActive !== undefined ? !this.args.disableAutoActive : undefined;
+  }
+
   get rel(): string {
     const relations: string[] = [];
 
@@ -34,8 +40,9 @@ export default class OSSAnchor extends Component<OSSAnchorArgs> {
   }
 
   get isInternalRoute(): boolean {
+    const route = this.args.routePrefix ? this.args.routePrefix + '.' + this.args.link : this.args.link;
     try {
-      return Boolean(this.router.urlFor(this.args.link));
+      return Boolean(this.router.urlFor(route));
     } catch (error) {
       return false;
     }

addon/components/o-s-s/layout/sidebar.hbs

@@ -1,5 +1,9 @@
 <div class={{this.computedClasses}} ...attributes>
-  {{#if (or @homeParameters (and @logo @homeURL))}}
+  {{#if (has-block "header")}}
+    <div class="oss-sidebar-container__header">
+      {{yield (hash expanded=this.expanded) to="header"}}
+    </div>
+  {{else if (or @homeParameters (and @logo @homeURL))}}
     <div class="logo-container">
       <OSS::Layout::Sidebar::Item
         @link={{or @homeParameters.url @homeURL}}
@@ -19,7 +23,7 @@
       {{yield (hash expanded=this.expanded) to="content"}}
     </div>
 
-    {{#if @expandable}}
+    {{#if this.displayExpandedStateToggle}}
       <div class="oss-sidebar-container__expand">
         <OSS::Layout::Sidebar::Item
           @icon={{if this.expanded "fa-arrow-left-to-line" "fa-arrow-right-to-line"}}

addon/components/o-s-s/layout/sidebar.stories.js

@@ -23,6 +23,16 @@ export default {
         defaultValue: { summary: 'false' }
       },
       control: { type: 'boolean' }
+    },
+    alwaysExpanded: {
+      description: 'Whether the sidebar is always expanded and cannot be collapsed',
+      table: {
+        type: {
+          summary: 'boolean'
+        },
+        defaultValue: { summary: 'false' }
+      },
+      control: { type: 'boolean' }
     }
   },
   parameters: {
@@ -40,13 +50,14 @@ const defaultArgs = {
   homeParameters: {
     logo: '/assets/images/brand-icon.svg',
     url: 'https://www.upfluence.com'
-  }
+  },
+  alwaysExpanded: false
 };
 
 const Template = (args) => ({
   template: hbs`
     <div style="height:100vh; padding:5px;">
-      <OSS::Layout::Sidebar @expandable={{this.expandable}} @homeParameters={{this.homeParameters}} style="height:95vh; overflow: visible">
+      <OSS::Layout::Sidebar @expandable={{this.expandable}} @homeParameters={{this.homeParameters}} @alwaysExpanded={{this.alwaysExpanded}} style="height:95vh; overflow: visible">
         <:content as |sidebar|>
           <OSS::Layout::Sidebar::Item @expanded={{sidebar.expanded}} @icon="far fa-search" @label="Search" class="active" @homeAction={{this.homeAction}} />
           <OSS::Layout::Sidebar::Item @expanded={{sidebar.expanded}} @icon="far fa-list" @label="Community" />

addon/components/o-s-s/layout/sidebar.ts

@@ -18,6 +18,7 @@ interface OSSLayoutSidebarArgs {
   logo?: string;
   homeURL?: string;
   expandable?: boolean;
+  alwaysExpanded?: boolean;
 }
 
 export default class OSSLayoutSidebar extends Component<OSSLayoutSidebarArgs> {
@@ -41,6 +42,10 @@ export default class OSSLayoutSidebar extends Component<OSSLayoutSidebarArgs> {
     return classes.join(' ');
   }
 
+  get displayExpandedStateToggle(): boolean {
+    return Boolean(this.args.expandable) && !this.args.alwaysExpanded;
+  }
+
   @action
   toggleExpandedState(): void {
     this.expanded = !this.expanded;
@@ -52,7 +57,9 @@ export default class OSSLayoutSidebar extends Component<OSSLayoutSidebarArgs> {
   }
 
   private initializeSidebarState(): void {
-    this.expanded = Boolean(this.args.expandable) && this.upfLocalStorage.getItem(SIDEBAR_EXPANDED_STATE) !== 'false';
+    this.expanded =
+      this.args.alwaysExpanded ||
+      (Boolean(this.args.expandable) && this.upfLocalStorage.getItem(SIDEBAR_EXPANDED_STATE) !== 'false');
     document.documentElement.style.setProperty(
       '--sidebar-width',
       'var(--sidebar-' + (this.expanded ? 'expanded' : 'default') + '-width)'

addon/components/o-s-s/layout/sidebar/group.hbs

@@ -59,8 +59,10 @@
           @locked={{item.locked}}
           @hasNotifications={{item.hasNotifications}}
           @link={{item.link}}
+          @routePrefix={{item.routePrefix}}
           @lockedAction={{item.lockedAction}}
           @action={{item.action}}
+          @disableAutoActive={{item.disableAutoActive}}
           data-control-name={{item.dataControlName}}
           class={{if item.active "active"}}
         />

addon/components/o-s-s/layout/sidebar/group.ts

@@ -9,8 +9,10 @@ export type GroupItem = {
   label?: string;
   hasNotifications?: boolean;
   link: string;
+  routePrefix?: string;
   active: boolean;
   dataControlName?: string;
+  disableAutoActive?: boolean;
   lockedAction?(): unknown;
   action?(): void;
 };

addon/components/o-s-s/layout/sidebar/item.hbs

@@ -1,5 +1,7 @@
 <OSS::Anchor
   @link={{@link}}
+  @routePrefix={{@routePrefix}}
+  @disableAutoActive={{@disableAutoActive}}
   class={{this.computedClasses}}
   disabled={{this.locked}}
   {{on "click" this.onClick}}
@@ -16,13 +18,13 @@
     <div class="oss-sidebar-item__icon">
       {{yield (hash expanded=@expanded) to="icon"}}
     </div>
-  {{else}}
+  {{else if @icon}}
     <div class="oss-sidebar-item__icon">
       <OSS::Icon @style={{fa-icon-style @icon}} @icon={{fa-icon-value @icon}} />
     </div>
   {{/if}}
 
-  <div class="oss-sidebar-item__label">
+  <div class={{concat "oss-sidebar-item__label" (unless @icon " oss-sidebar-item__label--no-icon")}}>
     {{@label}}
   </div>
 

addon/components/o-s-s/layout/sidebar/item.stories.js

@@ -65,6 +65,16 @@ export default {
         type: 'text'
       }
     },
+    disableAutoActive: {
+      description: 'Disables automatic active state based on current route, managed by Ember by default',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' }
+      },
+      control: {
+        type: 'boolean'
+      }
+    },
     lockedAction: {
       description: 'Function to be called on click when item is locked',
       table: {

addon/components/o-s-s/layout/sidebar/item.ts

@@ -5,12 +5,14 @@ import type { OSSTagArgs } from '@upfluence/oss-components/components/o-s-s/tag'
 
 interface OSSLayoutSidebarItemArgs {
   link: string;
+  routePrefix?: string;
   icon?: string;
   locked?: boolean;
   hasNotifications?: boolean;
   tag?: Pick<OSSTagArgs, 'label' | 'skin' | 'icon'>;
   expanded?: boolean;
   label?: string;
+  disableAutoActive?: boolean;
   lockedAction?(): void;
   action?(): void;
 }

app/styles/organisms/sidebar.less

@@ -52,6 +52,13 @@
     }
   }
 
+  &__header {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+  }
+
   &__content {
     padding: var(--spacing-px-12) var(--spacing-px-9);
     display: flex;
@@ -87,6 +94,8 @@ a.oss-sidebar-item {
   display: flex;
   justify-content: flex-start;
   align-items: center;
+  min-width: 28px;
+  min-height: 28px;
 
   color: var(--sidebar-font-color);
   font-size: var(--font-size-sm);
@@ -108,6 +117,10 @@ a.oss-sidebar-item {
     overflow: hidden;
     white-space: nowrap;
     transition: width 300ms ease-in-out, opacity 300ms ease-in-out;
+
+    &--no-icon {
+      padding-left: var(--spacing-px-9);
+    }
   }
 
   &__notification {

tests/integration/components/o-s-s/anchor-test.ts

@@ -3,6 +3,13 @@ import { setupRenderingTest } from 'ember-qunit';
 import { render } from '@ember/test-helpers';
 import { hbs } from 'ember-cli-htmlbars';
 import sinon from 'sinon';
+import Service from '@ember/service';
+
+class RoutingMock extends Service {
+  currentState = 'index';
+  generateURL = sinon.stub().returns('/');
+  isActiveForRoute = sinon.stub();
+}
 
 module('Integration | Component | o-s-s/anchor', function (hooks) {
   setupRenderingTest(hooks);
@@ -13,15 +20,51 @@ module('Integration | Component | o-s-s/anchor', function (hooks) {
     this.transitionToStub = sinon.stub(this.router, 'transitionTo');
   });
 
-  test('When link is registered in router it renders as a anchor element', async function (assert) {
-    await render(hbs`<OSS::Anchor @link="http://www.google.fr" target="_blank" >test</OSS::Anchor>`);
+  test('When link is not registered in router it renders as a anchor element', async function (assert) {
+    await render(hbs`<OSS::Anchor @link="http://www.google.fr" target="_blank">test</OSS::Anchor>`);
 
     assert.dom('a').hasNoClass('ember-view');
+    assert.dom('a').hasAttribute('href', 'http://www.google.fr');
   });
 
-  test('When link is registered in router it renders as a linkTo helper', async function (assert) {
-    await render(hbs`<OSS::Anchor @link="index" >test</OSS::Anchor>`);
+  module('When link is registered in router', function (hooks) {
+    hooks.beforeEach(function () {
+      this.owner.register('service:-routing', RoutingMock);
+      this.routing = this.owner.lookup('service:-routing');
+    });
+
+    test('When routePrefix is defined and an internal route is given, it renders as a linkTo helper', async function (assert) {
+      const urlForStub = sinon.stub(this.router, 'urlFor').returns('/display');
+      await render(hbs`<OSS::Anchor @link="index" @routePrefix="display">test</OSS::Anchor>`);
+
+      assert.ok(urlForStub.calledWithExactly('display.index'));
+      assert.dom('a').hasClass('ember-view');
+      assert.dom('a').hasAttribute('href', '/');
+    });
+
+    test('With an internal route, it renders as a linkTo helper', async function (assert) {
+      const urlForSpy = sinon.spy(this.router, 'urlFor');
+      await render(hbs`<OSS::Anchor @link="index">test</OSS::Anchor>`);
+
+      assert.ok(urlForSpy.calledWithExactly('index'));
+      assert.dom('a').hasClass('ember-view');
+      assert.dom('a').hasAttribute('href', '/');
+    });
+
+    test('It renders as active by default when on the correct route', async function (assert) {
+      this.routing.isActiveForRoute.returns(true);
+      await render(hbs`<OSS::Anchor @link="index">test</OSS::Anchor>`);
+
+      assert.dom('a').hasClass('ember-view');
+      assert.dom('a').hasClass('active');
+    });
+
+    test('When disableAutoActive is true and the route matches, it does not render as active', async function (assert) {
+      this.routing.isActiveForRoute.returns(false);
+      await render(hbs`<OSS::Anchor @link="index" @disableAutoActive={{true}}>test</OSS::Anchor>`);
 
-    assert.dom('a').hasClass('ember-view');
+      assert.dom('a').hasClass('ember-view');
+      assert.dom('a').doesNotHaveClass('active');
+    });
   });
 });