@obosbbl/grunnmuren-react@2.2.0

Minor Changes

• 781c71c: New variants for the <Hero> component. The variant is controlled by the new prop: variant.

  The variant is tied to an intended default heading size, either xl or l. Which means that each variant has it's own default heading styles. So in for the most part, you should never have to set both:

  standard, L heading

  // default: variant="standard" is default and heading size `l` is implicit for this variant
  <Hero>
    <Content>
      <Heading level={1}>Dette er en Hero</Heading>
      <Description>– et samarbeidsprosjekt med Nordr</Description>
    </Content>
    <Media>
      <img
        src="https://res.cloudinary.com/obosit-prd-ch-clry/image/upload/f_auto,c_limit,w_2048,q_auto/v1582122753/Boligprosjekter/Oslo/Ulven/Ulven-N%C3%A6romr%C3%A5de-Oslo-OBOS-Construction-city.jpg"
        alt=""
      />
    </Media>
  </Hero>

  // heading size `l` is implicit for the `full-bleed` variant
  <Hero variant="full-bleed">
    <Content>
      <Heading level={1}>Dette er en Hero</Heading>
      <Description>– et samarbeidsprosjekt med Nordr</Description>
    </Content>
    <Media>
      <img
        src="https://res.cloudinary.com/obosit-prd-ch-clry/image/upload/f_auto,c_limit,w_2048,q_auto/v1582122753/Boligprosjekter/Oslo/Ulven/Ulven-N%C3%A6romr%C3%A5de-Oslo-OBOS-Construction-city.jpg"
        alt=""
      />
    </Media>
  </Hero>

  two-column

  // heading size `xl` is implicit for the `two-column` variant
  <Hero variant="two-column">
    <Content>
      <Heading level={1}>Dette er en Hero</Heading>
      <Description>– et samarbeidsprosjekt med Nordr</Description>
    </Content>
    <Media>
      <img
        src="https://res.cloudinary.com/obosit-prd-ch-clry/image/upload/f_auto,c_limit,w_2048,q_auto/v1582122753/Boligprosjekter/Oslo/Ulven/Ulven-N%C3%A6romr%C3%A5de-Oslo-OBOS-Construction-city.jpg"
        alt=""
      />
    </Media>
  </Hero>

  standard with xl heading

  // variant="standard" is default so that prop can be omitted, and the heading size set to `xl` on the `<Heading>`
  <Hero>
    <Content>
      <Heading level={1} size="xl">
        Dette er en Hero
      </Heading>
      <Description>– et samarbeidsprosjekt med Nordr</Description>
    </Content>
    <Media>
      <img
        src="https://res.cloudinary.com/obosit-prd-ch-clry/image/upload/f_auto,c_limit,w_2048,q_auto/v1582122753/Boligprosjekter/Oslo/Ulven/Ulven-N%C3%A6romr%C3%A5de-Oslo-OBOS-Construction-city.jpg"
        alt=""
      />
    </Media>
  </Hero>

  Heading

  To achieve this control of the heading size a new size prop has been added to the <Heading> component. This way we can implement the same API for the Card component (which should support different heading sizes as well).

  Breaking change to UNSAFE_Hero

  This introduces a breaking change to the beta version of the <Hero>, which is to be expected without a major release. If you are currently using UNSAFE_Hero you would now have to pass variant="full-bleed" as a prop to your component to get the same design as before.

@obosbbl/grunnmuren-tailwind@2.1.0

Minor Changes

• 387463d: Added new breakpoints for large screens: 3xl (108rem) and 4xl (120rem). This enables better control of elements that spans the entire viewport.

@obosbbl/grunnmuren-react@2.1.0

Minor Changes

• 14f78f3: Unflag Avatar as stable, you can now import without the UNSAFE_ prefix: import { Avatar } from '@obosbbl/grunnmuren-react'
• 387463d: New (unstable) <Hero> component that supports a <Heading>, <Description> and <Media>. This initial version only has one single layout, but will be extended with other layout variants in the future (breaking layout/api changes are to be expected).

Patch Changes

• e3bd5a6: Fixes an accessibility issue with the <RadioGroup> component, where passing value="" as a prop caused the radio input to get tabindex="-1". Which would make it inaccessible to keyboard and screen reader users.

@obosbbl/grunnmuren-tailwind@2.0.3

Patch Changes

• 2ef9b6c: Fix the line-height of the heading-s class. The correct line-height is 1.875rem, but it was set to 1.1875rem for small screens.

@obosbbl/grunnmuren-react@2.0.4

Patch Changes

• d197fa4: Fixes the logic behind validation states for inputs, where passing errorMessage="" would set the field in an invalid state. This doesn't really make sense, and can cause strange validation behaviour when using libraries like Zod. With this change setting errorMessage to "" | null | undefined is now equivalent: the field is valid, unless combined with the isInvalid prop set to true.
• Updated dependencies [62fd91f]
  • @obosbbl/grunnmuren-icons-react@2.1.0

@obosbbl/grunnmuren-icons-svg@2.1.0

Minor Changes

• 62fd91f: New icons: ChevronFirstPage and ChevronLastPage

@obosbbl/grunnmuren-icons-react@2.1.0

Minor Changes

• 62fd91f: New icons: ChevronFirstPage and ChevronLastPage

@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