feat: buttonactioncalloutcard addition

.storybook/pages/ProjectOverview/ProjectOverview.stories.tsx

@@ -10,3 +10,9 @@ export default {
 
 type Args = React.ComponentProps<typeof ProjectOverview>;
 export const StudentView: StoryObj<Args> = {};
+
+export const ProjectCheckpoint: StoryObj<Args> = {
+  args: {
+    activeIndex: 1,
+  },
+};

.storybook/pages/ProjectOverview/ProjectOverview.tsx

@@ -14,15 +14,25 @@ import {
   Section,
   TimelineNav,
   TimelineNavPanel,
+  DefinitionList,
+  Link,
 } from '../../../src';
 // Project Overview pilot components -- not yet exported from src/index.ts
 import '../../../src/components/Utilities/Spacing.css';
+import ButtonActionCalloutCard from '../../recipes/ButtonActionCalloutCard';
 
 import { PageShell } from '../../recipes/PageShell/PageShell';
 
-export const ProjectOverview = () => {
+export interface Props {
+  /**
+   * Passed down to initially set the activeIndex state
+   */
+  activeIndex?: number;
+}
+
+export const ProjectOverview = ({ activeIndex = 0 }: Props) => {
   return (
-    <PageShell>
+    <PageShell className="body--alternate">
       <Breadcrumbs className="u-margin-bottom-md">
         <BreadcrumbsItem href="#" text="My Courses" />
         <BreadcrumbsItem href="#" text="Disciplinary Science 7" />
@@ -36,7 +46,7 @@ export const ProjectOverview = () => {
         }
         title="Feudal Honor Codes and Values"
       />
-      <TimelineNav>
+      <TimelineNav activeIndex={activeIndex}>
         <TimelineNavPanel title="Overview" variant="success">
           <Heading as="h2" className="u-margin-bottom-xl" size="headline-lg">
             What is this Project About?
@@ -161,15 +171,55 @@ export const ProjectOverview = () => {
         </TimelineNavPanel>
 
         <TimelineNavPanel title="Expectations of Samuri in Feudal Japan and Wars of 5th Century">
-          <Text as="div">
-            <h3>TimelineNavPanel 2</h3>
-            <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
-            </p>
-          </Text>
+          <Section title="Expectations of Samuri in Feudal Japan">
+            <Heading as="h3" className="u-margin-bottom-lg" size="h3">
+              What to Focus on this Checkpoint
+            </Heading>
+            <Text as="div" className="u-margin-bottom-md">
+              <p>
+                Students individually develop a follow up question that builds
+                from their group’s experiment and describe their follow up
+                question in their conclusion. Students craft evidence-supported
+                explanations of how the body is organized and functions.
+              </p>
+            </Text>
+            <DefinitionList
+              className="u-margin-bottom-lg"
+              orientation="horizontal"
+            >
+              <DefinitionList.Item title="Term 1:">
+                <Link>Constructing and Evidence based Explanation</Link>
+              </DefinitionList.Item>
+            </DefinitionList>
+
+            <Text as="div" className="u-margin-bottom-md">
+              <p>
+                Students collaboratively develop a single group research
+                question to frame their shared experiment, then describe the
+                group research question in the introduction.
+              </p>
+            </Text>
+            <DefinitionList
+              className="u-margin-bottom-lg"
+              orientation="horizontal"
+            >
+              <DefinitionList.Item title="Term 1:">
+                <Link>Constructing and Evidence based Explanation</Link>
+              </DefinitionList.Item>
+            </DefinitionList>
+
+            <Heading as="h3" className="u-margin-bottom-lg" size="h3">
+              What to Focus on this Checkpoint
+            </Heading>
+
+            <ButtonActionCalloutCard
+              actions={<Button variant="primary">Preview</Button>}
+              title="Do This Checkpoint"
+            >
+              Develop the text of your Body Book, crafting evidence-supported
+              explanations on how the body is organized and its functions.
+            </ButtonActionCalloutCard>
+          </Section>
         </TimelineNavPanel>
 
         <TimelineNavPanel title="Expectations of Samuri in Feudal Japan">

.storybook/recipes/ButtonActionCalloutCard/ButtonActionCalloutCard.module.css

@@ -0,0 +1,27 @@
+@import '../../../src/design-tokens/mixins.css';
+
+/*------------------------------------*\
+    # BUTTON ACTION CALLOUT CARD
+\*------------------------------------*/
+
+/**
+ * 1) Card elevated to drive attention and give an action
+ */
+
+/**
+ * Button action callout card body inner
+ * 1) Wrapper around the description and button
+ */
+.button-action-callout-card__body-inner {
+  display: flex;
+  align-items: flex-start;
+  flex-direction: column;
+  gap: var(--eds-size-2);
+  margin-top: var(--eds-size-half);
+
+  @media all and (min-width: $eds-bp-md) {
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+  }
+}

.storybook/recipes/ButtonActionCalloutCard/ButtonActionCalloutCard.stories.tsx

@@ -0,0 +1,21 @@
+import { StoryObj, Meta } from '@storybook/react';
+import React from 'react';
+
+import { ButtonActionCalloutCard } from './ButtonActionCalloutCard';
+import { Button } from '../../../src';
+
+export default {
+  title: 'Recipes/ButtonActionCalloutCard',
+  component: ButtonActionCalloutCard,
+} as Meta<Args>;
+
+type Args = React.ComponentProps<typeof ButtonActionCalloutCard>;
+
+export const Default: StoryObj<Args> = {
+  args: {
+    title: 'Do This Checkpoint',
+    children:
+      'Develop the text of your Body Book, crafting evidence-supported explanations on how the body is organized and its functions.',
+    actions: <Button variant="primary">Preview</Button>,
+  },
+};

.storybook/recipes/ButtonActionCalloutCard/ButtonActionCalloutCard.tsx

@@ -0,0 +1,69 @@
+import clsx from 'clsx';
+import React, { ReactNode } from 'react';
+import styles from './ButtonActionCalloutCard.module.css';
+import { Button, Card, Heading, Text } from '../../../src';
+
+export interface Props {
+  /**
+   * Slot for buttons or other calls to action
+   */
+  actions?: ReactNode;
+  /**
+   * CSS class names that can be appended to the component.
+   */
+  className?: string;
+  /**
+   * Child node(s) that can be nested inside component
+   */
+  children?: ReactNode;
+  /**
+   * Title of the card
+   */
+  title?: string;
+}
+
+/**
+ * Primary UI component for user interaction
+ */
+export const ButtonActionCalloutCard = ({
+  actions,
+  className,
+  title,
+  children,
+  ...other
+}: Props) => {
+  const componentClassName = clsx(
+    styles['button-action-callout-card'],
+    className,
+    {},
+  );
+  return (
+    <Card className={componentClassName} elevation="raised" {...other}>
+      <Card.Body className={styles['button-action-callout-card__body']}>
+        <Heading
+          as="h3"
+          className={styles['button-action-callout-card__heading']}
+          size="h5"
+        >
+          {title}
+        </Heading>
+        <div className={styles['button-action-callout-card__body-inner']}>
+          {children && (
+            <Text
+              as="div"
+              className={styles['button-action-callout-card__description']}
+              size="sm"
+            >
+              {children}
+            </Text>
+          )}
+          {actions && (
+            <div className={styles['button-action-callout-card__actions']}>
+              {actions}
+            </div>
+          )}
+        </div>
+      </Card.Body>
+    </Card>
+  );
+};

.storybook/recipes/ButtonActionCalloutCard/index.ts

@@ -0,0 +1 @@
+export { ButtonActionCalloutCard as default } from './ButtonActionCalloutCard';

src/upcoming-components/DefinitionList/DefinitionList.module.css → src/components/DefinitionList/DefinitionList.module.css

@@ -51,7 +51,7 @@
  * Definition list term
  */
 .definition-list-item__term {
-  @mixin eds-theme-typography-body-text-bold;
+  @mixin eds-theme-typography-body-text-md;
   color: var(--eds-theme-color-text-neutral-strong);
 
   /**

src/upcoming-components/DefinitionList/DefinitionList.tsx → src/components/DefinitionList/DefinitionList.tsx

@@ -5,9 +5,10 @@ import DefinitionListItem from '../DefinitionListItem';
 
 export interface Props {
   /**
-   * Behavioral variations
+   * Orientation variations
+   * - **horizontal** renders the term next to the definition
    */
-  behavior?: 'horizontal';
+  orientation?: 'horizontal';
   /**
    * Child node(s) that can be nested inside component
    */
@@ -32,7 +33,7 @@ export interface Props {
  * TODO: update this comment with a description of the component.
  */
 export const DefinitionList = ({
-  behavior,
+  orientation,
   className,
   children,
   size,
@@ -41,7 +42,7 @@ export const DefinitionList = ({
   const componentClassName = clsx(
     styles['definition-list'],
     className,
-    behavior === 'horizontal' && styles['definition-list--horizontal'],
+    orientation === 'horizontal' && styles['definition-list--horizontal'],
     size === 'sm' && styles['definition-list--sm'],
   );
   return (

src/upcoming-components/DefinitionListItem/DefinitionListItem.tsx → src/components/DefinitionListItem/DefinitionListItem.tsx

@@ -33,7 +33,7 @@ export const DefinitionListItem = ({
   ...other
 }: Props) => {
   const componentClassName = clsx(
-    styles['definition-list-item'],
+    styles['definition-list__item'],
     className,
     {},
   );

src/design-tokens/css/base/body.css

@@ -4,6 +4,7 @@ body {
   @mixin eds-theme-typography-body-text-md;
   display: flex;
   flex-direction: column;
+  min-height: 100vh;
   padding: 0;
   margin: 0;
   color: var(--eds-theme-color-text-neutral-default);
@@ -15,3 +16,10 @@ body {
     min-height: 100%;
   }
 }
+
+/* Body with light background on small screens */
+.body--alternate {
+  @media all and (max-width: $eds-bp-lg) {
+    background: var(--eds-theme-color-background-neutral-default);
+  }
+}

src/index.ts

@@ -14,6 +14,7 @@ export { default as CheckboxLabel } from './components/CheckboxLabel';
 export { default as ClickableStyle } from './components/ClickableStyle';
 export { default as DataBar } from './components/DataBar';
 export { default as DataBarSegment } from './components/DataBarSegment';
+export { default as DefinitionList } from './components/DefinitionList';
 export { default as DragDrop } from './components/DragDrop';
 export { default as DragDropContainer } from './components/DragDropContainer';
 export { default as DragDropContainerHeader } from './components/DragDropContainerHeader';