@ilo-org/styles 0.2.1 → 0.3.0

package/README.md

@@ -1,186 +1,50 @@
-# ILO Design System - Styles Package
+# ILO Design System - Styles
 
-This package provides the stylesheets which are used to style components in other packages. It does this primarily by supplying a theme and other customization options to the `@ilo-org/styles` package [SASS](https://sass-lang.com/). It has dependencies on the following other @ilo-org packages:
+The Styles package provides the stylesheets which are used to style the components in other packages. It includes both the styles for the individual components as well as bundled stylesheets for the entire design system. Both scss and compiled css files are exported from the package.
 
-- [@ilo-org/themes](./packages/themes)
-- [@ilo-org/fonts](./packages/fonts)
-- [@ilo-org/icons](./packages/icons)
+The styles are written in [SCSS](https://sass-lang.com/), so you can also import the SCSS files and include them in your own SASS workflow.
 
-## Installation and commands
-
-To install
+## Installation
 
 ```bash
 npm i @ilo-org/styles
 ```
 
-To build
+## Usage
 
-```bash
-pnpm build
-```
+### Include the bundled stylesheet
 
-To minify
+If you're going to use all or most of the components in the Design System, the easiest thing to do is to include the bundled stylesheet, which includes all of the styles for all of the components.
 
-```bash
-pnpm minify
-```
+To do this, you can copy the file `@ilo-org/styles/css/index.css` to a place where you're hosting static files via build command and include it from there.
 
-To test formatting
+You can also import compiled CSS files for the individual components, which can be fetched or included from `@ilo-org/styles/css/components` directory.
 
-```bash
-pnpm format
-```
+Here's an example which uses Webpack to output CSS files together with components from the Design System's [React package](../react).
 
-To test formatting and fix errors
+```jsx
+import React from "react";
+import { Accordion } from "@ilo-org/react";
+import "@ilo-org/styles/css/components/accordion";
 
-```bash
-pnpm format:fix
+const MyAccordion = (props) => {
+  return <Accordion {...props}>
+}
 ```
 
-To lint
+### Use the source files directly
 
-```bash
-pnpm lint
-```
+If you're already using SASS, then you can also import the SCSS files directly into your project and include them into your own SASS bundle.
 
-To test formatting and fix errors
+Note that if you're doing this, you will also need to import the `@ilo-org/themes` package to ensure the SASS files have access to the style tokens they need.
 
-```bash
-pnpm lint:fix
+```SCSS
+@import "@ilo-org/themes/build/scss/tokens";
+@import "@ilo-org/styles/scss";
 ```
 
-## Questions and Feedback
-
-(TBD)
-
-## Accessibility Standards
-
-(TBD)
-
-## Contributing
-
-ILO Design System is an open-source project and we welcome your contributions! Before submitting a pull request, please take a moment to review the following guidelines.
-
-### Branches
-
-| Branch    | Purpose                            |
-| --------- | ---------------------------------- |
-| `main`    | The latest version of all packages |
-| `develop` | The next release of all packages   |
-
-### Contribution workflow
-
-1. Fork and clone the repo
-2. Create a new branch from the `develop` branch
-3. Make your changes and [add a changeset](#versioning) identifying the changes and affected packages
-4. Push your branch to the forked version of the repo
-5. Open a pull request back to the `develop` branch of the main repo
-
-### Versioning
-
-The project uses [changesets](https://github.com/changesets/changesets) to manage package versioning. All pull requests that will affect the project's semantic versioning must include a changest.
-
-See more information on [how to add a changeset](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md)
-
-### Conventions
-
-Contributions should respect the following conventions for branch names, commit messages and pull request descriptions
-
-#### Commits
-
-Commits should follow [Angular Commit Message Guidelines](https://github.com/angular/angular/blob/22b96b9/CONTRIBUTING.md#commit).
-
-```
-<type>(<scope>): <subject>
-```
-
-Examples:
-
-```
-fix(react): change button color on hover
-feat(twig): add button component
-ci(github): add release workflow
-perf(react): improve modal animations
-```
-
-#### Types
-
-- build: Changes that affect the build system or external dependencies (example scopes: gulp, broccoli, npm)
-- ci: Changes to our CI configuration files and scripts (example scopes: Travis, Circle, BrowserStack, SauceLabs)
-- docs: Documentation only changes
-- feat: A new feature
-- fix: A bug fix
-- perf: A code change that improves performance
-- refactor: A code change that neither fixes a bug nor adds a feature
-- style: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)
-- test: Adding missing tests or correcting existing tests
-
-#### Scopes
-
-This should be a package name or an aspect of the project's configuration.
-
-### Branches
+As above, if you don't need styles for the whole design system, you can also import SCSS files from individual components.
 
-Branch names should broadly mirror the same convention as commits.
-
-Examples:
-
-```
-feat/react/modal-wrapper
-fix/twig/modal-wrapper
-```
-
-### Pull requests
-
-Pull requests should include a descriptive name and detailed explanation of what merging the pull request will accomplish. Authors should make sure to reference Github issues that the the pull request will fix or affect.
-
-## Building the project
-
-Use [nvm](https://github.com/nvm-sh/nvm) to make sure you have the correct version of node installed.
-
-```bash
-nvm use
-```
-
-Install [pnpm](https://pnpm.io/).
-
-```bash
-npm i -g pnpm
-```
-
-Install dependencies
-
-```bash
-pnpm recursive install
-```
-
-Build all packages.
-
-```bash
-pnpm build:all
-```
-
-Start React storybook
-
-```bash
-pnpm start:react-storybook
-```
-
-Start Twig storybook
-
-```bash
-pnpm start:twig-storybook
-```
-
-Check types
-
-```bash
-pnpm check:types
-```
-
-Run all tests
-
-```bash
-pnpm test:all
+```SCSS
+@import "@ilo-org/styles/scss/components/accordion";
 ```