Storybook/hadas/template

.storybook/addons.js

@@ -3,11 +3,11 @@ import "@storybook/addon-actions/register";
 import "@storybook/addon-links/register";
 import { create } from "@storybook/theming/create";
 import { addons } from "@storybook/addons";
+import logo from "./logo.png";
 
 const theme = create({
   base: "light",
-  brandImage:
-    "https://dapulse-res.cloudinary.com/image/upload/f_auto,q_auto/remote_mondaycom_static/img/monday-logo-x2.png",
+  brandImage: logo,
   brandUrl: "https://monday.com"
 });
 

.storybook/preview.js

@@ -12,7 +12,6 @@ import {
   RelatedComponents,
   DocFooter,
   MultipleStoryElementsWrapper,
-  Link,
   Paragraph
 } from "../src/storybook/components";
 import LinkComponent from "../src/storybook/components/link-component/link-component";

src/storybook/components/component-name/component-name.jsx

@@ -1,6 +1,14 @@
 import cx from "classnames";
 import "./component-name.scss";
 
-export const ComponentName = ({ children, className }) => {
-  return <h1 className={cx("monday-storybook-component-name", className)}>{children}</h1>;
+export const ComponentName = ({ children, className, isFoundation = false, overrideBackground }) => {
+  return (
+    <h1
+      className={cx("monday-storybook-component-name", className, {
+        "monday-storybook-component-name--foundation": isFoundation
+      })}
+    >
+      {children}
+    </h1>
+  );
 };

src/storybook/components/component-name/component-name.scss

@@ -17,5 +17,11 @@
   display: grid;
   border-radius: $border-radius-small;
   padding: 40px 24px;
+  background-image: url('./assets/component-background.png');
+  background-repeat: no-repeat;
+  background-size: cover;
 
+  &--foundation {
+    background-image: url('./assets/foundation-background.png');
+  }
 }

src/storybook/stand-alone-documentaion/shadow/shadow.stories.mdx

@@ -1,5 +1,5 @@
 import { Meta } from "@storybook/addon-docs";
-import { Frame } from "../../components";
+import { ComponentName, Frame } from "../../components";
 import { ShadowLevels } from "./shadow-levels/shadow-levels";
 import { shadowsSketch } from "./assets";
 import "./shadow.stories.scss";
@@ -12,7 +12,10 @@ import { DragShadowExample } from "./drag-shadow-example/drag-shadow-example";
 
 <!--- Component documentation -->
 
-# Shadow
+<ComponentName isFoundation>
+  Shadow
+</ComponentName>
+
 - [Overview](#overview)
 - [Shadow levels](#shadow-levels)
 - [Usage and examples](#usage-and-examples)

src/storybook/stand-alone-documentaion/spacing/spacing.stories.mdx

@@ -1,6 +1,6 @@
 import { Meta } from "@storybook/addon-docs";
 import { SpacingSizes } from "./spacing-sizes/spacing-sizes";
-import { Frame } from "../../components";
+import { ComponentName, Frame } from "../../components";
 import {menuExample, tipseenExample, toolbarExample} from "./assets";
 import "./spacing.stories.scss";
 
@@ -10,7 +10,10 @@ import "./spacing.stories.scss";
 
 <!--- Component documentation -->
 
-# Spacing
+<ComponentName isFoundation>
+  Spacing
+</ComponentName>
+
 - [Overview](#overview)
 - [Spacing sizes](#spacing-sizes)
 - [Usage and examples](#usage-and-examples)

src/storybook/stand-alone-documentaion/typography/typography.stories.mdx

@@ -1,5 +1,5 @@
 import { Meta } from "@storybook/addon-docs";
-import { Frame, Link, RelatedComponents } from "../../components";
+import { ComponentName, Frame, Link, RelatedComponents } from "../../components";
 import { TextStyles } from "./text-styles/text-styles";
 import { TextColors } from "./text-colors/text-colors";
 import { COLORS } from "../../components/related-components/component-description-map";
@@ -12,7 +12,10 @@ import "./typography.scss";
 
 <!--- Component documentation -->
 
-# Typography
+<ComponentName isFoundation>
+  Typography
+</ComponentName>
+
 - [Overview](#overview)
 - [Text styles](#text-styles)
 - [Text colors](#text-colors)

src/storybook/stand-alone-documentaion/welcome/contributor/contributor.jsx

@@ -1,16 +1,12 @@
-import { useMemo } from "react";
+import cx from "classnames";
 import { InformationBox } from "../../../components/information-box/information-box";
-import { getElementColor, elementColorsNames } from "../../../../general-stories/colors/colors-vars-map";
+import { elementColorsNames } from "../../../../general-stories/colors/colors-vars-map";
 import "./contributor.scss";
 
 const BASE_CLASS = "monday-storybook-welcome-contributor";
-export const Contributor = ({ imgSrc, color, fullName, title }) => {
-  const backgroundColorStyle = useMemo(() => {
-    return { backgroundColor: getElementColor(color) };
-  }, [color]);
-
+export const Contributor = ({ imgSrc, className, fullName, title }) => {
   const contributorVisualImage = (
-    <div className={`${BASE_CLASS}_visual-element`} style={backgroundColorStyle}>
+    <div className={cx(`${BASE_CLASS}_visual-element`, className)}>
       <img src={imgSrc} alt="" className={`${BASE_CLASS}_image`} />
     </div>
   );

src/storybook/stand-alone-documentaion/welcome/contributor/contributor.scss

@@ -5,7 +5,9 @@
     position: relative;
     width: 100%;
     height: 182px;
-    border-radius: $border-radius-small;;
+    border-radius: $border-radius-small;
+    background-repeat: no-repeat;
+    background-size: cover;
   }
   &_image {
     position: absolute;

src/storybook/stand-alone-documentaion/welcome/contributors/contributors.jsx

@@ -1,24 +1,42 @@
 import { Contributor } from "../contributor/contributor";
-import { Rotem, Evgeniy, Hadas, Orr, Sahar, Moshe } from "../assets";
+import { Evgeniy, Hadas, Orr, Sahar, Moshe } from "../assets";
 import "./contributors.scss";
 
 export const Contributors = () => (
   <div className="monday-storybook-welcome-contributors">
-    <Contributor imgSrc={Orr} fullName="Orr Gottlieb" title="Tech lead" color={Contributor.colors.DONE_GREEN} />
+    <Contributor
+      imgSrc={Orr}
+      fullName="Orr Gottlieb"
+      title="Tech lead"
+      color={Contributor.colors.DONE_GREEN}
+      className="monday-storybook-welcome-contributors_contributor--orr"
+    />
     <Contributor
       imgSrc={Evgeniy}
       fullName="Evgeniy Kazenic"
       title="Product Designer Lead"
-      color={Contributor.colors.AQUAMARINE}
+      className="monday-storybook-welcome-contributors_contributor--evgeniy"
     />
     <Contributor
       imgSrc={Hadas}
       fullName="Hadas Farhi"
       title="Full Stack Developer"
       color={Contributor.colors.EGG_YOLK}
+      className="monday-storybook-welcome-contributors_contributor--hadas"
+    />
+    <Contributor
+      imgSrc={Moshe}
+      fullName="Moshe Zemah"
+      title="Senior Tech Lead"
+      color={Contributor.colors.INDIGO}
+      className="monday-storybook-welcome-contributors_contributor--moshe"
+    />
+    <Contributor
+      imgSrc={Sahar}
+      fullName="Sahar Brodbeker"
+      title="Tech lead"
+      color={Contributor.colors.LIPSTICK}
+      className="monday-storybook-welcome-contributors_contributor--sahar"
     />
-    <Contributor imgSrc={Moshe} fullName="Moshe Zemah" title="Senior Tech Lead" color={Contributor.colors.INDIGO} />
-    <Contributor imgSrc={Sahar} fullName="Sahar Brodbeker" title="Tech lead" color={Contributor.colors.LIPSTICK} />
-    <Contributor imgSrc={Rotem} fullName="Rotem Dekel" title="Product Designer" color={Contributor.colors.STUCK_RED} />
   </div>
 );

src/storybook/stand-alone-documentaion/welcome/contributors/contributors.scss

@@ -7,4 +7,26 @@
   grid-template-columns: 1fr 1fr 1fr;
   grid-gap: $spacing-large;
   grid-row-gap: 90px;
+
+  &_contributor {
+    &--orr {
+      background-image: url('../assets/OrrBackground.png');
+    }
+
+    &--evgeniy {
+      background-image: url('../assets/EvgeniyBackground.png');
+    }
+
+    &--hadas {
+      background-image: url('../assets/HadasBackground.png');
+    }
+
+    &--moshe {
+      background-image: url('../assets/MosheBackground.png');
+    }
+
+    &--sahar {
+      background-image: url('../assets/SaharBackground.png');
+    }
+  }
 }

src/storybook/stand-alone-documentaion/welcome/principle/principle.jsx

@@ -4,10 +4,6 @@ import "./principle.scss";
 const PRINCIPLE_VISUAL_ELEMENT = `monday-storybook-principle`;
 
 export const Principle = ({ imgSrc, title, description }) => {
-  const principleVisualElement = (
-    <div className={`${PRINCIPLE_VISUAL_ELEMENT}_visual-element`}>
-      <img className={`${PRINCIPLE_VISUAL_ELEMENT}_image`} src={imgSrc} alt="" />
-    </div>
-  );
+  const principleVisualElement = <img className={`${PRINCIPLE_VISUAL_ELEMENT}_visual-element`} src={imgSrc} alt="" />;
   return <InformationBox component={principleVisualElement} title={title} description={description} />;
 };

src/storybook/stand-alone-documentaion/welcome/principle/principle.scss

@@ -11,8 +11,4 @@
     justify-content: center;
     align-items: center;
   }
-  &_image {
-    height: 126px;
-    width: 173px;
-  }
 }

src/storybook/stand-alone-documentaion/welcome/welcome-header/welcome-header.jsx

@@ -1,11 +1,9 @@
 import { ComponentName } from "../../../components";
-import { headerBanner } from "../assets";
 import "./welcome-header.scss";
 
 const BASE_CLASS = "monday-storybook-welcome-header";
 export const WelcomeHeader = () => (
   <ComponentName className={BASE_CLASS}>
     <span className={`${BASE_CLASS}_text`}>Welcome to the monday.com Work OS Design System</span>
-    <img src={headerBanner} alt="" className={`${BASE_CLASS}_image`} />
   </ComponentName>
 );

src/storybook/stand-alone-documentaion/welcome/welcome-header/welcome-header.scss

@@ -9,6 +9,9 @@
   @include theme-prop(background-color, dark-background-color);
   min-width: 650px;
   padding-left: 40px;
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-image: url('../assets/WelcomePageCover.png');
 
   &_text {
     width: 461px;