Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add examples for options with descriptions for combobox and dropdown #3371

Merged
merged 16 commits into from
May 28, 2024
Merged
Prev Previous commit
Next Next commit
added storybook example for dropdown secondary label
  • Loading branch information
ThusharaJ07 committed May 14, 2024
commit c25d56f8cf7635e4be3f9b59e09122eafb7176ef
36 changes: 35 additions & 1 deletion packages/core/stories/dropdown/dropdown.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,11 @@
FormFieldHelperText,
FormFieldLabel,
StackLayout,
Text,
} from "@salt-ds/core";

import { Meta, StoryFn } from "@storybook/react";
import { GB, US } from "@salt-ds/countries";
import { CountryCode, GB, US } from "@salt-ds/countries";
import { SyntheticEvent, useState } from "react";
import { LocationIcon } from "@salt-ds/icons";

Expand Down Expand Up @@ -313,3 +314,36 @@
</Dropdown>
);
};

export type LargeCity = {
name: string;
countryCode: CountryCode;
};

export const largestCities: LargeCity[] = [

Check warning on line 323 in packages/core/stories/dropdown/dropdown.stories.tsx

View workflow job for this annotation

GitHub Actions / lint

The story should use PascalCase notation: largestCities
{ name: "Tokyo", countryCode: "JP" },
{ name: "Delhi", countryCode: "IN" },
{ name: "Shanghai", countryCode: "CN" },
{ name: "São Paulo", countryCode: "BR" },
{ name: "Mexico City", countryCode: "MX" },
{ name: "Cairo", countryCode: "EG" },
];

export const SecondaryLabel: StoryFn<typeof Dropdown> = (args) => {
return (
<Dropdown
style={{ width: "266px" }}
valueToString={(city: LargeCity) => city.name}
placeholder="Secondary label example"
>
{largestCities.map((city) => (
<Option key={city.countryCode} value={city}>
<StackLayout gap={0.25} align="start">
<Text>{city.name}</Text>
<Text color="secondary">{city.countryCode}</Text>
</StackLayout>
</Option>
))}
</Dropdown>
);
};
Loading