docs(tokens): fix copy link url (#1210)

* fix(tokens): include category on token copy link * docs: token data refactor --------- Co-authored-by: Benny Powers <[email protected]> Co-authored-by: Benny Powers <[email protected]>
RedHat-UX · Sep 21, 2023 · b65a1f5 · b65a1f5
1 parent 21c1772
commit b65a1f5
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 8 deletions.
diff --git a/docs/_data/tokens.cjs b/docs/_data/tokens.cjs
diff --git a/docs/_plugins/tokens.cjs b/docs/_plugins/tokens.cjs
@@ -1,6 +1,9 @@
 const { readFile } = require('node:fs/promises');
 const { join } = require('node:path');
 
+const tokensJSON = require('@rhds/tokens/json/rhds.tokens.json');
+const tokensFlat = require('@rhds/tokens/json/rhds.tokens.flat.json');
+
 const getDocs = (x, options) => x?.$extensions?.[options.docsExtension];
 const capitalize = x => `${x.at(0).toUpperCase()}${x.slice(1)}`;
 
@@ -75,7 +78,7 @@ function copyCell(token, variable) {
         <code slot="content">${variable}</code>
       </rh-tooltip>
       <rh-tooltip position="left-start">
-        <button class="copy-button" data-copy="https://ux.redhat.com/tokens/#${token.name}">
+        <button class="copy-button" data-copy="https://ux.redhat.com/tokens/${token.attributes?.category}/#${token.name}">
           <!--! Font Awesome Pro 6.1.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. -->
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512">
             <path d="M172.5 131.1C228.1 75.51 320.5 75.51 376.1 131.1C426.1 181.1 433.5 260.8 392.4 318.3L391.3 319.9C381 334.2 361 337.6 346.7 327.3C332.3 317 328.9 297 339.2 282.7L340.3 281.1C363.2 249 359.6 205.1 331.7 177.2C300.3 145.8 249.2 145.8 217.7 177.2L105.5 289.5C73.99 320.1 73.99 372 105.5 403.5C133.3 431.4 177.3 435 209.3 412.1L210.9 410.1C225.3 400.7 245.3 404 255.5 418.4C265.8 432.8 262.5 452.8 248.1 463.1L246.5 464.2C188.1 505.3 110.2 498.7 60.21 448.8C3.741 392.3 3.741 300.7 60.21 244.3L172.5 131.1zM467.5 380C411 436.5 319.5 436.5 263 380C213 330 206.5 251.2 247.6 193.7L248.7 192.1C258.1 177.8 278.1 174.4 293.3 184.7C307.7 194.1 311.1 214.1 300.8 229.3L299.7 230.9C276.8 262.1 280.4 306.9 308.3 334.8C339.7 366.2 390.8 366.2 422.3 334.8L534.5 222.5C566 191 566 139.1 534.5 108.5C506.7 80.63 462.7 76.99 430.7 99.9L429.1 101C414.7 111.3 394.7 107.1 384.5 93.58C374.2 79.2 377.5 59.21 391.9 48.94L393.5 47.82C451 6.731 529.8 13.25 579.8 63.24C636.3 119.7 636.3 211.3 579.8 267.7L467.5 380z"/>
@@ -215,8 +218,11 @@ function getTokenDocs(path) {
  * @param {PluginOptions} [pluginOptions={}]
  */
 module.exports = function RHDSPlugin(eleventyConfig, pluginOptions = { }) {
+  eleventyConfig.addGlobalData('tokens', tokensJSON);
+  eleventyConfig.addGlobalData('tokenCategories', require('./tokenCategories.json'));
+
   eleventyConfig.addCollection('token', function() {
-    const cats = eleventyConfig.globalData?.tokenCategories ?? require('./tokenCategories.json');
+    const cats = eleventyConfig.globalData?.tokenCategories;
     return cats.map(cat => {
       const docs = getTokenDocs(cat.path ?? cat.slug);
       const title = docs?.heading ?? cat.slug.replaceAll('-', ' ');
@@ -235,12 +241,9 @@ module.exports = function RHDSPlugin(eleventyConfig, pluginOptions = { }) {
 
   eleventyConfig.addShortcode('category',
     async function category(options = {}) {
+      options.tokens ??= await eleventyConfig.globalData.tokens;
       options.attrs ??= pluginOptions.attrs ?? (() => '');
-      options.docsExtension ??= pluginOptions.docsExtension ?? 'com.redhat.ux';
-
-      const tokens = require('@rhds/tokens/json/rhds.tokens.json');
 
-      const isLast = options.isLast ?? false;
       const parentName = options.parentName ?? '';
 
       const path = options.path ?? '.';
@@ -249,7 +252,7 @@ module.exports = function RHDSPlugin(eleventyConfig, pluginOptions = { }) {
       const include = Array.isArray(options.include) ? options.include : [options.include].filter(Boolean);
 
       const name = options.name ?? path.split('.').pop();
-      const { parent, key } = getParentCollection(options, tokens);
+      const { parent, key } = getParentCollection(options, eleventyConfig.globalData.tokens);
       const collection = parent[key];
       const docs = getDocs(collection, options);
       const heading = docs?.heading ?? capitalize(name.replace('-', ' '));