feat: add DesignPage

ui/pages/DesignPage.d.ts

@@ -0,0 +1,2 @@
+import DesignPage from './dist/pages/DesignPage';
+export default DesignPage;

ui/pages/DesignPage.js

@@ -0,0 +1 @@
+module.exports = require('./dist/DesignPage');

ui/pages/package.json

@@ -18,6 +18,8 @@
     "ComponentPage.js",
     "CurrentStoryPage.d.ts",
     "CurrentStoryPage.js",
+    "DesignPage.d.ts",
+    "DesignPage.js",
     "StoriesPage.d.ts",
     "StoriesPage.js",
     "TestingPage.d.ts",
@@ -43,8 +45,10 @@
   },
   "license": "MIT",
   "dependencies": {
+    "@component-controls/addon-notes": "^2.5.3",
     "@component-controls/axe-plugin": "^2.5.3",
     "@component-controls/blocks": "^2.5.3",
+    "@component-controls/figma-embed": "^2.5.3",
     "@component-controls/viewport-plugin": "^2.5.3"
   },
   "devDependencies": {

ui/pages/rollup.config.js

@@ -7,6 +7,7 @@ export default config({
     './src/pages/ClassicPage.tsx',
     './src/pages/ComponentPage.tsx',
     './src/pages/CurrentStoryPage.tsx',
+    './src/pages/DesignPage.tsx',
     './src/pages/StoriesPage.tsx',
     './src/pages/TestingPage.tsx',
   ],

ui/pages/src/pages/DesignPage.tsx

@@ -0,0 +1,25 @@
+import React, { FC, Fragment } from 'react';
+import { Playground, Story, Description } from '@component-controls/blocks';
+import { TabConfiguration } from '@component-controls/core';
+import { NotesBlock } from '@component-controls/addon-notes';
+import { FigmaEmbedBlock } from '@component-controls/figma-embed';
+
+const DesignPage: FC = () => {
+  return (
+    <Fragment>
+      <Description />
+      <Playground title=".">
+        <Story id="." />
+      </Playground>
+      <NotesBlock title="Design notes" />
+      <FigmaEmbedBlock title="Figma files" />
+    </Fragment>
+  );
+};
+
+export default {
+  title: 'Design',
+  component: DesignPage,
+  isVisible: ({ story }) =>
+    story.plugins && (story.plugins.figma || story.plugins.notes),
+} as TabConfiguration;