fix(component): fix Image component

- Fix Image component with updated structure and props - Fix Section and Column props - Update stories for Image component resolves #42 Signed-off-by: Niloy Sikdar <niloysikdar30@gmail.com>
leopardslab · Jul 9, 2022 · fcfb301 · fcfb301
1 parent f3bd9b6
commit fcfb301
Show file tree

Hide file tree

Showing 4 changed files with 71 additions and 31 deletions.
diff --git a/src/components/Column/Column.tsx b/src/components/Column/Column.tsx
@@ -1,12 +1,14 @@
-import { ReactNode } from 'react';
-import { BaseStyleProp } from '../types';
+import { CSSProperties, ReactNode } from 'react';
 import { makeStyles } from '../../utils/makeStyles';
+import { sx } from '../../utils/sx';
+import { BaseStyleProp } from '../types';
 
 type ColumnStyles = 'root';
 
 export interface ColumnProps extends BaseStyleProp<ColumnStyles> {
   children?: ReactNode;
   align?: 'left' | 'center' | 'right';
+  verticalAlign?: CSSProperties['verticalAlign'];
 }
 
 const useStyles = makeStyles({
@@ -18,11 +20,12 @@ export const Column = ({
   className,
   classes,
   align = 'left',
+  verticalAlign = 'top',
 }: ColumnProps): JSX.Element => {
   const styles = useStyles({ classes });
 
   return (
-    <td className={className} style={styles.root} align={align}>
+    <td className={className} style={sx(styles.root, { verticalAlign })} align={align}>
       {children}
     </td>
   );

diff --git a/src/components/Image/Image.stories.tsx b/src/components/Image/Image.stories.tsx
@@ -1,20 +1,39 @@
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 
+import { Email } from '../Email/Email';
+import { Section } from '../Section/Section';
+import { Column } from '../Column/Column';
+import { Typography } from '../Typography/Typography';
 import { Image } from './Image';
+import { Divider } from '../Divider/Divider';
 
 export default {
   component: Image,
 } as ComponentMeta<typeof Image>;
 
 //“template” of how args map to rendering
 const Template: ComponentStory<typeof Image> = (args) => (
-  <table>
-    <tbody>
-      <tr>
+  <Email>
+    <Section>
+      <Column>
+        <Typography variant="h2" align="center">
+          Hello World
+        </Typography>
+      </Column>
+    </Section>
+
+    <Divider />
+
+    <Section fullWidth={false}>
+      <Column>
         <Image {...args} />
-      </tr>
-    </tbody>
-  </table>
+      </Column>
+
+      <Column classes={{ root: { paddingLeft: '20px' } }}>
+        <Typography variant="h2">This is a random text</Typography>
+      </Column>
+    </Section>
+  </Email>
 );
 
 export const Default = Template.bind({});
@@ -23,7 +42,11 @@ Default.args = {
   src: 'https://images.unsplash.com/photo-1453728013993-6d66e9c9123a',
   alt: 'This is a random image',
   width: '250px',
-  style: {
-    borderRadius: '10px',
+  caption: 'This is a caption',
+  imageAlign: 'left',
+  classes: {
+    image: {
+      borderRadius: '10px',
+    },
   },
 };
diff --git a/src/components/Image/Image.tsx b/src/components/Image/Image.tsx
@@ -1,7 +1,7 @@
 import { CSSProperties } from 'react';
-import { BaseStyleProp } from '../types';
 import { makeStyles } from '../../utils/makeStyles';
 import { sx } from '../../utils/sx';
+import { BaseStyleProp } from '../types';
 
 type LinkStyles = 'root' | 'image' | 'caption';
 
@@ -11,10 +11,13 @@ export interface ImageProps extends BaseStyleProp<LinkStyles> {
   caption?: string;
   width: CSSProperties['width'];
   height?: CSSProperties['height'];
+  imageAlign?: 'left' | 'center' | 'right';
+  captionAlign?: 'left' | 'center' | 'right';
 }
 
 const useStyles = makeStyles({
   root: { border: '0', display: 'block', outline: 'none' },
+  table: { width: 'fit-content', border: '0', verticalAlign: 'top' },
   image: {},
   caption: {},
 });
@@ -27,26 +30,30 @@ export const Image = ({
   height = 'auto',
   classes,
   className,
+  imageAlign = 'center',
+  captionAlign = 'center',
 }: ImageProps): JSX.Element => {
   const styles = useStyles({ classes });
 
   return caption ? (
-    <table>
-      <tr>
-        <td>
-          <img
-            className={className}
-            height={height}
-            width={width}
-            src={src}
-            alt={alt}
-            style={sx(styles.root, styles.image)}
-          />
-        </td>
-      </tr>
-      <tr>
-        <td style={styles.caption}>{caption}</td>
-      </tr>
+    <table cellPadding="0" cellSpacing="0" role="presentation" style={styles.table}>
+      <tbody>
+        <tr>
+          <td align={imageAlign}>
+            <img
+              className={className}
+              height={height}
+              width={width}
+              src={src}
+              alt={alt}
+              style={sx(styles.root, styles.image)}
+            />
+          </td>
+        </tr>
+        <tr>
+          <td style={sx(styles.caption, { textAlign: captionAlign })}>Hello world</td>
+        </tr>
+      </tbody>
     </table>
   ) : (
     <img

diff --git a/src/components/Section/Section.tsx b/src/components/Section/Section.tsx
@@ -1,28 +1,35 @@
 import { ReactNode } from 'react';
 import { makeStyles } from '../../utils/makeStyles';
+import { sx } from '../../utils/sx';
 import { BaseStyleProp } from '../types';
 
 type SectionStyles = 'root' | 'body' | 'row';
 
 export interface SectionProps extends BaseStyleProp<SectionStyles> {
   children?: ReactNode;
+  fullWidth?: boolean;
 }
 
 const useStyles = makeStyles({
-  root: { width: '100%', border: '0', verticalAlign: 'top' },
+  root: { border: '0', verticalAlign: 'top' },
   body: {},
   row: {},
 });
 
-export const Section = ({ children, className, classes }: SectionProps): JSX.Element => {
+export const Section = ({
+  children,
+  className,
+  classes,
+  fullWidth = true,
+}: SectionProps): JSX.Element => {
   const styles = useStyles({ classes });
 
   return (
     <table
       cellPadding="0"
       cellSpacing="0"
       role="presentation"
-      style={styles.root}
+      style={sx(styles.root, fullWidth && { width: '100%' })}
       className={className}
     >
       <tbody style={styles.body}>