[PreviewCard] Create new component (#469)

mui · Jul 23, 2024 · 00aebe3 · 00aebe3
1 parent 3969542
commit 00aebe3
Show file tree

Hide file tree

Showing 75 changed files with 3,287 additions and 22 deletions.
diff --git a/docs/data/base/components/preview-card/UnstyledPreviewCardIntroduction/system/index.js b/docs/data/base/components/preview-card/UnstyledPreviewCardIntroduction/system/index.js
@@ -0,0 +1,90 @@
+import * as React from 'react';
+import * as PreviewCard from '@base_ui/react/PreviewCard';
+import { styled } from '@mui/system';
+
+export default function UnstyledPreviewCardIntroduction() {
+  return (
+    <PreviewCard.Root>
+      <TriggerLink href="#">@Base_UI</TriggerLink>
+      <PreviewCard.Positioner sideOffset={8}>
+        <PreviewCardPopup>
+          <img
+            src="https://pbs.twimg.com/profile_images/1798056009291997184/B-prVmUP_400x400.jpg"
+            alt="Base UI Logo"
+            width={80}
+            height={80}
+            style={{ borderRadius: '50%' }}
+          />
+          <h2 style={{ fontSize: 20, margin: 0 }}>Base UI</h2>
+          <p>Unstyled React components and hooks (@base_ui/react), by @MUI_hq.</p>
+          <div style={{ display: 'flex', gap: 10 }}>
+            <span>
+              <strong>1</strong> Following
+            </span>
+            <span>
+              <strong>1,000</strong> Followers
+            </span>
+          </div>
+          <PreviewCardArrow />
+        </PreviewCardPopup>
+      </PreviewCard.Positioner>
+    </PreviewCard.Root>
+  );
+}
+
+const blue = {
+  400: '#3399FF',
+  600: '#0072E6',
+  800: '#004C99',
+};
+
+export const PreviewCardPopup = styled(PreviewCard.Popup)`
+  position: relative;
+  background: white;
+  color: black;
+  border-radius: 10px;
+  filter: drop-shadow(0 2px 4px rgb(0 10 20 / 0.25));
+  outline: 0;
+  padding: 12px 16px;
+  max-width: min(300px, var(--available-width));
+`;
+
+export const TriggerLink = styled(PreviewCard.Trigger)`
+  border: none;
+  color: ${blue[600]};
+  font-size: 18px;
+  text-decoration: none;
+
+  &:hover {
+    color: ${blue[800]};
+  }
+
+  &:focus-visible {
+    outline: 2px solid ${blue[400]};
+    outline-offset: 2px;
+  }
+`;
+
+export const PreviewCardArrow = styled(PreviewCard.Arrow)`
+  width: 10px;
+  height: 10px;
+  transform: rotate(45deg);
+  background: white;
+  z-index: -1;
+
+  &[data-side='top'] {
+    bottom: -5px;
+  }
+
+  &[data-side='right'] {
+    left: -5px;
+  }
+
+  &[data-side='bottom'] {
+    top: -5px;
+  }
+
+  &[data-side='left'] {
+    right: -5px;
+  }
+`;
diff --git a/docs/data/base/components/preview-card/UnstyledPreviewCardIntroduction/system/index.tsx b/docs/data/base/components/preview-card/UnstyledPreviewCardIntroduction/system/index.tsx
@@ -0,0 +1,90 @@
+import * as React from 'react';
+import * as PreviewCard from '@base_ui/react/PreviewCard';
+import { styled } from '@mui/system';
+
+export default function UnstyledPreviewCardIntroduction() {
+  return (
+    <PreviewCard.Root>
+      <TriggerLink href="#">@Base_UI</TriggerLink>
+      <PreviewCard.Positioner sideOffset={8}>
+        <PreviewCardPopup>
+          <img
+            src="https://pbs.twimg.com/profile_images/1798056009291997184/B-prVmUP_400x400.jpg"
+            alt="Base UI Logo"
+            width={80}
+            height={80}
+            style={{ borderRadius: '50%' }}
+          />
+          <h2 style={{ fontSize: 20, margin: 0 }}>Base UI</h2>
+          <p>Unstyled React components and hooks (@base_ui/react), by @MUI_hq.</p>
+          <div style={{ display: 'flex', gap: 10 }}>
+            <span>
+              <strong>1</strong> Following
+            </span>
+            <span>
+              <strong>1,000</strong> Followers
+            </span>
+          </div>
+          <PreviewCardArrow />
+        </PreviewCardPopup>
+      </PreviewCard.Positioner>
+    </PreviewCard.Root>
+  );
+}
+
+const blue = {
+  400: '#3399FF',
+  600: '#0072E6',
+  800: '#004C99',
+};
+
+export const PreviewCardPopup = styled(PreviewCard.Popup)`
+  position: relative;
+  background: white;
+  color: black;
+  border-radius: 10px;
+  filter: drop-shadow(0 2px 4px rgb(0 10 20 / 0.25));
+  outline: 0;
+  padding: 12px 16px;
+  max-width: min(300px, var(--available-width));
+`;
+
+export const TriggerLink = styled(PreviewCard.Trigger)`
+  border: none;
+  color: ${blue[600]};
+  font-size: 18px;
+  text-decoration: none;
+
+  &:hover {
+    color: ${blue[800]};
+  }
+
+  &:focus-visible {
+    outline: 2px solid ${blue[400]};
+    outline-offset: 2px;
+  }
+`;
+
+export const PreviewCardArrow = styled(PreviewCard.Arrow)`
+  width: 10px;
+  height: 10px;
+  transform: rotate(45deg);
+  background: white;
+  z-index: -1;
+
+  &[data-side='top'] {
+    bottom: -5px;
+  }
+
+  &[data-side='right'] {
+    left: -5px;
+  }
+
+  &[data-side='bottom'] {
+    top: -5px;
+  }
+
+  &[data-side='left'] {
+    right: -5px;
+  }
+`;
diff --git a/docs/data/base/components/preview-card/UnstyledPreviewCardTransition.js b/docs/data/base/components/preview-card/UnstyledPreviewCardTransition.js
@@ -0,0 +1,81 @@
+import * as React from 'react';
+import * as PreviewCard from '@base_ui/react/PreviewCard';
+import { styled } from '@mui/system';
+
+export default function UnstyledPreviewCardTransition() {
+  return (
+    <div style={{ display: 'flex', gap: 12 }}>
+      <PreviewCard.Root>
+        <TriggerLink href="#">Trigger</TriggerLink>
+        <PreviewCard.Positioner sideOffset={5}>
+          <PreviewCardPopup>
+            <img
+              src="https://pbs.twimg.com/profile_images/1798056009291997184/B-prVmUP_400x400.jpg"
+              alt="Base UI Logo"
+              width={80}
+              height={80}
+              style={{ borderRadius: '50%' }}
+            />
+            <h2 style={{ fontSize: 20, margin: 0 }}>Base UI</h2>
+            <p>Unstyled React components and hooks (@base_ui/react), by @MUI_hq.</p>
+            <div style={{ display: 'flex', gap: 10 }}>
+              <span>
+                <strong>1</strong> Following
+              </span>
+              <span>
+                <strong>1,000</strong> Followers
+              </span>
+            </div>
+          </PreviewCardPopup>
+        </PreviewCard.Positioner>
+      </PreviewCard.Root>
+    </div>
+  );
+}
+
+const blue = {
+  400: '#3399FF',
+  600: '#0072E6',
+  800: '#004C99',
+};
+
+export const PreviewCardPopup = styled(PreviewCard.Popup)`
+  position: relative;
+  background: white;
+  color: black;
+  border-radius: 5px;
+  filter: drop-shadow(0 0.1rem 0.25rem rgb(0 10 20 / 0.25));
+  outline: 0;
+  padding: 12px 16px;
+  max-width: min(300px, var(--available-width));
+  transition-property: opacity, transform;
+  transition-duration: 0.2s;
+  opacity: 0;
+  transform-origin: var(--transform-origin);
+
+  &[data-state='open'] {
+    opacity: 1;
+    transform: scale(1);
+  }
+
+  &[data-entering] {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+`;
+
+export const TriggerLink = styled(PreviewCard.Trigger)`
+  border: none;
+  color: ${blue[600]};
+  font-size: 18px;
+  text-decoration: none;
+
+  &:hover {
+    color: ${blue[800]};
+  }
+
+  &:focus-visible {
+    outline: 2px solid ${blue[400]};
+    outline-offset: 2px;
+  }
+`;
diff --git a/docs/data/base/components/preview-card/UnstyledPreviewCardTransition.tsx b/docs/data/base/components/preview-card/UnstyledPreviewCardTransition.tsx
@@ -0,0 +1,81 @@
+import * as React from 'react';
+import * as PreviewCard from '@base_ui/react/PreviewCard';
+import { styled } from '@mui/system';
+
+export default function UnstyledPreviewCardTransition() {
+  return (
+    <div style={{ display: 'flex', gap: 12 }}>
+      <PreviewCard.Root>
+        <TriggerLink href="#">Trigger</TriggerLink>
+        <PreviewCard.Positioner sideOffset={5}>
+          <PreviewCardPopup>
+            <img
+              src="https://pbs.twimg.com/profile_images/1798056009291997184/B-prVmUP_400x400.jpg"
+              alt="Base UI Logo"
+              width={80}
+              height={80}
+              style={{ borderRadius: '50%' }}
+            />
+            <h2 style={{ fontSize: 20, margin: 0 }}>Base UI</h2>
+            <p>Unstyled React components and hooks (@base_ui/react), by @MUI_hq.</p>
+            <div style={{ display: 'flex', gap: 10 }}>
+              <span>
+                <strong>1</strong> Following
+              </span>
+              <span>
+                <strong>1,000</strong> Followers
+              </span>
+            </div>
+          </PreviewCardPopup>
+        </PreviewCard.Positioner>
+      </PreviewCard.Root>
+    </div>
+  );
+}
+
+const blue = {
+  400: '#3399FF',
+  600: '#0072E6',
+  800: '#004C99',
+};
+
+export const PreviewCardPopup = styled(PreviewCard.Popup)`
+  position: relative;
+  background: white;
+  color: black;
+  border-radius: 5px;
+  filter: drop-shadow(0 0.1rem 0.25rem rgb(0 10 20 / 0.25));
+  outline: 0;
+  padding: 12px 16px;
+  max-width: min(300px, var(--available-width));
+  transition-property: opacity, transform;
+  transition-duration: 0.2s;
+  opacity: 0;
+  transform-origin: var(--transform-origin);
+
+  &[data-state='open'] {
+    opacity: 1;
+    transform: scale(1);
+  }
+
+  &[data-entering] {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+`;
+
+export const TriggerLink = styled(PreviewCard.Trigger)`
+  border: none;
+  color: ${blue[600]};
+  font-size: 18px;
+  text-decoration: none;
+
+  &:hover {
+    color: ${blue[800]};
+  }
+
+  &:focus-visible {
+    outline: 2px solid ${blue[400]};
+    outline-offset: 2px;
+  }
+`;