diff --git a/.changeset/itchy-donkeys-fail.md b/.changeset/itchy-donkeys-fail.md new file mode 100644 index 0000000000..f3c6895bb7 --- /dev/null +++ b/.changeset/itchy-donkeys-fail.md @@ -0,0 +1,5 @@ +--- +'@evidence-dev/core-components': patch +--- + +Add simple wrapper components for common HTML usgae diff --git a/packages/extension/snippets/emd.code-snippets b/packages/extension/snippets/emd.code-snippets index 096acb7793..fcac2e571b 100644 --- a/packages/extension/snippets/emd.code-snippets +++ b/packages/extension/snippets/emd.code-snippets @@ -421,5 +421,15 @@ "\n\t\n\t\n" ], "description": "Insert Map" + }, + "Note": { + "prefix": "/Note", + "body": ["\n\t${1:Note Content}\n\n\n"], + "description": "Insert Note" + }, + "Embed": { + "prefix": "/Embed", + "body": ["\n\n"], + "description": "Insert Embed" } } diff --git a/packages/ui/core-components/src/lib/unsorted/ui/Embed.stories.svelte b/packages/ui/core-components/src/lib/unsorted/ui/Embed.stories.svelte new file mode 100644 index 0000000000..65feb8e84f --- /dev/null +++ b/packages/ui/core-components/src/lib/unsorted/ui/Embed.stories.svelte @@ -0,0 +1,17 @@ + + + + + + + diff --git a/packages/ui/core-components/src/lib/unsorted/ui/Embed.svelte b/packages/ui/core-components/src/lib/unsorted/ui/Embed.svelte new file mode 100644 index 0000000000..b05d0f84e2 --- /dev/null +++ b/packages/ui/core-components/src/lib/unsorted/ui/Embed.svelte @@ -0,0 +1,46 @@ + + + + +
+ +
diff --git a/packages/ui/core-components/src/lib/unsorted/ui/Image.stories.svelte b/packages/ui/core-components/src/lib/unsorted/ui/Image.stories.svelte new file mode 100644 index 0000000000..36465aef92 --- /dev/null +++ b/packages/ui/core-components/src/lib/unsorted/ui/Image.stories.svelte @@ -0,0 +1,20 @@ + + + + + + + diff --git a/packages/ui/core-components/src/lib/unsorted/ui/Image.svelte b/packages/ui/core-components/src/lib/unsorted/ui/Image.svelte new file mode 100644 index 0000000000..035b24f89f --- /dev/null +++ b/packages/ui/core-components/src/lib/unsorted/ui/Image.svelte @@ -0,0 +1,43 @@ + + + + +
+ {description} +
diff --git a/packages/ui/core-components/src/lib/unsorted/ui/Link.stories.svelte b/packages/ui/core-components/src/lib/unsorted/ui/Link.stories.svelte new file mode 100644 index 0000000000..8e5814606c --- /dev/null +++ b/packages/ui/core-components/src/lib/unsorted/ui/Link.stories.svelte @@ -0,0 +1,17 @@ + + + + + + + diff --git a/packages/ui/core-components/src/lib/unsorted/ui/Link.svelte b/packages/ui/core-components/src/lib/unsorted/ui/Link.svelte new file mode 100644 index 0000000000..1b61acd9bd --- /dev/null +++ b/packages/ui/core-components/src/lib/unsorted/ui/Link.svelte @@ -0,0 +1,25 @@ + + + + + + {label} + diff --git a/packages/ui/core-components/src/lib/unsorted/ui/Note.stories.svelte b/packages/ui/core-components/src/lib/unsorted/ui/Note.stories.svelte new file mode 100644 index 0000000000..48512d1f61 --- /dev/null +++ b/packages/ui/core-components/src/lib/unsorted/ui/Note.stories.svelte @@ -0,0 +1,35 @@ + + + + + + {@const data = Query.create(`select * from numeric_series`, query)} + + The data for this report was sourced from the World Bank World Development Indicators dataset. + + + The data for this report was sourced from the World Bank World Development Indicators dataset. + + + The data for this report was sourced from the World Bank World Development Indicators dataset. + + + + The data for this report was sourced from the World Bank World Development Indicators dataset. + + + diff --git a/packages/ui/core-components/src/lib/unsorted/ui/Note.svelte b/packages/ui/core-components/src/lib/unsorted/ui/Note.svelte new file mode 100644 index 0000000000..bcccbad239 --- /dev/null +++ b/packages/ui/core-components/src/lib/unsorted/ui/Note.svelte @@ -0,0 +1,16 @@ + + + + +
+ + + +
diff --git a/packages/ui/core-components/src/lib/unsorted/ui/index.js b/packages/ui/core-components/src/lib/unsorted/ui/index.js index a7aa723ea0..046da0db81 100644 --- a/packages/ui/core-components/src/lib/unsorted/ui/index.js +++ b/packages/ui/core-components/src/lib/unsorted/ui/index.js @@ -5,9 +5,13 @@ export { default as CodeBlock } from './CodeBlock.svelte'; export { default as Details } from './Details.svelte'; export { default as DownloadData } from './DownloadData.svelte'; export { default as EmailSignup } from './EmailSignup.svelte'; +export { default as Embed } from './Embed.svelte'; +export { default as Note } from './Note.svelte'; export { default as Group } from './Group.svelte'; +export { default as Image } from './Image.svelte'; export { default as LastRefreshed } from './LastRefreshed.svelte'; export { default as LineBreak } from './LineBreak.svelte'; +export { default as Link } from './Link.svelte'; export { default as LoadingIndicator } from './LoadingIndicator.svelte'; export { default as Modal } from './Modal.svelte'; export { default as PageBreak } from './PageBreak.svelte'; diff --git a/packages/ui/core-components/src/lib/utils.js b/packages/ui/core-components/src/lib/utils.js index ee7c7a6f4c..9b99ffc270 100644 --- a/packages/ui/core-components/src/lib/utils.js +++ b/packages/ui/core-components/src/lib/utils.js @@ -81,3 +81,18 @@ export const toBoolean = (value) => { } return Boolean(value); }; + +/** + * Processes a dimension value to ensure it is in a valid CSS format. + * + * If the input is a plain number (e.g., "10"), "px" is appended to it. + * If the input is already in a valid format (e.g., "10px", "5em", "auto"), it is returned as-is. + * If the input is falsy, an empty string is returned. + * + * @param {string | number | undefined} dimension - The dimension value to process. + * @returns {string} The processed dimension with "px" appended if it's a number, or the original value. + */ +export const processDimension = (dimension) => { + if (!dimension) return ''; // No dimension provided + return /^\d+$/.test(dimension) ? `${dimension}px` : dimension; // Add 'px' if it's a number +}; diff --git a/sites/docs/pages/components/ui/embed/index.md b/sites/docs/pages/components/ui/embed/index.md new file mode 100644 index 0000000000..93efc07b3f --- /dev/null +++ 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 + + +
+ +
+ +```markdown + +``` + + +### Custom size + + +
+ +
+ +```markdown + +``` + + +### No border + + +
+ +
+ +```markdown + +``` + + +## Options + + +The URL of the embeddable content. + + + +A description or title for the embed, useful for accessibility purposes. + + + +The width of the embed (in pixels). + + + +The height of the embed (in pixels). + + + +Whether to display a border around the embed + + + + +Pass custom classes to control the styling of the embed wrapper. Supports [Tailwind classes](https://tailwindcss.com). + diff --git a/sites/docs/pages/components/ui/image/index.md b/sites/docs/pages/components/ui/image/index.md new file mode 100644 index 0000000000..9d0732c905 --- /dev/null +++ b/sites/docs/pages/components/ui/image/index.md @@ -0,0 +1,118 @@ +--- +title: Image +sidebar_position: 1 +--- + + + + 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. + + + +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 + +
+ +
+ +```markdown + +``` + + +### Aligned Left + +
+ +
+ +```markdown + +``` + + +### With Border & Custom Padding + +
+ +
+ +```markdown + +``` + + +## Options + + +The URL of the image. + + + +The description of the image for accessibility purposes. + + + +The width of the image (in pixels) + + + +The height of the image (in pixels) + + + +Whether to display a border around the image + + + +The alignment of the image + + + + +Pass custom classes to control the styling of an accordion item. Supports [tailwind classes](https://tailwindcss.com). + + diff --git a/sites/docs/pages/components/ui/link/index.md b/sites/docs/pages/components/ui/link/index.md new file mode 100644 index 0000000000..bb8b899aaf --- /dev/null +++ b/sites/docs/pages/components/ui/link/index.md @@ -0,0 +1,82 @@ +--- +title: Link +sidebar_position: 1 +--- + + + + Note that you can also use [markdown syntax for links](/reference/markdown/#links). This component is useful when you need to customize the behavior or styling of the link (e.g., opening in new tab vs. current tab) + + +Use the `Link` component to add styled and accessible links to your markdown pages. This component allows you to control the destination URL, link text, and whether it opens in a new tab. + +## Default usage + + +
+ +
+ +```markdown + +``` + + +### Open in a new tab + + +
+ +
+ +```markdown + +``` + + +## Options + + + +The destination URL of the link. It can accept either a full external link (e.g. `https://google.com`) or link to another page within your evidence app (e.g. `/sales/performance`). + + + +The text displayed for the link. + + + +Whether the link should open in a new tab + + + + +Pass custom classes to style the link. Supports [Tailwind classes](https://tailwindcss.com). + diff --git a/sites/docs/pages/components/ui/note/index.md b/sites/docs/pages/components/ui/note/index.md new file mode 100644 index 0000000000..1359cea76e --- /dev/null +++ b/sites/docs/pages/components/ui/note/index.md @@ -0,0 +1,47 @@ +--- +title: Note +sidebar_position: 1 +--- + +Use the `Note` component to display small, styled text for additional context or information + +## Default usage + + +
+ + This is a note for additional context. + +
+ +```markdown + + This is a note for additional context. + +``` + + +### Custom styling + + +
+ + This is a custom-styled note. + +
+ +```markdown + + This is a custom-styled note. + +``` + + +## Options + + + +Pass custom classes to style the note. Supports [Tailwind classes](https://tailwindcss.com). +