diff --git a/.circleci/config.yml b/.circleci/config.yml index 6cc173b9..e9d9db7a 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -79,25 +79,6 @@ jobs: name: Ship test coverage report to coveralls command: yarn coveralls - test-visual-regression: - executor: - name: docker-config - steps: - - checkout - - attach_workspace: { at: '.' } - - get_npm_packages_cache - - publish-dsm: - executor: - name: docker-config - steps: - - checkout - - attach_workspace: { at: '.' } - - get_npm_packages_cache - - run: - name: Publish to DSM - command: yarn lerna run dsm-storybook:publish --scope="@wework/ray-core" --parallel - build: executor: name: docker-config @@ -155,13 +136,6 @@ workflows: branches: ignore: - production - - test-visual-regression: - requires: - - checkout-code - filters: - branches: - ignore: - - production - build: requires: - checkout-code @@ -173,15 +147,6 @@ workflows: - build_and_release: requires: - test-unit - - test-visual-regression - filters: - branches: - only: - - master - - publish-dsm: - requires: - - test-unit - - test-visual-regression filters: branches: only: diff --git a/README.md b/README.md index 48fb4843..97c6b475 100644 --- a/README.md +++ b/README.md @@ -18,6 +18,6 @@ See [RELEASING.md](./RELEASING.md) for documentation. ## Ownership -This repository is maintained by Demand Generation of Growth Tech at WeWork. +This repository is maintained by the Consumer Web team of Product Engineering at WeWork. Reach out to the team at [ray@wework.com](mailto:ray@wework.com) for questions or concerns. diff --git a/RELEASING.md b/RELEASING.md index cfce5a7b..5ba26b86 100644 --- a/RELEASING.md +++ b/RELEASING.md @@ -2,16 +2,19 @@ We use conventional commits to dynamically version the packages. It's imperative that maintainers of Ray `squash and merge` all pull requests and edit the commit message/description to follow the guidelines of [Conventional Commits][conventional-commits]. All releases must follow [Semantic Versioning][semver]. -## Versioning +## Automatic Releases -Releases are automatically created when a commit is merged into master. Circle CI will kick off a job, bump the version and publish to the npm registry. +Releases are automatically created when a commit is merged into master. Lerna will automatically determine the correct version for each package based on the contents of the commits. Circle CI will kick off a job, bump the version and publish to the npm registry. -## Manual Release +> Note: All packages within the repo that contain `private: true` in its `package.json` will not be published to the registry. + +The [Ray documentation site](https://ray.wework.com/) is automatically built and published on Netlify after any merge to master. Deploy previews are also available on any pull request. + +## Manual Publish -If a manual release needs to be created for some reason, a Ray maintainer may do the following: +Manual publishing is not recommended, and may result in unexpected behavior. If a manual release needs to be created for some reason, a Ray maintainer may do the following: -- Make sure you have a `GH_TOKEN`, a GitHub personal access token with write access to `@wework/ray`. -- Also, you will need an `.npmrc` with the contents `//registry.npmjs.org/:_authToken=${NPM_TOKEN}`, where `NPM_TOKEN` is an NPM access token with write access to the WeWork organization. Then run: +> Note: Ensure you are logged into NPM (`npm whoami`/`npm login`) with an account with write access to the `@wework` NPM space ```bash $ yarn bootstrap @@ -19,9 +22,5 @@ $ yarn build $ yarn lerna:publish ``` -Lerna will automatically determine the correct version for each package based on the contents of the commits. - -> Note: All packages within the repo that contain `private: true` in its `package.json` will not be published to the registry. - [conventional-commits]: https://www.conventionalcommits.org [semver]: https://semver.org/ diff --git a/docs/faq.md b/docs/faq.md index 2ebd3e73..057d2941 100644 --- a/docs/faq.md +++ b/docs/faq.md @@ -13,7 +13,7 @@ The technology team at WeWork has developed many design systems over the years. ### Who maintains Ray? -Design is led by WeWork designers, [Dana Ballasy]. Engineering lead by Growth Tech and Core Platform. +Design is led by WeWork designer [Dana Ballasy]. Engineering is led by the Consumer Web team of Product Engineering. ### Where can I get help? diff --git a/docs/getting-started.md b/docs/getting-started.md index 4141608b..ffdcd4a8 100644 --- a/docs/getting-started.md +++ b/docs/getting-started.md @@ -19,21 +19,43 @@ Install via npm $ npm install --save @wework/ray-core ``` +## Import + Ray requires both CSS and JavaScript files to be imported into your application. -We encourage the use of the Sass source files as they give access to Ray variables and mixins. -### SCSS/CSS +### CSS + +We encourage the use of the Sass source files, as they give access to Ray variables and mixins. If you are using Sass for your project, simply import the Ray SCSS file into your app's main stylesheet: ```css @import '@wework/ray-core/scss/ray-core'; ``` +If you prefer to use plain CSS, you can either [use our CDN](#cdn), or import the Ray CSS file at `@wework/ray-core/css/ray-core` + ### JavaScript -**Note:** For convenience, Ray will automatically instantiate any components that require JavaScript on `DOMContentLoaded`. If components are generated after this event (i.e. client-side rendered), or if they require additional programming, you can use the APIs available on the component level throughtout the documentation. +In order for certain components to work properly, you must import Ray into your app: + +```js +import '@wework/ray-core'; +``` + +For convenience, Ray will automatically instantiate any components that require JavaScript on `DOMContentLoaded`. + +If components are generated after this event (i.e. client-side rendered), or if they require additional programming, you can import individual component classes and use the APIs available on the component level throughout the documentation: ```js import { Select } from '@wework/ray-core'; + +// instantiate all instances found in the document +Select.createAll(); + +// manually create a specific instance +const select = Select.create(document.querySelector('.ray-select')); + +// manipulate the component from code +select.set('pikachu'); ``` ## CDN @@ -69,6 +91,10 @@ Ray can also be installed via CDN for rapid prototyping. ``` +## Fonts + +You will also need to install Ray fonts, which can be done via WeWork's CDN. See instructions in the [fonts documentation](/foundations/fonts/). + ## Structure `@wework/ray-core` is structured as follows: @@ -101,10 +127,6 @@ Ray can also be installed via CDN for rapid prototyping. └── README.md ``` -## Fonts - -You will also need to install the fonts, which can be done via WeWork's CDN. See instructions in the [fonts documentation](/foundations/fonts/). - ## Contributing Feeling ambitious? Good, because we’d love your input and contributions to the design system. diff --git a/packages/core/src/components/chip/index.js b/packages/core/src/components/chip/index.js index 4f52aac8..e4678a27 100644 --- a/packages/core/src/components/chip/index.js +++ b/packages/core/src/components/chip/index.js @@ -22,7 +22,7 @@ class Chip { target = document, _options = { active: false, disabled: false } ) { - // Finds all instances of select on the document or within a given element and instantiates them. + // Finds all instances of select on the document or within a given element and instantiates them const options = { initSelector: this.strings.INIT_SELECTOR, ..._options