✨ Add DeviceMockup block

Author: Frontendland

README.md

@@ -272,6 +272,8 @@ import { Accordion } from 'webcoreui/react'
 ## Blocks
 
 - [BlogCard](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/BlogCard)
+- [ComponentMap](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/ComponentMap)
+- [DeviceMockup](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/DeviceMockup)
 - [ErrorPage](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/ErrorPage)
 - [FAQ](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/FAQ)
 - [GridWithIcons](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/GridWithIcons)

public/img/placeholder4.png

@@ -0,0 +1,45 @@
+---
+import type { DeviceMockupProps } from './deviceMockup'
+import styles from './device-mockup.module.scss'
+
+interface Props extends DeviceMockupProps {}
+
+const {
+    type,
+    url,
+    showButtons = true,
+    closeButtonColor,
+    maximizeButtonColor,
+    minimizeButtonColor,
+    className
+} = Astro.props
+
+const classes = [
+    styles.mockup,
+    className
+]
+
+const getColor = (color: string | undefined) => color
+    ? `background:${color};`
+    : null
+---
+
+<div class:list={classes}>
+    {(type === 'desktop' && (showButtons || url)) && (
+        <div class={styles.actions}>
+            {showButtons && (
+                <div class={styles.container}>
+                    <span class={styles.button} style={getColor(closeButtonColor)} />
+                    <span class={styles.button} style={getColor(maximizeButtonColor)} />
+                    <span class={styles.button} style={getColor(minimizeButtonColor)} />
+                </div>
+            )}
+            {url && (
+                <div class:list={[styles.url, !showButtons && styles.full]}>
+                    {url}
+                </div>
+            )}
+        </div>
+    )}
+    <slot />
+</div>

public/img/placeholder5.png

@@ -0,0 +1,47 @@
+<script lang="ts">
+    import { classNames } from 'webcoreui'
+
+    import type { DeviceMockupProps } from './deviceMockup'
+    import styles from './device-mockup.module.scss'
+
+    export let type: DeviceMockupProps['type'] = null
+    export let url: DeviceMockupProps['url'] = ''
+    export let showButtons: DeviceMockupProps['showButtons'] = true
+    export let closeButtonColor: DeviceMockupProps['closeButtonColor'] = ''
+    export let maximizeButtonColor: DeviceMockupProps['maximizeButtonColor'] = ''
+    export let minimizeButtonColor: DeviceMockupProps['minimizeButtonColor'] = ''
+    export let className: DeviceMockupProps['className'] = ''
+
+    const classes = classNames([
+        styles.mockup,
+        className
+    ])
+
+    const getColor = (color: string | undefined) => color
+        ? `background:${color};`
+        : null
+</script>
+
+<div class={classes}>
+    {#if type === 'desktop' && (showButtons || url)}
+        <div class={styles.actions}>
+            {#if showButtons}
+                <div class={styles.container}>
+                    <span class={styles.button} style={getColor(closeButtonColor)} />
+                    <span class={styles.button} style={getColor(maximizeButtonColor)} />
+                    <span class={styles.button} style={getColor(minimizeButtonColor)} />
+                </div>
+            {/if}
+            {#if url}
+                <div class={classNames([
+                    styles.url,
+                    !showButtons && styles.full
+                ])}>
+                    {url}
+                </div>
+            {/if}
+        </div>
+    {/if}
+
+    <slot />
+</div>

public/img/placeholder6.png

@@ -0,0 +1,54 @@
+import React from 'react'
+import { classNames } from 'webcoreui'
+
+import type { ReactDeviceMockupProps } from './deviceMockup'
+import styles from './device-mockup.module.scss'
+
+const DeviceMockup = ({
+    type,
+    url,
+    showButtons = true,
+    closeButtonColor,
+    maximizeButtonColor,
+    minimizeButtonColor,
+    className,
+    children
+}: ReactDeviceMockupProps) => {
+    const classes = classNames([
+        styles.mockup,
+        className
+    ])
+
+    const containerClasses = classNames([
+        styles.container,
+        'flex xs items-center'
+    ])
+
+    const getColor = (color: string | undefined) => color
+        ? { background: color }
+        : undefined
+
+    return (
+        <div className={classes}>
+            {(type === 'desktop' && (showButtons || url)) && (
+                <div className={styles.actions}>
+                    {showButtons && (
+                        <div className={containerClasses} style={{ minHeight: 15 }}>
+                            <span className={styles.button} style={getColor(closeButtonColor)} />
+                            <span className={styles.button} style={getColor(maximizeButtonColor)} />
+                            <span className={styles.button} style={getColor(minimizeButtonColor)} />
+                        </div>
+                    )}
+                    {url && (
+                        <div className={classNames([styles.url, !showButtons && styles.full])}>
+                            {url}
+                        </div>
+                    )}
+                </div>
+            )}
+            {children}
+        </div>
+    )
+}
+
+export default DeviceMockup

public/img/placeholder7.png

@@ -0,0 +1,36 @@
+@use 'webcoreui/config' as *;
+
+.mockup {
+    @include background(primary-70);
+    @include border(6px, primary-50);
+    @include border-radius(xl);
+    @include visibility(hidden);
+}
+
+.actions {
+    @include background(primary-50);
+    @include spacing(pl-sm, pr-sm, pb-xs);
+    @include layout(flex, xl);
+
+    .container {
+        min-width: fit-content
+    }
+
+    .button {
+        @include background(primary-20);
+        @include size(10px);
+        @include visibility(inline-block);
+        @include border-radius(maxs);
+    }
+
+    .url {
+        @include background(primary-40);
+        @include typography(md, primary-20, center);
+        @include border-radius();
+        @include size('w90%');
+
+        &.full {
+            @include size('w100%');
+        }
+    }
+}