Merge branch 'main' into lw-10411-nft-as-avatar-test

input-output-hk · May 21, 2024 · 3445c91 · 3445c91
2 parents 8f2e40c + 90d84e9
commit 3445c91
Show file tree

Hide file tree

Showing 7 changed files with 70 additions and 17 deletions.
diff --git a/packages/core/.storybook/theme.scss b/packages/core/.storybook/theme.scss
@@ -12,7 +12,7 @@
     }
   }
 
-  html[data-theme='dark'],
+  html[data-theme='dark']:not(:has(div[data-theme='light'])),
   div[data-theme='dark'] {
     @include theme-custom-properties($dark-theme);
   }
@@ -28,7 +28,7 @@
     }
   }
 
-  html[data-theme='light'],
+  html[data-theme='light']:not(:has(div[data-theme='dark'])),
   div[data-theme='light'] {
     @include theme-custom-properties($light-theme);
   }

diff --git a/packages/core/src/ui/components/DestinationAddressInput/DestinationAddressInput.module.scss b/packages/core/src/ui/components/DestinationAddressInput/DestinationAddressInput.module.scss
@@ -79,9 +79,10 @@ button.addressBookBtn {
     flex: 1;
     font-weight: 400;
     padding-right: size_unit(1.5);
+    white-space: nowrap;
     &:first-child {
       font-weight: 600;
-      flex:0;
+      flex: 0;
     }
 
     p {
@@ -93,7 +94,6 @@ button.addressBookBtn {
   }
 }
 
-
 .children {
   pointer-events: none;
   position: absolute;
@@ -102,7 +102,7 @@ button.addressBookBtn {
   z-index: 1;
   background: var(--light-mode-light-grey, var(--dark-mode-dark-grey, #2f2f2f)) !important;
   padding-left: size_unit(1.5);
-  
+
   @media (max-width: $breakpoint-popup) {
     top: 8px;
     left: 0px;

diff --git a/packages/core/src/ui/components/DestinationAddressInput/DestinationAddressInput.stories.tsx b/packages/core/src/ui/components/DestinationAddressInput/DestinationAddressInput.stories.tsx
@@ -0,0 +1,55 @@
+/* eslint-disable unicorn/no-null */
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { DestinationAddressInput, DestinationAddressInputProps } from './DestinationAddressInput';
+import noop from 'lodash/noop';
+import { Flex } from '@lace/ui';
+
+const meta: Meta<DestinationAddressInputProps> = {
+  title: 'Components/DestinationAddressInput',
+  component: DestinationAddressInput,
+  parameters: {
+    layout: 'centered'
+  },
+  render: (props) => (
+    <Flex flexDirection="column" alignItems="stretch">
+      <DestinationAddressInput {...props} />
+    </Flex>
+  )
+};
+
+export default meta;
+
+type Story = StoryObj<DestinationAddressInputProps>;
+
+const data: DestinationAddressInputProps = {
+  value: {
+    name: 'My Address',
+    address:
+      'addr_test1qqmlvzkhufx0f94vqtfsmfa7yzxtwql8ga8aq5yk6u98gn593a82g73tm9n0l6vehusxn3fxwwxhrssgmvnwnlaa6p4qdgdrwh'
+  },
+  validationObject: { name: true, address: true },
+  options: [],
+  onChange: noop,
+  valid: true,
+  translations: {
+    recipientAddress: 'Recipient Address'
+  }
+};
+
+export const Overview: Story = {
+  args: {
+    ...data
+  }
+};
+
+export const LongName: Story = {
+  args: {
+    ...data,
+    value: {
+      ...data.value,
+      name: 'My Payment Address'
+    }
+  }
+};
diff --git a/packages/e2e-tests/src/features/NFTsExtended.feature b/packages/e2e-tests/src/features/NFTsExtended.feature
@@ -1,7 +1,7 @@
 @NFTs-Extended @Testnet
 Feature: LW-423: NFTs - Extended view
 
-  Background: 
+  Background:
     Given Wallet is synced
 
   @LW-2495 @Smoke @Mainnet
@@ -57,7 +57,6 @@ Feature: LW-423: NFTs - Extended view
     Given I am on NFTs extended page
     When I click on a widget item with subtitle: "<subtitle>"
     Then I see a "<type>" article with title "<subtitle>"
-
     Examples: 
       | type     | subtitle                        |
       | Glossary | What are collections?           |

diff --git a/packages/e2e-tests/src/features/NFTsPopup.feature b/packages/e2e-tests/src/features/NFTsPopup.feature
@@ -70,4 +70,4 @@ Feature: LW-411 Ext.PopUp - Collectibles/NFTs
     And I save NFT details
     And I click "Set as your wallet avatar" button on NFT details drawer
     When I close the drawer by clicking back button
-    Then the NFT is set as a wallet profile avatar
+    Then the NFT is set as a wallet profile avatar
diff --git a/packages/ui/src/design-system/decorators/color-schema/color-schema.css.ts b/packages/ui/src/design-system/decorators/color-schema/color-schema.css.ts
@@ -11,9 +11,9 @@ export const storyContainer = style([
   { flex: 1, overflowY: 'auto' },
 ]);
 
-export const root = style([
-  sx({
-    minHeight: '$fill',
-    h: '$fill',
-  }),
-]);
+export const root = style({
+  minHeight: '100%',
+  height: '100%',
+  display: 'flex',
+  flexDirection: 'row',
+});
diff --git a/packages/ui/src/design-system/decorators/color-schema/color-schema.decorator.tsx b/packages/ui/src/design-system/decorators/color-schema/color-schema.decorator.tsx
@@ -4,14 +4,13 @@ import type { DecoratorFunction } from '@storybook/csf/dist/story';
 import type { ReactFramework } from '@storybook/react';
 
 import { ThemeColorScheme, LocalThemeProvider } from '../../../design-tokens';
-import { Flex } from '../../flex';
 
 import * as styles from './color-schema.css';
 
 export const colorSchemaDecorator: DecoratorFunction<
   ReactFramework
 > = Story => (
-  <Flex className={styles.root} flexDirection="row">
+  <div className={styles.root}>
     <LocalThemeProvider
       colorScheme={ThemeColorScheme.Light}
       className={styles.storyContainer}
@@ -24,5 +23,5 @@ export const colorSchemaDecorator: DecoratorFunction<
     >
       <Story />
     </LocalThemeProvider>
-  </Flex>
+  </div>
 );