OPHJOD-338: Add some docs from Figma

Opetushallitus · Apr 30, 2024 · 2daa724 · 2daa724
1 parent 78fa199
commit 2daa724
Show file tree

Hide file tree

Showing 4 changed files with 228 additions and 0 deletions.
diff --git a/.storybook/preview.ts b/.storybook/preview.ts
@@ -30,6 +30,11 @@ const preview: Preview = {
         },
       },
     },
+    options: {
+      storySort: {
+        order: 'Getting Started',
+      },
+    },
   },
   decorators: [
     withThemeByClassName<ReactRenderer>({

diff --git a/lib/docs/Colors.mdx b/lib/docs/Colors.mdx
@@ -0,0 +1,68 @@
+import { Meta, ColorPalette, ColorItem } from '@storybook/blocks';
+
+<Meta title="Colors" />
+
+# Colors
+
+<ColorPalette>
+  <ColorItem title="Accent" subtitle="accent" colors={['#697077', '#697077bf', '#6970777f', '#6970773f']} />
+  <ColorItem
+    title="Item indication"
+    subtitle="secondary-1"
+    colors={['#c1c7cd', '#c1c7cdbf', '#c1c7cd7f', '#c1c7cd3f']}
+  />
+  <ColorItem
+    title="Item indication"
+    subtitle="secondary-2"
+    colors={['#a2a9b0', '#a2a9b0bf', '#a2a9b07f', '#a2a9b03f']}
+  />
+  <ColorItem
+    title="Item indication"
+    subtitle="secondary-3"
+    colors={['#878d96', '#878d96bf', '#878d967f', '#878d963f']}
+  />
+  <ColorItem
+    title="Item indication"
+    subtitle="secondary-4"
+    colors={['#697977', '#697977bf', '#6979777f', '#6979773f']}
+  />
+  <ColorItem
+    title="Default background color"
+    subtitle="white"
+    colors={['#ffffff', '#ffffffbf', '#ffffff7f', '#ffffff3f']}
+  />
+  <ColorItem
+    title="Invert background color"
+    subtitle="black"
+    colors={['#000000', '#000000bf', '#0000007f', '#0000003f']}
+  />
+  <ColorItem title="Primary text" subtitle="primary-gray" colors={['#333333', '#333333bf', '#3333337f', '#3333333f']} />
+  <ColorItem
+    title="Secondary text"
+    subtitle="secondary-gray"
+    colors={['#767676', '#767676bf', '#7676767f', '#7676763f']}
+  />
+  <ColorItem title="Text link color" subtitle="link" colors={['#595959', '#595959bf', '#5959597f', '#5959593f']} />
+  <ColorItem
+    title="Inactive item"
+    subtitle="inactive-gray"
+    colors={['#a9a9a9', '#a9a9a9bf', '#a9a9a97f', '#a9a9a93f']}
+  />
+  <ColorItem
+    title="Graphics border"
+    subtitle="border-gray"
+    colors={['#cfcfcf', '#cfcfcfbf', '#cfcfcf7f', '#cfcfcf3f']}
+  />
+  <ColorItem title="Background color" subtitle="bg-gray" colors={['#f5f5f5', '#f5f5f5bf', '#f5f5f57f', '#f5f5f53f']} />
+  <ColorItem title="Alert indication" subtitle="alert" colors={['#e02929', '#e02929bf', '#e029297f', '#e029293f']} />
+  <ColorItem
+    title="Warning indication"
+    subtitle="warning"
+    colors={['#f2c832', '#f2c832bf', '#f2c8327f', '#f2c8323f']}
+  />
+  <ColorItem
+    title="Success indication"
+    subtitle="success"
+    colors={['#2e8546', '#2e8546bf', '#2e85467f', '#2e85463f']}
+  />
+</ColorPalette>
diff --git a/lib/docs/GettingStarted.mdx b/lib/docs/GettingStarted.mdx
@@ -0,0 +1,61 @@
+import { Meta, ColorPalette, ColorItem } from '@storybook/blocks';
+
+<Meta title="Getting Started" />
+
+# Getting Started
+
+Welcome! Whether you're a designer or a developer, this guide will help you get started and connect you to the essential resources you need.
+
+## Table of Contents
+
+- [Design Resources](#design-resources)
+
+  - [Figma](#figma)
+  - [UI/UX Design Guidelines](#uiux-design-guidelines)
+
+- [Development Resources](#development-resources)
+  - [Coding Standards](#coding-standards)
+  - [Version Control](#version-control)
+  - [Development Tools](#development-tools)
+
+---
+
+## Design Resources
+
+### Figma
+
+[Figma](https://www.figma.com/) is a collaborative design and prototyping tool. It's the heart of the design process, allowing designers to work together seamlessly.
+
+- [JOD Figma Project](https://www.figma.com/file/6M2LrpSCcB0thlFDaQAI2J/cx_jod_client)
+
+### UI/UX Design Guidelines
+
+Before you dive into designing, familiarize yourself with our UI/UX design guidelines. They provide valuable insights into our design philosophy and standards.
+
+- [JOD UI/UX Guidelines Document](https://wiki.eduuni.fi/pages/viewpage.action?pageId=453758666)
+
+---
+
+## Development Resources
+
+### Coding Standards
+
+Maintaining a consistent code style is essential for collaborative development. Our coding standards document will guide you on best practices.
+
+- [JOD Coding Standards Documents](https://wiki.eduuni.fi/pages/viewpage.action?pageId=462121183)
+
+### Version Control
+
+We use Git for version control. Make sure you have Git installed and are familiar with its basics.
+
+- [JOD Design System](https://github.com/Opetushallitus/jod-design-system)
+
+### Development Tools
+
+Your development environment is critical. Here are some tools and resources to help you set up your workspace:
+
+- **Code Editor**: We recommend using [Visual Studio Code](https://code.visualstudio.com/) for development. It's highly customizable and supports a wide range of extensions.
+
+- **Package Manager**: [npm](https://www.npmjs.com/) is the package manager we use for frontend projects. Install it to manage project dependencies.
+
+---
diff --git a/lib/docs/Spacing.mdx b/lib/docs/Spacing.mdx
@@ -0,0 +1,94 @@
+import { Meta } from '@storybook/blocks';
+
+<Meta title="Spacing" />
+
+# Spacing
+
+<table>
+  <thead>
+    <tr>
+      <th>Name</th>
+      <th>Pixels</th>
+      <th>Example</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>1</td>
+      <td>2px</td>
+      <td>
+        <div className="bg-alert" style={{ width: 2, height: 2 }}></div>
+      </td>
+    </tr>
+    <tr>
+      <td>2</td>
+      <td>4px</td>
+      <td>
+        <div className="bg-alert" style={{ width: 4, height: 4 }}></div>
+      </td>
+    </tr>
+    <tr>
+      <td>3</td>
+      <td>8px</td>
+      <td>
+        <div className="bg-alert" style={{ width: 8, height: 8 }}></div>
+      </td>
+    </tr>
+    <tr>
+      <td>4</td>
+      <td>12px</td>
+      <td>
+        <div className="bg-alert" style={{ width: 12, height: 12 }}></div>
+      </td>
+    </tr>
+    <tr>
+      <td>5</td>
+      <td>16px</td>
+      <td>
+        <div className="bg-alert" style={{ width: 16, height: 16 }}></div>
+      </td>
+    </tr>
+    <tr>
+      <td>6</td>
+      <td>24px</td>
+      <td>
+        <div className="bg-alert" style={{ width: 24, height: 24 }}></div>
+      </td>
+    </tr>
+    <tr>
+      <td>7</td>
+      <td>32px</td>
+      <td>
+        <div className="bg-alert" style={{ width: 32, height: 32 }}></div>
+      </td>
+    </tr>
+    <tr>
+      <td>8</td>
+      <td>40px</td>
+      <td>
+        <div className="bg-alert" style={{ width: 40, height: 40 }}></div>
+      </td>
+    </tr>
+    <tr>
+      <td>9</td>
+      <td>48px</td>
+      <td>
+        <div className="bg-alert" style={{ width: 48, height: 48 }}></div>
+      </td>
+    </tr>
+    <tr>
+      <td>10</td>
+      <td>56px</td>
+      <td>
+        <div className="bg-alert" style={{ width: 56, height: 56 }}></div>
+      </td>
+    </tr>
+    <tr>
+      <td>11</td>
+      <td>64px</td>
+      <td>
+        <div className="bg-alert" style={{ width: 64, height: 64 }}></div>
+      </td>
+    </tr>
+  </tbody>
+</table>