From 2f4af75479461cdeb7d1c0b78538df97c6bfc7f7 Mon Sep 17 00:00:00 2001
From: raczyk <pawel.raczyk@nordcloud.com>
Date: Wed, 13 Mar 2024 17:16:08 +0100
Subject: [PATCH 1/3] Add isError prop to Select

---
 package.json                             |  2 +-
 src/components/select/Select.mdx         |  8 +++++++-
 src/components/select/Select.stories.tsx | 22 ++++++++++++++++++++++
 src/components/select/Select.tsx         | 18 +++++++++++++-----
 4 files changed, 43 insertions(+), 7 deletions(-)

diff --git a/package.json b/package.json
index bf859949..3da0391a 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.3.0",
+  "version": "10.3.3",
   "license": "MIT",
   "repository": {
     "type": "git",
diff --git a/src/components/select/Select.mdx b/src/components/select/Select.mdx
index ec0016d3..dd289788 100644
--- a/src/components/select/Select.mdx
+++ b/src/components/select/Select.mdx
@@ -15,12 +15,18 @@ https://react-select.com/props
   <Story of={SelectStories.Basic} />
 </Canvas>
 
-## Basic Select
+## Disabled
 
 <Canvas>
   <Story of={SelectStories.Disabled} />
 </Canvas>
 
+## Error
+
+<Canvas>
+  <Story of={SelectStories.Error} />
+</Canvas>
+
 ## Multiselect
 
 <Canvas>
diff --git a/src/components/select/Select.stories.tsx b/src/components/select/Select.stories.tsx
index 043e91f4..9fb73834 100644
--- a/src/components/select/Select.stories.tsx
+++ b/src/components/select/Select.stories.tsx
@@ -70,6 +70,28 @@ export const Disabled: StoryObj = {
 
   name: "disabled",
 };
+export const Error: StoryObj = {
+  render: () => {
+    const options = [
+      {
+        value: "chocolate",
+        label: "Chocolate",
+      },
+    ];
+
+    return (
+      <div
+        style={{
+          height: "150px",
+        }}
+      >
+        <Select isError options={options} />
+      </div>
+    );
+  },
+
+  name: "Error",
+};
 
 export const Multiselect: StoryObj = {
   render: () => {
diff --git a/src/components/select/Select.tsx b/src/components/select/Select.tsx
index 50ca4a45..da9cbd90 100644
--- a/src/components/select/Select.tsx
+++ b/src/components/select/Select.tsx
@@ -6,15 +6,20 @@ import ReactSelect, {
   type StylesConfig,
   type Props as ReactSelectProps,
 } from "react-select";
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 import theme from "../../theme";
 
-const SelectContainer = styled.div`
+const SelectContainer = styled.div<{ isError?: boolean }>`
   .react-select {
     &-container {
       & > .react-select__control {
         background: ${theme.color.field.default};
         border: 1px solid ${theme.color.border.input};
+        ${({ isError }) =>
+          isError &&
+          css`
+            border: 1px solid ${theme.color.border.error};
+          `}
         &:hover {
           border: 1px solid ${theme.color.border.border02};
         }
@@ -57,7 +62,7 @@ const SelectContainer = styled.div`
       }
     }
     &__placeholder {
-      color: ${theme.color.text.text03};
+      color: ${theme.color.text.text02};
     }
     &__single-value {
       color: ${theme.color.text.text01};
@@ -111,6 +116,7 @@ export type SelectOption = {
 
 export type SelectColoredOption = SelectOption & {
   color: string;
+  isError?: boolean;
 };
 
 function getDefaultStyles<
@@ -242,11 +248,13 @@ function SelectInner<
   {
     styles = getDefaultStyles(),
     ...props
-  }: ReactSelectProps<Option, IsMulti, Group>,
+  }: ReactSelectProps<Option, IsMulti, Group> & {
+    isError?: boolean;
+  },
   ref: React.ForwardedRef<SelectInstance<Option, IsMulti, Group>>
 ) {
   return (
-    <SelectContainer>
+    <SelectContainer isError={props.isError}>
       <ReactSelect
         ref={ref}
         className="react-select-container"

From 451ed81a2348b2ca2468522f6cf6c93ce30db192 Mon Sep 17 00:00:00 2001
From: raczyk <pawel.raczyk@nordcloud.com>
Date: Wed, 13 Mar 2024 17:20:52 +0100
Subject: [PATCH 2/3] fix naming

---
 src/components/select/Select.mdx         | 2 +-
 src/components/select/Select.stories.tsx | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/select/Select.mdx b/src/components/select/Select.mdx
index dd289788..69dd254c 100644
--- a/src/components/select/Select.mdx
+++ b/src/components/select/Select.mdx
@@ -24,7 +24,7 @@ https://react-select.com/props
 ## Error
 
 <Canvas>
-  <Story of={SelectStories.Error} />
+  <Story of={SelectStories.isError} />
 </Canvas>
 
 ## Multiselect
diff --git a/src/components/select/Select.stories.tsx b/src/components/select/Select.stories.tsx
index 9fb73834..b959643c 100644
--- a/src/components/select/Select.stories.tsx
+++ b/src/components/select/Select.stories.tsx
@@ -70,7 +70,7 @@ export const Disabled: StoryObj = {
 
   name: "disabled",
 };
-export const Error: StoryObj = {
+export const isError: StoryObj = {
   render: () => {
     const options = [
       {
@@ -90,7 +90,7 @@ export const Error: StoryObj = {
     );
   },
 
-  name: "Error",
+  name: "isError",
 };
 
 export const Multiselect: StoryObj = {

From ac717018eeb45568d345b7bc541ff11f59cb98d0 Mon Sep 17 00:00:00 2001
From: raczyk <pawel.raczyk@nordcloud.com>
Date: Thu, 14 Mar 2024 10:05:05 +0100
Subject: [PATCH 3/3] fix version

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 3da0391a..5d2fa776 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.3.3",
+  "version": "10.3.1",
   "license": "MIT",
   "repository": {
     "type": "git",