Commit ba27e85a authored by Andrey Azov's avatar Andrey Azov
Browse files

Update styles and stories for ShadedInput and ShadedTextarea

parent 0e425b2d
Pipeline #178726 passed with stage
in 2 minutes and 20 seconds
......@@ -16,8 +16,8 @@
}
.shadedInput {
box-shadow: inset 2px 2px 4px -2px $medium-dark-grey, inset -2px -2px 1px -2px $dark-grey;
box-shadow: $form-field-shadow;
border: none;
padding: 4px 15px;
padding: 0 15px;
height: 30px;
}
......@@ -9,6 +9,11 @@
&:active {
outline: none;
}
&::placeholder {
color: $black;
font-weight: $light;
}
}
.disableResize {
......@@ -16,7 +21,7 @@
}
.shadedTextarea {
box-shadow: inset 2px 2px 4px -2px $dark-grey;
box-shadow: $form-field-shadow;
padding: 7px 15px;
border: none;
padding: 4px;
}
......@@ -39,6 +39,7 @@ $mustard: #cc9933;
$green: #47d147;
$global-box-shadow: $medium-light-grey;
$form-field-shadow: inset 2px 2px 4px -2px $medium-dark-grey, inset -2px -2px 1px -2px $dark-grey;
/* stylelint-disable */
:export {
......
......@@ -4,7 +4,15 @@
max-width: 500px;
}
.greyWrapper {
.stage {
padding: 50px;
& + .stage {
margin-top: 4ch;
}
}
.greyStage {
background-color: $light-grey;
}
......
......@@ -66,26 +66,24 @@ export const FocusAndBlurStory = (args: DefaultArgs) => (
FocusAndBlurStory.storyName = 'handling focus and blur';
export const ShadedInputStory = (args: DefaultArgs) => (
<div>
<Wrapper
input={ShadedInput}
placeholder="Placeholder for dev..."
{...args}
/>
<div
style={{
marginTop: '100px',
backgroundColor: '#f1f2f4',
padding: '50px'
}}
>
<>
<div className={styles.stage}>
<p>Against white background</p>
<Wrapper
input={ShadedInput}
placeholder="Placeholder for dev..."
{...args}
/>
</div>
</div>
<div className={`${styles.stage} ${styles.greyStage}`}>
<p>Against grey background</p>
<Wrapper
input={ShadedInput}
placeholder="Placeholder for dev..."
{...args}
/>
</div>
</>
);
ShadedInputStory.storyName = 'shaded input';
......
......@@ -12,3 +12,15 @@
padding: 40px;
background: $light-grey;
}
.stage {
padding: 30px;
& + .stage {
margin-top: 3ch;
}
}
.greyStage {
background: $light-grey;
}
......@@ -28,21 +28,27 @@ type DefaultArgs = {
const Wrapper = (props: any) => {
const [value, setValue] = useState('');
const { textarea: Textarea, ...otherProps } = props;
const { textarea: Textarea, wrapperClassName, ...otherProps } = props;
return (
<div className={styles.defaultWrapper}>
<div className={wrapperClassName}>
<Textarea value={value} onChange={setValue} {...otherProps} />
</div>
);
};
export const DefaultStory = () => <Wrapper textarea={Textarea} />;
export const DefaultStory = () => (
<Wrapper textarea={Textarea} wrapperClassName={styles.defaultWrapper} />
);
DefaultStory.storyName = 'default';
export const WithPlaceholderStory = () => (
<Wrapper textarea={Textarea} placeholder="Enter something..." />
<Wrapper
textarea={Textarea}
placeholder="Enter something..."
wrapperClassName={styles.defaultWrapper}
/>
);
WithPlaceholderStory.storyName = 'with placeholder';
......@@ -51,6 +57,7 @@ export const NoResizeStory = () => (
<Wrapper
textarea={Textarea}
placeholder="Enter something..."
wrapperClassName={styles.defaultWrapper}
resizable={false}
/>
);
......@@ -61,6 +68,7 @@ export const FocusBlurStory = (args: DefaultArgs) => (
<Wrapper
textarea={Textarea}
placeholder="Enter something..."
wrapperClassName={styles.defaultWrapper}
onFocus={args.onFocus()}
onBlur={args.onBlur()}
/>
......@@ -69,12 +77,26 @@ export const FocusBlurStory = (args: DefaultArgs) => (
FocusBlurStory.storyName = 'with onFocus and onBlur';
export const ShadedTextareaStory = (args: DefaultArgs) => (
<Wrapper
textarea={ShadedTextarea}
placeholder="Enter something..."
onFocus={args.onFocus()}
onBlur={args.onBlur()}
/>
<>
<div className={styles.stage}>
<p>Against a white background</p>
<Wrapper
textarea={ShadedTextarea}
placeholder="Enter something..."
onFocus={args.onFocus()}
onBlur={args.onBlur()}
/>
</div>
<div className={`${styles.stage} ${styles.greyStage}`}>
<p>Against a grey background</p>
<Wrapper
textarea={ShadedTextarea}
placeholder="Enter something..."
onFocus={args.onFocus()}
onBlur={args.onBlur()}
/>
</div>
</>
);
ShadedTextareaStory.storyName = 'shaded textarea';
......@@ -83,6 +105,7 @@ export const CustomStyledStory = () => (
<Wrapper
textarea={Textarea}
placeholder="Enter something..."
wrapperClassName={styles.defaultWrapper}
className={styles.customizedTextarea}
/>
);
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment