feat: add technology tags to documentation

CHANGELOG.md

@@ -55,7 +55,7 @@ Changes that are not related to specific components
 
 #### Added
 
-- [Component] What is added?
+- Technology tags to all components
 
 #### Changed
 

site/scripts/scaffold.js

@@ -47,7 +47,7 @@ const createComponentFiles = (templatePath, destination, name, pathName) => {
 
 }
 
-const appendToComponentsData = (name, description, pathName) => {
+const appendToComponentsData = (name, description, pathName, isCoreComponent) => {
   try {
     const newDataObject = {
       name,
@@ -60,7 +60,8 @@ const appendToComponentsData = (name, description, pathName) => {
         alt: `An illustration of the ${name} component.`,
         height: 180,
         width: 280
-      }
+      },
+      tags: ["react", ...(isCoreComponent ? ["core"] : [])]
     };
 
     const componentsDataPath = path.resolve(__dirname, '../src/data/components.json');
@@ -91,6 +92,12 @@ const scaffold = async () => {
     validate: (input) => (input.split(' ').length > 2 ? true : `Description not long enough: ${input}`)
   });
 
+  const { isCoreComponent } = await inquirer.prompt({
+    type: 'confirm',
+    name: 'isCoreComponent',
+    message: 'Is there also a core component?',
+  });
+
   const pathName = name.split(/(?=[A-Z])/).join('-').toLowerCase();
   const path = createFolder(`src/docs/components/${pathName}`);
 
@@ -100,7 +107,7 @@ const scaffold = async () => {
 
   logStep(`${chalk.bold(`Created files:`)}\n\t${chalk.italic(files.join('\n\t'))}`);
 
-  appendToComponentsData(name, description, pathName);
+  appendToComponentsData(name, description, pathName, isCoreComponent);
 
   logStep(`${chalk.bold(`${name} component included in components.json.`)}`);
 

site/src/components/LinkboxList.js

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { navigate, withPrefix } from 'gatsby';
 import { Linkbox } from 'hds-react';
 import PropTypes from 'prop-types';
+import TechTags from './TechTags';
 
 import './LinkboxList.scss';
 
@@ -28,7 +29,9 @@ const LinkboxList = ({ data, className }) => (
                 navigate(item.href);
               }
             }}
-          />
+          >
+            <TechTags componentName={item.name} withoutHeading />
+          </Linkbox>
         </div>
       );
     })}

site/src/components/LinkboxList.scss

@@ -4,7 +4,7 @@
   column-gap: var(--spacing-layout-xs);
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(216px, 1fr));
-  margin-top: var(--spacing-layout-m) !important;
+  margin-top: var(--spacing-layout-xs) !important;
   row-gap: var(--spacing-layout-xs);
   width: 100%;
 }

site/src/components/TechTags.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import { Tag } from 'hds-react';
+import PropTypes from 'prop-types';
+import componentData from '../data/components.json';
+
+const tagStyles = {
+  core: { label: 'Core', theme: { '--background-color': 'var(--color-copper-medium-light)' } },
+  react: { label: 'React', theme: { '--background-color': 'var(--color-fog-medium-light)' } },
+  js: { label: 'Vanilla JS', theme: { '--background-color': 'var(--color-engel)' } },
+};
+
+export const TechTags = ({ componentName, withoutHeading }) => {
+  const componentTags = componentData.find((item) => item.name === componentName)?.tags;
+
+  return (
+    <>
+      {!withoutHeading && <h4 className="heading-s">Available technologies</h4>}
+      {componentTags && (
+        <div style={{ display: 'flex', gap: 'var(--spacing-2-xs)' }}>
+          {componentTags.map(
+            (tag) =>
+              tagStyles?.[tag] && (
+                <Tag key={tag} theme={tagStyles[tag]?.theme}>
+                  {tagStyles[tag]?.label}
+                </Tag>
+              ),
+          )}
+        </div>
+      )}
+    </>
+  );
+};
+
+TechTags.propTypes = {
+  componentName: PropTypes.string.isRequired,
+  withoutHeading: PropTypes.bool,
+};
+
+export default TechTags;