lumen/libs/ui-react/src/lib/Components/Subheader/Subheader.figma.tsx at bd45cf361e33615d342a080ec5e43fd7fb8e04ef · LedgerHQ/lumen · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
import React from 'react';
import {
  Subheader,
  SubheaderRow,
  SubheaderTitle,
  SubheaderAction,
} from './Subheader';
import { Link } from '../Link/Link';

import figma from '@figma/code-connect';

// Base subheader with title only
figma.connect(
  Subheader,
  'https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7/2.-Components-Library?node-id=10438-1354',
  {
    variant: { action: 'button' },
    imports: ["import { Subheader } from '@ledgerhq/lumen-ui-react'"],
    props: {
      title: figma.string('title'),
    },
    links: [
      {
        name: 'Documentation',
        url: 'https://ldls.vercel.app/?path=/docs/communication-subheader--docs',
      },
      {
        name: 'Storybook',
        url: 'https://ldls.vercel.app/?path=/story/communication-subheader--base',
      },
    ],
    example: (props) => (
      <Subheader>
        <SubheaderRow>
          <SubheaderTitle>{props.title}</SubheaderTitle>
        </SubheaderRow>
      </Subheader>
    ),
  },
);

// Subheader with action link
figma.connect(
  Subheader,
  'https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7/2.-Components-Library?node-id=10438-1354',
  {
    variant: { action: 'button' },
    imports: ["import { Subheader } from '@ledgerhq/lumen-ui-react'"],
    props: {
      title: figma.string('title'),
    },
    example: (props) => (
      <Subheader>
        <SubheaderRow>
          <SubheaderTitle>{props.title}</SubheaderTitle>
          <SubheaderAction onClick={() => console.log('Action clicked')}>
            <Link href='#' appearance='accent' size='sm'>
              Action
            </Link>
          </SubheaderAction>
        </SubheaderRow>
      </Subheader>
    ),
  },
);