Skip to content

Commit

Permalink
Merge pull request #125 from trussworks/release-1.2.0
Browse files Browse the repository at this point in the history
Release 1.2.0
  • Loading branch information
Suzanne Rozier authored Apr 30, 2020
2 parents 4480308 + f911919 commit e5b3917
Show file tree
Hide file tree
Showing 22 changed files with 2,849 additions and 1,148 deletions.
3 changes: 2 additions & 1 deletion .circleci/config.yml
Original file line number Diff line number Diff line change
Expand Up @@ -18,5 +18,6 @@ jobs:
- node_modules
key: v1.0.0-dependencies-{{ checksum "package.json" }}

- run: yarn test
- run: yarn test -w 1
- run: yarn lint
- run: yarn danger ci --failOnErrors
12 changes: 12 additions & 0 deletions .github/workflows/auto-approve.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
name: Auto approve

on: pull_request

jobs:
auto-approve:
runs-on: ubuntu-latest
steps:
- uses: hmarr/auto-approve-action@v2.0.0
if: github.actor == 'dependabot[bot]' || github.actor == 'dependabot-preview[bot]'
with:
github-token: '${{ secrets.GITHUB_TOKEN }}'
40 changes: 40 additions & 0 deletions .github/workflows/deploy-storybook.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
name: Deploy Storybook

on:
push:
branches:
- master

jobs:
deploy-storybook:
runs-on: ubuntu-latest
name: Deploy Storybook
steps:
- name: Check out repository
uses: actions/checkout@v2

- name: Set up node
uses: actions/setup-node@v1
with:
node-version: '10.x'

- name: Get yarn cache directory path
id: yarn-cache-dir-path
run: echo "::set-output name=dir::$(yarn cache dir)"

- uses: actions/cache@v1
id: yarn-cache
with:
path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
restore-keys: |
${{ runner.os }}-yarn-
- name: Install dependencies
if: steps.yarn-cache.outputs.cache-hit != 'true'
run: yarn install

- name: Deploy Storybook to Github page
run: yarn storybook:deploy --ci
env:
GH_TOKEN: trussworks:${{ secrets.GITHUB_TOKEN }}
1 change: 1 addition & 0 deletions .storybook/config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { configure, addDecorator } from '@storybook/react'
import { withInfo } from '@storybook/addon-info'

import 'uswds/dist/css/uswds.css'
import '../src/styles/index.scss'
import './custom-story.css'

configure(require.context('../src', true, /\.stories\.tsx?$/), module)
Expand Down
6 changes: 4 additions & 2 deletions .stylelintrc
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
{
"plugins": ["stylelint-prettier"],
"plugins": ["stylelint-scss", "stylelint-prettier"],
"rules": {
"at-rule-no-unknown": null,
"scss/at-rule-no-unknown": true,
"prettier/prettier": true,
"selector-class-pattern": ""
},
"extends": ["stylelint-config-recommended", "stylelint-prettier/recommended", "stylelint-config-sass-guidelines"],
"extends": ["stylelint-config-recommended", "stylelint-prettier/recommended", "stylelint-config-sass-guidelines", "stylelint-config-css-modules"],
}
13 changes: 13 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,19 @@ All notable changes to this project will be documented in this file.
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).

## [1.2.0] - 2020-04-30

- Added new Alert styles (slim, no icon) and allow the Alert to accept `div` attributes as props
- Added additional examples of Form templates (Sign In form, Reset Password form) to Storybook
- Turn off USWDS SCSS notifications on compile
- Updated CODEOWNERS and contributors
- Fixed Jest running in CI
- Auto-approve Dependabot PRs
- Deploy Storybook static site on merge to master
- Run `yarn upgrade` to update all out of date dependencies
- Add [DangerJS](https://danger.systems/js/) to automate some checks for contribution standards
- Add additional CSS utility classes for background colors and text colors

## [1.1.0] - 2020-03-19

- Add initial set of USWDS form components (Checkbox, Dropdown, ErrorMessage, Fieldset, Form, FormGroup, Label, Radio, TextInput, Textarea)
Expand Down
3 changes: 1 addition & 2 deletions CODEOWNERS
Validating CODEOWNERS rules …
Original file line number Diff line number Diff line change
@@ -1,2 +1 @@
* @suzubara
* @gidjin
* @suzubara @gidjin @tinyels @sarboc
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,7 @@ Also make sure to include the following in order to import the compiled CSS from
- [x] Load and export USWDS fonts/svgs/other assets
- [x] Decide on long-term lib publishing/hosting solution
- [x] Add CI status badge
- [x] Setup https://danger.systems/js/ to check on contribution standards, possibly even checking yarn install for warnings
- [ ] Document decision behind node version and upgrade plan
- [ ] ADR to decide on and set up a React component test helper:
- https://airbnb.io/enzyme/
Expand All @@ -76,7 +77,6 @@ Also make sure to include the following in order to import the compiled CSS from
- [ ] Add testing coverage collection
- [ ] Set up Storybook as public Github page
- [ ] Add example application that uses the library to the repo
- [ ] Setup https://danger.systems/js/ to check on contribution standards, possibly even checking yarn install for warnings
- [ ] Add visual testing automation tool (i.e., Loki)
- [ ] Enforce adding to CHANGELOG when merging a PR into develop
- [ ] Make sure new components are added as package exports
46 changes: 46 additions & 0 deletions dangerfile.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
import { includes } from 'lodash';
import { danger, warn, fail } from 'danger';

// No PR is too small to include a description of why you made a change
if (danger.github && danger.github.pr.body.length < 10) {
warn('Please include a description of your PR changes.');
}

// load all modified and new files
const allFiles = danger.git.modified_files.concat(danger.git.created_files);

// Request changes to package source code to also include changes to tests.
const hasCodeChanges = allFiles.some(p => !!p.match(/src\/.*\.[jt]sx?/));
const hasTestChanges = allFiles.some(p => !!p.match(/src\/.*\.test\.[jt]sx?/));
if (hasCodeChanges && !hasTestChanges) {
warn('This PR does not include changes to tests, even though it affects source code.');
}

// Require new src/components files to include changes to storybook
const hasStorybookChanges = allFiles.some(p => !!p.match(/src\/.*\.stories\.[jt]sx?/));

if (hasCodeChanges && !hasStorybookChanges) {
warn('This PR does not include changes to storybook, even though it affects component code.');
}

// Request update of yarn.lock if package.json changed but yarn.lock isn't
const packageChanged = includes(allFiles, 'package.json');
const lockfileChanged = includes(allFiles, 'yarn.lock');
if (packageChanged && !lockfileChanged) {
const message = 'Changes were made to package.json, but not to yarn.lock';
const idea = 'Perhaps you need to run `yarn install`?';
warn(`${message} - <i>${idea}</i>`);
}

// ensure we have access to github for this check
let isTrivial = false;
if (danger.github) {
isTrivial = includes((danger.github.pr.body + danger.github.pr.title), "#trivial")
}

// Add a CHANGELOG entry for app changes
const hasChangelog = includes(danger.git.modified_files, "CHANGELOG.md")

if (!hasChangelog && !isTrivial) {
warn("Please add a changelog entry for your changes.")
}
28 changes: 23 additions & 5 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@trussworks/react-uswds",
"version": "1.1.0",
"version": "1.2.0",
"description": "React USWDS 2.0 component library",
"keywords": [
"react",
Expand All @@ -24,6 +24,7 @@
"test:watch": "jest --watch",
"test:coverage": "jest --coverage",
"storybook": "start-storybook",
"storybook:deploy": "storybook-to-ghpages",
"build": "webpack",
"build:watch": "webpack --watch",
"lint": "tsc --noEmit && eslint --ext js,jsx,ts,tsx src",
Expand All @@ -33,7 +34,15 @@
"type": "git",
"url": "github:trussworks/react-uswds"
},
"author": "Suzanne Rozier <suz@truss.works>",
"contributors": [
"Suzanne Rozier <suz@truss.works>",
"John Gedeon <john@truss.works>",
"Erin Stanfill <erin@truss.works>",
"Sara Bocciardi <sara@truss.works>",
"Jeri Sommers <sojeri@truss.works>",
"Emily Mahanna <emahanna@truss.works>",
"Hana Worku <hana@truss.works>"
],
"license": "Apache-2.0",
"bugs": {
"url": "https://github.com/trussworks/react-uswds/issues"
Expand All @@ -54,6 +63,7 @@
"@babel/preset-react": "^7.0.0",
"@storybook/addon-info": "^5.2.3",
"@storybook/react": "^5.2.1",
"@storybook/storybook-deployer": "^2.8.5",
"@testing-library/jest-dom": "^5.3.0",
"@testing-library/react": "^10.0.1",
"@testing-library/react-hooks": "^3.2.1",
Expand All @@ -66,10 +76,11 @@
"@typescript-eslint/parser": "^2.3.2",
"awesome-typescript-loader": "^5.2.1",
"babel-eslint": "^10.0.3",
"babel-jest": "^25.2.3",
"babel-jest": "^25.1.0",
"babel-loader": "^8.0.6",
"css-loader": "^3.2.0",
"css-modules-typescript-loader": "^4.0.0",
"danger": "^10.0.0",
"eslint": "^6.5.1",
"eslint-config-prettier": "^6.3.0",
"eslint-plugin-import": "^2.18.2",
Expand All @@ -90,20 +101,27 @@
"sass-loader": "^8.0.2",
"sass-resources-loader": "^2.0.1",
"source-map-loader": "^0.2.4",
"stylelint": "^13.2.1",
"stylelint": "^13.3.0",
"stylelint-config-css-modules": "^2.2.0",
"stylelint-config-prettier": "^8.0.1",
"stylelint-config-recommended": "^3.0.0",
"stylelint-config-sass-guidelines": "^7.0.0",
"stylelint-prettier": "^1.1.1",
"stylelint-scss": "^3.17.1",
"ts-jest": "^25.2.1",
"typescript": "^3.6.3",
"url-loader": "^4.0.0",
"webpack": "^4.41.0",
"webpack-cli": "^3.3.9"
},
"resolutions": {
"webpack/acorn": "^6.4.1",
"acorn-globals/acorn": "^6.4.1"
},
"husky": {
"hooks": {
"pre-commit": "tsc --noEmit && lint-staged"
"pre-commit": "tsc --noEmit && lint-staged",
"pre-push": "yarn danger local --failOnErrors"
}
},
"lint-staged": {
Expand Down
51 changes: 51 additions & 0 deletions src/components/Alert/Alert.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,57 @@ export const info = (): React.ReactElement => (
</Alert>
)

export const slim = (): React.ReactElement => (
<>
<Alert type="success" slim>
{testText}
</Alert>
<Alert type="warning" slim>
{testText}
</Alert>
<Alert type="error" slim>
{testText}
</Alert>
<Alert type="info" slim>
{testText}
</Alert>
</>
)

export const noIcon = (): React.ReactElement => (
<>
<Alert type="success" noIcon>
{testText}
</Alert>
<Alert type="warning" noIcon>
{testText}
</Alert>
<Alert type="error" noIcon>
{testText}
</Alert>
<Alert type="info" noIcon>
{testText}
</Alert>
</>
)

export const slimNoIcon = (): React.ReactElement => (
<>
<Alert type="success" slim noIcon>
{testText}
</Alert>
<Alert type="warning" slim noIcon>
{testText}
</Alert>
<Alert type="error" slim noIcon>
{testText}
</Alert>
<Alert type="info" slim noIcon>
{testText}
</Alert>
</>
)

export const withCTA = (): React.ReactElement => (
<Alert
type="warning"
Expand Down
7 changes: 7 additions & 0 deletions src/components/Alert/Alert.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,13 @@ describe('Alert component', () => {
expect(queryByTestId('alert')).toBeInTheDocument()
})

it('accepts className prop', () => {
const { queryByTestId } = render(
<Alert type="success" className="myClass" />
)
expect(queryByTestId('alert')).toHaveClass('myClass')
})

describe('with a CTA', () => {
it('renders the CTA', () => {
const testCTA = <button type="button">Click Here</button>
Expand Down
30 changes: 21 additions & 9 deletions src/components/Alert/Alert.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,24 +8,36 @@ interface AlertProps {
heading?: React.ReactNode
children?: React.ReactNode
cta?: React.ReactNode
slim?: boolean
noIcon?: boolean
}

export const Alert = ({
type,
heading,
cta,
children,
}: AlertProps): React.ReactElement => {
const classes = classnames('usa-alert', {
'usa-alert--success': type === 'success',
'usa-alert--warning': type === 'warning',
'usa-alert--error': type === 'error',
'usa-alert--info': type === 'info',
[styles.alertWithCTA]: !!cta,
})
slim,
noIcon,
className,
...props
}: AlertProps & React.HTMLAttributes<HTMLDivElement>): React.ReactElement => {
const classes = classnames(
'usa-alert',
{
'usa-alert--success': type === 'success',
'usa-alert--warning': type === 'warning',
'usa-alert--error': type === 'error',
'usa-alert--info': type === 'info',
'usa-alert--slim': slim,
'usa-alert--no-icon': noIcon,
[styles.alertWithCTA]: !!cta,
},
className
)

return (
<div className={classes} data-testid="alert">
<div className={classes} data-testid="alert" {...props}>
<div className="usa-alert__body">
{heading && <h3 className="usa-alert__heading">{heading}</h3>}
{children && <p className="usa-alert__text">{children}</p>}
Expand Down
Loading

0 comments on commit e5b3917

Please sign in to comment.