@spaced-out/ui-design-system 0.0.3-beta.1 → 0.0.4

package/.all-contributorsrc

@@ -0,0 +1,36 @@
+{
+  "projectName": "ui-design-system",
+  "projectOwner": "Spaced-Out",
+  "repoType": "github",
+  "repoHost": "https://github.com",
+  "files": [
+    "README.md",
+    "src/stories/INTRODUCTION.stories.mdx"
+  ],
+  "imageSize": 100,
+  "commit": false,
+  "commitConvention": "react",
+  "contributors": [
+    {
+      "login": "superrover",
+      "name": "Nishant Gaurav",
+      "avatar_url": "https://avatars.githubusercontent.com/u/86281150?v=4",
+      "profile": "https://github.com/superrover",
+      "contributions": [
+        "code",
+        "doc"
+      ]
+    },
+    {
+      "login": "Anant-Raj",
+      "name": "Anant Raj",
+      "avatar_url": "https://avatars.githubusercontent.com/u/8904071?v=4",
+      "profile": "https://github.com/Anant-Raj",
+      "contributions": [
+        "code",
+        "doc"
+      ]
+    }
+  ],
+  "contributorsPerLine": 7
+}

package/.cspell/custom-words.txt

@@ -1,6 +1,8 @@
 atleast
 circlehollow
 commitlint
+contributorsrc
+Crespo
 DEFAULTTEXT
 dismissable
 Fennimore
@@ -10,12 +12,15 @@ Gaurav
 Lipsey
 Neue
 Nishant
+OPACITYS
 partialformat
 premajor
 preminor
 prepatch
 rgba
 sbdocs
+Stapleton
+superrover
 testid
 tnum
 transclude

package/.eslintignore

@@ -1 +1,2 @@
-/src/assets/fontawesome/
+/src/assets/fontawesome/
+node_modules/

package/.github/pull_request_template.md

@@ -0,0 +1,17 @@
+### Description of changes
+<!--- Describe your changes in detail -->
+
+### Design Specs(Add a link to Spec sheet)
+<!--- Add a link to design specs -->
+
+### Screenshots(if appropriate)
+
+### Does this close any currently open issues?
+
+### Breaking changes(Describe if any)
+
+### Checklist:
+<!--- Go over all the following points, and put an `x` in all the boxes that apply. -->
+<!--- If you're unsure about any of these, don't hesitate to ask. We're here to help! -->
+- [ ] Merged with latest `master` branch
+- [ ] I have updated the documentation accordingly.

package/.prettierrc

@@ -1,11 +1,27 @@
-trailingComma: 'all'
-bracketSpacing: false
-singleQuote: true
-endOfLine: lf
-overrides:
-  - files: ['*.js', '*.jsx']
-    options:
-      parser: 'babel-flow'
-  - files: ['*.css']
-    options:
-      parser: 'css'
+{
+  "singleQuote": true,
+  "trailingComma": "all",
+  "printWidth": 80,
+  "tabWidth": 2,
+  "bracketSpacing": false,
+  "endOfLine": "lf",
+  "overrides": [
+    {
+      "files": [
+        "*.js",
+        "*.jsx"
+      ],
+      "options": {
+        "parser": "babel-flow"
+      }
+    },
+    {
+      "files": [
+        "*.css"
+      ],
+      "options": {
+        "parser": "css"
+      }
+    }
+  ]
+}

package/.storybook/preview.js

@@ -62,8 +62,10 @@ export const parameters = {
       method: 'alphabetical',
       order: [
         'Introduction',
-        'Design Tokens',
         'Changelog',
+        'Usage',
+        'Contribution',
+        'Design Tokens',
         'Tokens',
         'Components',
         [

package/.vscode/settings.json

@@ -0,0 +1,7 @@
+{
+  "eslint.validate": ["javascript", "javascriptreact"],
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true
+  },
+  "marquee.widgets.npm-stats.packageNames": ["@spaced-out/ui-design-system"]
+}

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### 0.0.4 (2022-11-24)
+
+
+### Features
+
+* pr template ([#35](https://github.com/Spaced-Out/ui-design-system/issues/35)) ([c18e112](https://github.com/Spaced-Out/ui-design-system/commit/c18e1123730acaad77e1334a949573ac0cfd3708))
+
+### 0.0.3 (2022-11-22)
+
+
+### Bug Fixes
+
+* added new storybook pages ([2844a5e](https://github.com/Spaced-Out/ui-design-system/commit/2844a5e90cfa479268374bc8bfd4f46bc8458149))
+
 ### 0.0.3-beta.1 (2022-11-21)
 
 

package/CONTRIBUTING.md

@@ -0,0 +1,161 @@
+![Alt text](https://spaced-out.github.io/ui-design-system/images/contributions.png)
+
+# Contribution Guidelines
+
+Genesis Design System is created using:
+
+- [Gulp](https://gulpjs.com/)
+- [CSS Modules](https://github.com/css-modules/css-modules)
+- [React](https://reactjs.org/)
+
+It also features:
+
+- [Style-Dictionary](https://www.style-dictionary-play.dev/) to help you create and style variables
+- [Storybook](https://storybook.js.org/) to help you create and show off your components
+- [Standard Version](https://github.com/conventional-changelog/standard-version) to manage changelog across releases
+
+## Development
+
+<br/>
+
+### Environment Setup
+
+- Clone the repository on Github.
+
+- Run the environment locally:
+
+```bash
+#clone repository
+git clone git@github.com:Spaced-Out/ui-design-system.git
+
+#change directory to the cloned repository
+cd ui-design-system
+
+#create new branch
+git checkout -b [BRANCH_NAME]
+
+#install dependencies
+yarn install
+
+#start development server
+yarn storybook
+```
+
+> The `storybook` server runs on port **6006** and url is opened automatically on successful dev build.
+
+### Generating New Components
+
+We've included a handy NodeJS util file under `scripts` called `create-component.js`. Instead of copy pasting components to create a new component,
+you can instead run this command to generate all the files you need to start building out a new component. To use it:
+
+```bash
+yarn generate YourComponentName
+```
+
+> This will generate:
+
+```bash
+/src
+  /components
+    /YourComponentName
+      YourComponentName.jsx
+      YourComponentName.stories.jsx
+      YourComponentName.module.css
+      YourComponentName.stories.module.css
+```
+
+> The default templates for each file can be modified under `scripts/templates`.
+
+### Exports
+
+Export Component as named export and Component Props/Types e.g. export Modal from `./src/components/Modal/index.js`.
+
+### Imports
+
+We use a third party plugin to sort out imports. We use
+[eslint-plugin-simple-import-sort](https://github.com/lydell/eslint-plugin-simple-import-sort#sort-order)
+
+### Adding Stories
+
+A [story](https://storybook.js.org/docs/react/get-started/whats-a-story) captures the rendered state of a UI component. You can write multiple stories
+per component. A component story must have `.stories.jsx` extension.
+
+### Using Design Tokens
+
+Check out our [**Design Tokens Page**](https://spaced-out.github.io/ui-design-system/?path=/docs/design-tokens--page) to use tokens.
+
+### Testing Genesis Design System Locally
+
+> In the `ui_design_system` directory's run:
+
+```bash
+  yarn build
+```
+
+> In the `consumer's` directory's run:
+
+```bash
+  yarn add @spaced-out/ui-design-system@file:../../ui-design-system
+```
+
+> This would copy the genesis design system package to node modules locally and create an entry in the `consumer's` package.json
+
+```bash
+  ...
+  "dependencies": {
+    ...
+    "@spaced-out/ui-design-system": "file:../../ui_design_system",
+    ...
+  },
+  ...
+```
+
+which will install the local genesis design system library as a dependency in `consumer`.
+
+For every change in `ui_design_system` that you want to propagate to `consumer` run:
+
+> in `ui_design_system`
+
+```bash
+  yarn build
+```
+
+> in `consumer`
+
+```bash
+  yarn upgrade @spaced-out/ui-design-system@file:../../ui-design-system
+```
+
+## Commits
+
+Each commit should follow [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) guidelines
+
+Most commonly used commit prefixes:
+
+> `fix:` a commit of the type fix patches a bug in your codebase (this correlates with [PATCH](https://semver.org/#summary) in Semantic Versioning)
+
+> `feat:` a commit of the type feat introduces a new feature to the codebase (this correlates with [MINOR](https://semver.org/#summary) in Semantic Versioning)
+
+> `refactor:` Commits, that rewrite/restructure your code, however does not change any behavior
+
+> `style:` Commits, that do not affect the meaning (white-space, formatting, missing semi-colons, etc)
+
+> `docs:` Commits, that affect documentation only
+
+> `build:` Commits, that affect build components like build tool, ci pipeline, dependencies, project version, etc.
+
+## Add yourself to the maintainer list
+
+To add yourself to the `maintainers` table in the README and INTRODUCTION stories:
+
+> Run the following commands from the root of the repo:
+
+```sh
+./node_modules/.bin/all-contributors add <username> <contribution>
+```
+
+> Then, you'll need to generate the updated `all-contributors` table by running
+
+```sh
+./node_modules/.bin/all-contributors generate
+```

package/README.md

@@ -1,167 +1,125 @@
-# Sense UI Component Library
+![Alt text](https://spaced-out.github.io/ui-design-system/images/usage.png)
 
-This Genesis design system is created using:
+# Genesis Design System
 
-- [Gulp](https://gulpjs.com/)
-- [CSS Modules](https://github.com/css-modules/css-modules)
-- [React](https://reactjs.org/)
+Genesis design system consists of a set of tools and protocols that unify design and development across surfaces (platforms) to deliver consistent
+user experiences. The system utilizes workflow automation to streamline the design and development process. It's comprised of a number of React
+web components that each play a unique role within the product development cycle.
 
-It also features:
+The integration of these components are intended to grow and scale overtime to increasingly decrease workflow friction and optimize the product
+development lifecycle.
 
-- [Style-Dictionary](https://www.style-dictionary-play.dev/) to help you create and style variables
-- [Storybook](https://storybook.js.org/) to help you create and show off your components
-- [Standard Version](https://github.com/conventional-changelog/standard-version) to manage changelog across releases
-
-### Commits
-
-Each commit should follow [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) guidelines
-
-Most commonly used commit prefixes:
-
-`fix:` a commit of the type fix patches a bug in your codebase (this correlates with [PATCH](https://semver.org/#summary) in Semantic Versioning)
-
-`feat:` a commit of the type feat introduces a new feature to the codebase (this correlates with [MINOR](https://semver.org/#summary) in Semantic Versioning)
-
-`refactor:` Commits, that rewrite/restructure your code, however does not change any behavior
-
-`style:` Commits, that do not affect the meaning (white-space, formatting, missing semi-colons, etc)
-
-`docs:` Commits, that affect documentation only
-
-`build:` Commits, that affect build components like build tool, ci pipeline, dependencies, project version, etc.
-
-### Building
-
-```
-yarn build
-```
-
-To Build the style variables using style-dictionary run
-
-```
-yarn build:style-variables
-```
-
-It would put all the style variables created inside the styles folder. Our yarn build hook would essentially copy these variables to the build output target.
-
-### Storybook
-
-To run a live-reload Storybook server on your local machine:
-
-```
-yarn storybook
-```
+## Usage
 
-To export your Storybook as static files:
+To install `@spaced-out/ui-design-system` in your project, you will need to run the
+following command using [yarn](https://yarnpkg.com/):
 
-```
-yarn storybook:export
+```bash
+yarn add @spaced-out/ui-design-system
 ```
 
-After merging PR in master, storybook gets updated at https://spaced-out.github.io/ui-design-system/
+Usage of the component (after the library installed as a dependency in project) will be:
 
-### Generating New Components
+```js
+import React from 'react';
+import {Button} from '@spaced-out/ui-design-system/lib/components/Button';
 
-We've included a handy NodeJS util file under `scripts` called `create-component.js`. Instead of copy pasting components to create a new component, you can instead run this command to generate all the files you need to start building out a new component. To use it:
-
-```
-yarn generate YourComponentName
-```
-
-This will generate:
+const App = () => (
+  <div className="app-container">
+    <Button>Hello world</Button>
+  </div>
+);
 
-```
-/src
-  /components
-    /YourComponentName
-      YourComponentName.jsx
-      YourComponentName.stories.jsx
-      YourComponentName.module.css
-      YourComponentName.stories.module.css
+export default App;
 ```
 
-The default templates for each file can be modified under `scripts/templates`.
+For more information about each component, check out
+[Storybook](https://spaced-out.github.io/ui-design-system).
 
-### Installing Sense UI Component Library in ui_server Locally
+**&rarr; Fonts**
 
-In the `ui_design_system` directory's run:
+By default Genesis uses `'Centra No 2'` font. To add this font in your project you need to load this font. The recommended way to do it is by adding the following in your global css.
 
-```
-  yarn build
-```
+```css
+@font-face {
+  font-family: 'Centra No 2';
+  src: url('https://s3.us-west-2.amazonaws.com/assets.sensehq.com/type/CentraNo2-Book.woff2')
+      format('woff2'), url('https://s3.us-west-2.amazonaws.com/assets.sensehq.com/type/CentraNo2-Book.woff')
+      format('woff');
+  font-weight: 300 400;
+  font-style: normal;
+  font-display: auto;
+}
 
-In the `consumer's` directory's run:
+@font-face {
+  font-family: 'Centra No 2';
+  src: url('https://s3.us-west-2.amazonaws.com/assets.sensehq.com/type/CentraNo2-BookItalic.woff2')
+      format('woff2'), url('https://s3.us-west-2.amazonaws.com/assets.sensehq.com/type/CentraNo2-BookItalic.woff')
+      format('woff');
+  font-weight: 300 400;
+  font-style: italic;
+  font-display: auto;
+}
 
-```
-  yarn add @spaced-out/ui-design-system@file:../../ui-design-system
+@font-face {
+  font-family: 'Centra No 2';
+  src: url('https://s3.us-west-2.amazonaws.com/assets.sensehq.com/type/CentraNo2-Medium.woff2')
+      format('woff2'), url('https://s3.us-west-2.amazonaws.com/assets.sensehq.com/type/CentraNo2-Medium.woff')
+      format('woff');
+  font-weight: 500;
+  font-style: normal;
+  font-display: auto;
+}
 ```
 
-This would copy the design system package to node modules locally and create an entry in the `consumer's` package.json
-
-```
-  ...
-  "dependencies": {
-    ...
-    "@spaced-out/ui-design-system": "file:../../ui_design_system",
-    ...
-  },
-  ...
-```
+**&rarr; Using Genesis Design Tokens**
 
-which will install the local component library as a dependency in `consumer`.
+Design tokens are exported as `.css` and `.js`. You can consume them easily by
 
-For every change in `ui_design_system` that you want to propagate to `consumer` run:
+CSS use:
 
-in `ui_design_system`
+```js
+@value (size2) from '@spaced-out/ui-design-system/lib/styles/variables/_size.css';
 
-```
-  yarn build
+.example-container {
+    height: size2
+}
 ```
 
-in `consumer`
+JS use:
 
+```js
+import size2 from "@spaced-out/ui-design-system/lib/styles/variables/_size.js";
+import * as SIZES from "@spaced-out/ui-design-system/lib/styles/variables/_size.js";
 ```
-  yarn upgrade @spaced-out/ui-design-system@file:../../ui-design-system
-```
-
-## Usage
-
-Let's say you created a public NPM package called `@spaced-out/ui-design-system` with the `Button` component created in this repository.
 
-Usage of the component (after the library installed as a dependency into another project) will be:
+## Documentation
 
-```JSX
-import React from "react";
-import { Button } from "@spaced-out/ui-design-system/lib/components/Button";
+- [Storybook](https://spaced-out.github.io/ui-design-system)
 
-const App = () => (
-  <div className="app-container">
-    <h1>Hello I'm consuming the component library</h1>
-    <Button>Hello world</Button>
-  </div>
-);
+## Contributions
 
-export default App;
-```
+Check out our [**Contribution Guide**](https://spaced-out.github.io/ui-design-system/?path=/docs/contribution--page) to setup and contribute to Genesis.
 
-### Using Component Library Design Tokens
+## Changelog
 
-Design tokens are exported `.css` and `.js`. You can consume them easily by
+Check out our [**Changelog here**](https://spaced-out.github.io/ui-design-system/?path=/docs/changelog--page)
 
-CSS use:
+## Maintainers ✨
 
-```CSS
-@value (size2) from '@spaced-out/ui-design-system/lib/styles/variables/_size.css';
+<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
+<!-- prettier-ignore-start -->
+<!-- markdownlint-disable -->
+<table>
+  <tbody>
+    <tr>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/superrover"><img src="https://avatars.githubusercontent.com/u/86281150?v=4?s=100" width="100px;" alt="Nishant Gaurav"/><br /><sub><b>Nishant Gaurav</b></sub></a><br /><a href="https://github.com/Spaced-Out/ui-design-system/commits?author=superrover" title="Code">💻</a> <a href="https://github.com/Spaced-Out/ui-design-system/commits?author=superrover" title="Documentation">📖</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/Anant-Raj"><img src="https://avatars.githubusercontent.com/u/8904071?v=4?s=100" width="100px;" alt="Anant Raj"/><br /><sub><b>Anant Raj</b></sub></a><br /><a href="https://github.com/Spaced-Out/ui-design-system/commits?author=Anant-Raj" title="Code">💻</a> <a href="https://github.com/Spaced-Out/ui-design-system/commits?author=Anant-Raj" title="Documentation">📖</a></td>
+    </tr>
+  </tbody>
+</table>
 
-.example-container {
-    height: size2
-}
-```
-
-JS use:
+<!-- markdownlint-restore -->
+<!-- prettier-ignore-end -->
 
-```JSX
-import size2 from "@spaced-out/ui-design-system/lib/styles/variables/_size.js";
-import * as SIZES from "@spaced-out/ui-design-system/lib/styles/variables/_size.js";
-
-```
+<!-- ALL-CONTRIBUTORS-LIST:END -->

package/cspell.json

@@ -7,7 +7,10 @@
     "storybook-static",
     ".vscode",
     "CHANGELOG.md",
-    ".storybook/public"
+    ".storybook/public",
+    ".all-contributorsrc",
+    "README.md",
+    "src/stories/INTRODUCTION.stories.mdx"
   ],
   // Enable your dictionary by adding it to the list of `dictionaries`
   "dictionaries": ["custom-words"],

package/lib/components/Tooltip/Tooltip.js

@@ -22,7 +22,9 @@ const Tooltip = _ref => {
     children,
     title,
     body,
-    placement = 'top'
+    placement = 'top',
+    bodyMaxLines = 2,
+    titleMaxLines = 1
   } = _ref;
   const [open, setOpen] = React.useState(false);
   const {
@@ -53,7 +55,7 @@ const Tooltip = _ref => {
     ...children.props
   })), open && /*#__PURE__*/React.createElement("div", _extends({
     ref: floating,
-    className: (0, _classify.classify)(_TooltipModule.default.tooltip, classNames?.wrapper),
+    className: (0, _classify.classify)(_TooltipModule.default.tooltip, classNames?.tooltip),
     style: {
       position: strategy,
       top: y ?? _space.spaceNone,
@@ -62,11 +64,11 @@ const Tooltip = _ref => {
   }, getFloatingProps()), !!title && /*#__PURE__*/React.createElement(_Text.SubTitleExtraSmall, {
     color: "inversePrimary"
   }, /*#__PURE__*/React.createElement(_Truncate.Truncate, {
-    line: 1
+    line: titleMaxLines
   }, title)), !!body && /*#__PURE__*/React.createElement(_Text.BodyMedium, {
     color: !title ? 'inversePrimary' : 'inverseSecondary'
   }, /*#__PURE__*/React.createElement(_Truncate.Truncate, {
-    line: 2
+    line: bodyMaxLines
   }, body))));
 };
 exports.Tooltip = Tooltip;

package/lib/components/Tooltip/Tooltip.js.flow

@@ -33,13 +33,23 @@ import {Truncate} from '../Truncate';
 import css from './Tooltip.module.css';
 
 
-type ClassNames = $ReadOnly<{wrapper?: string}>;
+type ClassNames = $ReadOnly<{tooltip?: string}>;
 
 export type TooltipProps = {
   classNames?: ClassNames,
-  title?: string,
-  body?: string,
-  placement?: 'top' | 'bottom' | 'left' | 'right',
+  title?: string | React.Node,
+  body?: string | React.Node,
+  placement?:
+    | 'top'
+    | 'top-start'
+    | 'top-end'
+    | 'bottom'
+    | 'bottom-start'
+    | 'bottom-end'
+    | 'left'
+    | 'right',
+  bodyMaxLines?: number,
+  titleMaxLines?: number,
   // TODO(Nishant): Decide on a type to use
   // $FlowFixMe
   children: any,
@@ -51,6 +61,8 @@ export const Tooltip = ({
   title,
   body,
   placement = 'top',
+  bodyMaxLines = 2,
+  titleMaxLines = 1,
 }: TooltipProps): React.Node => {
   const [open, setOpen] = React.useState(false);
 
@@ -79,12 +91,15 @@ export const Tooltip = ({
     <>
       {React.cloneElement(
         children,
-        getReferenceProps({ref, ...children.props}),
+        getReferenceProps({
+          ref,
+          ...children.props,
+        }),
       )}
       {open && (
         <div
           ref={floating}
-          className={classify(css.tooltip, classNames?.wrapper)}
+          className={classify(css.tooltip, classNames?.tooltip)}
           style={{
             position: strategy,
             top: y ?? spaceNone,
@@ -94,13 +109,13 @@ export const Tooltip = ({
         >
           {!!title && (
             <SubTitleExtraSmall color="inversePrimary">
-              <Truncate line={1}>{title}</Truncate>
+              <Truncate line={titleMaxLines}>{title}</Truncate>
             </SubTitleExtraSmall>
           )}
 
           {!!body && (
             <BodyMedium color={!title ? 'inversePrimary' : 'inverseSecondary'}>
-              <Truncate line={2}>{body}</Truncate>
+              <Truncate line={bodyMaxLines}>{body}</Truncate>
             </BodyMedium>
           )}
         </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaced-out/ui-design-system",
-  "version": "0.0.3-beta.1",
+  "version": "0.0.4",
   "main": "index.js",
   "description": "Sense UI components library",
   "author": {
@@ -32,9 +32,10 @@
     "React",
     "Component",
     "Library",
-    "Rollup",
-    "Sass",
-    "Storybook"
+    "Design System",
+    "Genesis",
+    "Spaced Out",
+    "Sense"
   ],
   "peerDependencies": {
     "react": ">=16.8.0",
@@ -100,7 +101,8 @@
     "standard-version": "^9.5.0",
     "storybook-css-modules": "^1.0.8",
     "storybook-vscode-component": "^1.0.8",
-    "style-dictionary": "^3.7.1"
+    "style-dictionary": "^3.7.1",
+    "all-contributors-cli": "^6.20.0"
   },
   "husky": {
     "hooks": {

package/pull_request_template.md

@@ -1,48 +0,0 @@
-* **Please check if the PR fulfills these requirements**
-- [ ] The commit message follows our guidelines
-- [ ] Tests for the changes have been added (for bug fixes / features)
-- [ ] Docs have been added / updated (for bug fixes / features)
-
-
-* **Other information**:
-
-### All Submissions:
-
-* [ ] Have you followed the guidelines in our Contributing document?
-* [ ] Have you checked to ensure there aren't other open [Pull Requests](../../../pulls) for the same update/change?
-
-<!-- You can erase any parts of this template not applicable to your Pull Request. -->
-
-
-## Types of changes
-<!--- What types of changes does your code introduce? Put an `x` in all the boxes that apply: -->
-- [ ] Bug fix (non-breaking change which fixes an issue)
-- [ ] New feature (non-breaking change which adds functionality)
-- [ ] Breaking change (fix or feature that would cause existing functionality to change)
-
-<!--- Provide a general summary of your changes in the Title above -->
-
-## Description
-<!--- Describe your changes in detail -->
-
-## Design Specs
-<!--- Add a link to design specs -->
-
-## Motivation and Context
-<!--- Why is this change required? What problem does it solve? -->
-<!--- If it fixes an open issue, please link to the issue here. -->
-
-## How has this been tested?
-<!--- Please describe in detail how you tested your changes. -->
-<!--- Include details of your testing environment, tests ran to see how -->
-<!--- your change affects other areas of the code, etc. -->
-
-## Screenshots (if appropriate):
-
-
-## Checklist:
-<!--- Go over all the following points, and put an `x` in all the boxes that apply. -->
-<!--- If you're unsure about any of these, don't hesitate to ask. We're here to help! -->
-- [ ] My code follows the code style of this project.
-- [ ] My change requires a change to the documentation.
-- [ ] I have updated the documentation accordingly.