Merge pull request #1017 from chrisolsen/1134-detail

feat(DDI-1134): add details component

apps/angular-demo/src/app/app-routing.module.ts

@@ -12,6 +12,7 @@ import { CheckboxComponent } from "./checkbox/checkbox.component";
 import { ChipComponent } from "./chip/chip.component";
 import { CircularProgressComponent } from "./circular-progress/circular-progress.component";
 import { ContainerComponent } from "./container/container.component";
+import { DetailComponent } from "./detail/detail";
 import { DropdownComponent } from "./dropdown/dropdown.component";
 import { FormItemComponent } from "./form-item/form-item.component";
 import { GridComponent } from "./grid/grid";
@@ -41,6 +42,7 @@ const routes: Routes = [
   { path: "chip", component: ChipComponent },
   { path: "circular-progress", component: CircularProgressComponent },
   { path: "container", component: ContainerComponent },
+  { path: "detail", component: DetailComponent },
   { path: "dropdown", component: DropdownComponent },
   { path: "form-item", component: FormItemComponent },
   { path: "grid", component: GridComponent },

apps/angular-demo/src/app/app.component.html

@@ -22,6 +22,7 @@
       path="/circular-progress"
     ></abgov-nav-link>
     <abgov-nav-link label="Container" path="/container"></abgov-nav-link>
+    <abgov-nav-link label="Details" path="/detail"></abgov-nav-link>
     <abgov-nav-link label="Dropdown" path="/dropdown"></abgov-nav-link>
     <abgov-nav-link label="Form Item" path="/form-item"></abgov-nav-link>
     <abgov-nav-link label="Grid" path="/grid"></abgov-nav-link>

apps/angular-demo/src/app/app.module.ts

@@ -22,6 +22,7 @@ import { CheckboxComponent } from "./checkbox/checkbox.component";
 import { ChipComponent } from "./chip/chip.component";
 import { CircularProgressComponent } from "./circular-progress/circular-progress.component";
 import { ContainerComponent } from "./container/container.component";
+import { DetailComponent } from "./detail/detail";
 import { DropdownComponent } from "./dropdown/dropdown.component";
 import { FormItemComponent } from "./form-item/form-item.component";
 import { GridComponent } from "./grid/grid";
@@ -54,6 +55,7 @@ import { TwoColumnLayoutComponent } from "./two-column-layout/two-column-layout.
     ChipComponent,
     CircularProgressComponent,
     ContainerComponent,
+    DetailComponent,
     DropdownComponent,
     FormItemComponent,
     GridComponent,

apps/angular-demo/src/app/detail/detail.html

@@ -0,0 +1,30 @@
+<h2>Detail</h2>
+
+<goa-details
+  heading="This is the titleThis is the titleThis is the titleThis is the titleThis is the titleThis is the titleThis is the titleThis is the title"
+>
+  <p>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vel lacinia
+    metus, sed sodales lectus. Aliquam sed volutpat velit. Sed in lacus ut dui
+    placerat accumsan malesuada quis erat. Aenean mi diam, rhoncus vitae justo
+    eu, venenatis maximus nunc. In vel est commodo, porttitor sem vel, tincidunt
+    ipsum. In hac habitasse platea dictumst. Mauris varius mollis dui. Aenean ut
+    dui eu arcu rutrum auctor. Curabitur cursus velit vel libero sollicitudin
+    tincidunt. Proin tincidunt, enim et ultrices rhoncus, nibh leo imperdiet
+    sapien, sed porttitor ipsum nulla non massa. Nulla facilisi.
+  </p>
+</goa-details>
+
+<goa-details heading="This is the title">
+  <p>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vel lacinia
+    metus, sed sodales lectus. Aliquam sed volutpat velit. Sed in lacus ut dui
+    placerat accumsan malesuada quis erat. Aenean mi diam, rhoncus vitae justo
+    eu, venenatis maximus nunc. In vel est commodo, porttitor sem vel, tincidunt
+    ipsum. In hac habitasse platea dictumst. Mauris varius mollis dui. Aenean ut
+    dui eu arcu rutrum auctor. Curabitur cursus velit vel libero sollicitudin
+    tincidunt. Proin tincidunt, enim et ultrices rhoncus, nibh leo imperdiet
+    sapien, sed porttitor ipsum nulla non massa. Nulla facilisi.
+  </p>
+  <img src="https://picsum.photos/200" />
+</goa-details>

apps/angular-demo/src/app/detail/detail.ts

@@ -0,0 +1,9 @@
+import { Component } from "@angular/core";
+
+@Component({
+  selector: "abgov-detail",
+  templateUrl: "./detail.html",
+})
+export class DetailComponent {
+  constructor() {}
+}

libs/docs/src/components/common/Details.stories.mdx

@@ -0,0 +1,111 @@
+import { Meta, Story } from "@storybook/addon-docs";
+import {
+  Props,
+  Prop,
+  Tabs,
+  Tab,
+  CodeSnippet,
+  SupportInfo,
+  Markdown,
+} from "@abgov/shared/storybook-common";
+import { GoADetails } from "@abgov/react-components";
+
+<Meta title="Components/Details" />
+
+# Details
+
+### Details lets users reveal more detailed information when they need it.
+
+[Figma design component](https://www.figma.com/file/MwuK2yVZZQMN2Nbk9NYSQ7/Component---Accordion-%2B-Detail?node-id=1494%3A268005&t=stVkhUjzWnPvtUOk-0)
+
+---
+
+#### Properties
+
+<Props showTabs={true}>
+  <Prop
+    name="heading"
+    type="string"
+    description="The title heading"
+    required="true"
+  />
+</Props>
+
+<details>
+  <summary>Additional Properties</summary>
+  <Props showTabs={true}>
+    <Prop
+      name="mt"
+      type="none | 3xs | 2xs | xs | s | m | l | xl | 2xl | 3xl | 4xl"
+      defaultValue="none"
+      description="Top margin"
+    />
+    <Prop
+      name="mr"
+      type="none | 3xs | 2xs | xs | s | m | l | xl | 2xl | 3xl | 4xl"
+      defaultValue="none"
+      description="Right margin"
+    />
+    <Prop
+      name="mb"
+      type="none | 3xs | 2xs | xs | s | m | l | xl | 2xl | 3xl | 4xl"
+      defaultValue="none"
+      description="Bottom margin"
+    />
+    <Prop
+      name="ml"
+      type="none | 3xs | 2xs | xs | s | m | l | xl | 2xl | 3xl | 4xl"
+      defaultValue="none"
+      description="Left margin"
+    />
+  </Props>
+</details>
+
+#### Basic
+
+<Story name="Basic">
+  <GoADetails heading="This is the title">
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vel lacinia
+      metus, sed sodales lectus. Aliquam sed volutpat velit. Sed in lacus ut dui
+      placerat accumsan malesuada quis erat. Aenean mi diam, rhoncus vitae justo
+      eu, venenatis maximus nunc. In vel est commodo, porttitor sem vel,
+      tincidunt ipsum. In hac habitasse platea dictumst. Mauris varius mollis
+      dui. Aenean ut dui eu arcu rutrum auctor. Curabitur cursus velit vel
+      libero sollicitudin tincidunt. Proin tincidunt, enim et ultrices rhoncus,
+      nibh leo imperdiet sapien, sed porttitor ipsum nulla non massa. Nulla
+      facilisi.
+    </p>
+  </GoADetails>
+</Story>
+
+<Tabs>
+  <Tab label="Angular">
+    <CodeSnippet
+      lang="html"
+      code={`
+      <goa-details heading="This is the title">
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vel lacinia metus, sed sodales lectus. Aliquam sed volutpat velit. Sed in lacus ut dui placerat accumsan malesuada quis erat. Aenean mi diam, rhoncus vitae justo eu, venenatis maximus nunc. In vel est commodo, porttitor sem vel, tincidunt ipsum. In hac habitasse platea dictumst. Mauris varius mollis dui. Aenean ut dui eu arcu rutrum auctor. Curabitur cursus velit vel libero sollicitudin tincidunt. Proin tincidunt, enim et ultrices rhoncus, nibh leo imperdiet sapien, sed porttitor ipsum nulla non massa. Nulla facilisi. 
+        </p>
+      </goa-details>
+    `}
+    />
+  </Tab>
+  <Tab label="React">
+    <CodeSnippet
+      lang="tsx"
+      code={`
+      <GoADetails heading="This is the title">
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vel lacinia metus, sed sodales lectus. Aliquam sed volutpat velit. Sed in lacus ut dui placerat accumsan malesuada quis erat. Aenean mi diam, rhoncus vitae justo eu, venenatis maximus nunc. In vel est commodo, porttitor sem vel, tincidunt ipsum. In hac habitasse platea dictumst. Mauris varius mollis dui. Aenean ut dui eu arcu rutrum auctor. Curabitur cursus velit vel libero sollicitudin tincidunt. Proin tincidunt, enim et ultrices rhoncus, nibh leo imperdiet sapien, sed porttitor ipsum nulla non massa. Nulla facilisi. 
+        </p>
+      </GoADetails>
+    `}
+    />
+  </Tab>
+</Tabs>
+
+---
+
+<SupportInfo />

libs/react-components/src/index.ts

@@ -16,6 +16,7 @@ export * from "./lib/checkbox/checkbox";
 export * from "./lib/chip/chip";
 export * from "./lib/circular-progress/circular-progress";
 export * from "./lib/container/container";
+export * from "./lib/details/details";
 export * from "./lib/divider/divider";
 export * from "./lib/dropdown/dropdown";
 export * from "./lib/dropdown/dropdown-item";

libs/react-components/src/lib/details/details.spec.tsx

@@ -0,0 +1,15 @@
+import { render } from "@testing-library/react";
+
+import { GoADetails } from "./details";
+
+describe("Detail", () => {
+  it("should render successfully", () => {
+    const { baseElement } = render(
+      <GoADetails heading="The heading">The content</GoADetails>
+    );
+
+    const el = baseElement.querySelector("goa-details");
+    expect(el.getAttribute("heading")).toBe("The heading");
+    expect(baseElement.innerHTML).toContain("The content");
+  });
+});

libs/react-components/src/lib/details/details.tsx

@@ -0,0 +1,38 @@
+import React, { ReactNode } from "react";
+import { Margins } from "../../common/styling";
+
+interface WCProps extends Margins {
+  heading: string;
+}
+
+declare global {
+  // eslint-disable-next-line @typescript-eslint/no-namespace
+  namespace JSX {
+    // eslint-disable-next-line @typescript-eslint/no-empty-interface
+    interface IntrinsicElements {
+      "goa-details": WCProps & React.HTMLAttributes<HTMLElement>;
+    }
+  }
+}
+
+/* eslint-disable-next-line */
+export interface DetailsProps extends Margins {
+  heading: string;
+  children: ReactNode;
+}
+
+export function GoADetails(props: DetailsProps) {
+  return (
+    <goa-details
+      heading={props.heading}
+      mt={props.mt}
+      mr={props.mr}
+      mb={props.mb}
+      ml={props.ml}
+    >
+      {props.children}
+    </goa-details>
+  );
+}
+
+export default GoADetails;

libs/web-components/src/common/styling.ts

@@ -1,4 +1,28 @@
-export type Spacing = "none" | "3xs" | "2xs" | "xs" | "s" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl";
+export type Spacing = "none" | "3xs" | "2xs" | "xs" | "s" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | string;
+
+const conversions = {
+  "0": "none",
+  "1": "3xs",
+  "2": "2xs",
+  "3": "xs",
+  "4": "s",
+  "5": "m",
+  "6": "l",
+  "7": "xl",
+  "8": "2xl",
+  "9": "3xl",
+  "10": "4xl",
+}
+
+/**
+ * Allow for 0-10 values to be used along side the existing Spacing values
+ */
+function convertSpacing(size: Spacing): Spacing {
+  if (!Number.isInteger(+size)) {
+    return size  
+  }
+  return conversions[size] || "";
+}
 
 /**
  * import type { Spacing } from "../../common/types";
@@ -13,6 +37,10 @@ export type Spacing = "none" | "3xs" | "2xs" | "xs" | "s" | "m" | "l" | "xl" | "
  * style={calculateMargin(mt, mr, mb, ml)}
  */
 export function calculateMargin(mt: string, mr: string, mb: string, ml: string) {
+  mt = convertSpacing(mt);
+  mb = convertSpacing(mb);
+  ml = convertSpacing(ml);
+  mr = convertSpacing(mr);
   return [
     mt && `margin-top:var(--goa-space-${mt});`,
     mr && `margin-right:var(--goa-space-${mr});`,