@dxc-technology/halstack-react 0.0.0-fc652e4 → 0.0.0-fc73d3b

package/dist/accordion-group/AccordionGroup.stories.js

@@ -1,207 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _react2 = require("@storybook/react");
-
-var _addonActions = require("@storybook/addon-actions");
-
-var _addonKnobs = require("@storybook/addon-knobs");
-
-var _readme = _interopRequireDefault(require("./readme.md"));
-
-var _Accordion = _interopRequireDefault(require("./Accordion"));
-
-var _run_icon_black = _interopRequireDefault(require("../../.storybook/public/run_icon_black.png"));
-
-var onChange = (0, _addonActions.action)("onChange");
-
-onChange.toString = function () {
-  return "onChangeHandler";
-};
-
-(0, _react2.storiesOf)("Form Components|Accordion", module).add("Types", function () {
-  return _react["default"].createElement("div", null, _react["default"].createElement("h3", null, "Light"), _react["default"].createElement("div", {
-    style: {
-      marginBottom: "50px"
-    }
-  }, _react["default"].createElement(_Accordion["default"], {
-    label: "First accordion",
-    onChange: onChange
-  }, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")), _react["default"].createElement(_Accordion["default"], {
-    theme: "light",
-    disabled: true,
-    label: "Second accordion",
-    onChange: onChange
-  }, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")), _react["default"].createElement(_Accordion["default"], {
-    label: "Third accordion",
-    onChange: onChange,
-    assistiveText: "Extra information"
-  }, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")), _react["default"].createElement(_Accordion["default"], {
-    theme: "light",
-    label: "Fourth accordion",
-    assistiveText: "Extra information",
-    iconPosition: "before",
-    iconSrc: _run_icon_black["default"],
-    onChange: onChange
-  }, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")), _react["default"].createElement(_Accordion["default"], {
-    theme: "light",
-    label: "Fifth accordion",
-    assistiveText: "Extra information",
-    iconPosition: "after",
-    iconSrc: _run_icon_black["default"],
-    onChange: onChange
-  }, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget."))), _react["default"].createElement("div", {
-    style: {
-      marginBottom: "50px"
-    }
-  }, _react["default"].createElement(_Accordion["default"], {
-    theme: "light",
-    mode: "alternative",
-    label: "First accordion",
-    onChange: onChange
-  }, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")), _react["default"].createElement(_Accordion["default"], {
-    theme: "light",
-    mode: "alternative",
-    disabled: true,
-    label: "Second accordion",
-    onChange: onChange
-  }, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")), _react["default"].createElement(_Accordion["default"], {
-    theme: "light",
-    mode: "alternative",
-    label: "Third accordion",
-    assistiveText: "Extra information",
-    onChange: onChange
-  }, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")), _react["default"].createElement(_Accordion["default"], {
-    theme: "light",
-    mode: "alternative",
-    label: "Fourth accordion",
-    assistiveText: "Extra information",
-    iconPosition: "before",
-    iconSrc: _run_icon_black["default"],
-    onChange: onChange
-  }, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")), _react["default"].createElement(_Accordion["default"], {
-    theme: "light",
-    mode: "alternative",
-    label: "Fifth accordion",
-    assistiveText: "Extra information",
-    iconPosition: "after",
-    iconSrc: _run_icon_black["default"],
-    onChange: onChange
-  }, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget."))), _react["default"].createElement("h3", null, "Dark"), _react["default"].createElement("div", null, _react["default"].createElement("div", {
-    style: {
-      background: "black",
-      paddingTop: "50px",
-      paddingBottom: "50px"
-    }
-  }, _react["default"].createElement(_Accordion["default"], {
-    label: "First accordion",
-    onChange: onChange
-  }, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")), _react["default"].createElement(_Accordion["default"], {
-    theme: "dark",
-    disabled: true,
-    label: "Second accordion",
-    onChange: onChange
-  }, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")), _react["default"].createElement(_Accordion["default"], {
-    theme: "dark",
-    label: "Third accordion",
-    onChange: onChange,
-    assistiveText: "Extra information"
-  }, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")), _react["default"].createElement(_Accordion["default"], {
-    theme: "dark",
-    label: "Fourth accordion",
-    assistiveText: "Extra information",
-    iconPosition: "before",
-    iconSrc: _run_icon_black["default"],
-    onChange: onChange
-  }, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")), _react["default"].createElement(_Accordion["default"], {
-    theme: "dark",
-    label: "Fifth accordion",
-    assistiveText: "Extra information",
-    iconPosition: "after",
-    iconSrc: _run_icon_black["default"],
-    onChange: onChange
-  }, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget."))), _react["default"].createElement("div", {
-    style: {
-      background: "black",
-      paddingBottom: "50px"
-    }
-  }, _react["default"].createElement(_Accordion["default"], {
-    theme: "dark",
-    mode: "alternative",
-    label: "First accordion",
-    onChange: onChange
-  }, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")), _react["default"].createElement(_Accordion["default"], {
-    theme: "dark",
-    mode: "alternative",
-    disabled: true,
-    label: "Second accordion",
-    onChange: onChange
-  }, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")), _react["default"].createElement(_Accordion["default"], {
-    theme: "dark",
-    mode: "alternative",
-    label: "Third accordion",
-    assistiveText: "Extra information",
-    onChange: onChange
-  }, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")), _react["default"].createElement(_Accordion["default"], {
-    theme: "dark",
-    mode: "alternative",
-    label: "Fourth accordion",
-    assistiveText: "Extra information",
-    iconPosition: "before",
-    iconSrc: _run_icon_black["default"],
-    onChange: onChange
-  }, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")), _react["default"].createElement(_Accordion["default"], {
-    theme: "dark",
-    mode: "alternative",
-    label: "Fifth accordion",
-    assistiveText: "Extra information",
-    iconPosition: "after",
-    iconSrc: _run_icon_black["default"],
-    onChange: onChange
-  }, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")))));
-}, {
-  notes: {
-    markdown: _readme["default"]
-  }
-});
-
-var knobProps = function knobProps() {
-  return {
-    mode: (0, _addonKnobs.select)("mode", {
-      "default": "default",
-      alternative: "alternative"
-    }, "default"),
-    label: (0, _addonKnobs.text)("label", "Test Accordion"),
-    assistiveText: (0, _addonKnobs.text)("assistive text", "Extra information"),
-    theme: (0, _addonKnobs.select)("theme", {
-      light: "light",
-      dark: "dark"
-    }, "light"),
-    disabled: (0, _addonKnobs["boolean"])("disabled", false),
-    iconPosition: (0, _addonKnobs.select)("icon position", {
-      before: "before",
-      after: "after"
-    }, "before")
-  };
-};
-
-(0, _react2.storiesOf)("Form Components|Accordion", module).add("Knobs example", function () {
-  var props = knobProps();
-  return _react["default"].createElement("div", {
-    style: {
-      background: props.theme === "dark" && "black" || "transparent"
-    }
-  }, _react["default"].createElement(_Accordion["default"], (0, _extends2["default"])({}, props, {
-    onChange: onChange,
-    iconSrc: _run_icon_black["default"]
-  }), _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")));
-}, {
-  notes: {
-    markdown: _readme["default"]
-  }
-});

package/dist/accordion-group/readme.md

@@ -1,70 +0,0 @@
-# DXC Accordion Group Component
-## Props
-
-<table>
-    <tr style="background-color: grey">
-        <td>Name</td>
-        <td>Default</td>
-        <td>Description</td>
-    </tr>
-    <tr>
-        <td>indexActive: number</td>
-        <td></td>
-        <td>The index of the active accordion. If undefined, the component will be uncontrolled and the active tab will be managed internally by the component.</td>
-    </tr>
-    <tr>
-        <td>disabled: boolean</td>
-        <td><code>false</code></td>
-        <td>If true, the component will be disabled.</td>
-    </tr>
-    <tr>
-        <td>onActiveChange: function</td>
-        <td></td>
-        <td>This function will be called when the user clicks on an accordion. The index of the clicked accordion will be passed as a parameter.</td>
-    </tr>
-        <tr>
-        <td>margin: string | object</td>
-        <td></td>
-        <td>Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge'). You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.</td>
-    </tr>
-
-</table>
-
-## Examples
-
-- Basic accordion group
-
-```js
-import React from "react";
-
-import { DxcAccordionGroup } from "@dxc-technology/halstack-react";
-
-function App() {
-  const handleOnChange = event => {
-    console.log("Accordion clicked");
-  };
-
-  return (
-    <div>
-      <DxcAccordionGroup>
-        <DxcAccordionGroup.Accordion label="Accordion1" padding="medium">
-          <div>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-            Suspendisse malesuada lacus ex, sit amet blandit leo lobortis
-            eget.
-          </div>
-        </DxcAccordionGroup.Accordion>
-        <DxcAccordionGroup.Accordion label="Accordion2" padding="medium">
-          <div>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-            Suspendisse malesuada lacus ex, sit amet blandit leo lobortis
-            eget.
-          </div>
-        </DxcAccordionGroup.Accordion>
-      </DxcAccordionGroup>
-    </div>
-  );
-}
-
-export default App;
-```