### Install Dependencies and Start Server (Yarn)

Source: https://github.com/mi6/ic-design-system/blob/main/CONTRIBUTING.md

Install project dependencies using Yarn and start the development server. This involves removing the package-lock.json file before running yarn install.

```bash
rm package-lock.json
yarn install
yarn run start
```

--------------------------------

### Install Dependencies and Start Server (NPM)

Source: https://github.com/mi6/ic-design-system/blob/main/CONTRIBUTING.md

Install project dependencies using npm and start the development server. Use --legacy-peer-deps if encountering peer dependency issues.

```bash
npm install --legacy-peer-deps
npm start
```

--------------------------------

### Webpack Entry Point Setup

Source: https://github.com/mi6/ic-design-system/blob/main/src/content/structured/get-started/web-components.mdx

Configure the entry file for Webpack to import fonts, core styles, and define custom elements. This example assumes the entry file is src/index.js.

```jsx
//src/index.js
import "@ukic/fonts/dist/fonts.css";
import "@ukic/web-components/dist/core/core.css";

import { defineCustomElements } from "@ukic/web-components/loader";
defineCustomElements();
```

--------------------------------

### Install and Run ICDS Website Locally

Source: https://github.com/mi6/ic-design-system/blob/main/README.md

Commands to install dependencies, start the development server, and build the production version of the ICDS website.

```bash
// dev mode
npm i
npm run start

// production build outputs to ./dist
npm run clean
npm run build
```

--------------------------------

### Web Component Tabs - Compact Example

Source: https://github.com/mi6/ic-design-system/blob/main/src/content/structured/components/navigation/tabs/code.mdx

This snippet shows how to implement a compact tab interface using the IcTabContext, IcTabGroup, IcTab, and IcTabPanel web components. It requires no additional setup beyond including the components.

```html
<ic-tab-context class="tabs">
  <ic-tab-group label="Example tab group">
    <ic-tab>Ingredients</ic-tab>
    <ic-tab>Method</ic-tab>
    <ic-tab>History</ic-tab>
    <ic-tab>Drinks</ic-tab>
    <ic-tab>Recipes</ic-tab>
  </ic-tab-group>
  <ic-tab-panel>Tab One - Ingredients</ic-tab-panel>
  <ic-tab-panel>Tab Two - Method</ic-tab-panel>
  <ic-tab-panel>Tab Three - History</ic-tab-panel>
  <ic-tab-panel>Tab Four - Drinks</ic-tab-panel>
  <ic-tab-panel>Tab Five - Recipes</ic-tab-panel>
</ic-tab-context>
```

--------------------------------

### Component Test File Example

Source: https://github.com/mi6/ic-design-system/blob/main/src/content/structured/get-started/testing-with-jest-and-rtl.mdx

This example demonstrates testing a specific component, likely involving rendering it and asserting its initial state or behavior.

```javascript
import { render, screen } from "@testing-library/react";
import Component from "./Component";

describe("Component", () => {
  it("renders correctly", () => {
    render(<Component />);
    expect(screen.getByText("Some Text")).toBeInTheDocument();
  });
});
```

--------------------------------

### Top Navigation with various components

Source: https://github.com/mi6/ic-design-system/blob/main/src/content/structured/patterns/top-navigation-layout.mdx

Implement the IcTopNavigation component with an app icon, search bar, navigation buttons for profile and settings, and navigation items. This example demonstrates a comprehensive setup for a typical application header.

```tsx
const alignment = "center";
  const useStyles = createUseStyles({
    main: { minHeight: "100vh", display: "flex" },
    mainContentDiv: {
      border: "var(--ic-border-width) dashed var(--ic-architectural-400)",
      padding: "var(--ic-space-md)",
      flex: 1,
    },
    mainSectionContainer: { display: "flex", flex: 1 },
  });
  const classes = useStyles(); 
  return (
    <>
      <IcClassificationBanner />
      <IcSkipLink target="main" />
      <IcTopNavigation
        appTitle="[Enter your application name]"
        status="alpha"
        version="v0.0.7"
        contentAligned={alignment}
      >
        <SlottedSVG
          slot="app-icon"
          xmlns="http://www.w3.org/2000/svg" 
          viewBox="0 0 24 24" 
          fill="#000000"
          width="24"
          height="24" 
        > 
          <path d="M0 0h24v24H0V0z" fill="none" />
          <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z" />
        </SlottedSVG>
        <IcSearchBar slot="search" placeholder="Search" label="Search" />
        <IcNavigationButton label="Profile" slot="buttons">
          <SlottedSVG
            slot="icon"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            width="24"
            height="24" 
            path={mdiAccount}
          />
        </IcNavigationButton>
        <IcNavigationButton label="Settings" slot="buttons">
          <SlottedSVG
            slot="icon"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            width="24"
            height="24" 
            path={mdiCog}
          />
        </IcNavigationButton>
        <IcNavigationButton label="Edit" slot="buttons">
          <SlottedSVG
            slot="icon"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            width="24"
            height="24" 
            path={mdiPencil}
          />
        </IcNavigationButton>
        <IcNavigationItem
          slot="navigation"
          label="[navigationOption]"
          href="#"
          selected
        />
        <IcNavigationItem slot="navigation" label="[navigationOption]" href="#" />
        <IcNavigationItem slot="navigation" label="[navigationOption]" href="#" />
        <IcNavigationItem slot="navigation" label="[navigationOption]" href="#" />
        <IcNavigationItem slot="navigation" label="[navigationOption]" href="#" />
        <IcNavigationItem slot="navigation" label="[navigationOption]" href="#" />
      </IcTopNavigation>
      <main id="main" className={classes.main}>
        <IcSectionContainer className={classes.mainSectionContainer} aligned={alignment}>
          <div className={classes.mainContentDiv}>
            <IcTypography variant="h2">
              <h2>Example heading</h2>
            </IcTypography>
            <IcTypography variant="subtitle-large">
              <p>Example sub-heading</p>
            </IcTypography>
            <IcTypography>
              <p>
                Remove this div and add your custom content in IcSectionContainer.
              </p>
            </IcTypography>
          </div>
        </IcSectionContainer>
      </main>
      <IcFooter
        aligned={alignment}
        caption="This information is exempt under the Freedom of Information Act 2000 (FOIA) and may be exempt under other UK information legislation."
        description="This pattern was built using the Intelligence Community Design System (ICDS).">
        <IcFooterLink slot="link" href="">
          [footerLink]
        </IcFooterLink>
        <IcFooterLink slot="link" href="">
          [footerLink]
        </IcFooterLink>
        <IcFooterLink slot="link" href="">
          [footerLink]
        </IcFooterLink>
        <IcFooterLink slot="link" href="">
          [footerLink]
        </IcFooterLink>
        <IcFooterLink slot="logo" href="/">
          <SlottedSVG
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            fill="#FFFFFF"
            width="48"
            height="48"
          >
            <path
              d="M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z"
              fill="currentColor"
            />
          </SlottedSVG>
        </IcFooterLink>
      </IcFooter>
    </>
  )
```

--------------------------------

### Install UI Kit Components

Source: https://github.com/mi6/ic-design-system/blob/main/src/content/structured/get-started/install-components.mdx

Install the UI Kit components and fonts using npm. Choose the appropriate command based on whether you are using web components or React.

```shell
# Web components, Angular, Vue, Svelte
npm install @ukic/web-components @ukic/fonts

# React
npm install @ukic/react @ukic/fonts
```

--------------------------------

### Side Navigation with Back to Top Component

Source: https://github.com/mi6/ic-design-system/blob/main/src/content/structured/patterns/side-navigation-layout.mdx

This example shows a side navigation setup that includes a back-to-top component. It's useful for long pages where users need to quickly return to the top.

```html
<div class="parent-div">
    <ic-classification-banner></ic-classification-banner>
    <ic-skip-link target="main"><ic-skip-link>
    <ic-side-navigation
      app-title="[Enter your application name]"
      status="alpha"
      version="v0.0.7"
    >
      <svg
        slot="app-icon"
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 24 24"
        width="24"
        height="24"
        fill="#000000"
      >
        <path d="M0 0h24v24H0V0z" fill="none" />
        <path
          d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z"
        />
      </svg>
      <ic-navigation-item
        slot="primary-navigation"
        label="[navigationOption]"
        href="#"
        selected
      >
        <svg
          slot="icon"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          width="24"
          height="24"
        >
          <path
            d="M12 5.69L17 10.19V18H15V12H9V18H7V10.19L12 5.69M12 3L2 12H5V20H11V14H13V20H19V12H22"
          />
        </svg>
      </ic-navigation-item>
      <ic-navigation-item
        slot="primary-navigation"
        label="[navigationOption]"
        href="#"
      >
        <svg
          slot="icon"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          width="24"
          height="24"
        >
          <path
            d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z"
          />
        </svg>
      </ic-navigation-item>
      <ic-navigation-item
        slot="primary-navigation"
        label="[navigationOption]"
        href="#"
      >
        <svg
          slot="icon"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          width="24"
          height="24"
        >
          <path
            d="M3,14L3.5,14.07L8.07,9.5C7.89,8.85 8.06,8.11 8.59,7.59C9.37,6.8 10.63,6.8 11.41,7.59C11.94,8.11 12.11,8.85 11.93,9.5L14.5,12.07L15,12C15.18,12 15.35,12 15.5,12.07L19.07,8.5C19,8.35 19,8.18 19,8A2,2 0 0,1 21,6A2,2 0 0,1 23,8A2,2 0 0,1 21,10C20.82,10 20.65,10 20.5,9.93L16.93,13.5C17,13.65 17,13.82 17,14A2,2 0 0,1 15,16A2,2 0 0,1 13,14L13.07,13.5L10.5,10.93C10.18,11 9.82,11 9.5,10.93L4.93,15.5L5,16A2,2 0 0,1 3,18A2,2 0 0,1 1,16A2,2 0 0,1 3,14Z"
          />
        </svg>
      </ic-navigation-item>
      <ic-navigation-item
        slot="primary-navigation"
        label="[navigationOption]"
        href="#"
      >
        <svg
          slot="icon"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          width="24"
          height="24"
        >
          <path
            d="M9,22A1,1 0 0,1 8,21V18H4A2,2 0 0,1 2,16V4C2,2.89 2.9,2 4,2H20A2,2 0 0,1 22,4V16A2,2 0 0,1 20,18H13.9L10.2,21.71C10,21.9 9.75,22 9.5,22V22H9M10,16V19.08L13.08,16H20V4H4V16H10M6,7H18V9H6V7M6,11H15V13H6V11Z"
          />
        </svg>
      </ic-navigation-item>
      <ic-divider slot="primary-navigation"></ic-divider>
      <ic-navigation-item
        slot="primary-navigation"
        label="[navigationOption]"
        href="#"
      >
        <svg
          slot="icon"

```

--------------------------------

### Top Navigation with Back to Top and Footer

Source: https://github.com/mi6/ic-design-system/blob/main/src/content/structured/patterns/top-navigation-layout.mdx

This example demonstrates a complete top navigation setup including a back-to-top component and a footer. It utilizes various components like IcClassificationBanner, IcSkipLink, IcTopNavigation, IcSearchBar, IcNavigationButton, IcNavigationItem, IcSectionContainer, IcFooter, and IcFooterLink.

```tsx
const alignment = "center";
  const useStyles = createUseStyles({
    main: { minHeight: "100vh", display: "flex" },
    mainContentDiv: {
      border: "var(--ic-border-width) dashed var(--ic-architectural-400)",
      padding: "var(--ic-space-md)",
      flex: 1,
    },
    mainSectionContainer: { display: "flex", flex: 1 },
  });
  const classes = useStyles(); 
  return (
    <>
      <IcClassificationBanner />
      <IcSkipLink target="main" />
      <IcTopNavigation
        appTitle="[Enter your application name]"
        status="alpha"
        version="v0.0.7"
        contentAligned={alignment}
      >
        <SlottedSVG
          slot="app-icon"
          xmlns="http://www.w3.org/2000/svg" 
          viewBox="0 0 24 24" 
          fill="#000000"
          width="24"
          height="24" 
        > 
          <path d="M0 0h24v24H0V0z" fill="none" />
          <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z" />
        </SlottedSVG>
        <IcSearchBar slot="search" placeholder="Search" label="Search" />
        <IcNavigationButton label="Profile" slot="buttons">
          <SlottedSVG
            slot="icon"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            width="24"
            height="24" 
            path={mdiAccount}
          />
        </IcNavigationButton>
        <IcNavigationButton label="Settings" slot="buttons">
          <SlottedSVG
            slot="icon"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            width="24"
            height="24" 
            path={mdiCog}
          />
        </IcNavigationButton>
        <IcNavigationButton label="Edit" slot="buttons">
          <SlottedSVG
            slot="icon"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            width="24"
            height="24" 
            path={mdiPencil}
          />
        </IcNavigationButton>
        <IcNavigationItem
          slot="navigation"
          label="[navigationOption]"
          href="#"
          selected
        />
        <IcNavigationItem slot="navigation" label="[navigationOption]" href="#" />
        <IcNavigationItem slot="navigation" label="[navigationOption]" href="#" />
        <IcNavigationItem slot="navigation" label="[navigationOption]" href="#" />
        <IcNavigationItem slot="navigation" label="[navigationOption]" href="#" />
        <IcNavigationItem slot="navigation" label="[navigationOption]" href="#" />
      </IcTopNavigation>
      <main id="main" className={classes.main}>
        <IcSectionContainer className={classes.mainSectionContainer} aligned={alignment}>
          <div className={classes.mainContentDiv}>
            <IcTypography variant="h2">
              <h2>Example heading</h2>
            </IcTypography>
            <IcTypography variant="subtitle-large">
              <p>Example sub-heading</p>
            </IcTypography>
            <IcTypography>
              <p>
                Remove this div and add your custom content in IcSectionContainer.
              </p>
            </IcTypography>
          </div>
        </IcSectionContainer>
      </main>
      <IcBackToTop target="main" />
      <IcFooter
        aligned={alignment}
        caption="This information is exempt under the Freedom of Information Act 2000 (FOIA) and may be exempt under other UK information legislation."
        description="This pattern was built using the Intelligence Community Design System (ICDS)."
      >
        <IcFooterLink slot="link" href="">
          [footerLink]
        </IcFooterLink>
        <IcFooterLink slot="link" href="">
          [footerLink]
        </IcFooterLink>
        <IcFooterLink slot="link" href="">
          [footerLink]
        </IcFooterLink>
        <IcFooterLink slot="link" href="">
          [footerLink]
        </IcFooterLink>
        <IcFooterLink slot="link" href="">
          [footerLink]
        </IcFooterLink>
        <IcFooterLink slot="logo" href="/">
          <SlottedSVG
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            fill="#FFFFFF"
            width="48"
            height="48"
          >
            <path
              d="M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z"
              fill="currentColor"
            />
          </SlottedSVG>
        </IcFooterLink>
      </IcFooter>
    </>
  )
```

--------------------------------

### IcChip Component Examples

Source: https://github.com/mi6/ic-design-system/blob/main/src/content/structured/components/feedback-progress/chips/guidance.mdx

Demonstrates the usage of IcChip components with labels and icons. Includes dismissible and static chip examples.

```jsx
<IcChip label="Americano" dismissible>
    <svg
      slot="icon"
      viewBox="0 0 24 24"
      fill="currentColor"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path d="M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z" />
    </svg>
  </IcChip>
  <IcChip label="Cappuccino">
    <svg
      slot="icon"
      viewBox="0 0 24 24"
      fill="currentColor"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path d="M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z" />
    </svg>
  </IcChip>
  <IcActionChip label="+2 more" />
```

--------------------------------

### Top Navigation with Back to Top Example

Source: https://github.com/mi6/ic-design-system/blob/main/src/content/structured/patterns/top-navigation-layout.mdx

Combines the IcTopNavigation with IcBackToTop and IcFooter components to create a complete page layout. This example shows how to integrate these components for a full-page structure.

```jsx
<>
      <IcClassificationBanner />
      <IcSkipLink target="main" />
      <IcTopNavigation
        appTitle="[Enter your application name]"
        status="alpha"
        version="v0.0.7"
        contentAligned={alignment}
      >
        <SlottedSVG
          slot="app-icon"
          xmlns="http://www.w3.org/2000/svg" 
          viewBox="0 0 24 24" 
          fill="#000000"
          width="24"
          height="24" 
        > 
          <path d="M0 0h24v24H0V0z" fill="none" />
          <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z" />
        </SlottedSVG>
        <IcSearchBar slot="search" placeholder="Search" label="Search" />
        <IcNavigationButton label="Profile" slot="buttons">
          <SlottedSVG
            slot="icon"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            width="24"
            height="24" 
            path={mdiAccount}
          />
        </IcNavigationButton>
        <IcNavigationButton label="Settings" slot="buttons">
          <SlottedSVG
            slot="icon"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            width="24"
            height="24" 
            path={mdiCog}
          />
        </IcNavigationButton>
        <IcNavigationButton label="Edit" slot="buttons">
          <SlottedSVG
            slot="icon"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            width="24"
            height="24" 
            path={mdiPencil}
          />
        </IcNavigationButton>
        <IcNavigationItem
          slot="navigation"
          label="[navigationOption]"
          href="#"
          selected
        />
        <IcNavigationItem slot="navigation" label="[navigationOption]" href="#" />
        <IcNavigationItem slot="navigation" label="[navigationOption]" href="#" />
        <IcNavigationItem slot="navigation" label="[navigationOption]" href="#" />
        <IcNavigationItem slot="navigation" label="[navigationOption]" href="#" />
        <IcNavigationItem slot="navigation" label="[navigationOption]" href="#" />
      </IcTopNavigation>
      <main id="main" className={classes.main}>
        <IcSectionContainer className={classes.mainSectionContainer} aligned={alignment}>
          <div className={classes.mainContentDiv}>
            <IcTypography variant="h2">
              <h2>Example heading</h2>
            </IcTypography>
            <IcTypography variant="subtitle-large">
              <p>Example sub-heading</p>
            </IcTypography>
            <IcTypography>
              <p>
                Remove this div and add your custom content in IcSectionContainer.
              </p>
            </IcTypography>
          </div>
        </IcSectionContainer>
      </main>
      <IcBackToTop target="main" />
      <IcFooter
        aligned={alignment}
        caption="This information is exempt under the Freedom of Information Act 2000 (FOIA) and may be exempt under other UK information legislation."
        description="This pattern was built using the Intelligence Community Design System (ICDS)."
      >
        <IcFooterLink slot="link" href="">
          [footerLink]
        </IcFooterLink>
        <IcFooterLink slot="link" href="">
          [footerLink]
        </IcFooterLink>
        <IcFooterLink slot="link" href="">
          [footerLink]
        </IcFooterLink>
        <IcFooterLink slot="link" href="">
          [footerLink]
        </IcFooterLink>
        <IcFooterLink slot="link" href="">
          [footerLink]
        </IcFooterLink>
        <IcFooterLink slot="logo" href="/">
          <SlottedSVG
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            fill="#FFFFFF"
            width="48"
            height="48"
          >
            <path
              d="M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z"
              fill="currentColor"
            />
          </SlottedSVG>
        </IcFooterLink>
      </IcFooter>
    </>
```

--------------------------------

### Install Canary Web Components

Source: https://github.com/mi6/ic-design-system/blob/main/src/content/structured/get-started/releases-versioning.mdx

Use this command to install the canary web components and associated fonts. This is for testing unstable components.

```shell
# Canary Web Components
npm i @ukic/canary-web-components @ukic/fonts
```

--------------------------------

### Web Component Dialog Example

Source: https://github.com/mi6/ic-design-system/blob/main/src/content/structured/components/feedback-progress/dialog/code.mdx

Launches a dialog with a checkbox for user agreement. This example includes the HTML structure for the dialog and the associated JavaScript for its functionality.

```html
<ic-button onclick="showDialog()">Launch dialog</ic-button>
<ic-dialog 
  id="interactive-content-dialog" 
  label="Coffee order"
  heading="Please agree to our terms and conditions"
>
  <ic-typography>
    Before continuing, please agree to our terms and conditions.
  </ic-typography>
  <ic-checkbox-group 
    name="terms" 
    label="terms and conditions"
    hide-label="true"
  >
    <ic-checkbox label="I agree to the terms and conditions." value="agree"></ic-checkbox>
  </ic-checkbox-group>
</ic-dialog>
```

```css
.parent-container {
    padding: var(--ic-space-md);
  }
  ic-checkbox-group {
    margin-top: var(--ic-space-xs)
  }
</style>
<body>
  <div class="parent-container">
    {shortCode}
  </div>
  <script>
    const dialog = document.querySelector("#interactive-content-dialog");
    const checkGroup = document.querySelector("ic-checkbox-group");
    let termsAgreed = false;
    function showDialog() {
      dialog.open = true;
    }
    function hideDialog() {
      if (dialog.open) {
        dialog.open = false;
      }
    }
    function toggleTermsAgreed() {
      termsAgreed = !termsAgreed;
    }
    function dialogConfirmed(ev) {
      const message = (termsAgreed) ? "Terms agreed" : "Terms not agreed";
      alert(message);
      ev.target.open = false;
    }
    dialog.addEventListener("icDialogConfirmed", dialogConfirmed);
    dialog.addEventListener("icDialogClosed", hideDialog);
    checkGroup.addEventListener("icChange", toggleTermsAgreed);
  </script>
```

--------------------------------

### Install React Components with npm

Source: https://github.com/mi6/ic-design-system/blob/main/src/content/structured/get-started/react.mdx

Install the React components and fonts packages using npm. Ensure you have a clean package-lock.json if switching from yarn.

```shell
# using npm
npm install @ukic/react @ukic/fonts
```

```shell
# using yarn
rm package-lock.json
yarn add @ukic/react @ukic/fonts
```

--------------------------------

### Install ICDS Packages and Run Codemod

Source: https://github.com/mi6/ic-design-system/blob/main/src/content/structured/get-started/migrating-to-v3.mdx

Install the React and Web Components packages, then execute the codemod with a directory and an optional test flag.

```console
- npm i @ukic/react
- npm i @ukic/web-components
- npx @ukic/codemod <dir> <test>
```

--------------------------------

### React Testing Library Test Example

Source: https://github.com/mi6/ic-design-system/blob/main/src/content/structured/get-started/testing-with-jest-and-rtl.mdx

This snippet demonstrates a basic test case using React Testing Library to render and interact with a component. It assumes necessary imports and setup are in place.

```javascript
import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import Button from "./Button";

describe("Button component", () => {
  it("renders with default props", () => {
    render(<Button>Click me</Button>);
    expect(screen.getByText("Click me")).toBeInTheDocument();
  });

  it("calls onClick handler when clicked", async () => {
    const handleClick = jest.fn();
    render(<Button onClick={handleClick}>Click me</Button>);
    await userEvent.click(screen.getByText("Click me"));
    expect(handleClick).toHaveBeenCalledTimes(1);
  });
});
```

--------------------------------

### Basic Search Bar Implementation

Source: https://github.com/mi6/ic-design-system/blob/main/src/content/structured/components/inputs/search-bar/guidance.mdx

This example demonstrates a basic implementation of the search bar component with a label, options for suggestions, and event handlers for change and submit actions. It also includes a placeholder for user input.

```jsx
import { IcSearchBar } from "@ukic/react";

<IcSearchBar
  label="What is your favourite coffee?"
  options={[
    { label: "Espresso", value: "espresso" },
    { label: "Double Espresso", value: "doubleespresso" },
    { label: "Flat White", value: "flatwhite" },
    { label: "Cappuccino", value: "cappuccino" },
    { label: "Americano", value: "americano" },
    { label: "Mocha", value: "mocha" },
  ]}
  onIcChange={(ev) => console.log("onIcChange", ev.detail.value)}
  onIcSubmitSearch={(ev) => console.log("onIcSubmitSearch", ev.detail.value)}
  placeholder="Start typing to search…"
/>
```