Introduce Siteframe component [#162564229]

Signed-off-by: Reid Mitchell <rmitchell@pivotal.io>

spec/pivotal-ui-react/siteframe/header_spec.js

@@ -0,0 +1,66 @@
+import '../spec_helper';
+import {FlexCol} from '../../../src/react/flex-grids';
+import {Header} from '../../../src/react/siteframe/header';
+
+describe('Header', () => {
+  describe('without required props props', () => {
+    beforeEach(() => {
+      ReactDOM.render(<Header {...{companyName: 'Pivotal'}}/>, root);
+    });
+
+    it('renders a grid with one column', () => {
+      expect('.pui-siteframe-header').toHaveClass('grid');
+      expect('.pui-siteframe-header > .col').toHaveLength(1);
+    });
+
+    it('renders a fixed column with the company name', () => {
+      expect('.pui-siteframe-header .col:eq(0)').toHaveClass('col-fixed');
+      expect('.pui-siteframe-header .col:eq(0) h4').toContainText('Pivotal');
+    });
+
+    it('does not render a span containing the product name', () => {
+      expect('.pui-siteframe-header .col:eq(0) h4 span').not.toExist();
+    });
+  });
+
+  describe('with props', () => {
+    let companyName, onClick, logoSrc, productName, cols, logo;
+
+    beforeEach(() => {
+      companyName = 'some-company-name';
+      onClick = jasmine.createSpy('onClick');
+      logoSrc = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
+      logo = <a {...{onClick}}><img src={logoSrc}/></a>;
+      productName = 'some-product-name';
+      cols = [<FlexCol>first custom column</FlexCol>, <FlexCol>second custom column</FlexCol>];
+
+      ReactDOM.render(<Header {...{cols, companyName, logo, productName}}/>, root);
+    });
+
+    it('renders a grid with four columns', () => {
+      expect('.pui-siteframe-header').toHaveClass('grid');
+      expect('.pui-siteframe-header > .col').toHaveLength(4);
+    });
+
+    it('renders a fixed first column with the logo', () => {
+      expect('.pui-siteframe-header .col:eq(0)').toHaveClass('col-fixed');
+      expect('.pui-siteframe-header .col:eq(0) a img').toHaveAttr('src', logoSrc);
+    });
+
+    it('renders a fixed second column with the company and product names', () => {
+      expect('.pui-siteframe-header .col:eq(1)').toHaveClass('col-fixed');
+      expect('.pui-siteframe-header .col:eq(1) h4').toContainText(companyName);
+      expect('.pui-siteframe-header .col:eq(1) h4 .em-high').toHaveText(productName);
+      expect('.pui-siteframe-header .col:eq(1) span').toHaveClass('em-high');
+      expect('.pui-siteframe-header .col:eq(1) span').toHaveText(productName);
+    });
+
+    it('renders the first custom column', () => {
+      expect('.pui-siteframe-header .col:eq(2)').toHaveText('first custom column');
+    });
+
+    it('renders the second custom column', () => {
+      expect('.pui-siteframe-header .col:eq(3)').toHaveText('second custom column');
+    });
+  });
+});

spec/pivotal-ui-react/siteframe/sidebar-links_spec.js

@@ -0,0 +1,30 @@
+import '../spec_helper';
+import {SidebarLinks} from '../../../src/react/siteframe/sidebar-links';
+
+describe('SidebarLinks', () => {
+  let links, renderLink;
+
+  beforeEach(() => {
+    links = [
+      {name: 'name-1', href: 'href-1', active: true},
+      {name: 'name-2', href: 'href-2'}
+    ];
+    renderLink = ({href, name}) => <a {...{href}}>{name}</a>;
+    const className = 'pui-sidebar-primary-links';
+    ReactDOM.render(<SidebarLinks {...{links, renderLink, className}}/>, root);
+  });
+
+  it('renders a list item for each link', () => {
+    expect('.pui-sidebar-primary-links li').toHaveLength(2);
+
+    expect('.pui-sidebar-primary-links li:eq(0)').toHaveClass('pui-sidebar-li-active');
+    expect('.pui-sidebar-primary-links li:eq(0) > div:eq(0)').toHaveClass('pui-sidebar-li-content');
+    expect('.pui-sidebar-primary-links li:eq(0) > div:eq(0) > a').toHaveText('name-1');
+    expect('.pui-sidebar-primary-links li:eq(0) > div:eq(0) > a').toHaveAttr('href', 'href-1');
+
+    expect('.pui-sidebar-primary-links li:eq(1)').not.toHaveClass('pui-sidebar-li-active');
+    expect('.pui-sidebar-primary-links li:eq(1) > div:eq(0)').toHaveClass('pui-sidebar-li-content');
+    expect('.pui-sidebar-primary-links li:eq(1) > div:eq(0)> a').toHaveText('name-2');
+    expect('.pui-sidebar-primary-links li:eq(1) > div:eq(0)> a').toHaveAttr('href', 'href-2');
+  });
+});

spec/pivotal-ui-react/siteframe/sidebar_spec.js

@@ -0,0 +1,61 @@
+import '../spec_helper';
+import {Sidebar} from '../../../src/react/siteframe/sidebar';
+import {SidebarLinks} from '../../../src/react/siteframe/sidebar-links';
+
+describe('Sidebar', () => {
+  let primaryLinks, secondaryLinks, renderLink;
+
+  describe('without secondary links', () => {
+    beforeEach(() => {
+      primaryLinks = [
+        {name: 'primary-link-1'},
+        {name: 'primary-link-2'}
+      ];
+      renderLink = () => null;
+      spyOnRender(SidebarLinks);
+      ReactDOM.render(<Sidebar {...{primaryLinks, secondaryLinks, renderLink}}/>, root);
+    });
+
+    it('renders the upper SidebarLinks component only', () => {
+      expect(SidebarLinks).toHaveBeenRenderedWithProps({
+        links: primaryLinks,
+        renderLink,
+        className: 'pui-sidebar-primary-links'
+      });
+
+      expect(SidebarLinks).toHaveBeenRenderedTimes(1);
+    });
+  });
+
+  describe('with secondary links', () => {
+    beforeEach(() => {
+      primaryLinks = [
+        {name: 'primary-link-1'},
+        {name: 'primary-link-2'}
+      ];
+      secondaryLinks = [
+        {name: 'secondary-link-1'},
+        {name: 'secondary-link-2'}
+      ];
+      renderLink = () => null;
+      spyOnRender(SidebarLinks);
+      ReactDOM.render(<Sidebar {...{primaryLinks, secondaryLinks, renderLink}}/>, root);
+    });
+
+    it('renders the upper SidebarLinks component', () => {
+      expect(SidebarLinks).toHaveBeenRenderedWithProps({
+        links: primaryLinks,
+        renderLink,
+        className: 'pui-sidebar-primary-links'
+      });
+    });
+
+    it('renders the lower SidebarLinks component', () => {
+      expect(SidebarLinks).toHaveBeenRenderedWithProps({
+        links: secondaryLinks,
+        renderLink,
+        className: 'pui-sidebar-secondary-links'
+      });
+    });
+  });
+});

spec/pivotal-ui-react/siteframe/siteframe_spec.js

@@ -0,0 +1,147 @@
+import '../spec_helper';
+import {Siteframe} from '../../../src/react/siteframe';
+import {Header} from '../../../src/react/siteframe/header';
+import {Sidebar} from '../../../src/react/siteframe/sidebar';
+import {SidebarLinks} from '../../../src/react/siteframe/sidebar-links';
+
+describe('Siteframe', () => {
+  let headerProps, sidebarProps;
+
+  beforeEach(() => {
+    spyOnRender(SidebarLinks);
+    spyOnRender(Header).and.callThrough();
+    spyOnRender(Sidebar).and.callThrough();
+
+    headerProps = {
+      cols: [],
+      companyName: 'some-company',
+      logoOnClick: () => undefined,
+      logo: null,
+      productName: 'some-product'
+    };
+    sidebarProps = {
+      primaryLinks: [{name: 'name1', href: '/href1'}, {name: 'name2', href: '/href2'}],
+      secondaryLinks: [{name: 'name3', href: '/href3'}, {name: 'name4', href: '/href4'}],
+      renderLink: () => null
+    };
+  });
+
+  describe('with only children', () => {
+    beforeEach(() => {
+      ReactDOM.render(<Siteframe>
+        <div className="siteframe-child">siteframe-child</div>
+      </Siteframe>, root);
+    });
+
+    it('renders the siteframe', () => {
+      expect('.pui-siteframe').toExist();
+    });
+
+    it('does not render the header', () => {
+      expect(Header).not.toHaveBeenRendered();
+    });
+
+    it('renders the siteframe body', () => {
+      expect('.pui-siteframe > div:eq(0)').toHaveClass('pui-siteframe-body');
+      expect('.pui-siteframe > div:eq(0)').toHaveClass('grid');
+      expect('.pui-siteframe > div:eq(0)').toHaveClass('grid-nogutter');
+    });
+
+    it('does not render the sidebar', () => {
+      expect(Sidebar).not.toHaveBeenRendered();
+    });
+
+    it('renders the child', () => {
+      expect('.pui-siteframe > .pui-siteframe-body > .col:eq(0) > .siteframe-child').toExist();
+      expect('.pui-siteframe > .pui-siteframe-body > .col:eq(0) > .siteframe-child').toHaveText('siteframe-child');
+    });
+  });
+
+  describe('with header and children', () => {
+    beforeEach(() => {
+      ReactDOM.render(<Siteframe {...{headerProps}}>
+        <div className="siteframe-child">siteframe-child</div>
+      </Siteframe>, root);
+    });
+
+    it('renders the header', () => {
+      expect(Header).toHaveBeenRenderedWithProps(headerProps);
+      expect('.pui-siteframe > div:eq(0)').toHaveClass('pui-siteframe-header');
+    });
+
+    it('renders the siteframe body', () => {
+      expect('.pui-siteframe > div:eq(1)').toHaveClass('pui-siteframe-body');
+      expect('.pui-siteframe > div:eq(1)').toHaveClass('grid');
+      expect('.pui-siteframe > div:eq(1)').toHaveClass('grid-nogutter');
+    });
+
+    it('does not render the sidebar', () => {
+      expect(Sidebar).not.toHaveBeenRendered();
+    });
+
+    it('renders the child', () => {
+      expect('.pui-siteframe > .pui-siteframe-body > .col:eq(0) > .siteframe-child').toExist();
+      expect('.pui-siteframe > .pui-siteframe-body > .col:eq(0) > .siteframe-child').toHaveText('siteframe-child');
+    });
+  });
+
+  describe('with sidebar and children', () => {
+
+    beforeEach(() => {
+      ReactDOM.render(<Siteframe {...{sidebarProps}}>
+        <div className="siteframe-child">siteframe-child</div>
+      </Siteframe>, root);
+    });
+
+    it('does not render the header', () => {
+      expect(Header).not.toHaveBeenRendered();
+    });
+
+    it('renders the siteframe body', () => {
+      expect('.pui-siteframe > div:eq(0)').toHaveClass('pui-siteframe-body');
+      expect('.pui-siteframe > div:eq(0)').toHaveClass('grid');
+      expect('.pui-siteframe > div:eq(0)').toHaveClass('grid-nogutter');
+    });
+
+    it('renders the sidebar', () => {
+      expect(Sidebar).toHaveBeenRenderedWithProps(sidebarProps);
+      expect('.pui-siteframe > .pui-siteframe-body > .col:eq(0)').toHaveClass('col-fixed');
+      expect('.pui-siteframe > .pui-siteframe-body > .col:eq(0) > .pui-siteframe-sidebar').toExist();
+    });
+
+    it('renders the child', () => {
+      expect('.pui-siteframe > .pui-siteframe-body > .col:eq(1) > .siteframe-child').toExist();
+      expect('.pui-siteframe > .pui-siteframe-body > .col:eq(1) > .siteframe-child').toHaveText('siteframe-child');
+    });
+  });
+
+  describe('with header, sidebar, and children', () => {
+    beforeEach(() => {
+      ReactDOM.render(<Siteframe {...{headerProps, sidebarProps}}>
+        <div className="siteframe-child">siteframe-child</div>
+      </Siteframe>, root);
+    });
+
+    it('renders the header', () => {
+      expect(Header).toHaveBeenRenderedWithProps(headerProps);
+      expect('.pui-siteframe > div:eq(0)').toHaveClass('pui-siteframe-header');
+    });
+
+    it('renders the siteframe body', () => {
+      expect('.pui-siteframe > div:eq(1)').toHaveClass('pui-siteframe-body');
+      expect('.pui-siteframe > div:eq(1)').toHaveClass('grid');
+      expect('.pui-siteframe > div:eq(1)').toHaveClass('grid-nogutter');
+    });
+
+    it('renders the sidebar', () => {
+      expect(Sidebar).toHaveBeenRenderedWithProps(sidebarProps);
+      expect('.pui-siteframe > .pui-siteframe-body > .col:eq(0)').toHaveClass('col-fixed');
+      expect('.pui-siteframe > .pui-siteframe-body > .col:eq(0) > .pui-siteframe-sidebar').toExist();
+    });
+
+    it('renders the child', () => {
+      expect('.pui-siteframe > .pui-siteframe-body > .col:eq(1) > .siteframe-child').toExist();
+      expect('.pui-siteframe > .pui-siteframe-body > .col:eq(1) > .siteframe-child').toHaveText('siteframe-child');
+    });
+  });
+});

src/css/siteframe/index.js

@@ -0,0 +1,3 @@
+try {
+  require('./siteframe.css');
+} catch (e) {}