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

package/scss/components/UserProfileImage/_user-profile-image.scss

@@ -0,0 +1,137 @@
+//
+// 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 './color-map';
+
+// UserProfileImage uses the following Carbon components:
+// TooltipIcon
+@import 'carbon-components/scss/components/tooltip/tooltip';
+
+$block-class: #{$pkg-prefix}--user-profile-image;
+
+$sizes: (
+  xlg: $spacing-10,
+  lg: $spacing-07,
+  md: $spacing-06,
+  sm: calc(#{$spacing-05} + #{$spacing-02}),
+  xs: $spacing-05,
+);
+
+@mixin size($size) {
+  $_size: map-get($sizes, $size);
+
+  width: $_size;
+  height: $_size;
+}
+
+$base-colors: 'cyan', 'gray', 'green', 'magenta', 'purple', 'teal';
+$themes: (
+  'light': (
+    'light-contrast': 60,
+    'dark-contrast': 80,
+  ),
+  'dark': (
+    'light-contrast': 50,
+    'dark-contrast': 30,
+  ),
+);
+
+$theme-keys: map-keys($themes);
+
+@function get-background-color($color, $key, $contrast-key) {
+  @return map-get(
+    $carbon-colors,
+    #{$color}#{map-get(map-get($themes, $key), #{$contrast-key}-contrast)}
+  );
+}
+
+@mixin user-profile-image {
+  @each $key in $theme-keys {
+    .#{$block-class}--#{$key} {
+      color: $ui-01;
+    }
+    @each $color in $base-colors {
+      @each $contrast-key in $theme-keys {
+        .#{$block-class}--#{$key}.#{$block-class}--#{$contrast-key}-#{$color} {
+          // stylelint-disable-next-line carbon/theme-token-use
+          background-color: get-background-color($color, $key, $contrast-key);
+        }
+      }
+    }
+  }
+
+  .#{$block-class} {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    border-radius: 100%;
+    text-transform: uppercase;
+  }
+
+  .#{$prefix}--tooltip__trigger .#{$block-class} svg {
+    fill: $ui-01;
+  }
+
+  .#{$block-class}__photo {
+    width: 100%;
+    border-radius: 100%;
+  }
+
+  .#{$block-class}__photo--xlg {
+    @include size('xlg');
+  }
+
+  .#{$block-class}__photo--lg {
+    @include size('lg');
+  }
+
+  .#{$block-class}__photo--md {
+    @include size('md');
+  }
+  .#{$block-class}__photo--sm {
+    @include size('sm');
+  }
+
+  .#{$block-class}__photo--xs {
+    @include size('xs');
+  }
+
+  .#{$block-class}--xlg {
+    @include size('xlg');
+    @include carbon--type-style('productive-heading-04');
+  }
+
+  .#{$block-class}--lg {
+    @include size('lg');
+    @include carbon--type-style('body-short-01');
+  }
+
+  .#{$block-class}--md {
+    @include size('md');
+    @include carbon--type-style('label-01');
+    @include carbon--font-weight('semibold');
+  }
+
+  .#{$block-class}--sm {
+    @include size('sm');
+    @include carbon--type-style('label-01');
+    @include carbon--font-weight('semibold');
+  }
+
+  .#{$block-class}--xs {
+    @include size('xs');
+    @include carbon--type-style('label-01');
+    @include carbon--font-weight('semibold');
+  }
+}
+
+@include exports('user-profile-image') {
+  @include user-profile-image;
+}

package/scss/components/WebTerminal/_index.scss

@@ -0,0 +1 @@
+@import './web-terminal';

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

@@ -0,0 +1,14 @@
+/* stylelint-disable  */
+
+@import '../../global/styles/project-settings';
+
+.example-terminal {
+  padding: $spacing-05;
+  color: $gray-10;
+  font-family: 'IBM Plex Mono', monospace;
+
+  p {
+    padding-bottom: $spacing-07;
+    font-size: 14px;
+  }
+}

package/scss/components/WebTerminal/_web-terminal.scss

@@ -0,0 +1,70 @@
+// Standard imports.
+@import '../../global/styles/project-settings';
+
+$web-terminal-width: 36.5rem;
+$block-class: #{$pkg-prefix}--web-terminal;
+
+@keyframes webTerminalEntrance {
+  0% {
+    opacity: 0;
+    // stylelint-disable-next-line carbon/layout-token-use
+    transform: translateX(#{$web-terminal-width});
+  }
+  100% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes webTerminalExit {
+  0% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  100% {
+    opacity: 0;
+    // stylelint-disable-next-line carbon/layout-token-use
+    transform: translateX(#{$web-terminal-width});
+  }
+}
+
+/*
+  The reason for not using theme tokens in the web terminal
+  component is because we want these colors to always be the same
+  despite of which carbon theme the user has.
+*/
+
+.#{$block-class} {
+  @include carbon--theme($carbon--theme--g90, true);
+
+  position: fixed;
+  top: $spacing-09;
+  right: 0;
+  width: $web-terminal-width;
+  height: calc(100vh - #{$spacing-09});
+  border-left: 1px solid $gray-90;
+  color: $text-01;
+  /* stylelint-disable-next-line  */
+  background-color: $gray-100;
+}
+
+.#{$block-class}__bar {
+  display: flex;
+  height: 3rem;
+  align-items: center;
+  justify-content: space-between;
+  background-color: $ui-background;
+}
+
+.#{$block-class}__actions {
+  display: flex;
+}
+
+.#{$block-class}__documentation-overflow {
+  @include carbon--theme($carbon--theme--g100, true);
+}
+
+// Terminal body styles
+.#{$block-class}__body {
+  height: 100%;
+}

package/scss/components/_Canary/_canary.scss

@@ -0,0 +1,9 @@
+//
+// 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 'carbon-components/scss/components/code-snippet/code-snippet';
+@import 'carbon-components/scss/components/copy-button/copy-button';

package/scss/components/_index-released-only.scss

@@ -0,0 +1,34 @@
+//
+// 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 files here used by released components, or used by components
+// which are themselves used by released components.
+
+@import './AboutModal/index';
+@import './APIKeyModal/index';
+@import './ActionSet/index';
+@import './Cascade/index';
+@import './CreateModal/index';
+@import './CreateFullPage/index';
+@import './CreateSidePanel/index';
+@import './CreateTearsheetNarrow/index';
+@import './CreateTearsheet/index';
+@import './EmptyStates/index';
+@import './ExportModal/index';
+@import './ExpressiveCard/index';
+@import './HTTPErrors/index';
+@import './ImportModal/index';
+@import './NotificationsPanel/index';
+@import './PageHeader/index';
+@import './ProductiveCard/index';
+@import './RemoveModal/index';
+@import './Saving/index';
+@import './SidePanel/index';
+@import './StatusIcon/index';
+@import './TagSet/index';
+@import './Tearsheet/index';
+@import './UserProfileImage/index';

package/scss/components/_index.scss

@@ -0,0 +1,44 @@
+//
+// 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 all scss files here for those that want them all bundled up.
+
+@import './_Canary/canary';
+
+@import './APIKeyModal/index';
+@import './AboutModal/index';
+@import './ActionSet/index';
+@import './ButtonMenu/index';
+@import './Cascade/index';
+@import './ComboButton/index';
+@import './CreateFullPage/index';
+@import './CreateModal/index';
+@import './CreateSidePanel/index';
+@import './CreateTearsheet/index';
+@import './CreateTearsheetNarrow/index';
+@import './EmptyStates/index';
+@import './ExampleComponent/index';
+@import './ExportModal/index';
+@import './ExpressiveCard/index';
+@import './HTTPErrors/index';
+@import './ImportModal/index';
+@import './LoadingBar/index';
+@import './ModifiedTabs/index';
+@import './NotificationsPanel/index';
+@import './PageHeader/index';
+@import './ProductiveCard/index';
+@import './RemoveModal/index';
+@import './Saving/index';
+@import './SidePanel/index';
+@import './StatusIcon/index';
+@import './TagSet/index';
+@import './Tearsheet/index';
+@import './Toolbar/index';
+@import './WebTerminal/index';
+@import './UserProfileImage/index';
+@import './EditSidePanel/index';
+@import './OptionsTile/index';

package/scss/generated/feature-flags/_feature-flags.scss

@@ -0,0 +1,19 @@
+//
+// 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.
+//
+
+// ******************************
+// *
+// * ONLY EDIT IN /common-files/feature-flags files elsewhere are copies
+// * created by a pre-commit step
+// *
+// ******************************
+
+$feature-flags: (
+  ui-shell: true,
+  grid-columns-16: true,
+  enable-css-custom-properties: true,
+);

package/scss/global/styles/_generate-carbon-modules.scss

@@ -0,0 +1,14 @@
+//
+// 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.
+//
+
+// Generate the list of Carbon style modules used.
+@import '@carbon/import-once/scss/import-once';
+@import 'carbon-components/scss/globals/scss/styles';
+
+.___imported-modules-output {
+  content: $imported-modules;
+}

package/scss/global/styles/_imported-carbon-modules.scss

@@ -0,0 +1,25 @@
+//
+// 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.
+//
+
+/// List of Carbon style modules used.
+/// @type List
+/// @access public
+$imported-carbon-modules: 'css--reset' 'css--default-type' 'skeleton'
+  'helper-classes' 'css--font-face' 'css--helpers' 'css--body' 'grid'
+  'accordion' 'link' 'breadcrumb' 'button' 'form' 'checkbox' 'snippet'
+  'list-box' 'combo-box' 'content-switcher' 'copy-button' 'data-table-v2-action'
+  'data-table-v2-core' 'data-table-v2-expandable' 'data-table-sort'
+  'data-table-inline-edit' 'data-table-skeleton' 'date-picker' 'dropdown'
+  'loading' 'file-uploader' 'inline-loading' 'lists' 'menu' 'modal'
+  'multi-select' 'inline-notifications' 'toast-notifications' 'number-input'
+  'overflow-menu' 'pagination-nav' 'select' 'text-input' 'pagination'
+  'progress-bar' 'tooltip' 'progress-indicator' 'radio-button' 'search'
+  'skeleton-text' 'skeleton-icon' 'skeleton-placeholder' 'slider'
+  'structured-list' 'tabs' 'tags' 'text-area' 'tile' 'time-picker' 'toggle'
+  'toolbar' 'unstable_pagination' 'carbon-header' 'carbon-header-panel'
+  'product-switcher' 'carbon-header-switcher' 'carbon-side-nav'
+  'carbon-navigation' 'carbon-content' 'treeview';

package/scss/global/styles/_mixins.scss

@@ -0,0 +1,22 @@
+//
+// 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.
+//
+
+@mixin block-wrap($block-class) {
+  .#{$block-class} {
+    @content;
+  }
+}
+
+@mixin measuring-container() {
+  position: absolute;
+  top: -100vh; // off screen
+  left: -100vw; // off screen
+  overflow: hidden;
+  max-width: 100vw; // NOTE: resize only detected if < 100vw
+  pointer-events: none;
+  visibility: hidden;
+}

package/scss/global/styles/_project-settings.scss

@@ -0,0 +1,22 @@
+//
+// 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.
+//
+
+// set required feature flags for carbon
+@import '../../generated/feature-flags/feature-flags';
+
+// import the carbon import-once mechanism
+@import '@carbon/import-once/scss/import-once';
+
+// import carbon settings for referring to colors, spacing, theme, motion, etc
+@import 'carbon-components/scss/globals/scss/vars';
+@import '@carbon/type/scss/styles';
+
+// set up an alias variable to distinguish carbon prefix from package prefix
+$carbon-prefix: $prefix;
+
+// define variables and settings for the package
+$pkg-prefix: 'c4p' !default;

package/scss/index-full-carbon.scss

@@ -0,0 +1,11 @@
+//
+// 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 './components/index';
+@import 'carbon-components/scss/globals/scss/styles';

package/scss/index-without-carbon-released-only.scss

@@ -0,0 +1,13 @@
+//
+// 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/imported-carbon-modules';
+$imported-modules: $imported-carbon-modules;
+
+@import './global/styles/project-settings';
+
+@import './components/index-released-only';

package/scss/index-without-carbon.scss

@@ -0,0 +1,13 @@
+//
+// 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/imported-carbon-modules';
+$imported-modules: $imported-carbon-modules;
+
+@import './global/styles/project-settings';
+
+@import './components/index';

package/scss/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.
+//
+
+@import './global/styles/project-settings';
+
+@import './components/index';