chore(root): add prettier check to precommit hook

Add prettier check to precommit hook and run prettier (changes made to accordion mdx files and badge mdx files) . #568
mi6 · Oct 13, 2023 · 1f3bcdd · 1f3bcdd
1 parent 5da4505
commit 1f3bcdd
Show file tree

Hide file tree

Showing 7 changed files with 172 additions and 185 deletions.
diff --git a/.husky/pre-commit b/.husky/pre-commit
@@ -4,5 +4,6 @@
 bash "$(dirname "$0")/email-check.sh"
 
 npm run test
+npm run prettier
 
 npx lint-staged
diff --git a/src/content/structured/components/accordion/accessibility.mdx b/src/content/structured/components/accordion/accessibility.mdx
@@ -33,7 +33,7 @@ If the accordion is closed, we make sure any functionality contained within the
 
 The accordion component consists of a button and expanded area. The button uses `aria-expanded` so screen readers announce when the accordion panel is on display. `aria-controls` is also applied to the button to identify which expanded area is being controlled by the button.
 
-The expanded content uses `aria-hidden` which is set to `false` when the accordion is collapsed and `true` when expanded. The expanded content also has a `role` of `region` and `aria-labelled` which links to the accordion heading within the button. 
+The expanded content uses `aria-hidden` which is set to `false` when the accordion is collapsed and `true` when expanded. The expanded content also has a `role` of `region` and `aria-labelled` which links to the accordion heading within the button.
 
 ## Based on
 

diff --git a/src/content/structured/components/accordion/code.mdx b/src/content/structured/components/accordion/code.mdx
@@ -59,17 +59,15 @@ export const snippets = [
   },
 ];
 
-<ComponentPreview style={{flexDirection: "column"}} snippets={snippets}>
-    <IcAccordion heading="English Breakfast">
-      <IcTypography variant="body">
-        A blend of different black teas
-      </IcTypography>
-    </IcAccordion>
-    <IcAccordion heading="Earl Grey">
-      <IcTypography variant="body">
-        A tea blend that has been flavoured with oil of bergamot
-      </IcTypography>
-    </IcAccordion>
+<ComponentPreview style={{ flexDirection: "column" }} snippets={snippets}>
+  <IcAccordion heading="English Breakfast">
+    <IcTypography variant="body">A blend of different black teas</IcTypography>
+  </IcAccordion>
+  <IcAccordion heading="Earl Grey">
+    <IcTypography variant="body">
+      A tea blend that has been flavoured with oil of bergamot
+    </IcTypography>
+  </IcAccordion>
 </ComponentPreview>
 
 ## Accordion details
@@ -161,42 +159,40 @@ export const withIcon = [
   },
 ];
 
-<ComponentPreview snippets={withIcon} style={{flexDirection: "column"}}>
-    <IcAccordion heading="English Breakfast">
-      <SlottedSVG
-        slot="icon"
-        width="20"
-        height="1em"
-        viewBox="0 0 512 512"
-        fill="currentColor"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path d="M362.7 19.3L314.3 67.7 444.3 197.7l48.4-48.4c25-25 25-65.5 0-90.5L453.3 19.3c-25-25-65.5-25-90.5 0zm-71 71L58.6 323.5c-10.4 10.4-18 23.3-22.2 37.4L1 481.2C-1.5 489.7 .8 498.8 7 505s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L421.7 220.3 291.7 90.3z" />
-      </SlottedSVG>
-      <IcTypography variant="body">
-        A blend of different black teas
-      </IcTypography>
-    </IcAccordion>
-    <IcAccordion heading="Earl Grey">
-      <SlottedSVG
-        slot="icon"
-        width="20"
-        height="1em"
-        viewBox="0 0 512 512"
-        fill="currentColor"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path d="M362.7 19.3L314.3 67.7 444.3 197.7l48.4-48.4c25-25 25-65.5 0-90.5L453.3 19.3c-25-25-65.5-25-90.5 0zm-71 71L58.6 323.5c-10.4 10.4-18 23.3-22.2 37.4L1 481.2C-1.5 489.7 .8 498.8 7 505s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L421.7 220.3 291.7 90.3z" />
-      </SlottedSVG>
-      <IcTypography variant="body">
-        A tea blend that has been flavoured with oil of bergamot
-      </IcTypography>
-    </IcAccordion>
+<ComponentPreview snippets={withIcon} style={{ flexDirection: "column" }}>
+  <IcAccordion heading="English Breakfast">
+    <SlottedSVG
+      slot="icon"
+      width="20"
+      height="1em"
+      viewBox="0 0 512 512"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M362.7 19.3L314.3 67.7 444.3 197.7l48.4-48.4c25-25 25-65.5 0-90.5L453.3 19.3c-25-25-65.5-25-90.5 0zm-71 71L58.6 323.5c-10.4 10.4-18 23.3-22.2 37.4L1 481.2C-1.5 489.7 .8 498.8 7 505s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L421.7 220.3 291.7 90.3z" />
+    </SlottedSVG>
+    <IcTypography variant="body">A blend of different black teas</IcTypography>
+  </IcAccordion>
+  <IcAccordion heading="Earl Grey">
+    <SlottedSVG
+      slot="icon"
+      width="20"
+      height="1em"
+      viewBox="0 0 512 512"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M362.7 19.3L314.3 67.7 444.3 197.7l48.4-48.4c25-25 25-65.5 0-90.5L453.3 19.3c-25-25-65.5-25-90.5 0zm-71 71L58.6 323.5c-10.4 10.4-18 23.3-22.2 37.4L1 481.2C-1.5 489.7 .8 498.8 7 505s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L421.7 220.3 291.7 90.3z" />
+    </SlottedSVG>
+    <IcTypography variant="body">
+      A tea blend that has been flavoured with oil of bergamot
+    </IcTypography>
+  </IcAccordion>
 </ComponentPreview>
 
 ### With group title and see all / hide all button
 
-<ComponentPreview snippets={groupTitle} style={{flexDirection: "column"}}>
+<ComponentPreview snippets={groupTitle} style={{ flexDirection: "column" }}>
   <IcAccordionGroup group-title="Coffee">
     <IcAccordion heading="Cappuccino">
       <SlottedSVG
@@ -210,7 +206,8 @@ export const withIcon = [
         <path d="M362.7 19.3L314.3 67.7 444.3 197.7l48.4-48.4c25-25 25-65.5 0-90.5L453.3 19.3c-25-25-65.5-25-90.5 0zm-71 71L58.6 323.5c-10.4 10.4-18 23.3-22.2 37.4L1 481.2C-1.5 489.7 .8 498.8 7 505s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L421.7 220.3 291.7 90.3z" />
       </SlottedSVG>
       <IcTypography variant="body">
-        An espresso-based drink that is traditionally prepared with steamed milk foam
+        An espresso-based drink that is traditionally prepared with steamed milk
+        foam
       </IcTypography>
     </IcAccordion>
     <IcAccordion heading="Americano">
@@ -314,7 +311,7 @@ export const groupTitle = [
 
 ### With nested accordions
 
-<ComponentPreview snippets={groupTitle} style={{flexDirection: "column"}}>
+<ComponentPreview snippets={groupTitle} style={{ flexDirection: "column" }}>
   <IcAccordionGroup group-title="Coffee">
     <IcAccordion heading="Cappuccino">
       <SlottedSVG
@@ -328,7 +325,8 @@ export const groupTitle = [
         <path d="M362.7 19.3L314.3 67.7 444.3 197.7l48.4-48.4c25-25 25-65.5 0-90.5L453.3 19.3c-25-25-65.5-25-90.5 0zm-71 71L58.6 323.5c-10.4 10.4-18 23.3-22.2 37.4L1 481.2C-1.5 489.7 .8 498.8 7 505s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L421.7 220.3 291.7 90.3z" />
       </SlottedSVG>
       <IcTypography variant="body">
-        An espresso-based drink that is traditionally prepared with steamed milk foam
+        An espresso-based drink that is traditionally prepared with steamed milk
+        foam
       </IcTypography>
     </IcAccordion>
     <IcAccordion heading="Americano">

diff --git a/src/content/structured/components/accordion/guidance.mdx b/src/content/structured/components/accordion/guidance.mdx
@@ -40,7 +40,7 @@ Group accordions to hide more content on the page and to structure content into
 
 An accordion group can be nested within another accordion to create one layer of nested content. Do not nest more accordion groups within an already nested accordion group. Only use one level of nesting.
 
-<ComponentPreview style={{flexDirection: "column"}}>
+<ComponentPreview style={{ flexDirection: "column" }}>
   <IcAccordionGroup groupTitle="Title of the Accordion Group">
     <IcAccordion heading="Accordion 1">
       <SlottedSVG

diff --git a/src/content/structured/components/badge/accessibility.mdx b/src/content/structured/components/badge/accessibility.mdx
@@ -25,11 +25,11 @@ Badges provide people with a quick alert of indicating that something new is pre
 
 ## For Assistive Technology
 
-As badges can be displayed or update due to a change in information, such as the number of new emails in an inbox, it is important to make this status change announced by a screen reader. Applying a live region will make sure that a screen reader will announce the change as it happens without requiring the element to be in focus. 
+As badges can be displayed or update due to a change in information, such as the number of new emails in an inbox, it is important to make this status change announced by a screen reader. Applying a live region will make sure that a screen reader will announce the change as it happens without requiring the element to be in focus.
 
 Badges allow an accessible label to be provided to add context to what is shown visibly. This can help people who use screen readers understand it better as they may not be able to perceive the visual context of the badge. For example, a badge showing 10 new notifications on an inbox button may be understandable to a sighted user from just the number ‘10’ on the visible label. However, it may aid a screen reader user to include ‘10 new notifications’ in its accessible label. Just make sure to always include the visible label within the accessible label.
 
-## Based on 
+## Based on
 
 <ul>
   <li>
@@ -38,12 +38,13 @@ Badges allow an accessible label to be provided to add context to what is shown
       href="https://www.nngroup.com/articles/indicators-validations-notifications/"
       rel="noreferer noopener nofollow"
     >
-      Indicators, validations and notifications: Pick the correct communication option
+      Indicators, validations and notifications: Pick the correct communication
+      option
     </ic-link>
     , Nielsen Norman Group, published 26 July 2015, accessed August 2023
   </li>
 </ul>
 
 ## Testing
 
-We’ve tested this component against WCAG 2.1 Level AA. It’s been tested with NVDA and VoiceOver, and several different users with different interaction methods. 
+We’ve tested this component against WCAG 2.1 Level AA. It’s been tested with NVDA and VoiceOver, and several different users with different interaction methods.