docs(Typography): new docs page for Typography (#1519)

Co-authored-by: Hadas Farhi <hadasfa@monday.com>
Co-authored-by: Tal Koren <talko@monday.com>

src/storybook/stand-alone-documentaion/typography/assets/index.js

@@ -1,4 +1,4 @@
-import typographyExample1 from "./typographyExample1.png";
-import typographyExample2 from "./typographyExample2.png";
-
-export { typographyExample1, typographyExample2 };
+export { default as typographyExample1 } from "./typographyExample1.png";
+export { default as typographyExample2 } from "./typographyExample2.png";
+export { default as typographyExample3 } from "./typographyExample3.png";
+export { default as typographyExample4 } from "./typographyExample4.png";

src/storybook/stand-alone-documentaion/typography/examples-table/example-table.module.scss

@@ -0,0 +1,23 @@
+.table {
+  $border: 1px solid var(--sb-layout-border-color);
+  width: 100%;
+  margin-block: var(--spacing-medium) var(--spacing-xl);
+  border-inline: $border;
+  border-block-start: $border;
+  border-spacing: 0;
+
+  th,
+  td {
+    text-align: start !important;
+    padding: var(--spacing-small) var(--spacing-medium);
+    height: 40px;
+    border-bottom: $border;
+    &:not(:last-child) {
+      border-right: $border; // Adds right border to all cells except the last ones in a row
+    }
+  }
+
+  thead tr th:first-of-type {
+    width: 270px;
+  }
+}

src/storybook/stand-alone-documentaion/typography/examples-table/examples-table.tsx

@@ -0,0 +1,41 @@
+import React, { FC } from "react";
+import Text from "../../../../components/Text/Text";
+import styles from "./example-table.module.scss";
+
+interface TableData {
+  name: string;
+  useFor: string;
+  sass: boolean;
+}
+
+const ExamplesTable: FC = ({ data }: { data: Array<TableData> }) => {
+  return (
+    <table className={styles.table}>
+      <Text
+        type={Text.types.TEXT2}
+        element="thead"
+        ellipsis={false}
+        color={Text.colors.SECONDARY}
+        weight={Text.weights.MEDIUM}
+        align={Text.align.START}
+      >
+        <tr>
+          <th>Name</th>
+          <th>SASS</th>
+        </tr>
+      </Text>
+      <Text type={Text.types.TEXT2} element="tbody" ellipsis={false} align={Text.align.START}>
+        {data.map((item, index) => (
+          <tr key={index}>
+            <td>{item.name}</td>
+            <td>
+              <code>{item.sass}</code>
+            </td>
+          </tr>
+        ))}
+      </Text>
+    </table>
+  );
+};
+
+export default ExamplesTable;