@ledgerhq/react-ui 0.14.17 → 0.14.18-nightly.0

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.
@@ -40,7 +40,7 @@ var import_react = __toESM(require("react"));
40
40
  var import_index = __toESM(require("./index"));
41
41
  var import_Text = __toESM(require("../asorted/Text"));
42
42
  var import_Flex = __toESM(require("../layout/Flex"));
43
- const sizes = ["large", "medium", "small"];
43
+ const sizes = ["large", "medium", "small", "tiny"];
44
44
  const types = ["plain", "opacity", "outlined", "outlinedOpacity"];
45
45
  const states = [{}, { disabled: true }];
46
46
  var Tag_stories_default = {
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/components/Tag/Tag.stories.tsx"],
4
- "sourcesContent": ["import React from \"react\";\n\nimport { StoryTemplate } from \"../helpers\";\nimport Tag, { Type, Size, TagProps } from \"./index\";\nimport Text from \"../asorted/Text\";\nimport Flex from \"../layout/Flex\";\n\nconst sizes: Size[] = [\"large\", \"medium\", \"small\"];\nconst types: Type[] = [\"plain\", \"opacity\", \"outlined\", \"outlinedOpacity\"];\nconst states = [{}, { disabled: true }];\n\nexport default {\n title: \"Toasts/Tag\",\n component: Tag,\n argTypes: {\n active: {\n control: {\n type: \"boolean\",\n },\n },\n type: {\n options: types,\n },\n size: {\n options: sizes,\n },\n children: {\n type: \"string\",\n },\n },\n};\n\nexport const Overview = ((): JSX.Element => (\n <Flex flexDirection=\"column\">\n {sizes.map(size => (\n <Flex flexDirection=\"column\" marginBottom={5}>\n <Text variant=\"h5\" marginBottom={5}>\n size=\"{size}\"\n </Text>\n {types.map(type => (\n <Flex flexDirection=\"row\" alignItems=\"center\" mb={5}>\n <div style={{ width: \"150px\" }}>\n <Text variant=\"small\" color=\"neutral.c70\">\n type=\"{type}\"\n </Text>\n </div>\n <Flex flexDirection=\"row\" mt=\"5px\" columnGap=\"16px\">\n {states.map(state =>\n [true, false].map((active: boolean) => (\n <Tag size={size} type={type} active={active} {...state}>\n {active ? \"Active\" : \"Inactive\"}\n </Tag>\n )),\n )}\n </Flex>\n </Flex>\n ))}\n </Flex>\n ))}\n </Flex>\n)).bind({});\n\nconst Template: StoryTemplate<TagProps> = (args: TagProps): JSX.Element => (\n <Tag {...args}>{args.children}</Tag>\n);\n\nconst defaultArgs = {\n active: true,\n children: \"Label\",\n type: \"large\",\n};\n\nexport const Plain = Template.bind({});\nPlain.args = {\n ...defaultArgs,\n type: \"plain\",\n};\nexport const Opacity = Template.bind({});\nOpacity.args = {\n ...defaultArgs,\n type: \"opacity\",\n};\nexport const Outlined = Template.bind({});\nOutlined.args = {\n ...defaultArgs,\n type: \"outlined\",\n};\nexport const OutlinedOpacity = Template.bind({});\nOutlinedOpacity.args = {\n ...defaultArgs,\n type: \"outlinedOpacity\",\n};\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAGlB,mBAA0C;AAC1C,kBAAiB;AACjB,kBAAiB;AAEjB,MAAM,QAAgB,CAAC,SAAS,UAAU,OAAO;AACjD,MAAM,QAAgB,CAAC,SAAS,WAAW,YAAY,iBAAiB;AACxE,MAAM,SAAS,CAAC,CAAC,GAAG,EAAE,UAAU,KAAK,CAAC;AAEtC,IAAO,sBAAQ;AAAA,EACb,OAAO;AAAA,EACP,WAAW,aAAAA;AAAA,EACX,UAAU;AAAA,IACR,QAAQ;AAAA,MACN,SAAS;AAAA,QACP,MAAM;AAAA,MACR;AAAA,IACF;AAAA,IACA,MAAM;AAAA,MACJ,SAAS;AAAA,IACX;AAAA,IACA,MAAM;AAAA,MACJ,SAAS;AAAA,IACX;AAAA,IACA,UAAU;AAAA,MACR,MAAM;AAAA,IACR;AAAA,EACF;AACF;AAEO,MAAM,YAAY,MACvB,6BAAAC,QAAA,cAAC,YAAAC,SAAA,EAAK,eAAc,YACjB,MAAM,IAAI,UACT,6BAAAD,QAAA,cAAC,YAAAC,SAAA,EAAK,eAAc,UAAS,cAAc,KACzC,6BAAAD,QAAA,cAAC,YAAAE,SAAA,EAAK,SAAQ,MAAK,cAAc,KAAG,UAC3B,MAAK,GACd,GACC,MAAM,IAAI,UACT,6BAAAF,QAAA,cAAC,YAAAC,SAAA,EAAK,eAAc,OAAM,YAAW,UAAS,IAAI,KAChD,6BAAAD,QAAA,cAAC,SAAI,OAAO,EAAE,OAAO,QAAQ,KAC3B,6BAAAA,QAAA,cAAC,YAAAE,SAAA,EAAK,SAAQ,SAAQ,OAAM,iBAAc,UACjC,MAAK,GACd,CACF,GACA,6BAAAF,QAAA,cAAC,YAAAC,SAAA,EAAK,eAAc,OAAM,IAAG,OAAM,WAAU,UAC1C,OAAO;AAAA,EAAI,WACV,CAAC,MAAM,KAAK,EAAE,IAAI,CAAC,WACjB,6BAAAD,QAAA,cAAC,aAAAD,SAAA,EAAI,MAAY,MAAY,QAAiB,GAAG,SAC9C,SAAS,WAAW,UACvB,CACD;AACH,CACF,CACF,CACD,CACH,CACD,CACH,GACC,KAAK,CAAC,CAAC;AAEV,MAAM,WAAoC,CAAC,SACzC,6BAAAC,QAAA,cAAC,aAAAD,SAAA,EAAK,GAAG,QAAO,KAAK,QAAS;AAGhC,MAAM,cAAc;AAAA,EAClB,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,MAAM;AACR;AAEO,MAAM,QAAQ,SAAS,KAAK,CAAC,CAAC;AACrC,MAAM,OAAO;AAAA,EACX,GAAG;AAAA,EACH,MAAM;AACR;AACO,MAAM,UAAU,SAAS,KAAK,CAAC,CAAC;AACvC,QAAQ,OAAO;AAAA,EACb,GAAG;AAAA,EACH,MAAM;AACR;AACO,MAAM,WAAW,SAAS,KAAK,CAAC,CAAC;AACxC,SAAS,OAAO;AAAA,EACd,GAAG;AAAA,EACH,MAAM;AACR;AACO,MAAM,kBAAkB,SAAS,KAAK,CAAC,CAAC;AAC/C,gBAAgB,OAAO;AAAA,EACrB,GAAG;AAAA,EACH,MAAM;AACR;",
4
+ "sourcesContent": ["import React from \"react\";\n\nimport { StoryTemplate } from \"../helpers\";\nimport Tag, { Type, Size, TagProps } from \"./index\";\nimport Text from \"../asorted/Text\";\nimport Flex from \"../layout/Flex\";\n\nconst sizes: Size[] = [\"large\", \"medium\", \"small\", \"tiny\"];\nconst types: Type[] = [\"plain\", \"opacity\", \"outlined\", \"outlinedOpacity\"];\nconst states = [{}, { disabled: true }];\n\nexport default {\n title: \"Toasts/Tag\",\n component: Tag,\n argTypes: {\n active: {\n control: {\n type: \"boolean\",\n },\n },\n type: {\n options: types,\n },\n size: {\n options: sizes,\n },\n children: {\n type: \"string\",\n },\n },\n};\n\nexport const Overview = ((): JSX.Element => (\n <Flex flexDirection=\"column\">\n {sizes.map(size => (\n <Flex flexDirection=\"column\" marginBottom={5}>\n <Text variant=\"h5\" marginBottom={5}>\n size=\"{size}\"\n </Text>\n {types.map(type => (\n <Flex flexDirection=\"row\" alignItems=\"center\" mb={5}>\n <div style={{ width: \"150px\" }}>\n <Text variant=\"small\" color=\"neutral.c70\">\n type=\"{type}\"\n </Text>\n </div>\n <Flex flexDirection=\"row\" mt=\"5px\" columnGap=\"16px\">\n {states.map(state =>\n [true, false].map((active: boolean) => (\n <Tag size={size} type={type} active={active} {...state}>\n {active ? \"Active\" : \"Inactive\"}\n </Tag>\n )),\n )}\n </Flex>\n </Flex>\n ))}\n </Flex>\n ))}\n </Flex>\n)).bind({});\n\nconst Template: StoryTemplate<TagProps> = (args: TagProps): JSX.Element => (\n <Tag {...args}>{args.children}</Tag>\n);\n\nconst defaultArgs = {\n active: true,\n children: \"Label\",\n type: \"large\",\n};\n\nexport const Plain = Template.bind({});\nPlain.args = {\n ...defaultArgs,\n type: \"plain\",\n};\nexport const Opacity = Template.bind({});\nOpacity.args = {\n ...defaultArgs,\n type: \"opacity\",\n};\nexport const Outlined = Template.bind({});\nOutlined.args = {\n ...defaultArgs,\n type: \"outlined\",\n};\nexport const OutlinedOpacity = Template.bind({});\nOutlinedOpacity.args = {\n ...defaultArgs,\n type: \"outlinedOpacity\",\n};\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAGlB,mBAA0C;AAC1C,kBAAiB;AACjB,kBAAiB;AAEjB,MAAM,QAAgB,CAAC,SAAS,UAAU,SAAS,MAAM;AACzD,MAAM,QAAgB,CAAC,SAAS,WAAW,YAAY,iBAAiB;AACxE,MAAM,SAAS,CAAC,CAAC,GAAG,EAAE,UAAU,KAAK,CAAC;AAEtC,IAAO,sBAAQ;AAAA,EACb,OAAO;AAAA,EACP,WAAW,aAAAA;AAAA,EACX,UAAU;AAAA,IACR,QAAQ;AAAA,MACN,SAAS;AAAA,QACP,MAAM;AAAA,MACR;AAAA,IACF;AAAA,IACA,MAAM;AAAA,MACJ,SAAS;AAAA,IACX;AAAA,IACA,MAAM;AAAA,MACJ,SAAS;AAAA,IACX;AAAA,IACA,UAAU;AAAA,MACR,MAAM;AAAA,IACR;AAAA,EACF;AACF;AAEO,MAAM,YAAY,MACvB,6BAAAC,QAAA,cAAC,YAAAC,SAAA,EAAK,eAAc,YACjB,MAAM,IAAI,UACT,6BAAAD,QAAA,cAAC,YAAAC,SAAA,EAAK,eAAc,UAAS,cAAc,KACzC,6BAAAD,QAAA,cAAC,YAAAE,SAAA,EAAK,SAAQ,MAAK,cAAc,KAAG,UAC3B,MAAK,GACd,GACC,MAAM,IAAI,UACT,6BAAAF,QAAA,cAAC,YAAAC,SAAA,EAAK,eAAc,OAAM,YAAW,UAAS,IAAI,KAChD,6BAAAD,QAAA,cAAC,SAAI,OAAO,EAAE,OAAO,QAAQ,KAC3B,6BAAAA,QAAA,cAAC,YAAAE,SAAA,EAAK,SAAQ,SAAQ,OAAM,iBAAc,UACjC,MAAK,GACd,CACF,GACA,6BAAAF,QAAA,cAAC,YAAAC,SAAA,EAAK,eAAc,OAAM,IAAG,OAAM,WAAU,UAC1C,OAAO;AAAA,EAAI,WACV,CAAC,MAAM,KAAK,EAAE,IAAI,CAAC,WACjB,6BAAAD,QAAA,cAAC,aAAAD,SAAA,EAAI,MAAY,MAAY,QAAiB,GAAG,SAC9C,SAAS,WAAW,UACvB,CACD;AACH,CACF,CACF,CACD,CACH,CACD,CACH,GACC,KAAK,CAAC,CAAC;AAEV,MAAM,WAAoC,CAAC,SACzC,6BAAAC,QAAA,cAAC,aAAAD,SAAA,EAAK,GAAG,QAAO,KAAK,QAAS;AAGhC,MAAM,cAAc;AAAA,EAClB,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,MAAM;AACR;AAEO,MAAM,QAAQ,SAAS,KAAK,CAAC,CAAC;AACrC,MAAM,OAAO;AAAA,EACX,GAAG;AAAA,EACH,MAAM;AACR;AACO,MAAM,UAAU,SAAS,KAAK,CAAC,CAAC;AACvC,QAAQ,OAAO;AAAA,EACb,GAAG;AAAA,EACH,MAAM;AACR;AACO,MAAM,WAAW,SAAS,KAAK,CAAC,CAAC;AACxC,SAAS,OAAO;AAAA,EACd,GAAG;AAAA,EACH,MAAM;AACR;AACO,MAAM,kBAAkB,SAAS,KAAK,CAAC,CAAC;AAC/C,gBAAgB,OAAO;AAAA,EACrB,GAAG;AAAA,EACH,MAAM;AACR;",
6
6
  "names": ["Tag", "React", "Flex", "Text"]
7
7
  }
@@ -67,22 +67,26 @@ function getBorderColor({ type, active, disabled }) {
67
67
  }
68
68
  function getPadding({ size }) {
69
69
  switch (size) {
70
+ case "tiny":
71
+ return "1px 3px";
70
72
  case "small":
71
- return "3px 5px";
73
+ return "2px 4px";
72
74
  case "medium":
73
- return "6px 8px";
75
+ return "5px 7px";
74
76
  case "large":
75
77
  default:
76
- return "9px 10px 10px";
78
+ return "8px 9px 9px";
77
79
  }
78
80
  }
79
81
  function getTextProps({ size }) {
80
82
  switch (size) {
83
+ case "tiny":
81
84
  case "small":
82
85
  case "medium":
83
86
  return {
84
87
  variant: "tiny",
85
- fontWeight: "semiBold"
88
+ fontWeight: "semiBold",
89
+ lineHeight: "normal"
86
90
  };
87
91
  case "large":
88
92
  default:
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/components/Tag/index.tsx"],
4
- "sourcesContent": ["import React from \"react\";\nimport { TextVariants } from \"../../styles/theme\";\nimport { border, BorderProps } from \"styled-system\";\nimport Text, { TextProps } from \"../asorted/Text\";\nimport baseStyled, { BaseStyledProps } from \"../styled\";\n\nexport type Size = \"large\" | \"medium\" | \"small\";\nexport type Type = \"plain\" | \"opacity\" | \"outlined\" | \"outlinedOpacity\";\n\nexport type TagProps = BaseStyledProps &\n React.HTMLAttributes<HTMLDivElement> &\n BorderProps &\n React.PropsWithChildren<{\n /**\n * Changes the appearance based on the active state.\n */\n active?: boolean;\n /**\n * Tag style.\n */\n type?: Type;\n /**\n * Size of the tag, affects the padding and the casing (uppercase for small and medium)\n */\n size?: Size;\n /**\n * Props passed to the text component, overriding props set internally by Tag component\n */\n textProps?: TextProps;\n\n disabled?: boolean;\n }>;\n\nfunction getColor({ type, active, disabled }: TagProps) {\n switch (type) {\n case \"plain\":\n if (disabled) return active ? \"neutral.c00\" : \"neutral.c70\";\n return active ? \"neutral.c00\" : \"primary.c90\";\n default:\n return disabled ? \"neutral.c70\" : \"primary.c90\";\n }\n}\n\nfunction getBgColor({ type, active, disabled }: TagProps) {\n switch (type) {\n case \"plain\":\n return active ? (disabled ? \"neutral.c70\" : \"primary.c90\") : undefined;\n case \"opacity\":\n return active ? (disabled ? \"neutral.c30\" : \"primary.c20\") : undefined;\n default:\n return;\n }\n}\n\nfunction getBorderColor({ type, active, disabled }: TagProps) {\n if (!active) return;\n switch (type) {\n case \"outlined\":\n return disabled ? \"neutral.c70\" : \"primary.c90\";\n case \"outlinedOpacity\":\n return disabled ? \"neutral.c40\" : \"primary.c40\";\n }\n}\n\nfunction getPadding({ size }: TagProps) {\n switch (size) {\n case \"small\":\n return \"3px 5px\";\n case \"medium\":\n return \"6px 8px\";\n case \"large\":\n default:\n return \"9px 10px 10px\";\n }\n}\n\nfunction getTextProps({ size }: TagProps): {\n variant: TextVariants;\n fontWeight?: string;\n uppercase?: boolean;\n} {\n switch (size) {\n case \"small\":\n case \"medium\":\n return {\n variant: \"tiny\",\n fontWeight: \"semiBold\",\n };\n case \"large\":\n default:\n return {\n variant: \"extraSmall\",\n fontWeight: \"semiBold\",\n };\n }\n}\n\nconst TagContainer = baseStyled.div.attrs<TagProps, TagProps>(props => ({\n backgroundColor: props.bg || props.backgroundColor || getBgColor(props),\n color: props.color || getColor(props),\n borderColor: getBorderColor(props),\n}))`\n display: inline-flex;\n justify-content: center;\n border: 1px solid transparent;\n border-radius: ${p => `${p.theme.radii[1]}px`};\n padding: ${p => getPadding(p)};\n ${border}\n`;\n\nexport default function Tag({\n children,\n textProps,\n size = \"large\",\n ...props\n}: TagProps): JSX.Element {\n const textColor = getColor(props);\n const baseTextProps = getTextProps({ size, ...props });\n return (\n <TagContainer size={size} {...props}>\n <Text {...baseTextProps} color={textColor} {...(textProps ? textProps : {})}>\n {children}\n </Text>\n </TagContainer>\n );\n}\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAElB,2BAAoC;AACpC,kBAAgC;AAChC,oBAA4C;AA6B5C,SAAS,SAAS,EAAE,MAAM,QAAQ,SAAS,GAAa;AACtD,UAAQ,MAAM;AAAA,IACZ,KAAK;AACH,UAAI;AAAU,eAAO,SAAS,gBAAgB;AAC9C,aAAO,SAAS,gBAAgB;AAAA,IAClC;AACE,aAAO,WAAW,gBAAgB;AAAA,EACtC;AACF;AAEA,SAAS,WAAW,EAAE,MAAM,QAAQ,SAAS,GAAa;AACxD,UAAQ,MAAM;AAAA,IACZ,KAAK;AACH,aAAO,SAAU,WAAW,gBAAgB,gBAAiB;AAAA,IAC/D,KAAK;AACH,aAAO,SAAU,WAAW,gBAAgB,gBAAiB;AAAA,IAC/D;AACE;AAAA,EACJ;AACF;AAEA,SAAS,eAAe,EAAE,MAAM,QAAQ,SAAS,GAAa;AAC5D,MAAI,CAAC;AAAQ;AACb,UAAQ,MAAM;AAAA,IACZ,KAAK;AACH,aAAO,WAAW,gBAAgB;AAAA,IACpC,KAAK;AACH,aAAO,WAAW,gBAAgB;AAAA,EACtC;AACF;AAEA,SAAS,WAAW,EAAE,KAAK,GAAa;AACtC,UAAQ,MAAM;AAAA,IACZ,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AAAA,IACL;AACE,aAAO;AAAA,EACX;AACF;AAEA,SAAS,aAAa,EAAE,KAAK,GAI3B;AACA,UAAQ,MAAM;AAAA,IACZ,KAAK;AAAA,IACL,KAAK;AACH,aAAO;AAAA,QACL,SAAS;AAAA,QACT,YAAY;AAAA,MACd;AAAA,IACF,KAAK;AAAA,IACL;AACE,aAAO;AAAA,QACL,SAAS;AAAA,QACT,YAAY;AAAA,MACd;AAAA,EACJ;AACF;AAEA,MAAM,eAAe,cAAAA,QAAW,IAAI,MAA0B,YAAU;AAAA,EACtE,iBAAiB,MAAM,MAAM,MAAM,mBAAmB,WAAW,KAAK;AAAA,EACtE,OAAO,MAAM,SAAS,SAAS,KAAK;AAAA,EACpC,aAAa,eAAe,KAAK;AACnC,EAAE;AAAA;AAAA;AAAA;AAAA,mBAIiB,OAAK,GAAG,EAAE,MAAM,MAAM,CAAC,CAAC,IAAI;AAAA,aAClC,OAAK,WAAW,CAAC,CAAC;AAAA,IAC3B,2BAAM;AAAA;AAGK,SAAR,IAAqB;AAAA,EAC1B;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,GAAG;AACL,GAA0B;AACxB,QAAM,YAAY,SAAS,KAAK;AAChC,QAAM,gBAAgB,aAAa,EAAE,MAAM,GAAG,MAAM,CAAC;AACrD,SACE,6BAAAC,QAAA,cAAC,gBAAa,MAAa,GAAG,SAC5B,6BAAAA,QAAA,cAAC,YAAAC,SAAA,EAAM,GAAG,eAAe,OAAO,WAAY,GAAI,YAAY,YAAY,CAAC,KACtE,QACH,CACF;AAEJ;",
4
+ "sourcesContent": ["import React from \"react\";\nimport { border, BorderProps } from \"styled-system\";\nimport Text, { TextProps } from \"../asorted/Text\";\nimport baseStyled, { BaseStyledProps } from \"../styled\";\n\nexport type Size = \"large\" | \"medium\" | \"small\" | \"tiny\";\nexport type Type = \"plain\" | \"opacity\" | \"outlined\" | \"outlinedOpacity\";\n\nexport type TagProps = BaseStyledProps &\n React.HTMLAttributes<HTMLDivElement> &\n BorderProps &\n React.PropsWithChildren<{\n /**\n * Changes the appearance based on the active state.\n */\n active?: boolean;\n /**\n * Tag style.\n */\n type?: Type;\n /**\n * Size of the tag, affects the padding and the casing (uppercase for small and medium)\n */\n size?: Size;\n /**\n * Props passed to the text component, overriding props set internally by Tag component\n */\n textProps?: TextProps;\n\n disabled?: boolean;\n }>;\n\nfunction getColor({ type, active, disabled }: TagProps) {\n switch (type) {\n case \"plain\":\n if (disabled) return active ? \"neutral.c00\" : \"neutral.c70\";\n return active ? \"neutral.c00\" : \"primary.c90\";\n default:\n return disabled ? \"neutral.c70\" : \"primary.c90\";\n }\n}\n\nfunction getBgColor({ type, active, disabled }: TagProps) {\n switch (type) {\n case \"plain\":\n return active ? (disabled ? \"neutral.c70\" : \"primary.c90\") : undefined;\n case \"opacity\":\n return active ? (disabled ? \"neutral.c30\" : \"primary.c20\") : undefined;\n default:\n return;\n }\n}\n\nfunction getBorderColor({ type, active, disabled }: TagProps) {\n if (!active) return;\n switch (type) {\n case \"outlined\":\n return disabled ? \"neutral.c70\" : \"primary.c90\";\n case \"outlinedOpacity\":\n return disabled ? \"neutral.c40\" : \"primary.c40\";\n }\n}\n\nfunction getPadding({ size }: TagProps) {\n // Padding is 1px less than what's indicated in the design because of the 1px wide border.\n switch (size) {\n case \"tiny\":\n return \"1px 3px\";\n case \"small\":\n return \"2px 4px\";\n case \"medium\":\n return \"5px 7px\";\n case \"large\":\n default:\n return \"8px 9px 9px\";\n }\n}\n\nfunction getTextProps({ size }: TagProps): TextProps {\n switch (size) {\n case \"tiny\":\n case \"small\":\n case \"medium\":\n return {\n variant: \"tiny\",\n fontWeight: \"semiBold\",\n lineHeight: \"normal\",\n };\n case \"large\":\n default:\n return {\n variant: \"extraSmall\",\n fontWeight: \"semiBold\",\n };\n }\n}\n\nconst TagContainer = baseStyled.div.attrs<TagProps, TagProps>(props => ({\n backgroundColor: props.bg || props.backgroundColor || getBgColor(props),\n color: props.color || getColor(props),\n borderColor: getBorderColor(props),\n}))`\n display: inline-flex;\n justify-content: center;\n border: 1px solid transparent;\n border-radius: ${p => `${p.theme.radii[1]}px`};\n padding: ${p => getPadding(p)};\n ${border}\n`;\n\nexport default function Tag({\n children,\n textProps,\n size = \"large\",\n ...props\n}: TagProps): JSX.Element {\n const textColor = getColor(props);\n const baseTextProps = getTextProps({ size, ...props });\n return (\n <TagContainer size={size} {...props}>\n <Text {...baseTextProps} color={textColor} {...(textProps ? textProps : {})}>\n {children}\n </Text>\n </TagContainer>\n );\n}\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,2BAAoC;AACpC,kBAAgC;AAChC,oBAA4C;AA6B5C,SAAS,SAAS,EAAE,MAAM,QAAQ,SAAS,GAAa;AACtD,UAAQ,MAAM;AAAA,IACZ,KAAK;AACH,UAAI;AAAU,eAAO,SAAS,gBAAgB;AAC9C,aAAO,SAAS,gBAAgB;AAAA,IAClC;AACE,aAAO,WAAW,gBAAgB;AAAA,EACtC;AACF;AAEA,SAAS,WAAW,EAAE,MAAM,QAAQ,SAAS,GAAa;AACxD,UAAQ,MAAM;AAAA,IACZ,KAAK;AACH,aAAO,SAAU,WAAW,gBAAgB,gBAAiB;AAAA,IAC/D,KAAK;AACH,aAAO,SAAU,WAAW,gBAAgB,gBAAiB;AAAA,IAC/D;AACE;AAAA,EACJ;AACF;AAEA,SAAS,eAAe,EAAE,MAAM,QAAQ,SAAS,GAAa;AAC5D,MAAI,CAAC;AAAQ;AACb,UAAQ,MAAM;AAAA,IACZ,KAAK;AACH,aAAO,WAAW,gBAAgB;AAAA,IACpC,KAAK;AACH,aAAO,WAAW,gBAAgB;AAAA,EACtC;AACF;AAEA,SAAS,WAAW,EAAE,KAAK,GAAa;AAEtC,UAAQ,MAAM;AAAA,IACZ,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AAAA,IACL;AACE,aAAO;AAAA,EACX;AACF;AAEA,SAAS,aAAa,EAAE,KAAK,GAAwB;AACnD,UAAQ,MAAM;AAAA,IACZ,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AACH,aAAO;AAAA,QACL,SAAS;AAAA,QACT,YAAY;AAAA,QACZ,YAAY;AAAA,MACd;AAAA,IACF,KAAK;AAAA,IACL;AACE,aAAO;AAAA,QACL,SAAS;AAAA,QACT,YAAY;AAAA,MACd;AAAA,EACJ;AACF;AAEA,MAAM,eAAe,cAAAA,QAAW,IAAI,MAA0B,YAAU;AAAA,EACtE,iBAAiB,MAAM,MAAM,MAAM,mBAAmB,WAAW,KAAK;AAAA,EACtE,OAAO,MAAM,SAAS,SAAS,KAAK;AAAA,EACpC,aAAa,eAAe,KAAK;AACnC,EAAE;AAAA;AAAA;AAAA;AAAA,mBAIiB,OAAK,GAAG,EAAE,MAAM,MAAM,CAAC,CAAC,IAAI;AAAA,aAClC,OAAK,WAAW,CAAC,CAAC;AAAA,IAC3B,2BAAM;AAAA;AAGK,SAAR,IAAqB;AAAA,EAC1B;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,GAAG;AACL,GAA0B;AACxB,QAAM,YAAY,SAAS,KAAK;AAChC,QAAM,gBAAgB,aAAa,EAAE,MAAM,GAAG,MAAM,CAAC;AACrD,SACE,6BAAAC,QAAA,cAAC,gBAAa,MAAa,GAAG,SAC5B,6BAAAA,QAAA,cAAC,YAAAC,SAAA,EAAM,GAAG,eAAe,OAAO,WAAY,GAAI,YAAY,YAAY,CAAC,KACtE,QACH,CACF;AAEJ;",
6
6
  "names": ["baseStyled", "React", "Text"]
7
7
  }
@@ -2,7 +2,7 @@ import React from "react";
2
2
  import { BorderProps } from "styled-system";
3
3
  import { TextProps } from "../asorted/Text";
4
4
  import { BaseStyledProps } from "../styled";
5
- export type Size = "large" | "medium" | "small";
5
+ export type Size = "large" | "medium" | "small" | "tiny";
6
6
  export type Type = "plain" | "opacity" | "outlined" | "outlinedOpacity";
7
7
  export type TagProps = BaseStyledProps & React.HTMLAttributes<HTMLDivElement> & BorderProps & React.PropsWithChildren<{
8
8
  /**
@@ -44,23 +44,28 @@ function getBorderColor({ type, active, disabled }) {
44
44
  }
45
45
  }
46
46
  function getPadding({ size }) {
47
+ // Padding is 1px less than what's indicated in the design because of the 1px wide border.
47
48
  switch (size) {
49
+ case "tiny":
50
+ return "1px 3px";
48
51
  case "small":
49
- return "3px 5px";
52
+ return "2px 4px";
50
53
  case "medium":
51
- return "6px 8px";
54
+ return "5px 7px";
52
55
  case "large":
53
56
  default:
54
- return "9px 10px 10px";
57
+ return "8px 9px 9px";
55
58
  }
56
59
  }
57
60
  function getTextProps({ size }) {
58
61
  switch (size) {
62
+ case "tiny":
59
63
  case "small":
60
64
  case "medium":
61
65
  return {
62
66
  variant: "tiny",
63
67
  fontWeight: "semiBold",
68
+ lineHeight: "normal",
64
69
  };
65
70
  case "large":
66
71
  default:
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Tag/index.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Tag/index.tsx"],"names":[],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ledgerhq/react-ui",
3
- "version": "0.14.17",
3
+ "version": "0.14.18-nightly.0",
4
4
  "description": "Ledger Live - Desktop UI",
5
5
  "author": "Ledger Live Team <team-live@ledger.fr>",
6
6
  "repository": {