Add Icons To Buttons

packages/components/.storybook/main.js

@@ -1,35 +1,53 @@
+const path = require("path")
+
+const AssetsDir = path.join(__dirname, "..", "assets")
+
 module.exports = {
-  stories: ["../stories/**/*.stories.(js|jsx|ts|tsx|mdx)"],
-  addons: [
-    "@storybook/addon-actions",
-    "@storybook/addon-links",
-    "@storybook/addon-knobs",
-    "@storybook/addon-storysource",
-    "storybook-addon-jsx/register",
-    "@storybook/addon-docs",
-  ],
-  webpackFinal: async config => {
-    config.module.rules.push({
-      test: /\.(ts|tsx)$/,
-      use: [
-        {
-          loader: require.resolve("babel-loader"),
-          options: {
-            presets: [
-              "@babel/preset-env",
-              "@babel/preset-typescript",
-              "@babel/preset-react",
-              "@emotion/babel-preset-css-prop",
-            ],
-          },
-        },
-        // Optional
-        {
-          loader: require.resolve("react-docgen-typescript-loader"),
-        },
-      ],
-    });
-    config.resolve.extensions.push(".ts", ".tsx");
-    return config;
-  },
-};
+	stories: ["../stories/**/*.stories.(js|jsx|ts|tsx|mdx)"],
+	addons: [
+		"@storybook/addon-actions",
+		"@storybook/addon-links",
+		"@storybook/addon-knobs",
+		"@storybook/addon-storysource",
+		"storybook-addon-jsx/register",
+		"@storybook/addon-docs"
+	],
+	webpackFinal: async config => {
+		// Disable the Storybook internal-`.svg`-rule for components loaded from our app.
+		const svgRule = config.module.rules.find(rule => "test.svg".match(rule.test))
+		svgRule.exclude = [AssetsDir]
+		config.module.rules.push({
+			test: /\.svg$/i,
+			include: [AssetsDir],
+			use: [
+				{
+					loader: "@svgr/webpack",
+					options: {}
+				}
+			]
+		})
+
+		config.module.rules.push({
+			test: /\.(ts|tsx)$/,
+			use: [
+				{
+					loader: require.resolve("babel-loader"),
+					options: {
+						presets: [
+							"@babel/preset-env",
+							"@babel/preset-typescript",
+							"@babel/preset-react",
+							"@emotion/babel-preset-css-prop"
+						]
+					}
+				},
+				// Optional
+				{
+					loader: require.resolve("react-docgen-typescript-loader")
+				}
+			]
+		})
+		config.resolve.extensions.push(".ts", ".tsx")
+		return config
+	}
+}

packages/components/@types/assets.d.ts

@@ -0,0 +1,15 @@
+declare module "\*.svg" {
+	import React = require("react")
+	export const ReactComponent: React.SFC<React.SVGProps<SVGSVGElement>>
+	const src: string
+	export default src
+}
+declare module "\*.jpg" {
+	const content: string
+	export default content
+}
+
+declare module "\*.png" {
+	const content: string
+	export default content
+}

packages/components/assets/bars-play.svg

@@ -0,0 +1 @@
+<svg width="20" height="14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17 4H0v2h17V4zm0-4H0v2h17V0zM0 10h13V8H0v2zm15-2v6l5-3-5-3z" fill="#7B8A95"/></svg>

packages/components/assets/bars-plus.svg

@@ -0,0 +1 @@
+<svg width="20" height="14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 4H0v2h12V4zm0-4H0v2h12V0zm4 8V4h-2v4h-4v2h4v4h2v-4h4V8h-4zM0 10h8V8H0v2z" fill="#7B8A95"/></svg>

packages/components/assets/bars.svg

@@ -0,0 +1 @@
+<svg width="18" height="12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 12h18v-2H0v2zm0-5h18V5H0v2zm0-7v2h18V0H0z" fill="#7B8A95"/></svg>

packages/components/assets/block-large.svg

@@ -0,0 +1 @@
+<svg width="20" height="20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10 0C4.48 0 0 4.48 0 10s4.48 10 10 10 10-4.48 10-10S15.52 0 10 0zm0 18c-4.42 0-8-3.58-8-8 0-1.85.63-3.55 1.69-4.9L14.9 16.31A7.902 7.902 0 0110 18zm6.31-3.1L5.1 3.69A7.902 7.902 0 0110 2c4.42 0 8 3.58 8 8 0 1.85-.63 3.55-1.69 4.9z" fill="#7B8A95"/></svg>

packages/components/assets/block.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="8" cy="8" r="6" stroke="#7B8A95" stroke-width="2" stroke-linecap="round"/><path d="M4 4l8 8" stroke="#7B8A95" stroke-width="2" stroke-linecap="round"/></svg>

packages/components/assets/check.svg

@@ -0,0 +1 @@
+<svg width="12" height="11" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 6.5L3.5 9l7-8" stroke="#7B8A95" stroke-width="2" stroke-linecap="round"/></svg>

packages/components/assets/chevron-down-big.svg

@@ -0,0 +1 @@
+<svg width="12" height="8" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 1l5 5 5-5" stroke="#7B8A95" stroke-width="2" stroke-linecap="round"/></svg>

packages/components/assets/chevron-left-big.svg

@@ -0,0 +1 @@
+<svg width="8" height="13" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.5 11.5l-5-5 5-5" stroke="#7B8A95" stroke-width="2" stroke-linecap="round"/></svg>

packages/components/assets/chevron-right-big.svg

@@ -0,0 +1 @@
+<svg width="8" height="13" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1.5 11.5l5-5-5-5" stroke="#7B8A95" stroke-width="2" stroke-linecap="round"/></svg>

packages/components/assets/chevron-up-big.svg

@@ -0,0 +1 @@
+<svg width="12" height="8" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 7l5-5 5 5" stroke="#7B8A95" stroke-width="2" stroke-linecap="round"/></svg>

packages/components/assets/chevron.svg

@@ -0,0 +1 @@
+<svg width="8" height="6" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 1l3 3 3-3" stroke="#7B8A95" stroke-width="2" stroke-linecap="round"/></svg>

packages/components/assets/dash.svg

@@ -0,0 +1 @@
+<svg width="12" height="2" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 1h10" stroke="#7B8A95" stroke-width="2" stroke-linecap="round"/></svg>

packages/components/assets/error.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 0a8 8 0 00-8 8 8 8 0 008 8 8 8 0 008-8 8 8 0 00-8-8z" fill="#FF3861"/><rect x="7" y="3" width="2" height="7" rx="1" fill="#fff"/><path d="M8 13c-.553 0-1-.447-1-1 0-.553.447-1 1-1a1 1 0 010 2z" fill="#fff"/></svg>

packages/components/assets/eyes.svg

@@ -0,0 +1 @@
+<svg width="22" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11 2.5A9.77 9.77 0 0119.82 8 9.76 9.76 0 0111 13.5 9.76 9.76 0 012.18 8 9.77 9.77 0 0111 2.5zm0-2C6 .5 1.73 3.61 0 8c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5C20.27 3.61 16 .5 11 .5zm0 5a2.5 2.5 0 010 5 2.5 2.5 0 010-5zm0-2C8.52 3.5 6.5 5.52 6.5 8s2.02 4.5 4.5 4.5 4.5-2.02 4.5-4.5-2.02-4.5-4.5-4.5z" fill="#7B8A95"/></svg>

packages/components/assets/index.ts

@@ -0,0 +1,2 @@
+export * from "./bars-play.svg";
+export * from "./bars-plus.svg";

packages/components/assets/info.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 0a8 8 0 00-8 8 8 8 0 008 8 8 8 0 008-8 8 8 0 00-8-8z" fill="#7B8A95"/><rect x="7" y="6" width="2" height="7" rx="1" fill="#fff"/><path d="M8 5c-.553 0-1-.447-1-1 0-.553.447-1 1-1a1 1 0 010 2z" fill="#fff"/></svg>

packages/components/assets/pencil.svg

@@ -0,0 +1 @@
+<svg width="15" height="15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M.778 11.449v2.773H3.55l7.893-7.893-2.773-2.773-7.893 7.893zm13.12-7.564a.735.735 0 000-1.05l-1.733-1.733a.735.735 0 00-1.05 0L9.668 2.56l2.773 2.773 1.458-1.448z" fill="#7B8A95"/></svg>

packages/components/assets/play.svg

@@ -0,0 +1 @@
+<svg width="20" height="20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 14.5l6-4.5-6-4.5v9zM10 0C4.48 0 0 4.48 0 10s4.48 10 10 10 10-4.48 10-10S15.52 0 10 0zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z" fill="#7B8A95"/></svg>

packages/components/assets/plus.svg

@@ -0,0 +1 @@
+<svg width="14" height="14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14 8H8v6H6V8H0V6h6V0h2v6h6v2z" fill="#7B8A95"/></svg>

packages/components/assets/success-check.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 0a8 8 0 00-8 8 8 8 0 008 8 8 8 0 008-8 8 8 0 00-8-8z" fill="#00DBB0"/><path d="M5 8.938L6.579 10.5 11 5.5" stroke="#fff" stroke-width="2" stroke-linecap="round"/></svg>

packages/components/package.json

@@ -1,69 +1,70 @@
 {
-  "name": "components",
-  "version": "1.0.0",
-  "description": "React Components for the Atlas Project",
-  "homepage": "https://github.com/Joystream/atlas#readme",
-  "license": "ISC",
-  "main": "dist/index.cjs.js",
-  "module": "dist/index.es.js",
-  "types": "dist/types",
-  "directories": {
-    "src": "src",
-    "test": "__tests__"
-  },
-  "files": [
-    "src"
-  ],
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/Joystream/atlas.git"
-  },
-  "scripts": {
-    "start": "rollup -wc",
-    "index": "node scripts/build-index.js",
-    "build": "rollup -c",
-    "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook",
-    "now-build": "build-storybook",
-    "test": "echo \"Error: run tests from root\" && exit 1"
-  },
-  "bugs": {
-    "url": "https://github.com/Joystream/atlas/issues"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.8.7",
-    "@babel/preset-env": "^7.8.7",
-    "@babel/preset-react": "^7.8.3",
-    "@babel/preset-typescript": "^7.9.0",
-    "@emotion/babel-preset-css-prop": "^10.0.27",
-    "@emotion/core": "^10.0.28",
-    "@fortawesome/fontawesome-svg-core": "^1.2.28",
-    "@fortawesome/free-solid-svg-icons": "^5.13.0",
-    "@fortawesome/react-fontawesome": "^0.1.9",
-    "@rollup/plugin-commonjs": "^11.0.2",
-    "@rollup/plugin-node-resolve": "^7.1.1",
-    "@storybook/addon-actions": "^5.3.17",
-    "@storybook/addon-docs": "^5.3.17",
-    "@storybook/addon-knobs": "^5.3.17",
-    "@storybook/addon-links": "^5.3.17",
-    "@storybook/addon-storysource": "^5.3.17",
-    "@storybook/addons": "^5.3.17",
-    "@storybook/react": "^5.3.17",
-    "@svgr/rollup": "^5.4.0",
-    "babel-jest": "^25.4.0",
-    "babel-loader": "^8.0.6",
-    "babel-plugin-transform-export-extensions": "^6.22.0",
-    "csstype": "^2.6.10",
-    "react": "^16.13.0",
-    "react-docgen-typescript-loader": "^3.7.1",
-    "react-dom": "^16.13.0",
-    "react-player": "^1.15.3",
-    "rollup": "^2.1.0",
-    "rollup-plugin-babel": "^4.4.0",
-    "rollup-plugin-typescript2": "^0.26.0",
-    "storybook-addon-jsx": "^7.1.15",
-    "ts-loader": "^6.2.1",
-    "typescript": "^3.8.3",
-    "video-react": "^0.14.1"
-  }
+	"name": "components",
+	"version": "1.0.0",
+	"description": "React Components for the Atlas Project",
+	"homepage": "https://github.com/Joystream/atlas#readme",
+	"license": "ISC",
+	"main": "dist/index.cjs.js",
+	"module": "dist/index.es.js",
+	"types": "dist/types",
+	"directories": {
+		"src": "src",
+		"test": "__tests__"
+	},
+	"files": [
+		"src"
+	],
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/Joystream/atlas.git"
+	},
+	"scripts": {
+		"start": "rollup -wc",
+		"index": "node scripts/build-index.js",
+		"build": "rollup -c",
+		"storybook": "start-storybook -p 6006",
+		"build-storybook": "build-storybook",
+		"now-build": "build-storybook",
+		"test": "echo \"Error: run tests from root\" && exit 1"
+	},
+	"bugs": {
+		"url": "https://github.com/Joystream/atlas/issues"
+	},
+	"devDependencies": {
+		"@babel/core": "^7.8.7",
+		"@babel/preset-env": "^7.8.7",
+		"@babel/preset-react": "^7.8.3",
+		"@babel/preset-typescript": "^7.9.0",
+		"@emotion/babel-preset-css-prop": "^10.0.27",
+		"@emotion/core": "^10.0.28",
+		"@fortawesome/fontawesome-svg-core": "^1.2.28",
+		"@fortawesome/free-solid-svg-icons": "^5.13.0",
+		"@fortawesome/react-fontawesome": "^0.1.9",
+		"@rollup/plugin-commonjs": "^11.0.2",
+		"@rollup/plugin-node-resolve": "^7.1.1",
+		"@storybook/addon-actions": "^5.3.17",
+		"@storybook/addon-docs": "^5.3.17",
+		"@storybook/addon-knobs": "^5.3.17",
+		"@storybook/addon-links": "^5.3.17",
+		"@storybook/addon-storysource": "^5.3.17",
+		"@storybook/addons": "^5.3.17",
+		"@storybook/react": "^5.3.17",
+		"@svgr/rollup": "^5.4.0",
+		"@svgr/webpack": "^5.4.0",
+		"babel-jest": "^25.4.0",
+		"babel-loader": "^8.0.6",
+		"babel-plugin-transform-export-extensions": "^6.22.0",
+		"csstype": "^2.6.10",
+		"react": "^16.13.0",
+		"react-docgen-typescript-loader": "^3.7.1",
+		"react-dom": "^16.13.0",
+		"react-player": "^1.15.3",
+		"rollup": "^2.1.0",
+		"rollup-plugin-babel": "^4.4.0",
+		"rollup-plugin-typescript2": "^0.26.0",
+		"storybook-addon-jsx": "^7.1.15",
+		"ts-loader": "^6.2.1",
+		"typescript": "^3.8.3",
+		"video-react": "^0.14.1"
+	}
 }

packages/components/rollup.config.js

@@ -1,44 +1,46 @@
-import resolve from "@rollup/plugin-node-resolve";
-import commonjs from "@rollup/plugin-commonjs";
-import typescript from "rollup-plugin-typescript2";
-import babel from "rollup-plugin-babel";
-import { DEFAULT_EXTENSIONS } from "@babel/core";
-import react from "react";
-import reactDom from "react-dom";
+import resolve from "@rollup/plugin-node-resolve"
+import commonjs from "@rollup/plugin-commonjs"
+import typescript from "rollup-plugin-typescript2"
+import babel from "rollup-plugin-babel"
+import svgr from "@svgr/rollup"
+import { DEFAULT_EXTENSIONS } from "@babel/core"
+import react from "react"
+import reactDom from "react-dom"
 
-import pkg from "./package.json";
+import pkg from "./package.json"
 
 export default {
-  input: "src/index.ts",
-  output: [
-    {
-      file: pkg.main,
-      format: "cjs",
-      file: pkg.main,
-    },
-    {
-      format: "esm",
-      file: pkg.module,
-    },
-  ],
-  plugins: [
-    resolve({
-      extensions: [".js", ".jsx", ".ts", ".tsx"],
-      preferBuiltins: true,
-    }),
-    commonjs({
-      exclude: "../../node_modules",
-      namedExports: {
-        react: Object.keys(react),
-        "react-dom": Object.keys(reactDom),
-      },
-    }),
-    typescript({
-      useTsconfigDeclarationDir: true,
-    }),
-    babel({
-      exclude: ["../../node_modules/**", "node_modules/**"],
-      extensions: [...DEFAULT_EXTENSIONS, ".ts", ".tsx"],
-    }),
-  ],
-};
+	input: "src/index.ts",
+	output: [
+		{
+			file: pkg.main,
+			format: "cjs",
+			file: pkg.main
+		},
+		{
+			format: "esm",
+			file: pkg.module
+		}
+	],
+	plugins: [
+		svgr(),
+		resolve({
+			extensions: [".js", ".jsx", ".ts", ".tsx"],
+			preferBuiltins: true
+		}),
+		commonjs({
+			exclude: "../../node_modules",
+			namedExports: {
+				react: Object.keys(react),
+				"react-dom": Object.keys(reactDom)
+			}
+		}),
+		typescript({
+			useTsconfigDeclarationDir: true
+		}),
+		babel({
+			exclude: ["../../node_modules/**", "node_modules/**"],
+			extensions: [...DEFAULT_EXTENSIONS, ".ts", ".tsx"]
+		})
+	]
+}

packages/components/src/components/Button/Button.style.ts

@@ -7,6 +7,7 @@ export type ButtonStyleProps = {
 	type?: "primary" | "secondary";
 	full?: boolean;
 	size?: "regular" | "small" | "smaller";
+	children?: React.ReactNode;
 	disabled?: boolean;
 };
 
@@ -46,6 +47,7 @@ const colorFromType: StyleFn = (styles, { type }: ButtonStyleProps) => {
 		case "secondary":
 			return {
 				...styles,
+				color: colors.blue[500],
 				backgroundColor: colors.black,
 				borderColor: colors.blue[500],
 
@@ -94,7 +96,7 @@ const paddingFromType: StyleFn = (
 const iconStyles: StyleFn = (styles, { children, size }) => {
 	return {
 		...styles,
-		marginRight: !!children ? "10px" : "0",
+		marginRight: children != null ? "10px" : "0",
 		fontSize:
 			size === "regular"
 				? typography.sizes.icon.large
@@ -102,9 +104,9 @@ const iconStyles: StyleFn = (styles, { children, size }) => {
 				? typography.sizes.icon.medium
 				: typography.sizes.icon.small,
 
-		"& > path:nth-of-type(1)": {
-			color: "inherit",
-			flexShrink: 0,
+		flexShrink: 0,
+		"& > *": {
+			stroke: "currentColor",
 		},
 	};
 };

packages/components/src/components/Button/Button.tsx

@@ -1,10 +1,10 @@
 import React from "react";
 import { ButtonStyleProps, useCSS } from "./Button.style";
-import { IconProp } from "@fortawesome/fontawesome-svg-core";
+import BlockIcon from "../../../assets/block.svg";
 
 type ButtonProps = {
 	children?: React.ReactNode;
-	icon?: IconProp;
+	icon?: boolean;
 	disabled?: boolean;
 	onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
 } & ButtonStyleProps;
@@ -17,9 +17,10 @@ export default function Button({
 	onClick,
 	...styleProps
 }: ButtonProps) {
-	let styles = useCSS({ disabled, type, ...styleProps });
+	let styles = useCSS({ disabled, type, children, ...styleProps });
 	return (
 		<button css={styles.container} onClick={disabled ? null : onClick}>
+			{icon && <BlockIcon css={styles.icon} />}
 			{children}
 		</button>
 	);

packages/components/stories/01-Button.stories.tsx

@@ -41,11 +41,11 @@ export const SecondaryFullSize = () => (
 
 export const PrimaryWithIcon = () => (
 	<>
-		<Button icon={faBan}>Regular</Button>
-		<Button icon={faBan} size="small">
+		<Button icon>Regular</Button>
+		<Button icon size="small">
 			Small
 		</Button>
-		<Button icon={faBan} size="smaller">
+		<Button icon size="smaller">
 			Smaller
 		</Button>
 	</>
@@ -53,13 +53,13 @@ export const PrimaryWithIcon = () => (
 
 export const SecondaryWithIcon = () => (
 	<>
-		<Button type="secondary" icon={faBan}>
+		<Button type="secondary" icon>
 			Regular
 		</Button>
-		<Button type="secondary" icon={faBan} size="small">
+		<Button type="secondary" icon size="small">
 			Small
 		</Button>
-		<Button type="secondary" icon={faBan} size="smaller">
+		<Button type="secondary" icon size="smaller">
 			Smaller
 		</Button>
 	</>
@@ -67,26 +67,26 @@ export const SecondaryWithIcon = () => (
 
 export const PrimaryWithoutText = () => (
 	<>
-		<Button icon={faBan} />
-		<Button icon={faBan} size="small" />
-		<Button icon={faBan} size="smaller" />
+		<Button icon />
+		<Button icon size="small" />
+		<Button icon size="smaller" />
 	</>
 );
 
 export const SecondaryWithoutText = () => (
 	<>
-		<Button type="secondary" icon={faBan} />
-		<Button type="secondary" icon={faBan} size="small" />
-		<Button type="secondary" icon={faBan} size="smaller" />
+		<Button type="secondary" icon />
+		<Button type="secondary" icon size="small" />
+		<Button type="secondary" icon size="smaller" />
 	</>
 );
 
 export const Disabled = () => (
 	<>
 		<Button disabled={true}>Disabled</Button>
-		<Button disabled={true} icon={faBan}>
+		<Button disabled={true} icon={true}>
 			Disabled with icon
 		</Button>
-		<Button disabled={true} icon={faBan} />
+		<Button disabled={true} icon />
 	</>
 );

packages/components/tsconfig.json

@@ -8,7 +8,8 @@
 		"baseUrl": "src",
 		"jsx": "preserve",
 		"declaration": true,
-		"declarationDir": "dist/types"
+		"declarationDir": "dist/types",
+		"typeRoots": ["./@types", "node_modules/@types"]
 	},
 
 	"exclude": ["node_modules", "dist", "stories"]