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

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

@@ -1,544 +0,0 @@
-// 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

@@ -1,168 +0,0 @@
-@use "sass:map";
-@use "../utils";
-
-$default-align-items: center !default;
-
-$disable-everything: false !default;
-$disable-stacked: false !default;
-$disable-reversed: false !default;
-$disable-grid: false !default;
-$disable-grid-columns: false !default;
-
-$align-items: (start end stretch) !default;
-$justify-content: (
-  start center end stretch space-around space-between space-evenly
-) !default;
-
-$gap: 1rem !default;
-$padding: $gap !default;
-$item-min-size: 8rem !default;
-
-/// This should look like:
-/// ```scss
-/// $grids: (
-///   small: (
-///     min: 5rem
-///   ),
-///   medium: (
-///     min: 7rem,
-///     padding: 2rem,
-///     gap: 0.5rem
-///   )
-/// );
-/// ```
-$grids: () !default;
-
-$variables: (gap, padding, item-min-size, columns);
-
-@function get-var($name, $fallback: null) {
-  $var: utils.get-var-name($variables, $name, "box");
-  @if $fallback {
-    @return var(#{$var}, #{$fallback});
-  }
-
-  @return var(#{$var});
-}
-
-@mixin set-var($name, $value) {
-  @if $value {
-    #{utils.get-var-name($variables, $name, "box")}: #{$value};
-  }
-}
-
-@mixin use-var($property, $name: $property, $fallback: null) {
-  #{$property}: get-var($name, $fallback);
-}
-
-@mixin custom-grid($min: null, $padding: null, $gap: null) {
-  @if $min {
-    @include set-var(item-min-size, $min);
-  }
-
-  @if $padding {
-    @include set-var(padding, $padding);
-  }
-
-  @if $gap {
-    @include set-var(gap, $gap);
-  }
-}
-
-@mixin custom-grid-class($selector, $min: null, $padding: null, $gap: null) {
-  #{$selector} {
-    @include custom-grid($min, $padding, $gap);
-  }
-}
-
-@mixin variables {
-  @if not $disable-everything {
-    @include set-var(gap, $gap);
-    @include set-var(padding, $padding);
-    @include set-var(item-min-size, $item-min-size);
-    @include set-var(columns, auto-fit);
-  }
-}
-
-@mixin styles($disable-layer: false) {
-  @if not $disable-everything {
-    @include utils.optional-layer(box, $disable-layer) {
-      .rmd-box {
-        @include use-var(gap, gap);
-
-        align-items: $default-align-items;
-        display: flex;
-
-        &--padded {
-          @include use-var(padding);
-        }
-
-        &--wrap {
-          flex-wrap: wrap;
-        }
-
-        &--full-width {
-          width: 100%;
-        }
-
-        @if not $disable-stacked {
-          &--column {
-            flex-direction: column;
-          }
-        }
-
-        @if not $disable-reversed {
-          &--reverse {
-            flex-direction: row-reverse;
-          }
-
-          @if not $disable-stacked {
-            &--column-reverse {
-              flex-direction: column-reverse;
-            }
-          }
-        }
-
-        @each $value in $align-items {
-          &--align-#{$value} {
-            align-items: $value;
-          }
-        }
-
-        @each $value in $justify-content {
-          &--justify-#{utils.str-replace($value, "space-", "")} {
-            justify-content: $value;
-          }
-        }
-
-        @if not $disable-grid {
-          &--grid {
-            display: grid;
-            grid-template-columns: repeat(
-              get-var(columns),
-              minmax(get-var(item-min-size), 1fr)
-            );
-          }
-
-          &--grid-fill {
-            @include set-var(columns, auto-fill);
-          }
-
-          @if not $disable-grid-columns {
-            &--grid-columns {
-              @include set-var(item-min-size, 0);
-            }
-          }
-
-          @each $name, $values in $grids {
-            @include custom-grid-class(
-              "&--#{$name}",
-              $min: map.get($values, min),
-              $gap: map.get($values, gap),
-              $padding: map.get($values, padding)
-            );
-          }
-        }
-      }
-    }
-  }
-}