@progressiveui/react 2.0.2 → 2.0.4

package/src/components/Tooltip/legacy/_mixins.scss

@@ -1,191 +0,0 @@
-@mixin enter-transform($placement, $animation) {
-  @if ($animation == 'perspective') {
-    @if ($placement == 'top') {
-      transform: perspective(700px) translateY(-10px) rotateX(0);
-    } @else if ($placement == 'bottom') {
-      transform: perspective(700px) translateY(10px) rotateX(0);
-    } @else if ($placement == 'left') {
-      transform: perspective(700px) translateX(-10px) rotateY(0);
-    } @else if ($placement == 'right') {
-      transform: perspective(700px) translateX(10px) rotateY(0);
-    }
-  } @else if ($animation == 'fade') {
-    @if ($placement == 'top') {
-      transform: translateY(-10px);
-    } @else if ($placement == 'bottom') {
-      transform: translateY(10px);
-    } @else if ($placement == 'left') {
-      transform: translateX(-10px);
-    } @else if ($placement == 'right') {
-      transform: translateX(10px);
-    }
-  } @else if ($animation == 'scale') {
-    @if ($placement == 'top') {
-      transform: translateY(-10px) scale(1);
-    } @else if ($placement == 'bottom') {
-      transform: translateY(10px) scale(1);
-    } @else if ($placement == 'left') {
-      transform: translateX(-10px) scale(1);
-    } @else if ($placement == 'right') {
-      transform: translateX(10px) scale(1);
-    }
-  }
-}
-
-@mixin leave-transform($placement, $animation) {
-  @if ($animation == 'perspective') {
-    @if ($placement == 'top') {
-      transform: perspective(700px) translateY(0) rotateX(60deg);
-    } @else if ($placement == 'bottom') {
-      transform: perspective(700px) translateY(0) rotateX(-60deg);
-    } @else if ($placement == 'left') {
-      transform: perspective(700px) translateX(0) rotateY(-60deg);
-    } @else if ($placement == 'right') {
-      transform: perspective(700px) translateX(0) rotateY(60deg);
-    }
-  } @else if ($animation == 'shift-away') {
-    @if ($placement == 'top') {
-      transform: translateY(0);
-    } @else if ($placement == 'bottom') {
-      transform: translateY(0);
-    } @else if ($placement == 'left') {
-      transform: translateX(0);
-    } @else if ($placement == 'right') {
-      transform: translateX(0);
-    }
-  } @else if ($animation == 'scale') {
-    @if ($placement == 'top') {
-      transform: translateY(-10px) scale(0.5);
-    } @else if ($placement == 'bottom') {
-      transform: translateY(10px) scale(0.5);
-    } @else if ($placement == 'left') {
-      transform: translateX(-10px) scale(0.5);
-    } @else if ($placement == 'right') {
-      transform: translateX(10px) scale(0.5);
-    }
-  } @else if ($animation == 'shift-toward') {
-    @if ($placement == 'top') {
-      transform: translateY(-20px);
-    } @else if ($placement == 'bottom') {
-      transform: translateY(20px);
-    } @else if ($placement == 'left') {
-      transform: translateX(-20px);
-    } @else if ($placement == 'right') {
-      transform: translateX(20px);
-    }
-  }
-}
-
-@mixin backdrop-transform-enter($placement) {
-  $scale: 1;
-  @if ($placement == 'top') {
-    transform: scale($scale) translate(-50%, -55%);
-  } @else if ($placement == 'bottom') {
-    transform: scale($scale) translate(-50%, -45%);
-  } @else if ($placement == 'left') {
-    transform: scale($scale) translate(-50%, -50%);
-  } @else if ($placement == 'right') {
-    transform: scale($scale) translate(-50%, -50%);
-  }
-}
-
-@mixin backdrop-transform-leave($placement) {
-  $scale: 0.2;
-  @if ($placement == 'top') {
-    transform: scale($scale) translate(-50%, -45%);
-  } @else if ($placement == 'bottom') {
-    transform: scale($scale) translate(-50%, 0);
-  } @else if ($placement == 'left') {
-    transform: scale($scale) translate(-75%, -50%);
-  } @else if ($placement == 'right') {
-    transform: scale($scale) translate(-25%, -50%);
-  }
-}
-
-@mixin arrow($placement, $width, $color) {
-  @if ($placement == 'top') {
-    border-top: $width solid $color;
-    border-right: $width solid transparent;
-    border-left: $width solid transparent;
-  } @else if ($placement == 'bottom') {
-    border-bottom: $width solid $color;
-    border-right: $width solid transparent;
-    border-left: $width solid transparent;
-  } @else if ($placement == 'left') {
-    border-left: $width solid $color;
-    border-top: $width solid transparent;
-    border-bottom: $width solid transparent;
-  } @else if ($placement == 'right') {
-    border-right: $width solid $color;
-    border-top: $width solid transparent;
-    border-bottom: $width solid transparent;
-  }
-}
-
-@mixin arrow-position($placement, $width, $isRoundArrow) {
-  @if ($placement == 'top') {
-    bottom: -$width;
-  } @else if ($placement == 'bottom') {
-    top: -$width;
-  }
-
-  @if ($isRoundArrow) {
-    @if ($placement == 'left') {
-      right: -$width * 2 + 2px;
-    } @else if ($placement == 'right') {
-      left: -$width * 2 + 2px;
-    } @else if ($placement == 'top') {
-      bottom: -$width + 0.5px;
-    }
-  } @else {
-    @if ($placement == 'left') {
-      right: -$width;
-    } @else if ($placement == 'right') {
-      left: -$width;
-    }
-  }
-}
-
-@mixin arrow-margin($placement) {
-  @if ($placement == 'top' or $placement == 'bottom') {
-    margin: 0 3px;
-  } @else {
-    margin: 3px 0;
-  }
-}
-
-@mixin roundarrow-transform($placement) {
-  @if ($placement == 'top') {
-    transform: rotate(180deg);
-  } @else if ($placement == 'bottom') {
-    transform: rotate(0);
-  } @else if ($placement == 'left') {
-    transform: rotate(90deg);
-  } @else if ($placement == 'right') {
-    transform: rotate(-90deg);
-  }
-}
-
-@mixin arrow-transform-origin($placement) {
-  @if ($placement == 'top') {
-    transform-origin: 50% 0%;
-  } @else if ($placement == 'bottom') {
-    transform-origin: 50% 100%;
-  } @else if ($placement == 'left') {
-    transform-origin: 0% 50%;
-  } @else if ($placement == 'right') {
-    transform-origin: 100% 50%;
-  }
-}
-
-@mixin roundarrow-transform-origin($placement) {
-  @if ($placement == 'top') {
-    transform-origin: 50% 0%;
-  } @else if ($placement == 'bottom') {
-    transform-origin: 50% 100%;
-  } @else if ($placement == 'left') {
-    transform-origin: 33.33333333% 50%;
-  } @else if ($placement == 'right') {
-    transform-origin: 66.66666666% 50%;
-  }
-}

package/src/components/Tooltip/legacy/_tooltip.scss

@@ -1,70 +0,0 @@
-@import './_mixins.scss';
-@import './_vars.scss';
-@import '../../globals/scss/vars';
-@import '../../globals/scss/theme';
-@import '../../globals/scss/colors';
-@import '../../globals/scss/spacing';
-@import '../../globals/scss/helper-mixins';
-@import '../../globals/scss/typography';
-@import '../../globals/scss/vendor/@un/import-once/scss/import-once';
-@import 'mixins';
-
-@include exports('tooltip') {
-  .#{$namespace-prefix}-tooltip.light-theme {
-    color: var(--text-01);
-
-    box-shadow: 0 0 20px 4px rgba(154, 161, 177, 0.15),
-      0 4px 80px -8px rgba(36, 40, 47, 0.25),
-      0 4px 4px -2px rgba(91, 94, 105, 0.15);
-    background-color: white;
-
-    @each $placement in $placements {
-      &[x-placement^='#{$placement}'] {
-        .#{$namespace-prefix}-arrow {
-          @include arrow($placement, 8px, white);
-        }
-      }
-    }
-
-    .#{$namespace-prefix}-backdrop {
-      background-color: white;
-    }
-
-    .#{$namespace-prefix}-roundarrow {
-      fill: white;
-    }
-
-    &[data-animatefill] {
-      background-color: transparent;
-    }
-  }
-
-  .#{$namespace-prefix}-tooltip.dark-theme {
-    color: var(--inverse-01);
-    /* box-shadow: 0 0 20px 4px rgba(154, 161, 177, 0.15),
-    0 4px 80px -8px rgba(36, 40, 47, 0.25),
-    0 4px 4px -2px rgba(91, 94, 105, 0.15); */
-
-    background-color: var(--inverse-02);
-
-    @each $placement in $placements {
-      &[x-placement^='#{$placement}'] {
-        .#{$namespace-prefix}-arrow {
-          @include arrow($placement, 8px, var(--inverse-02));
-        }
-      }
-    }
-
-    .#{$namespace-prefix}-backdrop {
-      background-color: white;
-    }
-
-    .#{$namespace-prefix}-roundarrow {
-      fill: white;
-    }
-
-    &[data-animatefill] {
-      background-color: transparent;
-    }
-  }
-}

package/src/components/Tooltip/legacy/_vars.scss

@@ -1,5 +0,0 @@
-$namespace-prefix: 'tippy' !default;
-$placements: 'top', 'bottom', 'left', 'right';
-$origins: bottom, top, right, left;
-$backdrop-origins: 0% 25%, 0% -50%, 50% 0%, -50% 0%;
-$backdrop-border-radii: 40% 40% 0 0, 0 0 30% 30%, 50% 0 0 50%, 0 50% 50% 0;

package/src/components/Tooltip/legacy/themes/light.scss

@@ -1,30 +0,0 @@
-@import '../_mixins.scss';
-@import '../_vars.scss';
-
-.#{$namespace-prefix}-tooltip.light-theme {
-  color: #26323d;
-  box-shadow: 0 0 20px 4px rgba(154, 161, 177, 0.15),
-    0 4px 80px -8px rgba(36, 40, 47, 0.25),
-    0 4px 4px -2px rgba(91, 94, 105, 0.15);
-  background-color: white;
-
-  @each $placement in $placements {
-    &[x-placement^='#{$placement}'] {
-      .#{$namespace-prefix}-arrow {
-        @include arrow($placement, 8px, white);
-      }
-    }
-  }
-
-  .#{$namespace-prefix}-backdrop {
-    background-color: white;
-  }
-
-  .#{$namespace-prefix}-roundarrow {
-    fill: white;
-  }
-
-  &[data-animatefill] {
-    background-color: transparent;
-  }
-}

package/src/components/Tooltip/svg-arrow.scss

@@ -1,37 +0,0 @@
-@import './_mixins.scss';
-@import './_vars.scss';
-
-.#{$namespace-prefix}-tooltip {
-  @each $placement in $placements {
-    &[data-placement^='#{$placement}'] {
-      > .#{$namespace-prefix}-svg-arrow {
-        @include svg-arrow-transform-origin($placement, $arrow-size);
-        @include arrow-margin($placement);
-        @include arrow-position($placement, $arrow-size, true);
-
-        svg {
-          @include svg-arrow-transform($placement);
-        }
-      }
-    }
-  }
-
-  &[data-interactive] {
-    > .#{$namespace-prefix}-svg-arrow path {
-      pointer-events: auto;
-    }
-  }
-}
-
-.#{$namespace-prefix}-svg-arrow {
-  position: absolute;
-  width: 18px;
-  height: $arrow-size;
-  fill: #333;
-  pointer-events: none;
-
-  svg {
-    position: absolute;
-    left: 0;
-  }
-}

package/src/components/Tooltip/themes/light-border.scss

@@ -1,158 +0,0 @@
-@import '../_mixins.scss';
-@import '../_vars.scss';
-
-$color: var(--ui-01);
-$transparent-light: rgba(0, 8, 16, 0.08);
-$transparent-dark: rgba(0, 8, 16, 0.15);
-$transparent-darker: rgba(0, 8, 16, 0.2);
-
-.#{$namespace-prefix}-tooltip.light-border-theme {
-  background-color: $color;
-  background-clip: padding-box;
-  border: 1px solid $transparent-dark;
-  color: #26323d;
-  box-shadow: 0 4px 14px -2px $transparent-light;
-
-  > .#{$namespace-prefix}-backdrop {
-    background-color: $color;
-  }
-
-  > .#{$namespace-prefix}-arrow,
-  > .#{$namespace-prefix}-svg-arrow {
-    &::after,
-    &::before {
-      content: '';
-      position: absolute;
-      z-index: -1;
-    }
-  }
-
-  > .#{$namespace-prefix}-svg-arrow {
-    fill: $color;
-
-    &::after {
-      background-image: url(data:image/svg+xml;base64,PHN2ZyBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGZpbGwtcnVsZT0iZXZlbm9kZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEuNDE0MjEiIHZpZXdCb3g9IjAgMCAxOCA3IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Im0wIDdzMi4wMjEtLjAxNSA1LjI1My00LjIxOGMxLjMzMS0xLjczMSAyLjU0NC0yLjc3NSAzLjc0Ny0yLjc4MiAxLjIwMy0uMDA3IDIuNDE2IDEuMDM1IDMuNzYxIDIuNzgyIDMuMjUxIDQuMjIzIDUuMjM5IDQuMjE4IDUuMjM5IDQuMjE4eiIgZmlsbD0iIzMzMyIgZmlsbC1vcGFjaXR5PSIuMjM1Mjk0IiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48L3N2Zz4=);
-      background-size: 18px $arrow-size;
-      width: 18px;
-      height: $arrow-size;
-      left: 0;
-      top: 0;
-      fill: $transparent-dark;
-    }
-  }
-
-  &[data-placement^='top'] {
-    > .#{$namespace-prefix}-svg-arrow::after {
-      top: 1px;
-      transform: rotate(180deg);
-    }
-
-    > .#{$namespace-prefix}-arrow {
-      border-top-color: $color;
-
-      &::after {
-        border-top: $arrow-size solid $color;
-        top: -$arrow-size;
-      }
-      &::before {
-        border-top: $arrow-size solid $transparent-darker;
-        bottom: -1px;
-      }
-    }
-  }
-
-  &[data-placement^='bottom'] {
-    > .#{$namespace-prefix}-svg-arrow::after {
-      top: -1px;
-    }
-
-    > .#{$namespace-prefix}-arrow {
-      border-bottom-color: $color;
-
-      &::after {
-        border-bottom: $arrow-size solid $color;
-        bottom: -$arrow-size;
-      }
-      &::before {
-        border-bottom: $arrow-size solid $transparent-darker;
-        bottom: -($arrow-size - 1);
-      }
-    }
-  }
-
-  &[data-placement^='left'] {
-    > .#{$namespace-prefix}-svg-arrow::after {
-      left: 1px;
-      top: 0;
-      transform: rotate(90deg);
-    }
-
-    > .#{$namespace-prefix}-arrow {
-      border-left-color: var(--ui-01);
-
-      &::after {
-        border-left: $arrow-size solid $color;
-        left: -$arrow-size;
-      }
-      &::before {
-        border-left: $arrow-size solid $transparent-darker;
-        left: -($arrow-size - 1);
-      }
-    }
-  }
-
-  &[data-placement^='right'] {
-    > .#{$namespace-prefix}-svg-arrow::after {
-      left: -1px;
-      top: 0;
-      transform: rotate(-90deg);
-    }
-
-    > .#{$namespace-prefix}-arrow {
-      border-right-color: var(--ui-01);
-
-      &::after {
-        border-right: $arrow-size solid $color;
-        right: -$arrow-size;
-      }
-      &::before {
-        border-right: $arrow-size solid $transparent-darker;
-        right: -($arrow-size - 1);
-      }
-    }
-  }
-
-  &[data-placement^='top'],
-  &[data-placement^='bottom'] {
-    > .#{$namespace-prefix}-arrow,
-    > .#{$namespace-prefix}-svg-arrow {
-      transform: translateX(-1px);
-    }
-
-    > .#{$namespace-prefix}-arrow {
-      &::after,
-      &::before {
-        left: -$arrow-size;
-        border-left: $arrow-size solid transparent;
-        border-right: $arrow-size solid transparent;
-      }
-    }
-  }
-
-  &[data-placement^='left'],
-  &[data-placement^='right'] {
-    > .#{$namespace-prefix}-arrow,
-    > .#{$namespace-prefix}-svg-arrow {
-      transform: translateY(-1px);
-    }
-
-    > .#{$namespace-prefix}-arrow {
-      &::after,
-      &::before {
-        top: -$arrow-size;
-        border-top: $arrow-size solid transparent;
-        border-bottom: $arrow-size solid transparent;
-      }
-    }
-  }
-}

package/src/components/Tooltip/themes/light.scss

@@ -1,28 +0,0 @@
-@import '../_mixins.scss';
-@import '../_vars.scss';
-
-$color: var(--ui-01);
-
-.#{$namespace-prefix}-tooltip.light-theme {
-  color: #26323d;
-  box-shadow: 0 0 20px 4px rgba(154, 161, 177, 0.15),
-    0 4px 80px -8px rgba(36, 40, 47, 0.25),
-    0 4px 4px -2px rgba(91, 94, 105, 0.15);
-  background-color: $color;
-
-  @each $placement in $placements {
-    &[data-placement^='#{$placement}'] {
-      > .#{$namespace-prefix}-arrow {
-        @include arrow($placement, $arrow-size + 1, $color);
-      }
-    }
-  }
-
-  > .#{$namespace-prefix}-backdrop {
-    background-color: $color;
-  }
-
-  > .#{$namespace-prefix}-svg-arrow {
-    fill: $color;
-  }
-}

package/src/components/Unit/InvalidUnit.tsx

@@ -1,11 +0,0 @@
-import React from 'react';
-
-// For invalid Values
-export const Invalid = props => {
-  return <span className={props.className + ' invalid'}>–</span>;
-};
-
-// For invalid Values
-export const InvalidSvg = props => {
-  return <tspan className={props.className + ' invalid'}>–</tspan>;
-};

package/src/components/Unit/README.mdx

@@ -1 +0,0 @@
-The Unit component method returns a component with a language and unit sensitive representation of this number based on [Numbers and Unit from the Editorial Guidelines](https://cdn.wfp.org/guides/editorial/content/numbers-and-units/) the [Numbers and Units Reference on developer.mozilla.org](http://cdn.wfp.org/guides/editorial/content/numbers-and-units).

package/src/components/Unit/SimpleCalc.tsx

@@ -1,49 +0,0 @@
-import * as React from "react";
-import SvgUnit from "./SvgUnit";
-import StringUnit from "./StringUnit";
-
-// TODO: Add interface interface SimpleCalcProps
-
-type SimpleCalcProps = {
-  calcOnly?: boolean;
-  children?: any;
-  string?: boolean;
-  svg?: boolean;
-  hideUnit?: boolean;
-  className?: string;
-  after?: string;
-  before?: string;
-};
-
-const SimpleCalc = (
-  props: SimpleCalcProps,
-  after?: string,
-  before?: string
-) => {
-  const { calcOnly, className, children, string, svg, hideUnit } = props;
-
-  // Remove commas
-  const value = children;
-
-  const afterCalc = after ? after : "";
-
-  const unit = hideUnit ? "" : before + children + afterCalc;
-
-  const calcObject = {
-    value: value,
-    before: before,
-    after: after,
-    output: value + unit,
-  };
-
-  if (calcOnly) return calcObject;
-  else if (svg)
-    return SvgUnit(
-      { value: value + unit, before: before, after: after },
-      props
-    );
-  else if (string) return StringUnit(calcObject /*, props */);
-  else if (value !== false) return <span className={className}>{value}</span>;
-};
-
-export default SimpleCalc;

package/src/components/Unit/StringUnit.tsx

@@ -1,13 +0,0 @@
-const StringUnit = value => {
-  if (value) {
-    const before = value.before ? value.before + ' ' : '';
-    const afterOutput =
-      value.output && value.output.default
-        ? value.output.default.after + ''
-        : '';
-    const after = value.after ? ' ' + value.after : '';
-    return before + value.value + afterOutput + after;
-  } else return '';
-};
-
-export default StringUnit;

package/src/components/Unit/SvgUnit.tsx

@@ -1,22 +0,0 @@
-import * as React from 'react';
-import { InvalidSvg } from './InvalidUnit';
-
-const SvgUnit = (value, props) => {
-  const { style, ...other } = props;
-
-  if (value)
-    return (
-      <text className={props.className} {...other}>
-        <tspan style={style}>{value.before} </tspan>
-        <tspan style={style}>{value.value}</tspan>
-        <tspan style={style}>
-          {' '}
-          {value.output ? value.output.default.after + '' : ''}
-          {value.after}
-        </tspan>
-      </text>
-    );
-  else return <InvalidSvg className={props.className} />;
-};
-
-export default SvgUnit;