fix: replaced p with Text component

fayez-baig · Oct 10, 2020 · 8ba37dd · 8ba37dd
1 parent 8678d91
commit 8ba37dd
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 6 deletions.
diff --git 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<BoxProps> = args => (
 			</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>

diff --git 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) => (
 					<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)}