feat(mobile-header): create component (uber#5205)

* feat(mobile-header): implement fixed collapsed version

* chore(mobile-header): add scenario for floating header

* chore(mobile-header): add expanded state and sticky header

* chore(mobile-header): support text content for buttons

* chore(mobile-header): fix grid columns and text overflow

* chore(mobile-header): add index.js.flow

* chore(mobile-header): add docs

* chore(mobile-header): fix positioning for scenarios

* chore(mobile-header): fix docs examples

* chore(mobile-header): rename additionalButtons to actionButtons

* chore(mobile-header): improve docs

* chore(mobile-header): basic a11y tests

* chore(mobile-header): handle RTL

* chore(mobile-header): fix aria-label type for button

* chore(mobile-header): fix a11y issue on overflow divs

* chore(mobile-header): add index.d.ts for png

* chore(mobile-header): fix flow issues

* chore(mobile-header): make fixed example default to expanded

* test(vrt): update visual snapshots for 6209084 [skip ci] (uber#5206)

Co-authored-by: UberOpenSourceBot <[email protected]>

* chore(mobile-header): change IconButton type

* chore(mobile-header): use renderIcon

* chore(mobile-header): fix navContainer padding issue

* chore(mobile-header): revert accidental rename of nav button

* test(vrt): update visual snapshots for 4d832f8 (uber#5214)

Co-authored-by: UberOpenSourceBot <[email protected]>

Co-authored-by: UberOpenSourceBot <[email protected]>
Co-authored-by: UberOpenSourceBot <[email protected]>
Co-authored-by: Chase Starr <[email protected]>

documentation-site/cheat-sheet.js

@@ -2342,20 +2342,28 @@ const outlines = [
           { name: 'Title', lineStart: 15 },
           { name: 'NavContainer', lineStart: 16 },
           { name: 'HeaderButton', lineStart: 17 },
-          { name: 'AdditionalButtonsContainer', lineStart: 18 },
+          { name: 'ActionButtonsContainer', lineStart: 18 },
+        ],
+      },
+      {
+        name: 'IconButton',
+        lineStart: 21,
+        children: [
+          { name: 'renderIcon', lineStart: 22 },
+          { name: 'onClick', lineStart: 28 },
+          { name: 'label', lineStart: 29 },
         ],
       },
-      { name: 'IconButton', lineStart: 21, children: [] },
       {
         name: 'MobileHeaderProps',
-        lineStart: 33,
+        lineStart: 32,
         children: [
-          { name: 'title', lineStart: 34 },
-          { name: 'expanded', lineStart: 35 },
-          { name: 'navButton', lineStart: 36 },
-          { name: 'additionalButtons', lineStart: 37 },
-          { name: 'type', lineStart: 38 },
-          { name: 'overrides', lineStart: 39 },
+          { name: 'title', lineStart: 33 },
+          { name: 'expanded', lineStart: 34 },
+          { name: 'navButton', lineStart: 35 },
+          { name: 'actionButtons', lineStart: 36 },
+          { name: 'type', lineStart: 37 },
+          { name: 'overrides', lineStart: 38 },
         ],
       },
     ],

documentation-site/components/yard/config/mobile-header.ts

@@ -0,0 +1,83 @@
+/*
+Copyright (c) Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+import { MobileHeader, TYPE } from 'baseui/mobile-header';
+import { PropTypes } from 'react-view';
+import type { TConfig } from '../types';
+import { ArrowLeft, Plus, Check } from 'baseui/icon';
+
+const MobileHeaderConfig: TConfig = {
+  componentName: 'MobileHeader',
+  imports: {
+    'baseui/mobile-header': {
+      named: ['MobileHeader'],
+    },
+    'baseui/icon': {
+      named: ['ArrowLeft', 'Plus', 'Check'],
+    },
+  },
+  scope: {
+    MobileHeader,
+    TYPE,
+    ArrowLeft,
+    Plus,
+    Check,
+  },
+  theme: [],
+  props: {
+    type: {
+      value: undefined,
+      defaultValue: undefined,
+      options: TYPE,
+      enumName: 'TYPE',
+      type: PropTypes.Enum,
+      description: 'Determines whether header if fixed or floating',
+      imports: {
+        'baseui/mobile-header': {
+          named: ['TYPE'],
+        },
+      },
+    },
+    title: {
+      value: 'Header title',
+      type: PropTypes.String,
+      description: 'Title to be displayed in MobileHeader. Ignored when using the floating type.',
+    },
+
+    navButton: {
+      value:
+        '{renderIcon: ArrowLeft, onClick: () => alert("nav button click"), label: "Go back to the previous screen"}',
+      type: PropTypes.Object,
+      description:
+        'Determines the content (can be an icon or a string), onClick, and ariaLabel for the nav button',
+    },
+    actionButtons: {
+      value:
+        '[{renderIcon: Plus, onClick: () => alert("plus button click"), label: "Add another entry"}, {renderIcon: Check, onClick: () => alert("check button click"), label: "Approve entries"}]',
+      type: PropTypes.Array,
+      description:
+        'Determines the content (can be an icon or a string), onClick, and ariaLabel for the up to two additional buttons opposite the nav button.',
+    },
+    expanded: {
+      value: false,
+      type: PropTypes.Boolean,
+      description:
+        'Determines whether MobileHeader is expanded. Ignored when using the floating type.',
+      defaultValue: false,
+    },
+    overrides: {
+      value: undefined,
+      type: PropTypes.Custom,
+      description: 'Lets you customize all aspects of the component.',
+      custom: {
+        names: ['Root', 'Title', 'NavContainer', 'HeaderButton', 'ActionButtonsContainer'],
+        sharedProps: {},
+      },
+    },
+  },
+};
+
+export default MobileHeaderConfig;

documentation-site/examples/mobile-header/floating.js

@@ -0,0 +1,60 @@
+// @flow
+import * as React from 'react';
+
+import {MobileHeader, TYPE} from 'baseui/mobile-header';
+import ArrowLeft from 'baseui/icon/arrow-left';
+import Plus from 'baseui/icon/plus';
+import Check from 'baseui/icon/check';
+import map from './images/map-san-francisco.jpg';
+import {useStyletron} from 'baseui';
+
+export default function Example() {
+  const [css] = useStyletron();
+  return (
+    <div
+      className={css({
+        width: '375px',
+        height: '667px',
+        border: '1px solid #ECECEC',
+        borderRadius: '12px',
+        overflow: 'auto',
+        position: 'relative',
+      })}
+    >
+      <div
+        className={css({
+          width: '100%',
+          position: 'absolute',
+          pointerEvents: 'none',
+        })}
+      >
+        <MobileHeader
+          type={TYPE.floating}
+          navButton={{
+            renderIcon: ({size}) => <ArrowLeft size={size} />,
+            onClick: () => console.log('Nav Button Click'),
+            label: 'Go back',
+          }}
+          actionButtons={[
+            {
+              renderIcon: ({size}) => <Check size={size} />,
+              onClick: () => console.log('Check Button Click'),
+              label: 'Confirm entries',
+            },
+            {
+              renderIcon: ({size}) => <Plus size={size} />,
+              onClick: () => console.log('Plus Button Click'),
+              label: 'Add a new entry',
+            },
+          ]}
+        />
+      </div>
+      <div
+        style={{height: '100%', width: '100%', overflowY: 'auto'}}
+        tabIndex={0}
+      >
+        <img src={map} />
+      </div>
+    </div>
+  );
+}

documentation-site/examples/mobile-header/floating.tsx

@@ -0,0 +1,59 @@
+import * as React from 'react';
+
+import {MobileHeader, TYPE} from 'baseui/mobile-header';
+import ArrowLeft from 'baseui/icon/arrow-left';
+import Plus from 'baseui/icon/plus';
+import Check from 'baseui/icon/check';
+import map from './images/map-san-francisco.jpg';
+import {useStyletron} from 'baseui';
+
+export default function Example() {
+  const [css] = useStyletron();
+  return (
+    <div
+      className={css({
+        width: '375px',
+        height: '667px',
+        border: '1px solid #ECECEC',
+        borderRadius: '12px',
+        overflow: 'auto',
+        position: 'relative',
+      })}
+    >
+      <div
+        className={css({
+          width: '100%',
+          position: 'absolute',
+          pointerEvents: 'none',
+        })}
+      >
+        <MobileHeader
+          type={TYPE.floating}
+          navButton={{
+            renderIcon: ({size}) => <ArrowLeft size={size} />,
+            onClick: () => console.log('Nav Button Click'),
+            label: 'Go back',
+          }}
+          actionButtons={[
+            {
+              renderIcon: ({size}) => <Check size={size} />,
+              onClick: () => console.log('Check Button Click'),
+              label: 'Confirm entries',
+            },
+            {
+              renderIcon: ({size}) => <Plus size={size} />,
+              onClick: () => console.log('Plus Button Click'),
+              label: 'Add a new entry',
+            },
+          ]}
+        />
+      </div>
+      <div
+        style={{height: '100%', width: '100%', overflowY: 'auto'}}
+        tabIndex={0}
+      >
+        <img src={map} />
+      </div>
+    </div>
+  );
+}

documentation-site/examples/mobile-header/text-content.js

@@ -0,0 +1,101 @@
+// @flow
+import * as React from 'react';
+
+import {MobileHeader} from 'baseui/mobile-header';
+import {Button} from 'baseui/button';
+import {useStyletron} from 'baseui';
+
+export default function Example() {
+  const [expanded, setExpanded] = React.useState(true);
+  const [css] = useStyletron();
+  return (
+    <div>
+      <div style={{marginBottom: '20px'}}>
+        <Button onClick={() => setExpanded(!expanded)}>
+          {expanded ? 'Collapse' : 'Expand'}
+        </Button>
+      </div>
+
+      <div
+        className={css({
+          width: '375px',
+          height: '667px',
+          border: '1px solid #ECECEC',
+          borderRadius: '12px',
+          overflow: 'auto',
+        })}
+      >
+        <MobileHeader
+          title="Header title"
+          expanded={expanded}
+          navButton={{
+            onClick: () => console.log('Nav Button Click'),
+            label: 'Back',
+          }}
+          actionButtons={[
+            {
+              onClick: () => console.log('Check Button Click'),
+              label: 'Action',
+            },
+          ]}
+        />
+        <div
+          style={{
+            padding: '12px',
+            height: '100%',
+            overflow: 'auto',
+          }}
+          tabIndex={0}
+        >
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+            sed do eiusmod tempor incididunt ut labore et dolore
+            magna aliqua. Ut enim ad minim veniam, quis nostrud
+            exercitation ullamco laboris nisi ut aliquip ex ea
+            commodo consequat. Duis aute irure dolor in
+            reprehenderit in voluptate velit esse cillum dolore eu
+            fugiat nulla pariatur. Excepteur sint occaecat cupidatat
+            non proident, sunt in culpa qui officia deserunt mollit
+            anim id est laborum.
+          </p>
+
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+            sed do eiusmod tempor incididunt ut labore et dolore
+            magna aliqua. Ut enim ad minim veniam, quis nostrud
+            exercitation ullamco laboris nisi ut aliquip ex ea
+            commodo consequat. Duis aute irure dolor in
+            reprehenderit in voluptate velit esse cillum dolore eu
+            fugiat nulla pariatur. Excepteur sint occaecat cupidatat
+            non proident, sunt in culpa qui officia deserunt mollit
+            anim id est laborum.
+          </p>
+
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+            sed do eiusmod tempor incididunt ut labore et dolore
+            magna aliqua. Ut enim ad minim veniam, quis nostrud
+            exercitation ullamco laboris nisi ut aliquip ex ea
+            commodo consequat. Duis aute irure dolor in
+            reprehenderit in voluptate velit esse cillum dolore eu
+            fugiat nulla pariatur. Excepteur sint occaecat cupidatat
+            non proident, sunt in culpa qui officia deserunt mollit
+            anim id est laborum.
+          </p>
+
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+            sed do eiusmod tempor incididunt ut labore et dolore
+            magna aliqua. Ut enim ad minim veniam, quis nostrud
+            exercitation ullamco laboris nisi ut aliquip ex ea
+            commodo consequat. Duis aute irure dolor in
+            reprehenderit in voluptate velit esse cillum dolore eu
+            fugiat nulla pariatur. Excepteur sint occaecat cupidatat
+            non proident, sunt in culpa qui officia deserunt mollit
+            anim id est laborum.
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}