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

implement SelectorInput #18

Merged
merged 1 commit into from
Sep 26, 2017
Merged

implement SelectorInput #18

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
1 change: 1 addition & 0 deletions .storybook/stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,2 +1,3 @@
require('../src/components/Header/Header.story');
require('../src/components/Countdown/Countdown.story.js');
require('../src/components/SelectorInput/SelectorInput.story.js');
47 changes: 47 additions & 0 deletions src/components/SelectorInput/SelectorInput.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
import { h } from 'preact';

import * as Colors from './selector-input-color-palette';

const SelectorInput = ({ onChange, disabled }) => (
<input
type="text"
onChange={e => onChange(e.target.value)}
disabled={disabled}
placeholder="Enter your selector here..."
>
<style jsx>{`
input {
width: 100%;
flex: 1;
box-sizing: border-box;
outline: none;
padding: 20px;
background: ${Colors.BACKGROUND};
border: 1px solid ${Colors.BORDER};
border-radius: 3px;
color: ${Colors.TEXT};
align-self: center;
font-family: monospace;
font-size: 16px;
}

input:focus {
border: 1px solid ${Colors.BORDER_FOCUSED};
box-shadow:
0 0 4px 0px ${Colors.BOX_SHADOW_FOCUSED} inset,
0 0 4px 0px ${Colors.BOX_SHADOW_FOCUSED};
}

input:disabled {
background: ${Colors.BACKGROUND_DISABLED};
color: ${Colors.TEXT_DISABLED};
}

input::placeholder {
color: ${Colors.PLACEHOLDER};
}
`}</style>
</input>
);

export { SelectorInput };
18 changes: 18 additions & 0 deletions src/components/SelectorInput/SelectorInput.story.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import { h } from 'preact';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';

import { SelectorInput } from './SelectorInput';

storiesOf('SelectorInput', module)
.add('default', () => (
<SelectorInput
onChange={action('onChange')}
/>
))
.add('disabled', () => (
<SelectorInput
onChange={action('onChange')}
disabled
/>
));
10 changes: 10 additions & 0 deletions src/components/SelectorInput/selector-input-color-palette.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
export const BACKGROUND = '#2f5e5a';
Copy link
Member

Choose a reason for hiding this comment

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

Do we already have / plan to have a global palette? I believe the same colours will used in other components (like Round Name, Pearl Thread etc)

Copy link
Member

Choose a reason for hiding this comment

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

If we have time for that, I'd also reorganise the palette a bit into colors and their semantic assignments. That's if we really have a fixed (minimal number of colors) color palette, which is generally a good thing.

Smth. like

const WHITE = '#fff' // is not recommended btw
export const GENERIC_TEXT = WHITE // only semantic constants are exported, pure colors can't be used without a meaningful UX role.

Copy link
Member Author

Choose a reason for hiding this comment

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

I think it will be easier to implement components in this way and later extract same colors to color palette.

const WHITE = '#fff' // is not recommended btw

Agree, I prefer smth like BRAND_PRIMARY, BRAND_ACCENT etc.

Copy link
Member

@DaQuirm DaQuirm Sep 26, 2017 •
edited
Loading

Choose a reason for hiding this comment

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

I think it will be easier to implement components in this way and later extract same colors to color palette.

Sure, let's just maybe create a task/issue for that?

Concerning white, it's just that pure white is not recommended as such, it's too "technical" a color — shades of white, warm or cool, should be preferred.

BRAND_PRIMARY and such would be semantic names.

Copy link
Member Author

Choose a reason for hiding this comment

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

let's just maybe create a task/issue for that?

#20

Copy link
Member

Choose a reason for hiding this comment

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

👍

export const BORDER = '#739c92';
export const TEXT = '#fff';
export const PLACEHOLDER = '#badece';

export const BORDER_FOCUSED = 'rgba(248, 217, 64, 0.4)';
export const BOX_SHADOW_FOCUSED = 'rgba(248, 217, 64, 0.2)';

export const BACKGROUND_DISABLED = 'rgba(84, 165, 158, 0.5)';
export const TEXT_DISABLED = '#b5bdbd';