create lockedstate component and update styles

easy-ui-react/src/LockedState/LockedStateCard.mdx

@@ -0,0 +1,48 @@
+import React from "react";
+import { ArgTypes, Canvas, Meta, Controls } from "@storybook/blocks";
+import { LockedStateCard } from "./LockedStateCard";
+import * as LockedStateCardStories from "./LockedStateCard.stories";
+
+<Meta of={LockedStateCardStories} />
+
+# LockedStateCard
+
+An `<LockedStateCard />` is a styled container designed to display relevant information when a user is locked out of a feature or functionality.
+
+It is a compound component consisting of `<LockedStateCard.Section />`, `<LockedStateCard.TextGroup />`, `<LockedStateCard.HeaderText />`, `<LockedStateCard.BodyText />`, and `<LockedStateCard.ActionGroup />`
+
+## Simple
+
+<Canvas of={LockedStateCardStories.Simple} />
+
+## Alignment
+
+`<LockedStateCard.Section />` and `<LockedStateCard.TextGroup />` can accept `VerticalStack` props to override defaults and to assist with alignment. Similarly, `<LockedStateCard.ActionGroup />` can accept `HorizontalStack` props.
+
+<Canvas of={LockedStateCardStories.Alignment} />
+
+## Properties
+
+### LockedStateCard
+
+<ArgTypes of={LockedStateCard} />
+
+### LockedStateCard.Section
+
+<ArgTypes of={LockedStateCard.Section} />
+
+### LockedStateCard.TextGroup
+
+<ArgTypes of={LockedStateCard.TextGroup} />
+
+### LockedStateCard.HeaderText
+
+<ArgTypes of={LockedStateCard.TextGroup} />
+
+### LockedStateCard.BodyText
+
+<ArgTypes of={LockedStateCard.BodyText} />
+
+### LockedStateCard.ActionGroup
+
+<ArgTypes of={LockedStateCard.ActionGroup} />

easy-ui-react/src/LockedState/LockedStateCard.module.scss

@@ -0,0 +1,32 @@
+@use "mixins" as EmptyStateCard;
+
+.container {
+  max-width: 695px;
+  position: relative;
+}
+
+.inlineMargin {
+  margin: 0 auto;
+}
+
+.decorative {
+  position: relative;
+  display: none;
+  background-repeat: no-repeat no-repeat;
+  @include EmptyStateCard.breakpoint-lg-screen {
+    display: block;
+    width: 425px;
+    height: 295px;
+    background-position:
+      130px 65px,
+      0px 0px;
+  }
+
+  @include EmptyStateCard.breakpoint-xl-screen {
+    display: block;
+    width: 617px;
+    background-position:
+      260px 65px,
+      10px 0px;
+  }
+}

easy-ui-react/src/LockedState/LockedStateCard.stories.tsx

@@ -1,21 +1,65 @@
-// import React from "react";
-// import { Meta, StoryObj } from "@storybook/react";
-// import { LockedStateCard, LockedStateCardProps } from "./LockedStateCard";
-// import { Button } from "../Button";
-// import { PlaceholderBox } from "../utilities/storybook";
+import React from "react";
+import { Meta, StoryObj } from "@storybook/react";
+import { LockedStateCard, LockedStateCardProps } from "./LockedStateCard";
+import { Button } from "../Button";
+import { Icon } from "../Icon";
+import Visibility from "@easypost/easy-ui-icons/Visibility";
 
-// type Story = StoryObj<typeof LockedStateCard>;
+type Story = StoryObj<typeof LockedStateCard>;
 
-// const Template = (args: LockedStateCardProps) => {
-//   const { children, ...restArgs } = args;
-//   return <LockedStateCard {...restArgs}>{children}</LockedStateCard>;
-// };
+const Template = (args: LockedStateCardProps) => {
+  const { children, ...restArgs } = args;
+  return <LockedStateCard {...restArgs}>{children}</LockedStateCard>;
+};
 
-// const meta: Meta<typeof LockedStateCard> = {
-//   title: "Components/Cards/LockedStateCard",
-//   component: LockedStateCard,
-// };
+const meta: Meta<typeof LockedStateCard> = {
+  title: "Components/Cards/LockedStateCard",
+  component: LockedStateCard,
+};
 
-// export default meta;
+export default meta;
 
-// export const Simple: Story = {};
+export const Simple: Story = {
+  render: Template.bind({}),
+  args: {
+    children: (
+      <LockedStateCard.Section>
+        <LockedStateCard.TextGroup>
+          <LockedStateCard.HeaderText>
+            Looking to create something more advanced?
+          </LockedStateCard.HeaderText>
+          <LockedStateCard.BodyText>
+            EasyPost’s API Suite delivers the best developer experience by
+            offering a comprehensive suite of tools and features to ensure we
+            meet the shipping needs of every single shipper. 
+          </LockedStateCard.BodyText>
+        </LockedStateCard.TextGroup>
+        <LockedStateCard.ActionGroup>
+          <Button color="secondary">Upgrade Plans</Button>
+        </LockedStateCard.ActionGroup>
+      </LockedStateCard.Section>
+    ),
+  },
+};
+
+export const Alignment: Story = {
+  render: Template.bind({}),
+  args: {
+    children: (
+      <LockedStateCard.Section inlineAlign="center">
+        <LockedStateCard.TextGroup gap="2">
+          <Icon color="danger" size="3xl" symbol={Visibility} />
+          <LockedStateCard.HeaderText>Analytics</LockedStateCard.HeaderText>
+          <LockedStateCard.BodyText>
+            EasyPost’s API Suite delivers the best developer experience by
+            offering a comprehensive suite of tools and features to ensure we
+            meet the shipping needs of every single shipper. 
+          </LockedStateCard.BodyText>
+        </LockedStateCard.TextGroup>
+        <LockedStateCard.ActionGroup gap="2">
+          <Button color="secondary">Upgrade Plan</Button>
+        </LockedStateCard.ActionGroup>
+      </LockedStateCard.Section>
+    ),
+  },
+};

easy-ui-react/src/LockedState/LockedStateCard.tsx

@@ -1,8 +1,156 @@
-// import React, { ReactNode } from "react";
-// import { Text, TextProps } from "../Text";
-// import { Card, CardProps } from "../Card";
-// import { Icon, IconSymbol } from "../Icon";
-// import { Button, ButtonProps } from "../Button";
-// import { VerticalStack, VerticalStackProps } from "../VerticalStack";
-// import { HorizontalStack, HorizontalStackProps } from "../HorizontalStack";
-// import { classNames } from "../utilities/css";
+import React, { ReactNode } from "react";
+import { Text, TextProps } from "../Text";
+import { Card, CardProps } from "../Card";
+import { VerticalStack, VerticalStackProps } from "../VerticalStack";
+import { HorizontalStack, HorizontalStackProps } from "../HorizontalStack";
+import { classNames } from "../utilities/css";
+
+import styles from "./LockedStateCard.module.scss";
+
+export type LockedStateCardProps = CardProps & {
+  /**
+   * The children of the <LockedStateCard> element.
+   */
+  children: ReactNode;
+};
+
+/**
+ * An `<LockedStateCard />` is a styled container designed to display relevant information when a user is locked out of a feature or functionality.
+ *
+ * @remarks
+ * Supports custom spacing and alignment between elements.
+ *
+ * @example
+ * _Basic:_
+ * ```tsx
+ * <LockedStateCard>
+ *  <LockedStateCard.Section>
+ *    <LockedStateCard.TextGroup>
+ *     <LockedStateCard.Icon>
+ *      <Icon />
+ *      <LockedStateCard.HeaderText>
+ *        Shipment Insurance
+ *      </LockedStateCard.HeaderText>
+ *      <LockedStateCard.BodyText>
+ *        Rest easy knowing if one of your customers orders is damaged, lost
+ *        in transit or stolen you are covered! Automatically add insurance
+ *        to all your shipments
+ *      </LockedStateCard.BodyText>
+ *    </LockedStateCard.TextGroup>
+ *    <LockedStateCard.ActionGroup>
+ *      <Button>Manage Insurance Settings</Button>
+ *    </LockedStateCard.ActionGroup>
+ *  </LockedStateCard.Section>
+ * </LockedStateCard>
+ * ```
+ *
+ * @example
+ * _Alignment:_
+ * ```tsx
+ * <LockedStateCard>
+ *  <LockedStateCard.Section inlineAlign="center">
+ *    <LockedStateCard.TextGroup gap="2">
+ *      <LockedStateCard.HeaderText>
+ *        Shipment Insurance
+ *      </LockedStateCard.HeaderText>
+ *      <LockedStateCard.BodyText>
+ *        Rest easy knowing if one of your customers orders is damaged, lost
+ *        in transit or stolen you are covered! Automatically add insurance
+ *        to all your shipments
+ *      </LockedStateCard.BodyText>
+ *    </LockedStateCard.TextGroup>
+ *    <LockedStateCard.ActionGroup>
+ *      <Button>Manage Insurance Settings</Button>
+ *    </LockedStateCard.ActionGroup>
+ *  </LockedStateCard.Section>
+ * </LockedStateCard>
+ * ```
+ */
+export function LockedStateCard(props: LockedStateCardProps) {
+  const { children, ...cardProps } = props;
+
+  return (
+    <Card
+      variant="solid"
+      background="secondary.050"
+      borderRadius="lg"
+      padding="0"
+      boxShadow="1"
+      {...cardProps}
+    >
+      {children}
+    </Card>
+  );
+}
+
+function LockedStateCardSection(props: VerticalStackProps) {
+  const { gap = "2", inlineAlign = "start", children, ...restProps } = props;
+
+  const isInlineSection = inlineAlign === "center";
+
+  const sectionClassName = classNames(
+    styles.container,
+    isInlineSection && styles.inlineMargin,
+  );
+
+  return (
+    <div className={sectionClassName}>
+      <Card.Area padding="5">
+        <VerticalStack gap={gap} inlineAlign={inlineAlign} {...restProps}>
+          {children}
+        </VerticalStack>
+      </Card.Area>
+    </div>
+  );
+}
+
+function LockedStateCardTextGroup(props: VerticalStackProps) {
+  const { gap = "1", children, ...restProps } = props;
+  return (
+    <VerticalStack gap={gap} {...restProps}>
+      {children}
+    </VerticalStack>
+  );
+}
+
+function LockedStateCardActionGroup(props: HorizontalStackProps) {
+  const { gap = "1", align = "space-between", children, ...restProps } = props;
+  return (
+    <HorizontalStack gap={gap} align={align} {...restProps}>
+      {children}
+    </HorizontalStack>
+  );
+}
+
+function LockedStateCardHeaderText(props: TextProps) {
+  const {
+    variant = "subtitle1",
+    color = "neutral.900",
+    ...restTextProps
+  } = props;
+
+  return <Text variant={variant} color={color} {...restTextProps} />;
+}
+
+function LockedStateCardBodyText(props: TextProps) {
+  const { variant = "body2", color = "neutral.900", ...restTextProps } = props;
+
+  return <Text variant={variant} color={color} {...restTextProps} />;
+}
+
+LockedStateCard.displayName = "LockedStateCard";
+
+/** Represents a section in a `<LockedStateCard />`*/
+LockedStateCard.Section = LockedStateCardSection;
+
+/** Represents the text group in a `<LockedStateCard />`*/
+LockedStateCard.TextGroup = LockedStateCardTextGroup;
+
+/** Represents header text in a `<LockedStateCard />`*/
+LockedStateCard.HeaderText = LockedStateCardHeaderText;
+
+/** Represents body text in a `<LockedStateCard />`*/
+LockedStateCard.BodyText = LockedStateCardBodyText;
+
+/** Represents the action group in a `<LockedStateCard />`*/
+LockedStateCard.ActionGroup = LockedStateCardActionGroup;

easy-ui-react/src/LockedState/_mixins.scss

@@ -0,0 +1,13 @@
+@use "../styles/common" as *;
+
+@mixin breakpoint-lg-screen {
+  @include breakpoint-lg-up {
+    @content;
+  }
+}
+
+@mixin breakpoint-xl-screen {
+  @include breakpoint-xl-up {
+    @content;
+  }
+}