@carbon/ibm-products-web-components 0.0.1-canary.3564

package/package.json

@@ -0,0 +1,96 @@
+{
+  "name": "@carbon/ibm-products-web-components",
+  "description": "Carbon for IBM Products Web Components",
+  "version": "0.0.1-canary.3564+17bbbfbcf",
+  "license": "Apache-2.0",
+  "main": "es/index.js",
+  "module": "es/index.js",
+  "type": "module",
+  "bugs": "https://github.com/carbon-design-system/ibm-products/issues",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/carbon-design-system/ibm-products.git",
+    "directory": "packages/ibm-products-web-components"
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "exports": {
+    "./es/components/*": {
+      "node": "./lib/components/*",
+      "default": "./es/components/*"
+    },
+    "./es/globals/*": {
+      "node": "./lib/globals/*",
+      "default": "./es/globals/*"
+    },
+    "./es/*": "./es/*",
+    "./lib/*": "./lib/*",
+    "./custom-elements.json": "./custom-elements.json",
+    "./package.json": "./package.json"
+  },
+  "keywords": [
+    "carbon",
+    "carbon design system",
+    "carbon community",
+    "carbon for ibm products",
+    "carbon for ibm products web components",
+    "web components"
+  ],
+  "scripts": {
+    "build": "yarn clean && node tasks/build.js && yarn wca",
+    "build:storybook": "yarn wca && storybook build",
+    "clean": "rimraf es lib scss dist storybook-static",
+    "preview": "vite preview",
+    "storybook": "storybook dev -p 3000",
+    "test": "vitest run",
+    "test:ui": "vitest --ui",
+    "wca": "web-component-analyzer analyze src --outFile custom-elements.json"
+  },
+  "dependencies": {
+    "@carbon/ibm-products-styles": "^2.47.0-rc.0",
+    "@carbon/styles": "1.63.1",
+    "@carbon/web-components": "2.13.0",
+    "lit": "^3.1.0"
+  },
+  "devDependencies": {
+    "@carbon/icons": "^11.50.0",
+    "@carbon/motion": "^11.23.0",
+    "@mordech/vite-lit-loader": "^0.35.0",
+    "@rollup/plugin-alias": "^5.1.1",
+    "@rollup/plugin-commonjs": "^28.0.0",
+    "@rollup/plugin-node-resolve": "^15.3.0",
+    "@rollup/plugin-typescript": "^12.1.0",
+    "@storybook/addon-essentials": "^8.2.8",
+    "@storybook/addon-links": "^8.2.8",
+    "@storybook/addon-storysource": "^8.2.8",
+    "@storybook/blocks": "^8.2.8",
+    "@storybook/manager-api": "^8.3.4",
+    "@storybook/theming": "^8.3.4",
+    "@storybook/web-components": "^8.2.8",
+    "@storybook/web-components-vite": "^8.2.8",
+    "@types/jest": "^29.5.13",
+    "@vitest/browser": "latest",
+    "@vitest/ui": "latest",
+    "autoprefixer": "^10.4.20",
+    "cssnano": "^7.0.6",
+    "eslint": "^9.11.1",
+    "eslint-config-carbon": "^3.17.0",
+    "globby": "^14.0.2",
+    "happy-dom": "^15.7.4",
+    "postcss": "^8.4.47",
+    "remark-gfm": "^4.0.0",
+    "rimraf": "^5.0.5",
+    "rollup": "^3.29.5",
+    "rollup-plugin-copy": "^3.5.0",
+    "sass": "^1.77.2",
+    "storybook": "^8.2.8",
+    "storybook-addon-accessibility-checker": "^3.1.61-rc.3",
+    "typescript": "^5.5.3",
+    "vite": "^5.4.1",
+    "vitest": "^2.1.2",
+    "web-component-analyzer": "2.0.0"
+  },
+  "gitHead": "17bbbfbcf7be1c462a301972ac441a69b61faf1a"
+}

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

@@ -0,0 +1,302 @@
+/*
+* Copyright IBM Corp. 2023, 2024
+*
+* This source code is licensed under the Apache-2.0 license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+
+$css--plex: true !default;
+
+/* Other Carbon settings. */
+@use '@carbon/styles/scss/reset';
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/motion' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/utilities/ai-gradient' as *;
+@use '@carbon/styles/scss/utilities/convert' as *;
+@use 'sass:map';
+
+$prefix: 'c4p';
+$carbon-prefix: 'cds';
+@use '@carbon/ibm-products-styles/scss/components/ActionSet/index' as *;
+@use '@carbon/ibm-products-styles/scss/components/SidePanel/index' as *;
+@use '@carbon/ibm-products-styles/scss/components/SidePanel/side-panel-variables'
+  as spv;
+
+$block-class: #{$prefix}--side-panel;
+$block-class-action-set: #{$prefix}--action-set;
+
+:host(#{$prefix}-side-panel) {
+  /* Replaces use of Framer for slide in / out animation */
+  --#{$block-class}--displaced: 100%;
+
+  * {
+    /* not sure why things are coming out as content-box */
+    box-sizing: border-box;
+  }
+
+  .#{$block-class} {
+    @extend .#{$block-class};
+
+    /* for actions container query - note this changes the size calculation */
+    container-name: side-panel;
+    container-type: inline-size;
+
+    &[placement='left'] {
+      --#{$block-class}--displaced: -100%;
+    }
+
+    &[opening] {
+      transform: translateX(var(--#{$block-class}--displaced));
+    }
+
+    &[open] {
+      transform: translateX(0);
+      transition: all $duration-moderate-02 motion(standard, productive);
+    }
+
+    @media screen and (prefers-reduced-motion: reduce) {
+      &[open] {
+        transition: none;
+      }
+    }
+
+    &[closing] {
+      transform: translateX(var(--#{$block-class}--displaced));
+      transition: all $duration-moderate-01 motion(exit, productive);
+    }
+
+    @media screen and (prefers-reduced-motion: reduce) {
+      &[closing] {
+        transition: none;
+      }
+    }
+
+    &[placement='right'] {
+      @extend .#{$block-class}--right-placement;
+
+      /* remove if https://github.com/carbon-design-system/ibm-products/pull/3983 merged */
+      border-inline-end: 1px solid $border-subtle-02;
+      inset-inline-end: 0;
+    }
+
+    /* stylelint-disable-next-line no-duplicate-selectors -- disabled to keep close to 'right' setting */
+    &[placement='left'] {
+      @extend .#{$block-class}--left-placement;
+
+      /* remove if https://github.com/carbon-design-system/ibm-products/pull/3983 merged */
+      border-inline-end: 1px solid $border-subtle-02;
+      inset-inline-start: 0;
+    }
+
+    @each $size, $size_value in spv.$side-panel-sizes {
+      &[size='#{$size}'] {
+        @extend .#{$block-class}--#{$size};
+      }
+    }
+
+    &[condensed-actions] {
+      @extend .#{$block-class}--condensed-actions;
+    }
+  }
+
+  #{$prefix}-layer {
+    display: contents;
+  }
+
+  .#{$block-class}__overlay {
+    &[opening] {
+      opacity: 0;
+    }
+
+    @media screen and (prefers-reduced-motion: reduce) {
+      &[open] {
+        opacity: 1;
+        transition: none;
+      }
+    }
+
+    &[open] {
+      opacity: 1;
+      transition: all $duration-moderate-02 motion(standard, productive);
+    }
+    @media screen and (prefers-reduced-motion: reduce) {
+      &[closing] {
+        opacity: 0;
+        transition: none;
+      }
+    }
+
+    &[closing] {
+      opacity: 0;
+      transition: all $duration-moderate-01 motion(exit, productive);
+    }
+  }
+
+  .#{$block-class}__header {
+    &::before {
+      z-index: 99; /* must be higher than action toolbar */
+    }
+
+    &[detail-step] {
+      @extend .#{$block-class}__header--on-detail-step;
+    }
+
+    &[no-title-animation] {
+      @extend .#{$block-class}__header--no-title-animation;
+      // inset-block-start: 0;
+    }
+
+    &[reduced-motion] {
+      @extend .#{$block-class}__header--reduced-motion;
+    }
+
+    &[has-action-toolbar] {
+      margin-block-end: $spacing-03;
+      padding-block-end: 0;
+    }
+  }
+
+  .#{$block-class} .#{$block-class}__header[has-action-toolbar]::before {
+    content: initial; /* remove border below */
+  }
+
+  .#{$block-class}__subtitle-text {
+    &[hidden] {
+      @extend .#{$carbon-prefix}--visually-hidden !optional;
+    }
+  }
+
+  .#{$block-class}__action-toolbar {
+    margin-block-end: 0;
+    padding-inline-start: 0;
+
+    &[hidden] {
+      @extend .#{$carbon-prefix}--visually-hidden !optional;
+    }
+  }
+
+  .#{$block-class} .#{$block-class}__action-toolbar[hidden] {
+    @extend .#{$carbon-prefix}--visually-hidden !optional;
+  }
+
+  .#{$block-class}[has-slug] {
+    @extend .#{$block-class}--has-slug;
+  }
+
+  [scrolls] {
+    @extend .#{$block-class}--scrolls;
+  }
+
+  .#{$block-class}__body-content {
+    @extend .#{$block-class}__body-content;
+  }
+
+  @mixin actions-placement() {
+    --flex-direction: row;
+    /* non carbon for IBM Products adjustment */
+    flex-direction: var(--flex-direction);
+
+    ::slotted(#{$prefix}-button) {
+      flex: 0 1 25%;
+      max-inline-size: to-rem(232px);
+    }
+
+    ::slotted(#{$prefix}-button[kind='ghost']) {
+      flex: 1 1 25%;
+      max-inline-size: none;
+    }
+
+    ::slotted(#{$prefix}-button[hidden]) {
+      @extend .#{$carbon-prefix}--visually-hidden !optional;
+
+      display: none;
+    }
+
+    // -1 in @container query is for 1px left border
+    @container (width <= #{map.get(spv.$side-panel-sizes, lg)}) {
+      &:not([actions-multiple='triple']) ::slotted(#{$carbon-prefix}-button) {
+        // double and single on lg use 50%
+        flex: 0 1 50%;
+        max-inline-size: none;
+      }
+    }
+
+    // -1 in @container query is for 1px left border
+    @container (width <= #{map.get(spv.$side-panel-sizes, md)}) {
+      // md is 50% for two and 100% for one
+      // column for triple
+      &[actions-multiple] ::slotted(#{$carbon-prefix}-button) {
+        flex: 0 0 100%;
+        max-inline-size: none;
+      }
+
+      &[actions-multiple='double'] ::slotted(#{$carbon-prefix}-button) {
+        flex: 0 1 50%;
+        max-inline-size: none;
+      }
+
+      &[actions-multiple='triple'] {
+        --flex-direction: column;
+
+        ::slotted(#{$carbon-prefix}-button) {
+          flex: initial;
+          inline-size: 100%;
+          max-inline-size: none;
+        }
+      }
+    }
+
+    // -1 in @container query is for 1px left border
+    @container (width <= #{map.get(spv.$side-panel-sizes, sm)}) {
+      --flex-direction: column;
+
+      ::slotted(#{$carbon-prefix}-button) {
+        flex: initial;
+        inline-size: 100%;
+        max-inline-size: none;
+      }
+    }
+  }
+
+  .#{$block-class}__actions-container {
+    @extend .#{$block-class-action-set};
+    @include actions-placement();
+
+    display: flex;
+    inline-size: 100%;
+
+    ::slotted(#{$carbon-prefix}-button) {
+      @extend .#{$block-class-action-set}__action-button;
+    }
+
+    &[hidden] {
+      @extend .#{$carbon-prefix}--visually-hidden !optional;
+
+      display: none;
+    }
+
+    $multiples: 'single' 'double' 'triple';
+    @each $m in $multiples {
+      &[actions-multiple='#{$m}'] {
+        @extend .#{$carbon-prefix}--action-set--row-#{$m} !optional;
+      }
+    }
+
+    $sizes: 'xs' 'sm';
+    @each $s in $sizes {
+      &[size='#{$s}'] {
+        @extend .#{$block-class-action-set}--#{$s} !optional;
+      }
+    }
+  }
+
+  .sentinel {
+    @extend .#{$carbon-prefix}--visually-hidden !optional;
+  }
+
+  .#{$block-class}__close-button {
+    width: 2rem;
+  }
+}

package/scss/components/side-panel/story-styles.scss

@@ -0,0 +1,46 @@
+/*
+* Copyright IBM Corp. 2023, 2024
+*
+* 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 *;
+
+$story-prefix: 'side-panel-stories__';
+
+.#{$story-prefix}body-content {
+  display: flex;
+  flex-direction: column;
+  padding: 1rem;
+  gap: 1rem;
+}
+
+.#{$story-prefix}text-inputs {
+  display: flex;
+  gap: 1rem;
+
+  > * {
+    flex-basis: 50%;
+  }
+}
+
+.#{$story-prefix}story-container {
+  position: fixed;
+  display: grid;
+  block-size: 100vh;
+  grid-template-rows: 3rem 1fr;
+  inline-size: 100vw;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+}
+
+.#{$story-prefix}story-header {
+  background: $background-inverse;
+}
+
+.#{$story-prefix}story-content {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

package/src/components/side-panel/defs.ts

@@ -0,0 +1,46 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2023, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * Modal size.
+ */
+export enum SIDE_PANEL_SIZE {
+  /**
+   * Extra small size.
+   */
+  EXTRA_SMALL = 'xs',
+
+  /**
+   * Small size.
+   */
+  SMALL = 'sm',
+
+  /**
+   * Medium size.
+   */
+  MEDIUM = 'md',
+
+  /**
+   * Large size.
+   */
+  LARGE = 'lg',
+
+  /**
+   * 2X-Large size.
+   */
+  EXTRA_EXTRA_LARGE = '2xl',
+}
+
+export enum SIDE_PANEL_PLACEMENT {
+  /** right / default */
+  RIGHT = 'right',
+
+  /** left  */
+  LEFT = 'left',
+}

package/src/components/side-panel/index.ts

@@ -0,0 +1,10 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2023, 2024
+ *
+ * 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 './side-panel';

package/src/components/side-panel/side-panel.mdx

@@ -0,0 +1,106 @@
+import { ArgTypes, Markdown, Meta } from '@storybook/blocks';
+import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
+import * as SidePanelStories from './side-panel.stories';
+
+<Meta of={SidePanelStories} />
+
+# SidePanel
+
+> 💡 Check our
+> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon/tree/main/packages/web-components/examples/components/side-panel)
+> example implementation.
+
+[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon/tree/main/packages/web-components/examples/components/side-panel)
+
+Side panels keep users in-context of a page while performing tasks like
+navigating, editing, viewing details, or configuring something new.
+
+## Getting started
+
+Here's a quick example to get you started.
+
+### JS (via import)
+
+```javascript
+import '@carbon/web-components/es/components/side-panel/index.js';
+// The following are used for slotted fields
+import '@carbon/web-components/es/components/text-input/index.js';
+import '@carbon/web-components/es/components/textarea/index.js';
+import '@carbon/web-components/es/components/button/index.js';
+```
+
+<Markdown>{`${cdnJs({ components: ['side-panel'] })}`}</Markdown>
+<Markdown>{`${cdnCss()}`}</Markdown>
+
+### HTML
+
+```html
+<c4p-side-panel
+  include-overlay
+  open
+  label-text="An optional label"
+  size="md"
+  title="A title, can be omitted">
+  <!-- Content -->
+  <h5>Side panel content</h5>
+  <div class="${storyPrefix}text-inputs">
+    <cds-text-input
+      label="Input A"
+      id="side-panel-story-text-input-a"></cds-text-input>
+    <cds-text-input
+      label="Input B"
+      id="side-panel-story-text-input-b"></cds-text-input>
+  </div>
+  <div class="${storyPrefix}text-inputs">
+    <cds-text-input
+      label="Input C"
+      id="side-panel-story-text-input-c"></cds-text-input>
+    <cds-text-input
+      label="Input D"
+      id="side-panel-story-text-input-d"></cds-text-input>
+  </div>
+  <div class="${storyPrefix}textarea-container">
+    <cds-textarea label="Notes" value="This is a text area"></cds-textarea>
+    <cds-textarea label="Notes" value="This is a text area"></cds-textarea>
+    <cds-textarea label="Notes" value="This is a text area"></cds-textarea>
+  </div>
+
+  <!-- subtitle optional -->
+  <div slot="subtitle">
+    Subtitle text which can provide more detail on the content being displayed.
+  </div>
+
+  <!-- Action toolbar optional -->
+  <cds-button slot="action-toolbar">Copy</cds-button>
+  <cds-button
+    slot="action-toolbar"
+    aria-label="Settings"
+    has-icon-only="true"
+    kind="${BUTTON_KIND.GHOST}"
+    size="sm"
+    tooltip-text="Settings">
+    ${Settings({ slot: 'icon' })}
+  </cds-button>
+  <cds-button
+    slot="action-toolbar"
+    aria-label="Delete"
+    has-icon-only="true"
+    kind="${BUTTON_KIND.GHOST}"
+    size="sm"
+    tooltip-text="Delete">
+    ${Trashcan({ slot: 'icon' })}
+  </cds-button>
+
+  <!-- Side panel actions optional -->
+  <cds-button slot="actions" kind="${BUTTON_KIND.GHOST}">Ghost</cds-button>
+  <cds-button slot="actions" kind="${BUTTON_KIND.PRIMARY}"></cds-button>
+</c4p-side-panel>
+```
+
+## `<c4p-side-panel>` attributes, properties and events
+
+Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.
+`<c4p-side-panel open>`) and `false` means not setting the attribute (e.g.
+`<c4p-side-panel>` without `open` attribute).
+
+<ArgTypes of="c4p-side-panel" />