fixes and add docs

evidence-dev · Dec 31, 2024 · 718214d · 718214d
1 parent 7019e51
commit 718214d
Show file tree

Hide file tree

Showing 8 changed files with 381 additions and 8 deletions.
diff --git a/packages/ui/core-components/src/lib/unsorted/ui/Embed.svelte b/packages/ui/core-components/src/lib/unsorted/ui/Embed.svelte
@@ -4,6 +4,7 @@
 
 <script>
 	import { cn } from '$lib/utils.js';
+	import { toBoolean } from '../../utils.js';
 
 	let className = undefined;
 	export { className as class };
@@ -12,7 +13,9 @@
 	export let title = ''; // A description or title for the embed
 	export let width = '100%'; // Width of the embed, defaults to full width
 	export let height = '400'; // Height of the embed, defaults to 400px
+	export let align = 'left'; // center, left, right
 	export let border = true; // Toggle border visibility
+	border = toBoolean(border);
 
 	// Process dimensions: Add `px` if a number, pass through if a valid unit
 	function processDimension(dimension) {
@@ -25,9 +28,9 @@
 
 <div
 	class={cn(
-		`embed-wrapper relative overflow-hidden ${
-			border ? 'border border-gray-300 rounded-md shadow-sm' : ''
-		}`,
+		`embed-wrapper relative overflow-hidden rounded-md ${
+			border ? 'border border-gray-300 shadow-sm' : ''
+		} ${align === 'center' ? 'mx-auto' : align === 'left' ? 'ml-0' : 'mr-0 ml-auto'}`,
 		className
 	)}
 	style={`width: ${tailwindWidth}; height: ${tailwindHeight};`}

diff --git a/packages/ui/core-components/src/lib/unsorted/ui/Image.svelte b/packages/ui/core-components/src/lib/unsorted/ui/Image.svelte
@@ -3,7 +3,7 @@
 </script>
 
 <script>
-	import { processDimension } from '../../utils.js';
+	import { processDimension, toBoolean } from '../../utils.js';
 	import { cn } from '$lib/utils.js';
 
 	let className = undefined;
@@ -14,6 +14,9 @@
 	export let width = ''; // Width of the image
 	export let height = ''; // Height of the image
 	export let align = 'center'; // center, left, right
+	export let border = false;
+	border = toBoolean(border);
+
 	const alignMap = {
 		center: 'center',
 		left: 'start',
@@ -31,7 +34,10 @@
 		src={url}
 		alt={description}
 		style={`width: ${processedWidth}; height: ${processedHeight};`}
-		class={cn('max-w-full h-auto rounded', className)}
+		class={cn(
+			`max-w-full h-auto rounded ${border ? 'border border-gray-300 rounded-md shadow-sm' : ''}`,
+			className
+		)}
 		loading="lazy"
 	/>
 </div>
diff --git a/packages/ui/core-components/src/lib/unsorted/ui/Link.svelte b/packages/ui/core-components/src/lib/unsorted/ui/Link.svelte
@@ -3,6 +3,7 @@
 </script>
 
 <script>
+	import { cn } from '$lib/utils.js';
 	import { toBoolean } from '../../utils.js';
 
 	let className = undefined;
@@ -18,7 +19,7 @@
 	href={url}
 	target={newTab ? '_blank' : '_self'}
 	rel={newTab ? 'noopener noreferrer' : undefined}
-	class={className}
+	class={cn('markdown', className)}
 >
 	{label}
 </a>
diff --git a/packages/ui/core-components/src/lib/unsorted/ui/Note.svelte b/packages/ui/core-components/src/lib/unsorted/ui/Note.svelte
@@ -9,6 +9,8 @@
 	export { className as class };
 </script>
 
-<div class={cn('block text-xs text-gray-500 leading-none mt-0 pb-3', className)}>
-	<slot />
+<div class={cn('block text-xs text-gray-500 leading-none mt-0 pb-3 not-prose', className)}>
+	<span>
+		<slot />
+	</span>
 </div>
diff --git a/sites/docs/pages/components/ui/embed/index.md b/sites/docs/pages/components/ui/embed/index.md
@@ -0,0 +1,114 @@
+---
+title: Embed
+sidebar_position: 1
+---
+
+Use the `Embed` component to display external content, such as videos, maps, or other embeddable media, within your markdown pages. This component allows you to customize dimensions, add borders, and ensure responsive styling. 
+
+## Default usage
+
+<DocTab>
+<div slot='preview'>
+    <Embed 
+        url="https://www.youtube.com/embed/UiCioBZ5IDU?si=dychrQurRTlhz9DN"
+        title="Sample Video"
+    />
+</div>
+
+```markdown
+<Embed 
+    url="https://www.youtube.com/embed/UiCioBZ5IDU?si=dychrQurRTlhz9DN"
+    title="Sample Video"
+/>
+```
+</DocTab>
+
+### Custom size
+
+<DocTab>
+<div slot='preview'>
+    <Embed 
+        url="https://www.youtube.com/embed/UiCioBZ5IDU?si=dychrQurRTlhz9DN"
+        title="Sample Video"
+        height="200"
+        width=400
+        align=center
+    />
+</div>
+
+```markdown
+<Embed 
+    url="https://www.youtube.com/embed/UiCioBZ5IDU?si=dychrQurRTlhz9DN"
+    title="Sample Video"
+    width=800
+    height=450
+/>
+```
+</DocTab>
+
+### No border
+
+<DocTab>
+<div slot='preview'>
+    <Embed 
+        url="https://www.youtube.com/embed/UiCioBZ5IDU?si=dychrQurRTlhz9DN"
+        title="Sample Video"
+        border=false
+    />
+</div>
+
+```markdown
+<Embed 
+    url="https://www.youtube.com/embed/UiCioBZ5IDU?si=dychrQurRTlhz9DN"
+    title="Sample Video"
+    border=false
+/>
+```
+</DocTab>
+
+## Options
+
+<PropListing 
+    name="url"
+    required={true}
+>
+The URL of the embeddable content.
+</PropListing>
+
+<PropListing 
+    name="title"
+    defaultValue=""
+>
+A description or title for the embed, useful for accessibility purposes.
+</PropListing>
+
+<PropListing 
+    name="width"
+    defaultValue="100%"
+    options="number"
+>
+The width of the embed (in pixels).
+</PropListing>
+
+<PropListing 
+    name="height"
+    defaultValue="400"
+    options="number"
+>
+The height of the embed (in pixels).
+</PropListing>
+
+<PropListing 
+    name="border"
+    defaultValue="true"
+    options={['true', 'false']}
+>
+Whether to display a border around the embed
+</PropListing>
+
+<PropListing 
+    name="class"
+>
+
+Pass custom classes to control the styling of the embed wrapper. Supports [Tailwind classes](https://tailwindcss.com).
+</PropListing>
diff --git a/sites/docs/pages/components/ui/image/index.md b/sites/docs/pages/components/ui/image/index.md
@@ -0,0 +1,118 @@
+---
+title: Image
+sidebar_position: 1
+---
+
+<Alert status=info>
+
+    Note that you can also use [markdown syntax for images](/reference/markdown/#images). This component is useful when you need to customize the dimensions or styling of the image.
+</Alert>
+
+
+The `Image` component allows you to add responsive and styled images to your markdown pages. This component is useful for embedding images with optional alignment, width, and height settings, and includes accessibility features through the description attribute.
+
+## Examples
+
+### Custom size
+<DocTab> 
+    <div slot='preview'> 
+    <Image url="https://raw.githubusercontent.com/evidence-dev/media-kit/refs/heads/main/png/wordmark-gray-800.png" description="Sample placeholder image"height="80" /> 
+    </div>
+
+```markdown
+<Image 
+    url="https://raw.githubusercontent.com/evidence-dev/media-kit/refs/heads/main/png/wordmark-gray-800.png"
+    description="Sample placeholder image"
+    height=80
+/>
+```
+</DocTab>
+
+### Aligned Left
+<DocTab> 
+    <div slot='preview'> 
+    <Image url="https://raw.githubusercontent.com/evidence-dev/media-kit/refs/heads/main/png/wordmark-gray-800.png" description="Sample placeholder image"height="80" align=left/> 
+    </div>
+
+```markdown
+<Image 
+    url="https://raw.githubusercontent.com/evidence-dev/media-kit/refs/heads/main/png/wordmark-gray-800.png"
+    description="Sample placeholder image"
+    height=80
+    align="left"
+/>
+```
+</DocTab>
+
+### With Border & Custom Padding
+<DocTab> 
+    <div slot='preview'> 
+    <Image url="https://raw.githubusercontent.com/evidence-dev/media-kit/refs/heads/main/png/wordmark-gray-800.png" description="Sample placeholder image"height="80" border=true class="p-4"/> 
+    </div>
+
+```markdown
+<Image 
+    url="https://raw.githubusercontent.com/evidence-dev/media-kit/refs/heads/main/png/wordmark-gray-800.png" 
+    description="Sample placeholder image"
+    height=80
+    border=true 
+    class="p-4"
+/> 
+```
+</DocTab>
+
+## Options
+
+<PropListing 
+    name="url"
+    required={true}
+>
+The URL of the image.
+</PropListing>
+
+<PropListing 
+    name="description"
+    defaultValue=""
+>
+The description of the image for accessibility purposes.
+</PropListing>
+
+<PropListing 
+    name="width"
+    defaultValue=""
+    options="number"
+>
+The width of the image (in pixels)
+</PropListing>
+
+<PropListing 
+    name="height"
+    defaultValue=""
+    options="number"
+>
+The height of the image (in pixels)
+</PropListing>
+
+<PropListing 
+    name="border"
+    defaultValue="false"
+    options={['true', 'false']}
+>
+Whether to display a border around the image
+</PropListing>
+
+<PropListing 
+    name="align"
+    options={['center', 'left', 'right']}
+    defaultValue="center"
+>
+The alignment of the image
+</PropListing>
+
+<PropListing
+    name="class"
+>
+
+Pass custom classes to control the styling of an accordion item. Supports [tailwind classes](https://tailwindcss.com). 
+
+</PropListing>