save progress

.storybook/global.css

@@ -0,0 +1,7 @@
+a {
+  color: #0196d6;
+}
+
+#page-layout {
+  padding: 2rem 8rem;
+}

.storybook/main.ts

@@ -2,10 +2,10 @@ import type { StorybookConfig } from "@storybook/react-vite";
 
 const config: StorybookConfig = {
   stories: [
-    "../src/stories/**/*.stories.@(js|jsx|mjs|ts|tsx)",
+    "../src/stories/**/*.stories.@(ts|tsx)",
   ],
 
-  staticDirs: ['../public', '../static'],
+  staticDirs: ['../public'],
 
   addons: [
     "@storybook/addon-links",

.storybook/manager-head.html

@@ -24,7 +24,10 @@
   #storybook-explorer-menu .sidebar-subheading > button:focus,
   #storybook-explorer-menu .sidebar-subheading a[data-selected]:hover {
     background-color: #0196d6;
-    color: #fff
+    color: #fff;
+    height: auto;
+    padding: 4px 8px;
+    letter-spacing: initial;
   }
 
   #storybook-explorer-menu .sidebar-subheading > button svg path {

.storybook/preview-head.html

@@ -8,5 +8,6 @@
     font-family: "LatoWeb", sans-serif;
     font-size: 16px;
     color: #333;
+    padding: 0 !important;
   }
 </style>

.storybook/preview.ts → .storybook/preview.tsx

@@ -1,6 +1,14 @@
+import React from 'react';
+
 import type { Preview } from "@storybook/react";
 
+import './global.css';
+
 const preview: Preview = {
+  decorators: [
+    (Story) => 
+      <div id="page-layout"><Story /></div>
+  ],
   parameters: {
     controls: {
       expanded: true,

package.json

@@ -56,7 +56,6 @@
     "@storybook/addon-essentials": "^8.1.10",
     "@storybook/addon-interactions": "^8.1.10",
     "@storybook/addon-links": "^8.1.10",
-    "@storybook/addon-onboarding": "^8.1.10",
     "@storybook/blocks": "^8.1.10",
     "@storybook/react": "^8.1.10",
     "@storybook/react-vite": "^8.1.10",

src/stories/documentation/Welcome.stories.tsx

@@ -1,10 +1,37 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta } from '@storybook/react';
 import React from 'react';
 
+import './welcome.css';
+
 const meta: Meta<JSX.Element> = {
   title: 'Documentation/Welcome',
 };
 
 export default meta;
 
-export const Welcome = () => <h1>Welcome to Storybook</h1>;
+export const Welcome = () => (
+  <div id='welcome'>
+    <div className="banner">
+     <h1>Akamai Design System</h1>
+    </div>
+    <p className="intro">Here you can find our design guidelines, component documentation, and resources for building apps with Akamai's design system.</p>
+    <h2>What's Inside</h2>
+    <div className="inside">
+      <div>
+        <h3>Get Started</h3>
+        <p>Instructions and welcome to Akamai's OS design system</p>
+        <a href='/'>Read more</a>
+      </div>
+      <div>
+        <h3>Tokens</h3>
+        <p>All information about colors, typography, spacing, and icons</p>
+        <a href='/'>Read more</a>
+      </div>
+      <div>
+        <h3>Components</h3>
+        <p>All the information and guidelines you’ll ever need on each component</p>
+        <a href='/'>Read more</a>
+      </div>
+    </div>
+  </div>
+);

src/stories/documentation/welcome.css

@@ -0,0 +1,48 @@
+#welcome {
+  .banner {
+    background:#fff url('/images/ds.jpg') no-repeat right;
+    margin-bottom: 2rem;
+    background-size: 60%;
+    display: flex;
+    height: 250px;
+    position: relative;
+    align-items: center;
+    border-radius: 20px;
+    border: 1px solid #959a9c;
+
+    h1 {
+      margin-left: 2rem;
+      color: #444;
+    }
+  }
+
+  .intro {
+    font-size: 1.25rem;
+    margin-bottom: 2rem;
+  }
+
+  .inside {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    margin-bottom: 2rem;
+    gap: 1rem;
+
+
+    > div {
+      border: 1px solid #959a9c;
+      flex: 1;
+      background-color: #f8fcfe;
+      display: flex;
+      flex-direction: column;
+      padding: 1rem;
+      border-radius: 12px;
+      justify-content: center;
+      height: 175px;
+
+      h3 {
+        margin-bottom: 0;
+      }
+    } 
+  }
+}

yarn.lock

@@ -2434,7 +2434,6 @@ __metadata:
     "@storybook/addon-essentials": "npm:^8.1.10"
     "@storybook/addon-interactions": "npm:^8.1.10"
     "@storybook/addon-links": "npm:^8.1.10"
-    "@storybook/addon-onboarding": "npm:^8.1.10"
     "@storybook/blocks": "npm:^8.1.10"
     "@storybook/react": "npm:^8.1.10"
     "@storybook/react-vite": "npm:^8.1.10"
@@ -3092,15 +3091,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/addon-onboarding@npm:^8.1.10":
-  version: 8.1.10
-  resolution: "@storybook/addon-onboarding@npm:8.1.10"
-  dependencies:
-    react-confetti: "npm:^6.1.0"
-  checksum: 10c0/2dad8ad4db0a72e8a223f71bb28f99fb78c2a91f6a113911c87a578ec46c89cf4635bf4aae3c0ead7cb0512f51e11ff220b66e4be7fd0268d57815f3d65d8ae8
-  languageName: node
-  linkType: hard
-
 "@storybook/addon-outline@npm:8.1.10":
   version: 8.1.10
   resolution: "@storybook/addon-outline@npm:8.1.10"