@commercetools/nimbus 0.0.1 → 0.0.3-alpha.2

package/src/components/button/button.mdx

@@ -1,169 +0,0 @@
----
-id: Forms-Button
-title: Button
-description: Displays a Button.
-documentState: ReviewedInternal
-documentAudiences: []
-order: 999
-menu:
-  - Components
-  - Inputs
-  - Button
-tags:
-  - document
-figmaLink: >-
-  https://www.figma.com/design/AvtPX6g7OGGCRvNlatGOIY/New-Design-System?node-id=58-132&m=dev
----
-
-# Button
-
-Displays a Button.
-
-## Basic Usage
-
-If unconfigured it will default to a neutral state. It is important to configure
-the Button properly to ensure it displays as intended.
-
-```jsx-live
-const App = () => <Button>I am a Button</Button>
-```
-
-## Events
-
-To handle the differences between mouse-, touch- and keyboard-interactions, the
-`Button` supports `onPress*` events. The misc `onPress*` events (`onPress`,
-`onPressStart`, `onPressEnd`, etc.) provide a more seamless and inclusive user
-experience across different devices and input methods:
-
-```jsx-live
-const App = () => <Button tone="primary" variant="solid" onPress={()=>alert()}>I am accessible</Button>
-```
-
-## Custom DOM-element
-
-The Button component uses the native
-[HTML button element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button)
-by default, but supports rendering as a different tag to the DOM. Use the
-`asChild` property and the tag you want to render as _only_ child.
-
-```jsx-live
-const App = () => (
-  <Button tone="primary" variant="solid" asChild>
-    <a href="http://www.commercetools.com" target="_blank">I am a button in disguise</a>
-  </Button>
-)
-```
-
-## Aria- & Data-Attributes
-
-The Button component supports forwarding `data-*` and `aria-*` attributes. This
-can be useful for tracking tools & a11y.
-
-```jsx-live
-const App = () => <Button tone="primary" variant="solid" data-foo="bar">I can have data-attributes</Button>
-```
-
-## Customizing the look
-
-### Sizes
-
-Buttons come in different sizes, sizing a button is done by setting the `size`
-prop. Setting the size has no effect on the variant or color of the Button.
-
-```jsx-live
-const App = () => {
-
-  const sizes = ['2xs', 'xs', 'md'].reverse();
-
-  return (
-    <Stack direction="horizontal" alignItems="center">
-      {sizes.map(size => (
-        <Button tone="primary" variant="solid" key={size} size={size}>'{size}' Button</Button>
-      ))}
-    </Stack>
-  )
-}
-```
-
-### Variants
-
-Look how the buttons change their appearance but not their size. It is important
-that the variant has no effect on the size. Only then it can be guaranteed that
-buttons with different variants can be used and displayed next to each other.
-
-```jsx-live
-const App = () => {
-
-  const variants = ['solid', 'outline', 'ghost', "link"]
-
-  return (
-    <Stack direction="horizontal">
-      {variants.map(variant => (
-        <Button tone="primary" key={variant} variant={variant}>'{variant}' Button</Button>
-      ))}
-    </Stack>
-  )
-}
-```
-
-### Tones / Colors
-
-Since the different `variants` operate purely on contrast level differences
-(think: dark & light elements), the `colorPalette` prop can be used to colorize
-the Button.
-
-```jsx-live
-const App = () => {
-  const variants = ["solid", "outline", "ghost", "link"];
-  const colors = ["primary", "critical"];
-
-  return (
-    <Stack>
-      {colors.map((color) => (
-        <Stack key={color} direction="horizontal">
-          {variants.map((variant) => (
-            <Button tone={color} key={variant} variant={variant}>
-              '{variant}' Button
-            </Button>
-          ))}
-        </Stack>
-      ))}
-    </Stack>
-  );
-};
-```
-
-### Icons
-
-Simply drop the desired icon into the `Button`:
-
-```jsx-live
-const App = () => {
-  const sizes = ["2xs", "xs", "md"].reverse();
-
-  return (
-    <Stack>
-      {sizes.map((size) => (
-        <Stack key={size} direction="horizontal">
-          <Button size={size} colorPalette="success" variant="solid" startIcon={<Icons.Check />}>
-            <Icons.Check />
-            Yes
-          </Button>
-          <Button size={size} colorPalette="error" variant="solid" startIcon={<Icons.X />}>
-            <Icons.Close />
-            No
-          </Button>
-          <Button size={size} colorPalette="neutral" variant="ghost" endIcon={<Box animation="spin" asChild><Icons.Loader/></Box>}>
-             Maybe
-             <Icons.HelpOutline />
-          </Button>
-        </Stack>
-      ))}
-    </Stack>
-  );
-};
-```
-
-## Properties / API
-
-<PropTable id="Button" />

package/src/components/button/button.recipe.ts

@@ -1,185 +0,0 @@
-import { defineRecipe } from "@chakra-ui/react";
-
-export const buttonRecipe = defineRecipe({
-  className: "nimbus-button",
-  base: {
-    borderRadius: "200",
-    display: "inline-flex",
-    appearance: "none",
-    alignItems: "center",
-    justifyContent: "center",
-    userSelect: "none",
-    position: "relative",
-    whiteSpace: "nowrap",
-    verticalAlign: "middle",
-    borderWidth: "1px",
-    borderColor: "transparent",
-    cursor: "button",
-    flexShrink: "0",
-    outline: "0",
-    lineHeight: "1.2",
-    isolation: "isolate",
-    fontWeight: "500",
-    transitionProperty: "common",
-    transitionDuration: "moderate",
-    focusVisibleRing: "outside",
-    _disabled: {
-      layerStyle: "disabled",
-    },
-    _icon: {
-      flexShrink: "0",
-    },
-  },
-  variants: {
-    size: {
-      "2xs": {
-        h: "600",
-        minW: "600",
-        fontSize: "300",
-        fontWeight: "500",
-        lineHeight: "400",
-        px: "200",
-        gap: "100",
-        _icon: {
-          width: "400",
-          height: "400",
-        },
-      },
-      xs: {
-        h: "800",
-        minW: "800",
-        fontSize: "350",
-        fontWeight: "500",
-        lineHeight: "400",
-        px: "300",
-        gap: "100",
-        _icon: {
-          width: "500",
-          height: "500",
-        },
-      },
-      /* sm: {
-        h: "900",
-        minW: "900",
-        px: "350",
-        textStyle: "sm",
-        gap: "200",
-        _icon: {
-          width: "400",
-          height: "400",
-        },
-      }, */
-      md: {
-        h: "1000",
-        minW: "1000",
-        fontSize: "400",
-        lineHeight: "500",
-        px: "400",
-        gap: "200",
-        _icon: {
-          width: "600",
-          height: "600",
-        },
-      },
-      /*  lg: {
-        h: "1100",
-        minW: "1100",
-        textStyle: "md",
-        px: "500",
-        gap: "300",
-        _icon: {
-          width: "500",
-          height: "500",
-        },
-      }, */
-      /*  xl: {
-        h: "1200",
-        minW: "1200",
-        textStyle: "md",
-        px: "500",
-        gap: "250",
-        _icon: {
-          width: "500",
-          height: "500",
-        },
-      }, */
-      /* "2xl": {
-        h: "1600",
-        minW: "1600",
-        textStyle: "lg",
-        px: "700",
-        gap: "300",
-        _icon: {
-          width: "600",
-          height: "600",
-        },
-      }, */
-    },
-    variant: {
-      solid: {
-        bg: "colorPalette.9",
-        color: "colorPalette.contrast",
-        _hover: {
-          bg: "colorPalette.10",
-        },
-        _expanded: {
-          bg: "colorPalette.10",
-        },
-      },
-      subtle: {
-        bg: "colorPalette.3",
-        color: "colorPalette.11",
-        _hover: {
-          bg: "colorPalette.4",
-        },
-        _expanded: {
-          bg: "colorPalette.4",
-        },
-      },
-      outline: {
-        borderWidth: "1px",
-        borderColor: "colorPalette.7",
-        color: "colorPalette.11",
-        transitionProperty: "background-color, border-color, color",
-        transitionDuration: "moderate",
-        _hover: {
-          bg: "colorPalette.3",
-          borderColor: "colorPalette.8",
-        },
-        _expanded: {
-          bg: "colorPalette.subtle",
-        },
-      },
-      ghost: {
-        color: "colorPalette.11",
-        _hover: {
-          bg: "colorPalette.4",
-        },
-        _expanded: {
-          bg: "colorPalette.4",
-        },
-      },
-      link: {
-        color: "colorPalette.11",
-        _hover: {
-          textDecoration: "underline",
-        },
-      },
-    },
-    tone: {
-      primary: {
-        colorPalette: "primary",
-      },
-      critical: {
-        colorPalette: "error",
-      },
-      neutral: {
-        colorPalette: "neutral",
-      },
-    },
-  },
-  defaultVariants: {
-    size: "md",
-    variant: "subtle",
-  },
-});

package/src/components/button/button.slots.tsx

@@ -1,45 +0,0 @@
-import {
-  type HTMLChakraProps,
-  type RecipeProps,
-  type UnstyledProp,
-  createRecipeContext,
-  defaultSystem,
-} from "@chakra-ui/react";
-import { buttonRecipe } from "./button.recipe";
-import shouldForwardProp from "@emotion/is-prop-valid";
-
-/**
- * Base recipe props interface that combines Chakra UI's recipe props
- * with the unstyled prop option for the button element.
- */
-interface ButtonRecipeProps extends RecipeProps<"button">, UnstyledProp {}
-
-/**
- * Root props interface that extends Chakra's HTML props with our recipe props.
- * This creates a complete set of props for the root element, combining
- * HTML attributes, Chakra's styling system, and our custom recipe props.
- */
-export type ButtonRootProps = HTMLChakraProps<"button", ButtonRecipeProps>;
-
-const { withContext } = createRecipeContext({
-  recipe: buttonRecipe,
-});
-
-/**
- * Root component that provides the styling context for the Battn component.
- * Uses Chakra UI's recipe context system for consistent styling across instances.
- */
-export const ButtonRoot = withContext<HTMLButtonElement, ButtonRootProps>(
-  "button",
-  {
-    defaultProps: {
-      type: "button",
-    },
-    /** make sure the `onPress` properties won't end up as attribute on the rendered DOM element */
-    shouldForwardProp(prop, variantKeys) {
-      const chakraSfp =
-        !variantKeys?.includes(prop) && !defaultSystem.isValidProperty(prop);
-      return shouldForwardProp(prop) && chakraSfp && !prop.includes("onPress");
-    },
-  }
-);