✨ #11 - feat: add datagrid component

src/components/badge/badge.scss

@@ -0,0 +1,13 @@
+.mykn-badge {
+  background-color: var(--theme-color-primary-200);
+  align-items: center;
+  border-radius: var(--border-radius-m);
+  display: inline-flex;
+  font-family: Inter, sans-serif;
+  font-size: var(--typography-font-size-body-xs);
+  font-weight: var(--typography-font-weight-normal);
+  height: var(--typography-line-height-body-s);
+  justify-content: center;
+  line-height: var(--typography-line-height-body-xs);
+  padding: 0 var(--spacing-h-s);
+}

src/components/badge/badge.stories.tsx

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { Badge } from "./badge";
+
+const meta = {
+  title: "Typography/Badge",
+  component: Badge,
+} satisfies Meta<typeof Badge>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const BadgeComponent: Story = {
+  args: {
+    children: "The quick brown fox jumps over the lazy dog.",
+  },
+};

src/components/badge/badge.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+
+import "./badge.scss";
+
+export type BadgeProps = React.PropsWithChildren<{
+  // Props here.
+}>;
+
+/**
+ * Badge component
+ * @param children
+ * @param props
+ * @constructor
+ */
+export const Badge: React.FC<BadgeProps> = ({ children, ...props }) => (
+  <div className="mykn-badge" {...props}>
+    {children}
+  </div>
+);

src/components/badge/index.ts

@@ -0,0 +1 @@
+export * from "./badge";

src/components/button/button.scss

@@ -45,6 +45,7 @@
     );
     --mykn-button-padding-v: 0;
     --mykn-button-padding-h: 0;
+    flex-shrink: 0;
   }
 
   &--variant-primary {
@@ -68,7 +69,7 @@
 
   &--variant-outline {
     --mykn-button-color-background: transparent;
-    --mykn-button-color-border: var(--theme-shade-700);
+    --mykn-button-color-border: var(--form-color-border);
     --mykn-button-color-shadow: currentColor;
     --mykn-button-color-text: var(--typography-color-body);
 

src/components/datagrid/datagrid.scss

@@ -0,0 +1,148 @@
+@use "../../settings/constants";
+
+.mykn-datagrid {
+  background-color: var(--typography-color-background);
+  border-radius: var(--border-radius-m);
+
+  &__table {
+    border-spacing: 0;
+    width: 100%;
+  }
+
+  &__caption {
+    padding: var(--spacing-v-m) var(--spacing-h-m);
+    text-align: start;
+  }
+
+  &__head {
+    background-color: var(--typography-color-background);
+    position: sticky;
+    top: 0;
+  }
+
+  &__head &__row:first-child &__cell {
+    border-top: 1px solid var(--typography-color-border);
+  }
+
+  &__cell {
+    border-bottom: 1px solid var(--typography-color-border);
+    box-sizing: border-box;
+    padding: var(--spacing-v-m) var(--spacing-h-m);
+  }
+
+  &__cell--type-boolean,
+  &__cell--type-number {
+    padding: var(--spacing-v-m) var(--spacing-h-xxl);
+    text-align: end;
+    width: 0;
+  }
+
+  &__foot {
+    position: sticky;
+    bottom: 0;
+  }
+
+  &__foot &__cell {
+    border-bottom: none;
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+
+  @media screen and (max-width: constants.$breakpoint-desktop - 1px) {
+    background-color: transparent;
+    overflow: visible;
+
+    &__table {
+      display: block;
+    }
+
+    &__caption {
+      background-color: var(--typography-color-background);
+      border-radius: var(--border-radius-m);
+      display: block;
+    }
+
+    &__head {
+      display: none;
+    }
+
+    &__body {
+      display: block;
+    }
+
+    &__row {
+      background-color: var(--typography-color-background);
+      display: flex;
+      flex-wrap: wrap;
+
+      &:nth-child(even) {
+        background-color: var(--typography-color-background-dark);
+      }
+    }
+
+    &__row:nth-child(even) &__cell {
+      border-bottom: 1px solid var(--typography-color-background);
+    }
+
+    &__cell {
+      display: flex;
+      flex-direction: column;
+      gap: var(--spacing-h-m);
+      width: 100%;
+      position: relative;
+
+      .mykn-p {
+        font-weight: var(--typography-font-weight-bold);
+        width: 100%;
+      }
+
+      &:before {
+        color: var(--theme-shade-700);
+        content: attr(aria-description);
+        font-family: Inter, sans-serif;
+        font-size: var(--typography-font-size-body-xs);
+        font-weight: var(--typography-font-weight-normal);
+        line-height: var(--typography-line-height-body-xs);
+        display: block;
+        text-align: start;
+        width: 40%;
+      }
+
+      &:first-child .mykn-a:has(.mykn-icon) {
+        float: right;
+      }
+    }
+
+    &__cell--type-boolean,
+    &__cell--type-number {
+      flex-direction: row;
+      padding: var(--spacing-v-m) var(--spacing-h-m);
+      text-align: right;
+      width: 100%;
+    }
+
+    &__foot {
+      display: flex;
+    }
+
+    &__foot &__row {
+      width: 100%;
+    }
+
+    &__foot &__cell {
+      padding: 0;
+
+      &:before {
+        display: none;
+      }
+    }
+
+    .mykn-toolbar {
+      border-radius: var(--border-radius-m);
+    }
+
+    .mykn-paginator .mykn-icon--spin:first-child {
+      display: none;
+    }
+  }
+}