oddsgate-ds 1.0.160 → 1.0.161

package/dist/esm/types/components/atoms/Separator/Separator.component.d.ts

@@ -1,4 +1,4 @@
-import { ISeparator } from './Separator.interface';
 import React from 'react';
+import { ISeparator } from './Separator.interface';
 declare const Separator: ({ type, color, height, margin, ...props }: ISeparator) => React.JSX.Element;
 export default Separator;

package/dist/esm/types/components/atoms/Separator/Separator.theme.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
-import { ISeparator } from './Separator.interface';
+import { ISeparator } from "./Separator.interface";
 export declare const StyledSeparator: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ISeparator>> & string;

package/dist/public/assets/dots.svg

@@ -5,7 +5,7 @@
     <desc>Created with Sketch.</desc>
     <defs></defs>
     <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
-        <g id="Artboard-1" sketch:type="MSArtboardGroup" transform="translate(-140.000000, -154.000000)" fill="#D57E00">
+        <g id="Artboard-1" sketch:type="MSArtboardGroup" transform="translate(-140.000000, -154.000000)" fill="#440E3F">
             <g id="dots" sketch:type="MSLayerGroup" transform="translate(140.000000, 154.000000)">
                 <g id="dot" sketch:type="MSShapeGroup">
                     <g>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oddsgate-ds",
-  "version": "1.0.160",
+  "version": "1.0.161",
   "description": "Miew theme component library",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

package/public/assets/dots.svg

@@ -5,7 +5,7 @@
     <desc>Created with Sketch.</desc>
     <defs></defs>
     <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
-        <g id="Artboard-1" sketch:type="MSArtboardGroup" transform="translate(-140.000000, -154.000000)" fill="#D57E00">
+        <g id="Artboard-1" sketch:type="MSArtboardGroup" transform="translate(-140.000000, -154.000000)" fill="#440E3F">
             <g id="dots" sketch:type="MSLayerGroup" transform="translate(140.000000, 154.000000)">
                 <g id="dot" sketch:type="MSShapeGroup">
                     <g>

package/src/components/atoms/Separator/Separator.component.tsx

@@ -1,19 +1,17 @@
-import { ISeparator } from './Separator.interface';
-import React from 'react';
-import { StyledSeparator } from './Separator.theme';
+import React from 'react'
+import styled, { css } from 'styled-components'
+import { ISeparator } from './Separator.interface'
+import { StyledSeparator } from './Separator.theme'
 
 const Separator = ({ type, color, height, margin, ...props }: ISeparator) => {
   return (
     <StyledSeparator
-      style={{
-        borderColor: color ? color : ``,
-        borderTopWidth: height,
-        borderStyle: type,
-        margin: margin ? margin : ''
-      }}
+      type={type}
+      color={color}
+      height={height}
+      margin={margin}
       {...props}
     />
   )
 }
-
 export default Separator

package/src/components/atoms/Separator/Separator.theme.ts

@@ -1,9 +1,27 @@
-import styled, { css } from 'styled-components';
-
-import { ISeparator } from './Separator.interface';
+import styled, { css } from "styled-components";
+import { ISeparator } from "./Separator.interface";
 
 export const StyledSeparator = styled.div<ISeparator>`
   display: block;
   width: 100%;
+  ${({ type, color, height, margin }) => css`
+    border-style: ${type || 'solid'};
+    border-color: ${color || 'black'};
+    border-width: 0 0 ${height || 1}  0;
+    margin: ${margin || 0};
+    
+    ${type === 'dotted' &&
+    css`
+      border-style: dotted;
+      border-image-source: url('./assets/dots.svg');
+      border-image-source: -webkit-image-set(url('/assets/dots.svg') 1x);
+      border-image-slice: 33% 33%;
+      border-image-repeat: round;
+    
+      svg{
+        fill: red;
+      }
+    `}
+  `}
 `;