@carbon/ibm-products 1.0.0-rc.1 → 1.1.0

package/scss/components/ExpressiveCard/_storybook-styles.scss

@@ -0,0 +1,25 @@
+//
+// Copyright IBM Corp. 2020, 2021
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@import './index';
+// shared card styles can be found in the Card folder
+@import '../Card/storybook-styles';
+
+$block-class: #{$pkg-prefix}--card;
+
+// aspect ratio box styling
+.card-story .#{$carbon-prefix}--aspect-ratio {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: $ui-03;
+}
+
+.#{$block-class}__media-left .#{$block-class}__media {
+  width: 100%;
+  max-width: 300px;
+}

package/scss/components/HTTPErrors/_http-errors.scss

@@ -0,0 +1,72 @@
+//
+// Copyright IBM Corp. 2021, 2021
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+// Standard imports.
+@import '../../global/styles/project-settings';
+
+// HTTP errors use the following Carbon components:
+// Link
+@import 'carbon-components/scss/components/link/link';
+
+// Define all component styles in a mixin which is then exported using
+// the Carbon import-once mechanism.
+@mixin http-errors {
+  $block-class: #{$pkg-prefix}--http-errors;
+
+  .#{$block-class} .#{$block-class}__content {
+    @include carbon--breakpoint(sm) {
+      position: fixed;
+      z-index: 2;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -150%);
+    }
+    @include carbon--breakpoint(md) {
+      transform: translate(-50%, -50%);
+    }
+  }
+  .#{$block-class} .#{$block-class}__error-code-label {
+    @include carbon--type-style('productive-heading-02');
+
+    margin-bottom: $spacing-02;
+  }
+  .#{$block-class} .#{$block-class}__title {
+    @include carbon--type-style('productive-heading-05');
+
+    margin-bottom: $spacing-04;
+  }
+  .#{$block-class} .#{$block-class}__description {
+    @include carbon--type-style('body-short-01');
+
+    margin-bottom: $spacing-06;
+  }
+  .#{$block-class} .#{$block-class}__error-code-label,
+  .#{$block-class} .#{$block-class}__title,
+  .#{$block-class} .#{$block-class}__description {
+    color: $text-01;
+  }
+  .#{$block-class} .#{$block-class}__link {
+    display: block;
+    margin-bottom: $spacing-02;
+  }
+  .#{$block-class} .#{$block-class}__image {
+    @include carbon--breakpoint(sm) {
+      position: fixed;
+      top: 50%;
+      left: 50%;
+      width: 100%;
+      transform: translate(-50%, -40%);
+    }
+    @include carbon--breakpoint(md) {
+      transform: translate(-50%, -50%);
+    }
+  }
+}
+
+@include exports($name: http-errors) {
+  @include http-errors;
+}

package/scss/components/HTTPErrors/_index.scss

@@ -0,0 +1,8 @@
+//
+// Copyright IBM Corp. 2020, 2020
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@import './http-errors';

package/scss/components/HTTPErrors/_storybook-styles.scss

@@ -0,0 +1,6 @@
+//
+// Copyright IBM Corp. 2021, 2021
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//

package/scss/components/ImportModal/_import-modal.scss

@@ -0,0 +1,88 @@
+//
+// Copyright IBM Corp. 2021, 2021
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+// Standard imports.
+@import '../../global/styles/project-settings';
+
+// ImportModal uses the following Carbon components:
+// ComposedModal, ModalHeader, ModalFooter, ModalBody,
+// FileUploaderDropContainer, FileUploaderItem, TextInput, Button
+@import 'carbon-components/scss/components/modal/modal';
+@import 'carbon-components/scss/components/file-uploader/file-uploader';
+@import 'carbon-components/scss/components/text-input/text-input';
+@import 'carbon-components/scss/components/button/button';
+
+@mixin import-modal {
+  $block-class: #{$pkg-prefix}--import-modal;
+
+  .#{$block-class} .#{$carbon-prefix}--modal-close {
+    display: none;
+  }
+
+  .#{$block-class} .#{$carbon-prefix}--modal-footer .#{$carbon-prefix}--btn {
+    max-width: none;
+  }
+
+  .#{$block-class}.#{$carbon-prefix}--modal .#{$carbon-prefix}--modal-content {
+    padding-right: $spacing-05;
+  }
+
+  .#{$carbon-prefix}--file .#{$carbon-prefix}--file-container,
+  .#{$carbon-prefix}--file ~ .#{$carbon-prefix}--file-container {
+    margin-top: 0;
+  }
+
+  .#{$carbon-prefix}--modal-container--sm .#{$carbon-prefix}--modal-header {
+    padding-right: calc(20% - #{$spacing-05});
+  }
+
+  .#{$block-class}__input-group {
+    display: flex;
+  }
+
+  .#{$block-class}__import-button.#{$carbon-prefix}--btn {
+    margin-left: $spacing-03;
+  }
+
+  .#{$block-class}__file-container {
+    width: 100%;
+  }
+
+  .#{$block-class} .#{$block-class}__file-drop-header,
+  .#{$block-class} .#{$block-class}__label {
+    margin-bottom: $spacing-03;
+    @include carbon--type-style('productive-heading-01');
+  }
+
+  .#{$block-class}__helper-text {
+    margin-top: $spacing-06;
+    margin-bottom: $spacing-03;
+    @include carbon--type-style('helper-text-01');
+  }
+
+  .#{$block-class}__body {
+    padding-right: calc(20% - #{$spacing-05});
+    margin-bottom: $spacing-06;
+  }
+
+  .#{$block-class} .#{$carbon-prefix}--file__selected-file {
+    max-width: none;
+    background: $ui-02;
+  }
+
+  .#{$block-class} .#{$carbon-prefix}--file {
+    margin-bottom: $spacing-05;
+  }
+
+  .#{$block-class} .#{$carbon-prefix}--text-input:disabled {
+    background: $ui-02;
+  }
+}
+
+@include exports('import-modal') {
+  @include import-modal;
+}

package/scss/components/ImportModal/_index.scss

@@ -0,0 +1,8 @@
+//
+// Copyright IBM Corp. 2021, 2021
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@import './import-modal';

package/scss/components/ImportModal/_storybook-styles.scss

@@ -0,0 +1,6 @@
+//
+// Copyright IBM Corp. 2021, 2021
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//

package/scss/components/LoadingBar/_index.scss

@@ -0,0 +1,8 @@
+//
+// Copyright IBM Corp. 2021, 2021
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@import './loading-bar';

package/scss/components/LoadingBar/_loading-bar.scss

@@ -0,0 +1,211 @@
+//
+// Copyright IBM Corp. 2021, 2021
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+// Standard imports.
+@import '../../global/styles/project-settings';
+
+$loading-bar__height: 8px;
+$loading-bar__small-height: 4px;
+
+// Define all component styles in a mixin which is then exported using
+// the Carbon import-once mechanism.
+@mixin loading-bar {
+  // The block part of our conventional BEM class names (blockClass__E--M).
+  $block-class: #{$pkg-prefix}--loading-bar;
+
+  @keyframes progress-indeterminate {
+    0% {
+      right: auto;
+      left: 0;
+      width: 0%;
+    }
+    20% {
+      right: auto;
+      left: 0;
+      width: 100%;
+    }
+    28% {
+      right: 0;
+      left: auto;
+      width: 100%;
+    }
+    51% {
+      right: 0;
+      left: auto;
+      width: 0%;
+    }
+    58% {
+      right: 0;
+      left: auto;
+      width: 0%;
+    }
+    82% {
+      right: 0;
+      left: auto;
+      width: 100%;
+    }
+    83% {
+      right: auto;
+      left: 0;
+      width: 100%;
+    }
+    96% {
+      right: auto;
+      left: 0;
+      width: 0%;
+    }
+    100% {
+      right: auto;
+      left: 0;
+      width: 0%;
+    }
+  }
+
+  @keyframes progress-linear {
+    0% {
+      right: auto;
+      left: 0;
+      width: 0%;
+    }
+    100% {
+      right: auto;
+      left: 0;
+      width: 100%;
+    }
+  }
+
+  @keyframes progress-stop {
+    0% {
+      right: auto;
+      left: 0;
+      width: 0%;
+    }
+    92% {
+      right: auto;
+      left: 0;
+      width: 100%;
+    }
+    100% {
+      right: auto;
+      left: 0;
+      width: 100%;
+    }
+  }
+
+  @keyframes loading-bar-stop {
+    0% {
+      opacity: 1;
+    }
+    92% {
+      opacity: 1;
+    }
+    100% {
+      display: none;
+      opacity: 0;
+    }
+  }
+
+  .#{$block-class} .#{$block-class}__inner {
+    position: relative;
+    width: 100%;
+    height: $loading-bar__height;
+    padding: 0;
+    border: none;
+    background-color: $hover-ui;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+    pointer-events: none;
+  }
+
+  .#{$block-class} .#{$block-class}__inner:hover,
+  .#{$block-class} .#{$block-class}__inner:focus,
+  .#{$block-class} .#{$block-class}__inner:active {
+    border: none;
+    cursor: default;
+    outline: none;
+  }
+
+  .#{$block-class}__preload {
+    opacity: 0;
+  }
+
+  .#{$block-class}__progress {
+    position: relative;
+    height: $loading-bar__height;
+    transition: width $duration--slow-02 cubic-bezier(0.4, 0.14, 0.3, 1); // Expansion duration - carbon value from _motion.scss
+  }
+
+  .#{$block-class}__indicator-wrapper {
+    display: flex;
+    justify-content: flex-end;
+  }
+
+  .#{$block-class}__indicator {
+    @include carbon--type-style('body-short-01');
+
+    padding-top: $spacing-05;
+    padding-bottom: $spacing-03;
+    color: $text-01;
+  }
+
+  .#{$block-class}__small {
+    height: $loading-bar__small-height;
+  }
+
+  .#{$block-class}__small .#{$block-class}__progress {
+    height: $loading-bar__small-height;
+  }
+
+  .#{$block-class}__linear-stop {
+    display: none;
+  }
+
+  .#{$block-class}__indefinite-stop {
+    // stylelint-disable-next-line carbon/motion-token-use
+    animation: 1800ms ease-in-out loading-bar-stop forwards;
+  }
+
+  .#{$block-class}__stop-progress:before {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 0%;
+    height: 100%;
+    // stylelint-disable-next-line carbon/motion-token-use
+    animation: 1800ms ease-in-out progress-stop forwards;
+    background-color: $interactive-01;
+    content: '';
+  }
+
+  .#{$block-class}__indefinite-progress:before {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 0%;
+    height: 100%;
+    // stylelint-disable-next-line carbon/motion-token-use
+    animation: 3000ms ease-in-out progress-indeterminate infinite;
+    background-color: $interactive-01;
+    content: '';
+  }
+
+  .#{$block-class}__linear-progress:before {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 0%;
+    height: 100%;
+    // stylelint-disable-next-line carbon/motion-token-use
+    animation: 1000ms ease-in-out progress-linear forwards;
+    background-color: $interactive-01;
+    content: '';
+  }
+}
+
+@include exports('loading-bar') {
+  @include loading-bar;
+}

package/scss/components/LoadingBar/_storybook-styles.scss

@@ -0,0 +1,19 @@
+//
+// Copyright IBM Corp. 2021, 2021
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@import '../../global/styles/project-settings';
+
+// add any additional styles used by LoadingBar.stories.js
+.loading-bar-story-wrapper {
+  width: 24rem;
+  margin: $spacing-07 $spacing-05 $spacing-05 $spacing-05;
+}
+
+// Uncomment next line (which must appear last) to test in storybook
+// that the SCSS styles for this component are sufficiently specific
+// to override Carbon whichever order the styles get loaded in.
+// @import 'carbon-components/css/carbon-components.min';

package/scss/components/ModifiedTabs/_index.scss

@@ -0,0 +1 @@
+@import './modified-tabs';

package/scss/components/ModifiedTabs/_modified-tabs.scss

@@ -0,0 +1,72 @@
+// Standard imports.
+@import '../../global/styles/project-settings';
+
+// ModifiedTabs uses the following Carbon components:
+// Tabs, Tab
+@import 'carbon-components/scss/components/tabs/tabs';
+
+.modified-tabs .modified-tabs__tab-label {
+  display: flex;
+  width: 100%;
+  // height: 100%;
+  align-items: flex-end;
+  justify-content: space-between;
+}
+
+.modified-tabs .modified-tabs__tab .bx--btn {
+  // transform: translateY(8px);
+}
+
+.modified-tabs .bx--tabs__nav {
+  /* overflow cannot be tweaked to fix tooltip */
+  // overflow: visible;
+}
+
+.modified-tabs__tab-new,
+.modified-tabs__tab {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+  height: 100%;
+}
+
+.modified-tabs__tab-new-img,
+.modified-tabs__tab-close {
+  // similar to modal dialog close
+  position: absolute;
+  top: -$spacing-04;
+  right: -$spacing-05;
+  overflow: hidden;
+  width: 2.5rem;
+  height: 2.5rem;
+  padding: $spacing-04;
+  border: $spacing-01 solid transparent;
+  background-color: transparent;
+  border-radius: 0;
+  cursor: pointer;
+  transition: background-color $duration--fast-02 motion(standard, productive);
+}
+
+.modified-tabs__tab-new-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  margin-top: $spacing-01;
+}
+
+.modified-tabs__tab-close:focus {
+  border-color: $interactive-01;
+  outline: none;
+}
+
+.modified-tabs__tab-close:hover {
+  background-color: $hover-ui;
+}
+
+.modified-tabs__tab-new-img {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+}

package/scss/components/ModifiedTabs/_storybook-styles.scss

@@ -0,0 +1,6 @@
+//
+// Copyright IBM Corp. 2020, 2020
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//

package/scss/components/NotificationsPanel/_index.scss

@@ -0,0 +1,8 @@
+//
+// Copyright IBM Corp. 2020, 2021
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@import './notifications-panel';