feat(pv-stylemark): add info regarding the source of the components s…

…tyleguide to the new stlymark this will allow in multi-tenant codebases for easier distinguishing between component with the same name
pro-vision · Apr 10, 2024 · 59deaac · 59deaac
1 parent 9afa746
commit 59deaac
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 0 deletions.
diff --git a/packages/pv-stylemark/tasks/lsg/getLsgData.js b/packages/pv-stylemark/tasks/lsg/getLsgData.js
@@ -33,6 +33,7 @@ const { resolveApp, getAppConfig } = require("../../helper/paths");
  * @typedef {{
  *  componentName: string;
  *  componentPath: string;
+ *  srcPath: string;
  *  options: Object;
  *  description: string;
  *  examples: Array<StyleMarkExampleData>;
@@ -90,6 +91,7 @@ const getLsgDataForPath = async (markdownPath) => {
   const { name, dir } = pathParse(markdownPath);
   const componentsSrc = resolveApp(getAppConfig().componentsSrc);
   const componentPath = relPath(componentsSrc, dir);
+  const srcPath = relPath(componentsSrc, markdownPath);
 
   const { attributes: frontmatterData, body: fileContentBody } = frontmatter(fileContent);
 
@@ -112,6 +114,7 @@ const getLsgDataForPath = async (markdownPath) => {
   return {
     componentName: name,
     componentPath,
+    srcPath,
     options: frontmatterData,
     description,
     examples: exampleData,

diff --git a/packages/pv-stylemark/tasks/templates/lsg-component.hbs b/packages/pv-stylemark/tasks/templates/lsg-component.hbs
@@ -1,5 +1,9 @@
 <section class="dds-component" id="{{componentName}}">
   <h2 class="dds-component__name">{{options.name}}</h2>
+  <h2 class="dds-component__source theme-content-element-source">
+    <span class="dds-component__source-label theme-content-element-source-label">Source:</span>
+    <span class="dds-component__source-path theme-content-element-source-path">{{srcPath}}</span>
+  </h3>
   <div class="dds-component__description">
 {{{description}}}
   </div>

diff --git a/packages/pv-stylemark/ui/components/dds-component/dds-component.scss b/packages/pv-stylemark/ui/components/dds-component/dds-component.scss
@@ -11,6 +11,23 @@
     margin: 0 0 24px;
   }
 
+  &__source {
+    margin-bottom: 24px;
+    font-size: 14px;
+    font-weight: normal;
+    color: $dds-color__black-040;
+  }
+
+  &__source-label {
+    margin-right: 4px;
+    font-weight: 700;
+    text-transform: uppercase;
+  }
+
+  &__source-path {
+    font-family: Courier, monospace;
+  }
+
   &__description {
     h1 {
       @extend %dds-typo__headline-1;