Merge pull request #36 from dnbexperience/ftr/input

Ftr/input

package.json

@@ -30,7 +30,7 @@
     "test-ci:update": "yarn test-ci --updateSnapshot"
   },
   "devDependencies": {
-    "husky": "^1.2.0"
+    "husky": "^1.3.0"
   },
   "release": {
     "analyzeCommits": "simple-commit-message"

packages/dnb-design-system-portal/scripts/version.js

@@ -17,7 +17,9 @@ export const createNewVersion = async () => {
     return false
   }
   try {
-    const date = new Date().toLocaleString()
+    const date = new Date().toLocaleString('nb-NO', {
+      timeZone: 'Europe/Oslo'
+    })
     packageJson.buildVersion = date
 
     // Update the extracted version of package.json with the build version

packages/dnb-design-system-portal/src/pages/uilib/components/input.md

@@ -2,7 +2,7 @@
 header: 'UI Library'
 title: 'Input'
 draft: false
-status: wip
+status: null
 order: 7
 ---
 

packages/dnb-design-system-portal/src/uilib/components/examples/Input.txt

@@ -1,9 +1,23 @@
 <Input id="text-input-2" placeholder="Placeholder text" />
+ <div className="dnb-form-row">
+  <FormLabel
+    id="search-input-label"
+    for_id="search-input"
+    text="Search"
+  />
+  <Input
+    type="search"
+    id="search-input"
+    search_button_title="Search"
+    on_change={this.handleInputChange}
+  />
+</div>
  <Input
-  type="search"
-  id="search-input"
-  search_button_title="Search"
-  placeholder="Search"
+  type="text"
+  id="text-input-medium"
+  autocomplete="off"
+  size="medium"
+  placeholder="Medium input"
   on_change={this.handleInputChange}
 />
  <Input
@@ -12,25 +26,23 @@
   autocomplete="off"
   size="large"
   align="right"
-  font_class="typo-light"
-  placeholder="Large input with .typo-light class"
+  placeholder="Large input with right align"
   on_change={this.handleInputChange}
 />
  <Input
   disabled
   id="text-input-disabled"
   value="Disabled Input with a value"
-  on_change={this.handleInputChange}
 />
  <Input
   type="text"
   id="text-input-1"
   autocomplete="on"
   placeholder="Placeholder text"
   description="Kr"
-  extra_information="Maksimumsbeløpet inkluderer eventuell fellesgjeld og omkostninger ved kjøp."
+  extra_information="Info: numbers are ligned by using typo-number--lining"
   ref={this._ref}
   on_change={this.handleInputChange}
 >
-  This is the value
+  This is the value 1234567890
 </Input>

packages/dnb-ui-lib/package.json

@@ -100,8 +100,8 @@
     "ci-info": "^2.0.0",
     "color": "^3.1.0",
     "cross-env": "^5.2.0",
-    "css-loader": "^2.0.0",
-    "css-vars-ponyfill": "^1.15.3",
+    "css-loader": "^2.0.1",
+    "css-vars-ponyfill": "^1.16.1",
     "del": "^3.0.0",
     "dotenv": "^6.2.0",
     "enzyme": "^3.8.0",
@@ -145,7 +145,7 @@
     "packpath": "^0.1.0",
     "postcss-calc": "^7.0.1",
     "postcss-custom-properties": "^8.0.9",
-    "postcss-preset-env": "^6.4.0",
+    "postcss-preset-env": "^6.5.0",
     "prettier": "^1.15.3",
     "prettier-package-json": "^2.0.1",
     "puppeteer": "^1.11.0",
@@ -161,7 +161,7 @@
     "sass-loader": "^7.1.0",
     "sass-variable-parser": "^1.2.2",
     "scss-to-json": "^2.0.0",
-    "semantic-release": "^15.12.5",
+    "semantic-release": "^15.13.1",
     "simple-commit-message": "^4.0.3",
     "simple-git": "^1.107.0",
     "stream-buffers": "^3.0.2",

packages/dnb-ui-lib/src/components/button/__tests__/__snapshots__/Button.test.js.snap

@@ -434,13 +434,10 @@ exports[`Button scss have to match snapshot 1`] = `
       box-shadow: none;
       border: none; }
     .dnb-button--reset:not([disabled]):focus, .dnb-button--reset:not([disabled]):active {
-      outline: none;
-      border-color: transparent; }
-      html[data-whatinput='mouse'] .dnb-button--reset:not([disabled]):focus:not(.dnb-no-mouse-focus), html[data-whatinput='mouse'] .dnb-button--reset:not([disabled]):active:not(.dnb-no-mouse-focus) {
-        transition: box-shadow 0.1s ease-out 0s;
-        box-shadow: 0 0 0 2px var(--color-emerald-green); }
+      outline: none; }
       html[data-whatinput='keyboard'] .dnb-button--reset:not([disabled]):focus, html[data-whatinput='keyboard'] .dnb-button--reset:not([disabled]):active {
-        box-shadow: 0 0 0 2px var(--color-signal-orange); }
+        box-shadow: 0 0 0 2px var(--color-signal-orange);
+        border-color: transparent; }
     html[data-whatinput='mouse']
 .dnb-button--reset:not([disabled]):focus:not(.dnb-no-mouse-focus),
     html[data-whatinput='mouse']

packages/dnb-ui-lib/src/components/button/index.js

@@ -3,4 +3,6 @@
  *
  */
 
+import Button from './Button'
+export default Button
 export * from './Button'

packages/dnb-ui-lib/src/components/button/style.js

@@ -3,4 +3,4 @@
  *
  */
 
-export * from './style/dnb-button.scss'
+import './style/dnb-button.scss'

packages/dnb-ui-lib/src/components/button/style/_button-mixins.scss

@@ -34,11 +34,7 @@
     background-color: $background-color;
     border-color: $background-color;
 
-    @include fakeFocus(
-      'mouse',
-      null,
-      0 0 0 var(--button-border-width--hover) $background-color
-    );
+    @include fakeFocus();
 
     @content;
   }

packages/dnb-ui-lib/src/components/button/style/themes/dnb-button-theme-ui.scss

@@ -6,7 +6,7 @@
 @import '../_button-mixins.scss';
 
 .dnb-button--primary {
-  color: #fff;
+  color: var(--color-white);
   background-color: var(--color-sea-green-alt);
   border-color: transparent;
 
@@ -15,14 +15,14 @@
   @include buttonFocus(var(--color-sea-green), var(--color-mint-green-50));
 
   &[disabled] {
-    color: #fff;
+    color: var(--color-white);
     background-color: var(--color-sea-green-alt-30);
   }
 }
 
 .dnb-button--secondary {
   color: var(--color-sea-green);
-  background-color: #fff;
+  background-color: var(--color-white);
   border-color: var(--color-sea-green-alt);
 
   @include buttonHover(var(--color-sea-green), var(--color-mint-green-50));
@@ -31,7 +31,7 @@
 
   &[disabled] {
     color: var(--color-sea-green-alt-30);
-    background-color: v#fff;
+    background-color: var(--color-white);
     border-color: var(--color-sea-green-alt-30);
   }
 }
@@ -94,12 +94,12 @@
 @mixin buttonHover--signal() {
   box-shadow: 0 0 0 var(--button-border-width--hover)
       var(--color-signal-yellow),
-    0 0 0 calc(var(--button-border-width--hover) + 1px) #000;
+    0 0 0 calc(var(--button-border-width--hover) + 1px) var(--color-black);
   @content;
 }
 
 .dnb-button--signal {
-  color: #000;
+  color: var(--color-black);
   background-color: var(--color-signal-yellow);
 
   @include hover(true) {
@@ -110,11 +110,7 @@
     }
   }
 
-  &:not([disabled]):focus {
-    html[data-whatinput='keyboard'] & {
-      @include tabFocus();
-    }
-  }
+  @include buttonFocus(var(--color-black), var(--color-signal-yellow));
 
   &[disabled] {
     color: #b0b0b0;