Storybook/hadas/spacing page (#392)

* spacing page wip

* spacing story - add spacing sizes component

* spacing story - remove old spacing story

* add temp assets until receiving good assets

* fix spacing assets

* fix spacing assets

* fix spacing in spacing component

* code review notes

src/general-stories/global-design/globalDesign.stories.mdx

@@ -1,5 +1,4 @@
 import { Meta, Story, Props, Preview } from "@storybook/addon-docs/blocks";
-import SpacingComponent from "./SpacingComponent";
 import GlobalSettingGeneralComponent from "./GlobalSettingGeneralComponent";
 import BoxShadowComponent from "./BoxShadowComponent";
 import RoundedCornerComponent from "./RoundedCornerComponent";
@@ -9,50 +8,6 @@ import StoryWrapper from "../../StoryBookComponents/StoryWrapper/StoryWrapper";
 
 <Meta title="Foundations/Global Design" />
 
-<Preview>
-  <Story name="Spacing">
-    <StoryWrapper>
-      <div className="global-design-title-container">
-        <div className="title">Spacing</div>
-        <div className="secondary">*You can double the sizes</div>
-      </div>
-      <div className="global-design-story-container global-design-spacing">
-        <SpacingComponent title="XS" sizeInPx="4px" spacingClass="spacing-xs" />
-        <SpacingComponent
-          title="S"
-          sizeInPx="8px"
-          spacingClass="spacing-small"
-        />
-        <SpacingComponent
-          title="MD"
-          sizeInPx="16px"
-          spacingClass="spacing-medium"
-        />
-        <SpacingComponent
-          title="L"
-          sizeInPx="24px"
-          spacingClass="spacing-large"
-        />
-        <SpacingComponent
-          title="XL"
-          sizeInPx="32px"
-          spacingClass="spacing-xl"
-        />
-        <SpacingComponent
-          title="XXL"
-          sizeInPx="48px"
-          spacingClass="spacing-xxl"
-        />
-        <SpacingComponent
-          title="XXXL"
-          sizeInPx="64px"
-          spacingClass="spacing-xxxl"
-        />
-      </div>
-    </StoryWrapper>
-  </Story>
-</Preview>
-
 <Preview>
   <Story name="Shadows">
       <StoryWrapper>

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

@@ -0,0 +1,5 @@
+import menuExample from "./menuExample.png";
+import tipseenExample from "./tipseenExample.png";
+import toolbarExample from "./toolbarExample.png";
+
+export { menuExample, tipseenExample, toolbarExample };

src/storybook/stand-alone-documentaion/spacing/spacing-sizes/spacing-component/spacing-component.jsx

@@ -0,0 +1,21 @@
+import React from "react";
+import cx from "classnames";
+
+import "./spacing-component.scss";
+
+const SpacingComponent = ({ title, sizeInPx, spacingVariableName }) => {
+  return (
+    <div className="spacing-component">
+      <div className={cx(spacingVariableName, "spacing-component-visualizer")} />
+      <div className="spacing-component_description">
+        <div className="spacing-component_title-container">
+          <span className="spacing-component_title">{title}</span>
+          <span className="spacing-component_px-size">{sizeInPx}</span>
+        </div>
+        <span className="spacing-component_variable-name">{`var(--${spacingVariableName})`}</span>
+      </div>
+    </div>
+  );
+};
+
+export default SpacingComponent;

src/storybook/stand-alone-documentaion/spacing/spacing-sizes/spacing-component/spacing-component.scss

@@ -0,0 +1,67 @@
+@import "../../../../../styles/themes.scss";
+@import "../../../../styles/typography.scss";
+
+.spacing-xs {
+  height: var(--spacing-xs);
+}
+
+.spacing-small {
+  height: var(--spacing-small);
+}
+
+.spacing-medium {
+  height: var(--spacing-medium);
+}
+
+.spacing-large {
+  height: var(--spacing-large);
+}
+
+.spacing-xl {
+  height: var(--spacing-xl);
+}
+
+.spacing-xxl {
+  height: var(--spacing-xxl);
+}
+
+.spacing-xxxl {
+  height: var(--spacing-xxxl);
+}
+
+.spacing-component-visualizer {
+  @include theme-prop(background-color, negative-color-selected);
+  width: 75px;
+}
+
+.spacing-component {
+  display: flex;
+  width: fit-content;
+  flex-direction: column;
+  margin: 0 var(--spacing-medium);
+  align-items: center;
+
+  &_title-container {
+    display: flex;
+    justify-content: center;
+    padding: var(--spacing-medium) var(--spacing-xs) var(--spacing-medium) var(--spacing-xs);
+    color: var(--primary-text-color);
+    font-size: $small-text-font-size;
+  }
+
+  &_description {
+    display: flex;
+    justify-content: flex-end;
+    flex-direction: column;
+  }
+
+  &_title {
+    margin-right: var(--spacing-small);
+  }
+
+  &_variable-name {
+    margin: 0;
+    font-size: 11px;
+    font-weight: 500;
+  }
+}

src/storybook/stand-alone-documentaion/spacing/spacing-sizes/spacing-sizes.jsx

@@ -0,0 +1,15 @@
+import SpacingComponent from "./spacing-component/spacing-component";
+import { Frame } from "../../../components";
+import "./spacing-sizes.scss";
+
+export const SpacingSizes = () => (
+  <Frame className="monday-storybook-spacing-sizes">
+    <SpacingComponent title="XS" sizeInPx="4px" spacingVariableName="spacing-xs" />
+    <SpacingComponent title="S" sizeInPx="8px" spacingVariableName="spacing-small" />
+    <SpacingComponent title="MD" sizeInPx="16px" spacingVariableName="spacing-medium" />
+    <SpacingComponent title="L" sizeInPx="24px" spacingVariableName="spacing-large" />
+    <SpacingComponent title="XL" sizeInPx="32px" spacingVariableName="spacing-xl" />
+    <SpacingComponent title="XXL" sizeInPx="48px" spacingVariableName="spacing-xxl" />
+    <SpacingComponent title="XXXL" sizeInPx="64px" spacingVariableName="spacing-xxxl" />
+  </Frame>
+);

src/storybook/stand-alone-documentaion/spacing/spacing-sizes/spacing-sizes.scss

@@ -0,0 +1,9 @@
+@import "../../../styles/content-spacing";
+
+.monday-storybook-spacing-sizes {
+  margin: $spacing-between-section-items 0;
+  display: flex;
+  justify-content: center;
+  flex-direction: row;
+  align-items: flex-end;
+}

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

@@ -0,0 +1,46 @@
+import { Meta } from "@storybook/addon-docs";
+import { SpacingSizes } from "./spacing-sizes/spacing-sizes";
+import { Frame } from "../../components";
+import {menuExample, tipseenExample, toolbarExample} from "./assets";
+import "./spacing.stories.scss";
+
+<Meta
+  title="Foundations/Spacing"
+/>
+
+<!--- Component documentation -->
+
+# Spacing
+- [Overview](#overview)
+- [Spacing sizes](#spacing-sizes)
+- [Usage and examples](#usage-and-examples)
+- [Feedback](#feedback)
+
+## Overview
+Positioning UI should be with taught including the empty space between components.
+This is what creates relationships and hierarchy withing the visual controls.
+
+## Spacing sizes
+Using the right sizes will create consistency and hierarchy in user interface.
+<SpacingSizes/>
+
+<Tip title="Applying spacing">
+  Elements with more spacing around them perceived as more important because they get more focus on the page,
+  while small spacing makes components look stacked and not stand out.</Tip>
+
+## Usage and examples
+<UsageGuidelines guidelines={[
+  "You can double the sizes to create bigger spacings",
+  "Stay consistent with paddings and sizes across different UI components",
+  "Align all the elements to the same spacing within the components or a page"
+]}/>
+
+<Frame className="monday-storybook-spacing_image-container">
+  <img className="monday-storybook-spacing_image--menu" src={menuExample} alt=""/>
+</Frame>
+<Frame className="monday-storybook-spacing_image-container">
+  <img className="monday-storybook-spacing_image--toolbar" src={toolbarExample} alt=""/>
+</Frame>
+<Frame className="monday-storybook-spacing_image-container ">
+  <img className="monday-storybook-spacing_image--tipseen" src={tipseenExample} alt=""/>
+</Frame>

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

@@ -0,0 +1,24 @@
+.monday-storybook-spacing {
+  &_image {
+    &-container {
+      margin-top: 40px;
+      display: flex;
+      justify-content: center;
+    }
+
+    &--menu {
+      height: 334px;
+      width: 470px;
+    }
+
+    &--toolbar {
+      height: 179px;
+      width: 527px;
+    }
+
+    &--tipseen {
+      height: 306px;
+      width: 439px;
+    }
+  }
+}