@digigov/ui 0.11.0 → 0.12.2

package/{es → src}/themes/govgr.js

@@ -1,79 +1,83 @@
 import { createMuiTheme, responsiveFontSizes } from '@material-ui/core/styles';
-export var PORTAL_URL = 'http://34.194.85.187/';
-var linkStyle = {
+
+export const PORTAL_URL = 'http://34.194.85.187/';
+
+const linkStyle = {
   color: '#046ec5',
   '&:hover': {
-    color: '#4c2c92'
+    color: '#4c2c92',
   },
   '&:visited': {
-    color: '#4c2c92'
+    color: '#4c2c92',
   },
   '&:active': {
-    color: '#212529'
-  }
+    color: '#212529',
+  },
 };
-var theme = createMuiTheme({
+let theme = createMuiTheme({
   overrides: {
     MuiCssBaseline: {
       '@global': {
         body: {
-          background: '#fff'
+          background: '#fff',
         },
-        a: linkStyle
-      }
+        a: linkStyle,
+      },
     },
     MuiBaseLink: {
-      root: linkStyle
+      root: linkStyle,
     },
     MuiButton: {
       root: {
-        borderRadius: 4
-      }
-    }
+        borderRadius: 4,
+      },
+    },
   },
   shape: {
-    borderRadius: 8
+    borderRadius: 8,
   },
   palette: {
     primary: {
-      main: '#003476'
+      main: '#003476',
     },
     secondary: {
-      main: '#046ec5'
+      main: '#046ec5',
     },
     success: {
-      main: '#00703c'
+      main: '#00703c',
     },
     error: {
-      main: '#ca2e2e'
+      main: '#ca2e2e',
     },
     warning: {
-      main: '#C25400'
+      main: '#C25400',
     },
     info: {
-      main: '#036ec5'
-    }
+      main: '#036ec5',
+    },
   },
   typography: {
-    htmlFontSize: 14
+    htmlFontSize: 14,
   },
   header: {
     logo: {
-      height: 45
+      height: 45,
     },
     border: {
       width: '100%',
       height: 8,
-      background: '#046ec5'
+      background: '#046ec5',
     },
-    height: '75px'
+    height: '75px',
   },
   footer: {
     main: '#eeeeee',
     link: '#00aeef',
-    contrastText: '#fff'
+    contrastText: '#fff',
   },
-  spacing: 8
+  spacing: 8,
 });
+
 theme = responsiveFontSizes(theme, ['sm', 'md', 'lg']);
-export default theme;
+
+export default theme;

package/src/themes/grnet.js

@@ -0,0 +1,109 @@
+import React from 'react';
+import {
+  createMuiTheme,
+  responsiveFontSizes,
+  makeStyles,
+} from '@material-ui/core/styles';
+import logo from '../govgr/Logo/govgr-logo.svg';
+import { useTranslation } from '@digigov/ui/app/i18n';
+import Title from '@digigov/ui/typography/Title';
+import Container from '@material-ui/core/Container';
+import Toolbar from '@material-ui/core/Toolbar';
+import Typography from '@material-ui/core/Typography';
+import Grid from '@digigov/react-core/Grid';
+import MuiAppBar from '@material-ui/core/AppBar';
+
+const useStyles = makeStyles((theme) => ({
+  title: {
+    lineHeight: '2em',
+    marginBottom: 0,
+    marginLeft: '5px',
+    marginRight: theme.spacing(2),
+  },
+  appbar: {
+    background: theme.palette.footer.main,
+    color: theme.palette.footer.contrastText,
+  },
+  text: {
+    flexGrow: 1,
+  },
+}));
+
+const Logo = () => {
+  const { t } = useTranslation();
+  const styles = useStyles();
+  return (
+    <div style={{ display: 'flex' }}>
+      <img
+        src={logo}
+        height={24}
+        width={24}
+        style={{ display: 'flex', marginTop: '6px' }}
+      />
+      <Title size="sm" className={styles.title}>
+        {t('header_appbar.govgr_icon')}
+      </Title>
+    </div>
+  );
+};
+
+const Footer = () => {
+  const styles = useStyles();
+  return (
+    <MuiAppBar className={styles.appbar} position="static">
+      <Grid container>
+        <Container>
+          <Toolbar variant="dense" disableGutters>
+            <Typography variant="body2" className={styles.text}>
+              Powered by open source software
+            </Typography>
+          </Toolbar>
+        </Container>
+      </Grid>
+    </MuiAppBar>
+  );
+};
+
+let theme = createMuiTheme({
+  overrides: {
+    MuiButton: {
+      root: {
+        borderRadius: 0,
+      },
+    },
+  },
+  palette: {
+    primary: {
+      main: '#283d70',
+    },
+    secondary: {
+      main: '#ffffff',
+      dark: '#f5f5f5',
+    },
+    footer: {
+      main: '#e1e1e2',
+      contrastText: '#000',
+    },
+  },
+  typography: {
+    htmlFontSize: 14,
+  },
+  header: {
+    logo: {
+      component: Logo,
+      height: 45,
+    },
+    border: {
+      width: '92%',
+      height: '5px',
+    },
+    height: '45px',
+  },
+  footer: {
+    component: Footer,
+  },
+});
+
+theme = responsiveFontSizes(theme, ['sm', 'md', 'lg']);
+
+export default theme;

package/src/themes/index.tsx

@@ -0,0 +1,38 @@
+import { ReactChild } from 'react';
+import { useTheme, makeStyles } from '@material-ui/core';
+
+interface Logo {
+  component: ReactChild;
+  height: string | number;
+}
+
+interface Footer {
+  link: string;
+  contrastText: string;
+  main: string;
+  component?: ReactChild;
+}
+
+interface Header {
+  logo: Logo;
+  border: {
+    width: string | number;
+    height: string | number;
+    background: string;
+  };
+  height: string | number;
+}
+
+declare module '@material-ui/core/styles/createMuiTheme' {
+  interface Theme {
+    header: Header;
+    footer: Footer;
+  }
+  // allow configuration using `createMuiTheme`
+  interface ThemeOptions {
+    header: Header;
+    footer: Footer;
+  }
+}
+
+export { useTheme, makeStyles };

package/src/typography/Caption.tsx

@@ -0,0 +1,15 @@
+import HeadingCaption, {
+  HeadingCaptionProps,
+} from '@digigov/react-core/HeadingCaption';
+import withDeprecation from '@digigov/ui/utils/withDeprecation';
+
+export const Caption = withDeprecation(HeadingCaption, {
+  name: 'Caption',
+  rename: 'HeadingCaption',
+});
+
+export interface CaptionProps extends HeadingCaptionProps {
+  ref?: React.Ref<HTMLSpanElement>;
+}
+
+export default Caption;

package/src/typography/NormalText.tsx

@@ -0,0 +1,7 @@
+import NormalText, {
+  NormalTextProps as CoreNormalTextProps,
+} from '@digigov/react-core/NormalText';
+
+export { NormalText };
+export interface NormalTextProps extends CoreNormalTextProps {}
+export default NormalText;

package/src/typography/Paragraph.tsx

@@ -0,0 +1,9 @@
+import Paragraph, {
+  ParagraphProps as CoreParagraphProps,
+} from '@digigov/react-core/Paragraph';
+
+export interface ParagraphProps extends CoreParagraphProps {
+  ref?: React.Ref<HTMLParagraphElement>;
+}
+
+export default Paragraph;

package/src/typography/Title.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import Heading, { HeadingProps } from '@digigov/react-core/Heading';
+import withDeprecation from '@digigov/ui/utils/withDeprecation';
+
+export interface TitleProps extends Omit<HeadingProps, 'size'> {
+  size?: 'xl' | 'lg' | 'md' | 'sm';
+  component?: 'h1' | 'h2' | 'h3' | 'h4';
+  ref?: React.Ref<HTMLHeadingElement>;
+}
+const sizeMappings: Record<string, HeadingProps['size']> = {
+  xl: 'xl',
+  lg: 'l',
+  md: 'm',
+  sm: 's',
+};
+
+export const Title: React.FC<TitleProps> = withDeprecation(
+  ({ size = 'xl', component, children, ...props }) => {
+    const newSize = sizeMappings[size];
+    return (
+      <Heading size={newSize} element={component} {...props}>
+        {children}
+      </Heading>
+    );
+  },
+  {
+    name: 'Title',
+    rename: 'Heading',
+    props: {
+      dense: {
+        error: true,
+      },
+      size: {
+        values: {
+          xs: {
+            error: true,
+          },
+        },
+      },
+      component: {
+        values: {
+          h5: {
+            error: true,
+          },
+        },
+      },
+    },
+  }
+);
+
+export default Title;

package/src/utils/evaluateBrowserVersion.ts

@@ -0,0 +1,346 @@
+//copied from https://github.com/faisalman/ua-parser-js/blob/master/src/ua-parser.js
+
+const EMPTY = '',
+  UNKNOWN = '?',
+  FUNC_TYPE = 'function',
+  UNDEF_TYPE = 'undefined',
+  OBJ_TYPE = 'object',
+  STR_TYPE = 'string',
+  NAME = 'name',
+  VERSION = 'version';
+
+const BROWSER = 'Browser',
+  CHROME = 'Chrome',
+  FIREFOX = 'Firefox',
+  OPERA = 'Opera';
+
+const oldSafariMap = {
+  '1.0': '/8',
+  '1.2': '/1',
+  '1.3': '/3',
+  '2.0': '/412',
+  '2.0.2': '/416',
+  '2.0.3': '/417',
+  '2.0.4': '/419',
+  '?': '/',
+};
+
+function strMapper(str, map) {
+  for (const i in map) {
+    // check if current value is array
+    if (typeof map[i] === OBJ_TYPE && map[i].length > 0) {
+      for (let j = 0; j < map[i].length; j++) {
+        if (map[i][j].includes(str)) {
+          return i === UNKNOWN ? undefined : i;
+        }
+      }
+    } else if (map[i].includes(str)) {
+      return i === UNKNOWN ? undefined : i;
+    }
+  }
+  return str;
+}
+function majorize(version) {
+  return typeof version === STR_TYPE
+    ? version.replace(/[^\d.]/g, EMPTY).split('.')[0]
+    : undefined;
+}
+
+function rgxMapper(browser, ua, arrays) {
+  let i = 0,
+    j,
+    k,
+    p,
+    q,
+    matches,
+    match;
+
+  // loop through all regexes maps
+  while (i < arrays.length && !matches) {
+    const regex = arrays[i], // even sequence (0,2,4,..)
+      props = arrays[i + 1]; // odd sequence (1,3,5,..)
+    j = k = 0;
+
+    // try matching uastring with regexes
+    while (j < regex.length && !matches) {
+      matches = regex[j++].exec(ua);
+
+      if (matches) {
+        for (p = 0; p < props.length; p++) {
+          match = matches[++k];
+          q = props[p];
+          // check if given property is actually array
+          if (typeof q === OBJ_TYPE && q.length > 0) {
+            if (q.length == 2) {
+              if (typeof q[1] == FUNC_TYPE) {
+                // assign modified match
+                browser[q[0]] = q[1].call(browser, match);
+              } else {
+                // assign given value, ignore regex match
+                browser[q[0]] = q[1];
+              }
+            } else if (q.length == 3) {
+              // check whether function or regex
+              if (typeof q[1] === FUNC_TYPE && !(q[1].exec && q[1].test)) {
+                // call function (usually string mapper)
+                browser[q[0]] = match
+                  ? q[1].call(browser, match, q[2])
+                  : undefined;
+              } else {
+                // sanitize match using given regex
+                browser[q[0]] = match ? match.replace(q[1], q[2]) : undefined;
+              }
+            } else if (q.length == 4) {
+              browser[q[0]] = match
+                ? q[3].call(browser, match.replace(q[1], q[2]))
+                : undefined;
+            }
+          } else {
+            browser[q] = match ? match : undefined;
+          }
+        }
+      }
+    }
+    i += 2;
+  }
+}
+
+const browserRegexes = [
+  [
+    /\b(?:crmo|crios)\/([\w.]+)/i, // Chrome for Android/iOS
+  ],
+  [VERSION, [NAME, 'Chrome']],
+  [
+    /edg(?:e|ios|a)?\/([\w.]+)/i, // Microsoft Edge
+  ],
+  [VERSION, [NAME, 'Edge']],
+  [
+    // Presto based
+    /(opera mini)\/([-\w.]+)/i, // Opera Mini
+    /(opera [mobiletab]{3,6})\b.+version\/([-\w.]+)/i, // Opera Mobi/Tablet
+    /(opera)(?:.+version\/|[/ ]+)([\w.]+)/i, // Opera
+  ],
+  [NAME, VERSION],
+  [
+    /opios[/ ]+([\w.]+)/i, // Opera mini on iphone >= 8.0
+  ],
+  [VERSION, [NAME, OPERA + ' Mini']],
+  [
+    /\bopr\/([\w.]+)/i, // Opera Webkit
+  ],
+  [VERSION, [NAME, OPERA]],
+  [
+    // Mixed
+    /(kindle)\/([\w.]+)/i, // Kindle
+    /(lunascape|maxthon|netfront|jasmine|blazer)[/ ]?([\w.]*)/i, // Lunascape/Maxthon/Netfront/Jasmine/Blazer
+    // Trident based
+    /(avant |iemobile|slim)(?:browser)?[/ ]?([\w.]*)/i, // Avant/IEMobile/SlimBrowser
+    /(ba?idubrowser)[/ ]?([\w.]+)/i, // Baidu Browser
+    /(?:ms|\()(ie) ([\w.]+)/i, // Internet Explorer
+
+    // Webkit/KHTML based                                               // Flock/RockMelt/Midori/Epiphany/Silk/Skyfire/Bolt/Iron/Iridium/PhantomJS/Bowser/QupZilla/Falkon
+    /(flock|rockmelt|midori|epiphany|silk|skyfire|ovibrowser|bolt|iron|vivaldi|iridium|phantomjs|bowser|quark|qupzilla|falkon|rekonq|puffin|brave|whale|qqbrowserlite|qq)\/([-\w.]+)/i,
+    // Rekonq/Puffin/Brave/Whale/QQBrowserLite/QQ, aka ShouQ
+    /(weibo)__([\d.]+)/i, // Weibo
+  ],
+  [NAME, VERSION],
+  [
+    /(?:\buc? ?browser|(?:juc.+)ucweb)[/ ]?([\w.]+)/i, // UCBrowser
+  ],
+  [VERSION, [NAME, 'UC' + BROWSER]],
+  [
+    /\bqbcore\/([\w.]+)/i, // WeChat Desktop for Windows Built-in Browser
+  ],
+  [VERSION, [NAME, 'WeChat(Win) Desktop']],
+  [
+    /micromessenger\/([\w.]+)/i, // WeChat
+  ],
+  [VERSION, [NAME, 'WeChat']],
+  [
+    /konqueror\/([\w.]+)/i, // Konqueror
+  ],
+  [VERSION, [NAME, 'Konqueror']],
+  [
+    /trident.+rv[: ]([\w.]{1,9})\b.+like gecko/i, // IE11
+  ],
+  [VERSION, [NAME, 'IE']],
+  [
+    /yabrowser\/([\w.]+)/i, // Yandex
+  ],
+  [VERSION, [NAME, 'Yandex']],
+  [
+    /(avast|avg)\/([\w.]+)/i, // Avast/AVG Secure Browser
+  ],
+  [[NAME, /(.+)/, '$1 Secure ' + BROWSER], VERSION],
+  [
+    /\bfocus\/([\w.]+)/i, // Firefox Focus
+  ],
+  [VERSION, [NAME, FIREFOX + ' Focus']],
+  [
+    /\bopt\/([\w.]+)/i, // Opera Touch
+  ],
+  [VERSION, [NAME, OPERA + ' Touch']],
+  [
+    /coc_coc\w+\/([\w.]+)/i, // Coc Coc Browser
+  ],
+  [VERSION, [NAME, 'Coc Coc']],
+  [
+    /dolfin\/([\w.]+)/i, // Dolphin
+  ],
+  [VERSION, [NAME, 'Dolphin']],
+  [
+    /coast\/([\w.]+)/i, // Opera Coast
+  ],
+  [VERSION, [NAME, OPERA + ' Coast']],
+  [
+    /miuibrowser\/([\w.]+)/i, // MIUI Browser
+  ],
+  [VERSION, [NAME, 'MIUI ' + BROWSER]],
+  [
+    /fxios\/([-\w.]+)/i, // Firefox for iOS
+  ],
+  [VERSION, [NAME, FIREFOX]],
+  [
+    /\bqihu|(qi?ho?o?|360)browser/i, // 360
+  ],
+  [[NAME, '360 ' + BROWSER]],
+  [/(oculus|samsung|sailfish)browser\/([\w.]+)/i],
+  [[NAME, /(.+)/, '$1 ' + BROWSER], VERSION],
+  [
+    // Oculus/Samsung/Sailfish Browser
+    /(comodo_dragon)\/([\w.]+)/i, // Comodo Dragon
+  ],
+  [[NAME, /_/g, ' '], VERSION],
+  [
+    /(electron)\/([\w.]+) safari/i, // Electron-based App
+    /(tesla)(?: qtcarbrowser|\/(20\d\d\.[-\w.]+))/i, // Tesla
+    /m?(qqbrowser|baiduboxapp|2345Explorer)[/ ]?([\w.]+)/i, // QQBrowser/Baidu App/2345 Browser
+  ],
+  [NAME, VERSION],
+  [
+    /(metasr)[/ ]?([\w.]+)/i, // SouGouBrowser
+    /(lbbrowser)/i, // LieBao Browser
+  ],
+  [NAME],
+  [
+    // WebView
+    /((?:fban\/fbios|fb_iab\/fb4a)(?!.+fbav)|;fbav\/([\w.]+);)/i, // Facebook App for iOS & Android
+  ],
+  [[NAME, 'Facebook'], VERSION],
+  [
+    /safari (line)\/([\w.]+)/i, // Line App for iOS
+    /\b(line)\/([\w.]+)\/iab/i, // Line App for Android
+    /(chromium|instagram)[/ ]([-\w.]+)/i, // Chromium/Instagram
+  ],
+  [NAME, VERSION],
+  [
+    /\bgsa\/([\w.]+) .*safari\//i, // Google Search Appliance on iOS
+  ],
+  [VERSION, [NAME, 'GSA']],
+  [
+    /headlesschrome(?:\/([\w.]+)| )/i, // Chrome Headless
+  ],
+  [VERSION, [NAME, CHROME + ' Headless']],
+  [
+    / wv\).+(chrome)\/([\w.]+)/i, // Chrome WebView
+  ],
+  [[NAME, CHROME + ' WebView'], VERSION],
+  [
+    /droid.+ version\/([\w.]+)\b.+(?:mobile safari|safari)/i, // Android Browser
+  ],
+  [VERSION, [NAME, 'Android ' + BROWSER]],
+  [
+    /(chrome|omniweb|arora|[tizenoka]{5} ?browser)\/v?([\w.]+)/i, // Chrome/OmniWeb/Arora/Tizen/Nokia
+  ],
+  [NAME, VERSION],
+  [
+    /version\/([\w.]+) .*mobile\/\w+ (safari)/i, // Mobile Safari
+  ],
+  [VERSION, [NAME, 'Mobile Safari']],
+  [
+    /version\/([\w.]+) .*(mobile ?safari|safari)/i, // Safari & Safari Mobile
+  ],
+  [VERSION, NAME],
+  [
+    /webkit.+?(mobile ?safari|safari)(\/[\w.]+)/i, // Safari < 3.0
+  ],
+  [NAME, [VERSION, strMapper, oldSafariMap]],
+  [/(webkit|khtml)\/([\w.]+)/i],
+  [NAME, VERSION],
+  [
+    // Gecko based
+    /(navigator|netscape\d?)\/([-\w.]+)/i, // Netscape
+  ],
+  [[NAME, 'Netscape'], VERSION],
+  [
+    /mobile vr; rv:([\w.]+)\).+firefox/i, // Firefox Reality
+  ],
+  [VERSION, [NAME, FIREFOX + ' Reality']],
+  [
+    /ekiohf.+(flow)\/([\w.]+)/i, // Flow
+    /(swiftfox)/i, // Swiftfox
+    /(icedragon|iceweasel|camino|chimera|fennec|maemo browser|minimo|conkeror|klar)[/ ]?([\w.+]+)/i,
+    // IceDragon/Iceweasel/Camino/Chimera/Fennec/Maemo/Minimo/Conkeror/Klar
+    /(seamonkey|k-meleon|icecat|iceape|firebird|phoenix|palemoon|basilisk|waterfox)\/([-\w.]+)$/i,
+    // Firefox/SeaMonkey/K-Meleon/IceCat/IceApe/Firebird/Phoenix
+    /(firefox)\/([\w.]+)/i, // Other Firefox-based
+    /(mozilla)\/([\w.]+) .+rv:.+gecko\/\d+/i, // Mozilla
+
+    // Other
+    /(polaris|lynx|dillo|icab|doris|amaya|w3m|netsurf|sleipnir|obigo|mosaic|(?:go|ice|up)[. ]?browser)[-/ ]?v?([\w.]+)/i,
+    // Polaris/Lynx/Dillo/iCab/Doris/Amaya/w3m/NetSurf/Sleipnir/Obigo/Mosaic/Go/ICE/UP.Browser
+    /(links) \(([\w.]+)/i, // Links
+  ],
+  [NAME, VERSION],
+];
+
+const _ua =
+  typeof window !== UNDEF_TYPE && window.navigator && window.navigator.userAgent
+    ? window.navigator.userAgent
+    : EMPTY;
+
+interface Browser {
+  name?: string;
+  version?: string;
+}
+
+export function evaluateBrowserVersion(): Browser {
+  const browser: Browser = { name: '', version: '' };
+  rgxMapper(browser, _ua, browserRegexes);
+  browser.version = majorize(browser.version);
+  return browser;
+}
+
+type Mobile = RegExpMatchArray | null;
+
+export const isMobile = {
+  Android: function (): Mobile {
+    return navigator.userAgent.match(/Android/i);
+  },
+  BlackBerry: function (): Mobile {
+    return navigator.userAgent.match(/BlackBerry/i);
+  },
+  iOS: function (): Mobile {
+    return navigator.userAgent.match(/iPhone|iPad|iPod/i);
+  },
+  Opera: function (): Mobile {
+    return navigator.userAgent.match(/Opera Mini/i);
+  },
+  Windows: function (): Mobile {
+    return (
+      navigator.userAgent.match(/IEMobile/i) ||
+      navigator.userAgent.match(/WPDesktop/i)
+    );
+  },
+  any: function (): Mobile {
+    return (
+      isMobile.Android() ||
+      isMobile.BlackBerry() ||
+      isMobile.iOS() ||
+      isMobile.Opera() ||
+      isMobile.Windows()
+    );
+  },
+};
+
+export default evaluateBrowserVersion;