sap / fundamental

Fundamental Library - SAP Design System Component Library

SAP Fundamentals

SAP Fundamentals is deprecated. Fundamental Styles is its successor. If you are using this library consider migrating over to fundamental-styles. SAP Fundamentals' Documentation Site is hosted here for time being.

What is SAP Fundamentals?

SAP Fundamentals is a light-weight presentation layer that can be used with your UI framework of choice (e.g. Angular, React, Vue, etc.). With Fundamentals’ library of stylesheets and HTML tags, developers can build consistent Fiori apps in any web-based technology.

Learn more at http://sap.github.io/fundamental/old.html

We are also working on Angular, React and Vue implementations.

Getting Started

The library is modular so you can use as little or as much as you need.

CDN

The fully compiled, minified library is available via CDN for inclusion in your application.

<link href="//unpkg.com/fiori-fundamentals@latest/dist/fiori-fundamentals.min.css" rel="stylesheet">

NPM Package

The compiled CSS for the full library and modules, e.g., core, layout, etc., are distributed via NPM along with the SASS source.

This gives you incredible flexibility to use individual components and enable advanced customization options.

npm install fiori-fundamentals --save

NOTE: We only distribute the fonts, icons and compiled CSS and the SASS source, not the full project or HTML for specific components. If your project uses LESS, see LESS compatible Fiori Fundamentals.

Working with the Project

Download and Installation

1. Clone Repository - Clone the repo using the git software of your choice or using the git command git clone https://github.com/SAP/fundamental.git

2. Install NPM Dependencies: npm install

3. Install Ruby Gems - These gems are needed to be installed for the documentation site. Navigate to the docs folder and gem install ruby bundler jekyll

4. Serve the documentation website locally - npm start

5. Serve the development playground locally: npm run start:playground

Project Dependencies

The project has the following prerequisites:

• Git (for downloading this repo)
• Node LTS
• Ruby (for running the documentation website locally)

Known Issues

Configuring icons path when importing SCSS

If you are importing .scss files in your project, the icons path needs to be configured in your project's .scss file before the Fiori Fundamentals scss import as described below. Please note that the path variable name has to be $fd-icons-path in order to override the default value set in scss/icons/icon.scss.

$fd-icons-path : "../node_modules/fiori-fundamentals/scss/icons/"; // should be declared before the scss import

@import "../node_modules/fiori-fundamentals/scss/all.scss";

Support

If you encounter an issue, you can create a ticket or post on the Fundamentals Slack channel.

Contributing

If you want to contribute, please check the Contribution Guidelines. Also check the Development Guidelines and Visual Testing Guide.

Versioning

The fiori-fundamentals library follows Semantic Versioning. These components strictly adhere to the [MAJOR].[MINOR].[PATCH] numbering system (also known as [BREAKING].[FEATURE].[FIX]).

Merges to the main branch will be published as a prerelease. Prereleases will include an rc version (e.g. [MAJOR].[MINOR].[PATCH]-rc.[RC]).

The following circumstances will be considered a MAJOR or BREAKING change:

• Droppping existing classnames, css variables, color names, color groups, spacing parameters
• The existing underlying HTML markup of a component is altered
• An existing unit test is altered to account for either of the above

The following circumstances will NOT be considered a MAJOR or BREAKING change:

• Introducing new classnames, css variables, color names, color groups, spacing parameters
• Non-visual HTML attribute changes/additions (such as role, aria-*, data-*)
• Adding or modifying CSS properties and values of existing classnames.
• An existing unit test is altered to account for non-visual HTML attribute changes/additions (such as role, aria-*, data-*)

fundamental's Issues

fix global css on website

Site: Feedbacks for Typography page

@saadmhybris

• 1. Header is Typography
• 2. Header font weight
• 3. Roboto: Header: Roboto Bold
• 4. Roboto: Header bottom margin
• 5. Roboto: The “Rr” and “ABCD…” on the right should align the bottom
• 6. Roboto: the bottom margin of “Rr” should be 36px
• 7. Roboto: subheader: Roboto Regular,13px
• 8. Roboto: spacing between each font size: 20px
• 9. Open Sans: header: Open Sans, Bold
• 10. Open Sans: Text on the right: Open Sans Senmibold, 20px, 24 line height
• 11. Open Sans: the bottom margin of “Aa” should be 36px
• 12. Open Sans: spacing between each font size: 20px

Update readme copy

We need to refine the copy the GitHub repo readme file.

We got some feedback from Jonathan who is reviewing the project for making it public.

For your description: So, I’m looking around at different projects. When I read your description, what I’m left wondering is: what problem are you solving? I would also point out that although you may work WITH other technologies (and the number is limitless) you work IN specific technologies (for example, HTML and CSS). So these are visual components, written for HTML5, that run in any browser with compatibility X. Correct?

So, two things. Describe who would use your components, and why. Then describe the environment your components run inside, so they can be “grouped” with similar solutions. (For example, your project might add on to Bootstrap, or other HTML layout/visual HTML components in that category, but is NOT like AngularJS or ReachJS frameworks for web).

Site: Layout

https://sap.github.io/fundamental/layouts.html

We should remove this link on the left for now until we get the content figured out for our next release

Migration Changes to the Library

Tasks

• Test the library code dev environment is running
• Change namespaces and other old Techne related identifiers
• Test building process

Pkg: Refactor pagination component

There are a few problems.

• The __total is invalid as a span inside a list. There are two primary parts to the pagination — the total and the nav. These should be separated more clearly.

<nav class="tn-pagination" role="navigation">
    <span class="tn-pagination__total"></span>
    <ul class="tn-pagination__nav">
    </ul>
</nav>

• The SCSS should not @extend the icon class. Instead, the first and last __item containers should have modifiers. The --prev container can be flipped if needed to simulate the back chevron. Even better, we should have a back icon in the collection. NEVER @extend a class outside the current working SASS file. It creates a dependency we should avoid.

<li class="tn-pagination__item"> 
    //icon button
</li>
<li class="tn-pagination__item tn-pagination__item--next"> 
    //icon button
</li>

 &__item {
     &--prev {
        transform: rotate(180deg);
    }
}

• The buttons above can be links to match the other elements. The .tn-button component supports a elements too. It may be worth considering not using buttons here and looking at the tn-nav implementation.

<a href="#" class="tn-button tn-button--text tn-button--icon tn-button--small" aria-label="Previous">
    <span class="tn-icon tn-icon--chevron-back tn-icon--small" role="presentation"></span>
</a>

• The __more indicator does not need to be it's own element. It can be a modifier of the __link element. The various aria attributes are redundant. The presentation role means to ignore it so a label is not needed.

<li class="tn-pagination__item">
    <span class="tn-pagination__link tn-pagination__link--more" 
        role="presentation">…</span>
</li>

• Remove the <br> at the end of the component macro.

Lib: Update theme to use new name

Change from techne to fundamental

Publish Website to gh-pages manually

As the first deployment to gh-pages and not loose much time it will be manually.

Docs: Create a design system cheat sheet guide

We should have a single-pager cheat sheet that illustrates the design system — type, spacing, colors — and the functions and mixins (and helpers) available to access those in the library.

This will be useful for both designers and developers implementing the design system.

Site: apply design to getting started - designer page

Update getting started designer page - https://sap.github.io/fundamental/getting-started-designers.html

with this design - https://zpl.io/2ZqYKW4

Design assets

Release Design Resources

Description

For UX Designers we need design resources which they can download. Those resources will contain predefined components that the designers will use to easily mockup Fundamental UI screens.

Tasks

• Decide which format(s) are we releasing: Sketch, Axure, Photoshop, Vector (SVG), Adobe XD
• Prepare it for release
• Review

Change "Notification" heading to "Warning" on alerts page.

alerts page typo - http://sap.github.io/techne/alert.html

Component: Info Box

Description

The Info Box Component is used to Display Static Information and can contain simple actions that can be performed over the displayed information.

Features

• 1. The Info Box is a standalone component that can be used inside panels, sections, grids or cards.
• 2. The information displayed can be divided by rows
• 3. The information inside the row can contain two main parts
  • 3.1. The title of the row, which describe the information displayed on the row
    • 3.1.1. The tile can display very simple information like labels and icons
  • 3.2. The content which is were the actual information is displayed
    • 3.2.1. The content can display more complex information and have some formatting for it
    • 3.2.2. The content area can display few actions that can be performed on the displayed information
  • 3.3. The row can only contain the content, without a title part (3.1)
• 4. The information inside a row can be displayed in an horizontal or vertical layout.
  • 4.1. Horizontal: the title (3.1) is displayed above the content (3.2)
    Action
    The user can edit both on a high level section or per line.
    Include inline field for edit per line.
    Edit high level section in a modal/ side panel depending on application.

Tasks

• Design wireframes describing the features described above
  https://6umx4d.axshare.com/#g=1&p=info_component_v_1_d
  https://6umx4d.axshare.com/#g=1&p=info_component_v_1_m

• Visuals

Some use cases/Prior art

Refactor theming for customized SCSS implementations

This is an open story because it is part investigation that will lead to code updates.

Problem

Using the FDUI library from the SASS source presents some problems. We want users to be able to pick and choose parts of the library and add new variables while still using the toolkit.

For example, if I want to add colors to the baseline, in my custom.scss I should be able to define something like this.

$fd-colors: (
    foo: (
        1: purple,
        2: yellow
    ),
    text: (
      1: pink,
      2: green,
      3: orange
    )
);

And expect that these would be merged into the colors map where foo are new and text overrides existing colors. Then I should be able to access these in subsequent SCSS using fd-color(foo,2)and expect helpers are generated like.fd-color-foo-1`.

Must ensure the variables can be accessed globally and in standalone components.

Address

• Icons throw an error due to pathing
• Pagination component used icons (see above)
• Custom themes require a full map instead of merging a partial map
• Order of theme vs. settings needs to be clear
• An approach must be set to allow standalone components to use custom vars
• Consider distributing themed CSS

Outputs

• Code changes
• Documentation changes
• WIKI reference

Site: Feedbacks for Homepage

Hey Saad here's the specs for issues I found on the current site. Some of them are repeated but I just don't want to miss anything. @saadmhybris

• 1. Sidenav: width
• 2. Sidenav: search bar bottom margin
• 3. Hero image: Button margin top/bottom
• 4. Hero image: the Version:v1.0.0-BETA has a background
• 5. Getting started: height of the section
• 6. Getting started: the background images are a bit off
• 7. Designer: size of the “DESIGNER” and “developers”image
• 8. Designer: spacing between the image and “START DESIGNING”
• 9. “START DEVELOPING” should be on the developer section
• 10. UI Guidelines: top and bottom padding of the text and image div
• 11. UI Guidelines: Margin between title and subtitle
• 12. UI Guidelines: The image for spacing has a white grid background. The image needs to be update
• 13. Support: top and bottom padding of the text and image div
• 14. Support: the two icons need to be switched.
• 15. Support: Bottom margin of the icons

Release: v1.0-beta-3 release notes

We can track the work for writing/reviewing release notes.

Remove CDN folder as it is no longer needed.

remove ./cdn

Update dev getting started.

update getting started page and readme.mb with the step for bundle install from docs folder to install bundle dependencies.

Iconfont problem when using the SCSS source

Problem

When using the SCSS file from the NPM distribution folder.
Importing the scss/all.scss

The SCSS compiler drops this error

ERROR in ./node_modules/css-loader?{"sourceMap":false,"import":false}!./node_modules/postcss-loader/lib?{"ident":"postcss","sourceMap":false}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":false,"precision":8,"includePaths":[]}!./node_modules/fundamental-ui/scss/all.scss
Module not found: Error: Can't resolve './FundamentalIcons.woff2' in '/Users/d068263/Documents/projects/fundamental-kitchensink/node_modules/fundamental-ui/scss'
resolve './FundamentalIcons.woff2' in '/Users/d068263/Documents/projects/fundamental-kitchensink/node_modules/fundamental-ui/scss'
  using description file: /Users/d068263/Documents/projects/fundamental-kitchensink/node_modules/fundamental-ui/package.json (relative path: ./scss)

The problem seems to be on the scss/icons/icons.scss file that has a relative path to the inconfont files.

Lib: Remove icons import from pagination

The icons font path is not working when trying to use FDUI from the SASS source. You can not include the icons file but that file is imported into pagination and therefore throws an error.

Failed to compile.

./node_modules/css-loader?{"sourceMap":false,"import":false}!./node_modules/postcss-loader/lib?{"ident":"postcss","sourceMap":false}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":false,"precision":8,"includePaths":[]}!./src/scss/app.scss
Module not found: Error: Can't resolve './FundamentalIcons.woff' in '/Users/i860395/Workspace/spartacus-ui/src/scss'
 @ ./node_modules/css-loader?{"sourceMap":false,"import":false}!./node_modules/postcss-loader/lib?{"ident":"postcss","sourceMap":false}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":false,"precision":8,"includePaths":[]}!./src/scss/app.scss 7:99479-99513
 @ ./src/scss/app.scss
 @ multi ./src/scss/app.scss

The SCSS should not @extend the icon class. Instead, the first and last __item containers should have modifiers. The --prev container can be flipped if needed to simulate the back chevron. Even better, we should have a back icon in the collection. NEVER @extend a class outside the current working SASS file. It creates a dependency we should avoid.

<li class="tn-pagination__item"> 
    //icon button
</li>
<li class="tn-pagination__item tn-pagination__item--next"> 
    //icon button
</li>

 &__item {
     &--prev {
        transform: rotate(180deg);
    }
}

Assess which components names need to be changed

We have now the suggested names, along with the Fiori name for the "comparable" component at:
https://wiki.hybris.com/display/yintfdes/Comparison+of+Fundamental+and+Fiore+Components

Tasks

• Assess which of the Fundamental UI components should be really change.

Note: Some of the Fiori components are more abstract and have more functionality, for example Fiori Lists.

Documentation for Layouts & Starter Pages is broken/missing

EDIT: duplicate

Site: Feedbacks for Color page

@saadmhybris

• 1. Side margin of the body
• 2. Weight and color of the title
• 3. The intro text takes only 6 col
• 4. Color blocks: margin between the subtitle to the block
• 5. Color blocks: size of the block and text spacing in the block
• 6. Color blocks: Vertical spacing between blocks
• 7. Accessibility: Subtitle, weight and color
• 8. Accessibility: The whole section is 6 col
• 9. Accessibility: there’s a link in the intro text “WCAG AA standards”
• 10. Accessibility: Spacing between intro text and subtitle
• 11. Accessibility: spacing between subtitle and text block
• 12. Accessibility: spacing between text block and next subtitle
• 13. Accessibility: spacing between last text block and the footer
• 14. Footer: “Have a question…GitHub.” should be in one line
• 15. Footer: The link color is purple

Update Website Component index page

Page:
http://localhost:4000/components.html

Tasks

• Reduce the cards links only to the Components. Not to show the rest of the pages like: "Getting Started" and other Design Style pages.
• Add the images corresponding from
  https://app.zeplin.io/project/59fc8d826e1e5e806854ddbf/screen/5a4cf9d5b407a8391fd42ec6

Remove Bootstrap dependency on the website

Problem

We don't use the bootstrap layouts anywhere in the Fundamental Website.

Tasks

• Check the main templates to see where we still use the bootstrap layout clases
• Replace the bootstrap layout classes with Fundamental components or custom styles

Changes to the Library components based on the Kitchensink angular app

On the kitchensink application there is a override CSS file with fixes to some Fundamental Component styles.
https://github.com/joseegm/fundamental-kitchensink/blob/master/src/styles.css

From that, these are the main changes to be made before the beta:

• L2: Modify app level layout to cover all the browser window
• L11: Badges doesn't have any margin to separate them from other badges or other content
• L13: Add margin to give more breathing space to the last content of the page
• L15: Containers doesn't grow to the with of the parent
• L21: Some separation for the status is missing
• L23: Card actions are missaligned
• L27: Problem with hover state on disabled items
• L31: Tree doesn't grow to the parent width
• L41, L43: Form items margins are missing

Site: Starter Pages

https://sap.github.io/fundamental/starter-pages.html

All links on the starter pages are broken. Need the resources for other team members.

Prepare repo for review and publishing

The following tasks are needed to be able to continue the publishing process.

Tasks

• Add 1.0 Beta code from Techne v2.0 Alpha
• Add content to the README.md file - Structure is mandatory from https://jam4.sapjam.com/wiki/show/xPbngPlyfQkPnsfgNxWgx9
• Add content to the CONTRIBUTING - based on https://github.com/SAP/openui5/blob/master/CONTRIBUTING.md

Project: Release process

Goal: Formalize release process.

Now that we finally have a separate repo for FDUI, we need to formalize the release process.

Todo:

• Document the release process for github.
• Document the release process for NPM.
• Get in touch with Wookies to see if we still need to be registered with dev portal documentation service.
• Establish a release notes process.

Site: Feedbacks for Grid page

@saadmhybris

• 1. Bottom margin of the title
• 2. The intro text is 6 col
• 3. Basic structure: top and bottom margin of the subtitle
• 4. Breakpoints: the section is 6 col
• 5. Breakpoints: Bottom margin of the title
• 6. Breakpoints: Top and bottom margin of the subtitle

Design Date picker

Description

New component for Fundamental UI that allows to select a date.

Features

• 1. The component can be used inside a form containing other inputs components
• 2. The component interaction should display a whole month with weekly rows
  • 2.1. The weekdays should be visible
  • 2.3. The year should be visible
• 3. The user should be able to navigate forwards backwards, one month at a time, inside de component
• 4. The component should have a collapsed/standard state and a expanded state
  • 4.1. The collapsed state display only the date in a short format. eg: 10.10.2010
    • 4.1.1. The collapsed state should display a trigger for the interaction to display the elements described in 2.
    • 4.2. The expanded state should always show the elements from 2.
      • 4.2.1. The expanded stated should display the selected date clearly and highlight the current selected day

Move Techne v2.0 Code

Tasks

• Copy code Verbatim
• Clean old and unused files
• Update readme and some documentation files

Ops: setup automatic branch deployment for reviews.

For internal review, set up automatic deployment to the internal staging server.

Site: Feedbacks for Spacing page

@saadmhybris

• 1. All text are in 6 col
• 2. Base Unit of 4: top and bottom margin of the subtitle
• 3. Base Unit of 4: the blocks are in 6 col
• 4. Understanding Sections and Panels: subtitle, Lato, 16, Bold, all uppercase
• 5. Understanding Sections and Panels: the second image need to be changed

Project: Solve potential security issue with nokogiri

Update namespace of SASS and test components

All components and test files should use fd prefix instead of tn.

Docs: Publish getting started tutorial for teams using the SASS source

Some info exists here ...
https://github.com/SAP/fundamental/wiki/Advanced-Customization

Emphasis should be on using the functions and mixins to access the design system. The further teams stray from the system the more difficult it will be to implement updates.

---

More info ...

Design system

The site shows specs for colors, spacing and type and you can compare these to the SASS implementation as maps in core/_settings.css.

Such as spacing ...

//spacing
$fd-spacing--base: 4px;
$fd-spacing: (
    base: $fd-spacing--base,    //4
    xs: $fd-spacing--base * 2,  //8
    s: $fd-spacing--base * 3,   //12
    reg: $fd-spacing--base * 5, //20
    m: $fd-spacing--base * 10,  //40
    l: $fd-spacing--base * 25,  //100
    xl: $fd-spacing--base * 37, //148
) !default;

To access that map, I can use the fd-space function and simply pass the size key (or an integer).

margin-bottom: fn-space(xs); //returns 8
padding-bottom: fn-space(6); //returns 24

For type, I use a fd-type mixin since it returns multiple rules.

@include fd-type(5);

returns

font-size: 2.8125rem;
line-height: 1.15556;
font-family: sans-serif;
font-weight: 500

There are many variables available already for global styling which all use the maps to ensure consistency. The idea is that devs should rarely hard-code a color, font-sizes, etc. that is part of the design system.

Customization

We provide a CDN link to bring in the full, compiled library if you have no customization needs, you get the default look and feel on which you can add new components and stylings.

However, many teams need direct control and will want to use the source. I compiled a quick guide to show how to implement and new theme and redefine variables to suit your needs.

https://github.com/SAP/fundamental/wiki/Advanced-Customization

Most CSS rules that can be themed are available as variables, globally and at the component level. We use a CSS-rule naming system with modifiers. The prefix is the rule the value would be used for and modifier indicates variations.

$fd-font-family           //global default
$fd-font-family--header
$fd-font-family--code
$fd-font-size             //global default
$fd-color                 //global default
$fd-color--link
$fd-color--error
$fd-margin-bottom         //global default

More specific variables use an additional prefix.

$fd-forms-padding
$fd-forms-color--placeholder
$fd-forms-background-color
$fd-forms-border-color

And components use their block name as a prefix.

$fd-tabs-margin-bottom
$fd-tabs-border-width
$fd-tabs-border-color

Any and all of these variables can be redefined in your custom theme file.

Fundamental Icons

Problems

1. The current fundamental UI icons have a different style: line height, some rounder corners or squared.
2. The current library have some icons that are not used directly by our components

Alternatives

1. We clean -remove the unused icons- and change the Style of the current library
   Pros: keep the library simple and with no dependencies
   Contra: no
2. Use an Fiori Icon Library
   Pro: gain a lot more icons with a coherent style
   Contra: introduce a dependency. no much information if we can distribute the icon library with our own.
3. Use an external Icon Library
   Pro: gain a lot more icons with a coherent style
   Contra: introduce a dependency. unknown if we can distribute it.

sync version number

the version number is out of sync on npm, docs site. update so that they all match.

Website Font Style bleeding inside the components

Problem

The Styles of the Website are cascading and bleeding inside the components.

For example the cards

This only happen on the website, the kitchen sink app have the correct font

Tasks

• Check all components on the website where this problem might be happening - Leo, Jinjia
• Change the affected components

Results

• List of all affected components
• Changes to the components in the library code

Add !default flag to space and font vars

In the core/_settings file the base font and spacing sizes do not have a !default flag meaning they cannot be modified in a theme.

https://github.com/SAP/fundamental/blob/master/scss/core/_settings.scss#L16
https://github.com/SAP/fundamental/blob/master/scss/core/_settings.scss#L28

Publish NPM package

Tasks

• Check the library building process is working properly
• Check dist paths and filenames are correct to Fundamental -not Techne
• Change package.json to Fundamental v1.0-beta; also description license and others.
• Create new package on npm.org
• Connect npm to github and other configuration needed
• Release Fundamental v1.0-beta on github / push new version to npm
• Check the new package is working / downloading properly - @saadmhybris, @xak, @ joseegm

Component Taxonomy match with Fiori

Description

The Fundamental UI Components should have the same name as their Fiori counterpart

First matching

https://wiki.hybris.com/display/yintfdes/Comparison+of+Fundamental+and+Fiore+Components

Tasks

• Fundamental Components comparison against Fiori Components
• Define the nomenclature and Taxonomy changes
• Identify missing components in Fundamental UI.

Migration changes to the Website

Tasks

• Change references to the new build of Fundamental, not referencing to Techne CSS/SCSS files
• Change all namespaces on the CSS classes on the website
• Change all website references to Techne in build process, files, folders etc.
• Test the website build process
• Visual check - @jose

Fix gulp icons task.

Fix gulp icons task by installing lodash as a dev dependency.

npm install --save-dev lodash

Dashboard Components

Description

Research and Design a set of components or changes to current components to allow constructing Dashboard screens with Fundamental Components.

Features

• 1. The dashboard screen should support showing different metrics
• 2. The dashboard elements that contain the metrics should support different sizes
• 3. The dashboard elements that contain the metrics should be able to show and perform actions that change the element or the way the information is displayed inside
  • 3.1 The dashboard elements can be used as a navigation point
    • 3.1.1 The dashboard elements used as a navigation points should have a different visual style
• 4. The dashboard screen can also support other Fundamental UI Components

Tasks

• Find a suitable name for the Dashboard elements that works with the Fundamental UI names currently in use; also a name for the different parts of the Dashboard element
• Identify the types of Dashboard elements: single metric, chart, actions, etc
• Research if the current Fundamental UI Card component can support the identified types of Dashboard elements
• Design the common layout of the Dashboard element to support all features
• Design the interaction inside the Dashboard element: actions, charts, etc.

Deliverables

• Dashboard element name and the parts names as well
• Table with description of different types of Dashboard elements indentified
• Wireframes describing the different types of Dashboard elements
  • Wireframes describing the different types of Dashboard elements parts
  • Wireframes describing the Interactions of the Dashboard elements
• Wireframes of a sample full Dashboard screen that showcase all the types of Dashboard elements and their interaction

Update CDN links

Update CDN links.

• readme.md
• docs/pages/fundamentals/getting-started-developer.html

Visual Experiments for the Fiori Aproximation

Description

Experiment how the Current version of the library will looks like if we approximate it to Fiori.

Tasks

• Change only the global color palette using Belize colors
  --> Result: https://app.zeplin.io/project/5a5faea7d41af9a6b277e603
• Visual Experiment in Fiori Direction
• Visual Experiment in PIM Style Direction

Update icons to use new name

The generated font file should be renamed

Top and Side Navigation

Description

The Top and Side navigation will support intra and inter navigation on Fundamental UI Applications.

Intra app navigation: navigation inside a single, standalone application. Inter app navigation: navigation to other, related standalone applications.

Features

1. Top navigation:
   1.1 Can be used standalone without the side navigation
   1.2 Support for application branding, logo and name
   1.3 Support for Inter application navigation
   1.4 Support for Intra application navigation: access main application areas
   1.4.1 Should clearly display the current application area
   1.5 Support for application global actions: help, profile, settings, configuration, etc.
   1.6 Support for application wide search.
   1.7 Support a way to show/collapse the side navigation

2. Side navigation:
   2.1 Can be used standalone without the Top navigation
   2.2 Support for application branding, logo and name
   2.3 Support for Intra application navigation: access main application areas
   2.3.1 Support for deeper Intra application navigation: collapsible options, etc.
   2.3.2 Should clearly display the current navigation node
   2.4 Support for application global search
   2.5 Support for global actions: help, profile, settings, configuration, legal information, etc.

3. The Top and Side navigation can be use independently depending on the type of application.

Tasks

• Investigate the current UIs.
• Wireframes for features on the Top Navigation
• Wireframes for features on the Side Navigation
• Review Wireframes
• Visuals for the Top Navigation
• Visuals for the Side Navigation
• Review Visuals

Wires

https://5dh5bc.axshare.com/#g=1&p=launchpad_header

Visuals

https://app.zeplin.io/project/598cce4ab8aced8f15a420a1/screen/5a940e0faa10e027813e7ecb