fix: Merge pull request #27 from fayez-baig/comonent/ProgressBar

fix: progressbar component

src/components/Elements/Box/Box.stories.tsx

@@ -1,8 +1,10 @@
 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';
+import Text from './../Text/Text';
 
 export default {
 	argTypes: {
@@ -21,23 +23,24 @@ const defaultBoxTemplate: Story<BoxProps> = args => (
 		<article className={getStyles(['media'])}>
 			<div className={getStyles(['media-left'])}>
 				<figure className={getStyles(['image is-64x64'])}>
-					<img
+					<Image
 						src='https://bulma.io/images/placeholders/128x128.png'
-						alt='Image'
-						// todo comment to replace this woth Image component in future
+						imageSize='128x128'
+						isRounded
+						alt='alt-text'
 					/>
 				</figure>
 			</div>
 			<div className={getStyles(['media-content'])}>
 				<div className={getStyles(['content'])}>
-					<p>
+					<Text>
 						<strong>John Smith</strong> <small>@johnsmith</small>{' '}
 						<small>31m</small>
 						<br />
 						Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean
 						efficitur sit amet massa fringilla egestas. Nullam condimentum
 						luctus turpis.
-					</p>
+					</Text>
 				</div>
 			</div>
 		</article>

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<NotificationProps> = args => (
 	<Notification {...args}>
-		{/* replace p with text component after all merge */}
-		<p>
+		<Text>
 			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!
-		</p>
+		</Text>
 	</Notification>
 );
 

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'
+			}
+		},
+		size: {
+			control: {
+				options: SizeValues,
+				type: 'inline-radio'
+			}
+		},
+		value: {
+			control: {
+				type: 'text'
+			}
+		}
+	},
+	component: ProgressBar,
+	title: 'Elements/ProgressBar'
+};
+
+const defaultProgressBarTemplate: Story<ProgressBarProps> = args => (
+	<ProgressBar {...args} />
+);
+
+export const Default = defaultProgressBarTemplate.bind({});
+
+Default.args = {
+	color: 'default',
+	max: 100,
+	size: 'default',
+	value: 30
+};
+
+const indeterminateProgressBarTemplate: Story<ProgressBarProps> = args => (
+	<ProgressBar {...args} />
+);
+
+export const Indeterminate = indeterminateProgressBarTemplate.bind({});
+
+Indeterminate.args = {
+	color: 'default',
+	max: 100,
+	size: 'default'
+};

src/components/Elements/ProgressBar/ProgressBar.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { getStyles } from '../../styles/getStyles';
+import { ProgressBarProps, defaultProps } from './types';
+
+const ProgressBar: React.FC<ProgressBarProps> = ({
+	children,
+	value,
+	color,
+	size,
+	...otherProgessBarProps
+}) => {
+	let progressBarClassesStr = 'progress,';
+	color !== 'default' && (progressBarClassesStr += `is-${color},`);
+	size !== 'default' && (progressBarClassesStr += `is-${size},`);
+
+	const classes = getStyles(progressBarClassesStr.split(','));
+	return (
+		<progress className={classes} value={value} {...otherProgessBarProps}>
+			{`${value}%`}
+		</progress>
+	);
+};
+
+ProgressBar.defaultProps = defaultProps;
+
+export default ProgressBar;

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;
+	size?: Size;
+	value?: number;
+}
+
+export const defaultProps: ProgressBarProps = {
+	max: 100,
+	size: 'default'
+};

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<TextProps> = ({ children, textSize }) => {
+const Text: React.FC<TextProps> = ({
+	children,
+	textSize,
+	...otherTextProps
+}) => {
 	let textClassesStr = 'content,';
 
 	textSize !== 'default' && (textClassesStr += `is-${textSize},`);
 
 	const classes = getStyles(textClassesStr.split(','));
 
-	return <div className={classes}>{children}</div>;
+	return (
+		<div className={classes} {...otherTextProps}>
+			{children}
+		</div>
+	);
 };
 
 Text.defaultProps = defaultProps;

src/components/Elements/Text/types.ts

@@ -3,6 +3,8 @@ import { ReactNode } from 'react';
 type Size = 'default' | 'small' | 'medium' | 'large';
 export interface TextProps {
 	children?: ReactNode;
+	className?: string;
+	style?: any;
 	textSize?: Size;
 }
 

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) => (
 					<Col key={i}>
-						<p
+						<Text
 							className={otherColClasses}
 							style={{
 								padding: '16px 0px',
 								textAlign: 'center'
 							}}>
 							<code>{isNumberedCol ? 1 + +col + ++i : 'Auto'}</code>
-						</p>
+						</Text>
 					</Col>
 				))}
 		</>
@@ -85,11 +86,11 @@ const defaultColTemplate: Story = args => (
 			.fill(' ')
 			.map((_, i) => (
 				<Col key={i} {...args}>
-					<p
+					<Text
 						className={colContentClasses}
 						style={{ padding: '16px 0px', textAlign: 'center' }}>
 						<code>1</code>
-					</p>
+					</Text>
 				</Col>
 			))}
 		{args.colSize !== 'is-full' && renderOtherColumns(args.colSize)}

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 key={i} {...args}>
-					<p
+					<Text
 						className={colContentClasses}
 						style={{ padding: '16px 0px', textAlign: 'center' }}>
 						<code>{col + ++i}</code>
-					</p>
+					</Text>
 				</Col>
 			))}
 	</Row>

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';