From b0b17f78bd7c207d129f83e844b3a63f22e1c409 Mon Sep 17 00:00:00 2001
From: Shubhdeep Chhabra <chhabrashubhdeep@gmail.com>
Date: Sun, 17 Jul 2022 19:54:32 +0530
Subject: [PATCH 1/2] chore: fix typo

---
 .../{Customise.stories.mdx => Customize.stories.mdx}   | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)
 rename src/components/Helpers/{Customise.stories.mdx => Customize.stories.mdx} (96%)

diff --git a/src/components/Helpers/Customise.stories.mdx b/src/components/Helpers/Customize.stories.mdx
similarity index 96%
rename from src/components/Helpers/Customise.stories.mdx
rename to src/components/Helpers/Customize.stories.mdx
index 8fb9bb9..72847b6 100644
--- a/src/components/Helpers/Customise.stories.mdx
+++ b/src/components/Helpers/Customize.stories.mdx
@@ -22,7 +22,7 @@ export const colorConfig = {
         },
     },
 };
-export const CustomiseButton = (args) => {
+export const CustomizeButton = (args) => {
     return (
         <Button
             size="big"
@@ -37,11 +37,11 @@ export const CustomiseButton = (args) => {
     );
 };
 
-# How to Customise
+# How to Customize
 
 All neoPOP components use default neoPOP styles based on props passed to the components.
 The styles like color and typography is decided based on the `colors` and `typography` mentioned in Foundation respectively.
-To customise the component even further with your own theme, we provide 2 ways
+To customize the component even further with your own theme, we provide 2 ways
 
 1. Extend color primitives
 2. Custom props
@@ -127,7 +127,7 @@ export default MyCustomButton;
 ```
 
 <Canvas style={{ background: '#0d0d0d' }}>
-    <Story name="Custom ColorConfig Button">{CustomiseButton.bind()}</Story>
+    <Story name="Custom ColorConfig Button">{CustomizeButton.bind()}</Story>
 </Canvas>
 
 ## Passing `textStyle` to the component
@@ -174,7 +174,7 @@ const MyCustomButton = () => {
             },
         }}
     >
-        {CustomiseButton.bind()}
+        {CustomizeButton.bind()}
     </Story>
 </Canvas>
 

From b0d3e15396ead44c91c98b311f543ec53d58f84e Mon Sep 17 00:00:00 2001
From: Shubhdeep Chhabra <chhabrashubhdeep@gmail.com>
Date: Sun, 17 Jul 2022 20:15:23 +0530
Subject: [PATCH 2/2] chore: fix typos

---
 .storybook/preview.js                        | 2 +-
 src/components/Button/Button.stories.mdx     | 2 +-
 src/components/Helpers/Customize.stories.mdx | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/.storybook/preview.js b/.storybook/preview.js
index cb0bf0a..e5c59f9 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -49,7 +49,7 @@ addParameters({
             order: [
                 'Introduction',
                 'Foundation',
-                ['Colors', 'Typography', 'Layout', 'Miscellaneous', 'Customisation'],
+                ['Colors', 'Typography', 'Layout', 'Miscellaneous', 'Customization'],
                 'Components',
             ],
         },
diff --git a/src/components/Button/Button.stories.mdx b/src/components/Button/Button.stories.mdx
index 7dafc0e..497d884 100644
--- a/src/components/Button/Button.stories.mdx
+++ b/src/components/Button/Button.stories.mdx
@@ -78,7 +78,7 @@ There can be 3 different types of button.
     </Button>
 </Canvas>
 
-There can be 2 different variants of `flat` and `elevated` kind buttton
+There can be 2 different variants of `flat` and `elevated` kind button
 
 <Canvas>
     <Button variant="primary" kind="flat" size="big">
diff --git a/src/components/Helpers/Customize.stories.mdx b/src/components/Helpers/Customize.stories.mdx
index 72847b6..52645c1 100644
--- a/src/components/Helpers/Customize.stories.mdx
+++ b/src/components/Helpers/Customize.stories.mdx
@@ -4,7 +4,7 @@ import { mainColors, colorPalette } from '@primitives';
 import { hexToRGBA } from '@utils';
 import { FontWeights, FontType } from '@types';
 
-<Meta title="Foundation/Customisation" />
+<Meta title="Foundation/Customization" />
 
 export const colorConfig = {
     backgroundColor: mainColors.black,