This repository has been archived by the owner on Jun 10, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 5
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'main' into Jia/update-block-wrapper
- Loading branch information
Showing
61 changed files
with
1,196 additions
and
268 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,23 +1,38 @@ | ||
| # Name | ||
|
|
||
| Deriv.com V2 - a sandbox for the Quill Design System | ||
|
|
||
| [](https://coveralls.io/github/deriv-com/deriv-com-v2?branch=main) | ||
|
|
||
| # Deriv Com V2 | ||
| # Description | ||
|
|
||
| The Deriv Com V2 Project serves as a sandbox for the Quill Design System. This is where we construct our Quill blocks and components, and develop our application within the apps folder utilizing these reusable elements. Additionally, Quill Icons are incorporated here. | ||
|
|
||
| Deriv Com V2 Project | ||
| # Installation | ||
|
|
||
| ### Requirements | ||
| Follow these steps to install, set up and run the project locally. Make sure you have the prerequisites installed before you begin. | ||
|
|
||
| ### Prerequisites | ||
|
|
||
| - Node v18.x | ||
| - Git v2.3x | ||
| - Git v2.3 | ||
|
|
||
| ## - Step 1: Clone the repository | ||
|
|
||
| ### Project Setup | ||
| ``` | ||
| git clone [email protected]:deriv-com/deriv-com-v2.git | ||
| cd deriv-com-v2 | ||
| ``` | ||
|
|
||
| #### Steps: | ||
|
|
||
| 1. clone the project: `git clone [email protected]:deriv-com/deriv-com-v2.git` | ||
| 2. cd into the folder: `cd deriv-com-v2` | ||
| 3. install the packages: `npm ci` | ||
| ## - Step 2: Install dependencies | ||
|
|
||
| ### Commands | ||
| ``` | ||
| npm ci | ||
| ``` | ||
|
|
||
| ## - Step 3: Build/Run projects | ||
| Inside the apps folder there can be multiple projects. Check `package.json` file to setup custom commands for each projects. To run `HK` project | ||
|
|
||
| Develop HK Project: | ||
| `npm run dev:hk` | ||
|
|
@@ -34,3 +49,11 @@ Build Storybook: | |
| `npm run build-storybook` | ||
|
|
||
| **Note:** the build files will be in: `dist/storybook/storybook-host` | ||
|
|
||
| # Contributors | ||
|
|
||
| - Deriv Frontend Team | ||
|
|
||
| # References | ||
|
|
||
| - [Deriv.com GitHub Repository](https://github.com/binary-com/deriv-com) | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,39 @@ | ||
| import type { Meta, StoryObj } from '@storybook/react'; | ||
| import AwardsBlock from '.'; | ||
| import { Button, Text } from '@deriv/quill-design'; | ||
|
|
||
| const meta = { | ||
| title: 'Blocks/Awards', | ||
| component: AwardsBlock, | ||
| tags: ['autodocs'], | ||
| } satisfies Meta<typeof AwardsBlock>; | ||
|
|
||
| export default meta; | ||
| type Story = StoryObj<typeof meta>; | ||
|
|
||
| export const Default: Story = { | ||
| args: { | ||
| title: 'Title goes here', | ||
| description: | ||
| 'Description goes here description goes here description goes here description goes here', | ||
| awardsSet: ( | ||
| <div className="flex gap-gap-md lg:gap-gap-xl"> | ||
| <img | ||
| src="https://placehold.co/198x102" | ||
| alt="Placeholder" | ||
| className="h-[102px] w-[198px]" | ||
| /> | ||
| <img | ||
| src="https://placehold.co/198x102" | ||
| alt="Placeholder" | ||
| className="h-[102px] w-[198px]" | ||
| /> | ||
| <img | ||
| src="https://placehold.co/198x102" | ||
| alt="Placeholder" | ||
| className="h-[102px] w-[198px]" | ||
| /> | ||
| </div> | ||
| ), | ||
| }, | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,29 @@ | ||
| import React from 'react'; | ||
| import BlockWrapper from '../block-wrapper'; | ||
| import { FluidContainer } from '@deriv/quill-design'; | ||
| import clsx from 'clsx'; | ||
|
|
||
| export type AwardBlockProps = { | ||
| title?: string; | ||
| description?: string; | ||
| className?: string; | ||
| awardsSet: React.ReactNode; | ||
| }; | ||
| export const AwardsBlock = ({ | ||
| title, | ||
| description, | ||
| awardsSet, | ||
| className, | ||
| }: AwardBlockProps) => { | ||
| return ( | ||
| <BlockWrapper title={title} description={description} className={className}> | ||
| <FluidContainer className="flex justify-center"> | ||
| <div className={clsx((title || description) && 'pt-general-2xl')}> | ||
| {awardsSet} | ||
| </div> | ||
| </FluidContainer> | ||
| </BlockWrapper> | ||
| ); | ||
| }; | ||
|
|
||
| export default AwardsBlock; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,58 @@ | ||
| import type { Meta, StoryObj } from '@storybook/react'; | ||
| import CTABlock from '.'; | ||
| import { Text } from '@deriv/quill-design'; | ||
|
|
||
| const meta = { | ||
| title: 'Blocks/CTABlock', | ||
| component: CTABlock, | ||
| tags: ['autodocs'], | ||
| } satisfies Meta<typeof CTABlock>; | ||
|
|
||
| export default meta; | ||
| type Story = StoryObj<typeof meta>; | ||
|
|
||
| export const CTAContentLeft: Story = { | ||
| args: { | ||
| title: 'Join over 2.5 million online traders worldwide', | ||
| description: | ||
| 'Description goes here Description goes here Description goes here Description goes here Description goes here Description goes here', | ||
| children: <Text>This is the children</Text>, | ||
| content: ( | ||
| <> | ||
| <img | ||
| className="block h-full w-full object-cover lg:hidden" | ||
| src="https://placehold.co/256x496" | ||
| alt="Placeholder" | ||
| /> | ||
| <img | ||
| className="relative hidden h-full w-full rounded-xl lg:block" | ||
| src="https://placehold.co/608x480" | ||
| alt="Placeholder" | ||
| /> | ||
| </> | ||
| ), | ||
| }, | ||
| }; | ||
| export const CTAContentRight: Story = { | ||
| args: { | ||
| variant: 'content-right', | ||
| title: 'Join over 2.5 million online traders worldwide', | ||
| description: | ||
| 'Description goes here Description goes here Description goes here Description goes here Description goes here Description goes here', | ||
| children: <Text>This is the children</Text>, | ||
| content: ( | ||
| <> | ||
| <img | ||
| className="block h-full w-full object-cover lg:hidden" | ||
| src="https://placehold.co/420x230" | ||
| alt="Placeholder" | ||
| /> | ||
| <img | ||
| className="relative hidden h-full w-full rounded-xl lg:block" | ||
| src="https://placehold.co/608x480" | ||
| alt="Placeholder" | ||
| /> | ||
| </> | ||
| ), | ||
| }, | ||
| }; |
Oops, something went wrong.