@react-md/core 1.0.0-next.2 → 1.0.0-next.20

package/src/app-bar/_app-bar.scss

@@ -1,248 +0,0 @@
-@use "sass:map";
-
-@use "../utils";
-@use "../box-shadows";
-@use "../interaction/interaction";
-@use "../theme/a11y";
-@use "../theme/theme";
-@use "../button/button";
-@use "../typography/typography";
-
-$disable-everything: false !default;
-$disable-fixed: false !default;
-$disable-sticky: false !default;
-$disable-surface-theme: $disable-everything !default;
-$disable-dense-theme: false !default;
-$disable-prominent-theme: false !default;
-$disable-prominent-dense-theme: false !default;
-$disable-scrollbar-offset: false !default;
-$disable-static-scrollbar-offset: false !default;
-$disable-primary-interaction-colors: interaction.$light-surface-base-background-color
-  == interaction.$dark-surface-base-background-color !default;
-$disable-secondary-interaction-colors: interaction.$light-surface-base-background-color
-  == interaction.$dark-surface-base-background-color !default;
-
-$disable-title: false !default;
-
-$gap: 0.25rem !default;
-$height: 3.5rem !default;
-$dense-height: 3rem !default;
-$prominent-height: $height * 2 !default;
-$prominent-dense-height: $dense-height * 2 !default;
-
-$fixed-z-index: 10 !default;
-$fixed-elevation: 2 !default;
-$fixed-positions: top bottom !default;
-
-$light-theme-surface-background-color: theme.$light-theme-surface-color !default;
-$light-theme-surface-color: a11y.contrast-color(
-  $light-theme-surface-background-color
-) !default;
-$dark-theme-surface-background-color: if(
-  theme.$disable-dark-elevation,
-  theme.$dark-theme-surface-color,
-  map.get(theme.$dark-elevation-colors, $fixed-elevation)
-) !default;
-$dark-theme-surface-color: #fff !default;
-
-$surface-background-color: theme.get-default-color(
-  $light-theme-surface-background-color,
-  $dark-theme-surface-background-color
-) !default;
-$surface-color: theme.get-default-color(
-  $light-theme-surface-color,
-  $dark-theme-surface-color
-) !default;
-
-$horizontal-padding: 0.25rem !default;
-$vertical-padding: 0 !default;
-
-$keyline: 1rem !default;
-$title-keyline: 4.5rem !default;
-
-$variables: (height, surface-background-color, surface-color);
-
-@function get-var($name, $fallback: null) {
-  $var: utils.get-var-name($variables, $name, "app-bar");
-  @if $fallback {
-    @return var(#{$var}, #{$fallback});
-  }
-
-  @return var(#{$var});
-}
-
-@mixin set-var($name, $value) {
-  @if $value {
-    #{utils.get-var-name($variables, $name, "app-bar")}: #{$value};
-  }
-}
-
-@mixin use-var($property, $name: $property, $fallback: null) {
-  #{$property}: get-var($name, $fallback);
-}
-
-@mixin use-light-theme {
-  @if not $disable-surface-theme {
-    @include set-var(
-      surface-background-color,
-      $light-theme-surface-background-color
-    );
-    @include set-var(surface-color, $light-theme-surface-color);
-  }
-}
-
-@mixin use-dark-theme {
-  @if not $disable-surface-theme {
-    @include set-var(
-      surface-background-color,
-      $dark-theme-surface-background-color
-    );
-    @include set-var(surface-color, $dark-theme-surface-color);
-  }
-}
-
-@mixin dense {
-  @include set-var(height, $dense-height);
-}
-
-@mixin variables {
-  @if not $disable-everything {
-    @include set-var(height, $height);
-    @include set-var(surface-background-color, $surface-background-color);
-    @include set-var(surface-color, $surface-color);
-  }
-}
-
-@mixin styles {
-  @if not $disable-everything {
-    @include theme.default-system-theme {
-      @include use-dark-theme;
-    }
-
-    .rmd-app-bar {
-      @include use-var(height);
-
-      align-items: center;
-      display: flex;
-      // since app bars can appear a lot in full page dialogs, setting these flex
-      // values allows it be be a direct replacement of the `DialogHeader`
-      // component without all the offsets and additional styles needed for fixed
-      // app bars.
-      flex: 0 0 auto;
-      gap: $gap;
-      padding: $vertical-padding $horizontal-padding;
-      width: 100%;
-
-      @if not $disable-fixed or not $disable-sticky {
-        &--fixed {
-          left: 0;
-          position: fixed;
-          // Note: right and width were added to support the main navigation
-          // behavior with toggleable full-height navigation
-          right: 0;
-          width: auto;
-          z-index: $fixed-z-index;
-        }
-
-        @if $fixed-elevation and $fixed-elevation != 0 {
-          &--elevated {
-            @include box-shadows.box-shadow(
-              $fixed-elevation,
-              $disable-colors: true
-            );
-          }
-        }
-
-        @each $position in $fixed-positions {
-          &--#{$position} {
-            #{$position}: 0;
-          }
-        }
-
-        @if not $disable-sticky {
-          &--sticky {
-            position: sticky;
-          }
-        }
-      }
-
-      &--auto {
-        // do not set variable so that child AppBar can maintain their height as needed
-        height: auto;
-      }
-
-      &--stacked {
-        flex-direction: column;
-        gap: 0;
-        padding: 0;
-      }
-
-      @if not $disable-dense-theme {
-        &--dense {
-          @include set-var(height, $dense-height);
-        }
-      }
-
-      @if not $disable-prominent-theme {
-        &--prominent {
-          @include set-var(height, $prominent-height);
-        }
-      }
-
-      @if not $disable-prominent-dense-theme {
-        &--prominent-dense {
-          @include set-var(height, $prominent-dense-height);
-        }
-      }
-
-      @if not $disable-surface-theme {
-        &--surface {
-          @include use-var(background-color, surface-background-color);
-          @include use-var(color, surface-color);
-        }
-      }
-
-      @if not $disable-scrollbar-offset {
-        &--scrollbar-offset {
-          @include utils.rtl {
-            margin-right: calc(-1 * #{utils.scrollbar-size()});
-          }
-
-          padding-right: calc(
-            #{$horizontal-padding} + #{utils.scrollbar-size()}
-          );
-        }
-
-        @if not $disable-static-scrollbar-offset {
-          &--static-scrollbar-offset {
-            width: calc(100% + utils.scrollbar-size());
-          }
-        }
-      }
-    }
-
-    @if not $disable-title {
-      .rmd-app-bar-title {
-        @include utils.auto-rtl(margin-left, $keyline - $horizontal-padding);
-
-        flex: 1 1 auto;
-        margin-bottom: 0;
-        margin-top: 0;
-
-        &--keyline {
-          @include utils.auto-rtl(
-            margin-left,
-            $title-keyline - $horizontal-padding
-          );
-        }
-
-        &--nav-keyline {
-          @include utils.auto-rtl(
-            margin-left,
-            $title-keyline - $horizontal-padding - $gap - button.$icon-size
-          );
-        }
-      }
-    }
-  }
-}

package/src/avatar/__tests__/Avatar.tsx

@@ -1,75 +0,0 @@
-import { describe, expect, it } from "@jest/globals";
-import { createRef } from "react";
-import { render, screen } from "../../test-utils/index.js";
-
-import { Avatar } from "../Avatar.js";
-import { avatarImage } from "../styles.js";
-
-describe("Avatar", () => {
-  it("should apply the correct styling, HTML attributes, and allow a ref", () => {
-    const ref = createRef<HTMLSpanElement>();
-    const props = {
-      "data-testid": "avatar",
-      ref,
-    } as const;
-
-    const { rerender } = render(<Avatar {...props} />);
-    const avatar = screen.getByTestId("avatar");
-    expect(ref.current).toBeInstanceOf(HTMLSpanElement);
-    expect(ref.current).toBe(avatar);
-    expect(avatar).toMatchSnapshot();
-
-    rerender(
-      <Avatar
-        {...props}
-        style={{ color: "red" }}
-        className="custom-class-name"
-      />
-    );
-    expect(avatar).toMatchSnapshot();
-
-    rerender(<Avatar {...props} color="primary" />);
-    expect(avatar).toMatchSnapshot();
-  });
-
-  it("should render an img if a src or imgProps are provided", () => {
-    const props = {
-      "data-testid": "avatar",
-      src: "/some-image.png",
-    } as const;
-    const { rerender } = render(<Avatar {...props} />);
-
-    const avatar = screen.getByTestId("avatar");
-    const img = screen.getByRole("img");
-    expect(img).toHaveAttribute("src", props.src);
-    expect(img).toHaveAttribute("alt", "");
-    expect(avatar).toMatchSnapshot();
-
-    rerender(<Avatar {...props} referrerPolicy="no-referrer" />);
-    expect(img).toHaveAttribute("referrerPolicy", "no-referrer");
-    expect(avatar).toMatchSnapshot();
-
-    const ref = createRef<HTMLImageElement>();
-    rerender(
-      <Avatar
-        {...props}
-        imgProps={{
-          ref,
-          src: "/another-image.png",
-          style: { opacity: 0.5 },
-          className: "custom-class-name",
-        }}
-      />
-    );
-    expect(ref.current).toBeInstanceOf(HTMLImageElement);
-    expect(ref.current).toBe(img);
-    expect(img).toHaveAttribute("src", "/another-image.png");
-    expect(avatar).toMatchSnapshot();
-  });
-
-  describe("styling utils", () => {
-    it("should allow the avatarImage to be called without any parameters", () => {
-      expect(avatarImage()).toMatchSnapshot();
-    });
-  });
-});

package/src/avatar/__tests__/__snapshots__/Avatar.tsx.snap

@@ -1,73 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Avatar should apply the correct styling, HTML attributes, and allow a ref 1`] = `
-<span
-  class="rmd-avatar"
-  data-testid="avatar"
-  role="presentation"
-/>
-`;
-
-exports[`Avatar should apply the correct styling, HTML attributes, and allow a ref 2`] = `
-<span
-  class="rmd-avatar custom-class-name"
-  data-testid="avatar"
-  role="presentation"
-  style="color: red;"
-/>
-`;
-
-exports[`Avatar should apply the correct styling, HTML attributes, and allow a ref 3`] = `
-<span
-  class="rmd-avatar rmd-avatar--primary"
-  data-testid="avatar"
-  role="presentation"
-  style=""
-/>
-`;
-
-exports[`Avatar should render an img if a src or imgProps are provided 1`] = `
-<span
-  class="rmd-avatar"
-  data-testid="avatar"
-  role="presentation"
->
-  <img
-    alt=""
-    class="rmd-avatar__image"
-    src="/some-image.png"
-  />
-</span>
-`;
-
-exports[`Avatar should render an img if a src or imgProps are provided 2`] = `
-<span
-  class="rmd-avatar"
-  data-testid="avatar"
-  role="presentation"
->
-  <img
-    alt=""
-    class="rmd-avatar__image"
-    referrerpolicy="no-referrer"
-    src="/some-image.png"
-  />
-</span>
-`;
-
-exports[`Avatar should render an img if a src or imgProps are provided 3`] = `
-<span
-  class="rmd-avatar"
-  data-testid="avatar"
-  role="presentation"
->
-  <img
-    alt=""
-    class="rmd-avatar__image custom-class-name"
-    src="/another-image.png"
-    style="opacity: 0.5;"
-  />
-</span>
-`;
-
-exports[`Avatar styling utils should allow the avatarImage to be called without any parameters 1`] = `"rmd-avatar__image"`;

package/src/avatar/_avatar.scss

@@ -1,154 +0,0 @@
-@use "sass:map";
-@use "sass:math";
-@use "../utils";
-@use "../theme/colors";
-@use "../typography/typography";
-@use "../icon/icon";
-
-$disable-everything: false !default;
-$disable-icon: false !default;
-$disable-icon-size: false !default;
-$disable-image: false !default;
-$disable-auto-image: false !default;
-
-$color: colors.$grey-100 !default;
-$background-color: colors.$grey-700 !default;
-$line-height: map.get(typography.$subtitle-1-styles, line-height) !default;
-$border-color: transparent !default;
-$border-radius: 50% !default;
-$size: 2.5rem !default;
-$font-size: 1.5rem !default;
-$icon-sized-size: icon.get-var(size) !default;
-$icon-sized-font-size: 0.75rem !default;
-
-$default-colors: (
-  red: colors.$red-a-700 colors.$red-50,
-  pink: colors.$pink-600 colors.$white,
-  purple: colors.$purple-700 colors.$purple-100,
-  deep-purple: colors.$deep-purple-900 colors.$deep-purple-100,
-  indigo: colors.$indigo-600 colors.$indigo-100,
-  blue: colors.$blue-a-700 colors.$white,
-  light-blue: colors.$light-blue-300 colors.$deep-purple-900,
-  cyan: colors.$cyan-400 colors.$teal-900,
-  teal: colors.$teal-a-400 colors.$teal-900,
-  green: colors.$green-800 colors.$green-50,
-  light-green: colors.$light-green-300 colors.$green-900,
-  lime: colors.$lime-400 colors.$teal-800,
-  yellow: colors.$yellow-a-200 colors.$brown-500,
-  amber: colors.$amber-400 colors.$brown-800,
-  orange: colors.$orange-600 colors.$grey-900,
-  deep-orange: colors.$deep-orange-a-400 colors.$grey-900,
-  brown: colors.$brown-500 colors.$brown-50,
-  grey: colors.$grey-700 colors.$grey-100,
-  blue-grey: colors.$blue-grey-700 colors.$blue-grey-50,
-);
-
-$colors: $default-colors !default;
-
-$variables: (
-  background-color,
-  color,
-  border-color,
-  border-radius,
-  size,
-  font-size
-);
-
-@function get-var($name, $fallback: null) {
-  $var: utils.get-var-name($variables, $name, "avatar");
-  @if $fallback {
-    @return var(#{$var}, #{$fallback});
-  }
-
-  @return var(#{$var});
-}
-
-@mixin set-var($name, $value) {
-  @if $value {
-    #{utils.get-var-name($variables, $name, "avatar")}: #{$value};
-  }
-}
-
-@mixin use-var($property, $name: $property, $fallback: null) {
-  #{$property}: get-var($name, $fallback);
-}
-
-@mixin custom-color($name, $color, $background-color, $disable-prefix: false) {
-  $class-name: if($disable-prefix, $name, ".rmd-avatar--#{$name}");
-
-  #{$class-name} {
-    @include set-var(background-color, $background-color);
-    @include set-var(color, $color);
-  }
-}
-
-@mixin variables {
-  @if not $disable-everything {
-    @include set-var(background-color, $background-color);
-    @include set-var(color, $color);
-    @include set-var(border-color, $border-color);
-    @include set-var(border-radius, $border-radius);
-    @include set-var(size, $size);
-    @include set-var(font-size, $font-size);
-  }
-}
-
-@mixin styles {
-  @if not $disable-everything {
-    .rmd-avatar {
-      @if not $disable-icon {
-        @include icon.set-var(color, currentcolor);
-      }
-      @include utils.map-to-styles(typography.$base-font-styles);
-      @include use-var(background-color);
-      @include use-var(border-radius);
-      @include use-var(color);
-      @include use-var(font-size);
-      @include use-var(height, size);
-      @include use-var(width, size);
-
-      align-items: center;
-      border: 1px solid get-var(border-color);
-      display: inline-flex;
-      flex-shrink: 0;
-      justify-content: center;
-      line-height: $line-height;
-      overflow: hidden;
-
-      @if not $disable-icon-size {
-        &--icon {
-          @include set-var(size, $icon-sized-size);
-
-          font-size: $icon-sized-font-size;
-        }
-      }
-
-      @if not $disable-image {
-        &__image {
-          height: 100%;
-          width: auto;
-        }
-      }
-
-      @if not $disable-auto-image {
-        img {
-          height: 100%;
-          width: auto;
-        }
-      }
-
-      @each $name, $values in $colors {
-        @if length($values) != 2 {
-          @error 'Unable to create an avatar color because the list of values is not of length 2. The first value should be the background-color and the second should be the text color. "#{$values}"';
-        }
-
-        @include custom-color(
-          "&--#{$name}",
-          nth($values, 2),
-          nth($values, 1),
-          true
-        );
-      }
-    }
-  }
-}

package/src/badge/__tests__/Badge.tsx

@@ -1,42 +0,0 @@
-import { describe, expect, it } from "@jest/globals";
-import { createRef } from "react";
-import { render, screen } from "../../test-utils/index.js";
-
-import { Badge } from "../Badge.js";
-
-describe("Badge", () => {
-  it("should apply the correct styling, HTML attributes, and allow a ref", () => {
-    const ref = createRef<HTMLButtonElement>();
-    const props = {
-      ref,
-      children: 3,
-    } as const;
-    const { rerender } = render(<Badge {...props} />);
-
-    const badge = screen.getByText("3");
-    expect(ref.current).toBeInstanceOf(HTMLSpanElement);
-    expect(ref.current).toBe(badge);
-    expect(badge).toMatchSnapshot();
-
-    rerender(
-      <Badge
-        {...props}
-        style={{ color: "white" }}
-        className="custom-class-name"
-      />
-    );
-    expect(badge).toMatchSnapshot();
-
-    rerender(<Badge {...props} theme="primary" />);
-    expect(badge).toMatchSnapshot();
-
-    rerender(<Badge {...props} theme="secondary" />);
-    expect(badge).toMatchSnapshot();
-
-    rerender(<Badge {...props} theme="greyscale" />);
-    expect(badge).toMatchSnapshot();
-
-    rerender(<Badge {...props} theme="clear" />);
-    expect(badge).toMatchSnapshot();
-  });
-});

package/src/badge/__tests__/__snapshots__/Badge.tsx.snap

@@ -1,54 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Badge should apply the correct styling, HTML attributes, and allow a ref 1`] = `
-<span
-  class="rmd-badge rmd-badge--greyscale"
->
-  3
-</span>
-`;
-
-exports[`Badge should apply the correct styling, HTML attributes, and allow a ref 2`] = `
-<span
-  class="rmd-badge rmd-badge--greyscale custom-class-name"
-  style="color: white;"
->
-  3
-</span>
-`;
-
-exports[`Badge should apply the correct styling, HTML attributes, and allow a ref 3`] = `
-<span
-  class="rmd-badge rmd-background-container rmd-primary-container"
-  style=""
->
-  3
-</span>
-`;
-
-exports[`Badge should apply the correct styling, HTML attributes, and allow a ref 4`] = `
-<span
-  class="rmd-badge rmd-background-container rmd-secondary-container"
-  style=""
->
-  3
-</span>
-`;
-
-exports[`Badge should apply the correct styling, HTML attributes, and allow a ref 5`] = `
-<span
-  class="rmd-badge rmd-badge--greyscale"
-  style=""
->
-  3
-</span>
-`;
-
-exports[`Badge should apply the correct styling, HTML attributes, and allow a ref 6`] = `
-<span
-  class="rmd-badge"
-  style=""
->
-  3
-</span>
-`;