diff --git a/ui/docs/containers/app/index.js b/ui/docs/containers/app/index.js
index 9d14c20a..2c56efdf 100644
--- a/ui/docs/containers/app/index.js
+++ b/ui/docs/containers/app/index.js
@@ -9,7 +9,10 @@ const Home = require('../home');
const Item = require('../item/');
const {
- Base
+ Base,
+ Container,
+ Row,
+ Column
} = require('../../../src');
const {
@@ -19,16 +22,24 @@ const {
module.exports = () => {
return (
-
-
-
+
+
+
+
+
+
+
+
+
+
+
);
};
diff --git a/ui/docs/containers/app/navigation.js b/ui/docs/containers/app/navigation.js
index 1d701027..68b318fe 100644
--- a/ui/docs/containers/app/navigation.js
+++ b/ui/docs/containers/app/navigation.js
@@ -4,7 +4,6 @@ const React = require('react');
const ReactRouter = require('react-router');
const Docs = require('../../../src/docs');
-const styles = require('./style.css');
const {
Link
@@ -21,19 +20,15 @@ const getList = (items, parent) => {
isNested = (typeof item !== 'string');
return (
-
+
{name}
{isNested ? getList(item, href) : null}
);
});
- const cn = classNames(
- isNested ? styles['is-nested'] : ''
- );
-
return (
-
+
);
@@ -42,7 +37,7 @@ const getList = (items, parent) => {
const Navigation = () => {
return (
-
+
diff --git a/ui/docs/containers/app/style.css b/ui/docs/containers/app/style.css
deleted file mode 100644
index dd09320a..00000000
--- a/ui/docs/containers/app/style.css
+++ /dev/null
@@ -1,108 +0,0 @@
-/* based on:
- *
- * salesforce-ux/design-system v2.1.3
- * BSD License Clause 2
- * github.com/salesforce-ux/design-system
- */
-
-
-.navigation {
- padding-top: 1.5rem;
- padding-bottom: 1.5rem;
-
- /* Arrow Icon */
- & .icon_svg {
- width: .5rem;
- height: .5rem;
- display: inline-block;
- opacity: .5;
- }
-
- /* Hide closed menu items */
- & .is-closed ul {
- display: none;
- }
-
- /* Links */
- & a {
- display: block;
- padding: .75rem 2rem;
- line-height: 1.28571428571429;
- color: #16325c;
-
- &:hover {
- background-color: rgba(244, 246, 249, .5);
- }
- }
-
- /* Active Link */
- & .is-active > a {
- background-color: #eef1f6;
- color: #0070d2;
- }
-
- /* Open Menu Items */
- & .is-open {
- padding-bottom: .5rem;
- }
-
- /* Section Selected */
- & .is-selected {
- background-color: #f4f6f9;
-
- & a:hover {
- background-color: #eceff5;
- }
-
- & .icon__svg {
- opacity: 1;
- }
- }
-
- /* Nested List */
- & .is-nested {
- margin-left: 0;
-
- & a {
- padding-top: .5rem;
- padding-bottom: .5rem;
- padding-left: 3.5rem;
- }
-
- & .is-nested a {
- padding-left: 5rem;
- }
- }
-
- @media (min-width: 48em) {
- position: fixed;
- top: 6rem;
- bottom: 0;
- border-right: 1px solid #f4f6f9;
- padding-top: 0;
- width: 15rem;
-
- & nav {
- position: absolute;
- width: 15rem;
- height: 100%;
- overflow: hidden;
- overflow-y: auto;
- outline: 0;
- }
-
- &.navigation--has-search nav {
- top: calc(2.5rem + 2px);
- bottom: 0;
- height: auto;
- }
-
- &.site-navigation--internal {
- top: 8rem;
- }
- }
-
- & .item {
- margin: 0 .5rem
- }
-}