@zohodesk/components 1.0.0-temp-67 → 1.0.0-temp-350

package/es/a11y/FocusScope/docs/FocusScope__default.docs.js

@@ -0,0 +1,139 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import FocusScope, { useFocusManager } from '../FocusScope';
+import style from '../../../beta/FocusRing/FocusRing.module.css';
+export default class FocusScope__default extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      isOpen: false,
+      isSub: false
+    };
+    this.handleSubmit = this.handleSubmit.bind(this);
+  }
+
+  handleSubmit(e, issub) {
+    this.setState({
+      isSub: issub,
+      isOpen: e
+    });
+  }
+
+  render() {
+    const {
+      isOpen,
+      isSub
+    } = this.state;
+    console.log(this.state);
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("button", {
+      className: style.primary,
+      type: "button",
+      onClick: this.handleSubmit.bind(this, true, false)
+    }, "Focusscope"), isOpen ? /*#__PURE__*/React.createElement("div", {
+      className: style.freezeLayer
+    }, /*#__PURE__*/React.createElement(FocusScope, {
+      contain: true,
+      autoFocus: true,
+      restoreFocus: true
+    }, /*#__PURE__*/React.createElement(FormContainer, {
+      onSubmit: this.handleSubmit.bind(this, true, true),
+      onCancel: this.handleSubmit.bind(this, false, false)
+    }), isSub ? /*#__PURE__*/React.createElement(FocusScope, {
+      contain: true,
+      restoreFocus: true,
+      autoFocus: true
+    }, /*#__PURE__*/React.createElement("span", {
+      className: `${style.container} ${isSub && style.box1} ${isSub && style.manage}`
+    }, /*#__PURE__*/React.createElement(ToolbarButton, null, "Cut"), /*#__PURE__*/React.createElement(ToolbarButton, null, "Copy"), /*#__PURE__*/React.createElement(ToolbarButton, null, "Paste"), /*#__PURE__*/React.createElement(ToolbarButton, {
+      onClick: this.handleSubmit.bind(this, true, false)
+    }, "Close"))) : null)) : null);
+  }
+
+}
+
+function ToolbarButton(props) {
+  const focusManager = useFocusManager();
+
+  const onKeyDown = e => {
+    switch (e.key) {
+      case 'ArrowRight':
+        focusManager.focusNext({
+          wrap: true
+        });
+        break;
+
+      case 'ArrowLeft':
+        focusManager.focusPrevious({
+          wrap: true
+        });
+        break;
+
+      default:
+    }
+  };
+
+  const {
+    onClick,
+    children
+  } = props;
+  return /*#__PURE__*/React.createElement("button", {
+    className: style.primary,
+    type: "button",
+    onClick: onClick,
+    onKeyDown: onKeyDown
+  }, children);
+}
+
+ToolbarButton.propTypes = {
+  children: PropTypes.string.isRequired,
+  onClick: PropTypes.func
+};
+
+function FormContainer(props) {
+  const {
+    onSubmit,
+    onCancel
+  } = props;
+  const options = ['apple', 'MSoffice'];
+  return /*#__PURE__*/React.createElement("div", {
+    className: `${style.container} ${style.box1}`
+  }, /*#__PURE__*/React.createElement("button", {
+    className: style.secondary,
+    type: "button",
+    onClick: onCancel
+  }, "close"), /*#__PURE__*/React.createElement("form", {
+    className: style.formContainer
+  }, /*#__PURE__*/React.createElement("h3", null, "name"), /*#__PURE__*/React.createElement("input", {
+    type: "text",
+    value: "Input A",
+    className: `${style.input} ${style.inpFocus}`,
+    name: "name"
+  }), /*#__PURE__*/React.createElement("h3", null, "contact"), /*#__PURE__*/React.createElement("input", {
+    type: "text",
+    value: "Input A",
+    className: `${style.input} ${style.inpFocus}`,
+    name: "contact"
+  }), /*#__PURE__*/React.createElement("h3", null, "select"), /*#__PURE__*/React.createElement("select", {
+    options: options,
+    name: "select",
+    className: `${style.input} ${style.inpFocus}`
+  }, options.map((item, i) => /*#__PURE__*/React.createElement("option", {
+    key: `item-${i}`
+  }, item)))), /*#__PURE__*/React.createElement("button", {
+    className: style.primary,
+    type: "submit",
+    onClick: onSubmit
+  }, "Submit"), /*#__PURE__*/React.createElement("button", {
+    className: style.secondary,
+    type: "button",
+    onClick: onCancel
+  }, "Cancel"));
+}
+
+FormContainer.propTypes = {
+  onCancel: PropTypes.func,
+  onSubmit: PropTypes.func
+};
+FocusScope__default.docs = {
+  componentGroup: 'Atom'
+};

package/es/beta/FocusRing/FocusRing.module.css

@@ -1,152 +1,127 @@
-.input{
-  width:100%;
-  outline: 0;
-  border: 1px;
-  border-bottom: 1px solid #ddd
-}
-.badFocus {
-  display: inline-block;
-  margin-top: 10px;
-  border-radius: 2px;
-  box-shadow: 0 0 0 4px rgba(20,20,20,0.15);
-  margin-bottom: 30px;
-  padding: 2px;
-  margin: 10px;
-}
-[dir=ltr] .badFocus {
-  margin-right: 5px;
-}
-[dir=rtl] .badFocus {
-  margin-left: 5px;
-}
-:focus{
-  outline: 0;
-}
-.goodFocus {
-  display: inline-block;
-  border-radius: 2px;
-  padding: 2px;
-  box-shadow: 0 0 0 4px rgba(91,147,255,0.25);
-}
-.inpFocus{
-  width: auto;
-  padding: 5px;
-  border-radius: 2px;
-  margin: 10px;
-}
-.mouseFocus, .inpFocus:focus{
-  box-shadow: 0 0 0 4px rgba(20,20,20,0.15);
-}
-.tabFocus, .tabFocus:focus{
-  box-shadow: 0 0 0 4px rgba(24, 91, 226, 0.25);
-}
-.freezeLayer{
-  position: fixed;
-  top:0;
-  bottom: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background-color: rgba(20,20,20,.5);
-}
-[dir=ltr] .freezeLayer{
-  left:0;
-  right: 0;
-}
-[dir=rtl] .freezeLayer{
-  right:0;
-  left: 0;
-}
-[dir=ltr] .element{
-  margin:1rem 0 1rem .5rem;
-}
-[dir=rtl] .element{
-  margin:1rem .5rem 1rem 0;
-}
-.container{
-  min-width: 400px;
-  transition: .3s ease-in-out;
-  position: absolute;
-  background-color: #fff;
-  border-radius: 10px;
-  padding: 20px;
-}
-.formContainer{
-  display: flex;
-  flex-direction: column;
-}
-label{
-  font-weight: 400;
-  font-size: 20px;
-}
-.sOpt:focus{
-  background-color: red;
-}
-.button {
-  -webkit-appearance: none;
-  appearance: none;
-  color: white;
-  font-size: 14px;
-  background: green;
-  border: none;
-  padding: 4px 8px;
-}
-
-.focus-ring {
-  outline: 2px solid dodgerblue;
-  outline-offset: 2px;
-}
-.box{
-  display: flex;
-  flex-direction: column;
-}
-.box1{
-  transform: scale(1);
-}
-[dir=ltr] .manage{
-  right: 0;
-}
-[dir=rtl] .manage{
-  left: 0;
-}
-.primary{
-    color: #fff;
-    text-decoration: none;
-    font-size: 13px;
-    background: #00aefe;
-    box-shadow: 0 2px 6px 0 rgba(209, 209, 209, 0.18);
-    padding: 7px 12px;
-    cursor: pointer;
-    margin-top: 1px;
-    border-radius: 3px;
-    border: 1px solid #00aefe;
-    margin:10px
-  }
-  .secondary{
-    color: #8c8c8c;
-    text-decoration: none;
-    font-size: 13px;
-    background: #fff;
-    box-shadow: 0 2px 6px 0 rgba(209, 209, 209, 0.18);
-    padding: 7px 12px;
-    cursor: pointer;
-    margin-top: 1px;
-    border-radius: 3px;
-    border: 1px solid #8c8c8c
-  }
-  
-  [dir=ltr] .primary:focus{
-  box-shadow: 2px 2px 6px 0 rgba(19, 173, 211, 0.493);
-  }
-  
-  [dir=rtl] .primary:focus{
-    box-shadow: -2px 2px 6px 0 rgba(19, 173, 211, 0.493);
-  }
-  
-  [dir=ltr] .secondary:focus{
-  box-shadow: 2px 2px 6px 0 rgba(39, 40, 41, 0.493)
-  }
-  
-  [dir=rtl] .secondary:focus{
-    box-shadow: -2px 2px 6px 0 rgba(39, 40, 41, 0.493)
+.input{
+  width:100%;
+  border: 1px;
+  border-bottom: 1px solid #ddd;
+  outline: 0
+}
+.badFocus {
+  display: inline-block;
+  margin-top: 10px;
+  border-radius: 2px;
+  box-shadow: 0 0 0 4px rgba(20,20,20,0.15);
+  margin-right: 5px;
+  margin-bottom: 30px;
+  padding: 2px;
+  margin: 10px;
+}
+:focus{
+  outline: 0;
+}
+.goodFocus {
+  display: inline-block;
+  border-radius: 2px;
+  padding: 2px;
+  box-shadow: 0 0 0 4px rgba(91,147,255,0.25);
+}
+.inpFocus{
+  padding: 5px;
+  border-radius: 2px;
+  margin: 10px;
+  width: auto;
+}
+.mouseFocus,.inpFocus:focus{
+  box-shadow: 0 0 0 4px rgba(20,20,20,0.15);
+}
+.tabFocus,.tabFocus:focus{
+  box-shadow: 0 0 0 4px rgba(24, 91, 226, 0.25);
+}
+.freezeLayer{
+  position: fixed;
+  left:0;
+  right: 0;
+  top:0;
+  bottom: 0;
+  background-color: rgba(20,20,20,.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.element{
+  margin:1rem 0 1rem .5rem;
+}
+.container{
+  background-color: #fff;
+  border-radius: 10px;
+  min-width: 400px;
+  padding: 20px;
+  transition: .3s ease-in-out;
+  position: absolute;
+}
+.formContainer{
+  display: flex;
+  flex-direction: column;
+}
+label{
+  font-weight: 400;
+  font-size: 20px;
+}
+.sOpt:focus{
+  background-color: red;
+}
+.button {
+  -webkit-appearance: none;
+  appearance: none;
+  background: green;
+  border: none;
+  color: white;
+  font-size: 14px;
+  padding: 4px 8px;
+}
+
+.focus-ring {
+  outline: 2px solid dodgerblue;
+  outline-offset: 2px;
+}
+.box{
+  display: flex;
+  flex-direction: column;
+}
+.box1{
+  transform: scale(1);
+}
+.manage{
+  right: 0;
+}
+.primary{
+    background: #00aefe;
+    color: #fff;
+    box-shadow: 0 2px 6px 0 rgba(209, 209, 209, 0.18);
+    padding: 7px 12px;
+    cursor: pointer;
+    text-decoration: none;
+    font-size: 13px;
+    margin-top: 1px;
+    border-radius: 3px;
+    border: 1px solid #00aefe;
+    margin:10px
+  }
+  .secondary{
+    background: #fff;
+    color: #8c8c8c;
+    box-shadow: 0 2px 6px 0 rgba(209, 209, 209, 0.18);
+    padding: 7px 12px;
+    cursor: pointer;
+    text-decoration: none;
+    font-size: 13px;
+    margin-top: 1px;
+    border-radius: 3px;
+    border: 1px solid #8c8c8c
+  }
+  
+  .primary:focus{
+    box-shadow: 2px 2px 6px 0 rgba(19, 173, 211, 0.493);
+  }
+  
+  .secondary:focus{
+    box-shadow: 2px 2px 6px 0 rgba(39, 40, 41, 0.493)
   }

package/es/beta/FocusRing/docs/FocusRing__default.docs.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import Button from '../../../Button/Button';
+import TextBox from '../../../TextBox/TextBox';
+import FocusRing from '../FocusRing';
+import style from '../FocusRing.module.css';
+import { Box } from '../../../Layout';
+export default class FocusRing__default extends React.Component {
+  render() {
+    let styles = {
+      margin: '30px',
+      width: '50%',
+      display: 'block'
+    };
+    return /*#__PURE__*/React.createElement(FocusRing, {
+      focusClass: style.mouseFocus,
+      focusRingClass: style.tabFocus,
+      within: true
+    }, /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement("span", {
+      style: styles
+    }, /*#__PURE__*/React.createElement(FocusRing, {
+      focusClass: style.mouseFocus,
+      focusRingClass: style.tabFocus
+    }, /*#__PURE__*/React.createElement(TextBox, {
+      type: "text",
+      defaultValue: "Input a",
+      id: "1"
+    }))), /*#__PURE__*/React.createElement("span", {
+      style: styles
+    }, /*#__PURE__*/React.createElement(FocusRing, {
+      focusClass: style.mouseFocus,
+      focusRingClass: style.tabFocus
+    }, /*#__PURE__*/React.createElement(TextBox, {
+      type: "text",
+      defaultValue: "Input b",
+      id: "2"
+    }))), /*#__PURE__*/React.createElement("span", {
+      style: styles
+    }, /*#__PURE__*/React.createElement(TextBox, {
+      type: "text",
+      defaultValue: "Input c",
+      id: "3"
+    }))));
+  }
+
+}
+FocusRing__default.docs = {
+  componentGroup: 'Atom'
+};