add new lock icon and minor storybook updates

EasyPost · Dec 13, 2024 · e8dc6b4 · e8dc6b4
1 parent 0e4ff55
commit e8dc6b4
Show file tree

Hide file tree

Showing 6 changed files with 47 additions and 78 deletions.
diff --git a/easy-ui-icons/src/Lock.json b/easy-ui-icons/src/Lock.json
@@ -0,0 +1,5 @@
+{
+  "name": "lock",
+  "style": "outlined",
+  "source": "@material-symbols/svg-300"
+}
diff --git a/easy-ui-react/src/LockedState/LockedStateCard.mdx b/easy-ui-react/src/LockedState/LockedStateCard.mdx
@@ -7,7 +7,7 @@ import * as LockedStateCardStories from "./LockedStateCard.stories";
 
 # LockedStateCard
 
-An `<LockedStateCard />` is a styled container designed to display relevant information when a user is locked out of a feature or functionality.
+A `<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 />`
 

diff --git a/easy-ui-react/src/LockedState/LockedStateCard.module.scss b/easy-ui-react/src/LockedState/LockedStateCard.module.scss
@@ -1,5 +1,3 @@
-@use "mixins" as EmptyStateCard;
-
 .container {
   max-width: 695px;
   position: relative;
@@ -8,25 +6,3 @@
 .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;
-  }
-}
diff --git a/easy-ui-react/src/LockedState/LockedStateCard.stories.tsx b/easy-ui-react/src/LockedState/LockedStateCard.stories.tsx
@@ -48,8 +48,10 @@ export const Alignment: Story = {
     children: (
       <LockedStateCard.Section inlineAlign="center">
         <LockedStateCard.TextGroup gap="2">
-          <Icon color="danger" size="3xl" symbol={Visibility} />
-          <LockedStateCard.HeaderText>Analytics</LockedStateCard.HeaderText>
+          <Icon color="secondary.500" size="3xl" symbol={Visibility} />
+          <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

diff --git a/easy-ui-react/src/LockedState/LockedStateCard.tsx b/easy-ui-react/src/LockedState/LockedStateCard.tsx
@@ -15,7 +15,7 @@ export type LockedStateCardProps = CardProps & {
 };
 
 /**
- * An `<LockedStateCard />` is a styled container designed to display relevant information when a user is locked out of a feature or functionality.
+ * A `<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.
@@ -24,45 +24,44 @@ export type LockedStateCardProps = CardProps & {
  * _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.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>
  * </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>
+*
+* @example
+* _Alignment:_
+* ```tsx
+* <LockedStateCard>
+    <LockedStateCard.Section inlineAlign="center">
+      <LockedStateCard.TextGroup gap="2">
+        <Icon />
+        <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 gap="2">
+        <Button color="secondary">Upgrade Plan</Button>
+      </LockedStateCard.ActionGroup>
+    </LockedStateCard.Section>
  * </LockedStateCard>
  * ```
  */

diff --git a/easy-ui-react/src/LockedState/_mixins.scss b/easy-ui-react/src/LockedState/_mixins.scss