moved imported style to local component

Author: ricksmith130

.vscode/settings.json

@@ -6,14 +6,22 @@
     "source.fixAll": "explicit",
     "source.fixAll.eslint": "explicit"
   },
-  "eslint.validate": ["javascript", "typescript"],
+  "eslint.validate": [
+    "javascript",
+    "typescript"
+  ],
   "eslint.codeAction.showDocumentation": {
     "enable": true
   },
   "eslint.alwaysShowStatus": true,
-  "eslint.workingDirectories": ["src"],
+  "eslint.workingDirectories": [
+    "src"
+  ],
   "typescript.tsdk": "node_modules/typescript/lib",
   "[jsonc]": {
     "editor.defaultFormatter": "vscode.json-language-features"
+  },
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "vscode.typescript-language-features"
   }
-}
+}

src/components/accordion-menu/AccordionMenu.tsx

@@ -3,6 +3,7 @@ import React, { HTMLProps } from 'react';
 import classNames from 'classnames';
 import Section, { SectionProps } from './components/Section';
 import Link from './components/Link';
+import './_AccordionMenu.scss';
 
 interface AccordionMenu extends React.FC<HTMLProps<HTMLDivElement>> {
   Section: React.FC<SectionProps>;

src/components/header-with-logo/HeaderWithLogo.tsx

@@ -11,6 +11,7 @@ import Content from './components/LocalContent';
 import TransactionalServiceName from './components/LocalTransactionalServiceName';
 import HeaderJs from './header';
 import Container from '@components/layout/Container';
+import './_headerWithLogo.scss'
 
 const BaseHeaderLogo: FC<OrganisationalLogoProps & NHSLogoNavProps> = (props) => {
   const { orgName } = useContext<IHeaderContext>(HeaderContext);

src/components/ribbon-link/RibbonLink.tsx

@@ -3,6 +3,7 @@ import React, { HTMLProps } from 'react';
 import classNames from 'classnames';
 import Bar from './components/Bar';
 import { ArrowRightCircleIcon } from 'src'
+import './_RibbonLink.scss'
 
 type RibbonFlavours = 'hot' | 'mild' | 'cool';
 

src/components/sub-navigation/SubNavigation.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable @typescript-eslint/no-redeclare */
 import React, { HTMLProps } from 'react';
 import classNames from 'classnames';
+import './_SubNavigation.scss';
 
 const SubNavigationItem: React.FC<HTMLProps<HTMLAnchorElement>> = ({
   className,

src/components/tab-set/TabSet.tsx

@@ -2,6 +2,7 @@
 import React, { HTMLProps } from 'react';
 import classNames from 'classnames';
 import Tab, { TabProps } from './components/Tab';
+import './_TabSet.scss';
 
 interface TabSet extends React.FC<HTMLProps<HTMLDivElement>> {
   Tab: React.FC<TabProps>;

src/components/tag/Tag.tsx

@@ -1,5 +1,6 @@
 import React, { HTMLProps } from 'react';
 import classNames from 'classnames';
+import './_Tag.scss';
 
 type TagColours =
   | 'white'

src/components/tag/_Tag.scss

@@ -1,6 +1,6 @@
 @use 'sass:color';
-@use '../../../node_modules/nhsuk-frontend/packages/core/settings/all' as settings;
-@import '../../../node_modules/nhsuk-frontend/packages/core/generic/font-face';
+// @use '../../../node_modules/nhsuk-frontend/packages/core/settings/all' as settings;
+// @import '../../../node_modules/nhsuk-frontend/packages/core/generic/font-face';
 
 /* ==========================================================================
    #TAG

src/components/timeline/Timeline.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import Event, { EventProps } from './components/Event';
+import './_Timeline.scss';
 
 type TimelineProps = {
   events: Array<EventProps>;

src/components/tooltip/Tooltip.tsx

@@ -1,38 +1,36 @@
 import React, { HTMLProps } from 'react';
 import classNames from 'classnames';
+import './_Tooltip.scss';
 
 interface TooltipProps extends HTMLProps<HTMLDivElement> {
-  textProps?: HTMLProps<HTMLSpanElement>;
-  tooltip: string;
+	textProps?: HTMLProps<HTMLSpanElement>;
+	tooltip: string;
 }
 
 const Tooltip: React.FC<TooltipProps> = ({
-  className,
-  tooltip,
-  textProps,
-  children,
-  id,
-  ...rest
+	className,
+	tooltip,
+	textProps = {},
+	children,
+	id,
+	...rest
 }) => (
-  <div
-    className={classNames('nhsuk-tooltip', className)}
-    id={id}
-    aria-labelledby={id === undefined ? undefined : `${id}-tooltip-text`}
-    {...rest}
-  >
-    {children}
-    <span
-      id={id === undefined ? undefined : `${id}-tooltip-text`}
-      className={classNames('nhsuk-tooltip__text', textProps?.className)}
-      {...textProps}
-    >
-      {tooltip}
-    </span>
-  </div>
+	<div
+		className={classNames('nhsuk-tooltip', className)}
+		id={id}
+		aria-labelledby={id === undefined ? undefined : `${id}-tooltip-text`}
+		{...rest}
+	>
+		{children}
+		<span
+			id={id === undefined ? undefined : `${id}-tooltip-text`}
+			className={classNames('nhsuk-tooltip__text', textProps?.className)}
+			{...textProps}
+		>
+			{tooltip}
+		</span>
+	</div>
 );
 
-Tooltip.defaultProps = {
-  textProps: {},
-};
 
 export default Tooltip;