plataforma-fundacao-componentes 2.22.23 → 2.22.26

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -10,6 +10,8 @@ interface AccordionProps {
10
10
  onChange: (value: boolean) => void;
11
11
  className?: string;
12
12
  children?: React.ReactNode;
13
+ shadow?: boolean;
14
+ animateOpacity?: boolean;
13
15
  }
14
16
  export default function Accordion(props: AccordionProps): JSX.Element;
15
17
  export {};
@@ -0,0 +1,17 @@
1
+ import React, { ReactElement, ReactNode } from 'react';
2
+ import { ActionCardThemes } from '../../libraries/ActionCardThemes';
3
+ import './ActionCard.scss';
4
+ export interface ActionCardProps {
5
+ text: string;
6
+ theme?: ActionCardThemes;
7
+ element?: JSX.Element | ReactElement | ReactNode;
8
+ }
9
+ declare function ActionCard(props: ActionCardProps): JSX.Element;
10
+ declare namespace ActionCard {
11
+ var defaultProps: {
12
+ theme: ActionCardThemes;
13
+ text: string;
14
+ };
15
+ }
16
+ declare const _default: React.MemoExoticComponent<typeof ActionCard>;
17
+ export default _default;
@@ -0,0 +1,9 @@
1
+ /// <reference types="react" />
2
+ declare const _default: {
3
+ title: string;
4
+ };
5
+ export default _default;
6
+ export declare const White: () => JSX.Element;
7
+ export declare const Green: () => JSX.Element;
8
+ export declare const Danger: () => JSX.Element;
9
+ export declare const Dark: () => JSX.Element;
@@ -13,7 +13,10 @@ export function SecondaryWhiteBackground(): JSX.Element;
13
13
  export function SecondaryDisabled(): JSX.Element;
14
14
  export function StyleDefault(): JSX.Element;
15
15
  export function Danger(): JSX.Element;
16
+ export function DangerDarker(): JSX.Element;
17
+ export function DangerDarkerOutline(): JSX.Element;
16
18
  export function DangerDisabled(): JSX.Element;
19
+ export function Black(): JSX.Element;
17
20
  export function FullWidth(): JSX.Element;
18
21
  export function LeftIcon(): JSX.Element;
19
22
  export function LeftIconFullWidth(): JSX.Element;
@@ -3,7 +3,7 @@ import { BlobFileTypes } from '../../libraries/BlobFileTypes';
3
3
  import { ButtonThemes } from '../../libraries/ButtonTheme';
4
4
  import { ButtonProps } from '../button/Button';
5
5
  import './ButtonFileUpload.scss';
6
- interface ButtonFileUploadProps {
6
+ export interface ButtonFileUploadProps {
7
7
  label?: string;
8
8
  leftIcon?: React.ReactNode;
9
9
  theme?: ButtonThemes;
@@ -5,6 +5,7 @@ interface ContainerProps extends React.HTMLAttributes<HTMLDivElement> {
5
5
  'tooltip-position'?: TooltipPosition;
6
6
  'tooltip-text'?: string;
7
7
  fluid?: boolean;
8
+ position?: 'fixed' | 'absolute';
8
9
  verticalPadding?: boolean;
9
10
  hasMobileButton?: boolean;
10
11
  hasHeader?: boolean;
@@ -5,4 +5,5 @@ declare namespace _default {
5
5
  export default _default;
6
6
  export function FirstExample(): JSX.Element;
7
7
  export function NoContentExample(): JSX.Element;
8
+ export function ContainerExample(): JSX.Element;
8
9
  import FullHeightContainer from "./FullHeightContainer";
@@ -1,8 +1,9 @@
1
- declare namespace _default {
2
- export const title: string;
3
- export { Notification as component };
4
- }
1
+ /// <reference types="react" />
2
+ import Notification from './Notification';
3
+ declare const _default: {
4
+ title: string;
5
+ component: typeof Notification;
6
+ };
5
7
  export default _default;
6
- export function NumberCount(): JSX.Element;
7
- export function ExclamationPoint(): JSX.Element;
8
- import Notification from "./Notification";
8
+ export declare const NumberCount: () => JSX.Element;
9
+ export declare const ExclamationPoint: () => JSX.Element;
@@ -0,0 +1,2 @@
1
+ import { Dispatch, SetStateAction } from 'react';
2
+ export default function useStorageState<T = any>(storage: Storage, key: string, initialValue?: T | undefined): [T | undefined, Dispatch<SetStateAction<T | undefined>>];
@@ -0,0 +1,10 @@
1
+ /// <reference types="react" />
2
+ import useStorageState from './useStorageState';
3
+ declare const _default: {
4
+ title: string;
5
+ component: typeof useStorageState;
6
+ };
7
+ export default _default;
8
+ export declare const LocalStorageExample: () => JSX.Element;
9
+ export declare const SessionStorageExample: () => JSX.Element;
10
+ export declare const ObjectExample: () => JSX.Element;
package/dist/index.css CHANGED
@@ -306,6 +306,8 @@ h5 {
306
306
  border-bottom: 1px solid #cdd3cd; }
307
307
  .component-accordion.component-accordion-opened .component-accordion-arrow {
308
308
  transform: rotateZ(180deg); }
309
+ .component-accordion .component-accordion-shadow {
310
+ box-shadow: 0 1px 2px 0 rgba(90, 100, 90, 0.3); }
309
311
 
310
312
  @import url("https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
311
313
  @import url("https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200;0,300;0,400;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,600;1,700;1,800;1,900&display=swap");
@@ -963,6 +965,167 @@ h5 {
963
965
  .scroll-white::-webkit-scrollbar-thumb:hover {
964
966
  background-color: #bfc7bf; }
965
967
 
968
+ .action-card {
969
+ position: relative;
970
+ border-radius: 8px;
971
+ padding: 16px 24px;
972
+ width: 100%; }
973
+ .action-card .action {
974
+ margin-top: 12px; }
975
+ .action-card .bar {
976
+ position: absolute;
977
+ left: 0;
978
+ top: 0;
979
+ width: 8px;
980
+ border-top-left-radius: 8px;
981
+ border-bottom-left-radius: 8px;
982
+ height: 100%; }
983
+ .action-card.primary {
984
+ background-color: #fefefe;
985
+ color: #121212; }
986
+ .action-card.primary .bar {
987
+ background-color: #3fa110; }
988
+ .action-card.secondary {
989
+ background-color: #3fa110;
990
+ color: #fefefe; }
991
+ .action-card.secondary .bar {
992
+ background-color: #33820d; }
993
+ .action-card.danger {
994
+ background-color: #ffb4b4;
995
+ color: #803230; }
996
+ .action-card.danger .bar {
997
+ background-color: #e60000; }
998
+ .action-card.darker {
999
+ background-color: #323c32;
1000
+ color: #fefefe; }
1001
+ .action-card.darker .bar {
1002
+ background-color: #121212; }
1003
+
1004
+ @import url("https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
1005
+ @import url("https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200;0,300;0,400;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,600;1,700;1,800;1,900&display=swap");
1006
+ :export {
1007
+ white: #fefefe;
1008
+ darkenWhite: #efefef;
1009
+ black: #121212;
1010
+ transparent: rgba(0, 0, 0, 0);
1011
+ primary: #3fa110;
1012
+ primaryDark: #33820d;
1013
+ primaryLight: #d7e6c8;
1014
+ secondaryDarker: #323c32;
1015
+ secondaryDark: #5a645a;
1016
+ secondary: #828a82;
1017
+ secondaryLight: #cdd3cd;
1018
+ secondaryLighter: #f8f9f7;
1019
+ danger: #e60000;
1020
+ dangerLight: #ffb4b4;
1021
+ dangerDark: #ab4745;
1022
+ warning: #ffcd00;
1023
+ warningLight: #ffeb98;
1024
+ warningDark: #765f00; }
1025
+
1026
+ :root {
1027
+ --rowPadding: 0;
1028
+ --colPadding: 8px; }
1029
+
1030
+ :export {
1031
+ widthXs: 575.98px;
1032
+ widthSm: 767.98px;
1033
+ widthMd: 991.98px;
1034
+ widthLg: 1199.98px; }
1035
+
1036
+ body.sb-show-main.sb-main-padded {
1037
+ padding: 15px; }
1038
+
1039
+ *.nunito {
1040
+ font-family: "Nunito", sans-serif; }
1041
+
1042
+ *:not(.nunito) {
1043
+ font-family: "Exo 2", sans-serif; }
1044
+
1045
+ .document-grabbing {
1046
+ cursor: -webkit-grabbing !important;
1047
+ cursor: grabbing !important; }
1048
+
1049
+ h1 {
1050
+ font-size: 36px;
1051
+ font-weight: 600;
1052
+ margin: 0; }
1053
+
1054
+ h2 {
1055
+ font-size: 32px;
1056
+ font-weight: 500;
1057
+ margin: 0; }
1058
+
1059
+ h3 {
1060
+ font-size: 24px;
1061
+ font-weight: 500;
1062
+ margin: 0; }
1063
+
1064
+ h4 {
1065
+ font-size: 18px;
1066
+ font-weight: 500;
1067
+ margin: 0; }
1068
+
1069
+ h5 {
1070
+ font-family: "Nunito", sans-serif;
1071
+ font-size: 24px;
1072
+ font-weight: 400;
1073
+ margin: 0; }
1074
+
1075
+ .fade-enter {
1076
+ transition: opacity 0.2s ease;
1077
+ position: absolute;
1078
+ opacity: 0; }
1079
+
1080
+ .fade-enter-active {
1081
+ position: absolute;
1082
+ opacity: 1; }
1083
+
1084
+ .fade-exit {
1085
+ transition: opacity 0.15s ease;
1086
+ position: absolute;
1087
+ opacity: 1; }
1088
+
1089
+ .fade-exit-active {
1090
+ position: absolute;
1091
+ opacity: 0; }
1092
+
1093
+ .fade-exit-done {
1094
+ position: absolute;
1095
+ opacity: 0; }
1096
+
1097
+ * {
1098
+ box-sizing: border-box; }
1099
+ *::-webkit-scrollbar-track {
1100
+ background-color: #f8f9f7;
1101
+ border-radius: 20px; }
1102
+ *::-webkit-scrollbar {
1103
+ width: 12px;
1104
+ height: 12px; }
1105
+ *::-webkit-scrollbar-thumb {
1106
+ -webkit-transition: all 0.3s ease;
1107
+ transition: all 0.3s ease;
1108
+ border-radius: 10px;
1109
+ background-color: #cdd3cd;
1110
+ border-width: 3px;
1111
+ border-style: solid;
1112
+ border-color: #f8f9f7; }
1113
+ *::-webkit-scrollbar-thumb:hover {
1114
+ border-width: 2px;
1115
+ background-color: #bfc7bf; }
1116
+ *::-webkit-scrollbar-button {
1117
+ display: none; }
1118
+
1119
+ .scroll-white::-webkit-scrollbar-track {
1120
+ background-color: #fefefe;
1121
+ border-radius: 20px; }
1122
+
1123
+ .scroll-white::-webkit-scrollbar-thumb {
1124
+ background-color: #cdd3cd;
1125
+ border-color: #fefefe; }
1126
+ .scroll-white::-webkit-scrollbar-thumb:hover {
1127
+ background-color: #bfc7bf; }
1128
+
966
1129
  @media screen and (max-width: 575.98px) {
967
1130
  .component-advanced-semi-header,
968
1131
  .component-advanced-semi-header-semi-clear,
@@ -1624,6 +1787,20 @@ h5 {
1624
1787
  background-color: #368a0e;
1625
1788
  transform: scale(0.95); }
1626
1789
 
1790
+ .component-button:not(:disabled).component-button-primary-dark {
1791
+ background-color: #33820d;
1792
+ border-color: #33820d;
1793
+ color: #fefefe; }
1794
+ .component-button:not(:disabled).component-button-primary-dark:focus {
1795
+ border-color: #33820d; }
1796
+ .component-button:not(:disabled).component-button-primary-dark:hover {
1797
+ border-color: #2a6b0b;
1798
+ background-color: #2a6b0b; }
1799
+ .component-button:not(:disabled).component-button-primary-dark:active {
1800
+ border-color: #2a6b0b;
1801
+ background-color: #2a6b0b;
1802
+ transform: scale(0.95); }
1803
+
1627
1804
  .component-button:not(:disabled).component-button-primary-light {
1628
1805
  background-color: #d7e6c8;
1629
1806
  border-color: #d7e6c8;
@@ -1667,6 +1844,27 @@ h5 {
1667
1844
  background-color: #cd0000;
1668
1845
  transform: scale(0.95); }
1669
1846
 
1847
+ .component-button:not(:disabled).component-button-danger-darker {
1848
+ background-color: #803230;
1849
+ border-color: #803230;
1850
+ color: #fefefe; }
1851
+ .component-button:not(:disabled).component-button-danger-darker:focus {
1852
+ border-color: #803230; }
1853
+ .component-button:not(:disabled).component-button-danger-darker:hover {
1854
+ border-color: #6d2b29;
1855
+ background-color: #6d2b29; }
1856
+ .component-button:not(:disabled).component-button-danger-darker:active {
1857
+ border-color: #6d2b29;
1858
+ background-color: #6d2b29;
1859
+ transform: scale(0.95); }
1860
+
1861
+ .component-button:not(:disabled).component-button-danger-darker-outline {
1862
+ background-color: rgba(0, 0, 0, 0);
1863
+ border-color: #803230;
1864
+ color: #803230; }
1865
+ .component-button:not(:disabled).component-button-danger-darker-outline:active {
1866
+ transform: scale(0.95); }
1867
+
1670
1868
  .component-button:not(:disabled).component-button-default {
1671
1869
  background-color: rgba(0, 0, 0, 0);
1672
1870
  border-color: rgba(0, 0, 0, 0);
@@ -1678,6 +1876,13 @@ h5 {
1678
1876
  .component-button:not(:disabled).component-button-default:active {
1679
1877
  transform: scale(0.95); }
1680
1878
 
1879
+ .component-button:not(:disabled).component-button-black {
1880
+ background-color: #121212;
1881
+ border-color: #121212;
1882
+ color: #fefefe; }
1883
+ .component-button:not(:disabled).component-button-black:active {
1884
+ transform: scale(0.95); }
1885
+
1681
1886
  .component-button:not(:disabled).component-button-default-primary {
1682
1887
  position: relative;
1683
1888
  background-color: rgba(0, 0, 0, 0);
@@ -7411,9 +7616,6 @@ h5 {
7411
7616
  align-items: center;
7412
7617
  justify-content: center;
7413
7618
  transition: transform 0.3s ease, opacity 0.3s ease; }
7414
- .component-date-picker-clear-button svg {
7415
- max-height: 0.72em;
7416
- max-width: 0.72em; }
7417
7619
 
7418
7620
  @import url("https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
7419
7621
  @import url("https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200;0,300;0,400;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,600;1,700;1,800;1,900&display=swap");
@@ -9498,6 +9700,7 @@ h5 {
9498
9700
  flex-flow: column;
9499
9701
  flex: 1 1 auto;
9500
9702
  overflow-y: overlay;
9703
+ position: relative;
9501
9704
  padding: 0; }
9502
9705
  .full-height-container .full-height-container-row-content.vertical-padding {
9503
9706
  padding-top: 12px;
package/dist/index.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import Accordion from './components/accordion/Accordion';
2
2
  import Aconteceu from './components/aconteceu/Aconteceu';
3
+ import ActionCard from './components/actionCard/ActionCard';
3
4
  import AdvancedSemiHeader from './components/advancedSemiHeader/AdvancedSemiHeader';
4
5
  import AnimatedLink from './components/animatedLink/AnimatedLink';
5
6
  import AssembleiaItem from './components/assembleiaItem/AssembleiaItem';
@@ -88,10 +89,12 @@ import useDropOpened from './hooks/useDropOpened/useDropOpened';
88
89
  import useModalManager from './hooks/useModalManager/useModalManager';
89
90
  import useProgressiveCount from './hooks/useProgressiveCount/useProgressiveCount';
90
91
  import useScreenSize from './hooks/useScreenSize/useScreenSize';
92
+ import useStorageState from './hooks/useStorageState/useStorageState';
91
93
  import useTimeElapsed from './hooks/useTimeElapsed/useTimeElapsed';
92
94
  import useToastManager from './hooks/useToastManager/useToastManager';
93
95
  import useValidatedState from './hooks/useValidatedState/useValidatedState';
94
96
  export * from './components/modal/ModalTypes';
97
+ export * from './libraries/ActionCardThemes';
95
98
  export * from './libraries/BlobFileTypes';
96
99
  export * from './libraries/ButtonTheme';
97
100
  export * from './libraries/CardThemes';
@@ -108,4 +111,4 @@ export * from './libraries/RadioButtonTheme';
108
111
  export * from './libraries/SicrediLogoThemes';
109
112
  export * from './libraries/Toast';
110
113
  export * from './libraries/Tooltips';
111
- export { Accordion, AdvancedSemiHeader, AssembleiaItem, AssembleiaPauta, Aconteceu, AnimatedLink, Banner, BannerAssembleia, BannerPesquisaCpfCnpj, BigBlockButton, BlocoDeNotas, BreadCrumb, Button, ButtonFileUpload, BlocoMinhasAssembleias, BottomNavigation, Card, Carousel, CarouselPersona, CarouselTouchFrendly, Checkbox, Col, Collapse, Container, DatePicker, Doughnut, DoughnutSquare, DropdownItem, DropdownMenu, EditableVideoItem, ElementPaginator, Etapas, Etiqueta, FileLoader, FileUpload, FooterSicredi, FullHeightContainer, Header, HeaderSeparator, HeaderSearchField, IconButton, IconButtonWithLabel, Information, Input, InputArea, ItemDropdownDownload, InformativoAssembleiasComImagem, InformativoAssembleiasComVideo, Menu, MenuItem, Modal, ModalManager, ModulosTitle, MoneyByMonth, MoneyMonthLineChart, NotaEdit, Notification, PageSubTitle, PageTitle, Paginator, PreviaVideo, ProgressBar, RadioButton, Row, SearchBlocoDeNotas, Select, Switch, Table, TypedTable, TableFileNameAndAction, TableActions, TableWithOverflow, TextEditor, LeftCheckboxWithLabel, ActionsColumn, Tabs, Toast, ToastManager, Tooltip, TooltipManager, TopLoader, VideoItem, VideoPlayer, VideoModal, useCallbackedState, useCarouselBehaviour, useControlledTimer, useDraggableContainer, useDropOpened, useModalManager, useProgressiveCount, useScreenSize, useTimeElapsed, useToastManager, useValidatedState };
114
+ export { Accordion, ActionCard, AdvancedSemiHeader, AssembleiaItem, AssembleiaPauta, Aconteceu, AnimatedLink, Banner, BannerAssembleia, BannerPesquisaCpfCnpj, BigBlockButton, BlocoDeNotas, BreadCrumb, Button, ButtonFileUpload, BlocoMinhasAssembleias, BottomNavigation, Card, Carousel, CarouselPersona, CarouselTouchFrendly, Checkbox, Col, Collapse, Container, DatePicker, Doughnut, DoughnutSquare, DropdownItem, DropdownMenu, EditableVideoItem, ElementPaginator, Etapas, Etiqueta, FileLoader, FileUpload, FooterSicredi, FullHeightContainer, Header, HeaderSeparator, HeaderSearchField, IconButton, IconButtonWithLabel, Information, Input, InputArea, ItemDropdownDownload, InformativoAssembleiasComImagem, InformativoAssembleiasComVideo, Menu, MenuItem, Modal, ModalManager, ModulosTitle, MoneyByMonth, MoneyMonthLineChart, NotaEdit, Notification, PageSubTitle, PageTitle, Paginator, PreviaVideo, ProgressBar, RadioButton, Row, SearchBlocoDeNotas, Select, Switch, Table, TypedTable, TableFileNameAndAction, TableActions, TableWithOverflow, TextEditor, LeftCheckboxWithLabel, ActionsColumn, Tabs, Toast, ToastManager, Tooltip, TooltipManager, TopLoader, VideoItem, VideoPlayer, VideoModal, useCallbackedState, useCarouselBehaviour, useControlledTimer, useDraggableContainer, useDropOpened, useModalManager, useProgressiveCount, useScreenSize, useStorageState, useTimeElapsed, useToastManager, useValidatedState, };