From 4063d303682171923f9d7d2675a882ab68a3ef69 Mon Sep 17 00:00:00 2001 From: Shuofeng Wang Date: Mon, 13 Jul 2020 18:29:25 -0400 Subject: [PATCH 1/7] Complete Text Component. --- src/Text.js | 35 +++++++++++++++++++---- stories/Text.stories.js | 63 +++++++++++++++++++++++++++++++++++++++++ 2 files changed, 93 insertions(+), 5 deletions(-) create mode 100644 stories/Text.stories.js diff --git a/src/Text.js b/src/Text.js index 5d8c9bb..e8a952a 100644 --- a/src/Text.js +++ b/src/Text.js @@ -2,25 +2,50 @@ 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 => { + console.log("PROPS: ", props); + const { textTransform, textDecorationLine, ...other } = props; + + console.log("MyTransform: ", textTransform); + console.log("MyDecorationLine: ", textDecorationLine); + + return ; +} Text.displayName = "Text"; + Text.defaultProps = { as: "div", color: "currentColor", + fontSize: "30px", + fontStyle: "normal", + textAlign: "left", + textTransform: "none", + textDecorationLine: "none", }; Text.propTypes = { ...styledProps.space, ...styledProps.typography, ...styledProps.textStyle, + ...styledProps.color, + ...styledProps.layout, + color: PropTypes.string, + textTransform: PropTypes.oneOf(["capitalize", "uppercase", "lowercase", "none"]), + textDecorationLine: PropTypes.oneOf(["overline", "line-through", "underline", "none"]), }; export default Text; diff --git a/stories/Text.stories.js b/stories/Text.stories.js new file mode 100644 index 0000000..c763474 --- /dev/null +++ b/stories/Text.stories.js @@ -0,0 +1,63 @@ +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", +}; + From b88c896118df2cb12d1f7b94a0b94880ae44944e Mon Sep 17 00:00:00 2001 From: Shuofeng Wang Date: Mon, 20 Jul 2020 03:00:22 -0400 Subject: [PATCH 2/7] Complete Image and Box Component. --- src/Box.js | 39 +++++++++++++++++++++++++ src/Image.js | 58 +++++++++++++++++++++++++++++++++++++ src/Text.js | 49 ++++++++++++++++++++----------- stories/Box.stories.js | 62 ++++++++++++++++++++++++++++++++++++++++ stories/Image.stories.js | 48 +++++++++++++++++++++++++++++++ 5 files changed, 240 insertions(+), 16 deletions(-) create mode 100644 src/Box.js create mode 100644 src/Image.js create mode 100644 stories/Box.stories.js create mode 100644 stories/Image.stories.js diff --git a/src/Box.js b/src/Box.js new file mode 100644 index 0000000..d5a4b04 --- /dev/null +++ b/src/Box.js @@ -0,0 +1,39 @@ +import React from "react"; +import styled from "styled-components"; +import PropTypes from "prop-types"; + +import { space, typography, color, layout, flexbox } from "styled-system"; +import { default as styledProps } from "@styled-system/prop-types"; + +const BoxComponent = styled("div").withConfig({ + shouldForwardProp: (prop, defaultValidatorFn) => + !["color", "m", "bg", "size", "width", "height", "flexDirection", "mb"].includes(prop), +})` + flex-direction: ${props => props.flexDirection || "row"}; + ${space}; + ${typography} + ${layout}; + ${color}; + ${flexbox}; +`; + +const Box = ({ ...props }) => { + return ; +}; + +Box.displayName = "Box"; + +Box.defaultProps = { + as: "div", + flexDirection: "column", +}; + +Box.propTypes = { + ...styledProps.space, + ...styledProps.color, + ...styledProps.layout, + ...styledProps.typography, + ...styledProps.flexbox, +} + +export default Box; diff --git a/src/Image.js b/src/Image.js new file mode 100644 index 0000000..37a8d5d --- /dev/null +++ b/src/Image.js @@ -0,0 +1,58 @@ +import React from "react"; +import styled from "styled-components"; +import PropTypes from "prop-types"; + +import { space, layout } from "styled-system"; +import { default as styledProps } from "@styled-system/prop-types"; + +const ImageComponent = styled("img").withConfig({ + shouldForwardProp: (prop, defaultValidatorFn) => + !["alt", "myBorderRadius", "width", "widthProps", "heightProps", "myWidth", "myHeight"].includes(prop), +})` + border-radius: ${props => props.myBorderRadius || "0%"}; + width: ${props => props.myWidth}; + height: ${props => props.myHeight}; + ${space}; + ${layout}; +`; + +const Image = ({ src, alt, shape, ...props }) => { + var borderRadiusProps, widthProps, heightProps; + + if (shape === "circle") { + borderRadiusProps = "50%"; + } else if (shape === "square") { + widthProps = "360px"; + heightProps = "360px"; + } else{ + borderRadiusProps = "0%"; + } + + return ; +}; + +Image.displayName = "Image"; + +Image.defaultProps = { + as: "img", + src: "", + alt: "image", + shape: "rectangle", + widthProps: "100%", + heightProps: "100%", +}; + +Image.propTypes = { + ...styledProps.space, + ...styledProps.layout, + src: PropTypes.string, + alt: PropTypes.string, +}; + +export default Image; + + diff --git a/src/Text.js b/src/Text.js index e8a952a..eec9ce5 100644 --- a/src/Text.js +++ b/src/Text.js @@ -5,25 +5,42 @@ import PropTypes from "prop-types"; import { space, typography, textStyle, color, layout } from "styled-system"; import { default as styledProps } from "@styled-system/prop-types"; -const TextComponent= styled.text` - text-transform: ${props => props.textTransform || "none"}; - text-decoration-line: ${props => props.textDecorationLine || "none"}; - ${space}; - ${typography}; - ${textStyle}; - ${color}; - ${layout}; -`; +// const TextComponent= styled.text` +// text-transform: ${props => props.textTransform || "none"}; +// text-decoration-line: ${props => props.textDecorationLine || "none"}; +// ${space}; +// ${typography}; +// ${textStyle}; +// ${color}; +// ${layout}; +// `; -const Text = props => { - console.log("PROPS: ", props); - const { textTransform, textDecorationLine, ...other } = props; +const TextComponent = styled("div").withConfig({ + shouldForwardProp: (prop, defaultValidatorFn) => + !["color", "fontSize", "fontStyle", "textAlign", "textTransform", "textDecorationLine", "m", "fontWeight"].includes(prop), +})` + text-transform: ${props => props.textTransform || "none"}; + text-decoration-line: ${props => props.textDecorationLine || "none"}; + ${space}; + ${textStyle}; + ${typography}; + ${layout}; + ${color}; +`; - console.log("MyTransform: ", textTransform); - console.log("MyDecorationLine: ", textDecorationLine); +const Text = ({ textTransform, textDecorationLine, ...props }) => { + return ; +}; - return ; -} +// const Text = props => { +// console.log("PROPS: ", props); +// const { textTransform, textDecorationLine, ...other } = props; +// +// console.log("MyTransform: ", textTransform); +// console.log("MyDecorationLine: ", textDecorationLine); +// +// return ; +// } Text.displayName = "Text"; diff --git a/stories/Box.stories.js b/stories/Box.stories.js new file mode 100644 index 0000000..3c09f76 --- /dev/null +++ b/stories/Box.stories.js @@ -0,0 +1,62 @@ +import React from "react"; +import Box from "../src/Box"; +import Divider from "../src/Divider"; + +export default { title: "Box" }; + +export const registerBox = () => ( +
+ + + + + + + + +
+); + +registerBox.story = { + name: "Register Box Component", +}; + +export const loginBox = () => ( +
+ + + + + +
+); + +loginBox.story = { + name: "Login Box Component", +}; + diff --git a/stories/Image.stories.js b/stories/Image.stories.js new file mode 100644 index 0000000..b87d967 --- /dev/null +++ b/stories/Image.stories.js @@ -0,0 +1,48 @@ +import React from "react"; +import Image from "../src/Image"; + +export default { title: "Image"}; + +export const rectangleImage = () => ( +
+ {"image"} +
+); + +rectangleImage.story = { + name: "Rectangle Image", +}; + +export const circleImage = () => ( +
+ {"image"} +
+); + +circleImage.story = { + name: "Circle Image", +}; + +export const squareImage = () => ( +
+ {"image"} +
+); + +squareImage.story = { + name: "Square Image", +}; \ No newline at end of file From 28fb34850cf4f0364fa385eacf51aa8b79c19790 Mon Sep 17 00:00:00 2001 From: Shuofeng Wang Date: Mon, 20 Jul 2020 04:11:42 -0400 Subject: [PATCH 3/7] Complete Label Component. --- src/Label.js | 37 +++++++++++++++++++++++++++++++++++++ stories/Label.stories.js | 23 +++++++++++++++++++++++ 2 files changed, 60 insertions(+) create mode 100644 src/Label.js create mode 100644 stories/Label.stories.js diff --git a/src/Label.js b/src/Label.js new file mode 100644 index 0000000..a19ca91 --- /dev/null +++ b/src/Label.js @@ -0,0 +1,37 @@ +import React from "react"; +import styled from "styled-components"; +import PropTypes from "prop-types"; + +import { space, color, typography, textStyle } from "styled-system"; +import { default as styledProps } from "@styled-system/prop-types"; + +const LabelComponent = styled("label").withConfig({ + shouldForwardProp: (prop, defaultValidatorFn) => + ![].includes(prop), +})` + ${space}; + ${color}; + ${textStyle}; + ${typography}; +`; + +const Label = ({ ...props }) => { + return +}; + +Label.displayName = "Label"; + +Label.defaultProps = { + as: "label", + color: "black", + fontSize: "1em", +} + +Label.propTypes = { + ...styledProps.space, + ...styledProps.color, + ...styledProps.textStyle, + ...styledProps.typography, +}; + +export default Label; diff --git a/stories/Label.stories.js b/stories/Label.stories.js new file mode 100644 index 0000000..8ef7e1b --- /dev/null +++ b/stories/Label.stories.js @@ -0,0 +1,23 @@ +import React from "react"; +import Label from "../src/Label"; + +export default { title: "Label"}; + +export const emailAddrLabel = () => ( +
+ +
+); + +emailAddrLabel.story = { + name: "Email Address Label", +}; \ No newline at end of file From aca83738e7410f4e7602a9da2fd77cee04c2a3bc Mon Sep 17 00:00:00 2001 From: Shuofeng Wang Date: Mon, 20 Jul 2020 04:15:58 -0400 Subject: [PATCH 4/7] Handle Rounded prop in Image Component. --- src/Image.js | 2 ++ stories/Image.stories.js | 33 ++++++++++++++++++++++++--------- 2 files changed, 26 insertions(+), 9 deletions(-) diff --git a/src/Image.js b/src/Image.js index 37a8d5d..d3364ed 100644 --- a/src/Image.js +++ b/src/Image.js @@ -21,6 +21,8 @@ const Image = ({ src, alt, shape, ...props }) => { if (shape === "circle") { borderRadiusProps = "50%"; + } else if (shape === "rounded") { + borderRadiusProps = "4%"; } else if (shape === "square") { widthProps = "360px"; heightProps = "360px"; diff --git a/stories/Image.stories.js b/stories/Image.stories.js index b87d967..a83254d 100644 --- a/stories/Image.stories.js +++ b/stories/Image.stories.js @@ -3,34 +3,34 @@ import Image from "../src/Image"; export default { title: "Image"}; -export const rectangleImage = () => ( +export const circleImage = () => (
{"image"}
); -rectangleImage.story = { - name: "Rectangle Image", +circleImage.story = { + name: "Circle Image", }; -export const circleImage = () => ( +export const roundedImage = () => (
{"image"}
); -circleImage.story = { - name: "Circle Image", +roundedImage.story = { + name: "Rounded Image", }; export const squareImage = () => ( @@ -45,4 +45,19 @@ export const squareImage = () => ( squareImage.story = { name: "Square Image", +}; + +export const rectangleImage = () => ( +
+ {"image"} +
+); + +rectangleImage.story = { + name: "Rectangle Image", }; \ No newline at end of file From b939673002ac199a91964def61eb0905fb12d02d Mon Sep 17 00:00:00 2001 From: Shuofeng Wang Date: Tue, 21 Jul 2020 03:06:01 -0400 Subject: [PATCH 5/7] Complete the Avatar and Label Component. --- src/Avatar.js | 88 ++++++ src/Label.js | 1 + stories/Avatar.stories.js | 609 ++++++++++++++++++++++++++++++++++++++ stories/Label.stories.js | 3 + 4 files changed, 701 insertions(+) create mode 100644 src/Avatar.js create mode 100644 stories/Avatar.stories.js diff --git a/src/Avatar.js b/src/Avatar.js new file mode 100644 index 0000000..2a96ce7 --- /dev/null +++ b/src/Avatar.js @@ -0,0 +1,88 @@ +import React from "react"; +import styled from "styled-components"; +import PropTypes from "prop-types"; + +import { space, layout } from "styled-system"; +import { default as styledProps } from "@styled-system/prop-types"; + +const AvatarComponent = styled("img").withConfig({ + +})` + border-radius: 50%; + width: ${props => props.myWidth}; + height: ${props => props.myHeight}; + ${space}; + ${layout}; +`; + +const Avatar = ({ src, alt, name, size, ...props }) => { + src = getLetterAvatar(name, size); + return ; +}; + +function getLetterAvatar(name, size) { + name = name || ""; + size = size || 30; + + var colors = [ + "#5A8770", "#B2B7BB", "#6FA9AB", "#F5AF29", + "#0088B9", "#F18636", "#D93A37", "#A6B12E", + "#5C9BBC", "#F5888D", "#9A89B5", "#407887", + "#9A89B5", "#5A8770", "#D33F33", "#A2B01F", + "#F0B126", "#0087BF", "#F18636", "#0087BF", + "#B2B7BB", "#72ACAE", "#9C8AB4", "#5A8770", + "#EEB424", "#407887" + ]; + var nameArray = String(name).toUpperCase().split(' '); + var initials, charIndex, colorIndex, canvas, context, dataURL; + + if (nameArray.length == 1) { + initials = nameArray[0] ? nameArray[0].charAt(0) : '?'; + } else { + initials = nameArray[0].charAt(0) + nameArray[1].charAt(0); + } + + console.log("before size: " + size); + if (window.devicePixelRatio) { + size = (size * window.devicePixelRatio); + } + console.log("After size: " + size); + + + charIndex = (initials == '?' ? 72 : initials.charCodeAt(0)) - 64; + colorIndex = charIndex % 26; + + canvas = document.createElement('canvas'); + canvas.width = size; + canvas.height = size; + context = canvas.getContext("2d"); + + context.fillStyle = colors[colorIndex]; + context.fillRect (0, 0, canvas.width, canvas.height); + context.font = Math.round(canvas.width/2)+"px Arial"; + context.textAlign = "center"; + context.fillStyle = "#FFFFFF"; + context.fillText(initials, size / 2, size / 1.5); + + dataURL = canvas.toDataURL(); + canvas = null; + + return dataURL; +} + +Avatar.displayName = "Avatar"; + +Avatar.defaultProps = { + as: "img", + src: "", + alt: "Avatar Image", +} + +Avatar.propTypes = { + ...styledProps.space, + ...styledProps.layout, + src: PropTypes.string, + alt: PropTypes.string, +} + +export default Avatar; \ No newline at end of file diff --git a/src/Label.js b/src/Label.js index a19ca91..c91958b 100644 --- a/src/Label.js +++ b/src/Label.js @@ -9,6 +9,7 @@ const LabelComponent = styled("label").withConfig({ shouldForwardProp: (prop, defaultValidatorFn) => ![].includes(prop), })` + for: ${props => props.for}; ${space}; ${color}; ${textStyle}; diff --git a/stories/Avatar.stories.js b/stories/Avatar.stories.js new file mode 100644 index 0000000..3f93fe9 --- /dev/null +++ b/stories/Avatar.stories.js @@ -0,0 +1,609 @@ +import React from "react"; +import Avatar from "../src/Avatar"; +import Box from "../src/Box"; +import Divider from "../src/Divider"; + +export default { title: "Avatar"}; + +export const noNameAvatar = () => ( +
+ +
+); + +noNameAvatar.story = { + name: "No Name Avatar", +}; + +export const singleNameAvatar = () => ( +
+ +
+); + +singleNameAvatar.story = { + name: "Single Name Avatar", +}; + +export const fullNameAvatar = () => ( +
+ +
+); + +fullNameAvatar.story = { + name: "Full Name Avatar", +}; + +export const avatarGallery = () => ( + +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +); + +avatarGallery.story = { + name: "Avatar Gallery", +}; + +export const avatarLibrary = () => ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +); + +avatarLibrary.story = { + name: "Avatar Library", +}; \ No newline at end of file diff --git a/stories/Label.stories.js b/stories/Label.stories.js index 8ef7e1b..55a68d7 100644 --- a/stories/Label.stories.js +++ b/stories/Label.stories.js @@ -12,9 +12,12 @@ export const emailAddrLabel = () => ( fontSize={"14px"} lineHeight={"21px"} color={"#1E1D1D"} + for={"email"} > Your email address +
+ ); From 3f07509c81544d537de2c35df5d3b75667dec95c Mon Sep 17 00:00:00 2001 From: Shuofeng Wang Date: Tue, 21 Jul 2020 23:41:48 -0400 Subject: [PATCH 6/7] Remove Unused props in Avatar. Update Avatar story. --- src/Avatar.js | 11 +- stories/Avatar.stories.js | 224 ++------------------------------------ 2 files changed, 10 insertions(+), 225 deletions(-) diff --git a/src/Avatar.js b/src/Avatar.js index 2a96ce7..ee8b66d 100644 --- a/src/Avatar.js +++ b/src/Avatar.js @@ -5,12 +5,8 @@ import PropTypes from "prop-types"; import { space, layout } from "styled-system"; import { default as styledProps } from "@styled-system/prop-types"; -const AvatarComponent = styled("img").withConfig({ - -})` +const AvatarComponent = styled("img")` border-radius: 50%; - width: ${props => props.myWidth}; - height: ${props => props.myHeight}; ${space}; ${layout}; `; @@ -42,14 +38,11 @@ function getLetterAvatar(name, size) { initials = nameArray[0].charAt(0) + nameArray[1].charAt(0); } - console.log("before size: " + size); if (window.devicePixelRatio) { size = (size * window.devicePixelRatio); } - console.log("After size: " + size); - - charIndex = (initials == '?' ? 72 : initials.charCodeAt(0)) - 64; + charIndex = (initials == '?' ? 72 : initials.charCodeAt(0)) - 65; colorIndex = charIndex % 26; canvas = document.createElement('canvas'); diff --git a/stories/Avatar.stories.js b/stories/Avatar.stories.js index 3f93fe9..d37dc63 100644 --- a/stories/Avatar.stories.js +++ b/stories/Avatar.stories.js @@ -47,222 +47,6 @@ fullNameAvatar.story = { name: "Full Name Avatar", }; -export const avatarGallery = () => ( - -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -); - -avatarGallery.story = { - name: "Avatar Gallery", -}; - export const avatarLibrary = () => ( @@ -320,6 +104,7 @@ export const avatarLibrary = () => ( name={"I Rohn"} /> +
( name={"R Iohn"} /> +
( /> +
+
( /> +
( name={"R"} /> +
( /> +
+
Date: Sat, 1 Aug 2020 16:16:46 -0400 Subject: [PATCH 7/7] Complete Radio Component --- src/Radio.js | 39 +++++++++++++++++++++++++++++++++++++++ stories/Radio.stories.js | 38 ++++++++++++++++++++++++++++++++++++++ 2 files changed, 77 insertions(+) create mode 100644 src/Radio.js create mode 100644 stories/Radio.stories.js diff --git a/src/Radio.js b/src/Radio.js new file mode 100644 index 0000000..490787b --- /dev/null +++ b/src/Radio.js @@ -0,0 +1,39 @@ +import React, {forwardRef} from "react"; +import styled, { css } from "styled-components"; +import { space, layout, compose } from "styled-system"; +import PropTypes from "prop-types"; + +const systemProps = compose(layout, space); + +const radioTheme = css` + appearance: radio; + cursor: pointer; + border-radius: 50%; + margin: 3px 3px 0px 5px; + padding: initial; + border: initial; + + ${systemProps} +`; + +const RadioElement = styled.input` + ${radioTheme} +`; + +const Radio = forwardRef((props, ref) => { + return ; +}); + +Radio.defaultProps = { + as: "input", + type: "radio", + onChange: () => {}, +}; + +Radio.propTypes = { + onChange: PropTypes.func, +} + +Radio.displayName = "Radio"; + +export default Radio; diff --git a/stories/Radio.stories.js b/stories/Radio.stories.js new file mode 100644 index 0000000..b093817 --- /dev/null +++ b/stories/Radio.stories.js @@ -0,0 +1,38 @@ +import React from "react"; +import Radio from "../src/Radio"; +import Label from "../src/Label"; + +export default { title: "Radio"}; + +export const defaultRadio = () => ( +
+ + +
+); +defaultRadio.story = { + name: "Default Radio Btn" +}; + +export const customRadio = () => ( +
+ + +
+); +customRadio.story = { + name: "Custom Radio Btn" +}; + +export const disabledRadio = () => ( +
+ + +
+); +disabledRadio.story = { + name: "Disabled Radio Btn" +};