@openmrs/esm-implementer-tools-app 5.3.3-pre.1237 → 5.3.3-pre.1247

package/src/configuration/configuration.styles.scss

@@ -1,7 +1,7 @@
-@use "@carbon/styles/scss/spacing";
-@use "@carbon/styles/scss/type";
-@import "~@openmrs/esm-styleguide/src/vars";
-@import "../implementer-tools.styles.scss";
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@import '~@openmrs/esm-styleguide/src/vars';
+@import '../implementer-tools.styles.scss';
 
 .tools {
   width: 100%;

package/src/configuration/configuration.test.tsx

@@ -1,23 +1,16 @@
-import React from "react";
-import "@testing-library/jest-dom";
-import { render, screen, within } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import {
-  implementerToolsConfigStore,
-  temporaryConfigStore,
-  Type,
-} from "@openmrs/esm-framework/src/internal";
-import { Configuration } from "./configuration.component";
-import {
-  useConceptLookup,
-  useGetConceptByUuid,
-} from "./interactive-editor/value-editors/concept-search.resource";
+import React from 'react';
+import '@testing-library/jest-dom';
+import { render, screen, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { implementerToolsConfigStore, temporaryConfigStore, Type } from '@openmrs/esm-framework/src/internal';
+import { Configuration } from './configuration.component';
+import { useConceptLookup, useGetConceptByUuid } from './interactive-editor/value-editors/concept-search.resource';
 
 const mockUseConceptLookup = useConceptLookup as jest.Mock;
 const mockUseGetConceptByUuid = useGetConceptByUuid as jest.Mock;
 
-jest.mock("lodash-es/debounce", () => jest.fn((fn) => fn));
-jest.mock("./interactive-editor/value-editors/concept-search.resource", () => ({
+jest.mock('lodash-es/debounce', () => jest.fn((fn) => fn));
+jest.mock('./interactive-editor/value-editors/concept-search.resource', () => ({
   useConceptLookup: jest.fn().mockImplementation(() => ({
     concepts: [],
     error: null,
@@ -33,18 +26,18 @@ jest.mock("./interactive-editor/value-editors/concept-search.resource", () => ({
 window.URL.createObjectURL = jest.fn();
 
 const mockImplToolsConfig = {
-  "@openmrs/mario": {
+  '@openmrs/mario': {
     hasHat: {
       _type: Type.Boolean,
       _default: true,
       _value: false,
-      _source: "provided",
+      _source: 'provided',
     },
     hatUuid: {
       _type: Type.ConceptUuid,
-      _default: "c64b8446-145e-49a3-98eb-ae37333bedf1",
-      _value: "38c650cf-85d5-41b4-b0b1-46709248acca",
-      _source: "provided",
+      _default: 'c64b8446-145e-49a3-98eb-ae37333bedf1',
+      _value: '38c650cf-85d5-41b4-b0b1-46709248acca',
+      _source: 'provided',
     },
     numberFingers: {
       _type: Type.Number,
@@ -54,27 +47,27 @@ const mockImplToolsConfig = {
     },
     nemesisName: {
       _type: Type.String,
-      _default: "Wario",
-      _value: "Waluigi",
-      _source: "fool",
+      _default: 'Wario',
+      _value: 'Waluigi',
+      _source: 'fool',
     },
     mustacheUuid: {
       _type: Type.UUID,
-      _default: "7e5b9aa1-69fb-45c0-90f5-edc66e23c81d",
-      _value: "181aee4a-5664-42da-8699-c36d28083bd0",
-      _source: "temporary config",
+      _default: '7e5b9aa1-69fb-45c0-90f5-edc66e23c81d',
+      _value: '181aee4a-5664-42da-8699-c36d28083bd0',
+      _source: 'temporary config',
     },
   },
-  "@openmrs/luigi": {
+  '@openmrs/luigi': {
     favoriteNumbers: {
       _type: Type.Array,
       _elements: { _type: Type.Number },
       _default: [0],
       _value: [4, 12],
-      _source: "provided",
+      _source: 'provided',
     },
   },
-  "@openmrs/bowser": {
+  '@openmrs/bowser': {
     minions: {
       _type: Type.Array,
       _elements: {
@@ -83,13 +76,13 @@ const mockImplToolsConfig = {
       },
       _default: [],
       _value: [
-        { name: "goomba", canJump: false },
-        { name: "koopa", canJump: true },
+        { name: 'goomba', canJump: false },
+        { name: 'koopa', canJump: true },
       ],
-      _source: "provided",
+      _source: 'provided',
     },
   },
-  "@openmrs/peach": {
+  '@openmrs/peach': {
     weapons: {
       _type: Type.Object,
       _elements: { _type: Type.Number },
@@ -99,7 +92,7 @@ const mockImplToolsConfig = {
   },
 };
 
-describe("Configuration", () => {
+describe('Configuration', () => {
   afterEach(() => {
     implementerToolsConfigStore.setState({ config: {} });
     temporaryConfigStore.setState({ config: {} });
@@ -109,95 +102,89 @@ describe("Configuration", () => {
     render(<Configuration />);
   }
 
-  it("renders the configuration component inside the implementer tools panel", () => {
+  it('renders the configuration component inside the implementer tools panel', () => {
     renderConfiguration();
-    screen.getByRole("switch", { name: /json editor/i });
-    screen.getByRole("switch", { name: /ui editor/i });
-    screen.getByRole("button", { name: /clear local config/i });
-    screen.getByRole("button", { name: /download config/i });
-    screen.getByRole("textbox", { name: /search configuration/i });
+    screen.getByRole('switch', { name: /json editor/i });
+    screen.getByRole('switch', { name: /ui editor/i });
+    screen.getByRole('button', { name: /clear local config/i });
+    screen.getByRole('button', { name: /download config/i });
+    screen.getByRole('textbox', { name: /search configuration/i });
   });
 
-  it("displays correct boolean value and editor", async () => {
+  it('displays correct boolean value and editor', async () => {
     const user = userEvent.setup();
 
     implementerToolsConfigStore.setState({
       config: {
-        "@openmrs/mario": mockImplToolsConfig["@openmrs/mario"],
+        '@openmrs/mario': mockImplToolsConfig['@openmrs/mario'],
       },
     });
 
     renderConfiguration();
 
-    const rowElement = screen
-      .getByText("hasHat")
-      .closest(".cds--structured-list-row");
+    const rowElement = screen.getByText('hasHat').closest('.cds--structured-list-row');
     expect(rowElement).toBeInTheDocument();
 
     if (rowElement) {
       const row = within(rowElement as HTMLElement);
-      const value = row.getByText("false");
-      const editButton = row.getByText("Edit").parentElement as any;
+      const value = row.getByText('false');
+      const editButton = row.getByText('Edit').parentElement as any;
       await user.click(editButton);
-      const editor = row.getByRole("button", { name: /edit/i });
+      const editor = row.getByRole('button', { name: /edit/i });
 
       await user.click(editor);
-      await user.click(row.getByText("Save"));
+      await user.click(row.getByText('Save'));
 
       expect(temporaryConfigStore.setState).toHaveBeenCalledWith({
-        config: { "@openmrs/mario": { hasHat: false } },
+        config: { '@openmrs/mario': { hasHat: false } },
       });
     }
   });
 
-  it("displays correct concept UUID value and editor", async () => {
+  it('displays correct concept UUID value and editor', async () => {
     const user = userEvent.setup();
 
     mockUseConceptLookup.mockImplementation(() => ({
-      concepts: [
-        { uuid: "61523693-72e2-456d-8c64-8c5293febeb6", display: "Fedora" },
-      ],
+      concepts: [{ uuid: '61523693-72e2-456d-8c64-8c5293febeb6', display: 'Fedora' }],
       error: null,
       isSearchingConcepts: false,
     }));
 
     mockUseGetConceptByUuid.mockImplementation(() => ({
-      concept: { name: { display: "Fedora" } },
+      concept: { name: { display: 'Fedora' } },
       error: null,
       isLoadingConcept: false,
     }));
 
     implementerToolsConfigStore.setState({
       config: {
-        "@openmrs/mario": mockImplToolsConfig["@openmrs/mario"],
+        '@openmrs/mario': mockImplToolsConfig['@openmrs/mario'],
       },
     });
 
     renderConfiguration();
 
-    const rowElement = (await screen.findByText("hatUuid")).closest(
-      ".cds--structured-list-row"
-    );
+    const rowElement = (await screen.findByText('hatUuid')).closest('.cds--structured-list-row');
     expect(rowElement).toBeInTheDocument();
 
     if (rowElement) {
       const row = within(rowElement as HTMLElement);
-      const editButton = row.getByRole("button", { name: /edit/i });
+      const editButton = row.getByRole('button', { name: /edit/i });
 
       await user.click(editButton);
 
-      const searchbox = await row.findByRole("combobox", {
+      const searchbox = await row.findByRole('combobox', {
         name: /search concepts/i,
       });
 
-      await user.type(searchbox, "fedora");
+      await user.type(searchbox, 'fedora');
 
-      expect(mockUseConceptLookup).toHaveBeenCalledWith("fed");
+      expect(mockUseConceptLookup).toHaveBeenCalledWith('fed');
 
-      const targetConcept = await row.findByText("Fedora");
+      const targetConcept = await row.findByText('Fedora');
 
       await user.click(targetConcept);
-      await user.click(row.getByText("Save"));
+      await user.click(row.getByText('Save'));
 
       // expect(temporaryConfigStore.setState).toHaveBeenCalledWith({
       //   config: {
@@ -207,159 +194,149 @@ describe("Configuration", () => {
     }
   });
 
-  it("displays correct number value and editor", async () => {
+  it('displays correct number value and editor', async () => {
     const user = userEvent.setup();
 
     implementerToolsConfigStore.setState({
       config: {
-        "@openmrs/mario": mockImplToolsConfig["@openmrs/mario"],
+        '@openmrs/mario': mockImplToolsConfig['@openmrs/mario'],
       },
     });
 
     renderConfiguration();
 
-    const rowElement = (await screen.findByText("numberFingers")).closest(
-      ".cds--structured-list-row"
-    );
+    const rowElement = (await screen.findByText('numberFingers')).closest('.cds--structured-list-row');
     expect(rowElement).toBeInTheDocument();
 
     if (rowElement) {
       const row = within(rowElement as HTMLElement);
-      const valueButton = row.getByText("8");
+      const valueButton = row.getByText('8');
       expect(valueButton).toBeInTheDocument();
 
-      const editButton = row.getByRole("button", { name: /edit/i });
+      const editButton = row.getByRole('button', { name: /edit/i });
 
       await user.click(editButton);
 
-      const editor = await row.findByRole("spinbutton");
+      const editor = await row.findByRole('spinbutton');
 
-      expect(editor).toHaveAttribute("type", "number");
+      expect(editor).toHaveAttribute('type', 'number');
 
       await user.clear(editor);
-      await user.type(editor, "11");
-      await user.click(row.getByText("Save"));
+      await user.type(editor, '11');
+      await user.click(row.getByText('Save'));
 
       expect(temporaryConfigStore.setState).toHaveBeenCalledWith({
-        config: { "@openmrs/mario": { numberFingers: 11 } },
+        config: { '@openmrs/mario': { numberFingers: 11 } },
       });
     }
   });
 
-  it("displays correct string value and editor", async () => {
+  it('displays correct string value and editor', async () => {
     const user = userEvent.setup();
 
     implementerToolsConfigStore.setState({
       config: {
-        "@openmrs/mario": mockImplToolsConfig["@openmrs/mario"],
+        '@openmrs/mario': mockImplToolsConfig['@openmrs/mario'],
       },
     });
 
     renderConfiguration();
 
-    const rowElement = (await screen.findByText("nemesisName")).closest(
-      ".cds--structured-list-row"
-    );
+    const rowElement = (await screen.findByText('nemesisName')).closest('.cds--structured-list-row');
     expect(rowElement).toBeInTheDocument();
 
     if (rowElement) {
       const row = within(rowElement as HTMLElement);
-      const editButton = row.getByRole("button", { name: /edit/i });
+      const editButton = row.getByRole('button', { name: /edit/i });
 
       await user.click(editButton);
 
-      const editor = await row.findByRole("textbox");
+      const editor = await row.findByRole('textbox');
 
       await user.clear(editor);
-      await user.type(editor, "Bowser");
-      await user.click(row.getByText("Save"));
+      await user.type(editor, 'Bowser');
+      await user.click(row.getByText('Save'));
 
       expect(temporaryConfigStore.setState).toHaveBeenCalledWith({
-        config: { "@openmrs/mario": { nemesisName: "Bowser" } },
+        config: { '@openmrs/mario': { nemesisName: 'Bowser' } },
       });
     }
   });
 
-  it("displays correct UUID value and editor", async () => {
+  it('displays correct UUID value and editor', async () => {
     const user = userEvent.setup();
 
     implementerToolsConfigStore.setState({
       config: {
-        "@openmrs/mario": mockImplToolsConfig["@openmrs/mario"],
+        '@openmrs/mario': mockImplToolsConfig['@openmrs/mario'],
       },
     });
 
     renderConfiguration();
 
-    const rowElement = (await screen.findByText("mustacheUuid")).closest(
-      ".cds--structured-list-row"
-    );
+    const rowElement = (await screen.findByText('mustacheUuid')).closest('.cds--structured-list-row');
     expect(rowElement).toBeInTheDocument();
 
     if (rowElement) {
       const row = within(rowElement as HTMLElement);
-      row.getByText("181aee4a-5664-42da-8699-c36d28083bd0");
+      row.getByText('181aee4a-5664-42da-8699-c36d28083bd0');
 
-      const editButton = row.getByRole("button", { name: /edit/i });
+      const editButton = row.getByRole('button', { name: /edit/i });
 
       await user.click(editButton);
 
-      const editor = await row.findByRole("textbox");
+      const editor = await row.findByRole('textbox');
 
       await user.clear(editor);
-      const newUuid = "34f03796-f0e2-4f64-9e9a-28fb49a94baf";
+      const newUuid = '34f03796-f0e2-4f64-9e9a-28fb49a94baf';
       await user.type(editor, newUuid);
-      await user.click(row.getByText("Save"));
+      await user.click(row.getByText('Save'));
 
       expect(temporaryConfigStore.setState).toHaveBeenCalledWith({
-        config: { "@openmrs/mario": { mustacheUuid: newUuid } },
+        config: { '@openmrs/mario': { mustacheUuid: newUuid } },
       });
     }
   });
 
-  it("renders an array editor for simple arrays that behaves correctly", async () => {
+  it('renders an array editor for simple arrays that behaves correctly', async () => {
     const user = userEvent.setup();
 
     implementerToolsConfigStore.setState({
       config: {
-        "@openmrs/luigi": mockImplToolsConfig["@openmrs/luigi"],
+        '@openmrs/luigi': mockImplToolsConfig['@openmrs/luigi'],
       },
     });
     renderConfiguration();
-    const rowElement = (await screen.findByText("favoriteNumbers")).closest(
-      ".cds--structured-list-row"
-    );
+    const rowElement = (await screen.findByText('favoriteNumbers')).closest('.cds--structured-list-row');
     expect(rowElement).toBeInTheDocument();
     if (rowElement) {
       const row = within(rowElement as HTMLElement);
 
-      const inputs = row.getByText("[ 4, 12 ]");
-      const editButton = row.getByRole("button", { name: /edit/i });
+      const inputs = row.getByText('[ 4, 12 ]');
+      const editButton = row.getByRole('button', { name: /edit/i });
 
       await user.click(editButton);
       // expect(inputs[0]).toHaveValue(4);
       // expect(inputs[1]).toHaveValue(12);
-      const firstValue = row.getByDisplayValue("4");
-      expect(firstValue).toHaveAttribute("type", "number");
+      const firstValue = row.getByDisplayValue('4');
+      expect(firstValue).toHaveAttribute('type', 'number');
 
       await user.clear(firstValue);
-      await user.type(firstValue, "5");
+      await user.type(firstValue, '5');
 
-      const secondRowElement = row
-        .getByDisplayValue("12")
-        .closest(".cds--structured-list-row");
+      const secondRowElement = row.getByDisplayValue('12').closest('.cds--structured-list-row');
 
       expect(secondRowElement).toBeInTheDocument();
       // I can't get the add or remove buttons to work in tests.
       if (secondRowElement) {
         await user.click(
           within(secondRowElement as HTMLElement)
-            .getByText("Remove")
-            .closest("button") as HTMLElement
+            .getByText('Remove')
+            .closest('button') as HTMLElement,
         );
         // await waitForElementToBeRemoved(() => row.getByDisplayValue("12"));
       }
-      await user.click(row.getByText("Add"));
+      await user.click(row.getByText('Add'));
       // let rows = await row.findAllByRole("spinbutton");
       // let newInput = rows[rows.length - 1];
       // user.type(newInput, "11");

package/src/configuration/interactive-editor/config-subtree.component.tsx

@@ -1,8 +1,8 @@
-import React from "react";
-import EditableValue from "./editable-value.component";
-import { implementerToolsStore } from "../../store";
-import isEqual from "lodash-es/isEqual";
-import { Subtree } from "./layout/subtree.component";
+import React from 'react';
+import EditableValue from './editable-value.component';
+import { implementerToolsStore } from '../../store';
+import isEqual from 'lodash-es/isEqual';
+import { Subtree } from './layout/subtree.component';
 
 export interface ConfigSubtreeProps {
   config: Record<string, any>;
@@ -25,10 +25,7 @@ export function ConfigSubtree({ config, path = [] }: ConfigSubtreeProps) {
 
   function removeActiveItemDescriptionOnMouseLeave(thisPath) {
     const state = implementerToolsStore.getState();
-    if (
-      isEqual(state.activeItemDescription?.path, thisPath) &&
-      !isEqual(state.configPathBeingEdited, thisPath)
-    ) {
+    if (isEqual(state.activeItemDescription?.path, thisPath) && !isEqual(state.configPathBeingEdited, thisPath)) {
       implementerToolsStore.setState({ activeItemDescription: undefined });
     }
   }
@@ -37,19 +34,14 @@ export function ConfigSubtree({ config, path = [] }: ConfigSubtreeProps) {
     <>
       {Object.entries(config).map(([key, value], i) => {
         const thisPath = path.concat([key]);
-        const isLeaf =
-          value.hasOwnProperty("_value") || value.hasOwnProperty("_type");
+        const isLeaf = value.hasOwnProperty('_value') || value.hasOwnProperty('_type');
         return (
           <Subtree
             label={key}
             leaf={isLeaf}
-            onMouseEnter={() =>
-              setActiveItemDescriptionOnMouseEnter(thisPath, key, value)
-            }
-            onMouseLeave={() =>
-              removeActiveItemDescriptionOnMouseLeave(thisPath)
-            }
-            key={`subtree-${thisPath.join(".")}`}
+            onMouseEnter={() => setActiveItemDescriptionOnMouseEnter(thisPath, key, value)}
+            onMouseLeave={() => removeActiveItemDescriptionOnMouseLeave(thisPath)}
+            key={`subtree-${thisPath.join('.')}`}
           >
             {isLeaf ? (
               <EditableValue path={thisPath} element={value} />

package/src/configuration/interactive-editor/config-tree-for-module.component.tsx

@@ -1,28 +1,19 @@
-import React from "react";
-import { ExtensionSlotsConfigTree } from "./extension-slots-config-tree";
-import { ConfigSubtree } from "./config-subtree.component";
-import pickBy from "lodash-es/pickBy";
-import { TreeContainer } from "./layout/tree-container.component";
+import React from 'react';
+import { ExtensionSlotsConfigTree } from './extension-slots-config-tree';
+import { ConfigSubtree } from './config-subtree.component';
+import pickBy from 'lodash-es/pickBy';
+import { TreeContainer } from './layout/tree-container.component';
 
 export interface ConfigTreeForModuleProps {
   config: Record<string, any>;
   moduleName: string;
 }
 
-export function ConfigTreeForModule({
-  config,
-  moduleName,
-}: ConfigTreeForModuleProps) {
+export function ConfigTreeForModule({ config, moduleName }: ConfigTreeForModuleProps) {
   return (
     <TreeContainer>
-      <ExtensionSlotsConfigTree
-        extensionsConfig={config.extensionSlots}
-        moduleName={moduleName}
-      />
-      <ConfigSubtree
-        config={pickBy(config, (v, key) => key !== "extensionSlots")}
-        path={[moduleName]}
-      />
+      <ExtensionSlotsConfigTree extensionsConfig={config.extensionSlots} moduleName={moduleName} />
+      <ConfigSubtree config={pickBy(config, (v, key) => key !== 'extensionSlots')} path={[moduleName]} />
     </TreeContainer>
   );
 }

package/src/configuration/interactive-editor/config-tree.component.tsx

@@ -1,7 +1,7 @@
-import React from "react";
-import styles from "./config-tree.styles.scss";
-import { Accordion, AccordionItem } from "@carbon/react";
-import { ConfigTreeForModule } from "./config-tree-for-module.component";
+import React from 'react';
+import styles from './config-tree.styles.scss';
+import { Accordion, AccordionItem } from '@carbon/react';
+import { ConfigTreeForModule } from './config-tree-for-module.component';
 
 export interface ConfigTreeProps {
   config: Record<string, any>;
@@ -21,11 +21,7 @@ export function ConfigTree({ config }: ConfigTreeProps) {
                 className={styles.fullWidthAccordion}
                 key={`accordion-${moduleName}`}
               >
-                <ConfigTreeForModule
-                  config={moduleConfig}
-                  moduleName={moduleName}
-                  key={`${moduleName}-config`}
-                />
+                <ConfigTreeForModule config={moduleConfig} moduleName={moduleName} key={`${moduleName}-config`} />
               </AccordionItem>
             ) : null;
           })}

package/src/configuration/interactive-editor/description.component.tsx

@@ -1,8 +1,8 @@
-import React from "react";
-import styles from "./description.styles.scss";
-import { useStore } from "@openmrs/esm-framework";
-import { implementerToolsStore } from "../../store";
-import { useTranslation } from "react-i18next";
+import React from 'react';
+import styles from './description.styles.scss';
+import { useStore } from '@openmrs/esm-framework';
+import { implementerToolsStore } from '../../store';
+import { useTranslation } from 'react-i18next';
 
 export function Description() {
   const { t } = useTranslation();
@@ -11,37 +11,22 @@ export function Description() {
     <div>
       {activeItemDescription ? (
         <>
-          <h2 className={styles.path}>
-            {activeItemDescription.path.slice(1).join(" → ")}
-          </h2>
-          <p className={styles.description}>
-            {activeItemDescription.description}
-          </p>
+          <h2 className={styles.path}>{activeItemDescription.path.slice(1).join(' → ')}</h2>
+          <p className={styles.description}>{activeItemDescription.description}</p>
           <p className={styles.source}>
-            {activeItemDescription.source === "default" ? (
-              <>
-                {t(
-                  "itemDescriptionSourceDefaultText",
-                  "The current value is the default."
-                )}
-              </>
+            {activeItemDescription.source === 'default' ? (
+              <>{t('itemDescriptionSourceDefaultText', 'The current value is the default.')}</>
             ) : activeItemDescription.source ? (
               <>
-                {t("activeItemSourceText", "The current value comes from ")}
+                {t('activeItemSourceText', 'The current value comes from ')}
                 {activeItemDescription.source}
               </>
             ) : null}
           </p>
-          {activeItemDescription.value ? (
-            <h4 className={styles.productiveHeading01}>
-              {t("value", "Value")}
-            </h4>
-          ) : null}
+          {activeItemDescription.value ? <h4 className={styles.productiveHeading01}>{t('value', 'Value')}</h4> : null}
           <p className={styles.value}>
             {Array.isArray(activeItemDescription.value)
-              ? activeItemDescription.value.map((v, i) => (
-                  <p key={`${v}-${i}`}>{v}</p>
-                ))
+              ? activeItemDescription.value.map((v, i) => <p key={`${v}-${i}`}>{v}</p>)
               : activeItemDescription.value}
           </p>
         </>

package/src/configuration/interactive-editor/description.styles.scss

@@ -1,20 +1,20 @@
-@use "@carbon/styles/scss/spacing";
-@use "@carbon/styles/scss/type";
-@import "~@openmrs/esm-styleguide/src/vars";
-@import "../../implementer-tools.styles.scss";
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@import '~@openmrs/esm-styleguide/src/vars';
+@import '../../implementer-tools.styles.scss';
 
 .path {
-  @include type.type-style("heading-02");
+  @include type.type-style('heading-02');
   margin-bottom: spacing.$spacing-03;
 }
 
 .description {
-  @include type.type-style("body-compact-01");
+  @include type.type-style('body-compact-01');
   margin-bottom: spacing.$spacing-05;
 }
 
 .source {
-  @include type.type-style("body-compact-01");
+  @include type.type-style('body-compact-01');
   font-style: italic;
   margin-bottom: spacing.$spacing-03;
 }