diff --git a/package.json b/package.json index 4910979f..1e54e5c6 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "@nordcloud/gnui", "description": "Nordcloud Design System - a collection of reusable React components used in Nordcloud's SaaS products", - "version": "10.4.3", + "version": "10.4.4", "license": "MIT", "repository": { "type": "git", diff --git a/src/components/sidebar/Sidebar.stories.tsx b/src/components/sidebar/Sidebar.stories.tsx index ef994fd7..4fc65281 100644 --- a/src/components/sidebar/Sidebar.stories.tsx +++ b/src/components/sidebar/Sidebar.stories.tsx @@ -249,3 +249,36 @@ export const CustomWidth: StoryObj = { }, }, }; + +export const Expandable: StoryObj = { + render: () => { + const { isOpen, open, close } = useDisclosure(); + + return ( + + + + + alert("clicked")} + > + Sidebar Content + + + ); + }, + + name: "expandable", + parameters: { + docs: { + story: { + height: "450px", + }, + }, + }, +}; diff --git a/src/components/sidebar/Sidebar.tsx b/src/components/sidebar/Sidebar.tsx index 93acd80f..b137cae6 100644 --- a/src/components/sidebar/Sidebar.tsx +++ b/src/components/sidebar/Sidebar.tsx @@ -1,5 +1,7 @@ import * as React from "react"; +import { When } from "react-if"; import { Button } from "../button"; +import { FlexContainer } from "../container"; import { Background } from "../modal/styles"; import { SVGIcon } from "../svgicon"; import { @@ -34,6 +36,8 @@ export function Sidebar({ headerStyles, contentStyles, onClick = () => undefined, + showExpandButton = false, + onExpandClick = () => undefined, ...props }: SidebarProps) { React.useEffect(() => { @@ -69,14 +73,27 @@ export function Sidebar({ {caption && {caption}} -