new 250

.gitignore

@@ -16,6 +16,7 @@
 !/.stylestatsrc
 !/.travis.yml
 !/.storybook
+!/.npmrc
 
 # Add a .gitkeep file in an empty
 # directory to check it in the repository

.npmrc

@@ -0,0 +1 @@
+engine-strict=true

.storybook/main.js

@@ -1,15 +1,17 @@
 require("@babel/register");
 const path = require("path");
 const gulp = require("gulp");
+const CaseSensitivePathsPlugin = require("case-sensitive-paths-webpack-plugin");
 const NewportSassWatcherPlugin = require("./sass-watcher-plugin");
 require("../scripts/gulp/styles");
 
-// const createCompiler = require("@storybook/addon-docs/mdx-compiler-plugin");
-
 module.exports = {
   stories: [
-    "../ui/**/*.stories.@(js|mdx)",
-    "../docs/**/*.stories.js",
+    "../ui/*/*.stories.js",
+    "../ui/*/*/*.stories.js",
+    "../ui/*/*/*/*.stories.js",
+    "../ui/*/*/*/*/*.stories.js",
+    "../docs/*.stories.js",
   ],
   addons: [
     "@storybook/addon-knobs",
@@ -20,36 +22,13 @@ module.exports = {
     serverConfig.module.rules.push({
       test: /\.(scss|yml)$/,
       loaders: ["raw-loader"],
+      exclude: [/node_modules/],
       include: path.resolve(__dirname, "../"),
     });
 
-    serverConfig.module.rules.push({
-      // 2a. Load `.stories.mdx` / `.story.mdx` files as CSF and generate
-      //     the docs page from the markdown
-      test: /\.(stories|story)\.mdx$/,
-      use: [
-        {
-          loader: "babel-loader",
-          // may or may not need this line depending on your app's setup
-          options: {
-            plugins: ["@babel/plugin-transform-react-jsx"],
-          },
-        },
-        // {
-        //   loader: "@mdx-js/loader",
-        //   options: {
-        //     compilers: [createCompiler({})],
-        //   },
-        // },
-      ],
-    });
-
-    serverConfig.module.rules.push({
-      test: /\.(stories|story)\.[tj]sx?$/,
-      loader: require.resolve("@storybook/source-loader"),
-      exclude: [/node_modules/],
-      enforce: "pre",
-    });
+    serverConfig.plugins = serverConfig.plugins.filter(plugin => {
+      return !(plugin instanceof CaseSensitivePathsPlugin);
+    })
 
     serverConfig.plugins.push(new NewportSassWatcherPlugin());
     // Sass
@@ -58,6 +37,7 @@ module.exports = {
     serverConfig.node = {
       fs: "empty",
     };
+
     return serverConfig;
-  },
+  }
 };

.storybook/preview-head.html

@@ -1,4 +1,5 @@
 <link rel="stylesheet" href="node_modules/highlight.js/styles/github.css"/>
+<link id="nds-styles" rel="stylesheet" href="/assets/styles/index.css"></link>
 <style>
   #root {
     margin: 1rem;
@@ -24,3 +25,23 @@
     /* THE ABOVE OVERRIDE IS PURELY FOR THE EXAMPLES IN STORYBOOK */
   }
 </style>
+<script>
+  (function() {
+    const storybookEventSource = new EventSource(`${location.protocol}//${location.host}/__webpack_hmr`);
+    const newportStorybookStyles = document.getElementById('nds-styles');
+    storybookEventSource.onmessage = (event) => {
+      if (event.data) {
+        try {
+          const data = JSON.parse(event.data);
+          if (data.action === 'built') {
+            setTimeout(() => {
+              newportStorybookStyles.href = `/assets/styles/index.css?${Date.now()}`;
+            }, 250);
+          }
+        } catch (e) {
+          // ignore
+        }
+      }
+    };
+  })();
+</script>

.storybook/preview.js

@@ -1,16 +1,12 @@
-import { addParameters, addDecorator } from "@storybook/html";
-import { withDesignTokens } from "../scripts/storybook/design-tokens";
-// import { DocsPage, DocsContainer } from "@storybook/addon-docs/blocks";
-
-// import { setCustomElements } from "@storybook/web-components";
-// import customElements from "../custom-elements.json";
-
-// setCustomElements(customElements);
-
-import "../assets/styles/index.css";
+import {
+  addParameters,
+  addDecorator
+} from "@storybook/html";
+import {
+  withDesignTokens
+} from "../scripts/storybook/design-tokens";
 
 addDecorator(withDesignTokens);
-//addDecorator(withA11y);
 
 addParameters({
   options: {
@@ -19,8 +15,4 @@ addParameters({
     showPanel: true,
     hierarchySeparator: /\//
   },
-  // docs: {
-  //   container: DocsContainer,
-  //   page: DocsPage,
-  // },
 });

.storybook/sass-watcher-plugin.js

@@ -1,15 +1,20 @@
 const gulp = require('gulp');
-const { watchPaths } = require('../scripts/watch');
+const {
+  watchPaths
+} = require('../scripts/watch');
 require('../scripts/gulp/styles');
 
 class NewportSassWatcherPlugin {
   apply(compiler) {
+    let sassWatcher;
     compiler.hooks.watchRun.tap('Newport Sass Compiler', () => {
-      const sassWatcher = gulp.watch(watchPaths.sass, gulp.series('styles:sass'));
+      if (!sassWatcher) {
+        sassWatcher = gulp.watch(watchPaths.sass, gulp.series('styles:sass'));
 
-      sassWatcher.on('change', function(obj, stats) {
-        console.log(`File ${obj} was changed`);
-      });
+        sassWatcher.on('change', function (obj, stats) {
+          console.log(`File ${obj} was changed`);
+        });
+      }
     });
   }
 }

docs/build-deploy.md

@@ -21,17 +21,26 @@ Now log into your org, go to _Setup_ and search for _Static Resources_. Open the
 - `Cache Control` - Choose `Public`
 
 Hit _Save_ and it will create your static resource.
+## 3.Setting the default Newport for your org
+### 3.1 By Static Resource name
 
-## 3. (105+ release) Setting the default Newport for your org
+Go to Settings in your org and query for Custom Settings. Look for "UISetting", click "Manage" and add a new entry with the following values:
+- `Name` - `newportStaticResource`
+- `Key` - `NULL`
+- `Value` - The name of your staticresource.
+
+***NOTE:*** If you're in an OmniStudio package instead of doing this in "UISetting" instead you'll need to do it in "Omni Interaction Config" in the "Settings" of your org.
 
-From release 105 upwards we've simplified how Newport can be overridden in an entire org using a single Custom Setting. For pre-105 orgs please see alternative steps using custom VF pages below.
+### 3.2 By Static Resource URL
 
-In a 105 org go to Settings in your org and query for Custom Settings. Look for "UISetting", click "Manage" and add a new entry with the following values:
+Go to Settings in your org and query for Custom Settings. Look for "UISetting", click "Manage" and add a new entry with the following values:
 
 - `Name` - `newportZipUrl`
 - `Key` - `NULL`
 - `Value` - You will need to go to the staticresource you uploaded in step 2. Right click on `view file` in your browser and from the context menu choose `Copy Link Address`:
 
+***NOTE:*** If you're in an OmniStudio package instead of doing this in "UISetting" instead you'll need to do it in "Omni Interaction Config" in the "Settings" of your org.
+
 ![Preview tool](./docs/copy_link_address_of_static_resource.png)
 
 Now paste this value into `Value` field and you will need to edit it to be in the format: `/resource/{sobjectid}/{ns_}ResourceName`.
@@ -40,67 +49,18 @@ So for example in my org my clipboard gave me: `https://vloc-ouidesigner-dev-ed-
 
 Save this and load your omniscript with the Newport theme option. You should now see it with your custom version loaded. This will work the same for Cards using the URL parameter `vlocitytheme=newport` or in Vlocity Lightning components that set the `theme` to `Newport`.
 
-### (105+ release) Other deployment options
+### 3.3 Other deployment options
 
-With 105+ release you can change the value in `newportZipUrl` to point to any hosted version of newport. This means you can deploy Newport to a CDN you might have and provide the address to it hosted there in the `value` field. The important thing to maintain is the directory structure of the zip `newport-design-system.zip` file. The Vlocity package will simply try to append the known directories to the value in `newportZipUrl`. So if you provide a CDN url like: `https://www.acme.com/cdn/newport`, then Vlocity will try to load the stylesheets from `https://www.acme.com/cdn/newport/assets/styles/vlocity-newport-design-system.min.css`.
+You can change the value in `newportZipUrl` to point to any hosted version of newport. This means you can deploy Newport to a CDN you might have and provide the address to it hosted there in the `value` field. The important thing to maintain is the directory structure of the zip `newport-design-system.zip` file. The Vlocity package will simply try to append the known directories to the value in `newportZipUrl`. So if you provide a CDN url like: `https://www.acme.com/cdn/newport`, then Vlocity will try to load the stylesheets from `https://www.acme.com/cdn/newport/assets/styles/vlocity-newport-design-system.min.css`.
 
 To re-iterate **do not change the folder structure and file names in the generated zip file**.
 
-## Pre 105 release
-
-In older releases there are several manual steps that need to be followed in order to switch to your custom version of Newport:
-
-### Adding to a custom OmniScript Page
-
-Now go to _Setup_ and search _Visualforce Pages_ and click _New_.
-
-- `Label` - choose an appropriate name, for example `OmniScriptNDS`
-- `Name` - Make a note of this you will need it for Step 4. I recommend leaving it as the default Salesforce generates for you.
-- `Description` - Optional
-- `Available for Lightning Experience, Lightning Communities, and the mobile app` - Check this
-- `Require CSRF protection on GET requests` - Optional
+### 3.4 Enforce use of scoped styles
 
-For the contents enter:
+If you want to always use Newport's scoped styles then you can set:
 
-```
-<apex:page standardStylesheets="false"
-           showHeader="false"
-           sidebar="false"
-           docType="html-5.0"
-           lightningStylesheets="true"
-           controller="vlocity_ins.VFPageControllerBase"
-           applyHtmlTag="false"
-           applyBodyTag="false"
-           language="{!$CurrentPage.parameters.LanguageCode}">
-    <html xmlns:xlink="http://www.w3.org/1999/xlink">
-        <head>
-            <meta name="viewport"
-                  content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=0" />
-            <link rel="stylesheet" href="{!URLFOR($Resource.newportdesignsystem, '/assets/styles/vlocity-newport-design-system.css')}" />
-        </head>
-
-        <body >
-            <div ng-app="OmniScriptUniversal" class="vlocity via-nds">
-                <vlc-slds-lightning-banner title="OmniScriptTitle"></vlc-slds-lightning-banner>
-                <vlocity_ins:BusinessProcessComponent strOmniScriptId="{!$CurrentPage.parameters.designerPreviewId}"
-                                                     previewMode="{!$CurrentPage.parameters.previewEmbedded}"
-                                                     scriptLayout="newport"
-                                                     strCSSFileList="[]" />
-                <script type="text/javascript">
-                    var modules = ['vlocity-business-process'];
-                    var myModule = angular.module('OmniScriptUniversal', modules);
-                </script>
-            </div>
-            <vlocity_ins:VFActionFunction />
-        </body>
-   </html>
-</apex:page>
-```
-
-NOTE: If you're using our CMT package then change `vlocity_ins` to be `vlocity_cmt`. If you're using our PS package then change `vlocity_ins` to be `vlocity_ps`.
-
-Hit _Save_.
-
-Now head over to the _Vlocity Omniscript Designer_ and open your OmniScript. In the _Script Configuration_ find the _Visualforce Pages Available In Preview_ property and click _Add New Visualforce Page For Preview_. In the first column enter the `Name` of your Visualforce page from step 3. In the second column enter `c__{NAME OF YOUR VF PAGE}`. The `c__` is important for the designer to be able to load the Visualforce page.
+- `Name` - `newportUseScopedStyles`
+- `Key` - `NULL`
+- `Value` - `true`
 
-With the changes done, click the _Preview_ tab and on the top right change the drop down to be your Visualforce page name. You should now be looking at your OmniScript rendered with the newport css you generated!
+This will ensure that the scoped css file is loaded. All rules in the scoped css file are prefixed with `.via-nds` class selector which means you also need that class in your DOM tree in a parent element to have the styles enforce. This is useful to ensure your newport styles to don't leak out and affect other parts of the page you're not expecting them to.

docs/docs.stories.js

@@ -4,6 +4,7 @@ import gettingStarted from './getting-started.md';
 import introToNewport from './introduction-to-newport.md';
 import buildDeploy from './build-deploy.md';
 import customizeAButton from './customizing-a-button.md';
+import salesforceImagery from './salesforce-imagery.md';
 import { renderAsMarkdown } from '..././../../scripts/storybook';
 
 storiesOf(`${base}`.replace(/(^\/)|(\/$)/g, ''),  module)
@@ -19,4 +20,7 @@ storiesOf(`${base}`.replace(/(^\/)|(\/$)/g, ''),  module)
   })
   .add('How to customize a button', () => {
     return customizeAButton;
+  })
+  .add('CSS Zen Garden - Creating the Salesforce Imagery customizations', () => {
+    return salesforceImagery;
   });