@cdc/chart 4.24.3 → 4.24.4

package/src/components/EditorPanel/components/Panels/Panel.Sankey.tsx

@@ -21,7 +21,6 @@ const SankeySettings = () => {
     }
 
     storyNodes[i][fieldName] = value
-    console.log('story nodes', storyNodes[i])
     updateConfig({
       ...config,
       sankey: {

package/src/components/EditorPanel/editor-panel.scss

@@ -7,730 +7,6 @@
 }
 
 .cdc-open-viz-module.type-chart {
-  .editor-panel {
-    &.hidden {
-      display: none;
-    }
-
-    .two-col-inputs {
-      display: flex;
-      margin-top: 1em;
-      justify-content: space-between;
-
-      > label {
-        width: 48%;
-        margin-top: 0 !important;
-      }
-    }
-
-    .helper-tooltip {
-      padding: 5px;
-      max-width: 300px;
-    }
-
-    .helper {
-      position: relative;
-      opacity: 0.7;
-      cursor: pointer;
-      width: 17px;
-      height: 17px;
-      align-self: center;
-      margin-left: 0.3rem;
-      margin-top: -0.3rem;
-      border: none !important;
-      box-shadow: none !important;
-
-      svg {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-      }
-    }
-
-    .divider-heading {
-      display: block;
-      font-size: 1em;
-      margin-top: 1em;
-    }
-
-    .series-list {
-      list-style: none;
-      border: $lightGray 1px solid;
-
-      &:empty {
-        border: none !important;
-      }
-
-      li {
-        padding: 0.3em 0.5em;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        font-size: 0.9em;
-        position: relative;
-
-        &:hover {
-          background-color: $lightestGray;
-        }
-
-        div {
-          width: 100%;
-        }
-
-        .series-list__name {
-          position: relative;
-          user-select: none;
-
-          &.series-list__name--truncate {
-            &[data-title] {
-              $bgColor: rgb(34 34 34 / 90%);
-              position: relative;
-
-              &::before,
-              &::after {
-                opacity: 0;
-                pointer-events: none;
-                position: absolute;
-                transition: opacity 250ms cubic-bezier(0.16, 1, 0.3, 1);
-                z-index: 1;
-              }
-
-              &::before {
-                content: attr(data-title);
-                bottom: -39px;
-                padding: 6px 10px;
-                background: $bgColor;
-                color: #fff;
-                font-size: 14px;
-                white-space: nowrap;
-                border-radius: 4px;
-              }
-
-              &::after {
-                content: '';
-                bottom: -8px;
-                left: 10px;
-                border: 7px solid transparent;
-                border-bottom: 6px solid $bgColor;
-              }
-
-              &:hover {
-                &::before,
-                &::after {
-                  opacity: 1;
-                }
-              }
-            }
-
-            .series-list__name-text {
-              cursor: pointer;
-            }
-          }
-        }
-
-        .series-list__dropdown {
-          width: 100%;
-          display: block;
-          font-size: 0.8em;
-          margin-bottom: 10px;
-          select {
-            width: 100%;
-          }
-        }
-
-        .series-list__remove {
-          padding: 0 4px;
-          font-size: 1.125rem;
-          color: #f00;
-          cursor: pointer;
-          position: absolute;
-          top: 5px;
-          right: 5px;
-        }
-
-        + li {
-          border-top: $lightGray 1px solid;
-        }
-      }
-    }
-
-    .series-list__name-text {
-      max-width: 150px;
-      margin-bottom: 10px;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-      overflow: hidden;
-    }
-
-    .accordion__heading {
-      background: $lightestGray;
-    }
-
-    .accordion__item {
-      select {
-        text-transform: capitalize;
-        outline: none;
-      }
-
-      .number-narrow {
-        min-width: auto;
-        width: 75px;
-      }
-    }
-
-    .form-container {
-      border-right: $lightGray 1px solid;
-      flex-grow: 1;
-    }
-
-    .guidance-link {
-      margin: 2em 1em 0;
-      padding: 0.75em 1em;
-
-      svg {
-        width: 60px;
-        color: $blue;
-        margin-right: 1rem;
-        height: 60px; // IE11
-        path {
-          fill: currentColor;
-        }
-      }
-    }
-
-    .warning {
-      color: #d8000c;
-      background-color: #ffd2d2;
-      padding: 0.75em 1em;
-      margin: 1em 0;
-      font-size: 0.8em;
-      border: #d8000c 1px solid;
-      border-radius: 0.4em;
-
-      strong {
-        font-weight: 600;
-        display: block;
-      }
-    }
-
-    .accordion__button {
-      cursor: pointer;
-      font-size: 1em;
-      padding: 0.3em 1em;
-      width: 100%;
-      text-align: left;
-      position: relative;
-      border-bottom: 1px solid rgba(0, 0, 0, 0.2);
-
-      &::before {
-        display: inline-block;
-        content: '';
-        height: 7px;
-        width: 7px;
-        margin-right: 1em;
-        border-bottom: 2px solid currentColor;
-        border-right: 2px solid currentColor;
-        right: 0;
-        position: absolute;
-        top: 50%;
-        transform: rotate(-45deg) translateY(-50%);
-        transition: 0.1s all;
-      }
-
-      &[aria-expanded='true']::before {
-        transform: rotate(45deg) translateY(-50%);
-        transform-origin: right;
-        margin-right: 1.3em;
-        transition: 0.1s all;
-      }
-    }
-
-    .accordion__panel {
-      border-bottom: 1px solid rgba(0, 0, 0, 0.2);
-      padding: 1em 1.25em 2em;
-      animation: fadein 0.2s ease-in;
-
-      &:first-child {
-        margin-top: 0;
-      }
-
-      h5 {
-        font-size: 0.8em;
-      }
-    }
-
-    .advanced {
-      padding: 0 1em 1em;
-      text-align: left;
-
-      p {
-        font-size: 0.8rem;
-      }
-
-      .advanced-toggle-link {
-        padding-top: 1em;
-        display: block;
-        text-align: left;
-        cursor: pointer;
-        text-decoration: underline;
-
-        span {
-          text-decoration: none;
-          display: inline-block;
-          font-family: monospace;
-          padding-right: 5px;
-        }
-
-        &:hover {
-          color: rgba(0, 0, 0, 0.7);
-        }
-      }
-
-      textarea {
-        height: 400px;
-        width: 100%;
-        font-size: 0.9em;
-        padding: 0.5em;
-        font-family: monospace;
-        box-sizing: border-box;
-      }
-    }
-
-    @keyframes fadein {
-      0% {
-        opacity: 0;
-      }
-
-      100% {
-        opacity: 1;
-      }
-    }
-
-    .heading-2 {
-      background: #565656;
-      color: #fff;
-      font-size: 1.1em;
-      padding: 0.6em 1em;
-      position: relative;
-      border-bottom: #565656 3px solid;
-      z-index: 3;
-    }
-
-    legend,
-    label {
-      text-transform: uppercase;
-      display: block;
-      font-size: 0.8em;
-      font-weight: 600;
-      user-select: none;
-
-      &:not(:first-child) {
-        margin-top: 1em;
-      }
-
-      span.edit-label {
-        margin-bottom: 0.3em;
-        display: block;
-      }
-
-      span.column-heading {
-        font-size: 1em;
-      }
-
-      &.checkbox {
-        display: flex;
-
-        input {
-          margin-left: 0;
-          width: inherit;
-          display: inline;
-        }
-      }
-    }
-
-    legend {
-      font-weight: normal;
-      margin-bottom: 0.3em;
-    }
-
-    legend + span {
-      float: left;
-    }
-
-    .radio-label {
-      font-weight: normal;
-    }
-
-    .accordion__panel fieldset:not(:first-child) {
-      margin-top: 1em;
-    }
-
-    .accordion__panel fieldset {
-      label:not(:first-child) {
-        margin-top: 0rem;
-      }
-    }
-
-    input[type='text'],
-    input[role='combobox'],
-    input[type='number'],
-    textarea {
-      min-width: 100%;
-      max-width: 100%; // Doing this prevents width of textarea from being changed
-    }
-
-    textarea {
-      min-height: 140px;
-    }
-
-    .header .color-palette button {
-      width: 21px;
-      height: 21px;
-      border-radius: 40px;
-      margin-right: 2.8px;
-    }
-
-    .color-palette {
-      display: flex;
-      max-width: 100%;
-      padding: 0;
-      margin: 0.5em 0 0 0;
-      list-style: none;
-      flex-wrap: wrap;
-
-      button {
-        width: 45px;
-        height: 23px;
-        margin-right: 4px;
-        margin-bottom: 10px;
-        display: flex;
-        border-radius: 5px;
-        overflow: hidden;
-        cursor: pointer;
-        position: relative;
-        padding: 0;
-
-        .click-target {
-          position: absolute;
-          top: 0;
-          left: 0;
-          right: 0;
-          bottom: 0;
-        }
-
-        &.selected {
-          border: rgba(0, 0, 0, 0.8) 2px solid;
-        }
-
-        span {
-          width: 33.3%;
-          height: 100%;
-        }
-
-        span.two-color {
-          width: 50%;
-          height: 100%;
-        }
-      }
-    }
-
-    fieldset {
-      display: block;
-
-      .float-left {
-        float: left;
-      }
-    }
-
-    .primary-fieldset {
-      padding: 0;
-      margin: 0;
-      border: 0;
-    }
-
-    ul.column-edit {
-      list-style: none;
-
-      li {
-        margin-top: 1em;
-      }
-
-      .three-col {
-        display: flex;
-        justify-content: space-between;
-
-        > label {
-          margin-top: 0;
-          width: 30%;
-          display: inline-block;
-
-          input[type='text'],
-          input[type='number'] {
-            width: 50px;
-          }
-        }
-      }
-    }
-
-    .emove-column {
-      float: right;
-      text-transform: uppercase;
-      color: #c32b2b;
-      font-size: 0.7em;
-      line-height: 1.6em;
-      border-radius: 5px;
-      margin: 0 auto;
-      transition: 0.1s all;
-      border: 0;
-      text-decoration: underline;
-      outline: 0;
-      cursor: pointer;
-      font-weight: bold;
-    }
-
-    .edit-block {
-      padding-left: 1em;
-      border-left: rgba(0, 0, 0, 0.2) 4px solid;
-      transition: 0.2s all;
-
-      &:not(:first-child) {
-        margin-top: 2em;
-      }
-
-      input[type='text'],
-      input[type='number'] {
-        font-size: 1em;
-      }
-
-      label {
-        margin-top: 0;
-      }
-
-      label + label {
-        margin-top: 1em;
-      }
-
-      &:hover {
-        border-left: rgba(0, 0, 0, 0.7) 4px solid;
-        transition: 0.2s all;
-      }
-    }
-
-    span.subtext {
-      display: block;
-      color: rgba(0, 0, 0, 0.5);
-      text-transform: none;
-      font-weight: normal;
-    }
-
-    .btn {
-      margin-top: 1em;
-    }
-
-    .sort-list {
-      list-style: none;
-
-      > li {
-        margin-right: 0.3em;
-        margin-bottom: 0.3em;
-      }
-    }
-
-    .sort-list li > div {
-      display: block;
-      box-sizing: border-box;
-      border: 1px solid #d1d1d1;
-      border-radius: 2px;
-      background: #f1f1f1;
-      padding: 0.4em 0.6em;
-      font-size: 0.8em;
-      margin-bottom: 0.3em;
-      cursor: move;
-    }
-
-    .info {
-      font-size: 0.8em;
-      line-height: 1.4em;
-      font-style: italic;
-      padding-top: 10px;
-    }
-
-    .react-tags__search {
-      width: 100%;
-    }
-
-    .react-tags {
-      position: relative;
-
-      input.react-tags__search-input {
-        font-size: 0.8rem;
-      }
-
-      /* clicking anywhere will focus the input */
-      cursor: text;
-
-      span {
-        display: inline;
-      }
-    }
-
-    .react-tags.is-focused {
-      border-color: rgba(0, 0, 0, 0.7);
-    }
-
-    .react-tags__selected {
-      display: inline;
-    }
-
-    .react-tags__selected-tag {
-      display: inline-block;
-      box-sizing: border-box;
-      border: 1px solid #d1d1d1;
-      border-radius: 2px;
-      background: #f1f1f1;
-      padding: 0.4em 0.6em;
-      font-size: 0.8em;
-      margin-right: 0.3em;
-      margin-bottom: 0.3em;
-    }
-
-    .react-tags__selected-tag:after {
-      content: '\2715';
-      color: #aaa;
-      margin-left: 8px;
-    }
-
-    .react-tags__selected-tag:hover,
-    .react-tags__selected-tag:focus {
-      border-color: #b1b1b1;
-    }
-
-    .react-tags__search {
-      display: inline-block;
-
-      /* prevent autoresize overflowing the container */
-      max-width: 100%;
-    }
-
-    @media screen and (min-width: 30em) {
-      .react-tags__search {
-        /* this will become the offsetParent for suggestions */
-        position: relative;
-      }
-    }
-
-    .react-tags__search input {
-      /* prevent autoresize overflowing the container */
-      max-width: 100%;
-
-      /* emove styles and layout from this element */
-      margin: 0;
-      outline: none;
-      padding: 0.5em 0.3em;
-
-      /* match the font styles */
-      font-size: inherit;
-      line-height: inherit;
-    }
-
-    .react-tags__search input::-ms-clear {
-      display: none;
-    }
-
-    .react-tags__suggestions {
-      position: absolute;
-      top: 100%;
-      left: 0;
-      width: 100%;
-    }
-
-    @media screen and (min-width: 30em) {
-      .react-tags__suggestions {
-        width: 240px;
-      }
-    }
-
-    .react-tags__suggestions ul {
-      margin: 4px -1px;
-      padding: 0;
-      list-style: none;
-      background: white;
-      border: 1px solid #d1d1d1;
-      border-radius: 2px;
-      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
-    }
-
-    .react-tags__suggestions li {
-      border-bottom: 1px solid #ddd;
-      padding: 6px 8px;
-    }
-
-    .react-tags__suggestions li mark {
-      text-decoration: underline;
-      background: none;
-      font-weight: 600;
-    }
-
-    .react-tags__suggestions li:hover {
-      cursor: pointer;
-      background: #eee;
-    }
-
-    .react-tags__suggestions li.is-active {
-      background: #b7cfe0;
-    }
-
-    .react-tags__suggestions li.is-disabled {
-      opacity: 0.5;
-      cursor: auto;
-    }
-
-    input[type='radio'] {
-      border: 1px solid #8c8f94;
-      border-radius: 50%;
-      margin-right: 5px;
-    }
-  }
-
-  .editor-toggle {
-    background: #f2f2f2;
-    border-radius: 60px;
-    color: #000;
-    font-size: 1em;
-    border: 0;
-    position: absolute;
-    z-index: 100;
-    transition: 0.1s background;
-    cursor: pointer;
-    width: 25px;
-    height: 25px;
-    left: 307px;
-    box-shadow: rgba(0, 0, 0, 0.5) 0 1px 2px;
-
-    &:before {
-      top: 43%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      position: absolute;
-      content: '\00ab';
-    }
-
-    &.collapsed {
-      left: 1em;
-      margin-left: 0;
-
-      &:before {
-        content: '\00bb';
-      }
-    }
-
-    &:hover {
-      background: rgba(255, 255, 255, 1);
-    }
-  }
-
   @include breakpointClass(md) {
     .editor-panel:not(.hidden) + .cdc-chart-inner-container {
       padding-left: 350px;