Merge pull request #463 from mashmatrix/support-slds-2-media-object

Update `MediaObject` for SLDS2

Author: stomita

src/scripts/MediaObject.tsx

@@ -7,28 +7,23 @@ import classnames from 'classnames';
 export type MediaObjectProps = {
   figureLeft?: ReactNode;
   figureRight?: ReactNode;
-  figureCenter?: ReactNode;
+  centered?: boolean;
   children?: ReactNode;
 } & HTMLAttributes<HTMLDivElement>;
 
 /**
  *
  */
 export const MediaObject: FC<MediaObjectProps> = (props) => {
-  const {
-    className,
-    figureLeft,
-    figureRight,
-    figureCenter,
-    children,
-    ...rprops
-  } = props;
-  const mediaClassNames = classnames('slds-media', className);
+  const { className, figureLeft, figureRight, centered, children, ...rprops } =
+    props;
+  const mediaClassNames = classnames(
+    'slds-media',
+    { 'slds-media_center': centered },
+    className
+  );
   return (
     <div className={mediaClassNames} {...rprops}>
-      {figureCenter ? (
-        <div className='slds-media__figure'>{figureCenter}</div>
-      ) : undefined}
       {figureLeft ? (
         <div className='slds-media__figure'>{figureLeft}</div>
       ) : undefined}

stories/MediaObject.stories.tsx

@@ -50,6 +50,21 @@ export const Figure: ComponentStoryObj<typeof MediaObject> = {
   },
 };
 
+/**
+ *
+ */
+export const FigureCenter: ComponentStoryObj<typeof MediaObject> = {
+  name: 'Figure (Center)',
+  args: {
+    figureLeft: image1,
+    centered: true,
+    children: mediaContent,
+  },
+  parameters: {
+    info: 'Vertically centered Media Object with figure in left',
+  },
+};
+
 /**
  *
  */
@@ -64,6 +79,21 @@ export const FigureReverse: ComponentStoryObj<typeof MediaObject> = {
   },
 };
 
+/**
+ *
+ */
+export const FigureReverseCenter: ComponentStoryObj<typeof MediaObject> = {
+  name: 'Figure - Reverse (Center)',
+  args: {
+    figureRight: image2,
+    centered: true,
+    children: mediaContent,
+  },
+  parameters: {
+    info: 'Vertically centered Media Object with figure in right',
+  },
+};
+
 /**
  *
  */
@@ -78,3 +108,19 @@ export const FigureBothSide: ComponentStoryObj<typeof MediaObject> = {
     info: 'Media Object with figure in left and right',
   },
 };
+
+/**
+ *
+ */
+export const FigureBothSideCenter: ComponentStoryObj<typeof MediaObject> = {
+  name: 'Figure - Both Side (Center)',
+  args: {
+    figureLeft: image1,
+    figureRight: image2,
+    centered: true,
+    children: mediaContent,
+  },
+  parameters: {
+    info: 'Vertically centered Media Object with figure in left and right',
+  },
+};