Skip to content

Version Packages #1377

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Aug 5, 2025
Merged

Version Packages #1377

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
84 changes: 0 additions & 84 deletions .changeset/wet-toes-relax.md
View file
Open in desktop

This file was deleted.

85 changes: 85 additions & 0 deletions packages/react/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,90 @@
# @obosbbl/grunnmuren-react

## 3.0.1

### Patch Changes

- 60d6e26: New `<Tab>` component in beta, usage:

```tsx
import {
UNSAFE_Tab as Tab,
UNSAFE_TabList as TabList,
UNSAFE_TabPanel as TabPanel,
UNSAFE_Tabs as Tabs,
} from "./tabs";

const MyTabs = () => (
<Tabs>
<TabList aria-label="Boligkjøp">
<Tab id="grunnpris">Grunnpris</Tab>
<Tab id="tilvalg">Tilvalg</Tab>
<Tab id="finansiering">Finansiering</Tab>
</TabList>
<TabPanel id="grunnpris">
<h3 className="mb-4 font-semibold text-lg">Grunnpris</h3>
<p>
Grunnprisen inkluderer alle standardspesifikasjoner som er definert
for boligen. Dette omfatter kjøkken, bad, gulv og andre grunnutstyr.
</p>
</TabPanel>
<TabPanel id="tilvalg">
<p>
<h3 className="mb-4 font-semibold text-lg">Tilvalg</h3>
Her kan du velge oppgraderinger som hvitevarer, gulvtyper, fliser og
andre tilpasningsmuligheter for å skape ditt drømmehjem.
</p>
</TabPanel>
<TabPanel id="finansiering">
<h3 className="mb-4 font-semibold text-lg">Finansiering</h3>
<p>
OBOS Bank tilbyr konkurransedyktige boliglån med gunstige vilkår for
våre medlemmer. Få hjelp til å finansiere ditt boligkjøp.
</p>
</TabPanel>
</Tabs>
);
```

Note that the `id` of each `<Tab>` must correspond to the `id` of a `<Tabpanel>`. The order of the `<Tab>` components determines the order, and the order of the `<TabPanel>` components is insignificant.

The component supports both horizontal and vertical orientation:

```tsx
const MyVerticalTabs = () => (
<Tabs orientation="vertical">
<TabList aria-label="Boligkjøp">
<Tab id="grunnpris">Grunnpris</Tab>
<Tab id="tilvalg">Tilvalg</Tab>
<Tab id="finansiering">Finansiering</Tab>
</TabList>
<TabPanel id="grunnpris">
<h3 className="mb-4 font-semibold text-lg">Grunnpris</h3>
<p>
Grunnprisen inkluderer alle standardspesifikasjoner som er definert
for boligen. Dette omfatter kjøkken, bad, gulv og andre grunnutstyr.
</p>
</TabPanel>
<TabPanel id="tilvalg">
<p>
<h3 className="mb-4 font-semibold text-lg">Tilvalg</h3>
Her kan du velge oppgraderinger som hvitevarer, gulvtyper, fliser og
andre tilpasningsmuligheter for å skape ditt drømmehjem.
</p>
</TabPanel>
<TabPanel id="finansiering">
<h3 className="mb-4 font-semibold text-lg">Finansiering</h3>
<p>
OBOS Bank tilbyr konkurransedyktige boliglån med gunstige vilkår for
våre medlemmer. Få hjelp til å finansiere ditt boligkjøp.
</p>
</TabPanel>
</Tabs>
);
```

Horizontal tabs will be scrollable if the `<Tabs>` overflows it's container.

## 3.0.0

### Major Changes
Expand Down
2 changes: 1 addition & 1 deletion packages/react/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@obosbbl/grunnmuren-react",
"version": "3.0.0",
"version": "3.0.1",
"description": "Grunnmuren components in React",
"repository": {
"url": "https://github.com/code-obos/grunnmuren"
Expand Down