@ldelia/react-media 0.2.5 → 0.2.7

package/dist/components/timeline/Timeline.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-import './Timeline.css';
 export interface TimelineProps {
     duration: number;
     value: number;

package/dist/components/timeline/Timeline.js

@@ -32,7 +32,24 @@ const TickTimeCollectionDisplay_1 = __importDefault(require("./TickTimeCollectio
 const VaLueLineCanvas_1 = __importDefault(require("./VaLueLineCanvas"));
 const RangeSelectorCanvas_1 = __importDefault(require("./RangeSelectorCanvas"));
 const constants_1 = require("./constants");
-require("./Timeline.css");
+const styled_components_1 = __importDefault(require("styled-components"));
+const TimelineContainer = styled_components_1.default.div `
+  background-color: #f0f0f0;
+  border: 1px solid #c9c9c9;
+  height: 80px;
+  width: 100%;
+  max-width: 100%;
+  overflow-x: auto;
+  position: relative;
+  display: flex;
+`;
+const TimelineWrapper = styled_components_1.default.div `
+  position: absolute;
+  height: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+`;
 exports.ZoomContext = react_1.default.createContext({
     blockOffset: 0,
     pixelsInSecond: 0,
@@ -75,8 +92,8 @@ const Timeline = ({ duration, value, zoomLevel = 0, selectedRange = [], withTime
         const scrollPosition = value * zoomParams.pixelsInSecond - 300;
         timeLineWrapper.scrollLeft = Math.max(0, scrollPosition);
     }, [value, zoomParams]);
-    return (react_1.default.createElement("div", { ref: timeLineContainerRef, className: `timeline-container ${className}` },
-        react_1.default.createElement("div", { className: 'timeline-wrapper', style: { width: duration * zoomParams.pixelsInSecond + 'px' } },
+    return (react_1.default.createElement(TimelineContainer, { ref: timeLineContainerRef, className: className },
+        react_1.default.createElement(TimelineWrapper, { style: { width: duration * zoomParams.pixelsInSecond + 'px' } },
             react_1.default.createElement(exports.ZoomContext.Provider, { value: zoomParams },
                 react_1.default.createElement(VaLueLineCanvas_1.default, { blockStartingTimes: withTimeBlocks ? blockStartingTimes : [], value: value }),
                 react_1.default.createElement(RangeSelectorCanvas_1.default, { selectedRange: selectedRange, onChange: onChange, onRangeChange: onRangeChange }),

package/dist/components/timeline/VaLueLineCanvas.js

@@ -1,12 +1,34 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 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_1 = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const index_1 = require("./index");
-const react_2 = require("react");
 const utils_1 = require("./utils/utils");
 const OverlayCanvas = styled_components_1.default.canvas `
   position: absolute;
@@ -16,17 +38,28 @@ const OverlayCanvas = styled_components_1.default.canvas `
   height: 100%;
   color: #c9c9c9;
 `;
+const PreValueLine = styled_components_1.default.span `
+  position: absolute;
+  left: 0;
+  height: 100%;
+`;
 const ValueLine = styled_components_1.default.span `
   position: absolute;
   width: 1px;
   height: 100%;
   background-color: #575757;
 `;
+const PostValueLine = styled_components_1.default.span `
+  position: absolute;
+  height: 100%;
+`;
 const VaLueLineCanvas = ({ blockStartingTimes = [], value, }) => {
-    const canvasRef = (0, react_2.useRef)(null);
-    const valueLineRef = (0, react_2.useRef)(null);
-    const zoomContextValue = (0, react_2.useContext)(index_1.ZoomContext);
-    const showBlocks = (0, react_2.useCallback)((canvas) => {
+    const canvasRef = (0, react_1.useRef)(null);
+    const preValueLineRef = (0, react_1.useRef)(null);
+    const valueLineRef = (0, react_1.useRef)(null);
+    const postValueLineRef = (0, react_1.useRef)(null);
+    const zoomContextValue = (0, react_1.useContext)(index_1.ZoomContext);
+    const showBlocks = (0, react_1.useCallback)((canvas) => {
         const blockHeight = 20;
         const context = canvas.getContext('2d');
         for (const blockStartingTime of blockStartingTimes) {
@@ -43,18 +76,25 @@ const VaLueLineCanvas = ({ blockStartingTimes = [], value, }) => {
             context.stroke();
         }
     }, [blockStartingTimes, zoomContextValue]);
-    const showValueLine = (0, react_2.useCallback)(() => {
-        const linePosition = (0, utils_1.secondsToPixel)(zoomContextValue, value);
+    const showValueLine = (0, react_1.useCallback)(() => {
+        const canvas = canvasRef.current;
+        const preValueLineElement = preValueLineRef.current;
         const valueLineElement = valueLineRef.current;
-        const elementWidthCSSProperty = window
-            .getComputedStyle(valueLineElement)
-            .getPropertyValue('width')
-            .replace(/[^-\d]/g, '');
-        const elementWidth = parseInt(elementWidthCSSProperty);
-        const linePositionAtValueLineMiddle = linePosition - elementWidth / 2;
-        valueLineElement.style.left = linePositionAtValueLineMiddle + 'px';
+        const postValueLineElement = postValueLineRef.current;
+        const valueLineWidth = (0, utils_1.getComputedElementWidth)(valueLineElement);
+        const linePosition = (0, utils_1.secondsToPixel)(zoomContextValue, value);
+        const valueLinePositionBeginningConsideringWidth = linePosition - valueLineWidth / 2;
+        // configure preValueLineElement
+        preValueLineElement.style.width = (0, utils_1.numberToPxString)(valueLinePositionBeginningConsideringWidth);
+        // configure valueLineElement
+        valueLineElement.style.left = (0, utils_1.numberToPxString)(valueLinePositionBeginningConsideringWidth);
+        // configure postValueLineElement
+        const postValueLinePosition = valueLinePositionBeginningConsideringWidth + valueLineWidth;
+        const postValueLineWidth = canvas.width - postValueLinePosition;
+        postValueLineElement.style.left = (0, utils_1.numberToPxString)(postValueLinePosition);
+        postValueLineElement.style.width = (0, utils_1.numberToPxString)(postValueLineWidth);
     }, [value, zoomContextValue]);
-    (0, react_2.useEffect)(() => {
+    (0, react_1.useEffect)(() => {
         const canvas = canvasRef.current;
         // https://stackoverflow.com/questions/8696631/canvas-drawings-like-lines-are-blurry
         canvas.width = canvas.offsetWidth;
@@ -64,6 +104,8 @@ const VaLueLineCanvas = ({ blockStartingTimes = [], value, }) => {
     }, [showBlocks, showValueLine]);
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(OverlayCanvas, { ref: canvasRef, className: 'media-timeline-value-line-canvas' }),
-        react_1.default.createElement(ValueLine, { ref: valueLineRef, className: 'media-timeline-value-line' })));
+        react_1.default.createElement(PreValueLine, { ref: preValueLineRef, className: 'media-timeline-pre-value-line' }),
+        react_1.default.createElement(ValueLine, { ref: valueLineRef, className: 'media-timeline-value-line' }),
+        react_1.default.createElement(PostValueLine, { ref: postValueLineRef, className: 'media-timeline-post-value-line' })));
 };
 exports.default = VaLueLineCanvas;

package/dist/components/timeline/utils/utils.d.ts

@@ -1,3 +1,5 @@
 import { ZoomContextType } from '../index';
 export declare const secondsToPixel: (zoomContextValue: ZoomContextType, seconds: number) => number;
 export declare const pixelToSeconds: (zoomContextValue: ZoomContextType, pixel: number) => number;
+export declare const getComputedElementWidth: (element: HTMLElement) => number;
+export declare const numberToPxString: (number: number) => string;

package/dist/components/timeline/utils/utils.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.pixelToSeconds = exports.secondsToPixel = void 0;
+exports.numberToPxString = exports.getComputedElementWidth = exports.pixelToSeconds = exports.secondsToPixel = void 0;
 const secondsToPixel = (zoomContextValue, seconds) => {
     return zoomContextValue.pixelsInSecond * seconds;
 };
@@ -10,3 +10,15 @@ const pixelToSeconds = (zoomContextValue, pixel) => {
     return Math.round((seconds + Number.EPSILON) * 100) / 100;
 };
 exports.pixelToSeconds = pixelToSeconds;
+const getComputedElementWidth = (element) => {
+    const elementWidthCSSProperty = window
+        .getComputedStyle(element)
+        .getPropertyValue('width')
+        .replace(/[^-\d]/g, '');
+    return parseInt(elementWidthCSSProperty);
+};
+exports.getComputedElementWidth = getComputedElementWidth;
+const numberToPxString = (number) => {
+    return `${number}px`;
+};
+exports.numberToPxString = numberToPxString;

package/dist/stories/timeline.stories.d.ts

@@ -5,4 +5,5 @@ export default _default;
 export declare const Default: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-bf5e6555").R, TimelineProps>;
 export declare const WithSelectedRange: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-bf5e6555").R, TimelineProps>;
 export declare const WithCustomClassName: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-bf5e6555").R, TimelineProps>;
-export declare const WithOutTimeBlocks: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-bf5e6555").R, TimelineProps>;
+export declare const WithoutTimeBlocks: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-bf5e6555").R, TimelineProps>;
+export declare const Minimalist: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-bf5e6555").R, TimelineProps>;

package/dist/stories/timeline.stories.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.WithOutTimeBlocks = exports.WithCustomClassName = exports.WithSelectedRange = exports.Default = void 0;
+exports.Minimalist = exports.WithoutTimeBlocks = exports.WithCustomClassName = exports.WithSelectedRange = exports.Default = void 0;
 const react_1 = __importDefault(require("react"));
 const timeline_1 = require("../components/timeline");
 const styled_components_1 = __importDefault(require("styled-components"));
@@ -41,12 +41,20 @@ exports.WithCustomClassName.args = {
     duration: 305,
     value: 31,
     zoomLevel: 0,
-    className: 'this-class-redefines-values',
+    className: 'this-class-redefines-styles',
 };
-exports.WithOutTimeBlocks = Template.bind({});
-exports.WithOutTimeBlocks.args = {
+exports.WithoutTimeBlocks = Template.bind({});
+exports.WithoutTimeBlocks.args = {
     duration: 305,
     value: 31,
     zoomLevel: 0,
     withTimeBlocks: false,
 };
+exports.Minimalist = Template.bind({});
+exports.Minimalist.args = {
+    duration: 305,
+    value: 31,
+    zoomLevel: 0,
+    withTimeBlocks: false,
+    className: 'minimalist',
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ldelia/react-media",
-  "version": "0.2.5",
+  "version": "0.2.7",
   "description": "A React components collection for media-related features.",
   "private": false,
   "keywords": [

package/src/components/timeline/Timeline.tsx

@@ -3,8 +3,25 @@ import TickTimeCollectionDisplay from './TickTimeCollectionDisplay';
 import VaLueLineCanvas from './VaLueLineCanvas';
 import RangeSelectorCanvas from './RangeSelectorCanvas';
 import { zoomLevelConfigurations } from './constants';
+import styled from 'styled-components';
 
-import './Timeline.css';
+const TimelineContainer = styled.div`
+  background-color: #f0f0f0;
+  border: 1px solid #c9c9c9;
+  height: 80px;
+  width: 100%;
+  max-width: 100%;
+  overflow-x: auto;
+  position: relative;
+  display: flex;
+`;
+const TimelineWrapper = styled.div`
+  position: absolute;
+  height: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+`;
 
 export interface TimelineProps {
   duration: number; // duration in seconds
@@ -88,12 +105,8 @@ export const Timeline: React.FC<TimelineProps> = ({
   }, [value, zoomParams]);
 
   return (
-    <div
-      ref={timeLineContainerRef}
-      className={`timeline-container ${className}`}
-    >
-      <div
-        className={'timeline-wrapper'}
+    <TimelineContainer ref={timeLineContainerRef} className={className}>
+      <TimelineWrapper
         style={{ width: duration * zoomParams.pixelsInSecond + 'px' }}
       >
         <ZoomContext.Provider value={zoomParams}>
@@ -110,7 +123,7 @@ export const Timeline: React.FC<TimelineProps> = ({
             <TickTimeCollectionDisplay tickTimes={blockStartingTimes} />
           )}
         </ZoomContext.Provider>
-      </div>
-    </div>
+      </TimelineWrapper>
+    </TimelineContainer>
   );
 };

package/src/components/timeline/VaLueLineCanvas.tsx

@@ -1,9 +1,12 @@
-import React from 'react';
+import React, { useCallback, useContext, useEffect, useRef } from 'react';
 import styled from 'styled-components';
 
 import { ZoomContext, ZoomContextType } from './index';
-import { useCallback, useContext, useEffect, useRef } from 'react';
-import { secondsToPixel } from './utils/utils';
+import {
+  getComputedElementWidth,
+  numberToPxString,
+  secondsToPixel,
+} from './utils/utils';
 
 export interface VaLueLineCanvasProps {
   blockStartingTimes: number[];
@@ -18,6 +21,13 @@ const OverlayCanvas = styled.canvas`
   height: 100%;
   color: #c9c9c9;
 `;
+
+const PreValueLine = styled.span`
+  position: absolute;
+  left: 0;
+  height: 100%;
+`;
+
 const ValueLine = styled.span`
   position: absolute;
   width: 1px;
@@ -25,12 +35,21 @@ const ValueLine = styled.span`
   background-color: #575757;
 `;
 
+const PostValueLine = styled.span`
+  position: absolute;
+  height: 100%;
+`;
+
 const VaLueLineCanvas: React.FC<VaLueLineCanvasProps> = ({
   blockStartingTimes = [],
   value,
 }) => {
   const canvasRef = useRef(null);
+
+  const preValueLineRef = useRef(null);
   const valueLineRef = useRef(null);
+  const postValueLineRef = useRef(null);
+
   const zoomContextValue: ZoomContextType = useContext(ZoomContext);
 
   const showBlocks = useCallback(
@@ -61,17 +80,33 @@ const VaLueLineCanvas: React.FC<VaLueLineCanvasProps> = ({
   );
 
   const showValueLine = useCallback(() => {
-    const linePosition: number = secondsToPixel(zoomContextValue, value);
+    const canvas: HTMLCanvasElement = canvasRef.current!;
 
+    const preValueLineElement: HTMLElement = preValueLineRef.current!;
     const valueLineElement: HTMLElement = valueLineRef.current!;
-    const elementWidthCSSProperty: string = window
-      .getComputedStyle(valueLineElement)
-      .getPropertyValue('width')
-      .replace(/[^-\d]/g, '');
-    const elementWidth: number = parseInt(elementWidthCSSProperty);
-    const linePositionAtValueLineMiddle: number =
-      linePosition - elementWidth / 2;
-    valueLineElement.style.left = linePositionAtValueLineMiddle + 'px';
+    const postValueLineElement: HTMLElement = postValueLineRef.current!;
+
+    const valueLineWidth: number = getComputedElementWidth(valueLineElement);
+    const linePosition: number = secondsToPixel(zoomContextValue, value);
+    const valueLinePositionBeginningConsideringWidth: number =
+      linePosition - valueLineWidth / 2;
+
+    // configure preValueLineElement
+    preValueLineElement.style.width = numberToPxString(
+      valueLinePositionBeginningConsideringWidth,
+    );
+
+    // configure valueLineElement
+    valueLineElement.style.left = numberToPxString(
+      valueLinePositionBeginningConsideringWidth,
+    );
+
+    // configure postValueLineElement
+    const postValueLinePosition =
+      valueLinePositionBeginningConsideringWidth + valueLineWidth;
+    const postValueLineWidth = canvas.width - postValueLinePosition;
+    postValueLineElement.style.left = numberToPxString(postValueLinePosition);
+    postValueLineElement.style.width = numberToPxString(postValueLineWidth);
   }, [value, zoomContextValue]);
 
   useEffect(() => {
@@ -91,10 +126,16 @@ const VaLueLineCanvas: React.FC<VaLueLineCanvasProps> = ({
         ref={canvasRef}
         className={'media-timeline-value-line-canvas'}
       />
-      <ValueLine
-        ref={valueLineRef}
-        className={'media-timeline-value-line'}
-      ></ValueLine>
+
+      <PreValueLine
+        ref={preValueLineRef}
+        className={'media-timeline-pre-value-line'}
+      />
+      <ValueLine ref={valueLineRef} className={'media-timeline-value-line'} />
+      <PostValueLine
+        ref={postValueLineRef}
+        className={'media-timeline-post-value-line'}
+      />
     </>
   );
 };

package/src/components/timeline/utils/utils.ts

@@ -14,3 +14,15 @@ export const pixelToSeconds = (
   const seconds = pixel / zoomContextValue.pixelsInSecond;
   return Math.round((seconds + Number.EPSILON) * 100) / 100;
 };
+
+export const getComputedElementWidth = (element: HTMLElement): number => {
+  const elementWidthCSSProperty: string = window
+    .getComputedStyle(element)
+    .getPropertyValue('width')
+    .replace(/[^-\d]/g, '');
+  return parseInt(elementWidthCSSProperty);
+};
+
+export const numberToPxString = (number: number): string => {
+  return `${number}px`;
+};

package/src/stories/timeline.stories.custom.css

@@ -1,3 +1,29 @@
-#storybook-root .this-class-redefines-values {
+#storybook-root .this-class-redefines-styles {
     background-color: transparent;
 }
+
+#storybook-root .minimalist {
+    background-color: transparent;
+    border: 0;
+}
+
+#storybook-root .minimalist > canvas {
+    color: transparent;
+}
+
+#storybook-root .minimalist > div > .media-timeline-pre-value-line {
+    height: 4px;
+    background-color: greenyellow;
+}
+
+#storybook-root .minimalist > div > .media-timeline-value-line {
+    height: 10px;
+    width: 10px;
+    background-color: greenyellow;
+    border-radius: 10px;
+}
+
+#storybook-root .minimalist > div > .media-timeline-post-value-line {
+    height: 4px;
+    background-color: rgba(10, 10, 10, 0.24);
+}

package/src/stories/timeline.stories.tsx

@@ -45,13 +45,22 @@ WithCustomClassName.args = {
   duration: 305,
   value: 31,
   zoomLevel: 0,
-  className: 'this-class-redefines-values',
+  className: 'this-class-redefines-styles',
 };
 
-export const WithOutTimeBlocks = Template.bind({});
-WithOutTimeBlocks.args = {
+export const WithoutTimeBlocks = Template.bind({});
+WithoutTimeBlocks.args = {
   duration: 305,
   value: 31,
   zoomLevel: 0,
   withTimeBlocks: false,
 };
+
+export const Minimalist = Template.bind({});
+Minimalist.args = {
+  duration: 305,
+  value: 31,
+  zoomLevel: 0,
+  withTimeBlocks: false,
+  className: 'minimalist',
+};

package/dist/stories/Button.d.ts

@@ -1,29 +0,0 @@
-import React from 'react';
-import './button.css';
-interface ButtonProps {
-    /**
-     * Is this the principal call to action on the page?
-     */
-    primary?: boolean;
-    /**
-     * What background color to use
-     */
-    backgroundColor?: string;
-    /**
-     * How large should the button be?
-     */
-    size?: 'small' | 'medium' | 'large';
-    /**
-     * Button contents
-     */
-    label: string;
-    /**
-     * Optional click handler
-     */
-    onClick?: () => void;
-}
-/**
- * Primary UI component for user interaction
- */
-export declare const Button: ({ primary, size, backgroundColor, label, ...props }: ButtonProps) => React.JSX.Element;
-export {};

package/dist/stories/Button.js

@@ -1,30 +0,0 @@
-"use strict";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Button = void 0;
-const react_1 = __importDefault(require("react"));
-require("./button.css");
-/**
- * Primary UI component for user interaction
- */
-const Button = (_a) => {
-    var { primary = false, size = 'medium', backgroundColor, label } = _a, props = __rest(_a, ["primary", "size", "backgroundColor", "label"]);
-    const mode = primary
-        ? 'storybook-button--primary'
-        : 'storybook-button--secondary';
-    return (react_1.default.createElement("button", Object.assign({ type: "button", className: ['storybook-button', `storybook-button--${size}`, mode].join(' '), style: { backgroundColor } }, props), label));
-};
-exports.Button = Button;

package/dist/stories/Button.stories.js

@@ -1,47 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Small = exports.Large = exports.Secondary = exports.Primary = void 0;
-const test_1 = require("@storybook/test");
-const Button_1 = require("./Button");
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
-const meta = {
-    title: 'Example/Button',
-    component: Button_1.Button,
-    parameters: {
-        // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
-        layout: 'centered',
-    },
-    // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
-    tags: ['autodocs'],
-    // More on argTypes: https://storybook.js.org/docs/api/argtypes
-    argTypes: {
-        backgroundColor: { control: 'color' },
-    },
-    // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
-    args: { onClick: (0, test_1.fn)() },
-};
-exports.default = meta;
-// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
-exports.Primary = {
-    args: {
-        primary: true,
-        label: 'Button',
-    },
-};
-exports.Secondary = {
-    args: {
-        label: 'Button',
-    },
-};
-exports.Large = {
-    args: {
-        size: 'large',
-        label: 'Button',
-    },
-};
-exports.Small = {
-    args: {
-        size: 'small',
-        label: 'Button',
-    },
-};

package/src/components/timeline/Timeline.css

@@ -1,15 +0,0 @@
-.timeline-container {
-    background-color: #f0f0f0;
-    border: 1px solid #c9c9c9;
-    height: 80px;
-    width: 100%;
-    max-width: 100%;
-    overflow-x: auto;
-    position: relative;
-    display: flex;
-}
-
-.timeline-wrapper {
-    position: absolute;
-    height: 100%;
-}