@pareto-engineering/design-system 4.0.0-alpha.54 → 4.0.0-alpha.56

package/dist/cjs/a/SnapScroller/styles.scss

@@ -42,10 +42,11 @@ $default-spacing: var(--gap);
   }
 
   @include mixins.media($from: $sm-md) {
+    scroll-snap-type: none;
+
     &.desktop-no-scroll {
       overflow: auto;
       -ms-overflow-style: unset;
-      scroll-snap-type: none;
       scrollbar-width: unset;
 
       &::after {

package/dist/cjs/a/ToggleSwitch/ToggleSwitch.js

@@ -0,0 +1,82 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _exports = _interopRequireDefault(require("@pareto-engineering/bem/exports"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; } /* @pareto-engineering/generator-front 1.0.12 */
+// Local Definitions
+
+const baseClassName = _exports.default.base;
+const componentClassName = 'toggle-switch';
+
+/**
+ * This is the component description.
+ */
+const ToggleSwitch = _ref => {
+  let {
+    id,
+    className: userClassName,
+    style,
+    handleOnClick,
+    checked,
+    size
+    // ...otherProps
+  } = _ref;
+  (0, React.useInsertionEffect)(() => {
+    Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
+  }, []);
+  return /*#__PURE__*/React.createElement("button", {
+    id: id,
+    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
+    style: {
+      '--size': size,
+      ...style
+    },
+    onClick: handleOnClick,
+    type: "button"
+    // {...otherProps}
+  }, /*#__PURE__*/React.createElement("input", {
+    type: "checkbox",
+    id: "switch",
+    checked: checked
+  }), /*#__PURE__*/React.createElement("label", {
+    htmlFor: "switch"
+  }));
+};
+ToggleSwitch.propTypes = {
+  /**
+   * The HTML id for this element
+   */
+  id: _propTypes.default.string,
+  /**
+   * The HTML class names for this element
+   */
+  className: _propTypes.default.string,
+  /**
+   * The React-written, css properties for this element.
+   */
+  style: _propTypes.default.objectOf(_propTypes.default.string),
+  /**
+   * The onClick handler for this element
+   */
+  handleOnClick: _propTypes.default.func,
+  /**
+   * The checked state of this element
+   */
+  checked: _propTypes.default.bool,
+  /**
+   * The size of this element
+   */
+  size: _propTypes.default.string
+};
+ToggleSwitch.defaultProps = {
+  // someProp:false,
+};
+var _default = ToggleSwitch;
+exports.default = _default;

package/dist/cjs/a/ToggleSwitch/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ToggleSwitch", {
+  enumerable: true,
+  get: function () {
+    return _ToggleSwitch.default;
+  }
+});
+var _ToggleSwitch = _interopRequireDefault(require("./ToggleSwitch"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/dist/cjs/a/ToggleSwitch/styles.scss

@@ -0,0 +1,51 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+
+@use "@pareto-engineering/bem";
+
+$default-border-radius: var(--theme-default-border-radius);
+$default-size: var(--size, 1.2em);
+$default-slider-color: var(--slider-color, var(--background-far));
+$default-slider-border-color: var(--slider-border-color, var(--ui-lines));
+$default-background-color: var(--slider-background-color, var(--interactive));
+
+.#{bem.$base}.toggle-switch {
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  display: flex;
+
+  >input {
+    height: 0;
+    visibility: hidden;
+    width: 0;
+  }
+
+  >label {
+    background: $default-background-color;
+    border-radius: $default-border-radius;
+    cursor: pointer;
+    display: block;
+    height: $default-size;
+    position: relative;
+    width: calc($default-size * 2);
+
+    &::after {
+      background: $default-slider-color;
+      border: 1px solid $default-slider-border-color;
+      border-radius: $default-border-radius;
+      content: "";
+      height: $default-size;
+      left: 0;
+      position: absolute;
+      top: 0;
+      transition: .3s;
+      width: $default-size;
+    }
+  }
+
+  >input:checked + label::after {
+    left: $default-size;
+  }
+}
+
+

package/dist/cjs/a/index.js

@@ -153,6 +153,12 @@ Object.defineProperty(exports, "Tip", {
     return _Tip.Tip;
   }
 });
+Object.defineProperty(exports, "ToggleSwitch", {
+  enumerable: true,
+  get: function () {
+    return _ToggleSwitch.ToggleSwitch;
+  }
+});
 Object.defineProperty(exports, "useApp", {
   enumerable: true,
   get: function () {
@@ -188,4 +194,5 @@ var _AnimatedBlobs = require("./AnimatedBlobs");
 var _Tip = require("./Tip");
 var _AnimatedGradient = require("./AnimatedGradient");
 var _TextSteps = require("./TextSteps");
-var _Removable = require("./Removable");
+var _Removable = require("./Removable");
+var _ToggleSwitch = require("./ToggleSwitch");

package/dist/cjs/b/ThemeSelector/ThemeSelector.js

@@ -43,16 +43,10 @@ const ThemeSelector = _ref => {
     style: style
   }, /*#__PURE__*/React.createElement("span", {
     className: "c-x x-paragraph"
-  }, userTheme && userTheme[0].toUpperCase() + userTheme.slice(1), ' ', "Theme"), /*#__PURE__*/React.createElement("button", {
-    type: "button",
-    onClick: loopThemes
-  }, /*#__PURE__*/React.createElement("input", {
-    type: "checkbox",
-    id: "switch",
-    checked: userTheme === 'dark'
-  }), /*#__PURE__*/React.createElement("label", {
-    htmlFor: "switch"
-  })));
+  }, userTheme && userTheme[0].toUpperCase() + userTheme.slice(1), ' ', "Theme"), /*#__PURE__*/React.createElement(_a.ToggleSwitch, {
+    checked: userTheme === 'dark',
+    handleOnClick: loopThemes
+  }));
 };
 ThemeSelector.propTypes = {
   /**

package/dist/es/a/SnapScroller/styles.scss

@@ -42,10 +42,11 @@ $default-spacing: var(--gap);
   }
 
   @include mixins.media($from: $sm-md) {
+    scroll-snap-type: none;
+
     &.desktop-no-scroll {
       overflow: auto;
       -ms-overflow-style: unset;
-      scroll-snap-type: none;
       scrollbar-width: unset;
 
       &::after {

package/dist/es/a/ToggleSwitch/ToggleSwitch.js

@@ -0,0 +1,74 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react';
+import { useInsertionEffect } from 'react';
+import PropTypes from 'prop-types';
+import styleNames from '@pareto-engineering/bem/exports';
+
+// Local Definitions
+
+const baseClassName = styleNames.base;
+const componentClassName = 'toggle-switch';
+
+/**
+ * This is the component description.
+ */
+const ToggleSwitch = ({
+  id,
+  className: userClassName,
+  style,
+  handleOnClick,
+  checked,
+  size
+  // ...otherProps
+}) => {
+  useInsertionEffect(() => {
+    import("./styles.scss");
+  }, []);
+  return /*#__PURE__*/React.createElement("button", {
+    id: id,
+    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
+    style: {
+      '--size': size,
+      ...style
+    },
+    onClick: handleOnClick,
+    type: "button"
+    // {...otherProps}
+  }, /*#__PURE__*/React.createElement("input", {
+    type: "checkbox",
+    id: "switch",
+    checked: checked
+  }), /*#__PURE__*/React.createElement("label", {
+    htmlFor: "switch"
+  }));
+};
+ToggleSwitch.propTypes = {
+  /**
+   * The HTML id for this element
+   */
+  id: PropTypes.string,
+  /**
+   * The HTML class names for this element
+   */
+  className: PropTypes.string,
+  /**
+   * The React-written, css properties for this element.
+   */
+  style: PropTypes.objectOf(PropTypes.string),
+  /**
+   * The onClick handler for this element
+   */
+  handleOnClick: PropTypes.func,
+  /**
+   * The checked state of this element
+   */
+  checked: PropTypes.bool,
+  /**
+   * The size of this element
+   */
+  size: PropTypes.string
+};
+ToggleSwitch.defaultProps = {
+  // someProp:false,
+};
+export default ToggleSwitch;

package/dist/es/a/ToggleSwitch/index.js

@@ -0,0 +1,2 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+export { default as ToggleSwitch } from "./ToggleSwitch";

package/dist/es/a/ToggleSwitch/styles.scss

@@ -0,0 +1,51 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+
+@use "@pareto-engineering/bem";
+
+$default-border-radius: var(--theme-default-border-radius);
+$default-size: var(--size, 1.2em);
+$default-slider-color: var(--slider-color, var(--background-far));
+$default-slider-border-color: var(--slider-border-color, var(--ui-lines));
+$default-background-color: var(--slider-background-color, var(--interactive));
+
+.#{bem.$base}.toggle-switch {
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  display: flex;
+
+  >input {
+    height: 0;
+    visibility: hidden;
+    width: 0;
+  }
+
+  >label {
+    background: $default-background-color;
+    border-radius: $default-border-radius;
+    cursor: pointer;
+    display: block;
+    height: $default-size;
+    position: relative;
+    width: calc($default-size * 2);
+
+    &::after {
+      background: $default-slider-color;
+      border: 1px solid $default-slider-border-color;
+      border-radius: $default-border-radius;
+      content: "";
+      height: $default-size;
+      left: 0;
+      position: absolute;
+      top: 0;
+      transition: .3s;
+      width: $default-size;
+    }
+  }
+
+  >input:checked + label::after {
+    left: $default-size;
+  }
+}
+
+

package/dist/es/a/index.js

@@ -21,4 +21,5 @@ export { AnimatedBlobs } from "./AnimatedBlobs";
 export { Tip } from "./Tip";
 export { AnimatedGradient } from "./AnimatedGradient";
 export { TextSteps } from "./TextSteps";
-export { Removable } from "./Removable";
+export { Removable } from "./Removable";
+export { ToggleSwitch } from "./ToggleSwitch";

package/dist/es/b/ThemeSelector/ThemeSelector.js

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { useInsertionEffect, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import styleNames from '@pareto-engineering/bem/exports';
-import { useApp } from "../../a";
+import { useApp, ToggleSwitch } from "../../a";
 
 // Local Definitions
 
@@ -36,16 +36,10 @@ const ThemeSelector = ({
     style: style
   }, /*#__PURE__*/React.createElement("span", {
     className: "c-x x-paragraph"
-  }, userTheme && userTheme[0].toUpperCase() + userTheme.slice(1), ' ', "Theme"), /*#__PURE__*/React.createElement("button", {
-    type: "button",
-    onClick: loopThemes
-  }, /*#__PURE__*/React.createElement("input", {
-    type: "checkbox",
-    id: "switch",
-    checked: userTheme === 'dark'
-  }), /*#__PURE__*/React.createElement("label", {
-    htmlFor: "switch"
-  })));
+  }, userTheme && userTheme[0].toUpperCase() + userTheme.slice(1), ' ', "Theme"), /*#__PURE__*/React.createElement(ToggleSwitch, {
+    checked: userTheme === 'dark',
+    handleOnClick: loopThemes
+  }));
 };
 ThemeSelector.propTypes = {
   /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pareto-engineering/design-system",
-  "version": "4.0.0-alpha.54",
+  "version": "4.0.0-alpha.56",
   "description": "",
   "main": "dist/cjs/index.js",
   "module": "dist/es/index.js",
@@ -53,7 +53,7 @@
     "@lexical/react": "^0.11.3",
     "@pareto-engineering/assets": "^4.0.0-alpha.54",
     "@pareto-engineering/bem": "^4.0.0-alpha.20",
-    "@pareto-engineering/styles": "^4.0.0-alpha.54",
+    "@pareto-engineering/styles": "^4.0.0-alpha.55",
     "@pareto-engineering/utils": "^4.0.0-alpha.46",
     "date-fns": "^2.29.3",
     "downshift": "^6.1.12",
@@ -70,5 +70,5 @@
     "relay-test-utils": "^15.0.0"
   },
   "browserslist": "> 2%",
-  "gitHead": "495a3ef99891fb0b32202f4bd1f272ed5ca8fc8b"
+  "gitHead": "b6da07b4268743142591d63580db20da7581ee8b"
 }

package/src/stories/a/ToggleSwitch.stories.jsx

@@ -0,0 +1,22 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { ToggleSwitch } from 'ui'
+
+export default {
+  title        :'a/ToggleSwitch',
+  component    :ToggleSwitch,
+  subcomponents:{
+    // Item:ToggleSwitch.Item
+  },
+  decorators:[
+    // storyfn => <div className="">{ storyfn() }</div>,
+  ],
+  argTypes:{
+    size:{ control: 'string' },
+  },
+}
+
+export const Base = () => (
+  <ToggleSwitch />
+)

package/src/ui/a/SnapScroller/styles.scss

@@ -42,10 +42,11 @@ $default-spacing: var(--gap);
   }
 
   @include mixins.media($from: $sm-md) {
+    scroll-snap-type: none;
+
     &.desktop-no-scroll {
       overflow: auto;
       -ms-overflow-style: unset;
-      scroll-snap-type: none;
       scrollbar-width: unset;
 
       &::after {

package/src/ui/a/ToggleSwitch/ToggleSwitch.jsx

@@ -0,0 +1,95 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { useInsertionEffect } from 'react'
+
+import PropTypes from 'prop-types'
+
+import styleNames from '@pareto-engineering/bem/exports'
+
+// Local Definitions
+
+const baseClassName = styleNames.base
+
+const componentClassName = 'toggle-switch'
+
+/**
+ * This is the component description.
+ */
+const ToggleSwitch = ({
+  id,
+  className:userClassName,
+  style,
+  handleOnClick,
+  checked,
+  size,
+  // ...otherProps
+}) => {
+  useInsertionEffect(() => {
+    import('./styles.scss')
+  }, [])
+
+  return (
+    <button
+      id={id}
+      className={[
+
+        baseClassName,
+
+        componentClassName,
+        userClassName,
+      ]
+        .filter((e) => e)
+        .join(' ')}
+      style={{
+        '--size':size,
+        ...style,
+      }}
+      onClick={handleOnClick}
+      type="button"
+      // {...otherProps}
+    >
+      <input type="checkbox" id="switch" checked={checked} />
+      {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
+      <label htmlFor="switch" />
+    </button>
+  )
+}
+
+ToggleSwitch.propTypes = {
+  /**
+   * The HTML id for this element
+   */
+  id:PropTypes.string,
+
+  /**
+   * The HTML class names for this element
+   */
+  className:PropTypes.string,
+
+  /**
+   * The React-written, css properties for this element.
+   */
+  style:PropTypes.objectOf(PropTypes.string),
+
+  /**
+   * The onClick handler for this element
+   */
+  handleOnClick:PropTypes.func,
+
+  /**
+   * The checked state of this element
+   */
+  checked:PropTypes.bool,
+
+  /**
+   * The size of this element
+   */
+  size:PropTypes.string,
+}
+
+ToggleSwitch.defaultProps = {
+  // someProp:false,
+}
+
+export default ToggleSwitch

package/src/ui/a/ToggleSwitch/index.js

@@ -0,0 +1,2 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+export { default as ToggleSwitch } from './ToggleSwitch'

package/src/ui/a/ToggleSwitch/styles.scss

@@ -0,0 +1,51 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+
+@use "@pareto-engineering/bem";
+
+$default-border-radius: var(--theme-default-border-radius);
+$default-size: var(--size, 1.2em);
+$default-slider-color: var(--slider-color, var(--background-far));
+$default-slider-border-color: var(--slider-border-color, var(--ui-lines));
+$default-background-color: var(--slider-background-color, var(--interactive));
+
+.#{bem.$base}.toggle-switch {
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  display: flex;
+
+  >input {
+    height: 0;
+    visibility: hidden;
+    width: 0;
+  }
+
+  >label {
+    background: $default-background-color;
+    border-radius: $default-border-radius;
+    cursor: pointer;
+    display: block;
+    height: $default-size;
+    position: relative;
+    width: calc($default-size * 2);
+
+    &::after {
+      background: $default-slider-color;
+      border: 1px solid $default-slider-border-color;
+      border-radius: $default-border-radius;
+      content: "";
+      height: $default-size;
+      left: 0;
+      position: absolute;
+      top: 0;
+      transition: .3s;
+      width: $default-size;
+    }
+  }
+
+  >input:checked + label::after {
+    left: $default-size;
+  }
+}
+
+

package/src/ui/a/index.js

@@ -24,3 +24,4 @@ export { Tip } from './Tip'
 export { AnimatedGradient } from './AnimatedGradient'
 export { TextSteps } from './TextSteps'
 export { Removable } from './Removable'
+export { ToggleSwitch } from './ToggleSwitch'

package/src/ui/b/ThemeSelector/ThemeSelector.jsx

@@ -4,7 +4,7 @@ import { useInsertionEffect, useCallback } from 'react'
 import PropTypes from 'prop-types'
 import styleNames from '@pareto-engineering/bem/exports'
 
-import { useApp } from 'ui/a'
+import { useApp, ToggleSwitch } from 'ui/a'
 
 // Local Definitions
 
@@ -53,14 +53,7 @@ const ThemeSelector = ({
         {' '}
         Theme
       </span>
-      <button
-        type="button"
-        onClick={loopThemes}
-      >
-        <input type="checkbox" id="switch" checked={userTheme === 'dark'} />
-        {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
-        <label htmlFor="switch" />
-      </button>
+      <ToggleSwitch checked={userTheme === 'dark'} handleOnClick={loopThemes} />
     </div>
   )
 }

package/tests/__snapshots__/Storyshots.test.js.snap

@@ -3238,6 +3238,26 @@ exports[`Storyshots a/Tip Base 1`] = `
 </p>
 `;
 
+exports[`Storyshots a/ToggleSwitch Base 1`] = `
+<button
+  className="base toggle-switch"
+  style={
+    {
+      "--size": undefined,
+    }
+  }
+  type="button"
+>
+  <input
+    id="switch"
+    type="checkbox"
+  />
+  <label
+    htmlFor="switch"
+  />
+</button>
+`;
+
 exports[`Storyshots b/Button Arrow Left 1`] = `
 [
   <button
@@ -13937,7 +13957,13 @@ exports[`Storyshots b/ThemeSelector Base 1`] = `
       Theme
     </span>
     <button
+      className="base toggle-switch"
       onClick={[Function]}
+      style={
+        {
+          "--size": undefined,
+        }
+      }
       type="button"
     >
       <input