Add requested changes

kronostechnologies · Jan 22, 2021 · b9b7223 · b9b7223
1 parent d784a81
commit b9b7223
Show file tree

Hide file tree

Showing 10 changed files with 112 additions and 85 deletions.
diff --git a/packages/react/src/components/buttons/abstract-button.tsx b/packages/react/src/components/buttons/abstract-button.tsx
@@ -1,4 +1,4 @@
-import styled, { css, FlattenInterpolation, ThemeProps, DefaultTheme } from 'styled-components';
+import styled, { css, FlattenInterpolation, ThemeProps } from 'styled-components';
 import { Theme } from '../../themes/theme';
 import { focus } from '../../utils/css-state';
 
@@ -39,85 +39,94 @@ type ButtonType = 'primary' | 'secondary' | 'tertiary' | 'destructive';
 
 interface ButtonTypeStyles {
     buttonType: ButtonType;
-    inversed?: boolean;
+    inverted?: boolean;
     theme: Theme;
 }
 
-export const getButtonTypeStyles: (props: ButtonTypeStyles) => FlattenInterpolation<ThemeProps<DefaultTheme>> = (props: ButtonTypeStyles) => css`
+const getPrimaryButtonStyles: (props: ButtonTypeStyles) => FlattenInterpolation<ThemeProps<Theme>> = ({ theme }) => css`
+    background-color: ${theme.main['primary-1.1']};
+    border-color: ${theme.main['primary-1.1']};
+    color: ${theme.greys.white};
+
+    &:hover {
+        background-color: ${theme.main['primary-1.3']};
+        border-color: ${theme.main['primary-1.3']};
+    }
+
+    &:disabled {
+        background-color: ${theme.main['primary-1.2']};
+        border-color: ${theme.main['primary-1.2']};
+    }
+`;
+
+const getSecondaryButtonStyles: (props: ButtonTypeStyles) => FlattenInterpolation<ThemeProps<Theme>> = ({ theme }) => css`
+    background-color: transparent;
+    border-color: ${theme.main['primary-1.1']};
+    color: ${theme.main['primary-1.1']};
+
+    &:hover {
+        border-color: ${theme.main['primary-1.3']};
+        color: ${theme.main['primary-1.3']};
+    }
+
+    &:disabled {
+        border-color: ${theme.main['primary-1.2']};
+        color: ${theme.main['primary-1.2']};
+    }
+`;
+
+const getTertiaryButtonStyles: (props: ButtonTypeStyles) => FlattenInterpolation<ThemeProps<Theme>> = ({ theme }) => css`
+    background-color: transparent;
+    border-color: transparent;
+    color: ${theme.greys['dark-grey']};
+
+    &:hover {
+        background-color: ${theme.greys.grey};
+        color: ${theme.greys.black};
+    }
+
+    &:disabled {
+        background-color: transparent;
+        color: ${theme.greys['mid-grey']};
+    }
+`;
+
+const getDestructiveButtonStyles: (props: ButtonTypeStyles) => FlattenInterpolation<ThemeProps<Theme>> = ({ inverted, theme }) => css`
+    background-color: ${inverted ? theme.greys.white : theme.notifications['error-2.1']};
+    border-color: ${inverted ? theme.greys.white : theme.notifications['error-2.1']};
+    color: ${inverted ? theme.notifications['error-2.1'] : theme.greys.white};
+
+    &:hover {
+        /* TODO change colors when updating thematization */
+        background-color: ${inverted ? theme.greys.white : '#62071b'};
+        border-color: ${inverted ? theme.greys.white : '#62071b'};
+        color: ${inverted ? '#62071b' : theme.greys.white};
+    }
+
+    &:disabled {
+        &,
+        &:focus,
+        &:hover {
+            /* TODO change colors when updating thematization */
+            background-color: ${inverted ? theme.greys.white : '#ea8da3'};
+            border-color: ${inverted ? theme.greys.white : '#ea8da3'};
+            color: ${inverted ? '#ea8da3' : theme.greys.white};
+        }
+    }
+`;
+
+export const getButtonTypeStyles: (props: ButtonTypeStyles) => FlattenInterpolation<ThemeProps<Theme>> = (props) => css`
     ${focus(props, true)};
     ${() => {
-        const { buttonType, theme, inversed } = props;
-        switch (buttonType) {
+        switch (props.buttonType) {
             case 'primary':
-                return `
-                    background-color: ${theme.main['primary-1.1']};
-                    border-color: ${theme.main['primary-1.1']};
-                    color: ${theme.greys.white};
-
-                    &:hover {
-                        background-color: ${theme.main['primary-1.3']};
-                        border-color: ${theme.main['primary-1.3']};
-                    }
-
-                    &:disabled {
-                        background-color: ${theme.main['primary-1.2']};
-                        border-color: ${theme.main['primary-1.2']};
-                    }
-                `;
+                return getPrimaryButtonStyles(props);
             case 'secondary':
-                return `
-                    background-color: transparent;
-                    border-color: ${theme.main['primary-1.1']};
-                    color: ${theme.main['primary-1.1']};
-
-                    &:hover {
-                        border-color: ${theme.main['primary-1.3']};
-                        color: ${theme.main['primary-1.3']};
-                    }
-
-                    &:disabled {
-                        border-color: ${theme.main['primary-1.2']};
-                        color: ${theme.main['primary-1.2']};
-                    }
-                `;
+                return getSecondaryButtonStyles(props);
             case 'tertiary':
-                return `
-                    background-color: transparent;
-                    border-color: transparent;
-                    color: ${theme.greys['dark-grey']};
-
-                    &:hover {
-                        background-color: ${theme.greys.grey};
-                        color: ${theme.greys.black};
-                    }
-
-                    &:disabled {
-                        background-color: transparent;
-                        color: ${theme.greys['mid-grey']};
-                    }
-                `;
+                return getTertiaryButtonStyles(props);
             case 'destructive':
-                // TODO change colors when updating thematization
-                return `
-                    background-color: ${inversed ? theme.greys.white : theme.notifications['error-2.1']};
-                    border-color: ${inversed ? theme.greys.white : theme.notifications['error-2.1']};
-                    color: ${inversed ? theme.notifications['error-2.1'] : theme.greys.white};
-
-                    &:hover {
-                        background-color: ${inversed ? theme.greys.white : '#62071b'};
-                        color: ${inversed ? '#62071b' : theme.greys.white};
-                    }
-
-                    &:disabled {
-                        &,
-                        &:focus,
-                        &:hover {
-                            background-color: ${inversed ? theme.greys.white : '#ea8da3'};
-                            border-color: ${inversed ? theme.greys.white : '#ea8da3'};
-                            color: ${inversed ? '#ea8da3' : theme.greys.white};
-                        }
-                    }
-                `;
+                return getDestructiveButtonStyles(props);
         }
     }}
 `;
diff --git a/packages/react/src/components/buttons/add-button.tsx b/packages/react/src/components/buttons/add-button.tsx
@@ -20,7 +20,7 @@ interface ButtonProps {
     buttonType: ButtonType;
     className?: string;
     disabled?: boolean;
-    inversed?: boolean;
+    inverted?: boolean;
     label?: string;
     type?: Type;
 
@@ -32,7 +32,7 @@ export function AddButton({
     type = 'submit',
     buttonType,
     disabled,
-    inversed,
+    inverted,
     label,
     onClick,
 }: ButtonProps): ReactElement {
@@ -45,7 +45,7 @@ export function AddButton({
             buttonType={buttonType}
             onClick={onClick}
             disabled={disabled}
-            inversed={inversed}
+            inverted={inverted}
             label={label}
         >
             <PlusIcon name="plusSign" size={isMobile ? '24' : '16'} />

diff --git a/packages/react/src/components/buttons/button.test.tsx b/packages/react/src/components/buttons/button.test.tsx
@@ -69,9 +69,9 @@ describe('Button', () => {
         expect(tree).toMatchSnapshot();
     });
 
-    test('has destructive styles (inversed)', () => {
+    test('has destructive styles (inverted)', () => {
         const tree = renderWithProviders(
-            <Button onClick={doNothing} buttonType="destructive" label="Destructive Button" inversed />,
+            <Button onClick={doNothing} buttonType="destructive" label="Destructive Button" inverted />,
         );
 
         expect(tree).toMatchSnapshot();

diff --git a/packages/react/src/components/buttons/button.test.tsx.snap b/packages/react/src/components/buttons/button.test.tsx.snap
diff --git a/packages/react/src/components/buttons/button.tsx b/packages/react/src/components/buttons/button.tsx
@@ -17,7 +17,7 @@ interface ButtonProps {
     children?: ReactNode;
     className?: string;
     disabled?: boolean;
-    inversed?: boolean;
+    inverted?: boolean;
     label?: string;
     type?: Type;
 

diff --git a/packages/react/src/components/buttons/icon-button.tsx b/packages/react/src/components/buttons/icon-button.tsx
@@ -16,7 +16,7 @@ interface ButtonProps {
     buttonType: ButtonType;
     className?: string;
     disabled?: boolean;
-    inversed?: boolean;
+    inverted?: boolean;
     /**
      * Name of the desired icon (refer to icon library)
      */

diff --git a/packages/storybook/stories/buttons/add-button.stories.tsx b/packages/storybook/stories/buttons/add-button.stories.tsx
@@ -1,6 +1,7 @@
 import { AddButton } from '@equisoft/design-elements-react';
 import { Story } from '@storybook/react';
 import React from 'react';
+import { InvertedBackground } from '../utils/inverted-background';
 
 export default {
     title: 'Buttons/Add',
@@ -16,8 +17,10 @@ export const AddButtons: Story = () => (
     </>
 );
 
-export const Inversed: Story = () => (
-    <AddButton label="Destructive" buttonType="destructive" inversed />
+export const Inverted: Story = () => (
+    <InvertedBackground>
+        <AddButton label="Destructive" buttonType="destructive" inverted />
+    </InvertedBackground>
 );
 
 export const Disabled: Story = () => (

diff --git a/packages/storybook/stories/buttons/buttons.stories.tsx b/packages/storybook/stories/buttons/buttons.stories.tsx
@@ -1,6 +1,7 @@
 import { Button } from '@equisoft/design-elements-react';
 import { Story } from '@storybook/react';
 import React from 'react';
+import { InvertedBackground } from '../utils/inverted-background';
 
 export default {
     title: 'Buttons',
@@ -16,8 +17,10 @@ export const Buttons: Story = () => (
     </>
 );
 
-export const Inversed: Story = () => (
-    <Button label="Destructive" buttonType="destructive" inversed />
+export const Inverted: Story = () => (
+    <InvertedBackground>
+        <Button label="Destructive" buttonType="destructive" inverted />
+    </InvertedBackground>
 );
 
 export const Disabled: Story = () => (

diff --git a/packages/storybook/stories/buttons/icon-button.stories.tsx b/packages/storybook/stories/buttons/icon-button.stories.tsx
@@ -1,6 +1,7 @@
 import { IconButton } from '@equisoft/design-elements-react';
 import { Story } from '@storybook/react';
 import React from 'react';
+import { InvertedBackground } from '../utils/inverted-background';
 
 export default {
     title: 'Buttons/Icon',
@@ -16,8 +17,10 @@ export const IconButtons: Story = () => (
     </>
 );
 
-export const Inversed: Story = () => (
-    <IconButton label="Delete" buttonType="destructive" iconName="x" inversed />
+export const Inverted: Story = () => (
+    <InvertedBackground>
+        <IconButton label="Delete" buttonType="destructive" iconName="x" inverted />
+    </InvertedBackground>
 );
 
 export const Disabled: Story = () => (

diff --git a/packages/storybook/stories/utils/inverted-background.tsx b/packages/storybook/stories/utils/inverted-background.tsx
@@ -0,0 +1,7 @@
+import styled from 'styled-components';
+
+export const InvertedBackground = styled.div`
+    background-color: ${({ theme }) => theme.notifications['error-2.1']};
+    border-radius: var(--border-radius);
+    padding: var(--spacing-1x);
+`;