feat: view

src/card/styles.ts

@@ -4,10 +4,10 @@ import theme from '../theme';
 export const cardCSS = css`
   display: flex;
   flex-direction: column;
-  background-color: ${theme.components.card.backgroundColor};
+  background-color: var(--ac-global-background-color-dark);
   color: ${theme.textColors.white90};
-  border-radius: 8px;
-  border: 1px solid ${theme.components.card.borderColor};
+  border-radius: var(--ac-global-rounding-medium);
+  border: 1px solid var(--ac-global-border-color-dark);
   overflow: hidden;
   /* variant variables */
   &.ac-card--default {
@@ -19,7 +19,7 @@ export const cardCSS = css`
 `;
 
 const headerBorderCSS = css`
-  border-bottom: 1px solid ${theme.components.card.borderColor};
+  border-bottom: 1px solid var(--ac-global-border-color-dark);
 `;
 
 export const headerCSS = ({

src/provider/GlobalStyles.tsx

@@ -60,6 +60,26 @@ export const globalCSS = css`
     --ac-global-dimension-static-grid-columns: 12;
     --ac-global-dimension-static-grid-fluid-width: 100%;
     --ac-global-dimension-static-grid-fixed-max-width: 1280px;
+
+    /* Colors */
+    --ac-global-color-gray-900: #181b1f;
+    --ac-global-color-gray-800: #1d2126;
+    --ac-global-color-gray-700: #23282e;
+    --ac-global-color-gray-600: #282e35;
+    --ac-global-color-gray-500: #2f353d;
+    --ac-global-color-gray-400: #3d434a;
+    --ac-global-color-gray-300: #4a5057;
+    --ac-global-color-gray-200: #585d64;
+    --ac-global-color-gray-100: #666b71;
+
+    --ac-global-background-color-light: var(--ac-global-color-gray-500);
+    --ac-global-background-color-dark: var(--ac-global-color-gray-900);
+
+    --ac-global-border-color-light: var(--ac-global-color-gray-100);
+    --ac-global-border-color-dark: var(--ac-global-color-gray-400);
+
+    --ac-global-rounding-small: var(--ac-global-dimension-static-size-50);
+    --ac-global-rounding-medium: var(--ac-global-dimension-static-size-100);
   }
 `;
 

src/types/core.ts

@@ -86,4 +86,13 @@ export type DimensionValue =
   | 'single-line-height'
   | 'single-line-width'
   | number
-  | string;
+  // This allows autocomplete to work properly and not collapse the above options into just `string`.
+  // https://github.com/microsoft/TypeScript/issues/29729.
+  | (string & {});
+
+
+export type BorderRadiusValue = 'small' | 'medium';
+
+export type BorderColorValue = 'light' | 'dark';
+
+export type BackgroundColorValue = 'light' | 'dark';

src/view/View.tsx

@@ -0,0 +1,80 @@
+import React, { JSXElementConstructor, ReactNode, forwardRef } from 'react';
+import { css } from '@emotion/react';
+import {
+  BackgroundColorValue,
+  BorderColorValue,
+  BorderRadiusValue,
+  DOMRef,
+  DimensionValue,
+} from '../types';
+import { useDOMRef } from '../utils';
+import { dimensionValue } from '../utils/styleProps';
+
+export interface ViewProps {
+  /**
+   * The children to be displayed in the View.
+   */
+  children?: ReactNode;
+  /**
+   * The element to render as the node.
+   * @default 'div'
+   */
+  elementType?: string | JSXElementConstructor<any>;
+  padding?: Extract<
+    DimensionValue,
+    'static-size-50' | 'static-size-100' | 'static-size-200'
+  >;
+  borderRadius?: BorderRadiusValue;
+  borderColor?: BorderColorValue;
+  backgroundColor?: BackgroundColorValue;
+  width?: DimensionValue;
+  height?: DimensionValue;
+  id?: string;
+}
+
+function View(props: ViewProps, ref: DOMRef) {
+  const {
+    children,
+    elementType: ElementType = 'div',
+    padding,
+    borderRadius,
+    borderColor,
+    backgroundColor,
+    width,
+    height,
+    id,
+  } = props;
+  const domRef = useDOMRef(ref);
+  return (
+    <ElementType
+      ref={domRef}
+      css={css`
+        overflow: hidden;
+        padding: ${padding != null ? dimensionValue(padding) : 0};
+        border: 1px solid
+          ${borderColor != null
+            ? `var(--ac-global-border-color-${borderColor})`
+            : 'transparent'};
+        background-color: ${backgroundColor != null
+          ? `var(--ac-global-background-color-${backgroundColor})`
+          : 'transparent'};
+        border-radius: ${borderRadius != null
+          ? `var(--ac-global-rounding-${borderRadius})`
+          : 0};
+        width: ${width != null ? dimensionValue(width) : 'auto'};
+        height: ${height != null ? dimensionValue(height) : 'auto'};
+      `}
+      className="ac-view"
+      id={id}
+    >
+      {children}
+    </ElementType>
+  );
+}
+
+/**
+ * View is a general purpose container with no specific semantics
+ * that can be used for custom styling purposes, similar to a div.
+ */
+const _View = forwardRef(View);
+export { _View as View };

src/view/index.tsx

@@ -1 +1,2 @@
 export * from './Content';
+export * from './View';

stories/Card.stories.tsx

@@ -6,7 +6,7 @@ import { Card, CardProps, TabbedCard } from '../src/card';
 import { Tabs } from '../src/tabs';
 import { Button } from '../src/button';
 import InfoTip from './components/InfoTip';
-import { Heading } from '../src';
+import { Heading, Provider } from '../src';
 
 const { TabPane } = Tabs;
 
@@ -185,28 +185,32 @@ const GalleryCards = (props: { variant: CardProps['variant'] }) => {
 
 export const Gallery = () => {
   return (
-    <div>
-      <section>
-        <Heading>Default variant</Heading>
-        <GalleryCards variant="default" />
-      </section>
-      <section>
-        <Heading>Compact variant</Heading>
-        <GalleryCards variant="compact" />
-      </section>
-    </div>
+    <Provider>
+      <div>
+        <section>
+          <Heading>Default variant</Heading>
+          <GalleryCards variant="default" />
+        </section>
+        <section>
+          <Heading>Compact variant</Heading>
+          <GalleryCards variant="compact" />
+        </section>
+      </div>
+    </Provider>
   );
 };
 
 const Template: Story<CardProps> = args => (
-  <Card
-    title="Title"
-    subTitle="Subtext area"
-    style={{ width: 400, height: 200 }}
-    {...args}
-  >
-    Content goes here
-  </Card>
+  <Provider>
+    <Card
+      title="Title"
+      subTitle="Subtext area"
+      style={{ width: 400, height: 200 }}
+      {...args}
+    >
+      Content goes here
+    </Card>
+  </Provider>
 );
 
 // By passing using the Args format for exported stories, you can control the props for a component for reuse in a test

stories/Gallery.stories.tsx

@@ -14,8 +14,11 @@ import {
   RadioGroup,
   Radio,
   ButtonToolbar,
+  View,
+  Heading,
+  ButtonGroup,
 } from '../src';
-import { Icon, SearchOutline } from '../src/icon';
+import { Icon, Icons, SearchOutline } from '../src/icon';
 // @ts-ignore
 import chartFile from './images/chart.png';
 
@@ -39,13 +42,14 @@ const Template: Story = args => {
     <Provider>
       <div
         css={css`
-          .ac-card + .ac-card {
-            margin-top: 16px;
-          }
+          display: flex;
+          flex-direction: column;
+          gap: 8px;
         `}
       >
         <Card
           title="Prediction Volume"
+          variant="compact"
           bodyStyle={{ padding: 0 }}
           extra={
             <div
@@ -109,7 +113,7 @@ const Template: Story = args => {
             />
           </div>
         </Card>
-        <Card title="Example Form">
+        <Card title="Example Form" variant="compact">
           <div
             css={css`
               display: flex;
@@ -154,6 +158,52 @@ const Template: Story = args => {
             <Button variant="primary">Submit</Button>
           </div>
         </Card>
+        <View
+          backgroundColor="dark"
+          padding="static-size-200"
+          borderRadius="medium"
+          borderColor="dark"
+        >
+          <div
+            css={css`
+              display: flex;
+              flex-direction: row;
+              justify-content: space-between;
+              align-items: center;
+            `}
+          >
+            <Heading level={3}>Drift Over Time</Heading>
+            <ButtonGroup aria-label="zoom control">
+              <Button
+                variant="default"
+                icon={<Icon svg={<Icons.ArrowIosBackOutline />} />}
+                size="compact"
+              />
+              <Button
+                variant="default"
+                icon={<Icon svg={<Icons.PlusCircleOutline />} />}
+                size="compact"
+              />
+              <Button
+                variant="default"
+                icon={<Icon svg={<Icons.PlusCircleOutline />} />}
+                size="compact"
+              />
+              <Button
+                variant="default"
+                icon={<Icon svg={<Icons.ArrowIosForwardOutline />} />}
+                size="compact"
+              />
+            </ButtonGroup>
+          </div>
+          <img
+            src={chartFile}
+            alt="chart image"
+            css={css`
+              margin: 24px;
+            `}
+          />
+        </View>
         {holder}
       </div>
     </Provider>