diff --git a/.interplay/config.d.ts b/.interplay/config.d.ts new file mode 100644 index 00000000..d6db5352 --- /dev/null +++ b/.interplay/config.d.ts @@ -0,0 +1,339 @@ + +export namespace InterplayCLI { + + type DesignTokenTheme = { + /** Relative path to design token JSON file */ + path: string; + + /** Format of your tokens JSON */ + format?: string; + + /** Display name of this theme */ + name?: string; + } + + interface TokensSettings { + /** + * Specify design tokens JSON files to import + */ + designTokens?: DesignTokenTheme[]; + } + + + type ExampleRule = { + /** Pattern matching which example file(s) match with this rule */ + presetPath: string; + + /** Pattern matching which component name(s) to match with this rule */ + componentName?: string; + + /** Pattern matching which component path(s) to match with this rule */ + componentPath?: string; + + /** Per-component, per-file limit for number of matching instances to use as examples */ + limit?: number; + } + + type Package = { + + /** Relative path to package.json for this package, from base of repo */ + packagePath: string; + + /** Relative path to component index to use for parsing, from base of repo */ + src?: string; + + /** Relative path to component index to use for build, from base of repo (defaults to src entry above) */ + build?: string; + + /** Relative path to types declaration index (.d.ts) to parse instead of source code */ + types?: string; + + /** Provide JSON manifest to populate props information for parsed components in this package */ + manifest?: { + path: string; + format: string; + } + + /** Override existing name of package to import */ + name?: string; + + /** Provide custom settings for component parsing for exports in this package */ + componentSettings?: { + [key: string]: { + src?: { + relativePath: string; + exportName: string; + }, + subComponents?: string[]; + [key: string]: any; + } + } + + /** Specify any exports in the src entry file that should be ignored */ + ignoreExports?: string[]; + } + + + type Events = { + /** modify config after the CLI resolves source files, before parsing */ + resolveComponentsComplete?: (context: object) => object; + + /** modify config after all parsing, before deploy to interplay */ + parsingComplete?: (context: object) => object; + } + + type Modifiers = { + /** modify the babel config used to transpile */ + babelConfig?: (config: any) => object; + + /** modify the webpack config used to bundle your build.entry */ + webpackConfig?: (config: any, webpack: Function) => object; + } + + interface ComponentsSettings { + + /** The framework used by your code components */ + framework: "react" | "webcomponents" + + /** The component packages to import from this repo */ + packages: Package[]; + + /** Provide JSON manifest to populate props information for parsed components (all packages) */ + manifest?: { + path: string; + format: string; + } + + /** npm packages to treat as externals when bundling components (react and react-dom are set automatically) */ + peerDependencies?: { + [key: string]: string; + } + + /** aliases to use for webpack and resolving import paths */ + alias?: { + [key: string]: string; + }, + + /** Specify a component to use as a wrapper component (if required) when rendering components. The wrapper component must be exported from the deployed build */ + wrapperComponent?: string; + + /** run webpack in development mode instead of (default) production mode */ + devBuild?: boolean; + + /** + * Specify files to include on pages containing components, in addition to bundle files. + * Can be list of urls and/or list of relative paths or glob pattern. + * @default [] + */ + includePaths?: string[]; + + /** + * Specify additional files to deploy for components to work. + * Can be list of relative paths or glob pattern. + * @default [] + */ + deployPaths?: string[]; + + /** + * Specify files to parse for component examples. + * Can be list of relative paths or glob pattern. + * @default [] + */ + examplePaths?: string[]; + + /** + * Specify rules for choosing components instances to use as example. + * @default [] + */ + exampleRules?: ExampleRule[]; + + /** + * CLI will add a default example for components returning truthy value from any function in array. + * @default [] + */ + defaultPresets?: []; + + /** + * Specify files containing inherited types whose props should be removed from component parsing result (typescript) + * @default [] + */ + filteredTypePaths?: string[]; + + /** + * Specify names of custom types that should be treated as components when parsing component source files (typescript only) + * @default [] + */ + customComponentTypes?: string[]; + + /** + * Specify file containing array of translations mapping design layers to code components + */ + translationsPath?: string; + + events?: Events; + modifiers?: Modifiers; + + } + + export type Settings = ComponentsSettings | TokensSettings | (ComponentsSettings & TokensSettings); +} + +export namespace InterplayTranslations { + + type FigmaLayoutMode = 'HORIZONTAL' | 'VERTICAL'; + type FigmaComponent = '@figma/FRAME' | '@figma/COMPONENT' | '@figma/TEXT'; + type FigmaObjectType = 'FRAME' | 'ELLIPSE' | 'LINE' | 'TEXT' | 'RECTANGLE' | 'SHAPE_WITH_TEXT' | 'COMPONENT' + type FigmaRule = { + component : { + in?: FigmaComponent[] | string []; + not?: FigmaComponent | string + } | FigmaComponent | string, + + props?: { + layoutMode? : { + in?: FigmaLayoutMode[]; + not?: FigmaLayoutMode | { + in: FigmaLayoutMode[]; + } + } | FigmaLayoutMode + + type? : { + in?: FigmaObjectType[]; + not?: FigmaObjectType + } | FigmaObjectType + + fontSize? : { + in?: number[]; + not?: number; + between?: [number, number]; + } + } + } + + + type CSS = { + + //common + width: string; + height: string; + top: string; + left: string; + position: string; //'absolute' + + //box only + border: string; + borderRadius: number; + overflow: string; //'hidden' + backgroundBlendMode: string; //'normal' + backgroundColor: string; //'#00000' + boxShadow: string; + + //autolayout box (not in typography) + gap: string; + + //typography css + display: string; // 'flex' + + flexDirection: string; //'column' + color: string; // '#000000' + whiteSpace: string; // 'nowrap' + alignItems: string; // 'center' + justifyContent: string; //'center' + + textAlign: string; + fontSize: number; + fontWeight: number; + fontStyle: string; //'normal' + fontFamily: string; + letterSpacing: string //'0.40px' + lineHeight: string //'25.50px' + + } + + type Node = { + props: { + //common + x:number; + y:number; + width:number; + height:number; + id: string; + name: string; + tokens: { + [key: string]: { + name: string; + value: any + } + }; + + //typography node + characters: string; + fontSize: number; + fontName: { + family: string; + style: string; + } + letterSpacing:{ + unit: 'PIXELS', + value: number + } + lineHeight: { + unit: 'PIXELS', + value: number + }, + textAlignHorizontal: 'CENTER'; + textAlignVertical: 'CENTER'; + + + + //shape + children: any; + type: string; //'FRAME' + cornerRadius: number; + fills: any; + } + } + + type Token = { + name: string; + path: string; + value: any; + } + + type Tokens = { + byPath: (path: string) => Token, + findByValue: (value:any, path:string) => Token, + findByClosestValue: (value:any, path:string) => Token + } + + type FormulaContext = { + css: CSS; + node: Node; + tokens: Tokens; + } + + type StringFormula = { + formula: string; + } + + type StringFunction = { + fn: string; + } + + type PropFunction = ((context: FormulaContext) => {}); + + type ResultValue = { + component: string; + props: { + [key: string]: PropFunction | string | number | StringFormula | StringFunction | undefined; + } + } + + export interface Translation { + name: string; + rule: FigmaRule; + value?: ResultValue; + fn?: any; + } + +} diff --git a/.interplay/deploy/code.json b/.interplay/deploy/code.json new file mode 100644 index 00000000..dcacc8fa --- /dev/null +++ b/.interplay/deploy/code.json @@ -0,0 +1,4622 @@ +{ + "includes": { + "emotionReact": { + "id": "emotionReact", + "url": "https://cdn.interplay.io/ck0ronzww000002s6cht86oyw/um3l2J56Xr/master/1725337472221/.interplay/stage/files/interplay/build/@emotion/react", + "type": "module", + "name": "@emotion/react", + "index": 1 + }, + "emotionStyled": { + "id": "emotionStyled", + "url": "https://cdn.interplay.io/ck0ronzww000002s6cht86oyw/um3l2J56Xr/master/1725337472221/.interplay/stage/files/interplay/build/@emotion/styled", + "type": "module", + "name": "@emotion/styled", + "index": 2 + }, + "orcsDesignSystem": { + "id": "orcsDesignSystem", + "url": "https://cdn.interplay.io/ck0ronzww000002s6cht86oyw/um3l2J56Xr/master/1725337472221/.interplay/stage/files/interplay/build/orcs-design-system", + "type": "module", + "name": "orcs-design-system", + "index": 3 + }, + "styledComponents": { + "id": "styledComponents", + "url": "https://cdn.interplay.io/ck0ronzww000002s6cht86oyw/um3l2J56Xr/master/1725337472221/.interplay/stage/files/interplay/build/styled-components", + "type": "module", + "name": "styled-components", + "index": 4 + } + }, + "components": { + "orcs-design-system/systemtheme": { + "id": "orcs-design-system/systemtheme", + "name": "systemtheme", + "code": { + "packageName": "orcs-design-system", + "exportName": "systemtheme", + "lib": "orcsDesignSystem" + }, + "type": "Code", + "props": {} + }, + "orcs-design-system/systemThemeCollapsed": { + "id": "orcs-design-system/systemThemeCollapsed", + "name": "systemThemeCollapsed", + "code": { + "packageName": "orcs-design-system", + "exportName": "systemThemeCollapsed", + "lib": "orcsDesignSystem" + }, + "type": "Code", + "props": {} + }, + "orcs-design-system/GlobalStyles": { + "id": "orcs-design-system/GlobalStyles", + "name": "GlobalStyles", + "code": { + "packageName": "orcs-design-system", + "exportName": "GlobalStyles", + "lib": "orcsDesignSystem" + }, + "type": "Code", + "props": {} + }, + "orcs-design-system/SystemThemeProvider": { + "id": "orcs-design-system/SystemThemeProvider", + "name": "SystemThemeProvider", + "code": { + "packageName": "orcs-design-system", + "exportName": "SystemThemeProvider", + "lib": "orcsDesignSystem" + }, + "type": "Code", + "props": { + "children": { + "name": "children", + "type": "array", + "items": { + "type": "Node" + } + } + }, + "relativePath": "lib/SystemThemeProvider.js" + }, + "orcs-design-system/ActionsMenu": { + "id": "orcs-design-system/ActionsMenu", + "name": "ActionsMenu", + "code": { + "packageName": "orcs-design-system", + "exportName": "ActionsMenu", + "lib": "orcsDesignSystem" + }, + "type": "Code", + "props": { + "isOpen": { + "name": "isOpen", + "type": "boolean" + }, + "direction": { + "name": "direction", + "type": "string", + "enum": [ + "left", + "right", + "top", + "bottom", + "top-start", + "top-end", + "bottom-start", + "bottom-end", + "left-start", + "left-end", + "right-start", + "right-end" + ] + }, + "customTriggerComponent": { + "name": "customTriggerComponent", + "type": "array", + "items": { + "type": "Node" + } + }, + "closeOnClick": { + "name": "closeOnClick", + "type": "boolean" + }, + "children": { + "name": "children", + "type": "array", + "items": { + "type": "Node" + }, + "ui": { + "suggested": [ + "orcs-design-system/ActionsMenuItem" + ] + } + }, + "theme": { + "name": "theme", + "type": "object", + "description": "Specifies the colour theme" + }, + "ariaLabel": { + "name": "ariaLabel", + "type": "object", + "description": "Specifies the aria-label for the button" + } + }, + "relativePath": "lib/components/ActionsMenu/index.js" + }, + "orcs-design-system/ActionsMenuBody": { + "id": "orcs-design-system/ActionsMenuBody", + "name": "ActionsMenuBody", + "code": { + "packageName": "orcs-design-system", + "exportName": "ActionsMenuBody", + "lib": "orcsDesignSystem" + }, + "type": "Code", + "required": [ + "onToggle", + "closeMenu", + "toggleState" + ], + "props": { + "onTriggerFocus": { + "name": "onTriggerFocus", + "type": "Event" + }, + "onToggle": { + "name": "onToggle", + "type": "Event" + }, + "closeMenu": { + "name": "closeMenu", + "type": "Event" + }, + "toggleState": { + "name": "toggleState", + "type": "boolean" + }, + "closeOnClick": { + "name": "closeOnClick", + "type": "boolean", + "defaultValue": false + }, + "direction": { + "name": "direction", + "type": "string", + "defaultValue": "right-start" + }, + "placement": { + "name": "placement", + "type": "string" + }, + "menuTopPosition": { + "name": "menuTopPosition", + "type": "string" + }, + "menuLeftPosition": { + "name": "menuLeftPosition", + "type": "string" + }, + "menuRightPosition": { + "name": "menuRightPosition", + "type": "string" + }, + "menuWidth": { + "name": "menuWidth", + "type": "string" + }, + "customTriggerComponent": { + "name": "customTriggerComponent", + "type": "array", + "items": { + "type": "Node" + } + }, + "children": { + "name": "children", + "type": "array", + "items": { + "type": "Node" + } + }, + "theme": { + "name": "theme", + "type": "object" + }, + "ariaLabel": { + "name": "ariaLabel", + "type": "string", + "defaultValue": "Options Menu" + }, + "data-testid": { + "name": "data-testid", + "type": "unknown", + "defaultValue": "ActionsMenu" + } + }, + "relativePath": "lib/components/ActionsMenu/index.js" + }, + "orcs-design-system/ActionsMenuHeading": { + "id": "orcs-design-system/ActionsMenuHeading", + "name": "ActionsMenuHeading", + "code": { + "packageName": "orcs-design-system", + "exportName": "ActionsMenuHeading", + "lib": "orcsDesignSystem" + }, + "type": "Code", + "props": {}, + "relativePath": "lib/components/ActionsMenu/index.js" + }, + "orcs-design-system/ActionsMenuItem": { + "id": "orcs-design-system/ActionsMenuItem", + "name": "ActionsMenuItem", + "code": { + "packageName": "orcs-design-system", + "exportName": "ActionsMenuItem", + "lib": "orcsDesignSystem" + }, + "type": "Code", + "props": { + "href": { + "name": "href", + "type": "string" + }, + "children": { + "name": "children", + "type": "array", + "items": { + "type": "Node" + } + } + }, + "relativePath": "lib/components/ActionsMenu/index.js" + }, + "orcs-design-system/Avatar": { + "id": "orcs-design-system/Avatar", + "name": "Avatar", + "code": { + "packageName": "orcs-design-system", + "exportName": "Avatar", + "lib": "orcsDesignSystem" + }, + "type": "Code", + "props": { + "sizing": { + "name": "sizing", + "type": "string", + "enum": [ + "small", + "large", + "default" + ], + "description": "Changes the sizing of the Avatar component" + }, + "shape": { + "name": "shape", + "type": "string", + "enum": [ + "square", + "hexagon", + "tag", + "default" + ], + "description": "Changes the shape of the Avatar component" + }, + "type": { + "name": "type", + "type": "string", + "enum": [ + "inverted", + "default" + ], + "description": "Specifies the inverted type for dark backgrounds" + }, + "image": { + "name": "image", + "description": "Specifies a source path for an image", + "type": "string" + }, + "imageAlt": { + "name": "imageAlt", + "type": "unknown", + "description": "Specifies the alt text for an image. This must be specified if image prop is used and title prop is not a string." + }, + "initials": { + "name": "initials", + "description": "Specifies initials of person if available", + "type": "string" + }, + "subtitleContent": { + "name": "subtitleContent", + "type": "Node", + "description": "Specifies custom content for avatar subtitle" + }, + "whiteInitials": { + "name": "whiteInitials", + "type": "boolean", + "description": "Turns white initials on for custom `Circle` backgrounds" + }, + "uppercase": { + "name": "uppercase", + "type": "boolean", + "defaultValue": true, + "description": "Specifies whether to use uppercase for initials" + }, + "title": { + "name": "title", + "description": "Specifies title / name as just plain text, or an element like a hyperlink or react router link", + "type": "string" + }, + "titleLevel": { + "name": "titleLevel", + "type": "string", + "enum": [ + "H1", + "H2", + "H3", + "H4", + "H5", + "H6" + ], + "defaultValue": "H3", + "description": "Specifies the component to wrap the heading, defaults to H3" + }, + "subtitle": { + "name": "subtitle", + "description": "Specifies subtitle / role", + "type": "string" + }, + "localTime": { + "name": "localTime", + "type": "string", + "description": "Specifies local time" + }, + "theme": { + "name": "theme", + "type": "object", + "description": "Specifies the colour theme" + } + }, + "relativePath": "lib/components/Avatar/index.js" + }, + "orcs-design-system/Badge": { + "id": "orcs-design-system/Badge", + "name": "Badge", + "code": { + "packageName": "orcs-design-system", + "exportName": "Badge", + "lib": "orcsDesignSystem" + }, + "type": "Code", + "props": { + "variant": { + "name": "variant", + "type": "string", + "enum": [ + "success", + "warning", + "danger", + "primaryLight", + "primary", + "primaryDark", + "secondary" + ], + "description": "Specifies badge colour. Colours are taken from the standard design system colours." + }, + "noWrap": { + "name": "noWrap", + "type": "boolean", + "description": "Specified whether the badge text should be able to wrap or not" + }, + "children": { + "name": "children", + "description": "The label text on the badge is passed as a child element.", + "type": "array", + "items": { + "type": "Node" + } + }, + "theme": { + "name": "theme", + "type": "object", + "description": "Specifies the system theme." + } + }, + "relativePath": "lib/components/Badge/index.js" + }, + "orcs-design-system/Box": { + "id": "orcs-design-system/Box", + "name": "Box", + "code": { + "packageName": "orcs-design-system", + "exportName": "Box", + "lib": "orcsDesignSystem" + }, + "type": "Code", + "props": { + "children": { + "name": "children", + "type": "array", + "items": { + "type": "Node" + }, + "description": "Children of `Box` are taken as node elements" + }, + "display": { + "name": "display", + "type": "string", + "enum": [ + "inline", + "block", + "contents", + "inline-block", + "none", + "initial", + "inherit" + ], + "description": "Sets `Box` display mode. Default is `block`." + }, + "overflow": { + "name": "overflow", + "type": "string", + "enum": [ + "visible", + "hidden", + "scroll", + "auto" + ], + "description": "Sets behaviour of elements in `Box` that are larger than their container. Default is `visible`." + }, + "p": { + "name": "p", + "description": "Sets the inner padding on all four sides. Takes values from the `space` array in `systemtheme.js`.", + "type": "string" + }, + "m": { + "name": "m", + "type": "number", + "description": "Sets the outer margin on all four sides. Takes values from the `space` array in `systemtheme.js`." + }, + "bg": { + "name": "bg", + "type": "string", + "defaultValue": "transparent", + "description": "Sets the background colour of the box." + }, + "width": { + "name": "width", + "description": "Sets the width of the box.", + "type": "string" + }, + "height": { + "name": "height", + "description": "Sets the height of the box. Default is `auto`.", + "type": "string" + }, + "dataTestId": { + "name": "dataTestId", + "type": "string", + "description": "Specifies the `data-testid` attribute for testing." + }, + "theme": { + "name": "theme", + "type": "object", + "description": "Specifies the colour theme" + }, + "borderRadius": { + "name": "borderRadius", + "type": "number" + }, + "boxBorder": { + "name": "boxBorder", + "type": "string" + }, + "shadow": { + "name": "shadow", + "type": "string" + } + }, + "relativePath": "lib/components/Box/index.js" + }, + "orcs-design-system/Button": { + "id": "orcs-design-system/Button", + "name": "Button", + "code": { + "packageName": "orcs-design-system", + "exportName": "Button", + "lib": "orcsDesignSystem" + }, + "type": "Code", + "props": { + "large": { + "name": "large", + "type": "boolean", + "description": "Large button" + }, + "small": { + "name": "small", + "type": "boolean", + "description": "Small button" + }, + "variant": { + "name": "variant", + "type": "string", + "enum": [ + "success", + "successAlternate", + "danger", + "dangerAlternate", + "ghost", + "disabled", + "default" + ], + "defaultValue": "default", + "description": "Specifies alternate button colours/styles." + }, + "fullWidth": { + "name": "fullWidth", + "type": "boolean", + "description": "Full width button that takes up all available space of parent" + }, + "isLoading": { + "name": "isLoading", + "type": "boolean", + "description": "Adds a spinner animation to indicate loading or processing" + }, + "iconLeft": { + "name": "iconLeft", + "type": "boolean", + "description": "Styles button to fit an icon on the left of text. Uses Icon component." + }, + "iconRight": { + "name": "iconRight", + "type": "boolean", + "description": "Styles button to fit an icon on the right of text. Uses Icon component." + }, + "leftIcon": { + "name": "leftIcon", + "items": { + "type": "unknown" + }, + "type": "array", + "description": "New functionality to specify an `Icon` on the left side without having to include it as a child." + }, + "rightIcon": { + "name": "rightIcon", + "items": { + "type": "unknown" + }, + "type": "array", + "description": "New functionality to specify an `Icon` on the right side without having to include it as a child." + }, + "iconOnly": { + "name": "iconOnly", + "type": "boolean", + "description": "Styles button to suit having only an icon. Uses Icon component." + }, + "disabled": { + "name": "disabled", + "type": "boolean", + "description": "Specifies whether the button is disabled." + }, + "children": { + "name": "children", + "description": "The text label on the button is passed as a child. Keep this text short and descriptive. Use an action word or confirmation if possible.", + "type": "array", + "items": { + "type": "Node" + } + }, + "ButtonStyles": { + "name": "ButtonStyles", + "type": "object", + "description": "Adds additional styling to the rendered ` }; \ No newline at end of file diff --git a/.interplay/examples/orcs-design-system/ButtonGroup.example.js b/.interplay/examples/orcs-design-system/ButtonGroup.example.js new file mode 100644 index 00000000..aa878653 --- /dev/null +++ b/.interplay/examples/orcs-design-system/ButtonGroup.example.js @@ -0,0 +1,26 @@ +import React from "react"; +import { ButtonGroupContainer, ButtonGroupItem } from "orcs-design-system"; + +export default { + title: "ButtonGroup", + component: ButtonGroup +}; + +export const Basic = { + render: () => ( + + + + + + ) +}; diff --git a/.interplay/examples/orcs-design-system/Card.example.js b/.interplay/examples/orcs-design-system/Card.example.js new file mode 100644 index 00000000..139e5382 --- /dev/null +++ b/.interplay/examples/orcs-design-system/Card.example.js @@ -0,0 +1,11 @@ +import React from "react"; +import { Card } from "orcs-design-system"; + +export default { + title: "Card", + component: Card +}; + +export const Basic = { + render: () => +}; diff --git a/.interplay/examples/orcs-design-system/Checkbox.example.js b/.interplay/examples/orcs-design-system/Checkbox.example.js new file mode 100644 index 00000000..e013211a --- /dev/null +++ b/.interplay/examples/orcs-design-system/Checkbox.example.js @@ -0,0 +1,11 @@ +import React from "react"; +import { Checkbox } from "orcs-design-system"; + +export default { + title: "Checkbox", + component: Checkbox +}; + +export const Basic = { + render: () => {}} label="Default checkbox" /> +}; diff --git a/.interplay/examples/orcs-design-system/DatePicker.example.js b/.interplay/examples/orcs-design-system/DatePicker.example.js new file mode 100644 index 00000000..40d5f27c --- /dev/null +++ b/.interplay/examples/orcs-design-system/DatePicker.example.js @@ -0,0 +1,22 @@ +import React from "react"; +import { DatePicker } from "orcs-design-system"; + +export default { + title: "DatePicker", + component: DatePicker +}; + +export const Basic = { + render: () => ( + + ) +}; diff --git a/.interplay/examples/orcs-design-system/Divider.example.js b/.interplay/examples/orcs-design-system/Divider.example.js new file mode 100644 index 00000000..b1c14c1a --- /dev/null +++ b/.interplay/examples/orcs-design-system/Divider.example.js @@ -0,0 +1,11 @@ +import React from "react"; +import { Divider } from "orcs-design-system"; + +export default { + title: "Divider", + component: Divider +}; + +export const Basic = { + render: () => +}; diff --git a/.interplay/examples/orcs-design-system/Expandable.example.js b/.interplay/examples/orcs-design-system/Expandable.example.js new file mode 100644 index 00000000..2626b21c --- /dev/null +++ b/.interplay/examples/orcs-design-system/Expandable.example.js @@ -0,0 +1,13 @@ +import React from "react"; +import { Expandable } from "orcs-design-system"; + +export default { + title: "Expandable", + component: Expandable +}; + +export const Basic = { + render: () => ( + Expanded content goes here + ) +}; diff --git a/.interplay/examples/orcs-design-system/HeaderSimple.example.js b/.interplay/examples/orcs-design-system/HeaderSimple.example.js new file mode 100644 index 00000000..1bc061db --- /dev/null +++ b/.interplay/examples/orcs-design-system/HeaderSimple.example.js @@ -0,0 +1,30 @@ +import React from "react"; +import { HeaderSimple } from "orcs-design-system"; + +export default { + title: "HeaderSimple", + component: HeaderSimple +}; + +export const Basic = { + render: () => ( + + } + /> + ) +}; diff --git a/.interplay/examples/orcs-design-system/Icon.example.js b/.interplay/examples/orcs-design-system/Icon.example.js new file mode 100644 index 00000000..d6242452 --- /dev/null +++ b/.interplay/examples/orcs-design-system/Icon.example.js @@ -0,0 +1,11 @@ +import React from "react"; +import { Icon } from "orcs-design-system"; + +export default { + title: "Icon", + component: Icon +}; + +export const Basic = { + render: () => +}; diff --git a/.interplay/examples/orcs-design-system/Notification.example.js b/.interplay/examples/orcs-design-system/Notification.example.js new file mode 100644 index 00000000..03508742 --- /dev/null +++ b/.interplay/examples/orcs-design-system/Notification.example.js @@ -0,0 +1,15 @@ +import React from "react"; +import { Notification } from "orcs-design-system"; + +export default { + title: "Notification", + component: Notification +}; + +export const Basic = { + render: () => ( + + Notification message. + + ) +}; diff --git a/.interplay/examples/orcs-design-system/ProgressBar.example.js b/.interplay/examples/orcs-design-system/ProgressBar.example.js new file mode 100644 index 00000000..2bf6f2d9 --- /dev/null +++ b/.interplay/examples/orcs-design-system/ProgressBar.example.js @@ -0,0 +1,17 @@ +import React from "react"; +import { ProgressBar } from "orcs-design-system"; + +export default { + title: "ProgressBar", + component: ProgressBar +}; + +export const Basic = { + render: () => ( + + ) +}; diff --git a/.interplay/examples/orcs-design-system/RadioButton.example.js b/.interplay/examples/orcs-design-system/RadioButton.example.js new file mode 100644 index 00000000..4252b3c6 --- /dev/null +++ b/.interplay/examples/orcs-design-system/RadioButton.example.js @@ -0,0 +1,11 @@ +import React from "react"; +import { RadioButton } from "orcs-design-system"; + +export default { + title: "RadioButton", + component: RadioButton +}; + +export const Basic = { + render: () => +}; diff --git a/.interplay/examples/orcs-design-system/Range.example.js b/.interplay/examples/orcs-design-system/Range.example.js new file mode 100644 index 00000000..b02b2e59 --- /dev/null +++ b/.interplay/examples/orcs-design-system/Range.example.js @@ -0,0 +1,18 @@ +import React from "react"; +import { Range } from "orcs-design-system"; + +export default { + title: "Range", + component: Range +}; + +export const Basic = { + render: () => ( + + ) +}; diff --git a/.interplay/examples/orcs-design-system/Select.example.js b/.interplay/examples/orcs-design-system/Select.example.js new file mode 100644 index 00000000..150621bf --- /dev/null +++ b/.interplay/examples/orcs-design-system/Select.example.js @@ -0,0 +1,17 @@ +import React from "react"; +import { Select } from "orcs-design-system"; + +export default { + title: "Select", + component: Select +}; + +export const Basic = { + render: () => ( +