Skip to content

Commit

Permalink
clean stories, pass header as node
Browse files Browse the repository at this point in the history
  • Loading branch information
@Fercas123
Fercas123 committed Oct 15, 2024
1 parent b8f7751 commit f9f007e
Show file tree
Hide file tree
Showing 3 changed files with 13 additions and 231 deletions.
15 changes: 3 additions & 12 deletions packages/lab/src/overlay/OverlayHeader.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { H4, Text, makePrefixer } from "@salt-ds/core";
import { Text, makePrefixer } from "@salt-ds/core";
import { useComponentCssInjection } from "@salt-ds/styles";
import { useWindow } from "@salt-ds/window";
import clsx from "clsx";
Expand All @@ -25,10 +25,6 @@ export interface OverlayPanelContentProps
* Header text
*/
header?: ReactNode;
/**
* The id of the Overlay Header, used for aria-labelledby on OverlayPanel
**/
id?: string;
/**
* Preheader text is displayed just above the header
**/
Expand All @@ -46,20 +42,15 @@ export const OverlayHeader = forwardRef<
window: targetWindow,
});

const { className, description, header, actions, id, preheader, ...rest } =
props;
const { className, description, header, actions, preheader, ...rest } = props;

return (
<div className={clsx(withBaseName(), className)} {...rest} ref={ref}>
<div className={withBaseName("container")}>
{preheader && (
<Text className={withBaseName("preheader")}>{preheader}</Text>
)}
{header && (
<H4 id={id} className={withBaseName("header")}>
{header}
</H4>
)}
{header}
{description && (
<Text color="secondary" className={withBaseName("description")}>
{description}
Expand Down
8 changes: 6 additions & 2 deletions packages/lab/stories/overlay/overlay.qa.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import {
Button,
H4,
Overlay,
OverlayPanel,
OverlayPanelContent,
Expand Down Expand Up @@ -30,7 +31,7 @@ export const Default: StoryFn<QAContainerProps> = (props) => {
<Button>Show Overlay</Button>
</OverlayTrigger>
<OverlayPanel>
<OverlayHeader header="Title" />
<OverlayHeader header={<H4>Header block</H4>} />
<OverlayPanelContent>
<div>Content of Overlay</div>
</OverlayPanelContent>
Expand Down Expand Up @@ -68,7 +69,10 @@ export const CloseButton: StoryFn<QAContainerProps> = (props) => {
<Button>Show Overlay</Button>
</OverlayTrigger>
<OverlayPanel>
<OverlayHeader header="Title" actions={<CloseButton />} />
<OverlayHeader
header={<H4>Header block</H4>}
actions={<CloseButton />}
/>
<OverlayPanelContent>
<div>Content of Overlay</div>
</OverlayPanelContent>
Expand Down
221 changes: 4 additions & 217 deletions packages/lab/stories/overlay/overlay.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
import {
Button,
Checkbox,
CheckboxGroup,
Divider,
H4,
Overlay,
OverlayPanel,
OverlayPanelContent,
Expand All @@ -16,44 +14,12 @@ import {
import { CloseIcon } from "@salt-ds/icons";
import { OverlayHeader } from "@salt-ds/lab";
import type { Meta, StoryFn } from "@storybook/react";
import { type ChangeEvent, useState } from "react";
import { useState } from "react";

export default {
title: "Lab/Overlay Header",
} as Meta<typeof Overlay>;

export const Default: StoryFn<OverlayProps> = ({ ...args }) => {
const id = useId();

return (
<Overlay {...args}>
<OverlayTrigger>
<Button>Show Overlay</Button>
</OverlayTrigger>

<OverlayPanel aria-labelledby={id}>
<OverlayHeader id={id} header="Title" />
<OverlayPanelContent>Content of Overlay</OverlayPanelContent>
</OverlayPanel>
</Overlay>
);
};

export const Bottom = Default.bind({});
Bottom.args = {
placement: "bottom",
};

export const Left = Default.bind({});
Left.args = {
placement: "left",
};

export const Right = Default.bind({});
Right.args = {
placement: "right",
};

export const Header = ({ onOpenChange }: OverlayProps) => {
const [open, setOpen] = useState(false);
const id = useId();
Expand All @@ -74,7 +40,7 @@ export const Header = ({ onOpenChange }: OverlayProps) => {
width: 500,
}}
>
<OverlayHeader id={id} header="Header block" />
<OverlayHeader header={<H4 id={id}>Header block</H4>} />
<OverlayPanelContent>
<StackLayout gap={1}>
<Text>
Expand Down Expand Up @@ -130,8 +96,7 @@ export const HeaderWithCloseButton = ({ onOpenChange }: OverlayProps) => {
}}
>
<OverlayHeader
id={id}
header="Header block"
header={<H4 id={id}>Header block</H4>}
actions={<CloseButton />}
/>
<OverlayPanelContent>
Expand All @@ -154,181 +119,3 @@ export const HeaderWithCloseButton = ({ onOpenChange }: OverlayProps) => {
</Overlay>
);
};

export const LongContent = () => {
const [open, setOpen] = useState(true);
const id = useId();

const onOpenChange = (newOpen: boolean) => {
setOpen(newOpen);
};

const handleClose = () => setOpen(false);

const CloseButton = () => (
<Button
aria-label="Close overlay"
appearance="transparent"
sentiment="neutral"
onClick={handleClose}
>
<CloseIcon aria-hidden />
</Button>
);

return (
<Overlay open={open} onOpenChange={onOpenChange}>
<OverlayTrigger>
<Button>Show Overlay</Button>
</OverlayTrigger>
<OverlayPanel aria-labelledby={id} style={{ width: 300 }}>
<OverlayHeader id={id} header="New feature" actions={<CloseButton />} />
<OverlayPanelContent style={{ height: 100 }}>
<StackLayout gap={1}>
<Text>
A global leader, we deliver strategic advice and solutions,
including capital raising, risk management, and trade finance to
corporations, institutions and governments. A global leader, we
deliver strategic advice and solutions, including capital raising,
risk management, and trade finance to corporations, institutions
and governments. A global leader, we deliver strategic advice and
solutions, including capital raising, risk management, and trade
finance to corporations, institutions and governments.
</Text>
<Text>
A global leader, we deliver strategic advice and solutions,
including capital raising, risk management, and trade finance to
corporations, institutions and governments. A global leader, we
deliver strategic advice and solutions, including capital raising,
risk management, and trade finance to corporations, institutions
and governments. A global leader, we deliver strategic advice and
solutions, including capital raising, risk management, and trade
finance to corporations, institutions and governments. A global
leader, we deliver strategic advice and solutions, including
capital raising, risk management, and trade finance to
corporations, institutions and governments.
</Text>
<Text>Markets</Text>
<Text>
Serving the world's largest corporate clients and institutional
investors, we support the investment cycle with market-leading
research, analytics and trade execution across multiple asset
classes.
</Text>
</StackLayout>
</OverlayPanelContent>
</OverlayPanel>
</Overlay>
);
};

const checkboxesData = [
{
label: "Overlay",
value: "overlay",
},
{
label: "Row",
value: "row",
},
];

const WithActionsContent = ({ onClose }: { onClose: () => void }) => {
const [controlledValues, setControlledValues] = useState([
checkboxesData[0].value,
]);

const [checkboxState, setCheckboxState] = useState({
checked: false,
indeterminate: true,
});

const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
const updatedChecked = event.target.checked;
setCheckboxState({
indeterminate: !updatedChecked && checkboxState.checked,
checked:
checkboxState.indeterminate && updatedChecked ? false : updatedChecked,
});
};

const handleGroupChange = (event: ChangeEvent<HTMLInputElement>) => {
const value = event.target.value;
if (controlledValues.indexOf(value) === -1) {
setControlledValues((prevControlledValues) => [
...prevControlledValues,
value,
]);
} else {
setControlledValues((prevControlledValues) =>
prevControlledValues.filter(
(controlledValue) => controlledValue !== value,
),
);
}
};

const indeterminate = controlledValues.length <= 1;

const handleExport = () => {
console.log(`${controlledValues.length} file(s) exported`);
onClose();
};

return (
<StackLayout gap={1}>
<Checkbox
indeterminate={indeterminate}
checked={!indeterminate}
label={`${controlledValues.length} of 2 selected`}
onChange={handleChange}
/>
<Divider variant="secondary" />
<CheckboxGroup
checkedValues={controlledValues}
onChange={handleGroupChange}
>
{checkboxesData.map((data) => (
<Checkbox key={data.value} {...data} />
))}
</CheckboxGroup>
<Divider variant="secondary" />
<Button style={{ float: "right", marginRight: 2 }} onClick={handleExport}>
Export
</Button>
</StackLayout>
);
};

export const WithActions = ({ onOpenChange }: OverlayProps) => {
const [open, setOpen] = useState(false);
const id = useId();

const onChange = (newOpen: boolean) => {
setOpen(newOpen);
onOpenChange?.(newOpen);
};

return (
<Overlay open={open} onOpenChange={onChange} placement="bottom">
<OverlayTrigger>
<Button>Show Overlay</Button>
</OverlayTrigger>
<OverlayPanel
style={{
width: 246,
}}
aria-labelledby={id}
>
<OverlayHeader id={id} header="Export" />
<OverlayPanelContent>
<WithActionsContent
onClose={() => {
setOpen(false);
}}
/>
</OverlayPanelContent>
</OverlayPanel>
</Overlay>
);
};

0 comments on commit f9f007e

Please sign in to comment.