@sb1/ffe-collapse-react 100.8.3 → 100.9.0

package/README.md

@@ -1,42 +1,87 @@
 # @sb1/ffe-collapse-react
 
-React component for expand/collapse
+## Beskrivelse
 
-## Install
+React-komponent for å vise og skjule innhold med animasjon. Bruker CSS grid-animasjon for jevn overgang mellom åpent og lukket tilstand.
 
-```
+## Installasjon
+
+```bash
 npm install --save @sb1/ffe-collapse-react
 ```
 
-## Usage
+## Bruk
 
-Full documentation on collapse usage is available at https://design.sparebank1.no/komponenter/collapse/.
+Dokumentasjon: https://sparebank1.github.io/designsystem/
 
-Please note the component depends on transition styling for `height`.\
-This can preferably be done by importing the less-file from the less-folder
-in the package.\
-Alternatively you can do it by adding style to the class
-`.ffe-collapse-transition`\, adding it to your own class and provide the class
-through the `className` property or by styling it directly through the `style` property.
+### Importere CSS
 
-### Importing compiled CSS
+```css
+@import '@sb1/ffe-collapse-react/css/collapse.css';
+```
 
-If your project does not use Less, you can import the compiled styling:
+Merk: CSS-variablene `--ffe-transition-duration` og `--ffe-ease` må være definert (tilgjengelig via `@sb1/ffe-core`).
 
-```css
-@import '~@sb1/ffe-collapse-react/css/collapse.css';
+## Eksempler
+
+### Grunnleggende bruk
+
+```tsx
+import { Collapse } from '@sb1/ffe-collapse-react';
+import { useState } from 'react';
+
+function BasicExample() {
+    const [isOpen, setIsOpen] = useState(false);
+
+    return (
+        <div>
+            <button onClick={() => setIsOpen(!isOpen)}>
+                {isOpen ? 'Skjul' : 'Vis'} innhold
+            </button>
+            <Collapse isOpen={isOpen}>
+                <p>Dette innholdet kan vises og skjules</p>
+            </Collapse>
+        </div>
+    );
+}
 ```
 
-## Development
+### Med ExpandButton
 
-To start a local development server, run the following from the designsystem root folder:
+```tsx
+import { Collapse } from '@sb1/ffe-collapse-react';
+import { ExpandButton } from '@sb1/ffe-buttons-react';
+import { useState } from 'react';
 
-```bash
-npm install
-npm run build
-npm start
+function ExpandButtonExample() {
+    const [isOpen, setIsOpen] = useState(false);
+
+    return (
+        <div>
+            <ExpandButton
+                isExpanded={isOpen}
+                onClick={() => setIsOpen(!isOpen)}
+            >
+                {isOpen ? 'Skjul' : 'Vis'} detaljer
+            </ExpandButton>
+            <Collapse isOpen={isOpen}>
+                <p>Detaljert informasjon her</p>
+            </Collapse>
+        </div>
+    );
+}
 ```
 
-A local instance of `Storybook` with live reloading will run at http://localhost:6006/.
+## TypeScript
+
+```typescript
+import type { CollapseProps } from '@sb1/ffe-collapse-react';
+```
+
+## Utvikling
+
+```bash
+npm install && npm run build && npm start
+```
 
-Example implementations using the latest versions of all components are also available at https://sparebank1.github.io/designsystem.
+Storybook kjører på http://localhost:6006/.

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@sb1/ffe-collapse-react",
-    "version": "100.8.3",
+    "version": "100.9.0",
     "description": "React component for expand/collapse",
     "keywords": [
         "ffe"
@@ -30,11 +30,11 @@
         "test:watch": "ffe-buildtool jest --watch"
     },
     "dependencies": {
-        "@sb1/ffe-core": "^100.8.3",
+        "@sb1/ffe-core": "^100.9.0",
         "classnames": "^2.3.1"
     },
     "devDependencies": {
-        "@sb1/ffe-buildtool": "^100.8.3",
+        "@sb1/ffe-buildtool": "^100.9.0",
         "eslint": "^9.22.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0"
@@ -45,5 +45,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "f33cf64a467cb430540d1320e763a4f223a8012c"
+    "gitHead": "41f20cf10bec5ebe53036c282690983d2114fb45"
 }