vcc-ui/es/components/nav/stories.js

VCC UI is a collection of React UI Components that can be used for developing front-end applications at Volvo Car Corporation.

import React from "react";
import { storiesOf } from "@storybook/react";
import { object, withKnobs } from "@storybook/addon-knobs";
import { Nav, Block, Logo } from "../../index";
import { render } from "../../../stories/render";
import { loremIpsum } from "../../../stories/fixtures";
import { ThemeProvider } from "../../theme-provider";
storiesOf("Nav", module).addDecorator(render).addDecorator(withKnobs).addWithJSX("plain", function () {
  return React.createElement(Block, null, React.createElement(Nav, null, React.createElement(Block, {
    extend: {
      padding: "20px 0"
    }
  }, React.createElement(Logo, {
    type: "square"
  }))), React.createElement(Block, {
    extend: {
      marginTop: "20px",
      fontSize: "48px",
      width: "320px"
    }
  }, loremIpsum));
}).addWithJSX("sticky nav", function () {
  return React.createElement(Block, null, React.createElement(Nav, {
    sticky: true
  }, React.createElement(Block, {
    extend: {
      padding: "20px"
    }
  }, React.createElement(Logo, {
    type: "square"
  }))), React.createElement(Block, {
    extend: {
      marginTop: "100px",
      fontSize: "48px",
      width: "320px"
    }
  }, loremIpsum));
}).addWithJSX("hide on scroll", function () {
  return React.createElement(Block, null, React.createElement(Nav, {
    sticky: true,
    hideOnScroll: true
  }, React.createElement(Block, {
    extend: {
      padding: "20px"
    }
  }, React.createElement(Logo, {
    type: "square"
  }))), React.createElement(Block, {
    extend: {
      marginTop: "100px",
      fontSize: "48px",
      width: "320px"
    }
  }, loremIpsum));
}).addWithJSX("with theme", function () {
  var label = "Custom theme";
  var defaultValue = {
    nav: {
      backgroundColor: "pink",
      color: "#000"
    }
  };
  var defaultThemePropsConfig = object(label, defaultValue);
  return React.createElement(ThemeProvider, {
    theme: defaultThemePropsConfig
  }, React.createElement(Block, null, React.createElement(Nav, null, React.createElement(Block, {
    extend: {
      padding: "20px 0"
    }
  }, React.createElement(Logo, {
    type: "square"
  })))));
});