Merge release/1.25.0 into main branch (#494)

* HOTFIX update tooltip primary variant to ux-emerald (#415)

* Feature RS-8352 Tabs (#477)

Add Tabs and Tabs with react-bootstrap and styled-components

* feature/UIDS-442 add Button to DS (#450)

Adds react-bootstrap and Button component to the Design System

* Bug/UIDS-484 Set node version on nightly visual tests (#485)

* chore/UIDS-476 documentation updates (#486)

* Chore/ Add Percy snapshots for buttons (#488)

* Chore/ Delete old sample file for cypress tests (#482)

* Merge hotfix/1.24.1 into develop branch (#493)

* allows Tooltip to open on hover (#487)

* Prepare release 1.25.0

Co-authored-by: Rachel Roppolo <rachel@userinterviews.com>
Co-authored-by: Jane Sebastian <jane@userinterviews.com>
Co-authored-by: Jason Basuil <basuilj@gmail.com>
Co-authored-by: brianCollinsUI <84730553+brianCollinsUI@users.noreply.github.com>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

.github/workflows/percy-nightly-tests.yml

@@ -8,8 +8,10 @@ jobs:
     env:
       FONTAWESOME_NPM_AUTH_TOKEN: ${{ secrets.FONTAWESOME_NPM_AUTH_TOKEN }}
     steps:
-      - name: Checkout
-        uses: actions/checkout@master
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v1
+        with:
+          node-version: '14.17.4'
       - run: npm config set "@fortawesome:registry" https://npm.fontawesome.com/
       - run: npm config set "//npm.fontawesome.com/:_authToken" $FONTAWESOME_NPM_AUTH_TOKEN
       - name: Install

.storybook/main.js

@@ -4,7 +4,7 @@ module.exports = {
       name: '@storybook/addon-docs',
       options: { mdxBabelOptions: { babelrc: true, configFile: true } },
     },
-    '@storybook/addon-a11y/register',
+    '@storybook/addon-a11y',
     '@storybook/addon-actions/register',
     '@storybook/addon-knobs/register',
     '@storybook/addon-links/register',

.storybook/manager.js

@@ -0,0 +1,7 @@
+import { addons } from '@storybook/addons';
+
+import userInterviewsTheme from './user-interviews-theme';
+
+addons.setConfig({
+  theme: userInterviewsTheme,
+}); 

.storybook/preview.js

@@ -1,6 +1,4 @@
 import React from 'react';
 import { addDecorator } from "@storybook/react";
-import  { withA11y } from "@storybook/addon-a11y";
 
 addDecorator(story => <div style={{ padding: '1rem' }}>{story()}</div>);
-addDecorator(withA11y);

.storybook/user-interviews-theme.js

@@ -0,0 +1,9 @@
+import { create } from '@storybook/theming';
+import UILogo from '../public/ui-design-system.svg';
+
+export default create({
+  base: 'light',
+  brandTitle: 'User Interviews',
+  brandUrl: 'https://github.com/user-interviews/ui-design-system',
+  brandImage: UILogo,
+});

README.md

@@ -54,7 +54,35 @@ Keeping the design system relevant is important for consistency in our app. Core
 
 - For every component, we typically separate each variant out into its own story that gets exported.
 - Documentation lives in `Component.mdx` which references stories defined in `Component.stories.jsx`. See documentation style here in [Stories with arbitrary MDX](https://github.com/storybookjs/storybook/blob/master/addons/docs/docs/recipes.md#csf-stories-with-arbitrary-mdx).
-- See our [Storybook Notion Doc](https://www.notion.so/userinterviews1/Storybook-9a3585db57514ec783e39c78518ad5e6) for examples.
+- See our [Storybook Notion Doc](https://www.notion.so/userinterviews1/Storybook-9a3585db57514ec783e39c78518ad5e6) for examples. You can find our current documentation template that we try to follow for all of our `mdx` files in that Notion doc. 
+
+## Who can update documentation?
+
+- Anyone! We encourage all contributors to the Design System (engineers, designers, product) to add to our documentation. 
+
+## Steps to update any documentation file
+
+After cloning the repo, obtain a `.npmrc` file from another developer. This file contains authorization tokens for any private
+node packages.
+
+### `git checkout -b chore/UIDS-###-update-some-component-documentation`
+
+In your terminal, check out a new branch locally for you to make changes. You should have a Github issue to track that corresponds to the branch name. 
+
+### `yarn install`
+
+Installs all yarn dependencies
+
+### `yarn storybook`
+
+Launches the Storybook server.<br />
+
+- In the code editor of your choice, navigate to the Component library found under src `ui-design-system/src` 
+- Open any `Component.mdx` file (e.g. `Alert.mdx`) that you want to edit. These are markdown files. See [markdown docs](https://docs.github.com/en/github/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax) for additional how-to.
+- While Storybook is running, you should be able to view any changes you make to the `mdx` file after saving your changes. 
+- Push your changes to Github and submit for a review / pull request. 
+
+If you need any help with setup or have questions about the process of writing documentation, feel free to reach out to a developer or a member of the Design System team. 
 
 # Future additions to this document
 
@@ -80,7 +108,7 @@ In the project directory, you can run:
 
 ### `yarn storybook`
 
-Launches the Storybook server.<br />
+Launches the Storybook server.
 
 ### `yarn install`
 
@@ -216,4 +244,4 @@ If you are not able to or choose not to use the github actions described above,
 ````
 
 #### 🤔 Snags
-- you'll have to manually refresh your browser tab, after the automatic refresh, to see your expected changes.
+- you'll have to manually refresh your browser tab, after the automatic refresh, to see your expected changes.

cypress/integration/button_spec.js

@@ -0,0 +1,31 @@
+const buttons = [
+  {
+    name: 'Primary',
+    path: 'design-system-button--primary',
+    class: '.Button',
+    match: 'Confirm',
+  },
+  {
+    name: 'Danger',
+    path: 'design-system-button--danger',
+    class: '.Button',
+    match: 'Delete',
+  },
+  {
+    name: 'Warning',
+    path: 'design-system-button--warning',
+    class: '.Button',
+    match: 'Edit',
+  },
+];
+
+describe('Button', () => {
+  buttons.forEach((test) => {
+    it(test.name, () => {
+      cy.visit(test.path);
+      cy.get('#storybook-preview-iframe').iframe().find(test.class).should('contain', test.match);
+      cy.wait(1000);
+      cy.percySnapshot(test.path);
+    });
+  });
+});

jest.config.js

@@ -128,7 +128,9 @@ module.exports = {
   // setupFiles: [],
 
   // A list of paths to modules that run some code to configure or set up the testing framework before each test
-  // setupFilesAfterEnv: [],
+  setupFilesAfterEnv: [
+    '<rootDir>/spec/spec_helper.js'
+  ],
 
   // A list of paths to snapshot serializer modules Jest should use for snapshot testing
   // snapshotSerializers: [],

package.json

@@ -1,7 +1,8 @@
 {
   "name": "@user-interviews/ui-design-system",
-  "version": "1.24.1",
+  "version": "1.25.0",
   "dependencies": {
+    "react-bootstrap": "^2.0.2",
     "react-router-dom": "^5.2.0",
     "react-select": "^3.0.8",
     "react-transition-group": "^4.3.0",
@@ -43,14 +44,14 @@
     "@popperjs/core": "^2.5.3",
     "bootstrap": "5.0",
     "classnames": "^2.2.5",
-    "node-sass": "^4.13.0",
     "prop-types": "^15.6.1",
     "react": "^16.12.0",
     "react-copy-to-clipboard": "^5.0.2",
     "react-dom": "^16.12.0",
     "react-modal": "^3.12.1",
     "react-popper": "^2.2.3",
-    "react-tracking": "^8.1.0"
+    "react-tracking": "^8.1.0",
+    "styled-components": "^5.3.3"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.4",
@@ -78,7 +79,10 @@
     "@storybook/addons": "^6.2.1",
     "@storybook/react": "^6.2.1",
     "@storybook/storybook-deployer": "^2.8.7",
+    "@testing-library/jest-dom": "^5.15.0",
+    "@testing-library/react": "^12.1.2",
     "@testing-library/react-hooks": "^3.2.1",
+    "@testing-library/user-event": "^13.5.0",
     "babel-eslint": "^10.0.3",
     "babel-loader": "^8.0.6",
     "babel-plugin-module-resolver": "^4.0.0",
@@ -100,7 +104,7 @@
     "eslint-plugin-react-hooks": "^2.5.1",
     "eslint-utils": "^1.4.3",
     "jest": "^26.6.3",
-    "node-sass": "4.13.1",
+    "node-sass": "^4.14.1",
     "nodemon": "^2.0.15",
     "prop-types": "^15.6.1",
     "react": "16.14.0",
@@ -111,7 +115,11 @@
     "react-test-renderer": "^16.12.0",
     "react-tracking": "8.1.0",
     "sass-loader": "^8.0.2",
-    "style-loader": "^1.1.3"
+    "style-loader": "^1.1.3",
+    "styled-components": "^5.3.3"
+  },
+  "resolutions": {
+    "styled-components": "^5"
   },
   "description": "UI Storybook design system",
   "files": [