From d906ef371ca16282e628b6c4840e9bbaea2f4027 Mon Sep 17 00:00:00 2001
From: zaaakher <zakhermasri@gmail.com>
Date: Fri, 1 Dec 2023 06:41:04 +0300
Subject: [PATCH] SIKKA-5822[closed]

---
 CHANGELOG.md                              | 22 ++++++++++++++--------
 README.md                                 |  9 ++++++---
 components/elements/Sheet.tsx             | 11 ++++++++++-
 package.json                              |  2 +-
 stories/ElementsStories/Sheet.stories.tsx | 22 ++++++++++++++++++++--
 5 files changed, 51 insertions(+), 15 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 029b408d2..b9c4f97ae 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,14 +1,20 @@
 # @sikka/hawa
 
+## 0.20.1
+
+### Patch Changes
+
+- Fixed close button in `Sheet`
+
 ## 0.20.0
 
 ### Minor Changes
 
-- - Added `ContactForm`
-  - Fixed `Textarea` placeholder text color
-  - Removed all shadows of `FeedbackForm` and `ContactForm` when `cardless` prop is true
-  - exporting `TextInputType`
-  - General cleanup
+- Added `ContactForm`
+- Fixed `Textarea` placeholder text color
+- Removed all shadows of `FeedbackForm` and `ContactForm` when `cardless` prop is true
+- exporting `TextInputType`
+- General cleanup
 
 ## 0.19.41
 
@@ -26,9 +32,9 @@
 
 ### Patch Changes
 
-- - Added background to `Radio`
-  - Fixed responsiveness of `PricingPlans`
-  - Added priceless option to `PricingCard`
+- Added background to `Radio`
+- Fixed responsiveness of `PricingPlans`
+- Added priceless option to `PricingCard`
 
 ## 0.19.38
 
diff --git a/README.md b/README.md
index 05aaa370d..19e488ae5 100644
--- a/README.md
+++ b/README.md
@@ -3,8 +3,8 @@
 </p>
 
 <p align="center">
-  <a href="https://hawa.style/docs">Documentation</a>
-  <!-- <a href="https://hawa.style/changelog">Changelog</a> | -->
+  <a href="https://hawa.style/docs">Documentation</a> - 
+  <a href="https://github.com/sikka-software/Hawa/blob/main/CHANGELOG.md">Changelog</a>
   <!-- <a href="https://hawa.style/roadmap">Roadmap</a> -->
 </p>
 
@@ -64,7 +64,6 @@ npm install @sikka/hawa
 
 </br>
 
-
 # Contributing
 
 To contribute, clone this github repository and run the development server
@@ -75,11 +74,15 @@ npm run storybook
 // To run the landing pages
 npm run dev
 ```
+
 To build the library to /dist
+
 ```
 npm run build-lib
 ```
+
 To generate /dist/index.css
+
 ```
 npm run build-css
 ```
diff --git a/components/elements/Sheet.tsx b/components/elements/Sheet.tsx
index d1c38de9c..47adfdc95 100644
--- a/components/elements/Sheet.tsx
+++ b/components/elements/Sheet.tsx
@@ -69,7 +69,16 @@ const SheetContent = React.forwardRef<
       >
         {children}
         {!hideCloseButton && (
-          <SheetPrimitive.Close className="hawa-absolute hawa-right-4 hawa-top-4 hawa-rounded-sm hawa-opacity-70 hawa-ring-offset-background hawa-transition-opacity hover:hawa-opacity-100 focus:hawa-outline-none focus:hawa-ring-2 focus:hawa-ring-ring focus:hawa-ring-offset-2 disabled:hawa-pointer-events-none data-[state=open]:hawa-bg-secondary">
+          <SheetPrimitive.Close
+            className={cn(
+              "hawa-absolute hawa-rounded-sm hawa-opacity-70 hawa-ring-offset-background hawa-transition-opacity hover:hawa-opacity-100 focus:hawa-outline-none focus:hawa-ring-2 focus:hawa-ring-ring focus:hawa-ring-offset-2 disabled:hawa-pointer-events-none data-[state=open]:hawa-bg-secondary",
+              {
+                "hawa-right-4 hawa-top-4": side === "left" || side === "bottom",
+                "hawa-left-4 hawa-top-4": side === "right",
+                "hawa-right-4 hawa-bottom-4": side === "top",
+              }
+            )}
+          >
             <svg
               aria-label="Close Icon"
               aria-hidden="true"
diff --git a/package.json b/package.json
index 1d5a6ec9b..bc8ad62a4 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.20.0",
+  "version": "0.20.1",
   "description": "Modern UI Kit made with Tailwind",
   "author": {
     "name": "Sikka Software",
diff --git a/stories/ElementsStories/Sheet.stories.tsx b/stories/ElementsStories/Sheet.stories.tsx
index 5340b1b6e..05d9bcf20 100644
--- a/stories/ElementsStories/Sheet.stories.tsx
+++ b/stories/ElementsStories/Sheet.stories.tsx
@@ -40,7 +40,7 @@ export const Default: Story = {
     const [isOpen, setIsOpen] = useState(false);
     const [side, setSide] = useState<any>("right");
     return (
-      <div dir={direction}>
+      <div>
         <Sheet open={isOpen} onOpenChange={setIsOpen}>
           <SheetTrigger
             asChild
@@ -55,14 +55,32 @@ export const Default: Story = {
               <Button onClick={() => setSide("bottom")}>Bottom Sheet</Button>
             </div>
           </SheetTrigger>
-          <SheetContent {...args} side={side}>
+          <SheetContent {...args} side={side} >
             <SheetHeader className="hawa-p-10">
               <SheetTitle>Are you sure absolutely sure?</SheetTitle>
               <SheetDescription>
                 This action cannot be undone. This will permanently delete your
                 account and remove your data from our servers.
               </SheetDescription>
+              <div>
+                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vero
+                ipsum saepe quaerat, voluptatem molestias hic porro sit fuga
+                beatae tempora est dolore quod alias cum debitis animi maxime
+                provident laboriosam!
+              </div>
+
             </SheetHeader>
+              {/* <div className="hawa-flex hawa-flex-col hawa-overflow-y-auto hawa-h-96 hawa-bg-red-300 hawa-h-">
+                <div className="hawa-bg-gray-200 hawa-p-10">Item</div>
+                <div className="hawa-bg-gray-200 hawa-p-10">Item</div>
+                <div className="hawa-bg-gray-200 hawa-p-10">Item</div>
+                <div className="hawa-bg-gray-200 hawa-p-10">Item</div>
+                <div className="hawa-bg-gray-200 hawa-p-10">Item</div>
+                <div className="hawa-bg-gray-200 hawa-p-10">Item</div>
+                <div className="hawa-bg-gray-200 hawa-p-10">Item</div>
+                <div className="hawa-bg-gray-200 hawa-p-10">Item</div>
+                <div className="hawa-bg-gray-200 hawa-p-10">Item</div>
+              </div> */}
           </SheetContent>
         </Sheet>
       </div>