Merge pull request #1137 from mi6/develop

Develop -> Main

audit-ci.json

@@ -27,6 +27,9 @@
     "GHSA-3h5v-q93c-6h6q",
     "GHSA-25hc-qcg6-38wj",
     "GHSA-952p-6rrq-rcjv",
-    "GHSA-4vvj-4cpr-p986"
+    "GHSA-4vvj-4cpr-p986",
+    "GHSA-m6fv-jmcg-4jfg",
+    "GHSA-cm22-4g7w-348p",
+    "GHSA-9wv6-86v2-598j"
   ]
 }

package.json

@@ -11,13 +11,13 @@
     "@mdx-js/mdx": "^1.6.22",
     "@mdx-js/react": "^1.6.22",
     "@stackblitz/sdk": "^1.9.0",
-    "@ukic/canary-docs": "^2.0.0-canary.20",
-    "@ukic/canary-react": "^2.0.0-canary.24",
-    "@ukic/canary-web-components": "^2.0.0-canary.24",
-    "@ukic/docs": "^2.13.1",
+    "@ukic/canary-docs": "^2.0.0-canary.21",
+    "@ukic/canary-react": "^2.0.0-canary.25",
+    "@ukic/canary-web-components": "^2.0.0-canary.25",
+    "@ukic/docs": "^2.13.2",
     "@ukic/fonts": "^2.6.2",
-    "@ukic/react": "^2.27.1",
-    "@ukic/web-components": "^2.27.1",
+    "@ukic/react": "^2.28.0",
+    "@ukic/web-components": "^2.28.0",
     "@xmldom/xmldom": "^0.8.4",
     "audit-ci": "^6.6.1",
     "clsx": "^1.1.1",

src/components/ComponentGallery/index.tsx

@@ -41,6 +41,7 @@ import Toast from "./ComponentImages/toast-comp-gallery.png";
 import Togglebutton from "./ComponentImages/toggle-button-comp-gallery.png";
 import Tooltip from "./ComponentImages/tooltip-comp-gallery.png";
 import Topnavigation from "./ComponentImages/top-navigation-comp-gallery.png";
+import Treeview from "./ComponentImages/tree-view-comp-gallery.png";
 import Typography from "./ComponentImages/typography-comp-gallery.png";
 import PlaceHolder from "./ComponentImages/placeholder-comp-gallery.png";
 
@@ -84,6 +85,7 @@ const ComponentImages: { [key: string]: any } = {
   Togglebutton,
   Tooltip,
   Topnavigation,
+  Treeview,
   Typography,
 };
 
@@ -103,7 +105,7 @@ const ComponentGallery: React.FC = () => {
           <GatsbyLink to={path}>
             <ic-card message={subTitle} full-width clickable>
               <img
-                src={ComponentImages[title.replace(/ /g, "")] || PlaceHolder}
+                src={ComponentImages[title.replace(/[- ]/g, "")] || PlaceHolder}
                 slot="image-top"
                 alt={title}
                 width="100%"

src/content/structured/accessibility/coding/index.mdx

@@ -3,7 +3,7 @@ path: "/accessibility/coding"
 
 navPriority: 4
 
-date: "2022-11-15"
+date: "2024-09-11"
 
 title: "Coding for accessibility"
 
@@ -41,120 +41,3 @@ Planning for [full manual testing](/accessibility/testing/manual-testing/#full-m
 The Design System and its UI Kit includes automated, manual and user-led accessibility testing. We are confident our components and patterns exceed minimum accessibility standards.
 
 Check whether other third-party external libraries you use have been tested. Consider if the vendor or community is performing enough accessibility testing.
-
-## References
-
-The content in this section has been adapted from the following resources:
-
-<ul>
-  <li>
-    <ic-link
-      target="_blank"
-      href="https://www.w3schools.com/html/html5_syntax.asp"
-      rel="noreferer noopener nofollow"
-    >
-      HTML Style Guide and Coding Conventions
-    </ic-link>
-    . W3Schools. Accessed 10 November 2021.
-  </li>
-  <li>
-    <ic-link
-      target="_blank"
-      href="https://www.webfx.com/blog/web-design/20-html-best-practices-you-should-follow"
-      rel="noreferer noopener nofollow"
-    >
-      20 HTML Best Practices You Should Follow
-    </ic-link>
-    . WebFX. Accessed 10 November 2021.
-  </li>
-  <li>
-    <ic-link
-      target="_blank"
-      href="https://blog.tbhcreative.com/2015/08/10-best-practices-in-html.html"
-      rel="noreferer noopener nofollow"
-    >
-      10 HTML best practices for beginners
-    </ic-link>
-    . TBH Creative. Accessed 10 November 2021.
-  </li>
-  <li>
-    <ic-link
-      target="_blank"
-      href="https://medium.com/oceanize-geeks/15-html-best-practices-that-developers-should-know-cb02473d293f"
-      rel="noreferer noopener nofollow"
-    >
-      15 HTML Best Practices That Developers Should Know
-    </ic-link>
-    . Medium. Accessed 10 November 2021.
-  </li>
-  <li>
-    <ic-link
-      target="_blank"
-      href="https://medium.com/swlh/10-best-practices-for-html-542fb923b93"
-      rel="noreferer noopener nofollow"
-    >
-      10 Best Practices for HTML
-    </ic-link>
-    . Medium. Accessed 10 November 2021.
-  </li>
-  <li>
-    <ic-link
-      target="_blank"
-      href="https://code.tutsplus.com/tutorials/30-html-best-practices-for-beginners--net-4957"
-      rel="noreferer noopener nofollow"
-    >
-      30 HTML Best Practices for Beginners
-    </ic-link>
-    . Envato Tuts Plus. Accessed 10 November 2021.
-  </li>
-  <li>
-    <ic-link
-      target="_blank"
-      href="https://github.com/hail2u/html-best-practices"
-      rel="noreferer noopener nofollow"
-    >
-      HTML Best Practices
-    </ic-link>
-    . GitHub. Accessed 10 November 2021.
-  </li>
-  <li>
-    <ic-link
-      target="_blank"
-      href="https://learn.shayhowe.com/html-css/writing-your-best-code"
-      rel="noreferer noopener nofollow"
-    >
-      Writing Your Best Code, Learn to Code HTML & CSS
-    </ic-link>
-    . Shay Howe. Accessed 10 November 2021.
-  </li>
-  <li>
-    <ic-link
-      target="_blank"
-      href="https://www.themelocation.com/best-html5-practices/"
-      rel="noreferer noopener nofollow"
-    >
-      30 Best HTML5 Practices
-    </ic-link>
-    , Themelocation. Accessed 10 November 2021.
-  </li>
-  <li>
-    <ic-link
-      target="_blank"
-      href="https://www.aspirationhosting.com/best-practices/"
-      rel="noreferer noopener nofollow"
-    >
-      Best Practices in HTML that Web Developers Should Adopt
-    </ic-link>
-    . Aspiration Hosting. Accessed 10 November 2021.
-  </li>
-  <li>
-    <ic-link
-      target="_blank"
-      href="https://dev.to/alvaromontoro/allow-end-user-styling-overrides-2467"
-      rel="noreferer noopener nofollow"
-    >
-      Allow end-user styling overrides
-    </ic-link>
-    . DEV.to. Accessed 10 November 2021.
-  </li>
-</ul>

src/content/structured/community/index.mdx

@@ -1,7 +1,7 @@
 ---
 path: "/community"
 
-date: "2024-05-07"
+date: "2024-09-12"
 
 title: "Community"
 
@@ -19,3 +19,41 @@ We hope to demonstrate our approach to software and inclusive design.
 - See our [roadmap](/community/roadmap) for an overview of recent work, current focus and work we have planned.
 - Learn how you can [contribute](/community/contribute) using the [contribution criteria](/community/contribute-criteria).
 - How our community approaches design through our [design principles](/get-started/design-principles).
+
+## More open source from the Intelligence Community
+
+Our Design System enables MI6, MI5 and GCHQ to build usable, consistent and accessible apps and services.
+
+Whilst most of our work is secret and for internal eyes only, there is a small number of open source projects from our community and partners.
+
+<ul>
+  <li>
+    <ic-link
+      target="_blank"
+      href="https://github.com//mi6"
+      rel="noreferer noopener nofollow"
+    >
+      MI6 GitHub
+    </ic-link>
+  </li>
+  <li>
+    <ic-link
+      target="_blank"
+      href="https://github.com/gchq"
+      rel="noreferer noopener nofollow"
+    >
+      GCHQ GitHub
+    </ic-link>
+  </li>
+  <li>
+    <ic-link
+      target="_blank"
+      href="https://gchq.github.io/LD-Explorer/"
+      rel="noreferer noopener nofollow"
+    >
+      LD-Explorer
+    </ic-link>{" "}
+    &ndash; A tool for easily exploring and experimenting with linked data
+    resources directly from the browser.
+  </li>
+</ul>

src/content/structured/components/card-horizontal/guidance.mdx

@@ -41,14 +41,14 @@ For more information on Canary components, read our approach to [releases and ve
   Additional details on the props and events for this component can be found in
   the{" "}
   <IcLink
-    href="https://mi6.github.io/ic-ui-kit/branches/develop/canary-web-components/?path=/docs/web-components-card-horizontal--docs"
+    href="https://mi6.github.io/ic-ui-kit/branches/develop/canary-web-components/?path=/docs/web-components-horizontal-card--docs"
     target="_blank"
   >
     Canary web components
   </IcLink>{" "}
   and{" "}
   <IcLink
-    href="https://mi6.github.io/ic-ui-kit/branches/develop/canary-react/?path=/docs/react-components-card-horizontal--docs"
+    href="https://mi6.github.io/ic-ui-kit/branches/develop/canary-react/?path=/docs/react-components-horizontal-card--docs"
     target="_blank"
   >
     Canary React

src/content/structured/components/links/accessibility.mdx

@@ -1,13 +1,13 @@
 ---
 path: "/components/link/accessibility"
 
-date: "2024-04-15"
+date: "2024-09-03"
 
 title: "Link"
 
 status: "BETA"
 
-subTitle: "Links can be used either as standalone components or inline with text."
+subTitle: "Links can be used to navigate to different pages or sections of a page."
 
 contribute: "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/components/link"
 

src/content/structured/components/links/code.mdx

@@ -1,13 +1,13 @@
 ---
 path: "/components/link/code"
 
-date: "2024-05-31"
+date: "2024-09-03"
 
 title: "Link"
 
 status: "BETA"
 
-subTitle: "Links can be used either as standalone components or inline with text."
+subTitle: "Links can be used to navigate to different pages or sections of a page."
 
 contribute: "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/components/link"
 

src/content/structured/components/links/guidance.mdx

@@ -3,13 +3,13 @@ path: "/components/link"
 
 navPriority: 20
 
-date: "2023-07-28"
+date: "2023-09-03"
 
 title: "Link"
 
 status: "BETA"
 
-subTitle: "Links can be used either as standalone components or inline with text."
+subTitle: "Links can be used to navigate to different pages or sections of a page."
 
 contribute: "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/components/link"
 
@@ -28,35 +28,22 @@ import linksFig3 from "./images/use-a-button-when-displaying-a-clickable-action.
 import linksFig4 from "./images/dont-use-a-link-to-initiate-an-action.png";
 import linksFig5 from "./images/when-using-inline-links-always-use-a-different-colour-to-the-adjacent-text.png";
 import linksFig6 from "./images/avoid-using-the-same-colour-style-as-the-adjacent-text.png";
-import linksFig7 from "./images/use-the-monochromatic-variant-when-listing-standalone-links.png";
+import linksFig7 from "./images/use-the-monochromatic-variant-when-listing-links.png";
 import linksFig8 from "./images/do-not-use-bad-link-text.png";
 
-## Component variants
+## Component demo
 
-### Standalone
-
-Standalone links are positioned separately from other text content.
-
-A standalone link can include a launch icon to the right of the link for clarity.
+Links can include a launch icon to the right of the link for clarity.
 
 <ComponentPreview>
   <IcTypography>
+    Return to the{" "}
     <IcLink href="/components/link" target="_blank">
-      About our coffees
+      café homepage
     </IcLink>
   </IcTypography>
 </ComponentPreview>
 
-### Inline
-
-Inline links are contained within other text elements.
-
-<ComponentPreview>
-  <IcTypography>
-    Return to the <IcLink href="/components/link">café homepage</IcLink>
-  </IcTypography>
-</ComponentPreview>
-
 ## When to use
 
 Use links to navigate to a new page.
@@ -111,24 +98,24 @@ Use default appearance links when used inline with other text. If the text appea
 <DoubleDoDontCaution>
   <DoDontCaution
     imageSrc={linksFig5}
-    imageAlt="An example paragraph with black text, featuring an inline link with blue colour styling."
-    caption="When using inline links, always use a different colour to the adjacent text."
+    imageAlt="An example paragraph with black text, featuring a link with blue colour styling."
+    caption="When using links, always use a different colour to the adjacent text."
     state="good"
   />
   <DoDontCaution
     imageSrc={linksFig6}
-    imageAlt="An example paragraph with black text, featuring an inline link the same colour styling."
+    imageAlt="An example paragraph with black text, featuring a link the same colour styling."
     caption="Avoid using the same link appearance as the adjacent text. Only use the same appearance if the text is used on a dark background."
     state="bad"
   />
 </DoubleDoDontCaution>
 
-Use the light or dark appearance links when listing a series of standalone links on different coloured backgrounds.
+Use the light or dark appearance links when listing a series of links on different coloured backgrounds.
 
 <DoDontCaution
   imageSrc={linksFig7}
-  imageAlt="An image of a footer with two navigation groups titled ‘Services’ and ‘Policy’ which house a list of several standalone links. Every text element in the footer is white, including the hyperlinks."
-  caption="Use light appearance links when displaying standalone links on a dark background."
+  imageAlt="An image of a footer with two navigation groups titled ‘Services’ and ‘Policy’ which house a list of several links. Every text element in the footer is white, including the hyperlinks."
+  caption="Use light appearance links when displaying links on a dark background."
   state="good"
 />
 

src/content/structured/components/radio/code.mdx

@@ -185,7 +185,11 @@ export const conditionalDynamic = [
   name="radio-group-3"
   label="Do you have any special requests?"
 >
-  <ic-radio-option value="request" label="Yes, I want to modify my order">
+  <ic-radio-option 
+    value="request" 
+    label="Yes, I want to modify my order"
+    additional-field-display="dynamic"
+  >
     <ic-text-field
       slot="additional-field"
       label="Please provide some additional information"
@@ -208,7 +212,11 @@ export const conditionalDynamic = [
   name="radio-group-3"
   label="Do you have any special requests?"
 >
-  <IcRadioOption value="request" label="Yes, I want to modify my order">
+  <IcRadioOption 
+    value="request" 
+    label="Yes, I want to modify my order" 
+    additionalFieldDisplay="dynamic"
+  >
     <IcTextField
       slot="additional-field"
       label="Please provide some additional information"