@indico-data/design-system 2.22.0 → 2.24.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.
Files changed (14) hide show
  1. package/lib/index.css +20 -0
  2. package/lib/index.d.ts +4 -4
  3. package/lib/index.esm.css +20 -0
  4. package/lib/index.esm.js +2 -2
  5. package/lib/index.esm.js.map +1 -1
  6. package/lib/index.js +2 -2
  7. package/lib/index.js.map +1 -1
  8. package/lib/src/components/pill/Pill.d.ts +4 -4
  9. package/package.json +1 -1
  10. package/src/components/pill/Pill.stories.tsx +47 -24
  11. package/src/components/pill/Pill.tsx +5 -5
  12. package/src/components/pill/__tests__/Pill.test.tsx +10 -2
  13. package/src/styles/variables/_size.scss +19 -0
  14. package/src/styles/variables/index.scss +1 -0
package/lib/src/components/pill/Pill.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  type Props = {
2
- value: string;
3
- status: 'success' | 'warning' | 'error' | 'info' | 'neutral' | 'primary' | 'secondary';
4
- size: 'sm' | 'md' | 'lg';
2
+ children: React.ReactNode | React.ReactNode[];
3
+ status?: 'success' | 'warning' | 'error' | 'info' | 'neutral' | 'primary' | 'secondary';
4
+ size?: 'sm' | 'md' | 'lg';
5
5
  };
6
- export declare const Pill: ({ value, status, size, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
6
+ export declare const Pill: ({ children, status, size, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
7
7
  export {};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@indico-data/design-system",
3
- "version": "2.22.0",
3
+ "version": "2.24.0",
4
4
  "description": "",
5
5
  "author": "",
6
6
  "main": "lib/index.js",
package/src/components/pill/Pill.stories.tsx CHANGED
@@ -3,9 +3,19 @@ import { Pill } from './Pill';
3
3
  import { Container, Row, Col } from 'react-grid-system';
4
4
 
5
5
  const meta: Meta = {
6
- title: 'Layout/Pill',
6
+ title: 'Components/Pill',
7
7
  component: Pill,
8
8
  argTypes: {
9
+ children: {
10
+ control: 'text',
11
+ description: 'The content displayed inside the pill',
12
+ table: {
13
+ category: 'Props',
14
+ type: {
15
+ summary: 'React.ReactNode',
16
+ },
17
+ },
18
+ },
9
19
  status: {
10
20
  control: {
11
21
  type: 'select',
@@ -19,17 +29,6 @@ const meta: Meta = {
19
29
  },
20
30
  },
21
31
  },
22
- value: {
23
- control: 'text',
24
- description: 'The value to display in the pill',
25
- table: {
26
- category: 'Props',
27
- type: {
28
- summary: 'string',
29
- },
30
- },
31
- defaultValue: { summary: '' },
32
- },
33
32
  size: {
34
33
  control: {
35
34
  type: 'select',
@@ -52,11 +51,15 @@ type Story = StoryObj<typeof Pill>;
52
51
 
53
52
  export const Default: Story = {
54
53
  args: {
55
- value: 'Success',
54
+ children: 'Success',
56
55
  status: 'success',
57
56
  },
58
57
  render: (args) => {
59
- return <Pill value={args.value} status={args.status} size={args.size} />;
58
+ return (
59
+ <Pill status={args.status} size={args.size}>
60
+ {args.children}
61
+ </Pill>
62
+ );
60
63
  },
61
64
  };
62
65
 
@@ -66,13 +69,19 @@ export const AllSizes: Story = {
66
69
  <Container>
67
70
  <Row>
68
71
  <Col>
69
- <Pill value="Large (lg)" status="info" size="lg" />
72
+ <Pill status="info" size="lg">
73
+ Large (lg)
74
+ </Pill>
70
75
  </Col>
71
76
  <Col>
72
- <Pill value="Medium (md)" status="info" size="md" />
77
+ <Pill status="info" size="md">
78
+ Medium (md)
79
+ </Pill>
73
80
  </Col>
74
81
  <Col>
75
- <Pill value="Small (sm)" status="info" size="sm" />
82
+ <Pill status="info" size="sm">
83
+ Small (sm)
84
+ </Pill>
76
85
  </Col>
77
86
  </Row>
78
87
  </Container>
@@ -86,25 +95,39 @@ export const AllStatuses: Story = {
86
95
  <Container>
87
96
  <Row>
88
97
  <Col>
89
- <Pill value="Success" status="success" size="md" />
98
+ <Pill status="success" size="md">
99
+ Success
100
+ </Pill>
90
101
  </Col>
91
102
  <Col>
92
- <Pill value="Warning" status="warning" size="md" />
103
+ <Pill status="warning" size="md">
104
+ Warning
105
+ </Pill>
93
106
  </Col>
94
107
  <Col>
95
- <Pill value="Error" status="error" size="md" />
108
+ <Pill status="error" size="md">
109
+ Error
110
+ </Pill>
96
111
  </Col>
97
112
  <Col>
98
- <Pill value="Primary" status="primary" size="md" />
113
+ <Pill status="primary" size="md">
114
+ Primary
115
+ </Pill>
99
116
  </Col>
100
117
  <Col>
101
- <Pill value="Secondary" status="secondary" size="md" />
118
+ <Pill status="secondary" size="md">
119
+ Secondary
120
+ </Pill>
102
121
  </Col>
103
122
  <Col>
104
- <Pill value="Info" status="info" size="md" />
123
+ <Pill status="info" size="md">
124
+ Info
125
+ </Pill>
105
126
  </Col>
106
127
  <Col>
107
- <Pill value="Neutral" status="neutral" size="md" />
128
+ <Pill status="neutral" size="md">
129
+ Neutral
130
+ </Pill>
108
131
  </Col>
109
132
  </Row>
110
133
  </Container>
package/src/components/pill/Pill.tsx CHANGED
@@ -1,12 +1,12 @@
1
1
  import classNames from 'classnames';
2
2
 
3
3
  type Props = {
4
- value: string;
5
- status: 'success' | 'warning' | 'error' | 'info' | 'neutral' | 'primary' | 'secondary';
6
- size: 'sm' | 'md' | 'lg';
4
+ children: React.ReactNode | React.ReactNode[];
5
+ status?: 'success' | 'warning' | 'error' | 'info' | 'neutral' | 'primary' | 'secondary';
6
+ size?: 'sm' | 'md' | 'lg';
7
7
  };
8
8
 
9
- export const Pill = ({ value, status = 'info', size = 'sm', ...rest }: Props) => {
9
+ export const Pill = ({ children, status = 'info', size = 'sm', ...rest }: Props) => {
10
10
  const className = classNames('pill', {
11
11
  [`pill--${status}`]: status,
12
12
  [`pill--${size}`]: size,
@@ -14,7 +14,7 @@ export const Pill = ({ value, status = 'info', size = 'sm', ...rest }: Props) =>
14
14
 
15
15
  return (
16
16
  <div className={className} {...rest}>
17
- {value}
17
+ {children}
18
18
  </div>
19
19
  );
20
20
  };
package/src/components/pill/__tests__/Pill.test.tsx CHANGED
@@ -18,7 +18,11 @@ const statuses = [
18
18
  describe('Pill', () => {
19
19
  sizes.forEach((size) => {
20
20
  it(`checks that the proper size class is applied when size is ${size}`, () => {
21
- render(<Pill value="Success" status="success" size={size} data-testid={`pill-${size}`} />);
21
+ render(
22
+ <Pill status="success" size={size} data-testid={`pill-${size}`}>
23
+ Success
24
+ </Pill>,
25
+ );
22
26
  const pill = screen.getByTestId(`pill-${size}`);
23
27
  expect(pill).toHaveClass(`pill pill--success pill--${size}`);
24
28
  });
@@ -26,7 +30,11 @@ describe('Pill', () => {
26
30
 
27
31
  statuses.forEach((status) => {
28
32
  it(`checks that the proper style class has been applied when status is ${status}`, () => {
29
- render(<Pill value="Status" status={status} size="md" data-testid={`pill-${status}`} />);
33
+ render(
34
+ <Pill status={status} size="md" data-testid={`pill-${status}`}>
35
+ Status
36
+ </Pill>,
37
+ );
30
38
  const pill = screen.getByTestId(`pill-${status}`);
31
39
  expect(pill).toHaveClass(`pill pill--${status} pill--md`);
32
40
  });
package/src/styles/variables/_size.scss ADDED
@@ -0,0 +1,19 @@
1
+ :root {
2
+ --pf-size-0: 0;
3
+ --pf-size-1: 4px;
4
+ --pf-size-2: 8px;
5
+ --pf-size-3: 12px;
6
+ --pf-size-4: 16px;
7
+ --pf-size-5: 20px;
8
+ --pf-size-6: 24px;
9
+ --pf-size-7: 28px;
10
+ --pf-size-8: 32px;
11
+ --pf-size-9: 36px;
12
+ --pf-size-10: 40px;
13
+ --pf-size-11: 44px;
14
+ --pf-size-12: 48px;
15
+ --pf-size-13: 52px;
16
+ --pf-size-14: 56px;
17
+ --pf-size-15: 60px;
18
+ --pf-size-16: 64px;
19
+ }
package/src/styles/variables/index.scss CHANGED
@@ -4,4 +4,5 @@
4
4
  @import 'borders';
5
5
  @import 'padding';
6
6
  @import 'margin';
7
+ @import 'size';
7
8
  @import 'dropshadows';