Skip to content

Commit

Permalink
Trial Bar: Adds storybook snapshot
Browse files Browse the repository at this point in the history
  • Loading branch information
@pulkonet
pulkonet committed Jun 12, 2019
1 parent b42f8b5 commit 52ab68c
Show file tree
Hide file tree
Showing 6 changed files with 517 additions and 244 deletions.
1 change: 1 addition & 0 deletions components/story-based-tests.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,7 @@ export SetupAssistant from '../components/setup-assistant/__docs__/storybook-sto
// export Tabs from '../components/tabs/__docs__/storybook-stories';
// export Textarea from '../components/textarea/__docs__/storybook-stories';
// export Toast from '../components/toast/__docs__/storybook-stories';
export TrialBar from '../components/trial-bar/__docs__/storybook-stories';
export Tooltip from '../components/tooltip/__docs__/storybook-stories';
export Tree from '../components/tree/__docs__/storybook-stories';
// export VerticalNavigation from '../components/vertical-navigation/__docs__/storybook-stories';
Expand Down
300 changes: 58 additions & 242 deletions components/trial-bar/__docs__/__snapshots__/storybook-stories.storyshot
View file
Original file line number Diff line number Diff line change
@@ -1,273 +1,89 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`DOM snapshots SLDSProgressBar Color 1`] = `
exports[`DOM snapshots SLDSTrialBar Default 1`] = `
<div
className="slds-p-around_medium"
>
<div>
<span>
Color: success
</span>
<div
id="progress-bar-success"
className="slds-trial-header slds-grid"
>

<div
className="slds-progress-bar"
className="slds-grid"
>
<span
className="slds-progress-bar__value slds-progress-bar__value_success"
style={
Object {
"width": "75%",
}
}
>
<span
className="slds-assistive-text"
>
Progress:
75%
</span>
</span>
</div>
</div>
</div>
</div>
`;

exports[`DOM snapshots SLDSProgressBar Default 1`] = `
<div
className="slds-p-around_medium"
>
<div>
<div
id="progress-bar"
>

<div
className="slds-progress-bar"
>
<span
className="slds-progress-bar__value"
<button
className="slds-button slds-button_inverse slds-m-right_small"
disabled={false}
onClick={[Function]}
style={
Object {
"width": "75%",
"border": 0,
"padding": 0,
}
}
type="button"
>
<span
className="slds-assistive-text"
>
Progress:
75%
</span>
</span>
</div>
</div>
</div>
</div>
`;

exports[`DOM snapshots SLDSProgressBar Descriptive 1`] = `
<div
className="slds-p-around_medium"
>
<div>
<div
id="setup-progress-bar"
>
<div
className="slds-grid slds-grid_align-spread slds-p-bottom_x-small"
id="progress-bar-label-id-4"
>
<span>
Einstein Setup Assistant
</span>
<span
aria-hidden="true"
Take the salesforce tour
</button>
<div
className="slds-dropdown-trigger slds-dropdown-trigger_click"
id="dropdown"
onClick={[Function]}
onFocus={null}
onKeyDown={[Function]}
onMouseEnter={null}
onMouseLeave={null}
>
<strong>
90
%
Complete
</strong>
</span>
</div>
<div
className="slds-progress-bar"
>
<span
className="slds-progress-bar__value"
style={
Object {
"width": "90%",
<button
aria-expanded={false}
aria-haspopup={true}
className="slds-button slds-button_inverse ignore-click-dropdown"
disabled={false}
onClick={[Function]}
style={
Object {
"border": 0,
"height": "100%",
"padding": 0,
}
}
}
>
<span
className="slds-assistive-text"
tabIndex="0"
type="button"
>
Progress:
90%
</span>
</span>
<svg
aria-hidden="true"
className="slds-button__icon slds-button__icon_left"
>
<use
xlinkHref="/assets/icons/utility-sprite/svg/symbols.svg#right"
/>
</svg>
Choose your tour
</button>
</div>
</div>
</div>
</div>
</div>
`;

exports[`DOM snapshots SLDSProgressBar Radius 1`] = `
<div
className="slds-p-around_medium"
>
<div>
<span>
Radius: circular
</span>
<div
id="progress-bar-circular"
>

<div
className="slds-progress-bar slds-progress-bar_circular"
className="slds-grid slds-grid_vertical-align-center slds-col_bump-left"
>
<span
className="slds-progress-bar__value"
style={
Object {
"width": "75%",
}
}
className="slds-box slds-box_xx-small slds-theme_default"
>
<span
className="slds-assistive-text"
>
Progress:
75%
</span>
30
</span>
</div>
</div>
</div>
</div>
`;

exports[`DOM snapshots SLDSProgressBar Thickness 1`] = `
<div
className="slds-p-around_medium"
>
<div>
<span>
Thickness: x-small
</span>
<div
id="progress-bar-x-small"
>

<div
className="slds-progress-bar slds-progress-bar_x-small"
>
<span
className="slds-progress-bar__value"
style={
Object {
"width": "90%",
}
}
className="slds-m-horizontal_x-small"
>
<span
className="slds-assistive-text"
>
Progress:
90%
</span>
days
left in trial
</span>
</div>
</div>
<hr />
<span>
Thickness: small
</span>
<div
id="progress-bar-small"
>

<div
className="slds-progress-bar slds-progress-bar_small"
>
<span
className="slds-progress-bar__value"
style={
Object {
"width": "75%",
}
}
>
<span
className="slds-assistive-text"
>
Progress:
75%
</span>
</span>
</div>
</div>
<hr />
<span>
Thickness: medium
</span>
<div
id="progress-bar-medium"
>

<div
className="slds-progress-bar slds-progress-bar_medium"
>
<span
className="slds-progress-bar__value"
style={
Object {
"width": "50%",
}
}
<button
className="slds-button slds-button_success"
disabled={false}
onClick={[Function]}
type="button"
>
<span
className="slds-assistive-text"
>
Progress:
50%
</span>
</span>
</div>
</div>
<hr />
<span>
Thickness: large
</span>
<div
id="progress-bar-large"
>

<div
className="slds-progress-bar slds-progress-bar_large"
>
<span
className="slds-progress-bar__value"
style={
Object {
"width": "25%",
}
}
>
<span
className="slds-assistive-text"
>
Progress:
25%
</span>
</span>
Subscribe Now
</button>
</div>
</div>
</div>
Expand Down
Loading

0 comments on commit 52ab68c

Please sign in to comment.