monday-ui-react-core/src/general-stories/global-design/globalDesign.stories.mdx

Official monday.com UI resources for application development in React.js

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";
import "./globalDesign.scss";
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>
        <div className="global-design-title-container">
          <div className="title">Box Shadows</div>
      </div>
        <div className="global-design-story-container space-between">
            <GlobalSettingGeneralComponent title="Small" bullets={["Forms", "Buttons", "Check boxes", "Selected mark", "Tooltips etc..."]} value=" 0 4px 8px -1px rgba(0, 0, 0, 0.2);">
                <BoxShadowComponent boxShadowClassName="box-shadow-small" number="2"/>
            </GlobalSettingGeneralComponent>
            <GlobalSettingGeneralComponent title="Medium" bullets={["Dropdown", "Popovers", "Attention box", "Updates"]} value="0px 6px 20px -2px rgba(0, 0, 0, 0.2);">
                <BoxShadowComponent boxShadowClassName="box-shadow-medium" number="8"/>
            </GlobalSettingGeneralComponent>
            <GlobalSettingGeneralComponent title="Large" bullets={["Popups"]} value="0px 15px 50px -10px rgba(0, 0, 0, 0.3);">
                <BoxShadowComponent boxShadowClassName="box-shadow-large" number="16"/>
            </GlobalSettingGeneralComponent>
        </div>
    </StoryWrapper>
  </Story>
</Preview>

<Preview>
  <Story name="Rounded Corners">
      <StoryWrapper>
        <div className="global-design-title-container">
          <div className="title">Rounded Corners</div>
      </div>
        <div className="global-design-story-container space-between">
            <GlobalSettingGeneralComponent title="Small" bullets={["Forms", "Buttons", "Check boxes", "Selected mark", "Tooltips etc..."]} >
                <RoundedCornerComponent roundedCornerClassName="border-radius-small" number="4"/>
            </GlobalSettingGeneralComponent>
            <GlobalSettingGeneralComponent title="Medium" bullets={["Dropdown", "Popovers", "Attention box", "Updates"]} >
                <RoundedCornerComponent roundedCornerClassName="border-radius-medium" number="8"/>
            </GlobalSettingGeneralComponent>
            <GlobalSettingGeneralComponent title="Large" bullets={["Popups"]} >
                <RoundedCornerComponent roundedCornerClassName="border-radius-large" number="16"/>
            </GlobalSettingGeneralComponent>
        </div>
    </StoryWrapper>
  </Story>
</Preview>