@marigold/icons 0.2.0 → 0.3.0

package/src/ui/ArrowDownA.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { SVG } from '../SVG';
+import { SVG } from '@marigold/system';
 
 export const ArrowDownA = ({ className = '', ...props }) => (
   <SVG className={className} {...props}>

package/src/ui/ArrowLeft.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { SVG } from '../SVG';
+import { SVG } from '@marigold/system';
 
 export const ArrowLeft = ({ className = '', ...props }) => (
   <SVG className={className} {...props}>

package/src/ui/ArrowLeftA.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { SVG } from '../SVG';
+import { SVG } from '@marigold/system';
 
 export const ArrowLeftA = ({ className = '', ...props }) => (
   <SVG className={className} {...props}>

package/src/ui/ArrowRight.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { SVG } from '../SVG';
+import { SVG } from '@marigold/system';
 
 export const ArrowRight = ({ className = '', ...props }) => (
   <SVG className={className} {...props}>

package/src/ui/ArrowRightA.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { SVG } from '../SVG';
+import { SVG } from '@marigold/system';
 
 export const ArrowRightA = ({ className = '', ...props }) => (
   <SVG className={className} {...props}>

package/src/ui/ArrowUp.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { SVG } from '../SVG';
+import { SVG } from '@marigold/system';
 
 export const ArrowUp = ({ className = '', ...props }) => (
   <SVG className={className} {...props}>

package/src/ui/ArrowUpA.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { SVG } from '../SVG';
+import { SVG } from '@marigold/system';
 
 export const ArrowUpA = ({ className = '', ...props }) => (
   <SVG className={className} {...props}>

package/src/ui/BurgerMenu.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { SVG } from '../SVG';
+import { SVG } from '@marigold/system';
 
 export const BurgerMenu = ({ className = '', ...props }) => (
   <SVG className={className} {...props}>

package/src/ui/Check.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { SVG } from '../SVG';
+import { SVG } from '@marigold/system';
 
 export const Check = ({ className = '', ...props }) => (
   <SVG className={className} {...props}>

package/src/ui/CircleChecked.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { SVG } from '../SVG';
+import { SVG } from '@marigold/system';
 
 export const CircleChecked = ({ className = '', ...props }) => (
   <SVG className={className} {...props}>

package/src/ui/CircleUnchecked.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { SVG } from '../SVG';
+import { SVG } from '@marigold/system';
 
 export const CircleUnchecked = ({ className = '', ...props }) => (
   <SVG className={className} {...props}>

package/src/ui/Close.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { SVG } from '../SVG';
+import { SVG } from '@marigold/system';
 
 export const Close = ({ className = '', ...props }) => (
   <SVG className={className} {...props}>

package/src/ui/Delete.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { SVG } from '../SVG';
+import { SVG } from '@marigold/system';
 
 export const Delete = ({ className = '', ...props }) => (
   <SVG className={className} {...props}>

package/src/ui/ExternalLink.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { SVG } from '../SVG';
+import { SVG } from '@marigold/system';
 
 export const ExternalLink = ({ className = '', ...props }) => (
   <SVG className={className} {...props}>

package/src/ui/Filter.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { SVG } from '../SVG';
+import { SVG } from '@marigold/system';
 
 export const Filter = ({ className = '', ...props }) => (
   <SVG className={className} {...props}>

package/src/ui/IconMore.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { SVG } from '../SVG';
+import { SVG } from '@marigold/system';
 
 export const IconMore = ({ className = '', ...props }) => (
   <SVG className={className} {...props}>

package/src/ui/Remove.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { SVG } from '../SVG';
+import { SVG } from '@marigold/system';
 
 export const Remove = ({ className = '', ...props }) => (
   <SVG className={className} {...props}>

package/src/ui/Search.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { SVG } from '../SVG';
+import { SVG } from '@marigold/system';
 
 export const Search = ({ className = '', ...props }) => (
   <SVG className={className} {...props}>

package/src/ui/SettingDots.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { SVG } from '../SVG';
+import { SVG } from '@marigold/system';
 
 export const SettingDots = ({ className = '', ...props }) => (
   <SVG className={className} {...props}>

package/src/ui/SquareChecked.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { SVG } from '../SVG';
+import { SVG } from '@marigold/system';
 
 export const SquareChecked = ({ className = '', ...props }) => (
   <SVG className={className} {...props}>

package/src/ui/SquareUnchecked.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { SVG } from '../SVG';
+import { SVG } from '@marigold/system';
 
 export const SquareUnchecked = ({ className = '', ...props }) => (
   <SVG className={className} {...props}>

package/src/user/Cart.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { SVG } from '../SVG';
+import { SVG } from '@marigold/system';
 
 export const Cart = ({ className = '', ...props }) => (
   <SVG className={className} {...props}>

package/src/user/CreditCard.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { SVG } from '../SVG';
+import { SVG } from '@marigold/system';
 
 export const CreditCard = ({ className = '', ...props }) => (
   <SVG className={className} {...props}>

package/src/user/Group.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { SVG } from '../SVG';
+import { SVG } from '@marigold/system';
 
 export const Group = ({ className = '', ...props }) => (
   <SVG className={className} {...props}>

package/src/user/Id.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { SVG } from '../SVG';
+import { SVG } from '@marigold/system';
 
 export const Id = ({ className = '', ...props }) => (
   <SVG className={className} {...props}>

package/src/user/SmilieDissatisfied.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { SVG } from '../SVG';
+import { SVG } from '@marigold/system';
 
 export const SmilieDissatisfied = ({ className = '', ...props }) => (
   <SVG className={className} {...props}>

package/src/user/SmilieNeutral.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { SVG } from '../SVG';
+import { SVG } from '@marigold/system';
 
 export const SmilieNeutral = ({ className = '', ...props }) => (
   <SVG className={className} {...props}>

package/src/user/SmilieSatisfied.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { SVG } from '../SVG';
+import { SVG } from '@marigold/system';
 
 export const SmilieSatisfied = ({ className = '', ...props }) => (
   <SVG className={className} {...props}>

package/src/user/SmilieVeryDissatisfied.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { SVG } from '../SVG';
+import { SVG } from '@marigold/system';
 
 export const SmilieVeryDissatisfied = ({ className = '', ...props }) => (
   <SVG className={className} {...props}>

package/src/user/SmilieVerySatisfied.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { SVG } from '../SVG';
+import { SVG } from '@marigold/system';
 
 export const SmilieVerySatisfied = ({ className = '', ...props }) => (
   <SVG className={className} {...props}>

package/src/user/User.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { SVG } from '../SVG';
+import { SVG } from '@marigold/system';
 
 export const User = ({ className = '', ...props }) => (
   <SVG className={className} {...props}>

package/dist/SVG/SVG.d.ts

@@ -1,8 +0,0 @@
-import React from 'react';
-import { ComponentProps } from '@marigold/types';
-export declare type SVGProps = {
-    variant?: string;
-    size?: number;
-    title?: string;
-} & ComponentProps<'svg'>;
-export declare const SVG: React.FC<SVGProps>;

package/dist/SVG/index.d.ts

@@ -1 +0,0 @@
-export * from './SVG';

package/src/SVG/SVG.stories.mdx

@@ -1,55 +0,0 @@
-import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
-import { SVG } from './SVG';
-
-<Meta
-  title="Components/SVG"
-  argTypes={{
-    variant: {
-      control: {
-        type: 'text',
-      },
-      table: {
-        defaultValue: {
-          summary: 'icon',
-        },
-      },
-    },
-    size: {
-      control: {
-        type: 'range',
-        min: 0,
-        max: 96,
-        step: 2,
-      },
-      table: {
-        defaultValue: {
-          summary: 24,
-        },
-      },
-    },
-    fill: {
-      control: {
-        type: 'text',
-      },
-      table: {
-        defaultValue: {
-          summary: 'currentColor',
-        },
-      },
-    },
-  }}
-/>
-
-# SVG
-
-export const Template = args => (
-  <SVG {...args}>
-    <path d="M9.9 20.113V13.8415H14.1V20.113H19.35V11.751H22.5L12 2.34375L1.5 11.751H4.65V20.113H9.9Z" />
-  </SVG>
-);
-
-<Canvas>
-  <Story name="Default">{Template.bind({})}</Story>
-</Canvas>
-
-<ArgsTable story="Default" />

package/src/SVG/SVG.test.tsx

@@ -1,69 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import { SVG } from './SVG';
-
-test('supports default fill color', () => {
-  render(
-    <SVG title="svg">
-      <path d="M9.9 20.113V13.8415H14" />
-    </SVG>
-  );
-  const svg = screen.getByTitle(/svg/);
-
-  expect(svg.getAttribute('fill')).toEqual('currentcolor');
-});
-
-test('supports default size', () => {
-  render(
-    <SVG title="svg">
-      <path d="M9.9 20.113V13.8415H14" />
-    </SVG>
-  );
-  const svg = screen.getByTitle(/svg/);
-
-  expect(svg.getAttribute('width')).toEqual('24');
-});
-
-test('supports size prop', () => {
-  render(
-    <SVG title="svg" size={30}>
-      <path d="M9.9 20.113V13.8415H14" />
-    </SVG>
-  );
-  const svg = screen.getByTitle(/svg/);
-
-  expect(svg.getAttribute('width')).toEqual('30');
-});
-
-test('supports fill prop', () => {
-  render(
-    <SVG title="svg" fill="#fafafa">
-      <path d="M9.9 20.113V13.8415H14" />
-    </SVG>
-  );
-  const svg = screen.getByTitle(/svg/);
-
-  expect(svg.getAttribute('fill')).toEqual('#fafafa');
-});
-
-test('accepts custom styles prop className', () => {
-  render(
-    <SVG title="svg" className="custom-class-name">
-      <path d="M9.9 20.113V13.8415H14" />
-    </SVG>
-  );
-  const svg = screen.getByTitle(/svg/);
-
-  expect(svg.getAttribute('class')).toMatch(/custom-class-name/);
-});
-
-test('renders <svg> element', () => {
-  render(
-    <SVG title="svg">
-      <path d="M9.9 20.113V13.8415H14" />
-    </SVG>
-  );
-  const svg = screen.getByTitle(/svg/);
-
-  expect(svg instanceof SVGElement).toBeTruthy();
-});

package/src/SVG/SVG.tsx

@@ -1,30 +0,0 @@
-import React from 'react';
-import { Element } from '@marigold/system';
-import { ComponentProps } from '@marigold/types';
-
-export type SVGProps = {
-  variant?: string;
-  size?: number;
-  title?: string; // For Testing
-} & ComponentProps<'svg'>;
-
-export const SVG: React.FC<SVGProps> = ({
-  variant = 'icon',
-  size = 24,
-  className,
-  children,
-  ...props
-}) => (
-  <Element
-    as="svg"
-    variant={`icon.${variant}`}
-    width={size}
-    height={size}
-    className={className}
-    viewBox="0 0 24 24"
-    fill="currentcolor"
-    {...props}
-  >
-    {children}
-  </Element>
-);

package/src/SVG/index.ts

@@ -1 +0,0 @@
-export * from './SVG';