docs: add stories for LoadingSkeleton and BorderedTile (#13730)

airbyte-webapp/src/components/ui/BorderedTiles/BorderedTiles.module.scss

@@ -7,9 +7,9 @@ $min-width-horizontal: 900px;
   display: grid;
   grid-auto-columns: 1fr;
   grid-template-rows: 1fr;
-  gap: 1px;
+  gap: variables.$border-thin;
   background: colors.$grey-100;
-  border: 1px solid colors.$grey-100;
+  border: variables.$border-thin solid colors.$grey-100;
   border-radius: variables.$border-radius-md;
   container-type: inline-size;
 

airbyte-webapp/src/components/ui/BorderedTiles/BorderedTiles.stories.tsx

@@ -0,0 +1,36 @@
+import { StoryObj } from "@storybook/react";
+
+import { BorderedTiles, BorderedTile } from "components/ui/BorderedTiles";
+
+import { Heading } from "../Heading";
+import { Text } from "../Text";
+
+export default {
+  title: "ui/BorderedTiles",
+  component: BorderedTiles,
+  argTypes: {},
+} as StoryObj<typeof BorderedTiles>;
+
+export const Default: StoryObj<typeof BorderedTiles> = {
+  args: {},
+  render: (args) => (
+    <BorderedTiles {...args}>
+      <BorderedTile>
+        <Heading as="h2">Box 1</Heading>
+        <Text>Lorem ipsum dolor </Text>
+      </BorderedTile>
+      <BorderedTile>
+        <Heading as="h2">Box 2</Heading>
+        <Text>Lorem ipsum dolor </Text>
+      </BorderedTile>
+      <BorderedTile>
+        <Heading as="h2">Box 3</Heading>
+        <Text>Lorem ipsum dolor </Text>
+      </BorderedTile>
+      <BorderedTile>
+        <Heading as="h2">Box 4</Heading>
+        <Text>Lorem ipsum dolor </Text>
+      </BorderedTile>
+    </BorderedTiles>
+  ),
+};

airbyte-webapp/src/components/ui/LoadingSkeleton/LoadingSkeleton.module.scss

@@ -16,7 +16,7 @@
   );
   background-size: 1200px 100%;
 
-  &--button {
+  &--buttonHeight {
     height: variables.$button-height-xs;
   }
 }

airbyte-webapp/src/components/ui/LoadingSkeleton/LoadingSkeleton.stories.tsx

@@ -0,0 +1,22 @@
+import { StoryObj } from "@storybook/react";
+
+import { LoadingSkeleton } from "components/ui/LoadingSkeleton";
+
+import { FlexContainer } from "../Flex";
+
+export default {
+  title: "ui/LoadingSkeleton",
+  component: LoadingSkeleton,
+  argTypes: {},
+} as StoryObj<typeof LoadingSkeleton>;
+
+export const Default: StoryObj<typeof LoadingSkeleton> = {
+  args: {},
+  render: () => (
+    <FlexContainer direction="column" gap="xl">
+      <LoadingSkeleton />
+      <LoadingSkeleton />
+      <LoadingSkeleton />
+    </FlexContainer>
+  ),
+};

airbyte-webapp/src/components/ui/LoadingSkeleton/LoadingSkeleton.tsx

@@ -3,5 +3,5 @@ import classNames from "classnames";
 import styles from "./LoadingSkeleton.module.scss";
 
 export const LoadingSkeleton = ({ className }: { className?: string }) => {
-  return <div className={classNames(styles.loadingSkeleton, styles["loadingSkeleton--button"], className)} />;
+  return <div className={classNames(styles.loadingSkeleton, styles["loadingSkeleton--buttonHeight"], className)} />;
 };