From 86efd010c11457f51e383e78ca683750ebad4300 Mon Sep 17 00:00:00 2001 From: ChenyoisRita Date: Thu, 23 Jul 2020 00:34:00 -0400 Subject: [PATCH 1/3] Original components code from Yue --- src/Box.js | 30 ++++++++++++++++++ src/Button.js | 55 ++++++++++++++++++++++++++++++++ src/Image.js | 38 +++++++++++++++++++++++ src/InputBar.js | 59 +++++++++++++++++++++++++++++++++++ src/Text.js | 41 +++++++++++++++++------- stories/Box.stories.js | 17 ++++++++++ stories/Button.stories.js | 13 ++++++++ stories/InputBar.stories.js | 15 +++++++++ stories/Text.stories.js | 62 +++++++++++++++++++++++++++++++++++++ 9 files changed, 319 insertions(+), 11 deletions(-) create mode 100644 src/Box.js create mode 100644 src/Button.js create mode 100644 src/Image.js create mode 100644 src/InputBar.js create mode 100644 stories/Box.stories.js create mode 100644 stories/Button.stories.js create mode 100644 stories/InputBar.stories.js create mode 100644 stories/Text.stories.js diff --git a/src/Box.js b/src/Box.js new file mode 100644 index 0000000..e791361 --- /dev/null +++ b/src/Box.js @@ -0,0 +1,30 @@ +import React from "react"; +import styled from "styled-components"; + +import { space, color, layout } from "styled-system"; +import { default as styledProps } from "@styled-system/prop-types"; + +const BoxComponent = styled.div` + ${space}; + ${color}; + ${layout}; +`; + +const Box = ({...props}) => { + return ; +} + + +Box.displayName = "Box"; + +Box.defaultProps = { + color: "currentColor", +}; + +Box.propTypes = { + ...styledProps.space, + ...styledProps.color, + ...styledProps.layout, +}; + +export default Box; \ No newline at end of file diff --git a/src/Button.js b/src/Button.js new file mode 100644 index 0000000..6ea2e21 --- /dev/null +++ b/src/Button.js @@ -0,0 +1,55 @@ +import React from "react"; +import styled from "styled-components"; + +import { default as styledProps } from "@styled-system/prop-types"; +import { + background, + border, + color, + layout, + space, + typography, + compose, +} from "styled-system"; + +const systemProps = compose( + layout, + color, + space, + background, + border, + typography, +); + +const ButtonComponent = styled.button` + ${systemProps} +`; + +const Button = ({...props}) => { + return ; +} + +Button.defaultProps = { + color: "currentColor", +}; + +Button.defaultProps = { + width: "150px", + height: "48px", + borderRadius: "4px", + color: "#FFFFFF", + fontSize: "16px", + fontStyle: "normal", + textAlign: "center", +}; + +Button.propTypes = { + ...styledProps.space, + ...styledProps.color, + ...styledProps.layout, + ...styledProps.background, + ...styledProps.border, + ...styledProps.typography, +}; + +export default Button; \ No newline at end of file diff --git a/src/Image.js b/src/Image.js new file mode 100644 index 0000000..70384ed --- /dev/null +++ b/src/Image.js @@ -0,0 +1,38 @@ + +import React, { forwardRef } from "react"; +import styled from "styled-components"; +import { width } from "styled-system"; +import PropTypes from "prop-types"; + +const shape = props => { + let shapeCss = null; + if (props.$shape) { + if (props.$shape === "circle") shapeCss = { "border-radius": "50%" }; + if (props.$shape === "rounded") + shapeCss = { "border-radius": props.theme.radii["avatar"] }; + if (props.$shape === "square") shapeCss = { height: props.width || "auto" }; + } + return shapeCss; +}; +//${props => (props.fontFamily ? props.fontFamily : "body")}; +const ImageElement = styled.img.attrs(props => ({ + height: props.height || "auto", +}))` + display: block; + max-width: 100%; + ${width} + ${shape} +`; + +const Image = forwardRef(({ alt, shape, ...props }, ref) => { + return ; +}); +Image.displayName = "Image"; +Image.defaultProps = { + alt: "image", +}; +Image.propTypes = { + src: PropTypes.string.isRequired, + alt: PropTypes.string.isRequired, +}; +export default Image; \ No newline at end of file diff --git a/src/InputBar.js b/src/InputBar.js new file mode 100644 index 0000000..7c558be --- /dev/null +++ b/src/InputBar.js @@ -0,0 +1,59 @@ +import React from "react"; +import styled from "styled-components"; + +import { default as styledProps } from "@styled-system/prop-types"; +import { + background, + border, + color, + flexbox, + layout, + space, + typography, + compose, +} from "styled-system"; + + +const systemProps = compose( + layout, + color, + space, + background, + border, + typography, + flexbox, +); + +const InputComponent = styled.input` + ${systemProps}; +`; + +const Input = props => { + const { ...other } = props; + return ; +} + +Input.defaultProps = { + color: "currentColor", +}; + +Input.defaultProps = { + width: "420px", + height: "46px", + border: "1px solid #1E1D1D", + borderRadius: "2px", + textAlign: "left", +}; + + +Input.propTypes = { + ...styledProps.space, + ...styledProps.color, + ...styledProps.layout, + ...styledProps.background, + ...styledProps.border, + ...styledProps.typography, + ...styledProps.flexbox, +}; + +export default Input; \ No newline at end of file diff --git a/src/Text.js b/src/Text.js index 5d8c9bb..7478dea 100644 --- a/src/Text.js +++ b/src/Text.js @@ -2,25 +2,44 @@ import React from "react"; import styled from "styled-components"; import PropTypes from "prop-types"; -import { space, typography, textStyle } from "styled-system"; +import { space, typography, textStyle, color, layout } from "styled-system"; import { default as styledProps } from "@styled-system/prop-types"; -const Text = (props) => { - const { children, as, ...rest } = props; +const TextComponent= styled.text` + text-transform: ${props => props.textTransform || "none"}; + text-decoration-line: ${props => props.textDecorationLine || "none"}; + ${space}; + ${typography}; + ${textStyle}; + ${color}; + ${layout}; +`; - return
This is just test
; -}; +const Text = props => { + const { textTransform, textDecorationLine, ...other } = props; + return ; +} Text.displayName = "Text"; + Text.defaultProps = { - as: "div", - color: "currentColor", + as: "div", + color: "currentColor", + fontSize: "30px", + fontStyle: "normal", + textAlign: "left", + textTransform: "none", + textDecorationLine: "none", }; Text.propTypes = { - ...styledProps.space, - ...styledProps.typography, - ...styledProps.textStyle, + ...styledProps.space, + ...styledProps.typography, + ...styledProps.textStyle, + ...styledProps.color, + ...styledProps.layout, + textTransform: PropTypes.oneOf(["capitalize", "uppercase", "lowercase", "none"]), + textDecorationLine: PropTypes.oneOf(["overline", "line-through", "underline", "none"]), }; -export default Text; +export default Text; \ No newline at end of file diff --git a/stories/Box.stories.js b/stories/Box.stories.js new file mode 100644 index 0000000..349d784 --- /dev/null +++ b/stories/Box.stories.js @@ -0,0 +1,17 @@ +import React from "react"; +import Box from "../src/Box"; +import Divider from "../src/Divider"; +export default { title: "Box" }; + +export const box = () => ( +
+ + +
+ + +); + +box.story = { + name: "Box Component", +}; \ No newline at end of file diff --git a/stories/Button.stories.js b/stories/Button.stories.js new file mode 100644 index 0000000..02906a0 --- /dev/null +++ b/stories/Button.stories.js @@ -0,0 +1,13 @@ +import React from "react"; +import Button from "../src/Button"; +export default { title: "Button" }; + +export const button = () => ( +
+ +
+); + +button.story = { + name: "Button Component", +}; \ No newline at end of file diff --git a/stories/InputBar.stories.js b/stories/InputBar.stories.js new file mode 100644 index 0000000..727dda3 --- /dev/null +++ b/stories/InputBar.stories.js @@ -0,0 +1,15 @@ +import React from "react"; +import Input from "../src/InputBar"; +export default { title: "Input" }; + +export const input = () => ( +
+ +
+ + +); + +input.story = { + name: "Input Component", +}; \ No newline at end of file diff --git a/stories/Text.stories.js b/stories/Text.stories.js new file mode 100644 index 0000000..3286812 --- /dev/null +++ b/stories/Text.stories.js @@ -0,0 +1,62 @@ +import React from "react"; +import Text from "../src/Text"; + +export default { title: "Text" }; + +export const text = () => ( +
+ + m=10px: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Fringilla urna porttitor rhoncus dolor purus non enim. Cursus mattis molestie a iaculis at erat pellentesque adipiscing. Fermentum odio eu feugiat pretium nibh ipsum consequat. Amet nisl purus in mollis nunc sed id. Ut ornare lectus sit amet. Lobortis feugiat vivamus at augue eget arcu dictum. + + +
+ + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Fringilla urna porttitor rhoncus dolor purus non enim. Cursus mattis molestie a iaculis at erat pellentesque adipiscing. Fermentum odio eu feugiat pretium nibh ipsum consequat. Amet nisl purus in mollis nunc sed id. Ut ornare lectus sit amet. Lobortis feugiat vivamus at augue eget arcu dictum. + + +
+ + + FERMENTUM LEO VEL ORCI PORTA NON PULVINAR. NON PULVINAR NEQUE LAOREET SUSPENDISSE INTERDUM CONSECTETUR LIBERO ID FAUCIBUS. PENATIBUS ET MAGNIS DIS PARTURIENT MONTES NASCETUR RIDICULUS MUS. DOLOR MORBI NON ARCU RISUS QUIS VARIUS QUAM QUISQUE ID. EGESTAS INTEGER EGET ALIQUET NIBH PRAESENT TRISTIQUE MAGNA SIT AMET. AMET DICTUM SIT AMET JUSTO DONEC ENIM DIAM VULPUTATE UT. MI EGET MAURIS PHARETRA ET ULTRICES NEQUE. + + +
+ + + FERMENTUM LEO VEL ORCI PORTA NON PULVINAR. NON PULVINAR NEQUE LAOREET SUSPENDISSE INTERDUM CONSECTETUR LIBERO ID FAUCIBUS. PENATIBUS ET MAGNIS DIS PARTURIENT MONTES NASCETUR RIDICULUS MUS. DOLOR MORBI NON ARCU RISUS QUIS VARIUS QUAM QUISQUE ID. EGESTAS INTEGER EGET ALIQUET NIBH PRAESENT TRISTIQUE MAGNA SIT AMET. AMET DICTUM SIT AMET JUSTO DONEC ENIM DIAM VULPUTATE UT. MI EGET MAURIS PHARETRA ET ULTRICES NEQUE. + + +
+
+); +text.story = { + name: "Text Component", +}; \ No newline at end of file From 52141b10c62c16e6c56eb725a751210f48fab6a0 Mon Sep 17 00:00:00 2001 From: ChenyoisRita Date: Thu, 6 Aug 2020 15:17:22 -0400 Subject: [PATCH 2/3] Add the IconButton component with its story --- src/IconButton.js | 26 ++++++++++++++++++++++++++ stories/IconButton.stories.js | 13 +++++++++++++ 2 files changed, 39 insertions(+) create mode 100644 src/IconButton.js create mode 100644 stories/IconButton.stories.js diff --git a/src/IconButton.js b/src/IconButton.js new file mode 100644 index 0000000..5e20fd0 --- /dev/null +++ b/src/IconButton.js @@ -0,0 +1,26 @@ +import React, {forwardRef} from 'react'; +import styled from "styled-components"; +import Button from "./Button"; +import { + BlendIcon, +} from "@blend-ui/icons"; + +const ClickableIcon = styled(BlendIcon).attrs(props => ({ + color: props.theme.colors.black, + textAlign: "center", +}))` + pointer-events: none; +`; + +const IconButton = forwardRef(( props, ref) => { + const { iconify, ...rest } = props; + return ( + + ); +}); + +IconButton.displayName = "IconButton"; + +export default IconButton; diff --git a/stories/IconButton.stories.js b/stories/IconButton.stories.js new file mode 100644 index 0000000..ddc9893 --- /dev/null +++ b/stories/IconButton.stories.js @@ -0,0 +1,13 @@ +import React from "react"; +import IconButton from "../src/IconButton"; +import {tableCogIcon} from "@blend-ui/icons"; + + +export default { title: "IconButton" }; +export const iconButton = () => ( + +); + +iconButton.story = { + name: "IconButton", +}; \ No newline at end of file From 650853739ae19cd2726a1d3c22dd79fa29ca7080 Mon Sep 17 00:00:00 2001 From: ChenyoisRita Date: Thu, 6 Aug 2020 23:51:06 -0400 Subject: [PATCH 3/3] Add the IconButton component with its story --- src/IconButton.js | 9 +++++---- stories/IconButton.stories.js | 4 ++-- 2 files changed, 7 insertions(+), 6 deletions(-) diff --git a/src/IconButton.js b/src/IconButton.js index 5e20fd0..a34639b 100644 --- a/src/IconButton.js +++ b/src/IconButton.js @@ -1,22 +1,23 @@ import React, {forwardRef} from 'react'; import styled from "styled-components"; import Button from "./Button"; +import Text from "./Text"; import { BlendIcon, } from "@blend-ui/icons"; const ClickableIcon = styled(BlendIcon).attrs(props => ({ color: props.theme.colors.black, - textAlign: "center", }))` pointer-events: none; `; const IconButton = forwardRef(( props, ref) => { - const { iconify, ...rest } = props; + const { iconify, buttonText, ...rest } = props; return ( - ); }); diff --git a/stories/IconButton.stories.js b/stories/IconButton.stories.js index ddc9893..e4b562b 100644 --- a/stories/IconButton.stories.js +++ b/stories/IconButton.stories.js @@ -5,9 +5,9 @@ import {tableCogIcon} from "@blend-ui/icons"; export default { title: "IconButton" }; export const iconButton = () => ( - + ); iconButton.story = { name: "IconButton", -}; \ No newline at end of file +};