@progressiveui/react 1.22.0

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

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

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

@@ -0,0 +1,5 @@
+$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

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

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

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

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

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

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

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

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

@@ -0,0 +1,22 @@
+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;