@surveycake/rc 3.0.0-alpha.1 → 3.0.0-alpha.2

package/CHANGELOG.md

@@ -2,6 +2,18 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+## [3.0.0-alpha.2](https://fox.25sprout.com/surveycake/sdk/rc/compare/v3.0.0-alpha.1...v3.0.0-alpha.2) (2021-10-05)
+
+
+### Features
+
+* add Link component ([77ec1bf](https://fox.25sprout.com/surveycake/sdk/rc/commit/77ec1bfabbef1156b205c44ad9cd59a320c089c8))
+
+
+### Bug Fixes
+
+* adjust button theme color ([efa67cb](https://fox.25sprout.com/surveycake/sdk/rc/commit/efa67cbf19c5bbc95bdaf49407e1893b22a82eda))
+
 ## [3.0.0-alpha.1](https://fox.25sprout.com/surveycake/sdk/rc/compare/v3.0.0-alpha.0...v3.0.0-alpha.1) (2021-10-04)
 
 

package/dist/V2/Link/Link.stories.d.ts

@@ -0,0 +1,5 @@
+import { Story, Meta } from '@storybook/react';
+import { LinkProps } from './index';
+declare const _default: Meta<LinkProps>;
+export default _default;
+export declare const Link: Story<LinkProps>;

package/dist/V2/Link/index.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { LinkProps as MUILinkProps } from '@material-ui/core/Link';
+export interface LinkProps extends MUILinkProps {
+}
+declare const Link: React.ForwardRefExoticComponent<Pick<LinkProps, "style" | "title" | "className" | "classes" | "innerRef" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "css" | "noWrap" | "gutterBottom" | "paragraph" | "align" | "display" | "variant" | "variantMapping" | "download" | "href" | "hrefLang" | "media" | "ping" | "rel" | "target" | "type" | "referrerPolicy" | "TypographyClasses" | "underline"> & React.RefAttributes<HTMLAnchorElement>>;
+export default Link;

package/dist/V2/Link/style.d.ts

@@ -0,0 +1 @@
+export declare const useStyles: (props: import("@material-ui/core/OverridableComponent").OverrideProps<import("@material-ui/core/Link").LinkTypeMap<{}, "a">, "a">) => Record<string, string>;

package/dist/V2/index.d.ts

@@ -3,5 +3,6 @@ export { theme } from './styles/theme';
 export { ThemeProvider } from './styles/ThemeProvider';
 export { default as Button } from './Button';
 export { default as Typography } from './Typography';
+export { default as Link } from './Link';
 export { default as Icon } from './Icon';
 export { CustomSvgIcon };

package/dist/rc.cjs.development.js

@@ -13,6 +13,7 @@ var styles$5 = require('@material-ui/core/styles');
 var emotionTheming = require('emotion-theming');
 var MUIButton = _interopDefault(require('@material-ui/core/Button'));
 var Typography$2 = _interopDefault(require('@material-ui/core/Typography'));
+var MUILink = _interopDefault(require('@material-ui/core/Link'));
 var Cancel = _interopDefault(require('@material-ui/icons/Cancel'));
 var Info = _interopDefault(require('@material-ui/icons/Info'));
 var CheckCircle$2 = _interopDefault(require('@material-ui/icons/CheckCircle'));
@@ -120,7 +121,7 @@ function _taggedTemplateLiteralLoose(strings, raw) {
 }
 
 function _templateObject() {
-  var data = _taggedTemplateLiteralLoose(["\n    @import url('https://fonts.googleapis.com/css?family=Noto+Sans+TC:400,500,700|Roboto:400,500,700&display=swap&subset=chinese-traditional');\n  "]);
+  var data = _taggedTemplateLiteralLoose(["\n    @import url('https://fonts.googleapis.com/css?family=Noto+Sans+TC:300,400,500,700|Roboto:400,500,700&display=swap&subset=chinese-traditional');\n  "]);
 
   _templateObject = function _templateObject() {
     return data;
@@ -284,7 +285,7 @@ styles$5.makeStyles(function (theme) {
     },
     text: {
       '& .MuiButton-label': {
-        color: theme.palette.grey.A400
+        color: theme.palette.grey[600]
       },
       '&:hover': {
         backgroundColor: theme.palette.primary.light,
@@ -293,7 +294,7 @@ styles$5.makeStyles(function (theme) {
         }
       },
       '&:disabled > .MuiButton-label': {
-        color: theme.palette.grey.A100
+        color: theme.palette.grey[400]
       }
     },
     outlined: {
@@ -309,13 +310,13 @@ styles$5.makeStyles(function (theme) {
     contained: {
       boxShadow: 'none',
       '& > .MuiButton-label': {
-        color: theme.palette.grey.A200
+        color: theme.palette.grey[500]
       },
       '&:hover': {
         boxShadow: 'none',
-        backgroundColor: theme.palette.grey[300],
+        backgroundColor: theme.palette.grey[100],
         '& .MuiButton-label': {
-          color: theme.palette.grey.A400
+          color: theme.palette.grey[600]
         }
       },
       '&:disabled': {
@@ -336,7 +337,7 @@ styles$5.makeStyles(function (theme) {
         }
       },
       '&:disabled': {
-        backgroundColor: theme.palette.grey[700],
+        backgroundColor: theme.palette.grey[300],
         '& > .MuiButton-label': {
           color: theme.palette.common.white
         }
@@ -386,9 +387,37 @@ React.forwardRef(function (props, ref) {
 
 var Typography =
 /*#__PURE__*/
+React.forwardRef(function (_ref, ref) {
+  var _ref$color = _ref.color,
+      color = _ref$color === void 0 ? 'textPrimary' : _ref$color,
+      rest = _objectWithoutPropertiesLoose(_ref, ["color"]);
+
+  return React__default.createElement(Typography$2, Object.assign({}, rest, {
+    ref: ref,
+    color: color
+  }));
+});
+
+var useStyles$1 =
+/*#__PURE__*/
+styles$5.makeStyles(function (theme) {
+  return {
+    underlineHover: {
+      '&:hover': {
+        color: function color(props) {
+          return props.color && (props.color === 'primary' || props.color === 'secondary') ? theme.palette[props.color].dark : theme.palette.primary.dark;
+        }
+      }
+    }
+  };
+});
+
+var Link =
+/*#__PURE__*/
 React.forwardRef(function (props, ref) {
-  return React__default.createElement(Typography$2, Object.assign({}, props, {
-    ref: ref
+  return React__default.createElement(MUILink, Object.assign({}, props, {
+    ref: ref,
+    classes: useStyles$1(props)
   }));
 });
 
@@ -419,6 +448,7 @@ var index$1 = {
   ThemeProvider: ThemeProvider,
   Button: Button,
   Typography: Typography,
+  Link: Link,
   Icon: Icon
 };
 
@@ -529,7 +559,7 @@ var styles = function styles(theme) {
   });
 };
 
-var useStyles$1 =
+var useStyles$2 =
 /*#__PURE__*/
 styles$5.makeStyles(styles);
 var Avatar =
@@ -546,7 +576,7 @@ React.forwardRef(function (_ref, ref) {
       height = _ref.height,
       restProps = _objectWithoutPropertiesLoose(_ref, ["children", "src", "alt", "size", "variant", "width", "height"]);
 
-  var classes = useStyles$1({
+  var classes = useStyles$2({
     width: width,
     height: height
   });
@@ -732,7 +762,7 @@ React.forwardRef(function (props, ref) {
   }, props), props.children);
 });
 
-var useStyles$2 =
+var useStyles$3 =
 /*#__PURE__*/
 styles$5.makeStyles({
   root: {
@@ -755,7 +785,7 @@ React.forwardRef(function (_ref, ref) {
       className = _ref.className,
       restProps = _objectWithoutPropertiesLoose(_ref, ["children", "className"]);
 
-  var _useStyles = useStyles$2(restProps),
+  var _useStyles = useStyles$3(restProps),
       root = _useStyles.root;
 
   return React__default.createElement(MuiCard, Object.assign({
@@ -1037,7 +1067,7 @@ function resolveThemeColorProp(theme, color) {
   return typeof color === 'function' ? color(theme) : resolveThemeColorByPath(theme, color);
 }
 
-var useStyles$3 =
+var useStyles$4 =
 /*#__PURE__*/
 makeStyles([['typography', function (theme, _ref) {
   var variant = _ref[0],
@@ -1065,7 +1095,7 @@ React.forwardRef(function (_ref, ref) {
       noWrap = _ref.noWrap,
       props = _objectWithoutPropertiesLoose(_ref, ["children", "className", "variant", "color", "weight", "gutterBottom", "noWrap"]);
 
-  var styles = useStyles$3([Vari, color, weight, gutterBottom, noWrap]);
+  var styles = useStyles$4([Vari, color, weight, gutterBottom, noWrap]);
   return React__default.createElement(Vari, Object.assign({}, props, {
     className: className ? emotion.cx(styles.typography, className) : styles.typography,
     ref: ref
@@ -1230,7 +1260,7 @@ function hexToRgba(originColor, opacity) {
   return "rgba(" + rgb + ", " + opacity + ")";
 }
 
-var useStyles$4 =
+var useStyles$5 =
 /*#__PURE__*/
 makeStyles([['tag', function (theme, _ref) {
   var originColor = _ref[0],
@@ -1248,7 +1278,7 @@ var Tag = function Tag(_ref) {
       onClick = _ref.onClick,
       props = _objectWithoutPropertiesLoose(_ref, ["children", "className", "color", "variant", "onClick"]);
 
-  var styles = useStyles$4([color, variant, !!onClick]);
+  var styles = useStyles$5([color, variant, !!onClick]);
   return React__default.createElement("div", Object.assign({}, props, {
     className: className ? emotion.cx(styles.tag, className) : styles.tag,
     onClick: onClick
@@ -1282,7 +1312,7 @@ React.forwardRef(function (_ref, ref) {
   }, restProps), children);
 });
 
-var useStyles$5 =
+var useStyles$6 =
 /*#__PURE__*/
 styles$5.makeStyles({
   root: {
@@ -1395,7 +1425,7 @@ var Select = function Select(props) {
       isVarItem = _props$isVarItem === void 0 ? false : _props$isVarItem,
       restProps = _objectWithoutPropertiesLoose(props, ["options", "value", "onChange", "variant", "multiple", "onOpen", "onClose", "height", "backgroundColor", "isVarItem"]);
 
-  var classes = useStyles$5(props);
+  var classes = useStyles$6(props);
   var itemClasses = itemStyle(props);
   return React__default.createElement(MuiSelect, Object.assign({
     className: classes.root,
@@ -1721,7 +1751,7 @@ var MenuList = function MenuList(_ref) {
   });
 };
 
-var useStyles$6 =
+var useStyles$7 =
 /*#__PURE__*/
 styles$5.makeStyles({
   root: {
@@ -1746,7 +1776,7 @@ var MenuItem = function MenuItem(props) {
   var children = props.children,
       restProps = _objectWithoutPropertiesLoose(props, ["children", "backgroundColor", "color", "hoverBackgroundColor", "hoverColor"]);
 
-  var classes = useStyles$6(props);
+  var classes = useStyles$7(props);
   return React__default.createElement(MuiMenuItem, Object.assign({}, restProps, {
     className: classes.root
   }), children);
@@ -1986,7 +2016,7 @@ var Pagination = function Pagination(_ref) {
 var index$3 = /*#__PURE__*/
 React.memo(Pagination);
 
-var useStyles$7 =
+var useStyles$8 =
 /*#__PURE__*/
 styles$5.makeStyles({
   scrollButtons: {
@@ -2016,7 +2046,7 @@ React.forwardRef(function (_ref, ref) {
       onChange = _ref.onChange,
       restProps = _objectWithoutPropertiesLoose(_ref, ["children", "value", "onChange"]);
 
-  var classes = useStyles$7();
+  var classes = useStyles$8();
   return React__default.createElement(MuiTabs, Object.assign({
     ref: ref,
     value: value,
@@ -2027,7 +2057,7 @@ React.forwardRef(function (_ref, ref) {
   }, restProps), children);
 });
 
-var useStyles$8 =
+var useStyles$9 =
 /*#__PURE__*/
 styles$5.makeStyles(function (theme) {
   return styles$5.createStyles({
@@ -2063,7 +2093,7 @@ React.forwardRef(function (_ref, ref) {
       value = _ref.value,
       restProps = _objectWithoutPropertiesLoose(_ref, ["label", "disabled", "icon", "value"]);
 
-  var classes = useStyles$8();
+  var classes = useStyles$9();
   return React__default.createElement(MuiTab, Object.assign({
     ref: ref,
     classes: classes,
@@ -2091,7 +2121,7 @@ React.forwardRef(function (_ref, ref) {
   }, restProps), children);
 });
 
-var useStyles$9 =
+var useStyles$a =
 /*#__PURE__*/
 styles$5.makeStyles({
   root: {
@@ -2136,7 +2166,7 @@ React.forwardRef(function (_ref, ref) {
       value = _ref.value,
       restProps = _objectWithoutPropertiesLoose(_ref, ["disabled", "checked", "value", "classes"]);
 
-  var css = useStyles$9();
+  var css = useStyles$a();
   return React__default.createElement(Radio$1, Object.assign({
     ref: ref,
     value: value,
@@ -2883,7 +2913,7 @@ var icons = {
   warning: ExclamationCircle
 };
 
-var useStyles$a =
+var useStyles$b =
 /*#__PURE__*/
 makeStyles([['message', function (theme, _ref) {
   var visible = _ref[1];
@@ -2931,7 +2961,7 @@ React.forwardRef(function (_ref, ref) {
     }
   };
 
-  var styles = useStyles$a([type, visible]);
+  var styles = useStyles$b([type, visible]);
   React.useEffect(function () {
     window.setTimeout(function () {
       return setVisible(true);
@@ -3118,7 +3148,7 @@ var semanticColors = {
   warning: '#fef1e1',
   error: '#fbd0e0'
 };
-var useStyles$b =
+var useStyles$c =
 /*#__PURE__*/
 styles$5.makeStyles({
   root: {
@@ -3220,7 +3250,7 @@ React.forwardRef(function (_ref, ref) {
       semantic = _ref.semantic,
       showSemanticIcon = _ref.showSemanticIcon,
       MessageIcon = _ref.MessageIcon;
-  var classes = useStyles$b({
+  var classes = useStyles$c({
     semantic: semantic,
     withTitle: !!title
   });
@@ -3285,7 +3315,7 @@ React.forwardRef(function (props, ref) {
   }, props), props.children);
 });
 
-var Link = {
+var Link$1 = {
   name: 'list-ul-o',
   definition: {
     viewBox: '0 0 512 512',
@@ -3437,7 +3467,7 @@ var SlidingSideMenu = function SlidingSideMenu(_ref) {
   }, icon) : React__default.createElement(StyledIconWrapper, {
     onClick: handleIconClick
   }, React__default.createElement(Icon$1, Object.assign({
-    icon: Link,
+    icon: Link$1,
     className: emotion.cx(IconStyle, IconClassName)
   }, restIconProps))), React__default.createElement(StyledSideMenu, Object.assign({
     open: open,
@@ -3454,7 +3484,7 @@ var SlidingSideMenu = function SlidingSideMenu(_ref) {
 var index$6 = /*#__PURE__*/
 React.memo(SlidingSideMenu);
 
-var useStyles$c =
+var useStyles$d =
 /*#__PURE__*/
 styles$5.makeStyles({
   root: {
@@ -3499,7 +3529,7 @@ styles$5.makeStyles({
 });
 
 var Divider = function Divider(props) {
-  var _useStyles = useStyles$c(props),
+  var _useStyles = useStyles$d(props),
       root = _useStyles.root;
 
   return React__default.createElement(MuiDivider, Object.assign({}, props, {
@@ -4369,7 +4399,7 @@ var AngleRight$1 = {
   }
 };
 
-var Link$1 = {
+var Link$2 = {
   name: 'link-o',
   definition: {
     viewBox: '0 0 512 512',
@@ -4835,10 +4865,10 @@ exports.hexToRgba = hexToRgba;
 exports.infoCircleFilled = InfoCircle;
 exports.infoCircleOutlined = InfoCircle$1;
 exports.linkLight = LinkLight;
-exports.linkOutlined = Link$1;
+exports.linkOutlined = Link$2;
 exports.linkedinBrand = Linkedin;
 exports.linkedinIn = LinkedinIn;
-exports.listUlOutlined = Link;
+exports.listUlOutlined = Link$1;
 exports.longArrowRightOutlined = LongArrowRight;
 exports.makeStyles = makeStyles;
 exports.minusLightFilled = MinusLight;