Merge branch 'rebranding/master' into anu/rebranding-skeleton

.github/pull_request_template.md

@@ -0,0 +1,21 @@
+## Description
+
+<!-- Briefly explain the purpose of your PR -->
+
+## Changes
+
+<!-- List the specific changes made, consider adding screenshots if relevant -->
+
+## Additional Information
+
+<!-- Include any relevant details, links to issues, or additional messages -->
+
+## Component Checklist
+
+<!-- Ensure that the following tasks are completed before submitting your PR. Tick the applicable boxes -->
+
+- [ ] Update Component Status Page
+- [ ] Perform Manual Testing in Other Browsers
+- [ ] Add KitchenSink Story
+- [ ] Add Interaction Tests (if applicable)
+- [ ] Add changeset

packages/blade/.storybook/react/main.ts

@@ -40,8 +40,10 @@ const config: StorybookConfig = {
     '../../src/components/Accordion/**/*.stories.@(ts|tsx|js|jsx)',
     '../../src/components/BottomSheet/**/**/*.stories.@(ts|tsx|js|jsx)',
     '../../src/components/Modal/**/**/*.stories.@(ts|tsx|js|jsx)',
+    '../../src/components/Radio/**/**/*.stories.@(ts|tsx|js|jsx)',
     '../../src/components/Popover/**/**/*.stories.@(ts|tsx|js|jsx)',
     '../../src/components/Skeleton/**/**/*.stories.@(ts|tsx|js|jsx)',
+    '../../src/components/Checkbox/**/**/*.stories.@(ts|tsx|js|jsx)',
     '../../docs/**/*.stories.mdx',
     '../../docs/**/*.stories.@(ts|tsx|js|jsx)',
     // '../../src/**/*.stories.mdx',

packages/blade/.storybook/react/preview.tsx

@@ -72,6 +72,13 @@ export const parameters = {
         }
         return bladeTheme;
       };
+
+      if (context.store.globals.globals.version === '10' && window.top) {
+        window.top.location.href =
+          'https://v10--61c19ee8d3d282003ac1d81c.chromatic.com' +
+          window.top.location.pathname +
+          window.top.location.search;
+      }
       return (
         <DocsContainer context={context}>
           <BladeProvider
@@ -146,6 +153,13 @@ export const decorators = [
       return bladeTheme;
     };
 
+    if (context.globals.version === '10' && window.top) {
+      window.top.location.href =
+        'https://v10--61c19ee8d3d282003ac1d81c.chromatic.com' +
+        window.top.location.pathname +
+        window.top.location.search;
+    }
+
     return (
       <ErrorBoundary>
         <GlobalStyle />
@@ -164,6 +178,23 @@ export const decorators = [
 ];
 
 export const globalTypes = {
+  version: {
+    name: 'Blade Documentation Version',
+    description: 'Version of the Blade',
+    defaultValue: '11',
+    toolbar: {
+      icon: 'time',
+      title: ' v11 - Rebranded',
+      // Array of plain string values or MenuItem shape (see below)
+      items: [
+        { value: '10', title: ' v10 - Old' },
+        { value: '11', title: ' v11 - Rebranded', default: true },
+      ],
+      dynamicTitle: true,
+      // Property that specifies if the name of the item will be displayed
+      showName: false,
+    },
+  },
   colorScheme: {
     name: 'Color Scheme',
     description: 'Color Scheme for Blade',

packages/blade/jest.native.config.js

@@ -21,6 +21,7 @@ module.exports = {
   testMatch: [
     ...rebrandedComponents.map((component) => `**/${component}.native.test.{ts,tsx}`),
     '**/Icons/*Icon/*.native.test.{ts,tsx}',
+    '**/utils/**/*.test.{ts,tsx}',
   ],
   transform: {
     '\\.(js|ts|tsx)?$': './jest-preprocess.js',

packages/blade/jest.web.config.js

@@ -18,6 +18,7 @@ const baseConfig = {
     ...rebrandedComponents.map((component) => `**/${component}.web.test.{ts,tsx}`),
     '**/Icons/*Icon/*.web.test.{ts,tsx}',
     '**/codemods/**/*.test.{ts,tsx}',
+    '**/utils/**/*.test.{ts,tsx}',
   ],
   transform: {
     '\\.(js|ts|tsx)?$': './jest-preprocess.js',

packages/blade/rebranded-components.js

@@ -31,6 +31,8 @@ const rebrandedComponents = [
   'VisuallyHidden',
   'Tooltip',
   'Skeleton',
+  'Radio',
+  'Checkbox',
 ];
 
 module.exports = { rebrandedComponents };

packages/blade/src/components/Card/Card.stories.tsx

@@ -17,6 +17,7 @@ import {
   CardHeaderBadge,
   CardHeaderIconButton,
   CardHeaderLink,
+  CardHeaderAmount,
   CardHeaderText,
 } from './';
 import { Sandbox } from '~utils/storybook/Sandbox';
@@ -151,6 +152,7 @@ const visual = {
   Text: <CardHeaderText>$100</CardHeaderText>,
   IconButton: <CardHeaderIconButton icon={TrashIcon} />,
   Badge: <CardHeaderBadge color="positive">NEW</CardHeaderBadge>,
+  Amount: <CardHeaderAmount value={1000} />,
 };
 
 export default {

packages/blade/src/components/Card/CardHeader.tsx

@@ -24,6 +24,8 @@ import { makeSpace } from '~utils/makeSpace';
 import { getComponentId, isValidAllowedChildren } from '~utils/isValidAllowedChildren';
 import { throwBladeError } from '~utils/logger';
 import { useVerifyAllowedChildren } from '~utils/useVerifyAllowedChildren/useVerifyAllowedChildren';
+import type { AmountProps } from '~components/Amount';
+import { Amount } from '~components/Amount';
 
 const _CardHeaderIcon = ({ icon: Icon }: { icon: IconComponent }): React.ReactElement => {
   useVerifyInsideCard('CardHeaderIcon');
@@ -52,15 +54,15 @@ const CardHeaderBadge = assignWithoutSideEffects(_CardHeaderBadge, {
   componentId: ComponentIds.CardHeaderBadge,
 });
 
-// @TODO: uncomment and export this when Amount component is migrated
-// const _CardHeaderAmount = (props: AmountProps): React.ReactElement => {
-//   useVerifyInsideCard('CardHeaderAmount');
+const _CardHeaderAmount = (props: AmountProps): React.ReactElement => {
+  useVerifyInsideCard('CardHeaderAmount');
 
-//   return <Amount {...props} />;
-// };
-// const CardHeaderAmount = assignWithoutSideEffects(_CardHeaderAmount, {
-//   componentId: ComponentIds.CardHeaderAmount,
-// });
+  return <Amount {...props} />;
+};
+
+const CardHeaderAmount = assignWithoutSideEffects(_CardHeaderAmount, {
+  componentId: ComponentIds.CardHeaderAmount,
+});
 
 const _CardHeaderText = (props: TextProps<{ variant: TextVariant }>): React.ReactElement => {
   useVerifyInsideCard('CardHeaderText');
@@ -228,6 +230,7 @@ const headerTrailingAllowedComponents = [
   ComponentIds.CardHeaderText,
   ComponentIds.CardHeaderIconButton,
   ComponentIds.CardHeaderBadge,
+  ComponentIds.CardHeaderAmount,
 ];
 
 const _CardHeaderTrailing = ({ visual }: CardHeaderTrailingProps): React.ReactElement => {
@@ -259,5 +262,6 @@ export {
   CardHeaderCounter,
   CardHeaderText,
   CardHeaderLink,
+  CardHeaderAmount,
   CardHeaderIconButton,
 };

packages/blade/src/components/Card/__tests__/Card.native.test.tsx

@@ -163,7 +163,7 @@ describe('<Card />', () => {
         </Card>,
       ),
     ).toThrow(
-      '[Blade: CardHeaderTrailing]: Only one of `CardHeaderLink, CardHeaderText, CardHeaderIconButton, CardHeaderBadge` component is accepted in visual',
+      '[Blade: CardHeaderTrailing]: Only one of `CardHeaderLink, CardHeaderText, CardHeaderIconButton, CardHeaderBadge, CardHeaderAmount` component is accepted in visual',
     );
     mockConsoleError.mockRestore();
   });

packages/blade/src/components/Card/__tests__/Card.web.test.tsx

@@ -160,7 +160,7 @@ describe('<Card />', () => {
         </Card>,
       ),
     ).toThrow(
-      '[Blade: CardHeaderTrailing]: Only one of `CardHeaderLink, CardHeaderText, CardHeaderIconButton, CardHeaderBadge` component is accepted in visual',
+      '[Blade: CardHeaderTrailing]: Only one of `CardHeaderLink, CardHeaderText, CardHeaderIconButton, CardHeaderBadge, CardHeaderAmount` component is accepted in visual',
     );
     mockConsoleError.mockRestore();
   });

packages/blade/src/components/Checkbox/CheckboxIcon/CheckboxIcon.tsx

@@ -78,10 +78,7 @@ const CheckboxIcon = ({
   size,
 }: CheckboxIconProps) => {
   const { theme } = useTheme();
-  const defaultIconColor = getIn(theme, 'colors.brand.gray.200.lowContrast');
-  const disabledIconColor = getIn(theme, 'colors.brand.gray.500.lowContrast');
-  const iconColor = isDisabled ? disabledIconColor : defaultIconColor;
-
+  const iconColor = getIn(theme, 'colors.interactive.icon.staticWhite.normal');
   return (
     <CheckboxIconWrapper
       size={size}

packages/blade/src/components/Checkbox/CheckboxIcon/CheckboxIconWrapperStyles.ts

@@ -24,8 +24,8 @@ const getCheckboxIconWrapperStyles = ({
   const checked = isChecked ? 'checked' : 'unchecked';
   const background = checkboxIconColors.variants[variant].background[checked];
   const border = checkboxIconColors.variants[variant].border[checked];
-  const backgroundColor = background === 'transparent' ? background : getIn(theme, background);
-  const borderColor = border === 'transparent' ? border : getIn(theme, border);
+  const backgroundColor = getIn(theme, background);
+  const borderColor = getIn(theme, border);
 
   return {
     position: 'relative',

packages/blade/src/components/Checkbox/__tests__/__snapshots__/Checkbox.native.test.tsx.snap

@@ -95,8 +95,8 @@ exports[`<Checkbox /> should render checkbox with label 1`] = `
               [
                 {
                   "alignItems": "center",
-                  "backgroundColor": "transparent",
-                  "borderColor": "hsla(214, 18%, 69%, 1)",
+                  "backgroundColor": "hsla(0, 0%, 100%, 0)",
+                  "borderColor": "hsla(211, 27%, 76%, 1)",
                   "borderRadius": 2,
                   "borderStyle": "solid",
                   "borderWidth": 1.5,
@@ -126,16 +126,17 @@ exports[`<Checkbox /> should render checkbox with label 1`] = `
           />
           <Text
             accessible={true}
-            color="surface.text.subtle.lowContrast"
-            data-blade-component="base-text"
+            color="surface.text.gray.subtle"
+            data-blade-component="text"
             fontFamily="text"
             fontSize={100}
+            fontStyle="normal"
             fontWeight="regular"
             lineHeight={100}
             style={
               [
                 {
-                  "color": "hsla(216, 27%, 36%, 1)",
+                  "color": "hsla(211, 26%, 34%, 1)",
                   "fontFamily": "Inter",
                   "fontSize": 14,
                   "fontStyle": "normal",
@@ -260,8 +261,8 @@ exports[`<Checkbox /> should set disabled state with isDisabled 1`] = `
               [
                 {
                   "alignItems": "center",
-                  "backgroundColor": "transparent",
-                  "borderColor": "hsla(216, 15%, 54%, 0.18)",
+                  "backgroundColor": "hsla(0, 0%, 100%, 0)",
+                  "borderColor": "hsla(214, 40%, 92%, 1)",
                   "borderRadius": 2,
                   "borderStyle": "solid",
                   "borderWidth": 1.5,
@@ -291,16 +292,17 @@ exports[`<Checkbox /> should set disabled state with isDisabled 1`] = `
           />
           <Text
             accessible={true}
-            color="surface.text.placeholder.lowContrast"
-            data-blade-component="base-text"
+            color="surface.text.gray.disabled"
+            data-blade-component="text"
             fontFamily="text"
             fontSize={100}
+            fontStyle="normal"
             fontWeight="regular"
             lineHeight={100}
             style={
               [
                 {
-                  "color": "hsla(214, 18%, 69%, 1)",
+                  "color": "hsla(211, 20%, 52%, 0.32)",
                   "fontFamily": "Inter",
                   "fontSize": 14,
                   "fontStyle": "normal",
@@ -425,8 +427,8 @@ exports[`<Checkbox /> should set error state with validationState 1`] = `
               [
                 {
                   "alignItems": "center",
-                  "backgroundColor": "hsla(9, 91%, 56%, 0.09)",
-                  "borderColor": "hsla(8, 73%, 47%, 1)",
+                  "backgroundColor": "hsla(0, 0%, 100%, 0)",
+                  "borderColor": "hsla(4, 74%, 49%, 1)",
                   "borderRadius": 2,
                   "borderStyle": "solid",
                   "borderWidth": 1.5,
@@ -456,16 +458,17 @@ exports[`<Checkbox /> should set error state with validationState 1`] = `
           />
           <Text
             accessible={true}
-            color="surface.text.subtle.lowContrast"
-            data-blade-component="base-text"
+            color="surface.text.gray.subtle"
+            data-blade-component="text"
             fontFamily="text"
             fontSize={100}
+            fontStyle="normal"
             fontWeight="regular"
             lineHeight={100}
             style={
               [
                 {
-                  "color": "hsla(216, 27%, 36%, 1)",
+                  "color": "hsla(211, 26%, 34%, 1)",
                   "fontFamily": "Inter",
                   "fontSize": 14,
                   "fontStyle": "normal",
@@ -558,7 +561,7 @@ exports[`<Checkbox /> should set error state with validationState 1`] = `
           >
             <RNSVGPath
               d="M12 11C12.5523 11 13 11.4477 13 12V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V12C11 11.4477 11.4477 11 12 11Z"
-              fill={4291770400}
+              fill={4288286222}
               propList={
                 [
                   "fill",
@@ -567,7 +570,7 @@ exports[`<Checkbox /> should set error state with validationState 1`] = `
             />
             <RNSVGPath
               d="M12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9H12.01C12.5623 9 13.01 8.55228 13.01 8C13.01 7.44772 12.5623 7 12.01 7H12Z"
-              fill={4291770400}
+              fill={4288286222}
               propList={
                 [
                   "fill",
@@ -577,7 +580,7 @@ exports[`<Checkbox /> should set error state with validationState 1`] = `
             <RNSVGPath
               clipRule={0}
               d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3Z"
-              fill={4291770400}
+              fill={4288286222}
               fillRule={0}
               propList={
                 [
@@ -600,16 +603,17 @@ exports[`<Checkbox /> should set error state with validationState 1`] = `
         />
         <Text
           accessible={true}
-          color="feedback.text.negative.lowContrast"
-          data-blade-component="base-text"
+          color="feedback.text.negative.intense"
+          data-blade-component="text"
           fontFamily="text"
           fontSize={50}
           fontStyle="italic"
+          fontWeight="regular"
           lineHeight={50}
           style={
             [
               {
-                "color": "hsla(8, 73%, 47%, 1)",
+                "color": "hsla(0, 83%, 33%, 1)",
                 "fontFamily": "Inter",
                 "fontSize": 11,
                 "fontStyle": "italic",