diff --git a/.travis.yml b/.travis.yml index 6f0573d..e9c05ed 100644 --- a/.travis.yml +++ b/.travis.yml @@ -3,14 +3,12 @@ node_js: - stable install: - npm install - - npm install -g codecov cache: directories: - node_modules script: - npm run test - npm run build -- codecov - ./node_modules/.bin/codecov --token="fb6b058a-5c4f-40c9-a5ff-d351fda90dd0" after_success: - bash <(curl -s https://codecov.io/bash) -e TRAVIS_NODE_VERSION diff --git a/src/.storybook/config.js b/src/.storybook/config.js index cd6ff88..f333c6a 100644 --- a/src/.storybook/config.js +++ b/src/.storybook/config.js @@ -1,22 +1,11 @@ import { addParameters, configure, setAddon } from "@storybook/react"; -import { create } from "@storybook/theming"; import JSXAddon from "storybook-addon-jsx"; +import { themes } from "@storybook/theming"; +import zapify from "./zapify"; setAddon(JSXAddon); const req = require.context("../stories", true, /\.stories\.js$/); -// coral / ocean highlights -const theme = create({ - base: "#999", - colorPrimary: "#f1f1f1", - colorSecondary: "#111", - textColor: "#00e9ff", - barBg: "#666", - barTextColor: "#f1f1f1", - appContentBg: "#fff", - appBg: "#555", -}); - function loadStories() { req.keys().forEach(filename => req(filename)); } @@ -24,81 +13,9 @@ function loadStories() { // Option defaults: addParameters({ options: { - theme: theme, - /** - * name to display in the top left corner - * @type {String} - */ name: "Zapify-ui", title: "Zapify-ui", - /** - * URL for name in top left corner to link to - * @type {String} - */ - url: "zapify.netlify.com", - /** - * show story component as full screen - * @type {Boolean} - */ - goFullScreen: false, - /** - * display panel that shows a list of stories - * @type {Boolean} - */ - showStoriesPanel: true, - /** - * display panel that shows addon configurations - * @type {Boolean} - */ - showAddonPanel: true, - /** - * display floating search box to search through stories - * @type {Boolean} - */ - showSearchBox: false, - /** - * show addon panel as a vertical panel on the right - * @type {Boolean} - */ - addonPanelInRight: false, - /** - * regex for finding the hierarchy separator - * @example: - * null - turn off hierarchy - * /\// - split by `/` - * /\./ - split by `.` - * /\/|\./ - split by `/` or `.` - * @type {Regex} - */ - hierarchySeparator: null, - /** - * regex for finding the hierarchy root separator - * @example: - * null - turn off multiple hierarchy roots - * /\|/ - split by `|` - * @type {Regex} - */ - hierarchyRootSeparator: null, - /** - * sidebar tree animations - * @type {Boolean} - */ - sidebarAnimations: true, - /** - * id to select an addon panel - * @type {String} - */ - selectedPanel: undefined, // The order of addons in the "Addon panel" is the same as you import them in 'addons.js'. The first panel will be opened by default as you run Storybook - /** - * enable/disable shortcuts - * @type {Boolean} - */ - enableShortcuts: false, // true by default - /** - * show/hide tool bar - * @type {Boolean} - */ - isToolshown: false // true by default + theme: zapify } }); diff --git a/src/.storybook/zapify.js b/src/.storybook/zapify.js new file mode 100644 index 0000000..7778181 --- /dev/null +++ b/src/.storybook/zapify.js @@ -0,0 +1,36 @@ +import { create } from "@storybook/theming"; + +export default create({ + base: "light", + colorPrimary: "#FF6F61", + colorSecondary: "deepskyblue", + + // UI + appBg: "white", + appContentBg: "white", + appBorderColor: "grey", + appBorderRadius: 3, + + // Typography + fontBase: '"Open Sans", sans-serif', + fontCode: "monospace", + + // Text colors + textColor: "black", + textInverseColor: "rgba(255,255,255,0.9)", + + // Toolbar default and active colors + barTextColor: "silver", + barSelectedColor: "black", + barBg: "#FF6F61", + + // Form colors + inputBg: "white", + inputBorder: "silver", + inputTextColor: "black", + inputBorderRadius: 3, + + brandTitle: "Zapify-ui", + brandUrl: "https://zapify.netlify.com", + brandImage: "https://i.ibb.co/hdsdzq7/ms-icon-144x144.png" +}); diff --git a/src/components/TextField/TextField.test.js b/src/components/TextField/TextField.test.js index 1a3da7d..96765d1 100644 --- a/src/components/TextField/TextField.test.js +++ b/src/components/TextField/TextField.test.js @@ -3,16 +3,16 @@ import renderer from "react-test-renderer"; import TextField from "./index"; test("Container tests", () => { - const component = renderer.create( - - Input Hook with custom placeholder - - ); + const component = renderer.create( + + Input Hook with custom placeholder + + ); - const tree = component.toJSON(); - expect(tree).toMatchSnapshot(); + const tree = component.toJSON(); + expect(tree).toMatchSnapshot(); }); diff --git a/src/components/ZapBar/ZapBar.test.js b/src/components/ZapBar/ZapBar.test.js index 2a75435..9b3fa53 100644 --- a/src/components/ZapBar/ZapBar.test.js +++ b/src/components/ZapBar/ZapBar.test.js @@ -3,26 +3,26 @@ import renderer from "react-test-renderer"; import ZapBar from "./index"; test("Container tests", () => { - const component = renderer.create( - - ); - const tree = component.toJSON(); - expect(tree).toMatchSnapshot(); + const component = renderer.create( + + ); + const tree = component.toJSON(); + expect(tree).toMatchSnapshot(); }); diff --git a/src/stories/typography.stories.js b/src/stories/typography.stories.js index 158b1c4..00d87dd 100644 --- a/src/stories/typography.stories.js +++ b/src/stories/typography.stories.js @@ -7,10 +7,16 @@ import Typography from "../components/Typography"; storiesOf("Typography", module) .addDecorator(withInfo) - .addWithJSX("with default Props", () => With Default Props) + .addWithJSX("with default Props", () => ( + With Default Props + )) .addWithJSX("with h1", () => with h1) .addWithJSX("with h2", () => with h2) .addWithJSX("with h3", () => with h3) .addWithJSX("with h4", () => with h4) .addWithJSX("with h5", () => with h5) - .addWithJSX("with custom color", () => with h2 and custom color prop); + .addWithJSX("with custom color", () => ( + + with h2 and custom color prop + + ));