pallote-react 0.2.25 → 0.2.27

package/dist/components/Display.js

@@ -42,7 +42,7 @@ const Display = _ref => {
 };
 exports.Display = Display;
 Display.propTypes = {
-  show: _propTypes.default.oneOf(['mobile-sm', 'mobile', 'tablet', 'laptop', 'desktop']),
-  hide: _propTypes.default.oneOf(['mobile-sm', 'mobile', 'tablet', 'laptop', 'desktop']),
+  show: _propTypes.default.oneOf(['mobile-sm', 'mobile', 'tablet', 'laptop', 'desktop', 'touch']),
+  hide: _propTypes.default.oneOf(['mobile-sm', 'mobile', 'tablet', 'laptop', 'desktop', 'touch']),
   children: _propTypes.default.any
 };

package/dist/components/Input.js

@@ -52,7 +52,7 @@ const Input = _ref => {
       'js--error': error,
       'input--disabled': disabled,
       'input--required': required,
-      'input--withIcon': customIcon
+      'input--withIcon': icon
     }, className]),
     onChange: onChange,
     onFocus: event => {

package/package.json

@@ -4,7 +4,7 @@
   "author": {
     "name": "arnymax"
   },
-  "version": "0.2.25",
+  "version": "0.2.27",
   "private": false,
   "keywords": [
     "react",
@@ -30,6 +30,7 @@
     "@testing-library/user-event": "^13.5.0",
     "classnames": "^2.3.2",
     "eslint": "^8.48.0",
+    "pallote-css": "^0.2.41",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.15.0",
@@ -83,7 +84,6 @@
     "babel-plugin-named-exports-order": "^0.0.2",
     "chromatic": "^11.3.0",
     "eslint-plugin-storybook": "^0.6.13",
-    "pallote-css": "^0.2.37",
     "prop-types": "^15.8.1",
     "storybook": "^7.4.0",
     "webpack": "^5.88.2"

package/dist/styles/common/_global.scss

@@ -1,98 +0,0 @@
-// —————————————————————————————————————————————————————————————————
-// padding & margin
-// —————————————————————————————————————————————————————————————————
-
-.m-05 { margin: $spacing*0.5 !important; }
-.mt-05 { margin-top: $spacing*0.5 !important; }
-.mr-05 { margin-right: $spacing*0.5 !important; }
-.mb-05 { margin-bottom: $spacing*0.5 !important; }
-.ml-05 { margin-left: $spacing*0.5 !important; }
-
-.p-05 { padding: $spacing*0.5 !important; }
-.pt-05 { padding-top: $spacing*0.5 !important; }
-.pr-05 { padding-right: $spacing*0.5 !important; }
-.pb-05 { padding-bottom: $spacing*0.5 !important; }
-.pl-05 { padding-left: $spacing*0.5 !important; }
-
-@for $i from 0 through 20 {
-
-  .zi-#{$i} { z-index: $i !important; }
-
-  .m-#{$i} { margin: $i*$spacing !important; }
-  .mt-#{$i} { margin-top: $i*$spacing !important; }
-  .mr-#{$i} { margin-right: $i*$spacing !important; }
-  .mb-#{$i} { margin-bottom: $i*$spacing !important; }
-  .ml-#{$i} { margin-left: $i*$spacing !important; }
-
-  .p-#{$i} { padding: $i*$spacing !important; }
-  .pt-#{$i} { padding-top: $i*$spacing !important; }
-  .pr-#{$i} { padding-right: $i*$spacing !important; }
-  .pb-#{$i} { padding-bottom: $i*$spacing !important; }
-  .pl-#{$i} { padding-left: $i*$spacing !important; }
-}
-
-// —————————————————————————————————————————————————————————————————
-// width
-// —————————————————————————————————————————————————————————————————
-
-$max: 100;
-$step: 5;
-
-@for $i from 1 through (calc($max/$step)) {
-  $value: $i * $step;
-
-  .w-#{$value} {
-    width: $value + 0% !important;
-  }
-}
-
-.w {
-
-  &-mobile-sm { width: $mobile-sm-up !important; }
-  &-mobile { width: $mobile-up !important; }
-  &-tablet { width: $tablet-up !important; }
-  &-laptop { width: $laptop-up !important; }
-  &-desktop { width: $desktop-up !important; }
-}
-
-// —————————————————————————————————————————————————————————————————
-// misc
-// —————————————————————————————————————————————————————————————————
-
-.dp {
-
-  &-inline { display: inline !important; }
-  &-block { display: block !important; }
-  &-flex { display: flex !important; }
-  &-grid { display: grid !important; }
-  &-inline-block { display: inline-block !important; }
-  &-inline-flex { display: inline-flex !important; }
-  &-inline-grid { display: inline-grid !important; }
-  &-none { display: none !important; }
-  &-initial { display: initial !important; }
-  &-inheri { display: inheri !important; }
-}
-
-.of {
-
-  &-visible { overflow: visible !important; }
-  &-hidden { overflow: hidden !important; }
-  &-scroll { overflow: scroll !important; }
-  &-auto { overflow: auto !important; }
-
-  &X {
-
-    &-visible { overflow-x: visible !important; }
-    &-hidden { overflow-x: hidden !important; }
-    &-scroll { overflow-x: scroll !important; }
-    &-auto { overflow-x: auto !important; }
-  }
-
-  &Y {
-
-    &-visible { overflow-y: visible !important; }
-    &-hidden { overflow-y: hidden !important; }
-    &-scroll { overflow-y: scroll !important; }
-    &-auto { overflow-y: auto !important; }
-  }
-}

package/dist/styles/common/_mixins.scss

@@ -1,58 +0,0 @@
-// —————————————————————————————————————————————————————————————————
-// misc
-// media queries
-// —————————————————————————————————————————————————————————————————
-
-// —————————————————————————————————————————————————————————————————
-// misc
-// —————————————————————————————————————————————————————————————————
-
-@mixin calc($property, $expression) {
-  #{$property}: -webkit-calc(#{$expression});
-  #{$property}: calc(#{$expression});
-}
-
-@mixin hover {
-  &:hover, &:active, &:focus {
-    @content;
-  }
-}
-
-// —————————————————————————————————————————————————————————————————
-// media queries
-// —————————————————————————————————————————————————————————————————
-
-@mixin responsive($value, $breakpoint) {
-  @if $value == up {
-    $value: min-width;
-    @if $breakpoint == desktop { $breakpoint: $desktop-up; } 
-    @else if $breakpoint == laptop { $breakpoint: $laptop-up; } 
-    @else if $breakpoint == tablet { $breakpoint: $tablet-up; } 
-    @else if $breakpoint == mobile { $breakpoint: $mobile-up; } 
-    @else if $breakpoint == mobile-sm { $breakpoint: $mobile-sm-up; }
-
-  } @else if $value == down {
-    $value: max-width;
-    @if $breakpoint == desktop { $breakpoint: $desktop-down; } 
-    @else if $breakpoint == laptop { $breakpoint: $laptop-down; } 
-    @else if $breakpoint == tablet { $breakpoint: $tablet-down; } 
-    @else if $breakpoint == mobile { $breakpoint: $mobile-down; } 
-    @else if $breakpoint == mobile-sm { $breakpoint: $mobile-sm-down; }
-  }
-
-  @media ($value: $breakpoint) {
-    @content;
-  }
-}
-
-@mixin responsive-touch() {
-  @media (pointer: coarse) {
-    @content;
-  }
-}
-
-@mixin responsive-mobile-landscape {
-  @media only screen and (max-device-width: $laptop-down) and (orientation: landscape) {
-    @content;
-  }
-}

package/dist/styles/common/_variables.scss

@@ -1,222 +0,0 @@
-// —————————————————————————————————————————————————————————————————
-// colors
-// spacing
-// typography
-// breakpoints
-// misc
-// —————————————————————————————————————————————————————————————————
-
-// —————————————————————————————————————————————————————————————————
-// colors
-// —————————————————————————————————————————————————————————————————
-
-// common
-
-$black: #000A1E !default;
-$white: #FFFFFF !default;
-
-// grey gradient
-
-$grey-90: #1A2335 !default;
-$grey-80: #333B4B !default;
-$grey-70: #4D5462 !default;
-$grey-60: #666C78 !default;
-$grey-50: #7F848E !default;
-$grey-40: #999DA5 !default;
-$grey-30: #B2B5BB !default;
-$grey-20: #CCCED2 !default;
-$grey-10: #E5E6E8 !default;
-$grey-5: #F2F3F4 !default;
-
-// text
-
-$text: $white !default;
-$text-alt: rgba($text, 0.66) !default;
-$text-disabled: rgba($text, 0.33) !default;
-$text-contrast: $black !default;
-$text-contrast-alt: rgba($text-contrast, 0.66) !default;
-$text-contrast-disabled: rgba($text-contrast, 0.33) !default;
-
-// brand
-
-$primary: #00F3FF !default;
-$primary-light: mix($white, $primary, 70%) !default;
-$primary-dark: mix($black, $primary, 50%) !default;
-$primary-text-contrast: $text-contrast !default;
-
-$secondary: #E7FC00 !default;
-$secondary-light: mix($white, $secondary, 70%) !default;
-$secondary-dark: mix($black, $secondary, 50%) !default;
-$secondary-text-contrast: $text-contrast !default;
-
-$highlight: #FF74E6 !default;
-$highlight-light: mix($white, $highlight, 70%) !default;
-$highlight-dark: mix($black, $highlight, 50%) !default;
-$highlight-text-contrast: $text-contrast !default;
-
-// misc
-
-$background: $black !default;
-$paper: $grey-90 !default;
-
-$overlay: rgba($white, 0.1) !default;
-$hover: rgba($white, 0.08) !default;
-$backdrop: rgba($white, 0.2) !default;
-
-$border: rgba($white, 0.2) !default;
-$border-contrast: rgba($black, 0.2) !default;
-
-// feedback
-
-$success-light: #E7F9EE !default;
-$success: #26a95d !default;
-$success-dark: #1C7C44 !default;
-$success-text: #155F34 !default;
-$success-text-contrast: $text !default;
-
-$info-light: #E9F8FD !default;
-$info: #17A0CC !default;
-$info-dark: #117798 !default;
-$info-text: #0D5A72 !default;
-$info-text-contrast: $text !default;
-
-$warning-light: #FFFAE5 !default;
-$warning: #FFDC46 !default;
-$warning-dark: #886E00 !default;
-$warning-text: #685400 !default;
-$warning-text-contrast: $text-contrast !default;
-
-$error-light: #FCE7E7 !default;
-$error: #EB5757 !default;
-$error-dark: #D31919 !default;
-$error-text: #9C1212 !default;
-$error-text-contrast: $text !default;
-
-// social
-
-$facebook:#1877F2;
-$github:#4078C0;
-$instagram: #405DE6;
-$linkedin: #0077B5;
-$medium:#00AB6C;
-$twitter:#1DA1F2;
-
-// export for use in jsx files
-
-:export {
-  black: $black;
-  white: $white;
-
-  grey-90: $grey-90;
-  grey-80: $grey-80;
-  grey-70: $grey-70;
-  grey-60: $grey-60;
-  grey-50: $grey-50;
-  grey-40: $grey-40;
-  grey-30: $grey-30;
-  grey-20: $grey-20;
-  grey-10: $grey-10;
-  grey-5: $grey-5;
-
-  text: $text;
-  text-alt: $text-alt;
-  text-disabled: $text-disabled;
-  text-contrast: $text-contrast;
-  text-contrast-alt: $text-contrast-alt;
-  text-contrast-disabled: $text-contrast-disabled;
-
-  primary: $primary;
-  secondary: $secondary;
-  highlight: $highlight;
-
-  background: $background;
-  paper: $paper;
-  overlay: $overlay;
-  hover: $hover;
-  backdrop: $backdrop;
-  border: $border;
-  border-contrast: $border-contrast;
-
-  success: $success;
-  info: $info;
-  warning: $warning;
-  error: $error;
-}
-
-// —————————————————————————————————————————————————————————————————
-// spacing
-// —————————————————————————————————————————————————————————————————
-
-$spacing: 0.5rem !default; // 8px
-
-$page-gutter: calc(100vw / 12) !default;
-$page-max-width: 1200px !default;
-$page-column: calc(100% / 12) !default;
-
-$section-spacing: $spacing*8 !default;
-$section-spacing-content: $spacing*6 !default;
-
-$navbar-height: $spacing*8 !default;
-
-// —————————————————————————————————————————————————————————————————
-// typography
-// —————————————————————————————————————————————————————————————————
-
-// fonts
-
-$font: "Barlow", "Arial", sans-serif !default;
-
-// weight
-
-$font-light: 300 !default;
-$font-regular: 500 !default;
-$font-bold: 700 !default;
-
-// —————————————————————————————————————————————————————————————————
-// breakpoints
-// —————————————————————————————————————————————————————————————————
-
-$desktop-lg: 1800px !default;
-
-$desktop-up: 1280px !default;
-$desktop-down: 1279.98px !default;
-
-$laptop-up: 1024px !default;
-$laptop-down: 1023.98px !default;
-
-$tablet-up: 768px !default;
-$tablet-down: 767.98px !default;
-
-$mobile-up: 576px !default;
-$mobile-down: 575.98px !default;
-
-$mobile-sm-up: 375px !default;
-$mobile-sm-down: 374.98px !default;
-
-// —————————————————————————————————————————————————————————————————
-// misc
-// —————————————————————————————————————————————————————————————————
-
-// transition
-
-$transition-md: 0.4s ease 0s !default;
-$transition-lg: 0.8s ease 0s !default;
-
-// shadow
-
-$box-shadow-sm: 0 0 $spacing $spacing*0.25 rgba($secondary ,0.2) !default;
-$box-shadow-md: 0 0 $spacing*2 $spacing*0.5 rgba($secondary ,0.2) !default;
-$box-shadow-lg: 0 0 $spacing*4 $spacing rgba($secondary ,0.2) !default;
-
-// border
-
-$border-sm: 1px solid !default;
-$border-md: $spacing*0.25 solid !default;
-$border-lg: $spacing*0.5 solid !default;
-
-// border-radius
-
-$border-radius-sm: $spacing*0.75 !default;
-$border-radius-md: $spacing !default;
-$border-radius-lg: $spacing*2 !default;
-

package/dist/styles/components/accordion.scss

@@ -1,181 +0,0 @@
-// —————————————————————————————————————————————————————————————————
-// mixins
-// elements
-// size
-// noPadding
-// transparent
-// gutter
-// active
-// disabled
-// —————————————————————————————————————————————————————————————————
-
-// —————————————————————————————————————————————————————————————————
-// mixins
-// —————————————————————————————————————————————————————————————————
-
-@mixin size($proportion, $size) {
-
-  .accordion {
-
-    &__item {
-      border-radius: calc($size*2/3);
-
-      &:not(:last-child) {
-        margin-bottom: calc($size/3);
-      }
-
-      &--active {
-        padding-bottom: $size;
-      }
-    }
-
-    &__control {
-      padding: $size $size*1.5;
-    }
-
-    &__icon {
-      @if $proportion == lg { height: $size*1.5; width: $size*1.5; }
-      @else { height: $size*2; width: $size*2; }
-
-      &:first-child { margin-right: calc($size); }
-      &:last-child { margin-left: calc($size); }
-    }
-    
-    &__header {
-
-      @if $proportion == sm { margin-bottom: -1px; }
-      @if $proportion == lg { margin: -1px 0 -2px 0; }
-    }
-
-    &__content {
-      transition: height $transition-md;
-      will-change: height;
-      padding: 0 $size*1.5;
-      overflow: hidden;
-    }
-  }
-
-  &.accordion--gutter .accordion__item--active {
-    padding-bottom: $size*2;
-
-    .accordion__control {
-      padding-top: $size*2;
-      padding-bottom: $size*2;
-    }
-  }
-
-  &.accordion--transparent .accordion__item--active {
-    margin-top: calc($size/3);
-  }
-}
-
-// —————————————————————————————————————————————————————————————————
-// elements
-// —————————————————————————————————————————————————————————————————
-
-.accordion {
-  width: 100%;
-
-  &__item {
-    background-color: $paper;
-    width: 100%;
-  }
-
-  &__control,
-  &__content {
-    transition: padding $transition-md;
-    will-change: paddding;
-  }
-
-  &__control {
-    display: flex;
-    align-items: center;
-    width: 100%;
-    cursor: pointer;
-  }
-
-  &__header {
-    flex-grow: 1;
-    text-align: left;
-  }
-
-  &__icon {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 1.125rem;
-    width: 1.125rem;
-
-    &:first-child { margin-right: 0.5rem; }
-    &:last-child { margin-left: 0.5rem; }
-
-    &--arrow {
-      transition: transform $transition-md;
-      will-change: transform;
-    }
-  }
-}
-
-// —————————————————————————————————————————————————————————————————
-// size
-// —————————————————————————————————————————————————————————————————
-
-.accordion {
-
-  &--sm { @include size(sm, $spacing*0.75); }
-  &--md { @include size(md, $spacing); }
-  &--lg { @include size(lg, $spacing*1.5); }
-}
-
-// —————————————————————————————————————————————————————————————————
-// transparent
-// —————————————————————————————————————————————————————————————————
-
-.accordion--transparent {
-
-  .accordion__item {
-    transition: background-color $transition-md, margin $transition-md;
-    will-change: background-color, margin;
-    background-color: transparent;
-
-    @include hover { background-color: $paper; }
-    &--active { background-color: $paper; }
-    &--disabled { @include hover { background-color: transparent; }}
-    
-    &:not(:last-child):not(.accordion__item--active) {
-      margin-bottom: 0;
-    }
-  }
-}
-
-// —————————————————————————————————————————————————————————————————
-// gutter
-// —————————————————————————————————————————————————————————————————
-
-// see size mixin
-
-// —————————————————————————————————————————————————————————————————
-// active
-// —————————————————————————————————————————————————————————————————
-
-.accordion__item--active {
-
-  .accordion {
-
-    &__icon--arrow {
-      transform: rotate(180deg);
-    }
-  }
-}
-
-// —————————————————————————————————————————————————————————————————
-// disabled
-// —————————————————————————————————————————————————————————————————
-
-.accordion__item--disabled {
-  opacity: 0.5;
-
-  .accordion__control {
-    cursor: not-allowed;
-  }
-}