Styling updates for DM v2.2 and SEO-RODEO-II (#109)

* 01- Buttons * 02- Tabs * 03- radio items * 03- TextArea, Selects, Inputs Added solid outline variant * bumped package number * Code Review updates + breaking changes fixed
raid-guild · Dec 28, 2023 · abfaf36 · abfaf36
1 parent bed3ba5
commit abfaf36
Show file tree

Hide file tree

Showing 26 changed files with 177 additions and 60 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -2,13 +2,16 @@
     "editor.formatOnSave": true,
     "editor.defaultFormatter": "dbaeumer.vscode-eslint",
     "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true
-},
+        "source.fixAll.eslint": "always"
+    },
     "eslint.validate": [
         "javascript",
         "typescript"
     ],
     "[yaml]": {
         "editor.defaultFormatter": "esbenp.prettier-vscode"
+    },
+    "[typescript]": {
+        "editor.defaultFormatter": "esbenp.prettier-vscode"
     }
 }
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@raidguild/design-system",
-  "version": "0.5.3",
+  "version": "0.5.5",
   "license": "MIT",
   "author": "Raid Guild",
   "main": "./dist/src/index.js",

diff --git a/src/components/chakra/index.ts b/src/components/chakra/index.ts
@@ -200,4 +200,6 @@ export type {
   ToastProps as ChakraToastProps,
   TooltipProps as ChakraTooltipProps,
   WrapProps as ChakraWrapProps,
+  TabsProps,
+  TabProps,
 } from '@chakra-ui/react';
diff --git a/src/components/forms/DatePicker/DatePicker.tsx b/src/components/forms/DatePicker/DatePicker.tsx
@@ -36,7 +36,7 @@ const DatePicker: React.FC<DatePickerProps> = ({
   localForm,
   registerOptions,
   tooltip,
-  variant,
+  variant = 'ghost',
   spacing,
   ...props
 }: DatePickerProps) => {

diff --git a/src/components/forms/Select/Select.tsx b/src/components/forms/Select/Select.tsx
@@ -41,7 +41,7 @@ export interface SelectProps {
   isSearchable?: boolean;
   onChange?: (option: Option) => void;
   isDisabled?: boolean;
-  variant?: 'outline' | 'filled' | 'flushed' | undefined;
+  variant?: 'outline' | 'filled' | 'flushed' | 'solidOutline' | undefined;
   basicStyles?: boolean;
   value?: unknown;
   colorScheme?:

diff --git a/src/components/forms/controlled/ControlledSelect/ControlledSelect.tsx b/src/components/forms/controlled/ControlledSelect/ControlledSelect.tsx
@@ -23,7 +23,7 @@ export interface ControlledSelectProps {
   isClearable?: boolean;
   onChange?: (option: Option) => void;
   isDisabled?: boolean;
-  variant?: 'outline' | 'filled' | 'flushed' | undefined;
+  variant?: 'outline' | 'filled' | 'flushed' | 'solidOutline' | undefined;
   basicStyles?: boolean;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   value?: any;

diff --git a/src/components/molecules/ButtonGroup/ButtonGroup.tsx b/src/components/molecules/ButtonGroup/ButtonGroup.tsx
@@ -61,7 +61,7 @@ const ButtonGroup: React.FC<ButtonGroupProps> = ({
         return (
           <Button
             key={label}
-            variant={i === selected ? 'solid' : 'outline'}
+            variant={i === selected ? 'solid' : 'ghost'}
             color='white'
             size={size}
             onClick={() => handleSelection(i)}

diff --git a/src/stories/atoms/Tabs.stories.tsx b/src/stories/atoms/Tabs.stories.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { StoryFn } from '@storybook/react';
+import { Flex, Heading } from '@chakra-ui/react';
 import {
   Tabs as TabsComponent,
   Tab,
@@ -8,22 +9,34 @@ import {
   TabPanel,
 } from '../..';
 
+const tabVariants = [
+  { name: 'Unstyled', variant: 'unstyled' },
+  { name: 'Default', variant: 'default' },
+];
+
 export default {
   title: 'Components/Atoms/Tabs',
   component: TabsComponent,
 } as any; // as Meta<typeof TabsComponent>;
 
 const Tabs: StoryFn<typeof TabsComponent> = () => (
-  <TabsComponent>
-    <TabList>
-      <Tab>Test 1</Tab>
-      <Tab>Test 2</Tab>
-    </TabList>
-    <TabPanels>
-      <TabPanel>Content 1</TabPanel>
-      <TabPanel>Content 2</TabPanel>
-    </TabPanels>
-  </TabsComponent>
+  <>
+    {tabVariants.map((tab) => (
+      <Flex align='center' key={tab.variant} justify='space-between' w='300px'>
+        <Heading size='sm'>{tab.name}</Heading>
+        <TabsComponent variant={tab.variant}>
+          <TabList>
+            <Tab>Test 1</Tab>
+            <Tab>Test 2</Tab>
+          </TabList>
+          <TabPanels>
+            <TabPanel>Content 1</TabPanel>
+            <TabPanel>Content 2</TabPanel>
+          </TabPanels>
+        </TabsComponent>
+      </Flex>
+    ))}
+  </>
 );
 
 export { Tabs };
diff --git a/src/stories/forms/Input.stories.tsx b/src/stories/forms/Input.stories.tsx
@@ -12,6 +12,7 @@ const inputVariants = [
   { name: 'Outline', variant: 'outline' },
   { name: 'Flushed', variant: 'flushed' },
   { name: 'Filled', variant: 'filled' },
+  { name: 'Solid Outline', variant: 'solidOutline' },
 ];
 
 const HookForm: StoryFn<typeof InputComponent> = () => (

diff --git a/src/stories/forms/NumberInput.stories.tsx b/src/stories/forms/NumberInput.stories.tsx
@@ -13,6 +13,7 @@ const numberInputVariants = [
   { name: 'Outline', variant: 'outline', ...stepConfig },
   { name: 'Flushed', variant: 'flushed', ...stepConfig },
   { name: 'Filled', variant: 'filled', ...stepConfig },
+  { name: 'Solid Outline', variant: 'solidOutline', ...stepConfig },
 ];
 
 const HookForm: StoryFn<typeof NumberInputComponent> = () => (

diff --git a/src/stories/forms/Select.stories.tsx b/src/stories/forms/Select.stories.tsx
@@ -10,7 +10,7 @@ export default {
 
 type SelectVariant = {
   name: string;
-  variant: 'outline' | 'filled' | 'flushed';
+  variant: 'outline' | 'filled' | 'flushed' | 'solidOutline';
   isMulti?: boolean;
   creatable?: boolean;
   basicStyles?: boolean;
@@ -40,13 +40,19 @@ const selectVariants: SelectVariant[] = [
     tooltip: 'this is a tooltip',
     helperText: 'This is a helper text',
   },
+  {
+    name: 'Single Solid Outline',
+    variant: 'solidOutline',
+    isMulti: false,
+    tooltip: 'this is a tooltip',
+    helperText: 'This is a helper text',
+  },
   {
     name: 'Single Outline Basic',
     variant: 'outline',
     isMulti: false,
     basicStyles: true,
   },
-
   {
     name: 'Multi Outline',
     variant: 'outline',
@@ -60,12 +66,19 @@ const selectVariants: SelectVariant[] = [
     isMulti: true,
     tooltip: 'this is a tooltip',
   },
+
   {
     name: 'Multi Flushed',
     variant: 'flushed',
     isMulti: true,
     tooltip: 'this is a tooltip',
   },
+  {
+    name: 'Multi Solid Outline',
+    variant: 'solidOutline',
+    isMulti: true,
+    tooltip: 'this is a tooltip',
+  },
   {
     name: 'Multi Outline Basic',
     variant: 'outline',

diff --git a/src/stories/forms/Textarea.stories.tsx b/src/stories/forms/Textarea.stories.tsx
@@ -12,6 +12,7 @@ const textareaVariants = [
   { name: 'Outline', variant: 'outline' },
   { name: 'Flushed', variant: 'flushed' },
   { name: 'Filled', variant: 'filled' },
+  { name: 'Solid Outline', variant: 'solidOutline' },
 ];
 
 const HookForm: StoryFn<typeof TextareaComponent> = () => (

diff --git a/src/stories/forms/controlled/ControlledInput.stories.tsx b/src/stories/forms/controlled/ControlledInput.stories.tsx
@@ -11,6 +11,7 @@ const inputVariants = [
   { name: 'Outline', variant: 'outline' },
   { name: 'Flushed', variant: 'flushed' },
   { name: 'Filled', variant: 'filled' },
+  { name: 'Solid Outline', variant: 'solidOutline' },
 ];
 
 const Controlled: StoryFn<typeof InputComponent> = () => (

diff --git a/src/stories/forms/controlled/ControlledNumberInput.stories.tsx b/src/stories/forms/controlled/ControlledNumberInput.stories.tsx
@@ -12,6 +12,7 @@ const numberInputVariants = [
   { name: 'Outline', variant: 'outline', ...stepConfig },
   { name: 'Flushed', variant: 'flushed', ...stepConfig },
   { name: 'Filled', variant: 'filled', ...stepConfig },
+  { name: 'Solid Outline', variant: 'solidOutline', ...stepConfig },
 ];
 
 const Controlled: StoryFn<typeof NumberInput> = () => (

diff --git a/src/stories/forms/controlled/ControlledSelect.stories.tsx b/src/stories/forms/controlled/ControlledSelect.stories.tsx
@@ -14,7 +14,7 @@ export default {
 
 type SelectVariant = {
   name: string;
-  variant: 'outline' | 'filled' | 'flushed';
+  variant: 'outline' | 'filled' | 'flushed' | 'solidOutline';
   isMulti?: boolean;
   creatable?: boolean;
   basicStyles?: boolean;
@@ -33,6 +33,7 @@ type Option =
 
 const selectVariants: SelectVariant[] = [
   { name: 'Single Outline', variant: 'outline', isMulti: false },
+  { name: 'Single Solid Outline', variant: 'solidOutline', isMulti: false },
   { name: 'Single Filled', variant: 'filled', isMulti: false },
   { name: 'Single Flushed', variant: 'flushed', isMulti: false },
   {
@@ -43,6 +44,7 @@ const selectVariants: SelectVariant[] = [
   },
 
   { name: 'Multi Outline', variant: 'outline', isMulti: true },
+  { name: 'Multi Solid Outline', variant: 'solidOutline', isMulti: true },
   { name: 'Multi Filled', variant: 'filled', isMulti: true },
   { name: 'Multi Flushed', variant: 'flushed', isMulti: true },
   {

diff --git a/src/stories/forms/controlled/ControlledTextarea.stories.tsx b/src/stories/forms/controlled/ControlledTextarea.stories.tsx
@@ -11,6 +11,7 @@ const textareaVariants = [
   { name: 'Outline', variant: 'outline' },
   { name: 'Flushed', variant: 'flushed' },
   { name: 'Filled', variant: 'filled' },
+  { name: 'Solid Outline', variant: 'solidOutline' },
 ];
 
 const Controlled: StoryFn<typeof TextareaComponent> = () => (

diff --git a/src/theme/colors.ts b/src/theme/colors.ts
@@ -1,13 +1,13 @@
 import _ from 'lodash';
 import RGTokens from './tokens';
 
-interface colorTokenInterface {
+interface ColorTokenInterface {
   value: string;
   type: string;
 }
 
 const chakraColors = _.mapValues(RGTokens.colors, (colors) =>
-  _.mapValues(colors, (color: colorTokenInterface) => color.value)
+  _.mapValues(colors, (color: ColorTokenInterface) => color.value)
 );
 
 const Colors = {

diff --git a/src/theme/components/Button.ts b/src/theme/components/Button.ts
@@ -1,3 +1,5 @@
+import GradientStyles from '../gradientStyles';
+
 const Button = {
   baseStyle: {
     textTransform: 'uppercase',
@@ -11,24 +13,28 @@ const Button = {
   variants: {
     solid: {
       bg: 'purple.500',
+      borderRadius: '2px',
+      maxWidth: '100%',
+      width: 'auto',
+      height: '40px',
+      paddingLeft: '24px',
+      paddingRight: '24px',
       color: 'white',
       _hover: {
         bg: 'primary.500',
       },
     },
     bright: {
+      color: 'white',
+      borderRadius: '2px',
       maxWidth: '100%',
       width: 'auto',
       height: '40px',
-      color: 'white',
-      borderRadius: '2px',
-      background:
-        'linear-gradient(94.89deg, #FF5A00 0%, #D62789 70.2%, #AD17AD 100%)',
       paddingLeft: '24px',
       paddingRight: '24px',
+      background: GradientStyles.orangeToPurpleDiagonalGradient.bgGradient,
       _hover: {
-        background:
-          'linear-gradient(94.89deg, #f78040 0%, #dd459b 70.2%, #ad3bad 100%)',
+        background: GradientStyles.orangeToPurpleSharpGradient.bgGradient,
       },
       _focus: {
         boxShadow: 'none',
@@ -37,56 +43,59 @@ const Button = {
     outline: {
       bg: 'transparent',
       border: '2px solid',
-      borderColor: 'purple.500',
-      borderRadius: 'lg',
-      color: 'whiteAlpha.800',
+      maxWidth: '100%',
+      width: 'auto',
+      height: '40px',
+      paddingLeft: '24px',
+      paddingRight: '24px',
+      borderRadius: '2px',
+      color: 'purple.500',
       _hover: {
-        bg: 'purple.500',
-        color: 'white',
-        border: '2px solid',
-        borderColor: 'white',
+        borderImageSlice: 1,
+        borderImageSource: 'linear-gradient(96deg, #FF3864 0%, #8B1DBA 71.35%)',
+        background: 'linear-gradient(96deg, #FF3864 0%, #8B1DBA 71.35%)',
+        color: 'transparent',
+        backgroundClip: 'text',
       },
     },
     gradientOutline: {
-      textTransform: 'uppercase',
+      border: '2px solid',
+      borderRadius: '2px',
       maxWidth: '100%',
       width: 'auto',
       height: '40px',
-      border: '2px solid',
-      borderRadius: '3px',
-      borderImageSlice: 1,
-      borderImageSource:
-        'linear-gradient(95.58deg, #FF3864 0%, #8B1DBA 53.65%, #4353DF 100%)',
-      background:
-        'linear-gradient(96.18deg, #FF3864 -44.29%, #8B1DBA 53.18%, #4353DF 150.65%);',
-      color: { base: 'whiteAlpha.700', md: 'transparent' }, // added a media query to display RG red on mobile
-      backgroundClip: 'text',
       paddingLeft: '24px',
       paddingRight: '24px',
-      transistion: 'all .8s ease-out',
+      borderImageSlice: 1,
+      borderImageSource: 'linear-gradient(96deg, #FF3864 0%, #8B1DBA 71.35%)',
+      background: 'linear-gradient(96deg, #FF3864 0%, #8B1DBA 71.35%)',
+      color: 'transparent',
+      backgroundClip: 'text',
       _hover: {
-        background:
-          'linear-gradient(96.18deg, #e26f88 0%, #a15ebe 53.65%, #6c77db 100%)',
-        backgroundClip: 'text',
-        color: { base: 'white', md: 'transparent' }, // added a media query to display RG red on mobile
+        background: 'linear-gradient(96deg, #FF3864 0%, #8B1DBA 71.35%)',
+        color: 'white',
       },
       _focus: {
         boxShadow: 'none',
       },
     },
-    ghost: () => ({
-      textTransform: 'uppercase',
+    ghost: {
+      color: 'purple.500',
+      borderRadius: '2px',
       maxWidth: '100%',
       width: 'auto',
       height: '40px',
-      color: '#8B1DBA',
+      paddingLeft: '24px',
+      paddingRight: '24px',
       bg: 'whiteAlpha.100',
-      // paddingLeft: '24px',
-      // paddingRight: '24px',
+      _hover: {
+        bg: 'purple.500',
+        color: 'white',
+      },
       _focus: {
         boxShadow: 'none',
       },
-    }),
+    },
   },
 };