@dmsi/wedgekit-react 0.0.25 → 0.0.27

package/src/components/SideMenuItem.tsx

@@ -4,6 +4,7 @@ import { Stack } from "./Stack";
 import { Paragraph } from "./Paragraph";
 
 export type SideMenuItemProps = {
+  id?: string;
   label?: string;
   leftIcon?: React.ReactNode;
   rightIcon?: React.ReactNode;
@@ -15,6 +16,7 @@ export type SideMenuItemProps = {
 };
 
 export const SideMenuItem = ({
+  id,
   label,
   leftIcon,
   rightIcon,
@@ -52,6 +54,7 @@ export const SideMenuItem = ({
 
   return (
     <a
+      id={id}
       href={href}
       className={clsx(
         "group flex w-full rounded border-2 cursor-pointer",
@@ -67,7 +70,12 @@ export const SideMenuItem = ({
       )}
       onClick={onClick}
     >
-      <Stack horizontal items="center" sizing="component">
+      <Stack
+        id={id ? `${id}-stack` : undefined}
+        horizontal
+        items="center"
+        sizing="component"
+      >
         {groupIndentLevel === 2 && <div className="pl-6" />}
         {groupIndentLevel === 3 && <div className="pl-13" />}
         {groupIndentLevel === 4 && <div className="pl-20" />}
@@ -77,7 +85,12 @@ export const SideMenuItem = ({
 
         {!leftIcon && groupIndentLevel && <div className="w-6 h-6" />}
 
-        <Paragraph as="span" padded className="mr-auto !leading-6">
+        <Paragraph
+          id={id ? `${id}-label` : undefined}
+          as="span"
+          padded
+          className="mr-auto !leading-6"
+        >
           {label}
         </Paragraph>
 

package/src/components/Stack.tsx

@@ -31,11 +31,12 @@ type StackProps = {
   overflowY?: "hidden" | "scroll" | "auto" | "inherit";
   overflowX?: "hidden" | "scroll" | "auto" | "inherit";
   zIndex?: number;
-  position?: CSSProperties['position'];
+  position?: CSSProperties["position"];
   top?: number;
   left?: number;
+  id?: string;
 } & FlexProps &
-  Omit<ComponentProps<"div">, "className">;
+  Omit<ComponentProps<"div">, "className" | "id">;
 
 export interface FlexProps {
   items?: ItemsAlign;
@@ -88,12 +89,16 @@ export const Stack = ({
   flexGrow,
   position,
   top,
-  left
+  left,
+  id,
+  ...props
 }: StackProps) => {
   const flexClassNames = useFlexClassNames({ items, justify, grow });
 
   return (
     <div
+      id={id}
+      {...props}
       style={{
         height:
           height === "full"

package/src/components/StatusPill.tsx

@@ -4,15 +4,16 @@ import clsx from "clsx";
 import { componentPaddingYUsingComponentGap, paddingXUsingLayoutGroupGap } from "../classNames";
 
 type StatusPillProps = PropsWithChildren<{
+  id?: string;
   intent?: "neutral" | "warning" | "success" | "critical";
   state?: "in-progress" | "completed";
 }>;
 
-
 export const StatusPill = ({
   children,
   state = "in-progress",
   intent = "neutral",
+  id,
   ...props
 }: StatusPillProps) => {
   const textColor = clsx(
@@ -37,6 +38,7 @@ export const StatusPill = ({
 
   return (
     <div
+      id={id}
       {...props}
       className={clsx(
         "rounded flex items-center",
@@ -46,7 +48,7 @@ export const StatusPill = ({
         componentPaddingYUsingComponentGap
       )}
     >
-      <Label>{children}</Label>
+      <Label id={id ? `${id}-label` : undefined}>{children}</Label>
     </div>
   );
 };

package/src/components/Stepper.tsx

@@ -22,6 +22,7 @@ export const Stepper = ({
   setValue,
   onDecrease,
   onIncrease,
+  id,
   ...props
 }: StepperProps) => {
   function handleIncrease() {
@@ -35,11 +36,9 @@ export const Stepper = ({
   }
 
   return (
-    <div className={clsx(
-      "flex items-center",
-      componentGap
-    )}>
+    <div id={id} className={clsx("flex items-center", componentGap)}>
       <Button
+        id={id ? `${id}-decrease-button` : undefined}
         iconOnly
         variant="tertiary"
         leftIcon={
@@ -60,7 +59,7 @@ export const Stepper = ({
       <div className="flex-1">
         <InputBase
           {...props}
-          id={props.id}
+          id={id ? `${id}-input` : undefined}
           type="number"
           align="center"
           value={value}
@@ -72,6 +71,7 @@ export const Stepper = ({
       </div>
 
       <Button
+        id={id ? `${id}-increase-button` : undefined}
         iconOnly
         variant="tertiary"
         leftIcon={

package/src/components/Subheader.tsx

@@ -6,6 +6,7 @@ type Tags = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "span" | "p";
 
 type SubheaderProps = {
   as?: Tags;
+  id?: string;
 } & AsProps<Tags> &
   TextAttributes &
   TypographyProps;
@@ -17,11 +18,13 @@ export const Subheader = ({
   align,
   color,
   tall,
+  id,
   ...props
 }: SubheaderProps) => {
   const Element = as;
   return (
     <Element
+      id={id}
       className={clsx(
         typography.subheader,
         className,

package/src/components/Surface.tsx

@@ -5,16 +5,19 @@ type SurfaceProps = HTMLAttributes<HTMLDivElement> &
   PropsWithChildren<{
     className?: string;
     elevation?: 0 | 2 | 4 | 16;
+    id?: string;
   }>;
 
 export const Surface = ({
   children,
   className,
   elevation = 0,
+  id,
   ...props
 }: SurfaceProps) => {
   return (
     <div
+      id={id}
       className={clsx(
         "rounded-base",
         {