Merge pull request #1139 from undp/986-storybook-homepage-should-be-r…

…edesigned

986 storybook homepage should be redesigned

stories/Components/UIcomponents/Cards/FeaturedCard/FeaturedContentCard.jsx

@@ -37,7 +37,7 @@ export const FeaturedContentCard = ({
       {headertext && <div data-viewport="true" className="cell small-3 medium-3 large-3 medium-offset-1 small-offset-1 feature__card-title "><Heading type="2" label={headertext} /></div>}
          {data.map((item, index) => (
         <div key={index}  className={cls('cell', `${item.scale ? size_options[`${item.scale}`] : size_variant}`, 'feature__card', `${item.type ? `${image_options[`${item.type}`]}` : `${image_variant}`}`, `${item.hovercolor ? `${hovercolor_options[`${item.hovercolor}`]}` : `${hovercolor_variant}`}`)}>
-          <a href="#">
+          <a href={item.url ? item.url : '#'}>
             <div className="feature__card-slide">
               {item.imgback && (image === 'image' || (item.type === 'image' && image === 'image')) && <div className="feature__card-image"><img src={item.imgback} alt={item.imgback} /></div>}
             </div>

stories/Documentation/Intro.stories.mdx

@@ -1,38 +1,209 @@
-import { Meta, Source } from '@storybook/addon-docs';
+import { Meta, Source, Canvas, Story, Preview } from "@storybook/addon-docs";
+import { Heading } from "../Atom/Typography/Heading/Heading";
+import { Video } from "../Atom/Video/Video";
+import "./documentation.scss";
+import { FeaturedContentCard } from "../Components/UIcomponents/Cards/FeaturedCard/FeaturedContentCard";
+import githubLogo from "../assets/images/Github-logo.svg";
+import figmaLogo from "../assets/images/Figma-logo.svg";
+const data = [
+  {
+    contenttile: "01",
+    contentname: "Getting Started",
+    descriptionText:
+      "Everything you need to get up and running with UNDP’s design system",
+    button: "READ MORE",
+    type: "color",
+    scale: "medium",
+    url: "/?path=/story/getting-started-how-to-use-our-design-system--page",
+  },
+  {
+    contenttile: "02",
+    contentname: "Foundation",
+    descriptionText:
+      "Color, typography, layout, and other foundational elements of the system.",
+    button: "READ MORE",
+    type: "color",
+    scale: "medium",
+    url: "/?path=/story/foundation",
+  },
+  {
+    contenttile: "03",
+    contentname: "Components",
+    descriptionText:
+      "The building blocks of the design system. Their reuse creates consistency across applications",
+    button: "READ MORE",
+    type: "color",
+    scale: "medium",
+    url: "/?path=/story/components",
+  },
+  {
+    contenttile: "04",
+    contentname: "Patterns",
+    descriptionText:
+      "Reusable combinations of components that address common objectives",
+    button: "READ MORE",
+    type: "color",
+    scale: "medium",
+    url: "/?path=/story/patterns",
+  },
+  {
+    contenttile: "05",
+    contentname: "Utilities",
+    descriptionText: "Helpers to add specific treatment to your components",
+    button: "READ MORE",
+    type: "color",
+    scale: "medium",
+    url: "/?path=/story/utilities",
+  },
+  {
+    contenttile: "06",
+    contentname: "Templates",
+    descriptionText:
+      "The complete page templates used for UNDP’s global and country websites",
+    button: "READ MORE",
+    type: "color",
+    scale: "medium",
+    url: "/?path=/story/templates",
+  },
+];
 
 <Meta
-	title="Getting started/Intro"
-	parameters={{
+  title="Getting started/Intro"
+  parameters={{
+    layout: "fullscreen",
     viewMode: "docs",
     previewTabs: {
-      canvas: { hidden: true }
-    }
-  }}/>
+      canvas: { hidden: true },
+      story: { hidden: true },
+    },
+  }}
+/>
 
-# Introduction
+<style>{`
+  .sbdocs-wrapper {
+    padding: 20px 8px;
+  }
+  .sbdocs-content {
+    max-width: none;
+  }
+  .sbdocs div[class*="css-"] {
+    margin: inherit;
+  }
+`}</style>
 
-The purpose of this project is to create unified user interfaces for UNDP by the designer and developers.
-
-These projects will have a consistent look and feel and are accessible by just following the guidelines in the documentation.
-
-By unifying design elements into reusable components, the development will simplify and accelerate the development of these digital products.
-
-The Guide is a living document created to meet the needs of UNDP's front-end developers and designers. If there is a Component or Pattern that you need, or you have any other feedback, question or comment please contact us.
-
-### Structure
-
-UNDP’s design system uses an atomic design approach. Within the seven thematic groups, each group is further organized by atomic level.
-
-![Atomic design](images/atomic.png)
-
-### Codebase
-
-For developers looking to build with UNDP’s design system, it will soon be available as a StorybookJS package. All front-end code (HTML/CSS/JS) will be architected in a modular and scalable way.
-
-The codebase can be accessed at GitHub https://github.com/undp/design-system
-
-Path location of CSS for Components part of this design system is: https://github.com/undp/design-system/tree/master/docs/css
-
-Path location of JS for Components part of this design system is: https://github.com/undp/design-system/tree/master/docs/jss
-
-#### UNDP Design System  |  Version 1.0.10
+<div name="Intro" class="documentation-page">
+  <div class="grid-container full header">
+    <div class="grid-x grid-margin-x">
+      <div className="cell">
+        <div
+          style={{
+            position: "relative",
+            width: "100%",
+            height: "0",
+            paddingBottom: "56.25%",
+          }}
+        >
+          <video
+            loop={true}
+            autoPlay="autoplay"
+            muted={true}
+            playsInline={true}
+            style={{ pointerEvents: "none" }}
+          >
+            <source
+              src="https://undp.widen.net/content/piy26v2s1n/mp4/undp-design-system-roll.mp4?quality=hd&u=cvx5ij"
+              type="video/mp4"
+              media="all"
+            />
+          </video>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div className="grid-container">
+    <div className="grid-x grid-margin-x intro">
+      <div className="medium-6 cell">
+        <h1 className="title">
+          UNDP
+          <br />
+          Design
+          <br />
+          System
+        </h1>
+      </div>
+      <div className="medium-6 cell">
+        <p className="subtitle">
+          Here you can find our design guidelines, component documentation, and
+          resources for building apps with UNDP's design system. It is currently
+          a product led and maintained by UNDP's Digital Communication Studio.
+        </p>
+      </div>
+      <div className="medium-6 cell figma">
+        <a
+          href="https://www.figma.com/community/file/1128400672549109458"
+          target="_blank"
+        >
+          <img src={figmaLogo} alt="" />
+          <p>View Figma file</p>
+        </a>
+      </div>
+      <div className="medium-6 cell github">
+        <a href="https://github.com/undp/design-system" target="_blank">
+          <img src={githubLogo} alt="" />
+          <p>View Github repository</p>
+        </a>
+      </div>
+    </div>
+    <div className="grid-x grid-margin-x content">
+      <div className="cell">
+        <hr />
+        <Heading type="2" label="What's inside" />
+        <div className="featured-content-cards__wrapper">
+          <FeaturedContentCard data={data} />
+        </div>
+        <hr />
+        <Heading type="2" label="Contributing" />
+        <p>
+          The Guide is a living document created to meet the needs of UNDP's
+          front-end developers and designers. If there is a Component or Pattern
+          that you need, or you have any other feedback, question or comment
+          please contact us.
+        </p>
+        <p>
+          For developers looking to build with UNDPs design system, it will soon
+          be available as a StorybookJS package. All front-end code
+          (HTML/CSS/JS) will be architected in a modular and scalable way.
+        </p>
+        <Heading type="3" label="Codebase" />
+        <p>
+          The codebase can be accessed at GitHub{" "}
+          <a href="https://github.com/undp/design-system" target="_blank">
+            https://github.com/undp/design-system
+          </a>
+        </p>
+        <p>
+          Path location of CSS for Components part of this design system is:{" "}
+          <a
+            href="https://github.com/undp/design-system/tree/master/docs/css"
+            target="_blank"
+          >
+            https://github.com/undp/design-system/tree/master/docs/css
+          </a>
+        </p>
+        <p>
+          Path location of JS for Components part of this design system is:{" "}
+          <a
+            href="https://github.com/undp/design-system/tree/master/docs/jss"
+            target="_blank"
+          >
+            https://github.com/undp/design-system/tree/master/docs/jss
+          </a>
+        </p>
+        <hr />
+        <p>
+          <strong>UNDP Design System | Version 1.0.10</strong>
+        </p>
+      </div>
+    </div>
+  </div>
+</div>

stories/Documentation/documentation.scss

@@ -0,0 +1,136 @@
+@import '../assets/scss/mixins';
+@import '../assets/scss/breakpoints';
+@import '../assets/scss/variables';
+@import '../assets/scss/grid';
+
+// .sb-show-main.sb-main-fullscreen, 
+.documentation-page {
+
+  .grid-container:not(.full) {
+    margin-left: auto;
+    margin-right: auto;
+    max-width: 75rem;
+  }
+
+  .grid-container.full {
+    margin-left: auto;
+    margin-right: auto;
+    padding: 0 0.75rem;
+
+    @include devicebreak(large) {
+      padding: 0 0.25rem;
+    }
+  }
+
+  .vimeo-full-width {
+    padding: 56.25% 0 0 0;
+    position: relative;
+  }
+
+  .vimeo-full-width iframe {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+
+  h1.title {
+    font-family: "SohneBreit", "ProximaNova", sans-serif;
+    font-weight: 900;
+    color: $color-black;
+    margin-top: $spacing-10;
+    margin-bottom: $spacing-07;
+    font-size: 55px;
+
+    @include devicebreak(large) {
+      font-size: 55px;
+    }
+  }
+
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-family: "ProximaNova", sans-serif;
+  }
+
+  h2 {
+    margin-bottom: $spacing-06;
+  }
+
+  h3 {
+    margin-bottom: $spacing-05;
+  }
+
+  .subtitle {
+    font-size: 1.25rem;
+    line-height: 1.3;
+  }
+
+  video {
+    width: 100%;
+  }
+
+  hr {
+    margin-top: $spacing-11;
+    margin-bottom: $spacing-06;
+    border-top: 2px solid rgba(0, 0, 0, 1);
+  }
+
+  .intro {
+    row-gap: $spacing-06;
+
+    .cell {
+      display: flex;
+      align-items: center;
+
+      &.figma {
+        background: $color-black;
+
+        p,
+        a {
+          color: $color-white;
+        }
+      }
+
+      &.github {
+        background: $color-gray-300;
+      }
+
+      &.figma,
+      &.github {
+        a {
+          background: none;
+          width: 100%;
+          text-align: center;
+          padding-top: $spacing-08;
+          padding-bottom: $spacing-06;
+
+          @include devicebreak(large) {
+            padding-top: $spacing-09;
+            padding-bottom: $spacing-07;
+          }
+
+          p {
+            font-size: 1.25rem;
+          }
+        }
+
+        img {
+          height: 100px;
+        }
+      }
+    }
+  }
+
+  .featured-content-cards__wrapper {
+    margin-top: $spacing-09;
+    margin-bottom: $spacing-05;
+
+    .grid-x.grid-margin-x {
+      row-gap: $spacing-06;
+    }
+  }
+}