From 1e4dbb7e4f629d26ac969902accb1f37dd7c9bcd Mon Sep 17 00:00:00 2001 From: fayez-baig Date: Sat, 10 Oct 2020 19:00:35 +0530 Subject: [PATCH 1/5] fix: progressbar component --- src/components/Elements/Box/Box.stories.tsx | 8 ++- .../Notification/Notification.stories.tsx | 6 +- .../ProgressBar/ProgressBar.stories.tsx | 71 +++++++++++++++++++ .../Elements/ProgressBar/ProgressBar.tsx | 25 +++++++ src/components/Elements/ProgressBar/types.ts | 22 ++++++ src/components/index.ts | 2 +- 6 files changed, 127 insertions(+), 7 deletions(-) create mode 100644 src/components/Elements/ProgressBar/ProgressBar.stories.tsx create mode 100644 src/components/Elements/ProgressBar/ProgressBar.tsx create mode 100644 src/components/Elements/ProgressBar/types.ts diff --git a/src/components/Elements/Box/Box.stories.tsx b/src/components/Elements/Box/Box.stories.tsx index d523619..6f38d1c 100644 --- a/src/components/Elements/Box/Box.stories.tsx +++ b/src/components/Elements/Box/Box.stories.tsx @@ -1,6 +1,7 @@ import React from 'react'; import { Story } from '@storybook/react/types-6-0'; import Box from './Box'; +import Image from '../Image/Image'; import { BoxProps } from './types'; import { getStyles } from '../../styles/getStyles'; @@ -21,10 +22,11 @@ const defaultBoxTemplate: Story = args => (
- Image
diff --git a/src/components/Elements/Notification/Notification.stories.tsx b/src/components/Elements/Notification/Notification.stories.tsx index c5c78b7..f4527f2 100644 --- a/src/components/Elements/Notification/Notification.stories.tsx +++ b/src/components/Elements/Notification/Notification.stories.tsx @@ -1,6 +1,7 @@ import React from 'react'; import { Story } from '@storybook/react/types-6-0'; import Notification from './Notification'; +import Text from '../Text/Text'; import { NotificationProps } from './types'; const backgroundColor = [ @@ -34,12 +35,11 @@ export default { const defaultNotificationTemplate: Story = args => ( - {/* replace p with text component after all merge */} -

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus, eum temporibus numquam deserunt, quos fugiat ea, tenetur voluptatum ut modi sed? Quo soluta modi eius possimus adipisci harum sequi cumque! -

+ ); diff --git a/src/components/Elements/ProgressBar/ProgressBar.stories.tsx b/src/components/Elements/ProgressBar/ProgressBar.stories.tsx new file mode 100644 index 0000000..962e51f --- /dev/null +++ b/src/components/Elements/ProgressBar/ProgressBar.stories.tsx @@ -0,0 +1,71 @@ +import React from 'react'; +import { Story } from '@storybook/react/types-6-0'; +import ProgressBar from './ProgressBar'; +import { ProgressBarProps } from './types'; + +const Color = [ + 'default', + 'primary', + 'link', + 'info', + 'success', + 'warning', + 'danger' +]; + +const SizeValues = ['default', 'small', 'medium', 'large']; + +export default { + argTypes: { + color: { + control: { + options: Color, + type: 'inline-radio' + } + }, + + max: { + control: { + type: 'text' + } + }, + progressBarSize: { + control: { + options: SizeValues, + type: 'inline-radio' + } + }, + value: { + control: { + type: 'text' + } + } + }, + component: ProgressBar, + title: 'Elements/ProgressBar' +}; + +const defaultProgressBarTemplate: Story = args => ( + +); + +export const Default = defaultProgressBarTemplate.bind({}); + +Default.args = { + color: 'default', + max: 100, + progressBarSize: 'default', + value: 30 +}; + +const indeterminateProgressBarTemplate: Story = args => ( + +); + +export const Indeterminate = indeterminateProgressBarTemplate.bind({}); + +Indeterminate.args = { + color: 'default', + max: 100, + progressBarSize: 'default' +}; diff --git a/src/components/Elements/ProgressBar/ProgressBar.tsx b/src/components/Elements/ProgressBar/ProgressBar.tsx new file mode 100644 index 0000000..9297138 --- /dev/null +++ b/src/components/Elements/ProgressBar/ProgressBar.tsx @@ -0,0 +1,25 @@ +import React from 'react'; +import { getStyles } from '../../styles/getStyles'; +import { ProgressBarProps, defaultProps } from './types'; + +const ProgressBar: React.FC = ({ + children, + value, + color, + progressBarSize, + ...otherProgessBarProps +}) => { + let progressBarClassesStr = 'progress,'; + color !== 'default' && (progressBarClassesStr += `is-${color},`); + progressBarSize !== 'default' && + (progressBarClassesStr += `is-${progressBarSize},`); + + const classes = getStyles(progressBarClassesStr.split(',')); + return ( + + {`${value}%`} + + ); +}; + +export default ProgressBar; diff --git a/src/components/Elements/ProgressBar/types.ts b/src/components/Elements/ProgressBar/types.ts new file mode 100644 index 0000000..77f0176 --- /dev/null +++ b/src/components/Elements/ProgressBar/types.ts @@ -0,0 +1,22 @@ +type Color = + | 'default' + | 'primary' + | 'link' + | 'info' + | 'success' + | 'warning' + | 'danger'; + +type Size = 'default' | 'small' | 'medium' | 'large'; + +export interface ProgressBarProps { + color?: Color; + max: number; + progressBarSize?: Size; + value?: number; +} + +export const defaultProps: ProgressBarProps = { + max: 100, + progressBarSize: 'default' +}; diff --git a/src/components/index.ts b/src/components/index.ts index fcc20d1..392c64a 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -6,7 +6,7 @@ export { default as Image } from './Elements/Image/Image'; export { default as Notification } from './Elements/Notification/Notification'; export { default as DeleteButton } from './Elements/DeleteButton/DeleteButton'; export { default as Text } from './Elements/Text/Text'; - +export { default as ProgressBar } from './Elements/ProgressBar/ProgressBar'; //Form export { default as Input } from './Form/Input/Input'; From d128c533b312d3c90d53284fdb422893b97d62c6 Mon Sep 17 00:00:00 2001 From: fayez-baig Date: Sat, 10 Oct 2020 19:11:37 +0530 Subject: [PATCH 2/5] fix: changes according to comments --- .../Elements/ProgressBar/ProgressBar.stories.tsx | 6 +++--- src/components/Elements/ProgressBar/ProgressBar.tsx | 7 ++++--- src/components/Elements/ProgressBar/types.ts | 6 +++--- 3 files changed, 10 insertions(+), 9 deletions(-) diff --git a/src/components/Elements/ProgressBar/ProgressBar.stories.tsx b/src/components/Elements/ProgressBar/ProgressBar.stories.tsx index 962e51f..ea1c3cd 100644 --- a/src/components/Elements/ProgressBar/ProgressBar.stories.tsx +++ b/src/components/Elements/ProgressBar/ProgressBar.stories.tsx @@ -29,7 +29,7 @@ export default { type: 'text' } }, - progressBarSize: { + size: { control: { options: SizeValues, type: 'inline-radio' @@ -54,7 +54,7 @@ export const Default = defaultProgressBarTemplate.bind({}); Default.args = { color: 'default', max: 100, - progressBarSize: 'default', + size: 'default', value: 30 }; @@ -67,5 +67,5 @@ export const Indeterminate = indeterminateProgressBarTemplate.bind({}); Indeterminate.args = { color: 'default', max: 100, - progressBarSize: 'default' + size: 'default' }; diff --git a/src/components/Elements/ProgressBar/ProgressBar.tsx b/src/components/Elements/ProgressBar/ProgressBar.tsx index 9297138..fcf0e22 100644 --- a/src/components/Elements/ProgressBar/ProgressBar.tsx +++ b/src/components/Elements/ProgressBar/ProgressBar.tsx @@ -6,13 +6,12 @@ const ProgressBar: React.FC = ({ children, value, color, - progressBarSize, + size, ...otherProgessBarProps }) => { let progressBarClassesStr = 'progress,'; color !== 'default' && (progressBarClassesStr += `is-${color},`); - progressBarSize !== 'default' && - (progressBarClassesStr += `is-${progressBarSize},`); + size !== 'default' && (progressBarClassesStr += `is-${size},`); const classes = getStyles(progressBarClassesStr.split(',')); return ( @@ -22,4 +21,6 @@ const ProgressBar: React.FC = ({ ); }; +ProgressBar.defaultProps = defaultProps; + export default ProgressBar; diff --git a/src/components/Elements/ProgressBar/types.ts b/src/components/Elements/ProgressBar/types.ts index 77f0176..5955076 100644 --- a/src/components/Elements/ProgressBar/types.ts +++ b/src/components/Elements/ProgressBar/types.ts @@ -11,12 +11,12 @@ type Size = 'default' | 'small' | 'medium' | 'large'; export interface ProgressBarProps { color?: Color; - max: number; - progressBarSize?: Size; + max?: number; + size?: Size; value?: number; } export const defaultProps: ProgressBarProps = { max: 100, - progressBarSize: 'default' + size: 'default' }; From 5c640dfd0f9e167e86aa7373e44207cf5d4b9540 Mon Sep 17 00:00:00 2001 From: fayez-baig Date: Sat, 10 Oct 2020 19:20:36 +0530 Subject: [PATCH 3/5] fix: changes in text component --- src/components/Elements/Text/Text.tsx | 12 ++++++++++-- src/components/Elements/Text/types.ts | 1 + 2 files changed, 11 insertions(+), 2 deletions(-) diff --git a/src/components/Elements/Text/Text.tsx b/src/components/Elements/Text/Text.tsx index add81bb..792ce2c 100644 --- a/src/components/Elements/Text/Text.tsx +++ b/src/components/Elements/Text/Text.tsx @@ -2,14 +2,22 @@ import React from 'react'; import { TextProps, defaultProps } from './types'; import { getStyles } from '../../styles/getStyles'; -const Text: React.FC = ({ children, textSize }) => { +const Text: React.FC = ({ + children, + textSize, + ...otherTextProps +}) => { let textClassesStr = 'content,'; textSize !== 'default' && (textClassesStr += `is-${textSize},`); const classes = getStyles(textClassesStr.split(',')); - return
{children}
; + return ( +
+ {children} +
+ ); }; Text.defaultProps = defaultProps; diff --git a/src/components/Elements/Text/types.ts b/src/components/Elements/Text/types.ts index 9720f08..b7e2a91 100644 --- a/src/components/Elements/Text/types.ts +++ b/src/components/Elements/Text/types.ts @@ -3,6 +3,7 @@ import { ReactNode } from 'react'; type Size = 'default' | 'small' | 'medium' | 'large'; export interface TextProps { children?: ReactNode; + className?: string; textSize?: Size; } From 8678d911ba19a44fdf6de036b6103b41e881a42f Mon Sep 17 00:00:00 2001 From: fayez-baig Date: Sat, 10 Oct 2020 19:22:51 +0530 Subject: [PATCH 4/5] fix: changes in grid stories --- src/components/Elements/Text/types.ts | 1 + src/components/Layout/Grid/Grid.stories.tsx | 5 +++-- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/src/components/Elements/Text/types.ts b/src/components/Elements/Text/types.ts index b7e2a91..69be2fa 100644 --- a/src/components/Elements/Text/types.ts +++ b/src/components/Elements/Text/types.ts @@ -4,6 +4,7 @@ type Size = 'default' | 'small' | 'medium' | 'large'; export interface TextProps { children?: ReactNode; className?: string; + style?: any; textSize?: Size; } diff --git a/src/components/Layout/Grid/Grid.stories.tsx b/src/components/Layout/Grid/Grid.stories.tsx index 468a3d8..6ccf7fe 100644 --- a/src/components/Layout/Grid/Grid.stories.tsx +++ b/src/components/Layout/Grid/Grid.stories.tsx @@ -1,5 +1,6 @@ import { Story } from '@storybook/react/types-6-0'; import React from 'react'; +import Text from '../../Elements/Text/Text'; import Row from './Row/Row'; import Col from './Col/Col'; import { getStyles } from '../../styles/getStyles'; @@ -21,11 +22,11 @@ const defaultGridTemplate: Story = args => ( .fill(' ') .map((col, i) => ( -

{col + ++i} -

+ ))} From 8ba37dd2c3414fc2418f304d2e359c1509c5fa80 Mon Sep 17 00:00:00 2001 From: fayez-baig Date: Sat, 10 Oct 2020 19:25:27 +0530 Subject: [PATCH 5/5] fix: replaced p with Text component --- src/components/Elements/Box/Box.stories.tsx | 5 +++-- src/components/Layout/Grid/Col/Col.stories.tsx | 9 +++++---- 2 files changed, 8 insertions(+), 6 deletions(-) diff --git a/src/components/Elements/Box/Box.stories.tsx b/src/components/Elements/Box/Box.stories.tsx index 6f38d1c..df17bf2 100644 --- a/src/components/Elements/Box/Box.stories.tsx +++ b/src/components/Elements/Box/Box.stories.tsx @@ -4,6 +4,7 @@ import Box from './Box'; import Image from '../Image/Image'; import { BoxProps } from './types'; import { getStyles } from '../../styles/getStyles'; +import Text from './../Text/Text'; export default { argTypes: { @@ -32,14 +33,14 @@ const defaultBoxTemplate: Story = args => (
-

+ John Smith @johnsmith{' '} 31m
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur sit amet massa fringilla egestas. Nullam condimentum luctus turpis. -

+
diff --git a/src/components/Layout/Grid/Col/Col.stories.tsx b/src/components/Layout/Grid/Col/Col.stories.tsx index 8a95e51..b5b3872 100644 --- a/src/components/Layout/Grid/Col/Col.stories.tsx +++ b/src/components/Layout/Grid/Col/Col.stories.tsx @@ -3,6 +3,7 @@ import React from 'react'; import Row from '../Row/Row'; import Col from '../Col/Col'; import { getStyles } from '../../../styles/getStyles'; +import Text from './../../../Elements/Text/Text'; const colSizeMultipleOf20 = [ 'is-four-fifths', @@ -63,14 +64,14 @@ const renderOtherColumns = (cls: string) => { .fill(' ') .map((col, i) => ( -

{isNumberedCol ? 1 + +col + ++i : 'Auto'} -

+ ))} @@ -85,11 +86,11 @@ const defaultColTemplate: Story = args => ( .fill(' ') .map((_, i) => ( -

1 -

+ ))} {args.colSize !== 'is-full' && renderOtherColumns(args.colSize)}