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

package/scss/components/BreadcrumbWithOverflow/_breadcrumb-with-overflow.scss

@@ -0,0 +1,86 @@
+//
+// 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';
+@import '../../global/styles/mixins';
+
+// BreadcrumbWithOverflow uses the following Carbon components:
+// Breadcrumb, BreadcrumbItem, OverflowMenu, OverflowMenuItem
+@import 'carbon-components/scss/components/breadcrumb/breadcrumb';
+@import 'carbon-components/scss/components/overflow-menu/overflow-menu';
+
+// Define all component styles in a mixin which is then exported using
+// the Carbon import-once mechanism.
+@mixin breadcrumb-with-overflow {
+  $block-class: #{$pkg-prefix}--breadcrumb-with-overflow;
+
+  @include block-wrap($block-class) {
+    &.#{$block-class} {
+      display: block;
+    }
+
+    .#{$block-class}__space {
+      position: relative;
+      display: block;
+      width: 100%;
+      white-space: nowrap;
+    }
+
+    .#{$block-class}__breadcrumb-container.#{$block-class}__breadcrumb-container-with-items {
+      display: none;
+      width: 100%;
+      @include carbon--breakpoint(md) {
+        display: inline-flex; // needed to register a width
+      }
+    }
+
+    .#{$block-class}__breadcrumb-container .#{$carbon-prefix}--breadcrumb {
+      width: 100%;
+      flex-wrap: nowrap;
+      align-items: flex-start;
+    }
+
+    .#{$block-class}__breadcrumb-container--hidden {
+      // This breadcrumb container is used to measure the width of all displayable breadcrumbs
+      @include measuring-container;
+    }
+
+    .#{$carbon-prefix}--breadcrumb-item:last-child {
+      display: inline;
+    }
+
+    .#{$block-class}__displayed-breadcrumb:last-child {
+      display: inline;
+      overflow: hidden;
+    }
+
+    .#{$block-class}__displayed-breadcrumb:last-child .#{$carbon-prefix}--link {
+      display: inline-block;
+      overflow: hidden;
+      width: 100%;
+      text-overflow: ellipsis;
+    }
+
+    .#{$carbon-prefix}--link {
+      max-height: 18px; // to match breadcrumb - overflow button is 20 by default
+    }
+
+    .#{$block-class}__breadcrumb-back-button.#{$carbon-prefix}--btn.#{$carbon-prefix}--btn--icon-only.#{$carbon-prefix}--tooltip__trigger {
+      display: inline-flex;
+      margin-top: calc(-1 * #{$spacing-04});
+
+      @include carbon--breakpoint(md) {
+        display: none;
+      }
+    }
+  }
+}
+
+@include exports('breadcrumb-with-overflow') {
+  @include breadcrumb-with-overflow;
+}

package/scss/components/BreadcrumbWithOverflow/_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 './breadcrumb-with-overflow.scss';

package/scss/components/ButtonMenu/_button-menu.scss

@@ -0,0 +1,36 @@
+//
+// 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';
+
+// TODO: @import(s) of Carbon settings and component styles and other
+// related component styles used by ButtonMenu
+
+// Define all component styles in a mixin which is then exported using
+// the Carbon import-once mechanism.
+@mixin button-menu {
+  // The block part of our conventional BEM class names (blockClass__E--M).
+  $block-class: #{$pkg-prefix}--button-menu;
+
+  .#{$block-class} {
+    min-width: 160px;
+
+    .#{$block-class}__trigger {
+      width: 100%;
+      padding: 0 $spacing-05;
+    }
+  }
+
+  .#{$block-class}__options.#{$carbon-prefix}--overflow-menu-options::after {
+    content: initial;
+  }
+}
+
+@include exports('button-menu') {
+  @include button-menu;
+}

package/scss/components/ButtonMenu/_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 './button-menu';

package/scss/components/ButtonMenu/_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/ButtonSetWithOverflow/_button-set-with-overflow.scss

@@ -0,0 +1,52 @@
+//
+// 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';
+@import '../../global/styles/mixins';
+
+// ButtonSetWithOverflow uses the following Carbon components:
+// ButtonSet, Button
+@import 'carbon-components/scss/components/button/button';
+
+// ButtonSetWithOverflow uses the following IBM Products components:
+// ButtonMenu, ButtonMenuItem
+@import '../ButtonMenu/button-menu';
+
+$block-class: #{$pkg-prefix}--button-set-with-overflow;
+
+@mixin button-set-with-overflow {
+  @include block-wrap($block-class) {
+    &.#{$block-class} {
+      display: flex;
+      width: 100%;
+    }
+
+    .#{$block-class}__space {
+      position: relative;
+      display: block;
+      width: 100%;
+      white-space: nowrap;
+    }
+
+    .#{$block-class}__button-container {
+      display: inline-flex; // needed to register a width
+    }
+
+    .#{$block-class}__button-container--hidden {
+      // This button-set container is used to measure the width of all displayable button-sets
+      @include measuring-container;
+    }
+
+    &.#{$block-class}--right {
+      justify-content: flex-end;
+    }
+  }
+}
+
+@include exports('button-set-with-overflow') {
+  @include button-set-with-overflow;
+}

package/scss/components/ButtonSetWithOverflow/_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 './button-set-with-overflow';

package/scss/components/Card/_card.scss

@@ -0,0 +1,121 @@
+//
+// 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';
+
+// Card uses the following Carbon components:
+// Button, OverflowMenu, OverflowMenuItem
+@import 'carbon-components/scss/components/button/button';
+@import 'carbon-components/scss/components/overflow-menu/overflow-menu';
+
+@mixin card {
+  $block-class: #{$pkg-prefix}--card;
+
+  .#{$block-class} {
+    background: $ui-01;
+    color: $text-01;
+  }
+
+  .#{$block-class}__clickable {
+    cursor: pointer;
+    transition: background $duration--fast-02;
+  }
+
+  .#{$block-class}__clickable:hover {
+    background: $hover-ui;
+  }
+
+  .#{$block-class}__media-left {
+    display: flex;
+    flex-direction: row;
+  }
+
+  .#{$block-class}__media-left .#{$block-class}__content-container {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+  }
+
+  .#{$block-class}__media-left .#{$block-class}__footer {
+    align-self: flex-end;
+    margin-top: auto;
+  }
+
+  .#{$block-class}__media > * {
+    display: block;
+    max-width: 100%;
+  }
+
+  .#{$block-class}__header {
+    padding: $spacing-05;
+  }
+
+  .#{$block-class}__header-label-only {
+    padding-bottom: $spacing-03;
+  }
+
+  .#{$block-class}__header-label-only .#{$block-class}__label {
+    margin-bottom: 0;
+  }
+
+  .#{$block-class}__header-container {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .#{$block-class}__label {
+    @include carbon--type-style('label-01');
+
+    margin-bottom: $spacing-01;
+  }
+
+  .#{$block-class}__description {
+    @include carbon--type-style('caption-01');
+
+    margin-top: $spacing-01;
+  }
+
+  .#{$block-class}__body {
+    @include carbon--type-style('body-short-01');
+
+    padding: $spacing-05;
+    padding-top: 0;
+  }
+
+  .#{$block-class}__footer {
+    display: flex;
+    justify-content: flex-end;
+  }
+
+  .#{$block-class}__actions {
+    display: flex;
+    flex-direction: row;
+    margin: $spacing-05;
+    margin-top: 0;
+  }
+
+  .#{$block-class}__icon {
+    cursor: pointer;
+  }
+
+  .#{$block-class}__link {
+    color: inherit;
+    text-decoration: inherit;
+  }
+
+  .#{$block-class}__pictogram {
+    padding-top: $spacing-05;
+    padding-left: $spacing-05;
+  }
+}
+
+@include exports('card') {
+  @include card;
+}

package/scss/components/Card/_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 './card';

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

@@ -0,0 +1,12 @@
+//
+// 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.
+//
+
+// make the root full width to get a better idea of how the cards
+// look in a real grid situation
+#root {
+  width: 100%;
+}

package/scss/components/Cascade/_cascade.scss

@@ -0,0 +1,50 @@
+//
+// Copyright IBM Corp. 20201, 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 'carbon-components/scss/globals/grid/grid';
+
+@mixin cascade {
+  $block-class: #{$pkg-prefix}--cascade;
+  $animationProps: $duration--moderate-02 motion(standard, productive) 0s 1;
+  $fadeStart: translateY(3rem);
+  $fadeEnd: translateY(0);
+
+  @keyframes fade {
+    0% {
+      opacity: 0;
+      transform: $fadeStart;
+    }
+
+    100% {
+      opacity: 1;
+      transform: $fadeEnd;
+    }
+  }
+
+  .#{$block-class}__element,
+  .#{$block-class}__col {
+    @media (prefers-reduced-motion: no-preference) {
+      animation: $animationProps fade;
+      animation-fill-mode: forwards;
+      opacity: 0;
+    }
+  }
+
+  //adds cascading delay
+  @for $i from 1 through 8 {
+    .#{$block-class}__element:nth-child(n + #{$i}),
+    .#{$block-class}__col-#{$i} {
+      animation-delay: #{$i * 60}ms;
+    }
+  }
+}
+
+@include exports('cascade') {
+  @include cascade;
+}

package/scss/components/Cascade/_index.scss

@@ -0,0 +1,10 @@
+//
+// Copyright IBM Corp. 20201, 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 './cascade';

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

@@ -0,0 +1,32 @@
+//
+// Copyright IBM Corp. 20201, 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';
+
+#root {
+  width: 100%;
+}
+
+.box {
+  display: inline-block;
+  width: 400px;
+  height: 300px;
+  margin: $spacing-04;
+  background-color: $ui-05;
+  color: $text-04;
+}
+
+.grid-box {
+  display: flex;
+  width: 100%;
+  height: 300px;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: $spacing-03;
+  background-color: $ui-05;
+  color: $text-04;
+}

package/scss/components/ComboButton/_combo-button.scss

@@ -0,0 +1,64 @@
+//
+// 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 '../../global/styles/project-settings';
+
+@import 'carbon-components/scss/components/button/button';
+@import 'carbon-components/scss/components/overflow-menu/overflow-menu';
+
+@include exports($name: combo-button) {
+  /// Sets the prefix for all IBM Security-specific classes.
+  /// @access private
+  /// @type String
+  $security--prefix: security;
+
+  .#{$security--prefix}--combo-button {
+    position: relative;
+    display: inline-flex;
+  }
+
+  .#{$security--prefix}--combo-button__action {
+    @include text-overflow;
+  }
+
+  .#{$security--prefix}--combo-button__overflow-menu {
+    width: carbon--mini-units($count: 6);
+    height: auto;
+    border-left: carbon--rem($px: 1px) solid $ui-03;
+    background-color: $interactive-01;
+  }
+
+  .#{$security--prefix}--combo-button__overflow-menu.#{$prefix}--overflow-menu:hover,
+  .#{$security--prefix}--combo-button__overflow-menu.#{$prefix}--overflow-menu--open {
+    background-color: $hover-primary;
+  }
+
+  .#{$security--prefix}--combo-button__overflow-menu.#{$prefix}--overflow-menu:active {
+    background-color: $active-primary;
+  }
+
+  .#{$security--prefix}--combo-button__overflow-menu__icon {
+    fill: $icon-03;
+    pointer-events: none;
+  }
+
+  .#{$security--prefix}--combo-button__overflow-menu__list {
+    width: 100%;
+  }
+
+  .#{$security--prefix}--combo-button__overflow-menu__list:after {
+    display: none;
+  }
+
+  .#{$security--prefix}--combo-button__overflow-menu__item {
+    max-width: none;
+  }
+
+  .#{$security--prefix}--combo-button__overflow-menu__item__icon {
+    margin-left: auto;
+  }
+}

package/scss/components/ComboButton/_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 './combo-button';