@carbon/ibm-products 1.0.0-rc.0 → 1.0.1

package/scss/components/CreateTearsheet/_create-tearsheet.scss

@@ -0,0 +1,136 @@
+//
+// 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';
+
+// Other Carbon settings.
+@import 'carbon-components/scss/globals/grid/grid';
+
+// CreateTearsheet uses the following Carbon components:
+// ProgressIndicator, ProgressStep, Toggle, SideNav, SideNavItems, SideNavLink
+@import 'carbon-components/scss/components/progress-indicator/progress-indicator';
+@import 'carbon-components/scss/components/toggle/toggle';
+@import 'carbon-components/scss/components/ui-shell/side-nav';
+
+// CreateTearsheet uses the following IBM Products components:
+// TearsheetShell
+@import '../Tearsheet/tearsheet';
+@import '../CreateInfluencer/index';
+
+@mixin create-tearsheet {
+  @keyframes stepContentEntrance {
+    0% {
+      opacity: 0;
+      // stylelint-disable-next-line carbon/layout-token-use
+      transform: translateY(-0.75rem);
+    }
+    100% {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  $block-class: #{$pkg-prefix}--tearsheet-create;
+  $section-block-class: #{$pkg-prefix}--tearsheet-create__section;
+  $tearsheet-divider-class: #{$pkg-prefix}--tearsheet-create__section--divider;
+  $tearsheet-fieldset-class: #{$pkg-prefix}--tearsheet-create__step--fieldset;
+
+  .#{$block-class} {
+    --#{$block-class}--total-width: 0;
+  }
+
+  .#{$block-class} .#{$block-class}__step--hidden-step,
+  .#{$block-class} .#{$block-class}__step--hidden-section {
+    display: none;
+  }
+
+  .#{$block-class} .#{$block-class}__step--visible-section {
+    display: block;
+  }
+
+  .#{$block-class} .#{$block-class}__step--visible-step {
+    animation: $duration--slow-01 stepContentEntrance;
+    animation-fill-mode: forwards;
+    animation-timing-function: $carbon--standard-easing;
+    opacity: 0;
+  }
+
+  @media (prefers-reduced-motion) {
+    .#{$block-class} .#{$block-class}__step--visible-step {
+      animation: none;
+      opacity: 1;
+    }
+  }
+
+  .#{$block-class} .#{$block-class}__content {
+    height: 100%;
+    padding: $spacing-06;
+    overflow-x: hidden;
+  }
+
+  .#{$block-class} .#{$block-class}__content .#{$carbon-prefix}--grid {
+    padding: 0;
+    margin: 0;
+  }
+
+  .#{$block-class} .#{$block-class}__step--heading {
+    padding-bottom: $spacing-06;
+  }
+
+  .#{$block-class}
+    .#{$carbon-prefix}--btn-set
+    .#{$carbon-prefix}--btn.#{$carbon-prefix}--btn--disabled {
+    box-shadow: -0.0625rem 0 0 0 $button-separator;
+  }
+
+  .#{$block-class} .#{$carbon-prefix}--side-nav--ux {
+    position: initial;
+    background-color: transparent;
+  }
+
+  .#{$block-class} .#{$block-class}__section--divider {
+    position: relative;
+    display: block;
+    width: var(--#{$block-class}--total-width);
+    height: 1px;
+    margin: $spacing-06 calc(-1 * #{$spacing-08}) $spacing-07
+      calc(-1 * #{$spacing-06});
+    background-color: $ui-03;
+  }
+
+  .#{$block-class} .#{$block-class}__step--title,
+  .#{$block-class} .#{$block-class}__section--title {
+    margin-bottom: $spacing-05;
+  }
+
+  .#{$block-class} .#{$block-class}__section--subtitle,
+  .#{$block-class} .#{$block-class}__step--subtitle {
+    @include carbon--type-style('productive-heading-01');
+
+    margin-bottom: $spacing-03;
+  }
+
+  .#{$block-class} .#{$block-class}__section--description,
+  .#{$block-class} .#{$block-class}__step--description {
+    @include carbon--type-style('body-long-01');
+
+    margin-bottom: $spacing-06;
+  }
+
+  .#{$block-class} .#{$carbon-prefix}--fieldset {
+    margin-bottom: 0;
+  }
+
+  .#{$block-class} .#{$block-class}__step--fieldset > * {
+    margin-bottom: $spacing-05;
+  }
+}
+
+@include exports('create-tearsheet') {
+  @include create-tearsheet;
+}

package/scss/components/CreateTearsheet/_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 './create-tearsheet';

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

@@ -0,0 +1,53 @@
+//
+// 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';
+
+$preview-block-class: #{$pkg-prefix}--tearsheet-create-multi-step;
+
+.#{$preview-block-class}__description {
+  @include carbon--type-style('body-short-01');
+
+  padding-bottom: $spacing-04;
+}
+
+p.#{$preview-block-class}__description:last-of-type {
+  padding-bottom: $spacing-07;
+}
+
+.#{$preview-block-class}__heading {
+  @include carbon--font-weight('semibold');
+}
+
+.#{$preview-block-class}
+  .#{$pkg-prefix}--tearsheet__content
+  .#{$carbon-prefix}--form-item {
+  margin-bottom: $spacing-05;
+}
+
+.#{$prefix}--tile-group div {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.#{$pkg-prefix}--tearsheet-create-multi-step--custom-tile {
+  width: 280px;
+  height: 240px;
+  margin-right: $spacing-05;
+}
+
+.#{$pkg-prefix}--tearsheet-create-multi-step--custom-tile
+  .#{$pkg-prefix}--empty-state__illustration.#{$pkg-prefix}--empty-state__illustration--lg {
+  min-width: 120px;
+  height: 120px;
+}
+
+.#{$pkg-prefix}--tearsheet-create-multi-step--custom-tile-label {
+  position: absolute;
+  bottom: $spacing-05;
+  left: $spacing-05;
+}

package/scss/components/CreateTearsheetNarrow/_create-tearsheet-narrow.scss

@@ -0,0 +1,68 @@
+//
+// 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';
+
+// CreateTearsheetNarrow uses the following Carbon components:
+// Form
+@import 'carbon-components/scss/components/form/form';
+
+// CreateTearsheetNarrow uses the following IBM Products components:
+// TearsheetNarrow
+@import '../Tearsheet/tearsheet';
+
+// Define all component styles in a mixin which is then exported using
+// the Carbon import-once mechanism.
+@mixin create-tearsheet-narrow {
+  // The block part of our conventional BEM class names (blockClass__E--M).
+  $block-class: #{$pkg-prefix}--create-tearsheet-narrow;
+
+  .#{$block-class} .#{$carbon-prefix}--modal-header__heading,
+  .#{$block-class} .#{$carbon-prefix}--modal-header__label,
+  .#{$block-class} .#{$pkg-prefix}--tearsheet__header-description {
+    max-width: 100%;
+    padding-right: calc(20% - #{$spacing-05});
+  }
+
+  .#{$block-class} .#{$pkg-prefix}--tearsheet__header-description {
+    margin-top: $spacing-02;
+  }
+
+  .#{$block-class} .#{$pkg-prefix}--tearsheet__header {
+    border-bottom: 1px solid $decorative-01;
+  }
+
+  .#{$block-class} .#{$pkg-prefix}--tearsheet__content {
+    padding: $spacing-05;
+  }
+
+  .#{$block-class} .#{$block-class}__form {
+    padding-top: $spacing-05;
+  }
+
+  .#{$block-class} .#{$block-class}__form > * {
+    margin-bottom: $spacing-05;
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  .#{$block-class} .#{$block-class}__form-title-text {
+    @include carbon--type-style('productive-heading-02');
+
+    padding-bottom: $spacing-03;
+  }
+
+  .#{$block-class} .#{$block-class}__form-description-text {
+    @include carbon--type-style('body-long-01');
+  }
+}
+
+@include exports('create-tearsheet-narrow') {
+  @include create-tearsheet-narrow;
+}

package/scss/components/CreateTearsheetNarrow/_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 './create-tearsheet-narrow';

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

@@ -0,0 +1,32 @@
+//
+// 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 './index';
+@import '../../global/styles/project-settings';
+
+// 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';
+
+$story-class: #{$pkg-prefix}--create-tearsheet-narrow--story;
+
+.#{$story-class}__flex-container {
+  display: flex;
+  align-items: baseline;
+}
+
+.#{$story-class}__flex-container .#{$carbon-prefix}--form-item,
+.#{$story-class}__form .#{$carbon-prefix}--form-item {
+  margin-bottom: $spacing-05;
+}
+
+.#{$story-class}__flex-container .#{$carbon-prefix}--form-item,
+.#{$story-class}__flex-container
+  .#{$carbon-prefix}--dropdown__wrapper.#{$carbon-prefix}--list-box__wrapper {
+  width: 50%;
+}

package/scss/components/EditSidePanel/_edit-side-panel.scss

@@ -0,0 +1,66 @@
+//
+// 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';
+@import '../../global/styles/mixins';
+
+// EditSidePanel uses the following Carbon components:
+@import 'carbon-components/scss/components/form/form';
+
+// EditSidePanel uses the following IBM Products components:
+@import '../SidePanel/side-panel';
+
+// Define all component styles in a mixin which is then exported using
+// the Carbon import-once mechanism.
+@mixin edit-side-panel {
+  // The block part of our conventional BEM class names (blockClass__E--M).
+  $block-class: #{$pkg-prefix}--edit-side-panel;
+  $side-panel-block-class: #{$pkg-prefix}--side-panel;
+
+  .#{$block-class} {
+    .#{$carbon-prefix}--form.#{$block-class}__form {
+      padding-top: $spacing-05;
+    }
+
+    .#{$block-class}__form.#{$carbon-prefix}--fieldset {
+      padding-top: $spacing-03;
+    }
+
+    .#{$block-class}__form > * {
+      margin-bottom: $spacing-05;
+    }
+
+    .#{$block-class}__form-title-text {
+      @include carbon--type-style('productive-heading-02');
+
+      padding-bottom: $spacing-03;
+    }
+
+    .#{$block-class}__form-description-text {
+      @include carbon--type-style('body-long-01');
+    }
+
+    &.#{$side-panel-block-class}
+      .#{$carbon-prefix}--btn.#{$side-panel-block-class}__close-button {
+      display: none;
+    }
+
+    .#{$side-panel-block-class} .#{$block-class}__actions-container {
+      position: absolute;
+      z-index: 4;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      margin-bottom: 0;
+    }
+  }
+}
+
+@include exports('edit-side-panel') {
+  @include edit-side-panel;
+}

package/scss/components/EditSidePanel/_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 './edit-side-panel';

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

@@ -0,0 +1,35 @@
+//
+// 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 './index';
+
+// TODO: add any additional styles used by EditSidePanel.stories.js
+@import '../../global/styles/project-settings';
+
+$block-class: #{$pkg-prefix}--edit-side-panel;
+$story-prefix: edit-side-panel-stories__;
+
+.#{$story-prefix}example-container {
+  display: grid;
+  align-items: flex-end;
+  grid-gap: $spacing-04;
+  grid-template-columns: 1fr 1fr;
+}
+
+.#{$story-prefix}example-form-group .bx--label {
+  margin-bottom: 0;
+}
+
+.#{$block-class} .#{$carbon-prefix}--number__control-btn::before,
+.#{$block-class} .#{$carbon-prefix}--number__control-btn::after {
+  background-color: $field-02;
+}
+
+// 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/EmptyStates/_empty-state.scss

@@ -0,0 +1,62 @@
+//
+// 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.
+//
+
+// Standard imports.
+@import '../../global/styles/project-settings';
+
+// Empty states use the following Carbon components:
+// Button, Link
+@import 'carbon-components/scss/components/button/button';
+@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 empty-state {
+  $block-class: #{$pkg-prefix}--empty-state;
+
+  .#{$block-class} {
+    color: $text-01;
+
+    .#{$block-class}__header,
+    .#{$block-class}__subtitle {
+      padding-bottom: $spacing-02;
+      margin: 0;
+    }
+    .#{$block-class}__header--small {
+      @include carbon--type-style('productive-heading-03');
+    }
+    .#{$block-class}__subtitle--small {
+      @include carbon--type-style('body-short-01');
+    }
+  }
+
+  .#{$block-class}__illustration {
+    &.#{$block-class}__illustration--lg {
+      min-width: $spacing-11;
+      max-width: $spacing-11;
+    }
+    &.#{$block-class}__illustration--sm {
+      min-width: $spacing-10;
+      max-width: $spacing-10;
+    }
+  }
+
+  .#{$block-class}__action-button,
+  .#{$block-class}__link {
+    margin-top: $spacing-06;
+  }
+  .#{$block-class} .#{$block-class}__action-button {
+    display: block;
+  }
+  .#{$block-class} .#{$block-class}__link {
+    display: block;
+  }
+}
+
+@include exports('empty-state') {
+  @include empty-state;
+}

package/scss/components/EmptyStates/_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 './empty-state';

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

@@ -0,0 +1,6 @@
+//
+// 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.
+//

package/scss/components/ExampleComponent/_example-component.scss

@@ -0,0 +1,39 @@
+//
+// 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.
+//
+
+// Standard imports.
+@import '../../global/styles/project-settings';
+
+// ExampleComponent uses the following Carbon components:
+// Button, ButtonSet
+@import 'carbon-components/scss/components/button/button';
+
+// Define all component styles in a mixin which is then exported using
+// the Carbon import-once mechanism.
+@mixin example-component {
+  // The block part of our conventional BEM class names (blockClass__E--M).
+  $block-class: #{$pkg-prefix}--example-component;
+
+  .#{$block-class} {
+    display: flex;
+    justify-content: flex-end;
+    --#{$block-class}--border-color: transparent;
+  }
+
+  .#{$block-class}.#{$block-class}--boxed-set {
+    border: 10px solid var(--#{$block-class}--border-color);
+  }
+
+  .#{$block-class}.#{$block-class}--shadow-set {
+    margin: $spacing-04;
+    box-shadow: 0 0 10px var(--#{$block-class}--border-color);
+  }
+}
+
+@include exports('example-component') {
+  @include example-component;
+}

package/scss/components/ExampleComponent/_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 './example-component';

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

@@ -0,0 +1,6 @@
+//
+// 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.
+//

package/scss/components/ExportModal/_export-modal.scss

@@ -0,0 +1,61 @@
+//
+// 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.
+//
+
+// Standard imports.
+@import '../../global/styles/project-settings';
+
+// ExportModal uses the following Carbon components:
+// Button, ComposedModal, ModalHeader, ModalFooter, ModalBody, TextInput,
+// RadioButton, RadioButtonGroup, FormGroup, Loading
+@import 'carbon-components/scss/components/button/button';
+@import 'carbon-components/scss/components/modal/modal';
+@import 'carbon-components/scss/components/text-input/text-input';
+@import 'carbon-components/scss/components/radio-button/radio-button';
+@import 'carbon-components/scss/components/form/form';
+@import 'carbon-components/scss/components/loading/loading';
+
+@mixin export-modal {
+  $block-class: #{$pkg-prefix}--export-modal;
+
+  .#{$block-class} .bx--modal-footer .bx--btn {
+    max-width: none;
+  }
+
+  .#{$block-class}.#{$carbon-prefix}--modal .bx--modal-content {
+    padding-right: $spacing-05;
+  }
+
+  .#{$block-class} .bx--modal-close {
+    display: none;
+  }
+
+  .#{$block-class}__body {
+    padding-right: calc(20% - #{$spacing-05});
+    margin-bottom: $spacing-05;
+  }
+
+  .#{$block-class}__messaging {
+    display: flex;
+    align-items: center;
+  }
+
+  .#{$block-class}__messaging p {
+    margin-left: $spacing-03;
+  }
+
+  .#{$block-class}__checkmark-icon {
+    fill: $interactive-01;
+  }
+
+  .#{$block-class}__error-icon {
+    fill: $danger;
+  }
+}
+
+@include exports('export-modal') {
+  @include export-modal;
+}

package/scss/components/ExportModal/_index.scss

@@ -0,0 +1,10 @@
+//
+// 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.
+//
+
+// An index file is most useful when you have multiple components
+
+@import './export-modal';

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

@@ -0,0 +1,6 @@
+//
+// 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.
+//

package/scss/components/ExpressiveCard/_expressive-card.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.
+//
+
+// Standard imports.
+@import '../../global/styles/project-settings';
+
+// ExpressiveCard uses the following IBM Products components:
+// Card
+@import '../Card/card';
+
+@mixin card-expressive {
+  $block-class: #{$pkg-prefix}--card;
+
+  .#{$block-class}__title {
+    @include carbon--type-style('productive-heading-03');
+  }
+}
+
+@include exports('card-expressive') {
+  @include card-expressive;
+}

package/scss/components/ExpressiveCard/_index.scss

@@ -0,0 +1,10 @@
+//
+// 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.
+//
+
+// An index file is most useful when you have multiple components
+
+@import './expressive-card';