Skip to content

Commit

Permalink
xola#150 Skeleton with an icon so we can show placeholder images
Browse files Browse the repository at this point in the history
  • Loading branch information
rushi committed Aug 9, 2022
1 parent e2d3caf commit b4e95e8
Show file tree
Hide file tree
Showing 3 changed files with 36 additions and 8 deletions.
9 changes: 7 additions & 2 deletions src/components/Skeleton.jsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import clsx from "clsx";
import { range } from "lodash";
import PropTypes from "prop-types";
import React from "react";
import { range, uniqueId } from "lodash";

export const Skeleton = ({ height = "h-full", children, className, ...rest }) => {
return (
Expand Down Expand Up @@ -32,7 +32,7 @@ Skeleton.propTypes = {
children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
};

export const SkeletonList = ({ grid = [3, 2], classNames = {} }) => {
export const SkeletonGrid = ({ grid = [3, 2], classNames = {} }) => {
const [horizontalCount, verticalCount] = grid;
const horizontalClasses = `grid grid-cols-${horizontalCount} gap-x-2`;
const verticalClasses = `grid grid-rows-${verticalCount} gap-y-2`;
Expand All @@ -59,3 +59,8 @@ const SkeletonPerCount = ({ count, className }) => {
)
);
};

export const SkeletonIcon = ({ icon, classNames = { skeleton: "h-28 w-28", icon: "h-1/2 w-1/2 text-gray" } }) => {
const adjustedIcon = React.cloneElement(icon, { className: classNames.icon });
return <Skeleton className={classNames.skeleton}>{adjustedIcon}</Skeleton>;
};
2 changes: 1 addition & 1 deletion src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ export { Label } from "./components/Forms/Label";
export { RangeSlider } from "./components/Forms/RangeSlider";
export { HeaderToolbar } from "./components/HeaderToolbar";
export { Tabs } from "./components/Tabs";
export { Skeleton, SkeletonList } from "./components/Skeleton";
export { Skeleton, SkeletonGrid, SkeletonIcon } from "./components/Skeleton";
export { Drawer } from "./components/Drawer";
export { Key } from "./components/Key";
export { Login } from "./components/Screens/Login";
Expand Down
33 changes: 28 additions & 5 deletions src/stories/DataDisplay/Skeleton.stories.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from "react";
import { Skeleton, SkeletonList } from "../..";
import { Skeleton, SkeletonGrid, SkeletonIcon, ImageIcon, BarGraphIcon, MountainIcon } from "../..";

const SkeletonStories = {
title: "Data Display/Skeleton",
Expand Down Expand Up @@ -30,12 +30,35 @@ export const MultipleSkeletons = () => {
<div className="space-y-5">
<p>Quickly create multiple Skeleton children</p>
<div className="space-y-2">
<p>A grid of <code>3x2</code> by passing in <code>grid=&#123;[3x2]&#125;</code></p>
<SkeletonList grid={[3, 2]} />
<p>
A grid of <code>3x2</code> by passing in <code>grid=&#123;[3x2]&#125;</code>
</p>
<SkeletonGrid grid={[3, 2]} />
</div>
<div className="space-y-2">
<p>A grid of <code>2x4</code> by passing in <code>grid=&#123;[2x4]&#125;</code></p>
<SkeletonList grid={[2, 4]} />
<p>
A grid of <code>2x4</code> by passing in <code>grid=&#123;[2x4]&#125;</code>
</p>
<SkeletonGrid grid={[2, 4]} />
</div>
</div>
);
};

export const WithIcons = () => {
return (
<div className="flex flex-row space-x-10 text-gray-dark ">
<div>
Generic Image
<SkeletonIcon icon={<ImageIcon />} />
</div>
<div>
Experience Image
<SkeletonIcon icon={<MountainIcon />} />
</div>
<div>
Bar Graph
<SkeletonIcon icon={<BarGraphIcon />} />
</div>
</div>
);
Expand Down

0 comments on commit b4e95e8

Please sign in to comment.