@deriv-com/dds-marketing 1.1.2 → 1.1.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.llm/components/accordion.md +4 -0
- package/.llm/components/accordionitem.md +4 -0
- package/.llm/components/aspectratio.md +4 -0
- package/.llm/components/awards.md +4 -0
- package/.llm/components/background.md +4 -0
- package/.llm/components/badge.md +7 -3
- package/.llm/components/bottomsheet.md +7 -3
- package/.llm/components/breadcrumb.md +4 -0
- package/.llm/components/breadcrumbitem.md +4 -0
- package/.llm/components/button.md +4 -0
- package/.llm/components/buttonicon.md +10 -6
- package/.llm/components/card.md +5 -1
- package/.llm/components/cardbody.md +5 -1
- package/.llm/components/cardbutton.md +4 -0
- package/.llm/components/checkbox.md +1 -1
- package/.llm/components/comparisoncards.md +4 -0
- package/.llm/components/comparisontable.md +4 -0
- package/.llm/components/ctabanner.md +4 -0
- package/.llm/components/ctabannerslider.md +4 -0
- package/.llm/components/datatable.md +4 -0
- package/.llm/components/divider.md +4 -0
- package/.llm/components/downloadbanner.md +4 -0
- package/.llm/components/dropdownmenu.md +9 -5
- package/.llm/components/estimator.md +336 -0
- package/.llm/components/faqaccordion.md +4 -0
- package/.llm/components/featurebullets.md +4 -0
- package/.llm/components/featurecards.md +5 -1
- package/.llm/components/featurecardscarousel.md +4 -0
- package/.llm/components/featurescroll.md +4 -0
- package/.llm/components/featuresplit.md +4 -0
- package/.llm/components/featurestack.md +4 -0
- package/.llm/components/filterchip.md +5 -1
- package/.llm/components/footer.md +4 -0
- package/.llm/components/footergroup.md +4 -0
- package/.llm/components/grid.md +4 -0
- package/.llm/components/icon.md +9 -5
- package/.llm/components/illustrationcard.md +4 -0
- package/.llm/components/illustrationscene.md +4 -0
- package/.llm/components/imagebanner.md +5 -1
- package/.llm/components/landinghero.md +4 -0
- package/.llm/components/link.md +5 -1
- package/.llm/components/logocolumns.md +4 -0
- package/.llm/components/logorows.md +4 -0
- package/.llm/components/menuitem.md +6 -2
- package/.llm/components/navbar.md +5 -1
- package/.llm/components/navbaritem.md +4 -0
- package/.llm/components/navbarmenu.md +4 -0
- package/.llm/components/navbarmenugroup.md +4 -0
- package/.llm/components/navbarpanel.md +4 -0
- package/.llm/components/navbarswitcher.md +10 -6
- package/.llm/components/navbarswitcheroption.md +4 -0
- package/.llm/components/option.md +5 -1
- package/.llm/components/pageheader.md +4 -0
- package/.llm/components/pagination.md +4 -0
- package/.llm/components/paginationdots.md +4 -0
- package/.llm/components/producthero.md +4 -0
- package/.llm/components/removablechip.md +5 -1
- package/.llm/components/resourcebanner.md +4 -0
- package/.llm/components/row.md +4 -0
- package/.llm/components/scenescroll.md +4 -0
- package/.llm/components/scroller.md +4 -0
- package/.llm/components/searchinput.md +4 -0
- package/.llm/components/segmentedcontrol.md +5 -1
- package/.llm/components/segmentedcontrolitem.md +6 -2
- package/.llm/components/select.md +4 -0
- package/.llm/components/selectchip.md +4 -0
- package/.llm/components/spinner.md +4 -0
- package/.llm/components/stack.md +4 -0
- package/.llm/components/stats.md +4 -0
- package/.llm/components/statusdot.md +4 -0
- package/.llm/components/steps.md +4 -0
- package/.llm/components/stickycards.md +4 -0
- package/.llm/components/subdomainnavbar.md +5 -1
- package/.llm/components/tab.md +6 -2
- package/.llm/components/table.md +4 -0
- package/.llm/components/tablebody.md +4 -0
- package/.llm/components/tablecell.md +4 -0
- package/.llm/components/tablehead.md +4 -0
- package/.llm/components/tableheadercell.md +4 -0
- package/.llm/components/tablerow.md +4 -0
- package/.llm/components/tablist.md +4 -0
- package/.llm/components/teamgrid.md +4 -0
- package/.llm/components/testimonialrow.md +4 -0
- package/.llm/components/testimonialslider.md +4 -0
- package/.llm/components/textarea.md +4 -0
- package/.llm/components/textinput.md +5 -1
- package/.llm/components/textscroll.md +4 -0
- package/.llm/components/tiers.md +4 -0
- package/.llm/components/typography.md +4 -0
- package/.llm/digest/accordion.md +1 -1
- package/.llm/digest/accordionitem.md +1 -1
- package/.llm/digest/aspectratio.md +1 -1
- package/.llm/digest/awards.md +1 -1
- package/.llm/digest/background.md +1 -1
- package/.llm/digest/badge.md +1 -1
- package/.llm/digest/bottomsheet.md +1 -1
- package/.llm/digest/breadcrumb.md +1 -1
- package/.llm/digest/breadcrumbitem.md +1 -1
- package/.llm/digest/button.md +1 -1
- package/.llm/digest/buttonicon.md +1 -1
- package/.llm/digest/card.md +1 -1
- package/.llm/digest/cardbody.md +1 -1
- package/.llm/digest/cardbutton.md +1 -1
- package/.llm/digest/checkbox.md +1 -1
- package/.llm/digest/comparisoncards.md +1 -1
- package/.llm/digest/comparisontable.md +1 -1
- package/.llm/digest/ctabanner.md +1 -1
- package/.llm/digest/ctabannerslider.md +1 -1
- package/.llm/digest/datatable.md +1 -1
- package/.llm/digest/divider.md +1 -1
- package/.llm/digest/downloadbanner.md +1 -1
- package/.llm/digest/dropdownmenu.md +1 -1
- package/.llm/digest/estimator.md +66 -0
- package/.llm/digest/faqaccordion.md +1 -1
- package/.llm/digest/featurebullets.md +1 -1
- package/.llm/digest/featurecards.md +1 -1
- package/.llm/digest/featurecardscarousel.md +1 -1
- package/.llm/digest/featurescroll.md +1 -1
- package/.llm/digest/featuresplit.md +1 -1
- package/.llm/digest/featurestack.md +1 -1
- package/.llm/digest/filterchip.md +1 -1
- package/.llm/digest/footer.md +1 -1
- package/.llm/digest/footergroup.md +1 -1
- package/.llm/digest/grid.md +1 -1
- package/.llm/digest/icon.md +1 -1
- package/.llm/digest/illustrationcard.md +1 -1
- package/.llm/digest/illustrationscene.md +1 -1
- package/.llm/digest/imagebanner.md +2 -2
- package/.llm/digest/landinghero.md +1 -1
- package/.llm/digest/link.md +1 -1
- package/.llm/digest/logocolumns.md +1 -1
- package/.llm/digest/logorows.md +1 -1
- package/.llm/digest/menuitem.md +1 -1
- package/.llm/digest/navbar.md +1 -1
- package/.llm/digest/navbaritem.md +1 -1
- package/.llm/digest/navbarmenu.md +1 -1
- package/.llm/digest/navbarmenugroup.md +1 -1
- package/.llm/digest/navbarpanel.md +1 -1
- package/.llm/digest/navbarswitcher.md +1 -1
- package/.llm/digest/navbarswitcheroption.md +1 -1
- package/.llm/digest/option.md +1 -1
- package/.llm/digest/pageheader.md +1 -1
- package/.llm/digest/pagination.md +1 -1
- package/.llm/digest/paginationdots.md +1 -1
- package/.llm/digest/producthero.md +1 -1
- package/.llm/digest/removablechip.md +1 -1
- package/.llm/digest/resourcebanner.md +1 -1
- package/.llm/digest/row.md +1 -1
- package/.llm/digest/scenescroll.md +1 -1
- package/.llm/digest/scroller.md +1 -1
- package/.llm/digest/searchinput.md +1 -1
- package/.llm/digest/segmentedcontrol.md +1 -1
- package/.llm/digest/segmentedcontrolitem.md +2 -2
- package/.llm/digest/select.md +1 -1
- package/.llm/digest/selectchip.md +1 -1
- package/.llm/digest/spinner.md +1 -1
- package/.llm/digest/stack.md +1 -1
- package/.llm/digest/stats.md +1 -1
- package/.llm/digest/statusdot.md +1 -1
- package/.llm/digest/steps.md +1 -1
- package/.llm/digest/stickycards.md +1 -1
- package/.llm/digest/subdomainnavbar.md +1 -1
- package/.llm/digest/tab.md +1 -1
- package/.llm/digest/table.md +1 -1
- package/.llm/digest/tablebody.md +1 -1
- package/.llm/digest/tablecell.md +1 -1
- package/.llm/digest/tablehead.md +1 -1
- package/.llm/digest/tableheadercell.md +1 -1
- package/.llm/digest/tablerow.md +1 -1
- package/.llm/digest/tablist.md +1 -1
- package/.llm/digest/teamgrid.md +1 -1
- package/.llm/digest/testimonialrow.md +1 -1
- package/.llm/digest/testimonialslider.md +1 -1
- package/.llm/digest/textarea.md +1 -1
- package/.llm/digest/textinput.md +1 -1
- package/.llm/digest/textscroll.md +1 -1
- package/.llm/digest/tiers.md +1 -1
- package/.llm/digest/typography.md +1 -1
- package/.llm/index.md +2 -1
- package/.llm/tokens.md +1 -0
- package/AGENTS.md +1 -0
- package/README.md +28 -3
- package/dist/components/blocks/comparison-cards/comparison-cards-impl.css +0 -12
- package/dist/components/blocks/estimator/Estimator.css +206 -0
- package/dist/components/blocks/estimator/Estimator.d.ts +27 -0
- package/dist/components/blocks/estimator/Estimator.js +61 -0
- package/dist/components/blocks/estimator/Estimator.types.d.ts +63 -0
- package/dist/components/blocks/estimator/Estimator.types.js +25 -0
- package/dist/components/blocks/estimator/estimator-impl.css +159 -0
- package/dist/components/blocks/image-banner/ImageBanner.d.ts +1 -0
- package/dist/components/blocks/image-banner/ImageBanner.js +2 -1
- package/dist/components/blocks/image-banner/ImageBanner.types.d.ts +1 -1
- package/dist/components/blocks/image-banner/image-banner-impl.css +7 -51
- package/dist/components/core/segmented-control-item/SegmentedControlItem.types.d.ts +1 -1
- package/dist/components/core/select/Select.css +2 -0
- package/dist/components/core/select/select-impl.css +58 -0
- package/dist/components/core/text-area/TextArea.css +2 -0
- package/dist/components/core/text-area/text-area-impl.css +54 -0
- package/dist/components/core/text-input/TextInput.css +2 -0
- package/dist/components/core/text-input/text-input-impl.css +63 -0
- package/dist/components/estimator-data.d.ts +29 -0
- package/dist/components/estimator-data.js +12 -0
- package/dist/components/index.d.ts +3 -0
- package/dist/components/index.js +2 -0
- package/dist/icons/accounts.d.ts +1 -0
- package/dist/icons/accounts.js +1 -0
- package/dist/icons/app-stores.d.ts +1 -0
- package/dist/icons/app-stores.js +1 -0
- package/dist/icons/currency.d.ts +1 -0
- package/dist/icons/currency.js +1 -0
- package/dist/icons/flag.d.ts +1 -0
- package/dist/icons/flag.js +1 -0
- package/dist/icons/illustrative.d.ts +1 -0
- package/dist/icons/illustrative.js +1 -0
- package/dist/icons/index.d.ts +1 -0
- package/dist/icons/index.js +4 -0
- package/dist/icons/markets.d.ts +1 -0
- package/dist/icons/markets.js +1 -0
- package/dist/icons/social.d.ts +1 -0
- package/dist/icons/social.js +1 -0
- package/dist/icons/system.d.ts +1 -0
- package/dist/icons/system.js +1 -0
- package/dist/icons/trade.d.ts +1 -0
- package/dist/icons/trade.js +1 -0
- package/dist/marketing.css +2 -0
- package/package.json +44 -2
package/.llm/digest/link.md
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
# LogoColumns
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
Backs a claim with two columns of logos that scroll in opposite directions
|
|
6
6
|
|
|
7
7
|
`import { LogoColumns } from '@deriv-com/dds-marketing'`
|
|
8
8
|
|
package/.llm/digest/logorows.md
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
# LogoRows
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
Backs a claim with two rows of logos that slide in opposite directions
|
|
6
6
|
|
|
7
7
|
`import { LogoRows } from '@deriv-com/dds-marketing'`
|
|
8
8
|
|
package/.llm/digest/menuitem.md
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
# MenuItem
|
|
4
4
|
|
|
5
|
-
One
|
|
5
|
+
One item in a DropdownMenu
|
|
6
6
|
|
|
7
7
|
`import { MenuItem } from '@deriv-com/dds-marketing'`
|
|
8
8
|
|
package/.llm/digest/navbar.md
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
# Navbar
|
|
4
4
|
|
|
5
|
-
The bar across the top of a marketing page
|
|
5
|
+
The bar across the top of a marketing page: logo, links and actions
|
|
6
6
|
|
|
7
7
|
`import { Navbar } from '@deriv-com/dds-marketing'`
|
|
8
8
|
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
# NavbarItem
|
|
4
4
|
|
|
5
|
-
One
|
|
5
|
+
One link in the Navbar
|
|
6
6
|
|
|
7
7
|
`import { NavbarItem } from '@deriv-com/dds-marketing'`
|
|
8
8
|
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
# NavbarMenu
|
|
4
4
|
|
|
5
|
-
A
|
|
5
|
+
A Navbar item that opens a wide panel of links
|
|
6
6
|
|
|
7
7
|
`import { NavbarMenu } from '@deriv-com/dds-marketing'`
|
|
8
8
|
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
# NavbarMenuGroup
|
|
4
4
|
|
|
5
|
-
A
|
|
5
|
+
A titled list of links inside a NavbarMenu panel
|
|
6
6
|
|
|
7
7
|
`import { NavbarMenuGroup } from '@deriv-com/dds-marketing'`
|
|
8
8
|
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
# NavbarPanel
|
|
4
4
|
|
|
5
|
-
The
|
|
5
|
+
The full site navigation for screens too narrow for the Navbar
|
|
6
6
|
|
|
7
7
|
`import { NavbarPanel } from '@deriv-com/dds-marketing'`
|
|
8
8
|
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
# NavbarSwitcher
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
Sets a site preference from the Navbar, such as language or theme
|
|
6
6
|
|
|
7
7
|
`import { NavbarSwitcher } from '@deriv-com/dds-marketing'`
|
|
8
8
|
|
package/.llm/digest/option.md
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
# PageHeader
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
Opens a company or legal page with its title and one line of context
|
|
6
6
|
|
|
7
7
|
`import { PageHeader } from '@deriv-com/dds-marketing'`
|
|
8
8
|
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
# PaginationDots
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
Shows which item of a short sequence is in view
|
|
6
6
|
|
|
7
7
|
`import { PaginationDots } from '@deriv-com/dds-marketing'`
|
|
8
8
|
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
# ProductHero
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
Opens a product or market page with a centred headline over a dark background
|
|
6
6
|
|
|
7
7
|
`import { ProductHero } from '@deriv-com/dds-marketing'`
|
|
8
8
|
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
# RemovableChip
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
Shows one applied item, such as a filter or tag, that can be removed
|
|
6
6
|
|
|
7
7
|
`import { RemovableChip } from '@deriv-com/dds-marketing'`
|
|
8
8
|
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
# ResourceBanner
|
|
4
4
|
|
|
5
|
-
A dark panel
|
|
5
|
+
A dark panel that points readers to related guides and reference pages
|
|
6
6
|
|
|
7
7
|
`import { ResourceBanner } from '@deriv-com/dds-marketing'`
|
|
8
8
|
|
package/.llm/digest/row.md
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
# Row
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
Lays items out in a line with consistent spacing
|
|
6
6
|
|
|
7
7
|
`import { Row } from '@deriv-com/dds-marketing'`
|
|
8
8
|
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
# SceneScroll
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
Two full-screen photo scenes that cross-fade as the reader scrolls
|
|
6
6
|
|
|
7
7
|
`import { SceneScroll } from '@deriv-com/dds-marketing'`
|
|
8
8
|
|
package/.llm/digest/scroller.md
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
# SearchInput
|
|
4
4
|
|
|
5
|
-
A
|
|
5
|
+
A field for searching a help centre, blog or directory
|
|
6
6
|
|
|
7
7
|
`import { SearchInput } from '@deriv-com/dds-marketing'`
|
|
8
8
|
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
# SegmentedControl
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
Picks exactly one option from a short set of joined segments
|
|
6
6
|
|
|
7
7
|
`import { SegmentedControl } from '@deriv-com/dds-marketing'`
|
|
8
8
|
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
# SegmentedControlItem
|
|
4
4
|
|
|
5
|
-
One option in a
|
|
5
|
+
One option in a SegmentedControl
|
|
6
6
|
|
|
7
7
|
`import { SegmentedControlItem } from '@deriv-com/dds-marketing'`
|
|
8
8
|
|
|
@@ -38,7 +38,7 @@ One option in a segmented control, and nothing on its own — a segment says it
|
|
|
38
38
|
- never: The words the reader sees. That is label — a value is an identifier the page matches on, and one doubling as copy breaks the moment the copy is reworded
|
|
39
39
|
- **label** `string` · required — Always — it is the segment's accessible name as well as its words, and a radio with no name is announced as a control with nothing in it. …
|
|
40
40
|
- never: A sentence, or a value with its unit spelled out. 'Yearly' rather than 'Billed once a year' — the explanation belongs beside the control, where a reader who is not choosing still sees it
|
|
41
|
-
- **icon** `node` · optional — The glyph tells the modes apart faster than the words do — a card and a bank beside two payment methods. Import it from @deriv-com/
|
|
41
|
+
- **icon** `node` · optional — The glyph tells the modes apart faster than the words do — a card and a bank beside two payment methods. Import it from @deriv-com/dds-marketing/icons and pass the element
|
|
42
42
|
- never: Decoration. A row of segments is scanned, and a mark that says nothing the label does not is one more thing to look past on every one of them
|
|
43
43
|
- **onSelect** `callback` · optional — This segment reports its own presses — logging which plan a visitor looked at, say. It is called with this segment's value, and SegmentedControl chains its own handler after it rather than replacing it
|
|
44
44
|
- never: Holding which segment is current. That is the group's onChange, which fires once for the row; a page wiring up one handler per segment has written the group's job out by hand
|
package/.llm/digest/select.md
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
# SelectChip
|
|
4
4
|
|
|
5
|
-
A chip that opens a list
|
|
5
|
+
A chip that opens a list and shows the option chosen
|
|
6
6
|
|
|
7
7
|
`import { SelectChip } from '@deriv-com/dds-marketing'`
|
|
8
8
|
|
package/.llm/digest/spinner.md
CHANGED
package/.llm/digest/stack.md
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
# Stack
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
Lays items out in a column with consistent spacing
|
|
6
6
|
|
|
7
7
|
`import { Stack } from '@deriv-com/dds-marketing'`
|
|
8
8
|
|
package/.llm/digest/stats.md
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
# Stats
|
|
4
4
|
|
|
5
|
-
A
|
|
5
|
+
A heading over a few key figures, each with a short label
|
|
6
6
|
|
|
7
7
|
`import { Stats } from '@deriv-com/dds-marketing'`
|
|
8
8
|
|
package/.llm/digest/statusdot.md
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
# StatusDot
|
|
4
4
|
|
|
5
|
-
A small
|
|
5
|
+
A small dot marking an item as notable or in a different state
|
|
6
6
|
|
|
7
7
|
`import { StatusDot } from '@deriv-com/dds-marketing'`
|
|
8
8
|
|
package/.llm/digest/steps.md
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
# Steps
|
|
4
4
|
|
|
5
|
-
A
|
|
5
|
+
A numbered list of steps beside a supporting picture
|
|
6
6
|
|
|
7
7
|
`import { Steps } from '@deriv-com/dds-marketing'`
|
|
8
8
|
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
# StickyCards
|
|
4
4
|
|
|
5
|
-
A
|
|
5
|
+
A heading over cards that stack on top of each other as the page scrolls
|
|
6
6
|
|
|
7
7
|
`import { StickyCards } from '@deriv-com/dds-marketing'`
|
|
8
8
|
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
# SubdomainNavbar
|
|
4
4
|
|
|
5
|
-
The bar
|
|
5
|
+
The top bar for a subdomain such as docs or a product surface
|
|
6
6
|
|
|
7
7
|
`import { SubdomainNavbar } from '@deriv-com/dds-marketing'`
|
|
8
8
|
|
package/.llm/digest/tab.md
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
# Tab
|
|
4
4
|
|
|
5
|
-
One
|
|
5
|
+
One option in a TabList
|
|
6
6
|
|
|
7
7
|
`import { Tab } from '@deriv-com/dds-marketing'`
|
|
8
8
|
|
package/.llm/digest/table.md
CHANGED
package/.llm/digest/tablebody.md
CHANGED
package/.llm/digest/tablecell.md
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
# TableCell
|
|
4
4
|
|
|
5
|
-
One value in a row
|
|
5
|
+
One value in a table row
|
|
6
6
|
|
|
7
7
|
`import { TableCell } from '@deriv-com/dds-marketing'`
|
|
8
8
|
|
package/.llm/digest/tablehead.md
CHANGED
package/.llm/digest/tablerow.md
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
# TableRow
|
|
4
4
|
|
|
5
|
-
One row of a
|
|
5
|
+
One row of a Table
|
|
6
6
|
|
|
7
7
|
`import { TableRow } from '@deriv-com/dds-marketing'`
|
|
8
8
|
|
package/.llm/digest/tablist.md
CHANGED
package/.llm/digest/teamgrid.md
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
# TeamGrid
|
|
4
4
|
|
|
5
|
-
A
|
|
5
|
+
A grid of the people behind a company, with photo, name and role
|
|
6
6
|
|
|
7
7
|
`import { TeamGrid } from '@deriv-com/dds-marketing'`
|
|
8
8
|
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
# TestimonialRow
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
An overall rating over a scrollable row of customer reviews
|
|
6
6
|
|
|
7
7
|
`import { TestimonialRow } from '@deriv-com/dds-marketing'`
|
|
8
8
|
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
# TestimonialSlider
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
Customer quotes shown one at a time, each with who said it
|
|
6
6
|
|
|
7
7
|
`import { TestimonialSlider } from '@deriv-com/dds-marketing'`
|
|
8
8
|
|
package/.llm/digest/textarea.md
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
# TextArea
|
|
4
4
|
|
|
5
|
-
A field for
|
|
5
|
+
A field for a longer message, such as on a contact form
|
|
6
6
|
|
|
7
7
|
`import { TextArea } from '@deriv-com/dds-marketing'`
|
|
8
8
|
|
package/.llm/digest/textinput.md
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
# TextScroll
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
One large statement whose words brighten as the reader scrolls
|
|
6
6
|
|
|
7
7
|
`import { TextScroll } from '@deriv-com/dds-marketing'`
|
|
8
8
|
|
package/.llm/digest/tiers.md
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
# Tiers
|
|
4
4
|
|
|
5
|
-
A
|
|
5
|
+
A row of partnership tiers, each with what it offers and how to reach it
|
|
6
6
|
|
|
7
7
|
`import { Tiers } from '@deriv-com/dds-marketing'`
|
|
8
8
|
|
package/.llm/index.md
CHANGED
|
@@ -9,7 +9,7 @@ need — loading all of them dilutes the relevant one.
|
|
|
9
9
|
Paths here are from the package root, so they resolve whether this file is read in place
|
|
10
10
|
or its content handed over on its own.
|
|
11
11
|
|
|
12
|
-
Sections: Core (54) · Layout (5) · Blocks (
|
|
12
|
+
Sections: Core (54) · Layout (5) · Blocks (31)
|
|
13
13
|
|
|
14
14
|
|
|
15
15
|
## Core
|
|
@@ -105,6 +105,7 @@ The sections a page is built from, and the rhythm between them.
|
|
|
105
105
|
| CtaBannerSlider | Rotating between two or three genuinely different promotions without a hero's weight — open an account, try a tool, download the app | One promotion → `CtaBanner` · The band that opens the page → `LandingHero` · A message with more than a headline, a line and a button or two → `FeatureSplit` |
|
|
106
106
|
| DataTable | Trading instruments and their specifications — contract size, minimum size, volume limits — on a market page · Trading conditions a reader looks up rather than reads through: spreads, leverage, margin, swaps · An MT5 or Deriv X specification page, where the set runs to dozens of rows and a reader is hunting for the one they trade | Three or four plans or accounts compared feature by feature, where every row is read rather than searched → `ComparisonTable` · A handful of rows with no need to search or page — a fee schedule of four lines → `Table` |
|
|
107
107
|
| DownloadBanner | Promoting an app across the stores and platforms it ships on — App Store, Google Play, AppGallery, a desktop download, the web · A trading platform's page, near its end, once the product has been explained and the next thing a reader wants is to get it | One download, or the web alone → `Button` · A promotion that has to argue for the download in a headline and a sentence → `CtaBanner` |
|
|
108
|
+
| Estimator | A page lets a reader work something out before they act — a margin, a pip value, a swap charge, a conversion, an income estimate · The figures change as the reader types or picks, and should be announced as they do · The same tool appears on several pages in several forms — the margin, pip and swap calculators are one layout with different fields and figures | The figures are fixed facts rather than the result of anything the reader enters → `Stats` · Options are compared side by side rather than worked out from an input → `ComparisonCards` · The tool is a form that sends something — a sign-up, a contact request → `FeatureSplit` |
|
|
108
109
|
| FaqAccordion | The questions a reader asks before acting — fees, limits, how long a withdrawal takes — near the end of a landing page or on a help page · Objections a page has to answer without making every reader read every answer | The answers are short enough to read all at once → `FeatureBullets` · Each item is a feature, not a question → `FeatureCards` |
|
|
109
110
|
| FeatureBullets | A page has to list what a product or a plan includes, and the list is the argument · Several benefits are each one line long and are read by scanning rather than reading · A claim needs something beside it, and a picture is the only thing there is to put there | The items are two or three words and belong on one line → `Badge` · Each item needs a heading and a paragraph of its own → `Card` · The section opens the page → `ProductHero` |
|
|
110
111
|
| FeatureCards | Three or four things a product does, each a card with a heading, a line and a picture under them, read side by side and compared at a glance — the first choice for a set of three. The picture is CardBody's `src`, drawn below the words by default · A set of destinations — markets, platforms, tools — each a card a reader presses to go there · One feature that deserves the whole row in a card of its own — the words beside a large picture, carded on the section's ground | Each item is one line, and the list is the argument → `FeatureBullets` · One claim beside a picture, with no card around it → `FeatureSplit` · The items are read in order, one leading to the next → `FeatureScroll` |
|
package/.llm/tokens.md
CHANGED
|
@@ -378,6 +378,7 @@ one value at every width.
|
|
|
378
378
|
## motion
|
|
379
379
|
|
|
380
380
|
- `--motion-distance-drift` — How far decoration travels against the scroll while its section passes through the view, one way or the other. Far enough to be seen moving as the reader scrolls past, so it reads as depth.
|
|
381
|
+
- `--motion-distance-shake` — How far a field swings each way when it shakes to say a value was refused. Small on purpose: the field has to stay readable mid-swing, and a reader who has just been told no does not need to be shoved as well.
|
|
381
382
|
- `--motion-duration-dramatic` — Editorial hero entrances for visual impact, e.g. hero headline revealing, landing page title appearing. Not for scroll reveals — use motion.duration.reveal.
|
|
382
383
|
- `--motion-duration-drift` — One way of a slow drift that runs while something is on screen — an aurora wandering along a band's foot and back. Ten seconds, so the movement is felt rather than watched.
|
|
383
384
|
- `--motion-duration-dwell` — How long a rotating message holds before the next one moves in, e.g. a CTA banner's slides. Long enough to read a headline and a line under it; the reference site's 2000 moved before a reader reached the button.
|
package/AGENTS.md
CHANGED
|
@@ -150,6 +150,7 @@ screen is built in is not something to reach for while building a control.
|
|
|
150
150
|
- **CtaBannerSlider** — Rotating between two or three genuinely different promotions without a hero's weight
|
|
151
151
|
- **DataTable** — Trading instruments and their specifications
|
|
152
152
|
- **DownloadBanner** — Promoting an app across the stores and platforms it ships on
|
|
153
|
+
- **Estimator** — A page lets a reader work something out before they act
|
|
153
154
|
- **FaqAccordion** — The questions a reader asks before acting
|
|
154
155
|
- **FeatureBullets** — A page has to list what a product or a plan includes, and the list is the argument
|
|
155
156
|
- **FeatureCards** — Three or four things a product does, each a card with a heading, a line and a picture under them, read side by side and compared at a glance
|
package/README.md
CHANGED
|
@@ -19,13 +19,15 @@ on when to reach for it. Product apps want
|
|
|
19
19
|
npm install @deriv-com/dds-marketing
|
|
20
20
|
```
|
|
21
21
|
|
|
22
|
-
React 19
|
|
23
|
-
|
|
22
|
+
React 19 is a peer dependency, so install it alongside if your app does not already have
|
|
23
|
+
it:
|
|
24
24
|
|
|
25
25
|
```bash
|
|
26
|
-
npm install react react-dom
|
|
26
|
+
npm install react react-dom
|
|
27
27
|
```
|
|
28
28
|
|
|
29
|
+
The Quill icon set comes with the package — there is nothing else to install.
|
|
30
|
+
|
|
29
31
|
## Use
|
|
30
32
|
|
|
31
33
|
Import the stylesheet once, at the root of your app. It defines every token this package's
|
|
@@ -60,6 +62,29 @@ export function Home() {
|
|
|
60
62
|
|
|
61
63
|
Each component brings its own stylesheet with it, so nothing else needs importing.
|
|
62
64
|
|
|
65
|
+
## Icons
|
|
66
|
+
|
|
67
|
+
Every [Quill](https://github.com/deriv-com/product-design-quill-icons) icon is re-exported
|
|
68
|
+
from `@deriv-com/dds-marketing/icons`, under the name Quill gives it:
|
|
69
|
+
|
|
70
|
+
```tsx
|
|
71
|
+
import { Icon } from '@deriv-com/dds-marketing'
|
|
72
|
+
import { CircleCheckSolidIcon } from '@deriv-com/dds-marketing/icons'
|
|
73
|
+
import { UsdIcon } from '@deriv-com/dds-marketing/icons/currency'
|
|
74
|
+
|
|
75
|
+
<Icon label="Verified"><CircleCheckSolidIcon /></Icon>
|
|
76
|
+
```
|
|
77
|
+
|
|
78
|
+
Each Quill group has a subpath of its own — `accounts`, `app-stores`, `currency`, `flag`,
|
|
79
|
+
`illustrative`, `markets`, `social`, `system` and `trade`. Production builds tree-shake either
|
|
80
|
+
form to the icons you use; a dev server does not, so the group subpaths keep it from loading
|
|
81
|
+
all ~1,850 at once. Raw SVG files are not re-exported; for those, install
|
|
82
|
+
`@deriv-com/quill-icons-web` and use its `svg/` folder.
|
|
83
|
+
|
|
84
|
+
An app that already imports from `@deriv-com/quill-icons-web` keeps working. It is the same
|
|
85
|
+
module, so the two can be mixed while you migrate — but drop the direct dependency when you
|
|
86
|
+
are done, or pin it to the range this package uses, so the app does not bundle two copies.
|
|
87
|
+
|
|
63
88
|
## Fonts
|
|
64
89
|
|
|
65
90
|
The system is designed for [Inter](https://rsms.me/inter/) (all text) and
|
|
@@ -248,15 +248,3 @@
|
|
|
248
248
|
:where([data-dds-context="marketing"]) .dds-comparisoncards[data-variant='highlighted'] .dds-comparisoncards__item[data-recommended]:has(.dds-comparisoncards__highlight) .dds-comparisoncards__card-head {
|
|
249
249
|
padding-block-start: var(--space-inset-md);
|
|
250
250
|
}
|
|
251
|
-
|
|
252
|
-
/*
|
|
253
|
-
* A pair holds to two thirds of the row from full width, centred — FeatureCards' rule and its
|
|
254
|
-
* reason: two cards across the whole width put each label half a page from its value.
|
|
255
|
-
*/
|
|
256
|
-
@container (min-width: 64rem) {
|
|
257
|
-
:where([data-dds-context="marketing"]) .dds-comparisoncards .dds-comparisoncards__grid:has(> :nth-child(2):last-child) {
|
|
258
|
-
inline-size: 100%;
|
|
259
|
-
margin-inline: auto;
|
|
260
|
-
max-inline-size: calc((100% - 2 * var(--space-grid-gutter)) * 2 / 3 + var(--space-grid-gutter));
|
|
261
|
-
}
|
|
262
|
-
}
|