From 21045eee647e128652ce279d730a1e82adca6d81 Mon Sep 17 00:00:00 2001 From: Artur Bien Date: Mon, 8 Apr 2019 18:12:33 +0200 Subject: [PATCH] moved reset css to js file --- .storybook/config.js | 5 +- .storybook/decorators/globalStyle.js | 15 +++ src/components/Bar/Bar.js | 1 + src/components/Fab/Fab.css | 47 -------- src/components/Fab/Fab.js | 63 ---------- src/components/Fab/Fab.stories.js | 31 ----- src/components/InputBase/InputBase.js | 3 +- src/components/List/List.js | 2 + src/components/ListItem/ListItem.js | 2 + src/components/Select/Select.js | 8 +- src/components/TextArea/TextArea.js | 1 + src/components/common/reset.js | 160 ++++++++++++++++++++++++++ src/components/index.js | 2 + website/src/App.js | 1 - website/src/index.js | 1 - 15 files changed, 194 insertions(+), 148 deletions(-) create mode 100644 .storybook/decorators/globalStyle.js delete mode 100644 src/components/Fab/Fab.css delete mode 100644 src/components/Fab/Fab.js delete mode 100644 src/components/Fab/Fab.stories.js create mode 100644 src/components/common/reset.js diff --git a/.storybook/config.js b/.storybook/config.js index 7d970d4..1e7f850 100644 --- a/.storybook/config.js +++ b/.storybook/config.js @@ -2,9 +2,10 @@ import { configure, addDecorator } from "@storybook/react"; import { withInfo } from "@storybook/addon-info"; import { withThemesProvider } from "storybook-addon-styled-component-theme"; -import "../src/components/index.css"; import themes from "../src/components/common/themes"; +import GlobalStyle from "./decorators/globalStyle"; + const demoThemes = [ themes.default, themes.lilacRoseDark, @@ -29,7 +30,7 @@ addDecorator( }) }) ); - +addDecorator(GlobalStyle); const req = require.context("../src", true, /\.stories\.js$/); function loadStories() { req.keys().forEach(filename => req(filename)); diff --git a/.storybook/decorators/globalStyle.js b/.storybook/decorators/globalStyle.js new file mode 100644 index 0000000..b26ac8a --- /dev/null +++ b/.storybook/decorators/globalStyle.js @@ -0,0 +1,15 @@ +import React from "react"; +import { createGlobalStyle } from "styled-components"; + +import reset from "../../src/components/common/reset"; + +const GlobalStyle = createGlobalStyle` + ${reset} +`; + +export default storyFn => ( + <> + + {storyFn()} + +); diff --git a/src/components/Bar/Bar.js b/src/components/Bar/Bar.js index 3426855..c2ca87d 100644 --- a/src/components/Bar/Bar.js +++ b/src/components/Bar/Bar.js @@ -5,6 +5,7 @@ import { blockSizes } from "../common/theme.variables"; const StyledBar = styled.div` display: inline-block; + box-sizing: border-box; height: ${props => blockSizes[props.size]}; width: 5px; border-top: 2px solid ${({ theme }) => theme.borderLightest}; diff --git a/src/components/Fab/Fab.css b/src/components/Fab/Fab.css deleted file mode 100644 index c0e8f69..0000000 --- a/src/components/Fab/Fab.css +++ /dev/null @@ -1,47 +0,0 @@ -button { - outline: none; -} - -.Fab { - display: inline-block; - width: 60px; - height: 60px; - transform: translate(-50%, 50%); - border-radius: 50%; - - /* violet */ - background: #b96ac9; - /* background: radial-gradient(#6f2dbd, #b96ac9); */ - border-top: 4px solid #e980fc; - border-left: 4px solid #e980fc; - border-bottom: 4px solid #6f2dbd; - border-right: 4px solid #6f2dbd; - - box-shadow: 4px 4px 10px 0 rgba(0, 0, 0, 0.45); -} -.Fab--square { - border-radius: 0; -} - -.Fab:not(.Fab--disabled):active { - border-bottom: 4px solid #e980fc; - border-right: 4px solid #e980fc; - border-top: 4px solid #6f2dbd; - border-left: 4px solid #6f2dbd; - box-shadow: 3px 3px 5px 0 rgba(0, 0, 0, 0.55); -} - -.Fab:not(.Fab--disabled):active .Fab__content { - padding-top: 2px; -} - -.Fab__content { - display: inline-block; - position: absolute; - left: 50%; - top: 50%; - transform: translate(-50%, -50%); - font-size: 24px; - line-height: 24px; - font-weight: bold; -} diff --git a/src/components/Fab/Fab.js b/src/components/Fab/Fab.js deleted file mode 100644 index 7225271..0000000 --- a/src/components/Fab/Fab.js +++ /dev/null @@ -1,63 +0,0 @@ -import React from "react"; -import propTypes from "prop-types"; -import cx from "classnames"; - -import "./Fab.css"; - -const Fab = ({ - type, - size, - onClick, - className, - style, - disabled, - active, - children, - square, - ...otherProps -}) => { - const baseClass = "Fab"; - - const rootClass = cx(baseClass, className, { - [`${baseClass}--${size}`]: size, - [`${baseClass}--disabled`]: disabled, - [`${baseClass}--active`]: active, - [`${baseClass}--square`]: square - }); - - return ( - - ); -}; - -Fab.defaultProps = { - type: "button", - onClick: null, - style: {}, - disabled: false, - size: "m", - square: false, - active: false -}; - -Fab.propTypes = { - type: propTypes.string, - size: propTypes.oneOf(["s", "m", "l", "xl"]), - onClick: propTypes.func, - className: propTypes.string, - style: propTypes.object, - disabled: propTypes.bool, - active: propTypes.bool, - square: propTypes.bool, - children: propTypes.node -}; - -export default Fab; diff --git a/src/components/Fab/Fab.stories.js b/src/components/Fab/Fab.stories.js deleted file mode 100644 index 225dd2a..0000000 --- a/src/components/Fab/Fab.stories.js +++ /dev/null @@ -1,31 +0,0 @@ -import React from "react"; -import { storiesOf } from "@storybook/react"; -import { action } from "@storybook/addon-actions"; - -import Fab from "./Fab"; - -const props = { - type: "button", - onClick: null, - style: {} -}; - -export const actions = { onClick: action("onClick") }; - -storiesOf("Fab", module) - .addDecorator(story => ( -
- {story()} -
- )) - .add("default", () => +) - .add("square", () => ( - - + - - )); diff --git a/src/components/InputBase/InputBase.js b/src/components/InputBase/InputBase.js index e621b64..fca7ada 100644 --- a/src/components/InputBase/InputBase.js +++ b/src/components/InputBase/InputBase.js @@ -3,9 +3,10 @@ import propTypes from "prop-types"; import styled from "styled-components"; import { StyledTextInput, StyledCutout } from "../common"; +import { Cutout } from "../"; import { blockSizes } from "../common/theme.variables"; -const StyledInputWrapper = styled(StyledCutout)` +const StyledInputWrapper = styled(Cutout)` height: ${blockSizes.md}; padding: 2px; background: ${({ theme, isDisabled }) => diff --git a/src/components/List/List.js b/src/components/List/List.js index 0154b42..08ed321 100644 --- a/src/components/List/List.js +++ b/src/components/List/List.js @@ -16,6 +16,8 @@ const createListPositionStyles = ({ transform: translate(0, ${verticalAlign === "top" ? "-100%" : "100%"}) `; const StyledList = styled.ul` + box-sizing: border-box; + width: ${props => (props.fullWidth ? "100%" : "auto")}; padding: 2px 4px 4px 2px; ${createBorderStyles()} diff --git a/src/components/ListItem/ListItem.js b/src/components/ListItem/ListItem.js index 18512bf..5c5f09f 100644 --- a/src/components/ListItem/ListItem.js +++ b/src/components/ListItem/ListItem.js @@ -6,6 +6,8 @@ import { createDisabledTextStyles } from "../common"; import { padding, blockSizes } from "../common/theme.variables"; const StyledListItem = styled.li` + box-sizing: border-box; + display: block; position: relative; height: ${props => blockSizes[props.size]}; diff --git a/src/components/Select/Select.js b/src/components/Select/Select.js index 83e85c3..fddaad6 100644 --- a/src/components/Select/Select.js +++ b/src/components/Select/Select.js @@ -50,6 +50,8 @@ const StyledDropdownIcon = styled.span` `; const StyledDropdownList = styled.ul` + box-sizing: border-box; + font-size: ${fontSizes.md}; position: absolute; bottom: -2px; @@ -64,11 +66,13 @@ const StyledDropdownList = styled.ul` z-index: 99; `; const StyledDropdownListItem = styled.li` - height: calc(${blockSizes.md} - 8px); + box-sizing: border-box; + width: 100%; padding-left: ${padding.sm}; - line-height: calc(${blockSizes.md} - 8px); + height: calc(${blockSizes.md} - 4px); + line-height: calc(${blockSizes.md} - 4px); font-size: ${fontSizes.md}; white-space: nowrap; color: ${({ theme }) => theme.inputText}; diff --git a/src/components/TextArea/TextArea.js b/src/components/TextArea/TextArea.js index a20a55a..1da352a 100644 --- a/src/components/TextArea/TextArea.js +++ b/src/components/TextArea/TextArea.js @@ -20,6 +20,7 @@ const StyledTextAreaWrapper = styled(StyledCutout)` const StyledTextArea = styled.textarea` width: 100%; height: 100%; + box-sizing: border-box; padding: ${padding.sm}; outline: none; border: none; diff --git a/src/components/common/reset.js b/src/components/common/reset.js new file mode 100644 index 0000000..b29405f --- /dev/null +++ b/src/components/common/reset.js @@ -0,0 +1,160 @@ +export default ` + html, +body, +div, +span, +applet, +object, +iframe, +h1, +h2, +h3, +h4, +h5, +h6, +p, +blockquote, +pre, +a, +abbr, +acronym, +address, +big, +cite, +code, +del, +dfn, +em, +img, +ins, +kbd, +q, +s, +samp, +small, +strike, +strong, +sub, +sup, +tt, +var, +b, +u, +i, +center, +dl, +dt, +dd, +ol, +ul, +li, +fieldset, +form, +label, +legend, +table, +caption, +tbody, +tfoot, +thead, +tr, +th, +td, +article, +aside, +canvas, +details, +embed, +figure, +figcaption, +footer, +header, +hgroup, +menu, +nav, +output, +ruby, +section, +summary, +time, +mark, +audio, +video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +menu, +nav, +section { + display: block; +} +body { + line-height: 1; +} +ol, +ul { + list-style: none; +} +blockquote, +q { + quotes: none; +} +blockquote:before, +blockquote:after, +q:before, +q:after { + content: ""; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} +a { + color: inherit; + text-decoration: none; +} +ul, +li { + list-style-type: none; +} +button { + outline: none; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); +} +body { + margin: 0; + padding: 0; + font-family: sans-serif; + color: black; +} + +code { + font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", + monospace; +} + +input[type="number"]::-webkit-outer-spin-button, +input[type="number"]::-webkit-inner-spin-button { + -webkit-appearance: none; + margin: 0; +} + +input[type="number"] { + -moz-appearance: textfield; +} + +`; diff --git a/src/components/index.js b/src/components/index.js index 1aab901..327ac2d 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -1,4 +1,5 @@ import themes from "./common/themes"; +import reset from "./common/reset"; import Anchor from "./Anchor/Anchor"; import AppBar from "./AppBar/AppBar"; @@ -40,6 +41,7 @@ import WindowHeader from "./WindowHeader/WindowHeader"; export { themes, + reset, Anchor, AppBar, Bar, diff --git a/website/src/App.js b/website/src/App.js index af8836f..5b09af4 100644 --- a/website/src/App.js +++ b/website/src/App.js @@ -1,6 +1,5 @@ import React, { Component } from "react"; import styled, { ThemeProvider } from "styled-components"; -import "./components/index.css"; import { themes, Button } from "./components"; import { BrowserRouter as Router, Route } from "react-router-dom"; diff --git a/website/src/index.js b/website/src/index.js index 48da9f6..c1684e8 100644 --- a/website/src/index.js +++ b/website/src/index.js @@ -1,6 +1,5 @@ import React from "react"; import ReactDOM from "react-dom"; -import "./index.css"; import App from "./App"; import * as serviceWorker from "./serviceWorker";