Sticker-sheet - Adds tabs to break up content sections

sandbox/grommet-app/src/components/ContentPane/index.jsx

@@ -55,10 +55,4 @@ ContentPane.propTypes = {
   ]),
 };
 
-ContentPane.defaultProps = {
-  actions: undefined,
-  contain: undefined,
-  skeleton: undefined,
-};
-
 export default ContentPane;

sandbox/grommet-app/src/pages/sticker-sheet/components/Compare.jsx

@@ -0,0 +1,69 @@
+import React, { useContext } from 'react';
+import PropTypes from 'prop-types';
+import { Box, Grommet, Stack, ThemeContext } from 'grommet';
+import { hpe } from 'grommet-theme-hpe';
+import { current as hpeCurrent } from '../../../themes/theme';
+import { ModeContext } from './ModeContext';
+
+export const Compare = ({ children, ...rest }) => {
+  const { mode, direction } = React.useContext(ModeContext);
+  const theme = useContext(ThemeContext);
+
+  if (direction === 'row') {
+    return (
+      <Box direction="row" gap="medium">
+        <Grommet
+          theme={hpe}
+          themeMode={theme.dark ? 'dark' : 'light'}
+          background="background-front"
+        >
+          <Box align="start">{children}</Box>
+        </Grommet>
+        <Grommet
+          theme={hpeCurrent}
+          themeMode={theme.dark ? 'dark' : 'light'}
+          background="background-front"
+        >
+          <Box align="start">{children}</Box>
+        </Grommet>
+      </Box>
+    );
+  }
+
+  return (
+    <Stack {...rest}>
+      <ThemeContext.Extend value={hpe}>
+        <Box
+          align="start"
+          style={
+            // eslint-disable-next-line no-nested-ternary
+            mode === 'Compare diffs'
+              ? { opacity: 0.5, filter: 'invert(1)', color: 'green' }
+              : mode === 'next'
+              ? { visibility: 'hidden' }
+              : {}
+          }
+        >
+          {children}
+        </Box>
+      </ThemeContext.Extend>
+
+      <ThemeContext.Extend value={hpeCurrent}>
+        <Box
+          align="start"
+          style={mode === 'v5' ? { visibility: 'hidden' } : {}}
+        >
+          {children}
+        </Box>
+      </ThemeContext.Extend>
+    </Stack>
+  );
+};
+
+Compare.propTypes = {
+  children: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.array,
+    PropTypes.element,
+  ]),
+};

sandbox/grommet-app/src/pages/sticker-sheet/components/ModeContext.jsx

@@ -0,0 +1,3 @@
+import React from 'react';
+
+export const ModeContext = React.createContext({});

sandbox/grommet-app/src/pages/sticker-sheet/components/StyleInProgress.jsx

@@ -0,0 +1,9 @@
+import { Notification } from 'grommet';
+
+export const StyleInProgress = () => (
+  <Notification
+    status="warning"
+    message="This component style is still being refined."
+    margin={{ bottom: 'medium' }}
+  />
+);

sandbox/grommet-app/src/pages/sticker-sheet/components/TabContent.jsx

@@ -0,0 +1,14 @@
+import PropTypes from 'prop-types';
+import { Box } from 'grommet';
+
+export const TabContent = ({ children }) => {
+  return (
+    <Box gap="medium" pad={{ vertical: 'small' }} align="start">
+      {children}
+    </Box>
+  );
+};
+
+TabContent.propTypes = {
+  children: PropTypes.node.isRequired,
+};

sandbox/grommet-app/src/pages/sticker-sheet/components/index.js

@@ -0,0 +1,4 @@
+export * from './Compare';
+export * from './ModeContext';
+export * from './StyleInProgress';
+export * from './TabContent';

sandbox/grommet-app/src/pages/sticker-sheet/content/Controls/Accordions.jsx

@@ -0,0 +1,16 @@
+import { Accordion, AccordionPanel } from 'grommet';
+import { Compare } from '../../components';
+import ContentPane from '../../../../components/ContentPane';
+
+export const Accordions = () => {
+  return (
+    <ContentPane>
+      <Compare guidingChild="last">
+        <Accordion>
+          <AccordionPanel label="Panel 1">hi</AccordionPanel>
+          <AccordionPanel label="Panel 2">hi</AccordionPanel>
+        </Accordion>
+      </Compare>
+    </ContentPane>
+  );
+};

sandbox/grommet-app/src/pages/sticker-sheet/content/Controls/Buttons.jsx

@@ -0,0 +1,46 @@
+import { Box, Button } from 'grommet';
+import { User } from 'grommet-icons';
+import ContentPane from '../../../../components/ContentPane';
+import { Compare } from '../../components/Compare';
+
+const kinds = ['default', 'toolbar', 'secondary', 'primary'];
+const states = ['enabled', 'active', 'disabled'];
+const sizes = ['xsmall', 'small', 'medium', 'large', 'xlarge'];
+
+export const Buttons = () => {
+  return (
+    <ContentPane>
+      <Box gap="small">
+        {kinds.map(kind =>
+          sizes.map(size =>
+            states.map(state => (
+              <Compare key={`${kind}${size}${state}`}>
+                <Button
+                  label={`${kind} ${size} ${state}`}
+                  size={size}
+                  kind={kind}
+                  active={state === 'active'}
+                  disabled={state === 'disabled'}
+                />
+              </Compare>
+            )),
+          ),
+        )}
+      </Box>
+      <Box gap="small">
+        <Compare>
+          <Button secondary icon={<User />} size="small" />
+        </Compare>
+        <Compare>
+          <Button secondary icon={<User />} />
+        </Compare>
+        <Compare>
+          <Button secondary icon={<User />} size="large" />
+        </Compare>
+        <Compare>
+          <Button secondary icon={<User />} size="xlarge" />
+        </Compare>
+      </Box>
+    </ContentPane>
+  );
+};

sandbox/grommet-app/src/pages/sticker-sheet/content/Controls/Menus.jsx

@@ -0,0 +1,29 @@
+import { Menu } from 'grommet';
+import ContentPane from '../../../../components/ContentPane';
+import { Compare } from '../../components/Compare';
+
+export const Menus = () => {
+  return (
+    <ContentPane>
+      <Compare>
+        <Menu
+          label="Menu"
+          items={[
+            [{ label: 'Item 1' }, { label: 'Item 2' }],
+            [{ label: 'Delete' }],
+          ]}
+        />
+      </Compare>
+      <Compare>
+        <Menu
+          label="Menu"
+          kind="toolbar"
+          items={[
+            [{ label: 'Item 1' }, { label: 'Item 2' }],
+            [{ label: 'Delete' }],
+          ]}
+        />
+      </Compare>
+    </ContentPane>
+  );
+};

sandbox/grommet-app/src/pages/sticker-sheet/content/Controls/Paginations.jsx

@@ -0,0 +1,16 @@
+import { Pagination } from 'grommet';
+import { Compare } from '../../components/Compare';
+import ContentPane from '../../../../components/ContentPane';
+
+export const Paginations = () => {
+  return (
+    <ContentPane>
+      <Compare>
+        <Pagination numberItems={100} size="small" />
+      </Compare>
+      <Compare>
+        <Pagination numberItems={100} />
+      </Compare>
+    </ContentPane>
+  );
+};

sandbox/grommet-app/src/pages/sticker-sheet/content/Controls/Tabs.jsx

@@ -0,0 +1,20 @@
+import { Tab, Tabs } from 'grommet';
+import { Compare } from '../../components';
+import ContentPane from '../../../../components/ContentPane';
+
+const TabsCompare = () => {
+  return (
+    <ContentPane>
+      <Compare>
+        <Tabs>
+          <Tab title="Tab 1" active />
+          <Tab title="Tab 2" />
+          <Tab title="Tab 3 (disabled)" disabled />
+          <Tab title="Tab 4" />
+        </Tabs>
+      </Compare>
+    </ContentPane>
+  );
+};
+
+export { TabsCompare as Tabs };

sandbox/grommet-app/src/pages/sticker-sheet/content/Controls/ToggleGroups.jsx

@@ -0,0 +1,36 @@
+import { Box, ToggleGroup } from 'grommet';
+import { List, MapLocation, Table } from 'grommet-icons';
+import ContentPane from '../../../../components/ContentPane';
+import { Compare } from '../../components/Compare';
+
+export const ToggleGroups = () => {
+  return (
+    <ContentPane>
+      <Box gap="small">
+        <Compare>
+          <ToggleGroup
+            a11yTitle="Choose view"
+            options={[
+              {
+                icon: <List a11yTitle="List view" />,
+                value: 'list',
+                tip: 'List',
+              },
+              {
+                icon: <Table a11yTitle="Map view" />,
+                value: 'table',
+                tip: 'Table',
+              },
+              {
+                icon: <MapLocation a11yTitle="Map view" />,
+                value: 'map',
+                tip: 'Map',
+              },
+            ]}
+            defaultValue="list"
+          />
+        </Compare>
+      </Box>
+    </ContentPane>
+  );
+};

sandbox/grommet-app/src/pages/sticker-sheet/content/Controls/index.js

@@ -0,0 +1,6 @@
+export * from './Accordions';
+export * from './Buttons';
+export * from './Menus';
+export * from './Paginations';
+export * from './Tabs';
+export * from './ToggleGroups';

sandbox/grommet-app/src/pages/sticker-sheet/content/Inputs/CheckboxGroups.jsx

@@ -0,0 +1,28 @@
+import { CheckBoxGroup, FormField } from 'grommet';
+import ContentPane from '../../../../components/ContentPane';
+import { Compare } from '../../components';
+
+export const CheckboxGroups = () => {
+  return (
+    <ContentPane>
+      <Compare guidingChild="last">
+        <CheckBoxGroup
+          options={[
+            { label: 'Option 1' },
+            { label: 'Option 2' },
+            { label: 'Option 3', disabled: true },
+          ]}
+          value={['Option 2']}
+        />
+      </Compare>
+      <Compare>
+        <FormField label="Label">
+          <CheckBoxGroup
+            options={['Option 1', 'Option 2', 'Option 3']}
+            value={['Option 2']}
+          />
+        </FormField>
+      </Compare>
+    </ContentPane>
+  );
+};

sandbox/grommet-app/src/pages/sticker-sheet/content/Inputs/Checkboxes.jsx

@@ -0,0 +1,23 @@
+import { CheckBox, FormField } from 'grommet';
+import ContentPane from '../../../../components/ContentPane';
+import { Compare } from '../../components';
+
+export const Checkboxes = () => {
+  return (
+    <ContentPane>
+      <Compare>
+        <CheckBox label="Checkbox label" />
+      </Compare>
+      <Compare guidingChild="last">
+        <FormField label="Label">
+          <CheckBox label="Checkbox label" />
+        </FormField>
+      </Compare>
+      <Compare guidingChild="last">
+        <FormField label="Label" error="There is an error.">
+          <CheckBox label="Checkbox label" />
+        </FormField>
+      </Compare>
+    </ContentPane>
+  );
+};

sandbox/grommet-app/src/pages/sticker-sheet/content/Inputs/DateInputs.jsx

@@ -0,0 +1,20 @@
+import { DateInput } from 'grommet';
+import ContentPane from '../../../../components/ContentPane';
+import { Compare } from '../../components';
+
+export const DateInputs = () => {
+  return (
+    <ContentPane>
+      <Compare>
+        <DateInput
+          format="mm/dd/yyyy-mm/dd/yyyy"
+          inline
+          value={[
+            new Date().toISOString(),
+            new Date(+new Date() + 86400000 * 9).toISOString(),
+          ]}
+        />
+      </Compare>
+    </ContentPane>
+  );
+};

sandbox/grommet-app/src/pages/sticker-sheet/content/Inputs/FileInputs.jsx

@@ -0,0 +1,13 @@
+import { FileInput } from 'grommet';
+import ContentPane from '../../../../components/ContentPane';
+import { Compare } from '../../components';
+
+export const FileInputs = () => {
+  return (
+    <ContentPane>
+      <Compare>
+        <FileInput />
+      </Compare>
+    </ContentPane>
+  );
+};