From ce92a71b1d68c19048839e12314b7893e53f1123 Mon Sep 17 00:00:00 2001
From: 0phoff <0phoff@users.noreply.github.com>
Date: Wed, 22 Nov 2023 10:57:45 +0100
Subject: [PATCH] Added Shape component

---
 components/Shape.vue  | 67 +++++++++++++++++++++++++++++++++++++++++++
 example.md            | 49 +++++++++++++++++++++----------
 styles/components.css | 26 +++++++++++++++++
 3 files changed, 127 insertions(+), 15 deletions(-)
 create mode 100644 components/Shape.vue

diff --git a/components/Shape.vue b/components/Shape.vue
new file mode 100644
index 0000000..ac0d0e1
--- /dev/null
+++ b/components/Shape.vue
@@ -0,0 +1,67 @@
+<script setup>
+import { computed } from 'vue'
+import Block from './Block.vue';
+
+const props = defineProps({
+    size: String,
+    type: String,
+    aspect: Number,
+    horizontalClip: Number,
+    verticalClip: Number,
+})
+
+const styles = computed(() => {
+    switch (props.type) {
+        case 'hexagon':
+        case 'hexagon-horizontal':
+            return {
+                aspect: 1.1547,
+                horizontalClip: 0.25,
+                verticalClip: 0.5,
+            };
+
+        case 'hexagon-vertical':
+            return {
+                aspect: 1 / 1.1547,
+                horizontalClip: 0.5,
+                verticalClip: 0.25,
+            };
+
+        case 'octagon':
+            return {
+                aspect: 1,
+                horizontalClip: 0.2929,
+                verticalClip: 0.2929,
+            };
+
+        case 'rhombus':
+            return {
+                aspect: 1,
+                horizontalClip: 0.5,
+                verticalClip: 0.5,
+            };
+
+        default:
+            return {
+                aspect: props.aspect,
+                horizontalClip: props.horizontalClip,
+                verticalClip: props.verticalClip,
+            };
+    }
+});
+</script>
+
+<template>
+    <Block class="shape">
+        <slot />
+    </Block>
+</template>
+
+<style scoped>
+.shape {
+    --shape-size: v-bind('props.size');
+    --shape-aspect: v-bind('styles.aspect');
+    --shape-horizontal-clip: calc(clamp(0, v-bind('styles.horizontalClip'), 0.5) * 100%);
+    --shape-vertical-clip: calc(clamp(0, v-bind('styles.verticalClip'), 0.5) * 100%);
+}
+</style>
\ No newline at end of file
diff --git a/example.md b/example.md
index 115dc42..d177901 100644
--- a/example.md
+++ b/example.md
@@ -271,6 +271,33 @@ color-opacity: 0.6
 # Components
 
 
+---
+layout: stack
+content-class: gap-5 py-5
+---
+
+# Block
+::content::
+
+<Block>
+This is a block.
+</Block>
+
+<Block color="var(--kul-orange-400)" class="rounded-4 py-5 w-[90%] text-right">
+This is another block with a different color and some UnoCSS styling.
+</Block>
+
+<Block
+  class="w-full py-20"
+  image="https://images.unsplash.com/photo-1682686578707-140b042e8f19?q=80&w=1975&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+  color-opacity="0.6"
+>
+
+Similarly to the image layout, a block can have a background image and a (transparent) background overlay color.
+
+</Block>
+
+
 ---
 layout: stack
 content-class: flex-row gap-25 mb-14
@@ -309,26 +336,18 @@ content-class: flex-row gap-25 mb-14
 
 ---
 layout: stack
-content-class: gap-5 py-5
+content-class: flex-row gap-25 mb-14
 ---
 
-# Block
+# Shape
 ::content::
 
-<Block>
-This is a block.
-</Block>
+<Shape size="150px" type="hexagon" color="var(--kul-blue-200)"/>
+<Shape size="150px" type="hexagon-vertical" color="var(--kul-blue-300)" />
+<Shape size="150px" type="octagon" color="var(--kul-blue-400)" />
+<Shape size="150px" type="rhombus" color="var(--kul-blue-500)" />
+<Shape size="150px" :aspect="0.9" :horizontalClip="0.4" :verticalClip="0.2" color="var(--kul-blue-600)" />
 
-<Block color="var(--kul-orange-400)" class="rounded-4 py-5 w-[90%] text-right">
-This is another block with a different color and some UnoCSS styling.
-</Block>
 
-<Block
-  class="w-full py-20"
-  image="https://images.unsplash.com/photo-1682686578707-140b042e8f19?q=80&w=1975&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
-  color-opacity="0.6"
->
 
-Similarly to the image layout, a block can have a background image and a (transparent) background overlay color.
 
-</Block>
diff --git a/styles/components.css b/styles/components.css
index d6a8ec2..f841b52 100644
--- a/styles/components.css
+++ b/styles/components.css
@@ -151,6 +151,32 @@
 }
 
 
+/*
+ *  SHAPE
+ *  Element that has a clip-path property to draw various geometric shapes (octagon, rhombus, hexagon).
+ *
+ *  Variables
+ *      --shape-size: Size (width) of the element
+ *      --shape-aspect: Aspect ratio of the element
+ *      --shape-horizontal-clip: Horizontal clipping distance
+ *      --shape-vertical-clip: Vertical clipping distance
+ */
+.shape {
+    width: var(--shape-size);
+    aspect-ratio: var(--shape-aspect, 1);
+    clip-path: polygon(
+        var(--shape-horizontal-clip) 0,
+        calc(100% - var(--shape-horizontal-clip)) 0,
+        100% var(--shape-vertical-clip),
+        100% calc(100% - var(--shape-vertical-clip)),
+        calc(100% - var(--shape-horizontal-clip)) 100%,
+        var(--shape-horizontal-clip) 100%,
+        0 calc(100% - var(--shape-vertical-clip)),
+        0 var(--shape-vertical-clip)
+    );
+}
+
+
 /*
  *  STACK
  *  Element where all the childs get stacked (vertically by default).