Docs/corner ornament (#4024)

* feat(corner-ornament): initial WIP * feat(corner-ornament): refactor of masking paths in element * feat(corner-ornament): updated stories * feat(corner-ornament): tweaks * feat(corner-ornament): stories ad size mappings * feat(corner-ornament): stories * feat(corner-ornament): tests * feat(corner-ornament): refactor masks for string * feat(corner-ornament): lint & typedoc * feat(corner-ornament): changeset * feat(corner-ornament): changeset * feat(corner-ornament): remove unused assets * feat(corner-ornament): types update * feat(corner-ornament): update package description * feat(corner-ornament): yarn lock * Update packages/paste-core/components/corner-ornament/package.json Co-authored-by: Nora Krantz <[email protected]> * feat(docs): corner ornament wip * feat(corner-ornament): pr comments * feat(corner-ornament): mappings refactor * feat(corner-ornament): mapping tweaks * feat(corner-ornament): mapping tweaks * feat(corner-ornament): codemods * feat(corner-ornament): formatter * feat(corner-ornament): linting * feat(corner-ornament): remove unused files * feat(corner-ornament): corner ornament rename * feat(corner-ornament): typedocs * feat(docs): corner ornament wip * feat(tokens): added colorTextIconNotification * feat(icons): added NotificationOrnamentIcon * feat(type-docs): updated component typedocs to change in design token * feat(corner-ornament): updated dot for icon * feat(corner-ornament): initial WIP * feat(corner-ornament): refactor of masking paths in element * feat(corner-ornament): updated stories * feat(corner-ornament): tweaks * feat(corner-ornament): stories ad size mappings * feat(corner-ornament): stories * feat(corner-ornament): tests * feat(corner-ornament): refactor masks for string * feat(corner-ornament): lint & typedoc * feat(corner-ornament): changeset * feat(corner-ornament): changeset * feat(corner-ornament): remove unused assets * feat(corner-ornament): types update * feat(corner-ornament): update package description * feat(corner-ornament): yarn lock * Update packages/paste-core/components/corner-ornament/package.json Co-authored-by: Nora Krantz <[email protected]> * feat(corner-ornament): pr comments * feat(corner-ornament): mappings refactor * feat(corner-ornament): mapping tweaks * feat(corner-ornament): mapping tweaks * feat(corner-ornament): codemods * feat(corner-ornament): formatter * feat(corner-ornament): linting * feat(corner-ornament): remove unused files * feat(corner-ornament): corner ornament rename * feat(corner-ornament): typedocs * feat(tokens): added colorTextIconNotification * feat(icons): added NotificationOrnamentIcon * feat(type-docs): updated component typedocs to change in design token * feat(corner-ornament): updated dot for icon * feat(icons): added NotificationOrnamentIcon * feat(corner-ornament): pr issues * fix(corner-ornament): formatting issue * fix(corner-ornament): icon tests * Update packages/paste-core/components/corner-ornament/src/CornerOrnament.tsx Co-authored-by: Sarah <[email protected]> * feat(corner-ornament): new path mappings * feat(corner-ornament): updated ornament positions * feat(corner-ornament): final impl * feat(corner-ornament): avatar mapping fix * feat(docs/corner-ornament): added content without examples * feat(docs/corner-ornament): examples to docs * fix(docs/corner-ornament): pr cleanup * fix(docs/corner-ornament): pr cleanup * fix(docs/corner-ornament): pr cleanup * fix(pr comments): apply suggestions from code review Co-authored-by: Sarah <[email protected]> * feat(corner-ornament): initial WIP * feat(corner-ornament): refactor of masking paths in element * feat(corner-ornament): updated stories * feat(corner-ornament): tweaks * feat(corner-ornament): stories ad size mappings * feat(corner-ornament): stories * feat(corner-ornament): tests * feat(corner-ornament): refactor masks for string * feat(corner-ornament): lint & typedoc * feat(corner-ornament): changeset * feat(corner-ornament): changeset * feat(corner-ornament): remove unused assets * feat(corner-ornament): types update * feat(corner-ornament): update package description * feat(corner-ornament): yarn lock * feat(docs): corner ornament wip * feat(docs): corner ornament wip * feat(docs/corner-ornament): added content without examples * feat(corner-ornament): initial WIP * feat(corner-ornament): refactor of masking paths in element * feat(corner-ornament): updated stories * feat(corner-ornament): tweaks * feat(corner-ornament): stories ad size mappings * feat(corner-ornament): stories * feat(corner-ornament): tests * feat(corner-ornament): refactor masks for string * feat(corner-ornament): lint & typedoc * feat(corner-ornament): changeset * feat(corner-ornament): changeset * feat(corner-ornament): remove unused assets * feat(corner-ornament): types update * feat(corner-ornament): update package description * feat(corner-ornament): yarn lock * Update packages/paste-core/components/corner-ornament/package.json Co-authored-by: Nora Krantz <[email protected]> * feat(corner-ornament): pr comments * feat(corner-ornament): mappings refactor * feat(corner-ornament): mapping tweaks * feat(corner-ornament): mapping tweaks * feat(corner-ornament): linting * feat(corner-ornament): remove unused files * feat(corner-ornament): corner ornament rename * feat(corner-ornament): typedocs * feat(tokens): added colorTextIconNotification * feat(icons): added NotificationOrnamentIcon * feat(corner-ornament): updated dot for icon * feat(icons): added NotificationOrnamentIcon * feat(corner-ornament): pr comments * feat(corner-ornament): mappings refactor * feat(corner-ornament): mapping tweaks * feat(corner-ornament): mapping tweaks * feat(corner-ornament): linting * feat(icons): added NotificationOrnamentIcon * feat(corner-ornament): updated dot for icon * feat(corner-ornament): pr issues * Update packages/paste-core/components/corner-ornament/src/CornerOrnament.tsx Co-authored-by: Sarah <[email protected]> * feat(corner-ornament): new path mappings * feat(corner-ornament): updated ornament positions * feat(corner-ornament): final impl * feat(corner-ornament): avatar mapping fix * feat(docs/corner-ornament): examples to docs * fix(docs/corner-ornament): pr cleanup * fix(docs/corner-ornament): pr cleanup * fix(docs/corner-ornament): pr cleanup * fix(pr comments): apply suggestions from code review Co-authored-by: Sarah <[email protected]> * fix(docs/corner-ornament): address pr comments * fix(corner-ornament): resolve overidden changes during merge * fix(corner-ornament): resolve overidden changes during merge * fix(docs/corner-ornament): address pr comments --------- Co-authored-by: Nora Krantz <[email protected]> Co-authored-by: Sarah <[email protected]>
twilio-labs · Aug 6, 2024 · 933daf6 · 933daf6
1 parent d3d74e5
commit 933daf6
Show file tree

Hide file tree

Showing 7 changed files with 762 additions and 0 deletions.
diff --git a/cypress/integration/sitemap-vrt/constants.ts b/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",

diff --git a/packages/paste-website/package.json b/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",

diff --git a/packages/paste-website/src/component-examples/CornerOrnamentExamples.ts b/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();
diff --git a/packages/paste-website/src/pages/components/corner-ornament/api.mdx b/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} />