@ledgerhq/react-ui 0.34.0-nightly.1 → 0.34.0-nightly.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/lib/cjs/components/tabs/Chip/Chip.stories.js +1 -1
- package/lib/cjs/components/tabs/Chip/Chip.stories.js.map +2 -2
- package/lib/cjs/components/tabs/Chip/index.js +13 -4
- package/lib/cjs/components/tabs/Chip/index.js.map +2 -2
- package/lib/cjs/pre-ldls/components/Tag/Tag.js +3 -2
- package/lib/cjs/pre-ldls/components/Tag/Tag.js.map +2 -2
- package/lib/cjs/pre-ldls/components/Tag/Tag.stories.js +4 -1
- package/lib/cjs/pre-ldls/components/Tag/Tag.stories.js.map +2 -2
- package/lib/components/tabs/Chip/index.d.ts.map +1 -1
- package/lib/components/tabs/Chip/index.js +13 -4
- package/lib/components/tabs/Chip/index.js.map +1 -1
- package/lib/pre-ldls/components/Tag/Tag.d.ts +2 -1
- package/lib/pre-ldls/components/Tag/Tag.d.ts.map +1 -1
- package/lib/pre-ldls/components/Tag/Tag.js +3 -3
- package/lib/pre-ldls/components/Tag/Tag.js.map +1 -1
- package/package.json +1 -1
|
@@ -47,7 +47,7 @@ var Chip_stories_default = {
|
|
|
47
47
|
const navItems = ["One", "Two", "Three", "Four", "Five"];
|
|
48
48
|
function Sample({ children, ...args }) {
|
|
49
49
|
const [activeIndex, setActiveIndex] = (0, import_react.useState)(args.initialActiveIndex);
|
|
50
|
-
return /* @__PURE__ */ import_react.default.createElement("div", { style: { marginBottom: "10px" } }, /* @__PURE__ */ import_react.default.createElement("div", { style: { width: "100%" } }, /* @__PURE__ */ import_react.default.createElement(import_index.default, { ...args, onTabChange: setActiveIndex }, children)), /* @__PURE__ */ import_react.default.createElement(import_Text.default, { variant: "subtitle" }, "Active index: ", activeIndex)
|
|
50
|
+
return /* @__PURE__ */ import_react.default.createElement("div", { style: { marginBottom: "10px", padding: "5px" } }, /* @__PURE__ */ import_react.default.createElement("div", { style: { width: "100%" } }, /* @__PURE__ */ import_react.default.createElement(import_index.default, { ...args, onTabChange: setActiveIndex }, children)), /* @__PURE__ */ import_react.default.createElement(import_Text.default, { color: "neutral.c100", variant: "subtitle" }, "Active index: ", activeIndex));
|
|
51
51
|
}
|
|
52
52
|
const Chip = (args) => navItems.reduce((acc, _, index) => {
|
|
53
53
|
const labels = [
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/components/tabs/Chip/Chip.stories.tsx"],
|
|
4
|
-
"sourcesContent": ["import React, { useState } from \"react\";\n\nimport ChipTabs, { Props } from \"./index\";\nimport Text from \"../../asorted/Text\";\n\nexport default {\n title: \"Tabs/Chip\",\n component: ChipTabs,\n argTypes: {\n initialActiveIndex: {\n control: { type: \"number\" },\n },\n },\n};\n\nconst navItems = [\"One\", \"Two\", \"Three\", \"Four\", \"Five\"];\n\nfunction Sample({ children, ...args }: Props) {\n const [activeIndex, setActiveIndex] = useState(args.initialActiveIndex);\n return (\n <div style={{ marginBottom: \"10px\" }}>\n <div style={{ width: \"100%\" }}>\n <ChipTabs {...args} onTabChange={setActiveIndex}>\n {children}\n </ChipTabs>\n </div>\n <Text variant=\"subtitle\"
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAgC;AAEhC,mBAAgC;AAChC,kBAAiB;AAEjB,IAAO,uBAAQ;AAAA,EACb,OAAO;AAAA,EACP,WAAW,aAAAA;AAAA,EACX,UAAU;AAAA,IACR,oBAAoB;AAAA,MAClB,SAAS,EAAE,MAAM,SAAS;AAAA,IAC5B;AAAA,EACF;AACF;AAEA,MAAM,WAAW,CAAC,OAAO,OAAO,SAAS,QAAQ,MAAM;AAEvD,SAAS,OAAO,EAAE,UAAU,GAAG,KAAK,GAAU;AAC5C,QAAM,CAAC,aAAa,cAAc,QAAI,uBAAS,KAAK,kBAAkB;AACtE,SACE,6BAAAC,QAAA,cAAC,SAAI,OAAO,EAAE,cAAc,
|
|
4
|
+
"sourcesContent": ["import React, { useState } from \"react\";\n\nimport ChipTabs, { Props } from \"./index\";\nimport Text from \"../../asorted/Text\";\n\nexport default {\n title: \"Tabs/Chip\",\n component: ChipTabs,\n argTypes: {\n initialActiveIndex: {\n control: { type: \"number\" },\n },\n },\n};\n\nconst navItems = [\"One\", \"Two\", \"Three\", \"Four\", \"Five\"];\n\nfunction Sample({ children, ...args }: Props) {\n const [activeIndex, setActiveIndex] = useState(args.initialActiveIndex);\n return (\n <div style={{ marginBottom: \"10px\", padding: \"5px\" }}>\n <div style={{ width: \"100%\" }}>\n <ChipTabs {...args} onTabChange={setActiveIndex}>\n {children}\n </ChipTabs>\n </div>\n <Text color=\"neutral.c100\" variant=\"subtitle\">\n Active index: {activeIndex}\n </Text>\n </div>\n );\n}\n\nexport const Chip = (args: Props): React.ReactNode[] =>\n navItems.reduce<React.ReactNode[]>((acc, _, index) => {\n const labels = [\n navItems.slice(0, index + 1).map(label => (\n <Text color=\"inherit\" variant=\"small\">\n {label}\n </Text>\n )),\n ];\n return [\n ...acc,\n <Sample {...args} key={index}>\n {labels}\n </Sample>,\n ];\n }, []);\n\nChip.args = {\n initialActiveIndex: 1,\n};\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAgC;AAEhC,mBAAgC;AAChC,kBAAiB;AAEjB,IAAO,uBAAQ;AAAA,EACb,OAAO;AAAA,EACP,WAAW,aAAAA;AAAA,EACX,UAAU;AAAA,IACR,oBAAoB;AAAA,MAClB,SAAS,EAAE,MAAM,SAAS;AAAA,IAC5B;AAAA,EACF;AACF;AAEA,MAAM,WAAW,CAAC,OAAO,OAAO,SAAS,QAAQ,MAAM;AAEvD,SAAS,OAAO,EAAE,UAAU,GAAG,KAAK,GAAU;AAC5C,QAAM,CAAC,aAAa,cAAc,QAAI,uBAAS,KAAK,kBAAkB;AACtE,SACE,6BAAAC,QAAA,cAAC,SAAI,OAAO,EAAE,cAAc,QAAQ,SAAS,MAAM,KACjD,6BAAAA,QAAA,cAAC,SAAI,OAAO,EAAE,OAAO,OAAO,KAC1B,6BAAAA,QAAA,cAAC,aAAAD,SAAA,EAAU,GAAG,MAAM,aAAa,kBAC9B,QACH,CACF,GACA,6BAAAC,QAAA,cAAC,YAAAC,SAAA,EAAK,OAAM,gBAAe,SAAQ,cAAW,kBAC7B,WACjB,CACF;AAEJ;AAEO,MAAM,OAAO,CAAC,SACnB,SAAS,OAA0B,CAAC,KAAK,GAAG,UAAU;AACpD,QAAM,SAAS;AAAA,IACb,SAAS,MAAM,GAAG,QAAQ,CAAC,EAAE,IAAI,WAC/B,6BAAAD,QAAA,cAAC,YAAAC,SAAA,EAAK,OAAM,WAAU,SAAQ,WAC3B,KACH,CACD;AAAA,EACH;AACA,SAAO;AAAA,IACL,GAAG;AAAA,IACH,6BAAAD,QAAA,cAAC,UAAQ,GAAG,MAAM,KAAK,SACpB,MACH;AAAA,EACF;AACF,GAAG,CAAC,CAAC;AAEP,KAAK,OAAO;AAAA,EACV,oBAAoB;AACtB;",
|
|
6
6
|
"names": ["ChipTabs", "React", "Text"]
|
|
7
7
|
}
|
|
@@ -34,6 +34,15 @@ module.exports = __toCommonJS(Chip_exports);
|
|
|
34
34
|
var import_react = __toESM(require("react"));
|
|
35
35
|
var import_styled_components = __toESM(require("styled-components"));
|
|
36
36
|
var import_Flex = __toESM(require("../../layout/Flex"));
|
|
37
|
+
const Container = (0, import_styled_components.default)(import_Flex.default).attrs({
|
|
38
|
+
justifyContent: "space-between",
|
|
39
|
+
flex: 1,
|
|
40
|
+
columnGap: 1
|
|
41
|
+
})`
|
|
42
|
+
border: 1px solid ${(p) => p.theme.colors.opacityDefault.c10};
|
|
43
|
+
border-radius: 16px;
|
|
44
|
+
padding: 4px;
|
|
45
|
+
`;
|
|
37
46
|
const Item = (0, import_styled_components.default)(import_Flex.default).attrs({
|
|
38
47
|
flex: 1,
|
|
39
48
|
justifyContent: "center",
|
|
@@ -41,13 +50,13 @@ const Item = (0, import_styled_components.default)(import_Flex.default).attrs({
|
|
|
41
50
|
})`
|
|
42
51
|
cursor: pointer;
|
|
43
52
|
padding: 8px 12px 8px 12px;
|
|
44
|
-
border-radius:
|
|
45
|
-
color: ${(p) => p.theme.colors.neutral.c100};
|
|
46
|
-
background-color: ${(p) => p.active ? p.theme.colors.
|
|
53
|
+
border-radius: 12px;
|
|
54
|
+
color: ${(p) => p.active ? p.theme.colors.neutral.c100 : p.theme.colors.neutral.c50};
|
|
55
|
+
background-color: ${(p) => p.active ? p.theme.colors.opacityDefault.c10 : "unset"};
|
|
47
56
|
`;
|
|
48
57
|
function BarTabs({ children, onTabChange, initialActiveIndex }) {
|
|
49
58
|
const [activeIndex, setActiveIndex] = (0, import_react.useState)(initialActiveIndex);
|
|
50
|
-
return /* @__PURE__ */ import_react.default.createElement(
|
|
59
|
+
return /* @__PURE__ */ import_react.default.createElement(Container, null, import_react.default.Children.toArray(children).map((child, index) => /* @__PURE__ */ import_react.default.createElement(
|
|
51
60
|
Item,
|
|
52
61
|
{
|
|
53
62
|
key: index,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/components/tabs/Chip/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import React, { useState } from \"react\";\nimport styled from \"styled-components\";\nimport Flex from \"../../layout/Flex\";\n\nexport type Props = React.PropsWithChildren<{\n /**\n * An optional callback that will be called when the active tab changes.\n */\n onTabChange?: (activeIndex: number) => void;\n /**\n * The tab index to mark as active when rendering for the first time.\n * If omitted, then initially no tabs will be selected.\n */\n initialActiveIndex?: number;\n}>;\ntype ItemProps = {\n active: boolean;\n};\n\nconst Item = styled(Flex).attrs({\n flex: 1,\n justifyContent: \"center\",\n alignItems: \"center\",\n})<ItemProps>`\n cursor: pointer;\n padding: 8px 12px 8px 12px;\n border-radius:
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAgC;AAChC,+BAAmB;AACnB,kBAAiB;AAiBjB,MAAM,
|
|
4
|
+
"sourcesContent": ["import React, { useState } from \"react\";\nimport styled from \"styled-components\";\nimport Flex from \"../../layout/Flex\";\n\nexport type Props = React.PropsWithChildren<{\n /**\n * An optional callback that will be called when the active tab changes.\n */\n onTabChange?: (activeIndex: number) => void;\n /**\n * The tab index to mark as active when rendering for the first time.\n * If omitted, then initially no tabs will be selected.\n */\n initialActiveIndex?: number;\n}>;\ntype ItemProps = {\n active: boolean;\n};\n\nconst Container = styled(Flex).attrs({\n justifyContent: \"space-between\",\n flex: 1,\n columnGap: 1,\n})`\n border: 1px solid ${p => p.theme.colors.opacityDefault.c10};\n border-radius: 16px;\n padding: 4px;\n`;\n\nconst Item = styled(Flex).attrs({\n flex: 1,\n justifyContent: \"center\",\n alignItems: \"center\",\n})<ItemProps>`\n cursor: pointer;\n padding: 8px 12px 8px 12px;\n border-radius: 12px;\n color: ${p => (p.active ? p.theme.colors.neutral.c100 : p.theme.colors.neutral.c50)};\n background-color: ${p => (p.active ? p.theme.colors.opacityDefault.c10 : \"unset\")};\n`;\n\nexport default function BarTabs({ children, onTabChange, initialActiveIndex }: Props): JSX.Element {\n const [activeIndex, setActiveIndex] = useState(initialActiveIndex);\n return (\n <Container>\n {React.Children.toArray(children).map((child, index) => (\n <Item\n key={index}\n active={index === activeIndex}\n onClick={() => {\n setActiveIndex(index);\n onTabChange && onTabChange(index);\n }}\n >\n {child}\n </Item>\n ))}\n </Container>\n );\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAgC;AAChC,+BAAmB;AACnB,kBAAiB;AAiBjB,MAAM,gBAAY,yBAAAA,SAAO,YAAAC,OAAI,EAAE,MAAM;AAAA,EACnC,gBAAgB;AAAA,EAChB,MAAM;AAAA,EACN,WAAW;AACb,CAAC;AAAA,sBACqB,OAAK,EAAE,MAAM,OAAO,eAAe,GAAG;AAAA;AAAA;AAAA;AAK5D,MAAM,WAAO,yBAAAD,SAAO,YAAAC,OAAI,EAAE,MAAM;AAAA,EAC9B,MAAM;AAAA,EACN,gBAAgB;AAAA,EAChB,YAAY;AACd,CAAC;AAAA;AAAA;AAAA;AAAA,WAIU,OAAM,EAAE,SAAS,EAAE,MAAM,OAAO,QAAQ,OAAO,EAAE,MAAM,OAAO,QAAQ,GAAI;AAAA,sBAC/D,OAAM,EAAE,SAAS,EAAE,MAAM,OAAO,eAAe,MAAM,OAAQ;AAAA;AAGpE,SAAR,QAAyB,EAAE,UAAU,aAAa,mBAAmB,GAAuB;AACjG,QAAM,CAAC,aAAa,cAAc,QAAI,uBAAS,kBAAkB;AACjE,SACE,6BAAAC,QAAA,cAAC,iBACE,aAAAA,QAAM,SAAS,QAAQ,QAAQ,EAAE,IAAI,CAAC,OAAO,UAC5C,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,QAAQ,UAAU;AAAA,MAClB,SAAS,MAAM;AACb,uBAAe,KAAK;AACpB,uBAAe,YAAY,KAAK;AAAA,MAClC;AAAA;AAAA,IAEC;AAAA,EACH,CACD,CACH;AAEJ;",
|
|
6
6
|
"names": ["styled", "Flex", "React"]
|
|
7
7
|
}
|
|
@@ -43,7 +43,7 @@ const Wrapper = import_styled_components.default.div`
|
|
|
43
43
|
"spacing-xxxs"
|
|
44
44
|
)}
|
|
45
45
|
|
|
46
|
-
padding: 1px var(--spacing-xxxs);
|
|
46
|
+
padding: ${({ $spacing }) => $spacing === "sm" ? "1px" : "2px"} var(--spacing-xxxs);
|
|
47
47
|
border-radius: var(--radius-xs);
|
|
48
48
|
display: inline-flex;
|
|
49
49
|
background-color: var(--colors-surface-transparent-subdued-default);
|
|
@@ -51,9 +51,10 @@ const Wrapper = import_styled_components.default.div`
|
|
|
51
51
|
`;
|
|
52
52
|
const Tag = ({
|
|
53
53
|
textTransform = "none",
|
|
54
|
+
spacing = "sm",
|
|
54
55
|
children
|
|
55
56
|
}) => {
|
|
56
|
-
return /* @__PURE__ */ import_react.default.createElement(Wrapper, { "data-testid": "tag" }, /* @__PURE__ */ import_react.default.createElement(
|
|
57
|
+
return /* @__PURE__ */ import_react.default.createElement(Wrapper, { "data-testid": "tag", $spacing: spacing }, /* @__PURE__ */ import_react.default.createElement(
|
|
57
58
|
import_components.Text,
|
|
58
59
|
{
|
|
59
60
|
color: "var(--colors-content-subdued-default-default)",
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/pre-ldls/components/Tag/Tag.tsx"],
|
|
4
|
-
"sourcesContent": ["import React, { ReactNode } from \"react\";\nimport { Text } from \"../../../components\";\nimport { withTokens } from \"../../libs\";\nimport styled from \"styled-components\";\n\nconst Wrapper = styled.div
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAiC;AACjC,wBAAqB;AACrB,kBAA2B;AAC3B,+BAAmB;AAEnB,MAAM,UAAU,yBAAAA,QAAO;AAAA,QACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;
|
|
4
|
+
"sourcesContent": ["import React, { ReactNode } from \"react\";\nimport { Text } from \"../../../components\";\nimport { withTokens } from \"../../libs\";\nimport styled from \"styled-components\";\n\nconst Wrapper = styled.div<{ $spacing: \"sm\" | \"md\" }>`\n ${withTokens(\n \"colors-surface-transparent-subdued-default\",\n \"colors-content-subdued-default-default\",\n \"radius-xs\",\n \"spacing-xxxs\",\n )}\n\n padding: ${({ $spacing }) => ($spacing === \"sm\" ? \"1px\" : \"2px\")} var(--spacing-xxxs);\n border-radius: var(--radius-xs);\n display: inline-flex;\n background-color: var(--colors-surface-transparent-subdued-default);\n flex-shrink: 0;\n`;\n\nexport const Tag = ({\n textTransform = \"none\",\n spacing = \"sm\",\n children,\n}: {\n textTransform?: string;\n spacing?: \"sm\" | \"md\";\n children: ReactNode;\n}) => {\n return (\n <Wrapper data-testid=\"tag\" $spacing={spacing}>\n <Text\n color=\"var(--colors-content-subdued-default-default)\"\n fontSize=\"10px\"\n lineHeight=\"16px\"\n textTransform={textTransform}\n >\n {children}\n </Text>\n </Wrapper>\n );\n};\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAiC;AACjC,wBAAqB;AACrB,kBAA2B;AAC3B,+BAAmB;AAEnB,MAAM,UAAU,yBAAAA,QAAO;AAAA,QACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,CAAC;AAAA;AAAA,aAEU,CAAC,EAAE,SAAS,MAAO,aAAa,OAAO,QAAQ,KAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAO3D,MAAM,MAAM,CAAC;AAAA,EAClB,gBAAgB;AAAA,EAChB,UAAU;AAAA,EACV;AACF,MAIM;AACJ,SACE,6BAAAC,QAAA,cAAC,WAAQ,eAAY,OAAM,UAAU,WACnC,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,OAAM;AAAA,MACN,UAAS;AAAA,MACT,YAAW;AAAA,MACX;AAAA;AAAA,IAEC;AAAA,EACH,CACF;AAEJ;",
|
|
6
6
|
"names": ["styled", "React"]
|
|
7
7
|
}
|
|
@@ -20,6 +20,7 @@ var Tag_stories_exports = {};
|
|
|
20
20
|
__export(Tag_stories_exports, {
|
|
21
21
|
Default: () => Default,
|
|
22
22
|
TestTag: () => TestTag,
|
|
23
|
+
VariantMd: () => VariantMd,
|
|
23
24
|
default: () => Tag_stories_default
|
|
24
25
|
});
|
|
25
26
|
module.exports = __toCommonJS(Tag_stories_exports);
|
|
@@ -29,10 +30,12 @@ const meta = {
|
|
|
29
30
|
component: import_Tag.Tag,
|
|
30
31
|
title: "PreLdls/Components/Tag",
|
|
31
32
|
tags: ["autodocs"],
|
|
32
|
-
args: { children: "Native Segwit" }
|
|
33
|
+
args: { children: "Native Segwit", spacing: "sm" },
|
|
34
|
+
argTypes: { spacing: { control: "select", options: ["sm", "md"] } }
|
|
33
35
|
};
|
|
34
36
|
var Tag_stories_default = meta;
|
|
35
37
|
const Default = {};
|
|
38
|
+
const VariantMd = { args: { spacing: "md" } };
|
|
36
39
|
const TestTag = {
|
|
37
40
|
play: async ({ canvasElement }) => {
|
|
38
41
|
const canvas = (0, import_test.within)(canvasElement);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/pre-ldls/components/Tag/Tag.stories.tsx"],
|
|
4
|
-
"sourcesContent": ["import type { Meta, StoryObj } from \"@storybook/react\";\nimport { Tag } from \"./Tag\";\nimport { within, expect } from \"@storybook/test\";\n\nconst meta: Meta<typeof Tag> = {\n component: Tag,\n title: \"PreLdls/Components/Tag\",\n tags: [\"autodocs\"],\n args: { children: \"Native Segwit\" },\n};\nexport default meta;\n\ntype Story = StoryObj<typeof Tag>;\n\nexport const Default: Story = {};\n\nexport const TestTag: Story = {\n play: async ({ canvasElement }) => {\n const canvas = within(canvasElement);\n const input = canvas.getByTestId(\"tag\");\n await expect(input).toHaveTextContent(\"Native Segwit\");\n },\n};\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,iBAAoB;AACpB,kBAA+B;AAE/B,MAAM,OAAyB;AAAA,EAC7B,WAAW;AAAA,EACX,OAAO;AAAA,EACP,MAAM,CAAC,UAAU;AAAA,EACjB,MAAM,EAAE,UAAU,
|
|
4
|
+
"sourcesContent": ["import type { Meta, StoryObj } from \"@storybook/react\";\nimport { Tag } from \"./Tag\";\nimport { within, expect } from \"@storybook/test\";\n\nconst meta: Meta<typeof Tag> = {\n component: Tag,\n title: \"PreLdls/Components/Tag\",\n tags: [\"autodocs\"],\n args: { children: \"Native Segwit\", spacing: \"sm\" },\n argTypes: { spacing: { control: \"select\", options: [\"sm\", \"md\"] } },\n};\nexport default meta;\n\ntype Story = StoryObj<typeof Tag>;\n\nexport const Default: Story = {};\n\nexport const VariantMd: Story = { args: { spacing: \"md\" } };\n\nexport const TestTag: Story = {\n play: async ({ canvasElement }) => {\n const canvas = within(canvasElement);\n const input = canvas.getByTestId(\"tag\");\n await expect(input).toHaveTextContent(\"Native Segwit\");\n },\n};\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,iBAAoB;AACpB,kBAA+B;AAE/B,MAAM,OAAyB;AAAA,EAC7B,WAAW;AAAA,EACX,OAAO;AAAA,EACP,MAAM,CAAC,UAAU;AAAA,EACjB,MAAM,EAAE,UAAU,iBAAiB,SAAS,KAAK;AAAA,EACjD,UAAU,EAAE,SAAS,EAAE,SAAS,UAAU,SAAS,CAAC,MAAM,IAAI,EAAE,EAAE;AACpE;AACA,IAAO,sBAAQ;AAIR,MAAM,UAAiB,CAAC;AAExB,MAAM,YAAmB,EAAE,MAAM,EAAE,SAAS,KAAK,EAAE;AAEnD,MAAM,UAAiB;AAAA,EAC5B,MAAM,OAAO,EAAE,cAAc,MAAM;AACjC,UAAM,aAAS,oBAAO,aAAa;AACnC,UAAM,QAAQ,OAAO,YAAY,KAAK;AACtC,cAAM,oBAAO,KAAK,EAAE,kBAAkB,eAAe;AAAA,EACvD;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/tabs/Chip/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAIxC,MAAM,MAAM,KAAK,GAAG,KAAK,CAAC,iBAAiB,CAAC;IAC1C;;OAEG;IACH,WAAW,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C;;;OAGG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/tabs/Chip/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAIxC,MAAM,MAAM,KAAK,GAAG,KAAK,CAAC,iBAAiB,CAAC;IAC1C;;OAEG;IACH,WAAW,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C;;;OAGG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B,CAAC,CAAC;AA2BH,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,EAAE,QAAQ,EAAE,WAAW,EAAE,kBAAkB,EAAE,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAkBjG"}
|
|
@@ -1,6 +1,15 @@
|
|
|
1
1
|
import React, { useState } from "react";
|
|
2
2
|
import styled from "styled-components";
|
|
3
3
|
import Flex from "../../layout/Flex";
|
|
4
|
+
const Container = styled(Flex).attrs({
|
|
5
|
+
justifyContent: "space-between",
|
|
6
|
+
flex: 1,
|
|
7
|
+
columnGap: 1,
|
|
8
|
+
}) `
|
|
9
|
+
border: 1px solid ${p => p.theme.colors.opacityDefault.c10};
|
|
10
|
+
border-radius: 16px;
|
|
11
|
+
padding: 4px;
|
|
12
|
+
`;
|
|
4
13
|
const Item = styled(Flex).attrs({
|
|
5
14
|
flex: 1,
|
|
6
15
|
justifyContent: "center",
|
|
@@ -8,13 +17,13 @@ const Item = styled(Flex).attrs({
|
|
|
8
17
|
}) `
|
|
9
18
|
cursor: pointer;
|
|
10
19
|
padding: 8px 12px 8px 12px;
|
|
11
|
-
border-radius:
|
|
12
|
-
color: ${p => p.theme.colors.neutral.c100};
|
|
13
|
-
background-color: ${p => (p.active ? p.theme.colors.
|
|
20
|
+
border-radius: 12px;
|
|
21
|
+
color: ${p => (p.active ? p.theme.colors.neutral.c100 : p.theme.colors.neutral.c50)};
|
|
22
|
+
background-color: ${p => (p.active ? p.theme.colors.opacityDefault.c10 : "unset")};
|
|
14
23
|
`;
|
|
15
24
|
export default function BarTabs({ children, onTabChange, initialActiveIndex }) {
|
|
16
25
|
const [activeIndex, setActiveIndex] = useState(initialActiveIndex);
|
|
17
|
-
return (React.createElement(
|
|
26
|
+
return (React.createElement(Container, null, React.Children.toArray(children).map((child, index) => (React.createElement(Item, { key: index, active: index === activeIndex, onClick: () => {
|
|
18
27
|
setActiveIndex(index);
|
|
19
28
|
onTabChange && onTabChange(index);
|
|
20
29
|
} }, child)))));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/tabs/Chip/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxC,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,IAAI,MAAM,mBAAmB,CAAC;AAiBrC,MAAM,IAAI,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC;IAC9B,IAAI,EAAE,CAAC;IACP,cAAc,EAAE,QAAQ;IACxB,UAAU,EAAE,QAAQ;CACrB,CAAC,CAAW
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/tabs/Chip/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxC,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,IAAI,MAAM,mBAAmB,CAAC;AAiBrC,MAAM,SAAS,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC;IACnC,cAAc,EAAE,eAAe;IAC/B,IAAI,EAAE,CAAC;IACP,SAAS,EAAE,CAAC;CACb,CAAC,CAAA;sBACoB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,cAAc,CAAC,GAAG;;;CAG3D,CAAC;AAEF,MAAM,IAAI,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC;IAC9B,IAAI,EAAE,CAAC;IACP,cAAc,EAAE,QAAQ;IACxB,UAAU,EAAE,QAAQ;CACrB,CAAC,CAAW;;;;WAIF,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC;sBAC/D,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,CAAC,OAAO,CAAC;CAClF,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,EAAE,QAAQ,EAAE,WAAW,EAAE,kBAAkB,EAAS;IAClF,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,kBAAkB,CAAC,CAAC;IACnE,OAAO,CACL,oBAAC,SAAS,QACP,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,CACtD,oBAAC,IAAI,IACH,GAAG,EAAE,KAAK,EACV,MAAM,EAAE,KAAK,KAAK,WAAW,EAC7B,OAAO,EAAE,GAAG,EAAE;YACZ,cAAc,CAAC,KAAK,CAAC,CAAC;YACtB,WAAW,IAAI,WAAW,CAAC,KAAK,CAAC,CAAC;QACpC,CAAC,IAEA,KAAK,CACD,CACR,CAAC,CACQ,CACb,CAAC;AACJ,CAAC"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import React, { ReactNode } from "react";
|
|
2
|
-
export declare const Tag: ({ textTransform, children, }: {
|
|
2
|
+
export declare const Tag: ({ textTransform, spacing, children, }: {
|
|
3
3
|
textTransform?: string | undefined;
|
|
4
|
+
spacing?: "sm" | "md" | undefined;
|
|
4
5
|
children: ReactNode;
|
|
5
6
|
}) => React.JSX.Element;
|
|
6
7
|
//# sourceMappingURL=Tag.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tag.d.ts","sourceRoot":"","sources":["../../../../src/pre-ldls/components/Tag/Tag.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAoBzC,eAAO,MAAM,GAAG
|
|
1
|
+
{"version":3,"file":"Tag.d.ts","sourceRoot":"","sources":["../../../../src/pre-ldls/components/Tag/Tag.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAoBzC,eAAO,MAAM,GAAG;;;cAOJ,SAAS;uBAcpB,CAAC"}
|
|
@@ -5,14 +5,14 @@ import styled from "styled-components";
|
|
|
5
5
|
const Wrapper = styled.div `
|
|
6
6
|
${withTokens("colors-surface-transparent-subdued-default", "colors-content-subdued-default-default", "radius-xs", "spacing-xxxs")}
|
|
7
7
|
|
|
8
|
-
padding: 1px var(--spacing-xxxs);
|
|
8
|
+
padding: ${({ $spacing }) => ($spacing === "sm" ? "1px" : "2px")} var(--spacing-xxxs);
|
|
9
9
|
border-radius: var(--radius-xs);
|
|
10
10
|
display: inline-flex;
|
|
11
11
|
background-color: var(--colors-surface-transparent-subdued-default);
|
|
12
12
|
flex-shrink: 0;
|
|
13
13
|
`;
|
|
14
|
-
export const Tag = ({ textTransform = "none", children, }) => {
|
|
15
|
-
return (React.createElement(Wrapper, { "data-testid": "tag" },
|
|
14
|
+
export const Tag = ({ textTransform = "none", spacing = "sm", children, }) => {
|
|
15
|
+
return (React.createElement(Wrapper, { "data-testid": "tag", "$spacing": spacing },
|
|
16
16
|
React.createElement(Text, { color: "var(--colors-content-subdued-default-default)", fontSize: "10px", lineHeight: "16px", textTransform: textTransform }, children)));
|
|
17
17
|
};
|
|
18
18
|
//# sourceMappingURL=Tag.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tag.js","sourceRoot":"","sources":["../../../../src/pre-ldls/components/Tag/Tag.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAC;AAC3C,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AACxC,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,
|
|
1
|
+
{"version":3,"file":"Tag.js","sourceRoot":"","sources":["../../../../src/pre-ldls/components/Tag/Tag.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAC;AAC3C,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AACxC,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAA2B;IACjD,UAAU,CACV,4CAA4C,EAC5C,wCAAwC,EACxC,WAAW,EACX,cAAc,CACf;;aAEU,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC,QAAQ,KAAK,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC;;;;;CAKjE,CAAC;AAEF,MAAM,CAAC,MAAM,GAAG,GAAG,CAAC,EAClB,aAAa,GAAG,MAAM,EACtB,OAAO,GAAG,IAAI,EACd,QAAQ,GAKT,EAAE,EAAE;IACH,OAAO,CACL,oBAAC,OAAO,mBAAa,KAAK,cAAW,OAAO;QAC1C,oBAAC,IAAI,IACH,KAAK,EAAC,+CAA+C,EACrD,QAAQ,EAAC,MAAM,EACf,UAAU,EAAC,MAAM,EACjB,aAAa,EAAE,aAAa,IAE3B,QAAQ,CACJ,CACC,CACX,CAAC;AACJ,CAAC,CAAC"}
|