Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat #159 - Add ColoredDot comp and integrate into Table #161

Merged
merged 8 commits into from
Dec 3, 2020
Merged

feat #159 - Add ColoredDot comp and integrate into Table #161

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
7060e9c
feat #159 - Add IngestionStatusDot comp & add to Table
sam-dassana Dec 1, 2020
a7be047
feat #159 - Add stories
sam-dassana Dec 1, 2020
485bcc9
feat #159 - Add Tooltip
sam-dassana Dec 1, 2020
c300183
feat #159 - Add tests
sam-dassana Dec 2, 2020
409b8dd
feat #159 - Fix failing snapshots
sam-dassana Dec 2, 2020
44feb41
feat #159 - Refactor IngestionStatusDot --> ColoredDot
sam-dassana Dec 3, 2020
df082f0
feat #159 - Add tests
sam-dassana Dec 3, 2020
6200e83
feat #159 - Add Table pagination prop
sam-dassana Dec 3, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@dassana-io/web-components",
"version": "0.7.4",
"version": "0.7.5",
"publishConfig": {
"registry": "https://npm.pkg.github.com/dassana-io"
},
Expand Down
20 changes: 19 additions & 1 deletion src/__mocks__/table_mock_data.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { Status } from 'components'
import {
ColumnFormats,
ColumnType,
Expand All @@ -6,14 +7,24 @@ import {
} from '../components/Table'

const { component, number, string } = ColumnTypes
const { none, byte, date, icon, link, toggle, tag } = ColumnFormats
const {
none,
byte,
date,
icon,
ingestionStatusDot,
link,
toggle,
tag
} = ColumnFormats

export interface Data {
byte: number
date: number
icon: string
icon_key: string
sam-dassana marked this conversation as resolved.
Show resolved Hide resolved
id: number
ingestion_status: Status
sam-dassana marked this conversation as resolved.
Show resolved Hide resolved
link: string
number: number
string: string
Expand Down Expand Up @@ -92,6 +103,12 @@ const columns: ColumnType[] = [
},
title: 'Component - Icon',
type: component
},
{
dataIndex: 'ingestion_status',
format: ingestionStatusDot,
title: 'Ingestion Status',
type: component
}
]

Expand All @@ -102,6 +119,7 @@ const data: Data[] = [
icon: 'test',
icon_key: 'dassana',
id: 0,
ingestion_status: Status.OK,
link: 'test',
number: 0,
string: 'Dassana',
Expand Down
114 changes: 82 additions & 32 deletions src/__snapshots__/storybook.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -210,12 +210,62 @@ exports[`Storyshots Icon Predefined 1`] = `
</div>
`;

exports[`Storyshots IngestionStatusDot All 1`] = `
<div
className="light storyWrapper-0-2-2"
>
<div
className="mainContainer-0-2-6"
>
<p>
Hover over colored dot to show tooltip.
</p>
<div
className="container-0-2-5"
>
<span
className="statusDot-0-2-10 hasIssues-0-2-8 statusDot-0-2-7"
onMouseEnter={[Function]}
onMouseLeave={[Function]}
/>
HAS_ISSUES
</div>
<div
className="container-0-2-5"
>
<span
className="statusDot-0-2-10 needsConfig-0-2-9 statusDot-0-2-7"
onMouseEnter={[Function]}
onMouseLeave={[Function]}
/>
NEEDS_CONFIG
</div>
<div
className="container-0-2-5"
>
<span
className="statusDot-0-2-10 statusDot-0-2-7"
/>
OK
</div>
<div
className="container-0-2-5"
>
<span
className="statusDot-0-2-10 statusDot-0-2-7"
/>
DISABLED
</div>
</div>
</div>
`;

exports[`Storyshots Input Default 1`] = `
<div
className="light storyWrapper-0-2-2"
>
<input
className="ant-input container-0-2-5 container-d0-0-2-8"
className="ant-input container-0-2-11 container-d0-0-2-14"
data-test="input"
disabled={false}
onBlur={[Function]}
Expand All @@ -234,7 +284,7 @@ exports[`Storyshots Input Error 1`] = `
className="light storyWrapper-0-2-2"
>
<input
className="ant-input container-0-2-5 container-d5-0-2-14 error-0-2-6"
className="ant-input container-0-2-11 container-d5-0-2-20 error-0-2-12"
data-test="input"
disabled={false}
onBlur={[Function]}
Expand All @@ -253,7 +303,7 @@ exports[`Storyshots Input Full Width 1`] = `
className="light storyWrapper-0-2-2"
>
<input
className="ant-input container-0-2-5 container-d4-0-2-13"
className="ant-input container-0-2-11 container-d4-0-2-19"
data-test="input"
disabled={false}
onBlur={[Function]}
Expand All @@ -272,13 +322,13 @@ exports[`Storyshots Input Loading 1`] = `
className="light storyWrapper-0-2-2"
>
<div
className="container-0-2-5 container-d3-0-2-11"
className="container-0-2-11 container-d3-0-2-17"
>
<div
className="inputSkeleton-0-2-7"
className="inputSkeleton-0-2-13"
>
<span
className="container-0-2-3 container-d1-0-2-12"
className="container-0-2-3 container-d1-0-2-18"
>

</span>
Expand All @@ -292,7 +342,7 @@ exports[`Storyshots Input Placeholder 1`] = `
className="light storyWrapper-0-2-2"
>
<input
className="ant-input container-0-2-5 container-d1-0-2-9"
className="ant-input container-0-2-11 container-d1-0-2-15"
data-test="input"
disabled={false}
onBlur={[Function]}
Expand Down Expand Up @@ -592,31 +642,31 @@ exports[`Storyshots Radio Group Loading 1`] = `
className="light storyWrapper-0-2-2"
>
<div
className="container-0-2-16"
className="container-0-2-22"
>
<div
className="skeletonButton-0-2-18"
className="skeletonButton-0-2-24"
>
<span
className="container-0-2-3 container-d2-0-2-19 skeleton-0-2-17"
className="container-0-2-3 container-d2-0-2-25 skeleton-0-2-23"
>

</span>
</div>
<div
className="skeletonButton-0-2-18"
className="skeletonButton-0-2-24"
>
<span
className="container-0-2-3 container-d3-0-2-20 skeleton-0-2-17"
className="container-0-2-3 container-d3-0-2-26 skeleton-0-2-23"
>

</span>
</div>
<div
className="skeletonButton-0-2-18"
className="skeletonButton-0-2-24"
>
<span
className="container-0-2-3 container-d4-0-2-21 skeleton-0-2-17"
className="container-0-2-3 container-d4-0-2-27 skeleton-0-2-23"
>

</span>
Expand Down Expand Up @@ -719,10 +769,10 @@ exports[`Storyshots Select Default 1`] = `
className="light storyWrapper-0-2-2"
>
<div
className="container-0-2-23 container-d0-0-2-27"
className="container-0-2-29 container-d0-0-2-33"
>
<div
className="ant-select dropdown-0-2-24 ant-select-single ant-select-show-arrow"
className="ant-select dropdown-0-2-30 ant-select-single ant-select-show-arrow"
data-test="select"
onBlur={[Function]}
onFocus={[Function]}
Expand Down Expand Up @@ -815,10 +865,10 @@ exports[`Storyshots Select Full Width 1`] = `
className="light storyWrapper-0-2-2"
>
<div
className="container-0-2-23 container-d2-0-2-29"
className="container-0-2-29 container-d2-0-2-35"
>
<div
className="ant-select dropdown-0-2-24 ant-select-single ant-select-show-arrow"
className="ant-select dropdown-0-2-30 ant-select-single ant-select-show-arrow"
data-test="select"
onBlur={[Function]}
onFocus={[Function]}
Expand Down Expand Up @@ -865,7 +915,7 @@ exports[`Storyshots Select Full Width 1`] = `
className="ant-select-selection-item"
>
<div
className="option-0-2-26"
className="option-0-2-32"
>
<span>
Lorem
Expand Down Expand Up @@ -916,10 +966,10 @@ exports[`Storyshots Select Icon 1`] = `
className="light storyWrapper-0-2-2"
>
<div
className="container-0-2-23 container-d1-0-2-28"
className="container-0-2-29 container-d1-0-2-34"
>
<div
className="ant-select dropdown-0-2-24 ant-select-single ant-select-show-arrow"
className="ant-select dropdown-0-2-30 ant-select-single ant-select-show-arrow"
data-test="select"
onBlur={[Function]}
onFocus={[Function]}
Expand Down Expand Up @@ -966,10 +1016,10 @@ exports[`Storyshots Select Icon 1`] = `
className="ant-select-selection-item"
>
<div
className="option-0-2-26"
className="option-0-2-32"
>
<span
className="icon-0-2-25"
className="icon-0-2-31"
>
<svg
className=""
Expand Down Expand Up @@ -1029,10 +1079,10 @@ exports[`Storyshots Select Search 1`] = `
className="light storyWrapper-0-2-2"
>
<div
className="container-0-2-23 container-d3-0-2-30"
className="container-0-2-29 container-d3-0-2-36"
>
<div
className="ant-select dropdown-0-2-24 ant-select-single ant-select-show-arrow ant-select-show-search"
className="ant-select dropdown-0-2-30 ant-select-single ant-select-show-arrow ant-select-show-search"
data-test="select"
onBlur={[Function]}
onFocus={[Function]}
Expand Down Expand Up @@ -1125,7 +1175,7 @@ exports[`Storyshots Skeleton Circle 1`] = `
className="light storyWrapper-0-2-2"
>
<span
className="container-0-2-3 container-d6-0-2-32"
className="container-0-2-3 container-d6-0-2-38"
>

</span>
Expand All @@ -1137,27 +1187,27 @@ exports[`Storyshots Skeleton Count 1`] = `
className="light storyWrapper-0-2-2"
>
<span
className="container-0-2-3 container-d7-0-2-33"
className="container-0-2-3 container-d7-0-2-39"
>

</span>
<span
className="container-0-2-3 container-d7-0-2-33"
className="container-0-2-3 container-d7-0-2-39"
>

</span>
<span
className="container-0-2-3 container-d7-0-2-33"
className="container-0-2-3 container-d7-0-2-39"
>

</span>
<span
className="container-0-2-3 container-d7-0-2-33"
className="container-0-2-3 container-d7-0-2-39"
>

</span>
<span
className="container-0-2-3 container-d7-0-2-33"
className="container-0-2-3 container-d7-0-2-39"
>

</span>
Expand All @@ -1169,7 +1219,7 @@ exports[`Storyshots Skeleton Default 1`] = `
className="light storyWrapper-0-2-2"
>
<span
className="container-0-2-3 container-d5-0-2-31"
className="container-0-2-3 container-d5-0-2-37"
>

</span>
Expand Down
Loading