Skip to content

Commit

Permalink
feat: logo component
Browse files Browse the repository at this point in the history
  • Loading branch information
mogusbi-motech committed Feb 17, 2023
1 parent f8f0a8c commit 2a90a64
Show file tree
Hide file tree
Showing 7 changed files with 124 additions and 10 deletions.
4 changes: 1 addition & 3 deletions packages/project-tailwind/src/components/Alert.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -37,9 +37,7 @@ export interface IAlertProps {
const DISMISS_TEXT = 'Dismiss';

/**
* Alert component
*
* @description Used to display application messages and alerts
* Display application messages and alerts
*
* @param props - Component props
*
Expand Down
37 changes: 37 additions & 0 deletions packages/project-tailwind/src/components/Logo.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
import { ComponentPropsWithoutRef } from 'react';

/** Logo component properties */
export interface ILogoProps extends ComponentPropsWithoutRef<'svg'> {
/** Alternative information text */
alt: string;
}

/**
* Motech Development logo
*
* @param props - Component props
*
* @returns Logo component
*/
export function Logo(props: ILogoProps) {
const { alt, ...rest } = props;

return (
<svg
{...rest}
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 345.21 398.61"
aria-labelledby="logo-alt-text"
>
<title id="logo-alt-text">{alt}</title>
<polygon
className="fill-current"
points="172.6 199.31 57.53 132.87 57.53 332.18 0 298.96 0 99.65 172.6 0 345.21 99.65 345.21 298.96 287.67 332.18 287.67 132.87 172.6 199.31"
/>
<polygon
className="fill-current"
points="115.07 365.39 115.07 232.53 172.6 265.74 230.14 232.53 230.14 365.39 172.6 398.61 115.07 365.39"
/>
</svg>
);
}
18 changes: 18 additions & 0 deletions packages/project-tailwind/src/components/__tests__/Logo.test.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import { render } from '@testing-library/react';
import { Logo } from '../Logo';

describe('Logo', () => {
it('should render the logo', () => {
const { asFragment } = render(<Logo alt="Motech Development" />);

expect(asFragment()).toMatchSnapshot();
});

it('should apply native svg attributes', () => {
const { asFragment } = render(
<Logo className="h-40 w-40 text-blue-600" alt="Motech Development" />,
);

expect(asFragment()).toMatchSnapshot();
});
});
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Logo should apply native svg attributes 1`] = `
<DocumentFragment>
<svg
aria-labelledby="logo-alt-text"
class="w-40 h-40 text-blue-600"
viewBox="0 0 345.21 398.61"
xmlns="http://www.w3.org/2000/svg"
>
<title
id="logo-alt-text"
>
Motech Development
</title>
<polygon
class="fill-current"
points="172.6 199.31 57.53 132.87 57.53 332.18 0 298.96 0 99.65 172.6 0 345.21 99.65 345.21 298.96 287.67 332.18 287.67 132.87 172.6 199.31"
/>
<polygon
class="fill-current"
points="115.07 365.39 115.07 232.53 172.6 265.74 230.14 232.53 230.14 365.39 172.6 398.61 115.07 365.39"
/>
</svg>
</DocumentFragment>
`;

exports[`Logo should render the logo 1`] = `
<DocumentFragment>
<svg
aria-labelledby="logo-alt-text"
viewBox="0 0 345.21 398.61"
xmlns="http://www.w3.org/2000/svg"
>
<title
id="logo-alt-text"
>
Motech Development
</title>
<polygon
class="fill-current"
points="172.6 199.31 57.53 132.87 57.53 332.18 0 298.96 0 99.65 172.6 0 345.21 99.65 345.21 298.96 287.67 332.18 287.67 132.87 172.6 199.31"
/>
<polygon
class="fill-current"
points="115.07 365.39 115.07 232.53 172.6 265.74 230.14 232.53 230.14 365.39 172.6 398.61 115.07 365.39"
/>
</svg>
</DocumentFragment>
`;
1 change: 1 addition & 0 deletions packages/project-tailwind/src/index.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import './styles/tailwind.css';

export * from './components/Alert';
export * from './components/Logo';
10 changes: 3 additions & 7 deletions packages/project-tailwind/src/stories/Alert.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,9 @@ import { ComponentMeta, ComponentStory } from '@storybook/react';
import { Alert } from '../components/Alert';

export default {
argTypes: {
icon: {
defaultValue: <ExclamationTriangleIcon />,
},
message: {
defaultValue: 'Hello, world!',
},
args: {
icon: <ExclamationTriangleIcon />,
message: 'Hello, world!',
},
component: Alert,
} as ComponentMeta<typeof Alert>;
Expand Down
14 changes: 14 additions & 0 deletions packages/project-tailwind/src/stories/Logo.stories.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import { ComponentMeta, ComponentStory } from '@storybook/react';
import { Logo } from '../components/Logo';

export default {
args: {
alt: 'Motech Development',
className: 'w-40 h-40 text-blue-600',
},
component: Logo,
} as ComponentMeta<typeof Logo>;

const Template: ComponentStory<typeof Logo> = (props) => <Logo {...props} />;

export const LogoComponent = Template.bind({});

0 comments on commit 2a90a64

Please sign in to comment.