@bitrise/bitkit 9.2.0 → 9.3.0-alpha.2

package/lib/esn/variables.css

@@ -9,146 +9,146 @@
   --size--x10: 2.5rem;
   --size--x12: 3rem;
   --size--x16: 4rem;
-
-  --color-white: #FFFFFF;
-  --color-black: #222222;
-
-  --color-gray--1: #F8F8F8;
-  --color-gray--2: #ECECEC;
-  --color-gray--3: #DDDDDD;
-  --color-gray--4: #CCCCCC;
-  --color-gray--5: #ACACAC;
-  --color-gray--6: #777777;
-  --color-gray--7: #616161;
-  --color-gray--8: #444444;
-
-  --color-aqua--1: #E6FAF9;
-  --color-aqua--2: #86E9E2;
-  --color-aqua--3: #0DD3C5;
-  --color-aqua--4: #0EC7BA;
-  --color-aqua--5: #00968C;
-
-  --color-grape--1: #F8F0FF;
-  --color-grape--2: #B88ADB;
-  --color-grape--3: #760FC3;
-  --color-grape--4: #492F5C;
-  --color-grape--5: #351D48;
-
-  --color-eggplant: #683D87;
-
-  --color-red--1: #FFE8EE;
-  --color-red--2: #FF8FAB;
-  --color-red--3: #FF2158;
-  --color-red--4: #EE003B;
-  --color-red--5: #C02048;
-
-  --color-orange--1: #FFECE5;
-  --color-orange--2: #FFA17F;
-  --color-orange--3: #FF4400;
-  --color-orange--4: #E73E00;
-  --color-orange--5: #D33D07;
-
-  --color-yellow--1: #FFF9E5;
-  --color-yellow--2: #FFE27F;
-  --color-yellow--3: #FFC500;
-  --color-yellow--4: #ECB600;
-  --color-yellow--5: #795E00;
-
-  --color-green--1: #E7F9F3;
-  --color-green--2: #87E1C3;
-  --color-green--3: #0FC389;
-  --color-green--4: #0FB37D;
-  --color-green--5: #117D59;
-
-  --color-blue--1: #E6F2FA;
-  --color-blue--2: #86C1E6;
-  --color-blue--3: #0D83CD;
-  --color-blue--4: #0C70AE;
-  --color-blue--5: #095C90;
-
-  --color-darkblue--1: #E6ECF7;
-  --color-darkblue--2: #82A4D7;
-  --color-darkblue--3: #054AB0;
-  --color-darkblue--4: #043E94;
-  --color-darkblue--5: #033175;
-
-  --color-violet--1: #F4E7F9;
-  --color-violet--2: #CB8ADF;
-  --color-violet--3: #990FC3;
-  --color-violet--4: #8512A8;
-  --color-violet--5: #741492;
+/*
+  --bitkit-colors-white: #FFFFFF;
+  --bitkit-colors-black: #222222;
+
+  --bitkit-colors-gray-1: #F8F8F8;
+  --bitkit-colors-gray-2: #ECECEC;
+  --bitkit-colors-gray-3: #DDDDDD;
+  --bitkit-colors-gray-4: #CCCCCC;
+  --bitkit-colors-gray-5: #ACACAC;
+  --bitkit-colors-gray-6: #777777;
+  --bitkit-colors-gray-7: #616161;
+  --bitkit-colors-gray-8: #444444;
+
+  --bitkit-colors-aqua-1: #E6FAF9;
+  --bitkit-colors-aqua-2: #86E9E2;
+  --bitkit-colors-aqua-3: #0DD3C5;
+  --bitkit-colors-aqua-4: #0EC7BA;
+  --bitkit-colors-aqua-5: #00968C;
+
+  --bitkit-colors-grape-1: #F8F0FF;
+  --bitkit-colors-grape-2: #B88ADB;
+  --bitkit-colors-grape-3: #760FC3;
+  --bitkit-colors-grape-4: #492F5C;
+  --bitkit-colors-grape-5: #351D48;
+
+  --bitkit-colors-eggplant: #683D87;
+
+  --bitkit-colors-red-1: #FFE8EE;
+  --bitkit-colors-red-2: #FF8FAB;
+  --bitkit-colors-red-3: #FF2158;
+  --bitkit-colors-red-4: #EE003B;
+  --bitkit-colors-red-5: #C02048;
+
+  --bitkit-colors-orange-1: #FFECE5;
+  --bitkit-colors-orange-2: #FFA17F;
+  --bitkit-colors-orange-3: #FF4400;
+  --bitkit-colors-orange-4: #E73E00;
+  --bitkit-colors-orange-5: #D33D07;
+
+  --bitkit-colors-yellow-1: #FFF9E5;
+  --bitkit-colors-yellow-2: #FFE27F;
+  --bitkit-colors-yellow-3: #FFC500;
+  --bitkit-colors-yellow-4: #ECB600;
+  --bitkit-colors-yellow-5: #795E00;
+
+  --bitkit-colors-green-1: #E7F9F3;
+  --bitkit-colors-green-2: #87E1C3;
+  --bitkit-colors-green-3: #0FC389;
+  --bitkit-colors-green-4: #0FB37D;
+  --bitkit-colors-green-5: #117D59;
+
+  --bitkit-colors-blue-1: #E6F2FA;
+  --bitkit-colors-blue-2: #86C1E6;
+  --bitkit-colors-blue-3: #0D83CD;
+  --bitkit-colors-blue-4: #0C70AE;
+  --bitkit-colors-blue-5: #095C90;
+
+  --bitkit-colors-darkblue-1: #E6ECF7;
+  --bitkit-colors-darkblue-2: #82A4D7;
+  --bitkit-colors-darkblue-3: #054AB0;
+  --bitkit-colors-darkblue-4: #043E94;
+  --bitkit-colors-darkblue-5: #033175;
+
+  --bitkit-colors-violet-1: #F4E7F9;
+  --bitkit-colors-violet-2: #CB8ADF;
+  --bitkit-colors-violet-3: #990FC3;
+  --bitkit-colors-violet-4: #8512A8;
+  --bitkit-colors-violet-5: #741492;
 
   --rgb-white: 255, 255, 255;
   --rgb-black: 34, 34, 34;
 
-  --rgb-gray--1: 248, 248, 248;
-  --rgb-gray--2: 236, 236, 236;
-  --rgb-gray--3: 221, 221, 221;
-  --rgb-gray--4: 204, 204, 204;
-  --rgb-gray--5: 172, 172, 172;
-  --rgb-gray--6: 119, 119, 119;
-  --rgb-gray--7: 97, 97, 97;
-  --rgb-gray--8: 68, 68, 68;
-
-  --rgb-aqua--1: 230, 250, 249;
-  --rgb-aqua--2: 134, 233, 226;
-  --rgb-aqua--3: 13, 211, 197;
-  --rgb-aqua--4: 14, 199, 186;
-  --rgb-aqua--5: 0, 150, 140;
-
-  --rgb-grape--1: 248, 240, 255;
-  --rgb-grape--2: 184, 138, 219;
-  --rgb-grape--3: 118, 15, 195;
-  --rgb-grape--4: 73, 47, 92;
-  --rgb-grape--5: 53, 29, 72;
+  --rgb-gray-1: 248, 248, 248;
+  --rgb-gray-2: 236, 236, 236;
+  --rgb-gray-3: 221, 221, 221;
+  --rgb-gray-4: 204, 204, 204;
+  --rgb-gray-5: 172, 172, 172;
+  --rgb-gray-6: 119, 119, 119;
+  --rgb-gray-7: 97, 97, 97;
+  --rgb-gray-8: 68, 68, 68;
+
+  --rgb-aqua-1: 230, 250, 249;
+  --rgb-aqua-2: 134, 233, 226;
+  --rgb-aqua-3: 13, 211, 197;
+  --rgb-aqua-4: 14, 199, 186;
+  --rgb-aqua-5: 0, 150, 140;
+
+  --rgb-grape-1: 248, 240, 255;
+  --rgb-grape-2: 184, 138, 219;
+  --rgb-grape-3: 118, 15, 195;
+  --rgb-grape-4: 73, 47, 92;
+  --rgb-grape-5: 53, 29, 72;
 
   --rgb-eggplant: 104, 61, 135;
 
-  --rgb-red--1: 255, 232, 238;
-  --rgb-red--2: 255, 143, 171;
-  --rgb-red--3: 255, 33, 88;
-  --rgb-red--4: 238, 0, 59;
-  --rgb-red--5: 192, 32, 72;
-
-  --rgb-orange--1: 255, 236, 229;
-  --rgb-orange--2: 255, 161, 127;
-  --rgb-orange--3: 255, 68, 0;
-  --rgb-orange--4: 231, 62, 0;
-  --rgb-orange--5: 211, 61, 7;
-
-  --rgb-yellow--1: 255, 249, 229;
-  --rgb-yellow--2: 255, 226, 127;
-  --rgb-yellow--3: 255, 197, 0;
-  --rgb-yellow--4: 236, 182, 0;
-  --rgb-yellow--5: 121, 94, 0;
-
-  --rgb-green--1: 231, 249, 243;
-  --rgb-green--2: 135, 225, 195;
-  --rgb-green--3: 15, 195, 137;
-  --rgb-green--4: 15, 179, 125;
-  --rgb-green--5: 17, 125, 89;
-
-  --rgb-blue--1: 230, 242, 250;
-  --rgb-blue--2: 134, 193, 230;
-  --rgb-blue--3: 13, 131, 205;
-  --rgb-blue--4: 12, 112, 174;
-  --rgb-blue--5: 9, 92, 144;
-
-  --rgb-darkblue--1: 230, 236, 247;
-  --rgb-darkblue--2: 130, 164, 215;
-  --rgb-darkblue--3: 5, 74, 176;
-  --rgb-darkblue--4: 4, 62, 148;
-  --rgb-darkblue--5: 3, 49, 117;
-
-  --rgb-violet--1: 244, 231, 249;
-  --rgb-violet--2: 203, 138, 223;
-  --rgb-violet--3: 153, 15, 195;
-  --rgb-violet--4: 133, 18, 168;
-  --rgb-violet--5: 116, 20, 146;
-
-  --color-overlay--black: rgba(34, 34, 34, 0.8);
-  --color-overlay--grape: rgba(53, 29, 72, 0.8);
-
+  --rgb-red-1: 255, 232, 238;
+  --rgb-red-2: 255, 143, 171;
+  --rgb-red-3: 255, 33, 88;
+  --rgb-red-4: 238, 0, 59;
+  --rgb-red-5: 192, 32, 72;
+
+  --rgb-orange-1: 255, 236, 229;
+  --rgb-orange-2: 255, 161, 127;
+  --rgb-orange-3: 255, 68, 0;
+  --rgb-orange-4: 231, 62, 0;
+  --rgb-orange-5: 211, 61, 7;
+
+  --rgb-yellow-1: 255, 249, 229;
+  --rgb-yellow-2: 255, 226, 127;
+  --rgb-yellow-3: 255, 197, 0;
+  --rgb-yellow-4: 236, 182, 0;
+  --rgb-yellow-5: 121, 94, 0;
+
+  --rgb-green-1: 231, 249, 243;
+  --rgb-green-2: 135, 225, 195;
+  --rgb-green-3: 15, 195, 137;
+  --rgb-green-4: 15, 179, 125;
+  --rgb-green-5: 17, 125, 89;
+
+  --rgb-blue-1: 230, 242, 250;
+  --rgb-blue-2: 134, 193, 230;
+  --rgb-blue-3: 13, 131, 205;
+  --rgb-blue-4: 12, 112, 174;
+  --rgb-blue-5: 9, 92, 144;
+
+  --rgb-darkblue-1: 230, 236, 247;
+  --rgb-darkblue-2: 130, 164, 215;
+  --rgb-darkblue-3: 5, 74, 176;
+  --rgb-darkblue-4: 4, 62, 148;
+  --rgb-darkblue-5: 3, 49, 117;
+
+  --rgb-violet-1: 244, 231, 249;
+  --rgb-violet-2: 203, 138, 223;
+  --rgb-violet-3: 153, 15, 195;
+  --rgb-violet-4: 133, 18, 168;
+  --rgb-violet-5: 116, 20, 146;
+
+  --bitkit-colors-overlay--black: rgba(34, 34, 34, 0.8);
+  --bitkit-colors-overlay--grape: rgba(53, 29, 72, 0.8);
+*/
   --font-family: 'TT Norms Pro', sans-serif;
   --font-family-monospace: 'Source Code Pro', monospace;
 

package/lib/esn/variables.d.ts

@@ -111,8 +111,8 @@ export declare const rgbViolet3: number[];
 export declare const rgbViolet4: number[];
 export declare const rgbViolet5: number[];
 export declare const colorMap: {
-    'white': string;
-    'black': string;
+    white: string;
+    black: string;
     'gray-1': string;
     'gray-2': string;
     'gray-3': string;
@@ -131,7 +131,7 @@ export declare const colorMap: {
     'grape-3': string;
     'grape-4': string;
     'grape-5': string;
-    'eggplant': string;
+    eggplant: string;
     'red-1': string;
     'red-2': string;
     'red-3': string;
@@ -169,8 +169,8 @@ export declare const colorMap: {
     'violet-5': string;
 };
 export declare const rgbMap: {
-    'white': number[];
-    'black': number[];
+    white: number[];
+    black: number[];
     'gray-1': number[];
     'gray-2': number[];
     'gray-3': number[];
@@ -189,7 +189,7 @@ export declare const rgbMap: {
     'grape-3': number[];
     'grape-4': number[];
     'grape-5': number[];
-    'eggplant': number[];
+    eggplant: number[];
     'red-1': number[];
     'red-2': number[];
     'red-3': number[];

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "9.2.0",
+  "version": "9.3.0-alpha.2",
   "repository": "git@github.com:bitrise-io/bitkit.git",
   "main": "lib/cjs/index.js",
   "esnext": "lib/esn/index.js",
@@ -25,64 +25,72 @@
     "serve": "superstatic ./dist --port 4001 -c superstatic.json",
     "start": "rm -rf ./dist && concurrently \"yarn start:docs\" \"yarn start:site\" \"yarn start:icons\"",
     "start:docs": "ts-node ./scripts/build-docs-watch",
-    "start:site": "parcel site/index.html --port 4001 -d dist --no-cache",
+    "start:site": "parcel serve site/index.html --port 4001 -d dist --no-cache",
     "start:icons": "chokidar src/Icon/svg/** -c \"yarn svgr {path} && yarn lint:fix-icons\"",
     "test": "jest ./src"
   },
   "alias": {
-    "@bitrise/bitkit": "./src"
+    "@bitrise/bitkit": "./src",
+    "framer-motion": "./node_modules/framer-motion/dist/cjs"
   },
   "dependencies": {
-    "classnames": "^2.2.6",
-    "clipboard": "^2.0.4",
-    "luxon": "^1.12.1",
-    "normalize.css": "^8.0.1",
-    "react": "^16.10.2",
-    "react-dom": "^16.10.2",
+    "@chakra-ui/react": "^1.8.6",
+    "@emotion/react": "^11",
+    "@emotion/styled": "^11",
+    "@popperjs/core": "^2.11.2",
+    "classnames": "^2.3.1",
+    "clipboard": "^2.0.10",
+    "framer-motion": "^6",
+    "luxon": "^2.3.1",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "react-popper": "^1.3.3",
-    "react-transition-group": "^2.6.1",
-    "resize-observer-polyfill": "^1.5.1"
+    "react-transition-group": "^4.4.2",
+    "src": "^1.1.2"
   },
   "peerDependencies": {
-    "react": "^16.10.2",
-    "react-dom": "^16.10.2"
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
   },
   "devDependencies": {
+    "@babel/core": "^7.17.5",
     "@commitlint/cli": "^8.1.0",
     "@commitlint/config-conventional": "^8.1.0",
-    "@semantic-release/changelog": "^6.0.0",
-    "@semantic-release/commit-analyzer": "^9.0.1",
-    "@semantic-release/git": "^10.0.0",
+    "@semantic-release/changelog": "^6.0.1",
+    "@semantic-release/commit-analyzer": "^9.0.2",
+    "@semantic-release/git": "^10.0.1",
     "@svgr/cli": "^6.2.1",
-    "@types/classnames": "^2.2.7",
+    "@types/classnames": "^2.3.0",
     "@types/clipboard": "^2.0.1",
-    "@types/enzyme": "^3.10.3",
-    "@types/jest": "^24.0.11",
+    "@types/enzyme": "^3.10.11",
+    "@types/jest": "^27.4.1",
     "@types/lodash.sample": "^4.2.6",
     "@types/lodash.shuffle": "^4.2.6",
-    "@types/luxon": "^1.12.0",
+    "@types/luxon": "^2.3.0",
     "@types/prismjs": "^1.26.0",
-    "@types/react": "^16.9.5",
-    "@types/react-dom": "^16.9.1",
-    "@types/react-router": "^5.1.1",
-    "@types/react-router-dom": "^5.1.0",
-    "@types/react-transition-group": "^2.0.16",
+    "@types/react": "17.0.39",
+    "@types/react-dom": "17.0.13",
+    "@types/react-router": "^5.1.18",
+    "@types/react-router-dom": "^5.3.3",
+    "@types/react-transition-group": "^4.4.4",
+    "@types/vfile": "^4.0.0",
     "@typescript-eslint/eslint-plugin": "^1.4.2",
     "@typescript-eslint/parser": "^1.4.2",
+    "@wojtekmaj/enzyme-adapter-react-17": "^0.6.6",
     "autoprefixer": "^9.4.10",
     "babel-eslint": "^10.0.1",
+    "babel-loader": "^8.2.3",
     "chokidar-cli": "^3.0.0",
     "concurrently": "^4.1.0",
-    "enzyme": "^3.9.0",
-    "enzyme-adapter-react-16": "^1.10.0",
-    "enzyme-to-json": "^3.4.0",
+    "enzyme": "^3.11.0",
+    "enzyme-to-json": "^3.6.2",
     "eslint": "^5.15.1",
-    "eslint-plugin-react": "^7.12.4",
-    "eslint-plugin-react-hooks": "^1.6.1",
-    "fscreen": "^1.0.2",
+    "eslint-plugin-react": "^7.29.3",
+    "eslint-plugin-react-hooks": "^4.3.0",
+    "fscreen": "^1.2.0",
     "husky": "^3.0.2",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^24.4.0",
+    "jest": "^27.5.1",
     "jsdom": "^14.0.0",
     "lodash.sample": "^4.2.1",
     "lodash.shuffle": "^4.2.0",
@@ -91,16 +99,16 @@
     "postcss-cli": "^6.1.2",
     "postcss-preset-env": "^6.6.0",
     "prismjs": "^1.27.0",
-    "react-docgen": "5.0.0-beta.1",
-    "react-router": "^5.1.2",
-    "react-router-dom": "^5.1.2",
+    "react-docgen": "5.4.0",
+    "react-router": "^5.2.1",
+    "react-router-dom": "^5.2.1",
     "semantic-release": "^18.0.0",
     "stylelint": "^9.2.1",
     "stylelint-order": "^0.8.1",
     "superstatic": "^6.0.4",
-    "ts-jest": "^24.0.0",
+    "ts-jest": "^27.1.3",
     "ts-node": "^8.1.0",
-    "typescript": "^3.5.3"
+    "typescript": "^4.6.2"
   },
   "publishConfig": {
     "access": "public"
@@ -118,7 +126,12 @@
       "./jest.setup.js"
     ],
     "transform": {
+      "\\.ts?$": "ts-jest",
       "\\.tsx?$": "ts-jest"
     }
+  },
+  "resolutions": {
+    "@types/react": "17.0.39",
+    "@types/react-router": "5.1.18"
   }
 }

package/scripts/build-docs.ts

@@ -15,10 +15,10 @@ const exclude = ['Portal'];
 
 const getExportedComponents = (node: ts.Node) => {
   if (node.kind === ts.SyntaxKind.ExportDeclaration) {
-    const decl = node as ts.ExportDeclaration;
+    const decl = node as any;
 
     if (decl.exportClause) {
-      const defaultExport = decl.exportClause.elements.find(({ propertyName }) =>
+      const defaultExport = decl.exportClause.elements.find(({ propertyName }: { propertyName: any}) =>
         !!propertyName && propertyName.getText() === 'default');
 
       if (decl.moduleSpecifier && defaultExport) {

package/site/components/CodeBlock/CodeBlock.css

@@ -1,6 +1,6 @@
 pre[class*='language-'] {
   width: 100%;
-  color: var(--color-gray--1);
+  color: var(--bitkit-colors-gray-1);
   overflow: auto;
 }
 
@@ -23,25 +23,25 @@ code[class*='language-'] {
 .token.prolog,
 .token.doctype,
 .token.cdata {
-  color: var(--color-gray--5);
+  color: var(--bitkit-colors-gray-5);
 }
 
 .token.tag {
-  color: var(--color-red--1);
+  color: var(--bitkit-colors-red-1);
 }
 
 .token.punctuation {
-  color: var(--color-gray--3);
+  color: var(--bitkit-colors-gray-3);
 }
 
 .token.function,
 .token.attr-name,
 .token.selector {
-  color: var(--color-aqua--3);
+  color: var(--bitkit-colors-aqua-3);
 }
 
 .token.string {
-  color: var(--color-green--3);
+  color: var(--bitkit-colors-green-3);
 }
 
 .token.attr-value,
@@ -49,11 +49,11 @@ code[class*='language-'] {
 .token.keyword,
 .token.number,
 .token.property {
-  color: var(--color-grape--2);
+  color: var(--bitkit-colors-grape-2);
 }
 
 .token.function {
-  color: var(--color-yellow--3);
+  color: var(--bitkit-colors-yellow-3);
 }
 
 /*

package/site/components/Documentation/Components/SectionButton2.tsx

@@ -0,0 +1,109 @@
+  /* eslint-disable object-shorthand */
+  import * as React from 'react';
+  import {
+    Base,
+    Buttons,
+    Icon,
+    Tab,
+    Tabs,
+  } from '@bitrise/bitkit';
+  import CodeBlock from '../../CodeBlock/CodeBlock';
+  import Section from '../../Section/Section';
+  import Button2 from '../../../../src/Button2/Button2';
+
+  const SectionButtons = () => {
+    const [selectedTab, setSelectedTab] = React.useState(1);
+
+    return (
+      <Section>
+        <Tabs gap="x6" margin="x8">
+          <Tab
+              active={ selectedTab === 1 }
+              onClick={ () => setSelectedTab(1) }>
+            Variants & Sizes
+          </Tab>
+
+          <Tab
+              active={ selectedTab === 2 }
+              onClick={ () => setSelectedTab(2) }>
+            With Icons
+          </Tab>
+        </Tabs>
+
+        { selectedTab === 1 && (
+        <>
+          <Base margin="x12">
+            <Buttons alignChildrenVertical="end" margin="x3">
+              <Button2 as="a" href="https://www.bitrise.io" size="small" target="_blank">Primary</Button2>
+              <Button2 disabled size="small" variant="primary">Disabled</Button2>
+              <Button2 size="medium" variant="primary">Primary</Button2>
+              <Button2 disabled size="medium" variant="primary">Disabled</Button2>
+            </Buttons>
+
+            <Buttons alignChildrenVertical="end" margin="x3">
+              <Button2 size="small" variant="secondary">Secondary</Button2>
+              <Button2 disabled size="small" variant="secondary">Disabled</Button2>
+              <Button2 size="medium" variant="secondary">Secondary</Button2>
+              <Button2 disabled size="medium" variant="secondary">Disabled</Button2>
+            </Buttons>
+
+            <Buttons alignChildrenVertical="end" margin="x3">
+              <Button2 size="small" variant="tertiary">Tertiary</Button2>
+              <Button2 disabled size="small" variant="tertiary">Disabled</Button2>
+              <Button2 size="medium" variant="tertiary">Tertiary</Button2>
+              <Button2 disabled size="medium" variant="tertiary">Disabled</Button2>
+            </Buttons>
+            <Buttons alignChildrenVertical="end" margin="x3">
+              <Button2 size="small" variant="dangerPrimary">Primary</Button2>
+              <Button2 disabled size="small" variant="dangerPrimary">Disabled</Button2>
+              <Button2 size="medium" variant="dangerPrimary">Primary</Button2>
+              <Button2 disabled size="medium" variant="dangerPrimary">Disabled</Button2>
+            </Buttons>
+
+            <Buttons alignChildrenVertical="end" margin="x3">
+              <Button2 size="small" variant="dangerSecondary">Secondary</Button2>
+              <Button2 disabled size="small" variant="dangerSecondary">Disabled</Button2>
+              <Button2 size="medium" variant="dangerSecondary">Secondary</Button2>
+              <Button2 disabled size="medium" variant="dangerSecondary">Disabled</Button2>
+            </Buttons>
+          </Base>
+
+          <CodeBlock title="Button Usage Example">{
+`const Component = () => (
+  <Buttons>
+    <Button2 size="small" variant="secondary">Secondary</Button2>
+    <Button2 variant="dangerPrimary">Danger Action</Button2>
+  </Buttons>
+);`
+            }</CodeBlock>
+        </>
+      ) }
+
+        { selectedTab === 2 && (
+        <>
+          <Buttons margin="x4">
+            <Button2 leftIcon={ <Icon name="Group" /> } variant="primary">
+              On the left
+            </Button2>
+
+            <Button2 rightIcon={ <Icon name="Group" /> } variant="secondary">
+              On the right
+            </Button2>
+          </Buttons>
+
+          <Buttons margin="x4">
+            <Button2 leftIcon={ <Icon name="Group" /> } size="small" variant="primary">
+              On the left
+            </Button2>
+
+            <Button2 rightIcon={ <Icon name="Group" /> } size="small" variant="secondary">
+              On the right
+            </Button2>
+          </Buttons>
+        </>
+      ) }
+      </Section>
+    );
+  };
+
+  export default SectionButtons;

package/site/components/Documentation/Components/SectionCards.tsx

@@ -19,7 +19,7 @@ const SectionCards = () => {
         <Tab
             active={ selectedTab === 2 }
             onClick={ () => setSelectedTab(2) }>
-         Divided Content
+          Divided Content
         </Tab>
 
         <Tab

package/site/components/Documentation/Components/SectionDropdowns.tsx

@@ -4,7 +4,6 @@ import {
   DropdownMenu,
   DropdownMenus,
   DropdownMenuItem,
-  DropdownMenuItemGroup,
   Flex,
   Icon,
   Placement,