@kaizen/components 2.2.3 → 2.3.0

package/dist/types/TitleBlock/subcomponents/MobileActions.d.ts

@@ -1,14 +0,0 @@
-import type { ButtonProps } from "../../Button";
-import { type DefaultActionProps, type PrimaryActionProps, type SecondaryActionsProps, type TitleBlockMenuItemProps } from '../types';
-export type MobileActionsProps = {
-    primaryAction?: PrimaryActionProps;
-    defaultAction?: DefaultActionProps;
-    secondaryActions?: SecondaryActionsProps;
-    secondaryOverflowMenuItems?: TitleBlockMenuItemProps[];
-    drawerHandleLabelIconPosition?: ButtonProps['iconPosition'];
-    autoHide?: boolean;
-};
-export declare const MobileActions: {
-    ({ primaryAction, defaultAction, secondaryActions, secondaryOverflowMenuItems, drawerHandleLabelIconPosition, autoHide, }: MobileActionsProps): JSX.Element;
-    displayName: string;
-};

package/src/TitleBlock/subcomponents/MobileActions.module.scss

@@ -1,208 +0,0 @@
-@import '~@kaizen/design-tokens/sass/spacing';
-@import '~@kaizen/design-tokens/sass/typography';
-@import '~@kaizen/design-tokens/sass/color';
-@import '~@kaizen/design-tokens/sass/layout';
-@import '~@kaizen/design-tokens/sass/border';
-@import '../../../styles/utils/legacy/layout';
-@import '../../../styles/utils/legacy/grid';
-@import '../../../styles/utils/layers';
-@import '../mixins';
-
-@layer kz-components {
-  $expand-button-width: 3.75rem;
-  $focus-spacing: 2px;
-  $focus-ring-border-width: 2px; // should be $border-focus-ring-border-width but CSS vars makes this hard
-  $space-for-focus-ring: ($focus-ring-border-width * 2) + ($focus-spacing * 2);
-  $slide-up-duration: 0.4s;
-
-  /* stylelint-disable no-descending-specificity */
-  .mobileActionsContainer {
-    display: none;
-    z-index: $ca-z-index-fixed;
-    flex-direction: column;
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    border-start-start-radius: $border-solid-border-radius;
-    border-start-end-radius: $border-solid-border-radius;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    overflow: hidden;
-    transform: translateY(calc(100% - #{$layout-mobile-actions-drawer-height}));
-    transition: $slide-up-duration ease;
-    animation: slide-up 1s ease;
-
-    &.isOpen {
-      transform: translateY(0%);
-
-      .mobileActionsMenuContainer {
-        visibility: visible;
-      }
-    }
-
-    @include title-block-small {
-      display: flex;
-    }
-  }
-
-  .mobileActionsTopRow {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    height: $layout-mobile-actions-drawer-height;
-  }
-
-  .mobileActionsTopRow.mobileActionsTopRowSingleButton {
-    justify-content: center;
-  }
-
-  .mobileActionsMenuContainer {
-    visibility: hidden;
-    width: 100%;
-    background: $color-white;
-    padding: $spacing-xs 0;
-    transition: visibility $slide-up-duration;
-  }
-
-  .drawerHandleIcon {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    @include ca-margin($end: calc(#{$ca-grid} / 2));
-
-    .drawerHandleLabelText + & {
-      @include ca-margin($start: calc(#{$ca-grid} / 2));
-    }
-  }
-
-  .mobileActionsPrimaryLabel {
-    text-align: left;
-    text-decoration: none;
-    color: $color-white;
-    font-family: $typography-button-primary-font-family;
-    font-weight: $typography-button-primary-font-weight;
-    font-size: $typography-button-primary-font-size;
-    line-height: $typography-button-primary-line-height;
-    letter-spacing: $typography-button-primary-letter-spacing;
-
-    @include ca-padding($start: $ca-grid * 0.75);
-  }
-
-  .mobileActionsPrimaryButton,
-  .mobileActionsExpandButton {
-    display: flex;
-    position: relative;
-    justify-content: flex-start;
-    align-items: center;
-    height: 100%;
-    border: 0;
-    box-sizing: border-box;
-    color: $color-white;
-    background-color: $color-blue-500;
-
-    &:focus {
-      background-color: $color-blue-600;
-      outline: none;
-    }
-
-    &:focus-visible {
-      height: $layout-mobile-actions-drawer-height - $space-for-focus-ring;
-
-      &::after {
-        $focus-ring-offset: calc((#{$border-focus-ring-border-width} * 2));
-
-        content: '';
-        position: absolute;
-        background: transparent;
-        border-width: $focus-ring-border-width;
-        border-style: $border-focus-ring-border-style;
-        border-color: $color-blue-500;
-        inset: calc(-1 * #{$focus-ring-offset});
-      }
-    }
-
-    &:hover {
-      text-decoration: none;
-    }
-  }
-
-  // Full width versions
-  .mobileActionsPrimaryButton:only-child,
-  .mobileActionsExpandButton:only-child {
-    flex-basis: 100%;
-    border-start-start-radius: $border-solid-border-radius;
-    border-start-end-radius: $border-solid-border-radius;
-
-    &:focus-visible {
-      flex-basis: calc(100% - #{$space-for-focus-ring});
-
-      &::after {
-        border-start-start-radius: $border-focus-ring-border-radius;
-        border-start-end-radius: $border-focus-ring-border-radius;
-      }
-    }
-  }
-
-  // Non full width versions
-  .mobileActionsPrimaryButton:not(:only-child) {
-    flex: 0 0 calc(100% - #{$expand-button-width});
-
-    &:focus-visible {
-      flex-basis: calc(100% - #{$expand-button-width} - #{$space-for-focus-ring});
-      margin-left: $focus-ring-border-width * 2;
-      border-start-start-radius: $border-solid-border-radius;
-
-      & + .mobileActionsExpandButton {
-        border-color: $color-white;
-      }
-
-      &::after {
-        border-start-start-radius: $border-focus-ring-border-radius;
-      }
-    }
-  }
-
-  .mobileActionsExpandButton:not(:only-child) {
-    flex: 0 0 $expand-button-width;
-    border-left: 2px solid $color-blue-200;
-    justify-content: center;
-
-    &:focus-visible {
-      border-color: $color-white;
-      flex-basis: calc(#{$expand-button-width} - #{$space-for-focus-ring});
-      margin-right: $focus-ring-border-width * 2;
-      border-start-end-radius: $border-solid-border-radius;
-
-      &::after {
-        border-start-end-radius: $border-focus-ring-border-radius;
-      }
-    }
-  }
-
-  .mobileActionsChevronSquare {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 100%;
-    position: absolute;
-
-    @include ca-position($end: 20px);
-  }
-  /* stylelint-enable no-descending-specificity */
-}
-
-@keyframes slide-up {
-  0% {
-    transform: translateY(100%);
-  }
-
-  50% {
-    transform: translateY(100%);
-  }
-
-  100% {
-    transform: translateY(calc(100% - #{$layout-mobile-actions-drawer-height}));
-  }
-}

package/src/TitleBlock/subcomponents/MobileActions.spec.tsx

@@ -1,210 +0,0 @@
-import React from 'react'
-import { render, screen, waitFor } from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
-import { vi } from 'vitest'
-import { MobileActions } from './MobileActions'
-const user = userEvent.setup()
-
-const MENU_LINKS = [
-  {
-    label: 'Primary menu link 1',
-    href: '#',
-  },
-  {
-    label: 'Primary menu action 2',
-    onClick: (): void => alert('test'),
-  },
-]
-
-const SECONDARY_ACTIONS = [
-  {
-    label: 'Secondary menu',
-    menuItems: [
-      {
-        onClick: (): void => alert('test'),
-        label: 'Secondary menu action 1',
-      },
-      {
-        onClick: (): void => alert('test'),
-        label: 'Secondary menu action 2',
-      },
-    ],
-  },
-  {
-    onClick: (): void => alert('test'),
-    label: 'Secondary action',
-  },
-]
-
-const SECONDARY_OVERFLOW_ACTIONS = [
-  {
-    onClick: (): void => alert('test'),
-    label: 'Secondary overflow action',
-  },
-]
-
-describe('<MobileActions />', () => {
-  describe('Case 1: Primary Action is a menu', () => {
-    it('makes aria-expanded toggles between true and false when user toggles the menu', async () => {
-      render(
-        <MobileActions
-          primaryAction={{
-            label: 'Primary menu',
-            menuItems: MENU_LINKS,
-          }}
-          defaultAction={{
-            label: 'Default link',
-            href: '#',
-          }}
-          secondaryActions={SECONDARY_ACTIONS}
-        />,
-      )
-      const mobileActionsButton = screen.getByRole('button', {
-        name: 'Primary menu',
-      })
-      expect(mobileActionsButton.getAttribute('aria-expanded')).toEqual('false')
-
-      await user.click(mobileActionsButton)
-      await waitFor(() => {
-        expect(mobileActionsButton.getAttribute('aria-expanded')).toEqual('true')
-      })
-      await user.click(mobileActionsButton)
-      await waitFor(() => {
-        expect(mobileActionsButton.getAttribute('aria-expanded')).toEqual('false')
-      })
-    })
-  })
-
-  describe('Primary Action does not have a menu list', () => {
-    it('makes aria-expanded toggles between true and false when user toggles the menu', async () => {
-      render(
-        <MobileActions
-          primaryAction={{
-            label: 'Primary menu',
-          }}
-          defaultAction={{
-            label: 'Default link',
-            href: '#',
-          }}
-          secondaryActions={SECONDARY_ACTIONS}
-        />,
-      )
-      const mobileActionsButton = screen.getByRole('button', {
-        name: 'Other actions',
-      })
-      expect(mobileActionsButton.getAttribute('aria-expanded')).toEqual('false')
-
-      await user.click(mobileActionsButton)
-      await waitFor(() => {
-        expect(mobileActionsButton.getAttribute('aria-expanded')).toEqual('true')
-      })
-      await user.click(mobileActionsButton)
-      await waitFor(() => {
-        expect(mobileActionsButton.getAttribute('aria-expanded')).toEqual('false')
-      })
-    })
-  })
-
-  describe('No primary actions', () => {
-    it('makes aria-expanded toggles between true and false when user toggles the menu', async () => {
-      render(
-        <MobileActions
-          defaultAction={{
-            label: 'Default link',
-            href: '#',
-          }}
-          secondaryActions={SECONDARY_ACTIONS}
-        />,
-      )
-      const mobileActionsButton = screen.getByRole('button', {
-        name: 'Other actions',
-      })
-      expect(mobileActionsButton.getAttribute('aria-expanded')).toEqual('false')
-
-      await user.click(mobileActionsButton)
-      await waitFor(() => {
-        expect(mobileActionsButton.getAttribute('aria-expanded')).toEqual('true')
-      })
-      await user.click(mobileActionsButton)
-      await waitFor(() => {
-        expect(mobileActionsButton.getAttribute('aria-expanded')).toEqual('false')
-      })
-    })
-  })
-})
-
-describe('when autoHide is true', () => {
-  beforeEach(() => {
-    window.alert = vi.fn()
-    render(
-      <MobileActions
-        primaryAction={{
-          label: 'Primary menu',
-        }}
-        defaultAction={{
-          label: 'Default link',
-          href: '#',
-        }}
-        secondaryActions={SECONDARY_ACTIONS}
-        secondaryOverflowMenuItems={SECONDARY_OVERFLOW_ACTIONS}
-        autoHide
-      />,
-    )
-  })
-  it('hides the menu when user clicks a default action item', async () => {
-    const mobileActionsButton = screen.getByRole('button', {
-      name: 'Other actions',
-    })
-    expect(mobileActionsButton.getAttribute('aria-expanded')).toEqual('false')
-
-    await user.click(mobileActionsButton)
-    await waitFor(() => {
-      expect(mobileActionsButton.getAttribute('aria-expanded')).toEqual('true')
-    })
-    const btn = screen.getAllByTestId(/title-block-mobile-actions-default-/)
-    expect(btn.length).toEqual(1)
-    await user.click(btn[0])
-
-    await waitFor(() => {
-      expect(mobileActionsButton.getAttribute('aria-expanded')).toEqual('false')
-    })
-  })
-
-  it('hides the menu when user clicks a secondary action item', async () => {
-    const mobileActionsButton = screen.getByRole('button', {
-      name: 'Other actions',
-    })
-    expect(mobileActionsButton.getAttribute('aria-expanded')).toEqual('false')
-
-    await user.click(mobileActionsButton)
-    await waitFor(() => {
-      expect(mobileActionsButton.getAttribute('aria-expanded')).toEqual('true')
-    })
-    const btn = screen.getAllByTestId('title-block-mobile-actions-secondary-action')
-    expect(btn.length).toEqual(3)
-    await user.click(btn[0])
-
-    await waitFor(() => {
-      expect(mobileActionsButton.getAttribute('aria-expanded')).toEqual('false')
-    })
-  })
-
-  it('hides the menu when user clicks a secondary overflow item', async () => {
-    const mobileActionsButton = screen.getByRole('button', {
-      name: 'Other actions',
-    })
-    expect(mobileActionsButton.getAttribute('aria-expanded')).toEqual('false')
-
-    await user.click(mobileActionsButton)
-    await waitFor(() => {
-      expect(mobileActionsButton.getAttribute('aria-expanded')).toEqual('true')
-    })
-    const btn = screen.getAllByTestId('title-block-mobile-actions-overflow-menu-item')
-    expect(btn.length).toEqual(1)
-    await user.click(btn[0])
-
-    await waitFor(() => {
-      expect(mobileActionsButton.getAttribute('aria-expanded')).toEqual('false')
-    })
-  })
-})