import { Meta } from '@storybook/addon-docs/blocks'

<Meta title="Utilities/Global/HSDS" />

# HSDS

The HSDS object contain `Provider` and `GlobalStyle`. It's a way to namespace those two components so they are easily identifiable to HSDS

## Example

```jsx
<HSDS.Provider scope="hsds-react">{children}</HSDS.Provider>
```

## Provider

This component will wrap all content with a ScopeProvider, so we could inject a classname or id before all css selectors created within this component

### Example

```jsx
<HSDS.Provider scope="#app">
  <div>{content}</div>
</HSDS.Provider>
```

### Props

| Prop  | Type     | Description                                                        |
| ----- | -------- | ------------------------------------------------------------------ |
| scope | `string` | Change the scope to generate css selector. Default is 'hsds-react' |

## GlobalStyle

This component is a way to inject global styling in an app that will use HSDS. By injecting that component, a global stylesheet will be add to the page,
targetting some basic styling to make the HSDS experience better. To apply some styling to all component,
we need to add a `hsds-react` className to the root component that is using HSDS.

### Example

```jsx
<GlobalStyle />
```

```jsx
<GlobalStyle fontFamily="Helvetica, sans-serif " fontFamilyMono="Menlo, serif" fontSize="15 />
```

### Props

| Prop           | Type     | Description                                                                               |
| -------------- | -------- | ----------------------------------------------------------------------------------------- |
| fontFamily     | `string` | Change the default font-family for all components.                                        |
| fontFamilyMono | `string` | Change the default mono font-family for all components.                                   |
| fontSize       | `string` | Change the base font-size value that all components use to calculate their real font-size |
