From db15b3965ee0b8434d75f98723e0d212ac4e6cee Mon Sep 17 00:00:00 2001 From: Suzanne Rozier Date: Fri, 24 Apr 2020 11:27:09 -0500 Subject: [PATCH] Basic horizontal nav --- .stylelintrc | 6 ++-- package.json | 2 ++ .../HorizontalNav/HorizontalNav.module.scss | 31 +++++++++++++++++ .../HorizontalNav.module.scss.d.ts | 7 ++++ .../HorizontalNav/HorizontalNav.stories.tsx | 22 ++++++++++++ .../HorizontalNav/HorizontalNav.test.tsx | 34 +++++++++++++++++++ .../HorizontalNav/HorizontalNav.tsx | 21 ++++++++++++ yarn.lock | 16 +++++++++ 8 files changed, 137 insertions(+), 2 deletions(-) create mode 100644 src/components/HorizontalNav/HorizontalNav.module.scss create mode 100644 src/components/HorizontalNav/HorizontalNav.module.scss.d.ts create mode 100644 src/components/HorizontalNav/HorizontalNav.stories.tsx create mode 100644 src/components/HorizontalNav/HorizontalNav.test.tsx create mode 100644 src/components/HorizontalNav/HorizontalNav.tsx diff --git a/.stylelintrc b/.stylelintrc index df23196536..87ea1b0b2a 100644 --- a/.stylelintrc +++ b/.stylelintrc @@ -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"], } diff --git a/package.json b/package.json index 407d035042..36ff40d983 100644 --- a/package.json +++ b/package.json @@ -97,10 +97,12 @@ "sass-resources-loader": "^2.0.1", "source-map-loader": "^0.2.4", "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", diff --git a/src/components/HorizontalNav/HorizontalNav.module.scss b/src/components/HorizontalNav/HorizontalNav.module.scss new file mode 100644 index 0000000000..32d2a7b05c --- /dev/null +++ b/src/components/HorizontalNav/HorizontalNav.module.scss @@ -0,0 +1,31 @@ +/* stylelint-disable max-nesting-depth, selector-max-compound-selectors */ + +.HorizontalNav { + > ul { + display: flex; + margin: 0; + padding: 0; + + > li { + @include u-font-size('body', '2xs'); + + list-style: none; + + > a { + @include u-text('bold'); + @include u-text('base'); + + display: block; + line-height: 0.9; + padding: 1.5rem 2.5rem; + text-decoration: none; + + &:global(.usa-current), + &:hover { + @include u-border('primary'); + border-width: 0 0 3px; + } + } + } + } +} diff --git a/src/components/HorizontalNav/HorizontalNav.module.scss.d.ts b/src/components/HorizontalNav/HorizontalNav.module.scss.d.ts new file mode 100644 index 0000000000..0c8cbc27da --- /dev/null +++ b/src/components/HorizontalNav/HorizontalNav.module.scss.d.ts @@ -0,0 +1,7 @@ +// This file is automatically generated. +// Please do not change this file! +interface CssExports { + HorizontalNav: string +} +export const cssExports: CssExports +export default cssExports diff --git a/src/components/HorizontalNav/HorizontalNav.stories.tsx b/src/components/HorizontalNav/HorizontalNav.stories.tsx new file mode 100644 index 0000000000..cebac7352d --- /dev/null +++ b/src/components/HorizontalNav/HorizontalNav.stories.tsx @@ -0,0 +1,22 @@ +import React from 'react' +import { HorizontalNav } from './HorizontalNav' + +export default { + title: 'HorizontalNav', +} + +const testItems = [ + + Current page + , + + Link one + , + + Link two + , +] + +export const flat = (): React.ReactElement => ( + +) diff --git a/src/components/HorizontalNav/HorizontalNav.test.tsx b/src/components/HorizontalNav/HorizontalNav.test.tsx new file mode 100644 index 0000000000..ae8adef7c3 --- /dev/null +++ b/src/components/HorizontalNav/HorizontalNav.test.tsx @@ -0,0 +1,34 @@ +import React from 'react' +import { render } from '@testing-library/react' + +import { HorizontalNav } from './HorizontalNav' + +const testItems = [ + + Current page + , + + Link one + , + + Link two + , +] + +describe('HorizontalNav component', () => { + it('renders without errors', () => { + const { queryByTestId } = render() + expect(queryByTestId('horizontalnav')).toBeInTheDocument() + }) + + it('renders each item', () => { + const { queryByText } = render() + expect(queryByText('Current page')).toBeInTheDocument() + expect(queryByText('Link one')).toBeInTheDocument() + expect(queryByText('Link two')).toBeInTheDocument() + }) + + describe('with a subnav', () => { + /* TODO */ + }) +}) diff --git a/src/components/HorizontalNav/HorizontalNav.tsx b/src/components/HorizontalNav/HorizontalNav.tsx new file mode 100644 index 0000000000..f3c58147f1 --- /dev/null +++ b/src/components/HorizontalNav/HorizontalNav.tsx @@ -0,0 +1,21 @@ +import React from 'react' + +import styles from './HorizontalNav.module.scss' + +type HorizontalNavProps = { + items: React.ReactNode[] +} + +export const HorizontalNav = ({ + items, +}: HorizontalNavProps): React.ReactElement => { + return ( + + ) +} diff --git a/yarn.lock b/yarn.lock index 9dd3a1aeff..493dff2037 100644 --- a/yarn.lock +++ b/yarn.lock @@ -11624,6 +11624,11 @@ style-search@^0.1.0: resolved "https://registry.yarnpkg.com/style-search/-/style-search-0.1.0.tgz#7958c793e47e32e07d2b5cafe5c0bf8e12e77902" integrity sha1-eVjHk+R+MuB9K1yv5cC/jhLneQI= +stylelint-config-css-modules@^2.2.0: + version "2.2.0" + resolved "https://registry.yarnpkg.com/stylelint-config-css-modules/-/stylelint-config-css-modules-2.2.0.tgz#8ed2a54b1bdf637219e37cdeea1950405fd022ff" + integrity sha512-+zjcDbot+zbuxy1UA31k4G2lUG+nHUwnLyii3uT2F09B8kT2YrT9LZYNfMtAWlDidrxr7sFd5HX9EqPHGU3WKA== + stylelint-config-prettier@^8.0.1: version "8.0.1" resolved "https://registry.yarnpkg.com/stylelint-config-prettier/-/stylelint-config-prettier-8.0.1.tgz#ec7cdd7faabaff52ebfa56c28fed3d995ebb8cab" @@ -11658,6 +11663,17 @@ stylelint-prettier@^1.1.1: dependencies: prettier-linter-helpers "^1.0.0" +stylelint-scss@^3.17.1: + version "3.17.1" + resolved "https://registry.yarnpkg.com/stylelint-scss/-/stylelint-scss-3.17.1.tgz#1dc442cc5167be263d3d2ea37fe177b46b925c5d" + integrity sha512-KywqqHfK1otZv1QJA4xJDgcPJp1/cP3jnABpbU9gmXOKqKt8cNt27Imsh9JhY133X8D4zDh/38pNq4WjVfUQWQ== + dependencies: + lodash "^4.17.15" + postcss-media-query-parser "^0.2.3" + postcss-resolve-nested-selector "^0.1.1" + postcss-selector-parser "^6.0.2" + postcss-value-parser "^4.0.3" + stylelint-scss@^3.4.0: version "3.16.0" resolved "https://registry.yarnpkg.com/stylelint-scss/-/stylelint-scss-3.16.0.tgz#6928fe57bcfc924110d09847c1f720472a9b7bd6"