Added components: RadioButton, RadioGroup (#3505)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>

packages/theme/styles/components.scss

@@ -301,6 +301,74 @@
 }
 .ac-column__list-item + .ac-column__list-item { margin-top: .75rem; }
 
+/* Radio Button */
+.antiRadio {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  border: 0;
+  padding: 0;
+  clip: rect(0 0 0 0);
+  overflow: hidden;
+
+  & + label {
+    position: relative;
+    margin-top: .375rem;
+    padding-left: 1.375rem;
+    font-size: .8125rem;
+
+    &.gap-none { margin-bottom: .375rem; }
+    &.gap-small { margin-bottom: .625rem; }
+    &.gap-medium { margin-bottom: .875rem; }
+
+    &::before,
+    &::after {
+      position: absolute;
+      border-radius: 50%;
+    }
+    &::before {
+      content: '';
+      top: .0625rem;
+      left: 0;
+      width: 1rem;
+      height: 1rem;
+      background-color: var(--theme-button-default);
+      border: 1px solid var(--theme-button-border);
+    }
+    &::after {
+      top: .3125rem;
+      left: .25rem;
+      width: .5rem;
+      height: .5rem;
+      background-color: var(--accented-button-color);
+    }
+  }
+  &:not(:disabled, :checked) + label:hover::before { background-color: var(--theme-button-hovered); }
+  &:not(:disabled):active + label::before { background-color: var(--theme-button-pressed); }
+  &:disabled + label::before {
+    background-color: var(--theme-button-border);
+    border-color: transparent;
+  }
+  &:focus + label::before { box-shadow: 0 0 0 2px var(--accented-button-outline); }
+  &:focus:not(:checked) + label::before {
+    background-color: var(--theme-button-focused);
+    border-color: var(--theme-button-focused-border);
+  }
+  &:checked + label::before {
+    background-color: var(--accented-button-default);
+    border-color: var(--accented-button-border);
+  }
+  &:checked:focus + label::before { background-color: var(--accented-button-focused); }
+  &:checked:hover + label::before { background-color: var(--accented-button-hovered); }
+  &:checked:active + label::before { background-color: var(--accented-button-pressed); }
+  &:checked:disabled + label::before {
+    background-color: var(--accented-button-disabled);
+    border-color: var(--theme-button-border);
+  }
+  &:checked + label::after { content: ''; }
+}
+
 /* StatesBar */
 .antiStatesBar {
   overflow-x: auto;

packages/ui/src/components/RadioButton.svelte

@@ -0,0 +1,49 @@
+<!--
+// Copyright © 2020 Anticrm Platform Contributors.
+// 
+// Licensed under the Eclipse Public License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License. You may
+// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
+// 
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// 
+// See the License for the specific language governing permissions and
+// limitations under the License.
+-->
+<script lang="ts">
+  import type { IntlString } from '@hcengineering/platform'
+  import { generateId } from '@hcengineering/core'
+  import { Label } from '..'
+
+  export let id: string = generateId()
+  export let group: any
+  export let value: any
+  export let disabled: boolean = false
+  export let label: string | undefined = undefined
+  export let labelIntl: IntlString | undefined = undefined
+  export let labelParams: Record<string, any> | undefined = undefined
+  export let action: () => void = () => {}
+  export let gap: 'small' | 'medium' | 'none' = 'none'
+</script>
+
+<input
+  class="antiRadio"
+  {id}
+  type="radio"
+  bind:group
+  {value}
+  {disabled}
+  on:click={() => {
+    if (!disabled && group !== value) action()
+  }}
+/>
+<label for={id} class="gap-{gap}">
+  <slot />
+  {#if labelIntl}
+    <Label label={labelIntl} params={labelParams} />
+  {:else}
+    {label}
+  {/if}
+</label>

packages/ui/src/components/RadioGroup.svelte

@@ -0,0 +1,41 @@
+<!--
+// Copyright © 2020 Anticrm Platform Contributors.
+// 
+// Licensed under the Eclipse Public License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License. You may
+// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
+// 
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// 
+// See the License for the specific language governing permissions and
+// limitations under the License.
+-->
+<script lang="ts">
+  import type { RadioItem } from '..'
+  import { RadioButton } from '..'
+
+  export let items: RadioItem[]
+  export let selected: any | undefined = undefined
+  export let disabled: boolean = false
+  export let gap: 'small' | 'medium' | 'none' = 'small'
+</script>
+
+{#if items && items.length > 0}
+  <div class="flex-col">
+    {#each items as item, i}
+      <RadioButton
+        bind:group={selected}
+        id={item.id}
+        label={item.label}
+        labelIntl={item.labelIntl}
+        labelParams={item.labelParams}
+        value={item.value}
+        disabled={disabled ? true : item.disabled}
+        action={item.action}
+        gap={i < items.length - 1 ? gap : 'none'}
+      />
+    {/each}
+  </div>
+{/if}

packages/ui/src/index.ts

@@ -50,6 +50,8 @@ export { default as Component } from './components/Component.svelte'
 export { default as Icon } from './components/Icon.svelte'
 export { default as ActionIcon } from './components/ActionIcon.svelte'
 export { default as Toggle } from './components/Toggle.svelte'
+export { default as RadioButton } from './components/RadioButton.svelte'
+export { default as RadioGroup } from './components/RadioGroup.svelte'
 export { default as Dialog } from './components/Dialog.svelte'
 export { default as ToggleWithLabel } from './components/ToggleWithLabel.svelte'
 export { default as MiniToggle } from './components/MiniToggle.svelte'

packages/ui/src/types.ts

@@ -115,6 +115,16 @@ export interface TabItem {
   action?: () => void
 }
 
+export interface RadioItem {
+  id?: string
+  label?: string
+  labelIntl?: IntlString
+  labelParams?: Record<string, any>
+  value: any
+  disabled?: boolean
+  action?: () => void
+}
+
 export type ButtonKind =
   | 'accented'
   | 'brand'