### Basic Grid Layout Setup

Source: https://newskit.co.uk/components/grid-layout

This snippet demonstrates the basic setup of the GridLayout component with default or empty values for columns and rows, and specified gaps. It's a starting point for creating a grid structure.

```jsx
import React from 'react';
import { GridLayout } from 'newskit';

export default () => (
  <GridLayout
    columns=""
    rows=""
    columnGap="space020"
    autoFlow="row"
    autoColumns=""
    autoRows=""
    rowGap="space020"
    justifyContent=""
    alignContent=""
    alignItems=""
    justifyItems=""
  />
);
```

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

### Basic Menu Example

Source: https://newskit.co.uk/components/menu

A simple example demonstrating how to render a medium-sized menu aligned to the center. Overrides can be used for custom styling.

```jsx
import React from 'react';
import { Menu } from 'newskit';

export default () => (
  <Menu size="medium" align="center" overrides={{}} />
);
```

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

### Basic Modal Example

Source: https://newskit.co.uk/components/modal

A simple example of how to render a modal component. Ensure the 'newskit' library is imported.

```javascript
import React from 'react';
import { Modal } from 'newskit';

export default () => <Modal header="" />;
```

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

### Basic Toast Example

Source: https://newskit.co.uk/components/toast

A simple example demonstrating how to render a Toast component with an icon, title, actions, and a message. Ensure you have the necessary imports from 'newskit'.

```jsx
import React from 'react';
import { Toast } from 'newskit';

export default () => (
  <Toast
    icon="your icon here"
    title="Toast title"
    actions="your actions here"
  >
    Toast message will display here
  </Toast>
);
```

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

### Basic Structured List Setup

Source: https://newskit.co.uk/components/structured-list

This snippet shows the basic setup for rendering a StructuredList component. Ensure you have React and the StructuredList component imported.

```javascript
import React from 'react';
import { StructuredList } from 'newskit';

export default () => <StructuredList />;
```

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

### Install NewsKit with yarn

Source: https://newskit.co.uk/getting-started/code/engineering-quickstart

Install the NewsKit package and its Emotion dependencies using yarn.

```bash
yarn add newskit @emotion/react @emotion/styled
```

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

### Get Responsive Motion Example

Source: https://newskit.co.uk/components/utils/get-defaults

Retrieves responsive motion tokens like transitionDuration. It can return a single value or a media query object.

```javascript
getResponsiveMotion('transitionDuration', 'drawer.panel', 'panel', 'motionDuration')(props)
```

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

### Create a Basic React Component

Source: https://newskit.co.uk/getting-started/code/grid-layout-step-by-step

Initial setup for a React component that will later be enhanced with NewsKit components.

```tsx
import React from 'react';

export const Card = () => <p>Nothing here yet</p>;

```

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

### Basic Text Input Example

Source: https://newskit.co.uk/components/text-input

A basic example of how to render a Text Input component with a placeholder and default overrides.

```jsx
import React from 'react';
import { TextInput } from 'newskit';

export default () => (
  <TextInput
    size="medium"
    overrides={{ label: {}, input: {}, assistiveText: {} }}
    placeholder="Placeholder"
  />
);

```

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

### Get Responsive Size Example

Source: https://newskit.co.uk/components/utils/get-defaults

Retrieves responsive size tokens like width. It can return a single value or a media query object.

```javascript
getResponsiveSize('width', 'drawer.panel', 'panel', 'size')(props)
```

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

### Install NewsKit with npm

Source: https://newskit.co.uk/getting-started/code/engineering-quickstart

Install the NewsKit package and its Emotion dependencies using npm.

```bash
npm install newskit @emotion/react @emotion/styled
```

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

### Basic Tag Example

Source: https://newskit.co.uk/components/tag

A simple example of how to render a medium-sized tag with a link. Ensure the Tag component is imported from 'newskit'.

```javascript
import React from 'react';
import { Tag } from 'newskit';

export default () => (
  <Tag href="https://www.newskit.co.uk/" size="medium">
    Tag Content
  </Tag>
);
```

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

### Get Responsive Border Example

Source: https://newskit.co.uk/components/utils/get-defaults

Retrieves responsive border tokens like borderWidth. It can return a single value or a media query object.

```javascript
getResponsiveBorder('borderWidth', 'drawer.panel', 'panel', 'weight')(props)
```

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

### Basic LayerOrganizer Setup

Source: https://newskit.co.uk/components/layer

This snippet shows the basic setup for the LayerOrganizer component. It needs to be added at the root level of your application to create a new stacking context.

```jsx
import React from 'react';
import { LayerOrganizer } from 'newskit';

export default () => <LayerOrganizer />;
```

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

### Get Responsive Space Example

Source: https://newskit.co.uk/components/utils/get-defaults

Retrieves responsive space tokens like marginRight. It can return a single value or a media query object based on the defaultPath.

```javascript
getResponsiveSpace('marginRight', 'drawer.panel', 'panel', 'spaceInline')(props)
```

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

### Apply Transition Preset to Drawer

Source: https://newskit.co.uk/theme/presets/transition-presets

This example shows how to apply a transition preset to a Drawer component using styled-components and the getTransitionPreset utility.

```javascript
export const Drawer = styled.div`
  ${getTransitionPreset(
    `drawer.panel.left`,
    'panel',
    'nk-drawer',
    )};
`;

<Drawer
  open
  onDismiss={close}
  header="Drawer"
>
  <div>Content</div>
</Drawer>
```

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

### Standalone Link Example

Source: https://newskit.co.uk/components/link

Renders a basic standalone link. Ensure the 'href' prop is provided for navigation.

```jsx
import React from 'react';
import { LinkStandalone } from 'newskit';

export default () => (
  <LinkStandalone href="http://example.com">
    Link
  </LinkStandalone>
);

```

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

### Basic Drawer Implementation

Source: https://newskit.co.uk/components/drawer

A simple implementation of the Drawer component with left placement, no header, and no overlay. Ensure the 'newskit' library is installed.

```jsx
import React from 'react';
import { Drawer } from 'newskit';

export default () => (
  <Drawer placement="left" header="" hideOverlay inline />
);
```

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

### Basic Caption Example

Source: https://newskit.co.uk/components/caption

Renders a caption with descriptive text and credit information. Use this for standard image or video descriptions.

```jsx
import React from 'react';
import { Caption } from 'newskit';

export default () => (
  <Caption creditText="Credit by Matthew Taylor/Alamy">
    Hathersage Moor in the Peak District
  </Caption>
);
```

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

### Get Color CSS from Theme

Source: https://newskit.co.uk/components/utils/get-css-from-theme

Use getColorCssFromTheme to apply a color token from the theme to the 'color' CSS property. This is a basic usage example.

```javascript
import {getColorCssFromTheme, styled} from 'newskit';

const Paragraph = styled.p`
  text-align: center;
  ${getColorCssFromTheme('color', 'blue020')};
`;

```

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

### Compose Instrumentation Middleware

Source: https://newskit.co.uk/getting-started/code/instrumentation

Example of composing multiple instrumentation middleware functions to filter and handle events. This setup uses console and Tealium handlers with specific trigger filters.

```javascript
import {
  instrumentationHandlers,
  composeInstrumentationMiddleware,
  instrumentationMiddleware,
  EventTrigger,
  createEventInstrumentation,
} from 'newskit';

const consoleHandler1 = composeInstrumentationMiddleware(
  instrumentationHandlers.createConsoleHandler('Click event:'),
  instrumentationMiddleware.filterByTrigger(EventTrigger.Click),
);

const consoleHandler2 = composeInstrumentationMiddleware(
  instrumentationHandlers.createConsoleHandler('Swipe event:'),
  instrumentationMiddleware.filterByTrigger(EventTrigger.Swipe),
);

const consoleHandler3 = instrumentationHandlers.createConsoleHandler(
  'Some other event:',
);

const tealiumHandler = composeInstrumentationMiddleware(
  instrumentationHandlers.createTealiumHandler(),
  instrumentationMiddleware.filterByTrigger(EventTrigger.Load),
)

const handlers = [consoleHandler1, consoleHandler2, consoleHandler3, tealiumHandler];

const instrumentation = createEventInstrumentation(handlers, {
  url: 'www.my-amazing-website.com',
});
```

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

### Set up Nested Instrumentation Providers

Source: https://newskit.co.uk/getting-started/code/instrumentation

This example demonstrates setting up a root context and then nesting an InstrumentationProvider within a Rail component to add rail-specific context. The RailItem then fires a click event using the combined context.

```javascript
import React from 'react';

import {
  InstrumentationProvider,
  instrumentationHandlers,
  createEventInstrumentation,
  ThemeProvider,
  newskitLightTheme,
  EventTrigger,
  useInstrumentation,
} from 'newskit';

const rootContext = {
  pageUrl: 'www.my-amazing-website.com',
};

const instrumentation = createEventInstrumentation(
  [instrumentationHandlers.createConsoleHandler()],
  rootContext,
);

const RailItem: React.FC<{itemId: number}> = ({itemId, ...props}) => {
  const {fireEvent} = useInstrumentation();
  return (
    <button
      {...props}
      onClick={() => {
        fireEvent({
          originator: 'button',
          trigger: EventTrigger.Click,
        });
      }}
    >
      {itemId}: A really great item!
    </button>
  );
};

const Rail: React.FC <{
  railName: string;
}> = ({railName}) => (
  <div>
    <InstrumentationProvider
      context={{
        pageArea: 'rail',
        railName,
      }}
    >
      <h3>{railName}</h3>
      <RailItem itemId={1} />
      <RailItem itemId={2} />
    </InstrumentationProvider>
  </div>
);

const App = () => (
  <NewsKitProvider theme={newskitLightTheme} instrumentation={instrumentation}>
    <Rail railName="Some great rail" />
  </NewsKitProvider>
);
```

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

### Example Usage of Newskit Responsive Style Utilities

Source: https://newskit.co.uk/components/utils/get-defaults

Demonstrates how to create a custom theme and use various Newskit utility functions to apply responsive styles to a custom component and its sub-components. This includes setting style presets, typography, spacing, borders, and motion.

```typescript
import {
  ThemeProvider,
  createTheme,
  newskitLightTheme,
  StylePresetStyleKeys,
  MQ,
  styled,
  getStylePreset,
  getTypographyPreset,
  getResponsiveSpace,
  getResponsiveSize,
  getResponsiveMotion,
  getResponsiveBorder,
} from 'newskit';

const customTheme = createTheme('newskit-light-custom', {
  baseTheme: newskitLightTheme,
  themeOverrider: () => ({
    componentDefaults: {
      customComponent: {
        stylePreset: 'customComponentStyles',
        typographyPreset: 'customComponentTypography',
        spaceInline: 'space040',
        spaceInset: 'spaceInsetSquish020',
        nkComponent1: {
          stylePreset: 'nkComponent1Styles',
          spaceInline: 'space030',
          spaceStack: 'space030',
          width: '100%',
          borderWidth: '2px',
          motionDuration: '100ms',
        },
        nkComponent2: {
          stylePreset: 'nkComponent2Styles',
          spaceStack: 'space020',
        },
      },
    },
  }),
});

export interface CustomComponentProps {
  overrides?: {
    stylePreset?: MQ<StylePresetStyleKeys>;
    typographyPreset?: MQ<string>;
    spaceInline?: MQ<string>;
    spaceInset?: MQ<string>;
    nkComponent1: {
      stylePreset?: MQ<StylePresetStyleKeys>;
      spaceInline?: MQ<string>;
      spaceStack?: MQ<string>;
      width?: MQ<string>;
      borderWidth: MQ<string>;
      motionDuration: MQ<string>;
    };
    nkComponent2: {
      stylePreset?: MQ<StylePresetStyleKeys>;
      spaceStack?: MQ<string>;
    };
  };
}

const StyledContainer = styled.div<CustomComponentProps>`
  ${getTypographyPreset('customComponent', '', {withCrop: true})};
  ${getStylePreset('customComponent', '')};
  ${getResponsiveSpace('padding', 'customComponent', '', 'spaceInset')};
  ${getResponsiveSpace('marginBottom', 'customComponent', '')};
`;

const NKComponent1 = styled.div<CustomComponentProps>`
  ${getTypographyPreset('customComponent.nkComponent1', 'nkComponent1', {
    withCrop: true,
  })};
  ${getStylePreset('customComponent.nkComponent1', 'nkComponent1')};
  ${getResponsiveSpace(
    'padding',
    'customComponent.nkComponent1',
    'nkComponent1',
  )};
  ${getResponsiveSpace(
    'marginRight',
    'customComponent.nkComponent1',
    'nkComponent1',
    'spaceInline',
  )};
  ${getResponsiveSpace(
    'marginBottom',
    'customComponent.nkComponent1',
    'nkComponent1',
    'spaceStack',
  )};
  ${getResponsiveSize(
    'width',
    'customComponent.nkComponent1',
    'nkComponent1',
    'width',
  )}
  ${getResponsiveBorder(
    'borderWidth',
    'customComponent.nkComponent1',
    'nkComponent1',
    'borderWidth',
  )}
  ${getResponsiveMotion(
    'transitionDuration',
    'customComponent.nkComponent1',
    'nkComponent1',
    'motionDuration',
  )}
`;

const NKComponent2 = styled.div<CustomComponentProps>`
  ${getTypographyPreset('customComponent.nkComponent2', 'nkComponent2', {
    withCrop: true,
  })};
  ${getStylePreset('customComponent.nkComponent2', 'nkComponent2')};
  ${getResponsiveSpace(
    'padding',
    'customComponent.nkComponent2',
    'nkComponent2',
    'spaceInset',
  )};
  ${getResponsiveSpace(
    'marginBottom',
    'customComponent.nkComponent2',
    'nkComponent2',
    'spaceStack',
  )};
`;

const CustomComponent = props => (
  <ThemeProvider theme={customTheme}>
    <StyledContainer {...props}>
      <NKComponent1 {...props}>Sub component 1</NKComponent1>
      <NKComponent2 {...props}>Sub component 2</NKComponent2>
    </StyledContainer>
  </ThemeProvider>
);

const overrides = {
  stylePreset: 'customComponentStylesOverrides',
  typographyPreset: 'customComponentTypographyOverrides',
  spaceStack: 'space040',
  nkComponent1: {
    stylePreset: 'nkComponent1StylesOverrides',
    spaceStack: 'space030',
  },
  nkComponent2: {
    stylePreset: 'nkComponent2StylesOverrides',
    spaceInline: 'space010',
  },
};

<CustomComponent overrides={overrides} />;

```

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

### Basic Layer Setup

Source: https://newskit.co.uk/components/layer

This snippet demonstrates the basic usage of the Layer component. It renders its children inside a host managed by the parent LayerOrganizer.

```jsx
import React from 'react';
import { Layer } from 'newskit';

export default () => <Layer />;
```

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

### Example Fired Event

Source: https://newskit.co.uk/getting-started/code/instrumentation

An example of an event emitted by a NewsKit component, showing originator, trigger, and context.

```json
{
  "originator": "link",
  "trigger": "click",
  "context": {
    "url": "www.my-amazing-website.com"
  }
}
```

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

### Basic Image Usage

Source: https://newskit.co.uk/components/image

Demonstrates how to use the Image component with essential props like src, alt, width, height, and loadingAspectRatio. It also shows how to apply a style preset for image appearance.

```jsx
import React from 'react';
import { Image } from 'newskit';

export default () => (
  <Image
    src="static/placeholder-3x2.png"
    alt="Example"
    width="300"
    height="200"
    loadingAspectRatio="3:2"
    overrides={{ stylePreset: 'imageSharp' }}
  />
);
```

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

### Combined Form Example

Source: https://newskit.co.uk/getting-started/code/form-step-by-step

An example of a comprehensive form combining email input, radio button selection, and checkbox acceptance within Fieldsets. Demonstrates setting validation rules for each input.

```javascript
1<Form onSubmit={onSubmit}>
2    <FormInput
3      name="email-valid"
4      rules={{
5        required: 'Required field',
6        pattern: {{
7          value: /^(([^<>()\[\]\.,;:\s@\"]+(\.[^<>()\[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\\]\.,;:\s@\"]+\.)+[^<>()[\\]\.,;:\s@\"]{2,})$/i,
8          message: 'Please provide a valid email address',
9        },
10      }}>
11      <FormInputLabel>Email address</FormInputLabel>
12      <FormInputTextField />
13      <FormInputAssistiveText>Eg. yourname@gmail.com</FormInputAssistiveText>
14    </FormInput>
15
16
17    <Fieldset legend="Pick one interest">
18      <RadioGroup>
19        {['Reading', 'Hiking', 'Cooking'].map(value => (
20          <FormInput
21            key={value}
22            name="interest"
23            rules={{required: 'Please select an option'}}>
24            <FormInputRadioButton
25              label={value}
26              value={value}/>
27          </FormInput>
28        ))}
29      </RadioGroup>
30      <FormInput name="interest" rules={{required: 'Please select an option'}}>
31        <FormInputAssistiveText validationIcon />
32      </FormInput>
33    </Fieldset>
34
35
36    <Fieldset legend="Terms and conditions">
37      <FormInput
38        name="terms"
39        rules={{
40          required: 'Please accept the terms',
41        }}>
42        <FormInputCheckbox label="I accept the terms" value="tc" />
43        <FormInputAssistiveText validationIcon />
44      </FormInput>
45    </Fieldset>
46
47    <Button type="submit">Submit</Button>
48  </Form>
```

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

### Set up App with NewsKitProvider and Tag Component

Source: https://newskit.co.uk/getting-started/code/engineering-quickstart

Example of integrating NewsKitProvider and a Tag component in a React application. Ensure NewsKitProvider wraps your components to provide theme, instrumentation, and layer context.

```jsx
import {NewsKitProvider, Tag, newskitLightTheme} from 'newskit';
import React from 'react';
export default class App extends React.Component {
  render() {
    return (
      <NewsKitProvider 
        theme={newskitLightTheme}
        instrumentation={'instrumentation provider props'}
        layer={'layer organizer props'} 
        >
        <Tag
          href="http://example.com"
          size="medium">
            Tag Content
        </Tag>
      </NewsKitProvider>
    )
  }
}
```

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

### Stack Distribution: Flex-start

Source: https://newskit.co.uk/components/stack

Configures the Stack component to align its children to the start of the container horizontally.

```jsx
1<Stack
2  flow="horizontal-center"
3  stackDistribution="flex-start"
>
5  ...
6</Stack>
```

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

### Responsive Space with Media Query Token

Source: https://newskit.co.uk/components/utils/get-defaults

Demonstrates the return value when the defaultPath points to a media query token (MQ<T>), showing how different screen sizes map to specific space values.

```javascript
// drawer.panel  in component defaults
{
  spaceInline: {
    xs: 'sizing010',
    sm: 'sizing020',
    md: 'sizing030',
  }
}
// Using getResponsiveSpace
getResponsiveSpace('marginRight', 'drawer.panel', 'panel', 'spaceInline')(props)
  
// returns media query object
{
'@media screen and (max-width: 479px)': {marginRight: '4px'},
'@media screen and (min-width: 480px) and (max-width: 767px)': {marginRight: '8px'},
'@media screen and (min-width: 768px)': {marginRight: '12px'},
}
```

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

### Basic Breadcrumbs Example

Source: https://newskit.co.uk/components/breadcrumbs

A simple implementation of the breadcrumbs component with medium size. Overrides can be used for customization.

```jsx
import React from 'react';
import { Breadcrumbs } from 'newskit';

export default () => (
  <Breadcrumbs size="medium" overrides={{}} />
);
```

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

### Apply style preset with loading state

Source: https://newskit.co.uk/components/utils/get-css-from-theme

Demonstrates applying a style preset ('linkInline') while also passing a 'loading' state, which may override base styles if 'loading' presets exist.

```html
<Paragraph stylePreset="linkInline" loading={true} />
```

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

### Basic Title Bar with Heading

Source: https://newskit.co.uk/components/title-bar

A basic example of a Title Bar component with a specified heading tag (h3).

```jsx
import React from 'react';
import { TitleBar } from 'newskit';

export default () => (
  <TitleBar headingAs="h3">Heading</TitleBar>
);

```

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

### Custom Card Theme and Horizontal Card Example

Source: https://newskit.co.uk/components/card

Demonstrates creating a custom theme for a card and rendering a horizontal card with media, actions, and content. The custom theme targets card labels.

```javascript
1const myCustomCardTheme = createTheme({
  name: 'my-custom-card-theme',
  overrides: {
    stylePresets: {
      cardLabel: {
        base: {
          color: '{{colors.inkSubtle}}',
          iconColor: '{{colors.inkSubtle}}',
        },
      },
    },
  },
});

const cardMediumTags = () => (
  <Stack flow="horizontal-center" spaceInline="space040">
    <Tag size="medium" href="#">
      News
    </Tag>
    <Tag size="medium" href="#">
      Sport
    </Tag>
  </Stack>
);

export const CardHorizontalMediumWithoutInset = () => (
  <Grid>
    <Cell xs={8}>
      <ThemeProvider theme={myCustomCardTheme}>
        <Card
          href="#"
          layout="horizontal"
          media={{
            src: 'static/placeholder-1x1.png',
            alt: 'Card Media',
            loadingAspectRatio: '1:1',
          }}
          actions={cardMediumTags}
          overrides={{
            stylePreset: 'cardContainer',
          }}
        >
          <Block spaceStack="space020">
            <Flag
              overrides={{
                paddingInline: 'space000',
                paddingBlock: 'space000',
                stylePreset: 'cardLabel',
                typographyPreset: 'utilityLabel010',
              }}
            >
              <IconFilledImage />
              IMAGE
            </Flag>
          </Block>

          <Block
            spaceStack={{
              xs: 'space040',
              sm: 'space040',
              md: 'space045',
              lg: 'space050',
            }}
          >
            <Headline
              kickerText="CROWDS HEAD"
              overrides={{
                typographyPreset: 'editorialHeadline030',
              }}
            >
              outdoors as bank holiday temps soar above 20 degrees
            </Headline>
          </Block>

          <Block
            spaceStack={{
              xs: 'space040',
              sm: 'space040',
              md: 'space050',
              lg: 'space050',
            }}
          >
            <TextBlock typographyPreset="editorialParagraph020">
              The bank holiday weekend has seen some mixed weather, but as the
              sun emerged, many in the UK took the opportunity...
            </TextBlock>
          </Block>
        </Card>
      </ThemeProvider>
    </Cell>
  </Grid>
);

```