@carbon/ibm-products 2.16.0 → 2.17.0-alpha.8

package/lib/components/Datagrid/Datagrid.docs-page.js

@@ -116,7 +116,7 @@ var DocsPage = exports.DocsPage = function DocsPage() {
       title: 'Selecting rows',
       description: "When building a Datagrid that requires selectable rows, use the `useSelectRows` hook.\n- Include `useSelectRows` hook\n- Add `onRowSelect` to the `useDatagrid` hook, this is a callback function called when on a row's selection checkbox onChange, and sends back the row object and the event\n        ",
       source: {
-        code: "\nconst [data] = useState(makeData(10));\nconst columns = React.useMemo(() => getColumns(data), []);\nconst datagridState = useDatagrid(\n  {\n    columns,\n    data,\n    onRowSelect: (row, event) => console.log(row, event),\n  },\n  useSelectRows\n);\n\nreturn <Datagrid datagridState={datagridState} />;\n          "
+        code: "\nconst [data] = useState(makeData(10));\nconst columns = React.useMemo(() => getColumns(data), []);\nconst datagridState = useDatagrid(\n  {\n    columns,\n    data,\n    onRowSelect: (row, event) => console.log(row, event),\n    batchActionMenuButtonLabel: 'More',\n  },\n  useSelectRows\n);\n\nreturn <Datagrid datagridState={datagridState} />;\n          "
       }
     }, {
       description: "The select all checkbox can be optionally hidden by settings the `hideSelectAll` property to `true` in the `useDatagrid` hook.",

package/lib/components/Datagrid/Datagrid.stories/StickyActionsColumnStory.js

@@ -45,7 +45,7 @@
 
 //     ## Sample usage:
 //     1. include \`useActionsColumn\` hook
-//     2. add \`isAction = true\` to the column object in which you which to add the overflow menu actions
+//     2. add \`isAction = true\` to the column object in which you wish to add the overflow menu actions
 //     3. add \`rowActions = []\` array to the props
 //       - \`rowActions[].id\` for callback to identify the action is called
 //       - \`rowActions[].onClick(actionId: string, row: Row, event: ClickEvent)\` callback on menuitem clicked. [Row properties](https://react-table.tanstack.com/docs/api/useTable#row-properties)

package/lib/components/Datagrid/useActionsColumn.js

@@ -1,7 +1,6 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -9,7 +8,7 @@ exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react2 = require("@carbon/react");
 var _settings = require("../../settings");
@@ -21,15 +20,10 @@ var _excluded = ["align", "id", "itemText", "onClick", "icon", "shouldHideMenuIt
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
 var useActionsColumn = function useActionsColumn(hooks) {
-  (0, _react.useEffect)(function () {
-    _settings.pkg.checkReportFeatureEnabled('Datagrid.useActionsColumn');
-  }, []);
   var useAttachActionsOnInstance = function useAttachActionsOnInstance(instance) {
     var rowActions = instance.rowActions,
       isFetching = instance.isFetching,

package/lib/components/Datagrid/useFlexResize.js

@@ -6,29 +6,39 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-/*
- * Licensed Materials - Property of IBM
- * 5724-Q36
- * (c) Copyright IBM Corp. 2020
- * US Government Users Restricted Rights - Use, duplication or disclosure
- * restricted by GSA ADP Schedule Contract with IBM Corp.
+/**
+ * Copyright IBM Corp. 2020, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
  */
+
 var useFlexResize = function useFlexResize(hooks) {
-  var spacerColumn = {
+  var spacer = {
     id: 'spacer',
     width: 0,
     disableSortBy: true,
     disableResizing: true
   };
   hooks.visibleColumns.push(function (columns) {
-    return [].concat((0, _toConsumableArray2.default)(columns), [spacerColumn]);
+    // always move actions and spacer to the end
+    var actionsIdx = columns.findIndex(function (col) {
+      return col.isAction;
+    });
+    if (actionsIdx === -1) {
+      return [].concat((0, _toConsumableArray2.default)(columns), [spacer]);
+    }
+    var cols = (0, _toConsumableArray2.default)(columns);
+    var actions = cols.splice(actionsIdx, 1)[0];
+    cols.splice(columns.length, 0, spacer, actions);
+    return cols;
   });
   var changeProps = function changeProps(props, data) {
     var column = data.column;
     if (!column && data.cell) {
       column = data.cell.column;
     }
-    if (column.id === spacerColumn.id) {
+    if (column.id === spacer.id) {
       return [props, {
         style: {
           flex: '1 1 0'

package/lib/components/Datagrid/useInfiniteScroll.js

@@ -9,7 +9,6 @@ var _react = require("react");
 var _debounce = _interopRequireDefault(require("lodash/debounce"));
 var _useParentDimensions = _interopRequireDefault(require("./useParentDimensions"));
 var _useResizeTable = _interopRequireDefault(require("./useResizeTable"));
-var _settings = require("../../settings");
 /**
  * Copyright IBM Corp. 2020, 2023
  *
@@ -20,9 +19,6 @@ var _settings = require("../../settings");
 var useInfiniteScroll = function useInfiniteScroll(hooks) {
   (0, _useParentDimensions.default)(hooks);
   (0, _useResizeTable.default)(hooks);
-  (0, _react.useEffect)(function () {
-    _settings.pkg.checkReportFeatureEnabled('Datagrid.useInfiniteScroll');
-  }, []);
   var useInstance = function useInstance(instance) {
     var isFetching = instance.isFetching,
       tableHeight = instance.tableHeight,

package/lib/global/js/package-settings.js

@@ -30,6 +30,7 @@ var defaults = {
     CreateTearsheet: true,
     CreateTearsheetStep: true,
     CreateTearsheetDivider: true,
+    Datagrid: true,
     EditInPlace: true,
     EmptyState: true,
     ErrorEmptyState: true,
@@ -68,7 +69,6 @@ var defaults = {
     EditSidePanel: false,
     CancelableTextEdit: false,
     DataSpreadsheet: false,
-    Datagrid: false,
     EditTearsheet: false,
     EditTearsheetForm: false,
     EditTearsheetNarrow: false,
@@ -83,12 +83,10 @@ var defaults = {
   // feature level flags
   feature: {
     'default-portal-target-body': true,
-    'Datagrid.useInfiniteScroll': false,
     'Datagrid.useInlineEdit': false,
     'Datagrid.useEditableCell': false,
     'Datagrid.useExpandedRow': false,
     'Datagrid.useNestedRows': false,
-    'Datagrid.useActionsColumn': false,
     'Datagrid.useFiltering': false,
     'Datagrid.useCustomizeColumns': false,
     'ExampleComponent.secondaryIcon': false,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "2.16.0",
+  "version": "2.17.0-alpha.8+db5d0bf1",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -37,12 +37,10 @@
     "access": "public"
   },
   "scripts": {
-    "build": "run-s clean build-first build-all build-css-update-maps",
+    "build": "run-s clean build-all",
     "build-all": "run-p 'build:*'",
-    "build-first": "copyfiles -e 'src/config-dev.scss' 'src/**/*.scss' scss -u 1",
-    "build:css-dev": "sass --style=expanded --load-path node_modules --load-path ../../node_modules scss:css",
-    "build:css-min": "sass --style=compressed --load-path node_modules --load-path ../../node_modules scss/index.scss:css/index.min.css scss/index-full-carbon.scss:css/index-full-carbon.min.css scss/index-without-carbon.scss:css/index-without-carbon.min.css scss/index-without-carbon-released-only.scss:css/index-without-carbon-released-only.min.css",
-    "build-css-update-maps": "node ../../scripts/updateSourceMaps.js",
+    "build:css": "copyfiles '../ibm-products-styles/css/**/*.*' ./ -u 2",
+    "build:scss": "copyfiles '../ibm-products-styles/scss/**/*.*' ./ -u 2",
     "build:js-esm": "cross-env BABEL_ENV=esm yarn build:js:modules -d es",
     "build:js-cjs": "cross-env BABEL_ENV=cjs yarn build:js:modules -d lib",
     "build:js:modules": "babel src --ignore '**/__tests__','**/*.test.js','**/*.stories.js','src/utils/**/*'",
@@ -76,6 +74,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.22.10",
+    "@carbon/ibm-products-styles": "^2.15.1",
     "@carbon/telemetry": "^0.1.0",
     "@dnd-kit/core": "^6.0.8",
     "@dnd-kit/sortable": "^7.0.2",
@@ -96,5 +95,5 @@
     "react": "^16.8.6 || ^17.0.1 || ^18.2.0",
     "react-dom": "^16.8.6 || ^17.0.1 || ^18.2.0"
   },
-  "gitHead": "ed97e8fd254f759b49c99165ded03c0105389b99"
+  "gitHead": "db5d0bf119aba0a96d0ded89ac54647adfba2686"
 }

package/scss/components/InlineTip/_inline-tip.scss

@@ -6,12 +6,12 @@
 //
 
 /**
- * The InlineTip specifically is theme-agnostic, and so we have to 
- * use color tokens to keep the colors static instead of theme tokens 
+ * The InlineTip specifically is theme-agnostic, and so we have to
+ * use color tokens to keep the colors static instead of theme tokens
  * that will change depending on the selected theme.
- * 
+ *
  * We are triggering a *large* amount of linting errors.
- * So, we're using the following "disable" rules for the entire file 
+ * So, we're using the following "disable" rules for the entire file
  * instead of many individual rules.
  */
 

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

@@ -17,6 +17,7 @@
 @use './CreateSidePanel/index-with-carbon' as *;
 @use './CreateTearsheetNarrow/index-with-carbon' as *;
 @use './CreateTearsheet/index-with-carbon' as *;
+@use './Datagrid/index-with-carbon' as *;
 @use './EditInPlace/index-with-carbon' as *;
 @use './EmptyStates/index-with-carbon' as *;
 @use './ExportModal/index-with-carbon' as *;

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

@@ -17,6 +17,7 @@
 @use './CreateSidePanel';
 @use './CreateTearsheetNarrow';
 @use './CreateTearsheet';
+@use './Datagrid';
 @use './EditInPlace';
 @use './EmptyStates';
 @use './ExportModal';

package/scss/config-dev.scss

@@ -0,0 +1,3 @@
+@forward './global/styles/project-settings' with (
+  $pkg-prefix: 'dev-prefix--c4p'
+);

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

@@ -1,35 +0,0 @@
-//
-// 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.
-//
-
-@use 'ALIAS_STORY_STYLE_CONFIG' as c4p-settings;
-@use '@carbon/styles/scss/theme' as *;
-@use '@carbon/styles/scss/spacing' as *;
-
-$block-class: #{c4p-settings.$pkg-prefix}--apikey-modal;
-
-.#{$block-class} .#{c4p-settings.$carbon-prefix}--radio-button-wrapper {
-  margin-bottom: $spacing-02;
-}
-
-.#{$block-class}__permissions.#{c4p-settings.$carbon-prefix}--fieldset {
-  margin-top: $spacing-05;
-  margin-bottom: 0;
-}
-
-.#{$block-class}__resource-toggle.#{c4p-settings.$carbon-prefix}--fieldset {
-  margin-top: 0;
-  margin-bottom: $spacing-05;
-}
-
-.#{$block-class}__resource-name.#{c4p-settings.$carbon-prefix}--fieldset {
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
-.#{$block-class}__button-loading.#{c4p-settings.$carbon-prefix}--btn--primary {
-  background: $link-secondary;
-}

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

@@ -1,29 +0,0 @@
-//
-// 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.
-//
-
-@use '@carbon/styles/scss/theme' as *;
-@use '@carbon/styles/scss/spacing' as *;
-@use '@carbon/styles/scss/type';
-@use '@carbon/styles/scss/components/ui-shell' as *;
-@use 'ALIAS_STORY_STYLE_CONFIG' as c4p-settings;
-
-// The block part of our conventional BEM class names (blockClass__E--M).
-$block-class: #{c4p-settings.$pkg-prefix}--about-modal;
-
-.#{$block-class}__stories--tech-logo {
-  width: $spacing-06;
-  height: $spacing-06;
-  margin-right: $spacing-03;
-  object-fit: contain;
-}
-
-.#{$block-class}__footer-label {
-  @include type.type-style('label-01');
-
-  margin-bottom: $spacing-02;
-  color: $text-secondary;
-}

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

@@ -1,8 +0,0 @@
-//
-// Copyright IBM Corp. 2022, 2022
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-@use '../../global/styles/display-box' as *;

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

@@ -1,36 +0,0 @@
-//
-// 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.
-//
-
-@use 'ALIAS_STORY_STYLE_CONFIG' as c4p-settings;
-@use '../../global/styles/display-box' as *;
-
-$block-class: #{c4p-settings.$pkg-prefix}--action-set;
-
-.#{$block-class}__story-container {
-  width: 96vw;
-  min-height: 3rem;
-}
-
-.#{$block-class}__story-container--xlg {
-  width: 75vw;
-}
-
-.#{$block-class}__story-container--lg {
-  width: 60vw;
-}
-
-.#{$block-class}__story-container--md {
-  width: 45vw;
-}
-
-.#{$block-class}__story-container--sm {
-  width: 30vw;
-}
-
-.#{$block-class}__story-container--xs {
-  width: 25vw;
-}

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

@@ -1,6 +0,0 @@
-//
-// Copyright IBM Corp. 2022, 2022
-//
-// 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/BreadcrumbWithOverflow/_storybook-styles.scss

@@ -1,8 +0,0 @@
-//
-// Copyright IBM Corp. 2022, 2022
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-@use '../../global/styles/display-box' as *;

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

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

@@ -1,8 +0,0 @@
-//
-// Copyright IBM Corp. 2022, 2022
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-@use '../../global/styles/display-box' as *;

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

@@ -1,12 +0,0 @@
-//
-// 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/_storybook-styles.scss

@@ -1,34 +0,0 @@
-//
-// 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.
-//
-
-@use '@carbon/styles/scss/theme' as *;
-@use '@carbon/styles/scss/spacing' as *;
-
-#storybook-docs .docs-story {
-  /* stylelint-disable-next-line carbon/layout-token-use */
-  padding: 30px 0;
-}
-
-.box {
-  display: inline-block;
-  width: 400px;
-  height: 300px;
-  margin: $spacing-04;
-  background-color: $layer-selected-inverse;
-  color: $text-on-color;
-}
-
-.grid-box {
-  display: flex;
-  width: 100%;
-  height: 300px;
-  align-items: center;
-  justify-content: center;
-  margin-bottom: $spacing-03;
-  background-color: $layer-selected-inverse;
-  color: $text-on-color;
-}

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

@@ -1,13 +0,0 @@
-//
-// Copyright IBM Corp. 2023, 2023
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-@use '@carbon/styles/scss/spacing' as *;
-
-.checklist-stories__viewport {
-  min-width: calc(2 * $spacing-13); // 320px
-  max-width: calc(2 * $spacing-13);
-}

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

@@ -1,67 +0,0 @@
-//
-// Copyright IBM Corp. 2021, 2022
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-@use '@carbon/styles/scss/theme' as *;
-@use '@carbon/styles/scss/spacing' as *;
-@use '@carbon/styles/scss/type';
-@use '@carbon/styles/scss/components/ui-shell' as *;
-@use 'ALIAS_STORY_STYLE_CONFIG' as c4p-settings;
-
-$story-class: 'create-full-page-stories';
-$block-class: #{c4p-settings.$pkg-prefix}--create-full-page;
-// cspell:disable-next-line
-.sbdocs .#{$story-class}__viewport {
-  height: 100vh;
-  background-color: $background;
-  box-shadow: 0 0 4px 1px $border-subtle-01;
-  color: $text-primary;
-  overflow-y: auto;
-}
-
-.#{$story-class}__step-fieldset--no-label
-  .#{c4p-settings.$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.#{c4p-settings.$carbon-prefix}--label {
-  position: absolute;
-  overflow: hidden;
-  width: 1px;
-  height: 1px;
-  clip: rect(0 0 0 0);
-  clip-path: inset(50%);
-  white-space: nowrap;
-}
-
-.#{c4p-settings.$carbon-prefix}--form-item {
-  margin-bottom: $spacing-05;
-}
-
-.#{$story-class}__error--text {
-  @include type.type-style('label-01');
-
-  margin-bottom: $spacing-05;
-}
-
-.#{$block-class}
-  .#{$block-class}__step-description.#{$story-class}__step-description {
-  padding-left: 0;
-}

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

@@ -1,54 +0,0 @@
-//
-// 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.
-//
-
-@use '@carbon/react/scss/components/number-input';
-@use '@carbon/react/scss/components/text-area';
-@use '@carbon/react/scss/components/text-input';
-@use '@carbon/react/scss/components/dropdown';
-@use '@carbon/react/scss/components/date-picker';
-@use '@carbon/react/scss/components/radio-button';
-@use '@carbon/react/scss/components/progress-indicator';
-@use '@carbon/react/scss/components/tooltip';
-@use '@carbon/react/scss/components/modal';
-@use '@carbon/styles/scss/spacing';
-@use 'ALIAS_STORY_STYLE_CONFIG' as c4p-settings;
-
-.#{c4p-settings.$carbon-prefix}--number {
-  min-width: 100%;
-}
-
-.#{c4p-settings.$carbon-prefix}--number__control-btn::before {
-  background-color: transparent;
-}
-
-.#{c4p-settings.$carbon-prefix}--number__control-btn::after {
-  background-color: transparent;
-}
-
-.#{c4p-settings.$carbon-prefix}--date-picker {
-  min-width: 100%;
-}
-
-.#{c4p-settings.$carbon-prefix}--date-picker-container {
-  min-width: 100%;
-}
-
-.#{c4p-settings.$carbon-prefix}--date-picker.#{c4p-settings.$carbon-prefix}--date-picker--single
-  .#{c4p-settings.$carbon-prefix}--date-picker__input {
-  min-width: 100%;
-}
-
-.#{c4p-settings.$carbon-prefix}--list-box__menu-icon {
-  /* stylelint-disable-next-line carbon/layout-token-use */
-  top: spacing.$spacing-03;
-}
-
-.example-wrapper {
-  display: grid;
-  grid-gap: spacing.$spacing-05;
-  grid-template-columns: 1fr 1fr;
-}

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

@@ -1,32 +0,0 @@
-//
-// 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.
-//
-
-@use 'ALIAS_STORY_STYLE_CONFIG' as c4p-settings;
-@use '@carbon/styles/scss/theme' as *;
-@use '@carbon/styles/scss/spacing';
-@use '../../global/decorators/side-panel-decorator' as *;
-
-$block-class: #{c4p-settings.$pkg-prefix}--create-side-panel;
-$story-prefix: create-side-panel-stories__;
-
-.#{$story-prefix}example-container {
-  display: grid;
-  align-items: flex-end;
-  grid-gap: spacing.$spacing-04;
-  grid-template-columns: 1fr 1fr;
-}
-
-.#{$story-prefix}example-form-group .#{c4p-settings.$carbon-prefix}--label {
-  margin-bottom: 0;
-}
-
-.#{$block-class} .#{c4p-settings.$carbon-prefix}--number__control-btn::before,
-.#{$block-class} .#{c4p-settings.$carbon-prefix}--number__control-btn::after {
-  background-color: $field-02;
-}
-
-@include side-panel-decorator($story-prefix);

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

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