Version 0.40.0

UI Organisms

Secondary nav

<div class="sui-o-secondary-nav">
  <button type="button" class="sui-o-secondary-nav__toggle">
    <i class="sui-a-icon">
      <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>atoms/icons/actions/reduce-nav</title><path d="M9.385 15H17v-1.667H9.385V15zm-2.267-4.167H17V9.167H7.118v1.666zM9.385 5H17v1.667H9.385V5zM3 10.112L7.118 5v10L3 10.112z" fill="#000" fill-rule="evenodd"/></svg>
    </i>
  </button>
  <div class="sui-o-secondary-nav__panel">
    <div class="sui-o-secondary-nav__header">
        <div class="sui-o-secondary-nav__pretitle">
            Project
        </div>
        <div class="sui-o-secondary-nav__title">
            My über project
        </div>
    </div>
    <div class="sui-o-secondary-nav__content">
        <a href="#" class="sui-o-secondary-nav__link">
            <span class="sui-o-secondary-nav__link-icon">
                <i class="sui-a-icon as--start">
                    ...
                </i>
            </span>
            <span class="sui-o-secondary-nav__link-label">
                Project overview
            </span>
        </a>
        <div class="sui-o-secondary-nav__category">
            Data management
        </div>
        <a href="#" class="sui-o-secondary-nav__link">
            <span class="sui-o-secondary-nav__link-icon">
                <i class="sui-a-icon as--start">
                    ...
                </i>
            </span>
            <span class="sui-o-secondary-nav__link-label">
                Jobs
            </span>
        </a>
        <a href="#" class="sui-o-secondary-nav__link as--new">
            <span class="sui-o-secondary-nav__link-update-notifier as--animate">
                New
            </span>
            <span class="sui-o-secondary-nav__link-icon">
                <i class="sui-a-icon as--start">
                    ...
                </i>
            </span>
            <span class="sui-o-secondary-nav__link-label">
                Pipelines
            </span>
        </a>
        <a href="#" class="sui-o-secondary-nav__link">
            <span class="sui-o-secondary-nav__link-icon">
                <i class="sui-a-icon as--start">
                    ...
                </i>
            </span>
            <span class="sui-o-secondary-nav__link-label">
                Project apps
            </span>
        </a>

        <div class="sui-o-secondary-nav__category">
            Data services
        </div>
        <a href="#" class="sui-o-secondary-nav__link as--coming-soon">
            <span class="sui-o-secondary-nav__link-update-notifier">
                Coming soon
            </span>
            <span class="sui-o-secondary-nav__link-icon">
                <i class="sui-a-icon as--start">
                    ...
                </i>
            </span>
            <span class="sui-o-secondary-nav__link-label">
                Datamarts
            </span>
        </a>
        <a href="#" class="sui-o-secondary-nav__link">
            <span class="sui-o-secondary-nav__link-icon">
                <i class="sui-a-icon as--start">
                    ...
                </i>
            </span>
            <span class="sui-o-secondary-nav__link-label">
                Connections infos
            </span>
        </a>

        <div class="sui-o-secondary-nav__category">
            Tools
        </div>
        <a href="#" class="sui-o-secondary-nav__link">
            <span class="sui-o-secondary-nav__link-icon">
                <i class="sui-a-icon as--start">
                    ...
                </i>
            </span>
            <span class="sui-o-secondary-nav__link-label">
                Data Science Notebooks
            </span>
        </a>
        <a href="#" class="sui-o-secondary-nav__link">
            <span class="sui-o-secondary-nav__link-icon">
                <i class="sui-a-icon as--start">
                    ...
                </i>
            </span>
            <span class="sui-o-secondary-nav__link-label">
                Monitoring
            </span>
        </a>
        <a href="#" class="sui-o-secondary-nav__link">
            <span class="sui-o-secondary-nav__link-icon">
                <i class="sui-a-icon as--start">
                    ...
                </i>
            </span>
            <span class="sui-o-secondary-nav__link-label">
                Package & Promote
            </span>
        </a>
        <a href="#" class="sui-o-secondary-nav__link">
            <span class="sui-o-secondary-nav__link-icon">
                <i class="sui-a-icon as--start">
                    ...
                </i>
            </span>
            <span class="sui-o-secondary-nav__link-label">
                Project settings
            </span>
        </a>
    </div>
  </div>
</div>

Secondary nav with multiple level

<div class="sui-o-secondary-nav as--show-level-two">
  <button type="button" class="sui-o-secondary-nav__toggle">
    <i class="sui-a-icon">
      <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>atoms/icons/actions/reduce-nav</title><path d="M9.385 15H17v-1.667H9.385V15zm-2.267-4.167H17V9.167H7.118v1.666zM9.385 5H17v1.667H9.385V5zM3 10.112L7.118 5v10L3 10.112z" fill="#000" fill-rule="evenodd"/></svg>
    </i>
  </button>
  <div class="sui-o-secondary-nav__panel">
    ...
  </div>
  <div class="sui-o-secondary-nav__panel as--level-two">
    <a href="#" class="sui-o-secondary-nav__back">
      <span class="sui-o-secondary-nav__back-icon">
          <i class="sui-a-icon">

              <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>atoms/icons/arrows/arrow-left</title><path d="M14.25 2.75a1.093 1.093 0 0 0-1.522-.023L5.774 9.272a1 1 0 0 0 0 1.456l6.954 6.545c.43.405 1.104.395 1.522-.023a1.022 1.022 0 0 0-.027-1.472L8 10l6.223-5.778a1.022 1.022 0 0 0 .027-1.472z" fill="#000" fill-rule="nonzero"/></svg>

          </i>
      </span>
        Jobs
    </a>
    <a href="#" class="sui-o-secondary-nav__parentlink">
        <i class="sui-a-icon as--start">

            <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>atoms/icons/project/project</title><path d="M8.2 3L10 4.75h7.2c.99 0 1.8.787 1.8 1.75v8.75c0 .962-.81 1.75-1.8 1.75H2.8c-.99 0-1.8-.788-1.8-1.75V4.75C1 3.788 1.81 3 2.8 3h5.4zm2.8 9v1h5v-1h-5zm-3-2v1h8v-1H8zM5 8v1h11V8H5z" fill="#000" fill-rule="evenodd"/></svg>

        </i>
        My über project
    </a>
    <div class="sui-o-secondary-nav__header">
        <div class="sui-o-secondary-nav__title">
            My über job with very long name
        </div>
        <div class="sui-o-secondary-nav__subtitle">
            Extraction >Java/Scala
        </div>
    </div>
    <div class="sui-o-secondary-nav__content">
        <a href="#" class="sui-o-secondary-nav__link">
            <span class="sui-o-secondary-nav__link-icon">
                <i class="sui-a-icon as--start">

                    <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>atoms/icons/project/jobs</title><path d="M6.294 16.5l3.177-1.588v-2.598l-3.177 1.357V16.5zm-.53-3.756l3.343-1.43-3.342-1.432-3.342 1.431 3.342 1.431zm9 3.756l3.177-1.588v-2.598l-3.176 1.357V16.5zm-.529-3.756l3.342-1.43-3.342-1.432-3.342 1.431 3.342 1.431zm-3.706-2.423l3.177-1.365v-2.2l-3.177 1.356v2.209zM10 7.186l3.648-1.564L10 4.06 6.352 5.622 10 7.186zm9 4.285v3.44c0 .398-.223.77-.587.944l-3.706 1.853a.948.948 0 0 1-.472.116.948.948 0 0 1-.471-.116l-3.706-1.853a.133.133 0 0 1-.058-.033.133.133 0 0 1-.058.033l-3.706 1.853a.948.948 0 0 1-.471.116.948.948 0 0 1-.472-.116l-3.706-1.853A1.043 1.043 0 0 1 1 14.912V11.47c0-.422.256-.803.645-.977l3.59-1.538V5.647c0-.422.257-.802.646-.976l3.705-1.588C9.72 3.025 9.86 3 10 3c.14 0 .281.025.414.083l3.705 1.588c.39.174.646.554.646.976v3.309l3.59 1.538c.397.174.645.555.645.977z" fill="#000" fill-rule="evenodd"/></svg>

                </i>
            </span>
            <span class="sui-o-secondary-nav__link-label">
                Details
            </span>
        </a>
        <a href="#" class="sui-o-secondary-nav__link">
            <span class="sui-o-secondary-nav__link-icon">
                <i class="sui-a-icon as--start">

                    <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>atoms/icons/project/logs</title><path d="M6.95 5H14a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V7v-.05A2.5 2.5 0 0 0 6.95 5zM15 7v1H5V7v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V7zM4.5 6a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z" fill="#000" fill-rule="evenodd"/></svg>

                </i>
            </span>
            <span class="sui-o-secondary-nav__link-label">
                Logs
            </span>
        </a>
        <a href="#" class="sui-o-secondary-nav__link">
            <span class="sui-o-secondary-nav__link-icon">
                <i class="sui-a-icon as--start">

                    <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>atoms/icons/project/versions</title><path d="M5 3.5h11a1 1 0 0 1 1 1v1H3v-1a1 1 0 0 1 1-1h1zm0-1a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1H5zm-2 4h14a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2zm3 6l.705.705 2.795-2.79V16.5h1v-6.085l2.79 2.795.71-.71-4-4-4 4z" fill="#000" fill-rule="evenodd"/></svg>

                </i>
            </span>
            <span class="sui-o-secondary-nav__link-label">
                Versions
            </span>
        </a>
        <div class="sui-o-secondary-nav__infos">
            <button class="sui-a-button as--success as--block">
                <i class="sui-a-icon as--start">

                    <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>atoms/icons/actions/play</title><path d="M18.004 10.405c.342-.188.342-.497 0-.684L3.351 1.577c-.342-.187-.618-.022-.618.365v16.242c0 .386.276.551.618.364l14.653-8.143z" fill="#000" fill-rule="evenodd"/></svg>

                </i>
                Run
            </button>
            <div class="sui-o-secondary-nav__infos-content">
                <div class="sui-o-secondary-nav__infos-details">
                    <div class="sui-g-grid as--fill as--middle as--no-wrap">
                        <div class="sui-g-grid__item as--flex-none">
                            <span class="sui-a-badge as--success as--sm">Success</span>
                        </div>
                        <div class="sui-g-grid__item">
                            <div class="sui-a-label-value as--sm">
                                <div class="sui-a-label-value__label">
                                    Last instance ended
                                </div>
                                <div class="sui-a-label-value__value">
                                    10 minutes ago
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="sui-o-secondary-nav__infos-details">
                    <div class="sui-g-grid as--fill as--no-wrap as--middle">
                        <div class="sui-g-grid__item as--flex-none">
                            <div class="sui-a-avatar as--stacked as--dark">
                                <img src="~assets/images/ui/atoms/avatar/woman.jpg" alt="FL" />
                            </div>
                            <div class="sui-a-avatar as--stacked as--dark">
                                <img src="~assets/images/ui/atoms/avatar/man.jpg" alt="FL" />
                            </div>
                        </div>
                        <div class="sui-g-grid__item">
                            <button class="sui-a-button as--sm as--link sui-h-text-white">+ Assign to me</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
  </div>
  <div class="sui-o-secondary-nav__panel as--level-three">
    ...
  </div>
</div>

React

Name: saagie-ui/organisms/SecondaryNav

Dependencies

React PropTypes

Example

Code Example

import React from 'react';
import { SecondaryNav, SecondaryNavToggle, SecondaryNavPanel, SecondaryNavHeader, SecondaryNavBackButton, SecondaryNavParentLink, SecondaryNavContent, SecondaryNavGroup, SecondaryNavLink, Icon, Badge } from 'saagie-ui/react';

class SecondaryNavExample extends React.Component {
  state = {
    secondaryNavExpand: true,
    SecondaryNavLevel: 3,
  };

  toggle = () => this.setState({
    secondaryNavExpand: !this.state.secondaryNavExpand,
  });

  handlePanel = (level, panel) => this.setState({
    SecondaryNavLevel: level,
  });

  render() {
    return (
      <SecondaryNav
        onToggle={this.toggle}
        onHandlePanel={this.handlePanel}
        level={this.state.SecondaryNavLevel}
      >
        <SecondaryNavToggle />
        <SecondaryNavPanel>
          <SecondaryNavHeader pretitle="data" title="Project" />
          <SecondaryNavContent>
            <SecondaryNavLink icon="overview">
              Projects
            </SecondaryNavLink>
            <SecondaryNavGroup title="Settings">
              <SecondaryNavLink icon="datamart">
                Data services
              </SecondaryNavLink>
            </SecondaryNavGroup>
            <SecondaryNavGroup title="Operations">
              <SecondaryNavLink icon="env-vars">
                Environement variables
              </SecondaryNavLink>
            </SecondaryNavGroup>
          </SecondaryNavContent>
        </SecondaryNavPanel>
        <SecondaryNavPanel name="project" level={2}>
          <SecondaryNavBackButton>
            Projects
          </SecondaryNavBackButton>
          <SecondaryNavHeader title="My über project" />
          <SecondaryNavContent>
            <SecondaryNavLink icon="overview">
              Project overview
            </SecondaryNavLink>
            <SecondaryNavGroup title="Data management">
              <SecondaryNavLink icon="jobs">
                Jobs
              </SecondaryNavLink>
              <SecondaryNavLink icon="pipelines">
                Pipelines
              </SecondaryNavLink>
              <SecondaryNavLink icon="project-apps">
                Project apps
              </SecondaryNavLink>
            </SecondaryNavGroup>
            <SecondaryNavGroup title="Data services">
              <SecondaryNavLink icon="datamart">
                Datamarts
              </SecondaryNavLink>
              <SecondaryNavLink icon="connect-infos">
                Connections infos
              </SecondaryNavLink>
            </SecondaryNavGroup>
            <SecondaryNavGroup title="Tools">
              <SecondaryNavLink icon="datascience">
                Data Science Notebooks
              </SecondaryNavLink>
              <SecondaryNavLink icon="monitoring">
                Monitoring
              </SecondaryNavLink>
              <SecondaryNavLink icon="package">
                Package & Promote
              </SecondaryNavLink>
              <SecondaryNavLink icon="settings">
                Project settings
              </SecondaryNavLink>
            </SecondaryNavGroup>
          </SecondaryNavContent>
        </SecondaryNavPanel>
        <SecondaryNavPanel name="job" level={3}>
          <SecondaryNavBackButton>
            Jobs
          </SecondaryNavBackButton>
          <SecondaryNavParentLink>
            <Icon name="project" className="as--start" />
            Project name default
          </SecondaryNavParentLink>
          <SecondaryNavHeader title="My über job" subtitle="Extraction > Java/Scala"  />
          <SecondaryNavContent>
            <SecondaryNavLink icon="overview">
              Overview
            </SecondaryNavLink>
            <SecondaryNavLink icon="logs">
              Logs
            </SecondaryNavLink>
            <SecondaryNavLink icon="versions">
              Versions
            </SecondaryNavLink>
            <div className="sui-o-secondary-nav__infos">
              <button className="sui-a-button as--success as--block">
                <Icon name="play" className="as--start" />
                Run
              </button>
              <div className="sui-o-secondary-nav__infos-content">
                <div className="sui-o-secondary-nav__infos-details">
                  <div className="sui-g-grid as--fill as--middle as--no-wrap">
                    <div className="sui-g-grid__item as--flex-none">
                      <Badge color="success" size="sm" >Success</Badge>
                    </div>
                    <div className="sui-g-grid__item">
                      <div className="sui-a-label-value as--sm">
                        <div className="sui-a-label-value__label">
                          Last instance ended
                        </div>
                        <div className="sui-a-label-value__value">
                          10 minutes ago
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div className="sui-o-secondary-nav__infos-details">
                  <div className="sui-g-grid as--fill as--no-wrap as--middle">
                    <div className="sui-g-grid__item as--flex-none">
                      <div className="sui-a-avatar as--stacked as--dark">
                        <Icon name="user" />
                      </div>
                      <div className="sui-a-avatar as--stacked as--dark">
                        <Icon name="user" />
                      </div>
                    </div>
                    <div className="sui-g-grid__item">
                      <button className="sui-a-button as--sm as--link sui-h-text-white">+ Assign to me</button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </SecondaryNavContent>
        </SecondaryNavPanel>
      </SecondaryNav>
    );
  }
}

export default SecondaryNavExample;

Arguments

Params Type Details
SecondaryNav params
children node Children elements.
className (optional) string Custom CSS class names.
level (optional) number Pass current panel level.
onToggle func Pass function to toggle expand or shrink nav.
onHandlePanel (optional) func Pass function to handle panel.
panel (optional) number Pass current panel name.
SecondaryNavBack params
children node Children elements.
tag func,string Pass a Component like react-router Link or simple string to override default a element.
className (optional) string Custom CSS class names.
targetPanelLevel (optional) number Set target panel level deft on subpanel case.
targetPanelName (optional) string Set target panel name on subpanel case.
attributes (optional) object Extra HTML attributes like id, data-, aria- etc.
SecondaryNavContent params
children node Children elements.
className (optional) string Custom CSS class names.
attributes (optional) object Extra HTML attributes like id, data-, aria- etc.
SecondaryNavGroup params
children node Children elements.
className (optional) string Custom CSS class names.
title node Title content.
attributes (optional) object Extra HTML attributes like id, data-, aria- etc.
SecondaryNavHeader params
className (optional) string Custom CSS class names.
title node Title content.
pretitle (optional) node Pretitle content.
subtitle (optional) node Subtitle content.
attributes (optional) object Extra HTML attributes like id, data-, aria- etc.
SecondaryNavLink params
children node Children elements.
tag func,string Pass a Component like react-router Link or simple string to override default a element.
className (optional) string Custom CSS class names.
icon string Name of icon related to link.
isActive (optional) bool True for as--active behavior.
targetPanelLevel (optional) number Set target panel level deft on subpanel case.
targetPanelName (optional) string Set target panel name on subpanel case.
targetPanelTitle (optional) string Set target panel title on subpanel case.
attributes (optional) object Extra HTML attributes like id, data-, aria- etc.
SecondaryNavPanel params
children node Children elements.
className (optional) string Custom CSS class names.
attributes (optional) object Extra HTML attributes like id, data-, aria- etc.
SecondaryNavParentLink params
children node Children elements.
tag func,string Pass a Component like react-router Link or simple string to override default a element.
className (optional) string Custom CSS class names.
attributes (optional) object Extra HTML attributes like id, data-, aria- etc.
SecondaryNavToggle params
children node Children elements.
className (optional) string Custom CSS class names.
attributes (optional) object Extra HTML attributes like id, data-, aria- etc.