Storybook/hadas/template (#399)

* update template according to new branding part 1

* template update according to new brand

* code review fix

* design review changes

.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, withFoundationBackground = false }) => {
+ return (
+ <h1
+ className={cx("monday-storybook-component-name", className, {
+ "monday-storybook-component-name--foundation": withFoundationBackground
+ })}
+ >
+ {children}
+ </h1>
+ );
 };

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

@@ -6,7 +6,6 @@
  width: 100%;
  margin-top: 0;
  margin-bottom: $spacing-between-section-items;
- @include theme-prop(background-color, primary-selected-color);
  @include basic-text;
  font-family: $header-primary-font;
  font-size: $h1-font-size;
@@ -17,5 +16,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/components/paragraph/paragraph.jsx

@@ -1 +1,5 @@
-export const Paragraph = ({ children }) => <p className="monday-storybook-paragraph">{children}</p>;
+import cx from "classnames";
+
+export const Paragraph = ({ children, className }) => (
+ <p className={cx("monday-storybook-paragraph", className)}>{children}</p>
+);

src/storybook/stand-alone-documentaion/colors/content-color-cell/content-color-cell.module.scss

@@ -1,4 +1,6 @@
 .content-colors-cell {
  height: 40px;
  width: 25%;
+ padding: 0;
+ margin: 0;
 }

src/storybook/stand-alone-documentaion/colors/content-colors/content-colors.jsx

@@ -13,7 +13,7 @@ export const ContentColors = () => {
 
  return (
  <Frame>
- <table className={classes["content-colors-table"]}>
+ <table className={classes["content-colors-table"]} cellSpacing={0}>
  <tr>
  <ContentColorCell />
  <ContentColorCell>Default</ContentColorCell>

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 withFoundationBackground>
+ 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 withFoundationBackground>
+ 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 "../../components/text-colors/text-colors";
 import { COLORS } from "../../components/related-components/component-description-map";
@@ -12,7 +12,10 @@ import "./typography.scss";
 
 <!--- Component documentation -->
 
-# Typography
+<ComponentName withFoundationBackground>
+ 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/other-contributors-list/other-contributors-list.jsx

@@ -5,11 +5,7 @@ import "./other-contributors-list.scss";
 const BASE_CLASS = "monday-other-contributors-list";
 
 const excludedDevelopers = new Set();
-/** excludedDevelopers.add(60314759); // Orr Gotlieb
-excludedDevelopers.add(72390374); // Hadas Farhi
-excludedDevelopers.add(35146205); // Moshe Zemah * */
 excludedDevelopers.add(41898282); // github-actions[bot]
-// excludedDevelopers.add(9280709); // Sahar Brodbeker
 excludedDevelopers.add(49699333); // dependabot[bot]
 
 export const OtherContributorsList = () => {
@@ -21,14 +17,26 @@ export const OtherContributorsList = () => {
  }, []);
 
  const contributors = useMemo(() => {
+ const finalContributors = [];
  if (contributorsJson) {
- return contributorsJson
+ // designer contributors
+ finalContributors.push(
+ <Link href="https://il.linkedin.com/in/rotem-dekel-7a8b12133" className={`${BASE_CLASS}_developer`}>
+ Rotem Dekel
+ </Link>
+ );
+
+ // developer contributors
+ const developerContributors = contributorsJson
  .filter(contributor => !excludedDevelopers.has(contributor.id))
  .map(contributor => (
  <Link href={contributor.html_url} className={`${BASE_CLASS}_developer`}>
  {contributor.login}
  </Link>
  ));
+
+ finalContributors.push(...developerContributors);
+ return finalContributors;
  }
  }, [contributorsJson]);
 

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

@@ -1,7 +1,8 @@
 @import "../../../styles/typography.scss";
+@import "../../../styles/content-spacing";
 
 .monday-other-contributors-list {
- @include small-text;
+ margin-top: $spacing-between-section-items;
  &_developer:not(:last-child):after {
  @include small-text;
  content: ","

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

@@ -6,9 +6,11 @@
  height: 294px;
  display: flex;
  align-items: center;
- @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;

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

@@ -33,9 +33,9 @@ Our design principles were developed based on best practices to ensure top-notch
 ## Contributors
 monday.com’s designers, developers, and writers provide teams with universal assets—elements, components, patterns, and code—and the guidance on how to design and build with them.
 We welcome contributions to monday.com design system!
-<OtherContributorsList/>
 
 Read our contributing guide and help us build and improve our components.
 
 ### Meet the client foundations team
-<Contributors />
+<Contributors />
+<OtherContributorsList/>