Release v2.5.0 - staging → master (#45)

Co-authored-by: Davyd Melkon <131438868+davyd-akamai@users.noreply.github.com>
Co-authored-by: Jaalah Ramos <jaalah.ramos@gmail.com>
Co-authored-by: Alban Bailly <130582365+abailly-akamai@users.noreply.github.com>

.github/workflows/pages.yml

@@ -0,0 +1,62 @@
+# Simple workflow for deploying static content to GitHub Pages
+name: Deploy to GitHub Pages
+
+on:
+  # Runs on pushes targeting the default branch
+  push:
+    branches: ["staging"]
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
+# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+jobs:
+  # Single deploy job since we're just deploying
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Use Node.js v18.14.0
+        uses: actions/setup-node@v3
+        with:
+          node-version: "18.14"
+
+      - uses: actions/cache@v3
+        with:
+          path: |
+            **/node_modules
+          key: ${{ runner.os }}-${{ hashFiles('**/yarn.lock') }}
+
+      - name: Install Dependencies
+        run: yarn --frozen-lockfile
+
+      - run: yarn run generate
+      - run: yarn build-storybook
+
+      - name: Setup Pages
+        uses: actions/configure-pages@v3
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v2
+        with:
+          path: "./storybook-static"
+
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v2

.gitignore

@@ -14,4 +14,6 @@ lib
 .env
 *env.
 
-node_modules/
+node_modules/
+
+storybook-static

.storybook/global.css

@@ -0,0 +1,11 @@
+a {
+  color: #0196d6;
+}
+
+#page-layout {
+  padding: 2rem 8rem;
+
+  @media screen and (max-width: 768px) {
+    padding: 2rem 1rem;
+  }
+}

.storybook/main.ts

@@ -2,21 +2,24 @@ import type { StorybookConfig } from "@storybook/react-vite";
 
 const config: StorybookConfig = {
   stories: [
-    "../stories/**/*.mdx",
-    "../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)",
+    "../src/stories/**/*.stories.@(ts|tsx)",
   ],
+
+  staticDirs: ['../public'],
+
   addons: [
     "@storybook/addon-links",
     "@storybook/addon-essentials",
-    "@storybook/addon-onboarding",
-    "@storybook/addon-interactions",
+    "@storybook/addon-interactions"
   ],
+
   framework: {
     name: "@storybook/react-vite",
     options: {},
   },
-  docs: {
-    autodocs: "tag",
-  },
+
+  typescript: {
+    reactDocgen: "react-docgen-typescript"
+  }
 };
 export default config;

.storybook/manager-head.html

@@ -0,0 +1,59 @@
+<link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,400;0,6..12,600;0,6..12,700;0,6..12,800;1,6..12,400;1,6..12,600;1,6..12,700;1,6..12,800&display=swap" rel="stylesheet">
+<title>Akamai Design System</title>
+<style>
+  body {
+    font-family: "Nunito Sans", sans-serif;
+    background: #f0f3ff !important;
+    font-size: 14px;
+  }
+
+  .sidebar-header svg {
+    color: #333;
+  }
+
+  #storybook-explorer-menu svg {
+    color: #f8971d;
+  }
+
+  #storybook-explorer-menu [aria-label="Expand"],
+  #storybook-explorer-menu [aria-label="Collapse"] {
+    display: none;
+  }
+
+  #storybook-explorer-menu .sidebar-subheading > button,
+  #storybook-explorer-menu .sidebar-subheading > button:focus,
+  #storybook-explorer-menu .sidebar-subheading a[data-selected]:hover {
+    background-color: #0196d6;
+    color: #fff;
+    height: auto;
+    padding: 4px 8px;
+    letter-spacing: initial;
+  }
+
+  #storybook-explorer-menu .sidebar-subheading > button svg path {
+    fill: #fff;
+  }
+
+  #storybook-explorer-menu [data-selected="true"] {
+    background-color: transparent;
+  }
+
+  #storybook-explorer-menu [data-selected="true"] a,
+  #storybook-explorer-menu [data-selected="true"] a:hover,
+  #storybook-explorer-menu [data-selected="true"] svg {
+    color: #0196d6;
+  }
+
+  #storybook-explorer-menu a[data-selected="true"] svg {
+    color: #f8971d;
+  }
+
+  .os-content button:hover {
+    background-color: rgba(80, 52, 255, 0.1);
+    color: #f8971d;
+  }
+
+  .os-content button:hover svg {
+    color: #f8971d;
+  }
+</style>

.storybook/manager.ts

@@ -0,0 +1,6 @@
+import { addons } from '@storybook/manager-api';
+import theme from './theme';
+
+addons.setConfig({
+  theme,
+});

.storybook/preview-head.html

@@ -1,4 +1,14 @@
-<link rel="preconnect" href="https://fonts.googleapis.com">
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,400;0,6..12,600;0,6..12,700;0,6..12,800;1,6..12,400;1,6..12,600;1,6..12,700;1,6..12,800&display=swap" rel="stylesheet">
-<link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;600;700&family=Nunito+Sans:ital,opsz,wght@0,6..12,400;0,6..12,600;0,6..12,700;0,6..12,800;1,6..12,400;1,6..12,600;1,6..12,700;1,6..12,800&display=swap" rel="stylesheet">
+<link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;600;700&family=Nunito+Sans:ital,opsz,wght@0,6..12,400;0,6..12,600;0,6..12,700;0,6..12,800;1,6..12,400;1,6..12,600;1,6..12,700;1,6..12,800&display=swap" rel="stylesheet">
+<meta property="og:description" content="Akamai Design System" />
+<meta property="og:title" content="Akamai Design System" />
+<!-- <meta property="og:image" content="unfurl with something" /> -->
+<link rel="stylesheet" href="/fonts.css" />
+
+<style>
+  body {
+    font-family: "LatoWeb", sans-serif;
+    font-size: 16px;
+    color: #333;
+    padding: 0 !important;
+  }
+</style>

.storybook/preview.tsx

@@ -0,0 +1,40 @@
+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,
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+    docs: {
+      story: {
+        inline: true,
+      },
+    },
+    options: {
+      storySort: {
+        order: [
+          'Documentation',
+            ['Welcome', 'Get Started'],
+          'Foundations',
+            ['Accessibility', 'Colors'],
+          'Tokens',
+            ['Globals', 'Aliases'],
+          'Components'],
+      },
+    },
+  },
+};
+
+export default preview;

.storybook/theme.ts

@@ -0,0 +1,12 @@
+import { create } from '@storybook/theming/create';
+
+// @ts-ignore
+import logo from './assets/akamai-logo.png';
+
+export default create({
+  base: 'light',
+  brandImage: logo,
+  brandUrl: '/',
+  brandTitle: 'Akamai Cloud Manager',
+  brandTarget: '_self',
+});

.storybook/vite.config.ts

@@ -0,0 +1,6 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react-swc';
+
+export default defineConfig({
+  plugins: [react()],
+});

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linode/design-language-system",
-  "version": "2.4.0",
+  "version": "2.5.0",
   "type": "module",
   "module": "dist/index.js",
   "exports": {
@@ -48,34 +48,36 @@
   "dependencies": {
     "@tokens-studio/sd-transforms": "^0.15.2",
     "react": "^17.0.2",
+    "react-copy-to-clipboard": "^5.1.0",
     "react-dom": "^17.0.2",
     "style-dictionary": "4.0.0-prerelease.25"
   },
   "devDependencies": {
-    "@storybook/addon-essentials": "^7.6.6",
-    "@storybook/addon-interactions": "^7.6.6",
-    "@storybook/addon-links": "^7.6.6",
-    "@storybook/addon-onboarding": "^1.0.10",
-    "@storybook/blocks": "^7.6.6",
-    "@storybook/react": "~7.6.4",
-    "@storybook/react-vite": "^7.6.4",
-    "@storybook/test": "^7.6.6",
-    "@storybook/theming": "~7.6.4",
+    "@storybook/addon-essentials": "^8.1.10",
+    "@storybook/addon-interactions": "^8.1.10",
+    "@storybook/addon-links": "^8.1.11",
+    "@storybook/blocks": "^8.1.10",
+    "@storybook/react": "^8.1.10",
+    "@storybook/react-vite": "^8.1.10",
+    "@storybook/test": "^8.1.10",
+    "@storybook/theming": "^8.1.10",
     "@types/node": "^18.16.1",
     "@types/react": "^17.0.27",
+    "@types/react-copy-to-clipboard": "^5",
     "@types/react-dom": "^17.0.9",
     "@typescript-eslint/eslint-plugin": "^5.43.0",
     "@typescript-eslint/parser": "^5.59.9",
+    "@vitejs/plugin-react-swc": "^3.7.0",
     "eslint": "^8.0.1",
     "eslint-config-prettier": "^8.8.0",
     "eslint-config-standard-with-typescript": "^34.0.1",
     "eslint-plugin-import": "^2.25.2",
     "eslint-plugin-n": "^15.0.0",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-promise": "^6.0.0",
-    "eslint-plugin-storybook": "^0.6.15",
+    "eslint-plugin-storybook": "^0.8.0",
     "prettier": "^2.8.8",
-    "storybook": "^7.6.6",
+    "storybook": "^8.1.10",
     "terser": "^5.17.1",
     "ts-node": "^10.9.1",
     "tsup": "^6.7.0",

public/fonts.css

@@ -0,0 +1,37 @@
+/* Webfont: Lato-Bold */
+@font-face {
+  font-family: 'LatoWebBold';
+  src: url('fonts/Lato-Bold.eot'); /* IE9 Compat Modes */
+  src: url('fonts/Lato-Bold.eot?#iefix') format('embedded-opentype'),
+    /* IE6-IE8 */ url('fonts/Lato-Bold.woff2') format('woff2'),
+    /* Modern Browsers */ url('fonts/Lato-Bold.woff') format('woff'),
+    /* Modern Browsers */ url('fonts/Lato-Bold.ttf') format('truetype');
+  font-style: normal;
+  font-weight: normal;
+  text-rendering: optimizeLegibility;
+}
+
+/* Webfont: Lato-Regular */
+@font-face {
+  font-family: 'LatoWeb';
+  src: url('fonts/Lato-Regular.eot'); /* IE9 Compat Modes */
+  src: url('fonts/Lato-Regular.eot?#iefix') format('embedded-opentype'),
+    /* IE6-IE8 */ url('fonts/Lato-Regular.woff2') format('woff2'),
+    /* Modern Browsers */ url('fonts/Lato-Regular.woff') format('woff'),
+    /* Modern Browsers */ url('fonts/Lato-Regular.ttf') format('truetype');
+  font-style: normal;
+  font-weight: normal;
+  text-rendering: optimizeLegibility;
+}
+
+/* Webfont: UbuntuMono */
+@font-face {
+  font-family: 'UbuntuMono';
+  src:
+    /* IE6-IE8 */ url('fonts/UbuntuMono-Regular.woff2') format('woff2'),
+    /* Modern Browsers */ url('fonts/UbuntuMono-Regular.woff') format('woff'),
+    /* Modern Browsers */ url('fonts/UbuntuMono-Regular.ttf') format('truetype');
+  font-style: normal;
+  font-weight: normal;
+  text-rendering: optimizeLegibility;
+}