@react-md/core 1.0.0-next.15 → 1.0.0-next.16

package/src/button/_button.scss

@@ -1,330 +0,0 @@
-@use "sass:list";
-@use "sass:map";
-@use "../utils";
-@use "../theme/a11y";
-@use "../theme/theme";
-@use "../icon/icon";
-@use "../box-shadows";
-@use "../media-queries/media-queries";
-@use "../interaction/interaction";
-@use "../progress/progress";
-@use "../overlay/overlay";
-@use "../typography/typography";
-
-$disable-everything: false !default;
-$disable-text: false !default;
-$disable-icon: false !default;
-$disable-icon-square: false !default;
-$disable-contained: false !default;
-$disable-contained-pressed-elevation: false !default;
-$disable-contained-interaction-colors: interaction.$light-surface-base-background-color
-  == interaction.$dark-surface-base-background-color !default;
-$disable-floating: false !default;
-$disable-floating-absolute-position: false !default;
-$disable-circular-progress: progress.$disable-circular !default;
-$disable-async: $disable-circular-progress !default;
-$disable-unstyled-utility-class: false !default;
-
-$text-border-radius: 0.5rem !default;
-$text-horizontal-padding: 1rem !default;
-$text-vertical-padding: 0 !default;
-$text-min-height: 2.25rem !default;
-$text-min-width: 4rem !default;
-$text-icon-size: 1.125rem !default;
-
-$icon-border-radius: 50% !default;
-$icon-square-border-radius: $text-border-radius !default;
-$icon-size: auto !default;
-$icon-small-size: icon.$size - 0.25rem !default;
-$icon-large-size: icon.$size + 0.25rem !default;
-$icon-font-size: icon.$size !default;
-$icon-padding: 0.5em !default;
-
-$contained-elevation: 2 !default;
-$contained-pressed-elevation: 4 !default;
-$clear-contained-background-color: theme.$light-theme-surface-color !default;
-$clear-contained-color: a11y.contrast-color(
-  $clear-contained-background-color
-) !default;
-
-$circular-progress-size: icon.get-var(size) !default;
-
-$floating-margin: 1.5rem !default;
-$floating-z-index: utils.$temporary-element-z-index !default;
-// set this below the app bar
-$floating-absolute-z-index: 5 !default;
-$floating-positions: (
-  tl: (
-    left: $floating-margin,
-    top: $floating-margin,
-  ),
-  tr: (
-    right: $floating-margin,
-    top: $floating-margin,
-  ),
-  bl: (
-    bottom: $floating-margin,
-    left: $floating-margin,
-  ),
-  br: (
-    bottom: $floating-margin,
-    right: $floating-margin,
-  ),
-) !default;
-
-$variables: (
-  background-color,
-  color,
-  border-radius,
-  contained-background-color,
-  contained-color,
-  text-horizontal-padding,
-  text-vertical-padding,
-  text-min-height,
-  text-min-width,
-  icon-size,
-  icon-font-size,
-  icon-border-radius,
-  fab-offset
-);
-
-@function get-var($name, $fallback: null) {
-  $var: utils.get-var-name($variables, $name, "button");
-  @if $fallback {
-    @return var(#{$var}, #{$fallback});
-  }
-
-  @return var(#{$var});
-}
-
-@mixin set-var($name, $value) {
-  @if $value {
-    #{utils.get-var-name($variables, $name, "button")}: #{$value};
-  }
-}
-
-@mixin use-var($property, $name: $property, $fallback: null) {
-  #{$property}: get-var($name, $fallback);
-}
-
-@mixin unstyled(
-  $hoverable: false,
-  $css-modules: false,
-  $box-shadow: interaction.$focus-box-shadow
-) {
-  @include interaction.surface(
-    $hoverable: $hoverable,
-    $css-modules: $css-modules,
-    $box-shadow: $box-shadow
-  );
-
-  background-color: transparent;
-  border-width: 0;
-  display: inline-flex;
-}
-
-@mixin text-styles {
-  @include icon.set-var(size, $text-icon-size);
-  @include set-var(border-radius, $text-border-radius);
-  @include utils.map-to-styles(typography.$button-styles);
-  @include use-var(min-height, text-min-height);
-  @include use-var(min-width, text-min-width);
-
-  border: 0;
-  padding: get-var(text-vertical-padding) get-var(text-horizontal-padding);
-}
-
-@mixin variables {
-  @if not $disable-everything {
-    @include set-var(background-color, transparent);
-    @if not $disable-contained {
-      @include set-var(
-        contained-background-color,
-        $clear-contained-background-color
-      );
-      @include set-var(contained-color, $clear-contained-color);
-    }
-
-    @if not $disable-text {
-      @include set-var(text-horizontal-padding, $text-horizontal-padding);
-      @include set-var(text-vertical-padding, $text-vertical-padding);
-      @include set-var(text-min-height, $text-min-height);
-      @include set-var(text-min-width, $text-min-width);
-    }
-
-    @if not $disable-icon {
-      @include set-var(icon-size, $icon-size);
-      @include set-var(icon-font-size, $icon-font-size);
-      @include set-var(icon-border-radius, $icon-border-radius);
-    }
-
-    @if not $disable-floating {
-      @include set-var(fab-offset, utils.scrollbar-size());
-    }
-  }
-}
-
-@mixin styles($disable-layer: false) {
-  @if not $disable-everything {
-    @include utils.optional-layer(button, $disable-layer) {
-      .rmd-button {
-        @if not $disable-circular-progress {
-          @include progress.set-var(circular-size, $circular-progress-size);
-        }
-
-        @include icon.set-var(color, currentcolor);
-        @include icon.use-var(gap, spacing);
-        @include use-var(background-color);
-        @include use-var(color);
-        @include use-var(border-radius);
-
-        align-items: center;
-        border-width: 0;
-        display: inline-flex;
-        flex-shrink: 0;
-        justify-content: center;
-
-        @if not $disable-text {
-          &--text {
-            @include text-styles;
-          }
-        }
-
-        @if not $disable-icon {
-          &--icon {
-            @include icon.set-var(size, 1em);
-            @include set-var(border-radius, get-var(icon-border-radius));
-            @include use-var(font-size, icon-font-size);
-            @include use-var(height, icon-size);
-            @include use-var(width, icon-size);
-
-            padding: $icon-padding;
-          }
-
-          @if not $disable-icon-square {
-            &--icon-square {
-              @include set-var(icon-border-radius, $icon-square-border-radius);
-            }
-          }
-
-          @if $icon-small-size {
-            &--small {
-              font-size: $icon-small-size;
-            }
-          }
-
-          @if $icon-large-size {
-            &--large {
-              font-size: $icon-large-size;
-            }
-          }
-        }
-
-        &--responsive {
-          @include media-queries.tablet-media {
-            @include text-styles;
-
-            height: auto;
-            width: auto;
-          }
-        }
-
-        &:disabled,
-        &--disabled {
-          @include theme.theme-set-var(outline-color, currentcolor);
-          // this was added for the file input
-          @include interaction.surface-disabled($clickable: false);
-        }
-
-        @if not $disable-contained {
-          &--contained {
-            @include box-shadows.elevation-transition(
-              $contained-elevation,
-              if(
-                $disable-contained-pressed-elevation,
-                null,
-                $contained-pressed-elevation
-              ),
-              "&.rmd-button--pressed",
-              $pseudo-before: false,
-              $position-relative: false
-            );
-
-            // contained buttons should _normally_ always force dark background
-            // colors for the interaction states This means use the default light
-            // theme since it is based off of the root background color
-            @if not $disable-contained-interaction-colors {
-              @include interaction.use-light-surface;
-            }
-
-            @include set-var(
-              background-color,
-              get-var(contained-background-color)
-            );
-            @include set-var(color, get-var(contained-color));
-          }
-        }
-
-        @if not $disable-async {
-          &--async {
-            @include overlay.set-var(background-color, transparent);
-            @include progress.set-var(color, currentcolor);
-            // @include progress.set-var(background-color, currentcolor);
-          }
-
-          &--async-overlay {
-            > * {
-              opacity: 0;
-            }
-          }
-        }
-      }
-
-      @if not $disable-unstyled-utility-class {
-        .rmd-button-unstyled {
-          @include unstyled;
-        }
-      }
-
-      @if not $disable-floating {
-        .rmd-fab {
-          position: fixed;
-          z-index: $floating-z-index;
-
-          @if not $disable-floating-absolute-position {
-            &--absolute {
-              @include set-var(fab-offset, 0px);
-
-              position: absolute;
-              z-index: $floating-absolute-z-index;
-            }
-          }
-
-          @each $suffix, $styles in $floating-positions {
-            &--#{$suffix} {
-              @each $property, $value in $styles {
-                @if $property == left {
-                  @include utils.rtl {
-                    left: auto;
-                    right: calc(#{$value} + #{get-var(fab-offset)});
-                  }
-
-                  left: $value;
-                } @else if $property == right {
-                  @include utils.rtl {
-                    left: $value;
-                    right: auto;
-                  }
-
-                  right: calc(#{$value} + #{get-var(fab-offset)});
-                } @else {
-                  #{$property}: #{$value};
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}

package/src/card/__tests__/Card.tsx

@@ -1,37 +0,0 @@
-import { describe, expect, it } from "@jest/globals";
-import { createRef } from "react";
-import { render, screen } from "../../test-utils/index.js";
-
-import { Card } from "../Card.js";
-
-describe("Card", () => {
-  it("should apply the correct styling, HTML attributes, and allow a ref", () => {
-    const ref = createRef<HTMLDivElement>();
-    const props = {
-      "data-testid": "card",
-      ref,
-      children: "Content",
-    } as const;
-    const { rerender } = render(<Card {...props} />);
-
-    const card = screen.getByTestId("card");
-    expect(ref.current).toBeInstanceOf(HTMLDivElement);
-    expect(ref.current).toBe(card);
-    expect(card).toMatchSnapshot();
-
-    rerender(
-      <Card
-        {...props}
-        style={{ color: "white" }}
-        className="custom-class-name"
-      />
-    );
-    expect(card).toMatchSnapshot();
-
-    rerender(<Card {...props} bordered raisable />);
-    expect(card).toMatchSnapshot();
-
-    rerender(<Card {...props} fullWidth />);
-    expect(card).toMatchSnapshot();
-  });
-});

package/src/card/__tests__/CardContent.tsx

@@ -1,40 +0,0 @@
-import { describe, expect, it } from "@jest/globals";
-import { createRef } from "react";
-import { render, screen } from "../../test-utils/index.js";
-
-import { CardContent } from "../CardContent.js";
-
-describe("CardContent", () => {
-  it("should apply the correct styling, HTML attributes, and allow a ref", () => {
-    const ref = createRef<HTMLDivElement>();
-    const props = {
-      "data-testid": "content",
-      ref,
-      children: "Content",
-    } as const;
-    const { rerender } = render(<CardContent {...props} />);
-
-    const card = screen.getByTestId("content");
-    expect(ref.current).toBeInstanceOf(HTMLDivElement);
-    expect(ref.current).toBe(card);
-    expect(card).toMatchSnapshot();
-
-    rerender(
-      <CardContent
-        {...props}
-        style={{ color: "white" }}
-        className="custom-class-name"
-      />
-    );
-    expect(card).toMatchSnapshot();
-
-    rerender(<CardContent {...props} disablePadding />);
-    expect(card).toMatchSnapshot();
-
-    rerender(<CardContent {...props} disableSecondaryColor />);
-    expect(card).toMatchSnapshot();
-
-    rerender(<CardContent {...props} disableLastChildPadding />);
-    expect(card).toMatchSnapshot();
-  });
-});

package/src/card/__tests__/CardFooter.tsx

@@ -1,34 +0,0 @@
-import { describe, expect, it } from "@jest/globals";
-import { createRef } from "react";
-import { render, screen } from "../../test-utils/index.js";
-
-import { CardFooter } from "../CardFooter.js";
-
-describe("CardFooter", () => {
-  it("should apply the correct styling, HTML attributes, and allow a ref", () => {
-    const ref = createRef<HTMLDivElement>();
-    const props = {
-      "data-testid": "footer",
-      ref,
-      children: "Footer",
-    } as const;
-    const { rerender } = render(<CardFooter {...props} />);
-
-    const footer = screen.getByTestId("footer");
-    expect(ref.current).toBeInstanceOf(HTMLDivElement);
-    expect(ref.current).toBe(footer);
-    expect(footer).toMatchSnapshot();
-
-    rerender(
-      <CardFooter
-        {...props}
-        style={{ color: "white" }}
-        className="custom-class-name"
-      />
-    );
-    expect(footer).toMatchSnapshot();
-
-    rerender(<CardFooter {...props} justify="space-between" />);
-    expect(footer).toMatchSnapshot();
-  });
-});

package/src/card/__tests__/CardHeader.tsx

@@ -1,66 +0,0 @@
-import { describe, expect, it } from "@jest/globals";
-import { createRef } from "react";
-import { render, screen } from "../../test-utils/index.js";
-
-import { Button } from "../../button/Button.js";
-import { CardHeader } from "../CardHeader.js";
-import { CardSubtitle } from "../CardSubtitle.js";
-import { CardTitle } from "../CardTitle.js";
-
-describe("CardHeader", () => {
-  it("should apply the correct styling, HTML attributes, and allow a ref", () => {
-    const ref = createRef<HTMLDivElement>();
-    const props = {
-      "data-testid": "header",
-      ref,
-      children: "Header",
-    } as const;
-    const { rerender } = render(<CardHeader {...props} />);
-
-    const header = screen.getByTestId("header");
-    expect(ref.current).toBeInstanceOf(HTMLElement);
-    expect(ref.current).toBe(header);
-    expect(header).toMatchSnapshot();
-
-    rerender(
-      <CardHeader
-        {...props}
-        style={{ color: "white" }}
-        className="custom-class-name"
-      />
-    );
-    expect(header).toMatchSnapshot();
-
-    const contentRef = createRef<HTMLDivElement>();
-    rerender(
-      <CardHeader
-        {...props}
-        contentProps={{
-          ref: contentRef,
-          style: { color: "orange" },
-          className: "custom-class-name",
-        }}
-      />
-    );
-    expect(contentRef.current).toBeInstanceOf(HTMLDivElement);
-    expect(header).toMatchSnapshot();
-  });
-
-  it("should allow addons before and after the children", () => {
-    render(
-      <CardHeader
-        data-testid="header"
-        beforeAddon={<img src="/some-image.png" alt="" />}
-        afterAddon={
-          <Button buttonType="icon" aria-label="Expand" theme="clear" />
-        }
-      >
-        <CardTitle>Elizabeth Park</CardTitle>
-        <CardSubtitle>Work contact</CardSubtitle>
-      </CardHeader>
-    );
-
-    const header = screen.getByTestId("header");
-    expect(header).toMatchSnapshot();
-  });
-});

package/src/card/__tests__/CardSubtitle.tsx

@@ -1,30 +0,0 @@
-import { describe, expect, it } from "@jest/globals";
-import { createRef } from "react";
-import { render, screen } from "../../test-utils/index.js";
-
-import { CardSubtitle } from "../CardSubtitle.js";
-
-describe("CardSubtitle", () => {
-  it("should apply the correct styling, HTML attributes, and allow a ref", () => {
-    const ref = createRef<HTMLHeadingElement>();
-    const props = {
-      ref,
-      children: "Subtitle",
-    } as const;
-    const { rerender } = render(<CardSubtitle {...props} />);
-
-    const subtitle = screen.getByRole("heading", { name: "Subtitle" });
-    expect(ref.current).toBeInstanceOf(HTMLHeadingElement);
-    expect(ref.current).toBe(subtitle);
-    expect(subtitle).toMatchSnapshot();
-
-    rerender(
-      <CardSubtitle
-        {...props}
-        style={{ color: "white" }}
-        className="custom-class-name"
-      />
-    );
-    expect(subtitle).toMatchSnapshot();
-  });
-});

package/src/card/__tests__/CardTitle.tsx

@@ -1,30 +0,0 @@
-import { describe, expect, it } from "@jest/globals";
-import { createRef } from "react";
-import { render, screen } from "../../test-utils/index.js";
-
-import { CardTitle } from "../CardTitle.js";
-
-describe("CardTitle", () => {
-  it("should apply the correct styling, HTML attributes, and allow a ref", () => {
-    const ref = createRef<HTMLHeadingElement>();
-    const props = {
-      ref,
-      children: "Title",
-    } as const;
-    const { rerender } = render(<CardTitle {...props} />);
-
-    const subtitle = screen.getByRole("heading", { name: "Title" });
-    expect(ref.current).toBeInstanceOf(HTMLHeadingElement);
-    expect(ref.current).toBe(subtitle);
-    expect(subtitle).toMatchSnapshot();
-
-    rerender(
-      <CardTitle
-        {...props}
-        style={{ color: "white" }}
-        className="custom-class-name"
-      />
-    );
-    expect(subtitle).toMatchSnapshot();
-  });
-});

package/src/card/__tests__/ClickableCard.tsx

@@ -1,66 +0,0 @@
-import { describe, expect, it, jest } from "@jest/globals";
-import { createRef } from "react";
-import { fireEvent, render, screen } from "../../test-utils/index.js";
-import { ClickableCard } from "../ClickableCard.js";
-
-describe("ClickableCard", () => {
-  it("should apply the correct styling, HTMLAttributes, and allow a ref", () => {
-    const ref = createRef<HTMLDivElement>();
-    const props = {
-      "data-testid": "card",
-      ref,
-      onClick: jest.fn(),
-    } as const;
-    const { rerender } = render(<ClickableCard {...props} />);
-
-    const element = screen.getByTestId("card");
-    expect(ref.current).toBeInstanceOf(HTMLElement);
-    expect(ref.current).toBe(element);
-    expect(element).toMatchSnapshot();
-
-    rerender(
-      <ClickableCard
-        {...props}
-        style={{ color: "white" }}
-        className="custom-class-name"
-      />
-    );
-    expect(element).toMatchSnapshot();
-  });
-
-  it("should not have a tabIndex while disabled", () => {
-    render(<ClickableCard data-testid="card" disabled onClick={jest.fn()} />);
-    const card = screen.getByTestId("card");
-    expect(card).toHaveAttribute("aria-disabled");
-    expect(card).not.toHaveAttribute("tabIndex");
-  });
-
-  it("should keyboard click correctly", () => {
-    const onClick = jest.fn();
-    render(<ClickableCard data-testid="card" onClick={onClick} />);
-
-    const card = screen.getByTestId("card");
-    expect(onClick).not.toHaveBeenCalled();
-
-    fireEvent.keyDown(card, { key: " " });
-    expect(onClick).toHaveBeenCalledTimes(1);
-
-    fireEvent.keyDown(card, { key: "Enter" });
-    expect(onClick).toHaveBeenCalledTimes(2);
-  });
-
-  it("should not fire the click event while disabled", () => {
-    const onClick = jest.fn();
-    render(<ClickableCard data-testid="card" onClick={onClick} disabled />);
-    const card = screen.getByTestId("card");
-
-    fireEvent.click(card);
-    expect(onClick).toHaveBeenCalledTimes(0);
-
-    fireEvent.keyDown(card, { key: " " });
-    expect(onClick).toHaveBeenCalledTimes(0);
-
-    fireEvent.keyDown(card, { key: "Enter" });
-    expect(onClick).toHaveBeenCalledTimes(0);
-  });
-});

package/src/card/__tests__/__snapshots__/Card.tsx.snap

@@ -1,40 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Card should apply the correct styling, HTML attributes, and allow a ref 1`] = `
-<div
-  class="rmd-card rmd-card--shadowed"
-  data-testid="card"
->
-  Content
-</div>
-`;
-
-exports[`Card should apply the correct styling, HTML attributes, and allow a ref 2`] = `
-<div
-  class="rmd-card rmd-card--shadowed custom-class-name"
-  data-testid="card"
-  style="color: white;"
->
-  Content
-</div>
-`;
-
-exports[`Card should apply the correct styling, HTML attributes, and allow a ref 3`] = `
-<div
-  class="rmd-card rmd-card--bordered"
-  data-testid="card"
-  style=""
->
-  Content
-</div>
-`;
-
-exports[`Card should apply the correct styling, HTML attributes, and allow a ref 4`] = `
-<div
-  class="rmd-card rmd-card--shadowed rmd-card--full-width"
-  data-testid="card"
-  style=""
->
-  Content
-</div>
-`;