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

package/src/transition/__tests__/__snapshots__/useCollapseTransition.tsx.snap

@@ -1,361 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`useCollapseTransition should apply the correct appear transitionDuration 1`] = `
-<div>
-  <button
-    type="button"
-  >
-    Toggle
-  </button>
-  <div
-    class="rmd-collapse rmd-collapse--enter rmd-collapse--no-overflow"
-    data-testid="element"
-    style="max-height: 0; padding-top: 0px; padding-bottom: 0px; transition-duration: 100ms;"
-  >
-    This is some content.
-  </div>
-</div>
-`;
-
-exports[`useCollapseTransition should apply the correct appear transitionDuration 2`] = `
-<div>
-  <button
-    type="button"
-  >
-    Toggle
-  </button>
-  <div
-    class="rmd-collapse"
-    data-testid="element"
-    style="padding-top: 0px; padding-bottom: 0px;"
-  >
-    This is some content.
-  </div>
-</div>
-`;
-
-exports[`useCollapseTransition should apply the correct appear transitionDuration 3`] = `
-<div>
-  <button
-    type="button"
-  >
-    Toggle
-  </button>
-  <div
-    class="rmd-collapse rmd-collapse--leave rmd-collapse--no-overflow"
-    data-testid="element"
-    style="padding-top: 0px; padding-bottom: 0px; max-height: 0; transition-duration: 200ms;"
-  >
-    This is some content.
-  </div>
-</div>
-`;
-
-exports[`useCollapseTransition should apply the correct appear transitionDuration 4`] = `
-<div>
-  <button
-    type="button"
-  >
-    Toggle
-  </button>
-</div>
-`;
-
-exports[`useCollapseTransition should apply the correct appear transitionDuration 5`] = `
-<div>
-  <button
-    type="button"
-  >
-    Toggle
-  </button>
-  <div
-    class="rmd-collapse rmd-collapse--enter rmd-collapse--no-overflow"
-    data-testid="element"
-    style="max-height: 0; padding-top: 0px; padding-bottom: 0px; transition-duration: 250ms;"
-  >
-    This is some content.
-  </div>
-</div>
-`;
-
-exports[`useCollapseTransition should apply the correct appear transitionDuration 6`] = `
-<div>
-  <button
-    type="button"
-  >
-    Toggle
-  </button>
-  <div
-    class="rmd-collapse"
-    data-testid="element"
-    style="padding-top: 0px; padding-bottom: 0px;"
-  >
-    This is some content.
-  </div>
-</div>
-`;
-
-exports[`useCollapseTransition should apply the rmd-display-none if the temporary behavior is disabled 1`] = `
-<div>
-  <button
-    type="button"
-  >
-    Toggle
-  </button>
-  <div
-    class="rmd-collapse rmd-collapse--no-overflow rmd-display-none"
-    data-testid="element"
-    style="max-height: 0; padding-top: 0px; padding-bottom: 0px;"
-  >
-    This is some content.
-  </div>
-</div>
-`;
-
-exports[`useCollapseTransition should apply the rmd-display-none if the temporary behavior is disabled 2`] = `
-<div>
-  <button
-    type="button"
-  >
-    Toggle
-  </button>
-  <div
-    class="rmd-collapse rmd-collapse--enter rmd-collapse--no-overflow"
-    data-testid="element"
-    style="max-height: 0; padding-top: 0px; padding-bottom: 0px; transition-duration: 250ms;"
-  >
-    This is some content.
-  </div>
-</div>
-`;
-
-exports[`useCollapseTransition should apply the rmd-display-none if the temporary behavior is disabled 3`] = `
-<div>
-  <button
-    type="button"
-  >
-    Toggle
-  </button>
-  <div
-    class="rmd-collapse"
-    data-testid="element"
-    style="padding-top: 0px; padding-bottom: 0px;"
-  >
-    This is some content.
-  </div>
-</div>
-`;
-
-exports[`useCollapseTransition should apply the rmd-display-none if the temporary behavior is disabled 4`] = `
-<div>
-  <button
-    type="button"
-  >
-    Toggle
-  </button>
-  <div
-    class="rmd-collapse rmd-collapse--leave rmd-collapse--no-overflow"
-    data-testid="element"
-    style="padding-top: 0px; padding-bottom: 0px; max-height: 0; transition-duration: 200ms;"
-  >
-    This is some content.
-  </div>
-</div>
-`;
-
-exports[`useCollapseTransition should apply the rmd-display-none if the temporary behavior is disabled 5`] = `
-<div>
-  <button
-    type="button"
-  >
-    Toggle
-  </button>
-  <div
-    class="rmd-collapse rmd-collapse--no-overflow rmd-display-none"
-    data-testid="element"
-    style="padding-top: 0px; padding-bottom: 0px; max-height: 0;"
-  >
-    This is some content.
-  </div>
-</div>
-`;
-
-exports[`useCollapseTransition should default to not being temporary if the minHeight, minPaddingTop, or minPaddingBottom are not 0 1`] = `
-<div>
-  <button
-    type="button"
-  >
-    Toggle
-  </button>
-  <div
-    class="rmd-collapse rmd-collapse--no-overflow"
-    data-testid="element"
-    style="max-height: 120px; padding-top: 0px; padding-bottom: 0px;"
-  >
-    This is some content.
-  </div>
-</div>
-`;
-
-exports[`useCollapseTransition should default to not being temporary if the minHeight, minPaddingTop, or minPaddingBottom are not 0 2`] = `
-<div>
-  <button
-    type="button"
-  >
-    Toggle
-  </button>
-  <div
-    class="rmd-collapse rmd-collapse--no-overflow"
-    data-testid="element"
-    style="max-height: 0; padding-top: 0px; padding-bottom: 16px;"
-  >
-    This is some content.
-  </div>
-</div>
-`;
-
-exports[`useCollapseTransition should default to not being temporary if the minHeight, minPaddingTop, or minPaddingBottom are not 0 3`] = `
-<div>
-  <button
-    type="button"
-  >
-    Toggle
-  </button>
-  <div
-    class="rmd-collapse rmd-collapse--no-overflow"
-    data-testid="element"
-    style="max-height: 0; padding-top: 8px; padding-bottom: 0px;"
-  >
-    This is some content.
-  </div>
-</div>
-`;
-
-exports[`useCollapseTransition should default to not being temporary if the minHeight, minPaddingTop, or minPaddingBottom are not 0 4`] = `
-<div>
-  <button
-    type="button"
-  >
-    Toggle
-  </button>
-</div>
-`;
-
-exports[`useCollapseTransition should default to not rendering the element when transitionIn is false 1`] = `
-<div>
-  <button
-    type="button"
-  >
-    Toggle
-  </button>
-  <div
-    class="rmd-collapse rmd-collapse--enter rmd-collapse--no-overflow"
-    data-testid="element"
-    style="max-height: 0; padding-top: 0px; padding-bottom: 0px; transition-duration: 250ms;"
-  >
-    This is some content.
-  </div>
-</div>
-`;
-
-exports[`useCollapseTransition should default to not rendering the element when transitionIn is false 2`] = `
-<div>
-  <button
-    type="button"
-  >
-    Toggle
-  </button>
-  <div
-    class="rmd-collapse"
-    data-testid="element"
-    style="padding-top: 0px; padding-bottom: 0px;"
-  >
-    This is some content.
-  </div>
-</div>
-`;
-
-exports[`useCollapseTransition should default to not rendering the element when transitionIn is false 3`] = `
-<div>
-  <button
-    type="button"
-  >
-    Toggle
-  </button>
-  <div
-    class="rmd-collapse rmd-collapse--leave rmd-collapse--no-overflow"
-    data-testid="element"
-    style="padding-top: 0px; padding-bottom: 0px; max-height: 0; transition-duration: 200ms;"
-  >
-    This is some content.
-  </div>
-</div>
-`;
-
-exports[`useCollapseTransition should default to not rendering the element when transitionIn is false 4`] = `
-<div>
-  <button
-    type="button"
-  >
-    Toggle
-  </button>
-</div>
-`;
-
-exports[`useCollapseTransition should not apply any class names if the timeout is disabled 1`] = `
-<div>
-  <button
-    type="button"
-  >
-    Toggle
-  </button>
-</div>
-`;
-
-exports[`useCollapseTransition should not apply any class names if the timeout is disabled 2`] = `
-<div>
-  <button
-    type="button"
-  >
-    Toggle
-  </button>
-  <div
-    data-testid="element"
-    style="padding-top: 0px; padding-bottom: 0px;"
-  >
-    This is some content.
-  </div>
-</div>
-`;
-
-exports[`useCollapseTransition should not apply any class names if the timeout is disabled 3`] = `
-<div>
-  <button
-    type="button"
-  >
-    Toggle
-  </button>
-  <div
-    data-testid="element"
-    style="padding-top: 0px; padding-bottom: 0px;"
-  >
-    This is some content.
-  </div>
-</div>
-`;
-
-exports[`useCollapseTransition should not apply any style if it mounts while transitionIn is true 1`] = `
-<div>
-  <button
-    type="button"
-  >
-    Toggle
-  </button>
-  <div
-    class="rmd-collapse"
-    data-testid="element"
-  >
-    This is some content.
-  </div>
-</div>
-`;

package/src/transition/__tests__/__snapshots__/useCrossFadeTransition.tsx.snap

@@ -1,258 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CrossFade should allow for temporary CSS Transition behavior 1`] = `
-<div>
-  <button
-    type="button"
-  >
-    Toggle
-  </button>
-</div>
-`;
-
-exports[`CrossFade should allow for temporary CSS Transition behavior 2`] = `
-<div>
-  <button
-    type="button"
-  >
-    Toggle
-  </button>
-  <div
-    class="rmd-cross-fade rmd-cross-fade--active"
-    data-testid="element"
-  >
-    This is some content.
-  </div>
-</div>
-`;
-
-exports[`CrossFade should allow for temporary CSS Transition behavior 3`] = `
-<div>
-  <button
-    type="button"
-  >
-    Toggle
-  </button>
-  <div
-    data-testid="element"
-  >
-    This is some content.
-  </div>
-</div>
-`;
-
-exports[`CrossFade should correctly merge the className prop 1`] = `
-<div>
-  <button
-    type="button"
-  >
-    Toggle
-  </button>
-  <div
-    class="custom-class"
-    data-testid="element"
-  >
-    This is some content.
-  </div>
-</div>
-`;
-
-exports[`CrossFade should correctly merge the className prop 2`] = `
-<div>
-  <button
-    type="button"
-  >
-    Toggle
-  </button>
-  <div
-    class="custom-class rmd-cross-fade rmd-cross-fade--active"
-    data-testid="element"
-  >
-    This is some content.
-  </div>
-</div>
-`;
-
-exports[`CrossFade should correctly merge the className prop 3`] = `
-<div>
-  <button
-    type="button"
-  >
-    Toggle
-  </button>
-  <div
-    class="custom-class"
-    data-testid="element"
-  >
-    This is some content.
-  </div>
-</div>
-`;
-
-exports[`CrossFade should correctly merge the className prop 4`] = `
-<div>
-  <button
-    type="button"
-  >
-    Toggle
-  </button>
-  <div
-    class="custom-class"
-    data-testid="element"
-  >
-    This is some content.
-  </div>
-</div>
-`;
-
-exports[`CrossFade should correctly merge the className prop 5`] = `
-<div>
-  <button
-    type="button"
-  >
-    Toggle
-  </button>
-  <div
-    class="custom-class"
-    data-testid="element"
-  >
-    This is some content.
-  </div>
-</div>
-`;
-
-exports[`CrossFade should default to not using appear transitions 1`] = `
-<div>
-  <button
-    type="button"
-  >
-    Toggle
-  </button>
-  <div
-    data-testid="element"
-  >
-    This is some content.
-  </div>
-</div>
-`;
-
-exports[`CrossFade should default to not using appear transitions 2`] = `
-<div>
-  <button
-    type="button"
-  >
-    Toggle
-  </button>
-  <div
-    data-testid="element"
-  >
-    This is some content.
-  </div>
-</div>
-`;
-
-exports[`CrossFade should default to not using appear transitions 3`] = `
-<div>
-  <button
-    type="button"
-  >
-    Toggle
-  </button>
-  <div
-    data-testid="element"
-  >
-    This is some content.
-  </div>
-</div>
-`;
-
-exports[`CrossFade should default to not using appear transitions 4`] = `
-<div>
-  <button
-    type="button"
-  >
-    Toggle
-  </button>
-  <div
-    data-testid="element"
-  >
-    This is some content.
-  </div>
-</div>
-`;
-
-exports[`CrossFade should transition correctly when not appearing 1`] = `
-<div>
-  <button
-    type="button"
-  >
-    Toggle
-  </button>
-  <div
-    data-testid="element"
-  >
-    This is some content.
-  </div>
-</div>
-`;
-
-exports[`CrossFade should transition correctly when not appearing 2`] = `
-<div>
-  <button
-    type="button"
-  >
-    Toggle
-  </button>
-  <div
-    class="rmd-cross-fade rmd-cross-fade--active"
-    data-testid="element"
-  >
-    This is some content.
-  </div>
-</div>
-`;
-
-exports[`CrossFade should transition correctly when not appearing 3`] = `
-<div>
-  <button
-    type="button"
-  >
-    Toggle
-  </button>
-  <div
-    data-testid="element"
-  >
-    This is some content.
-  </div>
-</div>
-`;
-
-exports[`CrossFade should transition correctly when not appearing 4`] = `
-<div>
-  <button
-    type="button"
-  >
-    Toggle
-  </button>
-  <div
-    data-testid="element"
-  >
-    This is some content.
-  </div>
-</div>
-`;
-
-exports[`CrossFade should transition correctly when not appearing 5`] = `
-<div>
-  <button
-    type="button"
-  >
-    Toggle
-  </button>
-  <div
-    data-testid="element"
-  >
-    This is some content.
-  </div>
-</div>
-`;

package/src/transition/__tests__/__snapshots__/useMaxWidthTransition.tsx.snap

@@ -1,68 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`useMaxWidthTransition should add the transition classes 1`] = `
-<span
-  aria-hidden="true"
-  class="rmd-icon rmd-icon--font material-icons rmd-max-width-transition custom-class-name"
->
-  home
-</span>
-`;
-
-exports[`useMaxWidthTransition should add the transition classes 2`] = `
-<span
-  aria-hidden="true"
-  class="rmd-icon rmd-icon--font material-icons rmd-max-width-transition rmd-max-width-transition--visible custom-class-name"
->
-  home
-</span>
-`;
-
-exports[`useMaxWidthTransition should return the element unchanged if the disabled option is true or the element is not a ReactElement 1`] = `
-<div
-  data-testid="icon-1"
->
-  <span
-    aria-hidden="true"
-    class="rmd-icon rmd-icon--font material-icons"
-  >
-    home
-  </span>
-</div>
-`;
-
-exports[`useMaxWidthTransition should return the element unchanged if the disabled option is true or the element is not a ReactElement 2`] = `
-<div
-  data-testid="icon-2"
-/>
-`;
-
-exports[`useMaxWidthTransition should return the element unchanged if the disabled option is true or the element is not a ReactElement 3`] = `
-<div
-  data-testid="icon-1"
->
-  <span
-    aria-hidden="true"
-    class="rmd-icon rmd-icon--font material-icons"
-  >
-    home
-  </span>
-</div>
-`;
-
-exports[`useMaxWidthTransition should return the element unchanged if the disabled option is true or the element is not a ReactElement 4`] = `
-<div
-  data-testid="icon-2"
->
-  icon
-</div>
-`;
-
-exports[`useMaxWidthTransition should use the DISPLAY_NONE_CLASS when the transition is disabled 1`] = `
-<span
-  aria-hidden="true"
-  class="rmd-icon rmd-icon--font material-icons rmd-display-none custom-class-name"
->
-  home
-</span>
-`;