Docs/corner ornament

cypress/integration/sitemap-vrt/constants.ts

@@ -64,6 +64,9 @@ export const SITEMAP = [
   "/components/checkbox/",
   "/components/checkbox/api",
   "/components/checkbox/changelog",
+  "/components/corner-ornament",
+  "/components/corner-ornament/api",
+  "/components/corner-ornament/changelog",
   "/components/data-grid/",
   "/components/data-grid/api",
   "/components/data-grid/changelog",

packages/paste-website/package.json

@@ -57,6 +57,7 @@
     "@twilio-paste/color-contrast-utils": "^5.0.0",
     "@twilio-paste/combobox": "^16.2.1",
     "@twilio-paste/combobox-primitive": "^2.1.1",
+    "@twilio-paste/corner-ornament": "^0.0.0",
     "@twilio-paste/customization": "^8.2.0",
     "@twilio-paste/data-grid": "^8.3.0",
     "@twilio-paste/data-visualization-library": "^5.0.0",

packages/paste-website/src/component-examples/CornerOrnamentExamples.ts

@@ -0,0 +1,283 @@
+export const featuredExample = `
+const FeaturedExample = () => {
+  return (
+    <Stack orientation="horizontal" spacing="space70">
+        <CornerOrnamentContainer cornerOrnamentType="badge" size="sizeIcon80" position="top_end">
+            <CornerOrnamentBase>
+                <CartIcon color="colorTextIcon" size="sizeIcon80" decorative={false} title="shopping cart" />
+            </CornerOrnamentBase>
+            <CornerOrnament>
+                <ScreenReaderOnly>notification value is</ScreenReaderOnly>
+                <Badge as="span" variant="notification_counter" size="small">
+                    100
+                </Badge>
+            </CornerOrnament>
+        </CornerOrnamentContainer>
+        <CornerOrnamentContainer cornerOrnamentType="icon" size="sizeIcon80" position="top_end">
+            <CornerOrnamentBase>
+                <NotificationIcon color="colorTextIcon" size="sizeIcon80" decorative={false} title="Notifications" />
+            </CornerOrnamentBase>
+            <CornerOrnament>
+                <ScreenReaderOnly>You have a notification</ScreenReaderOnly>
+                <NotificationOrnamentIcon color="colorTextIconNotification" decorative size="sizeIcon40" />
+            </CornerOrnament>
+        </CornerOrnamentContainer>
+        <CornerOrnamentContainer cornerOrnamentType="icon" size="sizeIcon80">
+            <CornerOrnamentBase>
+                <Avatar
+                    size="sizeIcon80"
+                    name="Tri O'Hara"
+                    src="/images/avatars/avatar4.png"
+                />
+            </CornerOrnamentBase>
+            <CornerOrnament>
+                <ScreenReaderOnly>incoming call</ScreenReaderOnly>
+                <CallIncomingIcon color="colorTextIcon" decorative size="sizeIcon40" />
+            </CornerOrnament>
+        </CornerOrnamentContainer>
+        <CornerOrnamentContainer cornerOrnamentType="avatar" size="sizeIcon80">
+            <CornerOrnamentBase>
+                <DataTableIcon color="colorTextIcon" size="sizeIcon80" decorative={false} title="data table" />
+            </CornerOrnamentBase>
+            <CornerOrnament>
+                <Avatar
+                    size="sizeIcon30"
+                    name="Tri O'Hara"
+                    src="/images/avatars/avatar4.png"
+                />           
+            </CornerOrnament>
+        </CornerOrnamentContainer>
+    </Stack>
+  );
+};
+
+render(
+  <FeaturedExample />
+)`.trim();
+
+export const badgeCornerOrnamentExample = `
+const BadgeCornerOrnamentExample = () => {
+  return (
+    <Stack orientation="horizontal" spacing="space70">
+        <CornerOrnamentContainer cornerOrnamentType="badge" size="sizeIcon80">
+            <CornerOrnamentBase>
+                <CartIcon color="colorTextIcon" size="sizeIcon80" decorative={false} title="shopping cart" />
+            </CornerOrnamentBase>
+            <CornerOrnament>
+                <ScreenReaderOnly>notification value is</ScreenReaderOnly>
+                <Badge as="span" variant="notification_counter" size="small">
+                    100
+                </Badge>
+            </CornerOrnament>
+        </CornerOrnamentContainer>
+        <CornerOrnamentContainer cornerOrnamentType="badge" size="sizeIcon80">
+            <CornerOrnamentBase>
+                <Avatar
+                    size="sizeIcon80"
+                    name="Tri O'Hara"
+                    src="/images/avatars/avatar4.png"
+                />
+            </CornerOrnamentBase>
+            <CornerOrnament>
+                <ScreenReaderOnly>notification value is</ScreenReaderOnly>
+                <Badge as="span" variant="notification_counter" size="small">
+                    100
+                </Badge>
+            </CornerOrnament>
+        </CornerOrnamentContainer>
+        <CornerOrnamentContainer cornerOrnamentType="badge" size="sizeIcon80" position="top_end">
+            <CornerOrnamentBase>
+                <CartIcon color="colorTextIcon" size="sizeIcon80" decorative={false} title="shopping cart" />
+            </CornerOrnamentBase>
+            <CornerOrnament>
+                <ScreenReaderOnly>notification value is</ScreenReaderOnly>
+                <Badge as="span" variant="notification_counter" size="small">
+                    100
+                </Badge>
+            </CornerOrnament>
+        </CornerOrnamentContainer>
+        <CornerOrnamentContainer cornerOrnamentType="badge" size="sizeIcon80" position="top_end">
+            <CornerOrnamentBase>
+                <Avatar
+                    size="sizeIcon80"
+                    name="Tri O'Hara"
+                    src="/images/avatars/avatar4.png"
+                />
+            </CornerOrnamentBase>
+            <CornerOrnament>
+                <ScreenReaderOnly>notification value is</ScreenReaderOnly>
+                <Badge as="span" variant="notification_counter" size="small">
+                    100
+                </Badge>
+            </CornerOrnament>
+        </CornerOrnamentContainer>
+    </Stack>
+  );
+};
+
+render(
+  <BadgeCornerOrnamentExample />
+)`.trim();
+
+export const badgeOverflowCornerOrnamentExample = `
+const BadgeOverflowCornerOrnamentExample = () => {
+  return (
+    <Stack orientation="horizontal" spacing="space70">
+        <CornerOrnamentContainer cornerOrnamentType="badge" size="sizeIcon80" position="top_end">
+            <CornerOrnamentBase>
+                <CartIcon color="colorTextIcon" size="sizeIcon80" decorative={false} title="shopping cart"/>
+            </CornerOrnamentBase>
+            <CornerOrnament>
+                <ScreenReaderOnly>notification value is</ScreenReaderOnly>
+                <Badge as="span" variant="notification_counter" size="small">
+                    9+
+                </Badge>
+            </CornerOrnament>
+        </CornerOrnamentContainer>
+        <Button variant="secondary">
+            <NotificationIcon decorative={true} size="sizeIcon20" />
+            Notifications
+            <Badge as="span" variant="notification_counter" size="small">
+                10
+            </Badge>
+        </Button>
+        <CornerOrnamentContainer cornerOrnamentType="icon" size="sizeIcon80" position="top_end">
+            <CornerOrnamentBase>
+                <NotificationIcon color="colorTextIcon" size="sizeIcon80" decorative={false} title="Notifications" />
+            </CornerOrnamentBase>
+            <CornerOrnament>
+                <ScreenReaderOnly>You have a notification</ScreenReaderOnly>
+                <NotificationOrnamentIcon color="colorTextIconNotification" decorative size="sizeIcon40" />
+            </CornerOrnament>
+        </CornerOrnamentContainer>
+    </Stack>
+  );
+};
+
+render(
+  <BadgeOverflowCornerOrnamentExample />
+)`.trim();
+
+export const iconCornerOrnamentExample = `
+const IconCornerOrnamentExample = () => {
+  return (
+    <Stack orientation="horizontal" spacing="space70">
+        <CornerOrnamentContainer cornerOrnamentType="icon" size="sizeIcon80">
+            <CornerOrnamentBase>
+                <Avatar
+                    size="sizeIcon80"
+                    name="Tri O'Hara"
+                    src="/images/avatars/avatar4.png"
+                />
+            </CornerOrnamentBase>
+            <CornerOrnament>
+                <ScreenReaderOnly>incoming call</ScreenReaderOnly>
+                <CallIncomingIcon color="colorTextIcon" decorative size="sizeIcon40" />
+            </CornerOrnament>
+        </CornerOrnamentContainer>
+        <CornerOrnamentContainer cornerOrnamentType="icon" size="sizeIcon80">
+            <CornerOrnamentBase>
+                <NotificationIcon color="colorTextIcon" size="sizeIcon80" decorative={false} title="shopping cart" />
+            </CornerOrnamentBase>
+            <CornerOrnament>
+                <ScreenReaderOnly>You have a notification</ScreenReaderOnly>
+                <NotificationOrnamentIcon color="colorTextIconNotification" decorative size="sizeIcon40" />
+            </CornerOrnament>
+        </CornerOrnamentContainer>
+        <CornerOrnamentContainer cornerOrnamentType="icon" size="sizeIcon80" position="top_end">
+            <CornerOrnamentBase>
+                <Avatar
+                    size="sizeIcon80"
+                    name="Tri O'Hara"
+                    src="/images/avatars/avatar4.png"
+                />
+            </CornerOrnamentBase>
+            <CornerOrnament>
+                <ScreenReaderOnly>incoming call</ScreenReaderOnly>
+                <CallIncomingIcon color="colorTextIcon" decorative size="sizeIcon40" />
+            </CornerOrnament>
+        </CornerOrnamentContainer>
+        <CornerOrnamentContainer cornerOrnamentType="icon" size="sizeIcon80" position="top_end">
+            <CornerOrnamentBase>
+                <NotificationIcon color="colorTextIcon" size="sizeIcon80" decorative={false} title="shopping cart" />
+            </CornerOrnamentBase>
+            <CornerOrnament>
+                <ScreenReaderOnly>You have a notification</ScreenReaderOnly>
+                <NotificationOrnamentIcon color="colorTextIconNotification" decorative size="sizeIcon40" />
+            </CornerOrnament>
+        </CornerOrnamentContainer>
+    </Stack>
+  );
+};
+
+render(
+  <IconCornerOrnamentExample />
+)`.trim();
+
+export const avatarCornerOrnamentExample = `
+const IconCornerOrnamentExample = () => {
+  return (
+    <Stack orientation="horizontal" spacing="space70">
+        <CornerOrnamentContainer cornerOrnamentType="avatar" size="sizeIcon80">
+            <CornerOrnamentBase>
+                <Avatar
+                    size="sizeIcon80"
+                    name="Tri O'Hara"
+                    src="/images/avatars/avatar4.png"
+                />
+            </CornerOrnamentBase>
+            <CornerOrnament>
+                <Avatar
+                    size="sizeIcon30"
+                    name="Twilio"
+                    src="/images/avatars/avatar5.png"
+                />
+            </CornerOrnament>
+        </CornerOrnamentContainer>
+        <CornerOrnamentContainer cornerOrnamentType="avatar" size="sizeIcon80">
+            <CornerOrnamentBase>
+                <DataTableIcon color="colorTextIcon" size="sizeIcon80" decorative={false} title="shopping cart" />
+            </CornerOrnamentBase>
+            <CornerOrnament>
+                <Avatar
+                    size="sizeIcon30"
+                    name="Tri O'Hara"
+                    src="/images/avatars/avatar4.png"
+                />
+            </CornerOrnament>
+        </CornerOrnamentContainer>
+        <CornerOrnamentContainer cornerOrnamentType="avatar" size="sizeIcon80" position="top_end">
+            <CornerOrnamentBase>
+                <Avatar
+                    size="sizeIcon80"
+                    name="Tri O'Hara"
+                    src="/images/avatars/avatar4.png"
+                />
+            </CornerOrnamentBase>
+            <CornerOrnament>
+                <Avatar
+                    size="sizeIcon30"
+                    name="Twilio"
+                    src="/images/avatars/avatar5.png"
+                />
+            </CornerOrnament>
+        </CornerOrnamentContainer>
+        <CornerOrnamentContainer cornerOrnamentType="avatar" size="sizeIcon80" position="top_end">
+            <CornerOrnamentBase>
+                <DataTableIcon color="colorTextIcon" size="sizeIcon80" decorative={false} title="shopping cart" />
+            </CornerOrnamentBase>
+            <CornerOrnament>
+                <Avatar
+                    size="sizeIcon30"
+                    name="Tri O'Hara"
+                    src="/images/avatars/avatar4.png"
+                />
+            </CornerOrnament>
+        </CornerOrnamentContainer>
+    </Stack>
+  );
+};
+
+render(
+  <IconCornerOrnamentExample />
+)`.trim();

packages/paste-website/src/pages/components/corner-ornament/api.mdx

@@ -0,0 +1,67 @@
+export const meta = {
+  title: 'Corner Ornament',
+  package: '@twilio-paste/corner-ornament',
+  description: 'Corner Ornament is a container used to apply a cutout to a base component and position another element as its ornament.',
+  slug: '/components/corner-ornament/api',
+};
+
+import Changelog from '@twilio-paste/corner-ornament/CHANGELOG.md';
+import packageJson from '@twilio-paste/corner-ornament/package.json';
+
+import {SidebarCategoryRoutes} from '../../../constants';
+import ComponentPageLayout from '../../../layouts/ComponentPageLayout';
+import {getFeature, getNavigationData, getComponentApi} from '../../../utils/api';
+
+export default ComponentPageLayout;
+
+export const getStaticProps = async () => {
+  const navigationData = await getNavigationData();
+  const feature = await getFeature('Corner ornament');
+  const {componentApi, componentApiTocData} = getComponentApi('@twilio-paste/corner-ornament');
+  return {
+    props: {
+      data: {
+        ...packageJson,
+        ...feature,
+      },
+      componentApi,
+      mdxHeadings: [...mdxHeadings, ...componentApiTocData],
+      navigationData,
+      pageHeaderData: {
+        categoryRoute: SidebarCategoryRoutes.COMPONENTS,
+        githubUrl: 'https://github.com/twilio-labs/paste/tree/main/packages/paste-core/components/corner-ornament',
+        storybookUrl: '/?path=/story/components-corner-ornament--supported-badge',
+      },
+    },
+  };
+};
+
+## Installation
+
+```bash
+yarn add @twilio-paste/corner-ornament - or - yarn add @twilio-paste/core
+```
+
+## Usage
+
+```jsx
+import { CornerOrnament, CornerOrnamentBase, CornerOrnamentContainer } from '@twilio-paste/core/corner-ornament';
+
+export const Example = () => {
+  return (
+    <CornerOrnamentContainer cornerOrnamentType="badge" size="sizeIcon80">
+      <CornerOrnamentBase>
+        // Your ornament base here
+      </CornerOrnamentBase>
+      <CornerOrnament>
+        <ScreenReaderOnly>{Your accessible reader value here}</ScreenReaderOnly>
+        // Your corner ornament here
+      </CornerOrnament>
+    </CornerOrnamentContainer>
+  );
+};
+```
+
+## Props
+
+<PropsTable componentApi={props.componentApi} />