zds-pickers 4.1.1 → 4.1.3

package/stories/assets/sampleStyles.css

@@ -1,365 +0,0 @@
-@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
-
-body {
-  background: #333;
-  font-family: 'Open Sans', sans-serif;
-}
-
-body .zds-pickers__label {
-  color: #fff;
-  min-width: 100px;
-  height: 100%;
-}
-
-body .zds-pickers__container > span,
-body .zds-pickers__container > div {
-  display: inline-block;
-  margin-bottom: 3px;
-}
-/* body .zds-pickers__container > span { max-width: 100px; } */
-body .zds-pickers__container > div { min-width: 300px; }
-
-body .zds-pickers__input { color: #fff; }
-
-body .zds-pickers__control {
-  background: #222;
-  min-width: 120px;
-  min-height: 20px;
-  border-color: #4b4a4b;
-}
-body .zds-pickers__control div[class$="singleValue"] { color: #fff; }
-body .zds-pickers__control .zds-pickers__indicator-separator { display: none; }
-body .zds-pickers__control .zds-pickers__dropdown-indicator { padding: 0 4px; }
-body .zds-pickers--is-disabled,
-body .zds-pickers__single-value--is-disabled,
-body .zds-pickers--is-disabled input,
-body .zds-pickers--is-disabled div[class$="singleValue"],
-body .zds-pickers--is-disabled .zds-pickers__dropdown-indicator {
-  font-style: italic !important;
-  color: grey !important;
-  text-shadow: none !important;
-}
-
-body .zds-pickers__placeholder {color: grey}
-body .zds-pickers__placeholder.shrunk {color: #fff}
-
-body .zds-pickers__menu { color: #4b4a4b; }
-/* .zds-pickers__menu .zds-pickers__menu-list { }
-.zds-pickers__menu .zds-pickers__option{ } */
-
-body .channel-picker .zds-pickers__menu {
-  width: 160px;
-  min-width: 160px;
-  max-width: 160px;
-  margin: 0;
-}
-body .channel-picker .zds-pickers__menu .zds-pickers__menu-list {
-  display: flex;
-  flex-flow: row wrap;
-  padding: 0;
-}
-body .channel-picker .zds-pickers__menu .zds-pickers__option {
-  width: 40px;
-  min-width: 40px;
-  max-width: 40px;
-  padding: 0;
-  border: 1px solid #e1e1e1;
-  text-align: center;
-}
-
-body .channel-mapping-picker .empty-mapping-entry .mapping-entry-label {
-  font-style: italic;
-  color: grey;
-}
-body .channel-mapping-picker .mapping-entry b {
-  display: inline-block;
-  width: 25px;
-}
-
-body .value-picker__label {
-  position: relative;
-  top: -12px;
-}
-body .value-picker .zds-pickers__control {
-  border-radius: 4px;
-  border-style: solid;
-  border-width: 1px;
-  box-sizing: border-box;
-}
-body .value-picker .zds-pickers__control:hover {
-  border-color: #e1e1e1;
-}
-body .value-picker .zds-pickers__control:focus-within {
-  border-color: #2684ff;
-}
-body .value-picker .zds-pickers__control:focus-within:hover {
-  border-color: #2684ff;
-  /* border-width: 2px; */
-}
-body .value-picker .zds-pickers__value-container  {
-  height: 36px;
-}
-body .value-picker .zds-pickers__value-container .react-numeric-input {
-  position: absolute !important;
-  right: 0;
-  left: 0;
-}
-body .value-picker .zds-pickers__value-container .react-numeric-input input {
-  border: unset !important;
-  color: #fff;
-  height: 36px;
-  background-color: inherit;
-  outline: none;
-  padding-left: 10px !important;
-  width: 100% !important;
-}
-body .value-picker .zds-pickers__value-container .react-numeric-input b:nth-of-type(1) i {
-  border-color: transparent transparent #fff !important;
-}
-body .value-picker .zds-pickers__value-container .react-numeric-input b:nth-of-type(2) i {
-  border-color: #fff transparent transparent !important;
-}
-
-body .response-curve-picker rect.container { fill: #e6e6e8 }
-body .response-curve-picker text.axis {
-  font-size: 10pt;
-  font-style: italic;
-  fill: #12131b;
-}
-body .response-curve-picker line.axis { stroke: #12131b }
-body .response-curve-picker path.curve {
-  stroke: #4d505b;
-  stroke-dasharray: 8;
-  fill: transparent;
-  pointer-events: visibleStroke;
-}
-body .response-curve-picker path.curve-selected {
-  stroke: #222;
-  stroke-dasharray: 0;
-  fill: transparent;
-}
-body .response-curve-picker rect.button {
-  fill: #ddd;
-  stroke: #4d505b;
-  cursor: pointer;
-}
-body .response-curve-picker rect.button:hover {
-  fill: #666;
-  stroke: #222;
-}
-body .response-curve-picker rect.button-selected { fill: #222 }
-body .response-curve-picker text.button {
-  font-size: 8pt;
-  pointer-events: none;
-}
-body .response-curve-picker text.button-selected {
-  font-size: 8pt;
-  fill: white;
-  font-weight: bold;
-}
-
-/* **************************************************************** */
-
-.Knob {
-  background: #eee;
-  border-radius: 50%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: relative;
-}
-
-.Knob-label {
-  flex: none;
-  width: 100%;
-  height: 100%;
-  z-index: 2;
-}
-
-.Knob-value {
-  width: 100%;
-  height: 100%;
-  background: transparent;
-  border: none;
-  text-align: center;
-  position: relative;
-  left: -1px;
-}
-.Knob-value.no-label::selection {
-  background: transparent;
-}
-
-.Knob-value::-webkit-inner-spin-button,
-.Knob-value::-webkit-outer-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-
-.Knob-spinner {
-  display: flex;
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  background: rgb(243, 243, 243);
-  border: 1px solid rgb(232, 232, 232);
-  border-radius: 50%;
-  z-index: 1;
-  align-items: center;
-  justify-content: flex-start;
-}
-
-.Knob-spinner::before {
-  content: "";
-  width: 4px;
-  height: 4px;
-  margin: 4px;
-  border-radius: 50%;
-  background: #000;
-}
-
-/* ************************************************************************** */
-
-.ReactPiano__Keyboard {
-  /* Used for absolute positioning of .ReactPiano__Key--accidental elements */
-  position: relative;
-  /* Used to lay out .ReactPiano__Key--natural elements */
-  display: flex;
-}
-
-.ReactPiano__Key {
-  /* Used for flexbox layout of the child .ReactPiano__NoteLabelContainer elements */
-  display: flex;
-}
-
-/*
- * Styles of accidental notes (flat or sharp)
- */
-.ReactPiano__Key--accidental {
-  background: #000;
-  /* border: 1px solid #fff; */
-  /* border-top: 1px solid transparent; */
-  border-radius: 0 0 4px 4px;
-  cursor: pointer;
-  height: 66%;
-  /* Overlay on top of natural keys */
-  z-index: 1;
-  /* Use absolute positioning along with inline styles specified in JS to put keys in correct locations. */
-  position: absolute;
-  top: 0;
-}
-
-/*
- * Styles of natural notes (white keys)
- */
-.ReactPiano__Key--natural {
-  background: #f6f5f3;
-  border: 1px solid #000;
-  border-radius: 0 0 3px 3px;
-  cursor: pointer;
-  z-index: 0;
-  /*
-   * Uses flexbox with margin instead of absolute positioning to have more consistent margin rendering.
-   * This causes inline styles to be ignored.
-   */
-  flex: 1;
-  /* margin-right: 1px; */
-}
-
-.ReactPiano__Key--natural:last-child {
-  /* Don't render extra margin on the last natural note */
-  margin-right: 0;
-}
-
-/*
- * Styles of "active" or pressed-down keys
- */
-.ReactPiano__Key--active {
-  background: #3ac8da;
-}
-
-.ReactPiano__Key--active.ReactPiano__Key--accidental {
-  /* border: 1px solid #fff; */
-  border-top: 1px solid #3ac8da;
-  /* Slight height reduction for "pushed-down" effect */
-  height: 65%;
-}
-
-.ReactPiano__Key--active.ReactPiano__Key--natural {
-  border: 1px solid #3ac8da;
-  /* Slight height reduction for "pushed-down" effect */
-  height: 98%;
-}
-
-.ReactPiano__Key--middleC > div::before {
-  content: "◆";
-  position: absolute;
-  top: 30%;
-}
-
-/*
- * Styles for disabled state
- */
-.ReactPiano__Key--disabled.ReactPiano__Key--accidental {
-  background: #ddd;
-  border: 1px solid #999;
-}
-
-.ReactPiano__Key--disabled.ReactPiano__Key--natural {
-  background: #eee;
-  border: 1px solid #aaa;
-}
-
-/*
- * Styles for the note label inside a piano key
- */
-.ReactPiano__NoteLabelContainer {
-  flex: 1;
-  /* Align children .ReactPiano__NoteLabel to the bottom of the key */
-  align-self: flex-end;
-}
-
-.ReactPiano__NoteLabel {
-  font-size: 12px;
-  text-align: center;
-  text-transform: capitalize;
-  /* Disable text selection */
-  -webkit-user-select: none;
-     -moz-user-select: none;
-      -ms-user-select: none;
-          user-select: none;
-}
-
-.ReactPiano__NoteLabel--accidental {
-  color: #f8e8d5;
-  margin-bottom: 3px;
-}
-
-.ReactPiano__NoteLabel--natural {
-  color: #888;
-  margin-bottom: 3px;
-}
-
-.ReactPiano__NoteLabel--natural.ReactPiano__NoteLabel--active {
-  color: #f8e8d5;
-}
-
-/*
- * Styles of "selected" keys (persistent selection state)
- */
-.ReactPiano__Key--selected {
-  background: #ff6b35;
-}
-
-.ReactPiano__Key--selected.ReactPiano__Key--accidental {
-  border: 1px solid #fff;
-  border-top: 1px solid #ff6b35;
-}
-
-.ReactPiano__Key--selected.ReactPiano__Key--natural {
-  border: 1px solid #ff6b35;
-}
-

package/stories/assets/utils.js

@@ -1,7 +0,0 @@
-/* ---------------------------- Arrays -------------------------------------- */
-
-// this just creates and fills a zero-indexed array array; 0, 1, 2, 3, etc
-export const arraySequence = numberOfElements =>
-  Array.from(new Array(numberOfElements).keys())
-
-export { arraySequence }