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,85 @@
+@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 == "xs" {
+    inline-size: 25%;
+  } @else if $size == "sm" {
+    inline-size: 33%;
+  } @else if $size == "md" {
+    inline-size: 50%;
+  } @else if $size == "lg" {
+    inline-size: 66%;
+  } @else if $size == "xl" {
+    inline-size: 75%;
+  } @else if $size == "full" {
+    border-radius: 0;
+    inline-size: 100%;
+  }
+}
+
+@mixin rhc-keep-child__vertical($size) {
+  @if $size == "xs" {
+    block-size: 25%;
+  } @else if $size == "sm" {
+    block-size: 33%;
+  } @else if $size == "md" {
+    block-size: 50%;
+  } @else if $size == "lg" {
+    block-size: 66%;
+  } @else if $size == "xl" {
+    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,157 @@
+@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 {
+  &-xs {
+    @include rhc-keep-child__horizontal("xs");
+  }
+
+  &-sm {
+    @include rhc-keep-child__horizontal("sm");
+  }
+
+  &-md {
+    @include rhc-keep-child__horizontal("md");
+  }
+
+  &-lg {
+    @include rhc-keep-child__horizontal("lg");
+  }
+
+  &-xl {
+    @include rhc-keep-child__horizontal("xl");
+  }
+
+  &-full {
+    @include rhc-keep-child__horizontal("full");
+  }
+}
+
+.rhc-keep-child__vertical {
+  &-xs {
+    @include rhc-keep-child__vertical("xs");
+  }
+
+  &-sm {
+    @include rhc-keep-child__vertical("sm");
+  }
+
+  &-md {
+    @include rhc-keep-child__vertical("md");
+  }
+
+  &-lg {
+    @include rhc-keep-child__vertical("lg");
+  }
+
+  &-xl {
+    @include rhc-keep-child__vertical("xl");
+  }
+
+  &-full {
+    @include rhc-keep-child__vertical("full");
+  }
+}

packages/components-react/src/Keep.tsx

@@ -0,0 +1,13 @@
+import clsx from 'clsx';
+import { forwardRef, PropsWithChildren } from 'react';
+
+interface keepProps {
+  keepCorner: 'top-left' | 'top-right' | 'bottom-right' | 'bottom-left';
+  borderRadius: 's' | 'm' | 'l';
+}
+
+export const Keep = forwardRef(({ keepCorner, children, borderRadius }: PropsWithChildren<keepProps>) => {
+  return <div className={clsx('rhc-keep', `rhc-keep-${keepCorner}-${borderRadius}`)}>{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,94 @@
+# 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 3 componenten bevatten. Dit component ondersteunt je bij het implementeren van deze functionaliteit. Een _keep_ is een afgeronde border in één van de hoeken van een component.
+
+## Structuur van de Keep Component
+
+De Keep component heeft altijd minimaal één child, wat het basis component is waarop de `keep` wordt toegepast. Stel je voor dat je een afbeelding hebt waarop je het vormelement wilt toepassen.
+
+```HTML
+<Keep
+  borderRadius="m"
+  keepCorner="top-right"
+>
+  <Image
+    alt="Multicolored tulip field"
+    height={763}
+    src="./placeholder.jpg"
+    width={640}
+  />
+</Keep>
+```
+
+In dit voorbeeld wordt de Keep component gebruikt met de keepCorner parameter. Hier moet een string worden doorgegeven die aangeeft in welke hoek de keep moet zijn. Ook moet je meegeven hoe groot de afronding 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 zodra je hier een klasse aan toevoegt. Zorg ervoor dat je aan de child doorgeeft waar deze moet staan en hoe groot deze moet zijn.
+
+```HTML
+<Keep
+  borderRadius="m"
+  keepCorner="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-lg"
+    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 de tweede child component (`<Blockquote>`). Deze zorgen voor de positionering en de grootte van de component.
+
+Opmerking: Je kunt maximaal 3 elementen in het Keep component plaatsen: 1 "basis" en 2 "children".
+
+## Parameters
+
+De keep component heeft twee verplichte parameters:
+
+- keepCorner: In deze parameter geef je aan waar je de afronding op het eerste component wilt hebben. De waardes kunnen zijn; `top-left` `top-right` `bottom-left` `bottom-right`
+
+- borderRadius: Hoeveel pixel de border radius is van het eerste component. `s` `m` `l`. De waarde van de pixel hangt af van de helft van de lint-size. Voor Rijkshuisstijl is dat 24px voor `s`, 48px voor `m` en 72px voor `l`.
+
+**_Voor de overige twee componenten zijn er utilities classes die je kan gebruiken voor de styling._**
+
+**_Waar het component is uitgelijnd_**
+
+| Class                       | 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 |
+
+**_Hoe groot het component horizontaal is_**
+
+| Class                             | Waarde |
+| --------------------------------- | ------ |
+| rhc-keep-child\_\_horizontal-xs   | 25%    |
+| rhc-keep-child\_\_horizontal-sm   | 33%    |
+| rhc-keep-child\_\_horizontal-md   | 50%    |
+| rhc-keep-child\_\_horizontal-lg   | 66%    |
+| rhc-keep-child\_\_horizontal-xl   | 75%    |
+| rhc-keep-child\_\_horizontal-full | 100%   |
+
+**_Hoe groot het component verticaal is_**
+
+| Class                           | Waarde |
+| ------------------------------- | ------ |
+| rhc-keep-child\_\_vertical-xs   | 25%    |
+| rhc-keep-child\_\_vertical-sm   | 33%    |
+| rhc-keep-child\_\_vertical-md   | 50%    |
+| rhc-keep-child\_\_vertical-lg   | 66%    |
+| rhc-keep-child\_\_vertical-xl   | 75%    |
+| rhc-keep-child\_\_vertical-full | 100%   |