Carousel

.changeset/many-rocks-itch.md

@@ -0,0 +1,116 @@
+---
+"@obosbbl/grunnmuren-tailwind": minor
+"@obosbbl/grunnmuren-react": minor
+---
+
+# Carousel
+
+## grunnmuren-react
+New `Carousel` component that can be used for any content, all though primarily intended for media such as images and `VideoLoops`.
+
+## Usage
+``` tsx
+<Carousel>
+  <CarouselItems>
+  <CarouselItem>
+    <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>
+  </CarouselItem>
+  <CarouselItem>
+    <Media>
+      <img
+        src="https://res.cloudinary.com/obosit-prd-ch-clry/image/upload/v1587988823/Boligprosjekter/Oslo/Frysjaparken/Frysjalia/Frysjaparken_interi%C3%B8r_30.jpg"
+        alt=""
+      />
+      </CarouselI
+  </Media>tem>
+  <CarouselItem>
+    // This image has a portrait aspect ratio
+    <Media fit="contain">
+      <img
+        src="https://res.cloudinary.com/obosit-prd-ch-clry/image/upload/f_auto,c_limit,w_1080,q_auto:best/t_2_3/v1747985572/Temasider/Folk/Hans%20Petter%20%20-%20Trang%20f%C3%B8dsel/Obos-Hans-Petter-Aaserud-Photo-Einar-Aslaksen-03093_web.jpg"
+        alt=""
+      />
+    </Media>
+  </CarouselItem>
+  <CarouselItem>
+    <Media>
+      <img
+        src="https://res.cloudinary.com/obosit-prd-ch-clry/image/upload/v1699879884/Boligprosjekter/Oslo/Frysjaparken/Ager/Originale%20bilder/OBOS_Frysja-Ager-Illustrasjon_av_Frysja_torg_i_Ager_borettslag.jpg"
+        alt=""
+      />
+    </Media>
+  </CarouselItem>
+  </CarouselItems>
+</Carousel>
+```
+
+Use the `fit` prop on the `<Media>` primitive to control the `object-fit` (`cover` | `contain`) behavior of it's children, this is a way to prevent cropping of images in portrait format. This defaults to `cover`, so for portrait images set it to `contain`.
+
+### In Hero
+
+The component can also be used inside the `<Hero>` component:
+``` tsx
+<Hero variant="full-bleed">
+  <Content>
+    <Heading level={1}>Ulven</Heading>
+    <Description>– et nytt nabolag i Oslo</Description>
+  </Content>
+  <Carousel>
+    <CarouselItems>
+    <CarouselItem>
+      <CarouselItem>
+      <Media>
+        <VideoLoop
+          src="https://res.cloudinary.com/obosit-prd-ch-clry/video/upload/v1732199756/Mellom%20husene/Frysja_Loop2.mp4"
+          format="mp4"
+          alt="En postbil kjører rundt i det moderne nabolaget på Frysja. Her finnes det fine uteområder, med husker og kafeer."
+        />
+      </Media>
+      </CarouselItem>
+    </CarouselItem>
+    <CarouselItem>
+      <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>
+    </CarouselItem>
+    <CarouselItem>
+      <Media>
+        <img
+          src="https://res.cloudinary.com/obosit-prd-ch-clry/image/upload/v1587988823/Boligprosjekter/Oslo/Frysjaparken/Frysjalia/Frysjaparken_interi%C3%B8r_30.jpg"
+          alt=""
+        />
+      </Media>
+    </CarouselItem>
+    <CarouselItem>
+      // This image has a portrait aspect ratio
+      <Media fit="contain">
+        <img
+          src="https://res.cloudinary.com/obosit-prd-ch-clry/image/upload/f_auto,c_limit,w_1080,q_auto:best/t_2_3/v1747985572/Temasider/Folk/Hans%20Petter%20%20-%20Trang%20f%C3%B8dsel/Obos-Hans-Petter-Aaserud-Photo-Einar-Aslaksen-03093_web.jpg"
+          alt=""
+        />
+      </Media>
+    </CarouselItem>
+    <CarouselItem>
+      <Media>
+        <img
+          src="https://res.cloudinary.com/obosit-prd-ch-clry/image/upload/v1699879884/Boligprosjekter/Oslo/Frysjaparken/Ager/Originale%20bilder/OBOS_Frysja-Ager-Illustrasjon_av_Frysja_torg_i_Ager_borettslag.jpg"
+          alt=""
+        />
+      </Media>
+    </CarouselItem>
+    </CarouselItems>
+  </Carousel>
+</Hero>
+```
+
+## grunnmuren-tailwind
+
+A new `scrollbar-hidden` utility class has been added which hides scorllbar visually. This is needed in the `<Carousel>` component, as it uses `snap-scroll`.

packages/react/package.json

@@ -31,7 +31,8 @@
     "cva": "^1.0.0-0",
     "react-aria": "^3.38.1",
     "react-aria-components": "^1.7.1",
-    "react-stately": "^3.35.0"
+    "react-stately": "^3.35.0",
+    "use-debounce": "^10.0.4"
   },
   "peerDependencies": {
     "react": "^19"

packages/react/src/button/button.tsx

@@ -1,12 +1,14 @@
 import { LoadingSpinner } from '@obosbbl/grunnmuren-icons-react';
 import { type VariantProps, cva } from 'cva';
-import type { Ref } from 'react';
+import { type Ref, createContext } from 'react';
 import { useProgressBar } from 'react-aria';
 import {
+  type ContextValue,
   Button as RACButton,
   type ButtonProps as RACButtonProps,
   Link as RACLink,
   type LinkProps as RACLinkProps,
+  useContextProps,
 } from 'react-aria-components';
 import { translations } from '../translations';
 import { useLocale } from '../use-locale';
@@ -130,21 +132,25 @@ type ButtonOrLinkProps = VariantProps<typeof buttonVariants> & {
 
 type ButtonProps = (RACButtonProps | RACLinkProps) & ButtonOrLinkProps;
 
+const ButtonContext = createContext<
+  ContextValue<ButtonProps, HTMLButtonElement | HTMLAnchorElement>
+>({});
+
 function isLinkProps(
   props: ButtonProps,
 ): props is ButtonOrLinkProps & RACLinkProps {
   return !!props.href;
 }
 
-function Button(props: ButtonProps) {
+function Button({ ref = null, ...props }: ButtonProps) {
+  [props, ref] = useContextProps(props, ref, ButtonContext);
   const {
     children: _children,
     color,
     isIconOnly,
     isLoading,
     variant,
     isPending: _isPending,
-    ref,
     ...restProps
   } = props;
 
@@ -197,4 +203,4 @@ function Button(props: ButtonProps) {
   );
 }
 
-export { Button, type ButtonProps };
+export { Button, ButtonContext, type ButtonProps };

packages/react/src/carousel/carousel.stories.tsx

@@ -0,0 +1,64 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import {
+  UNSAFE_Carousel as Carousel,
+  UNSAFE_CarouselItem as CarouselItem,
+  UNSAFE_CarouselItems as CarouselItems,
+} from '../carousel';
+import { Media } from '../content';
+
+const meta: Meta<typeof Carousel> = {
+  title: 'Carousel',
+  component: Carousel,
+  parameters: {
+    // disable built in padding in story, because we provide our own
+    variant: 'fullscreen',
+  },
+  render: () => (
+    <main className="container grid gap-y-8">
+      <Carousel>
+        <CarouselItems>
+          <CarouselItem>
+            <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>
+          </CarouselItem>
+          <CarouselItem>
+            <Media>
+              <img
+                src="https://res.cloudinary.com/obosit-prd-ch-clry/image/upload/v1587988823/Boligprosjekter/Oslo/Frysjaparken/Frysjalia/Frysjaparken_interi%C3%B8r_30.jpg"
+                alt=""
+              />
+            </Media>
+          </CarouselItem>
+          <CarouselItem>
+            <Media fit="contain">
+              <img
+                src="https://res.cloudinary.com/obosit-prd-ch-clry/image/upload/f_auto,c_limit,w_1080,q_auto:best/t_2_3/v1747985572/Temasider/Folk/Hans%20Petter%20%20-%20Trang%20f%C3%B8dsel/Obos-Hans-Petter-Aaserud-Photo-Einar-Aslaksen-03093_web.jpg"
+                alt=""
+              />
+            </Media>
+          </CarouselItem>
+          <CarouselItem>
+            <Media>
+              <img
+                src="https://res.cloudinary.com/obosit-prd-ch-clry/image/upload/v1699879884/Boligprosjekter/Oslo/Frysjaparken/Ager/Originale%20bilder/OBOS_Frysja-Ager-Illustrasjon_av_Frysja_torg_i_Ager_borettslag.jpg"
+                alt=""
+              />
+            </Media>
+          </CarouselItem>
+        </CarouselItems>
+      </Carousel>
+    </main>
+  ),
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Carousel>;
+
+export const StandardWithLeadAndImage: Story = {
+  args: {},
+};