@sisense/sdk-shared-ui 0.1.0 → 1.26.0

package/src/lib/Typography/themes/typographyTheme.tsx

@@ -0,0 +1,170 @@
+import createTheme from '@mui/material/styles/createTheme';
+
+// import { injectStylesWithWrapper } from '@sbi/styleguide';
+
+// import { calcStyles } from './uiCustomization';
+import { siColors } from '../../themes';
+
+// injectStylesWithWrapper && injectStylesWithWrapper(calcStyles);
+
+declare module '@mui/material/Typography' {
+  interface TypographyPropsVariantOverrides {
+    titleHero: true;
+    titleBig: true;
+    titleMedium: true;
+    titleSmall: true;
+    subTitle: true;
+    bodyLabel: true;
+    laccent: true;
+    bodyParagraph: true;
+    paccent: true;
+    bodyUI: true;
+    overline: true;
+    caption: true;
+    annotation: true;
+    code: true;
+  }
+}
+
+export const typographyTheme = createTheme({
+  components: {
+    MuiTypography: {
+      variants: [
+        {
+          props: { variant: 'titleHero' },
+          style: {
+            fontWeight: 600,
+            fontSize: 30,
+            lineHeight: '36px',
+            letterSpacing: -0.5,
+          },
+        },
+        {
+          props: { variant: 'titleBig' },
+          style: {
+            fontWeight: 400,
+            fontSize: 21,
+            lineHeight: '24px',
+            letterSpacing: -0.2,
+          },
+        },
+        {
+          props: { variant: 'titleMedium' },
+          style: {
+            fontWeight: 600,
+            fontSize: '18px',
+            lineHeight: '24px',
+          },
+        },
+        {
+          props: { variant: 'titleSmall' },
+          style: {
+            fontWeight: 600,
+            fontSize: '15px',
+            lineHeight: '20px',
+          },
+        },
+        {
+          props: { variant: 'subTitle' },
+          style: {
+            fontWeight: 700,
+            fontSize: '13px',
+            lineHeight: '16px',
+            letterSpacing: '0.2px',
+          },
+        },
+        {
+          props: { variant: 'bodyLabel' },
+          style: {
+            fontWeight: 400,
+            fontSize: '13px',
+            lineHeight: '16px',
+            letterSpacing: '0.1px',
+          },
+        },
+        {
+          props: { variant: 'laccent' },
+          style: {
+            fontWeight: 600,
+            fontSize: '13px',
+            lineHeight: '16px',
+            letterSpacing: '0.1px',
+          },
+        },
+        {
+          props: { variant: 'bodyParagraph' },
+          style: {
+            fontWeight: 400,
+            fontSize: '13px',
+            lineHeight: '18px',
+          },
+        },
+        {
+          props: { variant: 'paccent' },
+          style: {
+            fontWeight: 600,
+            fontSize: '13px',
+            lineHeight: '18px',
+          },
+        },
+        {
+          props: { variant: 'bodyUI' },
+          style: {
+            fontWeight: 400,
+            fontSize: '13px',
+            lineHeight: '20px',
+            letterSpacing: '0.3px',
+          },
+        },
+        {
+          props: { variant: 'overline' },
+          style: {
+            fontWeight: 400,
+            fontSize: '11px',
+            lineHeight: '16px',
+            letterSpacing: '1.5px',
+          },
+        },
+        {
+          props: { variant: 'caption' },
+          style: {
+            fontWeight: 700,
+            fontSize: '11px',
+            lineHeight: '14px',
+            letterSpacing: '0.5px',
+          },
+        },
+        {
+          props: { variant: 'annotation' },
+          style: {
+            fontWeight: 400,
+            fontSize: '11px',
+            lineHeight: '16px',
+            letterSpacing: '0.3px',
+          },
+        },
+        {
+          props: { variant: 'code' },
+          style: {
+            fontFamily: 'Hack',
+            fontWeight: 400,
+            fontSize: '13px',
+            lineHeight: '20px',
+          },
+        },
+      ],
+      styleOverrides: {
+        root: {
+          display: 'inline-block',
+          fontFamily: 'Open Sans',
+          color: siColors.StTextColors.content,
+          '::first-letter': {
+            textTransform: 'capitalize',
+          },
+        },
+      },
+    },
+  },
+});
+
+export type TypographyTheme = typeof typographyTheme;

package/src/lib/Typography/themes/uiCustomization.ts

@@ -0,0 +1,10 @@
+export {};
+
+// import { CalcStyles, DesignSettings } from '@sbi/styleguide';
+//
+// export const calcStyles: CalcStyles = (designSettings: DesignSettings) => ({
+//     '.MuiTypography-root': {
+//         fontFamily: designSettings.typography.fontFamily,
+//         color: designSettings.typography.primaryTextColor,
+//     },
+// });

package/src/lib/constants/styleguideConstants.ts

@@ -0,0 +1,8 @@
+export const styleguideConstants = Object.freeze({
+  SISENSE_NAMESPACE: 'sis-scope',
+  TEXT_PRIMARY: 'slf-text-primary',
+  TEXT_SECONDARY: 'slf-text-secondary',
+  TEXT_SECONDARY_HOVER: 'slf-text-secondary-hov',
+  TEXT_HREF: 'slf-text-href',
+  TEXT_HREF_HOVER: 'slf-text-href-hov',
+});

package/src/lib/index.ts

@@ -1 +1,17 @@
 export * from './DEPRECATED_Icon';
+export * from './DEPRECATED_Button';
+export * from './CheckableList';
+export * from './Checkbox';
+export * from './DEPRECATED_Checkbox';
+export * from './DEPRECATED_Toggle';
+export * from './DEPRECATED_Tooltip';
+export * from './Icon';
+export * from './Input';
+export * from './LazyLoader';
+export * from './Popover';
+export * from './RadioButton';
+export * from './Tooltip';
+export * from './Typography';
+export * from './TablePagination';
+export * from './Menu';
+export * from './Dropdown';

package/src/lib/styles/colors.module.scss

@@ -0,0 +1,10 @@
+// For colors that are not available in sisense-styleguide.
+// Placeholder names from: https://chir.ag/projects/name-that-color
+
+$ATHENS_GRAY: #f4f4f8;
+$BLUE_RIBBON: #0765e3;
+$DODGER_BLUE: #1eaff3;
+$PORCELAIN: #e7e8ea;
+$COLOR-TEXT: #5b6372;
+$COLOR-TEXT-SECONDARY: #9ea2ab;
+$MISCHKA: #dee1e7;

package/src/lib/styles/sisenseStyleguideReactColors.scss

@@ -0,0 +1,57 @@
+/* texts */
+$commonLinkBlue: #1eaff4;
+$fore: #7f899c;
+$wizardFore: #5b6372;
+$foreDisabled: #b3b3b3;
+$foreHeader: #2c3342;
+$foreSubtitle: #b3b3b3;
+$forePlaceholder: #bec1c6;
+$foreNonchosen: #56535b;
+$foreHover: #3a4356;
+$textSearch: #2c3344;
+$stepCaption: #9ea2ab;
+$captionUnder: #cbced7;
+
+/* backgrounds */
+$back: #fff;
+$backHover: #ffff9c;
+$backDisabled: #f9f9f9;
+$backHeader: #cbcfd7;
+$backToolbar: #fafafa;
+$separator: #e4e4e4;
+$wizardSeparator: #edeef1;
+$lightSeparator: #ededed;
+
+/* borders */
+$border: #e9eaed;
+$borderSearch: #3a4356;
+
+/* buttons */
+$buttonCancel: #e7e7e7;
+$buttonCancelText: #7c7c7c;
+$buttonOk: #ffd617;
+$buttonOkText: #866b02;
+$buttonNext: #ffcb05;
+$buttonOkHovered: #ffe981;
+
+$hyperlink: #1faff3;
+$hyperlinkHovered: #0065e3;
+
+/* states */
+$errRed: #fa7573;
+$negativeSign: #fa5656;
+$positiveSign: #35d7be;
+$noResults: #b7b5b5;
+$selectedItem: #3a4356;
+$selectedItemBackground: #f9f9fb;
+$highlight: #5c6372;
+$highlightListItem: #f4f4f8;
+$highlightOrange: #eca80b;
+
+/*tags*/
+$color1: $highlightListItem;
+$color2: #2c779b;
+$color3: #6cb8cd;
+$color4: #a3b866;
+$color5: #e7a927;
+$color6: #d04a15;

package/src/lib/styles/style_styleguide_react/_variables.deprecated.scss

@@ -0,0 +1,107 @@
+//----------------------- Colors ---------------------------
+
+$font-color-1: #56535b;
+$font-color-2: #9f9e9e;
+$font-color-3: #212633;
+$font-color-4: #c7c7c7;
+$delete: #fc7470;
+$gray-0: #f9f9f9;
+$gray-1: #f5f5f5;
+$gray-2: #e6e6e6;
+$gray-3: #e5e5e5;
+$gray-4: #dcdcdc;
+$gray-5: #dadada;
+$gray-6: #d8d8d8;
+$gray-7: #d5d5d5;
+$gray-8: #cdcdcd;
+$gray-9: #aaa;
+$gray-10: #999;
+$gray-11: #979797;
+$gray-12: #bababa;
+$gray-13: #3f4a5a;
+$gray-14: #56535b;
+$gray-15: #f2f2f2;
+$gray-16: #777;
+$gray-17: #e8e8e8;
+$gray-18: #56635b;
+$gray-19: #b8b8b8;
+$gray-20: #6d6d6d;
+$gray-21: #666;
+$gray-22: #7d7d7d;
+$gray-24: #747474;
+
+$back-revision: #444f67;
+$green-0: #6ed956;
+
+$turquoise-blue: #00b9c5;
+$turquoise-light-blue: #00daeb;
+
+$scroll-back: #c8c8c8;
+$scroll-back-hover: #56535b;
+
+$default-svg-color: #56535b;
+$default-svg-color-cancel: #ff8c9a;
+$default-svg-color-save: #65d049;
+$default-svg-color-add: #00daeb;
+$default-svg-color-login: #2c3342;
+
+$baaaase-color: #2c3342;
+
+// background
+
+$back: #fff;
+$back-zone: $gray-15;
+$back-container: #fff;
+$back-hover: #ffff9c;
+
+$back-alternating: #f8f8f8;
+$back-cancel: #cecece;
+$back-cancel-hover: #fc7571;
+$back-cancel-accented: #fa8a8a;
+$back-ok: #6ed855;
+$back-ok-hover: #6ee555;
+$back-header: #e7e7e7;
+$back-toolbar: #fafafa;
+
+$button-yes: #57ba3e;
+$button-no: #fe746e;
+$button-yes-hovered: #6ad44f;
+$button-no-hovered: #fb9995;
+
+$border-ltgray: $gray-2;
+
+$border-toolbar: $gray-9;
+$background-toolbar: #f6f6f6;
+
+// foregound
+
+$fore: #272a34;
+$fore-disabled: #b3b3b3;
+$fore-header: $baaaase-color;
+$fore-subtitle: $fore-disabled;
+$fore-placeholder: #ececec;
+$fore-nonchosen: $gray-14;
+$x-blue: #00dae9;
+$common-link-blue: #008db8;
+$err-red: #fa7573;
+$selected-item: #01cbd9;
+
+//----------------------- Sizing ---------------------------
+
+$size-header-xl: 24px;
+$size-header-l: 16px;
+$size-header-m: 15px;
+$size-header-s: 13px;
+$size-exception-mn: 14px;
+$size-body-xl: 16px;
+$size-body-l: 13px;
+$size-body-m: 12.5px;
+$size-body-s: 12px;
+$size-body-xs: 11px;
+$size-fl-icon: 24px;
+
+$button-ok-cancel-height: 36px;
+
+$scroll-width: 8px;
+
+$border-elements: 1px solid $gray-7;

package/src/lib/styles/style_styleguide_react/_variables.scss

@@ -0,0 +1,100 @@
+@import '_variables.deprecated';
+
+// Variables
+//
+// This section describes base colors
+//
+// Styleguide 1.0
+
+// Base colors
+//
+// $color-text                  - Base text color
+// $color-text-secondary        - Secondary text color
+// $color-text-selected-hover   - Base text color selected/hover
+// $color-brand                 - Brand color
+// $color-placeholder           - Placeholder color (input placeholder text)
+// $color-error-cancel          - Error/cancel color
+// $color-apply-approve         - Aply/aprrove color
+// $color-hyperlinks            - Hyperinks color
+// <br/>
+// Add class with the same name as variable to apply color. Like &lt;div class="color-brand"&gt;Some text&lt;/div&gt;
+//
+// markup:
+// <div style="background: {$modifiers};" class="styleguide-color">{$modifiers}</div>
+// <div style="color: {$modifiers}">Text color {$modifiers}</div>
+//
+// Styleguide 1.1
+$color-text: #5b6372 !default;
+$color-text-secondary: #9ea2ab !default;
+$color-text-selected-hover: #3a4356 !default;
+$color-brand: #ffcb05 !default;
+$color-placeholder: #b3b3b3 !default;
+
+$color-error-cancel: #fa5656 !default;
+$color-apply-approve: #35d7be !default;
+$color-hyperlinks: #1faff3 !default;
+$color-hover-on-grey: #dee1e7 !default;
+
+// Gray colors
+//
+// $color-gray-1    - Gray color (Divider scroll bar labeld)
+// $color-gray-2    - Gray color (Scroll bars hover)
+// $color-gray-3    - Gray color (Divider on gray small dividers toolip shadow)
+// $color-gray-4    - Gray color (Hover state for menus / Panes)
+// $color-gray      - Base gray color
+// $color-bg        - White space
+// $color-login-icon-dark - Sisense logo color for light background
+//
+// markup:
+// <div style="background: {$modifiers};" class="styleguide-color">{$modifiers}</div>
+// <div class="{$modifiers}">{$modifiers}</div>
+//
+// Styleguide 1.2
+$color-gray-1: #edeef1 !default;
+$color-gray-2: #d1d1d7 !default;
+$color-gray-3: #cbced7 !default;
+$color-gray-4: #f4f4f8 !default;
+$color-gray: #edeef1 !default;
+$color-bg: #fff !default;
+$color-login-icon-dark: #2c3342 !default;
+
+// Common
+//
+// <b>$styleguide-anchor-class -</b>    Anchor class name for all components; <br />
+// <b>$app-icon-size-default -</b>      SVG icons default size; <br />
+// <b>$toolbar-height -</b>             Toolbar element height; <br />
+//
+// Styleguide 1.3
+$styleguide-anchor-class: sis-scope !default;
+$app-icon-size-default: 24px !default;
+$toolbar-height: 48px !default;
+
+// Text
+//
+// <b>$font-family -</b>            Default font family; <br />
+// <b>$font-size-main -</b>         Default font size; <br />
+// <b>$font-size-header -</b>       Default header font size; <br />
+// <b>$font-size-semibig -</b>      Default semi big font size; <br />
+// <b>$font-size-big -</b>          Default big font size; <br />
+// <b>$line-height-main -</b>       Default line height; <br />
+// <b>$text-color-primary -</b>     Default text color; <br />
+// <b>$text-color-secondary -</b>   Secondary text color; <br />
+//
+// Styleguide 1.4
+
+$font-family: 'Open Sans' !default;
+$font-size-main: 13px !default;
+$font-size-header: 15px !default;
+$font-size-semibig: 20px !default;
+$font-size-big: 25px !default;
+$line-height-main: normal !default;
+$text-color-primary: $color-text !default;
+$text-color-secondary: $color-text-secondary !default;
+
+// export css variables to be used in js styles
+:export {
+  loginDarkColor: $color-login-icon-dark;
+  darkBtnHoverColor: $color-gray-4;
+  greyHoverColor: $color-hover-on-grey;
+  defaultBackgroundColor: $color-bg;
+}

package/src/lib/styles/style_styleguide_react/base.scss

@@ -0,0 +1,9 @@
+@import 'colors';
+@import 'fonts';
+@import 'mixins';
+
+$appHeaderHeight: 48px;
+
+$modalBorderRadious: 4px;
+$notificationVerticalSpacing: 9px;
+$notificationHorisontalSpacing: 16px;

package/src/lib/styles/style_styleguide_react/colors.scss

@@ -0,0 +1,71 @@
+/* texts */
+$commonLinkBlue: #1eaff4;
+$fore: #7f899c;
+$wizardFore: #5b6372;
+$foreDisabled: #b3b3b3;
+$foreHeader: #2c3342;
+$foreSubtitle: #b3b3b3;
+$forePlaceholder: #bec1c6;
+$foreNonchosen: #56535b;
+$foreHover: #3a4356;
+$textSearch: #2c3344;
+$stepCaption: #9ea2ab;
+$captionUnder: #cbced7;
+$title: #999;
+$textCode: #1d1d1b;
+
+/* backgrounds */
+$back: #fff;
+$backHover: #ffff9c;
+$backDisabled: #f9f9f9;
+$backHeader: #cbcfd7;
+$backToolbar: #fafafa;
+$separator: #e4e4e4;
+$wizardSeparator: #edeef1;
+$lightSeparator: #ededed;
+$lineSeparator: #bdc1c7;
+$listItemHover: rgba(91, 99, 114, 0.1);
+
+/* borders */
+$border: #e9eaed;
+$borderSearch: #3a4356;
+$borderSeparator: #5b6373;
+$borderJaqlEditor: #e7e8ea;
+
+/*scrollbar*/
+$scrollbarHovered: #9da1aa;
+
+/* buttons */
+$buttonCancel: #f4f4f8;
+$buttonCancelHovered: #d1d1d7;
+$buttonCancelText: #7c7c7c;
+$buttonOk: #ffd617;
+$buttonOkText: #866b02;
+$buttonNext: #ffcb05;
+$buttonOkHovered: #ffe981;
+$buttonSecondary: #ffffff;
+$buttonSecondaryHovered: #f4f4f8;
+$buttonSecondaryDisabled: #bdc1c7;
+
+$hyperlink: #1faff3;
+$hyperlinkHovered: #0065e3;
+
+/* states */
+$errRed: #fa7573;
+$negativeSign: #fa5656;
+$positiveSign: #35d7be;
+$noResults: #b7b5b5;
+$selectedItem: #3a4356;
+$selectedItemBackground: #f9f9fb;
+$highlight: #5c6372;
+$highlightListItem: #f4f4f8;
+$highlightOrange: #eca80b;
+
+/*tags*/
+$color1: $highlightListItem;
+$color2: #2c779b;
+$color3: #6cb8cd;
+$color4: #a3b866;
+$color5: #e7a927;
+$color6: #d04a15;
+$color7: #f4f4f8;

package/src/lib/styles/style_styleguide_react/exports/colors.exports.scss

@@ -0,0 +1,69 @@
+@import '../colors.scss';
+
+:export {
+  highlightListItem: $highlightListItem;
+  listItemHover: $listItemHover;
+  captionUnder: $captionUnder;
+  commonLinkBlue: $commonLinkBlue;
+  fore: $fore;
+  wizardFore: $fore;
+  foreDisabled: $foreDisabled;
+  foreHeader: $foreHeader;
+  foreSubtitle: $foreSubtitle;
+  forePlaceholder: $forePlaceholder;
+  foreNonchosen: $foreNonchosen;
+  foreHover: $foreHover;
+  textSearch: $textSearch;
+  stepCaption: $stepCaption;
+  captionUnder: $captionUnder;
+  title: $title;
+  textCode: $textCode;
+
+  back: $back;
+  backHover: $backHover;
+  backDisabled: $backDisabled;
+  backHeader: $backHeader;
+  backToolbar: $backToolbar;
+  separator: $separator;
+  wizardSeparator: $wizardSeparator;
+  lightSeparator: $lightSeparator;
+  lineSeparator: $lineSeparator;
+  listItemHover: $listItemHover;
+
+  border: $border;
+  borderSearch: $borderSearch;
+  borderSeparator: $borderSeparator;
+  borderJaqlEditor: $borderJaqlEditor;
+  scrollbarHovered: $scrollbarHovered;
+  buttonCancel: $buttonCancel;
+  buttonCancelHovered: $buttonCancelHovered;
+  buttonCancelText: $buttonCancelText;
+  buttonOk: $buttonOk;
+  buttonOkText: $buttonOkText;
+  buttonNext: $buttonNext;
+  buttonOkHovered: $buttonOkHovered;
+  buttonSecondary: $buttonSecondary;
+  buttonSecondaryHovered: $buttonSecondaryHovered;
+  buttonSecondaryDisabled: $buttonSecondaryDisabled;
+
+  hyperlink: $hyperlink;
+  hyperlinkHovered: $hyperlinkHovered;
+
+  errRed: $errRed;
+  negativeSign: $negativeSign;
+  positiveSign: $positiveSign;
+  noResults: $noResults;
+  selectedItem: $selectedItem;
+  selectedItemBackground: $selectedItemBackground;
+  highlight: $highlight;
+  highlightListItem: $highlightListItem;
+  highlightOrange: $highlightOrange;
+
+  color1: $color1;
+  color2: $color2;
+  color3: $color3;
+  color4: $color4;
+  color5: $color5;
+  color6: $color6;
+  color7: $color7;
+}

package/src/lib/styles/style_styleguide_react/exports/fonts.exports.scss

@@ -0,0 +1,33 @@
+@import '../fonts.scss';
+
+:export {
+  paddingLarge: $paddingLarge;
+
+  /* fonts families */
+  font: $font;
+  fontHeader: $fontHeader, 'PT Sans Narrow';
+  fontFacelift: $fontFacelift;
+  fontFamily: $fontFamily;
+
+  /* sizes */
+  sizeSmall: $sizeSmall;
+  sizeMedium: $sizeMedium;
+  sizeLarge: $sizeLarge;
+  sizeMediumModal: $sizeMediumModal;
+  sizeDefault: $sizeMedium;
+
+  /* padding */
+  paddingLarge: $paddingLarge;
+  paddingSmall: $paddingSmall;
+
+  /* height */
+  heightMedium: $heightMedium;
+  heightLarge: $heightLarge;
+
+  /* line height */
+  lineHeightMedium: $lineHeightMedium;
+  lineHeightLarge: $lineHeightLarge;
+
+  /* font weight */
+  fontWeightBold: $fontWeightBold;
+}

package/src/lib/styles/style_styleguide_react/fonts.scss

@@ -0,0 +1,27 @@
+/* fonts families */
+$font: ubuntulight;
+$fontHeader: abelregular, 'PT Sans Narrow';
+$fontFacelift: facelift;
+$fontFamily: 'Open Sans';
+
+/* sizes */
+$sizeSmall: 12px;
+$sizeMedium: 13px;
+$sizeLarge: 16px;
+$sizeMediumModal: 15px;
+$sizeDefault: $sizeMedium;
+
+/* padding */
+$paddingLarge: 16px;
+$paddingSmall: 12px;
+
+/* height */
+$heightMedium: 16px;
+$heightLarge: 18px;
+
+/* line height */
+$lineHeightMedium: 18px;
+$lineHeightLarge: 20px;
+
+/* font weight */
+$fontWeightBold: bold;