Skip to content

Commit

Permalink
style: run prettier
Browse files Browse the repository at this point in the history
  • Loading branch information
Daniel Schmidt committed Apr 13, 2018
1 parent e0800ab commit 5909c67
Show file tree
Hide file tree
Showing 15 changed files with 102 additions and 134 deletions.
2 changes: 1 addition & 1 deletion .storybook/addons.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import "storybook-readme/register";
import '@storybook/addon-knobs/register'
import "@storybook/addon-knobs/register";
import "@storybook/addon-options/register";
import "@storybook/addon-actions/register";
6 changes: 3 additions & 3 deletions .storybook/config.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,16 +15,16 @@ setOptions({
showLeftPanel: true,
showDownPanel: true,
showSearchBox: false,
downPanelInRight: true,
downPanelInRight: true
});

setDefaults({
header: true,
inline: true
})
});

function loadStories() {
req.keys().forEach((filename) => req(filename));
req.keys().forEach(filename => req(filename));
}

configure(loadStories, module);
7 changes: 2 additions & 5 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@
All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.

<a name="0.2.0"></a>
# [0.2.0](https://github.com/dcos-labs/ui-kit/compare/v0.1.0...v0.2.0) (2018-04-06)

# [0.2.0](https://github.com/dcos-labs/ui-kit/compare/v0.1.0...v0.2.0) (2018-04-06)

### Bug Fixes

Expand All @@ -19,7 +19,6 @@ All notable changes to this project will be documented in this file. See [standa
* unit test example ([49d942c](https://github.com/dcos-labs/ui-kit/commit/49d942c))
* update package-lock ([ecc79c7](https://github.com/dcos-labs/ui-kit/commit/ecc79c7))


### Features

* **ci:** setup CI via Jenkinsfile ([841365d](https://github.com/dcos-labs/ui-kit/commit/841365d))
Expand All @@ -30,11 +29,9 @@ All notable changes to this project will be documented in this file. See [standa
* script to generate component ([44785a2](https://github.com/dcos-labs/ui-kit/commit/44785a2))
* use shared tslint-config ([8cc5760](https://github.com/dcos-labs/ui-kit/commit/8cc5760))



<a name="0.1.0"></a>
# 0.1.0 (2018-03-21)

# 0.1.0 (2018-03-21)

### Features

Expand Down
4 changes: 1 addition & 3 deletions commitlint.config.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
module.exports = {
extends: [
"@commitlint/config-conventional"
]
extends: ["@commitlint/config-conventional"]
};
24 changes: 12 additions & 12 deletions components/badge/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,18 +6,18 @@ Badges are a lightweight method of annotating or labeling content. The font-size

You may wish to display more than the single badge type, either to create separation in the importance of various actions or to communicate the state of an action or form badge states make this super easy.

|State|Purpose|Preview|
|--- |--- |---
|Default| |![Preview](https://raw.githubusercontent.com/dcos-labs/ui-kit/master/components/badge/assets/badge-default.png)|
|Success|Represents something positive.|![Preview](https://raw.githubusercontent.com/dcos-labs/ui-kit/master/components/badge/assets/badge-success.png)|
|Primary|Represents something more significant than a default.|![Preview](https://raw.githubusercontent.com/dcos-labs/ui-kit/master/components/badge/assets/badge-primary.png)|
|Danger|Represents something in a danger or error state.|![Preview](https://raw.githubusercontent.com/dcos-labs/ui-kit/master/components/badge/assets/badge-danger.png)|
|Warning|Represents something that we want to warn the user about but not quite extreme as a danger state.|![Preview](https://raw.githubusercontent.com/dcos-labs/ui-kit/master/components/badge/assets/badge-warning.png)|
|Outline|Outline badges for when we want the density of the badge to be lighter e.g. when next to data in a table cell|![Preview](https://raw.githubusercontent.com/dcos-labs/ui-kit/master/components/badge/assets/badge-outline.png)|
|With Icon|If need be we can add icons and tooltips to add further context.|![Preview](https://raw.githubusercontent.com/dcos-labs/ui-kit/master/components/badge/assets/badge-icon.png)|
| State | Purpose | Preview |
| --------- | ------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------- |
| Default | | ![Preview](https://raw.githubusercontent.com/dcos-labs/ui-kit/master/components/badge/assets/badge-default.png) |
| Success | Represents something positive. | ![Preview](https://raw.githubusercontent.com/dcos-labs/ui-kit/master/components/badge/assets/badge-success.png) |
| Primary | Represents something more significant than a default. | ![Preview](https://raw.githubusercontent.com/dcos-labs/ui-kit/master/components/badge/assets/badge-primary.png) |
| Danger | Represents something in a danger or error state. | ![Preview](https://raw.githubusercontent.com/dcos-labs/ui-kit/master/components/badge/assets/badge-danger.png) |
| Warning | Represents something that we want to warn the user about but not quite extreme as a danger state. | ![Preview](https://raw.githubusercontent.com/dcos-labs/ui-kit/master/components/badge/assets/badge-warning.png) |
| Outline | Outline badges for when we want the density of the badge to be lighter e.g. when next to data in a table cell | ![Preview](https://raw.githubusercontent.com/dcos-labs/ui-kit/master/components/badge/assets/badge-outline.png) |
| With Icon | If need be we can add icons and tooltips to add further context. | ![Preview](https://raw.githubusercontent.com/dcos-labs/ui-kit/master/components/badge/assets/badge-icon.png) |

### Do & Don't

|Do|Don't|
|--- |--- |
|-|-|
| Do | Don't |
| --- | ----- |
| - | - |
56 changes: 29 additions & 27 deletions components/badge/badge.test.tsx
Original file line number Diff line number Diff line change
@@ -1,53 +1,55 @@
import React from "react";
import Badge from '../badge';
import renderer from 'react-test-renderer';
import Badge from "../badge";
import renderer from "react-test-renderer";

const StringComponent = () : JSX.Element => {
return (
<span>string</span>
)
const StringComponent = (): JSX.Element => {
return <span>string</span>;
};

describe("Badge", () => {
it("default", () => {
expect(renderer
.create(<Badge>default</Badge>)
.toJSON()).toMatchSnapshot()
expect(renderer.create(<Badge>default</Badge>).toJSON()).toMatchSnapshot();
});

it("success", () => {
expect(renderer
.create(<Badge appearance="success">success</Badge>)
.toJSON()).toMatchSnapshot()
expect(
renderer.create(<Badge appearance="success">success</Badge>).toJSON()
).toMatchSnapshot();
});

it("primary", () => {
expect(renderer
.create(<Badge appearance="primary">primary</Badge>)
.toJSON()).toMatchSnapshot()
expect(
renderer.create(<Badge appearance="primary">primary</Badge>).toJSON()
).toMatchSnapshot();
});

it("danger", () => {
expect(renderer
.create(<Badge appearance="danger">danger</Badge>)
.toJSON()).toMatchSnapshot()
expect(
renderer.create(<Badge appearance="danger">danger</Badge>).toJSON()
).toMatchSnapshot();
});

it("warning", () => {
expect(renderer
.create(<Badge appearance="warning">warning</Badge>)
.toJSON()).toMatchSnapshot()
expect(
renderer.create(<Badge appearance="warning">warning</Badge>).toJSON()
).toMatchSnapshot();
});

it("outline", () => {
expect(renderer
.create(<Badge appearance="outline">outline</Badge>)
.toJSON()).toMatchSnapshot()
expect(
renderer.create(<Badge appearance="outline">outline</Badge>).toJSON()
).toMatchSnapshot();
});

it("accept jsx as children", () => {
expect(renderer
.create(<Badge><StringComponent /></Badge>)
.toJSON()).toMatchSnapshot()
expect(
renderer
.create(
<Badge>
<StringComponent />
</Badge>
)
.toJSON()
).toMatchSnapshot();
});
});
8 changes: 7 additions & 1 deletion components/badge/badge.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,13 @@ import * as React from "react";
import { badge } from "./style";

export interface IBadgeProps {
appearance?: "default" | "success" | "primary" | "warning" | "danger" | "outline";
appearance?:
| "default"
| "success"
| "primary"
| "warning"
| "danger"
| "outline";
children: JSX.Element | string;
}

Expand Down
15 changes: 5 additions & 10 deletions components/badge/stories/badge.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,15 +7,10 @@ const BadgeReadme = require("../README.md");

storiesOf("Badge", module)
.addDecorator(withReadme([BadgeReadme]))
.addWithInfo(
"Default",
() => <Badge>Default</Badge>
)
.addWithInfo(
"Success",
"Represents something positive.",
() => <Badge appearance="success">Success</Badge>
)
.addWithInfo("Default", () => <Badge>Default</Badge>)
.addWithInfo("Success", "Represents something positive.", () => (
<Badge appearance="success">Success</Badge>
))
.addWithInfo(
"Primary",
"Represents something more significant than a default.",
Expand All @@ -35,4 +30,4 @@ storiesOf("Badge", module)
"Outline",
"Outline badges for when we want the density of the badge to be lighter e.g. when next to data in a table cell",
() => <Badge appearance="outline">Outline</Badge>
)
);
24 changes: 6 additions & 18 deletions components/badge/style.ts
Original file line number Diff line number Diff line change
@@ -1,22 +1,10 @@
import { css } from "emotion";
import { coreColors, customColors } from "../../shared/styles/color";
import { coreFonts } from "../../shared/styles/typography"
import { coreFonts } from "../../shared/styles/typography";

const {
greyDark,
greyLight,
green,
purple,
red,
white,
yellow
} = coreColors();
const {
ebonyClay
} = customColors();
const {
fontFamilySansSerif
} = coreFonts();
const { greyDark, greyLight, green, purple, red, white, yellow } = coreColors();
const { ebonyClay } = customColors();
const { fontFamilySansSerif } = coreFonts();

const badgeAppearance = {
default: css`
Expand Down Expand Up @@ -56,7 +44,7 @@ const badgeAppearance = {
`
};

export const badge = (appearance) => {
export const badge = appearance => {
return css`
${badgeAppearance[appearance]};
box-sizing: border-box;
Expand All @@ -74,4 +62,4 @@ export const badge = (appearance) => {
display: inline-flex;
justify-content: center;
`;
}
};
18 changes: 3 additions & 15 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -30,22 +30,10 @@
"test": "jest",
"test:watch": "jest --watch"
},
"files": [
"dist"
],
"files": ["dist"],
"jest": {
"coverageReporters": [
"json",
"text"
],
"moduleFileExtensions": [
"ts",
"tsx",
"js",
"jsx",
"json",
"node"
],
"coverageReporters": ["json", "text"],
"moduleFileExtensions": ["ts", "tsx", "js", "jsx", "json", "node"],
"setupTestFrameworkScriptFile": "<rootDir>/testHelper/setupTests.ts",
"testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$",
"transform": {
Expand Down
14 changes: 7 additions & 7 deletions shared/styles/color.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ export interface IColors {
*
* @returns color mapping
*/
export const coreColors = () : IColors => {
export const coreColors = (): IColors => {
return {
white: "#fff",
black: "#000",
Expand All @@ -18,12 +18,12 @@ export const coreColors = () : IColors => {
purple: "#7d57ff",
red: "#ec2a3b",
yellow: "#f9a328",
green: "#14c683",
}
}
green: "#14c683"
};
};

export const customColors = () : IColors => {
export const customColors = (): IColors => {
return {
ebonyClay: "#1b2029"
}
}
};
};
15 changes: 9 additions & 6 deletions shared/styles/typography.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,13 @@ export interface IFonts {
*
* @returns font mapping
*/
export const coreFonts = () : IFonts => {
export const coreFonts = (): IFonts => {
return {
fontFamilySansSerif: "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica', 'Arial', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
fontFamilySerif: "didot, 'Didot LT STD', 'Hoefler Text', garamond, 'Times New Roman', serif",
fontFamilyMonospace: "'Menlo', 'Bitstream Vera Sans Mono', 'DejaVu Sans Mono', 'Monaco', 'Consolas', monospace"
}
}
fontFamilySansSerif:
"-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica', 'Arial', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
fontFamilySerif:
"didot, 'Didot LT STD', 'Hoefler Text', garamond, 'Times New Roman', serif",
fontFamilyMonospace:
"'Menlo', 'Bitstream Vera Sans Mono', 'DejaVu Sans Mono', 'Monaco', 'Consolas', monospace"
};
};
8 changes: 2 additions & 6 deletions tslint.json
Original file line number Diff line number Diff line change
@@ -1,10 +1,6 @@
{
"extends": [
"@dcos/tslint-config"
],
"extends": ["@dcos/tslint-config"],
"linterOptions": {
"exclude": [
"./scripts/templates/*"
]
"exclude": ["./scripts/templates/*"]
}
}
20 changes: 10 additions & 10 deletions webpack.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -17,24 +17,24 @@ module.exports = {
port: 9000
},
module: {
rules: webpackBase.getRules(),
rules: webpackBase.getRules()
},
resolve: {
extensions: webpackBase.getExtensions()
},
plugins: webpackBase.getPlugins(),
externals: {
react: {
root: 'React',
commonjs2: 'react',
commonjs: 'react',
amd: 'react'
root: "React",
commonjs2: "react",
commonjs: "react",
amd: "react"
},
'react-dom': {
root: 'ReactDOM',
commonjs2: 'react-dom',
commonjs: 'react-dom',
amd: 'react-dom'
"react-dom": {
root: "ReactDOM",
commonjs2: "react-dom",
commonjs: "react-dom",
amd: "react-dom"
}
}
};
Loading

0 comments on commit 5909c67

Please sign in to comment.