docs: welcome page and sidebar

packages/core/.storybook/preview-head.html

@@ -49,6 +49,7 @@
     color: var(--sb-primary-text-color);
   }
 
+  .sbdocs p a,
   .sbdocs ul li a {
     color: var(--sb-link-color);
   }

packages/core/src/storybook/stand-alone-documentaion/shadow/shadow-levels/shadow-example/shadow-example.jsx

@@ -2,21 +2,19 @@ import React from "react";
 import cx from "classnames";
 import { capitalize } from "lodash-es";
 import { useMemo } from "react";
-import { BEMClass } from "../../../../../helpers/bem-helper";
-import "./shadow-example.scss";
+import styles from "./shadow-example.module.scss";
 
-const CSS_BASE_CLASS = "monday-storybook-shadow-example";
-const bemHelper = BEMClass(CSS_BASE_CLASS);
 export const ShadowExample = ({ size }) => {
   const sizeName = useMemo(() => capitalize(size), [size]);
   return (
-    <div className={CSS_BASE_CLASS}>
-      <div className={cx(bemHelper({ element: "example" }), bemHelper({ element: "example", state: size }))} />
-      <span className={bemHelper({ element: "title" })}>{sizeName}</span>
-      <span className={bemHelper({ element: "code" })}>{`var(--box-shadow-${size})`}</span>
+    <div className={styles.shadow}>
+      <div className={cx(styles.example, styles[size])} />
+      <span className={styles.title}>{sizeName}</span>
+      <span className={styles.code}>{`var(--box-shadow-${size})`}</span>
     </div>
   );
 };
+
 ShadowExample.size = {
   XS: "xs",
   SMALL: "small",

packages/core/src/storybook/stand-alone-documentaion/shadow/shadow-levels/shadow-example/shadow-example.scss → packages/core/src/storybook/stand-alone-documentaion/shadow/shadow-levels/shadow-example/shadow-example.module.scss

@@ -2,39 +2,39 @@
   font-size: var(--sb-small-text-font-size);
   line-height: 22px;
 }
-.monday-storybook-shadow-example {
+.shadow {
   display: flex;
   flex-direction: column;
   align-items: center;
 
-  &_example {
+  .example {
     width: 81px;
     height: 81px;
 
-    &--xs {
+    &.xs {
       box-shadow: var(--box-shadow-xs);
     }
 
-    &--small {
+    &.small {
       box-shadow: var(--box-shadow-small);
     }
 
-    &--medium {
+    &.medium {
       box-shadow: var(--box-shadow-medium);
     }
 
-    &--large {
+    &.large {
       box-shadow: var(--box-shadow-large);
     }
   }
 
-  &_title {
+  .title {
     @include shadow-example-text;
     font-weight: 500;
     margin: var(--sb-spacing-small) 0;
   }
 
-  &_code {
+  .code {
     @include shadow-example-text;
   }
 }

packages/core/src/storybook/stand-alone-documentaion/welcome/abilities-description/abilities-description.scss → packages/core/src/storybook/stand-alone-documentaion/welcome/Abilities/Abilities.module.scss

@@ -4,7 +4,7 @@ $abilities-cell-min-width: $grid-auto-fit-cell-width-medium;
 $abilities-grid-gap: var(--sb-spacing-large);
 $abilities-grid-cell-array-calc: calc(33.3% - #{$abilities-grid-gap});
 
-.monday-storybook-abilities-description {
+.abilities {
   margin-top: var(--sb-spacing-between-section-items);
 
   @include grid-auto-fit(

packages/core/src/storybook/stand-alone-documentaion/welcome/Abilities/Abilities.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import { Ability } from "./Ability";
+import { components, foundations, gettingStarted } from "../assets";
+import styles from "./Abilities.module.scss";
+
+export const Abilities = () => (
+  <div className={styles.abilities}>
+    <Ability title="Getting started" imageSrc={gettingStarted} linkHref="/?path=/docs/getting-started--docs">
+      Instructions and welcome to the monday.com OS design system
+    </Ability>
+    <Ability title="Foundations" imageSrc={foundations} linkHref="/?path=/docs/foundations-colors--docs">
+      All information about colors, typography, spacing, and icons
+    </Ability>
+    <Ability title="Components" imageSrc={components} linkHref="/?path=/docs/buttons">
+      All the information and guidelines you’ll ever need on each component
+    </Ability>
+  </div>
+);

packages/core/src/storybook/stand-alone-documentaion/welcome/ability-description/ability-description.scss → packages/core/src/storybook/stand-alone-documentaion/welcome/Abilities/Ability.module.scss

@@ -1,24 +1,25 @@
 @import "~vibe-storybook-components/dist/mixins";
 
-.monday-storybook-ability-description {
+.ability {
   display: flex;
   flex-direction: column;
   border: 1px solid;
   border-color: var(--sb-layout-border-color);
   padding: var(--sb-spacing-large);
   width: 100%;
-  &_image {
+
+  .image {
     height: 48px;
     width: 48px;
   }
 
-  &_title {
+  .title {
     font-weight: 400;
     font-size: 18px;
     line-height: var(--sb-text-line-height);
   }
 
-  &_content {
+  .content {
     @include sb-small-text;
     margin-bottom: var(--sb-spacing-large);
   }

packages/core/src/storybook/stand-alone-documentaion/welcome/Abilities/Ability.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import Link from "../../../../components/Link/Link";
+import styles from "./Ability.module.scss";
+
+interface AbilityProps {
+  title: string;
+  children: React.ReactNode;
+  imageSrc: string;
+  linkHref: string;
+}
+
+export const Ability = ({ title, children, imageSrc, linkHref }: AbilityProps) => {
+  return (
+    <section className={styles.ability}>
+      <img src={imageSrc} alt="" className={styles.image} />
+      <h3 className={styles.title}>{title}</h3>
+      <span className={styles.content}>{children}</span>
+      <Link text="Read more" href={linkHref} target="_top" />
+    </section>
+  );
+};

packages/core/src/storybook/stand-alone-documentaion/welcome/Contributors/Contributor.module.scss

@@ -0,0 +1,16 @@
+.contributor {
+  border-radius: 4px;
+  background-color: var(--sb-dark-background-color);
+  display: inline-block;
+  padding: 2px 8px;
+  margin: 0 12px 12px 0;
+  text-decoration: none;
+  vertical-align: middle;
+
+  .image {
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    object-fit: cover;
+  }
+}

packages/core/src/storybook/stand-alone-documentaion/welcome/Contributors/Contributor.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import { Flex, Text, Tooltip } from "../../../../components";
+import styles from "./Contributor.module.scss";
+import { ElementContent } from "../../../../types";
+
+export interface ContributorProps {
+  name: string;
+  image?: string;
+  href: string;
+  tooltip?: ElementContent;
+}
+
+export default function Contributor({ name, image, href, tooltip }: ContributorProps) {
+  const contributor = (
+    <a href={href} target="_blank" rel="noreferrer" className={styles.contributor}>
+      <Flex gap="xs">
+        {image && <img src={image} alt={name} className={styles.image} />}
+        <Text>{name}</Text>
+      </Flex>
+    </a>
+  );
+
+  if (tooltip) {
+    return <Tooltip content={tooltip}>{contributor}</Tooltip>;
+  }
+  return contributor;
+}

packages/core/src/storybook/stand-alone-documentaion/welcome/Contributors/Contributors.tsx

@@ -0,0 +1,85 @@
+import React from "react";
+import Contributor from "./Contributor";
+import useContributors from "./useContributors";
+import Hadas from "../assets/contributors/Hadas.png";
+import Sergey from "../assets/contributors/Sergey.png";
+import Rotem from "../assets/contributors/Rotem.png";
+import Devorah from "../assets/contributors/Devorah.png";
+import Dmitry from "../assets/contributors/Dmitry.png";
+import Shay from "../assets/contributors/Shay.png";
+import Eylon from "../assets/contributors/Eylon.png";
+import Noa from "../assets/contributors/Noa.png";
+import LeanyLabs from "../assets/contributors/LeanyLabs.png";
+
+const CONTRIBUTORS = [
+  {
+    name: "Rotem Dekel",
+    href: "https://www.linkedin.com/in/rotem-dekel-7a8b12133/",
+    image: Rotem
+  },
+  {
+    name: "Hadas Farhi",
+    href: "https://www.linkedin.com/in/hadasfarhi/",
+    image: Hadas
+  },
+  {
+    name: "Sergey Roytman",
+    href: "https://www.linkedin.com/in/sergey-roytman/",
+    image: Sergey
+  },
+  {
+    name: "Devorah Friedman",
+    href: "mailto:devorahfr@monday.com",
+    image: Devorah
+  },
+  {
+    name: "Dmitry Kogan",
+    href: "mailto:dimako@monday.com",
+    image: Dmitry
+  },
+  {
+    name: "Shay Cohen",
+    href: "mailto:shay@monday.com",
+    image: Shay
+  },
+  {
+    name: "Eylon Goren",
+    href: "mailto:eylon@monday.com",
+    image: Eylon
+  },
+  {
+    name: "Noa Fenko",
+    href: "mailto:noafe@monday.com",
+    image: Noa
+  },
+  {
+    name: "LeanyLabs",
+    href: "https://github.com/LeanyLabs",
+    image: LeanyLabs
+  }
+];
+
+const excludedContributors = [
+  "talkor",
+  "dependabot[bot]",
+  "SergeyRoyt",
+  "orrgottlieb",
+  "github-actions[bot]",
+  "snyk-bot",
+  "rivka-ungar",
+  "vibe-gh",
+  "YossiSaadi",
+  "shaharzil",
+  "hadasfa"
+];
+
+export default function Founders() {
+  const { contributors } = useContributors({
+    organizationName: "mondaycom",
+    packageName: "vibe",
+    excludedContributors
+  });
+  return [...CONTRIBUTORS, ...contributors].map((founder, index) => (
+    <Contributor key={index} name={founder.name} image={founder.image} href={founder.href} />
+  ));
+}

packages/core/src/storybook/stand-alone-documentaion/welcome/Contributors/Founders.module.scss

@@ -0,0 +1,3 @@
+.founders {
+  margin-bottom: 48px;
+}

packages/core/src/storybook/stand-alone-documentaion/welcome/Contributors/Founders.tsx

@@ -0,0 +1,45 @@
+import React from "react";
+import Contributor from "./Contributor";
+import Evgeniy from "../assets/contributors/Evgeniy.png";
+import Orr from "../assets/contributors/Orr.png";
+import Meytal from "../assets/contributors/Meytal.png";
+import styles from "./Founders.module.scss";
+import Flex from "../../../../components/Flex/Flex";
+import Icon from "../../../../components/Icon/Icon";
+
+const FOUNDERS = [
+  {
+    name: "Evgeniy Kazinec",
+    href: "https://www.linkedin.com/in/evgeniy-kazinec/",
+    image: Evgeniy,
+    tooltip: "Product Designer"
+  },
+  {
+    name: "Orr Gottlieb",
+    href: "https://www.linkedin.com/in/orrgottlieb/",
+    image: Orr,
+    tooltip: "Software Engineer"
+  },
+  {
+    name: "Meytal Badichi",
+    href: "https://www.linkedin.com/in/meytal-badichi-561439125/",
+    image: Meytal,
+    tooltip: "Product Designer"
+  }
+];
+
+export default function Founders() {
+  return (
+    <div className={styles.founders}>
+      {FOUNDERS.map((founder, index) => (
+        <Contributor
+          key={index}
+          name={founder.name}
+          image={founder.image}
+          href={founder.href}
+          tooltip={founder.tooltip}
+        />
+      ))}
+    </div>
+  );
+}

packages/core/src/storybook/stand-alone-documentaion/welcome/Contributors/LinkedinIcon.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+
+export function LinkedinIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      width="33"
+      height="33"
+      viewBox="0 0 33 33"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <path
+        d="M16.2331 1.01953H16.306C24.7082 1.01953 31.5195 7.83088 31.5195 16.2331V16.306C31.5195 24.7082 24.7082 31.5195 16.306 31.5195H16.2331C7.83089 31.5195 1.01953 24.7082 1.01953 16.306V16.2331C1.01953 7.83088 7.83089 1.01953 16.2331 1.01953Z"
+        fill="#383D38"
+        stroke="white"
+        strokeWidth="1.5"
+      />
+      <path
+        d="M9.63712 11.0247C9.28384 10.6968 9.10815 10.2909 9.10815 9.80795C9.10815 9.32501 9.28478 8.90126 9.63712 8.57241C9.9904 8.2445 10.4452 8.08008 11.0023 8.08008C11.5595 8.08008 11.9964 8.2445 12.3487 8.57241C12.702 8.90032 12.8777 9.31279 12.8777 9.80795C12.8777 10.3031 12.7011 10.6968 12.3487 11.0247C11.9954 11.3526 11.5473 11.517 11.0023 11.517C10.4574 11.517 9.9904 11.3526 9.63712 11.0247ZM12.5808 12.9057V22.9591H9.40411V12.9057H12.5808Z"
+        fill="#FEFFFC"
+      />
+      <path
+        d="M23.1556 13.8989C23.8481 14.6505 24.1939 15.6822 24.1939 16.9957V22.7816H21.1769V17.4035C21.1769 16.7411 21.005 16.2262 20.662 15.8597C20.3191 15.4933 19.8568 15.3092 19.2781 15.3092C18.6993 15.3092 18.237 15.4924 17.8941 15.8597C17.5511 16.2262 17.3792 16.7411 17.3792 17.4035V22.7816H14.3444V12.8775H17.3792V14.1911C17.6864 13.7532 18.1008 13.4075 18.6213 13.1528C19.1418 12.8982 19.7272 12.7714 20.3783 12.7714C21.5377 12.7714 22.4641 13.1472 23.1556 13.8979V13.8989Z"
+        fill="#FEFFFC"
+      />
+    </svg>
+  );
+}