merge

Author: mhewson

src/components/objectOverlay/CdrObjectOverlay.vue

@@ -1,31 +1,11 @@
 <script setup lang="ts">
 import { useCssModule, computed } from 'vue';
-import {
-  ObjectPosition,
-  ResponsivePosition,
-  ResponsiveSpace,
-  Spacing,
-  Gradient,
-  ResponsiveGradient
-} from '../../types/interfaces';
+import type { ObjectOverlayProps } from '../../types/interfaces';
 
 /** Component for positioning content in 9 different positions relative to a container */
 
 defineOptions({ name: 'CdrObjectOverlay' });
 
-interface ObjectOverlayProps {
-  /** Gradient to be applied to the container */
-  gradient?: ResponsiveGradient | Gradient;
-  /** Position of the content relative to the container */
-  position?: ResponsivePosition | ObjectPosition;
-  /** Margin space around the positioned content */
-  margin?: ResponsiveSpace | Spacing;
-  /** Padding space around the positioned content */
-  padding?: ResponsiveSpace | Spacing;
-  /** Sets the HTML tag for the container element */
-  tag?: string;
-}
-
 const props = withDefaults(defineProps<ObjectOverlayProps>(), {
   position: 'center-center',
   margin: 'zero',

src/components/objectOverlay/examples/ObjectOverlay.vue

@@ -9,8 +9,6 @@ import CdrTitle from '../../title/CdrTitle.vue';
 import CdrButton from '../../button/CdrButton.vue';
 import CdrIcon from '../../icon/CdrIcon.vue';
 import cedarImage from '../../../dev/static/cedar-1920x1080.jpg';
-import cedarSquareImage from '../../../dev/static/cedar-1080x1080.jpg';
-import cedarTallImage from '../../../dev/static/cedar-1080x1920.jpg';
 
 defineOptions({ name: 'ObjectOverlay' });
 
@@ -100,7 +98,16 @@ const overlayExamples = [
       </template>
     </CdrLayout>
 
-    <hr />
+  <CdrObjectOverlay :position="{ xs: 'center-center', lg: 'bottom-center', md: 'bottom-left' }" :margin="['zero', 'eighth-x']">
+    <template #container>
+      <img src="https://placehold.co/600x400" width="100%" height="100%" alt="Background image" :style="{ display: 'block' }"/>
+    </template>
+    <template #content>
+      <div class="overlay-content" :style="{ backgroundColor: '#fff', padding: '20px' }">
+        Positioned Content
+      </div>
+    </template>
+  </CdrObjectOverlay>
 
     <h2>Media Object with Multiple Overlays</h2>
     <CdrMediaObject>

src/components/objectOverlay/styles/CdrObjectOverlay.module.scss

@@ -21,10 +21,10 @@ $positions: (
 );
 
 $gradients: (
-  'to-top': linear-gradient(to top, rgba(0, 0, 0, 0.5), transparent),
-  'to-bottom': linear-gradient(to bottom, rgba(0, 0, 0, 0.5), transparent),
-  'to-left': linear-gradient(to left, rgba(0, 0, 0, 0.5), transparent),
-  'to-right': linear-gradient(to right, rgba(0, 0, 0, 0.5), transparent)
+  'to-top': linear-gradient(to top, black 0%, rgba(0, 0, 0, 0.55) 40%, transparent),
+  'to-bottom': linear-gradient(to bottom, black 0%, rgba(0, 0, 0, 0.55) 40%, transparent),
+  'to-left': linear-gradient(to left, black 0%, rgba(0, 0, 0, 0.55) 40%, transparent),
+  'to-right': linear-gradient(to right, black 0%, rgba(0, 0, 0, 0.55) 40%, transparent)
 );
 
 .cdr-object-overlay {

src/types/interfaces.ts

@@ -435,3 +435,16 @@ export type ResponsiveSpace = {
   md?: Spacing;
   lg?: Spacing;
 };
+
+export interface ObjectOverlayProps {
+  /** Gradient to be applied to the container */
+  gradient?: ResponsiveGradient | Gradient;
+  /** Position of the content relative to the container */
+  position?: ResponsivePosition | ObjectPosition;
+  /** Margin space around the positioned content */
+  margin?: ResponsiveSpace | Spacing;
+  /** Padding space around the positioned content */
+  padding?: ResponsiveSpace | Spacing;
+  /** Sets the HTML tag for the container element */
+  tag?: string;
+}