Extract InfoListItem into its own component, scope sibling spacing (#329)

Author: aamirkhan-91

src/docs/pages/infoList/HorizontalList.tsx

@@ -0,0 +1,11 @@
+import { VuiFlexContainer, VuiInfoListItem } from "../../../lib";
+
+export const HorizontalList = () => {
+  return (
+    <VuiFlexContainer direction="row" spacing="l">
+      <VuiInfoListItem title="Email" value="[email protected]" />
+      <VuiInfoListItem title="Account number" value="1234567890" />
+      <VuiInfoListItem title="Account size" value="22 MB" />
+    </VuiFlexContainer>
+  );
+};

src/docs/pages/infoList/index.tsx

@@ -1,11 +1,22 @@
 import { InfoList } from "./InfoList";
+import { HorizontalList } from "./HorizontalList";
+
 const InfoListSource = require("!!raw-loader!./InfoList");
+const HorizontalListSource = require("!!raw-loader!./HorizontalList");
 
 export const infoList = {
   name: "Info List",
   path: "/InfoList",
-  example: {
-    component: <InfoList />,
-    source: InfoListSource.default.toString()
-  }
+  examples: [
+    {
+      name: "Vertical",
+      component: <InfoList />,
+      source: InfoListSource.default.toString()
+    },
+    {
+      name: "Horizontal",
+      component: <HorizontalList />,
+      source: HorizontalListSource.default.toString()
+    }
+  ]
 };

src/lib/components/index.ts

@@ -51,6 +51,7 @@ import { ICON_COLOR, ICON_SIZE, ICON_TYPE } from "./icon/types";
 import { VuiImage } from "./image/Image";
 import { VuiImagePreview } from "./image/ImagePreview";
 import { InfoListType, VuiInfoList } from "./infoList/InfoList";
+import { InfoListItemType, VuiInfoListItem } from "./infoList/InfoListItem";
 import { VuiInfoMenu } from "./infoMenu/InfoMenu";
 import { VuiInfoTable, InfoTableColumnAlign, InfoTableRow, InfoTableRowType } from "./infoTable/InfoTable";
 import { VuiInProgress } from "./inProgress/InProgress";
@@ -114,6 +115,7 @@ export type {
   ChatStyle,
   ChatTurn,
   CodeLanguage,
+  InfoListItemType,
   InfoListType,
   InfoTableColumnAlign,
   InfoTableRow,
@@ -192,6 +194,7 @@ export {
   VuiImage,
   VuiImagePreview,
   VuiInfoList,
+  VuiInfoListItem,
   VuiInfoMenu,
   VuiInfoTable,
   VuiInProgress,

src/lib/components/infoList/InfoList.tsx

@@ -1,21 +1,17 @@
-export type InfoListType = Array<{
-  title: string;
-  value: React.ReactNode;
-}>;
+import { InfoListItemType, VuiInfoListItem } from "./InfoListItem";
+
+export type InfoListType = Array<InfoListItemType>;
 
 type Props = {
   info: InfoListType;
 };
 
 export const VuiInfoList = ({ info }: Props) => {
   return (
-    <>
+    <div className="vuiInfoList">
       {info.map((item, index) => (
-        <div key={index} className="vuiInfoListItem">
-          <div className="vuiInfoListItem__title">{item.title}</div>
-          <div className="vuiInfoListItem__value">{item.value}</div>
-        </div>
+        <VuiInfoListItem key={index} title={item.title} value={item.value} />
       ))}
-    </>
+    </div>
   );
 };

src/lib/components/infoList/InfoListItem.tsx

@@ -0,0 +1,15 @@
+export type InfoListItemType = {
+  title: string;
+  value: React.ReactNode;
+};
+
+type Props = InfoListItemType;
+
+export const VuiInfoListItem = ({ title, value }: Props) => {
+  return (
+    <div className="vuiInfoListItem">
+      <div className="vuiInfoListItem__title">{title}</div>
+      <div className="vuiInfoListItem__value">{value}</div>
+    </div>
+  );
+};

src/lib/components/infoList/_index.scss

@@ -1,5 +1,5 @@
-.vuiInfoListItem {
-  & + & {
+.vuiInfoList {
+  .vuiInfoListItem + .vuiInfoListItem {
     margin-top: $sizeM;
   }
 }