@obosbbl/grunnmuren-react@2.0.3

Patch Changes

• 20d8488: Fix bug where inert prop in <Accordion> is set opposite of intended.

@obosbbl/grunnmuren-tailwind@2.0.2

Patch Changes

• 04533db: export font.css and tailwind-typography.css to the bundle
• 190b924: Remove unused tailwind-deps

@obosbbl/grunnmuren-react@2.0.2

Patch Changes

• 190b924: Remove unused tailwind-deps

@obosbbl/grunnmuren-tailwind@2.0.1

Major Changes

• 8ad2fcd: V2 canary release

• f63006a: Fix font-weight on strong tags in prose content (use 500 instead of 600)

• 436ea29: # Upgrade to Tailwind 4

  Tailwind is upgraded to v4. The grunnmuren-tailwind package is now CSS-first configured. And the previously exposed JS config file is now replaced by a CSS config file.

  The legacyV1Compatibility option is removed, so your project has to be fully upgraded to Grunnmuren v2.

  The includeFontFallback option is also removed, and a font fallback will automatically be applied to the OBOS fonts by defaullt.

  Migration

  1. Upgrade your project to Tailwind 4. You can try the migration guide
     from tailwind.
  2. Add @import "@obosbbl/grunnmuren-tailwind"; to the top of the main CSS file of your project. This is the new CSS configuration file for Grunnmuren.
  3. If you have a JS/TS tailwind.config in your project and would like to keep it. You can include it in the main CSS file (mentioned in step 2), by using the @config directive, e.g: @config '../tailwind.config.ts';. Read more here.
  4. Finally, if you would like to get rid of the old tailwind.config. You can move all your configuration to the main CSS file of your project. Tailwind 4 has automatic content detection, but if you need to include some excluded source you can use the @source directive, e.g: @source "./node_modules/@obosbbl/grunnmuren-react/dist";. You can also extend the @obosbbl/grunnmuren-tailwind config by using various directives such as @base or @theme.

  Here is an example of what your main CSS file might look like after migration:

  @import "@obosbbl/grunnmuren-tailwind";
  
  @source "../../node_modules/@obosbbl/grunnmuren-react/dist";
  @source "../../node_modules/@code-obos/obos-layout/dist"
  
  @theme {
    --animate-custom: custom-animation 1s ease-in-out infinite;
    @keyframes custom-animation {
      0%,
      100% {
        transform: rotate(-3deg);
      }
      50% {
        transform: rotate(3deg);
      }
    }
  }
  
  @utility my-custom-util {
    @apply flex flex-col min-h-screen;
  }

• 5a9534b: BREAKING CHANGE: Update font setup to include new font-family, OBOSDisplay.

  • Remove OBOSText-Bold in favor of OBOSDisplay-SemiBold.
  • Change font-family of heading-xl and heading-l to OBOSDisplay.
  • Change name of font-family OBOSFont to OBOSText to make the distinction between OBOSDisplay and OBOSText clearer.
  • Remove Tailwind's default font-sans utility in favor of font-display and font-text to change the font family.
    • If you were previously using next/font and extending the font family in your Tailwind configuration to support that, you should remove all this as the preset now includes an in built font-fallback.

• 6482fad: Updated typography design.

  • BREAKING: Deprecate .h1, .h2, .h3 and .h4 classes
  • Add heading classes with "t-shirt sizes": .heading-xl, .heading-l, .heading-m, .heading-s and .heading-xs
  • Add classes: .paragraph, .lead, .blockquote and .description
    New design on <h1>-<h4> for both utility classes and prose.
  • Update lineheight and fontsize for all typograhpy
  • Update .prose class with new typography.

Minor Changes

• a0bdc73: feat: built in font optimization with a fallback font, in similar vein to next/font. Enabled by default, can be disabled by passing includeFontFallback: false to the preset.
• b5c86a5: Exposes custom properties for container width and gutter, along with all custom colors.
• 7621625: add Tailwind animation plugin

Patch Changes

• f457060: include Tailwind's default font-mono utility for setting the font family.

  OBOS doesn't have a monospaced font, so we use Tailwind's default here.

• 06a7fa3: Add back missing .page-layout and .page-layout-main classes that were removed by mistake in v2.
  This should fix layouts where the main page content isn't tall enough to push the footer down to the bottom
  of the screen.

• 066c74f: Increases breakpoint from md to lg for mobile font styles on typography

• ab9d08a: Add custom styling to <code> in prose content

• 8fe9e00: fix: use correct font-family for headings in v1 compatibility mode

• f096065: Standardizes focus styles.

• 585e6da: Fixes the custom colors so they work with tailwinds opacity modifier

• 6b2f461: Fixes styling on lists in prose.

• 7a62218: Set tailwindcss 3.4.0 as the minimum peer dep

• 7190630: minor adjustment of heading sizes

@obosbbl/grunnmuren-react@2.0.1

Major Changes

• 8ad2fcd: V2 canary release

• 58704e7: BREAKING CHANGE: updated look and feel of entire icon set. The icons are now outlined instead of filled.

  The following icons are renamed:

  • Expand -> ArrowsMaximize
  • BriefcaseMedical -> FirstAidKit
  • Columns -> LayoutGrid
  • Unlock -> LockOpen
  • Twitter -> X

  The following icons are removed:

  • BikeExercise (use Bike or Excerise instead)
  • BuildingAlt
  • CookingPot (use ChefHat instead)
  • CloseBold
  • CloseCircle
  • ExpandAlt
  • MenuAlt
  • StairsFloor

  Added new icons:

  • ArrowDownLeft
  • BuildingBank
  • Buildings
  • Businessplan
  • Cards
  • CheckSquare
  • ChefHat
  • CloseSquare
  • Error
  • HeartFilled
  • Lock
  • LockHeart
  • MobileMoney
  • PlayerPause
  • PlayerPlay
  • Rocket
  • Unlink

• 436ea29: # Upgrade to Tailwind 4

  Tailwind is upgraded to v4. The grunnmuren-tailwind package is now CSS-first configured. And the previously exposed JS config file is now replaced by a CSS config file.

  The legacyV1Compatibility option is removed, so your project has to be fully upgraded to Grunnmuren v2.

  The includeFontFallback option is also removed, and a font fallback will automatically be applied to the OBOS fonts by defaullt.

  Migration

  1. Upgrade your project to Tailwind 4. You can try the migration guide
     from tailwind.
  2. Add @import "@obosbbl/grunnmuren-tailwind"; to the top of the main CSS file of your project. This is the new CSS configuration file for Grunnmuren.
  3. If you have a JS/TS tailwind.config in your project and would like to keep it. You can include it in the main CSS file (mentioned in step 2), by using the @config directive, e.g: @config '../tailwind.config.ts';. Read more here.
  4. Finally, if you would like to get rid of the old tailwind.config. You can move all your configuration to the main CSS file of your project. Tailwind 4 has automatic content detection, but if you need to include some excluded source you can use the @source directive, e.g: @source "./node_modules/@obosbbl/grunnmuren-react/dist";. You can also extend the @obosbbl/grunnmuren-tailwind config by using various directives such as @base or @theme.

  Here is an example of what your main CSS file might look like after migration:

  @import "@obosbbl/grunnmuren-tailwind";
  
  @source "../../node_modules/@obosbbl/grunnmuren-react/dist";
  @source "../../node_modules/@code-obos/obos-layout/dist"
  
  @theme {
    --animate-custom: custom-animation 1s ease-in-out infinite;
    @keyframes custom-animation {
      0%,
      100% {
        transform: rotate(-3deg);
      }
      50% {
        transform: rotate(3deg);
      }
    }
  }
  
  @utility my-custom-util {
    @apply flex flex-col min-h-screen;
  }

• 152b14c: Dropped support for React 18

Minor Changes

• 3cb2008: Button: deprecate isLoading in favor of isPending

  • change prop name to align with React Aria and the useActionState hook in React.
  • improved accessibility for pending state by utilizing React aria
  • button events are now disabled when the button is in a pending state.
  • refactor to CSS instead of useLayoutEffect when button is in a pending state.

• 7e9cd22: Change types for backlink in order to display props correctly in the grunnmuren docs

• 25bda50: New <Avatar> component that can be used to create rounded images. It helps composing components like contact cards.

• ee10040: Button: change implementation to use Button/Link from react-aria-components.

  • onClick prop is now called onPress.
  • Button, when used with a href, now works as expected with the navigate prop in <GrunnmurenProvider>.

• 8b84eb5: Add Accordion and AccordionItem components. Use as follows:

  <Accordion>
    <AccordionItem>
      <Heading>Item 1</Heading>
      <Content>Item 1</Content>
    </AccordionItem>
    <AccordionItem>
      <Heading>Item 2</Heading>
      <Content>Item 2</Content>
    </AccordionItem>
  </Accordion>

• f276e97: add useHref to GrunnmurenProvider to simplify usage with routers such as Next when using a basepath.

  Example with a Next app and the basePath setting set to /medlem.

  Before

  import Link from 'next/link';
  import { Button } from '@obosbbl/grunnmuren-react';
  
  // Notice how you have to handle the basepath yourself with Grunnmuren's component, but not with Next's.
  
  <Link href="/bli-medlem">Bli medlem</Link>
  <Button href="/medlem/bli-medlem">Bli medlem</Button>

  After

  // app/providers.tsx
  'use client'
  import { GrunnmurenProvider } from '@obosbbl/grunnmuren-react';
  import { useRouter } from 'next/navigation';
  
  export function Providers({children, locale}: { children: React.ReactNode, locale: string}) {
    const router = useRouter();
    const useHref = (href: string) => '/medlem' + href;
  
    return (
      <GrunnmurenProvider locale={locale} navigate={router.push} useHref={useHref}>
        {children}
      </GrunnmurenProvider>
    )
  }

  import Link from 'next/link';
  import { Button } from '@obosbbl/grunnmuren-react';
  
  // The hrefs are the same, as basepath is handled by the useHref hook in the provider.
  
  <Link href="/bli-medlem">Bli medlem</Link>
  <Button href="/bli-medlem">Bli medlem</Button>

• 18b0ed8: Render <Badge> as an overlay in <Media> in the <Card> component. This way <Badge> is placed on top of the other content in <Media> (image, illustration or video). It can be either left or right aligned, depending on it's child index of <Media>.

• 5e88755: New FileUpload component in beta. Can be used to upload one or multiple files.

• 899a5e0: Added new component for numbers using the <NumberField/> from RAC. This component and it's stories are very similar to the <TextField/> component

• ae18e99: Add TagGroup component (aka Chips)

• 425dac9: Button: add support for isIconOnly to render a button with a single icon

• 60d6d9e: Rename <I18nProvider /> to <GrunnmurenProvider />. Explicitly set supported languages to nb,, sv and en, with nb as the default.

• 860f58a: add <Badge /> component

• 38c2d3d: add I18nProvider

• 6ebb8af: Add support for className prop on Disclosure

• e665984: New <Modal> component that can be used for modal dialogs.

• 07d0d30: Adding a new <VideoLoop/> component that can play a muted video that loops (similar to a gif). The component respects reduced motion settings for users that have this setting enabled. It ensures further accessibility by requiring a visible or invisible description (alt or caption) of the video content.

  Usage:

  <VideoLoop
      src="https://res.cloudinary.com/obosit-prd-ch-clry/video/upload/v1732199756/Mellom%20husene/Frysja_Loop2.mp4"
      format="mp4"
      alt="Frysjaparken er et moderne nabolag med flotte uteområder og en nydelig kafé"
  />
  
  <Media>
      <VideoLoop
          src="https://res.cloudinary.com/obosit-prd-ch-clry/video/upload/v1732199756/Mellom%20husene/Frysja_Loop2.mp4"
          format="mp4"
      />
      <Caption>Frysjaparken er et moderne nabolag med flotte uteområder og en nydelig kafé</Caption>
  </Media>

• cb3286b: New <Backlink/> component.

• 1217ade: * Export <Alertbox />, <Heading />, <Content /> and <Footer /> components.

  • Prop renaming for dismissable alertboxes.
  • Add isExpandable prop to AlertBox to make content expandable.

• 7ca186c: New layout prop in <Card> to support for responsive horizontal layout.

• dcb1e5c: Added new component <Alertbox/> for dismissable and non-dismissable alerts.

• 9653882: add React 19 as allowed peerDep

• 040cc31: New component: <Disclosure>, which is used to toggle (show/hide) content. Suitable for components like "Read more" buttons, Hamburger menu's etc. This is very similar to the <Accordion/> component. But the the <Disclosure> is more generic, has minimal styling and can be used as a standalone component. <Disclosure> is also typically used to toggle smaller pieces of content then <Accordion/>, and does not imply that the toggle button is a heading associated with the togglable content.

• 7932247: add useLocale() hook that returns the locale set in GrunnmurenProvider

• 5175169: Add Breadcrumbs and Breadcrumb components

• 24261c1: Added sub-components to <Select/> and <Combobox/> to enable grouping of the listbox items.

• dcb804a: Adds support for custom size on TextField and NumberField.

• 8f81997: Alertbox: add icon prop to override the default icon for the variant

  Example:

  import { Subscription } from "@obosbbl/grunnmuren-react/icons";
  
  <Alertbox variant="info" icon={Subscription}>
    {" "}
    ...{" "}
  </Alertbox>;

• 00e0eea: New component <DateFormatter>, that can be used to format dates.

• ef11713: Adds support for accordions that are wrapped by a container with a background color.

• c59ed0f: improve support for HTML forms and native form validation in form components

• e0ab2b0: Add navigate prop to <GrunnmurenProvider> for integration with client side routers such as next/router.

• f32aa43: New <Card> component that can serve as either a clickable link or a decorative container. Supporting text content ...

@obosbbl/grunnmuren-icons-svg@2.0.0

Major Changes

• 5561fd8: Icons now includes built in padding so the icons render as intented by UX. Their size is changed to 24x24px by default.

• 475927a: v2 icon packages

• 8ad2fcd: V2 canary release

• 58704e7: BREAKING CHANGE: updated look and feel of entire icon set. The icons are now outlined instead of filled.

  The following icons are renamed:

  • Expand -> ArrowsMaximize
  • BriefcaseMedical -> FirstAidKit
  • Columns -> LayoutGrid
  • Unlock -> LockOpen
  • Twitter -> X

  The following icons are removed:

  • BikeExercise (use Bike or Excerise instead)
  • BuildingAlt
  • CookingPot (use ChefHat instead)
  • CloseBold
  • CloseCircle
  • ExpandAlt
  • MenuAlt
  • StairsFloor

  Added new icons:

  • ArrowDownLeft
  • BuildingBank
  • Buildings
  • Businessplan
  • Cards
  • CheckSquare
  • ChefHat
  • CloseSquare
  • Error
  • HeartFilled
  • Lock
  • LockHeart
  • MobileMoney
  • PlayerPause
  • PlayerPlay
  • Rocket
  • Unlink

Minor Changes

• e92b0f2: * minor updates to some of the icons.
  • added new icons:
    • Flower
    • Globe
    • HouseWarning
    • Megaphone
    • Member
    • MemberBonus
    • Rain
• 9737bf0: feat: addded new icons ThumbsUp, ThumbsDown, Candle, University, Figma, Github & Slack
• 04e1531: add Seniority icon

Patch Changes

• 389d117: update svgo
• 36f31d9: icons: optimize SVGs by merging paths when possible
• e6db3d4: add History icon

@obosbbl/grunnmuren-icons-react@2.0.0

Major Changes

• 5561fd8: Icons now includes built in padding so the icons render as intented by UX. Their size is changed to 24x24px by default.

• 475927a: v2 icon packages

• 8ad2fcd: V2 canary release

• 152b14c: Dropped support for React 18

• 2f4a527: BREAKING CHANGE: updated look and feel of entire icon set. The icons are now outlined instead of filled.

  See release notes for @obosbbl/grunnmuren-icons-svg for more details.

Minor Changes

• e92b0f2: * minor updates to some of the icons.
  • added new icons:
    • Flower
    • Globe
    • HouseWarning
    • Megaphone
    • Member
    • MemberBonus
    • Rain
• 9737bf0: feat: addded new icons ThumbsUp, ThumbsDown, Candle, University, Figma, Github & Slack
• 9653882: add React 19 as allowed peerDep
• 04e1531: add Seniority icon

Patch Changes

• 36f31d9: icons: optimize SVGs by merging paths when possible
• e6db3d4: add History icon
• 834c1a9: use bunchee instead of unbuild to bundle the icons

@obosbbl/grunnmuren-react@2.0.0-canary.56

Patch Changes

• b74f4b7: Fix issue with focus getting lost when all files are removed from FileUpload. Focus is now automatically set to the file upload when deleting files.
• b7933ac: Fix FileUpload so that custom errorMessage is displayed

@obosbbl/grunnmuren-react@2.0.0-canary.55

Minor Changes

• 25bda50: New <Avatar> component that can be used to create rounded images. It helps composing components like contact cards.
• 5e88755: New FileUpload component in beta. Can be used to upload one or multiple files.
• ae18e99: Add TagGroup component (aka Chips)
• e665984: New <Modal> component that can be used for modal dialogs.

Patch Changes

• 5e88755: Expose <Label>, <Description> and <ErrorMessage> components
• 39bb81c: Fix file count incrementation in FileUpload.
• 35d8078: upgrade react-aria dependencies

@obosbbl/grunnmuren-react@2.0.0-canary.54

Patch Changes

• 84d5bea: Fixes style on <Media> children when hovering a <Card>