From ce86b746943e48c3f6805937d5e6b4b464b2025b Mon Sep 17 00:00:00 2001 From: Aksel Christoffer Wiig Date: Tue, 25 Sep 2018 12:44:19 +0200 Subject: [PATCH 001/159] Made button-group class in mixins/buttons.less --- .../Documentation/components/Buttons/index.js | 17 ++++++++++++++++- src/less/mixins/button.less | 8 ++++++++ 2 files changed, 24 insertions(+), 1 deletion(-) diff --git a/src/App/Documentation/components/Buttons/index.js b/src/App/Documentation/components/Buttons/index.js index fdff917eb..96492339a 100644 --- a/src/App/Documentation/components/Buttons/index.js +++ b/src/App/Documentation/components/Buttons/index.js @@ -212,6 +212,20 @@ const UsageWithJavascript = () => ( ); +const ButtonsGroup = () => ( + <> +

Using buttons together

+

When you use buttons next to each other you have to wrap them in a button-group.

+ +
+ {"\n"} + {"\n"} + {"\n"} +
+ + +); + const ButtonsText = () => (

Use buttons...

@@ -223,6 +237,7 @@ const ButtonsText = () => ( + {/* */}
); @@ -247,4 +262,4 @@ class Buttons extends Component { export default Buttons; /* for testing */ -export { Examples, UsageWithOtherTags, OutlineButtons, Sizes, ActiveState, DisabledState, UsageWithIcons, ButtonLoader, UsageWithJavascript, ButtonsText }; +export { Examples, UsageWithOtherTags, OutlineButtons, Sizes, ActiveState, DisabledState, UsageWithIcons, ButtonLoader, UsageWithJavascript, ButtonsText, ButtonsGroup }; diff --git a/src/less/mixins/button.less b/src/less/mixins/button.less index 49cb0b0f5..8bf48e6c4 100644 --- a/src/less/mixins/button.less +++ b/src/less/mixins/button.less @@ -151,3 +151,11 @@ } } } + +.button-group { + margin-bottom: -3px; + + .btn { + margin-bottom: 3px; + } +} From 44c7afa92378d8688ed0dcb78d9985142e845fac Mon Sep 17 00:00:00 2001 From: Aksel Christoffer Wiig Date: Wed, 26 Sep 2018 08:14:45 +0200 Subject: [PATCH 002/159] Revert "Merge branch 'master' into stylechanges" This reverts commit a314521b821bbee4871e297a33bc5a3150dc3cee, reversing changes made to ce86b746943e48c3f6805937d5e6b4b464b2025b. --- CHANGELOG.md | 3 +-- README.md | 2 +- build/README.md | 1 - build/appveyor.yml | 8 +------ build/prepare-release-build.ps1 | 9 -------- package.json | 2 +- .../__snapshots__/index.test.js.snap | 2 +- src/App/components/InputGroup/index.js | 2 +- src/less/components/tooltip.less | 15 ++----------- src/px-script/index.js | 4 +--- webpack.config.js | 22 +++++-------------- 11 files changed, 14 insertions(+), 56 deletions(-) delete mode 100644 build/README.md delete mode 100644 build/prepare-release-build.ps1 diff --git a/CHANGELOG.md b/CHANGELOG.md index 0af8f3adc..6bb967ad9 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,6 @@ # Changelog -## [0.11.0] - 2018-09-25 +## [0.11.0] - 2018-09-xx ### Added @@ -28,7 +28,6 @@ - Fixed issue with selects appearing "glossy" on safari. - Fixed issue with select tag with attribute `multiple` not being rendered properly. - Fixed issue with click event on loader-button. -- Fixed an issue with tooltip outline being visible when not hovering parent element while parent element has focus. ### Removed diff --git a/README.md b/README.md index 848f62d6c..1a5a07242 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,7 @@ # design.payex.com -[![Version](https://img.shields.io/badge/Version-0.11.0-blue.svg)](https://ci.appveyor.com/project/erikhallaraaker/design-payex-com/branch/master) +[![Version](https://img.shields.io/badge/Version-0.10.20-blue.svg)](https://ci.appveyor.com/project/erikhallaraaker/design-payex-com/branch/master) [![Build status](https://ci.appveyor.com/api/projects/status/1dii19sqw1m7xtsn/branch/master?svg=true)](https://ci.appveyor.com/project/PayEx/design-payex-com/branch/master) [![dependencies Status](https://david-dm.org/payex/design.payex.com/status.svg)](https://david-dm.org/payex/design.payex.com) [![devDependencies Status](https://david-dm.org/payex/design.payex.com/dev-status.svg)](https://david-dm.org/payex/design.payex.com?type=dev) diff --git a/build/README.md b/build/README.md deleted file mode 100644 index 1f153a9c9..000000000 --- a/build/README.md +++ /dev/null @@ -1 +0,0 @@ -# AppVeyor build/deploy diff --git a/build/appveyor.yml b/build/appveyor.yml index c11babf40..1900160cb 100644 --- a/build/appveyor.yml +++ b/build/appveyor.yml @@ -16,9 +16,6 @@ environment: secure: IGs25EMrhe0au+uVDbOck6akDzC9ykvJeR0zJjhrT6idNuYOr/JpyGdefQxSlWXk github_email: secure: U3oByHGtWDiIy9psThpxwg== - # Sentry - sentry_token: - secure: a/+7STfY8W8+RTlSDgKIZghq6iIy8K9WL5lICC6wsaoXPvKuBMjCsTE/KBdvP6vauLd9E2zbGHWjGUTI8SrF1bZUluC4VqhmrkWz9edM+10= # cache: # - node_modules @@ -35,11 +32,8 @@ install: # build configuration # #---------------------------------# -before_build: -- ps: ./build/prepare-release-build.ps1 - build_script: -- cmd: npm run build:prod -- --env.release=%release% +- cmd: npm run build:prod #---------------------------------# # tests configuration # diff --git a/build/prepare-release-build.ps1 b/build/prepare-release-build.ps1 deleted file mode 100644 index 5740e3c8f..000000000 --- a/build/prepare-release-build.ps1 +++ /dev/null @@ -1,9 +0,0 @@ -if (($Env:APPVEYOR_REPO_TAG -eq "true") -and ($Env:GitVersion_BranchName -eq "master")) { - $Env:release = "true" - - # Replace placeholder with api-token in .sentryclirc - (Get-Content C:\projects\design-payex-com\.sentryclirc).replace("", $Env:sentry_token) | Set-Content C:\projects\design-payex-com\.sentryclirc - -} else { - $Env:release = "false" -} diff --git a/package.json b/package.json index 527c6596b..7fe047dd2 100644 --- a/package.json +++ b/package.json @@ -66,7 +66,7 @@ "filemanager-webpack-plugin": "^2.0.4", "html-webpack-plugin": "^3.2.0", "jest": "^23.6.0", - "less": "~3.6.0", + "less": "^3.6.0", "less-loader": "^4.1.0", "less-plugin-lists": "^1.1.2", "mini-css-extract-plugin": "^0.4.2", diff --git a/src/App/components/InputGroup/__snapshots__/index.test.js.snap b/src/App/components/InputGroup/__snapshots__/index.test.js.snap index 7d7b76ee9..851faf16f 100644 --- a/src/App/components/InputGroup/__snapshots__/index.test.js.snap +++ b/src/App/components/InputGroup/__snapshots__/index.test.js.snap @@ -17,7 +17,7 @@ exports[`Component: InputGroup - renders 1`] = ` data-pattern={null} data-required={null} data-validate={null} - defaultValue="" + defaultValue={null} disabled={null} id={null} placeholder={null} diff --git a/src/App/components/InputGroup/index.js b/src/App/components/InputGroup/index.js index 814d49b78..fc7c9bf9e 100644 --- a/src/App/components/InputGroup/index.js +++ b/src/App/components/InputGroup/index.js @@ -46,7 +46,7 @@ const InputGroup = ({ className: "form-control", id: id || null, placeholder: placeholder || null, - defaultValue: defaultValue || "", + defaultValue: defaultValue || null, disabled: disabled || null, readOnly: readOnly || null, autoComplete: autoComplete || null, diff --git a/src/less/components/tooltip.less b/src/less/components/tooltip.less index b878551e7..1fd5db8f2 100644 --- a/src/less/components/tooltip.less +++ b/src/less/components/tooltip.less @@ -1,5 +1,7 @@ [data-tooltip] { position: relative; + // margin: @base-margin; + display: inline-block; &:before { content: ""; @@ -97,17 +99,4 @@ opacity: 1; } } - - &:focus { - &:not(:hover) { - &:before, - &:after { - width: 0; - height: 0; - padding: 0; - border: none; - content: ""; - } - } - } } diff --git a/src/px-script/index.js b/src/px-script/index.js index 6008c40cb..cc0bf147b 100644 --- a/src/px-script/index.js +++ b/src/px-script/index.js @@ -15,9 +15,7 @@ import topbar from "./topbar"; import validation from "./validation"; // sentry reporter -if (process.env.sentry) { - init({ dsn: "https://832de6a6953642bea1d70c41c12a5ccd@sentry.io/80077" }); -} +init({ dsn: "https://832de6a6953642bea1d70c41c12a5ccd@sentry.io/80077" }); const px = { actionList, diff --git a/webpack.config.js b/webpack.config.js index 3c8448442..57fd35c06 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -15,10 +15,8 @@ const SentryCliPlugin = require("@sentry/webpack-plugin"); module.exports = (env, argv) => { const version = pkg.version; const isProd = argv.mode === "production"; - const isRelease = env.release === "true"; const isDevServer = !!argv.host; - const config = { entry: { polyfills: "./src/polyfills/index.js", @@ -230,22 +228,12 @@ module.exports = (env, argv) => { ] } ] - }) - ); - } - - if (isRelease) { - config.plugins.push( - new SentryCliPlugin({ - release: version, - include: ".", - ignore: ["node_modules", "webpack.config.js"] }), - new webpack.DefinePlugin({ - "process.env": { - sentry: true - } - }) + // new SentryCliPlugin({ + // release: version, + // include: ".", + // ignore: ["node_modules", "webpack.config.js"] + // }) ); } From 9fe38f904086be1269a87bd98949d585e1e1fed9 Mon Sep 17 00:00:00 2001 From: Aksel Christoffer Wiig Date: Wed, 26 Sep 2018 08:39:42 +0200 Subject: [PATCH 003/159] Added button-group to documentation --- .../Documentation/components/Buttons/index.js | 96 ++++++++++++------- src/App/components/Button/index.js | 6 +- 2 files changed, 63 insertions(+), 39 deletions(-) diff --git a/src/App/Documentation/components/Buttons/index.js b/src/App/Documentation/components/Buttons/index.js index 96492339a..fb2b596e7 100644 --- a/src/App/Documentation/components/Buttons/index.js +++ b/src/App/Documentation/components/Buttons/index.js @@ -11,10 +11,12 @@ const Examples = () => (

Examples

Several button styles etc...

- {"\n"} - {"\n"} - {"\n"} - {"\n"} +
{"\n"} + {"\n"} + {"\n"} + {"\n"} + {"\n"} +
); @@ -24,11 +26,13 @@ const UsageWithOtherTags = () => (

Usage with other tags

The .btn class can also be used with other html-tags like {""} or {""}.

- {"\n"} - {"\n"} - {"\n"} - {"\n"} - {"\n"} +
{"\n"} + {"\n"} + {"\n"} + {"\n"} + {"\n"} + {"\n"} +
); @@ -38,9 +42,11 @@ const OutlineButtons = () => (

Outline buttons

Several button styles etc...

- {"\n"} - {"\n"} - {"\n"} +
{"\n"} + {"\n"} + {"\n"} + {"\n"} +
); @@ -52,26 +58,34 @@ const Sizes = () => (

Large buttons

....btn-lg

- {"\n"} - {"\n"} +
{"\n"} + {"\n"} + {"\n"} +

Small buttons

....btn-sm

- {"\n"} - {"\n"} +
{"\n"} + {"\n"} + {"\n"} +

Extra small buttons

....btn-xs

- {"\n"} - {"\n"} +
{"\n"} + {"\n"} + {"\n"} +

Block level

....btn-block

- {"\n"} - {"\n"} +
{"\n"} + {"\n"} + {"\n"} +
); @@ -81,9 +95,11 @@ const ActiveState = () => (

Active state

Active state with .active...

- {"\n"} - {"\n"} - {"\n"} +
{"\n"} + {"\n"} + {"\n"} + {"\n"} +
); @@ -93,9 +109,11 @@ const DisabledState = () => (

Disabled state

Disabled state with ...

- {"\n"} - {"\n"} - {"\n"} +
{"\n"} + {"\n"} + {"\n"} + {"\n"} +
); @@ -105,8 +123,10 @@ const UsageWithIcons = () => (

Usage with icons

To use a button with an icon... Read more about icon usage here here.

- {"\n\n"} - {"\n"} +
{"\n"} + {"\n\n"} + {"\n"} +
); @@ -116,14 +136,18 @@ const ButtonLoader = () => (

Button loader

To use a button with a loader simply add the attribute to add the required markup for the loader component. Add class .loading to display the loader.

- {"\n"} - {"\n"} - {"\n"} +
{"\n"} + {"\n"} + {"\n"} + {"\n"} +
- {"\n"} - {"\n"} - {"\n"} +
{"\n"} + {"\n"} + {"\n"} + {"\n"} +

Adding the attribute to a button component will produce the following html:

@@ -217,7 +241,7 @@ const ButtonsGroup = () => (

Using buttons together

When you use buttons next to each other you have to wrap them in a button-group.

-
+
{"\n"} {"\n"} {"\n"} {"\n"} @@ -233,11 +257,11 @@ const ButtonsText = () => ( + - {/* */}
); diff --git a/src/App/components/Button/index.js b/src/App/components/Button/index.js index d49334b9d..2cd91de24 100644 --- a/src/App/components/Button/index.js +++ b/src/App/components/Button/index.js @@ -34,9 +34,9 @@ const Button = ({ label, id, name, value, href, icon, loading, type, disabled, b if (input) return ; return ( - ); }; From b1fd6c6b7059abcfd416e6c3204711e80f7f7cd0 Mon Sep 17 00:00:00 2001 From: Aksel Christoffer Wiig Date: Wed, 26 Sep 2018 12:49:47 +0200 Subject: [PATCH 004/159] Margin and padding fix in progress --- .../Documentation/components/Buttons/index.js | 26 ++++++++-------- src/less/_variables.css | 30 +++++++++++++++++++ src/less/_variables.less | 30 +++++++++++++++++-- src/less/components/action-list.less | 11 +++++-- src/less/components/alert.less | 6 ++-- src/less/components/breadcrumb.less | 4 +-- src/less/components/button.less | 7 ++--- src/less/components/card.less | 18 +++++------ 8 files changed, 95 insertions(+), 37 deletions(-) create mode 100644 src/less/_variables.css diff --git a/src/App/Documentation/components/Buttons/index.js b/src/App/Documentation/components/Buttons/index.js index fb2b596e7..eb78f9663 100644 --- a/src/App/Documentation/components/Buttons/index.js +++ b/src/App/Documentation/components/Buttons/index.js @@ -10,7 +10,7 @@ const Examples = () => ( <>

Examples

Several button styles etc...

- +
{"\n"} {"\n"} {"\n"} @@ -25,7 +25,7 @@ const UsageWithOtherTags = () => ( <>

Usage with other tags

The .btn class can also be used with other html-tags like {""} or {""}.

- +
{"\n"} {"\n"} {"\n"} @@ -41,7 +41,7 @@ const OutlineButtons = () => ( <>

Outline buttons

Several button styles etc...

- +
{"\n"} {"\n"} {"\n"} @@ -57,7 +57,7 @@ const Sizes = () => (

Several button sizes etc...

Large buttons

....btn-lg

- +
{"\n"} {"\n"} {"\n"} @@ -65,7 +65,7 @@ const Sizes = () => (

Small buttons

....btn-sm

- +
{"\n"} {"\n"} {"\n"} @@ -73,7 +73,7 @@ const Sizes = () => (

Extra small buttons

....btn-xs

- +
{"\n"} {"\n"} {"\n"} @@ -81,7 +81,7 @@ const Sizes = () => (

Block level

....btn-block

- +
{"\n"} {"\n"} {"\n"} @@ -94,7 +94,7 @@ const ActiveState = () => ( <>

Active state

Active state with .active...

- +
{"\n"} {"\n"} {"\n"} @@ -108,7 +108,7 @@ const DisabledState = () => ( <>

Disabled state

Disabled state with ...

- +
{"\n"} {"\n"} {"\n"} @@ -122,7 +122,7 @@ const UsageWithIcons = () => ( <>

Usage with icons

To use a button with an icon... Read more about icon usage here here.

- +
{"\n"} {"\n\n"} {"\n"} @@ -135,14 +135,14 @@ const ButtonLoader = () => ( <>

Button loader

To use a button with a loader simply add the attribute to add the required markup for the loader component. Add class .loading to display the loader.

- +
{"\n"} {"\n"} {"\n"} {"\n"}
- +
{"\n"} {"\n"} {"\n"} @@ -240,7 +240,7 @@ const ButtonsGroup = () => ( <>

Using buttons together

When you use buttons next to each other you have to wrap them in a button-group.

- +
{"\n"} {"\n"} {"\n"} diff --git a/src/less/_variables.css b/src/less/_variables.css new file mode 100644 index 000000000..aa7b66a16 --- /dev/null +++ b/src/less/_variables.css @@ -0,0 +1,30 @@ +/* Base colors */ +/* Grayscale */ +/* Brand colors */ +/* Background colors */ +/* Shadows */ +/* State colors */ +/* Aksels global heaven */ +/* Margins */ +/* Spacing */ +/* Body */ +/* Cursor */ +/* Borders */ +/* Z-index master list */ +/* Media queries breakpoints */ +/* Colors */ +/* Dimensions */ +/* Animations */ +/* Colors */ +/* Font Size */ +/* Font Weight */ +/* Temporary for backwards compatibility */ +/* Headings */ +/* Paragraphs */ +/* Etc */ +/* Small */ +/* Colors */ +/* Colors */ +/* Colors */ +/* Default colors */ +/* Contextual colors */ diff --git a/src/less/_variables.less b/src/less/_variables.less index 18ae27369..f30a0ae74 100644 --- a/src/less/_variables.less +++ b/src/less/_variables.less @@ -14,6 +14,7 @@ // // COMPONENTS // =============== +// x. Action List // 6. Badge // 7. Breadcrumb // 8. Button @@ -87,9 +88,13 @@ // 2. Global // ========================================================================== +/* Aksels global heaven */ +@base-margin: 1rem; +@base-padding: 1rem; + /* Margins */ -@base-margin: 3px; -@base-padding: 3px; +@old-base-margin: 3px; //where are you used? +@old-base-padding: 3px; // ---||--- /* Spacing */ @spacer: 1rem; @@ -278,6 +283,23 @@ // // ========================================================================== +// x. Action List +// ========================================================================== + +@actionlist-padding: @base-padding; + +// x. Alert +// ========================================================================== + +@alert-margin: @base-margin; +@alert-padding: @base-padding; + +// x. Card +// ========================================================================== + +@card-padding: @base-padding; +@card-margin: @base-margin; + // 6. Badge // ========================================================================== @@ -288,7 +310,7 @@ // Todo: clean this up when progress tracker is remade -@breadcrumb-margin: 1rem 0; +@breadcrumb-margin: @base-margin; @breadcrumb-padding: 0.6rem 1.2rem 0.6rem 2rem; @breadcrumb-padding-first: 1rem; @@ -321,6 +343,8 @@ @btn-font-weight: normal; +@btn-margin: @base-margin; + @btn-border-radius-base: 3px; @btn-border-radius-large: 3px; @btn-border-radius-small: 3px; diff --git a/src/less/components/action-list.less b/src/less/components/action-list.less index 102724158..c7063be4e 100644 --- a/src/less/components/action-list.less +++ b/src/less/components/action-list.less @@ -24,7 +24,8 @@ > a { display: flex; - padding: 0.3rem 3rem 0.3rem 0.5rem; + padding: round(@actionlist-padding/3, 1); + padding-right: @actionlist-padding*3; color: @gray-5; visibility: hidden; position: relative; @@ -65,7 +66,9 @@ left: -0.35rem; > a { - padding: 0.3rem 1rem 0.3rem 2rem; + padding: round(@actionlist-padding/3, 1); + padding-left: @actionlist-padding*2; + padding-right: @actionlist-padding; } } } @@ -85,7 +88,9 @@ bottom: 0; > a { - padding: 0.3rem 1rem 0.3rem 2rem; + padding: round(@actionlist-padding/3, 1); + padding-left: @actionlist-padding*2; + padding-right: @actionlist-padding; } } } diff --git a/src/less/components/alert.less b/src/less/components/alert.less index d52ed24a7..7468002ad 100644 --- a/src/less/components/alert.less +++ b/src/less/components/alert.less @@ -10,10 +10,10 @@ .alert { - padding: 1rem; + padding: @alert-padding; position: relative; margin-top: 0; - margin-bottom: 1rem; + margin-bottom: @alert-margin; border: 1px solid transparent; display: flex; align-items: start; @@ -59,7 +59,7 @@ } .alert-icon { - margin-right: 1rem; + margin-right: @alert-margin; } [data-alert-close] { diff --git a/src/less/components/breadcrumb.less b/src/less/components/breadcrumb.less index c4f1d9023..c58013321 100644 --- a/src/less/components/breadcrumb.less +++ b/src/less/components/breadcrumb.less @@ -1,6 +1,6 @@ ul.breadcrumb, ol.breadcrumb { - margin: @breadcrumb-margin; + margin: @breadcrumb-margin, 0; padding-left: 0; display: flex; @@ -22,7 +22,7 @@ ol.breadcrumb { &:after { content: ">"; color: @brand-primary; - margin: 0 0.5rem; + margin: 0 @breadcrumb-margin/2; } } diff --git a/src/less/components/button.less b/src/less/components/button.less index 61924158e..bb6fac9f7 100644 --- a/src/less/components/button.less +++ b/src/less/components/button.less @@ -21,7 +21,7 @@ line-height: 1; & + * { - margin-left: 0.5rem; + margin-left: @btn-margin/2; } } @@ -97,8 +97,7 @@ border-radius: 0; border-bottom: 2px solid @blue; padding: 0; - padding-top: 0.375rem; - margin: 0 0.75rem 0.375rem; + margin: 0 @btn-margin; &:active, &.active, @@ -176,7 +175,7 @@ // Vertically space out multiple block buttons &.btn-block + .btn-block { - margin-top: 0.5rem; + margin-top: @btn-margin/2; } // Specificity overrides diff --git a/src/less/components/card.less b/src/less/components/card.less index 8e3a2709f..a05fc0123 100644 --- a/src/less/components/card.less +++ b/src/less/components/card.less @@ -21,15 +21,15 @@ min-width: 18rem; max-width: 18rem; flex: 1; - margin: 0 2rem 1rem; + margin: 0 @card-margin*2 @card-margin; header { - padding: 0 1rem; + padding: 0 @card-padding; /* stylelint-disable selector-list-comma-newline-after */ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { - margin: 1rem 0; + margin: @card-margin 0; } /* stylelint-enable selector-list-comma-newline-after */ @@ -72,7 +72,7 @@ } .highlight { - padding: 2rem; + padding: @card-padding*2; background-color: @gray-10; display: flex; justify-content: center; @@ -104,17 +104,17 @@ } .card-body { - padding: 1rem; + padding: @card-padding; } footer { border-top: 1px solid @gray-9; - padding: 1rem 2rem; + padding: @card-padding @card-padding*2; margin-top: auto; .footer-text { p { - margin-bottom: 0.25rem; + margin-bottom: @card-margin/4; } } @@ -143,7 +143,7 @@ max-width: 60ch; > * + * { - margin-top: 0.75rem; + margin-top: @card-margin*0.75; } &:last-child { @@ -151,7 +151,7 @@ } &:nth-last-child(2) { - margin-bottom: 0.75rem; + margin-bottom: @card-margin*0.75; } } } From 347e45431dad6ed6e847e370d014fb99d9e231d9 Mon Sep 17 00:00:00 2001 From: Aksel Christoffer Wiig Date: Wed, 26 Sep 2018 13:23:08 +0200 Subject: [PATCH 005/159] item-list align-items added --- src/less/_variables.css | 3 +-- src/less/_variables.less | 6 +----- src/less/core/lists.less | 1 + 3 files changed, 3 insertions(+), 7 deletions(-) diff --git a/src/less/_variables.css b/src/less/_variables.css index aa7b66a16..2b9ff62ab 100644 --- a/src/less/_variables.css +++ b/src/less/_variables.css @@ -4,8 +4,7 @@ /* Background colors */ /* Shadows */ /* State colors */ -/* Aksels global heaven */ -/* Margins */ +/* Margin */ /* Spacing */ /* Body */ /* Cursor */ diff --git a/src/less/_variables.less b/src/less/_variables.less index f30a0ae74..b1e6e6d97 100644 --- a/src/less/_variables.less +++ b/src/less/_variables.less @@ -88,14 +88,10 @@ // 2. Global // ========================================================================== -/* Aksels global heaven */ +/* Margin */ @base-margin: 1rem; @base-padding: 1rem; -/* Margins */ -@old-base-margin: 3px; //where are you used? -@old-base-padding: 3px; // ---||--- - /* Spacing */ @spacer: 1rem; diff --git a/src/less/core/lists.less b/src/less/core/lists.less index 739d7d267..532a601d0 100644 --- a/src/less/core/lists.less +++ b/src/less/core/lists.less @@ -59,6 +59,7 @@ li { display: flex; padding: 1rem; + align-items: center; border-bottom: @border-width solid @gray-9; > * { From cc60f37b140b67afdfaca9a2bc6f1004cb8e4c81 Mon Sep 17 00:00:00 2001 From: Aksel Christoffer Wiig Date: Wed, 26 Sep 2018 13:52:00 +0200 Subject: [PATCH 006/159] Action-list.less cleaned up --- src/less/_variables.css | 1 + src/less/_variables.less | 16 +++++++++++++++- src/less/components/action-list.less | 14 ++++++-------- 3 files changed, 22 insertions(+), 9 deletions(-) diff --git a/src/less/_variables.css b/src/less/_variables.css index 2b9ff62ab..8b8035aa8 100644 --- a/src/less/_variables.css +++ b/src/less/_variables.css @@ -5,6 +5,7 @@ /* Shadows */ /* State colors */ /* Margin */ +/* Padding */ /* Spacing */ /* Body */ /* Cursor */ diff --git a/src/less/_variables.less b/src/less/_variables.less index b1e6e6d97..1e41a8a00 100644 --- a/src/less/_variables.less +++ b/src/less/_variables.less @@ -90,8 +90,18 @@ /* Margin */ @base-margin: 1rem; + +@base-margin-s: @base-margin/2; +@base-margin-xs: @base-margin/4; + +/* Padding */ @base-padding: 1rem; +@base-padding-s: @base-padding/2; +@base-padding-xs: @base-padding/4; + +@base-padding-l: @base-padding*2; + /* Spacing */ @spacer: 1rem; @@ -282,7 +292,11 @@ // x. Action List // ========================================================================== -@actionlist-padding: @base-padding; +@action-list-padding: @base-padding; +@action-list-padding-l: @base-padding-l; + +@action-list-a-padding: round(@action-list-padding/3, 1); +@action-list-a-padding-right: @action-list-padding*3; // x. Alert // ========================================================================== diff --git a/src/less/components/action-list.less b/src/less/components/action-list.less index c7063be4e..9c9925bc6 100644 --- a/src/less/components/action-list.less +++ b/src/less/components/action-list.less @@ -24,8 +24,8 @@ > a { display: flex; - padding: round(@actionlist-padding/3, 1); - padding-right: @actionlist-padding*3; + padding: @action-list-a-padding; + padding-right: @action-list-padding-l; color: @gray-5; visibility: hidden; position: relative; @@ -66,9 +66,8 @@ left: -0.35rem; > a { - padding: round(@actionlist-padding/3, 1); - padding-left: @actionlist-padding*2; - padding-right: @actionlist-padding; + padding-left: @action-list-padding-l; + padding-right: @action-list-padding; } } } @@ -88,9 +87,8 @@ bottom: 0; > a { - padding: round(@actionlist-padding/3, 1); - padding-left: @actionlist-padding*2; - padding-right: @actionlist-padding; + padding-left: @action-list-padding-l; + padding-right: @action-list-padding; } } } From ef5581878c9e7914f1f374177c18c8a53746df66 Mon Sep 17 00:00:00 2001 From: Aksel Christoffer Wiig Date: Wed, 26 Sep 2018 13:56:09 +0200 Subject: [PATCH 007/159] button.less cleaned up --- src/less/_variables.less | 3 ++- src/less/components/button.less | 4 ++-- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/src/less/_variables.less b/src/less/_variables.less index 1e41a8a00..728518dc5 100644 --- a/src/less/_variables.less +++ b/src/less/_variables.less @@ -296,7 +296,6 @@ @action-list-padding-l: @base-padding-l; @action-list-a-padding: round(@action-list-padding/3, 1); -@action-list-a-padding-right: @action-list-padding*3; // x. Alert // ========================================================================== @@ -355,6 +354,8 @@ @btn-margin: @base-margin; +@btn-margin-s: @btn-margin/2; + @btn-border-radius-base: 3px; @btn-border-radius-large: 3px; @btn-border-radius-small: 3px; diff --git a/src/less/components/button.less b/src/less/components/button.less index bb6fac9f7..a5b3bbb63 100644 --- a/src/less/components/button.less +++ b/src/less/components/button.less @@ -21,7 +21,7 @@ line-height: 1; & + * { - margin-left: @btn-margin/2; + margin-left: @btn-margin-s; } } @@ -175,7 +175,7 @@ // Vertically space out multiple block buttons &.btn-block + .btn-block { - margin-top: @btn-margin/2; + margin-top: @btn-margin-s; } // Specificity overrides From 29830c1918a96cbf5bc3a7a19bab6bfdddb54374 Mon Sep 17 00:00:00 2001 From: Aksel Christoffer Wiig Date: Wed, 26 Sep 2018 14:11:24 +0200 Subject: [PATCH 008/159] card.less cleaned up (needs to be looked over) --- src/less/_variables.less | 17 +++++++++++------ src/less/components/card.less | 14 +++++++------- 2 files changed, 18 insertions(+), 13 deletions(-) diff --git a/src/less/_variables.less b/src/less/_variables.less index 728518dc5..ddcfc0a9d 100644 --- a/src/less/_variables.less +++ b/src/less/_variables.less @@ -303,12 +303,6 @@ @alert-margin: @base-margin; @alert-padding: @base-padding; -// x. Card -// ========================================================================== - -@card-padding: @base-padding; -@card-margin: @base-margin; - // 6. Badge // ========================================================================== @@ -375,6 +369,17 @@ @btn-link-disabled-color: @gray-6; +// x. Card +// ========================================================================== + +@card-margin: @base-margin; +@card-margin-s: @card-margin/2; +@card-margin-xs: @card-margin/4; + +@card-margin-l: @card-margin*2; + +@card-padding: @base-padding; + // 9. Dialog // ========================================================================== diff --git a/src/less/components/card.less b/src/less/components/card.less index a05fc0123..0057df29c 100644 --- a/src/less/components/card.less +++ b/src/less/components/card.less @@ -21,7 +21,7 @@ min-width: 18rem; max-width: 18rem; flex: 1; - margin: 0 @card-margin*2 @card-margin; + margin: 0 @card-margin-l @card-margin; header { padding: 0 @card-padding; @@ -78,12 +78,12 @@ justify-content: center; align-content: center; - .material-icons { + .material-icons { //Todo: cleanup; will this be removed when icons are fixed? margin-top: -0.2rem; font-size: 2rem; line-height: 2rem; color: @gray-3; - margin-right: 0.5rem; + margin-right: @card-margin-s; } .highlight-wrapper { @@ -114,7 +114,7 @@ .footer-text { p { - margin-bottom: @card-margin/4; + margin-bottom: @card-margin-xs; } } @@ -138,12 +138,12 @@ margin-top: 1.5; } - .text { + .text { // Todo: clean up these flex-grow: 1; max-width: 60ch; > * + * { - margin-top: @card-margin*0.75; + margin-top: 0.75rem; } &:last-child { @@ -151,7 +151,7 @@ } &:nth-last-child(2) { - margin-bottom: @card-margin*0.75; + margin-bottom: 0.75rem; } } } From eff345de1f9a37b4ef5760614a535a9259d0150a Mon Sep 17 00:00:00 2001 From: Aksel Christoffer Wiig Date: Wed, 26 Sep 2018 14:31:28 +0200 Subject: [PATCH 009/159] datepicker.less cleaned up (Needs to be looked over) --- src/less/_variables.less | 8 +++++++- src/less/components/datepicker.less | 14 +++++++------- 2 files changed, 14 insertions(+), 8 deletions(-) diff --git a/src/less/_variables.less b/src/less/_variables.less index ddcfc0a9d..a61e50063 100644 --- a/src/less/_variables.less +++ b/src/less/_variables.less @@ -347,7 +347,6 @@ @btn-font-weight: normal; @btn-margin: @base-margin; - @btn-margin-s: @btn-margin/2; @btn-border-radius-base: 3px; @@ -380,6 +379,13 @@ @card-padding: @base-padding; +// x. Datepicker +// ========================================================================== + +@datepicker-padding: @base-margin; +@datepicker-padding-s: @datepicker-padding/2; +@datepicker-rd-padding: round(@datepicker-padding/3, 1); + // 9. Dialog // ========================================================================== diff --git a/src/less/components/datepicker.less b/src/less/components/datepicker.less index 57d7fb849..57c911fe5 100644 --- a/src/less/components/datepicker.less +++ b/src/less/components/datepicker.less @@ -8,7 +8,7 @@ .rd-container { display: none; background-color: @datepicker-background-color; - padding: 1rem 0.6rem; + padding: @datepicker-padding @datepicker-padding-s; text-align: center; box-shadow: @datepicker-box-shadow; z-index: @zindex-datepicker; @@ -18,7 +18,7 @@ position: absolute; } -.rd-month { +.rd-month { // Todo: cleanup display: inline-block; margin-right: 1.5rem; } @@ -41,7 +41,7 @@ border: none; outline: none; background: none; - padding: 0 0.6rem; + padding: 0 @datepicker-padding-s; margin: 0; } @@ -68,7 +68,7 @@ content: "\E5C8"; } -.rd-days { +.rd-days { // Todo: cleanup td, th { padding: 0.35rem 0.7rem; @@ -110,7 +110,7 @@ color: #ffcccc; } -.rd-time { +.rd-time { //Todo: cleanup position: relative; display: inline-block; margin-top: 5px; @@ -129,11 +129,11 @@ } .rd-time-selected { - padding: 0.3rem; + padding: @datepicker-rd-padding; } .rd-time-option { - padding: 0.3rem; + padding: @datepicker-rd-padding; } .rd-day-concealed { From 10047e29638e54e24a4b9d748d4a7149e51b80fa Mon Sep 17 00:00:00 2001 From: Erik Hallaraaker Date: Wed, 26 Sep 2018 15:00:05 +0200 Subject: [PATCH 010/159] Reset changelog --- CHANGELOG.md | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 6f2a782ee..931947086 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,8 +1,11 @@ # Changelog -## [0.11.1] - 2018-09-26 +## [0.1x.x] - 2018-0x-xx + +### Added + +### Changed ### Fixed -- Fixed issue with documentation page for toast crashing. -- Fixed bug with topbar script crashing when topbar button does not contain an icon. +### Removed From 086fb0b8f5badb8eb6dacdf6e7e2a7adace0c2aa Mon Sep 17 00:00:00 2001 From: Aksel Christoffer Wiig Date: Wed, 26 Sep 2018 15:10:22 +0200 Subject: [PATCH 011/159] forms.less cleanedup (needs to be looked over) --- src/less/_variables.less | 26 +++++++++++++++++++++++--- src/less/components/dialog.less | 4 ++-- src/less/components/forms.less | 28 ++++++++++++++-------------- 3 files changed, 39 insertions(+), 19 deletions(-) diff --git a/src/less/_variables.less b/src/less/_variables.less index a61e50063..dd28ca7a2 100644 --- a/src/less/_variables.less +++ b/src/less/_variables.less @@ -93,13 +93,13 @@ @base-margin-s: @base-margin/2; @base-margin-xs: @base-margin/4; +@base-margin-l: @base-margin*2; /* Padding */ @base-padding: 1rem; @base-padding-s: @base-padding/2; @base-padding-xs: @base-padding/4; - @base-padding-l: @base-padding*2; /* Spacing */ @@ -400,16 +400,17 @@ @dialog-heading-padding: 1rem 2rem; @dialog-body-padding: 2rem 2rem 1rem; -@dialog-footer-margin: 0; @dialog-footer-padding: 1rem 2rem; +@dialog-footer-margin: 0; + @dialog-size: 500px; // 10. Form // ========================================================================== -@form-margin: 1rem; +@form-margin: @base-margin; @input-padding-y: 0.375rem; @input-padding-x: 0.75rem; @@ -432,15 +433,34 @@ @legend-color: @gray-3; @legend-bottom-margin: 1.25rem; +// Fieldset +@fieldset-margin: @base-margin; + // Checkbox @checkbox-bg: @brand-primary; @checkbox-height: 1.4rem; @checkbox-width: @checkbox-height; // This also controls radio and togglebox +@checkbox-padding: @base-padding; +@checkbox-label-padding: @checkbox-padding/5; + +@checkbox-margin: @base-margin; +@checkbox-margin-s: @base-margin-s; + +// Radio +@radio-margin: @base-margin; +@radio-margin-s: @base-margin-s; + +// Togglebox +@togglebox-margin-s: @base-margin-s; + // Rangeslider @range-height: @checkbox-height / 2; @thumb-size: @checkbox-height; +@rangeslider-margin: @base-margin; +@rangeslider-margin-l: @base-margin-l; + @range-bg: @input-bg; // This needs to be gradient for some reason @range-webkit-bg: linear-gradient(90deg, @brand-primary, @brand-primary) 0 100% no-repeat content-box; diff --git a/src/less/components/dialog.less b/src/less/components/dialog.less index 938a303b4..2efca9b27 100644 --- a/src/less/components/dialog.less +++ b/src/less/components/dialog.less @@ -49,14 +49,14 @@ display: flex; justify-content: flex-end; - > * { + > * { //Todo: cleanup margin: 0 0.25rem; } } } } -.dialog-open { +.dialog-open { //Todo: cleanup overflow: hidden; padding-right: 17px; diff --git a/src/less/components/forms.less b/src/less/components/forms.less index 1fe45c401..171f21c20 100644 --- a/src/less/components/forms.less +++ b/src/less/components/forms.less @@ -17,7 +17,7 @@ fieldset { // so we reset that to ensure it behaves more like a standard block element. // See https://github.com/twbs/bootstrap/issues/12359. min-width: 0; - margin-bottom: 1rem; + margin-bottom: @fieldset-margin; &:disabled { textarea { @@ -255,7 +255,7 @@ legend { } } -.help-block { +.help-block { // Todo: cleanup display: block; margin: 0.325rem 0; color: lighten(@text-color, 25%); @@ -272,7 +272,7 @@ select[multiple] { height: auto; padding: 0; - option { + option { //Todo: cleanup padding: 0.187rem 0.375rem; } } @@ -285,18 +285,18 @@ select[multiple] { align-items: center; &:not(:last-child) { - margin-bottom: 0.6rem; + margin-bottom: @checkbox-margin-s; } label { position: relative; align-items: center; margin: 0; - padding-left: 0.2rem; + padding-left: @checkbox-label-padding; } input[type=checkbox] { - margin-right: 1rem; + margin-right: @checkbox-margin; opacity: 0; + label:before { @@ -350,18 +350,18 @@ select[multiple] { align-items: center; &:not(:last-child) { - margin-bottom: 0.6rem; + margin-bottom: @radio-margin-s; } label { position: relative; align-items: center; margin: 0; - padding-left: 0.2rem; + padding-left: @checkbox-label-padding; } input[type=radio] { - margin-right: 1rem; + margin-right: @radio-margin; opacity: 0; + label:before { @@ -415,7 +415,7 @@ select[multiple] { align-items: center; &:not(:last-child) { - margin-bottom: 0.5rem; + margin-bottom: @togglebox-margin-s; } label { @@ -423,7 +423,7 @@ select[multiple] { } input[type=checkbox] { - margin-right: 0.5rem; + margin-right: @togglebox-margin-s; height: @checkbox-height; width: @checkbox-width * 2; @@ -623,7 +623,7 @@ select[multiple] { height: @thumb-size; box-sizing: border-box; background: transparent; - margin-top: 2rem; + margin-top: @rangeslider-margin-l; &.rangeslider-brand { .slider-color(@brand-primary); @@ -639,7 +639,7 @@ select[multiple] { &.label-right { .value-label { - margin-left: 1rem; + margin-left: @rangeslider-margin; position: relative; height: @thumb-size; @@ -681,7 +681,7 @@ select[multiple] { box-sizing: border-box; display: flex; color: @white; - padding: 0.2rem; + padding: @checkbox-label-padding; font-size: @small-font-size; text-align: center; vertical-align: middle; From 51dc277203b78a768884575bef3d082e2a50aaf0 Mon Sep 17 00:00:00 2001 From: Aksel Christoffer Wiig Date: Wed, 26 Sep 2018 15:14:50 +0200 Subject: [PATCH 012/159] ?? --- CHANGELOG.md | 35 ----------------------------------- README.md | 4 ---- 2 files changed, 39 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 03e890e76..6f2a782ee 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,43 +1,8 @@ # Changelog -<<<<<<< HEAD -## [0.11.0] - 2018-09-xx - -### Added - -- Added new list component, item-list, and updated documentation. -- Added icon to datepicker. - -### Changed - -- Made some minor styling changes to button component. -- Changed breadcrumb component to only display text, removed most of the styling. -- Made some minor styling changes to description table. -- Made some slight changes to checkbox/radio button positioning. -- Made some minor style changes to alert component. -- Marked Action List and Tabs components as experimental. -- Changed default anchor color from green to blue, also added a border bottom of 2px that disappears on hover. -- Changed markup produced by `data-button-loader`. - -### Fixed - -- Fixed an issue with datepicker not displaying within sheet. -- Fixed an issue with sheet not being scrollable. -- Fixed an issue with loader button not displaying properly when inside a dialog footer. -- Fixed an issue with sheet that made it appear instantaneous on the initial open. -- Fixed a minor styling issue with action list within table. -- Fixed issue with selects appearing "glossy" on safari. -- Fixed issue with select tag with attribute `multiple` not being rendered properly. -- Fixed issue with click event on loader-button. - -### Removed - -- Removed tabs component from px-script, users will now have to add/remove class `active` manually. (This is to better handle redirects). -======= ## [0.11.1] - 2018-09-26 ### Fixed - Fixed issue with documentation page for toast crashing. - Fixed bug with topbar script crashing when topbar button does not contain an icon. ->>>>>>> develop diff --git a/README.md b/README.md index 17b9c6288..9c8042a7f 100644 --- a/README.md +++ b/README.md @@ -2,11 +2,7 @@ # design.payex.com -<<<<<<< HEAD -[![Version](https://img.shields.io/badge/Version-0.10.20-blue.svg)](https://ci.appveyor.com/project/erikhallaraaker/design-payex-com/branch/master) -======= [![Version](https://img.shields.io/badge/Version-0.11.1-blue.svg)](https://ci.appveyor.com/project/erikhallaraaker/design-payex-com/branch/master) ->>>>>>> develop [![Build status](https://ci.appveyor.com/api/projects/status/1dii19sqw1m7xtsn/branch/master?svg=true)](https://ci.appveyor.com/project/PayEx/design-payex-com/branch/master) [![dependencies Status](https://david-dm.org/payex/design.payex.com/status.svg)](https://david-dm.org/payex/design.payex.com) [![devDependencies Status](https://david-dm.org/payex/design.payex.com/dev-status.svg)](https://david-dm.org/payex/design.payex.com?type=dev) From 57dc2c49cf58623644c4a4e79ef8176666d01d05 Mon Sep 17 00:00:00 2001 From: Aksel Christoffer Wiig Date: Wed, 26 Sep 2018 15:15:31 +0200 Subject: [PATCH 013/159] Comment missing --- src/less/components/forms.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/less/components/forms.less b/src/less/components/forms.less index 171f21c20..76d3f1b81 100644 --- a/src/less/components/forms.less +++ b/src/less/components/forms.less @@ -692,7 +692,7 @@ select[multiple] { margin: 0; align-items: center; - span { + span { // Todo: cleanup margin: 0 1.5px; } } From 62ef78c11e7706dc0c348bed9aba3d74c07e9800 Mon Sep 17 00:00:00 2001 From: Aksel Christoffer Wiig Date: Wed, 26 Sep 2018 15:16:39 +0200 Subject: [PATCH 014/159] snapshot update --- .../__snapshots__/index.test.js.snap | 1 + .../__snapshots__/index.test.js.snap | 4 +- .../Alerts/__snapshots__/index.test.js.snap | 16 +- .../Badge/__snapshots__/index.test.js.snap | 8 +- .../__snapshots__/index.test.js.snap | 8 +- .../Buttons/__snapshots__/index.test.js.snap | 543 ++++++++++-------- .../Card/__snapshots__/index.test.js.snap | 4 +- .../__snapshots__/index.test.js.snap | 16 +- .../Dialog/__snapshots__/index.test.js.snap | 4 +- .../Forms/__snapshots__/index.test.js.snap | 52 +- .../__snapshots__/index.test.js.snap | 28 +- .../Loaders/__snapshots__/index.test.js.snap | 20 +- .../__snapshots__/index.test.js.snap | 8 +- .../Modal/__snapshots__/index.test.js.snap | 8 +- .../__snapshots__/index.test.js.snap | 12 +- .../Panel/__snapshots__/index.test.js.snap | 16 +- .../__snapshots__/index.test.js.snap | 12 +- .../Sheet/__snapshots__/index.test.js.snap | 4 +- .../Status/__snapshots__/index.test.js.snap | 8 +- .../Tabs/__snapshots__/index.test.js.snap | 12 +- .../Toast/__snapshots__/index.test.js.snap | 12 +- .../Tooltips/__snapshots__/index.test.js.snap | 4 +- .../Topbar/__snapshots__/index.test.js.snap | 4 +- .../Well/__snapshots__/index.test.js.snap | 8 +- .../__snapshots__/index.test.js.snap | 8 +- .../Color/__snapshots__/index.test.js.snap | 4 +- .../Favicons/__snapshots__/index.test.js.snap | 8 +- .../Grid/__snapshots__/index.test.js.snap | 12 +- .../Icons/__snapshots__/index.test.js.snap | 4 +- .../Lists/__snapshots__/index.test.js.snap | 16 +- .../Tables/__snapshots__/index.test.js.snap | 20 +- .../__snapshots__/index.test.js.snap | 44 +- .../__snapshots__/index.test.js.snap | 20 +- .../__snapshots__/index.test.js.snap | 16 +- .../Colors/__snapshots__/index.test.js.snap | 12 +- .../Display/__snapshots__/index.test.js.snap | 20 +- .../__snapshots__/index.test.js.snap | 8 +- .../__snapshots__/index.test.js.snap | 4 +- .../Examples/__snapshots__/index.test.js.snap | 4 +- .../__snapshots__/index.test.js.snap | 4 +- src/App/__snapshots__/index.test.js.snap | 2 +- .../Button/__snapshots__/index.test.js.snap | 12 +- .../Modal/__snapshots__/index.test.js.snap | 60 +- 43 files changed, 588 insertions(+), 502 deletions(-) diff --git a/src/App/Documentation/__snapshots__/index.test.js.snap b/src/App/Documentation/__snapshots__/index.test.js.snap index d0697c813..582a59769 100644 --- a/src/App/Documentation/__snapshots__/index.test.js.snap +++ b/src/App/Documentation/__snapshots__/index.test.js.snap @@ -230,6 +230,7 @@ exports[`Documentation: index renders 1`] = ` "component": Object { "ActiveState": [Function], "ButtonLoader": [Function], + "ButtonsGroup": [Function], "ButtonsText": [Function], "DisabledState": [Function], "Examples": [Function], diff --git a/src/App/Documentation/components/ActionList/__snapshots__/index.test.js.snap b/src/App/Documentation/components/ActionList/__snapshots__/index.test.js.snap index 7a9f74313..b7ff57ac9 100644 --- a/src/App/Documentation/components/ActionList/__snapshots__/index.test.js.snap +++ b/src/App/Documentation/components/ActionList/__snapshots__/index.test.js.snap @@ -16,7 +16,7 @@ exports[`Components: ActionList ActionListText renders 1`] = ` `; exports[`Components: ActionList Overview renders 1`] = ` - +

@@ -92,7 +92,7 @@ exports[`Components: ActionList Overview renders 1`] = `

- + `; exports[`Components: ActionList renders 1`] = ` diff --git a/src/App/Documentation/components/Alerts/__snapshots__/index.test.js.snap b/src/App/Documentation/components/Alerts/__snapshots__/index.test.js.snap index b5ce76585..494e46f42 100644 --- a/src/App/Documentation/components/Alerts/__snapshots__/index.test.js.snap +++ b/src/App/Documentation/components/Alerts/__snapshots__/index.test.js.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Documentation: Alerts Alert With Icon renders 1`] = ` - +

@@ -60,7 +60,7 @@ exports[`Documentation: Alerts Alert With Icon renders 1`] = ` type="danger" /> - + `; exports[`Documentation: Alerts Alerts Text renders 1`] = ` @@ -80,7 +80,7 @@ exports[`Documentation: Alerts Alerts Text renders 1`] = ` `; exports[`Documentation: Alerts Basic Usage renders 1`] = ` - +

@@ -127,11 +127,11 @@ exports[`Documentation: Alerts Basic Usage renders 1`] = ` type="danger" /> - + `; exports[`Documentation: Alerts Closing The Alert renders 1`] = ` - +

@@ -229,11 +229,11 @@ exports[`Documentation: Alerts Closing The Alert renders 1`] = ` Close alert - + `; exports[`Documentation: Alerts Extended Usage renders 1`] = ` - +

@@ -277,7 +277,7 @@ exports[`Documentation: Alerts Extended Usage renders 1`] = `

- + `; exports[`Documentation: Alerts renders 1`] = ` diff --git a/src/App/Documentation/components/Badge/__snapshots__/index.test.js.snap b/src/App/Documentation/components/Badge/__snapshots__/index.test.js.snap index fd246fc85..b51c9a149 100644 --- a/src/App/Documentation/components/Badge/__snapshots__/index.test.js.snap +++ b/src/App/Documentation/components/Badge/__snapshots__/index.test.js.snap @@ -15,7 +15,7 @@ exports[`Components: Badge BadgeText renders 1`] = ` `; exports[`Components: Badge FurtherUsage renders 1`] = ` - +

@@ -84,11 +84,11 @@ exports[`Components: Badge FurtherUsage renders 1`] = `

- + `; exports[`Components: Badge Overview renders 1`] = ` - +

@@ -157,7 +157,7 @@ exports[`Components: Badge Overview renders 1`] = `

- + `; exports[`Components: Badge renders 1`] = ` diff --git a/src/App/Documentation/components/Breadcrumb/__snapshots__/index.test.js.snap b/src/App/Documentation/components/Breadcrumb/__snapshots__/index.test.js.snap index a6225a1e8..c3436f0a0 100644 --- a/src/App/Documentation/components/Breadcrumb/__snapshots__/index.test.js.snap +++ b/src/App/Documentation/components/Breadcrumb/__snapshots__/index.test.js.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Documentation: Breadcrumb Basic BreadCrumb renders 1`] = ` - +

@@ -71,7 +71,7 @@ exports[`Documentation: Breadcrumb Basic BreadCrumb renders 1`] = ` } /> - + `; exports[`Documentation: Breadcrumb BreadCrumb Text renders 1`] = ` @@ -89,7 +89,7 @@ exports[`Documentation: Breadcrumb BreadCrumb Text renders 1`] = ` `; exports[`Documentation: Breadcrumb Disabled BreadCrumb renders 1`] = ` - +

@@ -138,7 +138,7 @@ exports[`Documentation: Breadcrumb Disabled BreadCrumb renders 1`] = ` } /> - + `; exports[`Documentation: Breadcrumb renders 1`] = ` diff --git a/src/App/Documentation/components/Buttons/__snapshots__/index.test.js.snap b/src/App/Documentation/components/Buttons/__snapshots__/index.test.js.snap index 926018099..42ff30f03 100644 --- a/src/App/Documentation/components/Buttons/__snapshots__/index.test.js.snap +++ b/src/App/Documentation/components/Buttons/__snapshots__/index.test.js.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Documentation: Buttons Active State renders 1`] = ` - +

@@ -19,35 +19,42 @@ exports[`Documentation: Buttons Active State renders 1`] = ` -

- + `; exports[`Documentation: Buttons Button Loader renders 1`] = ` - +

@@ -70,65 +77,79 @@ exports[`Documentation: Buttons Button Loader renders 1`] = ` -

-

Adding the attribute @@ -193,7 +214,7 @@ exports[`Documentation: Buttons Button Loader renders 1`] = ` /> .

- + `; exports[`Documentation: Buttons Buttons Text renders 1`] = ` @@ -209,6 +230,7 @@ exports[`Documentation: Buttons Buttons Text renders 1`] = ` + @@ -217,7 +239,7 @@ exports[`Documentation: Buttons Buttons Text renders 1`] = ` `; exports[`Documentation: Buttons Disabled State renders 1`] = ` - +

@@ -233,35 +255,42 @@ exports[`Documentation: Buttons Disabled State renders 1`] = ` -

- + `; exports[`Documentation: Buttons Examples renders 1`] = ` - +

@@ -273,38 +302,45 @@ exports[`Documentation: Buttons Examples renders 1`] = ` -

- + `; exports[`Documentation: Buttons Outline Buttons renders 1`] = ` - +

@@ -316,35 +352,42 @@ exports[`Documentation: Buttons Outline Buttons renders 1`] = ` -

- + `; exports[`Documentation: Buttons Sizes renders 1`] = ` - +

@@ -367,22 +410,29 @@ exports[`Documentation: Buttons Sizes renders 1`] = ` -

Small buttons @@ -398,22 +448,29 @@ exports[`Documentation: Buttons Sizes renders 1`] = ` -

Extra small buttons @@ -429,22 +486,29 @@ exports[`Documentation: Buttons Sizes renders 1`] = ` -

Block level @@ -460,28 +524,35 @@ exports[`Documentation: Buttons Sizes renders 1`] = ` -

- + `; exports[`Documentation: Buttons Usage With Icons renders 1`] = ` - +

@@ -500,29 +571,36 @@ exports[`Documentation: Buttons Usage With Icons renders 1`] = ` -

- + `; exports[`Documentation: Buttons Usage With Javascript renders 1`] = ` - +

@@ -711,11 +789,11 @@ exports[`Documentation: Buttons Usage With Javascript renders 1`] = ` - + `; exports[`Documentation: Buttons Usage With Other Tags renders 1`] = ` - +

@@ -747,47 +825,54 @@ exports[`Documentation: Buttons Usage With Other Tags renders 1`] = ` - - + `; exports[`Documentation: Dialog renders 1`] = ` diff --git a/src/App/Documentation/components/Forms/__snapshots__/index.test.js.snap b/src/App/Documentation/components/Forms/__snapshots__/index.test.js.snap index b2dd024a4..acc8cb187 100644 --- a/src/App/Documentation/components/Forms/__snapshots__/index.test.js.snap +++ b/src/App/Documentation/components/Forms/__snapshots__/index.test.js.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Documentation: Forms Checkboxes renders 1`] = ` - +

@@ -29,11 +29,11 @@ exports[`Documentation: Forms Checkboxes renders 1`] = ` label="Milk" /> - + `; exports[`Documentation: Forms DisabledCheckboxes renders 1`] = ` - +

@@ -64,11 +64,11 @@ exports[`Documentation: Forms DisabledCheckboxes renders 1`] = ` label="Milk" /> - + `; exports[`Documentation: Forms DisabledRadioButtons renders 1`] = ` - +

@@ -102,11 +102,11 @@ exports[`Documentation: Forms DisabledRadioButtons renders 1`] = ` name="radio-disabled-example" /> - + `; exports[`Documentation: Forms DisabledRangeSlider renders 1`] = ` - +

@@ -131,11 +131,11 @@ exports[`Documentation: Forms DisabledRangeSlider renders 1`] = ` valueLabelPrefix="$" /> - + `; exports[`Documentation: Forms DisabledToggleboxes renders 1`] = ` - +

@@ -161,11 +161,11 @@ exports[`Documentation: Forms DisabledToggleboxes renders 1`] = ` label="Enable superpowers" /> - + `; exports[`Documentation: Forms FormGrid renders 1`] = ` - +

@@ -233,7 +233,7 @@ exports[`Documentation: Forms FormGrid renders 1`] = ` - + `; exports[`Documentation: Forms FormsText renders 1`] = ` @@ -262,7 +262,7 @@ exports[`Documentation: Forms FormsText renders 1`] = ` `; exports[`Documentation: Forms Overview renders 1`] = ` - +

@@ -322,11 +322,11 @@ exports[`Documentation: Forms Overview renders 1`] = ` - + `; exports[`Documentation: Forms RadioButtons renders 1`] = ` - +

@@ -357,11 +357,11 @@ exports[`Documentation: Forms RadioButtons renders 1`] = ` name="radio-example" /> - + `; exports[`Documentation: Forms RangeSlider renders 1`] = ` - +

@@ -446,11 +446,11 @@ exports[`Documentation: Forms RangeSlider renders 1`] = ` valueLabelPrefix="$" /> - + `; exports[`Documentation: Forms StaticText renders 1`] = ` - +

@@ -473,11 +473,11 @@ exports[`Documentation: Forms StaticText renders 1`] = ` text="Bob Corlsan" /> - + `; exports[`Documentation: Forms Toggleboxes renders 1`] = ` - +

@@ -501,11 +501,11 @@ exports[`Documentation: Forms Toggleboxes renders 1`] = ` label="Enable superpowers" /> - + `; exports[`Documentation: Forms UsageWithFieldsets renders 1`] = ` - +

@@ -611,11 +611,11 @@ exports[`Documentation: Forms UsageWithFieldsets renders 1`] = ` - + `; exports[`Documentation: Forms Validation renders 1`] = ` - +

@@ -669,7 +669,7 @@ exports[`Documentation: Forms Validation renders 1`] = ` - + `; exports[`Documentation: Forms renders 1`] = ` diff --git a/src/App/Documentation/components/InputGroup/__snapshots__/index.test.js.snap b/src/App/Documentation/components/InputGroup/__snapshots__/index.test.js.snap index 3304609b7..ee42be284 100644 --- a/src/App/Documentation/components/InputGroup/__snapshots__/index.test.js.snap +++ b/src/App/Documentation/components/InputGroup/__snapshots__/index.test.js.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Documentation: InputGroup BasicExample renders 1`] = ` - +

@@ -60,11 +60,11 @@ exports[`Documentation: InputGroup BasicExample renders 1`] = ` type="textarea" /> - + `; exports[`Documentation: InputGroup ButtonAddons renders 1`] = ` - +

@@ -99,11 +99,11 @@ exports[`Documentation: InputGroup ButtonAddons renders 1`] = ` type="text" /> - + `; exports[`Documentation: InputGroup CheckboxesAndRadios renders 1`] = ` - +

@@ -180,11 +180,11 @@ exports[`Documentation: InputGroup CheckboxesAndRadios renders 1`] = ` - + `; exports[`Documentation: InputGroup Disabled renders 1`] = ` - +

@@ -232,7 +232,7 @@ exports[`Documentation: InputGroup Disabled renders 1`] = ` type="select" /> - + `; exports[`Documentation: InputGroup InputGroupText renders 1`] = ` @@ -253,7 +253,7 @@ exports[`Documentation: InputGroup InputGroupText renders 1`] = ` `; exports[`Documentation: InputGroup ValidationStates renders 1`] = ` - +

@@ -287,11 +287,11 @@ exports[`Documentation: InputGroup ValidationStates renders 1`] = ` validationState="error" /> - + `; exports[`Documentation: InputGroup WithFeedbackIcon renders 1`] = ` - +

@@ -312,11 +312,11 @@ exports[`Documentation: InputGroup WithFeedbackIcon renders 1`] = ` type="text" /> - + `; exports[`Documentation: InputGroup WithSelect renders 1`] = ` - +

@@ -343,7 +343,7 @@ exports[`Documentation: InputGroup WithSelect renders 1`] = ` type="select" /> - + `; exports[`Documentation: InputGroup renders 1`] = ` diff --git a/src/App/Documentation/components/Loaders/__snapshots__/index.test.js.snap b/src/App/Documentation/components/Loaders/__snapshots__/index.test.js.snap index e8faf3017..44a50b58a 100644 --- a/src/App/Documentation/components/Loaders/__snapshots__/index.test.js.snap +++ b/src/App/Documentation/components/Loaders/__snapshots__/index.test.js.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Documentation: Loaders Basic Usage renders 1`] = ` - +

@@ -20,7 +20,7 @@ exports[`Documentation: Loaders Basic Usage renders 1`] = ` visible={true} /> - + `; exports[`Documentation: Loaders Loaders Text renders 1`] = ` @@ -40,7 +40,7 @@ exports[`Documentation: Loaders Loaders Text renders 1`] = ` `; exports[`Documentation: Loaders Muted Loader renders 1`] = ` - +

@@ -67,11 +67,11 @@ exports[`Documentation: Loaders Muted Loader renders 1`] = ` visible={true} /> - + `; exports[`Documentation: Loaders Sizes renders 1`] = ` - +

@@ -124,11 +124,11 @@ exports[`Documentation: Loaders Sizes renders 1`] = ` visible={true} /> - + `; exports[`Documentation: Loaders Static Html renders 1`] = ` - +

@@ -166,11 +166,11 @@ exports[`Documentation: Loaders Static Html renders 1`] = ` /> .

- + `; exports[`Documentation: Loaders Usage With Javascript renders 1`] = ` - +

@@ -333,7 +333,7 @@ exports[`Documentation: Loaders Usage With Javascript renders 1`] = ` - + `; exports[`Documentation: Loaders renders 1`] = ` diff --git a/src/App/Documentation/components/MediaObject/__snapshots__/index.test.js.snap b/src/App/Documentation/components/MediaObject/__snapshots__/index.test.js.snap index 26d048f8f..7bc7cc2eb 100644 --- a/src/App/Documentation/components/MediaObject/__snapshots__/index.test.js.snap +++ b/src/App/Documentation/components/MediaObject/__snapshots__/index.test.js.snap @@ -16,7 +16,7 @@ exports[`Documentation: MediaObject MediaObjectText renders 1`] = ` `; exports[`Documentation: MediaObject MediaPosition renders 1`] = ` - +

@@ -49,11 +49,11 @@ exports[`Documentation: MediaObject MediaPosition renders 1`] = ` text="bob.corlsan@payex.com" /> - + `; exports[`Documentation: MediaObject Overview renders 1`] = ` - +

@@ -84,7 +84,7 @@ exports[`Documentation: MediaObject Overview renders 1`] = ` text="bob.corlsan@payex.com" /> - + `; exports[`Documentation: MediaObject renders 1`] = ` diff --git a/src/App/Documentation/components/Modal/__snapshots__/index.test.js.snap b/src/App/Documentation/components/Modal/__snapshots__/index.test.js.snap index 67cb47c93..f95592845 100644 --- a/src/App/Documentation/components/Modal/__snapshots__/index.test.js.snap +++ b/src/App/Documentation/components/Modal/__snapshots__/index.test.js.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Documentation: Modal Demo renders 1`] = ` - +

@@ -31,7 +31,7 @@ exports[`Documentation: Modal Demo renders 1`] = `

- + `; exports[`Documentation: Modal ModalText renders 1`] = ` @@ -50,7 +50,7 @@ exports[`Documentation: Modal ModalText renders 1`] = ` `; exports[`Documentation: Modal Usage renders 1`] = ` - +

@@ -80,7 +80,7 @@ exports[`Documentation: Modal Usage renders 1`] = `

- + `; exports[`Documentation: Modal renders 1`] = ` diff --git a/src/App/Documentation/components/Pagination/__snapshots__/index.test.js.snap b/src/App/Documentation/components/Pagination/__snapshots__/index.test.js.snap index f05a26b67..1e22499aa 100644 --- a/src/App/Documentation/components/Pagination/__snapshots__/index.test.js.snap +++ b/src/App/Documentation/components/Pagination/__snapshots__/index.test.js.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Documentation: Pagination DefaultPagination renders 1`] = ` - +

@@ -55,11 +55,11 @@ exports[`Documentation: Pagination DefaultPagination renders 1`] = ` } /> - + `; exports[`Documentation: Pagination PaginationBullets renders 1`] = ` - +

@@ -114,7 +114,7 @@ exports[`Documentation: Pagination PaginationBullets renders 1`] = ` type="bullets" /> - + `; exports[`Documentation: Pagination PaginationText renders 1`] = ` @@ -133,7 +133,7 @@ exports[`Documentation: Pagination PaginationText renders 1`] = ` `; exports[`Documentation: Pagination SimplePagination renders 1`] = ` - +

@@ -159,7 +159,7 @@ exports[`Documentation: Pagination SimplePagination renders 1`] = ` text="16 of 256" /> - + `; exports[`Documentation: Pagination renders 1`] = ` diff --git a/src/App/Documentation/components/Panel/__snapshots__/index.test.js.snap b/src/App/Documentation/components/Panel/__snapshots__/index.test.js.snap index a3bafa5c5..dcd51691e 100644 --- a/src/App/Documentation/components/Panel/__snapshots__/index.test.js.snap +++ b/src/App/Documentation/components/Panel/__snapshots__/index.test.js.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Documentation: Panel Overview renders 1`] = ` - +

@@ -32,11 +32,11 @@ exports[`Documentation: Panel Overview renders 1`] = `

- + `; exports[`Documentation: Panel PanelDark renders 1`] = ` - +

@@ -80,11 +80,11 @@ exports[`Documentation: Panel PanelDark renders 1`] = `

- + `; exports[`Documentation: Panel PanelHeaders renders 1`] = ` - +

@@ -121,11 +121,11 @@ exports[`Documentation: Panel PanelHeaders renders 1`] = ` type="brand" /> - + `; exports[`Documentation: Panel PanelMuted renders 1`] = ` - +

@@ -168,7 +168,7 @@ exports[`Documentation: Panel PanelMuted renders 1`] = `

- + `; exports[`Documentation: Panel PanelText renders 1`] = ` diff --git a/src/App/Documentation/components/ProgressTracker/__snapshots__/index.test.js.snap b/src/App/Documentation/components/ProgressTracker/__snapshots__/index.test.js.snap index de0afe645..0b13ca7d2 100644 --- a/src/App/Documentation/components/ProgressTracker/__snapshots__/index.test.js.snap +++ b/src/App/Documentation/components/ProgressTracker/__snapshots__/index.test.js.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Documentation: ProgressTracker Basic ProgressTracker renders 1`] = ` - +

@@ -72,11 +72,11 @@ exports[`Documentation: ProgressTracker Basic ProgressTracker renders 1`] = ` } /> - + `; exports[`Documentation: ProgressTracker Disabled ProgressTracker renders 1`] = ` - +

@@ -132,7 +132,7 @@ exports[`Documentation: ProgressTracker Disabled ProgressTracker renders 1`] = ` } /> - + `; exports[`Documentation: ProgressTracker ProgressTracker Text renders 1`] = ` @@ -151,7 +151,7 @@ exports[`Documentation: ProgressTracker ProgressTracker Text renders 1`] = ` `; exports[`Documentation: ProgressTracker Small ProgressTracker renders 1`] = ` - +

@@ -202,7 +202,7 @@ exports[`Documentation: ProgressTracker Small ProgressTracker renders 1`] = ` small={true} /> - + `; exports[`Documentation: ProgressTracker renders 1`] = ` diff --git a/src/App/Documentation/components/Sheet/__snapshots__/index.test.js.snap b/src/App/Documentation/components/Sheet/__snapshots__/index.test.js.snap index 8273c1d44..d9a656fab 100644 --- a/src/App/Documentation/components/Sheet/__snapshots__/index.test.js.snap +++ b/src/App/Documentation/components/Sheet/__snapshots__/index.test.js.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Documentation: Sheet Example renders 1`] = ` - +

@@ -156,7 +156,7 @@ exports[`Documentation: Sheet Example renders 1`] = ` Open sheet - + `; exports[`Documentation: Sheet SheetText renders 1`] = ` diff --git a/src/App/Documentation/components/Status/__snapshots__/index.test.js.snap b/src/App/Documentation/components/Status/__snapshots__/index.test.js.snap index eb4c258ba..fde79d1b3 100644 --- a/src/App/Documentation/components/Status/__snapshots__/index.test.js.snap +++ b/src/App/Documentation/components/Status/__snapshots__/index.test.js.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Documentation: Status ExtendedUsage renders 1`] = ` - +

@@ -47,11 +47,11 @@ exports[`Documentation: Status ExtendedUsage renders 1`] = ` Danger

- + `; exports[`Documentation: Status Overview renders 1`] = ` - +

@@ -112,7 +112,7 @@ exports[`Documentation: Status Overview renders 1`] = ` - + `; exports[`Documentation: Status StatusText renders 1`] = ` diff --git a/src/App/Documentation/components/Tabs/__snapshots__/index.test.js.snap b/src/App/Documentation/components/Tabs/__snapshots__/index.test.js.snap index 088ec2e11..c85a1d652 100644 --- a/src/App/Documentation/components/Tabs/__snapshots__/index.test.js.snap +++ b/src/App/Documentation/components/Tabs/__snapshots__/index.test.js.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Components: Tabs Collapsed renders 1`] = ` - +

@@ -37,11 +37,11 @@ exports[`Components: Tabs Collapsed renders 1`] = ` mode="collapsed" /> - + `; exports[`Components: Tabs Overview renders 1`] = ` - +

@@ -77,11 +77,11 @@ exports[`Components: Tabs Overview renders 1`] = ` mode="auto" /> - + `; exports[`Components: Tabs Stacked renders 1`] = ` - +

@@ -117,7 +117,7 @@ exports[`Components: Tabs Stacked renders 1`] = ` mode="stacked" /> - + `; exports[`Components: Tabs TabsText renders 1`] = ` diff --git a/src/App/Documentation/components/Toast/__snapshots__/index.test.js.snap b/src/App/Documentation/components/Toast/__snapshots__/index.test.js.snap index 47ea87f45..8c3336909 100644 --- a/src/App/Documentation/components/Toast/__snapshots__/index.test.js.snap +++ b/src/App/Documentation/components/Toast/__snapshots__/index.test.js.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Components: Toast Options renders 1`] = ` - +

@@ -134,11 +134,11 @@ exports[`Components: Toast Options renders 1`] = ` - + `; exports[`Components: Toast Overview renders 1`] = ` - +

@@ -172,11 +172,11 @@ exports[`Components: Toast Overview renders 1`] = ` Click for toast! - + `; exports[`Components: Toast PremadeToasts renders 1`] = ` - +

@@ -258,7 +258,7 @@ exports[`Components: Toast PremadeToasts renders 1`] = ` Danger toast - + `; exports[`Components: Toast ToastText renders 1`] = ` diff --git a/src/App/Documentation/components/Tooltips/__snapshots__/index.test.js.snap b/src/App/Documentation/components/Tooltips/__snapshots__/index.test.js.snap index a16589b95..6c4354405 100644 --- a/src/App/Documentation/components/Tooltips/__snapshots__/index.test.js.snap +++ b/src/App/Documentation/components/Tooltips/__snapshots__/index.test.js.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Components: Tooltip Overview renders 1`] = ` - +

@@ -83,7 +83,7 @@ exports[`Components: Tooltip Overview renders 1`] = ` Tooltip to the bottom - + `; exports[`Components: Tooltip TooltipText renders 1`] = ` diff --git a/src/App/Documentation/components/Topbar/__snapshots__/index.test.js.snap b/src/App/Documentation/components/Topbar/__snapshots__/index.test.js.snap index 96a3d0ce2..9bbe74e0a 100644 --- a/src/App/Documentation/components/Topbar/__snapshots__/index.test.js.snap +++ b/src/App/Documentation/components/Topbar/__snapshots__/index.test.js.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Components: Topbar Overview renders 1`] = ` - +

@@ -129,7 +129,7 @@ exports[`Components: Topbar Overview renders 1`] = ` } /> - + `; exports[`Components: Topbar TopbarText renders 1`] = ` diff --git a/src/App/Documentation/components/Well/__snapshots__/index.test.js.snap b/src/App/Documentation/components/Well/__snapshots__/index.test.js.snap index 231380bae..79617c3b4 100644 --- a/src/App/Documentation/components/Well/__snapshots__/index.test.js.snap +++ b/src/App/Documentation/components/Well/__snapshots__/index.test.js.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Components: Well DefaultWell renders 1`] = ` - +

@@ -27,11 +27,11 @@ exports[`Components: Well DefaultWell renders 1`] = ` Look ma, im in a well! - + `; exports[`Components: Well WellSizes renders 1`] = ` - +

@@ -74,7 +74,7 @@ exports[`Components: Well WellSizes renders 1`] = ` Look ma, im in a large well! - + `; exports[`Components: Well WellText renders 1`] = ` diff --git a/src/App/Documentation/core/Breakpoints/__snapshots__/index.test.js.snap b/src/App/Documentation/core/Breakpoints/__snapshots__/index.test.js.snap index f491ddd26..3b00c7265 100644 --- a/src/App/Documentation/core/Breakpoints/__snapshots__/index.test.js.snap +++ b/src/App/Documentation/core/Breakpoints/__snapshots__/index.test.js.snap @@ -22,7 +22,7 @@ exports[`Core: Breakpoints BreakpointsText renders 1`] = ` `; exports[`Core: Breakpoints Overview renders 1`] = ` - +

@@ -263,11 +263,11 @@ exports[`Core: Breakpoints Overview renders 1`] = ` - + `; exports[`Core: Breakpoints renders 1`] = ` - +
@@ -280,5 +280,5 @@ exports[`Core: Breakpoints renders 1`] = ` />
- + `; diff --git a/src/App/Documentation/core/Color/__snapshots__/index.test.js.snap b/src/App/Documentation/core/Color/__snapshots__/index.test.js.snap index c856c510a..ed69e685a 100644 --- a/src/App/Documentation/core/Color/__snapshots__/index.test.js.snap +++ b/src/App/Documentation/core/Color/__snapshots__/index.test.js.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Core: Color ColorPalette renders 1`] = ` - +

@@ -67,7 +67,7 @@ exports[`Core: Color ColorPalette renders 1`] = ` - + `; exports[`Core: Color ColorText renders 1`] = ` diff --git a/src/App/Documentation/core/Favicons/__snapshots__/index.test.js.snap b/src/App/Documentation/core/Favicons/__snapshots__/index.test.js.snap index 3d47023d9..bbbda2008 100644 --- a/src/App/Documentation/core/Favicons/__snapshots__/index.test.js.snap +++ b/src/App/Documentation/core/Favicons/__snapshots__/index.test.js.snap @@ -15,7 +15,7 @@ exports[`Core: Favicons FaviconsText renders 1`] = ` `; exports[`Core: Favicons OurFavicon renders 1`] = ` - +

@@ -33,11 +33,11 @@ exports[`Core: Favicons OurFavicon renders 1`] = ` src="/icons/android-chrome-96x96.png" /> - + `; exports[`Core: Favicons Usage renders 1`] = ` - +

@@ -247,7 +247,7 @@ exports[`Core: Favicons Usage renders 1`] = ` name="theme-color" /> - + `; exports[`Core: Favicons renders 1`] = ` diff --git a/src/App/Documentation/core/Grid/__snapshots__/index.test.js.snap b/src/App/Documentation/core/Grid/__snapshots__/index.test.js.snap index f35d40960..182407338 100644 --- a/src/App/Documentation/core/Grid/__snapshots__/index.test.js.snap +++ b/src/App/Documentation/core/Grid/__snapshots__/index.test.js.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Core: Grid Alignment renders 1`] = ` - +

@@ -207,11 +207,11 @@ exports[`Core: Grid Alignment renders 1`] = ` - + `; exports[`Core: Grid AutoLayoutColumns renders 1`] = ` - +

@@ -274,7 +274,7 @@ exports[`Core: Grid AutoLayoutColumns renders 1`] = ` - + `; exports[`Core: Grid GridText renders 1`] = ` @@ -294,7 +294,7 @@ exports[`Core: Grid GridText renders 1`] = ` `; exports[`Core: Grid HowItWorks renders 1`] = ` - +

@@ -359,7 +359,7 @@ exports[`Core: Grid HowItWorks renders 1`] = ` .

- + `; exports[`Core: Grid renders 1`] = ` diff --git a/src/App/Documentation/core/Icons/__snapshots__/index.test.js.snap b/src/App/Documentation/core/Icons/__snapshots__/index.test.js.snap index 86adda414..35770c0bd 100644 --- a/src/App/Documentation/core/Icons/__snapshots__/index.test.js.snap +++ b/src/App/Documentation/core/Icons/__snapshots__/index.test.js.snap @@ -22,7 +22,7 @@ exports[`Core: Icons IconsText renders 1`] = ` `; exports[`Core: Icons Usage renders 1`] = ` - +

@@ -79,7 +79,7 @@ exports[`Core: Icons Usage renders 1`] = ` - + `; exports[`Core: Icons renders 1`] = ` diff --git a/src/App/Documentation/core/Lists/__snapshots__/index.test.js.snap b/src/App/Documentation/core/Lists/__snapshots__/index.test.js.snap index eddeec72d..5cb1c2f87 100644 --- a/src/App/Documentation/core/Lists/__snapshots__/index.test.js.snap +++ b/src/App/Documentation/core/Lists/__snapshots__/index.test.js.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Documentation: Lists BasicList renders 1`] = ` - +

@@ -73,11 +73,11 @@ exports[`Documentation: Lists BasicList renders 1`] = ` - + `; exports[`Documentation: Lists DescriptionList renders 1`] = ` - +

@@ -127,11 +127,11 @@ exports[`Documentation: Lists DescriptionList renders 1`] = ` - + `; exports[`Documentation: Lists InlineList renders 1`] = ` - +

@@ -164,7 +164,7 @@ exports[`Documentation: Lists InlineList renders 1`] = ` - + `; exports[`Documentation: Lists ListsText renders 1`] = ` @@ -187,7 +187,7 @@ exports[`Documentation: Lists ListsText renders 1`] = ` `; exports[`Documentation: Lists SettingsList renders 1`] = ` - +

@@ -247,7 +247,7 @@ exports[`Documentation: Lists SettingsList renders 1`] = ` - + `; exports[`Documentation: Lists renders 1`] = ` diff --git a/src/App/Documentation/core/Tables/__snapshots__/index.test.js.snap b/src/App/Documentation/core/Tables/__snapshots__/index.test.js.snap index 401917f21..e3a78a24f 100644 --- a/src/App/Documentation/core/Tables/__snapshots__/index.test.js.snap +++ b/src/App/Documentation/core/Tables/__snapshots__/index.test.js.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Documentation: Table BasicTable renders 1`] = ` - +

@@ -126,11 +126,11 @@ exports[`Documentation: Table BasicTable renders 1`] = ` - + `; exports[`Documentation: Table DescriptionTable renders 1`] = ` - +

@@ -195,11 +195,11 @@ exports[`Documentation: Table DescriptionTable renders 1`] = ` - + `; exports[`Documentation: Table HoverStripedTable renders 1`] = ` - +

@@ -324,11 +324,11 @@ exports[`Documentation: Table HoverStripedTable renders 1`] = ` - + `; exports[`Documentation: Table HoverTable renders 1`] = ` - +

@@ -453,11 +453,11 @@ exports[`Documentation: Table HoverTable renders 1`] = ` - + `; exports[`Documentation: Table StripedTable renders 1`] = ` - +

@@ -582,7 +582,7 @@ exports[`Documentation: Table StripedTable renders 1`] = ` - + `; exports[`Documentation: Table TablesText renders 1`] = ` diff --git a/src/App/Documentation/core/Typography/__snapshots__/index.test.js.snap b/src/App/Documentation/core/Typography/__snapshots__/index.test.js.snap index 6313486c7..0833a8467 100644 --- a/src/App/Documentation/core/Typography/__snapshots__/index.test.js.snap +++ b/src/App/Documentation/core/Typography/__snapshots__/index.test.js.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Core: Typography Abbreviations renders 1`] = ` - +

@@ -57,11 +57,11 @@ exports[`Core: Typography Abbreviations renders 1`] = ` about abbreviations.

- + `; exports[`Core: Typography Blockquotes renders 1`] = ` - +

@@ -96,11 +96,11 @@ exports[`Core: Typography Blockquotes renders 1`] = `

- + `; exports[`Core: Typography Blockquotes renders 2`] = ` - +

Naming a source

@@ -141,11 +141,11 @@ exports[`Core: Typography Blockquotes renders 2`] = ` - + `; exports[`Core: Typography Blockquotes renders 3`] = ` - +

Alignment

@@ -183,19 +183,19 @@ exports[`Core: Typography Blockquotes renders 3`] = ` - + `; exports[`Core: Typography Blockquotes renders 4`] = ` - + - + `; exports[`Core: Typography Fonts renders 1`] = ` - +

@@ -218,11 +218,11 @@ exports[`Core: Typography Fonts renders 1`] = ` font-family: GillSans, Calibri, Trebuchet, sans-serif; } - + `; exports[`Core: Typography Headings renders 1`] = ` - +

@@ -306,11 +306,11 @@ exports[`Core: Typography Headings renders 1`] = ` .h6 heading

- + `; exports[`Core: Typography Inline renders 1`] = ` - +

@@ -437,11 +437,11 @@ exports[`Core: Typography Inline renders 1`] = ` is mostly for voice, technical terms, etc.

- + `; exports[`Core: Typography Lead renders 1`] = ` - +

@@ -467,11 +467,11 @@ exports[`Core: Typography Lead renders 1`] = ` This is a leading paragraph which for instance can be used as an introduction.

- + `; exports[`Core: Typography Small renders 1`] = ` - +

@@ -499,11 +499,11 @@ exports[`Core: Typography Small renders 1`] = `

- + `; exports[`Core: Typography Text Utilities renders 1`] = ` - +

@@ -519,7 +519,7 @@ exports[`Core: Typography Text Utilities renders 1`] = ` .

- + `; exports[`Core: Typography Typography Text renders 1`] = ` diff --git a/src/App/Documentation/getting-started/Contributing/__snapshots__/index.test.js.snap b/src/App/Documentation/getting-started/Contributing/__snapshots__/index.test.js.snap index fd4d66c26..b09bcf2e4 100644 --- a/src/App/Documentation/getting-started/Contributing/__snapshots__/index.test.js.snap +++ b/src/App/Documentation/getting-started/Contributing/__snapshots__/index.test.js.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`GettingStarted: Contributing Add Component To Routes renders 1`] = ` - +

@@ -78,7 +78,7 @@ exports[`GettingStarted: Contributing Add Component To Routes renders 1`] = ` to see your component in action.

- + `; exports[`GettingStarted: Contributing Adding JavaScript renders 1`] = `

`; @@ -298,7 +298,7 @@ exports[`GettingStarted: Contributing Adding Styles renders 1`] = `

`; exports[`GettingStarted: Contributing Adding Styles renders 2`] = `

`; exports[`GettingStarted: Contributing Adding Styles renders 3`] = ` - +

Importing the styles

@@ -341,11 +341,11 @@ exports[`GettingStarted: Contributing Adding Styles renders 3`] = ` ... - + `; exports[`GettingStarted: Contributing Adding Styles renders 4`] = ` - +

Creating variables

@@ -382,7 +382,7 @@ exports[`GettingStarted: Contributing Adding Styles renders 4`] = ` @my-example-component-font-family: "Arial"; - + `; exports[`GettingStarted: Contributing Adding Styles renders 5`] = `

`; @@ -470,7 +470,7 @@ exports[`GettingStarted: Contributing Contributing Text renders 1`] = ` `; exports[`GettingStarted: Contributing Create A Documentation Page renders 1`] = ` - +

@@ -587,11 +587,11 @@ exports[`GettingStarted: Contributing Create A Documentation Page renders 1`] = -tag.

- + `; exports[`GettingStarted: Contributing Creating Your Component renders 1`] = ` - +

@@ -648,7 +648,7 @@ exports[`GettingStarted: Contributing Creating Your Component renders 1`] = ` export default MyExampleComponent; - + `; exports[`GettingStarted: Contributing renders 1`] = ` diff --git a/src/App/Documentation/getting-started/Introduction/__snapshots__/index.test.js.snap b/src/App/Documentation/getting-started/Introduction/__snapshots__/index.test.js.snap index 61b3d8759..f33f5c37d 100644 --- a/src/App/Documentation/getting-started/Introduction/__snapshots__/index.test.js.snap +++ b/src/App/Documentation/getting-started/Introduction/__snapshots__/index.test.js.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`GettingStarted: Introduction Css renders 1`] = ` - +

@@ -33,7 +33,7 @@ exports[`GettingStarted: Introduction Css renders 1`] = ` rel="stylesheet" /> - + `; exports[`GettingStarted: Introduction IntroductionText renders 1`] = ` @@ -52,7 +52,7 @@ exports[`GettingStarted: Introduction IntroductionText renders 1`] = ` `; exports[`GettingStarted: Introduction JavaScript renders 1`] = ` - +

@@ -83,11 +83,11 @@ exports[`GettingStarted: Introduction JavaScript renders 1`] = ` src="https://design.payex.com/v/0.11.1/scripts/px-script.js" /> - + `; exports[`GettingStarted: Introduction QuickStart renders 1`] = ` - +

@@ -96,11 +96,11 @@ exports[`GettingStarted: Introduction QuickStart renders 1`] = `

To quickly add the designguide to your project, include the snippets below in your project.

- + `; exports[`GettingStarted: Introduction StarterTemplate renders 1`] = ` - +

@@ -142,7 +142,7 @@ exports[`GettingStarted: Introduction StarterTemplate renders 1`] = ` - + `; exports[`GettingStarted: Introduction renders 1`] = ` diff --git a/src/App/Documentation/utilities/Colors/__snapshots__/index.test.js.snap b/src/App/Documentation/utilities/Colors/__snapshots__/index.test.js.snap index 99974dfc3..b6a5ffd8c 100644 --- a/src/App/Documentation/utilities/Colors/__snapshots__/index.test.js.snap +++ b/src/App/Documentation/utilities/Colors/__snapshots__/index.test.js.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Utilities: Colors BackgroundColors renders 1`] = ` - +

@@ -65,7 +65,7 @@ exports[`Utilities: Colors BackgroundColors renders 1`] = ` - + `; exports[`Utilities: Colors ColorsText renders 1`] = ` @@ -83,7 +83,7 @@ exports[`Utilities: Colors ColorsText renders 1`] = ` `; exports[`Utilities: Colors TextColors renders 1`] = ` - +

@@ -224,11 +224,11 @@ exports[`Utilities: Colors TextColors renders 1`] = `

- + `; exports[`Utilities: Colors renders 1`] = ` - +
@@ -241,5 +241,5 @@ exports[`Utilities: Colors renders 1`] = ` />
- + `; diff --git a/src/App/Documentation/utilities/Display/__snapshots__/index.test.js.snap b/src/App/Documentation/utilities/Display/__snapshots__/index.test.js.snap index fc0ff4cab..0b81f4e35 100644 --- a/src/App/Documentation/utilities/Display/__snapshots__/index.test.js.snap +++ b/src/App/Documentation/utilities/Display/__snapshots__/index.test.js.snap @@ -17,7 +17,7 @@ exports[`Utilities: Display DisplayText renders 1`] = ` `; exports[`Utilities: Display Examples renders 1`] = ` - +

@@ -55,11 +55,11 @@ exports[`Utilities: Display Examples renders 1`] = ` d-block - + `; exports[`Utilities: Display HidingElements renders 1`] = ` - +

@@ -304,11 +304,11 @@ exports[`Utilities: Display HidingElements renders 1`] = ` Hidden on screens smaller than lg - + `; exports[`Utilities: Display HowItWorks renders 1`] = ` - +

@@ -329,11 +329,11 @@ exports[`Utilities: Display HowItWorks renders 1`] = ` . Classes can be combined for various effects as you need.

- + `; exports[`Utilities: Display Notation renders 1`] = ` - +

@@ -526,11 +526,11 @@ exports[`Utilities: Display Notation renders 1`] = ` screens.

- + `; exports[`Utilities: Display renders 1`] = ` - +
@@ -543,5 +543,5 @@ exports[`Utilities: Display renders 1`] = ` />
- + `; diff --git a/src/App/Documentation/utilities/Visibility/__snapshots__/index.test.js.snap b/src/App/Documentation/utilities/Visibility/__snapshots__/index.test.js.snap index 83f2c26e7..ea27b7d79 100644 --- a/src/App/Documentation/utilities/Visibility/__snapshots__/index.test.js.snap +++ b/src/App/Documentation/utilities/Visibility/__snapshots__/index.test.js.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Utilities: Visibility Intro renders 1`] = ` - +

Set the - + `; exports[`Utilities: Visibility VisibilityText renders 1`] = ` @@ -78,7 +78,7 @@ exports[`Utilities: Visibility VisibilityText renders 1`] = ` `; exports[`Utilities: Visibility renders 1`] = ` - +

@@ -88,5 +88,5 @@ exports[`Utilities: Visibility renders 1`] = `
- + `; diff --git a/src/App/ErrorPage404/__snapshots__/index.test.js.snap b/src/App/ErrorPage404/__snapshots__/index.test.js.snap index b5215c059..d30a6892b 100644 --- a/src/App/ErrorPage404/__snapshots__/index.test.js.snap +++ b/src/App/ErrorPage404/__snapshots__/index.test.js.snap @@ -1,9 +1,9 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`ErrorPage404: index renders 1`] = ` - +

This is not the page you are looking for.

- + `; diff --git a/src/App/Examples/__snapshots__/index.test.js.snap b/src/App/Examples/__snapshots__/index.test.js.snap index f67700e65..88d12b2ed 100644 --- a/src/App/Examples/__snapshots__/index.test.js.snap +++ b/src/App/Examples/__snapshots__/index.test.js.snap @@ -1,9 +1,9 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Examples: index renders 1`] = ` - +

Here there be examples

- + `; diff --git a/src/App/Templates/__snapshots__/index.test.js.snap b/src/App/Templates/__snapshots__/index.test.js.snap index c3e8cc27e..0bbca93a0 100644 --- a/src/App/Templates/__snapshots__/index.test.js.snap +++ b/src/App/Templates/__snapshots__/index.test.js.snap @@ -1,9 +1,9 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Templates: index renders 1`] = ` - +

Here there might be templates

- + `; diff --git a/src/App/__snapshots__/index.test.js.snap b/src/App/__snapshots__/index.test.js.snap index b13777461..2cafa4466 100644 --- a/src/App/__snapshots__/index.test.js.snap +++ b/src/App/__snapshots__/index.test.js.snap @@ -17,7 +17,7 @@ exports[`Main: App renders 1`] = ` "listen": [Function], "location": Object { "hash": "", - "pathname": "/", + "pathname": "blank", "search": "", "state": undefined, }, diff --git a/src/App/components/Button/__snapshots__/index.test.js.snap b/src/App/components/Button/__snapshots__/index.test.js.snap index 09bf79b6a..28d2acc98 100644 --- a/src/App/components/Button/__snapshots__/index.test.js.snap +++ b/src/App/components/Button/__snapshots__/index.test.js.snap @@ -167,16 +167,16 @@ exports[`Component: Button - Button tag: renders a button with an icon when pro type="button" > - + test - + - + `; @@ -203,19 +203,19 @@ exports[`Component: Button - Button tag: renders a button with icon and label i type="button" > - + test - + test - + `; diff --git a/src/App/components/Modal/__snapshots__/index.test.js.snap b/src/App/components/Modal/__snapshots__/index.test.js.snap index 720db7def..e25891c68 100644 --- a/src/App/components/Modal/__snapshots__/index.test.js.snap +++ b/src/App/components/Modal/__snapshots__/index.test.js.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Component: Modal - prop footerAlignment is an enum requires value 'centered' or 'right' 1`] = ` - +
- + `; exports[`Component: Modal - prop size is is an enum which requires value 'small', 'medium' or 'large' 1`] = ` - +
- + `; exports[`Component: Modal - prop size is marked as required 1`] = ` - +
- + `; exports[`Component: Modal - prop type is is an enum which requires value 'brand' or 'default' 1`] = ` - +
- + `; exports[`Component: Modal - prop type is marked as required 1`] = ` - +
- + `; exports[`Component: Modal - renders 1`] = ` - +
- + `; exports[`Component: Modal - renders a button component when prop button is true 1`] = ` - +
- + `; exports[`Component: Modal - renders a footer when prop footerText is provided 1`] = ` - +
- + `; exports[`Component: Modal - renders a footer with alignment when prop footerText and footerAlignment is provided 1`] = ` - +
- + `; exports[`Component: Modal - renders a header tag with subtitle but without title when prop subTitle is provided but title is not 1`] = ` - +
- + `; exports[`Component: Modal - renders with a header and subtitle when prop title and subTitle is provided 1`] = ` - +
- + `; exports[`Component: Modal - renders with a header without subtitle when prop title is provided and prop subTitle is missing 1`] = ` - +
- + `; exports[`Component: Modal - renders with class 'd-block' when prop visible is true 1`] = ` - +
- + `; exports[`Component: Modal - renders with class 'static' when prop isStatic is true 1`] = ` - +
- + `; exports[`Component: Modal - renders without header when prop title is missing 1`] = ` - +
- + `; From e7015dae1ce8184b0a010326f0527ae04c4836cd Mon Sep 17 00:00:00 2001 From: Erik Hallaraaker Date: Wed, 26 Sep 2018 15:27:53 +0200 Subject: [PATCH 015/159] Updated readme --- README.md | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) diff --git a/README.md b/README.md index 9c8042a7f..ff4522dec 100644 --- a/README.md +++ b/README.md @@ -77,6 +77,28 @@ __*Make sure to follow the syntax rules enforced by eslint & stylelint.*__ * Feature suggestions: File as Github issue or discuss the feature on Slack ([#design-guide-general](https://payex.slack.com/messages/C0L3W8B2S/)). * Code contribtions: Code contribtions are highly encouraged, but discuss the feature/bugfix in an issue or on Slack before you start coding. +## Creating a release + +Before merging to master to create a release make sure you follow these steps: + +1. Update the version in `~/package.json` +1. Update snapshots with the new version number by running the command `npm run test:update` in the project root. +1. Make sure the changelog is correct (date and version) and only contains changes for the current release. +1. Update the version in the url to the shield image at the top of this `README.md`. +1. Commit the changes and push to `develop`. +1. Change branch to `master`. +1. Merge `master` with `develop`. +1. Create a tag with the new version. +1. Push the tagged commit to `master`. + +Now AppVeyor will create and deploy a release on both github and [design.payex.com](https://design.payex.com). + +After pushing to master, complete the following steps: + +1. Change back to `develop`. +1. Remove the content of changelog (leave the heading). +1. Commit the file and push it. + ## Maintainers * [Erik Hallaraaker](https://github.com/erikhallaraaker) From 767e37f66fbb82af6942d6538449e5a671f4834d Mon Sep 17 00:00:00 2001 From: Erik Hallaraaker Date: Wed, 26 Sep 2018 15:32:32 +0200 Subject: [PATCH 016/159] Updated babel-eslint --- package-lock.json | 146 ++++++++++------------------------------------ package.json | 2 +- 2 files changed, 31 insertions(+), 117 deletions(-) diff --git a/package-lock.json b/package-lock.json index 54407bb51..3916fc8ed 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "design.payex.com", - "version": "0.10.20", + "version": "0.11.1", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -352,13 +352,13 @@ } }, "@babel/helper-function-name": { - "version": "7.0.0", - "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.0.0.tgz", - "integrity": "sha512-Zo+LGvfYp4rMtz84BLF3bavFTdf8y4rJtMPTe2J+rxYmnDOIeH8le++VFI/pRJU+rQhjqiXxE4LMaIau28Tv1Q==", + "version": "7.1.0", + "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.1.0.tgz", + "integrity": "sha512-A95XEoCpb3TO+KZzJ4S/5uW5fNe26DjBGqf1o9ucyLyCmi1dXq/B3c8iaWTfBk3VvetUxl16e8tIrd5teOCfGw==", "dev": true, "requires": { "@babel/helper-get-function-arity": "^7.0.0", - "@babel/template": "^7.0.0", + "@babel/template": "^7.1.0", "@babel/types": "^7.0.0" } }, @@ -809,9 +809,9 @@ } }, "@babel/parser": { - "version": "7.0.0", - "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.0.0.tgz", - "integrity": "sha512-RgJhNdRinpO8zibnoHbzTTexNs4c8ROkXFBanNDZTLHjwbdLk8J5cJSKulx/bycWTLYmKVNCkxRtVCoJnqPk+g==", + "version": "7.1.0", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.1.0.tgz", + "integrity": "sha512-SmjnXCuPAlai75AFtzv+KCBcJ3sDDWbIn+WytKw1k+wAtEy6phqI2RqKh/zAnw53i1NR8su3Ep/UoqaKcimuLg==", "dev": true }, "@babel/plugin-proposal-async-generator-functions": { @@ -1374,81 +1374,33 @@ } }, "@babel/template": { - "version": "7.0.0", - "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.0.0.tgz", - "integrity": "sha512-VLQZik/G5mjYJ6u19U3W2u7eM+rA/NGzH+GtHDFFkLTKLW66OasFrxZ/yK7hkyQcswrmvugFyZpDFRW0DjcjCw==", + "version": "7.1.0", + "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.1.0.tgz", + "integrity": "sha512-yZ948B/pJrwWGY6VxG6XRFsVTee3IQ7bihq9zFpM00Vydu6z5Xwg0C3J644kxI9WOTzd+62xcIsQ+AT1MGhqhA==", "dev": true, "requires": { "@babel/code-frame": "^7.0.0", - "@babel/parser": "^7.0.0", + "@babel/parser": "^7.1.0", "@babel/types": "^7.0.0" - }, - "dependencies": { - "@babel/code-frame": { - "version": "7.0.0", - "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.0.0.tgz", - "integrity": "sha512-OfC2uemaknXr87bdLUkWog7nYuliM9Ij5HUcajsVcMCpQrcLmtxRbVFTIqmcSkSeYRBFBRxs2FiUqFJDLdiebA==", - "dev": true, - "requires": { - "@babel/highlight": "^7.0.0" - } - }, - "@babel/highlight": { - "version": "7.0.0", - "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.0.0.tgz", - "integrity": "sha512-UFMC4ZeFC48Tpvj7C8UgLvtkaUuovQX+5xNWrsIoMG8o2z+XFKjKaN9iVmS84dPwVN00W4wPmqvYoZF3EGAsfw==", - "dev": true, - "requires": { - "chalk": "^2.0.0", - "esutils": "^2.0.2", - "js-tokens": "^4.0.0" - } - }, - "js-tokens": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", - "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==", - "dev": true - } } }, "@babel/traverse": { - "version": "7.0.0", - "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.0.0.tgz", - "integrity": "sha512-ka/lwaonJZTlJyn97C4g5FYjPOx+Oxd3ab05hbDr1Mx9aP1FclJ+SUHyLx3Tx40sGmOVJApDxE6puJhd3ld2kw==", + "version": "7.1.0", + "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.1.0.tgz", + "integrity": "sha512-bwgln0FsMoxm3pLOgrrnGaXk18sSM9JNf1/nHC/FksmNGFbYnPWY4GYCfLxyP1KRmfsxqkRpfoa6xr6VuuSxdw==", "dev": true, "requires": { "@babel/code-frame": "^7.0.0", "@babel/generator": "^7.0.0", - "@babel/helper-function-name": "^7.0.0", + "@babel/helper-function-name": "^7.1.0", "@babel/helper-split-export-declaration": "^7.0.0", - "@babel/parser": "^7.0.0", + "@babel/parser": "^7.1.0", "@babel/types": "^7.0.0", "debug": "^3.1.0", "globals": "^11.1.0", "lodash": "^4.17.10" }, "dependencies": { - "@babel/code-frame": { - "version": "7.0.0", - "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.0.0.tgz", - "integrity": "sha512-OfC2uemaknXr87bdLUkWog7nYuliM9Ij5HUcajsVcMCpQrcLmtxRbVFTIqmcSkSeYRBFBRxs2FiUqFJDLdiebA==", - "dev": true, - "requires": { - "@babel/highlight": "^7.0.0" - } - }, - "@babel/highlight": { - "version": "7.0.0", - "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.0.0.tgz", - "integrity": "sha512-UFMC4ZeFC48Tpvj7C8UgLvtkaUuovQX+5xNWrsIoMG8o2z+XFKjKaN9iVmS84dPwVN00W4wPmqvYoZF3EGAsfw==", - "dev": true, - "requires": { - "chalk": "^2.0.0", - "esutils": "^2.0.2", - "js-tokens": "^4.0.0" - } - }, "debug": { "version": "3.2.5", "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.5.tgz", @@ -1458,12 +1410,6 @@ "ms": "^2.1.1" } }, - "js-tokens": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", - "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==", - "dev": true - }, "ms": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.1.tgz", @@ -2600,9 +2546,9 @@ "dev": true }, "babel-eslint": { - "version": "9.0.0", - "resolved": "https://registry.npmjs.org/babel-eslint/-/babel-eslint-9.0.0.tgz", - "integrity": "sha512-itv1MwE3TMbY0QtNfeL7wzak1mV47Uy+n6HtSOO4Xd7rvmO+tsGQSgyOEEgo6Y2vHZKZphaoelNeSVj4vkLA1g==", + "version": "10.0.0", + "resolved": "https://registry.npmjs.org/babel-eslint/-/babel-eslint-10.0.0.tgz", + "integrity": "sha512-GDQOtoj8CFtEe1HlbuEb6rwdbxRr4Y5DWyddivdsriEj6ulDda+fS43Zfe/Ku0tuMNnxC9JK1bmIovsLq5+hUA==", "dev": true, "requires": { "@babel/code-frame": "^7.0.0", @@ -2611,34 +2557,6 @@ "@babel/types": "^7.0.0", "eslint-scope": "3.7.1", "eslint-visitor-keys": "^1.0.0" - }, - "dependencies": { - "@babel/code-frame": { - "version": "7.0.0", - "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.0.0.tgz", - "integrity": "sha512-OfC2uemaknXr87bdLUkWog7nYuliM9Ij5HUcajsVcMCpQrcLmtxRbVFTIqmcSkSeYRBFBRxs2FiUqFJDLdiebA==", - "dev": true, - "requires": { - "@babel/highlight": "^7.0.0" - } - }, - "@babel/highlight": { - "version": "7.0.0", - "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.0.0.tgz", - "integrity": "sha512-UFMC4ZeFC48Tpvj7C8UgLvtkaUuovQX+5xNWrsIoMG8o2z+XFKjKaN9iVmS84dPwVN00W4wPmqvYoZF3EGAsfw==", - "dev": true, - "requires": { - "chalk": "^2.0.0", - "esutils": "^2.0.2", - "js-tokens": "^4.0.0" - } - }, - "js-tokens": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", - "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==", - "dev": true - } } }, "babel-generator": { @@ -3851,7 +3769,7 @@ }, "browserify-aes": { "version": "1.2.0", - "resolved": "http://registry.npmjs.org/browserify-aes/-/browserify-aes-1.2.0.tgz", + "resolved": "https://registry.npmjs.org/browserify-aes/-/browserify-aes-1.2.0.tgz", "integrity": "sha512-+7CHXqGuspUn/Sl5aO7Ea0xWGAtETPXNSAjHo48JfLdPWcMng33Xe4znFvQweqc/uzk5zSOI3H52CYnjCfb5hA==", "dev": true, "requires": { @@ -3888,7 +3806,7 @@ }, "browserify-rsa": { "version": "4.0.1", - "resolved": "http://registry.npmjs.org/browserify-rsa/-/browserify-rsa-4.0.1.tgz", + "resolved": "https://registry.npmjs.org/browserify-rsa/-/browserify-rsa-4.0.1.tgz", "integrity": "sha1-IeCr+vbyApzy+vsTNWenAdQTVSQ=", "dev": true, "requires": { @@ -5027,7 +4945,7 @@ }, "create-hash": { "version": "1.2.0", - "resolved": "http://registry.npmjs.org/create-hash/-/create-hash-1.2.0.tgz", + "resolved": "https://registry.npmjs.org/create-hash/-/create-hash-1.2.0.tgz", "integrity": "sha512-z00bCGNHDG8mHAkP7CtT1qVu+bFQUPjYq/4Iv3C3kWjTFV10zIjfSoeqXo9Asws8gwSHDGj/hl2u4OGIjapeCg==", "dev": true, "requires": { @@ -5040,7 +4958,7 @@ }, "create-hmac": { "version": "1.1.7", - "resolved": "http://registry.npmjs.org/create-hmac/-/create-hmac-1.1.7.tgz", + "resolved": "https://registry.npmjs.org/create-hmac/-/create-hmac-1.1.7.tgz", "integrity": "sha512-MJG9liiZ+ogc4TzUwuvbER1JRdgvUFSB5+VR/g5h82fGaIRWMWddtKBHi7/sVhfjQZ6SehlyhvQYrcYkaUIpLg==", "dev": true, "requires": { @@ -5779,7 +5697,7 @@ }, "diffie-hellman": { "version": "5.0.3", - "resolved": "http://registry.npmjs.org/diffie-hellman/-/diffie-hellman-5.0.3.tgz", + "resolved": "https://registry.npmjs.org/diffie-hellman/-/diffie-hellman-5.0.3.tgz", "integrity": "sha512-kqag/Nl+f3GwyK25fhUMYj81BUOrZ9IuJsjIcDE5icNM9FJHAVm3VcUDxdLPoQtTuUylWm6ZIknYJwwaPxsUzg==", "dev": true, "requires": { @@ -7562,14 +7480,12 @@ "balanced-match": { "version": "1.0.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, "dev": true, - "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -7589,8 +7505,7 @@ "concat-map": { "version": "0.0.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "console-control-strings": { "version": "1.1.0", @@ -7738,7 +7653,6 @@ "version": "3.0.4", "bundled": true, "dev": true, - "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -12470,7 +12384,7 @@ }, "parse-asn1": { "version": "5.1.1", - "resolved": "http://registry.npmjs.org/parse-asn1/-/parse-asn1-5.1.1.tgz", + "resolved": "https://registry.npmjs.org/parse-asn1/-/parse-asn1-5.1.1.tgz", "integrity": "sha512-KPx7flKXg775zZpnp9SxJlz00gTd4BmJ2yJufSc44gMCRrRQ7NSzAcSJQfifuOLgW6bEi+ftrALtsgALeB2Adw==", "dev": true, "requires": { @@ -13742,7 +13656,7 @@ }, "public-encrypt": { "version": "4.0.2", - "resolved": "http://registry.npmjs.org/public-encrypt/-/public-encrypt-4.0.2.tgz", + "resolved": "https://registry.npmjs.org/public-encrypt/-/public-encrypt-4.0.2.tgz", "integrity": "sha512-4kJ5Esocg8X3h8YgJsKAuoesBgB7mqH3eowiDzMUPKiRDDE7E/BqqZD1hnTByIaAFiwAw246YEltSq7tdrOH0Q==", "dev": true, "requires": { @@ -14954,7 +14868,7 @@ }, "sha.js": { "version": "2.4.11", - "resolved": "http://registry.npmjs.org/sha.js/-/sha.js-2.4.11.tgz", + "resolved": "https://registry.npmjs.org/sha.js/-/sha.js-2.4.11.tgz", "integrity": "sha512-QMEp5B7cftE7APOjk5Y6xgrbWu+WkLVQwk8JNjZ8nKRciZaByEW6MubieAiToS7+dwvrjGhH8jRXz3MVd0AYqQ==", "dev": true, "requires": { diff --git a/package.json b/package.json index 1a3f55d75..3ea364734 100644 --- a/package.json +++ b/package.json @@ -46,7 +46,7 @@ "app-manifest-webpack-plugin": "^1.1.3", "autoprefixer": "^9.1.5", "babel-core": "^7.0.0-bridge.0", - "babel-eslint": "^9.0.0", + "babel-eslint": "^10.0.0", "babel-jest": "^23.6.0", "babel-loader": "^8.0.2", "babel-plugin-root-import": "^6.1.0", From e929933e1fac5c36f6271b95e0c0aa1acb55f648 Mon Sep 17 00:00:00 2001 From: Aksel Christoffer Wiig Date: Wed, 26 Sep 2018 15:49:37 +0200 Subject: [PATCH 017/159] modal.less cleaned up --- src/less/_variables.less | 16 ++++++++++------ src/less/components/media-object.less | 6 +++--- src/less/components/modal.less | 8 ++++---- 3 files changed, 17 insertions(+), 13 deletions(-) diff --git a/src/less/_variables.less b/src/less/_variables.less index dd28ca7a2..97b62960a 100644 --- a/src/less/_variables.less +++ b/src/less/_variables.less @@ -466,7 +466,7 @@ @range-webkit-bg: linear-gradient(90deg, @brand-primary, @brand-primary) 0 100% no-repeat content-box; -// 11. Modal +// 11. Modal (deprecated) // ========================================================================== /* Colors */ @@ -478,12 +478,16 @@ @modal-backdrop-bg: @black; @modal-backdrop-opacity: 0.5; -@modal-margin: 2rem; +@modal-margin: @base-margin; +@modal-margin-s: @base-margin-s; +@modal-margin-l: @base-margin-l; + +@modal-padding: @base-padding; +@modal-padding-l: @base-padding-l; -@modal-heading-padding: 1rem 2rem; -@modal-body-padding: 2rem 2rem 1rem 2rem; -@modal-footer-margin: 0; -@modal-footer-padding: 1rem 2rem 0.6rem 2rem; +@modal-heading-padding: @modal-padding @modal-padding-l; +@modal-body-padding: @modal-padding-l @modal-padding-l @modal-padding @modal-padding-l; +@modal-footer-padding: 1rem 2rem 0.6rem 2rem; //Todo cleanup @modal-size-sm: 500px; @modal-size-md: 750px; diff --git a/src/less/components/media-object.less b/src/less/components/media-object.less index 30530ffd3..5d22d06bb 100644 --- a/src/less/components/media-object.less +++ b/src/less/components/media-object.less @@ -1,6 +1,6 @@ .media { display: flex; - margin-bottom: 1rem; + margin-bottom: @base-margin; //Can't name a variable "@media" in _variables.less .media-img { display: flex; @@ -43,7 +43,7 @@ } .media-body { - padding: 0 1rem; + padding: 0 @base-margin; display: flex; flex-direction: column; justify-content: center; @@ -57,7 +57,7 @@ /* stylelint-enable selector-list-comma-newline-after */ p { - margin-top: -0.5rem; + margin-top: -@base-margin-s; } } } diff --git a/src/less/components/modal.less b/src/less/components/modal.less index de2353098..ae2cc09b7 100644 --- a/src/less/components/modal.less +++ b/src/less/components/modal.less @@ -25,7 +25,7 @@ z-index: inherit; .modal-dialog { - margin: (@modal-margin / 2) auto; + margin: @modal-margin auto; } } @@ -52,7 +52,7 @@ } .modal-dialog { - margin: @modal-margin auto; + margin: @modal-margin-l auto; background-color: @modal-background-color; box-shadow: @modal-box-shadow; } @@ -118,7 +118,7 @@ text-align: left; background-color: @background-body; padding: @modal-footer-padding; - margin: @modal-footer-margin; + margin: 0; &:extend(.clearfix all); @@ -131,7 +131,7 @@ } p { - margin-bottom: 0.5rem; + margin-bottom: @modal-margin-s; } } } From d6146e1e670281d3214720d9071d8906de0e9697 Mon Sep 17 00:00:00 2001 From: Aksel Christoffer Wiig Date: Wed, 26 Sep 2018 15:53:37 +0200 Subject: [PATCH 018/159] Pagination cleaned up --- src/less/_variables.less | 5 +++++ src/less/components/pagination.less | 6 +++--- 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/src/less/_variables.less b/src/less/_variables.less index 97b62960a..5c2a7055b 100644 --- a/src/less/_variables.less +++ b/src/less/_variables.less @@ -502,6 +502,11 @@ @pagination-bullet-size: @status-size; +@pagination-margin: @base-margin; +@pagination-margin-s: @base-margin-s; + +@pagination-bullets-margin: @pagination-margin-s/2; + // 13. Panel // ========================================================================== diff --git a/src/less/components/pagination.less b/src/less/components/pagination.less index ed79c1f24..110e7651f 100644 --- a/src/less/components/pagination.less +++ b/src/less/components/pagination.less @@ -1,7 +1,7 @@ .pagination { display: inline-block; padding-left: 0; - margin: 1rem 0; + margin: @pagination-margin 0; li { display: inline; @@ -9,7 +9,7 @@ a, span { - margin: 0 0.5rem; + margin: 0 @pagination-margin-s; font-weight: bold; color: @pagination-default-color; display: inline-block; @@ -174,7 +174,7 @@ &.pagination-bullets { li:not(.arrow-start):not(.arrow-back):not(.arrow-forward):not(.arrow-end) { - margin: 0 0.25rem; + margin: 0 @pagination-bullets-margin; a, span { From 66c0ba66aee8bc9f27c1b81bee794cfccfd482ee Mon Sep 17 00:00:00 2001 From: Erik Hallaraaker Date: Wed, 26 Sep 2018 16:08:53 +0200 Subject: [PATCH 019/159] Further updates to readme --- README.md | 69 +++++++++++++++++++++++++++++-------------------------- 1 file changed, 36 insertions(+), 33 deletions(-) diff --git a/README.md b/README.md index ff4522dec..22bc59f2f 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ -![PayEx logo](./src/img/px-logo.svg) +![PayEx logo](~/src/img/px-logo.svg) -# design.payex.com +# PayEx DesignGuide [![Version](https://img.shields.io/badge/Version-0.11.1-blue.svg)](https://ci.appveyor.com/project/erikhallaraaker/design-payex-com/branch/master) [![Build status](https://ci.appveyor.com/api/projects/status/1dii19sqw1m7xtsn/branch/master?svg=true)](https://ci.appveyor.com/project/PayEx/design-payex-com/branch/master) @@ -18,12 +18,12 @@ DesignGuide requires [Node.js](https://nodejs.org/en/) (includes npm). ### Installing 1. Open a terminal and navigate to repo root -1. `npm install` -1. `npm start` +2. `npm install` +3. `npm start` * If encountering an error, you might need to install [webpack-dev-server](https://github.com/webpack/webpack-dev-server) globally. You can do this by running the command `npm i webpack-dev-server -g`. -1. Go to -1. Works? If not, contact us on Slack ([#design-guide-general](https://payex.slack.com/messages/C0L3W8B2S/)). -1. Get to work. +4. Go to +5. Works? If not, contact us on Slack ([#design-guide-general](https://payex.slack.com/messages/C0L3W8B2S/)). +6. Get to work. ## Developing @@ -34,7 +34,7 @@ DesignGuide requires [Node.js](https://nodejs.org/en/) (includes npm). ### Setting up Dev -* Running the command `npm start` starts the webpack dev server, (which is configured in `./webpack.config.js`). If any changes is made to this file, or any files directly influencing this file (i.e. any loaders or plugins) you need to restart the server. +* Running the command `npm start` starts the webpack dev server, (which is configured in `~/webpack.config.js`). If any changes is made to this file, or any files directly influencing this file (i.e. any loaders or plugins) you need to restart the server. * The script `npm start` will start the dev server in development mode. If you wish to run the dev server in production-like environment run the command `npm run start:prod`. #### Importing components @@ -42,32 +42,32 @@ DesignGuide requires [Node.js](https://nodejs.org/en/) (includes npm). When importing different components in the files you create, you can use shortcuts for common paths. The shortcuts are as following: * `~` - root of the project (example `import package from "~/package";`). -* `$` - `./src`-folder (example `import px from "$/px-script";`). -* `@` - `./src/App/components`-folder (example `import Alert from "@/Alert";`). -* `#` - `./src/App/Documentation/utils`-folder (example `import { DocToc } from "#";`). +* `$` - `~/src`-folder (example `import px from "$/px-script";`). +* `@` - `~/src/App/components`-folder (example `import Alert from "@/Alert";`). +* `#` - `~/src/App/Documentation/utils`-folder (example `import { DocToc } from "#";`). -The shortcuts are specified in the `./.babelrc`-file. Specifying the prefix-shortcuts in the `./jsconfig.json`-file enables path intellisense for the shortcuts (at least in VSCode). +The shortcuts are specified in the `~/.babelrc`-file. Specifying the prefix-shortcuts in the `~/jsconfig.json`-file enables path intellisense for the shortcuts (at least in VSCode). ### Building -To start building, run the command `npm run build` to start in dev-mode, or `npm run build:prod` for production-mode. This will make webpack start bundling everything and make static files in the `./dist/`-folder. It will also run through all files in `./src/` with eslint making sure all files are without errors before building. Also make sure all tests pass, or make changes to them accordingly. -> Note: Running the command `npm run build:prod` will delete all files already located in `./dist`. +To start building, run the command `npm run build` to start in dev-mode, or `npm run build:prod` for production-mode. This will make webpack start bundling everything and make static files in the `~/dist/`-folder. Also make sure all tests pass, or make changes to them accordingly. +> Note: Running the command `npm run build:prod` will delete all files already located in `~/dist`. ## Versioning -Design Guide uses [semantic versioning](http://semver.org/). This means that internally, Design Guide will use a `major.minor.patch` version number to signal what the changes in each release surmount to. Since `minor` and `patch` version increments means backwards compatibility will be upheld, only the `major` version number will be a part of the URL of CSS and JavaScript files. This also means both CSS and JavaScript files are versioned in lockstep, so whenever a new `major` version of the CSS is released, a new `major` version of the JavaScript will be as well. +DesignGuide uses [semantic versioning](http://semver.org/). This means that internally, DesignGuide will use a `major.minor.patch` version number to signal what the changes in each release surmount to. Since `minor` and `patch` version increments means backwards compatibility will be upheld, ~~only the `major` version number will be a part of the URL of CSS and JavaScript files~~. This also means both CSS and JavaScript files are versioned in lockstep, so whenever a new ~~`major`~~ version of the CSS is released, a new ~~`major`~~ version of the JavaScript will be as well. ## Tests 1. Open a terminal and navigate to repo root -1. Run the command `npm test` +2. Run the command `npm test` * Many of the tests are snapshot based, and runs against already created snapshots. If you need to update the snapshots due to changes run the command `npm run test:update`. - * A test coverage report is generated after running the tests. This can be found in `./coverage`. + * A test coverage report is generated after running the tests. This can be found in `~/coverage`. > Note: Snapshot testing is pretty unforgiving, so if you make __ANY__ changes to how a component, which already has a snapshot, is rendered, the tests __WILL__ crash! So make sure to run `npm run test:update` before committing. ## Code style -Coding style rules set in `./.eslintrc` & `./.stylelintrc`. +Coding style rules set in `~/.eslintrc` & `~/.stylelintrc`. __*Make sure to follow the syntax rules enforced by eslint & stylelint.*__ @@ -82,40 +82,43 @@ __*Make sure to follow the syntax rules enforced by eslint & stylelint.*__ Before merging to master to create a release make sure you follow these steps: 1. Update the version in `~/package.json` -1. Update snapshots with the new version number by running the command `npm run test:update` in the project root. -1. Make sure the changelog is correct (date and version) and only contains changes for the current release. -1. Update the version in the url to the shield image at the top of this `README.md`. -1. Commit the changes and push to `develop`. -1. Change branch to `master`. -1. Merge `master` with `develop`. -1. Create a tag with the new version. -1. Push the tagged commit to `master`. +2. Update snapshots with the new version number by running the command `npm run test:update` in the project root. +3. Make sure the changelog is correct (date and version) and only contains changes for the current release. +4. Update the version in the url to the shield image at the top of this `README.md`. +5. Commit the changes and push to `develop`. +6. Change branch to `master`. +7. Merge `master` with `develop` without fastforward (`--no-ff`). +8. Create a tag with the new commit. +9. Push the tagged commit to `master`. -Now AppVeyor will create and deploy a release on both github and [design.payex.com](https://design.payex.com). +AppVeyor will now create and deploy a release on both github and [design.payex.com](https://design.payex.com). After pushing to master, complete the following steps: 1. Change back to `develop`. -1. Remove the content of changelog (leave the heading). -1. Commit the file and push it. +2. Remove the content of changelog (leave the heading). +3. Commit the file and push it. ## Maintainers * [Erik Hallaraaker](https://github.com/erikhallaraaker) * [Håkon Mosvoll](https://github.com/hmosvoll) +* [Aksel Wiig](https://github.com/Akswii) ## Contents of this project -* `./coverage/` - Test coverage report for the project (not commited to repo). -* `./dist/` - Static files generated by [webpack](https://webpack.js.org/). -* `./src/` - All the source files. -* `./static/` - Static files to be included in the `./dist/` folder during the build. +* `~/coverage` - Test coverage report for the project (not commited to repo). +* `~/dist` - Static files generated by [webpack](https://webpack.js.org/) (not commited to repo). +* `~/src` - All the source files. +* `~/build` - Config files for [AppVeyor](https://www.appveyor.com/) ## Notable files * `.babelrc` - [Babel](https://babeljs.io/) configuration. * `.eslintignore` - List of files/directories eslint will ignore (similar to .gitignore). * `.eslintrc` - [Eslint](https://eslint.org/) configuration. +* `.sentryclirc` - [Sentry](https://sentry.io) configuration used by webpack to configure a new release on sentry. + * _Do __not__ change the line `token = `, as this placeholder is used by AppVeyor to insert the sentry api key._ * `.stylelintrc` - [Stylelint](https://stylelint.io/) configuration. * `CHANGELOG.md` - Collection of changes made to the project. Insert your changes here. * `jest.config.js` - [jest](https://facebook.github.io/jest/) configuration. From 4bc5eb7a2250c072cd3d347c132b410b882cdff0 Mon Sep 17 00:00:00 2001 From: Aksel Christoffer Wiig Date: Wed, 26 Sep 2018 16:18:04 +0200 Subject: [PATCH 020/159] tabs.less cleaned up --- src/less/_variables.less | 10 +++++++++- src/less/components/tabs.less | 4 ++-- 2 files changed, 11 insertions(+), 3 deletions(-) diff --git a/src/less/_variables.less b/src/less/_variables.less index 5c2a7055b..3bc5f231e 100644 --- a/src/less/_variables.less +++ b/src/less/_variables.less @@ -529,7 +529,7 @@ @panel-border-radius: 0; @panel-margin-bottom: 14px; -@panel-body-padding: 15px 30px; +@panel-body-padding: 15px 30px; //Todo: cleanup, lots of hardcoded px values, maybe ok? @panel-table-margin: 0; @panel-banner-padding: 15px; @panel-heading-padding: 15px 15px 15px 30px; @@ -558,6 +558,14 @@ @status-size: 13px; @status-padding: 10; +// x. Tabs +// ========================================================================== + +@tabs-margin: @base-margin; + +@tabs-padding: @base-padding; +@tabs-padding-s: @base-padding-s; + // 16. Toast // ========================================================================== diff --git a/src/less/components/tabs.less b/src/less/components/tabs.less index ec81fb47c..96116d052 100644 --- a/src/less/components/tabs.less +++ b/src/less/components/tabs.less @@ -1,6 +1,6 @@ .tabs { position: relative; - margin: 1rem auto; + margin: @tabs-margin auto; min-height: 60px; ul { @@ -18,7 +18,7 @@ background-color: @white; display: block; font-weight: bold; - padding: 0.5rem 1rem; + padding: @tabs-padding-s @tabs-padding; font-size: 1.3rem; border-bottom: 3px solid @white; transition: border-bottom 0.2s ease-in-out; From 84cd5f2f2ea2c9c19ba14bd6ad69b20632919cad Mon Sep 17 00:00:00 2001 From: Erik Hallaraaker Date: Wed, 26 Sep 2018 16:59:02 +0200 Subject: [PATCH 021/159] Fixed wrong image source in readme --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 22bc59f2f..22d910c0b 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -![PayEx logo](~/src/img/px-logo.svg) +![PayEx logo](./src/img/px-logo.svg) # PayEx DesignGuide From 96180d9bb3929296232ab9e3083ecd4b4e9a2b2a Mon Sep 17 00:00:00 2001 From: Erik Hallaraaker Date: Wed, 26 Sep 2018 16:59:17 +0200 Subject: [PATCH 022/159] Started on build/deploy readme --- build/README.md | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/build/README.md b/build/README.md index 1f153a9c9..b8dd13d43 100644 --- a/build/README.md +++ b/build/README.md @@ -1 +1,10 @@ # AppVeyor build/deploy + +This document is meant to describe the content of `appveyor.yml` and associated files. + +## Disaster Recovery + +The deploy procedure is set up to run with AppVeyor. To use the config in the projects `appveyor.yml` you need to log onto an existing AppVeyor account, ours is in the 1p + +## AppVeyor Config Explained + From 65c1c215978f2098c3ead6b13f172078d8267770 Mon Sep 17 00:00:00 2001 From: Aksel Christoffer Wiig Date: Thu, 27 Sep 2018 08:50:03 +0200 Subject: [PATCH 023/159] Toast cleaned up, changed padding top to be .5rem instead of .6 --- src/less/_variables.less | 6 ++++++ src/less/components/toast.less | 6 +++--- 2 files changed, 9 insertions(+), 3 deletions(-) diff --git a/src/less/_variables.less b/src/less/_variables.less index 3bc5f231e..5f88fbcc3 100644 --- a/src/less/_variables.less +++ b/src/less/_variables.less @@ -575,6 +575,12 @@ @toast-text-color: @text-color; @toast-action-color: @yellow; +@toast-margin: @base-margin; +@toast-margin-s: @base-margin-s; +@toast-margin-m: @base-margin+@base-margin-s; //Medium, ok naming? + +@toast-padding: @base-padding; +@toast-padding-s: @base-padding-s; // 17. Topbar // ========================================================================== diff --git a/src/less/components/toast.less b/src/less/components/toast.less index 1f4d43dea..205bdc8cb 100644 --- a/src/less/components/toast.less +++ b/src/less/components/toast.less @@ -22,7 +22,7 @@ line-height: 1.5em; color: @toast-text-color; background-color: @toast-color; - padding: 0.6rem 1.5rem; + padding: @toast-padding-s @toast-margin-m; font-size: 1.1rem; font-weight: 300; display: flex; @@ -77,8 +77,8 @@ user-select: none; &:first-child { - margin-right: 0.5rem; - margin-left: -0.5rem; + margin-right: @toast-margin-s; + margin-left: -@toast-margin-s; } &:last-child { From 6070790e64f20ad5646cb705a6ffaf937aea407c Mon Sep 17 00:00:00 2001 From: Aksel Christoffer Wiig Date: Thu, 27 Sep 2018 09:02:54 +0200 Subject: [PATCH 024/159] tooltip.less cleaned up, changed 8px values to .5rem --- src/less/_variables.less | 10 ++++++++++ src/less/components/tooltip.less | 9 ++++----- 2 files changed, 14 insertions(+), 5 deletions(-) diff --git a/src/less/_variables.less b/src/less/_variables.less index 5f88fbcc3..aa1e7230b 100644 --- a/src/less/_variables.less +++ b/src/less/_variables.less @@ -582,6 +582,16 @@ @toast-padding: @base-padding; @toast-padding-s: @base-padding-s; + +// x. Tooltip +// ========================================================================== + +@tooltip-margin: @base-margin; +@tooltip-margin-s: @base-margin-s; + +@tooltip-padding-s: @base-padding-s; +@tooltip-padding-xs: @base-padding-xs; + // 17. Topbar // ========================================================================== diff --git a/src/less/components/tooltip.less b/src/less/components/tooltip.less index 1fd5db8f2..9fcdc4fcc 100644 --- a/src/less/components/tooltip.less +++ b/src/less/components/tooltip.less @@ -1,6 +1,5 @@ [data-tooltip] { position: relative; - // margin: @base-margin; display: inline-block; &:before { @@ -30,7 +29,7 @@ min-width: 5rem; border-radius: 5px; pointer-events: none; - padding: 0.25rem 0.5rem; + padding: @tooltip-padding-xs @tooltip-padding-s; z-index: @zindex-tooltip; opacity: 0; transition: opacity 0.3s ease-in-out; @@ -69,13 +68,13 @@ &[data-tooltip-position="bottom"]:before { top: 100%; - margin-top: 8px; + margin-top: @tooltip-margin-s; transform: translateX(-50%) translateY(-100%) rotate(-180deg); } &[data-tooltip-position="bottom"]:after { top: 100%; - margin-top: 8px; + margin-top: @tooltip-margin-s; transform: translateX(-50%) translateY(0%); } @@ -89,7 +88,7 @@ &[data-tooltip-position="right"]:after { left: 100%; top: 50%; - margin-left: 8px; + margin-left: @tooltip-margin-s; transform: translateX(0%) translateY(-50%); } From 564c06250c106c811feaac005eb66640ed0996ae Mon Sep 17 00:00:00 2001 From: Aksel Christoffer Wiig Date: Thu, 27 Sep 2018 09:39:26 +0200 Subject: [PATCH 025/159] variables.less cleaned up, added button group around tooltip --- .../Documentation/components/Buttons/index.js | 2 +- .../components/Tooltips/index.js | 60 ++++++++++--------- src/less/_variables.less | 39 ++++++------ src/less/components/toast.less | 6 +- 4 files changed, 53 insertions(+), 54 deletions(-) diff --git a/src/App/Documentation/components/Buttons/index.js b/src/App/Documentation/components/Buttons/index.js index eb78f9663..9f3ee332a 100644 --- a/src/App/Documentation/components/Buttons/index.js +++ b/src/App/Documentation/components/Buttons/index.js @@ -240,7 +240,7 @@ const ButtonsGroup = () => ( <>

Using buttons together

When you use buttons next to each other you have to wrap them in a button-group.

- +
{"\n"} {"\n"} {"\n"} diff --git a/src/App/Documentation/components/Tooltips/index.js b/src/App/Documentation/components/Tooltips/index.js index 688c39e94..9ed627611 100644 --- a/src/App/Documentation/components/Tooltips/index.js +++ b/src/App/Documentation/components/Tooltips/index.js @@ -7,35 +7,37 @@ const Overview = () => (

Overview

Add the attribute to the desired element and add your content in its value to create a tooltip.

You can use the attribute to position the tooltip relative to the containing element, use the values , , or . If the attribute is not provided, it will default to top.

- - {"\n"} - {"\n"} - {"\n"} - + +
{"\n"} + {"\n"} + {"\n"} + {"\n"} + {"\n"} +
); diff --git a/src/less/_variables.less b/src/less/_variables.less index aa1e7230b..5f1622f9c 100644 --- a/src/less/_variables.less +++ b/src/less/_variables.less @@ -90,14 +90,12 @@ /* Margin */ @base-margin: 1rem; - @base-margin-s: @base-margin/2; @base-margin-xs: @base-margin/4; @base-margin-l: @base-margin*2; /* Padding */ @base-padding: 1rem; - @base-padding-s: @base-padding/2; @base-padding-xs: @base-padding/4; @base-padding-l: @base-padding*2; @@ -114,10 +112,10 @@ @padding-base-vertical: 0.375rem; @padding-base-horizontal: 0.75rem; -@padding-large-vertical: 0.5rem; -@padding-large-horizontal: 1rem; -@padding-small-vertical: 0.25rem; -@padding-small-horizontal: 0.5rem; +@padding-large-vertical: @base-padding-s; +@padding-large-horizontal: @base-padding; +@padding-small-vertical: @base-padding-xs; +@padding-small-horizontal: @base-padding-s; @padding-xs-vertical: 0.1rem; @padding-xs-horizontal: 0.25rem; @@ -188,7 +186,7 @@ @table-collapse-border-color: @gray-8; /* Dimensions */ -@table-cell-padding: 1rem; +@table-cell-padding: @base-padding; @table-collapse-content-padding: 10px 20px 10px 20px; @table-collpase-nested-margin: -10px -20px -10px -20px; @table-margin-bottom: 0.6rem; @@ -261,7 +259,7 @@ /* Paragraphs */ -@paragraph-margin-bottom: 1rem; +@paragraph-margin-bottom: @base-margin; @lead-font-size: (@base-font-size * 1.25); @lead-font-weight: 300; @@ -278,7 +276,7 @@ @dt-font-weight: @font-weight-bold; -@list-inline-padding: 0.5rem; +@list-inline-padding: @base-padding-s; @hr-margin-y: @spacer; @@ -315,7 +313,7 @@ @breadcrumb-margin: @base-margin; @breadcrumb-padding: 0.6rem 1.2rem 0.6rem 2rem; -@breadcrumb-padding-first: 1rem; +@breadcrumb-padding-first: @base-padding; @breadcrumb-bg: @white; @breadcrumb-border-color: @brand-primary; @@ -333,7 +331,7 @@ /* Small */ @breadcrumb-padding-sm: 0.3rem 0.6rem 0.3rem 1.25rem; -@breadcrumb-padding-first-sm: 0.5rem; +@breadcrumb-padding-first-sm: @base-padding-s; // Arrow constants @breadcrumb-arrow-border-size-sm: 0.05rem; @@ -347,7 +345,7 @@ @btn-font-weight: normal; @btn-margin: @base-margin; -@btn-margin-s: @btn-margin/2; +@btn-margin-s: @base-margin-s; @btn-border-radius-base: 3px; @btn-border-radius-large: 3px; @@ -372,10 +370,9 @@ // ========================================================================== @card-margin: @base-margin; -@card-margin-s: @card-margin/2; -@card-margin-xs: @card-margin/4; - -@card-margin-l: @card-margin*2; +@card-margin-s: @base-margin-s; +@card-margin-xs: @base-margin-xs; +@card-margin-l: @base-margin-l; @card-padding: @base-padding; @@ -383,7 +380,7 @@ // ========================================================================== @datepicker-padding: @base-margin; -@datepicker-padding-s: @datepicker-padding/2; +@datepicker-padding-s: @base-margin-s; @datepicker-rd-padding: round(@datepicker-padding/3, 1); @@ -398,9 +395,9 @@ @dialog-box-shadow: 0 0 30px rgba(133, 133, 133, 0.2); @dialog-backdrop-bg: fade(@black, 50%); -@dialog-heading-padding: 1rem 2rem; -@dialog-body-padding: 2rem 2rem 1rem; -@dialog-footer-padding: 1rem 2rem; +@dialog-heading-padding: @base-padding @base-padding-l; +@dialog-body-padding: @base-padding-l @base-padding-l @base-padding; +@dialog-footer-padding: @base-padding @base-padding-l; @dialog-footer-margin: 0; @@ -577,10 +574,10 @@ @toast-margin: @base-margin; @toast-margin-s: @base-margin-s; -@toast-margin-m: @base-margin+@base-margin-s; //Medium, ok naming? @toast-padding: @base-padding; @toast-padding-s: @base-padding-s; +@toast-padding-m: @base-padding+@base-padding-s; //Medium, ok naming? // x. Tooltip diff --git a/src/less/components/toast.less b/src/less/components/toast.less index 205bdc8cb..3610bdb7d 100644 --- a/src/less/components/toast.less +++ b/src/less/components/toast.less @@ -22,7 +22,7 @@ line-height: 1.5em; color: @toast-text-color; background-color: @toast-color; - padding: @toast-padding-s @toast-margin-m; + padding: @toast-padding-s @toast-padding-m; font-size: 1.1rem; font-weight: 300; display: flex; @@ -83,8 +83,8 @@ &:last-child { cursor: pointer; - margin-left: 0.5rem; - margin-right: -0.5rem; + margin-left: @toast-margin-s; + margin-right: -@toast-margin-s; color: lighten(@text-color, 20%); &:hover { From 4d77208dff4fb52a09bf17d13ab62f3e2a185eea Mon Sep 17 00:00:00 2001 From: Aksel Christoffer Wiig Date: Thu, 27 Sep 2018 10:03:08 +0200 Subject: [PATCH 026/159] topbar.less in progress. Fixed z-index bug in actionlist --- src/less/_variables.less | 14 ++++++++++---- src/less/components/topbar.less | 16 ++++++++-------- 2 files changed, 18 insertions(+), 12 deletions(-) diff --git a/src/less/_variables.less b/src/less/_variables.less index 5f1622f9c..f5f58adce 100644 --- a/src/less/_variables.less +++ b/src/less/_variables.less @@ -117,7 +117,7 @@ @padding-small-vertical: @base-padding-xs; @padding-small-horizontal: @base-padding-s; @padding-xs-vertical: 0.1rem; -@padding-xs-horizontal: 0.25rem; +@padding-xs-horizontal: @base-padding-xs; /* Borders */ @border-width: 1px; @@ -131,9 +131,9 @@ /* Z-index master list */ @zindex-tabs: 100; @zindex-tabs-arrow: 101; -@zindex-topbar: 500; -@zindex-action-list: 549; -@zindex-action-list-anchor: 550; +@zindex-action-list: 500; +@zindex-action-list-anchor: 501; +@zindex-topbar: 550; @zindex-dialog-backdrop: 1040; @zindex-dialog: 1050; @zindex-modal-backdrop: 1060; @@ -599,3 +599,9 @@ @topbar-slide-prev-pos: 260px; //@topbar-nav-width - @topbar-back-btn-width; @topbar-slide-transition: 0.5s ease; @topbar-background-transition: background-color 0.5s ease-in; + +@topbar-margin: @base-margin; +@topbar-margin-s: @base-margin-s; + +@topbar-padding: @base-padding; +@topbar-padding-s: @base-padding-s; diff --git a/src/less/components/topbar.less b/src/less/components/topbar.less index 5950636c9..720b39621 100644 --- a/src/less/components/topbar.less +++ b/src/less/components/topbar.less @@ -37,7 +37,7 @@ border: 0; background: none; height: 100%; - padding: 0 1.25rem; + padding: 0 1.25rem; // Todo: change font-weight: bold; outline: 0; display: flex; @@ -80,7 +80,7 @@ &.topbar-nav-right { transition: right @topbar-slide-transition; right: -@topbar-nav-width; - padding: 1rem; + padding: @topbar-padding; &.in { right: 0; @@ -133,14 +133,14 @@ .slides-container { width: @topbar-nav-slide-width; - margin: 0.5rem; - padding: 0 0.5rem; + margin: @base-margin-s; // This was 3px + padding: 0 @topbar-padding-s; } } .slide-back-btn { visibility: hidden; - padding: 0.5rem; + padding: @topbar-padding-s; position: absolute; top: 0; left: 0; @@ -151,11 +151,11 @@ } .slides-container { - margin: 0.5rem 1rem; + margin: @base-margin-s @base-margin; flex-grow: 1; .topbar-nav-group { - margin: 0.5rem 0 1rem; + margin: @base-margin-s 0 @base-margin; .topbar-nav-group-heading { text-transform: uppercase; @@ -172,7 +172,7 @@ span { display: block; color: @gray-7; - padding: 0.5rem 0 0.5rem 0.6rem; + padding: @topbar-padding-s 0 @topbar-padding-s 0.6rem; cursor: pointer; text-transform: uppercase; border: none; From 19e5baa40e148432d7a39fd366a3875dd1772f5b Mon Sep 17 00:00:00 2001 From: Aksel Christoffer Wiig Date: Thu, 27 Sep 2018 10:14:15 +0200 Subject: [PATCH 027/159] topbar/media-objects.less cleanedup --- src/less/_variables.less | 8 ++++++++ src/less/components/media-object.less | 6 +++--- src/less/components/topbar.less | 6 +++--- 3 files changed, 14 insertions(+), 6 deletions(-) diff --git a/src/less/_variables.less b/src/less/_variables.less index f5f58adce..684411809 100644 --- a/src/less/_variables.less +++ b/src/less/_variables.less @@ -463,6 +463,14 @@ @range-webkit-bg: linear-gradient(90deg, @brand-primary, @brand-primary) 0 100% no-repeat content-box; +// 11. Media object +// ========================================================================== + +@mobject-margin: @base-margin; +@mobject-margin-s: @base-margin-s; + +@mobject-padding: @base-padding; + // 11. Modal (deprecated) // ========================================================================== diff --git a/src/less/components/media-object.less b/src/less/components/media-object.less index 5d22d06bb..2601fd719 100644 --- a/src/less/components/media-object.less +++ b/src/less/components/media-object.less @@ -1,6 +1,6 @@ .media { display: flex; - margin-bottom: @base-margin; //Can't name a variable "@media" in _variables.less + margin-bottom: @mobject-margin; .media-img { display: flex; @@ -43,7 +43,7 @@ } .media-body { - padding: 0 @base-margin; + padding: 0 @mobject-padding; display: flex; flex-direction: column; justify-content: center; @@ -57,7 +57,7 @@ /* stylelint-enable selector-list-comma-newline-after */ p { - margin-top: -@base-margin-s; + margin-top: -@mobject-margin-s; } } } diff --git a/src/less/components/topbar.less b/src/less/components/topbar.less index 720b39621..6d07a2584 100644 --- a/src/less/components/topbar.less +++ b/src/less/components/topbar.less @@ -133,7 +133,7 @@ .slides-container { width: @topbar-nav-slide-width; - margin: @base-margin-s; // This was 3px + margin: @topbar-margin-s; padding: 0 @topbar-padding-s; } } @@ -151,11 +151,11 @@ } .slides-container { - margin: @base-margin-s @base-margin; + margin: @topbar-margin-s @topbar-margin; flex-grow: 1; .topbar-nav-group { - margin: @base-margin-s 0 @base-margin; + margin: @topbar-margin-s 0 @topbar-margin; .topbar-nav-group-heading { text-transform: uppercase; From bf85f642ed482c44f76e9ebd0b183f1adf2fdf62 Mon Sep 17 00:00:00 2001 From: Aksel Christoffer Wiig Date: Thu, 27 Sep 2018 10:30:11 +0200 Subject: [PATCH 028/159] Well cleaned up, fixed document overview for _variables.less --- src/less/_variables.less | 77 ++++++++++++++++++++--------------- src/less/components/well.less | 4 +- 2 files changed, 47 insertions(+), 34 deletions(-) diff --git a/src/less/_variables.less b/src/less/_variables.less index 684411809..652178526 100644 --- a/src/less/_variables.less +++ b/src/less/_variables.less @@ -14,19 +14,26 @@ // // COMPONENTS // =============== -// x. Action List -// 6. Badge -// 7. Breadcrumb -// 8. Button -// 9. Dialog -// 10. Form -// 11. Modal -// 12. Pagination -// 13. Panel -// 14. Sheet -// 15. Status -// 16. Toast -// 17. Topbar +// 6. Action List +// 7. Alert +// 8. Badge +// 9. Breadcrumb +// 10. Button +// 11. Card +// 12. Datepicker +// 13. Dialog +// 14. Form +// 15. Media object +// 16. Modal (deprecated) +// 17. Pagination +// 18. Panel +// 19. Sheet +// 20. Status +// 21. Tabs +// 22. Toast +// 23. Tooltip +// 24. Topbar +// 25. Well // ========================================================================== // @@ -287,7 +294,7 @@ // // ========================================================================== -// x. Action List +// 6. Action List // ========================================================================== @action-list-padding: @base-padding; @@ -295,18 +302,18 @@ @action-list-a-padding: round(@action-list-padding/3, 1); -// x. Alert +// 7. Alert // ========================================================================== @alert-margin: @base-margin; @alert-padding: @base-padding; -// 6. Badge +// 8. Badge // ========================================================================== @badge-list: default @gray-8, brand @green, blue @blue, purple @purple, yellow @yellow, red @red; -// 7. Breadcrumb +// 9. Breadcrumb // ========================================================================== // Todo: clean this up when progress tracker is remade @@ -339,7 +346,7 @@ @breadcrumb-arrow-bg-sm: @breadcrumb-arrow-border-sm - @breadcrumb-arrow-border-size-sm; -// 8. Button +// 10. Button // ========================================================================== @btn-font-weight: normal; @@ -366,7 +373,7 @@ @btn-link-disabled-color: @gray-6; -// x. Card +// 11. Card // ========================================================================== @card-margin: @base-margin; @@ -376,7 +383,7 @@ @card-padding: @base-padding; -// x. Datepicker +// 12. Datepicker // ========================================================================== @datepicker-padding: @base-margin; @@ -384,7 +391,7 @@ @datepicker-rd-padding: round(@datepicker-padding/3, 1); -// 9. Dialog +// 13. Dialog // ========================================================================== /* Colors */ @@ -404,7 +411,7 @@ @dialog-size: 500px; -// 10. Form +// 14. Form // ========================================================================== @form-margin: @base-margin; @@ -463,7 +470,7 @@ @range-webkit-bg: linear-gradient(90deg, @brand-primary, @brand-primary) 0 100% no-repeat content-box; -// 11. Media object +// 15. Media object // ========================================================================== @mobject-margin: @base-margin; @@ -471,7 +478,7 @@ @mobject-padding: @base-padding; -// 11. Modal (deprecated) +// 16. Modal (deprecated) // ========================================================================== /* Colors */ @@ -499,7 +506,7 @@ @modal-size-lg: 1000px; -// 12. Pagination +// 17. Pagination // ========================================================================== @pagination-active-color: @brand-primary; @@ -512,7 +519,7 @@ @pagination-bullets-margin: @pagination-margin-s/2; -// 13. Panel +// 18. Panel // ========================================================================== /* Colors */ @@ -545,7 +552,7 @@ @panel-collapse-duration: 0.25s; -// 14. Sheet +// 19. Sheet // ========================================================================== @sheet-backdrop-bg: fade(@black, 50%); @@ -557,13 +564,13 @@ @sheet-width: 580px; -// 15. Status +// 20. Status // ========================================================================== @status-size: 13px; @status-padding: 10; -// x. Tabs +// 21. Tabs // ========================================================================== @tabs-margin: @base-margin; @@ -572,7 +579,7 @@ @tabs-padding-s: @base-padding-s; -// 16. Toast +// 22. Toast // ========================================================================== @toast-height: 48px; @@ -588,7 +595,7 @@ @toast-padding-m: @base-padding+@base-padding-s; //Medium, ok naming? -// x. Tooltip +// 23. Tooltip // ========================================================================== @tooltip-margin: @base-margin; @@ -597,7 +604,7 @@ @tooltip-padding-s: @base-padding-s; @tooltip-padding-xs: @base-padding-xs; -// 17. Topbar +// 24. Topbar // ========================================================================== @topbar-height: 70px; @@ -613,3 +620,9 @@ @topbar-padding: @base-padding; @topbar-padding-s: @base-padding-s; + +// 25. Well +// ========================================================================== + +@well-padding: @base-padding; +@well-padding-s: @base-padding-s; diff --git a/src/less/components/well.less b/src/less/components/well.less index 312656c8c..5eeab56cb 100644 --- a/src/less/components/well.less +++ b/src/less/components/well.less @@ -1,6 +1,6 @@ .well { min-height: 1rem; - padding: 1rem; + padding: @well-padding; background-color: @white; border: 1px solid @gray-10; border-radius: 0.25rem; @@ -12,7 +12,7 @@ } &.well-sm { - padding: 0.5rem; + padding: @well-padding-s; border-radius: 0.125rem; } } From 73b69ff8d15e7cdf25963c6b316f53b16be81e21 Mon Sep 17 00:00:00 2001 From: Erik Hallaraaker Date: Thu, 27 Sep 2018 10:04:12 +0200 Subject: [PATCH 029/159] Removed old code --- src/App/components/Dropdown/index.js | 25 ------------------------- src/px-script/dropdown/index.js | 24 ------------------------ 2 files changed, 49 deletions(-) delete mode 100644 src/App/components/Dropdown/index.js delete mode 100644 src/px-script/dropdown/index.js diff --git a/src/App/components/Dropdown/index.js b/src/App/components/Dropdown/index.js deleted file mode 100644 index 4e5b9fc8f..000000000 --- a/src/App/components/Dropdown/index.js +++ /dev/null @@ -1,25 +0,0 @@ -// import React, { Fragment } from "react"; -// import PropTypes from "prop-types"; - -// const Dropdown = ({ items }) => { -// return ( -//
    {"\n"} -// {items.map(({ label, href, icon }, i) => { -// const attr = { -// href: href || "#", -// "data-dropdown-icon": icon || null -// }; - -// return ( -// -// {label}{"\n"} -// -// ); -// })} -//
-// ); -// }; - -// Dropdown.propTypes = { items: PropTypes.array.isRequired }; - -// export default Dropdown; diff --git a/src/px-script/dropdown/index.js b/src/px-script/dropdown/index.js deleted file mode 100644 index 88369d8d1..000000000 --- a/src/px-script/dropdown/index.js +++ /dev/null @@ -1,24 +0,0 @@ -// const _generateDropdown = dropdown => { -// const selectItems = []; - -// dropdown.querySelectorAll("a").forEach(item => { -// selectItems.push({ -// _element: item, -// label: item.innerText, -// href: item.attributes.href.value, -// icon: item.attributes["data-dropdown-icon"].value -// }); -// }); - -// console.log(selectItems); -// }; - -// export default { -// init: () => { -// const dropdowns = document.querySelectorAll(".dropdown[data-dropdown]"); - -// dropdowns.forEach(dropdown => { -// _generateDropdown(dropdown); -// }); -// } -// }; From cdaa0174f749f2416b557b05e004f67cdc6bd1fa Mon Sep 17 00:00:00 2001 From: Aksel Christoffer Wiig Date: Thu, 27 Sep 2018 10:40:33 +0200 Subject: [PATCH 030/159] removed font weight variable from btn --- src/less/_variables.less | 6 ++++-- src/less/components/action-list.less | 2 +- src/less/components/badge.less | 2 +- 3 files changed, 6 insertions(+), 4 deletions(-) diff --git a/src/less/_variables.less b/src/less/_variables.less index 652178526..4e35b4229 100644 --- a/src/less/_variables.less +++ b/src/less/_variables.less @@ -297,6 +297,8 @@ // 6. Action List // ========================================================================== +@action-list-margin-s: @base-margin-s; + @action-list-padding: @base-padding; @action-list-padding-l: @base-padding-l; @@ -313,6 +315,8 @@ @badge-list: default @gray-8, brand @green, blue @blue, purple @purple, yellow @yellow, red @red; +@badge-margin-s: @base-margin-s; + // 9. Breadcrumb // ========================================================================== // Todo: clean this up when progress tracker is remade @@ -349,8 +353,6 @@ // 10. Button // ========================================================================== -@btn-font-weight: normal; - @btn-margin: @base-margin; @btn-margin-s: @base-margin-s; diff --git a/src/less/components/action-list.less b/src/less/components/action-list.less index 9c9925bc6..86322aae0 100644 --- a/src/less/components/action-list.less +++ b/src/less/components/action-list.less @@ -32,7 +32,7 @@ border: none; > .material-icons { - margin-right: 0.5rem; + margin-right: @action-list-margin-s; } &:active, diff --git a/src/less/components/badge.less b/src/less/components/badge.less index fcf2428e0..77fc56eea 100644 --- a/src/less/components/badge.less +++ b/src/less/components/badge.less @@ -10,7 +10,7 @@ .badge { color: @white; - padding: 0.125rem 0.5rem; + padding: 0.125rem @badge-margin-s; border-radius: 0.1875rem; .for-each(@badge in @badge-list) { From 9cc48dd5d3671939a451fc919a007d7194186b61 Mon Sep 17 00:00:00 2001 From: Erik Hallaraaker Date: Thu, 27 Sep 2018 10:49:14 +0200 Subject: [PATCH 031/159] Tightened eslint rules and cleaned up code --- .eslintignore | 1 + .eslintrc | 51 +++++- src/App/AppHeader/HeaderIcons.test.js | 8 +- src/App/Documentation/SelectPanel.js | 3 + src/App/Documentation/SelectPanel.test.js | 4 +- .../components/ActionList/index.js | 1 + .../components/ActionList/index.test.js | 12 +- .../components/Alerts/index.test.js | 24 +-- .../components/Badge/index.test.js | 16 +- .../components/Breadcrumb/index.test.js | 16 +- .../components/Buttons/index.test.js | 44 ++--- .../components/Card/index.test.js | 12 +- .../components/Datepickers/index.test.js | 24 +-- .../components/Dialog/index.test.js | 12 +- .../components/Forms/index.test.js | 60 ++---- .../components/InputGroup/index.test.js | 36 +--- .../components/Loaders/index.test.js | 28 +-- .../components/MediaObject/index.test.js | 16 +- .../components/Modal/index.test.js | 16 +- .../components/Pagination/index.js | 3 - .../components/Pagination/index.test.js | 20 +- .../Documentation/components/Panel/index.js | 3 - .../components/Panel/index.test.js | 24 +-- .../components/ProgressTracker/index.test.js | 20 +- .../components/Sheet/index.test.js | 12 +- .../Documentation/components/Status/index.js | 3 - .../components/Status/index.test.js | 16 +- .../components/Tabs/index.test.js | 20 +- .../components/Toast/index.test.js | 20 +- .../components/Tooltips/index.test.js | 12 +- .../Documentation/components/Topbar/index.js | 1 + .../components/Topbar/index.test.js | 12 +- .../components/Well/index.test.js | 16 +- .../core/Breakpoints/index.test.js | 12 +- .../core/Color/ColorPreview.test.js | 4 +- .../Documentation/core/Color/index.test.js | 12 +- .../Documentation/core/Favicons/index.test.js | 16 +- src/App/Documentation/core/Grid/index.test.js | 20 +- .../Documentation/core/Icons/index.test.js | 12 +- src/App/Documentation/core/Lists/index.js | 3 +- .../Documentation/core/Lists/index.test.js | 24 +-- .../Documentation/core/Tables/index.test.js | 28 +-- .../core/Typography/index.test.js | 44 ++--- .../BrowserSupport/BrowserIcons.test.js | 24 +-- .../BrowserSupport/index.test.js | 4 +- .../Contributing/index.test.js | 36 +--- .../Introduction/index.test.js | 24 +-- src/App/Documentation/index.test.js | 4 +- .../utilities/Colors/index.test.js | 16 +- .../utilities/Display/index.test.js | 24 +-- .../utilities/Visibility/index.test.js | 12 +- .../utils/Attribute/index.test.js | 8 +- .../utils/ComponentPreview/index.js | 12 ++ .../utils/ComponentPreview/index.test.js | 8 +- .../Documentation/utils/DocHeading/index.js | 1 + src/App/Documentation/utils/DocToc/index.js | 41 ++--- .../Documentation/utils/Icon/index.test.js | 4 +- .../utils/PxScript/index.test.js | 20 +- .../Documentation/utils/RenderRoutes/index.js | 1 + src/App/ErrorPage404/index.test.js | 4 +- src/App/Examples/index.test.js | 4 +- src/App/Home/index.test.js | 4 +- src/App/Templates/index.test.js | 4 +- src/App/components/Alert/index.test.js | 32 +--- src/App/components/Breadcrumb/index.test.js | 16 +- src/App/components/Button/index.js | 18 +- src/App/components/Button/index.test.js | 173 +++++------------- src/App/components/FormComponents/Checkbox.js | 10 +- .../FormComponents/Checkbox.test.js | 20 +- .../FormComponents/Datepicker.test.js | 8 +- .../FormComponents/FormControlText.test.js | 12 +- src/App/components/FormComponents/Radio.js | 12 +- .../components/FormComponents/Radio.test.js | 20 +- .../FormComponents/Rangeslider.test.js | 16 +- .../components/FormComponents/Togglebox.js | 11 +- .../FormComponents/Togglebox.test.js | 16 +- src/App/components/InputGroup/index.test.js | 4 +- src/App/components/Loader/index.test.js | 12 +- src/App/components/Modal/index.test.js | 64 ++----- src/App/components/Pagination/index.js | 2 +- src/App/components/Pagination/index.test.js | 24 +-- src/App/components/Panel/index.test.js | 48 ++--- .../components/ProgressTracker/index.test.js | 24 +-- src/App/components/Tabs/index.js | 1 + src/App/components/Tabs/index.test.js | 9 +- src/App/components/Topbar/index.js | 1 + src/App/index.js | 4 +- src/App/index.spec.js | 1 + src/App/index.test.js | 4 +- src/App/routes/root.test.js | 1 + src/px-script/alert/index.test.js | 4 + src/px-script/button/index.js | 1 + src/px-script/button/index.test.js | 1 + src/px-script/datepicker/index.js | 1 + src/px-script/datepicker/index.test.js | 1 + src/px-script/index.js | 1 + src/px-script/loader/index.js | 2 + src/px-script/loader/index.test.js | 1 + src/px-script/modal/index.js | 1 + src/px-script/modal/index.spec.js | 1 + src/px-script/modal/index.test.js | 1 + src/px-script/rangeslider/index.js | 1 + src/px-script/toast/index.js | 15 ++ src/px-script/topbar/NavMenu.js | 8 + src/px-script/topbar/TargetLink.js | 1 + src/px-script/topbar/index.js | 1 - src/px-script/utils/index.js | 3 +- src/px-script/validation/index.js | 3 + webpack.config.js | 3 +- 109 files changed, 516 insertions(+), 1093 deletions(-) diff --git a/.eslintignore b/.eslintignore index b94707787..8167354c9 100644 --- a/.eslintignore +++ b/.eslintignore @@ -1,2 +1,3 @@ node_modules/ dist/ +src/polyfills/ diff --git a/.eslintrc b/.eslintrc index 33228629b..d6851fef8 100644 --- a/.eslintrc +++ b/.eslintrc @@ -37,6 +37,8 @@ }, "rules": { "array-bracket-spacing": ["warn"], + "arrow-spacing": ["error"], + "implicit-arrow-linebreak": ["error", "beside"], "babel/new-cap": 0, "babel/no-invalid-this": 1, "babel/object-curly-spacing": ["warn", "always"], @@ -49,20 +51,26 @@ "comma-style": ["warn"], "computed-property-spacing": ["warn"], "constructor-super": ["error"], - "eol-last": ["warn"], - "eqeqeq": ["warn"], + "curly": ["error", "all"], + "eol-last": ["error"], + "eqeqeq": ["error"], "func-call-spacing": ["warn"], + "func-style": ["error", "expression"], "indent": ["error", 4, { "SwitchCase": 1 }], "jsx-quotes": ["error", "prefer-double"], "key-spacing": ["warn"], "keyword-spacing": ["warn"], "linebreak-style": 0, + "lines-between-class-members": ["error"], "new-cap": 0, + "newline-before-return": ["error"], "newline-per-chained-call": ["warn"], - "no-alert": ["warn"], - "no-console": ["warn", {"allow": ["warn", "error"]}], + "no-alert": ["error"], + "no-console": ["warn", { "allow": ["warn", "error"] }], "no-const-assign": ["error"], + "no-empty-function": ["error"], "no-extra-semi": ["error"], + "no-dupe-class-members": ["error"], "no-inner-declarations": 0, "no-invalid-regexp": ["error"], "no-irregular-whitespace": ["error"], @@ -76,12 +84,39 @@ "no-unneeded-ternary": ["warn"], "no-unreachable": ["error"], "no-unused-vars": ["warn"], - "no-var": ["warn"], + "no-var": ["error"], "no-whitespace-before-property": ["warn"], "node/exports-style": ["error", "module.exports"], "object-curly-newline": ["warn"], - "object-curly-spacing": 0, + "object-curly-spacing": ["warn", "always"], "object-property-newline": ["warn"], + "padding-line-between-statements": ["error", + { + "blankLine": "always", + "prev": "*", + "next": ["class", "const", "block", "block-like", "break", "export", "expression", "do", "for", "function", "if", "import", "let", "return", "switch", "try", "while"] + }, + { + "blankLine": "always", + "prev": ["class", "const", "block", "block-like", "break", "export", "expression", "do", "for", "function", "if", "import", "let", "return", "switch", "try", "while"], + "next": "*" + }, + { + "blankLine": "any", + "prev": "expression", + "next": "expression" + }, + { + "blankLine": "any", + "prev": "import", + "next": "import" + }, + { + "blankLine": "any", + "prev": ["let", "const"], + "next": ["let", "const"] + } + ], "prefer-const": ["warn"], "prefer-spread": ["warn"], "quotes": 0, @@ -92,10 +127,10 @@ "semi": 0, "semi-spacing": ["warn"], "semi-style": ["warn"], - "space-before-function-paren": ["warn"], + "space-before-function-paren": ["error"], "space-in-parens": ["warn"], "space-infix-ops": ["warn"], - "spaced-comment": ["warn"], + "spaced-comment": ["error"], "wrap-regex": ["error"] } } diff --git a/src/App/AppHeader/HeaderIcons.test.js b/src/App/AppHeader/HeaderIcons.test.js index 10851f99c..d18aa3be8 100644 --- a/src/App/AppHeader/HeaderIcons.test.js +++ b/src/App/AppHeader/HeaderIcons.test.js @@ -10,9 +10,7 @@ describe("AppHeader: HeaderIcons", () => { }); it("renders as expected", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -24,9 +22,7 @@ describe("AppHeader: HeaderIcons", () => { }); it("renders as expected", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); diff --git a/src/App/Documentation/SelectPanel.js b/src/App/Documentation/SelectPanel.js index 4e294d1f3..4d61261a9 100644 --- a/src/App/Documentation/SelectPanel.js +++ b/src/App/Documentation/SelectPanel.js @@ -11,6 +11,7 @@ const SearchBox = () => ( const NavLink = ({ childRoute, pathname }) => { const { title, path } = childRoute; + return (
  • {title} @@ -35,6 +36,7 @@ class NavGroup extends Component { render () { const { title, routes } = this.props.route; const { pathname } = this.props.location; + return (
    @@ -55,6 +57,7 @@ const SelectPanel = () => ( diff --git a/src/App/Documentation/SelectPanel.test.js b/src/App/Documentation/SelectPanel.test.js index ebffb253a..e1a93462c 100644 --- a/src/App/Documentation/SelectPanel.test.js +++ b/src/App/Documentation/SelectPanel.test.js @@ -23,9 +23,7 @@ describe("Documentation: SelectPanel", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); diff --git a/src/App/Documentation/components/ActionList/index.js b/src/App/Documentation/components/ActionList/index.js index fdcf2972b..33af86622 100644 --- a/src/App/Documentation/components/ActionList/index.js +++ b/src/App/Documentation/components/ActionList/index.js @@ -80,6 +80,7 @@ class ActionList extends Component { componentDidMount () { actionList.init(); } + render () { return (
    diff --git a/src/App/Documentation/components/ActionList/index.test.js b/src/App/Documentation/components/ActionList/index.test.js index 2de8e8e49..77fd085cc 100644 --- a/src/App/Documentation/components/ActionList/index.test.js +++ b/src/App/Documentation/components/ActionList/index.test.js @@ -9,9 +9,7 @@ describe("Components: ActionList", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -22,9 +20,7 @@ describe("Components: ActionList", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -36,9 +32,7 @@ describe("Components: ActionList", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); diff --git a/src/App/Documentation/components/Alerts/index.test.js b/src/App/Documentation/components/Alerts/index.test.js index 00de9734d..57ef17610 100644 --- a/src/App/Documentation/components/Alerts/index.test.js +++ b/src/App/Documentation/components/Alerts/index.test.js @@ -9,9 +9,7 @@ describe("Documentation: Alerts", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -22,9 +20,7 @@ describe("Documentation: Alerts", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -36,9 +32,7 @@ describe("Documentation: Alerts", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -50,9 +44,7 @@ describe("Documentation: Alerts", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -64,9 +56,7 @@ describe("Documentation: Alerts", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -78,9 +68,7 @@ describe("Documentation: Alerts", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); diff --git a/src/App/Documentation/components/Badge/index.test.js b/src/App/Documentation/components/Badge/index.test.js index 50a1fd314..bac26bd90 100644 --- a/src/App/Documentation/components/Badge/index.test.js +++ b/src/App/Documentation/components/Badge/index.test.js @@ -9,9 +9,7 @@ describe("Components: Badge", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -22,9 +20,7 @@ describe("Components: Badge", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -36,9 +32,7 @@ describe("Components: Badge", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -50,9 +44,7 @@ describe("Components: Badge", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); diff --git a/src/App/Documentation/components/Breadcrumb/index.test.js b/src/App/Documentation/components/Breadcrumb/index.test.js index 055a8a818..90c4b7ad4 100644 --- a/src/App/Documentation/components/Breadcrumb/index.test.js +++ b/src/App/Documentation/components/Breadcrumb/index.test.js @@ -9,9 +9,7 @@ describe("Documentation: Breadcrumb", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -22,9 +20,7 @@ describe("Documentation: Breadcrumb", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -36,9 +32,7 @@ describe("Documentation: Breadcrumb", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -50,9 +44,7 @@ describe("Documentation: Breadcrumb", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); diff --git a/src/App/Documentation/components/Buttons/index.test.js b/src/App/Documentation/components/Buttons/index.test.js index 8ed1377d2..ef16980c4 100644 --- a/src/App/Documentation/components/Buttons/index.test.js +++ b/src/App/Documentation/components/Buttons/index.test.js @@ -9,9 +9,7 @@ describe("Documentation: Buttons", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -22,9 +20,7 @@ describe("Documentation: Buttons", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -36,9 +32,7 @@ describe("Documentation: Buttons", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -50,9 +44,7 @@ describe("Documentation: Buttons", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -64,9 +56,7 @@ describe("Documentation: Buttons", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -78,9 +68,7 @@ describe("Documentation: Buttons", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -92,9 +80,7 @@ describe("Documentation: Buttons", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -106,9 +92,7 @@ describe("Documentation: Buttons", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -120,9 +104,7 @@ describe("Documentation: Buttons", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -134,9 +116,7 @@ describe("Documentation: Buttons", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -148,9 +128,7 @@ describe("Documentation: Buttons", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); diff --git a/src/App/Documentation/components/Card/index.test.js b/src/App/Documentation/components/Card/index.test.js index 20328825a..b96e85162 100644 --- a/src/App/Documentation/components/Card/index.test.js +++ b/src/App/Documentation/components/Card/index.test.js @@ -9,9 +9,7 @@ describe("Documentation: Card", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -22,9 +20,7 @@ describe("Documentation: Card", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -36,9 +32,7 @@ describe("Documentation: Card", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); diff --git a/src/App/Documentation/components/Datepickers/index.test.js b/src/App/Documentation/components/Datepickers/index.test.js index 9f6af9848..9f31ec341 100644 --- a/src/App/Documentation/components/Datepickers/index.test.js +++ b/src/App/Documentation/components/Datepickers/index.test.js @@ -9,9 +9,7 @@ describe("Documentation: Datepickers", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -22,9 +20,7 @@ describe("Documentation: Datepickers", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -81,9 +77,7 @@ describe("Documentation: Datepickers", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -95,9 +89,7 @@ describe("Documentation: Datepickers", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -124,9 +116,7 @@ describe("Documentation: Datepickers", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -138,9 +128,7 @@ describe("Documentation: Datepickers", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); diff --git a/src/App/Documentation/components/Dialog/index.test.js b/src/App/Documentation/components/Dialog/index.test.js index ebec6b30b..4d0f1091b 100644 --- a/src/App/Documentation/components/Dialog/index.test.js +++ b/src/App/Documentation/components/Dialog/index.test.js @@ -9,9 +9,7 @@ describe("Documentation: Dialog", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -22,9 +20,7 @@ describe("Documentation: Dialog", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -36,9 +32,7 @@ describe("Documentation: Dialog", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); diff --git a/src/App/Documentation/components/Forms/index.test.js b/src/App/Documentation/components/Forms/index.test.js index 084115a81..b9e41e9c0 100644 --- a/src/App/Documentation/components/Forms/index.test.js +++ b/src/App/Documentation/components/Forms/index.test.js @@ -9,9 +9,7 @@ describe("Documentation: Forms", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -22,9 +20,7 @@ describe("Documentation: Forms", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -36,9 +32,7 @@ describe("Documentation: Forms", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -50,9 +44,7 @@ describe("Documentation: Forms", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -64,9 +56,7 @@ describe("Documentation: Forms", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -78,9 +68,7 @@ describe("Documentation: Forms", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -92,9 +80,7 @@ describe("Documentation: Forms", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -106,9 +92,7 @@ describe("Documentation: Forms", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -120,9 +104,7 @@ describe("Documentation: Forms", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -134,9 +116,7 @@ describe("Documentation: Forms", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -148,9 +128,7 @@ describe("Documentation: Forms", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -162,9 +140,7 @@ describe("Documentation: Forms", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -176,9 +152,7 @@ describe("Documentation: Forms", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -190,9 +164,7 @@ describe("Documentation: Forms", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -204,9 +176,7 @@ describe("Documentation: Forms", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); diff --git a/src/App/Documentation/components/InputGroup/index.test.js b/src/App/Documentation/components/InputGroup/index.test.js index 871617594..a78ebb844 100644 --- a/src/App/Documentation/components/InputGroup/index.test.js +++ b/src/App/Documentation/components/InputGroup/index.test.js @@ -9,9 +9,7 @@ describe("Documentation: InputGroup", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -22,9 +20,7 @@ describe("Documentation: InputGroup", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -36,9 +32,7 @@ describe("Documentation: InputGroup", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -50,9 +44,7 @@ describe("Documentation: InputGroup", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -64,9 +56,7 @@ describe("Documentation: InputGroup", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -78,9 +68,7 @@ describe("Documentation: InputGroup", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -92,9 +80,7 @@ describe("Documentation: InputGroup", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -106,9 +92,7 @@ describe("Documentation: InputGroup", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -120,9 +104,7 @@ describe("Documentation: InputGroup", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); diff --git a/src/App/Documentation/components/Loaders/index.test.js b/src/App/Documentation/components/Loaders/index.test.js index c8cf28e55..ca53787d2 100644 --- a/src/App/Documentation/components/Loaders/index.test.js +++ b/src/App/Documentation/components/Loaders/index.test.js @@ -9,9 +9,7 @@ describe("Documentation: Loaders", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -22,9 +20,7 @@ describe("Documentation: Loaders", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -36,9 +32,7 @@ describe("Documentation: Loaders", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -50,9 +44,7 @@ describe("Documentation: Loaders", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -64,9 +56,7 @@ describe("Documentation: Loaders", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -78,9 +68,7 @@ describe("Documentation: Loaders", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -93,9 +81,7 @@ describe("Documentation: Loaders", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); diff --git a/src/App/Documentation/components/MediaObject/index.test.js b/src/App/Documentation/components/MediaObject/index.test.js index 5a1f63927..77dee599e 100644 --- a/src/App/Documentation/components/MediaObject/index.test.js +++ b/src/App/Documentation/components/MediaObject/index.test.js @@ -9,9 +9,7 @@ describe("Documentation: MediaObject", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -22,9 +20,7 @@ describe("Documentation: MediaObject", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -36,9 +32,7 @@ describe("Documentation: MediaObject", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -50,9 +44,7 @@ describe("Documentation: MediaObject", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); diff --git a/src/App/Documentation/components/Modal/index.test.js b/src/App/Documentation/components/Modal/index.test.js index e63133740..4f9388dd1 100644 --- a/src/App/Documentation/components/Modal/index.test.js +++ b/src/App/Documentation/components/Modal/index.test.js @@ -9,9 +9,7 @@ describe("Documentation: Modal", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -22,9 +20,7 @@ describe("Documentation: Modal", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -36,9 +32,7 @@ describe("Documentation: Modal", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -50,9 +44,7 @@ describe("Documentation: Modal", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); diff --git a/src/App/Documentation/components/Pagination/index.js b/src/App/Documentation/components/Pagination/index.js index 8a436f767..baa8090ce 100644 --- a/src/App/Documentation/components/Pagination/index.js +++ b/src/App/Documentation/components/Pagination/index.js @@ -53,9 +53,6 @@ const PaginationText = () => ( ); class Pagination extends Component { - componentDidMount () { - } - render () { return (
    diff --git a/src/App/Documentation/components/Pagination/index.test.js b/src/App/Documentation/components/Pagination/index.test.js index d4d02cd22..01c2b2c83 100644 --- a/src/App/Documentation/components/Pagination/index.test.js +++ b/src/App/Documentation/components/Pagination/index.test.js @@ -9,9 +9,7 @@ describe("Documentation: Pagination", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -22,9 +20,7 @@ describe("Documentation: Pagination", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -36,9 +32,7 @@ describe("Documentation: Pagination", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -50,9 +44,7 @@ describe("Documentation: Pagination", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -64,9 +56,7 @@ describe("Documentation: Pagination", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); diff --git a/src/App/Documentation/components/Panel/index.js b/src/App/Documentation/components/Panel/index.js index f29d4df14..cdad92f2e 100644 --- a/src/App/Documentation/components/Panel/index.js +++ b/src/App/Documentation/components/Panel/index.js @@ -87,9 +87,6 @@ const PanelText = () => ( ); class Panel extends Component { - componentDidMount () { - } - render () { return (
    diff --git a/src/App/Documentation/components/Panel/index.test.js b/src/App/Documentation/components/Panel/index.test.js index 304cd6072..1f3f44cad 100644 --- a/src/App/Documentation/components/Panel/index.test.js +++ b/src/App/Documentation/components/Panel/index.test.js @@ -10,9 +10,7 @@ describe("Documentation: Panel", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -23,9 +21,7 @@ describe("Documentation: Panel", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -37,9 +33,7 @@ describe("Documentation: Panel", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -51,9 +45,7 @@ describe("Documentation: Panel", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -65,9 +57,7 @@ describe("Documentation: Panel", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -79,9 +69,7 @@ describe("Documentation: Panel", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); diff --git a/src/App/Documentation/components/ProgressTracker/index.test.js b/src/App/Documentation/components/ProgressTracker/index.test.js index 3e0db2013..2ee5e7af5 100644 --- a/src/App/Documentation/components/ProgressTracker/index.test.js +++ b/src/App/Documentation/components/ProgressTracker/index.test.js @@ -9,9 +9,7 @@ describe("Documentation: ProgressTracker", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -22,9 +20,7 @@ describe("Documentation: ProgressTracker", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -36,9 +32,7 @@ describe("Documentation: ProgressTracker", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -50,9 +44,7 @@ describe("Documentation: ProgressTracker", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -64,9 +56,7 @@ describe("Documentation: ProgressTracker", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); diff --git a/src/App/Documentation/components/Sheet/index.test.js b/src/App/Documentation/components/Sheet/index.test.js index cc89df800..2f1398b5a 100644 --- a/src/App/Documentation/components/Sheet/index.test.js +++ b/src/App/Documentation/components/Sheet/index.test.js @@ -9,9 +9,7 @@ describe("Documentation: Sheet", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -22,9 +20,7 @@ describe("Documentation: Sheet", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -36,9 +32,7 @@ describe("Documentation: Sheet", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); diff --git a/src/App/Documentation/components/Status/index.js b/src/App/Documentation/components/Status/index.js index 66350005b..93a86e48a 100644 --- a/src/App/Documentation/components/Status/index.js +++ b/src/App/Documentation/components/Status/index.js @@ -51,9 +51,6 @@ const StatusText = () => ( ); class Status extends Component { - componentDidMount () { - } - render () { return (
    diff --git a/src/App/Documentation/components/Status/index.test.js b/src/App/Documentation/components/Status/index.test.js index 34bcd39d8..84c752c84 100644 --- a/src/App/Documentation/components/Status/index.test.js +++ b/src/App/Documentation/components/Status/index.test.js @@ -9,9 +9,7 @@ describe("Documentation: Status", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -22,9 +20,7 @@ describe("Documentation: Status", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -36,9 +32,7 @@ describe("Documentation: Status", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -50,9 +44,7 @@ describe("Documentation: Status", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); diff --git a/src/App/Documentation/components/Tabs/index.test.js b/src/App/Documentation/components/Tabs/index.test.js index 49715ad4f..22e8a6aa6 100644 --- a/src/App/Documentation/components/Tabs/index.test.js +++ b/src/App/Documentation/components/Tabs/index.test.js @@ -9,9 +9,7 @@ describe("Components: Tabs", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -22,9 +20,7 @@ describe("Components: Tabs", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -36,9 +32,7 @@ describe("Components: Tabs", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -50,9 +44,7 @@ describe("Components: Tabs", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -64,9 +56,7 @@ describe("Components: Tabs", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); diff --git a/src/App/Documentation/components/Toast/index.test.js b/src/App/Documentation/components/Toast/index.test.js index b4f8ffb7d..14f26de83 100644 --- a/src/App/Documentation/components/Toast/index.test.js +++ b/src/App/Documentation/components/Toast/index.test.js @@ -9,9 +9,7 @@ describe("Components: Toast", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -22,9 +20,7 @@ describe("Components: Toast", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -36,9 +32,7 @@ describe("Components: Toast", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -50,9 +44,7 @@ describe("Components: Toast", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -64,9 +56,7 @@ describe("Components: Toast", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); diff --git a/src/App/Documentation/components/Tooltips/index.test.js b/src/App/Documentation/components/Tooltips/index.test.js index 72cd3c833..97a383850 100644 --- a/src/App/Documentation/components/Tooltips/index.test.js +++ b/src/App/Documentation/components/Tooltips/index.test.js @@ -9,9 +9,7 @@ describe("Components: Tooltip", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -22,9 +20,7 @@ describe("Components: Tooltip", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -36,9 +32,7 @@ describe("Components: Tooltip", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); diff --git a/src/App/Documentation/components/Topbar/index.js b/src/App/Documentation/components/Topbar/index.js index 07c9c89f7..89bbaf03e 100644 --- a/src/App/Documentation/components/Topbar/index.js +++ b/src/App/Documentation/components/Topbar/index.js @@ -128,6 +128,7 @@ class Topbar extends Component { componentDidMount () { topbar.init(1); } + render () { return (
    diff --git a/src/App/Documentation/components/Topbar/index.test.js b/src/App/Documentation/components/Topbar/index.test.js index 3fcce7d4f..5db514c7a 100644 --- a/src/App/Documentation/components/Topbar/index.test.js +++ b/src/App/Documentation/components/Topbar/index.test.js @@ -9,9 +9,7 @@ describe("Components: Topbar", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -22,9 +20,7 @@ describe("Components: Topbar", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -36,9 +32,7 @@ describe("Components: Topbar", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); diff --git a/src/App/Documentation/components/Well/index.test.js b/src/App/Documentation/components/Well/index.test.js index 7c860efb9..6300a874e 100644 --- a/src/App/Documentation/components/Well/index.test.js +++ b/src/App/Documentation/components/Well/index.test.js @@ -9,9 +9,7 @@ describe("Components: Well", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -22,9 +20,7 @@ describe("Components: Well", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -36,9 +32,7 @@ describe("Components: Well", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -50,9 +44,7 @@ describe("Components: Well", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); diff --git a/src/App/Documentation/core/Breakpoints/index.test.js b/src/App/Documentation/core/Breakpoints/index.test.js index 63c8efcb8..3137bfecb 100644 --- a/src/App/Documentation/core/Breakpoints/index.test.js +++ b/src/App/Documentation/core/Breakpoints/index.test.js @@ -9,9 +9,7 @@ describe("Core: Breakpoints", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -22,9 +20,7 @@ describe("Core: Breakpoints", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -36,9 +32,7 @@ describe("Core: Breakpoints", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); diff --git a/src/App/Documentation/core/Color/ColorPreview.test.js b/src/App/Documentation/core/Color/ColorPreview.test.js index 732e57731..828deb2e4 100644 --- a/src/App/Documentation/core/Color/ColorPreview.test.js +++ b/src/App/Documentation/core/Color/ColorPreview.test.js @@ -9,9 +9,7 @@ describe("Core: Color", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); expect(wrapper.contains(

    test

    )).toBeTruthy(); diff --git a/src/App/Documentation/core/Color/index.test.js b/src/App/Documentation/core/Color/index.test.js index 6c2f2c6f1..22336e4e6 100644 --- a/src/App/Documentation/core/Color/index.test.js +++ b/src/App/Documentation/core/Color/index.test.js @@ -9,25 +9,19 @@ describe("Core: Color", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); it("ColorPalette renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); it("ColorText renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); diff --git a/src/App/Documentation/core/Favicons/index.test.js b/src/App/Documentation/core/Favicons/index.test.js index c31a08d9f..11abadc70 100644 --- a/src/App/Documentation/core/Favicons/index.test.js +++ b/src/App/Documentation/core/Favicons/index.test.js @@ -9,33 +9,25 @@ describe("Core: Favicons", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); it("OurFavicon renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); it("Usage renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); it("FaviconsText renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); diff --git a/src/App/Documentation/core/Grid/index.test.js b/src/App/Documentation/core/Grid/index.test.js index 1cb5d70b3..a23957195 100644 --- a/src/App/Documentation/core/Grid/index.test.js +++ b/src/App/Documentation/core/Grid/index.test.js @@ -9,9 +9,7 @@ describe("Core: Grid", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -22,9 +20,7 @@ describe("Core: Grid", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -36,9 +32,7 @@ describe("Core: Grid", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -50,9 +44,7 @@ describe("Core: Grid", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -64,9 +56,7 @@ describe("Core: Grid", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); diff --git a/src/App/Documentation/core/Icons/index.test.js b/src/App/Documentation/core/Icons/index.test.js index 8dbd556f6..eb281e2a2 100644 --- a/src/App/Documentation/core/Icons/index.test.js +++ b/src/App/Documentation/core/Icons/index.test.js @@ -9,9 +9,7 @@ describe("Core: Icons", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -22,9 +20,7 @@ describe("Core: Icons", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -36,9 +32,7 @@ describe("Core: Icons", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); diff --git a/src/App/Documentation/core/Lists/index.js b/src/App/Documentation/core/Lists/index.js index ad3040b3e..19db732aa 100644 --- a/src/App/Documentation/core/Lists/index.js +++ b/src/App/Documentation/core/Lists/index.js @@ -33,7 +33,6 @@ const BasicList = () => ( ); - const InlineList = () => ( <>

    Inline list

    @@ -186,6 +185,7 @@ class Lists extends Component { componentDidMount () { actionList.init(); } + render (){ return (
    @@ -197,6 +197,7 @@ class Lists extends Component { ); } } + export default Lists; /* for testing */ diff --git a/src/App/Documentation/core/Lists/index.test.js b/src/App/Documentation/core/Lists/index.test.js index 0f35d6c15..22411de89 100644 --- a/src/App/Documentation/core/Lists/index.test.js +++ b/src/App/Documentation/core/Lists/index.test.js @@ -9,9 +9,7 @@ describe("Documentation: Lists", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -22,9 +20,7 @@ describe("Documentation: Lists", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -36,9 +32,7 @@ describe("Documentation: Lists", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -50,9 +44,7 @@ describe("Documentation: Lists", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -64,9 +56,7 @@ describe("Documentation: Lists", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -78,9 +68,7 @@ describe("Documentation: Lists", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); diff --git a/src/App/Documentation/core/Tables/index.test.js b/src/App/Documentation/core/Tables/index.test.js index 720d6146b..ffa787722 100644 --- a/src/App/Documentation/core/Tables/index.test.js +++ b/src/App/Documentation/core/Tables/index.test.js @@ -9,9 +9,7 @@ describe("Documentation: Table", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(
    ); expect(wrapper).toMatchSnapshot(); }); @@ -22,9 +20,7 @@ describe("Documentation: Table", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -36,9 +32,7 @@ describe("Documentation: Table", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -50,9 +44,7 @@ describe("Documentation: Table", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -64,9 +56,7 @@ describe("Documentation: Table", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -78,9 +68,7 @@ describe("Documentation: Table", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -92,9 +80,7 @@ describe("Documentation: Table", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); diff --git a/src/App/Documentation/core/Typography/index.test.js b/src/App/Documentation/core/Typography/index.test.js index 9d3180466..f0f239ecb 100644 --- a/src/App/Documentation/core/Typography/index.test.js +++ b/src/App/Documentation/core/Typography/index.test.js @@ -10,9 +10,7 @@ describe("Core: Typography", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -23,9 +21,7 @@ describe("Core: Typography", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -37,9 +33,7 @@ describe("Core: Typography", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -51,9 +45,7 @@ describe("Core: Typography", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -65,9 +57,7 @@ describe("Core: Typography", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -79,9 +69,7 @@ describe("Core: Typography", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -93,9 +81,7 @@ describe("Core: Typography", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -107,9 +93,7 @@ describe("Core: Typography", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -121,15 +105,11 @@ describe("Core: Typography", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); if (Blockquotes().props.children) { Blockquotes().props.children.map(Child => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -145,9 +125,7 @@ describe("Core: Typography", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); diff --git a/src/App/Documentation/getting-started/BrowserSupport/BrowserIcons.test.js b/src/App/Documentation/getting-started/BrowserSupport/BrowserIcons.test.js index 278f9f7f5..70bb0ea10 100644 --- a/src/App/Documentation/getting-started/BrowserSupport/BrowserIcons.test.js +++ b/src/App/Documentation/getting-started/BrowserSupport/BrowserIcons.test.js @@ -10,9 +10,7 @@ describe("BrowserSupport: BrowserIcons", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -24,9 +22,7 @@ describe("BrowserSupport: BrowserIcons", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -38,9 +34,7 @@ describe("BrowserSupport: BrowserIcons", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -52,9 +46,7 @@ describe("BrowserSupport: BrowserIcons", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -66,9 +58,7 @@ describe("BrowserSupport: BrowserIcons", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -80,9 +70,7 @@ describe("BrowserSupport: BrowserIcons", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); diff --git a/src/App/Documentation/getting-started/BrowserSupport/index.test.js b/src/App/Documentation/getting-started/BrowserSupport/index.test.js index 3ef6cb0b4..44e591653 100644 --- a/src/App/Documentation/getting-started/BrowserSupport/index.test.js +++ b/src/App/Documentation/getting-started/BrowserSupport/index.test.js @@ -9,9 +9,7 @@ describe("GettingStarted: BrowserSupport", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); diff --git a/src/App/Documentation/getting-started/Contributing/index.test.js b/src/App/Documentation/getting-started/Contributing/index.test.js index d188db6ff..96169ed37 100644 --- a/src/App/Documentation/getting-started/Contributing/index.test.js +++ b/src/App/Documentation/getting-started/Contributing/index.test.js @@ -10,9 +10,7 @@ describe("GettingStarted: Contributing", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -23,9 +21,7 @@ describe("GettingStarted: Contributing", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -37,9 +33,7 @@ describe("GettingStarted: Contributing", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -51,9 +45,7 @@ describe("GettingStarted: Contributing", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -65,15 +57,11 @@ describe("GettingStarted: Contributing", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); if (AddingStyles().props.children) { AddingStyles().props.children.map(Child => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -89,15 +77,11 @@ describe("GettingStarted: Contributing", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); if (AddingJavaScript().props.children) { AddingJavaScript().props.children.map(Child => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -113,9 +97,7 @@ describe("GettingStarted: Contributing", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); diff --git a/src/App/Documentation/getting-started/Introduction/index.test.js b/src/App/Documentation/getting-started/Introduction/index.test.js index f8beeac7f..5af8d7a60 100644 --- a/src/App/Documentation/getting-started/Introduction/index.test.js +++ b/src/App/Documentation/getting-started/Introduction/index.test.js @@ -9,9 +9,7 @@ describe("GettingStarted: Introduction", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -22,9 +20,7 @@ describe("GettingStarted: Introduction", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -36,9 +32,7 @@ describe("GettingStarted: Introduction", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -50,9 +44,7 @@ describe("GettingStarted: Introduction", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -64,9 +56,7 @@ describe("GettingStarted: Introduction", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -78,9 +68,7 @@ describe("GettingStarted: Introduction", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); diff --git a/src/App/Documentation/index.test.js b/src/App/Documentation/index.test.js index 269b045ec..dcaf6cfd4 100644 --- a/src/App/Documentation/index.test.js +++ b/src/App/Documentation/index.test.js @@ -9,9 +9,7 @@ describe("Documentation: index", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); diff --git a/src/App/Documentation/utilities/Colors/index.test.js b/src/App/Documentation/utilities/Colors/index.test.js index 6f620359f..e8a9b5533 100644 --- a/src/App/Documentation/utilities/Colors/index.test.js +++ b/src/App/Documentation/utilities/Colors/index.test.js @@ -9,33 +9,25 @@ describe("Utilities: Colors", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); it("TextColors renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); it("BackgroundColors renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); it("ColorsText renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); diff --git a/src/App/Documentation/utilities/Display/index.test.js b/src/App/Documentation/utilities/Display/index.test.js index 32711877c..0b1274123 100644 --- a/src/App/Documentation/utilities/Display/index.test.js +++ b/src/App/Documentation/utilities/Display/index.test.js @@ -9,9 +9,7 @@ describe("Utilities: Display", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -22,9 +20,7 @@ describe("Utilities: Display", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -36,9 +32,7 @@ describe("Utilities: Display", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -50,9 +44,7 @@ describe("Utilities: Display", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -64,9 +56,7 @@ describe("Utilities: Display", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -78,9 +68,7 @@ describe("Utilities: Display", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); diff --git a/src/App/Documentation/utilities/Visibility/index.test.js b/src/App/Documentation/utilities/Visibility/index.test.js index 8a3fbf12a..bb2e443f1 100644 --- a/src/App/Documentation/utilities/Visibility/index.test.js +++ b/src/App/Documentation/utilities/Visibility/index.test.js @@ -9,9 +9,7 @@ describe("Utilities: Visibility", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -22,9 +20,7 @@ describe("Utilities: Visibility", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); @@ -36,9 +32,7 @@ describe("Utilities: Visibility", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); diff --git a/src/App/Documentation/utils/Attribute/index.test.js b/src/App/Documentation/utils/Attribute/index.test.js index 0ec5ffa2c..6ae3472e4 100644 --- a/src/App/Documentation/utils/Attribute/index.test.js +++ b/src/App/Documentation/utils/Attribute/index.test.js @@ -10,18 +10,14 @@ describe("Utilities: Attribute", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); expect(wrapper.contains(test)).toEqual(true); }); it("renders data attribute", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); expect(wrapper.html()).toContain("data"); diff --git a/src/App/Documentation/utils/ComponentPreview/index.js b/src/App/Documentation/utils/ComponentPreview/index.js index 470e1d2cf..9326ae672 100644 --- a/src/App/Documentation/utils/ComponentPreview/index.js +++ b/src/App/Documentation/utils/ComponentPreview/index.js @@ -9,6 +9,7 @@ import jsbeautifier from "js-beautify"; const ComponentPreview = ({ children, language, removeOuterTag, hideValue, removeList, showCasePanel, codeFigure, dangerousHTML }) => { const _removeOuterTag = element => { const div = document.createElement("div"); + div.innerHTML = renderToStaticMarkup(element); if (div.firstElementChild) { @@ -16,11 +17,14 @@ const ComponentPreview = ({ children, language, removeOuterTag, hideValue, remov } else if (div.firstChild) { return div.firstChild.nodeValue; } + + return "Check ComponentPreview _removeOuterTag!"; }; const _removeList = element => { const div = document.createElement("div"); + div.innerHTML = renderToStaticMarkup(element); const listElements = div.querySelectorAll("li"); @@ -44,11 +48,14 @@ const ComponentPreview = ({ children, language, removeOuterTag, hideValue, remov const setDangerousHtml = val => { let code = ""; + if (typeof val.forEach === "function") { val.forEach(v => code += `${v}\n`); } else { code = val; } + + return code; }; @@ -80,9 +87,11 @@ const ComponentPreview = ({ children, language, removeOuterTag, hideValue, remov switch (typeof children) { case "string": code = children; + break; case "object": children.forEach(child => code += child); + break; default: console.warn("CodeFigure: children needs attention!"); @@ -93,12 +102,15 @@ const ComponentPreview = ({ children, language, removeOuterTag, hideValue, remov case "html": code = jsbeautifier.html_beautify(code); code = _removeEmpty(code); + if (hideValue) { code = code.replace(/ value="(.*)"/g, ""); } + break; case "css": code = jsbeautifier.css_beautify(code); + break; case "javascript": // This is not needed, and for some reason crashes after a prod build [EH] diff --git a/src/App/Documentation/utils/ComponentPreview/index.test.js b/src/App/Documentation/utils/ComponentPreview/index.test.js index ea89e4975..6f8311a05 100644 --- a/src/App/Documentation/utils/ComponentPreview/index.test.js +++ b/src/App/Documentation/utils/ComponentPreview/index.test.js @@ -48,11 +48,9 @@ describe("Utilities: ComponentPreview", () => { }); it("does not render showCasePanel when prop is false/not provided", () => { - const wrapper = mount( - - - - ); + const wrapper = mount( + + ); expect(wrapper).toMatchSnapshot(); expect(wrapper.html()).not.toContain("showcase-panel"); diff --git a/src/App/Documentation/utils/DocHeading/index.js b/src/App/Documentation/utils/DocHeading/index.js index 690b462dc..13c867132 100644 --- a/src/App/Documentation/utils/DocHeading/index.js +++ b/src/App/Documentation/utils/DocHeading/index.js @@ -13,6 +13,7 @@ const _generateTitle = path => path.match(/[^/]*$/)[0] const DocHeading = ({ location }) => { const title = _generateTitle(location.pathname); + _setTitle(title); return

    {title}

    ; diff --git a/src/App/Documentation/utils/DocToc/index.js b/src/App/Documentation/utils/DocToc/index.js index c3eb71cc7..f8301769a 100644 --- a/src/App/Documentation/utils/DocToc/index.js +++ b/src/App/Documentation/utils/DocToc/index.js @@ -9,44 +9,37 @@ const _findHeadings = children => { children.map(child => { if (child.type.name !== "ExperimentalComponentAlert" && typeof child.type === "function") { if (child.type().props.children.type === "h2") { - headings.push( - { - title: child.type().props.children.props.children, - id: child.type().props.children.props.id - } - ); + headings.push({ + title: child.type().props.children.props.children, + id: child.type().props.children.props.id + }); } else { const firstChild = child.type().props.children[0]; if (firstChild.type === "h2") { - headings.push( - { - title: firstChild.props.children, - id: firstChild.props.id - } - ); + headings.push({ + title: firstChild.props.children, + id: firstChild.props.id + }); } else if (typeof firstChild.type === "function") { const secondFirstChild = firstChild.type().props.children[0]; // Really clever namegiving + if (secondFirstChild.type === "h2") { - headings.push( - { - title: secondFirstChild.props.children, - id: secondFirstChild.props.id - } - ); + headings.push({ + title: secondFirstChild.props.children, + id: secondFirstChild.props.id + }); } } } } else if (child.type === "h2") { - headings.push( - { - title: child.props.children, - id: child.props.id - } - ); + headings.push({ + title: child.props.children, + id: child.props.id + }); } }); } diff --git a/src/App/Documentation/utils/Icon/index.test.js b/src/App/Documentation/utils/Icon/index.test.js index 988b1d991..5595c4bd8 100644 --- a/src/App/Documentation/utils/Icon/index.test.js +++ b/src/App/Documentation/utils/Icon/index.test.js @@ -9,9 +9,7 @@ describe("Utilities: Icon", () => { }); it("renders correct icon", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); expect(wrapper.contains(test)).toEqual(true); diff --git a/src/App/Documentation/utils/PxScript/index.test.js b/src/App/Documentation/utils/PxScript/index.test.js index 493801ce9..baa3a7d5f 100644 --- a/src/App/Documentation/utils/PxScript/index.test.js +++ b/src/App/Documentation/utils/PxScript/index.test.js @@ -10,9 +10,7 @@ describe("Utilities: PxScript", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); expect(wrapper.contains(test)).toEqual(true); @@ -20,9 +18,7 @@ describe("Utilities: PxScript", () => { }); it("renders with subcomponents", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); expect(wrapper.contains(test)).toEqual(true); @@ -31,9 +27,7 @@ describe("Utilities: PxScript", () => { }); it("renders with multiple subcomponents", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); expect(wrapper.contains(test)).toEqual(true); @@ -43,9 +37,7 @@ describe("Utilities: PxScript", () => { }); it("renders with params", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); expect(wrapper.contains(test)).toEqual(true); @@ -54,9 +46,7 @@ describe("Utilities: PxScript", () => { }); it("renders with multiple params", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); expect(wrapper.contains(test)).toEqual(true); diff --git a/src/App/Documentation/utils/RenderRoutes/index.js b/src/App/Documentation/utils/RenderRoutes/index.js index 1019925e5..0fb48f6e7 100644 --- a/src/App/Documentation/utils/RenderRoutes/index.js +++ b/src/App/Documentation/utils/RenderRoutes/index.js @@ -8,6 +8,7 @@ const RenderRoutes = ({ path, redirect, routes }) => { }/> {routes.map((route, i) => { const { path, component } = route; + return } />; })} diff --git a/src/App/ErrorPage404/index.test.js b/src/App/ErrorPage404/index.test.js index a401b89c0..50d2faed1 100644 --- a/src/App/ErrorPage404/index.test.js +++ b/src/App/ErrorPage404/index.test.js @@ -9,9 +9,7 @@ describe("ErrorPage404: index", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); diff --git a/src/App/Examples/index.test.js b/src/App/Examples/index.test.js index 2e5d45043..e57db598f 100644 --- a/src/App/Examples/index.test.js +++ b/src/App/Examples/index.test.js @@ -9,9 +9,7 @@ describe("Examples: index", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); diff --git a/src/App/Home/index.test.js b/src/App/Home/index.test.js index 34b8fa1aa..1ff9f91c0 100644 --- a/src/App/Home/index.test.js +++ b/src/App/Home/index.test.js @@ -9,9 +9,7 @@ describe("Home: index", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); diff --git a/src/App/Templates/index.test.js b/src/App/Templates/index.test.js index 97519e1c2..bf54ed859 100644 --- a/src/App/Templates/index.test.js +++ b/src/App/Templates/index.test.js @@ -9,9 +9,7 @@ describe("Templates: index", () => { }); it("renders", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); diff --git a/src/App/components/Alert/index.test.js b/src/App/components/Alert/index.test.js index 4fd546e2d..6cc1c6069 100644 --- a/src/App/components/Alert/index.test.js +++ b/src/App/components/Alert/index.test.js @@ -11,72 +11,56 @@ describe("Component: Alert", () => { it("prop type is marked as required", () => { console.error = jest.fn(); - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); expect(console.error).toHaveBeenCalled(); }); it("renders an alert with the correct type recieved from its props", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); expect(wrapper.html()).toContain("alert-test"); }); it("renders an alert with icon", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); expect(wrapper.contains(test)).toEqual(true); }); it("renders an alert without an icon if no icon prop is provided", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); expect(wrapper.contains(test)).toEqual(false); }); it("renders an alert with a close-button", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); expect(wrapper.html()).toContain("data-alert-close"); }); it("renders an alert without a close-button if no close prop is provided", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); expect(wrapper.contains(close)).toEqual(false); }); it("renders an alert with text", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); expect(wrapper.contains(

    test

    )).toEqual(true); }); it("renders an alert without text if no text prop is provided", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); expect(wrapper.contains(

    test

    )).toEqual(false); diff --git a/src/App/components/Breadcrumb/index.test.js b/src/App/components/Breadcrumb/index.test.js index 040d10cf0..70b268eac 100644 --- a/src/App/components/Breadcrumb/index.test.js +++ b/src/App/components/Breadcrumb/index.test.js @@ -9,9 +9,7 @@ describe("Component: Breadcrumb", () => { }); it("renders with default items when no items is provided through items prop", () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); expect(wrapper.html()).toContain("breadcrumb"); @@ -21,9 +19,7 @@ describe("Component: Breadcrumb", () => { it("renders breadcrumb with the provided items in the items prop", () => { const items = [{ title: "test" }]; - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); expect(wrapper.contains(
    1. test
    )).toEqual(true); @@ -37,9 +33,7 @@ describe("Component: Breadcrumb", () => { } ]; - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); expect(wrapper.contains(
    1. test
    )).toEqual(true); @@ -53,9 +47,7 @@ describe("Component: Breadcrumb", () => { { title: "test #4" } ]; - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); expect(wrapper.contains(test #1)).toEqual(true); diff --git a/src/App/components/Button/index.js b/src/App/components/Button/index.js index d49334b9d..c4739df28 100644 --- a/src/App/components/Button/index.js +++ b/src/App/components/Button/index.js @@ -24,14 +24,18 @@ const Button = ({ label, id, name, value, href, icon, loading, type, disabled, b href ? attrs.role = "button" : attrs.type = btnType || "button"; - if (href) return ( - {icon ? "\n\t" : null} - {icon ? {icon} : null} - {(icon && label) ? {label} : label} - - ); + if (href) { + return ( + {icon ? "\n\t" : null} + {icon ? {icon} : null} + {(icon && label) ? {label} : label} + + ); + } - if (input) return ; + if (input) { + return ; + } return ( )).toEqual(true); }); it("renders a button with an icon when prop icon is provided", () => { - const wrapper = shallow( - - + - - + + - - + + - + + + + + + + `; From 7d6df7a81b9b24e468601a8426935a31c767bccd Mon Sep 17 00:00:00 2001 From: Erik Hallaraaker Date: Thu, 27 Sep 2018 14:51:39 +0200 Subject: [PATCH 035/159] More eslint config and cleanup --- .eslintrc | 38 ++++++++++++++++--- CHANGELOG.md | 7 +++- src/App/Documentation/SelectPanel.js | 2 +- src/App/Documentation/SelectPanel.test.js | 2 +- .../components/ActionList/index.js | 2 +- .../Documentation/components/Alerts/index.js | 2 +- .../Documentation/components/Badge/index.js | 2 +- .../components/Breadcrumb/index.js | 2 +- .../Documentation/components/Buttons/index.js | 2 +- .../Documentation/components/Card/index.js | 2 +- .../components/Datepickers/index.js | 2 +- .../Documentation/components/Dialog/index.js | 2 +- .../Documentation/components/Forms/index.js | 2 +- .../components/InputGroup/index.js | 2 +- .../Documentation/components/Loaders/index.js | 2 +- .../components/MediaObject/index.js | 2 +- .../Documentation/components/Modal/index.js | 2 +- .../components/Pagination/index.js | 2 +- .../Documentation/components/Panel/index.js | 2 +- .../components/Panel/index.test.js | 3 +- .../components/ProgressTracker/index.js | 2 +- .../Documentation/components/Sheet/index.js | 2 +- .../Documentation/components/Status/index.js | 2 +- .../Documentation/components/Tabs/index.js | 2 +- .../Documentation/components/Toast/index.js | 2 +- .../components/Tooltips/index.js | 2 +- .../Documentation/components/Topbar/index.js | 13 +++++-- .../Documentation/components/Well/index.js | 2 +- .../Documentation/core/Breakpoints/index.js | 2 +- .../Documentation/core/Color/ColorPreview.js | 14 +++---- src/App/Documentation/core/Color/index.js | 18 ++++----- src/App/Documentation/core/Favicons/index.js | 18 ++++----- src/App/Documentation/core/Grid/index.js | 18 ++++----- src/App/Documentation/core/Icons/index.js | 18 ++++----- src/App/Documentation/core/Lists/index.js | 5 +-- src/App/Documentation/core/Tables/index.js | 18 ++++----- .../Documentation/core/Typography/index.js | 4 +- .../getting-started/Contributing/index.js | 6 +-- .../getting-started/Introduction/index.js | 2 +- .../Documentation/utilities/Colors/index.js | 2 +- .../Documentation/utilities/Display/index.js | 3 +- .../utilities/Visibility/index.js | 2 +- .../utils/ComponentPreview/index.js | 3 -- src/App/Documentation/utils/PxScript/index.js | 3 +- .../Documentation/utils/RenderRoutes/index.js | 22 +++++------ src/App/components/Breadcrumb/index.js | 2 +- .../FormComponents/FormControlText.js | 14 +++---- src/App/components/InputGroup/index.js | 12 +++--- src/App/components/Pagination/index.js | 3 +- src/App/components/ProgressTracker/index.js | 2 +- src/App/components/Tabs/index.js | 1 - src/App/components/Topbar/index.js | 20 +++++----- src/App/index.js | 6 ++- src/index.js | 2 +- src/px-script/datepicker/index.test.js | 2 +- src/px-script/dialog/index.js | 6 +-- src/px-script/index.js | 2 +- src/px-script/modal/index.js | 2 +- src/px-script/rangeslider/index.js | 2 +- src/px-script/script/index.test.js | 2 +- src/px-script/sheet/index.js | 6 +-- src/px-script/topbar/index.js | 4 +- src/px-script/utils/index.js | 6 +-- src/px-script/validation/index.js | 5 +-- 64 files changed, 187 insertions(+), 179 deletions(-) diff --git a/.eslintrc b/.eslintrc index d6851fef8..8c15b4b62 100644 --- a/.eslintrc +++ b/.eslintrc @@ -36,15 +36,18 @@ } }, "rules": { + "arrow-body-style": ["error", "as-needed"], "array-bracket-spacing": ["warn"], + "arrow-parens": ["error", "as-needed"], "arrow-spacing": ["error"], - "implicit-arrow-linebreak": ["error", "beside"], "babel/new-cap": 0, "babel/no-invalid-this": 1, "babel/object-curly-spacing": ["warn", "always"], "babel/quotes": ["error", "double"], "babel/semi": ["error"], + "block-spacing": ["error", "always"], "block-scoped-var": ["warn"], + "brace-style": ["error", "1tbs", { "allowSingleLine": true }], "camelcase": ["warn"], "comma-dangle": ["warn", "never"], "comma-spacing": ["warn"], @@ -52,10 +55,13 @@ "computed-property-spacing": ["warn"], "constructor-super": ["error"], "curly": ["error", "all"], + "default-case": ["error"], + "dot-notation": ["error"], "eol-last": ["error"], "eqeqeq": ["error"], "func-call-spacing": ["warn"], "func-style": ["error", "expression"], + "implicit-arrow-linebreak": ["error", "beside"], "indent": ["error", 4, { "SwitchCase": 1 }], "jsx-quotes": ["error", "prefer-double"], "key-spacing": ["warn"], @@ -63,33 +69,44 @@ "linebreak-style": 0, "lines-between-class-members": ["error"], "new-cap": 0, + "new-parens": ["error"], "newline-before-return": ["error"], "newline-per-chained-call": ["warn"], "no-alert": ["error"], "no-console": ["warn", { "allow": ["warn", "error"] }], "no-const-assign": ["error"], + "no-dupe-class-members": ["error"], + "no-duplicate-imports": ["error"], "no-empty-function": ["error"], + "no-eval": ["error"], "no-extra-semi": ["error"], - "no-dupe-class-members": ["error"], + "no-floating-decimal": ["error"], "no-inner-declarations": 0, "no-invalid-regexp": ["error"], "no-irregular-whitespace": ["error"], + "no-lonely-if": ["error"], "no-mixed-spaces-and-tabs": ["error"], "no-multi-spaces": ["warn"], - "no-multiple-empty-lines": ["error"], + "no-multiple-empty-lines": ["error", { "max": 1 }], "no-redeclare": ["warn"], "no-this-before-super": ["warn"], "no-trailing-spaces": ["error"], "no-undef": ["error"], - "no-unneeded-ternary": ["warn"], + "no-undef-init": ["error"], + "no-unneeded-ternary": ["error"], "no-unreachable": ["error"], "no-unused-vars": ["warn"], + "no-useless-constructor": ["error"], + "no-useless-rename": ["error"], + "no-useless-return": ["error"], "no-var": ["error"], "no-whitespace-before-property": ["warn"], "node/exports-style": ["error", "module.exports"], "object-curly-newline": ["warn"], "object-curly-spacing": ["warn", "always"], "object-property-newline": ["warn"], + "object-shorthand": ["error", "always", { "avoidExplicitReturnArrows": true }], + "one-var": ["error", "never"], "padding-line-between-statements": ["error", { "blankLine": "always", @@ -117,20 +134,29 @@ "next": ["let", "const"] } ], - "prefer-const": ["warn"], + "prefer-arrow-callback": ["error"], + "prefer-const": ["error"], + "prefer-destructuring": ["error", { "array": false }], + "prefer-object-spread": ["error"], "prefer-spread": ["warn"], + "prefer-template": ["error"], + "quote-props": ["error", "as-needed"], "quotes": 0, "react/prop-types": 0, + "rest-spread-spacing": ["error", "never"], "security/detect-non-literal-regexp": 0, "security/detect-object-injection": 0, "security/detect-unsafe-regex": 0, "semi": 0, "semi-spacing": ["warn"], - "semi-style": ["warn"], + "semi-style": ["error"], + "space-before-blocks": ["error"], "space-before-function-paren": ["error"], "space-in-parens": ["warn"], "space-infix-ops": ["warn"], "spaced-comment": ["error"], + "switch-colon-spacing": ["error"], + "template-curly-spacing": ["error", "never"], "wrap-regex": ["error"] } } diff --git a/CHANGELOG.md b/CHANGELOG.md index 931947086..32869760d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,11 +1,16 @@ # Changelog -## [0.1x.x] - 2018-0x-xx +## [0.1x.x] - 2018-xx-xx ### Added ### Changed +- Updated readme with deploy/release procedure. + ### Fixed +- Fixed issue with item-list alignment. +- Fixed issue with action list icon being visible through topbar. + ### Removed diff --git a/src/App/Documentation/SelectPanel.js b/src/App/Documentation/SelectPanel.js index 4d61261a9..95808f251 100644 --- a/src/App/Documentation/SelectPanel.js +++ b/src/App/Documentation/SelectPanel.js @@ -66,5 +66,5 @@ const SelectPanel = () => ( export default withRouter(SelectPanel); -/* for testing */ +/* For testing */ export { SearchBox }; diff --git a/src/App/Documentation/SelectPanel.test.js b/src/App/Documentation/SelectPanel.test.js index e1a93462c..c5e4edb3f 100644 --- a/src/App/Documentation/SelectPanel.test.js +++ b/src/App/Documentation/SelectPanel.test.js @@ -14,7 +14,7 @@ describe("Documentation: SelectPanel", () => { // // ); - // expect(wrapper).toMatchSnapshot(); + // Expect(wrapper).toMatchSnapshot(); // }); describe("SearchBox", () => { diff --git a/src/App/Documentation/components/ActionList/index.js b/src/App/Documentation/components/ActionList/index.js index 33af86622..fdb19921c 100644 --- a/src/App/Documentation/components/ActionList/index.js +++ b/src/App/Documentation/components/ActionList/index.js @@ -95,5 +95,5 @@ class ActionList extends Component { export default ActionList; -/* for testing */ +/* For testing */ export { Overview, Anchorpoints, ActionListText }; diff --git a/src/App/Documentation/components/Alerts/index.js b/src/App/Documentation/components/Alerts/index.js index ea409e0c2..bb308cc01 100644 --- a/src/App/Documentation/components/Alerts/index.js +++ b/src/App/Documentation/components/Alerts/index.js @@ -103,5 +103,5 @@ class Alerts extends Component { export default Alerts; -/* for testing */ +/* For testing */ export { BasicUsage, AlertWithIcon, ClosingTheAlert, ExtendedUsage, AlertsText }; diff --git a/src/App/Documentation/components/Badge/index.js b/src/App/Documentation/components/Badge/index.js index f8cf2c9cc..dfb9c056d 100644 --- a/src/App/Documentation/components/Badge/index.js +++ b/src/App/Documentation/components/Badge/index.js @@ -51,5 +51,5 @@ const Badge = () => ( export default Badge; -/* for testing */ +/* For testing */ export { Overview, FurtherUsage, BadgeText }; diff --git a/src/App/Documentation/components/Breadcrumb/index.js b/src/App/Documentation/components/Breadcrumb/index.js index e8e3cbf5d..0bac18fbf 100644 --- a/src/App/Documentation/components/Breadcrumb/index.js +++ b/src/App/Documentation/components/Breadcrumb/index.js @@ -76,5 +76,5 @@ const Breadcrumb = () => ( export default Breadcrumb; -/* for testing */ +/* For testing */ export { BasicBreadCrumb, DisabledBreadcrumb, BreadcrumbText }; diff --git a/src/App/Documentation/components/Buttons/index.js b/src/App/Documentation/components/Buttons/index.js index fdff917eb..419600fc0 100644 --- a/src/App/Documentation/components/Buttons/index.js +++ b/src/App/Documentation/components/Buttons/index.js @@ -246,5 +246,5 @@ class Buttons extends Component { export default Buttons; -/* for testing */ +/* For testing */ export { Examples, UsageWithOtherTags, OutlineButtons, Sizes, ActiveState, DisabledState, UsageWithIcons, ButtonLoader, UsageWithJavascript, ButtonsText }; diff --git a/src/App/Documentation/components/Card/index.js b/src/App/Documentation/components/Card/index.js index 50665ae6f..64f1d021a 100644 --- a/src/App/Documentation/components/Card/index.js +++ b/src/App/Documentation/components/Card/index.js @@ -81,5 +81,5 @@ class Card extends Component { export default Card; -/* for testing */ +/* For testing */ export { Overview, CardText }; diff --git a/src/App/Documentation/components/Datepickers/index.js b/src/App/Documentation/components/Datepickers/index.js index 19d74affb..ede3b88c2 100644 --- a/src/App/Documentation/components/Datepickers/index.js +++ b/src/App/Documentation/components/Datepickers/index.js @@ -225,5 +225,5 @@ class Datepickers extends Component { export default Datepickers; -/* for testing */ +/* For testing */ export { SimpleDatepicker, InitialValue, CustomFormat, IncludeTime, Required, ShowingMultipleMonths, DateRange, Options, DatepickersText }; diff --git a/src/App/Documentation/components/Dialog/index.js b/src/App/Documentation/components/Dialog/index.js index 4e1e33d3b..dc653bfe4 100644 --- a/src/App/Documentation/components/Dialog/index.js +++ b/src/App/Documentation/components/Dialog/index.js @@ -56,5 +56,5 @@ class Dialog extends Component { export default Dialog; -/* for testing */ +/* For testing */ export { Example, DialogText }; diff --git a/src/App/Documentation/components/Forms/index.js b/src/App/Documentation/components/Forms/index.js index 03835af80..12a6708fd 100644 --- a/src/App/Documentation/components/Forms/index.js +++ b/src/App/Documentation/components/Forms/index.js @@ -323,5 +323,5 @@ class Forms extends Component { export default Forms; -/* for testing */ +/* For testing */ export { Overview, FormGrid, Validation, UsageWithFieldsets, StaticText, Checkboxes, DisabledCheckboxes, RadioButtons, DisabledRadioButtons, Toggleboxes, DisabledToggleboxes, RangeSlider, DisabledRangeSlider, FormsText }; diff --git a/src/App/Documentation/components/InputGroup/index.js b/src/App/Documentation/components/InputGroup/index.js index e0738dd57..01f038b7a 100644 --- a/src/App/Documentation/components/InputGroup/index.js +++ b/src/App/Documentation/components/InputGroup/index.js @@ -213,5 +213,5 @@ class InputGroup extends Component { export default InputGroup; -/* for testing */ +/* For testing */ export { BasicExample, CheckboxesAndRadios, ButtonAddons, WithSelect, WithFeedbackIcon, ValidationStates, Disabled, InputGroupText }; diff --git a/src/App/Documentation/components/Loaders/index.js b/src/App/Documentation/components/Loaders/index.js index 38575b012..f0c2381fc 100644 --- a/src/App/Documentation/components/Loaders/index.js +++ b/src/App/Documentation/components/Loaders/index.js @@ -147,5 +147,5 @@ class Loaders extends Component { export default Loaders; -/* for testing */ +/* For testing */ export { BasicUsage, Sizes, MutedLoader, StaticHtml, UsageWithJavascript, LoadersText }; diff --git a/src/App/Documentation/components/MediaObject/index.js b/src/App/Documentation/components/MediaObject/index.js index dd7ac9d0f..5fd1bb6b3 100644 --- a/src/App/Documentation/components/MediaObject/index.js +++ b/src/App/Documentation/components/MediaObject/index.js @@ -64,5 +64,5 @@ const MediaObject = () => ( export default MediaObject; -/* for testing */ +/* For testing */ export { Overview, MediaPosition, MediaObjectText }; diff --git a/src/App/Documentation/components/Modal/index.js b/src/App/Documentation/components/Modal/index.js index 359c91d13..a893c4fcc 100644 --- a/src/App/Documentation/components/Modal/index.js +++ b/src/App/Documentation/components/Modal/index.js @@ -76,5 +76,5 @@ class Modal extends Component { export default Modal; -/* for testing */ +/* For testing */ export { Usage, Demo, ModalText }; diff --git a/src/App/Documentation/components/Pagination/index.js b/src/App/Documentation/components/Pagination/index.js index baa8090ce..aa2984464 100644 --- a/src/App/Documentation/components/Pagination/index.js +++ b/src/App/Documentation/components/Pagination/index.js @@ -67,5 +67,5 @@ class Pagination extends Component { export default Pagination; -/* for testing */ +/* For testing */ export { DefaultPagination, SimplePagination, PaginationBullets, PaginationText }; diff --git a/src/App/Documentation/components/Panel/index.js b/src/App/Documentation/components/Panel/index.js index cdad92f2e..0779caea8 100644 --- a/src/App/Documentation/components/Panel/index.js +++ b/src/App/Documentation/components/Panel/index.js @@ -101,5 +101,5 @@ class Panel extends Component { export default Panel; -/* for testing */ +/* For testing */ export { Overview, PanelHeaders, PanelDark, PanelMuted, PanelText }; diff --git a/src/App/Documentation/components/Panel/index.test.js b/src/App/Documentation/components/Panel/index.test.js index 1f3f44cad..ae6d31273 100644 --- a/src/App/Documentation/components/Panel/index.test.js +++ b/src/App/Documentation/components/Panel/index.test.js @@ -1,8 +1,7 @@ import React from "react"; import { shallow } from "enzyme"; -import Panel from "./index"; -import { Overview, PanelHeaders, PanelDark, PanelMuted, PanelText } from "./index"; +import Panel, { Overview, PanelHeaders, PanelDark, PanelMuted, PanelText } from "./index"; describe("Documentation: Panel", () => { it("is defined", () => { diff --git a/src/App/Documentation/components/ProgressTracker/index.js b/src/App/Documentation/components/ProgressTracker/index.js index 04b327fb2..da0304f27 100644 --- a/src/App/Documentation/components/ProgressTracker/index.js +++ b/src/App/Documentation/components/ProgressTracker/index.js @@ -114,5 +114,5 @@ const ProgressTracker = () => ( export default ProgressTracker; -/* for testing */ +/* For testing */ export { BasicProgressTracker, SmallProgressTracker, DisabledProgressTracker, ProgressTrackerText }; diff --git a/src/App/Documentation/components/Sheet/index.js b/src/App/Documentation/components/Sheet/index.js index 893933c8f..08328ee63 100644 --- a/src/App/Documentation/components/Sheet/index.js +++ b/src/App/Documentation/components/Sheet/index.js @@ -79,5 +79,5 @@ class Sheet extends Component { export default Sheet; -/* for testing */ +/* For testing */ export { Example, SheetText }; diff --git a/src/App/Documentation/components/Status/index.js b/src/App/Documentation/components/Status/index.js index 93a86e48a..ace913977 100644 --- a/src/App/Documentation/components/Status/index.js +++ b/src/App/Documentation/components/Status/index.js @@ -65,5 +65,5 @@ class Status extends Component { export default Status; -/* for testing */ +/* For testing */ export { Overview, ExtendedUsage, StatusText }; diff --git a/src/App/Documentation/components/Tabs/index.js b/src/App/Documentation/components/Tabs/index.js index db0b790fd..a7161bfbc 100644 --- a/src/App/Documentation/components/Tabs/index.js +++ b/src/App/Documentation/components/Tabs/index.js @@ -56,5 +56,5 @@ const Tabs = () => ( export default Tabs; -/* for testing */ +/* For testing */ export { Overview, Stacked, Collapsed, TabsText }; diff --git a/src/App/Documentation/components/Toast/index.js b/src/App/Documentation/components/Toast/index.js index cb9defa52..3e33b353c 100644 --- a/src/App/Documentation/components/Toast/index.js +++ b/src/App/Documentation/components/Toast/index.js @@ -197,5 +197,5 @@ class Toast extends Component { export default Toast; -/* for testing */ +/* For testing */ export { Overview, Options, PremadeToasts, ToastText }; diff --git a/src/App/Documentation/components/Tooltips/index.js b/src/App/Documentation/components/Tooltips/index.js index 688c39e94..fa9909fa8 100644 --- a/src/App/Documentation/components/Tooltips/index.js +++ b/src/App/Documentation/components/Tooltips/index.js @@ -62,5 +62,5 @@ class Tooltip extends Component { export default Tooltip; -/* for testing */ +/* For testing */ export { Overview, TooltipText }; diff --git a/src/App/Documentation/components/Topbar/index.js b/src/App/Documentation/components/Topbar/index.js index 89bbaf03e..8f59503d0 100644 --- a/src/App/Documentation/components/Topbar/index.js +++ b/src/App/Documentation/components/Topbar/index.js @@ -104,8 +104,15 @@ const smallMenu = { ] }; -const leftMenu = Object.assign({ id: "topbar-nav-left" }, menu); -const rightMenu = Object.assign({ id: "topbar-nav-right" }, smallMenu); +const leftMenu = { + id: "topbar-nav-left", + ...menu +}; + +const rightMenu = { + id: "topbar-nav-right", + ...smallMenu +}; const Overview = () => ( <> @@ -143,5 +150,5 @@ class Topbar extends Component { export default Topbar; -/* for testing */ +/* For testing */ export { Overview, TopbarText }; diff --git a/src/App/Documentation/components/Well/index.js b/src/App/Documentation/components/Well/index.js index 1d9aeef6d..e20f539f3 100644 --- a/src/App/Documentation/components/Well/index.js +++ b/src/App/Documentation/components/Well/index.js @@ -51,5 +51,5 @@ const Well = () => ( export default Well; -/* for testing */ +/* For testing */ export { DefaultWell, WellSizes, WellText }; diff --git a/src/App/Documentation/core/Breakpoints/index.js b/src/App/Documentation/core/Breakpoints/index.js index 96be0f983..fd5dfc383 100644 --- a/src/App/Documentation/core/Breakpoints/index.js +++ b/src/App/Documentation/core/Breakpoints/index.js @@ -119,5 +119,5 @@ const Breakpoints = () => ( export default Breakpoints; -/* for testing */ +/* For testing */ export { Overview, BreakpointsText }; diff --git a/src/App/Documentation/core/Color/ColorPreview.js b/src/App/Documentation/core/Color/ColorPreview.js index 5f9e54c13..2be553a22 100644 --- a/src/App/Documentation/core/Color/ColorPreview.js +++ b/src/App/Documentation/core/Color/ColorPreview.js @@ -1,14 +1,12 @@ import React from "react"; import PropTypes from "prop-types"; -const ColorPreview = ({ name, hex }) => { - return ( -
    -

    {name}

    -

    {hex}

    -
    - ); -}; +const ColorPreview = ({ name, hex }) => ( +
    +

    {name}

    +

    {hex}

    +
    +); ColorPreview.propTypes = { name: PropTypes.string.isRequired, diff --git a/src/App/Documentation/core/Color/index.js b/src/App/Documentation/core/Color/index.js index 98038da1a..a6f615e3f 100644 --- a/src/App/Documentation/core/Color/index.js +++ b/src/App/Documentation/core/Color/index.js @@ -39,18 +39,16 @@ const ColorText = () => ( ); -const Color = () => { - return ( -
    -
    - - -
    +const Color = () => ( +
    +
    + +
    - ); -}; +
    +); export default Color; -/* for testing */ +/* For testing */ export { ColorPalette, ColorText }; diff --git a/src/App/Documentation/core/Favicons/index.js b/src/App/Documentation/core/Favicons/index.js index 17b054de2..fb0c6fb8c 100644 --- a/src/App/Documentation/core/Favicons/index.js +++ b/src/App/Documentation/core/Favicons/index.js @@ -66,18 +66,16 @@ const FaviconsText = () => (
    ); -const Favicons = () => { - return ( -
    -
    - - -
    +const Favicons = () => ( +
    +
    + +
    - ); -}; +
    +); export default Favicons; -/* for testing */ +/* For testing */ export { OurFavicon, Usage, FaviconsText }; diff --git a/src/App/Documentation/core/Grid/index.js b/src/App/Documentation/core/Grid/index.js index abdb4afb6..2f6335c37 100644 --- a/src/App/Documentation/core/Grid/index.js +++ b/src/App/Documentation/core/Grid/index.js @@ -255,18 +255,16 @@ const GridText = () => (
    ); -const Grid = () => { - return ( -
    -
    - - -
    +const Grid = () => ( +
    +
    + +
    - ); -}; +
    +); export default Grid; -/* for testing */ +/* For testing */ export { HowItWorks, GridOptions, AutoLayoutColumns, Alignment, GridText }; diff --git a/src/App/Documentation/core/Icons/index.js b/src/App/Documentation/core/Icons/index.js index e447f677f..6bd708ba4 100644 --- a/src/App/Documentation/core/Icons/index.js +++ b/src/App/Documentation/core/Icons/index.js @@ -33,18 +33,16 @@ const IconsText = () => (
    ); -const Icons = () => { - return ( -
    -
    - - -
    +const Icons = () => ( +
    +
    + +
    - ); -}; +
    +); export default Icons; -/* for testing */ +/* For testing */ export { Usage, IconsText }; diff --git a/src/App/Documentation/core/Lists/index.js b/src/App/Documentation/core/Lists/index.js index 19db732aa..7219b1b66 100644 --- a/src/App/Documentation/core/Lists/index.js +++ b/src/App/Documentation/core/Lists/index.js @@ -3,7 +3,6 @@ import React, { Component } from "react"; import { ComponentPreview, DocToc, Icon } from "#"; import actionList from "$/px-script/action-list"; - const BasicList = () => ( <>

    Basic list

    @@ -186,7 +185,7 @@ class Lists extends Component { actionList.init(); } - render (){ + render () { return (
    @@ -200,5 +199,5 @@ class Lists extends Component { export default Lists; -/* for testing */ +/* For testing */ export { BasicList, InlineList, DescriptionList, SettingsList, ItemList, StatusItemList, StripedItemList, ListsText }; diff --git a/src/App/Documentation/core/Tables/index.js b/src/App/Documentation/core/Tables/index.js index df9847b3c..2bfe0d364 100644 --- a/src/App/Documentation/core/Tables/index.js +++ b/src/App/Documentation/core/Tables/index.js @@ -248,18 +248,16 @@ const TablesText = () => (
    ); -const Tables = () => { - return ( -
    -
    - - -
    +const Tables = () => ( +
    +
    + +
    - ); -}; +
    +); export default Tables; -/* for testing */ +/* For testing */ export { BasicTable, StripedTable, HoverTable, HoverStripedTable, DescriptionTable, TablesText }; diff --git a/src/App/Documentation/core/Typography/index.js b/src/App/Documentation/core/Typography/index.js index 2e9b2ffd1..a2e1ecef6 100644 --- a/src/App/Documentation/core/Typography/index.js +++ b/src/App/Documentation/core/Typography/index.js @@ -66,7 +66,6 @@ const Lead = () => ( ); - const Inline = () => ( <>

    Inline text elements

    @@ -155,7 +154,6 @@ const Blockquotes = () => { ); - return ( <> @@ -190,5 +188,5 @@ const Typography = () => ( export default Typography; -/* for testing */ +/* For testing */ export { Fonts, Headings, Small, Lead, Inline, TextUtilities, Abbreviations, Blockquotes, TypographyText }; diff --git a/src/App/Documentation/getting-started/Contributing/index.js b/src/App/Documentation/getting-started/Contributing/index.js index 631637532..ef634c288 100644 --- a/src/App/Documentation/getting-started/Contributing/index.js +++ b/src/App/Documentation/getting-started/Contributing/index.js @@ -128,7 +128,6 @@ const AddingStyles = () => { ); - return (

    Adding styles

    @@ -220,7 +219,8 @@ const AddingJavaScript = () => {
    - );}; + ); +}; const ContributingText = () => (
    @@ -244,5 +244,5 @@ const Contributing = () => ( export default Contributing; -/* for testing */ +/* For testing */ export { CreatingYourComponent, CreateADocumentationPage, AddComponentToRoutes, AddingStyles, AddingJavaScript, ContributingText }; diff --git a/src/App/Documentation/getting-started/Introduction/index.js b/src/App/Documentation/getting-started/Introduction/index.js index b0b114e5d..5bb027f75 100644 --- a/src/App/Documentation/getting-started/Introduction/index.js +++ b/src/App/Documentation/getting-started/Introduction/index.js @@ -79,5 +79,5 @@ const Introduction = () => ( export default Introduction; -/* for testing */ +/* For testing */ export { QuickStart, Css, JavaScript, StarterTemplate, IntroductionText }; diff --git a/src/App/Documentation/utilities/Colors/index.js b/src/App/Documentation/utilities/Colors/index.js index f3c43f09a..8ac45333c 100644 --- a/src/App/Documentation/utilities/Colors/index.js +++ b/src/App/Documentation/utilities/Colors/index.js @@ -69,5 +69,5 @@ const Colors = () => ( export default Colors; -/* for testing */ +/* For testing */ export { TextColors, BackgroundColors, ColorsText }; diff --git a/src/App/Documentation/utilities/Display/index.js b/src/App/Documentation/utilities/Display/index.js index d5a8ef4db..199baf9d7 100644 --- a/src/App/Documentation/utilities/Display/index.js +++ b/src/App/Documentation/utilities/Display/index.js @@ -136,7 +136,6 @@ const HidingElements = () => (
    -
    Hidden on screens wider than lg
    Hidden on screens smaller than lg
    @@ -167,5 +166,5 @@ const Display = () => ( export default Display; -/* for testing */ +/* For testing */ export { HowItWorks, Notation, Examples, HidingElements, DisplayText }; diff --git a/src/App/Documentation/utilities/Visibility/index.js b/src/App/Documentation/utilities/Visibility/index.js index 35ee63673..c26cc0667 100644 --- a/src/App/Documentation/utilities/Visibility/index.js +++ b/src/App/Documentation/utilities/Visibility/index.js @@ -43,5 +43,5 @@ const Visibility = () => ( export default Visibility; -/* for testing */ +/* For testing */ export { Intro, VisibilityText }; diff --git a/src/App/Documentation/utils/ComponentPreview/index.js b/src/App/Documentation/utils/ComponentPreview/index.js index 9326ae672..61b8b2b1c 100644 --- a/src/App/Documentation/utils/ComponentPreview/index.js +++ b/src/App/Documentation/utils/ComponentPreview/index.js @@ -18,7 +18,6 @@ const ComponentPreview = ({ children, language, removeOuterTag, hideValue, remov return div.firstChild.nodeValue; } - return "Check ComponentPreview _removeOuterTag!"; }; @@ -55,7 +54,6 @@ const ComponentPreview = ({ children, language, removeOuterTag, hideValue, remov code = val; } - return code; }; @@ -131,7 +129,6 @@ const ComponentPreview = ({ children, language, removeOuterTag, hideValue, remov ); }; - const ShowCasePanel = () => (
    {children} diff --git a/src/App/Documentation/utils/PxScript/index.js b/src/App/Documentation/utils/PxScript/index.js index 5c6045ac3..c78f8eaac 100644 --- a/src/App/Documentation/utils/PxScript/index.js +++ b/src/App/Documentation/utils/PxScript/index.js @@ -2,7 +2,8 @@ import React from "react"; import PropTypes from "prop-types"; const PxScript = ({ component, subComponents, func, params }) => { - let renderedParams, renderedSubComponents; + let renderedParams; + let renderedSubComponents; if (subComponents) { renderedSubComponents = subComponents.map((component, i) => ( diff --git a/src/App/Documentation/utils/RenderRoutes/index.js b/src/App/Documentation/utils/RenderRoutes/index.js index 0fb48f6e7..349c1ccb0 100644 --- a/src/App/Documentation/utils/RenderRoutes/index.js +++ b/src/App/Documentation/utils/RenderRoutes/index.js @@ -2,19 +2,17 @@ import React from "react"; import PropTypes from "prop-types"; import { Switch, Route, Redirect } from "react-router-dom"; -const RenderRoutes = ({ path, redirect, routes }) => { - return ( - - }/> - {routes.map((route, i) => { - const { path, component } = route; +const RenderRoutes = ({ path, redirect, routes }) => ( + + }/> + {routes.map((route, i) => { + const { path, component } = route; - return } />; - })} - - - ); -}; + return } />; + })} + + +); RenderRoutes.propTypes = { path: PropTypes.string.isRequired, diff --git a/src/App/components/Breadcrumb/index.js b/src/App/components/Breadcrumb/index.js index 91833e042..62c6a849c 100644 --- a/src/App/components/Breadcrumb/index.js +++ b/src/App/components/Breadcrumb/index.js @@ -28,5 +28,5 @@ Breadcrumb.propTypes = { export default Breadcrumb; -// exporting for testing purposes +// Exporting for testing purposes export { DefaultItems }; diff --git a/src/App/components/FormComponents/FormControlText.js b/src/App/components/FormComponents/FormControlText.js index 3311d5f99..a55f4df8b 100644 --- a/src/App/components/FormComponents/FormControlText.js +++ b/src/App/components/FormComponents/FormControlText.js @@ -1,14 +1,12 @@ import React from "react"; import PropTypes from "prop-types"; -const FormControlText = ({ text, label }) => { - return ( -
    {"\n"} - {label ? : null}{label ? "\n" : null} - {text}{"\n"} -
    - ); -}; +const FormControlText = ({ text, label }) => ( +
    {"\n"} + {label ? : null}{label ? "\n" : null} + {text}{"\n"} +
    +); FormControlText.propTypes = { text: PropTypes.string.isRequired, diff --git a/src/App/components/InputGroup/index.js b/src/App/components/InputGroup/index.js index 814d49b78..831dc9c86 100644 --- a/src/App/components/InputGroup/index.js +++ b/src/App/components/InputGroup/index.js @@ -10,13 +10,11 @@ export const Addon = ({ type, value, color }) => ( : {(type === "icon") ? {value} : value} ); -const Feedback = ({ icon }) => { - return ( - {"\n\t\t"} - {icon}{"\n\t"} - - ); -}; +const Feedback = ({ icon }) => ( + {"\n\t\t"} + {icon}{"\n\t"} + +); const InputGroup = ({ id, diff --git a/src/App/components/Pagination/index.js b/src/App/components/Pagination/index.js index 553250a73..e5884a41f 100644 --- a/src/App/components/Pagination/index.js +++ b/src/App/components/Pagination/index.js @@ -2,7 +2,6 @@ import React from "react"; import PropTypes from "prop-types"; import classnames from "classnames"; - const Pagination = ({ type, items, text, arrows, farArrows }) => { let activeItem = -1; const itemLength = items ? items.length - 1 : -2; @@ -33,7 +32,7 @@ const Pagination = ({ type, items, text, arrows, farArrows }) => { {farArrows ? : null} {arrows ? : null} {items ? items.map(({ name, href, active }, i) => { - if (active) {activeItem = i;} + if (active) { activeItem = i; } return (
  • {"\n"} diff --git a/src/App/components/ProgressTracker/index.js b/src/App/components/ProgressTracker/index.js index 19fb00e08..f10f8ba13 100644 --- a/src/App/components/ProgressTracker/index.js +++ b/src/App/components/ProgressTracker/index.js @@ -29,5 +29,5 @@ ProgressTracker.propTypes = { export default ProgressTracker; -// exporting for testing purposes +// Exporting for testing purposes export { DefaultItems }; diff --git a/src/App/components/Tabs/index.js b/src/App/components/Tabs/index.js index 971bf64fb..ad6df4cd0 100644 --- a/src/App/components/Tabs/index.js +++ b/src/App/components/Tabs/index.js @@ -1,7 +1,6 @@ import React, { Component } from "react"; import PropTypes from "prop-types"; - class Tabs extends Component { constructor (props) { super(props); diff --git a/src/App/components/Topbar/index.js b/src/App/components/Topbar/index.js index c785e9f91..eb34108c4 100644 --- a/src/App/components/Topbar/index.js +++ b/src/App/components/Topbar/index.js @@ -69,17 +69,15 @@ const RightMenu = ({ align, menu }) => { ); }; -const Topbar = ({ leftMenu, rightMenu }) => { - return ( -
    {"\n"} - {leftMenu ? : null}{leftMenu ? "\n" : null} - {"\n"} - {rightMenu ? : null}{rightMenu ? "\n" : null} - {leftMenu ? : null}{leftMenu ? "\n" : null} - {rightMenu ? : null}{rightMenu ? "\n" : null} -
    - ); -}; +const Topbar = ({ leftMenu, rightMenu }) => ( +
    {"\n"} + {leftMenu ? : null}{leftMenu ? "\n" : null} + {"\n"} + {rightMenu ? : null}{rightMenu ? "\n" : null} + {leftMenu ? : null}{leftMenu ? "\n" : null} + {rightMenu ? : null}{rightMenu ? "\n" : null} +
    +); Topbar.propTypes = { leftMenu: PropTypes.object, diff --git a/src/App/index.js b/src/App/index.js index e64135fdb..f3dbbf5da 100644 --- a/src/App/index.js +++ b/src/App/index.js @@ -37,8 +37,10 @@ const App = () => ( if (process.env.google) { history.listen(location => { window.gtag("config", "UA-3440932-20", { - "page_location": window.location.href, - "page_path": location.pathname + /* eslint-disable camelcase */ + page_location: window.location.href, + page_path: location.pathname + /* eslint-enable camelcase */ }); }); } diff --git a/src/index.js b/src/index.js index 8d94af1c3..2d5bda08f 100644 --- a/src/index.js +++ b/src/index.js @@ -10,7 +10,7 @@ import "prismjs/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js"; // Polyfills import "./polyfills"; -// px-script +// Px-script import "./px-script"; import "./less/px.less"; diff --git a/src/px-script/datepicker/index.test.js b/src/px-script/datepicker/index.test.js index 666cf8f11..badfbc8e2 100644 --- a/src/px-script/datepicker/index.test.js +++ b/src/px-script/datepicker/index.test.js @@ -19,7 +19,7 @@ describe("px-script: datepicker", () => { }); it("warns about non-existing formats, and defaults to iso8601", () => { - console.error = jest.fn(); // to prevent error message from using non-enum for format + console.error = jest.fn(); // To prevent error message from using non-enum for format console.warn = jest.fn(); ReactDOM.render(, div); diff --git a/src/px-script/dialog/index.js b/src/px-script/dialog/index.js index b408fd65d..4d63daaa5 100644 --- a/src/px-script/dialog/index.js +++ b/src/px-script/dialog/index.js @@ -24,7 +24,7 @@ class Dialog { e.keyCode === 27 ? this.close() : null; }); - // close the dialog when clicking outside + // Close the dialog when clicking outside this._el.addEventListener("click", e => { e.target.classList.contains("d-flex") ? this.close() : null; }); @@ -52,7 +52,7 @@ const dialog = (() => { const init = () => { const dialogs = [...document.querySelectorAll(SELECTORS.DIALOG)].map(dialog => new Dialog(dialog)); - // init open buttons + // Init open buttons document.querySelectorAll(SELECTORS.OPEN).forEach(btn => { const id = btn.dataset.dialogOpen; let dialog; @@ -69,7 +69,7 @@ const dialog = (() => { } }); - // init close buttons + // Init close buttons document.querySelectorAll(SELECTORS.CLOSE).forEach(btn => { const id = btn.dataset.dialogClose; let dialog; diff --git a/src/px-script/index.js b/src/px-script/index.js index 7fcb30f65..8a727d83c 100644 --- a/src/px-script/index.js +++ b/src/px-script/index.js @@ -14,7 +14,7 @@ import toast from "./toast"; import topbar from "./topbar"; import validation from "./validation"; -// sentry reporter +// Sentry reporter if (process.env.sentry) { init({ dsn: "https://832de6a6953642bea1d70c41c12a5ccd@sentry.io/80077" }); } diff --git a/src/px-script/modal/index.js b/src/px-script/modal/index.js index 84bdec832..f939f7061 100644 --- a/src/px-script/modal/index.js +++ b/src/px-script/modal/index.js @@ -38,7 +38,7 @@ const modal = (() => { }); } - // close the modal when clicking outside + // Close the modal when clicking outside modal.addEventListener("click", e => { if (e.target.classList.contains("d-block")) { _closeModal(modal); diff --git a/src/px-script/rangeslider/index.js b/src/px-script/rangeslider/index.js index d6781db2a..f22303de4 100644 --- a/src/px-script/rangeslider/index.js +++ b/src/px-script/rangeslider/index.js @@ -31,7 +31,7 @@ const rangeslider = (() => { } /* Filling slider background for chrome */ - if (navigator.userAgent.indexOf("Chrome") > -1){ + if (navigator.userAgent.indexOf("Chrome") > -1) { const inlineStyle = document.createElement("style"); const inlineStyleContent = []; diff --git a/src/px-script/script/index.test.js b/src/px-script/script/index.test.js index e4cb9a884..6cb07fbb0 100644 --- a/src/px-script/script/index.test.js +++ b/src/px-script/script/index.test.js @@ -25,7 +25,7 @@ describe("px-script: script", () => { test2: { init: { test: jest.fn() } } }; - console.warn = jest.fn(); // to prevent console warning in console + console.warn = jest.fn(); // To prevent console warning in console script.initAll(); diff --git a/src/px-script/sheet/index.js b/src/px-script/sheet/index.js index 7c00b413b..8ffd7beab 100644 --- a/src/px-script/sheet/index.js +++ b/src/px-script/sheet/index.js @@ -24,7 +24,7 @@ class Sheet { e.keyCode === 27 ? this.close() : null; }); - // close the sheet when clicking outside + // Close the sheet when clicking outside this._el.addEventListener("click", e => { e.target.classList.contains("sheet-open") ? this.close() : null; }); @@ -55,7 +55,7 @@ const sheet = (() => { const init = () => { const sheets = [...document.querySelectorAll(SELECTORS.SHEET)].map(sheet => new Sheet(sheet)); - // init open buttons + // Init open buttons document.querySelectorAll(SELECTORS.OPEN).forEach(btn => { const id = btn.dataset.sheetOpen; let sheet; @@ -72,7 +72,7 @@ const sheet = (() => { } }); - // init close buttons + // Init close buttons document.querySelectorAll(SELECTORS.CLOSE).forEach(btn => { const id = btn.dataset.sheetClose; let sheet; diff --git a/src/px-script/topbar/index.js b/src/px-script/topbar/index.js index 809ea0f29..66c6f38c7 100644 --- a/src/px-script/topbar/index.js +++ b/src/px-script/topbar/index.js @@ -3,8 +3,8 @@ import NavMenu from "./NavMenu"; const topbar = (() => { const init = index => { const menu = document.querySelectorAll(".topbar")[index || 0]; - let leftNavMenu, - rightNavMenu; + let leftNavMenu; + let rightNavMenu; if (menu) { const leftMenuBtnElement = menu.querySelector(".topbar-btn-left"); diff --git a/src/px-script/utils/index.js b/src/px-script/utils/index.js index 13f0948eb..aa67a7b30 100644 --- a/src/px-script/utils/index.js +++ b/src/px-script/utils/index.js @@ -14,10 +14,8 @@ export const extendObj = (overWrite, obj, ext) => { for (const key in ext) { if (overWrite) { obj[key] = ext[key]; - } else { - if (!obj[key]) { - obj[key] = ext[key]; - } + } else if (!obj[key]) { + obj[key] = ext[key]; } } diff --git a/src/px-script/validation/index.js b/src/px-script/validation/index.js index b9c5b7e1f..15d58679a 100644 --- a/src/px-script/validation/index.js +++ b/src/px-script/validation/index.js @@ -51,11 +51,10 @@ const validation = (() => { }; const attachFormValidator = element => { - element.addEventListener("submit", e => {validateForm(element, e);}, false); + element.addEventListener("submit", e => { validateForm(element, e); }, false); }; - const attachInputValidator = element => { - element.addEventListener("change", () => {validateField(element);}, false); + element.addEventListener("change", () => { validateField(element); }, false); }; const init = () => { From 2a7c96d4cf989afe79600386a34d8547b0890bd0 Mon Sep 17 00:00:00 2001 From: Erik Hallaraaker Date: Thu, 27 Sep 2018 15:52:40 +0200 Subject: [PATCH 036/159] Updated datepicker examples with `id` and label with `for` --- jest.setup.js | 16 ++-- .../__snapshots__/index.test.js.snap | 3 + .../components/Datepickers/index.js | 95 ++++++++++++++++--- .../components/FormComponents/Datepicker.js | 8 +- .../__snapshots__/Datepicker.test.js.snap | 4 +- webpack.config.js | 3 +- 6 files changed, 106 insertions(+), 23 deletions(-) diff --git a/jest.setup.js b/jest.setup.js index 51cd56ef6..c912c20e7 100644 --- a/jest.setup.js +++ b/jest.setup.js @@ -15,7 +15,7 @@ global.mount = mount; * https://github.com/facebook/jest/issues/4545 */ -global.requestAnimationFrame = (callback) => { +global.requestAnimationFrame = callback => { setTimeout(callback, 0); }; @@ -24,16 +24,20 @@ global.requestAnimationFrame = (callback) => { * https://developer.mozilla.org/en-US/docs/Web/API/Element/closest */ -if (!Element.prototype.matches) - Element.prototype.matches = Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector; +if (!Element.prototype.matches) { Element.prototype.matches = Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector; } -if (!Element.prototype.closest) +if (!Element.prototype.closest) { Element.prototype.closest = function (s) { let el = this; - if (!document.documentElement.contains(el)) return null; + + if (!document.documentElement.contains(el)) { return null; } + do { - if (el.matches(s)) return el; + if (el.matches(s)) { return el; } + el = el.parentElement || el.parentNode; } while (el !== null && el.nodeType === 1); + return null; }; +} diff --git a/src/App/Documentation/components/Datepickers/__snapshots__/index.test.js.snap b/src/App/Documentation/components/Datepickers/__snapshots__/index.test.js.snap index d56b642a1..cc15771f8 100644 --- a/src/App/Documentation/components/Datepickers/__snapshots__/index.test.js.snap +++ b/src/App/Documentation/components/Datepickers/__snapshots__/index.test.js.snap @@ -233,6 +233,7 @@ exports[`Documentation: Datepickers Required renders 1`] = ` showCasePanel={true} > (

    Simple datepicker

    Simple datepicker...

    - + ); @@ -21,7 +26,13 @@ const InitialValue = () => (

    Initial value

    Initial value...

    - +

    Keep in mind that the datepicker will not insert the initial value if it does not correctly match the set format (iso8601 if you have not specified a format).

    @@ -32,12 +43,54 @@ const CustomFormat = () => (

    Custom format

    Custom format...

    - - - - - - + + + + + + ); @@ -47,7 +100,15 @@ const IncludeTime = () => (

    Include time

    Include time.. .

    - + ); @@ -57,7 +118,12 @@ const Required = () => (

    Required

    Required.. will autopopulate the input after clicking it if no date is selected. Keep in mind that if you do not pass a value to the datepicker it will remain blank if the user does not click the input.

    - + ); @@ -67,7 +133,13 @@ const ShowingMultipleMonths = () => (

    Showing multiple months

    Showing multiple months.. .

    - + ); @@ -87,6 +159,7 @@ const DateRange = () => ( label="Date" prefixType="icon" prefixValue="event" + id="date-range-datepicker" /> {/* eslint-enable newline-per-chained-call*/} diff --git a/src/App/components/FormComponents/Datepicker.js b/src/App/components/FormComponents/Datepicker.js index 953620de5..bcbbc710e 100644 --- a/src/App/components/FormComponents/Datepicker.js +++ b/src/App/components/FormComponents/Datepicker.js @@ -2,7 +2,7 @@ import React from "react"; import PropTypes from "prop-types"; import { Addon } from "@/InputGroup"; -const Datepicker = ({ format, time, min, max, months, value, label, required, prefixValue, prefixType }) => { +const Datepicker = ({ format, time, min, max, months, value, label, required, prefixValue, prefixType, id }) => { const attrs = { className: "form-control", type: "text", @@ -13,13 +13,14 @@ const Datepicker = ({ format, time, min, max, months, value, label, required, pr "data-datepicker-max": max || null, "data-datepicker-value": value || null, "data-datepicker-months": months || null, - "data-required": required || null + "data-required": required || null, + id }; return ( label ? (
    {"\n"} - {"\n"} + {"\n"}
    {"\n"} {prefixValue ? : null}{"\n"} {"\n"} @@ -36,6 +37,7 @@ Datepicker.propTypes = { months: PropTypes.string, value: PropTypes.string, label: PropTypes.string, + id: PropTypes.string, required: PropTypes.bool }; diff --git a/src/App/components/FormComponents/__snapshots__/Datepicker.test.js.snap b/src/App/components/FormComponents/__snapshots__/Datepicker.test.js.snap index 292f727fa..69446fa83 100644 --- a/src/App/components/FormComponents/__snapshots__/Datepicker.test.js.snap +++ b/src/App/components/FormComponents/__snapshots__/Datepicker.test.js.snap @@ -21,7 +21,9 @@ exports[`Component: Datepicker - renders with the form-group and label 1`] = ` > -
    - + `; exports[`Components: ActionList renders 1`] = ` diff --git a/src/App/Documentation/components/Alerts/__snapshots__/index.test.js.snap b/src/App/Documentation/components/Alerts/__snapshots__/index.test.js.snap index 494e46f42..b5ce76585 100644 --- a/src/App/Documentation/components/Alerts/__snapshots__/index.test.js.snap +++ b/src/App/Documentation/components/Alerts/__snapshots__/index.test.js.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Documentation: Alerts Alert With Icon renders 1`] = ` - +

    @@ -60,7 +60,7 @@ exports[`Documentation: Alerts Alert With Icon renders 1`] = ` type="danger" /> - + `; exports[`Documentation: Alerts Alerts Text renders 1`] = ` @@ -80,7 +80,7 @@ exports[`Documentation: Alerts Alerts Text renders 1`] = ` `; exports[`Documentation: Alerts Basic Usage renders 1`] = ` - +

    @@ -127,11 +127,11 @@ exports[`Documentation: Alerts Basic Usage renders 1`] = ` type="danger" /> - + `; exports[`Documentation: Alerts Closing The Alert renders 1`] = ` - +

    @@ -229,11 +229,11 @@ exports[`Documentation: Alerts Closing The Alert renders 1`] = ` Close alert - + `; exports[`Documentation: Alerts Extended Usage renders 1`] = ` - +

    @@ -277,7 +277,7 @@ exports[`Documentation: Alerts Extended Usage renders 1`] = `

    - + `; exports[`Documentation: Alerts renders 1`] = ` diff --git a/src/App/Documentation/components/Badge/__snapshots__/index.test.js.snap b/src/App/Documentation/components/Badge/__snapshots__/index.test.js.snap index b51c9a149..fd246fc85 100644 --- a/src/App/Documentation/components/Badge/__snapshots__/index.test.js.snap +++ b/src/App/Documentation/components/Badge/__snapshots__/index.test.js.snap @@ -15,7 +15,7 @@ exports[`Components: Badge BadgeText renders 1`] = ` `; exports[`Components: Badge FurtherUsage renders 1`] = ` - +

    @@ -84,11 +84,11 @@ exports[`Components: Badge FurtherUsage renders 1`] = `

    - + `; exports[`Components: Badge Overview renders 1`] = ` - +

    @@ -157,7 +157,7 @@ exports[`Components: Badge Overview renders 1`] = `

    - + `; exports[`Components: Badge renders 1`] = ` diff --git a/src/App/Documentation/components/Breadcrumb/__snapshots__/index.test.js.snap b/src/App/Documentation/components/Breadcrumb/__snapshots__/index.test.js.snap index c3436f0a0..a6225a1e8 100644 --- a/src/App/Documentation/components/Breadcrumb/__snapshots__/index.test.js.snap +++ b/src/App/Documentation/components/Breadcrumb/__snapshots__/index.test.js.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Documentation: Breadcrumb Basic BreadCrumb renders 1`] = ` - +

    @@ -71,7 +71,7 @@ exports[`Documentation: Breadcrumb Basic BreadCrumb renders 1`] = ` } /> - + `; exports[`Documentation: Breadcrumb BreadCrumb Text renders 1`] = ` @@ -89,7 +89,7 @@ exports[`Documentation: Breadcrumb BreadCrumb Text renders 1`] = ` `; exports[`Documentation: Breadcrumb Disabled BreadCrumb renders 1`] = ` - +

    @@ -138,7 +138,7 @@ exports[`Documentation: Breadcrumb Disabled BreadCrumb renders 1`] = ` } /> - + `; exports[`Documentation: Breadcrumb renders 1`] = ` diff --git a/src/App/Documentation/components/Buttons/__snapshots__/index.test.js.snap b/src/App/Documentation/components/Buttons/__snapshots__/index.test.js.snap index 42ff30f03..40ad13c2a 100644 --- a/src/App/Documentation/components/Buttons/__snapshots__/index.test.js.snap +++ b/src/App/Documentation/components/Buttons/__snapshots__/index.test.js.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Documentation: Buttons Active State renders 1`] = ` - +

    @@ -50,11 +50,11 @@ exports[`Documentation: Buttons Active State renders 1`] = `

    - + `; exports[`Documentation: Buttons Button Loader renders 1`] = ` - +

    @@ -214,7 +214,7 @@ exports[`Documentation: Buttons Button Loader renders 1`] = ` /> .

    - + `; exports[`Documentation: Buttons Buttons Text renders 1`] = ` @@ -239,7 +239,7 @@ exports[`Documentation: Buttons Buttons Text renders 1`] = ` `; exports[`Documentation: Buttons Disabled State renders 1`] = ` - +

    @@ -286,11 +286,11 @@ exports[`Documentation: Buttons Disabled State renders 1`] = `

    • - + `; exports[`Documentation: Buttons Examples renders 1`] = ` - +

    @@ -336,11 +336,11 @@ exports[`Documentation: Buttons Examples renders 1`] = ` - + `; exports[`Documentation: Buttons Outline Buttons renders 1`] = ` - +

    @@ -383,11 +383,11 @@ exports[`Documentation: Buttons Outline Buttons renders 1`] = ` - + `; exports[`Documentation: Buttons Sizes renders 1`] = ` - +

    @@ -548,11 +548,11 @@ exports[`Documentation: Buttons Sizes renders 1`] = ` - + `; exports[`Documentation: Buttons Usage With Icons renders 1`] = ` - +

    @@ -596,11 +596,11 @@ exports[`Documentation: Buttons Usage With Icons renders 1`] = ` - + `; exports[`Documentation: Buttons Usage With Javascript renders 1`] = ` - +

    @@ -789,11 +789,11 @@ exports[`Documentation: Buttons Usage With Javascript renders 1`] = ` - + `; exports[`Documentation: Buttons Usage With Other Tags renders 1`] = ` - +

    @@ -872,7 +872,7 @@ exports[`Documentation: Buttons Usage With Other Tags renders 1`] = ` - + `; exports[`Documentation: Buttons renders 1`] = ` diff --git a/src/App/Documentation/components/Card/__snapshots__/index.test.js.snap b/src/App/Documentation/components/Card/__snapshots__/index.test.js.snap index fbee60dd2..1be80ea0e 100644 --- a/src/App/Documentation/components/Card/__snapshots__/index.test.js.snap +++ b/src/App/Documentation/components/Card/__snapshots__/index.test.js.snap @@ -15,7 +15,7 @@ exports[`Documentation: Card CardText renders 1`] = ` `; exports[`Documentation: Card Overview renders 1`] = ` - +

    @@ -108,7 +108,7 @@ exports[`Documentation: Card Overview renders 1`] = ` - + `; exports[`Documentation: Card renders 1`] = ` diff --git a/src/App/Documentation/components/Datepickers/__snapshots__/index.test.js.snap b/src/App/Documentation/components/Datepickers/__snapshots__/index.test.js.snap index 8e51d55aa..cc15771f8 100644 --- a/src/App/Documentation/components/Datepickers/__snapshots__/index.test.js.snap +++ b/src/App/Documentation/components/Datepickers/__snapshots__/index.test.js.snap @@ -21,7 +21,7 @@ exports[`Documentation: Datepickers DatepickersText renders 1`] = ` `; exports[`Documentation: Datepickers Options renders 1`] = ` - +

    @@ -208,11 +208,11 @@ exports[`Documentation: Datepickers Options renders 1`] = ` - + `; exports[`Documentation: Datepickers Required renders 1`] = ` - +

    @@ -240,11 +240,11 @@ exports[`Documentation: Datepickers Required renders 1`] = ` required={true} /> - + `; exports[`Documentation: Datepickers ShowingMultipleMonths renders 1`] = ` - +

    @@ -272,11 +272,11 @@ exports[`Documentation: Datepickers ShowingMultipleMonths renders 1`] = ` prefixValue="event" /> - + `; exports[`Documentation: Datepickers SimpleDatepicker renders 1`] = ` - +

    @@ -302,7 +302,7 @@ exports[`Documentation: Datepickers SimpleDatepicker renders 1`] = ` prefixValue="event" /> - + `; exports[`Documentation: Datepickers renders 1`] = ` diff --git a/src/App/Documentation/components/Dialog/__snapshots__/index.test.js.snap b/src/App/Documentation/components/Dialog/__snapshots__/index.test.js.snap index d877f4a84..8995b680d 100644 --- a/src/App/Documentation/components/Dialog/__snapshots__/index.test.js.snap +++ b/src/App/Documentation/components/Dialog/__snapshots__/index.test.js.snap @@ -14,7 +14,7 @@ exports[`Documentation: Dialog DialogText renders 1`] = ` `; exports[`Documentation: Dialog Example renders 1`] = ` - +

    @@ -97,7 +97,7 @@ exports[`Documentation: Dialog Example renders 1`] = ` Open dialog - + `; exports[`Documentation: Dialog renders 1`] = ` diff --git a/src/App/Documentation/components/Forms/__snapshots__/index.test.js.snap b/src/App/Documentation/components/Forms/__snapshots__/index.test.js.snap index acc8cb187..b2dd024a4 100644 --- a/src/App/Documentation/components/Forms/__snapshots__/index.test.js.snap +++ b/src/App/Documentation/components/Forms/__snapshots__/index.test.js.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Documentation: Forms Checkboxes renders 1`] = ` - +

    @@ -29,11 +29,11 @@ exports[`Documentation: Forms Checkboxes renders 1`] = ` label="Milk" /> - + `; exports[`Documentation: Forms DisabledCheckboxes renders 1`] = ` - +

    @@ -64,11 +64,11 @@ exports[`Documentation: Forms DisabledCheckboxes renders 1`] = ` label="Milk" /> - + `; exports[`Documentation: Forms DisabledRadioButtons renders 1`] = ` - +

    @@ -102,11 +102,11 @@ exports[`Documentation: Forms DisabledRadioButtons renders 1`] = ` name="radio-disabled-example" /> - + `; exports[`Documentation: Forms DisabledRangeSlider renders 1`] = ` - +

    @@ -131,11 +131,11 @@ exports[`Documentation: Forms DisabledRangeSlider renders 1`] = ` valueLabelPrefix="$" /> - + `; exports[`Documentation: Forms DisabledToggleboxes renders 1`] = ` - +

    @@ -161,11 +161,11 @@ exports[`Documentation: Forms DisabledToggleboxes renders 1`] = ` label="Enable superpowers" /> - + `; exports[`Documentation: Forms FormGrid renders 1`] = ` - +

    @@ -233,7 +233,7 @@ exports[`Documentation: Forms FormGrid renders 1`] = ` - + `; exports[`Documentation: Forms FormsText renders 1`] = ` @@ -262,7 +262,7 @@ exports[`Documentation: Forms FormsText renders 1`] = ` `; exports[`Documentation: Forms Overview renders 1`] = ` - +

    @@ -322,11 +322,11 @@ exports[`Documentation: Forms Overview renders 1`] = ` - + `; exports[`Documentation: Forms RadioButtons renders 1`] = ` - +

    @@ -357,11 +357,11 @@ exports[`Documentation: Forms RadioButtons renders 1`] = ` name="radio-example" /> - + `; exports[`Documentation: Forms RangeSlider renders 1`] = ` - +

    @@ -446,11 +446,11 @@ exports[`Documentation: Forms RangeSlider renders 1`] = ` valueLabelPrefix="$" /> - + `; exports[`Documentation: Forms StaticText renders 1`] = ` - +

    @@ -473,11 +473,11 @@ exports[`Documentation: Forms StaticText renders 1`] = ` text="Bob Corlsan" /> - + `; exports[`Documentation: Forms Toggleboxes renders 1`] = ` - +

    @@ -501,11 +501,11 @@ exports[`Documentation: Forms Toggleboxes renders 1`] = ` label="Enable superpowers" /> - + `; exports[`Documentation: Forms UsageWithFieldsets renders 1`] = ` - +

    @@ -611,11 +611,11 @@ exports[`Documentation: Forms UsageWithFieldsets renders 1`] = ` - + `; exports[`Documentation: Forms Validation renders 1`] = ` - +

    @@ -669,7 +669,7 @@ exports[`Documentation: Forms Validation renders 1`] = ` - + `; exports[`Documentation: Forms renders 1`] = ` diff --git a/src/App/Documentation/components/InputGroup/__snapshots__/index.test.js.snap b/src/App/Documentation/components/InputGroup/__snapshots__/index.test.js.snap index ee42be284..3304609b7 100644 --- a/src/App/Documentation/components/InputGroup/__snapshots__/index.test.js.snap +++ b/src/App/Documentation/components/InputGroup/__snapshots__/index.test.js.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Documentation: InputGroup BasicExample renders 1`] = ` - +

    @@ -60,11 +60,11 @@ exports[`Documentation: InputGroup BasicExample renders 1`] = ` type="textarea" /> - + `; exports[`Documentation: InputGroup ButtonAddons renders 1`] = ` - +

    @@ -99,11 +99,11 @@ exports[`Documentation: InputGroup ButtonAddons renders 1`] = ` type="text" /> - + `; exports[`Documentation: InputGroup CheckboxesAndRadios renders 1`] = ` - +

    @@ -180,11 +180,11 @@ exports[`Documentation: InputGroup CheckboxesAndRadios renders 1`] = ` - + `; exports[`Documentation: InputGroup Disabled renders 1`] = ` - +

    @@ -232,7 +232,7 @@ exports[`Documentation: InputGroup Disabled renders 1`] = ` type="select" /> - + `; exports[`Documentation: InputGroup InputGroupText renders 1`] = ` @@ -253,7 +253,7 @@ exports[`Documentation: InputGroup InputGroupText renders 1`] = ` `; exports[`Documentation: InputGroup ValidationStates renders 1`] = ` - +

    @@ -287,11 +287,11 @@ exports[`Documentation: InputGroup ValidationStates renders 1`] = ` validationState="error" /> - + `; exports[`Documentation: InputGroup WithFeedbackIcon renders 1`] = ` - +

    @@ -312,11 +312,11 @@ exports[`Documentation: InputGroup WithFeedbackIcon renders 1`] = ` type="text" /> - + `; exports[`Documentation: InputGroup WithSelect renders 1`] = ` - +

    @@ -343,7 +343,7 @@ exports[`Documentation: InputGroup WithSelect renders 1`] = ` type="select" /> - + `; exports[`Documentation: InputGroup renders 1`] = ` diff --git a/src/App/Documentation/components/Loaders/__snapshots__/index.test.js.snap b/src/App/Documentation/components/Loaders/__snapshots__/index.test.js.snap index 44a50b58a..e8faf3017 100644 --- a/src/App/Documentation/components/Loaders/__snapshots__/index.test.js.snap +++ b/src/App/Documentation/components/Loaders/__snapshots__/index.test.js.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Documentation: Loaders Basic Usage renders 1`] = ` - +

    @@ -20,7 +20,7 @@ exports[`Documentation: Loaders Basic Usage renders 1`] = ` visible={true} /> - + `; exports[`Documentation: Loaders Loaders Text renders 1`] = ` @@ -40,7 +40,7 @@ exports[`Documentation: Loaders Loaders Text renders 1`] = ` `; exports[`Documentation: Loaders Muted Loader renders 1`] = ` - +

    @@ -67,11 +67,11 @@ exports[`Documentation: Loaders Muted Loader renders 1`] = ` visible={true} /> - + `; exports[`Documentation: Loaders Sizes renders 1`] = ` - +

    @@ -124,11 +124,11 @@ exports[`Documentation: Loaders Sizes renders 1`] = ` visible={true} /> - + `; exports[`Documentation: Loaders Static Html renders 1`] = ` - +

    @@ -166,11 +166,11 @@ exports[`Documentation: Loaders Static Html renders 1`] = ` /> .

    - + `; exports[`Documentation: Loaders Usage With Javascript renders 1`] = ` - +

    @@ -333,7 +333,7 @@ exports[`Documentation: Loaders Usage With Javascript renders 1`] = ` - + `; exports[`Documentation: Loaders renders 1`] = ` diff --git a/src/App/Documentation/components/MediaObject/__snapshots__/index.test.js.snap b/src/App/Documentation/components/MediaObject/__snapshots__/index.test.js.snap index 7bc7cc2eb..26d048f8f 100644 --- a/src/App/Documentation/components/MediaObject/__snapshots__/index.test.js.snap +++ b/src/App/Documentation/components/MediaObject/__snapshots__/index.test.js.snap @@ -16,7 +16,7 @@ exports[`Documentation: MediaObject MediaObjectText renders 1`] = ` `; exports[`Documentation: MediaObject MediaPosition renders 1`] = ` - +

    @@ -49,11 +49,11 @@ exports[`Documentation: MediaObject MediaPosition renders 1`] = ` text="bob.corlsan@payex.com" /> - + `; exports[`Documentation: MediaObject Overview renders 1`] = ` - +

    @@ -84,7 +84,7 @@ exports[`Documentation: MediaObject Overview renders 1`] = ` text="bob.corlsan@payex.com" /> - + `; exports[`Documentation: MediaObject renders 1`] = ` diff --git a/src/App/Documentation/components/Modal/__snapshots__/index.test.js.snap b/src/App/Documentation/components/Modal/__snapshots__/index.test.js.snap index f95592845..67cb47c93 100644 --- a/src/App/Documentation/components/Modal/__snapshots__/index.test.js.snap +++ b/src/App/Documentation/components/Modal/__snapshots__/index.test.js.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Documentation: Modal Demo renders 1`] = ` - +

    @@ -31,7 +31,7 @@ exports[`Documentation: Modal Demo renders 1`] = `

    - + `; exports[`Documentation: Modal ModalText renders 1`] = ` @@ -50,7 +50,7 @@ exports[`Documentation: Modal ModalText renders 1`] = ` `; exports[`Documentation: Modal Usage renders 1`] = ` - +

    @@ -80,7 +80,7 @@ exports[`Documentation: Modal Usage renders 1`] = `

    - + `; exports[`Documentation: Modal renders 1`] = ` diff --git a/src/App/Documentation/components/Pagination/__snapshots__/index.test.js.snap b/src/App/Documentation/components/Pagination/__snapshots__/index.test.js.snap index 1e22499aa..f05a26b67 100644 --- a/src/App/Documentation/components/Pagination/__snapshots__/index.test.js.snap +++ b/src/App/Documentation/components/Pagination/__snapshots__/index.test.js.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Documentation: Pagination DefaultPagination renders 1`] = ` - +

    @@ -55,11 +55,11 @@ exports[`Documentation: Pagination DefaultPagination renders 1`] = ` } /> - + `; exports[`Documentation: Pagination PaginationBullets renders 1`] = ` - +

    @@ -114,7 +114,7 @@ exports[`Documentation: Pagination PaginationBullets renders 1`] = ` type="bullets" /> - + `; exports[`Documentation: Pagination PaginationText renders 1`] = ` @@ -133,7 +133,7 @@ exports[`Documentation: Pagination PaginationText renders 1`] = ` `; exports[`Documentation: Pagination SimplePagination renders 1`] = ` - +

    @@ -159,7 +159,7 @@ exports[`Documentation: Pagination SimplePagination renders 1`] = ` text="16 of 256" /> - + `; exports[`Documentation: Pagination renders 1`] = ` diff --git a/src/App/Documentation/components/Panel/__snapshots__/index.test.js.snap b/src/App/Documentation/components/Panel/__snapshots__/index.test.js.snap index dcd51691e..a3bafa5c5 100644 --- a/src/App/Documentation/components/Panel/__snapshots__/index.test.js.snap +++ b/src/App/Documentation/components/Panel/__snapshots__/index.test.js.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Documentation: Panel Overview renders 1`] = ` - +

    @@ -32,11 +32,11 @@ exports[`Documentation: Panel Overview renders 1`] = `

    - + `; exports[`Documentation: Panel PanelDark renders 1`] = ` - +

    @@ -80,11 +80,11 @@ exports[`Documentation: Panel PanelDark renders 1`] = `

    - + `; exports[`Documentation: Panel PanelHeaders renders 1`] = ` - +

    @@ -121,11 +121,11 @@ exports[`Documentation: Panel PanelHeaders renders 1`] = ` type="brand" /> - + `; exports[`Documentation: Panel PanelMuted renders 1`] = ` - +

    @@ -168,7 +168,7 @@ exports[`Documentation: Panel PanelMuted renders 1`] = `

    - + `; exports[`Documentation: Panel PanelText renders 1`] = ` diff --git a/src/App/Documentation/components/ProgressTracker/__snapshots__/index.test.js.snap b/src/App/Documentation/components/ProgressTracker/__snapshots__/index.test.js.snap index 0b13ca7d2..de0afe645 100644 --- a/src/App/Documentation/components/ProgressTracker/__snapshots__/index.test.js.snap +++ b/src/App/Documentation/components/ProgressTracker/__snapshots__/index.test.js.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Documentation: ProgressTracker Basic ProgressTracker renders 1`] = ` - +

    @@ -72,11 +72,11 @@ exports[`Documentation: ProgressTracker Basic ProgressTracker renders 1`] = ` } /> - + `; exports[`Documentation: ProgressTracker Disabled ProgressTracker renders 1`] = ` - +

    @@ -132,7 +132,7 @@ exports[`Documentation: ProgressTracker Disabled ProgressTracker renders 1`] = ` } /> - + `; exports[`Documentation: ProgressTracker ProgressTracker Text renders 1`] = ` @@ -151,7 +151,7 @@ exports[`Documentation: ProgressTracker ProgressTracker Text renders 1`] = ` `; exports[`Documentation: ProgressTracker Small ProgressTracker renders 1`] = ` - +

    @@ -202,7 +202,7 @@ exports[`Documentation: ProgressTracker Small ProgressTracker renders 1`] = ` small={true} /> - + `; exports[`Documentation: ProgressTracker renders 1`] = ` diff --git a/src/App/Documentation/components/Sheet/__snapshots__/index.test.js.snap b/src/App/Documentation/components/Sheet/__snapshots__/index.test.js.snap index d9a656fab..8273c1d44 100644 --- a/src/App/Documentation/components/Sheet/__snapshots__/index.test.js.snap +++ b/src/App/Documentation/components/Sheet/__snapshots__/index.test.js.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Documentation: Sheet Example renders 1`] = ` - +

    @@ -156,7 +156,7 @@ exports[`Documentation: Sheet Example renders 1`] = ` Open sheet - + `; exports[`Documentation: Sheet SheetText renders 1`] = ` diff --git a/src/App/Documentation/components/Status/__snapshots__/index.test.js.snap b/src/App/Documentation/components/Status/__snapshots__/index.test.js.snap index fde79d1b3..eb4c258ba 100644 --- a/src/App/Documentation/components/Status/__snapshots__/index.test.js.snap +++ b/src/App/Documentation/components/Status/__snapshots__/index.test.js.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Documentation: Status ExtendedUsage renders 1`] = ` - +

    @@ -47,11 +47,11 @@ exports[`Documentation: Status ExtendedUsage renders 1`] = ` Danger

    -     + `; exports[`Documentation: Status Overview renders 1`] = ` - +

    @@ -112,7 +112,7 @@ exports[`Documentation: Status Overview renders 1`] = ` - + `; exports[`Documentation: Status StatusText renders 1`] = ` diff --git a/src/App/Documentation/components/Tabs/__snapshots__/index.test.js.snap b/src/App/Documentation/components/Tabs/__snapshots__/index.test.js.snap index c85a1d652..088ec2e11 100644 --- a/src/App/Documentation/components/Tabs/__snapshots__/index.test.js.snap +++ b/src/App/Documentation/components/Tabs/__snapshots__/index.test.js.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Components: Tabs Collapsed renders 1`] = ` - +

    @@ -37,11 +37,11 @@ exports[`Components: Tabs Collapsed renders 1`] = ` mode="collapsed" /> - + `; exports[`Components: Tabs Overview renders 1`] = ` - +

    @@ -77,11 +77,11 @@ exports[`Components: Tabs Overview renders 1`] = ` mode="auto" /> - + `; exports[`Components: Tabs Stacked renders 1`] = ` - +

    @@ -117,7 +117,7 @@ exports[`Components: Tabs Stacked renders 1`] = ` mode="stacked" /> - + `; exports[`Components: Tabs TabsText renders 1`] = ` diff --git a/src/App/Documentation/components/Toast/__snapshots__/index.test.js.snap b/src/App/Documentation/components/Toast/__snapshots__/index.test.js.snap index 8c3336909..47ea87f45 100644 --- a/src/App/Documentation/components/Toast/__snapshots__/index.test.js.snap +++ b/src/App/Documentation/components/Toast/__snapshots__/index.test.js.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Components: Toast Options renders 1`] = ` - +

    @@ -134,11 +134,11 @@ exports[`Components: Toast Options renders 1`] = ` - + `; exports[`Components: Toast Overview renders 1`] = ` - +

    @@ -172,11 +172,11 @@ exports[`Components: Toast Overview renders 1`] = ` Click for toast! - + `; exports[`Components: Toast PremadeToasts renders 1`] = ` - +

    @@ -258,7 +258,7 @@ exports[`Components: Toast PremadeToasts renders 1`] = ` Danger toast - + `; exports[`Components: Toast ToastText renders 1`] = ` diff --git a/src/App/Documentation/components/Tooltips/__snapshots__/index.test.js.snap b/src/App/Documentation/components/Tooltips/__snapshots__/index.test.js.snap index eb4c030aa..8e02314aa 100644 --- a/src/App/Documentation/components/Tooltips/__snapshots__/index.test.js.snap +++ b/src/App/Documentation/components/Tooltips/__snapshots__/index.test.js.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Components: Tooltip Overview renders 1`] = ` - +

    @@ -73,26 +73,26 @@ exports[`Components: Tooltip Overview renders 1`] = ` - + `; exports[`Components: Tooltip TooltipText renders 1`] = ` diff --git a/src/App/Documentation/components/Topbar/__snapshots__/index.test.js.snap b/src/App/Documentation/components/Topbar/__snapshots__/index.test.js.snap index 9bbe74e0a..96a3d0ce2 100644 --- a/src/App/Documentation/components/Topbar/__snapshots__/index.test.js.snap +++ b/src/App/Documentation/components/Topbar/__snapshots__/index.test.js.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Components: Topbar Overview renders 1`] = ` - +

    @@ -129,7 +129,7 @@ exports[`Components: Topbar Overview renders 1`] = ` } /> - + `; exports[`Components: Topbar TopbarText renders 1`] = ` diff --git a/src/App/Documentation/components/Well/__snapshots__/index.test.js.snap b/src/App/Documentation/components/Well/__snapshots__/index.test.js.snap index 79617c3b4..231380bae 100644 --- a/src/App/Documentation/components/Well/__snapshots__/index.test.js.snap +++ b/src/App/Documentation/components/Well/__snapshots__/index.test.js.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Components: Well DefaultWell renders 1`] = ` - +

    @@ -27,11 +27,11 @@ exports[`Components: Well DefaultWell renders 1`] = ` Look ma, im in a well! - + `; exports[`Components: Well WellSizes renders 1`] = ` - +

    @@ -74,7 +74,7 @@ exports[`Components: Well WellSizes renders 1`] = ` Look ma, im in a large well! - + `; exports[`Components: Well WellText renders 1`] = ` diff --git a/src/App/Documentation/core/Breakpoints/__snapshots__/index.test.js.snap b/src/App/Documentation/core/Breakpoints/__snapshots__/index.test.js.snap index 3b00c7265..f491ddd26 100644 --- a/src/App/Documentation/core/Breakpoints/__snapshots__/index.test.js.snap +++ b/src/App/Documentation/core/Breakpoints/__snapshots__/index.test.js.snap @@ -22,7 +22,7 @@ exports[`Core: Breakpoints BreakpointsText renders 1`] = ` `; exports[`Core: Breakpoints Overview renders 1`] = ` - +

    @@ -263,11 +263,11 @@ exports[`Core: Breakpoints Overview renders 1`] = ` - + `; exports[`Core: Breakpoints renders 1`] = ` - +
    @@ -280,5 +280,5 @@ exports[`Core: Breakpoints renders 1`] = ` />
    -     + `; diff --git a/src/App/Documentation/core/Color/__snapshots__/index.test.js.snap b/src/App/Documentation/core/Color/__snapshots__/index.test.js.snap index ed69e685a..c856c510a 100644 --- a/src/App/Documentation/core/Color/__snapshots__/index.test.js.snap +++ b/src/App/Documentation/core/Color/__snapshots__/index.test.js.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Core: Color ColorPalette renders 1`] = ` - +

    @@ -67,7 +67,7 @@ exports[`Core: Color ColorPalette renders 1`] = ` - + `; exports[`Core: Color ColorText renders 1`] = ` diff --git a/src/App/Documentation/core/Favicons/__snapshots__/index.test.js.snap b/src/App/Documentation/core/Favicons/__snapshots__/index.test.js.snap index bbbda2008..3d47023d9 100644 --- a/src/App/Documentation/core/Favicons/__snapshots__/index.test.js.snap +++ b/src/App/Documentation/core/Favicons/__snapshots__/index.test.js.snap @@ -15,7 +15,7 @@ exports[`Core: Favicons FaviconsText renders 1`] = ` `; exports[`Core: Favicons OurFavicon renders 1`] = ` - +

    @@ -33,11 +33,11 @@ exports[`Core: Favicons OurFavicon renders 1`] = ` src="/icons/android-chrome-96x96.png" /> - + `; exports[`Core: Favicons Usage renders 1`] = ` - +

    @@ -247,7 +247,7 @@ exports[`Core: Favicons Usage renders 1`] = ` name="theme-color" /> - + `; exports[`Core: Favicons renders 1`] = ` diff --git a/src/App/Documentation/core/Grid/__snapshots__/index.test.js.snap b/src/App/Documentation/core/Grid/__snapshots__/index.test.js.snap index 182407338..f35d40960 100644 --- a/src/App/Documentation/core/Grid/__snapshots__/index.test.js.snap +++ b/src/App/Documentation/core/Grid/__snapshots__/index.test.js.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Core: Grid Alignment renders 1`] = ` - +

    @@ -207,11 +207,11 @@ exports[`Core: Grid Alignment renders 1`] = ` - + `; exports[`Core: Grid AutoLayoutColumns renders 1`] = ` - +

    @@ -274,7 +274,7 @@ exports[`Core: Grid AutoLayoutColumns renders 1`] = ` - + `; exports[`Core: Grid GridText renders 1`] = ` @@ -294,7 +294,7 @@ exports[`Core: Grid GridText renders 1`] = ` `; exports[`Core: Grid HowItWorks renders 1`] = ` - +

    @@ -359,7 +359,7 @@ exports[`Core: Grid HowItWorks renders 1`] = ` .

    - + `; exports[`Core: Grid renders 1`] = ` diff --git a/src/App/Documentation/core/Icons/__snapshots__/index.test.js.snap b/src/App/Documentation/core/Icons/__snapshots__/index.test.js.snap index 35770c0bd..86adda414 100644 --- a/src/App/Documentation/core/Icons/__snapshots__/index.test.js.snap +++ b/src/App/Documentation/core/Icons/__snapshots__/index.test.js.snap @@ -22,7 +22,7 @@ exports[`Core: Icons IconsText renders 1`] = ` `; exports[`Core: Icons Usage renders 1`] = ` - +

    @@ -79,7 +79,7 @@ exports[`Core: Icons Usage renders 1`] = ` - + `; exports[`Core: Icons renders 1`] = ` diff --git a/src/App/Documentation/core/Lists/__snapshots__/index.test.js.snap b/src/App/Documentation/core/Lists/__snapshots__/index.test.js.snap index 5cb1c2f87..eddeec72d 100644 --- a/src/App/Documentation/core/Lists/__snapshots__/index.test.js.snap +++ b/src/App/Documentation/core/Lists/__snapshots__/index.test.js.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Documentation: Lists BasicList renders 1`] = ` - +

    @@ -73,11 +73,11 @@ exports[`Documentation: Lists BasicList renders 1`] = ` - + `; exports[`Documentation: Lists DescriptionList renders 1`] = ` - +

    @@ -127,11 +127,11 @@ exports[`Documentation: Lists DescriptionList renders 1`] = ` - + `; exports[`Documentation: Lists InlineList renders 1`] = ` - +

    @@ -164,7 +164,7 @@ exports[`Documentation: Lists InlineList renders 1`] = ` - + `; exports[`Documentation: Lists ListsText renders 1`] = ` @@ -187,7 +187,7 @@ exports[`Documentation: Lists ListsText renders 1`] = ` `; exports[`Documentation: Lists SettingsList renders 1`] = ` - +

    @@ -247,7 +247,7 @@ exports[`Documentation: Lists SettingsList renders 1`] = ` - + `; exports[`Documentation: Lists renders 1`] = ` diff --git a/src/App/Documentation/core/Tables/__snapshots__/index.test.js.snap b/src/App/Documentation/core/Tables/__snapshots__/index.test.js.snap index e3a78a24f..401917f21 100644 --- a/src/App/Documentation/core/Tables/__snapshots__/index.test.js.snap +++ b/src/App/Documentation/core/Tables/__snapshots__/index.test.js.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Documentation: Table BasicTable renders 1`] = ` - +

    @@ -126,11 +126,11 @@ exports[`Documentation: Table BasicTable renders 1`] = ` - + `; exports[`Documentation: Table DescriptionTable renders 1`] = ` - +

    @@ -195,11 +195,11 @@ exports[`Documentation: Table DescriptionTable renders 1`] = ` - + `; exports[`Documentation: Table HoverStripedTable renders 1`] = ` - +

    @@ -324,11 +324,11 @@ exports[`Documentation: Table HoverStripedTable renders 1`] = ` - + `; exports[`Documentation: Table HoverTable renders 1`] = ` - +

    @@ -453,11 +453,11 @@ exports[`Documentation: Table HoverTable renders 1`] = ` - + `; exports[`Documentation: Table StripedTable renders 1`] = ` - +

    @@ -582,7 +582,7 @@ exports[`Documentation: Table StripedTable renders 1`] = ` - + `; exports[`Documentation: Table TablesText renders 1`] = ` diff --git a/src/App/Documentation/core/Typography/__snapshots__/index.test.js.snap b/src/App/Documentation/core/Typography/__snapshots__/index.test.js.snap index 0833a8467..6313486c7 100644 --- a/src/App/Documentation/core/Typography/__snapshots__/index.test.js.snap +++ b/src/App/Documentation/core/Typography/__snapshots__/index.test.js.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Core: Typography Abbreviations renders 1`] = ` - +

    @@ -57,11 +57,11 @@ exports[`Core: Typography Abbreviations renders 1`] = ` about abbreviations.

    - + `; exports[`Core: Typography Blockquotes renders 1`] = ` - +

    @@ -96,11 +96,11 @@ exports[`Core: Typography Blockquotes renders 1`] = `

    - + `; exports[`Core: Typography Blockquotes renders 2`] = ` - +

    Naming a source

    @@ -141,11 +141,11 @@ exports[`Core: Typography Blockquotes renders 2`] = ` -     + `; exports[`Core: Typography Blockquotes renders 3`] = ` - +

    Alignment

    @@ -183,19 +183,19 @@ exports[`Core: Typography Blockquotes renders 3`] = ` -     + `; exports[`Core: Typography Blockquotes renders 4`] = ` - + - + `; exports[`Core: Typography Fonts renders 1`] = ` - +

    @@ -218,11 +218,11 @@ exports[`Core: Typography Fonts renders 1`] = ` font-family: GillSans, Calibri, Trebuchet, sans-serif; } - + `; exports[`Core: Typography Headings renders 1`] = ` - +

    @@ -306,11 +306,11 @@ exports[`Core: Typography Headings renders 1`] = ` .h6 heading

    - + `; exports[`Core: Typography Inline renders 1`] = ` - +

    @@ -437,11 +437,11 @@ exports[`Core: Typography Inline renders 1`] = ` is mostly for voice, technical terms, etc.

    - + `; exports[`Core: Typography Lead renders 1`] = ` - +

    @@ -467,11 +467,11 @@ exports[`Core: Typography Lead renders 1`] = ` This is a leading paragraph which for instance can be used as an introduction.

    - + `; exports[`Core: Typography Small renders 1`] = ` - +

    @@ -499,11 +499,11 @@ exports[`Core: Typography Small renders 1`] = `

    -     + `; exports[`Core: Typography Text Utilities renders 1`] = ` - +

    @@ -519,7 +519,7 @@ exports[`Core: Typography Text Utilities renders 1`] = ` .

    - + `; exports[`Core: Typography Typography Text renders 1`] = ` diff --git a/src/App/Documentation/getting-started/Contributing/__snapshots__/index.test.js.snap b/src/App/Documentation/getting-started/Contributing/__snapshots__/index.test.js.snap index b09bcf2e4..fd4d66c26 100644 --- a/src/App/Documentation/getting-started/Contributing/__snapshots__/index.test.js.snap +++ b/src/App/Documentation/getting-started/Contributing/__snapshots__/index.test.js.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`GettingStarted: Contributing Add Component To Routes renders 1`] = ` - +

    @@ -78,7 +78,7 @@ exports[`GettingStarted: Contributing Add Component To Routes renders 1`] = ` to see your component in action.

    - + `; exports[`GettingStarted: Contributing Adding JavaScript renders 1`] = `

    `; @@ -298,7 +298,7 @@ exports[`GettingStarted: Contributing Adding Styles renders 1`] = `

    `; exports[`GettingStarted: Contributing Adding Styles renders 2`] = `

    `; exports[`GettingStarted: Contributing Adding Styles renders 3`] = ` - +

    Importing the styles

    @@ -341,11 +341,11 @@ exports[`GettingStarted: Contributing Adding Styles renders 3`] = ` ... -     + `; exports[`GettingStarted: Contributing Adding Styles renders 4`] = ` - +

    Creating variables

    @@ -382,7 +382,7 @@ exports[`GettingStarted: Contributing Adding Styles renders 4`] = ` @my-example-component-font-family: "Arial"; -     + `; exports[`GettingStarted: Contributing Adding Styles renders 5`] = `

    `; @@ -470,7 +470,7 @@ exports[`GettingStarted: Contributing Contributing Text renders 1`] = ` `; exports[`GettingStarted: Contributing Create A Documentation Page renders 1`] = ` - +

    @@ -587,11 +587,11 @@ exports[`GettingStarted: Contributing Create A Documentation Page renders 1`] = -tag.

    - + `; exports[`GettingStarted: Contributing Creating Your Component renders 1`] = ` - +

    @@ -648,7 +648,7 @@ exports[`GettingStarted: Contributing Creating Your Component renders 1`] = ` export default MyExampleComponent; - + `; exports[`GettingStarted: Contributing renders 1`] = ` diff --git a/src/App/Documentation/getting-started/Introduction/__snapshots__/index.test.js.snap b/src/App/Documentation/getting-started/Introduction/__snapshots__/index.test.js.snap index f33f5c37d..61b3d8759 100644 --- a/src/App/Documentation/getting-started/Introduction/__snapshots__/index.test.js.snap +++ b/src/App/Documentation/getting-started/Introduction/__snapshots__/index.test.js.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`GettingStarted: Introduction Css renders 1`] = ` - +

    @@ -33,7 +33,7 @@ exports[`GettingStarted: Introduction Css renders 1`] = ` rel="stylesheet" /> - + `; exports[`GettingStarted: Introduction IntroductionText renders 1`] = ` @@ -52,7 +52,7 @@ exports[`GettingStarted: Introduction IntroductionText renders 1`] = ` `; exports[`GettingStarted: Introduction JavaScript renders 1`] = ` - +

    @@ -83,11 +83,11 @@ exports[`GettingStarted: Introduction JavaScript renders 1`] = ` src="https://design.payex.com/v/0.11.1/scripts/px-script.js" /> - + `; exports[`GettingStarted: Introduction QuickStart renders 1`] = ` - +

    @@ -96,11 +96,11 @@ exports[`GettingStarted: Introduction QuickStart renders 1`] = `

    To quickly add the designguide to your project, include the snippets below in your project.

    - + `; exports[`GettingStarted: Introduction StarterTemplate renders 1`] = ` - +

    @@ -142,7 +142,7 @@ exports[`GettingStarted: Introduction StarterTemplate renders 1`] = ` - + `; exports[`GettingStarted: Introduction renders 1`] = ` diff --git a/src/App/Documentation/utilities/Colors/__snapshots__/index.test.js.snap b/src/App/Documentation/utilities/Colors/__snapshots__/index.test.js.snap index b6a5ffd8c..99974dfc3 100644 --- a/src/App/Documentation/utilities/Colors/__snapshots__/index.test.js.snap +++ b/src/App/Documentation/utilities/Colors/__snapshots__/index.test.js.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Utilities: Colors BackgroundColors renders 1`] = ` - +

    @@ -65,7 +65,7 @@ exports[`Utilities: Colors BackgroundColors renders 1`] = ` - + `; exports[`Utilities: Colors ColorsText renders 1`] = ` @@ -83,7 +83,7 @@ exports[`Utilities: Colors ColorsText renders 1`] = ` `; exports[`Utilities: Colors TextColors renders 1`] = ` - +

    @@ -224,11 +224,11 @@ exports[`Utilities: Colors TextColors renders 1`] = `

    - + `; exports[`Utilities: Colors renders 1`] = ` - +
    @@ -241,5 +241,5 @@ exports[`Utilities: Colors renders 1`] = ` />
    -     + `; diff --git a/src/App/Documentation/utilities/Display/__snapshots__/index.test.js.snap b/src/App/Documentation/utilities/Display/__snapshots__/index.test.js.snap index 0b81f4e35..fc0ff4cab 100644 --- a/src/App/Documentation/utilities/Display/__snapshots__/index.test.js.snap +++ b/src/App/Documentation/utilities/Display/__snapshots__/index.test.js.snap @@ -17,7 +17,7 @@ exports[`Utilities: Display DisplayText renders 1`] = ` `; exports[`Utilities: Display Examples renders 1`] = ` - +

    @@ -55,11 +55,11 @@ exports[`Utilities: Display Examples renders 1`] = ` d-block - + `; exports[`Utilities: Display HidingElements renders 1`] = ` - +

    @@ -304,11 +304,11 @@ exports[`Utilities: Display HidingElements renders 1`] = ` Hidden on screens smaller than lg - + `; exports[`Utilities: Display HowItWorks renders 1`] = ` - +

    @@ -329,11 +329,11 @@ exports[`Utilities: Display HowItWorks renders 1`] = ` . Classes can be combined for various effects as you need.

    - + `; exports[`Utilities: Display Notation renders 1`] = ` - +

    @@ -526,11 +526,11 @@ exports[`Utilities: Display Notation renders 1`] = ` screens.

    - + `; exports[`Utilities: Display renders 1`] = ` - +
    @@ -543,5 +543,5 @@ exports[`Utilities: Display renders 1`] = ` />
    -     + `; diff --git a/src/App/Documentation/utilities/Visibility/__snapshots__/index.test.js.snap b/src/App/Documentation/utilities/Visibility/__snapshots__/index.test.js.snap index ea27b7d79..83f2c26e7 100644 --- a/src/App/Documentation/utilities/Visibility/__snapshots__/index.test.js.snap +++ b/src/App/Documentation/utilities/Visibility/__snapshots__/index.test.js.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Utilities: Visibility Intro renders 1`] = ` - +

    Set the - + `; exports[`Utilities: Visibility VisibilityText renders 1`] = ` @@ -78,7 +78,7 @@ exports[`Utilities: Visibility VisibilityText renders 1`] = ` `; exports[`Utilities: Visibility renders 1`] = ` - +

    @@ -88,5 +88,5 @@ exports[`Utilities: Visibility renders 1`] = `
    -     + `; diff --git a/src/App/ErrorPage404/__snapshots__/index.test.js.snap b/src/App/ErrorPage404/__snapshots__/index.test.js.snap index d30a6892b..b5215c059 100644 --- a/src/App/ErrorPage404/__snapshots__/index.test.js.snap +++ b/src/App/ErrorPage404/__snapshots__/index.test.js.snap @@ -1,9 +1,9 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`ErrorPage404: index renders 1`] = ` - +

    This is not the page you are looking for.

    -     + `; diff --git a/src/App/Examples/__snapshots__/index.test.js.snap b/src/App/Examples/__snapshots__/index.test.js.snap index 88d12b2ed..f67700e65 100644 --- a/src/App/Examples/__snapshots__/index.test.js.snap +++ b/src/App/Examples/__snapshots__/index.test.js.snap @@ -1,9 +1,9 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Examples: index renders 1`] = ` - +

    Here there be examples

    -     + `; diff --git a/src/App/Templates/__snapshots__/index.test.js.snap b/src/App/Templates/__snapshots__/index.test.js.snap index 0bbca93a0..c3e8cc27e 100644 --- a/src/App/Templates/__snapshots__/index.test.js.snap +++ b/src/App/Templates/__snapshots__/index.test.js.snap @@ -1,9 +1,9 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Templates: index renders 1`] = ` - +

    Here there might be templates

    -     + `; diff --git a/src/App/__snapshots__/index.test.js.snap b/src/App/__snapshots__/index.test.js.snap index 2cafa4466..b13777461 100644 --- a/src/App/__snapshots__/index.test.js.snap +++ b/src/App/__snapshots__/index.test.js.snap @@ -17,7 +17,7 @@ exports[`Main: App renders 1`] = ` "listen": [Function], "location": Object { "hash": "", - "pathname": "blank", + "pathname": "/", "search": "", "state": undefined, }, diff --git a/src/App/components/Modal/__snapshots__/index.test.js.snap b/src/App/components/Modal/__snapshots__/index.test.js.snap index e25891c68..720db7def 100644 --- a/src/App/components/Modal/__snapshots__/index.test.js.snap +++ b/src/App/components/Modal/__snapshots__/index.test.js.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Component: Modal - prop footerAlignment is an enum requires value 'centered' or 'right' 1`] = ` - +
    -     + `; exports[`Component: Modal - prop size is is an enum which requires value 'small', 'medium' or 'large' 1`] = ` - +
    -     + `; exports[`Component: Modal - prop size is marked as required 1`] = ` - +
    -     + `; exports[`Component: Modal - prop type is is an enum which requires value 'brand' or 'default' 1`] = ` - +
    -     + `; exports[`Component: Modal - prop type is marked as required 1`] = ` - +
    -     + `; exports[`Component: Modal - renders 1`] = ` - +
    -     + `; exports[`Component: Modal - renders a button component when prop button is true 1`] = ` - +
    - + `; exports[`Component: Modal - renders a footer when prop footerText is provided 1`] = ` - +
    -     + `; exports[`Component: Modal - renders a footer with alignment when prop footerText and footerAlignment is provided 1`] = ` - +
    -     + `; exports[`Component: Modal - renders a header tag with subtitle but without title when prop subTitle is provided but title is not 1`] = ` - +
    -     + `; exports[`Component: Modal - renders with a header and subtitle when prop title and subTitle is provided 1`] = ` - +
    -     + `; exports[`Component: Modal - renders with a header without subtitle when prop title is provided and prop subTitle is missing 1`] = ` - +
    -     + `; exports[`Component: Modal - renders with class 'd-block' when prop visible is true 1`] = ` - +
    -     + `; exports[`Component: Modal - renders with class 'static' when prop isStatic is true 1`] = ` - +
    -     + `; exports[`Component: Modal - renders without header when prop title is missing 1`] = ` - +
    -     + `; diff --git a/src/less/_variables.less b/src/less/_variables.less index 76d4c5194..b8fec6190 100644 --- a/src/less/_variables.less +++ b/src/less/_variables.less @@ -29,9 +29,7 @@ // 18. Panel // 19. Sheet // 20. Status -// 21. Tabs // 22. Toast -// 23. Tooltip // 24. Topbar // ========================================================================== @@ -528,13 +526,10 @@ @panel-brand-color: @brand-primary; @panel-border-radius: 0; -@panel-margin-bottom: 14px; -@panel-body-padding: 15px 30px; //Todo: cleanup, lots of hardcoded px values, maybe ok? +@panel-body-padding: @base-padding @base-padding-xl; @panel-table-margin: 0; -@panel-banner-padding: 15px; -@panel-heading-padding: 15px 15px 15px 30px; -@panel-footer-padding: 15px 30px 12px 30px; +@panel-footer-padding: @base-padding @base-padding-xl @base-padding-sm @base-padding-xl; @panel-footer-margin: 10px -30px -15px -30px; @@ -543,7 +538,7 @@ @sheet-backdrop-bg: fade(@black, 50%); @sheet-section-bg: @white; -@sheet-section-padding: 5rem 4rem 4rem; +@sheet-section-padding: 5rem @base-padding-xs @base-padding-xs; @sheet-width-xs: 95%; @sheet-width-sm: 75%; @@ -556,14 +551,6 @@ @status-size: 13px; @status-padding: 10; -// 21. Tabs -// ========================================================================== - -@tabs-margin: @base-margin; - -@tabs-padding: @base-padding; -@tabs-padding-s: @base-padding-sm; - // 22. Toast // ========================================================================== @@ -573,23 +560,6 @@ @toast-text-color: @text-color; @toast-action-color: @yellow; -@toast-margin: @base-margin; -@toast-margin-s: @base-margin-sm; - -@toast-padding: @base-padding; -@toast-padding-s: @base-padding-sm; -@toast-padding-m: @base-padding+@base-padding-sm; //Medium, ok naming? - - -// 23. Tooltip -// ========================================================================== - -@tooltip-margin: @base-margin; -@tooltip-margin-s: @base-margin-sm; - -@tooltip-padding-s: @base-padding-sm; -@tooltip-padding-xs: @base-padding-xs; - // 24. Topbar // ========================================================================== @@ -603,9 +573,3 @@ @topbar-margin: @base-margin+@base-margin-xs; @topbar-padding: @base-padding+@base-margin-xs; - -@topbar-margin: @base-margin; -@topbar-margin-s: @base-margin-sm; - -@topbar-padding: @base-padding; -@topbar-padding-s: @base-padding-sm; diff --git a/src/less/components/panel.less b/src/less/components/panel.less index c1a3efcca..739673d52 100644 --- a/src/less/components/panel.less +++ b/src/less/components/panel.less @@ -1,7 +1,7 @@ // Base classes .panel { - margin-top: @panel-margin-bottom; - margin-bottom: @panel-margin-bottom; + margin-top: @base-margin; + margin-bottom: @base-margin; background-color: @panel-background-color; // border: 1px solid @gray-9; box-shadow: @panel-box-shadow; @@ -46,7 +46,7 @@ } } - &.panel-no-padding { + &.panel-no-padding { //Is this used anywhere? [AW] .panel-body { margin: 0; padding: 0; @@ -57,7 +57,7 @@ } } - &.panel-half-padding { + &.panel-half-padding { //Is this used anywhere? [AW] .panel-body { margin: 0; padding: 7px 15px; @@ -81,7 +81,8 @@ // Optional heading > header { - padding: @panel-heading-padding; + padding: @base-padding; + padding-left: @base-padding-xl; border-bottom: 1px solid @panel-default-border-color; } @@ -127,10 +128,8 @@ // Optional footer (stays gray in every modifier class) > footer { background-color: @background-body; - // background-color: @gray-10; padding: @panel-footer-padding; border-top: 1px solid @panel-default-border-color; - // margin: @panel-footer-margin; &.panel-table-footer { padding: 0; diff --git a/src/less/components/sheet.less b/src/less/components/sheet.less index ef58e0334..dbe79dfc6 100644 --- a/src/less/components/sheet.less +++ b/src/less/components/sheet.less @@ -49,10 +49,10 @@ .sheet-open { overflow: hidden; - padding-right: 17px; + padding-right: @base-padding; .sheet { - padding-right: 17px; + padding-right: @base-padding; > section { overflow-x: hidden; diff --git a/src/less/components/tabs.less b/src/less/components/tabs.less index 96116d052..7409a364f 100644 --- a/src/less/components/tabs.less +++ b/src/less/components/tabs.less @@ -1,6 +1,6 @@ .tabs { position: relative; - margin: @tabs-margin auto; + margin: @base-margin auto; min-height: 60px; ul { @@ -18,7 +18,7 @@ background-color: @white; display: block; font-weight: bold; - padding: @tabs-padding-s @tabs-padding; + padding: @base-padding-sm @base-padding; font-size: 1.3rem; border-bottom: 3px solid @white; transition: border-bottom 0.2s ease-in-out; diff --git a/src/less/components/toast.less b/src/less/components/toast.less index 3610bdb7d..615b52618 100644 --- a/src/less/components/toast.less +++ b/src/less/components/toast.less @@ -22,7 +22,7 @@ line-height: 1.5em; color: @toast-text-color; background-color: @toast-color; - padding: @toast-padding-s @toast-padding-m; + padding: @base-padding-sm @base-padding-lg; font-size: 1.1rem; font-weight: 300; display: flex; @@ -77,14 +77,14 @@ user-select: none; &:first-child { - margin-right: @toast-margin-s; - margin-left: -@toast-margin-s; + margin-right: @base-margin-sm; + margin-left: -@base-margin-sm; } &:last-child { cursor: pointer; - margin-left: @toast-margin-s; - margin-right: -@toast-margin-s; + margin-left: @base-margin-sm; + margin-right: -@base-margin-sm; color: lighten(@text-color, 20%); &:hover { diff --git a/src/less/components/tooltip.less b/src/less/components/tooltip.less index 9fcdc4fcc..ec12fdaae 100644 --- a/src/less/components/tooltip.less +++ b/src/less/components/tooltip.less @@ -29,7 +29,7 @@ min-width: 5rem; border-radius: 5px; pointer-events: none; - padding: @tooltip-padding-xs @tooltip-padding-s; + padding: @base-padding-xs @base-padding-sm; z-index: @zindex-tooltip; opacity: 0; transition: opacity 0.3s ease-in-out; @@ -68,13 +68,13 @@ &[data-tooltip-position="bottom"]:before { top: 100%; - margin-top: @tooltip-margin-s; + margin-top: @base-margin-sm; transform: translateX(-50%) translateY(-100%) rotate(-180deg); } &[data-tooltip-position="bottom"]:after { top: 100%; - margin-top: @tooltip-margin-s; + margin-top: @base-margin-sm; transform: translateX(-50%) translateY(0%); } @@ -88,7 +88,7 @@ &[data-tooltip-position="right"]:after { left: 100%; top: 50%; - margin-left: @tooltip-margin-s; + margin-left: @base-margin-sm; transform: translateX(0%) translateY(-50%); } From 1ba88bc3670ba8dcf14df691bae8189dbfb975eb Mon Sep 17 00:00:00 2001 From: Erik Hallaraaker Date: Mon, 1 Oct 2018 12:58:10 +0200 Subject: [PATCH 045/159] Added some simple tests for px-scipt index --- src/px-script/index.test.js | 12 ++++++++++++ 1 file changed, 12 insertions(+) create mode 100644 src/px-script/index.test.js diff --git a/src/px-script/index.test.js b/src/px-script/index.test.js new file mode 100644 index 000000000..24f7439c1 --- /dev/null +++ b/src/px-script/index.test.js @@ -0,0 +1,12 @@ +import px from "./index"; + +describe("px-script: px (index)", () => { + it("is defined", () => { + expect(px).toBeDefined(); + }); + + it("defines window.px as px", () => { + expect(window.px).toBeDefined(); + expect(window.px).toEqual(px); + }); +}); From df105ec9d86ca0adb581d79fa09a959d150295a0 Mon Sep 17 00:00:00 2001 From: Aksel Christoffer Wiig Date: Mon, 1 Oct 2018 13:08:36 +0200 Subject: [PATCH 046/159] component less cleaned up --- src/less/_variables.less | 78 ++++----------------------- src/less/components/action-list.less | 14 ++--- src/less/components/alert.less | 6 +-- src/less/components/badge.less | 2 +- src/less/components/button.less | 6 +-- src/less/components/card.less | 16 +++--- src/less/components/datepicker.less | 4 +- src/less/components/forms.less | 30 +++++------ src/less/components/media-object.less | 6 +-- src/less/components/pagination.less | 6 +-- src/less/core/lists.less | 2 +- src/less/core/tables.less | 2 +- 12 files changed, 58 insertions(+), 114 deletions(-) diff --git a/src/less/_variables.less b/src/less/_variables.less index b8fec6190..ea4fc43d6 100644 --- a/src/less/_variables.less +++ b/src/less/_variables.less @@ -106,9 +106,6 @@ @base-padding-lg: @base-padding*1.5; @base-padding-xl: @base-padding*2; -/* Spacing */ -@spacer: 1rem; - /* Body */ @body-bg: @background-body; @text-color: @dark-gray; @@ -282,7 +279,7 @@ @list-inline-padding: @base-padding-sm; -@hr-margin-y: @spacer; +@hr-margin-y: @base-margin; // ========================================================================== @@ -294,25 +291,14 @@ // 6. Action List // ========================================================================== -@action-list-margin-s: @base-margin-sm; - -@action-list-padding: @base-padding; -@action-list-padding-l: @base-padding-xl; - -@action-list-a-padding: round(@action-list-padding/3, 1); - -// 7. Alert -// ========================================================================== - -@alert-margin: @base-margin; -@alert-padding: @base-padding; +@action-menu-a-padding: round(@base-padding/3, 1); // 8. Badge // ========================================================================== @badge-list: default @gray-8, brand @green, blue @blue, purple @purple, yellow @yellow, red @red; -@badge-margin-s: @base-margin-sm; +@badge-padding: @base-margin*0.125 @base-margin-sm; // 9. Breadcrumb // ========================================================================== @@ -350,9 +336,6 @@ // 10. Button // ========================================================================== -@btn-margin: @base-margin; -@btn-margin-s: @base-margin-sm; - @btn-border-radius-base: 3px; @btn-border-radius-large: 3px; @btn-border-radius-small: 3px; @@ -374,20 +357,12 @@ // 11. Card // ========================================================================== -@card-margin: @base-margin; -@card-margin-s: @base-margin-sm; -@card-margin-xs: @base-margin-xs; -@card-margin-l: @base-margin-xl; - -@card-padding: @base-padding; +@card-margin: 0 @base-margin-xl @base-margin; // 12. Datepicker // ========================================================================== -@datepicker-padding: @base-margin; -@datepicker-padding-s: @base-margin-sm; -@datepicker-rd-padding: round(@datepicker-padding/3, 1); - +@datepicker-rd-padding: round(@base-padding/3, 1); // 13. Dialog // ========================================================================== @@ -408,8 +383,6 @@ // 14. Form // ========================================================================== -@form-margin: @base-margin; - @input-padding-y: 0.375rem; @input-padding-x: 0.75rem; @input-line-height: @line-height-base; @@ -428,46 +401,23 @@ @legend-border-color: @gray-9; @legend-color: @gray-3; -@legend-bottom-margin: 1.25rem; +@legend-bottom-margin: @base-margin*1.25; + +@helpblock-margin: @base-margin*0.325 0; -// Fieldset -@fieldset-margin: @base-margin; +@select-option-margin: @base-margin*0.187 @base-margin*0.375; // Checkbox @checkbox-bg: @brand-primary; @checkbox-height: 1.4rem; @checkbox-width: @checkbox-height; // This also controls radio and togglebox -@checkbox-padding: @base-padding; -@checkbox-label-padding: @checkbox-padding/5; - -@checkbox-margin: @base-margin; -@checkbox-margin-s: @base-margin-sm; - -// Radio -@radio-margin: @base-margin; -@radio-margin-s: @base-margin-sm; - -// Togglebox -@togglebox-margin-s: @base-margin-sm; +@checkbox-label-padding: @base-padding/5; // Rangeslider @range-height: @checkbox-height / 2; @thumb-size: @checkbox-height; -@rangeslider-margin: @base-margin; -@rangeslider-margin-l: @base-margin-xl; - - -// 15. Media object -// ========================================================================== -// Variables are named "x-media" because "@media" is reserved for media queries - -@x-media-margin: @base-margin; -@x-media-margin-s: @base-margin-sm; - -@x-media-padding: @base-padding; - // 16. Modal (deprecated) // ========================================================================== @@ -501,11 +451,6 @@ @pagination-bullet-size: @status-size; -@pagination-margin: @base-margin; -@pagination-margin-s: @base-margin-sm; - -@pagination-bullets-margin: @pagination-margin-s/2; - // 18. Panel // ========================================================================== @@ -530,7 +475,6 @@ @panel-body-padding: @base-padding @base-padding-xl; @panel-table-margin: 0; @panel-footer-padding: @base-padding @base-padding-xl @base-padding-sm @base-padding-xl; -@panel-footer-margin: 10px -30px -15px -30px; // 19. Sheet @@ -538,7 +482,7 @@ @sheet-backdrop-bg: fade(@black, 50%); @sheet-section-bg: @white; -@sheet-section-padding: 5rem @base-padding-xs @base-padding-xs; +@sheet-section-padding: @base-padding*5 @base-padding-xs @base-padding-xs; @sheet-width-xs: 95%; @sheet-width-sm: 75%; diff --git a/src/less/components/action-list.less b/src/less/components/action-list.less index 86322aae0..2aa4d87e7 100644 --- a/src/less/components/action-list.less +++ b/src/less/components/action-list.less @@ -24,15 +24,15 @@ > a { display: flex; - padding: @action-list-a-padding; - padding-right: @action-list-padding-l; + padding: @action-menu-a-padding; + padding-right: @base-padding-xl; color: @gray-5; visibility: hidden; position: relative; border: none; > .material-icons { - margin-right: @action-list-margin-s; + margin-right: @base-margin-sm; } &:active, @@ -66,8 +66,8 @@ left: -0.35rem; > a { - padding-left: @action-list-padding-l; - padding-right: @action-list-padding; + padding-left: @base-padding-xl; + padding-right: @base-padding; } } } @@ -87,8 +87,8 @@ bottom: 0; > a { - padding-left: @action-list-padding-l; - padding-right: @action-list-padding; + padding-left: @base-padding-xl; + padding-right: @base-padding; } } } diff --git a/src/less/components/alert.less b/src/less/components/alert.less index 7468002ad..e99b642a4 100644 --- a/src/less/components/alert.less +++ b/src/less/components/alert.less @@ -10,10 +10,10 @@ .alert { - padding: @alert-padding; + padding: @base-padding; position: relative; margin-top: 0; - margin-bottom: @alert-margin; + margin-bottom: @base-margin; border: 1px solid transparent; display: flex; align-items: start; @@ -59,7 +59,7 @@ } .alert-icon { - margin-right: @alert-margin; + margin-right: @base-margin; } [data-alert-close] { diff --git a/src/less/components/badge.less b/src/less/components/badge.less index 77fc56eea..df6020fdf 100644 --- a/src/less/components/badge.less +++ b/src/less/components/badge.less @@ -10,7 +10,7 @@ .badge { color: @white; - padding: 0.125rem @badge-margin-s; + padding: @badge-padding; border-radius: 0.1875rem; .for-each(@badge in @badge-list) { diff --git a/src/less/components/button.less b/src/less/components/button.less index a5b3bbb63..d46929bb9 100644 --- a/src/less/components/button.less +++ b/src/less/components/button.less @@ -21,7 +21,7 @@ line-height: 1; & + * { - margin-left: @btn-margin-s; + margin-left: @base-margin-sm; } } @@ -97,7 +97,7 @@ border-radius: 0; border-bottom: 2px solid @blue; padding: 0; - margin: 0 @btn-margin; + margin: 0 @base-margin; &:active, &.active, @@ -175,7 +175,7 @@ // Vertically space out multiple block buttons &.btn-block + .btn-block { - margin-top: @btn-margin-s; + margin-top: @base-margin-sm; } // Specificity overrides diff --git a/src/less/components/card.less b/src/less/components/card.less index 0057df29c..45d6076f8 100644 --- a/src/less/components/card.less +++ b/src/less/components/card.less @@ -21,15 +21,15 @@ min-width: 18rem; max-width: 18rem; flex: 1; - margin: 0 @card-margin-l @card-margin; + margin: @card-margin; header { - padding: 0 @card-padding; + padding: 0 @base-padding; /* stylelint-disable selector-list-comma-newline-after */ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { - margin: @card-margin 0; + margin: @base-margin 0; } /* stylelint-enable selector-list-comma-newline-after */ @@ -72,7 +72,7 @@ } .highlight { - padding: @card-padding*2; + padding: @base-padding-xl; background-color: @gray-10; display: flex; justify-content: center; @@ -83,7 +83,7 @@ font-size: 2rem; line-height: 2rem; color: @gray-3; - margin-right: @card-margin-s; + margin-right: @base-margin-sm; } .highlight-wrapper { @@ -104,17 +104,17 @@ } .card-body { - padding: @card-padding; + padding: @base-padding; } footer { border-top: 1px solid @gray-9; - padding: @card-padding @card-padding*2; + padding: @base-padding @base-padding-xl; margin-top: auto; .footer-text { p { - margin-bottom: @card-margin-xs; + margin-bottom: @base-margin-xs; } } diff --git a/src/less/components/datepicker.less b/src/less/components/datepicker.less index 57c911fe5..52589d7bf 100644 --- a/src/less/components/datepicker.less +++ b/src/less/components/datepicker.less @@ -8,7 +8,7 @@ .rd-container { display: none; background-color: @datepicker-background-color; - padding: @datepicker-padding @datepicker-padding-s; + padding: @base-padding @base-padding-sm; text-align: center; box-shadow: @datepicker-box-shadow; z-index: @zindex-datepicker; @@ -41,7 +41,7 @@ border: none; outline: none; background: none; - padding: 0 @datepicker-padding-s; + padding: 0 @base-padding-sm; margin: 0; } diff --git a/src/less/components/forms.less b/src/less/components/forms.less index 76d3f1b81..9d0884b82 100644 --- a/src/less/components/forms.less +++ b/src/less/components/forms.less @@ -1,7 +1,7 @@ label { display: inline-block; max-width: 100%; - margin-bottom: 0.25rem; + margin-bottom: @base-margin-xs; text-transform: uppercase; font-weight: @font-weight-light; font-size: @base-font-size * 0.9; @@ -17,7 +17,7 @@ fieldset { // so we reset that to ensure it behaves more like a standard block element. // See https://github.com/twbs/bootstrap/issues/12359. min-width: 0; - margin-bottom: @fieldset-margin; + margin-bottom: @base-margin; &:disabled { textarea { @@ -201,7 +201,7 @@ legend { } .form-group { - margin-bottom: @form-margin; + margin-bottom: @base-margin; .validation-success, .validation-warning, @@ -255,9 +255,9 @@ legend { } } -.help-block { // Todo: cleanup +.help-block { display: block; - margin: 0.325rem 0; + margin: @helpblock-margin; color: lighten(@text-color, 25%); text-transform: uppercase; font-size: @base-font-size * 0.8; @@ -272,8 +272,8 @@ select[multiple] { height: auto; padding: 0; - option { //Todo: cleanup - padding: 0.187rem 0.375rem; + option { + padding: @select-option-margin; } } @@ -285,7 +285,7 @@ select[multiple] { align-items: center; &:not(:last-child) { - margin-bottom: @checkbox-margin-s; + margin-bottom: @base-margin-sm; } label { @@ -296,7 +296,7 @@ select[multiple] { } input[type=checkbox] { - margin-right: @checkbox-margin; + margin-right: @base-margin; opacity: 0; + label:before { @@ -350,7 +350,7 @@ select[multiple] { align-items: center; &:not(:last-child) { - margin-bottom: @radio-margin-s; + margin-bottom: @base-margin-sm; } label { @@ -361,7 +361,7 @@ select[multiple] { } input[type=radio] { - margin-right: @radio-margin; + margin-right: @base-margin; opacity: 0; + label:before { @@ -415,7 +415,7 @@ select[multiple] { align-items: center; &:not(:last-child) { - margin-bottom: @togglebox-margin-s; + margin-bottom: @base-margin-sm; } label { @@ -423,7 +423,7 @@ select[multiple] { } input[type=checkbox] { - margin-right: @togglebox-margin-s; + margin-right: @base-margin-sm; height: @checkbox-height; width: @checkbox-width * 2; @@ -623,7 +623,7 @@ select[multiple] { height: @thumb-size; box-sizing: border-box; background: transparent; - margin-top: @rangeslider-margin-l; + margin-top: @base-margin-xl; &.rangeslider-brand { .slider-color(@brand-primary); @@ -639,7 +639,7 @@ select[multiple] { &.label-right { .value-label { - margin-left: @rangeslider-margin; + margin-left: @base-margin; position: relative; height: @thumb-size; diff --git a/src/less/components/media-object.less b/src/less/components/media-object.less index d98cac8d8..17db5531a 100644 --- a/src/less/components/media-object.less +++ b/src/less/components/media-object.less @@ -1,6 +1,6 @@ .media { display: flex; - margin-bottom: @x-media-margin; + margin-bottom: @base-margin; .media-img { display: flex; @@ -43,7 +43,7 @@ } .media-body { - padding: 0 @x-media-padding; + padding: 0 @base-padding; display: flex; flex-direction: column; justify-content: center; @@ -57,7 +57,7 @@ /* stylelint-enable selector-list-comma-newline-after */ p { - margin-top: -@x-media-margin-s; + margin-top: -@base-margin-sm; } } } diff --git a/src/less/components/pagination.less b/src/less/components/pagination.less index 110e7651f..ec5261a88 100644 --- a/src/less/components/pagination.less +++ b/src/less/components/pagination.less @@ -1,7 +1,7 @@ .pagination { display: inline-block; padding-left: 0; - margin: @pagination-margin 0; + margin: @base-margin 0; li { display: inline; @@ -9,7 +9,7 @@ a, span { - margin: 0 @pagination-margin-s; + margin: 0 @base-margin-sm; font-weight: bold; color: @pagination-default-color; display: inline-block; @@ -174,7 +174,7 @@ &.pagination-bullets { li:not(.arrow-start):not(.arrow-back):not(.arrow-forward):not(.arrow-end) { - margin: 0 @pagination-bullets-margin; + margin: 0 @base-margin-xs; a, span { diff --git a/src/less/core/lists.less b/src/less/core/lists.less index 532a601d0..2e91661ef 100644 --- a/src/less/core/lists.less +++ b/src/less/core/lists.less @@ -63,7 +63,7 @@ border-bottom: @border-width solid @gray-9; > * { - margin-left: @spacer/2; + margin-left: @base-margin-sm; } > :first-child { diff --git a/src/less/core/tables.less b/src/less/core/tables.less index 34deec98f..b68f84e86 100644 --- a/src/less/core/tables.less +++ b/src/less/core/tables.less @@ -1,7 +1,7 @@ .table { width: 100%; max-width: 100%; - margin-bottom: @spacer; + margin-bottom: @base-margin; background-color: @table-bg; th { From 5ce39ff95c746164d8d87d4870f7163b459b69bb Mon Sep 17 00:00:00 2001 From: Aksel Christoffer Wiig Date: Mon, 1 Oct 2018 13:44:55 +0200 Subject: [PATCH 047/159] core/* less cleaned up --- src/less/_variables.less | 2 -- src/less/core/global.less | 6 +++--- src/less/core/lists.less | 14 +++++++------- src/less/core/tables.less | 10 +++++----- 4 files changed, 15 insertions(+), 17 deletions(-) diff --git a/src/less/_variables.less b/src/less/_variables.less index ea4fc43d6..3bbdbb999 100644 --- a/src/less/_variables.less +++ b/src/less/_variables.less @@ -279,8 +279,6 @@ @list-inline-padding: @base-padding-sm; -@hr-margin-y: @base-margin; - // ========================================================================== // diff --git a/src/less/core/global.less b/src/less/core/global.less index 01fe1087b..a31094d0d 100644 --- a/src/less/core/global.less +++ b/src/less/core/global.less @@ -106,8 +106,8 @@ img { // Horizontal rules hr { - margin-top: @hr-margin-y; - margin-bottom: @hr-margin-y; + margin-top: @base-margin; + margin-bottom: @base-margin; border: 0; border-top: 1px solid @gray-9; } @@ -116,7 +116,7 @@ hr { ul, ol { margin-top: 0; - margin-bottom: @base-margin; + margin-bottom: @base-margin-xs; ul, ol { diff --git a/src/less/core/lists.less b/src/less/core/lists.less index 2e91661ef..4a84c54bc 100644 --- a/src/less/core/lists.less +++ b/src/less/core/lists.less @@ -5,19 +5,19 @@ ul, ol { - padding-left: 1.5rem; + padding-left: @base-padding-lg; list-style: none; } } // Inline turns list items into inline-block .list-inline { - margin-left: -5px; + margin-left: -@base-margin-xs; > li { display: inline-block; - padding-left: 5px; - padding-right: 5px; + padding-left: @base-padding-xs; + padding-right: @base-padding-xs; } } @@ -28,7 +28,7 @@ font-size: @base-font-size * 0.9; line-height: 1.7rem; color: @gray-3; - margin-top: 1rem; + margin-top: @base-margin; } dd { @@ -45,7 +45,7 @@ display: flex; .material-icons { - margin-right: 0.5rem; + margin-right: @base-margin-sm; } } } @@ -58,7 +58,7 @@ li { display: flex; - padding: 1rem; + padding: @base-padding; align-items: center; border-bottom: @border-width solid @gray-9; diff --git a/src/less/core/tables.less b/src/less/core/tables.less index b68f84e86..730ec25e6 100644 --- a/src/less/core/tables.less +++ b/src/less/core/tables.less @@ -15,10 +15,10 @@ > .btn { float: left; - padding: 2px 5px; + padding: @base-margin-xs/2 @base-margin-xs; margin-top: 0; - margin-right: 5px; - margin-bottom: -4px; + margin-right: @base-margin-xs; + margin-bottom: -@base-margin-xs; } > .material-icons { @@ -130,11 +130,11 @@ tr { td { - padding: 5px 10px; + padding: @base-padding-xs @base-padding*0.625; } th { - padding: 0 10px; + padding: 0 @base-padding*0.625; line-height: @base-font-size * 2.8; } From f3f7660bca30b24f8d27004a2410bfd3aed5bca7 Mon Sep 17 00:00:00 2001 From: Aksel Christoffer Wiig Date: Mon, 1 Oct 2018 14:09:39 +0200 Subject: [PATCH 048/159] less cleanup v1 done --- src/less/_variables.less | 6 +----- src/less/components/button.less | 6 +++--- src/less/themes/documentation.less | 22 +++++++++++----------- 3 files changed, 15 insertions(+), 19 deletions(-) diff --git a/src/less/_variables.less b/src/less/_variables.less index 3bbdbb999..9107e77ff 100644 --- a/src/less/_variables.less +++ b/src/less/_variables.less @@ -113,14 +113,10 @@ /* Cursor */ @cursor-disabled: not-allowed; +/* Button */ @padding-base-vertical: 0.375rem; @padding-base-horizontal: 0.75rem; -@padding-large-vertical: @base-padding-sm; -@padding-large-horizontal: @base-padding; -@padding-small-vertical: @base-padding-xs; -@padding-small-horizontal: @base-padding-sm; @padding-xs-vertical: 0.1rem; -@padding-xs-horizontal: @base-padding-xs; /* Borders */ @border-width: 1px; diff --git a/src/less/components/button.less b/src/less/components/button.less index d46929bb9..e261a9746 100644 --- a/src/less/components/button.less +++ b/src/less/components/button.less @@ -153,16 +153,16 @@ &.btn-lg { // line-height: ensure even-numbered height of button next to large input border-width: 2px; - .button-size(@padding-large-vertical; @padding-large-horizontal; @font-size-large; @line-height-large; @btn-border-radius-large); + .button-size(@base-padding-sm; @base-padding; @font-size-large; @line-height-large; @btn-border-radius-large); } &.btn-sm { // line-height: ensure proper height of button next to small input - .button-size(@padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @btn-border-radius-small); + .button-size(@base-padding-xs; @base-padding-sm; @font-size-small; @line-height-small; @btn-border-radius-small); } &.btn-xs { - .button-size(@padding-xs-vertical; @padding-xs-horizontal; @font-size-small; @line-height-small; @btn-border-radius-small); + .button-size(@padding-xs-vertical; @base-padding-xs; @font-size-small; @line-height-small; @btn-border-radius-small); } // Block button diff --git a/src/less/themes/documentation.less b/src/less/themes/documentation.less index bb3b3be5a..713adc212 100644 --- a/src/less/themes/documentation.less +++ b/src/less/themes/documentation.less @@ -12,8 +12,8 @@ width: 100%; @media (max-width: @screen-md-max) { - padding-left: 1rem; - padding-right: 1rem; + padding-left: @base-padding; + padding-right: @base-padding; } } @@ -40,10 +40,10 @@ } .documentation-nav { - padding: 1rem; + padding: @base-padding; .nav-group { - margin-bottom: 1rem; + margin-bottom: @base-margin; a { padding: 0.25rem 2.25rem; @@ -137,7 +137,7 @@ h1 { color: @text-light; - padding-left: 2rem; + padding-left: @base-padding-xl; margin: 0; font-weight: @font-weight-normal; line-height: 80px; @@ -153,7 +153,7 @@ } .doc-search { - padding: 1rem 15px; + padding: @base-padding 15px; border-bottom: 1px solid rgba(0, 0, 0, 0.075); .doc-search-input { @@ -178,7 +178,7 @@ .doc-toc { position: sticky; top: 100px; - margin-top: -2rem; + margin-top: -@base-margin-xl; ul { list-style: none; @@ -186,12 +186,12 @@ li { border-left: 1px solid rgba(0, 0, 0, 0.1); - padding-left: 1rem; + padding-left: @base-padding; &.active { border-left: 2px solid rgba(45, 169, 68, 0.7); font-weight: @font-weight-bold; - padding-left: calc(1rem - 1px); + padding-left: calc(@base-padding - 1px); } a { @@ -204,8 +204,8 @@ .showcase-panel { position: relative; background-color: @white; - padding: 1.5rem; - margin: 0.5rem 0 1rem 0; + padding: @base-padding-lg; + margin: @base-margin-sm 0 @base-margin 0; border-radius: 2px; box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2); } From 3059eb7006fb3b8223675987e2943993be7ee881 Mon Sep 17 00:00:00 2001 From: Aksel Christoffer Wiig Date: Mon, 1 Oct 2018 14:18:30 +0200 Subject: [PATCH 049/159] Updated less ToC --- src/less/_variables.less | 58 +++++++++++++++++++--------------------- 1 file changed, 28 insertions(+), 30 deletions(-) diff --git a/src/less/_variables.less b/src/less/_variables.less index 9107e77ff..4035dcd70 100644 --- a/src/less/_variables.less +++ b/src/less/_variables.less @@ -15,22 +15,20 @@ // COMPONENTS // =============== // 6. Action List -// 7. Alert -// 8. Badge -// 9. Breadcrumb -// 10. Button -// 11. Card -// 12. Datepicker -// 13. Dialog -// 14. Form -// 15. Media object -// 16. Modal (deprecated) -// 17. Pagination -// 18. Panel -// 19. Sheet -// 20. Status -// 22. Toast -// 24. Topbar +// 7. Badge +// 8. Breadcrumb +// 9. Button +// 10. Card +// 11. Datepicker +// 12. Dialog +// 13. Form +// 14. Modal (deprecated) +// 15. Pagination +// 16. Panel +// 17. Sheet +// 18. Status +// 19. Toast +// 20. Topbar // ========================================================================== // @@ -287,14 +285,14 @@ @action-menu-a-padding: round(@base-padding/3, 1); -// 8. Badge +// 7. Badge // ========================================================================== @badge-list: default @gray-8, brand @green, blue @blue, purple @purple, yellow @yellow, red @red; @badge-padding: @base-margin*0.125 @base-margin-sm; -// 9. Breadcrumb +// 8. Breadcrumb // ========================================================================== // Todo: clean this up when progress tracker is remade @@ -327,7 +325,7 @@ @breadcrumb-arrow-bg-sm: @breadcrumb-arrow-border-sm - @breadcrumb-arrow-border-size-sm; -// 10. Button +// 9. Button // ========================================================================== @btn-border-radius-base: 3px; @@ -348,17 +346,17 @@ @btn-link-disabled-color: @gray-6; -// 11. Card +// 10. Card // ========================================================================== @card-margin: 0 @base-margin-xl @base-margin; -// 12. Datepicker +// 11. Datepicker // ========================================================================== @datepicker-rd-padding: round(@base-padding/3, 1); -// 13. Dialog +// 12. Dialog // ========================================================================== /* Colors */ @@ -374,7 +372,7 @@ @dialog-size: 500px; -// 14. Form +// 13. Form // ========================================================================== @input-padding-y: 0.375rem; @@ -412,7 +410,7 @@ @range-height: @checkbox-height / 2; @thumb-size: @checkbox-height; -// 16. Modal (deprecated) +// 14. Modal (deprecated) // ========================================================================== /* Colors */ @@ -437,7 +435,7 @@ @modal-size-lg: 1000px; -// 17. Pagination +// 15. Pagination // ========================================================================== @pagination-active-color: @brand-primary; @@ -445,7 +443,7 @@ @pagination-bullet-size: @status-size; -// 18. Panel +// 16. Panel // ========================================================================== /* Colors */ @@ -471,7 +469,7 @@ @panel-footer-padding: @base-padding @base-padding-xl @base-padding-sm @base-padding-xl; -// 19. Sheet +// 17. Sheet // ========================================================================== @sheet-backdrop-bg: fade(@black, 50%); @@ -483,14 +481,14 @@ @sheet-width: 580px; -// 20. Status +// 18. Status // ========================================================================== @status-size: 13px; @status-padding: 10; -// 22. Toast +// 19. Toast // ========================================================================== @toast-height: 48px; @@ -498,7 +496,7 @@ @toast-text-color: @text-color; @toast-action-color: @yellow; -// 24. Topbar +// 20. Topbar // ========================================================================== @topbar-height: 70px; From b35707e08260a05456297973f69b5caafde255cc Mon Sep 17 00:00:00 2001 From: Erik Hallaraaker Date: Mon, 1 Oct 2018 14:18:55 +0200 Subject: [PATCH 050/159] Optimized script for action list and added tests. --- src/px-script/action-list/index.js | 22 +++++--- src/px-script/action-list/index.test.js | 72 +++++++++++++++++++++++-- 2 files changed, 81 insertions(+), 13 deletions(-) diff --git a/src/px-script/action-list/index.js b/src/px-script/action-list/index.js index 26025b3a3..ff2094993 100644 --- a/src/px-script/action-list/index.js +++ b/src/px-script/action-list/index.js @@ -2,26 +2,32 @@ import { isWithinBoundingBox } from "../utils"; class ActionList { constructor (element) { - this.isOpen = false; this.container = element; this.toggleBtn = element.querySelector("i.material-icons"); this.actionMenu = element.querySelector(".action-menu"); + this.actionMenuLinks = this.actionMenu.querySelectorAll("a"); + this.isOpen = this.actionMenu.classList.contains("active"); + + this.toggleBtn.addEventListener("click", e => { + e.stopPropagation(); - this.toggleBtn.addEventListener("click", () => { if (!this.isOpen) { - this.openMenu(); + this.open(); } else { - this.closeMenu(); + this.close(); } }); + + // close menu when clicking on links + this.actionMenuLinks.forEach(link => link.addEventListener("click", () => this.close())); } - openMenu () { + open () { this.actionMenu.classList.add("active"); this.isOpen = true; } - closeMenu () { + close () { this.actionMenu.classList.remove("active"); this.isOpen = false; } @@ -38,9 +44,9 @@ const actionList = (() => { actionLists.forEach(l => { const list = new ActionList(l); - document.querySelector("html").addEventListener("mousedown", e => { + document.querySelector("html").addEventListener("click", e => { if (list.isOpen && !list.containsPoint(e.clientX, e.clientY)) { - list.closeMenu(); + list.close(); } }); }); diff --git a/src/px-script/action-list/index.test.js b/src/px-script/action-list/index.test.js index b9168fa52..c2e5b9aee 100644 --- a/src/px-script/action-list/index.test.js +++ b/src/px-script/action-list/index.test.js @@ -8,14 +8,12 @@ describe("px-script: action-list", () => { document.body.appendChild(div); - const ActionList = () => ( + const ActionList = ({ active }) => (
    more_vert - ); @@ -33,10 +31,74 @@ describe("px-script: action-list", () => { ReactDOM.render(, div); const renderedActionList = document.querySelector(".action-list"); + const toggleBtn = renderedActionList.querySelector("i.material-icons"); + const actionMenu = renderedActionList.querySelector(".action-menu"); expect(renderedActionList).toBeDefined(); + expect(toggleBtn).toBeDefined(); + expect(actionMenu).toBeDefined(); + expect(actionMenu.classList).not.toContain("active"); - // TODO: Continue here... [EH] + actionList.init(); + toggleBtn.click(); + + expect(actionMenu.classList).toContain("active"); + + ReactDOM.unmountComponentAtNode(div); + }); + + it("closes when clicking on icon while open", () => { + ReactDOM.render(, div); + + const renderedActionList = document.querySelector(".action-list"); + const toggleBtn = renderedActionList.querySelector("i.material-icons"); + const actionMenu = renderedActionList.querySelector(".action-menu"); + + expect(renderedActionList).toBeDefined(); + expect(toggleBtn).toBeDefined(); + expect(actionMenu).toBeDefined(); + expect(actionMenu.classList).toContain("active"); + + actionList.init(); + toggleBtn.click(); + + expect(actionMenu.classList).not.toContain("active"); + + ReactDOM.unmountComponentAtNode(div); + }); + + it("closes open action menu when clicking on a link", () => { + ReactDOM.render(, div); + + const renderedActionList = document.querySelector(".action-list"); + const actionMenu = renderedActionList.querySelector(".action-menu"); + + expect(renderedActionList).toBeDefined(); + expect(actionMenu).toBeDefined(); + expect(actionMenu.classList).toContain("active"); + + actionList.init(); + actionMenu.querySelector("a").click(); + + expect(actionMenu.classList).not.toContain("active"); + + ReactDOM.unmountComponentAtNode(div); + }); + + it("closes when clicking outside menu while open", () => { + ReactDOM.render(, div); + + const renderedActionList = document.querySelector(".action-list"); + const actionMenu = renderedActionList.querySelector(".action-menu"); + + expect(renderedActionList).toBeDefined(); + expect(actionMenu).toBeDefined(); + expect(actionMenu.classList).toContain("active"); + + actionList.init(); + document.querySelector("html").click(); // for clicking outside action list + + expect(actionMenu.classList).not.toContain("active"); ReactDOM.unmountComponentAtNode(div); }); From 45212e65fc6cfe2529e5f78fc03a013f1d49d3fb Mon Sep 17 00:00:00 2001 From: Erik Hallaraaker Date: Mon, 1 Oct 2018 14:22:03 +0200 Subject: [PATCH 051/159] Removed modal from designguide --- CHANGELOG.md | 2 + .../__snapshots__/index.test.js.snap | 10 - .../Modal/__snapshots__/index.test.js.snap | 99 --- .../Documentation/components/Modal/index.js | 80 --- .../components/Modal/index.test.js | 52 -- .../Modal/__snapshots__/index.test.js.snap | 658 ------------------ src/App/components/Modal/index.js | 65 -- src/App/components/Modal/index.test.js | 139 ---- src/App/routes/docs.js | 5 - src/less/_mixins.less | 3 - src/less/_variables.less | 49 +- src/less/components/modal.less | 137 ---- src/less/mixins/modal-variant.less | 22 - src/less/px.less | 1 - 14 files changed, 14 insertions(+), 1308 deletions(-) delete mode 100644 src/App/Documentation/components/Modal/__snapshots__/index.test.js.snap delete mode 100644 src/App/Documentation/components/Modal/index.js delete mode 100644 src/App/Documentation/components/Modal/index.test.js delete mode 100644 src/App/components/Modal/__snapshots__/index.test.js.snap delete mode 100644 src/App/components/Modal/index.js delete mode 100644 src/App/components/Modal/index.test.js delete mode 100644 src/less/components/modal.less delete mode 100644 src/less/mixins/modal-variant.less diff --git a/CHANGELOG.md b/CHANGELOG.md index 5aa9df06f..b0e3180a3 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -16,3 +16,5 @@ - Fixed an issue with datepicker not displaying properly, or at all, when clicking on label. ### Removed + +- Removed modal from designguide. diff --git a/src/App/Documentation/__snapshots__/index.test.js.snap b/src/App/Documentation/__snapshots__/index.test.js.snap index d0697c813..dbdd1806b 100644 --- a/src/App/Documentation/__snapshots__/index.test.js.snap +++ b/src/App/Documentation/__snapshots__/index.test.js.snap @@ -336,16 +336,6 @@ exports[`Documentation: index renders 1`] = ` "path": "/docs/components/media-object", "title": "Media Object", }, - Object { - "component": Object { - "Demo": [Function], - "ModalText": [Function], - "Usage": [Function], - "default": [Function], - }, - "path": "/docs/components/modal", - "title": "Modal (deprecated)", - }, Object { "component": Object { "DefaultPagination": [Function], diff --git a/src/App/Documentation/components/Modal/__snapshots__/index.test.js.snap b/src/App/Documentation/components/Modal/__snapshots__/index.test.js.snap deleted file mode 100644 index 67cb47c93..000000000 --- a/src/App/Documentation/components/Modal/__snapshots__/index.test.js.snap +++ /dev/null @@ -1,99 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Documentation: Modal Demo renders 1`] = ` - -

    - Demo -

    -

    - Live modal -

    - - -

    - Modal body text goes here. -

    -     -     -     -`; - -exports[`Documentation: Modal ModalText renders 1`] = ` -
    - -

    - Modals... -

    - - -
    -`; - -exports[`Documentation: Modal Usage renders 1`] = ` - -

    - Usage -

    -

    - Static modal -

    - - -

    - Modal body text goes here. -

    -     -     -     -`; - -exports[`Documentation: Modal renders 1`] = ` -
    -
    - - -
    -
    -`; diff --git a/src/App/Documentation/components/Modal/index.js b/src/App/Documentation/components/Modal/index.js deleted file mode 100644 index a893c4fcc..000000000 --- a/src/App/Documentation/components/Modal/index.js +++ /dev/null @@ -1,80 +0,0 @@ -import React, { Component } from "react"; - -import { ComponentPreview, DocToc, DeprecatedComponentAlert } from "#"; -import { modal } from "$/px-script"; -import ModalComponent from "@/Modal"; - -const Usage = () => ( - <> -

    Usage

    -

    Static modal

    - - -

    Modal body text goes here.

    -     -     - -); - -const Demo = () => ( - <> -

    Demo

    -

    Live modal

    - - -

    Modal body text goes here.

    -     -     - -); - -const ModalText = () => ( -
    - -

    Modals...

    - - -
    -); - -class Modal extends Component { - componentDidMount () { - modal.init(); - } - - render () { - return ( -
    -
    - - -
    -
    - ); - } -} - -export default Modal; - -/* For testing */ -export { Usage, Demo, ModalText }; diff --git a/src/App/Documentation/components/Modal/index.test.js b/src/App/Documentation/components/Modal/index.test.js deleted file mode 100644 index 4f9388dd1..000000000 --- a/src/App/Documentation/components/Modal/index.test.js +++ /dev/null @@ -1,52 +0,0 @@ -import React from "react"; -import { shallow } from "enzyme"; - -import Modal, { Usage, Demo, ModalText } from "./index"; - -describe("Documentation: Modal", () => { - it("is defined", () => { - expect(Modal).toBeDefined(); - }); - - it("renders", () => { - const wrapper = shallow(); - - expect(wrapper).toMatchSnapshot(); - }); - - describe("Usage", () => { - it("is defined", () => { - expect(Usage).toBeDefined(); - }); - - it("renders", () => { - const wrapper = shallow(); - - expect(wrapper).toMatchSnapshot(); - }); - }); - - describe("Demo", () => { - it("is defined", () => { - expect(Demo).toBeDefined(); - }); - - it("renders", () => { - const wrapper = shallow(); - - expect(wrapper).toMatchSnapshot(); - }); - }); - - describe("ModalText", () => { - it("is defined", () => { - expect(ModalText).toBeDefined(); - }); - - it("renders", () => { - const wrapper = shallow(); - - expect(wrapper).toMatchSnapshot(); - }); - }); -}); diff --git a/src/App/components/Modal/__snapshots__/index.test.js.snap b/src/App/components/Modal/__snapshots__/index.test.js.snap deleted file mode 100644 index 720db7def..000000000 --- a/src/App/components/Modal/__snapshots__/index.test.js.snap +++ /dev/null @@ -1,658 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Component: Modal - prop footerAlignment is an enum requires value 'centered' or 'right' 1`] = ` - -
    -
    - -
    -     -`; - -exports[`Component: Modal - prop size is is an enum which requires value 'small', 'medium' or 'large' 1`] = ` - -
    -
    - -
    -     -`; - -exports[`Component: Modal - prop size is marked as required 1`] = ` - -
    -
    - -
    -     -`; - -exports[`Component: Modal - prop type is is an enum which requires value 'brand' or 'default' 1`] = ` - -
    -
    - -
    -     -`; - -exports[`Component: Modal - prop type is marked as required 1`] = ` - -
    -
    - -
    -     -`; - -exports[`Component: Modal - renders 1`] = ` - -
    -
    - -
    -     -`; - -exports[`Component: Modal - renders a button component when prop button is true 1`] = ` - - - - - - - -`; - -exports[`Component: Modal - renders a footer when prop footerText is provided 1`] = ` - -
    -
    -
    - - - - - - - close - - - - -
    -
    - - - - - - -
    -
    -
    -
    -     -`; - -exports[`Component: Modal - renders a footer with alignment when prop footerText and footerAlignment is provided 1`] = ` - -
    -
    -
    - - - - - - - close - - - - -
    -
    - - - - - - -
    -
    -
    -
    -     -`; - -exports[`Component: Modal - renders a header tag with subtitle but without title when prop subTitle is provided but title is not 1`] = ` - -
    -
    - -
    -     -`; - -exports[`Component: Modal - renders with a header and subtitle when prop title and subTitle is provided 1`] = ` - -
    -
    - -
    -     -`; - -exports[`Component: Modal - renders with a header without subtitle when prop title is provided and prop subTitle is missing 1`] = ` - -
    -
    - -
    -     -`; - -exports[`Component: Modal - renders with class 'd-block' when prop visible is true 1`] = ` - -
    -
    - -
    -     -`; - -exports[`Component: Modal - renders with class 'static' when prop isStatic is true 1`] = ` - -
    -
    - -
    -     -`; - -exports[`Component: Modal - renders without header when prop title is missing 1`] = ` - -
    -
    - -
    -     -`; diff --git a/src/App/components/Modal/index.js b/src/App/components/Modal/index.js deleted file mode 100644 index f1fdc682e..000000000 --- a/src/App/components/Modal/index.js +++ /dev/null @@ -1,65 +0,0 @@ -import React from "react"; -import PropTypes from "prop-types"; -import classnames from "classnames"; - -const ModalHeading = ({ title, subTitle }) => ( -
    - {title ?

    {title}

    : null} - {subTitle ?

    {subTitle}

    : null} -
    -); - -const OpenModalButton = ({ id }) => ( - -); - -const Modal = ({ title, subTitle, id, footerText, footerAlignment, type, size, visible, isStatic, button, children }) => { - const modalClasses = classnames( - "modal", - type ? `modal-${type}` : null, - size ? `modal-${size}` : null, - isStatic ? "static" : null, - visible ? "d-block" : null - ); - - return ( - <> - {button ? "\n\n" : null} - {button ? : null} - - ); -}; - -Modal.propTypes = { - title: PropTypes.string, - subTitle: PropTypes.string, - id: PropTypes.string, - footerText: PropTypes.string, - footerAlignment: PropTypes.oneOf(["centered", "right"]), - type: PropTypes.oneOf(["brand", "default"]).isRequired, - size: PropTypes.oneOf(["small", "medium", "large"]).isRequired, - visible: PropTypes.bool, - isStatic: PropTypes.bool, - button: PropTypes.bool -}; - -export default Modal; diff --git a/src/App/components/Modal/index.test.js b/src/App/components/Modal/index.test.js deleted file mode 100644 index 55fc83559..000000000 --- a/src/App/components/Modal/index.test.js +++ /dev/null @@ -1,139 +0,0 @@ -import React from "react"; -import { shallow } from "enzyme"; - -import Modal from "./index"; - -describe("Component: Modal - ", () => { - - it("is defined", () => { - expect(Modal).toBeDefined(); - }); - - it("renders", () => { - const wrapper = shallow(); - - expect(wrapper).toMatchSnapshot(); - expect(wrapper.html()).toContain("modal"); - expect(wrapper.html()).toContain("modal-default"); - expect(wrapper.html()).toContain("modal-large"); - }); - - it("prop type is marked as required", () => { - console.error = jest.fn(); - - const wrapper = shallow(); - - expect(wrapper).toMatchSnapshot(); - expect(wrapper.html()).toContain("modal-large"); - expect(console.error).toHaveBeenCalled(); - }); - - it("prop size is marked as required", () => { - console.error = jest.fn(); - - const wrapper = shallow(); - - expect(wrapper).toMatchSnapshot(); - expect(wrapper.html()).toContain("modal-default"); - expect(console.error).toHaveBeenCalled(); - }); - - it("prop type is is an enum which requires value 'brand' or 'default'", () => { - console.error = jest.fn(); - - const wrapper = shallow(); - - expect(wrapper).toMatchSnapshot(); - expect(console.error).toHaveBeenCalled(); - }); - - it("prop size is is an enum which requires value 'small', 'medium' or 'large'", () => { - console.error = jest.fn(); - - const wrapper = shallow(); - - expect(wrapper).toMatchSnapshot(); - expect(console.error).toHaveBeenCalled(); - }); - - it("prop footerAlignment is an enum requires value 'centered' or 'right'", () => { - console.error = jest.fn(); - - const wrapper = shallow(); - - expect(wrapper).toMatchSnapshot(); - expect(console.error).toHaveBeenCalled(); - }); - - it("renders with class 'static' when prop isStatic is true", () => { - const wrapper = shallow(); - - expect(wrapper).toMatchSnapshot(); - expect(wrapper.html()).toContain("static"); - }); - - it("renders with class 'd-block' when prop visible is true", () => { - const wrapper = shallow(); - - expect(wrapper).toMatchSnapshot(); - expect(wrapper.html()).toContain("d-block"); - }); - - it("renders without header when prop title is missing", () => { - const wrapper = shallow(); - - expect(wrapper).toMatchSnapshot(); - expect(wrapper.html()).not.toContain("header"); - expect(wrapper.html()).not.toContain("modal-title"); - }); - - it("renders with a header without subtitle when prop title is provided and prop subTitle is missing", () => { - const wrapper = shallow(); - - expect(wrapper).toMatchSnapshot(); - expect(wrapper.html()).toContain("header"); - expect(wrapper.html()).toContain("modal-title"); - expect(wrapper.html()).not.toContain("modal-sub-title"); - }); - - it("renders with a header and subtitle when prop title and subTitle is provided", () => { - const wrapper = shallow(); - - expect(wrapper).toMatchSnapshot(); - expect(wrapper.html()).toContain("header"); - expect(wrapper.html()).toContain("modal-title"); - expect(wrapper.html()).toContain("modal-sub-title"); - }); - - it("renders a header tag with subtitle but without title when prop subTitle is provided but title is not", () => { - const wrapper = shallow(); - - expect(wrapper).toMatchSnapshot(); - expect(wrapper.html()).toContain("header"); - expect(wrapper.html()).not.toContain("modal-title"); - expect(wrapper.html()).toContain("modal-sub-title"); - }); - - it("renders a footer when prop footerText is provided", () => { - const wrapper = shallow(); - - expect(wrapper).toMatchSnapshot(); - expect(wrapper.html()).toContain("footer"); - }); - - it("renders a footer with alignment when prop footerText and footerAlignment is provided", () => { - const wrapper = shallow(); - - expect(wrapper).toMatchSnapshot(); - expect(wrapper.html()).toContain("footer"); - expect(wrapper.html()).toContain("modal-footer-centered"); - }); - - it("renders a button component when prop button is true", () => { - const wrapper = shallow(); - - expect(wrapper).toMatchSnapshot(); - expect(wrapper.html()).toContain("button"); - expect(wrapper.html()).toContain("data-modal-open"); - }); -}); diff --git a/src/App/routes/docs.js b/src/App/routes/docs.js index 301da2537..cebeafa55 100644 --- a/src/App/routes/docs.js +++ b/src/App/routes/docs.js @@ -144,11 +144,6 @@ export default [ path: "/docs/components/media-object", component: require("../Documentation/components/MediaObject") }, - { - title: "Modal (deprecated)", - path: "/docs/components/modal", - component: require("../Documentation/components/Modal") - }, { title: "Pagination", path: "/docs/components/pagination", diff --git a/src/less/_mixins.less b/src/less/_mixins.less index 4716092dd..613fa0489 100644 --- a/src/less/_mixins.less +++ b/src/less/_mixins.less @@ -26,9 +26,6 @@ // Loader @import "mixins/loader"; -// Modal -@import "mixins/modal-variant"; - // Panel @import "mixins/panel-variant"; diff --git a/src/less/_variables.less b/src/less/_variables.less index 18ae27369..0f67cfea7 100644 --- a/src/less/_variables.less +++ b/src/less/_variables.less @@ -19,13 +19,12 @@ // 8. Button // 9. Dialog // 10. Form -// 11. Modal -// 12. Pagination -// 13. Panel -// 14. Sheet -// 15. Status -// 16. Toast -// 17. Topbar +// 11. Pagination +// 12. Panel +// 13. Sheet +// 14. Status +// 15. Toast +// 16. Topbar // ========================================================================== // @@ -400,31 +399,7 @@ @range-webkit-bg: linear-gradient(90deg, @brand-primary, @brand-primary) 0 100% no-repeat content-box; -// 11. Modal -// ========================================================================== - -/* Colors */ -@modal-background-color: transparent; -@modal-content-bg: @white; -@modal-default-color: @gray-8; -@modal-default-border-color: @gray-9; -@modal-box-shadow: 0 0 30px rgba(133, 133, 133, 0.2); -@modal-backdrop-bg: @black; -@modal-backdrop-opacity: 0.5; - -@modal-margin: 2rem; - -@modal-heading-padding: 1rem 2rem; -@modal-body-padding: 2rem 2rem 1rem 2rem; -@modal-footer-margin: 0; -@modal-footer-padding: 1rem 2rem 0.6rem 2rem; - -@modal-size-sm: 500px; -@modal-size-md: 750px; -@modal-size-lg: 1000px; - - -// 12. Pagination +// 11. Pagination // ========================================================================== @pagination-active-color: @brand-primary; @@ -432,7 +407,7 @@ @pagination-bullet-size: @status-size; -// 13. Panel +// 12. Panel // ========================================================================== /* Colors */ @@ -465,7 +440,7 @@ @panel-collapse-duration: 0.25s; -// 14. Sheet +// 13. Sheet // ========================================================================== @sheet-backdrop-bg: fade(@black, 50%); @@ -477,14 +452,14 @@ @sheet-width: 580px; -// 15. Status +// 14. Status // ========================================================================== @status-size: 13px; @status-padding: 10; -// 16. Toast +// 15. Toast // ========================================================================== @toast-height: 48px; @@ -493,7 +468,7 @@ @toast-action-color: @yellow; -// 17. Topbar +// 16. Topbar // ========================================================================== @topbar-height: 70px; diff --git a/src/less/components/modal.less b/src/less/components/modal.less deleted file mode 100644 index de2353098..000000000 --- a/src/less/components/modal.less +++ /dev/null @@ -1,137 +0,0 @@ -.modal { - position: fixed; - top: 0; - right: 0; - bottom: 0; - left: 0; - z-index: @zindex-modal; - overflow-y: scroll; - outline: 0; - background-color: rgba(0, 0, 0, 0.5); - display: none; - - .modal-default { - .modal-variant(@white, @brand-primary, @modal-default-color); - } - - &.modal-brand { - .modal-variant(@brand-primary, @white, @brand-primary); - } - - &.static { - position: relative; - background-color: transparent; - overflow: initial; - z-index: inherit; - - .modal-dialog { - margin: (@modal-margin / 2) auto; - } - } - - &.modal-small { - .modal-dialog { - max-width: @modal-size-sm; - } - } - - &.modal-medium { - .modal-dialog { - max-width: @modal-size-md; - } - } - - &.modal-large { - .modal-dialog { - max-width: @modal-size-lg; - } - } - - .modal-container { - position: relative; - } - - .modal-dialog { - margin: @modal-margin auto; - background-color: @modal-background-color; - box-shadow: @modal-box-shadow; - } - - header { - padding: @modal-heading-padding; - border-bottom: 1px solid @modal-default-border-color; - } - - .modal-close { - position: absolute; - top: 0.5rem; - right: 0.5rem; - .close-button(); - - &:hover { - opacity: 1; - } - - &:focus { - .tab-focus(); - } - } - - .modal-title { - display: inline-block; - margin-top: 0; - margin-bottom: 0; - - > a, - > small, - > .small, - > small > a, - > .small > a { - color: inherit; - } - } - - .modal-sub-title { - font-weight: normal; - font-style: italic; - display: block; - margin-top: 0; - margin-bottom: 0; - - > a, - > small, - > .small, - > small > a, - > .small > a { - color: inherit; - } - } - - .modal-body { - background-color: @white; - padding: @modal-body-padding; - border-bottom: 1px solid @modal-default-border-color; - &:extend(.clearfix all); - } - - footer { - text-align: left; - background-color: @background-body; - padding: @modal-footer-padding; - margin: @modal-footer-margin; - - &:extend(.clearfix all); - - &.modal-footer-centered { - text-align: center; - } - - &.modal-footer-right { - text-align: right; - } - - p { - margin-bottom: 0.5rem; - } - } -} diff --git a/src/less/mixins/modal-variant.less b/src/less/mixins/modal-variant.less deleted file mode 100644 index 996a966c9..000000000 --- a/src/less/mixins/modal-variant.less +++ /dev/null @@ -1,22 +0,0 @@ -.modal-variant(@bg-color, @color, @border-color) { - & header { - background-color: @bg-color; - color: @color; - border-color: @border-color; - - /* stylelint-disable selector-list-comma-newline-after */ - h1, h2, h3, h4, h5, h6, - .h1, .h2, .h3, .h4, .h5, .h6 { - color: @color; - } - /* stylelint-enable selector-list-comma-newline-after */ - } - - .modal-close { - color: @color; - } - - & footer { - border-bottom-color: @border-color; - } -} diff --git a/src/less/px.less b/src/less/px.less index dacb5ac31..539e064f6 100644 --- a/src/less/px.less +++ b/src/less/px.less @@ -38,7 +38,6 @@ @import "components/input-group"; @import "components/loader"; @import "components/media-object"; -@import "components/modal"; @import "components/pagination"; @import "components/panel"; @import "components/progress-tracker"; From 68f923183bf295b75b1b6a8fa0ba7eec42cf74dd Mon Sep 17 00:00:00 2001 From: Erik Hallaraaker Date: Mon, 1 Oct 2018 14:36:55 +0200 Subject: [PATCH 052/159] Readded stuff that didnt get picked up from dev --- build/appveyor.yml | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/build/appveyor.yml b/build/appveyor.yml index 697daf714..6ae111312 100644 --- a/build/appveyor.yml +++ b/build/appveyor.yml @@ -16,6 +16,9 @@ environment: secure: IGs25EMrhe0au+uVDbOck6akDzC9ykvJeR0zJjhrT6idNuYOr/JpyGdefQxSlWXk github_email: secure: U3oByHGtWDiIy9psThpxwg== + # Sentry + sentry_token: + secure: a/+7STfY8W8+RTlSDgKIZghq6iIy8K9WL5lICC6wsaoXPvKuBMjCsTE/KBdvP6vauLd9E2zbGHWjGUTI8SrF1bZUluC4VqhmrkWz9edM+10= # cache: # - node_modules @@ -32,8 +35,11 @@ install: # build configuration # #---------------------------------# +before_build: +- ps: ./build/prepare-release-build.ps1 + build_script: -- cmd: npm run build:prod +- cmd: npm run build:prod -- --env.release=%release% #---------------------------------# # tests configuration # From 207b0affbe04ea898a6bf567193aa544dbc3691d Mon Sep 17 00:00:00 2001 From: Erik Hallaraaker Date: Mon, 1 Oct 2018 14:40:39 +0200 Subject: [PATCH 053/159] Readded release script to PR --- build/prepare-release-build.ps1 | 9 +++++++++ 1 file changed, 9 insertions(+) create mode 100644 build/prepare-release-build.ps1 diff --git a/build/prepare-release-build.ps1 b/build/prepare-release-build.ps1 new file mode 100644 index 000000000..5740e3c8f --- /dev/null +++ b/build/prepare-release-build.ps1 @@ -0,0 +1,9 @@ +if (($Env:APPVEYOR_REPO_TAG -eq "true") -and ($Env:GitVersion_BranchName -eq "master")) { + $Env:release = "true" + + # Replace placeholder with api-token in .sentryclirc + (Get-Content C:\projects\design-payex-com\.sentryclirc).replace("", $Env:sentry_token) | Set-Content C:\projects\design-payex-com\.sentryclirc + +} else { + $Env:release = "false" +} From c43156dedbfbaff419af941c60d0b5e69ed58f2d Mon Sep 17 00:00:00 2001 From: Erik Hallaraaker Date: Mon, 1 Oct 2018 14:44:18 +0200 Subject: [PATCH 054/159] Reversed change to package.json --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 420fc76f5..3ea364734 100644 --- a/package.json +++ b/package.json @@ -66,7 +66,7 @@ "filemanager-webpack-plugin": "^2.0.4", "html-webpack-plugin": "^3.2.0", "jest": "^23.6.0", - "less": "^3.6.0", + "less": "~3.6.0", "less-loader": "^4.1.0", "less-plugin-lists": "^1.1.2", "mini-css-extract-plugin": "^0.4.2", From c3f8dbf4cc6c01578b0672556d7c56acc0cabcfe Mon Sep 17 00:00:00 2001 From: Aksel Christoffer Wiig Date: Mon, 1 Oct 2018 14:56:09 +0200 Subject: [PATCH 055/159] Default tab complete --- .../Tabs/__snapshots__/index.test.js.snap | 27 ++++++++++++------- .../Documentation/components/Tabs/index.js | 2 +- src/less/components/tabs.less | 11 ++++---- 3 files changed, 24 insertions(+), 16 deletions(-) diff --git a/src/App/Documentation/components/Tabs/__snapshots__/index.test.js.snap b/src/App/Documentation/components/Tabs/__snapshots__/index.test.js.snap index 088ec2e11..9de098138 100644 --- a/src/App/Documentation/components/Tabs/__snapshots__/index.test.js.snap +++ b/src/App/Documentation/components/Tabs/__snapshots__/index.test.js.snap @@ -29,9 +29,12 @@ exports[`Components: Tabs Collapsed renders 1`] = ` ( <> diff --git a/src/less/components/tabs.less b/src/less/components/tabs.less index ec81fb47c..20e4579b8 100644 --- a/src/less/components/tabs.less +++ b/src/less/components/tabs.less @@ -7,20 +7,19 @@ margin: 0 auto; padding: 0; display: flex; + border-bottom: 1px solid rgba(0, 0, 0, 0.1); li { list-style: none; - width: 100%; a, span { color: fade(@brand-primary, 80%); background-color: @white; display: block; - font-weight: bold; - padding: 0.5rem 1rem; - font-size: 1.3rem; - border-bottom: 3px solid @white; + padding: 0.5rem 0; + margin: 0 1rem; + border-bottom: 2px solid @white; transition: border-bottom 0.2s ease-in-out; } @@ -39,7 +38,7 @@ a:hover { color: @brand-primary; background-color: @white; - border-bottom: 3px solid @brand-primary; + border-bottom: 2px solid @brand-primary; } } } From c7453d4d52d62dc271461fa9c831aaeef3eeca4d Mon Sep 17 00:00:00 2001 From: Erik Hallaraaker Date: Mon, 1 Oct 2018 15:11:25 +0200 Subject: [PATCH 056/159] Reversed some changed that didnt get picked up from dev --- .../InputGroup/__snapshots__/index.test.js.snap | 2 +- src/App/components/InputGroup/index.js | 2 +- webpack.config.js | 10 ++++++++++ 3 files changed, 12 insertions(+), 2 deletions(-) diff --git a/src/App/components/InputGroup/__snapshots__/index.test.js.snap b/src/App/components/InputGroup/__snapshots__/index.test.js.snap index 851faf16f..7d7b76ee9 100644 --- a/src/App/components/InputGroup/__snapshots__/index.test.js.snap +++ b/src/App/components/InputGroup/__snapshots__/index.test.js.snap @@ -17,7 +17,7 @@ exports[`Component: InputGroup - renders 1`] = ` data-pattern={null} data-required={null} data-validate={null} - defaultValue={null} + defaultValue="" disabled={null} id={null} placeholder={null} diff --git a/src/App/components/InputGroup/index.js b/src/App/components/InputGroup/index.js index 2571ae36b..831dc9c86 100644 --- a/src/App/components/InputGroup/index.js +++ b/src/App/components/InputGroup/index.js @@ -44,7 +44,7 @@ const InputGroup = ({ className: "form-control", id: id || null, placeholder: placeholder || null, - defaultValue: defaultValue || null, + defaultValue: defaultValue || "", disabled: disabled || null, readOnly: readOnly || null, autoComplete: autoComplete || null, diff --git a/webpack.config.js b/webpack.config.js index c8f0828c9..8b35aaa06 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -224,6 +224,16 @@ module.exports = (env, argv) => { ] } ] + }) + ); + } + + if (isRelease) { + config.plugins.push( + new SentryCliPlugin({ + release: version, + include: ".", + ignore: ["node_modules", "webpack.config.js"] }), new webpack.DefinePlugin({ "process.env": { From b9523aef0ee2a36220a6d9bb9a0839961b3a19da Mon Sep 17 00:00:00 2001 From: Erik Hallaraaker Date: Mon, 1 Oct 2018 15:25:38 +0200 Subject: [PATCH 057/159] Updated stylelint rules --- .stylelintrc | 3 +++ 1 file changed, 3 insertions(+) diff --git a/.stylelintrc b/.stylelintrc index ffcf6e966..0f1159c62 100644 --- a/.stylelintrc +++ b/.stylelintrc @@ -6,6 +6,9 @@ "selector-pseudo-element-colon-notation": "single", "no-descending-specificity": null, "color-hex-length": "long", + "color-hex-case": [ "lower", { + "message": "Lowercase letters are easier to distinguish from numbers" + }], "max-empty-lines": [2, { "ignore": ["comments"] }], "string-quotes": "double", "font-family-no-missing-generic-family-keyword": null, From b6faab5c9c072514bcf22663818c04de1b5b069b Mon Sep 17 00:00:00 2001 From: Erik Hallaraaker Date: Mon, 1 Oct 2018 15:42:09 +0200 Subject: [PATCH 058/159] Removed modal from px-script --- src/px-script/index.js | 4 +- src/px-script/modal/index.js | 90 ------------------------------- src/px-script/modal/index.spec.js | 18 ------- src/px-script/modal/index.test.js | 20 ------- 4 files changed, 1 insertion(+), 131 deletions(-) delete mode 100644 src/px-script/modal/index.js delete mode 100644 src/px-script/modal/index.spec.js delete mode 100644 src/px-script/modal/index.test.js diff --git a/src/px-script/index.js b/src/px-script/index.js index 8a727d83c..40aa2a61e 100644 --- a/src/px-script/index.js +++ b/src/px-script/index.js @@ -6,7 +6,6 @@ import button from "./button"; import datepicker from "./datepicker"; import dialog from "./dialog"; import loader from "./loader"; -import modal from "./modal"; import rangeslider from "./rangeslider"; import sheet from "./sheet"; import script from "./script"; @@ -26,7 +25,6 @@ const px = { datepicker, dialog, loader, - modal, rangeslider, sheet, script, @@ -45,4 +43,4 @@ if (!window.stopPx) { export default px; -export { actionList, alert, button, datepicker, dialog, loader, modal, rangeslider, sheet, script, toast, topbar, validation }; +export { actionList, alert, button, datepicker, dialog, loader, rangeslider, sheet, script, toast, topbar, validation }; diff --git a/src/px-script/modal/index.js b/src/px-script/modal/index.js deleted file mode 100644 index f939f7061..000000000 --- a/src/px-script/modal/index.js +++ /dev/null @@ -1,90 +0,0 @@ -const SELECTORS = { - MODAL: ".modal", - CLOSE: "[data-modal-close]", - OPEN: "[data-modal-open]", - CLOSEICON: ".modal-close" -}; - -const _openModal = modal => { - modal.classList.add("d-block"); - document.body.classList.add("modal-open"); -}; - -const _closeModal = modal => { - modal.classList.remove("d-block"); - document.body.classList.remove("modal-open"); -}; - -const modal = (() => { - const init = () => { - const modals = document.querySelectorAll(SELECTORS.MODAL); - const closeButtons = document.querySelectorAll(SELECTORS.CLOSE); - const openButtons = document.querySelectorAll(SELECTORS.OPEN); - - modals.forEach(modal => { - const closeBtn = modal.querySelector(SELECTORS.CLOSE); - const closeIcon = modal.querySelector(SELECTORS.CLOSEICON); - - if (closeBtn) { - closeBtn.addEventListener("click", () => { - _closeModal(modal); - }); - } - - if (closeIcon) { - closeIcon.addEventListener("click", e => { - e.preventDefault(); - _closeModal(modal); - }); - } - - // Close the modal when clicking outside - modal.addEventListener("click", e => { - if (e.target.classList.contains("d-block")) { - _closeModal(modal); - } - }); - }); - - closeButtons.forEach(btn => { - const modalId = btn.dataset.modalClose; - const targetModal = document.getElementById(modalId); - - if (targetModal) { - btn.addEventListener("click", () => { - _closeModal(targetModal); - }); - } else { - console.warn(`CLOSE: No modal with with id ${modalId} was found, make sure the attribute data-modal-close contains the correct id.`); - } - }); - - openButtons.forEach(btn => { - const modalId = btn.dataset.modalOpen; - const modal = document.getElementById(modalId); - - if (modal) { - btn.addEventListener("click", () => { - _openModal(modal, true); - }); - } else { - console.warn(`OPEN: No modal with with id ${modalId} was found, make sure the attribute data-modal-open contains the correct id.`); - } - }); - - // Close modals on esc - document.addEventListener("keydown", e => { - if (e.keyCode === 27) { - const modal = document.querySelector(".modal.d-block"); - - if (modal) { - _closeModal(modal); - } - } - }); - }; - - return { init }; -})(); - -export default modal; diff --git a/src/px-script/modal/index.spec.js b/src/px-script/modal/index.spec.js deleted file mode 100644 index 224f909d1..000000000 --- a/src/px-script/modal/index.spec.js +++ /dev/null @@ -1,18 +0,0 @@ -import { Selector } from "testcafe"; - -fixture `Component: Modal` - .page `http://localhost:3000/docs/components/modal`; - -test("Modal test", async t => { - const modal = await Selector("#live-modal"); - - await t - .expect(modal.classNames) - .notContains("in") - .click("[data-modal-open=live-modal]") - .expect(modal.classNames) - .contains("in") - .click("[data-modal-close=live-modal]") - .expect(modal.classNames) - .notContains("in"); -}); diff --git a/src/px-script/modal/index.test.js b/src/px-script/modal/index.test.js deleted file mode 100644 index c3cf3bcaf..000000000 --- a/src/px-script/modal/index.test.js +++ /dev/null @@ -1,20 +0,0 @@ -// import React from "react"; -// import ReactDOM from "react-dom"; - -import modal from "./index"; -// import Modal from "@/Modal"; - -describe("px-script: modal", () => { - const div = document.createElement("div"); - - document.body.appendChild(div); - - it("is defined", () => { - expect(modal).toBeDefined(); - }); - - it("has an init method", () => { - expect(modal.init).toBeDefined(); - expect(modal.init).toBeInstanceOf(Function); - }); -}); From 286f1532cb51f344437e9f6e0a5a30ea37d6d63c Mon Sep 17 00:00:00 2001 From: Aksel Christoffer Wiig Date: Mon, 1 Oct 2018 15:54:52 +0200 Subject: [PATCH 059/159] tabs-auto --- src/less/components/tabs.less | 51 ++++++++++++++++++++++++++++++++--- 1 file changed, 47 insertions(+), 4 deletions(-) diff --git a/src/less/components/tabs.less b/src/less/components/tabs.less index 20e4579b8..cdf5b5a96 100644 --- a/src/less/components/tabs.less +++ b/src/less/components/tabs.less @@ -17,10 +17,7 @@ color: fade(@brand-primary, 80%); background-color: @white; display: block; - padding: 0.5rem 0; - margin: 0 1rem; border-bottom: 2px solid @white; - transition: border-bottom 0.2s ease-in-out; } a { @@ -38,13 +35,59 @@ a:hover { color: @brand-primary; background-color: @white; - border-bottom: 2px solid @brand-primary; + } + } + } + + &.tabs-auto { + a { + &:focus, + &:active, + &:hover { + text-decoration: none; + color: @brand-primary; + } + } + + li { + a, + span { + margin: 0 1rem; + padding: 0.5rem 0; + transition: border-bottom 0.2s ease-in-out; + } + + &.active { + span, + a, + a:hover { + color: @brand-primary; + background-color: @white; + border-bottom: 2px solid @brand-primary; + } } } } &.tabs-stacked { + border: 0; + border-left: 1px solid rgba(0, 0, 0, 0.1); flex-direction: column; + + li { + a, + span { + padding-left: 1rem; + } + + &.active { + a, + span { + padding-left: calc(1rem - 2px); + border-left: 2px solid @brand-primary; + } + } + } } &.tabs-collapsed { From 682d55e7942dbbe13f6358bc4cf5dd48d31b7e13 Mon Sep 17 00:00:00 2001 From: Aksel Christoffer Wiig Date: Mon, 1 Oct 2018 16:44:31 +0200 Subject: [PATCH 060/159] fixed issues brought up in review --- .../Documentation/components/Buttons/index.js | 32 +++++++++---------- src/less/_variables.css | 30 ----------------- src/less/_variables.less | 2 +- src/less/components/action-list.less | 2 +- src/less/components/breadcrumb.less | 2 +- src/less/components/card.less | 2 +- src/less/components/datepicker.less | 8 ++--- 7 files changed, 24 insertions(+), 54 deletions(-) delete mode 100644 src/less/_variables.css diff --git a/src/App/Documentation/components/Buttons/index.js b/src/App/Documentation/components/Buttons/index.js index 9f3ee332a..62ce3a401 100644 --- a/src/App/Documentation/components/Buttons/index.js +++ b/src/App/Documentation/components/Buttons/index.js @@ -51,6 +51,20 @@ const OutlineButtons = () => ( ); +const ButtonGroup = () => ( + <> +

    Using buttons together

    +

    When you use buttons next to each other you have to wrap them in a button-group.

    + +
    {"\n"} + {"\n"} + {"\n"} + {"\n"} +
    +     + +); + const Sizes = () => ( <>

    Sizes

    @@ -236,28 +250,14 @@ const UsageWithJavascript = () => ( ); -const ButtonsGroup = () => ( - <> -

    Using buttons together

    -

    When you use buttons next to each other you have to wrap them in a button-group.

    - -
    {"\n"} - {"\n"} - {"\n"} - {"\n"} -
    -     - -); - const ButtonsText = () => (

    Use buttons...

    + - @@ -286,4 +286,4 @@ class Buttons extends Component { export default Buttons; /* for testing */ -export { Examples, UsageWithOtherTags, OutlineButtons, Sizes, ActiveState, DisabledState, UsageWithIcons, ButtonLoader, UsageWithJavascript, ButtonsText, ButtonsGroup }; +export { Examples, UsageWithOtherTags, OutlineButtons, Sizes, ActiveState, DisabledState, UsageWithIcons, ButtonLoader, UsageWithJavascript, ButtonsText, ButtonGroup }; diff --git a/src/less/_variables.css b/src/less/_variables.css deleted file mode 100644 index 8b8035aa8..000000000 --- a/src/less/_variables.css +++ /dev/null @@ -1,30 +0,0 @@ -/* Base colors */ -/* Grayscale */ -/* Brand colors */ -/* Background colors */ -/* Shadows */ -/* State colors */ -/* Margin */ -/* Padding */ -/* Spacing */ -/* Body */ -/* Cursor */ -/* Borders */ -/* Z-index master list */ -/* Media queries breakpoints */ -/* Colors */ -/* Dimensions */ -/* Animations */ -/* Colors */ -/* Font Size */ -/* Font Weight */ -/* Temporary for backwards compatibility */ -/* Headings */ -/* Paragraphs */ -/* Etc */ -/* Small */ -/* Colors */ -/* Colors */ -/* Colors */ -/* Default colors */ -/* Contextual colors */ diff --git a/src/less/_variables.less b/src/less/_variables.less index 4cfaf0795..759b410bd 100644 --- a/src/less/_variables.less +++ b/src/less/_variables.less @@ -282,7 +282,7 @@ // 6. Action List // ========================================================================== -@action-menu-a-padding: round(@base-padding/3, 1); +@action-menu-anchor-padding: round(@base-padding/3, 1); // 7. Badge // ========================================================================== diff --git a/src/less/components/action-list.less b/src/less/components/action-list.less index 2aa4d87e7..5d332f7a9 100644 --- a/src/less/components/action-list.less +++ b/src/less/components/action-list.less @@ -24,7 +24,7 @@ > a { display: flex; - padding: @action-menu-a-padding; + padding: @action-menu-anchor-padding; padding-right: @base-padding-xl; color: @gray-5; visibility: hidden; diff --git a/src/less/components/breadcrumb.less b/src/less/components/breadcrumb.less index c58013321..f4f5d37b8 100644 --- a/src/less/components/breadcrumb.less +++ b/src/less/components/breadcrumb.less @@ -1,6 +1,6 @@ ul.breadcrumb, ol.breadcrumb { - margin: @breadcrumb-margin, 0; + margin: @breadcrumb-margin 0; padding-left: 0; display: flex; diff --git a/src/less/components/card.less b/src/less/components/card.less index 45d6076f8..582992fc6 100644 --- a/src/less/components/card.less +++ b/src/less/components/card.less @@ -78,7 +78,7 @@ justify-content: center; align-content: center; - .material-icons { //Todo: cleanup; will this be removed when icons are fixed? + .material-icons { margin-top: -0.2rem; font-size: 2rem; line-height: 2rem; diff --git a/src/less/components/datepicker.less b/src/less/components/datepicker.less index 52589d7bf..2f81bc164 100644 --- a/src/less/components/datepicker.less +++ b/src/less/components/datepicker.less @@ -18,9 +18,9 @@ position: absolute; } -.rd-month { // Todo: cleanup +.rd-month { display: inline-block; - margin-right: 1.5rem; + margin-right: @base-margin-lg; } .rd-month-label { @@ -68,7 +68,7 @@ content: "\E5C8"; } -.rd-days { // Todo: cleanup +.rd-days { td, th { padding: 0.35rem 0.7rem; @@ -110,7 +110,7 @@ color: #ffcccc; } -.rd-time { //Todo: cleanup +.rd-time { position: relative; display: inline-block; margin-top: 5px; From dcac7b870905bf89d5d177dc0e20020abdcd4327 Mon Sep 17 00:00:00 2001 From: Aksel Christoffer Wiig Date: Mon, 1 Oct 2018 16:45:36 +0200 Subject: [PATCH 061/159] Updated tests due to moved buttongroup tag in documentation --- src/App/Documentation/__snapshots__/index.test.js.snap | 2 +- .../components/Buttons/__snapshots__/index.test.js.snap | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/App/Documentation/__snapshots__/index.test.js.snap b/src/App/Documentation/__snapshots__/index.test.js.snap index fa5e71d4f..66067367f 100644 --- a/src/App/Documentation/__snapshots__/index.test.js.snap +++ b/src/App/Documentation/__snapshots__/index.test.js.snap @@ -229,8 +229,8 @@ exports[`Documentation: index renders 1`] = ` Object { "component": Object { "ActiveState": [Function], + "ButtonGroup": [Function], "ButtonLoader": [Function], - "ButtonsGroup": [Function], "ButtonsText": [Function], "DisabledState": [Function], "Examples": [Function], diff --git a/src/App/Documentation/components/Buttons/__snapshots__/index.test.js.snap b/src/App/Documentation/components/Buttons/__snapshots__/index.test.js.snap index 40ad13c2a..38ab43fcd 100644 --- a/src/App/Documentation/components/Buttons/__snapshots__/index.test.js.snap +++ b/src/App/Documentation/components/Buttons/__snapshots__/index.test.js.snap @@ -229,8 +229,8 @@ exports[`Documentation: Buttons Buttons Text renders 1`] = ` + - From 45b74215769000b679822401ec30c83ab6043f23 Mon Sep 17 00:00:00 2001 From: Erik Hallaraaker Date: Tue, 2 Oct 2018 10:45:53 +0200 Subject: [PATCH 062/159] Removed superfluous and unused functions --- src/px-script/alert/index.js | 7 +++---- src/px-script/utils/index.js | 14 -------------- 2 files changed, 3 insertions(+), 18 deletions(-) diff --git a/src/px-script/alert/index.js b/src/px-script/alert/index.js index 112fe8dc3..fe193c3be 100644 --- a/src/px-script/alert/index.js +++ b/src/px-script/alert/index.js @@ -1,5 +1,3 @@ -import { findAncestor } from "../utils"; - const SELECTORS = { ALERT: ".alert", CLOSE: "[data-alert-close]" @@ -29,9 +27,10 @@ const alert = (() => { } } else { - const alert = findAncestor(btn, "alert"); + const alert = btn.closest(".alert"); - btn.addEventListener("click", () => { + btn.addEventListener("click", e => { + e.preventDefault(); _hideAlert(alert); }); } diff --git a/src/px-script/utils/index.js b/src/px-script/utils/index.js index aa67a7b30..94786b81c 100644 --- a/src/px-script/utils/index.js +++ b/src/px-script/utils/index.js @@ -1,15 +1,3 @@ -export const applyToEachElement = (elements, fn) => { - for (let i = 0, l = elements.length; i < l; i++) { - fn(elements[i], i); - } -}; - -export const findAncestor = (el, cls) => { - while ((el = el.parentElement) && !el.classList.contains(cls)); // eslint-disable-line curly - - return el; -}; - export const extendObj = (overWrite, obj, ext) => { for (const key in ext) { if (overWrite) { @@ -33,8 +21,6 @@ export const isWithinBoundingBox = (x, y, element) => { }; export default { - applyToEachElement, - findAncestor, extendObj, isWithinBoundingBox }; From b786867882a74904d37b24484648b1989204c855 Mon Sep 17 00:00:00 2001 From: Aksel Christoffer Wiig Date: Tue, 2 Oct 2018 10:54:57 +0200 Subject: [PATCH 063/159] .. --- .../Documentation/components/Tabs/index.js | 2 +- src/less/components/tabs.less | 248 +++++++++++------- 2 files changed, 159 insertions(+), 91 deletions(-) diff --git a/src/App/Documentation/components/Tabs/index.js b/src/App/Documentation/components/Tabs/index.js index 8c16187bf..a0db81fa1 100644 --- a/src/App/Documentation/components/Tabs/index.js +++ b/src/App/Documentation/components/Tabs/index.js @@ -10,7 +10,7 @@ const Overview = () => (

    Overview

    Overview... .tabs....tabs-auto

    - + ); diff --git a/src/less/components/tabs.less b/src/less/components/tabs.less index cdf5b5a96..276f552d2 100644 --- a/src/less/components/tabs.less +++ b/src/less/components/tabs.less @@ -1,13 +1,12 @@ .tabs { position: relative; margin: 1rem auto; - min-height: 60px; + min-height: 25px; ul { margin: 0 auto; padding: 0; display: flex; - border-bottom: 1px solid rgba(0, 0, 0, 0.1); li { list-style: none; @@ -19,94 +18,28 @@ display: block; border-bottom: 2px solid @white; } - - a { - &:focus, - &:active, - &:hover { - text-decoration: none; - color: @brand-primary; - } - } - - &.active { - span, - a, - a:hover { - color: @brand-primary; - background-color: @white; - } - } - } - - &.tabs-auto { - a { - &:focus, - &:active, - &:hover { - text-decoration: none; - color: @brand-primary; - } - } - - li { - a, - span { - margin: 0 1rem; - padding: 0.5rem 0; - transition: border-bottom 0.2s ease-in-out; - } - - &.active { - span, - a, - a:hover { - color: @brand-primary; - background-color: @white; - border-bottom: 2px solid @brand-primary; - } - } - } } - &.tabs-stacked { - border: 0; - border-left: 1px solid rgba(0, 0, 0, 0.1); - flex-direction: column; - - li { - a, - span { - padding-left: 1rem; - } - - &.active { - a, - span { - padding-left: calc(1rem - 2px); - border-left: 2px solid @brand-primary; - } - } - } - } - - &.tabs-collapsed { - border-bottom: 1px solid @gray-10; + &.tabs-responsive { flex-direction: column; position: absolute; width: 100%; + padding-left: 2rem; + background: white; + border: 1px solid black; + z-index: 100000; - &:after { + &:before { content: ""; - top: 1rem; - right: 2rem; + position: absolute; border: 2px solid @gray-8; border-top: none; border-left: none; width: 1rem; height: 1rem; - position: absolute; transform: rotate(45deg); + left: 0.5rem; + top: 0.1rem; cursor: pointer; } @@ -115,25 +48,160 @@ &.active { display: block; + color: @brand-primary; } } - } - &:hover { - &:after { - z-index: @zindex-tabs-arrow; - } + &:hover { + &:before { + z-index: @zindex-tabs-arrow; + } - li { - display: block; - z-index: @zindex-tabs; + li { + display: block; + z-index: @zindex-tabs; + } } } - } - .material-icons { - font-size: 1.3rem; - line-height: 1.75rem; - vertical-align: text-top; + .material-icons { + font-size: 1.3rem; + line-height: 1.75rem; + vertical-align: text-top; + } + + // ul { + // margin: 0 auto; + // padding: 0; + // display: flex; + // border-bottom: 1px solid rgba(0, 0, 0, 0.1); + + // li { + // list-style: none; + + // a, + // span { + // color: fade(@brand-primary, 80%); + // background-color: @white; + // display: block; + // border-bottom: 2px solid @white; + // } + + // a { + // &:focus, + // &:active, + // &:hover { + // text-decoration: none; + // color: @brand-primary; + // } + // } + + // &.active { + // span, + // a, + // a:hover { + // color: @brand-primary; + // background-color: @white; + // } + // } + // } + + // &.tabs-auto { + // a { + // &:focus, + // &:active, + // &:hover { + // text-decoration: none; + // color: @brand-primary; + // } + // } + + // li { + // a, + // span { + // margin: 0 1rem; + // padding: 0.5rem 0; + // transition: border-bottom 0.2s ease-in-out; + // } + + // &.active { + // span, + // a, + // a:hover { + // color: @brand-primary; + // background-color: @white; + // border-bottom: 2px solid @brand-primary; + // } + // } + // } + // } + + // &.tabs-stacked { + // border: 0; + // border-left: 1px solid rgba(0, 0, 0, 0.1); + // flex-direction: column; + + // li { + // a, + // span { + // padding-left: 1rem; + // } + + // &.active { + // a, + // span { + // padding-left: calc(1rem - 2px); + // border-left: 2px solid @brand-primary; + // } + // } + // } + // } + + // &.tabs-collapsed { + // border-bottom: 1px solid @gray-10; + // flex-direction: column; + // position: absolute; + // width: 100%; + + // &:after { + // content: ""; + // top: 1rem; + // right: 2rem; + // border: 2px solid @gray-8; + // border-top: none; + // border-left: none; + // width: 1rem; + // height: 1rem; + // position: absolute; + // transform: rotate(45deg); + // cursor: pointer; + // } + + // li { + // display: none; + + // &.active { + // display: block; + // } + // } + // } + + // &:hover { + // &:after { + // z-index: @zindex-tabs-arrow; + // } + + // li { + // display: block; + // z-index: @zindex-tabs; + // } + // } + // } + + // .material-icons { + // font-size: 1.3rem; + // line-height: 1.75rem; + // vertical-align: text-top; + // } } } From 1ec41f988feadcd49d76ecf923c2093399183293 Mon Sep 17 00:00:00 2001 From: Erik Hallaraaker Date: Tue, 2 Oct 2018 11:02:51 +0200 Subject: [PATCH 064/159] Fixed an issue with alert close button, and moved a mixin --- CHANGELOG.md | 1 + src/less/_mixins.less | 3 +++ src/less/components/alert.less | 22 +--------------------- src/less/mixins/alert-variant.less | 9 +++++++++ 4 files changed, 14 insertions(+), 21 deletions(-) create mode 100644 src/less/mixins/alert-variant.less diff --git a/CHANGELOG.md b/CHANGELOG.md index b0e3180a3..7b64a20bd 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -14,6 +14,7 @@ - Fixed issue with action list icon being visible through topbar. - Fixed an issue with topbar component where clicking anchor links does not close the open menu. - Fixed an issue with datepicker not displaying properly, or at all, when clicking on label. +- Fixed an issue where alert close button got properties from the new `` styling (blue border bottom). ### Removed diff --git a/src/less/_mixins.less b/src/less/_mixins.less index 613fa0489..0240d0b8c 100644 --- a/src/less/_mixins.less +++ b/src/less/_mixins.less @@ -6,6 +6,9 @@ @import "mixins/placeholder"; @import "mixins/visibility"; +// Alerts +@import "mixins/alert-variant"; + // Buttons @import "mixins/button"; @import "mixins/close-button"; diff --git a/src/less/components/alert.less b/src/less/components/alert.less index d52ed24a7..9cb9932ee 100644 --- a/src/less/components/alert.less +++ b/src/less/components/alert.less @@ -1,14 +1,3 @@ -.alert-variant(@color;) { - background-color: @white; - border: 1px solid @gray-8; - border-left: 3px solid @color; - - .alert-icon { - color: @color; - } -} - - .alert { padding: 1rem; position: relative; @@ -64,15 +53,6 @@ [data-alert-close] { margin-left: auto; - color: lighten(@text-color, 20%); - line-height: 1; - - &:hover { - color: @text-color; - } - - &:focus { - .tab-focus(); - } + .close-button(); } } diff --git a/src/less/mixins/alert-variant.less b/src/less/mixins/alert-variant.less new file mode 100644 index 000000000..cc6643fc4 --- /dev/null +++ b/src/less/mixins/alert-variant.less @@ -0,0 +1,9 @@ +.alert-variant(@color;) { + background-color: @white; + border: 1px solid @gray-8; + border-left: 3px solid @color; + + .alert-icon { + color: @color; + } +} From a62df4c3c3626fa3a059f7d684240ffac04d1824 Mon Sep 17 00:00:00 2001 From: Erik Hallaraaker Date: Tue, 2 Oct 2018 11:21:24 +0200 Subject: [PATCH 065/159] Added tests for extendObj --- src/px-script/index.js | 4 ++- src/px-script/utils/index.test.js | 50 +++++++++++++++++++++++++++++++ 2 files changed, 53 insertions(+), 1 deletion(-) create mode 100644 src/px-script/utils/index.test.js diff --git a/src/px-script/index.js b/src/px-script/index.js index 40aa2a61e..da897bda5 100644 --- a/src/px-script/index.js +++ b/src/px-script/index.js @@ -11,6 +11,7 @@ import sheet from "./sheet"; import script from "./script"; import toast from "./toast"; import topbar from "./topbar"; +import utils from "./utils"; import validation from "./validation"; // Sentry reporter @@ -30,6 +31,7 @@ const px = { script, toast, topbar, + utils, validation }; @@ -43,4 +45,4 @@ if (!window.stopPx) { export default px; -export { actionList, alert, button, datepicker, dialog, loader, rangeslider, sheet, script, toast, topbar, validation }; +export { actionList, alert, button, datepicker, dialog, loader, rangeslider, sheet, script, toast, topbar, utils, validation }; diff --git a/src/px-script/utils/index.test.js b/src/px-script/utils/index.test.js new file mode 100644 index 000000000..38ae403d8 --- /dev/null +++ b/src/px-script/utils/index.test.js @@ -0,0 +1,50 @@ +import { extendObj, isWithinBoundingBox } from "./index"; + +describe("px-script: utils", () => { + describe("- extendObj", () => { + it("extends current object with new object", () => { + const oldObj = { test: "test" }; + const newObj = { test2: "test2" }; + const expectedObj = { + test: "test", + test2: "test2" + }; + + const extObj = extendObj(false, oldObj, newObj); + + expect(expectedObj).toEqual(extObj); + }); + + it("does not overwrite property when overWrite is set to false", () => { + const oldObj = { test: "test" }; + const newObj = { + test: "test1", + test2: "test2" + }; + const expectedObj = { + test: "test", + test2: "test2" + }; + + const extObj = extendObj(false, oldObj, newObj); + + expect(expectedObj).toEqual(extObj); + }); + + it("overwrites property when overWrite is set to true", () => { + const oldObj = { test: "test" }; + const newObj = { + test: "test1", + test2: "test2" + }; + const expectedObj = { + test: "test1", + test2: "test2" + }; + + const extObj = extendObj(true, oldObj, newObj); + + expect(expectedObj).toEqual(extObj); + }); + }); +}); From 2756c9900219ef3ef2b10a894df07f4ae8812937 Mon Sep 17 00:00:00 2001 From: Erik Hallaraaker Date: Tue, 2 Oct 2018 11:26:52 +0200 Subject: [PATCH 066/159] Cleaned up some less files, moved variables and mixins to separate files --- src/less/_mixins.less | 3 +++ src/less/_variables.less | 6 ++++++ src/less/components/badge.less | 10 ---------- src/less/components/datepicker.less | 7 ------- src/less/components/panel.less | 1 - src/less/mixins/make-badge.less | 9 +++++++++ 6 files changed, 18 insertions(+), 18 deletions(-) create mode 100644 src/less/mixins/make-badge.less diff --git a/src/less/_mixins.less b/src/less/_mixins.less index 0240d0b8c..c20191c26 100644 --- a/src/less/_mixins.less +++ b/src/less/_mixins.less @@ -9,6 +9,9 @@ // Alerts @import "mixins/alert-variant"; +// Badges +@import "mixins/make-badge"; + // Buttons @import "mixins/button"; @import "mixins/close-button"; diff --git a/src/less/_variables.less b/src/less/_variables.less index 759b410bd..d99137c14 100644 --- a/src/less/_variables.less +++ b/src/less/_variables.less @@ -352,6 +352,12 @@ // 11. Datepicker // ========================================================================== +@datepicker-box-shadow: @default-box-shadow; +@datepicker-background-color: @white; +@datepicker-highlight-background: @brand-primary; +@datepicker-highlight-color: @white; +@datepicker-weekday-color: @brand-primary; +@datepicker-hover-color: @gray-10; @datepicker-rd-padding: round(@base-padding/3, 1); diff --git a/src/less/components/badge.less b/src/less/components/badge.less index df6020fdf..f850e5b6b 100644 --- a/src/less/components/badge.less +++ b/src/less/components/badge.less @@ -1,13 +1,3 @@ -.make-badge(@badgelist) { - @name: extract(@badgelist, 1); - @color: extract(@badgelist, 2); - - &.badge-@{name} { - background-color: @color; - border: 1px solid @color; - } -} - .badge { color: @white; padding: @badge-padding; diff --git a/src/less/components/datepicker.less b/src/less/components/datepicker.less index 2f81bc164..a7ccb1a34 100644 --- a/src/less/components/datepicker.less +++ b/src/less/components/datepicker.less @@ -1,10 +1,3 @@ -@datepicker-box-shadow: @default-box-shadow; -@datepicker-background-color: @white; -@datepicker-highlight-background: @brand-primary; -@datepicker-highlight-color: @white; -@datepicker-weekday-color: @brand-primary; -@datepicker-hover-color: @gray-10; - .rd-container { display: none; background-color: @datepicker-background-color; diff --git a/src/less/components/panel.less b/src/less/components/panel.less index 739673d52..9148914b2 100644 --- a/src/less/components/panel.less +++ b/src/less/components/panel.less @@ -1,4 +1,3 @@ -// Base classes .panel { margin-top: @base-margin; margin-bottom: @base-margin; diff --git a/src/less/mixins/make-badge.less b/src/less/mixins/make-badge.less new file mode 100644 index 000000000..80d976c6e --- /dev/null +++ b/src/less/mixins/make-badge.less @@ -0,0 +1,9 @@ +.make-badge(@badgelist) { + @name: extract(@badgelist, 1); + @color: extract(@badgelist, 2); + + &.badge-@{name} { + background-color: @color; + border: 1px solid @color; + } +} From df067d6ce2aa7187aac9982f02836e3cfaa0ce70 Mon Sep 17 00:00:00 2001 From: Erik Hallaraaker Date: Tue, 2 Oct 2018 11:35:34 +0200 Subject: [PATCH 067/159] Updated changelog and version number --- CHANGELOG.md | 4 +++- package.json | 2 +- .../Introduction/__snapshots__/index.test.js.snap | 8 ++++---- 3 files changed, 8 insertions(+), 6 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 7b64a20bd..c09b3d5bb 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,9 +1,11 @@ # Changelog -## [0.1x.x] - 2018-xx-xx +## [0.12.0] - 2018-xx-xx ### Added +- Added class `.button-group`. + ### Changed - Updated readme with deploy/release procedure. diff --git a/package.json b/package.json index 3ea364734..78f4ce586 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "design.payex.com", - "version": "0.11.1", + "version": "0.12.0", "description": "PayEx DesignGuide", "main": "index.js", "scripts": { diff --git a/src/App/Documentation/getting-started/Introduction/__snapshots__/index.test.js.snap b/src/App/Documentation/getting-started/Introduction/__snapshots__/index.test.js.snap index 61b3d8759..d2e6b41d4 100644 --- a/src/App/Documentation/getting-started/Introduction/__snapshots__/index.test.js.snap +++ b/src/App/Documentation/getting-started/Introduction/__snapshots__/index.test.js.snap @@ -29,7 +29,7 @@ exports[`GettingStarted: Introduction Css renders 1`] = ` language="html" > @@ -80,7 +80,7 @@ exports[`GettingStarted: Introduction JavaScript renders 1`] = ` language="html" >