@dktunited-techoff/techoff-suite-ui 1.5.6 → 1.6.0

package/src/components/TsDropdown/TsDropdown/__stories__/TsDropdown.stories.mdx

@@ -0,0 +1,68 @@
+import React from 'react';
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/blocks';
+import { TsDropdown } from '../TsDropdown';
+import { fruits } from './fruits';
+
+<Meta title="Components/Dropdown" />
+
+export const dropdownArgTypes = {
+  label: {
+    control: 'text',
+    description: 'Label of the dropdown.',
+  },
+  placeholder: {
+    control: 'text',
+    description: 'Placeholder of the dropdown.',
+  },
+  searchPlaceholder: {
+    control: 'text',
+    description: 'Placeholder of the option search (only for searchable dropdowns).',
+  },
+  searchable: {
+    control: 'boolean',
+    description: 'Enable search on dropdown items.',
+    table: { defaultValue: { summary: 'false' } },
+  },
+  disabled: {
+    control: 'boolean',
+    description: 'Enable state of the dropdown.',
+    table: { defaultValue: { summary: 'false' } },
+  },
+  onChange: {
+    control: 'function',
+    description: 'The handler called when clicking on the dropdown.',
+  },
+};
+
+# Dropdown
+
+Dropdowns show a list of options that can be used to select, filter or sort content.
+
+## Overview
+
+<Canvas>
+  <Story
+    name="Overview"
+    args={{
+      label: 'Label',
+      options: fruits,
+      searchPlaceholder: '',
+      placeholder: 'Select an item',
+      disabled: false,
+      searchable: false,
+      getOptionLabel: function ol(fruit) {
+        return fruit.name;
+      },
+      getOptionValue: function ov(fruit) {
+        return fruit.id;
+      },
+    }}
+    argTypes={dropdownArgTypes}
+  >
+    {args => <TsDropdown {...args}>{args.children}</TsDropdown>}
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable story="Overview" of={TsDropdown} />

package/src/components/TsDropdown/TsDropdown/__stories__/fruits.ts

@@ -0,0 +1,47 @@
+export const fruits = [
+  { name: 'Persimmon', id: 52 },
+  { name: 'Strawberry', id: 3 },
+  { name: 'Banana', id: 1 },
+  { name: 'Tomato', id: 5 },
+  { name: 'Pear', id: 4 },
+  { name: 'Durian', id: 60 },
+  { name: 'Blackberry', id: 64 },
+  { name: 'Lingonberry', id: 65 },
+  { name: 'Kiwi', id: 66 },
+  { name: 'Lychee', id: 67 },
+  { name: 'Pineapple', id: 10 },
+  { name: 'Fig', id: 68 },
+  { name: 'Gooseberry', id: 69 },
+  { name: 'Passionfruit', id: 70 },
+  { name: 'Plum', id: 71 },
+  { name: 'Orange', id: 2 },
+  { name: 'GreenApple', id: 72 },
+  { name: 'Raspberry', id: 23 },
+  { name: 'Watermelon', id: 25 },
+  { name: 'Lemon', id: 26 },
+  { name: 'Mango', id: 27 },
+  { name: 'Blueberry', id: 33 },
+  { name: 'Apple', id: 6 },
+  { name: 'Guava', id: 37 },
+  { name: 'Apricot', id: 35 },
+  { name: 'Papaya', id: 42 },
+  { name: 'Melon', id: 41 },
+  { name: 'Tangerine', id: 77 },
+  { name: 'Pitahaya', id: 78 },
+  { name: 'Lime', id: 44 },
+  { name: 'Pomegranate', id: 79 },
+  { name: 'Dragonfruit', id: 80 },
+  { name: 'Grape', id: 81 },
+  { name: 'Morus', id: 82 },
+  { name: 'Feijoa', id: 76 },
+  { name: 'Avocado', id: 84 },
+  { name: 'Kiwifruit', id: 85 },
+  { name: 'Cranberry', id: 87 },
+  { name: 'Cherry', id: 9 },
+  { name: 'Peach', id: 86 },
+  { name: 'Jackfruit', id: 94 },
+  { name: 'Horned Melon', id: 95 },
+  { name: 'Hazelnut', id: 96 },
+  { name: 'Pomelo', id: 98 },
+  { name: 'Mangosteen', id: 99 },
+];

package/src/components/TsInput/TsInput/TsInput.css

@@ -5,14 +5,14 @@
   position: relative;
   width: 100%;
 }
-input {
+.ts-input-container input {
   width: 100%;
   height: 32px;
-  padding: 0 10px;
   border: 1px solid #949494;
   font-weight: 600;
 }
 input::placeholder {
+  color: #7a7a7a;
   font-weight: 400;
 }
 input:disabled {
@@ -21,6 +21,9 @@ input:disabled {
 input:focus {
   border: 1.5px solid #3643ba;
 }
+.ts-input--padding-0 input {
+  padding: 0 10px;
+}
 .ts-input--padding-1 input {
   padding: 0 30px 0 10px;
 }

package/src/components/TsInput/TsInput/TsInput.tsx

@@ -7,7 +7,7 @@ export const TsInput = ({ icon, label, value, onChange, ...props }: TsInputProps
   // #########
   // Rendering
   return (
-    <div className={`ts-input ${icon ? 'ts-input--padding-1' : ''}`}>
+    <div className={`ts-input ${icon ? 'ts-input--padding-1' : 'ts-input--padding-0'}`}>
       {label && <div className="ts-input-label">{label}</div>}
       <div className="ts-input-container">
         <input type="text" value={value} onChange={e => onChange(e.target.value)} {...props} />

package/src/components/TsInput/TsInput/__stories__/TsInput.stories.mdx

@@ -19,6 +19,11 @@ export const inputArgTypes = {
     control: 'text',
     description: 'Placeholder of the input.',
   },
+  disabled: {
+    control: 'boolean',
+    description: 'Enable state of the input.',
+    table: { defaultValue: { summary: 'false' } },
+  },
 };
 
 # Input
@@ -30,7 +35,7 @@ Input allows the user to enter content and data when the expected user input is
 <Canvas>
   <Story
     name="Overview"
-    args={{ label: '', placeholder: 'Enter some text', onChange: () => {} }}
+    args={{ label: 'Label', placeholder: 'Enter some text', disabled: false, onChange: () => {} }}
     argTypes={inputArgTypes}
   >
     {args => <TsInput {...args} />}

package/src/index.ts

@@ -1,5 +1,6 @@
 export * from './components/TsButton/TsButton';
 export * from './components/TsCheckbox/TsCheckbox';
+export * from './components/TsDropdown/TsDropdown/TsDropdown';
 export * from './components/TsIcon/TsIcon';
 export * from './components/TsInput/TsInput/TsInput';
 export * from './components/TsLoader/TsLoader';