chore: fixed broken storybook examples and improved them (#125)

adaptui · Oct 30, 2020 · 443f766 · 443f766
1 parent 7cc6bd5
commit 443f766
Show file tree

Hide file tree

Showing 2 changed files with 91 additions and 31 deletions.
diff --git a/src/select/stories/Select.stories.tsx b/src/select/stories/Select.stories.tsx
@@ -15,36 +15,49 @@ export default {
 } as Meta;
 
 const countries = [
-  { name: "australia" },
-  { name: "russia" },
-  { name: "new zealand" },
-  { name: "india" },
-  { name: "california" },
-  { name: "ireland" },
-  { name: "indonesia" },
-  { name: "chennai" },
-  { name: "mexico" },
-  { name: "sydney" },
-  { name: "africa" },
-  { name: "las vagas" },
-  { name: "vietnam" },
-  { name: "zimbabwe" },
+  { name: "australia", emoji: "🇦🇺" },
+  { name: "russia", emoji: "🇷🇺" },
+  { name: "new zealand", emoji: "🇳🇿" },
+  { name: "india", emoji: "🇮🇳" },
+  { name: "niger", emoji: "🇳🇪" },
+  { name: "canada", emoji: "🇨🇦" },
+  { name: "indonesia", emoji: "🇮🇩" },
+  { name: "portugal", emoji: "🇵🇹" },
+  { name: "norway", emoji: "🇳🇴" },
+  { name: "switzerland", emoji: "🇨🇭" },
+  { name: "africa", emoji: "🇨🇫" },
+  { name: "colombia", emoji: "🇨🇴" },
+  { name: "costa rica", emoji: "🇨🇷" },
+  { name: "zimbabwe", emoji: "🇿🇼" },
 ];
 
 const SelectPicker: React.FC<{ state: any }> = ({ state }) => {
   return (
-    <Select {...state} onChange={(value: any) => console.log(value)}>
-      <SelectTrigger {...state}>
-        <b style={{ color: state.isPlaceholder ? "gray" : "black" }}>
+    <Select
+      className="select"
+      {...state}
+      onChange={(value: any) => console.log(value)}
+    >
+      <SelectTrigger className="select__header" {...state}>
+        <b style={{ color: state.isPlaceholder ? "#5d5b97" : "#33324d" }}>
           {state.isPlaceholder ? "Select one.." : state.selected.join(",")}
         </b>
       </SelectTrigger>
 
-      <SelectMenu {...state} style={{ maxHeight: 200, overflowY: "scroll" }}>
+      <SelectMenu
+        {...state}
+        className="select__dropdown"
+        style={{ maxHeight: 200, overflowY: "scroll" }}
+      >
         {countries.map(item => {
           return (
-            <SelectOption {...state} key={item.name} value={item.name}>
-              {item.name}
+            <SelectOption
+              className="select__dropdown--item"
+              {...state}
+              key={item.name}
+              value={item.name}
+            >
+              {item.emoji} - {item.name}
             </SelectOption>
           );
         })}
@@ -62,26 +75,70 @@ export const Default: React.FC = () => {
 export const MultiSelect: React.FC = () => {
   const state = useSelectState({ allowMultiselect: true });
 
-  return <SelectPicker state={state} />;
+  return (
+    <Select
+      className="select"
+      {...state}
+      onChange={(value: any) => console.log(value)}
+    >
+      <SelectTrigger className="select__header" {...state}>
+        <b style={{ color: state.isPlaceholder ? "#5d5b97" : "#33324d" }}>
+          {state.isPlaceholder ? "Select one.." : state.selected.join(" ")}
+        </b>
+      </SelectTrigger>
+
+      <SelectMenu
+        {...state}
+        className="select__dropdown"
+        style={{ maxHeight: 200, overflowY: "scroll" }}
+      >
+        {countries.map(item => {
+          return (
+            <SelectOption
+              className="select__dropdown--item"
+              {...state}
+              key={item.name}
+              value={item.emoji}
+            >
+              {item.emoji} - {item.name}
+            </SelectOption>
+          );
+        })}
+      </SelectMenu>
+    </Select>
+  );
 };
 
 export const MultiSelectCheckboxes: React.FC = () => {
   const state = useSelectState({ allowMultiselect: true });
 
   return (
-    <Select {...state} onChange={(value: any) => console.log(value)}>
-      <SelectTrigger {...state}>
+    <Select
+      className="select"
+      {...state}
+      onChange={(value: any) => console.log(value)}
+    >
+      <SelectTrigger className="select__header" {...state}>
         <b style={{ color: state.isPlaceholder ? "gray" : "black" }}>
           {state.isPlaceholder
             ? "Select one.."
             : `(${state.selected.length}) Items Selected`}
         </b>
       </SelectTrigger>
 
-      <SelectMenu {...state} style={{ maxHeight: 200, overflowY: "scroll" }}>
+      <SelectMenu
+        className="select__dropdown"
+        {...state}
+        style={{ maxHeight: 200, overflowY: "scroll" }}
+      >
         {countries.map(item => {
           return (
-            <SelectOption {...state} key={item.name} value={item.name}>
+            <SelectOption
+              className="select__dropdown--item"
+              {...state}
+              key={item.name}
+              value={item.name}
+            >
               <label>
                 <input
                   type="checkbox"

diff --git a/src/select/stories/style.css b/src/select/stories/style.css
@@ -3,13 +3,18 @@
 }
 
 .select [aria-selected="true"] {
-  color: white;
-  background-color: rgb(103, 126, 255) !important;
+  color: rgb(61, 77, 185);
+  background-color: rgb(234, 237, 255) !important;
 }
 
 .select [data-selected="true"] {
   color: white;
-  background-color: rgb(49, 78, 240);
+  background-color: rgb(61, 77, 185);
+}
+
+.select [data-selected="true"][aria-selected="true"] {
+  color: white;
+  background-color: rgb(81, 99, 218) !important;
 }
 
 .select {
@@ -20,7 +25,7 @@
 .select__header {
   display: flex;
   align-items: center;
-  padding: 5px 0;
+  padding: 10px;
   border-radius: 4px;
   border: 1px solid rgb(182, 188, 221);
 }
@@ -59,7 +64,6 @@
 }
 
 .select__dropdown {
-  padding: 5px;
   width: 100%;
   max-height: 200px;
   overflow-y: scroll;
@@ -68,5 +72,4 @@
 
 .select__dropdown--item {
   padding: 5px;
-  border-radius: 4px;
 }