Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feat #30 - Toggle and Icon components #52

Merged
merged 22 commits into from
Aug 21, 2020
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
22 commits
Select commit Hold shift + click to select a range
eb42821
Feat #30 - Add Toggle component, refac
sam-dassana Aug 19, 2020
cf2d94d
Feat #30 - Add icon component
sam-dassana Aug 20, 2020
f1f5d13
Feat #30 - Adress PR comments
sam-dassana Aug 20, 2020
240a4f1
Feat #30 - Fix relative Urls
sam-dassana Aug 20, 2020
c4f9dfd
Feat #30 - Add components to index.ts for export
sam-dassana Aug 20, 2020
a55f263
Feat #30 - Update tsconfig.rollup.json
sam-dassana Aug 20, 2020
3683a7d
Feat #30 - Address PR comments
sam-dassana Aug 20, 2020
45fb102
Feat #30 - Update Link, Icon conditional props, address PR comments
sam-dassana Aug 21, 2020
d03732a
Update src/components/Icon/index.tsx
parth-dassana Aug 21, 2020
4a41517
Feat #30 - Delete Table
sam-dassana Aug 21, 2020
799b1fa
Feat #30 - Add Toggle component, refac
sam-dassana Aug 19, 2020
6c5e5f9
Feat #30 - Add icon component
sam-dassana Aug 20, 2020
9a48102
Feat #30 - Adress PR comments
sam-dassana Aug 20, 2020
80c6afc
Feat #30 - Fix relative Urls
sam-dassana Aug 20, 2020
513c7bc
Feat #30 - Add components to index.ts for export
sam-dassana Aug 20, 2020
6b65346
Feat #30 - Update tsconfig.rollup.json
sam-dassana Aug 20, 2020
eeb9bf0
Feat #30 - Address PR comments
sam-dassana Aug 20, 2020
a97600c
Feat #30 - Update Link, Icon conditional props, address PR comments
sam-dassana Aug 21, 2020
a7317a6
Update src/components/Icon/index.tsx
parth-dassana Aug 21, 2020
e5c2f43
Feat #30 - Delete Table
sam-dassana Aug 21, 2020
a27fc64
Update snapshots after rebase
sam-dassana Aug 21, 2020
e1e0cda
Merge branch 'web-components' of github.com:dassana-io/web-components…
sam-dassana Aug 21, 2020
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 14 additions & 10 deletions .github/workflows/verify-labels.yml
Original file line number Diff line number Diff line change
@@ -1,18 +1,22 @@
name: Verify Labels

name: Pull Request Labels
on:
pull_request:
types: [opened, labeled, unlabeled, synchronize]

jobs:
check_pr_labels:
name: Verify that the PR has the appropriate label(s)
runs-on: ubuntu-latest
name: Verify that the PR has a valid label
steps:
- name: Checkout
uses: actions/checkout@v2
- name: Verify PR label action
uses: jesusvasquez333/[email protected]
- name: Check for version label
if: ${{ github.base_ref == 'master' }}
uses: mheap/github-action-required-labels@v1
with:
github-token: '${{ secrets.GITHUB_TOKEN }}'
valid-labels: 'fix, bug, bugfix, feature, enhancement, chore'
mode: exactly
count: 1
labels: 'patch, minor, major'
- name: Check for issue type label
uses: mheap/github-action-required-labels@v1
with:
mode: minimum
count: 1
labels: 'fix, bug, bugfix, feature, enhancement, chore'
94 changes: 91 additions & 3 deletions src/__snapshots__/storybook.test.ts.snap
Original file line number Diff line number Diff line change
Expand Up @@ -85,6 +85,22 @@ exports[`Storyshots Button Primary Disabled 1`] = `
</button>
`;

exports[`Storyshots Icon Custom 1`] = `
<img
alt="https://dummyimage.com/600x400/000/fff&text=Dassana"
height={64}
src="https://dummyimage.com/600x400/000/fff&text=Dassana"
/>
`;

exports[`Storyshots Icon Predefined 1`] = `
<img
alt="dassana-orange"
height={64}
src="dassana-orange.png"
/>
`;

exports[`Storyshots InputField Default 1`] = `
<div
className="container-0-2-3 container-d0-0-2-8"
Expand Down Expand Up @@ -193,10 +209,9 @@ exports[`Storyshots InputField Loading 1`] = `
</div>
`;

exports[`Storyshots Link Default 1`] = `
exports[`Storyshots Link Click 1`] = `
<a
className="ant-typography"
href=" "
onClick={[Function]}
style={
Object {
Expand All @@ -206,7 +221,24 @@ exports[`Storyshots Link Default 1`] = `
target="_self"
>
<u>
Default
Click
</u>
</a>
`;

exports[`Storyshots Link Href 1`] = `
<a
className="ant-typography"
href=" "
style={
Object {
"WebkitLineClamp": null,
}
}
target="_self"
>
<u>
Href
</u>
</a>
`;
Expand Down Expand Up @@ -249,3 +281,59 @@ exports[`Storyshots Tag Default 1`] = `
Default
</span>
`;

exports[`Storyshots Toggle Checked Disabled 1`] = `
<button
aria-checked={true}
className="ant-switch ant-switch-checked ant-switch-disabled"
disabled={true}
onClick={[Function]}
onKeyDown={[Function]}
role="switch"
type="button"
>
<div
className="ant-switch-handle"
/>
<span
className="ant-switch-inner"
/>
</button>
`;

exports[`Storyshots Toggle Default 1`] = `
<button
aria-checked={true}
className="ant-switch ant-switch-checked"
onClick={[Function]}
onKeyDown={[Function]}
role="switch"
type="button"
>
<div
className="ant-switch-handle"
/>
<span
className="ant-switch-inner"
/>
</button>
`;

exports[`Storyshots Toggle Disabled 1`] = `
<button
aria-checked={false}
className="ant-switch ant-switch-disabled"
disabled={true}
onClick={[Function]}
onKeyDown={[Function]}
role="switch"
type="button"
>
<div
className="ant-switch-handle"
/>
<span
className="ant-switch-inner"
/>
</button>
`;
61 changes: 61 additions & 0 deletions src/assets/icons/aws.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/icons/dassana-blue.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/icons/dassana-orange.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion src/components/Button/Button.test.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from 'react'
import Button, { ButtonProps } from './index'
import Button, { ButtonProps } from '.'
import { shallow, ShallowWrapper } from 'enzyme'

let wrapper: ShallowWrapper<ButtonProps>
Expand Down
2 changes: 1 addition & 1 deletion src/components/Button/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ export interface ButtonProps {
primary?: boolean
/**
* Adds the disabled attribute and styles (opacity, gray scale filter, no pointer events).
* */
*/
disabled?: boolean
/**
* Array of classes to pass to button.
Expand Down
33 changes: 33 additions & 0 deletions src/components/Icon/Icon.stories.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
import React from 'react'
import Icon, { IconProps } from '.'
import { Meta, Story } from '@storybook/react/types-6-0'

export default {
argTypes: {
height: { defaultValue: 64 }
},
component: Icon,
title: 'Icon'
} as Meta

const Template: Story<IconProps> = args => <Icon {...args} />

export const Predefined = Template.bind({})
Predefined.argTypes = {
icon: {
control: { disable: true }
}
}
Predefined.args = {
iconKey: 'dassana-orange'
}

export const Custom = Template.bind({})
Custom.argTypes = {
iconKey: {
control: { disable: true }
}
}
Custom.args = {
icon: 'https://dummyimage.com/600x400/000/fff&text=Dassana'
}
parth-dassana marked this conversation as resolved.
Show resolved Hide resolved
65 changes: 65 additions & 0 deletions src/components/Icon/Icon.test.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
import React from 'react'
import Icon, { IconProps } from '.'
import { mount, ReactWrapper } from 'enzyme'

let wrapper: ReactWrapper

describe('Predefined Icon', () => {
const mockProps: IconProps = {
height: 64,
iconKey: 'dassana-blue'
}

beforeEach(() => {
wrapper = mount(<Icon {...mockProps} />)
})

it('renders', () => {
expect(wrapper).toHaveLength(1)
})

it('renders with correct src url', () => {
expect(wrapper.getDOMNode().getAttribute('src')).toContain(
'dassana-blue'
)
})

it('has the correct alt attribute', () => {
expect(wrapper.getDOMNode().getAttribute('alt')).toBe('dassana-blue')
})

it('has the correct height', () => {
expect(wrapper.getDOMNode().getAttribute('height')).toBe('64')
})
})

describe('Custom Icon', () => {
const mockProps: IconProps = {
height: 64,
icon: 'https://dummyimage.com/600x400/000/fff&text=Dassana'
}

beforeEach(() => {
wrapper = mount(<Icon {...mockProps} />)
})

it('renders', () => {
expect(wrapper).toHaveLength(1)
})

it('renders with correct src url', () => {
expect(wrapper.getDOMNode().getAttribute('src')).toBe(
'https://dummyimage.com/600x400/000/fff&text=Dassana'
)
})

it('has the correct alt attribute', () => {
expect(wrapper.getDOMNode().getAttribute('alt')).toBe(
'https://dummyimage.com/600x400/000/fff&text=Dassana'
)
})

it('has the correct height', () => {
expect(wrapper.getDOMNode().getAttribute('height')).toBe('64')
})
})
13 changes: 13 additions & 0 deletions src/components/Icon/IconsMap.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import AWS from 'assets/icons/aws.svg'
import DASSANA_BLUE from 'assets/icons/dassana-blue.png'
import DASSANA_ORANGE from 'assets/icons/dassana-orange.png'

const Icons = {
'aws-logo': AWS,
'dassana-blue': DASSANA_BLUE,
'dassana-orange': DASSANA_ORANGE
}

export type IconName = keyof typeof Icons

export default Icons
41 changes: 41 additions & 0 deletions src/components/Icon/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
import Icons, { IconName } from './IconsMap'
import React, { FC } from 'react'

export type { IconName }

interface SharedIconProps {
/**
* The height of the icon, in pixels. Width will be calculated by default.
*/
height?: number
}

interface IconPath extends SharedIconProps {
/**
* The url of the icon if rendering a custom icon.
*/
icon: string
/**
* The name of the icon if using icons provided by Dassana. **Note**: Either an `icon` or `iconKey` is required.
*/
iconKey?: never
}

interface IconKey extends SharedIconProps {
iconKey: IconName
icon?: never
}

export type IconProps = IconKey | IconPath

const Icon: FC<IconProps> = ({ height = 32, ...props }: IconProps) => {
const { icon } = props as IconPath
const { iconKey } = props as IconKey

const imgSrc = iconKey ? Icons[iconKey] : icon
const imgAlt = iconKey ? iconKey : icon

return <img alt={imgAlt} height={height} src={imgSrc} />
}

export default Icon
Loading