# Granite Components

This library is an Angular implementation of the [IFS Design System](https://design.ifs.com). The IFS User Experience product group builds and maintains common UI components and tools. [The goal](docs/strategy.md) is to help product teams rapidly build applications with a delightful IFS branded experience.

[![npm peer dependency version (scoped)](https://img.shields.io/npm/dependency-version/%40ifsworld/granite-components/peer/%40angular%2Fcore?color=%23DE3641)](https://angular.io/guide/creating-libraries#ensuring-library-version-compatibility)
[![Storybook](https://cdn.jsdelivr.net/gh/storybookjs/brand@main/badge/badge-storybook.svg)](https://uxstorybooklatest.z16.web.core.windows.net/)

## Deployments

| Name                                        | URL                                                   | Secondary URL                                       |
| ------------------------------------------- | ----------------------------------------------------- | --------------------------------------------------- |
| **Storybook - Latest**                      | <https://uxstorybooklatest.z16.web.core.windows.net/> | -                                                   |
| **Storybook - Beta**                        | <https://sb-designifs.azureedge.net/>                 | <https://uxstorybookbeta.z16.web.core.windows.net/> |
| **Granite Component Library Demo - Latest** | <https://uxdemolatest.z16.web.core.windows.net/>      | -                                                   |
| **Granite Component Library Demo - Beta**   | <https://cl-designifs.azureedge.net/>                 | <https://uxdemobeta.z16.web.core.windows.net/>      |

## Getting started

Assuming we are starting with a new @angular/cli project:

```shell
npx @angular/cli new my-project --style=scss

cd my-project

npm i --save @ifsworld/granite-components

```

If peer dependencies haven't automatically been installed (default behavior of NPM 7 and beyond), then manually install [@ifsworld/granite-icons](https://www.npmjs.com/package/@ifsworld/granite-icons) and [@ifsworld/granite-tokens](https://www.npmjs.com/package/@ifsworld/granite-tokens).

```shell
npm i --save @ifsworld/granite-icons @ifsworld/granite-tokens
```

Finally, add them in `src/styles.scss`:

```scss
@use '@ifsworld/granite-tokens/design-tokens/light/tokens';
@use  '@ifsworld/granite-icons/assets/fonts/ligature/granite-iconfont-liga.css';
```

> That's it! Now we can run `npm start` and start building out our application!

[StackBlitz Example](https://stackblitz.com/edit/angular-ivy-zcgdkv?file=src/app/app.component.html)

### Support

_Note: we only support our latest release. Beyond that we make no guarantees of continued support. Make sure to stay up to date._

## Contributing

If you'd like to contribute, please see the [Getting started guide](../../docs/getting-started.md). Then follow our [Development guidelines](../../docs/development-guidelines.md).

Check the IFS internal Jira for issues.

### Further help

To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).

#### External sources

- [Angular - Creating Libraries](https://angular.io/guide/creating-libraries)
- [Create your Standalone Angular Library in 10 minutes](https://indepth.dev/create-your-standalone-angular-library-in-10-minutes/)
- [Creating monorepos using NX](https://nx.dev/)

## What we're working on now

Visit <https://design.ifs.com> to learn more.

## About the product group

The project is governed by the [User Experience Product Group](https://ifs.sharepoint.com/teams/UserExperienceProductGroup). The mission of the product group is to drive the unified User Experience of IFS business applications. Own and provide UI components and guidelines based on our user's needs. Act as a guide and advisor helping application teams create great UX.

### Primary goals of component library

- Build high-quality UI components that developers can drop into existing applications.
- Provide tools that help developers build their own custom components with common interaction patterns.

#### What we mean by _high-quality_ components

- Internationalized and accessible so that all users can use them.
- Straightforward APIs that don't confuse developers.
- Behave as expected across a wide variety of use-cases without bugs.
- Behavior is well-tested with both unit and integration tests.
- Customizable.
- Performance cost is minimized.
- Code is clean and well-documented to serve as an example for Angular developers.

## Browser and accessibility support

The library supports the most recent versions of the following major browsers: [Google Chrome (including Android)](https://www.google.com/chrome/), [Apple Safari (including iOS)](https://www.apple.com/safari/), and [Microsoft Edge](https://www.microsoft.com/edge). See [IFS official guidelines](https://ifs.sharepoint.com/sites/IFSCloudProdInfo/SitePages/Supported-Platforms-21R2.aspx).

We aim for great user experience and to provide high levels of accessibility through support for standardized tools such as [ARIA](https://www.w3.org/WAI/standards-guidelines/aria/).