groovinads-ui 1.0.2 → 1.0.5

package/.storybook/preview-head.html

@@ -0,0 +1,3 @@
+<link rel="stylesheet" href="http://ui.groovinads.com/styles.min.css">
+<!-- Fontawesome kit -->
+<script src="https://kit.fontawesome.com/79f14073fb.js" crossorigin="anonymous"></script>

package/dist/index.es.js

@@ -0,0 +1 @@
+import e from"react";const n=({variant:n,size:a,onClick:t,children:i,icon:l,iconPosition:s,className:r,style:o,processing:c})=>{let d=`btn ${r}`;"default"!==n&&(d+=` btn-${n}`),"md"!==a&&(d+=` btn-${a}`),"default"!==o&&(d+=` btn-${o}`),c&&(d+=" btn-processing");const m=c?e.createElement(e.Fragment,null,e.createElement("i",{className:"fa-solid fa-spinner-third fa-spin","aria-hidden":"true"}),i&&e.createElement("span",null,i,"…")):l?"end"===s?e.createElement(e.Fragment,null,i&&e.createElement("span",null,i),e.createElement("i",{className:`fa-solid ${l}`,"aria-hidden":"true"})):e.createElement(e.Fragment,null,e.createElement("i",{className:`fa-solid ${l}`,"aria-hidden":"true"}),i&&e.createElement("span",null,i)):i&&e.createElement("span",null,i);return e.createElement("button",{className:d,onClick:t},m)};n.propTypes={variant:(void 0)(["primary","secondary","terciary","outline"]),size:(void 0)(["xs","md","lg"]),onClick:void 0,children:void 0,icon:void 0,iconPosition:(void 0)(["start","end"]),className:void 0,style:(void 0)(["default","success","danger","warning","link"]),processing:void 0},n.defaultProps={variant:"primary",size:"md",onClick:null,icon:null,iconPosition:"start",className:"",style:"default",processing:!1};export{n as Button};

package/dist/index.js

@@ -0,0 +1 @@
+"use strict";var e=require("react");const n=({variant:n,size:t,onClick:a,children:i,icon:l,iconPosition:s,className:r,style:c,processing:o})=>{let d=`btn ${r}`;"default"!==n&&(d+=` btn-${n}`),"md"!==t&&(d+=` btn-${t}`),"default"!==c&&(d+=` btn-${c}`),o&&(d+=" btn-processing");const m=o?e.createElement(e.Fragment,null,e.createElement("i",{className:"fa-solid fa-spinner-third fa-spin","aria-hidden":"true"}),i&&e.createElement("span",null,i,"…")):l?"end"===s?e.createElement(e.Fragment,null,i&&e.createElement("span",null,i),e.createElement("i",{className:`fa-solid ${l}`,"aria-hidden":"true"})):e.createElement(e.Fragment,null,e.createElement("i",{className:`fa-solid ${l}`,"aria-hidden":"true"}),i&&e.createElement("span",null,i)):i&&e.createElement("span",null,i);return e.createElement("button",{className:d,onClick:a},m)};n.propTypes={variant:(void 0)(["primary","secondary","terciary","outline"]),size:(void 0)(["xs","md","lg"]),onClick:void 0,children:void 0,icon:void 0,iconPosition:(void 0)(["start","end"]),className:void 0,style:(void 0)(["default","success","danger","warning","link"]),processing:void 0},n.defaultProps={variant:"primary",size:"md",onClick:null,icon:null,iconPosition:"start",className:"",style:"default",processing:!1},exports.Button=n;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "groovinads-ui",
-  "version": "1.0.2",
+  "version": "1.0.5",
   "main": "dist/index.js",
   "module": "dist/index.es.js",
   "repository": "git@bitbucket.org:groovinads/react-components.git",

package/src/components/Button/Button.jsx

@@ -1,20 +1,5 @@
-/* import React from 'react';
-
-//STYLES
-//import 'https://brands.groovinads.com/css/scss/components/_buttons.scss';
-
-const Button = ({ children, ...props }) => {
-	return <button {...props}>{children}</button>;
-}
-
-export default Button;
- */
-
 import React from 'react';
-// import PropTypes from 'prop-types';
-
-// STYLES
-import '../../scss/components/_buttons.scss';
+import * as PropTypes from 'prop-types';
 
 const Button = ({
 	variant,
@@ -78,27 +63,27 @@ const Button = ({
 	);
 };
 
-// Button.propTypes = {
-// 	variant: PropTypes.oneOf(['primary', 'secondary', 'terciary', 'outline']),
-// 	size: PropTypes.oneOf(['xs', 'md', 'lg']),
-// 	onClick: PropTypes.func,
-// 	children: PropTypes.node,
-// 	icon: PropTypes.node,
-// 	iconPosition: PropTypes.oneOf(['start', 'end']),
-// 	className: PropTypes.string,
-// 	style: PropTypes.oneOf(['default', 'success', 'danger', 'warning', 'link']),
-// 	processing: PropTypes.bool,
-// };
+Button.propTypes = {
+	variant: PropTypes.oneOf(['primary', 'secondary', 'terciary', 'outline']),
+	size: PropTypes.oneOf(['xs', 'md', 'lg']),
+	onClick: PropTypes.func,
+	children: PropTypes.node,
+	icon: PropTypes.node,
+	iconPosition: PropTypes.oneOf(['start', 'end']),
+	className: PropTypes.string,
+	style: PropTypes.oneOf(['default', 'success', 'danger', 'warning', 'link']),
+	processing: PropTypes.bool,
+};
 
-// Button.defaultProps = {
-// 	variant: 'primary',
-// 	size: 'md',
-// 	onClick: null,
-// 	icon: null,
-// 	iconPosition: 'start',
-// 	className: '',
-// 	style: 'default',
-// 	processing: false,
-// };
+Button.defaultProps = {
+	variant: 'primary',
+	size: 'md',
+	onClick: null,
+	icon: null,
+	iconPosition: 'start',
+	className: '',
+	style: 'default',
+	processing: false,
+};
 
 export default Button;

package/src/scss/abstracts/_borders-radius.scss

@@ -1,6 +0,0 @@
-// Borders radius
-$border-radius-xs: 0.1875rem;
-$border-radius-sm: 0.375rem;
-$border-radius-md: 0.5rem;
-$border-radius-lg: 0.75rem;
-$border-radius-xl: 1rem;

package/src/scss/abstracts/_colors.scss

@@ -1,33 +0,0 @@
-// Groovinads colors
-$ga-brand-dark: #00004b;
-$ga-brand-midtone: #3930b1;
-$ga-brand-light: #24b8ce;
-
-// Neutrals
-$grey-dark: #767676;
-$grey-light: #efefef;
-$white: #ffffff;
-$black: #000000;
-
-// Secondary colors
-$secondary-blue-light: #2d85e5;
-$secondary-blue: #12355b;
-$secondary-violet-light: #9191db;
-$secondary-violet: #746ec8;
-$secondary-dark: #091a12;
-
-// Messaging
-$error: #e63137;
-$warning: #f3a905;
-$safeWarning: #aa5509;
-$warning-bg: #FEEDC6;
-$success: #5bbb84;
-$safeSuccess: #31754e;
-$success-bg: #D6EEE0;
-
-// Brands
-$linkedin-brand: #1877f2;
-$facebook-brand: #0077B5;
-$microsoft-font: #5e5e5e;
-$microsoft-border: #8c8c8c;
-$google-brand: #70757a;

package/src/scss/abstracts/_fonts.scss

@@ -1,8 +0,0 @@
-// Fonts family
-$font-family-primary: 'Baloo 2';
-$font-family-secondary: 'Roboto';
-$font-family-code: 'Roboto Mono';
-$font-family-icon: 'Font Awesome 6 Pro';
-
-// Font size
-$font-size: 16px;

package/src/scss/abstracts/_helpers.scss

@@ -1,7 +0,0 @@
-@forward 'variables';
-@forward 'fonts';
-@forward 'borders-radius';
-@forward 'media-queries';
-@forward 'colors';
-@forward 'mixins';
-@forward 'spinner-duration';

package/src/scss/abstracts/_media-queries.scss

@@ -1,6 +0,0 @@
-// Media Queries
-$xxl: '(min-width: 1400px)';
-$xl: '(min-width: 1200px)';
-$lg: '(min-width: 992px)';
-$md: '(min-width: 768px)';
-$sm: '(min-width: 576px)';

package/src/scss/abstracts/_mixins.scss

@@ -1,143 +0,0 @@
-@use 'fonts' as f;
-@use 'borders-radius' as br;
-
-@mixin font-family($font_family, $font_size, $font_color, $font_weight) {
-	@if $font_family == f.$font-family-primary {
-		font-family: f.$font-family-primary, sans-serif;
-	}
-
-	@if $font_family == f.$font-family-secondary {
-		font-family: f.$font-family-secondary, sans-serif;
-	}
-
-	@if $font_family == f.$font-family-code {
-		font-family: f.$font-family-code, monospace;
-	}
-
-	font: {
-		size: $font_size;
-		weight: $font_weight;
-	}
-	color: $font_color;
-}
-
-@mixin transition($properties, $duration, $easing) {
-	$value: ();
-	@each $property in $properties {
-		@if length($value) > 0 {
-			$value: append($value, unquote(',') #{$property} $duration $easing);
-		} @else {
-			$value: append($value, #{$property} $duration $easing);
-		}
-	}
-	transition: $value;
-}
-
-@mixin respond-to($media) {
-	@media #{$media} {
-		@content;
-	}
-}
-
-@mixin shadow($depth, $color, $direction) {
-	@if $depth == 1 {
-		@if $direction != x {
-			box-shadow: 0px 1px 1px rgba($color, 0.25),
-				0px 1px 3px 1px rgba($color, 0.2);
-		} @else {
-			box-shadow: 1px 0px 1px rgba($color, 0.25),
-				1px 0px 3px 1px rgba($color, 0.2);
-		}
-	}
-
-	@if $depth == 2 {
-		@if $direction != x {
-			box-shadow: 0 10px 20px rgba($color, 0.19), 0px 6px 6px rgba($color, 0.23);
-		} @else {
-			box-shadow: 10px 0px 20px rgba($color, 0.19),
-				6px 0px 6px rgba($color, 0.23);
-		}
-	}
-
-	@if $depth == 3 {
-		@if $direction != x {
-			box-shadow: 0px 14px 28px rgba($color, 0.25),
-				0px 10px 10px rgba($color, 0.22);
-		} @else {
-			box-shadow: 14px 0px 28px rgba($color, 0.25),
-				10px 0px 10px rgba($color, 0.22);
-		}
-	}
-
-	@if $depth == 4 {
-		@if $direction != x {
-			box-shadow: 0px 19px 38px rgba($color, 0.3),
-				0px 15px 12px rgba($color, 0.22);
-		} @else {
-			box-shadow: 19px 0px 38px rgba($color, 0.3),
-				15px 0px 12px rgba($color, 0.22);
-		}
-	}
-}
-
-@mixin scrollbars(
-	$size,
-	$foreground-color,
-	$background-color: mix($foreground-color, white, 50%)
-) {
-	// For Google Chrome
-	&::-webkit-scrollbar {
-		width: $size;
-		height: $size;
-	}
-
-	&::-webkit-scrollbar-thumb {
-		background: $foreground-color;
-		border-radius: br.$border-radius-sm;
-		@include transition(background-color, 0.15s, ease-in-out);
-
-		&:hover {
-			background-color: mix($foreground-color, black, 75%);
-		}
-	}
-
-	&::-webkit-scrollbar-track {
-		background: $background-color;
-		padding: 10px;
-	}
-
-	// For Internet Explorer
-	& {
-		scrollbar-face-color: $foreground-color;
-		scrollbar-track-color: $background-color;
-	}
-}
-
-@mixin multipleEllipsisText($lineCount, $maxHeight, $lineHeight) {
-	max-height: $maxHeight;
-	-webkit-line-clamp: $lineCount;
-	-moz-line-clamp: $lineCount;
-	-ms-line-clamp: $lineCount;
-	line-clamp: $lineCount;
-	text-overflow: ellipsis;
-	overflow: hidden;
-	line-height: $lineHeight;
-	display: -webkit-box;
-	-webkit-box-orient: vertical;
-	word-break: break-word;
-}
-
-@mixin simpleEllipsisText {
-	overflow: hidden;
-	white-space: nowrap;
-	text-overflow: ellipsis;
-}
-
-@mixin setLabelTo($properties) {
-	transform: nth($properties, 1) nth($properties, 2) nth($properties, 3);
-	padding: nth($properties, 4) nth($properties, 5);
-}
-
-@function commonTextShadow($color) {
-	@return 2px 2px 1px $color, 2px -2px 1px $color, -2px 2px 1px $color, -2px -2px 1px $color, 2px 0px 1px $color, 0px 2px 1px $color, -2px 0px 1px $color, 0px -2px 1px $color;
-}

package/src/scss/abstracts/_spinner-duration.scss

@@ -1 +0,0 @@
-$spinner-duration: 0.75s;

package/src/scss/abstracts/_variables.scss

@@ -1,2 +0,0 @@
-// App logo
-$logo-width: 114px;

package/src/scss/animations/_alertToUp.scss

@@ -1,10 +0,0 @@
-@keyframes alertToUp {
-    0% {
-        transform: translate3d(0,-100%,0);
-        visibility: visible;
-    }
-
-    to {
-        transform: translateZ(0);
-    }
-}

package/src/scss/animations/_aurora.scss

@@ -1,17 +0,0 @@
-@keyframes aurora {
-	0% {
-		background-position: left top;
-	}
-	25% {
-		background-position: right top;
-	}
-	50% {
-		background-position: right bottom;
-	}
-	75% {
-		background-position: left bottom;
-	}
-	100% {
-		background-position: left top;
-	}
-}

package/src/scss/animations/_colors.scss

@@ -1,15 +0,0 @@
-//Use
-@use '../abstracts/helpers' as h;
-
-@keyframes colors {
-	0%,
-	100% {
-		stroke: h.$secondary-blue-light;
-	}
-	25% {
-		stroke: h.$ga-brand-light;
-	}
-	75% {
-		stroke: h.$ga-brand-midtone;
-	}
-}

package/src/scss/animations/_dash.scss

@@ -1,13 +0,0 @@
-@keyframes dash {
-	0% {
-		stroke-dashoffset: 187;
-	}
-	50% {
-		stroke-dashoffset: 46.75;
-		transform: rotate(135deg);
-	}
-	100% {
-		stroke-dashoffset: 187;
-		transform: rotate(450deg);
-	}
-}

package/src/scss/animations/_fadeCopyFromLeft.scss

@@ -1,10 +0,0 @@
-@keyframes fadeCopyFromLeft {
-	0% {
-		opacity: 0;
-		transform: translateX(0) translateY(-50%);
-	}
-	100% {
-		opacity: 1;
-		transform: translateX(0) translateY(20%);
-	}
-}

package/src/scss/animations/_goAndBack.scss

@@ -1,8 +0,0 @@
-@keyframes goAndBack {
-	0% {
-		transform: translateX(-100%);
-	}
-	100% {
-		transform: translate(100%);
-	}
-}

package/src/scss/animations/_inputUp.scss

@@ -1,10 +0,0 @@
-@keyframes inputUp {
-	0% {
-		opacity: 0;
-		transform: translateY(30%);
-	}
-	100% {
-		opacity: 1;
-		transform: translateY(0);
-	}
-}

package/src/scss/animations/_shake.scss

@@ -1,22 +0,0 @@
-@keyframes shakeIt {
-	10%,
-	90% {
-		transform: translate3d(-2px, 0, 0);
-	}
-
-	20%,
-	80% {
-		transform: translate3d(4px, 0, 0);
-	}
-
-	30%,
-	50%,
-	70% {
-		transform: translate3d(-6px, 0, 0);
-	}
-
-	40%,
-	60% {
-		transform: translate3d(6px, 0, 0);
-	}
-}

package/src/scss/animations/_showIn.scss

@@ -1,8 +0,0 @@
-@keyframes showIn {
-	0% {
-		opacity: 0;
-	}
-	100% {
-		opacity: 1;
-	}
-}

package/src/scss/animations/_showMenu.scss

@@ -1,12 +0,0 @@
-// Animations
-@keyframes showMenu {
-	0% {
-		opacity: 0;
-		max-height: 0;
-	}
-
-	100% {
-		max-height: 50vh;
-		opacity: 1;
-	}
-}

package/src/scss/animations/_statusLine.scss

@@ -1,9 +0,0 @@
-@keyframes statusLine {
-	72.5% {
-	  opacity: 0;
-	}
-
-	to {
-	  stroke-dashoffset: 0;
-	}
-}

package/src/scss/animations/_toDown.scss

@@ -1,8 +0,0 @@
-@keyframes toDown {
-	0% {
-		transform: translateY(-100%);
-	}
-	100% {
-		transform: translateY(0%);
-	}
-}

package/src/scss/animations/_toastFromLeft.scss

@@ -1,10 +0,0 @@
-@keyframes toastFromLeft {
-    0% {
-        transform: translate3d(-100%, 0, 0) scale(0);
-        opacity: .5;
-    }
-    100% {
-        transform: translate3d(0, 0, 0) scale(1);
-        opacity: 1;
-    }
-}

package/src/scss/animations/_toastFromRight.scss

@@ -1,10 +0,0 @@
-@keyframes toastFromRight {
-    0% {
-        transform: translate3d(100%, 0, 0) scale(0);
-        opacity: .5;
-    }
-    100% {
-        transform: translate3d(0, 0, 0) scale(1);
-        opacity: 1;
-    }
-}

package/src/scss/base/_base.scss

@@ -1,14 +0,0 @@
-// Use
-@use '../abstracts/helpers' as h;
-
-body {
-	background-color: h.$grey-light;
-	@include h.scrollbars(0.5rem, transparent, transparent);
-
-	&.modal-open {
-		overflow: auto !important;
-		&[style] {
-			padding-right: 0px !important;
-		}
-	}
-}