@dtdot/lego 0.14.9 → 0.14.10

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 (5) hide show
  1. package/build/components/InlineCard/InlineCardGroup.component.d.ts +2 -1
  2. package/build/components/InlineCard/InlineCardGroup.component.js +20 -1
  3. package/build/components/Swimlane/Swimlane.stories.d.ts +1 -0
  4. package/build/components/Swimlane/Swimlane.stories.js +60 -13
  5. package/package.json +1 -1
package/build/components/InlineCard/InlineCardGroup.component.d.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  import React from 'react';
2
2
  export interface InlineCardGroupProps {
3
3
  children: React.ReactNode;
4
+ wrap?: boolean;
4
5
  }
5
- declare const InlineCardGroup: ({ children }: InlineCardGroupProps) => JSX.Element;
6
+ declare const InlineCardGroup: ({ children, wrap }: InlineCardGroupProps) => JSX.Element;
6
7
  export default InlineCardGroup;
package/build/components/InlineCard/InlineCardGroup.component.js CHANGED
@@ -13,5 +13,24 @@ const InlineGroup = styled.div `
13
13
  }
14
14
  }
15
15
  `;
16
- const InlineCardGroup = ({ children }) => React.createElement(InlineGroup, null, children);
16
+ const WrappedInlineGroup = styled.div `
17
+ display: flex;
18
+ flex-wrap: wrap;
19
+
20
+ & > * {
21
+ margin-bottom: 4px;
22
+ margin-top: 4px;
23
+ margin-right: 8px;
24
+
25
+ &:last-child {
26
+ margin-bottom: 0;
27
+ }
28
+ }
29
+ `;
30
+ const InlineCardGroup = ({ children, wrap }) => {
31
+ if (wrap) {
32
+ return React.createElement(WrappedInlineGroup, null, children);
33
+ }
34
+ return React.createElement(InlineGroup, null, children);
35
+ };
17
36
  export default InlineCardGroup;
package/build/components/Swimlane/Swimlane.stories.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  /// <reference types="react" />
2
2
  import { Meta } from '@storybook/react/types-6-0';
3
3
  export declare const Standard: () => JSX.Element;
4
+ export declare const LotsOfCards: () => JSX.Element;
4
5
  declare const _default: Meta<import("@storybook/react/types-6-0").Args>;
5
6
  export default _default;
package/build/components/Swimlane/Swimlane.stories.js CHANGED
@@ -1,13 +1,10 @@
1
1
  import React from 'react';
2
- import styled from 'styled-components';
3
2
  import { InlineCard, Badge, Swimlane, CenteredLayout } from '../../';
4
- const CardWrapper = styled.div `
5
- margin: 8px;
6
- `;
3
+ import InlineCardGroup from '../InlineCard/InlineCardGroup.component';
7
4
  export const Standard = () => {
8
5
  return (React.createElement(React.Fragment, null,
9
6
  React.createElement(Swimlane, { label: 'Jobs' },
10
- React.createElement(CardWrapper, null,
7
+ React.createElement(InlineCardGroup, { wrap: true },
11
8
  React.createElement(InlineCard, { size: 'xs' },
12
9
  React.createElement(InlineCard.Content, { center: true },
13
10
  React.createElement(CenteredLayout, null,
@@ -17,38 +14,88 @@ export const Standard = () => {
17
14
  React.createElement(InlineCard.Meta, null,
18
15
  React.createElement(Badge, { variant: 'success' }, "Full Time"))))),
19
16
  React.createElement(Swimlane, { label: 'Properties' },
20
- React.createElement(CardWrapper, null,
17
+ React.createElement(InlineCardGroup, { wrap: true },
21
18
  React.createElement(InlineCard, { size: 'xs' },
22
19
  React.createElement(InlineCard.Content, { center: true },
23
20
  React.createElement(CenteredLayout, null, "33 Oak Street")),
24
21
  React.createElement(InlineCard.Meta, null,
25
- React.createElement(Badge, { variant: 'success' }, "Primary")))),
26
- React.createElement(CardWrapper, null,
22
+ React.createElement(Badge, { variant: 'success' }, "Primary"))),
27
23
  React.createElement(InlineCard, { size: 'xs' },
28
24
  React.createElement(InlineCard.Content, { center: true },
29
25
  React.createElement(CenteredLayout, null, "402 Main Street")),
30
26
  React.createElement(InlineCard.Meta, null,
31
- React.createElement(Badge, { variant: 'info' }, "Investment")))),
32
- React.createElement(CardWrapper, null,
27
+ React.createElement(Badge, { variant: 'info' }, "Investment"))),
33
28
  React.createElement(InlineCard, { size: 'xs' },
34
29
  React.createElement(InlineCard.Content, { center: true },
35
30
  React.createElement(CenteredLayout, null, "12 Heart Avenue")),
36
31
  React.createElement(InlineCard.Meta, null,
37
32
  React.createElement(Badge, { variant: 'info' }, "Investment"))))),
38
33
  React.createElement(Swimlane, { label: 'Investments' },
39
- React.createElement(CardWrapper, null,
34
+ React.createElement(InlineCardGroup, { wrap: true },
40
35
  React.createElement(InlineCard, { size: 'xs' },
41
36
  React.createElement(InlineCard.Content, { center: true },
42
37
  React.createElement(CenteredLayout, null, "ASX 200")),
43
38
  React.createElement(InlineCard.Meta, null,
44
- React.createElement(Badge, { variant: 'info' }, "Index Fund")))),
45
- React.createElement(CardWrapper, null,
39
+ React.createElement(Badge, { variant: 'info' }, "Index Fund"))),
46
40
  React.createElement(InlineCard, { size: 'xs' },
47
41
  React.createElement(InlineCard.Content, { center: true },
48
42
  React.createElement(CenteredLayout, null, "AMP Super")),
49
43
  React.createElement(InlineCard.Meta, null,
50
44
  React.createElement(Badge, { variant: 'info' }, "Super Fund")))))));
51
45
  };
46
+ export const LotsOfCards = () => {
47
+ return (React.createElement(React.Fragment, null,
48
+ React.createElement(Swimlane, { label: 'An Example' },
49
+ React.createElement(InlineCardGroup, { wrap: true },
50
+ React.createElement(InlineCard, { size: 'xs' },
51
+ React.createElement(InlineCard.Content, { center: true },
52
+ React.createElement(CenteredLayout, null, "Card")),
53
+ React.createElement(InlineCard.Meta, null,
54
+ React.createElement(Badge, { variant: 'success' }, "#1"))),
55
+ React.createElement(InlineCard, { size: 'xs' },
56
+ React.createElement(InlineCard.Content, { center: true },
57
+ React.createElement(CenteredLayout, null, "Card")),
58
+ React.createElement(InlineCard.Meta, null,
59
+ React.createElement(Badge, { variant: 'success' }, "#2"))),
60
+ React.createElement(InlineCard, { size: 'xs' },
61
+ React.createElement(InlineCard.Content, { center: true },
62
+ React.createElement(CenteredLayout, null, "Card")),
63
+ React.createElement(InlineCard.Meta, null,
64
+ React.createElement(Badge, { variant: 'success' }, "#3"))),
65
+ React.createElement(InlineCard, { size: 'xs' },
66
+ React.createElement(InlineCard.Content, { center: true },
67
+ React.createElement(CenteredLayout, null, "Card")),
68
+ React.createElement(InlineCard.Meta, null,
69
+ React.createElement(Badge, { variant: 'success' }, "#4"))),
70
+ React.createElement(InlineCard, { size: 'xs' },
71
+ React.createElement(InlineCard.Content, { center: true },
72
+ React.createElement(CenteredLayout, null, "Card")),
73
+ React.createElement(InlineCard.Meta, null,
74
+ React.createElement(Badge, { variant: 'success' }, "#5"))),
75
+ React.createElement(InlineCard, { size: 'xs' },
76
+ React.createElement(InlineCard.Content, { center: true },
77
+ React.createElement(CenteredLayout, null, "Card")),
78
+ React.createElement(InlineCard.Meta, null,
79
+ React.createElement(Badge, { variant: 'success' }, "#6"))),
80
+ React.createElement(InlineCard, { size: 'xs' },
81
+ React.createElement(InlineCard.Content, { center: true },
82
+ React.createElement(CenteredLayout, null, "Card")),
83
+ React.createElement(InlineCard.Meta, null,
84
+ React.createElement(Badge, { variant: 'success' }, "#7"))),
85
+ React.createElement(InlineCard, { size: 'xs' },
86
+ React.createElement(InlineCard.Content, { center: true },
87
+ React.createElement(CenteredLayout, null, "Card")),
88
+ React.createElement(InlineCard.Meta, null,
89
+ React.createElement(Badge, { variant: 'success' }, "#8"))),
90
+ React.createElement(InlineCard, { size: 'xs' },
91
+ React.createElement(InlineCard.Content, { center: true },
92
+ React.createElement(CenteredLayout, null, "Card")),
93
+ React.createElement(InlineCard.Meta, null,
94
+ React.createElement(Badge, { variant: 'success' }, "#9"))),
95
+ React.createElement(InlineCard, { size: 'xs', onClick: () => console.log('add') },
96
+ React.createElement(InlineCard.Content, { center: true },
97
+ React.createElement(CenteredLayout, null, "Add")))))));
98
+ };
52
99
  export default {
53
100
  title: 'Components/Swimlane',
54
101
  component: Swimlane,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dtdot/lego",
3
- "version": "0.14.9",
3
+ "version": "0.14.10",
4
4
  "description": "Some reusable components for building my applications",
5
5
  "main": "build/index.js",
6
6
  "scripts": {