diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index ba1b6815c5..ea0d97fb33 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,12 +1,30 @@ ## Contributing to HIG + + + + +- [Filing Issues](#filing-issues) + - [Suggestions](#suggestions) + - [Bugs](#bugs) +- [Contributing Code](#contributing-code) +- [Contributing Features](#contributing-features) + - [Fork the project](#fork-the-project) + - [Create a new branch off of the `development` branch](#create-a-new-branch-off-of-the-development-branch) + - [Develop new functionality](#develop-new-functionality) + - [Create a pull request](#create-a-pull-request) +- [Open source governance](#open-source-governance) +- [See Also](#see-also) + + + ### Filing Issues -**Suggestions** +#### Suggestions The HIG project is meant to evolve with feedback - the project and its users greatly appreciate any thoughts on ways to improve the design or features. Please use the `enhancement` tag to specifically denote issues that are suggestions - this helps us triage and respond appropriately. -**Bugs** +#### Bugs As with all pieces of software, you may end up running into bugs. Please submit bugs as regular issues on GitHub - HIG developers are regularly monitoring issues and will try to fix open bugs quickly. @@ -18,24 +36,32 @@ The HIG project accepts and greatly appreciates contributions. The project follo When contributing code, please also include appropriate tests as part of the pull request, and follow the same comment and coding style as the rest of the project. Take a look through the existing code for examples of the testing and style practices the project follows. +Please view the [contribution example][] for an example of the recommended package structure. + +[contribution example]: ./packages/contribution-example + ### Contributing Features All pull requests for new features must go through the following process: -* Please familiarize yourself with the [DEVELOPING](DEVELOPING.md) resources + +* Please familiarize yourself with the [Developing guide](DEVELOPING.md). * Start an Intent-to-implement GitHub issue for discussion of the new feature. -* LGTM from Tech Lead and one other core committer is required +* Written approval from the HIG engineering team (GitHub comment). * Development occurs on a separate branch of a separate fork, noted in the intent-to-implement issue * A pull request is created, referencing the issue. -* HIG developers will provide feedback on pull requests, looking at code quality, style, tests, performance, and directional alignment with the goals of the project. That feedback should be discussed and incorporated -* LGTM from Tech Lead and one other core committer, who confirm engineering quality and direction. +* HIG developers will provide feedback on pull requests, looking at code quality, style, tests, performance, and directional alignment with the goals of the project. That feedback should be discussed and incorporated. +* Approval via code review from the Tech Lead and another core committer, who can confirm engineering quality and direction. #### Fork the project + Fork the `hig` project with your GitHub account. #### Create a new branch off of the `development` branch + On your fork, locally, create a new branch off of `development`. The name of your branch should include the type of change it holds, a brief description of the changes, and the issue number if relevant. E.g. Fixing a typo in the readme as discussed in issue #101 would have a branch name like this: + ``` bugs/fix-readme-type-101 ``` @@ -43,19 +69,19 @@ bugs/fix-readme-type-101 #### Develop new functionality Read [DEVELOPING](DEVELOPING.md) for more information about how to develop within this project. Once your changes are complete ensure your branch meets testing, coverage, and linting standards. - Ensure changes are tested - - Add to the playground for manual testing if needed + - Add to the Storybook for manual testing if needed - Ensure branch meets testing, coverage, and linting standards - `yarn test-ci` - `yarn lint` #### Create a pull request + When you're ready for feedback, create a pull request against the `development` branch. The title of your pull request should be a concise description of the changes within it. The description of the PR should include the reason behind your PR, a brief explanation of your approach, and highlights of any especially interesting or potentially surprising details. If the change is visual, add a screenshot or gif to the pull request description. When you create a pull request, our continuous integration system automatically runs tests,ensures test coverage stays above a threshold, and ensures code complies with linting standards. All CI checks must pass before the pull request is ready to merge. A core committer will review your pull request and provide feedback or merge it into `development` as appropriate. - ### Open source governance The HIG project's chief and primary concern is with the development of HIG Interface and platform specific implementations, an open source library of components which increase developer efficiency and provide a consistent look and feel to web applications across Autodesk. The look and feel of components is based on Autodesk Human Interface guidelines designs and the various product teams that contribute to HIG. The HIG project's governance model thus reflects only the need to steer the engineering direction of the components and not any other activities which are out of scope. @@ -69,7 +95,7 @@ In the event there are no Core Committers, Autodesk Inc. will appoint one. Core Committers: - Tech Lead: Sean Durham (@nfiniteset) -- Core Committer: Morris Allison (@morrisallison) +- Core Committer: Morris Allison III (@morrisallison) ### See Also diff --git a/DEVELOPING.md b/DEVELOPING.md index fad042966c..1144ed170a 100644 --- a/DEVELOPING.md +++ b/DEVELOPING.md @@ -1,25 +1,114 @@ -# Developing - HIG +# Developing -We use Yarn workspaces and Lerna to manage interdependencies between packages. To get set up, run this from the project root: + + + + +- [Prerequisites](#prerequisites) +- [Getting Started](#getting-started) +- [Project structure](#project-structure) + - [Monorepo](#monorepo) + - [Private packages](#private-packages) +- [Code style](#code-style) +- [Testing](#testing) + - [Unit testing](#unit-testing) + - [How it works](#how-it-works) + - [How to run manually](#how-to-run-manually) + - [Visual regression testing](#visual-regression-testing) + - [How it works](#how-it-works-1) + - [How to run manually](#how-to-run-manually-1) +- [Git commits](#git-commits) +- [Package versioning](#package-versioning) +- [Deployment](#deployment) + - [How to deploy](#how-to-deploy) + + + +## Prerequisites + +The following dependencies must be available to be begin project development. + +* [Unix-like][] operating system _— [Windows Subsystem for Linux][] also works_ +* [Git][] +* [Node][] `^9.7.1` +* [Yarn][] `>=1.5.1` +* [Python][] `^2.7` _— Some dependencies require `node-gyp` which uses Python_ + +[Git]: https://git-scm.com/ +[Node]: https://nodejs.org +[Python]: https://www.python.org +[Unix-like]: https://en.wikipedia.org/wiki/Unix-like +[Yarn]: https://yarnpkg.com +[Windows Subsystem for Linux]: https://docs.microsoft.com/en-us/windows/wsl/about + +## Getting Started + +To get set up, run the following commands: ```bash +git clone https://github.com/Autodesk/hig +cd hig yarn +yarn build ``` -# Testing +## Project structure + +### Monorepo + +This project is structured as a [monorepo][], with each package residing within its own directory. + +The monorepo uses [Yarn workspaces][] and [Lerna][] to manage the interdependencies between packages. + +[Lerna]: https://lernajs.io/ +[monorepo]: https://github.com/babel/babel/blob/master/doc/design/monorepo.md +[Yarn workspaces]: https://yarnpkg.com/lang/en/docs/workspaces/ + +### Private packages + +Private packages are used to organize development tools and dependencies. For example, the [`@hig/scripts`][hig-scripts] package contains the build script that's used to build every component package. + +[hig-scripts]: ./packages/scripts + +## Code style + +We use [ESLint][] and [Prettier][] to ensure consistency throughout the source code. Please view our [ESLint configuration][] for details on style rules. + +[ESLint]: https://eslint.org/ +[ESLint configuration]: ./packages/eslint-config +[Prettier]: https://prettier.io/ -## Unit Tests +## Testing -Currently, to run Jest tests, run this from the project root: +### Unit testing + +[Jest][] along with [Enzyme][] is used to run our unit testing suite. While we aim for the highest possible code coverage, every component should be covered with a [snapshot test][] at the very least. + +[Enzyme]: http://airbnb.io/enzyme/ +[Jest]: http://jestjs.io/ +[snapshot test]: http://jestjs.io/docs/en/snapshot-testing.html + +#### How it works + +Unit tests reside within module specifications (`moduleName.test.js`), which are placed next to their respective modules. Jest runs all of the project's unit tests together, and evaluates code coverage on the project as a whole. + +#### How to run manually ```bash -cd packages/storybook yarn test ``` -## Visual Regression Tests +### Visual regression testing + +To ensure that changes do not break the visual presentation of components, we run a suite of visual regression tests via [Gemini][]. + +[Gemini]: https://gemini-testing.github.io/ + +#### How it works + +The tests are run upon a Storybook developed specifically for automated testing. Screenshots of each test are stored within the repository similar to unit test snapshots. -We use Gemini to ensure that changes do not break the visual presentation of components. We use Storybook to render an example of a component, then save a screenshot of the example to the repository. +#### How to run manually ```bash cd packages/storybook @@ -27,10 +116,33 @@ yarn gemini-update # Update snapshots yarn gemini # Check components against committed snapshots ``` -# Deployment +## Git commits + +Commit messages should adhere to the [Angular Git Commit Guidelines][]. + +## Package versioning + +Package versioning is automated via [Semantic Release][] and determined by commit messages. Commit messages should adhere to [Angular Git Commit Guidelines][]. + +[Angular Git Commit Guidelines]: https://github.com/angular/angular.js/blob/master/DEVELOPERS.md#-git-commit-guidelines +[Semantic Release]: https://github.com/semantic-release/semantic-release + +## Deployment + +Packages are published via [Semantic Release][]. + +### How to deploy + +1. Create a pull request (PR) to merge `development` into `master`. +1. Wait for the PR to receive approval and all automation to finish. +1. Merge the PR with a **merge commit** + * Merging with a merge commit ensures there's no loss of commit information. + +_Semantic Release will then:_ -1. Switch to `development` branch. -1. `yarn update-packages # Update package version numbers and adds tags and publish commit` -1. `git push --follow-tags # Push development and new tags` -1. Create a pull request to merge `development` into `master`. -1. Merge. +1. Create new Git tags +1. Create/update changelogs +1. Publish new package versions to NPM +1. Update the `master` branch +1. Create GitHub releases +1. Merge all changes into the `development` branch diff --git a/docs/contribution-example/README.md b/docs/contribution-example/README.md new file mode 100644 index 0000000000..e940cd7e10 --- /dev/null +++ b/docs/contribution-example/README.md @@ -0,0 +1,26 @@ +# Component Scaffold + +> This is a private example package which can serve as a base for contributions. + +[COMPONENT_DESCRIPTION] + +Read more about when and how to use the COMPONENT_NAME component [on the internal wiki](https://wiki.autodesk.com/display/HIG/COMPONENT_NAME). + +## Getting started + +``` +yarn add @hig/PACKAGE_NAME +``` + +## Import the component and CSS + +``` +import Banner from '@hig/PACKAGE_NAME'; +import '@hig/PACKAGE_NAME/build/index.css'; +``` + +## Basic usage + +```jsx +// Basic example +``` diff --git a/docs/contribution-example/package.json b/docs/contribution-example/package.json new file mode 100644 index 0000000000..85b74de7f2 --- /dev/null +++ b/docs/contribution-example/package.json @@ -0,0 +1,55 @@ +{ + "private": true, + "name": "@hig/contribution-example", + "version": "0.1.0-alpha", + "description": "", + "author": "Autodesk Inc.", + "license": "Apache-2.0", + "repository": { + "type": "git", + "url": "https://github.com/Autodesk/hig.git" + }, + "publishConfig": { + "access": "public" + }, + "main": "build/index.js", + "module": "build/index.es.js", + "style": "build/index.css", + "files": [ + "build/*" + ], + "dependencies": { + "prop-types": "^15.6.1", + "react-lifecycles-compat": "^2.0.0" + }, + "devDependencies": { + "@hig/babel-preset": "^0.1.0", + "@hig/eslint-config": "^0.1.0", + "@hig/scripts": "^0.1.2", + "@hig/semantic-release-config": "^0.1.0", + "@hig/styles": "^0.1.1" + }, + "peerDependencies": { + "react": "^15.4.1 || ^16.3.2" + }, + "scripts": { + "build": "hig-scripts-build", + "lint": "hig-scripts-lint", + "release": "hig-scripts-release" + }, + "eslintConfig": { + "extends": "@hig" + }, + "release": { + "extends": "@hig/semantic-release-config" + }, + "babel": { + "env": { + "test": { + "presets": [ + "@hig/babel-preset/test" + ] + } + } + } +} diff --git a/docs/contribution-example/src/index.js b/docs/contribution-example/src/index.js new file mode 100644 index 0000000000..ca6a744710 --- /dev/null +++ b/docs/contribution-example/src/index.js @@ -0,0 +1 @@ +export default function noop() {} diff --git a/docs/contribution-example/src/index.test.js b/docs/contribution-example/src/index.test.js new file mode 100644 index 0000000000..164eae564f --- /dev/null +++ b/docs/contribution-example/src/index.test.js @@ -0,0 +1,7 @@ +import * as index from "./index"; + +describe("contribution-example/index", () => { + it(`exports default`, () => { + expect(index).toHaveProperty("default", expect.any(Function)); + }); +}); diff --git a/package.json b/package.json index 2d85c7de0f..9a5b918261 100644 --- a/package.json +++ b/package.json @@ -19,10 +19,12 @@ "extract:dependencies": "bash scripts/extract-dependencies.sh", "archive:builds": "node scripts/archive-builds.js", "archive:dependencies": "node scripts/archive-dependencies.js", - "update-development": "bash scripts/update-development.sh" + "update-development": "bash scripts/update-development.sh", + "docs": "doctoc --notitle DEVELOPING.md CONTRIBUTING.md" }, "devDependencies": { "archiver": "^2.1.1", + "doctoc": "^1.3.1", "lerna": "^2.11.0", "mkdirp": "^0.5.1", "node-fetch": "^1.7.3", diff --git a/packages/avatar/package.json b/packages/avatar/package.json index 82393ca603..b87ee92a92 100644 --- a/packages/avatar/package.json +++ b/packages/avatar/package.json @@ -28,7 +28,7 @@ "devDependencies": { "@hig/babel-preset": "^0.1.0", "@hig/eslint-config": "^0.1.0", - "@hig/scripts": "^0.1.1", + "@hig/scripts": "^0.1.2", "@hig/semantic-release-config": "^0.1.0", "@hig/styles": "^0.1.1" }, diff --git a/packages/banner/package.json b/packages/banner/package.json index 8b8fe28e40..40be414bd9 100644 --- a/packages/banner/package.json +++ b/packages/banner/package.json @@ -32,7 +32,7 @@ "@hig/button": "^0.1.1", "@hig/eslint-config": "^0.1.0", "@hig/rich-text": "^0.1.1", - "@hig/scripts": "^0.1.1", + "@hig/scripts": "^0.1.2", "@hig/semantic-release-config": "^0.1.0", "@hig/styles": "^0.1.1" }, diff --git a/packages/button/package.json b/packages/button/package.json index fc27fde318..2b1540ef1d 100644 --- a/packages/button/package.json +++ b/packages/button/package.json @@ -26,7 +26,7 @@ "@hig/babel-preset": "^0.1.0", "@hig/eslint-config": "^0.1.0", "@hig/icon": "^0.1.1", - "@hig/scripts": "^0.1.1", + "@hig/scripts": "^0.1.2", "@hig/semantic-release-config": "^0.1.0", "@hig/styles": "^0.1.1" }, diff --git a/packages/checkbox/package.json b/packages/checkbox/package.json index 85d17a3839..1d4877b4d5 100644 --- a/packages/checkbox/package.json +++ b/packages/checkbox/package.json @@ -29,7 +29,7 @@ "devDependencies": { "@hig/babel-preset": "^0.1.0", "@hig/eslint-config": "^0.1.0", - "@hig/scripts": "^0.1.1", + "@hig/scripts": "^0.1.2", "@hig/semantic-release-config": "^0.1.0", "@hig/styles": "^0.1.1" }, diff --git a/packages/components/package.json b/packages/components/package.json index 2b83fa4e56..cf08d027a0 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -22,7 +22,7 @@ "@hig/banner": "^0.1.2", "@hig/button": "^0.1.1", "@hig/checkbox": "^0.1.1-alpha", - "@hig/dropdown": "^0.1.1-alpha", + "@hig/dropdown": "^0.1.0-alpha.3", "@hig/flyout": "^0.1.1-alpha", "@hig/icon": "^0.1.1", "@hig/icon-button": "^0.1.1", @@ -53,7 +53,7 @@ "devDependencies": { "@hig/babel-preset": "^0.1.0", "@hig/eslint-config": "^0.1.0", - "@hig/scripts": "^0.1.1", + "@hig/scripts": "^0.1.2", "@hig/semantic-release-config": "^0.1.0", "clean-css": "^4.1.11", "esprima": "^4.0.0", diff --git a/packages/dropdown/package.json b/packages/dropdown/package.json index c0fb903d51..896053a96f 100644 --- a/packages/dropdown/package.json +++ b/packages/dropdown/package.json @@ -1,6 +1,6 @@ { "name": "@hig/dropdown", - "version": "0.1.1-alpha", + "version": "0.1.0-alpha.3", "description": "HIG Dropdown", "author": "Autodesk Inc.", "license": "Apache-2.0", @@ -18,8 +18,10 @@ "build/*" ], "dependencies": { + "@hig/icon": "^0.1.2", + "@hig/text-field": "^0.3.1", "classnames": "^2.2.5", - "hig-react": "^0.29.0", + "downshift": "^1.31.15", "prop-types": "^15.6.1", "react-lifecycles-compat": "^3.0.2" }, @@ -29,7 +31,7 @@ "devDependencies": { "@hig/babel-preset": "^0.1.0", "@hig/eslint-config": "^0.1.0", - "@hig/scripts": "^0.1.1", + "@hig/scripts": "^0.1.2", "@hig/semantic-release-config": "^0.1.0", "@hig/styles": "^0.1.1" }, diff --git a/packages/dropdown/src/Dropdown.js b/packages/dropdown/src/Dropdown.js index 85b6975adc..419568b672 100644 --- a/packages/dropdown/src/Dropdown.js +++ b/packages/dropdown/src/Dropdown.js @@ -1,6 +1,137 @@ -import { Dropdown } from "hig-react"; +import React, { Component } from "react"; +import PropTypes from "prop-types"; +import cx from "classnames"; +import Downshift from "downshift"; +import { TextFieldPresenter } from "@hig/text-field"; +import Icon from "@hig/icon"; +import "@hig/text-field/build/index.css"; +import "@hig/icon/build/index.css"; + +import Option from "./presenters/Option"; +import composeEventHandlers from "./composeEventHandlers"; import "./dropdown.scss"; -Dropdown.displayName = "Dropdown"; +export default class Dropdown extends Component { + static propTypes = { + /** + * HTML ID attribute + */ + id: PropTypes.string, + /** + * Text describing what the field represents + */ + label: PropTypes.string, + /** + * Instructional text for the field + */ + instructions: PropTypes.string, + /** + * Placeholder text to render when an option has not been selected + */ + placeholder: PropTypes.string, + /** + * Prevents user actions on the field + */ + disabled: PropTypes.bool, + /** + * Text describing why the field is required + */ + required: PropTypes.string, + /** + * An array of objects to choose from. + */ + options: PropTypes.arrayOf( + PropTypes.shape({ + label: PropTypes.string, + value: PropTypes.string + }) + ), + /** + * Called after user changes the value of the field. Called with the entire object that was selected. + */ + onChange: PropTypes.func, + /** + * Called when user moves focus from the field + */ + onBlur: PropTypes.func, + /** + * Called when user puts focus onto the field + */ + onFocus: PropTypes.func + }; + + render() { + const { + id, + label, + instructions, + placeholder, + required, + disabled, + onBlur, + onChange, + onFocus, + options + } = this.props; + + return ( + (item ? item.label : "")} + > + {({ + getInputProps, + getItemProps, + isOpen, + highlightedIndex, + selectedItem, + toggleMenu + }) => ( +
+
+ + + {/* @TODO: there are variations of the TextField with multiple icons at the end of the input. These icon nodes should be passed as props to TextField. */} + + +
-export default Dropdown; + {isOpen && ( +
+ {options.map((option, index) => ( + + ))} +
+ )} +
+ )} + + ); + } +} diff --git a/packages/dropdown/src/Dropdown.test.js b/packages/dropdown/src/Dropdown.test.js new file mode 100644 index 0000000000..94a6124e37 --- /dev/null +++ b/packages/dropdown/src/Dropdown.test.js @@ -0,0 +1,12 @@ +import renderer from "react-test-renderer"; +import React from "react"; + +import Dropdown from "./Dropdown"; + +describe("Dropdown", () => { + it("renders correctly", () => { + const tree = renderer.create().toJSON(); + + expect(tree).toMatchSnapshot(); + }); +}); diff --git a/packages/dropdown/src/__gemini__/Dropdown.gemini.js b/packages/dropdown/src/__gemini__/Dropdown.gemini.js new file mode 100644 index 0000000000..587d9d5376 --- /dev/null +++ b/packages/dropdown/src/__gemini__/Dropdown.gemini.js @@ -0,0 +1,23 @@ +gemini.suite("Dropdown", () => { + gemini.suite("basic", suite => { + suite + .setUrl("iframe.html?selectedKind=Dropdown&selectedStory=basic") + .setCaptureElements("body") + .capture("1 unfocused") + // Small differences in placeholder text can easily generate false negatives + .capture("2 focused", { tolerance: 5 }, actions => { + actions.focus("input"); + }) + .capture("3 navigating menu", actions => { + actions.sendKeys(gemini.ARROW_DOWN); + actions.sendKeys(gemini.ARROW_DOWN); + }) + .capture("4 confirming selection", actions => { + actions.sendKeys(gemini.ENTER); + }) + .capture("5 reopening menu", actions => { + actions.focus("body"); + actions.focus("input"); + }); + }); +}); diff --git a/packages/dropdown/src/__gemini__/Dropdown.stories-test.js b/packages/dropdown/src/__gemini__/Dropdown.stories-test.js new file mode 100644 index 0000000000..8daa814221 --- /dev/null +++ b/packages/dropdown/src/__gemini__/Dropdown.stories-test.js @@ -0,0 +1,28 @@ +import React from "react"; +import { storiesOf } from "@storybook/react"; + +import Dropdown from "../index"; + +const defaultProps = { + label: "HIG Theme", + instructions: "Choose one HIG theme to apply to your entire app.", + placeholder: "Select a theme", + options: [ + { + label: "HIG Light Theme", + value: "HIGLightTheme" + }, + { + label: "HIG Dark Blue Theme", + value: "HIGDarkBlueTheme" + }, + { + label: "Matrix Theme", + value: "MatrixTheme" + } + ] +}; + +storiesOf("Dropdown", module).add("basic", () => ( + +)); diff --git a/packages/dropdown/src/__snapshots__/Dropdown.test.js.snap b/packages/dropdown/src/__snapshots__/Dropdown.test.js.snap new file mode 100644 index 0000000000..0620e10d7d --- /dev/null +++ b/packages/dropdown/src/__snapshots__/Dropdown.test.js.snap @@ -0,0 +1,67 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Dropdown renders correctly 1`] = ` +
+
+
+
+
+ + +
+ +
+
+
+
+ +
", + } + } + /> + +
+
+`; diff --git a/packages/dropdown/src/__stories__/getKnobs.js b/packages/dropdown/src/__stories__/getKnobs.js index f6af36fd1f..e5da2dbf57 100644 --- a/packages/dropdown/src/__stories__/getKnobs.js +++ b/packages/dropdown/src/__stories__/getKnobs.js @@ -1,5 +1,5 @@ import { action } from "@storybook/addon-actions"; -import { boolean, text } from "@storybook/addon-knobs/react"; +import { boolean, object, text } from "@storybook/addon-knobs/react"; const knobGroupIds = { basic: "Basic" @@ -9,15 +9,13 @@ const knobLabels = { label: "Label", instructions: "Instructions", placeholder: "Placeholder", - open: "Open", disabled: "Disabled", required: "Required", onBlur: "onBlur", + onChange: "onChange", onClickOutside: "onClickOutside", onFocus: "onFocus", - onKeypress: "onKeypress", - onTargetClick: "onTargetClick", - selectedOptionLabel: "Selected Option Label" + options: "Options" }; export default function getKnobs(props) { @@ -25,10 +23,9 @@ export default function getKnobs(props) { label, instructions, placeholder, - open, disabled, required, - selectedOptionLabel, + options, ...otherProps } = props; @@ -41,18 +38,12 @@ export default function getKnobs(props) { knobGroupIds.basic ), placeholder: text(knobLabels.placeholder, placeholder, knobGroupIds.basic), - open: boolean(knobLabels.open, open, knobGroupIds.basic), disabled: boolean(knobLabels.disabled, disabled, knobGroupIds.basic), required: text(knobLabels.required, required, knobGroupIds.basic), onBlur: action(knobLabels.onBlur), + onChange: action(knobLabels.onChange), onClickOutside: action(knobLabels.onClickOutside), onFocus: action(knobLabels.onFocus), - onKeypress: action(knobLabels.onKeypress), - onTargetClick: action(knobLabels.onTargetClick), - selectedOptionLabel: text( - knobLabels.selectedOptionLabel, - selectedOptionLabel, - knobGroupIds.basic - ) + options: object(knobLabels.options, options, knobGroupIds.basic) }; } diff --git a/packages/dropdown/src/__stories__/stories.js b/packages/dropdown/src/__stories__/stories.js index 7343ae1a1d..06d43999b5 100644 --- a/packages/dropdown/src/__stories__/stories.js +++ b/packages/dropdown/src/__stories__/stories.js @@ -1,21 +1,24 @@ export default [ { - description: "uncontrolled", + description: "default", getProps: () => ({ - label: "Uncontrolled Dropdown", - instructions: "instructions for regular Uncontrolled dropdown", - placeholder: "placeholder for regular Uncontrolled dropdown", + label: "HIG Theme", + instructions: "Choose one HIG theme to apply to your entire app.", + placeholder: "Select a theme", options: [ { - label: "foo", - value: "foo value" + label: "HIG Light Theme", + value: "HIGLightTheme" }, { - label: "bar", - value: "bar value" + label: "HIG Dark Blue Theme", + value: "HIGDarkBlueTheme" + }, + { + label: "Matrix Theme", + value: "MatrixTheme" } - ], - defaultValue: "bar value" + ] }) }, { diff --git a/packages/dropdown/src/composeEventHandlers.js b/packages/dropdown/src/composeEventHandlers.js new file mode 100644 index 0000000000..e178f1cc8e --- /dev/null +++ b/packages/dropdown/src/composeEventHandlers.js @@ -0,0 +1,8 @@ +/** + * Composes multiple event handlers into one. + * @param {Function} fns the event handler functions + * @return {Function} the event handler to add to an element + */ +export default function composeEventHandlers(...fns) { + return (event, ...args) => fns.forEach(fn => fn && fn(event, ...args)); +} diff --git a/packages/dropdown/src/dropdown.scss b/packages/dropdown/src/dropdown.scss index 87a7619c2f..80eccee8d4 100644 --- a/packages/dropdown/src/dropdown.scss +++ b/packages/dropdown/src/dropdown.scss @@ -1 +1,48 @@ -@import "~hig-react/lib/hig-react.css"; +@import "~@hig/styles/tokens/layers.scss"; +@import "~@hig/styles/mixins/colors.scss"; +@import "./tokens.scss"; + +.hig__dropdown { + position: relative; + min-width: 300px; + max-width: 450px; + + .hig__text-field__input{ + font-weight: 600; + } + + .hig__text-field__extra--dropdown-caret { + bottom: 6px; + } +} + +.hig__dropdown__input-wrapper { + position: relative; +} + +.hig__dropdown__input-caret { + position: absolute; + top: calc(#{$menu-top-offset} - 30px); // 30px = the height of the icon element + right: 7px; + z-index: -1; + + .hig__dropdown--disabled & { + opacity: 0.3; + } +} + +.hig__dropdown-v1__menu { + position: absolute; + min-width: 240px; + max-height: $menu-max-height; + top: $menu-top-offset; + overflow: auto; + z-index: $dropdown-layer; + + border: 1px solid color(hig-cool-gray-30); + border-top: none; + border-bottom-left-radius: 4px; + border-bottom-right-radius: 4px; + background-color: color(hig-white); + box-shadow: 0 1px 4px rgba(#717171, 0.3); +} diff --git a/packages/dropdown/src/index.js b/packages/dropdown/src/index.js index 4d208f480a..3646498ed9 100644 --- a/packages/dropdown/src/index.js +++ b/packages/dropdown/src/index.js @@ -1 +1,3 @@ +import "@hig/styles/build/fonts.css"; + export { default } from "./Dropdown"; diff --git a/packages/dropdown/src/presenters/Option.js b/packages/dropdown/src/presenters/Option.js new file mode 100644 index 0000000000..093e85d3db --- /dev/null +++ b/packages/dropdown/src/presenters/Option.js @@ -0,0 +1,69 @@ +import React, { Component } from "react"; +import PropTypes from "prop-types"; +import cx from "classnames"; +import Icon, { names } from "@hig/icon"; + +import "./option.scss"; + +export default class Option extends Component { + static propTypes = { + /** + * Visual representation of the option + */ + children: PropTypes.node, + /** + * Indicates the option is currently highlighted. This is comparable to hover state, but useful when interacting by keyboard. + */ + highlighted: PropTypes.bool, + /** + * Called when user finishes clicking on an option + */ + onClick: PropTypes.func, + /** + * Called when user begins clicking on an option + */ + onMouseDown: PropTypes.func, + /** + * Called when user moves mouse over the option + */ + onMouseMove: PropTypes.func, + /** + * Called when user moves mouse over the option + */ + onHover: PropTypes.func, + /** + * Called when the user selects the option by clicking or keyboard interaction + */ + onSelect: PropTypes.func, + /** + * Indicates the option is currently selected + */ + selected: PropTypes.bool, + /** + * Data represented by the option + */ + value: PropTypes.string + }; + + render() { + const { children, highlighted, selected, ...otherProps } = this.props; + + return ( +
+ {children} + + {selected && ( +
+ +
+ )} +
+ ); + } +} diff --git a/packages/dropdown/src/presenters/option.scss b/packages/dropdown/src/presenters/option.scss new file mode 100644 index 0000000000..b97975e60a --- /dev/null +++ b/packages/dropdown/src/presenters/option.scss @@ -0,0 +1,34 @@ +@import "~@hig/styles/mixins/colors.scss"; +@import "~@hig/styles/mixins/typography.scss"; + +@mixin highlighted() { + background-color: color(hig-blue-10); +} + +.hig__dropdown-option { + @include typography-base; + @import "../tokens.scss"; + box-sizing: border-box; + position: relative; + + display: flex; + align-items: center; + justify-content: space-between; + + min-height: $option-height; + padding: 0 8px; + + cursor: pointer; + + &:hover { + @include highlighted; + } +} + +.hig__dropdown-option--highlighted { + @include highlighted; +} + +.hig__dropdown-option--focused { + background-color: color(hig-blue-10); +} diff --git a/packages/dropdown/src/tokens.scss b/packages/dropdown/src/tokens.scss new file mode 100644 index 0000000000..66ba9f9867 --- /dev/null +++ b/packages/dropdown/src/tokens.scss @@ -0,0 +1,4 @@ +$option-height: 36px; + +$menu-max-height: $option-height * 10; +$menu-top-offset: 43px; // Height from the top of the TextField wrapper to the input bottom border. @TODO: can be calculated dynamically? diff --git a/packages/flyout/package.json b/packages/flyout/package.json index 26253607c8..d6a860649f 100644 --- a/packages/flyout/package.json +++ b/packages/flyout/package.json @@ -29,7 +29,7 @@ "devDependencies": { "@hig/babel-preset": "^0.1.0", "@hig/eslint-config": "^0.1.0", - "@hig/scripts": "^0.1.1", + "@hig/scripts": "^0.1.2", "@hig/semantic-release-config": "^0.1.0", "@hig/styles": "^0.1.1" }, diff --git a/packages/icon-button/package.json b/packages/icon-button/package.json index e83da9abe6..4e5c59fca8 100644 --- a/packages/icon-button/package.json +++ b/packages/icon-button/package.json @@ -27,7 +27,7 @@ "@hig/babel-preset": "^0.1.0", "@hig/eslint-config": "^0.1.0", "@hig/icons": "^0.1.0", - "@hig/scripts": "^0.1.1", + "@hig/scripts": "^0.1.2", "@hig/semantic-release-config": "^0.1.0", "@hig/styles": "^0.1.1" }, diff --git a/packages/icon/package.json b/packages/icon/package.json index 88f355d2dc..00f9b87107 100644 --- a/packages/icon/package.json +++ b/packages/icon/package.json @@ -26,7 +26,7 @@ "devDependencies": { "@hig/babel-preset": "^0.1.0", "@hig/eslint-config": "^0.1.0", - "@hig/scripts": "^0.1.1", + "@hig/scripts": "^0.1.2", "@hig/semantic-release-config": "^0.1.0", "@hig/styles": "^0.1.1" }, diff --git a/packages/icons/package.json b/packages/icons/package.json index 24e7cc8e5f..5e762c2d0c 100644 --- a/packages/icons/package.json +++ b/packages/icons/package.json @@ -20,7 +20,7 @@ "devDependencies": { "@hig/babel-preset": "^0.1.0", "@hig/eslint-config": "^0.1.0", - "@hig/scripts": "^0.1.1", + "@hig/scripts": "^0.1.2", "@hig/semantic-release-config": "^0.1.0", "@hig/styles": "^0.1.1", "svgo": "^1.0.5" diff --git a/packages/modal/package.json b/packages/modal/package.json index b631042d68..473ffa7c8a 100644 --- a/packages/modal/package.json +++ b/packages/modal/package.json @@ -29,7 +29,7 @@ "devDependencies": { "@hig/babel-preset": "^0.1.0", "@hig/eslint-config": "^0.1.0", - "@hig/scripts": "^0.1.1", + "@hig/scripts": "^0.1.2", "@hig/semantic-release-config": "^0.1.0", "@hig/styles": "^0.1.1" }, diff --git a/packages/notifications-flyout/package.json b/packages/notifications-flyout/package.json index 7346c9b4c3..d84782cf53 100644 --- a/packages/notifications-flyout/package.json +++ b/packages/notifications-flyout/package.json @@ -28,7 +28,7 @@ "devDependencies": { "@hig/babel-preset": "^0.1.0", "@hig/eslint-config": "^0.1.0", - "@hig/scripts": "^0.1.1", + "@hig/scripts": "^0.1.2", "@hig/semantic-release-config": "^0.1.0", "@hig/styles": "^0.1.1", "@hig/timestamp": "^0.1.1", diff --git a/packages/notifications-toast/package.json b/packages/notifications-toast/package.json index 0bb2a600f7..cf7c430f1c 100644 --- a/packages/notifications-toast/package.json +++ b/packages/notifications-toast/package.json @@ -29,7 +29,7 @@ "@hig/babel-preset": "^0.1.0", "@hig/button": "^0.1.1", "@hig/eslint-config": "0.1.0", - "@hig/scripts": "^0.1.1", + "@hig/scripts": "^0.1.2", "@hig/styles": "^0.1.1" }, "scripts": { diff --git a/packages/profile-flyout/package.json b/packages/profile-flyout/package.json index 51442ab395..02b8a1e4b5 100644 --- a/packages/profile-flyout/package.json +++ b/packages/profile-flyout/package.json @@ -29,7 +29,7 @@ "devDependencies": { "@hig/babel-preset": "^0.1.0", "@hig/eslint-config": "^0.1.0", - "@hig/scripts": "^0.1.1", + "@hig/scripts": "^0.1.2", "@hig/semantic-release-config": "^0.1.0", "@hig/styles": "^0.1.1" }, diff --git a/packages/progress-bar/package.json b/packages/progress-bar/package.json index e49f47aa0e..e39e8c125f 100644 --- a/packages/progress-bar/package.json +++ b/packages/progress-bar/package.json @@ -27,7 +27,7 @@ "devDependencies": { "@hig/babel-preset": "^0.1.0", "@hig/eslint-config": "^0.1.0", - "@hig/scripts": "^0.1.1", + "@hig/scripts": "^0.1.2", "@hig/semantic-release-config": "^0.1.0", "@hig/styles": "^0.1.1" }, diff --git a/packages/progress-ring/package.json b/packages/progress-ring/package.json index 0f6e9e71db..bfb82c2d1d 100644 --- a/packages/progress-ring/package.json +++ b/packages/progress-ring/package.json @@ -29,7 +29,7 @@ "devDependencies": { "@hig/babel-preset": "^0.1.0", "@hig/eslint-config": "^0.1.0", - "@hig/scripts": "^0.1.1", + "@hig/scripts": "^0.1.2", "@hig/semantic-release-config": "^0.1.0", "@hig/styles": "^0.1.1" }, diff --git a/packages/project-account-switcher/package.json b/packages/project-account-switcher/package.json index 52b316b58c..ff279b77ae 100644 --- a/packages/project-account-switcher/package.json +++ b/packages/project-account-switcher/package.json @@ -29,7 +29,7 @@ "devDependencies": { "@hig/babel-preset": "^0.1.0", "@hig/eslint-config": "^0.1.0", - "@hig/scripts": "^0.1.1", + "@hig/scripts": "^0.1.2", "@hig/semantic-release-config": "^0.1.0", "@hig/styles": "^0.1.1" }, diff --git a/packages/radio-button/package.json b/packages/radio-button/package.json index f5608c09a6..59804a6bb7 100644 --- a/packages/radio-button/package.json +++ b/packages/radio-button/package.json @@ -29,7 +29,7 @@ "devDependencies": { "@hig/babel-preset": "^0.1.0", "@hig/eslint-config": "^0.1.0", - "@hig/scripts": "^0.1.1", + "@hig/scripts": "^0.1.2", "@hig/semantic-release-config": "^0.1.0", "@hig/styles": "^0.1.1" }, diff --git a/packages/rich-text/package.json b/packages/rich-text/package.json index 439ba1c1d4..8f3037f78a 100644 --- a/packages/rich-text/package.json +++ b/packages/rich-text/package.json @@ -25,7 +25,7 @@ "devDependencies": { "@hig/babel-preset": "^0.1.0", "@hig/eslint-config": "^0.1.0", - "@hig/scripts": "^0.1.1", + "@hig/scripts": "^0.1.2", "@hig/semantic-release-config": "^0.1.0", "@hig/styles": "^0.1.1" }, diff --git a/packages/scripts/createExternalDeterminer.js b/packages/scripts/createExternalDeterminer.js index d4f5e857dc..73062ff438 100644 --- a/packages/scripts/createExternalDeterminer.js +++ b/packages/scripts/createExternalDeterminer.js @@ -1,18 +1,15 @@ /** * @param {string[]} externalDependencies dependencies and peerDependencies - * @returns {Function} A function to use for `rollupConfig.inputOptions.external` + * @returns {function(string): boolean} A function to use for `rollupConfig.inputOptions.external` */ module.exports = function createExternalDeterminer(externalDependencies) { - /** - * Determines whether the given module is external - * @param {string} moduleName - * @returns {boolean} - */ return function external(moduleName) { - return Boolean( - externalDependencies.find(dependencyName => + const isCssModule = moduleName.endsWith(".css"); + const isPackageDependency = + externalDependencies.findIndex(dependencyName => moduleName.startsWith(dependencyName) - ) - ); + ) >= 0; + + return !isCssModule && isPackageDependency; }; }; diff --git a/packages/scripts/createExternalDeterminer.test.js b/packages/scripts/createExternalDeterminer.test.js index ea63e9e787..844ff09fb7 100644 --- a/packages/scripts/createExternalDeterminer.test.js +++ b/packages/scripts/createExternalDeterminer.test.js @@ -31,7 +31,7 @@ describe("scripts/createExternalDeterminer", () => { }, { moduleName: "foo/module-random.css", - isExternal: true + isExternal: false }, { moduleName: "dependency/module-random.js", diff --git a/packages/scripts/package.json b/packages/scripts/package.json index 6cc18d07a3..40cc28738f 100644 --- a/packages/scripts/package.json +++ b/packages/scripts/package.json @@ -1,7 +1,7 @@ { "private": true, "name": "@hig/scripts", - "version": "0.1.1", + "version": "0.1.2", "description": "Scripts for HIG React components", "main": "index.js", "repository": "https://github.com/Autodesk/hig", diff --git a/packages/semantic-release-config/package.json b/packages/semantic-release-config/package.json index 36c6ff8156..560446c952 100644 --- a/packages/semantic-release-config/package.json +++ b/packages/semantic-release-config/package.json @@ -18,12 +18,13 @@ "@semantic-release/github": "^4.2.17", "@semantic-release/npm": "^3.2.0", "read-pkg": "^3.0.0", - "semantic-release-monorepo": "^6.0.3" + "semantic-release-monorepo": "^6.0.3", + "upgrade-dependents": "^1.0.0" }, "devDependencies": { "@hig/babel-preset": "^0.1.0", "@hig/eslint-config": "^0.1.0", - "@hig/scripts": "^0.1.1", + "@hig/scripts": "^0.1.2", "lodash.template": "^4.4.0" }, "scripts": { diff --git a/packages/semantic-release-config/src/__snapshots__/createGitHubSuccessComment.test.js.snap b/packages/semantic-release-config/src/__snapshots__/createGitHubSuccessComment.test.js.snap deleted file mode 100644 index 5ce52803b7..0000000000 --- a/packages/semantic-release-config/src/__snapshots__/createGitHubSuccessComment.test.js.snap +++ /dev/null @@ -1,16 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`semantic-release-config/createGitHubSuccessComment returns a template source matching the given package name 1`] = ` -":tada: This <%= issue.pull_request ? \\"PR is included\\" : \\"issue has been resolved\\" %> in \`@hig/booya@<%= nextRelease.version %>\` :tada: - -<%= releases.filter(release => Boolean(release.name)).length > 0 ? \\"The release is available on:\\" + \\"\\\\n\\\\n\\" + releases.filter(release => Boolean(release.name)).map(releaseInfo => \`* [\${releaseInfo.name}](\${releaseInfo.url})\`).join(\\"\\\\n\\") : \\"\\" %>" -`; - -exports[`semantic-release-config/createGitHubSuccessComment when used with \`lodash.template\` renders a success comment in markdown 1`] = ` -":tada: This PR is included in \`@hig/booya@0.2.0\` :tada: - -The release is available on: - -* [Example Release](http://example.com) -* [Example Release v2](http://example.com/two)" -`; diff --git a/packages/semantic-release-config/src/createGitHubSuccessComment.js b/packages/semantic-release-config/src/createGitHubSuccessComment.js deleted file mode 100644 index 5ecab65f3a..0000000000 --- a/packages/semantic-release-config/src/createGitHubSuccessComment.js +++ /dev/null @@ -1,16 +0,0 @@ -/* eslint-disable max-len, no-template-curly-in-string */ - -export default function createGitHubSuccessComment({ packageName }) { - const subject = - '<%= issue.pull_request ? "PR is included" : "issue has been resolved" %>'; - const mainHeading = `:tada: This ${subject} in \`${packageName}@<%= nextRelease.version %>\` :tada:`; - const releaseInfosExp = "releases.filter(release => Boolean(release.name))"; - const hasReleasesExp = `${releaseInfosExp}.length > 0`; - const releasesHeadingExp = '"The release is available on:"'; - const linkExp = "`* [${releaseInfo.name}](${releaseInfo.url})`"; - const releaseListExp = `${releaseInfosExp}.map(releaseInfo => ${linkExp}).join("\\n")`; - const releasesExp = `${releasesHeadingExp} + "\\n\\n" + ${releaseListExp}`; - const releases = `<%= ${hasReleasesExp} ? ${releasesExp} : "" %>`; - - return `${mainHeading}\n\n${releases}`; -} diff --git a/packages/semantic-release-config/src/createGitHubSuccessComment.test.js b/packages/semantic-release-config/src/createGitHubSuccessComment.test.js deleted file mode 100644 index 0c825cf6dd..0000000000 --- a/packages/semantic-release-config/src/createGitHubSuccessComment.test.js +++ /dev/null @@ -1,43 +0,0 @@ -import template from "lodash.template"; - -import createGitHubSuccessComment from "./createGitHubSuccessComment"; - -describe("semantic-release-config/createGitHubSuccessComment", () => { - const packageName = "@hig/booya"; - const payload = { - version: "", - branch: "master", - nextRelease: { - version: "0.2.0" - }, - releases: [ - { - name: "Example Release", - url: "http://example.com" - }, - { - name: "Example Release v2", - url: "http://example.com/two" - } - ], - issue: { - pull_request: "foo" - } - }; - - it("returns a template source matching the given package name", () => { - const result = createGitHubSuccessComment({ packageName }); - - expect(result).toMatchSnapshot(); - }); - - describe("when used with `lodash.template`", () => { - it("renders a success comment in markdown", () => { - const templateSource = createGitHubSuccessComment({ packageName }); - const templateCompiled = template(templateSource); - const result = templateCompiled(payload); - - expect(result).toMatchSnapshot(); - }); - }); -}); diff --git a/packages/semantic-release-config/src/createReleaseConfig.js b/packages/semantic-release-config/src/createReleaseConfig.js index f8e6d5e4c2..700aa63cb8 100644 --- a/packages/semantic-release-config/src/createReleaseConfig.js +++ b/packages/semantic-release-config/src/createReleaseConfig.js @@ -1,7 +1,5 @@ import monorepoConfig from "semantic-release-monorepo"; -import createGitHubSuccessComment from "./createGitHubSuccessComment"; - export default function createReleaseConfig({ packageName }) { return { ...monorepoConfig, @@ -9,13 +7,9 @@ export default function createReleaseConfig({ packageName }) { prepare: [ "@semantic-release/changelog", "@semantic-release/npm", + "upgrade-dependents/semantic-release", "@semantic-release/git" ], - success: [ - { - path: "@semantic-release/github", - successComment: createGitHubSuccessComment({ packageName }) - } - ] + success: [] }; } diff --git a/packages/side-nav/package.json b/packages/side-nav/package.json index 31b66ed675..0185251998 100644 --- a/packages/side-nav/package.json +++ b/packages/side-nav/package.json @@ -29,7 +29,7 @@ "devDependencies": { "@hig/babel-preset": "^0.1.0", "@hig/eslint-config": "^0.1.0", - "@hig/scripts": "^0.1.1", + "@hig/scripts": "^0.1.2", "@hig/semantic-release-config": "^0.1.0", "@hig/styles": "^0.1.1" }, diff --git a/packages/skeleton-item/package.json b/packages/skeleton-item/package.json index accc4b6583..51d6827265 100644 --- a/packages/skeleton-item/package.json +++ b/packages/skeleton-item/package.json @@ -26,7 +26,7 @@ "devDependencies": { "@hig/babel-preset": "^0.1.0", "@hig/eslint-config": "^0.1.0", - "@hig/scripts": "^0.1.1", + "@hig/scripts": "^0.1.2", "@hig/semantic-release-config": "^0.1.0", "@hig/styles": "^0.1.1" }, diff --git a/packages/slider/package.json b/packages/slider/package.json index acb57c9d51..310b9b1493 100644 --- a/packages/slider/package.json +++ b/packages/slider/package.json @@ -27,7 +27,7 @@ "devDependencies": { "@hig/babel-preset": "^0.1.0", "@hig/eslint-config": "^0.1.0", - "@hig/scripts": "^0.1.1", + "@hig/scripts": "^0.1.2", "@hig/semantic-release-config": "^0.1.0", "@hig/styles": "^0.1.1" }, diff --git a/packages/storybook/gemini/chromeReact/Dropdown/basic/1 unfocused/chromeReact.png b/packages/storybook/gemini/chromeReact/Dropdown/basic/1 unfocused/chromeReact.png new file mode 100644 index 0000000000..f508d04433 Binary files /dev/null and b/packages/storybook/gemini/chromeReact/Dropdown/basic/1 unfocused/chromeReact.png differ diff --git a/packages/storybook/gemini/chromeReact/Dropdown/basic/2 focused/chromeReact.png b/packages/storybook/gemini/chromeReact/Dropdown/basic/2 focused/chromeReact.png new file mode 100644 index 0000000000..93911c3848 Binary files /dev/null and b/packages/storybook/gemini/chromeReact/Dropdown/basic/2 focused/chromeReact.png differ diff --git a/packages/storybook/gemini/chromeReact/Dropdown/basic/3 navigating menu/chromeReact.png b/packages/storybook/gemini/chromeReact/Dropdown/basic/3 navigating menu/chromeReact.png new file mode 100644 index 0000000000..93911c3848 Binary files /dev/null and b/packages/storybook/gemini/chromeReact/Dropdown/basic/3 navigating menu/chromeReact.png differ diff --git a/packages/storybook/gemini/chromeReact/Dropdown/basic/4 confirming selection/chromeReact.png b/packages/storybook/gemini/chromeReact/Dropdown/basic/4 confirming selection/chromeReact.png new file mode 100644 index 0000000000..93911c3848 Binary files /dev/null and b/packages/storybook/gemini/chromeReact/Dropdown/basic/4 confirming selection/chromeReact.png differ diff --git a/packages/storybook/gemini/chromeReact/Dropdown/basic/5 reopening menu/chromeReact.png b/packages/storybook/gemini/chromeReact/Dropdown/basic/5 reopening menu/chromeReact.png new file mode 100644 index 0000000000..93911c3848 Binary files /dev/null and b/packages/storybook/gemini/chromeReact/Dropdown/basic/5 reopening menu/chromeReact.png differ diff --git a/packages/storybook/package.json b/packages/storybook/package.json index 5305ce1270..627105532a 100644 --- a/packages/storybook/package.json +++ b/packages/storybook/package.json @@ -25,7 +25,7 @@ "vanilla-test-serve": "http-server ../vanilla -p 8080" }, "devDependencies": { - "@hig/scripts": "^0.1.1", + "@hig/scripts": "^0.1.2", "@storybook/addon-actions": "^3.4.0", "@storybook/addon-info": "^3.4.0", "@storybook/addon-knobs": "^3.4.0", diff --git a/packages/styles/package.json b/packages/styles/package.json index 8f174e0071..20ce4bb6e3 100644 --- a/packages/styles/package.json +++ b/packages/styles/package.json @@ -22,7 +22,7 @@ "devDependencies": { "@hig/babel-preset": "^0.1.0", "@hig/eslint-config": "^0.1.0", - "@hig/scripts": "^0.1.1", + "@hig/scripts": "^0.1.2", "@hig/semantic-release-config": "^0.1.0", "mkdirp": "^0.5.1", "node-sass": "^4.9.0" diff --git a/packages/table/package.json b/packages/table/package.json index 732d38fbd2..eb6e8152d0 100644 --- a/packages/table/package.json +++ b/packages/table/package.json @@ -32,7 +32,7 @@ "devDependencies": { "@hig/babel-preset": "^0.1.0", "@hig/eslint-config": "^0.1.0", - "@hig/scripts": "^0.1.1", + "@hig/scripts": "^0.1.2", "@hig/semantic-release-config": "^0.1.0", "@hig/styles": "^0.1.1", "delay": "^2.0.0" diff --git a/packages/tabs/README.md b/packages/tabs/README.md index a989b95bf4..3083d63232 100644 --- a/packages/tabs/README.md +++ b/packages/tabs/README.md @@ -15,8 +15,8 @@ yarn add @hig/tabs ### Import the component and CSS ```js -import { Tabs, Tab } from '@hig/tabs'; -import '@hig/tabs/build/index.css'; +import Tabs, { Tab } from "@hig/tabs"; +import "@hig/tabs/build/index.css"; ``` ## Basic usage diff --git a/packages/tabs/package.json b/packages/tabs/package.json index 5615afa254..323cd5f579 100644 --- a/packages/tabs/package.json +++ b/packages/tabs/package.json @@ -1,6 +1,6 @@ { "name": "@hig/tabs", - "version": "0.1.1-alpha", + "version": "0.1.0", "description": "HIG Tabs", "author": "Autodesk Inc.", "license": "Apache-2.0", @@ -18,18 +18,20 @@ "build/*" ], "dependencies": { + "@hig/typography": "^0.1.2", "classnames": "^2.2.5", - "hig-react": "^0.29.0", "prop-types": "^15.6.1", - "react-lifecycles-compat": "^3.0.2" + "react-lifecycles-compat": "^3.0.2", + "render-fragment": "^0.1.1" }, "peerDependencies": { "react": "^15.4.1 || ^16.3.2" }, "devDependencies": { "@hig/babel-preset": "^0.1.0", + "@hig/button": "^0.1.2", "@hig/eslint-config": "^0.1.0", - "@hig/scripts": "^0.1.1", + "@hig/scripts": "^0.1.2", "@hig/semantic-release-config": "^0.1.0", "@hig/styles": "^0.1.1" }, diff --git a/packages/tabs/src/Tab.js b/packages/tabs/src/Tab.js index a23331ba9c..126efe61c4 100644 --- a/packages/tabs/src/Tab.js +++ b/packages/tabs/src/Tab.js @@ -1,6 +1,53 @@ -import { Tab } from "hig-react"; -import "./tab.scss"; +import React from "react"; +import PropTypes from "prop-types"; -Tab.displayName = "Tab"; +import TabPresenter from "./presenters/TabPresenter"; -export default Tab; +/** + * @typedef {Object} RenderTabPayload + * @property {string} key + * @property {boolean} [active] + * @property {string} [label] + * @property {Function} [handleClick] + */ + +/** + * @param {RenderTabPayload} props + * @returns {JSX.Element} + */ +// eslint-disable-next-line react/prop-types +function renderTab({ handleClick, ...otherProps }) { + return ; +} + +/** + * @typedef {Object} TabProps + * @property {boolean} [active] + * @property {string} [children] + * @property {string} [label] + * @property {Function} [onClick] + * @property {string} render A render prop allowing for custom tab components to be rendered + */ + +/** + * This component is a facade for interfacing with the `Tabs` component. + * The logic within the `Tabs` component is strictly separated from the `TabPresenter`. + * + * @param {TabProps} props + * @returns {null} + */ +export default function Tab() { + return null; +} + +Tab.defaultProps = { + render: renderTab +}; + +Tab.propTypes = { + active: PropTypes.bool, + children: PropTypes.node, + label: PropTypes.string, + onClick: PropTypes.func, + render: PropTypes.func.isRequired +}; diff --git a/packages/tabs/src/Tabs.js b/packages/tabs/src/Tabs.js index c02ad35493..e786c65dd2 100644 --- a/packages/tabs/src/Tabs.js +++ b/packages/tabs/src/Tabs.js @@ -1,6 +1,182 @@ -import { Tabs } from "hig-react"; -import "./tabs.scss"; +import React, { Component, Children } from "react"; +import Fragment from "render-fragment"; +import PropTypes from "prop-types"; +import { polyfill } from "react-lifecycles-compat"; -Tabs.displayName = "Tabs"; +import { AVAILABLE_ALIGNMENTS, alignments } from "./alignments"; +import TabsPresenter from "./presenters/TabsPresenter"; +import Tab from "./Tab"; -export default Tabs; +const FIRST_TAB_INDEX = 0; + +/** + * @typedef {import("./Tab").RenderTabPayload} RenderTabPayload + */ + +/** + * @typedef {Object} TabMeta + * @property {string} key + * @property {import("./tab").TabProps} props + */ + +/** + * @typedef {Object} TabsProps + * @property {string} [align] + * @property {ReactNode} [children] + */ + +/** + * @typedef {Object} TabsState + * @property {number} activeTabIndex + */ + +/** + * @param {ReactNode} children + * @returns {TabMeta[]} + */ +function createTabs(children) { + return Children.toArray(children).reduce((result, child) => { + const { type, key, props = {} } = child; + + if (type === Tab) { + result.push({ key, props }); + } + + return result; + }, []); +} + +class Tabs extends Component { + static propTypes = { + /** + * Specify how to justify the tabs within their container + */ + align: PropTypes.oneOf(AVAILABLE_ALIGNMENTS), + /** + * Accepts Tab components + */ + children: PropTypes.node, + /** + * Called when user activates a tab + */ + onTabChange: PropTypes.func + }; + + /** + * @param {TabsProps} nextProps + * @param {TabsState} prevState + * @returns {TabsState | null} + */ + static getDerivedStateFromProps(nextProps, prevState) { + const { children } = nextProps; + const nextTabs = createTabs(children); + const nextActiveTabIndex = nextTabs.findIndex(({ props }) => props.active); + const { activeTabIndex: prevActiveTabIndex } = prevState; + + if ( + // If no active tab was declared + nextActiveTabIndex < 0 || + // If the declared active tab is the same as the current active tab + nextActiveTabIndex === prevActiveTabIndex + ) { + return null; + } + + return { + activeTabIndex: nextActiveTabIndex + }; + } + + static defaultProps = { + align: alignments.CENTER, + onTabChange: () => {} + }; + + /** @type {TabsState} */ + state = { + activeTabIndex: FIRST_TAB_INDEX + }; + + /** @returns {TabMeta[]} */ + getTabs() { + return createTabs(this.props.children); + } + + /** @returns {TabMeta|undefined} */ + getActiveTab() { + const { activeTabIndex } = this.state; + + return this.getTabs()[activeTabIndex]; + } + + /** + * @param {number} nextActiveTabIndex + */ + setActiveTab(nextActiveTabIndex) { + const { activeTabIndex: prevActiveTabIndex } = this.state; + const { onTabChange } = this.props; + + if (prevActiveTabIndex === nextActiveTabIndex) return; + + onTabChange(nextActiveTabIndex); + this.setState({ activeTabIndex: nextActiveTabIndex }); + } + + /** + * @param {number} index + * @returns {Function} + */ + createTabClickHandler(index) { + return () => { + this.setActiveTab(index); + }; + } + + /** + * @param {TabMeta} tab + * @param {number} index + * @returns {JSX.Element} + */ + renderTab = ({ key, props }, index) => { + const { render, label } = props; + const { activeTabIndex } = this.state; + /** @type {RenderTabPayload} */ + const payload = { + key, + label, + active: activeTabIndex === index, + handleClick: this.createTabClickHandler(index) + }; + + return render(payload); + }; + + /** + * @returns {JSX.Element} + */ + renderTabs() { + return ( + + {this.getTabs().map(this.renderTab)} + + ); + } + + /** @returns {ReactNode} */ + renderContent() { + const activeTab = this.getActiveTab(); + + return activeTab ? activeTab.props.children : null; + } + + render() { + return ( + + {this.renderTabs()} + {this.renderContent()} + + ); + } +} + +export default polyfill(Tabs); diff --git a/packages/tabs/src/Tabs.test.js b/packages/tabs/src/Tabs.test.js new file mode 100644 index 0000000000..de9009b518 --- /dev/null +++ b/packages/tabs/src/Tabs.test.js @@ -0,0 +1,27 @@ +import React from "react"; +import renderer from "react-test-renderer"; + +import Tab from "./Tab"; +import Tabs from "./Tabs"; +import { alignments } from "./alignments"; + +describe("tabs/Tabs", () => { + it("renders tabs", () => { + const wrapper = ( + + {}}> + bar + + + world + +
+`; diff --git a/packages/tabs/src/__stories__/infoOptions.js b/packages/tabs/src/__stories__/infoOptions.js index 4c1b270e95..b3a8639298 100644 --- a/packages/tabs/src/__stories__/infoOptions.js +++ b/packages/tabs/src/__stories__/infoOptions.js @@ -1,7 +1,7 @@ import React from "react"; import RichText from "@hig/rich-text"; -import { Tabs, Tab } from "../index"; +import Tabs, { Tab } from "../index"; import readme from "../../README.md"; export default { diff --git a/packages/tabs/src/__stories__/renderStory.js b/packages/tabs/src/__stories__/renderStory.js index b8a8bde349..5e4d248f1a 100644 --- a/packages/tabs/src/__stories__/renderStory.js +++ b/packages/tabs/src/__stories__/renderStory.js @@ -1,5 +1,6 @@ import React from "react"; -import { Tabs } from "../index"; + +import Tabs from "../index"; import getKnobs from "./getKnobs"; export default function renderStory(props) { diff --git a/packages/tabs/src/__stories__/stories.js b/packages/tabs/src/__stories__/stories.js index cee236891b..90f700d668 100644 --- a/packages/tabs/src/__stories__/stories.js +++ b/packages/tabs/src/__stories__/stories.js @@ -1,12 +1,24 @@ import React from "react"; import RichText from "@hig/rich-text"; +import Button, { types } from "@hig/button"; import { Tab } from "../index"; +/* eslint-disable-next-line react/prop-types */ +function renderCustomTab({ key, label, active, handleClick }) { + return ( +