NewsKit

https://newskit.co.uk
Admin
NewsKit is an open source design system built by News UK featuring flexible UI components, design...
Tokens:139,487
Snippets:1,577
Trust Score:7.6
Update:4 months ago
Show doc for...
Tokens:
Raw
### 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>
```

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

### 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 />;
```

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

### 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 />
);
```

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

### 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 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>
);
```

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

### 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>
);
```

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

### 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',
});
```

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

### Example Consent Language Configuration

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

Demonstrates how to set a specific language for consent messages. If not provided, the user's browser language will be used.

```javascript
consentLanguage: "nl"
```

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

### 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} />;

```

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

### 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>
    )
  }
}
```

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

### Basic Flag Usage

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

A simple example of how to render a basic flag with content. Ensure the Flag component is imported from 'newskit'.

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

export default () => <Flag size="small">Flag Content</Flag>;
```

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

### Consent Component Configuration (TCFV2)

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

Example of how to configure the Consent component for a TCFV2 implementation with account ID and property Href.

```javascript
1<Consent
2    sourcePointConfigTCFV2={{
3      accountId: accountId,
4      propertyHref: 'http://newskit.co.uk/'
5    }}
6  />
```

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

### Basic Tabs Example

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

A basic implementation of the Tabs component with specified distribution, size, and alignment. It configures the selection indicator and initial selected index.

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

export default () => (
  <Tabs
    distribution="start"
    size="medium"
    overrides={{
      selectionIndicator: { track: {}, indicator: {} },
    }}
    initialSelectedIndex={0}
    align="center"
    indicatorPosition="end"
  />
);
```

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

### 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>
```

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

### 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>
);

```

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

### FormInputCheckbox Example

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

Demonstrates the usage of FormInputCheckbox within a FormInput component to handle terms and conditions acceptance. Includes validation rules.

```javascript
1<Form onSubmit={onSubmit}>
2    <Fieldset legend="Terms and conditions">
3        <FormInput
4            name="terms"
5            rules={{
6                required: 'Please accept the terms',
7            }}>
9            <FormInputCheckbox label="I accept the terms" value="tc" />
10            <FormInputAssistiveText validationIcon />
11        </FormInput>
12    </Fieldset>
13    <Button type="submit">Submit</Button>
14</Form>
```

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

### Custom Card Theme and Vertical Card Example

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

Demonstrates creating a custom theme for a card component and rendering a vertical card with inset media and custom labels. This is useful for applying unique styling to cards.

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

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

export const CardVerticalSmallWithInset = () => (
  <Grid>
    <Cell xs={4}>
      <ThemeProvider theme={myCustomCardTheme}>
        <CardInset
          href="#"
          media={{
            src: 'static/placeholder-3x2.png',
            alt: 'Card Media',
          }}
          actions={cardSmallTags}
          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: 'editorialHeadline010',
              }}
            >
              outdoors as bank holiday temps soar above 20 degrees
            </Headline>
          </Block>
          <TextBlock typographyPreset="editorialParagraph010">
            The bank holiday weekend has seen some mixed weather, but as the sun
            emerged, many in the UK took the opportunity to make the most of the
            lockdown easing.
          </TextBlock>
        </CardInset>
      </ThemeProvider>
    </Cell>
  </Grid>
);

```

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

### 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>
);

```

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

### Responsive Card Layout with useMediaQueryObject

Source: https://newskit.co.uk/components/utils/hooks

Use useMediaQueryObject to dynamically change component properties based on media query breakpoints. This example shows how a Card's layout adapts to screen size.

```javascript
const mqLayout = {
    xs: 'vertical',
    sm: 'vertical',
    md: 'horizontal',
    lg: 'horizontal',
    xl: 'horizontal',
}
const layout = useMediaQueryObject(mqLayout);
<Card layout={layout} />
```

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

### 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={{}} />
);
```

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

### Shallow Merge Equivalent using __delete

Source: https://newskit.co.uk/theme/theming/creating-a-theme

This example shows the equivalent of a shallow merge using the __delete keyword for each property that would be removed. Using __shallow is generally preferred for its conciseness.

```json
{
  "tagPrimary": {
    "base": {
      "backgroundColor": "{{colors.interactivePrimary010}}",
      "color": "{{colors.inkBase}}",
      "borderStyle": "__delete",
      "borderColor": "__delete",
      "borderWidth": "__delete",
      "iconColor": "__delete",
      "borderRadius": "__delete"
    }
  }
}
```

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

### Get Responsive Space with Callback Function

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

Demonstrates using a callback function to dynamically generate CSS properties for responsive space tokens.

```javascript
// callback
const cb = (space) => ({paddingLeft: space, paddingRight: space})
// example
getResponsiveSpace(cb, 'drawer.panel', 'panel', 'spaceInset')(props)
// returns {paddingLeft: value, paddingRight: value} or media query object when token is MQ<T>
```

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

### Share Bar Basic Usage

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

Demonstrates the basic implementation of the Share Bar component with a label. This is a common starting point for embedding share functionality.

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

export default () => <ShareBar label="Label" />; 

```

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

### Define and Apply Transition Preset

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

Define a custom transition preset in the theme and apply it to a styled component using getTransitionPresetFromTheme. This example shows applying a background color transition.

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


transitionPresets.backgroundColorChange = {
  base: {
    transitionProperty: 'background-color',
    transitionDuration: '{{motions.motionDuration030}}',
    transitionTimingFunction: '{{motions.motionTimingEaseOut}}',
  },
};

stylePresets.p = {
  base: {
    backgroundColor: '{{colors.purple030}}',
  },
  hover: {
    backgroundColor: '{{colors.purple070}}',
  },
};
const button = styled.p`
  background-color: green;
  ${getTransitionPresetFromTheme('backgroundColorChange')}
`;

```

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

### Breakpoint-Specific Typography Preset

Source: https://newskit.co.uk/theme/theming/component-defaults

Example of setting different typography presets for different screen sizes (breakpoints) within component defaults.

```javascript
typographyPreset: {
    xs: 'editorialHeadline010',
    md: 'editorialHeadline010',
    lg: 'editorialHeadline010',
  }
```

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

### Extend and Override Multiple Transition Presets for Modal

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

This example extends 'fade' and 'moveUp' transition presets for a Modal's panel, overriding duration, timing functions, and adding a delay to the fade transition.

```javascript
<Modal
  open={true}
  onDismiss={close}
  header="This is a modal header."
  overrides={{
    panel: {
      transitionPreset: [
        {
          extend: 'fade',
          enterActive: {
            transitionDuration: '{{motions.motionDuration010}}',
            transitionTimingFunction: '{{motions.motionTimingEaseOut}}',
            transitionDelay: '{{motions.motionDuration010}}',
          },
          exitActive: {
            transitionDuration: '{{motions.motionDuration010}}',
            transitionTimingFunction: '{{motions.motionTimingLinear}}',
          },
        },
        {
          extend: 'moveUp',
          enterActive: {
            transitionDuration: '{{motions.motionDuration010}}',
            transitionTimingFunction: '{{motions.motionTimingEaseOut}}',
            transitionDelay: '{{motions.motionDuration010}}',
          },
          exitActive: {
            transitionDuration: '{{motions.motionDuration010}}',
            transitionTimingFunction: '{{motions.motionTimingEaseIn}}',
          },
        },
      ],
    },
  }}
>
  {modalContent}
</Modal>
```

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

### Get Media Query with Min-Width

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

Use getMediaQueryFromTheme to construct a media query using a min-width breakpoint from the theme, applying styles when the screen width is 'sm' or greater.

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

const Paragraph = styled.p`
  text-align: center;

  /* @media screen and (min-width: 480px) */
  ${getMediaQueryFromTheme('sm')} {
    text-align: left;
  }
`;

```

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

### Form with Select Input

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

This example illustrates how to create a form that includes a select dropdown. It shows the integration of FormInputSelect within a FormInput component, along with options defined using SelectOption. Validation rules can also be applied to the FormInput.

```jsx
1<Form onSubmit={onSubmit}>
2    <FormInput name="subscription-package">
3        <FormInputLabel>Subscription package</FormInputLabel>
4        <FormInputSelect>
5          <SelectOption value="digital-only">Digital only</SelectOption>
6          <SelectOption value="print-only">Print only</SelectOption>
7          <SelectOption value="print-and-digital">Print + Digital</SelectOption>
8        </FormInputSelect>
9    </FormInput>
10    <Button type="submit">Submit</Button>
11</Form>
```

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

### Basic Slider Example

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

A basic implementation of the Slider component with defined min, max, values, step, and label position. Use this for standard range selection.

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

export default () => (
  <Slider
    min={0}
    max={100}
    values={[50]}
    step={1}
    labelPosition="inline"
  />
);

```

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

### Get Media Query with Min and Max Width

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

Use getMediaQueryFromTheme to construct a media query using both min-width and max-width breakpoints from the theme, applying styles for screen widths between 'sm' and 'md'.

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

const Paragraph = styled.p`
  text-align: center;

  /* @media screen and (min-width: 480px) and (max-width: 960px) */
  ${getMediaQueryFromTheme('sm', 'md')} {
    text-align: left;
  }
`;

```

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

### Apply Different Typography Presets at Breakpoints

Source: https://newskit.co.uk/theme/foundation/breakpoints

Configure typography presets to vary across different breakpoints. This example shows how to set distinct headline styles for extra-small, medium, and large screen sizes.

```typescript
typographyPreset: {
      xs: 'editorialHeadline010',
      md: 'editorialHeadline020',
      lg: 'editorialHeadline030',
    }
```

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

### Conditional Card Layout based on Breakpoint Key

Source: https://newskit.co.uk/components/utils/hooks

This example demonstrates using the breakpoint key obtained from useBreakpointKey to conditionally set a layout prop for a Card component.

```javascript
const breakpointKey = useBreakpointKey();
  const layout == breakpointKey === 'xs || breakpointKey === 'sm' ? 'vertical' : 'horizontal';
<Card layout={layout} />
// the <Card will render verticaly on XS and SM screens and Horizontaly on the rest of breakpoints
```

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

### 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')};
`;

```

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

### Character Count with ARIA Live

Source: https://newskit.co.uk/components/character-count

This example demonstrates how to use ARIA live regions to announce the remaining character count to screen readers as the user types. It's useful for providing real-time feedback to users with visual impairments.

```html
<label for="comment">Comments</label>
<textarea id="comment" name="comment" aria-describedby="comment-count"></textarea>
<div id="comment-count" role="status" aria-live="polite" aria-atomic="true">
You have entered up to 200 characters.</div>
```

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

### 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' }}
  />
);
```

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

### 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'},
}
```

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

### 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} />
```

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

### Get Color CSS with Non-Token Value

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

getColorCssFromTheme can accept non-token values, such as hex codes, for CSS properties.

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

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

```

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

### Basic Aspect Ratio Usage

Source: https://newskit.co.uk/components/aspect-ratio

Demonstrates how to use the AspectRatio component with a specified aspect ratio and dimensions. This is useful for ensuring images or other media maintain a consistent visual proportion.

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

export default () => (
  <AspectRatio
    aspectRatio="3:2"
    height="200"
    maxHeight="200"
    maxWidth="300"
    width="300"
  >
    Insert Children here
  </AspectRatio>
);
```

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

### Basic Headline with Kicker

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

Demonstrates how to use the Headline component with a kicker text and specify heading and kicker tag types.

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

export default () => (
  <Headline
    kickerText="Kicker"
    headingAs="h1"
    kickerAs="span"
  >
    Headline
  </Headline>
);
```

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

### Basic Indeterminate Progress Indicator

Source: https://newskit.co.uk/components/progress-indicator

A basic example of rendering an indeterminate progress indicator using the IndeterminateProgressIndicator component from the 'newskit' library.

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

export default () => (
  <IndeterminateProgressIndicator overrides={{}} />
);
```

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

### Get Color From Theme with Non-Token Value

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

Use this to directly apply a non-token CSS color value. The 'color' prop will be ignored.

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

const Paragraph = styled.p`
  text-align: center;
  color: ${getColorFromTheme('#00FFFF', 'color')};
`;

```

```html
<Paragraph color="#999999"/>
```

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

### Get Color From Theme (Basic)

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

Use this to retrieve a color token value from the theme. It defaults to 'blue020' if no custom prop is specified.

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

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

```

```html
<Paragraph color="blue050"/>
```

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

### Create a Custom Theme

Source: https://newskit.co.uk/theme/theming/creating-a-theme

Use the `createTheme` function to define a new theme. Provide an object with properties like `name`, `baseTheme`, `overrides`, `checkOverrides`, and `warningLogger` to customize your theme's appearance and behavior.

```javascript
import { createTheme } from '@newskit/core';

const myCustomTheme = createTheme({
  name: 'My Custom Theme',
  baseTheme: NewsKitDark,
  overrides: {
    colors: {
      interactivePrimary: '#00FF00',
    },
    typography: {
      fontFamily: 'Arial, sans-serif',
    },
  },
});

export default myCustomTheme;
```

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

### Stack Basic Configuration

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

Demonstrates the basic configuration of the Stack component with various properties like flow, distribution, spacing, height, and aria-label.

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

export default () => (
  <Stack
    flow="vertical-left"
    stackDistribution="flex-start"
    spaceInline=""
    spaceStack=""
    height="100%"
    wrap="nowrap"
    ariaLabel="list content label"
  />
);
```

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

### Basic Inline Message

Source: https://newskit.co.uk/components/inline-message

A basic example of an informative inline message with an icon and title. Ensure you have the necessary imports for React and the InlineMessage component.

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

export default () => (
  <InlineMessage
    overrides={{ stylePreset: 'inlineMessageInformative' }}
    icon="your icon here"
    title="InlineMessage title"
  >
    InlineMessage's message will display here
  </InlineMessage>
);
```

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

### Create Event Instrumentation

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

Set up event instrumentation with console and Tealium handlers, and an event context object. This function returns the context and a `fireEvent` function.

```javascript
import {
  instrumentationHandlers,
  createEventInstrumentation,
  InstrumentationProvider,
  Link,
} from 'newskit';

const handlers = [
  instrumentationHandlers.createConsoleHandler(),
  instrumentationHandlers.createTealiumHandler(),
  instrumentationHandlers.createTealiumTrackHandler(),
];

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

const instrumentation = createEventInstrumentation(handlers, contextObject);

const MyPage = (
  <InstrumentationProvider {...instrumentation}>
    <Link href="example.com">My Amazing Link</Link>
  </InstrumentationProvider>
);
```

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

### Set Default Light Theme with NewsKitProvider

Source: https://newskit.co.uk/theme/theming/using-a-theme

Wrap your application with NewsKitProvider and pass a default theme like newskitLightTheme to configure components.

```javascript
import { NewsKitProvider, newskitLightTheme } from 'newskit';

render() {
    return (
        <NewsKitProvider theme={newskitLightTheme}>
            <MyApp />
        </NewsKitProvider>
    )
}
```

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

### Basic Text Block Usage

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

Demonstrates the basic implementation of the Text Block component with default settings. It renders the provided text content.

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

export default () => (
  <TextBlock>TextBlock Content</TextBlock>
);
```

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

### Get Spacing CSS with Callback

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

Use getSpacingCssFromTheme with a callback function to generate custom CSS objects, applying a spacing token to the 'padding' property.

```javascript
import {getSpacingCssFromTheme, styled} from 'newskit';
const cb = space => ({padding: `${space} 0`});
const Paragraph = styled.p`
  text-align: center;
  ${getSpacingCssFromTheme(cb, 'space050')};
`;

```

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

### Video Player Configuration

Source: https://newskit.co.uk/components/video-player

Configure various aspects of the video player, including margins and padding, using space tokens. These properties can be applied across different breakpoints for responsive design.

```APIDOC
## Video Player Configuration

### Description
Configure various aspects of the video player, including margins and padding, using space tokens. These properties can be applied across different breakpoints for responsive design.

### Properties

- **marginInlineStart** (MQ<string>) - Optional - Specifies the logical inline start margin of the container. Can be used on breakpoints.
- **marginInlineEnd** (MQ<string>) - Optional - Specifies the logical inline end margin of the container. Can be used on breakpoints.
- **marginBlock** (MQ<string>) - Optional - Specifies the logical block start and end margin of the container. Can be used on breakpoints.
- **marginBlockStart** (MQ<string>) - Optional - Specifies the logical block start margin of the container. Can be used on breakpoints.
- **marginBlockEnd** (MQ<string>) - Optional - Specifies the logical block end margin of the container. Can be used on breakpoints.
- **paddingInline** (MQ<string>) - Optional - Specifies the logical inline start and end padding of the container. Can be used on breakpoints.
- **paddingInlineStart** (MQ<string>) - Optional - Specifies the logical inline start padding of the container. Can be used on breakpoints.
- **paddingInlineEnd** (MQ<string>) - Optional - Specifies the logical inline end padding of the container. Can be used on breakpoints.
- **paddingBlock** (MQ<string>) - Optional - Specifies the logical block start and end padding of the container. Can be used on breakpoints.
- **paddingBlockStart** (MQ<string>) - Optional - Specifies the logical block start padding of the container. Can be used on breakpoints.
- **paddingBlockEnd** (MQ<string>) - Optional - Specifies the logical block end padding of the container. Can be used on breakpoints.

### Usage
These properties are typically set as configuration options when initializing or updating the video player component.
```

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

### Get Sizing CSS with Callback

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

Use getSizingCssFromTheme with a callback function to generate custom CSS objects, applying a sizing token to the 'maxWidth' property.

```javascript
import {getSizingCssFromTheme, styled} from 'newskit';
const cb = size => ({maxWidth: `${size}`});
const Paragraph = styled.p`
  text-align: center;
  ${getSizingCssFromTheme(cb, 'sizing050')};
`;

```

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

### useMediaQueryObject

Source: https://newskit.co.uk/components/utils/hooks

Handles rendering components based on media query breakpoints and responds to viewport resizing, returning the appropriate breakpoint for the viewport.

```APIDOC
## useMediaQueryObject

### Description
The `useMediaQueryObject` hook is designed for scenarios where you need to conditionally render components based on predefined media query breakpoints. It dynamically returns the current breakpoint key that matches the viewport size, making it responsive to window resizing.

### Usage
This hook requires a `NewsKitProvider` or `MediaQueryProvider` to be an ancestor in the component tree. It operates exclusively in the browser (client-side code). During server-side rendering (SSR), it defaults to returning the `XS` breakpoint.

### Example
```APIDOC
const mqLayout = {
    xs: 'vertical',
    sm: 'vertical',
    md: 'horizontal',
    lg: 'horizontal',
    xl: 'horizontal',
}
const layout = useMediaQueryObject(mqLayout);

<Card layout={layout} />
```

### Note
While `useMediaQueryObject` can technically accept any `MQ<T>` object, it's recommended for props that do not natively support `MQ<T>` values. For CSS-based props and overrides, NewsKit components often have built-in support for `MQ<T>` objects. For custom component responsiveness, consider using getters and defaults functions.
```

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

### Get Color From Theme with Custom Prop

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

Use this to retrieve a color token value from the theme, with higher precedence given to a 'color' prop if provided.

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

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

```

```html
<Paragraph color="blue050"/>
```

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

### FormInputRadioButton Example

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

Shows how to use FormInputRadioButton within a RadioGroup and Fieldset for selecting one option from a list. Each radio button is wrapped in a FormInput for individual rules.

```javascript
1<Form onSubmit={onSubmit}>
2    <Fieldset legend="Pick one interest">
3      <RadioGroup>
4        {['Reading', 'Hiking', 'Cooking'].map(value => (
5          <FormInput key={value} name="interest" rules={{required: 'Please select an option'}}>
6            <FormInputRadioButton
7              label={value}
8              value={value}
9              overrides={{spaceStack: 'space030'}}/>
10          </FormInput>
11        ))}
12      </RadioGroup>
13      <FormInput name="interest" rules={{required: 'Please select an option'}}>
14        <FormInputAssistiveText validationIcon />
15      </FormInput>
16    </Fieldset>
17    <Button type="submit">Submit</Button>
18 </Form>
```

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

### Basic Volume Control Usage

Source: https://newskit.co.uk/components/volume-control

This snippet demonstrates how to import and use the StatefulVolumeControl component. It provides a basic, interactive volume slider.

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

export default () => <StatefulVolumeControl />;
```
Tokens:
Raw