Merge pull request #1553 from jadu/docs-pulsar-update

Fix pulsar css and js includes within documentation
jadu · Aug 22, 2024 · f6a9ddc · f6a9ddc
2 parents eb13917 + 1e5e925
commit f6a9ddc
Show file tree

Hide file tree

Showing 17 changed files with 104,232 additions and 194 deletions.
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -511,7 +511,6 @@ module.exports = function(grunt) {
         'autoprefixer',
         'browserify:dev',
         'browserify:lexicon',
-        'browserSync',
         'watch'
     ]);
 

diff --git a/docs/docs/components/button.mdx b/docs/docs/components/button.mdx
@@ -83,7 +83,7 @@ The text label you use for a button should be clear enough for any user to under
 If the button relates to an action, the label should ideally be a verb, use the common state classes to reinforce dangerous or destructive actions with colour, but don't rely on colour alone to communicate a button’s intention.
 
 <div className="d-example">
-  <button className="btn btn--primary">New Thing</button> <button className="btn btn--primary">Save</button> <button className="btn">Edit</button> <button className="btn">Copy</button> <button className="btn">Show</button> <button className="btn">Hide</button>  <button className="btn btn--danger">Delete</button>
+  <button className="btn btn--primary">New Thing</button>&nbsp;<button className="btn btn--primary">Save</button>&nbsp;<button className="btn">Edit</button>&nbsp;<button className="btn">Copy</button>&nbsp;<button className="btn">Show</button>&nbsp;<button className="btn">Hide</button>&nbsp;<button className="btn btn--danger">Delete</button>
 </div>
 
 Other recommendations for labelling your buttons include:
@@ -94,12 +94,12 @@ Other recommendations for labelling your buttons include:
       <button className="btn btn--primary">New Document</button>
     </div>
     <div className="d-guidelines-label"><em className="d-guidelines-label__title">Do</em> use title case</div>
-    <div className="d-guidelines__block d-guidelines__block--not">
-      <div className="d-guidelines-preview">
-        <button className="btn btn--primary">New document</button> <button className="btn btn--danger">DELETE</button>
-      </div>
-      <div className="d-guidelines-label"><em className="d-guidelines-label__title">Don’t</em> use sentence case or all caps</div>
+  </div>
+  <div className="d-guidelines__block d-guidelines__block--not">
+    <div className="d-guidelines-preview">
+      <button className="btn btn--primary">New document</button>&nbsp;<button className="btn btn--danger">DELETE</button>
     </div>
+    <div className="d-guidelines-label"><em className="d-guidelines-label__title">Don’t</em> use sentence case or all caps</div>
   </div>
 </div>
 
@@ -127,7 +127,7 @@ If an action relates to creating new items of content, use 'New', Do not use 'Cr
 If a button triggers more than one action you should communicate the chain of events to the user, ideally in the order in which they will happen. This helps users to build a mental model of what is happening when they push a button.
 
 <div className="d-example">
-  <button className="btn btn--primary">Save Changes and Publish Now</button> <button className="btn btn--primary">Save Changes and Submit for Proofing</button> <button className="btn btn--danger">Reset Password and Notify User</button>
+  <button className="btn btn--primary">Save Changes and Publish Now</button>&nbsp;<button className="btn btn--primary">Save Changes and Submit for Proofing</button> <button className="btn btn--danger">Reset Password and Notify User</button>
 </div>
 
 ## Using icons

diff --git a/docs/docs/guides/getting-started.mdx b/docs/docs/guides/getting-started.mdx
@@ -10,46 +10,46 @@ As a Jadu designer or developer, you’re probably working on one or more of the
 
 ## Team
 
-<div class="row">
-  <div class="col col--6 margin-bottom--lg">
-    <div class="card card--full-height">
-      <div class="card__header">
-        <div class="avatar avatar--vertical">
-          <img class="avatar__photo avatar__photo--xl" src="https://avatars.githubusercontent.com/u/18653?v=4" />
-          <div class="avatar__intro">
-            <h3 class="avatar__name">Paul Stanton</h3>
+<div className="row">
+  <div className="col col--6 margin-bottom--lg">
+    <div className="card card--full-height">
+      <div className="card__header">
+        <div className="avatar avatar--vertical">
+          <img className="avatar__photo avatar__photo--xl" src="https://avatars.githubusercontent.com/u/18653?v=4" />
+          <div className="avatar__intro">
+            <h3 className="avatar__name">Paul Stanton</h3>
           </div>
         </div>
       </div>
-      <div class="card__body">
+      <div className="card__body">
         Head of User Experience @jadu
       </div>
-      <div class="card__footer">
-        <div class="button-group button-group--block">
-          <a class="button button--secondary" href="https://github.com/stanton">GitHub</a>
+      <div className="card__footer">
+        <div className="button-group button-group--block">
+          <a className="button button--secondary" href="https://github.com/stanton">GitHub</a>
         </div>
       </div>
     </div>
   </div>
-  <div class="col col--6 margin-bottom--lg">
-    <div class="card card--full-height">
-      <div class="card__header">
-        <div class="avatar avatar--vertical">
+  <div className="col col--6 margin-bottom--lg">
+    <div className="card card--full-height">
+      <div className="card__header">
+        <div className="avatar avatar--vertical">
           <img
-            class="avatar__photo avatar__photo--xl"
+            className="avatar__photo avatar__photo--xl"
             src="https://avatars.githubusercontent.com/u/756393?v=4"
           />
-          <div class="avatar__intro">
-            <h3 class="avatar__name">James Jacobs</h3>
+          <div className="avatar__intro">
+            <h3 className="avatar__name">James Jacobs</h3>
           </div>
         </div>
       </div>
-      <div class="card__body">
+      <div className="card__body">
         Accessibility Lead
       </div>
-      <div class="card__footer">
-        <div class="button-group button-group--block">
-          <a class="button button--secondary" href="https://github.com/jamesjacobs">GitHub</a>
+      <div className="card__footer">
+        <div className="button-group button-group--block">
+          <a className="button button--secondary" href="https://github.com/jamesjacobs">GitHub</a>
         </div>
       </div>
     </div>

diff --git a/docs/docusaurus.config.js b/docs/docusaurus.config.js
@@ -52,6 +52,11 @@ const config = {
     ],
   ],
 
+  scripts: [
+    'js/bundle.js',
+    'js/main.js',
+  ],
+
   themeConfig:
     /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
     ({
@@ -93,7 +98,7 @@ const config = {
         copyright: `Copyright © ${new Date().getFullYear()} Jadu Ltd. Built with Docusaurus.`,
       },
       prism: {
-        theme: prismThemes.github,
+        theme: prismThemes.dracula,
         darkTheme: prismThemes.dracula,
       },
     }),

diff --git a/docs/src/css/custom.scss b/docs/src/css/custom.scss
@@ -21,6 +21,8 @@ $font-family-brands:  'Font Awesome 6 Brands';
 $fa-font-path: '/static/fonts/fontawesome-free-6.0.0-web/webfonts';
 $fa-css-prefix: 'icon';
 
+@use '../../../stylesheets/function.color' as colorFunctions;
+
 @import '/static/fonts/fontawesome-free-6.0.0-web/scss/fontawesome';
 @import '/static/fonts/fontawesome-free-6.0.0-web/scss/regular';
 @import '/static/fonts/fontawesome-free-6.0.0-web/scss/solid';
@@ -33,9 +35,6 @@ $fa-css-prefix: 'icon';
 
 // Functions
 @import '../../../stylesheets/function.math';
-@import '../../../stylesheets/function.color-luminance';
-@import '../../../stylesheets/function.pick-best-color';
-@import '../../../stylesheets/function.color';
 
 // $font-path: '/static/fonts/';
 @font-face {
@@ -227,7 +226,9 @@ $fa-css-prefix: 'icon';
     --ifm-color-primary-light: #dd3b40;
     --ifm-color-primary-lighter: #de464b;
     --ifm-color-primary-lightest: #e4666a;
-
+
+    --docusaurus-highlighted-code-line-bg: #f19d9e;
+
     .theme-doc-sidebar-container {
         background-color: var(--ifm-navbar-background-color);
     }
@@ -238,58 +239,29 @@ $fa-css-prefix: 'icon';
     --ifm-menu-color: #000;
 }
 
-//     // --ifm-global-shadow-lw: none;
-
-//     // --jadu-purple: #3e4994;
-
-//     // --ifm-background-surface-color: var(--jadu-purple);
-//     // --ifm-navbar-link-color: #fff;
-//     // --ifm-navbar-link-hover-color: #fff;
-
-//     // --ifm-menu-color-active: var(--jadu-purple);
-
-//     // --ifm-heading-color: var(--jadu-purple);
-
-//     // --ifm-card-background-color: #fff;
-//     // --ifm-container-width: 1300px;
-
-//     // --ifm-table-border-width: 0;
-
-//     // --ifm-alert-color: #000;
-// }
-
-// body {
-//     font-size: 16px;
-// }
+main {
+    --ifm-tabs-padding-vertical: 5px;
+    --ifm-tabs-padding-horizontal: 10px;
+}
 
 table {
     display: table;
     width: 100%;
 }
 
-// .hero--primary {
-//     --ifm-hero-background-color: #fff;
-//     --ifm-hero-text-color: var(--ifm-font-color-base);
-
-//     padding: 2rem 0 1rem;
-// }
-
-// .hero__title {
-//     margin-bottom: 0;
-// }
-
-// .admonition h5 {
-//     color: var(--ifm-alert-color);
-// }
-
 .d-example {
-    border: 1px solid #ccc;
+    border: 1px dashed #ccc;
     margin-bottom: 1em;
     padding: 1em;
     width: 100%;
 
+    * {
+        all: revert;
+    }
+
     h1, h2, h3, h4, h5, h6 {
         color: unset;
+        font-weight: normal;
     }
 
     ul, ol {
@@ -314,10 +286,13 @@ table {
 }
 
 .d-guidelines-preview {
-    // background-color: #f5f5f5;
     border: 1px solid #ccc;
     margin-bottom: .75em;
     padding: 1em;
+
+    > p {
+        margin: 0;
+    }
 }
 
 .d-guidelines-label__title {
@@ -344,47 +319,6 @@ table {
     }
 }
 
-// .u-float-left {
-//     float: left;
-// }
-
-// .docusaurus-highlight-code-line {
-//     background-color: rgb(72, 77, 91);
-//     display: block;
-//     margin: 0 calc(-1 * var(--ifm-pre-padding));
-//     padding: 0 var(--ifm-pre-padding);
-// }
-
-// table {
-//     display: table;
-// }
-
-// table:not(.table) {
-//   display: table;
-
-//   th {
-//     background-color: var(--jadu-purple);
-//     border: 1px solid var(--jadu-purple);
-//     color: #fff;
-//   }
-
-//   td {
-//     border: 1px solid #ccc;
-//   }
-// }
-
-// html[data-theme='dark'] {
-//     --ifm-heading-color: white;
-
-//     .d-example .control__label {
-//         color: white;
-//     }
-
-//     table:not(.table) th {
-//         background-color: black;
-//     }
-// }
-
 .product-support {
     ul {
         list-style-type: none;

diff --git a/docs/src/theme/Layout/index.js b/docs/src/theme/Layout/index.js
@@ -0,0 +1,11 @@
+import React from 'react';
+import Layout from '@theme-original/Layout';
+
+export default function LayoutWrapper(props) {
+  return (
+    <>
+      <div className="flash-container js-flash-container"></div>
+      <Layout {...props} />
+    </>
+  );
+}
diff --git a/docs/src/theme/prism-include-languages.js b/docs/src/theme/prism-include-languages.js
@@ -0,0 +1,23 @@
+import siteConfig from '@generated/docusaurus.config';
+export default function prismIncludeLanguages(PrismObject) {
+  const {
+    themeConfig: {prism},
+  } = siteConfig;
+  const {additionalLanguages} = prism;
+  // Prism components work on the Prism instance on the window, while prism-
+  // react-renderer uses its own Prism instance. We temporarily mount the
+  // instance onto window, import components to enhance it, then remove it to
+  // avoid polluting global namespace.
+  // You can mutate PrismObject: registering plugins, deleting languages... As
+  // long as you don't re-assign it
+  globalThis.Prism = PrismObject;
+  additionalLanguages.forEach((lang) => {
+    if (lang === 'php') {
+      // eslint-disable-next-line global-require
+      require('prismjs/components/prism-markup-templating.js');
+    }
+    // eslint-disable-next-line global-require, import/no-dynamic-require
+    require(`prismjs/components/prism-${lang}`);
+  });
+  delete globalThis.Prism;
+}
diff --git a/docs/static/examples/dropdown-button-basic.html b/docs/static/examples/dropdown-button-basic.html
@@ -0,0 +1,7 @@
+<div className="btn__group dropdown">
+    <button aria-haspopup="true" aria-expanded="false" aria-controls="guid-1404002197" data-toggle="dropdown" className="btn dropdown__toggle">My Action&nbsp;<span className="caret"></span></button>
+    <ul id="guid-1404002197" className="dropdown__menu pull-left">
+        <li><a href="#foo">Foo</a></li>
+        <li><a href="#bar">Bar</a></li>
+    </ul>
+</div>