@react-md/core 1.0.0-next.12 → 1.0.0-next.13

package/src/box/__tests__/Box.tsx

@@ -0,0 +1,158 @@
+import { describe, expect, it } from "@jest/globals";
+import { createRef } from "react";
+import { render, screen } from "../../test-utils/index.js";
+import { Box, type BoxProps } from "../Box.js";
+import { type BoxAlignItems, type BoxJustifyContent } from "../styles.js";
+
+const align: BoxAlignItems[] = [
+  "start",
+  "flex-start",
+  "center",
+  "end",
+  "flex-end",
+  "stretch",
+];
+
+const justify: BoxJustifyContent[] = [
+  ...align,
+  "space-between",
+  "space-around",
+  "space-evenly",
+];
+
+const BASE_PROPS: BoxProps = {
+  "data-testid": "box",
+  children: "Content",
+};
+
+describe("Box", () => {
+  it("should apply the correct styling, HTML attributes, and allow a ref", () => {
+    const ref = createRef<HTMLDivElement>();
+    const props = {
+      ...BASE_PROPS,
+      ref,
+    } as const;
+    const { rerender } = render(<Box {...props} />);
+
+    const box = screen.getByTestId("box");
+    expect(ref.current).toBeInstanceOf(HTMLDivElement);
+    expect(ref.current).toBe(box);
+    expect(box).toMatchSnapshot();
+
+    rerender(
+      <Box
+        {...props}
+        style={{ color: "white" }}
+        className="custom-class-name"
+      />
+    );
+    expect(box).toMatchSnapshot();
+  });
+
+  it("should support common flex behavior", () => {
+    const { rerender } = render(<Box {...BASE_PROPS} />);
+
+    const box = screen.getByTestId("box");
+    align.forEach((align) => {
+      justify.forEach((justify) => {
+        rerender(<Box {...BASE_PROPS} align={align} justify={justify} />);
+
+        expect(box).toMatchSnapshot();
+      });
+    });
+  });
+
+  it("should allow the padding to be disabled", () => {
+    const { rerender } = render(<Box {...BASE_PROPS} />);
+    const box = screen.getByTestId("box");
+
+    expect(box).toHaveClass("rmd-box--padded");
+
+    rerender(<Box {...BASE_PROPS} disablePadding />);
+    expect(box).not.toHaveClass("rmd-box--padded");
+  });
+
+  it("should support a full width prop to expand within other flex/grid containers", () => {
+    const { rerender } = render(<Box {...BASE_PROPS} />);
+    const box = screen.getByTestId("box");
+
+    expect(box).not.toHaveClass("rmd-box--full-width");
+
+    rerender(<Box {...BASE_PROPS} fullWidth />);
+    expect(box).toHaveClass("rmd-box--full-width");
+  });
+
+  it("should be able to render as a grid using the grid prop", () => {
+    render(<Box {...BASE_PROPS} grid />);
+    const box = screen.getByTestId("box");
+    expect(box).toMatchSnapshot();
+  });
+
+  it("should support rendering the grid with auto-fill instead of auto-fit", () => {
+    const { rerender } = render(<Box {...BASE_PROPS} grid />);
+    const box = screen.getByTestId("box");
+
+    expect(box).toHaveClass("rmd-box--grid");
+    expect(box).not.toHaveClass("rmd-box--grid-fill");
+
+    rerender(<Box {...BASE_PROPS} grid gridColumns="fit" />);
+    expect(box).toHaveClass("rmd-box--grid");
+    expect(box).not.toHaveClass("rmd-box--grid-fill");
+
+    rerender(<Box {...BASE_PROPS} grid gridColumns="fill" />);
+    expect(box).toHaveClass("rmd-box--grid");
+    expect(box).toHaveClass("rmd-box--grid-fill");
+  });
+
+  it("should set the --rmd-box-columns variable and grid-columsn class when gridColumns is a number", () => {
+    const { rerender } = render(<Box {...BASE_PROPS} grid />);
+    const box = screen.getByTestId("box");
+
+    expect(box).toMatchSnapshot();
+    expect(box).toHaveClass("rmd-box--grid");
+    expect(box).not.toHaveClass("rmd-box--grid-fill");
+    expect(box).not.toHaveClass("rmd-box--grid-columns");
+
+    rerender(<Box {...BASE_PROPS} grid gridColumns={4} />);
+    expect(box).toMatchSnapshot();
+    expect(box).toHaveClass("rmd-box--grid");
+    expect(box).not.toHaveClass("rmd-box--grid-fill");
+    expect(box).toHaveClass("rmd-box--grid-columns");
+
+    rerender(
+      <Box {...BASE_PROPS} grid gridColumns={4} style={{ color: "red" }} />
+    );
+    expect(box).toMatchSnapshot();
+  });
+
+  it("should be able to generate a grid name", () => {
+    render(<Box {...BASE_PROPS} grid gridName="variant-1" />);
+    const box = screen.getByTestId("box");
+
+    expect(box).toHaveClass("rmd-box--variant-1");
+  });
+
+  it("should be able stack and reverse ordering", () => {
+    const { rerender } = render(<Box {...BASE_PROPS} />);
+    const box = screen.getByTestId("box");
+
+    expect(box).not.toHaveClass("rmd-box--column");
+    expect(box).not.toHaveClass("rmd-box--reverse");
+    expect(box).not.toHaveClass("rmd-box--column-reverse");
+
+    rerender(<Box {...BASE_PROPS} stacked />);
+    expect(box).toHaveClass("rmd-box--column");
+    expect(box).not.toHaveClass("rmd-box--reverse");
+    expect(box).not.toHaveClass("rmd-box--column-reverse");
+
+    rerender(<Box {...BASE_PROPS} stacked reversed />);
+    expect(box).not.toHaveClass("rmd-box--column");
+    expect(box).not.toHaveClass("rmd-box--reverse");
+    expect(box).toHaveClass("rmd-box--column-reverse");
+
+    rerender(<Box {...BASE_PROPS} reversed />);
+    expect(box).not.toHaveClass("rmd-box--column");
+    expect(box).toHaveClass("rmd-box--reverse");
+    expect(box).not.toHaveClass("rmd-box--column-reverse");
+  });
+});

package/src/box/__tests__/__snapshots__/Box.tsx.snap

@@ -0,0 +1,544 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Box should apply the correct styling, HTML attributes, and allow a ref 1`] = `
+<div
+  class="rmd-box rmd-box--wrap rmd-box--padded"
+  data-testid="box"
+>
+  Content
+</div>
+`;
+
+exports[`Box should apply the correct styling, HTML attributes, and allow a ref 2`] = `
+<div
+  class="rmd-box rmd-box--wrap rmd-box--padded custom-class-name"
+  data-testid="box"
+  style="color: white;"
+>
+  Content
+</div>
+`;
+
+exports[`Box should be able to render as a grid using the grid prop 1`] = `
+<div
+  class="rmd-box rmd-box--wrap rmd-box--padded rmd-box--grid"
+  data-testid="box"
+>
+  Content
+</div>
+`;
+
+exports[`Box should set the --rmd-box-columns variable and grid-columsn class when gridColumns is a number 1`] = `
+<div
+  class="rmd-box rmd-box--wrap rmd-box--padded rmd-box--grid"
+  data-testid="box"
+>
+  Content
+</div>
+`;
+
+exports[`Box should set the --rmd-box-columns variable and grid-columsn class when gridColumns is a number 2`] = `
+<div
+  class="rmd-box rmd-box--wrap rmd-box--padded rmd-box--grid rmd-box--grid-columns"
+  data-testid="box"
+  style="--rmd-box-columns: 4;"
+>
+  Content
+</div>
+`;
+
+exports[`Box should set the --rmd-box-columns variable and grid-columsn class when gridColumns is a number 3`] = `
+<div
+  class="rmd-box rmd-box--wrap rmd-box--padded rmd-box--grid rmd-box--grid-columns"
+  data-testid="box"
+  style="--rmd-box-columns: 4; color: red;"
+>
+  Content
+</div>
+`;
+
+exports[`Box should support common flex behavior 1`] = `
+<div
+  class="rmd-box rmd-box--wrap rmd-box--padded rmd-box--align-start rmd-box--justify-start"
+  data-testid="box"
+>
+  Content
+</div>
+`;
+
+exports[`Box should support common flex behavior 2`] = `
+<div
+  class="rmd-box rmd-box--wrap rmd-box--padded rmd-box--align-start rmd-box--justify-start"
+  data-testid="box"
+>
+  Content
+</div>
+`;
+
+exports[`Box should support common flex behavior 3`] = `
+<div
+  class="rmd-box rmd-box--wrap rmd-box--padded rmd-box--align-start rmd-box--justify-center"
+  data-testid="box"
+>
+  Content
+</div>
+`;
+
+exports[`Box should support common flex behavior 4`] = `
+<div
+  class="rmd-box rmd-box--wrap rmd-box--padded rmd-box--align-start rmd-box--justify-end"
+  data-testid="box"
+>
+  Content
+</div>
+`;
+
+exports[`Box should support common flex behavior 5`] = `
+<div
+  class="rmd-box rmd-box--wrap rmd-box--padded rmd-box--align-start rmd-box--justify-end"
+  data-testid="box"
+>
+  Content
+</div>
+`;
+
+exports[`Box should support common flex behavior 6`] = `
+<div
+  class="rmd-box rmd-box--wrap rmd-box--padded rmd-box--align-start rmd-box--justify-stretch"
+  data-testid="box"
+>
+  Content
+</div>
+`;
+
+exports[`Box should support common flex behavior 7`] = `
+<div
+  class="rmd-box rmd-box--wrap rmd-box--padded rmd-box--align-start rmd-box--justify-between"
+  data-testid="box"
+>
+  Content
+</div>
+`;
+
+exports[`Box should support common flex behavior 8`] = `
+<div
+  class="rmd-box rmd-box--wrap rmd-box--padded rmd-box--align-start rmd-box--justify-around"
+  data-testid="box"
+>
+  Content
+</div>
+`;
+
+exports[`Box should support common flex behavior 9`] = `
+<div
+  class="rmd-box rmd-box--wrap rmd-box--padded rmd-box--align-start rmd-box--justify-evenly"
+  data-testid="box"
+>
+  Content
+</div>
+`;
+
+exports[`Box should support common flex behavior 10`] = `
+<div
+  class="rmd-box rmd-box--wrap rmd-box--padded rmd-box--align-start rmd-box--justify-start"
+  data-testid="box"
+>
+  Content
+</div>
+`;
+
+exports[`Box should support common flex behavior 11`] = `
+<div
+  class="rmd-box rmd-box--wrap rmd-box--padded rmd-box--align-start rmd-box--justify-start"
+  data-testid="box"
+>
+  Content
+</div>
+`;
+
+exports[`Box should support common flex behavior 12`] = `
+<div
+  class="rmd-box rmd-box--wrap rmd-box--padded rmd-box--align-start rmd-box--justify-center"
+  data-testid="box"
+>
+  Content
+</div>
+`;
+
+exports[`Box should support common flex behavior 13`] = `
+<div
+  class="rmd-box rmd-box--wrap rmd-box--padded rmd-box--align-start rmd-box--justify-end"
+  data-testid="box"
+>
+  Content
+</div>
+`;
+
+exports[`Box should support common flex behavior 14`] = `
+<div
+  class="rmd-box rmd-box--wrap rmd-box--padded rmd-box--align-start rmd-box--justify-end"
+  data-testid="box"
+>
+  Content
+</div>
+`;
+
+exports[`Box should support common flex behavior 15`] = `
+<div
+  class="rmd-box rmd-box--wrap rmd-box--padded rmd-box--align-start rmd-box--justify-stretch"
+  data-testid="box"
+>
+  Content
+</div>
+`;
+
+exports[`Box should support common flex behavior 16`] = `
+<div
+  class="rmd-box rmd-box--wrap rmd-box--padded rmd-box--align-start rmd-box--justify-between"
+  data-testid="box"
+>
+  Content
+</div>
+`;
+
+exports[`Box should support common flex behavior 17`] = `
+<div
+  class="rmd-box rmd-box--wrap rmd-box--padded rmd-box--align-start rmd-box--justify-around"
+  data-testid="box"
+>
+  Content
+</div>
+`;
+
+exports[`Box should support common flex behavior 18`] = `
+<div
+  class="rmd-box rmd-box--wrap rmd-box--padded rmd-box--align-start rmd-box--justify-evenly"
+  data-testid="box"
+>
+  Content
+</div>
+`;
+
+exports[`Box should support common flex behavior 19`] = `
+<div
+  class="rmd-box rmd-box--wrap rmd-box--padded rmd-box--align-center rmd-box--justify-start"
+  data-testid="box"
+>
+  Content
+</div>
+`;
+
+exports[`Box should support common flex behavior 20`] = `
+<div
+  class="rmd-box rmd-box--wrap rmd-box--padded rmd-box--align-center rmd-box--justify-start"
+  data-testid="box"
+>
+  Content
+</div>
+`;
+
+exports[`Box should support common flex behavior 21`] = `
+<div
+  class="rmd-box rmd-box--wrap rmd-box--padded rmd-box--align-center rmd-box--justify-center"
+  data-testid="box"
+>
+  Content
+</div>
+`;
+
+exports[`Box should support common flex behavior 22`] = `
+<div
+  class="rmd-box rmd-box--wrap rmd-box--padded rmd-box--align-center rmd-box--justify-end"
+  data-testid="box"
+>
+  Content
+</div>
+`;
+
+exports[`Box should support common flex behavior 23`] = `
+<div
+  class="rmd-box rmd-box--wrap rmd-box--padded rmd-box--align-center rmd-box--justify-end"
+  data-testid="box"
+>
+  Content
+</div>
+`;
+
+exports[`Box should support common flex behavior 24`] = `
+<div
+  class="rmd-box rmd-box--wrap rmd-box--padded rmd-box--align-center rmd-box--justify-stretch"
+  data-testid="box"
+>
+  Content
+</div>
+`;
+
+exports[`Box should support common flex behavior 25`] = `
+<div
+  class="rmd-box rmd-box--wrap rmd-box--padded rmd-box--align-center rmd-box--justify-between"
+  data-testid="box"
+>
+  Content
+</div>
+`;
+
+exports[`Box should support common flex behavior 26`] = `
+<div
+  class="rmd-box rmd-box--wrap rmd-box--padded rmd-box--align-center rmd-box--justify-around"
+  data-testid="box"
+>
+  Content
+</div>
+`;
+
+exports[`Box should support common flex behavior 27`] = `
+<div
+  class="rmd-box rmd-box--wrap rmd-box--padded rmd-box--align-center rmd-box--justify-evenly"
+  data-testid="box"
+>
+  Content
+</div>
+`;
+
+exports[`Box should support common flex behavior 28`] = `
+<div
+  class="rmd-box rmd-box--wrap rmd-box--padded rmd-box--align-end rmd-box--justify-start"
+  data-testid="box"
+>
+  Content
+</div>
+`;
+
+exports[`Box should support common flex behavior 29`] = `
+<div
+  class="rmd-box rmd-box--wrap rmd-box--padded rmd-box--align-end rmd-box--justify-start"
+  data-testid="box"
+>
+  Content
+</div>
+`;
+
+exports[`Box should support common flex behavior 30`] = `
+<div
+  class="rmd-box rmd-box--wrap rmd-box--padded rmd-box--align-end rmd-box--justify-center"
+  data-testid="box"
+>
+  Content
+</div>
+`;
+
+exports[`Box should support common flex behavior 31`] = `
+<div
+  class="rmd-box rmd-box--wrap rmd-box--padded rmd-box--align-end rmd-box--justify-end"
+  data-testid="box"
+>
+  Content
+</div>
+`;
+
+exports[`Box should support common flex behavior 32`] = `
+<div
+  class="rmd-box rmd-box--wrap rmd-box--padded rmd-box--align-end rmd-box--justify-end"
+  data-testid="box"
+>
+  Content
+</div>
+`;
+
+exports[`Box should support common flex behavior 33`] = `
+<div
+  class="rmd-box rmd-box--wrap rmd-box--padded rmd-box--align-end rmd-box--justify-stretch"
+  data-testid="box"
+>
+  Content
+</div>
+`;
+
+exports[`Box should support common flex behavior 34`] = `
+<div
+  class="rmd-box rmd-box--wrap rmd-box--padded rmd-box--align-end rmd-box--justify-between"
+  data-testid="box"
+>
+  Content
+</div>
+`;
+
+exports[`Box should support common flex behavior 35`] = `
+<div
+  class="rmd-box rmd-box--wrap rmd-box--padded rmd-box--align-end rmd-box--justify-around"
+  data-testid="box"
+>
+  Content
+</div>
+`;
+
+exports[`Box should support common flex behavior 36`] = `
+<div
+  class="rmd-box rmd-box--wrap rmd-box--padded rmd-box--align-end rmd-box--justify-evenly"
+  data-testid="box"
+>
+  Content
+</div>
+`;
+
+exports[`Box should support common flex behavior 37`] = `
+<div
+  class="rmd-box rmd-box--wrap rmd-box--padded rmd-box--align-end rmd-box--justify-start"
+  data-testid="box"
+>
+  Content
+</div>
+`;
+
+exports[`Box should support common flex behavior 38`] = `
+<div
+  class="rmd-box rmd-box--wrap rmd-box--padded rmd-box--align-end rmd-box--justify-start"
+  data-testid="box"
+>
+  Content
+</div>
+`;
+
+exports[`Box should support common flex behavior 39`] = `
+<div
+  class="rmd-box rmd-box--wrap rmd-box--padded rmd-box--align-end rmd-box--justify-center"
+  data-testid="box"
+>
+  Content
+</div>
+`;
+
+exports[`Box should support common flex behavior 40`] = `
+<div
+  class="rmd-box rmd-box--wrap rmd-box--padded rmd-box--align-end rmd-box--justify-end"
+  data-testid="box"
+>
+  Content
+</div>
+`;
+
+exports[`Box should support common flex behavior 41`] = `
+<div
+  class="rmd-box rmd-box--wrap rmd-box--padded rmd-box--align-end rmd-box--justify-end"
+  data-testid="box"
+>
+  Content
+</div>
+`;
+
+exports[`Box should support common flex behavior 42`] = `
+<div
+  class="rmd-box rmd-box--wrap rmd-box--padded rmd-box--align-end rmd-box--justify-stretch"
+  data-testid="box"
+>
+  Content
+</div>
+`;
+
+exports[`Box should support common flex behavior 43`] = `
+<div
+  class="rmd-box rmd-box--wrap rmd-box--padded rmd-box--align-end rmd-box--justify-between"
+  data-testid="box"
+>
+  Content
+</div>
+`;
+
+exports[`Box should support common flex behavior 44`] = `
+<div
+  class="rmd-box rmd-box--wrap rmd-box--padded rmd-box--align-end rmd-box--justify-around"
+  data-testid="box"
+>
+  Content
+</div>
+`;
+
+exports[`Box should support common flex behavior 45`] = `
+<div
+  class="rmd-box rmd-box--wrap rmd-box--padded rmd-box--align-end rmd-box--justify-evenly"
+  data-testid="box"
+>
+  Content
+</div>
+`;
+
+exports[`Box should support common flex behavior 46`] = `
+<div
+  class="rmd-box rmd-box--wrap rmd-box--padded rmd-box--align-stretch rmd-box--justify-start"
+  data-testid="box"
+>
+  Content
+</div>
+`;
+
+exports[`Box should support common flex behavior 47`] = `
+<div
+  class="rmd-box rmd-box--wrap rmd-box--padded rmd-box--align-stretch rmd-box--justify-start"
+  data-testid="box"
+>
+  Content
+</div>
+`;
+
+exports[`Box should support common flex behavior 48`] = `
+<div
+  class="rmd-box rmd-box--wrap rmd-box--padded rmd-box--align-stretch rmd-box--justify-center"
+  data-testid="box"
+>
+  Content
+</div>
+`;
+
+exports[`Box should support common flex behavior 49`] = `
+<div
+  class="rmd-box rmd-box--wrap rmd-box--padded rmd-box--align-stretch rmd-box--justify-end"
+  data-testid="box"
+>
+  Content
+</div>
+`;
+
+exports[`Box should support common flex behavior 50`] = `
+<div
+  class="rmd-box rmd-box--wrap rmd-box--padded rmd-box--align-stretch rmd-box--justify-end"
+  data-testid="box"
+>
+  Content
+</div>
+`;
+
+exports[`Box should support common flex behavior 51`] = `
+<div
+  class="rmd-box rmd-box--wrap rmd-box--padded rmd-box--align-stretch rmd-box--justify-stretch"
+  data-testid="box"
+>
+  Content
+</div>
+`;
+
+exports[`Box should support common flex behavior 52`] = `
+<div
+  class="rmd-box rmd-box--wrap rmd-box--padded rmd-box--align-stretch rmd-box--justify-between"
+  data-testid="box"
+>
+  Content
+</div>
+`;
+
+exports[`Box should support common flex behavior 53`] = `
+<div
+  class="rmd-box rmd-box--wrap rmd-box--padded rmd-box--align-stretch rmd-box--justify-around"
+  data-testid="box"
+>
+  Content
+</div>
+`;
+
+exports[`Box should support common flex behavior 54`] = `
+<div
+  class="rmd-box rmd-box--wrap rmd-box--padded rmd-box--align-stretch rmd-box--justify-evenly"
+  data-testid="box"
+>
+  Content
+</div>
+`;

package/src/box/_box.scss

@@ -56,7 +56,7 @@ $variables: (gap, padding, item-min-size, columns);
 
 @mixin custom-grid($min: null, $padding: null, $gap: null) {
   @if $min {
-    @include set-var(min-size, $min);
+    @include set-var(item-min-size, $min);
   }
 
   @if $padding {