forstok-ui-lib 5.7.6 → 5.8.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "forstok-ui-lib",
-  "version": "5.7.6",
+  "version": "5.8.2",
   "description": "Forstok UI Components Library",
   "path": "dist",
   "main": "dist/index.js",

package/src/assets/images/icons/close copy.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 212.982 212.982" style="enable-background:new 0 0 212.982 212.982; fill: rgb(72,72,72)" xml:space="preserve">
+	<path style="fill-rule:evenodd;clip-rule:evenodd;" d="M131.804,106.491l75.936-75.936c6.99-6.99,6.99-18.323,0-25.312
+		c-6.99-6.99-18.322-6.99-25.312,0l-75.937,75.937L30.554,5.242c-6.99-6.99-18.322-6.99-25.312,0c-6.989,6.99-6.989,18.323,0,25.312
+		l75.937,75.936L5.242,182.427c-6.989,6.99-6.989,18.323,0,25.312c6.99,6.99,18.322,6.99,25.312,0l75.937-75.937l75.937,75.937
+		c6.989,6.99,18.322,6.99,25.312,0c6.99-6.99,6.99-18.322,0-25.312L131.804,106.491z"/>
+</svg>

package/src/assets/images/icons/humberbars.svg

@@ -0,0 +1 @@
+<svg height="auto" viewBox="0 -53 384 384" width="auto" xmlns="http://www.w3.org/2000/svg"><path d="m368 154.667969h-352c-8.832031 0-16-7.167969-16-16s7.167969-16 16-16h352c8.832031 0 16 7.167969 16 16s-7.167969 16-16 16zm0 0"/><path d="m368 32h-352c-8.832031 0-16-7.167969-16-16s7.167969-16 16-16h352c8.832031 0 16 7.167969 16 16s-7.167969 16-16 16zm0 0"/><path d="m368 277.332031h-352c-8.832031 0-16-7.167969-16-16s7.167969-16 16-16h352c8.832031 0 16 7.167969 16 16s-7.167969 16-16 16zm0 0"/></svg>

package/src/components/date/styles.tsx

@@ -398,19 +398,4 @@ export const DateRangePortalContainer = styled.div`
 export const DateRangeIconContainer = styled.div`
   display: flex;
   padding: 0 0 0 12px;
-`
-export const DateRangeWrapper = styled.div<{ $mode?: string }>`
-  position: relative;
-  ${({ $mode }: { $mode?: string }) => $mode === 'input' && css`
-    border: 1px solid var(--ck-clr-ln);
-    cursor: pointer;
-    height: 30px;
-    border-radius: var(--ter-rd);
-    background-color: rgb(255, 255, 255);
-    padding: 0px 2px 0px 8px;
-    .react-daterange-picker {
-      background-color: transparent;
-      padding: 0px;
-    }
-  `}
-`;
+`

package/src/components/icon/styles.ts

@@ -31,6 +31,8 @@ import IconQuestion from '../../assets/images/icons/question.svg';
 import IconSortby from '../../assets/images/icons/sortby.svg';
 import IconNotificationDownload from '../../assets/images/icons/notif-download-white.svg';
 import IconNotificationUpload from '../../assets/images/icons/notif-upload-white.svg';
+import IconBar from '../../assets/images/icons/humberbars.svg';
+import IconClose from '../../assets/images/icons/close.svg';
 
 const NotificationStyled = css`
   width: 44px;
@@ -265,6 +267,18 @@ const getIconContainerStyled = ({ $mode, $name, $width, onClick }:{ $mode?: stri
           content: url(${IconNotificationUpload}); 
         }`
       break;
+    case 'bar': 
+      style += `
+        &:before { 
+          content: url(${IconBar}); 
+        }`
+      break;
+    case 'close': 
+      style += `
+        &:before { 
+          content: url(${IconClose}); 
+        }`
+      break;
     default: 
       break;
   }

package/src/components/index.ts

@@ -21,7 +21,6 @@ export { default as UploadDragDropComponent } from './upload/drag.drop';
 export { default as TextAreaComponent } from './textarea';
 export { default as TextAreaRefComponent } from './textarea/ref'; 
 export { default as DateComponent } from './date';
-export { default as DateRangeComponent } from './date/daterange';
 export { default as DateTimeComponent } from './datetime';
 export { default as RadioComponent } from './radio';
 export { default as SwitchComponent } from './switch';
@@ -32,7 +31,6 @@ export * from './dropdown/typed';
 export * from './message/typed';
 export * from './popup/typed';
 export * from './select/typed';
-export * from './date/typed';
 
 export * from './select/components';
 export * from './form/styles';

package/src/components/date/daterange.tsx

@@ -1,45 +0,0 @@
-import { useState } from 'react';
-import moment from 'moment';
-import DateRangePicker from '@wojtekmaj/react-daterange-picker';
-import { configDateRange } from '../../maps';
-import '@wojtekmaj/react-daterange-picker/dist/DateRangePicker.css';
-import 'react-calendar/dist/Calendar.css';
-import './daterangepicker.css';
-import { DateRangeWrapper } from './styles';
-import { TValueDateRange } from './typed';
-
-type TDateRangeComponent = {
-  $mode?: string;
-  startDate?: Date | null;
-  endDate?: Date | null;
-  evChange: (value: TValueDateRange) => void;
-  portalId?: string;
-}
-
-const DateRangeComponent = ({ $mode, startDate, endDate, evChange, portalId }: TDateRangeComponent) => {
-  const _startDate: Date | null = startDate || moment(configDateRange.startDate, 'YYYY-MM-DD').toDate();
-  const _endDate: Date | null = endDate || moment(configDateRange.endDate, 'YYYY-MM-DD').toDate();
-  const minDate = moment(configDateRange.minDate, 'YYYY-MM-DD').toDate();
-  const maxDate = moment().toDate();
-
-  const [value, setValue] = useState<TValueDateRange>([_startDate, _endDate]);
-
-  const onChange = (value: TValueDateRange) => {
-    setValue(value);
-    evChange && evChange(value);
-  }
-
-  return (
-    <DateRangeWrapper $mode={$mode}>
-      <DateRangePicker 
-        minDate={minDate}
-        maxDate={maxDate}
-        onChange={onChange} 
-        value={value}
-        clearIcon={null}
-        {...portalId && { portalContainer: document.getElementById(portalId) }} />
-    </DateRangeWrapper>
-  );
-}
-
-export default DateRangeComponent;

package/src/components/date/daterangepicker.css

@@ -1,96 +0,0 @@
-.react-daterange-picker {
-  font-family: var(--pri-ft-fm);
-  font-size: var(--pri-ft-sz);
-  color: var(--pri-clr);
-  background-color: var(--ter-clr-bg);
-  align-items: center;
-  border: 0;
-  border-radius: var(--sec-rd);
-  font-weight: 400;
-  height: 30px;
-  padding: 0 26px 0 16px;
-  position: relative;
-  width: 100%;
-}
-.react-daterange-picker__wrapper {
-  border: 0;
-  width: 100%;
-  justify-content: left;
-  display: inline-grid;
-  grid-auto-flow: column;
-}
-.react-calendar {
-  background-color: var(--pri-clr-bg);
-  border: 1px solid var(--sec-clr-ln);
-  box-shadow: var(--sec-shd-bx);
-  border-radius: var(--sec-rd);
-  border: 1px solid #a0a096;
-  font-family: var(--pri-ft-fm);
-  font-size: var(--pri-ft-sz);
-  color: var(--pri-clr);
-  line-height: 1.125em;
-  padding: 10px 15px;
-}
-.react-calendar__navigation__label__labelText {
-  color: #000;
-  font-size: 1em;
-  font-weight: 700;
-  height: 35px;
-  line-height: 35px;
-  position: relative;
-  text-align: center;
-}
-.react-calendar__tile {
-  font-size: 1em;
-  line-height: 1;
-  border-radius: 0;
-}
-.react-calendar__tile--now {
-  border-radius: 10px !important;
-}
-.react-calendar__tile--now.react-calendar__tile--active {
-  border-radius: 0 !important;
-}
-.react-calendar__tile--now.react-calendar__tile--rangeEnd.react-calendar__tile--active {
-  border-radius: 0 10px 10px 0 !important;
-}
-.react-calendar__tile--hover {
-  border-radius: 0;
-}
-.react-calendar__tile--active {
-  background-color: #fc5c64;
-  border: 1px solid #ec5b62;
-}
-.react-calendar__tile--active:enabled:hover, .react-calendar__tile--active:enabled:focus {
-  background-color: #fc5c64;
-  border: 1px solid #ec5b62;
-}
-.react-calendar__tile--rangeStart.react-calendar__tile--rangeEnd {
-  border-radius: 10px !important;
-}
-.react-calendar__tile--now.react-calendar__tile--rangeStart.react-calendar__tile--rangeEnd.react-calendar__tile--active {
-  border-radius: 10px !important;
-}
-.react-calendar__tile--rangeStart, .react-calendar__tile--hoverStart {
-  border-radius: 10px 0px 0 10px !important;
-}
-.react-calendar__tile--rangeEnd, .react-calendar__tile--hoverEnd {
-  border-radius: 0 10px 10px 0 !important;
-}
-.react-calendar__month-view__days {
-  gap: 1px 0;
-}
-.react-calendar__month-view__weekdays {
-  font-size: 1em;
-}
-.react-calendar__navigation__arrow {
-  font-size: 1.5em;
-}
-.react-daterange-picker__calendar {
-  z-index: 100;
-}
-.react-daterange-picker__button {
-  position: absolute;
-  right: 0;
-}
-  

package/src/components/date/typed.ts

@@ -1,3 +0,0 @@
-type ValuePiece = Date | null;
-
-export type TValueDateRange = ValuePiece | [ValuePiece, ValuePiece];