From 0a7831be208b882d5a48ca75002bf09f59fe327e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adrian=20R=C3=B8stg=C3=A5rd=20Flatner?=
<42931448+adrianflatner@users.noreply.github.com>
Date: Wed, 16 Aug 2023 10:29:02 +0200
Subject: [PATCH] KOMP-221-select (#401)
* Legger til dokumentasjon for Select
* Legger til aria-labels
---
.../stories/components/select/Select.mdx | 28 ++-
.../components/select/Select.stories.tsx | 195 ++++++++++++++++++
2 files changed, 220 insertions(+), 3 deletions(-)
create mode 100644 apps/storybook/stories/components/select/Select.stories.tsx
diff --git a/apps/storybook/stories/components/select/Select.mdx b/apps/storybook/stories/components/select/Select.mdx
index bb0fff47e1..ce55b2ede3 100644
--- a/apps/storybook/stories/components/select/Select.mdx
+++ b/apps/storybook/stories/components/select/Select.mdx
@@ -1,13 +1,35 @@
-import { Meta } from "@storybook/blocks";
+import { Meta, Canvas, Story, Controls } from "@storybook/blocks";
+import * as SelectStories from "./Select.stories";
-
+
# Select
-Se [https://chakra-ui.com/docs/components/select](https://chakra-ui.com/docs/components/select) for eksempler og dokumentasjon.
+Select er et komponent som gjør at brukere kan velge verdier fra forhåndsdefinerte alternativer.
## Ta i bruk
```jsx
import { Select } from "@kvib/react";
```
+
+## Props
+
+
+
+
+## Størrelser
+
+
+
+## Varianter
+
+
+
+## Endre ikon
+
+
+
+## Overstyring av stil
+
+
diff --git a/apps/storybook/stories/components/select/Select.stories.tsx b/apps/storybook/stories/components/select/Select.stories.tsx
new file mode 100644
index 0000000000..7d2e50b3b4
--- /dev/null
+++ b/apps/storybook/stories/components/select/Select.stories.tsx
@@ -0,0 +1,195 @@
+import { Icon, Select as KvibSelect, Stack as KvibStack } from "@kvib/react/src";
+import { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta = {
+ title: "Komponenter/Select",
+ component: KvibSelect,
+ parameters: {
+ docs: {
+ story: { inline: true },
+ canvas: { sourceState: "shown" },
+ },
+ },
+ argTypes: {
+ colorScheme: {
+ description: "The visual color appearance of the component",
+ table: {
+ type: {
+ summary: '"green" | "blue" | "red" | "gray"',
+ },
+ },
+ options: ["green", "blue", "red", "gray"],
+ control: "select",
+ },
+
+ errorBorderColor: {
+ description: "The border color when the select is invalid. Use color keys in `theme.colors`",
+ table: {
+ type: { summary: "string" },
+ },
+ control: "text",
+ },
+
+ focusBorderColor: {
+ description: "The border color when the select is focused. Use color keys in `theme.colors`",
+ table: {
+ type: { summary: "string" },
+ },
+ control: "text",
+ },
+
+ icon: {
+ description: "The icon element to use in the select",
+ table: {
+ type: { summary: "ReactElement>" },
+ },
+ control: "text",
+ },
+
+ iconColor: {
+ description: "The color of the icon",
+ table: {
+ type: { summary: "string" },
+ },
+ control: "text",
+ },
+
+ iconSize: {
+ description: "The size (width and height) of the icon",
+ table: {
+ type: { summary: "string" },
+ },
+ control: "text",
+ },
+
+ isDisabled: {
+ description: "",
+ table: {
+ type: { summary: "boolean" },
+ defaultValue: { summary: false },
+ },
+ control: "boolean",
+ },
+
+ isInvalid: {
+ description:
+ "If true, the form control will be invalid. This has 2 side effects: - The FormLabel and FormErrorIcon will have `data-invalid` set to true - The form element (e.g, Input) will have `aria-invalid` set to true",
+ table: {
+ type: { summary: "boolean" },
+ defaultValue: { summary: false },
+ },
+ control: "boolean",
+ },
+
+ isReadOnly: {
+ description: "If true, the form control will be readonly",
+ table: {
+ type: { summary: "boolean" },
+ defaultValue: { summary: false },
+ },
+ control: "boolean",
+ },
+
+ isRequired: {
+ description:
+ "If true, the form control will be required. This has 2 side effects: - The FormLabel will show a required indicator - The form element (e.g, Input) will have `aria-required` set to true",
+ table: {
+ type: { summary: "boolean" },
+ defaultValue: { summary: false },
+ },
+ control: "boolean",
+ },
+
+ rootProps: {
+ description: "Props to forward to the root div element",
+ table: {
+ type: { summary: "RootProps" },
+ },
+ control: "text",
+ },
+
+ size: {
+ description: "The size of the Select",
+ table: {
+ type: { summary: '"lg" | "md" | "sm" | "xs"' },
+ defaultValue: { summary: "md" },
+ },
+ options: ["lg", "md", "sm", "xs"],
+ control: "radio",
+ },
+
+ variant: {
+ description: "The variant of the Select",
+ table: {
+ type: { summary: '"outline" | "filled" | "flushed" | "unstyled"' },
+ defaultValue: { summary: "outline" },
+ },
+ options: ["outline", "filled", "flushed", "unstyled"],
+ control: "radio",
+ },
+ },
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Select: Story = {
+ args: {},
+ render: (args) => (
+
+
+
+
+
+ ),
+};
+
+export const SelectSizes: Story = {
+ args: {},
+ render: (args) => (
+
+
+
+
+
+
+ ),
+};
+
+export const SelectVariants: Story = {
+ args: {},
+ render: (args) => (
+
+
+
+
+
+
+ ),
+};
+
+export const SelectIcon: Story = {
+ args: {},
+ render: (args) => (
+ }
+ placeholder="Woohoo! Nytt ikon"
+ aria-label="select change Icon"
+ />
+ ),
+};
+
+export const SelectStyles: Story = {
+ args: {},
+ render: (args) => (
+
+ ),
+};