Merge branch 'master' into customize-switch

Author: rushi

.github/workflows/chromatic.yml

@@ -12,6 +12,11 @@ jobs:
         # Job steps
         steps:
             - uses: actions/checkout@v1
+
+            - uses: actions/setup-node@v3
+              with:
+                node-version: 16
+
             - name: Install dependencies
               run: npm ci
 

.github/workflows/publish.yml

@@ -12,6 +12,10 @@ jobs:
             - name: Check out
               uses: actions/checkout@v1
 
+            - uses: actions/setup-node@v3
+              with:
+                node-version: 16
+
             - name: Install dependencies
               run: npm ci
 

.storybook/main.js

@@ -1,10 +1,18 @@
 module.exports = {
     stories: ["../src/**/*.stories.@(js|jsx|mdx)"],
-
+    core: {
+        disableTelemetry: true,
+    },
     addons: [
         "@storybook/addon-postcss",
         "@storybook/addon-links",
-        "@storybook/addon-essentials",
         "storybook-css-modules-preset",
+        "storybook-addon-designs",
+        {
+            name: "@storybook/addon-essentials",
+            options: {
+                backgrounds: false,
+            },
+        },
     ],
 };

.storybook/manager-head.html

@@ -8,7 +8,7 @@
     document.title = "Xola UI Kit";
 </script>
 <style type="text/css">
-    /* Make the style consistent with the Xola theme. This can't be styled by variables so raw CSS is neeeded */
+    /* Make the style consistent with the Xola theme. This can't be styled by variables so raw CSS is needed */
     .sidebar-subheading {
         color: #505254 !important; /* text-gray-darker */
         font-size: 12px !important;

.storybook/preview.js

@@ -1,5 +1,7 @@
-import "../index.css";
+import React from "react";
+import { Provider } from "../src";
 import xola from "./xola";
+import "../index.css";
 
 export const parameters = {
     actions: { argTypesRegex: "^on[A-Z].*" },
@@ -14,3 +16,11 @@ export const parameters = {
         },
     },
 };
+
+export const decorators = [
+    (Story) => (
+        <Provider>
+            <Story />
+        </Provider>
+    ),
+];

.storybook/xola.js

@@ -32,5 +32,5 @@ export default create({
     inputBorderRadius: 4,
 
     brandTitle: "Xola's UI Components",
-    brandImage: "https://xola.com/images/xola-logo-header.png",
+    brandImage: "https://www.xola.com/wp-content/themes/xola/assets/images/Xola.svg",
 });

README.md

@@ -142,3 +142,23 @@ Or:
 ```bash
 $ npm install some-package --legacy-peer-deps
 ```
+
+## Publishing the Package
+
+Install [np](https://github.com/sindresorhus/np#readme) which will help you publish the package
+
+```bash
+npm -g install np
+```
+
+Once you're ready, run this command to publish your package 
+
+```bash
+npm run build
+np <your-new-version> --tag=latest --yolo
+```
+
+Then make sure to push all the tags upstream to `xola/ui-kit` repo:
+```
+git push <upstream-remote> master --tags
+```

index.css

@@ -72,6 +72,10 @@
         top: -1px;
     }
 
+    sup {
+        top: -7px;
+    }
+
     .font-bold {
         @apply antialiased;
     }