@conveyorhq/arrow-ds 2.0.0-beta.6 → 2.0.0-beta.7

package/src/docs/Typography.story.mdx

@@ -42,18 +42,18 @@ export const sampleText = "The quick brown fox jumps over the lazy dog.";
 
 # Typography
 
-## Fonts
+## Sans Serif Font – Neue Montreal
 
-### Neue Montreal (normal)
+### Regular
 
 <Typeset
   fontSizes={fontSizes}
-  fontWeight={fontWeight.normal}
+  fontWeight={fontWeight.regular}
   fontFamily={fontFamily.sans}
   sampleText={sampleText}
 />
 
-### Neue Montreal (medium)
+### Medium
 
 <Typeset
   fontSizes={fontSizes}
@@ -62,7 +62,7 @@ export const sampleText = "The quick brown fox jumps over the lazy dog.";
   sampleText={sampleText}
 />
 
-### Neue Montreal (bold)
+### Bold
 
 <Typeset
   fontSizes={fontSizes}
@@ -71,16 +71,19 @@ export const sampleText = "The quick brown fox jumps over the lazy dog.";
   sampleText={sampleText}
 />
 
-### IBM Plex Serif (semi-bold)
+## Serif Font – Galaxie Copernicus
+
+### Bold
 
 <Typeset
   fontSizes={fontSizes}
-  fontWeight={600}
   fontFamily={fontFamily.serif}
   sampleText={sampleText}
 />
 
-### Monospace (normal)
+## Monospace Font
+
+### Regular
 
 <Typeset
   fontSizes={fontSizes}
@@ -133,7 +136,7 @@ Weight can only be applied to Neue Montreal.
         <code>{key}</code>
       </Cell>
       <Cell>
-        <code>{fontWeight[key]}</code>
+        <code>{fontWeight[key].toString()}</code>
       </Cell>
     </Row>
   ))}

package/src/index.ts

@@ -3,12 +3,7 @@ import FocusLock from "react-focus-lock";
 import { RemoveScroll } from "react-remove-scroll";
 import { usePopper } from "react-popper";
 
-export * from "./components/Absolute";
 export * from "./components/Accordion";
-export * from "./components/Appbar";
-export * from "./components/ArrowButton";
-export * from "./components/ArrowLink";
-export * from "./components/Aside";
 export * from "./components/Avatar";
 export * from "./components/Badge";
 export * from "./components/Banner";
@@ -23,7 +18,6 @@ export * from "./components/DateRangePicker";
 export * from "./components/Description";
 export * from "./components/Divider";
 export * from "./components/Drawer";
-export * from "./components/Fixed";
 export * from "./components/FileUpload";
 export * from "./components/Flex";
 export * from "./components/FormGroup";
@@ -34,7 +28,6 @@ export * from "./components/Icon";
 export * from "./components/Image";
 export * from "./components/Input";
 export * from "./components/InputFeedback";
-export * from "./components/IntegrationLogo";
 export * from "./components/Label";
 export * from "./components/Link";
 export * from "./components/List";
@@ -43,7 +36,6 @@ export * from "./components/Markdown";
 export * from "./components/MarkdownEditor";
 export * from "./components/Menu";
 export * from "./components/MenuRenderer";
-export * from "./components/Meta";
 export * from "./components/Modal";
 export * from "./components/OptionButton";
 export * from "./components/Panel";
@@ -52,9 +44,7 @@ export * from "./components/Paragraph";
 export * from "./components/Popover";
 export * from "./components/PopoverMenu";
 export * from "./components/Portal";
-export * from "./components/PropertyDiff";
 export * from "./components/Radio";
-export * from "./components/Relative";
 export * from "./components/Reference";
 export * from "./components/ScrollPane";
 export * from "./components/Select";
@@ -65,9 +55,6 @@ export * from "./components/SmallCaps";
 export * from "./components/Snackbar";
 export * from "./components/SpeechBubble";
 export * from "./components/Stack";
-export * from "./components/StatusLabel";
-export * from "./components/StatusPanel";
-export * from "./components/Sticky";
 export * from "./components/Svg";
 export * from "./components/Tab";
 export * from "./components/Table";
@@ -77,10 +64,8 @@ export * from "./components/Textarea";
 export * from "./components/Toast";
 export * from "./components/Toggle";
 export * from "./components/Token";
-export * from "./components/TopBar";
 export * from "./components/Tooltip";
 export * from "./components/Truncate";
-export * from "./components/VendorLogo";
 export * from "./components/VisuallyHidden";
 
 export * from "./contexts";

package/src/storybook-components/ComponentHeading.tsx

@@ -1,14 +1,5 @@
 import React from "react";
-import {
-  Box,
-  Heading,
-  Text,
-  Stack,
-  Link,
-  IntegrationLogo,
-  Divider,
-  ORIENTATION,
-} from "..";
+import { Box, Heading, Text, Stack, Link, Divider, ORIENTATION } from "..";
 
 interface ComponentHeadingProps {
   componentName: string;
@@ -18,8 +9,8 @@ interface ComponentHeadingProps {
   hideDemosLink?: boolean;
 }
 
-// change this when changing from master/alpha/beta branches
-const CURRENT_BRANCH = "master";
+// change this when changing from main/alpha/beta branches
+const CURRENT_BRANCH = "main";
 
 export const ComponentHeading = ({
   componentName,
@@ -29,7 +20,7 @@ export const ComponentHeading = ({
   hideDemosLink = false,
 }: ComponentHeadingProps) => {
   return (
-    <Box>
+    <Box className="mb-4">
       <Heading.H1 style={{ fontSize: "36px" }} className="mb-1">
         {componentName}
       </Heading.H1>
@@ -57,12 +48,6 @@ export const ComponentHeading = ({
               className="inline-flex items-center"
             >
               Source
-              <IntegrationLogo
-                logo="github"
-                color="currentColor"
-                className="ml-1 inline-block"
-                size={18}
-              />
             </Link>
           </>
         )}

package/src/storybook-components/ComponentStatus.tsx

@@ -4,6 +4,7 @@ import { Banner } from "../components/Banner";
 
 export enum COMPONENT_STATUS {
   BETA = "beta",
+  DEPRECATED = "deprecated",
   DOCUMENTATION_PENDING = "documentation-pending",
   A11Y_VIOLATION_COLOR_CONTRAST = "a11y-violation-color-contrast",
 }
@@ -14,12 +15,14 @@ export interface ComponentStatusProps {
 
 const statusVariantMap = {
   [COMPONENT_STATUS.BETA]: STATUS_VARIANT.DANGER,
+  [COMPONENT_STATUS.DEPRECATED]: STATUS_VARIANT.WARNING,
   [COMPONENT_STATUS.DOCUMENTATION_PENDING]: STATUS_VARIANT.WARNING,
   [COMPONENT_STATUS.A11Y_VIOLATION_COLOR_CONTRAST]: STATUS_VARIANT.WARNING,
 };
 
 const statusTitleMap = {
   [COMPONENT_STATUS.BETA]: "Beta",
+  [COMPONENT_STATUS.DEPRECATED]: "Deprecated",
   [COMPONENT_STATUS.DOCUMENTATION_PENDING]: "Documentation Pending",
   [COMPONENT_STATUS.A11Y_VIOLATION_COLOR_CONTRAST]: "Poor Color Contrast",
 };
@@ -27,6 +30,7 @@ const statusTitleMap = {
 const statusMessageMap = {
   [COMPONENT_STATUS.BETA]: `This component is still a work-in-progress and should not be used for
   production-ready apps.`,
+  [COMPONENT_STATUS.DEPRECATED]: `This component has been deprecated and will be removed from the next major version.`,
   [COMPONENT_STATUS.DOCUMENTATION_PENDING]: `The documentation for this component is undergoing maintenance. All component configuration examples may not be illustrated below and some demonstrations may not be working`,
   [COMPONENT_STATUS.A11Y_VIOLATION_COLOR_CONTRAST]: `Variants of this component violate acceptable color contrast ratio for legibility.`,
 };

package/src/storybook-components/index.tsx

@@ -1,6 +1,6 @@
 export * from "./Accessibility";
 export * from "./Code";
 export * from "./ComponentHeading";
+export * from "./ComponentStatus";
 export * from "./EnumTable";
 export { default as Examples } from "./Examples";
-export * from "./TailwindPropertyClasses";

package/src/tokens/box-shadow.ts

@@ -14,4 +14,5 @@ export const boxShadow = {
     "0 4px 8px rgba(255, 255, 255, 0.1) inset, 0 2px 5px rgba(0, 0, 0, 0.1)",
   buttonSecondary: "0 1px 3px rgba(0, 0, 0, 0.05)",
   paper: "0 0 3px rgba(0,0,0,0.1), 9px 9px rgba(0,0,0,0.04)",
+  tile: "0 10px 20px rgba(0, 0, 0, 0.1), 0 0 3px rgba(0, 0, 0, 0.1)",
 };

package/src/tokens/font-family.ts

@@ -14,7 +14,7 @@ export const fontFamily = {
     "Helvetica Neue",
     "sans-serif",
   ],
-  serif: ["IBM Plex Serif", "serif"],
+  serif: ["Copernicus", "serif"],
   mono: [
     "Menlo",
     "Monaco",

package/src/tokens/height.ts

@@ -1,52 +1,11 @@
+import { positiveScale } from "./sizing-scale";
+
 export const height = {
+  ...positiveScale,
   auto: "auto",
   px: "1px",
-  "0": "0",
-  "1": "4px",
-  "2": "8px",
-  "3": "12px",
-  "4": "16px",
-  "5": "20px",
-  "6": "24px",
-  "7": "28px",
-  "8": "32px",
-  "9": "36px",
-  "10": "40px",
-  "12": "48px",
-  "14": "56px",
-  "15": "60px",
-  "16": "64px",
-  "18": "72px",
-  "20": "80px",
-  "22": "88px",
-  "24": "96px",
-  "26": "104px",
-  "28": "112px",
-  "30": "120px",
-  "32": "128px",
-  "34": "136px",
-  "36": "144px",
-  "38": "152px",
-  "40": "160px",
-  "42": "168px",
-  "44": "176px",
-  "46": "184px",
-  "48": "192px",
-  "50": "200px",
-  "52": "208px",
-  "54": "216px",
-  "56": "224px",
-  "58": "232px",
-  "60": "240px",
-  "62": "248px",
-  "64": "256px",
   full: "100%",
   screen: "100vh",
   appbar: "48px",
   cell: "34px",
 };
-
-export const maxHeight = {
-  full: "100%",
-  screen: "100vh",
-};

package/src/tokens/index.ts

@@ -4,7 +4,7 @@ import { colors, borderColors } from "./colors";
 import { fontFamily } from "./font-family";
 import { fontSize } from "./font-size";
 import { fontWeight } from "./font-weight";
-import { height, maxHeight } from "./height";
+import { height } from "./height";
 import { letterSpacing } from "./letter-spacing";
 import { lineHeight } from "./line-height";
 import { margin } from "./margin";
@@ -27,7 +27,7 @@ export const tokens = {
   letterSpacing,
   lineHeight,
   margin,
-  maxHeight,
+  maxHeight: height,
   maxWidth,
   minWidth,
   padding,

package/src/tokens/margin.ts

@@ -1,52 +1,9 @@
+import { positiveScale, negativeScale } from "./sizing-scale";
+
 export const margin = {
+  ...positiveScale,
+  ...negativeScale,
   auto: "auto",
-  "0": "0",
   px: "1px",
-  "1": "4px",
-  "2": "8px",
-  "3": "12px",
-  "4": "16px",
-  "5": "20px",
-  "6": "24px",
-  "7": "28px",
-  "8": "32px",
-  "9": "36px",
-  "10": "40px",
-  "12": "48px",
-  "14": "56px",
-  "16": "64px",
-  "18": "72px",
-  "20": "80px",
-  "22": "88px",
-  "24": "96px",
-  "26": "104px",
-  "28": "112px",
-  "30": "120px",
-  "32": "128px",
-  "48": "192px",
-  "64": "256px",
   "-px": "-1px",
-  [`-1`]: "-4px",
-  [`-2`]: "-8px",
-  [`-3`]: "-12px",
-  [`-4`]: "-16px",
-  [`-5`]: "-20px",
-  [`-6`]: "-24px",
-  [`-7`]: "-28px",
-  [`-8`]: "-32px",
-  [`-9`]: "-36px",
-  [`-10`]: "-40px",
-  [`-12`]: "-48px",
-  [`-14`]: "-56px",
-  [`-16`]: "-64px",
-  [`-18`]: "-72px",
-  [`-20`]: "-80px",
-  [`-22`]: "-88px",
-  [`-24`]: "-96px",
-  [`-26`]: "-104px",
-  [`-28`]: "-112px",
-  [`-30`]: "-120px",
-  [`-32`]: "-128px",
-  [`-48`]: "-192px",
-  [`-64`]: "-256px",
 };

package/src/tokens/padding.ts

@@ -1,27 +1,6 @@
+import { positiveScale } from "./sizing-scale";
+
 export const padding = {
+  ...positiveScale,
   px: "1px",
-  "0": "0",
-  "1": "4px",
-  "2": "8px",
-  "3": "12px",
-  "4": "16px",
-  "5": "20px",
-  "6": "24px",
-  "7": "28px",
-  "8": "32px",
-  "9": "36px",
-  "10": "40px",
-  "12": "48px",
-  "14": "56px",
-  "16": "64px",
-  "18": "72px",
-  "20": "80px",
-  "22": "88px",
-  "24": "96px",
-  "26": "104px",
-  "28": "112px",
-  "30": "120px",
-  "32": "128px",
-  "48": "192px",
-  "64": "256px",
 };

package/src/tokens/sizing-scale.ts

@@ -0,0 +1,134 @@
+export const positiveScale = {
+  0: "0",
+  1: "4px",
+  2: "8px",
+  3: "12px",
+  4: "16px",
+  5: "20px",
+  6: "24px",
+  7: "28px",
+  8: "32px",
+  9: "36px",
+  10: "40px",
+  11: "44px",
+  12: "48px",
+  13: "52px",
+  14: "56px",
+  15: "60px",
+  16: "64px",
+  17: "68px",
+  18: "72px",
+  19: "76px",
+  20: "80px",
+  21: "84px",
+  22: "88px",
+  23: "92px",
+  24: "96px",
+  25: "100px",
+  26: "104px",
+  27: "108px",
+  28: "112px",
+  29: "116px",
+  30: "120px",
+  31: "124px",
+  32: "128px",
+  33: "132px",
+  34: "136px",
+  35: "140px",
+  36: "144px",
+  37: "148px",
+  38: "152px",
+  39: "156px",
+  40: "160px",
+  41: "164px",
+  42: "168px",
+  43: "172px",
+  44: "176px",
+  45: "180px",
+  46: "184px",
+  47: "188px",
+  48: "192px",
+  49: "196px",
+  50: "200px",
+  51: "204px",
+  52: "208px",
+  53: "212px",
+  54: "216px",
+  55: "220px",
+  56: "224px",
+  57: "228px",
+  58: "232px",
+  59: "236px",
+  60: "240px",
+  61: "244px",
+  62: "248px",
+  63: "252px",
+  64: "256px",
+};
+
+export const negativeScale = {
+  "-1": "-4px",
+  "-2": "-8px",
+  "-3": "-12px",
+  "-4": "-16px",
+  "-5": "-20px",
+  "-6": "-24px",
+  "-7": "-28px",
+  "-8": "-32px",
+  "-9": "-36px",
+  "-10": "-40px",
+  "-11": "-44px",
+  "-12": "-48px",
+  "-13": "-52px",
+  "-14": "-56px",
+  "-15": "-60px",
+  "-16": "-64px",
+  "-17": "-68px",
+  "-18": "-72px",
+  "-19": "-76px",
+  "-20": "-80px",
+  "-21": "-84px",
+  "-22": "-88px",
+  "-23": "-92px",
+  "-24": "-96px",
+  "-25": "-100px",
+  "-26": "-104px",
+  "-27": "-108px",
+  "-28": "-112px",
+  "-29": "-116px",
+  "-30": "-120px",
+  "-31": "-124px",
+  "-32": "-128px",
+  "-33": "-132px",
+  "-34": "-136px",
+  "-35": "-140px",
+  "-36": "-144px",
+  "-37": "-148px",
+  "-38": "-152px",
+  "-39": "-156px",
+  "-40": "-160px",
+  "-41": "-164px",
+  "-42": "-168px",
+  "-43": "-172px",
+  "-44": "-176px",
+  "-45": "-180px",
+  "-46": "-184px",
+  "-47": "-188px",
+  "-48": "-192px",
+  "-49": "-196px",
+  "-50": "-200px",
+  "-51": "-204px",
+  "-52": "-208px",
+  "-53": "-212px",
+  "-54": "-216px",
+  "-55": "-220px",
+  "-56": "-224px",
+  "-57": "-228px",
+  "-58": "-232px",
+  "-59": "-236px",
+  "-60": "-240px",
+  "-61": "-244px",
+  "-62": "-248px",
+  "-63": "-252px",
+  "-64": "-256px",
+};

package/src/tokens/width.ts

@@ -1,36 +1,7 @@
+import { positiveScale } from "./sizing-scale";
+
 export const width = {
-  auto: "auto",
-  px: "1px",
-  "1": "4px",
-  "2": "8px",
-  "3": "12px",
-  "4": "16px",
-  "5": "20px",
-  "6": "24px",
-  "7": "28px",
-  "8": "32px",
-  "9": "36px",
-  "10": "40px",
-  "12": "48px",
-  "14": "56px",
-  "16": "64px",
-  "18": "72px",
-  "20": "80px",
-  "22": "88px",
-  "24": "96px",
-  "28": "112px",
-  "30": "120px",
-  "32": "128px",
-  "34": "136px",
-  "36": "144px",
-  "38": "152px",
-  "40": "160px",
-  "42": "168px",
-  "44": "176px",
-  "46": "184px",
-  "48": "192px",
-  "56": "224px",
-  "64": "256px",
+  ...positiveScale,
   "1/2": "50%",
   "1/3": "33.33333%",
   "2/3": "66.66667%",
@@ -42,47 +13,20 @@ export const width = {
   "4/5": "80%",
   "1/6": "16.66667%",
   "5/6": "83.33333%",
+  auto: "auto",
+  px: "1px",
   full: "100%",
   screen: "100vw",
   "max-content": "max-content",
 };
 
 export const minWidth = {
-  "0": "0",
-  "1": "4px",
-  "2": "8px",
-  "3": "12px",
-  "4": "16px",
-  "5": "20px",
-  "6": "24px",
-  "7": "28px",
-  "8": "32px",
-  "9": "36px",
-  "10": "40px",
-  "12": "48px",
-  "14": "56px",
-  "16": "64px",
-  "18": "72px",
-  "20": "80px",
-  "22": "88px",
-  "24": "96px",
-  "28": "112px",
-  "30": "120px",
-  "32": "128px",
-  "34": "136px",
-  "36": "144px",
-  "38": "152px",
-  "40": "160px",
-  "42": "168px",
-  "44": "176px",
-  "46": "184px",
-  "48": "192px",
-  "56": "224px",
-  "64": "256px",
+  ...positiveScale,
   full: "100%",
 };
 
 export const maxWidth = {
+  ...positiveScale,
   xs: "20rem",
   sm: "30rem",
   md: "40rem",

package/src/types/index.ts

@@ -1,5 +1,5 @@
 import { ComputedPlacement, AutoPlacement } from "@popperjs/core";
-import { padding } from "../tokens/padding";
+import { positiveScale } from "../tokens/sizing-scale";
 
 export type ClassName = string | Array<string | ClassName>;
 
@@ -49,8 +49,37 @@ export type Action = {
   external?: boolean;
 };
 
-const paddingValues = Object.keys(padding)
-  .filter((val) => val !== "px")
-  .map((val) => parseInt(val, 10));
+const sizingValues = Object.keys(positiveScale).map((val) => parseInt(val, 10));
 
-export type Spacing = typeof paddingValues[number];
+/**
+ * @deprecated Use SizingKeys instead
+ */
+export type Spacing = typeof sizingValues[number];
+
+export type SizingKeys = typeof sizingValues[number];
+
+export type DisclosureProps = {
+  isOpen: boolean;
+  onOpen(): void;
+  onClose(): void;
+  onToggle(): void;
+};
+
+export type RequiredToasterProps = {
+  /**
+   * ID of the toaster instance; auto-generated
+   */
+  id: number;
+  /**
+   * Method to dismiss the toaster instance; auto-generated
+   */
+  onClose: () => void;
+};
+
+export type ToasterPositionOptions =
+  | "top-left"
+  | "top"
+  | "top-right"
+  | "bottom-left"
+  | "bottom"
+  | "bottom-right";

package/public/components/Absolute/Absolute.d.ts

@@ -1,2 +0,0 @@
-import { BoxProps } from "../Box";
-export declare const Absolute: (props: BoxProps) => JSX.Element;