@aegov/design-system-react
Version:
A design system for the Government of the United Arab Emirates. Extending the original design system released as @aegov/design-system, this is the package specefically created for the ReactJs enviornment.
105 lines (104 loc) • 2.18 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.WithLabels = exports.VerticalNoLabels = exports.Vertical = exports.Small = exports.ProgressWithThreeSteps = exports.Large = exports.Default = exports.Completed = exports.Arabic = void 0;
var _react = _interopRequireDefault(require("react"));
var _Steps = _interopRequireDefault(require("./Steps"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
var _default = exports.default = {
title: 'Components/Steps',
component: _Steps.default,
parameters: {
layout: 'centered'
},
tags: ['autodocs']
};
const defaultSteps = [{
label: 'Personal Info',
href: '#1'
}, {
label: 'Account Setup',
href: '#2'
}, {
label: 'Review',
href: '#3'
}, {
label: 'Complete',
href: '#4'
}];
const Default = exports.Default = {
args: {
steps: defaultSteps,
currentStep: 1
}
};
const ProgressWithThreeSteps = exports.ProgressWithThreeSteps = {
args: {
steps: defaultSteps,
currentStep: 2
}
};
const WithLabels = exports.WithLabels = {
args: {
steps: defaultSteps,
currentStep: 1,
showLabels: true
}
};
const Small = exports.Small = {
args: {
steps: defaultSteps,
currentStep: 2,
size: 'sm'
}
};
const Large = exports.Large = {
args: {
steps: defaultSteps,
currentStep: 2,
size: 'lg'
}
};
const Vertical = exports.Vertical = {
args: {
steps: defaultSteps,
currentStep: 1,
orientation: 'vertical',
showLabels: true
}
};
const VerticalNoLabels = exports.VerticalNoLabels = {
args: {
steps: defaultSteps,
currentStep: 1,
orientation: 'vertical',
showLabels: false
}
};
const arabicSteps = [{
label: 'المعلومات الشخصية',
href: '#1'
}, {
label: 'الإعداد المنصوص',
href: '#2'
}, {
label: 'المراجعة',
href: '#3'
}, {
label: 'الاكتمال',
href: '#4'
}];
const Arabic = exports.Arabic = {
args: {
steps: arabicSteps,
currentStep: 2,
showLabels: true
}
};
const Completed = exports.Completed = {
args: {
steps: defaultSteps,
currentStep: 4
}
};