@descope-ui/descope-collapsible-container 0.0.1

package/CHANGELOG.md

@@ -0,0 +1,14 @@
+# Changelog
+
+This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
+
+## 0.0.1 (2025-04-16)
+
+### Dependency Updates
+
+* `e2e-utils` updated to version `0.0.1`
+* `test-drivers` updated to version `0.0.1`
+* `@descope-ui/common` updated to version `0.0.10`
+* `@descope-ui/theme-globals` updated to version `0.0.10`
+* `@descope-ui/descope-text` updated to version `0.0.10`
+* `@descope-ui/descope-icon` updated to version `0.0.5`

package/e2e/descope-collapsible-container.spec.ts

@@ -0,0 +1,114 @@
+import { test, expect } from '@playwright/test';
+import { getStoryUrl, loopConfig, loopPresets } from 'e2e-utils';
+
+const componentAttributes = {
+  'st-background-color': ['red'],
+  isBackgroundImage: ['true', 'false'],
+  'icon-position': ['left', 'right'],
+  'fill-title': ['true', 'false'],
+  border: ['true', 'false'],
+  text: ['short text', 'long long long long long long long long long long long long long long text'],
+  defaultState: ['collapsed', 'expanded'],
+  shadow: ['', 'sm', 'md', 'lg', 'xl', '2xl'],
+  'border-radius': ['', 'sm', 'md', 'lg', 'xl', '2xl', '3xl'],
+  'st-host-width': ['100px'],
+  'text-variant': ['h1', 'h2', 'h3', 'subtitle1', 'subtitle2', 'body1', 'body2'],
+  'text-mode': ['none', 'primary', 'secondary', 'success', 'error'],
+  'vertical-padding': ['sm', 'md', 'lg'],
+  'horizontal-padding': ['sm', 'md', 'lg'],
+};
+
+const presets = {
+  'direction rtl': {
+    'text-direction': 'rtl',
+    text: 'test-',
+  },
+  'expanded with custom width': {
+    'st-host-width': '100px',
+    defaultState: 'expanded',
+    'st-background-color': 'red',
+  },
+  'expanded with border': {
+    defaultState: 'expanded',
+    border: 'true',
+  },
+  'not collapsed when not collapsible': {
+    defaultState: 'collapsed',
+    isCollapsible: 'false',
+  },
+  'text align right': {
+    'text-align': 'right',
+    text: 'long long long long long long long long long long long long text',
+    'st-host-width': '100px',
+  },
+  'text align center': {
+    'text-align': 'center',
+    text: 'long long long long long long long long long long long long text',
+    'st-host-width': '100px',
+  },
+  'text align left': {
+    'text-align': 'left',
+    text: 'long long long long long long long long long long long long text',
+    'st-host-width': '100px',
+  },
+  'expanded with shadow': {
+    defaultState: 'expanded',
+    shadow: 'sm',
+  },
+  'expanded with radius': {
+    defaultState: 'expanded',
+    'border-radius': 'lg',
+    border: 'true',
+  },
+  'expanded with vertical padding': {
+    defaultState: 'expanded',
+    'vertical-padding': 'sm',
+    border: 'true',
+  },
+  'expanded with horizontal padding': {
+    defaultState: 'expanded',
+    'horizontal-padding': 'sm',
+    border: 'true',
+  },
+  'expanded with text direction': {
+    defaultState: 'expanded',
+    'text-direction': 'rtl',
+    text: 'test-'
+  },
+  'expanded with gap': {
+    defaultState: 'expanded',
+    gap: '20px',
+  },
+};
+
+const storyName = 'descope-collapsible-container';
+const componentName = 'descope-collapsible-container';
+
+test.describe('theme', () => {
+  loopConfig(componentAttributes, (attr, value) => {
+    test.describe(`${attr}: ${value}`, () => {
+      test.beforeEach(async ({ page }) => {
+        await page.goto(getStoryUrl(storyName, {
+          'st-background-color': 'lightblue',
+          [attr]: value
+        }), { waitUntil: 'load' });
+      });
+      test('style', async ({ page }) => {
+        await page.waitForSelector(componentName);
+        const componentParent = page.locator('body');
+        expect(await componentParent.screenshot({ animations: 'disabled' })).toMatchSnapshot();
+      });
+    });
+  });
+
+  loopPresets(presets, (preset, name) => {
+    test(name, async ({ page }) => {
+      await page.goto(getStoryUrl(storyName, preset), { waitUntil: 'load' });
+      await page.waitForSelector(componentName);
+      const componentParent = page.locator('body');
+      expect(
+        await componentParent.screenshot({ animations: 'disabled' })
+      ).toMatchSnapshot();
+    });
+  });
+});

package/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@descope-ui/descope-collapsible-container",
+  "version": "0.0.1",
+  "exports": {
+    ".": {
+      "import": "./src/component/index.js"
+    },
+    "./theme": {
+      "import": "./src/theme.js"
+    },
+    "./class": {
+      "import": "./src/component/CollapsibleContainerClass.js"
+    }
+  },
+  "devDependencies": {
+    "@playwright/test": "1.38.1",
+    "e2e-utils": "0.0.1",
+    "test-drivers": "0.0.1"
+  },
+  "dependencies": {
+    "@descope-ui/common": "0.0.10",
+    "@descope-ui/theme-globals": "0.0.10",
+    "@descope-ui/descope-text": "0.0.10",
+    "@descope-ui/descope-icon": "0.0.5"
+  },
+  "publishConfig": {
+    "link-workspace-packages": false
+  },
+  "scripts": {
+    "test": "echo 'No tests defined' && exit 0",
+    "test:e2e": "echo 'No e2e tests defined' && exit 0"
+  }
+}

package/project.json

@@ -0,0 +1,17 @@
+{
+  "name": "@descope-ui/descope-collapsible-container",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "packages/web-components/components/descope-collapsible-container/src",
+  "projectType": "library",
+  "targets": {
+    "version": {
+      "executor": "@jscutlery/semver:version",
+      "options": {
+        "trackDeps": true,
+        "push": false,
+        "preset": "conventional"
+      }
+    }
+  },
+  "tags": []
+}

package/src/component/CollapsibleContainerClass.js

@@ -0,0 +1,219 @@
+import { createStyleMixin, draggableMixin, componentNameValidationMixin } from '@descope-ui/common/components-mixins';
+import { createBaseClass } from '@descope-ui/common/base-classes';
+import { compose } from '@descope-ui/common/utils';
+import {
+  forwardAttrs,
+  getComponentName,
+  injectStyle
+} from '@descope-ui/common/components-helpers';
+import chevronIcon from './chevron.svg';
+import { TextClass } from '@descope-ui/descope-text/class';
+
+export const componentName = getComponentName('collapsible-container');
+
+class RawCollapsibleContainer extends createBaseClass({ componentName, baseSelector: 'slot' }) {
+  static get observedAttributes() {
+    return ['collapsed', 'collapsible', 'text'];
+  }
+
+  constructor() {
+    super();
+
+    this.attachShadow({ mode: 'open' }).innerHTML = `
+    <div class="wrapper">
+      <descope-text st-host-direction="ltr">
+        <div class="header">
+          <descope-icon st-align-items="center" st-fill="currentcolor" src=${chevronIcon}></descope-icon>
+          <span></span>
+        </div>
+      </descope-text>
+      <div class="content">
+        <slot></slot>
+      </div>
+    </div>
+	`;
+
+    injectStyle(
+      `
+      div.content {
+        transition-property: max-height;
+        overflow: auto;
+        transition-property: max-height;
+        height: auto;
+			}
+			slot {
+				box-sizing: border-box;
+				width: 100%;
+				display: flex;
+			}
+      slot:focus-visible {
+        outline: none;
+      }
+			:host {
+				display: inline-block;
+			}
+      .header {
+          user-select: none;
+          display: flex;
+          align-items: baseline;
+      }
+      descope-icon {
+          transition-property: transform;
+          flex-shrink: 0;
+          height: var(${TextClass.cssVarList.textLineHeight});
+          min-height: 24px;
+      }
+      .rotate {
+          transform: rotate(-180deg);
+      }
+      descope-text {
+        width: 100%;
+        display: flex;
+      }
+      span {
+        align-self: center;
+        word-break: break-word;
+      }
+      span:empty {
+        display: none;
+      }
+      .wrapper {
+        overflow: hidden;
+        display: inline-flex;
+        width: 100%;
+        flex-direction: column;
+      }
+  `,
+      this
+    );
+
+    this.header = this.shadowRoot.querySelector('.header');
+    this.content = this.shadowRoot.querySelector('div.content');
+    this.icon = this.header.querySelector('descope-icon')
+    this.headerText = this.header.querySelector('span');
+    this.textComponent = this.shadowRoot.querySelector('descope-text');
+  }
+
+  get isCollapsible() {
+    return this.getAttribute('collapsible') === 'true'
+  }
+
+  calcContentHeight() {
+    return this.content.offsetHeight || this.content.scrollHeight;
+  }
+
+  get isCollapsed() {
+    return this.getAttribute('collapsed') === 'true';
+  }
+
+  toggle() {
+    this.setAttribute('collapsed', this.isCollapsed ? 'false' : 'true');
+  }
+
+  collapse(animated = false) {
+    const final = () => {
+      this.content.style.maxHeight = '0px'
+    }
+    this.icon.classList.add('rotate');
+    if (!animated) return final();
+
+    this.content.style.maxHeight = this.calcContentHeight() + 'px';
+    setTimeout(final);
+  }
+
+  expand(animated = false) {
+    const final = () => {
+      this.content.style.maxHeight = '';
+    }
+    this.icon.classList.remove('rotate');
+    if (!animated) return final();
+
+    this.content.addEventListener('transitionend', final, { once: true });
+    this.content.style.maxHeight = this.calcContentHeight() + 'px';
+  }
+
+  #isComponentMounted = false;
+
+  init() {
+    super.init?.();
+    // we want to animate the collapse/expand only after the first time the component is connected
+    // so when setting a default value for the collapsed attribute, it will not animate
+    this.#isComponentMounted = true;
+
+    this.header.addEventListener('click', () => {
+      if (!this.isCollapsible) return;
+      this.toggle()
+    });
+    forwardAttrs(this, this.textComponent, {
+      includeAttrs: ['text-align', 'text-variant', 'text-mode'],
+      mapAttrs: { 'text-mode': 'mode', 'text-variant': 'variant' }
+    });
+  }
+
+  updateHeaderText() {
+    const text = this.getAttribute('text') || '';
+    this.headerText.innerText = text;
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (name === 'text') {
+      this.updateHeaderText();
+      return
+    }
+    const collapsed = this.isCollapsed && this.isCollapsible;
+    if (collapsed) {
+      this.collapse(this.#isComponentMounted);
+    } else {
+      this.expand(this.#isComponentMounted);
+    }
+  }
+}
+
+const selectors = {
+  host: () => ':host',
+  icon: () => 'descope-icon',
+  header: () => '.header',
+  text: () => 'span',
+  wrapper: () => '.wrapper',
+  content: () => 'div.content',
+}
+
+export const CollapsibleContainerClass = compose(
+  createStyleMixin({
+    mappings: {
+      hostWidth: { selector: selectors.host, property: 'width' },
+      hostDirection: { selector: selectors.host, property: 'direction' },
+      verticalPadding: [{ selector: selectors.wrapper, property: 'padding-top' }, { selector: selectors.wrapper, property: 'padding-bottom' }],
+      horizontalPadding: [{ selector: selectors.wrapper, property: 'padding-left' }, { selector: selectors.wrapper, property: 'padding-right' }],
+
+      flexDirection: {},
+      justifyContent: {},
+      alignItems: {},
+      gap: [{}, { property: 'margin-top' }],
+
+      backgroundColor: { selector: selectors.wrapper },
+      backgroundImage: { selector: selectors.wrapper },
+      backgroundPositionX: { selector: selectors.wrapper },
+      backgroundPositionY: { selector: selectors.wrapper },
+      backgroundSize: { selector: selectors.wrapper },
+      backgroundRepeat: { selector: selectors.wrapper },
+
+      borderRadius: { selector: selectors.wrapper },
+      borderColor: { selector: selectors.wrapper },
+      borderStyle: { selector: selectors.wrapper },
+      borderWidth: { selector: selectors.wrapper },
+
+      boxShadow: { selector: selectors.wrapper },
+
+      headerIconOrder: { selector: selectors.icon, property: 'order' },
+      headerJustifyContent: { selector: selectors.header, property: 'justify-content' },
+      headerCursor: { selector: selectors.header, property: 'cursor' },
+      headerGap: { selector: selectors.header, property: 'gap' },
+      textDirection: { selector: selectors.text, property: 'direction' },
+      iconAnimationDuration: { selector: selectors.icon, property: 'transition-duration' },
+      contentAnimationDuration: { selector: selectors.content, property: 'transition-duration' },
+    },
+  }),
+  draggableMixin,
+  componentNameValidationMixin
+)(RawCollapsibleContainer);

package/src/component/chevron.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="black" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.2193 9.27283C17.6584 8.87912 18.3334 8.91587 18.7272 9.35492C19.1209 9.79397 19.0841 10.4691 18.6451 10.8628C18.6451 10.8628 13.0457 16.0022 12.64 16.366C12.2343 16.7298 11.7608 16.7298 11.3552 16.366L5.35492 10.8628C4.91587 10.4691 4.87912 9.79397 5.27283 9.35492C5.66655 8.91587 6.34164 8.87912 6.78069 9.27283L12 14.1368L17.2193 9.27283Z"/>
+</svg>

package/src/component/index.js

@@ -0,0 +1,7 @@
+import '@descope-ui/descope-text'
+import '@descope-ui/descope-icon'
+import { componentName, CollapsibleContainerClass } from './CollapsibleContainerClass';
+
+customElements.define(componentName, CollapsibleContainerClass);
+
+export { CollapsibleContainerClass, componentName };

package/src/theme.js

@@ -0,0 +1,118 @@
+import { CollapsibleContainerClass, componentName } from './component/CollapsibleContainerClass';
+import globals from '@descope-ui/theme-globals';
+import { getThemeRefs, createHelperVars } from '@descope-ui/common/theme-helpers';
+
+
+const globalRefs = getThemeRefs(globals);
+
+const compVars = CollapsibleContainerClass.cssVarList;
+
+const [helperTheme, helperRefs, helperVars] = createHelperVars(
+  {
+    shadowColor: '#00000020', // if we want to support transparency vars, we should use different color format
+  },
+  componentName
+);
+
+const { shadowColor } = helperRefs;
+
+const collapsibleContainer = {
+  ...helperTheme,
+
+  [compVars.itemsGrow]: '0',
+  [compVars.hostWidth]: '100%',
+  [compVars.boxShadow]: 'none',
+
+  [compVars.backgroundColor]: globalRefs.colors.surface.main,
+
+  [compVars.backgroundImage]: '', // we need to set a value to avoid inner containers from inheriting the parent's background image
+  [compVars.backgroundPositionX]: 'center',
+  [compVars.backgroundPositionY]: 'center',
+  [compVars.backgroundSize]: 'cover',
+  [compVars.backgroundRepeat]: 'no-repeat',
+
+  [compVars.color]: globalRefs.colors.surface.contrast,
+  [compVars.borderRadius]: '0px',
+  [compVars.hostDirection]: globalRefs.direction,
+
+  [compVars.flexDirection]: 'column',
+  [compVars.alignItems]: 'flex-start',
+  [compVars.justifyContent]: 'flex-start',
+
+  [compVars.headerGap]: globalRefs.spacing.md,
+
+  [compVars.iconAnimationDuration]: '0.1s',
+  [compVars.contentAnimationDuration]: '0.1s',
+
+  verticalPadding: {
+    sm: { [compVars.verticalPadding]: '5px' },
+    md: { [compVars.verticalPadding]: '10px' },
+    lg: { [compVars.verticalPadding]: '20px' },
+  },
+
+  horizontalPadding: {
+    sm: { [compVars.horizontalPadding]: '5px' },
+    md: { [compVars.horizontalPadding]: '10px' },
+    lg: { [compVars.horizontalPadding]: '20px' },
+  },
+
+  spaceBetween: {
+    sm: { [compVars.gap]: '10px' },
+    md: { [compVars.gap]: '20px' },
+    lg: { [compVars.gap]: '30px' },
+  },
+
+  shadow: {
+    sm: {
+      [compVars.boxShadow]: `${globalRefs.shadow.wide.sm} ${shadowColor}, ${globalRefs.shadow.narrow.sm} ${shadowColor}`,
+    },
+    md: {
+      [compVars.boxShadow]: `${globalRefs.shadow.wide.md} ${shadowColor}, ${globalRefs.shadow.narrow.md} ${shadowColor}`,
+    },
+    lg: {
+      [compVars.boxShadow]: `${globalRefs.shadow.wide.lg} ${shadowColor}, ${globalRefs.shadow.narrow.lg} ${shadowColor}`,
+    },
+    xl: {
+      [compVars.boxShadow]: `${globalRefs.shadow.wide.xl} ${shadowColor}, ${globalRefs.shadow.narrow.xl} ${shadowColor}`,
+    },
+    '2xl': {
+      [helperVars.shadowColor]: '#00000050', // mimic daisyUI shadow settings
+      [compVars.boxShadow]: `${globalRefs.shadow.wide['2xl']} ${shadowColor}`,
+    },
+  },
+
+  borderRadius: {
+    sm: { [compVars.borderRadius]: globalRefs.radius.sm },
+    md: { [compVars.borderRadius]: globalRefs.radius.md },
+    lg: { [compVars.borderRadius]: globalRefs.radius.lg },
+    xl: { [compVars.borderRadius]: globalRefs.radius.xl },
+    '2xl': { [compVars.borderRadius]: globalRefs.radius['2xl'] },
+    '3xl': { [compVars.borderRadius]: globalRefs.radius['3xl'] },
+  },
+
+  iconPosition: {
+    'left': { [compVars.headerIconOrder]: '0' },
+    'right': { [compVars.headerIconOrder]: '1' },
+  },
+
+  _fillTitle: {
+    [compVars.headerJustifyContent]: 'space-between',
+  },
+
+  _border: {
+    [compVars.borderColor]: globalRefs.colors.surface.light,
+    [compVars.borderWidth]: globalRefs.border.xs,
+    [compVars.borderStyle]: 'solid',
+  },
+
+  _collapsible: {
+    [compVars.headerCursor]: 'pointer',
+  }
+};
+
+export default collapsibleContainer;
+
+export const vars = {
+  ...compVars,
+  ...helperVars,
+};

package/stories/descope-collapsible-container.stories.js

@@ -0,0 +1,130 @@
+import {
+  borderRadiusControl,
+  boxShadowControl,
+  customWidthControl,
+  modeControl,
+  textAlignControl,
+  typographyVariantControl
+} from '@descope-ui/common/sb-controls';
+import { componentName } from '../src/component';
+import bgImageUrl from './game.png';
+
+const Template = ({
+  'vertical-alignment': verticalAlignment,
+  'horizontal-alignment': horizontalAlignment,
+  'vertical-padding': verticalPadding,
+  'horizontal-padding': horizontalPadding,
+  'flex-direction': flexDirection,
+  direction,
+  'space-between': spaceBetween,
+  shadow,
+  'border-radius': borderRadius,
+  'st-host-width': customWidth,
+  'st-background-color': backgroundColor,
+  'st-items-grow': itemsGrow,
+  isBackgroundImage,
+  'icon-position': iconPosition,
+  'fill-title': fillTitle,
+  border,
+  text,
+  defaultState,
+  isCollapsible,
+  gap,
+  'text-align': textAlign,
+  'text-direction': textDirection,
+  'text-variant': textVariant,
+  'text-mode': textMode,
+}) => `
+  <descope-collapsible-container
+    vertical-padding="${verticalPadding || ''}"
+    horizontal-padding="${horizontalPadding || ''}"
+    space-between="${spaceBetween || ''}"
+    shadow="${shadow || ''}"
+    border-radius="${borderRadius || ''}"
+    st-host-width="${customWidth || ''}"
+    st-background-color="${backgroundColor || ''}"
+    st-background-image="${isBackgroundImage ? `url(${bgImageUrl})` : ''}"
+    icon-position="${iconPosition || ''}"
+    fill-title="${fillTitle || ''}"
+    border="${border || ''}"
+    ${defaultState === 'collapsed' ? 'collapsed="true"' : ''}
+    ${isCollapsible ? 'collapsible="true"' : ''}
+    text="${text || ''}"
+    st-gap="${gap || ''}"
+    text-align="${textAlign || ''}"
+    st-text-direction="${textDirection || ''}"
+    text-variant="${textVariant || ''}"
+    text-mode="${textMode || ''}"
+  >
+    <descope-button variant="contained" size="md" mode="primary">Button</descope-button>
+    <descope-button variant="contained" size="md" mode="secondary">Button</descope-button>
+    <descope-button variant="contained" size="md" mode="secondary">Button</descope-button>
+    <descope-button variant="contained" size="md" mode="secondary">Button</descope-button>
+    <descope-button variant="contained" size="md" mode="secondary">Button</descope-button>
+    <descope-button variant="contained" size="md" mode="secondary">Button</descope-button>
+    <descope-button variant="contained" size="md" mode="secondary">Button</descope-button>
+  </descope-collapsible-container>
+`;
+
+export default {
+  component: componentName,
+  title: 'descope-collapsible-container',
+  argTypes: {
+    ...boxShadowControl,
+    ...borderRadiusControl,
+    ...customWidthControl,
+    ...textAlignControl,
+    'text-variant': {
+      name: 'Text Variant',
+      options: typographyVariantControl.variant.options,
+      control: { type: 'select' },
+    },
+    'text-mode': {
+      name: 'Text Mode',
+      options: modeControl.mode.options,
+      control: { type: 'select' },
+    },
+    'vertical-padding': {
+      name: 'Vertical Padding',
+      options: ['sm', 'md', 'lg'],
+      control: { type: 'select' },
+    },
+    'horizontal-padding': {
+      name: 'Horizontal Padding',
+      options: ['sm', 'md', 'lg'],
+      control: { type: 'select' },
+    },
+    'icon-position': {
+      name: 'Icon Position',
+      options: ['left', 'right'],
+      control: { type: 'select' },
+    },
+    defaultState: {
+      name: 'Default State',
+      options: ['collapsed', 'expanded'],
+      control: { type: 'select' },
+    },
+    'text-direction': {
+      name: 'Text Direction',
+      options: ['ltr', 'rtl'],
+      control: { type: 'select' },
+    },
+  },
+};
+
+export const Default = Template.bind({});
+
+Default.args = {
+  'st-background-color': '',
+  isBackgroundImage: false,
+  'icon-position': 'left',
+  'fill-title': false,
+  border: false,
+  text: 'Text',
+  defaultState: 'collapsed',
+  isCollapsible: true,
+  gap: '0px',
+  'text-align': ''
+};
+
+

package/testDriver/collapsibleContainerTestDriver.ts

@@ -0,0 +1,11 @@
+import { Locator } from '@playwright/test';
+import { createComponentTestDriver } from 'test-drivers';
+
+const createCollapsibleContainerTestDriver = (locator: Locator) => {
+
+  return {
+    ...createComponentTestDriver(locator),
+  };
+};
+
+export default createCollapsibleContainerTestDriver;