chore(Breadcrumb): add size variant

SIKKA-6664[closed]
sikka-software · Mar 26, 2024 · 3c451c0 · 3c451c0
1 parent 09be419
commit 3c451c0
Show file tree

Hide file tree

Showing 8 changed files with 67 additions and 18 deletions.
diff --git a/apps/docs/CHANGELOG.md b/apps/docs/CHANGELOG.md
@@ -1,5 +1,12 @@
 # hawa-docs
 
+## 0.0.57
+
+### Patch Changes
+
+- Updated dependencies
+ - @sikka/hawa@0.30.25
+
 ## 0.0.56
 
 ### Patch Changes

diff --git a/apps/docs/package.json b/apps/docs/package.json
@@ -1,6 +1,6 @@
 {
  "name": "hawa-docs",
- "version": "0.0.56",
+ "version": "0.0.57",
  "private": true,
  "scripts": {
  "dev": "next dev -p 3001",

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @sikka/hawa
 
+## 0.30.25
+
+### Patch Changes
+
+- Export `BreadcrumbItemProps` to be user as a type by consumers
+- Add size variant for `Breadcrumb` component
+
 ## 0.30.24
 
 ### Patch Changes

diff --git a/packages/components/elements/breadcrumb/Breadcrumb.tsx b/packages/components/elements/breadcrumb/Breadcrumb.tsx
@@ -1,5 +1,7 @@
 import React, { FC, ReactNode } from "react";
 
+import { cn } from "@util/index";
+
 export type BreadcrumbItemProps = {
  label: string;
  href: string;
@@ -9,14 +11,26 @@ interface BCTypes {
  breadcrumbLinks: BreadcrumbItemProps[];
  /** The separator between each crumb, can be character or React Node. The default is ">" */
  separator?: string | ReactNode;
+ size?: "normal" | "small" | "xs";
 }
 
 export const Breadcrumb: FC<BCTypes> = ({
  breadcrumbLinks,
  separator = ">",
+ size = "normal",
 }) => {
+ const textStyles = {
+ normal: "",
+ small: "hawa-text-sm",
+ xs: "hawa-text-xs",
+ };
  return (
- <div className="hawa-flex hawa-flex-row hawa-items-center hawa-gap-2 hawa-text-sm">
+ <div
+ className={cn(
+ "hawa-flex hawa-flex-row hawa-items-center hawa-gap-2 hawa-text-sm",
+ textStyles[size],
+ )}
+ >
  {breadcrumbLinks.map((singleBreadcrumbLink, index) => (
  <div
  key={index}

diff --git a/packages/components/package.json b/packages/components/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@sikka/hawa",
- "version": "0.30.24",
+ "version": "0.30.25",
  "description": "Modern UI Kit made with Tailwind",
  "author": {
  "name": "Sikka Software",

diff --git a/packages/storybook/CHANGELOG.md b/packages/storybook/CHANGELOG.md
@@ -1,5 +1,12 @@
 # hawa-storybook
 
+## 0.26.74
+
+### Patch Changes
+
+- Updated dependencies
+ - @sikka/hawa@0.30.25
+
 ## 0.26.73
 
 ### Patch Changes

diff --git a/packages/storybook/package.json b/packages/storybook/package.json
@@ -1,6 +1,6 @@
 {
  "name": "hawa-storybook",
- "version": "0.26.73",
+ "version": "0.26.74",
  "description": "Modern UI Kit made with Tailwind",
  "author": {
  "name": "Sikka Software",

diff --git a/packages/storybook/stories/ElementsStories/Breadcrumb.stories.tsx b/packages/storybook/stories/ElementsStories/Breadcrumb.stories.tsx
@@ -1,23 +1,37 @@
-import type { Meta } from "@storybook/react";
+import { Story } from "@storybook/blocks";
+import type { Meta, StoryObj } from "@storybook/react";
 
 import { Breadcrumb } from "@sikka/hawa/elements/breadcrumb";
 
 const meta = {
  title: "Elements/Breadcrumb",
- component: Breadcrumb
+ component: Breadcrumb,
 } satisfies Meta<typeof Breadcrumb>;
 
 export default meta;
 
-export const Default = () => (
- <div>
- <Breadcrumb
- breadcrumbLinks={[
- { label: "Home", href: "/test" },
- { label: "User", href: "/test1" },
- { label: "New User", href: "/test2" }
- ]}
- separator={">"}
- />
- </div>
-);
+type Story = StoryObj<typeof Breadcrumb>;
+
+export const Default: Story = {
+ render: (args: any, globals: any) => {
+ const locale = globals.globals?.locale === "ar" ? "ar" : "en";
+ const direction = locale === "ar" ? "rtl" : "ltr";
+ // setLocale(locale);
+ return (
+ <div>
+ <Breadcrumb
+ breadcrumbLinks={[
+ { label: "Home", href: "/test" },
+ { label: "User", href: "/test1" },
+ { label: "New User", href: "/test2" },
+ ]}
+ separator={">"}
+ {...args}
+ />
+ </div>
+ );
+ },
+ args: {
+ size: "normal",
+ },
+};