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

package/scss/components/CreateFullPage/_create-full-page.scss

@@ -0,0 +1,187 @@
+//
+// 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';
+
+// CreateFullPage uses the following Carbon components:
+// Grid, Row, Column, Form, ProgressIndicator, ProgressStep, Toggle,
+// ComposedModal, ModalHeader, ModalBody, ModalFooter, Button
+@import 'carbon-components/scss/components/form/form';
+@import 'carbon-components/scss/components/progress-indicator/progress-indicator';
+@import 'carbon-components/scss/components/toggle/toggle';
+@import 'carbon-components/scss/components/modal/modal';
+@import 'carbon-components/scss/components/button/button';
+
+// CreateFullPage uses the following IBM Products components:
+// ActionSet, CreateInfluencer
+@import '../CreateInfluencer/index';
+@import '../ActionSet/action-set';
+
+// Define all component styles in a mixin which is then exported using
+// the Carbon import-once mechanism.
+@mixin create-full-page {
+  // The block part of our conventional BEM class names (blockClass__E--M).
+  $block-class: #{$pkg-prefix}--create-full-page;
+
+  .#{$block-class} .#{$block-class} {
+    color: $text-01;
+  }
+
+  .#{$block-class} .#{$block-class}__content .#{$carbon-prefix}--grid {
+    padding-top: $spacing-06;
+    margin-right: 0;
+    margin-left: 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 {
+    opacity: 1;
+  }
+
+  .#{$block-class} .#{$block-class}__section-subtitle,
+  .#{$block-class} .#{$block-class}__step-subtitle {
+    @include carbon--type-style('productive-heading-01');
+
+    max-width: 50%;
+    margin-bottom: $spacing-03;
+  }
+
+  .#{$block-class} .#{$block-class}__section-description,
+  .#{$block-class} .#{$block-class}__step-description {
+    @include carbon--type-style('body-long-01');
+
+    max-width: 50%;
+    margin-bottom: $spacing-06;
+  }
+
+  .#{$block-class} .#{$carbon-prefix}--fieldset {
+    margin-bottom: 0;
+  }
+
+  .#{$block-class} .#{$block-class}__step-fieldset > * {
+    margin-bottom: $spacing-05;
+  }
+
+  .#{$block-class} .#{$carbon-prefix}--modal-close {
+    display: none;
+  }
+
+  .#{$block-class} {
+    display: flex;
+    height: 100vh;
+    padding: 0;
+    margin: 0;
+  }
+
+  .#{$block-class} .#{$block-class}__left-nav {
+    grid-column: 1 / -1;
+    grid-row: 1 / -1;
+    overflow-y: auto;
+  }
+
+  .#{$block-class} .#{$block-class}__body {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+  }
+
+  .#{$block-class} .#{$block-class}__main {
+    display: flex;
+    max-height: 100%;
+    flex-direction: column;
+    flex-grow: 1;
+  }
+
+  .#{$block-class} .#{$block-class}__content {
+    overflow: auto;
+    flex-grow: 1;
+    background-color: $ui-background;
+    color: $text-01;
+    overflow-x: hidden;
+  }
+
+  .#{$block-class} .#{$block-class}__step {
+    position: relative;
+    padding-bottom: $spacing-07;
+  }
+
+  .#{$block-class} .#{$carbon-prefix}--side-nav--ux {
+    top: 0;
+    height: min-content;
+    padding-top: 0;
+    border-right: 1px solid $ui-03;
+    background-color: transparent;
+    grid-row: 1;
+    overflow-x: auto;
+  }
+
+  .#{$block-class} .#{$block-class}__section-divider {
+    position: relative;
+    display: block;
+    width: 0;
+    height: 1px;
+    margin: $spacing-07 calc(-1 * #{$spacing-08}) $spacing-07
+      calc(-1 * #{$spacing-08});
+
+    &::after {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100vw;
+      height: 1px;
+      background-color: $ui-03;
+      content: '';
+    }
+  }
+
+  .#{$block-class} .#{$block-class}__step-title,
+  .#{$block-class} .#{$block-class}__section-title {
+    @include carbon--type-style('productive-heading-04');
+
+    max-width: 50%;
+    margin-bottom: $spacing-05;
+  }
+
+  .#{$block-class} .#{$block-class}__influencer {
+    display: grid;
+    flex: 0 0 257px;
+    border-right: 1px solid $ui-03;
+    background-color: $ui-01;
+    grid-template-columns: 100%;
+    grid-template-rows: 1fr auto;
+  }
+
+  .#{$block-class} .#{$block-class}__progress-indicator {
+    padding: $spacing-06;
+  }
+
+  .#{$block-class} .#{$block-class}__influencer-toggle {
+    padding: $spacing-06;
+    grid-column: 1 / -1;
+    grid-row: -1 / -1;
+  }
+
+  .#{$block-class} .#{$block-class}__buttons {
+    border-top: 1px solid $ui-03;
+  }
+}
+
+@include exports('create-full-page') {
+  @include create-full-page;
+}

package/scss/components/CreateFullPage/_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-full-page';

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

@@ -0,0 +1,51 @@
+//
+// 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';
+
+@import 'carbon-components/scss/components/ui-shell/ui-shell';
+
+$story-class: 'create-full-page-stories';
+$block-class: #{$pkg-prefix}--create-full-page;
+// cspell:disable-next-line
+.sbdocs .#{$story-class}__viewport {
+  height: 100vh;
+  background-color: $ui-background;
+  box-shadow: 0 0 4px 1px $ui-03;
+  color: $text-01;
+  overflow-y: auto;
+}
+
+.#{$story-class}__step-fieldset--no-label .#{$carbon-prefix}--fieldset legend {
+  position: absolute;
+  overflow: hidden;
+  width: 1px;
+  height: 1px;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+.#{$story-class}__tooltip {
+  position: relative;
+  // stylelint-disable-next-line carbon/layout-token-use
+  top: calc(#{$spacing-05} + #{$spacing-01});
+  left: $spacing-11;
+}
+
+.#{$block-class}__step-fieldset.#{$story-class}__step-fieldset--label.#{$carbon-prefix}--label {
+  position: absolute;
+  overflow: hidden;
+  width: 1px;
+  height: 1px;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+.#{$carbon-prefix}--form-item {
+  margin-bottom: $spacing-05;
+}

package/scss/components/CreateInfluencer/_create-influencer.scss

@@ -0,0 +1,89 @@
+//
+// 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';
+
+@import 'carbon-components/scss/components/progress-indicator/progress-indicator';
+
+@mixin create-influencer {
+  $block-class: #{$pkg-prefix}--create-influencer;
+  $create-tearsheet-block-class: #{$pkg-prefix}--tearsheet-create;
+  $influencerAnimationStart: calc(-1 * #{$spacing-05});
+  @keyframes influencerMenuEntrance {
+    0% {
+      opacity: 0;
+      // stylelint-disable-next-line carbon/layout-token-use
+      transform: translateX($influencerAnimationStart);
+    }
+    100% {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+  @keyframes influencerMenuExit {
+    0% {
+      opacity: 1;
+      transform: translateX(0);
+    }
+    100% {
+      opacity: 0;
+      // stylelint-disable-next-line carbon/layout-token-use
+      transform: translateX($influencerAnimationStart);
+    }
+  }
+  .#{$block-class} {
+    display: grid;
+    height: 100%;
+    grid-template-columns: 100%;
+    grid-template-rows: 1fr auto;
+  }
+
+  .#{$block-class}__left-nav {
+    grid-column: 1 / -1;
+    grid-row: 1 / -1;
+    overflow-y: auto;
+  }
+
+  .#{$block-class}__progress-indicator {
+    padding: $spacing-06;
+  }
+
+  .#{$block-class}__view-all-toggle {
+    padding: $spacing-06;
+    grid-column: 1 / -1;
+    grid-row: -1 / -1;
+  }
+  .#{$block-class}__side-nav-opening,
+  .#{$block-class}__progress-indicator-opening {
+    // stylelint-disable-next-line carbon/motion-token-use
+    animation: influencerMenuEntrance $duration--moderate-02 1;
+    animation-fill-mode: forwards;
+    @include carbon--motion(entrance, productive);
+  }
+
+  .#{$block-class}__side-nav-closing,
+  .#{$block-class}__progress-indicator-closing {
+    // stylelint-disable-next-line carbon/motion-token-use
+    animation: influencerMenuExit $duration--moderate-02 1;
+    animation-fill-mode: forwards;
+    @include carbon--motion(exit, productive);
+  }
+
+  @media (prefers-reduced-motion) {
+    .#{$block-class}__side-nav-opening,
+    .#{$block-class}__progress-indicator-opening,
+    .#{$block-class}__side-nav-closing,
+    .#{$block-class}__progress-indicator-closing {
+      animation: none;
+      opacity: 1;
+    }
+  }
+}
+
+@include exports('create-influencer') {
+  @include create-influencer;
+}

package/scss/components/CreateInfluencer/_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-influencer';

package/scss/components/CreateModal/_create-modal.scss

@@ -0,0 +1,81 @@
+//
+// 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';
+
+// CreateModal uses the following Carbon components:
+// ComposedModal, ModalHeader, ModalFooter, ModalBody, Form, Button
+@import 'carbon-components/scss/components/modal/modal';
+@import 'carbon-components/scss/components/form/form';
+@import 'carbon-components/scss/components/button/button';
+
+@mixin create-modal {
+  .#{$pkg-prefix}--create-modal {
+    background-color: $ui-background;
+  }
+
+  .#{$pkg-prefix}--create-modal .bx--modal-close {
+    display: none;
+  }
+
+  .#{$pkg-prefix}--create-modal .bx--modal-container {
+    @include carbon--breakpoint(md) {
+      max-height: 95%;
+    }
+    @include carbon--breakpoint(lg) {
+      max-height: 95%;
+    }
+  }
+
+  .#{$pkg-prefix}--create-modal .bx--modal-header {
+    padding-right: 20%;
+    padding-bottom: $spacing-03;
+    border-bottom: 1px solid $ui-03;
+    margin-bottom: 0;
+  }
+
+  .#{$pkg-prefix}--create-modal .bx--modal-footer .bx--btn {
+    max-width: none;
+  }
+
+  .#{$pkg-prefix}--create-modal__title {
+    @include carbon--type-style('productive-heading-03');
+
+    margin-bottom: $spacing-02;
+  }
+
+  .#{$pkg-prefix}--create-modal__subtitle {
+    @include carbon--type-style('body-short-01');
+
+    margin-bottom: $spacing-03;
+    color: $text-02;
+  }
+
+  .#{$pkg-prefix}--create-modal__description {
+    @include carbon--type-style('body-long-01');
+
+    padding-right: calc(20% - #{$spacing-05});
+    margin: $spacing-03 0 $spacing-05 0;
+  }
+
+  .#{$pkg-prefix}--create-modal__form .bx--fieldset {
+    min-width: 100%;
+    margin-bottom: 0;
+  }
+
+  .#{$pkg-prefix}--create-modal__form > * {
+    margin-bottom: $spacing-05;
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+}
+
+@include exports('create-modal') {
+  @include create-modal;
+}

package/scss/components/CreateModal/_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-modal';

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

@@ -0,0 +1,50 @@
+//
+// 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 'carbon-components/scss/components/number-input/number-input';
+@import 'carbon-components/scss/components/text-area/text-area';
+@import 'carbon-components/scss/components/text-input/text-input';
+@import 'carbon-components/scss/components/dropdown/dropdown';
+@import 'carbon-components/scss/components/date-picker/date-picker';
+@import 'carbon-components/scss/components/radio-button/radio-button';
+@import 'carbon-components/scss/components/progress-indicator/progress-indicator';
+@import 'carbon-components/scss/components/tooltip/tooltip';
+@import 'carbon-components/scss/components/modal/modal';
+
+.bx--number {
+  min-width: 100%;
+}
+
+.bx--number__control-btn::before {
+  background-color: transparent;
+}
+
+.bx--number__control-btn::after {
+  background-color: transparent;
+}
+
+.bx--date-picker {
+  min-width: 100%;
+}
+
+.bx--date-picker-container {
+  min-width: 100%;
+}
+
+.bx--date-picker.bx--date-picker--single .bx--date-picker__input {
+  min-width: 100%;
+}
+
+.bx--list-box__menu-icon {
+  top: $spacing-03;
+}
+
+.example-wrapper {
+  display: grid;
+  grid-gap: $spacing-05;
+  grid-template-columns: 1fr 1fr;
+}

package/scss/components/CreateSidePanel/_create-side-panel.scss

@@ -0,0 +1,99 @@
+//
+// 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 '../SidePanel/side-panel-variables';
+
+// CreateSidePanel uses the following Carbon components:
+// Form
+@import 'carbon-components/scss/components/form/form';
+
+// CreateSidePanel uses the following IBM Products components:
+// SidePanel
+@import '../SidePanel/side-panel';
+
+@mixin create-side-panel {
+  $block-class: #{$pkg-prefix}--create-side-panel;
+  $side-panel-block-class: #{$pkg-prefix}--side-panel;
+
+  .#{$block-class}.#{$side-panel-block-class}__container
+    .#{$block-class}__content-text {
+    padding-right: calc(20% - #{$spacing-05});
+  }
+
+  @each $size, $value in $side-panel-sizes {
+    .#{$block-class}.#{$side-panel-block-class}__container--#{$size}
+      .#{$side-panel-block-class}__title-text {
+      width: calc(#{$value} - #{$spacing-05});
+      // stylelint-disable-next-line carbon/layout-token-use
+      padding-right: calc((#{$value} * 0.2) - #{$spacing-05});
+      margin-bottom: $spacing-02;
+    }
+    .#{$block-class}.#{$side-panel-block-class}__container--#{$size}
+      .#{$side-panel-block-class}__subtitle-text {
+      width: calc(#{$value} - #{$spacing-05});
+      // stylelint-disable-next-line carbon/layout-token-use
+      padding-right: calc((#{$value} * 0.2) - #{$spacing-05});
+      padding-bottom: $spacing-05;
+      border-bottom: 1px solid $ui-03;
+      color: $text-02;
+    }
+  }
+
+  .#{$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');
+  }
+
+  .#{$block-class}.#{$side-panel-block-class}
+    .bx--btn.#{$side-panel-block-class}__close-button {
+    display: none;
+  }
+
+  .#{$block-class}__title {
+    @include carbon--type-style('productive-heading-03');
+
+    margin-bottom: $spacing-02;
+  }
+
+  .#{$block-class}__subtitle {
+    @include carbon--type-style('body-short-01');
+
+    margin-bottom: $spacing-03;
+    color: $text-02;
+  }
+  .#{$side-panel-block-class} .#{$block-class}__actions-container {
+    position: absolute;
+    z-index: 4;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    margin-bottom: 0;
+  }
+}
+
+@include exports('create-side-panel') {
+  @include create-side-panel;
+}

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

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

@@ -0,0 +1,27 @@
+//
+// 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';
+
+$block-class: #{$pkg-prefix}--create-side-panel;
+$story-prefix: create-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;
+}