Skip to content
This repository has been archived by the owner on Jul 28, 2024. It is now read-only.

Add molecule switch #7

Merged
merged 1 commit into from
Aug 20, 2020
Merged

Add molecule switch #7

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 src/ui/molecules/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,2 @@
export * as checkbox from './checkbox';
export * as toggle from './toggle';
85 changes: 85 additions & 0 deletions src/ui/molecules/toggle/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@
import * as React from 'react';
import styled, { StyledComponent } from 'styled-components';

interface ToggleProps {
id: string;
isChecked: boolean;
label?: React.ReactNode;
onChange: React.ChangeEventHandler<HTMLInputElement>;
}

const Toggle: React.FC<ToggleProps & { className: string }> = ({
className,
id,
isChecked,
label,
onChange,
}) => (
<div className={className}>
{label && <div>{label}</div>}
<label htmlFor={id}>
<input type="checkbox" onChange={onChange} id={id} checked={isChecked} />
<span />
</label>
</div>
);

export const Base = styled(Toggle)`
position: relative;

display: flex;
align-items: center;

& > div {
padding-right: 15px;
}

label {
position: relative;

width: var(--toggle-width, 42px);
height: var(--toggle-height, 24px);
}

label > input {
width: 0;
height: 0;

opacity: 0;
}

label > span {
position: absolute;

width: var(--toggle-width, 42px);
height: var(--toggle-height, 24px);

background-color: var(--toggle-unactive-background-color, #d5d5dc);
border-radius: var(--toggle-rounding, 12px);
cursor: pointer;

&:before {
position: absolute;

width: var(--toggle-switcher-width, 12px);
height: var(--toggle-switcher-height, 12px);
margin: calc(
var(--toggle-height, 24px) / 2 - var(--toggle-switcher-height, 12px) / 2
);

background-color: var(--toggle-switcher-background-color, #ffffff);
border-radius: var(--toggle-rounding, 12px);
cursor: pointer;

content: '';
}
}

label > input:checked + span {
background-color: var(--toggle-active-background-color, #d5d5dc);
}

label > input:checked + span:before {
right: 0;
}
` as StyledComponent<'div', Record<string, unknown>, ToggleProps>;
78 changes: 78 additions & 0 deletions src/ui/molecules/toggle/story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
import * as React from 'react';
import styled from 'styled-components';
import { action } from '@storybook/addon-actions';
import { boolean, text } from '@storybook/addon-knobs';

import * as label from '../../atoms/label';
import * as toggle from '.';

export default { title: 'Molecules' };

export const toggles = () => {
const onChange = action('onChange');
const labelText = text('Label', 'Label');
const isChecked = boolean('Toggle', false);
const isCheckedLabel = boolean('Toggle with label', true);
const Label = <label.Primary text={labelText} />;

return (
<>
<div>
<pre style={{ fontSize: '1rem' }}>
{`
import { toggle } from 'woly'

<toggle.Base label="label" onChange={onChange} isChecked={isChecked} id="toggle-id" />
`}
</pre>
</div>
<table>
<thead>
<tr key="heading-key">
<Head>Kind</Head>
<Head>Preview</Head>
</tr>
</thead>
<tbody>
<tr>
<Cell>Primary without label</Cell>
<Preview>
<toggle.Base
onChange={onChange}
isChecked={isChecked}
id="toggle-primary"
/>
</Preview>
</tr>
<tr>
<Cell>Primary with label</Cell>
<Preview>
<toggle.Base
onChange={onChange}
isChecked={isCheckedLabel}
id="toggle-primary-label"
label={Label}
/>
</Preview>
</tr>
</tbody>
</table>
</>
);
};

const Cell = styled.td`
padding: 1rem;

font-size: 1rem;
`;

const Head = styled(Cell)`
font-weight: bold;
`;

const Preview = styled(Cell)`
padding: 2rem;

border: 1px dashed var(--borders, rgb(200, 200, 200));
`;
Loading