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.

Sign up for GitHub

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

Moved input, checkbox components #292

Open
wants to merge 5 commits into
base: feature/update
Choose a base branch
from
Open

Moved input, checkbox components #292

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
7c5f8ca
Moved input, checkbox components
szafran89 Aug 28, 2020
1d9a24b
Fix for icon password classes
szafran89 Sep 11, 2020
715c4fa
Removed icon title
szafran89 Sep 11, 2020
f74173c
Fixed UT
szafran89 Sep 11, 2020
0d011e1
Removed old version of Input and Checkbox
szafran89 Sep 11, 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
52 changes: 0 additions & 52 deletions _src /molecules/checkbox/Checkbox.scss
View file
Open in desktop

This file was deleted.

50 changes: 0 additions & 50 deletions _src /molecules/input/Input.scss
View file
Open in desktop

This file was deleted.

112 changes: 0 additions & 112 deletions _src /molecules/input/Input.stories.js
View file
Open in desktop

This file was deleted.

2 changes: 1 addition & 1 deletion src/atoms/icon/Icon.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -338,7 +338,7 @@ export const Default = () => ({
<a-icon-visibility-off />
</a-icon>
<span :style="labelStyles">
visibility
visibility Off
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you change to visibility_off to make it consistent with other labels?

</span>
</div>
<div :style="wrapperStyles">
Expand Down
2 changes: 1 addition & 1 deletion src/atoms/label/Label.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
.a-label {
@apply block;
@apply mb-1;
@apply text-gray-600 leading-relaxed;
@apply text-gray-600 text-sm leading-relaxed;
}

.a-label--inline {
Expand Down
40 changes: 40 additions & 0 deletions src/molecules/checkbox/Checkbox.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
.a-checkbox {
@apply relative;
@apply flex;
}

.a-checkbox__field {
@apply absolute opacity-0;
}

.a-checkbox__field:checked + .a-checkbox__label {
@apply text-default;
}

.a-checkbox__field:checked + .a-checkbox__label .a-checkbox__icon-wrapper {
@apply bg-dark;
@apply border-dark;
}

.a-checkbox__field:checked + .a-checkbox__label .a-checkbox__icon {
@apply opacity-100;
@apply fill-white;
}

.a-checkbox__label {
@apply flex items-center;
@apply text-sm text-gray-600;
@apply cursor-pointer;
}

.a-checkbox__icon-wrapper {
@apply mr-4;
@apply border-2 border-solid border-secondary rounded-sm;
}

.a-checkbox__icon {
@apply w-5 h-5;
@apply opacity-0;
@apply cursor-pointer;
@apply fill-gray-600;
}
5 changes: 1 addition & 4 deletions _src /molecules/checkbox/Checkbox.html → src/molecules/checkbox/Checkbox.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,10 +14,7 @@
class="a-checkbox__label"
>
<div class="a-checkbox__icon-wrapper">
<a-icon
:title="iconTitle"
class="a-checkbox__icon"
>
<a-icon class="a-checkbox__icon">
<a-icon-check />
</a-icon>
</div>
Expand Down
7 changes: 0 additions & 7 deletions _src /molecules/checkbox/Checkbox.js → src/molecules/checkbox/Checkbox.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,13 +27,6 @@ export default {
inputClass: {
type: String,
default: null
},
/**
* Icon title
*/
iconTitle: {
type: String,
default: null
}
}
}
2 changes: 1 addition & 1 deletion _src /molecules/checkbox/Checkbox.spec.js → src/molecules/checkbox/Checkbox.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ describe('Checkbox', () => {
}
})

expect(wrapper.is('div')).toBe(true)
expect(wrapper.element.tagName).toBe('DIV')
expect(wrapper.classes()).toContain('a-checkbox')
expect(wrapper.classes().length).toBe(1)
})
Expand Down
40 changes: 25 additions & 15 deletions _src /molecules/checkbox/Checkbox.stories.js → src/molecules/checkbox/Checkbox.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,8 @@ import AIconCheck from './../../atoms/icon/templates/IconCheck.vue'
const defaultData = {
data: () => {
return {
status: true
status: true,
status1: false
}
},
methods: {
Expand All @@ -22,16 +23,28 @@ storiesOf('Molecules/Checkbox', module)
...defaultData,
components: { ACheckbox },
template: `
<a-checkbox
id="checkbox-default"
name="checkbox-default"
icon-title="Checked icon"
v-model="status"
value="some value"
@change="onChange"
>
Checkbox field
</a-checkbox>
<div>
<a-checkbox
class="mb-4"
id="checkbox-default"
name="checkbox-default1"
v-model="status"
value="some value"
@change="onChange"
>
Checkbox field
</a-checkbox>
<a-checkbox
class="mb-4"
id="checkbox-default1"
name="checkbox-default1"
v-model="status1"
value="some value"
@change="onChange"
>
Checkbox field
</a-checkbox>
</div>
`
}))
.add('With slot', () => ({
Expand All @@ -57,10 +70,7 @@ storiesOf('Molecules/Checkbox', module)
style="color: #0000ff;"
>
<div class="a-checkbox__icon-wrapper">
<a-icon
class="a-checkbox__icon"
title="Checked icon"
>
<a-icon class="a-checkbox__icon">
<a-icon-check />
</a-icon>
</div>
Expand Down
2 changes: 1 addition & 1 deletion _src /molecules/checkbox/Checkbox.vue → src/molecules/checkbox/Checkbox.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,4 +12,4 @@ export default {
}
</script>

<style lang="scss" src="./Checkbox.scss" />
<style src="./Checkbox.css" />
Loading