[DW-3497] Descriptor isolated placement

src/nhsd/components/atoms/_index.scss

@@ -22,3 +22,4 @@
 @use "selector-toggle";
 @use "summary-list";
 @use "avatar";
+@use "descriptors";

src/nhsd/components/atoms/descriptors/_index.scss

@@ -0,0 +1,11 @@
+%digital-heading {
+  color: #231f20;
+  font-family: "FrutigerLTW01-65Bold.woff2", sans-serif;
+  font-size: 32px;
+  font-weight: bold;
+  line-height: 40px;
+}
+
+.digital-descriptor-text {
+  @extend %digital-heading;
+}

src/nhsd/components/atoms/descriptors/descriptors.stories.js

@@ -0,0 +1,35 @@
+// Load storybook config
+import * as sbConfig from '../../../../../.storybook/storybook-config';
+
+// Load template file
+import template from './template.njk';
+
+const componentName = 'Digital descriptor';
+const storyDescription = `${sbConfig.heading.lab}`;
+const sourceCode = `// Sass import \n@use "nhsd/components/atoms/descriptors";
+
+// HTML`;
+
+// Component defaults
+export default {
+  title: `${sbConfig.title.designSystem} / ${sbConfig.title.components} / ${sbConfig.title.atoms} / ${componentName}`,
+  parameters: {
+    docs: {
+      description: {
+        component: storyDescription,
+      },
+    },
+  },
+};
+
+const Template = (args) => template.render({ params: { ...args } });
+
+export const LabComponent = Template.bind({});
+LabComponent.storyName = sbConfig.title.lab;
+LabComponent.parameters = {
+  docs: {
+    source: {
+      code: `${sourceCode}\n${LabComponent()}`,
+    },
+  },
+};

src/nhsd/components/atoms/descriptors/template.njk

@@ -0,0 +1 @@
+<p class="digital-descriptor-text">Digital</p>

src/nhsd/components/atoms/logo/_index.scss

@@ -22,15 +22,3 @@ $-root: ".nhsd-a-logo";
     fill: nhsd-colours.get('black');
   }
 }
-
-%digital-heading {
-  color: #231f20;
-  font-family: "FrutigerLTW01-65Bold.woff2", sans-serif;
-  font-size: 32px;
-  font-weight: bold;
-  line-height: 40px;
-}
-
-.digital-descriptor-text {
-  @extend %digital-heading;
-}

src/nhsd/components/atoms/logo/logo.stories.js

@@ -62,19 +62,3 @@ BlackLogoComponent.parameters = {
     },
   },
 };
-
-export const DigitalComponent = Template.bind({});
-DigitalComponent.storyName = 'Digital Descriptor';
-DigitalComponent.args = {
-  classes: 'digital-descriptor-text',
-};
-DigitalComponent.parameters = {
-  docs: {
-    description: {
-      story: 'A digital descriptor can replace the logo with the class `digital-descriptor-text`',
-    },
-    source: {
-      code: `${sourceCode}\n${DigitalComponent(DigitalComponent.args)}`,
-    },
-  },
-};

src/nhsd/components/atoms/logo/template.njk

@@ -3,6 +3,7 @@
 {%- if params.classes %}
   {% set classNames = classNames + " " + params.classes %}
 {% endif -%}
+
 {%- if params.logo == 'nhse' -%}
 <svg class="{{ classNames }}" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="80" height="60" viewBox="0 0 25.570341 19.900145" version="1.1" id="svg336">
   <defs id="defs330">
@@ -24,8 +25,6 @@
     </g>
   </g>
 </svg>
-{%- elif params.classes == 'digital-descriptor-text' -%}
-<p class="digital-descriptor-text">Digital</p>
 {%- else -%}
 <svg
   class="{{ classNames }}"