@os-design/core 1.0.198 → 1.0.200

package/src/PageHeader/index.tsx

@@ -0,0 +1,246 @@
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+import { Left } from '@os-design/icons';
+import { m } from '@os-design/media';
+
+import { ellipsisStyles } from '@os-design/styles';
+import { ThemeOverrider, clr } from '@os-design/theming';
+
+import { omitEmotionProps } from '@os-design/utils';
+import React, { forwardRef, useContext } from 'react';
+
+import Button from '../Button';
+import LayoutContext from '../Layout/LayoutContext';
+import defaultLocale, { PageHeaderLocale } from './utils/defaultLocale';
+
+type JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;
+export interface PageHeaderProps extends JsxDivProps {
+  /**
+   * The title of the page.
+   * @default undefined
+   */
+  title: string;
+  /**
+   * The subtitle of the page.
+   * @default undefined
+   */
+  subtitle?: string;
+  /**
+   * The component located on the left side.
+   * @default undefined
+   */
+  left?: React.ReactNode;
+  /**
+   * Reduces the left padding of the page header.
+   * @default false
+   */
+  leftIsGhostButton?: boolean;
+  /**
+   * The component located on the right side.
+   * @default undefined
+   */
+  right?: React.ReactNode;
+  /**
+   * Reduces the right padding of the page header.
+   * @default false
+   */
+  rightIsGhostButton?: boolean;
+  /**
+   * The back event handler. If passed, the page header has the back button.
+   * @default undefined
+   */
+  onBack?: () => void;
+  /**
+   * The locale.
+   * @default undefined
+   */
+  locale?: PageHeaderLocale;
+}
+
+const getReducedPadding = (p, isMinSm: boolean) => {
+  const i = isMinSm ? 1 : 0;
+  let padding = p.theme.horizontalPadding[i] - p.theme.buttonPaddingHorizontal;
+  if (padding < 0) padding = 0;
+  return padding;
+};
+
+const horizontalPaddingStyles = (p) => {
+  const reducedPadding = getReducedPadding(p, false);
+  const reducedPaddingSm = getReducedPadding(p, true);
+  return css`
+    padding-left: ${p.leftIsGhostButton
+      ? reducedPadding
+      : p.theme.horizontalPadding[0]}em;
+    padding-right: ${p.rightIsGhostButton
+      ? reducedPadding
+      : p.theme.horizontalPadding[0]}em;
+
+    ${m.min.sm} {
+      padding-left: ${p.leftIsGhostButton
+        ? reducedPaddingSm
+        : p.theme.horizontalPadding[1]}em;
+      padding-right: ${p.rightIsGhostButton
+        ? reducedPaddingSm
+        : p.theme.horizontalPadding[1]}em;
+    }
+  `;
+};
+
+const hasNavigationIndentStyles = (p) =>
+  p.hasNavigationIndent &&
+  css`
+    ${m.min.md} {
+      left: ${p.theme.navigationSideWidth}em;
+    }
+  `;
+
+interface ContainerProps {
+  leftIsGhostButton?: boolean;
+  rightIsGhostButton?: boolean;
+  hasNavigationIndent?: boolean;
+}
+export const PageHeaderContainer = styled(
+  'div',
+  omitEmotionProps(
+    'leftIsGhostButton',
+    'rightIsGhostButton',
+    'hasNavigationIndent'
+  )
+)<ContainerProps>`
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+
+  height: ${(p) => p.theme.pageHeaderHeight[0]}em;
+  ${m.min.md} {
+    height: ${(p) => p.theme.pageHeaderHeight[1]}em;
+  }
+
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  z-index: 101;
+
+  background-color: ${(p) => clr(p.theme.pageHeaderColorBg)};
+  color: ${(p) => clr(p.theme.pageHeaderColorText)};
+  border-bottom: 1px solid ${(p) => clr(p.theme.pageHeaderColorBorder)};
+
+  ${horizontalPaddingStyles};
+  ${hasNavigationIndentStyles};
+`;
+
+const BackButton = styled(Button)`
+  margin-right: 0.2em;
+  flex-shrink: 0;
+`;
+
+const Content = styled.div`
+  overflow: hidden; // For ellipsis
+`;
+
+const notHasSubtitleStyles = (p) =>
+  !p.hasSubtitle &&
+  css`
+    font-size: ${p.theme.sizes.large}em;
+  `;
+
+interface TitleProps {
+  hasSubtitle: boolean;
+}
+const Title = styled('h1', omitEmotionProps('hasSubtitle'))<TitleProps>`
+  margin: 0;
+  font-size: 1em;
+  font-weight: 500;
+  line-height: 1.2;
+  ${notHasSubtitleStyles};
+  ${ellipsisStyles};
+`;
+
+const Subtitle = styled.div`
+  font-size: ${(p) => p.theme.sizes.small}em;
+  color: ${(p) => clr(p.theme.pageHeaderSubtitleColorText)};
+  line-height: 1;
+  margin-top: 0.2em;
+  ${ellipsisStyles};
+`;
+
+const Addon = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+const LeftAddon = styled(Addon)`
+  padding-right: ${(p) => p.theme.pageHeaderAddonPaddingHorizontal}em;
+`;
+
+const RightAddon = styled(Addon)`
+  padding-left: ${(p) => p.theme.pageHeaderAddonPaddingHorizontal}em;
+  margin-left: auto;
+
+  display: grid;
+  grid-auto-flow: column;
+  grid-column-gap: 0.4em;
+`;
+
+/**
+ * The header of the page.
+ */
+const PageHeader = forwardRef<HTMLDivElement, PageHeaderProps>(
+  (
+    {
+      title,
+      subtitle,
+      left,
+      leftIsGhostButton = false,
+      right,
+      rightIsGhostButton = false,
+      onBack,
+      locale = defaultLocale,
+      ...rest
+    },
+    ref
+  ) => {
+    const { hasNavigation } = useContext(LayoutContext);
+
+    return (
+      <ThemeOverrider
+        overrides={(t) => ({
+          buttonPaddingHorizontal: t.pageHeaderButtonPaddingHorizontal,
+        })}
+      >
+        <PageHeaderContainer
+          leftIsGhostButton={leftIsGhostButton || !!onBack}
+          rightIsGhostButton={rightIsGhostButton}
+          hasNavigationIndent={hasNavigation}
+          {...rest}
+          ref={ref}
+        >
+          {onBack && (
+            <BackButton
+              type='ghost'
+              wide='never'
+              onClick={onBack}
+              aria-label={locale.backLabel}
+            >
+              <Left />
+            </BackButton>
+          )}
+
+          {left && <LeftAddon>{left}</LeftAddon>}
+
+          <Content>
+            <Title hasSubtitle={!!subtitle}>{title}</Title>
+            {subtitle && <Subtitle>{subtitle}</Subtitle>}
+          </Content>
+
+          {right && <RightAddon>{right}</RightAddon>}
+        </PageHeaderContainer>
+      </ThemeOverrider>
+    );
+  }
+);
+
+PageHeader.displayName = 'PageHeader';
+
+export default PageHeader;

package/src/PageHeader/utils/defaultLocale.ts

@@ -0,0 +1,9 @@
+export interface PageHeaderLocale {
+  backLabel: string;
+}
+
+const defaultLocale: PageHeaderLocale = {
+  backLabel: 'Back',
+};
+
+export default defaultLocale;

package/src/PageHeaderInputSearch/index.tsx

@@ -0,0 +1,145 @@
+import { css, keyframes } from '@emotion/react';
+import styled from '@emotion/styled';
+import { Close, Search } from '@os-design/icons';
+import { ThemeOverrider, useTheme } from '@os-design/theming';
+import { omitEmotionProps, useClosable } from '@os-design/utils';
+import React, { forwardRef, useContext, useState } from 'react';
+import Button from '../Button';
+import InputSearch, { InputSearchProps } from '../InputSearch';
+import LayoutContext from '../Layout/LayoutContext';
+import { PageHeaderContainer } from '../PageHeader';
+import defaultLocale, {
+  PageHeaderInputSearchLocale,
+} from './utils/defaultLocale';
+
+export interface PageHeaderInputSearchProps
+  extends Omit<InputSearchProps, 'size' | 'locale'> {
+  /**
+   * The locale.
+   * @default undefined
+   */
+  locale?: PageHeaderInputSearchLocale;
+  /**
+   * Whether the search input opens on mount.
+   * @default false
+   */
+  autoOpen?: boolean;
+  /**
+   * The close event handler.
+   * @default undefined
+   */
+  onClose?: () => void;
+}
+
+const fadeIn = keyframes`
+  from { transform: translateY(-100%); }
+  to { transform: translateY(0); }
+`;
+
+const fadeOut = keyframes`
+  from { transform: translateY(0); }
+  to { transform: translateY(-100%); }
+`;
+
+const visibleStyles = (p) =>
+  p.visible &&
+  css`
+    animation: ${fadeIn} ${p.theme.transitionDelay}ms forwards;
+  `;
+
+const invisibleStyles = (p) =>
+  !p.visible &&
+  css`
+    animation: ${fadeOut} ${p.theme.transitionDelay}ms forwards;
+  `;
+
+interface ContainerProps {
+  visible: boolean;
+}
+const Container = styled(
+  PageHeaderContainer,
+  omitEmotionProps('visible')
+)<ContainerProps>`
+  z-index: 102; // After PageHeaderContainer
+  ${visibleStyles};
+  ${invisibleStyles};
+`;
+
+const CloseButton = styled(Button)`
+  margin-left: ${(p) => p.theme.pageHeaderAddonPaddingHorizontal}em;
+`;
+
+/**
+ * The search input for the page header.
+ */
+const PageHeaderInputSearch = forwardRef<
+  HTMLInputElement,
+  PageHeaderInputSearchProps
+>(
+  (
+    {
+      locale = defaultLocale,
+      autoOpen = false,
+      onClose = () => {},
+      loading = false,
+      ...rest
+    },
+    ref
+  ) => {
+    const [visible, setVisible] = useState(autoOpen);
+    const { theme } = useTheme();
+    const mounted = useClosable(visible, theme.transitionDelay);
+    const { hasNavigation } = useContext(LayoutContext);
+
+    return (
+      <>
+        <Button
+          type='ghost'
+          wide='never'
+          loading={loading}
+          onClick={() => setVisible(true)}
+          aria-label={locale.searchLabel}
+        >
+          <Search />
+        </Button>
+
+        {mounted && (
+          <ThemeOverrider
+            overrides={(t) => ({
+              buttonPaddingHorizontal: t.pageHeaderButtonPaddingHorizontal,
+            })}
+          >
+            <Container
+              visible={visible}
+              rightIsGhostButton
+              hasNavigationIndent={hasNavigation}
+            >
+              <InputSearch
+                autoFocus
+                locale={locale}
+                loading={loading}
+                {...rest}
+                ref={ref}
+              />
+              <CloseButton
+                type='ghost'
+                wide='never'
+                onClick={() => {
+                  setVisible(false);
+                  onClose();
+                }}
+                aria-label={locale.closeLabel}
+              >
+                <Close />
+              </CloseButton>
+            </Container>
+          </ThemeOverrider>
+        )}
+      </>
+    );
+  }
+);
+
+PageHeaderInputSearch.displayName = 'PageHeaderInputSearch';
+
+export default PageHeaderInputSearch;

package/src/PageHeaderInputSearch/utils/defaultLocale.ts

@@ -0,0 +1,16 @@
+import inputSearchDefaultLocale, {
+  InputSearchLocale,
+} from '../../InputSearch/utils/defaultLocale';
+
+export interface PageHeaderInputSearchLocale extends InputSearchLocale {
+  searchLabel: string;
+  closeLabel: string;
+}
+
+const defaultLocale: PageHeaderInputSearchLocale = {
+  ...inputSearchDefaultLocale,
+  searchLabel: 'Search',
+  closeLabel: 'Close search',
+};
+
+export default defaultLocale;

package/src/PageHeaderSkeleton/index.tsx

@@ -0,0 +1,33 @@
+import { WithSize } from '@os-design/styles';
+
+import React, { forwardRef, useContext } from 'react';
+import LayoutContext from '../Layout/LayoutContext';
+import { PageHeaderContainer } from '../PageHeader';
+
+import Skeleton, { SkeletonProps } from '../Skeleton';
+
+export type PageHeaderSkeletonProps = SkeletonProps & WithSize;
+
+/**
+ * Provides a page header placeholder while a user waits for
+ * the content to load.
+ */
+const PageHeaderSkeleton = forwardRef<HTMLDivElement, PageHeaderSkeletonProps>(
+  ({ width = '30%', ...rest }, ref) => {
+    const { hasNavigation } = useContext(LayoutContext);
+
+    return (
+      <PageHeaderContainer
+        hasNavigationIndent={hasNavigation}
+        {...rest}
+        ref={ref}
+      >
+        <Skeleton width={width} />
+      </PageHeaderContainer>
+    );
+  }
+);
+
+PageHeaderSkeleton.displayName = 'PageHeaderSkeleton';
+
+export default PageHeaderSkeleton;

package/src/ParagraphSkeleton/index.tsx

@@ -0,0 +1,65 @@
+import { css } from '@emotion/react';
+
+import styled from '@emotion/styled';
+
+import { omitEmotionProps } from '@os-design/utils';
+import React, { forwardRef } from 'react';
+
+import Skeleton, { SkeletonProps } from '../Skeleton';
+
+export interface ParagraphSkeletonProps extends SkeletonProps {
+  /**
+   * The number of rows.
+   * @default 4
+   */
+  rows?: number;
+  /**
+   * The width of the last row.
+   * @default 70%
+   */
+  width?: string;
+  /**
+   * Whether the paragraph has a bottom margin.
+   * @default false
+   */
+  hasMargin?: boolean;
+}
+
+const hasMarginStyles = (p) =>
+  p.hasMargin &&
+  css`
+    margin-bottom: ${p.theme.paragraphMarginBottom +
+    (p.theme.lineHeight - 1)}em;
+  `;
+
+type ContainerProps = Pick<ParagraphSkeletonProps, 'hasMargin'>;
+const Container = styled('div', omitEmotionProps('hasMargin'))<ContainerProps>`
+  & > *:not(:last-of-type) {
+    margin-bottom: ${(p) => p.theme.lineHeight - 1}em;
+  }
+  ${hasMarginStyles};
+`;
+
+let key = 0;
+
+/**
+ * Provides a paragraph placeholder while a user waits for the content to load.
+ */
+const ParagraphSkeleton = forwardRef<HTMLDivElement, ParagraphSkeletonProps>(
+  ({ rows = 4, width = '70%', hasMargin = false, ...rest }, ref) => (
+    <Container hasMargin={hasMargin} {...rest} ref={ref}>
+      {Array(rows)
+        .fill({})
+        .map((_, index) => {
+          key += 1;
+          return (
+            <Skeleton key={key} width={index < rows - 1 ? '100%' : width} />
+          );
+        })}
+    </Container>
+  )
+);
+
+ParagraphSkeleton.displayName = 'ParagraphSkeleton';
+
+export default ParagraphSkeleton;