Keep vormtaal

packages/components-css/index.scss

@@ -34,3 +34,5 @@
 @import "textarea/index";
 @import "textbox/index";
 @import "unordered-list/index";
+
+@import "keep/index";

packages/components-css/keep/_mixin.scss

@@ -0,0 +1,77 @@
+@mixin rhc-keep-reset-border-radius {
+  border-radius: 0;
+}
+
+@mixin rhc-keep--border-radius($corner, $factor: 1) {
+  @if $corner == "top-left" {
+    border-start-start-radius: calc(var(--rhc-size-half-lint) * #{$factor});
+  } @else if $corner == "top-right" {
+    border-start-end-radius: calc(var(--rhc-size-half-lint) * #{$factor});
+  } @else if $corner == "bottom-left" {
+    border-end-start-radius: calc(var(--rhc-size-half-lint) * #{$factor});
+  } @else if $corner == "bottom-right" {
+    border-end-end-radius: calc(var(--rhc-size-half-lint) * #{$factor});
+  }
+}
+
+@mixin rhc-keep-corner($corner, $size) {
+  @include rhc-keep-reset-border-radius;
+
+  @if $size == "s" {
+    @include rhc-keep--border-radius($corner, 1);
+  } @else if $size == "m" {
+    @include rhc-keep--border-radius($corner, 2);
+  } @else if $size == "l" {
+    @include rhc-keep--border-radius($corner, 3);
+  }
+}
+
+@mixin rhc-keep-child__horizontal($size) {
+  @if $size == "s" {
+    inline-size: 25%;
+  } @else if $size == "m" {
+    inline-size: 50%;
+  } @else if $size == "l" {
+    inline-size: 75%;
+  } @else if $size == "full" {
+    border-radius: 0;
+    inline-size: 100%;
+  }
+}
+
+@mixin rhc-keep-child__vertical($size) {
+  @if $size == "s" {
+    block-size: 25%;
+  } @else if $size == "m" {
+    block-size: 50%;
+  } @else if $size == "l" {
+    block-size: 75%;
+  } @else if $size == "full" {
+    block-size: 100%;
+    border-radius: 0;
+  }
+}
+
+@mixin rhc-keep-child($position) {
+  @include rhc-keep-reset-border-radius;
+
+  box-sizing: border-box;
+  position: absolute;
+
+  @if $position == "top-left" {
+    inset-block-start: 0;
+    inset-inline-start: 0;
+  }
+  @if $position == "top-right" {
+    inset-block-start: 0;
+    inset-inline-end: 0;
+  }
+  @if $position == "bottom-left" {
+    inset-block-end: 0;
+    inset-inline-start: 0;
+  }
+  @if $position == "bottom-right" {
+    inset-block-end: 0;
+    inset-inline-end: 0;
+  }
+}

packages/components-css/keep/index.scss

@@ -0,0 +1,141 @@
+@import "./mixin";
+
+.rhc-keep {
+  display: inline-block;
+  position: relative;
+
+  &-top-left {
+    &-s {
+      > :first-child {
+        @include rhc-keep-corner("top-left", "s");
+      }
+    }
+
+    &-m {
+      > :first-child {
+        @include rhc-keep-corner("top-left", "m");
+      }
+    }
+
+    &-l {
+      > :first-child {
+        @include rhc-keep-corner("top-left", "l");
+      }
+    }
+  }
+
+  &-top-right {
+    &-s {
+      > :first-child {
+        @include rhc-keep-corner("top-right", "s");
+      }
+    }
+
+    &-m {
+      > :first-child {
+        @include rhc-keep-corner("top-right", "m");
+      }
+    }
+
+    &-l {
+      > :first-child {
+        @include rhc-keep-corner("top-right", "l");
+      }
+    }
+  }
+
+  &-bottom-left {
+    &-s {
+      > :first-child {
+        @include rhc-keep-corner("bottom-left", "s");
+      }
+    }
+    &-m {
+      > :first-child {
+        @include rhc-keep-corner("bottom-left", "m");
+      }
+    }
+
+    &-l {
+      > :first-child {
+        @include rhc-keep-corner("bottom-left", "l");
+      }
+    }
+  }
+
+  &-bottom-right {
+    &-s {
+      > :first-child {
+        @include rhc-keep-corner("bottom-right", "s");
+      }
+    }
+
+    &-m {
+      > :first-child {
+        @include rhc-keep-corner("bottom-right", "m");
+      }
+    }
+
+    &-l {
+      > :first-child {
+        @include rhc-keep-corner("bottom-right", "l");
+      }
+    }
+  }
+}
+
+.rhc-keep-child-top-left {
+  @include rhc-keep-child("top-left");
+  @include rhc-keep-corner("bottom-right", "s");
+}
+
+.rhc-keep-child-top-right {
+  @include rhc-keep-child("top-right");
+  @include rhc-keep-corner("bottom-left", "s");
+}
+
+.rhc-keep-child-bottom-left {
+  @include rhc-keep-child("bottom-left");
+  @include rhc-keep-corner("top-right", "s");
+}
+
+.rhc-keep-child-bottom-right {
+  @include rhc-keep-child("bottom-right");
+  @include rhc-keep-corner("top-left", "s");
+}
+
+.rhc-keep-child__horizontal {
+  &-s {
+    @include rhc-keep-child__horizontal("s");
+  }
+
+  &-m {
+    @include rhc-keep-child__horizontal("m");
+  }
+
+  &-l {
+    @include rhc-keep-child__horizontal("l");
+  }
+
+  &-full {
+    @include rhc-keep-child__horizontal("full");
+  }
+}
+
+.rhc-keep-child__vertical {
+  &-s {
+    @include rhc-keep-child__vertical("s");
+  }
+
+  &-m {
+    @include rhc-keep-child__vertical("m");
+  }
+
+  &-l {
+    @include rhc-keep-child__vertical("l");
+  }
+
+  &-full {
+    @include rhc-keep-child__vertical("full");
+  }
+}

packages/components-react/src/Keep.tsx

@@ -0,0 +1,32 @@
+import clsx from 'clsx';
+import { forwardRef, PropsWithChildren } from 'react';
+
+interface keepProps {
+  keep: 'top-left' | 'top-right' | 'bottom-right' | 'bottom-left';
+  nested: boolean;
+  borderRadius: 's' | 'm' | 'l';
+  firstChild?: string;
+  secondChild?: string;
+}
+
+export const Keep = forwardRef(
+  ({ keep, children, firstChild, secondChild, nested, borderRadius }: PropsWithChildren<keepProps>) => {
+    return (
+      <div
+        className={clsx(
+          {
+            'rhc-keep-nested': nested,
+            'rhc-keep': !nested,
+          },
+          `rhc-keep-${keep}-${borderRadius}`,
+          firstChild !== undefined ? `rhc-keep-child rhc-keep-first-child-${firstChild}` : firstChild,
+          secondChild !== undefined ? `rhc-keep-child rhc-keep-second-child-${secondChild}` : secondChild,
+        )}
+      >
+        {children}
+      </div>
+    );
+  },
+);
+
+Keep.displayName = 'Keep';

packages/components-react/src/index.ts

@@ -62,6 +62,7 @@ export { Heading, type HeadingProps } from './Heading';
 export { Hero, type HeroProps } from './Hero';
 export { Icon, type IconProps, iconOptions } from './icon/Icon';
 export { Image, type ImageProps } from './Image';
+export { Keep } from './Keep';
 export { Link, type LinkProps } from './Link';
 export { LinkList, LinkListLink, type LinkListLinkProps, type LinkListProps } from './LinkList';
 export { Logo, type LogoProps } from './Logo';

packages/storybook/src/community/keep.md

@@ -0,0 +1,74 @@
+# Keep Component
+
+De **Keep component** helpt bij het creëren van vormelementen. Een vormelement is een element dat bestaat uit een rechthoek waarvan één hoek is afgesneden. Een vormelement mag tot maximaal 2 keer worden genest. Dit component ondersteunt je bij het implementeren van deze functionaliteit.
+
+## Structuur van de Keep Component
+
+Dit component is net iets anders dan andere componenten, omdat het ook classes bevat die je kan of moet gebruiken op andere componenten binnen het element.
+
+Het Keep element heeft altijd 1 child, wat het basis element is waarop de Keep wordt toegepast. Stel je voor dat je een afbeelding hebt waarop je het vormelement wilt toepassen.
+
+```HTML
+<Keep
+  borderRadius="m"
+  keep="top-right"
+>
+  <Image
+    alt="Multicolored tulip field"
+    height={763}
+    src="./placeholder.jpg"
+    style={{
+      marginBottom: '-.5rem'
+    }}
+    width={640}
+  />
+</Keep>
+```
+
+In dit voorbeeld wordt het Keep component gebruikt met de keep parameter. Hier moet een string worden doorgegeven die aangeeft in welke hoek de Keep moet zijn.
+
+Als je op de afbeelding een andere component wilt plaatsen, kun je onder de `<Image>` tag een tweede child toevoegen. Deze tweede child wordt automatisch gestapeld op de eerste child. Zorg ervoor dat je aan de child doorgeeft waar deze moet staan en hoe groot deze moet zijn.
+
+```HTML
+<Keep
+  borderRadius="m"
+  keep="top-right"
+>
+  <Image
+    alt="Multicolored tulip field"
+    height={763}
+    src="./placeholder.jpg"
+    style={{
+      marginBottom: '-.5rem'
+    }}
+    width={640}
+  />
+  <Blockquote
+    attribution="— Pippi Langkous"
+    className="rhc-keep-child-bottom-left rhc-keep-child__horizontal-l"
+    variation="pink-background"
+  >
+    Ik heb het nog nooit gedaan dus ik denk dat ik het wel kan
+  </Blockquote>
+</Keep>
+```
+
+Let vooral op de extra classes `rhc-keep-child-top-left` `rhc-keep-child__horizontal-m` die zijn toegevoegd aan het `<Blockquote>` component. Deze zorgen voor de positionering en de grootte van het component.
+
+Opmerking: Je kunt maximaal 3 elementen in het Keep component plaatsen: 1 "basis" en 2 "children".
+
+## Beschikbare Styling
+
+Voor het hoofdcomponent:
+De waarde voor de keep parameter kan zijn: `top-left`, `top-right`, `bottom-left`, of `bottom-right`.
+
+**_Voor de children:_**
+
+| Naam                                     | Waarde                 |
+| ---------------------------------------- | ---------------------- |
+| rhc-keep-child-top-left                  | Uitlijning             |
+| rhc-keep-child-top-right                 | Uitlijning             |
+| rhc-keep-child-bottom-left               | Uitlijning             |
+| rhc-keep-child-bottom-right              | Uitlijning             |
+| .rhc-keep-child\_\_horizontal-s/m/l/full | 25% / 50% / 75% / 100% |
+| .rhc-keep-child\_\_vertical-s/m/l/full   | 25% / 50% / 75% / 100% |