@luminati-io/uikit 1.5.0 → 1.6.0

package/dist/uikit.umd.js.LICENSE.txt

@@ -7,6 +7,15 @@
  * Copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
  */
 
+/**
+ * Prism: Lightweight, robust, elegant syntax highlighting
+ *
+ * @license MIT <https://opensource.org/licenses/MIT>
+ * @author Lea Verou <https://lea.verou.me>
+ * @namespace
+ * @public
+ */
+
 /** @license React v16.13.1
  * react-is.production.min.js
  *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luminati-io/uikit",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "author": "Bright Data (http://brightdata.com)",
   "license": "ISC",
   "description": "brightdata's design system",
@@ -13,7 +13,9 @@
   ],
   "dependencies": {
     "@popperjs/core": "^2.11.6",
+    "babel-plugin-prismjs": "^2.1.0",
     "lodash": "^4.17.21",
+    "prismjs": "^1.29.0",
     "prop-types": "^15.8.1",
     "react-popper": "^2.3.0",
     "styled-components": "^5.3.6"

package/src/button/button.js

@@ -8,7 +8,6 @@ import {
     iconNames,
     toPixel,
     toButtonSize,
-    getCommonProps,
     getButtonColors,
     getIconProps,
 } from '../utils';
@@ -26,12 +25,13 @@ const Button = React.forwardRef((props, ref)=>{
         disabled,
         loading,
         loadingText,
+        ...rest
     } = props;
     const {isLeft, isRight, ...iconProps} = getIconProps('Button', props);
     return <StyledButton
       ref={ref}
       type="button"
-      {...getCommonProps(props)}
+      {...rest}
       variant={variant}
       size={size}
       disabled={loading||disabled}

package/src/code/code.js

@@ -0,0 +1,127 @@
+// LICENSE_CODE ZON
+'use strict'; /*jslint react:true*/
+
+import React, {useEffect} from 'react';
+import styled from 'styled-components';
+import Prism from 'prismjs';
+import PT from 'prop-types';
+import {theme} from '../utils';
+
+const Code = props=>{
+    const {text, lang} = props;
+    useEffect(()=>{
+        Prism.highlightAll();
+    }, [text, lang]);
+    return <CodeWrapper>
+      <code className={`language-${lang} content`}>{text}</code>
+    </CodeWrapper>;
+};
+Code.displayName = 'Code';
+Code.propTypes = {
+    text: PT.string,
+    // XXX davidg: config langs
+    lang: PT.string,
+};
+
+export default Code;
+
+const CodeWrapper = styled.pre`
+    &&& {
+        padding: 0;
+        font-family: ${theme.font_family.mono};
+        margin: 0;
+        border: none;
+        background-color: transparent;
+        width: 100%;
+        white-space: pre-wrap;
+        line-height: 1.5;
+        tab-size: 4;
+        text-align: left;
+        word-spacing: normal;
+        word-break: normal;
+        word-wrap: normal;
+        hyphens: none;
+        max-height: none;
+        code.content {
+            all: inherit;
+            color: ${theme.color.gray_8};
+            margin: 0;
+            padding: 0;
+            border: none;
+            background-color: transparent;
+            text-shadow: none;
+        }
+        ${'' /* prism selectors below */}
+        .token.comment,
+        .token.prolog,
+        .token.doctype,
+        .token.cdata {
+            color: slategray;
+        }
+
+        .token.punctuation {
+            color: #999;
+        }
+
+        .token.namespace {
+            opacity: .7;
+        }
+
+        .token.property,
+        .token.tag,
+        .token.boolean,
+        .token.constant,
+        .token.symbol,
+        .token.deleted {
+            color: #f8c555;
+        }
+
+        .token.selector,
+        .token.attr-name,
+        .token.string,
+        .token.char,
+        .token.builtin,
+        .token.inserted {
+            color: #7ec699;
+        }
+
+        .token.operator,
+        .token.entity,
+        .token.url,
+        .language-css .token.string,
+        .style .token.string {
+            color: #67cdcc;
+        }
+
+        .token.atrule,
+        .token.attr-value,
+        .token.keyword {
+            color: #cc99cd;
+        }
+
+        .token.function,
+        .token.number,
+        .token.class-name {
+            color: #f08d49;
+        }
+
+        .token.regex,
+        .token.important,
+        .token.variable {
+            color: #e90;
+        }
+
+        .token.important,
+        .token.bold {
+            font-weight: bold;
+        }
+        .token.italic {
+            font-style: italic;
+        }
+
+        .token.entity {
+            cursor: help;
+        }
+    }
+`;
+CodeWrapper.displayName = 'CodeWrapper';

package/src/code/index.js

@@ -0,0 +1,8 @@
+// LICENSE_CODE ZON
+'use strict'; /*jslint react:true*/
+
+import Code from './code';
+
+export {Code};
+
+export default {Code};

package/src/index.js

@@ -10,6 +10,7 @@ import {Progress, ProgressBar} from './progress';
 import Icon from './icon';
 import IconButton from './icon_button';
 import Tooltip, {withTooltip} from './tooltip';
+import {Code} from './code';
 
 export {
     Layout,
@@ -24,6 +25,7 @@ export {
     IconButton,
     Tooltip,
     withTooltip,
+    Code,
 };
 
 const UIKit = {
@@ -39,6 +41,7 @@ const UIKit = {
     IconButton,
     Tooltip,
     withTooltip,
+    Code,
 };
 
 export default UIKit;

package/src/link/link.js

@@ -4,26 +4,19 @@
 import React from 'react';
 import styled from 'styled-components';
 import PT from 'prop-types';
-import {
-    theme,
-    iconNames,
-    toPixel,
-    getCommonProps,
-    getIconProps,
-    getLinkProps,
-} from '../utils';
+import {theme, iconNames, toPixel, getIconProps, getLinkProps} from '../utils';
 import typography from '../Typography';
 import Icon from '../icon';
 
 const {Typography, Label} = typography;
 
 const Link = React.forwardRef((props, ref)=>{
-    const {text, variant, size, icon} = props;
+    const {text, variant, size, icon, ...rest} = props;
     const {isLeft, isRight, ...iconProps} = getIconProps('Link', props);
     const labelVariant = {lg: 'lg', sm: 'xs'}[size]||'base';
     return <StyledLink
       ref={ref}
-      {...getCommonProps(props)}
+      {...rest}
       {...getLinkProps(props)}
       variant={variant}
       size={size}