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

package/src/typography/__tests__/__snapshots__/Typography.tsx.snap

@@ -1,112 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Typography should be able to apply additional styles 1`] = `
-<p
-  class="rmd-typography rmd-typography--body-1 rmd-primary-color rmd-no-margin-top rmd-align-center rmd-overline rmd-capitalize rmd-italic rmd-semi-bold"
-  data-testid="text"
-/>
-`;
-
-exports[`Typography should be able to render as a custom component using the \`as\` prop 1`] = `
-<div
-  class="rmd-typography rmd-typography--body-1"
-  data-testid="text"
->
-  Custom!
-</div>
-`;
-
-exports[`Typography should default to rendering as a paragraph and body-1 styles 1`] = `
-<p
-  class="rmd-typography rmd-typography--body-1"
-  data-testid="text"
-/>
-`;
-
-exports[`Typography should render as the correct element based on the typography type 1`] = `
-<h1
-  class="rmd-typography rmd-typography--headline-1"
-  data-testid="text"
-/>
-`;
-
-exports[`Typography should render as the correct element based on the typography type 2`] = `
-<h2
-  class="rmd-typography rmd-typography--headline-2"
-  data-testid="text"
-/>
-`;
-
-exports[`Typography should render as the correct element based on the typography type 3`] = `
-<h3
-  class="rmd-typography rmd-typography--headline-3"
-  data-testid="text"
-/>
-`;
-
-exports[`Typography should render as the correct element based on the typography type 4`] = `
-<h4
-  class="rmd-typography rmd-typography--headline-4"
-  data-testid="text"
-/>
-`;
-
-exports[`Typography should render as the correct element based on the typography type 5`] = `
-<h5
-  class="rmd-typography rmd-typography--headline-5"
-  data-testid="text"
-/>
-`;
-
-exports[`Typography should render as the correct element based on the typography type 6`] = `
-<h6
-  class="rmd-typography rmd-typography--headline-6"
-  data-testid="text"
-/>
-`;
-
-exports[`Typography should render as the correct element based on the typography type 7`] = `
-<h6
-  class="rmd-typography rmd-typography--subtitle-1"
-  data-testid="text"
-/>
-`;
-
-exports[`Typography should render as the correct element based on the typography type 8`] = `
-<h6
-  class="rmd-typography rmd-typography--subtitle-2"
-  data-testid="text"
-/>
-`;
-
-exports[`Typography should render as the correct element based on the typography type 9`] = `
-<p
-  class="rmd-typography rmd-typography--body-1"
-  data-testid="text"
-/>
-`;
-
-exports[`Typography should render as the correct element based on the typography type 10`] = `
-<p
-  class="rmd-typography rmd-typography--body-2"
-  data-testid="text"
-/>
-`;
-
-exports[`Typography should render as the correct element based on the typography type 11`] = `
-<span
-  class="rmd-typography rmd-typography--overline"
-  data-testid="text"
-/>
-`;
-
-exports[`Typography should render as the correct element based on the typography type 12`] = `
-<caption
-  class="rmd-typography rmd-typography--caption"
-  data-testid="text"
-/>
-`;
-
-exports[`Typography styling utility class should be callable without any arguments or with a null type 1`] = `"rmd-typography rmd-typography--body-1"`;
-
-exports[`Typography styling utility class should be callable without any arguments or with a null type 2`] = `"rmd-typography"`;

package/src/typography/_typography.scss

@@ -1,399 +0,0 @@
-@use "sass:math";
-@use "sass:map";
-@use "../media-queries/media-queries";
-@use "../utils";
-
-$disable-text-container: false !default;
-$disable-headline-1: false !default;
-$disable-headline-2: false !default;
-$disable-headline-3: false !default;
-$disable-headline-4: false !default;
-$disable-headline-5: false !default;
-$disable-headline-6: false !default;
-$disable-subtitle-1: false !default;
-$disable-subtitle-2: false !default;
-$disable-body-1: false !default;
-$disable-body-2: false !default;
-$disable-caption: false !default;
-$disable-overline: false !default;
-
-/// A small utility function to get the letter spacing based on tracking and
-/// font-size
-///
-/// @access private
-/// @param {Number} tracking - The tracking to use
-/// @param {Number} font-size - The font size to use
-/// @return {Number} the letter spacing value in em
-@function get-letter-spacing($tracking, $font-size) {
-  @return math.div($tracking, $font-size * 16) * 1em;
-}
-
-/// The font family to use throughout the entire application.
-///
-/// @example scss - Changing the Font
-///   @use "react-md" with (
-///     $font-family: string.unquote("'Open Sans', Koulen, 'Roboto Flex', sans-serif")
-///   ):
-///
-///   @include react-md.typography;
-///
-/// @type String
-$font-family: Roboto, sans-serif !default;
-
-$font-weight-thin: 100 !default;
-$font-weight-light: 300 !default;
-$font-weight-regular: 400 !default;
-$font-weight-medium: 500 !default;
-$font-weight-bold: 700 !default;
-$font-weight-semi-bold: 800 !default;
-$font-weight-black: 900 !default;
-
-/// A Map of all the font weights.
-///
-/// @type Map
-/// @prop {Number} thin [$font-weight-thin] - The thin font weight value.
-/// @prop {Number} light [$font-weight-light] - The light font weight value.
-/// @prop {Number} regular [$font-weight-regular] - The regular font weight
-/// value.
-/// @prop {Number} medium [$font-weight-medium] - The medium font weight
-/// value.
-/// @prop {Number} bold [$font-weight-bold] - The bold font weight value.
-/// @prop {Number} semi-bold [$font-weight-semi-bold] - The semi-bold font
-/// weight value.
-/// @prop {Number} black [$font-weight-black] - The black font weight value.
-$font-weights: (
-  thin: $font-weight-thin,
-  light: $font-weight-light,
-  regular: $font-weight-regular,
-  medium: $font-weight-medium,
-  bold: $font-weight-bold,
-  semi-bold: $font-weight-semi-bold,
-  black: $font-weight-black,
-) !default;
-
-$text-alignments: left center right !default;
-$text-decorations: underline overline line-through none !default;
-$text-transforms: capitalize uppercase lowercase !default;
-$font-styles: normal italic oblique !default;
-
-/// The base styles for typography.
-/// @type Map
-$base-recommended-font-styles: (
-  font-family: $font-family,
-  overflow: inherit,
-  overflow-wrap: break-word,
-  text-overflow: inherit,
-  -moz-osx-font-smoothing: grayscale,
-  -webkit-font-smoothing: antialiased,
-);
-$base-custom-font-styles: () !default;
-$base-font-styles: map.merge(
-  $base-recommended-font-styles,
-  $base-custom-font-styles
-);
-
-$headline-1-recommended-styles: (
-  font-size: 6rem,
-  line-height: 6rem,
-  font-weight: map.get($font-weights, light),
-  letter-spacing: get-letter-spacing(-1.5, 6),
-);
-$headline-1-custom-styles: () !default;
-$headline-1-styles: map.merge(
-  $headline-1-recommended-styles,
-  $headline-1-custom-styles
-) !default;
-$headline-2-recommended-styles: (
-  font-size: 3.75rem,
-  line-height: 3.75rem,
-  font-weight: map.get($font-weights, light),
-  letter-spacing: get-letter-spacing(-0.5, 3.75),
-);
-$headline-2-custom-styles: () !default;
-$headline-2-styles: map.merge(
-  $headline-2-recommended-styles,
-  $headline-2-custom-styles
-) !default;
-$headline-3-recommended-styles: (
-  font-size: 3rem,
-  line-height: 3.125rem,
-  font-weight: map.get($font-weights, regular),
-  letter-spacing: normal,
-);
-$headline-3-custom-styles: () !default;
-$headline-3-styles: map.merge(
-  $headline-3-recommended-styles,
-  $headline-3-custom-styles
-) !default;
-$headline-4-recommended-styles: (
-  font-size: 2.125rem,
-  line-height: 2.5rem,
-  font-weight: map.get($font-weights, regular),
-  letter-spacing: get-letter-spacing(0.25, 2.125),
-);
-$headline-4-custom-styles: () !default;
-$headline-4-styles: map.merge(
-  $headline-4-recommended-styles,
-  $headline-4-custom-styles
-) !default;
-$headline-5-recommended-styles: (
-  font-size: 1.5rem,
-  line-height: 2rem,
-  font-weight: map.get($font-weights, regular),
-  letter-spacing: normal,
-);
-$headline-5-custom-styles: () !default;
-$headline-5-styles: map.merge(
-  $headline-5-recommended-styles,
-  $headline-5-custom-styles
-) !default;
-$headline-6-recommended-styles: (
-  font-size: 1.25rem,
-  line-height: 2rem,
-  font-weight: map.get($font-weights, medium),
-  letter-spacing: get-letter-spacing(0.25, 1.25),
-);
-$headline-6-custom-styles: () !default;
-$headline-6-styles: map.merge(
-  $headline-6-recommended-styles,
-  $headline-6-custom-styles
-) !default;
-$subtitle-1-recommended-styles: (
-  font-size: 1rem,
-  line-height: 1.75rem,
-  font-weight: map.get($font-weights, regular),
-  letter-spacing: get-letter-spacing(0.15, 1),
-);
-$subtitle-1-custom-styles: () !default;
-$subtitle-1-styles: map.merge(
-  $subtitle-1-recommended-styles,
-  $subtitle-1-custom-styles
-) !default;
-$subtitle-2-recommended-styles: (
-  font-size: 0.875rem,
-  line-height: 1.375rem,
-  font-weight: map.get($font-weights, medium),
-  letter-spacing: get-letter-spacing(0.1, 0.875),
-);
-$subtitle-2-custom-styles: () !default;
-$subtitle-2-styles: map.merge(
-  $subtitle-2-recommended-styles,
-  $subtitle-2-custom-styles
-) !default;
-$body-1-recommended-styles: (
-  font-size: 1rem,
-  line-height: 1.5rem,
-  font-weight: map.get($font-weights, regular),
-  letter-spacing: get-letter-spacing(0.5, 0.875),
-);
-$body-1-custom-styles: () !default;
-$body-1-styles: map.merge(
-  $body-1-recommended-styles,
-  $body-1-custom-styles
-) !default;
-$body-2-recommended-styles: (
-  font-size: 0.875rem,
-  line-height: 1.25rem,
-  font-weight: map.get($font-weights, regular),
-  letter-spacing: get-letter-spacing(0.25, 0.875),
-);
-$body-2-custom-styles: () !default;
-$body-2-styles: map.merge(
-  $body-2-recommended-styles,
-  $body-2-custom-styles
-) !default;
-$caption-recommended-styles: (
-  font-size: 0.75rem,
-  line-height: 1.25rem,
-  font-weight: map.get($font-weights, regular),
-  letter-spacing: get-letter-spacing(0.4, 0.75),
-);
-$caption-custom-styles: () !default;
-$caption-styles: map.merge(
-  $caption-recommended-styles,
-  $caption-custom-styles
-) !default;
-$overline-recommended-styles: (
-  font-size: 0.75rem,
-  line-height: 2rem,
-  font-weight: map.get($font-weights, medium),
-  letter-spacing: get-letter-spacing(2, 0.75),
-);
-$overline-custom-styles: () !default;
-$overline-styles: map.merge(
-  $overline-recommended-styles,
-  $overline-custom-styles
-) !default;
-$button-recommended-styles: map.merge(
-  $base-font-styles,
-  (
-    font-size: 0.875rem,
-    font-weight: map.get($font-weights, medium),
-    letter-spacing: get-letter-spacing(1.25, 0.875),
-    line-height: 2.25rem,
-    // buttons with multiple lines of text look terrible because of the large
-    // line-height. You normally want to use a different component if the
-    // clickable area has so much content to line-wrap
-    line-wrap: nowrap,
-  )
-);
-$button-custom-styles: () !default;
-$button-styles: map.merge(
-  $button-recommended-styles,
-  $button-custom-styles
-) !default;
-
-$text-container-padding: 1rem !default;
-// since everything has `box-sizing: border-box`, make sure the width is 65
-// characters + left and right padding so the text is _really_ 65ch
-$text-line-length: calc(65ch + $text-container-padding * 2) !default;
-
-$typography-variables: (line-length, text-container-padding);
-
-@function typography-get-var($name, $fallback: null) {
-  $var: utils.get-var-name($typography-variables, $name, "typography");
-  @if $fallback {
-    @return var(#{$var}, #{$fallback});
-  }
-
-  @return var(#{$var});
-}
-
-@mixin typography-set-var($name, $value) {
-  @if $value {
-    #{utils.get-var-name($typography-variables, $name, "typography")}: #{$value};
-  }
-}
-
-@mixin typography-use-var($property, $name: $property, $fallback: null) {
-  #{$property}: typography-get-var($name, $fallback);
-}
-
-@mixin typography-text-container-styles(
-  $disabled: $disable-text-container,
-  $disable-layer: false
-) {
-  @if not $disabled {
-    @include utils.optional-layer(typography, $disable-layer) {
-      .rmd-text-container {
-        @include typography-use-var(max-width, line-length);
-        @include typography-use-var(padding, text-container-padding);
-
-        display: block;
-        margin: 0 auto;
-        width: 100%;
-      }
-    }
-  }
-}
-
-@mixin typography-base-styles($disable-layer: false) {
-  @include utils.optional-layer(typography, $disable-layer) {
-    .rmd-typography {
-      @include utils.map-to-styles($base-font-styles);
-
-      @if not $disable-headline-1 {
-        &--headline-1 {
-          @include utils.map-to-styles($headline-1-styles);
-        }
-      }
-
-      @if not $disable-headline-2 {
-        &--headline-2 {
-          @include utils.map-to-styles($headline-2-styles);
-        }
-      }
-
-      @if not $disable-headline-3 {
-        &--headline-3 {
-          @include utils.map-to-styles($headline-3-styles);
-        }
-      }
-
-      @if not $disable-headline-4 {
-        &--headline-4 {
-          @include utils.map-to-styles($headline-4-styles);
-        }
-      }
-
-      @if not $disable-headline-5 {
-        &--headline-5 {
-          @include utils.map-to-styles($headline-5-styles);
-        }
-      }
-
-      @if not $disable-headline-6 {
-        &--headline-6 {
-          @include utils.map-to-styles($headline-6-styles);
-        }
-      }
-
-      @if not $disable-subtitle-1 {
-        &--subtitle-1 {
-          @include utils.map-to-styles($subtitle-1-styles);
-        }
-      }
-
-      @if not $disable-subtitle-2 {
-        &--subtitle-2 {
-          @include utils.map-to-styles($subtitle-2-styles);
-        }
-      }
-
-      @if not $disable-body-1 {
-        &--body-1 {
-          @include utils.map-to-styles($body-1-styles);
-        }
-      }
-
-      @if not $disable-body-2 {
-        &--body-2 {
-          @include utils.map-to-styles($body-2-styles);
-        }
-      }
-
-      @if not $disable-caption {
-        &--caption {
-          @include utils.map-to-styles($caption-styles);
-        }
-      }
-
-      @if not $disable-overline {
-        &--overline {
-          @include utils.map-to-styles($overline-styles);
-        }
-      }
-    }
-  }
-}
-
-@mixin text-overflow($white-space: nowrap) {
-  overflow: hidden;
-  overflow-wrap: anywhere;
-  text-overflow: ellipsis;
-  white-space: $white-space;
-}
-
-@mixin line-clamp($lines: 2) {
-  // stylelint-disable order/properties-alphabetical-order
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: $lines;
-  display: -webkit-box;
-}
-
-@mixin typography-variables {
-  @if not $disable-text-container {
-    @include typography-set-var(line-length, $text-line-length);
-    @include typography-set-var(
-      text-container-padding,
-      $text-container-padding
-    );
-  }
-}
-
-@mixin typography-styles($disable-layer: false) {
-  @include utils.optional-layer(typography, $disable-layer) {
-    @include typography-text-container-styles($disable-layer: true);
-    @include typography-base-styles(true);
-  }
-}

package/src/utils/__tests__/RenderRecursively.tsx

@@ -1,87 +0,0 @@
-import { describe, expect, it } from "@jest/globals";
-import { cnb } from "cnbuilder";
-import { type ReactElement } from "react";
-import { Divider } from "../../divider/Divider.js";
-import { List } from "../../list/List.js";
-import { render, screen } from "../../test-utils/index.js";
-import {
-  type RenderRecursiveItemsProps,
-  RenderRecursively,
-} from "../RenderRecursively.js";
-
-type Item =
-  | {
-      id: string;
-      name: string;
-      items?: Item[];
-    }
-  | { id: string; divider: boolean };
-
-const items: Item[] = [
-  {
-    id: "item-1",
-    name: "Item 1",
-    items: [
-      {
-        id: "item-1-1",
-        name: "Item 1-1",
-      },
-      {
-        id: "divider-1-1",
-        divider: true,
-      },
-      {
-        id: "item-1-2",
-        name: "Item 1-2",
-        items: [
-          {
-            id: "item-1-2-1",
-            name: "Item 1-2-1",
-          },
-        ],
-      },
-    ],
-  },
-  {
-    id: "item-2",
-    name: "Item 2",
-  },
-];
-
-function Render(props: RenderRecursiveItemsProps<Item, string>): ReactElement {
-  const { item, parents, data, children } = props;
-  if ("divider" in item) {
-    return <Divider />;
-  }
-
-  return (
-    <List style={{ "--rmd-tree-depth": parents.length }}>
-      <li data-testid={item.id} className={cnb(item.id === data && "active")}>
-        {item.name}
-      </li>
-      {children && <List>{children}</List>}
-    </List>
-  );
-}
-
-function Test(): ReactElement {
-  const activeId = "item-1-1";
-  return (
-    <RenderRecursively
-      data={activeId}
-      items={items}
-      render={Render}
-      getItemKey={({ item }) => item.id}
-    />
-  );
-}
-
-describe("RenderRecursively", () => {
-  it("should pass data down to each component and be strictly type-checked", () => {
-    const { container } = render(<Test />);
-
-    const item11 = screen.getByTestId("item-1-1");
-    expect(item11).toHaveClass("active");
-    expect(container).toMatchSnapshot();
-  });
-});

package/src/utils/__tests__/__snapshots__/RenderRecursively.tsx.snap

@@ -1,80 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`RenderRecursively should pass data down to each component and be strictly type-checked 1`] = `
-<div>
-  <ul
-    class="rmd-list"
-    role="none"
-    style="--rmd-tree-depth: 0;"
-  >
-    <li
-      class=""
-      data-testid="item-1"
-    >
-      Item 1
-    </li>
-    <ul
-      class="rmd-list"
-      role="none"
-    >
-      <ul
-        class="rmd-list"
-        role="none"
-        style="--rmd-tree-depth: 1;"
-      >
-        <li
-          class="active"
-          data-testid="item-1-1"
-        >
-          Item 1-1
-        </li>
-      </ul>
-      <hr
-        class="rmd-divider"
-        role="separator"
-      />
-      <ul
-        class="rmd-list"
-        role="none"
-        style="--rmd-tree-depth: 1;"
-      >
-        <li
-          class=""
-          data-testid="item-1-2"
-        >
-          Item 1-2
-        </li>
-        <ul
-          class="rmd-list"
-          role="none"
-        >
-          <ul
-            class="rmd-list"
-            role="none"
-            style="--rmd-tree-depth: 2;"
-          >
-            <li
-              class=""
-              data-testid="item-1-2-1"
-            >
-              Item 1-2-1
-            </li>
-          </ul>
-        </ul>
-      </ul>
-    </ul>
-  </ul>
-  <ul
-    class="rmd-list"
-    role="none"
-    style="--rmd-tree-depth: 0;"
-  >
-    <li
-      class=""
-      data-testid="item-2"
-    >
-      Item 2
-    </li>
-  </ul>
-</div>
-`;

package/src/utils/__tests__/applyRef.ts

@@ -1,30 +0,0 @@
-import { describe, expect, it, jest } from "@jest/globals";
-import { createRef } from "react";
-
-import { applyRef } from "../applyRef.js";
-
-const instance = document.createElement("div");
-
-describe("applyRef", () => {
-  it("should call the provided ref if it is a function", () => {
-    const ref = jest.fn();
-
-    applyRef(instance, ref);
-    expect(ref).toHaveBeenCalledWith(instance);
-
-    applyRef(null, ref);
-    expect(ref).toHaveBeenCalledWith(null);
-  });
-
-  it("should update mutable ref objects", () => {
-    const ref = createRef<HTMLDivElement | null>();
-
-    expect(ref.current).toBe(null);
-
-    applyRef(instance, ref);
-    expect(ref.current).toBe(instance);
-
-    applyRef(null, ref);
-    expect(ref.current).toBe(null);
-  });
-});