carbon-components
Version:
The Carbon Design System is IBM’s open-source design system for products and experiences.
192 lines (188 loc) • 5.42 kB
JavaScript
/**
* 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.
*/
;
const { prefix } = require('../../globals/js/settings');
module.exports = {
context: {
prefix,
hasBody: true,
},
variants: [
{
name: 'default',
label: 'Transactional Modal',
notes: `
Modals communicate information via a secondary window and allow the user to maintain the context of a particular task.
`,
context: {
idSuffix: Math.random().toString(36).substr(2),
hasFooter: true,
classPrimaryButton: `${prefix}--btn--primary`,
classCloseButton: `${prefix}--btn--secondary`,
},
},
{
name: 'xs',
label: 'Transactional Modal (XS)',
context: {
idSuffix: Math.random().toString(36).substr(2),
hasFooter: true,
classPrimaryButton: `${prefix}--btn--primary`,
classCloseButton: `${prefix}--btn--secondary`,
size: 'xs',
},
},
{
name: 'sm',
label: 'Transactional Modal (Small)',
context: {
idSuffix: Math.random().toString(36).substr(2),
hasFooter: true,
classPrimaryButton: `${prefix}--btn--primary`,
classCloseButton: `${prefix}--btn--secondary`,
size: 'sm',
},
},
{
name: 'lg',
label: 'Transactional Modal (Large)',
context: {
idSuffix: Math.random().toString(36).substr(2),
hasFooter: true,
classPrimaryButton: `${prefix}--btn--primary`,
classCloseButton: `${prefix}--btn--secondary`,
size: 'lg',
},
},
{
name: 'nofooter',
label: 'Passive Modal',
notes: 'Passive Modals are modals without footers.',
context: {
idSuffix: Math.random().toString(36).substr(2),
hasFooter: false,
classPrimaryButton: `${prefix}--btn--primary`,
classCloseButton: `${prefix}--btn--secondary`,
},
},
{
name: 'nofooter-xs',
label: 'Passive Modal (XS)',
context: {
idSuffix: Math.random().toString(36).substr(2),
hasFooter: false,
classPrimaryButton: `${prefix}--btn--primary`,
classCloseButton: `${prefix}--btn--secondary`,
size: 'xs',
},
},
{
name: 'nofooter-sm',
label: 'Passive Modal (Small)',
context: {
idSuffix: Math.random().toString(36).substr(2),
hasFooter: false,
classPrimaryButton: `${prefix}--btn--primary`,
classCloseButton: `${prefix}--btn--secondary`,
size: 'sm',
},
},
{
name: 'nofooter-lg',
label: 'Passive Modal (Large)',
context: {
idSuffix: Math.random().toString(36).substr(2),
hasFooter: false,
classPrimaryButton: `${prefix}--btn--primary`,
classCloseButton: `${prefix}--btn--secondary`,
size: 'lg',
},
},
{
name: 'titleonly-xs',
label: 'Title Only Modal (XS)',
context: {
idSuffix: Math.random().toString(36).substr(2),
hasBody: false,
hasFooter: true,
classPrimaryButton: `${prefix}--btn--primary`,
classCloseButton: `${prefix}--btn--secondary`,
size: 'xs',
},
},
{
name: 'titleonly-sm',
label: 'Title Only Modal (Small)',
context: {
idSuffix: Math.random().toString(36).substr(2),
hasBody: false,
hasFooter: true,
classPrimaryButton: `${prefix}--btn--primary`,
classCloseButton: `${prefix}--btn--secondary`,
size: 'sm',
},
},
{
name: 'titleonly-nofooter-xs',
label: 'Title Only Passive Modal (XS)',
context: {
idSuffix: Math.random().toString(36).substr(2),
hasBody: false,
hasFooter: false,
classPrimaryButton: `${prefix}--btn--primary`,
classCloseButton: `${prefix}--btn--secondary`,
size: 'xs',
},
},
{
name: 'titleonly-nofooter-sm',
label: 'Title Only Passive Modal (Small)',
context: {
idSuffix: Math.random().toString(36).substr(2),
hasBody: false,
hasFooter: false,
classPrimaryButton: `${prefix}--btn--primary`,
classCloseButton: `${prefix}--btn--secondary`,
size: 'sm',
},
},
{
name: 'danger',
label: 'Danger Modal',
context: {
idSuffix: Math.random().toString(36).substr(2),
hasFooter: true,
labelPrimaryButton: 'Danger',
classModalSupplemental: `${prefix}--modal--danger`,
classPrimaryButton: `${prefix}--btn--danger`,
classCloseButton: `${prefix}--btn--secondary`,
},
},
{
name: 'input',
label: 'Input Modal',
context: {
idSuffix: Math.random().toString(36).substr(2),
hasInput: true,
hasFooter: true,
classPrimaryButton: `${prefix}--btn--primary`,
classCloseButton: `${prefix}--btn--secondary`,
},
},
{
name: 'scrolling',
label: 'Modal with scrolling content',
context: {
idSuffix: Math.random().toString(36).substr(2),
hasScrollingContent: true,
hasFooter: true,
classPrimaryButton: `${prefix}--btn--primary`,
classCloseButton: `${prefix}--btn--secondary`,
},
},
],
};