New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

carbon-components-solid

Package Overview
Dependencies
Maintainers
1
Versions
8
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

carbon-components-solid - npm Package Compare versions

Comparing version

0.0.5
to
0.0.6

src/components/Button/Button.stories.js
src/components/Button/ButtonSet.stories.js
src/components/Checkbox/Checkbox.stories.js
src/components/Icon/Icon.stories.js
src/components/Icon/Icon.tsx
src/components/Icon/IconSkeleton.tsx
src/components/Link/Link.tsx
src/components/Modal/Modal.stories.js
src/components/TextInput/PasswordInput.stories.js
src/components/TextInput/TextInput.stories.js
src/components/TextInput/TextInputSkeleton.stories.js
src/components/Theme/Theme.stories.js
src/components/Tile/ClickableTile.stories.js
src/components/Tile/ClickableTile.tsx
src/components/UIShell/GlobalHeader/HeaderNav.tsx
src/components/UIShell/GlobalHeader/HeaderNavItem.tsx
src/components/UIShell/navStore.ts
src/components/UIShell/SideNav/SideNav.tsx
src/components/UIShell/SideNav/SideNavIcon.tsx
src/components/UIShell/SideNav/SideNavItem.tsx
src/components/UIShell/SideNav/SideNavItems.tsx
src/components/UIShell/SideNav/SideNavLink.tsx
src/components/UIShell/SideNav/SideNavLinkText.tsx
src/components/UIShell/UIShell.stories.js
src/icons/Add16/index.tsx
src/icons/Add20/index.tsx
src/icons/Add24/index.tsx
src/icons/Add32/index.tsx

38

CHANGELOG.md

@@ -10,2 +10,40 @@ # Changelog

## [0.0.6](https://gitlab.com/mneumann_ntecs/carbon-components-solid/-/tree/v0.0.6) - 2020-12-19
**Features**
- Added `hideCloseButton` boolean prop for `Modal`.
- InlineLoading respects `style` prop.
- Added `Link` component.
- Added `SideNavIcon`, `SideNavItem` and `SideNavLinkText` components. Used
internally by `SideNav`. `SideNavLink` now respects `large` prop.
- `Content` respects custom CSS `class`.
- Added `SideNav`, `SideNavItems` and `SideNavLink` components.
- `Header` now respects the `persistentHamburgerMenu` prop.
- Added `Icon` and `IconSkeleton` components.
- Added `HeaderNav` and `HeaderNavItem` components.
- Added `ClickableTile` component. Has no `clicked` property as svelte does. The
reason: There is no `bx--tile--is-clicked` CSS class. Add `onClicked`
callback instead.
**Breaking Changes**
- `HamburgerMenu` and `GlobalHeader/Header` now take `aria-label` props instead of `ariaLabel`.
**Bug Fixes**
- Fix `SideNav`. The overlay now works properly.
- Fixed an issue with Storybook. `createEffect()` did not work in Storybook as
the components were not running in a `createRoot()`.
## [0.0.5](https://gitlab.com/mneumann_ntecs/carbon-components-solid/-/tree/v0.0.5) - 2020-12-17

@@ -12,0 +50,0 @@

8

package.json
{
"name": "carbon-components-solid",
"version": "0.0.5",
"version": "0.0.6",
"license": "Apache-2.0",

@@ -38,3 +38,3 @@ "author": "Michael Neumann",

"babel-loader": "^8.2.2",
"babel-preset-solid": "^0.23.0",
"babel-preset-solid": "^0.23.4",
"carbon-components": "10.25.0",

@@ -45,3 +45,3 @@ "node-sass": "^5.0.0",

"rollup": "^2.35.1",
"solid-js": "^0.23.3",
"solid-js": "^0.23.4",
"solid-scripts": "0.0.49",

@@ -52,3 +52,3 @@ "typescript": "4.1.2"

"dist": "rollup -c && npm run build:css",
"fmt": "prettier --write 'src/**/*.ts' 'src/**/*.tsx' 'src/**/*.js' 'scripts/*.js'",
"fmt": "prettier --write 'src/**/*.ts' 'src/**/*.tsx' 'src/**/*.js' 'scripts/*.js' '.storybook/*.js' rollup.config.js",
"storybook": "start-storybook -p 6006",

@@ -55,0 +55,0 @@ "build:storybook": "build-storybook -c .storybook -o public/storybook",

9

README.md

@@ -39,4 +39,13 @@ # Carbon Components for Solid (WIP)

* UIShell/HeaderGlobalAction
* UIShell/SideBar
* Table
* DataTable
* Icon
* InlineLoading
* Link
* Loading
* InlineNotification
* ToastNotification
* Tile
* ClickableTile

@@ -43,0 +52,0 @@ Custom components (not directly found in carbon-components-svelte):

617

src/components/DataTable/DataTable.stories.js

@@ -19,2 +19,3 @@ export default {

ToolbarContent,
Link,
} from "../index";

@@ -27,30 +28,28 @@ import { Launch16 } from "../../icons/Launch16";

return (
<div>
<TableContainer
title="A and B and C"
description="Description"
stickyHeader
>
<Table size="compact" zebra shouldShowBorder stickyHeader sortable>
<TableHead>
<TableRow>
<TableCell>A</TableCell>
<TableCell>B</TableCell>
<TableCell>C</TableCell>
</TableRow>
</TableHead>
<TableBody>
<For each={array}>
{(row) => (
<TableRow>
<For each={row}>
{(column) => <TableCell>{column}</TableCell>}
</For>
</TableRow>
)}
</For>
</TableBody>
</Table>
</TableContainer>
</div>
<TableContainer
title="A and B and C"
description="Description"
stickyHeader
>
<Table size="compact" zebra shouldShowBorder stickyHeader sortable>
<TableHead>
<TableRow>
<TableCell>A</TableCell>
<TableCell>B</TableCell>
<TableCell>C</TableCell>
</TableRow>
</TableHead>
<TableBody>
<For each={array}>
{(row) => (
<TableRow>
<For each={row}>
{(column) => <TableCell>{column}</TableCell>}
</For>
</TableRow>
)}
</For>
</TableBody>
</Table>
</TableContainer>
);

@@ -111,9 +110,5 @@ };

export const Default = () => {
return (
<div>
<DataTable headers={DataTableHeaders} rows={DataTableRows} />
</div>
);
};
export const Default = () => (
<DataTable headers={DataTableHeaders} rows={DataTableRows} />
);

@@ -127,10 +122,9 @@ export const WithCustomCellRenderers = () => {

return (
/* XXX: use <Link> component */
<a
classList={{ "bx--link": true, "bx--link--inline": true }}
<Link
inline
target="_blank"
href="https://en.wikipedia.org/wiki/Round-robin_DNS"
target="_blank"
>
{cell.value} <Launch16 />
</a>
</Link>
);

@@ -143,10 +137,8 @@ } else {

return (
<div>
<DataTable
headers={DataTableHeaders}
rows={DataTableRows}
renderCellHeader={renderCellHeader}
renderCell={renderCell}
/>
</div>
<DataTable
headers={DataTableHeaders}
rows={DataTableRows}
renderCellHeader={renderCellHeader}
renderCell={renderCell}
/>
);

@@ -157,130 +149,100 @@ };

return (
<div>
<DataTable
title="Load balancers"
description="Your organization's active load balancers."
headers={DataTableHeaders}
rows={DataTableRows}
/>
</div>
<DataTable
title="Load balancers"
description="Your organization's active load balancers."
headers={DataTableHeaders}
rows={DataTableRows}
/>
);
};
export const ZebraStripes = () => {
return (
<div>
<DataTable zebra headers={DataTableHeaders} rows={DataTableRows} />
</div>
);
};
export const ZebraStripes = () => (
<DataTable zebra headers={DataTableHeaders} rows={DataTableRows} />
);
export const TallRows = () => {
return (
<div>
<DataTable size="tall" headers={DataTableHeaders} rows={DataTableRows} />
</div>
);
};
export const TallRows = () => (
<DataTable size="tall" headers={DataTableHeaders} rows={DataTableRows} />
);
export const ShortRows = () => {
return (
<div>
<DataTable size="short" headers={DataTableHeaders} rows={DataTableRows} />
</div>
);
};
export const ShortRows = () => (
<DataTable size="short" headers={DataTableHeaders} rows={DataTableRows} />
);
export const CompactRows = () => {
return (
<div>
<DataTable
size="compact"
headers={DataTableHeaders}
rows={DataTableRows}
/>
</div>
);
};
export const CompactRows = () => (
<DataTable size="compact" headers={DataTableHeaders} rows={DataTableRows} />
);
export const Sortable = () => {
return (
<div>
<DataTable sortable headers={DataTableHeaders} rows={DataTableRows} />
</div>
);
};
export const Sortable = () => (
<DataTable sortable headers={DataTableHeaders} rows={DataTableRows} />
);
export const SortableWithCustomDisplayAndSortMethods = () => {
return (
<div>
<DataTable
sortable
title="Load balancers"
description="Your organization's active load balancers."
headers={[
{ key: "name", value: "Name" },
{ key: "protocol", value: "Protocol" },
{ key: "port", value: "Port" },
{ key: "cost", value: "Cost", display: (cost) => cost + " €" },
{
key: "expireDate",
value: "Expire date",
display: (date) => new Date(date).toLocaleString(),
sort: (a, b) => new Date(a) - new Date(b),
},
]}
rows={[
{
id: "a",
name: "Load Balancer 3",
protocol: "HTTP",
port: 3000,
cost: 100,
expireDate: "2020-10-21",
},
{
id: "b",
name: "Load Balancer 1",
protocol: "HTTP",
port: 443,
cost: 200,
expireDate: "2020-09-10",
},
{
id: "c",
name: "Load Balancer 2",
protocol: "HTTP",
port: 80,
cost: 150,
expireDate: "2020-11-24",
},
{
id: "d",
name: "Load Balancer 6",
protocol: "HTTP",
port: 3000,
cost: 250,
expireDate: "2020-12-01",
},
{
id: "e",
name: "Load Balancer 4",
protocol: "HTTP",
port: 443,
cost: 550,
expireDate: "2021-03-21",
},
{
id: "f",
name: "Load Balancer 5",
protocol: "HTTP",
port: 80,
cost: 400,
expireDate: "2020-11-14",
},
]}
/>
</div>
);
};
export const SortableWithCustomDisplayAndSortMethods = () => (
<DataTable
sortable
title="Load balancers"
description="Your organization's active load balancers."
headers={[
{ key: "name", value: "Name" },
{ key: "protocol", value: "Protocol" },
{ key: "port", value: "Port" },
{ key: "cost", value: "Cost", display: (cost) => cost + " €" },
{
key: "expireDate",
value: "Expire date",
display: (date) => new Date(date).toLocaleString(),
sort: (a, b) => new Date(a) - new Date(b),
},
]}
rows={[
{
id: "a",
name: "Load Balancer 3",
protocol: "HTTP",
port: 3000,
cost: 100,
expireDate: "2020-10-21",
},
{
id: "b",
name: "Load Balancer 1",
protocol: "HTTP",
port: 443,
cost: 200,
expireDate: "2020-09-10",
},
{
id: "c",
name: "Load Balancer 2",
protocol: "HTTP",
port: 80,
cost: 150,
expireDate: "2020-11-24",
},
{
id: "d",
name: "Load Balancer 6",
protocol: "HTTP",
port: 3000,
cost: 250,
expireDate: "2020-12-01",
},
{
id: "e",
name: "Load Balancer 4",
protocol: "HTTP",
port: 443,
cost: 550,
expireDate: "2021-03-21",
},
{
id: "f",
name: "Load Balancer 5",
protocol: "HTTP",
port: 80,
cost: 400,
expireDate: "2020-11-14",
},
]}
/>
);

@@ -306,3 +268,3 @@ export const Selectable = () => {

return (
<div>
<>
<p>Selected rows: {selectedRowIds().join(", ")}</p>

@@ -316,3 +278,3 @@ <DataTable

/>
</div>
</>
);

@@ -343,13 +305,11 @@ };

return (
<div>
<DataTable
batchSelection
selectedRowIds={selectedRowIds()}
setSelectedRowIds={setSelectedRowIds}
headers={headers}
rows={rows}
>
<p>Selected rows: {selectedRowIds().join(", ")}</p>
</DataTable>
</div>
<DataTable
batchSelection
selectedRowIds={selectedRowIds()}
setSelectedRowIds={setSelectedRowIds}
headers={headers}
rows={rows}
>
<p>Selected rows: {selectedRowIds().join(", ")}</p>
</DataTable>
);

@@ -377,17 +337,15 @@ };

return (
<div>
<DataTable
batchSelection
selectedRowIds={selectedRowIds()}
setSelectedRowIds={setSelectedRowIds}
headers={headers}
rows={rows}
>
<Toolbar>
<ToolbarContent>
<p>Selected rows: {selectedRowIds().join(", ")}</p>
</ToolbarContent>
</Toolbar>
</DataTable>
</div>
<DataTable
batchSelection
selectedRowIds={selectedRowIds()}
setSelectedRowIds={setSelectedRowIds}
headers={headers}
rows={rows}
>
<Toolbar>
<ToolbarContent>
<p>Selected rows: {selectedRowIds().join(", ")}</p>
</ToolbarContent>
</Toolbar>
</DataTable>
);

@@ -400,60 +358,58 @@ };

return (
<div>
<DataTable
expandable
expandedRowIds={expandedRowIds()}
setExpandedRowIds={setExpandedRowIds}
headers={[
{ key: "name", value: "Name" },
{ key: "protocol", value: "Protocol" },
{ key: "port", value: "Port" },
{ key: "rule", value: "Rule" },
]}
rows={[
{
id: "a",
name: "Load Balancer 3",
protocol: "HTTP",
port: 3000,
rule: "Round robin",
},
{
id: "b",
name: "Load Balancer 1",
protocol: "HTTP",
port: 443,
rule: "Round robin",
},
{
id: "c",
name: "Load Balancer 2",
protocol: "HTTP",
port: 80,
rule: "DNS delegation",
},
{
id: "d",
name: "Load Balancer 6",
protocol: "HTTP",
port: 3000,
rule: "Round robin",
},
{
id: "e",
name: "Load Balancer 4",
protocol: "HTTP",
port: 443,
rule: "Round robin",
},
{
id: "f",
name: "Load Balancer 5",
protocol: "HTTP",
port: 80,
rule: "DNS delegation",
},
]}
renderExpandedRow={(row) => <pre>{JSON.stringify(row, null, 2)}</pre>}
/>
</div>
<DataTable
expandable
expandedRowIds={expandedRowIds()}
setExpandedRowIds={setExpandedRowIds}
headers={[
{ key: "name", value: "Name" },
{ key: "protocol", value: "Protocol" },
{ key: "port", value: "Port" },
{ key: "rule", value: "Rule" },
]}
rows={[
{
id: "a",
name: "Load Balancer 3",
protocol: "HTTP",
port: 3000,
rule: "Round robin",
},
{
id: "b",
name: "Load Balancer 1",
protocol: "HTTP",
port: 443,
rule: "Round robin",
},
{
id: "c",
name: "Load Balancer 2",
protocol: "HTTP",
port: 80,
rule: "DNS delegation",
},
{
id: "d",
name: "Load Balancer 6",
protocol: "HTTP",
port: 3000,
rule: "Round robin",
},
{
id: "e",
name: "Load Balancer 4",
protocol: "HTTP",
port: 443,
rule: "Round robin",
},
{
id: "f",
name: "Load Balancer 5",
protocol: "HTTP",
port: 80,
rule: "DNS delegation",
},
]}
renderExpandedRow={(row) => <pre>{JSON.stringify(row, null, 2)}</pre>}
/>
);

@@ -466,61 +422,64 @@ };

return (
<div>
<DataTable
batchExpansion
expandedRowIds={expandedRowIds()}
setExpandedRowIds={setExpandedRowIds}
headers={[
{ key: "name", value: "Name" },
{ key: "protocol", value: "Protocol" },
{ key: "port", value: "Port" },
{ key: "rule", value: "Rule" },
]}
rows={[
{
id: "a",
name: "Load Balancer 3",
protocol: "HTTP",
port: 3000,
rule: "Round robin",
},
{
id: "b",
name: "Load Balancer 1",
protocol: "HTTP",
port: 443,
rule: "Round robin",
},
{
id: "c",
name: "Load Balancer 2",
protocol: "HTTP",
port: 80,
rule: "DNS delegation",
},
{
id: "d",
name: "Load Balancer 6",
protocol: "HTTP",
port: 3000,
rule: "Round robin",
},
{
id: "e",
name: "Load Balancer 4",
protocol: "HTTP",
port: 443,
rule: "Round robin",
},
{
id: "f",
name: "Load Balancer 5",
protocol: "HTTP",
port: 80,
rule: "DNS delegation",
},
]}
renderExpandedRow={(row) => <pre>{JSON.stringify(row, null, 2)}</pre>}
></DataTable>
<p>{expandedRowIds().join(", ")}</p>
</div>
<DataTable
batchExpansion
expandedRowIds={expandedRowIds()}
setExpandedRowIds={setExpandedRowIds}
headers={[
{ key: "name", value: "Name" },
{ key: "protocol", value: "Protocol" },
{ key: "port", value: "Port" },
{ key: "rule", value: "Rule" },
]}
rows={[
{
id: "a",
name: "Load Balancer 3",
protocol: "HTTP",
port: 3000,
rule: "Round robin",
},
{
id: "b",
name: "Load Balancer 1",
protocol: "HTTP",
port: 443,
rule: "Round robin",
},
{
id: "c",
name: "Load Balancer 2",
protocol: "HTTP",
port: 80,
rule: "DNS delegation",
},
{
id: "d",
name: "Load Balancer 6",
protocol: "HTTP",
port: 3000,
rule: "Round robin",
},
{
id: "e",
name: "Load Balancer 4",
protocol: "HTTP",
port: 443,
rule: "Round robin",
},
{
id: "f",
name: "Load Balancer 5",
protocol: "HTTP",
port: 80,
rule: "DNS delegation",
},
]}
renderExpandedRow={(row) => <pre>{JSON.stringify(row, null, 2)}</pre>}
>
<Toolbar>
<ToolbarContent>
<p>{expandedRowIds().join(", ")}</p>
</ToolbarContent>
</Toolbar>
</DataTable>
);

@@ -538,17 +497,15 @@ };

return (
<div>
<DataTable
headers={[
{ key: "id", value: "OrderID" },
{ key: "price", value: "Price" },
]}
sortable
batchSelection
selectable
selectedRowIds={selectedRowIds()}
setSelectedRowIds={setSelectedRowIds}
zebra
rows={rows}
/>
</div>
<DataTable
headers={[
{ key: "id", value: "OrderID" },
{ key: "price", value: "Price" },
]}
sortable
batchSelection
selectable
selectedRowIds={selectedRowIds()}
setSelectedRowIds={setSelectedRowIds}
zebra
rows={rows}
/>
);

@@ -578,7 +535,7 @@ };

return (
<div>
<>
<p>Selected ids: {selectedIds().join(", ")}</p>
<OptDataTable sortable batchSelection selectable zebra model={model} />
</div>
</>
);
};

15

src/components/index.ts

@@ -11,4 +11,13 @@ export { Button } from "./Button/Button";

export { Header } from "./UIShell/GlobalHeader/Header";
export { HeaderNav } from "./UIShell/GlobalHeader/HeaderNav";
export { HeaderNavItem } from "./UIShell/GlobalHeader/HeaderNavItem";
export { HeaderGlobalAction } from "./UIShell/HeaderGlobalAction";
export { HeaderUtilities } from "./UIShell/GlobalHeader/HeaderUtilities";
export { HamburgerMenu } from "./UIShell/SideNav/HamburgerMenu";
export { SideNav } from "./UIShell/SideNav/SideNav";
export { SideNavIcon } from "./UIShell/SideNav/SideNavIcon";
export { SideNavItem } from "./UIShell/SideNav/SideNavItem";
export { SideNavItems } from "./UIShell/SideNav/SideNavItems";
export { SideNavLink } from "./UIShell/SideNav/SideNavLink";
export { SideNavLinkText } from "./UIShell/SideNav/SideNavLinkText";

@@ -43,2 +52,3 @@ export { PasswordInput } from "./TextInput/PasswordInput";

export { Tile } from "./Tile/Tile";
export { ClickableTile } from "./Tile/ClickableTile";

@@ -54,1 +64,6 @@ export { NotificationActionButton } from "./Notification/NotificationActionButton";

} from "./Notification/Notification";
export { Icon } from "./Icon/Icon";
export { IconSkeleton } from "./Icon/IconSkeleton";
export { Link } from "./Link/Link";

22

src/components/InlineLoading/InlineLoading.stories.js

@@ -8,16 +8,10 @@ export default {

export const Default = () => (
<div>
<InlineLoading />
</div>
);
export const Default = () => <InlineLoading />;
export const WithDescription = () => (
<div>
<InlineLoading description="Loading metrics..." />
</div>
<InlineLoading description="Loading metrics..." />
);
export const StatusStates = () => (
<div>
<>
<InlineLoading status="active" description="Submitting..." />

@@ -27,3 +21,3 @@ <InlineLoading status="inactive" description="Cancelling..." />

<InlineLoading status="error" description="An error occurred" />
</div>
</>
);

@@ -34,12 +28,12 @@

return (
<div>
<div>Fires after 10s: {fired() ? "fired" : "waiting..."}</div>
<>
<div>Fires after 3s: {fired() ? "fired" : "waiting..."}</div>
<InlineLoading
status="finished"
description="Success"
successDelay={10000}
successDelay={3000}
onSuccess={() => fire(true)}
/>
</div>
</>
);
};

24

src/components/Loading/Loading.stories.js

@@ -7,21 +7,5 @@ export default {

export const default_with_overlay = () => (
<div>
<Loading />
</div>
);
export const no_overlay = () => (
<div>
<Loading withOverlay={false} />
</div>
);
export const small_size = () => (
<div>
<Loading withOverlay={false} small />
</div>
);
export const inactive = () => (
<div>
<Loading active={false} />
</div>
);
export const default_with_overlay = () => <Loading />;
export const no_overlay = () => <Loading withOverlay={false} />;
export const small_size = () => <Loading withOverlay={false} small />;
export const inactive = () => <Loading active={false} />;

42

src/components/Notification/InlineNotification.stories.js

@@ -8,32 +8,24 @@ export default {

export const Default_error = () => (
<div>
<InlineNotification />
</div>
);
export const Default_error = () => <InlineNotification />;
export const Hidden_close_button = () => (
<div>
<InlineNotification
hideCloseButton
kind="warning"
title="Upcoming scheduled maintenance"
/>
</div>
<InlineNotification
hideCloseButton
kind="warning"
title="Upcoming scheduled maintenance"
/>
);
export const With_actions = () => (
<div>
<InlineNotification
kind="warning"
title="Upcoming scheduled maintenance"
renderActions={
<NotificationActionButton>Learn more</NotificationActionButton>
}
/>
</div>
<InlineNotification
kind="warning"
title="Upcoming scheduled maintenance"
renderActions={
<NotificationActionButton>Learn more</NotificationActionButton>
}
/>
);
export const Notification_variants = () => (
<div>
<>
<InlineNotification kind="error" />

@@ -45,7 +37,7 @@ <InlineNotification kind="info" />

<InlineNotification kind="warning-alt" />
</div>
</>
);
export const Low_contrast = () => (
<div>
<>
<InlineNotification lowContrast kind="error" />

@@ -57,3 +49,3 @@ <InlineNotification lowContrast kind="info" />

<InlineNotification lowContrast kind="warning-alt" />
</div>
</>
);

26

src/components/Notification/ToastNotification.stories.js

@@ -8,20 +8,14 @@ export default {

export const Default_error = () => (
<div>
<ToastNotification />
</div>
);
export const Default_error = () => <ToastNotification />;
export const Hidden_close_button = () => (
<div>
<ToastNotification
hideCloseButton
kind="warning"
title="Upcoming scheduled maintenance"
/>
</div>
<ToastNotification
hideCloseButton
kind="warning"
title="Upcoming scheduled maintenance"
/>
);
export const Notification_variants = () => (
<div>
<>
<ToastNotification kind="error" />

@@ -33,7 +27,7 @@ <ToastNotification kind="info" />

<ToastNotification kind="warning-alt" />
</div>
</>
);
export const Low_contrast = () => (
<div>
<>
<ToastNotification lowContrast kind="error" />

@@ -45,3 +39,3 @@ <ToastNotification lowContrast kind="info" />

<ToastNotification lowContrast kind="warning-alt" />
</div>
</>
);

12

src/components/Tile/Tile.stories.js

@@ -7,12 +7,4 @@ export default {

export const Default = () => (
<div>
<Tile>Content</Tile>
</div>
);
export const Default = () => <Tile>Content</Tile>;
export const LightVariant = () => (
<div>
<Tile light>Content</Tile>
</div>
);
export const LightVariant = () => <Tile light>Content</Tile>;
src/stories/index.stories.js
dist/index.js

Sorry, the diff of this file is too big to display

src/components/InlineLoading/InlineLoading.tsx

Sorry, the diff of this file is not supported yet

src/components/Modal/Modal.tsx

Sorry, the diff of this file is not supported yet

src/components/Theme/Theme.tsx

Sorry, the diff of this file is not supported yet

src/components/UIShell/Content.tsx

Sorry, the diff of this file is not supported yet

src/components/UIShell/GlobalHeader/Header.tsx

Sorry, the diff of this file is not supported yet

src/components/UIShell/SideNav/HamburgerMenu.tsx

Sorry, the diff of this file is not supported yet