@fremtind/jkl-checkbox-react - npm Package Compare versions

Comparing version 1.0.0-alpha.10 to 1.0.0-alpha.11

build/browser/index.js

@@ -8,7 +8,9 @@ import React from 'react';
       checked = _ref.checked,
+      invalid = _ref.invalid,
       onChange = _ref.onChange,
       className = _ref.className,
       _ref$inline = _ref.inline,
-      inline = _ref$inline === void 0 ? false : _ref$inline;
-  var classNames = "jkl-checkbox".concat(inline ? " jkl-checkbox--inline" : "").concat(className ? " ".concat(className) : "");
+      inline = _ref$inline === void 0 ? false : _ref$inline,
+      forceCompact = _ref.forceCompact;
+  var classNames = "jkl-checkbox".concat(forceCompact ? " jkl-checkbox--compact" : "").concat(inline ? " jkl-checkbox--inline" : "").concat(invalid ? " jkl-checkbox--error" : "").concat(className ? " ".concat(className) : "");
   return React.createElement("label", {
@@ -19,2 +21,3 @@ className: classNames
     "data-testid": "jkl-checkbox-input",
+    "aria-invalid": invalid,
     checked: checked,
@@ -21,0 +24,0 @@ type: "checkbox",

build/browser/index.min.js

@@ -1,1 +0,1 @@
-import e from"react";function c(c){var a=c.children,n=c.name,t=c.value,l=c.checked,o=c.onChange,k=c.className,h=c.inline,i="jkl-checkbox".concat(void 0!==h&&h?" jkl-checkbox--inline":"").concat(k?" ".concat(k):"");return e.createElement("label",{className:i},e.createElement("input",{className:"jkl-checkbox__input","data-testid":"jkl-checkbox-input",checked:l,type:"checkbox",name:n,value:t,onChange:o}),e.createElement("span",{className:"jkl-checkbox__check-mark"}),a)}export{c as Checkbox};
+import c from"react";function e(e){var a=e.children,n=e.name,t=e.value,o=e.checked,l=e.invalid,k=e.onChange,i=e.className,r=e.inline,h=void 0!==r&&r,m=e.forceCompact,s="jkl-checkbox".concat(m?" jkl-checkbox--compact":"").concat(h?" jkl-checkbox--inline":"").concat(l?" jkl-checkbox--error":"").concat(i?" ".concat(i):"");return c.createElement("label",{className:s},c.createElement("input",{className:"jkl-checkbox__input","data-testid":"jkl-checkbox-input","aria-invalid":l,checked:o,type:"checkbox",name:n,value:t,onChange:k}),c.createElement("span",{className:"jkl-checkbox__check-mark"}),a)}export{e as Checkbox};

build/Checkbox.d.ts

@@ -10,4 +10,6 @@ import { ReactNode, ChangeEvent } from "react";
     className?: string;
+    forceCompact?: boolean;
+    invalid?: boolean;
 }
-export declare function Checkbox({ children, name, value, checked, onChange, className, inline }: Props): JSX.Element;
+export declare function Checkbox({ children, name, value, checked, invalid, onChange, className, inline, forceCompact, }: Props): JSX.Element;
 export {};

build/cjs/index.js

@@ -14,7 +14,9 @@ 'use strict';
       checked = _ref.checked,
+      invalid = _ref.invalid,
       onChange = _ref.onChange,
       className = _ref.className,
       _ref$inline = _ref.inline,
-      inline = _ref$inline === void 0 ? false : _ref$inline;
-  var classNames = "jkl-checkbox".concat(inline ? " jkl-checkbox--inline" : "").concat(className ? " ".concat(className) : "");
+      inline = _ref$inline === void 0 ? false : _ref$inline,
+      forceCompact = _ref.forceCompact;
+  var classNames = "jkl-checkbox".concat(forceCompact ? " jkl-checkbox--compact" : "").concat(inline ? " jkl-checkbox--inline" : "").concat(invalid ? " jkl-checkbox--error" : "").concat(className ? " ".concat(className) : "");
   return React.createElement("label", {
@@ -25,2 +27,3 @@ className: classNames
     "data-testid": "jkl-checkbox-input",
+    "aria-invalid": invalid,
     checked: checked,
@@ -27,0 +30,0 @@ type: "checkbox",

build/esm/index.js

@@ -8,7 +8,9 @@ import React from 'react';
       checked = _ref.checked,
+      invalid = _ref.invalid,
       onChange = _ref.onChange,
       className = _ref.className,
       _ref$inline = _ref.inline,
-      inline = _ref$inline === void 0 ? false : _ref$inline;
-  var classNames = "jkl-checkbox".concat(inline ? " jkl-checkbox--inline" : "").concat(className ? " ".concat(className) : "");
+      inline = _ref$inline === void 0 ? false : _ref$inline,
+      forceCompact = _ref.forceCompact;
+  var classNames = "jkl-checkbox".concat(forceCompact ? " jkl-checkbox--compact" : "").concat(inline ? " jkl-checkbox--inline" : "").concat(invalid ? " jkl-checkbox--error" : "").concat(className ? " ".concat(className) : "");
   return React.createElement("label", {
@@ -19,2 +21,3 @@ className: classNames
     "data-testid": "jkl-checkbox-input",
+    "aria-invalid": invalid,
     checked: checked,
@@ -21,0 +24,0 @@ type: "checkbox",

build/esm/index.min.js

@@ -1,1 +0,1 @@
-import e from"react";function c(c){var a=c.children,n=c.name,t=c.value,l=c.checked,o=c.onChange,k=c.className,h=c.inline,i="jkl-checkbox".concat(void 0!==h&&h?" jkl-checkbox--inline":"").concat(k?" ".concat(k):"");return e.createElement("label",{className:i},e.createElement("input",{className:"jkl-checkbox__input","data-testid":"jkl-checkbox-input",checked:l,type:"checkbox",name:n,value:t,onChange:o}),e.createElement("span",{className:"jkl-checkbox__check-mark"}),a)}export{c as Checkbox};
+import c from"react";function e(e){var a=e.children,n=e.name,t=e.value,o=e.checked,l=e.invalid,k=e.onChange,i=e.className,r=e.inline,h=void 0!==r&&r,m=e.forceCompact,s="jkl-checkbox".concat(m?" jkl-checkbox--compact":"").concat(h?" jkl-checkbox--inline":"").concat(l?" jkl-checkbox--error":"").concat(i?" ".concat(i):"");return c.createElement("label",{className:s},c.createElement("input",{className:"jkl-checkbox__input","data-testid":"jkl-checkbox-input","aria-invalid":l,checked:o,type:"checkbox",name:n,value:t,onChange:k}),c.createElement("span",{className:"jkl-checkbox__check-mark"}),a)}export{e as Checkbox};

CHANGELOG.md

@@ -6,2 +6,14 @@ # Change Log
 
+# [1.0.0-alpha.11](https://github.com/fremtind/jokul/compare/@fremtind/jkl-checkbox-react@1.0.0-alpha.10...@fremtind/jkl-checkbox-react@1.0.0-alpha.11) (2019-11-01)
+
+
+### Features
+
+* **checkbox:** add error state to checkbox ([6c9a554](https://github.com/fremtind/jokul/commit/6c9a5542721cf10b9221f2bd5371cf55e625bc3a))
+* **checkbox:** implement compact/mobile version of checkbox ([7bacff8](https://github.com/fremtind/jokul/commit/7bacff8c5f82580907040cf31259ad098b9f31b4))
+
+
+
+
+
 # [1.0.0-alpha.10](https://github.com/fremtind/jokul/compare/@fremtind/jkl-checkbox-react@0.8.0...@fremtind/jkl-checkbox-react@1.0.0-alpha.10) (2019-11-01)
@@ -8,0 +20,0 @@

package.json

 {
     "name": "@fremtind/jkl-checkbox-react",
-    "version": "1.0.0-alpha.10",
+    "version": "1.0.0-alpha.11",
     "publishConfig": {
@@ -37,7 +37,7 @@ "access": "public"
     "dependencies": {
-        "@fremtind/jkl-checkbox": "^1.0.0-alpha.10",
-        "@fremtind/jkl-core": "^1.0.0-alpha.10"
+        "@fremtind/jkl-checkbox": "^1.0.0-alpha.11",
+        "@fremtind/jkl-core": "^1.0.0-alpha.11"
     },
     "devDependencies": {
-        "@fremtind/browserslist-config-jkl": "^1.0.0-alpha.10"
+        "@fremtind/browserslist-config-jkl": "^1.0.0-alpha.11"
     },
@@ -60,3 +60,3 @@ "peerDependencies": {
     ],
-    "gitHead": "4a081ffbd6b21231e080ed16ed46b735fc1d4ac7"
+    "gitHead": "72d828b382d0df6d4201fa92c449bfd8e775bcd6"
 }

README.md

@@ -10,1 +10,66 @@ # [`@fremtind/jkl-checkbox-react`](https://fremtind.github.io/jokul/components/checkbox/)
 [Lær hvordan du kan ta i bruk Jøkul](https://fremtind.github.io/jokul/developer/getting-started/)
+
+## Bruk av React-pakken
+
+### Installasjon
+
+1. Installér pakken med `yarn add @fremtind/jkl-checkbox-react` eller `npm i @fremtind/jkl-checkbox-react`. Stil-pakken blir automatisk installert som en avhengighet.
+2. Importér _både_ React-pakken og stil-pakken i prosjektet ditt:
+
+```js
+import { Checkbox } from "@fremtind/jkl-checkbox-react";
+import "@fremtind/jkl-checkbox/checkbox.min.css";
+```
+
+### Bruk
+
+Som regel vil du bruke `Checkbox`-komponenten sammen med `FieldGroup` for å skape en forståelse av konteksten rundt valgene. Se [dokumentasjonen i den pakken](https://fremtind.github.io/jokul/components/fieldgroup/) for nærmere forklaring av funksjonaliteten.
+
+`Checkbox` tar et `name`, som kan være det samme for flere bokser, og en `value` som er unik blandt avmerkingsbokser som deler samme `name`:
+
+```jsx
+<FieldGroup legend="Hvilke forsikringer har du kjøpt?">
+    <Checkbox name="insurances" value="life">
+        Livsforsikring
+    </Checkbox>
+    <Checkbox name="insurances" value="sickness">
+        Kritisk sykdom
+    </Checkbox>
+    <Checkbox name="insurances" value="treatment">
+        Behandlingsforsikring
+    </Checkbox>
+</FieldGroup>
+```
+
+Som standard stables avmerkingsboksene under hverandre. Om de skal stilles side om side kan du bruke prop'en `inline` (husk å sette `inline` på alle boksene):
+
+```jsx
+<Checkbox inline name="valg" value="1">Valg 1</Checkbox>
+<Checkbox inline name="valg" value="2">Valg 2</Checkbox>
+
+// Vil stilles opp slik:
+// [ ] Valg 1  [ ] Valg 2
+```
+
+`Checkbox` brukes som en kontrollert komponent gjennom `checked`-prop'en og en `onChange`-handler som får en `ChangeEvent` som første argument:
+
+```jsx
+// const [isChecked, setChecked] = useState(false);
+
+<Checkbox onChange={setChecked(!isChecked)} checked={isChecked}>
+    Kontrollert
+</Checkbox>
+```
+
+### Props
+
+komponenten tar i bruk følgende props:
+
+-   `children`: **Påkrevd**. Etiketten til avmerkingsboksen. `ReactNode`
+-   `name`: **Påkrevd**. Navnet på valget som tas. `string`
+-   `value`: **Påkrevd**. Valget som tas ved å krysse av. `string`
+-   `checked`: Angir om boksen er merket av. `boolean`
+-   `onChange`: Angir funksjon for å håndtere endring i verdi. Får en `ChangeEvent` som første argument.
+-   `inline`: Angir om boksen skal stå på linje med andre bokser. `boolean`
+-   `className`: Eventuell(e) css-klassenavn for komponenten. `string`
+-   `forceCompact`: Angir at boksen skal vises i liten versjon uavhengig av skjermstørrelse. `boolean`

New alerts

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Fixed alerts

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

19942

24.21%

Lines of code

111

13.27%

Number of lines in readme file

75

650%

Dependency changes

• Updated

  @fremtind/jkl-checkbox@^1.0.0-alpha.11

• Updated

  @fremtind/jkl-core@^1.0.0-alpha.11