Merge pull request #8 from gsoft-inc/feature/OR-132

rebranded Card / renamed outline to elevated as default is now outline
gsoft-inc · Oct 13, 2023 · d17eccd · d17eccd
2 parents fa16102 + 4d67eb1
commit d17eccd
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 37 deletions.
diff --git a/packages/components/src/card/docs/Card.stories.mdx b/packages/components/src/card/docs/Card.stories.mdx
@@ -52,13 +52,13 @@ A card must have an heading and a content.
     </Story>
 </Preview>
 
-### Outline
+### Elevated
 
 A card can use a different style.
 
 <Preview>
-    <Story name="outline">
-        <Card variant="outline">
+    <Story name="elevated">
+        <Card variant="elevated">
             <Heading>NASA Headquarters</Heading>
             <Content>
                 <Paragraph>NASA Headquarters, officially known as Mary W. Jackson NASA Headquarters or NASA HQ and formerly named Two Independence Square, is a low-rise office building in the two-building Independence Square complex at 300 E Street SW in Washington, D.C.</Paragraph>
@@ -107,7 +107,7 @@ A card can have an header.
     <Story name="header">
         <Card>
             <Heading>NASA Headquarters</Heading>
-            <Header>No unexpected visitors allowed.</Header>
+            <Header>No visitors allowed.</Header>
             <Content>
                 <Paragraph>NASA Headquarters, officially known as Mary W. Jackson NASA Headquarters or NASA HQ and formerly named Two Independence Square, is a low-rise office building in the two-building Independence Square complex at 300 E Street SW in Washington, D.C.</Paragraph>
             </Content>
@@ -123,7 +123,7 @@ A card can have a single [button](?path=/docs/button--default-story):
     <Story name="button">
         <Card>
             <Heading>NASA Headquarters</Heading>
-            <Header>No unexpected visitors allowed.</Header>
+            <Header>No visitors allowed.</Header>
             <Content>
                 <Paragraph>NASA Headquarters, officially known as Mary W. Jackson NASA Headquarters or NASA HQ and formerly named Two Independence Square, is a low-rise office building in the two-building Independence Square complex at 300 E Street SW in Washington, D.C.</Paragraph>
             </Content>

diff --git a/packages/components/src/card/src/Card.css b/packages/components/src/card/src/Card.css
@@ -1,33 +1,32 @@
 .o-ui-card {
     display: grid;
-    background-color: var(--o-ui-bg-alias-surface);
+    border-radius: var(--hop-shape-rounded-md);
 }
 
 /* VARIANT */
-.o-ui-card-elevated {
-    box-shadow: var(--o-ui-bs-alias-lifted);
-    border-radius: var(--o-ui-br-4);
+.o-ui-card-outline {
+    background-color: var(--hop-neutral-surface);
+    border: 1px solid var(--hop-neutral-border-weak);
 }
 
-.o-ui-card-outline {
-    border: 1px solid var(--o-ui-b-alias-low-break);
-    border-radius: var(--o-ui-br-3);
+.o-ui-card-elevated {
+    background-color: var(--hop-neutral-surface-weakest);
 }
 
 /* SIZES */
 .o-ui-card-xs {
     width: 100%;
-    max-width: var(--o-ui-sz-15);
+    max-width: 16rem;
 }
 
 .o-ui-card-sm {
     width: 100%;
-    max-width: var(--o-ui-sz-16);
+    max-width: 20rem;
 }
 
 .o-ui-card-md {
     width: 100%;
-    max-width: var(--o-ui-sz-18);
+    max-width: 30rem;
 }
 
 .o-ui-card-lg {
@@ -67,8 +66,8 @@
     flex-wrap: wrap;
     justify-content: space-between;
     align-items: center;
-    margin-bottom: var(--o-ui-sp-4);
-    column-gap: var(--o-ui-sp-4);
+    margin-bottom: var(--hop-space-stack-md);
+    column-gap: var(--hop-space-inline-md);
 }
 
 .o-ui-card-footer-section {
@@ -90,17 +89,17 @@
     margin-bottom: 0;
     display: flex;
     align-items: center;
-    gap: var(--o-ui-sp-2);
+    gap: var(--hop-space-inline-sm);
 }
 
 .o-ui-card-illustration + .o-ui-card-header-section {
-    margin-top: var(--o-ui-sp-6);
+    margin-top: var(--hop-space-stack-md);
 }
 
 /* BUTTONS */
 .o-ui-card-button,
 .o-ui-card-button-group {
-    margin-top: var(--o-ui-sp-6);
+    margin-top: var(--hop-space-stack-md);
 }
 
 /* ASIDE */
@@ -114,23 +113,23 @@
 .o-ui-card-horizontal > .o-ui-card-aside {
     grid-area: aside;
     align-content: start;
-    padding: var(--o-ui-sp-6);
+    padding: var(--hop-space-inset-lg);
 }
 
 .o-ui-card-horizontal > .o-ui-card-illustration + .o-ui-card-aside {
-    padding-left: var(--o-ui-sp-6);
+    padding-left: var(--hop-space-inset-lg);
 }
 
 /* ASIDE | VERTICAL */
 .o-ui-card-vertical > .o-ui-card-aside {
     grid-column-start: 1;
     grid-column-end: 3;
-    padding: var(--o-ui-sp-5);
+    padding: var(--hop-space-inset-lg);
 }
 
 .o-ui-card-vertical > .o-ui-card-illustration + .o-ui-card-aside,
 .o-ui-card-vertical > .o-ui-card-image + .o-ui-card-aside {
-    padding: var(--o-ui-sp-4) var(--o-ui-sp-5) var(--o-ui-sp-5) var(--o-ui-sp-5);
+    padding: var(--hop-space-inset-md) var(--hop-space-inset-lg) var(--hop-space-inset-lg) var(--hop-space-inset-lg);
 }
 
 /* IMAGE */
@@ -151,23 +150,23 @@
 
 /* IMAGE | PADDING */
 .o-ui-card-sm .o-ui-card-illustration {
-    padding: var(--o-ui-sp-4);
+    padding: var(--hop-space-inset-md);
 }
 
 .o-ui-card-md .o-ui-card-illustration {
-    padding: var(--o-ui-sp-4);
+    padding: var(--hop-space-inset-md);
 }
 
 .o-ui-card-lg .o-ui-card-illustration {
-    padding: var(--o-ui-sp-4);
+    padding: var(--hop-space-inset-md);
 }
 
 .o-ui-card-xl .o-ui-card-illustration {
-    padding: var(--o-ui-sp-4);
+    padding: var(--hop-space-inset-md);
 }
 
 .o-ui-card-fluid .o-ui-card-illustration {
-    padding: var(--o-ui-sp-4);
+    padding: var(--hop-space-inset-md);
 }
 
 /* IMAGE | HORIZONTAL */

diff --git a/packages/components/src/card/src/Card.tsx b/packages/components/src/card/src/Card.tsx
@@ -36,7 +36,7 @@ export function InnerCard({
     forwardedRef,
     orientation = "vertical",
     size,
-    variant = "elevated",
+    variant = "outline",
     ...rest
 }: InnerCardProps) {
     const fluidValue = useResponsiveValue(fluid);
@@ -64,7 +64,7 @@ export function InnerCard({
         heading: {
             as: "span",
             className: "o-ui-card-heading",
-            size: "sm"
+            size: "md"
         },
         illustration: {
             className: "o-ui-card-illustration",

diff --git a/packages/components/src/card/tests/chromatic/createTestSuite.jsx b/packages/components/src/card/tests/chromatic/createTestSuite.jsx
@@ -53,30 +53,30 @@ export function createTestSuite(element, stories) {
         .add("variant", () =>
             <Stack>
                 <Inline>
-                    <Card variant="outline" size="xs" element={element}>
+                    <Card variant="elevated" size="xs" element={element}>
                         <Heading>Nasa</Heading>
                         <Content>The National Aeronautics and Space Administration</Content>
                     </Card>
-                    <Card variant="outline" size="sm" element={element}>
+                    <Card variant="elevated" size="sm" element={element}>
                         <Heading>Nasa</Heading>
                         <Content>The National Aeronautics and Space Administration</Content>
                     </Card>
-                    <Card variant="outline" element={element}>
+                    <Card variant="elevated" element={element}>
                         <Heading>Nasa</Heading>
                         <Content>The National Aeronautics and Space Administration</Content>
                     </Card>
                 </Inline>
                 <Inline>
-                    <Card variant="outline" size="lg" element={element}>
+                    <Card variant="elevated" size="lg" element={element}>
                         <Heading>Nasa</Heading>
                         <Content>The National Aeronautics and Space Administration</Content>
                     </Card>
-                    <Card variant="outline" size="xl" element={element}>
+                    <Card variant="elevated" size="xl" element={element}>
                         <Heading>Nasa</Heading>
                         <Content>The National Aeronautics and Space Administration</Content>
                     </Card>
                 </Inline>
-                <Card variant="outline" fluid element={element}>
+                <Card variant="elevated" fluid element={element}>
                     <Heading>Nasa</Heading>
                     <Content>The National Aeronautics and Space Administration</Content>
                 </Card>