3.0.0 🎉 (#97)

* Add new variables - Add new color palette - Add hues - Button variables - Update typography * Change `fontWeight` variable to `typography` * Change `purple` variable to `purple500` * Update `button-link` component - Add `useColor` hook - Add support to `txtColor` prop - Button colors based on design tokens - Update defaults - Remove `useMouseMoveEffect` and `querySelector ` * Change `fontWeight` variable to `typography` * Add new props on ButtonLink component - rounded - aria-label - aria-hidden - rename greysclale[...] color token to grey[...] * Rename 'Design System' section to 'Components' * Fix SelectInteractive component build * Add color palette doc * Fix font render on buttons * Add new props on Button component * Add new props on ButtonDropdown component * Fix margin differences between browsers * Add new `launch` and `arrow-external` icons * Add color palette support on tag and tag number components * Update snapshots * v3.0.0-beta.1 * Fix hover on a disabled button (Safari) * Add loading state on table component * Update snapshots * Remove type table from `loading-state` component * Disable row hover on loading state * Fix table responsiveness * Small fixes - change default icon position to left; - force checked styling on checkbox through aria attribute; - remove truncate on tags; - fix text color in outline tags; - fix the close button on modals. * Update tests * v3.0.0-beta.2 * Bump react-select to 5.4.0 * Update customImage on select interactive Instead using a react node inside the data array (e.g., customImage: <img src="/images/default-avatar.svg" alt="" />) use the just the path string (e.g., customImage: '/images/default-avatar.svg'). * [FIX] Altering the styles from `CheckBox` when the prop `checked` changes (#95) * fix: altering the styles when the prop `checked` changes * Bump react-select to 5.4.0 * Update customImage on select interactive Instead using a react node inside the data array (e.g., customImage: <img src="/images/default-avatar.svg" alt="" />) use the just the path string (e.g., customImage: '/images/default-avatar.svg'). Co-authored-by: Henrique Macedo <[email protected]> * Update snapshots * Fix TS errors on select-interactive * v3.0.0-beta.3 * fix(modal-drawer): `body` content scrolling when modal is open (#109) * Update buttons styling * Update snapshots * Update snapshot * v3.0.0-beta.4 * fix: remove overflow on `willUnmount` (#110) * Improve button action and button link style options * Update modal-footer.test.tsx.snap * v3.0.0-beta.5 * Add support for TKAI and VKAI currencies on labels - Move label stories to the component folder - Add new TKAI and VKAI icons - Improve label styling with new design tokens * Add support for TKAI and VKAI currencies on card value - Move card value stories to the component folder - Use new label props to support TKAI and VKAI icons * Use new label props to support TKAI and VKAI on form groups * Add support to TKAI and VKAI currencies on tables * Remove default currency * Currency possible undefined * Update types.ts * Fix tests * Update package.json * Fix spinner position based on icon position on buttons * update(table): `loadingRows = 5` (#111) --------- Co-authored-by: Rtandrew Paul <[email protected]>
layerx-labs · Feb 8, 2023 · d391a6c · d391a6c
1 parent 706693e
commit d391a6c
Show file tree

Hide file tree

Showing 124 changed files with 15,372 additions and 14,912 deletions.
diff --git a/.storybook/main.js b/.storybook/main.js
@@ -1,6 +1,6 @@
 module.exports = {
   stories: [
-    '../stories/**/*.stories.@(ts|tsx|js|jsx)',
+    '../stories/**/*.stories.@(ts|tsx|js|jsx|mdx)',
     '../src/**/*.stories.@(ts|tsx|js|jsx)',
   ],
   addons: [

diff --git a/package.json b/package.json
@@ -50,14 +50,14 @@
     "trailingComma": "es5",
     "arrowParens": "avoid"
   },
-  "module": "dist/taikai-design-system.esm.js",
+  "module": "dist/rocket-kit.esm.js",
   "size-limit": [
     {
-      "path": "dist/taikai-design-system.cjs.production.min.js",
+      "path": "dist/rocket-kit.cjs.production.min.js",
       "limit": "30 KB"
     },
     {
-      "path": "dist/taikai-design-system.esm.js",
+      "path": "dist/rocket-kit.esm.js",
       "limit": "30 KB"
     }
   ],
@@ -79,7 +79,6 @@
     "@types/react-beautiful-dnd": "^13.1.1",
     "@types/react-dom": "^17.0.1",
     "@types/react-paginate": "^7.1.0",
-    "@types/react-select": "^4.0.15",
     "@types/styled-components": "^5.1.4",
     "babel-jest": "^26.6.3",
     "babel-loader": "^8.2.2",
@@ -115,7 +114,7 @@
     "react-player": "^2.9.0",
     "react-responsive-carousel": "^3.2.18",
     "react-responsive-tabs": "^4.4.1",
-    "react-select": "^4.3.1",
+    "react-select": "^5.4.0",
     "styled-components": "^5.2.1",
     "uuid": "^8.3.2"
   }

diff --git a/src/atoms/avatar-image/stories/avatar-image.stories.tsx b/src/atoms/avatar-image/stories/avatar-image.stories.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import AvatarImage, { AvatarProps } from '..';
 
 export default {
-  title: 'Design System/Atoms/Avatar Image',
+  title: 'Components/Atoms/Avatar Image',
   component: AvatarImage,
   argTypes: {
     boringType: {

diff --git a/src/atoms/button-dropdown/index.tsx b/src/atoms/button-dropdown/index.tsx
@@ -7,36 +7,46 @@ import { ActionMenu } from './types';
 
 export interface ActionsMenuInterface<T> {
   variant?: ButtonVariant;
+  rounded?: boolean;
   color?: ButtonColor;
-  value: string;
-  icon?: string;
+  txtColor?: ButtonColor;
   className?: string;
   style?: CSSProperties;
-  ariaLabel?: string;
   actions: ActionMenu<T>[];
-  data?: T;
+  value?: string;
+  icon: string;
+  ariaLabel?: string;
+  ariaHidden?: boolean;
   dataTestId?: string;
+  eventId?: string;
+  data?: T;
   startsOpen?: boolean;
   disabled?: boolean;
 }
 
 const ButtonDropdown = <T,>(props: ActionsMenuInterface<T>) => {
   const {
-    className = 'button-dropdown',
     variant = 'solid',
-    color = 'green',
+    rounded = false,
+    color = 'purple500',
+    txtColor = 'white',
+    className = 'button-dropdown',
+    style,
+    actions = [],
     value = '',
-    icon = 'keyboardDown',
+    icon = 'add',
+    dataTestId = 'action-button-dropdown',
+    eventId = '',
     ariaLabel = '',
-    actions = [],
+    ariaHidden = false,
     data = null,
-    dataTestId = 'action-button-dropdown',
     startsOpen = false,
     disabled = false,
   } = props;
 
-  const { ref, isVisible, setIsVisible } =
-    useVisible<HTMLDivElement>(startsOpen);
+  const { ref, isVisible, setIsVisible } = useVisible<HTMLDivElement>(
+    startsOpen
+  );
 
   if (!actions || !Array.isArray(actions) || actions.length === 0) return <></>;
 
@@ -49,21 +59,26 @@ const ButtonDropdown = <T,>(props: ActionsMenuInterface<T>) => {
   return (
     <Styles.ActionsMenuStyle
       className={className}
+      style={style}
       visibleActions={visibleActions.length}
       ref={ref}
     >
       <Button
         variant={variant}
+        rounded={rounded}
         color={color}
-        value={value}
-        icon={icon}
-        iconPosition="right"
-        ariaLabel={ariaLabel}
+        txtColor={txtColor}
         action={evt => {
           evt.preventDefault();
           setIsVisible(!isVisible);
         }}
-        dataTestId={dataTestId}
+        value={value}
+        iconPosition="right"
+        icon={icon}
+        data-testid={dataTestId}
+        data-event={eventId}
+        ariaLabel={ariaLabel}
+        aria-hidden={ariaHidden}
         disabled={disabled}
       />
 

diff --git a/src/atoms/button-dropdown/stories/button-dropdown.stories.tsx b/src/atoms/button-dropdown/stories/button-dropdown.stories.tsx
@@ -1,32 +1,28 @@
 import React from 'react';
 import ButtonDropdown, { ActionsMenuInterface } from '..';
 import icons from '../../../ions/icons';
+import { colors } from '../../../ions/variables';
 
 export default {
-  title: 'Design System/Atoms/Button',
+  title: 'Components/Atoms/Button',
   component: ButtonDropdown,
   argTypes: {
+    variant: {
+      control: {
+        type: 'inline-radio',
+        options: ['solid', 'outline', 'text'],
+      },
+    },
     color: {
       control: {
         type: 'select',
-        options: [
-          'green',
-          'orange',
-          'red',
-          'grey',
-          'purple',
-          'blue',
-          'white',
-          'dark',
-          'magic',
-          'pulse',
-        ],
+        options: Object.keys(colors),
       },
     },
-    variant: {
+    txtColor: {
       control: {
-        type: 'inline-radio',
-        options: ['solid', 'outline', 'text'],
+        type: 'select',
+        options: Object.keys(colors),
       },
     },
     icon: {
@@ -41,7 +37,7 @@ export default {
 const actions = [
   {
     id: 'createChallenge',
-    value: 'Challenge',
+    value: 'Hackathon',
     url: null,
     action: () => {},
   },
@@ -60,12 +56,15 @@ export const ButtonDropdownComponent = <T,>(args: ActionsMenuInterface<T>) => (
 ButtonDropdownComponent.storyName = 'Dropdown';
 ButtonDropdownComponent.args = {
   variant: 'solid',
-  color: 'green',
+  rounded: false,
+  color: 'purple500',
+  txtColor: 'white',
+  className: 'button-dropdown',
   value: 'Create',
   icon: 'add',
-  ariaLabel: 'Create Challenge',
+  ariaLabel: 'Create new challenge',
+  ariaHidden: false,
   actions,
-  dataTestId: 'action-button-dropdown',
   startsOpen: false,
   disabled: false,
 };
diff --git a/src/atoms/button-link/__tests__/__snapshots__/button-link.test.tsx.snap b/src/atoms/button-link/__tests__/__snapshots__/button-link.test.tsx.snap
@@ -3,21 +3,19 @@
 exports[`Button Link renders 1`] = `
 <DocumentFragment>
   .c0 {
-  --button: #56cad7;
+  --bg: #4329A6;
   --txt: #ffffff;
-  --hover: #2ba8b6;
-  --button: #56cad7;
-  --hover: #2ba8b6;
+  --hover: #362185;
   border-width: 0;
   border-style: solid;
-  border-color: var(--button);
-  border-radius: 999px;
-  background-color: var(--button);
+  border-color: var(--bg);
+  border-radius: 0.5rem;
+  background-color: var(--bg);
   width: -webkit-min-content;
   width: -moz-min-content;
   width: min-content;
-  min-width: 2rem;
-  height: 2rem;
+  min-width: 2.625rem;
+  height: 2.75rem;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -31,7 +29,6 @@ exports[`Button Link renders 1`] = `
   -ms-flex-align: center;
   align-items: center;
   padding: 0;
-  text-transform: uppercase;
   white-space: nowrap;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -46,17 +43,14 @@ exports[`Button Link renders 1`] = `
 
 .c0 > *:not(:last-child) {
   margin-left: 0;
-  margin-right: 5px;
+  margin-right: 0.875rem;
 }
 
 .c0 span {
   position: relative;
-  font-size: 0.75rem;
+  font-size: 1rem;
   font-weight: 500;
-  -webkit-letter-spacing: 1px;
-  -moz-letter-spacing: 1px;
-  -ms-letter-spacing: 1px;
-  letter-spacing: 1px;
+  line-height: 1rem;
   color: var(--txt);
   pointer-events: none;
   -webkit-transition-duration: 0.3s;
@@ -70,23 +64,18 @@ exports[`Button Link renders 1`] = `
   -webkit-order: 1;
   -ms-flex-order: 1;
   order: 1;
-  width: auto;
-  min-width: 1.25rem;
+  width: 1.25rem;
   height: 1.25rem;
   fill: var(--txt);
   -webkit-transition: 0.3s;
   transition: 0.3s;
 }
 
-@media (min-width:1280px) {
-  .c0 {
-    min-width: 2rem;
-  }
-}
-
 <a
+    aria-hidden="false"
+    aria-label=""
     class="c0 button button-link"
-    color="green"
+    color="purple500"
     data-event=""
     data-testid=""
     href="https://github.com/taikai/taikai-design-system"

diff --git a/src/atoms/button-link/index.tsx b/src/atoms/button-link/index.tsx
@@ -1,67 +1,72 @@
 import React, { CSSProperties } from 'react';
 import { Icon } from '../..';
-import { useMouseMoveEffect } from '../../utils/hooks/use-mouse-move-effect';
 import { ButtonColor, ButtonVariant } from '../button/types';
 import * as Styles from './styles';
 
 export interface ButtonLinkProps {
-  url: string;
-  blank?: boolean;
   variant?: ButtonVariant;
-  circle?: boolean;
+  rounded?: boolean;
   color?: ButtonColor;
-  value?: string;
+  txtColor?: ButtonColor;
   className?: string;
-  querySelector?: string;
-  ariaLabel?: string;
+  style?: CSSProperties;
   action?: (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void;
+  url: string;
+  blank?: boolean;
+  rel?: string;
+  value?: string;
+  iconPosition?: 'left' | 'right';
+  icon?: string;
   dataTestId?: string;
   eventId?: string;
-  icon?: string;
-  iconPosition?: 'left' | 'right';
-  style?: CSSProperties;
-  rel?: string;
+  ariaLabel?: string;
+  ariaHidden?: boolean;
 }
 
 const ButtonLink = (props: ButtonLinkProps) => {
   const {
     variant = 'solid',
-    color = 'green',
-    querySelector = '.button-link',
+    rounded = false,
+    color = 'purple500',
+    txtColor,
     className = 'button-link',
+    style,
+    action = () => {},
     url,
     blank = false,
-    icon = '',
-    iconPosition = 'left',
+    rel = undefined,
     value = '',
-    action = () => {},
+    iconPosition = 'left',
+    icon = '',
     dataTestId = '',
     eventId = '',
-    style,
-    rel = undefined,
+    ariaLabel = '',
+    ariaHidden = false,
   } = props;
 
   const getRelationshipAttributes = () => {
     if (rel && rel !== '') return rel;
     return blank ? 'noopener noreferrer' : '';
   };
 
-  useMouseMoveEffect({ querySelector });
-
   return (
     <Styles.ButtonLinkStyle
       variant={variant}
+      rounded={rounded}
       color={color}
+      txtColor={txtColor}
       className={`button ${className}`}
+      style={style}
+      onClick={action}
       href={url}
       target={blank ? '_blank' : ''}
+      rel={getRelationshipAttributes()}
       value={value}
-      onClick={action}
+      iconPosition={iconPosition}
       data-testid={dataTestId}
       data-event={eventId}
-      style={style}
-      iconPosition={iconPosition}
-      rel={getRelationshipAttributes()}
+      aria-label={ariaLabel}
+      aria-hidden={ariaHidden}
     >
       {icon && <Icon icon={icon} />}
       {value && <span>{value}</span>}