import LinkTo from '@storybook/addon-links/react';

<Meta title="Documentation/Guides/Component Dependencies"/>

# Component Dependencies

When using components, we expect consuming applications to include the following dependencies for them to display as intended.

## Fonts

JET websites make use of `JetSansDigital` as their main typeface (`Regular`, `Bold` and `ExtraBold` variants).

To load in the required fonts, we recommend following our <LinkTo kind="Documentation/Guides/Typography" story="page">typography setup guide</LinkTo> which covers how to load the font in your application.


## Fozzie SCSS framework

When working on a set of common components, it's useful to be able to share common SCSS utilities and base styles between them.  For this we use the [Fozzie SCSS Helper Library](https://github.com/justeat/fozzie) (v9 or later).

By default, when importing Fozzie SCSS, the only thing output by the framework are the shared SCSS variables, mixins and functions we use to create component styles – no SCSS classes or styles will be added to your compiled CSS unless you subsequently opt in to them in your application.

Fozzie SCSS provides a method to include a number of styles when needed via optional mixins. As a minimum, we expect consuming applications to include the following base styles, to avoid having to set these styles within each component:

### Normalize and Reset Styles

It's common best practice in CSS to apply a set of reset styles to an application. Rather than setting these styles inside each component, we expect the consuming application to include the styles that we've defined in the fozzie SCSS framework.

These reset styles can be included via including the normalize and reset optional mixins – `@include normalize(); @include reset();` – once the SCSS framework has been imported into your applications SCSS.

### Typographic defaults

Including global typographic styles in every component – setting the default size for tags like headings (`h1`, `h2` etc) and paragraphs for instance – would lead to a large amount of duplication, as well as failing to utilise one of CSS's most valuable features; the cascade.

Although our components will function without these defaults, they won't look as intended without these being included in a consuming application.

We expect consuming applications to include the optional mixins for global typography and link styles – via `@include typography();` and `@include links();`. Similar to the reset styles, these mixins can only be included once the Fozzie SCSS library has been imported, due to the mixins being reliant on SCSS variables, mixins and functions that are defined there.

### Utility classes

In specific styling situations, it's useful to have a set of "trump" utility classes; such as to hide or show information for accessibility purposes (for example `.is-visuallyHidden`).

We are working on adjusting these utility classes in a way that is shareable between components without needing definition by the consuming application, but this is currently a work in progress.

Once these have been imported by calling the optional mixin `@include f.trumps-utilities();`, these utility classes will be available for use in components and to consuming applications.


## Importing the Fozzie SCSS Helper Library

Including Fozzie SCSS in any application is straightforward, but will likely be subtly different depending on the CLI or bundling tool you are using.

If you are creating a new UI component, the configuration needed to include the base utility variables, mixins and functions will be automatically setup for you when using our Yeoman component generator tool.

### VueCLI (via webpack-chain)

*_These setup instructions are correct with respect to `sass-loader` v10. Future releases may change the configuration slightly._*

Fozzie SCSS is dependent only on Sass (and specifically `dart-sass`). To use Fozzie SCSS you will need at a minimum:

- `@justeat/fozzie` (>= v9.0.0)
- `sass` (>= v1.53.0)

Fozzie also relies on using a bundler that handles automatic path resolution to the `node_modules` folder. Webpack does this by default, so if you're using that (or a tool that uses Webpack under the hood, such as `vue-cli`) then you won't need to add any additional config to your build.

Bundlers like Parcel also support this type of pathname resolution – just reach out to the web team if you need help with setting up this configuration for your bundler.

If you‘re using your own Webpack configuration, rather than VueCLI, you'll need to also include the latest version of `sass-loader` (at time of writing, we're using `v10.1.0`).


### Nuxt

This section of the docs is in progress – reach out to us directly to find more information on using Fozzie with Nuxt.

### Troubleshooting

If you have any issues integrating the Fozzie SCSS Helper Library, reach out to the Core Web Team or through the FrontEnd Guild and we'll help get you setup.
