@recursica/mui-adapter 0.4.0 → 0.6.0

package/src/components/Button/Button.module.css

@@ -75,7 +75,7 @@
  * to create contrast for solid variants without changing the loader color. 
  */
 .root[data-loading="true"] {
-  opacity: 1 !important;
+  opacity: 1;
 }
 
 .root[data-size="default"][data-variant="solid"][data-loading="true"] {
@@ -91,7 +91,7 @@
           100%
       ),
     transparent
-  ) !important;
+  );
 }
 
 .root[data-size="small"][data-variant="solid"][data-loading="true"] {
@@ -107,44 +107,60 @@
           100%
       ),
     transparent
-  ) !important;
+  );
 }
 
 /* ==== SIZES ==== */
 .root[data-size="default"] {
-  border-radius: var(
-    --recursica_ui-kit_components_button_variants_sizes_default_properties_border-radius
-  );
   height: var(
     --recursica_ui-kit_components_button_variants_sizes_default_properties_height
   );
+}
+.root[data-size="default"][data-content="label"] {
+  border-radius: var(
+    --recursica_ui-kit_components_button_variants_content_label_variants_sizes_default_properties_border-radius
+  );
   min-width: var(
-    --recursica_ui-kit_components_button_variants_sizes_default_properties_min-width
+    --recursica_ui-kit_components_button_variants_content_label_variants_sizes_default_properties_min-width
   );
   padding: 0
     var(
-      --recursica_ui-kit_components_button_variants_sizes_default_properties_horizontal-padding
+      --recursica_ui-kit_components_button_variants_content_label_variants_sizes_default_properties_horizontal-padding
     );
 }
-.root[data-size="default"] .labelText {
-  max-width: var(
-    --recursica_ui-kit_components_button_variants_sizes_default_properties_max-label-width
+.root[data-size="default"][data-content="icon-label"] {
+  border-radius: var(
+    --recursica_ui-kit_components_button_variants_content_icon-label_variants_sizes_default_properties_border-radius
   );
+  min-width: var(
+    --recursica_ui-kit_components_button_variants_content_icon-label_variants_sizes_default_properties_min-width
+  );
+  padding: 0
+    var(
+      --recursica_ui-kit_components_button_variants_content_icon-label_variants_sizes_default_properties_horizontal-padding
+    );
 }
-.root[data-size="small"] {
+.root[data-size="default"][data-content="icon-only"] {
   border-radius: var(
-    --recursica_ui-kit_components_button_variants_sizes_small_properties_border-radius
-  );
-  height: var(
-    --recursica_ui-kit_components_button_variants_sizes_small_properties_height
+    --recursica_ui-kit_components_button_variants_content_icon-only_variants_sizes_default_properties_border-radius
   );
   min-width: var(
-    --recursica_ui-kit_components_button_variants_sizes_small_properties_min-width
+    --recursica_ui-kit_components_button_variants_content_icon-only_variants_sizes_default_properties_min-width
   );
   padding: 0
     var(
-      --recursica_ui-kit_components_button_variants_sizes_small_properties_horizontal-padding
+      --recursica_ui-kit_components_button_variants_content_icon-only_variants_sizes_default_properties_horizontal-padding
     );
+}
+.root[data-size="default"] .labelText {
+  max-width: var(
+    --recursica_ui-kit_components_button_variants_sizes_default_properties_max-label-width
+  );
+}
+.root[data-size="small"] {
+  height: var(
+    --recursica_ui-kit_components_button_variants_sizes_small_properties_height
+  );
 
   /* Override specific typography for small */
   font-family: var(
@@ -166,6 +182,42 @@
     )
   );
 }
+.root[data-size="small"][data-content="label"] {
+  border-radius: var(
+    --recursica_ui-kit_components_button_variants_content_label_variants_sizes_small_properties_border-radius
+  );
+  min-width: var(
+    --recursica_ui-kit_components_button_variants_content_label_variants_sizes_small_properties_min-width
+  );
+  padding: 0
+    var(
+      --recursica_ui-kit_components_button_variants_content_label_variants_sizes_small_properties_horizontal-padding
+    );
+}
+.root[data-size="small"][data-content="icon-label"] {
+  border-radius: var(
+    --recursica_ui-kit_components_button_variants_content_icon-label_variants_sizes_small_properties_border-radius
+  );
+  min-width: var(
+    --recursica_ui-kit_components_button_variants_content_icon-label_variants_sizes_small_properties_min-width
+  );
+  padding: 0
+    var(
+      --recursica_ui-kit_components_button_variants_content_icon-label_variants_sizes_small_properties_horizontal-padding
+    );
+}
+.root[data-size="small"][data-content="icon-only"] {
+  border-radius: var(
+    --recursica_ui-kit_components_button_variants_content_icon-only_variants_sizes_small_properties_border-radius
+  );
+  min-width: var(
+    --recursica_ui-kit_components_button_variants_content_icon-only_variants_sizes_small_properties_min-width
+  );
+  padding: 0
+    var(
+      --recursica_ui-kit_components_button_variants_content_icon-only_variants_sizes_small_properties_horizontal-padding
+    );
+}
 .root[data-size="small"] .labelText {
   max-width: var(
     --recursica_ui-kit_components_button_variants_sizes_small_properties_max-label-width
@@ -218,8 +270,11 @@
 }
 
 /* Icon-only logic overrides */
-.root[data-icon-only] .MuiButton-startIcon,
-.root[data-icon-only] .MuiButton-endIcon {
+.root[data-content="icon-only"] .labelText {
+  display: none;
+}
+.root[data-content="icon-only"] .MuiButton-startIcon,
+.root[data-content="icon-only"] .MuiButton-endIcon {
   margin-right: 0;
   margin-left: 0;
 }
@@ -288,10 +343,18 @@
     --recursica_ui-kit_components_button_variants_styles_solid_properties_colors_text
   );
 }
+.root[data-variant="solid"] .iconWrapper {
+  color: var(
+    --recursica_ui-kit_components_button_variants_styles_solid_properties_colors_icon-color
+  );
+}
 .root[data-variant="solid"]:hover:not(:disabled):not(:global(.Mui-disabled)) {
   color: var(
     --recursica_ui-kit_components_button_variants_styles_solid_properties_colors_text-hover
   );
+  box-shadow: var(
+    --recursica_ui-kit_components_button_variants_styles_solid_properties_hover-elevation
+  );
 }
 
 /* OUTLINE */
@@ -312,10 +375,18 @@
     --recursica_ui-kit_components_button_variants_styles_outline_properties_colors_text
   );
 }
+.root[data-variant="outline"] .iconWrapper {
+  color: var(
+    --recursica_ui-kit_components_button_variants_styles_outline_properties_colors_icon-color
+  );
+}
 .root[data-variant="outline"]:hover:not(:disabled):not(:global(.Mui-disabled)) {
   color: var(
     --recursica_ui-kit_components_button_variants_styles_outline_properties_colors_text-hover
   );
+  box-shadow: var(
+    --recursica_ui-kit_components_button_variants_styles_outline_properties_hover-elevation
+  );
 }
 
 /* TEXT */
@@ -336,8 +407,30 @@
     --recursica_ui-kit_components_button_variants_styles_text_properties_colors_text
   );
 }
+.root[data-variant="text"] .iconWrapper {
+  color: var(
+    --recursica_ui-kit_components_button_variants_styles_text_properties_colors_icon-color
+  );
+}
 .root[data-variant="text"]:hover:not(:disabled):not(:global(.Mui-disabled)) {
   color: var(
     --recursica_ui-kit_components_button_variants_styles_text_properties_colors_text-hover
   );
+  box-shadow: var(
+    --recursica_ui-kit_components_button_variants_styles_text_properties_hover-elevation
+  );
 }
+
+/* EXEMPTIONS:
+   These general button properties are redundant because visual mapping has been refactored
+   to content-specific variables (_content_label_sizes_... etc.) or are handled by design defaults. */
+/* recursica-ignore: --recursica_ui-kit_components_button_variants_sizes_default_properties_horizontal-padding */
+/* recursica-ignore: --recursica_ui-kit_components_button_variants_sizes_default_properties_min-width */
+/* recursica-ignore: --recursica_ui-kit_components_button_variants_sizes_small_properties_horizontal-padding */
+/* recursica-ignore: --recursica_ui-kit_components_button_variants_sizes_small_properties_hover-opacity */
+/* recursica-ignore: --recursica_ui-kit_components_button_variants_sizes_small_properties_min-width */
+/* recursica-ignore: --recursica_ui-kit_components_button_variants_sizes_small_properties_text_font-style */
+/* recursica-ignore: --recursica_ui-kit_components_button_variants_sizes_small_properties_text_letter-spacing */
+/* recursica-ignore: --recursica_ui-kit_components_button_variants_sizes_small_properties_text_line-height */
+/* recursica-ignore: --recursica_ui-kit_components_button_variants_sizes_small_properties_text_text-decoration */
+/* recursica-ignore: --recursica_ui-kit_components_button_variants_sizes_small_properties_text_text-transform */

package/src/components/Button/Button.stories.tsx

@@ -10,6 +10,9 @@ const meta: Meta<ButtonStoryProps> = {
   component: Button,
   tags: ["autodocs"],
   argTypes: {
+    disabled: {
+      control: "boolean",
+    },
     variant: {
       control: "select",
       options: ["solid", "outline", "text"],

package/src/components/Button/Button.tsx

@@ -78,8 +78,15 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
 
     const hasStartIcon = !!icon || !!restRecord["startIcon"];
     const hasEndIcon = !!restRecord["endIcon"];
-    const isIconOnly =
-      (hasStartIcon || hasEndIcon) && !hasVisibleChildren(children);
+    const hasVisibleText = hasVisibleChildren(children);
+    const isIconOnly = (hasStartIcon || hasEndIcon) && !hasVisibleText;
+
+    let contentType = "label";
+    if (isIconOnly) {
+      contentType = "icon-only";
+    } else if (hasStartIcon || hasEndIcon) {
+      contentType = "icon-label";
+    }
 
     if (
       typeof process !== "undefined" &&
@@ -129,7 +136,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
         }
         data-variant={variant}
         data-size={size}
-        {...(isIconOnly ? { "data-icon-only": "" } : {})}
+        data-content={contentType}
         {...(restRecord.loading ? { "data-loading": "true" } : {})}
         {...sanitizedProps}
         disabled={!!restRecord.disabled || !!restRecord.loading}

package/src/components/Card/Card.module.css

@@ -0,0 +1,118 @@
+/* HARDCODED VALUES:
+   - display: flex on root
+   - flex-direction: column
+   - gap: section-gap
+ */
+
+.root {
+  /* HARDCODE: Map Recursica explicitly into Mantine's variable format so internal components know the margins */
+  --card-padding: var(--recursica_ui-kit_components_card_properties_padding);
+
+  background-color: var(
+    --recursica_ui-kit_components_card_properties_colors_background
+  );
+  border-radius: var(
+    --recursica_ui-kit_components_card_properties_borders_border-radius
+  );
+  border: var(--recursica_ui-kit_components_card_properties_borders_border-size)
+    solid var(--recursica_ui-kit_components_card_properties_colors_border-color);
+  box-shadow: var(
+    --recursica_ui-kit_components_card_properties_elevations_elevation
+  );
+
+  padding: var(--card-padding);
+  min-width: var(--recursica_ui-kit_components_card_properties_min-width);
+  max-width: var(--recursica_ui-kit_components_card_properties_max-width);
+  color: var(--recursica_ui-kit_components_card_properties_colors_content);
+
+  display: flex;
+  flex-direction: column;
+  gap: var(--recursica_ui-kit_components_card_properties_section-gap);
+}
+
+.header {
+  background-color: var(
+    --recursica_ui-kit_components_card_properties_colors_header-background
+  );
+  padding: var(--recursica_ui-kit_components_card_properties_header-padding);
+  color: var(--recursica_ui-kit_components_card_properties_colors_title);
+  border-bottom: var(--recursica_ui-kit_components_card_properties_divider-size)
+    solid
+    var(--recursica_ui-kit_components_card_properties_colors_divider-color);
+
+  /* Direct Figma Typography Mapping */
+  font-family: var(
+    --recursica_ui-kit_components_card_properties_header-style_fontFamily
+  );
+  font-size: var(
+    --recursica_ui-kit_components_card_properties_header-style_fontSize
+  );
+  font-style: var(
+    --recursica_ui-kit_components_card_properties_header-style_fontStyle
+  );
+  font-weight: var(
+    --recursica_ui-kit_components_card_properties_header-style_fontWeight
+  );
+  letter-spacing: var(
+    --recursica_ui-kit_components_card_properties_header-style_letterSpacing
+  );
+  line-height: var(
+    --recursica_ui-kit_components_card_properties_header-style_lineHeight
+  );
+  text-transform: var(
+    --recursica_ui-kit_components_card_properties_header-style_textCase
+  );
+  text-decoration: var(
+    --recursica_ui-kit_components_card_properties_header-style_textDecoration
+  );
+}
+
+.footer {
+  background-color: var(
+    --recursica_ui-kit_components_card_properties_colors_footer-background
+  );
+  padding: var(--recursica_ui-kit_components_card_properties_footer-padding);
+  border-top: var(--recursica_ui-kit_components_card_properties_divider-size)
+    solid
+    var(--recursica_ui-kit_components_card_properties_colors_divider-color);
+}
+
+.section {
+  /* Just maps standard section spacing overrides if passed explicitly */
+  margin-top: var(
+    --recursica_ui-kit_components_card_properties_vertical-gutter
+  );
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--recursica_ui-kit_components_card_properties_vertical-gutter);
+  padding: 0;
+
+  /* Direct Figma Typography Mapping */
+  font-family: var(
+    --recursica_ui-kit_components_card_properties_content-style_fontFamily
+  );
+  font-size: var(
+    --recursica_ui-kit_components_card_properties_content-style_fontSize
+  );
+  font-style: var(
+    --recursica_ui-kit_components_card_properties_content-style_fontStyle
+  );
+  font-weight: var(
+    --recursica_ui-kit_components_card_properties_content-style_fontWeight
+  );
+  letter-spacing: var(
+    --recursica_ui-kit_components_card_properties_content-style_letterSpacing
+  );
+  line-height: var(
+    --recursica_ui-kit_components_card_properties_content-style_lineHeight
+  );
+  text-transform: var(
+    --recursica_ui-kit_components_card_properties_content-style_textCase
+  );
+  text-decoration: var(
+    --recursica_ui-kit_components_card_properties_content-style_textDecoration
+  );
+}

package/src/components/Card/Card.stories.tsx

@@ -1,35 +1,133 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { Card } from "./Card";
-import { ComingSoon } from "@recursica/storybook-template";
+import { Layer } from "@recursica/adapter-common";
+import { Button } from "../Button/Button";
+import { Group } from "../Group/Group";
+import { Text } from "../Text/Text";
 
 const meta: Meta<typeof Card> = {
-  title: "UI-Kit/🚧 Card",
+  title: "UI-Kit/Card",
   component: Card,
+  subcomponents: {
+    "Card.Header": Card.Header,
+    "Card.Content": Card.Content,
+    "Card.Footer": Card.Footer,
+    "Card.Section": Card.Section,
+  } as Record<string, React.ComponentType<unknown>>,
   tags: ["autodocs"],
   parameters: {
-    controls: {
-      include: [
-        "layer",
-        "withLayer",
-        "children",
-        "component",
-        "variant",
-        "size",
-        "icon",
-        "disabled",
-        "href",
-        "onClick",
-        "onChange",
-        "value",
-        "checked",
-      ],
+    docs: {
+      description: {
+        component:
+          "The Card component acts as the foundational padded surface for grouping related information. It relies on standard internal compositional nodes (`Card.Header`, `Card.Content`, `Card.Footer`) mapped directly to the active Recursica design tokens to enforce layout gaps and margins seamlessly. Use the provided dot-notation wrappers rather than building ad-hoc generic sections.",
+      },
     },
   },
+  argTypes: {},
 };
 
 export default meta;
+
 type Story = StoryObj<typeof Card>;
 
 export const Default: Story = {
-  render: () => <ComingSoon componentName="Card" />,
+  args: {},
+  render: ({ ...args }) => {
+    return (
+      <div
+        style={{
+          padding: "48px",
+          backgroundColor:
+            "var(--recursica_brand_palettes_neutral_050_color_tone)",
+        }}
+      >
+        <Layer layer={0}>
+          <Card {...args}>
+            <Card.Header>Customer Activity Report</Card.Header>
+            <Card.Content>
+              <Text>
+                Card inner section content body. Notice how this acts as padded
+                content natively based on the overarching properties.
+                Recursica's vertical gutter governs vertical spacing between
+                siblings in the flex container.
+              </Text>
+              <Text>Another section showing the vertical gutter spacing.</Text>
+            </Card.Content>
+            <Card.Footer>
+              <Group justify="space-between" align="center">
+                <Text variant="caption">Generated today</Text>
+                <Button variant="solid">View Details</Button>
+              </Group>
+            </Card.Footer>
+          </Card>
+        </Layer>
+      </div>
+    );
+  },
+};
+
+export const HeaderlessAndFooterless: Story = {
+  args: {},
+  render: ({ ...args }) => {
+    return (
+      <div
+        style={{
+          padding: "48px",
+          backgroundColor:
+            "var(--recursica_brand_palettes_neutral_050_color_tone)",
+        }}
+      >
+        <Layer layer={0}>
+          <Card {...args}>
+            <Card.Content>
+              <Text variant="subtitle">Notice</Text>
+              <Text>
+                This is a completely generic card payload dropping the Header
+                and Footer specific elements, simply acting as a padded
+                elevation boundary box directly mirroring native composability!
+              </Text>
+              <Button variant="solid">Acknowledge</Button>
+            </Card.Content>
+          </Card>
+        </Layer>
+      </div>
+    );
+  },
+};
+
+export const LayerDemonstration: Story = {
+  args: {},
+  render: ({ ...args }) => {
+    return (
+      <div
+        style={{
+          display: "flex",
+          gap: "32px",
+          backgroundColor: "#e9ecef",
+          padding: "32px",
+        }}
+      >
+        <Layer layer={1}>
+          <Card {...args}>
+            <Card.Header>Layer 1 Wrapper</Card.Header>
+            <Card.Content>
+              <Text>Content inside layer 1 card.</Text>
+            </Card.Content>
+          </Card>
+        </Layer>
+
+        <Layer layer={2}>
+          <Card {...args}>
+            <Card.Header>Layer 2 Wrapper</Card.Header>
+            <Card.Content>
+              <Text>
+                Content inside layer 2 card exposing a higher elevation drop
+                shadow inherently cascaded.
+              </Text>
+            </Card.Content>
+          </Card>
+        </Layer>
+      </div>
+    );
+  },
 };