@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`

No alert changes

Improved metrics

Total package byte prevSize

19942

increased by24.21%

Lines of code

111

increased by13.27%

Number of lines in readme file

75

increased by650%

Dependency changes

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

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