chore: Creates internal drawer component (#1495)

Co-authored-by: Katie George <[email protected]>

src/i18n/messages-types.ts

@@ -166,6 +166,9 @@ export interface I18nFormatArgTypes {
     "i18nStrings.successIconAriaLabel": never;
     "i18nStrings.warningIconAriaLabel": never;
   }
+  "drawer": {
+    "i18nStrings.loadingText": never;
+  }
   "form": {
     "errorIconAriaLabel": never;
   }

src/i18n/messages/all.de.json

@@ -114,6 +114,9 @@
     "i18nStrings.formatRelativeRange": "{amount, plural, one {Letzte {amount} {unit}} other {Letzte {amount} {unit}s}}",
     "i18nStrings.formatUnit": "{amount, plural, one {{unit}} other {{unit}s}}"
   },
+  "drawer": {
+    "i18nStrings.loadingText": "Inhalte werden geladen"
+  },
   "flashbar": {
     "i18nStrings.ariaLabel": "Benachrichtigungen",
     "i18nStrings.errorIconAriaLabel": "Fehler",

src/i18n/messages/all.en-GB.json

@@ -114,6 +114,9 @@
     "i18nStrings.formatRelativeRange": "{amount, plural, one {Last {amount} {unit}} other {Last {amount} {unit}s}}",
     "i18nStrings.formatUnit": "{amount, plural, one {{unit}} other {{unit}s}}"
   },
+  "drawer": {
+    "i18nStrings.loadingText": "Loading content"
+  },
   "flashbar": {
     "i18nStrings.ariaLabel": "Notifications",
     "i18nStrings.errorIconAriaLabel": "Error",

src/i18n/messages/all.en.json

@@ -115,6 +115,9 @@
     "i18nStrings.formatRelativeRange": "{amount, plural, one {Last {amount} {unit}} other {Last {amount} {unit}s}}",
     "i18nStrings.formatUnit": "{amount, plural, one {{unit}} other {{unit}s}}"
   },
+  "drawer": {
+    "i18nStrings.loadingText": "Loading content"
+  },
   "flashbar": {
     "i18nStrings.ariaLabel": "Notifications",
     "i18nStrings.errorIconAriaLabel": "Error",

src/i18n/messages/all.es.json

@@ -114,6 +114,9 @@
     "i18nStrings.formatRelativeRange": "{amount, plural, one {Último {amount} {unit}} other {Últimos {amount} {unit}}}",
     "i18nStrings.formatUnit": "{amount, plural, one {{unit}} other {{unit}}}"
   },
+  "drawer": {
+    "i18nStrings.loadingText": "Cargando contenido"
+  },
   "flashbar": {
     "i18nStrings.ariaLabel": "Notificaciones",
     "i18nStrings.errorIconAriaLabel": "Error",

src/i18n/messages/all.fr.json

@@ -114,6 +114,9 @@
     "i18nStrings.formatRelativeRange": "{amount, plural, one {Dernier {amount} {unit}} other {Dernières {amount} {unit}s}}",
     "i18nStrings.formatUnit": "{amount, plural, one {{unit}} other {{unit}s}}"
   },
+  "drawer": {
+    "i18nStrings.loadingText": "Chargement du contenu en cours"
+  },
   "flashbar": {
     "i18nStrings.ariaLabel": "Notifications",
     "i18nStrings.errorIconAriaLabel": "Erreur",

src/i18n/messages/all.id.json

@@ -114,6 +114,9 @@
     "i18nStrings.formatRelativeRange": "{amount, plural, one {{amount} {unit} terakhir} other {{amount} {unit} terakhir}}",
     "i18nStrings.formatUnit": "{amount, plural, one {{unit}} other {{unit}}}"
   },
+  "drawer": {
+    "i18nStrings.loadingText": "Memuat konten"
+  },
   "flashbar": {
     "i18nStrings.ariaLabel": "Notifikasi",
     "i18nStrings.errorIconAriaLabel": "Kesalahan",

src/i18n/messages/all.it.json

@@ -114,6 +114,9 @@
     "i18nStrings.formatRelativeRange": "{amount, plural, one {Ultimo {amount} {unit}} other {Ultimi {amount} {unit}}}",
     "i18nStrings.formatUnit": "{amount, plural, one {{unit}} other {{unit}}}"
   },
+  "drawer": {
+    "i18nStrings.loadingText": "Caricamento dei contenuti"
+  },
   "flashbar": {
     "i18nStrings.ariaLabel": "Notifiche",
     "i18nStrings.errorIconAriaLabel": "Errore",

src/i18n/messages/all.ja.json

@@ -114,6 +114,9 @@
     "i18nStrings.formatRelativeRange": "{amount, plural, one {最後の {amount} {unit}} other {最後の {amount} {unit}}}",
     "i18nStrings.formatUnit": "{amount, plural, one {{unit}} other {{unit}}}"
   },
+  "drawer": {
+    "i18nStrings.loadingText": "コンテンツのロード中"
+  },
   "flashbar": {
     "i18nStrings.ariaLabel": "通知",
     "i18nStrings.errorIconAriaLabel": "エラー",

src/i18n/messages/all.ko.json

@@ -114,6 +114,9 @@
     "i18nStrings.formatRelativeRange": "{amount, plural, one {마지막 {amount}{unit}} other {마지막 {amount}{unit}}}",
     "i18nStrings.formatUnit": "{amount, plural, one {{unit}} other {{unit}}}"
   },
+  "drawer": {
+    "i18nStrings.loadingText": "콘텐츠 로드 중"
+  },
   "flashbar": {
     "i18nStrings.ariaLabel": "알림",
     "i18nStrings.errorIconAriaLabel": "오류",

src/i18n/messages/all.pt-BR.json

@@ -114,6 +114,9 @@
     "i18nStrings.formatRelativeRange": "{amount, plural, one {Último(a) {amount} {unit}} other {Últimos(as) {amount} {unit}s}}",
     "i18nStrings.formatUnit": "{amount, plural, one {{unit}} other {{unit}s}}"
   },
+  "drawer": {
+    "i18nStrings.loadingText": "Carregando conteúdo"
+  },
   "flashbar": {
     "i18nStrings.ariaLabel": "Notificações",
     "i18nStrings.errorIconAriaLabel": "Erro",

src/i18n/messages/all.zh-CN.json

@@ -114,6 +114,9 @@
     "i18nStrings.formatRelativeRange": "{amount, plural, one {最近 {amount} {unit}} other {最近 {amount} {unit}}}",
     "i18nStrings.formatUnit": "{amount, plural, one {{unit}} other {{unit}}}"
   },
+  "drawer": {
+    "i18nStrings.loadingText": "正在加载内容"
+  },
   "flashbar": {
     "i18nStrings.ariaLabel": "通知",
     "i18nStrings.errorIconAriaLabel": "错误",

src/i18n/messages/all.zh-TW.json

@@ -114,6 +114,9 @@
     "i18nStrings.formatRelativeRange": "{amount, plural, one {最後 {amount} {unit}} other {最後 {amount} {unit}}}",
     "i18nStrings.formatUnit": "{amount, plural, one {{unit}} other {{unit}}}"
   },
+  "drawer": {
+    "i18nStrings.loadingText": "載入內容"
+  },
   "flashbar": {
     "i18nStrings.ariaLabel": "通知",
     "i18nStrings.errorIconAriaLabel": "錯誤",

src/internal/components/drawer/__tests__/drawer.test.tsx

@@ -0,0 +1,49 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+import { render } from '@testing-library/react';
+import createWrapper from '../../../../../lib/components/test-utils/dom';
+import Drawer from '../../../../../lib/components/internal/components/drawer';
+import TestI18nProvider from '../../../../../lib/components/i18n/testing';
+import styles from '../../../../../lib/components/internal/components/drawer/styles.css.js';
+
+function renderDrawer(jsx: React.ReactElement) {
+  const { container } = render(jsx);
+  const wrapper = createWrapper(container).findByClassName(styles.drawer)!;
+  const header = wrapper.findByClassName(styles.header);
+  const content = wrapper.findByClassName(styles['test-utils-drawer-content']);
+  return { wrapper, header, content };
+}
+
+test('renders only children by default', () => {
+  const { header, content } = renderDrawer(<Drawer>test content</Drawer>);
+
+  expect(header).toBeNull();
+  expect(content!.getElement()).toHaveTextContent('test content');
+});
+
+test('renders header if it is provided', () => {
+  const { header, content } = renderDrawer(<Drawer header="Bla bla">there is a header above</Drawer>);
+  expect(header!.getElement()).toHaveTextContent('Bla bla');
+  expect(content!.getElement()).toHaveTextContent('there is a header above');
+});
+
+test('renders loading state', () => {
+  const { wrapper, header, content } = renderDrawer(
+    <Drawer loading={true} i18nStrings={{ loadingText: 'Loading content' }} />
+  );
+  expect(wrapper.findStatusIndicator()!.getElement()).toHaveTextContent('Loading content');
+  expect(header).toBeNull();
+  expect(content).toBeNull();
+});
+
+describe('i18n', () => {
+  test('supports providing loadingText from i18n provider', () => {
+    const { container } = render(
+      <TestI18nProvider messages={{ drawer: { 'i18nStrings.loadingText': 'Custom loading text' } }}>
+        <Drawer loading={true} />
+      </TestI18nProvider>
+    );
+    expect(createWrapper(container).findStatusIndicator()!.getElement()).toHaveTextContent('Custom loading text');
+  });
+});

src/internal/components/drawer/index.tsx

@@ -0,0 +1,31 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import clsx from 'clsx';
+import React from 'react';
+import { getBaseProps } from '../../base-component';
+import InternalStatusIndicator from '../../../status-indicator/internal';
+import styles from './styles.css.js';
+import { DrawerProps } from './interfaces';
+import LiveRegion from '../../components/live-region';
+import { useInternalI18n } from '../../../i18n/context';
+
+export default function Drawer({ header, children, loading, i18nStrings, ...restProps }: DrawerProps) {
+  const baseProps = getBaseProps(restProps);
+  const i18n = useInternalI18n('drawer');
+  const containerProps = {
+    ...baseProps,
+    className: clsx(baseProps.className, styles.drawer),
+  };
+  return loading ? (
+    <div {...containerProps}>
+      <InternalStatusIndicator type="loading">
+        <LiveRegion visible={true}>{i18n('i18nStrings.loadingText', i18nStrings?.loadingText)}</LiveRegion>
+      </InternalStatusIndicator>
+    </div>
+  ) : (
+    <div {...containerProps}>
+      {header && <div className={clsx(styles.header)}>{header}</div>}
+      <div className={clsx(styles['test-utils-drawer-content'])}>{children}</div>
+    </div>
+  );
+}

src/internal/components/drawer/interfaces.ts

@@ -0,0 +1,37 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { BaseComponentProps } from '../../base-component';
+import React from 'react';
+
+export interface DrawerProps extends BaseComponentProps {
+  /**
+   * Header of the drawer.
+   *
+   * It should contain the only `h2` used in the drawer.
+   */
+  header?: React.ReactNode;
+
+  /**
+   * Main content of the drawer.
+   *
+   */
+  children?: React.ReactNode;
+
+  /**
+   * Renders the drawer in a loading state. We recommend that you also set a `loadingText`.
+   */
+  loading?: boolean;
+
+  /**
+   * An object containing all the necessary localized strings required by the component.
+   * @i18n
+   */
+  i18nStrings?: I18nStrings;
+}
+
+export interface I18nStrings {
+  /**
+    Specifies the text that's displayed when the panel is in a loading state.
+   */
+  loadingText?: string;
+}

src/internal/components/drawer/styles.scss

@@ -0,0 +1,41 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+
+/* stylelint-disable @cloudscape-design/no-implicit-descendant, selector-max-type */
+@use '../../styles/tokens' as awsui;
+@use '../../styles' as styles;
+
+.drawer {
+  @include styles.styles-reset;
+  word-wrap: break-word;
+  padding: awsui.$space-scaled-l awsui.$space-panel-side-right awsui.$space-scaled-xxxl awsui.$space-panel-side-left;
+}
+
+.header {
+  @include styles.font-panel-header;
+  color: awsui.$color-text-heading-default;
+  padding-bottom: awsui.$space-scaled-l;
+  padding-left: awsui.$space-panel-side-left;
+  // padding to make sure the header doesn't overlap with the close icon
+  padding-right: calc(#{awsui.$space-xl} + #{awsui.$space-scaled-xxl});
+  border-bottom: awsui.$border-divider-section-width solid awsui.$color-border-divider-default;
+  margin: 0 calc(-1 * #{awsui.$space-panel-side-right}) awsui.$space-scaled-l calc(-1 * #{awsui.$space-panel-side-left});
+
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    @include styles.font-panel-header;
+    padding-top: 0;
+    padding-bottom: 0;
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+}
+
+.test-utils-drawer-content {
+  /* used in test-utils */
+}