@conveyorhq/arrow-ds 1.30.1 → 1.30.2

package/package.json

@@ -2,7 +2,7 @@
   "name": "@conveyorhq/arrow-ds",
   "author": "Conveyor",
   "license": "MIT",
-  "version": "1.30.1",
+  "version": "1.30.2",
   "description": "Arrow Design System",
   "repository": "https://github.com/conveyor/arrow-ds",
   "publishConfig": {

package/public/components/Svg/Svg.d.ts

@@ -1,3 +1,3 @@
-import { FunctionComponent, SVGAttributes } from "react";
-export declare type SvgProps = SVGAttributes<SVGElement>;
-export declare const Svg: FunctionComponent<SvgProps>;
+import React from "react";
+export declare type SvgProps = React.SVGAttributes<SVGElement>;
+export declare const Svg: React.ForwardRefExoticComponent<SvgProps & React.RefAttributes<SVGSVGElement>>;

package/public/components/Svg/Svg.js

@@ -5,5 +5,4 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Svg = void 0;
 const react_1 = __importDefault(require("react"));
-const Svg = (props) => (react_1.default.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg" }, props)));
-exports.Svg = Svg;
+exports.Svg = react_1.default.forwardRef((props, forwardedRef) => (react_1.default.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", ref: forwardedRef }, props))));

package/src/components/Svg/Svg.story.mdx

@@ -0,0 +1,36 @@
+import {
+  Story,
+  Preview,
+  Meta,
+  SourceState,
+} from "@storybook/addon-docs/blocks";
+import { colors } from "../../tokens";
+import { Svg } from "./Svg";
+
+<Meta title="Components/Images/Svg" component={Svg} />
+
+# Svg
+
+`Svg` is a component to display
+[vector images](https://developer.mozilla.org/en-US/docs/Web/SVG).
+
+## Installation
+
+```jsx
+import { Svg } from "@conveyorhq/arrow-ds";
+```
+
+## Basic usage
+
+<Preview withSource={SourceState.OPEN}>
+  <Story name="Svg">
+    <Svg viewBox="0 0 300 100" fill={colors.gray["900"]}>
+      <circle cx="50" cy="50" r="40" />
+    </Svg>
+  </Story>
+</Preview>
+
+## API
+
+`Svg` has no special props; you may apply any valid
+[attribute](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute).

package/src/components/Svg/Svg.tsx

@@ -1,7 +1,9 @@
-import React, { FunctionComponent, SVGAttributes } from "react";
+import React from "react";
 
-export type SvgProps = SVGAttributes<SVGElement>;
+export type SvgProps = React.SVGAttributes<SVGElement>;
 
-export const Svg: FunctionComponent<SvgProps> = (props: SvgProps) => (
-  <svg xmlns="http://www.w3.org/2000/svg" {...props} />
+export const Svg = React.forwardRef<SVGSVGElement, SvgProps>(
+  (props, forwardedRef) => (
+    <svg xmlns="http://www.w3.org/2000/svg" ref={forwardedRef} {...props} />
+  ),
 );

package/public/components/Svg/Svg.story.d.ts

@@ -1 +0,0 @@
-export {};

package/public/components/Svg/Svg.story.js

@@ -1,14 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-const react_2 = require("@storybook/react");
-const Story_1 = __importDefault(require("../../storybook-components/Story"));
-const tokens_1 = require("../../tokens");
-const Svg_1 = require("./Svg");
-const stories = react_2.storiesOf("Components/Images/Svg", module);
-stories.add("Default", () => (react_1.default.createElement(Story_1.default, { title: "Svg" },
-    react_1.default.createElement(Svg_1.Svg, { viewBox: "0 0 300 100", fill: tokens_1.colors.gray["900"] },
-        react_1.default.createElement("circle", { cx: "50", cy: "50", r: "40" })))));

package/src/components/Svg/Svg.md

@@ -1,14 +0,0 @@
-# Usage
-
-`<Svg />` …
-
-`import { Svg } from "@conveyorhq/arrow-ds"`
-
-```jsx
-<Svg>{...}</Svg>
-```
-
-## Props
-
-| Prop | Type | Required | Default Value | Description |
-|:--- |:--- |:--- |:--- |:--- |

package/src/components/Svg/Svg.story.tsx

@@ -1,15 +0,0 @@
-import React from "react";
-import { storiesOf } from "@storybook/react";
-import Story from "../../storybook-components/Story";
-import { colors } from "../../tokens";
-import { Svg } from "./Svg";
-
-const stories = storiesOf("Components/Images/Svg", module);
-
-stories.add("Default", () => (
-  <Story title="Svg">
-    <Svg viewBox="0 0 300 100" fill={colors.gray["900"]}>
-      <circle cx="50" cy="50" r="40" />
-    </Svg>
-  </Story>
-));