Merge branch 'master' into refactor/add-react-to-project

carbon-design-system · May 8, 2019 · 3f6b444 · 3f6b444
2 parents f7a6a8b + ee65576
commit 3f6b444
Show file tree

Hide file tree

Showing 9 changed files with 68 additions and 6 deletions.
diff --git a/.gitignore b/.gitignore
@@ -7,6 +7,10 @@ dist
 umd
 css
 
+# Netlify deploy folder
+/demo/*
+!/demo/index.html
+
 # Config files
 .npmrc
 

diff --git a/demo/index.html b/demo/index.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Deploy preview</title>
+    <link rel="stylesheet" type="text/css" href="https://unpkg.com/carbon-components@latest/css/carbon-components.min.css">
+    <style type="text/css">
+      html {
+        height: 100%;
+      }
+
+      body {
+        height: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+
+      .bx--btn {
+        margin: 0 0.25rem;
+      }
+    </style>
+  </head>
+  <body>
+    <a class="bx--btn bx--btn--primary" href="./components/">Components</a>
+  </body>
+</html>
diff --git a/package.json b/package.json
@@ -20,6 +20,7 @@
     "format": "prettier --write '**/*.{js,md,scss,ts}' '!**/{build,es,lib,storybook,ts,umd}/**'",
     "format:diff": "prettier --list-different '**/*.{js,md,scss,ts}' '!**/{build,es,lib,storybook,ts,umd}/**'",
     "format:staged": "prettier --write",
+    "gather-deploy-files": "yarn workspaces run gather-deploy-files",
     "sync": "node tasks/sync.js"
   },
   "devDependencies": {

diff --git a/packages/components/demo/js/components/RootPage.js b/packages/components/demo/js/components/RootPage.js
@@ -314,7 +314,7 @@ class RootPage extends Component {
     const hasRenderedContent =
       !metadata.isCollection && subItems.length <= 1 ? metadata.renderedContent : subItems.every(item => item.renderedContent);
     if (!hasRenderedContent) {
-      fetch(`/code/${metadata.name}`)
+      fetch(`./code/${metadata.name}`)
         .then(checkStatus)
         .then(response => response.json())
         .then(responseContent => {
@@ -379,7 +379,7 @@ class RootPage extends Component {
       const selectedNavItem = componentItems && componentItems.find(item => item.id === selectedNavItemId);
       const { name } = selectedNavItem || {};
       if (name) {
-        window.history.pushState({ name }, name, !routeWithQueryArgs ? `/demo/${name}` : `/?nav=${name}`);
+        window.history.pushState({ name }, name, !routeWithQueryArgs ? `./demo/${name}` : `./?nav=${name}`);
       }
       this._populateCurrent();
     });

diff --git a/packages/components/demo/js/components/SideNav.js b/packages/components/demo/js/components/SideNav.js
@@ -48,7 +48,7 @@ class SideNav extends Component {
                   key={id}
                   data-nav-id={id}
                   isActive={id === activeItemId}
-                  href={`/demo/${name}`}
+                  href={`./demo/${name}`}
                   onClick={this.handleItemClick}>
                   {label}
                 </SideNavLink>

diff --git a/packages/components/demo/views/layouts/demo-nav.hbs b/packages/components/demo/views/layouts/demo-nav.hbs
@@ -1,7 +1,9 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <base href="/">
+    {{#unless queryRoute}}
+      <base href="/">
+    {{/unless}}
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width">
     <title>Carbon Components</title>
@@ -15,12 +17,12 @@
         overflow: hidden;
       }
     </style>
-    <link rel="stylesheet" type="text/css" href="/demo.css">
+    <link rel="stylesheet" type="text/css" href="./demo.css">
   </head>
   <body>
     <div data-renderroot></div>
     <input aria-label="inpute-text-offleft" type="text" class="offleft" />
     {{{yield}}}
-    <script src="/demo{{#if minify}}.min{{/if}}.js"></script>
+    <script src="./demo{{#if minify}}.min{{/if}}.js"></script>
   </body>
 </html>
diff --git a/packages/components/gulpfile.js b/packages/components/gulpfile.js
@@ -397,6 +397,7 @@ const buildDemoHTML = () =>
               useStaticFullRenderPage: true,
             }),
             minify: true,
+            queryRoute: true,
           })
         ),
         ...componentSource

diff --git a/packages/components/package.json b/packages/components/package.json
@@ -52,6 +52,7 @@
     "ci-check": "sh ./tools/ci-check.sh",
     "dev": "gulp serve",
     "format:check": "prettier --check \"**/*.{css,js,md,scss}\"",
+    "gather-deploy-files": "sh ./tools/deploy.sh",
     "lint": "eslint .",
     "lint:staged": "eslint",
     "prebuild": "gulp clean",

diff --git a/packages/components/tools/deploy.sh b/packages/components/tools/deploy.sh
@@ -0,0 +1,27 @@
+#!/bin/sh
+
+set -e
+
+echo "Building carbon-components for deployment..."
+
+# Start in tools/ even if run from root directory
+cd "$(dirname "$0")"
+
+# Go to root
+cd ..
+
+SRC_DIR=./demo
+DEST_DIR=../../demo/components
+
+yarn build-dev-rollup
+rm -Rf $DEST_DIR
+mkdir -p $DEST_DIR
+cp -r $SRC_DIR/code $DEST_DIR/
+cp -r $SRC_DIR/component $DEST_DIR/
+cp $SRC_DIR/demo.css $DEST_DIR/
+cp $SRC_DIR/demo.css.map $DEST_DIR/
+cp $SRC_DIR/demo.min.js $DEST_DIR/
+cp $SRC_DIR/feature-flags.js $DEST_DIR/
+cp $SRC_DIR/index.html $DEST_DIR/
+
+echo "Success! 🎉"