feat: add new-branding components

.github/CONTRIBUTING.md

@@ -24,4 +24,4 @@ Make your changes and check that they resolve the problem with an example in Sto
 
 You also need to inform Yarn workspaces that a particular package has changed for proper versioning. Run `yarn version check -i` to mark the appropriate type of change for those packages.
 
-Lastly, run `yarn build` to ensure that the build runs successfully before submitting the pull request.
+Lastly, run `yarn build` to ensure that the build runs successfully before submitting the pull request.

.github/workflows/check-code.yml

@@ -22,10 +22,9 @@ jobs:
 
       - name: Run lint
         run: yarn lint
-      
+
       - name: Check formatting
         run: yarn format:check
 
       - name: Run typecheck
         run: yarn typecheck
-

.npmignore

@@ -0,0 +1 @@
+assets/images

.storybook/main.ts

@@ -1,6 +1,7 @@
 import type { StorybookConfig } from "@storybook/react-webpack5";
 
 const config: StorybookConfig = {
+  staticDirs: ['../src/assets/images'],
   stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
   addons: [
     "@storybook/addon-webpack5-compiler-swc",

README.md

@@ -9,7 +9,9 @@ To install the BDP-UI library, you can use the following command:
 ```bash
 yarn add @bitcoin-dev-project/bdp-ui
 ```
-or 
+
+or
+
 ```bash
 npm i @bitcoin-dev-project/bdp-ui
 ```
@@ -19,10 +21,12 @@ npm i @bitcoin-dev-project/bdp-ui
 Once installed, you can import the components or icons you need from the library:
 
 ## CSS workaround
+
 Kindly import the css file to your global entry point.
 Usually, that is `app/layout.tsx`
 
 _note: import the css before your global css so if there are any conflicts your css takes precedence_
+
 ```tsx
 // app/layout.tsx
 ...
@@ -33,6 +37,7 @@ import "./globals.css";
 
 If you use tailwind for styling, also point your tailwind config to the library
 i.e
+
 ```tsx
 // tailwind.config.ts
 ...
@@ -47,31 +52,29 @@ const config: Config = {
 ```
 
 ### Components
+
 Here is how you can import and use components
 
 ```jsx
-import { Button } from '@bitcoin-dev-project/bdp-ui';
+import { Button } from "@bitcoin-dev-project/bdp-ui";
 
 function App() {
-  return (
-    <Button>Hello, World!</Button>
-  );
+  return <Button>Hello, World!</Button>;
 }
 ```
 
 ### Icons
+
 Here is how you can import icons
 
 ```jsx
-import { GithubIcon } from '@bitcoin-dev-project/bdp-ui/icons';
+import { GithubIcon } from "@bitcoin-dev-project/bdp-ui/icons";
 
 function App() {
-  return (
-    <GithubIcon className="w-[40px] text-black" />
-  );
+  return <GithubIcon className="w-[40px] text-black" />;
 }
 ```
 
 ## License
 
-This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details 
+This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details