-
Notifications
You must be signed in to change notification settings - Fork 1.8k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'main' into 9283-multiselect-vrt
- Loading branch information
Showing
10 changed files
with
276 additions
and
17 deletions.
There are no files selected for viewing
70 changes: 70 additions & 0 deletions
70
packages/carbon-react/src/components/Skeleton/Skeleton.stories.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,70 @@ | ||
import React from 'react'; | ||
import { SkeletonPlaceholder, SkeletonText } from 'carbon-components-react'; | ||
import { withKnobs, select, boolean, number } from '@storybook/addon-knobs'; | ||
|
||
const classNames = { | ||
'my--skeleton__placeholder--small': 'my--skeleton__placeholder--small', | ||
'my--skeleton__placeholder--medium': 'my--skeleton__placeholder--medium', | ||
'my--skeleton__placeholder--large': 'my--skeleton__placeholder--large', | ||
}; | ||
|
||
const placeholderProps = () => ({ | ||
className: select('Classes with different sizes', classNames), | ||
}); | ||
|
||
const widths = { | ||
'100%': '100%', | ||
'250px': '250px', | ||
}; | ||
|
||
const textProps = () => ({ | ||
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), | ||
width: select( | ||
'Width (in px or %) of single line of text or max-width of paragraph lines (width)', | ||
widths, | ||
'100%' | ||
), | ||
}); | ||
|
||
export default { | ||
title: 'Components/Skeleton', | ||
decorators: [withKnobs], | ||
}; | ||
|
||
export const _SkeletonPlaceholder = () => { | ||
return ( | ||
<div style={{ height: '250px', width: '250px' }}> | ||
<style | ||
dangerouslySetInnerHTML={{ | ||
__html: ` | ||
.my--skeleton__placeholder--small { | ||
height: 100px; | ||
width: 100px; | ||
} | ||
.my--skeleton__placeholder--medium { | ||
height: 150px; | ||
width: 150px; | ||
} | ||
.my--skeleton__placeholder--large { | ||
height: 250px; | ||
width: 250px; | ||
} | ||
`, | ||
}} | ||
/> | ||
<SkeletonPlaceholder {...placeholderProps()} /> | ||
</div> | ||
); | ||
}; | ||
|
||
export const _SkeletonText = () => { | ||
return ( | ||
<div style={{ width: '300px' }}> | ||
<SkeletonText {...textProps()} /> | ||
</div> | ||
); | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,8 @@ | ||
/** | ||
* Copyright IBM Corp. 2016, 2018 | ||
* | ||
* This source code is licensed under the Apache-2.0 license found in the | ||
* LICENSE file in the root directory of this source tree. | ||
*/ | ||
|
||
export { SkeletonPlaceholder, SkeletonText } from 'carbon-components-react'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
101 changes: 101 additions & 0 deletions
101
packages/react/src/components/Dropdown/Dropdown-test.e2e.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,101 @@ | ||
/** | ||
* Copyright IBM Corp. 2016, 2018 | ||
* | ||
* This source code is licensed under the Apache-2.0 license found in the | ||
* LICENSE file in the root directory of this source tree. | ||
*/ | ||
|
||
import 'carbon-components/scss/components/dropdown/_dropdown.scss'; | ||
|
||
import React from 'react'; | ||
import { mount } from '@cypress/react'; | ||
import { generateItems, generateGenericItem } from '../ListBox/test-helpers'; | ||
import Dropdown from '../Dropdown'; | ||
import DropdownSkeleton from '../Dropdown/Dropdown.Skeleton'; | ||
|
||
describe('Dropdown', () => { | ||
beforeEach(() => { | ||
const items = generateItems(5, generateGenericItem); | ||
const label = 'Dropdown menu options'; | ||
const style = { marginBottom: '1rem' }; | ||
mount( | ||
<> | ||
<Dropdown | ||
style={{ marginBottom: '14rem' }} | ||
items={items} | ||
label={label} | ||
/> | ||
<Dropdown style={style} items={items} label={label} size="sm" /> | ||
<Dropdown style={style} items={items} label={label} size="md" /> | ||
<Dropdown style={style} items={items} label={label} size="lg" /> | ||
<Dropdown style={style} items={items} label={label} size="xl" /> | ||
<Dropdown style={style} items={items} label={label} disabled /> | ||
<Dropdown | ||
style={style} | ||
items={items} | ||
label={label} | ||
helperText="This is helper text" | ||
/> | ||
<Dropdown style={style} items={items} label={label} warn /> | ||
<Dropdown | ||
style={style} | ||
items={items} | ||
label={label} | ||
warn | ||
warnText="This is warn text" | ||
/> | ||
<Dropdown | ||
style={style} | ||
items={items} | ||
label={label} | ||
invalid | ||
invalidText="This is invalid text" | ||
/> | ||
<Dropdown style={style} items={items} label={label} light /> | ||
<Dropdown | ||
style={style} | ||
items={items} | ||
label={label} | ||
light | ||
invalid | ||
invalidText="This is invalid text" | ||
/> | ||
<Dropdown style={style} items={items} label={label} type="inline" /> | ||
<DropdownSkeleton style={style} size="sm" /> | ||
<DropdownSkeleton style={style} size="md" /> | ||
<DropdownSkeleton style={style} size="lg" /> | ||
<DropdownSkeleton style={style} size="xl" /> | ||
</> | ||
); | ||
}); | ||
|
||
it('should render', () => { | ||
cy.findAllByText(/Dropdown menu options/) | ||
.should('have.length', 13) | ||
.last() | ||
.should('be.visible'); | ||
|
||
// snapshots should always be taken _after_ an assertion that | ||
// a element/component should be visible. This is to ensure | ||
// the DOM has settled and the element has fully loaded. | ||
cy.percySnapshot(); | ||
}); | ||
|
||
it('should render listbox when clicked', () => { | ||
cy.findAllByText(/Dropdown menu options/) | ||
.first() | ||
.click(); | ||
|
||
cy.findAllByText(/Item 0/) | ||
.first() | ||
.should('be.visible'); | ||
cy.findAllByText(/Item 4/) | ||
.first() | ||
.should('be.visible'); | ||
|
||
// snapshots should always be taken _after_ an assertion that | ||
// a element/component should be visible. This is to ensure | ||
// the DOM has settled and the element has fully loaded. | ||
cy.percySnapshot(); | ||
}); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
26 changes: 26 additions & 0 deletions
26
packages/styles/scss/components/__tests__/skeleton-test.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,26 @@ | ||
/** | ||
* Copyright IBM Corp. 2018, 2018 | ||
* | ||
* This source code is licensed under the Apache-2.0 license found in the | ||
* LICENSE file in the root directory of this source tree. | ||
* | ||
* @jest-environment node | ||
*/ | ||
|
||
'use strict'; | ||
|
||
const { SassRenderer } = require('@carbon/test-utils/scss'); | ||
|
||
const { render } = SassRenderer.create(__dirname); | ||
|
||
describe('scss/components/skeleton-styles', () => { | ||
test('Public API', async () => { | ||
const { unwrap } = await render(` | ||
@use 'sass:meta'; | ||
@use '../skeleton-styles'; | ||
$_: get('mixin', meta.mixin-exists('skeleton-styles', 'skeleton-styles')); | ||
`); | ||
expect(unwrap('mixin')).toBe(true); | ||
}); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
11 changes: 11 additions & 0 deletions
11
packages/styles/scss/components/skeleton-styles/_index.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
// | ||
// Copyright IBM Corp. 2018, 2018 | ||
// | ||
// This source code is licensed under the Apache-2.0 license found in the | ||
// LICENSE file in the root directory of this source tree. | ||
// | ||
|
||
@forward 'skeleton-styles'; | ||
@use 'skeleton-styles'; | ||
|
||
@include skeleton-styles.skeleton-styles; |
47 changes: 47 additions & 0 deletions
47
packages/styles/scss/components/skeleton-styles/_skeleton-styles.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,47 @@ | ||
// | ||
// Copyright IBM Corp. 2016, 2018 | ||
// | ||
// This source code is licensed under the Apache-2.0 license found in the | ||
// LICENSE file in the root directory of this source tree. | ||
// | ||
|
||
@use '../../config' as *; | ||
@use '../../utilities/skeleton' as *; | ||
@use '../../utilities/convert' as *; | ||
@use '../../spacing' as *; | ||
|
||
/// Skeleton styles | ||
/// @access public | ||
/// @group skeleton | ||
@mixin skeleton-styles { | ||
//skeleton icon | ||
.#{$prefix}--icon--skeleton { | ||
@include skeleton; | ||
|
||
display: inline-block; | ||
width: rem(16px); | ||
height: rem(16px); | ||
} | ||
|
||
//skeleton placeholder | ||
.#{$prefix}--skeleton__placeholder { | ||
@include skeleton; | ||
|
||
width: rem(100px); | ||
|
||
height: rem(100px); | ||
} | ||
|
||
//skeleton text | ||
.#{$prefix}--skeleton__text { | ||
@include skeleton; | ||
|
||
width: 100%; | ||
height: 1rem; | ||
margin-bottom: $spacing-03; | ||
} | ||
|
||
.#{$prefix}--skeleton__heading { | ||
height: 1.5rem; | ||
} | ||
} |