mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-14 18:01:06 +00:00
Code Issues Projects Releases Packages Wiki Activity

refactor(skeleton-text): rename lineCount

Browse source
This commit is contained in:
Eric Liu 2019-12-29 19:08:26 -08:00
commit 86a65c8ff8
2 changed files with 9 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/components/SkeletonText/SkeletonText.stories.js
View file

@ -8,7 +8,7 @@ export const Default = () => ({
props: {
heading: boolean('Skeleton text at a larger size (heading)'),
paragraph: boolean('Use multiple lines of text (paragraph)'),
lineCount: number('The number of lines in a paragraph (lineCount)', 3),
lines: number('The number of lines in a paragraph (lines)', 3),
width: select(
'Width (in px or %) of single line of text or max-width of paragraph lines (width)',
{ '100%': '100%', '250px': '250px' },

15
src/components/SkeletonText/SkeletonText.svelte
View file

@ -2,7 +2,7 @@
let className = undefined;
export { className as class };
export let paragraph = false;
export let lineCount = 3;
export let lines = 3;
export let width = '100%';
export let heading = false;
export let style = undefined;
@ -10,26 +10,27 @@
import { cx } from '../../lib';
const randoms = [0.973051493507435, 0.15334737213558558, 0.5671034553053769];
let lines = [];
let rows = [];
$: widthNum = parseInt(width, 10);
$: widthPx = width.includes('px');
$: widthPercent = width.includes('%');
$: if (paragraph) {
for (let i = 0; i < lineCount; i++) {
for (let i = 0; i < lines; i++) {
const min = widthPx ? widthNum - 75 : 0;
const max = widthPx ? widthNum : 75;
const randomWidth = Math.floor(randoms[i % 3] * (max - min + 1)) + min + 'px';
lines = [...lines, { width: widthPx ? randomWidth : `calc(${width} - ${randomWidth})` }];
rows = [...rows, { width: widthPx ? randomWidth : `calc(${width} - ${randomWidth})` }];
}
}
</script>
{#if paragraph}
<div on:click on:mouseover on:mouseenter on:mouseleave {style}>
{#each lines as { width }}
<div on:click on:mouseover on:mouseenter on:mouseleave class={className} {style}>
{#each rows as { width }, i (width)}
<p
class={cx('--skeleton__text', heading && '--skeleton__heading', className)}
class={cx('--skeleton__text', heading && '--skeleton__heading')}
style={`width: ${width};`} />
{/each}
</div>