Merge pull request #1359 from mi6/1348-transfer-dark-mode-images

feat(root): add dark variants of Accessibility, Styles images

src/components/ComponentGallery/index.tsx

@@ -190,7 +190,8 @@ const ComponentGallery: React.FC = () => {
   ];
 
   // to allow the concatenation of a camelcase variable name, we capitalise the value of theme
-  const capitalisedTheme = String(theme).charAt(0).toUpperCase() + String(theme).slice(1);
+  const capitalisedTheme =
+    String(theme).charAt(0).toUpperCase() + String(theme).slice(1);
 
   return (
     <ul className="card-container">
@@ -200,8 +201,9 @@ const ComponentGallery: React.FC = () => {
             <ic-card-vertical message={subTitle} full-width clickable>
               <img
                 src={
-                  ComponentImages[title.replace(/[- ]/g, "") + capitalisedTheme] ||
-                  passImage([PlaceHolderLight, PlaceHolderDark], theme)
+                  ComponentImages[
+                    title.replace(/[- ]/g, "") + capitalisedTheme
+                  ] || passImage([PlaceHolderLight, PlaceHolderDark], theme)
                 }
                 slot="image-top"
                 alt={title}

src/components/DoDontCaution/index.tsx

@@ -7,9 +7,11 @@ import "./index.css";
 
 import Icon from "@mdi/react";
 import { mdiCheck, mdiClose, mdiAlert } from "@mdi/js";
+import { useTheme } from "../../context/ThemeContext";
+import { passImage } from "../../utils/helpers";
 
 interface DoDontCautionProps {
-  imageSrc?: string;
+  imageSrc?: Array<string> | string;
   imageAlt: string;
   state?: "good" | "bad" | "none" | "caution";
   caption?: string;
@@ -37,6 +39,9 @@ const DoDontCaution: React.FC<DoDontCautionProps> = ({
   state = "none",
   caption = "",
 }) => {
+  const { theme } = useTheme();
+  const transformedImageSrc = passImage(imageSrc, theme);
+
   const imageData = useStaticQuery(graphql`
     query {
       allFile(filter: { ext: { in: [".jpg", ".png"] } }) {
@@ -52,7 +57,9 @@ const DoDontCaution: React.FC<DoDontCautionProps> = ({
       }
     }
   `);
-  const isBase64: boolean = imageSrc.includes("data:image/png;base64");
+  const isBase64: boolean = transformedImageSrc.includes(
+    "data:image/png;base64"
+  );
   const imageObject: ImageFile[] = imageData.allFile.edges;
 
   const filterImageData: any = (imagePath: string) => {
@@ -105,17 +112,17 @@ const DoDontCaution: React.FC<DoDontCautionProps> = ({
           <Icon path={STATE_VALUES[state].icon} aria-hidden="true" />
         </div>
       )}
-      {imageSrc &&
+      {transformedImageSrc &&
         (isBase64 ? (
           <img
-            src={imageSrc}
+            src={transformedImageSrc}
             alt={imageAlt}
             className="image-wide"
             loading="lazy"
           />
         ) : (
           <GatsbyImage
-            image={filterImageData(imageSrc)}
+            image={filterImageData(transformedImageSrc)}
             alt={imageAlt}
             className="image-wide"
           />

src/content/structured/accessibility/needs/auditory.mdx

@@ -12,7 +12,7 @@ subTitle: "Hearing impairment means a complete or partial loss of the ability to
 contribute: "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/accessibility/needs/auditory.mdx"
 ---
 
-import auditoryAccessibilityFig3 from "./images/fig-3-closed-caption-and-transcripts.png";
+import { Fig3ClosedCapLight, Fig3ClosedCapDark } from "./images";
 
 ## Introduction
 
@@ -58,7 +58,7 @@ Don't rely on automated subtitling and transcription because it might be inaccur
 Including closed captions and transcripts on video or audio files will make the page accessible to those with hearing impairments.
 
 <DoDontCaution
-  imageSrc={auditoryAccessibilityFig3}
+  imageSrc={[Fig3ClosedCapLight, Fig3ClosedCapDark]}
   imageAlt="A graphic of a video player with a show transcript button. On the right hand side there is a transcript window displaying the audio of the video in text format."
   state="good"
   caption="Include transcripts for audio elements where possible."

src/content/structured/accessibility/needs/general.mdx

@@ -12,8 +12,12 @@ subTitle: "Every app and service you create must have a minimal baseline of acce
 contribute: "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/accessibility/needs/general.mdx"
 ---
 
-import generalAccessibilityFig1 from "./images/fig-1-linear-layout.png";
-import generalAccessibilityFig2 from "./images/fig-2-non-linear-layout.png";
+import {
+  Fig1LinearLight,
+  Fig1LinearDark,
+  Fig2NonLinearLight,
+  Fig2NonLinearDark,
+} from "./images";
 
 ## Introduction
 
@@ -59,13 +63,13 @@ Ensure data is displayed in a linear format that is readable for people. Don’t
 
 <DoubleDoDontCaution>
   <DoDontCaution
-    imageSrc={generalAccessibilityFig1}
+    imageSrc={[Fig1LinearLight, Fig1LinearDark]}
     imageAlt="A graphic of an information page currently at step 1 requiring an email address to be inputted and a ‘yes’ or ‘no’ as to whether you wish to be contacted. All of these options are aligned to the left and the ‘Next’ button to continue to next step is at the bottom."
     state="good"
     caption="Ensure all components are linear and aligned to the left."
   />
   <DoDontCaution
-    imageSrc={generalAccessibilityFig2}
+    imageSrc={[Fig2NonLinearLight, Fig2NonLinearDark]}
     imageAlt="A graphic of an information page currently at step 1 requiring an email address to be inputted and a ‘yes’ or ‘no’ as to whether you wish to be contacted. These options are not aligned to the left and the ‘Next’ button to move on to the next page is next to the email input, and not at the bottom of the page. This non linear layout can be confusing to people who don’t know the layout well."
     state="bad"
     caption="All components are not aligned to the left, showing what the layout should not look like."

src/content/structured/accessibility/needs/images/index.tsx

@@ -0,0 +1,32 @@
+export { default as Fig1LinearLight } from "./fig-1-linear-layout.png";
+export { default as Fig1LinearDark } from "./fig-1-linear-layout-dark.png";
+export { default as Fig2NonLinearLight } from "./fig-2-non-linear-layout.png";
+export { default as Fig2NonLinearDark } from "./fig-2-non-linear-layout-dark.png";
+export { default as Fig3ClosedCapLight } from "./fig-3-closed-caption-and-transcripts.png";
+export { default as Fig3ClosedCapDark } from "./fig-3-closed-caption-and-transcripts-dark.png";
+export { default as Fig4GoodErrorLight } from "./fig-4-good-error-messages.png";
+export { default as Fig4GoodErrorDark } from "./fig-4-good-error-messages-dark.png";
+export { default as Fig5BadErrorLight } from "./fig-5-bad-error-messages.png";
+export { default as Fig5BadErrorDark } from "./fig-5-bad-error-messages-dark.png";
+export { default as Fig6GoodToastLight } from "./fig-6-good-toast-display-time.png";
+export { default as Fig6GoodToastDark } from "./fig-6-good-toast-display-time-dark.png";
+export { default as Fig8LargeClickLight } from "./fig-8-large-clickable-areas.png";
+export { default as Fig8LargeClickDark } from "./fig-8-large-clickable-areas-dark.png";
+export { default as Fig9ClickSmallLight } from "./fig-9-clickable-areas-too-small.png";
+export { default as Fig9ClickSmallDark } from "./fig-9-clickable-areas-too-small-dark.png";
+export { default as Fig10DictateLight } from "./fig-10-dictate-function-on-text-fields.png";
+export { default as Fig10DictateDark } from "./fig-10-dictate-function-on-text-fields-dark.png";
+export { default as Fig11NoDictateLight } from "./fig-11-no-dictate-function.png";
+export { default as Fig11NoDictateDark } from "./fig-11-no-dictate-function-dark.png";
+export { default as Fig12MessagesColourTextLight } from "./fig-12-messages-using-colour-and-text.png";
+export { default as Fig12MessagesColourTextDark } from "./fig-12-messages-using-colour-and-text-dark.png";
+export { default as Fig13MessagesColourOnlyLight } from "./fig-13-messages-using-colour-only.png";
+export { default as Fig13MessagesColourOnlyDark } from "./fig-13-messages-using-colour-only-dark.png";
+export { default as Fig14GraphicsLight } from "./fig-14-graphics-and-text-used-to-show-data.png";
+export { default as Fig14GraphicsDark } from "./fig-14-graphics-and-text-used-to-show-data-dark.png";
+export { default as Fig15OnlyTextLight } from "./fig-15-only-text-is-used-to-show-data.png";
+export { default as Fig15OnlyTextDark } from "./fig-15-only-text-is-used-to-show-data-dark.png";
+export { default as Fig16DyslexiaLight } from "./fig-16-dyslexia-friendly-font.png";
+export { default as Fig16DyslexiaDark } from "./fig-16-dyslexia-friendly-font-dark.png";
+export { default as Fig17NoDyslexiaLight } from "./fig-17-no-dyslexia-friendly-font.png";
+export { default as Fig17NoDyslexiaDark } from "./fig-17-no-dyslexia-friendly-font-dark.png";

src/content/structured/accessibility/needs/invisible.mdx

@@ -12,8 +12,12 @@ subTitle: "Invisible illness is an umbrella term for medical conditions that are
 contribute: "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/accessibility/needs/invisible.mdx"
 ---
 
-import invisibleAccessibilityFig4 from "./images/fig-4-good-error-messages.png";
-import invisibleAccessibilityFig5 from "./images/fig-5-bad-error-messages.png";
+import {
+  Fig4GoodErrorLight,
+  Fig4GoodErrorDark,
+  Fig5BadErrorLight,
+  Fig5BadErrorDark,
+} from "./images";
 import toastAnimation from "./images/toast-example-ten-seconds.mp4";
 
 ## Introduction
@@ -105,13 +109,13 @@ Make sure any error messages explain what needs to be done to fix the error.
 
 <DoubleDoDontCaution>
   <DoDontCaution
-    imageSrc={invisibleAccessibilityFig4}
+    imageSrc={[Fig4GoodErrorLight, Fig4GoodErrorDark]}
     imageAlt="A graphic of an error message and a submit button where the error asks the user to check data. The error states that the error is with the form, not with the user."
     state="good"
     caption="Error messages should advise people on how to fix the issue rather than blaming them."
   />
   <DoDontCaution
-    imageSrc={invisibleAccessibilityFig5}
+    imageSrc={[Fig5BadErrorLight, Fig5BadErrorDark]}
     imageAlt="A graphic of an error message and a submit button where the error blames the user for the submission failing."
     state="bad"
     caption="Error messages should not blame the person or fail to tell them how to fix the issue."

src/content/structured/accessibility/needs/motor.mdx

@@ -12,10 +12,16 @@ subTitle: "'Motor impairment' means a partial or total lack of function in a bod
 contribute: "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/accessibility/needs/motor.mdx"
 ---
 
-import motorAccessibilityFig8 from "./images/fig-8-large-clickable-areas.png";
-import motorAccessibilityFig9 from "./images/fig-9-clickable-areas-too-small.png";
-import motorAccessibilityFig10 from "./images/fig-10-dictate-function-on-text-fields.png";
-import motorAccessibilityFig11 from "./images/fig-11-no-dictate-function.png";
+import {
+  Fig8LargeClickLight,
+  Fig8LargeClickDark,
+  Fig9ClickSmallLight,
+  Fig9ClickSmallDark,
+  Fig10DictateLight,
+  Fig10DictateDark,
+  Fig11NoDictateLight,
+  Fig11NoDictateDark,
+} from "./images";
 
 ## Introduction
 
@@ -58,13 +64,13 @@ Avoid placing lots of actions next to each other as this could increase the risk
 
 <DoubleDoDontCaution>
   <DoDontCaution
-    imageSrc={motorAccessibilityFig8}
+    imageSrc={[Fig8LargeClickLight, Fig8LargeClickDark]}
     imageAlt="A graphic of a yes or no option and a submit button. The clickable areas include the text of the ‘yes’ radio option and the whole button."
     state="good"
     caption="The cursors are positioned on a larger clickable area that includes the text for the button."
   />
   <DoDontCaution
-    imageSrc={motorAccessibilityFig9}
+    imageSrc={[Fig9ClickSmallLight, Fig9ClickSmallDark]}
     imageAlt="A graphic of a yes or no option and a submit button with outlines around only the circle of the radio button and the chevron of the submit button, showing a limited clickable area."
     state="bad"
     caption="The cursors are positioned on a smaller clickable area that does not include the text for the button, making it harder for people with motor needs."
@@ -93,13 +99,13 @@ Consider alternative input means (mouthpieces, clickers and text to speech softw
 
 <DoubleDoDontCaution>
   <DoDontCaution
-    imageSrc={motorAccessibilityFig10}
+    imageSrc={[Fig10DictateLight, Fig10DictateDark]}
     imageAlt="A graphic of a text field requiring user to enter a description with a dictate button for those who would prefer to use speech to text rather than typing."
     state="good"
     caption="Text field with an option to dictate what is written."
   />
   <DoDontCaution
-    imageSrc={motorAccessibilityFig11}
+    imageSrc={[Fig11NoDictateLight, Fig11NoDictateDark]}
     imageAlt="A graphic of a text field requiring user to enter a description with only the option to type, which can be limiting for people with motor difficulties."
     state="bad"
     caption="Text field that only has an option to type, which limits accessibility."

src/content/structured/accessibility/needs/neurodiversity.mdx

@@ -12,10 +12,16 @@ subTitle: "People often think, communicate, understand or remember things in way
 contribute: "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/accessibility/needs/neurodiversity.mdx"
 ---
 
-import neurodiversityAccessibilityFig14 from "./images/fig-14-graphics-and-text-used-to-show-data.png";
-import neurodiversityAccessibilityFig15 from "./images/fig-15-only-text-is-used-to-show-data.png";
-import neurodiversityAccessibilityFig16 from "./images/fig-16-dyslexia-friendly-font.png";
-import neurodiversityAccessibilityFig17 from "./images/fig-17-no-dyslexia-friendly-font.png";
+import {
+  Fig14GraphicsLight,
+  Fig14GraphicsDark,
+  Fig15OnlyTextLight,
+  Fig15OnlyTextDark,
+  Fig16DyslexiaLight,
+  Fig16DyslexiaDark,
+  Fig17NoDyslexiaDark,
+  Fig17NoDyslexiaLight,
+} from "./images";
 
 ## Introduction
 
@@ -163,13 +169,13 @@ All images and icons must use [accessible colour](/styles/colour) and have `alt`
 
 <DoubleDoDontCaution>
   <DoDontCaution
-    imageSrc={neurodiversityAccessibilityFig14}
+    imageSrc={[Fig14GraphicsLight, Fig14GraphicsDark]}
     imageAlt="A graphic of a survey regarding eye colour. Results are conveyed by short lines of text and by a pie chart that displays the results in a more visible solution."
     state="good"
     caption="Using both images and text can make it easier to understand data."
   />
   <DoDontCaution
-    imageSrc={neurodiversityAccessibilityFig15}
+    imageSrc={[Fig15OnlyTextLight, Fig15OnlyTextDark]}
     imageAlt="A graphic of a survey regarding eye colour. Results are written in long sentences that do not show the information as clearly as possible."
     state="bad"
     caption="Using text only to present data can be complex and overwhelming."
@@ -201,13 +207,13 @@ These include Windows High Contrast mode, macOS increased contrast and browser e
 
 <DoubleDoDontCaution>
   <DoDontCaution
-    imageSrc={neurodiversityAccessibilityFig16}
+    imageSrc={[Fig16DyslexiaLight, Fig16DyslexiaDark]}
     imageAlt="A graphic of a dialogue box to show open-dyslexic text font, which is easier for people with dyslexia to read."
     state="good"
     caption="Open-dyslexic font is used to make text more readable for those with dyslexia."
   />
   <DoDontCaution
-    imageSrc={neurodiversityAccessibilityFig17}
+    imageSrc={[Fig17NoDyslexiaLight, Fig17NoDyslexiaDark]}
     imageAlt="A graphic of a dialogue box to show default text font."
     state="bad"
     caption="Default fonts might not always benefit people with dyslexia."

src/content/structured/accessibility/needs/visual.mdx

@@ -12,8 +12,12 @@ subTitle: "A visual impairment is a reduction in clarity or loss of vision that
 contribute: "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/accessibility/needs/visual.mdx"
 ---
 
-import visualAccessibilityFig12 from "./images/fig-12-messages-using-colour-and-text.png";
-import visualAccessibilityFig13 from "./images/fig-13-messages-using-colour-only.png";
+import {
+  Fig12MessagesColourTextLight,
+  Fig12MessagesColourTextDark,
+  Fig13MessagesColourOnlyLight,
+  Fig13MessagesColourOnlyDark,
+} from "./images";
 
 ## Introduction
 
@@ -98,13 +102,13 @@ Don’t rely on [colour](/styles/colour) only to convey a meaning. Use a combina
 
 <DoubleDoDontCaution>
   <DoDontCaution
-    imageSrc={visualAccessibilityFig12}
+    imageSrc={[Fig12MessagesColourTextLight, Fig12MessagesColourTextDark]}
     imageAlt=" A graphic of text field validation showing an error, a warning and a success using colour, text and icons to differentiate meaning."
     state="good"
     caption="Colour and text are used to convey meaning to people."
   />
   <DoDontCaution
-    imageSrc={visualAccessibilityFig13}
+    imageSrc={[Fig13MessagesColourOnlyLight, Fig13MessagesColourOnlyDark]}
     imageAlt="A graphic of a dialogue box to show default text font."
     state="bad"
     caption="Only colour is used to convey meaning. This will not benefit people who are colour blind or who do not understand what the colours mean."

src/content/structured/styles/elevation.mdx

@@ -10,7 +10,7 @@ title: "Elevation"
 contribute: "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/styles/elevation.mdx"
 ---
 
-import elevationFig1 from "./images/fig-1-an-example-of-an-application-showing-the-different-layers-of-interaction.png";
+import { Fig1ExampleAppLight, Fig1ExampleAppDark } from "./images";
 
 ## Interaction layers
 
@@ -25,7 +25,7 @@ There are three layers:
 3. The modal layer sits above all other content and contains components that are important to display to the user and interrupt their current task. Components on this layer cast a large shadow.
 
 <DoDontCaution
-  imageSrc={elevationFig1}
+  imageSrc={[Fig1ExampleAppLight, Fig1ExampleAppDark]}
   imageAlt="A graphic of an application showing the different layers of interaction on the lef-hand side and a depth chart on the right. The chart is used to show the hierarchy of the interactions. Explained in the previous text."
   state="none"
   caption="An example of an application showing the different layers of interaction. This includes the base layer with some raised content, the overlay layer and the modal layer."

src/content/structured/styles/focus-indicator.mdx

@@ -10,8 +10,12 @@ title: "Focus indicator"
 contribute: "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/styles/focus-indicator.mdx"
 ---
 
-import focusIndicatorFig1 from "./images/fig-1-focus-indicators-inherit-the-border-radius-of-the-components-they-enclose.png";
-import focusIndicatorFig2 from "./images/fig-2-focus-on-links-is-indicated-by-an-underline.png";
+import {
+  Fig1FocusLight,
+  Fig1FocusDark,
+  Fig2FocusOnLinksLight,
+  Fig2FocusOnLinksDark,
+} from "./images";
 
 ## Enclosing components
 
@@ -23,7 +27,7 @@ When applied to rounded components, for example [radio](/components/radio), [swi
 
 <DoubleDoDontCaution>
   <DoDontCaution
-    imageSrc={focusIndicatorFig1}
+    imageSrc={[Fig1FocusLight, Fig1FocusDark]}
     imageAlt="An image of a button and back to top component, both with focus applied to them."
     state="none"
     caption="Focus indicators inherit the border radius of the components they enclose."
@@ -36,7 +40,7 @@ When links are focused, the indicator will appear as the hover state.
 
 <DoubleDoDontCaution>
   <DoDontCaution
-    imageSrc={focusIndicatorFig2}
+    imageSrc={[Fig2FocusOnLinksLight, Fig2FocusOnLinksDark]}
     imageAlt="An image of a blue link labelled 'Coffee blog' with a thick underline of the same colour."
     state="none"
     caption="Focus on links is indicated by a thick underline."