Skip to content

Commit

Permalink
💄 make examples 100% page width
Browse files Browse the repository at this point in the history
  • Loading branch information
@timbryandev
timbryandev committed Sep 15, 2023
1 parent 2290f68 commit 0f5e73c
Show file tree
Hide file tree
Showing 2 changed files with 150 additions and 132 deletions.
1 change: 1 addition & 0 deletions lib/Resizeable/styles.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ $gutterColour: #006aff;
.resizeable {
position: relative;
display: flex;
width: 100%;

&__wrapper {
position: relative;
Expand Down
281 changes: 149 additions & 132 deletions stories/components/Resizable.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,131 +26,17 @@ export function Resizeable() {
flex: "1",
minHeight: "0",
height: 600,
width: "100%",
}}
>
<ResizableComponent
defaultWidth="240px"
maxWidth="33.33%"
minWidth="240px"
maxWidth="33.33%"
useGutterOffset
>
<Layout.InlineSidebar isFinder>
<FinderNavigationComponent>
<FinderNavigationComponent.Group>
<FinderNavigationComponent.Item hoverSettings={false}>
<FinderNavigationComponent.ItemContent>
<a className="finder-item-link" href="google.com">
<Icon name="item" />
All items
<FinderNavigationComponent.ItemSettings>
200
</FinderNavigationComponent.ItemSettings>
</a>
</FinderNavigationComponent.ItemContent>
</FinderNavigationComponent.Item>

<FinderNavigationComponent.Item hoverSettings={false}>
<FinderNavigationComponent.ItemContent>
<a className="finder-item-link" href="google.com">
<Icon name="user" />
Assigned items
<FinderNavigationComponent.ItemSettings>
40
</FinderNavigationComponent.ItemSettings>
</a>
</FinderNavigationComponent.ItemContent>
</FinderNavigationComponent.Item>
</FinderNavigationComponent.Group>
<FinderNavigationComponent.Group title="folder">
<FinderNavigationComponent.Item>
<FinderNavigationComponent.ItemContent isFolder>
<a className="finder-item-link" href="google.com">
<Icon name="folder" />
Another Folder
</a>
</FinderNavigationComponent.ItemContent>
<FinderNavigationComponent.Item active>
<FinderNavigationComponent.ItemContent isFolder>
<a className="finder-item-link" href="google.com">
<Icon name="folderOpen" />
Another Folder
</a>
</FinderNavigationComponent.ItemContent>
<FinderNavigationComponent.Item>
<FinderNavigationComponent.ItemContent isFolder>
<a className="finder-item-link" href="google.com">
<Icon name="folder" />
Another Folder
</a>
</FinderNavigationComponent.ItemContent>
<FinderNavigationComponent.Item>
<FinderNavigationComponent.ItemContent isFolder>
<a className="finder-item-link" href="google.com">
<Icon name="folder" />
Another Folder
</a>
</FinderNavigationComponent.ItemContent>
<FinderNavigationComponent.Item>
<FinderNavigationComponent.ItemContent isFolder>
<a className="finder-item-link" href="google.com">
<Icon name="folder" />
Another Folder
</a>
</FinderNavigationComponent.ItemContent>
<FinderNavigationComponent.Item>
<FinderNavigationComponent.ItemContent isFolder>
<a
className="finder-item-link"
href="google.com"
>
<Icon name="folder" />
Another Folder
</a>
</FinderNavigationComponent.ItemContent>
<FinderNavigationComponent.Item>
<FinderNavigationComponent.ItemContent isFolder>
<a
className="finder-item-link"
href="google.com"
>
<Icon name="folder" />
Another Folder
</a>
</FinderNavigationComponent.ItemContent>
</FinderNavigationComponent.Item>
</FinderNavigationComponent.Item>
</FinderNavigationComponent.Item>
</FinderNavigationComponent.Item>
</FinderNavigationComponent.Item>
<FinderNavigationComponent.Item>
<FinderNavigationComponent.ItemContent isFolder>
<a className="finder-item-link" href="google.com">
<Icon name="folder" />
Another Folder
</a>
</FinderNavigationComponent.ItemContent>
</FinderNavigationComponent.Item>
</FinderNavigationComponent.Item>
<FinderNavigationComponent.Item>
<FinderNavigationComponent.ItemContent isFolder>
<a className="finder-item-link" href="google.com">
<Icon name="folder" />
Another Folder
</a>
</FinderNavigationComponent.ItemContent>
</FinderNavigationComponent.Item>
</FinderNavigationComponent.Item>
<FinderNavigationComponent.Item>
<FinderNavigationComponent.ItemContent isFolder>
<a className="finder-item-link" href="google.com">
<Icon name="folder" />
Another Folder
</a>
</FinderNavigationComponent.ItemContent>
</FinderNavigationComponent.Item>
</FinderNavigationComponent.Group>
</FinderNavigationComponent>
</Layout.InlineSidebar>
{/* eslint-disable-next-line no-use-before-define */}
<FolderMenu />
</ResizableComponent>
</div>
</StoryItem>
Expand All @@ -166,6 +52,7 @@ export function Resizeable() {
minHeight: "0",
border: "1px solid red",
height: 200,
width: "100%",
}}
>
<ResizableComponent
Expand Down Expand Up @@ -212,23 +99,153 @@ export function Resizeable() {
title="Single resizeable element"
description="Could be used to reveal a before and after of two images"
>
<div style={{ border: "1px solid red", width: "50%" }}>
<p>Not resizeable</p>
</div>
<ResizableComponent
defaultWidth="50%"
maxWidth="75%"
minWidth="200px"
useGutterOffset
>
<div style={{ border: "1px solid green", width: "50%" }}>
<p>Hello</p>
<div style={{ width: "100%" }}>
<div style={{ border: "1px solid red", width: "50%" }}>
<p>Not resizeable</p>
</div>
<ResizableComponent
defaultWidth="100%"
maxWidth="75%"
minWidth="200px"
useGutterOffset
>
<div style={{ border: "1px solid green" }}>
<p>Hello</p>
</div>
</ResizableComponent>
<div style={{ border: "1px solid red", width: "50%" }}>
<p>Not resizeable</p>
</div>
</ResizableComponent>
<div style={{ border: "1px solid red", width: "50%" }}>
<p>Not resizeable</p>
</div>
</StoryItem>
</>
);
}

function FolderMenu() {
return (
<Layout.InlineSidebar isFinder>
<FinderNavigationComponent>
<FinderNavigationComponent.Group>
<FinderNavigationComponent.Item hoverSettings={false}>
<FinderNavigationComponent.ItemContent>
<a className="finder-item-link" href="https://www.google.com">
<Icon name="item" />
All items
<FinderNavigationComponent.ItemSettings>
200
</FinderNavigationComponent.ItemSettings>
</a>
</FinderNavigationComponent.ItemContent>
</FinderNavigationComponent.Item>

<FinderNavigationComponent.Item hoverSettings={false}>
<FinderNavigationComponent.ItemContent>
<a className="finder-item-link" href="https://www.google.com">
<Icon name="user" />
Assigned items
<FinderNavigationComponent.ItemSettings>
40
</FinderNavigationComponent.ItemSettings>
</a>
</FinderNavigationComponent.ItemContent>
</FinderNavigationComponent.Item>
</FinderNavigationComponent.Group>
<FinderNavigationComponent.Group title="folder">
<FinderNavigationComponent.Item>
<FinderNavigationComponent.ItemContent isFolder>
<a className="finder-item-link" href="https://www.google.com">
<Icon name="folder" />
Another Folder
</a>
</FinderNavigationComponent.ItemContent>
<FinderNavigationComponent.Item active>
<FinderNavigationComponent.ItemContent isFolder>
<a className="finder-item-link" href="https://www.google.com">
<Icon name="folderOpen" />
Another Folder
</a>
</FinderNavigationComponent.ItemContent>
<FinderNavigationComponent.Item>
<FinderNavigationComponent.ItemContent isFolder>
<a className="finder-item-link" href="https://www.google.com">
<Icon name="folder" />
Another Folder
</a>
</FinderNavigationComponent.ItemContent>
<FinderNavigationComponent.Item>
<FinderNavigationComponent.ItemContent isFolder>
<a
className="finder-item-link"
href="https://www.google.com"
>
<Icon name="folder" />
Another Folder
</a>
</FinderNavigationComponent.ItemContent>
<FinderNavigationComponent.Item>
<FinderNavigationComponent.ItemContent isFolder>
<a
className="finder-item-link"
href="https://www.google.com"
>
<Icon name="folder" />
Another Folder
</a>
</FinderNavigationComponent.ItemContent>
<FinderNavigationComponent.Item>
<FinderNavigationComponent.ItemContent isFolder>
<a
className="finder-item-link"
href="https://www.google.com"
>
<Icon name="folder" />
Another Folder
</a>
</FinderNavigationComponent.ItemContent>
<FinderNavigationComponent.Item>
<FinderNavigationComponent.ItemContent isFolder>
<a
className="finder-item-link"
href="https://www.google.com"
>
<Icon name="folder" />
Another Folder
</a>
</FinderNavigationComponent.ItemContent>
</FinderNavigationComponent.Item>
</FinderNavigationComponent.Item>
</FinderNavigationComponent.Item>
</FinderNavigationComponent.Item>
</FinderNavigationComponent.Item>
<FinderNavigationComponent.Item>
<FinderNavigationComponent.ItemContent isFolder>
<a className="finder-item-link" href="https://www.google.com">
<Icon name="folder" />
Another Folder
</a>
</FinderNavigationComponent.ItemContent>
</FinderNavigationComponent.Item>
</FinderNavigationComponent.Item>
<FinderNavigationComponent.Item>
<FinderNavigationComponent.ItemContent isFolder>
<a className="finder-item-link" href="https://www.google.com">
<Icon name="folder" />
Another Folder
</a>
</FinderNavigationComponent.ItemContent>
</FinderNavigationComponent.Item>
</FinderNavigationComponent.Item>
<FinderNavigationComponent.Item>
<FinderNavigationComponent.ItemContent isFolder>
<a className="finder-item-link" href="https://www.google.com">
<Icon name="folder" />
Another Folder
</a>
</FinderNavigationComponent.ItemContent>
</FinderNavigationComponent.Item>
</FinderNavigationComponent.Group>
</FinderNavigationComponent>
</Layout.InlineSidebar>
);
}

0 comments on commit 0f5e73c

Please sign in to comment.