Add SVG Icon Attributes (#163)

* Add SVG Icon fixes from NHSUK Frontend * Update snapshots
NHSDigital · Apr 13, 2023 · 37b6729 · 37b6729
1 parent d685e90
commit 37b6729
Show file tree

Hide file tree

Showing 10 changed files with 69 additions and 86 deletions.
diff --git a/src/components/action-link/ActionLink.tsx b/src/components/action-link/ActionLink.tsx
@@ -11,7 +11,7 @@ const ActionLink: React.FC<AsElementLink<HTMLAnchorElement>> = ({
 }) => (
   <div className="nhsuk-action-link">
     <Component className={classNames('nhsuk-action-link__link', className)} {...rest}>
-      <ArrowRightCircle />
+      <ArrowRightCircle width={36} height={36} />
       <span className="nhsuk-action-link__text">{children}</span>
     </Component>
   </div>

diff --git a/src/components/action-link/__tests__/__snapshots__/ActionLink.test.tsx.snap b/src/components/action-link/__tests__/__snapshots__/ActionLink.test.tsx.snap
@@ -8,7 +8,10 @@ exports[`ActionLink matches snapshot: ActionLink 1`] = `
     className="nhsuk-action-link__link"
     href="/test"
   >
-    <ArrowRightCircle />
+    <ArrowRightCircle
+      height={36}
+      width={36}
+    />
     <span
       className="nhsuk-action-link__text"
     >

diff --git a/src/components/back-link/BackLink.tsx b/src/components/back-link/BackLink.tsx
@@ -11,7 +11,7 @@ const BackLink: React.FC<AsElementLink<HTMLAnchorElement>> = ({
 }) => (
   <div className="nhsuk-back-link">
     <Component className={classNames('nhsuk-back-link__link', className)} {...rest}>
-      <ChevronLeft />
+      <ChevronLeft height={24} width={24} />
       {children}
     </Component>
   </div>

diff --git a/src/components/back-link/__tests__/__snapshots__/BackLink.test.tsx.snap b/src/components/back-link/__tests__/__snapshots__/BackLink.test.tsx.snap
@@ -8,7 +8,10 @@ exports[`BackLink matches snapshot: BackLink 1`] = `
     className="nhsuk-back-link__link"
     href="/back"
   >
-    <ChevronLeft />
+    <ChevronLeft
+      height={24}
+      width={24}
+    />
     Back
   </a>
 </div>

diff --git a/src/components/header/components/NHSLogo.tsx b/src/components/header/components/NHSLogo.tsx
@@ -7,7 +7,7 @@ interface SVGImageWithSrc extends SVGProps<SVGImageElement> {
   src: string;
 }
 
-export type NHSLogoNavProps = AsElementLink<HTMLAnchorElement>
+export type NHSLogoNavProps = AsElementLink<HTMLAnchorElement>;
 
 const SVGImageWithSrc: React.FC<SVGImageWithSrc> = (props) => <image {...props} />;
 
@@ -36,12 +36,15 @@ const NHSLogo: React.FC<NHSLogoNavProps> = ({
           className="nhsuk-logo"
           xmlns="http://www.w3.org/2000/svg"
           viewBox="0 0 40 16"
+          height={40}
+          width={100}
           aria-labelledby="nhsuk-logo_title"
         >
           <title id="nhsuk-logo_title">{alt}</title>
-          <path className="nhsuk-logo__background" d="M0 0h40v16H0z" />
+          <path className="nhsuk-logo__background" d="M0 0h40v16H0z" fill="#005eb8" />
           <path
             className="nhsuk-logo__text"
+            fill="#fff"
             d="M3.9 1.5h4.4l2.6 9h.1l1.8-9h3.3l-2.8 13H9l-2.7-9h-.1l-1.8 9H1.1M17.3 1.5h3.6l-1 4.9h4L25 1.5h3.5l-2.7 13h-3.5l1.1-5.6h-4.1l-1.2 5.6h-3.4M37.7 4.4c-.7-.3-1.6-.6-2.9-.6-1.4 0-2.5.2-2.5 1.3 0 1.8 5.1 1.2 5.1 5.1 0 3.6-3.3 4.5-6.4 4.5-1.3 0-2.9-.3-4-.7l.8-2.7c.7.4 2.1.7 3.2.7s2.8-.2 2.8-1.5c0-2.1-5.1-1.3-5.1-5 0-3.4 2.9-4.4 5.8-4.4 1.6 0 3.1.2 4 .6"
           />
         </svg>

diff --git a/src/components/header/components/Search.tsx b/src/components/header/components/Search.tsx
@@ -7,9 +7,7 @@ export interface SearchProps extends HTMLProps<HTMLInputElement> {
   visuallyHiddenText?: string;
 }
 
-const Search: React.FC<SearchProps> = ({
-  action, method, id, visuallyHiddenText, ...rest
-}) => {
+const Search: React.FC<SearchProps> = ({ action, method, id, visuallyHiddenText, ...rest }) => {
   const { setSearch, toggleSearch, searchOpen } = useContext<IHeaderContext>(HeaderContext);
   useEffect(() => {
     setSearch(true);
@@ -23,7 +21,7 @@ const Search: React.FC<SearchProps> = ({
         aria-expanded={searchOpen ? 'true' : 'false'}
         onClick={toggleSearch}
       >
-        <SearchIcon />
+        <SearchIcon width={27} height={27} />
         <span className="nhsuk-u-visually-hidden">Search</span>
       </button>
       <div className={classNames('nhsuk-header__search-wrap', { 'js-show': searchOpen })}>
@@ -33,11 +31,11 @@ const Search: React.FC<SearchProps> = ({
           </label>
           <input className="nhsuk-search__input" id={id} {...rest} />
           <button className="nhsuk-search__submit" type="submit">
-            <SearchIcon />
+            <SearchIcon width={27} height={27} />
             <span className="nhsuk-u-visually-hidden">Search</span>
           </button>
           <button className="nhsuk-search__close">
-            <CloseIcon />
+            <CloseIcon width={27} height={27} />
             <span className="nhsuk-u-visually-hidden">Close search</span>
           </button>
         </form>

diff --git a/src/components/icons/Icons.tsx b/src/components/icons/Icons.tsx
@@ -9,8 +9,8 @@ interface BaseIconSVGProps extends HTMLProps<SVGSVGElement> {
 export const BaseIconSVG: React.FC<BaseIconSVGProps> = ({
   className,
   children,
-  height,
-  width,
+  height = 34,
+  width = 34,
   iconType,
   ...rest
 }) => (
@@ -27,11 +27,6 @@ export const BaseIconSVG: React.FC<BaseIconSVGProps> = ({
   </svg>
 );
 
-BaseIconSVG.defaultProps = {
-  height: 32,
-  width: 32,
-};
-
 export const ArrowLeft: React.FC<BaseIconSVGProps> = (props) => (
   <BaseIconSVG iconType="nhsuk-icon__arrow-left" {...props}>
     <path d="M4.1 12.3l2.7 3c.2.2.5.2.7 0 .1-.1.1-.2.1-.3v-2h11c.6 0 1-.4 1-1s-.4-1-1-1h-11V9c0-.2-.1-.4-.3-.5h-.2c-.1 0-.3.1-.4.2l-2.7 3c0 .2 0 .4.1.6z" />
@@ -71,19 +66,25 @@ export const Close: React.FC<BaseIconSVGProps> = (props) => (
 
 export const Cross: React.FC<BaseIconSVGProps> = (props) => (
   <BaseIconSVG iconType="nhsuk-icon__cross" {...props}>
-    <path d="M17 18.5c-.4 0-.8-.1-1.1-.4l-10-10c-.6-.6-.6-1.6 0-2.1.6-.6 1.5-.6 2.1 0l10 10c.6.6.6 1.5 0 2.1-.3.3-.6.4-1 .4z" />
-    <path d="M7 18.5c-.4 0-.8-.1-1.1-.4-.6-.6-.6-1.5 0-2.1l10-10c.6-.6 1.5-.6 2.1 0 .6.6.6 1.5 0 2.1l-10 10c-.3.3-.6.4-1 .4z" />
+    <path
+      d="M17 18.5c-.4 0-.8-.1-1.1-.4l-10-10c-.6-.6-.6-1.6 0-2.1.6-.6 1.5-.6 2.1 0l10 10c.6.6.6 1.5 0 2.1-.3.3-.6.4-1 .4z"
+      fill="#d5281b"
+    />
+    <path
+      d="M7 18.5c-.4 0-.8-.1-1.1-.4-.6-.6-.6-1.5 0-2.1l10-10c.6-.6 1.5-.6 2.1 0 .6.6.6 1.5 0 2.1l-10 10c-.3.3-.6.4-1 .4z"
+      fill="#d5281b"
+    />
   </BaseIconSVG>
 );
 
-export const SmallEmdash: React.FC<BaseIconSVGProps> = ({ height, width, ...rest }) => (
-  <BaseIconSVG iconType="nhsuk-icon__emdash" height={height || 1} width={width || 16} {...rest}>
+export const SmallEmdash: React.FC<BaseIconSVGProps> = ({ height = 1, width = 16, ...rest }) => (
+  <BaseIconSVG iconType="nhsuk-icon__emdash" height={height} width={width} {...rest}>
     <path d="M0 0h16v1H0z" />
   </BaseIconSVG>
 );
 
-export const Emdash: React.FC<BaseIconSVGProps> = ({ height, width, ...rest }) => (
-  <BaseIconSVG iconType="nhsuk-icon__emdash" height={height || 1} width={width || 19} {...rest}>
+export const Emdash: React.FC<BaseIconSVGProps> = ({ height = 1, width = 19, ...rest }) => (
+  <BaseIconSVG iconType="nhsuk-icon__emdash" height={height} width={width} {...rest}>
     <path d="M0 0h19v1H0z" />
   </BaseIconSVG>
 );

diff --git a/src/components/icons/__tests__/__snapshots__/Icons.test.tsx.snap b/src/components/icons/__tests__/__snapshots__/Icons.test.tsx.snap
@@ -3,16 +3,14 @@
 exports[`Icons all icons match snapshots: ArrowLeft 1`] = `
 <ArrowLeft>
   <BaseIconSVG
-    height={32}
     iconType="nhsuk-icon__arrow-left"
-    width={32}
   >
     <svg
       aria-hidden="true"
       className="nhsuk-icon nhsuk-icon__arrow-left"
-      height={32}
+      height={34}
       viewBox="0 0 24 24"
-      width={32}
+      width={34}
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
@@ -26,16 +24,14 @@ exports[`Icons all icons match snapshots: ArrowLeft 1`] = `
 exports[`Icons all icons match snapshots: ArrowRight 1`] = `
 <ArrowRight>
   <BaseIconSVG
-    height={32}
     iconType="nhsuk-icon__arrow-right"
-    width={32}
   >
     <svg
       aria-hidden="true"
       className="nhsuk-icon nhsuk-icon__arrow-right"
-      height={32}
+      height={34}
       viewBox="0 0 24 24"
-      width={32}
+      width={34}
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
@@ -49,16 +45,14 @@ exports[`Icons all icons match snapshots: ArrowRight 1`] = `
 exports[`Icons all icons match snapshots: ArrowRightCircle 1`] = `
 <ArrowRightCircle>
   <BaseIconSVG
-    height={32}
     iconType="nhsuk-icon__arrow-right-circle"
-    width={32}
   >
     <svg
       aria-hidden="true"
       className="nhsuk-icon nhsuk-icon__arrow-right-circle"
-      height={32}
+      height={34}
       viewBox="0 0 24 24"
-      width={32}
+      width={34}
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
@@ -74,16 +68,13 @@ exports[`Icons all icons match snapshots: ArrowRightCircle 1`] = `
 `;
 
 exports[`Icons all icons match snapshots: BaseIconSVG 1`] = `
-<BaseIconSVG
-  height={32}
-  width={32}
->
+<BaseIconSVG>
   <svg
     aria-hidden="true"
     className="nhsuk-icon"
-    height={32}
+    height={34}
     viewBox="0 0 24 24"
-    width={32}
+    width={34}
     xmlns="http://www.w3.org/2000/svg"
   />
 </BaseIconSVG>
@@ -92,16 +83,14 @@ exports[`Icons all icons match snapshots: BaseIconSVG 1`] = `
 exports[`Icons all icons match snapshots: ChevronLeft 1`] = `
 <ChevronLeft>
   <BaseIconSVG
-    height={32}
     iconType="nhsuk-icon__chevron-left"
-    width={32}
   >
     <svg
       aria-hidden="true"
       className="nhsuk-icon nhsuk-icon__chevron-left"
-      height={32}
+      height={34}
       viewBox="0 0 24 24"
-      width={32}
+      width={34}
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
@@ -115,16 +104,14 @@ exports[`Icons all icons match snapshots: ChevronLeft 1`] = `
 exports[`Icons all icons match snapshots: ChevronRight 1`] = `
 <ChevronRight>
   <BaseIconSVG
-    height={32}
     iconType="nhsuk-icon__chevron-right"
-    width={32}
   >
     <svg
       aria-hidden="true"
       className="nhsuk-icon nhsuk-icon__chevron-right"
-      height={32}
+      height={34}
       viewBox="0 0 24 24"
-      width={32}
+      width={34}
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
@@ -138,16 +125,14 @@ exports[`Icons all icons match snapshots: ChevronRight 1`] = `
 exports[`Icons all icons match snapshots: Close 1`] = `
 <Close>
   <BaseIconSVG
-    height={32}
     iconType="nhsuk-icon__close"
-    width={32}
   >
     <svg
       aria-hidden="true"
       className="nhsuk-icon nhsuk-icon__close"
-      height={32}
+      height={34}
       viewBox="0 0 24 24"
-      width={32}
+      width={34}
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
@@ -161,23 +146,23 @@ exports[`Icons all icons match snapshots: Close 1`] = `
 exports[`Icons all icons match snapshots: Cross 1`] = `
 <Cross>
   <BaseIconSVG
-    height={32}
     iconType="nhsuk-icon__cross"
-    width={32}
   >
     <svg
       aria-hidden="true"
       className="nhsuk-icon nhsuk-icon__cross"
-      height={32}
+      height={34}
       viewBox="0 0 24 24"
-      width={32}
+      width={34}
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
         d="M17 18.5c-.4 0-.8-.1-1.1-.4l-10-10c-.6-.6-.6-1.6 0-2.1.6-.6 1.5-.6 2.1 0l10 10c.6.6.6 1.5 0 2.1-.3.3-.6.4-1 .4z"
+        fill="#d5281b"
       />
       <path
         d="M7 18.5c-.4 0-.8-.1-1.1-.4-.6-.6-.6-1.5 0-2.1l10-10c.6-.6 1.5-.6 2.1 0 .6.6.6 1.5 0 2.1l-10 10c-.3.3-.6.4-1 .4z"
+        fill="#d5281b"
       />
     </svg>
   </BaseIconSVG>
@@ -210,16 +195,14 @@ exports[`Icons all icons match snapshots: Emdash 1`] = `
 exports[`Icons all icons match snapshots: Minus 1`] = `
 <Minus>
   <BaseIconSVG
-    height={32}
     iconType="nhsuk-icon__minus"
-    width={32}
   >
     <svg
       aria-hidden="true"
       className="nhsuk-icon nhsuk-icon__minus"
-      height={32}
+      height={34}
       viewBox="0 0 24 24"
-      width={32}
+      width={34}
       xmlns="http://www.w3.org/2000/svg"
     >
       <circle
@@ -243,16 +226,14 @@ exports[`Icons all icons match snapshots: Minus 1`] = `
 exports[`Icons all icons match snapshots: Plus 1`] = `
 <Plus>
   <BaseIconSVG
-    height={32}
     iconType="nhsuk-icon__minus"
-    width={32}
   >
     <svg
       aria-hidden="true"
       className="nhsuk-icon nhsuk-icon__minus"
-      height={32}
+      height={34}
       viewBox="0 0 24 24"
-      width={32}
+      width={34}
       xmlns="http://www.w3.org/2000/svg"
     >
       <circle
@@ -276,16 +257,14 @@ exports[`Icons all icons match snapshots: Plus 1`] = `
 exports[`Icons all icons match snapshots: Search 1`] = `
 <Search>
   <BaseIconSVG
-    height={32}
     iconType="nhsuk-icon__search"
-    width={32}
   >
     <svg
       aria-hidden="true"
       className="nhsuk-icon nhsuk-icon__search"
-      height={32}
+      height={34}
       viewBox="0 0 24 24"
-      width={32}
+      width={34}
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
@@ -322,16 +301,14 @@ exports[`Icons all icons match snapshots: SmallEmdash 1`] = `
 exports[`Icons all icons match snapshots: Tick 1`] = `
 <Tick>
   <BaseIconSVG
-    height={32}
     iconType="nhsuk-icon__tick"
-    width={32}
   >
     <svg
       aria-hidden="true"
       className="nhsuk-icon nhsuk-icon__tick"
-      height={32}
+      height={34}
       viewBox="0 0 24 24"
-      width={32}
+      width={34}
       xmlns="http://www.w3.org/2000/svg"
     >
       <path