diff --git a/template/README.md b/template/README.md index 4c9e270e..7a320faf 100644 --- a/template/README.md +++ b/template/README.md @@ -10,11 +10,11 @@ ## Docs -All information regarding Project Setup, Technical Details, Tests and information regarding ODS Stateless Components can be found in the [./docs](https://github.com/AlaskaAirlines/OrionStatelessComponents__docs/tree/master/docs) repository. +All information regarding Project Setup, Technical Details, Tests and information regarding ODS Stateless Components can be found in the [docs](https://github.com/AlaskaAirlines/OrionStatelessComponents__docs/tree/master/docs) project repository. ## UI development browser support -For the most up to date information on UI development browser support, see [./docs/BROWSER_SUPPORT.md](https://github.com/AlaskaAirlines/OrionStatelessComponents__docs/blob/master/docs/BROWSER_SUPPORT.md) +For the most up to date information on UI development browser support, see [docs/BROWSER_SUPPORT.md](https://github.com/AlaskaAirlines/OrionStatelessComponents__docs/blob/master/docs/BROWSER_SUPPORT.md) ## Install @@ -22,21 +22,23 @@ For the most up to date information on UI development browser support, see [./do $ npm i @alaskaairux/ods-[name] ``` +Installing as a direct, dev or peer dependency is up to the user installing the package. If you are unsure as to what type of dependency you should use, consider reading this [stack overflow](https://stackoverflow.com/questions/18875674/whats-the-difference-between-dependencies-devdependencies-and-peerdependencies) answer. + ### Design Token CSS Custom Property dependency -The use of any ODS custom element has a dependency on the [ODS Design Tokens (npm install)](https://www.npmjs.com/package/@alaskaairux/orion-design-tokens). See repository and API information [here](https://github.com/AlaskaAirlines/OrionDesignTokens). +The use of any ODS custom element has a dependency on the [ODS Design Tokens](https://github.com/AlaskaAirlines/OrionDesignTokens). -For additional details in regards to using Orion Design Tokens with components, please see [./docs/TECH_DETAILS.md](https://github.com/AlaskaAirlines/OrionStatelessComponents__docs/blob/master/docs/TECH_DETAILS.md) +For additional details in regards to using Orion Design Tokens with components, please see [docs/TECH_DETAILS.md](https://github.com/AlaskaAirlines/OrionStatelessComponents__docs/blob/master/docs/TECH_DETAILS.md) ### CSS Custom Property fallbacks -[CSS Custom Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) are not supported in older browsers. For this, fallback properties are pre-generated and included with the npm. +[CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) are [not supported](https://github.com/AlaskaAirlines/OrionStatelessComponents__docs/blob/master/docs/CUSTOM_PROPERTIES.md) in older browsers. For this, fallback properties are pre-generated and included with the npm. -Any update to the Orion Design Tokens will be immediately reflected with browsers that support CSS Custom Properties, legacy browsers will require updated components with pre-generated fallback properties. +Any update to the Orion Design Tokens will be immediately reflected with browsers that support CSS custom properties, legacy browsers will require updated components with pre-generated fallback properties. ### Define dependency in project component -Define the component dependency within each component that is using the \ component. +Defining the component dependency within each component that is using the \ component. ```javascript import "@alaskaairux/ods-[name]/dist/ods-[name]"; @@ -48,13 +50,7 @@ import "@alaskaairux/ods-[name]/dist/ods-[name]"; Hello World ``` -## Element \ - -```javascript -class Ods[name] extends LitElement -``` - -### Styling (experimental) +## Styling (experimental) Option(s) for component customization. @@ -66,7 +62,7 @@ Option(s) for component customization. See [caniuse.com](https://caniuse.com/#search=%3A%3Apart) for more information. -### [name] use cases +## [name] use cases The \ element should be used in situations where users may: @@ -74,13 +70,13 @@ The \ element should be used in situations where users may: * ... * ... -### Properties: +## Properties: | Attribute | Value type | Description | |----|----|----| | attr | string, boolean, function | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. | -### API Code Examples +## API Code Examples Default [name] @@ -92,7 +88,7 @@ Default [name] [The following is suggested content. If there is any special consideration for callback support with React or other development environments, please upate.] -[name](React support) with `ref` for passing in an event, [see notes](https://github.com/AlaskaAirlines/OrionStatelessComponents__docs/blob/master/docs/CALLBACK.md) +[name](React support) with `ref` for passing in an event, [see notes](https://github.com/AlaskaAirlines/OrionStatelessComponents__docs/blob/master/docs/CALLBACK.md). ```html hello world @@ -104,15 +100,22 @@ Why would you need this? With all Orion custom elements the CSS for the element [Read more about how to use alternate CSS build resources](https://github.com/AlaskaAirlines/OrionStatelessComponents__docs/blob/master/docs/ALT_BUILD.md) + ## Development In order to develop against this project, if you are not part of the core team, you will be required to fork the project prior to submitting a pull request. -Please be sure to review the [contribution guidelines](.github/CONTRIBUTING.md) for this project. Please make sure to **pay special attention** to the [conventional commits](.github/CONTRIBUTING.md#conventional-commits) section of the document. +Please be sure to review the [contribution guidelines](https://github.com/AlaskaAirlines/OrionStatelessComponents__docs/blob/master/docs/CONTRIBUTING.md) for this project. Please make sure to **pay special attention** to the [conventional commits](https://github.com/AlaskaAirlines/OrionStatelessComponents__docs/blob/master/docs/CONTRIBUTING.md#conventional-commits) section of the document. ### Start development environment -Once the project has been cloned to your local resource and you have installed all the dependencies you will need to open three different shell sessions. One is for the Gulp tasks, the second is for a series of npm tasks and the last is to run the Polymer server. +Once the project has been cloned to your local resource and you have installed all the dependencies you will need to open three different shell sessions. One is for the **Gulp tasks**, the second is for a series of **npm tasks** and the last is to run the **Polymer server**. + +**Peer depdency:** Please make sure Polymer is installed globally in order to run the Polymer server. See [ODS Stateless Component Development Details](https://github.com/AlaskaAirlines/OrionStatelessComponents__docs/blob/master/docs/TECH_DETAILS.md) for more information. + +```bash +$ npm i polymer-cli +``` ```shell // shell terminal one @@ -126,6 +129,7 @@ polymer serve ``` ## - +