wca-designsystem 0.0.21 → 0.0.23

package/src/components/organismos/Calendario/styles.ts

@@ -0,0 +1,128 @@
+import styled, { css } from 'styled-components';
+
+type StylesProps = {
+  color?: string;
+};
+
+export const CalendarioWrapper = styled.div<StylesProps>`
+  ${({ color, theme }) => css`
+    .fc-header-toolbar {
+      max-width: 212px;
+
+      h2 {
+        color: ${color};
+        font-size: ${theme.sizes.meddium};
+        font-weight: 600;
+      }
+    }
+
+    .fc .fc-toolbar {
+      justify-content: start;
+      position: relative;
+    }
+
+    .fc-toolbar-chunk {
+      .fc-today-button {
+        display: none;
+      }
+
+      .fc-button-group {
+        display: flex;
+        gap: 15px;
+
+        button {
+          width: 30px;
+          height: 30px;
+          border-radius: 4px;
+          background-color: ${theme.colors.gray['300']};
+          border: none;
+          border-left: 2px solid ${color};
+          display: flex;
+          justify-content: center;
+          align-items: center;
+        }
+        .fc-button .fc-icon {
+          color: ${color};
+        }
+      }
+    }
+
+    .fc-col-header-cell {
+      background-color: ${color};
+      color: ${theme.colors.white};
+      height: 28px;
+      font-weight: 600;
+      font-size: ${theme.sizes.meddium};
+      border-right: 2px solid ${theme.colors.white};
+    }
+
+    .fc-daygrid-day-top {
+      flex-direction: row;
+      font-size: ${theme.sizes.large};
+      font-weight: bold;
+      color: ${theme.colors.gray['700']};
+    }
+  `}
+`;
+
+export const EventosWrapper = styled.div`
+  ${({ theme }) => css`
+    background-color: ${theme.colors.success};
+    color: ${theme.colors.white};
+    width: 100%;
+    font-weight: 600;
+    font-size: ${theme.sizes.meddium};
+    border: 1px solid ${theme.colors.gray['700']};
+
+    .fc-h-event {
+      border: none;
+      background-color: transparent;
+    }
+  `}
+`;
+
+export const CalendarioHeaderControl = styled.div`
+  ${() => css`
+    position: absolute;
+    right: 1%;
+    width: 950px;
+    display: flex;
+    gap: 24px;
+    justify-content: end;
+  `}
+`;
+
+export const CalendarioHeaderButtons = styled.div`
+  ${() => css`
+    display: flex;
+    gap: 30px;
+    margin-bottom: 15px;
+  `}
+`;
+
+export const CalendarioModalWrapper = styled.div<StylesProps>`
+  ${({ theme, color }) => css`
+    padding: 24px;
+    background-color: ${theme.colors.white};
+    border-radius: 4px;
+
+    h2 {
+      font-size: ${theme.sizes.meddium};
+      font-weight: 600;
+      color: ${color};
+    }
+
+    p {
+      font-size: ${theme.sizes.small};
+      color: ${theme.colors.gray['700']};
+      font-weight: 300;
+    }
+  `}
+`;
+
+export const CalendarioModalInputs = styled.div`
+  ${() => css`
+    display: flex;
+    gap: 24px;
+  `}
+`;

package/src/components/organismos/Tabela/Tabela.stories.tsx

@@ -134,8 +134,8 @@ const data: any = [
 
 const props: TabelaProps<any> = {
   data: data,
-  isLoading: false,
   columns: columns,
+  setPagination: () => console.log('aqui'),
   enableExpanding: false,
   enableRowSelection: false,
   enableRowActions: false,