docs: initial table documentation

* feat(popper): add show delay

addresses [NDS-7]

* chore: allow externalTo to be null

* refactor(popper): add new Popper implementation

this uses react-popper as our base implementation
and adds transitions via react-transition-group

* refactor(popover): use new Popper component

* refactor(tooltip): use new Popper component

* refactor(popper): promote popper sass to real component

* refactor(tooltip): use updated popper tokens

* refactor(popover): use updated popper tokens

* chore: restructure Popover and Tooltip files

index.ts exports public API

* chore: improve basic dropdown story

* feat(motion): add fade transition

* refactor(button): destructure props in one place

* feat(button): set a default tooltip show delay when iconOnly

icon-only buttons should delay their tooltip
so that hovering a row of buttons doesn't
cause all tooltips to show at the same time.

* chore: update lockfile w/react-popper & react-transition-group

* docs(tooltip): add showDelay knob to applicable stories

* refactor(popover): use "distance" for offset token

* refactor(tooltip): use "distance" for offset token

* refactor: import TooltipCoreProps from the new types file

* docs(popover): add distance knob to minimal story

* refactor: remove Element check

* Create table.mdx

Added usage documentation for the table component.

* refactor(text-field): update email regex

addresses NDS-18, #152

* feat: initial badge implementation

* feat(tag): initial tag implementation

* feat(badge): initial badge implementation

* refactor(badge): changed color token for pill and dot variant

* refactor(badge): added props and removed icon for dot variant

* fix(badge): update as per code reviewed suggestions

* fix(badge): update as per code reviewed suggestions

* fix(badge): removed unwated css span

* refactor(badge): removed icon prop and done code clean up after remove icon

* fix(badge): update as per code reviewed suggestions

* chore: add default flag for tokens

Co-authored-by: Evan Yamanishi <yamanishi1@gmail.com>

* refactor: use type checking instead of assertion

* Revert "feat(button): set a default tooltip show delay when iconOnly"

This reverts commit 877f07d.

* test(tooltip): update hover/unhover tests

* chore: add unhover to dictionary

* refactor: reference can be an SVGElement

* chore(icon): use userEvent instead of fireEvent

* test(button): use userEvent insead of fireEvent where possible

* test(button): fix live region test

* chore(deps): bump codecov/codecov-action from 1 to 2.0.2

Bumps [codecov/codecov-action](https://github.com/codecov/codecov-action) from 1 to 2.0.2.
- [Release notes](https://github.com/codecov/codecov-action/releases)
- [Changelog](https://github.com/codecov/codecov-action/blob/master/CHANGELOG.md)
- [Commits](codecov/codecov-action@v1...v2.0.2)

---
updated-dependencies:
- dependency-name: codecov/codecov-action
  dependency-type: direct:production
  update-type: version-update:semver-major
...

Signed-off-by: dependabot[bot] <support@github.com>

* docs(website): initial content guidelines

* Create index.mdx

I'll need Wilmer/Anand's help with setting up the index when we have more content. Just adding this as a placeholder so I can add the content guidelines that we have so far.

* Create usable-writing-guidelines.mdx

* Update usable-writing-guidelines.mdx

Added the remaining sections of the Usable Writing Guidelines.

* Update usable-writing-guidelines.mdx

Trying to fix the links.

* chore: format with prettier

* chore: use apostrophes

* chore: add spelling ignored words

* chore: reformat principles

* chore: fix resources links; make lists

Co-authored-by: Evan Yamanishi <yamanishi1@gmail.com>

* fix(disclosure): properly render flex summary on Safari [NDS-93] (#187)

* fix: wrap disclosure's summary in div

* fix: Revert {...attributes} back to summary + temp fix comment

* fix: typo

* feat(tooltip): set a default show delay of 400ms

* fix(button): pass ARIA labelling attributes to button

* test(switch): update tooltip test

* chore: import from the right location

* chore: require node 14 for development

use of the nullish coalescing operator makes this required

* chore: remove unused token utility

this wasn't adding much, so components that need to retrieve a CSS
variable should do it themselves.

* test: fix live region test

* test(disclosure): fix failing tests

* fix(select-hook): use the correct form target

DefinitelyTyped/DefinitelyTyped#11508 (comment)

* chore(deps): yarn upgrade

* chore(deps): update storybook to 6.3.7

* chore(deps): upgrade commitlint

* chore(deps): upgrade @Material

* chore(deps): upgrade @testing-library

* chore(deps): gulp-sass upgrade

* chore(deps): upgrade husky major v7

* chore(deps): upgrade jsdom v17

* chore(deps): upgrade ts-node v10

* chore: offset tuple is optional

* refactor: error if onChange triggers without a checked attribute

* refactor(website): re-swizzle NavBar

* refactor(website): use nds color scheme switch in navbar

* refactor(core): use new sass div syntax

command: npx sass-migrator division **/*.scss
reference: https://sass-lang.com/d/slash-div

* refactor(website): remove unused var

* fix(core): remove default focus z-index

closes NDS-21

* chore(deps-dev): bump docusaurus-plugin-sass to v0.2.1

command used: yarn upgrade-interactive --latest
reference: https://github.com/rlamana/docusaurus-plugin-sass

* Revert "chore(deps-dev): bump docusaurus-plugin-sass to v0.2.1"

This reverts commit 2131bc5.

* chore: allow node v12 for development

tests won't run with node <14 because of how we're compiling tests

* refactor(core): undeclared properties cannot be null

we should consider whether these should be 'unset'

* chore(deps-dev): bump docusaurus-plugin-sass to v0.2.1

command used: yarn upgrade-interactive --latest
reference: https://github.com/rlamana/docusaurus-plugin-sass

* feat(tag): initial tag implementation

* feat(tag): initial tag implementation

* refactor(tag):  changed htmlattributes htmlelement to htmlspanelement

* refactor(badge): as per the design team suggestions

* fix(tag): fixed tag dismissable icon

* refactor(tag): fixed default as a button and for link is span

* fix(tag): as per the code review suggestions made the changes

* refactor(tag): updated the code for identifying child node is link in utility

* refactor(tag): made changes as per the code reviews

* refactor(react): export link hook and functions

* refactor: remove unused prop

* refactor: render conditionally based on AC

- when dismissible, only the dismiss button should be clickable
- when not dismissible & contains a link, the link should be clickable
- when not dismissible and not a link, the tag should be clickable

* refactor: update styling for new rendering

this simplifies the anatomy & tokens, and more closely matches the designs

* refactor: use type predicate; simplify description

* refactor: tags can't be both dismissible and a link

* chore: use knobs for link story rendering

* test(tag): add tests

Co-authored-by: Evan Yamanishi <yamanishi1@gmail.com>

* feat(text-field): add multiline and auto resizing

* feat(textarea): initial textarea implementation

* feat(textarea): auto sizing feature added to TextField component when multiline prop is active

* feat(textarea): decoupled BaseTextArea component and BaseInput responsabilities

* feat(textarea): props collision fixed on TextFieldProps

* feat(textarea): linting issues fixed, test coverage for BaseTextArea added

* feat(textarea): textfield tests updated for multiline component

* feat(textarea): textfield indentation fixed

* chore: use correct ref name (input -> textarea)

* refactor: separate textarea and input interfaces

* refactor: use isomorphic layoutEffect

* style: use consistent knob casing; story naming

* chore: add multiline knob to default story

* chore: remove useless conditional

Co-authored-by: Evan Yamanishi <yamanishi1@gmail.com>

* docs: initial badge and tag documentation

* docs: initial badge documentation

Added new documentation file for badge component

* docs: initial badge documentation

Added new documentation file for tag component

* chore: update formatting

* chore: fix admonitions syntax

https://docusaurus.io/docs/markdown-features/admonitions

* chore: use design system callouts

* chore: add initial anatomy descriptions

* chore: add badge and tag to sidebar

* chore: remove icon

* chore: simplify badge description

* chore: add badge to components root

* chore: add badge to public exports

* docs: add initial badge React docs

* chore: add badge to public exports

* chore: export badge and tag types

* docs(tag): add react api

* chore: update tag description and remove icon from anatomy

* chore: add tag to components landing page

Co-authored-by: Evan Yamanishi <yamanishi1@gmail.com>

* docs(text-field): update section on multiline

* Update text-field.mdx

Updated the multi-line text field documentation and added cautions for autosize multi-line text fields.

* chore: reformat to remove trailing whitespace

Co-authored-by: Evan Yamanishi <yamanishi1@gmail.com>

* refactor(core): remove default selection styling

* fix(core): removed default selection styling

* fix(website): changed default value null for selection-background-color and selection-text-color

* chore(deps-dev): update conventional-changelog-conventionalcommits

* chore(deps-dev): add lerna to help with releases

* chore: add codecov config

* chore(deps): yarn upgrade

* 0.0.1

* v1.3.0

* chore: update contributors

* docs(website): fix pagination display

* fix(core): make sass@1.33.x an optional peer dependency

if users are using our Sass directly, they'll need the correct version because of
https://sass-lang.com/documentation/breaking-changes/slash-div

* fix(core): prevent duplicate dependency errors on customization

this change ensures that popper/index.scss isn't used multiple times when
a developer configures it using "with".
SassError: This module was already loaded, so it can't be configured using "with".

* fix(core): make all component tokens configurable using "with"

* chore: remove root version

* chore(website): fix feature card media caps

* fix(textfield): allow the Textfield multiline component to expand vertically and horizontally

* chore(deps-dev): yarn upgrade

* v1.3.1

* Create table.mdx

Added usage documentation for the table component.

* style: format with prettier

* chore: use callouts for dos and don'ts

* chore: update specification

* chore: add table to sidebar and index

* chore: tighten up the sort indicator description

Co-authored-by: Evan Yamanishi <yamanishi1@gmail.com>
Co-authored-by: Anand Patil <apatil@wwnorton.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Evan Yamanishi <sh0ji@users.noreply.github.com>
Co-authored-by: JRebella <47323512+JRebella@users.noreply.github.com>
Co-authored-by: wguevara-norton <85630200+wguevara-norton@users.noreply.github.com>
Co-authored-by: Wilmer Guevara <wguevara@wwnorton.com>

website/docs/components/index.mdx

@@ -81,6 +81,11 @@ In order to facilitate composition, components seek to do one thing well and be
 	>
 		A switch allows the user to immediately turn an option on or off.
 	</FeatureCard>
+	<FeatureCard title="Table" slug="table"
+		media={<FeatureImage />}
+	>
+		A table allows users to view data organized in rows and columns.
+	</FeatureCard>
 	<FeatureCard title="Tag" slug="tag"
 		media={<FeatureImage />}
 	>

website/docs/components/table.mdx

@@ -0,0 +1,52 @@
+---
+title: Table
+description: A table allows users to view data organized in rows and columns.
+---
+
+import { CalloutError, CalloutSuccess } from '@wwnds/react';
+
+> A table allows users to view data organized in rows and columns.
+
+## Anatomy
+
+Tables contain **cells** of data arranged in a grid.
+
+1. **Header row** - the first row of a table contains cells that act as labels for the columns.
+	 - **Sort indicator** (_required when sortable_) - sortable header cells must convey their current sort state, which can be ascending, descending, or unsorted.
+1. **Rows** - a horizontal slice of the table groups related cells.
+1. **Columns** - a vertical slice of the table groups cells related by the label in the header cell.
+
+## Usage
+
+Use a table to organize and display long lists of data or content, or to help users find a specific piece of information in a large data set.
+
+- Columns should be in a logical order from left to right based on the content. The farthest left content column should meaningfully label the row. For example, in a student set the first column should be the student's name.
+- Search and filters can be used in conjunction with tables to help users find information
+- Table content can include:
+  - Text
+  - Numbers
+  - Checkboxes or radio buttons
+  - Custom content, such as buttons
+- Checkboxes or radio buttons should be the farthest left column. They're used to take bulk actions on the selected items in a table.
+- Tables must have at least 2 columns.
+- Column titles in the header row should be as short as possible but can wrap to 2 rows and then truncate if necessary.
+- Table content should ideally fit on one row but may wrap to multiple lines.
+- The data within the table should be related in a meaningful way.
+- Column titles should accurately label the data within the column, and include units of measurement in the column title if applicable.
+- All content within a column is the same level of hierarchy as all other content within that column. A table shouldn't be used to communicate hierarchy.
+- If a table has no content, it should display an empty state or not display the table at all.
+- Use an alternating striped background for tables with a lot of complex data to help users keep track of the rows.
+
+### Dos and Don'ts
+
+<CalloutSuccess title="Dos">
+
+Do always include a header row that clearly labels each column.
+
+</CalloutSuccess>
+
+<CalloutError title="Don'ts">
+
+Don't use a table purely for layout purposes.
+
+</CalloutError>

website/sidebars.js

@@ -45,6 +45,7 @@ module.exports = {
 		'components/spinner',
 		'components/switch',
 		'components/text-field',
+		'components/table',
 		'components/tag',
 		'components/tooltip',
 		'components/react-providers',