orcs-design-system
Version:
TeamForm's Design System, aka: ORCS
161 lines (159 loc) • 7.84 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
const _excluded = ["inverted", "id", "small", "theme", "label", "checked", "disabled", "srHide"];
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
import React from "react";
import PropTypes from "prop-types";
import styled, { css, ThemeProvider } from "styled-components";
import { space, layout } from "styled-system";
import { themeGet } from "@styled-system/theme-get";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const Group = /*#__PURE__*/styled.div.withConfig({
displayName: "Group",
componentId: "sc-f6l22k-0"
})(["", " ", " display:flex;align-items:center;", ";"], space, layout, props => props.inverted ? css(["input{&:focus{+ label{box-shadow:", ";}}}label{&:first-of-type{background:", ";}}"], themeGet("shadows.thickOutline")(props) + " " + themeGet("colors.black")(props), themeGet("colors.greyDark")(props)) : css([""]));
const Input = /*#__PURE__*/styled.input.attrs({
type: "checkbox"
}).withConfig({
displayName: "Input",
componentId: "sc-f6l22k-1"
})(["opacity:0;position:absolute;visibility:", ";margin:0;z-index:-1;width:0;height:0;pointer-events:none;&:focus{+ label{box-shadow:", ";}}&:checked{+ label{background:", ";&::after{left:calc(100% - 3px);transform:translateX(-100%);}}&:focus{+ label{box-shadow:", ";}}}"], props => props.srHide ? "hidden" : "visible", props => themeGet("shadows.thickOutline")(props) + " " + themeGet("colors.black20")(props), props => themeGet("colors.success")(props), props => themeGet("shadows.thinOutline")(props) + " " + themeGet("colors.success30")(props));
const Item = /*#__PURE__*/styled.label.withConfig({
displayName: "Item",
componentId: "sc-f6l22k-2"
})(["cursor:pointer;flex:0 0 auto;margin:0;display:block;position:relative;transition:", ";background:", ";width:", ";height:", ";border-radius:", ";&::after{content:\"\";position:absolute;top:3px;left:3px;background:", ";transition:", ";width:", ";height:", ";border-radius:", ";}&:active{&::after{width:", ";}}", ";"], props => themeGet("transition.transitionDefault")(props), props => themeGet("colors.greyDarker")(props), props => props.small ? "36px" : "44px", props => props.small ? "20px" : "24px", props => props.small ? "10px" : "12px", props => themeGet("colors.white")(props), props => themeGet("transition.transitionDefault")(props), props => props.small ? "14px" : "18px", props => props.small ? "14px" : "18px", props => props.small ? "7px" : "9px", props => props.small ? "20px" : "24px", props => props.disabled ? css(["opacity:0.5;"]) : css([""]));
const Label = /*#__PURE__*/styled.label.withConfig({
displayName: "Label",
componentId: "sc-f6l22k-3"
})(["margin:0;padding-left:8px;cursor:pointer;font-size:", ";color:", ";"], props => props.small ? themeGet("fontSizes.0")(props) : themeGet("fontSizes.1")(props), props => props.disabled ? themeGet("colors.grey")(props) : props.inverted ? themeGet("colors.white")(props) : themeGet("colors.greyDarkest")(props));
/**
* `Toggle` should be used for when functionality is required to turn something off/on, hide/show or disable/enable. Default is off (left/grey), this works like a checkbox, so clicking or applying a checked attribute with javascript will turn it on (right/green).
*
* As a general rule, the small version should be used in any layout components like `Header`, `Sidebar`, `MobileNav`; whereas the larger one can be used within the page content when required.
*/
export default function Toggle(_ref) {
let {
inverted = false,
id,
small = false,
theme,
label,
checked,
disabled,
srHide
} = _ref,
props = _objectWithoutProperties(_ref, _excluded);
const component = /*#__PURE__*/_jsxs(Group, {
inverted: inverted,
children: [/*#__PURE__*/_jsx(Input, _objectSpread({
id: id,
checked: checked,
disabled: disabled,
srHide: srHide
}, props)), /*#__PURE__*/_jsx(Item, {
htmlFor: id,
small: small,
disabled: disabled
}), /*#__PURE__*/_jsx(Label, {
inverted: inverted,
disabled: disabled,
htmlFor: id,
small: small,
children: label
})]
});
return theme ? /*#__PURE__*/_jsx(ThemeProvider, {
theme: theme,
children: component
}) : component;
}
Toggle.propTypes = {
/** Must be used to specify a unique ID. */
id: PropTypes.string.isRequired,
/** Specifies the text for the label. */
label: PropTypes.string.isRequired,
/** Specifies whether the `checkbox` for Toggle is on or not. */
checked: PropTypes.bool,
/** Changes appearance to suit a dark background. */
inverted: PropTypes.bool,
/** Applies disabled attribute and styles */
disabled: PropTypes.bool,
/** Makes toggle and label smaller. */
small: PropTypes.bool,
/** Hides toggle from screen-reader. Only to be used when toggle alters visual presentation, not functional. */
srHide: PropTypes.bool,
/** Specifies the theme for component design */
theme: PropTypes.object
};
Toggle.__docgenInfo = {
"description": "`Toggle` should be used for when functionality is required to turn something off/on, hide/show or disable/enable. Default is off (left/grey), this works like a checkbox, so clicking or applying a checked attribute with javascript will turn it on (right/green).\n\nAs a general rule, the small version should be used in any layout components like `Header`, `Sidebar`, `MobileNav`; whereas the larger one can be used within the page content when required.",
"methods": [],
"displayName": "Toggle",
"props": {
"inverted": {
"defaultValue": {
"value": "false",
"computed": false
},
"description": "Changes appearance to suit a dark background.",
"type": {
"name": "bool"
},
"required": false
},
"small": {
"defaultValue": {
"value": "false",
"computed": false
},
"description": "Makes toggle and label smaller.",
"type": {
"name": "bool"
},
"required": false
},
"id": {
"description": "Must be used to specify a unique ID.",
"type": {
"name": "string"
},
"required": true
},
"label": {
"description": "Specifies the text for the label.",
"type": {
"name": "string"
},
"required": true
},
"checked": {
"description": "Specifies whether the `checkbox` for Toggle is on or not.",
"type": {
"name": "bool"
},
"required": false
},
"disabled": {
"description": "Applies disabled attribute and styles",
"type": {
"name": "bool"
},
"required": false
},
"srHide": {
"description": "Hides toggle from screen-reader. Only to be used when toggle alters visual presentation, not functional.",
"type": {
"name": "bool"
},
"required": false
},
"theme": {
"description": "Specifies the theme for component design",
"type": {
"name": "object"
},
"required": false
}
}
};