ui v2: horizontal rule

frontend/packages/core/src/Resolver/index.tsx

@@ -7,6 +7,7 @@ import styled from "styled-components";
 import { Button } from "../button";
 import { useWizardContext } from "../Contexts";
 import { CompressedError, Error } from "../error";
+import { HorizontalRule } from "../horizontal-rule";
 import Loadable from "../loading";
 
 import { fetchResourceSchemas, resolveResource } from "./fetch";
@@ -15,10 +16,6 @@ import { QueryResolver, SchemaResolver } from "./input";
 import type { DispatchAction } from "./state";
 import { ResolverAction, useResolverState } from "./state";
 
-const Spacer = styled.div`
-  margin: 10px;
-`;
-
 const Form = styled.form`
   align-items: center;
   display: flex;
@@ -130,11 +127,7 @@ const Resolver: React.FC<ResolverProps> = ({ type, searchLimit, onResolve, varia
               />
             </Form>
           )}
-          {variant === "dual" && (
-            <>
-              <Spacer />- OR -
-            </>
-          )}
+          {variant === "dual" && <HorizontalRule>OR</HorizontalRule>}
           {(variant === "dual" || variant === "schema") && (
             <Form onSubmit={validation.handleSubmit(submitHandler)} noValidate>
               <SchemaResolver

frontend/packages/core/src/horizontal-rule.tsx

@@ -0,0 +1,49 @@
+import * as React from "react";
+import styled from "@emotion/styled";
+
+const HorizontalRuleBase = ({ children, ...props }: HorizontalRuleProps) => (
+  <div {...props}>
+    <div className="line">
+      <span />
+    </div>
+    {React.Children.count(children) > 0 && <div className="content">{children}</div>}
+    <div className="line">
+      <span />
+    </div>
+  </div>
+);
+
+export type HorizontalRuleProps = {
+  children: React.ReactNode;
+};
+
+const StyledHorizontalRule = styled(HorizontalRuleBase)({
+  alignItems: "center",
+  display: "flex",
+  flexDirection: "row",
+  width: "100%",
+
+  ".line": {
+    flex: "1 1 auto",
+  },
+
+  ".line > span": {
+    display: "block",
+    borderTop: "1px solid rgba(13, 16, 48, 0.12)",
+  },
+
+  ".content": {
+    padding: "0 30px",
+    fontWeight: "bold",
+    color: "rgba(13, 16, 48, 0.38)",
+    textTransform: "uppercase",
+    display: "inline-flex",
+    alignItems: "center",
+  },
+});
+
+export const HorizontalRule = ({ children }: HorizontalRuleProps) => (
+  <StyledHorizontalRule>{children}</StyledHorizontalRule>
+);
+
+export default HorizontalRule;

frontend/packages/core/src/stories/horizontal-rule.stories.tsx

@@ -0,0 +1,31 @@
+import * as React from "react";
+import ErrorIcon from "@material-ui/icons/Error";
+import type { Meta } from "@storybook/react";
+
+import type { HorizontalRuleProps } from "../horizontal-rule";
+import { HorizontalRule } from "../horizontal-rule";
+
+export default {
+  title: "Core/HorizontalRule",
+  component: HorizontalRule,
+} as Meta;
+
+const Template = (props: HorizontalRuleProps) => <HorizontalRule {...props} />;
+
+export const Basic = Template.bind({});
+Basic.args = {
+  children: "OR",
+};
+
+export const WithIcon = Template.bind({});
+WithIcon.args = {
+  children: (
+    <>
+      <ErrorIcon />
+      &nbsp;Proceed with caution
+    </>
+  ),
+};
+
+export const WithoutText = Template.bind({});
+WithoutText.args = {};